From c5285dc907056d925b51a6f0081cf07a90ac7d5d Mon Sep 17 00:00:00 2001
From: DanielS <daniel.schumacher@caspos.de>
Date: Wed, 22 Jul 2026 17:32:02 +0200
Subject: [PATCH] feat(shop): list order items individually by device name in
 orders view

---
 shop/app/my-orders/page.tsx            | 11 +++++++----
 shop/components/admin/orders-table.tsx | 21 +++++++++++++--------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/shop/app/my-orders/page.tsx b/shop/app/my-orders/page.tsx
index 971fe51..cf1aaf2 100644
--- a/shop/app/my-orders/page.tsx
+++ b/shop/app/my-orders/page.tsx
@@ -126,14 +126,17 @@ export default async function MyOrdersPage() {
                   {/* Produkte kurz */}
                   {items.length > 0 && (
                     <div className="flex flex-wrap gap-2">
-                      {items.map((item, i) => (
+                      {items.map((item, idx) => (
                         <span
-                          key={item.product_id}
-                          className="text-xs bg-white/5 border border-white/10 rounded-full px-3 py-1 text-slate-300"
+                          key={idx}
+                          className="text-xs bg-white/5 border border-white/10 rounded-xl px-3 py-1.5 text-slate-300"
                         >
+                          <span className="font-semibold text-white mr-1">{item.device_name || 'Kasse'}:</span>
                           {item.product_name}
                           {item.selected_modules.length > 0 && (
-                            <span className="text-slate-500 ml-1">+{item.selected_modules.length} Module</span>
+                            <span className="text-slate-500 ml-1">
+                              (+{item.selected_modules.length} {item.selected_modules.length === 1 ? 'Modul' : 'Module'})
+                            </span>
                           )}
                         </span>
                       ))}
diff --git a/shop/components/admin/orders-table.tsx b/shop/components/admin/orders-table.tsx
index 3c885ee..4ce3b8b 100644
--- a/shop/components/admin/orders-table.tsx
+++ b/shop/components/admin/orders-table.tsx
@@ -182,17 +182,22 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
                       </div>
                     </TableCell>
                     <TableCell className="max-w-[200px]">
-                      <div className="flex flex-wrap gap-1">
-                        {items.map((item: any) => (
-                          <span
-                            key={item.product_id}
-                            className="text-[10px] bg-white/5 border border-white/10 rounded-full px-2 py-0.5 text-slate-300 inline-block"
+                      <div className="flex flex-col gap-1.5">
+                        {items.map((item: any, idx: number) => (
+                          <div
+                            key={idx}
+                            className="text-[10px] text-slate-300 leading-tight"
                           >
-                            {item.product_name}
+                            <span className="font-semibold text-white block">
+                              {item.device_name || 'Kasse'}:
+                            </span>
+                            <span>{item.product_name}</span>
                             {item.selected_modules?.length > 0 && (
-                              <span className="text-slate-500 ml-1">+{item.selected_modules.length}</span>
+                              <span className="text-slate-500 block text-[9px] mt-0.5">
+                                + {item.selected_modules.map((m: any) => m.module_name || m.name).join(', ')}
+                              </span>
                             )}
-                          </span>
+                          </div>
                         ))}
                       </div>
                     </TableCell>