@ampath/esm-dha-workflow-app 4.0.0-claim-workflows.428 → 4.0.0-claim-workflows.430

package/src/billing/dashboard/v2/patient-bill-details/attachments/death-notification.component.tsx

@@ -0,0 +1,162 @@
+import React, { forwardRef } from 'react';
+import styles from './death-notification.scss';
+
+export interface DeathNotificationObservation {
+  concept?: { display?: string; name?: { name?: string } };
+  value?: string | number | { display?: string; name?: { name?: string } } | null;
+  valueText?: string;
+  valueNumeric?: number;
+  valueDatetime?: string;
+  valueCoded?: { display?: string; name?: { name?: string } } | string;
+  valueCodedName?: { name?: string; display?: string };
+  voided?: boolean;
+  groupMembers?: DeathNotificationObservation[];
+  obs?: DeathNotificationObservation[];
+}
+
+export interface DeathNotificationEncounter {
+  encounterDatetime?: string;
+  location?: { display?: string };
+  provider?: { display?: string; person?: { display?: string } };
+  obs?: DeathNotificationObservation[];
+}
+
+export interface DeathNotificationPatient {
+  person?: {
+    display?: string;
+    gender?: string;
+    birthdate?: string;
+    age?: number;
+  };
+  identifiers?: Array<{
+    identifier?: string;
+    identifierType?: { display?: string };
+  }>;
+}
+
+interface DeathNotificationProps {
+  patient?: DeathNotificationPatient;
+  encounter?: DeathNotificationEncounter;
+}
+
+const getObservationValue = (observation: DeathNotificationObservation): string => {
+  const codedValue = observation.valueCoded ?? observation.value;
+  if (typeof codedValue === 'object' && codedValue) {
+    return codedValue.display ?? codedValue.name?.name ?? observation.valueCodedName?.display ?? observation.valueCodedName?.name ?? '';
+  }
+
+  const value = observation.valueText ?? observation.valueDatetime ?? observation.valueNumeric ?? codedValue;
+  return value == null ? '' : String(value);
+};
+
+const flattenObservations = (observations: DeathNotificationObservation[] = []): DeathNotificationObservation[] =>
+  observations?.flatMap((observation) => {
+    if (!observation || observation.voided) {
+      return [];
+    }
+
+    // , ...flattenObservations(observation.groupMembers), ...flattenObservations(observation.obs)
+
+    return [observation];
+  });
+
+const DeathNotification = forwardRef<HTMLDivElement, DeathNotificationProps>(({ patient, encounter }, ref) => {
+  const person = patient?.person;
+  const identifiers = (patient?.identifiers ?? []).filter(
+    (identifier) =>
+      identifier.identifier && identifier.identifierType?.display?.trim().toLowerCase() !== 'amrs universal id',
+  );
+  const observations = flattenObservations(encounter?.obs).filter((observation) => getObservationValue(observation));
+  const formatDate = (date?: string) => (date ? new Date(date).toLocaleDateString() : '—');
+
+  return (
+    <div
+      ref={ref}
+      className={styles.dnRoot}
+    >
+      <header className={styles.dnHeader}>
+        <div className={styles.dnEyebrow}>
+          PATIENT RECORD
+        </div>
+        <h1 className={styles.dnTitle}>Death Notification</h1>
+        <div className={styles.dnSubtitle}>
+          Generated from the completed death reporting form
+        </div>
+      </header>
+
+      <section className={styles.dnSection}>
+        <h2 className={styles.dnSectionTitle}>Patient details</h2>
+        <table className={`${styles.dnTable} ${styles.dnPatientTable}`}>
+          <tbody>
+            <tr>
+              <th>Patient name</th>
+              <td>{person?.display ?? '—'}</td>
+              <th>Gender</th>
+              <td>{person?.gender ?? '—'}</td>
+            </tr>
+            <tr>
+              <th>Date of birth</th>
+              <td>{formatDate(person?.birthdate)}</td>
+              <th>Age</th>
+              <td>{person?.age ?? '—'}</td>
+            </tr>
+            {identifiers.map((identifier, index) => (
+              <tr key={`${identifier.identifierType?.display ?? 'identifier'}-${identifier.identifier}-${index}`}>
+                <th>{identifier.identifierType?.display ?? 'Identifier'}</th>
+                <td colSpan={3}>{identifier.identifier}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </section>
+
+      <section className={styles.dnSection}>
+        <h2 className={styles.dnSectionTitle}>Death reporting details</h2>
+        <table className={styles.dnTable}>
+          <tbody>
+            <tr>
+              <th>Reported on</th>
+              <td>{formatDate(encounter?.encounterDatetime)}</td>
+              <th>Facility</th>
+              <td>{encounter?.location?.display ?? '—'}</td>
+            </tr>
+            <tr>
+              <th>Recorded by</th>
+              <td colSpan={3}>{encounter?.provider?.person?.display ?? encounter?.provider?.display ?? '—'}</td>
+            </tr>
+          </tbody>
+        </table>
+
+        {observations.length > 0 ? (
+          <table className={styles.dnTable}>
+            <thead>
+              <tr>
+                <th>Form field</th>
+                <th>Recorded information</th>
+              </tr>
+            </thead>
+            <tbody>
+              {observations.map((observation, index) => (
+                <tr key={`${observation.concept?.display ?? 'field'}-${index}`}>
+                  <td>{observation.concept?.display ?? observation.concept?.name?.name ?? 'Form field'}</td>
+                  <td>{getObservationValue(observation)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <p className={styles.dnEmptyMessage}>No additional form details were recorded.</p>
+        )}
+      </section>
+
+      <footer className={styles.dnFooter}>
+        <span className={styles.dnSystemGenerated}>System Generated</span>{' '}
+        This document contains patient health information. Handle and share it in accordance with facility policy.
+      </footer>
+    </div>
+  );
+});
+
+DeathNotification.displayName = 'DeathNotification';
+
+export default DeathNotification;

package/src/billing/dashboard/v2/patient-bill-details/attachments/death-notification.resource.ts

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { openmrsFetch, restBaseUrl, showSnackbar, useConfig } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../../../../config-schema';
+import { useFormEncounters } from '../../../../../death-reporting/death-reporting-form-button.resource';
+import { fetchPatientEncountersByType } from '../../../../../shared/services/encounters.resource';
+import {
+  type DeathNotificationEncounter,
+  type DeathNotificationPatient,
+} from './death-notification.component';
+
+interface DeathNotificationData {
+  patient?: DeathNotificationPatient;
+  encounter?: DeathNotificationEncounter;
+  isLoading: boolean;
+}
+
+export const useDeathNotification = (
+  patientUuid?: string,
+  requireDeceasedObservation = false,
+): DeathNotificationData => {
+  const { formEncounterTypes } = useConfig<ConfigObject>();
+  const {
+    hasDeceasedObservation,
+    hasDeathReportingFormEncounter,
+    isLoading: isLoadingDeathStatus,
+  } = useFormEncounters(patientUuid ?? '');
+  const [patient, setPatient] = useState<DeathNotificationPatient>();
+  const [encounter, setEncounter] = useState<DeathNotificationEncounter>();
+  const [isLoadingData, setIsLoadingData] = useState(false);
+
+  useEffect(() => {
+    if (
+      isLoadingDeathStatus ||
+      !hasDeathReportingFormEncounter ||
+      (requireDeceasedObservation && !hasDeceasedObservation) ||
+      !patientUuid ||
+      !formEncounterTypes.deathReportingEncounterTypeUuid
+    ) {
+      setPatient(undefined);
+      setEncounter(undefined);
+      setIsLoadingData(false);
+      return;
+    }
+
+    let isCurrent = true;
+    setIsLoadingData(true);
+    setPatient(undefined);
+    setEncounter(undefined);
+
+    Promise.all([
+      fetchPatientEncountersByType(patientUuid, formEncounterTypes.deathReportingEncounterTypeUuid),
+      openmrsFetch(`${restBaseUrl}/patient/${patientUuid}?v=full`),
+    ])
+      .then(([encounters, patientResponse]) => {
+        if (!isCurrent) {
+          return;
+        }
+
+        const latestEncounter = ((encounters ?? []) as Array<DeathNotificationEncounter & { voided?: boolean }>)
+          .filter((item: DeathNotificationEncounter & { voided?: boolean }) => !item.voided)
+          .sort(
+            (left: DeathNotificationEncounter, right: DeathNotificationEncounter) =>
+              new Date(right.encounterDatetime ?? 0).getTime() - new Date(left.encounterDatetime ?? 0).getTime(),
+          )[0] as DeathNotificationEncounter | undefined;
+        const patientData = patientResponse?.data as DeathNotificationPatient | undefined;
+
+        if (!latestEncounter || !patientData) {
+          showSnackbar({
+            kind: 'error',
+            title: 'Death Notification unavailable',
+            subtitle: 'Could not load the completed death reporting form and patient details.',
+          });
+          return;
+        }
+
+        setPatient(patientData);
+        setEncounter(latestEncounter);
+      })
+      .catch((error) => {
+        console.error('Failed to load death notification details', error);
+        if (isCurrent) {
+          showSnackbar({
+            kind: 'error',
+            title: 'Death Notification unavailable',
+            subtitle: 'Could not load the completed death reporting form and patient details.',
+          });
+        }
+      })
+      .finally(() => {
+        if (isCurrent) {
+          setIsLoadingData(false);
+        }
+      });
+
+    return () => {
+      isCurrent = false;
+    };
+  }, [
+    formEncounterTypes.deathReportingEncounterTypeUuid,
+    hasDeceasedObservation,
+    hasDeathReportingFormEncounter,
+    isLoadingDeathStatus,
+    patientUuid,
+    requireDeceasedObservation,
+  ]);
+
+  return {
+    patient,
+    encounter,
+    isLoading: isLoadingDeathStatus || isLoadingData,
+  };
+};

package/src/billing/dashboard/v2/patient-bill-details/attachments/death-notification.scss

@@ -0,0 +1,88 @@
+.dnRoot {
+  box-sizing: border-box;
+  width: 760px;
+  padding: 40px;
+  color: #161616;
+  background: #ffffff;
+  font-family: Arial, sans-serif;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+}
+
+.dnHeader {
+  border-bottom: 3px solid #da1e28;
+  margin-bottom: 28px;
+  padding-bottom: 16px;
+}
+
+.dnEyebrow {
+  color: #da1e28;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+
+.dnTitle {
+  font-size: 28px;
+  margin: 8px 0;
+}
+
+.dnSubtitle {
+  color: #525252;
+  font-size: 14px;
+}
+
+.dnSection {
+  margin-bottom: 28px;
+}
+
+.dnSectionTitle {
+  font-size: 18px;
+  margin-bottom: 14px;
+}
+
+.dnTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+  margin-top: 12px;
+
+  th,
+  td {
+    border: 1px solid #d1d1d1;
+    padding: 9px;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    width: 20%;
+    background: #f4f4f4;
+    font-weight: 600;
+  }
+}
+
+.dnPatientTable {
+  margin-top: 0;
+}
+
+.dnEmptyMessage {
+  color: #525252;
+  font-size: 14px;
+}
+
+.dnFooter {
+  border-top: 1px solid #a8a8a8;
+  color: #525252;
+  font-size: 12px;
+  padding-top: 12px;
+}
+
+.dnSystemGenerated {
+  font-weight: 700;
+  font-style: italic;
+}