@ampath/esm-dha-workflow-app 4.0.0-next.33 → 4.0.0-next.331

package/src/dashboard/charts/chart.component.scss

@@ -0,0 +1,24 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 65vh;
+  min-height: 32rem;
+}
+
+/* The Superset SDK mounts a wrapper div (then an iframe) inside the container.
+   Force both to fill the height so the chart is visible under each tab. */
+.container > * {
+  width: 100% !important;
+  height: 100% !important;
+  flex: 1 1 auto;
+}
+
+.container iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 32rem;
+  border: 0;
+  border-radius: 6px;
+}

package/src/dashboard/charts/chart.component.tsx

@@ -0,0 +1,56 @@
+import { embedDashboard } from '@superset-ui/embedded-sdk';
+import React, { useEffect, useRef, useState } from 'react';
+import { fetchGuestToken } from '../../resources/superset.resource';
+import { useSession } from '@openmrs/esm-framework';
+
+import { getSubDomainUrl } from '../../shared/utils/get-base-url';
+
+import styles from './chart.component.scss';
+
+interface ChartProps {
+  dashboardId: string;
+}
+
+const Chart: React.FC<ChartProps> = ({ dashboardId }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const [subDomainUrl, setSubDomainUrl] = useState<string | null>(null);
+  useEffect(() => {
+    const fetchSubDomainUrl = async () => {
+      const url = await getSubDomainUrl();
+      setSubDomainUrl(url);
+    };
+
+    fetchSubDomainUrl();
+  }, []);
+  const container = document.getElementById('my-superset-container');
+
+  const firstChild = container?.children?.[0] as HTMLElement | undefined;
+
+  if (firstChild) {
+    firstChild.style.width = '100%';
+    firstChild.style.height = '100%';
+  }
+
+  useEffect(() => {
+    embedDashboard({
+      id: dashboardId,
+      supersetDomain: `${subDomainUrl}/superset`,
+      mountPoint: ref.current!,
+      fetchGuestToken: async () => await fetchGuestToken(locationUuid, dashboardId),
+      dashboardUiConfig: {
+        hideTitle: true,
+        filters: {
+          expanded: true,
+        },
+      },
+    });
+  }, [subDomainUrl]);
+  return (
+    <>
+      <div id="my-superset-container" className={styles.container} ref={ref}></div>
+    </>
+  );
+};
+export default Chart;

package/src/dashboard/dashboard.component.scss

@@ -1,7 +1,52 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
 .container {
-    margin: 3rem;
+  display: flex;
+  flex-direction: column;
+  row-gap: layout.$spacing-05;
+  width: 100%;
+  padding: layout.$spacing-05;
+  background-color: $ui-01;
+  min-height: calc(100vh - 3rem);
 }
-.tabText {
-    font-size: 20px;
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  column-gap: layout.$spacing-04;
+  padding-bottom: layout.$spacing-05;
+  border-bottom: 1px solid $ui-03;
 }
 
+.headerIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 50%;
+  background-color: colors.$blue-10;
+  color: colors.$blue-60;
+}
+
+.title {
+  @include type.type-style('heading-03');
+  color: $ui-05;
+  margin: 0 0 layout.$spacing-02;
+}
+
+.subtitle {
+  @include type.type-style('body-01');
+  color: $text-02;
+  margin: 0;
+}
+
+/* Carbon TabPanel adds its own padding on top of the card padding.
+   Zero it so the charts sit flush inside their card. */
+.container :global(.cds--tab-content) {
+  padding: 0;
+}

package/src/dashboard/dashboard.component.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { Analytics } from '@carbon/react/icons';
 
 import styles from './dashboard.component.scss';
 import Overview from './overview/overview.component';
@@ -7,55 +7,45 @@ import { getServiceQueueByLocationUuid } from '../service-queues/service-queues.
 import { type QueueEntryResult } from '../registry/types';
 import { useSession } from '@openmrs/esm-framework';
 import { QUEUE_SERVICE_UUIDS } from '../shared/constants/concepts';
+import { getDashBoardSummary } from '../resources/dashboard.resource';
+import FacilityAndWorkerSlot from '../shared/ui/facility-worker-slot/facility-worker.component-slot.component';
 
 interface DashboardProps {}
 
 const Dashboard: React.FC<DashboardProps> = () => {
   const [triageQueueEntries, setTriageQueueEntries] = useState<QueueEntryResult[]>([]);
   const [consultationQueueEntries, setConsultationQueueEntries] = useState<QueueEntryResult[]>([]);
+  const [dashboardSummary, setDashboardSummary] = useState<any[]>([]);
   const session = useSession();
   const locationUuid = session.sessionLocation.uuid;
-  const triageServiceUuid = QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID;
-  const consultationServiceUuid = QUEUE_SERVICE_UUIDS.CLINICAL_CONSULTATION_SERVICE_UUID;
   useEffect(() => {
-    getTriageEntryQueues();
-    getConsultationEntryQueues();
+    getDashBoardData();
   }, []);
 
-  const getTriageEntryQueues = async () => {
-    const res = await getServiceQueueByLocationUuid(triageServiceUuid, locationUuid);
-    setTriageQueueEntries(res);
-  };
-  const getConsultationEntryQueues = async () => {
-    const res = await getServiceQueueByLocationUuid(consultationServiceUuid, locationUuid);
-    setConsultationQueueEntries(res);
+  const getDashBoardData = async () => {
+    const res = await getDashBoardSummary(locationUuid);
+    setDashboardSummary(res[0]);
   };
+
   return (
     <div className={styles.container}>
-      <Tabs>
-        <TabList contained scrollDebounceWait={200}>
-          <Tab>
-            <span className={styles.tabText}>Overview</span>
-          </Tab>
-          <Tab>
-            <span className={styles.tabText}>Pharmacy</span>
-          </Tab>
-          <Tab>
-            <span className={styles.tabText}>Labs</span>
-          </Tab>
-          <Tab>
-            <span className={styles.tabText}>Programs</span>
-          </Tab>
-        </TabList>
-        <TabPanels>
-          <TabPanel>
-            <Overview triageCount={triageQueueEntries} consultationCount={consultationQueueEntries} />
-          </TabPanel>
-          <TabPanel></TabPanel>
-          <TabPanel></TabPanel>
-          <TabPanel></TabPanel>
-        </TabPanels>
-      </Tabs>
+      <div className={styles.hieHeaderSlot}>
+            <FacilityAndWorkerSlot />
+      </div>
+      <div className={styles.header}>
+        <span className={styles.headerIcon}>
+          <Analytics size={24} />
+        </span>
+        <div>
+          <h3 className={styles.title}>Today at your facility</h3>
+          <p className={styles.subtitle}>A live snapshot of patient flow and service activity.</p>
+        </div>
+      </div>
+      <Overview
+        triageCount={triageQueueEntries}
+        consultationCount={consultationQueueEntries}
+        dashboardSummary={dashboardSummary}
+      />
     </div>
   );
 };

package/src/dashboard/overview/overview.component.scss

@@ -1,70 +1,51 @@
-.container {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 1rem;
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
-.card {
-    border: 1px solid grey;
-    border-radius: 5px;
-    background-color: white;
-    font-weight: bold;
-    flex: 1 1 calc(33.33% - 1rem);
+/* Shared MetricsCard counts (plain, uniform with the accounting dashboard), full width. */
+.container {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: layout.$spacing-05;
+  width: 100%;
+
+  /* Slim the shared card down (the default metric tile is tall). */
+  :global(.cds--tile) {
+    min-height: 0;
+    padding: layout.$spacing-03 layout.$spacing-05;
+
+    /* Tighten the header row — Carbon forces a 2rem-tall label row. */
+    > div:first-child {
+      margin-bottom: layout.$spacing-02;
+
+      > div {
+        height: auto;
+      }
+    }
+
+    /* Slimmer value. */
+    p {
+      @include type.type-style('heading-03');
+    }
   }
 }
 
-@media (max-width: 1024px) {
-  .container .card {
-    flex: 1 1 calc(50% - 1rem);
-  }
+.tabsContainer {
+  margin-top: layout.$spacing-06;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-radius: 6px;
+  padding: layout.$spacing-05;
 }
 
-@media (max-width: 600px) {
-  .container .card {
-    flex: 1 1 100%;
+@media (max-width: 66rem) {
+  .container {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-
-h4 {
-    font-weight: bold;
-}
-
-.dropdownItem {
-    display: flex;
-    justify-self: flex-end;
-    width: 25%; 
-    min-width: 180px; 
-    max-width: 280px;
-    margin-top: 5rem;
-    margin-bottom: 5rem;
-}
-
-.dropdownContainer {
-  .cds--list-box__menu-item__option {
-    font-weight: 600; 
+@media (max-width: 42rem) {
+  .container {
+    grid-template-columns: minmax(0, 1fr);
   }
-
-  .cds--list-box__field {
-    font-weight: 600; 
-  }
-}
-
-.queue {
-    color: palevioletred
-}
-.total {
-    color: gray;
 }
-
-.triage {
-    color: yelllow;
-}
-.consultation {
-    color: green;
-}
-
-.emergency {
-    color: red;
-}

package/src/dashboard/overview/overview.component.tsx

@@ -1,16 +1,24 @@
-import { FluidDropdown, Tile } from '@carbon/react';
+import { FluidDropdown, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
 import React, { useState } from 'react';
 
 import styles from './overview.component.scss';
 import { type QueueEntryResult } from '../../registry/types';
 import PatientList from '../patient-list/patient-list.component';
+import Chart from '../charts/chart.component';
+import {
+  MetricsCard,
+  MetricsCardHeader,
+  MetricsCardBody,
+  MetricsCardItem,
+} from '../../service-queues/metrics/metrics-cards/metrics-card.component';
 
 interface OverviewProps {
   triageCount?: QueueEntryResult[];
   consultationCount?: QueueEntryResult[];
+  dashboardSummary?: any;
 }
 
-const Overview: React.FC<OverviewProps> = ({ triageCount, consultationCount }) => {
+const Overview: React.FC<OverviewProps> = ({ triageCount, consultationCount, dashboardSummary }) => {
   const totalPatients: QueueEntryResult[] = [...triageCount, ...consultationCount];
   const patientsInQueue = totalPatients.filter(
     (patient) => patient.status === 'WAITING' || patient.status === 'IN SERVICE',
@@ -57,49 +65,53 @@ const Overview: React.FC<OverviewProps> = ({ triageCount, consultationCount }) =
       break;
   }
 
+  const cards = [
+    { key: 'opd', title: 'Total OPD Visits', unit: 'Visits', value: dashboardSummary?.total_opd_visits ?? 0 },
+    { key: 'completed', title: 'Completed Visits', unit: 'Visits', value: dashboardSummary?.completed_visits ?? 0 },
+    { key: 'uncompleted', title: 'Uncompleted Visits', unit: 'Visits', value: dashboardSummary?.uncompleted_visits ?? 0 },
+    { key: 'labs', title: 'Labs', unit: 'Orders', value: dashboardSummary?.labs ?? 0 },
+    { key: 'pharmacy', title: 'Pharmacy', unit: 'Orders', value: dashboardSummary?.pharmacy ?? 0 },
+    { key: 'emergencies', title: 'Emergencies', unit: 'Patients', value: dashboardSummary?.emergencies ?? 0 },
+    {
+      key: 'waiting',
+      title: 'Avg. Waiting Time',
+      unit: 'Minutes',
+      value: `${dashboardSummary?.average_waiting_minutes ?? 0} mins`,
+    },
+  ];
+
   return (
     <>
       <div className={styles.container}>
-        <Tile className={styles.card}>
-          <h4>Total Patients Today</h4>
-          <h5>Patients</h5>
-          <h4 className={styles.total}>{triagePatients + consultationPatients}</h4>
-        </Tile>
-        <Tile className={styles.card}>
-          <h4>Patients in Queue Today</h4>
-          <h5>Patients</h5>
-          <h4 className={styles.queue}>{patientsInQueue}</h4>
-        </Tile>
-        <Tile className={styles.card}>
-          <h4>Patients in Triage </h4>
-          <h5>Patients</h5>
-          <h4 className={styles.triage}>{triagePatients}</h4>
-        </Tile>
-        <Tile className={styles.card}>
-          <h4>Patients in Consultation </h4>
-          <h5>Patients</h5>
-          <h4 className={styles.consultation}>{consultationPatients}</h4>
-        </Tile>
-        <Tile className={styles.card}>
-          <h4>Walk-ins Today </h4>
-          <h5>Patients</h5>
-          <h4>0</h4>
-        </Tile>
-        <Tile className={styles.card}>
-          <h4>Emergencies Today </h4>
-          <h5>Patients</h5>
-          <h4 className={styles.emergency}>0</h4>
-        </Tile>
+        {cards.map(({ key, title, unit, value }) => (
+          <MetricsCard key={key}>
+            <MetricsCardHeader title={title} />
+            <MetricsCardBody>
+              <MetricsCardItem label={unit} value={value} />
+            </MetricsCardBody>
+          </MetricsCard>
+        ))}
+      </div>
+      <div className={styles.tabsContainer}>
+        <Tabs>
+          <TabList>
+            <Tab>Daily</Tab>
+            <Tab>Weekly</Tab>
+            <Tab>Monthly</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <Chart dashboardId="1bdad7e2-e9a7-4cb5-886c-185f63b2eae0" />
+            </TabPanel>
+            <TabPanel>
+              <Chart dashboardId="0c59e7cd-2eba-4426-9d52-1db0866e0377" />
+            </TabPanel>
+            <TabPanel>
+              <Chart dashboardId="fe8606e8-2160-4914-860a-f5abc386d9c1" />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
       </div>
-      <FluidDropdown
-        className={styles.dropdownItem}
-        id={''}
-        items={dropDownItems}
-        label={'Total Patients'}
-        titleText={''}
-        onChange={handleDropdownChange}
-      ></FluidDropdown>
-      <PatientList patients={selectedPatients} />
     </>
   );
 };

package/src/dashboard-meta/accounting-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const accountingDashboardMeta = {
+  path: 'accounting',
+  slot: 'accounting-dashboard-slot',
+  title: 'Accounting',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/admissions-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const admissionsDashboardMeta = {
+  path: 'admissions-dashboard',
+  slot: 'admissions-dashboard-slot',
+  title: 'Admissions',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/billing-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const billingDashboardMeta = {
+  path: 'billing',
+  slot: 'ampath-billing-dashboard-slot',
+  title: 'Accounting',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/bookings-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const bookingsDashboardMeta = {
+  path: 'bookings',
+  slot: 'bookings-dashboard-slot',
+  title: 'Bookings',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/case-summary.meta.ts

@@ -0,0 +1,6 @@
+export const caseSummaryMeta = {
+  path: 'case-summary',
+  slot: 'patient-chart-case-summary-dashboard-slot',
+  title: 'Visit Case Summary',
+  icon: 'omrs-icon-document',
+};

package/src/dashboard-meta/consultation-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const consultationDashboardMeta = {
+  path: 'consultation',
+  slot: 'consultation-dashboard-slot',
+  title: 'Consultation',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/dha-workflow-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const dhaWorkflowDashboardMeta = {
+  path: 'dashboard',
+  slot: 'dha-workflow-dashboard-slot',
+  title: 'Dashboard',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/inpatient-admissions.meta.ts

@@ -0,0 +1,6 @@
+export const patientChartAdmissionsMetaData = {
+  path: 'Admissions',
+  slot: 'patient-chart-admissions-summary-dashboard-slot',
+  title: 'Admissions',
+  icon: 'omrs-icon-hospital-bed',
+};

package/src/dashboard-meta/maternity-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const maternityDashboardMeta = {
+  path: 'maternity',
+  slot: 'maternity-queue-dashboard-slot',
+  title: 'Maternity',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/mch-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const mchQueueDashboardMeta = {
+  path: 'mnch',
+  slot: 'mnch-queue-dashboard-slot',
+  title: 'MCH',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/pharmacy-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const pharmacyDashboardMeta = {
+  path: 'dispensing',
+  slot: 'dispensing-dashboard-slot',
+  title: 'Pharmacy',
+  basePath: `${window.spaBase}/home`,
+} as const;

package/src/dashboard-meta/queue-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const queueDashboardMeta = {
+  path: 'dashboard',
+  slot: 'queue-dashboard-slot',
+  title: 'Dashboard',
+  basePath: `${window.spaBase}/home`,
+} as const;

package/src/dashboard-meta/registers-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const registersDashboardMeta = {
+  path: 'registers',
+  slot: 'registers-dashboard-slot',
+  title: 'Registers',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/registry-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const registryDashboardMeta = {
+  path: 'registration',
+  slot: 'client-registry-dashboard-slot',
+  title: 'Registration',
+  basePath: `${window.spaBase}/home`,
+} as const;

package/src/dashboard-meta/service-queue-admin.meta.ts

@@ -0,0 +1,6 @@
+export const serviceQueueAdminDashboardMeta = {
+  path: 'service-queue-admin',
+  slot: 'service-queue-admin-dashboard-slot',
+  title: 'Service Queue Admin',
+  basePath: 'dha-workflow',
+};

package/src/dashboard-meta/specialized-clinics-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const specializedClinicsDashboardMeta = {
+  path: 'specialized-clinics',
+  slot: 'specialized-clinics-queue-dashboard-slot',
+  title: 'Specialized Clincs',
+  basePath: `${window.spaBase}/home`,
+};

package/src/dashboard-meta/triage-dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const triageDashboardMeta = {
+  path: 'triage',
+  slot: 'triage-queue-dashboard-slot',
+  title: 'Triage',
+  basePath: `${window.spaBase}/home`,
+};