@ampath/esm-dha-workflow-app 4.0.0-next.34 → 4.0.0-next.340

package/src/billing/dashboard/v2/patient-bill-details/attachments/discharge-summary/discharge-summary.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import { type VisitIntervention } from '../../../types';
+import { type DischargeSummary } from '../type';
+import { getDischargeSummary } from '../../../../../maternity-discharge.resource';
+
+import styles from './discharge-summary.scss';
+import { useSession } from '@openmrs/esm-framework';
+
+interface DischargeSummaryComponentProps {
+  bill: any;
+  claimIntervention: VisitIntervention;
+}
+
+const DischargeSummaryComponent = forwardRef<HTMLDivElement, DischargeSummaryComponentProps>(
+  ({ bill, claimIntervention }, ref) => {
+    const [summary, setSummary] = useState<DischargeSummary | null>(null);
+    const [loading, setLoading] = useState(true);
+    const session = useSession();
+    const locationName = session?.sessionLocation?.display;
+    useEffect(() => {
+      const loadSummary = async () => {
+        try {
+          const response = await getDischargeSummary(bill.cr_no, bill.amrs_universal_id);
+
+          setSummary(response);
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      loadSummary();
+    }, [bill.amrs_universal_id, bill.cr_no, claimIntervention]);
+
+    if (loading) {
+      return <div ref={ref}>Loading...</div>;
+    }
+
+    if (!summary) {
+      return <div ref={ref}>Unable to load discharge summary.</div>;
+    }
+
+    return (
+      <>
+        <div ref={ref} className={styles.container}>
+          <div className={styles.headerContainer}>
+            <div className={styles.county}>County Government of Uasin Gishu</div>
+
+            <div className={styles.department}>Department of Health Services</div>
+
+            <div className={styles.hospitalName}>{locationName}</div>
+
+            <div className={styles.encounterType}>POST NATAL DISCHARGE SUMMARY</div>
+          </div>
+          <Field label="NAME" value={summary.patientName} />
+          <Field label="AGE" value={summary.age} />
+          <Field label="IP NO" value={summary.ipNumber} />
+          <Field label="PARITY" value={summary.parity} />
+          <Field
+            label="DATE OF ADMISSION"
+            value={summary.admissionDate ? new Date(summary.admissionDate).toLocaleDateString() : ''}
+          />
+          <Field
+            label="DATE OF DELIVERY"
+            value={summary.deliveryDate ? new Date(summary.deliveryDate).toLocaleDateString() : ''}
+          />
+          <Field label="MODE OF DELIVERY" value={summary.modeOfDelivery} />
+          <Field label="SEX OF BABY" value={summary.babySex} />
+          <Field label="BIRTH WEIGHT" value={summary.birthWeight} />
+          <Field label="FATE" value={summary.fate} />
+          <Field label="ADVICE ON PERSONAL HYGIENE" value={summary.hygieneAdvice} />
+          <Field label="NUTRITION" value={summary.nutrition} />
+          <Field label="BREAST FEEDING" value={summary.breastFeeding} />
+          <Field label="IMMUNIZATION" value={summary.immunization} />
+          <Field label="FAMILY PLANNING" value={summary.familyPlanning} />
+
+          <div
+            style={{
+              marginTop: '20px',
+            }}
+          >
+            <div
+              style={{
+                marginTop: '25px',
+              }}
+            >
+              <div className={styles.remarksLabel}>REMARKS</div>
+
+              <div className={styles.remarksValue}>{summary.remarks || '-'}</div>
+            </div>
+          </div>
+
+          <div className={styles.footer}>
+            <div>
+              <div style={{ fontWeight: 600 }}>Discharge Date</div>
+              <div>{summary.dischargeDate ? new Date(summary.dischargeDate).toLocaleDateString() : '-'}</div>
+            </div>
+
+            <div className={styles.clinicianContainer}>
+              <div className={styles.clinicianLabel}>Nurse / Clinician</div>
+
+              <div>{summary.clinician || '-'}</div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  },
+);
+
+interface FieldProps {
+  label: string;
+  value?: string | number;
+}
+
+const Field: React.FC<FieldProps> = ({ label, value }) => (
+  <div className={styles.fieldContainer}>
+    <div className={styles.fieldLabel}>{label}</div>
+
+    <div className={styles.fieldValue}>{value || '-'}</div>
+  </div>
+);
+DischargeSummaryComponent.displayName = 'DischargeSummaryComponent';
+
+export default DischargeSummaryComponent;

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

@@ -0,0 +1,152 @@
+import React, { forwardRef } from 'react';
+import { type VisitIntervention } from '../../types';
+import styles from './final-bill.scss';
+
+interface FinalBillComponentProps {
+  bill?: any;
+}
+
+function formatCurrency(value?: number | string) {
+  const n = Number(value);
+  if (Number.isNaN(n)) return '—';
+  return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}
+
+function formatDate(value?: string) {
+  if (!value) return '—';
+  const d = new Date(value);
+  if (Number.isNaN(d.getTime())) return value;
+  return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
+}
+
+const FinalBillComponent = forwardRef<HTMLDivElement, FinalBillComponentProps>(({ bill }, ref) => {
+  if (!bill) {
+    return (
+      <div ref={ref} className={styles.fbRoot}>
+        <div className={styles.fbEmpty}>No bill data available.</div>
+      </div>
+    );
+  }
+
+  // Some callers pass a single flattened bill item, others may pass a full bill with
+  // an `items` array. Normalise to a list so the table always has a consistent shape,
+  // without silently dropping data either caller might send.
+  const items =
+    Array.isArray(bill.items) && bill.items.length > 0
+      ? bill.items
+      : [
+          {
+            billable_service: bill.billable_service,
+            intervention_code: bill.intervention_code,
+            order_no: bill.order_no,
+            service_type: bill.service_type,
+            payment_scheme: bill.payment_scheme,
+            payment_status: bill.payment_status,
+            item_quantity: bill.item_quantity,
+            item_price: bill.item_price,
+          },
+        ];
+
+  const total = items.reduce(
+    (sum: number, item: any) => sum + (Number(item.item_quantity) || 0) * (Number(item.item_price) || 0),
+    0,
+  );
+
+  return (
+    <div ref={ref} className={styles.fbRoot}>
+      <div className={styles.fbShell}>
+        <header className={styles.fbHeader}>
+          <div className={styles.fbHeaderBar} />
+          <div className={styles.fbHeaderInfo}>
+            <p className={styles.fbOrg}>Kesses Sub-County Hospital</p>
+            <h1 className={styles.fbTitle}>Final Bill</h1>
+          </div>
+          {bill.claim_number && (
+            <div className={styles.fbMetaRight}>
+              Claim No.
+              <br />
+              <span className={styles.fbClaimNumber}>{bill.claim_number}</span>
+            </div>
+          )}
+        </header>
+
+        <div className={styles.fbIdentity}>
+          <div className={styles.fbField}>
+            <div className={styles.fbFieldLabel}>Patient</div>
+            <div className={`${styles.fbFieldValue} ${styles.fbNameValue}`}>{bill.patient_name || '—'}</div>
+          </div>
+          <div className={styles.fbField}>
+            <div className={styles.fbFieldLabel}>Bill Date</div>
+            <div className={styles.fbFieldValue}>{formatDate(bill.bill_date)}</div>
+          </div>
+          {bill.identifiers && (
+            <div className={styles.fbField}>
+              <div className={styles.fbFieldLabel}>Identifiers</div>
+              <div className={styles.fbFieldValue}>{bill.identifiers}</div>
+            </div>
+          )}
+        </div>
+
+        <section className={styles.fbSection}>
+          <h2 className={styles.fbSectionTitle}>
+            <span className={styles.fbSectionNum}>1</span> Billed Items
+          </h2>
+          <div className={styles.fbSectionBody}>
+            <table className={styles.fbTable}>
+              <thead>
+                <tr>
+                  <th>Description</th>
+                  <th>Intervention Code</th>
+                  <th>Order No</th>
+                  <th>Service Type</th>
+                  <th>Payer</th>
+                  <th>Status</th>
+                  <th className={styles.fbNumCol}>Qty</th>
+                  <th className={styles.fbNumCol}>Price</th>
+                  <th className={styles.fbNumCol}>Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                {items.map((item: any, i: number) => {
+                  const qty = Number(item.item_quantity) || 0;
+                  const price = Number(item.item_price) || 0;
+                  return (
+                    <tr key={i}>
+                      <td className={styles.fbServiceName}>{item.billable_service || '—'}</td>
+                      <td>{item.intervention_code || '—'}</td>
+                      <td>{item.order_no || '—'}</td>
+                      <td>{item.service_type || '—'}</td>
+                      <td>{item.payment_scheme || '—'}</td>
+                      <td>
+                        <span className={styles.fbStatusPill}>{item.payment_status || '—'}</span>
+                      </td>
+                      <td className={styles.fbNumCol}>{qty}</td>
+                      <td className={styles.fbNumCol}>{formatCurrency(price)}</td>
+                      <td className={styles.fbNumCol}>{formatCurrency(qty * price)}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+              <tfoot>
+                <tr>
+                  <td colSpan={8} className={styles.fbTotalLabel}>
+                    Total
+                  </td>
+                  <td className={styles.fbNumCol}>
+                    <strong>KES {formatCurrency(total)}</strong>
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </section>
+
+        <div className={styles.fbFooter}>Confidential — For authorized billing use only</div>
+      </div>
+    </div>
+  );
+});
+
+FinalBillComponent.displayName = 'FinalBillComponent';
+
+export default FinalBillComponent;

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

@@ -0,0 +1,225 @@
+.fbRoot {
+  --ink: #16211c;
+  --ink-soft: #4b5a52;
+  --paper: #f6f4ee;
+  --panel: #ffffff;
+  --line: #dcd6c8;
+  --accent: #1f5f4e;
+  --accent-soft: #e4efe9;
+  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
+  --serif: 'Source Serif 4', Georgia, serif;
+  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
+
+  display: block;
+  width: 190mm;
+  padding: 10mm;
+  box-sizing: border-box;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 11px;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.fbEmpty {
+  padding: 40px;
+  text-align: center;
+  color: var(--ink-soft);
+  font-style: italic;
+}
+
+.fbShell {
+  max-width: 100%;
+}
+
+.fbHeader {
+  margin-bottom: 16px;
+}
+
+.fbHeaderBar {
+  height: 6px;
+  background: var(--accent);
+  border-radius: 2px 2px 0 0;
+  margin-bottom: 12px;
+}
+
+.fbHeaderInfo {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.fbOrg {
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin: 0 0 2px;
+}
+
+.fbTitle {
+  font-family: var(--serif);
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.fbMetaRight {
+  text-align: right;
+  font-family: var(--mono);
+  font-size: 9px;
+  color: var(--ink-soft);
+  line-height: 1.5;
+}
+
+.fbClaimNumber {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.fbIdentity {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 10px 20px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+}
+
+.fbField {
+  min-width: 0;
+}
+
+.fbFieldLabel {
+  font-family: var(--mono);
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-soft);
+  margin-bottom: 2px;
+}
+
+.fbFieldValue {
+  font-size: 12px;
+}
+
+.fbNameValue {
+  font-family: var(--serif);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.fbSection {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 14px 16px;
+  margin-bottom: 14px;
+}
+
+.fbSectionTitle {
+  font-family: var(--mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--accent);
+  margin: 0 0 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--line);
+}
+
+.fbSectionNum {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  line-height: 14px;
+  text-align: center;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  color: var(--accent);
+  margin-right: 4px;
+  font-size: 8px;
+}
+
+.fbTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 10px;
+
+  th {
+    text-align: left;
+    font-family: var(--mono);
+    font-size: 9px;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--ink-soft);
+    padding: 6px 6px;
+    border-bottom: 1px solid var(--line);
+    background: var(--paper);
+  }
+
+  td {
+    padding: 6px 6px;
+    border-bottom: 1px solid var(--line);
+    vertical-align: top;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: 1px solid var(--line);
+  }
+}
+
+.fbNumCol {
+  text-align: right;
+}
+
+.fbServiceName {
+  font-weight: 600;
+}
+
+.fbStatusPill {
+  display: inline-block;
+  font-family: var(--mono);
+  font-size: 8px;
+  text-transform: uppercase;
+  padding: 1px 6px;
+  border-radius: 20px;
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.fbTotalLabel {
+  text-align: right;
+  font-weight: 600;
+  padding-top: 10px;
+  border-top: 2px solid var(--ink);
+  border-bottom: none;
+}
+
+.fbTable tfoot .fbNumCol {
+  padding-top: 10px;
+  border-top: 2px solid var(--ink);
+  border-bottom: none;
+}
+
+.fbFooter {
+  font-family: var(--mono);
+  font-size: 8px;
+  color: var(--ink-soft);
+  text-align: center;
+  margin-top: 16px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+@media print {
+  .fbRoot {
+    padding: 0;
+  }
+}

package/src/billing/dashboard/v2/patient-bill-details/attachments/general-discharge-summary/general-discharge-summary.scss

@@ -0,0 +1,182 @@
+.ds-root {
+  --ink: #16211c;
+  --ink-soft: #4b5a52;
+  --paper: #f6f4ee;
+  --panel: #ffffff;
+  --line: #dcd6c8;
+  --accent: #1f5f4e;
+  --accent-soft: #e4efe9;
+  --header-bar: #1f5f4e;
+  --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; }
+
+  .ds-shell { max-width: 900px; margin: 0 auto; }
+
+  .ds-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;
+  }
+
+  .ds-header {
+    margin-bottom: 20px;
+  }
+
+  .ds-header-bar {
+    height: 10px;
+    background: var(--header-bar);
+    border-radius: 3px 3px 0 0;
+    margin-bottom: 16px;
+  }
+
+  .ds-header-info {
+    text-align: center;
+  }
+
+  .ds-org {
+    font-family: var(--mono);
+    font-size: 12px;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin: 0 0 4px;
+  }
+
+  .ds-title {
+    font-family: var(--serif);
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0 0 4px;
+  }
+
+  .ds-meta-right {
+    text-align: center;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--ink-soft);
+    line-height: 1.6;
+    margin-top: 4px;
+  }
+
+  .ds-field {
+    min-width: 0;
+  }
+
+  .ds-field-label {
+    font-family: var(--mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ink-soft);
+    margin-bottom: 3px;
+  }
+
+  .ds-field-value {
+    font-size: 14px;
+    word-break: break-word;
+  }
+
+  .ds-field-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 14px 24px;
+  }
+
+  .ds-section {
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    padding: 18px 20px;
+    margin-bottom: 16px;
+  }
+
+  .ds-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);
+  }
+
+  .ds-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.ds-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; }
+  }
+
+  .ds-drug-name { font-weight: 600; }
+  .ds-drug-notes { color: var(--ink-soft); font-size: 12px; }
+
+  .ds-outcome {
+    font-size: 14px;
+    margin-bottom: 14px;
+
+    strong { color: var(--accent); }
+  }
+
+  .ds-footer {
+    font-family: var(--mono);
+    font-size: 10px;
+    color: var(--ink-soft);
+    text-align: center;
+    margin-top: 24px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  @media (max-width: 520px) {
+    .ds-title { font-size: 20px; }
+  }
+}