feat: enhance category schema with sequence and description fields, and update dashboard display

app/apis/common/get-categories.ts

@@ -6,6 +6,8 @@ export const categoryResponseSchema = z.object({
   id: z.string(),
   name: z.string(),
   code: z.string(),
+  sequence: z.number().nullable(),
+  description: z.string().nullable(),
 })
 const categoriesResponseSchema = z.object({
   data: z.array(categoryResponseSchema),

app/pages/dashboard-categories/index.tsx

@@ -2,6 +2,7 @@ import DT from 'datatables.net-dt'
 import DataTable from 'datatables.net-react'
 import { Link, useRouteLoaderData } from 'react-router'
 
+import type { TCategoryResponse } from '~/apis/common/get-categories'
 import { Button } from '~/components/ui/button'
 import { UiTable } from '~/components/ui/table'
 import { TitleDashboard } from '~/components/ui/title-dashboard'
@@ -13,26 +14,33 @@ export const CategoriesPage = () => {
   const categoriesData = loaderData?.dataCategories
 
   DataTable.use(DT)
-  const dataTable = categoriesData
+  const dataTable = categoriesData?.sort((a, b) => {
+    if (a.sequence === null) return 1
+    if (b.sequence === null) return -1
+    return a.sequence - b.sequence
+  })
   const dataColumns = [
     {
       title: 'No',
       render: (
         data: unknown,
         type: unknown,
-        row: unknown,
+        row: TCategoryResponse,
         meta: { row: number },
       ) => {
-        return meta.row + 1
+        return `<div>${meta.row + 1}</div> ${
+          row.sequence === null
+            ? ''
+            : `<pre class="text-sm text-[#7C7C7C] inline">Urutan: ${row.sequence}</pre>`
+        }`
       },
     },
     {
-      title: 'Nama',
+      title: 'Kategori',
-      data: 'name',
     },
     {
-      title: 'Kode',
+      title: 'Deskripsi',
-      data: 'code',
+      data: 'description',
     },
     {
       title: 'Action',
@@ -40,6 +48,12 @@ export const CategoriesPage = () => {
     },
   ]
   const dataSlot = {
+    1: (_value: unknown, _type: unknown, data: TCategoryResponse) => (
+      <div>
+        <div>{data.name}</div>
+        <pre className="text-sm text-[#7C7C7C]">Kode: {data.code}</pre>
+      </div>
+    ),
     3: (value: string) => (
       <Button
         as="a"