refactor: remove counter property from CardReport and dashboard data for simplification

app/components/ui/card-report.tsx

@@ -10,11 +10,10 @@ 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, counter, currency } = properties
+  const { title, amount, icon: Icon, currency } = properties
   return (
     <div className="rounded-xl bg-white px-4 py-6 shadow-sm">
       <div className="flex items-center">
@@ -32,11 +31,6 @@ 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,10 +45,6 @@ export const UsersPage = () => {
       title: 'Email',
       data: 'email',
     },
-    {
-      title: 'Kategori',
-      data: 'subscribe.status',
-    },
     {
       title: 'Status',
       data: 'subscribe.subscribe_plan.name',
@@ -62,8 +58,7 @@ export const UsersPage = () => {
         <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
       </div>
     ),
-    4: (_value: string) => <span className="text-sm">Pribadi</span>,
+    4: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
-    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,12 +17,10 @@ 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,13 +34,12 @@ 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, counter }, index) => (
+        {HISTORY.map(({ title, amount, icon }, 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,11 +1,9 @@
 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'
 
@@ -16,14 +14,8 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   let staffData
 
   if (accessToken) {
-    try {
+    const { data } = await getStaff({ accessToken })
-      const { data } = await getStaff({ accessToken })
+    staffData = data
-      staffData = data
-    } catch (error) {
-      if (error instanceof XiorError && error.response?.status === 401) {
-        setStaffLogoutHeaders()
-      }
-    }
   }
 
   if (!isAuthPage && !accessToken) {