Re-wire all priority badges in all tabs

yash-learner · Jan 6, 2025 · c32e659 · c32e659
1 parent 875d3cb
commit c32e659
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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";
+  }
+};