dummy care plan UI

ohcnetwork · Jan 28, 2025 · 0fd3547 · 0fd3547
1 parent d586d13
commit 0fd3547
Show file tree

Hide file tree

Showing 8 changed files with 363 additions and 2 deletions.
diff --git a/public/locale/en.json b/public/locale/en.json
@@ -48,6 +48,7 @@
   "DOMESTIC_HEALTHCARE_SUPPORT__NO_SUPPORT": "No support",
   "DOMESTIC_HEALTHCARE_SUPPORT__PAID_CAREGIVER": "Paid caregiver",
   "ENCOUNTER_TAB__abdm": "ABDM Records",
+  "ENCOUNTER_TAB__care-plan": "Care Plan",
   "ENCOUNTER_TAB__feed": "Feed",
   "ENCOUNTER_TAB__files": "Files",
   "ENCOUNTER_TAB__medicines": "Medicines",
@@ -491,6 +492,7 @@
   "care": "CARE",
   "care_backend": "Care Backend",
   "care_frontend": "Care Frontend",
+  "care_plan": "Care Plan",
   "category": "Category",
   "category_description": "Choose the category that best describes the resource needed.",
   "caution": "Caution",

diff --git a/src/Routers/routes/ConsultationRoutes.tsx b/src/Routers/routes/ConsultationRoutes.tsx
@@ -3,6 +3,7 @@ import EncounterQuestionnaire from "@/components/Patient/EncounterQuestionnaire"
 import FileUploadPage from "@/components/Patient/FileUploadPage";
 
 import { AppRoutes } from "@/Routers/AppRouter";
+import CarePlan from "@/pages/CarePlan/CarePlan";
 import { EncounterShow } from "@/pages/Encounters/EncounterShow";
 import { PrintPrescription } from "@/pages/Encounters/PrintPrescription";
 
@@ -75,6 +76,17 @@ const consultationRoutes: AppRoutes = {
       type="encounter"
     />
   ),
+  "/facility/:facilityId/encounter/:encounterId/care-plan/:careplanId": ({
+    facilityId,
+    encounterId,
+    careplanId,
+  }) => (
+    <CarePlan
+      facilityId={facilityId}
+      encounterId={encounterId}
+      careplanId={careplanId}
+    />
+  ),
 };
 
 export default consultationRoutes;
diff --git a/src/pages/CarePlan/CarePlan.tsx b/src/pages/CarePlan/CarePlan.tsx
@@ -0,0 +1,104 @@
+import { useQuery } from "@tanstack/react-query";
+import dayjs from "dayjs";
+import { useTranslation } from "react-i18next";
+
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+import PageTitle from "@/components/Common/PageTitle";
+
+import { DummyCarePlanRetrieve } from "@/types/emr/careplan/careplanApi";
+
+export default function CarePlan(props: {
+  facilityId: string;
+  encounterId: string;
+  careplanId: string;
+}) {
+  const { t } = useTranslation();
+
+  const planQuery = useQuery({
+    queryKey: ["care-plan", props.careplanId],
+    queryFn: () => DummyCarePlanRetrieve(props.careplanId),
+  });
+
+  const careplan = planQuery.data;
+
+  return (
+    <div className="flex flex-col-reverse md:flex-row gap-4 md:justify-between">
+      <div>
+        <PageTitle
+          title={planQuery.data?.title || t("care_plan")}
+          breadcrumbs={true}
+          backUrl={`/facility/${props.facilityId}/encounter/${props.encounterId}/care-plan`}
+        />
+        <div className="text-lg text-gray-500">
+          {dayjs(careplan?.end_date).isBefore(dayjs()) ? (
+            "Completed"
+          ) : dayjs(careplan?.start_date).isAfter(dayjs()) ? (
+            <span className="text-blue-500">Upcoming</span>
+          ) : (
+            <div className="text-red-500 flex items-center gap-1">
+              <div className="bg-red-500 w-2 aspect-square rounded-full inline-block" />
+              Active
+            </div>
+          )}
+        </div>
+        <div className="text-sm text-gray-500 mt-4">
+          {dayjs(careplan?.start_date).isAfter(dayjs())
+            ? "Starts on"
+            : "Started On"}{" "}
+          : {dayjs(careplan?.start_date).format("DD/MM/YYYY hh:mm a")}
+          <br />
+          {dayjs(careplan?.end_date).isAfter(dayjs())
+            ? "Ends on"
+            : "Ended On"}{" "}
+          : {dayjs(careplan?.end_date).format("DD/MM/YYYY hh:mm a")}
+        </div>
+        <div className="mt-4">{careplan?.description}</div>
+        <div className="mt-8">
+          <b className="text-lg">Addresses</b>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Code</TableHead>
+                <TableHead>Detail</TableHead>
+              </TableRow>
+            </TableHeader>
+            {careplan?.addresses.map((code, i) => (
+              <TableRow key={i}>
+                <TableCell>{code.code}</TableCell>
+                <TableCell>{code.display}</TableCell>
+              </TableRow>
+            ))}
+          </Table>
+        </div>
+        <div className="mt-8">
+          <b className="text-lg">Goals</b>
+        </div>
+      </div>
+      <div className="md:w-[200px] w-full flex flex-col gap-2">
+        <Button className="w-full" variant={"primary"}>
+          Update
+        </Button>
+        <Button className="w-full" variant={"primary"}>
+          Prescribe Medication
+        </Button>
+        <Button className="w-full" variant={"primary"}>
+          Order Lab Test
+        </Button>
+        <Button className="w-full" variant={"primary"}>
+          Record Task
+        </Button>
+        <Button className="w-full" variant={"primary"}>
+          Print Plan
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Encounters/EncounterShow.tsx b/src/pages/Encounters/EncounterShow.tsx
@@ -20,6 +20,7 @@ import { EncounterUpdatesTab } from "@/pages/Encounters/tabs/EncounterUpdatesTab
 import { Encounter } from "@/types/emr/encounter";
 import { Patient } from "@/types/emr/newPatient";
 
+import { EncounterCarePlanTab } from "./tabs/EncounterCarePlanTab";
 import { EncounterNotesTab } from "./tabs/EncounterNotesTab";
 
 export interface EncounterTabProps {
@@ -35,6 +36,7 @@ const defaultTabs = {
   medicines: EncounterMedicinesTab,
   files: EncounterFilesTab,
   notes: EncounterNotesTab,
+  "care-plan": EncounterCarePlanTab,
   // nursing: EncounterNursingTab,
   // neurological_monitoring: EncounterNeurologicalMonitoringTab,
   // pressure_sore: EncounterPressureSoreTab,

diff --git a/src/pages/Encounters/tabs/EncounterCarePlanTab.tsx b/src/pages/Encounters/tabs/EncounterCarePlanTab.tsx
@@ -0,0 +1,62 @@
+import { useQuery } from "@tanstack/react-query";
+import dayjs from "dayjs";
+import { Link } from "raviger";
+
+import SubHeading from "@/CAREUI/display/SubHeading";
+
+import { EncounterTabProps } from "@/pages/Encounters/EncounterShow";
+import { DummyCarePlanGet } from "@/types/emr/careplan/careplanApi";
+
+export const EncounterCarePlanTab = (props: EncounterTabProps) => {
+  const { patient, encounter, facilityId } = props;
+  const { data: carePlans } = useQuery({
+    queryKey: ["patient", patient.id, "care-plans"],
+    queryFn: DummyCarePlanGet,
+  });
+  return (
+    <div className="flex flex-col">
+      <SubHeading title="Care Plan" />
+      <div className="grid grid-cols-3 gap-4">
+        {carePlans?.results.map((careplan, i) => (
+          <Link
+            href={`/facility/${facilityId}/encounter/${encounter.id}/care-plan/${careplan.id}`}
+            key={i}
+            className="bg-white border rounded-lg p-4 hover:text-inherit hover:border-primary-500"
+          >
+            <span className="font-bold">{careplan.title}</span>
+            <div className="text-sm text-gray-500">
+              {dayjs(careplan.end_date).isBefore(dayjs()) ? (
+                "Completed"
+              ) : dayjs(careplan.start_date).isAfter(dayjs()) ? (
+                <span className="text-blue-500">Upcoming</span>
+              ) : (
+                <div className="text-red-500 flex items-center gap-1">
+                  <div className="bg-red-500 w-2 aspect-square rounded-full inline-block" />
+                  Active
+                </div>
+              )}
+            </div>
+            <div className="mt-4 text-sm">{careplan.description}</div>
+            <div className="text-xs text-gray-500 mt-4">
+              {dayjs(careplan.start_date).isAfter(dayjs())
+                ? "Starts on"
+                : "Started On"}{" "}
+              : {dayjs(careplan.start_date).format("DD/MM/YYYY hh:mm a")}
+              <br />
+              {dayjs(careplan.end_date).isAfter(dayjs())
+                ? "Ends on"
+                : "Ended On"}{" "}
+              : {dayjs(careplan.end_date).format("DD/MM/YYYY hh:mm a")}
+            </div>
+            <div className="mt-4">
+              <span className="text-sm font-semibold">3/4 Goals Complete</span>
+              <div className="bg-gray-200 rounded-full h-1 overflow-hidden mt-2">
+                <div className="bg-primary-500 rounded-full w-3/4 h-full" />
+              </div>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/src/types/emr/careplan/careplan.ts b/src/types/emr/careplan/careplan.ts
@@ -0,0 +1,37 @@
+import { BaseModel } from "@/Utils/types";
+
+export const CARE_PLAN_STATUS = [
+  "draft",
+  "active",
+  "completed",
+  "on-hold",
+  "cancelled",
+] as const;
+
+export const CARE_PLAN_INTENT = [
+  "proposal",
+  "plan",
+  "order",
+  "option",
+  "directive",
+] as const;
+
+interface Code {
+  code: string;
+  display: string;
+  system: string;
+}
+
+export interface CarePlan extends BaseModel {
+  status: (typeof CARE_PLAN_STATUS)[number];
+  intent: (typeof CARE_PLAN_INTENT)[number];
+  title: string;
+  description: string;
+  start_date: string;
+  end_date: string;
+  patient: string;
+  encounter: string;
+  custodian: string;
+  addresses: Code[];
+  notes?: string;
+}