feat(shop): list order items individually by device name in orders view
All checks were successful
Staging Build / build (push) Successful in 2m54s

This commit is contained in:
DanielS
2026-07-22 17:32:02 +02:00
parent 6cd5eb917c
commit c5285dc907
2 changed files with 20 additions and 12 deletions

View File

@@ -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>
))}

View File

@@ -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>