Skip to content

Commit

Permalink
Referral letter preview desktop (#8954)
Browse files Browse the repository at this point in the history
  • Loading branch information
@modamaan
modamaan authored Dec 3, 2024
1 parent 1868edd commit 59a584d
Show file tree
Hide file tree
Showing 3 changed files with 233 additions and 181 deletions.
7 changes: 4 additions & 3 deletions src/CAREUI/misc/PrintPreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import {
ZoomTransform,
} from "@/CAREUI/interactive/Zoom";

import ButtonV2 from "@/components/Common/ButtonV2";
import { Button } from "@/components/ui/button";

import Page from "@/components/Common/Page";

import useBreakpoints from "@/hooks/useBreakpoints";
Expand All @@ -30,10 +31,10 @@ export default function PrintPreview(props: Props) {
<Page title={props.title}>
<div className="mx-auto my-8 w-[50rem]">
<div className="top-0 z-20 flex gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8 xl:justify-end">
<ButtonV2 disabled={props.disabled} onClick={print}>
<Button variant="primary" disabled={props.disabled} onClick={print}>
<CareIcon icon="l-print" className="text-lg" />
{t("print")}
</ButtonV2>
</Button>
</div>

<ZoomProvider initialScale={normalScale}>
Expand Down
324 changes: 146 additions & 178 deletions src/components/Shifting/ShiftDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import { useTranslation } from "react-i18next";

import RecordMeta from "@/CAREUI/display/RecordMeta";
import CareIcon from "@/CAREUI/icons/CareIcon";
import PrintPreview from "@/CAREUI/misc/PrintPreview";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

import ButtonV2 from "@/components/Common/ButtonV2";
import Loading from "@/components/Common/Loading";
Expand Down Expand Up @@ -273,182 +276,162 @@ export default function ShiftDetails(props: { id: string }) {
)?.text;

return (
<div id="section-to-print" className="print bg-white">
<div>
{data.is_kasp && <img alt="logo" src={careConfig.headerLogo?.dark} />}
</div>
<div className="mx-2">
<div className="mt-6">
<span className="mt-4 font-semibold leading-relaxed">
{t("name_of_hospital")}:{" "}
</span>
{data.is_kasp
? t("district_program_management_supporting_unit")
: data.origin_facility_object?.name || "--"}
{/* Made static based on #757 */}
</div>
<div className="mt-6 text-center text-xl font-bold">
{t("referral_letter")}
</div>
<div className="mt-4 text-left">
<span className="font-semibold leading-relaxed">
{" "}
{t("date_and_time")}{" "}
</span>
{formatDateTime(data.created_date) || "--"}
</div>
<div className="mt-2 text-left">
<span className="font-semibold leading-relaxed">
{" "}
{t("unique_id")} :
</span>
{data.id}
</div>
<PrintPreview title={t("Patient Referral Letter")}>
<Card className="shadow-none border-none">
<CardHeader className="flex flex-col items-center space-y-4 sm:flex-row sm:justify-between sm:space-y-0">
<CardTitle className="mx-auto my-auto text-lg font-bold sm:text-2xl">
{t("referral_letter")}
</CardTitle>
</CardHeader>

<div className="mt-4">
<div>
<span className="font-semibold leading-relaxed">
{t("name")}:{" "}
</span>
{patientData?.name}
</div>
</div>
<div className="mt-2 flex justify-between">
<div>
<span className="font-semibold leading-relaxed">
{t("age")}:{" "}
</span>
{patientData ? formatPatientAge(patientData, true) : ""}
</div>
<div>
<span className="font-semibold leading-relaxed">
{t("gender")}:{" "}
</span>
{patientGender}
</div>
<div>
<span className="font-semibold leading-relaxed">
{t("phone")}:{" "}
</span>
<span>{patientData?.phone_number || ""}</span>
</div>
</div>
<div className="mt-2 flex text-left">
<span className="font-semibold leading-relaxed">
{t("address")}:{" "}
</span>
<div className="ml-2">
<div className="whitespace-pre-wrap">
{patientData?.address || "-"}
</div>
{patientData?.nationality === "India" && (
<>
<div>
{patientData?.ward_object?.name},
{patientData?.local_body_object?.name}
</div>
<div>{patientData?.district_object?.name || "-"}</div>
<div>{patientData?.state_object?.name}</div>
</>
<CardContent className="space-y-6">
<div className="flex flex-col-reverse items-start justify-end sm:flex-row sm:items-center">
{data.is_kasp && (
<img
alt="logo"
src={careConfig.headerLogo?.dark}
className="max-h-12"
/>
)}
<QRCodeSVG
value={`${window.location.origin}/shifting/${data.id}`}
size={120}
className="mt-4 sm:mt-0"
/>
</div>
</div>
<div className="mt-2 flex justify-between">
<div>
<span className="font-semibold leading-relaxed">
{t("date_of_admission")}:{" "}
</span>
{formatDateTime(
consultation.encounter_date || consultation.created_date,
) || "-"}
</div>
<div>
<span className="font-semibold leading-relaxed">
{t("patient_no")}:{" "}
</span>
{consultation.patient_no || "-"}
</div>
</div>
<div className="mt-2 flex justify-between">
<div>
<span className="font-semibold leading-relaxed">
{t("date_of_positive_covid_19_swab")}:{" "}
</span>
{(patientData?.date_of_test &&
formatDateTime(patientData?.date_of_test)) ||
"-"}
</div>
</div>

{/* <div className="mt-2 flex justify-between">
<div>
<span className="font-semibold leading-relaxed">
{t("diagnosis")}:{" "}
</span>
{consultation.diagnosis || "-"}
<div className="mt-6 text-lg">
<span className="font-semibold">{t("name_of_hospital")}: </span>
{data.is_kasp
? t("district_program_management_supporting_unit")
: data.origin_facility_object?.name || "--"}
</div>
</div> */}

<div className="mt-6 flex justify-between">
<div>
<span className="font-semibold leading-relaxed">
{t("covid_19_cat_gov")}{" "}
</span>
{consultation.category || "-"}
</div>
</div>
<div className="my-6 border-b-2"></div>

<div className="mt-2 flex justify-between">
<div>
<span className="font-semibold leading-relaxed">
{t("referred_to")}:{" "}
</span>
{data.assigned_facility_external ||
data.assigned_facility_object?.name ||
"--"}
</div>
</div>
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 text-lg">
<div>
<h3 className="mb-2 font-semibold">
{t("Patient Information")}
</h3>
<p>
<span className="font-semibold leading-relaxed">
{t("name")}:{" "}
</span>
{patientData?.name}
</p>
<p>
<span className="font-semibold leading-relaxed">
{t("age")}:{" "}
</span>
{formatPatientAge(patientData, true)}
</p>
<p>
<span className="font-semibold leading-relaxed">
{t("gender")}:{" "}
</span>
{patientGender || "-"}
</p>
<p>
<span className="font-semibold leading-relaxed">
{t("phone")}:{" "}
</span>{" "}
{patientData?.phone_number || "-"}
</p>
</div>

<div className="mt-2 flex justify-between">
<div>
<span className="font-semibold leading-relaxed">
{t("reason_for_referral")}:{" "}
</span>
{data.reason || "--"}
</div>
</div>
<div className="mt-2 flex justify-between">
<div>
<span className="font-semibold leading-relaxed">
{t("treatment_summary")}:{" "}
</span>
{consultation.treatment_plan || "-"}
<div className="text-lg">
<h3 className="mb-2 font-semibold">{t("address")}</h3>
<p className=" whitespace-pre-line">
{patientData?.address || "-"}
</p>
{patientData?.nationality === "India" && (
<>
<p>
{patientData?.ward_object?.name},{" "}
{patientData?.local_body_object?.name}
</p>
<p>{patientData?.district_object?.name || "-"}</p>
<p>{patientData?.state_object?.name}</p>
</>
)}
</div>
</div>
</div>
<div className="mt-6 flex justify-between">
<div className="flex">

<div className="my-6 border-b-2"></div>

<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 text-lg">
<div>
<div className="">
<QRCodeSVG
value={`${window.location.origin}/shifting/${data.id}`}
/>
</div>
<p>
<span className="font-semibold leading-relaxed">
{t("date_of_admission")}:{" "}
</span>
{formatDateTime(
consultation.encounter_date || consultation.created_date,
) || "-"}
</p>
<p>
<span className="font-semibold leading-relaxed">
{t("unique_id")}:{" "}
</span>{" "}
{data.id}
</p>
<p>
<span className="font-semibold leading-relaxed">
{t("patient_no")}:{" "}
</span>{" "}
{consultation.patient_no || "-"}
</p>
</div>
<div className="flex flex-col gap-3">
<p>
<span className="font-semibold leading-relaxed">
{t("date_of_positive_covid_19_swab")}:{" "}
</span>
{(patientData?.date_of_test &&
formatDateTime(patientData.date_of_test)) ||
"-"}
</p>
<p>
<span className="font-semibold leading-relaxed">
{t("covid_19_cat_gov")}:{" "}
</span>{" "}
{consultation.category || "-"}
</p>
<p>
<span className="font-semibold leading-relaxed">
{t("referred_to")}:{" "}
</span>
{data.assigned_facility_external ||
data.assigned_facility_object?.name ||
"--"}
</p>
<p>
<span className="font-semibold leading-relaxed">
{t("reason_for_referral")}:{" "}
</span>{" "}
{data.reason || "--"}
</p>
<p>
<span className="font-semibold leading-relaxed">
{t("treatment_summary")}:{" "}
</span>{" "}
{consultation.treatment_plan || "-"}
</p>
</div>
</div>
<div className="mt-10">
<span className="font-semibold leading-relaxed">

<div className="my-6 border-b-2"></div>

<div className="text-center">
<p className="text-sm text-muted-foreground">
{t("approved_by_district_covid_control_room")}
</span>
</p>
<p className="text-sm">{t("auto_generated_for_care")}</p>
</div>
</div>
<div className="mt-20 flex justify-center text-center">
{t("auto_generated_for_care")}
</div>
<div className="font-xs font-secondary-600 text-center font-mono">
{window.location.origin}/shifting/{data.id}
</div>
</div>
</div>
</CardContent>
</Card>
</PrintPreview>
);
};

Expand All @@ -459,22 +442,7 @@ export default function ShiftDetails(props: { id: string }) {
return (
<div>
{isPrintMode ? (
<div className="my-4">
<div className="my-4 flex justify-end gap-3">
<ButtonV2 onClick={(_) => window.print()}>
<CareIcon icon="l-print" className="mr-2 text-base" />{" "}
{t("print_referral_letter")}
</ButtonV2>
<ButtonV2
onClick={(_) => setIsPrintMode(false)}
variant="secondary"
>
<CareIcon icon="l-times" className="mr-2 text-base" />{" "}
{t("close")}
</ButtonV2>
</div>
{printData(data)}
</div>
<div className="my-4">{printData(data)}</div>
) : (
<Page
title={t("shifting_details")}
Expand Down
Loading

0 comments on commit 59a584d

Please sign in to comment.