Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Referral letter preview desktop #8954

Merged
merged 33 commits into from
Dec 3, 2024
Merged

Referral letter preview desktop #8954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
2a607da
referral letter desktop
modamaan Oct 28, 2024
13e867d
Shadcn components added
modamaan Oct 28, 2024
30ab131
separator commanded to resolve deploy issue
modamaan Oct 28, 2024
942fa6e
Separator import path changed
modamaan Oct 28, 2024
c090150
import @radix-ui/react-separator from /opt/build/repo/src/components/…
modamaan Oct 28, 2024
bc0dab2
again shadcn component added
modamaan Oct 28, 2024
32711fa
updated
modamaan Oct 29, 2024
436b199
changed
modamaan Oct 29, 2024
8d2d0f4
separator
modamaan Oct 29, 2024
d2d8f93
removed separator
modamaan Oct 29, 2024
83ad08b
new separator added
modamaan Oct 29, 2024
f575be8
Print preview updated
modamaan Oct 29, 2024
01507da
Shift details updated
modamaan Oct 29, 2024
609fdf7
removed phone size iisue
modamaan Oct 30, 2024
39a5f15
remove printPreview component changes
modamaan Oct 30, 2024
a052237
bot issues resolved
modamaan Nov 6, 2024
a4f329a
QRCodeSVG added based on coderrabbitai
modamaan Nov 6, 2024
758052c
responsive button updated
modamaan Nov 24, 2024
c62a9df
PrintPreview component updated add colse button feature to access dyn…
modamaan Nov 24, 2024
28f8bd8
normalScale updated (Previous: it shows very small size)
modamaan Nov 24, 2024
d4a2a1e
new seperator added
modamaan Nov 24, 2024
41fc423
default scale corrected
modamaan Nov 27, 2024
f20709b
everything updated without changing PrintPreview component
modamaan Nov 27, 2024
5243b1f
lint solved
modamaan Nov 27, 2024
82e1442
Auto label conflict deploy issue
modamaan Nov 28, 2024
ee2f480
removed custom seperator component
modamaan Nov 28, 2024
8aa9dcd
readable issue solved
modamaan Nov 30, 2024
890161a
Lint code base corrected
modamaan Nov 30, 2024
f04a1e8
old Card removed Shadcn Card added
modamaan Dec 3, 2024
9b87264
Merge remote-tracking branch 'origin' into issues/8884/edit-referralP…
rithviknishad Dec 3, 2024
19d4d9f
Merge remote-tracking branch 'origin' into issues/8884/edit-referralP…
rithviknishad Dec 3, 2024
396389e
print preview switch to shadcn button
rithviknishad Dec 3, 2024
c28d09d
remove border, shadow and other unnecessary classes
rithviknishad Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/CAREUI/misc/PrintPreview.tsx
View file
Open in desktop
modamaan marked this conversation as resolved.
Show resolved Hide resolved
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
Open in desktop
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
Loading