From c32e659ec4be26b4a344028a03f9e3f3ab1fe375 Mon Sep 17 00:00:00 2001
From: yash-learner <yash.topaz@gmail.com>
Date: Tue, 7 Jan 2025 00:07:06 +0530
Subject: [PATCH] Re-wire all priority badges in all tabs

---
 src/components/Lab/ServiceRequestCard.tsx     | 11 +++++++++-
 .../Lab/pages/LabOrderTabs/InProcess.tsx      | 20 +++++++++++++++++--
 .../Lab/pages/LabOrderTabs/OrdersPlaced.tsx   | 14 ++++++++++---
 .../Lab/pages/LabOrderTabs/ReceivedAtLab.tsx  | 20 +++++++++++++++++--
 .../Lab/pages/LabOrderTabs/Results.tsx        | 16 +++++++++++++--
 .../Lab/pages/LabOrderTabs/ReviewRequired.tsx | 16 +++++++++++++--
 .../Lab/pages/LabOrderTabs/SentToLab.tsx      | 20 +++++++++++++++++--
 .../pages/LabOrderTabs/SpecimenCollected.tsx  | 20 +++++++++++++++++--
 .../Lab/pages/LabOrderTabs/index.tsx          | 15 --------------
 src/components/Lab/utils.ts                   | 15 ++++++++++++++
 10 files changed, 136 insertions(+), 31 deletions(-)

diff --git a/src/components/Lab/ServiceRequestCard.tsx b/src/components/Lab/ServiceRequestCard.tsx
index 449a6c4b335..10826a51d81 100644
--- a/src/components/Lab/ServiceRequestCard.tsx
+++ b/src/components/Lab/ServiceRequestCard.tsx
@@ -1,9 +1,12 @@
+import { cn } from "@/lib/utils";
+
 import { Badge } from "@/components/ui/badge";
 
 import { displayCode, displayUserName, formatDateTime } from "@/Utils/utils";
 import { ServiceRequest } from "@/types/emr/serviceRequest";
 
 import { Card, CardContent } from "../ui/card";
+import { getPriorityColor } from "./utils";
 
 export const ServiceRequestCard: React.FC<{
   serviceRequest: ServiceRequest;
@@ -38,7 +41,13 @@ export const ServiceRequestCard: React.FC<{
 
             <div>
               <h3 className="text-sm font-semibold text-gray-500">Priority</h3>
-              <Badge className="capitalize text-sm font-semibold">
+              <Badge
+                className={cn(
+                  "capitalize text-sm font-semibold",
+                  getPriorityColor(serviceRequest.priority),
+                )}
+                variant="outline"
+              >
                 {serviceRequest.priority}
               </Badge>
             </div>
diff --git a/src/components/Lab/pages/LabOrderTabs/InProcess.tsx b/src/components/Lab/pages/LabOrderTabs/InProcess.tsx
index 942d621cef0..612fef61d7b 100644
--- a/src/components/Lab/pages/LabOrderTabs/InProcess.tsx
+++ b/src/components/Lab/pages/LabOrderTabs/InProcess.tsx
@@ -3,6 +3,8 @@ import { ColumnDef } from "@tanstack/react-table";
 import { useNavigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
@@ -13,7 +15,11 @@ import query from "@/Utils/request/query";
 import { displayCode } from "@/Utils/utils";
 import { Specimen } from "@/types/emr/specimen";
 
-import { displayServiceRequestId, displaySpecimenId } from "../../utils";
+import {
+  displayServiceRequestId,
+  displaySpecimenId,
+  getPriorityColor,
+} from "../../utils";
 
 export default function InProcess() {
   const { t } = useTranslation();
@@ -49,7 +55,17 @@ export default function InProcess() {
     },
     {
       header: "Priority",
-      cell: ({ row }) => <Badge>{row.original.request.priority}</Badge>,
+      cell: ({ row }) => (
+        <Badge
+          className={cn(
+            "capitalize text-sm font-semibold",
+            getPriorityColor(row.original.request.priority),
+          )}
+          variant="outline"
+        >
+          {row.original.request.priority}
+        </Badge>
+      ),
     },
     {
       header: "Action",
diff --git a/src/components/Lab/pages/LabOrderTabs/OrdersPlaced.tsx b/src/components/Lab/pages/LabOrderTabs/OrdersPlaced.tsx
index a553e3a41eb..b6daff8da07 100644
--- a/src/components/Lab/pages/LabOrderTabs/OrdersPlaced.tsx
+++ b/src/components/Lab/pages/LabOrderTabs/OrdersPlaced.tsx
@@ -3,6 +3,8 @@ import { ColumnDef } from "@tanstack/react-table";
 import { useNavigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
@@ -13,8 +15,11 @@ import query from "@/Utils/request/query";
 import { displayCode } from "@/Utils/utils";
 import { Specimen } from "@/types/emr/specimen";
 
-import { displayServiceRequestId, displaySpecimenId } from "../../utils";
-import { getPriorityColor } from "./index";
+import {
+  displayServiceRequestId,
+  displaySpecimenId,
+  getPriorityColor,
+} from "../../utils";
 
 export default function OrdersPlaced() {
   const { t } = useTranslation();
@@ -52,7 +57,10 @@ export default function OrdersPlaced() {
       header: "Priority",
       cell: ({ row }) => (
         <Badge
-          className={getPriorityColor(row.original.request.priority)}
+          className={cn(
+            "capitalize text-sm font-semibold",
+            getPriorityColor(row.original.request.priority),
+          )}
           variant="outline"
         >
           {row.original.request.priority}
diff --git a/src/components/Lab/pages/LabOrderTabs/ReceivedAtLab.tsx b/src/components/Lab/pages/LabOrderTabs/ReceivedAtLab.tsx
index af9b640639f..3a651ca800d 100644
--- a/src/components/Lab/pages/LabOrderTabs/ReceivedAtLab.tsx
+++ b/src/components/Lab/pages/LabOrderTabs/ReceivedAtLab.tsx
@@ -3,6 +3,8 @@ import { ColumnDef } from "@tanstack/react-table";
 import { useNavigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
@@ -13,7 +15,11 @@ import query from "@/Utils/request/query";
 import { displayCode } from "@/Utils/utils";
 import { Specimen } from "@/types/emr/specimen";
 
-import { displayServiceRequestId, displaySpecimenId } from "../../utils";
+import {
+  displayServiceRequestId,
+  displaySpecimenId,
+  getPriorityColor,
+} from "../../utils";
 
 export default function ReceivedAtLab() {
   const { t } = useTranslation();
@@ -49,7 +55,17 @@ export default function ReceivedAtLab() {
     },
     {
       header: "Priority",
-      cell: ({ row }) => <Badge>{row.original.request.priority}</Badge>,
+      cell: ({ row }) => (
+        <Badge
+          className={cn(
+            "capitalize text-sm font-semibold",
+            getPriorityColor(row.original.request.priority),
+          )}
+          variant="outline"
+        >
+          {row.original.request.priority}
+        </Badge>
+      ),
     },
   ];
 
diff --git a/src/components/Lab/pages/LabOrderTabs/Results.tsx b/src/components/Lab/pages/LabOrderTabs/Results.tsx
index 335fba1cf57..fec250465fd 100644
--- a/src/components/Lab/pages/LabOrderTabs/Results.tsx
+++ b/src/components/Lab/pages/LabOrderTabs/Results.tsx
@@ -3,6 +3,8 @@ import { ColumnDef } from "@tanstack/react-table";
 import { useNavigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
@@ -13,7 +15,7 @@ import query from "@/Utils/request/query";
 import { displayCode } from "@/Utils/utils";
 import { DiagnosticReport } from "@/types/emr/diagnosticReport";
 
-import { displayServiceRequestId } from "../../utils";
+import { displayServiceRequestId, getPriorityColor } from "../../utils";
 
 export default function Results() {
   const { t } = useTranslation();
@@ -46,7 +48,17 @@ export default function Results() {
     },
     {
       header: "Priority",
-      cell: ({ row }) => <Badge>{row.original.based_on.priority}</Badge>,
+      cell: ({ row }) => (
+        <Badge
+          className={cn(
+            "capitalize text-sm font-semibold",
+            getPriorityColor(row.original.based_on.priority),
+          )}
+          variant="outline"
+        >
+          {row.original.based_on.priority}
+        </Badge>
+      ),
     },
     {
       header: "Action",
diff --git a/src/components/Lab/pages/LabOrderTabs/ReviewRequired.tsx b/src/components/Lab/pages/LabOrderTabs/ReviewRequired.tsx
index 6f06e423c26..a111398a334 100644
--- a/src/components/Lab/pages/LabOrderTabs/ReviewRequired.tsx
+++ b/src/components/Lab/pages/LabOrderTabs/ReviewRequired.tsx
@@ -3,6 +3,8 @@ import { ColumnDef } from "@tanstack/react-table";
 import { useNavigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
@@ -13,7 +15,7 @@ import query from "@/Utils/request/query";
 import { displayCode } from "@/Utils/utils";
 import { DiagnosticReport } from "@/types/emr/diagnosticReport";
 
-import { displayServiceRequestId } from "../../utils";
+import { displayServiceRequestId, getPriorityColor } from "../../utils";
 
 export default function ReviewRequired() {
   const { t } = useTranslation();
@@ -46,7 +48,17 @@ export default function ReviewRequired() {
     },
     {
       header: "Priority",
-      cell: ({ row }) => <Badge>{row.original.based_on.priority}</Badge>,
+      cell: ({ row }) => (
+        <Badge
+          className={cn(
+            "capitalize text-sm font-semibold",
+            getPriorityColor(row.original.based_on.priority),
+          )}
+          variant="outline"
+        >
+          {row.original.based_on.priority}
+        </Badge>
+      ),
     },
     {
       header: "Action",
diff --git a/src/components/Lab/pages/LabOrderTabs/SentToLab.tsx b/src/components/Lab/pages/LabOrderTabs/SentToLab.tsx
index 4393dbcb8e7..ca1ca71ee7b 100644
--- a/src/components/Lab/pages/LabOrderTabs/SentToLab.tsx
+++ b/src/components/Lab/pages/LabOrderTabs/SentToLab.tsx
@@ -3,6 +3,8 @@ import { ColumnDef } from "@tanstack/react-table";
 import { useNavigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
@@ -13,7 +15,11 @@ import query from "@/Utils/request/query";
 import { displayCode } from "@/Utils/utils";
 import { Specimen } from "@/types/emr/specimen";
 
-import { displayServiceRequestId, displaySpecimenId } from "../../utils";
+import {
+  displayServiceRequestId,
+  displaySpecimenId,
+  getPriorityColor,
+} from "../../utils";
 
 export default function SentToLab() {
   const { t } = useTranslation();
@@ -49,7 +55,17 @@ export default function SentToLab() {
     },
     {
       header: "Priority",
-      cell: ({ row }) => <Badge>{row.original.request.priority}</Badge>,
+      cell: ({ row }) => (
+        <Badge
+          className={cn(
+            "capitalize text-sm font-semibold",
+            getPriorityColor(row.original.request.priority),
+          )}
+          variant="outline"
+        >
+          {row.original.request.priority}
+        </Badge>
+      ),
     },
   ];
 
diff --git a/src/components/Lab/pages/LabOrderTabs/SpecimenCollected.tsx b/src/components/Lab/pages/LabOrderTabs/SpecimenCollected.tsx
index bbcc3010966..286f55ffc64 100644
--- a/src/components/Lab/pages/LabOrderTabs/SpecimenCollected.tsx
+++ b/src/components/Lab/pages/LabOrderTabs/SpecimenCollected.tsx
@@ -3,6 +3,8 @@ import { ColumnDef } from "@tanstack/react-table";
 import { useNavigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 
@@ -13,7 +15,11 @@ import query from "@/Utils/request/query";
 import { displayCode } from "@/Utils/utils";
 import { Specimen } from "@/types/emr/specimen";
 
-import { displayServiceRequestId, displaySpecimenId } from "../../utils";
+import {
+  displayServiceRequestId,
+  displaySpecimenId,
+  getPriorityColor,
+} from "../../utils";
 
 export default function SpecimenCollected() {
   const { t } = useTranslation();
@@ -49,7 +55,17 @@ export default function SpecimenCollected() {
     },
     {
       header: "Priority",
-      cell: ({ row }) => <Badge>{row.original.request.priority}</Badge>,
+      cell: ({ row }) => (
+        <Badge
+          className={cn(
+            "capitalize text-sm font-semibold",
+            getPriorityColor(row.original.request.priority),
+          )}
+          variant="outline"
+        >
+          {row.original.request.priority}
+        </Badge>
+      ),
     },
   ];
 
diff --git a/src/components/Lab/pages/LabOrderTabs/index.tsx b/src/components/Lab/pages/LabOrderTabs/index.tsx
index b81e0906d31..c8beda5ef2d 100644
--- a/src/components/Lab/pages/LabOrderTabs/index.tsx
+++ b/src/components/Lab/pages/LabOrderTabs/index.tsx
@@ -52,21 +52,6 @@ const labOrderTabs = [
   },
 ];
 
-export const getPriorityColor = (priority: string | undefined) => {
-  switch (priority) {
-    case "routine":
-      return "bg-blue-100 text-blue-800";
-    case "asap":
-      return "bg-yellow-100 text-yellow-800";
-    case "urgent":
-      return "bg-orange-100 text-orange-800";
-    case "stat":
-      return "bg-red-100 text-red-800";
-    default:
-      return "bg-gray-100 text-gray-800";
-  }
-};
-
 export default function LabOrdersTab() {
   const { t } = useTranslation();
   const currentPath = usePath();
diff --git a/src/components/Lab/utils.ts b/src/components/Lab/utils.ts
index e06d76d0446..a0b7f873cf3 100644
--- a/src/components/Lab/utils.ts
+++ b/src/components/Lab/utils.ts
@@ -17,3 +17,18 @@ export const displayServiceRequestId = (serviceRequest?: ServiceRequest) => {
 
   return "ORD " + serviceRequest.id.slice(0, 8);
 };
+
+export const getPriorityColor = (priority: string | undefined) => {
+  switch (priority) {
+    case "routine":
+      return "bg-blue-100 text-blue-800";
+    case "asap":
+      return "bg-yellow-100 text-yellow-800";
+    case "urgent":
+      return "bg-orange-100 text-orange-800";
+    case "stat":
+      return "bg-red-100 text-red-800";
+    default:
+      return "bg-gray-100 text-gray-800";
+  }
+};