feat: add toast notifications for delete actions and update button titles in advertisements page

app/apis/admin/create-ads.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TAdsSchema } from '~/pages/form-advertisements'
+
+const advertisementsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TAdsSchema
+} & THttpServer
+
+export const createAdsRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).post(
+      '/api/ads/create',
+      payload,
+    )
+    return advertisementsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/delete-ads.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TAdsSchema } from '~/pages/form-advertisements'
+
+const deleteAdsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  id: TAdsSchema['id']
+} & THttpServer
+
+export const deleteAdsRequest = async (parameters: TParameters) => {
+  const { id, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).delete(
+      `/api/ads/${id}/delete`,
+    )
+    return deleteAdsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/get-users.ts

@@ -12,7 +12,7 @@ const subscribeResponseSchema = z.object({
   subscribe_plan_id: z.string(),
   start_date: z.string(),
   end_date: z.string().nullable(),
-  status: z.string(),
+  status: z.number(),
   auto_renew: z.boolean(),
   subscribe_plan: subscribePlanResponseSchema,
 })

app/apis/common/get-ads.ts

@@ -0,0 +1,24 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const adResponseSchema = z.object({
+  id: z.string(),
+  image_url: z.string(),
+  url: z.string(),
+})
+const adsResponseSchema = z.object({
+  data: z.array(adResponseSchema),
+})
+
+export type TAdResponse = z.infer<typeof adResponseSchema>
+
+export const getAds = async (parameters?: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/ads`)
+    return adsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/components/icons/chart.tsx

@@ -1,23 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-
-export const ChartIcon = (
-  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="M5.498 1.61h7.004c2.55 0 3.99 1.447 3.998 3.998v7.005c0 2.55-1.447 3.997-3.998 3.997H5.498c-2.551 0-3.998-1.447-3.998-3.997V5.608c0-2.55 1.447-3.998 3.998-3.998zm3.539 11.895a.62.62 0 00.623-.562V5.3a.612.612 0 00-.285-.592.63.63 0 00-.96.592v7.643a.632.632 0 00.622.562zm3.45 0c.316 0 .585-.24.623-.562v-2.46a.629.629 0 00-.96-.593.604.604 0 00-.285.593v2.46c.03.322.3.562.623.562zm-6.322-.562a.62.62 0 01-.623.562.62.62 0 01-.622-.562V7.76a.63.63 0 01.293-.592.617.617 0 01.66 0c.202.127.315.36.292.592v5.183z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

app/components/icons/chat.tsx

@@ -1,23 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-
-export const ChatIcon = (
-  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="M1.5 9.122C1.5 5.17 4.657 1.61 9.015 1.61c4.26 0 7.485 3.493 7.485 7.49 0 4.633-3.78 7.51-7.5 7.51-1.23 0-2.595-.33-3.69-.976-.382-.233-.705-.406-1.117-.27l-1.515.45c-.383.12-.728-.18-.615-.586l.502-1.682a.786.786 0 00-.052-.676C1.868 11.683 1.5 10.384 1.5 9.122zm6.525 0c0 .533.427.961.96.969a.963.963 0 000-1.923.956.956 0 00-.96.954zm3.457.007c0 .526.428.962.96.962a.963.963 0 000-1.923.958.958 0 00-.96.961zm-5.954.962a.967.967 0 01-.96-.962c0-.533.427-.961.96-.961.532 0 .96.428.96.961a.967.967 0 01-.96.962z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

app/components/icons/document.tsx

@@ -1,23 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-
-export const DocumentIcon = (
-  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="M5.857 1.61h6.286c2.317 0 3.607 1.335 3.607 3.623v7.747c0 2.325-1.29 3.63-3.607 3.63H5.857c-2.28 0-3.607-1.305-3.607-3.63V5.233c0-2.288 1.328-3.623 3.607-3.623zm.203 3.495v-.007h2.242a.588.588 0 010 1.178H6.06a.585.585 0 010-1.17zm0 4.56h5.88a.586.586 0 000-1.17H6.06a.586.586 0 000 1.17zm0 3.428h5.88c.3-.03.525-.286.525-.585a.588.588 0 00-.525-.593H6.06a.596.596 0 00-.563.908c.12.187.338.3.563.27z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

app/components/icons/medical-notes.tsx

@@ -1,21 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-
-export const MedicalNotesIcon = (
-  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-) => {
-  return (
-    <svg
-      width={12}
-      height={16}
-      viewBox="0 0 12 16"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...properties}
-    >
-      <path
-        d="M9.844 1.985H7.5C7.5.951 6.66.11 5.625.11 4.591.11 3.75.951 3.75 1.985H1.406C.63 1.985 0 2.615 0 3.392v10.312c0 .776.63 1.406 1.406 1.406h8.438c.776 0 1.406-.63 1.406-1.406V3.392c0-.777-.63-1.407-1.406-1.407zm-4.219-.703c.39 0 .703.314.703.703 0 .39-.313.703-.703.703a.701.701 0 01-.703-.703c0-.39.313-.703.703-.703zm2.813 8.906a.235.235 0 01-.235.235h-1.64v1.64a.235.235 0 01-.235.235H4.922a.235.235 0 01-.234-.235v-1.64H3.046a.235.235 0 01-.235-.235V8.782c0-.129.106-.234.235-.234h1.64v-1.64c0-.13.106-.235.235-.235h1.406c.129 0 .234.105.234.234v1.64h1.641c.129 0 .235.106.235.235v1.406zm0-5.625a.235.235 0 01-.235.235H3.047a.235.235 0 01-.235-.235v-.468c0-.13.106-.235.235-.235h5.156c.129 0 .235.106.235.235v.468z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

app/components/icons/plus.tsx

@@ -1,20 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-export const PlusIcon = (
-  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-) => {
-  return (
-    <svg
-      width={14}
-      height={14}
-      viewBox="0 0 14 14"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...properties}
-    >
-      <path
-        d="M6 8H1a.965.965 0 01-.712-.288A.972.972 0 010 7c0-.283.095-.52.288-.712A.97.97 0 011 6h5V1c0-.283.096-.52.288-.712A.972.972 0 017 0c.283 0 .52.095.713.288A.96.96 0 018 1v5h5c.283 0 .521.096.713.288.192.192.288.43.287.712 0 .283-.097.52-.288.713A.957.957 0 0113 8H8v5a.968.968 0 01-.288.713A.964.964 0 017 14a.973.973 0 01-.712-.288A.965.965 0 016 13V8z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

app/components/ui/button.tsx

@@ -11,6 +11,8 @@ const buttonVariants = cva(
       variant: {
         newsPrimary:
           'bg-[#2E2F7C] text-white text-lg hover:bg-[#4C5CA0] hover:shadow transition active:bg-[#6970B4]',
+        newsDanger:
+          'bg-red-500 text-white text-lg hover:bg-red-600 hover:shadow transition active:bg-red-700',
         newsPrimaryOutline:
           'border-[3px] bg-[#2E2F7C]  border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
         newsSecondary:
@@ -21,7 +23,7 @@ const buttonVariants = cva(
       size: {
         default: 'h-[50px] w-[150px]',
         block: 'h-[50px] w-full',
-        icon: 'h-9 w-9',
+        icon: 'h-9 w-9 rounded-full',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
         fit: 'w-fit',

app/components/ui/color-badge.tsx

@@ -0,0 +1,23 @@
+export type TColorBadge =
+  | 'baru'
+  | 'premium'
+  | 'pembayaran'
+  | 'active'
+  | 'inactive'
+  | 'expired'
+  | 1
+  | 0
+
+export const getStatusBadge = (status: TColorBadge) => {
+  const statusColors = {
+    baru: 'bg-[#DFE5FF] text-[#4C5CA0]',
+    premium: 'bg-[#FFFCAF] text-[#DBCA6E]',
+    pembayaran: 'bg-[#FEC4FF] text-[#CC6EDB]',
+    active: 'bg-[#D1FAE5] text-[#10B981]',
+    inactive: 'bg-[#FEE2E2] text-[#EF4444]',
+    expired: 'bg-[#FEC4FF] text-[#CC6EDB]',
+    1: 'bg-[#DFE5FF] text-[#4C5CA0]',
+    0: 'bg-[#FEE2E2] text-[#EF4444]',
+  }
+  return statusColors[status] || 'bg-gray-200 text-gray-700'
+}

app/components/ui/input-file.tsx

@@ -1,13 +1,7 @@
 import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
 import { CloudArrowUpIcon } from '@heroicons/react/20/solid'
 import { useEffect, type ComponentProps, type ReactNode } from 'react'
-import {
-  get,
-  type FieldError,
-  type FieldValues,
-  type Path,
-  type RegisterOptions,
-} from 'react-hook-form'
+import { get, type FieldError, type RegisterOptions } from 'react-hook-form'
 import { useRemixFormContext } from 'remix-hook-form'
 import { twMerge } from 'tailwind-merge'
 
@@ -15,21 +9,17 @@ import { useAdminContext, type TUpload } from '~/contexts/admin'
 
 import { Button } from './button'
 
-type TInputProperties<T extends FieldValues> = Omit<
-  ComponentProps<'input'>,
-  'size'
-> & {
+type TInputProperties = Omit<ComponentProps<'input'>, 'size'> & {
   id: string
   label?: ReactNode
-  name: Path<T>
+  name: string
   rules?: RegisterOptions
   containerClassName?: string
   labelClassName?: string
+  category: TUpload
 }
 
-export const InputFile = <TFormValues extends Record<string, unknown>>(
-  properties: TInputProperties<TFormValues>,
-) => {
+export const InputFile = (properties: TInputProperties) => {
   const {
     id,
     label,
@@ -40,6 +30,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
     className,
     containerClassName,
     labelClassName,
+    category,
     ...restProperties
   } = properties
   const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
@@ -54,8 +45,8 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
   const error: FieldError = get(errors, name)
 
   useEffect(() => {
-    if (uploadedFile && isUploadOpen === name) {
-      setValue(name as string, uploadedFile)
+    if (uploadedFile && isUploadOpen === (category || name)) {
+      setValue(name, uploadedFile)
       setUploadedFile(undefined)
       setIsUploadOpen(undefined)
     }
@@ -86,7 +77,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
         size="fit"
         className="absolute right-3 h-[42px]"
         onClick={() => {
-          setIsUploadOpen(name as TUpload)
+          setIsUploadOpen(category)
         }}
       >
         <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />

app/data/contents.ts

@@ -1,51 +0,0 @@
-type TBanner = {
-  id: number
-  urlImage: string
-  alt: string
-  link: string
-  status: 'active' | 'draft' | 'inactive'
-  createdAt?: string
-}
-
-export const BANNER: TBanner[] = [
-  {
-    id: 1,
-    urlImage: '/images/banner.png',
-    alt: 'banner',
-    link: '/category/spotlight',
-    status: 'active',
-    createdAt: '2021-08-01',
-  },
-  {
-    id: 2,
-    urlImage: 'https://placehold.co/1000x65.png',
-    alt: 'banner',
-    status: 'draft',
-    link: '/#',
-    createdAt: '2021-08-01',
-  },
-  {
-    id: 3,
-    urlImage: 'https://placehold.co/1000x65.png',
-    alt: 'banner',
-    status: 'draft',
-    link: '/#',
-    createdAt: '2021-08-01',
-  },
-  {
-    id: 4,
-    urlImage: '/images/banner.png',
-    alt: 'banner',
-    link: '/#',
-    status: 'active',
-    createdAt: '2021-08-01',
-  },
-  {
-    id: 5,
-    urlImage: '/images/banner.png',
-    alt: 'banner',
-    link: '/#',
-    status: 'inactive',
-    createdAt: '2021-08-01',
-  },
-]

app/layouts/admin/default.tsx

@@ -1,10 +1,12 @@
 import type { PropsWithChildren } from 'react'
+import { Toaster } from 'react-hot-toast'
 
 export const AdminDefaultLayout = (properties: PropsWithChildren) => {
   const { children } = properties
   return (
     <main className="font-admin relative min-h-dvh bg-[#F7F8FC]">
       {children}
+      <Toaster />
     </main>
   )
 }

app/layouts/admin/menu.ts

@@ -1,15 +1,15 @@
 import {
+  ChartBarSquareIcon,
   ClipboardDocumentCheckIcon,
   DocumentCurrencyDollarIcon,
+  MegaphoneIcon,
+  NewspaperIcon,
+  PresentationChartLineIcon,
   TagIcon,
+  UsersIcon,
 } from '@heroicons/react/20/solid'
 import type { SVGProps } from 'react'
 
-import { ChartIcon } from '~/components/icons/chart'
-import { ChatIcon } from '~/components/icons/chat'
-import { DocumentIcon } from '~/components/icons/document'
-import { MedicalNotesIcon } from '~/components/icons/medical-notes'
-
 type TMenu = {
   group: string
   items: {
@@ -26,27 +26,27 @@ export const MENU: TMenu[] = [
       {
         title: 'Dashboard',
         url: '/lg-admin',
-        icon: ChartIcon,
+        icon: ChartBarSquareIcon,
       },
       {
         title: 'User',
         url: '/lg-admin/users',
-        icon: DocumentIcon,
+        icon: UsersIcon,
       },
       {
         title: 'Artikel',
         url: '/lg-admin/contents',
-        icon: ChatIcon,
+        icon: NewspaperIcon,
       },
       {
-        title: 'Advertisement',
+        title: 'Banner Iklan',
         url: '/lg-admin/advertisements',
-        icon: MedicalNotesIcon,
+        icon: MegaphoneIcon,
       },
       {
         title: 'Subscription',
         url: '/lg-admin/subscriptions',
-        icon: ChartIcon,
+        icon: PresentationChartLineIcon,
       },
     ],
   },

app/layouts/news/banner.tsx

@@ -1,10 +1,12 @@
 import Autoplay from 'embla-carousel-autoplay'
 import useEmblaCarousel from 'embla-carousel-react'
-import { Link } from 'react-router'
+import { Link, useRouteLoaderData } from 'react-router'
 
-import { BANNER } from '~/data/contents'
+import type { loader } from '~/routes/_news'
 
 export const Banner = () => {
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { adsData } = loaderData || {}
   const [emblaReference] = useEmblaCarousel({ loop: true }, [Autoplay()])
 
   return (
@@ -15,7 +17,7 @@ export const Banner = () => {
           ref={emblaReference}
         >
           <div className="embla__container flex">
-            {BANNER.map(({ urlImage, alt, link }, index) => (
+            {adsData?.map(({ image_url: urlImage, url: link, id }, index) => (
               <div
                 key={index}
                 className="embla__slide max-h-[100px] min-h-[65px] w-full min-w-0 flex-none"
@@ -23,11 +25,13 @@ export const Banner = () => {
                 <Link
                   to={link}
                   className="mt-2 h-full py-2"
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
                   <img
                     src={urlImage}
-                    alt={alt}
-                    className="h-[70px] w-[100%] content-center sm:h-full"
+                    alt={id}
+                    className="h-[70px] w-[100%] object-contain object-center sm:h-full"
                   />
                 </Link>
               </div>

app/layouts/news/default.tsx

@@ -1,9 +1,10 @@
 import { type PropsWithChildren } from 'react'
+import { Toaster } from 'react-hot-toast'
 
 import { PopupModal } from '~/components/popup/modal'
 import { SuccessModal } from '~/components/popup/success-modal'
-import { Banner } from '~/components/ui/banner'
 import { useNewsContext } from '~/contexts/news'
+import { Banner } from '~/layouts/news/banner'
 import { FormForgotPassword } from '~/layouts/news/form-forgot-password'
 import { FormLogin } from '~/layouts/news/form-login'
 import { FormRegister } from '~/layouts/news/form-register'
@@ -44,6 +45,8 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
         <FooterLinks />
       </footer>
 
+      <Toaster />
+
       <PopupModal
         isOpen={isLoginOpen}
         onClose={() => setIsLoginOpen(false)}

app/pages/dashboard-advertisements/dialog-delete.tsx

@@ -0,0 +1,97 @@
+import {
+  Description,
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
+import { useEffect, type Dispatch, type SetStateAction } from 'react'
+import toast from 'react-hot-toast'
+import { Link, useFetcher } from 'react-router'
+
+import type { TAdResponse } from '~/apis/common/get-ads'
+import { Button } from '~/components/ui/button'
+
+type TProperties = {
+  selectedAds?: TAdResponse
+  setSelectedAds: Dispatch<SetStateAction<TAdResponse | undefined>>
+}
+
+export const DialogDelete = (properties: TProperties) => {
+  const { selectedAds, setSelectedAds } = properties || {}
+  const fetcher = useFetcher()
+
+  useEffect(() => {
+    if (fetcher.data?.success === false) {
+      toast.error(fetcher.data?.message)
+      return
+    }
+
+    if (fetcher.data?.success === true) {
+      setSelectedAds(undefined)
+      toast.success('Banner iklan berhasil dihapus!')
+      return
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <Dialog
+      open={!!selectedAds}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setSelectedAds(undefined)
+        }
+      }}
+      className="relative z-50"
+      transition
+    >
+      <DialogBackdrop
+        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
+        transition
+      />
+      <div className="fixed inset-0 flex w-screen justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
+        <DialogPanel
+          transition
+          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
+        >
+          <DialogTitle className="relative flex justify-start text-xl font-bold">
+            Anda akan menghapus banner berikut?
+          </DialogTitle>
+          <Description className="space-y-1 text-center text-[#565658]">
+            <img
+              src={selectedAds?.image_url}
+              alt={selectedAds?.image_url}
+              className="aspect-[150/1] h-[50px] rounded object-contain"
+            />
+            <Button
+              as={Link}
+              to={selectedAds?.url || ''}
+              variant="link"
+              size="fit"
+            >
+              {selectedAds?.url}
+            </Button>
+          </Description>
+          <div className="flex justify-end">
+            <fetcher.Form
+              method="POST"
+              action={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
+              className="grid"
+            >
+              <Button
+                type="submit"
+                variant="newsDanger"
+                className="text-md h-[42px] rounded-md"
+                disabled={fetcher.state !== 'idle'}
+                isLoading={fetcher.state !== 'idle'}
+              >
+                Hapus
+              </Button>
+            </fetcher.Form>
+          </div>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}

app/pages/dashboard-advertisements/index.tsx

@@ -1,195 +1,107 @@
-import { Field, Input, Label, Select } from '@headlessui/react'
-import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
+import {
+  PencilSquareIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/20/solid'
 import type { ConfigColumns } from 'datatables.net-dt'
 import type { DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
-import { twMerge } from 'tailwind-merge'
+import { Link, useRouteLoaderData } from 'react-router'
 
-import { PlusIcon } from '~/components/icons/plus'
+import type { TAdResponse } from '~/apis/common/get-ads'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
-import { BANNER } from '~/data/contents'
+import type { loader } from '~/routes/_admin.lg-admin._dashboard.advertisements._index'
 
-type BannerUploadProperties = {
-  onBannerChange?: (file: File | undefined) => void
-  onLinkChange?: (link: string) => void
-}
-type TStatusColors = 'draft' | 'active' | 'inactive'
+import { DialogDelete } from './dialog-delete'
 
-export const AdvertisementsPage = ({
-  onBannerChange,
-  onLinkChange,
-}: BannerUploadProperties) => {
-  const [banner, setBanner] = useState<File | null>()
-  const [link, setLink] = useState<string>('')
-  const [listAdvertisement, setListAdvertisement] = useState(true)
+export const AdvertisementsPage = () => {
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_admin.lg-admin._dashboard.advertisements._index',
+  )
+  const { adsData: dataTable } = loaderData || {}
+  const [selectedAds, setSelectedAds] = useState<TAdResponse>()
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0] || undefined
-    setBanner(file)
-    onBannerChange?.(file)
-  }
-
-  const handleLinkChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newLink = event.target.value
-    setLink(newLink)
-    onLinkChange?.(newLink)
-  }
-
-  const dataBanner = BANNER
   const dataColumns: ConfigColumns[] = [
-    { title: 'No', data: 'id' },
-    { title: 'Banner', data: 'urlImage' },
-    { title: 'Link', data: 'link' },
-    { title: 'Tgl Create', data: 'createdAt' },
-    { title: 'Status', data: 'status' },
+    {
+      title: 'No',
+      render: (
+        _data: unknown,
+        _type: unknown,
+        _row: unknown,
+        meta: { row: number },
+      ) => {
+        return meta.row + 1
+      },
+    },
+    { title: 'Banner', data: 'image_url' },
+    { title: 'Link', data: 'url' },
+    {
+      title: 'Action',
+      data: 'id',
+    },
   ]
   const dataSlot: DataTableSlots = {
     1: (value: string) => {
       return (
-        <div>
-          <img
-            src={value}
-            alt={`banner - ${value}`}
-            className="aspect-[15/1] h-[50px] max-w-[200px] rounded"
-          />
-        </div>
+        <img
+          src={value}
+          alt={value}
+          className="aspect-[150/1] h-[50px] rounded object-contain"
+        />
       )
     },
-    4: (value: string) => {
-      const statusColors = {
-        draft: 'bg-gray-300',
-        active: 'bg-[#04D182]',
-        inactive: 'bg-[#F96D19]',
-      }
-      const status = value as TStatusColors
-      return (
-        <span
-          className={twMerge(
-            'rounded-md px-2 py-1 text-sm',
-            status ? statusColors[status] : '',
-          )}
+    3: (value: string, _type: unknown, data: TAdResponse) => (
+      <div className="flex space-x-2">
+        <Button
+          as="a"
+          href={`/lg-admin/advertisements/update/${value}`}
+          className=""
+          size="icon"
+          title="Update Banner Iklan"
         >
-          {status}
-        </span>
-      )
-    },
-  }
-
-  const switchView = () => {
-    setListAdvertisement(!listAdvertisement)
+          <PencilSquareIcon className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          size="icon"
+          variant="newsDanger"
+          onClick={() => setSelectedAds(data)}
+          title="Hapus Banner Iklan"
+        >
+          <TrashIcon className="h-4 w-4" />
+        </Button>
+      </div>
+    ),
   }
 
   return (
     <div className="relative">
-      <TitleDashboard title="Advertisement" />
+      <TitleDashboard title="Banner Iklan" />
 
-      {!listAdvertisement && (
-        <div className="flex gap-5">
-          <div className="w-[400px] rounded-xl bg-gray-50 py-6">
-            <Field className="mb-6">
-              <Label className="mb-2 block text-sm font-bold text-gray-700">
-                Banner Design
-              </Label>
-              <Label
-                htmlFor="banner-upload"
-                className="flex cursor-pointer items-center justify-between rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-[#5363AB]"
-              >
-                <span className="text-gray-500">
-                  {banner ? banner.name : 'Upload Banner'}
-                </span>
-                <PlusIcon className="h-4 w-4 text-gray-500" />
-              </Label>
-              <Input
-                id="banner-upload"
-                type="file"
-                accept="image/*"
-                // className="hidden"
-                onChange={handleFileChange}
-                aria-label="Upload Banner"
-              />
-            </Field>
+      <div className="mb-8 flex items-end justify-between gap-5">
+        <div className="flex-1">{/* TODO: Filter */}</div>
+        <Button
+          as={Link}
+          to="/lg-admin/advertisements/create"
+          size="lg"
+        >
+          <PlusIcon className="h-8 w-8" /> Buat Banner Iklan
+        </Button>
+      </div>
 
-            <Field>
-              <Label className="mb-2 block text-sm font-bold text-gray-700">
-                Link Banner
-              </Label>
-              <Input
-                type="text"
-                placeholder="Link Banner"
-                className="w-full rounded-lg border-2 border-gray-300 p-3 hover:bg-gray-100 focus:ring-2 focus:ring-[#5363AB] focus:outline-none"
-                value={link}
-                onChange={handleLinkChange}
-                aria-label="Link Banner"
-              />
-            </Field>
-          </div>
-          {banner && (
-            <div className="h-[100px] w-[200px] shadow-2xl">
-              <div className="mb-4">
-                <img
-                  src={URL.createObjectURL(banner)}
-                  alt="Banner Preview"
-                  className="h-max-[350px] rasio-15-1 w-full rounded-lg"
-                />
-              </div>
-            </div>
-          )}
-        </div>
-      )}
+      <UiTable
+        data={dataTable}
+        columns={dataColumns}
+        slots={dataSlot}
+        title="Daftar Banner Iklan"
+      />
 
-      {listAdvertisement && (
-        <>
-          <div className="mb-8 flex items-end justify-between">
-            <div className="flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
-              <div className="w-[400px]">
-                <Field>
-                  <Label className="mb-2 block text-sm font-medium">
-                    Cari Banner
-                  </Label>
-                  <div className="relative">
-                    <Input
-                      type="text"
-                      placeholder="Cari Nama"
-                      className="w-full rounded-lg bg-white p-2 pr-10 pl-4 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                    />
-                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
-                      <MagnifyingGlassIcon className="h-5 w-5" />
-                    </div>
-                  </div>
-                </Field>
-              </div>
-
-              <div className="w-[235px]">
-                <Field>
-                  <Label className="mb-2 block text-sm font-medium">
-                    Status
-                  </Label>
-                  <Select className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none">
-                    <option>Pilih Status</option>
-                    <option>Aktif</option>
-                    <option>Nonaktif</option>
-                  </Select>
-                </Field>
-              </div>
-            </div>
-            <Button
-              onClick={switchView}
-              className="text-md rounded-md"
-              size="lg"
-            >
-              Create New
-            </Button>
-          </div>
-          <UiTable
-            data={dataBanner}
-            columns={dataColumns}
-            slots={dataSlot}
-            title="Daftar Banner"
-          />
-        </>
-      )}
+      <DialogDelete
+        selectedAds={selectedAds}
+        setSelectedAds={setSelectedAds}
+      />
     </div>
   )
 }

app/pages/dashboard-categories/index.tsx

@@ -7,6 +7,7 @@ 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'
+
 export const CategoriesPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard',

app/pages/dashboard-contents/index.tsx

@@ -3,7 +3,7 @@ import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
-import type { TNewsResponse } from '~/apis/common/get-news'
+import type { TAuthor } from '~/apis/common/get-news'
 import type { TTagResponse } from '~/apis/common/get-tags'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
@@ -39,6 +39,7 @@ export const ContentsPage = () => {
     },
     {
       title: 'Penulis',
+      data: 'author',
     },
     { title: 'Judul', data: 'title' },
     {
@@ -57,12 +58,10 @@ export const ContentsPage = () => {
   ]
   const dataSlot: DataTableSlots = {
     1: (value: string) => formatDate(value),
-    2: (_value: unknown, _type: unknown, data: TNewsResponse) => (
+    2: (value: TAuthor) => (
       <div>
-        <div>{data.author.name}</div>
-        <div className="text-sm text-[#7C7C7C]">
-          ID: {data.author.id.slice(0, 8)}
-        </div>
+        <div>{value.name}</div>
+        <div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
       </div>
     ),
     3: (value: string) => <span className="text-sm">{value}</span>,

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

@@ -3,9 +3,11 @@ import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
+import { getStatusBadge, type TColorBadge } from '~/components/ui/color-badge'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard.subscribe-plan._index'
+import { formatNumberWithPeriods } from '~/utils/formatter'
 
 export const SubscribePlanPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
@@ -14,6 +16,7 @@ export const SubscribePlanPage = () => {
 
   DataTable.use(DT)
   const { subscriptionsData: dataTable } = loaderData || {}
+
   const dataColumns = [
     {
       title: 'No',
@@ -34,13 +37,35 @@ export const SubscribePlanPage = () => {
       title: 'Kode',
       data: 'code',
     },
+    {
+      title: 'Length',
+      data: 'length',
+    },
+    {
+      title: 'Price',
+      data: 'price',
+    },
+    {
+      title: 'Status',
+      data: 'status',
+    },
     {
       title: 'Action',
       data: 'id',
     },
   ]
   const dataSlot = {
-    3: (value: string) => (
+    4: (value: number) => (
+      <div className="text-right">Rp. {formatNumberWithPeriods(value)}</div>
+    ),
+    5: (value: number) => (
+      <span
+        className={`rounded-lg px-2 text-sm ${getStatusBadge(value as TColorBadge)}`}
+      >
+        {value === 1 ? 'Active' : 'Inactive'}
+      </span>
+    ),
+    6: (value: string) => (
       <Button
         as="a"
         href={`/lg-admin/subscribe-plan/update/${value}`}

app/pages/dashboard-users/index.tsx

@@ -3,21 +3,12 @@ import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { useRouteLoaderData } from 'react-router'
 
 import type { TUserResponse } from '~/apis/admin/get-users'
+import { getStatusBadge, type TColorBadge } from '~/components/ui/color-badge'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard.users._index'
 import { formatDate } from '~/utils/formatter'
 
-type TColorBadge = 'Baru' | 'Premium' | 'Pembayaran'
-
-const getStatusBadge = (status: TColorBadge) => {
-  const statusColors = {
-    Baru: 'bg-[#DFE5FF] text-[#4C5CA0]',
-    Premium: 'bg-[#FFFCAF] text-[#DBCA6E]',
-    Pembayaran: 'bg-[#FEC4FF] text-[#CC6EDB]',
-  }
-  return statusColors[status] || 'bg-gray-200 text-gray-700'
-}
 export const UsersPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.users._index',
@@ -72,8 +63,10 @@ export const UsersPage = () => {
       </div>
     ),
     4: (_value: string) => <span className="text-sm">Pribadi</span>,
-    5: (value: TColorBadge) => (
-      <span className={`rounded-lg px-2 text-sm ${getStatusBadge(value)}`}>
+    5: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
+      <span
+        className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
+      >
         {value}
       </span>
     ),

app/pages/form-advertisements/index.tsx

@@ -0,0 +1,105 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher, useNavigate } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import type { TAdResponse } from '~/apis/common/get-ads'
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { InputFile } from '~/components/ui/input-file'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+
+export const adsSchema = z.object({
+  id: z.string().optional(),
+  image: z.string().url({
+    message: 'Gambar must be a valid URL',
+  }),
+  url: z.string().url({
+    message: 'URL must be valid',
+  }),
+})
+export type TAdsSchema = z.infer<typeof adsSchema>
+type TProperties = {
+  adData?: TAdResponse
+}
+
+export const FormAdvertisementsPage = (properties: TProperties) => {
+  const { adData } = properties || {}
+  const fetcher = useFetcher()
+  const navigate = useNavigate()
+  const formMethods = useRemixForm<TAdsSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(adsSchema),
+    values: {
+      id: adData?.id || undefined,
+      image: adData?.image_url || '',
+      url: adData?.url || '',
+    },
+  })
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (fetcher.data?.success === false) {
+      toast.error(fetcher.data?.message)
+      return
+    }
+
+    if (fetcher.data?.success === true) {
+      toast.success(`Banner iklan berhasil ${adData ? 'diupdate' : 'dibuat'}!`)
+      navigate('/lg-admin/advertisements')
+      return
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <div className="relative">
+      <TitleDashboard title={`${adData ? 'Update' : 'Buat'} Banner Iklan`} />
+      <div>
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
+            action={`/actions/admin/advertisements/${adData ? 'update' : 'create'}`}
+            className="space-y-4"
+          >
+            <div className="flex items-end justify-between gap-4">
+              <InputFile
+                id="image"
+                label="Gambar"
+                placeholder="Masukkan Url Gambar"
+                name="image"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+                category="ads"
+              />
+              <Input
+                id="url"
+                label="Link"
+                placeholder="Masukkan Url Link"
+                name="url"
+                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+              />
+              <Button
+                isLoading={fetcher.state !== 'idle'}
+                disabled={fetcher.state !== 'idle'}
+                type="submit"
+                size="lg"
+                className="text-md h-[42px] rounded-md"
+              >
+                Save
+              </Button>
+            </div>
+          </fetcher.Form>
+        </RemixFormProvider>
+      </div>
+    </div>
+  )
+}

app/pages/form-category/index.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -10,14 +11,14 @@ import { Input } from '~/components/ui/input'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import { urlFriendlyCode } from '~/utils/formatter'
 
-export const createCategorySchema = z.object({
+export const categorySchema = z.object({
   id: z.string().optional(),
   name: z.string().min(3, 'Nama minimal 3 karakter'),
   code: z.string(),
   sequence: z.preprocess(Number, z.number().optional()),
   description: z.string(),
 })
-export type TCategorySchema = z.infer<typeof createCategorySchema>
+export type TCategorySchema = z.infer<typeof categorySchema>
 type TProperties = {
   categoryData?: TCategoryResponse
 }
@@ -29,7 +30,7 @@ export const FormCategoryPage = (properties: TProperties) => {
   const formMethods = useRemixForm<TCategorySchema>({
     mode: 'onSubmit',
     fetcher,
-    resolver: zodResolver(createCategorySchema),
+    resolver: zodResolver(categorySchema),
     values: {
       id: categoryData?.id || undefined,
       code: categoryData?.code || '',
@@ -38,20 +39,25 @@ export const FormCategoryPage = (properties: TProperties) => {
       description: categoryData?.description || '',
     },
   })
-  const [error, setError] = useState<string>()
 
   const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
 
   useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
+    if (fetcher.data?.success === false) {
+      toast.error(fetcher.data?.message)
+      return
+    }
+
+    if (fetcher.data?.success === true) {
+      toast.success(
+        `Kategori berhasil ${categoryData ? 'diupdate' : 'dibuat'}!`,
+      )
+      navigate('/lg-admin/categories')
       return
     }
-    navigate('/lg-admin/categories')
-    setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
+  }, [fetcher.data])
 
   useEffect(() => {
     setValue('code', urlFriendlyCode(watchName))
@@ -69,9 +75,6 @@ export const FormCategoryPage = (properties: TProperties) => {
             action={`/actions/admin/categories/${categoryData ? 'update' : 'create'}`}
             className="space-y-4"
           >
-            {error && (
-              <div className="text-sm text-red-500 capitalize">{error}</div>
-            )}
             <div className="flex items-end justify-between gap-4">
               <Input
                 id="name"

app/pages/form-contents/index.tsx

@@ -1,6 +1,7 @@
 import { DevTool } from '@hookform/devtools'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher, useNavigate, useRouteLoaderData } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -72,7 +73,6 @@ export const FormContentsPage = (properties: TProperties) => {
   )
   const { categoriesData: categories } = loaderData || {}
   const { tagsData: tags } = loaderData || {}
-  const [error, setError] = useState<string>()
 
   const formMethods = useRemixForm<TContentSchema>({
     mode: 'onSubmit',
@@ -97,15 +97,18 @@ export const FormContentsPage = (properties: TProperties) => {
   const watchTags = watch('tags')
 
   useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
+    if (fetcher.data?.success === false) {
+      toast.error(fetcher.data?.message)
       return
     }
 
-    navigate('/lg-admin/contents')
-    setError(undefined)
+    if (fetcher.data?.success === true) {
+      toast.success(`Artikel berhasil ${newsData ? 'diupdate' : 'dibuat'}!`)
+      navigate('/lg-admin/contents')
+      return
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
+  }, [fetcher.data])
 
   return (
     <div className="relative">
@@ -117,9 +120,6 @@ export const FormContentsPage = (properties: TProperties) => {
           action={`/actions/admin/contents/${newsData ? 'update' : 'create'}`}
           className="space-y-4"
         >
-          {error && (
-            <div className="text-sm text-red-500 capitalize">{error}</div>
-          )}
           <div className="flex items-end justify-between gap-4">
             <Input
               id="title"
@@ -139,6 +139,7 @@ export const FormContentsPage = (properties: TProperties) => {
               className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
               labelClassName="text-sm font-medium text-[#363636]"
               containerClassName="flex-1"
+              category="featured_image"
             />
             <Button
               isLoading={fetcher.state !== 'idle'}

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

@@ -1,6 +1,7 @@
 import { Field, Label, Select } from '@headlessui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -10,15 +11,15 @@ import { Input } from '~/components/ui/input'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import { urlFriendlyCode } from '~/utils/formatter'
 
-export const createSubscribePlanSchema = z.object({
+export const subscribePlanSchema = z.object({
   id: z.string().optional(),
   name: z.string().min(3, 'Nama minimal 3 karakter'),
   code: z.string(),
   length: z.preprocess(Number, z.number().optional()),
   price: z.preprocess(Number, z.number().optional()),
-  status: z.boolean().optional(),
+  status: z.number().optional(),
 })
-export type TSubscribePlanSchema = z.infer<typeof createSubscribePlanSchema>
+export type TSubscribePlanSchema = z.infer<typeof subscribePlanSchema>
 type TProperties = {
   subscribePlanData?: TSubscribePlanSchema
 }
@@ -30,7 +31,7 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
   const formMethods = useRemixForm<TSubscribePlanSchema>({
     mode: 'onSubmit',
     fetcher,
-    resolver: zodResolver(createSubscribePlanSchema),
+    resolver: zodResolver(subscribePlanSchema),
     values: {
       id: subscribePlanData?.id || undefined,
       code: subscribePlanData?.code || '',
@@ -40,20 +41,25 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
       status: subscribePlanData?.status || undefined,
     },
   })
-  const [error, setError] = useState<string>()
 
   const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
 
   useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
+    if (fetcher.data?.success === false) {
+      toast.error(fetcher.data?.message)
+      return
+    }
+
+    if (fetcher.data?.success === true) {
+      toast.success(
+        `Subscribe Plan berhasil ${subscribePlanData ? 'diupdate' : 'dibuat'}!`,
+      )
+      navigate('/lg-admin/subscribe-plan')
       return
     }
-    navigate('/lg-admin/subscribe-plan')
-    setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
+  }, [fetcher.data])
 
   useEffect(() => {
     setValue('code', urlFriendlyCode(watchName))
@@ -73,9 +79,6 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
             action={`/actions/admin/subscribe-plan/${subscribePlanData ? 'update' : 'create'}`}
             className="space-y-4"
           >
-            {error && (
-              <div className="text-sm text-red-500 capitalize">{error}</div>
-            )}
             <div className="flex items-end justify-between gap-4">
               <Input
                 id="name"

app/pages/form-tag/index.tsx

@@ -1,5 +1,6 @@
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -10,12 +11,12 @@ import { Input } from '~/components/ui/input'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import { urlFriendlyCode } from '~/utils/formatter'
 
-export const createTagSchema = z.object({
+export const tagSchema = z.object({
   id: z.string().optional(),
   name: z.string().min(3, 'Nama minimal 3 karakter'),
   code: z.string(),
 })
-export type TTagSchema = z.infer<typeof createTagSchema>
+export type TTagSchema = z.infer<typeof tagSchema>
 type TProperties = {
   tagData?: TTagResponse
 }
@@ -27,27 +28,30 @@ export const FormTagPage = (properties: TProperties) => {
   const formMethods = useRemixForm<TTagSchema>({
     mode: 'onSubmit',
     fetcher,
-    resolver: zodResolver(createTagSchema),
+    resolver: zodResolver(tagSchema),
     values: {
       id: tagData?.id || undefined,
       code: tagData?.code || '',
       name: tagData?.name || '',
     },
   })
-  const [error, setError] = useState<string>()
 
   const { handleSubmit, watch, setValue } = formMethods
   const watchName = watch('name')
 
   useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
+    if (fetcher.data?.success === false) {
+      toast.error(fetcher.data?.message)
+      return
+    }
+
+    if (fetcher.data?.success === true) {
+      toast.success(`Tag berhasil ${tagData ? 'diupdate' : 'dibuat'}!`)
+      navigate('/lg-admin/tags')
       return
     }
-    navigate('/lg-admin/tags')
-    setError(undefined)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
+  }, [fetcher.data])
 
   useEffect(() => {
     setValue('code', urlFriendlyCode(watchName))
@@ -65,9 +69,6 @@ export const FormTagPage = (properties: TProperties) => {
             action={`/actions/admin/tags/${tagData ? 'update' : 'create'}`}
             className="space-y-4"
           >
-            {error && (
-              <div className="text-sm text-red-500 capitalize">{error}</div>
-            )}
             <div className="flex items-end justify-between gap-4">
               <Input
                 id="name"

app/pages/news-payment/index.tsx

@@ -0,0 +1,13 @@
+import { Card } from '~/components/ui/card'
+
+export const NewsPaymentPage = () => {
+  return (
+    <div>
+      <div className="sm-max:mx-5 relative">
+        <Card>
+          <h1>Payment</h1>
+        </Card>
+      </div>
+    </div>
+  )
+}

app/root.tsx

@@ -74,11 +74,11 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
   }
 
   return (
-    <main className="container mx-auto p-4 pt-16">
+    <main className="container mx-auto p-4">
       <h1>{message}</h1>
       <p>{details}</p>
       {stack && (
-        <pre className="w-full overflow-x-auto p-4">
+        <pre className="w-full p-4 whitespace-pre-wrap">
           <code>{stack}</code>
         </pre>
       )}

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

@@ -0,0 +1,42 @@
+import { isRouteErrorResponse } from 'react-router'
+
+import { getAds } from '~/apis/common/get-ads'
+import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
+
+import type { Route } from './+types/_admin.lg-admin._dashboard.advertisements._index'
+
+export const loader = async ({}: Route.LoaderArgs) => {
+  const { data: adsData } = await getAds()
+  return { adsData }
+}
+
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+const DashboardAdvertisementsLayout = () => <AdvertisementsPage />
+export default DashboardAdvertisementsLayout

app/routes/_admin.lg-admin._dashboard.advertisements.create.tsx

@@ -0,0 +1,4 @@
+import { FormAdvertisementsPage } from '~/pages/form-advertisements'
+
+const DashboardAdvertisementsCreateLayout = () => <FormAdvertisementsPage />
+export default DashboardAdvertisementsCreateLayout

app/routes/_admin.lg-admin._dashboard.advertisements.tsx

@@ -1,4 +0,0 @@
-import { AdvertisementsPage } from '~/pages/dashboard-advertisements'
-
-const DashboardAdvertisementsLayout = () => <AdvertisementsPage />
-export default DashboardAdvertisementsLayout

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

@@ -0,0 +1,50 @@
+import { isRouteErrorResponse } from 'react-router'
+
+import { getAds } from '~/apis/common/get-ads'
+import { FormAdvertisementsPage } from '~/pages/form-advertisements'
+
+import type { Route } from './+types/_admin.lg-admin._dashboard.advertisements.update.$id'
+
+export const loader = async ({ params }: Route.LoaderArgs) => {
+  const { data: adsData } = await getAds()
+  const { id } = params
+  const adData = adsData.find((ads) => ads.id === id)
+  return { adData }
+}
+
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
+const DashboardAdvertisementsCreateLayout = ({
+  loaderData,
+}: Route.ComponentProps) => {
+  const { adData } = loaderData || {}
+  return <FormAdvertisementsPage adData={adData} />
+}
+export default DashboardAdvertisementsCreateLayout

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

@@ -1,3 +1,5 @@
+import { isRouteErrorResponse } from 'react-router'
+
 import { getCategories } from '~/apis/common/get-categories'
 import { FormCategoryPage } from '~/pages/form-category'
 
@@ -5,12 +7,40 @@ import type { Route } from './+types/_admin.lg-admin._dashboard.categories.updat
 
 export const loader = async ({ params }: Route.LoaderArgs) => {
   const { data: categoriesData } = await getCategories()
-  const categoryData = categoriesData.find(
-    (category) => category.id === params.id,
-  )
+  const { id } = params
+  const categoryData = categoriesData.find((category) => category.id === id)
   return { categoryData }
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const DashboardCategoriesUpdateLayout = ({
   loaderData,
 }: Route.ComponentProps) => {

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

@@ -1,3 +1,5 @@
+import { isRouteErrorResponse } from 'react-router'
+
 import { getNews } from '~/apis/common/get-news'
 import { ContentsPage } from '~/pages/dashboard-contents'
 
@@ -8,5 +10,34 @@ export const loader = async ({}: Route.LoaderArgs) => {
   return { newsData }
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const DashboardContentsIndexLayout = () => <ContentsPage />
 export default DashboardContentsIndexLayout

app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx

@@ -1,3 +1,5 @@
+import { isRouteErrorResponse } from 'react-router'
+
 import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
 import { handleCookie } from '~/libs/cookies'
 import { FormContentsPage } from '~/pages/form-contents'
@@ -5,14 +7,41 @@ import { FormContentsPage } from '~/pages/form-contents'
 import type { Route } from './+types/_admin.lg-admin._dashboard.contents.update.$slug'
 
 export const loader = async ({ request, params }: Route.LoaderArgs) => {
-  const { staffToken } = await handleCookie(request)
-  const { data: newsData } = await getNewsBySlug({
-    accessToken: staffToken,
-    slug: params.slug,
-  })
+  const { staffToken: accessToken } = await handleCookie(request)
+  const { slug } = params
+  const { data: newsData } = await getNewsBySlug({ accessToken, slug })
   return { newsData }
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const DashboardContentUpdateLayout = ({ loaderData }: Route.ComponentProps) => {
   const { newsData } = loaderData || {}
   return <FormContentsPage newsData={newsData} />

app/routes/_admin.lg-admin._dashboard.subscribe-plan._index.tsx

@@ -1,11 +1,43 @@
+import { isRouteErrorResponse } from 'react-router'
+
 import { getSubscriptions } from '~/apis/common/get-subscriptions'
 import { SubscribePlanPage } from '~/pages/dashboard-plan-subscribe'
 
-import type { Route } from './+types/_admin.lg-admin._dashboard.contents._index'
+import type { Route } from './+types/_admin.lg-admin._dashboard.subscribe-plan._index'
 
 export const loader = async ({}: Route.LoaderArgs) => {
   const { data: subscriptionsData } = await getSubscriptions()
   return { subscriptionsData }
 }
+
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const DashboardSubscriptionsSettingsLayout = () => <SubscribePlanPage />
 export default DashboardSubscriptionsSettingsLayout

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

@@ -1,3 +1,5 @@
+import { isRouteErrorResponse } from 'react-router'
+
 import { getSubscriptions } from '~/apis/common/get-subscriptions'
 import { FormSubscribePlanPage } from '~/pages/form-subscriptions-plan'
 
@@ -5,12 +7,42 @@ import type { Route } from './+types/_admin.lg-admin._dashboard.subscribe-plan.u
 
 export const loader = async ({ params }: Route.LoaderArgs) => {
   const { data: subscribePlansData } = await getSubscriptions()
+  const { id } = params
   const subscribePlanData = subscribePlansData.find(
-    (subscribePlan) => subscribePlan.id === params.id,
+    (subscribePlan) => subscribePlan.id === id,
   )
   return { subscribePlanData }
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const DashboardSubscribePlanUpdateLayout = ({
   loaderData,
 }: Route.ComponentProps) => {

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

@@ -1,3 +1,5 @@
+import { isRouteErrorResponse } from 'react-router'
+
 import { getTags } from '~/apis/common/get-tags'
 import { FormTagPage } from '~/pages/form-tag'
 
@@ -5,10 +7,40 @@ import type { Route } from './+types/_admin.lg-admin._dashboard.tags.update.$id'
 
 export const loader = async ({ params }: Route.LoaderArgs) => {
   const { data: tagsData } = await getTags()
-  const tagData = tagsData.find((tag) => tag.id === params.id)
+  const { id } = params
+  const tagData = tagsData.find((tag) => tag.id === id)
   return { tagData }
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const DashboardTagUpdateLayout = ({ loaderData }: Route.ComponentProps) => {
   const { tagData } = loaderData || {}
   return <FormTagPage tagData={tagData} />

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

@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router'
+import { isRouteErrorResponse, Outlet } from 'react-router'
 
 import { getCategories } from '~/apis/common/get-categories'
 import { getTags } from '~/apis/common/get-tags'
@@ -17,6 +17,35 @@ export const loader = async ({}: Route.LoaderArgs) => {
   }
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const DashboardLayout = () => {
   return (
     <AdminProvider>

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

@@ -1,3 +1,5 @@
+import { isRouteErrorResponse } from 'react-router'
+
 import { getUsers } from '~/apis/admin/get-users'
 import { handleCookie } from '~/libs/cookies'
 import { UsersPage } from '~/pages/dashboard-users'
@@ -5,13 +7,40 @@ import { UsersPage } from '~/pages/dashboard-users'
 import type { Route } from './+types/_admin.lg-admin._dashboard.users._index'
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
-  const { staffToken } = await handleCookie(request)
-  const { data: usersData } = await getUsers({
-    accessToken: staffToken,
-  })
+  const { staffToken: accessToken } = await handleCookie(request)
+  const { data: usersData } = await getUsers({ accessToken })
 
   return { usersData }
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const DashboardUsersLayout = () => <UsersPage />
 export default DashboardUsersLayout

app/routes/_admin.lg-admin.tsx

@@ -1,4 +1,4 @@
-import { Outlet, redirect } from 'react-router'
+import { isRouteErrorResponse, Outlet, redirect } from 'react-router'
 import { XiorError } from 'xior'
 
 import { getStaff } from '~/apis/admin/get-staff'
@@ -10,16 +10,14 @@ import { setStaffLogoutHeaders } from '~/libs/logout-header.server'
 import type { Route } from './+types/_admin.lg-admin'
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
-  const { staffToken } = await handleCookie(request)
+  const { staffToken: accessToken } = await handleCookie(request)
   const { pathname } = new URL(request.url)
   const isAuthPage = AUTH_PAGES.includes(pathname)
   let staffData
 
-  if (staffToken) {
+  if (accessToken) {
     try {
-      const { data } = await getStaff({
-        accessToken: staffToken,
-      })
+      const { data } = await getStaff({ accessToken })
       staffData = data
     } catch (error) {
       if (error instanceof XiorError && error.response?.status === 401) {
@@ -28,11 +26,11 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
     }
   }
 
-  if (!isAuthPage && !staffToken) {
+  if (!isAuthPage && !accessToken) {
     throw redirect('/lg-admin/login')
   }
 
-  if (isAuthPage && staffToken) {
+  if (isAuthPage && accessToken) {
     throw redirect('/lg-admin')
   }
 
@@ -41,6 +39,35 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   }
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const AdminLayout = () => {
   return (
     <AdminDefaultLayout>

app/routes/_news._index.tsx

@@ -1,3 +1,5 @@
+import { isRouteErrorResponse } from 'react-router'
+
 import { getCategories } from '~/apis/common/get-categories'
 import { getNews } from '~/apis/common/get-news'
 import { NewsPage } from '~/pages/news'
@@ -35,6 +37,35 @@ export const loader = async ({}: Route.LoaderArgs) => {
   }
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const NewsIndexLayout = () => <NewsPage />
 
 export default NewsIndexLayout

app/routes/_news.category.$code.tsx

@@ -1,3 +1,5 @@
+import { isRouteErrorResponse } from 'react-router'
+
 import { getCategories } from '~/apis/common/get-categories'
 import { getNews } from '~/apis/common/get-news'
 import { APP } from '~/configs/meta'
@@ -7,10 +9,9 @@ import type { Route } from './+types/_news.category.$code'
 
 export const loader = async ({ params }: Route.LoaderArgs) => {
   const { data: categoriesData } = await getCategories()
-  const categoryData = categoriesData.find(
-    (category) => category.code === params.code,
-  )
-  const { data: newsData } = await getNews({ categories: [params.code] })
+  const { code } = params
+  const categoryData = categoriesData.find((category) => category.code === code)
+  const { data: newsData } = await getNews({ categories: [code] })
   return { categoryData, newsData }
 }
 
@@ -26,6 +27,35 @@ export const meta = ({ data }: Route.MetaArgs) => {
   ]
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const NewsCategoriesLayout = () => <NewsCategoriesPage />
 
 export default NewsCategoriesLayout

app/routes/_news.detail.$slug.tsx

@@ -1,3 +1,5 @@
+import { isRouteErrorResponse } from 'react-router'
+
 import { getCategories } from '~/apis/common/get-categories'
 import { getNews } from '~/apis/common/get-news'
 import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
@@ -8,11 +10,9 @@ import { NewsDetailPage } from '~/pages/news-detail'
 import type { Route } from './+types/_news.detail.$slug'
 
 export const loader = async ({ request, params }: Route.LoaderArgs) => {
-  const { userToken } = await handleCookie(request)
-  const { data: newsDetailData } = await getNewsBySlug({
-    slug: params.slug,
-    accessToken: userToken,
-  })
+  const { userToken: accessToken } = await handleCookie(request)
+  const { slug } = params
+  const { data: newsDetailData } = await getNewsBySlug({ slug, accessToken })
   const { data: categoriesData } = await getCategories()
   const beritaCode = 'berita'
   const beritaCategory = categoriesData.find(
@@ -39,6 +39,35 @@ export const meta = ({ data }: Route.MetaArgs) => {
   ]
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const NewsDetailLayout = () => <NewsDetailPage />
 
 export default NewsDetailLayout

app/routes/_news.payment.tsx

@@ -0,0 +1,37 @@
+import { isRouteErrorResponse } from 'react-router'
+
+import { NewsPaymentPage } from '~/pages/news-payment'
+
+import type { Route } from './+types/_news.payment'
+
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+const NewsPaymentLayout = () => <NewsPaymentPage />
+
+export default NewsPaymentLayout

app/routes/_news.tsx

@@ -1,6 +1,7 @@
-import { Outlet } from 'react-router'
+import { isRouteErrorResponse, Outlet } from 'react-router'
 import { XiorError } from 'xior'
 
+import { getAds } from '~/apis/common/get-ads'
 import { getCategories } from '~/apis/common/get-categories'
 import { getSubscriptions } from '~/apis/common/get-subscriptions'
 import { getUser } from '~/apis/news/get-user'
@@ -12,13 +13,11 @@ import { setUserLogoutHeaders } from '~/libs/logout-header.server'
 import type { Route } from './+types/_news'
 
 export const loader = async ({ request }: Route.LoaderArgs) => {
-  const { userToken } = await handleCookie(request)
+  const { userToken: accessToken } = await handleCookie(request)
   let userData
-  if (userToken) {
+  if (accessToken) {
     try {
-      const { data } = await getUser({
-        accessToken: userToken,
-      })
+      const { data } = await getUser({ accessToken })
       userData = data
     } catch (error) {
       if (error instanceof XiorError && error.response?.status === 401) {
@@ -28,14 +27,45 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   }
   const { data: subscriptionsData } = await getSubscriptions()
   const { data: categoriesData } = await getCategories()
+  const { data: adsData } = await getAds()
 
   return {
     userData,
     subscriptionsData,
     categoriesData,
+    adsData,
   }
 }
 
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
 const NewsLayout = () => {
   return (
     <NewsProvider>

app/routes/actions.admin.advertisements.create.ts

@@ -0,0 +1,61 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { data } from 'react-router'
+import { getValidatedFormData } from 'remix-hook-form'
+import { XiorError } from 'xior'
+
+import { createAdsRequest } from '~/apis/admin/create-ads'
+import { handleCookie } from '~/libs/cookies'
+import { adsSchema, type TAdsSchema } from '~/pages/form-advertisements'
+
+import type { Route } from './+types/actions.admin.advertisements.create'
+
+export const action = async ({ request }: Route.ActionArgs) => {
+  const { staffToken: accessToken } = await handleCookie(request)
+  try {
+    const {
+      errors,
+      data: payload,
+      receivedValues: defaultValues,
+    } = await getValidatedFormData<TAdsSchema>(
+      request,
+      zodResolver(adsSchema),
+      false,
+    )
+
+    if (errors) {
+      return data({ success: false, errors, defaultValues }, { status: 400 })
+    }
+
+    const { data: adsData } = await createAdsRequest({ accessToken, payload })
+
+    return data(
+      {
+        success: true,
+        adsData,
+      },
+      {
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}

app/routes/actions.admin.advertisements.delete.$id.ts

@@ -0,0 +1,45 @@
+import { data } from 'react-router'
+import { XiorError } from 'xior'
+
+import { deleteAdsRequest } from '~/apis/admin/delete-ads'
+import { handleCookie } from '~/libs/cookies'
+
+import type { Route } from './+types/actions.admin.advertisements.create'
+
+export const action = async ({ request, params }: Route.ActionArgs) => {
+  const { staffToken: accessToken } = await handleCookie(request)
+  const { id } = params
+  try {
+    const { data: adsData } = await deleteAdsRequest({ accessToken, id })
+
+    return data(
+      {
+        success: true,
+        adsData,
+      },
+      {
+        status: 200,
+        statusText: 'OK',
+      },
+    )
+  } catch (error) {
+    if (error instanceof XiorError) {
+      return data(
+        {
+          success: false,
+          message: error?.response?.data?.error?.message || error.message,
+        },
+        {
+          status: error?.response?.status || 500,
+        },
+      )
+    }
+    return data(
+      {
+        success: false,
+        message: 'Internal server error',
+      },
+      { status: 500 },
+    )
+  }
+}

app/routes/actions.admin.categories.create.ts

@@ -5,15 +5,12 @@ import { XiorError } from 'xior'
 
 import { createCategoryRequest } from '~/apis/admin/create-category'
 import { handleCookie } from '~/libs/cookies'
-import {
-  createCategorySchema,
-  type TCategorySchema,
-} from '~/pages/form-category'
+import { categorySchema, type TCategorySchema } from '~/pages/form-category'
 
-import type { Route } from './+types/actions.register'
+import type { Route } from './+types/actions.admin.categories.create'
 
 export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
+  const { staffToken: accessToken } = await handleCookie(request)
   try {
     const {
       errors,
@@ -21,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TCategorySchema>(
       request,
-      zodResolver(createCategorySchema),
+      zodResolver(categorySchema),
       false,
     )
 
@@ -30,7 +27,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     }
 
     const { data: categoryData } = await createCategoryRequest({
-      accessToken: staffToken,
+      accessToken,
       payload,
     })
 

app/routes/actions.admin.categories.update.ts

@@ -5,15 +5,12 @@ import { XiorError } from 'xior'
 
 import { updateCategoryRequest } from '~/apis/admin/update-category'
 import { handleCookie } from '~/libs/cookies'
-import {
-  createCategorySchema,
-  type TCategorySchema,
-} from '~/pages/form-category'
+import { categorySchema, type TCategorySchema } from '~/pages/form-category'
 
-import type { Route } from './+types/actions.register'
+import type { Route } from './+types/actions.admin.categories.update'
 
 export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
+  const { staffToken: accessToken } = await handleCookie(request)
   try {
     const {
       errors,
@@ -21,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TCategorySchema>(
       request,
-      zodResolver(createCategorySchema),
+      zodResolver(categorySchema),
       false,
     )
 
@@ -30,7 +27,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     }
 
     const { data: categoryData } = await updateCategoryRequest({
-      accessToken: staffToken,
+      accessToken,
       payload,
     })
 

app/routes/actions.admin.contents.create.ts

@@ -7,10 +7,10 @@ import { createNewsRequest } from '~/apis/admin/create-news'
 import { handleCookie } from '~/libs/cookies'
 import { contentSchema, type TContentSchema } from '~/pages/form-contents'
 
-import type { Route } from './+types/actions.register'
+import type { Route } from './+types/actions.admin.contents.create'
 
 export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
+  const { staffToken: accessToken } = await handleCookie(request)
   try {
     const {
       errors,
@@ -26,10 +26,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       return data({ success: false, errors, defaultValues }, { status: 400 })
     }
 
-    const { data: newsData } = await createNewsRequest({
-      accessToken: staffToken,
-      payload,
-    })
+    const { data: newsData } = await createNewsRequest({ accessToken, payload })
 
     return data(
       {

app/routes/actions.admin.contents.update.ts

@@ -7,10 +7,10 @@ import { updateNewsRequest } from '~/apis/admin/update-news'
 import { handleCookie } from '~/libs/cookies'
 import { contentSchema, type TContentSchema } from '~/pages/form-contents'
 
-import type { Route } from './+types/actions.register'
+import type { Route } from './+types/actions.admin.contents.update'
 
 export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
+  const { staffToken: accessToken } = await handleCookie(request)
   try {
     const {
       errors,
@@ -26,10 +26,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       return data({ success: false, errors, defaultValues }, { status: 400 })
     }
 
-    const { data: newsData } = await updateNewsRequest({
-      accessToken: staffToken,
-      payload,
-    })
+    const { data: newsData } = await updateNewsRequest({ accessToken, payload })
 
     return data(
       {

app/routes/actions.admin.login.ts

@@ -8,7 +8,7 @@ import { staffLoginRequest } from '~/apis/admin/login-staff'
 import { loginSchema, type TLoginSchema } from '~/pages/staff-login'
 import { generateStaffTokenCookie } from '~/utils/token'
 
-import type { Route } from './+types/actions.login'
+import type { Route } from './+types/actions.admin.login'
 
 export const action = async ({ request }: Route.ActionArgs) => {
   try {
@@ -27,13 +27,9 @@ export const action = async ({ request }: Route.ActionArgs) => {
     }
 
     const { data: loginData } = await staffLoginRequest(payload)
-    const { token } = loginData
-    const { data: staffData } = await getStaff({
-      accessToken: token,
-    })
-    const tokenCookie = generateStaffTokenCookie({
-      token,
-    })
+    const { token: accessToken } = loginData
+    const { data: staffData } = await getStaff({ accessToken })
+    const tokenCookie = generateStaffTokenCookie({ accessToken })
 
     const headers = new Headers()
     headers.append('Set-Cookie', await tokenCookie)

app/routes/actions.admin.subscribe-plan.create.ts

@@ -6,14 +6,14 @@ import { XiorError } from 'xior'
 import { createSubscribePlanRequest } from '~/apis/admin/create-subscribe-plan'
 import { handleCookie } from '~/libs/cookies'
 import {
-  createSubscribePlanSchema,
+  subscribePlanSchema,
   type TSubscribePlanSchema,
 } from '~/pages/form-subscriptions-plan'
 
-import type { Route } from './+types/actions.register'
+import type { Route } from './+types/actions.admin.subscribe-plan.create'
 
 export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
+  const { staffToken: accessToken } = await handleCookie(request)
   try {
     const {
       errors,
@@ -21,7 +21,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TSubscribePlanSchema>(
       request,
-      zodResolver(createSubscribePlanSchema),
+      zodResolver(subscribePlanSchema),
       false,
     )
 
@@ -30,7 +30,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     }
 
     const { data: subscribePlanData } = await createSubscribePlanRequest({
-      accessToken: staffToken,
+      accessToken,
       payload,
     })
 

app/routes/actions.admin.subscribe-plan.update.ts

@@ -6,14 +6,14 @@ import { XiorError } from 'xior'
 import { updateSubscribePlanRequest } from '~/apis/admin/update-subscribe-plan'
 import { handleCookie } from '~/libs/cookies'
 import {
-  createSubscribePlanSchema,
+  subscribePlanSchema,
   type TSubscribePlanSchema,
 } from '~/pages/form-subscriptions-plan'
 
-import type { Route } from './+types/actions.register'
+import type { Route } from './+types/actions.admin.subscribe-plan.update'
 
 export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
+  const { staffToken: accessToken } = await handleCookie(request)
   try {
     const {
       errors,
@@ -21,7 +21,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TSubscribePlanSchema>(
       request,
-      zodResolver(createSubscribePlanSchema),
+      zodResolver(subscribePlanSchema),
       false,
     )
 
@@ -30,7 +30,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     }
 
     const { data: subscribePlanData } = await updateSubscribePlanRequest({
-      accessToken: staffToken,
+      accessToken,
       payload,
     })
 

app/routes/actions.admin.tags.create.ts

@@ -5,12 +5,12 @@ import { XiorError } from 'xior'
 
 import { createTagsRequest } from '~/apis/admin/create-tags'
 import { handleCookie } from '~/libs/cookies'
-import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
+import { tagSchema, type TTagSchema } from '~/pages/form-tag'
 
-import type { Route } from './+types/actions.register'
+import type { Route } from './+types/actions.admin.tags.create'
 
 export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
+  const { staffToken: accessToken } = await handleCookie(request)
   try {
     const {
       errors,
@@ -18,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TTagSchema>(
       request,
-      zodResolver(createTagSchema),
+      zodResolver(tagSchema),
       false,
     )
 
@@ -26,10 +26,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       return data({ success: false, errors, defaultValues }, { status: 400 })
     }
 
-    const { data: tagsData } = await createTagsRequest({
-      accessToken: staffToken,
-      payload,
-    })
+    const { data: tagsData } = await createTagsRequest({ accessToken, payload })
 
     return data(
       {

app/routes/actions.admin.tags.update.ts

@@ -5,12 +5,12 @@ import { XiorError } from 'xior'
 
 import { updateTagRequest } from '~/apis/admin/update-tag'
 import { handleCookie } from '~/libs/cookies'
-import { createTagSchema, type TTagSchema } from '~/pages/form-tag'
+import { tagSchema, type TTagSchema } from '~/pages/form-tag'
 
-import type { Route } from './+types/actions.register'
+import type { Route } from './+types/actions.admin.tags.update'
 
 export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
+  const { staffToken: accessToken } = await handleCookie(request)
   try {
     const {
       errors,
@@ -18,7 +18,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       receivedValues: defaultValues,
     } = await getValidatedFormData<TTagSchema>(
       request,
-      zodResolver(createTagSchema),
+      zodResolver(tagSchema),
       false,
     )
 
@@ -26,10 +26,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
       return data({ success: false, errors, defaultValues }, { status: 400 })
     }
 
-    const { data: tagData } = await updateTagRequest({
-      accessToken: staffToken,
-      payload,
-    })
+    const { data: tagData } = await updateTagRequest({ accessToken, payload })
 
     return data(
       {

app/routes/actions.admin.upload.ts

@@ -7,10 +7,11 @@ import { uploadFileRequest } from '~/apis/admin/upload-file'
 import { uploadSchema, type TUploadSchema } from '~/layouts/admin/dialog-upload'
 import { handleCookie } from '~/libs/cookies'
 
-import type { Route } from './+types/actions.register'
+import type { Route } from './+types/actions.admin.upload'
 
 export const action = async ({ request }: Route.ActionArgs) => {
-  const { staffToken } = await handleCookie(request)
+  const { staffToken: accessToken } = await handleCookie(request)
+
   try {
     const {
       errors,
@@ -28,7 +29,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
 
     const { data: uploadData } = await uploadFileRequest({
       payload,
-      accessToken: staffToken,
+      accessToken,
     })
 
     return data(

app/routes/actions.login.ts

@@ -27,13 +27,9 @@ export const action = async ({ request }: Route.ActionArgs) => {
     }
 
     const { data: loginData } = await userLoginRequest(payload)
-    const { token } = loginData
-    const { data: userData } = await getUser({
-      accessToken: token,
-    })
-    const tokenCookie = generateUserTokenCookie({
-      token,
-    })
+    const { token: accessToken } = loginData
+    const { data: userData } = await getUser({ accessToken })
+    const tokenCookie = generateUserTokenCookie({ accessToken })
 
     const headers = new Headers()
     headers.append('Set-Cookie', await tokenCookie)

app/routes/actions.register.ts

@@ -30,13 +30,9 @@ export const action = async ({ request }: Route.ActionArgs) => {
     }
 
     const { data: registerData } = await userRegisterRequest(payload)
-    const { token } = registerData
-    const { data: userData } = await getUser({
-      accessToken: token,
-    })
-    const tokenCookie = generateUserTokenCookie({
-      token,
-    })
+    const { token: accessToken } = registerData
+    const { data: userData } = await getUser({ accessToken })
+    const tokenCookie = generateUserTokenCookie({ accessToken })
 
     const headers = new Headers()
     headers.append('Set-Cookie', await tokenCookie)

app/routes/actions.subscribe.ts

@@ -10,10 +10,10 @@ import {
 } from '~/layouts/news/form-subscription'
 import { handleCookie } from '~/libs/cookies'
 
-import type { Route } from './+types/actions.register'
+import type { Route } from './+types/actions.subscribe'
 
 export const action = async ({ request }: Route.ActionArgs) => {
-  const { userToken } = await handleCookie(request)
+  const { userToken: accessToken } = await handleCookie(request)
   try {
     const {
       errors,
@@ -32,9 +32,7 @@ export const action = async ({ request }: Route.ActionArgs) => {
     // TODO: implement subscribe
     console.log('payload', payload) // eslint-disable-line no-console
 
-    const { data: userData } = await getUser({
-      accessToken: userToken,
-    })
+    const { data: userData } = await getUser({ accessToken })
 
     return data(
       {

app/utils/token.ts

@@ -6,33 +6,33 @@ import {
 } from '~/libs/cookie.server'
 
 type TTokenCookie = {
-  token: string
+  accessToken: string
 }
 
 export const generateUserTokenCookie = (parameters: TTokenCookie) => {
-  const { token } = parameters
+  const { accessToken } = parameters
 
-  const decodedToken = decodeJwt(token)
+  const decodedToken = decodeJwt(accessToken)
   const decodedTokenExp = decodedToken.exp
   const expirationDate = decodedTokenExp
     ? new Date(decodedTokenExp * 1000)
     : undefined
 
-  return userTokenCookieConfig.serialize(token, {
+  return userTokenCookieConfig.serialize(accessToken, {
     expires: expirationDate,
   })
 }
 
 export const generateStaffTokenCookie = (parameters: TTokenCookie) => {
-  const { token } = parameters
+  const { accessToken } = parameters
 
-  const decodedToken = decodeJwt(token)
+  const decodedToken = decodeJwt(accessToken)
   const decodedTokenExp = decodedToken.exp
   const expirationDate = decodedTokenExp
     ? new Date(decodedTokenExp * 1000)
     : undefined
 
-  return staffTokenCookieConfig.serialize(token, {
+  return staffTokenCookieConfig.serialize(accessToken, {
     expires: expirationDate,
   })
 }

package.json

@@ -44,6 +44,7 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.2",
     "react-hook-reading-time": "^1.0.0",
+    "react-hot-toast": "^2.5.2",
     "react-router": "^7.1.3",
     "react-share": "^5.2.2",
     "remix-hook-form": "^6.1.3",

pnpm-lock.yaml

@@ -98,6 +98,9 @@ importers:
       react-hook-reading-time:
         specifier: ^1.0.0
         version: 1.0.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      react-hot-toast:
+        specifier: ^2.5.2
+        version: 2.5.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react-router:
         specifier: ^7.1.3
         version: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -2791,6 +2794,11 @@ packages:
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
+  goober@2.1.16:
+    resolution: {integrity: sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==}
+    peerDependencies:
+      csstype: ^3.0.10
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -3944,6 +3952,13 @@ packages:
       react: ^16.13.1
       react-dom: ^16.13.1
 
+  react-hot-toast@2.5.2:
+    resolution: {integrity: sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+
   react-hotkeys-hook@4.6.1:
     resolution: {integrity: sha512-XlZpbKUj9tkfgPgT9gA+1p7Ey6vFIZHttUjPqpTdyT5nqQ8mHL7elxvSbaC+dpSiHUSmr21Ya1mDxBZG3aje4Q==}
     peerDependencies:
@@ -7651,6 +7666,10 @@ snapshots:
 
   globrex@0.1.2: {}
 
+  goober@2.1.16(csstype@3.1.3):
+    dependencies:
+      csstype: 3.1.3
+
   gopd@1.2.0: {}
 
   graceful-fs@4.2.11: {}
@@ -8737,6 +8756,13 @@ snapshots:
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
+  react-hot-toast@2.5.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      csstype: 3.1.3
+      goober: 2.1.16(csstype@3.1.3)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   react-hotkeys-hook@4.6.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       react: 19.0.0