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

package/src/billing/dashboard/v2/claim-visits/claim-visit-details/claim-details-by-token.component.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import ClaimVisitDetails from './claim-visit-details.component';
+import ClaimDetailsSkeleton from '../../patient-bill-details/claim-details/claim-details-skeleton.component';
+import EmptyState from '../../shared/empty-state.component';
+import {
+  fetchMaternityDiagnosis,
+  fetchPatientDiagnosis,
+  fetchPatientEncounterDiagnosis,
+  useProviderClaimPreview,
+} from '../../../../billing-claims.resource';
+import { type AmrsMaternityDiagnosisDto, type AmrsVisitDiagnosisDto, type AmrsVisitDiagnosis } from '../../../../types';
+import { showSnackbar } from '@openmrs/esm-framework';
+
+interface claimDetailsByTokenProps {
+  /** The claim's consent token — its authorization code on the claims endpoints. */
+  consentToken: string;
+  locationUuid: string;
+  patientUuid?: string;
+  billingDate?: string;
+}
+
+/**
+ * A claim's details loaded from its consent token alone.
+ *
+ * For callers holding a claim *listing* rather than a claim: the SHA claims table and
+ * the claims-accounting list both know the token and nothing else. Everything shown here
+ * comes from the live claim preview, so unlike the stored copy in /claims-visit its state
+ * is current the moment it renders.
+ */
+const ClaimDetailsByToken: React.FC<claimDetailsByTokenProps> = ({
+  consentToken,
+  locationUuid,
+  patientUuid,
+  billingDate,
+}) => {
+  const { claimVisit, isLoading, isValidating, error } = useProviderClaimPreview(consentToken, locationUuid);
+  const [encounterDiagnosis, setEncounterDiagnosis] = useState<AmrsVisitDiagnosis[]>([]);
+  const [visitDiagnosis, setVisitDiagnosis] = useState<AmrsVisitDiagnosis[]>([]);
+  const [maternityDiagnosis, setMaternityDiagnosis] = useState<AmrsVisitDiagnosis[]>([]);
+  const patientAmrsVisitDiagnosis = useMemo(
+    () => [...visitDiagnosis, ...maternityDiagnosis, ...encounterDiagnosis],
+    [visitDiagnosis, maternityDiagnosis, encounterDiagnosis],
+  );
+
+  const [visitDiagnosisLoading, setVisitDiagnosisLoading] = useState<boolean>(true);
+  const [maternityDiagnosisLoading, setMaternityDiagnosisLoading] = useState<boolean>(true);
+  const [encounterDiagnosisLoading, setEncounterDiagnosisLoading] = useState<boolean>(true);
+  const diagnosisLoading = visitDiagnosisLoading || maternityDiagnosisLoading || encounterDiagnosisLoading;
+
+  useEffect(() => {
+    if (locationUuid && patientUuid && billingDate) {
+      getPatientAmrsVisitDiagnosis();
+      getPatientAmrsMaternityDiagnosis();
+      getPatientAmrsEncounterDiagnosis();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [locationUuid, patientUuid, billingDate]);
+
+  async function getPatientAmrsVisitDiagnosis() {
+    setVisitDiagnosisLoading(true);
+    const amrsVisitDiagnosisPayload = getPatientAmrsVisitDiagnosisPayload();
+    try {
+      const resp = await fetchPatientDiagnosis(amrsVisitDiagnosisPayload);
+      setVisitDiagnosis(resp ?? []);
+    } catch (error) {
+      showSnackbar({
+        title: 'Error fetching patient diagnosis',
+        kind: 'error',
+        subtitle: 'An error occurred while fetching the patient diagnosis',
+      });
+    } finally {
+      setVisitDiagnosisLoading(false);
+    }
+  }
+  async function getPatientAmrsMaternityDiagnosis() {
+    setMaternityDiagnosisLoading(true);
+    const amrsMaternityDiagnosisPayload = getPatientAmrsMaternityDiagnosisPayload();
+    try {
+      const resp: any = await fetchMaternityDiagnosis(amrsMaternityDiagnosisPayload);
+      const results = (resp ?? [])
+        .filter((r) => r?.uuid != null)
+        .map((v) => ({ ...v, practitioner_identifier_type: 'National ID' }));
+      setMaternityDiagnosis(results);
+    } catch (error) {
+      showSnackbar({
+        title: 'Error fetching patient maternity diagnosis',
+        kind: 'error',
+        subtitle: 'An error occurred while fetching the patient maternity diagnosis',
+      });
+    } finally {
+      setMaternityDiagnosisLoading(false);
+    }
+  }
+  async function getPatientAmrsEncounterDiagnosis() {
+    setEncounterDiagnosisLoading(true);
+    const amrsMaternityDiagnosisPayload = getPatientAmrsVisitDiagnosisPayload();
+    try {
+      const resp: any = await fetchPatientEncounterDiagnosis(amrsMaternityDiagnosisPayload);
+      const results = (resp ?? []).filter((r) => r?.uuid != null).map((v) => ({ ...v }));
+      setEncounterDiagnosis(results);
+    } catch (error) {
+      showSnackbar({
+        title: 'Error fetching patient encounter diagnosis',
+        kind: 'error',
+        subtitle: 'An error occurred while fetching the patient encounter diagnosis',
+      });
+    } finally {
+      setEncounterDiagnosisLoading(false);
+    }
+  }
+  function getPatientAmrsVisitDiagnosisPayload(): AmrsVisitDiagnosisDto {
+    return {
+      patientUuid: patientUuid,
+      visitDate: billingDate,
+      locationUuid: locationUuid,
+    };
+  }
+  function getPatientAmrsMaternityDiagnosisPayload(): AmrsMaternityDiagnosisDto {
+    return {
+      patientUuid: patientUuid,
+      billingDate: billingDate,
+    };
+  }
+
+  // SWR keeps serving the previously opened claim while the next one loads, so a preview
+  // only counts as this claim's when its authorization code is the token asked for.
+  // Without the check, opening a second claim shows the first one's details as though
+  // they were this claim's.
+  const wantedToken = (consentToken ?? '').trim().toUpperCase();
+  const claim =
+    wantedToken && (claimVisit?.authorization_code ?? '').trim().toUpperCase() === wantedToken ? claimVisit : undefined;
+
+  if (claim) {
+    return <ClaimVisitDetails claimsVisit={claim} locationUuid={locationUuid} claimRefreshing={isValidating} />;
+  }
+  if (isLoading || isValidating) {
+    return <ClaimDetailsSkeleton />;
+  }
+  return (
+    <EmptyState
+      message={
+        error
+          ? 'This claim couldn’t be loaded. Check your connection and try again.'
+          : 'No claim details were returned for this visit.'
+      }
+    />
+  );
+};
+
+export default ClaimDetailsByToken;

package/src/billing/dashboard/v2/claim-visits/claim-visit-details/claim-details-page.component.scss

@@ -0,0 +1,13 @@
+@use '@carbon/layout';
+
+/* The claim now has its own route, so it no longer sits inside the dashboard's padded
+   layout — it insets itself by the same amount instead, and the page doesn't start hard
+   against the viewport edge. The amount has to stay in step with `.bcLayout`: navigating
+   from the dashboard to a claim and back should not shift the content sideways. */
+.page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: layout.$spacing-06;
+  row-gap: layout.$spacing-05;
+}

package/src/billing/dashboard/v2/claim-visits/claim-visit-details/claim-details-page.component.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useState } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { Breadcrumb, BreadcrumbItem, Button } from '@carbon/react';
+import { Renew } from '@carbon/react/icons';
+import { useSession } from '@openmrs/esm-framework';
+import ClaimDetailsByToken from './claim-details-by-token.component';
+import ClaimDetailsSkeleton from '../../patient-bill-details/claim-details/claim-details-skeleton.component';
+import EmptyState from '../../shared/empty-state.component';
+import { findClaimVisitByGuid, useInvalidateProviderClaimPreview } from '../../../../billing-claims.resource';
+import { rememberedBillingDate } from '../../billing-claims-dashboard.component';
+import styles from '../../facility-bills/facility-bills.component.scss';
+import pageStyles from './claim-details-page.component.scss';
+
+/**
+ * Resolve the claim id in the URL to the consent token its details are fetched with.
+ *
+ * Coming from the list, the token travels in router state and nothing is fetched. On a
+ * cold open — a pasted link, a reload — the id is looked up against the claims of this
+ * location. An id that resolves to nothing is treated as a token itself, which is what
+ * makes the handful of rows carrying no guid still openable.
+ */
+function useClaimConsentToken(claimId: string, locationUuid: string, seedToken?: string) {
+  const [token, setToken] = useState<string>(seedToken ?? '');
+  const [resolving, setResolving] = useState<boolean>(!seedToken);
+
+  useEffect(() => {
+    if (seedToken) {
+      setToken(seedToken);
+      setResolving(false);
+      return;
+    }
+    if (!claimId || !locationUuid) {
+      setResolving(false);
+      return;
+    }
+    let cancelled = false;
+    setResolving(true);
+    findClaimVisitByGuid(claimId, locationUuid, rememberedBillingDate() ?? undefined)
+      .then((claimVisit) => {
+        if (cancelled) {
+          return;
+        }
+        setToken((claimVisit?.authorizationCode || claimVisit?.visitResponse?.authorization_code || claimId).trim());
+        setResolving(false);
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setToken(claimId);
+          setResolving(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [claimId, locationUuid, seedToken]);
+
+  return { token, resolving };
+}
+
+/**
+ * A claim on its own page, addressed by its authorization guid. Opening a claim used to
+ * swap the dashboard's contents in place, which left the claim unreachable by URL and
+ * made the browser's Back button leave billing altogether. Here the id is in the path,
+ * so a claim can be linked to and reloaded, and Back returns to the list.
+ */
+const ClaimDetailsPage: React.FC = () => {
+  const { claimId } = useParams<{ claimId: string }>();
+  const navigate = useNavigate();
+  const routerLocation = useLocation();
+  const session = useSession();
+  const locationUuid = session?.sessionLocation?.uuid ?? '';
+  const invalidateProviderClaimPreview = useInvalidateProviderClaimPreview();
+
+  // Ids are path-encoded on the way in; a raw one would break on any character the path
+  // reserves.
+  const id = decodeURIComponent(claimId ?? '').trim();
+  const seedToken = (routerLocation.state as { consentToken?: string } | null)?.consentToken;
+  const { token, resolving } = useClaimConsentToken(id, locationUuid, seedToken);
+
+  return (
+    <div className={`${pageStyles.page} ${styles.detailsView}`}>
+      <div className={styles.detailsHeader}>
+        <Breadcrumb noTrailingSlash className={styles.breadcrumb}>
+          <BreadcrumbItem>
+            {/* Back to the dashboard, which reopens on the tab and status bucket the
+                claim was picked from. */}
+            <button type="button" className={styles.breadcrumbLink} onClick={() => navigate('/')}>
+              Facility bills
+            </button>
+          </BreadcrumbItem>
+          <BreadcrumbItem isCurrentPage>Claim details</BreadcrumbItem>
+        </Breadcrumb>
+        {token ? (
+          <Button
+            kind="tertiary"
+            size="sm"
+            renderIcon={Renew}
+            iconDescription="Reload"
+            onClick={invalidateProviderClaimPreview}
+          >
+            Reload Claim
+          </Button>
+        ) : null}
+      </div>
+      {resolving ? (
+        <ClaimDetailsSkeleton />
+      ) : token ? (
+        <ClaimDetailsByToken consentToken={token} locationUuid={locationUuid} />
+      ) : (
+        <EmptyState message="No claim was named in this address." />
+      )}
+    </div>
+  );
+};
+
+export default ClaimDetailsPage;

package/src/billing/dashboard/v2/claim-visits/claim-visit-details/claim-visit-details.component.scss

@@ -0,0 +1,338 @@
+/* No own padding — the containing block body (page) or ModalBody (modal) already
+   provides it, so the content lines up with the Bill Details side. */
+.cvLayout {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+/* ---- Header ---- */
+/* Who the claim is for on the left, what it comes to on the right — the two things the
+   page is opened to read, on one line. Spans the full width: it names the whole page, not
+   the column of tables under it. The actions that used to sit at this right are in the
+   rail now, above the history they follow from.
+
+   No rule beneath it: the facts strip below is the rest of the same statement about what
+   this claim is, and a line across the two only broke it in half. The first section's own
+   rule is where the claim's contents start. */
+.cvHeader {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem 1.5rem;
+}
+/* Who the claim is for: the name at its own weight over the number they are filed
+   under. Everything else that used to trail this line is a labelled fact in the strip
+   below. */
+.cvHeaderText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.claimPatientSub {
+  font-size: 0.8125rem;
+  color: #6f6f6f;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+/* ---- Rail actions ---- */
+/* Stacked and full-width rather than a row of two: the rail is 16rem, which is not enough
+   for two side-by-side buttons, and stacking gives each its whole width so neither label
+   truncates. Submit leads — it is what the page is usually open to do. */
+.railActions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  /* The rule sits under them, not over: they lead the rail, so what it separates them
+     from is the history below. */
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid #e0e0e0;
+
+  /* Carbon caps buttons at 20rem and sizes them to their label; in a column each should
+     fill the rail instead, so the two line up as one block. */
+  :global(.cds--btn) {
+    inline-size: 100%;
+    max-inline-size: none;
+  }
+
+  /* The Tooltip around a disabled Submit adds a container of its own between the column
+     and the button. Left inline, it would size to the label and the button would stop
+     filling the rail — so the full width has to be carried through it. */
+  :global(.cds--popover-container) {
+    display: block;
+    inline-size: 100%;
+  }
+}
+
+/* Placeholders shown in place of the actions while the claim is still resolving. Same
+   flow, count and size as the real buttons, so the rail doesn't shift when they swap. */
+.railActionsLoading {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  /* Carbon's skeleton mixin strips the button's padding and it has no label to give it
+     height, so it can render shorter than the sm buttons it stands in for. Pin it to the
+     sm button height, and to the rail's width rather than the default 150px. */
+  :global(.cds--btn.cds--skeleton) {
+    block-size: 2rem;
+    min-block-size: 2rem;
+    inline-size: 100%;
+    max-inline-size: none;
+  }
+}
+
+/* Wrapper around the Submit claim button, used only while it is disabled. A disabled
+   button emits no pointer events, so hover would never reach it; dropping pointer
+   events on the button lets hover fall through to this span, which is what the Carbon
+   Tooltip explaining the block is attached to. */
+.submitClaimWrap {
+  /* Block, not inline-flex: in the rail's column the span is what the button sizes
+     against, so an inline wrapper would leave the disabled Submit narrower than the
+     enabled one and narrower than Close beneath it. */
+  display: block;
+  inline-size: 100%;
+
+  /* The span is focusable (tabIndex) purely to carry the tooltip, so hide the
+     focus ring it would otherwise draw around the button. */
+  &:focus {
+    outline: none;
+  }
+
+  :global(button:disabled) {
+    pointer-events: none;
+  }
+}
+
+/* Nothing on this page is boxed: the claim's facts are a plain row of labelled values
+   under the header, and each section below is a title over its table.
+
+   Each category is its own row, separated by a divider so the groups read distinctly. */
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e0e0e0;
+}
+
+/* ---- Body: contents left, standing rail right ---- */
+/* Flex rather than a grid with breakpoints: the rail drops under the tables when there
+   isn't room for both, and it does so on the space actually available — which the page,
+   the lg modal and the Bill Details embed don't agree on, so a viewport media query would
+   get at least one of them wrong. */
+.cvBody {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 1rem 1.5rem;
+}
+
+.cvMain {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  /* Takes the surplus. The basis is roughly what the widest table — interventions, with
+     a long name and five more columns — needs before it starts wrapping cells; below it,
+     dropping the rail buys the tables more than keeping it beside them does. */
+  flex: 1 1 44rem;
+  min-width: 0;
+}
+
+.cvRail {
+  /* Never grows sideways: the rail is read at a glance and gains nothing from extra
+     width, so the surplus goes to the tables instead. */
+  flex: 0 1 16rem;
+  min-width: 0;
+  /* Shrink to its content's height. Stretched to the row's full height — the flex default
+     — it would have no room to travel and `position: sticky` inside it would do nothing. */
+  align-self: flex-start;
+}
+
+/* Sticky against whichever ancestor scrolls: the page on the route, ModalBody in the
+   modal. Both work, because sticky answers to the nearest scrolling ancestor rather than
+   to the viewport.
+
+   The offset clears the OpenMRS navbar, which is 3rem and fixed — at a smaller offset the
+   rail would come to rest underneath it on the route. Inside the modal there is no navbar
+   and the same offset simply leaves the rail a little lower than it needs to be. */
+.cvRailInner {
+  position: sticky;
+  top: 4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* No dividing rule down the rail's left edge: nothing in CSS here can tell whether the
+   rail is beside the tables or wrapped under them, and under them the same rule reads as
+   a stray vertical line. The gap separates them when they are side by side; the rail's
+   own internal rules do the rest. */
+/* No rule of its own: the actions above draw the one between them, and on a claim too far
+   along to act on there are no actions and the history simply leads the rail. */
+.asideBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.asideTitle {
+  margin: 0;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: #6f6f6f;
+}
+
+/* The page's subject, and the largest thing on it. */
+.claimPatient {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: #161616;
+  overflow-wrap: anywhere;
+}
+
+/* The figure the page is read for: right-aligned, tabular, and the largest thing after
+   the patient's name it sits beside. `margin-left: auto` rather than the header's
+   space-between, so it still sits right when the patient block is hidden — inside Bill
+   Details, where the banner above already names them — and it is the header's only
+   child. */
+.claimAmount {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  flex-shrink: 0;
+  margin-left: auto;
+  text-align: right;
+}
+
+.claimAmountLabel {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  color: #6f6f6f;
+}
+
+.claimAmountValue {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #161616;
+  font-variant-numeric: tabular-nums;
+}
+
+.claimAmountNet {
+  font-size: 0.75rem;
+  color: #6f6f6f;
+  font-variant-numeric: tabular-nums;
+}
+
+/* The facts spread across the full width, a column each. `auto-fit` with a floor rather
+   than a fixed four: the same strip renders in the lg modal and the Bill Details embed,
+   and where there isn't room for four columns it drops to two rather than crushing them
+   all to the width of their longest word. */
+.detailsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  gap: 0.625rem 1.5rem;
+  margin: 0;
+}
+
+.detailRow {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+
+  /* Same micro-label as the Bill Details header, so a claim and a bill read alike. */
+  dt {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    color: #6f6f6f;
+  }
+  dd {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #161616;
+    overflow-wrap: anywhere;
+  }
+}
+
+/* ---- Section headers ---- */
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #161616;
+}
+
+/* How many records the section holds, so the page can be scanned for what a claim
+   actually carries without reading every table to find the empty ones. */
+.sectionCount {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  padding: 0 0.375rem;
+  border-radius: 0.625rem;
+  background: #e0e0e0;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: #525252;
+}
+
+/* An empty section is a fact about the claim, not a full one, so its count recedes
+   instead of reading as a filled badge holding a zero. */
+.sectionCountEmpty {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px #e0e0e0;
+  color: #8d8d8d;
+}
+
+/* Unless the emptiness is blocking something, in which case it does the opposite of
+   recede — matched to the callout in the section body, so the heading and the reason
+   read as one thing. */
+.sectionCountDanger {
+  background: #da1e28;
+  color: #ffffff;
+}
+.sectionHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.attachActions {
+  display: flex;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.confirmText {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: #393939;
+}
+
+.confirmActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}