feat: add brands and variant categories management
- Implemented CRUD operations for brands and variant categories in the API. - Created UI components for managing brands and variant categories, including listing, creating, editing, and deleting. - Enhanced the sidebar navigation to include links for brands and variant categories. - Updated the categories API to support pagination and filtering. - Added validation for brand and variant category names. - Integrated toast notifications for user feedback on actions.
This commit is contained in:
@@ -0,0 +1,296 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { ArrowLeft, ChevronLeft, ChevronRight, Pencil, Plus, Search, Tag, Trash2 } from "lucide-react"
|
||||
|
||||
import { brandsApi } from "@/lib/api/brands"
|
||||
import { errorMessage } from "@/lib/error-map"
|
||||
import { validateBrandName } from "@/lib/validations/master-data"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { PaginationMeta } from "@/types/common"
|
||||
import { Brand } from "@/types/master-data"
|
||||
|
||||
import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
|
||||
import { Button, buttonVariants } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { toast } from "@/components/ui/toast"
|
||||
|
||||
type SortOrder = "asc" | "desc"
|
||||
|
||||
const PAGE_SIZE = 5
|
||||
|
||||
export default function BrandsPage() {
|
||||
const [brands, setBrands] = useState<Brand[] | null>(null)
|
||||
const [pagination, setPagination] = useState<PaginationMeta | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const [searchInput, setSearchInput] = useState("")
|
||||
const [search, setSearch] = useState("")
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>("asc")
|
||||
const [page, setPage] = useState(1)
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [editing, setEditing] = useState<Brand | null>(null)
|
||||
const [name, setName] = useState("")
|
||||
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [deletingId, setDeletingId] = useState<number | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => setSearch(searchInput.trim()), 300)
|
||||
return () => clearTimeout(timeout)
|
||||
}, [searchInput])
|
||||
|
||||
useEffect(() => {
|
||||
setPage(1)
|
||||
}, [search, sortOrder])
|
||||
|
||||
function load() {
|
||||
setError(null)
|
||||
brandsApi
|
||||
.list({ q: search || undefined, sortOrder, page, pageSize: PAGE_SIZE })
|
||||
.then((res) => {
|
||||
setBrands(res.items)
|
||||
setPagination(res.pagination)
|
||||
})
|
||||
.catch((err) => setError(errorMessage(err)))
|
||||
}
|
||||
|
||||
useEffect(load, [search, sortOrder, page])
|
||||
|
||||
const hasFilters = search.trim().length > 0
|
||||
|
||||
function openCreateDialog() {
|
||||
setEditing(null)
|
||||
setName("")
|
||||
setErrors({})
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
function openEditDialog(brand: Brand) {
|
||||
setEditing(brand)
|
||||
setName(brand.name)
|
||||
setErrors({})
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
const nextErrors = validateBrandName(name)
|
||||
setErrors(nextErrors)
|
||||
if (Object.keys(nextErrors).length > 0) return
|
||||
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const brand = editing
|
||||
? await brandsApi.update(editing.brandId, { name })
|
||||
: await brandsApi.create({ name })
|
||||
toast.success(editing ? "Brand updated" : "Brand created", brand.name)
|
||||
setOpen(false)
|
||||
setName("")
|
||||
setEditing(null)
|
||||
setErrors({})
|
||||
load()
|
||||
} catch (err) {
|
||||
setErrors({ name: errorMessage(err) })
|
||||
toast.error(editing ? "Could not update brand" : "Could not create brand", errorMessage(err))
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(brand: Brand) {
|
||||
setDeletingId(brand.brandId)
|
||||
try {
|
||||
await brandsApi.remove(brand.brandId)
|
||||
toast.success("Brand deleted", brand.name)
|
||||
load()
|
||||
} catch (err) {
|
||||
toast.error("Could not delete brand", errorMessage(err))
|
||||
} finally {
|
||||
setDeletingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
|
||||
<ArrowLeft className="size-5" />
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Brands</h1>
|
||||
<p className="text-base text-muted-foreground">Manage product brands.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger render={<Button size="lg" onClick={openCreateDialog}><Plus className="size-5" />Add Brand</Button>} />
|
||||
<DialogContent className="sm:max-w-sm">
|
||||
<DialogHeader className="items-center text-center">
|
||||
<DialogTitle>{editing ? "Edit brand" : "New brand"}</DialogTitle>
|
||||
<DialogDescription>Give the brand a name.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<FieldGroup>
|
||||
<Field data-invalid={!!errors.name}>
|
||||
<FieldLabel htmlFor="brand-name">Name</FieldLabel>
|
||||
<Input id="brand-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Bosch" aria-invalid={!!errors.name} />
|
||||
<FieldError errors={[errors.name ? { message: errors.name } : undefined]} />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<div className="flex justify-center gap-3 pt-2">
|
||||
<Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button className="min-w-36" onClick={handleSubmit} disabled={submitting}>
|
||||
{submitting ? (editing ? "Saving…" : "Creating…") : editing ? "Save" : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="relative flex-1 basis-0">
|
||||
<Search className="pointer-events-none absolute top-1/2 left-4 size-5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
placeholder="Search brands…"
|
||||
className="h-14 w-full pl-11 text-base"
|
||||
aria-label="Search brands"
|
||||
/>
|
||||
</div>
|
||||
<Select<SortOrder> value={sortOrder} onValueChange={(v) => setSortOrder(v ?? "asc")}>
|
||||
<SelectTrigger className="h-14! w-full flex-1 basis-0 text-base">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="asc" className="text-base">Name (A–Z)</SelectItem>
|
||||
<SelectItem value="desc" className="text-base">Name (Z–A)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
|
||||
)}
|
||||
|
||||
{!error && brands === null && (
|
||||
<div className="flex flex-col gap-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-14 w-full" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!error && brands !== null && brands.length === 0 && (
|
||||
<div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
|
||||
<Tag className="size-12 text-muted-foreground" />
|
||||
<p className="text-base text-muted-foreground">
|
||||
{hasFilters ? "No brands match your search." : "No brands yet."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!error && brands !== null && brands.length > 0 && (
|
||||
<>
|
||||
<Table className="text-base">
|
||||
<TableHeader className="bg-indigo-50">
|
||||
<TableRow className="hover:bg-indigo-50">
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">ID</TableHead>
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">Name</TableHead>
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">Created At</TableHead>
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{brands.map((b) => (
|
||||
<TableRow key={b.brandId}>
|
||||
<TableCell className="px-3 py-3.5 text-muted-foreground">#{b.brandId}</TableCell>
|
||||
<TableCell className="px-3 py-3.5 font-medium">{b.name}</TableCell>
|
||||
<TableCell className="px-3 py-3.5 text-muted-foreground">{new Date(b.createdAt).toLocaleDateString()}</TableCell>
|
||||
<TableCell className="px-3 py-3.5">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label={`Edit ${b.name}`}
|
||||
onClick={() => openEditDialog(b)}
|
||||
>
|
||||
<Pencil className="size-4" />
|
||||
</Button>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="text-destructive hover:bg-destructive/10"
|
||||
aria-label={`Delete ${b.name}`}
|
||||
disabled={deletingId === b.brandId}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent
|
||||
variant="destructive"
|
||||
title={`Delete ${b.name}?`}
|
||||
description="This permanently removes the brand."
|
||||
confirmLabel="Delete"
|
||||
onConfirm={() => handleDelete(b)}
|
||||
/>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
{pagination && pagination.totalPages > 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Showing {(pagination.page - 1) * pagination.pageSize + 1}–
|
||||
{Math.min(pagination.page * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={pagination.page <= 1}
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
<ChevronLeft />
|
||||
Previous
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Page {pagination.page} of {pagination.totalPages}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={pagination.page >= pagination.totalPages}
|
||||
onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
|
||||
>
|
||||
Next
|
||||
<ChevronRight />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -2,85 +2,121 @@
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { ArrowLeft, ListTree, Plus } from "lucide-react"
|
||||
import { ArrowLeft, ChevronLeft, ChevronRight, ListTree, Pencil, Plus, Search, Trash2 } from "lucide-react"
|
||||
|
||||
import { categoriesApi } from "@/lib/api/categories"
|
||||
import { errorMessage } from "@/lib/error-map"
|
||||
import { validateCategoryName } from "@/lib/validations/master-data"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Category, CategoryTreeNode } from "@/types/master-data"
|
||||
import { PaginationMeta } from "@/types/common"
|
||||
import { Category } from "@/types/master-data"
|
||||
|
||||
import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
|
||||
import { Button, buttonVariants } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { toast } from "@/components/ui/toast"
|
||||
|
||||
function TreeNode({ node, depth }: { node: CategoryTreeNode; depth: number }) {
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
<div
|
||||
className="flex items-center gap-2 rounded-lg px-3 py-2.5 hover:bg-muted/50"
|
||||
style={{ paddingLeft: `${depth * 24 + 12}px` }}
|
||||
>
|
||||
<ListTree className="size-4 text-muted-foreground" />
|
||||
<span className="text-base font-medium text-foreground">{node.name}</span>
|
||||
<span className="text-sm text-muted-foreground">#{node.categoryId}</span>
|
||||
</div>
|
||||
{node.children.map((child) => (
|
||||
<TreeNode key={child.categoryId} node={child} depth={depth + 1} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
type SortOrder = "asc" | "desc"
|
||||
|
||||
const PAGE_SIZE = 5
|
||||
|
||||
export default function CategoriesPage() {
|
||||
const [tree, setTree] = useState<CategoryTreeNode[] | null>(null)
|
||||
const [flat, setFlat] = useState<Category[]>([])
|
||||
const [categories, setCategories] = useState<Category[] | null>(null)
|
||||
const [pagination, setPagination] = useState<PaginationMeta | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const [searchInput, setSearchInput] = useState("")
|
||||
const [search, setSearch] = useState("")
|
||||
const [sortOrder, setSortOrder] = useState<SortOrder>("asc")
|
||||
const [page, setPage] = useState(1)
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [editing, setEditing] = useState<Category | null>(null)
|
||||
const [name, setName] = useState("")
|
||||
const [parentId, setParentId] = useState<number | null>(null)
|
||||
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [deletingId, setDeletingId] = useState<number | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const timeout = setTimeout(() => setSearch(searchInput.trim()), 300)
|
||||
return () => clearTimeout(timeout)
|
||||
}, [searchInput])
|
||||
|
||||
useEffect(() => {
|
||||
setPage(1)
|
||||
}, [search, sortOrder])
|
||||
|
||||
function load() {
|
||||
setError(null)
|
||||
Promise.all([categoriesApi.tree(), categoriesApi.list()])
|
||||
.then(([t, f]) => {
|
||||
setTree(t)
|
||||
setFlat(f.items)
|
||||
categoriesApi
|
||||
.list({ q: search || undefined, sortOrder, page, pageSize: PAGE_SIZE })
|
||||
.then((res) => {
|
||||
setCategories(res.items)
|
||||
setPagination(res.pagination)
|
||||
})
|
||||
.catch((err) => setError(errorMessage(err)))
|
||||
}
|
||||
|
||||
useEffect(load, [])
|
||||
useEffect(load, [search, sortOrder, page])
|
||||
|
||||
async function handleCreate() {
|
||||
const hasFilters = search.trim().length > 0
|
||||
|
||||
function openCreateDialog() {
|
||||
setEditing(null)
|
||||
setName("")
|
||||
setErrors({})
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
function openEditDialog(category: Category) {
|
||||
setEditing(category)
|
||||
setName(category.name)
|
||||
setErrors({})
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
const nextErrors = validateCategoryName(name)
|
||||
setErrors(nextErrors)
|
||||
if (Object.keys(nextErrors).length > 0) return
|
||||
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const category = await categoriesApi.create({ name, parentId })
|
||||
toast.success("Category created", category.name)
|
||||
const category = editing
|
||||
? await categoriesApi.update(editing.categoryId, { name })
|
||||
: await categoriesApi.create({ name })
|
||||
toast.success(editing ? "Category updated" : "Category created", category.name)
|
||||
setOpen(false)
|
||||
setName("")
|
||||
setParentId(null)
|
||||
setEditing(null)
|
||||
setErrors({})
|
||||
load()
|
||||
} catch (err) {
|
||||
setErrors({ name: errorMessage(err) })
|
||||
toast.error("Could not create category", errorMessage(err))
|
||||
toast.error(editing ? "Could not update category" : "Could not create category", errorMessage(err))
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(category: Category) {
|
||||
setDeletingId(category.categoryId)
|
||||
try {
|
||||
await categoriesApi.remove(category.categoryId)
|
||||
toast.success("Category deleted", category.name)
|
||||
load()
|
||||
} catch (err) {
|
||||
toast.error("Could not delete category", errorMessage(err))
|
||||
} finally {
|
||||
setDeletingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -90,16 +126,16 @@ export default function CategoriesPage() {
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Categories</h1>
|
||||
<p className="text-base text-muted-foreground">Hierarchical item category structure (FR-MD-04).</p>
|
||||
<p className="text-base text-muted-foreground">Item category master (FR-MD-04).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger render={<Button size="lg"><Plus className="size-5" />New Category</Button>} />
|
||||
<DialogTrigger render={<Button size="lg" onClick={openCreateDialog}><Plus className="size-5" />New Category</Button>} />
|
||||
<DialogContent className="sm:max-w-sm">
|
||||
<DialogHeader className="items-center text-center">
|
||||
<DialogTitle>New category</DialogTitle>
|
||||
<DialogDescription>Optionally nest it under an existing category.</DialogDescription>
|
||||
<DialogTitle>{editing ? "Edit category" : "New category"}</DialogTitle>
|
||||
<DialogDescription>Give the category a name.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<FieldGroup>
|
||||
<Field data-invalid={!!errors.name}>
|
||||
@@ -107,59 +143,153 @@ export default function CategoriesPage() {
|
||||
<Input id="cat-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Fasteners" aria-invalid={!!errors.name} />
|
||||
<FieldError errors={[errors.name ? { message: errors.name } : undefined]} />
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="cat-parent">Parent (optional)</FieldLabel>
|
||||
<Select<number | null> value={parentId} onValueChange={setParentId}>
|
||||
<SelectTrigger id="cat-parent" className="w-full">
|
||||
<SelectValue placeholder="None — top-level category" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{flat.map((c) => (
|
||||
<SelectItem key={c.categoryId} value={c.categoryId} className="text-base">
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<div className="flex justify-center gap-3 pt-2">
|
||||
<Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button className="min-w-36" onClick={handleCreate} disabled={submitting}>
|
||||
{submitting ? "Creating…" : "Create"}
|
||||
<Button className="min-w-36" onClick={handleSubmit} disabled={submitting}>
|
||||
{submitting ? (editing ? "Saving…" : "Creating…") : editing ? "Save" : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<div className="relative flex-1 basis-0">
|
||||
<Search className="pointer-events-none absolute top-1/2 left-4 size-5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
placeholder="Search categories…"
|
||||
className="h-14 w-full pl-11 text-base"
|
||||
aria-label="Search categories"
|
||||
/>
|
||||
</div>
|
||||
<Select<SortOrder> value={sortOrder} onValueChange={(v) => setSortOrder(v ?? "asc")}>
|
||||
<SelectTrigger className="h-14! w-full flex-1 basis-0 text-base">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="asc" className="text-base">Name (A–Z)</SelectItem>
|
||||
<SelectItem value="desc" className="text-base">Name (Z–A)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
|
||||
)}
|
||||
|
||||
{!error && tree === null && (
|
||||
{!error && categories === null && (
|
||||
<div className="flex flex-col gap-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
<Skeleton key={i} className="h-14 w-full" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!error && tree !== null && tree.length === 0 && (
|
||||
{!error && categories !== null && categories.length === 0 && (
|
||||
<div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
|
||||
<ListTree className="size-12 text-muted-foreground" />
|
||||
<p className="text-base text-muted-foreground">No categories yet.</p>
|
||||
<p className="text-base text-muted-foreground">
|
||||
{hasFilters ? "No categories match your search." : "No categories yet."}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!error && tree !== null && tree.length > 0 && (
|
||||
<div className="flex flex-col rounded-xl border p-3">
|
||||
{tree.map((node) => (
|
||||
<TreeNode key={node.categoryId} node={node} depth={0} />
|
||||
))}
|
||||
</div>
|
||||
{!error && categories !== null && categories.length > 0 && (
|
||||
<>
|
||||
<Table className="text-base">
|
||||
<TableHeader className="bg-indigo-50">
|
||||
<TableRow className="hover:bg-indigo-50">
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">ID</TableHead>
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">Name</TableHead>
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">Created At</TableHead>
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{categories.map((c) => (
|
||||
<TableRow key={c.categoryId}>
|
||||
<TableCell className="px-3 py-3.5 text-muted-foreground">#{c.categoryId}</TableCell>
|
||||
<TableCell className="px-3 py-3.5 font-medium">{c.name}</TableCell>
|
||||
<TableCell className="px-3 py-3.5 text-muted-foreground">{new Date(c.createdAt).toLocaleDateString()}</TableCell>
|
||||
<TableCell className="px-3 py-3.5">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label={`Edit ${c.name}`}
|
||||
onClick={() => openEditDialog(c)}
|
||||
>
|
||||
<Pencil className="size-4" />
|
||||
</Button>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="text-destructive hover:bg-destructive/10"
|
||||
aria-label={`Delete ${c.name}`}
|
||||
disabled={deletingId === c.categoryId}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent
|
||||
variant="destructive"
|
||||
title={`Delete ${c.name}?`}
|
||||
description="This permanently removes the category."
|
||||
confirmLabel="Delete"
|
||||
onConfirm={() => handleDelete(c)}
|
||||
/>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
{pagination && pagination.totalPages > 1 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Showing {(pagination.page - 1) * pagination.pageSize + 1}–
|
||||
{Math.min(pagination.page * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={pagination.page <= 1}
|
||||
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
||||
>
|
||||
<ChevronLeft />
|
||||
Previous
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Page {pagination.page} of {pagination.totalPages}
|
||||
</span>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={pagination.page >= pagination.totalPages}
|
||||
onClick={() => setPage((p) => Math.min(pagination.totalPages, p + 1))}
|
||||
>
|
||||
Next
|
||||
<ChevronRight />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,91 +1,226 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import Link from "next/link"
|
||||
import { ArrowLeft } from "lucide-react"
|
||||
import { ArrowLeft, Plus, X } from "lucide-react"
|
||||
|
||||
import { itemsApi } from "@/lib/api/items"
|
||||
import { categoriesApi } from "@/lib/api/categories"
|
||||
import { uomsApi } from "@/lib/api/uoms"
|
||||
import { vendorsApi } from "@/lib/api/vendors"
|
||||
import { errorMessage, fieldErrors } from "@/lib/error-map"
|
||||
import { validateItemForm } from "@/lib/validations/master-data"
|
||||
import { brandsApi } from "@/lib/api/brands"
|
||||
import { variantCategoriesApi } from "@/lib/api/variants"
|
||||
import { errorMessage } from "@/lib/error-map"
|
||||
import { validateVariantCategoryName, validateVariantItemForm } from "@/lib/validations/master-data"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ItemType, TrackingMode } from "@/types/master-data"
|
||||
import { Category, VariantCategory } from "@/types/master-data"
|
||||
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button, buttonVariants } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { FieldError } from "@/components/ui/field"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { toast } from "@/components/ui/toast"
|
||||
|
||||
function skuSegment(text: string, maxLen: number): string {
|
||||
const cleaned = text.trim().toUpperCase().replace(/[^A-Z0-9]/g, "")
|
||||
return cleaned.slice(0, maxLen) || "GEN"
|
||||
}
|
||||
|
||||
function buildVariantSku(categoryLabel: string, values: string[]): string {
|
||||
return [skuSegment(categoryLabel, 3), ...values.map((v) => skuSegment(v, 3))].join("-")
|
||||
}
|
||||
|
||||
function isColorCategory(categoryName: string): boolean {
|
||||
return categoryName.trim().toLowerCase() === "color"
|
||||
}
|
||||
|
||||
function encodeColorValue(name: string, hex: string): string {
|
||||
return `${name}|${hex}`
|
||||
}
|
||||
|
||||
function decodeColorValue(value: string): { name: string; hex: string } {
|
||||
const separatorIndex = value.indexOf("|")
|
||||
if (separatorIndex === -1) return { name: value, hex: "#d4d4d8" }
|
||||
return { name: value.slice(0, separatorIndex), hex: value.slice(separatorIndex + 1) }
|
||||
}
|
||||
|
||||
function partLabel(part: { name: string; value: string }): string {
|
||||
return isColorCategory(part.name) ? decodeColorValue(part.value).name : part.value
|
||||
}
|
||||
|
||||
// No Base UOM field on this form — every variant created here uses the base "EA" unit (uomId 1 in the seed data).
|
||||
const DEFAULT_BASE_UOM_ID = 1
|
||||
|
||||
export default function NewItemPage() {
|
||||
const router = useRouter()
|
||||
|
||||
const [categories, setCategories] = useState<{ categoryId: number; name: string }[] | null>(null)
|
||||
const [uoms, setUoms] = useState<{ uomId: number; name: string }[] | null>(null)
|
||||
const [vendors, setVendors] = useState<{ vendorId: number; code: string; name: string }[] | null>(null)
|
||||
const [categories, setCategories] = useState<Category[] | null>(null)
|
||||
const [brands, setBrands] = useState<{ brandId: number; name: string }[] | null>(null)
|
||||
const [variantCategories, setVariantCategories] = useState<VariantCategory[] | null>(null)
|
||||
const [loadError, setLoadError] = useState<string | null>(null)
|
||||
|
||||
const [sku, setSku] = useState("")
|
||||
const [name, setName] = useState("")
|
||||
const [description, setDescription] = useState("")
|
||||
const [categoryId, setCategoryId] = useState<number | null>(null)
|
||||
const [baseUomId, setBaseUomId] = useState<number | null>(null)
|
||||
const [defaultVendorId, setDefaultVendorId] = useState<number | null>(null)
|
||||
const [itemType, setItemType] = useState<ItemType>("Stocked")
|
||||
const [trackingMode, setTrackingMode] = useState<TrackingMode>("None")
|
||||
const [taxClass, setTaxClass] = useState("STD")
|
||||
const [subCategoryId, setSubCategoryId] = useState<number | null>(null)
|
||||
const [brandId, setBrandId] = useState<number | null>(null)
|
||||
|
||||
const [checkedVariantCategoryIds, setCheckedVariantCategoryIds] = useState<number[]>([])
|
||||
const [valuesByCategory, setValuesByCategory] = useState<Record<number, string[]>>({})
|
||||
const [inputByCategory, setInputByCategory] = useState<Record<number, string>>({})
|
||||
const [colorNameByCategory, setColorNameByCategory] = useState<Record<number, string>>({})
|
||||
const [quantities, setQuantities] = useState<Record<string, string>>({})
|
||||
|
||||
const [addingCategory, setAddingCategory] = useState(false)
|
||||
const [newCategoryName, setNewCategoryName] = useState("")
|
||||
const [newCategoryError, setNewCategoryError] = useState<string | null>(null)
|
||||
const [addingCategorySubmitting, setAddingCategorySubmitting] = useState(false)
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||
const [submitError, setSubmitError] = useState<string | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([categoriesApi.list(), uomsApi.list(), vendorsApi.list({ pageSize: 200, status: "Active" })])
|
||||
.then(([cat, uo, ve]) => {
|
||||
Promise.all([categoriesApi.list({ pageSize: 200 }), brandsApi.list({ pageSize: 200 }), variantCategoriesApi.list()])
|
||||
.then(([cat, br, vc]) => {
|
||||
setCategories(cat.items)
|
||||
setUoms(uo.items)
|
||||
setVendors(ve.items)
|
||||
setBrands(br.items)
|
||||
setVariantCategories(vc.items)
|
||||
})
|
||||
.catch((err) => setLoadError(errorMessage(err)))
|
||||
}, [])
|
||||
|
||||
const topCategories = useMemo(() => (categories ?? []).filter((c) => c.parentId === null), [categories])
|
||||
const subCategoryOptions = useMemo(
|
||||
() => (categories ?? []).filter((c) => c.parentId === categoryId),
|
||||
[categories, categoryId]
|
||||
)
|
||||
const effectiveCategoryId = subCategoryId ?? categoryId
|
||||
const effectiveCategoryLabel =
|
||||
(categories ?? []).find((c) => c.categoryId === effectiveCategoryId)?.name ?? ""
|
||||
const brandLabel = (brands ?? []).find((b) => b.brandId === brandId)?.name ?? ""
|
||||
|
||||
function handleCategoryChange(value: number | null) {
|
||||
setCategoryId(value)
|
||||
setSubCategoryId(null)
|
||||
}
|
||||
|
||||
function toggleVariantCategory(variantCategoryId: number) {
|
||||
setCheckedVariantCategoryIds((prev) =>
|
||||
prev.includes(variantCategoryId) ? prev.filter((id) => id !== variantCategoryId) : [...prev, variantCategoryId]
|
||||
)
|
||||
setQuantities({})
|
||||
}
|
||||
|
||||
async function handleAddVariantCategory() {
|
||||
const nextErrors = validateVariantCategoryName(newCategoryName)
|
||||
if (nextErrors.name) {
|
||||
setNewCategoryError(nextErrors.name)
|
||||
return
|
||||
}
|
||||
setAddingCategorySubmitting(true)
|
||||
try {
|
||||
const category = await variantCategoriesApi.create({ name: newCategoryName })
|
||||
setVariantCategories((prev) => [...(prev ?? []), category])
|
||||
setCheckedVariantCategoryIds((prev) => [...prev, category.variantCategoryId])
|
||||
setNewCategoryName("")
|
||||
setNewCategoryError(null)
|
||||
setAddingCategory(false)
|
||||
toast.success("Variant category created", category.name)
|
||||
} catch (err) {
|
||||
setNewCategoryError(errorMessage(err))
|
||||
} finally {
|
||||
setAddingCategorySubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
function addValue(variantCategoryId: number, overrideValue?: string) {
|
||||
const value = (overrideValue ?? inputByCategory[variantCategoryId] ?? "").trim()
|
||||
if (value) {
|
||||
setValuesByCategory((prev) => {
|
||||
const existing = prev[variantCategoryId] ?? []
|
||||
if (existing.some((v) => v.toLowerCase() === value.toLowerCase())) return prev
|
||||
return { ...prev, [variantCategoryId]: [...existing, value] }
|
||||
})
|
||||
setQuantities({})
|
||||
}
|
||||
setInputByCategory((prev) => ({ ...prev, [variantCategoryId]: "" }))
|
||||
}
|
||||
|
||||
function removeValue(variantCategoryId: number, value: string) {
|
||||
setValuesByCategory((prev) => ({
|
||||
...prev,
|
||||
[variantCategoryId]: (prev[variantCategoryId] ?? []).filter((v) => v !== value),
|
||||
}))
|
||||
setQuantities({})
|
||||
}
|
||||
|
||||
const activeCategories = useMemo(
|
||||
() =>
|
||||
(variantCategories ?? [])
|
||||
.filter((vc) => checkedVariantCategoryIds.includes(vc.variantCategoryId))
|
||||
.map((vc) => ({ ...vc, values: valuesByCategory[vc.variantCategoryId] ?? [] }))
|
||||
.filter((vc) => vc.values.length > 0),
|
||||
[variantCategories, checkedVariantCategoryIds, valuesByCategory]
|
||||
)
|
||||
|
||||
const variants = useMemo(() => {
|
||||
if (activeCategories.length === 0) return []
|
||||
let combinations: { key: string; parts: { name: string; value: string }[] }[] = [{ key: "", parts: [] }]
|
||||
for (const cat of activeCategories) {
|
||||
const next: typeof combinations = []
|
||||
for (const combo of combinations) {
|
||||
for (const value of cat.values) {
|
||||
next.push({
|
||||
key: combo.key ? `${combo.key}::${value}` : value,
|
||||
parts: [...combo.parts, { name: cat.name, value }],
|
||||
})
|
||||
}
|
||||
}
|
||||
combinations = next
|
||||
}
|
||||
return combinations.map((c) => ({
|
||||
...c,
|
||||
sku: buildVariantSku(effectiveCategoryLabel, c.parts.map(partLabel)),
|
||||
}))
|
||||
}, [activeCategories, effectiveCategoryLabel])
|
||||
|
||||
async function handleSubmit() {
|
||||
setSubmitError(null)
|
||||
const nextErrors = validateItemForm({ sku, name, categoryId, baseUomId })
|
||||
const nextErrors = validateVariantItemForm({ categoryId: effectiveCategoryId, hasVariants: variants.length > 0 })
|
||||
setErrors(nextErrors)
|
||||
if (Object.keys(nextErrors).length > 0) return
|
||||
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const { data: item } = await itemsApi.create({
|
||||
sku,
|
||||
name,
|
||||
description: description || null,
|
||||
categoryId: categoryId as number,
|
||||
baseUomId: baseUomId as number,
|
||||
defaultVendorId,
|
||||
itemType,
|
||||
trackingMode,
|
||||
taxClass: taxClass || null,
|
||||
})
|
||||
toast.success("Item created", `${item.sku} — ${item.name}`)
|
||||
router.push(`/dashboard/products/${item.itemId}`)
|
||||
let created = 0
|
||||
for (const variant of variants) {
|
||||
const qty = Number(quantities[variant.key] || 0)
|
||||
await itemsApi.create({
|
||||
sku: variant.sku,
|
||||
name: `${brandLabel ? brandLabel + " " : ""}${effectiveCategoryLabel} - ${variant.parts.map(partLabel).join("/")}`,
|
||||
categoryId: effectiveCategoryId as number,
|
||||
brandId,
|
||||
baseUomId: DEFAULT_BASE_UOM_ID,
|
||||
itemType: "Stocked",
|
||||
trackingMode: "None",
|
||||
initialQty: Number.isFinite(qty) ? qty : 0,
|
||||
})
|
||||
created += 1
|
||||
}
|
||||
toast.success("Variants created", `${created} item${created === 1 ? "" : "s"} created`)
|
||||
router.push("/dashboard/products")
|
||||
} catch (err) {
|
||||
const fe = fieldErrors(err)
|
||||
if (fe?.sku) setErrors((prev) => ({ ...prev, sku: fe.sku }))
|
||||
setSubmitError(errorMessage(err))
|
||||
toast.error("Could not create item", errorMessage(err))
|
||||
toast.error("Could not create variants", errorMessage(err))
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const loading = !categories || !uoms || !vendors
|
||||
const loading = !categories || !brands || !variantCategories
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
@@ -95,7 +230,7 @@ export default function NewItemPage() {
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">New Item</h1>
|
||||
<p className="text-base text-muted-foreground">SKU, category, base UOM, item type, and tracking mode (FR-MD-01).</p>
|
||||
<p className="text-base text-muted-foreground">Category, subcategory, brand, and variant categories (FR-MD-01).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -108,28 +243,14 @@ export default function NewItemPage() {
|
||||
{!loading && (
|
||||
<>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-base">SKU</Label>
|
||||
<Input value={sku} onChange={(e) => setSku(e.target.value)} placeholder="ITM-1004" aria-invalid={!!errors.sku} className="h-12 text-base" />
|
||||
<FieldError errors={[errors.sku ? { message: errors.sku } : undefined]} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-base">Name</Label>
|
||||
<Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Steel Washer M8" aria-invalid={!!errors.name} className="h-12 text-base" />
|
||||
<FieldError errors={[errors.name ? { message: errors.name } : undefined]} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 sm:col-span-2">
|
||||
<Label className="text-base">Description (optional)</Label>
|
||||
<Input value={description} onChange={(e) => setDescription(e.target.value)} className="h-12 text-base" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-base">Category</Label>
|
||||
<Select<number | null> value={categoryId} onValueChange={setCategoryId}>
|
||||
<Select<number | null> value={categoryId} onValueChange={handleCategoryChange}>
|
||||
<SelectTrigger className="h-12! w-full text-base" aria-invalid={!!errors.categoryId}>
|
||||
<SelectValue placeholder="Select category" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(categories ?? []).map((c) => (
|
||||
{topCategories.map((c) => (
|
||||
<SelectItem key={c.categoryId} value={c.categoryId} className="text-base">
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
@@ -139,66 +260,250 @@ export default function NewItemPage() {
|
||||
<FieldError errors={[errors.categoryId ? { message: errors.categoryId } : undefined]} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-base">Base UOM</Label>
|
||||
<Select<number | null> value={baseUomId} onValueChange={setBaseUomId}>
|
||||
<SelectTrigger className="h-12! w-full text-base" aria-invalid={!!errors.baseUomId}>
|
||||
<SelectValue placeholder="Select base UOM" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(uoms ?? []).map((u) => (
|
||||
<SelectItem key={u.uomId} value={u.uomId} className="text-base">
|
||||
{u.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FieldError errors={[errors.baseUomId ? { message: errors.baseUomId } : undefined]} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-base">Default vendor (optional)</Label>
|
||||
<Select<number | null> value={defaultVendorId} onValueChange={setDefaultVendorId}>
|
||||
<Label className="text-base">Subcategory (optional)</Label>
|
||||
<Select<number | null> value={subCategoryId} onValueChange={setSubCategoryId} disabled={subCategoryOptions.length === 0}>
|
||||
<SelectTrigger className="h-12! w-full text-base">
|
||||
<SelectValue placeholder="None" />
|
||||
<SelectValue placeholder={subCategoryOptions.length === 0 ? "No subcategories" : "Select subcategory"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(vendors ?? []).map((v) => (
|
||||
<SelectItem key={v.vendorId} value={v.vendorId} className="text-base">
|
||||
{v.code} — {v.name}
|
||||
{subCategoryOptions.map((c) => (
|
||||
<SelectItem key={c.categoryId} value={c.categoryId} className="text-base">
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-base">Tax class (optional)</Label>
|
||||
<Input value={taxClass} onChange={(e) => setTaxClass(e.target.value)} placeholder="STD" className="h-12 text-base" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-base">Item type</Label>
|
||||
<Select<ItemType> value={itemType} onValueChange={(v) => v && setItemType(v)}>
|
||||
<Label className="text-base">Brand (optional)</Label>
|
||||
<Select<number | null> value={brandId} onValueChange={setBrandId}>
|
||||
<SelectTrigger className="h-12! w-full text-base">
|
||||
<SelectValue />
|
||||
<SelectValue placeholder="Select brand" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Stocked" className="text-base">Stocked</SelectItem>
|
||||
<SelectItem value="NonStocked" className="text-base">Non-stocked</SelectItem>
|
||||
<SelectItem value="Service" className="text-base">Service</SelectItem>
|
||||
{(brands ?? []).map((b) => (
|
||||
<SelectItem key={b.brandId} value={b.brandId} className="text-base">
|
||||
{b.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="text-base">Tracking mode</Label>
|
||||
<Select<TrackingMode> value={trackingMode} onValueChange={(v) => v && setTrackingMode(v)}>
|
||||
<SelectTrigger className="h-12! w-full text-base">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="None" className="text-base">None</SelectItem>
|
||||
<SelectItem value="Batch" className="text-base">Batch</SelectItem>
|
||||
<SelectItem value="Serial" className="text-base">Serial</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 rounded-xl border p-5">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-foreground">Variants</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Check the variant categories that apply, then add their values to generate a SKU per combination.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
{(variantCategories ?? []).map((vc) => (
|
||||
<label key={vc.variantCategoryId} className="flex items-center gap-2.5 rounded-lg border px-3 py-2 hover:bg-muted/50">
|
||||
<Checkbox
|
||||
checked={checkedVariantCategoryIds.includes(vc.variantCategoryId)}
|
||||
onCheckedChange={() => toggleVariantCategory(vc.variantCategoryId)}
|
||||
/>
|
||||
<span className="text-base font-medium">{vc.name}</span>
|
||||
</label>
|
||||
))}
|
||||
{!addingCategory && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
aria-label="Add another variant category"
|
||||
onClick={() => setAddingCategory(true)}
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{addingCategory && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={newCategoryName}
|
||||
onChange={(e) => setNewCategoryName(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault()
|
||||
handleAddVariantCategory()
|
||||
}
|
||||
}}
|
||||
placeholder="Material"
|
||||
className="h-11 max-w-xs text-base"
|
||||
aria-invalid={!!newCategoryError}
|
||||
autoFocus
|
||||
/>
|
||||
<Button type="button" onClick={handleAddVariantCategory} disabled={addingCategorySubmitting}>
|
||||
<Plus className="size-4" />
|
||||
Add
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label="Cancel"
|
||||
onClick={() => {
|
||||
setAddingCategory(false)
|
||||
setNewCategoryName("")
|
||||
setNewCategoryError(null)
|
||||
}}
|
||||
>
|
||||
<X className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<FieldError errors={[newCategoryError ? { message: newCategoryError } : undefined]} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<FieldError errors={[errors.variants ? { message: errors.variants } : undefined]} />
|
||||
|
||||
{checkedVariantCategoryIds.length > 0 && (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
{(variantCategories ?? [])
|
||||
.filter((vc) => checkedVariantCategoryIds.includes(vc.variantCategoryId))
|
||||
.map((vc) => {
|
||||
const isColor = isColorCategory(vc.name)
|
||||
const currentInput = inputByCategory[vc.variantCategoryId] ?? ""
|
||||
const currentColorName = colorNameByCategory[vc.variantCategoryId] ?? ""
|
||||
|
||||
function addColor() {
|
||||
const name = currentColorName.trim()
|
||||
if (!name) return
|
||||
addValue(vc.variantCategoryId, encodeColorValue(name, currentInput || "#EF4444"))
|
||||
setColorNameByCategory((prev) => ({ ...prev, [vc.variantCategoryId]: "" }))
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={vc.variantCategoryId} className="flex flex-col gap-2">
|
||||
<Label className="text-base">{vc.name} values</Label>
|
||||
<div className="flex gap-2">
|
||||
{isColor ? (
|
||||
<>
|
||||
<input
|
||||
type="color"
|
||||
value={currentInput || "#EF4444"}
|
||||
onChange={(e) => setInputByCategory((prev) => ({ ...prev, [vc.variantCategoryId]: e.target.value }))}
|
||||
className="h-11 w-11 shrink-0 cursor-pointer rounded-md border border-input p-0.5"
|
||||
aria-label="Pick color"
|
||||
/>
|
||||
<Input
|
||||
value={currentColorName}
|
||||
onChange={(e) => setColorNameByCategory((prev) => ({ ...prev, [vc.variantCategoryId]: e.target.value }))}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault()
|
||||
addColor()
|
||||
}
|
||||
}}
|
||||
placeholder="Color name (e.g. Red)"
|
||||
className="h-11 text-base"
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<Input
|
||||
value={currentInput}
|
||||
onChange={(e) => setInputByCategory((prev) => ({ ...prev, [vc.variantCategoryId]: e.target.value }))}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault()
|
||||
addValue(vc.variantCategoryId)
|
||||
}
|
||||
}}
|
||||
placeholder={vc.name}
|
||||
className="h-11 text-base"
|
||||
/>
|
||||
)}
|
||||
<Button type="button" variant="outline" onClick={() => (isColor ? addColor() : addValue(vc.variantCategoryId))}>
|
||||
<Plus className="size-4" />
|
||||
Add {vc.name}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{(valuesByCategory[vc.variantCategoryId] ?? []).map((v) => {
|
||||
const decoded = isColor ? decodeColorValue(v) : null
|
||||
return (
|
||||
<Badge key={v} variant="outline" className="h-7 gap-1 pr-1 text-sm">
|
||||
{decoded && (
|
||||
<span
|
||||
className="size-3.5 shrink-0 rounded-full border border-black/10"
|
||||
style={{ backgroundColor: decoded.hex }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
{decoded ? decoded.name : v}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeValue(vc.variantCategoryId, v)}
|
||||
className="rounded-full p-0.5 hover:bg-muted"
|
||||
aria-label={`Remove ${decoded ? decoded.name : v}`}
|
||||
>
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
</Badge>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{variants.length > 0 && (
|
||||
<div className="overflow-x-auto">
|
||||
<Table className="text-base">
|
||||
<TableHeader className="bg-indigo-50">
|
||||
<TableRow className="hover:bg-indigo-50">
|
||||
{activeCategories.map((cat) => (
|
||||
<TableHead key={cat.variantCategoryId} className="h-11 px-3 text-sm text-indigo-700">{cat.name}</TableHead>
|
||||
))}
|
||||
<TableHead className="h-11 px-3 text-sm text-indigo-700">SKU</TableHead>
|
||||
<TableHead className="h-11 px-3 text-sm text-indigo-700">Quantity</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{variants.map((variant) => (
|
||||
<TableRow key={variant.key}>
|
||||
{variant.parts.map((part, i) => {
|
||||
const decoded = isColorCategory(part.name) ? decodeColorValue(part.value) : null
|
||||
return (
|
||||
<TableCell key={i} className="px-3 py-2.5">
|
||||
<span className="inline-flex items-center gap-1.5">
|
||||
{decoded && (
|
||||
<span
|
||||
className="size-3.5 shrink-0 rounded-full border border-black/10"
|
||||
style={{ backgroundColor: decoded.hex }}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
{partLabel(part)}
|
||||
</span>
|
||||
</TableCell>
|
||||
)
|
||||
})}
|
||||
<TableCell className="px-3 py-2.5 font-medium">{variant.sku}</TableCell>
|
||||
<TableCell className="px-3 py-2.5">
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
value={quantities[variant.key] ?? ""}
|
||||
onChange={(e) => setQuantities((prev) => ({ ...prev, [variant.key]: e.target.value }))}
|
||||
placeholder="0"
|
||||
className="h-9 w-24 text-sm"
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{submitError && (
|
||||
@@ -210,7 +515,7 @@ export default function NewItemPage() {
|
||||
Cancel
|
||||
</Link>
|
||||
<Button size="lg" type="button" onClick={handleSubmit} disabled={submitting}>
|
||||
{submitting ? "Creating…" : "Create Item"}
|
||||
{submitting ? "Creating…" : "Create Variants"}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -0,0 +1,216 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { ArrowLeft, Pencil, Plus, SwatchBook, Trash2 } from "lucide-react"
|
||||
|
||||
import { variantCategoriesApi } from "@/lib/api/variants"
|
||||
import { errorMessage } from "@/lib/error-map"
|
||||
import { validateVariantCategoryName } from "@/lib/validations/master-data"
|
||||
import { cn } from "@/lib/utils"
|
||||
import { VariantCategory } from "@/types/master-data"
|
||||
|
||||
import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
|
||||
import { Button, buttonVariants } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
||||
import { toast } from "@/components/ui/toast"
|
||||
|
||||
export default function VariantsPage() {
|
||||
const [categories, setCategories] = useState<VariantCategory[] | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [editing, setEditing] = useState<VariantCategory | null>(null)
|
||||
const [name, setName] = useState("")
|
||||
const [errors, setErrors] = useState<Record<string, string>>({})
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [deletingId, setDeletingId] = useState<number | null>(null)
|
||||
|
||||
function load() {
|
||||
setError(null)
|
||||
variantCategoriesApi
|
||||
.list()
|
||||
.then((res) => setCategories(res.items))
|
||||
.catch((err) => setError(errorMessage(err)))
|
||||
}
|
||||
|
||||
useEffect(load, [])
|
||||
|
||||
function openCreateDialog() {
|
||||
setEditing(null)
|
||||
setName("")
|
||||
setErrors({})
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
function openEditDialog(category: VariantCategory) {
|
||||
setEditing(category)
|
||||
setName(category.name)
|
||||
setErrors({})
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
const nextErrors = validateVariantCategoryName(name)
|
||||
setErrors(nextErrors)
|
||||
if (Object.keys(nextErrors).length > 0) return
|
||||
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const category = editing
|
||||
? await variantCategoriesApi.update(editing.variantCategoryId, { name })
|
||||
: await variantCategoriesApi.create({ name })
|
||||
toast.success(editing ? "Variant category updated" : "Variant category created", category.name)
|
||||
setOpen(false)
|
||||
setName("")
|
||||
setEditing(null)
|
||||
setErrors({})
|
||||
load()
|
||||
} catch (err) {
|
||||
setErrors({ name: errorMessage(err) })
|
||||
toast.error(editing ? "Could not update category" : "Could not create category", errorMessage(err))
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(category: VariantCategory) {
|
||||
setDeletingId(category.variantCategoryId)
|
||||
try {
|
||||
await variantCategoriesApi.remove(category.variantCategoryId)
|
||||
toast.success("Variant category deleted", category.name)
|
||||
load()
|
||||
} catch (err) {
|
||||
toast.error("Could not delete category", errorMessage(err))
|
||||
} finally {
|
||||
setDeletingId(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
|
||||
<ArrowLeft className="size-5" />
|
||||
</Link>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-foreground">Variants</h1>
|
||||
<p className="text-base text-muted-foreground">Variant categories used by the item variant builder (e.g. Color, Size, Material).</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger render={<Button size="lg" onClick={openCreateDialog}><Plus className="size-5" />Add Category</Button>} />
|
||||
<DialogContent className="sm:max-w-sm">
|
||||
<DialogHeader className="items-center text-center">
|
||||
<DialogTitle>{editing ? "Edit variant category" : "New variant category"}</DialogTitle>
|
||||
<DialogDescription>Give the category a name.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<FieldGroup>
|
||||
<Field data-invalid={!!errors.name}>
|
||||
<FieldLabel htmlFor="variant-category-name">Name</FieldLabel>
|
||||
<Input
|
||||
id="variant-category-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="Material"
|
||||
aria-invalid={!!errors.name}
|
||||
/>
|
||||
<FieldError errors={[errors.name ? { message: errors.name } : undefined]} />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
<div className="flex justify-center gap-3 pt-2">
|
||||
<Button variant="outline" className="min-w-36" onClick={() => setOpen(false)} disabled={submitting}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button className="min-w-36" onClick={handleSubmit} disabled={submitting}>
|
||||
{submitting ? (editing ? "Saving…" : "Creating…") : editing ? "Save" : "Create"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div>
|
||||
)}
|
||||
|
||||
{!error && categories === null && (
|
||||
<div className="flex flex-col gap-3">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-14 w-full" />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!error && categories !== null && categories.length === 0 && (
|
||||
<div className="flex flex-col items-center gap-4 rounded-xl border border-dashed py-20 text-center">
|
||||
<SwatchBook className="size-12 text-muted-foreground" />
|
||||
<p className="text-base text-muted-foreground">No variant categories yet.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!error && categories !== null && categories.length > 0 && (
|
||||
<Table className="text-base">
|
||||
<TableHeader className="bg-indigo-50">
|
||||
<TableRow className="hover:bg-indigo-50">
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">ID</TableHead>
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">Name</TableHead>
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">Created At</TableHead>
|
||||
<TableHead className="h-12 px-3 text-sm text-indigo-700">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{categories.map((c) => (
|
||||
<TableRow key={c.variantCategoryId}>
|
||||
<TableCell className="px-3 py-3.5 text-muted-foreground">#{c.variantCategoryId}</TableCell>
|
||||
<TableCell className="px-3 py-3.5 font-medium">{c.name}</TableCell>
|
||||
<TableCell className="px-3 py-3.5 text-muted-foreground">{new Date(c.createdAt).toLocaleDateString()}</TableCell>
|
||||
<TableCell className="px-3 py-3.5">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
aria-label={`Edit ${c.name}`}
|
||||
onClick={() => openEditDialog(c)}
|
||||
>
|
||||
<Pencil className="size-4" />
|
||||
</Button>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="text-destructive hover:bg-destructive/10"
|
||||
aria-label={`Delete ${c.name}`}
|
||||
disabled={deletingId === c.variantCategoryId}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent
|
||||
variant="destructive"
|
||||
title={`Delete ${c.name}?`}
|
||||
description="This permanently removes the variant category."
|
||||
confirmLabel="Delete"
|
||||
onConfirm={() => handleDelete(c)}
|
||||
/>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user