@kenyaemr/esm-morgue-app 5.4.2-pre.2344 → 5.4.2-pre.2349

package/src/forms/admit-deceased-person-workspace/admit-deceased-person.workspace.tsx

@@ -1,44 +1,47 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
-  type DefaultWorkspaceProps,
-  ResponsiveWrapper,
-  useLayoutType,
-  showSnackbar,
-  useConfig,
-  restBaseUrl,
-  ExtensionSlot,
-} from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
-import { Controller, useForm } from 'react-hook-form';
-import {
-  ButtonSet,
   Button,
-  InlineLoading,
-  TextInput,
-  FormGroup,
-  Stack,
-  Form,
-  FilterableMultiSelect,
-  DatePicker,
+  ButtonSet,
   Column,
+  ComboBox,
+  DatePicker,
   DatePickerInput,
-  TimePicker,
-  TimePickerSelect,
-  SelectItem,
-  Search,
+  Dropdown,
+  FilterableMultiSelect,
+  Form,
+  FormGroup,
+  InlineLoading,
+  InlineNotification,
+  Layer,
   RadioButton,
   RadioButtonGroup,
+  Search,
+  SelectItem,
+  Stack,
   Tag,
-  Layer,
+  TextInput,
+  TimePicker,
+  TimePickerSelect,
   Tile,
-  Dropdown,
-  ComboBox,
-  InlineNotification,
+  TextArea,
 } from '@carbon/react';
-import classNames from 'classnames';
-import { z } from 'zod';
-import fuzzy from 'fuzzy';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  ExtensionSlot,
+  ResponsiveWrapper,
+  restBaseUrl,
+  showSnackbar,
+  useConfig,
+  useLayoutType,
+  useSession,
+} from '@openmrs/esm-framework';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import styles from './admit-deceased-person.scss';
+import { createDeceasedPatientAdmitSchema } from '../../schemas';
+import { getCurrentTime } from '../../utils/utils';
+import { ConfigObject } from '../../config-schema';
+import { DeceasedPatientHeader } from '../../deceased-patient-header/deceased-patient-header.component';
 import {
   createPatientBill,
   useBillableItems,
@@ -47,24 +50,16 @@ import {
   usePaymentModes,
   useVisitType,
 } from './admit-deceased-person.resource';
-import { getCurrentTime } from '../../utils/utils';
-import { deceasedPatientAdmitSchema } from '../../schemas';
-import { ConfigObject } from '../../config-schema';
-import { DeceasedPatientHeader } from '../../deceased-patient-header/deceased-patient-header.component';
+import classNames from 'classnames';
 import { type MortuaryLocationResponse, type MortuaryPatient } from '../../types';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { EmptyDataIllustration } from '@openmrs/esm-patient-common-lib';
-import { PENDING_PAYMENT_STATUS } from '../../constants';
-import { mutate } from 'swr';
 
-type AdmitDeceasedPersonProps = DefaultWorkspaceProps & {
+interface AdmitDeceasedPersonProps {
+  closeWorkspace: () => void;
   patientData: MortuaryPatient;
   mortuaryLocation: MortuaryLocationResponse;
-  mutated;
+  mutated: () => void;
   deceasedPatientUuid?: string;
-};
-
-const MAX_RESULTS = 5;
+}
 
 const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
   closeWorkspace,
@@ -76,48 +71,62 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const [searchTerm, setSearchTerm] = useState('');
-  const [isPoliceCase, setIsPoliceCase] = useState<string | null>(null);
+  const { time: defaultTime, period: defaultPeriod } = getCurrentTime();
+  const config = useConfig<ConfigObject>();
 
   const { data: visitTypes, isLoading: isLoadingVisitTypes } = useVisitType();
-  const { lineItems, isLoading: isLoadingLineItems, error: lineError } = useBillableItems();
-  const { time: defaultTime, period: defaultPeriod } = getCurrentTime();
-  const { admitBody, errorFetchingEmrConfiguration, isLoadingEmrConfiguration } = useMortuaryOperation(
-    mortuaryLocation?.ward?.uuid,
-  );
+  const { lineItems, isLoading: isLoadingLineItems } = useBillableItems();
+  const { admitBody } = useMortuaryOperation(mortuaryLocation?.ward?.uuid);
 
   const { cashPoints } = useCashPoint();
   const cashPointUuid = cashPoints?.[0]?.uuid ?? '';
-
   const patientUuid = patientData?.patient?.uuid || deceasedPatientUuid;
-
   const { insuranceSchemes } = useConfig({ externalModuleName: '@kenyaemr/esm-billing-app' });
-
   const { paymentModes, isLoading: isLoadingPaymentModes } = usePaymentModes();
+  const { currentProvider } = useSession();
 
-  const { morgueVisitTypeUuid, morgueDepartmentServiceTypeUuid, insurancepaymentModeUuid } = useConfig<ConfigObject>();
-  const handleMutation = () => {
-    const url = `${restBaseUrl}/morgue`;
+  const {
+    morgueVisitTypeUuid,
+    morgueDepartmentServiceTypeUuid,
+    insurancepaymentModeUuid,
+    locationOfDeathTypesList,
+    deathConfirmationTypes,
+    deadBodyPreservationTypeUuid,
+    bodyEmbalmmentTypesUuid,
+  } = config;
 
-    mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, {
-      revalidate: true,
-    });
-  };
+  const deceasedPatientAdmitSchema = useMemo(() => createDeceasedPatientAdmitSchema(config), [config]);
 
-  const handlePoliceCaseChange = (selectedItem: string | null) => {
-    setIsPoliceCase(selectedItem);
+  const getPlaceOfDeathCategory = (placeOfDeathValue: string) => {
+    const placeOfDeathItem = locationOfDeathTypesList.find((item) => item.concept === placeOfDeathValue);
+    return placeOfDeathItem?.label || '';
   };
 
+  const hospitalDeathLabels = ['InPatient', 'Outpatient', 'Dead on arrival'];
+  const homeDeathLabel = 'Home';
+  const policeCaseDeathLabel = 'Unknown (Police case)';
+
   const {
     control,
     watch,
     handleSubmit,
     formState: { errors, isDirty, isSubmitting },
-  } = useForm<z.infer<typeof deceasedPatientAdmitSchema>>({
+  } = useForm({
     resolver: zodResolver(deceasedPatientAdmitSchema),
     defaultValues: {
       dateOfAdmission: new Date(),
+      placeOfDeath: '',
+      dateOfDeath: new Date(),
       timeOfDeath: defaultTime,
       period: defaultPeriod,
+      deathConfirmed: deathConfirmationTypes.find((type) => type.label === 'No')?.concept || '',
+      deathNotificationNumber: '',
+      attendingClinician: '',
+      doctorsRemarks: '',
+      causeOfDeath: patientData?.person?.person?.causeOfDeath?.display || '',
+      autopsyPermission: deathConfirmationTypes.find((type) => type.label === 'No')?.concept || '',
+      deadBodyPreservation: '',
+      bodyEmbalmentType: '',
       tagNumber: '',
       obNumber: '',
       policeName: '',
@@ -125,25 +134,35 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
       visitType: morgueVisitTypeUuid,
       paymentMethod: '',
       insuranceScheme: '',
-      dischargeArea: '',
       policyNumber: '',
       services: [],
       availableCompartment: 0,
     },
   });
 
-  const currentVisitType = visitTypes?.find((vt) => vt.uuid === morgueVisitTypeUuid);
+  const placeOfDeath = watch('placeOfDeath');
+  const deathConfirmed = watch('deathConfirmed');
+  const deadBodyPreservation = watch('deadBodyPreservation');
   const paymentMethodObservable = watch('paymentMethod');
+  const currentVisitType = visitTypes?.find((vt) => vt.uuid === morgueVisitTypeUuid);
+
+  const currentPlaceOfDeathLabel = getPlaceOfDeathCategory(placeOfDeath);
+  const isHospitalDeath = hospitalDeathLabels.includes(currentPlaceOfDeathLabel);
+  const isHomeDeath = currentPlaceOfDeathLabel === homeDeathLabel;
+  const isPoliceCaseDeath = currentPlaceOfDeathLabel === policeCaseDeathLabel;
+
+  const shouldShowDateTimeDeath = !isHomeDeath && placeOfDeath !== '';
+
+  const bodyEmbalmmentOption = deadBodyPreservationTypeUuid.find((type) => type.label === 'Body embalment');
+  const isBodyEmbalmmentSelected = deadBodyPreservation === bodyEmbalmmentOption?.concept;
 
   const filteredBeds = useMemo(() => {
     if (!mortuaryLocation?.bedLayouts) {
       return [];
     }
-
     if (!searchTerm) {
       return mortuaryLocation.bedLayouts;
     }
-
     return mortuaryLocation.bedLayouts.filter(
       (bed) =>
         bed.bedNumber.toLowerCase().includes(searchTerm.toLowerCase()) ||
@@ -152,149 +171,65 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
     );
   }, [mortuaryLocation?.bedLayouts, searchTerm]);
 
-  const onSubmit = async (data: z.infer<typeof deceasedPatientAdmitSchema>) => {
-    const serviceUuid = data.services;
-
-    const linesItems = lineItems
-      .filter((item) => serviceUuid.includes(item.uuid))
-      .map((item, index) => {
-        const priceForPaymentMode =
-          item.servicePrices.find((p) => p.paymentMode?.uuid === paymentModes) || item?.servicePrices[0];
-
-        return {
-          billableService: item.uuid,
-          quantity: 1,
-          price: priceForPaymentMode ? priceForPaymentMode.price : '0.000',
-          priceName: 'Default',
-          priceUuid: priceForPaymentMode ? priceForPaymentMode.uuid : '',
-          lineItemOrder: index,
-          paymentStatus: PENDING_PAYMENT_STATUS,
-        };
-      });
+  const onSubmit = async (data) => {
+    const serviceUuids = data.services;
+    const billableItems = lineItems
+      .filter((item) => serviceUuids.includes(item.uuid))
+      .map((item, index) => ({
+        billableService: item.uuid,
+        quantity: 1,
+        price: item.servicePrices[0]?.price || '0.000',
+        priceName: 'Default',
+        priceUuid: item.servicePrices[0]?.uuid || '',
+        lineItemOrder: index,
+        paymentStatus: 'PENDING',
+      }));
 
-    const { admissionEncounter, compartment } = await admitBody(patientUuid, data);
+    try {
+      if (isSubmitting) {
+        return;
+      }
+      const { admissionEncounter, compartment } = await admitBody(patientUuid, data);
 
-    if (admissionEncounter && compartment) {
+      if (admissionEncounter && compartment) {
+        showSnackbar({
+          title: t('admissionSuccess', 'Deceased Admission'),
+          subtitle: t('admissionSuccessMessage', 'Patient has been admitted to the mortuary successfully'),
+          kind: 'success',
+        });
+      }
+
+      const billPayload = {
+        lineItems: billableItems,
+        cashPoint: cashPointUuid,
+        patient: patientUuid,
+        status: 'PENDING',
+        payments: [],
+      };
+
+      await createPatientBill(billPayload);
       showSnackbar({
-        title: t('admissionSuccess', 'Deceased Admission'),
-        subtitle: t('admissionSuccessMessage', 'Patient has been admitted to the mortuary successfully'),
+        title: t('admissionBillSuccess', 'Bill creation'),
+        subtitle: t('admissionBillSuccessMessage', "Patient's bill has been created successfully"),
         kind: 'success',
       });
-    } else {
+      mutated();
+      closeWorkspace();
+    } catch (error) {
       showSnackbar({
-        title: t('admissionError', 'Deceased Admission Error'),
-        subtitle: t(
-          'admissionError',
-          'An error has occurred while admitting deceased patient to the mortuary, Contact system administrator',
-        ),
+        title: t('error', 'Error'),
+        subtitle: error?.message || t('unknownError', 'An unknown error occurred'),
         kind: 'error',
-        isLowContrast: true,
       });
     }
-
-    const billPayload = {
-      lineItems: linesItems,
-      cashPoint: cashPointUuid,
-      patient: patientUuid,
-      status: PENDING_PAYMENT_STATUS,
-      payments: [],
-    };
-
-    await createPatientBill(billPayload).then(
-      () => {
-        showSnackbar({
-          title: t('patientBill', 'Patient Bill'),
-          subtitle: t('patientBillSuccess', 'Patient has been billed successfully'),
-          kind: 'success',
-        });
-      },
-      (error) => {
-        const errorMessage = JSON.stringify(error?.responseBody?.error?.message?.replace(/\[/g, '').replace(/\]/g, ''));
-        showSnackbar({
-          title: 'Patient Bill Error',
-          subtitle: `An error has occurred while creating patient bill, Contact system administrator quoting this error ${errorMessage}`,
-          kind: 'error',
-          isLowContrast: true,
-        });
-      },
-    );
-    mutated();
-    handleMutation();
-    closeWorkspace();
   };
+
   return (
     <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
       <div className={styles.formContainer}>
         <Stack gap={3}>
           <DeceasedPatientHeader patientData={patientData} />
-          <ResponsiveWrapper>
-            <FormGroup legendText="">
-              <Column>
-                <Controller
-                  name="dateOfAdmission"
-                  control={control}
-                  render={({ field }) => (
-                    <DatePicker
-                      datePickerType="single"
-                      className={styles.formAdmissionDatepicker}
-                      onChange={(event) => {
-                        if (event.length) {
-                          field.onChange(event[0]);
-                        }
-                      }}
-                      value={field.value ? new Date(field.value) : null}>
-                      <DatePickerInput
-                        id="date-of-admission"
-                        placeholder="mm/dd/yyyy"
-                        labelText={t('dateOfAdmission', 'Date of admission')}
-                        invalid={!!errors.dateOfAdmission}
-                        invalidText={errors.dateOfAdmission?.message}
-                      />
-                    </DatePicker>
-                  )}
-                />
-              </Column>
-            </FormGroup>
-          </ResponsiveWrapper>
-          <ResponsiveWrapper>
-            <FormGroup legendText="">
-              <Column>
-                <div className={styles.dateTimeSection}>
-                  <ResponsiveWrapper>
-                    <Controller
-                      name="timeOfDeath"
-                      control={control}
-                      render={({ field }) => {
-                        return (
-                          <TimePicker
-                            {...field}
-                            id="time-of-death-picker"
-                            labelText={t('timeAdmission', 'Time of admission*')}
-                            className={styles.formAdmissionTimepicker}
-                            invalid={!!errors.timeOfDeath}
-                            invalidText={errors.timeOfDeath?.message}
-                          />
-                        );
-                      }}
-                    />
-                    <Controller
-                      name="period"
-                      control={control}
-                      render={({ field }) => (
-                        <TimePickerSelect
-                          {...field}
-                          className={styles.formDeathTimepickerSelector}
-                          id="time-picker-select">
-                          <SelectItem value="AM" text="AM" />
-                          <SelectItem value="PM" text="PM" />
-                        </TimePickerSelect>
-                      )}
-                    />
-                  </ResponsiveWrapper>
-                </div>
-              </Column>
-            </FormGroup>
-          </ResponsiveWrapper>
+
           <ResponsiveWrapper>
             <FormGroup legendText="">
               <Controller
@@ -303,85 +238,66 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
                 render={({ field }) => (
                   <TextInput
                     {...field}
-                    className={styles.sectionField}
                     id="visit-type"
-                    type="text"
-                    labelText={t('visitType', 'Visit type')}
+                    labelText={t('visitType', 'Visit type *')}
                     value={currentVisitType?.display || ''}
+                    readOnly
                     invalid={!!errors.visitType}
                     invalidText={errors.visitType?.message}
-                    disabled={isLoadingVisitTypes}
-                    readOnly
                   />
                 )}
               />
             </FormGroup>
           </ResponsiveWrapper>
+
           <ResponsiveWrapper>
-            <FormGroup legendText="">
-              <div className={classNames(styles.visitTypeOverviewWrapper)}>
-                <ResponsiveWrapper>
-                  <Search
-                    onChange={(event) => setSearchTerm(event.target.value)}
-                    placeholder={t('searchForCompartments', 'Search for a compartment')}
-                    labelText=""
-                    value={searchTerm}
-                  />
-                  <div className={styles.compartmentListContainer}>
-                    {filteredBeds.length > 0 ? (
-                      <>
-                        <Controller
-                          control={control}
-                          name="availableCompartment"
-                          render={({ field }) => (
-                            <div className={styles.radioButtonGroup}>
-                              {filteredBeds.map((bed) => (
-                                <div key={bed.bedId} className={styles.compartmentOption}>
-                                  <div className={styles.radioButtonWrapper}>
-                                    <RadioButton
-                                      className={styles.radioButton}
-                                      id={`compartment-${bed.bedId}`}
-                                      labelText={bed.bedNumber}
-                                      value={bed.bedId}
-                                      name="availableCompartment"
-                                      checked={field.value === bed.bedId}
-                                      onChange={(value, name, event) => {
-                                        field.onChange(bed.bedId);
-                                      }}
-                                    />
-                                  </div>
-                                  <div className={styles.compartmentTags}>
-                                    {bed.bedType && (
-                                      <Tag type={bed.bedType?.display === 'VIP' ? 'green' : 'blue'} size="sm">
-                                        {bed.bedType?.displayName || ''}
-                                      </Tag>
-                                    )}
-                                    <Tag type={bed.status === 'AVAILABLE' ? 'green' : 'red'} size="sm">
-                                      {bed?.status || ''}
-                                    </Tag>
-                                  </div>
-                                </div>
-                              ))}
+            <FormGroup legendText={t('assignCompartment', 'Assign compartment *')}>
+              <Search
+                onChange={(e) => setSearchTerm(e.target.value)}
+                placeholder={t('searchForCompartments', 'Search for a compartment')}
+                value={searchTerm}
+                labelText=""
+              />
+              <div className={styles.compartmentListContainer}>
+                {filteredBeds.length > 0 ? (
+                  <Controller
+                    control={control}
+                    name="availableCompartment"
+                    render={({ field }) => (
+                      <div className={styles.radioButtonGroup}>
+                        {filteredBeds.map((bed) => (
+                          <div key={bed.bedId} className={styles.compartmentOption}>
+                            <RadioButton
+                              id={`compartment-${bed.bedId}`}
+                              labelText={bed.bedNumber}
+                              value={bed.bedId}
+                              checked={field.value === bed.bedId}
+                              onChange={() => field.onChange(bed.bedId)}
+                            />
+                            <div className={styles.compartmentTags}>
+                              <Tag type={bed.bedType?.display === 'VIP' ? 'green' : 'blue'} size="sm">
+                                {bed.bedType?.displayName || ''}
+                              </Tag>
+                              <Tag type={bed.status === 'AVAILABLE' ? 'green' : 'red'} size="sm">
+                                {bed?.status || ''}
+                              </Tag>
                             </div>
-                          )}
-                        />
-                      </>
-                    ) : (
-                      <Layer>
-                        <Tile className={styles.emptyStateTile}>
-                          <EmptyDataIllustration />
-                          <p className={styles.emptyStateContent}>
-                            {t('noCompartmentsFound', 'No compartments found')}
-                          </p>
-                        </Tile>
-                      </Layer>
+                          </div>
+                        ))}
+                      </div>
                     )}
-                  </div>
-                </ResponsiveWrapper>
-                {errors.availableCompartment && (
-                  <div className={styles.invalidText}>{errors.availableCompartment.message}</div>
+                  />
+                ) : (
+                  <Layer>
+                    <Tile className={styles.emptyStateTile}>
+                      <p className={styles.emptyStateContent}>{t('noCompartmentsFound', 'No compartments found')}</p>
+                    </Tile>
+                  </Layer>
                 )}
               </div>
+              {errors.availableCompartment && (
+                <p className={styles.invalidText}>{errors.availableCompartment.message}</p>
+              )}
             </FormGroup>
           </ResponsiveWrapper>
 
@@ -401,8 +317,10 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
                         id="paymentMethods"
                         items={paymentModes.map((mode) => mode.uuid)}
                         itemToString={(item) => paymentModes.find((mode) => mode.uuid === item)?.name ?? ''}
-                        titleText={t('selectPaymentMethod', 'Select payment method')}
-                        label={t('selectPaymentMethod', 'Select payment method')}
+                        titleText={t('selectPaymentMethod', 'Select payment method *')}
+                        label={t('selectPaymentMethod', 'Select payment method *')}
+                        invalid={!!errors.paymentMethod}
+                        invalidText={errors.paymentMethod?.message}
                       />
                     )}
                   />
@@ -410,6 +328,7 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
               </Column>
             </FormGroup>
           </ResponsiveWrapper>
+
           {paymentMethodObservable === insurancepaymentModeUuid && (
             <>
               <Column>
@@ -423,7 +342,7 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
                       id="insurance-scheme"
                       items={insuranceSchemes}
                       itemToString={(item) => (item ? item.toString() : '')}
-                      titleText={t('insuranceScheme', 'Insurance scheme')}
+                      titleText={t('insuranceScheme', 'Insurance scheme *')}
                       invalid={!!errors.insuranceScheme}
                       invalidText={errors.insuranceScheme?.message}
                     />
@@ -436,11 +355,11 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
                   name="policyNumber"
                   render={({ field }) => (
                     <TextInput
+                      {...field}
                       className={styles.sectionField}
-                      onChange={(e) => field.onChange(e.target.value)}
                       id="policy-number"
                       type="text"
-                      labelText={t('policyNumber', 'Policy number')}
+                      labelText={t('policyNumber', 'Policy number *')}
                       placeholder={t('enterPolicyNumber', 'Enter policy number')}
                       invalid={!!errors.policyNumber}
                       invalidText={errors.policyNumber?.message}
@@ -450,6 +369,7 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
               </Column>
             </>
           )}
+
           {paymentMethodObservable && (
             <Column>
               <Controller
@@ -465,7 +385,7 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
                         <FilterableMultiSelect
                           id="billing-service"
                           className={styles.formAdmissionDatepicker}
-                          titleText={t('searchServices', 'Search services')}
+                          titleText={t('searchServices', 'Search services *')}
                           items={availableServices.map((service) => service.uuid)}
                           itemToString={(item) => availableServices.find((i) => i.uuid === item)?.name ?? ''}
                           onChange={({ selectedItems }) => {
@@ -492,6 +412,26 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
               />
             </Column>
           )}
+          <ResponsiveWrapper>
+            <Controller
+              name="placeOfDeath"
+              control={control}
+              render={({ field }) => (
+                <ComboBox
+                  id="placeOfDeath"
+                  items={locationOfDeathTypesList}
+                  itemToString={(item) => item?.label || ''}
+                  titleText={t('placeOfDeath', 'Place of Death *')}
+                  placeholder={t('selectPlaceOfDeath', 'Select place of death')}
+                  invalid={!!errors.placeOfDeath}
+                  invalidText={errors.placeOfDeath?.message}
+                  selectedItem={locationOfDeathTypesList.find((item) => item.concept === field.value) || null}
+                  onChange={({ selectedItem }) => field.onChange(selectedItem?.concept || '')}
+                />
+              )}
+            />
+          </ResponsiveWrapper>
+
           <ResponsiveWrapper>
             <FormGroup legendText="">
               <Column>
@@ -502,9 +442,8 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
                     <TextInput
                       {...field}
                       id="tagNumber"
-                      className={styles.sectionField}
-                      placeholder={t('tagNumber', 'Tag Number*')}
-                      labelText={t('tagNumber', 'Tag Number*')}
+                      labelText={t('tagNumber', 'Tag Number *')}
+                      placeholder={t('enterTagNumber', 'Enter tag number')}
                       invalid={!!errors.tagNumber}
                       invalidText={errors.tagNumber?.message}
                     />
@@ -513,130 +452,361 @@ const AdmitDeceasedPerson: React.FC<AdmitDeceasedPersonProps> = ({
               </Column>
             </FormGroup>
           </ResponsiveWrapper>
+
+          {shouldShowDateTimeDeath && (
+            <>
+              <ResponsiveWrapper>
+                <FormGroup legendText="">
+                  <Column>
+                    <Controller
+                      name="dateOfAdmission"
+                      control={control}
+                      render={({ field }) => (
+                        <DatePicker
+                          datePickerType="single"
+                          className={styles.formAdmissionDatepicker}
+                          onChange={(event) => {
+                            if (event.length) {
+                              field.onChange(event[0]);
+                            }
+                          }}
+                          value={field.value ? new Date(field.value) : null}>
+                          <DatePickerInput
+                            id="date-of-admission"
+                            placeholder="mm/dd/yyyy"
+                            labelText={t('dateOfAdmission', 'Date of admission *')}
+                            invalid={!!errors.dateOfAdmission}
+                            invalidText={errors.dateOfAdmission?.message}
+                          />
+                        </DatePicker>
+                      )}
+                    />
+                  </Column>
+                </FormGroup>
+              </ResponsiveWrapper>
+              <ResponsiveWrapper>
+                <FormGroup legendText="">
+                  <Column>
+                    <div className={styles.dateTimeSection}>
+                      <ResponsiveWrapper>
+                        <Controller
+                          name="timeOfDeath"
+                          control={control}
+                          render={({ field }) => {
+                            return (
+                              <TimePicker
+                                {...field}
+                                id="time-of-death-picker"
+                                labelText={t('timeAdmission', 'Time of admission *')}
+                                className={styles.formAdmissionTimepicker}
+                                invalid={!!errors.timeOfDeath}
+                                invalidText={errors.timeOfDeath?.message}
+                              />
+                            );
+                          }}
+                        />
+                        <Controller
+                          name="period"
+                          control={control}
+                          render={({ field }) => (
+                            <TimePickerSelect
+                              {...field}
+                              className={styles.formDeathTimepickerSelector}
+                              id="time-picker-select">
+                              <SelectItem value="AM" text="AM" />
+                              <SelectItem value="PM" text="PM" />
+                            </TimePickerSelect>
+                          )}
+                        />
+                      </ResponsiveWrapper>
+                    </div>
+                  </Column>
+                </FormGroup>
+              </ResponsiveWrapper>
+            </>
+          )}
+
+          <ResponsiveWrapper>
+            <FormGroup legendText={t('deathConfirmation', 'Death confirmed *')}>
+              <Controller
+                name="deathConfirmed"
+                control={control}
+                render={({ field }) => {
+                  const yesOption = deathConfirmationTypes.find((type) => type.label === 'Yes');
+                  const noOption = deathConfirmationTypes.find((type) => type.label === 'No');
+
+                  return (
+                    <RadioButtonGroup
+                      name="deathConfirmed"
+                      orientation="vertical"
+                      value={field.value}
+                      onChange={field.onChange}
+                      invalid={!!errors.deathConfirmed}
+                      invalidText={errors.deathConfirmed?.message}>
+                      <RadioButton
+                        className={styles.radioButton}
+                        value={yesOption?.concept}
+                        labelText={t('yes', 'Yes')}
+                      />
+                      <RadioButton value={noOption?.concept} labelText={t('no', 'No')} />
+                    </RadioButtonGroup>
+                  );
+                }}
+              />
+            </FormGroup>
+          </ResponsiveWrapper>
+
           <ResponsiveWrapper>
             <FormGroup legendText="">
               <Column>
                 <Controller
-                  name="dischargeArea"
+                  name="deathNotificationNumber"
                   control={control}
                   render={({ field }) => (
                     <TextInput
                       {...field}
-                      id="dischargeArea"
-                      className={styles.sectionField}
-                      placeholder={t('dischargeArea', 'Discharge Area')}
-                      labelText={t('dischargeArea', 'Discharge Area')}
-                      invalid={!!errors.dischargeArea}
-                      invalidText={errors.dischargeArea?.message}
+                      id="deathNotificationNumber"
+                      labelText={t('deathNotificationNumber', 'Death Notification Number')}
+                      invalid={!!errors.deathNotificationNumber}
+                      invalidText={errors.deathNotificationNumber?.message}
                     />
                   )}
                 />
               </Column>
             </FormGroup>
           </ResponsiveWrapper>
+
+          {isHospitalDeath && (
+            <>
+              <ResponsiveWrapper>
+                <FormGroup legendText="">
+                  <Column>
+                    <Controller
+                      name="attendingClinician"
+                      control={control}
+                      render={({ field }) => (
+                        <TextInput
+                          {...field}
+                          id="attendingClinician"
+                          labelText={t('attendingClinician', 'Attending clinician/Doctor *')}
+                          invalid={!!errors.attendingClinician}
+                          invalidText={errors.attendingClinician?.message}
+                        />
+                      )}
+                    />
+                  </Column>
+                </FormGroup>
+              </ResponsiveWrapper>
+
+              <ResponsiveWrapper>
+                <FormGroup legendText="">
+                  <Column>
+                    <Controller
+                      name="doctorsRemarks"
+                      control={control}
+                      render={({ field }) => (
+                        <TextArea
+                          {...field}
+                          id="doctorsRemarks"
+                          labelText={t('doctorsRemarks', "Doctor's remarks *")}
+                          invalid={!!errors.doctorsRemarks}
+                          invalidText={errors.doctorsRemarks?.message}
+                        />
+                      )}
+                    />
+                  </Column>
+                </FormGroup>
+              </ResponsiveWrapper>
+            </>
+          )}
+
           <ResponsiveWrapper>
             <FormGroup legendText="">
               <Column>
-                <Dropdown
-                  onChange={(e) => handlePoliceCaseChange(e.selectedItem)}
-                  id="morgue-combobox"
-                  className={styles.formAdmissionDatepicker}
-                  items={['Yes', 'No']}
-                  itemToString={(item) => (item ? item : '')}
-                  label={t('ChooseOptions', 'Choose option')}
-                  titleText={t(
-                    'isPoliceCase',
-                    'Is the body anextIDNo: z.sssociated with a police case? If so, can you provide the OB number?*',
+                <Controller
+                  name="causeOfDeath"
+                  control={control}
+                  render={({ field }) => (
+                    <TextArea
+                      {...field}
+                      id="causeOfDeath"
+                      labelText={t('causeOfDeath', 'Cause of Death (if known)')}
+                      invalid={!!errors.causeOfDeath}
+                      invalidText={errors.causeOfDeath?.message}
+                    />
                   )}
                 />
               </Column>
             </FormGroup>
           </ResponsiveWrapper>
+
           <ResponsiveWrapper>
-            <FormGroup legendText="">
-              {isPoliceCase === 'Yes' && (
-                <>
+            <FormGroup legendText={t('autopsyPermission', 'Autopsy Permission (if applicable) *')}>
+              <Controller
+                name="autopsyPermission"
+                control={control}
+                render={({ field }) => {
+                  const yesOption = deathConfirmationTypes.find((type) => type.label === 'Yes');
+                  const noOption = deathConfirmationTypes.find((type) => type.label === 'No');
+
+                  return (
+                    <RadioButtonGroup
+                      name="autopsyPermission"
+                      orientation="vertical"
+                      value={field.value}
+                      onChange={field.onChange}
+                      invalid={!!errors.autopsyPermission}
+                      invalidText={errors.autopsyPermission?.message}>
+                      <RadioButton
+                        className={styles.radioButton}
+                        value={yesOption?.concept}
+                        labelText={t('yes', 'Yes')}
+                      />
+                      <RadioButton className={styles.radioButton} value={noOption?.concept} labelText={t('no', 'No')} />
+                    </RadioButtonGroup>
+                  );
+                }}
+              />
+            </FormGroup>
+          </ResponsiveWrapper>
+
+          <ResponsiveWrapper>
+            <FormGroup legendText={t('deadBodyPreservation', 'Dead Body preservation')}>
+              <Controller
+                name="deadBodyPreservation"
+                control={control}
+                render={({ field }) => (
+                  <RadioButtonGroup
+                    name="deadBodyPreservation"
+                    orientation="vertical"
+                    value={field.value}
+                    onChange={field.onChange}
+                    invalid={!!errors.deadBodyPreservation}
+                    invalidText={errors.deadBodyPreservation?.message}>
+                    {deadBodyPreservationTypeUuid.map((preservationType) => (
+                      <RadioButton
+                        key={preservationType.concept}
+                        value={preservationType.concept}
+                        className={styles.radioButton}
+                        labelText={t(preservationType.label.toLowerCase().replace(' ', ''), preservationType.label)}
+                      />
+                    ))}
+                  </RadioButtonGroup>
+                )}
+              />
+            </FormGroup>
+          </ResponsiveWrapper>
+
+          {isBodyEmbalmmentSelected && (
+            <ResponsiveWrapper>
+              <FormGroup legendText={t('bodyEmbalmentType', 'Body embalment types *')}>
+                <Controller
+                  name="bodyEmbalmentType"
+                  control={control}
+                  render={({ field }) => (
+                    <RadioButtonGroup
+                      name="bodyEmbalmentType"
+                      orientation="vertical"
+                      value={field.value}
+                      onChange={field.onChange}
+                      invalid={!!errors.bodyEmbalmentType}
+                      invalidText={errors.bodyEmbalmentType?.message}>
+                      {bodyEmbalmmentTypesUuid.map((embalmmentType) => (
+                        <RadioButton
+                          key={embalmmentType.concept}
+                          className={styles.radioButton}
+                          value={embalmmentType.concept}
+                          labelText={t(embalmmentType.label.toLowerCase(), embalmmentType.label)}
+                        />
+                      ))}
+                    </RadioButtonGroup>
+                  )}
+                />
+              </FormGroup>
+            </ResponsiveWrapper>
+          )}
+
+          {isPoliceCaseDeath && (
+            <>
+              <ResponsiveWrapper>
+                <FormGroup legendText="">
                   <Column>
                     <Controller
-                      name="obNumber"
+                      name="policeName"
                       control={control}
                       render={({ field }) => (
                         <TextInput
                           {...field}
-                          id="obNumber"
-                          className={styles.formAdmissionDatepicker}
-                          placeholder={t('obNos', 'OB Number')}
-                          labelText={t('obNumber', 'OB Number')}
-                          invalid={!!errors.obNumber}
-                          invalidText={errors.obNumber?.message}
+                          id="policeName"
+                          labelText={t('policeName', 'Police name *')}
+                          invalid={!!errors.policeName}
+                          invalidText={errors.policeName?.message}
                         />
                       )}
                     />
                   </Column>
+                </FormGroup>
+              </ResponsiveWrapper>
+
+              <ResponsiveWrapper>
+                <FormGroup legendText="">
                   <Column>
                     <Controller
-                      name="policeName"
+                      name="policeIDNo"
                       control={control}
                       render={({ field }) => (
                         <TextInput
                           {...field}
-                          id="policeName"
-                          className={styles.sectionField}
-                          placeholder={t('policeNames', 'Police Name')}
-                          labelText={t('policeName', 'Police name')}
-                          invalid={!!errors.policeName}
-                          invalidText={errors.policeName?.message}
+                          id="policeIDNo"
+                          labelText={t('policeIDNo', 'Police ID number *')}
+                          invalid={!!errors.policeIDNo}
+                          invalidText={errors.policeIDNo?.message}
                         />
                       )}
                     />
                   </Column>
+                </FormGroup>
+              </ResponsiveWrapper>
+
+              <ResponsiveWrapper>
+                <FormGroup legendText="">
                   <Column>
                     <Controller
-                      name="policeIDNo"
+                      name="obNumber"
                       control={control}
                       render={({ field }) => (
                         <TextInput
                           {...field}
-                          id="policeIDNo"
-                          className={styles.sectionField}
-                          placeholder={t('policeID', 'Police ID number')}
-                          labelText={t('policeIDNo', 'Police ID number')}
-                          invalid={!!errors.policeIDNo}
-                          invalidText={errors.policeIDNo?.message}
+                          id="obNumber"
+                          labelText={t('obNumber', 'OB Number *')}
+                          placeholder={t('enterObNumber', 'Enter OB number')}
+                          invalid={!!errors.obNumber}
+                          invalidText={errors.obNumber?.message}
                         />
                       )}
                     />
                   </Column>
-                  <ResponsiveWrapper>
-                    <ExtensionSlot
-                      name="patient-chart-attachments-dashboard-slot"
-                      className={styles.sectionField}
-                      state={{
-                        patientUuid,
-                      }}
-                    />{' '}
-                  </ResponsiveWrapper>
-                </>
-              )}
-            </FormGroup>
-          </ResponsiveWrapper>
+                </FormGroup>
+              </ResponsiveWrapper>
+            </>
+          )}
+          <FormGroup
+            className={styles.supportingDocuments}
+            legendText={t('supportingDocuments', 'Supporting Documents')}>
+            <ResponsiveWrapper>
+              <ExtensionSlot name="patient-chart-attachments-dashboard-slot" state={{ patientUuid }} />
+            </ResponsiveWrapper>
+          </FormGroup>
         </Stack>
       </div>
 
-      <ButtonSet
-        className={classNames({
-          [styles.tablet]: isTablet,
-          [styles.desktop]: !isTablet,
-        })}>
-        <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+      <ButtonSet className={classNames(styles.buttonSet, { [styles.tablet]: isTablet })}>
+        <Button kind="secondary" onClick={closeWorkspace}>
           {t('cancel', 'Cancel')}
         </Button>
-        <Button className={styles.buttonContainer} disabled={isSubmitting || !isDirty} kind="primary" type="submit">
+        <Button kind="primary" type="submit" disabled={isSubmitting || !isDirty}>
           {isSubmitting ? (
-            <span className={styles.inlineLoading}>
-              {t('submitting', 'Submitting' + '...')}
-              <InlineLoading status="active" iconDescription="Loading" />
-            </span>
+            <InlineLoading description={t('submitting', 'Submitting...')} />
           ) : (
             t('saveAndClose', 'Save & close')
           )}