From ef2d5869b06538657412bb6da9c5cd20044f1e8f Mon Sep 17 00:00:00 2001
From: Giorgi Gordiashvili <giorgigordiashvili@Giorgis-MacBook-Pro.local>
Date: Mon, 13 Apr 2026 14:49:51 +0400
Subject: [PATCH] feat: implement Products List, Add Product, and Category
 pages

Add three pages under Pages > Products:
- Products List: data table with 18 products, search, status filter,
  sort, pagination, row selection, and delete action
- Add Product: form with General Information, Media, Pricing, and
  Inventory cards using react-hook-form + Zod validation
- Categories: data table with 10 categories, add/edit dialogs,
  delete action, search, and sort

Uses TanStack React Table, callback-based column factories for
functional row actions, and local state for CRUD operations.
---
 .../add/_components/add-product-form.tsx      |  69 +++++
 .../_components/general-information-card.tsx  | 129 +++++++++
 .../add/_components/inventory-card.tsx        |  71 +++++
 .../products/add/_components/media-card.tsx   |  17 ++
 .../products/add/_components/pricing-card.tsx |  56 ++++
 .../pages/products/add/_data/categories.ts    |  25 ++
 .../add/_schemas/add-product-schema.ts        |  38 +++
 .../pages/products/add/page.tsx               |  16 ++
 .../_components/add-category-dialog.tsx       | 141 ++++++++++
 .../_components/categories-table-columns.tsx  |  68 +++++
 .../categories-table-row-actions.tsx          |  51 ++++
 .../_components/categories-table-toolbar.tsx  |  32 +++
 .../category/_components/categories-table.tsx | 202 ++++++++++++++
 .../_components/edit-category-dialog.tsx      | 151 ++++++++++
 .../products/category/_data/categories.ts     |  74 +++++
 .../category/_schemas/category-schema.ts      |  15 +
 .../pages/products/category/page.tsx          |  17 ++
 .../_components/products-table-columns.tsx    | 127 +++++++++
 .../products-table-row-actions.tsx            |  49 ++++
 .../_components/products-table-toolbar.tsx    |  60 ++++
 .../list/_components/products-table.tsx       | 143 ++++++++++
 .../pages/products/list/_data/products.ts     | 264 ++++++++++++++++++
 .../pages/products/list/page.tsx              |  17 ++
 .../pages/products/types.ts                   |  36 +++
 full-kit/src/data/navigations.ts              |   9 +-
 25 files changed, 1871 insertions(+), 6 deletions(-)
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/add-product-form.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/general-information-card.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/inventory-card.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/media-card.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/pricing-card.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_data/categories.ts
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_schemas/add-product-schema.ts
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/page.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/add-category-dialog.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-columns.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-row-actions.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-toolbar.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/edit-category-dialog.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_data/categories.ts
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_schemas/category-schema.ts
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/page.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-columns.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-row-actions.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-toolbar.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_data/products.ts
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/page.tsx
 create mode 100644 full-kit/src/app/[lang]/(dashboard-layout)/pages/products/types.ts

diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/add-product-form.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/add-product-form.tsx
new file mode 100644
index 00000000..7b5a88e7
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/add-product-form.tsx
@@ -0,0 +1,69 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Save } from "lucide-react"
+
+import type { AddProductFormType } from "../../types"
+
+import { AddProductSchema } from "../_schemas/add-product-schema"
+
+import { ButtonLoading } from "@/components/ui/button"
+import { Form } from "@/components/ui/form"
+import { GeneralInformationCard } from "./general-information-card"
+import { InventoryCard } from "./inventory-card"
+import { MediaCard } from "./media-card"
+import { PricingCard } from "./pricing-card"
+
+export function AddProductForm() {
+  const form = useForm<AddProductFormType>({
+    resolver: zodResolver(AddProductSchema),
+    defaultValues: {
+      title: "",
+      sku: "",
+      description: "",
+      category: "",
+      price: undefined,
+      compareAtPrice: undefined,
+      stock: undefined,
+      status: "Active",
+      tags: [],
+    },
+  })
+
+  const { isSubmitting, isDirty } = form.formState
+  const isDisabled = isSubmitting || !isDirty
+
+  function onSubmit(data: AddProductFormType) {
+    // Demo only — no backend
+    console.log("Product data:", data)
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="grid gap-4 md:grid-cols-2"
+      >
+        <div className="md:col-span-2">
+          <GeneralInformationCard form={form} />
+        </div>
+        <div className="md:col-span-2">
+          <MediaCard />
+        </div>
+        <PricingCard form={form} />
+        <InventoryCard form={form} />
+        <div className="md:col-span-2">
+          <ButtonLoading
+            isLoading={isSubmitting}
+            disabled={isDisabled}
+            className="w-full"
+            icon={Save}
+          >
+            Save Product
+          </ButtonLoading>
+        </div>
+      </form>
+    </Form>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/general-information-card.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/general-information-card.tsx
new file mode 100644
index 00000000..3261f6ab
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/general-information-card.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import type { UseFormReturn } from "react-hook-form"
+import type { AddProductFormType } from "../../types"
+
+import { categoryOptionsData, tagSuggestionsData } from "../_data/categories"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { InputTagsWithSuggestions } from "@/components/ui/input-tags"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+
+interface GeneralInformationCardProps {
+  form: UseFormReturn<AddProductFormType>
+}
+
+export function GeneralInformationCard({ form }: GeneralInformationCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>General Information</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <div className="grid grid-cols-2 gap-4">
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Title</FormLabel>
+                <FormControl>
+                  <Input placeholder="Product name" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="sku"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>SKU</FormLabel>
+                <FormControl>
+                  <Input placeholder="e.g. BH-001" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="Product description"
+                  className="resize-none"
+                  rows={4}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="category"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Category</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select a category" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {categoryOptionsData.map((cat) => (
+                    <SelectItem key={cat} value={cat}>
+                      {cat}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="tags"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Tags</FormLabel>
+              <FormControl>
+                <InputTagsWithSuggestions
+                  suggestions={tagSuggestionsData}
+                  tags={field.value ?? []}
+                  onTagsChange={field.onChange}
+                  placeholder="Add tags..."
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/inventory-card.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/inventory-card.tsx
new file mode 100644
index 00000000..c78919cc
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/inventory-card.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import type { UseFormReturn } from "react-hook-form"
+import type { AddProductFormType } from "../../types"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+interface InventoryCardProps {
+  form: UseFormReturn<AddProductFormType>
+}
+
+export function InventoryCard({ form }: InventoryCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Inventory</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <FormField
+          control={form.control}
+          name="stock"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Stock Quantity</FormLabel>
+              <FormControl>
+                <Input type="number" placeholder="0" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="status"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Status</FormLabel>
+              <Select onValueChange={field.onChange} defaultValue={field.value}>
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select status" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  <SelectItem value="Active">Active</SelectItem>
+                  <SelectItem value="Draft">Draft</SelectItem>
+                </SelectContent>
+              </Select>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/media-card.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/media-card.tsx
new file mode 100644
index 00000000..cc815ea0
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/media-card.tsx
@@ -0,0 +1,17 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { FileDropzone } from "@/components/ui/file-dropzone"
+
+export function MediaCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Media</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <FileDropzone multiple accept={{ "image/*": [] }} />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/pricing-card.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/pricing-card.tsx
new file mode 100644
index 00000000..3e53c781
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_components/pricing-card.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import type { UseFormReturn } from "react-hook-form"
+import type { AddProductFormType } from "../../types"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+
+interface PricingCardProps {
+  form: UseFormReturn<AddProductFormType>
+}
+
+export function PricingCard({ form }: PricingCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Pricing</CardTitle>
+      </CardHeader>
+      <CardContent className="grid gap-4">
+        <FormField
+          control={form.control}
+          name="price"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Price</FormLabel>
+              <FormControl>
+                <Input type="number" placeholder="0.00" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="compareAtPrice"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Compare-at Price</FormLabel>
+              <FormControl>
+                <Input type="number" placeholder="0.00" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_data/categories.ts b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_data/categories.ts
new file mode 100644
index 00000000..b3fdfc1f
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_data/categories.ts
@@ -0,0 +1,25 @@
+export const categoryOptionsData = [
+  "Electronics",
+  "Wearables",
+  "Cameras",
+  "Phones",
+  "Audio",
+  "Accessories",
+  "Gaming",
+  "Storage",
+  "Networking",
+  "Peripherals",
+]
+
+export const tagSuggestionsData = [
+  "wireless",
+  "bluetooth",
+  "usb-c",
+  "portable",
+  "premium",
+  "budget",
+  "new-arrival",
+  "best-seller",
+  "limited-edition",
+  "waterproof",
+]
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_schemas/add-product-schema.ts b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_schemas/add-product-schema.ts
new file mode 100644
index 00000000..beda63ed
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/_schemas/add-product-schema.ts
@@ -0,0 +1,38 @@
+import { z } from "zod"
+
+export const AddProductSchema = z.object({
+  title: z
+    .string()
+    .trim()
+    .min(2, { message: "Title must contain at least 2 characters." })
+    .max(100, { message: "Title must contain at most 100 characters." }),
+  sku: z
+    .string()
+    .trim()
+    .min(2, { message: "SKU must contain at least 2 characters." })
+    .max(20, { message: "SKU must contain at most 20 characters." }),
+  description: z
+    .string()
+    .trim()
+    .min(10, { message: "Description must contain at least 10 characters." })
+    .max(500, { message: "Description must contain at most 500 characters." }),
+  category: z.string().min(1, { message: "Please select a category." }),
+  price: z.coerce
+    .number()
+    .positive({ message: "Price must be a positive number." }),
+  compareAtPrice: z
+    .union([
+      z.coerce
+        .number()
+        .positive({ message: "Compare-at price must be a positive number." }),
+      z.literal(""),
+    ])
+    .optional()
+    .transform((val) => (val === "" ? undefined : val)),
+  stock: z.coerce
+    .number()
+    .int({ message: "Stock must be a whole number." })
+    .nonnegative({ message: "Stock cannot be negative." }),
+  status: z.enum(["Active", "Draft"]),
+  tags: z.array(z.string()).optional().default([]),
+})
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/page.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/page.tsx
new file mode 100644
index 00000000..e91573e4
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/add/page.tsx
@@ -0,0 +1,16 @@
+import type { Metadata } from "next"
+
+import { AddProductForm } from "./_components/add-product-form"
+
+export const metadata: Metadata = {
+  title: "Add Product",
+}
+
+export default function AddProductPage() {
+  return (
+    <section className="container p-4">
+      <h1 className="text-2xl font-semibold mb-4">Add Product</h1>
+      <AddProductForm />
+    </section>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/add-category-dialog.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/add-category-dialog.tsx
new file mode 100644
index 00000000..3d23a1e6
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/add-category-dialog.tsx
@@ -0,0 +1,141 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Plus } from "lucide-react"
+
+import type { CategoryFormType } from "../../types"
+
+import { CategorySchema } from "../_schemas/category-schema"
+
+import { ButtonLoading } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+
+interface AddCategoryDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onAdd: (data: CategoryFormType) => void
+}
+
+export function AddCategoryDialog({
+  open,
+  onOpenChange,
+  onAdd,
+}: AddCategoryDialogProps) {
+  const form = useForm<CategoryFormType>({
+    resolver: zodResolver(CategorySchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      status: "Active",
+    },
+  })
+
+  const { isSubmitting, isDirty } = form.formState
+
+  function onSubmit(data: CategoryFormType) {
+    onAdd(data)
+    form.reset()
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add Category</DialogTitle>
+          <DialogDescription>Create a new product category.</DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Category name" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Category description"
+                      className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Status</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="Active">Active</SelectItem>
+                      <SelectItem value="Inactive">Inactive</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <ButtonLoading
+              isLoading={isSubmitting}
+              disabled={isSubmitting || !isDirty}
+              className="w-full"
+              icon={Plus}
+            >
+              Add Category
+            </ButtonLoading>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-columns.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-columns.tsx
new file mode 100644
index 00000000..8d0f048c
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-columns.tsx
@@ -0,0 +1,68 @@
+"use client"
+
+import type { ColumnDef } from "@tanstack/react-table"
+import type { CategoryType } from "../../types"
+
+import { Badge } from "@/components/ui/badge"
+import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header"
+import { CategoriesTableRowActions } from "./categories-table-row-actions"
+
+export function getCategoriesTableColumns(
+  onEdit: (category: CategoryType) => void,
+  onDelete: (id: string) => void
+): ColumnDef<CategoryType>[] {
+  return [
+    {
+      accessorKey: "name",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Name" />
+      ),
+      cell: ({ row }) => (
+        <span className="font-medium">{row.getValue("name")}</span>
+      ),
+    },
+    {
+      accessorKey: "description",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Description" />
+      ),
+      cell: ({ row }) => (
+        <span className="inline-block max-w-60 truncate text-muted-foreground">
+          {row.getValue("description")}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "productCount",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Products" />
+      ),
+    },
+    {
+      accessorKey: "status",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Status" />
+      ),
+      cell: ({ row }) => {
+        const status = row.getValue("status") as string
+
+        return (
+          <Badge variant={status === "Active" ? "default" : "secondary"}>
+            {status}
+          </Badge>
+        )
+      },
+    },
+    {
+      id: "actions",
+      header: () => <span className="sr-only">Actions</span>,
+      cell: ({ row }) => (
+        <CategoriesTableRowActions
+          category={row.original}
+          onEdit={onEdit}
+          onDelete={onDelete}
+        />
+      ),
+    },
+  ]
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-row-actions.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-row-actions.tsx
new file mode 100644
index 00000000..dd6c3874
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-row-actions.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+import { MoreHorizontal, Pencil, Trash2 } from "lucide-react"
+
+import type { CategoryType } from "../../types"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+interface CategoriesTableRowActionsProps {
+  category: CategoryType
+  onEdit: (category: CategoryType) => void
+  onDelete: (id: string) => void
+}
+
+export function CategoriesTableRowActions({
+  category,
+  onEdit,
+  onDelete,
+}: CategoriesTableRowActionsProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-8 w-8">
+          <MoreHorizontal className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => onEdit(category)}>
+          <Pencil className="me-2 h-4 w-4" />
+          Edit
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="text-destructive focus:text-destructive"
+          onClick={() => onDelete(category.id)}
+        >
+          <Trash2 className="me-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-toolbar.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-toolbar.tsx
new file mode 100644
index 00000000..954abed6
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table-toolbar.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import { Search } from "lucide-react"
+
+import type { Table } from "@tanstack/react-table"
+import type { CategoryType } from "../../types"
+
+import { DataTableViewOptions } from "@/components/ui/data-table/data-table-column-toggle"
+import { Input } from "@/components/ui/input"
+
+interface CategoriesTableToolbarProps {
+  table: Table<CategoryType>
+}
+
+export function CategoriesTableToolbar({ table }: CategoriesTableToolbarProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="relative">
+        <Search className="absolute start-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder="Search categories..."
+          value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("name")?.setFilterValue(event.target.value)
+          }
+          className="h-9 w-40 ps-8 md:w-60"
+        />
+      </div>
+      <DataTableViewOptions table={table} />
+    </div>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table.tsx
new file mode 100644
index 00000000..e6ae547c
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/categories-table.tsx
@@ -0,0 +1,202 @@
+"use client"
+
+import { useCallback, useMemo, useState } from "react"
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { Plus } from "lucide-react"
+
+import type {
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+} from "@tanstack/react-table"
+import type { CategoryFormType, CategoryType } from "../../types"
+
+import { Button } from "@/components/ui/button"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { DataTablePagination } from "@/components/ui/data-table/data-table-pagination"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { AddCategoryDialog } from "./add-category-dialog"
+import { getCategoriesTableColumns } from "./categories-table-columns"
+import { CategoriesTableToolbar } from "./categories-table-toolbar"
+import { EditCategoryDialog } from "./edit-category-dialog"
+
+interface CategoriesTableProps {
+  data: CategoryType[]
+}
+
+export function CategoriesTable({ data: initialData }: CategoriesTableProps) {
+  const [categories, setCategories] = useState<CategoryType[]>(initialData)
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+
+  const [addDialogOpen, setAddDialogOpen] = useState(false)
+  const [editDialogOpen, setEditDialogOpen] = useState(false)
+  const [editingCategory, setEditingCategory] = useState<CategoryType | null>(
+    null
+  )
+
+  function handleAdd(data: CategoryFormType) {
+    const newCategory: CategoryType = {
+      id: crypto.randomUUID(),
+      name: data.name,
+      description: data.description,
+      productCount: 0,
+      status: data.status,
+    }
+    setCategories((prev) => [...prev, newCategory])
+  }
+
+  function handleEdit(data: CategoryFormType & { id: string }) {
+    setCategories((prev) =>
+      prev.map((c) =>
+        c.id === data.id
+          ? {
+              ...c,
+              name: data.name,
+              description: data.description,
+              status: data.status,
+            }
+          : c
+      )
+    )
+  }
+
+  const handleDelete = useCallback((id: string) => {
+    setCategories((prev) => prev.filter((c) => c.id !== id))
+  }, [])
+
+  const handleEditOpen = useCallback((category: CategoryType) => {
+    setEditingCategory(category)
+    setEditDialogOpen(true)
+  }, [])
+
+  const columns = useMemo(
+    () => getCategoriesTableColumns(handleEditOpen, handleDelete),
+    [handleEditOpen, handleDelete]
+  )
+
+  const table = useReactTable({
+    data: categories,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
+  })
+
+  return (
+    <>
+      <Card>
+        <CardHeader className="flex-row justify-between items-center gap-x-1.5 space-y-0">
+          <CardTitle>Categories</CardTitle>
+          <div className="flex items-center gap-2">
+            <CategoriesTableToolbar table={table} />
+            <Button
+              size="sm"
+              className="h-9"
+              onClick={() => setAddDialogOpen(true)}
+            >
+              <Plus className="me-2 h-4 w-4" />
+              Add Category
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          <ScrollArea
+            orientation="horizontal"
+            className="w-[calc(100vw-2.25rem)] md:w-auto"
+          >
+            <Table>
+              <TableHeader>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <TableRow key={headerGroup.id}>
+                    {headerGroup.headers.map((header) => (
+                      <TableHead key={header.id}>
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext()
+                            )}
+                      </TableHead>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableHeader>
+              <TableBody>
+                {table.getRowModel().rows?.length ? (
+                  table.getRowModel().rows.map((row) => (
+                    <TableRow key={row.id}>
+                      {row.getVisibleCells().map((cell) => (
+                        <TableCell key={cell.id}>
+                          {flexRender(
+                            cell.column.columnDef.cell,
+                            cell.getContext()
+                          )}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell
+                      colSpan={columns.length}
+                      className="h-24 text-center"
+                    >
+                      No results.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </ScrollArea>
+        </CardContent>
+        <CardFooter className="block py-3">
+          <DataTablePagination table={table} />
+        </CardFooter>
+      </Card>
+
+      <AddCategoryDialog
+        open={addDialogOpen}
+        onOpenChange={setAddDialogOpen}
+        onAdd={handleAdd}
+      />
+      <EditCategoryDialog
+        category={editingCategory}
+        open={editDialogOpen}
+        onOpenChange={setEditDialogOpen}
+        onEdit={handleEdit}
+      />
+    </>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/edit-category-dialog.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/edit-category-dialog.tsx
new file mode 100644
index 00000000..81f1db13
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_components/edit-category-dialog.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { useEffect } from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Save } from "lucide-react"
+
+import type { CategoryFormType, CategoryType } from "../../types"
+
+import { CategorySchema } from "../_schemas/category-schema"
+
+import { ButtonLoading } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+
+interface EditCategoryDialogProps {
+  category: CategoryType | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onEdit: (data: CategoryFormType & { id: string }) => void
+}
+
+export function EditCategoryDialog({
+  category,
+  open,
+  onOpenChange,
+  onEdit,
+}: EditCategoryDialogProps) {
+  const form = useForm<CategoryFormType>({
+    resolver: zodResolver(CategorySchema),
+    defaultValues: {
+      name: "",
+      description: "",
+      status: "Active",
+    },
+  })
+
+  useEffect(() => {
+    if (category) {
+      form.reset({
+        name: category.name,
+        description: category.description,
+        status: category.status,
+      })
+    }
+  }, [category, form])
+
+  const { isSubmitting, isDirty } = form.formState
+
+  function onSubmit(data: CategoryFormType) {
+    if (!category) return
+    onEdit({ ...data, id: category.id })
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Category</DialogTitle>
+          <DialogDescription>Update category details.</DialogDescription>
+        </DialogHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Category name" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Description</FormLabel>
+                  <FormControl>
+                    <Textarea
+                      placeholder="Category description"
+                      className="resize-none"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Status</FormLabel>
+                  <Select onValueChange={field.onChange} value={field.value}>
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="Active">Active</SelectItem>
+                      <SelectItem value="Inactive">Inactive</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <ButtonLoading
+              isLoading={isSubmitting}
+              disabled={isSubmitting || !isDirty}
+              className="w-full"
+              icon={Save}
+            >
+              Save Changes
+            </ButtonLoading>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_data/categories.ts b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_data/categories.ts
new file mode 100644
index 00000000..e275853f
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_data/categories.ts
@@ -0,0 +1,74 @@
+import type { CategoryType } from "../../types"
+
+export const categoriesData: CategoryType[] = [
+  {
+    id: "cat-001",
+    name: "Electronics",
+    description: "Electronic devices and gadgets",
+    productCount: 24,
+    status: "Active",
+  },
+  {
+    id: "cat-002",
+    name: "Wearables",
+    description: "Smartwatches, fitness trackers, and wearable tech",
+    productCount: 12,
+    status: "Active",
+  },
+  {
+    id: "cat-003",
+    name: "Cameras",
+    description: "Digital cameras and photography equipment",
+    productCount: 8,
+    status: "Active",
+  },
+  {
+    id: "cat-004",
+    name: "Phones",
+    description: "Smartphones and mobile devices",
+    productCount: 15,
+    status: "Active",
+  },
+  {
+    id: "cat-005",
+    name: "Audio",
+    description: "Headphones, speakers, and audio equipment",
+    productCount: 18,
+    status: "Active",
+  },
+  {
+    id: "cat-006",
+    name: "Accessories",
+    description: "Cables, cases, stands, and other accessories",
+    productCount: 45,
+    status: "Active",
+  },
+  {
+    id: "cat-007",
+    name: "Gaming",
+    description: "Gaming peripherals and accessories",
+    productCount: 10,
+    status: "Active",
+  },
+  {
+    id: "cat-008",
+    name: "Storage",
+    description: "SSDs, hard drives, and memory cards",
+    productCount: 6,
+    status: "Active",
+  },
+  {
+    id: "cat-009",
+    name: "Networking",
+    description: "Routers, switches, and network equipment",
+    productCount: 4,
+    status: "Inactive",
+  },
+  {
+    id: "cat-010",
+    name: "Peripherals",
+    description: "Keyboards, mice, webcams, and other peripherals",
+    productCount: 0,
+    status: "Inactive",
+  },
+]
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_schemas/category-schema.ts b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_schemas/category-schema.ts
new file mode 100644
index 00000000..9da69029
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/_schemas/category-schema.ts
@@ -0,0 +1,15 @@
+import { z } from "zod"
+
+export const CategorySchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(2, { message: "Name must contain at least 2 characters." })
+    .max(50, { message: "Name must contain at most 50 characters." }),
+  description: z
+    .string()
+    .trim()
+    .min(2, { message: "Description must contain at least 2 characters." })
+    .max(200, { message: "Description must contain at most 200 characters." }),
+  status: z.enum(["Active", "Inactive"]),
+})
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/page.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/page.tsx
new file mode 100644
index 00000000..faaeab37
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/category/page.tsx
@@ -0,0 +1,17 @@
+import type { Metadata } from "next"
+
+import { categoriesData } from "./_data/categories"
+
+import { CategoriesTable } from "./_components/categories-table"
+
+export const metadata: Metadata = {
+  title: "Product Categories",
+}
+
+export default function ProductCategoryPage() {
+  return (
+    <section className="container p-4">
+      <CategoriesTable data={categoriesData} />
+    </section>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-columns.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-columns.tsx
new file mode 100644
index 00000000..70785779
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-columns.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import Image from "next/image"
+
+import type { ColumnDef } from "@tanstack/react-table"
+import type { ProductType } from "../../types"
+
+import { formatCurrency } from "@/lib/utils"
+
+import { Badge } from "@/components/ui/badge"
+import { Checkbox } from "@/components/ui/checkbox"
+import { DataTableColumnHeader } from "@/components/ui/data-table/data-table-column-header"
+import { ProductsTableRowActions } from "./products-table-row-actions"
+
+export function getProductsTableColumns(
+  onDelete: (id: string) => void
+): ColumnDef<ProductType>[] {
+  return [
+    {
+      id: "select",
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() && "indeterminate")
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          className="ms-4"
+          aria-label="Select all"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          className="ms-4"
+          aria-label="Select row"
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    },
+    {
+      accessorKey: "name",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Product" />
+      ),
+      cell: ({ row }) => {
+        const product = row.original
+
+        return (
+          <div className="flex items-center gap-3">
+            <Image
+              src={product.image}
+              alt={product.name}
+              width={40}
+              height={40}
+              className="aspect-square rounded-lg object-cover"
+            />
+            <span className="inline-block max-w-44 truncate font-medium">
+              {product.name}
+            </span>
+          </div>
+        )
+      },
+    },
+    {
+      accessorKey: "sku",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="SKU" />
+      ),
+      cell: ({ row }) => (
+        <span className="text-muted-foreground">{row.getValue("sku")}</span>
+      ),
+    },
+    {
+      accessorKey: "category",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Category" />
+      ),
+    },
+    {
+      accessorKey: "price",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Price" />
+      ),
+      cell: ({ row }) => <span>{formatCurrency(row.getValue("price"))}</span>,
+    },
+    {
+      accessorKey: "stock",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Stock" />
+      ),
+    },
+    {
+      accessorKey: "status",
+      header: ({ column }) => (
+        <DataTableColumnHeader column={column} title="Status" />
+      ),
+      cell: ({ row }) => {
+        const status = row.getValue("status") as string
+
+        return (
+          <Badge
+            variant={
+              status === "Out of Stock"
+                ? "destructive"
+                : status === "Low Stock"
+                  ? "secondary"
+                  : "default"
+            }
+          >
+            {status}
+          </Badge>
+        )
+      },
+      filterFn: "equals",
+    },
+    {
+      id: "actions",
+      header: () => <span className="sr-only">Actions</span>,
+      cell: ({ row }) => (
+        <ProductsTableRowActions product={row.original} onDelete={onDelete} />
+      ),
+    },
+  ]
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-row-actions.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-row-actions.tsx
new file mode 100644
index 00000000..0a5ea341
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-row-actions.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { MoreHorizontal, Pencil, Trash2 } from "lucide-react"
+
+import type { ProductType } from "../../types"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+interface ProductsTableRowActionsProps {
+  product: ProductType
+  onDelete: (id: string) => void
+}
+
+export function ProductsTableRowActions({
+  product,
+  onDelete,
+}: ProductsTableRowActionsProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-8 w-8">
+          <MoreHorizontal className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem>
+          <Pencil className="me-2 h-4 w-4" />
+          Edit
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          className="text-destructive focus:text-destructive"
+          onClick={() => onDelete(product.id)}
+        >
+          <Trash2 className="me-2 h-4 w-4" />
+          Delete
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-toolbar.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-toolbar.tsx
new file mode 100644
index 00000000..96e101ca
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table-toolbar.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { Search } from "lucide-react"
+
+import type { Table } from "@tanstack/react-table"
+import type { ProductType } from "../../types"
+
+import { productStatusesData } from "../_data/products"
+
+import { DataTableViewOptions } from "@/components/ui/data-table/data-table-column-toggle"
+import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+interface ProductsTableToolbarProps {
+  table: Table<ProductType>
+}
+
+export function ProductsTableToolbar({ table }: ProductsTableToolbarProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="relative">
+        <Search className="absolute start-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder="Search products..."
+          value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+          onChange={(event) =>
+            table.getColumn("name")?.setFilterValue(event.target.value)
+          }
+          className="h-9 w-40 ps-8 md:w-60"
+        />
+      </div>
+      <Select
+        value={(table.getColumn("status")?.getFilterValue() as string) ?? "all"}
+        onValueChange={(value) =>
+          table
+            .getColumn("status")
+            ?.setFilterValue(value === "all" ? undefined : value)
+        }
+      >
+        <SelectTrigger className="h-9 w-32">
+          <SelectValue placeholder="Status" />
+        </SelectTrigger>
+        <SelectContent>
+          {productStatusesData.map((status) => (
+            <SelectItem key={status.value} value={status.value}>
+              {status.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <DataTableViewOptions table={table} />
+    </div>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table.tsx
new file mode 100644
index 00000000..3ceac7e2
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_components/products-table.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import { useCallback, useMemo, useState } from "react"
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import type {
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+} from "@tanstack/react-table"
+import type { ProductType } from "../../types"
+
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import { DataTablePagination } from "@/components/ui/data-table/data-table-pagination"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { getProductsTableColumns } from "./products-table-columns"
+import { ProductsTableToolbar } from "./products-table-toolbar"
+
+interface ProductsTableProps {
+  data: ProductType[]
+}
+
+export function ProductsTable({ data: initialData }: ProductsTableProps) {
+  const [products, setProducts] = useState<ProductType[]>(initialData)
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = useState({})
+
+  const handleDelete = useCallback((id: string) => {
+    setProducts((prev) => prev.filter((p) => p.id !== id))
+  }, [])
+
+  const columns = useMemo(
+    () => getProductsTableColumns(handleDelete),
+    [handleDelete]
+  )
+
+  const table = useReactTable({
+    data: products,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  })
+
+  return (
+    <Card>
+      <CardHeader className="flex-row justify-between items-center gap-x-1.5 space-y-0">
+        <CardTitle>Products</CardTitle>
+        <ProductsTableToolbar table={table} />
+      </CardHeader>
+      <CardContent className="p-0">
+        <ScrollArea
+          orientation="horizontal"
+          className="w-[calc(100vw-2.25rem)] md:w-auto"
+        >
+          <Table>
+            <TableHeader>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <TableRow key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              ))}
+            </TableHeader>
+            <TableBody>
+              {table.getRowModel().rows?.length ? (
+                table.getRowModel().rows.map((row) => (
+                  <TableRow
+                    key={row.id}
+                    data-state={row.getIsSelected() && "selected"}
+                  >
+                    {row.getVisibleCells().map((cell) => (
+                      <TableCell key={cell.id}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                ))
+              ) : (
+                <TableRow>
+                  <TableCell
+                    colSpan={columns.length}
+                    className="h-24 text-center"
+                  >
+                    No results.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </ScrollArea>
+      </CardContent>
+      <CardFooter className="block py-3">
+        <DataTablePagination table={table} />
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_data/products.ts b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_data/products.ts
new file mode 100644
index 00000000..26cd97c2
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/_data/products.ts
@@ -0,0 +1,264 @@
+import type { ProductType } from "../../types"
+
+export const productStatusesData = [
+  { label: "All", value: "all" },
+  { label: "In Stock", value: "In Stock" },
+  { label: "Low Stock", value: "Low Stock" },
+  { label: "Out of Stock", value: "Out of Stock" },
+]
+
+export const productsData: ProductType[] = [
+  {
+    id: "prod-001",
+    name: "Bluetooth Headphones",
+    sku: "BH-001",
+    description:
+      "Premium wireless bluetooth headphones with noise cancellation",
+    category: "Audio",
+    price: 4000,
+    compareAtPrice: 4500,
+    stock: 150,
+    status: "In Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-01.jpg",
+    tags: ["wireless", "audio", "bluetooth"],
+  },
+  {
+    id: "prod-002",
+    name: "Smartwatch",
+    sku: "SW-002",
+    description: "Feature-rich smartwatch with health monitoring",
+    category: "Wearables",
+    price: 8000,
+    compareAtPrice: null,
+    stock: 72,
+    status: "In Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-02.jpg",
+    tags: ["wearable", "fitness"],
+  },
+  {
+    id: "prod-003",
+    name: "Mirrorless Camera",
+    sku: "MC-003",
+    description: "Professional mirrorless camera with 4K video",
+    category: "Cameras",
+    price: 3000,
+    compareAtPrice: 3500,
+    stock: 5,
+    status: "Low Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-03.jpg",
+    tags: ["camera", "photography"],
+  },
+  {
+    id: "prod-004",
+    name: "Smartphone",
+    sku: "SP-004",
+    description: "Latest generation smartphone with advanced features",
+    category: "Phones",
+    price: 2000,
+    compareAtPrice: null,
+    stock: 0,
+    status: "Out of Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-04.jpg",
+    tags: ["phone", "mobile"],
+  },
+  {
+    id: "prod-005",
+    name: "Wireless Earbuds",
+    sku: "WE-005",
+    description: "Compact wireless earbuds with deep bass",
+    category: "Audio",
+    price: 1500,
+    compareAtPrice: 1800,
+    stock: 200,
+    status: "In Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-01.jpg",
+    tags: ["wireless", "audio"],
+  },
+  {
+    id: "prod-006",
+    name: "Fitness Tracker",
+    sku: "FT-006",
+    description: "Lightweight fitness tracker with heart rate monitor",
+    category: "Wearables",
+    price: 500,
+    compareAtPrice: null,
+    stock: 85,
+    status: "In Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-02.jpg",
+    tags: ["fitness", "wearable"],
+  },
+  {
+    id: "prod-007",
+    name: "Action Camera",
+    sku: "AC-007",
+    description: "Waterproof action camera for outdoor adventures",
+    category: "Cameras",
+    price: 4500,
+    compareAtPrice: 5000,
+    stock: 3,
+    status: "Low Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-03.jpg",
+    tags: ["camera", "waterproof"],
+  },
+  {
+    id: "prod-008",
+    name: "Tablet",
+    sku: "TB-008",
+    description: "High-performance tablet with retina display",
+    category: "Electronics",
+    price: 6000,
+    compareAtPrice: null,
+    stock: 45,
+    status: "In Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-04.jpg",
+    tags: ["tablet", "portable"],
+  },
+  {
+    id: "prod-009",
+    name: "Mechanical Keyboard",
+    sku: "MK-009",
+    description: "RGB mechanical keyboard with cherry switches",
+    category: "Peripherals",
+    price: 1200,
+    compareAtPrice: 1400,
+    stock: 0,
+    status: "Out of Stock",
+    publishStatus: "Draft",
+    image: "/images/misc/product-01.jpg",
+    tags: ["keyboard", "gaming"],
+  },
+  {
+    id: "prod-010",
+    name: "Gaming Mouse",
+    sku: "GM-010",
+    description: "Ergonomic gaming mouse with adjustable DPI",
+    category: "Gaming",
+    price: 800,
+    compareAtPrice: null,
+    stock: 120,
+    status: "In Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-02.jpg",
+    tags: ["gaming", "mouse"],
+  },
+  {
+    id: "prod-011",
+    name: "Portable SSD",
+    sku: "PS-011",
+    description: "1TB portable SSD with USB-C connectivity",
+    category: "Storage",
+    price: 1100,
+    compareAtPrice: null,
+    stock: 60,
+    status: "In Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-03.jpg",
+    tags: ["storage", "portable", "usb-c"],
+  },
+  {
+    id: "prod-012",
+    name: "Wi-Fi Router",
+    sku: "WR-012",
+    description: "Dual-band Wi-Fi 6 router for high-speed internet",
+    category: "Networking",
+    price: 2500,
+    compareAtPrice: 2800,
+    stock: 8,
+    status: "Low Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-04.jpg",
+    tags: ["networking", "wifi"],
+  },
+  {
+    id: "prod-013",
+    name: "USB-C Hub",
+    sku: "UH-013",
+    description: "7-in-1 USB-C hub with HDMI and ethernet",
+    category: "Accessories",
+    price: 450,
+    compareAtPrice: null,
+    stock: 300,
+    status: "In Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-01.jpg",
+    tags: ["usb-c", "accessories"],
+  },
+  {
+    id: "prod-014",
+    name: "Monitor Stand",
+    sku: "MS-014",
+    description: "Adjustable monitor stand with cable management",
+    category: "Accessories",
+    price: 350,
+    compareAtPrice: 400,
+    stock: 0,
+    status: "Out of Stock",
+    publishStatus: "Draft",
+    image: "/images/misc/product-02.jpg",
+    tags: ["accessories", "desk"],
+  },
+  {
+    id: "prod-015",
+    name: "Gaming Headset",
+    sku: "GH-015",
+    description: "Surround sound gaming headset with microphone",
+    category: "Gaming",
+    price: 900,
+    compareAtPrice: null,
+    stock: 95,
+    status: "In Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-03.jpg",
+    tags: ["gaming", "audio"],
+  },
+  {
+    id: "prod-016",
+    name: "Webcam HD",
+    sku: "WC-016",
+    description: "1080p webcam with auto-focus and noise reduction",
+    category: "Peripherals",
+    price: 700,
+    compareAtPrice: 800,
+    stock: 2,
+    status: "Low Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-04.jpg",
+    tags: ["webcam", "video"],
+  },
+  {
+    id: "prod-017",
+    name: "Power Bank",
+    sku: "PB-017",
+    description: "20000mAh power bank with fast charging",
+    category: "Accessories",
+    price: 350,
+    compareAtPrice: null,
+    stock: 180,
+    status: "In Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-01.jpg",
+    tags: ["portable", "charging"],
+  },
+  {
+    id: "prod-018",
+    name: "Smart Speaker",
+    sku: "SS-018",
+    description: "Voice-controlled smart speaker with premium sound",
+    category: "Audio",
+    price: 1800,
+    compareAtPrice: 2000,
+    stock: 0,
+    status: "Out of Stock",
+    publishStatus: "Active",
+    image: "/images/misc/product-02.jpg",
+    tags: ["audio", "smart-home"],
+  },
+]
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/page.tsx b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/page.tsx
new file mode 100644
index 00000000..a96b2862
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/list/page.tsx
@@ -0,0 +1,17 @@
+import type { Metadata } from "next"
+
+import { productsData } from "./_data/products"
+
+import { ProductsTable } from "./_components/products-table"
+
+export const metadata: Metadata = {
+  title: "Products List",
+}
+
+export default function ProductsListPage() {
+  return (
+    <section className="container p-4">
+      <ProductsTable data={productsData} />
+    </section>
+  )
+}
diff --git a/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/types.ts b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/types.ts
new file mode 100644
index 00000000..f72a559c
--- /dev/null
+++ b/full-kit/src/app/[lang]/(dashboard-layout)/pages/products/types.ts
@@ -0,0 +1,36 @@
+import type { z } from "zod"
+import type { AddProductSchema } from "./add/_schemas/add-product-schema"
+import type { CategorySchema } from "./category/_schemas/category-schema"
+
+export type ProductStatusType = "In Stock" | "Low Stock" | "Out of Stock"
+
+export type ProductPublishStatusType = "Active" | "Draft"
+
+export interface ProductType {
+  id: string
+  name: string
+  sku: string
+  description: string
+  category: string
+  price: number
+  compareAtPrice: number | null
+  stock: number
+  status: ProductStatusType
+  publishStatus: ProductPublishStatusType
+  image: string
+  tags: string[]
+}
+
+export type CategoryStatusType = "Active" | "Inactive"
+
+export interface CategoryType {
+  id: string
+  name: string
+  description: string
+  productCount: number
+  status: CategoryStatusType
+}
+
+export type AddProductFormType = z.infer<typeof AddProductSchema>
+
+export type CategoryFormType = z.infer<typeof CategorySchema>
diff --git a/full-kit/src/data/navigations.ts b/full-kit/src/data/navigations.ts
index b851209c..4f59cc4e 100644
--- a/full-kit/src/data/navigations.ts
+++ b/full-kit/src/data/navigations.ts
@@ -110,18 +110,15 @@ export const navigationsData: NavigationType[] = [
         items: [
           {
             title: "List",
-            href: "/",
-            label: "Soon",
+            href: "/pages/products/list",
           },
           {
             title: "Add",
-            href: "/",
-            label: "Soon",
+            href: "/pages/products/add",
           },
           {
             title: "Category",
-            href: "/",
-            label: "Soon",
+            href: "/pages/products/category",
           },
         ],
       },