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

package/src/billing/dashboard/v2/patient-bill-details/claim-details/claim-details-skeleton.component.scss

@@ -0,0 +1,89 @@
+.skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+.header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.pill {
+  display: inline-block;
+  width: 6rem;
+  height: 1.25rem;
+  border-radius: 999px;
+  background: #e5e5e5;
+  animation: skeletonPulse 1.2s ease-in-out infinite;
+}
+.pill:nth-child(3) {
+  width: 11rem;
+}
+
+.summary {
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 1rem 1.25rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: 0.625rem 1.5rem;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.sectionTitle {
+  height: 1rem;
+}
+
+.cardsRow {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+  gap: 0.75rem;
+  align-items: start;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 0.875rem 1rem;
+}
+
+.cardRow {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+@keyframes skeletonPulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/billing/dashboard/v2/patient-bill-details/claim-details/claim-details-skeleton.component.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { SkeletonText } from '@carbon/react';
+import styles from './claim-details-skeleton.component.scss';
+
+/**
+ * Loading placeholder shaped like the real claim details — header tags, the summary
+ * grid, and a couple of record-card sections — so the section fills in place instead
+ * of collapsing to a single spinner line.
+ */
+const ClaimDetailsSkeleton: React.FC = () => (
+  <div className={styles.skeleton} aria-label="Loading claim details" aria-busy="true">
+    {/* Header: State / Status / Scheme meta */}
+    <div className={styles.header}>
+      {Array.from({ length: 3 }).map((_, i) => (
+        <span key={i} className={styles.pill} />
+      ))}
+    </div>
+
+    {/* Summary grid */}
+    <div className={styles.summary}>
+      <div className={styles.grid}>
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div className={styles.field} key={i}>
+            <SkeletonText width="45%" />
+            <SkeletonText width="75%" />
+          </div>
+        ))}
+      </div>
+    </div>
+
+    {/* Two record-card sections */}
+    {Array.from({ length: 2 }).map((_, s) => (
+      <div className={styles.section} key={s}>
+        <SkeletonText className={styles.sectionTitle} width="9rem" />
+        <div className={styles.cardsRow}>
+          {Array.from({ length: 2 }).map((_, c) => (
+            <div className={styles.card} key={c}>
+              <SkeletonText width="65%" />
+              {Array.from({ length: 4 }).map((__, r) => (
+                <div className={styles.cardRow} key={r}>
+                  <SkeletonText width="35%" />
+                  <SkeletonText width="30%" />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+export default ClaimDetailsSkeleton;

package/src/billing/dashboard/v2/patient-bill-details/claim-details/patient-claim-details.component.scss

@@ -0,0 +1,32 @@
+.pcLayout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Shown when the claims service can't be reached and there's nothing to display. */
+.errorState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.75rem;
+  padding: 2rem 1rem;
+}
+
+.errorIcon {
+  color: #da1e28;
+}
+
+.errorTitle {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #161616;
+}
+
+.errorSubtitle {
+  margin: 0.25rem 0 0;
+  font-size: 0.8125rem;
+  color: #6f6f6f;
+}

package/src/billing/dashboard/v2/patient-bill-details/claim-details/patient-claim-details.component.tsx

@@ -0,0 +1,215 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { type ClaimsVisit, type PatientFacilityBillDetails } from "../../types";
+import {
+  fetchFacilityClaimVisits,
+  useClaimChanged,
+  useInvalidateProviderClaimPreview,
+  useProviderClaimPreview,
+} from "../../../../billing-claims.resource";
+import styles from './patient-claim-details.component.scss';
+import ClaimVisitDetails from "../../claim-visits/claim-visit-details/claim-visit-details.component";
+import { Button } from "@carbon/react";
+import { Renew, WarningAltFilled } from "@carbon/react/icons";
+import ClaimDetailsSkeleton from "./claim-details-skeleton.component";
+import EmptyState from "../../shared/empty-state.component";
+
+interface patientClaimDetailsProps {
+  consentToken: string;
+  locationUuid: string;
+  patientBillDetails: PatientFacilityBillDetails[];
+  /** Bumped by "Reload Bills" to pull the claim again alongside the bill. */
+  refreshToken?: number;
+  onBillDetailsChange?: () => void;
+}
+const PatientClaimDetails: React.FC<patientClaimDetailsProps> = ({
+  consentToken,
+  locationUuid,
+  patientBillDetails,
+  refreshToken,
+  onBillDetailsChange,
+}) => {
+  const [patientBill, setPatientBill] = useState<PatientFacilityBillDetails>();
+  // The claims-visit endpoint carries the fully-built claim (scheme, provider,
+  // interventions, invoices…), matched by consent token == authorization code. The
+  // provider claim-preview can come back sparse, so this is the primary source.
+  const [claimFromVisit, setClaimFromVisit] = useState<ClaimsVisit>();
+  const [visitLoading, setVisitLoading] = useState<boolean>(true);
+  const [visitError, setVisitError] = useState<boolean>(false);
+  const {
+    claimVisit,
+    isLoading: claimLoading,
+    isValidating: claimValidating,
+  } = useProviderClaimPreview(consentToken, locationUuid);
+  const invalidateProviderClaimPreview = useInvalidateProviderClaimPreview();
+
+  useEffect(() => {
+    if (consentToken && locationUuid) {
+      getPatientBill();
+    }
+  }, [consentToken, locationUuid]);
+
+  // Claim mutations can land in quick succession — the diagnosis auto-add fires once
+  // per diagnosis — so several loads may be in flight at once. Only the newest is
+  // allowed to write, otherwise a slow earlier response could clobber fresher data.
+  const loadSeq = useRef(0);
+
+  const loadClaimVisit = useCallback(() => {
+    if (!consentToken || !locationUuid) {
+      return;
+    }
+    const seq = ++loadSeq.current;
+    setVisitLoading(true);
+    setVisitError(false);
+    fetchFacilityClaimVisits({ consentToken, locationUuid })
+      .then((data) => {
+        if (seq === loadSeq.current) {
+          setClaimFromVisit(data?.[0]?.visitResponse);
+        }
+      })
+      .catch(() => {
+        if (seq === loadSeq.current) {
+          setVisitError(true);
+        }
+      })
+      .finally(() => {
+        if (seq === loadSeq.current) {
+          setVisitLoading(false);
+        }
+      });
+  }, [consentToken, locationUuid]);
+
+  useEffect(() => {
+    loadClaimVisit();
+  }, [loadClaimVisit]);
+
+  // This response isn't SWR-backed, so it has no cache to invalidate and would
+  // otherwise stay as first fetched — stale the moment a diagnosis is added to the
+  // claim. Refetch on any claim mutation to keep it level with the claim preview.
+  useClaimChanged(loadClaimVisit);
+
+  // An explicit reload — "Reload Bills", or the Refresh control on the Claim Details
+  // header. Invalidating the preview refreshes both halves: it revalidates the
+  // SWR-backed preview and announces the change, which the subscription above picks up
+  // to reload the claims-visit response. Skipped on the initial 0, where the mount
+  // effect has already loaded everything.
+  //
+  // `reloading` drives a skeleton for the duration. A deliberate reload gets one because
+  // the point of asking is to see current data, and leaving the old claim on screen
+  // makes it look current when it isn't. Mutations deliberately don't set this — they
+  // refresh in place, so attaching a document doesn't tear down the section and discard
+  // work staged against another intervention.
+  const [reloading, setReloading] = useState(false);
+  useEffect(() => {
+    if (refreshToken) {
+      setReloading(true);
+      invalidateProviderClaimPreview();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshToken]);
+
+  // Both sources settle independently; the skeleton clears once neither is in flight.
+  useEffect(() => {
+    if (reloading && !visitLoading && !claimLoading && !claimValidating) {
+      setReloading(false);
+    }
+  }, [reloading, visitLoading, claimLoading, claimValidating]);
+
+  function getPatientBill() {
+    const bill = patientBillDetails.find(details => details.consent_token === consentToken);
+    setPatientBill(bill);
+  }
+
+  // claim-preview/provider is the reference for this page. It is the live view of the
+  // claim — revalidated on every mutation — and carries the whole record: workflow
+  // state, invoices, interventions, diagnoses, attachments and doctors. The claims-visit
+  // response is fetched once on mount, so anything read from it is stale as soon as the
+  // claim changes; that is what left Diagnosis empty and the attachment count short
+  // while the preview already listed them.
+  //
+  // It stays a merge rather than a straight swap because the preview has been seen to
+  // come back sparse. The preview wins on every field it actually has a value for, and
+  // the claims-visit response fills in the rest instead of a gap blanking the page.
+  const claim = useMemo<ClaimsVisit | undefined>(() => {
+    if (!claimVisit && !claimFromVisit) {
+      return undefined;
+    }
+    const merged = { ...(claimFromVisit ?? ({} as ClaimsVisit)) };
+    for (const [key, value] of Object.entries(claimVisit ?? {})) {
+      const isMissing =
+        value === undefined || value === null || value === '' || (Array.isArray(value) && value.length === 0);
+      if (!isMissing) {
+        merged[key] = value;
+      }
+    }
+    return merged;
+  }, [claimFromVisit, claimVisit]);
+
+  // The state on the claims-visit response is the copy stored when the visit was
+  // recorded, so it is frozen at DRAFT for anything submitted since; only the preview
+  // carries the live one. Until the preview has produced a state the card treats it as
+  // unknown, rather than showing DRAFT and correcting itself seconds later.
+  //
+  // The wait ends when the preview settles, however it settles: a preview that comes
+  // back sparse or errors leaves the stored state as the best available, and it is shown
+  // rather than spinning forever on a state that is never going to arrive.
+  //
+  // The preview is only accepted as this claim's when its authorization code matches the
+  // consent token asked for: SWR keeps serving the previous response while a new one is
+  // in flight, and the state of the claim opened before this one is no better than a
+  // stale one.
+  const previewIsForThisClaim =
+    (claimVisit?.authorization_code ?? '').trim().toUpperCase() === (consentToken ?? '').trim().toUpperCase();
+  const liveWorkflowState = previewIsForThisClaim ? (claimVisit?.workflow_state ?? '').trim() : '';
+  const claimStateUnconfirmed = !liveWorkflowState && (claimLoading || claimValidating);
+
+  // Skeleton on the first load, and again for the length of an explicit reload.
+  if (reloading || (visitLoading && !claim)) {
+    return <ClaimDetailsSkeleton />
+  }
+
+  if (visitError && !claim) {
+    return (
+      <div className={styles.errorState}>
+        <WarningAltFilled size={32} className={styles.errorIcon} />
+        <div>
+          <p className={styles.errorTitle}>Claim details couldn’t be loaded</p>
+          <p className={styles.errorSubtitle}>
+            The claims service is unreachable right now. Check your connection and try again.
+          </p>
+        </div>
+        <Button
+          kind="tertiary"
+          size="sm"
+          renderIcon={Renew}
+          onClick={() => {
+            loadClaimVisit();
+            invalidateProviderClaimPreview();
+          }}
+        >
+          Retry
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.pcLayout}>
+      {claim ? (
+        <ClaimVisitDetails
+          patientBillDetails={patientBill}
+          claimsVisit={claim}
+          locationUuid={locationUuid}
+          hidePatientIdentity
+          // While either source is in flight the claim on screen may already be out of
+          // date — SWR keeps serving the previous response — so the actions stand down
+          // rather than act on a state that is mid-change.
+          claimRefreshing={claimLoading || claimValidating || visitLoading}
+          claimStateUnconfirmed={claimStateUnconfirmed}
+        />
+      ) : (
+        <EmptyState message="No claim details available for this visit." />
+      )}
+    </div>
+  );
+};
+export default PatientClaimDetails;

package/src/billing/dashboard/v2/patient-bill-details/modals/add-claim-diagnosis/add-claim-diagnosis.modal.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import styles from './add-claim-diagnosis.modal.scss';
+import { type AmrsVisitDiagnosis } from "../../../../../types";
+import { Modal, ModalBody, TextInput } from "@carbon/react";
+import { showSnackbar } from "@openmrs/esm-framework";
+import { addClaimDiagnosis } from "../../../../../billing-claims.resource";
+import { type AddClaimDiagnosisDto } from "../../../types";
+interface addClaimDiagnosisModal {
+     open: boolean;
+     onClose: () => void;
+     onSuccess: () => void;
+     amrsVisitDiagnosis: AmrsVisitDiagnosis;
+     interventionCode: string;
+     consentToken: string;
+     locationUuid: string;
+}
+const AddClaimDiagnosisModal:React.FC<addClaimDiagnosisModal> = ({open,onClose,onSuccess,amrsVisitDiagnosis,interventionCode,consentToken,locationUuid})=>{
+    const [loading,setLoading] = useState<boolean>(false);
+  async function handleAddClaimDiagnosis() {
+    setLoading(true);
+    const addClaimDiagnosisDto = getClaimDiagnosisDto();
+    try{
+        const resp = await addClaimDiagnosis(addClaimDiagnosisDto);
+        if(resp['error']){
+           showSnackbar({
+             title: resp['error'] ?? 'Error Adding Claim Diagnosis',
+             kind: 'error',
+             subtitle: resp['message'] ?? 'An error occurred while adding the claim disgnosis. Kindy retry or contact support'
+           })
+           onSuccess();
+        }else{
+             showSnackbar({
+             title: 'Sucess Adding Claim Diagnosis',
+             kind: 'success',
+             subtitle: 'Claim Item added successfully'
+           });
+           onSuccess();
+        }
+    }catch(error){
+       showSnackbar({
+        kind: 'error',
+        title: 'Error Adding Claim Diagnosis',
+        subtitle: 'An error occurred while adding the Claim Diagnosis. Kindy retry or contact support'
+       });
+    }finally{
+        setLoading(false);
+    }
+  }
+  function getClaimDiagnosisDto(): AddClaimDiagnosisDto {
+    return {
+      consentToken: consentToken,
+      interventionCode: interventionCode,
+      locationUuid: locationUuid,
+      icdCode: amrsVisitDiagnosis.icd11_code,
+      practitionerIdentificationNumber: amrsVisitDiagnosis.practioner_nat_id,
+      practitionerIdentificationType: amrsVisitDiagnosis.practitioner_identifier_type,
+      practitionerRegulationBody: amrsVisitDiagnosis.practitioner_body
+    };
+  }
+  function holderFunction(){
+    return;
+  }
+  return (
+    <>
+      <Modal
+        modalHeading="Add Claim Diagnosis"
+        open={open}
+        size="md"
+        onSecondarySubmit={onClose}
+        onRequestClose={onClose}
+        onRequestSubmit={loading ? holderFunction : handleAddClaimDiagnosis}
+        primaryButtonText={loading ? 'Adding...': 'Add'}
+        secondaryButtonText="Close"
+      >
+        <ModalBody>
+          <div className={styles.addClaimDiagnosisModalLayout}>
+            <div className={styles.addClaimDiagnosisModalRow}>
+              <TextInput
+                id="intervention-code"
+                labelText="Intervention Code"
+                value={interventionCode}
+                readOnly={true}
+              />
+            </div>
+            <div className={styles.addClaimDiagnosisModalRow}>
+              <TextInput
+                id="icd11Code"
+                labelText="ICD11 Diagnosis"
+                value={amrsVisitDiagnosis.icd11_code}
+                readOnly={true}
+              />
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+}
+export default AddClaimDiagnosisModal;

package/src/billing/dashboard/v2/patient-bill-details/modals/add-claim-line/add-claim-line.modal.tsx

@@ -0,0 +1,186 @@
+import React, { useEffect, useState } from 'react';
+import { InlineNotification, Modal, ModalBody, TextInput } from '@carbon/react';
+import styles from './add-claim-line.modal.scss';
+import { type AddClaimLineDto, type PatientFacilityBillDetails } from '../../../types';
+import { addClaimItem } from '../../../../../billing-claims.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { extractPreauthStatus, getPreauthPreview } from '../../../../../../claims/claims.resource';
+import { asBool, getStoredPreauthCode, needsNormalPreauth } from '../../../preauth/preauth.resource';
+
+interface addClaimLineModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  billItem: PatientFacilityBillDetails;
+  locationUuid: string;
+  /** Prefer visit-derived token when available */
+  consentToken?: string;
+}
+const AddClaimLineModal: React.FC<addClaimLineModalProps> = ({
+  open,
+  onClose,
+  onSuccess,
+  billItem,
+  locationUuid,
+  consentToken: consentTokenProp,
+}) => {
+  const [loading, setLoading] = useState(false);
+  const [checkingPreauth, setCheckingPreauth] = useState(false);
+  const [preauthBlocked, setPreauthBlocked] = useState(false);
+  const [preauthCode, setPreauthCode] = useState<string | undefined>();
+
+  const resolvedToken = consentTokenProp || billItem.consent_token || '';
+
+  useEffect(() => {
+    if (!open || !needsNormalPreauth(billItem) || !resolvedToken) {
+      setPreauthBlocked(false);
+      setPreauthCode(getStoredPreauthCode(resolvedToken, billItem.intervention_code));
+      return;
+    }
+
+    let cancelled = false;
+    const run = async () => {
+      setCheckingPreauth(true);
+      try {
+        const stored = getStoredPreauthCode(resolvedToken, billItem.intervention_code);
+        setPreauthCode(stored);
+        const preview = await getPreauthPreview(resolvedToken, locationUuid);
+        const status = extractPreauthStatus(preview);
+        if (!cancelled) {
+          const ok = status === 'FINALISED' || status === 'FINALIZED' || asBool(billItem.preauth_approved);
+          setPreauthBlocked(!ok);
+        }
+      } catch {
+        if (!cancelled) {
+          // If preview fails but we have a stored code or approved flag, allow; else block.
+          setPreauthBlocked(!asBool(billItem.preauth_approved) && !getStoredPreauthCode(resolvedToken, billItem.intervention_code));
+        }
+      } finally {
+        if (!cancelled) setCheckingPreauth(false);
+      }
+    };
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [open, billItem, resolvedToken, locationUuid]);
+
+  async function handleAddClaimLineItem() {
+    if (preauthBlocked) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Preauth required',
+        subtitle: 'Wait until preauth is FINALISED before adding a claim line for this intervention.',
+      });
+      return;
+    }
+    setLoading(true);
+    const addClaimLineDto = getClaimLineDto();
+    try {
+      const resp = await addClaimItem(addClaimLineDto);
+      if (resp['error']) {
+        showSnackbar({
+          title: resp['error'] ?? 'Error Adding Claim Line',
+          kind: 'error',
+          subtitle:
+            resp['message'] ?? 'An error occurred while adding the claim line. Kindy retry or contact support',
+        });
+        onSuccess();
+      } else {
+        showSnackbar({
+          title: 'Sucess Adding Claim Line',
+          kind: 'success',
+          subtitle: 'Claim Item added successfully',
+        });
+        onSuccess();
+      }
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error Adding Claim Line',
+        subtitle: 'An error occurred while adding the claim line. Kindy retry or contact support',
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+  function getClaimLineDto(): AddClaimLineDto {
+    const dto: AddClaimLineDto = {
+      consentToken: resolvedToken,
+      interventionCode: billItem.intervention_code,
+      unitPrice: String(billItem.item_price),
+      quantity: String(billItem.item_quantity),
+      locationUuid: locationUuid,
+    };
+    if (preauthCode) {
+      dto.preauthCode = preauthCode;
+    }
+    return dto;
+  }
+  function holderFunction() {
+    return;
+  }
+  return (
+    <>
+      <Modal
+        modalHeading="Add Claim Line"
+        open={open}
+        size="md"
+        onSecondarySubmit={onClose}
+        onRequestClose={onClose}
+        onRequestSubmit={loading || checkingPreauth || preauthBlocked ? holderFunction : handleAddClaimLineItem}
+        primaryButtonText={loading ? 'Adding...' : 'Add'}
+        secondaryButtonText="Close"
+        primaryButtonDisabled={loading || checkingPreauth || preauthBlocked || !resolvedToken}
+      >
+        <ModalBody>
+          <div className={styles.addClaimLineModalLayout}>
+            {preauthBlocked ? (
+              <InlineNotification
+                kind="warning"
+                lowContrast
+                hideCloseButton
+                title="Preauth not finalised"
+                subtitle="Raise and finalise preauth for this intervention before adding a claim line."
+              />
+            ) : null}
+            {preauthCode ? (
+              <InlineNotification
+                kind="info"
+                lowContrast
+                hideCloseButton
+                title="Preauth code"
+                subtitle={preauthCode}
+              />
+            ) : null}
+            <div className={styles.addClaimLineModalRow}>
+              <TextInput
+                id="bill-item"
+                labelText="Intervention Code"
+                value={billItem.intervention_code}
+                readOnly={true}
+              />
+            </div>
+            <div className={styles.addClaimLineModalRow}>
+              <TextInput
+                id="bill-item-amount"
+                labelText="Unit Price"
+                value={`Ksh ${billItem.item_price}`}
+                readOnly={true}
+              />
+            </div>
+            <div className={styles.addClaimLineModalRow}>
+              <TextInput
+                id="bill-item-qty"
+                labelText="Quantity"
+                value={billItem.item_quantity}
+                readOnly={true}
+              />
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+export default AddClaimLineModal;