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

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,293 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Modal, Tag } from '@carbon/react';
+import { DocumentPdf } from '@carbon/react/icons';
+import { 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 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;
+  onClose?: () => void;
+}
+
+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,
+  onClose,
+}) => {
+  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={onClose}>
+          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;

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

@@ -0,0 +1,133 @@
+/* ---- Line items, laid out as an invoice ---- */
+.tableWrap {
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+
+  /* Column headings sit in a ruled band, as on a printed invoice. */
+  th {
+    padding: 0.5rem;
+    text-align: left;
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #525252;
+    background-color: #f4f4f4;
+    border-top: 1px solid #161616;
+    border-bottom: 1px solid #161616;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: 0.75rem 0.5rem;
+    border-bottom: 1px solid #e0e0e0;
+    vertical-align: top;
+    line-height: 1.4;
+    color: #161616;
+  }
+
+  /* The last line closes the item list; the totals below stand apart from it. */
+  tbody tr:last-child td {
+    border-bottom: 1px solid #161616;
+  }
+}
+
+/* Figures line up in their columns so they can be read down the invoice. */
+.numeric {
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.numCol {
+  width: 2rem;
+}
+
+.lineName {
+  display: block;
+  font-weight: 600;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+/* Codes, charge date — what only qualifies the line, kept under its description rather
+   than taking a column. */
+.lineSub {
+  display: block;
+  margin-top: 0.1875rem;
+  font-size: 0.6875rem;
+  line-height: 1.35;
+  color: #6f6f6f;
+  overflow-wrap: anywhere;
+}
+
+.lineFlags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.375rem;
+
+  :global(.cds--tag) {
+    margin: 0;
+  }
+}
+
+/* Trailing column for the line's own Remove control — only as wide as the icon. */
+.actionCol {
+  width: 2rem;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: right;
+}
+
+/* ---- Totals ---- */
+/* The closing figures, stepped in to the right of the item columns the way an invoice
+   closes: the subtotals quiet, the total ruled off and given weight. */
+.totalRow td {
+  padding: 0.375rem 0.5rem;
+  border-bottom: none;
+  color: #525252;
+}
+
+/* Air between the last charge and the figures it feeds into. */
+.totalRow:first-child td {
+  padding-top: 0.625rem;
+}
+
+.totalStrong td {
+  padding: 0.625rem 0.5rem;
+  border-bottom: none;
+  border-top: 1px solid #161616;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: #161616;
+}
+
+.empty {
+  margin: 0;
+  padding: 0.5rem 0;
+  font-size: 0.8125rem;
+  color: #6f6f6f;
+}
+
+/* ---- Remove confirmation ---- */
+.confirmText {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: #393939;
+}
+
+/* Buttons live inside the modal body (not Carbon's ModalFooter, whose full-height
+   buttons were overflowing the container) — a simple right-aligned sm row. */
+.confirmActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}