app/components/ui/card-report.tsx

@@ -10,10 +10,11 @@ type CardReportProperty = {
     properties: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
   ) => JSX.Element
   url?: string
+  counter?: number[]
 }
 
 export const CardReport = (properties: CardReportProperty) => {
-  const { title, amount, icon: Icon, currency } = properties
+  const { title, amount, icon: Icon, counter, currency } = properties
   return (
     <div className="rounded-xl bg-white px-4 py-6 shadow-sm">
       <div className="flex items-center">
@@ -31,6 +32,11 @@ export const CardReport = (properties: CardReportProperty) => {
           </p>
         </div>
       </div>
+      {counter?.length && (
+        <div className="flex items-center pt-2">
+          Pribadi: {counter[0]} | Perusahaan: {counter[1]}
+        </div>
+      )}
     </div>
   )
 }

app/pages/dashboard-users/index.tsx

@@ -45,6 +45,10 @@ export const UsersPage = () => {
       title: 'Email',
       data: 'email',
     },
+    {
+      title: 'Kategori',
+      data: 'subscribe.status',
+    },
     {
       title: 'Status',
       data: 'subscribe.subscribe_plan.name',
@@ -58,7 +62,8 @@ export const UsersPage = () => {
         <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
       </div>
     ),
-    4: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
+    4: (_value: string) => <span className="text-sm">Pribadi</span>,
+    5: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
       <span
         className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
       >

app/pages/dashboard/data.ts

@@ -17,10 +17,12 @@ export const HISTORY = [
     title: 'Total Content Biasa',
     amount: 2890,
     icon: GraphIcon,
+    counter: [2190, 700],
   },
   {
     title: 'Total Content Premium',
     amount: 274,
     icon: DoctorIcon,
+    counter: [211, 54],
   },
 ]

app/pages/dashboard/index.tsx

@@ -34,12 +34,13 @@ export const DashboardPage = () => {
       </div>
 
       <div className="mt-5 grid grid-cols-1 gap-6 sm:grid-cols-3 sm:grid-rows-2">
-        {HISTORY.map(({ title, amount, icon }, index) => (
+        {HISTORY.map(({ title, amount, icon, counter }, index) => (
           <CardReport
             key={index}
             title={title}
             amount={amount}
             icon={icon}
+            counter={counter}
           />
         ))}
         <div className="max-h-[300px] sm:col-span-2 sm:col-start-2 sm:row-span-2 sm:row-start-1">

app/routes/_admin.lg-admin.tsx

@@ -1,9 +1,11 @@
 import { isRouteErrorResponse, Outlet, redirect } from 'react-router'
+import { XiorError } from 'xior'
 
 import { getStaff } from '~/apis/admin/get-staff'
 import { AUTH_PAGES } from '~/configs/pages'
 import { AdminDefaultLayout } from '~/layouts/admin/default'
 import { handleCookie } from '~/libs/cookies'
+import { setStaffLogoutHeaders } from '~/libs/logout-header.server'
 
 import type { Route } from './+types/_admin.lg-admin'
 
@@ -14,8 +16,14 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   let staffData
 
   if (accessToken) {
-    const { data } = await getStaff({ accessToken })
+    try {
-    staffData = data
+      const { data } = await getStaff({ accessToken })
+      staffData = data
+    } catch (error) {
+      if (error instanceof XiorError && error.response?.status === 401) {
+        setStaffLogoutHeaders()
+      }
+    }
   }
 
   if (!isAuthPage && !accessToken) {