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

Updated Test Details page form UI #9138

Merged
merged 44 commits into from
Dec 9, 2024
Merged

Updated Test Details page form UI #9138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
7a04b8a
updated sample test details form ui
modamaan Nov 15, 2024
55de901
shadcn components added
modamaan Nov 15, 2024
06668cb
rollup issue solved @radix-ui/react-separator
modamaan Nov 15, 2024
787bb43
rollup issue solved tsconfig.json
modamaan Nov 15, 2024
54685a4
badge shadcn component coderabbitai suggestion
modamaan Nov 17, 2024
df00093
try to solve deploy issue
modamaan Nov 17, 2024
abb33c5
coderabbitai suggestion on vite.config.mts
modamaan Nov 23, 2024
443d4b5
seperator updated to solve deploy issue
modamaan Nov 23, 2024
8b2bc4a
removed @radix-ui/react-separator
modamaan Nov 23, 2024
8c0b3b1
coderabbitai suggestion updation
modamaan Nov 23, 2024
9f16d3b
coderabbitai suggestion card CardTitle
modamaan Nov 23, 2024
4733920
Remove invalid ARIA attribute.
modamaan Nov 23, 2024
e32e0e1
remove unwanted code
modamaan Nov 24, 2024
e714f7b
retain older code
modamaan Nov 26, 2024
1af80ce
resolved merge conflict
modamaan Nov 26, 2024
87e56c4
lint issue solved
modamaan Nov 26, 2024
34a66da
cypress test
modamaan Nov 26, 2024
dd257c5
Merge branch 'issues/9120/TestDetailsPage-edit' of https://github.com…
modamaan Nov 26, 2024
14b177a
removed text
modamaan Nov 27, 2024
7e08f6f
Merge remote-tracking branch 'upstream/develop' into issues/9120/Test…
modamaan Nov 28, 2024
25a2ec2
removed custom seperator component
modamaan Nov 28, 2024
f184969
cypress-run (4) failing issue
modamaan Nov 28, 2024
f3eac81
try to solve Cypress test
modamaan Nov 28, 2024
cfbfcd5
Merge remote-tracking branch 'upstream/develop' into issues/9120/Test…
modamaan Nov 30, 2024
2db902a
cypress test fail
modamaan Nov 30, 2024
a19072c
cypress test fail 1
modamaan Nov 30, 2024
2cd6f1a
cypress test fail(4)
modamaan Nov 30, 2024
3dbeac6
prettier issue solved
modamaan Nov 30, 2024
ca336b1
lint soving 1
modamaan Nov 30, 2024
702c728
lint ShiftDetails.tsx solved
modamaan Nov 30, 2024
c992f31
cypress issue Expected to find element: #fast_track_reason, but neve…
modamaan Nov 30, 2024
d7cc03d
doctor name id removed
modamaan Nov 30, 2024
29b48db
doctor name id added
modamaan Nov 30, 2024
4192971
id positioning issue
modamaan Nov 30, 2024
615a29d
ButtonV2 removed and shadcn button added
modamaan Dec 1, 2024
dc51c27
Merge remote-tracking branch 'upstream/develop' into issues/9120/Test…
modamaan Dec 1, 2024
54c73df
shadcn button and variant parimary added
modamaan Dec 1, 2024
a9c7145
translation corrected
modamaan Dec 2, 2024
20b26ff
Lint corrected
modamaan Dec 2, 2024
cb01d1a
compare and translation add from original code
modamaan Dec 3, 2024
ea4aee0
Merge remote-tracking branch 'upstream/develop' into issues/9120/Test…
modamaan Dec 4, 2024
a325630
merge conflict resolved
modamaan Dec 4, 2024
6e967c1
Lint solved
modamaan Dec 4, 2024
143a19c
Shadcn card added
modamaan Dec 6, 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
346 changes: 204 additions & 142 deletions src/components/Patient/SampleDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { camelCase, capitalize, startCase } from "lodash-es";
import { navigate } from "raviger";
import { Link, navigate } from "raviger";
import { useTranslation } from "react-i18next";

import Card from "@/CAREUI/display/Card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";

import ButtonV2 from "@/components/Common/ButtonV2";
import Loading from "@/components/Common/Loading";
import Page from "@/components/Common/Page";
import { FileUpload } from "@/components/Files/FileUpload";
Expand Down Expand Up @@ -305,169 +306,230 @@ export const SampleDetails = ({ id }: DetailRoute) => {
options={
sampleDetails?.patient && (
<div className="my-2 flex justify-center md:justify-end">
<ButtonV2
href={`/patient/${sampleDetails.patient}/test_sample/${id}/icmr_sample`}
>
{t("icmr_specimen_referral_form")}
</ButtonV2>
<Button asChild variant={"primary"}>
<Link
href={`/patient/${sampleDetails.patient}/test_sample/${id}/icmr_sample`}
>
{t("icmr_specimen_referral_form")}
</Link>
</Button>
</div>
)
}
>
<Card>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<span className="font-semibold capitalize leading-relaxed">
{t("status")}:{" "}
</span>
{sampleDetails?.status}
</div>
<div>
<span className="font-semibold capitalize leading-relaxed">
{t("result")}:{" "}
</span>
{sampleDetails?.result}
</div>
<div>
<span className="font-semibold leading-relaxed">
{t("patient")}:{" "}
</span>
<span id="patient_name">{sampleDetails?.patient_name}</span>
</div>
{sampleDetails?.facility_object && (
<div>
<span className="font-semibold leading-relaxed">
{t("facility")}:{" "}
</span>
{sampleDetails?.facility_object.name}
<Card className="my-2">
<CardHeader className="space-y-4">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<div className="space-y-1 flex gap-2 items-center">
<div className="text-sm text-muted-foreground">
{t("status")}:{" "}
</div>
<Badge variant="outline" className="font-semibold">
{sampleDetails?.status}
</Badge>
</div>
<div className="space-y-1 sm:text-right flex gap-2 items-center ">
<div className="text-sm text-muted-foreground">
{t("result")}:{" "}
</div>
<Badge variant="secondary" className="font-semibold">
{sampleDetails?.result}
</Badge>
</div>
)}
<div>
<span className="font-semibold leading-relaxed">
{t("tested_on")}:{" "}
</span>
{sampleDetails?.date_of_result
? formatDateTime(sampleDetails.date_of_result)
: "-"}
</div>
<div>
<span className="font-semibold leading-relaxed">
{t("result_on")}:{" "}
</span>
{sampleDetails?.date_of_result
? formatDateTime(sampleDetails.date_of_result)
: "-"}
</div>
{sampleDetails?.fast_track && (
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
{t("fast_track_testing_reason")}:{" "}
</span>
<span id="fast_track_reason">{sampleDetails.fast_track}</span>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="space-y-1">
<div className="text-sm text-muted-foreground">
{t("patient")}:
</div>
<div id="patient_name" className="font-medium">
{sampleDetails?.patient_name || "-"}
</div>
</div>
)}
{sampleDetails?.facility_object && (
<div className="space-y-1">
<div className="text-sm text-muted-foreground">
{t("facility")}:{" "}
</div>
<div className="font-medium">
{sampleDetails?.facility_object.name}
</div>
</div>
)}
<div className="space-y-1">
<div className="text-sm text-muted-foreground">
{t("tested_on")}:{" "}
</div>
<div className="font-medium">
{sampleDetails?.date_of_result
? formatDateTime(sampleDetails.date_of_result)
: "-"}
modamaan marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
<div className="space-y-1">
<div className="text-sm text-muted-foreground">
{t("result_on")}:{" "}
</div>
<div className="font-medium">
{sampleDetails?.date_of_result
? formatDateTime(sampleDetails.date_of_result)
: "-"}
</div>
</div>
</div>

{sampleDetails?.doctor_name && (
<div className="capitalize md:col-span-2">
<span className="font-semibold leading-relaxed">
{t("doctors_name")}:{" "}
</span>
<span id="doctor_name">
<div className="space-y-1">
<div className="text-sm text-muted-foreground">
{t("doctors_name")}:
</div>
<div id="doctor_name" className="font-medium">
{startCase(camelCase(sampleDetails.doctor_name))}
</span>
</div>
</div>
)}
{sampleDetails?.diagnosis && (
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
{t("diagnosis")}:{" "}
</span>
<span id="diagnosis">{sampleDetails.diagnosis}</span>
<div className="border-t border-gray-300 my-4"></div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{sampleDetails?.fast_track && (
<div
id="fast_track_reason"
className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg"
>
<div className="font-medium text-sm">
{t("fast_track_testing_reason")}:{" "}
</div>
<Badge variant={"secondary"}>{sampleDetails.fast_track}</Badge>
</div>
)}
{sampleDetails?.diagnosis && (
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">{t("diagnosis")}: </div>
<Badge id="diagnosis" variant={"secondary"}>
{" "}
{sampleDetails.diagnosis}
</Badge>
modamaan marked this conversation as resolved.
Show resolved Hide resolved
</div>
)}
{sampleDetails?.diff_diagnosis && (
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">
{t("differential_diagnosis")}:{" "}
</div>
<Badge id="diff_diagnosis" variant={"secondary"}>
{" "}
{sampleDetails?.diff_diagnosis}
modamaan marked this conversation as resolved.
Show resolved Hide resolved
</Badge>
</div>
)}
{sampleDetails?.etiology_identified && (
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">
{t("etiology_identified")}:{" "}
</div>
<Badge id="etiology_identified" variant={"secondary"}>
{" "}
{sampleDetails.etiology_identified}
</Badge>
</div>
)}
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">
{t("is_atypical_presentation")}
</div>
<Badge variant={"secondary"}>
{" "}
{yesOrNoBadge(sampleDetails?.is_atypical_presentation)}
</Badge>
</div>
)}
{sampleDetails?.diff_diagnosis && (
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
{t("differential_diagnosis")}:{" "}
</span>
<span id="diff_diagnosis">{sampleDetails?.diff_diagnosis}</span>
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">
{t("is_unusual_course")}
</div>
<Badge variant={"secondary"}>
{" "}
{yesOrNoBadge(sampleDetails?.is_unusual_course)}
</Badge>
</div>
)}
{sampleDetails?.etiology_identified && (
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
{t("etiology_identified")}:{" "}
</span>
<span id="etiology_identified">
{sampleDetails.etiology_identified}
</span>
{sampleDetails?.atypical_presentation && (
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">
{t("atypical_presentation_details")}:{" "}
</div>
<Badge variant={"secondary"}>
{" "}
{sampleDetails.atypical_presentation}
</Badge>
</div>
)}
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">{t("sari")} </div>
<Badge variant={"secondary"}>
{" "}
{yesOrNoBadge(sampleDetails?.has_sari)}
</Badge>
</div>
)}
<div>
<span className="font-semibold leading-relaxed">
{t("is_atypical_presentation")}{" "}
</span>
{yesOrNoBadge(sampleDetails?.is_atypical_presentation)}
</div>
<div>
<span className="font-semibold leading-relaxed">
{t("is_unusual_course")}{" "}
</span>
{yesOrNoBadge(sampleDetails?.is_unusual_course)}
</div>
{sampleDetails?.atypical_presentation && (
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
{t("atypical_presentation_details")}:{" "}
</span>
{sampleDetails.atypical_presentation}
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">{t("ari")} </div>
<Badge variant={"secondary"}>
{" "}
{yesOrNoBadge(sampleDetails?.has_ari)}
</Badge>
</div>
)}
<div>
<span className="font-semibold leading-relaxed">{t("sari")} </span>
{yesOrNoBadge(sampleDetails?.has_sari)}
</div>
<div>
<span className="font-semibold leading-relaxed">{t("ari")} </span>
{yesOrNoBadge(sampleDetails?.has_ari)}
</div>
<div>
<span className="font-semibold leading-relaxed">
{t("contact_with_confirmed_carrier")}{" "}
</span>
{yesOrNoBadge(sampleDetails?.patient_has_confirmed_contact)}
</div>
<div>
<span className="font-semibold leading-relaxed">
{t("contact_with_suspected_carrier")}{" "}
</span>
{yesOrNoBadge(sampleDetails?.patient_has_suspected_contact)}
</div>
{sampleDetails?.patient_travel_history &&
sampleDetails.patient_travel_history.length !== 0 && (
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
{t("countries_travelled")}:{" "}
</span>
{sampleDetails.patient_travel_history}
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">
{t("contact_with_confirmed_carrier")}{" "}
</div>
)}
<Badge variant={"secondary"}>
{" "}
{yesOrNoBadge(sampleDetails?.patient_has_confirmed_contact)}
</Badge>
</div>
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">
{t("contact_with_suspected_carrier")}{" "}
</div>
<Badge variant={"secondary"}>
{" "}
{yesOrNoBadge(sampleDetails?.patient_has_suspected_contact)}
</Badge>
</div>
{sampleDetails?.patient_travel_history &&
sampleDetails.patient_travel_history.length !== 0 && (
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">
{t("countries_travelled")}:{" "}
</div>
<Badge variant={"secondary"}>
{" "}
{sampleDetails.patient_travel_history}
</Badge>
</div>
)}
</div>
rithviknishad marked this conversation as resolved.
Show resolved Hide resolved
<div className="border-t border-gray-300 my-4"></div>
{sampleDetails?.sample_type && (
<div>
<span className="font-semibold capitalize leading-relaxed">
<div className="space-y-1">
<div className="text-sm text-muted-foreground">
{t("sample_type")}:{" "}
</span>
{startCase(camelCase(sampleDetails.sample_type))}
</div>
<div className="font-medium">
{startCase(camelCase(sampleDetails.sample_type))}
</div>
</div>
)}
{sampleDetails?.sample_type === "OTHER TYPE" && (
<div>
<span className="font-semibold capitalize leading-relaxed">
<div className="space-y-1">
<div className="text-sm text-muted-foreground">
{t("sample_type_description")}:{" "}
</span>
{sampleDetails?.sample_type_other}
</div>
<div className="font-medium">
{sampleDetails?.sample_type_other}
</div>
</div>
)}
</div>
</CardContent>
</Card>

<div>
Expand Down
Loading
Loading