@ampath/esm-dha-workflow-app 4.0.0-next.20 → 4.0.0-next.21

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{},"pages":[{"component":"root","route":"home","online":true,"offline":true}],"extensions":[{"component":"workflowRegistryLink","name":"workflow-registry-link","slot":"app-menu-slot","online":true,"offline":true},{"component":"navLinks","name":"side-nav-workflow-links","slot":"dha-workflow-slot","online":true,"offline":true},{"name":"metrics-card-patients-in-waiting","component":"waitingPatientsExtension","slot":"clinic-metrics-slot","order":1},{"name":"metrics-card-patients-attended-to","component":"attendedToPatientsExtension","slot":"clinic-metrics-slot","order":2}],"modals":[{"name":"sign-off-queue-entry-modal","component":"signOffModal"}],"version":"4.0.0-next.20"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{},"pages":[{"component":"root","route":"home","online":true,"offline":true}],"extensions":[{"component":"workflowRegistryLink","name":"workflow-registry-link","slot":"app-menu-slot","online":true,"offline":true},{"component":"navLinks","name":"side-nav-workflow-links","slot":"dha-workflow-slot","online":true,"offline":true},{"name":"metrics-card-patients-in-waiting","component":"waitingPatientsExtension","slot":"clinic-metrics-slot","order":1},{"name":"metrics-card-patients-attended-to","component":"attendedToPatientsExtension","slot":"clinic-metrics-slot","order":2},{"name":"metrics-card-patients-in-waiting","component":"triageWaitingPatientsExtension","slot":"triage-metrics-slot","order":1},{"name":"metrics-card-patients-attended-to","component":"triageAttendedToPatientsExtension","slot":"triage-metrics-slot","order":2}],"modals":[{"name":"sign-off-queue-entry-modal","component":"signOffModal"}],"version":"4.0.0-next.21"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampath/esm-dha-workflow-app",
-  "version": "4.0.0-next.20",
+  "version": "4.0.0-next.21",
   "license": "MPL-2.0",
   "description": "An OpenMRS seed application for building microfrontends",
   "browser": "dist/esm-dha-workflow-app.js",

package/src/dashboard/dashboard.component.scss

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

package/src/dashboard/dashboard.component.tsx

@@ -0,0 +1,63 @@
+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';
+
+interface DashboardProps {}
+
+const Dashboard: React.FC<DashboardProps> = () => {
+  const [triageQueueEntries, setTriageQueueEntries] = useState<QueueEntryResult[]>([]);
+  const [consultationQueueEntries, setConsultationQueueEntries] = useState<QueueEntryResult[]>([]);
+  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();
+  }, []);
+
+  const getTriageEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(triageServiceUuid, locationUuid);
+    setTriageQueueEntries(res);
+  };
+  const getConsultationEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(consultationServiceUuid, locationUuid);
+    setConsultationQueueEntries(res);
+  };
+  return (
+    <div className={styles.container}>
+      <Tabs>
+        <TabList contained fullWidth scrollDebounceWait={200}>
+          <Tab>
+            <span className={styles.tabText}>Overview</span>
+          </Tab>
+          <Tab>
+            <span>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>
+  );
+};
+
+export default Dashboard;

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

@@ -0,0 +1,32 @@
+.container {
+    display: flex;
+    width: 100%;
+    justify-content: space-evenly;
+}
+
+.card {
+    border: 1px solid grey;
+    border-radius: 5px;
+    background-color: white;
+    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; // bold-ish
+  }
+
+  .cds--list-box__field {
+    font-weight: 600; // selected item label also bold
+  }
+}

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

@@ -0,0 +1,103 @@
+import { FluidDropdown, Tile } 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';
+
+interface OverviewProps {
+  triageCount?: QueueEntryResult[];
+  consultationCount?: QueueEntryResult[];
+}
+
+const Overview: React.FC<OverviewProps> = ({ triageCount, consultationCount }) => {
+  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}>
+          <h3>Total Patients Today</h3>
+          <h4>Patients</h4>
+          <h4>{triagePatients + consultationPatients}</h4>
+        </Tile>
+        <Tile className={styles.card}>
+          <h3>Patients in Queue Today</h3>
+          <h4>Patients</h4>
+          <h4>{triagePatients + consultationPatients}</h4>
+        </Tile>
+        <Tile className={styles.card}>
+          <h3>Patients in Triage </h3>
+          <h4>Patients</h4>
+          <h4>{triagePatients}</h4>
+        </Tile>
+        <Tile className={styles.card}>
+          <h3>Patients in Cosultation </h3>
+          <h4>Patients</h4>
+          <h4>{consultationPatients}</h4>
+        </Tile>
+        <Tile className={styles.card}>
+          <h3>Walk-ins Today </h3>
+          <h4>Patients</h4>
+          <h4>0</h4>
+        </Tile>
+        <Tile className={styles.card}>
+          <h3>Emergencies Today </h3>
+          <h4>Patients</h4>
+          <h4>0</h4>
+        </Tile>
+      </div>
+      <FluidDropdown
+        className={styles.dropdownItem}
+        id={''}
+        items={dropDownItems}
+        label={'Total Patients'}
+        titleText={''}
+        onChange={handleDropdownChange}
+      ></FluidDropdown>
+      <PatientList patients={selectedPatients} />
+    </>
+  );
+};
+
+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/index.ts

@@ -52,10 +52,16 @@ export const attendedToPatientsExtension = getAsyncLifecycle(
   () => import('./service-queues/metrics/metrics-cards/attended-patients.extension'),
   options,
 );
+export const triageWaitingPatientsExtension = getAsyncLifecycle(
+  () => import('./triage/metrics/waiting-patients.extension'),
+  options,
+);
+export const triageAttendedToPatientsExtension = getAsyncLifecycle(
+  () => import('./triage/metrics/attended-patients.extension'),
+  options,
+);
 
 export const workflowRegistryLink = getAsyncLifecycle(() => import('./widgets/workflow-registry-link.extension'), {
   featureName: 'workflow-registry-link',
   moduleName,
 });
-
-export const triage = getAsyncLifecycle(() => import('./triage/triage.component'), options);

package/src/root.component.tsx

@@ -9,6 +9,7 @@ import LaboratoryComponent from './laboratory/laboratory.component';
 import AppointmentsComponent from './appointments/appointments.component';
 import PharmacyComponent from './pharmacy/pharmacy.component';
 import Consultation from './service-queues/consultation/consultation.component';
+import Dashboard from './dashboard/dashboard.component';
 
 const Root: React.FC = () => {
   const spaBasePath = window.spaBase;
@@ -22,7 +23,7 @@ const Root: React.FC = () => {
       <LeftPanel />
       <main className={styles.container}>
         <Routes>
-          <Route path="" element={<RegistryComponent />} />
+          <Route path="dashboard" element={<Dashboard />} />
           <Route path="registry" element={<RegistryComponent />} />
           <Route path="consultation" element={<Consultation />} />
           <Route path="triage" element={<Triage />} />

package/src/routes.json

@@ -35,6 +35,18 @@
       "component": "attendedToPatientsExtension",
       "slot": "clinic-metrics-slot",
       "order": 2
+    },
+      {
+      "name": "metrics-card-patients-in-waiting",
+      "component": "triageWaitingPatientsExtension",
+      "slot": "triage-metrics-slot",
+      "order": 1
+    },
+    {
+      "name": "metrics-card-patients-attended-to",
+      "component": "triageAttendedToPatientsExtension",
+      "slot": "triage-metrics-slot",
+      "order": 2
     }
   ],
   "modals": [

package/src/service-queues/consultation/consultation.component.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { QUEUE_SERVICE_UUIDS } from '../../shared/constants/concepts';
 import ServiceQueueComponent from '../service-queue/service-queue.component';
+import MetricsContainer from '../metrics/metrics-container.component';
 const Consultation: React.FC = () => {
   return (
     <>
+      <MetricsContainer />
       <ServiceQueueComponent
         serviceTypeUuid={QUEUE_SERVICE_UUIDS.CLINICAL_CONSULTATION_SERVICE_UUID}
         title="Clinical Consultation"

package/src/service-queues/metrics/metrics-cards/attended-patients.extension.tsx

@@ -1,17 +1,34 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MetricsCard, MetricsCardHeader, MetricsCardBody, MetricsCardItem } from './metrics-card.component';
-import { useServiceMetricsCount } from '../metrics.resource';
+import { useSession } from '@openmrs/esm-framework';
+import { QUEUE_SERVICE_UUIDS } from '../../../shared/constants/concepts';
+import { getServiceQueueByLocationUuid } from '../../service-queues.resource';
+import { type QueueEntryResult } from '../../../registry/types';
 
 export default function AttendedToPatientsExtension() {
   const { t } = useTranslation();
-  const { serviceCount, isLoading } = useServiceMetricsCount("COMPLETED");
+
+  const [consultationQueueEntries, setConsultationQueueEntries] = useState<QueueEntryResult[]>([]);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const consultationServiceUuid = QUEUE_SERVICE_UUIDS.CLINICAL_CONSULTATION_SERVICE_UUID;
+  useEffect(() => {
+    getConsultationEntryQueues();
+  }, []);
+
+  const getConsultationEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(consultationServiceUuid, locationUuid);
+    setConsultationQueueEntries(res);
+  };
+
+  const attendedToPatientsCount = consultationQueueEntries?.filter((p) => p.status === 'COMPLETED').length ?? 0;
 
   return (
     <MetricsCard>
       <MetricsCardHeader title={t('patientsAttendedTo', 'Patients attended to')} />
       <MetricsCardBody>
-        <MetricsCardItem label={t('patients', 'Patients')} value={isLoading ? '--' : serviceCount ?? 0} />
+        <MetricsCardItem label={t('patients', 'Patients')} value={attendedToPatientsCount} />
       </MetricsCardBody>
     </MetricsCard>
   );

package/src/service-queues/metrics/metrics-cards/waiting-patients.extension.tsx

@@ -1,17 +1,33 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MetricsCard, MetricsCardHeader, MetricsCardBody, MetricsCardItem } from './metrics-card.component';
-import { useServiceMetricsCount } from '../metrics.resource';
+import { getServiceQueueByLocationUuid } from '../../service-queues.resource';
+import { QUEUE_SERVICE_UUIDS } from '../../../shared/constants/concepts';
+import { useSession } from '@openmrs/esm-framework';
+import { type QueueEntryResult } from '../../../registry/types';
 
 export default function WaitingPatientsExtension() {
   const { t } = useTranslation();
-  const { serviceCount, isLoading } = useServiceMetricsCount("WAITING");
+  const [consultationQueueEntries, setConsultationQueueEntries] = useState<QueueEntryResult[]>([]);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const consultationServiceUuid = QUEUE_SERVICE_UUIDS.CLINICAL_CONSULTATION_SERVICE_UUID;
+  useEffect(() => {
+    getConsultationEntryQueues();
+  }, []);
+
+  const getConsultationEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(consultationServiceUuid, locationUuid);
+    setConsultationQueueEntries(res);
+  };
+
+  const waitingPatientsCount = consultationQueueEntries?.filter((p) => p.status === 'WAITING').length ?? 0;
 
   return (
     <MetricsCard>
       <MetricsCardHeader title={t('patientsInWaiting', 'Patients in waiting')} />
       <MetricsCardBody>
-        <MetricsCardItem label={t('patients', 'Patients')} value={isLoading ? '--' : serviceCount ?? 0} />
+        <MetricsCardItem label={t('patients', 'Patients')} value={waitingPatientsCount ? waitingPatientsCount : '--'} />
       </MetricsCardBody>
     </MetricsCard>
   );

package/src/service-queues/queue-list/queue-list.component.tsx

@@ -95,6 +95,7 @@ const QueueList: React.FC<QueueListProps> = ({
                             <OverflowMenu aria-label="overflow-menu">
                               <OverflowMenuItem itemText="Move" onClick={() => handleMovePatient(val)} />
                               <OverflowMenuItem itemText="Transition" onClick={() => handleTransitionPatient(val)} />
+                              <OverflowMenuItem itemText="Sign off" onClick={handleCheckin} />
                               <OverflowMenuItem itemText="Remove Patient" />
                             </OverflowMenu>
                           </>

package/src/triage/metrics/attended-patients.extension.tsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  MetricsCard,
+  MetricsCardHeader,
+  MetricsCardBody,
+  MetricsCardItem,
+} from '../../service-queues/metrics/metrics-cards/metrics-card.component';
+import { useSession } from '@openmrs/esm-framework';
+import { QUEUE_SERVICE_UUIDS } from '../../shared/constants/concepts';
+import { getServiceQueueByLocationUuid } from '../../service-queues/service-queues.resource';
+import { type QueueEntryResult } from '../../registry/types';
+
+export default function TriageAttendedToPatientsExtension() {
+  const { t } = useTranslation();
+  const [triageQueueEntries, setTriageQueueEntries] = useState<QueueEntryResult[]>([]);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const triageServiceUuid = QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID;
+  useEffect(() => {
+    getTriageEntryQueues();
+  }, []);
+
+  const getTriageEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(triageServiceUuid, locationUuid);
+    setTriageQueueEntries(res);
+  };
+
+  const attendedToPatientsCount = triageQueueEntries?.filter((p) => p.status === 'COMPLETED').length ?? 0;
+
+  return (
+    <MetricsCard>
+      <MetricsCardHeader title={t('patientsAttendedTo', 'Patients attended to')} />
+      <MetricsCardBody>
+        <MetricsCardItem
+          label={t('patients', 'Patients')}
+          value={attendedToPatientsCount ? attendedToPatientsCount : '--'}
+        />
+      </MetricsCardBody>
+    </MetricsCard>
+  );
+}

package/src/triage/metrics/metrics.scss

@@ -0,0 +1,36 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.cardContainer {
+  background-color: $ui-02;
+  display: flex;
+  padding: layout.$spacing-05;
+  flex-flow: row wrap;
+  gap: layout.$spacing-05;
+  align-items: stretch;
+}
+
+.cardContainer > * {
+  flex: 1 0 0%;
+  min-width: 16rem;
+}
+
+// If we're on tablet and the screen is too small for 3 cards across
+// @TODO: This will do nonsense things if there are not exactly 3 cards
+@media (max-width: calc(layout.$spacing-05 * 4 + 18.75rem * 3)) {
+  :global(.omrs-breakpoint-lt-desktop) {
+    .cardContainer > *:has(:global(.cardWithChildren)) {
+      order: 999;
+    }
+  }
+}
+
+// If we're on desktop and the screen is too small for the left nav bar
+// plus 3 cards across
+@media (max-width: calc(16rem + layout.$spacing-05 * 4 + 18.75rem * 3)) {
+  :global(.omrs-breakpoint-gt-tablet) {
+    .cardContainer > *:has(:global(.cardWithChildren)) {
+      order: 999;
+    }
+  }
+}

package/src/triage/metrics/triage-metrics.component.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './metrics.scss';
+
+export interface Service {
+  display: string;
+  uuid?: string;
+}
+
+function TriageMetricsContainer() {
+  return <ExtensionSlot name="triage-metrics-slot" className={styles.cardContainer} data-testid="clinic-metrics" />;
+}
+
+export default TriageMetricsContainer;

package/src/triage/metrics/waiting-patients.extension.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  MetricsCard,
+  MetricsCardHeader,
+  MetricsCardBody,
+  MetricsCardItem,
+} from '../../service-queues/metrics/metrics-cards/metrics-card.component';
+import { useSession } from '@openmrs/esm-framework';
+import { QUEUE_SERVICE_UUIDS } from '../../shared/constants/concepts';
+import { getServiceQueueByLocationUuid } from '../../service-queues/service-queues.resource';
+import { type QueueEntryResult } from '../../registry/types';
+
+export default function TriageWaitingPatientsExtension() {
+  const { t } = useTranslation();
+  const [triageQueueEntries, setTriageQueueEntries] = useState<QueueEntryResult[]>([]);
+  const session = useSession();
+  const locationUuid = session.sessionLocation.uuid;
+  const triageServiceUuid = QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID;
+  useEffect(() => {
+    getTriageEntryQueues();
+  }, []);
+
+  const getTriageEntryQueues = async () => {
+    const res = await getServiceQueueByLocationUuid(triageServiceUuid, locationUuid);
+    setTriageQueueEntries(res);
+  };
+
+  const waitingPatientsCount = triageQueueEntries?.filter((p) => p.status === 'WAITING').length ?? 0;
+
+  return (
+    <MetricsCard>
+      <MetricsCardHeader title={t('patientsInWaiting', 'Patients in waiting')} />
+      <MetricsCardBody>
+        <MetricsCardItem label={t('patients', 'Patients')} value={waitingPatientsCount ? waitingPatientsCount : '--'} />
+      </MetricsCardBody>
+    </MetricsCard>
+  );
+}

package/src/triage/triage.component.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+
+import TriageMetricsContainer from './metrics/triage-metrics.component';
 import ServiceQueueComponent from '../service-queues/service-queue/service-queue.component';
 import { QUEUE_SERVICE_UUIDS } from '../shared/constants/concepts';
 
@@ -6,7 +8,10 @@ interface TriageProps {}
 const Triage: React.FC<TriageProps> = () => {
   return (
     <>
-      <ServiceQueueComponent serviceTypeUuid={QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID} title="Triage" />
+      <TriageMetricsContainer />
+      <div>
+        <ServiceQueueComponent serviceTypeUuid={QUEUE_SERVICE_UUIDS.TRIAGE_SERVICE_UUID} title="Triage" />
+      </div>
     </>
   );
 };

package/src/triage/types.ts

@@ -1,22 +1,16 @@
 export interface Patient {
   uuid: string;
-  display: string;
-  queue: {
-    display: string;
-    uuid: string;
-    location: {
-      display: string;
-      uuid: string;
-    };
-  };
-  status: {
-    display: string;
-  };
-  patient: {
-    uuid: string;
-    person: {
-      gender: string;
-      age: number;
-    };
-  };
+  middle_name: string;
+  given_name: string;
+  family_name: string;
+  queue_room: string;
+  status: string | number;
+  patient_name: string;
+  patient_uuid: string;
+  priority: string | number;
+}
+
+export interface Room {
+  name: string;
+  patients: Patient[];
 }