From 56d9081b4fee56d2293b57785b3913a95471f3a0 Mon Sep 17 00:00:00 2001
From: "fredy.siswanto" <fredy.siswanto@komunal.co.id>
Date: Tue, 11 Mar 2025 23:36:19 +0700
Subject: [PATCH] fix: change user status type from string to number and update
 badge rendering logic

---
 app/apis/admin/get-users.ts         |  2 +-
 app/pages/dashboard-users/index.tsx | 17 +++++------------
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/app/apis/admin/get-users.ts b/app/apis/admin/get-users.ts
index db411c4..ba88a79 100644
--- a/app/apis/admin/get-users.ts
+++ b/app/apis/admin/get-users.ts
@@ -12,7 +12,7 @@ const subscribeResponseSchema = z.object({
   subscribe_plan_id: z.string(),
   start_date: z.string(),
   end_date: z.string().nullable(),
-  status: z.string(),
+  status: z.number(),
   auto_renew: z.boolean(),
   subscribe_plan: subscribePlanResponseSchema,
 })
diff --git a/app/pages/dashboard-users/index.tsx b/app/pages/dashboard-users/index.tsx
index a9b503f..147f187 100644
--- a/app/pages/dashboard-users/index.tsx
+++ b/app/pages/dashboard-users/index.tsx
@@ -3,21 +3,12 @@ import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { useRouteLoaderData } from 'react-router'
 
 import type { TUserResponse } from '~/apis/admin/get-users'
+import { getStatusBadge, type TColorBadge } from '~/components/ui/color-badge'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard.users._index'
 import { formatDate } from '~/utils/formatter'
 
-type TColorBadge = 'Baru' | 'Premium' | 'Pembayaran'
-
-const getStatusBadge = (status: TColorBadge) => {
-  const statusColors = {
-    Baru: 'bg-[#DFE5FF] text-[#4C5CA0]',
-    Premium: 'bg-[#FFFCAF] text-[#DBCA6E]',
-    Pembayaran: 'bg-[#FEC4FF] text-[#CC6EDB]',
-  }
-  return statusColors[status] || 'bg-gray-200 text-gray-700'
-}
 export const UsersPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.users._index',
@@ -72,8 +63,10 @@ export const UsersPage = () => {
       </div>
     ),
     4: (_value: string) => <span className="text-sm">Pribadi</span>,
-    5: (value: TColorBadge) => (
-      <span className={`rounded-lg px-2 text-sm ${getStatusBadge(value)}`}>
+    5: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
+      <span
+        className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
+      >
         {value}
       </span>
     ),