@ampath/esm-dha-workflow-app 4.0.0-claim-workflows.159

package/src/registry/client-details/client-details.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { type HieClient } from '../types';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@carbon/react';
+import { generateHieClientDetails } from '../utils/hie-adapter';
+interface ClientDetailsProps {
+  client: HieClient;
+}
+export const ClientDetails: React.FC<ClientDetailsProps> = ({ client }) => {
+  const clientDetails = useMemo(() => generateHieClientDetails(client), [client]);
+
+  if (!client || !clientDetails) {
+    return (
+      <>
+        <h4>No patient Data to Display</h4>
+      </>
+    );
+  }
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableHeader>Field</TableHeader>
+            <TableHeader>Value</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {Object.keys(clientDetails).map((key) => (
+            <TableRow>
+              <TableCell>{key}</TableCell>
+              <TableCell>{clientDetails[key]}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </>
+  );
+};
+
+export default ClientDetails;

package/src/registry/eligibility/eligibility-details/eligibility-details.scss

@@ -0,0 +1,38 @@
+.clientEligibilityDetailsLayout{
+    display: flex;
+    flex-direction: column;
+    row-gap: 10px;
+    width: 100%;
+    padding: 15px 15px;
+    .sectionHeader{
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+    }
+    .sectionContent{
+        display: flex;
+        flex-direction: column;
+        row-gap: 10px;
+        width: 100%;
+    }
+}
+
+.clientDetails{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+.detailData{
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 0.75rem
+}
+.detailText{
+    min-width: 150px;
+}
+.schemeTable{
+    display: flex;
+    flex-direction: row;
+    min-width: 80vw;
+    overflow-x: scroll;
+}

package/src/registry/eligibility/eligibility-details/eligibility-details.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { type HieClientEligibility } from "../../types";
+import styles from './eligibility-details.scss';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag } from "@carbon/react";
+import { getTagType } from "../../../shared/utils/get-tag-type";
+
+interface EligibilityDetailsProps{
+   hieClientEligibility: HieClientEligibility
+}
+
+const EligibilityDetails: React.FC<EligibilityDetailsProps> = ({hieClientEligibility})=>{
+   return <>
+   <div className={styles.clientEligibilityDetailsLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>Patient Eligibilty Details</h4>
+            </div>
+            <div className={styles.sectionContent}>
+              <div className={styles.clientDetails}>
+                <div>
+                  <div className={styles.detailData}>
+                    <strong className={styles.detailText}>Full Name</strong>
+                    <span>{hieClientEligibility.fullName}</span>
+                  </div>
+                  <div className={styles.detailData}>
+                    <strong className={styles.detailText}>CR No</strong>
+                    <span>{hieClientEligibility.memberCrNumber}</span>
+                  </div>
+                  <div className={styles.detailData}>
+                    <strong className={styles.detailText}>Status</strong>
+                    <span>{hieClientEligibility.statusDesc}</span>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.schemeSection}>
+                <div className={styles.sectionHeader}>
+                  <h4 className={styles.sectionTitle}>Scheme Details</h4>
+                </div>
+                <div className={styles.schemeTable}>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        <TableHeader>No</TableHeader>
+                        <TableHeader>Name</TableHeader>
+                        <TableHeader>Member Type</TableHeader>
+                        <TableHeader>Policy</TableHeader>
+                        <TableHeader>Coverage</TableHeader>
+                        <TableHeader>Coverage Period</TableHeader>
+                        <TableHeader>Coverage Status</TableHeader>
+                        <TableHeader>Coverage Reason</TableHeader>
+                        <TableHeader>Principal Contributor</TableHeader>
+                        <TableHeader>Principal Contributor Employment Type</TableHeader>
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {hieClientEligibility.schemes.map((scheme, id) => {
+                        return (
+                          <TableRow key={id}>
+                            <TableCell>{id + 1}</TableCell>
+                            <TableCell>{scheme.schemeName}</TableCell>
+                            <TableCell>{scheme.memberType}</TableCell>
+                            <TableCell>
+                              {scheme.policy ? (
+                                <>
+                                  {scheme.policy.number} ({scheme.policy.startDate} - {scheme.policy.endDate})
+                                </>
+                              ) : (
+                                <></>
+                              )}
+                            </TableCell>
+                            <TableCell>
+                              <Tag
+                                className="some-class"
+                                size="lg"
+                                title="Status"
+                                type={getTagType(scheme.coverage.status)}
+                              >
+                                {scheme.coverage.status === '1' ? 'Active' : 'Not Active'}
+                              </Tag>
+                            </TableCell>
+                            <TableCell>
+                              {scheme.coverage.startDate} - {scheme.coverage.endDate}
+                            </TableCell>
+                            <TableCell>{scheme.coverage.message}</TableCell>
+                            <TableCell>{scheme.coverage.reason}</TableCell>
+                            <TableCell>
+                              {scheme.principalContributor.crNumber}
+                            </TableCell>
+                            <TableCell>{scheme.principalContributor.employmentType}</TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </div>
+              </div>
+            </div>
+          </div>
+   </>
+}
+
+export default EligibilityDetails;

package/src/registry/eligibility/eliigibility-tags/eligibility-tags.scss

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

package/src/registry/eligibility/eliigibility-tags/eligibility-tags.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react';
+import { type EligibilityFilterDto, type HieClientEligibility } from '../../types';
+import { getTagType } from '../../../shared/utils/get-tag-type';
+import { Button, InlineLoading, Tag } from '@carbon/react';
+import { getClientEligibityStatus } from '../../../shared/services/eligibility.resource';
+import styles from './eligibility-tags.scss';
+import ClientEligibilityDetailsModal from '../modal/eligibility-details.modal';
+import { showSnackbar } from '@openmrs/esm-framework';
+interface EligibilityTags {
+  crId: string;
+  locationUuid: string;
+}
+const EligibilityTags: React.FC<EligibilityTags> = ({ crId, locationUuid }) => {
+  const [clientEligibility, setClientEligibility] = useState<HieClientEligibility>();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [displayEligibilityDetailsModal, setDisplayEligibilityDetailsModal] = useState<boolean>(false);
+  useEffect(() => {
+    getPatientEligibilityStatus();
+  }, [crId]);
+
+  if (!crId) {
+    return <></>;
+  }
+
+  function generatePatientEligibilityPayload(): EligibilityFilterDto {
+    const payload: EligibilityFilterDto = {
+      requestIdNumber: '',
+      requestIdType: '',
+      locationUuid: locationUuid,
+    };
+
+    if (crId) {
+      payload.requestIdNumber = crId;
+      payload.requestIdType = '3';
+    }
+
+    return payload;
+  }
+
+  async function getPatientEligibilityStatus() {
+    setIsLoading(true);
+    const payload = generatePatientEligibilityPayload();
+    if (!isValidEligibilityPayload(payload)) {
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const resp = await getClientEligibityStatus(payload);
+      setClientEligibility(resp);
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Failed getting eligibility status',
+        subtitle: 'An error occurred while fetching eligibility status. Please try again or contact support',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  function isValidEligibilityPayload(eligibilityFilterDto: EligibilityFilterDto): boolean {
+    if (!eligibilityFilterDto.locationUuid) {
+      return false;
+    }
+    if (!eligibilityFilterDto.requestIdNumber) {
+      return false;
+    }
+    if (!eligibilityFilterDto.requestIdType) {
+      return false;
+    }
+
+    return true;
+  }
+  function handleModalClose() {
+    setDisplayEligibilityDetailsModal(false);
+  }
+  function showEligibilityDetailsModal() {
+    setDisplayEligibilityDetailsModal(true);
+  }
+  return (
+    <>
+      <div className={styles.eligibilityTagsLayout}>
+        {isLoading ? (
+          <>
+            <InlineLoading description="Fetching Eligibility data..." />
+          </>
+        ) : (
+          <>
+            {clientEligibility ? (
+              <>
+                {clientEligibility.schemes && clientEligibility.schemes.length > 0 ? (
+                  <>
+                    {clientEligibility.schemes.map((s) => {
+                      return (
+                        <div>
+                          <Tag className="some-class" size="md" title="Status" type={getTagType(s.coverage.status)}>
+                            {s.schemeName} : {s.coverage.status === '1' ? 'Active' : 'Not Active'}
+                          </Tag>
+                        </div>
+                      );
+                    })}
+                  </>
+                ) : (
+                  <div>
+                    <Tag className="some-class" size="md" title="Status" type="gray">
+                      No Insurance schemes found
+                    </Tag>
+                  </div>
+                )}
+              </>
+            ) : (
+              <></>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+export default EligibilityTags;

package/src/registry/eligibility/modal/eligibility-details.modal.tsx

@@ -0,0 +1,45 @@
+import { Modal, ModalBody, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag } from '@carbon/react';
+import { type HieClientEligibility } from '../../types';
+import React from 'react';
+import styles from './eligibility-details.modal.scss';
+import { getTagType } from '../../../shared/utils/get-tag-type';
+import EligibilityDetails from '../eligibility-details/eligibility-details';
+
+interface ClientEligibilityDetailsModalProps {
+  hieClientEligibility: HieClientEligibility;
+  open: boolean;
+  onModalClose: () => void;
+  onSubmit: () => void;
+}
+
+const ClientEligibilityDetailsModal: React.FC<ClientEligibilityDetailsModalProps> = ({
+  hieClientEligibility,
+  open,
+  onModalClose,
+  onSubmit,
+}) => {
+  if (!hieClientEligibility) {
+    return <>No Client data</>;
+  }
+  return (
+    <>
+      <Modal
+        open={open}
+        size="lg"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={onModalClose}
+        onRequestSubmit={onModalClose}
+        primaryButtonText="Done"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <EligibilityDetails
+           hieClientEligibility={hieClientEligibility}
+          />
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default ClientEligibilityDetailsModal;

package/src/registry/modal/client-details-modal/client-details-modal.scss

@@ -0,0 +1,28 @@
+.clientDetailsLayout{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    row-gap: 5px;
+}
+.sectionHeader{
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+.sectionContent{
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+}
+.actionSection{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+}
+.btnContainer{
+    margin-top: 2px;
+    margin-bottom: 2px;
+}

package/src/registry/modal/client-details-modal/client-details-modal.tsx

@@ -0,0 +1,119 @@
+import { Modal, ModalBody, Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import { type HieClientEligibility, type EligibilityFilterDto, type HieClient } from '../../types';
+import React, { useEffect, useState } from 'react';
+import styles from './client-details-modal.scss';
+import ClientDetails from '../../client-details/client-details';
+import { showSnackbar, useSession } from '@openmrs/esm-framework';
+import { getClientEligibityStatus } from '../../../shared/services/eligibility.resource';
+import EligibilityDetails from '../../eligibility/eligibility-details/eligibility-details';
+
+interface ClientDetailsModalProps {
+  client: HieClient;
+  open: boolean;
+  onModalClose: () => void;
+  onSubmit: () => void;
+  onSendClientToTriage: (crId: string) => void;
+}
+
+const ClientDetailsModal: React.FC<ClientDetailsModalProps> = ({
+  client,
+  open,
+  onModalClose,
+  onSubmit,
+  onSendClientToTriage,
+}) => {
+  const session = useSession();
+  const locationUuid = session.sessionLocation?.uuid;
+  const [clientEligibility, setClientEligibility] = useState<HieClientEligibility>();
+  useEffect(() => {
+    if (client && client.id) {
+      getPatientEligibilityStatus();
+    }
+  }, [client]);
+  if (!client) {
+    return <>No Client data</>;
+  }
+  function generatePatientEligibilityPayload(): EligibilityFilterDto {
+    const payload: EligibilityFilterDto = {
+      requestIdNumber: '',
+      requestIdType: '',
+      locationUuid: locationUuid ?? '',
+    };
+
+    if (client && client.id) {
+      payload.requestIdNumber = client.id;
+      payload.requestIdType = '3';
+    }
+
+    return payload;
+  }
+
+  async function getPatientEligibilityStatus() {
+    const payload = generatePatientEligibilityPayload();
+    if (!isValidEligibilityPayload(payload)) {
+      return;
+    }
+    try {
+      const resp = await getClientEligibityStatus(payload);
+      setClientEligibility(resp);
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        title: 'Failed getting eligibility status',
+        subtitle: 'An error occurred while fetching eligibility status. Please try again or contact support',
+      });
+    }
+  }
+  function isValidEligibilityPayload(eligibilityFilterDto: EligibilityFilterDto): boolean {
+    if (!eligibilityFilterDto.locationUuid) {
+      return false;
+    }
+    if (!eligibilityFilterDto.requestIdNumber) {
+      return false;
+    }
+    if (!eligibilityFilterDto.requestIdType) {
+      return false;
+    }
+
+    return true;
+  }
+  return (
+    <>
+      <Modal
+        open={open}
+        size="lg"
+        onSecondarySubmit={onModalClose}
+        onRequestClose={onModalClose}
+        onRequestSubmit={() => onSendClientToTriage(client.id)}
+        primaryButtonText="Send To Triage"
+        secondaryButtonText="Cancel"
+      >
+        <ModalBody>
+          <div className={styles.clientDetailsLayout}>
+            <div className={styles.sectionHeader}>
+              <h4 className={styles.sectionTitle}>Patient Details</h4>
+            </div>
+            <div className={styles.sectionContent}>
+              <Tabs>
+                <TabList contained>
+                  <Tab>Patient Details</Tab>
+                  <Tab>Eligibility Details</Tab>
+                </TabList>
+                <TabPanels>
+                  <TabPanel>
+                    <ClientDetails client={client} />
+                  </TabPanel>
+                  <TabPanel>
+                    {clientEligibility && <EligibilityDetails hieClientEligibility={clientEligibility} />}
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </>
+  );
+};
+
+export default ClientDetailsModal;

package/src/registry/modal/otp-verification-modal/otp-verification-modal.scss

@@ -0,0 +1,43 @@
+.modalVerificationLayout {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  width: 100%;
+}
+.sectionHeader{
+  display: flex;
+  flex-direction: column;
+  column-gap: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.otpSection{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  column-gap: 15px;
+}
+.otpForm{
+  display: flex;
+  flex-direction: column;
+  width: 60%;
+  row-gap: 20px;
+}
+.otpTimer{
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  padding-top: 15%;
+}
+
+.formRow{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    column-gap: 5px;
+    margin-top: 10px;
+}
+.formControl{
+    width: 70%;
+    margin-top: 10px;
+}