From 109939b0b43b085fe669acc0babbbf33865aaf3b Mon Sep 17 00:00:00 2001
From: bagusajisaputroo <bagusajisaputro21@gmail.com>
Date: Mon, 12 May 2025 15:18:44 +0700
Subject: [PATCH] color customization on some field in managetransfertype

---
 .../hooks/ManageTransferTypeContext.tsx       | 95 +++++++++++++++----
 1 file changed, 78 insertions(+), 17 deletions(-)

diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
index c815be0..afb3628 100644
--- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
+++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx
@@ -106,6 +106,25 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
     setShowDeleteDialog(show);
   }, []);
 
+  const StatusBadge = ({
+    value,
+    map
+  }: {
+    value: string;
+    map: Record<string, { label: string; color: string }>;
+  }) => {
+    const statusInfo = map[value] || { label: value || 'Unknown', color: 'gray' };
+    const { label, color } = statusInfo;
+
+    return (
+      <span
+        className={`px-2 py-1 text-xs font-semibold rounded-full bg-${color}-100 text-${color}-600`}
+      >
+        {label}
+      </span>
+    );
+  };
+
   const columns = useMemo<ColumnDef<any>[]>(
     () => [
       {
@@ -217,40 +236,82 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React
         enableHiding: false,
         meta: { headerClassName: 'w-[250px]' }
       },
+
       {
-        accessorFn: (row) => (row.status === 'Y' ? 'Active' : 'Inactive'),
+        accessorFn: (row) => row.status,
         id: 'status',
         header: ({ column }) => <DataGridColumnHeader title="Status" column={column} />,
         enableSorting: false,
         enableHiding: false,
-        meta: { headerClassName: 'w-[150px]' }
+        cell: ({ row }) => {
+          const status = row.original.status;
+          const label = status === 'Y' ? 'Active' : 'Inactive';
+          const color = status === 'Y' ? 'green' : 'red';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full bg-${color}-100 text-${color}-600`}
+            >
+              {label}
+            </span>
+          );
+        },
+        meta: {
+          headerClassName: 'w-[100px]',
+          cellClassName: 'text-center'
+        }
       },
       {
-        accessorFn: (row: { status_kind: string }) => {
-          const mapping: Record<string, string> = {
-            R: 'Return',
-            T: 'Transfer',
-            P: 'Purchase',
-            W: 'Withdraw',
-            U: 'Top Up',
-            N: 'Top Up Patner'
-          };
-
-          return mapping[row.status_kind] || 'Unknown';
-        },
+        accessorFn: (row) => row.status_kind,
         id: 'status_kind',
         header: ({ column }) => <DataGridColumnHeader title="Status Kind" column={column} />,
         enableSorting: false,
         enableHiding: false,
-        meta: { headerClassName: 'w-[250px]' }
+        cell: ({ row }) => {
+          const kind = row.original.status_kind;
+
+          const mapping: Record<string, { label: string; className: string }> = {
+            R: { label: 'Return', className: 'bg-blue-100 text-blue-600' },
+            T: { label: 'Transfer', className: 'bg-indigo-100 text-indigo-600' },
+            P: { label: 'Purchase', className: 'bg-green-100 text-green-600' },
+            W: { label: 'Withdraw', className: 'bg-fuchsia-100 text-fuchsia-600' },
+            U: { label: 'Top Up', className: 'bg-yellow-100 text-yellow-600' },
+            N: { label: 'Top Up Patner', className: 'bg-purple-100 text-purple-600' }
+          };
+
+          const kindInfo = mapping[kind] || {
+            label: 'Unknown',
+            className: 'bg-gray-100 text-gray-600'
+          };
+
+          return (
+            <span className={`px-2 py-1 text-xs font-semibold rounded-full ${kindInfo.className}`}>
+              {kindInfo.label}
+            </span>
+          );
+        },
+        meta: { headerClassName: 'w-[250px]', cellClassName: 'text-center' }
       },
       {
-        accessorFn: (row) => (row.status_approval === 'Y' ? 'Yes' : 'No'),
+        accessorFn: (row) => row.status_approval,
         id: 'status_approval',
         header: ({ column }) => <DataGridColumnHeader title="Approval Status" column={column} />,
         enableSorting: false,
         enableHiding: false,
-        meta: { headerClassName: 'w-[150px]' }
+        cell: ({ row }) => {
+          const approval = row.original.status_approval;
+          const label = approval === 'Y' ? 'Yes' : 'No';
+          const color = approval === 'Y' ? 'green' : 'red';
+
+          return (
+            <span
+              className={`px-2 py-1 text-xs font-semibold rounded-full bg-${color}-100 text-${color}-600`}
+            >
+              {label}
+            </span>
+          );
+        },
+        meta: { headerClassName: 'w-[150px]', cellClassName: 'text-center' }
       },
       {
         id: 'actions',