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

package/src/billing/dashboard/v3/claims-accounting/invoice-document.component.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag } from '@carbon/react';
+import { type ShaClaim } from './claims-accounting.resource';
+import { splitBillForSha, money } from './bill-utils';
+import styles from './invoice-document.component.scss';
+
+interface InvoiceDocumentProps {
+  claim: ShaClaim;
+}
+
+/** Printable system-generated invoice for a claim's companion bill (SHA / copay split). */
+const InvoiceDocument = React.forwardRef<HTMLDivElement, InvoiceDocumentProps>(({ claim }, ref) => {
+  const split = splitBillForSha(claim.lines);
+  const invoiceNo = claim.bill?.billNo ?? claim.claimCode.replace('CLM', 'INV');
+
+  return (
+    <div className={styles.invoice} ref={ref}>
+      <div className={styles.invoiceHead}>
+        <div>
+          <div className={styles.invoiceNo}>{invoiceNo}</div>
+          <div className={styles.invoiceFor}>
+            {claim.patientName} · CR {claim.crNumber}
+          </div>
+          <div className={styles.invoiceMeta}>
+            {claim.fund} · {claim.serviceType === 'INPATIENT' ? 'Inpatient' : 'Outpatient'} · Claim {claim.claimCode}
+          </div>
+        </div>
+        <Tag type="blue" size="sm">
+          Auto-generated
+        </Tag>
+      </div>
+
+      <div className={styles.tableWrap}>
+        <Table size="sm" aria-label="invoice lines" useZebraStyles>
+          <TableHead>
+            <TableRow>
+              <TableHeader>Code</TableHeader>
+              <TableHeader>Description</TableHeader>
+              <TableHeader className={styles.num}>Qty</TableHeader>
+              <TableHeader className={styles.num}>Charge</TableHeader>
+              <TableHeader className={styles.num}>SHA covered</TableHeader>
+              <TableHeader className={styles.num}>Copay</TableHeader>
+              <TableHeader>Payer</TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {split.lines.map((l) => (
+              <TableRow key={l.line.code}>
+                <TableCell className={styles.mono}>{l.line.code}</TableCell>
+                <TableCell>{l.line.description}</TableCell>
+                <TableCell className={styles.num}>{l.line.quantity}</TableCell>
+                <TableCell className={styles.num}>{money(l.lineTotal)}</TableCell>
+                <TableCell className={styles.num}>{l.shaCovered ? money(l.shaCovered) : '—'}</TableCell>
+                <TableCell className={styles.num}>{l.copay ? money(l.copay) : '—'}</TableCell>
+                <TableCell>
+                  <Tag size="sm" type={l.payer === 'SHA' ? 'green' : 'red'}>
+                    {l.payer}
+                  </Tag>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className={styles.totals}>
+        <div className={styles.totalRow}>
+          <span>Total charge</span>
+          <strong>{money(split.totalCharge)}</strong>
+        </div>
+        <div className={styles.totalRow}>
+          <span>SHA covered</span>
+          <span className={styles.sha}>{money(split.shaCovered)}</span>
+        </div>
+        <div className={styles.totalRow}>
+          <span>Copay due</span>
+          <span className={styles.copay}>{split.copay ? money(split.copay) : 'None — fully covered by SHA'}</span>
+        </div>
+      </div>
+
+      <p className={styles.note}>
+        This invoice is generated by the system and attached to the claim as a supporting document on submission.
+      </p>
+    </div>
+  );
+});
+
+InvoiceDocument.displayName = 'InvoiceDocument';
+
+export default InvoiceDocument;

package/src/billing/dashboard/v3/claims-accounting/remittances.component.tsx

@@ -0,0 +1,169 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  InlineLoading,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+} from '@carbon/react';
+import { ArrowLeft } from '@carbon/react/icons';
+import styles from './claims-accounting.component.scss';
+import { getRemittances, getClaimsPaidByRemittance, type Remittance } from './remittances.resource';
+import { type ShaClaim } from './claims-accounting.resource';
+import TableToolbar from '../shared/table-toolbar.component';
+
+const money = (n: number) => `KES ${n.toLocaleString('en-KE')}`;
+
+interface RemittancesViewProps {
+  reloadKey: number;
+  onOpenClaim: (claim: ShaClaim) => void;
+  date?: string;
+}
+
+const RemittancesView: React.FC<RemittancesViewProps> = ({ reloadKey, onOpenClaim, date }) => {
+  const [remittances, setRemittances] = useState<Remittance[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [openRef, setOpenRef] = useState<Remittance | null>(null);
+  const [claims, setClaims] = useState<ShaClaim[]>([]);
+  const [loadingClaims, setLoadingClaims] = useState(false);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    getRemittances()
+      .then((data) => active && setRemittances(data))
+      .finally(() => active && setLoading(false));
+    return () => {
+      active = false;
+    };
+  }, [reloadKey]);
+
+  const openRemittance = async (r: Remittance) => {
+    setOpenRef(r);
+    setLoadingClaims(true);
+    try {
+      setClaims(await getClaimsPaidByRemittance(r.ref));
+    } finally {
+      setLoadingClaims(false);
+    }
+  };
+
+  if (loading) {
+    return <InlineLoading description="Loading remittances…" className={styles.tableLoading} />;
+  }
+
+  // Drill-down: claims paid by the selected remittance
+  if (openRef) {
+    return (
+      <div>
+        <Button kind="ghost" size="sm" renderIcon={ArrowLeft} onClick={() => setOpenRef(null)} className={styles.backBtn}>
+          All remittances
+        </Button>
+        <div className={styles.remitHead}>
+          <div>
+            <span className={styles.remitRef}>{openRef.ref}</span>
+            <span className={styles.remitPayer}>{openRef.payer}</span>
+          </div>
+          <div className={styles.remitAmt}>{money(openRef.totalAmount)}</div>
+        </div>
+        {loadingClaims ? (
+          <InlineLoading description="Loading claims…" className={styles.tableLoading} />
+        ) : (
+          <div className={styles.tableCard}>
+            <Table size="sm" aria-label="claims paid" useZebraStyles>
+              <TableHead>
+                <TableRow>
+                  <TableHeader>Claim</TableHeader>
+                  <TableHeader>Patient</TableHeader>
+                  <TableHeader>Type</TableHeader>
+                  <TableHeader className={styles.numCol}>Paid</TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {claims.map((c) => (
+                  <TableRow key={c.id}>
+                    <TableCell>
+                      <button type="button" className={styles.claimLink} onClick={() => onOpenClaim(c)}>
+                        {c.claimCode}
+                      </button>
+                    </TableCell>
+                    <TableCell>{c.patientName}</TableCell>
+                    <TableCell>{c.serviceType === 'INPATIENT' ? 'IP' : 'OP'}</TableCell>
+                    <TableCell className={styles.numCol}>{money(c.paidAmount ?? c.amount)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Remittance list
+  const dateMatched = remittances.filter((r) => !date || r.date === date);
+  const term = search.trim().toLowerCase();
+  const filtered = dateMatched.filter((r) => !term || `${r.ref} ${r.payer}`.toLowerCase().includes(term));
+
+  return (
+    <>
+      {dateMatched.length === 0 ? (
+        <p className={styles.empty}>No remittances for the selected date.</p>
+      ) : (
+      <>
+      <TableToolbar
+        id="remittances"
+        search={search}
+        onSearch={setSearch}
+        searchPlaceholder="Search remittance ref or payer…"
+      />
+      {filtered.length === 0 ? (
+        <p className={styles.empty}>No remittances match your search.</p>
+      ) : (
+        <div className={styles.tableCard}>
+          <Table size="sm" aria-label="remittances" useZebraStyles>
+            <TableHead>
+              <TableRow>
+                <TableHeader>Remittance</TableHeader>
+                <TableHeader>Date</TableHeader>
+                <TableHeader>Payer</TableHeader>
+                <TableHeader className={styles.numCol}>Claims</TableHeader>
+                <TableHeader className={styles.numCol}>Amount</TableHeader>
+                <TableHeader>Status</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {filtered.map((r) => (
+                <TableRow key={r.ref}>
+                  <TableCell>
+                    <button type="button" className={styles.claimLink} onClick={() => openRemittance(r)}>
+                      {r.ref}
+                    </button>
+                  </TableCell>
+                  <TableCell>{r.date}</TableCell>
+                  <TableCell>{r.payer}</TableCell>
+                  <TableCell className={styles.numCol}>{r.claimCount}</TableCell>
+                  <TableCell className={styles.numCol}>{money(r.totalAmount)}</TableCell>
+                  <TableCell>
+                    <Tag size="sm" type={r.status === 'RECONCILED' ? 'green' : 'blue'}>
+                      {r.status === 'RECONCILED' ? 'Reconciled' : 'Received'}
+                    </Tag>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+      </>
+      )}
+    </>
+  );
+};
+
+export default RemittancesView;

package/src/billing/dashboard/v3/claims-accounting/remittances.resource.ts

@@ -0,0 +1,46 @@
+/**
+ * Remittances — DEMO STUBS for the DHA Remittance service.
+ * Replace with:
+ *   getRemittances            -> GET /api/v1/remittances
+ *   getClaimsPaidByRemittance -> GET claims paid by a remittance
+ *     (re-exported from claims-accounting.resource so both share the claim store)
+ */
+
+export type RemittanceStatus = 'RECEIVED' | 'RECONCILED';
+
+export interface Remittance {
+  ref: string;
+  date: string;
+  payer: string;
+  claimCount: number;
+  totalAmount: number;
+  status: RemittanceStatus;
+}
+
+const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+const REMITTANCES: Remittance[] = [
+  {
+    ref: 'RMT-2026-0417',
+    date: '2026-07-05',
+    payer: 'SHA / SHIF',
+    claimCount: 2,
+    totalAmount: 7500,
+    status: 'RECONCILED',
+  },
+  {
+    ref: 'RMT-2026-0421',
+    date: '2026-07-07',
+    payer: 'SHA / UHC',
+    claimCount: 1,
+    totalAmount: 800,
+    status: 'RECEIVED',
+  },
+];
+
+export async function getRemittances(): Promise<Remittance[]> {
+  await wait(300);
+  return [...REMITTANCES].sort((a, b) => (a.date < b.date ? 1 : -1));
+}
+
+export { getClaimsPaidByRemittance } from './claims-accounting.resource';

package/src/billing/dashboard/v3/claims-accounting/status-meta.ts

@@ -0,0 +1,25 @@
+import { type ClaimStatus } from './claims-accounting.resource';
+
+type TagType = 'gray' | 'blue' | 'green' | 'teal' | 'red' | 'magenta' | 'purple' | 'cyan' | 'warm-gray';
+
+/** Human label + Carbon Tag colour for each claim status. */
+export function statusMeta(status: ClaimStatus): { label: string; tag: TagType } {
+  switch (status) {
+    case 'DRAFT':
+      return { label: 'Draft', tag: 'gray' };
+    case 'PREAUTH_PENDING':
+      return { label: 'Preauth pending', tag: 'purple' };
+    case 'SUBMITTED':
+      return { label: 'Submitted', tag: 'blue' };
+    case 'APPROVED':
+      return { label: 'Approved', tag: 'teal' };
+    case 'REJECTED':
+      return { label: 'Rejected', tag: 'red' };
+    case 'RECALLED':
+      return { label: 'Recalled', tag: 'magenta' };
+    case 'PAID':
+      return { label: 'Paid', tag: 'green' };
+    default:
+      return { label: status, tag: 'gray' };
+  }
+}

package/src/billing/dashboard/v3/clearance/clearance.component.scss

@@ -0,0 +1,100 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.clearance {
+  padding: layout.$spacing-05;
+  border: 1px solid $ui-03;
+  background-color: $ui-01;
+}
+
+.intro {
+  margin-bottom: layout.$spacing-05;
+}
+
+.title {
+  @include type.type-style('heading-compact-02');
+  color: $ui-05;
+  margin: 0 0 layout.$spacing-02;
+}
+
+.subtitle {
+  @include type.type-style('body-01');
+  color: $text-02;
+  margin: 0;
+  max-width: 62ch;
+}
+
+.pill {
+  display: inline-block;
+  margin-left: layout.$spacing-03;
+  min-width: 1.15rem;
+  padding: 0 layout.$spacing-02;
+  border-radius: 999px;
+  background-color: var(--brand-01);
+  color: colors.$white;
+  font-size: 0.68rem;
+  line-height: 1.15rem;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.pillSkeleton {
+  display: inline-block;
+  margin-left: layout.$spacing-03;
+  width: 1.15rem;
+  height: 1.15rem;
+  border-radius: 999px;
+  vertical-align: middle;
+  background: colors.$gray-20;
+  animation: pillPulse 1.2s ease-in-out infinite;
+}
+
+@keyframes pillPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
+.loading,
+.empty {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  color: $text-02;
+}
+
+/* Table wrapper — visual styling comes from the page-level table rules so every
+   section looks the same. This only handles horizontal scroll for wide tables. */
+.tableCard {
+  overflow-x: auto;
+}
+
+/* Right-align numeric columns with tabular figures */
+.numCol {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.empty {
+  @include type.type-style('body-01');
+  text-align: center;
+}
+
+.prepaidHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: layout.$spacing-05;
+  margin: layout.$spacing-03 0 layout.$spacing-05;
+}
+
+.prepaidHint {
+  @include type.type-style('body-01');
+  color: $text-02;
+  margin: 0;
+  max-width: 60ch;
+}

package/src/billing/dashboard/v3/clearance/prepaid-services.component.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import {
+  InlineLoading,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+} from '@carbon/react';
+import styles from './clearance.component.scss';
+import { getPrepaidServices, type PrepaidService } from '../../../../shared/services/consultation-clearance.resource';
+import TableToolbar from '../shared/table-toolbar.component';
+import EmptyState from '../shared/empty-state.component';
+
+const money = (n: number) => `KES ${n.toLocaleString('en-KE')}`;
+const fmt = (iso: string) => new Date(iso).toLocaleDateString('en-KE');
+
+const PrepaidServices: React.FC<{ locationUuid: string; onChanged?: () => void; date?: string }> = ({
+  locationUuid,
+  date,
+}) => {
+  const [rows, setRows] = useState<PrepaidService[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    getPrepaidServices(undefined, locationUuid)
+      .then((data) => active && setRows(data))
+      .finally(() => active && setLoading(false));
+    return () => {
+      active = false;
+    };
+  }, [locationUuid]);
+
+  return (
+    <div>
+      <div className={styles.prepaidHead}>
+        <p className={styles.prepaidHint}>
+          Services paid today but delivered on a later visit (e.g. a lab test). When the patient returns, their visit is
+          recognised as prepaid and isn&apos;t billed again.
+        </p>
+      </div>
+
+      {loading ? (
+        <InlineLoading description="Loading…" className={styles.loading} />
+      ) : rows.length === 0 ? (
+        <EmptyState message="No prepaid services recorded." />
+      ) : (
+        (() => {
+          const dateMatched = rows.filter((p) => !date || p.dueDate === date);
+          if (dateMatched.length === 0) {
+            return <EmptyState message="No prepaid services for the selected date." />;
+          }
+          const term = search.trim().toLowerCase();
+          const filtered = dateMatched.filter(
+            (p) => !term || `${p.patientName} ${p.service}`.toLowerCase().includes(term),
+          );
+          return (
+            <>
+              <TableToolbar
+                id="prepaid"
+                search={search}
+                onSearch={setSearch}
+                searchPlaceholder="Search patient or service…"
+              />
+              {filtered.length === 0 ? (
+                <EmptyState message="No prepaid services match your search." />
+              ) : (
+                <div className={styles.tableCard}>
+                  <Table size="sm" aria-label="prepaid services" useZebraStyles>
+                    <TableHead>
+                      <TableRow>
+                        <TableHeader>Patient</TableHeader>
+                        <TableHeader>Service</TableHeader>
+                        <TableHeader className={styles.numCol}>Amount</TableHeader>
+                        <TableHeader>Paid on</TableHeader>
+                        <TableHeader>Due</TableHeader>
+                        <TableHeader>Status</TableHeader>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {filtered.map((p) => (
+                        <TableRow key={p.id}>
+                          <TableCell>{p.patientName}</TableCell>
+                          <TableCell>{p.service}</TableCell>
+                          <TableCell className={styles.numCol}>{money(p.amount)}</TableCell>
+                          <TableCell>{fmt(p.paidOn)}</TableCell>
+                          <TableCell>{p.dueDate}</TableCell>
+                          <TableCell>
+                            <Tag size="sm" type={p.status === 'OPEN' ? 'blue' : 'green'}>
+                              {p.status === 'OPEN' ? 'Scheduled' : 'Delivered'}
+                            </Tag>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+              )}
+            </>
+          );
+        })()
+      )}
+    </div>
+  );
+};
+
+export default PrepaidServices;