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

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

@@ -0,0 +1,173 @@
+import React from 'react';
+import styles from './general-discharge-summary.scss';
+import { useSession } from '@openmrs/esm-framework';
+
+const DEMO_SUMMARY = {
+  facility: 'Sample Sub County Hospital',
+  patient: {
+    name: 'John A. Sample',
+    patientId: 'SAMPLE-ID-0000000',
+    dob: '01-01-1990',
+    gender: 'Male',
+    nationalId: '00000000',
+    hospitalNo: 'SAMPLE-ID-0000000',
+    insuranceNo: '00000000',
+    mobile: '+254700000000',
+  },
+  admission: {
+    admissionDate: '01-01-2026 00:00:00',
+    dischargeDate: '03-01-2026',
+    status: 'Discharged',
+    primaryDoctor: 'Dr. Sample Physician',
+    ward: 'WARD-00 - Sample Ward',
+    admissionDiagnosis: 'Sample admission diagnosis, unspecified',
+    inpatientRecord: 'SAMPLE-INP-000000-000000-0000-0000',
+  },
+  clinical: {
+    dischargeDiagnosis: 'Sample discharge diagnosis, unspecified',
+    otherConditions: 'None',
+    findings: 'Sample clinical findings as documented.',
+    treatment: 'Sample treatment summary.',
+    operations: 'None',
+    labFindings: 'Sample lab panel',
+    imagingFindings: 'None',
+    referrals: 'None',
+  },
+  outcome: {
+    condition: 'stable condition',
+    attendingDoctor: 'Dr. Sample Physician',
+  },
+  medications: [
+    {
+      drug: 'SAMPLE DRUG 500 MG',
+      dose: '1',
+      period: '5 Day',
+      notes: '(1) SAMPLE DRUG 500 MG BID for 5 Day Oral',
+    },
+    {
+      drug: 'SAMPLE IV MEDICATION 1000 MG',
+      dose: '1',
+      period: '3 Day',
+      notes: '(1) SAMPLE IV MEDICATION 1000 MG BID for 3 Day IV',
+    },
+  ],
+  printedBy: 'Demo User',
+  printedAt: '2026-01-03 00:00:00',
+};
+
+function Field({ label, value }) {
+  return (
+    <div className={styles['ds-field']}>
+      <div className={styles['ds-field-label']}>{label}</div>
+      <div className={styles['ds-field-value']}>{value}</div>
+    </div>
+  );
+}
+
+function SectionBlock({ number, title, children }) {
+  return (
+    <section className={styles['ds-section']}>
+      <h2 className={styles['ds-section-title']}>
+        {number && <span className={styles['ds-section-num']}>{number}</span>} {title}
+      </h2>
+      <div className={styles['ds-section-body']}>{children}</div>
+    </section>
+  );
+}
+
+const GeneralDischargeSummary = ({ summary = DEMO_SUMMARY }) => {
+  const s = summary;
+  const session = useSession();
+  const locationName = session?.sessionLocation?.display;
+
+  return (
+    <div className={styles['ds-root']}>
+      <div className={styles['ds-shell']}>
+        <header className={styles['ds-header']}>
+          <div className={styles['ds-header-bar']} />
+          <div className={styles['ds-header-info']}>
+            <p className={styles['ds-org']}>{locationName}</p>
+            <h1 className={styles['ds-title']}>Discharge Summary</h1>
+          </div>
+          <div className={styles['ds-meta-right']}>
+            Printed by {s.printedBy}
+            <br />
+            {s.printedAt}
+          </div>
+        </header>
+
+        <SectionBlock number="1" title="Patient Information">
+          <div className={styles['ds-field-grid']}>
+            <Field label="Patient Name" value={s.patient.name} />
+            <Field label="Patient ID" value={s.patient.patientId} />
+            <Field label="Date of Birth" value={s.patient.dob} />
+            <Field label="Gender" value={s.patient.gender} />
+            <Field label="National ID" value={s.patient.nationalId} />
+            <Field label="Hospital No" value={s.patient.hospitalNo} />
+            <Field label="Insurance No" value={s.patient.insuranceNo} />
+            <Field label="Mobile" value={s.patient.mobile} />
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="2" title="Admission Details">
+          <div className={styles['ds-field-grid']}>
+            <Field label="Admission Date" value={s.admission.admissionDate} />
+            <Field label="Discharge Date" value={s.admission.dischargeDate} />
+            <Field label="Status" value={s.admission.status} />
+            <Field label="Primary Doctor" value={s.admission.primaryDoctor} />
+            <Field label="Ward / Bed" value={s.admission.ward} />
+            <Field label="Admission Diagnosis" value={s.admission.admissionDiagnosis} />
+            <Field label="Inpatient Record" value={s.admission.inpatientRecord} />
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="3" title="Medical Data">
+          <div className={styles['ds-field-grid']}>
+            <Field label="Discharge Diagnosis" value={s.clinical.dischargeDiagnosis} />
+            <Field label="Other Conditions" value={s.clinical.otherConditions} />
+            <Field label="Clinical Findings" value={s.clinical.findings} />
+            <Field label="Treatment" value={s.clinical.treatment} />
+            <Field label="Operations / Procedures" value={s.clinical.operations} />
+            <Field label="Laboratory Findings" value={s.clinical.labFindings} />
+            <Field label="Imaging Findings" value={s.clinical.imagingFindings} />
+            <Field label="Referrals / Other Instructions" value={s.clinical.referrals} />
+          </div>
+        </SectionBlock>
+
+        <SectionBlock number="4" title="Medications Prescribed During Admission">
+          <table className={styles['ds-table']}>
+            <thead>
+              <tr>
+                <th>Drug</th>
+                <th>Dose</th>
+                <th>Period</th>
+                <th>Notes</th>
+              </tr>
+            </thead>
+            <tbody>
+              {s.medications.map((m, i) => (
+                <tr key={i}>
+                  <td className={styles['ds-drug-name']}>{m.drug}</td>
+                  <td>{m.dose}</td>
+                  <td>{m.period}</td>
+                  <td className={styles['ds-drug-notes']}>{m.notes}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </SectionBlock>
+
+        <SectionBlock number="5" title="Post-Discharge Instructions">
+          <div className={styles['ds-outcome']}>
+            Patient discharged in <strong>{s.outcome.condition}</strong>.
+          </div>
+          <Field label="Attending Doctor" value={s.outcome.attendingDoctor} />
+        </SectionBlock>
+
+        <div className={styles['ds-footer']}>Confidential — For authorized clinical use only</div>
+      </div>
+    </div>
+  );
+};
+
+export default GeneralDischargeSummary;

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

@@ -0,0 +1,360 @@
+import React, { useRef, useState } from 'react';
+
+import { showSnackbar, useSession, type DefaultWorkspaceProps } from '@openmrs/esm-framework';
+import { ApplicableDocumentType, type VisitIntervention } from '../../types';
+
+import styles from './attachments.scss';
+import { Button, Form, Modal, Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { type GeneratedDocument } from './type';
+import { DocumentPdf, TrashCan, View } from '@carbon/react/icons';
+import InvoiceComponent from './invoice.component';
+import DischargeSummaryComponent from './discharge-summary/discharge-summary';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+import { sendClaimAttachment } from '../../../../../registry/hie.resource';
+import FinalBillComponent from './final-bill.component';
+import CaseSummary from '../../../v3/patient-bill-details/attachments/case-summary/case-summary';
+import DialysisChart from '../../../v3/patient-bill-details/attachments/dialysis/dialysis-chart';
+import GeneralDischargeSummary from '../../../v3/patient-bill-details/attachments/general-discharge-summary/general-discharge-summary';
+
+interface GenerateAttachmentsProps extends DefaultWorkspaceProps {
+  claimInterventions: VisitIntervention;
+  bill: any;
+  consentToken: string;
+  patientUuid: string;
+  billingDate: string;
+}
+
+const GenerateAttachments: React.FC<GenerateAttachmentsProps> = ({
+  closeWorkspace,
+  promptBeforeClosing,
+  claimInterventions,
+  bill,
+  consentToken,
+  patientUuid,
+}) => {
+  const { t } = useTranslation();
+  const [previewUrl, setPreviewUrl] = useState<string>();
+  const [previewOpen, setPreviewOpen] = useState(false);
+
+  const [documents, setDocuments] = useState<GeneratedDocument[]>(() => {
+    const uniqueDocumentTypes = [...new Set(claimInterventions?.applicable_document_types ?? [])];
+
+    return uniqueDocumentTypes.map((documentType) => ({
+      id: crypto.randomUUID(),
+      name: documentType,
+      generated: false,
+      uploaded: false,
+    }));
+  });
+  const session = useSession();
+  const locationUuid = session?.sessionLocation?.uuid;
+
+  const invoiceRef = useRef<HTMLDivElement>(null);
+  const dischargeRef = useRef<HTMLDivElement>(null);
+  const finalBillRef = useRef<HTMLDivElement>(null);
+  const dialysisRef = useRef<HTMLDivElement>(null);
+  const caseSummaryRef = useRef<HTMLDivElement>(null);
+  const generalDischargeSummary = useRef<HTMLDivElement>(null);
+
+  if (!claimInterventions) return null;
+
+  const generatePdf = async (element: HTMLElement): Promise<Blob> => {
+    const canvas = await html2canvas(element, {
+      scale: 2,
+      backgroundColor: '#ffffff',
+    });
+
+    const imgData = canvas.toDataURL('image/png');
+
+    const pdf = new jsPDF({
+      orientation: 'portrait',
+      unit: 'mm',
+      format: 'a4',
+      compress: true,
+    });
+
+    const pageWidth = pdf.internal.pageSize.getWidth();
+    const pageHeight = pdf.internal.pageSize.getHeight();
+
+    const imgWidth = pageWidth;
+    const imgHeight = (canvas.height * imgWidth) / canvas.width;
+
+    pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
+
+    let remainingHeight = imgHeight - pageHeight;
+    let position = -pageHeight;
+
+    while (remainingHeight > 0) {
+      pdf.addPage();
+      pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
+      remainingHeight -= pageHeight;
+      position -= pageHeight;
+    }
+
+    return pdf.output('blob');
+  };
+
+  const docTypes = claimInterventions.applicable_document_types;
+  const shouldUseBirthNotificationDischargeSummary = (docTypes ?? []).includes(
+    ApplicableDocumentType.BIRTH_NOTIFICATION,
+  );
+
+  const handleSubmit = async (document: GeneratedDocument) => {
+    if (!document.file) {
+      return;
+    }
+
+    try {
+      const response = await sendClaimAttachment(
+        consentToken,
+        document.name,
+        claimInterventions.intervention_code,
+        document.file,
+        locationUuid!,
+      );
+
+      if (response.error) {
+        showSnackbar({
+          kind: 'error',
+          title: 'Error Uploading Attachment',
+          subtitle: response.message,
+        });
+
+        return;
+      }
+
+      setDocuments((prev) =>
+        prev.map((d) =>
+          d.id === document.id
+            ? {
+                ...d,
+                uploaded: true,
+              }
+            : d,
+        ),
+      );
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleDiscard = () => {
+    closeWorkspace();
+  };
+
+  const deleteDocument = (id: string) => {
+    setDocuments((prev) =>
+      prev.map((d) => {
+        if (d.id !== id) return d;
+
+        if (d.url) {
+          URL.revokeObjectURL(d.url);
+        }
+
+        return {
+          ...d,
+          generated: false,
+          uploaded: false,
+          file: undefined,
+          url: undefined,
+        };
+      }),
+    );
+  };
+
+  const generateDocument = async (document: GeneratedDocument) => {
+    let element: HTMLDivElement | null = null;
+
+    switch (document.name) {
+      case 'INVOICE':
+        element = invoiceRef.current;
+        break;
+
+      case 'FINAL_BILL':
+        element = finalBillRef.current;
+        break;
+
+      case 'DISCHARGE_SUMMARY':
+        element = shouldUseBirthNotificationDischargeSummary ? dischargeRef.current : generalDischargeSummary.current;
+        break;
+
+      case 'MEDICAL_REPORT':
+        element = caseSummaryRef.current;
+        break;
+
+      case 'CASE_SUMMARY':
+        element = caseSummaryRef.current;
+        break;
+      case 'DIALYSIS_CHART':
+        element = dialysisRef.current;
+        break;
+      case 'GENERAL_DISCHARGE_SUMMARY':
+        element = generalDischargeSummary.current;
+        break;
+
+      default:
+        console.warn(`No generator implemented for ${document.name}`);
+        showSnackbar({
+          kind: 'error',
+          title: 'Error Generating Attachment',
+          subtitle: `No generator implemented for ${document.name}. Kindly and Upload it instead`,
+        });
+        return;
+    }
+
+    if (!element) {
+      console.error('PDF element not found');
+      return;
+    }
+
+    const pdfBlob = await generatePdf(element);
+
+    const url = URL.createObjectURL(pdfBlob);
+
+    const file = new File([pdfBlob], `${document.name}.pdf`, {
+      type: 'application/pdf',
+    });
+
+    setDocuments((prev) =>
+      prev.map((d) =>
+        d.id === document.id
+          ? {
+              ...d,
+              generated: true,
+              uploaded: false,
+              file,
+              url,
+            }
+          : d,
+      ),
+    );
+  };
+
+  const generatedCount = documents.filter((d) => d.generated).length;
+  return (
+    <>
+      <Form className={styles.form}>
+        <div className={styles.formContent}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '0.75rem',
+              margin: '1rem',
+              justifyContent: 'center',
+            }}
+          >
+            <div className={styles.interventionSection}>
+              <span>Intervention name</span>
+              <Tag type="blue">{claimInterventions.intervention_name}</Tag>
+            </div>
+            <div className={styles.interventionSection}>
+              <span>Intervention code</span>
+              <Tag type="blue">{claimInterventions.intervention_code}</Tag>
+            </div>
+          </div>
+        </div>
+        <div className={styles.fileList}>
+          {documents.map((document) => (
+            <div key={document.id} className={styles.fileItem}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.75rem',
+                  flex: 1,
+                }}
+              >
+                <DocumentPdf size={20} />
+                <span>{document.name}</span>
+              </div>
+
+              {!document.generated ? (
+                <Button kind="ghost" size="sm" onClick={() => generateDocument(document)}>
+                  Generate
+                </Button>
+              ) : (
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                  }}
+                >
+                  <Button
+                    kind="ghost"
+                    size="sm"
+                    renderIcon={View}
+                    onClick={() => {
+                      setPreviewUrl(document.url);
+                      setPreviewOpen(true);
+                    }}
+                  >
+                    Preview
+                  </Button>
+
+                  {!document.uploaded && (
+                    <Button kind="primary" size="sm" onClick={() => handleSubmit(document)}>
+                      Upload
+                    </Button>
+                  )}
+
+                  <Button kind="ghost" size="sm" renderIcon={TrashCan} onClick={() => deleteDocument(document.id)}>
+                    Delete
+                  </Button>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+        <div className={styles.closeButton}>
+          <Button kind="secondary" onClick={handleDiscard}>
+            {t('close', 'Close')}
+          </Button>
+        </div>
+      </Form>
+      <Modal
+        open={previewOpen}
+        passiveModal
+        modalHeading="Document Preview"
+        onRequestClose={() => setPreviewOpen(false)}
+        size="lg"
+      >
+        {previewUrl && (
+          <iframe
+            src={previewUrl}
+            title="Preview"
+            style={{
+              width: '100%',
+              height: '80vh',
+              border: 'none',
+            }}
+          />
+        )}
+      </Modal>
+      <div
+        style={{
+          position: 'fixed',
+          left: '-9999px',
+          top: 0,
+          opacity: 0,
+          pointerEvents: 'none',
+          zIndex: -1,
+        }}
+      >
+        <InvoiceComponent ref={invoiceRef} bill={bill} patientUuid={patientUuid} />
+
+        <DischargeSummaryComponent ref={dischargeRef} claimIntervention={claimInterventions} bill={bill} />
+
+        <FinalBillComponent ref={finalBillRef} bill={bill} />
+        <CaseSummary ref={caseSummaryRef} patientUuid={patientUuid} />
+        <DialysisChart ref={dialysisRef} patientUuid={patientUuid} />
+        <GeneralDischargeSummary ref={generalDischargeSummary} patientUuid={patientUuid} />
+      </div>
+    </>
+  );
+};
+
+export default GenerateAttachments;

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

@@ -0,0 +1,151 @@
+import React, { forwardRef } from 'react';
+import { type VisitIntervention } from '../../types';
+import styles from './invoice.scss';
+import { useSession } from '@openmrs/esm-framework';
+
+interface InvoiceComponentProps {
+  bill?: any;
+  patientUuid?: 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 InvoiceComponent = forwardRef<HTMLDivElement, InvoiceComponentProps>(({ bill }, ref) => {
+  const session = useSession();
+  const locationUuid = session?.sessionLocation?.uuid;
+  if (!bill) {
+    return (
+      <div ref={ref} className={styles.invRoot}>
+        <div className={styles.invEmpty}>No invoice data available.</div>
+      </div>
+    );
+  }
+
+  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.invRoot}>
+      <div className={styles.invShell}>
+        <header className={styles.invHeader}>
+          <div className={styles.invHeaderBar} />
+          <div className={styles.invHeaderInfo}>
+            <p className={styles.invOrg}>Kesses Sub-County Hospital</p>
+            <h1 className={styles.invTitle}>Invoice</h1>
+          </div>
+          {bill.claim_number && (
+            <div className={styles.invMetaRight}>
+              Claim No.
+              <br />
+              <span className={styles.invClaimNumber}>{bill.claim_number}</span>
+            </div>
+          )}
+        </header>
+
+        <div className={styles.invIdentity}>
+          <div className={styles.invField}>
+            <div className={styles.invFieldLabel}>Patient</div>
+            <div className={`${styles.invFieldValue} ${styles.invNameValue}`}>{bill.patient_name || '—'}</div>
+          </div>
+          <div className={styles.invField}>
+            <div className={styles.invFieldLabel}>Invoice Date</div>
+            <div className={styles.invFieldValue}>{formatDate(bill.bill_date)}</div>
+          </div>
+          {bill.identifiers && (
+            <div className={styles.invField}>
+              <div className={styles.invFieldLabel}>Identifiers</div>
+              <div className={styles.invFieldValue}>{bill.identifiers}</div>
+            </div>
+          )}
+        </div>
+
+        <section className={styles.invSection}>
+          <h2 className={styles.invSectionTitle}>
+            <span className={styles.invSectionNum}>1</span> Billed Items
+          </h2>
+          <div className={styles.invSectionBody}>
+            <table className={styles.invTable}>
+              <thead>
+                <tr>
+                  <th>Description</th>
+                  <th>Order No</th>
+                  <th>Service Type</th>
+                  <th>Payer</th>
+                  <th>Status</th>
+                  <th className={styles.invNumCol}>Qty</th>
+                  <th className={styles.invNumCol}>Price</th>
+                  <th className={styles.invNumCol}>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.invServiceName}>{item.billable_service || '—'}</td>
+                      <td>{item.order_no || '—'}</td>
+                      <td>{item.service_type || '—'}</td>
+                      <td>{item.payment_scheme || '—'}</td>
+                      <td>
+                        <span className={styles.invStatusPill}>{item.payment_status || '—'}</span>
+                      </td>
+                      <td className={styles.invNumCol}>{qty}</td>
+                      <td className={styles.invNumCol}>{formatCurrency(price)}</td>
+                      <td className={styles.invNumCol}>{formatCurrency(qty * price)}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+              <tfoot>
+                <tr>
+                  <td colSpan={8} className={styles.invTotalLabel}>
+                    Total
+                  </td>
+                  <td className={styles.invNumCol}>
+                    <strong>KES {formatCurrency(total)}</strong>
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        </section>
+
+        <div className={styles.invFooter}>Confidential — For authorized billing use only</div>
+      </div>
+    </div>
+  );
+});
+
+InvoiceComponent.displayName = 'InvoiceComponent';
+
+export default InvoiceComponent;