Skip to main content
PatientDashboard is a comprehensive summary widget that pulls together the most important information about a patient into a single view. It displays demographics, recent encounters with status badges, the latest vital signs, active medications, and upcoming appointments — all fetched through a backend proxy you control.
Your API key must never appear in client-side code. The PatientDashboard widget communicates exclusively with the proxyUrl you provide. Your backend proxy holds the key and calls ClinikAPI on the widget’s behalf.

​
Props

​
props.proxyUrl
string
required
URL of your backend proxy endpoint. The widget sends a GET request to this URL and expects a PatientReadResponse — a patient resource with included Encounter, Observation, MedicationRequest, and Appointment resources.
​
props.className
string
CSS class name applied to the widget’s root element for layout and theming control.
​
props.onError
(error: Error) => void
Callback invoked when the widget fails to load patient data. Use this to show an error message or log to your monitoring service.

​
Proxy setup

Your proxy endpoint must return a patient with the related resources included. Use the include option to tell the SDK which resource types to fetch alongside the patient: 
// app/api/clinik/patients/[id]/route.ts
import { Clinik } from '@clinikapi/sdk';

const clinik = new Clinik(process.env.CLINIKAPI_SECRET_KEY!);

export async function GET(
  req: Request,
  { params }: { params: { id: string } }
) {
  const { data } = await clinik.patients.read(params.id, {
    include: ['Encounter', 'Observation', 'MedicationRequest', 'Appointment'],
  });

  return Response.json(data);
}
Add your own authorization check before the clinik.patients.read call to verify that the logged-in user has access to this patient record.

​
Usage

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

export default function PatientPage({ patientId }: { patientId: string }) {
  return (
    <PatientDashboard
      proxyUrl={`/api/clinik/patients/${patientId}`}
      onError={(err) => console.error('Dashboard error:', err)}
    />
  );
}

​
What it displays

The widget renders four sections using the data returned by your proxy:
  • Demographics: patient name, date of birth, gender, and contact information
  • Recent encounters: a list of clinical encounters with status badges (planned, in-progress, finished, cancelled)
  • Latest vitals: the most recent recorded vital signs for the patient
  • Active medications: current MedicationRequest resources with dosage and status
  • Upcoming appointments: scheduled appointments sorted by date
If you omit a resource type from the include array in your proxy, the corresponding section in the widget will be empty rather than causing an error. You can safely exclude resource types your application does not use.