@eka-care/medical-records-ui

Framework-agnostic React SDK for the Eka Care Medical Records feature. Drop it into any React app (Next.js, Vite, Electron) to get a full records list, filters, upload flow, and document preview.

Installation

npm install @eka-care/medical-records-ui

Peer dependencies

Make sure these are installed in your host app:

npm install react react-dom zustand lucide-react

Setup

1. Import styles

In your app's entry point (e.g. _app.tsx, main.tsx):

import '@eka-care/medical-records-ui/styles';

2. Wrap with SdkProvider

import { SdkProvider } from '@eka-care/medical-records-ui';

<SdkProvider
  config={{ environment: 'prod' }}
  bid="YOUR_BID"
  patientId="YOUR_PATIENT_ID"
>
  {/* your app or the RecordsView */}
</SdkProvider>

If bid or patientId are not yet available (e.g. no patient selected), SdkProvider renders a placeholder automatically — no extra handling needed.

3. Render the records view

import { SdkProvider, RecordsView } from '@eka-care/medical-records-ui';

export function MedicalRecordsPanel({ bid, patientId }) {
  return (
    <SdkProvider
      config={{ environment: 'prod' }}
      bid={bid}
      patientId={patientId}
    >
      <RecordsView />
    </SdkProvider>
  );
}

SdkProvider props

| Prop | Type | Required | Description | |------|------|----------|-------------| | config | SdkConfig | Yes | SDK configuration (see below) | | bid | string | No | Business/clinic ID. Shows placeholder when absent. | | patientId | string | No | Patient ID. Shows placeholder when absent. | | documentTypes | DocumentTypeConfig[] | No | Document type labels from your onboarding config. Falls back to built-in labels. |

SdkConfig

| Field | Type | Description | |-------|------|-------------| | environment | 'prod' \| 'staging' | API environment | | baseUrl | string | Override the API base URL (useful for proxying) | | accessToken | string | Auth token. Not needed if using cookie-based auth. | | onUnauthorized | () => void | Called on 401 — use to refresh the token or redirect to login | | defaultHeaders | Record<string, string> | Extra headers added to every request |

RecordsView props

| Prop | Type | Description | |------|------|-------------| | allowUpload | boolean | Show/hide the upload button. Default: true | | attachedIds | string[] | Record IDs already attached to the current session context | | maxAttachable | number | Max records attachable at once | | onAttachToContext | (records) => void | Called when user adds a record to session context | | onRemoveAttachment | (documentId) => void | Called when user removes a record from context | | onCopyToNote | (text, anchor?) => void | Called when user copies a smart report to notes | | onToast | (message, type?) => void | Hook into the host app's toast/notification system |

Authentication

The SDK uses cookie-based auth automatically when running on the same domain as the Eka Care backend. For token-based auth pass accessToken in config and provide onUnauthorized to handle token refresh:

<SdkProvider
  config={{
    environment: 'prod',
    accessToken: yourToken,
    onUnauthorized: refreshToken,
  }}
  bid={bid}
  patientId={patientId}
>

PDF support

No setup required. PDF preview works out of the box — the SDK loads the pdfjs worker from CDN automatically.

Next.js

Works without any extra webpack config. react-pdf and pdfjs-dist are peer dependencies — install them in your app:

npm install react-pdf pdfjs-dist

Development

# Start the dev playground at https://test.1.eka.care:4443
npm run dev

# Build the SDK
npm run build

# Run tests
npm test

Dev playground setup

The playground runs on https://test.1.eka.care:4443 so auth cookies from the Eka Care backend are available.

1. Add to /etc/hosts:

   127.0.0.1  test.1.eka.care

2. Generate a local certificate:

   cd certificates && mkcert test.1.eka.care

3. Log into the Eka Care app on test.1.eka.care so the auth cookie is set.

4. Run npm run dev and open https://test.1.eka.care:4443.