Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): group order items by device in modal

Browse Source
This commit is contained in:
DanielS
2026-08-18 22:55:10 +02:00
parent ea1906f9e4
commit fff40a68fe
1 changed files with 60 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
shop/components/admin/orders-table.tsx
View File

@@ -456,42 +456,61 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
</div> </div>
</div> </div>
{/* Geräte & Produktauswahl (Snapshot Aufteilung) */} {/* Geräte & Produktauswahl (Nach Kassen / Boxen gruppiert) */}
<div className="space-y-3"> <div className="space-y-3">
<div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5"> <div className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
<Package className="w-4 h-4 text-primary" /> <Package className="w-4 h-4 text-primary" />
Konfigurierte Kassen & Module ({(selectedOrder.order_data?.items || []).length}) Konfigurierte Kassen ({selectedOrder.order_data?.items?.length || 0})
</div> </div>
<div className="space-y-3"> <div className="grid grid-cols-1 gap-3">
{(selectedOrder.order_data?.items || []).map((item: any, idx: number) => ( {(selectedOrder.order_data?.items || []).map((item: any, idx: number) => {
<div key={idx} className="p-4 rounded-xl bg-slate-900/90 border border-white/10 space-y-3"> const devName = item.device_name || `Kasse #${idx + 1}`
<div className="flex items-center justify-between border-b border-white/5 pb-2"> const licNum = item.license_number
const modules = item.selected_modules || []
return (
<div key={idx} className="p-4 rounded-xl bg-slate-900/90 border border-white/10 space-y-3 relative overflow-hidden">
{/* Box Header für die Kasse */}
<div className="flex items-center justify-between border-b border-white/5 pb-2.5 flex-wrap gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="px-2 py-0.5 rounded text-[10px] font-bold bg-primary/20 text-primary border border-primary/30"> <span className="px-2.5 py-1 rounded text-xs font-extrabold bg-blue-500/20 text-blue-400 border border-blue-500/30 font-mono">
{item.device_name || `Kasse #${idx + 1}`} {devName}
</span> </span>
<span className="font-bold text-sm text-white">{item.product_name}</span> {licNum && (
<span className="text-xs font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20 flex items-center gap-1">
<span className="text-[10px] text-slate-400 uppercase font-sans">Lizenz:</span>
{licNum}
</span>
)}
</div> </div>
{item.price && ( <span className={`text-[10px] px-2 py-0.5 rounded border ${item.billing_interval === 'one_time' ? 'border-amber-500/30 text-amber-400 bg-amber-500/10' : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'} font-semibold uppercase`}>
<span className="text-xs font-bold text-slate-200"> {item.billing_interval === 'one_time' ? 'Kauf' : 'Abo'}
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.price)} </span>
</div>
{/* Inhalt der Kasse: Hauptprodukt + Preis */}
<div className="flex items-center justify-between">
<span className="font-bold text-sm text-white">{item.product_name}</span>
{(item.price || item.base_price) && (
<span className="text-xs font-bold text-slate-200 font-mono">
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(item.price || item.base_price)}
</span> </span>
)} )}
</div> </div>
{/* Ausgewählte Module & Lizenzen */} {/* Module dieser Kasse */}
{item.selected_modules?.length > 0 && ( {modules.length > 0 && (
<div className="space-y-1.5"> <div className="space-y-1.5 pt-2 border-t border-white/5">
<div className="text-[11px] font-semibold text-slate-400 flex items-center gap-1"> <div className="text-[11px] font-semibold text-slate-400 flex items-center gap-1">
<Layers className="w-3 h-3 text-slate-500" /> <Layers className="w-3 h-3 text-slate-500" />
Zusatzmodule ({item.selected_modules.length}): Enthaltene Module ({modules.length}):
</div> </div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
{item.selected_modules.map((mod: any, mIdx: number) => ( {modules.map((mod: any, mIdx: number) => (
<div key={mIdx} className="p-2 rounded-lg bg-slate-950/60 border border-white/5 text-xs flex items-center justify-between"> <div key={mIdx} className="p-2 rounded-lg bg-slate-950/60 border border-white/5 text-xs flex items-center justify-between">
<span className="text-slate-300 font-medium truncate"> <span className="text-slate-300 font-medium truncate">
{mod.module_name || mod.name} + {mod.module_name || mod.name} {mod.quantity > 1 ? `(${mod.quantity}x)` : ''}
</span> </span>
{mod.price && ( {mod.price && (
<span className="text-slate-400 font-mono text-[11px]"> <span className="text-slate-400 font-mono text-[11px]">
@@ -504,7 +523,8 @@ export function OrdersTable({ initialOrders }: OrdersTableProps) {
</div> </div>
)} )}
</div> </div>
))} )
})}
</div> </div>
</div> </div>