From be0ef48effb62fc9721213f2957d1116efeb904b Mon Sep 17 00:00:00 2001 From: Mohamed amaan <121436543+modamaan@users.noreply.github.com> Date: Mon, 9 Dec 2024 14:43:06 +0530 Subject: [PATCH] Updated Test Details page form UI (#9138) --- src/components/Patient/SampleDetails.tsx | 346 +++++++++++++---------- src/components/ui/badge.tsx | 43 +++ 2 files changed, 247 insertions(+), 142 deletions(-) create mode 100644 src/components/ui/badge.tsx diff --git a/src/components/Patient/SampleDetails.tsx b/src/components/Patient/SampleDetails.tsx index abf099a6e7d..2cadda8b22e 100644 --- a/src/components/Patient/SampleDetails.tsx +++ b/src/components/Patient/SampleDetails.tsx @@ -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"; @@ -305,169 +306,230 @@ export const SampleDetails = ({ id }: DetailRoute) => { options={ sampleDetails?.patient && (
- - {t("icmr_specimen_referral_form")} - +
) } > - -
-
- - {t("status")}:{" "} - - {sampleDetails?.status} -
-
- - {t("result")}:{" "} - - {sampleDetails?.result} -
-
- - {t("patient")}:{" "} - - {sampleDetails?.patient_name} -
- {sampleDetails?.facility_object && ( -
- - {t("facility")}:{" "} - - {sampleDetails?.facility_object.name} + + +
+
+
+ {t("status")}:{" "} +
+ + {sampleDetails?.status} + +
+
+
+ {t("result")}:{" "} +
+ + {sampleDetails?.result} +
- )} -
- - {t("tested_on")}:{" "} - - {sampleDetails?.date_of_result - ? formatDateTime(sampleDetails.date_of_result) - : "-"} -
-
- - {t("result_on")}:{" "} - - {sampleDetails?.date_of_result - ? formatDateTime(sampleDetails.date_of_result) - : "-"}
- {sampleDetails?.fast_track && ( -
- - {t("fast_track_testing_reason")}:{" "} - - {sampleDetails.fast_track} + + +
+
+
+ {t("patient")}: +
+
+ {sampleDetails?.patient_name || "-"} +
- )} + {sampleDetails?.facility_object && ( +
+
+ {t("facility")}:{" "} +
+
+ {sampleDetails?.facility_object.name} +
+
+ )} +
+
+ {t("tested_on")}:{" "} +
+
+ {sampleDetails?.date_of_result + ? formatDateTime(sampleDetails.date_of_result) + : "-"} +
+
+
+
+ {t("result_on")}:{" "} +
+
+ {sampleDetails?.date_of_result + ? formatDateTime(sampleDetails.date_of_result) + : "-"} +
+
+
+ {sampleDetails?.doctor_name && ( -
- - {t("doctors_name")}:{" "} - - +
+
+ {t("doctors_name")}: +
+
{startCase(camelCase(sampleDetails.doctor_name))} - +
)} - {sampleDetails?.diagnosis && ( -
- - {t("diagnosis")}:{" "} - - {sampleDetails.diagnosis} +
+
+ {sampleDetails?.fast_track && ( +
+
+ {t("fast_track_testing_reason")}:{" "} +
+ {sampleDetails.fast_track} +
+ )} + {sampleDetails?.diagnosis && ( +
+
{t("diagnosis")}:
+ + {" "} + {sampleDetails.diagnosis} + +
+ )} + {sampleDetails?.diff_diagnosis && ( +
+
+ {t("differential_diagnosis")}:{" "} +
+ + {" "} + {sampleDetails?.diff_diagnosis} + +
+ )} + {sampleDetails?.etiology_identified && ( +
+
+ {t("etiology_identified")}:{" "} +
+ + {" "} + {sampleDetails.etiology_identified} + +
+ )} +
+
+ {t("is_atypical_presentation")} +
+ + {" "} + {yesOrNoBadge(sampleDetails?.is_atypical_presentation)} +
- )} - {sampleDetails?.diff_diagnosis && ( -
- - {t("differential_diagnosis")}:{" "} - - {sampleDetails?.diff_diagnosis} +
+
+ {t("is_unusual_course")} +
+ + {" "} + {yesOrNoBadge(sampleDetails?.is_unusual_course)} +
- )} - {sampleDetails?.etiology_identified && ( -
- - {t("etiology_identified")}:{" "} - - - {sampleDetails.etiology_identified} - + {sampleDetails?.atypical_presentation && ( +
+
+ {t("atypical_presentation_details")}:{" "} +
+ + {" "} + {sampleDetails.atypical_presentation} + +
+ )} +
+
{t("sari")}
+ + {" "} + {yesOrNoBadge(sampleDetails?.has_sari)} +
- )} -
- - {t("is_atypical_presentation")}{" "} - - {yesOrNoBadge(sampleDetails?.is_atypical_presentation)} -
-
- - {t("is_unusual_course")}{" "} - - {yesOrNoBadge(sampleDetails?.is_unusual_course)} -
- {sampleDetails?.atypical_presentation && ( -
- - {t("atypical_presentation_details")}:{" "} - - {sampleDetails.atypical_presentation} +
+
{t("ari")}
+ + {" "} + {yesOrNoBadge(sampleDetails?.has_ari)} +
- )} -
- {t("sari")} - {yesOrNoBadge(sampleDetails?.has_sari)} -
-
- {t("ari")} - {yesOrNoBadge(sampleDetails?.has_ari)} -
-
- - {t("contact_with_confirmed_carrier")}{" "} - - {yesOrNoBadge(sampleDetails?.patient_has_confirmed_contact)} -
-
- - {t("contact_with_suspected_carrier")}{" "} - - {yesOrNoBadge(sampleDetails?.patient_has_suspected_contact)} -
- {sampleDetails?.patient_travel_history && - sampleDetails.patient_travel_history.length !== 0 && ( -
- - {t("countries_travelled")}:{" "} - - {sampleDetails.patient_travel_history} +
+
+ {t("contact_with_confirmed_carrier")}{" "}
- )} + + {" "} + {yesOrNoBadge(sampleDetails?.patient_has_confirmed_contact)} + +
+
+
+ {t("contact_with_suspected_carrier")}{" "} +
+ + {" "} + {yesOrNoBadge(sampleDetails?.patient_has_suspected_contact)} + +
+ {sampleDetails?.patient_travel_history && + sampleDetails.patient_travel_history.length !== 0 && ( +
+
+ {t("countries_travelled")}:{" "} +
+ + {" "} + {sampleDetails.patient_travel_history} + +
+ )} +
+
{sampleDetails?.sample_type && ( -
- +
+
{t("sample_type")}:{" "} - - {startCase(camelCase(sampleDetails.sample_type))} +
+
+ {startCase(camelCase(sampleDetails.sample_type))} +
)} {sampleDetails?.sample_type === "OTHER TYPE" && ( -
- +
+
{t("sample_type_description")}:{" "} - - {sampleDetails?.sample_type_other} +
+
+ {sampleDetails?.sample_type_other} +
)} -
+
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 00000000000..99b8f3bbda4 --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,43 @@ +import { type VariantProps, cva } from "class-variance-authority"; +import * as React from "react"; + +import { cn } from "@/lib/utils"; + +const badgeVariants = cva( + "inline-flex items-center rounded-md border border-gray-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 dark:border-gray-800 dark:focus:ring-gray-300", + { + variants: { + variant: { + default: + "border-transparent bg-gray-900 text-gray-50 shadow hover:bg-gray-900/80 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/80", + secondary: + "border-transparent bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80", + destructive: + "border-transparent bg-red-500 text-gray-50 shadow hover:bg-red-500/80 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/80", + warning: + "border-transparent bg-yellow-400 text-gray-900 shadow hover:bg-yellow-500 dark:bg-yellow-400 dark:text-gray-900 dark:hover:bg-yellow-500", + outline: "text-gray-950 dark:text-gray-50", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +); + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ); +} + +export { Badge, badgeVariants };