From 35c02d1643361a4727cdf51fb39a7736db52b748 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Tue, 25 Mar 2025 01:20:20 +0800
Subject: [PATCH] feat: update UI text to Indonesian language across various
 components and pages

---
 app/components/dialog/success.tsx            |  2 +-
 app/layouts/admin/menu.ts                    |  8 +++---
 app/layouts/admin/sidebar.tsx                |  2 +-
 app/layouts/news/dialog-register.tsx         |  6 ++---
 app/layouts/news/dialog-subscribe-plan.tsx   |  8 +++---
 app/pages/dashboard-advertisements/index.tsx | 12 ++++-----
 app/pages/dashboard-contents/index.tsx       |  2 +-
 app/pages/dashboard-subscribe-plan/index.tsx | 27 ++++++++++----------
 app/pages/dashboard-subscriptions/index.tsx  |  4 +--
 app/pages/dashboard-users/index.tsx          |  6 ++---
 app/pages/dashboard/data.ts                  | 10 ++++----
 app/pages/form-advertisements/index.tsx      |  4 +--
 app/pages/form-contents/index.tsx            |  2 +-
 app/pages/form-subscribe-plan/index.tsx      | 14 +++++-----
 14 files changed, 53 insertions(+), 54 deletions(-)

diff --git a/app/components/dialog/success.tsx b/app/components/dialog/success.tsx
index bd55460..e2d018c 100644
--- 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
diff --git a/app/layouts/admin/menu.ts b/app/layouts/admin/menu.ts
index 90513f8..eb26b85 100644
--- a/app/layouts/admin/menu.ts
+++ b/app/layouts/admin/menu.ts
@@ -30,7 +30,7 @@ export const MENU: TMenu[] = [
         icon: ChartBarSquareIcon,
       },
       {
-        title: 'User',
+        title: 'Pengguna',
         url: '/lg-admin/users',
         icon: UsersIcon,
       },
@@ -40,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,
       },
@@ -65,7 +65,7 @@ export const MENU: TMenu[] = [
         icon: TagIcon,
       },
       {
-        title: 'Subscribe Plan',
+        title: 'Paket Berlangganan',
         url: '/lg-admin/subscribe-plan',
         icon: DocumentCurrencyDollarIcon,
       },
diff --git a/app/layouts/admin/sidebar.tsx b/app/layouts/admin/sidebar.tsx
index f59cef4..a1ee355 100644
--- 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
diff --git a/app/layouts/news/dialog-register.tsx b/app/layouts/news/dialog-register.tsx
index 16afc38..b36321d 100644
--- 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}
               />
 
diff --git a/app/layouts/news/dialog-subscribe-plan.tsx b/app/layouts/news/dialog-subscribe-plan.tsx
index 67e1471..b5e7dad 100644
--- 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}
             />
 
diff --git a/app/pages/dashboard-advertisements/index.tsx b/app/pages/dashboard-advertisements/index.tsx
index ef3428a..cd6a38d 100644
--- a/app/pages/dashboard-advertisements/index.tsx
+++ b/app/pages/dashboard-advertisements/index.tsx
@@ -77,7 +77,7 @@ export const AdvertisementsPage = () => {
           as="a"
           href={`/lg-admin/advertisements/update/${value}`}
           size="icon"
-          title="Update Banner Iklan"
+          title="Update Spanduk Iklan"
         >
           <PencilSquareIcon className="size-4" />
         </Button>
@@ -86,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>
@@ -96,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>
@@ -106,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>
 
@@ -114,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
diff --git a/app/pages/dashboard-contents/index.tsx b/app/pages/dashboard-contents/index.tsx
index c5b21bb..d63a29f 100644
--- a/app/pages/dashboard-contents/index.tsx
+++ b/app/pages/dashboard-contents/index.tsx
@@ -93,7 +93,7 @@ export const ContentsPage = () => {
         </div>
       ) : (
         <div className="rounded-full bg-[#F5F5F5] px-2 text-center text-[#4C5CA0]">
-          Normal
+          Biasa
         </div>
       ),
     7: (value: number) => formatNumberWithPeriods(value),
diff --git a/app/pages/dashboard-subscribe-plan/index.tsx b/app/pages/dashboard-subscribe-plan/index.tsx
index 2f450ea..f2eedd8 100644
--- 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>
diff --git a/app/pages/dashboard-subscriptions/index.tsx b/app/pages/dashboard-subscriptions/index.tsx
index 2767fe5..a6ff2a9 100644
--- 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>
   )
diff --git a/app/pages/dashboard-users/index.tsx b/app/pages/dashboard-users/index.tsx
index 9a54eaa..0632c07 100644
--- a/app/pages/dashboard-users/index.tsx
+++ b/app/pages/dashboard-users/index.tsx
@@ -39,7 +39,7 @@ export const UsersPage = () => {
       data: 'created_at',
     },
     {
-      title: 'User',
+      title: 'Pengguna',
     },
     {
       title: 'Phone',
@@ -70,7 +70,7 @@ export const UsersPage = () => {
 
   return (
     <div className="relative">
-      <TitleDashboard title="User" />
+      <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 User"
+        title="Daftar Pengguna"
       />
     </div>
   )
diff --git a/app/pages/dashboard/data.ts b/app/pages/dashboard/data.ts
index 1feb7ba..88200c4 100644
--- a/app/pages/dashboard/data.ts
+++ b/app/pages/dashboard/data.ts
@@ -1,10 +1,10 @@
 import { ChartBarIcon, ChartPieIcon } from '@heroicons/react/24/solid'
 
 export const REPORT = [
-  { title: 'Total User', amount: 8, icon: ChartBarIcon },
-  { title: '⁠Total User Subscribe', amount: 0, icon: ChartBarIcon },
+  { title: 'Total Pengguna', amount: 8, icon: ChartBarIcon },
+  { title: '⁠Total Pelanggan', amount: 0, icon: ChartBarIcon },
   {
-    title: 'Total Nilai Subscribe',
+    title: 'Total Nilai Berlangganan',
     amount: 0,
     icon: ChartBarIcon,
     currency: 'Rp. ',
@@ -13,12 +13,12 @@ export const REPORT = [
 
 export const HISTORY = [
   {
-    title: 'Total Content Biasa',
+    title: 'Total Artikel Biasa',
     amount: 7,
     icon: ChartPieIcon,
   },
   {
-    title: 'Total Content Premium',
+    title: 'Total Artikel Premium',
     amount: 3,
     icon: ChartPieIcon,
   },
diff --git a/app/pages/form-advertisements/index.tsx b/app/pages/form-advertisements/index.tsx
index c6900ab..c5b8b2b 100644
--- 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
diff --git a/app/pages/form-contents/index.tsx b/app/pages/form-contents/index.tsx
index 22041e7..bd8d09a 100644
--- a/app/pages/form-contents/index.tsx
+++ b/app/pages/form-contents/index.tsx
@@ -193,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>
 
diff --git a/app/pages/form-subscribe-plan/index.tsx b/app/pages/form-subscribe-plan/index.tsx
index e0d3d4f..8ae7170 100644
--- 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]"