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

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

@@ -0,0 +1,133 @@
+/* ---- Line items, laid out as an invoice ---- */
+.tableWrap {
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+
+  /* Column headings sit in a ruled band, as on a printed invoice. */
+  th {
+    padding: 0.5rem;
+    text-align: left;
+    font-size: 0.625rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #525252;
+    background-color: #f4f4f4;
+    border-top: 1px solid #161616;
+    border-bottom: 1px solid #161616;
+    white-space: nowrap;
+  }
+
+  td {
+    padding: 0.75rem 0.5rem;
+    border-bottom: 1px solid #e0e0e0;
+    vertical-align: top;
+    line-height: 1.4;
+    color: #161616;
+  }
+
+  /* The last line closes the item list; the totals below stand apart from it. */
+  tbody tr:last-child td {
+    border-bottom: 1px solid #161616;
+  }
+}
+
+/* Figures line up in their columns so they can be read down the invoice. */
+.numeric {
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.numCol {
+  width: 2rem;
+}
+
+.lineName {
+  display: block;
+  font-weight: 600;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+/* Codes, charge date — what only qualifies the line, kept under its description rather
+   than taking a column. */
+.lineSub {
+  display: block;
+  margin-top: 0.1875rem;
+  font-size: 0.6875rem;
+  line-height: 1.35;
+  color: #6f6f6f;
+  overflow-wrap: anywhere;
+}
+
+.lineFlags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.375rem;
+
+  :global(.cds--tag) {
+    margin: 0;
+  }
+}
+
+/* Trailing column for the line's own Remove control — only as wide as the icon. */
+.actionCol {
+  width: 2rem;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: right;
+}
+
+/* ---- Totals ---- */
+/* The closing figures, stepped in to the right of the item columns the way an invoice
+   closes: the subtotals quiet, the total ruled off and given weight. */
+.totalRow td {
+  padding: 0.375rem 0.5rem;
+  border-bottom: none;
+  color: #525252;
+}
+
+/* Air between the last charge and the figures it feeds into. */
+.totalRow:first-child td {
+  padding-top: 0.625rem;
+}
+
+.totalStrong td {
+  padding: 0.625rem 0.5rem;
+  border-bottom: none;
+  border-top: 1px solid #161616;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: #161616;
+}
+
+.empty {
+  margin: 0;
+  padding: 0.5rem 0;
+  font-size: 0.8125rem;
+  color: #6f6f6f;
+}
+
+/* ---- Remove confirmation ---- */
+.confirmText {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  color: #393939;
+}
+
+/* Buttons live inside the modal body (not Carbon's ModalFooter, whose full-height
+   buttons were overflowing the container) — a simple right-aligned sm row. */
+.confirmActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}

package/src/billing/dashboard/v2/claim-visits/claim-invoice-line-details/claim-invoice-line-details.component.tsx

@@ -0,0 +1,217 @@
+import React, { useState } from 'react';
+import { type ClaimInvoiceLine } from '../../types';
+import { Button, ComposedModal, ModalBody, ModalHeader, Tag } from '@carbon/react';
+import { TrashCan } from '@carbon/react/icons';
+import styles from './claim-invoice-line-details.component.scss';
+import { formatDate, parseDate, showSnackbar, useSession } from '@openmrs/esm-framework';
+import { removeClaimItem, useInvalidateProviderClaimPreview } from '../../../../billing-claims.resource';
+
+interface claimLineDetailsProps {
+  claimInvoiceLines: ClaimInvoiceLine[];
+  consentToken: string;
+  /** Removing a line edits the claim, so it is offered only while the claim is open to
+      content changes. Defaults to read-only rather than assuming permission. */
+  canEditLines?: boolean;
+  /** Totals rendered under the lines, the way an invoice closes. */
+  totals?: { label: string; value: string; strong?: boolean }[];
+  /** The invoice's own date, already formatted. A line states when it was charged only
+      when that differs — otherwise every line repeats the date at the top of the sheet. */
+  invoiceDate?: string;
+}
+
+const money = (n: number | string) =>
+  Number(n ?? 0).toLocaleString('en-KE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+/**
+ * The flags a line carries. Only the ones that say something are shown: a line being
+ * active is the norm, so it is silent, while inactive, cancelled, returned or over the
+ * UHC limit each change how the line should be read.
+ */
+const lineFlags = (line: ClaimInvoiceLine): { label: string; type: 'red' | 'magenta' | 'gray' }[] => {
+  const flags: { label: string; type: 'red' | 'magenta' | 'gray' }[] = [];
+  if (!line.is_active) {
+    flags.push({ label: 'Inactive', type: 'gray' });
+  }
+  if (line.is_cancellation) {
+    flags.push({ label: 'Cancellation', type: 'red' });
+  }
+  if (line.is_return) {
+    flags.push({ label: 'Return', type: 'magenta' });
+  }
+  if (line.uhc_exceeded) {
+    flags.push({ label: 'UHC exceeded', type: 'red' });
+  }
+  return flags;
+};
+
+/**
+ * The lines of an invoice, set out the way an invoice sets them out: a column each for
+ * what was charged for, how many, at what price and to what amount, closing on the
+ * totals those lines add up to.
+ *
+ * Everything that only qualifies a line — its codes, the date it was charged, the flags
+ * it carries — sits under the description in small type rather than taking a column of
+ * its own, so the figures stay in tidy columns that can be read down. Removing a line is
+ * offered on the line itself, which is the only place it can say which line it means.
+ */
+const ClaimInvoiceLineDetails: React.FC<claimLineDetailsProps> = ({
+  claimInvoiceLines,
+  consentToken,
+  canEditLines = false,
+  totals,
+  invoiceDate,
+}) => {
+  const sessionLocation = useSession();
+  const invalidateProviderClaimPreview = useInvalidateProviderClaimPreview();
+  // Line the user has asked to remove, awaiting confirmation.
+  const [lineToRemove, setLineToRemove] = useState<ClaimInvoiceLine | null>(null);
+  const [removing, setRemoving] = useState(false);
+
+  const lines = claimInvoiceLines ?? [];
+
+  // Guarded as well as hidden: a claim that moved on mid-session shouldn't leave a
+  // stale button able to open the confirmation.
+  const requestRemoveLine = (line: ClaimInvoiceLine) => {
+    if (!canEditLines) {
+      return;
+    }
+    setLineToRemove(line);
+  };
+
+  const confirmRemoveClaimLine = async () => {
+    if (!lineToRemove || !canEditLines) {
+      return;
+    }
+    setRemoving(true);
+    try {
+      await removeClaimItem({
+        consentToken,
+        lineGuid: lineToRemove.id,
+        locationUuid: sessionLocation?.sessionLocation?.uuid,
+      });
+      invalidateProviderClaimPreview();
+      showSnackbar({ title: 'Success removing claim line', subtitle: 'Claim line removed successfully', kind: 'success' });
+      setLineToRemove(null);
+    } catch (error) {
+      showSnackbar({ title: 'Error removing claim line', subtitle: error, kind: 'error' });
+    } finally {
+      setRemoving(false);
+    }
+  };
+
+  if (lines.length === 0) {
+    return <p className={styles.empty}>No invoice lines.</p>;
+  }
+
+  return (
+    <>
+      <div className={styles.tableWrap}>
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th className={styles.numCol}>#</th>
+              <th>Description</th>
+              <th className={styles.numeric}>Qty</th>
+              <th className={styles.numeric}>Unit price</th>
+              <th className={styles.numeric}>Amount</th>
+              {canEditLines ? <th className={styles.actionCol}></th> : null}
+            </tr>
+          </thead>
+          <tbody>
+            {lines.map((line, index) => {
+              const quantity = [line.quantity, line.unit].filter((v) => v !== null && v !== undefined && v !== '').join(' ');
+              const flags = lineFlags(line);
+              const codes = [line.item_code, line.intervention_code !== line.item_code ? line.intervention_code : null]
+                .filter(Boolean)
+                .join(' · ');
+              const chargedOn = line.charge_date ? formatDate(parseDate(line.charge_date)) : '';
+              // Silent when it is the invoice's own date, which the sheet already states.
+              const showChargedOn = Boolean(chargedOn) && chargedOn !== (invoiceDate ?? '');
+              return (
+                <tr key={line.id ?? index}>
+                  <td className={styles.numCol}>{index + 1}</td>
+                  <td>
+                    <span className={styles.lineName}>{line.item_name || line.item_code || 'Unnamed line'}</span>
+                    {codes ? <span className={styles.lineSub}>{codes}</span> : null}
+                    {showChargedOn ? <span className={styles.lineSub}>Charged {chargedOn}</span> : null}
+                    {flags.length ? (
+                      <span className={styles.lineFlags}>
+                        {flags.map((flag) => (
+                          <Tag size="sm" type={flag.type} key={flag.label}>
+                            {flag.label}
+                          </Tag>
+                        ))}
+                      </span>
+                    ) : null}
+                  </td>
+                  <td className={styles.numeric}>{quantity || '—'}</td>
+                  <td className={styles.numeric}>{money(line.unit_price)}</td>
+                  <td className={styles.numeric}>{money(line.line_total_amount)}</td>
+                  {canEditLines ? (
+                    <td className={styles.actionCol}>
+                      {/* Icon-only, at the end of the line it removes: unambiguous however
+                          many lines there are, and it costs the row no width. */}
+                      <Button
+                        kind="danger--ghost"
+                        size="sm"
+                        hasIconOnly
+                        renderIcon={TrashCan}
+                        iconDescription="Remove line"
+                        tooltipPosition="left"
+                        onClick={() => requestRemoveLine(line)}
+                      />
+                    </td>
+                  ) : null}
+                </tr>
+              );
+            })}
+          </tbody>
+          {totals?.length ? (
+            <tfoot>
+              {totals.map((total) => (
+                <tr key={total.label} className={total.strong ? styles.totalStrong : styles.totalRow}>
+                  <td colSpan={3} />
+                  <td className={styles.numeric}>{total.label}</td>
+                  <td className={styles.numeric}>{total.value}</td>
+                  {canEditLines ? <td className={styles.actionCol} /> : null}
+                </tr>
+              ))}
+            </tfoot>
+          ) : null}
+        </table>
+      </div>
+
+      {lineToRemove ? (
+        <ComposedModal
+          open
+          size="sm"
+          onClose={() => {
+            // Block dismissal while the removal is in flight.
+            if (removing) {
+              return false;
+            }
+            setLineToRemove(null);
+          }}
+        >
+          <ModalHeader title="Remove claim line" />
+          <ModalBody>
+            <p className={styles.confirmText}>
+              Are you sure you want to remove <strong>{lineToRemove.item_name || 'this line'}</strong> from the claim?
+              This can’t be undone.
+            </p>
+            <div className={styles.confirmActions}>
+              <Button kind="secondary" size="sm" disabled={removing} onClick={() => setLineToRemove(null)}>
+                Cancel
+              </Button>
+              <Button kind="danger" size="sm" disabled={removing} onClick={confirmRemoveClaimLine}>
+                {removing ? 'Removing…' : 'Remove line'}
+              </Button>
+            </div>
+          </ModalBody>
+        </ComposedModal>
+      ) : null}
+    </>
+  );
+};
+
+export default ClaimInvoiceLineDetails;

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;