@ampath/esm-dha-workflow-app 4.0.0-next.44 → 4.0.0-next.445

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;
+}

package/src/billing/dashboard/v2/patient-bill-details/attachments/dialysis/dialysis-chart.scss

@@ -0,0 +1,238 @@
+.dc-root {
+  --ink: #16211c;
+  --ink-soft: #4b5a52;
+  --paper: #f6f4ee;
+  --panel: #ffffff;
+  --line: #dcd6c8;
+  --accent: #1f5f4e;
+  --accent-soft: #e4efe9;
+  --header-bar: #b3392b;
+  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
+  --serif: "Source Serif 4", Georgia, serif;
+  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--sans);
+  padding: 32px 16px 64px;
+  min-height: 100%;
+  box-sizing: border-box;
+
+  * { box-sizing: border-box; }
+
+  .dc-shell { max-width: 900px; margin: 0 auto; }
+
+  .dc-demo-banner {
+    background: var(--accent-soft);
+    border: 1px solid var(--accent);
+    color: var(--accent);
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    padding: 8px 12px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+  }
+
+  .dc-header {
+    margin-bottom: 20px;
+  }
+
+  .dc-header-bar {
+    height: 10px;
+    background: var(--header-bar);
+    border-radius: 3px 3px 0 0;
+    margin-bottom: 16px;
+  }
+
+  .dc-header-info {
+    text-align: center;
+  }
+
+  .dc-title {
+    font-family: var(--serif);
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0 0 4px;
+  }
+
+  .dc-hospital {
+    font-family: var(--mono);
+    font-size: 12px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin: 0 0 4px;
+  }
+
+  .dc-hospital-meta {
+    font-size: 12px;
+    color: var(--ink-soft);
+    margin: 0;
+  }
+
+  .dc-identity {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 14px 24px;
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 18px 20px;
+    margin-bottom: 20px;
+  }
+
+  .dc-field {
+    min-width: 0;
+  }
+
+  .dc-field-label {
+    font-family: var(--mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ink-soft);
+    margin-bottom: 3px;
+  }
+
+  .dc-field-value {
+    font-size: 14px;
+    word-break: break-word;
+  }
+
+  .dc-field-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 14px 24px;
+  }
+
+  .dc-section {
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 18px 20px;
+    margin-bottom: 16px;
+  }
+
+  .dc-section-title {
+    font-family: var(--mono);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--accent);
+    margin: 0 0 14px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .dc-section-num {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    text-align: center;
+    border-radius: 50%;
+    background: var(--accent-soft);
+    color: var(--accent);
+    margin-right: 6px;
+    font-size: 10px;
+  }
+
+  table.dc-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+
+    th {
+      text-align: left;
+      font-family: var(--mono);
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--ink-soft);
+      padding: 6px 8px;
+      border-bottom: 1px solid var(--line);
+      background: var(--paper);
+    }
+
+    td {
+      padding: 8px 8px;
+      border-bottom: 1px solid var(--line);
+      vertical-align: top;
+    }
+
+    tr:last-child td { border-bottom: none; }
+  }
+
+  .dc-notes {
+    margin-top: 14px;
+  }
+
+  .dc-note-text {
+    font-size: 13px;
+    line-height: 1.5;
+    margin: 4px 0 0;
+  }
+
+  .dc-empty {
+    font-style: italic;
+    color: var(--ink-soft);
+  }
+
+  .dc-signoff {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 20px;
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 18px 20px;
+    margin-top: 16px;
+  }
+
+  .dc-signoff-block {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .dc-signoff-title {
+    font-family: var(--mono);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--accent);
+    margin-bottom: 2px;
+  }
+
+  .dc-signature-line {
+    margin-top: 12px;
+    border-top: 1px solid var(--line);
+    height: 0;
+  }
+
+  .dc-signoff-stamp {
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .dc-stamp-placeholder {
+    width: 110px;
+    height: 110px;
+    border: 2px dashed var(--line);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    color: var(--ink-soft);
+    letter-spacing: 0.05em;
+  }
+
+  @media (max-width: 520px) {
+    .dc-title { font-size: 20px; }
+  }
+}