@ampath/esm-dha-workflow-app 4.0.0-claim-workflows.159

package/src/createDashboardLink.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { DashboardExtension, type DashboardExtensionProps, type IconId } from '@openmrs/esm-framework';
+
+export const createDashboardLink = (config: Omit<DashboardExtensionProps, 'icon'> & { icon?: IconId }) => () => (
+  <BrowserRouter>
+    <DashboardExtension path={config.path} title={config.title} basePath={config.basePath} icon={config.icon} />
+  </BrowserRouter>
+);

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

@@ -0,0 +1,13 @@
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: space-between;
+    width: 85vw;
+    min-height: 60vh;
+}
+
+.container iframe {
+  width: 85vw;
+  min-height: 85vh;
+}

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

@@ -0,0 +1,7 @@
+.container {
+    margin: 3rem;
+}
+.tabText {
+    font-size: 20px;
+}
+

package/src/dashboard/dashboard.component.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+
+import styles from './dashboard.component.scss';
+import Overview from './overview/overview.component';
+import { getServiceQueueByLocationUuid } from '../service-queues/service-queues.resource';
+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';
+
+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;
+  useEffect(() => {
+    getDashBoardData();
+  }, []);
+
+  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>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <Overview
+              triageCount={triageQueueEntries}
+              consultationCount={consultationQueueEntries}
+              dashboardSummary={dashboardSummary}
+            />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default Dashboard;

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

@@ -0,0 +1,150 @@
+.container {
+    display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+.card {
+    border: 1px solid grey;
+    border-radius: 5px;
+    background-color: white;
+    font-weight: bold;
+    flex: 0 0 250px;
+    height: 5rem;
+    min-width: 0;
+  }
+
+  .title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+}
+
+@media (max-width: 1584px) {
+  .container .card {
+    flex: 0 0 calc(20% - 1rem);
+  }
+
+  .text {
+    font-size: 1rem;
+  }
+}
+@media (max-width: 1456px) {
+  .container .card {
+    flex: 0 0 calc(25% - 1rem);
+  }
+
+  .text {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 1356px) {
+  .container .card {
+    flex: 0 0 calc(25% - 1rem);
+  }
+
+  .text {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 1264px) {
+  .container .card {
+    flex: 0 0 calc(30% - 1rem);
+  }
+
+  .text {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 1095px) {
+  .container .card {
+    flex: 0 0 calc(30% - 1rem);
+  }
+
+  .text {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 1024px) {
+  .container .card {
+    flex: 0 0 calc(50% - 1rem);
+  }
+  .text {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 600px) {
+  .container .card {
+    flex: 0 0 100%;
+  }
+}
+
+
+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; 
+  }
+
+  .cds--list-box__field {
+    font-weight: 600; 
+  }
+}
+
+.opd {
+    background-color: #2B579A !important;
+}
+.completed {
+    background-color: #4CAF50 !important;
+}
+
+.uncompleted {
+    background-color: #FFC107 !important;
+}
+.emergencies {
+    background-color: lightcoral !important;
+}
+
+.waitingTime {
+    background-color: lightblue !important;
+}
+.labs {
+  background-color: lightgrey !important;
+}
+
+.pharmacy {
+  background-color: lightgreen !important;
+}
+
+.text {
+  color: white;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  font-size: 1rem;
+}
+.tabsContainer {
+  margin-top: 2rem;
+}

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

@@ -0,0 +1,134 @@
+import { FluidDropdown, Tab, TabList, TabPanel, TabPanels, Tabs, Tile } from '@carbon/react';
+import React, { useState } from 'react';
+import { UserMultiple, CheckmarkFilled, Time, Hospital, Chemistry, Medication } from '@carbon/react/icons';
+
+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';
+
+interface OverviewProps {
+  triageCount?: QueueEntryResult[];
+  consultationCount?: QueueEntryResult[];
+  dashboardSummary?: any;
+}
+
+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',
+  ).length;
+  const [selected, setSelected] = useState<string | null>(null);
+  const triagePatients = triageCount?.length ?? 0;
+  const consultationPatients = consultationCount?.length ?? 0;
+  const dropDownItems = [
+    'Total Patients',
+    'Triage Patients',
+    'Consultation Patients',
+    'Walk-In Patients',
+    'Emergency Patients',
+  ];
+
+  const handleDropdownChange = (data: { selectedItem: string }) => {
+    const value = data.selectedItem;
+    setSelected(value);
+  };
+
+  let selectedPatients: QueueEntryResult[] = [];
+
+  switch (selected) {
+    case 'Triage Patients':
+      selectedPatients = triageCount ?? [];
+      break;
+
+    case 'Consultation Patients':
+      selectedPatients = consultationCount ?? [];
+      break;
+    case 'Walk-In Patients':
+      selectedPatients = [];
+      break;
+    case 'Emergency Patients':
+      selectedPatients = [];
+      break;
+
+    case 'Total Patients':
+      selectedPatients = [...(triageCount ?? []), ...(consultationCount ?? [])];
+      break;
+
+    default:
+      selectedPatients = [...(triageCount ?? []), ...(consultationCount ?? [])];
+      break;
+  }
+
+  return (
+    <>
+      <div className={styles.container}>
+        <Tile className={`${styles.card} ${styles.opd}`}>
+          <h4 className={styles.text}>
+            <UserMultiple size={24} />
+            Total OPD Visits
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.total_opd_visits ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.completed}`}>
+          <h4 className={styles.text}>
+            <CheckmarkFilled size={20} /> Completed Visits
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.completed_visits ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.uncompleted}`}>
+          <h4 className={styles.text}>
+            <Time size={20} /> Uncompleted visits
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.uncompleted_visits ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.labs}`}>
+          <h4 className={styles.text}>
+            <Chemistry size={20} /> Labs
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.labs ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.pharmacy}`}>
+          <h4 className={styles.text}>
+            <Medication size={20} /> Pharmacy
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.pharmacy ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.emergencies}`}>
+          <h4 className={styles.text}>
+            <Hospital size={20} /> Emergencies
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.emergencies ?? 0}</h4>
+        </Tile>
+        <Tile className={`${styles.card} ${styles.waitingTime}`}>
+          <h4 className={styles.text}>
+            <Time size={20} /> Avg. Waiting Time
+          </h4>
+          <h4 className={styles.text}>{dashboardSummary?.average_waiting_minutes ?? 0} mins</h4>
+        </Tile>
+      </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>
+    </>
+  );
+};
+
+export default Overview;

package/src/dashboard/patient-list/patient-list.component.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { type QueueEntryResult } from '../../registry/types';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+
+interface PatientListProps {
+  patients?: QueueEntryResult[];
+}
+
+const PatientList: React.FC<PatientListProps> = ({ patients }) => {
+  const layout = useLayoutType();
+  const desktop = isDesktop(layout);
+  return (
+    <Table size={desktop ? 'sm' : 'lg'}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>No</TableHeader>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Ticket</TableHeader>
+          <TableHeader>Status</TableHeader>
+          <TableHeader>Priority</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {patients?.map((patient, index) => {
+          return (
+            <TableRow>
+              <TableCell>{index + 1}</TableCell>
+              <TableCell>{`${patient.given_name} ${patient.middle_name} ${patient.family_name}`}</TableCell>
+              <TableCell>{patient.queue_id}</TableCell>
+              <TableCell>{patient.status}</TableCell>
+              <TableCell>{patient.priority}</TableCell>
+            </TableRow>
+          );
+        })}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default PatientList;

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/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: 'registry',
+  slot: 'client-registry-dashboard-slot',
+  title: 'Registry',
+  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/triage-dashboard.meta.ts

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

package/src/declarations.d.ts

@@ -0,0 +1,5 @@
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;