feat(categories): integrate new table into CategoriesPageClient, replace old table component with new implementation

Author: tyronejosee

src/app/(private)/dashboard/categories/client.tsx

@@ -1,21 +1,23 @@
 "use client";
 
-import type { Category, CategoryForm } from "@/types";
-
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useDisclosure, addToast } from "@heroui/react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { SquarePenIcon, Trash2 } from "lucide-react";
+
 import {
   createCategory,
   deleteCategory,
   updateCategory,
 } from "@/actions/categories";
-import { CategoryDrawer, CategoryTable } from "@/components/categories";
-import { DeleteModal, HeadingDashboard } from "@/components/ui";
+import { CategoryDrawer } from "@/components/categories";
+import { DeleteModal, HeadingDashboard, Table } from "@/components/ui";
 import { categorySchema } from "@/lib/zod";
 
+import type { Category, CategoryForm, TableAction, TableColumn } from "@/types";
+
 type Props = {
   categories: Category[];
 };
@@ -98,20 +100,54 @@ export default function CategoriesPageClient({ categories }: Props) {
     }
   };
 
+  const columns: TableColumn[] = [
+    { name: "Name", uid: "name", sortable: true },
+    { name: "Slug", uid: "slug", sortable: true },
+    { name: "Created At", uid: "created_at", sortable: true },
+  ];
+
+  const actions: TableAction[] = [
+    {
+      key: "edit",
+      label: "Edit Category",
+      icon: <SquarePenIcon size={18} />,
+      shortcut: "⌘E",
+      onAction: (category) => openEditModal(category),
+    },
+    {
+      key: "delete",
+      label: "Delete Category",
+      icon: <Trash2 size={18} />,
+      color: "danger",
+      shortcut: "⌘D",
+      onAction: (category) => handleDelete(category.id),
+    },
+  ];
+
   return (
     <div className="flex flex-col gap-4">
       {/* Heading */}
-      <HeadingDashboard
-        title="Categories"
-        count={categories.length}
-        openAddModal={openAddModal}
-      />
+      <HeadingDashboard title="Categories" count={categories.length} />
 
       {/* Table */}
-      <CategoryTable
-        categories={categories}
-        openEditModal={openEditModal}
-        handleDelete={handleDelete}
+      <Table
+        title="Category table"
+        data={categories}
+        columns={columns}
+        actions={actions}
+        searchPlaceholder="Search by name..."
+        searchKeys={["name"]}
+        defaultRowsPerPage={10}
+        rowsPerPageOptions={[10, 25, 50, 100]}
+        addButton={{ label: "Add Category", onAdd: () => openAddModal() }}
+        cellRenderer={({ item, columnKey, value }) => {
+          switch (columnKey) {
+            case "created_at":
+              return new Date(value).toLocaleDateString();
+            default:
+              return value;
+          }
+        }}
       />
 
       {/* Drawer */}