PatientDashboard

A comprehensive patient overview displaying demographics, appointments, lab reports, prescriptions, and clinical notes. Supports light, dark, and glassmorphism themes.

Usage

import { PatientDashboard } from '@clinikapi/react';

<PatientDashboard
  proxyUrl="/api/clinik"
  patientId="pt_abc123"
  theme="light"
/>

Props

Prop	Type	Required	Description
`proxyUrl`	`string`	Yes	Backend proxy URL (or `'demo'` for demo mode)
`patientId`	`string`	No	Patient ID to load (if omitted, shows create form)
`theme`	`'light' \| 'dark' \| 'glassmorphism'`	No	Color theme

Views

The dashboard has three views:

Create — Patient creation form (firstName, lastName, email)
Profile — Patient overview with all related resources
Edit — Inline patient update form

What It Displays

The profile view shows the patient’s destructured FHIR bundle:

Section	FHIR Resource	Enriched Fields
Patient info	Patient	name, email, photo, maritalStatus, languages, contacts
Appointments	Appointment	status, appointmentType, serviceType, specialty, priority, created
Labs & Diagnostics	DiagnosticReport	code, status, category, effectiveDateTime/Period, conclusion
Prescriptions	MedicationRequest	medication, status, priority, category, dosageText, courseOfTherapy
Clinical Notes	DocumentReference	title, docStatus, type, category, practiceSetting

Proxy Endpoint

Your proxy should handle the patients.read action with included resources:

// Handle patients.read action
case 'patients.read':
  const { data } = await clinik.patients.read(body.data.id, {
    include: body.data.include || [
      'Encounter', 'Observation', 'MedicationRequest',
      'Appointment', 'DiagnosticReport', 'DocumentReference',
    ],
  });
  return Response.json({ data });

The SDK returns a PatientReadResponse with:

{
  patient: Patient;
  encounters: Encounter[];
  observations: Observation[];
  medications: Medication[];
  appointments: Appointment[];
  intakes: QuestionnaireResponse[];
  consents: Consent[];
  labs: DiagnosticReport[];
  prescriptions: MedicationRequest[];
  notes: DocumentReference[];
  assessments: ClinicalImpression[];
  documents: Composition[];
}

Actions

The dashboard can trigger:

patients.create — Create a new patient
patients.read — Load patient with included resources
patients.update — Update patient demographics
appointments.create — Schedule an appointment

​PatientDashboard

​Usage

​Props

​Views

​What It Displays

​Proxy Endpoint

​Actions