@kenyaemr/esm-morgue-app 5.4.2-pre.2283 → 5.4.2-pre.2288

package/src/forms/swap-compartment-workspace/swap-unit.workspace.tsx

@@ -0,0 +1,280 @@
+import {
+  Button,
+  ButtonSet,
+  Form,
+  Stack,
+  Column,
+  InlineLoading,
+  InlineNotification,
+  Search,
+  RadioButton,
+  RadioButtonGroup,
+  Tag,
+  Layer,
+  Tile,
+  FormGroup,
+} from '@carbon/react';
+import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import DeceasedInfo from '../../deceased-patient-header/deceasedInfo/deceased-info.component';
+import styles from './swap-unit.scss';
+import { Controller, useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  useVisit,
+  showSnackbar,
+  navigate,
+  restBaseUrl,
+  ResponsiveWrapper,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
+import classNames from 'classnames';
+import { type MortuaryLocationResponse } from '../../types';
+import { useMortuaryOperation } from '../admit-deceased-person-workspace/admit-deceased-person.resource';
+
+interface SwapFormProps {
+  closeWorkspace: () => void;
+  patientUuid: string;
+  mortuaryLocation: MortuaryLocationResponse;
+  mutate?: () => void;
+}
+
+const schema = z.object({
+  availableCompartment: z
+    .union([z.number(), z.string()])
+    .refine((val) => {
+      if (typeof val === 'string') {
+        return val.length > 0 && !isNaN(Number(val)) && Number(val) > 0;
+      }
+      return typeof val === 'number' && !isNaN(val) && val > 0;
+    }, 'Please select an available compartment')
+    .transform((val) => (typeof val === 'string' ? Number(val) : val)),
+});
+
+const SwapForm: React.FC<SwapFormProps> = ({ closeWorkspace, patientUuid, mortuaryLocation, mutate }) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { currentVisit } = useVisit(patientUuid);
+  const { assignDeceasedToCompartment, removeDeceasedFromCompartment, createEncounterForCompartmentSwap } =
+    useMortuaryOperation();
+
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting, isDirty },
+  } = useForm({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      availableCompartment: '',
+    },
+  });
+
+  const currentBed = mortuaryLocation?.bedLayouts?.find((bed) =>
+    bed.patients?.some((patient) => patient.uuid === patientUuid),
+  );
+
+  const currentBedNumber = currentBed?.bedNumber;
+
+  const filteredBeds = useMemo(() => {
+    if (!mortuaryLocation?.bedLayouts) {
+      return [];
+    }
+
+    let beds = mortuaryLocation.bedLayouts;
+
+    if (searchTerm) {
+      beds = beds.filter(
+        (bed) =>
+          bed.bedNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          bed.bedType?.displayName?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          bed.status?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          bed.patients?.some((patient) => patient.person?.display?.toLowerCase().includes(searchTerm.toLowerCase())),
+      );
+    }
+
+    return beds;
+  }, [mortuaryLocation?.bedLayouts, searchTerm]);
+
+  const onSubmit = async (data: any) => {
+    const { availableCompartment } = data;
+    const bedSelected = mortuaryLocation?.bedLayouts?.find((bed) => bed.bedId === availableCompartment);
+    const bedAssignedToPatient = mortuaryLocation?.bedLayouts?.find((bed) =>
+      bed.patients?.some((patient) => patient.uuid === patientUuid),
+    );
+
+    try {
+      const encounterResponse = await createEncounterForCompartmentSwap(patientUuid, currentVisit?.uuid);
+
+      if (encounterResponse.ok) {
+        if (bedSelected) {
+          const compartmentResponse = await assignDeceasedToCompartment(
+            patientUuid,
+            availableCompartment,
+            encounterResponse.data.uuid,
+          );
+
+          if (compartmentResponse.ok) {
+            showSnackbar({
+              kind: 'success',
+              title: t('deceasedPatientAssignedNewBed', 'Deceased patient assigned to new compartment'),
+              subtitle: t(
+                'deceasedPatientAssignedNewBedDetail',
+                '{{patientName}} assigned to compartment {{bedNumber}}',
+                {
+                  patientName: currentVisit?.patient?.person?.display,
+                  bedNumber: bedSelected.bedNumber,
+                },
+              ),
+            });
+          }
+        } else if (bedAssignedToPatient) {
+          const unassignResponse = await removeDeceasedFromCompartment(patientUuid, bedAssignedToPatient.bedId);
+
+          if (unassignResponse.ok) {
+            showSnackbar({
+              kind: 'success',
+              title: t('patientUnassignedFromBed', 'Deceased patient unassigned from bed'),
+              subtitle: t('patientUnassignedFromBedDetail', '{{patientName}} is now unassigned from bed', {
+                patientName: currentVisit?.patient?.person?.display,
+              }),
+            });
+          }
+        }
+
+        mutate();
+        navigate({ to: window.getOpenmrsSpaBase() + `home/morgue` });
+        closeWorkspace();
+      } else {
+        showSnackbar({
+          kind: 'error',
+          title: t('errorCreatingEncounter', 'Error assigning deceased to compartment'),
+          subtitle: t('errorCreatingEncounterDetail', 'Please try again or contact system administrator'),
+        });
+      }
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: t('errorChangingPatientBedAssignment', 'Error changing patient bed assignment'),
+        subtitle: error?.message,
+      });
+    }
+  };
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+      <div className={styles.formContainer}>
+        <Stack gap={3}>
+          <DeceasedInfo patientUuid={patientUuid} />
+          <ResponsiveWrapper>
+            <Column>
+              <FormGroup legendText="">
+                <div className={classNames(styles.visitTypeOverviewWrapper)}>
+                  <Search
+                    onChange={(event) => setSearchTerm(event.target.value)}
+                    placeholder={t('searchForCompartments', 'Search for a compartment')}
+                    labelText=""
+                    value={searchTerm}
+                    className={styles.searchInput}
+                  />
+                  <div className={styles.compartmentListContainer}>
+                    {filteredBeds.length > 0 ? (
+                      <Controller
+                        control={control}
+                        name="availableCompartment"
+                        render={({ field }) => (
+                          <RadioButtonGroup
+                            className={styles.radioButtonGroup}
+                            orientation="vertical"
+                            name="availableCompartment"
+                            valueSelected={field.value ? field.value.toString() : ''}
+                            onChange={(value) => {
+                              field.onChange(value);
+                            }}>
+                            {filteredBeds.map((bed, index) => {
+                              const isCurrentBed = bed.bedId === currentBed?.bedId;
+                              const isOccupied = bed.status === 'OCCUPIED';
+
+                              return (
+                                <div key={index} className={styles.compartmentOption}>
+                                  <div className={styles.radioButtonWrapper}>
+                                    <RadioButton
+                                      className={styles.radioButton}
+                                      id={`compartment-${index}`}
+                                      labelText={bed.bedNumber}
+                                      value={bed.bedId.toString()}
+                                      disabled={isCurrentBed}
+                                    />
+                                  </div>
+                                  <div className={styles.compartmentInfo}>
+                                    <div className={styles.compartmentTags}>
+                                      <Tag type={bed.bedType?.displayName === 'VIP' ? 'green' : 'blue'} size="sm">
+                                        {bed.bedType?.displayName || 'Standard'}
+                                      </Tag>
+                                      <Tag type={bed.status === 'AVAILABLE' ? 'green' : 'red'} size="sm">
+                                        {bed.status || 'Unknown'}
+                                      </Tag>
+                                      {isCurrentBed && (
+                                        <Tag type="purple" size="sm">
+                                          {t('current', 'Current')}
+                                        </Tag>
+                                      )}
+                                    </div>
+                                  </div>
+                                </div>
+                              );
+                            })}
+                          </RadioButtonGroup>
+                        )}
+                      />
+                    ) : (
+                      <Layer>
+                        <Tile className={styles.emptyStateTile}>
+                          <EmptyDataIllustration />
+                          <p className={styles.emptyStateContent}>
+                            {t('noCompartmentsFound', 'No compartments found')}
+                          </p>
+                        </Tile>
+                      </Layer>
+                    )}
+                  </div>
+                </div>
+                {errors.availableCompartment && (
+                  <div className={styles.invalidText}>
+                    {typeof errors.availableCompartment?.message === 'string'
+                      ? errors.availableCompartment.message
+                      : ''}
+                  </div>
+                )}
+              </FormGroup>
+            </Column>
+          </ResponsiveWrapper>
+        </Stack>
+      </div>
+      <ButtonSet
+        className={classNames({
+          [styles.tablet]: isTablet,
+          [styles.desktop]: !isTablet,
+        })}>
+        <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button className={styles.buttonContainer} disabled={isSubmitting || !isDirty} kind="primary" type="submit">
+          {isSubmitting ? (
+            <span className={styles.inlineLoading}>
+              {t('submitting', 'Submitting' + '...')}
+              <InlineLoading status="active" iconDescription="Loading" />
+            </span>
+          ) : (
+            t('saveAndClose', 'Save & close')
+          )}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default SwapForm;

package/src/header/header.component.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import { ConfigurableLink, formatDate, PageHeader, PageHeaderContent, useSession } from '@openmrs/esm-framework';
+import styles from './header.scss';
+import { TwoPersonLift } from '@carbon/pictograms-react';
+
+type HeaderProps = {
+  title: string;
+};
+
+const Header: React.FC<HeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <PageHeader className={styles.header}>
+      <PageHeaderContent
+        illustration={
+          <ConfigurableLink to={`${window.getOpenmrsSpaBase()}home/morgue`}>
+            <TwoPersonLift className={styles.mortuaryPictogram} />
+          </ConfigurableLink>
+        }
+        title={title}
+        className={styles.leftJustifiedItems}
+      />
+      <div className={styles.rightJustifiedItems}>
+        <div className={styles.dateAndLocation}>
+          <Location size={16} />
+          <span className={styles.value}>{userLocation}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+      </div>
+    </PageHeader>
+  );
+};
+
+export default Header;

package/src/header/header.scss

@@ -0,0 +1,58 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  height: layout.$spacing-12;
+  background-color: colors.$white-0;
+  display: flex;
+  padding-left: layout.$spacing-03;
+  justify-content: space-between;
+  border-bottom: 1px solid colors.$gray-20;
+}
+
+.leftJustifiedItems {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+
+  & > div:nth-child(2) {
+    margin: layout.$spacing-05;
+
+    & > p:last-child {
+      white-space: nowrap;
+      @include type.type-style('heading-04');
+    }
+  }
+}
+
+.mortuaryPictogram {
+  width: 4.5rem;
+  height: 4.5rem;
+  fill: var(--brand-03);
+}
+
+.rightJustifiedItems {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  margin: layout.$spacing-03;
+  padding-top: layout.$spacing-04;
+}
+
+.dateAndLocation {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: layout.$spacing-05;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}

package/src/home/home.component.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Header from '../header/header.component';
+import styles from './home.scss';
+import Summary from '../summary/summary.component';
+import CustomContentSwitcher from '../switcher/content-switcher.component';
+import { useAwaitingPatients, useAwaitingQueuePatients } from './home.resource';
+import { useLocation, useMortuaryAdmissionLocation } from '../bed-layout/bed-layout.resource';
+
+const HomeViewComponent: React.FC = () => {
+  const { t } = useTranslation();
+
+  const [selectedLocation, setSelectedLocation] = React.useState<string>('');
+
+  const { locations, isLoading: isLoadingLocation, error: locationError } = useLocation();
+
+  const {
+    admissionLocation,
+    isLoading: isLoadingAdmission,
+    error: admissionError,
+    mutate,
+  } = useMortuaryAdmissionLocation(selectedLocation);
+
+  const {
+    awaitingQueueDeceasedPatients,
+    admittedPatients,
+    dischargedPatients,
+    dischargedPatientsCount,
+    isLoadingAwaitingQueuePatients,
+    isLoadingDischarge,
+    isLoadingAll,
+    errorFetchingAwaitingQueuePatients,
+    mutateAwaitingQueuePatients,
+    mutateAll,
+  } = useAwaitingQueuePatients(admissionLocation);
+
+  const locationItems = React.useMemo(() => {
+    return locations.map((location) => ({
+      id: location.ward.uuid,
+      text: location.ward.display,
+      ...location,
+    }));
+  }, [locations]);
+
+  React.useEffect(() => {
+    if (locationItems.length === 1 && !selectedLocation) {
+      setSelectedLocation(locationItems[0].id);
+    }
+  }, [locationItems, selectedLocation]);
+
+  const trulyAwaitingPatients = useAwaitingPatients(awaitingQueueDeceasedPatients);
+
+  const handleLocationChange = React.useCallback((data: { selectedItem: { id: string; text: string } }) => {
+    if (data.selectedItem) {
+      setSelectedLocation(data.selectedItem.id);
+    }
+  }, []);
+
+  return (
+    <section className={styles.section}>
+      <Header title={t('mortuary', 'Mortuary')} />
+      <Summary
+        awaitingQueueCount={trulyAwaitingPatients.length}
+        admittedCount={admittedPatients.length}
+        dischargedCount={dischargedPatientsCount}
+        isLoading={isLoadingAll}
+      />
+      <CustomContentSwitcher
+        awaitingQueueDeceasedPatients={trulyAwaitingPatients}
+        isLoading={isLoadingAwaitingQueuePatients}
+        locationItems={locationItems}
+        selectedLocation={selectedLocation}
+        admissionLocation={admissionLocation}
+        isLoadingLocation={isLoadingLocation}
+        isLoadingAdmission={isLoadingAdmission}
+        locationError={locationError}
+        admissionError={admissionError}
+        onLocationChange={handleLocationChange}
+        mutate={mutate}
+        dischargedPatients={dischargedPatients}
+        isLoadingDischarge={isLoadingDischarge}
+      />
+    </section>
+  );
+};
+
+export default HomeViewComponent;