From 20d124504b9e07f799cdc1f721274e6d2962133f Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 24 Dec 2025 10:57:02 +0700
Subject: [PATCH] refactor(FE-316): Use CSS background classes for status
 badges

---
 .../pages/uniformity/UniformityTable.tsx       | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/pages/uniformity/UniformityTable.tsx b/src/components/pages/uniformity/UniformityTable.tsx
index f4ea1bb4..c76b4b26 100644
--- a/src/components/pages/uniformity/UniformityTable.tsx
+++ b/src/components/pages/uniformity/UniformityTable.tsx
@@ -22,16 +22,15 @@ import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
 import Card from '@/components/Card';
-import { Color } from '@/types/theme';
 
-const statusColorMap: Record<string, Color> = {
-  APPROVED: 'success',
-  REJECTED: 'error',
-  CREATED: 'none',
+const statusColorMap: Record<string, string> = {
+  APPROVED: 'bg-[#00D39033]',
+  REJECTED: 'bg-error/10',
+  CREATED: 'bg-[#f3f3f4]',
 };
 
 const statusIndicatorColorMap: Record<string, string> = {
-  APPROVED: 'bg-success',
+  APPROVED: 'bg-[#008000]',
   REJECTED: 'bg-error',
   CREATED: 'bg-[#D9D9D9]',
 };
@@ -42,8 +41,8 @@ const statusTextMap: Record<string, string> = {
   CREATED: 'Pengajuan',
 };
 
-const getStatusColor = (status: string): Color => {
-  return statusColorMap[status] || 'info';
+const getStatusColor = (status: string): string => {
+  return statusColorMap[status] || 'bg-info';
 };
 
 const getStatusIndicatorColor = (status: string): string => {
@@ -273,9 +272,8 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
               <Badge
                 statusIndicator={true}
                 variant='soft'
-                color={getStatusColor(status)}
                 className={{
-                  badge: `rounded-xl w-full justify-start border border-gray-200`,
+                  badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getStatusColor(status)}`,
                   status: getStatusIndicatorColor(status),
                 }}
               >