app/apis/admin/get-staff.ts

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

app/apis/admin/get-staffs.ts

@@ -1,25 +0,0 @@
-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/components/icons/profile.tsx

@@ -0,0 +1,23 @@
+import type { JSX, SVGProps } from 'react'
+
+export const ProfileIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={18}
+      height={19}
+      viewBox="0 0 18 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.97 5.82A3.956 3.956 0 019 9.789a3.956 3.956 0 01-3.97-3.97A3.955 3.955 0 019 1.853a3.955 3.955 0 013.97 3.968zM9 16.852c-3.253 0-6-.53-6-2.57s2.764-2.55 6-2.55c3.254 0 6 .529 6 2.569s-2.764 2.55-6 2.55z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

app/components/ui/news-author.tsx

@@ -1,4 +1,5 @@
 import type { TAuthorResponse } from '~/apis/common/get-news'
+import { ProfileIcon } from '~/components/icons/profile'
 import { formatDate } from '~/utils/formatter'
 
 type TDetailNewsAuthor = {
@@ -10,14 +11,15 @@ type TDetailNewsAuthor = {
 export const NewsAuthor = ({ author, live_at, text }: TDetailNewsAuthor) => {
   return (
     <div className="mb-2 flex items-center gap-2 align-middle">
+      {author?.profile_picture ? (
         <img
-        src={author?.profile_picture || '/images/profile-placeholder.svg'}
+          src={author?.profile_picture}
-        onError={(event) => {
-          event.currentTarget.src = '/images/profile-placeholder.svg'
-        }}
           alt={author?.name}
           className="size-12 rounded-full bg-[#C4C4C4] object-cover"
         />
+      ) : (
+        <ProfileIcon className="size-12 rounded-full bg-[#C4C4C4]" />
+      )}
 
       <div>
         <h4 className="text-md">{author?.name}</h4>

app/layouts/admin/navbar.tsx

@@ -6,6 +6,7 @@ import {
 import { ChevronDownIcon } from '@heroicons/react/24/solid'
 import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
+import { ProfileIcon } from '~/components/icons/profile'
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
 import { useAdminContext } from '~/contexts/admin'
@@ -33,17 +34,15 @@ export const Navbar = () => {
         <Popover className="relative">
           <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between rounded-xl p-2 ring-1 ring-[#707FDD]/10 hover:shadow focus:outline-none">
             <div className="flex items-center space-x-3">
+              {staffData?.profile_picture ? (
                 <img
-                src={
+                  src={staffData?.profile_picture}
-                  staffData?.profile_picture ||
-                  '/images/profile-placeholder.svg'
-                }
-                onError={(event) => {
-                  event.currentTarget.src = '/images/profile-placeholder.svg'
-                }}
                   alt={staffData?.name}
                   className="size-8 rounded-full bg-[#C4C4C4] object-cover"
                 />
+              ) : (
+                <ProfileIcon className="size-8 rounded-full bg-[#C4C4C4]" />
+              )}
 
               <span className="text-sm">{staffData?.name}</span>
             </div>

app/pages/dashboard-contents/index.tsx

@@ -72,7 +72,7 @@ export const ContentsPage = () => {
     2: (value: TAuthorResponse) => (
       <>
         <div>{value.name}</div>
-        <div className="text-xs text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
+        <div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
       </>
     ),
     3: (value: string) => <span className="text-sm">{value}</span>,

app/pages/dashboard-staffs/index.tsx

@@ -1,62 +1,67 @@
 import { PlusIcon } from '@heroicons/react/24/solid'
-import DT, { type ConfigColumns } from 'datatables.net-dt'
+import { Link } from 'react-router'
-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 { staffsData: dataTable } = loaderData || {}
+  // const dataTable =
+  //   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: 'Staf',
+  //     title: 'Tanggal Daftar',
-    },
+  //     data: 'created_at',
-    {
+  //   },
-      title: 'Email',
+  //   {
-      data: 'email',
+  //     title: 'User',
-    },
+  //   },
-  ]
+  //   {
-  const dataSlot: DataTableSlots = {
+  //     title: 'Phone',
-    1: (_value: unknown, _type: unknown, data: TStaffResponse) => (
+  //     data: 'phone',
-      <div className="flex items-center gap-x-2">
+  //   },
-        <img
+  //   {
-          src={data?.profile_picture || '/images/profile-placeholder.svg'}
+  //     title: 'Status',
-          onError={(event) => {
+  //     data: 'subscribe.subscribe_plan.name',
-            event.currentTarget.src = '/images/profile-placeholder.svg'
+  //   },
-          }}
+  // ]
-          alt={data?.name}
+  // const dataSlot: DataTableSlots = {
-          className="size-8 rounded-full bg-[#C4C4C4] object-cover"
+  //   1: (value: string) => formatDate(value),
-        />
+  //   2: (_value: unknown, _type: unknown, data: TUserResponse) => (
-        <div>
+  //     <div>
-          <div>{data.name}</div>
+  //       <div>{data.email}</div>
-          <div className="text-xs text-[#7C7C7C]">
+  //       <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
-            ID: {data.id.slice(0, 8)}
+  //     </div>
-          </div>
+  //   ),
-        </div>
+  //   3: (value: string) => <span>{value}</span>,
-      </div>
+  //   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">
@@ -73,12 +78,12 @@ export const StaffsPage = () => {
         </Button>
       </div>
 
-      <UiTable
+      {/* <UiTable
-        data={dataTable}
+        data={dataTable || []}
         columns={dataColumns}
         slots={dataSlot}
-        title="Daftar Staf"
+        title="Daftar Users"
-      />
+      /> */}
     </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

@@ -55,7 +55,7 @@ export const UsersPage = () => {
     2: (_value: unknown, _type: unknown, data: TUserResponse) => (
       <div>
         <div>{data.email}</div>
-        <div className="text-xs text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
+        <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
       </div>
     ),
     3: (value: string) => <span>{value}</span>,
@@ -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,17 +1,15 @@
 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: staffsData } = await getStaffs({ accessToken })
+//   const { data: usersData } = await getUsers({ accessToken })
 
-  return { staffsData }
+//   return { usersData }
-}
+// }
 
 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 { getProfile } from '~/apis/admin/get-profile'
+import { getStaff } from '~/apis/admin/get-staff'
 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 getProfile({ accessToken })
+    const { data } = await getStaff({ 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 { getProfile } from '~/apis/admin/get-profile'
+import { getStaff } from '~/apis/admin/get-staff'
 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 getProfile({ accessToken })
+    const { data: staffData } = await getStaff({ accessToken })
     const tokenCookie = generateStaffTokenCookie({ accessToken })
 
     const headers = new Headers()

public/images/profile-placeholder.svg

@@ -1,6 +0,0 @@
-<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"
-  class="size-8 rounded-full bg-[#C4C4C4]">
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M12.97 5.82A3.956 3.956 0 019 9.789a3.956 3.956 0 01-3.97-3.97A3.955 3.955 0 019 1.853a3.955 3.955 0 013.97 3.968zM9 16.852c-3.253 0-6-.53-6-2.57s2.764-2.55 6-2.55c3.254 0 6 .529 6 2.569s-2.764 2.55-6 2.55z"
-    fill="currentColor"></path>
-</svg>