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

package/src/billing/dashboard/v2/claim-visits/claim-intervention-details/intervention-attachments.component.tsx

@@ -0,0 +1,328 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Modal, Tag } from '@carbon/react';
+import { CheckmarkFilled, CloudUpload, DocumentBlank, DocumentPdf, Renew, TrashCan, View } from '@carbon/react/icons';
+import { showSnackbar } from '@openmrs/esm-framework';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+import { type ClaimAttachment, type PatientFacilityBillDetails, type VisitIntervention } from '../../types';
+import { useInvalidateProviderClaimPreview } from '../../../../billing-claims.resource';
+import { sendClaimAttachment } from '../../../../../registry/hie.resource';
+import InvoiceComponent from '../../patient-bill-details/attachments/invoice.component';
+import FinalBillComponent from '../../patient-bill-details/attachments/final-bill.component';
+import DischargeSummaryComponent from '../../patient-bill-details/attachments/discharge-summary/discharge-summary';
+import styles from './intervention-attachments.component.scss';
+
+// Document types the system can render from EMR data; everything else is uploaded by
+// hand. Edit this set as more generators are added.
+const AUTO_DOC_TYPES = new Set(['INVOICE', 'FINAL_BILL', 'DISCHARGE_SUMMARY']);
+
+// "CASE_SUMMARY" -> "Case summary" for display; the raw code is still sent to the API.
+const humanize = (docType: string): string => {
+  const spaced = docType.replace(/_/g, ' ').trim().toLowerCase();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+};
+
+export interface InterventionAttachmentsProps {
+  intervention: VisitIntervention;
+  consentToken: string;
+  locationUuid: string;
+  claimAttachments: ClaimAttachment[];
+  bill?: PatientFacilityBillDetails;
+  /** Only a draft claim accepts new documents; otherwise the rows are read-only. */
+  isClaimDraft?: boolean;
+}
+
+const generatePdfFile = async (element: HTMLElement, name: string): Promise<File> => {
+  const canvas = await html2canvas(element, { scale: 2, backgroundColor: '#ffffff' });
+  const pdf = new jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4', compress: true });
+  const pageWidth = pdf.internal.pageSize.getWidth();
+  const imgHeight = (canvas.height * pageWidth) / canvas.width;
+  pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, pageWidth, imgHeight);
+  return new File([pdf.output('blob')], `${name}.pdf`, { type: 'application/pdf' });
+};
+
+/**
+ * The required documents for a single intervention (its `applicable_document_types`,
+ * deduped). Each document is first STAGED — chosen (manual) or generated from EMR
+ * (invoice/final bill) — so it can be previewed and removed; it's only sent to the
+ * claim when the user confirms. Attached to THIS intervention's code.
+ */
+const InterventionAttachments: React.FC<InterventionAttachmentsProps> = ({
+  intervention,
+  consentToken,
+  locationUuid,
+  claimAttachments,
+  bill,
+  isClaimDraft = false,
+}) => {
+  const invalidate = useInvalidateProviderClaimPreview();
+  const [busy, setBusy] = useState<Record<string, boolean>>({});
+  const [attachedNow, setAttachedNow] = useState<Set<string>>(new Set());
+  // Files chosen/generated but not yet sent — awaiting review and confirmation.
+  const [staged, setStaged] = useState<Record<string, { file: File; url: string }>>({});
+  // Preview URLs of files already attached this session.
+  const [localUrls, setLocalUrls] = useState<Record<string, string>>({});
+  const [preview, setPreview] = useState<{ url: string; name: string } | null>(null);
+  const invoiceRef = useRef<HTMLDivElement>(null);
+  const finalBillRef = useRef<HTMLDivElement>(null);
+  const dischargeRef = useRef<HTMLDivElement>(null);
+  const fileInputs = useRef<Record<string, HTMLInputElement | null>>({});
+  const createdUrls = useRef<string[]>([]);
+
+  // Release blob URLs created this session on unmount.
+  useEffect(() => () => createdUrls.current.forEach((url) => URL.revokeObjectURL(url)), []);
+
+  const requiredDocs = Array.from(new Set(intervention.applicable_document_types ?? []));
+
+  const claimAttachmentFor = (docType: string): ClaimAttachment | undefined =>
+    (claimAttachments ?? []).find(
+      (a) => a.intervention_code === intervention.intervention_code && a.attachment_type === docType,
+    );
+
+  const isAttached = (docType: string) => attachedNow.has(docType) || Boolean(claimAttachmentFor(docType));
+
+  // Preview source: staged file, else the file just attached, else the stored link.
+  const previewUrlFor = (docType: string): string | undefined =>
+    staged[docType]?.url ?? localUrls[docType] ?? claimAttachmentFor(docType)?.data;
+
+  // Hold a chosen/generated file for review — nothing is sent yet.
+  const stage = (docType: string, file: File) => {
+    const url = URL.createObjectURL(file);
+    createdUrls.current.push(url);
+    setStaged((s) => ({ ...s, [docType]: { file, url } }));
+  };
+
+  const unstage = (docType: string) => {
+    setStaged((s) => {
+      const next = { ...s };
+      delete next[docType];
+      return next;
+    });
+  };
+
+  const generateAndStage = async (docType: string) => {
+    const refByType: Record<string, React.RefObject<HTMLDivElement>> = {
+      INVOICE: invoiceRef,
+      FINAL_BILL: finalBillRef,
+      DISCHARGE_SUMMARY: dischargeRef,
+    };
+    const element = refByType[docType]?.current;
+    if (!element) {
+      return;
+    }
+    setBusy((b) => ({ ...b, [docType]: true }));
+    try {
+      const file = await generatePdfFile(element, docType);
+      stage(docType, file);
+    } catch (error) {
+      showSnackbar({ kind: 'error', title: `Could not generate ${docType}`, subtitle: 'Please try again or contact support.' });
+    } finally {
+      setBusy((b) => ({ ...b, [docType]: false }));
+    }
+  };
+
+  const onFilePicked = (docType: string, event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    event.target.value = '';
+    if (file) {
+      stage(docType, file);
+    }
+  };
+
+  // Send the reviewed, staged file to the claim.
+  const confirmAttach = async (docType: string) => {
+    const item = staged[docType];
+    if (!item) {
+      return;
+    }
+    setBusy((b) => ({ ...b, [docType]: true }));
+    try {
+      const response = await sendClaimAttachment(
+        consentToken,
+        docType,
+        intervention.intervention_code,
+        item.file,
+        locationUuid,
+      );
+      // This endpoint reports failure in the body of an otherwise successful response —
+      // a submitted or closed claim comes back as {error, message, code: 400} with HTTP
+      // 200. Taking the resolved promise as proof of success marked the document
+      // attached when the backend had in fact rejected it.
+      if (response?.error) {
+        showSnackbar({
+          kind: 'error',
+          title: response.error ?? `Could not attach ${humanize(docType)}`,
+          subtitle: response.message ?? 'Please try again or contact support.',
+        });
+        // Left staged deliberately, so the file survives for a retry.
+        return;
+      }
+      setLocalUrls((u) => ({ ...u, [docType]: item.url }));
+      setAttachedNow((s) => new Set(s).add(docType));
+      unstage(docType);
+      showSnackbar({ kind: 'success', title: `${docType} attached`, subtitle: `Attached to ${intervention.intervention_code}` });
+      invalidate();
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: `Could not attach ${humanize(docType)}`,
+        subtitle: error?.message ?? 'Please try again or contact support.',
+      });
+    } finally {
+      setBusy((b) => ({ ...b, [docType]: false }));
+    }
+  };
+
+  if (requiredDocs.length === 0) {
+    return (
+      <div className={styles.empty}>
+        <DocumentBlank size={20} className={styles.emptyIcon} />
+        <span>No documents required for this intervention.</span>
+      </div>
+    );
+  }
+
+  const attachedCount = requiredDocs.filter(isAttached).length;
+  const allAttached = attachedCount === requiredDocs.length;
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.summary}>
+        <span className={styles.summaryLabel}>Required claim documents</span>
+        <Tag size="sm" type={allAttached ? 'green' : 'gray'}>
+          {attachedCount}/{requiredDocs.length} attached
+        </Tag>
+      </div>
+
+      <ul className={styles.docs}>
+        {requiredDocs.map((docType) => {
+          const auto = AUTO_DOC_TYPES.has(docType);
+          const attached = isAttached(docType);
+          const stagedItem = staged[docType];
+          const processing = busy[docType];
+          const previewUrl = previewUrlFor(docType);
+          return (
+            <li className={`${styles.docRow} ${auto ? styles.auto : styles.manual}`} key={docType}>
+              <span className={styles.docLeft}>
+                <span className={styles.docBadge}>
+                  <DocumentPdf size={18} />
+                </span>
+                <span className={styles.docText}>
+                  <span className={styles.docName}>{humanize(docType)}</span>
+                  <span className={styles.docMethod}>{auto ? 'Generated from EMR' : 'Manual upload'}</span>
+                </span>
+              </span>
+
+              <span className={styles.docAction}>
+                {attached ? (
+                  <>
+                    <span className={styles.attached}>
+                      <CheckmarkFilled size={16} />
+                      Attached
+                    </span>
+                    {previewUrl ? (
+                      <Button
+                        kind="ghost"
+                        size="sm"
+                        renderIcon={View}
+                        iconDescription="Preview"
+                        hasIconOnly
+                        onClick={() => setPreview({ url: previewUrl, name: humanize(docType) })}
+                      />
+                    ) : null}
+                  </>
+                ) : !isClaimDraft ? (
+                  // Past draft the claim takes no more documents, so an unattached one
+                  // is stated rather than offered — no generate, choose or upload path.
+                  <span className={styles.notAttached}>Not attached</span>
+                ) : stagedItem ? (
+                  // Staged: review, remove, or attach.
+                  <>
+                    <Tag size="sm" type="blue">
+                      Ready to review
+                    </Tag>
+                    <Button
+                      kind="ghost"
+                      size="sm"
+                      renderIcon={View}
+                      iconDescription="Preview"
+                      hasIconOnly
+                      onClick={() => setPreview({ url: stagedItem.url, name: humanize(docType) })}
+                    />
+                    <Button
+                      kind="danger--ghost"
+                      size="sm"
+                      renderIcon={TrashCan}
+                      iconDescription="Remove"
+                      hasIconOnly
+                      disabled={processing}
+                      onClick={() => unstage(docType)}
+                    />
+                    <Button
+                      kind="primary"
+                      size="sm"
+                      renderIcon={CloudUpload}
+                      disabled={processing}
+                      onClick={() => confirmAttach(docType)}
+                    >
+                      {processing ? 'Attaching…' : 'Attach'}
+                    </Button>
+                  </>
+                ) : auto ? (
+                  <Button
+                    kind="tertiary"
+                    size="sm"
+                    renderIcon={Renew}
+                    disabled={processing || !bill}
+                    onClick={() => generateAndStage(docType)}
+                  >
+                    {processing ? 'Generating…' : 'Generate'}
+                  </Button>
+                ) : (
+                  <>
+                    <input
+                      type="file"
+                      hidden
+                      accept=".pdf,image/*"
+                      ref={(el) => (fileInputs.current[docType] = el)}
+                      onChange={(event) => onFilePicked(docType, event)}
+                    />
+                    <Button
+                      kind="tertiary"
+                      size="sm"
+                      renderIcon={CloudUpload}
+                      onClick={() => fileInputs.current[docType]?.click()}
+                    >
+                      Choose file
+                    </Button>
+                  </>
+                )}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+
+      {/* Off-screen sources for the auto-generated PDFs. */}
+      {bill ? (
+        <div className={styles.hiddenPdf} aria-hidden="true">
+          <InvoiceComponent ref={invoiceRef} bill={bill} />
+          <FinalBillComponent ref={finalBillRef} bill={bill} />
+          <DischargeSummaryComponent ref={dischargeRef} bill={bill} claimIntervention={intervention} />
+        </div>
+      ) : null}
+
+      <Modal
+        open={Boolean(preview)}
+        passiveModal
+        size="lg"
+        modalHeading={preview?.name ?? 'Document preview'}
+        onRequestClose={() => setPreview(null)}
+      >
+        {preview ? <iframe src={preview.url} title="Attachment preview" className={styles.previewFrame} /> : null}
+      </Modal>
+    </div>
+  );
+};
+
+export default InterventionAttachments;

package/src/billing/dashboard/v2/claim-visits/claim-invoice-details/claim-invoice-details.component.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { type ClaimVisitInvoince } from '../../types';
+import { Tag } from '@carbon/react';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import ClaimInvoiceLineDetails from '../claim-invoice-line-details/claim-invoice-line-details.component';
+import ClaimInvoicePanel, { type ClaimFactsShownAbove } from './claim-invoice-panel.component';
+import RecordCards, { type RecordCardModel } from '../shared/record-cards.component';
+import { claimStatusTagType as stateTagType } from '../../claim-statuses';
+
+interface claimInvoiceDetailsProps {
+  claimInvoices: ClaimVisitInvoince[];
+  consentToken: string;
+}
+
+const money = (n: number | string) => Number(n ?? 0).toLocaleString('en-KE');
+
+// Builder so the cards can be merged into a shared grid with the interventions.
+// `canEditLines` follows the claim's content window — see ../../claim-statuses — and
+// decides whether each line offers a Remove action.
+export function buildInvoiceRecords(
+  claimInvoices: ClaimVisitInvoince[],
+  consentToken: string,
+  canEditLines = false,
+  /** What the claim page states above the panel, so the panel doesn't restate it. */
+  claimFacts?: ClaimFactsShownAbove,
+): RecordCardModel[] {
+  return (claimInvoices ?? []).map((ci) => {
+    const lineCount = ci.lines?.length ?? 0;
+    return {
+      tone: 'blue',
+      kind: 'Invoice',
+      title: `Invoice ${ci.invoice_number}`,
+      // How the side panel renders this invoice, in place of the generic field grid.
+      panel: (
+        <ClaimInvoicePanel
+          invoice={ci}
+          consentToken={consentToken}
+          canEditLines={canEditLines}
+          claimFacts={claimFacts}
+        />
+      ),
+      badge: ci.workflow_state ? (
+        <Tag size="sm" type={stateTagType(ci.workflow_state)}>
+          {ci.workflow_state}
+        </Tag>
+      ) : undefined,
+      fields: [
+        { label: 'Date', value: ci.invoice_date ? formatDate(parseDate(ci.invoice_date)) : '' },
+        {
+          label: 'Dispatch status',
+          value: ci.dispatch_status ? (
+            <Tag size="sm" type={stateTagType(ci.dispatch_status)}>
+              {ci.dispatch_status}
+            </Tag>
+          ) : (
+            ''
+          ),
+        },
+        { label: 'Scheme', value: ci.scheme_code },
+        { label: 'Service type', value: ci.service_type },
+        { label: 'Amount', value: `KES ${money(ci.total_inv_amount)}` },
+        { label: 'Net', value: `KES ${money(ci.total_inv_net_amount)}` },
+        { label: 'Co-pay', value: `KES ${money(ci.total_inv_copay)}` },
+        { label: 'Discount', value: `KES ${money(ci.total_inv_discount)}` },
+      ],
+      // Invoice lines expand beneath the invoice rather than in a modal, and start open:
+      // the lines are what the panel is opened to read, so they shouldn't need a second
+      // click to reach.
+      expandable:
+        lineCount > 0
+          ? {
+              label: (open: boolean) => `${open ? 'Hide' : 'Show'} line items (${lineCount})`,
+              content: (
+                <ClaimInvoiceLineDetails
+                  claimInvoiceLines={ci.lines}
+                  consentToken={consentToken}
+                  canEditLines={canEditLines}
+                />
+              ),
+              defaultOpen: true,
+            }
+          : undefined,
+    };
+  });
+}
+
+const ClaimInvoiceDetails: React.FC<claimInvoiceDetailsProps> = ({ claimInvoices, consentToken }) => (
+  <RecordCards
+    records={buildInvoiceRecords(claimInvoices, consentToken)}
+    emptyMessage="No invoice data."
+    layout="grid"
+    gridFill="fill"
+  />
+);
+
+export default ClaimInvoiceDetails;

package/src/billing/dashboard/v2/claim-visits/claim-invoice-details/claim-invoice-document.component.tsx

@@ -0,0 +1,236 @@
+import React, { forwardRef } from 'react';
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { type ClaimVisitInvoince } from '../../types';
+
+interface ClaimInvoiceDocumentProps {
+  invoice: ClaimVisitInvoince;
+  /** Who the invoice is for and under what cover — the claim's, not the invoice's. */
+  patientName?: string;
+  memberNumber?: string;
+  schemeName?: string;
+  /** Who produced this copy and when. A printed invoice leaves the system, so it has to
+      say where it came from; without it a copy can't be told from a later reprint. */
+  generatedBy?: string;
+  generatedAt?: Date | null;
+}
+
+const money = (n: number | string) =>
+  Number(n ?? 0).toLocaleString('en-KE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+const date = (value?: string | null): string => {
+  const v = (value ?? '').trim();
+  if (!v) {
+    return '—';
+  }
+  try {
+    return formatDate(parseDate(v));
+  } catch {
+    return v;
+  }
+};
+
+/**
+ * The invoice as a document, laid out the way an invoice is: who issued it and to whom,
+ * its number and date, the lines it charges for, and the total those lines come to.
+ *
+ * Rendered off-screen and rasterised into a PDF (html2canvas → jsPDF), so it is sized in
+ * millimetres to an A4 content width and uses inline styles throughout — the CSS-module
+ * classes the app is built with don't survive being cloned into html2canvas's canvas.
+ */
+const ClaimInvoiceDocument = forwardRef<HTMLDivElement, ClaimInvoiceDocumentProps>(
+  ({ invoice, patientName, memberNumber, schemeName, generatedBy, generatedAt }, ref) => {
+    const lines = invoice?.lines ?? [];
+    const amount = Number(invoice?.total_inv_amount ?? 0);
+    const net = Number(invoice?.total_inv_net_amount ?? 0);
+    const copay = Number(invoice?.total_inv_copay ?? 0);
+    const discount = Number(invoice?.total_inv_discount ?? 0);
+
+    const cell: React.CSSProperties = {
+      padding: '6px 8px',
+      borderBottom: '1px solid #d0d0d0',
+      verticalAlign: 'top',
+    };
+    const numericCell: React.CSSProperties = { ...cell, textAlign: 'right', whiteSpace: 'nowrap' };
+    const headCell: React.CSSProperties = {
+      padding: '6px 8px',
+      borderBottom: '2px solid #161616',
+      textAlign: 'left',
+      fontWeight: 700,
+      textTransform: 'uppercase',
+      fontSize: '9px',
+      letterSpacing: '0.04em',
+    };
+    const totalRowLabel: React.CSSProperties = { padding: '4px 8px', textAlign: 'right' };
+    const totalRowValue: React.CSSProperties = {
+      padding: '4px 8px',
+      textAlign: 'right',
+      whiteSpace: 'nowrap',
+      minWidth: '90px',
+    };
+    const metaLabel: React.CSSProperties = {
+      fontSize: '9px',
+      textTransform: 'uppercase',
+      letterSpacing: '0.04em',
+      color: '#525252',
+    };
+
+    return (
+      <div
+        ref={ref}
+        style={{
+          all: 'initial',
+          display: 'block',
+          fontFamily: 'Arial, Helvetica, sans-serif',
+          fontSize: '11px',
+          color: '#161616',
+          width: '190mm',
+          padding: '12mm',
+          background: '#ffffff',
+          boxSizing: 'border-box',
+        }}
+      >
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '16px' }}>
+          <div>
+            <div style={{ fontSize: '16px', fontWeight: 700 }}>{invoice?.provider_name || 'Health facility'}</div>
+            <div style={{ ...metaLabel, marginTop: '2px' }}>Provider</div>
+          </div>
+          <div style={{ textAlign: 'right' }}>
+            <div style={{ fontSize: '20px', fontWeight: 700, letterSpacing: '0.06em' }}>INVOICE</div>
+            <div style={{ marginTop: '2px' }}>{invoice?.invoice_number || '—'}</div>
+          </div>
+        </div>
+
+        <hr style={{ border: 'none', borderTop: '2px solid #161616', margin: '10px 0 12px' }} />
+
+        <table style={{ width: '100%', borderCollapse: 'collapse', marginBottom: '14px' }}>
+          <tbody>
+            <tr>
+              <td style={{ width: '50%', verticalAlign: 'top' }}>
+                <div style={metaLabel}>Billed for</div>
+                <div style={{ fontWeight: 700, marginTop: '2px' }}>{patientName || '—'}</div>
+                {memberNumber ? <div style={{ marginTop: '1px' }}>{memberNumber}</div> : null}
+              </td>
+              <td style={{ width: '50%', verticalAlign: 'top' }}>
+                <div style={metaLabel}>Invoice date</div>
+                <div style={{ marginTop: '2px' }}>{date(invoice?.invoice_date)}</div>
+                <div style={{ ...metaLabel, marginTop: '6px' }}>Cover</div>
+                <div style={{ marginTop: '2px' }}>
+                  {[schemeName, invoice?.scheme_code].filter(Boolean).join(' · ') || '—'}
+                </div>
+                {invoice?.service_type ? (
+                  <>
+                    <div style={{ ...metaLabel, marginTop: '6px' }}>Service type</div>
+                    <div style={{ marginTop: '2px' }}>{invoice.service_type}</div>
+                  </>
+                ) : null}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+          <thead>
+            <tr>
+              <th style={{ ...headCell, width: '24px' }}>#</th>
+              <th style={headCell}>Description</th>
+              <th style={{ ...headCell, textAlign: 'right' }}>Qty</th>
+              <th style={{ ...headCell, textAlign: 'right' }}>Unit price</th>
+              <th style={{ ...headCell, textAlign: 'right' }}>Amount</th>
+            </tr>
+          </thead>
+          <tbody>
+            {lines.length ? (
+              lines.map((line, index) => (
+                <tr key={line.id ?? index}>
+                  <td style={cell}>{index + 1}</td>
+                  <td style={cell}>
+                    <div style={{ fontWeight: 700 }}>{line.item_name || line.item_code || 'Unnamed line'}</div>
+                    <div style={{ color: '#525252', fontSize: '9px', marginTop: '1px' }}>
+                      {[line.item_code, line.intervention_code !== line.item_code ? line.intervention_code : null]
+                        .filter(Boolean)
+                        .join(' · ')}
+                    </div>
+                  </td>
+                  <td style={numericCell}>{[line.quantity, line.unit].filter(Boolean).join(' ')}</td>
+                  <td style={numericCell}>{money(line.unit_price)}</td>
+                  <td style={numericCell}>{money(line.line_total_amount)}</td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td style={{ ...cell, color: '#525252' }} colSpan={5}>
+                  No lines on this invoice.
+                </td>
+              </tr>
+            )}
+          </tbody>
+          <tfoot>
+            {/* A subtotal only says something when an adjustment sits between it and the
+                total; otherwise it is the total stated twice. */}
+            {discount > 0 || copay > 0 ? (
+              <tr>
+                <td colSpan={3} />
+                <td style={totalRowLabel}>Subtotal</td>
+                <td style={totalRowValue}>{money(amount)}</td>
+              </tr>
+            ) : null}
+            {discount > 0 ? (
+              <tr>
+                <td colSpan={3} />
+                <td style={totalRowLabel}>Discount</td>
+                <td style={totalRowValue}>-{money(discount)}</td>
+              </tr>
+            ) : null}
+            {copay > 0 ? (
+              <tr>
+                <td colSpan={3} />
+                <td style={totalRowLabel}>Co-pay</td>
+                <td style={totalRowValue}>{money(copay)}</td>
+              </tr>
+            ) : null}
+            <tr>
+              <td colSpan={3} />
+              <td style={{ ...totalRowLabel, fontWeight: 700, borderTop: '2px solid #161616' }}>Total (KES)</td>
+              <td style={{ ...totalRowValue, fontWeight: 700, borderTop: '2px solid #161616' }}>{money(net || amount)}</td>
+            </tr>
+          </tfoot>
+        </table>
+
+        <div style={{ marginTop: '16px', fontSize: '9px', color: '#525252' }}>
+          {[invoice?.workflow_state ? `State: ${invoice.workflow_state}` : null,
+            invoice?.dispatch_status ? `Dispatch: ${invoice.dispatch_status}` : null]
+            .filter(Boolean)
+            .join('   ·   ')}
+        </div>
+
+        <div
+          style={{
+            marginTop: '10px',
+            paddingTop: '6px',
+            borderTop: '1px solid #d0d0d0',
+            fontSize: '9px',
+            color: '#525252',
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '12px',
+          }}
+        >
+          <span>Generated by {generatedBy?.trim() || 'Unknown user'}</span>
+          <span>
+            {generatedAt
+              ? generatedAt.toLocaleString('en-KE', {
+                  year: 'numeric',
+                  month: 'short',
+                  day: '2-digit',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })
+              : ''}
+          </span>
+        </div>
+      </div>
+    );
+  },
+);
+
+export default ClaimInvoiceDocument;