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

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

app/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 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/components/dialog/success.tsx

@@ -117,7 +117,7 @@ export const DialogSuccess = ({ isOpen, onClose }: ModalProperties) => {
                         setIsSubscribeOpen(true)
                       }}
                     >
-                      Select Subscribe Plan
+                      Pilih Paken Berlangganan
                     </Button>
                   ) : (
                     <Button

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/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/ui/carousel-hero.tsx

@@ -1,15 +1,18 @@
 import useEmblaCarousel from 'embla-carousel-react'
-import { useCallback, useEffect, useState } from 'react'
+import { Suspense, useCallback, useEffect, useState } from 'react'
-import { useRouteLoaderData } from 'react-router'
+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(
+          <Suspense
-            ({ featured_image, title, content, slug, is_premium }, index) => (
+            fallback={
-              <div
+              <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">
-                className="embla__slide hero w-full min-w-0 flex-none"
+                <div className="flex aspect-[174/100] h-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
-                key={index}
+                  <ImageSkeletonIcon />
-              >
-                <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>
                 </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 { Suspense, useCallback, useEffect, useState } from 'react'
-import { useRouteLoaderData } from 'react-router'
+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,50 +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(
+          <Suspense
-            (
+            fallback={Array.from({ length: 3 }).map((_, index) => (
-              { featured_image, title, content, tags, slug, is_premium },
-              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">
+                <div className="flex h-[280px] w-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
-                  <img
+                  <ImageSkeletonIcon />
-                    className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]"
+                </div>
-                    src={featured_image}
+                <div className="flex w-full flex-col gap-4">
-                    alt={title}
+                  <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={'flex flex-col justify-between gap-4'}>
+                    <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
-                    <div className="flex h-28 flex-col items-start justify-center gap-4">
+                  </div>
-                      <Tags
+                  <div className="flex flex-col gap-2.5">
-                        tags={tags || []}
+                    <div className="h-5 max-w-[80%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
-                        is_premium={is_premium}
+                    <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>
-                      <h3 className="mt-2 line-clamp-2 w-full text-xl font-bold sm:text-2xl lg:mt-0">
-                        {title}
-                      </h3>
-                    </div>
-                    <p className="text-md line-clamp-3 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>
+                <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(
+        <Suspense
-          (
+          fallback={Array.from({ length: 3 }).map((_, index) => (
-            { featured_image, title, content, tags, slug, is_premium },
-            index,
-          ) => (
             <div
               key={index}
-              className={twMerge('grid gap-3 sm:gap-x-8')}
+              className="grid gap-3 sm:gap-x-8"
             >
-              <img
+              <div className="flex h-[280px] w-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
-                className={twMerge(
+                <ImageSkeletonIcon />
-                  '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>
+              <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/news-author.tsx

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

app/components/ui/social-share.tsx

@@ -39,7 +39,7 @@ export const SocialShareButtons = ({
         onClick={handleCopyLink}
         className="relative cursor-pointer"
       >
-        <LinkIcon className="size-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="size-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="size-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="size-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="size-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/layouts/admin/dialog-profile.tsx

@@ -18,10 +18,10 @@ import { useAdminContext } from '~/contexts/admin'
 import type { loader } from '~/routes/_admin.lg-admin'
 
 export const profileSchema = z.object({
-  name: z.string().min(1, 'Name is required'),
+  name: z.string().min(1, 'Wajib diisi'),
-  email: z.string().email('Email is invalid'),
+  email: z.string().email('Email tidak valid'),
   profile_picture: z.string().url({
-    message: 'URL must be valid',
+    message: 'URL tidak valid',
   }),
 })
 
@@ -93,7 +93,7 @@ export const DialogProfile = () => {
               <Input
                 name="name"
                 id="name"
-                label="Name"
+                label="Nama"
                 placeholder="Enter your name"
               />
               <Input
@@ -105,8 +105,8 @@ export const DialogProfile = () => {
               <InputFile
                 name="profile_picture"
                 id="profile_picture"
-                label="Profile Picture"
+                label="Gambar Profil"
-                placeholder="Upload your profile picture"
+                placeholder="Unggah gambar profil Anda"
                 category="profile_picture"
               />
               <Button
@@ -115,7 +115,7 @@ export const DialogProfile = () => {
                 type="submit"
                 className="w-full rounded-md py-2"
               >
-                Save
+                Simpan
               </Button>
             </fetcher.Form>
           </RemixFormProvider>

app/layouts/admin/menu.ts

@@ -1,4 +1,5 @@
 import {
+  BriefcaseIcon,
   ChartBarSquareIcon,
   ClipboardDocumentCheckIcon,
   DocumentCurrencyDollarIcon,
@@ -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

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

@@ -8,7 +8,12 @@ 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 (

app/layouts/news/dialog-login.tsx

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

app/layouts/news/dialog-register.tsx

@@ -16,8 +16,8 @@ import type { loader } from '~/routes/_news'
 export const registerSchema = z
   .object({
     email: z.string().email('Email tidak valid'),
-    password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+    password: z.string().min(6, 'Minimal 6 karakter'),
-    rePassword: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+    rePassword: z.string().min(6, 'Minimal 6 karakter'),
     phone: z.string().min(10, 'No telepon tidak valid'),
     subscribe_plan: z
       .object({
@@ -28,7 +28,7 @@ export const registerSchema = z
       .optional()
       .nullable()
       .refine((data) => !!data, {
-        message: 'Please select a Subscribe Plan',
+        message: 'Pilih paket berlangganan',
       }),
   })
   .refine((field) => field.password === field.rePassword, {
@@ -121,8 +121,8 @@ export const DialogRegister = () => {
               <Combobox
                 id="subscribe_plan"
                 name="subscribe_plan"
-                label="Subscribe Plan"
+                label="Paket Berlangganan"
-                placeholder="Pilih Subscribe Plan"
+                placeholder="Pilih Paket Berlangganan"
                 options={subscribePlan}
               />
 

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

@@ -21,7 +21,7 @@ export const subscribeSchema = z.object({
     .optional()
     .nullable()
     .refine((data) => !!data, {
-      message: 'Please select a subscription',
+      message: 'Silakan pilih paket berlangganan',
     }),
 })
 
@@ -62,7 +62,7 @@ export const DialogSubscribePlan = () => {
           setIsSubscribeOpen(false)
         }
       }}
-      description="Selamat Datang, silakan Pilih Subscribe Plan Anda untuk melanjutkan!"
+      description="Selamat Datang, silakan Pilih Paket Berlangganan Anda untuk melanjutkan!"
     >
       <div className="flex flex-col items-center justify-center">
         <RemixFormProvider {...formMethods}>
@@ -75,8 +75,8 @@ export const DialogSubscribePlan = () => {
             <Combobox
               id="subscribe_plan"
               name="subscribe_plan"
-              label="Subscribe Plan"
+              label="Paket Berlangganan"
-              placeholder="Pilih Subscribe Plan"
+              placeholder="Pilih Paket Berlangganan"
               options={subscribePlan}
             />
 

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/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

@@ -14,7 +14,7 @@ import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
 import type { loader } from '~/routes/_admin.lg-admin._dashboard.advertisements._index'
-import { formatDate } from '~/utils/formatter'
+import { formatDate, formatNumberWithPeriods } from '~/utils/formatter'
 
 export const AdvertisementsPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
@@ -56,7 +56,7 @@ export const AdvertisementsPage = () => {
       data: 'clicked',
     },
     {
-      title: 'Action',
+      title: 'Tindakan',
       data: 'id',
     },
   ]
@@ -70,13 +70,14 @@ export const AdvertisementsPage = () => {
         />
       )
     },
+    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}`}
           size="icon"
-          title="Update Banner Iklan"
+          title="Update Spanduk Iklan"
         >
           <PencilSquareIcon className="size-4" />
         </Button>
@@ -85,7 +86,7 @@ export const AdvertisementsPage = () => {
           size="icon"
           variant="danger"
           onClick={() => setSelectedAds(data)}
-          title="Hapus Banner Iklan"
+          title="Hapus Spanduk Iklan"
         >
           <TrashIcon className="size-4" />
         </Button>
@@ -95,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>
@@ -105,21 +106,21 @@ export const AdvertisementsPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          <PlusIcon className="size-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
         selectedId={selectedAds?.id}
         close={() => setSelectedAds(undefined)}
-        title="Banner iklan"
+        title="Spanduk iklan"
         fetcherAction={`/actions/admin/advertisements/delete/${selectedAds?.id}`}
       >
         <img

app/pages/dashboard-categories/index.tsx

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

app/pages/dashboard-contents/index.tsx

@@ -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 { TAuthorResponse } 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',
+      title: 'Jumlah Penayangan',
-      data: 'slug',
+      data: 'views',
+    },
+    {
+      title: 'Tindakan',
+      data: 'id',
     },
   ]
   const dataSlot: DataTableSlots = {
     1: (value: string) => formatDate(value),
     2: (value: TAuthorResponse) => (
-      <div>
+      <>
         <div>{value.name}</div>
-        <div className="text-sm text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
+        <div className="text-xs text-[#7C7C7C]">ID: {value.id.slice(0, 8)}</div>
-      </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) => (
+    7: (value: number) => formatNumberWithPeriods(value),
-      <Button
+    8: (value: string, _type: unknown, data: TNewsResponse) => (
-        as="a"
+      <div className="flex space-x-2">
-        href={`/lg-admin/contents/update/${encodeURIComponent(value)}`}
+        <Button
-        className="text-md rounded-md"
+          as="a"
-        size="sm"
+          href={`/lg-admin/contents/update/${encodeURIComponent(value)}`}
-      >
+          size="icon"
-        Update Artikel
+          title="Update Artikel"
-      </Button>
+        >
+          <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 = {
@@ -110,7 +137,7 @@ export const ContentsPage = () => {
           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-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

@@ -3,8 +3,8 @@ import {
   PlusIcon,
   TrashIcon,
 } from '@heroicons/react/24/solid'
-import DT from 'datatables.net-dt'
+import DT, { type ConfigColumns } from 'datatables.net-dt'
-import DataTable from 'datatables.net-react'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'
 
@@ -27,7 +27,7 @@ export const SubscribePlanPage = () => {
   DataTable.use(DT)
   const { subscribePlanData: dataTable } = loaderData || {}
 
-  const dataColumns = [
+  const dataColumns: ConfigColumns[] = [
     {
       title: 'No',
       render: (
@@ -48,26 +48,25 @@ export const SubscribePlanPage = () => {
       data: 'code',
     },
     {
-      title: 'Length',
+      title: 'Durasi',
       data: 'length',
     },
     {
       title: 'Harga',
       data: 'price',
+      className: 'dt-type-numeric',
     },
     {
       title: 'Status',
       data: 'status',
     },
     {
-      title: 'Action',
+      title: 'Tindakan',
       data: 'id',
     },
   ]
-  const dataSlot = {
+  const dataSlot: DataTableSlots = {
-    4: (value: number) => (
+    4: (value: number) => `Rp. ${formatNumberWithPeriods(value)}`,
-      <div className="text-right">Rp. {formatNumberWithPeriods(value)}</div>
-    ),
     5: (value: number) => (
       <span
         className={`rounded-lg px-2 text-sm ${getStatusBadge(value as TColorBadge)}`}
@@ -84,7 +83,7 @@ export const SubscribePlanPage = () => {
             as="a"
             href={`/lg-admin/subscribe-plan/update/${value}`}
             size="icon"
-            title="Update Subscribe Plan"
+            title="Update Paket Berlangganan"
           >
             <PencilSquareIcon className="size-4" />
           </Button>
@@ -93,7 +92,7 @@ export const SubscribePlanPage = () => {
             size="icon"
             variant="danger"
             onClick={() => setSelectedSubscribePlan(data)}
-            title="Hapus Subscribe Plan"
+            title="Hapus Paket Berlangganan"
           >
             <TrashIcon className="size-4" />
           </Button>
@@ -102,7 +101,7 @@ export const SubscribePlanPage = () => {
   }
   return (
     <div className="relative">
-      <TitleDashboard title="Subscribe Plan" />
+      <TitleDashboard title="Paket Berlangganan" />
       <div className="mb-8 flex items-end justify-between">
         <div className="flex-1">{/* TODO: Filter */}</div>
         <Button
@@ -111,12 +110,12 @@ export const SubscribePlanPage = () => {
           size="lg"
           className="text-md h-[42px] px-4"
         >
-          <PlusIcon className="size-8" /> Buat Subscribe Plan
+          <PlusIcon className="size-8" /> Buat Paket Berlangganan
         </Button>
       </div>
 
       <UiTable
-        data={dataTable || []}
+        data={dataTable}
         columns={dataColumns}
         slots={dataSlot}
         options={{
@@ -125,13 +124,13 @@ export const SubscribePlanPage = () => {
           ordering: true,
           info: true,
         }}
-        title=" Daftar Subscribe Plan"
+        title=" Daftar Paket Berlangganan"
       />
 
       <DialogDelete
         selectedId={selectedSubscribePlan?.id}
         close={() => setSelectedSubscribePlan(undefined)}
-        title="Subscribe plan"
+        title="Paket Berlangganan"
         fetcherAction={`/actions/admin/subscribe-plan/delete/${selectedSubscribePlan?.id}`}
       >
         <p>{selectedSubscribePlan?.name}</p>

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]">
@@ -71,7 +71,7 @@ export const SubscriptionsPage = () => {
           ordering: true,
           info: true,
         }}
-        title="Daftar Subscription"
+        title="Daftar Pelanggan"
       />
     </div>
   )

app/pages/dashboard-tags/index.tsx

@@ -46,7 +46,7 @@ export const TagsPage = () => {
       data: 'code',
     },
     {
-      title: 'Action',
+      title: 'Tindakan',
       data: 'id',
     },
   ]
@@ -88,7 +88,7 @@ export const TagsPage = () => {
   })
   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">
           <TableSearchFilter
@@ -111,7 +111,7 @@ export const TagsPage = () => {
         columns={dataColumns}
         options={dataOptions}
         slots={dataSlot}
-        title="Daftar Tags"
+        title="Daftar Tag"
       />
 
       <DialogDelete

app/pages/dashboard-users/index.tsx

@@ -39,10 +39,10 @@ export const UsersPage = () => {
       data: 'created_at',
     },
     {
-      title: 'User',
+      title: 'Pengguna',
     },
     {
-      title: 'Phone',
+      title: 'No. Telepon',
       data: 'phone',
     },
     {
@@ -55,7 +55,7 @@ export const UsersPage = () => {
     2: (_value: unknown, _type: unknown, data: TUserResponse) => (
       <div>
         <div>{data.email}</div>
-        <div className="text-sm text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
+        <div className="text-xs text-[#7C7C7C]">ID: {data.id.slice(0, 8)}</div>
       </div>
     ),
     3: (value: string) => <span>{value}</span>,
@@ -70,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-donut.tsx

@@ -55,7 +55,7 @@ export const ChartDonut = () => {
 
   return (
     <div className="rounded-xl bg-white p-6 shadow-sm">
-      <h2 className="mb-4 text-[20px]">Subscription Selesai</h2>
+      <h2 className="mb-4 text-[20px]">Langganan Selesai</h2>
       <div className="flex items-center justify-between">
         <div style={{ height: 'auto', width: '100%' }}>
           <Doughnut

app/pages/dashboard/chart-pie.tsx

@@ -66,7 +66,7 @@ export const ChartPie = () => {
 
   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">Top 5 Artikel</h2>
+      <h2 className="text-xl font-bold">5 Artikel Teratas</h2>
       <Pie
         height={225}
         width={450}

app/pages/dashboard/data.ts

@@ -1,11 +1,11 @@
 import { ChartBarIcon, ChartPieIcon } from '@heroicons/react/24/solid'
 
 export const REPORT = [
-  { title: 'Total User', amount: 10_800, icon: ChartBarIcon },
+  { title: 'Total Pengguna', amount: 8, icon: ChartBarIcon },
-  { title: '⁠Total User Subscribe', amount: 5000, icon: ChartBarIcon },
+  { title: '⁠Total Pelanggan', amount: 0, icon: ChartBarIcon },
   {
-    title: 'Total Nilai Subscribe',
+    title: 'Total Nilai Berlangganan',
-    amount: 250_000_000,
+    amount: 0,
     icon: ChartBarIcon,
     currency: 'Rp. ',
   },
@@ -13,13 +13,13 @@ export const REPORT = [
 
 export const HISTORY = [
   {
-    title: 'Total Content Biasa',
+    title: 'Total Artikel Biasa',
-    amount: 2890,
+    amount: 7,
     icon: ChartPieIcon,
   },
   {
-    title: 'Total Content Premium',
+    title: 'Total Artikel Premium',
-    amount: 274,
+    amount: 3,
     icon: ChartPieIcon,
   },
 ]

app/pages/dashboard/index.tsx

@@ -8,7 +8,7 @@ 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

app/pages/form-advertisements/index.tsx

@@ -15,16 +15,16 @@ import { dateInput } from '~/utils/formatter'
 export const adsSchema = z.object({
   id: z.string().optional(),
   image: z.string().url({
-    message: 'Gambar must be a valid URL',
+    message: 'URL tidak valid',
   }),
   url: z.string().url({
-    message: 'URL must be valid',
+    message: 'URL tidak valid',
   }),
   start_date: z.string().min(1, {
-    message: 'Tanggal mulai is required',
+    message: 'Pilih tanggal',
   }),
   end_date: z.string().min(1, {
-    message: 'Tanggal berakhir is required',
+    message: 'Pilih tanggal',
   }),
 })
 export type TAdsSchema = z.infer<typeof adsSchema>
@@ -57,7 +57,7 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
     }
 
     if (fetcher.data?.success) {
-      toast.success(`Banner iklan berhasil ${adData ? 'diupdate' : 'dibuat'}!`)
+      toast.success(`Spanduk iklan berhasil ${adData ? 'diupdate' : 'dibuat'}!`)
       navigate('/lg-admin/advertisements')
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -65,7 +65,7 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
 
   return (
     <div className="relative">
-      <TitleDashboard title={`${adData ? 'Update' : 'Buat'} Banner Iklan`} />
+      <TitleDashboard title={`${adData ? 'Update' : 'Buat'} Spanduk Iklan`} />
       <div>
         <RemixFormProvider {...formMethods}>
           <fetcher.Form
@@ -101,7 +101,7 @@ export const FormAdvertisementsPage = (properties: TProperties) => {
                 size="lg"
                 className="text-md h-[42px] rounded-md"
               >
-                Save
+                Simpan
               </Button>
             </div>
             <div className="flex items-end justify-between gap-4">

app/pages/form-category/index.tsx

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

app/pages/form-contents/index.tsx

@@ -31,7 +31,7 @@ export const contentSchema = z.object({
         .nullable(),
     )
     .refine((data) => data.length, {
-      message: 'Please select a category',
+      message: 'Pilih kategori',
     }),
   tags: z
     .array(
@@ -46,17 +46,17 @@ export const contentSchema = z.object({
     )
     .optional(),
   title: z.string().min(1, {
-    message: 'Judul is required',
+    message: 'Wajib diisi',
   }),
   content: z.string().min(1, {
-    message: 'Konten is required',
+    message: 'Wajib diisi',
   }),
   featured_image: z.string().url({
-    message: 'Gambar Unggulan must be a valid URL',
+    message: 'URL tidak valid',
   }),
   is_premium: z.boolean().optional(),
   live_at: z.string().min(1, {
-    message: 'Tanggal live is required',
+    message: 'Pilih tanggal',
   }),
 })
 
@@ -126,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"
@@ -145,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">
@@ -155,7 +154,7 @@ export const FormContentsPage = (properties: TProperties) => {
               name="categories"
               label="Kategori"
               placeholder={
-                watchCategories
+                watchCategories?.length
                   ? watchCategories.map((category) => category?.name).join(', ')
                   : 'Pilih Kategori'
               }
@@ -168,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"
@@ -181,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"
@@ -191,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

@@ -15,11 +15,11 @@ import { urlFriendlyCode } from '~/utils/formatter'
 
 export const subscribePlanSchema = z.object({
   id: z.string().optional(),
-  name: z.string().min(3, 'Nama minimal 3 karakter'),
+  name: z.string().min(3, 'Minimal 3 karakter'),
   code: z.string(),
-  length: z.preprocess(Number, z.number().min(1, 'Length minimal 1')),
+  length: z.preprocess(Number, z.number().min(1, 'Durasi minimal 1')),
   price: z.preprocess(Number, z.number().min(1, 'Harga minimal 1')),
-  status: z.string().min(1, 'Status is required'),
+  status: z.string().min(1, 'Pilih status'),
 })
 export type TSubscribePlanSchema = z.infer<typeof subscribePlanSchema>
 type TProperties = {
@@ -54,7 +54,7 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
 
     if (fetcher.data?.success) {
       toast.success(
-        `Subscribe Plan berhasil ${subscribePlanData ? 'diupdate' : 'dibuat'}!`,
+        `Paket Berlangganan berhasil ${subscribePlanData ? 'diupdate' : 'dibuat'}!`,
       )
       navigate('/lg-admin/subscribe-plan')
     }
@@ -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"
+                label="Paket Berlangganan"
-                placeholder="Masukkan Nama Subscribe Plan"
+                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]"

app/pages/form-tag/index.tsx

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

app/pages/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

@@ -21,7 +21,7 @@ export const NewsDetailPage = () => {
   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 } =

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>
+  )
+}

app/pages/news/index.tsx

@@ -4,7 +4,7 @@ import { Card } from '~/components/ui/card'
 import { CarouselHero } from '~/components/ui/carousel-hero'
 import { CarouselSection } from '~/components/ui/carousel-section'
 import { Newsletter } from '~/components/ui/newsletter'
-import type { loader } from '~/routes/_news._index'
+import { type loader } from '~/routes/_news._index'
 import type { TNews } from '~/types/news'
 
 export const NewsPage = () => {
@@ -12,17 +12,17 @@ export const NewsPage = () => {
   const spotlight: TNews = {
     title: loaderData?.spotlightCategory?.name || '',
     description: loaderData?.spotlightCategory?.description || '',
-    items: loaderData?.spotlightNews || [],
+    items: loaderData?.spotlightData || Promise.resolve({ data: [] }),
   }
   const berita: TNews = {
     title: loaderData?.beritaCategory?.name || '',
     description: loaderData?.beritaCategory?.description || '',
-    items: loaderData?.beritaNews || [],
+    items: loaderData?.beritaData || Promise.resolve({ data: [] }),
   }
   const kajian: TNews = {
     title: loaderData?.kajianCategory?.name || '',
     description: loaderData?.kajianCategory?.description || '',
-    items: loaderData?.kajianNews || [],
+    items: loaderData?.kajianData || Promise.resolve({ data: [] }),
   }
 
   return (

app/pages/staff-login/index.tsx

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

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

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

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

@@ -1,15 +1,15 @@
 import { isRouteErrorResponse } from 'react-router'
 
-import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
+import { getNewsById } from '~/apis/admin/get-news-by-id'
 import { handleCookie } from '~/libs/cookies'
 import { FormContentsPage } from '~/pages/form-contents'
 
-import type { Route } from './+types/_admin.lg-admin._dashboard.contents.update.$slug'
+import type { Route } from './+types/_admin.lg-admin._dashboard.contents.update.$id'
 
 export const loader = async ({ request, params }: Route.LoaderArgs) => {
   const { staffToken: accessToken } = await handleCookie(request)
-  const { slug } = params
+  const { id } = params
-  const { data: newsData } = await getNewsBySlug({ accessToken, slug })
+  const { data: newsData } = await getNewsById({ accessToken, id })
   return { newsData }
 }
 

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

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

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

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

app/routes/_admin.lg-admin.tsx

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

app/routes/_news._index.tsx

@@ -2,6 +2,7 @@ import { isRouteErrorResponse } from 'react-router'
 
 import { getCategories } from '~/apis/common/get-categories'
 import { getNews } from '~/apis/common/get-news'
+import { Card } from '~/components/ui/card'
 import { NewsPage } from '~/pages/news'
 
 import type { Route } from './+types/_news._index'
@@ -13,32 +14,36 @@ export const loader = async ({}: Route.LoaderArgs) => {
   const spotlightCategory = categoriesData.find(
     (category) => category.code === spotlightCode,
   )
-  let { data: spotlightNews } = await getNews({ categories: [spotlightCode] })
-  spotlightNews = spotlightNews.filter(
-    (news) => new Date(news.live_at) <= new Date(),
-  )
 
   const beritaCode = 'berita'
   const beritaCategory = categoriesData.find(
     (category) => category.code === beritaCode,
   )
-  let { data: beritaNews } = await getNews({ categories: [beritaCode] })
-  beritaNews = beritaNews.filter((news) => new Date(news.live_at) <= new Date())
 
   const kajianCode = 'kajian'
   const kajianCategory = categoriesData.find(
     (category) => category.code === kajianCode,
   )
-  let { data: kajianNews } = await getNews({ categories: [kajianCode] })
-  kajianNews = kajianNews.filter((news) => new Date(news.live_at) <= new Date())
 
+  const spotlightData = getNews({
+    categories: [spotlightCode],
+    active: true,
+  })
+  const beritaData = getNews({
+    categories: [beritaCode],
+    active: true,
+  })
+  const kajianData = getNews({
+    categories: [kajianCode],
+    active: true,
+  })
   return {
     spotlightCategory,
-    spotlightNews,
     beritaCategory,
-    beritaNews,
     kajianCategory,
-    kajianNews,
+    spotlightData,
+    beritaData,
+    kajianData,
   }
 }
 
@@ -59,15 +64,21 @@ export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
   }
 
   return (
-    <div className="container mx-auto p-4">
+    <Card>
-      <h1>{message}</h1>
+      <div className="mt-3 mb-3 grid items-center justify-between border-b border-black pb-3 sm:mb-[30px] sm:pb-[30px]">
-      <p>{details}</p>
+        <h2 className="text-2xl font-extrabold text-[#2E2F7C] sm:text-4xl">
+          {message}
+        </h2>
+        <p className="text-xl font-light text-[#777777] italic sm:text-2xl">
+          {details}
+        </p>
+      </div>
       {stack && (
-        <pre className="w-full p-4 whitespace-pre-wrap">
+        <pre className="w-full whitespace-pre-wrap">
           <code>{stack}</code>
         </pre>
       )}
-    </div>
+    </Card>
   )
 }
 

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

@@ -11,8 +11,7 @@ export const loader = async ({ params }: Route.LoaderArgs) => {
   const { data: categoriesData } = await getCategories()
   const { code } = params
   const categoryData = categoriesData.find((category) => category.code === code)
-  let { data: newsData } = await getNews({ categories: [code] })
+  const newsData = getNews({ categories: [code], active: true })
-  newsData = newsData.filter((news) => new Date(news.live_at) <= new Date())
   return { categoryData, newsData }
 }
 

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

@@ -1,9 +1,10 @@
 import { isRouteErrorResponse } from 'react-router'
+import { getClientIPAddress } from 'remix-utils/get-client-ip-address'
 import { stripHtml } from 'string-strip-html'
 
 import { getCategories } from '~/apis/common/get-categories'
 import { getNews } from '~/apis/common/get-news'
-import { getNewsBySlug } from '~/apis/common/get-news-by-slug'
+import { getNewsBySlug } from '~/apis/news/get-news-by-slug'
 import { getUser } from '~/apis/news/get-user'
 import { APP } from '~/configs/meta'
 import { handleCookie } from '~/libs/cookies'
@@ -12,6 +13,8 @@ import { NewsDetailPage } from '~/pages/news-detail'
 import type { Route } from './+types/_news.detail.$slug'
 
 export const loader = async ({ request, params }: Route.LoaderArgs) => {
+  const userAgent = request.headers.get('user-agent')
+  const ipAddress = getClientIPAddress(request) || 'localhost'
   const { userToken: accessToken } = await handleCookie(request)
   let userData
   if (accessToken) {
@@ -19,7 +22,12 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
     userData = data
   }
   const { slug } = params
-  let { data: newsDetailData } = await getNewsBySlug({ slug, accessToken })
+  let { data: newsDetailData } = await getNewsBySlug({
+    slug,
+    accessToken,
+    userAgent,
+    ipAddress,
+  })
   const shouldSubscribe =
     (!accessToken || userData?.subscribe?.subscribe_plan?.code === 'basic') &&
     newsDetailData?.is_premium
@@ -34,13 +42,12 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => {
   const beritaCategory = categoriesData.find(
     (category) => category.code === beritaCode,
   )
-  let { data: beritaNews } = await getNews({ categories: [beritaCode] })
+  const beritaData = getNews({ categories: [beritaCode], active: true })
-  beritaNews = beritaNews.filter((news) => new Date(news.live_at) <= new Date())
 
   return {
     newsDetailData,
     beritaCategory,
-    beritaNews,
+    beritaData,
     shouldSubscribe,
   }
 }

app/routes/_news.search.tsx

@@ -0,0 +1,59 @@
+import { isRouteErrorResponse } from 'react-router'
+
+import { getNews } from '~/apis/common/get-news'
+import { APP } from '~/configs/meta'
+import { NewsSearchPage } from '~/pages/news-search'
+
+import type { Route } from './+types/_news.search'
+
+export const loader = async ({ request }: Route.LoaderArgs) => {
+  const url = new URL(request.url)
+  const query = url.searchParams.get('q') || ''
+  const newsData = getNews({ query, active: true })
+  return { query, newsData }
+}
+
+export const meta = ({ data }: Route.MetaArgs) => {
+  const { query } = data
+  const metaTitle = APP.title
+  const title = `Pencarian: ${query} - ${metaTitle}`
+
+  return [
+    {
+      title,
+    },
+  ]
+}
+
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
+const NewsSearchLayout = () => <NewsSearchPage />
+
+export default NewsSearchLayout

app/routes/_news.tsx

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

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

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

app/routes/actions.admin.login.ts

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

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

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

app/routes/actions.log.ads.$id.ts

@@ -1,4 +1,5 @@
 import { data } from 'react-router'
+import { getClientIPAddress } from 'remix-utils/get-client-ip-address'
 import { XiorError } from 'xior'
 
 import { createLogAdsRequest } from '~/apis/news/create-log-ads'
@@ -7,12 +8,16 @@ import { handleCookie } from '~/libs/cookies'
 import type { Route } from './+types/actions.log.ads.$id'
 
 export const action = async ({ request, params }: Route.ActionArgs) => {
+  const userAgent = request.headers.get('user-agent')
+  const ipAddress = getClientIPAddress(request) || 'localhost'
   const { userToken: accessToken } = await handleCookie(request)
   const { id } = params
   try {
     const { data: logsData } = await createLogAdsRequest({
       id,
       accessToken,
+      userAgent,
+      ipAddress,
     })
 
     return data(

app/types/news.ts

@@ -1,7 +1,7 @@
-import type { TNewsResponse } from '~/apis/common/get-news'
+import type { TNewsResponseData } from '~/apis/common/get-news'
 
 export type TNews = {
   title: string
   description: string
-  items: TNewsResponse[]
+  items: Promise<TNewsResponseData>
 }

app/utils/token.ts

@@ -1,4 +1,4 @@
-import { decodeJwt } from 'jose'
+import { JWT } from '@edgefirst-dev/jwt'
 
 import {
   staffTokenCookieConfig,
@@ -12,10 +12,10 @@ type TTokenCookie = {
 export const generateUserTokenCookie = (parameters: TTokenCookie) => {
   const { accessToken } = parameters
 
-  const decodedToken = decodeJwt(accessToken)
+  const decodedToken = JWT.decode(accessToken)
   const decodedTokenExp = decodedToken.exp
   const expirationDate = decodedTokenExp
-    ? new Date(decodedTokenExp * 1000)
+    ? new Date(Number(decodedTokenExp) * 1000)
     : undefined
 
   return userTokenCookieConfig.serialize(accessToken, {
@@ -26,10 +26,10 @@ export const generateUserTokenCookie = (parameters: TTokenCookie) => {
 export const generateStaffTokenCookie = (parameters: TTokenCookie) => {
   const { accessToken } = parameters
 
-  const decodedToken = decodeJwt(accessToken)
+  const decodedToken = JWT.decode(accessToken)
   const decodedTokenExp = decodedToken.exp
   const expirationDate = decodedTokenExp
-    ? new Date(decodedTokenExp * 1000)
+    ? new Date(Number(decodedTokenExp) * 1000)
     : undefined
 
   return staffTokenCookieConfig.serialize(accessToken, {

package.json

@@ -14,10 +14,15 @@
     "validate": "pnpm lint && pnpm typecheck && pnpm knip"
   },
   "dependencies": {
+    "@edgefirst-dev/batcher": "^1.0.1",
+    "@edgefirst-dev/jwt": "^1.2.0",
+    "@edgefirst-dev/server-timing": "^0.0.1",
     "@headlessui/react": "^2.2.0",
     "@heroicons/react": "^2.2.0",
     "@hookform/resolvers": "^4.1.1",
     "@monaco-editor/react": "^4.7.0",
+    "@oslojs/crypto": "^1.0.1",
+    "@oslojs/encoding": "^1.1.0",
     "@react-router/fs-routes": "^7.1.3",
     "@react-router/node": "^7.1.3",
     "@react-router/serve": "^7.1.3",
@@ -37,8 +42,9 @@
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^8.5.2",
     "html-react-parser": "^5.2.2",
+    "intl-parse-accept-language": "^1.0.0",
+    "is-ip": "^5.0.1",
     "isbot": "^5.1.17",
-    "jose": "^6.0.8",
     "react": "^19.0.0",
     "react-chartjs-2": "^5.3.0",
     "react-colorful": "^5.6.1",
@@ -49,6 +55,7 @@
     "react-router": "^7.1.3",
     "react-share": "^5.2.2",
     "remix-hook-form": "^6.1.3",
+    "remix-utils": "^8.5.0",
     "string-strip-html": "^13.4.12",
     "tailwind-merge": "^3.0.1",
     "xior": "^0.6.3",

pnpm-lock.yaml

@@ -8,6 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@edgefirst-dev/batcher':
+        specifier: ^1.0.1
+        version: 1.0.1
+      '@edgefirst-dev/jwt':
+        specifier: ^1.2.0
+        version: 1.2.0
+      '@edgefirst-dev/server-timing':
+        specifier: ^0.0.1
+        version: 0.0.1
       '@headlessui/react':
         specifier: ^2.2.0
         version: 2.2.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -20,6 +29,12 @@ importers:
       '@monaco-editor/react':
         specifier: ^4.7.0
         version: 4.7.0(monaco-editor@0.52.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      '@oslojs/crypto':
+        specifier: ^1.0.1
+        version: 1.0.1
+      '@oslojs/encoding':
+        specifier: ^1.1.0
+        version: 1.1.0
       '@react-router/fs-routes':
         specifier: ^7.1.3
         version: 7.1.3(@react-router/dev@7.1.3(@react-router/serve@7.1.3(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3))(@types/node@20.17.16)(babel-plugin-macros@3.1.0)(lightningcss@1.29.1)(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)(vite@5.4.14(@types/node@20.17.16)(lightningcss@1.29.1)))(typescript@5.7.3)
@@ -77,12 +92,15 @@ importers:
       html-react-parser:
         specifier: ^5.2.2
         version: 5.2.2(@types/react@19.0.8)(react@19.0.0)
+      intl-parse-accept-language:
+        specifier: ^1.0.0
+        version: 1.0.0
+      is-ip:
+        specifier: ^5.0.1
+        version: 5.0.1
       isbot:
         specifier: ^5.1.17
         version: 5.1.22
-      jose:
-        specifier: ^6.0.8
-        version: 6.0.8
       react:
         specifier: ^19.0.0
         version: 19.0.0
@@ -113,6 +131,9 @@ importers:
       remix-hook-form:
         specifier: ^6.1.3
         version: 6.1.3(react-dom@19.0.0(react@19.0.0))(react-hook-form@7.54.2(react@19.0.0))(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)
+      remix-utils:
+        specifier: ^8.5.0
+        version: 8.5.0(@edgefirst-dev/batcher@1.0.1)(@edgefirst-dev/jwt@1.2.0)(@edgefirst-dev/server-timing@0.0.1)(@oslojs/crypto@1.0.1)(@oslojs/encoding@1.1.0)(intl-parse-accept-language@1.0.0)(is-ip@5.0.1)(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)(zod@3.24.2)
       string-strip-html:
         specifier: ^13.4.12
         version: 13.4.12
@@ -448,6 +469,22 @@ packages:
     resolution: {integrity: sha512-DSHae2obMSMkAtTBSOulg5X7/z+rGLxcXQIkg3OmWvY6wifojge5uVMydfhUvs7yQj+V7jNmRZ2Xzl8GJyqRgg==}
     engines: {node: '>=v18'}
 
+  '@edgefirst-dev/batcher@1.0.1':
+    resolution: {integrity: sha512-9AsnqLSIbO0mK7Du6lRp3v7hCJuercNo7t16leZeMCnI3QReZDE2IEtbLpDwrIrcOS7xt1vgdonKYU9GQqittw==}
+    engines: {node: '>=20.0.0'}
+
+  '@edgefirst-dev/data@0.0.4':
+    resolution: {integrity: sha512-VLhlvEPDJ0Sd0pE6sAYTQkIqZCXVonaWlgRJIQQHzfjTXCadF77qqHj5NxaPSc4wCul0DJO/0MnejVqJAXUiRg==}
+    engines: {node: '>=20.0.0'}
+
+  '@edgefirst-dev/jwt@1.2.0':
+    resolution: {integrity: sha512-MnNceBAmJYhoctIAGYivh0/sSsKYXfEPfwGZ8tsoX96+vSRuoeLrBi4p2L9NHCjqxMafd4KMKk+93SfX3sW7dQ==}
+    engines: {node: '>=20.0.0'}
+
+  '@edgefirst-dev/server-timing@0.0.1':
+    resolution: {integrity: sha512-WlvF/dhgM7CE9SOb3Ji6Wj4PsIk21CHvXzRVdQwmeS1eVEVimWqagiYuV5e8/7Owt7SDFpeVnuF0q2CtONch0g==}
+    engines: {node: '>=20.0.0'}
+
   '@emotion/babel-plugin@11.13.5':
     resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
 
@@ -747,6 +784,12 @@ packages:
   '@kurkle/color@0.3.4':
     resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
 
+  '@mjackson/file-storage@0.6.1':
+    resolution: {integrity: sha512-H3GEVpmfmNryNoYloddIOba5OAwckfVGMvutPeI94Shbv/R+NVh89gIYa8SK3Vfa+ky9PitclP+5XQ6/zlSdQQ==}
+
+  '@mjackson/lazy-file@3.3.1':
+    resolution: {integrity: sha512-BxpNT1KmLx0OLYfgQESx/AKGD2czwfZXh9c0SaDUQY2DRAaVYtAvSQE5EkpATFdQQKqfL+iXVoaQ/SN+w7/CDA==}
+
   '@mjackson/node-fetch-server@0.2.0':
     resolution: {integrity: sha512-EMlH1e30yzmTpGLQjlFmaDAjyOeZhng1/XCd7DExR8PNAnG/G1tyruZxEoUe11ClnwGhGrtsdnyyUx1frSzjng==}
 
@@ -803,6 +846,18 @@ packages:
   '@one-ini/wasm@0.1.1':
     resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
 
+  '@oslojs/asn1@1.0.0':
+    resolution: {integrity: sha512-zw/wn0sj0j0QKbIXfIlnEcTviaCzYOY3V5rAyjR6YtOByFtJiT574+8p9Wlach0lZH9fddD4yb9laEAIl4vXQA==}
+
+  '@oslojs/binary@1.0.0':
+    resolution: {integrity: sha512-9RCU6OwXU6p67H4NODbuxv2S3eenuQ4/WFLrsq+K/k682xrznH5EVWA7N4VFk9VYVcbFtKqur5YQQZc0ySGhsQ==}
+
+  '@oslojs/crypto@1.0.1':
+    resolution: {integrity: sha512-7n08G8nWjAr/Yu3vu9zzrd0L9XnrJfpMioQcvCMxBIiF5orECHe5/3J0jmXRVvgfqMm/+4oxlQ+Sq39COYLcNQ==}
+
+  '@oslojs/encoding@1.1.0':
+    resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -2001,6 +2056,10 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clone-regexp@3.0.0:
+    resolution: {integrity: sha512-ujdnoq2Kxb8s3ItNBtnYeXdm07FcU0u8ARAT1lQ2YdMwQC+cdiXX8KoqMVuglztILivceTtp4ivqGSmEmhBUJw==}
+    engines: {node: '>=12'}
+
   clone@1.0.4:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
@@ -2081,6 +2140,10 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
+  convert-hrtime@5.0.0:
+    resolution: {integrity: sha512-lOETlkIeYSJWcbbcvjRKGxVMXJR+8+OQb/mTPbA4ObPMytYIsUbuOE0Jzy60hjARYszq1id0j8KgVhC+WGZVTg==}
+    engines: {node: '>=12'}
+
   convert-source-map@1.9.0:
     resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
 
@@ -2712,6 +2775,10 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
+  function-timeout@0.1.1:
+    resolution: {integrity: sha512-0NVVC0TaP7dSTvn1yMiy6d6Q8gifzbvQafO46RtLG/kHJUBNd+pVRGOBoK44wNBvtSPUJRfdVvkFdD3p0xvyZg==}
+    engines: {node: '>=14.16'}
+
   function.prototype.name@1.1.8:
     resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
     engines: {node: '>= 0.4'}
@@ -2937,6 +3004,14 @@ packages:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  intl-parse-accept-language@1.0.0:
+    resolution: {integrity: sha512-YFMSV91JNBOSjw1cOfw2tup6hDP7mkz+2AUV7W1L1AM6ntgI75qC1ZeFpjPGMrWp+upmBRTX2fJWQ8c7jsUWpA==}
+    engines: {node: '>=14'}
+
+  ip-regex@5.0.0:
+    resolution: {integrity: sha512-fOCG6lhoKKakwv+C6KdsOnGvgXnmgfmp0myi3bcNwj3qfwPAxRKWEuFhvEFF7ceYIz6+1jRZ+yguLFAmUNPEfw==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   ipaddr.js@1.9.1:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
@@ -3018,6 +3093,10 @@ packages:
     resolution: {integrity: sha512-rcfALRIb1YewtnksfRIHGcIY93QnK8BIQ/2c9yDYcG/Y6+vRoJuTWBmmSEbyLLYtXm7q35pHOHbZFQBaLrhlWQ==}
     engines: {node: '>=0.10.0'}
 
+  is-ip@5.0.1:
+    resolution: {integrity: sha512-FCsGHdlrOnZQcp0+XT5a+pYowf33itBalCl+7ovNXC/7o5BhIpG14M3OrpPPdBSIQJCm+0M5+9mO7S9VVTTCFw==}
+    engines: {node: '>=14.16'}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -3042,6 +3121,10 @@ packages:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
 
+  is-regexp@3.1.0:
+    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
+    engines: {node: '>=12'}
+
   is-set@2.0.3:
     resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
     engines: {node: '>= 0.4'}
@@ -3463,6 +3546,10 @@ packages:
   motion-utils@11.18.1:
     resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
 
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
   ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
@@ -4096,6 +4183,42 @@ packages:
       react-hook-form: ^7.51.0
       react-router: '>=7.0.0'
 
+  remix-utils@8.5.0:
+    resolution: {integrity: sha512-Wf9OGSJveBaVHKptbEgxc+DwKRUUGOH+aiaBlsrAA2b4F+gNtCkvaZzA7Tp+1esBElRcRvMZQq/0aSSWFMP18A==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      '@edgefirst-dev/batcher': ^1.0.0
+      '@edgefirst-dev/jwt': ^1.2.0
+      '@edgefirst-dev/server-timing': ^0.0.1
+      '@oslojs/crypto': ^1.0.1
+      '@oslojs/encoding': ^1.1.0
+      intl-parse-accept-language: ^1.0.0
+      is-ip: ^5.0.1
+      react: ^18.0.0 || ^19.0.0
+      react-router: ^7.0.0
+      zod: ^3.22.4
+    peerDependenciesMeta:
+      '@edgefirst-dev/batcher':
+        optional: true
+      '@edgefirst-dev/jwt':
+        optional: true
+      '@edgefirst-dev/server-timing':
+        optional: true
+      '@oslojs/crypto':
+        optional: true
+      '@oslojs/encoding':
+        optional: true
+      intl-parse-accept-language:
+        optional: true
+      is-ip:
+        optional: true
+      react:
+        optional: true
+      react-router:
+        optional: true
+      zod:
+        optional: true
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -4403,6 +4526,10 @@ packages:
   summary@2.1.0:
     resolution: {integrity: sha512-nMIjMrd5Z2nuB2RZCKJfFMjgS3fygbeyGk9PxPPaJR1RIcyN9yn4A63Isovzm3ZtQuEkLBVgMdPup8UeLH7aQw==}
 
+  super-regex@0.2.0:
+    resolution: {integrity: sha512-WZzIx3rC1CvbMDloLsVw0lkZVKJWbrkJ0k1ghKFmcnPrW1+jWbgTkTEWVtD9lMdmI4jZEz40+naBxl1dCUhXXw==}
+    engines: {node: '>=14.16'}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -4437,6 +4564,10 @@ packages:
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
+  time-span@5.1.0:
+    resolution: {integrity: sha512-75voc/9G4rDIJleOo4jPvN4/YC4GRZrY8yy1uU4lwrB3XEQbWve8zXoO5No4eFrGcTAMYyoY67p8jRQdtA1HbA==}
+    engines: {node: '>=12'}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -4507,6 +4638,10 @@ packages:
     resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
     engines: {node: '>=8'}
 
+  type-fest@4.37.0:
+    resolution: {integrity: sha512-S/5/0kFftkq27FPNye0XM1e2NsnoD/3FS+pBmbjmmtLT6I+i344KoOf7pvXreaFsDamWeaJX55nczA1m5PsBDg==}
+    engines: {node: '>=16'}
+
   type-is@1.6.18:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
@@ -5105,6 +5240,21 @@ snapshots:
       '@types/conventional-commits-parser': 5.0.1
       chalk: 5.4.1
 
+  '@edgefirst-dev/batcher@1.0.1':
+    dependencies:
+      type-fest: 4.37.0
+
+  '@edgefirst-dev/data@0.0.4': {}
+
+  '@edgefirst-dev/jwt@1.2.0':
+    dependencies:
+      '@edgefirst-dev/data': 0.0.4
+      '@mjackson/file-storage': 0.6.1
+      jose: 6.0.8
+      type-fest: 4.37.0
+
+  '@edgefirst-dev/server-timing@0.0.1': {}
+
   '@emotion/babel-plugin@11.13.5':
     dependencies:
       '@babel/helper-module-imports': 7.25.9
@@ -5391,6 +5541,14 @@ snapshots:
 
   '@kurkle/color@0.3.4': {}
 
+  '@mjackson/file-storage@0.6.1':
+    dependencies:
+      '@mjackson/lazy-file': 3.3.1
+
+  '@mjackson/lazy-file@3.3.1':
+    dependencies:
+      mrmime: 2.0.1
+
   '@mjackson/node-fetch-server@0.2.0': {}
 
   '@monaco-editor/loader@1.5.0':
@@ -5461,6 +5619,19 @@ snapshots:
 
   '@one-ini/wasm@0.1.1': {}
 
+  '@oslojs/asn1@1.0.0':
+    dependencies:
+      '@oslojs/binary': 1.0.0
+
+  '@oslojs/binary@1.0.0': {}
+
+  '@oslojs/crypto@1.0.1':
+    dependencies:
+      '@oslojs/asn1': 1.0.0
+      '@oslojs/binary': 1.0.0
+
+  '@oslojs/encoding@1.1.0': {}
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -6698,6 +6869,10 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clone-regexp@3.0.0:
+    dependencies:
+      is-regexp: 3.1.0
+
   clone@1.0.4:
     optional: true
 
@@ -6779,6 +6954,8 @@ snapshots:
       meow: 12.1.1
       split2: 4.2.0
 
+  convert-hrtime@5.0.0: {}
+
   convert-source-map@1.9.0: {}
 
   convert-source-map@2.0.0: {}
@@ -7576,6 +7753,8 @@ snapshots:
 
   function-bind@1.1.2: {}
 
+  function-timeout@0.1.1: {}
+
   function.prototype.name@1.1.8:
     dependencies:
       call-bind: 1.0.8
@@ -7805,6 +7984,10 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  intl-parse-accept-language@1.0.0: {}
+
+  ip-regex@5.0.0: {}
+
   ipaddr.js@1.9.1: {}
 
   is-array-buffer@3.0.5:
@@ -7886,6 +8069,11 @@ snapshots:
 
   is-gzip@1.0.0: {}
 
+  is-ip@5.0.1:
+    dependencies:
+      ip-regex: 5.0.0
+      super-regex: 0.2.0
+
   is-map@2.0.3: {}
 
   is-number-object@1.1.1:
@@ -7906,6 +8094,8 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.2
 
+  is-regexp@3.1.0: {}
+
   is-set@2.0.3: {}
 
   is-shared-array-buffer@1.0.4:
@@ -8291,6 +8481,8 @@ snapshots:
 
   motion-utils@11.18.1: {}
 
+  mrmime@2.0.1: {}
+
   ms@2.0.0: {}
 
   ms@2.1.3: {}
@@ -8936,6 +9128,21 @@ snapshots:
       react-hook-form: 7.54.2(react@19.0.0)
       react-router: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
 
+  remix-utils@8.5.0(@edgefirst-dev/batcher@1.0.1)(@edgefirst-dev/jwt@1.2.0)(@edgefirst-dev/server-timing@0.0.1)(@oslojs/crypto@1.0.1)(@oslojs/encoding@1.1.0)(intl-parse-accept-language@1.0.0)(is-ip@5.0.1)(react-router@7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)(zod@3.24.2):
+    dependencies:
+      type-fest: 4.37.0
+    optionalDependencies:
+      '@edgefirst-dev/batcher': 1.0.1
+      '@edgefirst-dev/jwt': 1.2.0
+      '@edgefirst-dev/server-timing': 0.0.1
+      '@oslojs/crypto': 1.0.1
+      '@oslojs/encoding': 1.1.0
+      intl-parse-accept-language: 1.0.0
+      is-ip: 5.0.1
+      react: 19.0.0
+      react-router: 7.1.3(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      zod: 3.24.2
+
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
@@ -9300,6 +9507,12 @@ snapshots:
 
   summary@2.1.0: {}
 
+  super-regex@0.2.0:
+    dependencies:
+      clone-regexp: 3.0.0
+      function-timeout: 0.1.1
+      time-span: 5.1.0
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -9325,6 +9538,10 @@ snapshots:
 
   through@2.3.8: {}
 
+  time-span@5.1.0:
+    dependencies:
+      convert-hrtime: 5.0.0
+
   tiny-invariant@1.3.3: {}
 
   tiny-lru@11.2.11: {}
@@ -9377,6 +9594,8 @@ snapshots:
 
   type-fest@0.8.1: {}
 
+  type-fest@4.37.0: {}
+
   type-is@1.6.18:
     dependencies:
       media-typer: 0.3.0

public/images/profile-placeholder.svg

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