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

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

@@ -0,0 +1,133 @@
+import React, { useEffect, useState } from 'react';
+import styles from './claim-visits.component.scss';
+import { fetchFacilityClaimVisits } from '../../../billing-claims.resource';
+import { 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>('');
+  // The modal loads the claim from the token itself — including the wait, and the guard
+  // against SWR serving the claim opened before this one.
+  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 && consentToken ? (
+          <ClaimVisitDetailsModal
+            open={showClaimsVisitModal}
+            consentToken={consentToken}
+            handleClose={handleCloseClaimsModal}
+            locationUuid={locationUuid}
+          />
+        ) : (
+          <></>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ClaimVisits;

package/src/billing/dashboard/v2/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/v2/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/v2/claim-visits/modal/claim-visit-details/claim-visit-details.modal.scss

@@ -0,0 +1,17 @@
+@use '@carbon/layout';
+
+/* Same rhythm as the claim's own page, so a claim read in the modal and a claim read on
+   its route are spaced alike. */
+.cvModalLayout {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: layout.$spacing-05;
+}
+
+/* Shown when the claim itself never arrived. */
+.cvModalMessage {
+    margin: 0;
+    font-size: 0.875rem;
+    color: #8e6a00;
+}

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

@@ -0,0 +1,56 @@
+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 ClaimDetailsByToken from '../../claim-visit-details/claim-details-by-token.component';
+import { type ClaimsVisit } from '../../../types';
+interface claimVisitDetailsModalProps {
+  open: boolean;
+  locationUuid: string;
+  handleClose: () => void;
+  /** An already-loaded claim. Give this or `consentToken`. */
+  claimsVisit?: ClaimsVisit;
+  /** Load the claim live from its consent token — for callers holding a claim listing
+      rather than the claim itself. */
+  consentToken?: string;
+  /** Only meaningful alongside `claimsVisit`: whether that claim's state has been
+      confirmed live. A claim loaded from a token is live by definition. */
+  claimStateUnconfirmed?: boolean;
+}
+const ClaimVisitDetailsModal: React.FC<claimVisitDetailsModalProps> = ({
+  open,
+  claimsVisit,
+  consentToken,
+  handleClose,
+  locationUuid,
+  claimStateUnconfirmed,
+}) => {
+  return (
+    <>
+      <Modal
+        open={open}
+        size="lg"
+        onSecondarySubmit={() => {}}
+        onRequestClose={handleClose}
+        onRequestSubmit={() => {}}
+        primaryButtonText=""
+        secondaryButtonText="Close"
+      >
+        <ModalBody>
+          <div className={styles.cvModalLayout}>
+            {claimsVisit ? (
+              <ClaimVisitDetails
+                claimsVisit={claimsVisit}
+                locationUuid={locationUuid}
+                claimStateUnconfirmed={claimStateUnconfirmed}
+              />
+            ) : (
+              <ClaimDetailsByToken consentToken={consentToken ?? ''} locationUuid={locationUuid} />
+            )}
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+export default ClaimVisitDetailsModal;

package/src/billing/dashboard/v2/claim-visits/modal/close-claim/close-claim.modal.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import { Modal, ModalBody, Select, SelectItem, TextInput } from '@carbon/react';
+import styles from './close-claim.modal.scss';
+import { addClaimItem, closeClaim } from '../../../../../billing-claims.resource';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { ClaimCloseReasonType, type CloseClaimDto } from '../../../types';
+
+interface closeClaimModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  consentToken: string;
+  locationUuid: string;
+}
+const CloseClaimModal: React.FC<closeClaimModalProps> = ({ open, onClose, onSuccess, locationUuid, consentToken }) => {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [cancelReasonType, setCancelReasonType] = useState<string>('');
+  const [cancelReason, setCancelReason] = useState<string>('');
+  const closeClaimReasonTypes = Object.values(ClaimCloseReasonType);
+  async function handleCloseClaim() {
+    setLoading(true);
+    try {
+      const closeClaimPayload = getCloseClaimPayload();
+      if (!isValidClaimClosePayload(closeClaimPayload)) {
+        return false;
+      }
+
+      const resp = await closeClaim(closeClaimPayload);
+      if ('error' in resp) {
+        showSnackbar({
+          title: 'Error Closing claim',
+          kind: 'error',
+          subtitle: 'An error occurred while closing the claim. Kindy retry or contact support',
+        });
+        onSuccess();
+      } else {
+        showSnackbar({
+          title: 'Sucess Closing Claim',
+          kind: 'success',
+          subtitle: 'Claim closed successfully',
+        });
+        onSuccess();
+      }
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Error Closing Claim',
+        subtitle: 'An error occurred while closing the claim. Kindy retry or contact support',
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+  function getCloseClaimPayload(): CloseClaimDto {
+    return {
+      consentToken: consentToken,
+      cancelReasonType: cancelReasonType ?? '',
+      cancelReasonText: cancelReason ?? '',
+      locationUuid: locationUuid,
+    };
+  }
+  function holderFunction() {
+    return;
+  }
+  function cancelClaimReasonTypeHandler(cancelReasonType: string) {
+    setCancelReasonType(cancelReasonType);
+  }
+  function cancelClaimReasonHandler(cancelReason: string) {
+    setCancelReason(cancelReason);
+  }
+  function isValidClaimClosePayload(closeClaimDto: CloseClaimDto): boolean {
+    if (!closeClaimDto.cancelReasonText) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Missing Cancel Reason',
+        subtitle: 'Please add a cancel reason',
+      });
+      return false;
+    }
+    if (!closeClaimDto.cancelReasonType) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Missing Cancel Reason Type',
+        subtitle: 'Please add a cancel reason type',
+      });
+      return false;
+    }
+    return true;
+  }
+  return (
+    <>
+      <Modal
+        modalHeading="Close Claim"
+        open={open}
+        size="md"
+        onSecondarySubmit={onClose}
+        onRequestClose={onClose}
+        onRequestSubmit={loading ? holderFunction : handleCloseClaim}
+        primaryButtonText={loading ? 'Closing Claim...' : 'Close Claim'}
+        secondaryButtonText="Close"
+      >
+        <ModalBody>
+          <div className={styles.closeClaimModalLayout}>
+            <div className={styles.closeClaimModalRow}>
+              <Select
+                id="cancel_reason_type"
+                labelText="Cancel Reason Type"
+                onChange={($event) => cancelClaimReasonTypeHandler($event.target.value)}
+              >
+                <SelectItem value="" text="Select" />;
+                {closeClaimReasonTypes.map((c) => {
+                  return <SelectItem value={c} text={c} />;
+                })}
+              </Select>
+            </div>
+            <div className={styles.closeClaimModalRow}>
+              <TextInput
+                id="cancel_reason_text"
+                labelText="Cancel Reason"
+                onChange={($event) => cancelClaimReasonHandler($event.target.value)}
+              />
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+export default CloseClaimModal;

package/src/billing/dashboard/v2/claim-visits/modal/submit-claim/submit-claim.modal.tsx

@@ -0,0 +1,204 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button, Modal, ModalBody, Row, Select, SelectItem, TextInput } from '@carbon/react';
+import { submitClaim } from '../../../../../billing-claims.resource';
+import { Patient, showModal, showSnackbar } from '@openmrs/esm-framework';
+import { DischargeReasonType, type ClaimsVisit, type SubmitClaimDto } from '../../../types';
+import { type HieClient, HieIdentificationType } from '../../../../../../registry/types';
+import { Intervention, VisitType } from '../../../../../../claims';
+import { searchPatientByCrNumber } from '../../../../../../resources/patient-search.resource';
+import { IdentifierTypesUuids } from '../../../../../../resources/identifier-types';
+import ClaimsConsentExtension from '../../../../../../registry/modal/otp-verification-modal/extension/claims-consent.extension';
+
+interface submitClaimModalProps {
+    open: boolean;
+    onClose: () => void;
+    onSuccess: () => void;
+    claimsVisit: ClaimsVisit;
+    invoiceNumber: string;
+    locationUuid: string;
+    visitType: VisitType;
+}
+const SubmitClaimModal: React.FC<submitClaimModalProps> = ({ open, onClose, onSuccess, locationUuid, claimsVisit, invoiceNumber, visitType }) => {
+    const [loading, setLoading] = useState<boolean>(false);
+    const [confirmOpen, setConfirmOpen] = useState<boolean>(false);
+    const [otp, setOtp] = useState("");
+    const [authGuid, setAuthGuid] = useState("");
+    const [dischargeReason, setDischargeReason] = useState<DischargeReasonType>();
+    const [notes, setNotes] = useState("");
+    const DischargeReasonTypes = Object.values(DischargeReasonType);
+    const [patient, setPatient] = useState<Patient>();
+
+    useEffect(() => {
+        const fn = async () => {
+            const response = await searchPatientByCrNumber(claimsVisit.member_number);
+            if (response.results.length) {
+                setPatient(response.results[0]);
+            }
+        }
+
+        if (claimsVisit) {
+            fn();
+        }
+    }, [claimsVisit]);
+
+    const consentComplete = useMemo(() => {
+        if (otp || authGuid) {
+            return true;
+        }
+        return false;
+    }, [otp, authGuid]);
+
+    const invalidValues = useMemo(() => {
+        if (invoiceNumber && claimsVisit) {
+            return false;
+        }
+        return true;
+    }, [invoiceNumber, claimsVisit]);
+
+    function onClientConsent({ otp, authGuid }: { otp?: string, authGuid?: string }) {
+        if (otp) {
+            setOtp(otp);
+        }
+        if (authGuid) {
+            setAuthGuid(authGuid);
+        }
+    }
+
+    const nationalId = useMemo(() => {
+        if (patient) {
+            const identifiers = patient.identifiers;
+            return identifiers.find(i => i.identifierType.uuid === IdentifierTypesUuids.NATIONAL_ID_UUID).identifier ?? "";
+        }
+    }, [patient]);
+
+    const consentPatient = useMemo<HieClient>(() => {
+        return {
+            id: String(claimsVisit.member_number),
+            first_name: claimsVisit.patient_name ?? '',
+            identification_type: HieIdentificationType.NationalID,
+            identification_number: nationalId ? String(nationalId) : ""
+        } as unknown as HieClient;
+    }, [claimsVisit, nationalId]);
+
+    const getIntervention = () => {
+        const interventions = claimsVisit.interventions;
+        if (interventions && interventions.length) {
+            const intervention = interventions[interventions.length - 1];
+            return {
+                code: intervention.intervention_code,
+                paymentMechanism: intervention.intervention_payment_mechanism
+            } as Intervention;
+        }
+    }
+
+    async function handleSubmitClaim() {
+        setConfirmOpen(false);
+        setLoading(true);
+        try {
+            const submitClaimPayload = getSubmitClaimPayload();
+            const resp = await submitClaim(submitClaimPayload, claimsVisit.service_type);
+            if ('error' in resp) {
+                let message = 'message' in resp ? String(resp?.message) : "An error occurred while submitting the claim. Kindy retry or contact support"
+                showSnackbar({
+                    title: 'Error submitting claim',
+                    kind: 'error',
+                    subtitle: message,
+                });
+                onSuccess();
+            } else {
+                showSnackbar({
+                    title: 'Success submitting claim',
+                    kind: 'success',
+                    subtitle: 'Claim submitted successfully',
+                });
+                onSuccess();
+            }
+        } catch (error) {
+            showSnackbar({
+                kind: 'error',
+                title: 'Error submitting claim',
+                subtitle: 'An error occurred while submitting the claim. Kindy retry or contact support',
+            });
+        } finally {
+            setLoading(false);
+        }
+    }
+    function getSubmitClaimPayload(): SubmitClaimDto {
+        let payload = {
+            consentToken: claimsVisit.authorization_code,
+            invoiceNumber,
+            locationUuid,
+            dischargeReason
+        };
+        if (otp) {
+            payload["otp"] = otp;
+        }
+        if (authGuid) {
+            payload["dischargeAuthGuid"] = authGuid;
+        }
+        if (notes) {
+            payload["notes"] = notes;
+        }
+        return payload;
+    }
+    function holderFunction() {
+        return;
+    }
+    return (
+        <>
+            <Modal
+                modalHeading="Submit Claim"
+                open={open}
+                size="md"
+                onSecondarySubmit={onClose}
+                onRequestClose={onClose}
+                onRequestSubmit={!invalidValues ? (loading ? holderFunction : (consentComplete ? () => setConfirmOpen(true) : null)) : null}
+                primaryButtonText={!invalidValues ? (loading ? 'Submitting claim...' : (consentComplete ? 'Submit claim' : null)) : null}
+                secondaryButtonText="Close"
+            >
+                <ModalBody>
+                    <Row>
+                        <Select
+                            id="discharge-reason"
+                            labelText="Discharge reason"
+                            onChange={($event) => setDischargeReason($event.target.value as DischargeReasonType)}
+                        >
+                            <SelectItem value="" text="Select" />;
+                            {DischargeReasonTypes.map((c) => {
+                                return <SelectItem value={c} text={c} />;
+                            })}
+                        </Select>
+                    </Row>
+                    <Row>
+                        <TextInput
+                            id="notes"
+                            labelText="Notes"
+                            onChange={($event) => setNotes($event.target.value)}
+                        />
+                    </Row>
+                    {
+                        (dischargeReason && notes) &&
+                        <ClaimsConsentExtension patient={consentPatient} intervention={getIntervention()} crIdentifierId={claimsVisit.member_number} visitType={visitType} onClientConsent={onClientConsent} consentToken={claimsVisit.authorization_code} isDischarge={true}/>
+                    }
+                </ModalBody>
+            </Modal>
+            <Modal
+                modalHeading="Confirm claim submission"
+                open={confirmOpen}
+                size="sm"
+                onRequestClose={() => setConfirmOpen(false)}
+                onRequestSubmit={handleSubmitClaim}
+                primaryButtonText="Yes, submit claim"
+                secondaryButtonText="Cancel"
+            >
+                <ModalBody>
+                    <p>
+                        Are you sure you want to submit this claim to SHA? Please confirm the details are correct — this
+                        can’t be undone.
+                    </p>
+                </ModalBody>
+            </Modal>
+        </>
+    );
+};
+export default SubmitClaimModal;

package/src/billing/dashboard/v2/claim-visits/shared/_empty-state.scss

@@ -0,0 +1,28 @@
+/* The look a section wears when what is missing from it is holding the claim up, as
+   against a section that simply happens to be unused.
+
+   Shared rather than written twice: the diagnoses table and the doctors line render their
+   empty states from different components, and if the two drifted apart the colour would
+   stop meaning one thing. */
+
+@mixin blocking-callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.75rem;
+  border-left: 3px solid #da1e28;
+  background: #fff1f1;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.4;
+  color: #a2191f;
+  overflow-wrap: anywhere;
+}
+
+@mixin blocking-callout-icon {
+  flex-shrink: 0;
+  /* Lines the glyph up with the first line of text beside it. */
+  margin-top: 0.0625rem;
+  color: #da1e28;
+}