From cb6668d61422f41d8726220eb71bf4d6ed50a5b4 Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Fri, 1 May 2026 02:21:39 +0200
Subject: [PATCH] feat: add sort_order to categories for controlling display
 order in the order wizard

---
 shop/components/admin/category-dialog.tsx     | 149 +++++++++++-------
 shop/components/admin/category-list.tsx       |  28 ++--
 shop/lib/actions/products.ts                  |   2 +-
 shop/lib/types.ts                             |   1 +
 ...501001900_add_sort_order_to_categories.sql |   5 +
 5 files changed, 117 insertions(+), 68 deletions(-)
 create mode 100644 shop/supabase/migrations/20260501001900_add_sort_order_to_categories.sql

diff --git a/shop/components/admin/category-dialog.tsx b/shop/components/admin/category-dialog.tsx
index 786c317..74deda1 100644
--- a/shop/components/admin/category-dialog.tsx
+++ b/shop/components/admin/category-dialog.tsx
@@ -32,12 +32,14 @@ import {
   SelectTrigger, 
   SelectValue 
 } from '@/components/ui/select'
+import { ScrollArea } from '@/components/ui/scroll-area'
 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'),
+  sort_order: z.coerce.number().int().min(0).default(0),
 })
 
 type CategoryFormValues = z.infer<typeof categorySchema>
@@ -46,7 +48,7 @@ export function CategoryDialog({
   children, 
   category 
 }: { 
-  children: React.ReactNode, 
+  children?: React.ReactNode, 
   category?: Category 
 }) {
   const [open, setOpen] = useState(false)
@@ -57,6 +59,7 @@ export function CategoryDialog({
       name: category?.name || '',
       description: category?.description || '',
       icon: category?.icon || 'Package',
+      sort_order: category?.sort_order ?? 0,
     },
   })
 
@@ -83,71 +86,101 @@ export function CategoryDialog({
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogTrigger asChild>
+        {children || (
+          <Button className="bg-primary hover:bg-primary/90">
+             Kategorie hinzufügen
+          </Button>
+        )}
+      </DialogTrigger>
       <DialogContent className="glass-dark border-white/10 text-white shadow-2xl">
         <DialogHeader>
           <DialogTitle>{category ? 'Kategorie bearbeiten' : 'Neue Kategorie erstellen'}</DialogTitle>
-          <DialogDescription>
+          <DialogDescription className="text-slate-300">
             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>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 flex-1 overflow-hidden flex flex-col min-h-0">
+            <ScrollArea className="max-h-[60vh] pr-4">
+              <div className="space-y-4 py-2">
+                <FormField
+                  control={form.control}
+                  name="name"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-white">Name</FormLabel>
+                      <FormControl>
+                        <Input placeholder="z.B. Software" className="bg-white/5 border-white/10 text-white" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="description"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-white">Beschreibung</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Kurze Beschreibung" className="bg-white/5 border-white/10 text-white" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="icon"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-white">Icon</FormLabel>
+                      <Select onValueChange={field.onChange} defaultValue={field.value}>
+                        <FormControl>
+                          <SelectTrigger className="bg-white/5 border-white/10 text-white">
+                            <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} className="text-white hover:bg-white/10">
+                              <div className="flex items-center gap-2">
+                                <Icon className="w-4 h-4" />
+                                {name}
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  name="sort_order"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel className="text-white">Reihenfolge im Bestellvorgang</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="number"
+                          min={0}
+                          placeholder="0 = zuerst"
+                          className="bg-white/5 border-white/10 text-white"
+                          {...field}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                      <p className="text-xs text-slate-400">Kleinere Zahl = weiter oben im Bestellformular angezeigt.</p>
+                    </FormItem>
+                  )}
+                />
+              </div>
+            </ScrollArea>
+            <DialogFooter className="pt-4">
               <Button type="submit" className="w-full bg-primary hover:bg-primary/90">
                 {category ? 'Aktualisieren' : 'Erstellen'}
               </Button>
diff --git a/shop/components/admin/category-list.tsx b/shop/components/admin/category-list.tsx
index 6893cf5..5f27d9c 100644
--- a/shop/components/admin/category-list.tsx
+++ b/shop/components/admin/category-list.tsx
@@ -10,7 +10,7 @@ import {
   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 { Edit2, Trash2, Cloud, Utensils, HardDrive, Package, ArrowUpDown } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { deleteCategory } from '@/lib/actions/products'
 import { useState } from 'react'
@@ -39,7 +39,7 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
     <Card className="glass-dark border-white/10 shadow-2xl overflow-hidden">
       <CardHeader>
         <CardTitle>Kategorienübersicht</CardTitle>
-        <CardDescription>
+        <CardDescription className="text-slate-400">
           Verwalten Sie die Hauptkategorien für Ihre Produkte.
         </CardDescription>
       </CardHeader>
@@ -47,10 +47,15 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
         <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>
+              <TableHead className="text-white font-bold w-10">Icon</TableHead>
+              <TableHead className="text-white font-bold">Name</TableHead>
+              <TableHead className="text-white font-bold">Beschreibung</TableHead>
+              <TableHead className="text-white font-bold w-28">
+                <span className="flex items-center gap-1">
+                  <ArrowUpDown className="w-3 h-3" /> Reihenfolge
+                </span>
+              </TableHead>
+              <TableHead className="text-right text-white font-bold">Aktionen</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -61,8 +66,13 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
                     {getIcon(category.icon)}
                   </div>
                 </TableCell>
-                <TableCell className="font-medium">{category.name}</TableCell>
-                <TableCell className="text-muted-foreground">{category.description}</TableCell>
+                <TableCell className="font-medium text-white">{category.name}</TableCell>
+                <TableCell className="text-slate-300">{category.description}</TableCell>
+                <TableCell>
+                  <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-primary/20 text-primary text-sm font-bold">
+                    {category.sort_order}
+                  </span>
+                </TableCell>
                 <TableCell className="text-right">
                   <div className="flex justify-end gap-2">
                     <CategoryDialog category={category}>
@@ -84,7 +94,7 @@ export function CategoryList({ initialCategories }: { initialCategories: Categor
             ))}
             {categories.length === 0 && (
               <TableRow>
-                <TableCell colSpan={4} className="text-center py-10 text-muted-foreground">
+                <TableCell colSpan={5} className="text-center py-10 text-slate-400">
                   Keine Kategorien gefunden.
                 </TableCell>
               </TableRow>
diff --git a/shop/lib/actions/products.ts b/shop/lib/actions/products.ts
index f0f2763..ffb8542 100644
--- a/shop/lib/actions/products.ts
+++ b/shop/lib/actions/products.ts
@@ -20,7 +20,7 @@ export async function getCategories() {
   const { data, error } = await supabase
     .from('categories')
     .select('*')
-    .order('name', { ascending: true })
+    .order('sort_order', { ascending: true })
 
   if (error) throw error
   return data as Category[]
diff --git a/shop/lib/types.ts b/shop/lib/types.ts
index 174d3cb..2617863 100644
--- a/shop/lib/types.ts
+++ b/shop/lib/types.ts
@@ -16,6 +16,7 @@ export type Category = {
   name: string;
   description?: string | null;
   icon?: string | null;
+  sort_order: number;
   created_at: string;
 };
 
diff --git a/shop/supabase/migrations/20260501001900_add_sort_order_to_categories.sql b/shop/supabase/migrations/20260501001900_add_sort_order_to_categories.sql
new file mode 100644
index 0000000..8712699
--- /dev/null
+++ b/shop/supabase/migrations/20260501001900_add_sort_order_to_categories.sql
@@ -0,0 +1,5 @@
+-- Add sort_order column to categories for controlling display order in the order wizard
+ALTER TABLE public.categories ADD COLUMN IF NOT EXISTS sort_order INTEGER DEFAULT 0 NOT NULL;
+
+-- Index for efficient ordering
+CREATE INDEX IF NOT EXISTS idx_categories_sort_order ON public.categories(sort_order);