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

package/src/billing/dashboard/v2/billing-claims-dashboard.component.scss

@@ -0,0 +1,209 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* Marks a tab as having an explanation behind it. This is the Carbon Tooltip's own popover
+   container, which is a block by default and would push the icon onto a line of its own
+   inside the tab's label. */
+.tabHint {
+  display: inline-flex;
+  align-items: center;
+  margin-left: layout.$spacing-02;
+  vertical-align: middle;
+}
+
+/* Carbon wraps the trigger in a div of its own between the container and the icon; it has
+   to carry the inline layout through or the same wrapping happens one level down. */
+.tabHint :global(.cds--tooltip-trigger__wrapper) {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* The bubble that appears on hover.
+ *
+ * Carbon caps tooltip text at 288px, which turns a couple of sentences into a narrow
+ * column — widened to 22rem so a hint sets as three or four full lines.
+ *
+ * `overflow-wrap: break-word` is Carbon's default and made sense at 288px, where a long
+ * word could exceed the whole bubble. At this width nothing does, and all it achieves is
+ * hyphen-less breaks mid-word; `normal` keeps words whole. `text-wrap: pretty` then evens
+ * the rag and stops the last line being a single orphaned word.
+ *
+ * The height cap and scrollbar that were here are gone with the long copy that needed
+ * them — and `overflow-y: auto` computes `overflow-x` to `auto` as well, which was a
+ * clipping risk for no benefit now the hints are short. */
+.tabHint :global(.cds--tooltip-content) {
+  max-inline-size: 22rem;
+  padding-block: layout.$spacing-04;
+  padding-inline: layout.$spacing-05;
+  text-align: start;
+  line-height: 1.45;
+  overflow-wrap: normal;
+  text-wrap: pretty;
+}
+
+/* The icon itself. `cursor: help` is what says it is hoverable — there is no other
+   affordance on a mark that can't be clicked, and it darkens on hover so the pointer
+   landing on it is confirmed before the bubble has appeared. */
+.tabHintIcon {
+  display: inline-flex;
+  align-items: center;
+  color: colors.$gray-50;
+  cursor: help;
+  transition: color 70ms ease-out;
+
+  &:hover {
+    color: colors.$gray-80;
+  }
+}
+
+/* Header: icon + title + subtitle (matches the facility dashboard header). */
+.hwrSection {
+  width: 100%;
+  margin-bottom: layout.$spacing-04;
+  padding-bottom: layout.$spacing-04;
+  border-bottom: 1px solid $ui-03;
+}
+
+.bcHeader {
+  display: flex;
+  align-items: flex-start;
+  column-gap: layout.$spacing-04;
+  padding-bottom: layout.$spacing-05;
+  border-bottom: 1px solid $ui-03;
+}
+
+/* The icon sits beside the title, unboxed — no disc behind it. */
+.bcHeaderIcon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: colors.$blue-60;
+}
+
+/* Top summary: at-a-glance counts (shared MetricsCard style, as on the lab dashboard). */
+.summaryRow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  gap: layout.$spacing-04;
+  width: 100%;
+  padding-bottom: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+  border-bottom: 1px solid $ui-03;
+}
+
+/* Reset the button wrapper so the MetricsCard stays clickable, and keep the card compact. */
+.metricButton {
+  all: unset;
+  display: block;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--brand-03);
+    outline-offset: 1px;
+  }
+
+  :global(.cds--tile) {
+    min-height: 0;
+    padding: layout.$spacing-03 layout.$spacing-05;
+
+    /* Tighten the header row — Carbon forces a 2rem-tall label row. */
+    > div:first-child {
+      margin-bottom: layout.$spacing-02;
+
+      > div {
+        height: auto;
+      }
+    }
+
+    /* Slimmer value. */
+    p {
+      @include type.type-style('heading-03');
+    }
+  }
+}
+
+.bcTitle {
+  @include type.type-style('heading-03');
+  color: $ui-05;
+  margin: 0 0 layout.$spacing-02;
+}
+
+.bcSubtitle {
+  @include type.type-style('body-01');
+  color: $text-02;
+  margin: 0;
+}
+
+/* Page inset on the spacing scale rather than a percentage: 2% was ~28px on a desktop and
+   ~20px on a laptop, so the dashboard sat at a different distance from the edge on every
+   screen and matched none of the spacing inside it. */
+.bcLayout {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: layout.$spacing-06;
+    row-gap: layout.$spacing-05;
+
+    .bcContent {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        row-gap: layout.$spacing-05;
+
+        .bcContentFilters {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+        }
+
+        .bcContentTabs {
+            position: relative;
+
+            // Single date filter aligned to the right of the tab bar, on the
+            // same row as the Pending clearance / Bills / Claims tabs.
+            .tabRowDate {
+                position: absolute;
+                top: 0;
+                right: 0;
+                z-index: 2;
+            }
+
+            // Remove the default Carbon tab-panel padding so the bordered panel
+            // content (e.g. the clearance card) sits flush against the
+            // Pending clearance / Bills / Claims tab bar on all sides.
+            :global(.cds--tab-content) {
+                padding-top: 0;
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+
+        // Bordered card for the Bills panel so it matches the Pending clearance
+        // (clearance) and Claims panels.
+        .panelCard {
+            padding: layout.$spacing-05;
+            border: 1px solid $ui-03;
+            background-color: $ui-01;
+        }
+    }
+}
+
+.tab {
+    min-width: 8.875rem;
+
+    &:active,
+    &:focus {
+        outline: 2px solid var(--brand-03) !important;
+    }
+
+    &[aria-selected='true'] {
+        box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+    }
+}
+/* Hides the tab bar while a bill's details take over the page (the panels stay
+   mounted, so FacilityBills keeps its state). */
+.hiddenTabList {
+    display: none;
+}

package/src/billing/dashboard/v2/billing-claims-dashboard.component.tsx

@@ -0,0 +1,347 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import styles from './billing-claims-dashboard.component.scss';
+import { DatePicker, DatePickerInput, Tab, TabList, TabPanel, TabPanels, Tabs, Tooltip } from '@carbon/react';
+import { Information, Wallet } from '@carbon/react/icons';
+import FacilityBills, {
+  CASH_PAYER_TAB,
+  resetFacilityBillsFilters,
+  SHA_PAYER_TAB,
+} from './facility-bills/facility-bills.component';
+import { useSession } from '@openmrs/esm-framework';
+import ActiveVisits from './active-visits/active-visits.component';
+import Clearance from './clearance/clearance.component';
+import { billBalance, getPayableBills } from './cash-checklist/cash-checklist.resource';
+import { getClearanceCounts } from '../../../shared/services/consultation-clearance.resource';
+import { claimVisitToken, useFacilityClaimVisits, useLiveClaimStates } from '../../billing-claims.resource';
+import { CLAIM_BUCKETS } from './facility-bills/claim-status';
+import {
+  MetricsCard,
+  MetricsCardHeader,
+  MetricsCardBody,
+  MetricsCardItem,
+} from '../../../service-queues/metrics/metrics-cards/metrics-card.component';
+import FacilityAndWorkerSlot from '../../../shared/ui/facility-worker-slot/facility-worker.component-slot.component';
+import PreauthorizationsTab from './preauth/preauthorizations-tab.component';
+import AdmissionRequestsTab from './admissions/admission-requests-tab.component';
+import FacilityBillsV3 from '../v3/facility-bills/facility-bills.component';
+interface billingClaimsDashboardProps {}
+
+const today = () => new Date().toLocaleDateString('en-CA');
+
+/* The dashboard's own tabs, in order. Named because the summary tiles navigate by index,
+   and a bare number stopped saying which tab it meant once SHA claims was inserted in the
+   middle of the row. */
+const TAB_PENDING_CLEARANCE = 0;
+const TAB_FACILITY_BILLS = 1;
+const TAB_SHA_CLAIMS = 2;
+
+/* What each tab is for, on the tab itself. They were paragraphs standing above the tables
+   — three lines of standing copy on a page opened dozens of times a day, read once.
+   Kept to two short sentences each: what the tab lists, then what you do there. A tooltip
+   is capped at a few hundred pixels wide, so a paragraph in one becomes a tall column that
+   runs off the screen rather than something anyone reads on the way past. */
+const PENDING_HINT =
+  'Visits that have started but are not in a service queue yet. Send each patient to triage, then mark their consultation fee paid to release them to be seen.';
+const BILLS_HINT =
+  'Bills settled at the cash point, for the selected date. Open a patient for the itemised bill, payments received and the balance outstanding.';
+const CLAIMS_HINT =
+  'SHA claims for the selected date, grouped by status. Open one to check its diagnoses, interventions and invoices, or to submit or close it.';
+const PREAUTH_HINT =
+  'Preauths for the selected date. Needs raise lists items still waiting for one; Status shows their live position at SHA and can resend doctor consent.';
+const ADMISSIONS_HINT =
+  'Patients a clinician has asked to admit at this facility. Admit one to a bed, or start the SHA claim for the inpatient visit it opens.';
+
+/**
+ * An explanation hung off a tab's label.
+ *
+ * A `title` prop on the `Tab` itself is dropped: Carbon spreads `rest` onto the button and
+ * then sets `title: children` afterwards, so the tab's own label always wins. A `title` on
+ * an inner span does work, but a native tooltip waits about a second before appearing,
+ * which is long enough that people stop expecting one.
+ *
+ * So the hint is a Carbon `Tooltip` with its delay taken off. It nests inside the tab
+ * because Carbon's Tooltip does not inject a trigger of its own — it clones event handlers
+ * and aria attributes onto whatever child it is given, and notably not `tabIndex`, so the
+ * icon stays inert and the tab keeps sole ownership of focus and keyboard handling.
+ *
+ * `autoAlign` matters here: the tab list scrolls (`overflow-x: auto`), which would clip a
+ * statically positioned bubble. Floating-ui places it outside that clipping context — the
+ * same thing Carbon does for its own overflowing-tab-label tooltip.
+ */
+const TabHint: React.FC<{ text: string }> = ({ text }) => (
+  <Tooltip label={text} align="bottom" enterDelayMs={0} leaveDelayMs={0} autoAlign className={styles.tabHint}>
+    <span className={styles.tabHintIcon}>
+      <Information size={16} />
+    </span>
+  </Tooltip>
+);
+
+// The chosen filter date is held at module scope, not in component state alone, so it
+// survives this dashboard unmounting and remounting while the user stays inside the
+// billing route — opening a bill's invoice or the claim workspace and coming back.
+// Deliberately not sessionStorage: a page reload should drop it and start on today.
+let lastSelectedDate: string | null = null;
+// Same reasoning for the open tab: opening a claim now navigates to the claim's own
+// page, which unmounts this dashboard, and the breadcrumb back should return to the tab
+// the claim was picked from rather than the first one.
+let lastSelectedTab: number | null = null;
+
+/**
+ * Forget the remembered date, tab and bill filters so the dashboard opens fresh. Called
+ * when the user leaves the billing route altogether (see BillingRoot) or re-clicks the
+ * "Accounting" side-nav link, both of which are a request for a fresh view.
+ */
+/**
+ * The date the dashboard is currently filtered to, or null when it has been forgotten.
+ * The claim page uses it to look up a claim on the day it was being read before falling
+ * back to searching the whole location.
+ */
+export function rememberedBillingDate(): string | null {
+  return lastSelectedDate;
+}
+
+export function resetBillingDateFilter() {
+  lastSelectedDate = null;
+  lastSelectedTab = null;
+  resetFacilityBillsFilters();
+}
+
+const BillingClaimsDashboard: React.FC<billingClaimsDashboardProps> = () => {
+  const session = useSession();
+  const locationUuid = session.sessionLocation?.uuid ?? '';
+  const [billingDate, setBillingDate] = useState<string>(() => lastSelectedDate ?? today());
+  const [awaiting, setAwaiting] = useState(0);
+  const [cashDue, setCashDue] = useState(0);
+  const [selectedTab, setSelectedTab] = useState(() => lastSelectedTab ?? 0);
+  const [billsDetailsOpen, setBillsDetailsOpen] = useState(false);
+  // Which status bucket the bills tab should open on, with a nonce so clicking the same
+  // tile twice still navigates. The payer is no longer part of it: each payer is its own
+  // dashboard tab now, so `tab` alone says which list a tile means.
+  const [billsNav, setBillsNav] = useState<{ statusKey?: string; nonce: number }>({ nonce: 0 });
+  // Which sub-tab to open, with a nonce so repeat clicks still re-navigate.
+  const [clearanceNav, setClearanceNav] = useState<{ key?: string; nonce: number }>({ nonce: 0 });
+  // The SHA claims tab has its own, since it is a separate instance of FacilityBills and
+  // sharing billsNav would send both lists to the same bucket.
+  const [claimsNav, setClaimsNav] = useState<{ statusKey?: string; nonce: number }>({ nonce: 0 });
+
+  useEffect(() => {
+    lastSelectedTab = selectedTab;
+  }, [selectedTab]);
+
+  useEffect(() => {
+    if (locationUuid) {
+      getClearanceCounts(locationUuid).then((c) => setAwaiting(c.awaiting));
+    }
+    getPayableBills(locationUuid).then((bills) => setCashDue(bills.filter((b) => billBalance(b) > 0).length));
+  }, [locationUuid]);
+
+  // The claim tiles count the same claims the bills tab lists, by the same live states.
+  // They used to read a demo store, so they reported fixtures rather than this facility's
+  // claims. The claim-state cache is shared, so counting here costs no extra HIE calls
+  // beyond the ones the bills tab already makes.
+  const { claimVisits, loading: claimVisitsLoading } = useFacilityClaimVisits(locationUuid, billingDate);
+  const claimTokens = useMemo(() => claimVisits.map(claimVisitToken).filter(Boolean), [claimVisits]);
+  const { states: liveClaimStates, settled: claimStatesSettled } = useLiveClaimStates(claimTokens, locationUuid);
+
+  // Held back until every state is confirmed: a count off the stored states would name
+  // claims as drafts that were submitted days ago.
+  const claimCountsReady = !claimVisitsLoading && claimStatesSettled;
+  const claimCounts = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const bucket of CLAIM_BUCKETS) {
+      const statuses = new Set(bucket.statuses.map((s) => s.toUpperCase()));
+      counts[bucket.key] = claimVisits.filter((cv) => {
+        const state = (liveClaimStates[claimVisitToken(cv)] || cv.visitResponse?.workflow_state || '')
+          .trim()
+          .toUpperCase();
+        return statuses.has(state);
+      }).length;
+    }
+    return counts;
+  }, [claimVisits, liveClaimStates]);
+
+  const claimTileValue = (bucketKey: string) => (claimCountsReady ? (claimCounts[bucketKey] ?? 0) : 0);
+
+  const summary: {
+    key: string;
+    label: string;
+    unit: string;
+    value: number;
+    tab: number;
+    color?: 'red';
+    clearKey?: string;
+    billsStatusKey?: string;
+    claimsStatusKey?: string;
+  }[] = [
+    {
+      key: 'awaiting',
+      label: 'Awaiting clearance',
+      unit: 'Patients',
+      value: awaiting,
+      tab: TAB_PENDING_CLEARANCE,
+      clearKey: 'pending',
+    },
+    {
+      key: 'cashdue',
+      label: 'Facility bills',
+      unit: 'Patients',
+      value: cashDue,
+      tab: TAB_FACILITY_BILLS,
+      // The tile counts bills still owing, so it lands on the bucket holding them rather
+      // than on whichever one was last being read.
+      billsStatusKey: 'pending',
+    },
+    // Straight to the bucket being counted: the SHA claims tab, Drafts / Rejected.
+    {
+      key: 'draft',
+      label: 'Draft claims',
+      unit: 'Claims',
+      value: claimTileValue('draft'),
+      tab: TAB_SHA_CLAIMS,
+      claimsStatusKey: 'draft',
+    },
+    {
+      key: 'rejected',
+      label: 'Rejected claims',
+      unit: 'Claims',
+      value: claimTileValue('rejected'),
+      color: 'red',
+      tab: TAB_SHA_CLAIMS,
+      claimsStatusKey: 'rejected',
+    },
+  ];
+
+  const handleTileClick = (s: {
+    tab: number;
+    clearKey?: string;
+    billsStatusKey?: string;
+    claimsStatusKey?: string;
+  }) => {
+    setSelectedTab(s.tab);
+    if (s.clearKey) {
+      setClearanceNav((p) => ({ key: s.clearKey, nonce: p.nonce + 1 }));
+    }
+    if (s.billsStatusKey) {
+      setBillsNav((p) => ({ statusKey: s.billsStatusKey, nonce: p.nonce + 1 }));
+    }
+    if (s.claimsStatusKey) {
+      setClaimsNav((p) => ({ statusKey: s.claimsStatusKey, nonce: p.nonce + 1 }));
+    }
+  };
+
+  const handleDateChange = (value: string) => {
+    const next = value || today();
+    lastSelectedDate = next;
+    setBillingDate(next);
+  };
+  return (
+    <>
+      <div className={styles.bcLayout}>
+        <div className={styles.bcHeader}>
+          <span className={styles.bcHeaderIcon}>
+            <Wallet size={24} />
+          </span>
+          <div className={styles.bcHeaderTitle}>
+            <h3 className={styles.bcTitle}>Billing &amp; Claims</h3>
+          </div>
+        </div>
+        <div className={styles.summaryRow}>
+          {summary.map((s) => (
+            <button key={s.key} type="button" className={styles.metricButton} onClick={() => handleTileClick(s)}>
+              <MetricsCard>
+                <MetricsCardHeader title={s.label} />
+                <MetricsCardBody>
+                  <MetricsCardItem label={s.unit} value={s.value ? s.value : '--'} color={s.color} />
+                </MetricsCardBody>
+              </MetricsCard>
+            </button>
+          ))}
+        </div>
+        <div className={styles.bcContent}>
+          <div className={styles.bcContentTabs}>
+            <DatePicker
+              className={styles.tabRowDate}
+              datePickerType="single"
+              dateFormat="Y-m-d"
+              value={billingDate}
+              maxDate={today()}
+              onChange={(dates) => handleDateChange(dates?.[0] ? (dates[0] as Date).toLocaleDateString('en-CA') : '')}
+            >
+              <DatePickerInput id="billing-date" labelText="" placeholder="yyyy-mm-dd" size="sm" />
+            </DatePicker>
+            <Tabs selectedIndex={selectedTab} onChange={({ selectedIndex }) => setSelectedTab(selectedIndex)}>
+              {/* Tab list hidden while a bill's details are open, but the panels stay
+                  mounted so FacilityBills keeps its selected patient and fetched data. */}
+              <TabList scrollDebounceWait={200}>
+                <Tab>
+                  Pending clearance
+                  <TabHint text={PENDING_HINT} />
+                </Tab>
+                <Tab>
+                  Facility bills
+                  <TabHint text={BILLS_HINT} />
+                </Tab>
+                <Tab>
+                  SHA claims
+                  <TabHint text={CLAIMS_HINT} />
+                </Tab>
+                <Tab>
+                  Preauthorizations
+                  <TabHint text={PREAUTH_HINT} />
+                </Tab>
+                {/* <Tab>Preauth List</Tab> */}
+                {/* <Tab>Claims</Tab> */}
+                <Tab>
+                  Admission Requests
+                  <TabHint text={ADMISSIONS_HINT} />
+                </Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <Clearance
+                    // The paragraph that introduced this list now hangs off the tab that
+                    // opens it — see PENDING_HINT in Clearance.
+                    pendingTab={<ActiveVisits date={billingDate} />}
+                    initialTab={clearanceNav.key}
+                    navNonce={clearanceNav.nonce}
+                    date={billingDate}
+                  />
+                </TabPanel>
+                <TabPanel>
+                 <FacilityBillsV3 locationUuid={locationUuid} billingDate={billingDate} />
+                </TabPanel>
+                <TabPanel>
+                  {/* The same table on the SHA payer. It was a sub-tab inside Facility
+                      bills; claims are read often enough, and are enough their own thing,
+                      to be reached in one click rather than two. */}
+                  <FacilityBills
+                    locationUuid={locationUuid}
+                    billingDate={billingDate}
+                    payerTab={SHA_PAYER_TAB}
+                    navStatusKey={claimsNav.statusKey}
+                    navNonce={claimsNav.nonce}
+                  />
+                </TabPanel>
+                <TabPanel>
+                  <PreauthorizationsTab
+                    locationUuid={locationUuid}
+                    billingDate={billingDate}
+                    onDateChange={handleDateChange}
+                  />
+                </TabPanel>
+                <TabPanel>
+                  {/* This tab had no panel at all — five tabs against four panels, so
+                      selecting it showed the preauth list or nothing depending on how
+                      Carbon indexed them. */}
+                  <AdmissionRequestsTab locationUuid={locationUuid} />
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default BillingClaimsDashboard;

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;
+}