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

package/src/billing/dashboard/v2/cash-checklist/bill-document.component.scss

@@ -0,0 +1,90 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.doc {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+}
+
+.docHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: layout.$spacing-05;
+  padding-bottom: layout.$spacing-04;
+  border-bottom: 1px solid $ui-03;
+}
+
+.docNo {
+  @include type.type-style('heading-compact-02');
+  font-family: 'IBM Plex Mono', monospace;
+  color: $ui-05;
+}
+
+.docFor {
+  @include type.type-style('body-compact-01');
+  color: $ui-05;
+  margin-top: 2px;
+}
+
+.docMeta {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin-top: 2px;
+}
+
+.tableWrap {
+  overflow-x: auto;
+}
+
+.num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.mono {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.82rem;
+}
+
+.totals {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+  align-self: flex-end;
+  min-width: 16rem;
+}
+
+.totalRow {
+  display: flex;
+  justify-content: space-between;
+  gap: layout.$spacing-05;
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+
+  strong {
+    color: $ui-05;
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+.paid {
+  color: colors.$green-60;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.balance {
+  color: colors.$red-60;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.note {
+  @include type.type-style('label-01');
+  color: $text-03;
+  margin: 0;
+}

package/src/billing/dashboard/v2/cash-checklist/bill-document.component.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag } from '@carbon/react';
+import { itemStatus, type CashBill } from './cash-checklist.resource';
+import styles from './bill-document.component.scss';
+
+const money = (n: number) => `KES ${n.toLocaleString('en-KE')}`;
+const ITEM_TAG = { UNPAID: 'gray', PARTIAL: 'blue', PAID: 'green' } as const;
+const ITEM_LABEL = { UNPAID: 'Unpaid', PARTIAL: 'Partial', PAID: 'Paid' } as const;
+
+interface BillDocumentProps {
+  bill: CashBill;
+  kind: 'invoice' | 'receipt';
+}
+
+/** Printable invoice (pending) or receipt (paid) for a cash bill. */
+const BillDocument = React.forwardRef<HTMLDivElement, BillDocumentProps>(({ bill, kind }, ref) => {
+  const total = bill.lineItems.reduce((sum, i) => sum + i.amount, 0);
+  const paid = bill.lineItems.reduce((sum, i) => sum + i.paidAmount, 0);
+  const balance = total - paid;
+  const isReceipt = kind === 'receipt';
+
+  return (
+    <div className={styles.doc} ref={ref}>
+      <div className={styles.docHead}>
+        <div>
+          <div className={styles.docNo}>{bill.billNo}</div>
+          <div className={styles.docFor}>
+            {bill.patientName} · CR {bill.crNumber}
+          </div>
+          <div className={styles.docMeta}>
+            {bill.date} · {bill.source === 'SHA_COPAY' ? `SHA copay · ${bill.claimCode}` : 'Cash'}
+          </div>
+        </div>
+        <Tag type={isReceipt ? 'green' : 'blue'} size="sm">
+          {isReceipt ? 'Receipt · Paid' : 'Invoice'}
+        </Tag>
+      </div>
+
+      <div className={styles.tableWrap}>
+        <Table size="sm" aria-label="bill lines" useZebraStyles>
+          <TableHead>
+            <TableRow>
+              <TableHeader>Code</TableHeader>
+              <TableHeader>Service</TableHeader>
+              <TableHeader className={styles.num}>Amount</TableHeader>
+              <TableHeader>Status</TableHeader>
+              {isReceipt ? <TableHeader>Receipt</TableHeader> : null}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {bill.lineItems.map((i) => {
+              const st = itemStatus(i);
+              const receipts = bill.payments
+                .filter((p) => p.itemId === i.id)
+                .map((p) => p.receiptNo)
+                .join(', ');
+              return (
+                <TableRow key={i.id}>
+                  <TableCell className={styles.mono}>{i.code}</TableCell>
+                  <TableCell>{i.service}</TableCell>
+                  <TableCell className={styles.num}>{money(i.amount)}</TableCell>
+                  <TableCell>
+                    <Tag size="sm" type={ITEM_TAG[st]}>
+                      {ITEM_LABEL[st]}
+                    </Tag>
+                  </TableCell>
+                  {isReceipt ? <TableCell className={styles.mono}>{receipts || '—'}</TableCell> : null}
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className={styles.totals}>
+        <div className={styles.totalRow}>
+          <span>Total</span>
+          <strong>{money(total)}</strong>
+        </div>
+        <div className={styles.totalRow}>
+          <span>Paid</span>
+          <span className={styles.paid}>{money(paid)}</span>
+        </div>
+        <div className={styles.totalRow}>
+          <span>Balance</span>
+          <span className={styles.balance}>{balance ? money(balance) : 'Settled in full'}</span>
+        </div>
+      </div>
+
+      <p className={styles.note}>
+        {isReceipt
+          ? 'Official receipt for cash received. Generated by the system.'
+          : 'Invoice for the outstanding balance. Present at the cash point to settle before service.'}
+      </p>
+    </div>
+  );
+});
+
+BillDocument.displayName = 'BillDocument';
+
+export default BillDocument;

package/src/billing/dashboard/v2/cash-checklist/cash-checklist.component.scss

@@ -0,0 +1,199 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.wrap {
+  padding: layout.$spacing-03 0;
+}
+
+.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: 66ch;
+}
+
+.loading {
+  padding: layout.$spacing-06 layout.$spacing-05;
+}
+
+.tableCard {
+  overflow-x: auto;
+}
+
+.viewSwitch {
+  max-width: 24rem;
+  margin-bottom: layout.$spacing-04;
+}
+
+/* Rendered off-screen so it can be sent to the printer without showing on the page. */
+.printArea {
+  position: absolute;
+  left: -10000px;
+  top: 0;
+  width: 60rem;
+}
+
+.num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.mono {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 0.82rem;
+}
+
+.billLink {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--brand-01);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: left;
+
+  &:hover {
+    color: var(--brand-02);
+    text-decoration: underline;
+  }
+}
+
+/* ---- Detail ---- */
+.back {
+  margin-left: calc(-1 * #{layout.$spacing-05});
+  margin-bottom: layout.$spacing-04;
+  color: $text-02;
+}
+
+.detailHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: layout.$spacing-05;
+  padding-bottom: layout.$spacing-05;
+  border-bottom: 1px solid $ui-03;
+  margin-bottom: layout.$spacing-05;
+}
+
+.billNo {
+  @include type.type-style('label-01');
+  font-family: 'IBM Plex Mono', monospace;
+  color: var(--brand-01);
+}
+
+.name {
+  @include type.type-style('heading-03');
+  color: $ui-05;
+  margin: 2px 0 layout.$spacing-02;
+}
+
+.meta {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.detailActions {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-04;
+  flex-shrink: 0;
+}
+
+.receiptRef {
+  @include type.type-style('label-01');
+  font-family: 'IBM Plex Mono', monospace;
+  color: $text-02;
+}
+
+.summaryLine {
+  display: flex;
+  gap: layout.$spacing-06;
+  margin: layout.$spacing-04 0 layout.$spacing-06;
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+  font-variant-numeric: tabular-nums;
+}
+
+.paidAmt {
+  color: colors.$green-60;
+  font-weight: 600;
+}
+
+.balanceAmt {
+  color: colors.$red-60;
+  font-weight: 600;
+}
+
+.sectionTitle {
+  @include type.type-style('label-01');
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  font-weight: 700;
+  color: $ui-05;
+  margin: 0 0 layout.$spacing-03;
+}
+
+.noPayments {
+  @include type.type-style('body-01');
+  color: $text-03;
+  margin: 0;
+}
+
+.payments {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+}
+
+.payment {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-04;
+  padding: layout.$spacing-03 layout.$spacing-04;
+  border: 1px solid $ui-03;
+}
+
+.payIcon {
+  color: colors.$green-50;
+  flex-shrink: 0;
+}
+
+.payBody {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.payService {
+  @include type.type-style('body-compact-01');
+  color: $ui-05;
+}
+
+.payMeta {
+  @include type.type-style('label-01');
+  color: $text-03;
+}
+
+.payAmt {
+  @include type.type-style('body-compact-01');
+  color: $ui-05;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}