@ampath/esm-dha-workflow-app 4.0.0-next.33 → 4.0.0-next.331

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

@@ -0,0 +1,343 @@
+import React, { useRef, useState } from 'react';
+
+import { showSnackbar, useSession, type DefaultWorkspaceProps } from '@openmrs/esm-framework';
+import { 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 './case-summary/case-summary';
+import DialysisChart from './dialysis/dialysis-chart';
+import GeneralDischargeSummary from './general-discharge-summary/general-discharge-summary';
+
+interface GenerateAttachmentsProps extends DefaultWorkspaceProps {
+  claimInterventions: VisitIntervention;
+  bill: any;
+  consentToken: string;
+  patientUuid: 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 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 = caseSummaryRef.current;
+        break;
+
+      case 'FINAL_BILL':
+        element = finalBillRef.current;
+        break;
+
+      case 'DISCHARGE_SUMMARY':
+        element = generalDischargeSummary.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>
+              ) : !document.uploaded ? (
+                <Button kind="primary" size="sm" onClick={() => handleSubmit(document)}>
+                  Upload
+                </Button>
+              ) : (
+                <>
+                  <Button
+                    kind="ghost"
+                    size="sm"
+                    renderIcon={View}
+                    onClick={() => {
+                      setPreviewUrl(document.url);
+                      setPreviewOpen(true);
+                    }}
+                  >
+                    View
+                  </Button>
+
+                  <Button kind="ghost" size="sm" renderIcon={TrashCan} onClick={() => deleteDocument(document.id)}>
+                    Delete
+                  </Button>
+                </>
+              )}
+            </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} />
+
+        <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/v3/patient-bill-details/attachments/invoice.component.tsx

@@ -0,0 +1,150 @@
+import React, { forwardRef } from 'react';
+import { type VisitIntervention } from '../../types';
+import styles from './invoice.scss';
+
+interface InvoiceComponentProps {
+  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 InvoiceComponent = forwardRef<HTMLDivElement, InvoiceComponentProps>(({ bill }, ref) => {
+  if (!bill) {
+    return (
+      <div ref={ref} className={styles.invRoot}>
+        <div className={styles.invEmpty}>No invoice 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.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;

package/src/billing/dashboard/v3/patient-bill-details/attachments/invoice.scss

@@ -0,0 +1,225 @@
+.invRoot {
+  --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;
+  }
+}
+
+.invEmpty {
+  padding: 40px;
+  text-align: center;
+  color: var(--ink-soft);
+  font-style: italic;
+}
+
+.invShell {
+  max-width: 100%;
+}
+
+.invHeader {
+  margin-bottom: 16px;
+}
+
+.invHeaderBar {
+  height: 6px;
+  background: var(--accent);
+  border-radius: 2px 2px 0 0;
+  margin-bottom: 12px;
+}
+
+.invHeaderInfo {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.invOrg {
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--accent);
+  margin: 0 0 2px;
+}
+
+.invTitle {
+  font-family: var(--serif);
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.invMetaRight {
+  text-align: right;
+  font-family: var(--mono);
+  font-size: 9px;
+  color: var(--ink-soft);
+  line-height: 1.5;
+}
+
+.invClaimNumber {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.invIdentity {
+  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;
+}
+
+.invField {
+  min-width: 0;
+}
+
+.invFieldLabel {
+  font-family: var(--mono);
+  font-size: 9px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--ink-soft);
+  margin-bottom: 2px;
+}
+
+.invFieldValue {
+  font-size: 12px;
+}
+
+.invNameValue {
+  font-family: var(--serif);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.invSection {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  padding: 14px 16px;
+  margin-bottom: 14px;
+}
+
+.invSectionTitle {
+  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);
+}
+
+.invSectionNum {
+  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;
+}
+
+.invTable {
+  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);
+  }
+}
+
+.invNumCol {
+  text-align: right;
+}
+
+.invServiceName {
+  font-weight: 600;
+}
+
+.invStatusPill {
+  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);
+}
+
+.invTotalLabel {
+  text-align: right;
+  font-weight: 600;
+  padding-top: 10px;
+  border-top: 2px solid var(--ink);
+  border-bottom: none;
+}
+
+.invTable tfoot .invNumCol {
+  padding-top: 10px;
+  border-top: 2px solid var(--ink);
+  border-bottom: none;
+}
+
+.invFooter {
+  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 {
+  .invRoot {
+    padding: 0;
+  }
+}