feat: add sort by category button to products list view

shop/components/admin/product-list.tsx

@@ -11,14 +11,15 @@ import {
 } from '@/components/ui/table'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
-import { Edit2, Trash2, Layers } from 'lucide-react'
+import { Edit2, Trash2, Layers, ArrowUpDown } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { deleteProduct } from '@/lib/actions/products'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { CreateProductDialog } from './create-product-dialog'
 
 export function ProductList({ initialProducts, categories }: { initialProducts: Product[], categories: Category[] }) {
   const [products, setProducts] = useState(initialProducts)
+  const [isSortedByCategory, setIsSortedByCategory] = useState(false)
 
   useEffect(() => {
     setProducts(initialProducts)
@@ -31,13 +32,46 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
     }
   }
 
+  const toggleSortByCategory = () => {
+    setIsSortedByCategory(!isSortedByCategory)
+  }
+
+  const displayedProducts = useMemo(() => {
+    if (!isSortedByCategory) return products
+
+    return [...products].sort((a, b) => {
+      const orderA = a.category?.sort_order ?? 9999
+      const orderB = b.category?.sort_order ?? 9999
+      if (orderA !== orderB) return orderA - orderB
+
+      const catA = a.category?.name || ''
+      const catB = b.category?.name || ''
+      if (catA !== catB) return catA.localeCompare(catB)
+
+      return a.name.localeCompare(b.name)
+    })
+  }, [products, isSortedByCategory])
+
   return (
     <Card className="bg-white dark:bg-slate-900/50 border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden text-slate-900 dark:text-white">
-      <CardHeader>
+      <CardHeader className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <CardTitle>Produktübersicht</CardTitle>
+        <div>
-        <CardDescription className="text-slate-500 dark:text-slate-400">
+          <CardTitle>Produktübersicht</CardTitle>
-          Alle konfigurierten Software-Lösungen und Erweiterungen.
+          <CardDescription className="text-slate-500 dark:text-slate-400">
-        </CardDescription>
+            Alle konfigurierten Software-Lösungen und Erweiterungen.
+          </CardDescription>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={toggleSortByCategory}
+          className={`border-slate-200 dark:border-white/10 hover:bg-slate-100 dark:hover:bg-white/10 text-slate-700 dark:text-white ${
+            isSortedByCategory ? 'bg-primary/10 border-primary text-primary hover:bg-primary/20 dark:bg-primary/20 dark:border-primary dark:text-primary-foreground' : ''
+          }`}
+        >
+          <ArrowUpDown className="w-4 h-4 mr-2" />
+          {isSortedByCategory ? 'Kategoriesortierung aktiv' : 'Nach Kategorien sortieren'}
+        </Button>
       </CardHeader>
       <CardContent>
         <Table>
@@ -51,7 +85,7 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
             </TableRow>
           </TableHeader>
           <TableBody>
-            {products.map((product) => (
+            {displayedProducts.map((product) => (
               <TableRow key={product.id} className="border-slate-100 dark:border-white/5 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                 <TableCell className="font-medium text-slate-900 dark:text-white">
                   <div className="flex flex-col gap-1">
@@ -103,7 +137,7 @@ export function ProductList({ initialProducts, categories }: { initialProducts:
                 </TableCell>
               </TableRow>
             ))}
-            {products.length === 0 && (
+            {displayedProducts.length === 0 && (
               <TableRow>
                 <TableCell colSpan={5} className="text-center py-10 text-slate-500 dark:text-slate-400">
                   Keine Produkte gefunden. Erstellen Sie Ihr erstes Produkt!