From a19c246ddb761eab5727cb7328215f31dcf956a7 Mon Sep 17 00:00:00 2001
From: Potenz <vishnu10kumar11@gmail.com>
Date: Thu, 30 Oct 2025 21:54:02 +0530
Subject: [PATCH] feat(aptmpt page - patient status badge added

---
 .../appointments/patient-status-badge.tsx     | 55 +++++++++++++++++++
 apps/Frontend/src/pages/appointments-page.tsx | 24 +++++---
 2 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 apps/Frontend/src/components/appointments/patient-status-badge.tsx

diff --git a/apps/Frontend/src/components/appointments/patient-status-badge.tsx b/apps/Frontend/src/components/appointments/patient-status-badge.tsx
new file mode 100644
index 0000000..42ee5da
--- /dev/null
+++ b/apps/Frontend/src/components/appointments/patient-status-badge.tsx
@@ -0,0 +1,55 @@
+import * as React from "react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { PatientStatus } from "@repo/db/types";
+
+export function PatientStatusBadge({
+  status,
+  className = "",
+  size = 10,
+}: {
+  status: PatientStatus;
+  className?: string;
+  size?: number; // px
+}) {
+  const { bg, label } = getVisuals(status);
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            aria-label={`Patient status: ${label}`}
+            className={`inline-block rounded-full ring-2 ring-white shadow ${className}`}
+            style={{
+              width: size,
+              height: size,
+              backgroundColor: bg,
+              position: "absolute",
+              top: "-6px", // stick out above card
+              right: "-6px", // stick out right
+            }}
+          />
+        </TooltipTrigger>
+        <TooltipContent side="top" className="px-2 py-1 text-xs">
+          {label}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+function getVisuals(status: PatientStatus): { label: string; bg: string } {
+  switch (status) {
+    case "ACTIVE":
+      return { label: "Active", bg: "#16A34A" }; // MEDICAL GREEN (not same as staff green)
+    case "INACTIVE":
+      return { label: "Inactive", bg: "#DC2626" }; // ALERT RED (distinct from card red)
+    default:
+      return { label: "Unknown", bg: "#6B7280" }; // solid gray
+  }
+}
diff --git a/apps/Frontend/src/pages/appointments-page.tsx b/apps/Frontend/src/pages/appointments-page.tsx
index 0da7f13..946d637 100644
--- a/apps/Frontend/src/pages/appointments-page.tsx
+++ b/apps/Frontend/src/pages/appointments-page.tsx
@@ -37,6 +37,7 @@ import {
   Appointment,
   InsertAppointment,
   Patient,
+  PatientStatus,
   UpdateAppointment,
 } from "@repo/db/types";
 import {
@@ -51,6 +52,7 @@ import {
   setTaskStatus,
 } from "@/redux/slices/seleniumEligibilityBatchCheckTaskSlice";
 import { SeleniumTaskBanner } from "@/components/ui/selenium-task-banner";
+import { PatientStatusBadge } from "@/components/appointments/patient-status-badge";
 
 // Define types for scheduling
 interface TimeSlot {
@@ -69,6 +71,7 @@ interface ScheduledAppointment {
   id?: number;
   patientId: number;
   patientName: string;
+  patientStatus: PatientStatus;
   staffId: number;
   date: string | Date;
   startTime: string | Date;
@@ -163,12 +166,12 @@ export default function AppointmentsPage() {
   });
 
   const colors = [
-    "bg-blue-600",
-    "bg-emerald-600",
-    "bg-purple-600",
-    "bg-pink-600",
-    "bg-yellow-500",
-    "bg-red-600",
+    "bg-sky-500", // light blue
+    "bg-teal-500", // teal
+    "bg-indigo-500", // soft indigo
+    "bg-rose-400", // muted rose
+    "bg-amber-400", // muted amber
+    "bg-orange-500", // softer warm orange
   ];
 
   // Assign colors cycling through the list
@@ -403,6 +406,7 @@ export default function AppointmentsPage() {
     const patientName = patient
       ? `${patient.firstName} ${patient.lastName}`
       : "Unknown Patient";
+    const patientStatus = patient?.status;
 
     const staffId = Number(apt.staffId ?? 1);
 
@@ -418,6 +422,7 @@ export default function AppointmentsPage() {
     const processed = {
       ...apt,
       patientName,
+      patientStatus,
       staffId,
       status: apt.status ?? null,
       date: formatLocalDate(apt.date),
@@ -615,6 +620,12 @@ export default function AppointmentsPage() {
         }}
         onContextMenu={(e) => handleContextMenu(e, appointment.id ?? 0)}
       >
+        <PatientStatusBadge
+          status={appointment.patientStatus ?? "UNKNOWN"}
+          className="pointer-events-auto" // ensure tooltip works
+          size={30} // bump size up from 10 → 14
+        />
+
         <div className="font-bold truncate flex items-center gap-1">
           <Move className="h-3 w-3" />
           {appointment.patientName}
@@ -835,7 +846,6 @@ export default function AppointmentsPage() {
         description: `Processed ${results.length} appointments — success: ${successCount}, warnings: ${warningCount}, skipped: ${skippedCount}.`,
         variant: skippedCount > 0 ? "destructive" : "default",
       });
-
     } catch (err: any) {
       console.error("[check-all-eligibilities] error", err);
       dispatch(