refactor: update table component types and enhance admin menu with category and tag

app/components/ui/table.tsx

@@ -1,11 +1,11 @@
 import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
-import DataTable from 'datatables.net-react'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import React from 'react'
 
 type UiTableProperties = {
-  data: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  data: any[] // eslint-disable-line @typescript-eslint/no-explicit-any
   columns: ConfigColumns[]
-  slots?: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  slots?: DataTableSlots
   options?: Config
   title: string
 }

app/layouts/admin/menu.ts

@@ -72,4 +72,20 @@ export const SUB_MENU = [
     title: 'Update Artikel',
     path: '/lg-admin/contents/update',
   },
+  {
+    title: 'Buat Kategori',
+    path: '/lg-admin/categories/create',
+  },
+  {
+    title: 'Update Kategori',
+    path: '/lg-admin/categories/update',
+  },
+  {
+    title: 'Buat Tag',
+    path: '/lg-admin/tags/create',
+  },
+  {
+    title: 'Update Tag',
+    path: '/lg-admin/tags/update',
+  },
 ]

app/pages/dashboard-advertisements/index.tsx

@@ -1,5 +1,7 @@
 import { Field, Input, Label, Select } from '@headlessui/react'
 import { MagnifyingGlassIcon } from '@heroicons/react/20/solid'
+import type { ConfigColumns } from 'datatables.net-dt'
+import type { DataTableSlots } from 'datatables.net-react'
 import { useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 
@@ -36,14 +38,14 @@ export const AdvertisementsPage = ({
   }
 
   const dataBanner = BANNER
-  const dataColumns = [
+  const dataColumns: ConfigColumns[] = [
     { title: 'No', data: 'id' },
     { title: 'Banner', data: 'urlImage' },
     { title: 'Link', data: 'link' },
     { title: 'Tgl Create', data: 'createdAt' },
     { title: 'Status', data: 'status' },
   ]
-  const dataSlot = {
+  const dataSlot: DataTableSlots = {
     1: (value: string) => {
       return (
         <div>

app/pages/dashboard-categories/index.tsx

@@ -1,5 +1,5 @@
-import DT from 'datatables.net-dt'
+import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
-import DataTable from 'datatables.net-react'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
@@ -13,12 +13,13 @@ export const CategoriesPage = () => {
   )
 
   DataTable.use(DT)
-  const dataTable = loaderData?.categoriesData?.sort((a, b) => {
+  const dataTable =
+    loaderData?.categoriesData?.sort((a, b) => {
       if (a.sequence === null) return 1
       if (b.sequence === null) return -1
       return a.sequence - b.sequence
-  })
+    }) || []
-  const dataColumns = [
+  const dataColumns: ConfigColumns[] = [
     {
       title: 'No',
       render: (
@@ -46,7 +47,7 @@ export const CategoriesPage = () => {
       data: 'id',
     },
   ]
-  const dataSlot = {
+  const dataSlot: DataTableSlots = {
     1: (_value: unknown, _type: unknown, data: TCategoryResponse) => (
       <div>
         <div>{data.name}</div>
@@ -64,7 +65,7 @@ export const CategoriesPage = () => {
       </Button>
     ),
   }
-  const dataOptions = {
+  const dataOptions: Config = {
     paging: true,
     searching: true,
     ordering: true,

app/pages/dashboard-contents/index.tsx

@@ -1,5 +1,5 @@
-import DT from 'datatables.net-dt'
+import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
-import DataTable from 'datatables.net-react'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import type { TCategoryResponse } from '~/apis/common/get-categories'
@@ -17,16 +17,17 @@ export const ContentsPage = () => {
   )
 
   DataTable.use(DT)
-  const dataTable = loaderData?.newsData?.sort(
+  const dataTable =
+    loaderData?.newsData?.sort(
       (a, b) => new Date(b.live_at).getTime() - new Date(a.live_at).getTime(),
-  )
+    ) || []
-  const dataColumns = [
+  const dataColumns: ConfigColumns[] = [
     {
       title: 'No',
       render: (
-        data: unknown,
+        _data: unknown,
-        type: unknown,
+        _type: unknown,
-        row: unknown,
+        _row: unknown,
         meta: { row: number },
       ) => {
         return meta.row + 1
@@ -54,7 +55,7 @@ export const ContentsPage = () => {
       data: 'slug',
     },
   ]
-  const dataSlot = {
+  const dataSlot: DataTableSlots = {
     1: (value: string) => formatDate(value),
     2: (_value: unknown, _type: unknown, data: TNewsResponse) => (
       <div>
@@ -62,6 +63,7 @@ export const ContentsPage = () => {
         <div className="text-sm text-[#7C7C7C]">ID: {data.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>
     ),
@@ -89,7 +91,7 @@ export const ContentsPage = () => {
       </Button>
     ),
   }
-  const dataOptions = {
+  const dataOptions: Config = {
     paging: true,
     searching: true,
     ordering: true,

app/pages/dashboard-tags/index.tsx

@@ -1,5 +1,5 @@
-import DT from 'datatables.net-dt'
+import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
-import DataTable from 'datatables.net-react'
+import DataTable, { type DataTableSlots } from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
 import { Button } from '~/components/ui/button'
@@ -14,13 +14,13 @@ export const TagsPage = () => {
   const { tagsData: dataTable } = loaderData || {}
 
   DataTable.use(DT)
-  const dataColumns = [
+  const dataColumns: ConfigColumns[] = [
     {
       title: 'No',
       render: (
-        data: unknown,
+        _data: unknown,
-        type: unknown,
+        _type: unknown,
-        row: unknown,
+        _row: unknown,
         meta: { row: number },
       ) => {
         return meta.row + 1
@@ -39,15 +39,7 @@ export const TagsPage = () => {
       data: 'id',
     },
   ]
-
+  const dataSlot: DataTableSlots = {
-  const dataOptions = {
-    paging: true,
-    searching: true,
-    ordering: true,
-    info: true,
-  }
-
-  const dataSlot = {
     3: (value: string) => (
       <Button
         as="a"
@@ -59,6 +51,13 @@ export const TagsPage = () => {
       </Button>
     ),
   }
+  const dataOptions: Config = {
+    paging: true,
+    searching: true,
+    ordering: true,
+    info: true,
+  }
+
   return (
     <div className="relative">
       <TitleDashboard title="Tags" />
@@ -75,7 +74,7 @@ export const TagsPage = () => {
       </div>
 
       <UiTable
-        data={dataTable}
+        data={dataTable || []}
         columns={dataColumns}
         options={dataOptions}
         slots={dataSlot}