From 64adef53d35432a3a293675af8cbae0d2abf717b Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Tue, 21 Jul 2026 17:54:08 +0100
Subject: [PATCH] Feat: Add cascading category picker to product forms

Implemented hierarchical category selection in product creation and edit forms.
Now displays parent categories first, then shows child categories when a parent
is selected (e.g., Apparel > Adults, Kids, Babies).

Changes:
- Create CategoryPicker client component for cascading selection
- Update new product page to use CategoryPicker
- Update edit product page to use CategoryPicker
- Query categories with children relationship

User experience:
1. Select parent category (Apparel, Drinkware, Phone Cases, etc.)
2. Select specific type (Adults/Kids/Babies, Ceramic/Steel, etc.)
3. Form automatically validates that both selections are made

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/app/admin/products/[id]/edit/page.tsx | 23 ++----
 src/app/admin/products/new/page.tsx       | 24 ++----
 src/components/CategoryPicker.tsx         | 93 +++++++++++++++++++++++
 3 files changed, 106 insertions(+), 34 deletions(-)
 create mode 100644 src/components/CategoryPicker.tsx

diff --git a/src/app/admin/products/[id]/edit/page.tsx b/src/app/admin/products/[id]/edit/page.tsx
index ef35582..03b1bd8 100644
--- a/src/app/admin/products/[id]/edit/page.tsx
+++ b/src/app/admin/products/[id]/edit/page.tsx
@@ -7,6 +7,7 @@ import AdminNav from '@/components/AdminNav';
 import ColorPicker from '@/components/ColorPicker';
 import SizePicker from '@/components/SizePicker';
 import PhotoPrintAreaField, { type Box } from '@/components/PhotoPrintAreaField';
+import CategoryPicker from '@/components/CategoryPicker';
 import { MOCKUP_OPTIONS } from '@/lib/mockupDefaults';
 
 export default async function EditProductPage({ params }: { params: { id: string } }) {
@@ -15,7 +16,10 @@ export default async function EditProductPage({ params }: { params: { id: string
   if (!row) notFound();
   const product = toProductDTO(row, activePromotions);
 
-  const categories = await prisma.category.findMany({ orderBy: { name: 'asc' } });
+  const categories = await prisma.category.findMany({
+    orderBy: { name: 'asc' },
+    include: { children: { orderBy: { name: 'asc' } } },
+  });
   const collections = await prisma.collection.findMany({ orderBy: { name: 'asc' } });
   const occasions = collections.filter((c) => c.group === 'OCCASION');
   const recipients = collections.filter((c) => c.group === 'RECIPIENT');
@@ -100,22 +104,7 @@ export default async function EditProductPage({ params }: { params: { id: string
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label htmlFor="category" className="tag-label mb-2 block">
-              Category
-            </label>
-            <select
-              id="category"
-              name="category"
-              required
-              defaultValue={product.category}
-              className="w-full border border-line bg-paper px-3 py-2 text-sm"
-            >
-              {categories.map((c) => (
-                <option key={c.id} value={c.slug}>
-                  {c.name}
-                </option>
-              ))}
-            </select>
+            <CategoryPicker categories={categories} defaultValue={product.category} />
           </div>
           <div>
             <label htmlFor="mockup" className="tag-label mb-2 block">
diff --git a/src/app/admin/products/new/page.tsx b/src/app/admin/products/new/page.tsx
index f555642..c6ed68a 100644
--- a/src/app/admin/products/new/page.tsx
+++ b/src/app/admin/products/new/page.tsx
@@ -4,10 +4,14 @@ import AdminNav from '@/components/AdminNav';
 import ColorPicker from '@/components/ColorPicker';
 import SizePicker from '@/components/SizePicker';
 import PhotoPrintAreaField from '@/components/PhotoPrintAreaField';
+import CategoryPicker from '@/components/CategoryPicker';
 import { MOCKUP_OPTIONS } from '@/lib/mockupDefaults';
 
 export default async function NewProductPage() {
-  const categories = await prisma.category.findMany({ orderBy: { name: 'asc' } });
+  const categories = await prisma.category.findMany({
+    orderBy: { name: 'asc' },
+    include: { children: { orderBy: { name: 'asc' } } },
+  });
   const collections = await prisma.collection.findMany({ orderBy: { name: 'asc' } });
   const occasions = collections.filter((c) => c.group === 'OCCASION');
   const recipients = collections.filter((c) => c.group === 'RECIPIENT');
@@ -68,22 +72,8 @@ export default async function NewProductPage() {
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label htmlFor="category" className="tag-label mb-2 block">
-              Category
-            </label>
-            <select
-              id="category"
-              name="category"
-              required
-              className="w-full border border-line bg-paper px-3 py-2 text-sm"
-            >
-              {categories.map((c) => (
-                <option key={c.id} value={c.slug}>
-                  {c.name}
-                </option>
-              ))}
-            </select>
-            <a href="/admin/categories/new" className="mt-1 inline-block text-xs text-clay hover:text-clay-dark">
+            <CategoryPicker categories={categories} />
+            <a href="/admin/categories/new" className="mt-3 inline-block text-xs text-clay hover:text-clay-dark">
               + Add a new category
             </a>
           </div>
diff --git a/src/components/CategoryPicker.tsx b/src/components/CategoryPicker.tsx
new file mode 100644
index 0000000..e170d41
--- /dev/null
+++ b/src/components/CategoryPicker.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { useState } from 'react';
+import type { Category } from '@prisma/client';
+
+type CategoryWithChildren = Category & { children: Category[] };
+
+export default function CategoryPicker({
+  categories,
+  defaultValue,
+}: {
+  categories: CategoryWithChildren[];
+  defaultValue?: string;
+}) {
+  const [selectedParent, setSelectedParent] = useState<string>('');
+  const [selectedChild, setSelectedChild] = useState<string>(defaultValue || '');
+
+  // Find parent category from a child slug
+  const getParentFromChild = (childSlug: string): string => {
+    for (const parent of categories) {
+      if (parent.children.some((c) => c.slug === childSlug)) {
+        return parent.id;
+      }
+    }
+    return '';
+  };
+
+  // Initialize parent if we have a default child value
+  const initialParent = defaultValue ? getParentFromChild(defaultValue) : '';
+  if (defaultValue && !selectedParent && initialParent) {
+    setSelectedParent(initialParent);
+  }
+
+  const currentParent = categories.find((c) => c.id === selectedParent);
+  const childOptions = currentParent?.children || [];
+
+  return (
+    <div className="space-y-3">
+      <div>
+        <label htmlFor="parentCategory" className="tag-label mb-2 block">
+          Category Type
+        </label>
+        <select
+          id="parentCategory"
+          value={selectedParent}
+          onChange={(e) => {
+            setSelectedParent(e.target.value);
+            setSelectedChild('');
+          }}
+          className="w-full border border-line bg-paper px-3 py-2 text-sm"
+        >
+          <option value="">— Select a category —</option>
+          {categories.map((c) => (
+            <option key={c.id} value={c.id}>
+              {c.name}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {selectedParent && (
+        <div>
+          <label htmlFor="category" className="tag-label mb-2 block">
+            Specific Type
+          </label>
+          <select
+            id="category"
+            name="category"
+            required
+            value={selectedChild}
+            onChange={(e) => setSelectedChild(e.target.value)}
+            className="w-full border border-line bg-paper px-3 py-2 text-sm"
+          >
+            <option value="">— Select a specific type —</option>
+            {childOptions.map((c) => (
+              <option key={c.id} value={c.slug}>
+                {c.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {!selectedParent && (
+        <p className="text-xs text-muted">Select a category type above to see specific options.</p>
+      )}
+
+      {selectedParent && !selectedChild && (
+        <p className="text-xs text-muted">Select a specific type from the options above.</p>
+      )}
+    </div>
+  );
+}