Implemented Insurance Details Page

src/Components/HCX/models.ts

@@ -26,8 +26,8 @@ export interface HCXPolicyModel {
   patient_object?: PatientModel;
   subscriber_id: string;
   policy_id: string;
-  insurer_id: string;
-  insurer_name: string;
+  insurer_id?: string;
+  insurer_name?: string;
   status?: HCXPolicyStatus;
   priority?: "Immediate" | "Normal" | "Deferred";
   purpose?: "Auth Requirements" | "Benefits" | "Discovery" | "Validation";

src/Components/Patient/InsuranceDetails.tsx

@@ -0,0 +1,62 @@
+import { lazy } from "react";
+
+import Page from "../Common/components/Page";
+
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import { HCXPolicyModel } from "../HCX/models";
+import { InsuranceDetialsCard } from "./InsuranceDetailsCard";
+
+const Loading = lazy(() => import("../Common/Loading"));
+
+interface IProps {
+  facilityId: string;
+  id: string;
+}
+
+export const InsuranceDetails = (props: IProps) => {
+  const { facilityId, id } = props;
+
+  const { data: insuranceDetials, loading } = useQuery(routes.listHCXPolicies, {
+    query: {
+      patient: id,
+    },
+  });
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  return (
+    <Page
+      title="Insurance Details"
+      crumbsReplacements={{
+        [facilityId]: {
+          name: insuranceDetials?.results[0]?.patient_object?.facility_object
+            ?.name,
+        },
+        [id]: {
+          name: insuranceDetials?.results[0]?.patient_object?.name,
+        },
+      }}
+      className="w-full overflow-x-hidden"
+    >
+      {loading ? (
+        <Loading />
+      ) : insuranceDetials?.count === 0 ? (
+        <div className="mt-5 flex w-full items-center justify-center text-xl font-bold text-gray-500">
+          No Insurance Details Available
+        </div>
+      ) : (
+        <section
+          className="mt-5 grid grid-cols-1 gap-6 lg:grid-cols-3"
+          data-testid="patient-details"
+        >
+          {insuranceDetials?.results.map((data: HCXPolicyModel) => (
+            <InsuranceDetialsCard data={data} />
+          ))}
+        </section>
+      )}
+    </Page>
+  );
+};

src/Components/Patient/InsuranceDetailsCard.tsx

@@ -0,0 +1,78 @@
+import ButtonV2 from "../Common/components/ButtonV2";
+import { HCXPolicyModel } from "../HCX/models";
+import { navigate } from "raviger";
+
+interface InsuranceDetails {
+  data?: HCXPolicyModel;
+  showViewAllDetails?: boolean;
+}
+
+export const InsuranceDetialsCard = (props: InsuranceDetails) => {
+  const { data, showViewAllDetails } = props;
+
+  return (
+    <div className="w-full">
+      <div className="h-full space-y-2 rounded-lg bg-white p-7 shadow">
+        <div className="border-b border-dashed pb-2 text-xl font-bold text-gray-900">
+          Policy Details
+        </div>
+        {data ? (
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-2">
+            <div className=" ">
+              <div className="text-sm font-semibold leading-5 text-zinc-400">
+                Member ID
+              </div>
+              <div className="mt-1 whitespace-normal break-words text-sm font-medium leading-5">
+                {data.subscriber_id || ""}
+              </div>
+            </div>
+            <div className=" ">
+              <div className="text-sm font-semibold leading-5 text-zinc-400">
+                Policy ID / Policy Name
+              </div>
+              <div className="mt-1 whitespace-normal break-words text-sm font-medium leading-5">
+                {data.policy_id || ""}
+              </div>
+            </div>
+            <div className="sm:col-span-1">
+              <div className="text-sm font-semibold leading-5 text-zinc-400">
+                Insurer ID
+              </div>
+              <div className="mt-1 whitespace-normal break-words text-sm font-medium leading-5">
+                {data.insurer_id || ""}
+              </div>
+            </div>
+            <div className="sm:col-span-1">
+              <div className="text-sm font-semibold leading-5 text-zinc-400">
+                Insurer Name
+              </div>
+              <div className="mt-1 whitespace-normal break-words text-sm font-medium leading-5">
+                {data.insurer_name || ""}
+              </div>
+            </div>
+            {showViewAllDetails && (
+              <div className=" first-letter: sm:col-span-2  md:ml-auto md:mt-10 ">
+                <div className=" mt-1 whitespace-normal break-words text-sm font-medium leading-5">
+                  <ButtonV2
+                    onClick={() => {
+                      navigate(
+                        `/facility/${data.patient_object?.facility_object?.id}/patient/${data.patient_object?.id}/insurance`
+                      );
+                    }}
+                    className="h-auto whitespace-pre-wrap border border-gray-500 bg-white text-black hover:bg-gray-300"
+                  >
+                    View All Details
+                  </ButtonV2>
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
+            No Insurance Details Available
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/Components/Patient/PatientHome.tsx

@@ -32,6 +32,9 @@ import UserAutocompleteFormField from "../Common/UserAutocompleteFormField";
 import dayjs from "../../Utils/dayjs";
 import { triggerGoal } from "../../Integrations/Plausible";
 import useAuthUser from "../../Common/hooks/useAuthUser";
+import useQuery from "../../Utils/request/useQuery";
+import routes from "../../Redux/api";
+import { InsuranceDetialsCard } from "./InsuranceDetailsCard";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -91,6 +94,13 @@ export const PatientHome = (props: any) => {
     });
   };
 
+  const { data: insuranceDetials } = useQuery(routes.listHCXPolicies, {
+    query: {
+      patient: id,
+      limit: 1,
+    },
+  });
+
   const handleAssignedVolunteer = () => {
     dispatch(
       patchPatient(
@@ -975,7 +985,7 @@ export const PatientHome = (props: any) => {
         </section>
 
         <section
-          className="mt-5 grid grid-cols-1 gap-6 lg:grid-cols-2"
+          className="mt-5 grid grid-cols-1 gap-6 lg:grid-cols-3"
           data-testid="patient-details"
         >
           <div className="w-full">
@@ -1110,6 +1120,14 @@ export const PatientHome = (props: any) => {
               </div>
             </div>
           </div>
+
+          <InsuranceDetialsCard
+            data={insuranceDetials?.results[0]}
+            showViewAllDetails={
+              insuranceDetials?.count !== undefined &&
+              insuranceDetials?.count > 1
+            }
+          />
         </section>
         <section className="mt-4 space-y-2 md:flex">
           <div className="hidden lg:block">

src/Redux/api.tsx

@@ -52,6 +52,7 @@ import {
 import { PatientModel } from "../Components/Patient/models";
 import { IComment, IResource } from "../Components/Resource/models";
 import { IShift } from "../Components/Shifting/models";
+import { HCXPolicyModel } from "../Components/HCX/models";
 
 /**
  * A fake function that returns an empty object casted to type T
@@ -1163,6 +1164,7 @@ const routes = {
   listHCXPolicies: {
     path: "/api/v1/hcx/policy/",
     method: "GET",
+    TRes: Type<PaginatedResponse<HCXPolicyModel>>(),
   },
 
   createHCXPolicy: {

src/Routers/routes/PatientRoutes.tsx

@@ -6,6 +6,7 @@ import PatientNotes from "../../Components/Patient/PatientNotes";
 import { PatientRegister } from "../../Components/Patient/PatientRegister";
 import { DetailRoute } from "../types";
 import DeathReport from "../../Components/DeathReport/DeathReport";
+import { InsuranceDetails } from "../../Components/Patient/InsuranceDetails";
 
 export default {
   "/patients": () => <PatientManager />,
@@ -21,6 +22,9 @@ export default {
   "/facility/:facilityId/patient/:id": ({ facilityId, id }: any) => (
     <PatientHome facilityId={facilityId} id={id} />
   ),
+  "/facility/:facilityId/patient/:id/insurance": ({ facilityId, id }: any) => (
+    <InsuranceDetails facilityId={facilityId} id={id} />
+  ),
   "/facility/:facilityId/patient/:id/update": ({ facilityId, id }: any) => (
     <PatientRegister facilityId={facilityId} id={id} />
   ),