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

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;

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

@@ -0,0 +1,98 @@
+/* Fills the workspace body so the footer can be held to the bottom even when the invoice
+   is a single line and the content doesn't reach that far. */
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  min-height: 100%;
+}
+
+/* ---- The invoice sheet ---- */
+/* No box drawn round it: the ruled column band and the totals rule below are what give
+   the invoice its shape, so the sheet itself stays plain. */
+.sheet {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+/* The invoice's particulars, in columns under the panel title the way an invoice sets
+   them out. Short values now the number has gone, so they sit side by side and only
+   step down to fewer columns on a narrow panel. */
+.meta {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: 0.75rem 1.5rem;
+  margin: 0;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+
+  dt {
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #6f6f6f;
+  }
+
+  dd {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.35;
+    color: #161616;
+    overflow-wrap: anywhere;
+  }
+}
+
+.statusTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+
+  /* Carbon tags carry their own margin, which would knock them out of line with the
+     values beside them. */
+  :global(.cds--tag) {
+    margin: 0;
+  }
+}
+
+/* ---- Footer ---- */
+/* margin-top:auto drops it to the bottom of a short panel; sticky keeps it there when a
+   long invoice scrolls. The negative margins bleed it over the panel's own padding, so
+   it spans the width and covers the strip content would scroll through beneath it. The
+   buttons keep their own width and sit to the left rather than filling the bar. */
+.footer {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  margin: auto -1rem -1rem;
+  padding: 0.5rem 1rem;
+  display: flex;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  background-color: #ffffff;
+  border-top: 1px solid #e0e0e0;
+}
+
+/* ---- PDF preview ---- */
+/* The document is rendered for html2canvas to rasterise, not for the reader: kept in the
+   layout (it has to have a size to be captured) but out of sight. */
+.hiddenDocument {
+  position: fixed;
+  left: -9999px;
+  top: 0;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.previewFrame {
+  inline-size: 100%;
+  block-size: 75vh;
+  border: none;
+}

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

@@ -0,0 +1,292 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Modal, Tag } from '@carbon/react';
+import { DocumentPdf } from '@carbon/react/icons';
+import { closeWorkspace, formatDate, parseDate, showSnackbar, useSession } from '@openmrs/esm-framework';
+import jsPDF from 'jspdf';
+import html2canvas from 'html2canvas';
+import { type ClaimVisitInvoince } from '../../types';
+import { claimStatusTagType as stateTagType } from '../../claim-statuses';
+import ClaimInvoiceLineDetails from '../claim-invoice-line-details/claim-invoice-line-details.component';
+import ClaimInvoiceDocument from './claim-invoice-document.component';
+import { RECORD_DETAILS_WORKSPACE } from '../shared/record-details.workspace';
+import styles from './claim-invoice-panel.component.scss';
+
+/**
+ * What the claim page already states about itself, above this panel. An invoice inherits
+ * most of it — same scheme, same service type, same provider — so repeating it here fills
+ * the panel with facts the reader has just read. Passed in so the panel can show each one
+ * only when this invoice disagrees with the claim, which is the case worth seeing.
+ */
+export interface ClaimFactsShownAbove {
+  serviceType?: string;
+  schemeCode?: string;
+  schemeName?: string;
+  providerName?: string;
+  visitStart?: string;
+  /** Not shown in the panel — carried for the printable invoice, which must name who it
+      is for even though the page above already does. */
+  patientName?: string;
+  memberNumber?: string;
+}
+
+interface ClaimInvoicePanelProps {
+  invoice: ClaimVisitInvoince;
+  consentToken: string;
+  /** Follows the claim's content window — see ../../claim-statuses. */
+  canEditLines?: boolean;
+  claimFacts?: ClaimFactsShownAbove;
+}
+
+const money = (n: number | string) =>
+  `KES ${Number(n ?? 0).toLocaleString('en-KE', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+
+const sameValue = (a?: string | null, b?: string | null): boolean =>
+  (a ?? '').trim().toUpperCase() === (b ?? '').trim().toUpperCase();
+
+/**
+ * States in which an invoice has left the building. A claim can still be a draft overall
+ * while one of its invoices has already gone to the payer, and a line can't be pulled out
+ * of an invoice that has been sent — so removal is withheld once any of these is reached,
+ * on top of the claim-level draft check the caller already applies.
+ */
+const DISPATCHED_INVOICE_STATES = new Set(['DISPATCHED', 'SUBMITTED', 'SUBMITTED_PAYER', 'CLOSED']);
+
+const invoiceHasBeenSent = (invoice: ClaimVisitInvoince): boolean =>
+  DISPATCHED_INVOICE_STATES.has((invoice?.dispatch_status ?? '').trim().toUpperCase()) ||
+  DISPATCHED_INVOICE_STATES.has((invoice?.workflow_state ?? '').trim().toUpperCase());
+
+const asDate = (value?: string | null): string => {
+  const v = (value ?? '').trim();
+  if (!v) {
+    return '';
+  }
+  try {
+    return formatDate(parseDate(v));
+  } catch {
+    return v;
+  }
+};
+
+/**
+ * An invoice as the side panel shows it: a summary of what it comes to, then its lines
+ * set out the way an invoice sets them out, and a preview of the invoice as a document.
+ *
+ * The generic labelled-field card gave the invoice number, its four money figures and
+ * its lines' twenty-odd fields all the same weight, so what the invoice was worth was no
+ * easier to find than which scheme it was raised under.
+ */
+const ClaimInvoicePanel: React.FC<ClaimInvoicePanelProps> = ({
+  invoice,
+  consentToken,
+  canEditLines,
+  claimFacts,
+}) => {
+  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);
+  // Two gates, both required: the claim must still take content edits, and this invoice
+  // must not have been dispatched.
+  const linesEditable = Boolean(canEditLines) && !invoiceHasBeenSent(invoice);
+
+  const session = useSession();
+  const generatedBy = session?.user?.person?.display || session?.user?.display || '';
+
+  const documentRef = useRef<HTMLDivElement>(null);
+  const objectUrl = useRef<string>('');
+  const [preview, setPreview] = useState<string>('');
+  const [rendering, setRendering] = useState(false);
+  // Stamped when Preview is pressed, then captured on the render that follows — so the
+  // sheet says when this copy was produced, not when the panel happened to open.
+  const [generatedAt, setGeneratedAt] = useState<Date | null>(null);
+  const [captureRequest, setCaptureRequest] = useState(0);
+
+  // Object URLs outlive the component unless revoked, and each preview mints a new one.
+  useEffect(
+    () => () => {
+      if (objectUrl.current) {
+        URL.revokeObjectURL(objectUrl.current);
+      }
+    },
+    [],
+  );
+
+  // Runs after the render that carries the new timestamp into the off-screen document,
+  // so what is rasterised is what the reader will see stamped on the sheet.
+  useEffect(() => {
+    if (!captureRequest) {
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      const url = await buildPdf();
+      if (!cancelled && url) {
+        setPreview(url);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [captureRequest]);
+
+  const startPreview = () => {
+    if (rendering) {
+      return;
+    }
+    setGeneratedAt(new Date());
+    setCaptureRequest((n) => n + 1);
+  };
+
+  const buildPdf = async (): Promise<string> => {
+    const element = documentRef.current;
+    if (!element) {
+      return '';
+    }
+    setRendering(true);
+    try {
+      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);
+      if (objectUrl.current) {
+        URL.revokeObjectURL(objectUrl.current);
+      }
+      objectUrl.current = URL.createObjectURL(pdf.output('blob'));
+      return objectUrl.current;
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Could not build the invoice PDF',
+        subtitle: 'The invoice could not be rendered. Try again, or contact support.',
+      });
+      return '';
+    } finally {
+      setRendering(false);
+    }
+  };
+
+  // Each fact is the claim's until this invoice says otherwise; only then is it worth a
+  // slot here. With no claim context to compare against, all of them are shown. The
+  // invoice's own date is the exception — it is the fact that dates this invoice, so it
+  // is stated whether or not it matches the visit.
+  const invoiceDate = asDate(invoice.invoice_date);
+  const facts = [
+    { label: 'Date', value: invoiceDate, repeated: false },
+    {
+      label: 'Service type',
+      value: invoice.service_type,
+      repeated: sameValue(invoice.service_type, claimFacts?.serviceType),
+    },
+    { label: 'Scheme', value: invoice.scheme_code, repeated: sameValue(invoice.scheme_code, claimFacts?.schemeCode) },
+    {
+      label: 'Provider',
+      value: invoice.provider_name,
+      repeated: sameValue(invoice.provider_name, claimFacts?.providerName),
+    },
+  ].filter((fact) => Boolean((fact.value ?? '').trim()) && !fact.repeated);
+  // The date leads the sub-line on its own; whatever else survived joins it after it.
+  const extraFacts = facts.filter((fact) => fact.label !== 'Date');
+
+  // The invoice's closing figures, in the order an invoice states them. A subtotal only
+  // says something when an adjustment sits between it and the total; with neither a
+  // discount nor a co-pay it is the total repeated, so the total stands alone.
+  const hasAdjustments = discount > 0 || copay > 0;
+  const totals = [
+    ...(hasAdjustments ? [{ label: 'Subtotal', value: money(amount) }] : []),
+    ...(discount > 0 ? [{ label: 'Discount', value: `-${money(discount)}` }] : []),
+    ...(copay > 0 ? [{ label: 'Co-pay', value: money(copay) }] : []),
+    { label: 'Total', value: money(net || amount), strong: true },
+  ];
+
+  return (
+    <div className={styles.panel}>
+      {/* The invoice as a sheet: a masthead naming it, the facts that date and place it,
+          then the lines and what they come to — the order an invoice is read in. */}
+      <article className={styles.sheet}>
+        {/* The invoice number is the panel's own title, so it isn't set again here. What
+            is left are the particulars: when it was issued, where it stands, and anything
+            about it the claim above didn't already state. */}
+        <dl className={styles.meta}>
+          <div>
+            <dt>Invoice date</dt>
+            <dd>{invoiceDate || '—'}</dd>
+          </div>
+          {extraFacts.map((fact) => (
+            <div key={fact.label}>
+              <dt>{fact.label}</dt>
+              <dd>{fact.value}</dd>
+            </div>
+          ))}
+          <div>
+            <dt>Status</dt>
+            <dd className={styles.statusTags}>
+              {invoice.workflow_state ? (
+                <Tag size="sm" type={stateTagType(invoice.workflow_state)}>
+                  {invoice.workflow_state}
+                </Tag>
+              ) : null}
+              {invoice.dispatch_status ? (
+                <Tag size="sm" type={stateTagType(invoice.dispatch_status)}>
+                  {invoice.dispatch_status}
+                </Tag>
+              ) : null}
+              {!invoice.workflow_state && !invoice.dispatch_status ? '—' : null}
+            </dd>
+          </div>
+        </dl>
+
+        <ClaimInvoiceLineDetails
+          claimInvoiceLines={invoice.lines}
+          consentToken={consentToken}
+          canEditLines={linesEditable}
+          totals={totals}
+          // The sheet already dates the invoice; a line repeats its charge date only when
+          // it was charged on a different day.
+          invoiceDate={invoiceDate}
+        />
+      </article>
+
+      {/* Held to the bottom of the panel however short the invoice is, and staying there
+          when a long one scrolls. This panel is rendered from a record model rather than
+          as a child of the workspace, so it has no closeWorkspace prop to call — it
+          dismisses the panel by name instead. */}
+      <div className={styles.footer}>
+        <Button kind="secondary" size="sm" onClick={() => closeWorkspace(RECORD_DETAILS_WORKSPACE)}>
+          Close
+        </Button>
+        {/* Plain text while it builds rather than an InlineLoading, whose own line height
+            would make this button taller than the Close beside it. */}
+        <Button kind="primary" size="sm" renderIcon={DocumentPdf} disabled={rendering} onClick={startPreview}>
+          {rendering ? 'Building…' : 'Preview'}
+        </Button>
+      </div>
+
+      {/* Off-screen source for the PDF: the invoice as a document, at A4 width. */}
+      <div className={styles.hiddenDocument} aria-hidden="true">
+        <ClaimInvoiceDocument
+          ref={documentRef}
+          invoice={invoice}
+          patientName={claimFacts?.patientName}
+          memberNumber={claimFacts?.memberNumber}
+          schemeName={claimFacts?.schemeName}
+          generatedBy={generatedBy}
+          generatedAt={generatedAt}
+        />
+      </div>
+
+      <Modal
+        open={Boolean(preview)}
+        passiveModal
+        size="lg"
+        modalHeading={`Invoice ${invoice.invoice_number ?? ''}`.trim()}
+        onRequestClose={() => setPreview('')}
+      >
+        {preview ? <iframe src={preview} title="Invoice preview" className={styles.previewFrame} /> : null}
+      </Modal>
+    </div>
+  );
+};
+
+export default ClaimInvoicePanel;