Skip to content

Commit

Permalink
implemented insurace details card
Browse files Browse the repository at this point in the history
  • Loading branch information
@konavivekramakrishna
konavivekramakrishna committed Nov 16, 2023
1 parent 9c7093b commit 3eb5283
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 114 deletions.
44 changes: 2 additions & 42 deletions src/Components/Patient/InsuranceDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ 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"));

Expand Down Expand Up @@ -52,48 +53,7 @@ export const InsuranceDetails = (props: IProps) => {
data-testid="patient-details"
>
{insuranceDetials?.results.map((data: HCXPolicyModel) => (
<div className="w-full" key={data.id}>
<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>

<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>
</div>
</div>
</div>
<InsuranceDetialsCard data={data} />
))}
</section>
)}
Expand Down
78 changes: 78 additions & 0 deletions src/Components/Patient/InsuranceDetailsCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
);
};
86 changes: 14 additions & 72 deletions src/Components/Patient/PatientHome.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ 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"));

Expand Down Expand Up @@ -93,14 +94,12 @@ export const PatientHome = (props: any) => {
});
};

const { data: insuranceDetials, loading: insuranceDetailsLoading } = useQuery(
routes.listHCXPolicies,
{
query: {
patient: id,
},
}
);
const { data: insuranceDetials } = useQuery(routes.listHCXPolicies, {
query: {
patient: id,
limit: 1,
},
});

const handleAssignedVolunteer = () => {
dispatch(
Expand Down Expand Up @@ -1121,71 +1120,14 @@ export const PatientHome = (props: any) => {
</div>
</div>
</div>
<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">
Insurance Details
</div>

{insuranceDetials?.count == 0 || insuranceDetailsLoading ? (
<div className="flex w-full items-center justify-center text-xl font-bold text-gray-500">
No Insurance Data Available
</div>
) : (
<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">
{insuranceDetials?.results[0]?.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">
{insuranceDetials?.results[0]?.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">
{insuranceDetials?.results[0]?.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">
{insuranceDetials?.results[0]?.insurer_name || ""}
</div>
</div>

{insuranceDetials?.count && insuranceDetials?.count > 1 && (
<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/${patientData?.facility}/patient/${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>
</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">
Expand Down

0 comments on commit 3eb5283

Please sign in to comment.