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

Jump to bottom

Consultation update page form UI updated #9074

Open
wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

Consultation update page form UI updated #9074

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2be148b
Consultation update page form UI updated
modamaan Nov 10, 2024
d78ddf9
Lint issues solved
modamaan Nov 10, 2024
5cfc314
Badge component coderabbitai suggestion
modamaan Nov 10, 2024
6ac3d93
card component coderabbitai suggestion
modamaan Nov 10, 2024
f713b4f
lint issue again solved
modamaan Nov 10, 2024
860cd70
CriticalCarePreview updated
modamaan Nov 12, 2024
6e7a497
lucid-react icon removed deploy issue
modamaan Nov 12, 2024
ab7ff27
npm lucid-react uninstalled
modamaan Nov 12, 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
276 changes: 179 additions & 97 deletions src/components/Patient/DailyRoundListDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
import {
Activity,
FileText,
Heart,
Thermometer,
Timer,
Waves,
} from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } 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 @@ -34,17 +46,27 @@ export const DailyRoundListDetails = (props: any) => {
title={`Consultation Update #${id}`}
backUrl={`/facility/${facilityId}/patient/${patientId}/consultation/${consultationId}/daily-rounds`}
>
<div
className="mt-4 h-full rounded-lg border bg-white p-4 text-black shadow hover:border-primary-500"
id="consultation-preview"
>
<div className="flex justify-between">
<div className="max-w-md">
<div>
<span className="font-semibold leading-relaxed">
Patient Category:{" "}
</span>
{dailyRoundListDetailsData.patient_category ?? "-"}
<Card className="w-full max-w-8xl mx-auto my-5">
<CardHeader className="flex flex-col sm:flex-row items-start sm:items-center justify-between space-y-2 sm:space-y-0 pb-4">
<div className="space-y-1">
<CardTitle className="text-md">Patient Details</CardTitle>
<div className="flex flex-col sm:flex-row sm:items-center gap-2">
<div>
<span className=" leading-relaxed text-md font-medium">
Patient Category:{" "}
</span>
<Badge variant={"secondary"}>
{dailyRoundListDetailsData.patient_category ?? "-"}
</Badge>
</div>
<div className="text-sm">
<span className=" text-muted-foreground text-md font-medium">
Taken at:{" "}
</span>
{dailyRoundListDetailsData.taken_at
? formatDateTime(dailyRoundListDetailsData.taken_at)
: "-"}
</div>
</div>
</div>

Expand All @@ -57,103 +79,163 @@ export const DailyRoundListDetails = (props: any) => {
</ButtonV2>
</div>
</div>
</div>

<div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
<div>
<span className="font-semibold leading-relaxed">Temperature: </span>
{dailyRoundListDetailsData.temperature ?? "-"}
</div>
<div>
<span className="font-semibold leading-relaxed">Taken at: </span>
{dailyRoundListDetailsData.taken_at
? formatDateTime(dailyRoundListDetailsData.taken_at)
: "-"}
</div>
<div>
<span className="font-semibold leading-relaxed">SpO2: </span>
{dailyRoundListDetailsData.ventilator_spo2 ?? "-"}
</div>
<div className="capitalize md:col-span-2">
<span className="font-semibold leading-relaxed">
Admitted To *:{" "}
</span>
{dailyRoundListDetailsData.admitted_to ?? "-"}
</div>
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
Physical Examination Info:{" "}
</span>
{dailyRoundListDetailsData.physical_examination_info ?? "-"}
</div>
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
Other Details:{" "}
</span>
{dailyRoundListDetailsData.other_details ?? "-"}
</div>
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">Pulse(bpm): </span>
{dailyRoundListDetailsData.pulse ?? "-"}
</CardHeader>
<CardContent className="grid gap-6">
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div className="flex items-center gap-4 rounded-lg border p-4">
<Thermometer className="h-5 w-5 text-muted-foreground" />
<div>
<p className="text-sm font-medium leading-none mb-1">
Temperature:{" "}
</p>
<p className="text-sm text-muted-foreground">
{dailyRoundListDetailsData.temperature ?? "-"}
</p>
</div>
</div>
<div className="flex items-center gap-4 rounded-lg border p-4">
<Waves className="h-5 w-5 text-muted-foreground" />
<div>
<p className="text-sm font-medium leading-none mb-1">SpO2: </p>
<p className="text-sm text-muted-foreground">
{dailyRoundListDetailsData.ventilator_spo2 ?? "-"}
</p>
</div>
</div>
<div className="flex items-center gap-4 rounded-lg border p-4">
<Heart className="h-5 w-5 text-muted-foreground" />
<div>
<p className="text-sm font-medium leading-none mb-1">
Pulse (bpm):{" "}
</p>
<p className="text-sm text-muted-foreground">
{" "}
{dailyRoundListDetailsData.pulse ?? "-"}
</p>
</div>
</div>
</div>
modamaan marked this conversation as resolved.
Show resolved Hide resolved
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">BP</span>
<div className="flex flex-row space-x-20">
<div className="flex">
<span className="font-semibold leading-relaxed">

<Separator />

<div className="space-y-4">
<h3 className="text-lg font-medium">Blood Pressure</h3>
<div className="grid gap-4 sm:grid-cols-2">
<div className="rounded-lg border p-4">
<p className="text-sm font-medium leading-none mb-1">
Systolic:{" "}
</span>
{dailyRoundListDetailsData.bp?.systolic ?? "-"}
</p>
<p className="text-sm text-muted-foreground">
{dailyRoundListDetailsData.bp?.systolic ?? "-"}
</p>
</div>
<div className="flex">
{" "}
<span className="font-semibold leading-relaxed">
Diastolic:
</span>
{dailyRoundListDetailsData.bp?.diastolic ?? "-"}
<div className="rounded-lg border p-4">
<p className="text-sm font-medium leading-none mb-1">
Diastolic:{" "}
</p>
<p className="text-sm text-muted-foreground">
{dailyRoundListDetailsData.bp?.diastolic ?? "-"}
</p>
</div>
</div>
</div>

<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
Respiratory Rate (bpm):
</span>
<div className="grid gap-6 sm:grid-cols-2">
<div className="space-y-4">
<h3 className="text-lg font-medium">Respiratory Information</h3>
<div className="grid gap-4">
<div className="flex items-center gap-4 rounded-lg border p-4">
<Timer className="h-5 w-5 text-muted-foreground" />
<div>
<p className="text-sm font-medium leading-none mb-1">
Respiratory Rate (bpm):{" "}
</p>
<p className="text-sm text-muted-foreground">
{dailyRoundListDetailsData.resp ?? "-"}
</p>
</div>
</div>
<div className="flex items-center gap-4 rounded-lg border p-4">
<Activity className="h-5 w-5 text-muted-foreground" />
<div>
<p className="text-sm font-medium leading-none mb-1">
Rhythm:{" "}
</p>
<p className="text-sm text-muted-foreground">
{dailyRoundListDetailsData.rhythm ?? "-"}
</p>
</div>
</div>
<div className="flex items-center gap-4 rounded-lg border p-4">
<FileText className="h-6 w-6 text-muted-foreground" />
<div>
<p className="text-sm font-medium leading-none mb-1">
Rhythm Description:{" "}
</p>
<p className="text-sm text-muted-foreground">
{dailyRoundListDetailsData.rhythm_detail ?? "-"}
</p>
</div>
</div>
</div>
</div>

{dailyRoundListDetailsData.resp ?? "-"}
</div>
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">Rhythm: </span>
{dailyRoundListDetailsData.rhythm ?? "-"}
</div>
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
Rhythm Description:{" "}
</span>
{dailyRoundListDetailsData.rhythm_detail ?? "-"}
<div className="space-y-4">
<h3 className="text-lg font-medium">Additional Information</h3>
<div className="grid gap-4">
<div className="rounded-lg border p-4">
<p className="text-sm font-medium leading-none mb-1">
Admitted To*:{" "}
</p>
<p className="text-sm text-muted-foreground">
{dailyRoundListDetailsData.admitted_to ?? "-"}
</p>
</div>
<div className="rounded-lg border p-4">
<p className="text-sm font-medium leading-none mb-1">
Level of Consciousness:{" "}
</p>
<p className="text-sm text-muted-foreground">
{" "}
{(dailyRoundListDetailsData.consciousness_level &&
t(
`CONSCIOUSNESS_LEVEL__${dailyRoundListDetailsData.consciousness_level}`,
)) ||
"-"}
</p>
</div>
<div className="rounded-lg border p-4">
<p className="text-sm font-medium leading-none mb-1">
Other Details:{" "}
</p>
<p className="text-sm text-muted-foreground">
{dailyRoundListDetailsData.other_details ?? "-"}
</p>
</div>
</div>
</div>
modamaan marked this conversation as resolved.
Show resolved Hide resolved
</div>
<div className="md:col-span-2">
<span className="font-semibold leading-relaxed">
Level Of Consciousness:{" "}
</span>
{(dailyRoundListDetailsData.consciousness_level &&
t(
`CONSCIOUSNESS_LEVEL__${dailyRoundListDetailsData.consciousness_level}`,
)) ||
"-"}

<div className="rounded-lg border p-4">
<p className="text-sm font-medium"> Physical Examination Info: </p>
<p className="text-sm text-muted-foreground">
{dailyRoundListDetailsData.physical_examination_info ?? "-"}
</p>
</div>
<div>
<span className="font-semibold leading-relaxed">
Recommend Discharge:{" "}
</span>
{dailyRoundListDetailsData.recommend_discharge ? (
<span className="badge badge-pill badge-warning">Yes</span>
) : (
<span className="badge badge-pill badge-secondary">No</span>
)}

<div className="flex items-center gap-2">
<span className="text-sm font-medium">Recommend Discharge: </span>
<div>
{" "}
{dailyRoundListDetailsData.recommend_discharge ? (
<span className="badge badge-pill badge-warning">Yes</span>
) : (
<span className="badge badge-pill badge-secondary">No</span>
)}
</div>
modamaan marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
</div>
</CardContent>
</Card>
</Page>
);
};
46 changes: 46 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,46 @@
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",
outline: "text-gray-950 dark:text-gray-50",
},
},
defaultVariants: {
variant: "default",
},
},
);

export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}

const Badge = React.memo(function Badge({
className,
variant,
"aria-label": ariaLabel,
...props
}: BadgeProps) {
return (
<div
role="status"
aria-label={ariaLabel}
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
);
});

export { Badge, badgeVariants };
Loading
Loading