feat: add API endpoints for fetching staff profiles and staff list

app/apis/admin/get-profile.ts

@@ -11,7 +11,7 @@ const staffResponseSchema = z.object({
   }),
 })
 
-export const getStaff = async (parameters: THttpServer) => {
+export const getProfile = async (parameters: THttpServer) => {
   try {
     const { data } = await HttpServer(parameters).get(`/api/staff/profile`)
     return staffResponseSchema.parse(data)

app/apis/admin/get-staffs.ts

@@ -0,0 +1,25 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const staffResponseSchema = z.object({
+  id: z.string(),
+  email: z.string(),
+  name: z.string(),
+  profile_picture: z.string(),
+})
+const staffsResponseSchema = z.object({
+  data: z.array(staffResponseSchema),
+})
+
+export type TStaffResponse = z.infer<typeof staffResponseSchema>
+
+export const getStaffs = async (parameters: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/staff/get-all`)
+    return staffsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/pages/dashboard-staffs/index.tsx

@@ -1,67 +1,50 @@
 import { PlusIcon } from '@heroicons/react/24/solid'
-import { Link } from 'react-router'
+import DT, { type ConfigColumns } from 'datatables.net-dt'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
+import { Link, useRouteLoaderData } from 'react-router'
 
+import type { TStaffResponse } from '~/apis/admin/get-staffs'
 import { Button } from '~/components/ui/button'
+import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
+import type { loader } from '~/routes/_admin.lg-admin._dashboard.staffs._index'
 
 export const StaffsPage = () => {
-  // const loaderData = useRouteLoaderData<typeof loader>(
+  const loaderData = useRouteLoaderData<typeof loader>(
-  //   'routes/_admin.lg-admin._dashboard.staffs._index',
+    'routes/_admin.lg-admin._dashboard.staffs._index',
-  // )
+  )
 
-  // DataTable.use(DT)
+  DataTable.use(DT)
-  // const dataTable =
+  const { staffsData: dataTable } = loaderData || {}
-  //   loaderData?.usersData?.sort(
-  //     (a, b) =>
-  //       new Date(b.subscribe.start_date).getTime() -
-  //       new Date(a.subscribe.start_date).getTime(),
-  //   ) || []
 
-  // const dataColumns: ConfigColumns[] = [
+  const dataColumns: ConfigColumns[] = [
-  //   {
+    {
-  //     title: 'No',
+      title: 'No',
-  //     render: (
+      render: (
-  //       _data: unknown,
+        _data: unknown,
-  //       _type: unknown,
+        _type: unknown,
-  //       _row: unknown,
+        _row: unknown,
-  //       meta: { row: number },
+        meta: { row: number },
-  //     ) => {
+      ) => {
-  //       return meta.row + 1
+        return meta.row + 1
-  //     },
+      },
-  //   },
+    },
-  //   {
+    {
-  //     title: 'Tanggal Daftar',
+      title: 'Staf',
-  //     data: 'created_at',
+    },
-  //   },
+    {
-  //   {
+      title: 'Email',
-  //     title: 'User',
+      data: 'email',
-  //   },
+    },
-  //   {
+  ]
-  //     title: 'Phone',
+  const dataSlot: DataTableSlots = {
-  //     data: 'phone',
+    1: (_value: unknown, _type: unknown, data: TStaffResponse) => (
-  //   },
+      <div>
-  //   {
+        <div>{data.name}</div>
-  //     title: 'Status',
+        <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
-  //     data: 'subscribe.subscribe_plan.name',
+      </div>
-  //   },
+    ),
-  // ]
+  }
-  // const dataSlot: DataTableSlots = {
-  //   1: (value: string) => formatDate(value),
-  //   2: (_value: unknown, _type: unknown, data: TUserResponse) => (
-  //     <div>
-  //       <div>{data.email}</div>
-  //       <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
-  //     </div>
-  //   ),
-  //   3: (value: string) => <span>{value}</span>,
-  //   4: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
-  //     <span
-  //       className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
-  //     >
-  //       {value}
-  //     </span>
-  //   ),
-  // }
 
   return (
     <div className="relative">
@@ -78,12 +61,12 @@ export const StaffsPage = () => {
         </Button>
       </div>
 
-      {/* <UiTable
+      <UiTable
-        data={dataTable || []}
+        data={dataTable}
         columns={dataColumns}
         slots={dataSlot}
-        title="Daftar Users"
+        title="Daftar Staf"
-      /> */}
+      />
     </div>
   )
 }

app/pages/dashboard-subscribe-plan/index.tsx

@@ -115,7 +115,7 @@ export const SubscribePlanPage = () => {
       </div>
 
       <UiTable
-        data={dataTable || []}
+        data={dataTable}
         columns={dataColumns}
         slots={dataSlot}
         options={{

app/pages/dashboard-users/index.tsx

@@ -77,7 +77,7 @@ export const UsersPage = () => {
       </div>
 
       <UiTable
-        data={dataTable || []}
+        data={dataTable}
         columns={dataColumns}
         slots={dataSlot}
         title="Daftar Pengguna"

app/routes/_admin.lg-admin._dashboard.staffs._index.tsx

@@ -1,15 +1,17 @@
 import { isRouteErrorResponse } from 'react-router'
 
+import { getStaffs } from '~/apis/admin/get-staffs'
+import { handleCookie } from '~/libs/cookies'
 import { StaffsPage } from '~/pages/dashboard-staffs'
 
 import type { Route } from './+types/_admin.lg-admin._dashboard.staffs._index'
 
-// export const loader = async ({ request }: Route.LoaderArgs) => {
+export const loader = async ({ request }: Route.LoaderArgs) => {
-//   const { staffToken: accessToken } = await handleCookie(request)
+  const { staffToken: accessToken } = await handleCookie(request)
-//   const { data: usersData } = await getUsers({ accessToken })
+  const { data: staffsData } = await getStaffs({ accessToken })
 
-//   return { usersData }
+  return { staffsData }
-// }
+}
 
 export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
   let message = 'Oops!'

app/routes/_admin.lg-admin.tsx

@@ -1,6 +1,6 @@
 import { isRouteErrorResponse, Outlet, redirect } from 'react-router'
 
-import { getStaff } from '~/apis/admin/get-staff'
+import { getProfile } from '~/apis/admin/get-profile'
 import { AUTH_PAGES } from '~/configs/pages'
 import { AdminDefaultLayout } from '~/layouts/admin/default'
 import { handleCookie } from '~/libs/cookies'
@@ -14,7 +14,7 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   let staffData
 
   if (accessToken) {
-    const { data } = await getStaff({ accessToken })
+    const { data } = await getProfile({ accessToken })
     staffData = data
   }
 

app/routes/actions.admin.login.ts

@@ -3,7 +3,7 @@ import { data } from 'react-router'
 import { getValidatedFormData } from 'remix-hook-form'
 import { XiorError } from 'xior'
 
-import { getStaff } from '~/apis/admin/get-staff'
+import { getProfile } from '~/apis/admin/get-profile'
 import { staffLoginRequest } from '~/apis/admin/login-staff'
 import { loginSchema, type TLoginSchema } from '~/pages/staff-login'
 import { generateStaffTokenCookie } from '~/utils/token'
@@ -28,7 +28,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
 
     const { data: loginData } = await staffLoginRequest(payload)
     const { token: accessToken } = loginData
-    const { data: staffData } = await getStaff({ accessToken })
+    const { data: staffData } = await getProfile({ accessToken })
     const tokenCookie = generateStaffTokenCookie({ accessToken })
 
     const headers = new Headers()