fix: handle nullable ads data and ensure safe filtering in advertisements

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/apis/common/get-ads.ts

@@ -11,7 +11,7 @@ const adResponseSchema = z.object({
   clicked: z.number(),
 })
 const adsResponseSchema = z.object({
-  data: z.array(adResponseSchema),
+  data: z.array(adResponseSchema).nullable(),
 })
 
 export type TAdResponse = z.infer<typeof adResponseSchema>

app/components/icons/profile.tsx

@@ -1,23 +0,0 @@
-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,5 +1,4 @@
 import type { TAuthorResponse } from '~/apis/common/get-news'
-import { ProfileIcon } from '~/components/icons/profile'
 import { formatDate } from '~/utils/formatter'
 
 type TDetailNewsAuthor = {
@@ -11,15 +10,14 @@ 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}
+        src={author?.profile_picture || '/images/profile-placeholder.svg'}
+        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/dialog-profile.tsx

@@ -18,10 +18,10 @@ import { useAdminContext } from '~/contexts/admin'
 import type { loader } from '~/routes/_admin.lg-admin'
 
 export const profileSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
+  name: z.string().min(1, 'Wajib diisi'),
-  email: z.string().email('Email is invalid'),
+  email: z.string().email('Email tidak valid'),
   profile_picture: z.string().url({
-    message: 'Gambar profil must be valid',
+    message: 'URL tidak valid',
   }),
 })
 
@@ -115,7 +115,7 @@ export const DialogProfile = () => {
                 type="submit"
                 className="w-full rounded-md py-2"
               >
-                Save
+                Simpan
               </Button>
             </fetcher.Form>
           </RemixFormProvider>

app/layouts/admin/navbar.tsx

@@ -6,7 +6,6 @@ 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'
@@ -34,15 +33,17 @@ 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={staffData?.profile_picture}
+                src={
+                  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/layouts/news/dialog-login.tsx

@@ -12,7 +12,7 @@ import { useNewsContext } from '~/contexts/news'
 
 export const loginSchema = z.object({
   email: z.string().email('Email tidak valid'),
-  password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+  password: z.string().min(6, 'Minimal 6 karakter'),
 })
 
 export type TLoginSchema = z.infer<typeof loginSchema>

app/layouts/news/dialog-register.tsx

@@ -16,8 +16,8 @@ import type { loader } from '~/routes/_news'
 export const registerSchema = z
   .object({
     email: z.string().email('Email tidak valid'),
-    password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+    password: z.string().min(6, 'Minimal 6 karakter'),
-    rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+    rePassword: z.string().min(6, 'Minimal 6 karakter'),
     phone: z.string().min(10, 'No telepon tidak valid'),
     subscribe_plan: z
       .object({
@@ -28,7 +28,7 @@ export const registerSchema = z
       .optional()
       .nullable()
       .refine((data) => !!data, {
-        message: 'Silakan pilih paket berlangganan',
+        message: 'Pilih paket berlangganan',
       }),
   })
   .refine((field) => field.password === field.rePassword, {

app/pages/dashboard-advertisements/index.tsx

@@ -56,7 +56,7 @@ export const AdvertisementsPage = () => {
       data: 'clicked',
     },
     {
-      title: 'Action',
+      title: 'Tindakan',
       data: 'id',
     },
   ]
@@ -111,7 +111,7 @@ export const AdvertisementsPage = () => {
       </div>
 
       <UiTable
-        data={dataTable}
+        data={dataTable || []}
         columns={dataColumns}
         slots={dataSlot}
         title="Daftar Spanduk Iklan"

app/pages/dashboard-categories/index.tsx

@@ -51,7 +51,7 @@ export const CategoriesPage = () => {
       data: 'description',
     },
     {
-      title: 'Action',
+      title: 'Tindakan',
       data: 'id',
     },
   ]

app/pages/dashboard-contents/index.tsx

@@ -55,15 +55,15 @@ export const ContentsPage = () => {
     },
     { title: 'Tag', data: 'tags' },
     {
-      title: 'Subscription',
+      title: 'Tipe Langganan',
       data: 'is_premium',
     },
     {
-      title: 'Jumlah Pembaca',
+      title: 'Jumlah Penayangan',
       data: 'views',
     },
     {
-      title: 'Action',
+      title: 'Tindakan',
       data: 'id',
     },
   ]
@@ -72,7 +72,7 @@ export const ContentsPage = () => {
     2: (value: TAuthorResponse) => (
       <>
         <div>{value.name}</div>
-        <div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
+        <div className="text-xs 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,67 +1,62 @@
 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 className="flex items-center gap-x-2">
-  //   {
+        <img
-  //     title: 'Status',
+          src={data?.profile_picture || '/images/profile-placeholder.svg'}
-  //     data: 'subscribe.subscribe_plan.name',
+          onError={(event) => {
-  //   },
+            event.currentTarget.src = '/images/profile-placeholder.svg'
-  // ]
+          }}
-  // const dataSlot: DataTableSlots = {
+          alt={data?.name}
-  //   1: (value: string) => formatDate(value),
+          className="size-8 rounded-full bg-[#C4C4C4] object-cover"
-  //   2: (_value: unknown, _type: unknown, data: TUserResponse) => (
+        />
-  //     <div>
+        <div>
-  //       <div>{data.email}</div>
+          <div>{data.name}</div>
-  //       <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
+          <div className="text-xs text-[#7C7C7C]">
-  //     </div>
+            ID: {data.id.slice(0, 8)}
-  //   ),
+          </div>
-  //   3: (value: string) => <span>{value}</span>,
+        </div>
-  //   4: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
+      </div>
-  //     <span
+    ),
-  //       className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
+  }
-  //     >
-  //       {value}
-  //     </span>
-  //   ),
-  // }
 
   return (
     <div className="relative">
@@ -78,12 +73,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

@@ -61,7 +61,7 @@ export const SubscribePlanPage = () => {
       data: 'status',
     },
     {
-      title: 'Action',
+      title: 'Tindakan',
       data: 'id',
     },
   ]
@@ -115,7 +115,7 @@ export const SubscribePlanPage = () => {
       </div>
 
       <UiTable
-        data={dataTable || []}
+        data={dataTable}
         columns={dataColumns}
         slots={dataSlot}
         options={{

app/pages/dashboard-tags/index.tsx

@@ -46,7 +46,7 @@ export const TagsPage = () => {
       data: 'code',
     },
     {
-      title: 'Action',
+      title: 'Tindakan',
       data: 'id',
     },
   ]

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-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
+        <div className="text-xs 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/pages/form-advertisements/index.tsx

@@ -15,16 +15,16 @@ import { dateInput } from '~/utils/formatter'
 export const adsSchema = z.object({
   id: z.string().optional(),
   image: z.string().url({
-    message: 'Gambar must be a valid URL',
+    message: 'URL tidak valid',
   }),
   url: z.string().url({
-    message: 'URL must be valid',
+    message: 'URL tidak valid',
   }),
   start_date: z.string().min(1, {
-    message: 'Tanggal mulai is required',
+    message: 'Pilih tanggal',
   }),
   end_date: z.string().min(1, {
-    message: 'Tanggal berakhir is required',
+    message: 'Pilih tanggal',
   }),
 })
 export type TAdsSchema = z.infer<typeof adsSchema>
@@ -101,7 +101,7 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
                 size="lg"
                 className="text-md h-[42px] rounded-md"
               >
-                Save
+                Simpan
               </Button>
             </div>
             <div className="flex items-end justify-between gap-4">

app/pages/form-category/index.tsx

@@ -13,7 +13,7 @@ import { urlFriendlyCode } from '~/utils/formatter'
 
 export const categorySchema = z.object({
   id: z.string().optional(),
-  name: z.string().min(3, 'Nama minimal 3 karakter'),
+  name: z.string().min(3, 'Minimal 3 karakter'),
   code: z.string(),
   sequence: z.preprocess(Number, z.number().optional()),
   description: z.string(),
@@ -101,7 +101,7 @@ export const FormCategoryPage = (properties: TProperties) => {
                 size="lg"
                 className="text-md h-[42px] rounded-md"
               >
-                Save
+                Simpan
               </Button>
             </div>
             <div className="flex items-end justify-between gap-4">

app/pages/form-contents/index.tsx

@@ -31,7 +31,7 @@ export const contentSchema = z.object({
         .nullable(),
     )
     .refine((data) => data.length, {
-      message: 'Please select a category',
+      message: 'Pilih kategori',
     }),
   tags: z
     .array(
@@ -46,17 +46,17 @@ export const contentSchema = z.object({
     )
     .optional(),
   title: z.string().min(1, {
-    message: 'Judul is required',
+    message: 'Wajib diisi',
   }),
   content: z.string().min(1, {
-    message: 'Konten is required',
+    message: 'Wajib diisi',
   }),
   featured_image: z.string().url({
-    message: 'Gambar Unggulan must be a valid URL',
+    message: 'URL tidak valid',
   }),
   is_premium: z.boolean().optional(),
   live_at: z.string().min(1, {
-    message: 'Tanggal mulai tayang is required',
+    message: 'Pilih tanggal',
   }),
 })
 
@@ -144,7 +144,7 @@ export const FormContentsPage = (properties: TProperties) => {
               size="lg"
               className="text-md h-[42px] rounded-md"
             >
-              Save
+              Simpan
             </Button>
           </div>
           <div className="flex items-end justify-between gap-4">
@@ -154,7 +154,7 @@ export const FormContentsPage = (properties: TProperties) => {
               name="categories"
               label="Kategori"
               placeholder={
-                watchCategories
+                watchCategories?.length
                   ? watchCategories.map((category) => category?.name).join(', ')
                   : 'Pilih Kategori'
               }
@@ -167,11 +167,11 @@ export const FormContentsPage = (properties: TProperties) => {
               multiple
               id="tags"
               name="tags"
-              label="Tags"
+              label="Tag"
               placeholder={
-                watchTags
+                watchTags?.length
                   ? watchTags.map((tag) => tag?.name).join(', ')
-                  : 'Pilih Tags'
+                  : 'Pilih Tag'
               }
               options={tags}
               className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
@@ -180,7 +180,7 @@ export const FormContentsPage = (properties: TProperties) => {
             />
             <Input
               id="live_at"
-              label="Tanggal Mulai Tayang"
+              label="Mulai Tayang"
               placeholder="Pilih Tanggal"
               name="live_at"
               type="date"
@@ -190,7 +190,7 @@ export const FormContentsPage = (properties: TProperties) => {
             <Switch
               id="is_premium"
               name="is_premium"
-              label="Subscription"
+              label="Tipe Langganan"
               labelClassName="text-sm font-medium text-[#363636]"
               className="h-[42px]"
               options={{ true: 'Premium', false: 'Biasa' }}

app/pages/form-staff/index.tsx

@@ -15,14 +15,14 @@ export const staffSchema = z
     profile_picture: z
       .string()
       .url({
-        message: 'Gambar profil must be a valid URL',
+        message: 'URL tidak valid',
       })
       .or(z.literal('')),
     name: z.string().min(1, {
-      message: 'Nama staf is required',
+      message: 'Wajib diisi',
     }),
-    password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+    password: z.string().min(6, 'Minimal 6 karakter'),
-    rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+    rePassword: z.string().min(6, 'Minimal 6 karakter'),
     email: z.string().email('Email tidak valid'),
   })
   .refine((field) => field.password === field.rePassword, {
@@ -91,7 +91,7 @@ export const FormStaffPage = () => {
                 size="lg"
                 className="text-md h-[42px] rounded-md"
               >
-                Save
+                Simpan
               </Button>
             </div>
             <div className="flex items-end justify-between gap-4">

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

@@ -15,11 +15,11 @@ import { urlFriendlyCode } from '~/utils/formatter'
 
 export const subscribePlanSchema = z.object({
   id: z.string().optional(),
-  name: z.string().min(3, 'Nama minimal 3 karakter'),
+  name: z.string().min(3, 'Minimal 3 karakter'),
   code: z.string(),
-  length: z.preprocess(Number, z.number().min(1, 'Length minimal 1')),
+  length: z.preprocess(Number, z.number().min(1, 'Durasi minimal 1')),
   price: z.preprocess(Number, z.number().min(1, 'Harga minimal 1')),
-  status: z.string().min(1, 'Status is required'),
+  status: z.string().min(1, 'Pilih status'),
 })
 export type TSubscribePlanSchema = z.infer<typeof subscribePlanSchema>
 type TProperties = {
@@ -106,7 +106,7 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
                 size="lg"
                 className="text-md h-[42px] rounded-md"
               >
-                Save
+                Simpan
               </Button>
             </div>
             <div className="flex items-end justify-between gap-4">

app/pages/form-tag/index.tsx

@@ -13,7 +13,7 @@ import { urlFriendlyCode } from '~/utils/formatter'
 
 export const tagSchema = z.object({
   id: z.string().optional(),
-  name: z.string().min(3, 'Nama minimal 3 karakter'),
+  name: z.string().min(3, 'Minimal 3 karakter'),
   code: z.string(),
 })
 export type TTagSchema = z.infer<typeof tagSchema>
@@ -94,7 +94,7 @@ export const FormTagPage = (properties: TProperties) => {
                 size="lg"
                 className="text-md h-[42px] rounded-md"
               >
-                Save
+                Simpan
               </Button>
             </div>
           </fetcher.Form>

app/pages/staff-login/index.tsx

@@ -11,7 +11,7 @@ import { APP } from '~/configs/meta'
 
 export const loginSchema = z.object({
   email: z.string().email('Email tidak valid'),
-  password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+  password: z.string().min(6, 'Minimal 6 karakter'),
 })
 
 export type TLoginSchema = z.infer<typeof loginSchema>

app/routes/_admin.lg-admin._dashboard.advertisements.update.$id.tsx

@@ -8,7 +8,7 @@ import type { Route } from './+types/_admin.lg-admin._dashboard.advertisements.u
 export const loader = async ({ params }: Route.LoaderArgs) => {
   const { data: adsData } = await getAds()
   const { id } = params
-  const adData = adsData.find((ads) => ads.id === id)
+  const adData = adsData?.find((ads) => ads.id === id)
   return { adData }
 }
 

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/_news.tsx

@@ -28,11 +28,13 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   const { data: subscribePlanData } = await getSubscribePlan()
   const { data: categoriesData } = await getCategories()
   let { data: adsData } = await getAds()
-  adsData = adsData.filter(
+  if (adsData) {
+    adsData = adsData?.filter(
       (ad) =>
         new Date(ad.start_date) <= new Date() &&
         new Date(ad.end_date) >= new Date(),
     )
+  }
 
   return {
     userData,

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()

public/images/profile-placeholder.svg

@@ -0,0 +1,6 @@
+<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>