Skip to main content

​
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

PropTypeRequiredDescription
proxyUrlstringYesBackend proxy URL (or 'demo' for demo mode)
patientIdstringNoPatient ID to load (if omitted, shows create form)
theme'light' | 'dark' | 'glassmorphism'NoColor theme

​
Views

The dashboard has three views:
  1. Create — Patient creation form (firstName, lastName, email)
  2. Profile — Patient overview with all related resources
  3. Edit — Inline patient update form

​
What It Displays

The profile view shows the patient’s destructured FHIR bundle:
SectionFHIR ResourceEnriched Fields
Patient infoPatientname, email, photo, maritalStatus, languages, contacts
AppointmentsAppointmentstatus, appointmentType, serviceType, specialty, priority, created
Labs & DiagnosticsDiagnosticReportcode, status, category, effectiveDateTime/Period, conclusion
PrescriptionsMedicationRequestmedication, status, priority, category, dosageText, courseOfTherapy
Clinical NotesDocumentReferencetitle, 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