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

style(orders): harmonize device cards layout in my-orders

Browse Source
This commit is contained in:
DanielS
2026-09-07 23:31:05 +02:00
parent 5f29bb68a4
commit facf481fdb
1 changed files with 45 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
shop/app/my-orders/MyOrdersClient.tsx
View File

@@ -224,67 +224,80 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
</div> </div>
</div> </div>
{/* Kassen & Produkte Detail-Übersicht (Separate Container-Box je Kasse) */} {/* Kassen & Produkte Detail-Übersicht (Angelehnt an Kundenliste DeviceCard) */}
{items.length > 0 && ( {items.length > 0 && (
<div className="space-y-3 pt-2"> <div className="space-y-3 pt-2">
<p className="text-[11px] font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5"> <p className="text-[11px] font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
<Monitor className="w-3.5 h-3.5 text-primary" /> <Monitor className="w-3.5 h-3.5 text-primary" />
Kassenaufstellung ({items.length} {items.length === 1 ? 'Kasse' : 'Kassen'}): Kassenaufstellung ({items.length} {items.length === 1 ? 'Kasse' : 'Kassen'}):
</p> </p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="space-y-2.5">
{items.map((item, idx) => { {items.map((item, idx) => {
const devName = item.device_name || `K${idx + 1}` const devName = item.device_name || `Kasse ${idx + 1}`
const licNum = item.license_number const licNum = item.license_number
const modules = item.selected_modules || [] const modules = item.selected_modules || []
// Chips für Hauptprodukt und Module
const chips: string[] = []
if (item.product_name) chips.push(item.product_name)
for (const mod of modules) {
if (mod.module_name) chips.push(mod.module_name)
}
const itemPrice = (item as any).price || item.base_price || 0
const modulesPrice = modules.reduce((sum: number, m: any) => sum + ((m.price || 0) * (m.quantity || 1)), 0)
const deviceTotal = itemPrice + modulesPrice
return ( return (
<div <div
key={idx} key={idx}
className="bg-slate-950/70 border border-slate-800 rounded-xl p-3.5 space-y-2.5 relative overflow-hidden" className="p-4 rounded-xl bg-slate-950/70 border border-slate-800 hover:border-slate-700 transition-all flex flex-col md:flex-row md:items-start justify-between gap-4 relative overflow-hidden"
> >
{/* Kassen Container Header: Name + Lizenznummer daneben */} {/* Kassen-Info links */}
<div className="flex items-center justify-between gap-2 border-b border-white/5 pb-2"> <div className="space-y-2 min-w-[200px] flex-1">
<div className="flex items-center gap-2 flex-wrap"> {/* Kassen-Name + Lizenznummer daneben + Intervall */}
<div className="flex items-center gap-2 flex-wrap border-b border-white/5 pb-2">
<span className="px-2 py-0.5 rounded text-xs font-extrabold bg-blue-500/20 text-blue-400 border border-blue-500/30 font-mono"> <span className="px-2 py-0.5 rounded text-xs font-extrabold bg-blue-500/20 text-blue-400 border border-blue-500/30 font-mono">
{devName} {devName}
</span> </span>
{licNum && ( {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-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> <span className="text-[10px] text-slate-400 uppercase font-sans">Lizenz:</span>
{licNum} {licNum}
</span> </span>
)} )}
</div>
<span className={`text-[10px] px-1.5 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 shrink-0`}>
{item.billing_interval === 'one_time' ? 'Kauf' : 'Abo'}
</span>
</div>
{/* Inhalt: Hauptprodukt & Module nach Kategorien */} <span className={`text-[10px] px-1.5 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`}>
<div className="space-y-2 text-xs"> {item.billing_interval === 'one_time' ? 'Kauf' : 'Abo'}
<div className="flex items-center justify-between"> </span>
<span className="font-bold text-white text-sm">{item.product_name}</span>
{((item as any).price || item.base_price) && (
<span className="text-slate-300 font-mono">{fmt((item as any).price || item.base_price)}</span>
)}
</div> </div>
{modules.length > 0 && ( {/* Produkt + Modul Chips */}
<div className="pt-2 border-t border-white/5 space-y-1.5"> {chips.length > 0 && (
<span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider block"> <div className="flex flex-wrap gap-1.5 pt-1">
Enthaltene Zusatzmodule: {chips.map((chip, cIdx) => (
</span> <span
<div className="flex flex-wrap gap-1.5"> key={cIdx}
{modules.map((mod: any, mIdx: number) => ( className="text-xs bg-white/5 border border-white/10 rounded-md px-2 py-0.5 text-slate-300"
<span key={mIdx} className="text-[11px] bg-slate-900 text-slate-200 px-2 py-1 rounded-md border border-white/10 flex items-center gap-1"> >
<span className="text-primary font-bold">+</span> {mod.module_name || mod.name} {chip}
{mod.quantity > 1 ? <span className="text-slate-400 font-mono ml-0.5">({mod.quantity}x)</span> : ''} </span>
</span> ))}
))}
</div>
</div> </div>
)} )}
</div> </div>
{/* Preis rechts */}
{deviceTotal > 0 && (
<div className="text-left md:text-right shrink-0 border-t md:border-t-0 pt-2 md:pt-0 border-white/5">
<p className="text-[10px] text-slate-500 uppercase tracking-wider">Kassenwert</p>
<p className="font-bold text-white text-sm">
{fmt(deviceTotal)}
{item.billing_interval === 'monthly' && <span className="text-xs font-normal text-slate-400"> / mtl.</span>}
</p>
</div>
)}
</div> </div>
) )
})} })}