feat: update UI text to Indonesian language for dashboard and form components

feat: update UI text to Indonesian language across various components and pages
fix: correct spelling of 'Dashboard' to 'Dasbor' in admin menu and dashboard page
2025-03-25 01:25:51 +08:00 · 2025-03-25 01:20:20 +08:00 · 2025-03-25 01:03:52 +08:00 · 2025-03-25 01:00:57 +08:00 · 2025-03-25 00:56:14 +08:00 · 2025-03-25 00:21:09 +08:00
39 changed files with 751 additions and 162 deletions
--- a/app/apis/admin/create-staffs.ts
+++ b/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)
+  }
+}
--- a/app/apis/admin/get-news-by-id.ts
+++ b/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)
+  }
+}
--- a/app/apis/common/get-news.ts
+++ b/app/apis/common/get-news.ts
@ -25,7 +25,11 @@ 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>
@ -37,10 +41,11 @@ type TParameters = {
  active?: boolean
  limit?: number
  page?: number
+  query?: string
 } & THttpServer

 export const getNews = async (parameters?: TParameters) => {
-  const { categories, tags, active, limit, page, ...restParameters } =
+  const { categories, tags, active, limit, page, query, ...restParameters } =
    parameters || {}
  try {
    const { data } = await HttpServer(restParameters).get(`/api/news`, {
@ -50,6 +55,7 @@ export const getNews = async (parameters?: TParameters) => {
        ...(active && { active }),
        ...(limit && { limit }),
        ...(page && { page }),
+        ...(query && { q: query }),
      },
    })
    return dataResponseSchema.parse(data)
--- a/app/apis/common/get-news-by-slug.ts
+++ b/app/apis/common/get-news-by-slug.ts
--- a/app/components/dialog/success.tsx
+++ b/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
--- a/app/components/icons/image-skeleton.tsx
+++ b/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>
+  )
+}
--- a/app/components/ui/carousel-hero.tsx
+++ b/app/components/ui/carousel-hero.tsx
@ -4,6 +4,7 @@ import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'

 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'
@ -74,7 +75,35 @@ export const CarouselHero = (properties: TNews) => {
        ref={emblaReference}
      >
        <div className="embla__container hero flex sm:gap-x-8">
-          <Suspense fallback={<div>Loading...</div>}>
+          <Suspense
+            fallback={
+              <div className="embla__slide hero flex w-full min-w-0 flex-none animate-pulse justify-between gap-3 max-sm:mt-2 sm:flex">
+                <div className="flex aspect-[174/100] h-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
+                  <ImageSkeletonIcon />
+                </div>
+                <div className="flex w-full flex-col gap-7">
+                  <div className="flex flex-col gap-4">
+                    <div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                  <div className="flex flex-col gap-2.5">
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[90%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                  <div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
+                </div>
+                <span className="sr-only">Loading...</span>
+              </div>
+            }
+          >
            <Await
              resolve={items}
              errorElement={<ErrorAwait />}
@ -86,36 +115,34 @@ export const CarouselHero = (properties: TNews) => {
                    index,
                  ) => (
                    <div
-                      className="embla__slide hero w-full min-w-0 flex-none"
+                      className="embla__slide hero w-full min-w-0 flex-none max-sm:mt-2 sm:flex"
                      key={index}
                    >
-                      <div className="max-sm:mt-2 sm:flex">
-                        <img
-                          className="col-span-2 aspect-[174/100] object-cover"
-                          src={featured_image}
-                          alt={title}
-                        />
-                        <div className="flex h-full flex-col justify-between gap-7 sm:px-5">
-                          <div>
-                            <h3 className="mt-2 w-full text-2xl font-bold sm:mt-0 sm:text-4xl">
-                              {title}
-                            </h3>
-                            <p className="text-md mt-5 line-clamp-10 text-[#777777] sm:text-xl">
-                              {stripHtml(content).result}
-                            </p>
-                          </div>
-                          <Button
-                            size="block"
-                            {...getPremiumAttribute({
-                              isPremium: is_premium,
-                              slug,
-                              onClick: () => setIsSuccessOpen('warning'),
-                              userData,
-                            })}
-                          >
-                            View More
-                          </Button>
+                      <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>
                  ),
--- a/app/components/ui/carousel-section.tsx
+++ b/app/components/ui/carousel-section.tsx
@ -4,6 +4,7 @@ import { Await, useRouteLoaderData } from 'react-router'
 import { stripHtml } from 'string-strip-html'

 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'
@ -80,7 +81,31 @@ export const CarouselSection = (properties: TNews) => {
        ref={emblaReference}
      >
        <div className="embla__container col-span-3 flex max-h-[586px] sm:gap-x-8">
-          <Suspense fallback={<div>Loading...</div>}>
+          <Suspense
+            fallback={Array.from({ length: 3 }).map((_, index) => (
+              <div
+                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 h-[280px] w-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
+                  <ImageSkeletonIcon />
+                </div>
+                <div className="flex w-full flex-col gap-4">
+                  <div className="flex flex-col gap-4">
+                    <div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                  <div className="flex flex-col gap-2.5">
+                    <div className="h-5 max-w-[80%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                    <div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  </div>
+                </div>
+                <div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
+                <span className="sr-only">Loading...</span>
+              </div>
+            ))}
+          >
            <Await
              resolve={items}
              errorElement={<ErrorAwait />}
@ -92,40 +117,38 @@ export const CarouselSection = (properties: TNews) => {
                    index,
                  ) => (
                    <div
-                      className="embla__slide w-full min-w-0 flex-none sm:w-1/3"
+                      className="embla__slide flex w-full min-w-0 flex-none flex-col justify-between gap-3 sm:w-1/3"
                      key={index}
                    >
-                      <div className="flex flex-col justify-between gap-3">
-                        <img
-                          className="aspect-[174/100] max-h-[280px] w-full rounded-md object-cover sm:aspect-[5/4]"
-                          src={featured_image}
-                          alt={title}
-                        />
-                        <div className={'flex flex-col justify-between gap-4'}>
-                          <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="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>
+                      <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>
                  ),
--- a/app/components/ui/category-section.tsx
+++ b/app/components/ui/category-section.tsx
@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge'
 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'
@ -43,7 +44,31 @@ export const CategorySection = (properties: TNews) => {
      </div>

      <div className="grid sm:grid-cols-3 sm:gap-x-8">
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense
+          fallback={Array.from({ length: 3 }).map((_, index) => (
+            <div
+              key={index}
+              className="grid gap-3 sm:gap-x-8"
+            >
+              <div className="flex h-[280px] w-full items-center justify-center rounded-md bg-gray-300 dark:bg-gray-700">
+                <ImageSkeletonIcon />
+              </div>
+              <div className="flex w-full flex-col gap-4">
+                <div className="flex flex-col gap-4">
+                  <div className="h-6 w-full rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  <div className="h-6 w-[20%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                </div>
+                <div className="flex flex-col gap-2.5">
+                  <div className="h-5 max-w-[80%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  <div className="h-5 rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                  <div className="h-5 max-w-[50%] rounded-full bg-gray-200 dark:bg-gray-700"></div>
+                </div>
+              </div>
+              <div className="h-[50px] w-full bg-gray-200 dark:bg-gray-700" />
+              <span className="sr-only">Loading...</span>
+            </div>
+          ))}
+        >
          <Await
            resolve={items}
            errorElement={<ErrorAwait />}
@ -56,18 +81,14 @@ export const CategorySection = (properties: TNews) => {
                ) => (
                  <div
                    key={index}
-                    className={twMerge('grid gap-3 sm:gap-x-8')}
+                    className="grid gap-3 sm:gap-x-8"
                  >
                    <img
-                      className={twMerge(
-                        'aspect-[174/100] w-full rounded-md object-cover sm:aspect-[5/4]',
-                      )}
+                      className="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')}
-                    >
+                    <div className="flex flex-col justify-between gap-4">
                      <Tags
                        tags={tags}
                        is_premium={is_premium}
--- a/app/components/ui/social-share.tsx
+++ b/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>
  )
--- a/app/layouts/admin/dialog-profile.tsx
+++ b/app/layouts/admin/dialog-profile.tsx
@ -21,7 +21,7 @@ export const profileSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  email: z.string().email('Email is invalid'),
  profile_picture: z.string().url({
-    message: 'URL must be valid',
+    message: 'Gambar profil must be 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"
-                placeholder="Upload your profile picture"
+                label="Gambar Profil"
+                placeholder="Unggah gambar profil Anda"
                category="profile_picture"
              />
              <Button
--- a/app/layouts/admin/menu.ts
+++ b/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,
+      },
    ],
  },
 ]
--- a/app/layouts/admin/sidebar.tsx
+++ b/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
--- a/app/layouts/news/banner.tsx
+++ b/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 (
--- a/app/layouts/news/dialog-register.tsx
+++ b/app/layouts/news/dialog-register.tsx
@ -28,7 +28,7 @@ export const registerSchema = z
      .optional()
      .nullable()
      .refine((data) => !!data, {
-        message: 'Please select a Subscribe Plan',
+        message: 'Silakan 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"
-                placeholder="Pilih Subscribe Plan"
+                label="Paket Berlangganan"
+                placeholder="Pilih Paket Berlangganan"
                options={subscribePlan}
              />

--- a/app/layouts/news/dialog-subscribe-plan.tsx
+++ b/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"
-              placeholder="Pilih Subscribe Plan"
+              label="Paket Berlangganan"
+              placeholder="Pilih Paket Berlangganan"
              options={subscribePlan}
            />

--- a/app/layouts/news/header-search.tsx
+++ b/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"
--- a/app/pages/dashboard-advertisements/index.tsx
+++ b/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>(
@ -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,7 +106,7 @@ 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>

@ -113,13 +114,13 @@ export const AdvertisementsPage = () => {
        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
--- a/app/pages/dashboard-contents/index.tsx
+++ b/app/pages/dashboard-contents/index.tsx
@ -16,7 +16,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.contents._index'
-import { formatDate } from '~/utils/formatter'
+import { formatDate, formatNumberWithPeriods } from '~/utils/formatter'

 export const ContentsPage = () => {
  const loaderData = useRouteLoaderData<typeof loader>(
@ -41,7 +41,7 @@ export const ContentsPage = () => {
      },
    },
    {
-      title: 'Tanggal Live',
+      title: 'Mulai Tayang',
      data: 'live_at',
    },
    {
@ -58,25 +58,33 @@ export const ContentsPage = () => {
      title: 'Subscription',
      data: 'is_premium',
    },
+    {
+      title: 'Jumlah Pembaca',
+      data: 'views',
+    },
    {
      title: 'Action',
-      data: 'slug',
+      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>
+      </>
    ),
    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 ? (
@ -85,10 +93,11 @@ export const ContentsPage = () => {
        </div>
      ) : (
        <div className="rounded-full bg-[#F5F5F5] px-2 text-center text-[#4C5CA0]">
-          Normal
+          Biasa
        </div>
      ),
-    7: (value: string, _type: unknown, data: TNewsResponse) => (
+    7: (value: number) => formatNumberWithPeriods(value),
+    8: (value: string, _type: unknown, data: TNewsResponse) => (
      <div className="flex space-x-2">
        <Button
          as="a"
--- a/app/pages/dashboard-staffs/index.tsx
+++ b/app/pages/dashboard-staffs/index.tsx
@ -0,0 +1,89 @@
+import { PlusIcon } from '@heroicons/react/24/solid'
+import { Link } from 'react-router'
+
+import { Button } from '~/components/ui/button'
+import { TitleDashboard } from '~/components/ui/title-dashboard'
+
+export const StaffsPage = () => {
+  // const loaderData = useRouteLoaderData<typeof loader>(
+  //   'routes/_admin.lg-admin._dashboard.staffs._index',
+  // )
+
+  // DataTable.use(DT)
+  // const dataTable =
+  //   loaderData?.usersData?.sort(
+  //     (a, b) =>
+  //       new Date(b.subscribe.start_date).getTime() -
+  //       new Date(a.subscribe.start_date).getTime(),
+  //   ) || []
+
+  // const dataColumns: ConfigColumns[] = [
+  //   {
+  //     title: 'No',
+  //     render: (
+  //       _data: unknown,
+  //       _type: unknown,
+  //       _row: unknown,
+  //       meta: { row: number },
+  //     ) => {
+  //       return meta.row + 1
+  //     },
+  //   },
+  //   {
+  //     title: 'Tanggal Daftar',
+  //     data: 'created_at',
+  //   },
+  //   {
+  //     title: 'User',
+  //   },
+  //   {
+  //     title: 'Phone',
+  //     data: 'phone',
+  //   },
+  //   {
+  //     title: 'Status',
+  //     data: 'subscribe.subscribe_plan.name',
+  //   },
+  // ]
+  // const dataSlot: DataTableSlots = {
+  //   1: (value: string) => formatDate(value),
+  //   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>
+  //   ),
+  //   3: (value: string) => <span>{value}</span>,
+  //   4: (value: TColorBadge, _type: unknown, data: TUserResponse) => (
+  //     <span
+  //       className={`rounded-lg px-2 text-sm ${getStatusBadge(data.subscribe.status as TColorBadge)}`}
+  //     >
+  //       {value}
+  //     </span>
+  //   ),
+  // }
+
+  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 Users"
+      /> */}
+    </div>
+  )
+}
--- a/app/pages/dashboard-subscribe-plan/index.tsx
+++ b/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 DataTable from 'datatables.net-react'
+import DT, { type ConfigColumns } from 'datatables.net-dt'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
 import { Link, useRouteLoaderData } from 'react-router'

@ -27,7 +27,7 @@ export const SubscribePlanPage = () => {
  DataTable.use(DT)
  const { subscribePlanData: dataTable } = loaderData || {}

-  const dataColumns = [
+  const dataColumns: ConfigColumns[] = [
    {
      title: 'No',
      render: (
@ -48,12 +48,13 @@ export const SubscribePlanPage = () => {
      data: 'code',
    },
    {
-      title: 'Length',
+      title: 'Durasi',
      data: 'length',
    },
    {
      title: 'Harga',
      data: 'price',
+      className: 'dt-type-numeric',
    },
    {
      title: 'Status',
@ -64,10 +65,8 @@ export const SubscribePlanPage = () => {
      data: 'id',
    },
  ]
-  const dataSlot = {
-    4: (value: number) => (
-      <div className="text-right">Rp. {formatNumberWithPeriods(value)}</div>
-    ),
+  const dataSlot: DataTableSlots = {
+    4: (value: number) => `Rp. ${formatNumberWithPeriods(value)}`,
    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,7 +110,7 @@ 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>

@ -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>
--- a/app/pages/dashboard-subscriptions/index.tsx
+++ b/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>
  )
--- a/app/pages/dashboard-tags/index.tsx
+++ b/app/pages/dashboard-tags/index.tsx
@ -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
--- a/app/pages/dashboard-users/index.tsx
+++ b/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',
    },
    {
@ -70,7 +70,7 @@ 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>
@ -80,7 +80,7 @@ export const UsersPage = () => {
        data={dataTable || []}
        columns={dataColumns}
        slots={dataSlot}
-        title="Daftar Users"
+        title="Daftar Pengguna"
      />
    </div>
  )
--- a/app/pages/dashboard/chart-donut.tsx
+++ b/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
--- a/app/pages/dashboard/chart-pie.tsx
+++ b/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}
--- a/app/pages/dashboard/data.ts
+++ b/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 User Subscribe', amount: 5000, icon: ChartBarIcon },
+  { title: 'Total Pengguna', amount: 8, icon: ChartBarIcon },
+  { title: '⁠Total Pelanggan', amount: 0, icon: ChartBarIcon },
  {
-    title: 'Total Nilai Subscribe',
-    amount: 250_000_000,
+    title: 'Total Nilai Berlangganan',
+    amount: 0,
    icon: ChartBarIcon,
    currency: 'Rp. ',
  },
@ -13,13 +13,13 @@ export const REPORT = [

 export const HISTORY = [
  {
-    title: 'Total Content Biasa',
-    amount: 2890,
+    title: 'Total Artikel Biasa',
+    amount: 7,
    icon: ChartPieIcon,
  },
  {
-    title: 'Total Content Premium',
-    amount: 274,
+    title: 'Total Artikel Premium',
+    amount: 3,
    icon: ChartPieIcon,
  },
 ]
--- a/app/pages/dashboard/index.tsx
+++ b/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
--- a/app/pages/form-advertisements/index.tsx
+++ b/app/pages/form-advertisements/index.tsx
@ -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
--- a/app/pages/form-contents/index.tsx
+++ b/app/pages/form-contents/index.tsx
@ -56,7 +56,7 @@ export const contentSchema = z.object({
  }),
  is_premium: z.boolean().optional(),
  live_at: z.string().min(1, {
-    message: 'Tanggal live is required',
+    message: 'Tanggal mulai tayang is required',
  }),
 })

@ -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"
@ -181,7 +180,7 @@ export const FormContentsPage = (properties: TProperties) => {
            />
            <Input
              id="live_at"
-              label="Tanggal Live"
+              label="Tanggal Mulai Tayang"
              placeholder="Pilih Tanggal"
              name="live_at"
              type="date"
@ -194,7 +193,7 @@ export const FormContentsPage = (properties: TProperties) => {
              label="Subscription"
              labelClassName="text-sm font-medium text-[#363636]"
              className="h-[42px]"
-              options={{ true: 'Premium', false: 'Normal' }}
+              options={{ true: 'Premium', false: 'Biasa' }}
            />
          </div>

--- a/app/pages/form-staff/index.tsx
+++ b/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: 'Gambar profil must be a valid URL',
+      })
+      .or(z.literal('')),
+    name: z.string().min(1, {
+      message: 'Nama staf is required',
+    }),
+    password: z.string().min(6, 'Kata sandi minimal 6 karakter'),
+    rePassword: z.string().min(6, 'Kata sandi 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"
+              >
+                Save
+              </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>
+  )
+}
--- a/app/pages/form-subscribe-plan/index.tsx
+++ b/app/pages/form-subscribe-plan/index.tsx
@ -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"
-                placeholder="Masukkan Nama Subscribe Plan"
+                label="Paket Berlangganan"
+                placeholder="Masukkan Nama Paket Berlangganan"
                name="name"
                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
                labelClassName="text-sm font-medium text-[#363636]"
@ -92,7 +92,7 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
              <Input
                id="code"
                label="Kode"
-                placeholder="Masukkan Kode Subscribe Plan"
+                placeholder="Masukkan Kode Paket Berlangganan"
                readOnly
                name="code"
                className="border-0 bg-white shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none disabled:bg-gray-100"
@ -112,9 +112,9 @@ export const FormSubscribePlanPage = (properties: TProperties) => {
            <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]"
--- a/app/pages/news-search/index.tsx
+++ b/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>
+  )
+}
--- a/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.tsx
+++ b/app/routes/_admin.lg-admin._dashboard.contents.update.$slug.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 { data: newsData } = await getNewsBySlug({ accessToken, slug })
+  const { id } = params
+  const { data: newsData } = await getNewsById({ accessToken, id })
  return { newsData }
 }

--- a/app/routes/_admin.lg-admin._dashboard.staffs._index.tsx
+++ b/app/routes/_admin.lg-admin._dashboard.staffs._index.tsx
@ -0,0 +1,44 @@
+import { isRouteErrorResponse } from 'react-router'
+
+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: usersData } = await getUsers({ accessToken })
+
+//   return { usersData }
+// }
+
+export const ErrorBoundary = ({ error }: Route.ErrorBoundaryProps) => {
+  let message = 'Oops!'
+  let details = 'An unexpected error occurred.'
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error'
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <div className="container mx-auto p-4">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 whitespace-pre-wrap">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </div>
+  )
+}
+
+const DashboardStaffsLayout = () => <StaffsPage />
+export default DashboardStaffsLayout
--- a/app/routes/_admin.lg-admin._dashboard.staffs.create.tsx
+++ b/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
--- a/app/routes/_news.detail.$slug.tsx
+++ b/app/routes/_news.detail.$slug.tsx
@ -4,7 +4,7 @@ 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'
--- a/app/routes/_news.search.tsx
+++ b/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
--- a/app/routes/actions.admin.staffs.create.ts
+++ b/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 },
+    )
+  }
+}
Author	SHA1	Message	Date
Ardeman	57e23adf3c	feat: update UI text to Indonesian language for dashboard and form components	2025-03-25 01:25:51 +08:00
Ardeman	35c02d1643	feat: update UI text to Indonesian language across various components and pages	2025-03-25 01:20:20 +08:00
Ardeman	1f2f15d204	fix: correct spelling of 'Dashboard' to 'Dasbor' in admin menu and dashboard page	2025-03-25 01:03:52 +08:00
Ardeman	39b7720186	fix: correct spelling of 'Staff' to 'Staf' and 'Tags' to 'Tag' in various components	2025-03-25 01:00:57 +08:00
Ardeman	de1802c597	feat: implement staff management features including staff creation and dashboard layout	2025-03-25 00:56:14 +08:00
Ardeman	724a14d741	feat: update getNews API query handling and enhance social share button styles	2025-03-25 00:21:09 +08:00
Ardeman	fa5f7fbe92	feat: modify query parameter formatting in getNews API to replace spaces with plus signs	2025-03-24 19:55:47 +08:00
Ardeman	4ff1e23d25	feat: implement search functionality for news articles with query parameter	2025-03-24 19:42:27 +08:00
Ardeman	9ab67c615a	feat: move views field into data response schema for news API	2025-03-24 17:22:57 +08:00
Ardeman	65f7bbe0aa	feat: add views field to news response schema and update dashboard pages	2025-03-24 15:45:43 +08:00
Ardeman	1c33eba834	feat: enhance table styling in ContentsPage with additional class names for better readability	2025-03-24 13:52:31 +08:00
Ardeman	1885eab4c3	feat: add API endpoints for fetching news by ID and slug, and update routing accordingly	2025-03-24 13:42:36 +08:00
Ardeman	f2f49de86b	feat: update Autoplay settings in Banner component to stop on mouse enter	2025-03-24 13:25:15 +08:00
Ardeman	e81dad4ec5	feat: update Autoplay settings in Banner component to prevent stopping on interaction	2025-03-24 13:24:24 +08:00
Ardeman	63bbf70bd6	feat: improve loading state in CarouselHero and CategorySection with ImageSkeletonIcon	2025-03-20 18:22:07 +08:00
Ardeman	33096ab7c1	feat: enhance loading state in CarouselHero with ImageSkeletonIcon	2025-03-20 18:16:15 +08:00
Ardeman	ab5b545625	feat: add ImageSkeletonIcon for loading state in carousel section	2025-03-20 17:44:04 +08:00