feat: update UI text to Indonesian language across various components and pages

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>