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 2 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
294 changes: 172 additions & 122 deletions src/components/Patient/SampleDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ import { navigate } from "raviger";

import Card from "@/CAREUI/display/Card";

import { Badge } from "@/components/ui/badge";
import { CardContent, CardHeader } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";

import ButtonV2 from "@/components/Common/ButtonV2";
import Loading from "@/components/Common/Loading";
import Page from "@/components/Common/Page";
Expand Down Expand Up @@ -285,142 +289,188 @@ export const SampleDetails = ({ id }: DetailRoute) => {
)
}
>
<Card>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<span className="font-semibold capitalize leading-relaxed">
Status:{" "}
</span>
{sampleDetails?.status}
</div>
<div>
<span className="font-semibold capitalize leading-relaxed">
Result:{" "}
</span>
{sampleDetails?.result}
</div>
<div>
<span className="font-semibold leading-relaxed">Patient: </span>
{sampleDetails?.patient_name}
</div>
{sampleDetails?.facility_object && (
<div>
<span className="font-semibold leading-relaxed">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">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">Result:</div>
<Badge variant="secondary" className="font-semibold">
{sampleDetails?.result}
</Badge>
</div>
)}
<div>
<span className="font-semibold leading-relaxed">Tested on: </span>
{sampleDetails?.date_of_result
? formatDateTime(sampleDetails.date_of_result)
: "-"}
</div>
<div>
<span className="font-semibold leading-relaxed">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">
Fast track testing reason:{" "}
</span>
{sampleDetails.fast_track}
</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">Patient:</div>
<div className="font-medium">{sampleDetails?.patient_name}</div>
</div>
)}
{sampleDetails?.doctor_name && (
<div className="capitalize md:col-span-2">
<span className="font-semibold leading-relaxed">
Doctor&apos;s Name:{" "}
</span>
{startCase(camelCase(sampleDetails.doctor_name))}
{sampleDetails?.facility_object && (
<div className="space-y-1">
<div className="text-sm text-muted-foreground">Facility:</div>
<div className="font-medium">
{sampleDetails?.facility_object.name}
</div>
</div>
)}
<div className="space-y-1">
<div className="text-sm text-muted-foreground">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>
)}
{sampleDetails?.diagnosis && (
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">Diagnosis: </span>
{sampleDetails.diagnosis}
<div className="space-y-1">
<div className="text-sm text-muted-foreground">Result on:</div>
<div className="font-medium">
{sampleDetails?.date_of_result
? formatDateTime(sampleDetails.date_of_result)
: "-"}
</div>
</div>
)}
{sampleDetails?.diff_diagnosis && (
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
Differential diagnosis:{" "}
</span>
{sampleDetails?.diff_diagnosis}
</div>

{sampleDetails?.doctor_name && (
<div className="space-y-1">
<div className="text-sm text-muted-foreground">
Doctor&apos;s Name:
</div>
<div className="font-medium">
{startCase(camelCase(sampleDetails.doctor_name))}
</div>
</div>
)}
{sampleDetails?.etiology_identified && (
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
Etiology identified:{" "}
</span>
{sampleDetails.etiology_identified}
<Separator />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{sampleDetails?.fast_track && (
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">
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">Diagnosis: </div>
<Badge variant={"secondary"}> {sampleDetails.diagnosis}</Badge>
</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">
Differential diagnosis:{" "}
</div>
<Badge 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">Etiology identified: </div>
<Badge 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">
Is Atypical presentation{" "}
</div>
<Badge variant={"secondary"}>
{" "}
{yesOrNoBadge(sampleDetails?.is_atypical_presentation)}
</Badge>
</div>
)}
<div>
<span className="font-semibold leading-relaxed">
Is Atypical presentation{" "}
</span>
{yesOrNoBadge(sampleDetails?.is_atypical_presentation)}
</div>
<div>
<span className="font-semibold leading-relaxed">
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">
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">Is unusual course </div>
<Badge variant={"secondary"}>
{" "}
{yesOrNoBadge(sampleDetails?.is_unusual_course)}
</Badge>
</div>
)}
<div>
<span className="font-semibold leading-relaxed">
SARI - Severe Acute Respiratory illness{" "}
</span>
{yesOrNoBadge(sampleDetails?.has_sari)}
</div>
<div>
<span className="font-semibold leading-relaxed">
ARI - Acute Respiratory illness{" "}
</span>
{yesOrNoBadge(sampleDetails?.has_ari)}
</div>
<div>
<span className="font-semibold leading-relaxed">
Contact with confirmed carrier{" "}
</span>
{yesOrNoBadge(sampleDetails?.patient_has_confirmed_contact)}
</div>
<div>
<span className="font-semibold leading-relaxed">
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">
Countries travelled:{" "}
</span>
{sampleDetails.patient_travel_history}
{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">
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">
SARI - Severe Acute Respiratory illness{" "}
</div>
<Badge variant={"secondary"}>
{" "}
{yesOrNoBadge(sampleDetails?.has_sari)}
</Badge>
</div>
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">
ARI - Acute Respiratory illness{" "}
</div>
<Badge variant={"secondary"}>
{" "}
{yesOrNoBadge(sampleDetails?.has_ari)}
</Badge>
</div>
<div className="flex justify-between items-center gap-2 p-3 bg-gray-100 rounded-lg">
<div className="font-medium text-sm">
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">
Contact with suspected carrier{" "}
</div>
<Badge variant={"secondary"}>
{" "}
{yesOrNoBadge(sampleDetails?.patient_has_suspected_contact)}
</Badge>
</div>
modamaan marked this conversation as resolved.
Show resolved Hide resolved
{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">
Countries travelled:{" "}
</div>
<Badge variant={"secondary"}>
{" "}
{sampleDetails.patient_travel_history}
</Badge>
</div>
)}
</div>
<Separator />
{sampleDetails?.sample_type && (
<div className="md:col-span-2">
<span className="font-semibold capitalize leading-relaxed">
Sample Type:{" "}
</span>
{startCase(camelCase(sampleDetails.sample_type))}
<div className="space-y-1">
<div className="text-sm text-muted-foreground">Sample Type:</div>
<div className="font-medium">
{" "}
{startCase(camelCase(sampleDetails.sample_type))}
</div>
</div>
)}
</div>
</CardContent>
</Card>

<div>
Expand Down
38 changes: 38 additions & 0 deletions src/components/ui/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
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<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
);
}
modamaan marked this conversation as resolved.
Show resolved Hide resolved

export { Badge, badgeVariants };
Loading
Loading