feat(categories): implement category management with hierarchical structure and update product association

frontend/app/admin/products/EditProductForm.tsx

@@ -1,26 +1,18 @@
 'use client';
 
-import { useState, useTransition } from 'react';
+import { useState, useTransition, useEffect } from 'react';
 import type { Product } from '../../../features/inventory/types';
 import { updateProduct, deleteProduct, setProductTags } from './actions';
 
-type Props = {
-  product: Product;
+type CategoryNode = {
+  id: number;
+  name: string;
+  parentId: number | null;
+  children: CategoryNode[];
 };
 
-const CATEGORIES: Record<string, string[]> = {
-  'Bröd & Kakor': ['Bröd', 'Kakor & bullar', 'Bageriprodukter'],
-  'Dryck': ['Kaffe & te', 'Juice & läsk', 'Vatten', 'Alkohol'],
-  'Fisk & Skaldjur': ['Fisk', 'Skaldjur', 'Bläckfisk & kalmar', 'Rökt fisk'],
-  'Frukt & Grönt': ['Frukt', 'Grönsaker', 'Bär', 'Rotfrukter', 'Kål'],
-  'Fryst': ['Fryst frukt & grönt', 'Frysta färdigrätter', 'Fryst kött & fisk', 'Glass'],
-  'Färdigmat': ['Färdigrätter', 'Snabbmat', 'Sallader & wrap'],
-  'Glass, godis & snacks': ['Glass', 'Godis', 'Snacks'],
-  'Kött, chark & fågel': ['Nötkött', 'Fläsk', 'Fågel', 'Charkuteri', 'Vilt'],
-  'Mejeri, ost & ägg': ['Mjölk', 'Grädde', 'Ost', 'Yoghurt & fil', 'Smör & margarin', 'Ägg'],
-  'Skafferi': ['Mjöl & bakning', 'Pasta & ris', 'Baljväxter', 'Nötter & frön', 'Socker & sötningsmedel', 'Kryddor & örter', 'Konserver & burkar', 'Sylt, mos & marmelad'],
-  'Vegetariskt': ['Vegetariska proteinkällor', 'Vegetariska färdigrätter', 'Vegetariska korvar & burgare'],
-  'Övrigt': [],
+type Props = {
+  product: Product;
 };
 
 const inputStyle: React.CSSProperties = {
@@ -37,16 +29,48 @@ export default function EditProductForm({ product }: Props) {
   const [isPending, startTransition] = useTransition();
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
-  const [selectedCategory, setSelectedCategory] = useState(product.category ?? '');
   const [tagInput, setTagInput] = useState(
     product.tags?.map((pt) => pt.tag.name).join(', ') ?? ''
   );
 
+  // Kategoriträd från API
+  const [categoryTree, setCategoryTree] = useState<CategoryNode[]>([]);
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | ''>(
+    (product as any).categoryId ?? ''
+  );
+
+  useEffect(() => {
+    if (isOpen && categoryTree.length === 0) {
+      fetch('/api/categories')
+        .then((r) => r.json())
+        .then((data: CategoryNode[]) => setCategoryTree(data))
+        .catch(() => {});
+    }
+  }, [isOpen]);
+
+  // Bygg flat lista för select med indragna nivåer
+  function flattenTree(nodes: CategoryNode[], depth = 0): { id: number; name: string; label: string }[] {
+    const result: { id: number; name: string; label: string }[] = [];
+    for (const node of nodes) {
+      const prefix = depth === 0 ? '' : depth === 1 ? '\u00a0\u00a0\u00a0↳ ' : '\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0↳ ';
+      result.push({ id: node.id, name: node.name, label: prefix + node.name });
+      result.push(...flattenTree(node.children, depth + 1));
+    }
+    return result;
+  }
+
+  const flatCategories = flattenTree(categoryTree);
+
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     setError(null);
     setSuccess(false);
     const formData = new FormData(e.currentTarget);
+    if (selectedCategoryId !== '') {
+      formData.set('categoryId', String(selectedCategoryId));
+    } else {
+      formData.set('categoryId', '');
+    }
     const rawTags = tagInput.split(',').map((t) => t.trim().toLowerCase()).filter(Boolean);
     startTransition(async () => {
       try {
@@ -73,8 +97,6 @@ export default function EditProductForm({ product }: Props) {
     });
   }
 
-  const subcategories = CATEGORIES[selectedCategory] ?? [];
-
   return (
     <div>
       <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
@@ -132,36 +154,19 @@ export default function EditProductForm({ product }: Props) {
           </label>
 
           <label style={{ display: 'grid', gap: '0.25rem', fontSize: '0.9rem' }}>
-            <span style={{ fontWeight: 600 }}>Kategori</span>
+            <span style={{ fontWeight: 600 }}>Kategori (ny hierarki)</span>
             <select
-              name="category"
-              value={selectedCategory}
-              onChange={(e) => { setSelectedCategory(e.target.value); }}
+              value={selectedCategoryId}
+              onChange={(e) => setSelectedCategoryId(e.target.value === '' ? '' : Number(e.target.value))}
               style={inputStyle}
             >
               <option value="">— Ingen kategori —</option>
-              {Object.keys(CATEGORIES).map((cat) => (
-                <option key={cat} value={cat}>{cat}</option>
+              {flatCategories.map((cat) => (
+                <option key={cat.id} value={cat.id}>{cat.label}</option>
               ))}
             </select>
           </label>
 
-          {subcategories.length > 0 && (
-            <label style={{ display: 'grid', gap: '0.25rem', fontSize: '0.9rem' }}>
-              <span style={{ fontWeight: 600 }}>Underkategori</span>
-              <select
-                name="subcategory"
-                defaultValue={product.subcategory ?? ''}
-                style={inputStyle}
-              >
-                <option value="">— Ingen underkategori —</option>
-                {subcategories.map((sub) => (
-                  <option key={sub} value={sub}>{sub}</option>
-                ))}
-              </select>
-            </label>
-          )}
-
           <label style={{ display: 'grid', gap: '0.25rem', fontSize: '0.9rem' }}>
             <span style={{ fontWeight: 600 }}>Varumärke</span>
             <input

frontend/app/admin/products/actions.ts

@@ -11,6 +11,8 @@ export async function updateProduct(formData: FormData) {
   const category = String(formData.get('category') || '').trim();
   const subcategory = String(formData.get('subcategory') || '').trim();
   const brand = String(formData.get('brand') || '').trim();
+  const categoryIdRaw = formData.get('categoryId');
+  const categoryId = categoryIdRaw !== '' && categoryIdRaw != null ? Number(categoryIdRaw) : null;
 
   if (!name) throw new Error('Namn får inte vara tomt.');
   if (name.length > 100) throw new Error('Namn får inte vara längre än 100 tecken.');
@@ -28,6 +30,7 @@ export async function updateProduct(formData: FormData) {
       category: category || null,
       subcategory: subcategory || null,
       brand: brand || null,
+      categoryId,
     }),
     cache: 'no-store',
   });

frontend/app/api/categories/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from 'next/server';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL_INTERNAL || 'http://recipe-api:8080';
+
+export async function GET() {
+  const res = await fetch(`${API_BASE}/api/categories/tree`, { cache: 'no-store' });
+  const text = await res.text();
+  return new NextResponse(text, {
+    status: res.status,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}