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

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

@@ -0,0 +1,450 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import {
+  showSnackbar,
+  useSession,
+  Workspace2,
+  type Workspace2DefinitionProps,
+} from '@openmrs/esm-framework';
+import { ApplicableDocumentType, type VisitIntervention } from '../../types';
+import { useDeathNotification } from './death-notification.resource';
+
+import styles from './attachments.scss';
+import { Button, Form, InlineLoading, 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';
+import LabOrdersComponent from '../../../v3/patient-bill-details/attachments/lab-results/lab-orders.component';
+import ProformaInvoiceComponent from '../../../v3/patient-bill-details/attachments/proforma-invoice/proforma-invoice.component';
+import UltrasoundReport from '../../../v3/patient-bill-details/attachments/ultrasound-report/utlrasound-report.component';
+import DeathNotification from './death-notification.component';
+
+interface GenerateAttachmentsProps {
+  claimInterventions: VisitIntervention;
+  bill: any;
+  consentToken: string;
+  patientUuid: string;
+  billingDate: string;
+}
+
+const GenerateAttachments: React.FC<Workspace2DefinitionProps<GenerateAttachmentsProps>> = ({
+  closeWorkspace,
+  workspaceProps,
+}) => {
+  const { claimInterventions, bill, consentToken, patientUuid, billingDate } =
+    workspaceProps ?? ({} as GenerateAttachmentsProps);
+  const { t } = useTranslation();
+  const {
+    patient: deathNotificationPatient,
+    encounter: deathNotificationEncounter,
+    isLoading: isLoadingDeathNotification,
+  } = useDeathNotification(patientUuid);
+  const [previewUrl, setPreviewUrl] = useState<string>();
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [generatingDocumentId, setGeneratingDocumentId] = useState<string | null>(null);
+  const [documents, setDocuments] = useState<GeneratedDocument[]>(() => {
+    const uploadOnlyDocumentTypes = new Set([
+      ApplicableDocumentType.CLAIM_FORM,
+      ApplicableDocumentType.BIRTH_NOTIFICATION,
+    ]);
+    const uniqueDocumentTypes = [
+      ...new Set(
+        (claimInterventions?.applicable_document_types ?? []).filter(
+          (documentType) =>
+            !uploadOnlyDocumentTypes.has(documentType.trim().toUpperCase() as ApplicableDocumentType),
+        ),
+      ),
+    ];
+
+    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);
+  const labResultsRef = useRef<HTMLDivElement>(null);
+  const proformaInvoiceRef = useRef<HTMLDivElement>(null);
+  const ultrasoundReportRef = useRef<HTMLDivElement>(null);
+  const deathNotificationRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!deathNotificationEncounter) {
+      return;
+    }
+
+    setDocuments((previous) =>
+      previous.some((document) => document.name.trim().toUpperCase() === ApplicableDocumentType.DEATH_NOTICE)
+        ? previous
+        : [
+          ...previous,
+          {
+            id: crypto.randomUUID(),
+            name: ApplicableDocumentType.DEATH_NOTICE,
+            generated: false,
+            uploaded: false,
+          },
+        ],
+    );
+  }, [deathNotificationEncounter]);
+
+  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) => {
+    setGeneratingDocumentId(document.id);
+    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;
+      case 'LAB_RESULTS':
+        element = labResultsRef.current;
+        break;
+      case 'PROFORMA_INVOICE':
+        element = proformaInvoiceRef.current;
+        break;
+      case 'ULTRASOUND_REPORT':
+        element = ultrasoundReportRef.current;
+        break;
+
+      case ApplicableDocumentType.DEATH_NOTICE:
+        element = deathNotificationRef.current;
+        break;
+
+      default:
+        console.warn(`${document.name} cannot be generated. Kindly upload it instead using the upload button.`);
+        showSnackbar({
+          kind: 'error',
+          title: 'Error Generating Attachment',
+          subtitle: `No generator implemented for ${document.name}. Kindly use the upload button to 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,
+      ),
+    );
+    setGeneratingDocumentId(null);
+  };
+
+  const generatedCount = documents.filter((d) => d.generated).length;
+  return (
+    <Workspace2 title={t('generateAttachments', 'Generate Attachments')}>
+      <>
+        <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)}
+                    disabled={
+                      generatingDocumentId !== null ||
+                      (document.name === ApplicableDocumentType.DEATH_NOTICE &&
+                        (isLoadingDeathNotification || !deathNotificationPatient || !deathNotificationEncounter))
+                    }
+                  >
+                    {isLoadingDeathNotification && document.name === ApplicableDocumentType.DEATH_NOTICE ? (
+                      <InlineLoading description="Loading form…" />
+                    ) : generatingDocumentId === document.id ? (
+                      <InlineLoading description="Generating…" />
+                    ) : (
+                      '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} billingDate={billingDate} />
+          <DialysisChart ref={dialysisRef} patientUuid={patientUuid} />
+          <GeneralDischargeSummary ref={generalDischargeSummary} patientUuid={patientUuid} />
+          <LabOrdersComponent ref={labResultsRef} patientUuid={patientUuid} billingDate={billingDate} />
+          <ProformaInvoiceComponent ref={proformaInvoiceRef} patientUuid={patientUuid} />
+          <UltrasoundReport ref={ultrasoundReportRef} patientUuid={patientUuid} />
+          {deathNotificationPatient && deathNotificationEncounter && (
+            <DeathNotification
+              ref={deathNotificationRef}
+              patient={deathNotificationPatient}
+              encounter={deathNotificationEncounter}
+            />
+          )}
+        </div>
+      </>
+    </Workspace2>
+  );
+};
+
+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) && bill.length > 0
+      ? bill
+      : [
+          {
+            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;