fix: group success page order items by device name

shop/app/order/success/page.tsx

@@ -49,6 +49,14 @@ export default async function OrderSuccessPage({
 
   const o = order as Order
   const items = o.order_data?.items ?? []
+  const groupedItems: Record<string, typeof items> = {}
+  items.forEach(item => {
+    const devName = item.device_name || 'Kasse 1'
+    if (!groupedItems[devName]) {
+      groupedItems[devName] = []
+    }
+    groupedItems[devName].push(item)
+  })
 
   const taxRate = o.order_data?.tax_rate ?? 19
   const oneTimeItems = items.filter((item) => item.billing_interval === 'one_time')
@@ -105,10 +113,15 @@ export default async function OrderSuccessPage({
             </Badge>
           </CardHeader>
           <CardContent className="space-y-4">
-            {/* Produkte */}
-            <div className="space-y-3">
-              {items.map((item) => (
-                <div key={item.product_id} className="space-y-1">
+            {/* Produkte gruppiert nach Gerät */}
+            <div className="space-y-4">
+              {Object.entries(groupedItems).map(([deviceName, devItems]) => (
+                <div key={deviceName} className="space-y-2 border-b border-white/5 pb-3 last:border-0 last:pb-0">
+                  <div className="bg-white/5 px-2 py-1 rounded text-xs text-primary font-bold">
+                    Gerät: {deviceName}
+                  </div>
+                  {devItems.map((item) => (
+                    <div key={item.product_id} className="space-y-1 pl-2">
                       <div className="flex justify-between text-sm">
                         <span className="font-semibold text-white">{item.product_name}</span>
                         <span className="text-white">
@@ -127,6 +140,8 @@ export default async function OrderSuccessPage({
                     </div>
                   ))}
                 </div>
+              ))}
+            </div>
 
             <Separator className="bg-white/10" />