@kenyaemr/esm-morgue-app 5.3.7-pre.1451 → 5.3.7-pre.1453

package/src/card/compartment.scss

@@ -10,25 +10,26 @@
   padding: 0;
   justify-items: center;
   align-items: start;
-}
 
-.cardRow {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
+  :global(.omrs-breakpoint-lt-desktop) & {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
 .cardView {
-  width: 340px;
+  width: 100%;
+  max-width: 380px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   padding: layout.$spacing-04;
-  background-color: colors.$gray-80;
-  border-radius: 5px;
-  box-shadow: 0 layout.$spacing-02 layout.$spacing-03 rgba(0, 0, 0, 0.1);
-  gap: layout.$spacing-03;
+  background-color: colors.$gray-20;
   margin-bottom: layout.$spacing-05;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    padding: layout.$spacing-03;
+    gap: layout.$spacing-02;
+  }
 }
 
 .cardRow {
@@ -52,7 +53,7 @@
   width: layout.$spacing-07;
   height: layout.$spacing-07;
   border-radius: 50%;
-  background-color: colors.$white;
+  background-color: colors.$blue-60;
 }
 
 .cardLabel {
@@ -60,28 +61,23 @@
   line-height: 1.29;
   border-radius: 50%;
   letter-spacing: 0.16px;
-  color: colors.$gray-80;
+  color: colors.$white;
 }
 
 .deceasedName,
 .noCompartment {
-  font-size: layout.$spacing-05;
+  font-size: type.type-scale(2);
   font-weight: 600;
-  color: colors.$white;
-  text-align: center;
+  color: colors.$black;
+  margin-left: layout.$spacing-05;
   width: 100%;
 }
 
-.deceasedAge,
-.deceasedResidences,
-.deceasedDate,
-.causeofDeathTag,
-.causeofDeath,
-.compartmentStatus,
+.deceasedReason,
 .deceasedNoDays,
 .noDays {
-  font-size: layout.$spacing-04;
-  color: colors.$white;
+  color: colors.$gray-90;
+  font-size: type.type-scale(2);
 }
 
 .assignButton {
@@ -89,8 +85,32 @@
   margin-top: layout.$spacing-05;
 }
 
-.configurableLink {
+.viewDetailsLink {
   margin: 0;
   padding: 0;
-  text-decoration: none;
+  color: colors.$gray-60;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+  font-weight: normal;
+  color: colors.$gray-60;
+  font-size: type.type-scale(2);
+}
+
+.age {
+  font-weight: normal;
+  color: colors.$gray-60;
+  font-size: type.type-scale(2);
+}
+.causeDisplay {
+  font-size: type.type-scale(2);
+  color: colors.$gray-60;
+  text-align: justify;
+}
+.emptyStateContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
 }

package/src/component/main.component.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { MorgueHeader } from '../header/morgue-header.component';
 import { MorgueTabs } from '../tabs/tabs.component';
+import { useTranslation } from 'react-i18next';
 
 const MainComponent: React.FC = () => {
+  const { t } = useTranslation();
   return (
     <div className={`omrs-main-content`}>
-      <MorgueHeader title={'Morgue'} />
+      <MorgueHeader title={t('mortuary', 'Mortuary')} />
       <MorgueTabs />
     </div>
   );

package/src/header/admitted-queue-header.component.tsx

@@ -1,19 +1,14 @@
-import { ComboBox, Search } from '@carbon/react';
+import { Search } from '@carbon/react';
 import React, { useState } from 'react';
 import styles from './admitted-queue-header.scss';
 
-const DeceasedFilter: React.FC = () => {
-  const items = [
-    { id: 'all', text: 'All' },
-    { id: 'male', text: 'Male' },
-    { id: 'female', text: 'Female' },
-    { id: 'children', text: 'Children' },
-  ];
+const DeceasedFilter: React.FC<{ onSearchChange: (searchQuery: string) => void }> = ({ onSearchChange }) => {
+  const [searchQuery, setSearchQuery] = useState('');
 
-  const [selectedItem, setSelectedItem] = useState(items[0]);
-
-  const handleChange = (selected) => {
-    setSelectedItem(selected.selectedItem);
+  const handleSearchChange = (event) => {
+    const query = event.target.value;
+    setSearchQuery(query);
+    onSearchChange(query);
   };
 
   return (
@@ -24,21 +19,10 @@ const DeceasedFilter: React.FC = () => {
         labelText="Search"
         closeButtonLabelText="Clear search input"
         id="search-deceased"
-        onChange={() => {}}
-        onKeyDown={() => {}}
+        onChange={handleSearchChange}
+        value={searchQuery}
         className={styles.searchInput}
       />
-      <div className={styles.actionBtn}>
-        <ComboBox
-          onChange={handleChange}
-          id="filter"
-          items={items}
-          className={styles.comboBox}
-          size="sm"
-          itemToString={(item) => (item ? item.text : '')}
-          initialSelectedItem={items[0]}
-        />
-      </div>
     </div>
   );
 };

package/src/header/admitted-queue-header.scss

@@ -6,7 +6,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  // background-color: $ui-02;
   padding: 0 layout.$spacing-05;
   height: 4rem;
   margin-bottom: 0 layout.$spacing-05;

package/src/header/morgue-header.component.tsx

@@ -19,8 +19,8 @@ export const MorgueHeader: React.FC<MorgueHeaderProps> = ({ title }) => {
       <div className={styles['left-justified-items']}>
         <MorgueIllustration />
         <div className={styles['page-labels']}>
-          <p>{t('morgue', 'Morgue Management')}</p>
           <p className={styles['page-name']}>{title}</p>
+          <p>{t('mortuaryManagement', 'Mortuary management')}</p>
         </div>
       </div>
       <div className={styles.metrics}>
@@ -36,20 +36,6 @@ export const MorgueHeader: React.FC<MorgueHeaderProps> = ({ title }) => {
           <span className={styles.metricLabel}>{t('discharges', 'Discharges')}</span>
           <span className={styles.metricValue}>0</span>
         </div>
-        <div className={styles.wrapMetrics}>
-          <span className={styles.metricLabel}>{t('amountCollected', 'Amount(s)')}</span>
-          <span className={styles.metricValue}>0</span>
-        </div>
-        <div className={styles.wrapMetrics}>
-          <div className={styles.metricLocationDate}>
-            <span className={styles.location}>
-              <Location size={16} /> {userLocation}
-            </span>
-            <span className={styles.date}>
-              <Calendar size={16} /> {formatDate(new Date(), { mode: 'standard' })}
-            </span>
-          </div>
-        </div>
       </div>
     </div>
   );

package/src/header/morgue-header.scss

@@ -26,8 +26,6 @@
 }
 
 .page-labels {
-  margin-left: layout.$spacing-05;
-
   p:first-of-type {
     margin-bottom: layout.$spacing-02;
   }
@@ -53,7 +51,6 @@ svg.iconOverrides {
   gap: layout.$spacing-06;
   flex-wrap: wrap;
   padding: layout.$spacing-04 layout.$spacing-05 0 0;
-  margin-right: layout.$spacing-10;
   width: auto;
   height: auto;
 }
@@ -102,35 +99,3 @@ svg.iconOverrides {
   width: auto;
   max-width: 120px;
 }
-
-.location,
-.date {
-  display: flex;
-  align-items: center;
-  font-size: layout.$spacing-05;
-  line-height: 1.33;
-  text-align: left;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.location {
-  margin-bottom: layout.$spacing-02;
-}
-
-@media (max-width: 768px) {
-  .metrics {
-    gap: 12px;
-    margin-right: layout.$spacing-05;
-  }
-
-  .wrapMetrics {
-    min-width: layout.$spacing-11;
-  }
-
-  .metricLabel,
-  .metricValue {
-    font-size: layout.$spacing-04;
-  }
-}

package/src/hook/useMorgue.resource.ts

@@ -7,7 +7,7 @@ import {
   useOpenmrsPagination,
   type Visit,
 } from '@openmrs/esm-framework';
-import { DeceasedPatientResponse, PaymentMethod, VisitTypeResponse, Location } from '../types';
+import { DeceasedPatientResponse, PaymentMethod, VisitTypeResponse, Location, Patient } from '../types';
 import useSWR from 'swr';
 import { BillingConfig, ConfigObject } from '../config-schema';
 import { useState } from 'react';
@@ -114,3 +114,12 @@ export const useActiveMorgueVisit = () => {
 
   return { data: activeDeceased, error, isLoading };
 };
+const usePerson = (uuid: string) => {
+  const customRepresentation = `custom:(uuid,display,gender,birthdate,dead,age,deathDate,causeOfDeath:(uuid,display))`;
+  const url = `${restBaseUrl}/person/${uuid}?v=${customRepresentation}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<Patient['person']>>(url, openmrsFetch);
+  const person = data?.data;
+  return { isLoading, error, person };
+};
+
+export default usePerson;

package/src/index.ts

@@ -28,7 +28,7 @@ export const root = getAsyncLifecycle(() => import('./root.component'), options)
 export const morgueDashboardLink = getSyncLifecycle(
   createLeftPanelLink({
     name: 'morgue',
-    title: 'Morgue',
+    title: 'Mortuary',
   }),
   options,
 );

package/src/tables/admitted-queue.component.tsx

@@ -1,15 +1,20 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import DeceasedFilter from '../header/admitted-queue-header.component';
 import styles from './admitted-queue.scss';
 import CompartmentView from '../card/compartment-view.compartment';
-import { useActiveMorgueVisit, useDeceasedPatient } from '../hook/useMorgue.resource';
+import usePatientPerson, { useActiveMorgueVisit } from '../hook/useMorgue.resource';
 import { InlineLoading } from '@carbon/react';
 import { CardHeader, ErrorState } from '@openmrs/esm-patient-common-lib';
 
 export const AdmittedQueue: React.FC = () => {
   const { data: activeDeceased, error, isLoading } = useActiveMorgueVisit();
   const { t } = useTranslation();
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const handleSearchChange = (query: string) => {
+    setSearchQuery(query);
+  };
 
   if (isLoading) {
     return (
@@ -28,10 +33,12 @@ export const AdmittedQueue: React.FC = () => {
   return (
     <div className={styles.layoutWrapper}>
       <CardHeader title={t('allocation', 'Allocation')} children={''} />
-      <DeceasedFilter />
+      <DeceasedFilter onSearchChange={handleSearchChange} />
       <div className={styles.patientCardContainer}>
-        <CompartmentView patientVisit={activeDeceased} />
+        <CompartmentView patientVisit={activeDeceased} searchQuery={searchQuery} />
       </div>
     </div>
   );
 };
+
+export default AdmittedQueue;

package/src/utils/utils.ts

@@ -1,6 +1,25 @@
 import { makeUrl } from '@openmrs/esm-framework';
 import dayjs from 'dayjs';
 
+/**
+ * Generates a URL based on the given path and the current location.
+ *
+ * @param path - The relative path for the URL.
+ * @returns The full URL as a string.
+ */
+
 export function makeUrlUrl(path: string) {
   return new URL(makeUrl(path), window.location.toString());
 }
+
+/**
+ * Calculates the number of days from the given date to today.
+ *
+ * @param startDate - The starting date in string or Date format.
+ * @returns The number of days from the start date to today.
+ */
+export function convertDateToDays(startDate: string | Date): number {
+  const today = dayjs();
+  const start = dayjs(startDate);
+  return today.diff(start, 'day');
+}

package/translations/en.json

@@ -4,12 +4,12 @@
   "admitted": "Admitted Bodies",
   "admittedOnes": "Admitted",
   "allocation": "Allocation",
-  "amountCollected": "Amount(s)",
   "awaiting": "Awaiting",
   "discharged": "Discharged",
   "discharges": "Discharges",
   "empty": "Empty",
-  "morgue": "Morgue Management",
+  "mortuary": "Mortuary",
+  "mortuaryManagement": "Mortuary management",
   "noDeceasedPersons": "There are no deceased persons on the waiting list",
   "noResultFound": "Sorry, no results found",
   "noWaitingList": "Waiting List",

package/dist/47.js

@@ -1 +0,0 @@
-"use strict";(globalThis.webpackChunk_kenyaemr_esm_morgue_app=globalThis.webpackChunk_kenyaemr_esm_morgue_app||[]).push([[47],{1895:(e,t,r)=>{r.d(t,{aZ:()=>i});var c,l,a=r(380),n=r.n(a),h=r(9247);const i=n().forwardRef((function(e,t){let{children:r,size:a=16,...i}=e;return n().createElement(h.A,{width:a,height:a,ref:t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",...i},c||(c=n().createElement("path",{d:"M16,18a5,5,0,1,1,5-5A5.0057,5.0057,0,0,1,16,18Zm0-8a3,3,0,1,0,3,3A3.0033,3.0033,0,0,0,16,10Z"})),l||(l=n().createElement("path",{d:"M16,30,7.5645,20.0513c-.0479-.0571-.3482-.4515-.3482-.4515A10.8888,10.8888,0,0,1,5,13a11,11,0,0,1,22,0,10.8844,10.8844,0,0,1-2.2148,6.5973l-.0015.0025s-.3.3944-.3447.4474ZM8.8125,18.395c.001.0007.2334.3082.2866.3744L16,26.9079l6.91-8.15c.0439-.0552.2783-.3649.2788-.3657A8.901,8.901,0,0,0,25,13,9,9,0,1,0,7,13a8.9054,8.9054,0,0,0,1.8125,5.395Z"})),r)}))},4240:(e,t,r)=>{r.d(t,{yG:()=>h});var c,l=r(380),a=r.n(l),n=r(9247);const h=a().forwardRef((function(e,t){let{children:r,size:l=16,...h}=e;return a().createElement(n.A,{width:l,height:l,ref:t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",...h},c||(c=a().createElement("path",{d:"M24,20l-1.41,1.41L26.17,25H10a4,4,0,0,1,0-8H22A6,6,0,0,0,22,5H5.83L9.41,1.41,8,0,2,6l6,6,1.41-1.41L5.83,7H22a4,4,0,0,1,0,8H10a6,6,0,0,0,0,12H26.17l-3.58,3.59L24,32l6-6Z"})),r)}))},8285:(e,t,r)=>{r.d(t,{W5:()=>i});var c,l,a=r(380),n=r.n(a),h=r(9247);const i=n().forwardRef((function(e,t){let{children:r,size:a=16,...i}=e;return n().createElement(h.A,{width:a,height:a,ref:t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",...i},c||(c=n().createElement("path",{d:"M25,16H17a2.0023,2.0023,0,0,0-2,2v6H4V14H2V30H4V26H28v4h2V21A5.0059,5.0059,0,0,0,25,16Zm3,8H17V18h8a3.0033,3.0033,0,0,1,3,3Z"})),l||(l=n().createElement("path",{d:"M9.5 17A1.5 1.5 0 118 18.5 1.5017 1.5017 0 019.5 17m0-2A3.5 3.5 0 1013 18.5 3.5 3.5 0 009.5 15zM21 6L17 6 17 2 15 2 15 6 11 6 11 8 15 8 15 12 17 12 17 8 21 8 21 6z"})),r)}))},3760:(e,t,r)=>{r.d(t,{Bo:()=>s});var c,l,a,n,h,i,o,m,w=r(380),H=r.n(w),d=r(9247);const s=H().forwardRef((function(e,t){let{children:r,size:w=16,...s}=e;return H().createElement(d.A,{width:w,height:w,ref:t,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32",fill:"currentColor",...s},c||(c=H().createElement("path",{d:"M20 25H27V27H20zM22 29H25V31H22zM27 23h-2c0-1.1.4-2 1.2-2.8l.5-.5c.8-.8 1.3-2 1.3-3.2 0-2.5-2-4.5-4.5-4.5S19 14 19 16.5c0 1.2.5 2.3 1.3 3.2l.5.5C21.6 21 22 21.9 22 23h-2c0-.5-.2-1-.6-1.4l-.5-.5c-1.2-1.2-1.9-2.9-1.9-4.6 0-3.6 2.9-6.5 6.5-6.5s6.5 2.9 6.5 6.5c0 1.7-.7 3.4-1.9 4.6l-.5.5C27.2 22 27 22.5 27 23zM6 22H14V24H6z"})),l||(l=H().createElement("circle",{cx:"12",cy:"19",r:"1"})),a||(a=H().createElement("path",{d:"M6 18H9V20H6zM6 14H13V16H6zM10 10H17V12H10z"})),n||(n=H().createElement("circle",{cx:"7",cy:"11",r:"1"})),h||(h=H().createElement("path",{d:"M16 6H20V8H16z"})),i||(i=H().createElement("circle",{cx:"13",cy:"7",r:"1"})),o||(o=H().createElement("path",{d:"M6 6H10V8H6z"})),m||(m=H().createElement("path",{d:"M18,28H4V4l18,0v4h2V4c0-1.1-0.9-2-2-2H4C2.9,2,2,2.9,2,4v24c0,1.1,0.9,2,2,2h14V28z"})),r)}))}}]);

package/dist/47.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"47.js","mappings":"oKAc2EA,EAASC,E,4BA+LpF,MAAMC,EAAwB,gBAAiB,SAAkBC,EAAQC,GACvE,IAAI,SACFC,EAAQ,KACRC,EAAO,MACJC,GACDJ,EACJ,OAAoB,kBAAoB,IAAM,CAC5CK,MAAOF,EACPG,OAAQH,EACRF,IAAKA,EACLM,MAAO,6BACPC,QAAS,YACTC,KAAM,kBACHL,GACFP,IAAYA,EAAuB,kBAAoB,OAAQ,CAChEa,EAAG,kGACAZ,IAAYA,EAAuB,kBAAoB,OAAQ,CAClEY,EAAG,6VACAR,EACP,G,uCClN+cS,E,4BAgrB/c,MAAMC,EAAwB,gBAAiB,SAAkBC,EAAQZ,GACvE,IAAI,SACFC,EAAQ,KACRC,EAAO,MACJC,GACDS,EACJ,OAAoB,kBAAoB,IAAM,CAC5CR,MAAOF,EACPG,OAAQH,EACRF,IAAKA,EACLM,MAAO,6BACPC,QAAS,YACTC,KAAM,kBACHL,GACFO,IAAYA,EAAuB,kBAAoB,OAAQ,CAChED,EAAG,8KACAR,EACP,G,uCCjsB++CY,EAAUC,E,4BAy3Dz/C,MAAMC,EAA2B,gBAAiB,SAAqBC,EAAQhB,GAC7E,IAAI,SACFC,EAAQ,KACRC,EAAO,MACJC,GACDa,EACJ,OAAoB,kBAAoB,IAAM,CAC5CZ,MAAOF,EACPG,OAAQH,EACRF,IAAKA,EACLM,MAAO,6BACPC,QAAS,YACTC,KAAM,kBACHL,GACFU,IAAaA,EAAwB,kBAAoB,OAAQ,CAClEJ,EAAG,kIACAK,IAAaA,EAAwB,kBAAoB,OAAQ,CACpEL,EAAG,yKACAR,EACP,G,uCC54D0+DgB,EAAUC,EAAWC,EAAUC,EAAWC,EAAUC,EAAWC,EAAUC,E,4BAg8DnjE,MAAMC,EAAwC,gBAAiB,SAAkCC,EAAQ1B,GACvG,IAAI,SACFC,EAAQ,KACRC,EAAO,MACJC,GACDuB,EACJ,OAAoB,kBAAoB,IAAM,CAC5CtB,MAAOF,EACPG,OAAQH,EACRF,IAAKA,EACLM,MAAO,6BACPC,QAAS,YACTC,KAAM,kBACHL,GACFc,IAAaA,EAAwB,kBAAoB,OAAQ,CAClER,EAAG,sUACAS,IAAcA,EAAyB,kBAAoB,SAAU,CACxES,GAAI,KACJC,GAAI,KACJC,EAAG,OACAV,IAAaA,EAAwB,kBAAoB,OAAQ,CACpEV,EAAG,iDACAW,IAAcA,EAAyB,kBAAoB,SAAU,CACxEO,GAAI,IACJC,GAAI,KACJC,EAAG,OACAR,IAAaA,EAAwB,kBAAoB,OAAQ,CACpEZ,EAAG,oBACAa,IAAcA,EAAyB,kBAAoB,SAAU,CACxEK,GAAI,KACJC,GAAI,IACJC,EAAG,OACAN,IAAaA,EAAwB,kBAAoB,OAAQ,CACpEd,EAAG,kBACAe,IAAaA,EAAwB,kBAAoB,OAAQ,CACpEf,EAAG,uFACAR,EACP,G","sources":["webpack://@kenyaemr/esm-morgue-app/../../node_modules/@carbon/icons-react/es/generated/bucket-10.js","webpack://@kenyaemr/esm-morgue-app/../../node_modules/@carbon/icons-react/es/generated/bucket-11.js","webpack://@kenyaemr/esm-morgue-app/../../node_modules/@carbon/icons-react/es/generated/bucket-7.js","webpack://@kenyaemr/esm-morgue-app/../../node_modules/@carbon/icons-react/es/generated/bucket-8.js"],"names":["_path10","_path11","Location","_ref10","ref","children","size","rest","width","height","xmlns","viewBox","fill","d","_path51","Movement","_ref31","_path127","_path128","HospitalBed","_ref80","_path168","_circle43","_path169","_circle44","_path170","_circle45","_path171","_path172","IbmWatsonKnowledgeStudio","_ref78","cx","cy","r"],"sourceRoot":""}