From 826cf33183f05c56f4100dd0c1a029d3720c4beb Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Fri, 1 May 2026 00:57:33 +0200
Subject: [PATCH] feat: add full CRUD management for product categories in
 admin panel

---
 shop/app/admin/categories/page.tsx        |  46 +++++++
 shop/components/admin/category-dialog.tsx | 160 ++++++++++++++++++++++
 shop/components/admin/category-list.tsx   |  97 +++++++++++++
 shop/lib/actions/products.ts              |  38 +++++
 4 files changed, 341 insertions(+)
 create mode 100644 shop/app/admin/categories/page.tsx
 create mode 100644 shop/components/admin/category-dialog.tsx
 create mode 100644 shop/components/admin/category-list.tsx

diff --git a/shop/app/admin/categories/page.tsx b/shop/app/admin/categories/page.tsx
new file mode 100644
index 0000000..1814127
--- /dev/null
+++ b/shop/app/admin/categories/page.tsx
@@ -0,0 +1,46 @@
+import { getCategories } from '@/lib/actions/products'
+import { CategoryList } from '@/components/admin/category-list'
+import { CategoryDialog } from '@/components/admin/category-dialog'
+import { LayoutGrid, Plus } from 'lucide-react'
+import { Suspense } from 'react'
+
+export default async function AdminCategoriesPage() {
+  return (
+    <div className="flex-1 space-y-8 p-8 pt-6">
+      <div className="flex items-center justify-between space-y-2">
+        <div>
+          <h2 className="text-3xl font-bold tracking-tight text-gradient flex items-center gap-3">
+            <LayoutGrid className="w-8 h-8 text-primary" />
+            Kategorien
+          </h2>
+          <p className="text-muted-foreground">
+            Verwalten Sie die Struktur Ihres Webshops.
+          </p>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Suspense fallback={<div className="h-10 w-32 animate-pulse bg-white/5 rounded-md" />}>
+            <CreateCategoryAction />
+          </Suspense>
+        </div>
+      </div>
+      <Suspense fallback={<div className="h-40 w-full animate-pulse bg-white/5 rounded-xl" />}>
+        <CategoryDataWrapper />
+      </Suspense>
+    </div>
+  )
+}
+
+async function CategoryDataWrapper() {
+  const categories = await getCategories()
+  return <CategoryList initialCategories={categories} />
+}
+
+async function CreateCategoryAction() {
+  return (
+    <CategoryDialog>
+      <button className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50">
+        <Plus className="mr-2 h-4 w-4" /> Kategorie hinzufügen
+      </button>
+    </CategoryDialog>
+  )
+}
diff --git a/shop/components/admin/category-dialog.tsx b/shop/components/admin/category-dialog.tsx
new file mode 100644
index 0000000..786c317
--- /dev/null
+++ b/shop/components/admin/category-dialog.tsx
@@ -0,0 +1,160 @@
+'use client'
+
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { createCategory, updateCategory } from '@/lib/actions/products'
+import { Category } from '@/lib/types'
+import { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from '@/components/ui/select'
+import { Cloud, Utensils, HardDrive, Package } from 'lucide-react'
+
+const categorySchema = z.object({
+  name: z.string().min(2, 'Name muss mindestens 2 Zeichen lang sein'),
+  description: z.string().optional(),
+  icon: z.string().default('Package'),
+})
+
+type CategoryFormValues = z.infer<typeof categorySchema>
+
+export function CategoryDialog({ 
+  children, 
+  category 
+}: { 
+  children: React.ReactNode, 
+  category?: Category 
+}) {
+  const [open, setOpen] = useState(false)
+
+  const form = useForm<CategoryFormValues>({
+    resolver: zodResolver(categorySchema) as any,
+    defaultValues: {
+      name: category?.name || '',
+      description: category?.description || '',
+      icon: category?.icon || 'Package',
+    },
+  })
+
+  async function onSubmit(values: CategoryFormValues) {
+    try {
+      if (category) {
+        await updateCategory(category.id, values)
+      } else {
+        await createCategory(values)
+      }
+      setOpen(false)
+      form.reset()
+    } catch (error) {
+      console.error('Error saving category:', error)
+    }
+  }
+
+  const icons = [
+    { name: 'Cloud', Icon: Cloud },
+    { name: 'Utensils', Icon: Utensils },
+    { name: 'HardDrive', Icon: HardDrive },
+    { name: 'Package', Icon: Package },
+  ]
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="glass-dark border-white/10 text-white shadow-2xl">
+        <DialogHeader>
+          <DialogTitle>{category ? 'Kategorie bearbeiten' : 'Neue Kategorie erstellen'}</DialogTitle>
+          <DialogDescription>
+            Definieren Sie eine Kategorie für Ihre Produkte.
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="z.B. Software" className="bg-white/5 border-white/10" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Beschreibung</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Kurze Beschreibung" className="bg-white/5 border-white/10" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="icon"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Icon</FormLabel>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger className="bg-white/5 border-white/10">
+                        <SelectValue placeholder="Icon wählen" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent className="glass-dark border-white/10 text-white">
+                      {icons.map(({ name, Icon }) => (
+                        <SelectItem key={name} value={name}>
+                          <div className="flex items-center gap-2">
+                            <Icon className="w-4 h-4" />
+                            {name}
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <DialogFooter>
+              <Button type="submit" className="w-full bg-primary hover:bg-primary/90">
+                {category ? 'Aktualisieren' : 'Erstellen'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/shop/components/admin/category-list.tsx b/shop/components/admin/category-list.tsx
new file mode 100644
index 0000000..6893cf5
--- /dev/null
+++ b/shop/components/admin/category-list.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import { Category } from '@/lib/types'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Edit2, Trash2, Cloud, Utensils, HardDrive, Package } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { deleteCategory } from '@/lib/actions/products'
+import { useState } from 'react'
+import { CategoryDialog } from './category-dialog'
+
+export function CategoryList({ initialCategories }: { initialCategories: Category[] }) {
+  const [categories, setCategories] = useState(initialCategories)
+
+  const handleDelete = async (id: string) => {
+    if (confirm('Möchten Sie diese Kategorie wirklich löschen? Alle zugehörigen Produkte werden nicht mehr dieser Kategorie zugeordnet sein.')) {
+      await deleteCategory(id)
+      setCategories(categories.filter(c => c.id !== id))
+    }
+  }
+
+  const getIcon = (name?: string | null) => {
+    switch (name) {
+      case 'Cloud': return <Cloud className="w-4 h-4" />
+      case 'Utensils': return <Utensils className="w-4 h-4" />
+      case 'HardDrive': return <HardDrive className="w-4 h-4" />
+      default: return <Package className="w-4 h-4" />
+    }
+  }
+
+  return (
+    <Card className="glass-dark border-white/10 shadow-2xl overflow-hidden">
+      <CardHeader>
+        <CardTitle>Kategorienübersicht</CardTitle>
+        <CardDescription>
+          Verwalten Sie die Hauptkategorien für Ihre Produkte.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow className="border-white/10 hover:bg-white/5">
+              <TableHead className="text-muted-foreground">Icon</TableHead>
+              <TableHead className="text-muted-foreground">Name</TableHead>
+              <TableHead className="text-muted-foreground">Beschreibung</TableHead>
+              <TableHead className="text-right text-muted-foreground">Aktionen</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {categories.map((category) => (
+              <TableRow key={category.id} className="border-white/5 hover:bg-white/5 transition-colors">
+                <TableCell>
+                  <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
+                    {getIcon(category.icon)}
+                  </div>
+                </TableCell>
+                <TableCell className="font-medium">{category.name}</TableCell>
+                <TableCell className="text-muted-foreground">{category.description}</TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end gap-2">
+                    <CategoryDialog category={category}>
+                      <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-white">
+                        <Edit2 className="h-4 w-4" />
+                      </Button>
+                    </CategoryDialog>
+                    <Button 
+                      variant="ghost" 
+                      size="icon" 
+                      className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+                      onClick={() => handleDelete(category.id)}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+            {categories.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={4} className="text-center py-10 text-muted-foreground">
+                  Keine Kategorien gefunden.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/shop/lib/actions/products.ts b/shop/lib/actions/products.ts
index e2d6960..7fabf95 100644
--- a/shop/lib/actions/products.ts
+++ b/shop/lib/actions/products.ts
@@ -23,9 +23,47 @@ export async function getCategories() {
     .order('name', { ascending: true })
 
   if (error) throw error
+  return data as Category[]
+}
+
+export async function createCategory(category: Omit<Category, 'id' | 'created_at'>) {
+  const supabase = await createClient()
+  const { data, error } = await supabase
+    .from('categories')
+    .insert([category])
+    .select()
+    .single()
+
+  if (error) throw error
+  revalidatePath('/admin/categories')
+  revalidatePath('/order')
   return data
 }
 
+export async function updateCategory(id: string, category: Partial<Category>) {
+  const supabase = await createClient()
+  const { error } = await supabase
+    .from('categories')
+    .update(category)
+    .eq('id', id)
+
+  if (error) throw error
+  revalidatePath('/admin/categories')
+  revalidatePath('/order')
+}
+
+export async function deleteCategory(id: string) {
+  const supabase = await createClient()
+  const { error } = await supabase
+    .from('categories')
+    .delete()
+    .eq('id', id)
+
+  if (error) throw error
+  revalidatePath('/admin/categories')
+  revalidatePath('/order')
+}
+
 export async function createProduct(product: Omit<Product, 'id' | 'created_at' | 'updated_at'>, modules: Omit<ProductModule, 'id' | 'product_id' | 'created_at'>[]) {
   const supabase = await createClient()