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

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

@@ -0,0 +1,346 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import styles from './claim-visit-details.component.scss';
+import { type PatientFacilityBillDetails, type ClaimsVisit, ApplicableDocumentType } from '../../types';
+import ClaimInvoiceDetails from '../claim-invoice-details/claim-invoice-details.component';
+import ClaimInterventionDetails from '../claim-intervention-details/claim-intervention-details.component';
+import ClaimDiagnosisDetails from '../claim-diagnosis-details/claim-diagnosis-details.component';
+import { formatDate, launchWorkspace, parseDate, showSnackbar, useVisit } from '@openmrs/esm-framework';
+import { Button, InlineLoading, Tile } from '@carbon/react';
+import CloseClaimModal from '../modal/close-claim/close-claim.modal';
+import SubmitClaimModal from '../modal/submit-claim/submit-claim.modal';
+import { endVisit, useInvalidateProviderClaimPreview, usePayerClaimPreview } from '../../../../billing-claims.resource';
+import ClaimDocuments from '../claim-documents/claim-documents';
+import ClaimDoctors from '../claim-doctors/claim-doctors';
+import AddClaimDoctorModal from '../modal/claim-doctors/add-claim-doctor/add-claim-doctor.modal';
+import { VisitTypeUuids } from '../../../../../shared/constants/visit-types';
+import { VisitType } from '../../../../../claims';
+import { canEditClaimContent } from '../../../v2/claim-statuses';
+import { interventionHasBlockingPreauth, usePreauthPreview } from '../../../../../claims/claims.resource';
+import PayerPreviewTile from '../payer-preview/payer-preview-tile.component';
+import { Renew } from '@carbon/react/icons';
+
+interface claimVisitDetailsProps {
+  claimsVisit: ClaimsVisit;
+  locationUuid: string;
+  patientBillDetails?: PatientFacilityBillDetails;
+  onBillDetailsChange?: () => void;
+  /** True while claim preview is revalidating — stand down content edits. */
+  claimRefreshing?: boolean;
+}
+const ClaimVisitDetails: React.FC<claimVisitDetailsProps> = ({
+  claimsVisit,
+  locationUuid,
+  patientBillDetails,
+  onBillDetailsChange,
+  claimRefreshing = false,
+}) => {
+  const [showCloseClaimModal, setShowCloseClaimModal] = useState<boolean>();
+  const [showSubmitClaimModal, setSubmitCloseClaimModal] = useState<boolean>(false);
+  const [showAddDoctorModal, setShowAddDoctorModal] = useState<boolean>(false);
+  const [triggerEndVisit, setTriggerEndVisit] = useState<boolean>(false);
+  const { activeVisit } = useVisit(patientBillDetails?.patient_uuid);
+
+  const invoiceNumber = useMemo(() => {
+    if (patientBillDetails) {
+      return patientBillDetails.receipt_number;
+    }
+    return '';
+  }, [patientBillDetails]);
+
+  const { isLoading: isLoadingPayerPreview, payerPreviewResult } = usePayerClaimPreview(invoiceNumber, locationUuid);
+
+  useEffect(() => {
+    if (triggerEndVisit && activeVisit) {
+      handleCloseVisit();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [triggerEndVisit, activeVisit]);
+
+  function handleCloseVisit() {
+    endVisit(activeVisit?.uuid)
+      .then((v) => {
+        showSnackbar({
+          title: 'Success closing claim',
+          kind: 'success',
+          subtitle: 'Claim closed successfully',
+        });
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }
+
+  const visitType: VisitType = useMemo(() => {
+    if (activeVisit) {
+      const visitTypeUuid = activeVisit?.visitType?.uuid;
+      if (visitTypeUuid) {
+        if (visitTypeUuid === VisitTypeUuids.OPD_VISIT_TYPE_UUID) {
+          return 'OUTPATIENT';
+        }
+        if (visitTypeUuid === VisitTypeUuids.INPATIENT_VISIT_TYPE_UUID) {
+          return 'INPATIENT';
+        }
+      }
+    }
+    return 'OUTPATIENT';
+  }, [activeVisit, VisitTypeUuids]);
+
+  const invalidateProviderClaimPreview = useInvalidateProviderClaimPreview();
+  const { preview: preauthPreview } = usePreauthPreview(claimsVisit?.authorization_code, locationUuid);
+
+  if (!claimsVisit) {
+    return <>No Data</>;
+  }
+
+  function displayCloseClaimModal() {
+    setShowCloseClaimModal(true);
+  }
+  function handleCloseClaimModal() {
+    setShowCloseClaimModal(false);
+  }
+  function displayCloseSubmitClaimModal() {
+    setSubmitCloseClaimModal(true);
+  }
+  function handleCloseSubmitClaimModal() {
+    setSubmitCloseClaimModal(false);
+  }
+  function onSubmitSuccess() {
+    setTriggerEndVisit(true);
+    handleCloseSubmitClaimModal();
+    invalidateProviderClaimPreview();
+  }
+  function onCloseSuccess() {
+    handleCloseClaimModal();
+    invalidateProviderClaimPreview();
+  }
+  function handleAddDoctor() {
+    setShowAddDoctorModal(true);
+  }
+  function handleCloseAddDoctorModal() {
+    setShowAddDoctorModal(false);
+  }
+
+  const handleAddAttachment = () => {
+    launchWorkspace('upload-intervention-attachments-workspace', {
+      consentToken: claimsVisit.authorization_code,
+      patientUuid: '10',
+      claimInterventions: claimsVisit.interventions,
+      bill: patientBillDetails,
+    });
+  };
+
+  const handleGenerateAttachment = () => {
+    launchWorkspace('generate-intervention-attachments-workspace', {
+      consentToken: claimsVisit.authorization_code,
+      patientUuid: '10',
+      claimInterventions: claimsVisit.interventions,
+      bill: patientBillDetails,
+    });
+  };
+
+  // Same gates as v2: content edits only while claim is DRAFT / DRAFT_RESUBMIT and not refreshing.
+  const canSwitchIntervention = canEditClaimContent(claimsVisit.workflow_state) && !claimRefreshing;
+  const hasSwitchableIntervention = Boolean(
+    claimsVisit.interventions?.some((iv) => {
+      const active = (iv.workflow_state ?? '').toUpperCase() === 'ACTIVE';
+      if (!active) return false;
+      // Match row Actions: blocking preauth locks Switch together with Raise/Resubmit.
+      return !interventionHasBlockingPreauth(preauthPreview, iv.intervention_code);
+    }),
+  );
+
+  const canEditClaim = canEditClaimContent(claimsVisit.workflow_state) && !claimRefreshing;
+
+  const handleSwitchIntervention = () => {
+    if (!canSwitchIntervention || !hasSwitchableIntervention) {
+      return;
+    }
+    launchWorkspace('switch-intervention-workspace', {
+      consentToken: claimsVisit.authorization_code,
+      currentInterventions: claimsVisit.interventions,
+      patientId: patientBillDetails?.cr_no ?? claimsVisit.patient_number,
+      patientUuid: patientBillDetails?.patient_uuid,
+      visitUuid: activeVisit?.uuid,
+      billDate: patientBillDetails?.bill_date ?? claimsVisit.visit_start,
+      onSwitchSuccess: () => {
+        invalidateProviderClaimPreview();
+        onBillDetailsChange?.();
+      },
+    });
+  };
+
+  const handleRefresh = () => {
+    invalidateProviderClaimPreview();
+  }
+
+  return (
+    <>
+      <div className={styles.cvLayout}>
+        <div className={styles.cvHeaderSection}>
+          <div className={styles.headerTitle}>
+            <h4>Claim Visit Details</h4>
+          </div>
+          <div className={styles.headerAction}>
+            <Button
+              kind="primary"
+              onClick={displayCloseClaimModal}
+              disabled={!canEditClaim}>
+              Close Claim
+            </Button>
+            <Button
+              kind="tertiary"
+              onClick={displayCloseSubmitClaimModal}
+              disabled={!canEditClaim}>
+              Submit claim
+            </Button>
+            <Button
+              kind="tertiary"
+              onClick={handleSwitchIntervention}
+              disabled={!canSwitchIntervention || !hasSwitchableIntervention}
+            >
+              Switch Intervention
+            </Button>
+          </div>
+        </div>
+
+        <Tile
+          id="provider-preview"
+        >
+          <div className={styles.tileHeader}>
+            <dd>Provider preview</dd>
+            <Button size="sm" kind="ghost" renderIcon={Renew} onClick={handleRefresh} disabled={claimRefreshing}>
+              Refresh
+            </Button>
+          </div>
+          <br />
+          <br />
+          <dl className={styles.detailsGrid}>
+            <div className={styles.detailRow}>
+              <dt>State</dt>
+              <dd>{claimsVisit.workflow_state}</dd>
+            </div>
+            <div className={styles.detailRow}>
+              <dt>Status</dt>
+              <dd>{claimsVisit.claim_auth_status}</dd>
+            </div>
+            <div className={styles.detailRow}>
+              <dt>Name</dt>
+              <dd>{claimsVisit.patient_name}</dd>
+            </div>
+            <div className={styles.detailRow}>
+              <dt>Member Number</dt>
+              <dd>{claimsVisit.member_number}</dd>
+            </div>
+            <div className={styles.detailRow}>
+              <dt>Scheme Code</dt>
+              <dd>{claimsVisit.scheme_code}</dd>
+            </div>
+            <div className={styles.detailRow}>
+              <dt>Scheme Name</dt>
+              <dd>{claimsVisit.scheme_name}</dd>
+            </div>
+            <div className={styles.detailRow}>
+              <dt>Service Type</dt>
+              <dd>{claimsVisit.service_type}</dd>
+            </div>
+            <div className={styles.detailRow}>
+              <dt>Provider</dt>
+              <dd>{claimsVisit.provider_name}</dd>
+            </div>
+            <div className={styles.detailRow}>
+              <dt>Visit Start</dt>
+              <dd>{formatDate(parseDate(claimsVisit.visit_start))}</dd>
+            </div>
+            <div className={styles.detailRow}>
+              <dt>Total Amount</dt>
+              <dd>{claimsVisit.total_claim_amount}</dd>
+            </div>
+            <div className={styles.detailRow}>
+              <dt>Total Net Amount</dt>
+              <dd>{claimsVisit.total_claim_net_amount}</dd>
+            </div>
+          </dl>
+        </Tile>
+
+        <PayerPreviewTile isLoadingPayerPreview={isLoadingPayerPreview} payerPreviewResult={payerPreviewResult} />
+
+        <div className={styles.cvContentSection}>
+          <section className={styles.section}>
+            <h6>Invoices</h6>
+            <div className={styles.tableScroll}>
+              {claimsVisit.invoices && (
+                <ClaimInvoiceDetails
+                  claimInvoices={claimsVisit.invoices}
+                  consentToken={claimsVisit.authorization_code}
+                />
+              )}
+            </div>
+          </section>
+          <section className={styles.section}>
+            <h6>Interventions</h6>
+            <div className={styles.tableScroll}>
+              {claimsVisit.interventions && (
+                <ClaimInterventionDetails
+                  patientBillDetails={patientBillDetails}
+                  claimInterventions={claimsVisit.interventions}
+                  consentToken={claimsVisit.authorization_code}
+                  visitUuid={activeVisit?.uuid}
+                  canSwitchIntervention={canSwitchIntervention}
+                  onSwitchSuccess={() => {
+                    invalidateProviderClaimPreview();
+                    onBillDetailsChange?.();
+                  }}
+                />
+              )}
+            </div>
+          </section>
+          <section className={styles.section}>
+            <h6>Diagnosis</h6>
+            <div className={styles.tableScroll}>
+              {claimsVisit.claim_diagnoses && <ClaimDiagnosisDetails claimDiagnosiss={claimsVisit.claim_diagnoses} />}
+            </div>
+          </section>
+          <section className={styles.section}>
+            <h6>Doctors</h6>
+            <div className={styles.tableScroll}>
+              <ClaimDoctors claimDoctors={claimsVisit.claim_doctors ?? []} />
+            </div>
+          </section>
+          <section className={styles.section}>
+            <h6>Attachments</h6>
+            <ClaimDocuments claimAttachments={claimsVisit.claim_attachments ?? []} />
+          </section>
+        </div>
+      </div>
+      {showCloseClaimModal && (
+        <CloseClaimModal
+          locationUuid={locationUuid}
+          open={showCloseClaimModal}
+          onClose={handleCloseClaimModal}
+          onSuccess={onCloseSuccess}
+          consentToken={claimsVisit.authorization_code}
+        />
+      )}
+      {showSubmitClaimModal && (
+        <SubmitClaimModal
+          locationUuid={locationUuid}
+          open={showSubmitClaimModal}
+          onClose={handleCloseSubmitClaimModal}
+          onSuccess={onSubmitSuccess}
+          claimsVisit={claimsVisit}
+          invoiceNumber={invoiceNumber}
+          visitType={visitType}
+        />
+      )}
+      {showAddDoctorModal && (
+        <AddClaimDoctorModal
+          open={showAddDoctorModal}
+          handleClose={handleCloseAddDoctorModal}
+          claimDoctors={[]}
+          consentToken={claimsVisit.authorization_code}
+        />
+      )}
+    </>
+  );
+};
+export default ClaimVisitDetails;

package/src/billing/dashboard/v3/claim-visits/claim-visits.component.scss

@@ -0,0 +1,5 @@
+.claimVisitsLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}

package/src/billing/dashboard/v3/claim-visits/claim-visits.component.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react';
+import styles from './claim-visits.component.scss';
+import { fetchFacilityClaimVisits, fetchProviderClaimPreview, useProviderClaimPreview } from '../../../billing-claims.resource';
+import { type ProviderClaimPreviewDto, type ClaimsVisit, type ClaimVisitReponse, type ClaimVisitsDto } from '../types';
+import { formatDate, parseDate, showSnackbar } from '@openmrs/esm-framework';
+import {
+  Button,
+  InlineLoading,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import ClaimVisitDetailsModal from './modal/claim-visit-details/claim-visit-details.modal';
+import TableToolbar from '../shared/table-toolbar.component';
+interface claimVisitsProps {
+  locationUuid: string;
+  billingDate: string;
+  onDateChange?: (value: string) => void;
+}
+const ClaimVisits: React.FC<claimVisitsProps> = ({ locationUuid, billingDate, onDateChange }) => {
+  const [claimVisits, setClaimVisits] = useState<ClaimVisitReponse[]>();
+  const [showClaimsVisitModal, setShowClaimsVisitModal] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [consentToken, setConsentToken] = useState<string>();
+  const [search, setSearch] = useState<string>('');
+  const { claimVisit, isLoading } = useProviderClaimPreview(consentToken, locationUuid);
+  useEffect(() => {
+    if (locationUuid && billingDate) {
+      getFacilityClaimVisits();
+    }
+  }, [locationUuid, billingDate]);
+  if (!locationUuid || !billingDate) {
+    return <></>;
+  }
+  function generateClaimsVisitPayload(): ClaimVisitsDto {
+    return {
+      locationUuid: locationUuid ?? '',
+      visitDate: billingDate,
+    };
+  }
+  async function getFacilityClaimVisits() {
+    setLoading(true);
+    const facilityClaimsVisitsPayload = generateClaimsVisitPayload();
+    try {
+      const data = await fetchFacilityClaimVisits(facilityClaimsVisitsPayload);
+      if (data) {
+        setClaimVisits(data);
+      }
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error fetching facility bills',
+        subtitle: 'An error occurred while fetehcing facility bills, please reload or contact support',
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+  async function handleSelectedClaimsVisit(selectedVisit: ClaimVisitReponse) {
+    setConsentToken(selectedVisit.authorizationCode);
+    setShowClaimsVisitModal(true);
+  }
+  function handleCloseClaimsModal() {
+    setShowClaimsVisitModal(false);
+  }
+  return (
+    <>
+      <div className={styles.claimVisitsLayout}>
+        <TableToolbar
+          id="claim-visits"
+          search={search}
+          onSearch={setSearch}
+          date={billingDate}
+          onDate={onDateChange}
+          searchPlaceholder="Search patient or service type…"
+        />
+        <Table aria-label="claim visits" size="sm">
+          <TableHead>
+            <TableRow>
+              <TableHeader>No</TableHeader>
+              <TableHeader>Date</TableHeader>
+              <TableHeader>Patient</TableHeader>
+              <TableHeader>Service Type</TableHeader>
+              <TableHeader>Action</TableHeader>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {(claimVisits ?? [])
+              .filter((cv) => {
+                const term = search.trim().toLowerCase();
+                return !term || `${cv.patientId} ${cv.serviceType}`.toLowerCase().includes(term);
+              })
+              .map((cv, index) => {
+                return (
+                  <>
+                    <TableRow key={cv.id}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>{formatDate(parseDate(cv.visitStart))}</TableCell>
+                      <TableCell>
+                        <div>{cv.patientId}</div>
+                      </TableCell>
+                      <TableCell>{cv.serviceType}</TableCell>
+                      <TableCell>
+                        <Button kind="ghost" onClick={() => handleSelectedClaimsVisit(cv)} size="sm">
+                          {loading ? <InlineLoading description="Fetching data...." /> : 'View Claim'}
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  </>
+                );
+              })}
+          </TableBody>
+        </Table>
+        {
+          showClaimsVisitModal && !claimVisit && isLoading && (
+            <InlineLoading description="Loading claim visit" />
+          )
+        }
+        {showClaimsVisitModal && claimVisit ? (
+          <>
+            <ClaimVisitDetailsModal
+              open={showClaimsVisitModal}
+              claimsVisit={claimVisit}
+              handleClose={handleCloseClaimsModal}
+              locationUuid={locationUuid}
+            />
+          </>
+        ) : (
+          <></>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ClaimVisits;

package/src/billing/dashboard/v3/claim-visits/modal/claim-doctors/add-claim-doctor/add-claim-doctor.modal.scss

@@ -0,0 +1,5 @@
+.addClaimDoctorModalLayout{
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+}

package/src/billing/dashboard/v3/claim-visits/modal/claim-doctors/add-claim-doctor/add-claim-doctor.modal.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import styles from './add-claim-doctor.modal.scss';
+import { Button, Modal, ModalBody, TextInput } from '@carbon/react';
+import { type ClaimDoctor } from '../../../../types';
+
+interface claimInvoiceLinesModalProps {
+  open: boolean;
+  handleClose: () => void;
+  claimDoctors: ClaimDoctor[];
+  consentToken: string;
+}
+const AddClaimDoctorModal: React.FC<claimInvoiceLinesModalProps> = ({ open, handleClose, claimDoctors, consentToken }) => {
+  function handleDoctorChange(natId: string){
+  }
+  function handleDoctorSearch(){
+
+  }
+  return (
+    <>
+        <Modal
+          modalHeading="Add Claim Doctor"
+          open={open}
+          size="md"
+          onSecondarySubmit={() => {}}
+          onRequestClose={handleClose}
+          onRequestSubmit={() => {}}
+          primaryButtonText="Add"
+          secondaryButtonText="Close"
+        >
+          <ModalBody>
+           <div className={styles.addClaimDoctorModalLayout}>
+            <div className={styles.addClaimDoctorlRow}>
+              <TextInput
+                id="doctor-national-id"
+                labelText="Doctor National ID"
+                type='number'
+                onChange={(e)=>handleDoctorChange(e.target?.value ?? '')}
+              />
+            </div>
+            <div className={styles.addClaimDoctorlRow}>
+                <Button onClick={handleDoctorSearch}>Search</Button>
+            </div>
+            </div>
+          </ModalBody>
+        </Modal>
+    </>
+  );
+};
+export default AddClaimDoctorModal;

package/src/billing/dashboard/v3/claim-visits/modal/claim-invoice-lines/claim-invoice-lines.modal.scss

@@ -0,0 +1,7 @@
+.claimInvoiceLinesModalLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 5px;
+    padding: 5px 5px;
+}

package/src/billing/dashboard/v3/claim-visits/modal/claim-invoice-lines/claim-invoice-lines.modal.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { type ClaimInvoiceLine } from '../../../types';
+import ClaimInvoiceLineDetails from '../../claim-invoice-line-details/claim-invoice-line-details.component';
+import styles from './claim-invoice-lines.modal.scss';
+import { Modal, ModalBody } from '@carbon/react';
+
+interface claimInvoiceLinesModalProps {
+  open: boolean;
+  handleClose: () => void;
+  claimInvoiceLines: ClaimInvoiceLine[];
+  consentToken: string;
+}
+const ClaimInvoiceLinesModal: React.FC<claimInvoiceLinesModalProps> = ({ open, handleClose, claimInvoiceLines, consentToken }) => {
+  return (
+    <>
+        <Modal
+          modalHeading="Invoice Line Details"
+          open={open}
+          size="lg"
+          onSecondarySubmit={() => {}}
+          onRequestClose={handleClose}
+          onRequestSubmit={() => {}}
+          primaryButtonText=""
+          secondaryButtonText="Close"
+        >
+          <ModalBody>
+           <div className={styles.claimInvoiceLinesModalLayout}>
+              <ClaimInvoiceLineDetails claimInvoiceLines={claimInvoiceLines} consentToken={consentToken}/>
+            </div>
+          </ModalBody>
+        </Modal>
+    </>
+  );
+};
+export default ClaimInvoiceLinesModal;

package/src/billing/dashboard/v3/claim-visits/modal/claim-visit-details/claim-visit-details.modal.scss

@@ -0,0 +1,6 @@
+.cvModalLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 10px;
+}

package/src/billing/dashboard/v3/claim-visits/modal/claim-visit-details/claim-visit-details.modal.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styles from './claim-visit-details.modal.scss';
+import { Modal, ModalBody } from '@carbon/react';
+import ClaimVisitDetails from '../../claim-visit-details/claim-visit-details.component';
+import { type ClaimsVisit } from '../../../types';
+interface claimVisitDetailsModalProps {
+  open: boolean;
+  claimsVisit: ClaimsVisit;
+  locationUuid: string;
+  handleClose: () => void;
+}
+const ClaimVisitDetailsModal: React.FC<claimVisitDetailsModalProps> = ({ open, claimsVisit, handleClose, locationUuid }) => {
+  return (
+    <>
+      <Modal
+        open={open}
+        size="lg"
+        onSecondarySubmit={() => {}}
+        onRequestClose={handleClose}
+        onRequestSubmit={() => {}}
+        primaryButtonText=""
+        secondaryButtonText="Close"
+      >
+        <ModalBody>
+          <div className={styles.cvModalLayout}>
+            <ClaimVisitDetails claimsVisit={claimsVisit} locationUuid={locationUuid} />
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+export default ClaimVisitDetailsModal;