feat(products): edit support on /admin/products; Purchasing Items -> /inventory/items
- updateProduct server action (name + description, code locked) - EditProductButton dialog in product-form.tsx - Edit entry wired into ProductActionsMenu - Sidebar Purchasing Items for Manager/Admin now points to /inventory/items (cart view) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
9bbc97b9bd
commit
982a114eb5
4 changed files with 90 additions and 3 deletions
|
|
@ -35,6 +35,29 @@ export async function createProduct(formData: FormData): Promise<ActionResult> {
|
||||||
return { ok: true };
|
return { ok: true };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function updateProduct(formData: FormData): Promise<ActionResult> {
|
||||||
|
const session = await auth();
|
||||||
|
if (!session?.user || !hasPermission(session.user.role, "manage_products")) {
|
||||||
|
return { error: "Forbidden" };
|
||||||
|
}
|
||||||
|
|
||||||
|
const id = formData.get("id") as string;
|
||||||
|
if (!id) return { error: "Product ID required" };
|
||||||
|
|
||||||
|
const parsed = z.object({
|
||||||
|
name: z.string().min(1).max(200),
|
||||||
|
description: z.string().optional(),
|
||||||
|
}).safeParse({
|
||||||
|
name: formData.get("name"),
|
||||||
|
description: formData.get("description") || undefined,
|
||||||
|
});
|
||||||
|
if (!parsed.success) return { error: parsed.error.errors[0].message };
|
||||||
|
|
||||||
|
await db.product.update({ where: { id }, data: parsed.data });
|
||||||
|
revalidatePath("/admin/products");
|
||||||
|
return { ok: true };
|
||||||
|
}
|
||||||
|
|
||||||
export async function deleteProduct(id: string): Promise<ActionResult> {
|
export async function deleteProduct(id: string): Promise<ActionResult> {
|
||||||
const session = await auth();
|
const session = await auth();
|
||||||
if (!session?.user || !hasPermission(session.user.role, "manage_products")) return { error: "Forbidden" };
|
if (!session?.user || !hasPermission(session.user.role, "manage_products")) return { error: "Forbidden" };
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { AdminDialog } from "@/components/ui/admin-dialog";
|
import { AdminDialog } from "@/components/ui/admin-dialog";
|
||||||
import { createProduct, toggleProductActive } from "./actions";
|
import { createProduct, updateProduct, toggleProductActive } from "./actions";
|
||||||
|
|
||||||
type ProductRow = {
|
type ProductRow = {
|
||||||
id: string;
|
id: string;
|
||||||
|
|
@ -78,6 +78,63 @@ export function AddProductButton() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function EditProductButton({
|
||||||
|
product,
|
||||||
|
open: controlledOpen,
|
||||||
|
onOpenChange,
|
||||||
|
}: {
|
||||||
|
product: ProductRow;
|
||||||
|
open?: boolean;
|
||||||
|
onOpenChange?: (v: boolean) => void;
|
||||||
|
}) {
|
||||||
|
const router = useRouter();
|
||||||
|
const [internalOpen, setInternalOpen] = useState(false);
|
||||||
|
const [pending, setPending] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
|
const isControlled = controlledOpen !== undefined;
|
||||||
|
const open = isControlled ? controlledOpen : internalOpen;
|
||||||
|
const setOpen = isControlled ? (onOpenChange ?? (() => {})) : setInternalOpen;
|
||||||
|
|
||||||
|
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||||
|
e.preventDefault();
|
||||||
|
setPending(true);
|
||||||
|
setError("");
|
||||||
|
const fd = new FormData(e.currentTarget);
|
||||||
|
fd.set("id", product.id);
|
||||||
|
const result = await updateProduct(fd);
|
||||||
|
if ("error" in result) { setError(result.error); setPending(false); }
|
||||||
|
else { setPending(false); setOpen(false); router.refresh(); }
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{!isControlled && (
|
||||||
|
<button onClick={() => setOpen(true)}
|
||||||
|
className="rounded border border-primary-200 bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-700 hover:bg-primary-100 transition-colors">
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<AdminDialog title={`Edit — ${product.name}`} open={open} onClose={() => setOpen(false)}>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<ProductFormFields product={product} />
|
||||||
|
{error && <p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>}
|
||||||
|
<div className="flex justify-end gap-3 pt-1">
|
||||||
|
<button type="button" onClick={() => setOpen(false)}
|
||||||
|
className="rounded-lg border border-neutral-300 px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="submit" disabled={pending}
|
||||||
|
className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-60">
|
||||||
|
{pending ? "Saving…" : "Save Changes"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</AdminDialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function ToggleProductButton({ product }: { product: ProductRow }) {
|
export function ToggleProductButton({ product }: { product: ProductRow }) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [toggling, setToggling] = useState(false);
|
const [toggling, setToggling] = useState(false);
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@ import { useState } from "react";
|
||||||
import { formatCurrency, formatDate } from "@/lib/utils";
|
import { formatCurrency, formatDate } from "@/lib/utils";
|
||||||
import { useTableControls } from "@/components/ui/use-table-controls";
|
import { useTableControls } from "@/components/ui/use-table-controls";
|
||||||
import { TableControls, SortableTh } from "@/components/ui/table-controls";
|
import { TableControls, SortableTh } from "@/components/ui/table-controls";
|
||||||
import { AddProductButton } from "./product-form";
|
import { AddProductButton, EditProductButton } from "./product-form";
|
||||||
import { RowActionsMenu, RowActionsItem, RowActionsDestructiveItem, RowActionsSeparator } from "@/components/ui/row-actions-menu";
|
import { RowActionsMenu, RowActionsItem, RowActionsDestructiveItem, RowActionsSeparator } from "@/components/ui/row-actions-menu";
|
||||||
import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
|
import { DeleteConfirmDialog } from "@/components/ui/delete-confirm-dialog";
|
||||||
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
|
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
|
||||||
|
|
@ -26,12 +26,14 @@ export type ProductRow = {
|
||||||
const CHIPS = ["Active", "Inactive"];
|
const CHIPS = ["Active", "Inactive"];
|
||||||
|
|
||||||
function ProductActionsMenu({ product }: { product: ProductRow }) {
|
function ProductActionsMenu({ product }: { product: ProductRow }) {
|
||||||
|
const [editOpen, setEditOpen] = useState(false);
|
||||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||||
const [toggleOpen, setToggleOpen] = useState(false);
|
const [toggleOpen, setToggleOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<RowActionsMenu>
|
<RowActionsMenu>
|
||||||
|
<RowActionsItem onClick={() => setEditOpen(true)}>Edit</RowActionsItem>
|
||||||
<RowActionsItem onClick={() => setToggleOpen(true)}>
|
<RowActionsItem onClick={() => setToggleOpen(true)}>
|
||||||
{product.isActive ? "Deactivate" : "Activate"}
|
{product.isActive ? "Deactivate" : "Activate"}
|
||||||
</RowActionsItem>
|
</RowActionsItem>
|
||||||
|
|
@ -39,6 +41,11 @@ function ProductActionsMenu({ product }: { product: ProductRow }) {
|
||||||
<RowActionsDestructiveItem onClick={() => setDeleteOpen(true)}>Delete</RowActionsDestructiveItem>
|
<RowActionsDestructiveItem onClick={() => setDeleteOpen(true)}>Delete</RowActionsDestructiveItem>
|
||||||
</RowActionsMenu>
|
</RowActionsMenu>
|
||||||
|
|
||||||
|
<EditProductButton
|
||||||
|
product={{ id: product.id, code: product.code, name: product.name, description: product.description, isActive: product.isActive }}
|
||||||
|
open={editOpen}
|
||||||
|
onOpenChange={setEditOpen}
|
||||||
|
/>
|
||||||
<DeleteConfirmDialog
|
<DeleteConfirmDialog
|
||||||
open={deleteOpen}
|
open={deleteOpen}
|
||||||
onOpenChange={setDeleteOpen}
|
onOpenChange={setDeleteOpen}
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@ const PURCHASING_STAFF: NavItem[] = [
|
||||||
// Manager / Admin catalogue management — Sites conditionally shown
|
// Manager / Admin catalogue management — Sites conditionally shown
|
||||||
const PURCHASING_MGMT: NavItem[] = [
|
const PURCHASING_MGMT: NavItem[] = [
|
||||||
{ href: "/inventory/vendors", label: "Vendors", icon: Store, roles: ["MANAGER", "ADMIN"] },
|
{ href: "/inventory/vendors", label: "Vendors", icon: Store, roles: ["MANAGER", "ADMIN"] },
|
||||||
{ href: "/admin/products", label: "Items", icon: Package, roles: ["MANAGER", "ADMIN"] },
|
{ href: "/inventory/items", label: "Items", icon: Package, roles: ["MANAGER", "ADMIN"] },
|
||||||
{ href: "/admin/vessels", label: "Cost Centres", icon: Ship, roles: ["MANAGER", "ADMIN"] },
|
{ href: "/admin/vessels", label: "Cost Centres", icon: Ship, roles: ["MANAGER", "ADMIN"] },
|
||||||
...(INVENTORY_ENABLED
|
...(INVENTORY_ENABLED
|
||||||
? [{ href: "/admin/sites", label: "Sites", icon: MapPin, roles: ["MANAGER", "ADMIN"] as Role[] }]
|
? [{ href: "/admin/sites", label: "Sites", icon: MapPin, roles: ["MANAGER", "ADMIN"] as Role[] }]
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue