Added patient category descriptions for ICU bed patients

cypress/e2e/patient_spec/patient_consultation.cy.ts

@@ -345,8 +345,8 @@ describe("Patient Consultation in multiple combination", () => {
       "Bleeding",
     ]);
     patientConsultationPage.clickAddSymptom();
-    // Comfort Care category
-    patientConsultationPage.selectPatientCategory("Comfort Care");
+    // Mild category
+    patientConsultationPage.selectPatientCategory("Mild");
     // Date of symptoms
     // Decision after consultation - Referred to Facility
     patientConsultationPage.selectPatientSuggestion(

src/Common/constants.tsx

@@ -441,17 +441,49 @@ export const INSULIN_INTAKE_FREQUENCY_OPTIONS = [
   "TD",
 ] as const;
 
-export type PatientCategoryID = "Comfort" | "Stable" | "Moderate" | "Critical";
+export type PatientCategoryID =
+  | "Comfort"
+  | "Stable"
+  | "Moderate"
+  | "Critical"
+  | "ActivelyDying";
 
 export const PATIENT_CATEGORIES: {
   id: PatientCategoryID;
   text: PatientCategory;
+  description: string;
   twClass: string;
 }[] = [
-  { id: "Comfort", text: "Comfort Care", twClass: "patient-comfort" },
-  { id: "Stable", text: "Mild", twClass: "patient-stable" },
-  { id: "Moderate", text: "Moderate", twClass: "patient-abnormal" },
-  { id: "Critical", text: "Critical", twClass: "patient-critical" },
+  {
+    id: "Comfort", // Comfort Care is discontinued
+    text: "Comfort Care",
+    twClass: "patient-comfort",
+    description: "End of life care",
+  },
+  {
+    id: "Stable",
+    text: "Mild",
+    twClass: "patient-stable",
+    description: "Urgent: not life-threatening",
+  },
+  {
+    id: "Moderate",
+    text: "Moderate",
+    twClass: "patient-abnormal",
+    description: "Emergency: could be life-threatening",
+  },
+  {
+    id: "Critical",
+    text: "Critical",
+    twClass: "patient-critical",
+    description: "Immediate: life-threatening",
+  },
+  {
+    id: "ActivelyDying",
+    text: "Actively Dying",
+    twClass: "patient-activelydying",
+    description: "",
+  },
 ];
 
 export const PATIENT_FILTER_CATEGORIES = PATIENT_CATEGORIES;

src/Components/Facility/ConsultationForm.tsx

@@ -1123,22 +1123,6 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                       />
                     </div>
                   </div>
-
-                  <div className="col-span-6" ref={fieldRef["category"]}>
-                    <PatientCategorySelect
-                      labelSuffix={
-                        disabledFields.includes("category") && (
-                          <p className="text-xs font-medium text-warning-500">
-                            A daily round already exists.
-                          </p>
-                        )
-                      }
-                      required
-                      label="Category"
-                      {...field("category")}
-                    />
-                  </div>
-
                   <div className="col-span-6" ref={fieldRef["suggestion"]}>
                     <SelectFormField
                       required
@@ -1300,7 +1284,7 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                     </div>
                   )}
 
-                  <div className="col-span-6 mb-6" ref={fieldRef["patient_no"]}>
+                  <div className="col-span-6" ref={fieldRef["patient_no"]}>
                     <TextFormField
                       {...field("patient_no")}
                       label={
@@ -1311,6 +1295,20 @@ export const ConsultationForm = ({ facilityId, patientId, id }: Props) => {
                       required={state.form.suggestion === "A"}
                     />
                   </div>
+                  <div className="col-span-6 mb-6" ref={fieldRef["category"]}>
+                    <PatientCategorySelect
+                      labelSuffix={
+                        disabledFields.includes("category") && (
+                          <p className="text-xs font-medium text-warning-500">
+                            A daily round already exists.
+                          </p>
+                        )
+                      }
+                      required
+                      label="Category"
+                      {...field("category")}
+                    />
+                  </div>
                 </div>
 
                 <div className="flex flex-col gap-4 pb-4">

src/Components/Facility/models.tsx

@@ -101,7 +101,12 @@ export interface OptionsType {
   disabled?: boolean;
 }
 
-export type PatientCategory = "Comfort Care" | "Mild" | "Moderate" | "Critical";
+export type PatientCategory =
+  | "Comfort Care" // Discontinued
+  | "Mild"
+  | "Moderate"
+  | "Critical"
+  | "Actively Dying";
 
 export interface PatientConsentModel {
   id: string;

src/Components/Patient/ManagePatients.tsx

@@ -514,7 +514,9 @@ export const PatientManager = () => {
           <div
             className={`absolute inset-y-0 left-0 flex h-full w-1 items-center rounded-l-lg transition-all duration-200 ease-in-out group-hover:w-5 ${categoryClass}`}
           >
-            <span className="absolute -inset-x-32 inset-y-0 flex -rotate-90 items-center justify-center text-center text-xs font-bold uppercase tracking-widest opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100">
+            <span
+              className={`absolute -inset-x-32 inset-y-0 flex -rotate-90 items-center justify-center text-center ${category === "Actively Dying" ? "text-[10px]" : "text-xs"} font-bold uppercase tracking-widest opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100`}
+            >
               {category || "UNKNOWN"}
             </span>
           </div>

src/Components/Patient/PatientCategorySelect.tsx

@@ -14,9 +14,14 @@ export default function PatientCategorySelect(
     <SelectFormField
       {...props}
       required={props.required ?? true}
-      options={PATIENT_CATEGORIES}
+      options={
+        props.value === "Comfort"
+          ? PATIENT_CATEGORIES
+          : PATIENT_CATEGORIES.filter((c) => c.id !== "Comfort")
+      } // Comfort Care is discontinued
       optionValue={(option) => option.id}
       optionLabel={(option) => option.text}
+      optionDescription={(option) => option.description}
       optionSelectedLabel={(option) => (
         <span className="flex items-center gap-3">
           <div
@@ -27,6 +32,7 @@ export default function PatientCategorySelect(
                 Stable: "bg-patient-stable",
                 Moderate: "bg-patient-abnormal",
                 Critical: "bg-patient-critical",
+                ActivelyDying: "bg-patient-activelydying",
               }[option.id],
             )}
           />

src/Components/Scribe/formDetails.ts

@@ -68,13 +68,15 @@ const DAILY_ROUND_FORM_SCRIBE_DATA: Field[] = [
     friendlyName: "Patient Category",
     id: "patient_category",
     type: "string",
-    example: "Comfort Care",
+    example: "Mild",
     default: "",
     description: "A string to categorize the patient.",
-    options: PATIENT_CATEGORIES.map((category) => ({
-      id: category.id,
-      text: category.text,
-    })),
+    options: PATIENT_CATEGORIES.filter((c) => c.id !== "Comfort").map(
+      (category) => ({
+        id: category.id,
+        text: category.text,
+      }),
+    ),
     validator: (value) => {
       return typeof value === "string";
     },

src/style/index.css

@@ -712,6 +712,10 @@ button:disabled,
   @apply bg-patient-unknown text-patient-unknown-fore
 }
 
+.patient-activelydying {
+    @apply bg-patient-activelydying text-patient-activelydying-fore
+}
+
 .patient-comfort-ring { 
   @apply ring-patient-comfort
 }
@@ -727,6 +731,9 @@ button:disabled,
 .patient-unknown-ring {
   @apply ring-patient-unknown
 }
+.patient-activelydying-ring {
+    @apply ring-patient-activelydying
+}
 
 .patient-comfort-profile { 
   @apply border-2 border-patient-comfort rounded-t
@@ -743,6 +750,9 @@ button:disabled,
 .patient-unknown-profile {
   @apply border border-patient-unknown rounded
 }
+.patient-activelydying-profile {
+    @apply border-2 border-patient-activelydying rounded-t
+}
 
 /* for gmaps search dropdown */
 .pac-container {

tailwind.config.js

@@ -70,6 +70,10 @@ module.exports = {
             DEFAULT: gray[400],
             fore: gray[800],
           },
+          activelydying: {
+            DEFAULT: colors.red[800],
+            fore: colors.red[100],
+          },
         },
       },
       padding: {