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

package/src/billing/dashboard/v2/clearance/clearance.component.tsx

@@ -0,0 +1,225 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Button,
+  InlineLoading,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+} from '@carbon/react';
+import { CheckmarkOutline } from '@carbon/react/icons';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import styles from './clearance.component.scss';
+
+import {
+  clearConsultation,
+  getClearanceCounts,
+  getConsultationClearances,
+  type ClearanceStatus,
+  type ConsultationClearance,
+} from '../../../../shared/services/consultation-clearance.resource';
+import TableToolbar from '../shared/table-toolbar.component';
+import EmptyState from '../shared/empty-state.component';
+import { usePendingClearanceVisits } from '../active-visits/active-visits.resource';
+import CashPatients from './cash.component';
+
+const money = (n: number) => (n > 0 ? `KES ${n.toLocaleString('en-KE')}` : 'Waived');
+
+const ClearanceTable: React.FC<{
+  status: ClearanceStatus;
+  locationUuid: string;
+  reloadKey: number;
+  onCleared: () => void;
+  date?: string;
+}> = ({ status, locationUuid, reloadKey, onCleared, date }) => {
+  const [rows, setRows] = useState<ConsultationClearance[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [clearingId, setClearingId] = useState<string>('');
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    getConsultationClearances(status, locationUuid)
+      .then((data) => active && setRows(data))
+      .finally(() => active && setLoading(false));
+    return () => {
+      active = false;
+    };
+  }, [status, locationUuid, reloadKey]);
+
+  const clear = async (id: string) => {
+    setClearingId(id);
+    try {
+      await clearConsultation(id);
+      showSnackbar({ kind: 'success', title: 'Cleared', subtitle: 'Patient can now be seen at the queue.' });
+      onCleared();
+    } finally {
+      setClearingId('');
+    }
+  };
+
+  if (loading) {
+    return <InlineLoading description="Loading…" className={styles.loading} />;
+  }
+  const dateMatched = rows
+    .filter((r) => !date || new Date(r.createdAt).toLocaleDateString('en-CA') === date)
+    // Awaiting payment is the CASH queue — SHA patients are cleared via their SHA
+    // claim under "Pending clearance", never here. Defensive net for any legacy record.
+    .filter((r) => status !== 'AWAITING_PAYMENT' || !/sha|shif/i.test(r.payer));
+  if (dateMatched.length === 0) {
+    return (
+      <EmptyState
+        message={status === 'AWAITING_PAYMENT' ? 'No patients awaiting clearance.' : 'No cleared patients yet.'}
+      />
+    );
+  }
+
+  const term = search.trim().toLowerCase();
+  const filtered = dateMatched.filter(
+    (r) => !term || `${r.patientName} ${r.queue} ${r.payer}`.toLowerCase().includes(term),
+  );
+
+  return (
+    <>
+      <TableToolbar
+        id={`clearance-${status}`}
+        search={search}
+        onSearch={setSearch}
+        searchPlaceholder="Search patient, queue or payer…"
+      />
+      {filtered.length === 0 ? (
+        <EmptyState message="No clearances match your search." />
+      ) : (
+        <div className={styles.tableCard}>
+          <Table size="sm" aria-label="clearance" useZebraStyles>
+            <TableHead>
+              <TableRow>
+                <TableHeader>Patient</TableHeader>
+                <TableHeader>Queue</TableHeader>
+                <TableHeader>Visit type</TableHeader>
+                <TableHeader>Payer</TableHeader>
+                <TableHeader className={styles.numCol}>Consultation fee</TableHeader>
+                <TableHeader>{status === 'AWAITING_PAYMENT' ? 'Action' : 'Status'}</TableHeader>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {filtered.map((r) => (
+                <TableRow key={r.id}>
+                  <TableCell>{r.patientName}</TableCell>
+                  <TableCell>{r.queue}</TableCell>
+                  <TableCell>{r.visitType}</TableCell>
+                  <TableCell>{r.payer}</TableCell>
+                  <TableCell className={styles.numCol}>{money(r.amount)}</TableCell>
+                  <TableCell>
+                    {status === 'AWAITING_PAYMENT' ? (
+                      <Button
+                        kind="primary"
+                        size="sm"
+                        renderIcon={CheckmarkOutline}
+                        disabled={clearingId === r.id}
+                        onClick={() => clear(r.id)}
+                      >
+                        {clearingId === r.id ? 'Clearing…' : 'Mark paid & release'}
+                      </Button>
+                    ) : (
+                      <Tag size="sm" type="green">
+                        Cleared · at queue
+                      </Tag>
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+    </>
+  );
+};
+
+const Clearance: React.FC<{
+  onChange?: () => void;
+  pendingTab?: React.ReactNode;
+  initialTab?: string;
+  navNonce?: number;
+  date?: string;
+}> = ({ onChange, pendingTab, initialTab, navNonce, date }) => {
+  const session = useSession();
+  const locationUuid = session?.sessionLocation?.uuid ?? '';
+  const [reloadKey, setReloadKey] = useState(0);
+  const [counts, setCounts] = useState<{ awaiting: number }>({ awaiting: 0 });
+  const [loadingCounts, setLoadingCounts] = useState(true);
+  const [tabIndex, setTabIndex] = useState(0);
+  // SHA visits awaiting clearance — drives the Pending clearance tab count.
+  const { count: pendingCount, isLoading: pendingLoading } = usePendingClearanceVisits(date);
+
+  // Order of the sub-tabs (the "pending" tab only exists when pendingTab is passed).
+  const tabKeys = [...(pendingTab ? ['pending'] : []), 'awaiting'];
+
+  const refresh = () => {
+    setReloadKey((k) => k + 1);
+    onChange?.();
+  };
+
+  useEffect(() => {
+    let active = true;
+    setLoadingCounts(true);
+    getClearanceCounts(locationUuid, date)
+      .then((c) => active && setCounts(c))
+      .finally(() => active && setLoadingCounts(false));
+    return () => {
+      active = false;
+    };
+  }, [locationUuid, reloadKey, date]);
+
+  // A count pill that shows a small skeleton while loading, then the count
+  // (defaulting to 0 when there are none).
+  const countPill = (loading: boolean, value: number) => {
+    if (loading) {
+      return <span className={styles.pillSkeleton} aria-label="Loading count" />;
+    }
+    return <span className={styles.pill}>{value ?? 0}</span>;
+  };
+
+  // Jump to the sub-tab requested from the dashboard summary tiles.
+  useEffect(() => {
+    const i = tabKeys.indexOf(initialTab ?? '');
+    if (i >= 0) {
+      setTabIndex(i);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [navNonce]);
+
+  return (
+    <div className={styles.clearance}>
+      {/* No heading: the tabs name what this is, and the paragraph that explained it is
+          on the tab that starts the work. */}
+      <Tabs selectedIndex={tabIndex} onChange={({ selectedIndex }) => setTabIndex(selectedIndex)}>
+        <TabList aria-label="Clearance">
+          {/* The explanation lives on the dashboard's own "Pending clearance" tab, which
+              is the one you arrive through — see PENDING_HINT there. */}
+          {pendingTab ? <Tab>Pending clearance (SHA){countPill(pendingLoading, pendingCount)}</Tab> : null}
+          <Tab>Awaiting payment (CASH){countPill(loadingCounts, counts.awaiting)}</Tab>
+        </TabList>
+        <TabPanels>
+          {pendingTab ? <TabPanel>{pendingTab}</TabPanel> : null}
+          <TabPanel>
+            <CashPatients billingDate={date} />
+            {/* <ClearanceTable status="AWAITING_PAYMENT" locationUuid={locationUuid} reloadKey={reloadKey} onCleared={refresh} date={date} /> */}
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default Clearance;

package/src/billing/dashboard/v2/clearance/pay-cash.component.tsx

@@ -0,0 +1,176 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Button,
+  InlineNotification,
+  Modal,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableSelectAll,
+  TableSelectRow,
+  Tile,
+} from '@carbon/react';
+
+import { closeWorkspace, showSnackbar } from '@openmrs/esm-framework';
+import { type PendingLineItem } from '../types';
+
+import styles from './pay-cash.scss';
+import { updateBillItemStatus } from '../../../api/billing.api';
+import { Snackbar } from '@openmrs/esm-styleguide/src/snackbars/snackbar.component';
+
+interface PayCashComponentProps {
+  lineItems?: PendingLineItem[];
+  billUuid: string;
+  cashModeUuid: string;
+}
+
+const PayCashComponent: React.FC<PayCashComponentProps> = ({ lineItems = [], billUuid, cashModeUuid }) => {
+  const [selectedRows, setSelectedRows] = useState<number[]>([]);
+  const [amountTendered, setAmountTendered] = useState(0);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const toggleRow = (index: number) => {
+    setSelectedRows((prev) => (prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]));
+  };
+
+  const toggleAllRows = () => {
+    if (selectedRows.length === lineItems.length) {
+      setSelectedRows([]);
+    } else {
+      setSelectedRows(lineItems.map((_, index) => index));
+    }
+  };
+
+  const selectedLineItems = useMemo(() => selectedRows.map((index) => lineItems[index]), [selectedRows, lineItems]);
+
+  const totalAmount = useMemo(
+    () => selectedLineItems.reduce((sum, item) => sum + (item?.quantity ?? 0) * (item?.price ?? 0), 0),
+    [selectedLineItems],
+  );
+
+  const amountDue = totalAmount;
+
+  const hasSelection = selectedRows.length > 0;
+
+  const onCancel = () => {
+    if (isProcessing) return;
+    closeWorkspace('pay-cash-workspace', { ignoreChanges: true });
+  };
+
+  const onProcessPayment = async () => {
+    if (isProcessing) {
+      return;
+    }
+    setIsProcessing(true);
+    setTimeout(() => {
+      setIsProcessing(false);
+
+      closeWorkspace('pay-cash-workspace', {
+        ignoreChanges: true,
+      });
+
+      showSnackbar({
+        kind: 'success',
+        title: 'Payment successful',
+        subtitle: `${selectedLineItems.length} bill item(s) paid successfully.`,
+      });
+    }, 1000);
+
+    // try {
+    //   await Promise.all(
+    //     selectedLineItems.map((item) => updateBillItemStatus(billUuid, item.bill_item_uuid, cashModeUuid)),
+    //   );
+    // } catch (error) {
+    //   console.error('Error processing payment:', error);
+    // } finally {
+    //   setIsProcessing(false);
+    // }
+  };
+
+  return (
+    <div>
+      <Table aria-label="Pending cash bill items" size="sm">
+        <TableHead>
+          <TableRow>
+            <TableSelectAll
+              id="select-all-bill-items"
+              name="select-all-bill-items"
+              checked={lineItems.length > 0 && selectedRows.length === lineItems.length}
+              indeterminate={selectedRows.length > 0 && selectedRows.length < lineItems.length}
+              onSelect={toggleAllRows}
+            />
+
+            <TableHeader>Index</TableHeader>
+            <TableHeader>Bill Item</TableHeader>
+            <TableHeader>Status</TableHeader>
+            <TableHeader>Quantity</TableHeader>
+            <TableHeader>Price</TableHeader>
+            <TableHeader>Total</TableHeader>
+          </TableRow>
+        </TableHead>
+
+        <TableBody>
+          {lineItems.map((item, index) => {
+            const rowTotal = (item.quantity ?? 0) * (item.price ?? 0);
+
+            return (
+              <TableRow key={index}>
+                <TableSelectRow
+                  id={`bill-item-${index}`}
+                  name={`bill-item-${index}`}
+                  checked={selectedRows.includes(index)}
+                  onSelect={() => toggleRow(index)}
+                />
+
+                <TableCell>{index + 1}</TableCell>
+                <TableCell>{item.billable_service}</TableCell>
+                <TableCell>{item.status}</TableCell>
+                <TableCell>{item.quantity ?? 0}</TableCell>
+                <TableCell>{item.price ?? 0}</TableCell>
+                <TableCell>{rowTotal}</TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+
+      {hasSelection && (
+        <Tile className={styles.summaryCard}>
+          <div className={styles.summaryRow}>
+            <span>Total Amount</span>
+            <strong>
+              KES{' '}
+              {totalAmount.toLocaleString(undefined, {
+                minimumFractionDigits: 2,
+              })}
+            </strong>
+          </div>
+
+          <div className={styles.summaryRow}>
+            <span>Amount Due</span>
+            <strong>
+              KES{' '}
+              {amountDue.toLocaleString(undefined, {
+                minimumFractionDigits: 2,
+              })}
+            </strong>
+          </div>
+
+          <div className={styles.actions}>
+            <Button kind="secondary" size="sm" onClick={onCancel} disabled={isProcessing}>
+              Cancel
+            </Button>
+
+            <Button kind="primary" size="sm" disabled={!hasSelection || isProcessing} onClick={onProcessPayment}>
+              {isProcessing ? 'Processing...' : 'Process Payment'}
+            </Button>
+          </div>
+        </Tile>
+      )}
+    </div>
+  );
+};
+export default PayCashComponent;

package/src/billing/dashboard/v2/clearance/pay-cash.scss

@@ -0,0 +1,28 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.summaryCard {
+  margin-top: 1rem;
+  padding: 1rem;
+}
+
+.summaryRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #e0e0e0;
+  }
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}

package/src/billing/dashboard/v2/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;