@ampath/esm-dha-workflow-app 4.0.0-next.35 → 4.0.0-next.355

package/src/billing/dashboard/v2/preauth/preauthorizations-tab.component.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import PreauthList from './preauth-list.component';
+import Preauths from '../facility-bills/preauths.component';
+import styles from '../facility-bills/facility-bills.component.scss';
+
+interface PreauthorizationsTabProps {
+  locationUuid: string;
+  billingDate: string;
+  onDateChange?: (value: string) => void;
+}
+
+/**
+ * Preauthorizations dashboard tab:
+ * - Needs raise: queue of interventions still needing preauth (raise from facility bill details)
+ * - Status: live HIE preview / doctor-consent resend (monitoring only)
+ */
+const PreauthorizationsTab: React.FC<PreauthorizationsTabProps> = ({ locationUuid, billingDate, onDateChange }) => {
+  const [subTab, setSubTab] = useState(0);
+  // Carbon keeps both panels in the DOM, so both views used to load on mount — and each
+  // reads GET /pre-auth/preview once per claim, so opening this tab cost two passes over
+  // the day's claims when only one was being looked at. A visited panel stays mounted, so
+  // switching back and forth doesn't refetch.
+  const [visited, setVisited] = useState<Set<number>>(() => new Set([0]));
+  useEffect(() => {
+    setVisited((prev) => (prev.has(subTab) ? prev : new Set(prev).add(subTab)));
+  }, [subTab]);
+
+  return (
+    <div className={styles.panel}>
+      <Tabs selectedIndex={subTab} onChange={({ selectedIndex }) => setSubTab(selectedIndex)}>
+        <TabList aria-label="Preauthorization views" scrollDebounceWait={200}>
+          <Tab>Needs raise</Tab>
+          <Tab>Status</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            {visited.has(0) && (
+              <PreauthList locationUuid={locationUuid} billingDate={billingDate} onDateChange={onDateChange} />
+            )}
+          </TabPanel>
+          <TabPanel>{visited.has(1) && <Preauths locationUuid={locationUuid} billingDate={billingDate} />}</TabPanel>
+        </TabPanels>
+      </Tabs>
+    </div>
+  );
+};
+
+export default PreauthorizationsTab;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type ClaimVisitReponse } from '../types';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+
+interface SHAClaimsTableProps {
+  claimVisits: ClaimVisitReponse[];
+}
+
+const SHAClaimsTable: React.FC<SHAClaimsTableProps> = () => {
+  return (
+    <>
+      <Table aria-label="sha claims" size="lg">
+        <TableHead>
+          <TableRow>
+            <TableHeader>Patient</TableHeader>
+            <TableHeader>CR Number</TableHeader>
+            <TableHeader>Visit Tyoe</TableHeader>
+            <TableHeader>Status</TableHeader>
+            <TableHeader>Date</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell>Load Balancer 1</TableCell>
+            <TableCell>Round robin</TableCell>
+            <TableCell>Starting</TableCell>
+            <TableCell>Test</TableCell>
+            <TableCell>22</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export default SHAClaimsTable;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useFacilityClaimVisits } from '../../../billing-claims.resource';
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import SHAClaimsTable from './sha-claims-table.component';
+
+import styles from './sha-claims.scss';
+
+interface ShaClaimsComponentTabProps {
+  locationUuid: string;
+  billingDate: string;
+}
+const ShaClaimsComponentTab: React.FC<ShaClaimsComponentTabProps> = ({ locationUuid, billingDate }) => {
+  const {
+    claimVisits,
+    loading: claimsLoading,
+    reload: loadClaimVisits,
+  } = useFacilityClaimVisits(locationUuid, billingDate);
+  return (
+    <>
+      <div className={styles.panel}>
+        <Tabs onTabCloseRequest={function Bz() {}}>
+          <TabList scrollDebounceWait={200}>
+            <Tab>Drafts</Tab>
+            <Tab>Submitted</Tab>
+            <Tab>Rejected</Tab>
+            <Tab>Approved</Tab>
+            <Tab>Needs resubmission</Tab>
+            <Tab>Paid</Tab>
+            <Tab>Closed</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <SHAClaimsTable claimVisits={claimVisits} />
+            </TabPanel>
+            <TabPanel>
+              <SHAClaimsTable claimVisits={claimVisits} />
+            </TabPanel>
+            <TabPanel>
+              <SHAClaimsTable claimVisits={claimVisits} />
+            </TabPanel>
+            <TabPanel>
+              <SHAClaimsTable claimVisits={claimVisits} />
+            </TabPanel>
+            <TabPanel>
+              <SHAClaimsTable claimVisits={claimVisits} />
+            </TabPanel>
+            <TabPanel>
+              <SHAClaimsTable claimVisits={claimVisits} />
+            </TabPanel>
+            <TabPanel>
+              <SHAClaimsTable claimVisits={claimVisits} />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </div>
+    </>
+  );
+};
+
+export default ShaClaimsComponentTab;

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

@@ -0,0 +1,8 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.panel {
+  padding: layout.$spacing-05;
+  border: 1px solid $ui-03;
+  background-color: $ui-01;
+}

package/src/billing/dashboard/v2/shared/dash-board-card/dash-board-card.component.scss

@@ -0,0 +1,17 @@
+.statCard{
+    display: flex;
+    flex-direction: column;
+    padding: 5px 5px;
+    justify-content: center;
+    text-align: center;
+    row-gap: 5px;
+    .statTitle{
+        font-size: 16px;
+        color: #525252;
+    }
+    .startVal{
+        font-size: 1.25rem;
+        text-decoration: solid;
+        font-weight: 400;
+    }
+}

package/src/billing/dashboard/v2/shared/dash-board-card/dash-board-card.component.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './dash-board-card.component.scss';
+interface DashboardCardProps {
+  title: string;
+  value: number;
+}
+const DashboardCard: React.FC<DashboardCardProps> = ({ title, value }) => {
+  return (
+    <div className={styles.statCard}>
+      <div className={styles.statTitle}>{title}</div>
+      <div className={styles.startVal}>{value}</div>
+    </div>
+  );
+};
+export default DashboardCard;

package/src/billing/dashboard/v2/shared/empty-state.component.scss

@@ -0,0 +1,24 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@carbon/type';
+
+/* Plain: a centred line where the rows would have been, with no box drawn round it. */
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-07 layout.$spacing-05;
+  text-align: center;
+}
+
+.emptyIcon {
+  color: colors.$gray-40;
+}
+
+.emptyText {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+  margin: 0;
+}

package/src/billing/dashboard/v2/shared/empty-state.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DocumentBlank } from '@carbon/react/icons';
+import styles from './empty-state.component.scss';
+
+/** Neat centred empty state for the billing tables. */
+const EmptyState: React.FC<{ message: string }> = ({ message }) => (
+  <div className={styles.emptyState}>
+    <DocumentBlank size={32} className={styles.emptyIcon} />
+    <p className={styles.emptyText}>{message}</p>
+  </div>
+);
+
+export default EmptyState;

package/src/billing/dashboard/v2/shared/scroll-to-top.component.scss

@@ -0,0 +1,54 @@
+/* Round arrow button that expands on hover/focus to reveal "Scroll to top". Sits
+   above the O3 help ("?") button in the bottom-right corner. */
+.scrollTop {
+  position: fixed;
+  right: 1.5rem;
+  bottom: 5rem;
+  z-index: 900;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 3rem;
+  block-size: 3rem;
+  min-inline-size: 3rem;
+  padding-inline: 0.9375rem;
+  border: none;
+  border-radius: 999px;
+  background: #393939;
+  color: #ffffff;
+  box-shadow: 0 2px 10px rgba(22, 22, 22, 0.25);
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: #4c4c4c;
+  }
+  &:focus-visible {
+    outline: 2px solid #0f62fe;
+    outline-offset: 2px;
+  }
+}
+
+.icon {
+  flex-shrink: 0;
+}
+
+/* Hidden until hover/focus, then slides open beside the arrow. */
+.label {
+  max-inline-size: 0;
+  margin-inline-start: 0;
+  opacity: 0;
+  overflow: hidden;
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: max-inline-size 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
+
+  .scrollTop:hover &,
+  .scrollTop:focus-visible & {
+    max-inline-size: 12rem;
+    margin-inline-start: 0.5rem;
+    opacity: 1;
+  }
+}

package/src/billing/dashboard/v2/shared/scroll-to-top.component.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ArrowUp } from '@carbon/react/icons';
+import styles from './scroll-to-top.component.scss';
+
+// Nearest scrollable ancestor of a node, or null to fall back to the window.
+const getScrollParent = (node: HTMLElement | null): HTMLElement | null => {
+  let el = node?.parentElement ?? null;
+  while (el) {
+    const overflowY = getComputedStyle(el).overflowY;
+    if ((overflowY === 'auto' || overflowY === 'scroll') && el.scrollHeight > el.clientHeight) {
+      return el;
+    }
+    el = el.parentElement;
+  }
+  return null;
+};
+
+/**
+ * A floating "back to top" button, shown once the page (or its scroll container) is
+ * scrolled past `threshold`. Handy on long details pages.
+ */
+const ScrollToTop: React.FC<{ threshold?: number }> = ({ threshold = 400 }) => {
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const scrollerRef = useRef<HTMLElement | Window>(window);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const scroller: HTMLElement | Window = getScrollParent(anchorRef.current) ?? window;
+    scrollerRef.current = scroller;
+    const currentTop = () => (scroller instanceof Window ? scroller.scrollY : scroller.scrollTop);
+    const onScroll = () => setVisible(currentTop() > threshold);
+    scroller.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+    return () => scroller.removeEventListener('scroll', onScroll);
+  }, [threshold]);
+
+  const handleClick = () => {
+    scrollerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <>
+      <div ref={anchorRef} aria-hidden="true" />
+      {visible ? (
+        <button type="button" className={styles.scrollTop} onClick={handleClick} aria-label="Scroll to top" title="Scroll to top">
+          <ArrowUp size={20} className={styles.icon} />
+          <span className={styles.label}>Scroll to top</span>
+        </button>
+      ) : null}
+    </>
+  );
+};
+
+export default ScrollToTop;

package/src/billing/dashboard/v2/shared/table-toolbar.component.scss

@@ -0,0 +1,77 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* Sets its own space above as well as below: the toolbar sits directly under a row of
+   status tabs, and Carbon's tab underline needs clearing before the search field starts,
+   or the two read as one stacked control. Carried here rather than on the tab row so it
+   holds wherever the toolbar is used, tabs above it or not. */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  box-sizing: border-box;
+  margin-block: layout.$spacing-05 layout.$spacing-04;
+}
+
+/* Search : date width ratio of 2 : 1 */
+.search {
+  flex: 2 1 0;
+  min-inline-size: 0;
+}
+
+.search :global(.cds--search),
+.search :global(.cds--search-input) {
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+/* Give the search a full border so it reads as a distinct field. */
+.search :global(.cds--search-input) {
+  border: 1px solid $ui-03;
+}
+.search :global(.cds--search-input:focus) {
+  outline: 2px solid $interactive-01;
+  outline-offset: -2px;
+}
+
+.date {
+  flex: 1 1 0;
+  min-inline-size: 0;
+  display: flex;
+}
+
+/* Carbon hard-sets the single date input to 288px. Force the whole chain —
+   from the date-picker element down to the input — to fill the 1/3 flex slot. */
+.date :global(.cds--date-picker) {
+  flex: 1 1 auto;
+  inline-size: 100% !important;
+  min-inline-size: 0 !important;
+}
+
+.date :global(.cds--date-picker-container) {
+  display: flex;
+  flex: 1 1 auto;
+  inline-size: 100% !important;
+  min-inline-size: 0 !important;
+}
+
+.date :global(.cds--date-picker-input__wrapper),
+.date :global(.cds--date-picker-input__wrapper > *),
+.date :global(.cds--date-picker--single .cds--date-picker__input) {
+  inline-size: 100% !important;
+  max-inline-size: 100% !important;
+  min-inline-size: 0 !important;
+}
+
+@media (max-width: 34rem) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .date {
+    flex: 1 1 auto;
+  }
+}

package/src/billing/dashboard/v2/shared/table-toolbar.component.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { DatePicker, DatePickerInput, Search } from '@carbon/react';
+import styles from './table-toolbar.component.scss';
+
+interface TableToolbarProps {
+  id: string;
+  search: string;
+  onSearch: (value: string) => void;
+  searchPlaceholder?: string;
+  date?: string;
+  onDate?: (value: string) => void;
+}
+
+/** Search (2/3 width) + a date filter (1/3 width) on the same row above a table. */
+const TableToolbar: React.FC<TableToolbarProps> = ({
+  id,
+  search,
+  onSearch,
+  searchPlaceholder = 'Search…',
+  date,
+  onDate,
+}) => (
+  <div className={styles.toolbar}>
+    <Search
+      id={`${id}-search`}
+      className={styles.search}
+      size="md"
+      labelText="Search"
+      placeholder={searchPlaceholder}
+      value={search}
+      onChange={(e) => onSearch(e.target.value)}
+      onClear={() => onSearch('')}
+    />
+    {onDate ? (
+      <DatePicker
+        className={styles.date}
+        datePickerType="single"
+        dateFormat="Y-m-d"
+        value={date || undefined}
+        onChange={(d) => onDate(d?.[0] ? new Date(d[0]).toLocaleDateString('en-CA') : '')}
+      >
+        <DatePickerInput id={`${id}-date`} size="md" labelText="" placeholder="yyyy-mm-dd" />
+      </DatePicker>
+    ) : null}
+  </div>
+);
+
+export default TableToolbar;