feat: refactor category routes and components for improved organization and clarity

app/pages/dashboard-categories/index.tsx

@@ -1,5 +1,5 @@
-import DataTable from 'datatables.net-dt'
+import DT from 'datatables.net-dt'
-import DT from 'datatables.net-react'
+import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
@@ -10,9 +10,10 @@ export const CategoriesPage = () => {
   const loaderData = useRouteLoaderData<typeof loader>(
     'routes/_admin.lg-admin._dashboard.categories._index',
   )
-  const dataTable = loaderData?.dataCategories
+  const categoriesData = loaderData?.dataCategories
 
   DataTable.use(DT)
+  const dataTable = categoriesData
   const dataColumns = [
     {
       title: 'No',
@@ -38,7 +39,18 @@ export const CategoriesPage = () => {
       data: 'id',
     },
   ]
-
+  const dataSlot = {
+    3: (value: string) => (
+      <Button
+        as="a"
+        href={`/lg-admin/categories/update/${value}`}
+        className="text-md rounded-md"
+        size="sm"
+      >
+        Update Kategori
+      </Button>
+    ),
+  }
   const dataOptions = {
     paging: true,
     searching: true,
@@ -46,18 +58,6 @@ export const CategoriesPage = () => {
     info: true,
   }
 
-  const dataSlot = {
-    3: (value: string) => (
-      <Button
-        as="a"
-        href={`/lg-admin/category/update/${value}`}
-        className="text-md rounded-md"
-        size="sm"
-      >
-        Lihat Detail
-      </Button>
-    ),
-  }
   return (
     <div className="relative">
       <TitleDashboard title="Kategori" />
@@ -65,11 +65,11 @@ export const CategoriesPage = () => {
         <div className="flex-1">{/* TODO: Filter */}</div>
         <Button
           as={Link}
-          to="/lg-admin/category/create"
+          to="/lg-admin/categories/create"
           className="text-md h-[42px] rounded-md"
           size="lg"
         >
-          Create New
+          Buat Kategori
         </Button>
       </div>
 

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

@@ -11,5 +11,6 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
   })
   return { dataCategories }
 }
-const DashboardCategoriesLayout = () => <CategoriesPage />
+
-export default DashboardCategoriesLayout
+const DashboardCategoriesIndexLayout = () => <CategoriesPage />
+export default DashboardCategoriesIndexLayout

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

@@ -0,0 +1,4 @@
+import { CreateCategoryPage } from '~/pages/dashboard-category-create'
+
+const DashboardCategoriesCreateLayout = () => <CreateCategoryPage />
+export default DashboardCategoriesCreateLayout

app/routes/_admin.lg-admin._dashboard.categories.update.$slug.tsx

@@ -0,0 +1,4 @@
+import { UpdateCategoryPage } from '~/pages/dashboard-category-update'
+
+const DashboardCategoriesUpdateLayout = () => <UpdateCategoryPage />
+export default DashboardCategoriesUpdateLayout

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

@@ -1,4 +0,0 @@
-import { CreateCategoryPage } from '~/pages/dashboard-category-create'
-
-const DashboardCategoryLayout = () => <CreateCategoryPage />
-export default DashboardCategoryLayout

app/routes/_admin.lg-admin._dashboard.category.update.$slug.tsx

@@ -1,4 +0,0 @@
-import { UpdateCategoryPage } from '~/pages/dashboard-category-update'
-
-const DashboardCategoryUpdateLayout = () => <UpdateCategoryPage />
-export default DashboardCategoryUpdateLayout