@eka-care/abdm-dashboard

v0.0.28

Published

5 days ago

A React-based embeddable SDK for managing [Ayushman Bharat Digital Mission (ABDM)](https://abdm.gov.in/) workflows at healthcare facilities. Handles HPR/HFR onboarding for new clinics and exposes a full dashboard for ABHA accounts, metrics, automation tas

0High
0Medium
0Low

ABDM Dashboard

A React-based embeddable SDK for managing Ayushman Bharat Digital Mission (ABDM) workflows at healthcare facilities. Handles HPR/HFR onboarding for new clinics and exposes a full dashboard for ABHA accounts, metrics, automation tasks, and multilingual appointment posters.

Overview

ABDM is India's national digital health initiative. This SDK embeds into any healthcare management system and handles two scenarios:

New clinic (no HFR ID): Shows the HPR/HFR onboarding wizard. After success, either transitions to the dashboard or calls onAbdmOnboardSuccess and unmounts (controlled by showDashboardOnSuccess).
Returning clinic (has HFR ID): Dashboard loads directly.

Features

| Feature | Description | |---|---| | HPR/HFR Onboarding | Step-by-step wizard to register a doctor (HPR) and clinic (HFR) with ABDM via Aadhaar OTP | | Metrics Dashboard | Track ABHA adoption, KYC completion, consent rates, and earnings | | Automation | Toggle automated messaging for KYC, ABHA creation, and consent requests | | QR Code Posters | Download appointment QR code posters in 9 regional languages | | Earnings Tracking | Monitor ABDM participation incentives for the clinic |

Onboarding Flow

Triggered when the landing API returns no hip_id for the clinic. The screen stack progresses through:

CREATE
  └─ Doctor selects clinic (if >1 provided) and doctor profile
  └─ Enters Aadhaar number → triggers OTP
VERIFY_OTP
  └─ Verify Aadhaar OTP + confirm mobile number
SETUP_HPR
  └─ Choose or create HPR ID, set email, password, practice type, pincode
HPR_SUCCESSFUL
  └─ HPR ID confirmed
VERIFY_CLINIC
  └─ Link an existing HFR or register a new one (photos, address, facility type)
HFR_SUCCESSFUL
  └─ Onboarding complete
      ├─ showDashboardOnSuccess: true  → navigate to dashboard
      └─ showDashboardOnSuccess: false → fire onAbdmOnboardSuccess and unmount

The left illustration panel is hidden on mobile and can also be suppressed via hideEkaSidePanel: true.

Integration

The SDK attaches two functions to window after the bundle loads.

Mount: index.html

for dev/stg, change this url https://unpkg.com/@eka-care/abdm-dashboard to https://unpkg.com/@eka-care/abdm-dashboard-stg in below code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ABDM Dashboard</title>
    <link rel="stylesheet" href="https://unpkg.com/@eka-care/abdm-dashboard/dist/sdk/abdm/css/abdm.css" />
  </head>
  <body>
    <div id="abdm-root" style="width: 100%; height: 100dvh;"></div>

    <script src="https://unpkg.com/@eka-care/abdm-dashboard/dist/sdk/abdm/js/abdm.js"></script>
    <script>
      window.abdmDashboardMount('abdm-root', {
        clinicId: 'your-clinic-id',
        clientId: 'ext',
        accessToken: 'your-auth-token',
        showDashboardOnSuccess: true,
        onAbdmMountSuccess: (params) => console.log('Mounted', params),
        onAbdmDashboardClose: (params) => console.log('Closed', params),
        onAbdmDashboardError: (params) => console.error('Error', params),
        onAbdmOnboardSuccess: (params) => console.log('Onboarded', params),
      });
    </script>
  </body>
</html>

Unmount

window.abdmDashboardUnmount('abdm-root');

Mount Options

| Option | Type | Required | Description | |---|---|---|---| | clinicId | string | Yes* | Single clinic ID. Use when there is only one clinic | | clinics | ClinicConfig[] | Yes* | Clinic list from Hub API. If >1, a selector is shown in onboarding | | doctors | DoctorConfig[] | No | Full doctor list from Hub API, filtered per selected clinic | | getDrList | () => Promise<DrProfile[]> | No | Callback to fetch doctors. Takes precedence over doctors | | clientId | string | No | Client identifier. Defaults to "doc-web" | | accessToken | string | No | Auth token. Also read from window.Eka.getHeaders() (Android) or window.iosHeaders (iOS) | | hideEkaSidePanel | boolean | No | Hides the left illustration panel during onboarding | | showDashboardOnSuccess | boolean | No | true (default) — go to dashboard after HFR success. false — fire onAbdmOnboardSuccess and unmount | | onAbdmMountSuccess | (params) => void | No | Fired when the SDK mounts successfully | | onAbdmDashboardClose | (params) => void | No | Fired when the dashboard is closed | | onAbdmDashboardError | (params) => void | No | Fired on errors | | onAbdmOnboardSuccess | (params) => void | No | Fired after HPR+HFR onboarding. Receives facilityId and createdHprId |

*Either clinicId or clinics must be provided.

Development

Run locally

# PROD
sudo env "VITE_APP_ENV=PROD" yarn dev --scope=abdm --include-dependencies

# DEV
sudo env yarn dev --scope=abdm --include-dependencies

Local Testing

When VITE_APP_MODE=DEBUG is set (done automatically by the dev script), main.tsx auto-mounts the SDK on load — no host page needed.

Steps:

Open src/main.tsx and find the DEBUG block at the bottom.
Set accessToken to a valid bearer token.
Set clinicId to the clinic you want to test.
Run the dev server and open the Vite dev URL in your browser.

// main.tsx — DEBUG block
mountABDMDashboard("abdm-root", {
  clientId: "ext",
  clinicId: "YOUR_CLINIC_ID",
  accessToken: "YOUR_TOKEN wihout Bearer",
  showDashboardOnSuccess: true,
  hideEkaSidePanel: false,
  onAbdmDashboardClose: (p) => console.log("closed", p),
  onAbdmMountSuccess: (p) => console.log("mounted", p),
  onAbdmOnboardSuccess: (p) => console.log("onboarded", p),
  onAbdmDashboardError: (p) => console.log("error", p),
});

Testing scenarios:

| Scenario | How to trigger | |---|---| | Onboarding wizard | Use a clinicId that has no HFR ID — landing API returns no hip_id | | Dashboard directly | Use a clinicId that already has an HFR ID | | Multi-clinic selector | Uncomment the clinics + doctors arrays in the DEBUG block | | Mobile single-panel layout | Set hideEkaSidePanel: true | | Post-onboarding unmount | Set showDashboardOnSuccess: false | | OTP auto-read (device only) | Call window.onOtpAutoRead({ success: true, otp: "123456" }) from the native bridge |

Build

Run the build commands from repo root

# Staging
sudo yarn build-abdm:stg

# Production
sudo yarn build-abdm:prod

Build output

| File | Path | |---|---| | JS bundle | dist/sdk/abdm/js/abdm.js | | CSS bundle | dist/sdk/abdm/css/abdm.css | | Assets | dist/sdk/abdm/assets/ |

Project Structure

src/
├── main.tsx                        # SDK entry — exports mountABDMDashboard / unmountABDMDashboard
├── abdm-dashboard.tsx              # Root component (Redux Provider wrapper)
├── home.tsx                        # Entry view — shows onboarding or dashboard based on HFR status
├── app/
│   └── store.ts                    # Redux store
├── hpr-hfr-onboardding/            # HPR/HFR onboarding wizard
│   ├── index.tsx                   # Wizard root — side panel + screen stack
│   ├── screen-switcher/index.tsx   # Screen router (SCREEN_NAMES enum → component)
│   ├── screens/
│   │   ├── create.tsx              # Step 1: Aadhaar input, clinic/doctor selection
│   │   ├── verify-otp.tsx          # Step 2: Aadhaar OTP + mobile verification
│   │   ├── setup-hpr.tsx           # Step 3: HPR ID setup (email, password, pincode)
│   │   ├── hpr-successful.tsx      # Step 4: HPR registration confirmed
│   │   ├── verify-clinic.tsx       # Step 5: HFR creation or linking
│   │   ├── hfr-successful.tsx      # Step 6: HFR registration confirmed
│   │   └── loader-screen.tsx       # Full-screen loader between steps
│   ├── LandingPage/
│   │   └── Illustration.tsx        # Left side-panel illustration
│   └── components/                 # Form fields, inputs, stepper, modals, dialogs
├── components/
│   ├── abha-metric.tsx             # KPI cards with date filters
│   ├── abha-workflows.tsx          # Workflow action cards
│   ├── notification-header.tsx     # Top banner
│   ├── cards/                      # Metric, workflow, request card components
│   ├── modal/
│   │   ├── modal.tsx               # Modal container
│   │   ├── automateTaks-modal.tsx  # Automation settings
│   │   └── select-lang-modal.tsx   # Language selector for PDF download
│   └── loader/                     # Skeleton loaders
├── features/
│   ├── api/
│   │   ├── baseApi.ts              # RTK Query base (ndhm.eka.care / ndhm.dev.eka.care)
│   │   └── refreshAuth.ts          # 401 token refresh handler
│   ├── hpr-hfr-apis/               # HPR/HFR onboarding API mutations
│   │   ├── post-hpr-aadhaar-otp.ts
│   │   ├── post-hpr-verify-aadhaar-otp.ts
│   │   ├── post-hpr-mobile-verify.ts
│   │   ├── post-is-hpr-id-available.ts
│   │   ├── post-create-hpr.ts
│   │   ├── get-session-status.ts
│   │   ├── get-suggest-facilities.ts
│   │   ├── post-create-hfr.ts
│   │   └── post-link-hfr.ts
│   ├── cardApis/cardApi.ts         # Metrics cards API
│   ├── landingApi/hmisDetailsApi.ts    # Clinic/HMIS details API
│   ├── tasksApis/                  # Automation settings APIs (get + update)
│   └── slice/
│       ├── landingApiSlice.ts      # Dashboard Redux state
│       └── hprHfrOnboardingSlice.ts# Onboarding wizard Redux state
├── appointment-token-pdf/          # Multilingual QR poster PDF generation
│   ├── pdf-page1.tsx
│   ├── pdf-page2.tsx
│   └── translations.ts
├── config/runtime-config.ts        # Runtime config (clientId, accessToken)
├── types/pagify-sdk.d.ts           # Pagify SDK type definitions
└── utils/
    ├── constants.ts
    └── helpers.ts

API Reference

Base URL:

Prod: https://ndhm.eka.care
Dev: https://ndhm.dev.eka.care

Auth headers sent on every request:

client-id: <clientId>
auth: <accessToken>   (if provided)

Dashboard APIs

| API | Method | Endpoint | Description | |---|---|---|---| | Landing | GET | /v2/hmis/{clinicId}/details | Fetch clinic details, HFR ID, and QR code URL | | Metrics Cards | POST | /v2/hmis/metrics/cards/{clinicId} | Fetch KPI metrics for a date range | | Task Config (read) | GET | /v1/hmis/{clinicId}/custom-config | Get automation task settings | | Task Config (update) | PATCH | /v1/hmis/{clinicId}/custom-config | Update automation task settings |

HPR/HFR Onboarding APIs

| API | Method | Endpoint | Description | |---|---|---|---| | Aadhaar OTP | POST | /abdm/nhpr/v1/hpr/aadhaar/otp | Send OTP to the Aadhaar-linked mobile | | Verify Aadhaar OTP | POST | /abdm/nhpr/v1/hpr/aadhaar/verify-otp | Verify OTP and get transaction ID | | Mobile Verify | POST | /abdm/nhpr/v1/hpr/mobile/verify | Verify mobile number | | HPR ID Available | POST | /abdm/nhpr/v1/hpr/hpr-id/availability | Check if a chosen HPR ID is available | | Create HPR | POST | /abdm/nhpr/v1/hpr/aadhaar/create?doctor_oid={oid} | Create HPR profile for a doctor | | NHPR Session Status | GET | /abdm/nhpr/v1/status | NHPR logged in status | | Suggest Facilities | GET | /abdm/nhpr/v1/hfr/suggest-facilities | Suggest existing HFR facilities to link | | Create HFR | POST | /abdm/nhpr/v1/hfr/onboard?doctor_oid={oid} | Register a new health facility | | Link HFR | POST | /abdm/nhpr/v1/hfr/link | Link doctor to an existing HFR facility |