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

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

@@ -0,0 +1,161 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  /* Inset from the full-bleed expander so the rows align with the card's fields above
+     instead of touching its border. */
+  padding: 0 1rem 0.75rem;
+}
+
+.summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.summaryLabel {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: #6f6f6f;
+}
+
+.docs {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.docRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.625rem;
+  border: 1px solid #e6e6e6;
+  border-radius: 8px;
+  background: #ffffff;
+  transition: border-color 0.12s ease, box-shadow 0.12s ease;
+
+  &:hover {
+    border-color: #d0d0d0;
+    box-shadow: 0 1px 3px rgba(22, 22, 22, 0.07);
+  }
+}
+
+.docLeft {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-width: 0;
+}
+
+/* Tinted icon tile — purple for EMR-generated, teal for manual — so the method reads
+   at a glance. */
+.docBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  inline-size: 2rem;
+  block-size: 2rem;
+  border-radius: 7px;
+}
+
+.auto .docBadge {
+  background: #f6f2ff;
+  color: #8a3ffc;
+}
+.manual .docBadge {
+  background: #eefaf9;
+  color: #007d79;
+}
+
+.docText {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.docName {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #161616;
+  overflow-wrap: anywhere;
+}
+
+.docMethod {
+  font-size: 0.625rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: #8d8d8d;
+}
+
+.docAction {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+.attached {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #24a148;
+}
+
+/* Counterpart to .attached, for a document missing from a claim that is past draft and
+   can no longer take one. Muted rather than red — it states a fact, not an error. */
+.notAttached {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #6f6f6f;
+}
+
+.previewFrame {
+  inline-size: 100%;
+  block-size: 75vh;
+  border: none;
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  margin: 0;
+  padding: 1.25rem 1rem;
+  text-align: center;
+  border: 1px dashed #d0d0d0;
+  border-radius: 8px;
+  background: #fafafa;
+  font-size: 0.8125rem;
+  color: #6f6f6f;
+}
+
+.emptyIcon {
+  color: #a8a8a8;
+}
+
+/* Keeps the PDF source markup rendered (so refs exist) but out of view. */
+.hiddenPdf {
+  position: fixed;
+  left: -9999px;
+  top: 0;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+}

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;