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

app/pages/dashboard-contents/index.tsx

@@ -1,5 +1,5 @@
-import DT from 'datatables.net-dt'
-import DataTable from 'datatables.net-react'
+import DT, { type Config, type ConfigColumns } from 'datatables.net-dt'
+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(
-    (a, b) => new Date(b.live_at).getTime() - new Date(a.live_at).getTime(),
-  )
-  const dataColumns = [
+  const dataTable =
+    loaderData?.newsData?.sort(
+      (a, b) => new Date(b.live_at).getTime() - new Date(a.live_at).getTime(),
+    ) || []
+  const dataColumns: ConfigColumns[] = [
     {
       title: 'No',
       render: (
-        data: unknown,
-        type: unknown,
-        row: unknown,
+        _data: unknown,
+        _type: 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,