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

package/src/billing/billing-dashboard-link.component.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { createDashboardLink } from '../createDashboardLink';
+import { billingDashboardMeta } from '../dashboard-meta/billing-dashboard.meta';
+import { emitBillingDashboardReset } from './billing-dashboard-reset';
+
+const DashboardLink = createDashboardLink(billingDashboardMeta);
+const dashboardPath = `${billingDashboardMeta.basePath}/${billingDashboardMeta.path}`;
+
+const stripTrailingSlash = (path: string) => (path.length > 1 ? path.replace(/\/+$/, '') : path);
+
+/**
+ * The Accounting side-nav link. Behaves like any other dashboard link, except that
+ * clicking it while already on the dashboard resets it to its default view instead
+ * of doing nothing — see billing-dashboard-reset.ts.
+ */
+const BillingDashboardLink: React.FC = () => {
+  const handleClick = () => {
+    if (stripTrailingSlash(window.location.pathname) === dashboardPath) {
+      emitBillingDashboardReset();
+    }
+  };
+
+  // The anchor is rendered by DashboardExtension, so catch its click as it bubbles.
+  return (
+    <div onClick={handleClick}>
+      <DashboardLink />
+    </div>
+  );
+};
+
+export default BillingDashboardLink;

package/src/billing/billing-dashboard-reset.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Clicking the "Accounting" side-nav link while the dashboard is already open is a
+ * no-op as far as routing goes — single-spa's navigateToUrl short-circuits when the
+ * destination pathname and search match the current ones, so nothing re-renders and
+ * the user is left on whichever tab / drill-down they had open.
+ *
+ * The link therefore announces the click on this event and the dashboard listens for
+ * it to send itself back to its default view.
+ */
+export const BILLING_DASHBOARD_RESET_EVENT = 'ampath:billing-dashboard-reset';
+
+export function emitBillingDashboardReset() {
+  window.dispatchEvent(new CustomEvent(BILLING_DASHBOARD_RESET_EVENT));
+}
+
+export function useBillingDashboardReset(onReset: () => void) {
+  const onResetRef = useRef(onReset);
+  onResetRef.current = onReset;
+
+  useEffect(() => {
+    const handler = () => onResetRef.current();
+    window.addEventListener(BILLING_DASHBOARD_RESET_EVENT, handler);
+    return () => window.removeEventListener(BILLING_DASHBOARD_RESET_EVENT, handler);
+  }, []);
+}

package/src/billing/billing-root.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Invoice from './invoice/invoice';
+import BillingClaimsDashboard, { resetBillingDateFilter } from './dashboard/v2/billing-claims-dashboard.component';
+import ClaimWorkspace from './dashboard/v2/claim-workspace/claim-workspace.component';
+import ClaimDetailsPage from './dashboard/v2/claim-visits/claim-visit-details/claim-details-page.component';
+import BillDetailsPage from './dashboard/v2/patient-bill-details/bill-details-page.component';
+import { useBillingDashboardReset } from './billing-dashboard-reset';
+import BillingClaimsReportsDashboard from './reports/billing-and-claims-reports-dashboard';
+
+const BillingRoot: React.FC = () => {
+  // Re-clicking "Accounting" in the side nav remounts the dashboard, which drops the
+  // selected tab, drill-down and date filter back to their defaults.
+  const [resetKey, setResetKey] = useState(0);
+  useBillingDashboardReset(
+    useCallback(() => {
+      resetBillingDateFilter();
+      setResetKey((k) => k + 1);
+    }, []),
+  );
+
+  // This root only unmounts when the user navigates out of billing altogether — the
+  // routes below swap under it without tearing it down — so its cleanup is the right
+  // place to forget the date filter and have a return visit start on today.
+  useEffect(() => () => resetBillingDateFilter(), []);
+
+  return (
+    <BrowserRouter basename={`${window.spaBase}/home/accounting`}>
+      <Routes>
+        <Route path="" element={<BillingClaimsDashboard key={resetKey} />} />
+        <Route path="billing-claims-reports" element={<BillingClaimsReportsDashboard />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default BillingRoot;

package/src/billing/dashboard/billingDashboard.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Grid, Column } from '@carbon/react';
+import BillingTotalsRow from '../../billing/widgets/billingTotalsRow.component';
+
+import { spacing07 } from '@carbon/themes';
+
+const BillingDashboard: React.FC = () => {
+  return (
+    <Grid fullWidth>
+      <Column lg={16} md={8} sm={4}>
+        <div
+          style={{
+            position: 'relative',
+            marginLeft: `-${spacing07}`,
+            marginRight: `-${spacing07}`,
+          }}
+        >
+          <BillingTotalsRow />
+        </div>
+      </Column>
+    </Grid>
+  );
+};
+
+export default BillingDashboard;

package/src/billing/dashboard/v2/active-visits/active-visits.component.tsx

@@ -0,0 +1,257 @@
+import React, { useMemo, useState } from 'react';
+import { usePendingClearanceVisits } from './active-visits.resource';
+import { Button, DataTable, type DataTableRow, DataTableSkeleton, Pagination, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag } from '@carbon/react';
+import { launchWorkspace2, usePagination, type Visit } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from "./active-visits.scss";
+import dayjs from 'dayjs';
+import TableToolbar from '../shared/table-toolbar.component';
+import EmptyState from '../shared/empty-state.component';
+import { IdentifierTypesUuids } from '../../../../resources/identifier-types';
+import { SEND_TO_QUEUE_WORKSPACE } from '../../../../registry/modal/send-to-triage/send-to-queue.modal';
+
+// OpenMRS renders patient.display as "IDENTIFIER - Full name"; split so the CR
+// number and the name can be shown in their own columns.
+const splitPatientDisplay = (display: string): { crNumber: string; name: string } => {
+    const value = display ?? '';
+    const sep = value.indexOf(' - ');
+    return sep > -1 ? { crNumber: value.slice(0, sep).trim(), name: value.slice(sep + 3).trim() } : { crNumber: '', name: value };
+};
+
+// The Client Registry (CR) number from the patient's identifier list. Returns
+// isCr=true only when the actual CR identifier is found, so a fallback (e.g. a
+// National ID) is never mislabelled with a "CR" prefix.
+const getCrNumber = (visit: Visit): { value: string; isCr: boolean } => {
+    const cr = visit.patient?.identifiers?.find(
+        (i) =>
+            i.identifierType?.uuid === IdentifierTypesUuids.CLIENT_REGISTRY_NO_UUID ||
+            (i.identifierType?.display ?? '').toLowerCase().includes('registry'),
+    )?.identifier;
+    if (cr) {
+        return { value: cr.trim(), isCr: true };
+    }
+    return { value: splitPatientDisplay(visit.patient?.display ?? '').crNumber.trim(), isCr: false };
+};
+
+// Format a CR value for display — prefix "CR" only when it's genuinely the CR.
+const formatCr = (value: string, isCr: boolean): string => {
+    if (!value) return '—';
+    if (!isCr) return value;
+    return /^cr/i.test(value) ? value : `CR${value}`;
+};
+
+// Human "how long they've been waiting" label from the visit start.
+const waitingSince = (startDatetime: string): string => {
+    const mins = dayjs().diff(dayjs(startDatetime), 'minute');
+    if (mins < 1) return 'just now';
+    if (mins < 60) return `${mins}m`;
+    const hrs = Math.floor(mins / 60);
+    const rem = mins % 60;
+    return rem ? `${hrs}h ${rem}m` : `${hrs}h`;
+};
+
+// Colour the wait so long waits stand out: fresh (green) → 1h+ (magenta) → 2h+ (red).
+const waitingTagType = (mins: number): 'green' | 'magenta' | 'red' =>
+    mins >= 120 ? 'red' : mins >= 60 ? 'magenta' : 'green';
+
+const ActiveVisits: React.FC<{ date?: string, onDateChange?: (value: string) => void }> = ({ date, onDateChange }) => {
+    const [searchString, setSearchString] = useState('');
+    const { isLoading, visits: pendingVisits } = usePendingClearanceVisits(date);
+    const [patientUuid, setPatientUuid] = useState("");
+    const [visitUuid, setVisitUuid] = useState("");
+    const [visitTypeUuid, setVisitTypeUuid] = useState("");
+    const { t } = useTranslation();
+
+    const columns = [
+        { id: "patientName", header: "Patient", key: "patientName" },
+        { id: "crNumber", header: "CR number", key: "crNumber" },
+        { id: "visitType", header: "Visit type", key: "visitType" },
+        { id: "payer", header: "Payer", key: "payer" },
+        { id: "startTime", header: "Started", key: "startTime" },
+        { id: "waiting", header: "Waiting", key: "waiting" },
+        { id: "action", header: "Action", key: "action" },
+        { id: "visitTypeUuid", header: "", key: "visitTypeUuid" }
+    ];
+
+    const activeVisitsTableRows = useMemo(() => {
+        return (pendingVisits ?? []).map((visit) => {
+            const { name } = splitPatientDisplay(visit.patient.display);
+            const cr = getCrNumber(visit);
+            // Display the CR with its "CR" prefix, e.g. CR7138388758297-0.
+            const crDisplay = formatCr(cr.value, cr.isCr);
+            return {
+                id: visit.uuid,
+                action: visit.patient.uuid,
+                patientName: name,
+                crNumber: crDisplay,
+                patientIdentifiers: crDisplay,
+                visitType: visit.visitType.display,
+                payer: 'SHA',
+                startTime: dayjs(visit.startDatetime).format("DD MMM, HH:mm"),
+                waiting: waitingSince(visit.startDatetime),
+                waitingMinutes: dayjs().diff(dayjs(visit.startDatetime), 'minute'),
+                visitTypeUuid: visit.visitType.uuid
+            };
+        });
+    }, [pendingVisits]);
+
+    const searchResults = useMemo(() => {
+        if (searchString && searchString.trim() !== '') {
+            const lowerSearchString = searchString.toLowerCase();
+            return activeVisitsTableRows.filter(
+                (row) =>
+                    (row.patientName?.toLowerCase().includes(lowerSearchString)) ||
+                    (row.patientIdentifiers.toLowerCase().includes(lowerSearchString))
+            );
+        }
+        return activeVisitsTableRows;
+    }, [activeVisitsTableRows, searchString]);
+
+    const pageSizes = [10, 20, 30, 40, 50];
+    const [currentPageSize, setPageSize] = useState(10);
+    const { goTo, results: paginatedVisits, currentPage } = usePagination(searchResults, currentPageSize);
+
+    const showSkeleton = isLoading && pendingVisits.length === 0;
+
+    // Wait minutes keyed by visit id, so the Waiting cell can colour by urgency.
+    const waitingMinutesById = useMemo(
+        () => new Map(activeVisitsTableRows.map((r) => [r.id, r.waitingMinutes])),
+        [activeVisitsTableRows],
+    );
+
+    // Opens the claim panel as an OpenMRS workspace rather than rendering it inline, so it
+    // gets the platform's own chrome — title bar, hide and maximise — and can be closed
+    // from anywhere the way every other panel in the app can.
+    function handleRowClick(row: DataTableRow<any[]>): void {
+        let rowPatientUuid = '';
+        let rowVisitTypeUuid = '';
+        row.cells.forEach(cell => {
+            if (cell.info.header === "action") {
+                rowPatientUuid = cell.value;
+            }
+            if (cell.info.header === "visitTypeUuid") {
+                rowVisitTypeUuid = cell.value;
+            }
+        });
+                void launchWorkspace2(SEND_TO_QUEUE_WORKSPACE, {
+            workspaceTitle: 'Initiate SHA claim',
+            patientUuid: rowPatientUuid,
+            visitUuid: row.id,
+            visitTypeUuid: rowVisitTypeUuid,
+        });
+    }
+
+    return <>
+        {showSkeleton ? (
+            <div className={styles.tableCard}>
+                <DataTableSkeleton role="progressbar" showHeader={false} showToolbar={false} />
+            </div>
+        ) : activeVisitsTableRows.length === 0 ? (
+            <div className={styles.tableCard}>
+                <EmptyState message="No SHA patients awaiting clearance for the selected date." />
+            </div>
+        ) : (
+        <>
+        <TableToolbar
+            id="active-visits"
+            search={searchString}
+            onSearch={setSearchString}
+            searchPlaceholder={t('searchThisList', 'Search this list')}
+            onDate={onDateChange}
+        />
+        {(searchResults?.length ?? 0) === 0 ? (
+            <div className={styles.tableCard}>
+                <EmptyState message="No patients match your search." />
+            </div>
+        ) : (
+        <DataTable rows={paginatedVisits} headers={columns}>
+            {({
+                rows,
+                headers,
+                getTableProps,
+                getHeaderProps,
+                getRowProps,
+                getCellProps,
+            }) => (
+                <div className={styles.tableCard}>
+                    <Table size="sm" useZebraStyles aria-label="active visits" {...getTableProps()}>
+                        <TableHead>
+                            <TableRow>
+                                {headers
+                                    .filter((header) => header.key !== "visitTypeUuid")
+                                    .map((header) => (
+                                        <TableHeader {...getHeaderProps({ header })}>
+                                            {header.header}
+                                        </TableHeader>
+                                    ))}
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {rows.map((row) => (
+                                <TableRow {...getRowProps({ row })}>
+                                    {row.cells.map((cell) => {
+                                        if (cell.info.header === "visitTypeUuid") {
+                                            return null;
+                                        }
+                                        if (cell.info.header === "payer") {
+                                            return (
+                                                <TableCell key={cell.id}>
+                                                    <Tag size="sm" type="teal">{cell.value}</Tag>
+                                                </TableCell>
+                                            );
+                                        }
+                                        if (cell.info.header === "waiting") {
+                                            return (
+                                                <TableCell key={cell.id}>
+                                                    <Tag size="sm" type={waitingTagType(waitingMinutesById.get(row.id) ?? 0)}>
+                                                        {cell.value}
+                                                    </Tag>
+                                                </TableCell>
+                                            );
+                                        }
+                                        if (cell.info.header === "action") {
+                                            return (
+                                                <TableCell key={cell.id} className={styles.actionCell}>
+                                                    <Button
+                                                        kind="tertiary"
+                                                        size="sm"
+                                                        onClick={() => handleRowClick(row)}
+                                                    >
+                                                        Start SHA visit
+                                                    </Button>
+                                                </TableCell>
+                                            );
+                                        }
+                                        return (
+                                            <TableCell key={cell.id} {...getCellProps({ cell })}>{cell.value}</TableCell>
+                                        )
+                                    })}
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </div>
+            )}
+        </DataTable>
+        )}
+        {(searchResults?.length ?? 0) > 0 && (
+            <Pagination
+                forwardText={t('nextPage', 'Next page')}
+                backwardText={t('previousPage', 'Previous page')}
+                page={currentPage}
+                pageSize={currentPageSize}
+                pageSizes={pageSizes}
+                totalItems={searchResults?.length}
+                onChange={({ pageSize, page }) => {
+                    if (pageSize !== currentPageSize) setPageSize(pageSize);
+                    if (page !== currentPage) goTo(page);
+                }}
+            />
+        )}
+        </>
+        )}
+
+    </>
+}
+
+export default ActiveVisits;

package/src/billing/dashboard/v2/active-visits/active-visits.resource.ts

@@ -0,0 +1,85 @@
+import { openmrsFetch, restBaseUrl, useConfig, useSession, Visit } from '@openmrs/esm-framework';
+import dayjs from 'dayjs';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { type ConfigObject } from '../../../../config-schema';
+import { fetchFacilityClaimVisits } from '../../../billing-claims.resource';
+import { getConsentToken } from '../../../../shared/services/claims.resource';
+
+// Visit attribute that records the payment mode chosen at registration.
+const PAYMENT_MODE_ATTRIBUTE_UUID = '8553afa0-bdb9-4d3c-8a98-05fa9350aa85';
+
+// The payment mode value can come back as a plain uuid or a hydrated object.
+export const readPaymentModeUuid = (visit: any): string => {
+  const raw = visit?.attributes?.find((a: any) => a?.attributeType?.uuid === PAYMENT_MODE_ATTRIBUTE_UUID)?.value;
+  return typeof raw === 'string' ? raw : (raw?.uuid ?? '');
+};
+
+export const useActiveVisits = (date?: string) => {
+  const sessionLocation = useSession();
+
+  // Fetch visits from the start of the selected day (defaults to today).
+  const fromStartDate = (date ? dayjs(date) : dayjs()).startOf('day').toISOString();
+  // Custom rep so the patient's FULL identifier list (incl. the CR number) and
+  // the payment-mode attribute are both present.
+  const rep =
+    'custom:(uuid,startDatetime,visitType:(uuid,display),' +
+    'patient:(uuid,display,identifiers:(identifier,identifierType:(uuid,display))),' +
+    'attributes:(uuid,value,attributeType:(uuid)))';
+  const url = `${restBaseUrl}/visit?location=${sessionLocation?.sessionLocation?.uuid}&includeInactive=false&fromStartDate=${fromStartDate}&v=${rep}`;
+
+  const { data, error, isLoading } = useSWR<{
+    data: {
+      results: Array<Visit>;
+    };
+  }>(url, openmrsFetch);
+
+  return {
+    activeVisits: data?.data?.results,
+    error,
+    isLoading,
+  };
+};
+
+// Patient identifiers (CR number, national id, SHA number…) that already have a
+// SHA claim visit for the location/day. Once a claim visit exists the patient has
+// moved into the claims workflow and is no longer pending clearance.
+const useClaimedPatientIds = (locationUuid: string, date?: string) => {
+  const { data } = useSWR(locationUuid && date ? ['facility-claim-visits', locationUuid, date] : null, () =>
+    fetchFacilityClaimVisits({ locationUuid, visitDate: date }),
+  );
+
+  return useMemo(() => new Set((data ?? []).map((cv) => cv.patientId?.trim()).filter(Boolean)), [data]);
+};
+
+// True when any of the visit's patient identifiers already has an associated SHA
+// claim visit.
+const visitHasClaim = (visit: Visit, claimedPatientIds: Set<string>): boolean => {
+  if (claimedPatientIds.size === 0) {
+    return false;
+  }
+  return (visit.patient?.identifiers ?? []).some(
+    (identifier: any) => identifier?.identifier && claimedPatientIds.has(identifier.identifier.trim()),
+  );
+};
+
+// The Pending clearance queue: active visits paying via SHA and awaiting their
+// claim. Shared by the ActiveVisits list and the tab count so they stay in sync.
+export const usePendingClearanceVisits = (date?: string) => {
+  const { activeVisits, isLoading, error } = useActiveVisits(date);
+  const { shaPaymentModeUuid } = useConfig<ConfigObject>();
+  const sessionLocation = useSession();
+  const locationUuid = sessionLocation?.sessionLocation?.uuid ?? '';
+  const claimedPatientIds = useClaimedPatientIds(locationUuid, date);
+
+  const dayFilter = date ? dayjs(date) : null;
+  const visits = (activeVisits ?? [])
+    .filter((visit) => !dayFilter || dayjs(visit.startDatetime).isSame(dayFilter, 'day'))
+    .filter((visit) => readPaymentModeUuid(visit) === shaPaymentModeUuid)
+    .filter((visit) => !getConsentToken(visit));
+  // Drop visits that already have an associated SHA claim visit — those have
+  // left "pending clearance" and are being handled in the claims workflow.
+  // .filter((visit) => !visitHasClaim(visit, claimedPatientIds));
+
+  return { visits, count: visits.length, isLoading, error };
+};

package/src/billing/dashboard/v2/active-visits/active-visits.scss

@@ -0,0 +1,15 @@
+/* Matches the other billing tables (clearance / claims). */
+.tableCard {
+  overflow-x: auto;
+}
+
+/* Keep the (bordered) action button tidy and sized to its label on one line. */
+.actionCell {
+  white-space: nowrap;
+}
+.actionCell :global(.cds--btn) {
+  min-height: 2rem;
+  width: max-content;
+  white-space: nowrap;
+  padding-inline: 0.75rem;
+}

package/src/billing/dashboard/v2/active-visits.component.tsx

@@ -0,0 +1,102 @@
+// import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+// import React, { useEffect, useState } from 'react';
+// import { getActiveVisits } from '../../billing-claims.resource';
+// import { usePatient, useSession } from '@openmrs/esm-framework';
+// import { type ActiveVisit } from './types';
+// import SendToQueueModal from '../../../registry/modal/send-to-triage/send-to-queue.modal';
+
+// interface ActiveVisitsProps {
+//   billingDate: string;
+// }
+
+// const ActiveVisitsComponent: React.FC<ActiveVisitsProps> = ({ billingDate }) => {
+//   const [activeVisits, setactiveVisits] = useState<ActiveVisit[]>([]);
+//   const [patientUuid, setPatientUuid] = useState<string | null>('');
+//   const [visitUuid, setVisitUuid] = useState<string | null>('');
+//   const [visitTypeUuid, setVisitTypeUuid] = useState('');
+//   const session = useSession();
+
+//   const locationUuid = session.sessionLocation?.uuid;
+//   const getActivevisits = async (locationUuid: string, billingDate: string) => {
+//     try {
+//       const res = await getActiveVisits(locationUuid!, billingDate);
+//       setactiveVisits(res);
+//     } catch (er) {
+//       console.error(er);
+//     }
+//   };
+
+//   useEffect(() => {
+//     getActivevisits(locationUuid!, billingDate);
+//   }, [billingDate, locationUuid]);
+
+//   const handleInitiateClaim = (patientUuid: string, visitTypeUuid: string, visitUuid: string) => {
+//     setPatientUuid(patientUuid);
+//     setVisitTypeUuid(visitTypeUuid);
+//     setVisitUuid(visitUuid);
+//   };
+
+//   function onModalClose({ success }: { success: boolean }): void {
+//     if (success && visitUuid) {
+//       setactiveVisits((visits) => visits.filter((visit) => visit.visit_uuid !== visitUuid));
+//     }
+//     setPatientUuid(null);
+//     setVisitUuid(null);
+//     setVisitTypeUuid('');
+//   }
+//   return (
+//     <>
+//       <Table aria-label="sample table" size="sm">
+//         <TableHead>
+//           <TableRow>
+//             <TableHeader>Name</TableHeader>
+//             <TableHeader>Identifiers</TableHeader>
+//             <TableHeader>Visit Type</TableHeader>
+//             <TableHeader>Payment Method</TableHeader>
+//             <TableHeader>Payment Status</TableHeader>
+//             <TableHeader>Actions</TableHeader>
+//           </TableRow>
+//         </TableHead>
+//         <TableBody>
+//           {activeVisits?.length > 0 ? (
+//             activeVisits?.map((visit, index) => (
+//               <TableRow key={index}>
+//                 <TableCell>{visit.patient_name}</TableCell>
+//                 <TableCell>{visit.identifiers}</TableCell>
+//                 <TableCell>{visit.visit_type}</TableCell>
+//                 <TableCell>{visit.payment_method}</TableCell>
+//                 <TableCell>{visit.payment_status}</TableCell>
+//                 <TableCell>
+//                   {visit.payment_method?.toUpperCase() === 'CASH' && (
+//                     <Button
+//                       size="sm"
+//                       kind="primary"
+//                       onClick={() => handleInitiateClaim(visit.person_uuid, visit.visit_type_uuid, visit.visit_uuid)}
+//                     >
+//                       Start SHA visit
+//                     </Button>
+//                   )}
+//                 </TableCell>
+//               </TableRow>
+//             ))
+//           ) : (
+//             <TableRow>
+//               <TableCell colSpan={6}>No active visits found</TableCell>
+//             </TableRow>
+//           )}
+//         </TableBody>
+//       </Table>
+//       {patientUuid && visitUuid && (
+//         <SendToQueueModal
+//           patientUuid={patientUuid}
+//           visitUuid={visitUuid}
+//           visitTypeUuid={visitTypeUuid}
+//           onModalClose={onModalClose}
+//           addSHAClaimVisit={true}
+//         />
+//       )}
+//     </>
+//   );
+// };
+
+// export default ActiveVisitsComponent;

package/src/billing/dashboard/v2/admissions/admission-requests-tab.component.tsx

@@ -0,0 +1,79 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { DataTableSkeleton } from '@carbon/react';
+import { type BedLayout, type FacilityAdmissionRequest } from '../../../../admissions/types';
+import { fetchFacilityAdmissionRequests, getAdmittedPatientsData } from '../../../../admissions/admissions.resource';
+import AdmissionsRequestList from '../../../../admissions/admission-request-list/admission-request-list';
+import EmptyState from '../shared/empty-state.component';
+import styles from '../facility-bills/facility-bills.component.scss';
+
+interface AdmissionRequestsTabProps {
+  locationUuid: string;
+}
+
+/**
+ * The admission requests list, as a tab of the billing dashboard.
+ *
+ * The list itself is the admissions module's — the same component its own dashboard
+ * renders — so the two can't drift. What this adds is the fetching, which that component
+ * does not do for itself: it takes the requests and the bed layouts as props, because on
+ * the admissions dashboard they are already loaded for the other tabs sharing them.
+ *
+ * The bed layouts are fetched alongside the requests rather than left empty. They are what
+ * the Admit modal offers a bed from, so without them the row's main action opens onto an
+ * empty picker.
+ */
+const AdmissionRequestsTab: React.FC<AdmissionRequestsTabProps> = ({ locationUuid }) => {
+  const [admissionRequests, setAdmissionRequests] = useState<FacilityAdmissionRequest[]>([]);
+  const [bedLayouts, setBedLayouts] = useState<BedLayout[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const load = useCallback(async () => {
+    if (!locationUuid) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    try {
+      // Together: the list is not usable until both have arrived, and they are independent
+      // requests, so waiting on them in sequence would only be slower.
+      const [requests, beds] = await Promise.all([
+        fetchFacilityAdmissionRequests(locationUuid),
+        getAdmittedPatientsData(locationUuid),
+      ]);
+      setAdmissionRequests(requests ?? []);
+      setBedLayouts(beds ?? []);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [locationUuid]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  if (loading) {
+    return (
+      <div className={styles.panel}>
+        <div className={styles.tableCard}>
+          <DataTableSkeleton role="progressbar" showHeader={false} showToolbar={false} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.panel}>
+      {admissionRequests.length ? (
+        // `refresh` is how the list reloads after admitting or cancelling one, so it is
+        // wired to the same fetch rather than to a no-op.
+        <AdmissionsRequestList admissionRequests={admissionRequests} bedLayouts={bedLayouts} refresh={load} />
+      ) : (
+        <EmptyState message="No admission requests at this facility." />
+      )}
+    </div>
+  );
+};
+
+export default AdmissionRequestsTab;