fix: change user status type from string to number and update badge rendering logic

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,
 })

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) => (
+    5: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
-      <span className={`rounded-lg px-2 text-sm ${getStatusBadge(value)}`}>
+      <span
+        className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
+      >
         {value}
       </span>
     ),