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

* commit '9c9d127dfb1a8e3633f803f527c27bbfc6346b4d':
  feat: add delete functionality for news articles with confirmation dialog

app/apis/admin/create-ads.ts

@@ -2,6 +2,7 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 import type { TAdsSchema } from '~/pages/form-advertisements'
+import { datePayload } from '~/utils/formatter'
 
 const advertisementsResponseSchema = z.object({
   data: z.object({
@@ -15,10 +16,15 @@ type TParameters = {
 
 export const createAdsRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
+  const transformedPayload = {
+    ...payload,
+    start_date: datePayload(payload.start_date),
+    end_date: datePayload(payload.end_date),
+  }
   try {
     const { data } = await HttpServer(restParameters).post(
       '/api/ads/create',
-      payload,
+      transformedPayload,
     )
     return advertisementsResponseSchema.parse(data)
   } catch (error) {

app/apis/admin/create-news.ts

@@ -2,6 +2,7 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 import type { TContentSchema } from '~/pages/form-contents'
+import { datePayload } from '~/utils/formatter'
 
 const newsResponseSchema = z.object({
   data: z.object({
@@ -20,7 +21,7 @@ export const createNewsRequest = async (parameters: TParameter) => {
     ...restPayload,
     categories: categories.map((category) => category?.id),
     tags: tags?.map((tag) => tag?.id) || [],
-    live_at: new Date(live_at).toISOString(),
+    live_at: datePayload(live_at),
   }
   try {
     const { data } = await HttpServer(restParameters).post(

app/apis/admin/create-staffs.ts

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

app/apis/admin/create-subscribe-plan.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
-import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
+import type { TSubscribePlanSchema } from '~/pages/form-subscribe-plan'
 
 const subscribePlanResponseSchema = z.object({
   data: z.object({
@@ -16,9 +16,13 @@ type TParameters = {
 export const createSubscribePlanRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
   try {
+    const transformedPayload = {
+      ...payload,
+      status: Number(payload.status),
+    }
     const { data } = await HttpServer(restParameters).post(
       '/api/subscribe-plan/create',
-      payload,
+      transformedPayload,
     )
     return subscribePlanResponseSchema.parse(data)
   } catch (error) {

app/apis/admin/delete-categories.ts

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

app/apis/admin/delete-contents.ts

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

app/apis/admin/delete-subscribe-plan.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
-import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
+import type { TSubscribePlanSchema } from '~/pages/form-subscribe-plan'
 
 const subscribePlanResponseSchema = z.object({
   data: z.object({
@@ -9,14 +9,12 @@ const subscribePlanResponseSchema = z.object({
   }),
 })
 
-type TTSubscribePlanId = Pick<TSubscribePlanSchema, 'id'>
 type TParameters = {
-  payload: TTSubscribePlanId
+  id: TSubscribePlanSchema['id']
 } & THttpServer
 
 export const deleteSubscribePlanRequest = async (parameters: TParameters) => {
-  const { payload, ...restParameters } = parameters
-  const { id } = payload
+  const { id, ...restParameters } = parameters
   try {
     const { data } = await HttpServer(restParameters).delete(
       `/api/subscribe-plan/${id}/delete`,

app/apis/admin/delete-tags.ts

@@ -9,15 +9,12 @@ const deleteTagsResponseSchema = z.object({
   }),
 })
 
-type TTagsId = Pick<TTagSchema, 'id'>
 type TParameters = {
-  payload: TTagsId
+  id: TTagSchema['id']
 } & THttpServer
 
-export type TDeleteTagsSchema = z.infer<typeof deleteTagsResponseSchema>
 export const deleteTagsRequest = async (parameters: TParameters) => {
-  const { payload, ...restParameters } = parameters
-  const { id } = payload
+  const { id, ...restParameters } = parameters
   try {
     const { data } = await HttpServer(restParameters).delete(
       `/api/tag/${id}/delete`,

app/apis/admin/get-news-by-id.ts

@@ -0,0 +1,25 @@
+import { z } from 'zod'
+
+import { newsResponseSchema } from '~/apis/common/get-news'
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const dataResponseSchema = z.object({
+  data: z.object(newsResponseSchema.shape),
+})
+
+type TParameters = {
+  id: string
+} & THttpServer
+
+export const getNewsById = async (parameters: TParameters) => {
+  const { id, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).get(
+      `/api/staff/news/${encodeURIComponent(id)}`,
+    )
+    return dataResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/get-profile.ts

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

app/apis/admin/get-staffs.ts

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

app/apis/admin/get-users.ts

@@ -21,6 +21,7 @@ const userResponseSchema = z.object({
   email: z.string().email(),
   phone: z.string(),
   subscribe: subscribeResponseSchema,
+  created_at: z.string(),
 })
 const usersResponseSchema = z.object({
   data: z.array(userResponseSchema),

app/apis/admin/update-ads.ts

@@ -0,0 +1,35 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TAdsSchema } from '~/pages/form-advertisements'
+import { datePayload } from '~/utils/formatter'
+
+const advertisementsResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameters = {
+  payload: TAdsSchema
+} & THttpServer
+
+export const updateAdsRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  const { id, ...restPayload } = payload
+  const transformedPayload = {
+    ...restPayload,
+    start_date: datePayload(payload.start_date),
+    end_date: datePayload(payload.end_date),
+  }
+  try {
+    const { data } = await HttpServer(restParameters).put(
+      `/api/ads/${id}/update`,
+      transformedPayload,
+    )
+    return advertisementsResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/update-news.ts

@@ -2,6 +2,7 @@ import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
 import type { TContentSchema } from '~/pages/form-contents'
+import { datePayload } from '~/utils/formatter'
 
 const newsResponseSchema = z.object({
   data: z.object({
@@ -20,7 +21,7 @@ export const updateNewsRequest = async (parameters: TParameter) => {
     ...restPayload,
     categories: categories.map((category) => category?.id),
     tags: tags?.map((tag) => tag?.id) || [],
-    live_at: new Date(live_at).toISOString(),
+    live_at: datePayload(live_at),
   }
   try {
     const { data } = await HttpServer(restParameters).put(

app/apis/admin/update-profile.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+import type { TProfileSchema } from '~/layouts/admin/dialog-profile'
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const updateProfileResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TParameter = {
+  payload: TProfileSchema
+} & THttpServer
+
+export const updateProfileRequest = async (parameters: TParameter) => {
+  const { payload, ...restParameters } = parameters
+  try {
+    const { data } = await HttpServer(restParameters).put(
+      '/api/staff/update',
+      payload,
+    )
+    return updateProfileResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/admin/update-subscribe-plan.ts

@@ -1,7 +1,7 @@
 import { z } from 'zod'
 
 import { HttpServer, type THttpServer } from '~/libs/http-server'
-import type { TSubscribePlanSchema } from '~/pages/form-subscriptions-plan'
+import type { TSubscribePlanSchema } from '~/pages/form-subscribe-plan'
 
 const subscribePlanResponseSchema = z.object({
   data: z.object({
@@ -17,9 +17,13 @@ export const updateSubscribePlanRequest = async (parameters: TParameters) => {
   const { payload, ...restParameters } = parameters
   const { id, ...restPayload } = payload
   try {
+    const transformedPayload = {
+      ...restPayload,
+      status: Number(payload.status),
+    }
     const { data } = await HttpServer(restParameters).put(
       `/api/subscribe-plan/${id}/update`,
-      restPayload,
+      transformedPayload,
     )
     return subscribePlanResponseSchema.parse(data)
   } catch (error) {

app/apis/admin/update-subscribe.ts

@@ -0,0 +1,36 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+import type { TSubscribePlanSchema } from '~/pages/form-subscribe-plan'
+
+const subscribePlanResponseSchema = z.object({
+  data: z.object({
+    Message: z.string(),
+  }),
+})
+
+type TSubscribeSchema = Pick<TSubscribePlanSchema, 'id'>
+type TParameters = {
+  payload: { subscribe_plan: TSubscribeSchema }
+} & THttpServer
+
+export const updateSubscribeRequest = async (parameters: TParameters) => {
+  const { payload, ...restParameters } = parameters
+  const { id } = payload.subscribe_plan
+  try {
+    const transformedPayload = {
+      status: 1,
+      subscribe_plan_id: id,
+    }
+    const { data } = await HttpServer(restParameters).patch(
+      `/api/subscribe/update`,
+      transformedPayload,
+    )
+    console.log(data) // eslint-disable-line no-console
+
+    return subscribePlanResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/common/get-ads.ts

@@ -6,9 +6,12 @@ const adResponseSchema = z.object({
   id: z.string(),
   image_url: z.string(),
   url: z.string(),
+  start_date: z.string(),
+  end_date: z.string(),
+  clicked: z.number(),
 })
 const adsResponseSchema = z.object({
-  data: z.array(adResponseSchema),
+  data: z.array(adResponseSchema).nullable(),
 })
 
 export type TAdResponse = z.infer<typeof adResponseSchema>

app/apis/common/get-news.ts

@@ -25,23 +25,37 @@ export const newsResponseSchema = z.object({
   author: authorSchema,
 })
 const dataResponseSchema = z.object({
-  data: z.array(newsResponseSchema),
+  data: z.array(
+    newsResponseSchema.extend({
+      views: z.number(),
+    }),
+  ),
 })
 
 export type TNewsResponse = z.infer<typeof newsResponseSchema>
-export type TAuthor = z.infer<typeof authorSchema>
+export type TNewsResponseData = z.infer<typeof dataResponseSchema>
+export type TAuthorResponse = z.infer<typeof authorSchema>
 type TParameters = {
   categories?: string[]
   tags?: string[]
+  active?: boolean
+  limit?: number
+  page?: number
+  query?: string
 } & THttpServer
 
 export const getNews = async (parameters?: TParameters) => {
-  const { categories, tags, ...restParameters } = parameters || {}
+  const { categories, tags, active, limit, page, query, ...restParameters } =
+    parameters || {}
   try {
     const { data } = await HttpServer(restParameters).get(`/api/news`, {
       params: {
         ...(categories && { categories: categories.join('+') }),
         ...(tags && { tags: tags.join('+') }),
+        ...(active && { active }),
+        ...(limit && { limit }),
+        ...(page && { page }),
+        ...(query && { q: query }),
       },
     })
     return dataResponseSchema.parse(data)

app/apis/common/get-subscribe-plan.ts

@@ -0,0 +1,28 @@
+import { z } from 'zod'
+
+import { HttpServer, type THttpServer } from '~/libs/http-server'
+
+const subscribePlanSchema = z.object({
+  id: z.string(),
+  code: z.string(),
+  name: z.string(),
+  length: z.number(),
+  price: z.number(),
+  status: z.number(),
+})
+
+const subscribePlanResponseSchema = z.object({
+  data: z.array(subscribePlanSchema),
+})
+
+export type TSubscribePlanResponse = z.infer<typeof subscribePlanSchema>
+
+export const getSubscribePlan = async (parameters?: THttpServer) => {
+  try {
+    const { data } = await HttpServer(parameters).get(`/api/subscribe-plan`)
+    return subscribePlanResponseSchema.parse(data)
+  } catch (error) {
+    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
+    return Promise.reject(error)
+  }
+}

app/apis/common/get-subscriptions.ts

@@ -1,26 +0,0 @@
-import { z } from 'zod'
-
-import { HttpServer, type THttpServer } from '~/libs/http-server'
-
-const subscriptionResponseSchema = z.object({
-  data: z.array(
-    z.object({
-      id: z.string(),
-      code: z.string(),
-      name: z.string(),
-      length: z.number().optional(),
-      price: z.number().optional(),
-      status: z.number().optional(),
-    }),
-  ),
-})
-
-export const getSubscriptions = async (parameters?: THttpServer) => {
-  try {
-    const { data } = await HttpServer(parameters).get(`/api/subscribe-plan`)
-    return subscriptionResponseSchema.parse(data)
-  } catch (error) {
-    // eslint-disable-next-line unicorn/no-useless-promise-resolve-reject
-    return Promise.reject(error)
-  }
-}

app/apis/news/create-log-ads.ts

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

app/apis/news/get-user.ts

@@ -12,7 +12,7 @@ const userResponseSchema = 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: z.object({
         id: z.string(),

app/apis/news/login-user.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod'
 
-import { type TLoginSchema } from '~/layouts/news/form-login'
+import { type TLoginSchema } from '~/layouts/news/dialog-login'
 import { HttpServer } from '~/libs/http-server'
 
 export const loginResponseSchema = z.object({

app/apis/news/register-user.ts

@@ -1,4 +1,4 @@
-import type { TRegisterSchema } from '~/layouts/news/form-register'
+import type { TRegisterSchema } from '~/layouts/news/dialog-register'
 import { HttpServer } from '~/libs/http-server'
 
 import { loginResponseSchema } from './login-user'

app/components/dialog/delete.tsx

@@ -5,42 +5,41 @@ import {
   DialogPanel,
   DialogTitle,
 } from '@headlessui/react'
-import { useEffect, type Dispatch, type SetStateAction } from 'react'
+import { useEffect, type PropsWithChildren } from 'react'
 import toast from 'react-hot-toast'
-import { Link, useFetcher } from 'react-router'
+import { 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>>
+type TProperties = PropsWithChildren & {
+  selectedId?: string
+  close: () => void
+  title: string
+  fetcherAction: string
 }
 
 export const DialogDelete = (properties: TProperties) => {
-  const { selectedAds, setSelectedAds } = properties || {}
+  const { selectedId, close, children, title, fetcherAction } = properties || {}
   const fetcher = useFetcher()
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
-      setSelectedAds(undefined)
-      toast.success('Banner iklan berhasil dihapus!')
-      return
+    if (fetcher.data?.success) {
+      close()
+      toast.success(`${title} berhasil dihapus!`)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher.data])
 
   return (
     <Dialog
-      open={!!selectedAds}
+      open={!!selectedId}
       onClose={() => {
         if (fetcher.state === 'idle') {
-          setSelectedAds(undefined)
+          close()
         }
       }}
       className="relative z-50"
@@ -55,33 +54,22 @@ export const DialogDelete = (properties: TProperties) => {
           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 className="relative text-xl font-bold">
+            <span>Anda akan menghapus</span>{' '}
+            <span className="lowercase">{title}</span> <span>berikut?</span>
           </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>
+            {children}
           </Description>
           <div className="flex justify-end">
             <fetcher.Form
               method="POST"
-              action={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
+              action={fetcherAction}
               className="grid"
             >
               <Button
                 type="submit"
-                variant="newsDanger"
+                variant="danger"
                 className="text-md h-[42px] rounded-md"
                 disabled={fetcher.state !== 'idle'}
                 isLoading={fetcher.state !== 'idle'}

app/components/dialog/news.tsx

@@ -17,7 +17,7 @@ type ModalProperties = {
   description?: string
 }
 
-export const PopupModal = ({
+export const DialogNews = ({
   isOpen,
   onClose,
   children,

app/components/dialog/success.tsx

@@ -33,7 +33,7 @@ const DESCRIPTIONS: DescriptionMap = {
   error: 'Terjadi kesalahan. Silakan coba lagi.',
 }
 
-export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
+export const DialogSuccess = ({ isOpen, onClose }: ModalProperties) => {
   const { setIsLoginOpen, setIsSubscribeOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
   const { userData } = loaderData || {}
@@ -92,7 +92,7 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
                   />
                   <Button
                     className="mt-5 w-full rounded-md"
-                    variant="newsPrimary"
+                    variant="primary"
                     as={Link}
                     to="/"
                     onClick={onClose}
@@ -111,18 +111,18 @@ export const SuccessModal = ({ isOpen, onClose }: ModalProperties) => {
                   {userData ? (
                     <Button
                       className="mt-5 w-full rounded-md"
-                      variant="newsSecondary"
+                      variant="outline"
                       onClick={() => {
                         onClose()
                         setIsSubscribeOpen(true)
                       }}
                     >
-                      Select Subscription
+                      Pilih Paken Berlangganan
                     </Button>
                   ) : (
                     <Button
                       className="mt-5 w-full rounded-md"
-                      variant="newsPrimary"
+                      variant="primary"
                       onClick={() => {
                         onClose()
                         setIsLoginOpen(true)

app/components/error/await.tsx

@@ -0,0 +1,10 @@
+import { useAsyncError } from 'react-router'
+
+export const ErrorAwait = () => {
+  const error = useAsyncError()
+  return (
+    <p>
+      {error instanceof Error ? error.message : 'An unexpected error occurred.'}
+    </p>
+  )
+}

app/components/icons/chevron.tsx

@@ -1,25 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-/**
- * Note: `ChevronIcon` default mengarah ke bawah.
- * Gunakan class `rotate-xx` untuk mengubah arah ikon.
- */
-export const ChevronIcon = (
-  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-) => {
-  return (
-    <svg
-      width={21}
-      height={21}
-      viewBox="0 0 21 21"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={properties.className}
-      {...properties}
-    >
-      <path
-        d="M10.197 13.623l5.008-5.008-1.177-1.18-3.83 3.834-3.831-3.833-1.178 1.178 5.008 5.009z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

app/components/icons/doctor.tsx

@@ -1,21 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-
-export const DoctorIcon = (
-  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-) => {
-  return (
-    <svg
-      width={25}
-      height={28}
-      viewBox="0 0 25 28"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...properties}
-    >
-      <path
-        d="M12.714 14.364a6.821 6.821 0 006.822-6.822A6.821 6.821 0 0012.714.72a6.822 6.822 0 00-6.822 6.822 6.822 6.822 0 006.822 6.822zM6.32 23.318c0 .708.57 1.279 1.279 1.279s1.279-.57 1.279-1.28c0-.708-.57-1.278-1.28-1.278-.708 0-1.278.57-1.278 1.279zM17.83 16.1v2.612a4.27 4.27 0 013.41 4.178v2.223a.855.855 0 01-.687.837l-1.716.34a.424.424 0 01-.501-.335l-.165-.837a.422.422 0 01.336-.5l1.028-.209v-1.519c0-3.347-5.116-3.47-5.116.102v1.423l1.028.207c.23.048.379.272.336.502l-.165.836a.432.432 0 01-.501.336l-1.663-.224a.852.852 0 01-.736-.847V22.89a4.274 4.274 0 013.412-4.178v-2.41c-.118.038-.235.06-.352.102a9.244 9.244 0 01-3.06.522c-1.07 0-2.1-.186-3.059-.522a5.889 5.889 0 00-1.204-.277v4.349a2.974 2.974 0 012.132 2.846 2.987 2.987 0 01-2.985 2.985 2.987 2.987 0 01-2.985-2.985c0-1.348.901-2.478 2.132-2.846v-4.285c-3.39.57-5.974 3.49-5.974 7.04v2.388a2.39 2.39 0 002.387 2.388h19.102a2.39 2.39 0 002.388-2.388v-2.388c0-3.837-3.028-6.944-6.822-7.13z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

app/components/icons/graph.tsx

@@ -1,21 +0,0 @@
-import type { JSX, SVGProps } from 'react'
-
-export const GraphIcon = (
-  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
-) => {
-  return (
-    <svg
-      width={29}
-      height={28}
-      viewBox="0 0 29 28"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...properties}
-    >
-      <path
-        d="M19.383 2.499H9.471c-4.306 0-6.872 2.496-6.872 6.682v9.625c0 4.197 2.566 6.693 6.872 6.693h9.9c4.306 0 6.873-2.495 6.873-6.681V9.18c.012-4.186-2.555-6.682-6.86-6.682zM9.258 21.071c0 .472-.402.863-.887.863s-.887-.391-.887-.863v-2.38c0-.471.402-.863.887-.863s.887.392.887.863v2.38zm6.056 0c0 .472-.402.863-.887.863s-.887-.391-.887-.863V16.3c0-.471.402-.862.887-.862s.887.39.887.862v4.773zm6.057 0c0 .472-.403.863-.888.863s-.887-.391-.887-.863v-7.153c0-.471.402-.862.887-.862s.888.391.888.863v7.152zm0-10.787c0 .472-.403.863-.888.863s-.887-.391-.887-.863V9.17a23.266 23.266 0 01-11.012 6.164c-.071.023-.142.023-.213.023a.891.891 0 01-.864-.655.859.859 0 01.651-1.047 21.515 21.515 0 0010.35-5.876H17.03c-.485 0-.887-.391-.887-.863 0-.471.402-.862.887-.862h3.466c.048 0 .083.023.13.023.06.011.119.011.178.034.059.023.106.058.165.092.036.023.071.035.107.058.012.011.012.023.024.023.047.046.082.092.118.138.035.046.07.08.083.126.023.046.023.092.035.15.012.057.036.115.036.184 0 .011.011.023.011.034v3.37h-.011z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}

app/components/icons/image-skeleton.tsx

@@ -0,0 +1,19 @@
+import type { JSX, SVGProps } from 'react'
+
+export const ImageSkeletonIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={40}
+      height={40}
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      viewBox="0 0 20 18"
+      {...properties}
+    >
+      <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+    </svg>
+  )
+}

app/components/icons/profile.tsx

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

app/components/text-editor/editor-menubar.tsx

@@ -5,7 +5,6 @@ import {
   Bars3BottomLeftIcon,
   Bars3BottomRightIcon,
   Bars3Icon,
-  Bars4Icon,
   BoldIcon,
   CloudArrowUpIcon,
   CodeBracketIcon,
@@ -21,7 +20,12 @@ import {
   PhotoIcon,
   StrikethroughIcon,
   SwatchIcon,
-} from '@heroicons/react/20/solid'
+  XCircleIcon,
+} from '@heroicons/react/24/solid'
+import {
+  Bars3BottomCenterIcon,
+  QuotationMarkIcon,
+} from '@sidekickicons/react/24/solid'
 import type { Editor } from '@tiptap/react'
 import {
   type SetStateAction,
@@ -202,7 +206,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive({ textAlign: 'center' })}
             title="Align Center"
           >
-            <Bars3Icon className="size-4" />
+            <Bars3BottomCenterIcon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().setTextAlign('right').run()}
@@ -224,7 +228,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive({ textAlign: 'justify' })}
             title="Align Justify"
           >
-            <Bars4Icon className="size-4" />
+            <Bars3Icon className="size-4" />
           </EditorButton>
         </div>
         <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
@@ -258,14 +262,14 @@ export const EditorMenuBar = (properties: TProperties) => {
           >
             <H3Icon className="size-4" />
           </EditorButton>
-          {/* <EditorButton
-              onClick={() => editor.chain().focus().setParagraph().run()}
-              isActive={editor.isActive('paragraph')}
-              title="Paragraph"
-              disabled={disabled}
-            >
-              <RiParagraph />
-            </EditorButton> */}
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            isActive={editor.isActive('codeBlock')}
+            title="Code Block"
+            disabled={disabled}
+          >
+            <CodeBracketIcon className="size-4" />
+          </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().toggleBulletList().run()}
             isActive={editor.isActive('bulletList')}
@@ -282,32 +286,40 @@ export const EditorMenuBar = (properties: TProperties) => {
           >
             <NumberedListIcon className="size-4" />
           </EditorButton>
-          <EditorButton
-            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-            isActive={editor.isActive('codeBlock')}
-            title="Code Block"
+          {/* <EditorButton
+            onClick={() => editor.chain().focus().setParagraph().run()}
+            isActive={editor.isActive('paragraph')}
+            title="Paragraph"
             disabled={disabled}
           >
-            <CodeBracketIcon className="size-4" />
+            <PilcrowIcon className="size-4" />
+          </EditorButton> */}
+          <EditorButton
+            onClick={() => editor.chain().focus().toggleBlockquote().run()}
+            isActive={editor.isActive('blockquote')}
+            title="Blockquote"
+            disabled={disabled}
+          >
+            <QuotationMarkIcon className="size-4" />
           </EditorButton>
-        </div>
-        {/* <div className="flex items-start gap-1 px-1">
-            <EditorButton
-              onClick={() => editor.chain().focus().toggleBlockquote().run()}
-              isActive={editor.isActive('blockquote')}
-              title="Blockquote"
-              disabled={disabled}
-            >
-              <RiDoubleQuotesL />
-            </EditorButton>
-            <EditorButton
+          <EditorButton
+            onClick={() => {
+              editor.chain().focus().unsetAllMarks().run()
+              editor.chain().focus().clearNodes().run()
+            }}
+            title="Clear Format"
+            disabled={disabled}
+          >
+            <XCircleIcon className="size-4" />
+          </EditorButton>
+          {/* <EditorButton
               onClick={() => editor.chain().focus().setHorizontalRule().run()}
               title="Horizontal Rule"
               disabled={disabled}
             >
               <RiSeparator />
-            </EditorButton>
-          </div> */}
+            </EditorButton> */}
+        </div>
         {/* <div className="flex items-start gap-1 px-1">
             <EditorButton
               onClick={() => editor.chain().focus().setHardBreak().run()}
@@ -316,16 +328,6 @@ export const EditorMenuBar = (properties: TProperties) => {
             >
               <RiTextWrap />
             </EditorButton>
-            <EditorButton
-              onClick={() => {
-                editor.chain().focus().unsetAllMarks().run()
-                editor.chain().focus().clearNodes().run()
-              }}
-              title="Clear Format"
-              disabled={disabled}
-            >
-              <RiFormatClear />
-            </EditorButton>
           </div> */}
         <div className="flex items-start gap-1 px-1">
           <div className="relative">
@@ -359,7 +361,7 @@ export const EditorMenuBar = (properties: TProperties) => {
                       setIsUploadOpen('content')
                     }}
                   >
-                    <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
+                    <CloudArrowUpIcon className="size-4 text-gray-500/50" />
                   </Button>
                 </div>
               </div>

app/components/text-editor/editor-textarea.tsx

@@ -1,4 +1,4 @@
-import { CodeBracketSquareIcon } from '@heroicons/react/20/solid'
+import { CodeBracketSquareIcon } from '@heroicons/react/24/solid'
 import MonacoEditor from '@monaco-editor/react'
 import type { Dispatch, SetStateAction } from 'react'
 import { Controller } from 'react-hook-form'

app/components/text-editor/index.tsx

@@ -8,22 +8,16 @@ import TextStyle from '@tiptap/extension-text-style'
 import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import { useEffect, useId, useState } 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'
 
 import { EditorMenuBar } from './editor-menubar'
 import { EditorTextArea } from './editor-textarea'
 
-type TProperties<TFormValues extends FieldValues> = {
+type TProperties = {
   id?: string
-  name: Path<TFormValues>
+  name: string
   label?: string
   placeholder?: string
   labelClassName?: string
@@ -36,9 +30,7 @@ type TProperties<TFormValues extends FieldValues> = {
   category: string
 }
 
-export const TextEditor = <TFormValues extends Record<string, unknown>>(
-  properties: TProperties<TFormValues>,
-) => {
+export const TextEditor = (properties: TProperties) => {
   const {
     id,
     label,
@@ -92,7 +84,7 @@ export const TextEditor = <TFormValues extends Record<string, unknown>>(
     immediatelyRender: false,
     content: watchContent,
     onUpdate: ({ editor }) => {
-      setValue(name, editor.getHTML() as any) // eslint-disable-line @typescript-eslint/no-explicit-any
+      setValue(name, editor.getHTML() as string)
     },
   })
   useEffect(() => {

app/components/ui/button.tsx

@@ -1,5 +1,5 @@
 import { Button as HeadlessButton } from '@headlessui/react'
-import { ArrowPathIcon } from '@heroicons/react/20/solid'
+import { ArrowPathIcon } from '@heroicons/react/24/solid'
 import { cva, type VariantProps } from 'class-variance-authority'
 import type { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react'
 import { twMerge } from 'tailwind-merge'
@@ -9,28 +9,30 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        newsPrimary:
+        primary:
           '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:
+        danger:
+          'bg-[#EF4444] text-white text-lg hover:shadow transition active:bg-[#FEE2E2] hover:bg-[#FCA5A5]',
+        primaryOutline:
           'border-[3px] bg-[#2E2F7C]  border-white text-white text-lg hover:bg-[#4C5CA0] hover:shadow-lg active:shadow-2xl transition active:bg-[#6970B4]',
-        newsSecondary:
+        outline:
           'border-[3px] bg-white hover:shadow-lg active:shadow-2xl border-[#2E2F7C] text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] text-lg hover:border-[#4C5CA0] transition active:border-[#6970B4]',
         icon: '',
         link: 'font-semibold text-[#2E2F7C] hover:text-[#4C5CA0] active:text-[#6970B4] transition',
+        secondary:
+          'hover:bg-[#707FDD]/10 active:bg-[#707FDD]/20 hover:text-[#707FDD] text-[#273240]',
       },
       size: {
         default: 'h-[50px] w-[150px]',
         block: 'h-[50px] w-full',
-        icon: 'h-9 w-9 rounded-full',
+        icon: 'size-9 rounded-full',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
         fit: 'w-fit',
       },
     },
     defaultVariants: {
-      variant: 'newsPrimary',
+      variant: 'primary',
       size: 'default',
     },
   },
@@ -42,6 +44,7 @@ type ButtonBaseProperties = {
   size?: VariantProps<typeof buttonVariants>['size']
   className?: string
   isLoading?: boolean
+  icon?: ReactNode
 }
 
 type PolymorphicReference<C extends ElementType> =
@@ -62,6 +65,7 @@ export const Button = <C extends ElementType = 'button'>(
     size,
     className,
     isLoading = false,
+    icon,
     ...restProperties
   } = properties
   const Component = as || HeadlessButton
@@ -72,7 +76,7 @@ export const Button = <C extends ElementType = 'button'>(
       className={classes}
       {...restProperties}
     >
-      {isLoading && <ArrowPathIcon className="animate-spin" />}
+      {isLoading ? <ArrowPathIcon className="size-5 animate-spin" /> : icon}
       {children}
     </Component>
   )

app/components/ui/card-report.tsx

@@ -1,4 +1,4 @@
-import type { JSX } from 'react'
+import type { ComponentType, SVGProps } from 'react'
 
 import { formatNumberWithPeriods } from '~/utils/formatter'
 
@@ -6,17 +6,14 @@ type CardReportProperty = {
   title: string
   amount: number
   currency?: string
-  icon: (
-    properties: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
-  ) => JSX.Element
+  icon: ComponentType<SVGProps<SVGSVGElement>>
   url?: string
-  counter?: number[]
 }
 
 export const CardReport = (properties: CardReportProperty) => {
-  const { title, amount, icon: Icon, counter, currency } = properties
+  const { title, amount, icon: Icon, currency } = properties
   return (
-    <div className="rounded bg-white px-4 py-6 shadow-sm">
+    <div className="rounded-xl bg-white px-4 py-6 shadow-sm">
       <div className="flex items-center">
         <Icon
           className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
@@ -32,11 +29,6 @@ export const CardReport = (properties: CardReportProperty) => {
           </p>
         </div>
       </div>
-      {counter?.length && (
-        <div className="flex items-center pt-2">
-          Pribadi: {counter[0]} | Perusahaan: {counter[1]}
-        </div>
-      )}
     </div>
   )
 }

app/components/ui/carousel-hero.tsx

@@ -1,15 +1,18 @@
 import useEmblaCarousel from 'embla-carousel-react'
-import { useCallback, useEffect, useState } from 'react'
-import { useRouteLoaderData } from 'react-router'
+import { Suspense, useCallback, useEffect, useState } from 'react'
+import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 
-import { Button } from '~/components/ui/button'
+import { ErrorAwait } from '~/components/error/await'
+import { ImageSkeletonIcon } from '~/components/icons/image-skeleton'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
+import { Button } from './button'
+
 export const CarouselHero = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
@@ -72,43 +75,81 @@ export const CarouselHero = (properties: TNews) => {
         ref={emblaReference}
       >
         <div className="embla__container hero flex sm:gap-x-8">
-          {items.map(
-            ({ featured_image, title, content, slug, is_premium }, index) => (
-              <div
-                className="embla__slide hero w-full min-w-0 flex-none"
-                key={index}
-              >
-                <div className="max-sm:mt-2 sm:flex">
-                  <img
-                    className="col-span-2 aspect-[174/100] object-cover"
-                    src={featured_image}
-                    alt={title}
-                  />
-                  <div className="flex h-full flex-col justify-between gap-7 sm:px-5">
-                    <div>
-                      <h3 className="mt-2 w-full text-2xl font-bold sm:mt-0 sm:text-4xl">
-                        {title}
-                      </h3>
-                      <p className="text-md mt-5 line-clamp-10 text-[#777777] sm:text-xl">
-                        {stripHtml(content).result}
-                      </p>
-                    </div>
-                    <Button
-                      size="block"
-                      {...getPremiumAttribute({
-                        isPremium: is_premium,
-                        slug,
-                        onClick: () => setIsSuccessOpen('warning'),
-                        userData,
-                      })}
-                    >
-                      View More
-                    </Button>
-                  </div>
+          <Suspense
+            fallback={
+              <div className="embla__slide hero flex w-full min-w-0 flex-none animate-pulse justify-between gap-3 max-sm:mt-2 sm:flex">
+                <div className="flex aspect-[174/100] h-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
+                  <ImageSkeletonIcon />
                 </div>
+                <div className="flex w-full flex-col gap-7">
+                  <div className="flex flex-col gap-4">
+                    <div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                  <div className="flex flex-col gap-2.5">
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                  <div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
+                </div>
+                <span className="sr-only">Loading...</span>
               </div>
-            ),
-          )}
+            }
+          >
+            <Await
+              resolve={items}
+              errorElement={<ErrorAwait />}
+            >
+              {(value) =>
+                value.data.map(
+                  (
+                    { featured_image, title, content, slug, is_premium },
+                    index,
+                  ) => (
+                    <div
+                      className="embla__slide hero w-full min-w-0 flex-none max-sm:mt-2 sm:flex"
+                      key={index}
+                    >
+                      <img
+                        className="aspect-[174/100] h-full rounded-md object-cover"
+                        src={featured_image}
+                        alt={title}
+                      />
+                      <div className="flex h-full flex-col justify-between gap-7 sm:px-5">
+                        <div>
+                          <h3 className="mt-2 w-full text-2xl font-bold sm:mt-0 sm:text-4xl">
+                            {title}
+                          </h3>
+                          <p className="text-md mt-5 line-clamp-10 text-[#777777] sm:text-xl">
+                            {stripHtml(content).result}
+                          </p>
+                        </div>
+                        <Button
+                          size="block"
+                          {...getPremiumAttribute({
+                            isPremium: is_premium,
+                            slug,
+                            onClick: () => setIsSuccessOpen('warning'),
+                            userData,
+                          })}
+                        >
+                          View More
+                        </Button>
+                      </div>
+                    </div>
+                  ),
+                )
+              }
+            </Await>
+          </Suspense>
         </div>
       </div>
     </div>

app/components/ui/carousel-section.tsx

@@ -1,15 +1,17 @@
 import useEmblaCarousel from 'embla-carousel-react'
-import { useCallback, useEffect, useState } from 'react'
-import { useRouteLoaderData } from 'react-router'
+import { Suspense, useCallback, useEffect, useState } from 'react'
+import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 
-import { Button } from '~/components/ui/button'
+import { ErrorAwait } from '~/components/error/await'
+import { ImageSkeletonIcon } from '~/components/icons/image-skeleton'
 import { CarouselButton } from '~/components/ui/button-slide'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
 import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
+import { Button } from './button'
 import { Tags } from './tags'
 
 export const CarouselSection = (properties: TNews) => {
@@ -79,52 +81,81 @@ export const CarouselSection = (properties: TNews) => {
         ref={emblaReference}
       >
         <div className="embla__container col-span-3 flex max-h-[586px] sm:gap-x-8">
-          {items.map(
-            (
-              { featured_image, title, content, tags, slug, is_premium },
-              index,
-            ) => (
+          <Suspense
+            fallback={Array.from({ length: 3 }).map((_, index) => (
               <div
-                className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
                 key={index}
+                className="embla__slide flex w-full min-w-0 flex-none animate-pulse flex-col justify-between gap-3 sm:w-1/3"
               >
-                <div className="flex flex-col justify-between gap-3">
-                  <img
-                    className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]"
-                    src={featured_image}
-                    alt={title}
-                  />
-                  <div className={'flex flex-col justify-between gap-4'}>
-                    <Tags
-                      tags={tags || []}
-                      is_premium={is_premium}
-                    />
-
-                    <div>
-                      <h3 className="mt-2 w-full text-xl font-bold sm:text-2xl lg:mt-0">
-                        {title}
-                      </h3>
-                      <p className="text-md mt-5 line-clamp-3 text-[#777777] sm:text-xl">
-                        {stripHtml(content).result}
-                      </p>
-                    </div>
-                    <Button
-                      size="block"
-                      {...getPremiumAttribute({
-                        isPremium: is_premium,
-                        slug,
-                        onClick: () => setIsSuccessOpen('warning'),
-                        userData,
-                      })}
-                      className="mb-5"
-                    >
-                      View More
-                    </Button>
+                <div className="flex h-[280px] w-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
+                  <ImageSkeletonIcon />
+                </div>
+                <div className="flex w-full flex-col gap-4">
+                  <div className="flex flex-col gap-4">
+                    <div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                  <div className="flex flex-col gap-2.5">
+                    <div className="h-5 max-w-[80%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
                   </div>
                 </div>
+                <div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
+                <span className="sr-only">Loading...</span>
               </div>
-            ),
-          )}
+            ))}
+          >
+            <Await
+              resolve={items}
+              errorElement={<ErrorAwait />}
+            >
+              {(value) =>
+                value.data.map(
+                  (
+                    { featured_image, title, content, tags, slug, is_premium },
+                    index,
+                  ) => (
+                    <div
+                      className="embla__slide flex w-full min-w-0 flex-none flex-col justify-between gap-3 sm:w-1/3"
+                      key={index}
+                    >
+                      <img
+                        className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]"
+                        src={featured_image}
+                        alt={title}
+                      />
+                      <div className={'flex flex-col justify-between gap-4'}>
+                        <div className="flex h-28 flex-col items-start justify-center gap-4">
+                          <Tags
+                            tags={tags || []}
+                            is_premium={is_premium}
+                          />
+                          <h3 className="mt-2 line-clamp-2 w-full text-xl font-bold sm:text-2xl lg:mt-0">
+                            {title}
+                          </h3>
+                        </div>
+                        <p className="line-clamp-3 text-base text-[#777777] sm:text-xl">
+                          {stripHtml(content).result}
+                        </p>
+                        <Button
+                          size="block"
+                          {...getPremiumAttribute({
+                            isPremium: is_premium,
+                            slug,
+                            onClick: () => setIsSuccessOpen('warning'),
+                            userData,
+                          })}
+                        >
+                          View More
+                        </Button>
+                      </div>
+                    </div>
+                  ),
+                )
+              }
+            </Await>
+          </Suspense>
         </div>
       </div>
     </div>

app/components/ui/category-section.tsx

@@ -1,23 +1,20 @@
-import { useRouteLoaderData } from 'react-router'
+import { Suspense } from 'react'
+import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'
 import { twMerge } from 'tailwind-merge'
 
-import type { TNewsResponse } from '~/apis/common/get-news'
+import { ErrorAwait } from '~/components/error/await'
 import { CarouselNextIcon } from '~/components/icons/carousel-next'
 import { CarouselPreviousIcon } from '~/components/icons/carousel-previous'
+import { ImageSkeletonIcon } from '~/components/icons/image-skeleton'
 import { Button } from '~/components/ui/button'
 import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news'
+import type { TNews } from '~/types/news'
 import { getPremiumAttribute } from '~/utils/render'
 
 import { Tags } from './tags'
 
-type TNews = {
-  title: string
-  description: string
-  items: TNewsResponse[]
-}
-
 export const CategorySection = (properties: TNews) => {
   const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
@@ -47,56 +44,87 @@ export const CategorySection = (properties: TNews) => {
       </div>
 
       <div className="grid sm:grid-cols-3 sm:gap-x-8">
-        {items.map(
-          (
-            { featured_image, title, content, tags, slug, is_premium },
-            index,
-          ) => (
+        <Suspense
+          fallback={Array.from({ length: 3 }).map((_, index) => (
             <div
               key={index}
-              className={twMerge('grid gap-3 sm:gap-x-8')}
+              className="grid gap-3 sm:gap-x-8"
             >
-              <img
-                className={twMerge(
-                  'aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]',
-                )}
-                src={featured_image}
-                alt={title}
-              />
-              <div className={twMerge('flex flex-col justify-between gap-4')}>
-                <Tags
-                  tags={tags}
-                  is_premium={is_premium}
-                />
-
-                <div>
-                  <h3
-                    className={twMerge(
-                      'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
-                    )}
-                  >
-                    {title}
-                  </h3>
-                  <p className="text-md mt-5 line-clamp-3 text-[#777777] sm:text-xl">
-                    {stripHtml(content).result}
-                  </p>
-                </div>
-                <Button
-                  size="block"
-                  {...getPremiumAttribute({
-                    isPremium: is_premium,
-                    slug,
-                    onClick: () => setIsSuccessOpen('warning'),
-                    userData,
-                  })}
-                  className="mb-5"
-                >
-                  View More
-                </Button>
+              <div className="flex h-[280px] w-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
+                <ImageSkeletonIcon />
               </div>
+              <div className="flex w-full flex-col gap-4">
+                <div className="flex flex-col gap-4">
+                  <div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                </div>
+                <div className="flex flex-col gap-2.5">
+                  <div className="h-5 max-w-[80%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  <div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                </div>
+              </div>
+              <div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
+              <span className="sr-only">Loading...</span>
             </div>
-          ),
-        )}
+          ))}
+        >
+          <Await
+            resolve={items}
+            errorElement={<ErrorAwait />}
+          >
+            {(value) =>
+              value.data.map(
+                (
+                  { featured_image, title, content, tags, slug, is_premium },
+                  index,
+                ) => (
+                  <div
+                    key={index}
+                    className="grid gap-3 sm:gap-x-8"
+                  >
+                    <img
+                      className="aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]"
+                      src={featured_image}
+                      alt={title}
+                    />
+                    <div className="flex flex-col justify-between gap-4">
+                      <Tags
+                        tags={tags}
+                        is_premium={is_premium}
+                      />
+
+                      <div>
+                        <h3
+                          className={twMerge(
+                            'mt-2 w-full text-xl font-bold sm:mt-0 sm:text-2xl',
+                          )}
+                        >
+                          {title}
+                        </h3>
+                        <p className="text-md mt-5 line-clamp-3 text-[#777777] sm:text-xl">
+                          {stripHtml(content).result}
+                        </p>
+                      </div>
+                      <Button
+                        size="block"
+                        {...getPremiumAttribute({
+                          isPremium: is_premium,
+                          slug,
+                          onClick: () => setIsSuccessOpen('warning'),
+                          userData,
+                        })}
+                        className="mb-5"
+                      >
+                        View More
+                      </Button>
+                    </div>
+                  </div>
+                ),
+              )
+            }
+          </Await>
+        </Suspense>
       </div>
 
       <div className="my-5 mt-5 flex flex-row-reverse">

app/components/ui/combobox.tsx

@@ -7,7 +7,7 @@ import {
   ComboboxOptions,
   ComboboxOption,
 } from '@headlessui/react'
-import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/24/solid'
 import { useState, type ComponentProps, type ReactNode } from 'react'
 import {
   get,
@@ -96,7 +96,7 @@ export const Combobox = <TFormValues extends Record<string, unknown>>(
                 displayValue={(option: TComboboxOption) => option?.name}
                 onChange={(event) => setQuery(event.target.value)}
                 className={twMerge(
-                  'focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
+                  'focus:inheriten h-[42px] w-full rounded-md border border-[#DFDFDF] p-2 placeholder:text-inherit',
                   className,
                 )}
               />

app/components/ui/input-file.tsx

@@ -1,5 +1,5 @@
 import { Field, Label, Input as HeadlessInput } from '@headlessui/react'
-import { CloudArrowUpIcon } from '@heroicons/react/20/solid'
+import { CloudArrowUpIcon } from '@heroicons/react/24/solid'
 import { useEffect, type ComponentProps, type ReactNode } from 'react'
 import { get, type FieldError, type RegisterOptions } from 'react-hook-form'
 import { useRemixFormContext } from 'remix-hook-form'
@@ -80,7 +80,7 @@ export const InputFile = (properties: TInputProperties) => {
           setIsUploadOpen(category)
         }}
       >
-        <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
+        <CloudArrowUpIcon className="size-4 text-gray-500/50" />
       </Button>
     </Field>
   )

app/components/ui/input.tsx

@@ -63,8 +63,9 @@ export const Input = <TFormValues extends Record<string, unknown>>(
       <HeadlessInput
         type={inputType}
         className={twMerge(
-          'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2 pr-8',
+          'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
           className,
+          type === 'password' ? 'pr-8' : '',
         )}
         placeholder={inputType === 'password' ? '******' : placeholder}
         {...register(name, rules)}
@@ -82,7 +83,7 @@ export const Input = <TFormValues extends Record<string, unknown>>(
         >
           <EyeIcon
             className={twMerge(
-              'h-4 w-4',
+              'size-4',
               inputType === 'password' ? 'text-gray-500/50' : 'text-gray-500',
             )}
           />

app/components/ui/news-author.tsx

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

app/components/ui/newsletter.tsx

@@ -45,7 +45,7 @@ export const Newsletter = (property: NewsletterProperties) => {
             />
             <Button
               type="submit"
-              variant="newsPrimary"
+              variant="primary"
               size="block"
             >
               Subscribe

app/components/ui/select.tsx

@@ -0,0 +1,98 @@
+import { Field, Label, Select as HeadlessSelect } from '@headlessui/react'
+import { type ComponentProps, type ReactNode } from 'react'
+import {
+  get,
+  type FieldError,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+  Controller,
+} from 'react-hook-form'
+import { useRemixFormContext } from 'remix-hook-form'
+import { twMerge } from 'tailwind-merge'
+
+type TSelectProperties<T extends FieldValues> = Omit<
+  ComponentProps<'select'>,
+  'size'
+> & {
+  id: string
+  label?: ReactNode
+  name: Path<T>
+  rules?: RegisterOptions
+  containerClassName?: string
+  labelClassName?: string
+  placeholder?: string
+  options?: {
+    name: string
+    value: string | number
+  }[]
+}
+
+export const Select = <TFormValues extends Record<string, unknown>>(
+  properties: TSelectProperties<TFormValues>,
+) => {
+  const {
+    id,
+    label,
+    name,
+    rules,
+    disabled,
+    placeholder,
+    options,
+    className,
+    labelClassName,
+    containerClassName,
+    ...restProperties
+  } = properties
+  const {
+    control,
+    formState: { errors },
+  } = useRemixFormContext()
+
+  const error: FieldError = get(errors, name)
+
+  return (
+    <Field
+      className={twMerge('relative', containerClassName)}
+      disabled={disabled}
+      id={id}
+    >
+      <Label className={twMerge('mb-1 block text-gray-700', labelClassName)}>
+        {label} {error && <span className="text-red-500">{error.message}</span>}
+      </Label>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field }) => (
+          <HeadlessSelect
+            value={field.value}
+            onChange={field.onChange}
+            disabled={disabled}
+            className={twMerge(
+              'h-[42px] w-full rounded-md border border-[#DFDFDF] p-2',
+              className,
+            )}
+            {...restProperties}
+          >
+            <option
+              value=""
+              disabled
+              selected={!field.value}
+            >
+              {placeholder}
+            </option>
+            {options?.map(({ value, name }) => (
+              <option
+                key={value}
+                value={value}
+              >
+                {name}
+              </option>
+            ))}
+          </HeadlessSelect>
+        )}
+      />
+    </Field>
+  )
+}

app/components/ui/social-share.tsx

@@ -1,4 +1,4 @@
-import { LinkIcon } from '@heroicons/react/20/solid'
+import { LinkIcon } from '@heroicons/react/24/solid'
 import { useState } from 'react'
 import {
   FacebookShareButton,
@@ -39,7 +39,7 @@ export const SocialShareButtons = ({
         onClick={handleCopyLink}
         className="relative cursor-pointer"
       >
-        <LinkIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <LinkIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
         {showPopup && (
           <div className="absolute top-12 w-48 rounded-lg border-2 border-gray-400 bg-white p-2 shadow-lg">
             Link berhasil disalin!
@@ -51,28 +51,28 @@ export const SocialShareButtons = ({
         url={url}
         title={title}
       >
-        <FacebookIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <FacebookIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
       </FacebookShareButton>
 
       <LinkedinShareButton
         url={url}
         title={title}
       >
-        <LinkedinIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <LinkedinIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
       </LinkedinShareButton>
 
       <TwitterShareButton
         url={url}
         title={title}
       >
-        <XIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <XIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
       </TwitterShareButton>
 
       <button
         onClick={handleInstagramShare}
         className="cursor-pointer"
       >
-        <InstagramIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
+        <InstagramIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
       </button>
     </div>
   )

app/components/ui/table-search.tsx

@@ -0,0 +1,69 @@
+import { Field, Input, Label, Select } from '@headlessui/react'
+import { MagnifyingGlassIcon } from '@heroicons/react/24/solid'
+import { useState } from 'react'
+
+interface SearchFilterProperties {
+  title: string
+  columns?: string[]
+  onSearch: (value: string) => void
+  onStatusFilter?: (value: string) => Promise<void>
+}
+export const TableSearchFilter: React.FC<SearchFilterProperties> = ({
+  onSearch,
+  onStatusFilter,
+  title,
+}: SearchFilterProperties) => {
+  const [searchTerm, setSearchTerm] = useState<string>('')
+  const [statusFilter, setStatusFilter] = useState<string>('')
+
+  const handleSearch = (searchValue: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(searchValue.target.value)
+    onSearch(searchValue.target.value)
+  }
+
+  const handleStatusFilter = (
+    searchValue: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    setStatusFilter(searchValue.target.value)
+    onStatusFilter?.(searchValue.target.value)
+  }
+
+  return (
+    <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 {title}</Label>
+          <div className="relative">
+            <Input
+              type="text"
+              value={searchTerm}
+              onChange={handleSearch}
+              placeholder={`Cari Nama ${title}`}
+              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="size-5 text-[#363636]" />
+            </div>
+          </div>
+        </Field>
+      </div>
+      {onStatusFilter && (
+        // will handel if filter have dropdown status
+        <div className="w-[235px]">
+          <Field>
+            <Label className="mb-2 block text-sm font-medium">Status</Label>
+            <Select
+              value={statusFilter}
+              onChange={handleStatusFilter}
+              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>
+  )
+}

app/components/ui/table.tsx

@@ -32,9 +32,9 @@ export const UiTable: React.FC<UiTableProperties> = ({
               thead.classList.add('text-left')
             },
             paging: true,
-            searching: true,
+            searching: false,
             ordering: true,
-            info: true,
+            info: false,
             language: {
               paginate: {
                 first: renderPaginationIcon(

app/contexts/admin.tsx

@@ -19,6 +19,8 @@ type AdminContextProperties = {
   setIsUploadOpen: Dispatch<SetStateAction<TUpload>>
   uploadedFile?: string
   setUploadedFile: Dispatch<SetStateAction<string | undefined>>
+  editProfile: boolean
+  setEditProfile: Dispatch<SetStateAction<boolean>>
 }
 
 const AdminContext = createContext<AdminContextProperties | undefined>(
@@ -28,6 +30,7 @@ const AdminContext = createContext<AdminContextProperties | undefined>(
 export const AdminProvider = ({ children }: PropsWithChildren) => {
   const [isUploadOpen, setIsUploadOpen] = useState<TUpload>()
   const [uploadedFile, setUploadedFile] = useState<string | undefined>()
+  const [editProfile, setEditProfile] = useState(false)
 
   return (
     <AdminContext.Provider
@@ -36,6 +39,8 @@ export const AdminProvider = ({ children }: PropsWithChildren) => {
         setIsUploadOpen,
         uploadedFile,
         setUploadedFile,
+        editProfile,
+        setEditProfile,
       }}
     >
       {children}

app/contexts/news.tsx

@@ -7,7 +7,7 @@ import {
   type SetStateAction,
 } from 'react'
 
-import type { ModalProperties } from '~/components/popup/success-modal'
+import type { ModalProperties } from '~/components/dialog/success'
 
 type NewsContextProperties = {
   isLoginOpen: boolean

app/layouts/admin/dashboard.tsx

@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from 'react'
 
+import { DialogProfile } from './dialog-profile'
 import { DialogUpload } from './dialog-upload'
 import { Navbar } from './navbar'
 import { Sidebar } from './sidebar'
@@ -15,6 +16,7 @@ export const AdminDashboardLayout = (properties: PropsWithChildren) => {
       </div>
 
       <DialogUpload />
+      <DialogProfile />
     </div>
   )
 }

app/layouts/admin/dialog-profile.tsx

@@ -0,0 +1,126 @@
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher, useRouteLoaderData } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { InputFile } from '~/components/ui/input-file'
+import { useAdminContext } from '~/contexts/admin'
+import type { loader } from '~/routes/_admin.lg-admin'
+
+export const profileSchema = z.object({
+  name: z.string().min(1, 'Wajib diisi'),
+  email: z.string().email('Email tidak valid'),
+  profile_picture: z.string().url({
+    message: 'URL tidak valid',
+  }),
+})
+
+export type TProfileSchema = z.infer<typeof profileSchema>
+
+export const DialogProfile = () => {
+  const { editProfile, setEditProfile } = useAdminContext()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
+  const { staffData } = loaderData || {}
+  const fetcher = useFetcher()
+
+  const formMethods = useRemixForm<TProfileSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(profileSchema),
+    values: {
+      name: staffData?.name || '',
+      email: staffData?.email || '',
+      profile_picture: staffData?.profile_picture || '',
+    },
+  })
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
+    }
+
+    if (fetcher.data?.success) {
+      setEditProfile(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <Dialog
+      open={editProfile}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setEditProfile(false)
+        }
+      }}
+      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="w-full 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
+            as="h3"
+            className="text-xl font-bold"
+          >
+            Update Profile
+          </DialogTitle>
+          <RemixFormProvider {...formMethods}>
+            <fetcher.Form
+              method="post"
+              onSubmit={handleSubmit}
+              className="space-y-4"
+              action="/actions/admin/profile"
+            >
+              <Input
+                name="name"
+                id="name"
+                label="Nama"
+                placeholder="Enter your name"
+              />
+              <Input
+                id="email"
+                label="Email"
+                placeholder="Contoh: legal@legalgo.id"
+                name="email"
+              />
+              <InputFile
+                name="profile_picture"
+                id="profile_picture"
+                label="Gambar Profil"
+                placeholder="Unggah gambar profil Anda"
+                category="profile_picture"
+              />
+              <Button
+                disabled={fetcher.state !== 'idle'}
+                isLoading={fetcher.state !== 'idle'}
+                type="submit"
+                className="w-full rounded-md py-2"
+              >
+                Simpan
+              </Button>
+            </fetcher.Form>
+          </RemixFormProvider>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  )
+}

app/layouts/admin/dialog-upload.tsx

@@ -1,6 +1,7 @@
 import { Dialog, DialogBackdrop, DialogPanel, Input } from '@headlessui/react'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState, type ChangeEvent } from 'react'
+import { useEffect, type ChangeEvent } from 'react'
+import toast from 'react-hot-toast'
 import { useFetcher } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
@@ -18,7 +19,6 @@ export type TUploadSchema = z.infer<typeof uploadSchema>
 export const DialogUpload = () => {
   const { isUploadOpen, setUploadedFile, setIsUploadOpen } = useAdminContext()
   const fetcher = useFetcher()
-  const [error, setError] = useState<string>()
   const maxFileSize = 10 * 1024 // 10MB
 
   const formMethods = useRemixForm<TUploadSchema>({
@@ -30,16 +30,15 @@ export const DialogUpload = () => {
   const { handleSubmit, register, setValue } = formMethods
 
   useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    setUploadedFile(fetcher.data.uploadData.data.file_url)
-
-    setError(undefined)
+    if (fetcher.data?.success) {
+      setUploadedFile(fetcher.data.uploadData.data.file_url)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
+  }, [fetcher.data])
 
   const handleChange = async function (event: ChangeEvent<HTMLInputElement>) {
     event.preventDefault()
@@ -58,12 +57,12 @@ export const DialogUpload = () => {
     const img = new Image()
 
     if (!file.type.startsWith('image/')) {
-      setError('Please upload an image file.')
+      toast.error('Please upload an image file.')
       return
     }
 
     if (file.size > maxFileSize * 1024) {
-      setError(`File size is too big!`)
+      toast.error(`File size is too big!`)
       return
     }
 
@@ -100,7 +99,7 @@ export const DialogUpload = () => {
       <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"
+          className="w-full 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"
         >
           <RemixFormProvider {...formMethods}>
             <fetcher.Form
@@ -110,9 +109,6 @@ export const DialogUpload = () => {
               action="/actions/admin/upload"
               encType="multipart/form-data"
             >
-              {error && (
-                <div className="text-sm text-red-500 capitalize">{error}</div>
-              )}
               <Input
                 type="file"
                 id="input-file-upload"

app/layouts/admin/menu.ts

@@ -1,4 +1,5 @@
 import {
+  BriefcaseIcon,
   ChartBarSquareIcon,
   ClipboardDocumentCheckIcon,
   DocumentCurrencyDollarIcon,
@@ -7,15 +8,15 @@ import {
   PresentationChartLineIcon,
   TagIcon,
   UsersIcon,
-} from '@heroicons/react/20/solid'
-import type { SVGProps } from 'react'
+} from '@heroicons/react/24/solid'
+import type { ComponentType, SVGProps } from 'react'
 
 type TMenu = {
   group: string
   items: {
     title: string
     url: string
-    icon: React.ComponentType<SVGProps<SVGSVGElement>>
+    icon: ComponentType<SVGProps<SVGSVGElement>>
   }[]
 }
 
@@ -24,12 +25,12 @@ export const MENU: TMenu[] = [
     group: 'Menu',
     items: [
       {
-        title: 'Dashboard',
+        title: 'Dasbor',
         url: '/lg-admin',
         icon: ChartBarSquareIcon,
       },
       {
-        title: 'User',
+        title: 'Pengguna',
         url: '/lg-admin/users',
         icon: UsersIcon,
       },
@@ -39,12 +40,12 @@ export const MENU: TMenu[] = [
         icon: NewspaperIcon,
       },
       {
-        title: 'Banner Iklan',
+        title: 'Spanduk Iklan',
         url: '/lg-admin/advertisements',
         icon: MegaphoneIcon,
       },
       {
-        title: 'Subscription',
+        title: 'Pelanggan',
         url: '/lg-admin/subscriptions',
         icon: PresentationChartLineIcon,
       },
@@ -64,10 +65,15 @@ export const MENU: TMenu[] = [
         icon: TagIcon,
       },
       {
-        title: 'Subscribe Plan',
+        title: 'Paket Berlangganan',
         url: '/lg-admin/subscribe-plan',
         icon: DocumentCurrencyDollarIcon,
       },
+      {
+        title: 'Staf',
+        url: '/lg-admin/staffs',
+        icon: BriefcaseIcon,
+      },
     ],
   },
 ]

app/layouts/admin/navbar.tsx

@@ -1,16 +1,21 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+import {
+  ArrowRightStartOnRectangleIcon,
+  UserIcon,
+} from '@heroicons/react/24/outline'
+import { ChevronDownIcon } from '@heroicons/react/24/solid'
 import { Link, useFetcher, useRouteLoaderData } from 'react-router'
 
-import { ChevronIcon } from '~/components/icons/chevron'
-import { ProfileIcon } from '~/components/icons/profile'
 import { Button } from '~/components/ui/button'
 import { APP } from '~/configs/meta'
+import { useAdminContext } from '~/contexts/admin'
 import type { loader } from '~/routes/_admin.lg-admin'
 
 export const Navbar = () => {
   const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
   const { staffData } = loaderData || {}
   const fetcher = useFetcher()
+  const { setEditProfile } = useAdminContext()
 
   return (
     <div className="flex h-20 items-center justify-between border-b border-[#ECECEC] bg-white px-10 py-5">
@@ -28,39 +33,57 @@ export const Navbar = () => {
         <Popover className="relative">
           <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between rounded-xl p-2 ring-1 ring-[#707FDD]/10 hover:shadow focus:outline-none">
             <div className="flex items-center space-x-3">
-              {staffData?.profile_picture ? (
-                <img
-                  src={staffData?.profile_picture}
-                  alt={staffData?.name}
-                  className="h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
-                />
-              ) : (
-                <ProfileIcon className="h-8 w-8 rounded-full bg-[#C4C4C4]" />
-              )}
+              <img
+                src={
+                  staffData?.profile_picture ||
+                  '/images/profile-placeholder.svg'
+                }
+                onError={(event) => {
+                  event.currentTarget.src = '/images/profile-placeholder.svg'
+                }}
+                alt={staffData?.name}
+                className="size-8 rounded-full bg-[#C4C4C4] object-cover"
+              />
 
               <span className="text-sm">{staffData?.name}</span>
             </div>
-            <ChevronIcon className="opacity-50" />
+            <ChevronDownIcon className="size-4 opacity-50" />
           </PopoverButton>
           <PopoverPanel
             anchor={{ to: 'bottom', gap: '8px' }}
             transition
-            className="flex w-3xs flex-col rounded-xl border border-[#ECECEC] bg-white p-3 transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0"
+            className="flex w-3xs flex-col divide-y divide-black/5 rounded-xl border border-[#ECECEC] bg-white transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0"
           >
-            <fetcher.Form
-              method="POST"
-              action="/actions/admin/logout"
-              className="grid"
-            >
+            <div className="p-2">
               <Button
-                disabled={fetcher.state !== 'idle'}
-                isLoading={fetcher.state !== 'idle'}
-                type="submit"
-                className="w-full rounded p-1"
+                variant="secondary"
+                className="w-full justify-start rounded p-1 px-3 text-base font-bold"
+                onClick={() => {
+                  setEditProfile(true)
+                }}
               >
-                Logout
+                <UserIcon className="size-5" />
+                <span>Profile</span>
               </Button>
-            </fetcher.Form>
+            </div>
+            <div className="p-2">
+              <fetcher.Form
+                method="POST"
+                action="/actions/admin/logout"
+                className="grid"
+              >
+                <Button
+                  disabled={fetcher.state !== 'idle'}
+                  isLoading={fetcher.state !== 'idle'}
+                  type="submit"
+                  className="w-full justify-start rounded p-1 px-3 text-base font-bold"
+                  variant="secondary"
+                  icon={<ArrowRightStartOnRectangleIcon className="size-5" />}
+                >
+                  <span>Logout</span>
+                </Button>
+              </fetcher.Form>
+            </div>
           </PopoverPanel>
         </Popover>
       </div>

app/layouts/admin/sidebar.tsx

@@ -22,7 +22,7 @@ export const Sidebar = () => {
               key={`${group}-${title}`}
               className={twMerge(
                 path === url ? 'bg-[#707FDD]/10 font-bold' : '',
-                'group/menu flex h-[42px] w-[200px] items-center gap-x-3 rounded-md px-5 transition hover:bg-[#707FDD]/10 active:bg-[#707FDD]/20',
+                'group/menu flex h-[42px] w-[240px] items-center gap-x-3 rounded-md px-5 transition hover:bg-[#707FDD]/10 active:bg-[#707FDD]/20',
               )}
             >
               <Icon

app/layouts/news/banner.tsx

@@ -1,13 +1,20 @@
+import { Button } from '@headlessui/react'
 import Autoplay from 'embla-carousel-autoplay'
 import useEmblaCarousel from 'embla-carousel-react'
-import { Link, useRouteLoaderData } from 'react-router'
+import { useFetcher, useRouteLoaderData } from 'react-router'
 
 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()])
+  const [emblaReference] = useEmblaCarousel({ loop: true }, [
+    Autoplay({
+      stopOnInteraction: false,
+      stopOnMouseEnter: true,
+    }),
+  ])
+  const fetcher = useFetcher()
 
   return (
     <div className="">
@@ -17,24 +24,25 @@ export const Banner = () => {
           ref={emblaReference}
         >
           <div className="embla__container flex">
-            {adsData?.map(({ image_url: urlImage, url: link, id }, index) => (
-              <div
+            {adsData?.map(({ image_url: urlImage, url, id }, index) => (
+              <fetcher.Form
+                method="POST"
+                action={`/actions/log/ads/${id}`}
                 key={index}
                 className="embla__slide max-h-[100px] min-h-[65px] w-full min-w-0 flex-none"
               >
-                <Link
-                  to={link}
-                  className="mt-2 h-full py-2"
-                  target="_blank"
-                  rel="noopener noreferrer"
+                <Button
+                  className="h-full w-full cursor-pointer py-2"
+                  type="submit"
+                  onClick={() => window.open(url, '_blank')}
                 >
                   <img
                     src={urlImage}
                     alt={id}
                     className="h-[70px] w-[100%] object-contain object-center sm:h-full"
                   />
-                </Link>
-              </div>
+                </Button>
+              </fetcher.Form>
             ))}
           </div>
         </div>

app/layouts/news/default.tsx

@@ -1,34 +1,22 @@
 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 { DialogSuccess } from '~/components/dialog/success'
 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'
+import { DialogForgotPassword } from '~/layouts/news/dialog-forgot-password'
+import { DialogLogin } from '~/layouts/news/dialog-login'
 
+import { DialogRegister } from './dialog-register'
+import { DialogSubscribePlan } from './dialog-subscribe-plan'
 import { FooterLinks } from './footer-links'
 import { FooterNewsletter } from './footer-newsletter'
-import FormSubscription from './form-subscription'
 import { HeaderMenu } from './header-menu'
 import { HeaderTop } from './header-top'
 
 export const NewsDefaultLayout = (properties: PropsWithChildren) => {
   const { children } = properties
-  const {
-    isLoginOpen,
-    setIsLoginOpen,
-    isRegisterOpen,
-    setIsRegisterOpen,
-    isForgetOpen,
-    setIsForgetOpen,
-    isSuccessOpen,
-    setIsSuccessOpen,
-    isSubscribeOpen,
-    setIsSubscribeOpen,
-  } = useNewsContext()
+  const { isSuccessOpen, setIsSuccessOpen } = useNewsContext()
   return (
     <main className="relative min-h-dvh bg-[#ECECEC]">
       <header>
@@ -46,40 +34,11 @@ export const NewsDefaultLayout = (properties: PropsWithChildren) => {
       </footer>
 
       <Toaster />
-
-      <PopupModal
-        isOpen={isLoginOpen}
-        onClose={() => setIsLoginOpen(false)}
-        description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
-      >
-        <FormLogin />
-      </PopupModal>
-
-      <PopupModal
-        isOpen={isRegisterOpen}
-        onClose={() => setIsRegisterOpen(false)}
-        description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
-      >
-        <FormRegister />
-      </PopupModal>
-
-      <PopupModal
-        isOpen={isForgetOpen}
-        onClose={() => setIsForgetOpen(false)}
-        description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
-      >
-        <FormForgotPassword />
-      </PopupModal>
-
-      <PopupModal
-        isOpen={isSubscribeOpen}
-        onClose={() => setIsSubscribeOpen(false)}
-        description="Selamat Datang, silakan Pilih Subscription Anda untuk melanjutkan!"
-      >
-        <FormSubscription />
-      </PopupModal>
-
-      <SuccessModal
+      <DialogLogin />
+      <DialogRegister />
+      <DialogForgotPassword />
+      <DialogSubscribePlan />
+      <DialogSuccess
         isOpen={isSuccessOpen}
         onClose={() => {
           setIsSuccessOpen(undefined)

app/layouts/news/dialog-forgot-password.tsx

@@ -0,0 +1,49 @@
+import { useFetcher } from 'react-router'
+
+import { DialogNews } from '~/components/dialog/news'
+import { Button } from '~/components/ui/button'
+import { useNewsContext } from '~/contexts/news'
+
+export const DialogForgotPassword = () => {
+  const { isForgetOpen, setIsForgetOpen } = useNewsContext()
+  const fetcher = useFetcher()
+
+  return (
+    <DialogNews
+      isOpen={isForgetOpen}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setIsForgetOpen(false)
+        }
+      }}
+      description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
+    >
+      <div className="flex flex-col items-center justify-center">
+        <div className="w-full max-w-md">
+          <form>
+            {/* Input Email / No Telepon */}
+            <div className="mb-4">
+              <label
+                htmlFor="email"
+                className="mb-1 block text-gray-700"
+              >
+                Email/No. Telepon
+              </label>
+              <input
+                type="text"
+                placeholder="Contoh: legal@legalgo.id"
+                className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
+                required
+              />
+            </div>
+
+            {/* Tombol Masuk */}
+            <Button className="mt-5 w-full rounded-md py-2">
+              Reset Password
+            </Button>
+          </form>
+        </div>
+      </div>
+    </DialogNews>
+  )
+}

app/layouts/news/dialog-login.tsx

@@ -0,0 +1,131 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import { DialogNews } from '~/components/dialog/news'
+import { Button } from '~/components/ui/button'
+import { Input } from '~/components/ui/input'
+import { useNewsContext } from '~/contexts/news'
+
+export const loginSchema = z.object({
+  email: z.string().email('Email tidak valid'),
+  password: z.string().min(6, 'Minimal 6 karakter'),
+})
+
+export type TLoginSchema = z.infer<typeof loginSchema>
+
+export const DialogLogin = () => {
+  const {
+    setIsRegisterOpen,
+    setIsLoginOpen,
+    setIsForgetOpen,
+    setIsSubscribeOpen,
+    isLoginOpen,
+  } = useNewsContext()
+  const fetcher = useFetcher()
+
+  const formMethods = useRemixForm<TLoginSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(loginSchema),
+  })
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
+      return
+    }
+
+    if (fetcher.data?.success) {
+      setIsLoginOpen(false)
+    }
+
+    if (fetcher.data?.user.subscribe?.subscribe_plan?.code === 'basic') {
+      setIsSubscribeOpen(true)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <DialogNews
+      isOpen={isLoginOpen}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setIsLoginOpen(false)
+        }
+      }}
+      description="Selamat Datang, silakan daftarkan akun Anda untuk melanjutkan!"
+    >
+      <div className="flex items-center justify-center">
+        <div className="w-full max-w-md">
+          <RemixFormProvider {...formMethods}>
+            <fetcher.Form
+              method="post"
+              onSubmit={handleSubmit}
+              className="space-y-4"
+              action="/actions/login"
+            >
+              <Input
+                id="email"
+                label="Email"
+                placeholder="Contoh: legal@legalgo.id"
+                name="email"
+              />
+
+              <Input
+                id="password"
+                label="Kata Sandi"
+                placeholder="Masukkan Kata Sandi"
+                name="password"
+                type="password"
+              />
+
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-600">Lupa Kata Sandi?</span>
+                <Button
+                  onClick={() => {
+                    setIsLoginOpen(false)
+                    setIsForgetOpen(true)
+                  }}
+                  variant="link"
+                  size="fit"
+                >
+                  Reset Kata Sandi
+                </Button>
+              </div>
+
+              <Button
+                isLoading={fetcher.state !== 'idle'}
+                disabled={fetcher.state !== 'idle'}
+                type="submit"
+                className="w-full rounded-md py-2"
+              >
+                Masuk
+              </Button>
+            </fetcher.Form>
+          </RemixFormProvider>
+
+          {/* Link Daftar */}
+          <div className="mt-4 text-center text-sm">
+            Belum punya akun?{' '}
+            <Button
+              onClick={() => {
+                setIsLoginOpen(false)
+                setIsRegisterOpen(true)
+              }}
+              variant="link"
+              size="fit"
+            >
+              Daftar Disini
+            </Button>
+          </div>
+        </div>
+      </div>
+    </DialogNews>
+  )
+}

app/layouts/news/dialog-register.tsx

@@ -0,0 +1,159 @@
+import { DevTool } from '@hookform/devtools'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher, useRouteLoaderData } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import { DialogNews } from '~/components/dialog/news'
+import { Button } from '~/components/ui/button'
+import { Combobox } from '~/components/ui/combobox'
+import { Input } from '~/components/ui/input'
+import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_news'
+
+export const registerSchema = z
+  .object({
+    email: z.string().email('Email tidak valid'),
+    password: z.string().min(6, 'Minimal 6 karakter'),
+    rePassword: z.string().min(6, 'Minimal 6 karakter'),
+    phone: z.string().min(10, 'No telepon tidak valid'),
+    subscribe_plan: z
+      .object({
+        id: z.string(),
+        code: z.string(),
+        name: z.string(),
+      })
+      .optional()
+      .nullable()
+      .refine((data) => !!data, {
+        message: 'Pilih paket berlangganan',
+      }),
+  })
+  .refine((field) => field.password === field.rePassword, {
+    message: 'Kata sandi tidak sama',
+    path: ['rePassword'],
+  })
+
+export type TRegisterSchema = z.infer<typeof registerSchema>
+
+export const DialogRegister = () => {
+  const {
+    setIsLoginOpen,
+    setIsRegisterOpen,
+    setIsSuccessOpen,
+    isRegisterOpen,
+  } = useNewsContext()
+  const fetcher = useFetcher()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { subscribePlanData: subscribePlan } = loaderData || {}
+
+  const formMethods = useRemixForm<TRegisterSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(registerSchema),
+  })
+
+  const { handleSubmit, control } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
+    }
+
+    if (fetcher.data?.success) {
+      setIsRegisterOpen(false)
+      setIsSuccessOpen('register')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <DialogNews
+      isOpen={isRegisterOpen}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setIsRegisterOpen(false)
+        }
+      }}
+      description="Selamat Datang, silakan isi keterangan akun Anda untuk melanjutkan!"
+    >
+      <div className="flex flex-col items-center justify-center">
+        <div className="w-full max-w-md">
+          <RemixFormProvider {...formMethods}>
+            <fetcher.Form
+              method="post"
+              onSubmit={handleSubmit}
+              className="space-y-4"
+              action="/actions/register"
+            >
+              <Input
+                id="email"
+                label="Email"
+                placeholder="Contoh: legal@legalgo.id"
+                name="email"
+              />
+
+              <Input
+                id="password"
+                label="Kata Sandi"
+                placeholder="Masukkan Kata Sandi"
+                name="password"
+                type="password"
+              />
+
+              <Input
+                id="re-password"
+                label="Ulangi Kata Sandi"
+                placeholder="Masukkan Kata Sandi"
+                name="rePassword"
+                type="password"
+              />
+
+              <Input
+                id="phone"
+                label="No. Telepon"
+                placeholder="Masukkan No. Telepon"
+                name="phone"
+              />
+
+              <Combobox
+                id="subscribe_plan"
+                name="subscribe_plan"
+                label="Paket Berlangganan"
+                placeholder="Pilih Paket Berlangganan"
+                options={subscribePlan}
+              />
+
+              <Button
+                isLoading={fetcher.state !== 'idle'}
+                disabled={fetcher.state !== 'idle'}
+                type="submit"
+                className="w-full rounded-md py-2"
+              >
+                Daftar
+              </Button>
+            </fetcher.Form>
+          </RemixFormProvider>
+
+          {/* Link Login */}
+          <div className="mt-4 text-center text-sm">
+            Sudah punya akun?{' '}
+            <Button
+              onClick={() => {
+                setIsLoginOpen(true)
+                setIsRegisterOpen(false)
+              }}
+              variant="link"
+              size="fit"
+            >
+              Masuk Disini
+            </Button>
+          </div>
+        </div>
+        <DevTool control={control} />
+      </div>
+    </DialogNews>
+  )
+}

app/layouts/news/dialog-subscribe-plan.tsx

@@ -0,0 +1,96 @@
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect } from 'react'
+import toast from 'react-hot-toast'
+import { useFetcher, useRouteLoaderData } from 'react-router'
+import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
+import { z } from 'zod'
+
+import { DialogNews } from '~/components/dialog/news'
+import { Button } from '~/components/ui/button'
+import { Combobox } from '~/components/ui/combobox'
+import { useNewsContext } from '~/contexts/news'
+import type { loader } from '~/routes/_news'
+
+export const subscribeSchema = z.object({
+  subscribe_plan: z
+    .object({
+      id: z.string(),
+      code: z.string(),
+      name: z.string(),
+    })
+    .optional()
+    .nullable()
+    .refine((data) => !!data, {
+      message: 'Silakan pilih paket berlangganan',
+    }),
+})
+
+export type TSubscribeSchema = z.infer<typeof subscribeSchema>
+
+export const DialogSubscribePlan = () => {
+  const { setIsSubscribeOpen, setIsSuccessOpen, isSubscribeOpen } =
+    useNewsContext()
+  const fetcher = useFetcher()
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
+  const { subscribePlanData: subscribePlan } = loaderData || {}
+
+  const formMethods = useRemixForm<TSubscribeSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(subscribeSchema),
+  })
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
+    }
+
+    if (fetcher.data?.success) {
+      setIsSubscribeOpen(false)
+      setIsSuccessOpen('payment')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <DialogNews
+      isOpen={isSubscribeOpen}
+      onClose={() => {
+        if (fetcher.state === 'idle') {
+          setIsSubscribeOpen(false)
+        }
+      }}
+      description="Selamat Datang, silakan Pilih Paket Berlangganan Anda untuk melanjutkan!"
+    >
+      <div className="flex flex-col items-center justify-center">
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
+            className="w-full max-w-md"
+            action="/actions/subscribe"
+          >
+            <Combobox
+              id="subscribe_plan"
+              name="subscribe_plan"
+              label="Paket Berlangganan"
+              placeholder="Pilih Paket Berlangganan"
+              options={subscribePlan}
+            />
+
+            <Button
+              isLoading={fetcher.state !== 'idle'}
+              disabled={fetcher.state !== 'idle'}
+              type="submit"
+              className="mt-5 w-full rounded-md py-2"
+            >
+              Lanjutkan
+            </Button>
+          </fetcher.Form>
+        </RemixFormProvider>
+      </div>
+    </DialogNews>
+  )
+}

app/layouts/news/footer-newsletter.tsx

@@ -34,7 +34,7 @@ export const FooterNewsletter = () => {
           />
           <Button
             type="submit"
-            variant="newsPrimaryOutline"
+            variant="primaryOutline"
             size="block"
           >
             Subscribe

app/layouts/news/form-forgot-password.tsx

@@ -1,32 +0,0 @@
-import { Button } from '~/components/ui/button'
-
-export const FormForgotPassword = () => {
-  return (
-    <div className="flex flex-col items-center justify-center">
-      <div className="w-full max-w-md">
-        <form>
-          {/* Input Email / No Telepon */}
-          <div className="mb-4">
-            <label
-              htmlFor="email"
-              className="mb-1 block text-gray-700"
-            >
-              Email/No. Telepon
-            </label>
-            <input
-              type="text"
-              placeholder="Contoh: legal@legalgo.id"
-              className="focus:inheriten w-full rounded-md border border-[#DFDFDF] p-2"
-              required
-            />
-          </div>
-
-          {/* Tombol Masuk */}
-          <Button className="mt-5 w-full rounded-md py-2">
-            Reset Password
-          </Button>
-        </form>
-      </div>
-    </div>
-  )
-}

app/layouts/news/form-login.tsx

@@ -1,122 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
-import { useFetcher } from 'react-router'
-import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/components/ui/button'
-import { Input } from '~/components/ui/input'
-import { useNewsContext } from '~/contexts/news'
-
-export const loginSchema = z.object({
-  email: z.string().email('Email tidak valid'),
-  password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
-})
-
-export type TLoginSchema = z.infer<typeof loginSchema>
-
-export const FormLogin = () => {
-  const {
-    setIsRegisterOpen,
-    setIsLoginOpen,
-    setIsForgetOpen,
-    setIsSubscribeOpen,
-  } = useNewsContext()
-  const fetcher = useFetcher()
-  const [error, setError] = useState<string>()
-
-  const formMethods = useRemixForm<TLoginSchema>({
-    mode: 'onSubmit',
-    fetcher,
-    resolver: zodResolver(loginSchema),
-  })
-
-  const { handleSubmit } = formMethods
-
-  useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
-      return
-    }
-
-    setError(undefined)
-    setIsLoginOpen(false)
-
-    if (fetcher.data?.user.subscribe_plan_code === 'basic') {
-      setIsSubscribeOpen(true)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
-
-  return (
-    <div className="flex items-center justify-center">
-      <div className="w-full max-w-md">
-        <RemixFormProvider {...formMethods}>
-          <fetcher.Form
-            method="post"
-            onSubmit={handleSubmit}
-            className="space-y-4"
-            action="/actions/login"
-          >
-            <Input
-              id="email"
-              label="Email"
-              placeholder="Contoh: legal@legalgo.id"
-              name="email"
-            />
-
-            <Input
-              id="password"
-              label="Kata Sandi"
-              placeholder="Masukkan Kata Sandi"
-              name="password"
-              type="password"
-            />
-
-            {error && (
-              <div className="text-sm text-red-500 capitalize">{error}</div>
-            )}
-
-            <div className="flex items-center justify-between text-sm">
-              <span className="text-gray-600">Lupa Kata Sandi?</span>
-              <Button
-                onClick={() => {
-                  setIsLoginOpen(false)
-                  setIsForgetOpen(true)
-                }}
-                variant="link"
-                size="fit"
-              >
-                Reset Kata Sandi
-              </Button>
-            </div>
-
-            <Button
-              isLoading={fetcher.state !== 'idle'}
-              disabled={fetcher.state !== 'idle'}
-              type="submit"
-              className="w-full rounded-md py-2"
-            >
-              Masuk
-            </Button>
-          </fetcher.Form>
-        </RemixFormProvider>
-
-        {/* Link Daftar */}
-        <div className="mt-4 text-center text-sm">
-          Belum punya akun?{' '}
-          <Button
-            onClick={() => {
-              setIsLoginOpen(false)
-              setIsRegisterOpen(true)
-            }}
-            variant="link"
-            size="fit"
-          >
-            Daftar Disini
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}

app/layouts/news/form-register.tsx

@@ -1,148 +0,0 @@
-import { DevTool } from '@hookform/devtools'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
-import { useFetcher, useRouteLoaderData } from 'react-router'
-import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/components/ui/button'
-import { Combobox } from '~/components/ui/combobox'
-import { Input } from '~/components/ui/input'
-import { useNewsContext } from '~/contexts/news'
-import type { loader } from '~/routes/_news'
-
-export const registerSchema = z
-  .object({
-    email: z.string().email('Email tidak valid'),
-    password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
-    rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
-    phone: z.string().min(10, 'No telepon tidak valid'),
-    subscribe_plan: z
-      .object({
-        id: z.string(),
-        code: z.string(),
-        name: z.string(),
-      })
-      .optional()
-      .nullable()
-      .refine((data) => !!data, {
-        message: 'Please select a subscription',
-      }),
-  })
-  .refine((field) => field.password === field.rePassword, {
-    message: 'Kata sandi tidak sama',
-    path: ['rePassword'],
-  })
-
-export type TRegisterSchema = z.infer<typeof registerSchema>
-
-export const FormRegister = () => {
-  const { setIsLoginOpen, setIsRegisterOpen, setIsSuccessOpen } =
-    useNewsContext()
-  const [error, setError] = useState<string>()
-  const fetcher = useFetcher()
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const { subscriptionsData: subscriptions } = loaderData || {}
-
-  const formMethods = useRemixForm<TRegisterSchema>({
-    mode: 'onSubmit',
-    fetcher,
-    resolver: zodResolver(registerSchema),
-  })
-
-  const { handleSubmit, control } = formMethods
-
-  useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
-      return
-    }
-
-    setError(undefined)
-    setIsRegisterOpen(false)
-    setIsSuccessOpen('register')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
-
-  return (
-    <div className="flex flex-col items-center justify-center">
-      <div className="w-full max-w-md">
-        <RemixFormProvider {...formMethods}>
-          <fetcher.Form
-            method="post"
-            onSubmit={handleSubmit}
-            className="space-y-4"
-            action="/actions/register"
-          >
-            <Input
-              id="email"
-              label="Email"
-              placeholder="Contoh: legal@legalgo.id"
-              name="email"
-            />
-
-            <Input
-              id="password"
-              label="Kata Sandi"
-              placeholder="Masukkan Kata Sandi"
-              name="password"
-              type="password"
-            />
-
-            <Input
-              id="re-password"
-              label="Ulangi Kata Sandi"
-              placeholder="Masukkan Kata Sandi"
-              name="rePassword"
-              type="password"
-            />
-
-            <Input
-              id="phone"
-              label="No. Telepon"
-              placeholder="Masukkan No. Telepon"
-              name="phone"
-            />
-
-            <Combobox
-              id="subscribe_plan"
-              name="subscribe_plan"
-              label="Subscription"
-              placeholder="Pilih Subscription"
-              options={subscriptions}
-            />
-
-            {error && (
-              <div className="text-sm text-red-500 capitalize">{error}</div>
-            )}
-
-            <Button
-              isLoading={fetcher.state !== 'idle'}
-              disabled={fetcher.state !== 'idle'}
-              type="submit"
-              className="w-full rounded-md py-2"
-            >
-              Daftar
-            </Button>
-          </fetcher.Form>
-        </RemixFormProvider>
-
-        {/* Link Login */}
-        <div className="mt-4 text-center text-sm">
-          Sudah punya akun?{' '}
-          <Button
-            onClick={() => {
-              setIsLoginOpen(true)
-              setIsRegisterOpen(false)
-            }}
-            variant="link"
-            size="fit"
-          >
-            Masuk Disini
-          </Button>
-        </div>
-      </div>
-      <DevTool control={control} />
-    </div>
-  )
-}

app/layouts/news/form-subscription.tsx

@@ -1,88 +0,0 @@
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useEffect, useState } from 'react'
-import { useFetcher, useRouteLoaderData } from 'react-router'
-import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
-import { z } from 'zod'
-
-import { Button } from '~/components/ui/button'
-import { Combobox } from '~/components/ui/combobox'
-import { useNewsContext } from '~/contexts/news'
-import type { loader } from '~/routes/_news'
-
-export const subscribeSchema = z.object({
-  subscribe_plan: z
-    .object({
-      id: z.string(),
-      code: z.string(),
-      name: z.string(),
-    })
-    .optional()
-    .nullable()
-    .refine((data) => !!data, {
-      message: 'Please select a subscription',
-    }),
-})
-
-export type TSubscribeSchema = z.infer<typeof subscribeSchema>
-
-export default function FormSubscription() {
-  const { setIsSubscribeOpen, setIsSuccessOpen } = useNewsContext()
-  const fetcher = useFetcher()
-  const [error, setError] = useState<string>()
-  const loaderData = useRouteLoaderData<typeof loader>('routes/_news')
-  const { subscriptionsData: subscriptions } = loaderData || {}
-
-  const formMethods = useRemixForm<TSubscribeSchema>({
-    mode: 'onSubmit',
-    fetcher,
-    resolver: zodResolver(subscribeSchema),
-  })
-
-  const { handleSubmit } = formMethods
-
-  useEffect(() => {
-    if (!fetcher.data?.success) {
-      setError(fetcher.data?.message)
-      return
-    }
-
-    setError(undefined)
-    setIsSubscribeOpen(false)
-    setIsSuccessOpen('payment')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetcher])
-
-  return (
-    <div className="flex flex-col items-center justify-center">
-      <RemixFormProvider {...formMethods}>
-        <fetcher.Form
-          method="post"
-          onSubmit={handleSubmit}
-          className="w-full max-w-md"
-          action="/actions/subscribe"
-        >
-          <Combobox
-            id="subscribe_plan"
-            name="subscribe_plan"
-            label="Subscription"
-            placeholder="Pilih Subscription"
-            options={subscriptions}
-          />
-
-          {error && (
-            <div className="text-sm text-red-500 capitalize">{error}</div>
-          )}
-
-          <Button
-            isLoading={fetcher.state !== 'idle'}
-            disabled={fetcher.state !== 'idle'}
-            type="submit"
-            className="mt-5 w-full rounded-md py-2"
-          >
-            Lanjutkan
-          </Button>
-        </fetcher.Form>
-      </RemixFormProvider>
-    </div>
-  )
-}

app/layouts/news/header-menu-mobile.tsx

@@ -13,7 +13,7 @@ type THeaderMenuMobile = {
   menu?: TCategoriesResponse['data']
 }
 
-export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
+export const HeaderMenuMobile = (properties: THeaderMenuMobile) => {
   const { menu } = properties
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const { setIsLoginOpen } = useNewsContext()
@@ -37,7 +37,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
             {/* Tombol Close */}
             <button
               onClick={handleToggleMenu}
-              className="fixed top-5 right-5 z-20 flex h-9 w-9 items-center justify-center lg:hidden"
+              className="fixed top-5 right-5 z-20 flex size-9 items-center justify-center lg:hidden"
             >
               <CloseIcon
                 width={50}
@@ -70,7 +70,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
                   action="/actions/logout"
                 >
                   <Button
-                    variant="newsSecondary"
+                    variant="outline"
                     className="w-full px-[35px] py-3 text-center sm:hidden"
                     type="submit"
                   >
@@ -79,7 +79,7 @@ export default function HeaderMenuMobile(properties: THeaderMenuMobile) {
                 </fetcher.Form>
               ) : (
                 <Button
-                  variant="newsSecondary"
+                  variant="outline"
                   className="w-full px-[35px] py-3 text-center sm:hidden"
                   onClick={() => {
                     setIsMenuOpen(false)

app/layouts/news/header-menu.tsx

@@ -1,7 +1,7 @@
 import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
-import HeaderMenuMobile from '~/layouts/news/header-menu-mobile'
+import { HeaderMenuMobile } from '~/layouts/news/header-menu-mobile'
 import type { loader } from '~/routes/_news'
 
 import { HeaderSearch } from './header-search'

app/layouts/news/header-search.tsx

@@ -3,11 +3,16 @@ import { Button } from '~/components/ui/button'
 
 export const HeaderSearch = () => {
   return (
-    <form className="flex flex-1 justify-between gap-[15px] px-[35px]">
+    <form
+      className="flex flex-1 justify-between gap-[15px] px-[35px]"
+      method="get"
+      action="/search"
+    >
       <input
         placeholder="Cari..."
         className="flex-1 text-xl placeholder:text-white focus:ring-0 focus:outline-none"
         size={1}
+        name="q"
       />
       <Button
         type="submit"

app/layouts/news/header-top.tsx

@@ -23,9 +23,9 @@ export const HeaderTop = () => {
           className="h-3/4 w-auto sm:h-full"
         />
       </Link>
-      <div className="hidden h-full items-center py-1.5 text-2xl font-light whitespace-pre-line sm:flex">
+      <h1 className="hidden h-full items-center py-1.5 text-4xl font-extrabold whitespace-pre-line text-[#2E2F7C] uppercase sm:flex">
         {APP.description}
-      </div>
+      </h1>
       <div className="flex items-center gap-[15px]">
         {userData ? (
           <fetcher.Form
@@ -33,7 +33,7 @@ export const HeaderTop = () => {
             action="/actions/logout"
           >
             <Button
-              variant="newsSecondary"
+              variant="outline"
               className="hidden sm:flex"
               type="submit"
               disabled={fetcher.state !== 'idle'}
@@ -44,7 +44,7 @@ export const HeaderTop = () => {
           </fetcher.Form>
         ) : (
           <Button
-            variant="newsSecondary"
+            variant="outline"
             className="hidden sm:block"
             onClick={() => setIsLoginOpen(true)}
           >

app/layouts/news/menu.ts

@@ -39,7 +39,7 @@ export const FOOTER_MENU: TFooterMenu[] = [
         url: '/support',
       },
       {
-        title: 'Rquest Topic',
+        title: 'Request Topic',
         url: '/request-topic',
       },
     ],

app/libs/http-server.ts

@@ -2,10 +2,14 @@ import xior, { merge } from 'xior'
 
 const baseURL = import.meta.env.VITE_API_URL
 
-export type THttpServer = { accessToken?: string }
+export type THttpServer = {
+  accessToken?: string
+  ipAddress?: string | null
+  userAgent?: string | null
+}
 
 export const HttpServer = (parameters?: THttpServer) => {
-  const { accessToken } = parameters || {}
+  const { accessToken, ipAddress, userAgent } = parameters || {}
   const instance = xior.create({
     baseURL,
   })
@@ -16,6 +20,8 @@ export const HttpServer = (parameters?: THttpServer) => {
     return merge(config, {
       headers: {
         ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+        ...(ipAddress && { 'X-Ip-Address': ipAddress }),
+        ...(userAgent && { 'X-User-Agent': userAgent }),
       },
     })
   })

app/pages/dashboard-advertisements/index.tsx

@@ -2,19 +2,19 @@ import {
   PencilSquareIcon,
   PlusIcon,
   TrashIcon,
-} from '@heroicons/react/20/solid'
+} from '@heroicons/react/24/solid'
 import type { ConfigColumns } from 'datatables.net-dt'
 import type { DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TAdResponse } from '~/apis/common/get-ads'
+import { DialogDelete } from '~/components/dialog/delete'
 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.advertisements._index'
-
-import { DialogDelete } from './dialog-delete'
+import { formatDate, formatNumberWithPeriods } from '~/utils/formatter'
 
 export const AdvertisementsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
@@ -38,7 +38,25 @@ export const AdvertisementsPage = () => {
     { title: 'Banner', data: 'image_url' },
     { title: 'Link', data: 'url' },
     {
-      title: 'Action',
+      title: 'Tanggal Mulai',
+      data: 'start_date',
+      render: (data: string) => {
+        return formatDate(data)
+      },
+    },
+    {
+      title: 'Tanggal Berakhir',
+      data: 'end_date',
+      render: (data: string) => {
+        return formatDate(data)
+      },
+    },
+    {
+      title: 'Jumlah Klik',
+      data: 'clicked',
+    },
+    {
+      title: 'Tindakan',
       data: 'id',
     },
   ]
@@ -52,25 +70,25 @@ export const AdvertisementsPage = () => {
         />
       )
     },
-    3: (value: string, _type: unknown, data: TAdResponse) => (
+    5: (value: number) => formatNumberWithPeriods(value),
+    6: (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"
+          title="Update Spanduk Iklan"
         >
-          <PencilSquareIcon className="h-4 w-4" />
+          <PencilSquareIcon className="size-4" />
         </Button>
         <Button
           type="button"
           size="icon"
-          variant="newsDanger"
+          variant="danger"
           onClick={() => setSelectedAds(data)}
-          title="Hapus Banner Iklan"
+          title="Hapus Spanduk Iklan"
         >
-          <TrashIcon className="h-4 w-4" />
+          <TrashIcon className="size-4" />
         </Button>
       </div>
     ),
@@ -78,7 +96,7 @@ export const AdvertisementsPage = () => {
 
   return (
     <div className="relative">
-      <TitleDashboard title="Banner Iklan" />
+      <TitleDashboard title="Spanduk Iklan" />
 
       <div className="mb-8 flex items-end justify-between gap-5">
         <div className="flex-1">{/* TODO: Filter */}</div>
@@ -86,22 +104,39 @@ export const AdvertisementsPage = () => {
           as={Link}
           to="/lg-admin/advertisements/create"
           size="lg"
+          className="text-md h-[42px] px-4"
         >
-          <PlusIcon className="h-8 w-8" /> Buat Banner Iklan
+          <PlusIcon className="size-8" /> Buat Spanduk Iklan
         </Button>
       </div>
 
       <UiTable
-        data={dataTable}
+        data={dataTable || []}
         columns={dataColumns}
         slots={dataSlot}
-        title="Daftar Banner Iklan"
+        title="Daftar Spanduk Iklan"
       />
 
       <DialogDelete
-        selectedAds={selectedAds}
-        setSelectedAds={setSelectedAds}
-      />
+        selectedId={selectedAds?.id}
+        close={() => setSelectedAds(undefined)}
+        title="Spanduk iklan"
+        fetcherAction={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
+      >
+        <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>
+      </DialogDelete>
     </div>
   )
 }

app/pages/dashboard-categories/index.tsx

@@ -1,8 +1,15 @@
+import {
+  PencilSquareIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/24/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
+import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
+import { DialogDelete } from '~/components/dialog/delete'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
@@ -12,7 +19,7 @@ export const CategoriesPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard',
   )
-
+  const [selectedCategory, setSelectedCategory] = useState<TCategoryResponse>()
   DataTable.use(DT)
   const dataTable =
     loaderData?.categoriesData?.sort((a, b) => {
@@ -44,7 +51,7 @@ export const CategoriesPage = () => {
       data: 'description',
     },
     {
-      title: 'Action',
+      title: 'Tindakan',
       data: 'id',
     },
   ]
@@ -55,15 +62,30 @@ export const CategoriesPage = () => {
         <pre className="text-sm text-[#7C7C7C]">Kode: {data.code}</pre>
       </div>
     ),
-    3: (value: string) => (
-      <Button
-        as="a"
-        href={`/lg-admin/categories/update/${value}`}
-        className="text-md rounded-md"
-        size="sm"
-      >
-        Update Kategori
-      </Button>
+    3: (value: string, _type: unknown, data: TCategoryResponse) => (
+      <div className="flex space-x-2">
+        <Button
+          as="a"
+          href={`/lg-admin/categories/update/${value}`}
+          size="icon"
+          title="Update Kategori"
+        >
+          <PencilSquareIcon className="size-4" />
+        </Button>
+        {data.code === 'spotlight' ? (
+          ''
+        ) : (
+          <Button
+            type="button"
+            size="icon"
+            variant="danger"
+            onClick={() => setSelectedCategory(data)}
+            title="Hapus Kategori"
+          >
+            <TrashIcon className="size-4" />
+          </Button>
+        )}
+      </div>
     ),
   }
   const dataOptions: Config = {
@@ -81,10 +103,10 @@ export const CategoriesPage = () => {
         <Button
           as={Link}
           to="/lg-admin/categories/create"
-          className="text-md h-[42px] rounded-md"
           size="lg"
+          className="text-md h-[42px] px-4"
         >
-          Buat Kategori
+          <PlusIcon className="size-8" /> Buat Kategori
         </Button>
       </div>
 
@@ -95,6 +117,15 @@ export const CategoriesPage = () => {
         slots={dataSlot}
         title="Daftar Kategori"
       />
+
+      <DialogDelete
+        selectedId={selectedCategory?.id}
+        close={() => setSelectedCategory(undefined)}
+        title="Kategori"
+        fetcherAction={`/actions/admin/categories/delete/${selectedCategory?.id}`}
+      >
+        <p>{selectedCategory?.name}</p>
+      </DialogDelete>
     </div>
   )
 }

app/pages/dashboard-contents/index.tsx

@@ -1,21 +1,28 @@
+import {
+  PencilSquareIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/24/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
+import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
-import type { TAuthor } from '~/apis/common/get-news'
+import type { TAuthorResponse, TNewsResponse } from '~/apis/common/get-news'
 import type { TTagResponse } from '~/apis/common/get-tags'
+import { DialogDelete } from '~/components/dialog/delete'
 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.contents._index'
-import { formatDate } from '~/utils/formatter'
+import { formatDate, formatNumberWithPeriods } from '~/utils/formatter'
 
 export const ContentsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.contents._index',
   )
-
+  const [selectedContent, setSelectedContent] = useState<TNewsResponse>()
   DataTable.use(DT)
   const dataTable =
     loaderData?.newsData?.sort(
@@ -34,7 +41,7 @@ export const ContentsPage = () => {
       },
     },
     {
-      title: 'Tanggal Live',
+      title: 'Mulai Tayang',
       data: 'live_at',
     },
     {
@@ -48,28 +55,36 @@ export const ContentsPage = () => {
     },
     { title: 'Tag', data: 'tags' },
     {
-      title: 'Subscription',
+      title: 'Tipe Langganan',
       data: 'is_premium',
     },
     {
-      title: 'Action',
-      data: 'slug',
+      title: 'Jumlah Penayangan',
+      data: 'views',
+    },
+    {
+      title: 'Tindakan',
+      data: 'id',
     },
   ]
   const dataSlot: DataTableSlots = {
     1: (value: string) => formatDate(value),
-    2: (value: TAuthor) => (
-      <div>
+    2: (value: TAuthorResponse) => (
+      <>
         <div>{value.name}</div>
-        <div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
-      </div>
+        <div className="text-xs text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
+      </>
     ),
     3: (value: string) => <span className="text-sm">{value}</span>,
     4: (value: TCategoryResponse[]) => (
-      <div className="text-xs">{value.map((item) => item.name).join(', ')}</div>
+      <span className="text-xs">
+        {value.map((item) => item.name).join(', ')}
+      </span>
     ),
     5: (value: TTagResponse[]) => (
-      <div className="text-xs">{value.map((item) => item.name).join(', ')}</div>
+      <span className="text-xs">
+        {value.map((item) => item.name).join(', ')}
+      </span>
     ),
     6: (value: string) =>
       value ? (
@@ -78,18 +93,30 @@ export const ContentsPage = () => {
         </div>
       ) : (
         <div className="rounded-full bg-[#F5F5F5] px-2 text-center text-[#4C5CA0]">
-          Normal
+          Biasa
         </div>
       ),
-    7: (value: string) => (
-      <Button
-        as="a"
-        href={`/lg-admin/contents/update/${encodeURIComponent(value)}`}
-        className="text-md rounded-md"
-        size="sm"
-      >
-        Update Artikel
-      </Button>
+    7: (value: number) => formatNumberWithPeriods(value),
+    8: (value: string, _type: unknown, data: TNewsResponse) => (
+      <div className="flex space-x-2">
+        <Button
+          as="a"
+          href={`/lg-admin/contents/update/${encodeURIComponent(value)}`}
+          size="icon"
+          title="Update Artikel"
+        >
+          <PencilSquareIcon className="size-4" />
+        </Button>
+        <Button
+          type="button"
+          size="icon"
+          variant="danger"
+          onClick={() => setSelectedContent(data)}
+          title="Hapus Artikel"
+        >
+          <TrashIcon className="size-4" />
+        </Button>
+      </div>
     ),
   }
   const dataOptions: Config = {
@@ -107,10 +134,10 @@ export const ContentsPage = () => {
         <Button
           as={Link}
           to="/lg-admin/contents/create"
-          className="text-md h-[42px] rounded-md"
           size="lg"
+          className="text-md h-[42px] px-4"
         >
-          Buat Artikel
+          <PlusIcon className="size-8" /> Buat Artikel
         </Button>
       </div>
 
@@ -121,6 +148,15 @@ export const ContentsPage = () => {
         options={dataOptions}
         title="Daftar Artikel"
       />
+
+      <DialogDelete
+        selectedId={selectedContent?.id}
+        close={() => setSelectedContent(undefined)}
+        title="Artikel"
+        fetcherAction={`/actions/admin/contents/delete/${selectedContent?.id}`}
+      >
+        <p>{selectedContent?.title}</p>
+      </DialogDelete>
     </div>
   )
 }

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

@@ -1,108 +0,0 @@
-import DT from 'datatables.net-dt'
-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>(
-    'routes/_admin.lg-admin._dashboard.subscribe-plan._index',
-  )
-
-  DataTable.use(DT)
-  const { subscriptionsData: dataTable } = loaderData || {}
-
-  const dataColumns = [
-    {
-      title: 'No',
-      render: (
-        _data: unknown,
-        _type: unknown,
-        _row: unknown,
-        meta: { row: number },
-      ) => {
-        return meta.row + 1
-      },
-    },
-    {
-      title: 'Nama',
-      data: 'name',
-    },
-    {
-      title: 'Kode',
-      data: 'code',
-    },
-    {
-      title: 'Length',
-      data: 'length',
-    },
-    {
-      title: 'Price',
-      data: 'price',
-    },
-    {
-      title: 'Status',
-      data: 'status',
-    },
-    {
-      title: 'Action',
-      data: 'id',
-    },
-  ]
-  const dataSlot = {
-    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}`}
-        className="text-md rounded-md"
-        size="sm"
-      >
-        Update Subscribe Plan
-      </Button>
-    ),
-  }
-  return (
-    <div className="relative">
-      <TitleDashboard title="Subscribe Plan" />
-      <div className="mb-8 flex items-end justify-between">
-        <div className="flex-1">{/* TODO: Filter */}</div>
-        <Button
-          as={Link}
-          to="/lg-admin/subscribe-plan/create"
-          className="text-md h-[42px] rounded-md"
-          size="lg"
-        >
-          Buat Subscribe Plan
-        </Button>
-      </div>
-
-      <UiTable
-        data={dataTable || []}
-        columns={dataColumns}
-        slots={dataSlot}
-        options={{
-          paging: true,
-          searching: true,
-          ordering: true,
-          info: true,
-        }}
-        title=" Daftar Subscribe Plan"
-      />
-    </div>
-  )
-}

app/pages/dashboard-staffs/index.tsx

@@ -0,0 +1,84 @@
+import { PlusIcon } from '@heroicons/react/24/solid'
+import DT, { type ConfigColumns } from 'datatables.net-dt'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
+import { Link, useRouteLoaderData } from 'react-router'
+
+import type { TStaffResponse } from '~/apis/admin/get-staffs'
+import { Button } from '~/components/ui/button'
+import { UiTable } from '~/components/ui/table'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+import type { loader } from '~/routes/_admin.lg-admin._dashboard.staffs._index'
+
+export const StaffsPage = () => {
+  const loaderData = useRouteLoaderData<typeof loader>(
+    'routes/_admin.lg-admin._dashboard.staffs._index',
+  )
+
+  DataTable.use(DT)
+  const { staffsData: dataTable } = loaderData || {}
+
+  const dataColumns: ConfigColumns[] = [
+    {
+      title: 'No',
+      render: (
+        _data: unknown,
+        _type: unknown,
+        _row: unknown,
+        meta: { row: number },
+      ) => {
+        return meta.row + 1
+      },
+    },
+    {
+      title: 'Staf',
+    },
+    {
+      title: 'Email',
+      data: 'email',
+    },
+  ]
+  const dataSlot: DataTableSlots = {
+    1: (_value: unknown, _type: unknown, data: TStaffResponse) => (
+      <div className="flex items-center gap-x-2">
+        <img
+          src={data?.profile_picture || '/images/profile-placeholder.svg'}
+          onError={(event) => {
+            event.currentTarget.src = '/images/profile-placeholder.svg'
+          }}
+          alt={data?.name}
+          className="size-8 rounded-full bg-[#C4C4C4] object-cover"
+        />
+        <div>
+          <div>{data.name}</div>
+          <div className="text-xs text-[#7C7C7C]">
+            ID: {data.id.slice(0, 8)}
+          </div>
+        </div>
+      </div>
+    ),
+  }
+
+  return (
+    <div className="relative">
+      <TitleDashboard title="Staf" />
+      <div className="mb-8 flex items-end justify-between gap-5">
+        <div className="flex-1">{/* TODO: Filter */}</div>
+        <Button
+          as={Link}
+          to="/lg-admin/staffs/create"
+          size="lg"
+          className="text-md h-[42px] px-4"
+        >
+          <PlusIcon className="size-8" /> Buat Staf
+        </Button>
+      </div>
+
+      <UiTable
+        data={dataTable}
+        columns={dataColumns}
+        slots={dataSlot}
+        title="Daftar Staf"
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,145 @@
+import {
+  PencilSquareIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/24/solid'
+import DT, { type ConfigColumns } from 'datatables.net-dt'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
+import { useState } from 'react'
+import { Link, useRouteLoaderData } from 'react-router'
+
+import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
+import { DialogDelete } from '~/components/dialog/delete'
+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>(
+    'routes/_admin.lg-admin._dashboard.subscribe-plan._index',
+  )
+  const [selectedSubscribePlan, setSelectedSubscribePlan] =
+    useState<TSubscribePlanResponse>()
+
+  DataTable.use(DT)
+  const { subscribePlanData: dataTable } = loaderData || {}
+
+  const dataColumns: ConfigColumns[] = [
+    {
+      title: 'No',
+      render: (
+        _data: unknown,
+        _type: unknown,
+        _row: unknown,
+        meta: { row: number },
+      ) => {
+        return meta.row + 1
+      },
+    },
+    {
+      title: 'Nama',
+      data: 'name',
+    },
+    {
+      title: 'Kode',
+      data: 'code',
+    },
+    {
+      title: 'Durasi',
+      data: 'length',
+    },
+    {
+      title: 'Harga',
+      data: 'price',
+      className: 'dt-type-numeric',
+    },
+    {
+      title: 'Status',
+      data: 'status',
+    },
+    {
+      title: 'Tindakan',
+      data: 'id',
+    },
+  ]
+  const dataSlot: DataTableSlots = {
+    4: (value: number) => `Rp. ${formatNumberWithPeriods(value)}`,
+    5: (value: number) => (
+      <span
+        className={`rounded-lg px-2 text-sm ${getStatusBadge(value as TColorBadge)}`}
+      >
+        {value === 1 ? 'Active' : 'Inactive'}
+      </span>
+    ),
+    6: (value: string, _type: unknown, data: TSubscribePlanResponse) =>
+      data.code === 'basic' ? (
+        ''
+      ) : (
+        <div className="flex space-x-2">
+          <Button
+            as="a"
+            href={`/lg-admin/subscribe-plan/update/${value}`}
+            size="icon"
+            title="Update Paket Berlangganan"
+          >
+            <PencilSquareIcon className="size-4" />
+          </Button>
+          <Button
+            type="button"
+            size="icon"
+            variant="danger"
+            onClick={() => setSelectedSubscribePlan(data)}
+            title="Hapus Paket Berlangganan"
+          >
+            <TrashIcon className="size-4" />
+          </Button>
+        </div>
+      ),
+  }
+  return (
+    <div className="relative">
+      <TitleDashboard title="Paket Berlangganan" />
+      <div className="mb-8 flex items-end justify-between">
+        <div className="flex-1">{/* TODO: Filter */}</div>
+        <Button
+          as={Link}
+          to="/lg-admin/subscribe-plan/create"
+          size="lg"
+          className="text-md h-[42px] px-4"
+        >
+          <PlusIcon className="size-8" /> Buat Paket Berlangganan
+        </Button>
+      </div>
+
+      <UiTable
+        data={dataTable}
+        columns={dataColumns}
+        slots={dataSlot}
+        options={{
+          paging: true,
+          searching: true,
+          ordering: true,
+          info: true,
+        }}
+        title=" Daftar Paket Berlangganan"
+      />
+
+      <DialogDelete
+        selectedId={selectedSubscribePlan?.id}
+        close={() => setSelectedSubscribePlan(undefined)}
+        title="Paket Berlangganan"
+        fetcherAction={`/actions/admin/subscribe-plan/delete/${selectedSubscribePlan?.id}`}
+      >
+        <p>{selectedSubscribePlan?.name}</p>
+        <p>Length: {selectedSubscribePlan?.length}</p>
+        <p>
+          Harga: Rp.{' '}
+          {formatNumberWithPeriods(selectedSubscribePlan?.price || 0)}
+        </p>
+      </DialogDelete>
+    </div>
+  )
+}

app/pages/dashboard-subscriptions/index.tsx

@@ -27,7 +27,7 @@ export const SubscriptionsPage = () => {
 
   return (
     <div className="relative">
-      <TitleDashboard title="Subscription" />
+      <TitleDashboard title="Pelanggan" />
 
       <div className="mb-8 flex items-end justify-between">
         <div className="flex items-center gap-5 rounded-lg bg-gray-50 text-[#363636]">
@@ -43,7 +43,7 @@ export const SubscriptionsPage = () => {
                   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">
-                  <SearchIcon className="h-5 w-5" />
+                  <SearchIcon className="size-5" />
                 </div>
               </div>
             </Field>
@@ -71,7 +71,7 @@ export const SubscriptionsPage = () => {
           ordering: true,
           info: true,
         }}
-        title="Daftar Subscription"
+        title="Daftar Pelanggan"
       />
     </div>
   )

app/pages/dashboard-tags/index.tsx

@@ -1,9 +1,18 @@
+import {
+  PencilSquareIcon,
+  PlusIcon,
+  TrashIcon,
+} from '@heroicons/react/24/solid'
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
 import DataTable, { type DataTableSlots } from 'datatables.net-react'
+import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'
 
+import type { TTagResponse } from '~/apis/common/get-tags'
+import { DialogDelete } from '~/components/dialog/delete'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
+import { TableSearchFilter } from '~/components/ui/table-search'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard'
 
@@ -11,6 +20,8 @@ export const TagsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard',
   )
+  const [searchTerm, setSearchTerm] = useState<string>('')
+  const [selectedTag, setSelectedTag] = useState<TTagResponse>()
   const { tagsData: dataTable } = loaderData || {}
 
   DataTable.use(DT)
@@ -35,51 +46,82 @@ export const TagsPage = () => {
       data: 'code',
     },
     {
-      title: 'Action',
+      title: 'Tindakan',
       data: 'id',
     },
   ]
   const dataSlot: DataTableSlots = {
-    3: (value: string) => (
-      <Button
-        as="a"
-        href={`/lg-admin/tags/update/${value}`}
-        className="text-md rounded-md"
-        size="sm"
-      >
-        Update Tag
-      </Button>
+    3: (value: string, _type: unknown, data: TTagResponse) => (
+      <div className="flex space-x-2">
+        <Button
+          as="a"
+          href={`/lg-admin/tags/update/${value}`}
+          size="icon"
+          title="Update Tag"
+        >
+          <PencilSquareIcon className="size-4" />
+        </Button>
+        <Button
+          type="button"
+          size="icon"
+          variant="danger"
+          onClick={() => setSelectedTag(data)}
+          title="Hapus Tag"
+        >
+          <TrashIcon className="size-4" />
+        </Button>
+      </div>
     ),
   }
   const dataOptions: Config = {
     paging: true,
-    searching: true,
-    ordering: true,
     info: true,
   }
-
+  const filteredData = dataTable?.filter((item) => {
+    const matchesSearch = Object.keys(item).some((key) =>
+      item[key as keyof TTagResponse]
+        ?.toString()
+        .toLowerCase()
+        .includes(searchTerm.toLowerCase()),
+    )
+    return matchesSearch
+  })
   return (
     <div className="relative">
-      <TitleDashboard title="Tags" />
+      <TitleDashboard title="Tag" />
       <div className="mb-8 flex items-end justify-between gap-5">
-        <div className="flex-1">{/* TODO: Filter */}</div>
+        <div className="flex-1">
+          <TableSearchFilter
+            onSearch={setSearchTerm}
+            title="Tag"
+          />
+        </div>
         <Button
           as={Link}
           to="/lg-admin/tags/create"
-          className="text-md h-[42px] rounded-md"
           size="lg"
+          className="text-md h-[42px] px-4"
         >
-          Buat Tag
+          <PlusIcon className="size-8" /> Buat Tag
         </Button>
       </div>
 
       <UiTable
-        data={dataTable || []}
+        data={filteredData || []}
         columns={dataColumns}
         options={dataOptions}
         slots={dataSlot}
-        title="Daftar Tags"
+        title="Daftar Tag"
       />
+
+      <DialogDelete
+        selectedId={selectedTag?.id}
+        close={() => setSelectedTag(undefined)}
+        title="Tag"
+        fetcherAction={`/actions/admin/tags/delete/${selectedTag?.id}`}
+      >
+        <p>{selectedTag?.name}</p>
+      </DialogDelete>
     </div>
   )
 }

app/pages/dashboard-users/index.tsx

@@ -36,18 +36,14 @@ export const UsersPage = () => {
     },
     {
       title: 'Tanggal Daftar',
-      data: 'subscribe.start_date',
+      data: 'created_at',
     },
     {
-      title: 'Nama User',
+      title: 'Pengguna',
     },
     {
-      title: 'Email',
-      data: 'email',
-    },
-    {
-      title: 'Kategori',
-      data: 'subscribe.status',
+      title: 'No. Telepon',
+      data: 'phone',
     },
     {
       title: 'Status',
@@ -58,12 +54,12 @@ export const UsersPage = () => {
     1: (value: string) => formatDate(value),
     2: (_value: unknown, _type: unknown, data: TUserResponse) => (
       <div>
-        <div>{data.phone}</div>
-        <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
+        <div>{data.email}</div>
+        <div className="text-xs text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
       </div>
     ),
-    4: (_value: string) => <span className="text-sm">Pribadi</span>,
-    5: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
+    3: (value: string) => <span>{value}</span>,
+    4: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
       <span
         className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
       >
@@ -74,17 +70,17 @@ export const UsersPage = () => {
 
   return (
     <div className="relative">
-      <TitleDashboard title="Users" />
+      <TitleDashboard title="Pengguna" />
 
       <div className="mb-8 flex items-end justify-between gap-5">
         <div className="flex-1">{/* TODO: Filter */}</div>
       </div>
 
       <UiTable
-        data={dataTable || []}
+        data={dataTable}
         columns={dataColumns}
         slots={dataSlot}
-        title="Daftar Users"
+        title="Daftar Pengguna"
       />
     </div>
   )

app/pages/dashboard/chart-bar.tsx

@@ -7,12 +7,11 @@ import {
   LinearScale,
   BarElement,
   Title,
-  type ChartOptions,
   type ChartEvent,
   type ActiveElement,
 } from 'chart.js'
 import { useState } from 'react'
-import { Bar, Doughnut, Pie } from 'react-chartjs-2'
+import { Bar } from 'react-chartjs-2'
 ChartJS.register(
   ArcElement,
   CategoryScale,
@@ -25,64 +24,7 @@ ChartJS.register(
 
 type HandleChartClick = (event: ChartEvent, elements: ActiveElement[]) => void
 
-export const UiChartPie = () => {
-  const data = {
-    labels: [
-      'Pidana',
-      'Perdata',
-      'Perceraian',
-      'Surat Bisnis',
-      'Surat Tanah',
-      'Lainnya',
-    ],
-    datasets: [
-      {
-        data: [33.7, 13, 22.8, 9.3, 9.3, 21.2],
-        backgroundColor: [
-          '#FFB300',
-          '#4CAF50',
-          '#3F51B5',
-          '#F44336',
-          '#2196F3',
-          '#FF9800',
-        ],
-        hoverOffset: 4,
-      },
-    ],
-  }
-
-  const options: ChartOptions<'pie'> = {
-    maintainAspectRatio: true,
-    responsive: false,
-    plugins: {
-      legend: {
-        position: 'right',
-        labels: {
-          usePointStyle: true,
-          pointStyle: 'circle',
-          padding: 20,
-        },
-      },
-    },
-    layout: {
-      padding: 0,
-    },
-  }
-
-  return (
-    <div className="h-[300px] w-full items-center justify-center rounded-lg bg-white p-5 text-center">
-      <h2 className="text-xl font-bold">Top 5 Artikel</h2>
-      <Pie
-        height={225}
-        width={450}
-        data={data}
-        options={options}
-      />
-    </div>
-  )
-}
-
-export const UiChartBar = () => {
+export const ChartBar = () => {
   const yearlyData = {
     labels: ['2022', '2023', '2024'],
     datasets: [
@@ -151,7 +93,7 @@ export const UiChartBar = () => {
   }
 
   return (
-    <div className="rounded-xl bg-white p-6 shadow-lg">
+    <div className="rounded-xl bg-white p-6 shadow-sm">
       <div className="mb-4 flex items-center justify-between">
         <h2 className="text-xl font-bold">
           {view === 'year'
@@ -177,51 +119,3 @@ export const UiChartBar = () => {
     </div>
   )
 }
-
-export const ChartSubscription = () => {
-  const data = {
-    labels: ['Selesai', 'Belum Selesai'],
-    datasets: [
-      {
-        data: [70, 30],
-        backgroundColor: ['#1e3a8a', '#e5e7eb'],
-        borderWidth: 0,
-        cutout: '70%',
-        circumference: 180,
-        rotation: 270,
-      },
-    ],
-  }
-
-  const options: ChartOptions<'doughnut'> = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        position: 'right',
-        labels: {
-          usePointStyle: true,
-          pointStyle: 'circle',
-          boxWidth: 10,
-        },
-      },
-      tooltip: {
-        enabled: false,
-      },
-    },
-  }
-
-  return (
-    <div className="rounded-xl bg-white p-6 shadow-lg">
-      <h2 className="mb-4 text-[20px]">Subscription Selesai</h2>
-      <div className="flex items-center justify-between">
-        <div style={{ height: 'auto', width: '100%' }}>
-          <Doughnut
-            data={data}
-            options={options}
-          />
-        </div>
-      </div>
-    </div>
-  )
-}

app/pages/dashboard/chart-donut.tsx

@@ -0,0 +1,69 @@
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  type ChartOptions,
+} from 'chart.js'
+import { Doughnut } from 'react-chartjs-2'
+ChartJS.register(
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+)
+
+export const ChartDonut = () => {
+  const data = {
+    labels: ['Selesai', 'Belum Selesai'],
+    datasets: [
+      {
+        data: [70, 30],
+        backgroundColor: ['#1e3a8a', '#e5e7eb'],
+        borderWidth: 0,
+        cutout: '70%',
+        circumference: 180,
+        rotation: 270,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'doughnut'> = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        position: 'right',
+        labels: {
+          usePointStyle: true,
+          pointStyle: 'circle',
+          boxWidth: 10,
+        },
+      },
+      tooltip: {
+        enabled: false,
+      },
+    },
+  }
+
+  return (
+    <div className="rounded-xl bg-white p-6 shadow-sm">
+      <h2 className="mb-4 text-[20px]">Langganan Selesai</h2>
+      <div className="flex items-center justify-between">
+        <div style={{ height: 'auto', width: '100%' }}>
+          <Doughnut
+            data={data}
+            options={options}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

app/pages/dashboard/chart-pie.tsx

@@ -0,0 +1,78 @@
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  type ChartOptions,
+} from 'chart.js'
+import { Pie } from 'react-chartjs-2'
+ChartJS.register(
+  ArcElement,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+)
+
+export const ChartPie = () => {
+  const data = {
+    labels: [
+      'Pidana',
+      'Perdata',
+      'Perceraian',
+      'Surat Bisnis',
+      'Surat Tanah',
+      'Lainnya',
+    ],
+    datasets: [
+      {
+        data: [33.7, 13, 22.8, 9.3, 9.3, 21.2],
+        backgroundColor: [
+          '#FFB300',
+          '#4CAF50',
+          '#3F51B5',
+          '#F44336',
+          '#2196F3',
+          '#FF9800',
+        ],
+        hoverOffset: 4,
+      },
+    ],
+  }
+
+  const options: ChartOptions<'pie'> = {
+    maintainAspectRatio: true,
+    responsive: false,
+    plugins: {
+      legend: {
+        position: 'right',
+        labels: {
+          usePointStyle: true,
+          pointStyle: 'circle',
+          padding: 20,
+        },
+      },
+    },
+    layout: {
+      padding: 0,
+    },
+  }
+
+  return (
+    <div className="h-[300px] w-full items-center justify-center rounded-xl bg-white p-5 text-center shadow-sm">
+      <h2 className="text-xl font-bold">5 Artikel Teratas</h2>
+      <Pie
+        height={225}
+        width={450}
+        data={data}
+        options={options}
+      />
+    </div>
+  )
+}

app/pages/dashboard/data.ts

@@ -1,28 +1,25 @@
-import { DoctorIcon } from '~/components/icons/doctor'
-import { GraphIcon } from '~/components/icons/graph'
+import { ChartBarIcon, ChartPieIcon } from '@heroicons/react/24/solid'
 
 export const REPORT = [
-  { title: 'Total User', amount: 10_800, icon: GraphIcon },
-  { title: '⁠Total User Subscribe', amount: 5000, icon: GraphIcon },
+  { title: 'Total Pengguna', amount: 8, icon: ChartBarIcon },
+  { title: '⁠Total Pelanggan', amount: 0, icon: ChartBarIcon },
   {
-    title: 'Total Nilai Subscribe',
-    amount: 250_000_000,
-    icon: GraphIcon,
+    title: 'Total Nilai Berlangganan',
+    amount: 0,
+    icon: ChartBarIcon,
     currency: 'Rp. ',
   },
 ]
 
 export const HISTORY = [
   {
-    title: 'Total Content Biasa',
-    amount: 2890,
-    icon: GraphIcon,
-    counter: [2190, 700],
+    title: 'Total Artikel Biasa',
+    amount: 7,
+    icon: ChartPieIcon,
   },
   {
-    title: 'Total Content Premium',
-    amount: 274,
-    icon: DoctorIcon,
-    counter: [211, 54],
+    title: 'Total Artikel Premium',
+    amount: 3,
+    icon: ChartPieIcon,
   },
 ]

app/pages/dashboard/index.tsx

@@ -1,16 +1,14 @@
 import { CardReport } from '~/components/ui/card-report'
-import {
-  ChartSubscription,
-  UiChartBar,
-  UiChartPie,
-} from '~/components/ui/chart'
 
+import { ChartBar } from './chart-bar'
+import { ChartDonut } from './chart-donut'
+import { ChartPie } from './chart-pie'
 import { HISTORY, REPORT } from './data'
 export const DashboardPage = () => {
   return (
     <div className="relative">
       <section className="mb-5 flex items-center justify-between">
-        <h1 className="text-xl font-bold">Dashboard</h1>
+        <h1 className="text-xl font-bold">Dasbor</h1>
         <div className="flex items-center gap-2">
           <span>Tanggal:</span>
           <input
@@ -36,30 +34,25 @@ export const DashboardPage = () => {
       </div>
 
       <div className="mt-5 grid grid-cols-1 gap-6 sm:grid-cols-3 sm:grid-rows-2">
-        {HISTORY.map(({ title, amount, icon, counter }, index) => (
+        {HISTORY.map(({ title, amount, icon }, index) => (
           <CardReport
             key={index}
             title={title}
             amount={amount}
             icon={icon}
-            counter={counter}
           />
         ))}
         <div className="max-h-[300px] sm:col-span-2 sm:col-start-2 sm:row-span-2 sm:row-start-1">
-          <UiChartPie />
+          <ChartPie />
         </div>
       </div>
 
       <div className="flex flex-wrap gap-5 py-5 sm:flex-nowrap">
         <div className="h-full w-full sm:w-[60%]">
-          <div className="shadow-sm">
-            <UiChartBar />
-          </div>
+          <ChartBar />
         </div>
         <div className="w-ful h-full sm:w-[40%]">
-          <div className="shadow-sm">
-            <ChartSubscription />
-          </div>
+          <ChartDonut />
         </div>
       </div>
     </div>

app/pages/form-advertisements/index.tsx

@@ -10,14 +10,21 @@ 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'
+import { dateInput } from '~/utils/formatter'
 
 export const adsSchema = z.object({
   id: z.string().optional(),
   image: z.string().url({
-    message: 'Gambar must be a valid URL',
+    message: 'URL tidak valid',
   }),
   url: z.string().url({
-    message: 'URL must be valid',
+    message: 'URL tidak valid',
+  }),
+  start_date: z.string().min(1, {
+    message: 'Pilih tanggal',
+  }),
+  end_date: z.string().min(1, {
+    message: 'Pilih tanggal',
   }),
 })
 export type TAdsSchema = z.infer<typeof adsSchema>
@@ -37,28 +44,28 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
       id: adData?.id || undefined,
       image: adData?.image_url || '',
       url: adData?.url || '',
+      start_date: adData?.start_date ? dateInput(adData.start_date) : '',
+      end_date: adData?.end_date ? dateInput(adData.end_date) : '',
     },
   })
 
   const { handleSubmit } = formMethods
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
-      toast.success(`Banner iklan berhasil ${adData ? 'diupdate' : 'dibuat'}!`)
+    if (fetcher.data?.success) {
+      toast.success(`Spanduk 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`} />
+      <TitleDashboard title={`${adData ? 'Update' : 'Buat'} Spanduk Iklan`} />
       <div>
         <RemixFormProvider {...formMethods}>
           <fetcher.Form
@@ -94,9 +101,29 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
                 size="lg"
                 className="text-md h-[42px] rounded-md"
               >
-                Save
+                Simpan
               </Button>
             </div>
+            <div className="flex items-end justify-between gap-4">
+              <Input
+                id="start_date"
+                label="Tanggal Mulai"
+                type="date"
+                name="start_date"
+                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"
+              />
+              <Input
+                id="end_date"
+                label="Tanggal Berakhir"
+                type="date"
+                name="end_date"
+                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"
+              />
+            </div>
           </fetcher.Form>
         </RemixFormProvider>
       </div>

app/pages/form-category/index.tsx

@@ -13,7 +13,7 @@ import { urlFriendlyCode } from '~/utils/formatter'
 
 export const categorySchema = z.object({
   id: z.string().optional(),
-  name: z.string().min(3, 'Nama minimal 3 karakter'),
+  name: z.string().min(3, 'Minimal 3 karakter'),
   code: z.string(),
   sequence: z.preprocess(Number, z.number().optional()),
   description: z.string(),
@@ -35,7 +35,7 @@ export const FormCategoryPage = (properties: TProperties) => {
       id: categoryData?.id || undefined,
       code: categoryData?.code || '',
       name: categoryData?.name || '',
-      sequence: categoryData?.sequence || undefined,
+      sequence: categoryData?.sequence ?? undefined,
       description: categoryData?.description || '',
     },
   })
@@ -44,17 +44,15 @@ export const FormCategoryPage = (properties: TProperties) => {
   const watchName = watch('name')
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
+    if (fetcher.data?.success) {
       toast.success(
         `Kategori berhasil ${categoryData ? 'diupdate' : 'dibuat'}!`,
       )
       navigate('/lg-admin/categories')
-      return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher.data])
@@ -84,6 +82,7 @@ export const FormCategoryPage = (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"
+                readOnly={categoryData?.code === 'spotlight'}
               />
               <Input
                 id="code"
@@ -102,7 +101,7 @@ export const FormCategoryPage = (properties: TProperties) => {
                 size="lg"
                 className="text-md h-[42px] rounded-md"
               >
-                Save
+                Simpan
               </Button>
             </div>
             <div className="flex items-end justify-between gap-4">
@@ -115,6 +114,7 @@ export const FormCategoryPage = (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="w-44"
+                readOnly={categoryData?.code === 'spotlight'}
               />
               <Input
                 id="description"

app/pages/form-contents/index.tsx

@@ -15,6 +15,7 @@ import { InputFile } from '~/components/ui/input-file'
 import { Switch } from '~/components/ui/switch'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard'
+import { dateInput } from '~/utils/formatter'
 
 export const contentSchema = z.object({
   id: z.string().optional(),
@@ -30,7 +31,7 @@ export const contentSchema = z.object({
         .nullable(),
     )
     .refine((data) => data.length, {
-      message: 'Please select a category',
+      message: 'Pilih kategori',
     }),
   tags: z
     .array(
@@ -45,17 +46,17 @@ export const contentSchema = z.object({
     )
     .optional(),
   title: z.string().min(1, {
-    message: 'Judul is required',
+    message: 'Wajib diisi',
   }),
   content: z.string().min(1, {
-    message: 'Konten is required',
+    message: 'Wajib diisi',
   }),
   featured_image: z.string().url({
-    message: 'Gambar Unggulan must be a valid URL',
+    message: 'URL tidak valid',
   }),
   is_premium: z.boolean().optional(),
   live_at: z.string().min(1, {
-    message: 'Tanggal live is required',
+    message: 'Pilih tanggal',
   }),
 })
 
@@ -86,9 +87,7 @@ export const FormContentsPage = (properties: TProperties) => {
       content: newsData?.content || '',
       featured_image: newsData?.featured_image || '',
       is_premium: newsData?.is_premium || false,
-      live_at: newsData?.live_at
-        ? new Date(newsData.live_at).toISOString().split('T')[0]
-        : '',
+      live_at: newsData?.live_at ? dateInput(newsData.live_at) : '',
     },
   })
 
@@ -97,15 +96,13 @@ export const FormContentsPage = (properties: TProperties) => {
   const watchTags = watch('tags')
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
+    if (fetcher.data?.success) {
       toast.success(`Artikel berhasil ${newsData ? 'diupdate' : 'dibuat'}!`)
       navigate('/lg-admin/contents')
-      return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher.data])
@@ -129,7 +126,6 @@ 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"
-              disabled={!!newsData}
             />
             <InputFile
               id="featured_image"
@@ -148,7 +144,7 @@ export const FormContentsPage = (properties: TProperties) => {
               size="lg"
               className="text-md h-[42px] rounded-md"
             >
-              Save
+              Simpan
             </Button>
           </div>
           <div className="flex items-end justify-between gap-4">
@@ -158,7 +154,7 @@ export const FormContentsPage = (properties: TProperties) => {
               name="categories"
               label="Kategori"
               placeholder={
-                watchCategories
+                watchCategories?.length
                   ? watchCategories.map((category) => category?.name).join(', ')
                   : 'Pilih Kategori'
               }
@@ -171,11 +167,11 @@ export const FormContentsPage = (properties: TProperties) => {
               multiple
               id="tags"
               name="tags"
-              label="Tags"
+              label="Tag"
               placeholder={
-                watchTags
+                watchTags?.length
                   ? watchTags.map((tag) => tag?.name).join(', ')
-                  : 'Pilih Tags'
+                  : 'Pilih Tag'
               }
               options={tags}
               className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
@@ -184,7 +180,7 @@ export const FormContentsPage = (properties: TProperties) => {
             />
             <Input
               id="live_at"
-              label="Tanggal Live"
+              label="Mulai Tayang"
               placeholder="Pilih Tanggal"
               name="live_at"
               type="date"
@@ -194,10 +190,10 @@ export const FormContentsPage = (properties: TProperties) => {
             <Switch
               id="is_premium"
               name="is_premium"
-              label="Subscription"
+              label="Tipe Langganan"
               labelClassName="text-sm font-medium text-[#363636]"
               className="h-[42px]"
-              options={{ true: 'Premium', false: 'Normal' }}
+              options={{ true: 'Premium', false: 'Biasa' }}
             />
           </div>
 

app/pages/form-staff/index.tsx

@@ -0,0 +1,134 @@
+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 { 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 staffSchema = z
+  .object({
+    profile_picture: z
+      .string()
+      .url({
+        message: 'URL tidak valid',
+      })
+      .or(z.literal('')),
+    name: z.string().min(1, {
+      message: 'Wajib diisi',
+    }),
+    password: z.string().min(6, 'Minimal 6 karakter'),
+    rePassword: z.string().min(6, 'Minimal 6 karakter'),
+    email: z.string().email('Email tidak valid'),
+  })
+  .refine((field) => field.password === field.rePassword, {
+    message: 'Kata sandi tidak sama',
+    path: ['rePassword'],
+  })
+export type TStaffSchema = z.infer<typeof staffSchema>
+
+export const FormStaffPage = () => {
+  const fetcher = useFetcher()
+  const navigate = useNavigate()
+  const formMethods = useRemixForm<TStaffSchema>({
+    mode: 'onSubmit',
+    fetcher,
+    resolver: zodResolver(staffSchema),
+  })
+
+  const { handleSubmit } = formMethods
+
+  useEffect(() => {
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
+    }
+
+    if (fetcher.data?.success) {
+      toast.success(`Staff berhasil dibuat!`)
+      navigate('/lg-admin/staffs')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher.data])
+
+  return (
+    <div className="relative">
+      <TitleDashboard title={`Buat Staf`} />
+      <div>
+        <RemixFormProvider {...formMethods}>
+          <fetcher.Form
+            method="post"
+            onSubmit={handleSubmit}
+            action={`/actions/admin/staffs/create`}
+            className="space-y-4"
+          >
+            <div className="flex items-end justify-between gap-4">
+              <Input
+                id="name"
+                label="Nama Staf"
+                placeholder="Masukkan nama staf"
+                name="name"
+                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"
+              />
+              <Input
+                id="email"
+                label="Email"
+                placeholder="Contoh: legal@legalgo.id"
+                name="email"
+                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"
+              >
+                Simpan
+              </Button>
+            </div>
+            <div className="flex items-end justify-between gap-4">
+              <Input
+                id="password"
+                label="Kata Sandi"
+                placeholder="Masukkan Kata Sandi"
+                name="password"
+                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"
+                type="password"
+              />
+              <Input
+                id="re-password"
+                label="Ulangi Kata Sandi"
+                placeholder="Masukkan Kata Sandi"
+                name="rePassword"
+                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"
+                type="password"
+              />
+              <InputFile
+                id="profile_picture"
+                label="Gambar Profil"
+                placeholder="Unggah gambar profil Anda"
+                name="profile_picture"
+                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="profile_picture"
+              />
+            </div>
+          </fetcher.Form>
+        </RemixFormProvider>
+      </div>
+    </div>
+  )
+}

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

@@ -1,4 +1,4 @@
-import { Field, Label, Select } from '@headlessui/react'
+import { DevTool } from '@hookform/devtools'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useEffect } from 'react'
 import toast from 'react-hot-toast'
@@ -6,22 +6,24 @@ import { useFetcher, useNavigate } from 'react-router'
 import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
 import { z } from 'zod'
 
+import type { TSubscribePlanResponse } from '~/apis/common/get-subscribe-plan'
 import { Button } from '~/components/ui/button'
 import { Input } from '~/components/ui/input'
+import { Select } from '~/components/ui/select'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import { urlFriendlyCode } from '~/utils/formatter'
 
 export const subscribePlanSchema = z.object({
   id: z.string().optional(),
-  name: z.string().min(3, 'Nama minimal 3 karakter'),
+  name: z.string().min(3, 'Minimal 3 karakter'),
   code: z.string(),
-  length: z.preprocess(Number, z.number().optional()),
-  price: z.preprocess(Number, z.number().optional()),
-  status: z.number().optional(),
+  length: z.preprocess(Number, z.number().min(1, 'Durasi minimal 1')),
+  price: z.preprocess(Number, z.number().min(1, 'Harga minimal 1')),
+  status: z.string().min(1, 'Pilih status'),
 })
 export type TSubscribePlanSchema = z.infer<typeof subscribePlanSchema>
 type TProperties = {
-  subscribePlanData?: TSubscribePlanSchema
+  subscribePlanData?: TSubscribePlanResponse
 }
 
 export const FormSubscribePlanPage = (properties: TProperties) => {
@@ -36,27 +38,25 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
       id: subscribePlanData?.id || undefined,
       code: subscribePlanData?.code || '',
       name: subscribePlanData?.name || '',
-      length: subscribePlanData?.length || undefined,
-      price: subscribePlanData?.price || undefined,
-      status: subscribePlanData?.status || undefined,
+      length: subscribePlanData?.length || 0,
+      price: subscribePlanData?.price || 0,
+      status: subscribePlanData?.status.toString() || '',
     },
   })
 
-  const { handleSubmit, watch, setValue } = formMethods
+  const { handleSubmit, watch, setValue, control } = formMethods
   const watchName = watch('name')
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
+    if (fetcher.data?.success) {
       toast.success(
-        `Subscribe Plan berhasil ${subscribePlanData ? 'diupdate' : 'dibuat'}!`,
+        `Paket Berlangganan berhasil ${subscribePlanData ? 'diupdate' : 'dibuat'}!`,
       )
       navigate('/lg-admin/subscribe-plan')
-      return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher.data])
@@ -69,7 +69,7 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
   return (
     <div className="relative">
       <TitleDashboard
-        title={`${subscribePlanData ? 'Update' : 'Buat'} Subscribe Plan`}
+        title={`${subscribePlanData ? 'Update' : 'Buat'} Paket Berlangganan`}
       />
       <div>
         <RemixFormProvider {...formMethods}>
@@ -82,8 +82,8 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
             <div className="flex items-end justify-between gap-4">
               <Input
                 id="name"
-                label="Subscribe Plan"
-                placeholder="Masukkan Nama Subscribe Plan"
+                label="Paket Berlangganan"
+                placeholder="Masukkan Nama Paket Berlangganan"
                 name="name"
                 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]"
@@ -92,7 +92,7 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
               <Input
                 id="code"
                 label="Kode"
-                placeholder="Masukkan Kode Subscribe Plan"
+                placeholder="Masukkan Kode Paket Berlangganan"
                 readOnly
                 name="code"
                 className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
@@ -106,15 +106,15 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
                 size="lg"
                 className="text-md h-[42px] rounded-md"
               >
-                Save
+                Simpan
               </Button>
             </div>
             <div className="flex items-end justify-between gap-4">
               <Input
                 id="length"
-                label="Length"
+                label="Durasi"
                 type="number"
-                placeholder="Masukkan Subscribe Plan Length (days)"
+                placeholder="Masukkan Durasi Paket Berlangganan (hari)"
                 name="length"
                 className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
                 labelClassName="text-sm font-medium text-[#363636]"
@@ -122,8 +122,8 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
               />
               <Input
                 id="price"
-                label="Price"
-                placeholder="Masukkan Price"
+                label="Harga"
+                placeholder="Masukkan Harga"
                 type="number"
                 name="price"
                 className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
@@ -131,22 +131,25 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
                 containerClassName="flex-1"
               />
 
-              <Field className={'flex-1'}>
-                <Label className="mb-2 block text-sm font-medium">Status</Label>
-                <Select
-                  name="status"
-                  id="status"
-                  className="w-full rounded-lg bg-white p-2 shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
-                >
-                  <option disabled>Pilih Status</option>
-                  <option value={1}>Aktif</option>
-                  <option value={0}>Nonaktif</option>
-                </Select>
-              </Field>
+              <Select
+                id="status"
+                name="status"
+                label="Status"
+                placeholder="Pilih Status"
+                options={[
+                  { value: 1, name: 'Aktif' },
+                  { value: 0, name: 'Nonaktif' },
+                ]}
+                className="border-0 bg-white shadow focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none"
+                labelClassName="text-sm font-medium text-[#363636]"
+                containerClassName="flex-1"
+              />
             </div>
           </fetcher.Form>
         </RemixFormProvider>
       </div>
+
+      <DevTool control={control} />
     </div>
   )
 }

app/pages/form-tag/index.tsx

@@ -13,7 +13,7 @@ import { urlFriendlyCode } from '~/utils/formatter'
 
 export const tagSchema = z.object({
   id: z.string().optional(),
-  name: z.string().min(3, 'Nama minimal 3 karakter'),
+  name: z.string().min(3, 'Minimal 3 karakter'),
   code: z.string(),
 })
 export type TTagSchema = z.infer<typeof tagSchema>
@@ -40,15 +40,13 @@ export const FormTagPage = (properties: TProperties) => {
   const watchName = watch('name')
 
   useEffect(() => {
-    if (fetcher.data?.success === false) {
-      toast.error(fetcher.data?.message)
-      return
+    if (!fetcher.data?.success && fetcher.data?.message) {
+      toast.error(fetcher.data.message)
     }
 
-    if (fetcher.data?.success === true) {
+    if (fetcher.data?.success) {
       toast.success(`Tag berhasil ${tagData ? 'diupdate' : 'dibuat'}!`)
       navigate('/lg-admin/tags')
-      return
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fetcher.data])
@@ -96,7 +94,7 @@ export const FormTagPage = (properties: TProperties) => {
                 size="lg"
                 className="text-md h-[42px] rounded-md"
               >
-                Save
+                Simpan
               </Button>
             </div>
           </fetcher.Form>

app/pages/news-categories/index.tsx

@@ -17,7 +17,7 @@ export const NewsCategoriesPage = () => {
         <CategorySection
           title={name || ''}
           description={description || ''}
-          items={newsData || []}
+          items={newsData || Promise.resolve({ data: [] })}
         />
       </Card>
     </div>

app/pages/news-detail/index.tsx

@@ -1,27 +1,32 @@
 import htmlParse from 'html-react-parser'
 import { useReadingTime } from 'react-hook-reading-time'
 import { useRouteLoaderData } from 'react-router'
+import { twMerge } from 'tailwind-merge'
 
+import { Button } from '~/components/ui/button'
 import { Card } from '~/components/ui/card'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { NewsAuthor } from '~/components/ui/news-author'
 import { SocialShareButtons } from '~/components/ui/social-share'
 import { Tags } from '~/components/ui/tags'
+import { useNewsContext } from '~/contexts/news'
 import type { loader } from '~/routes/_news.detail.$slug'
 import type { TNews } from '~/types/news'
 
 export const NewsDetailPage = () => {
+  const { setIsSuccessOpen } = useNewsContext()
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_news.detail.$slug',
   )
   const berita: TNews = {
     title: loaderData?.beritaCategory?.name || '',
     description: loaderData?.beritaCategory?.description || '',
-    items: loaderData?.beritaNews || [],
+    items: loaderData?.beritaData || Promise.resolve({ data: [] }),
   }
   const currentUrl = globalThis.location
   const { title, content, featured_image, author, live_at, tags } =
     loaderData?.newsDetailData || {}
+  const { shouldSubscribe } = loaderData || {}
 
   const { text } = useReadingTime(content || '')
 
@@ -51,10 +56,23 @@ export const NewsDetailPage = () => {
             />
           </div>
 
-          <div className="mt-8 flex items-center justify-center">
-            <article className="prose prose-headings:my-0.5 prose-p:my-0.5">
+          <div className="mt-8 flex flex-col items-center justify-center gap-y-4">
+            <article
+              className={twMerge(
+                'prose prose-headings:my-0.5 prose-p:my-0.5',
+                shouldSubscribe ? 'line-clamp-5' : '',
+              )}
+            >
               {content && htmlParse(content)}
             </article>
+            {shouldSubscribe && (
+              <Button
+                onClick={() => setIsSuccessOpen('warning')}
+                className="w-full"
+              >
+                Read More
+              </Button>
+            )}
           </div>
           <div className="items-end justify-between border-b-gray-300 py-4 sm:flex">
             <div className="flex flex-col max-sm:mb-3">

app/pages/news-search/index.tsx

@@ -0,0 +1,22 @@
+import { useRouteLoaderData } from 'react-router'
+
+import { Card } from '~/components/ui/card'
+import { CategorySection } from '~/components/ui/category-section'
+import type { loader } from '~/routes/_news.search'
+
+export const NewsSearchPage = () => {
+  const loaderData = useRouteLoaderData<typeof loader>('routes/_news.search')
+  const { newsData, query } = loaderData || {}
+
+  return (
+    <div className="relative">
+      <Card>
+        <CategorySection
+          title="Hasil pencarian:"
+          description={query || ''}
+          items={newsData || Promise.resolve({ data: [] })}
+        />
+      </Card>
+    </div>
+  )
+}