@ampath/esm-dha-workflow-app 4.0.0-next.15 → 4.0.0-next.151

package/src/bookings/daily/daily-bookings.component.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from 'react';
+import styles from './daily-bookings.component.scss';
+import { Button, InlineLoading, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import DailyBookingsFilter from './filters/daily-bookings-filter.component';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { type DailyBookingsResult, type BookingFilter, DailyBookingType } from '../types';
+import DailiyBookingsPatientList from './patient-list/daily-bookings-patient-list.component';
+import { getDailyBookings } from './daily-bookings.resource';
+
+interface DailyBookingsProps {}
+const DailyBookings: React.FC<DailyBookingsProps> = () => {
+  const [filters, setFilters] = useState<BookingFilter>();
+  const [appointments, setAppointments] = useState<DailyBookingsResult[]>([]);
+  const [visits, setVisits] = useState<DailyBookingsResult[]>([]);
+  const [hasNotReturned, setHasNotReturned] = useState<DailyBookingsResult[]>([]);
+  const [selectedTab, setSelectedTab] = useState<DailyBookingType>(DailyBookingType.Appointments);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (filters) {
+      getDailyBookingsByType(selectedTab);
+    }
+  }, [filters]);
+
+  const handleFilterSelected = (filters: BookingFilter) => {
+    setFilters(filters);
+  };
+  const handleSelectedTab = (userSelectedTab: DailyBookingType) => {
+    setSelectedTab(userSelectedTab);
+  };
+  const getDailyBookingsByType = async (dailyBookingType: DailyBookingType) => {
+    const isValidFilter = isValidFilterset(filters);
+    if (!isValidFilter) return;
+    setLoading(true);
+    try {
+      const resp = await getDailyBookings(filters, dailyBookingType);
+      if (selectedTab === DailyBookingType.Appointments) {
+        setAppointments(resp);
+      }
+      if (selectedTab === DailyBookingType.Visits) {
+        setVisits(resp);
+      }
+      if (selectedTab === DailyBookingType.HasNotReturned) {
+        setHasNotReturned(resp);
+      }
+    } catch (e) {
+      showSnackbar({
+        kind: 'error',
+        title: e.message ?? 'An error ocurred while fetching data',
+        subtitle: '',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+  const isValidFilterset = (filters: BookingFilter) => {
+    if (!filters) {
+      return false;
+    }
+    if (!filters.startDate) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Start Date not set',
+        subtitle: '',
+      });
+      return false;
+    }
+    if (!filters.locationUuids) {
+      showSnackbar({
+        kind: 'error',
+        title: 'User location not set',
+        subtitle: '',
+      });
+      return false;
+    }
+    if (!filters.department) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Department not set',
+        subtitle: '',
+      });
+      return false;
+    }
+    return true;
+  };
+  const handleRefresh = () => {
+    getDailyBookingsByType(selectedTab);
+  };
+  return (
+    <>
+      <div className={styles.bookingsLayout}>
+        <div className={styles.bookingsHeader}>
+          <h4>Daily Bookings</h4>
+        </div>
+        <div className={styles.bookingsFilters}>
+          <DailyBookingsFilter filterSelected={handleFilterSelected} />
+        </div>
+        <div className={styles.bookingsContent}>
+          <div className={styles.contentActions}>
+            <Button kind="primary" onClick={handleRefresh} disabled={loading}>
+              {loading ? <InlineLoading description="Fetching..." /> : 'Refresh'}
+            </Button>
+          </div>
+          <div className={styles.contentData}>
+            <Tabs>
+              <TabList contained>
+                <Tab onClick={() => handleSelectedTab(DailyBookingType.Appointments)}>Appointments</Tab>
+                <Tab onClick={() => handleSelectedTab(DailyBookingType.Visits)}>Visits</Tab>
+                <Tab onClick={() => handleSelectedTab(DailyBookingType.HasNotReturned)}>Has Not Returned</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  {appointments && appointments.length > 0 ? (
+                    <DailiyBookingsPatientList patientListData={appointments} />
+                  ) : (
+                    <></>
+                  )}
+                </TabPanel>
+                <TabPanel>
+                  {visits && visits.length > 0 ? <DailiyBookingsPatientList patientListData={visits} /> : <></>}
+                </TabPanel>
+                <TabPanel>
+                  {hasNotReturned && hasNotReturned.length > 0 ? (
+                    <DailiyBookingsPatientList patientListData={hasNotReturned} />
+                  ) : (
+                    <></>
+                  )}
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DailyBookings;

package/src/bookings/daily/daily-bookings.resource.ts

@@ -0,0 +1,28 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { getEtlBaseUrl } from '../../shared/utils/get-base-url';
+import {
+  type BookingFilter,
+  type BookingDto,
+  type DailyBookingsResult,
+  type DailyBookingsReponse,
+  type DailyBookingType,
+} from '../types';
+
+export async function getDailyBookings(
+  bookingFilter: BookingFilter,
+  bookingType: DailyBookingType,
+): Promise<DailyBookingsResult[]> {
+  const etlBaseUrl = await getEtlBaseUrl();
+  const params: BookingDto = {
+    department: bookingFilter.department,
+    startDate: bookingFilter.startDate ?? new Date().toISOString().split('T')[0],
+    locationUuids: bookingFilter.locationUuids,
+    startIndex: '0',
+    limit: '1000',
+  };
+  const queryString = new URLSearchParams(params).toString();
+  const dailyAppUrl = `${etlBaseUrl}/${bookingType}/${bookingFilter.startDate}?&${queryString}`;
+  const resp = await openmrsFetch(dailyAppUrl);
+  const data: DailyBookingsReponse = await resp.json();
+  return data.result ?? [];
+}

package/src/bookings/daily/filters/daily-bookings-filter.component.scss

@@ -0,0 +1,15 @@
+.filterLayout{
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: 100%;
+}
+.filterRow{
+    display: flex;
+    flex-direction: row;
+    column-gap: 5px;
+    width: 100%;
+}
+.filterFormGroup{
+    width: 40%;
+}

package/src/bookings/daily/filters/daily-bookings-filter.component.tsx

@@ -0,0 +1,80 @@
+import React, { useRef } from 'react';
+import { Button, DatePicker, DatePickerInput, Dropdown, type OnChangeData } from '@carbon/react';
+import styles from './daily-bookings-filter.component.scss';
+import { type BookingFilter } from '../../types';
+import { useSession } from '@openmrs/esm-framework';
+
+interface DailyBookingsFilterProps {
+  filterSelected: (filters: BookingFilter) => void;
+}
+const DailyBookingsFilter: React.FC<DailyBookingsFilterProps> = ({ filterSelected }) => {
+  const dateRef = useRef<string>('');
+  const departmentRef = useRef<string>();
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const handleDateChange = (dateSelected: Date[]) => {
+    dateRef.current = new Date(dateSelected[0]).toLocaleDateString('en-CA');
+  };
+  const handleDepartmentChange = (selectedDept: OnChangeData<{ text: string }>) => {
+    departmentRef.current = selectedDept.selectedItem.text;
+  };
+  const handeleGenerateFilters = () => {
+    const filters: BookingFilter = {
+      startDate: dateRef.current,
+      department: departmentRef.current,
+      locationUuids: locationUuid,
+    };
+    filterSelected(filters);
+  };
+  return (
+    <>
+      <div className={styles.filterLayout}>
+        <div className={styles.filterRow}>
+          <div className={styles.filterFormGroup}>
+            <DatePicker
+              datePickerType="single"
+              locale="en"
+              onChange={handleDateChange}
+              onClose={() => {}}
+              onOpen={() => {}}
+            >
+              <DatePickerInput id="date-picker-single" labelText="Date" placeholder="mm/dd/yyyy" />
+            </DatePicker>
+          </div>
+          <div className={styles.filterFormGroup}>
+            <Dropdown
+              id="department"
+              invalidText="invalid selection"
+              itemToString={(item) => item.text}
+              onChange={handleDepartmentChange}
+              items={[
+                {
+                  text: 'HIV',
+                },
+                {
+                  text: 'CDM',
+                },
+                {
+                  text: 'ONCOLOGY',
+                },
+              ]}
+              label="Select Department"
+              titleText="Department"
+              type="default"
+              warnText=""
+            />
+          </div>
+        </div>
+        <div className={styles.filterRow}>
+          <div className={styles.filterFormGroup}>
+            <Button kind="primary" onClick={handeleGenerateFilters}>
+              Generate
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DailyBookingsFilter;

package/src/bookings/daily/patient-list/daily-bookings-patient-list.component.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { type DailyBookingsResult } from '../../types';
+
+interface DailiyBookingsPatientListProps {
+  patientListData: DailyBookingsResult[];
+}
+const DailiyBookingsPatientList: React.FC<DailiyBookingsPatientListProps> = ({ patientListData }) => {
+  if (!patientListData || patientListData.length === 0) {
+    return <>No Data</>;
+  }
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>No</TableHeader>
+            <TableHeader>CCC Number</TableHeader>
+            <TableHeader>UPI Number</TableHeader>
+            <TableHeader>Program</TableHeader>
+            <TableHeader>RTC Date</TableHeader>
+            <TableHeader>Med Pickup Date</TableHeader>
+            <TableHeader>ARV Start Date</TableHeader>
+            <TableHeader>HIV Disclosure Status</TableHeader>
+            <TableHeader>Height</TableHeader>
+            <TableHeader>Weight</TableHeader>
+            <TableHeader>Stage</TableHeader>
+            <TableHeader>Patient Categorization</TableHeader>
+            <TableHeader>Service Delivery Model</TableHeader>
+            <TableHeader>DSD Model</TableHeader>
+            <TableHeader>CD4 Date</TableHeader>
+            <TableHeader>CD4 Results</TableHeader>
+            <TableHeader>Gender</TableHeader>
+            <TableHeader>Birthdate</TableHeader>
+            <TableHeader>Age</TableHeader>
+            <TableHeader>Patient Name</TableHeader>
+            <TableHeader>Identifiers</TableHeader>
+            <TableHeader>Phone Number</TableHeader>
+            <TableHeader>Latest RTC Date</TableHeader>
+            <TableHeader>Latest VL</TableHeader>
+            <TableHeader>VL Category</TableHeader>
+            <TableHeader>Latest VL Date</TableHeader>
+            <TableHeader>Last Appointment</TableHeader>
+            <TableHeader>Visit Type</TableHeader>
+            <TableHeader>Current Meds</TableHeader>
+            <TableHeader>Covid-19 Vaccination</TableHeader>
+            <TableHeader>TB Screening Date</TableHeader>
+            <TableHeader>TB Screening Result</TableHeader>
+            <TableHeader>Patient Category</TableHeader>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {patientListData &&
+            patientListData.map((val, index) => (
+              <TableRow key={val.patient_uuid ?? index}>
+                <TableCell>{index + 1}</TableCell>
+                <TableCell>{val.ccc_number}</TableCell>
+                <TableCell>{val.upi_number}</TableCell>
+                <TableCell>{val.program}</TableCell>
+                <TableCell>{val.rtc_date}</TableCell>
+                <TableCell>{val.med_pick_up_date}</TableCell>
+                <TableCell>{val.arv_first_regimen_start_date}</TableCell>
+                <TableCell>{val.hiv_disclosure_status}</TableCell>
+                <TableCell>{val.height}</TableCell>
+                <TableCell>{val.weight}</TableCell>
+                <TableCell>{val.stage}</TableCell>
+                <TableCell>{val.patient_categorization}</TableCell>
+                <TableCell>{val.service_delivery_model}</TableCell>
+                <TableCell>{val.dsd_model}</TableCell>
+                <TableCell>{val.cd4_date}</TableCell>
+                <TableCell>{val.cd4_results}</TableCell>
+                <TableCell>{val.gender}</TableCell>
+                <TableCell>{val.birthdate}</TableCell>
+                <TableCell>{val.age}</TableCell>
+                <TableCell>{val.person_name}</TableCell>
+                <TableCell>{val.identifiers}</TableCell>
+                <TableCell>{val.phone_number}</TableCell>
+                <TableCell>{val.latest_rtc_date}</TableCell>
+                <TableCell>{val.latest_vl}</TableCell>
+                <TableCell>{val.vl_category}</TableCell>
+                <TableCell>{val.latest_vl_date}</TableCell>
+                <TableCell>{val.last_appointment}</TableCell>
+                <TableCell>{val.visit_type}</TableCell>
+                <TableCell>{val.cur_meds}</TableCell>
+                <TableCell>{val.covid_19_vaccination_status}</TableCell>
+                <TableCell>{val.tb_screening_date}</TableCell>
+                <TableCell>{val.tb_screening_result}</TableCell>
+                <TableCell>{val.patient_category}</TableCell>
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+export default DailiyBookingsPatientList;

package/src/bookings/types/index.ts

@@ -0,0 +1,68 @@
+export type BookingFilter = {
+  startDate: string;
+  department: string;
+  locationUuids: string;
+};
+
+export type BookingDto = BookingFilter & {
+  startIndex: string;
+  limit: string;
+};
+
+export type DailyBookingsResult = {
+  ccc_number: string;
+  ovcid_id: string;
+  upi_number: string;
+  program: string;
+  rtc_date: string;
+  med_pick_up_date: string;
+  arv_first_regimen_start_date: string;
+  hiv_disclosure_status: string;
+  height: number;
+  weight: number;
+  stage: number;
+  patient_categorization: string;
+  service_delivery_model: string;
+  dsd_model: string;
+  cd4_date: string;
+  cd4_results: number;
+  patient_uuid: string;
+  gender: string;
+  birthdate: string;
+  age: number;
+  person_name: string;
+  identifiers: string;
+  phone_number: string;
+  latest_rtc_date: string;
+  latest_vl: number;
+  vl_category: string;
+  latest_vl_date: string;
+  last_appointment: string;
+  visit_type: string;
+  cur_meds: string;
+  previous_vl: number;
+  previous_vl_date: string;
+  nearest_center: string;
+  covid_19_vaccination_status: string;
+  sms_consent_provided: string;
+  sms_receive_time: string;
+  sms_delivery_status: string;
+  tb_screening_date: string;
+  patient_category: string;
+  tb_screening_result: string;
+  cervical_screening_date: string;
+  cervical_screening_method: string;
+  cervical_screening_result: string;
+};
+
+export type DailyBookingsReponse = {
+  schemas: any;
+  sqlQuery: string;
+  result: DailyBookingsResult[];
+};
+
+export enum DailyBookingType {
+  Appointments = 'daily-appointments',
+  Visits = 'daily-visits',
+  HasNotReturned = 'daily-has-not-returned',
+}

package/src/config-schema.ts

@@ -1,7 +1,7 @@
 import { Type, validator } from '@openmrs/esm-framework';
 
 export const configSchema = {
-    concepts: {
+  concepts: {
     defaultPriorityConceptUuid: {
       _type: Type.ConceptUuid,
       _default: false,
@@ -77,6 +77,81 @@ export const configSchema = {
       _default: '5089AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
     },
   },
+  subDomainUrl: {
+    _type: Type.String,
+    _description: 'Subdomain e.g training,staging',
+    _default: '',
+  },
+  etlBaseUrl: {
+    _type: Type.String,
+    _description: 'ETL Endpoint',
+    _default: '',
+  },
+  hieBaseUrl: {
+    _type: Type.String,
+    _description: 'HIE Endpoint',
+    _default: '',
+  },
+  claimsBaseUrl: {
+    _type: Type.String,
+    _description: '',
+    _default: '',
+  },
+  claimsKey: {
+    _type: Type.String,
+    _description: '',
+    _default: '',
+  },
+  registrationBillableServices: {
+    _type: Type.String,
+    _description: 'Billable services e.g consultation',
+    _default: '',
+  },
+  cashConsultationOrderTypeUuid: {
+    _type: Type.String,
+    _description: 'CASH Consultation Order type uuid',
+    _default: '',
+  },
+  shaConsultationOrderTypeUuid: {
+    _type: Type.String,
+    _description: 'SHA Consultation Order type uuid',
+    _default: '',
+  },
+  cashConsulationConceptUuid: {
+    _type: Type.String,
+    _description: 'Cash Consultation concept uuid',
+    _default: '',
+  },
+  shaConsulationConceptUuid: {
+    _type: Type.String,
+    _description: 'SHA Consultation concept uuid',
+    _default: '',
+  },
+  outPatientCareSettingUuid: {
+    _type: Type.String,
+    _description: 'Outpatient care settings uuid',
+    _default: '',
+  },
+  orderEncounterTypeUuid: {
+    _type: Type.String,
+    _description: 'Outpatient care settings uuid',
+    _default: '',
+  },
+  nonSHAPaymentModes: {
+    _type: Type.Array,
+    _description: 'NON SHA payment modes',
+    _default: []
+  },
+  registrationServicequeues: {
+    _type: Type.Array,
+    _description: 'Service Queues to display at send to triage',
+    _default: []
+  },
+  consultationBillableServiceNames: {
+    _type: Type.Array,
+    _description: 'Consultation billable service names',
+    _default: ["CONSULTATION", "KESSES CONSULTATION"]
+  }
 };
 
 export type Config = {
@@ -118,7 +193,22 @@ export interface ConfigObject {
   showRecommendedVisitTypeTab: boolean;
   visitQueueNumberAttributeUuid: string | null;
   visitTypeResourceUrl: string;
+  subDomainUrl: string;
+  etlBaseUrl: string;
+  hieBaseUrl: string;
+  claimsBaseUrl: string;
+  claimsKey: string;
+  registrationBillableServices: Array<string>;
+  cashConsultationOrderTypeUuid: string;
+  cashConsulationConceptUuid: string;
+  shaConsultationOrderTypeUuid: string;
+  shaConsulationConceptUuid: string;
+  outPatientCareSettingUuid: string;
+  orderEncounterTypeUuid: string;
   // vitals: VitalsConfigObject;
+  nonSHAPaymentModes: Array<string>;
+  registrationServicequeues: Array<string>;
+  consultationBillableServiceNames: Array<string>;
 }
 
 const queueEntryActions = ['move', 'call', 'edit', 'transition', 'signOff', 'remove', 'delete', 'undo'] as const;

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;