feat(orders): format device container cards with register name and license number
This commit is contained in:
DanielS
@@ -224,43 +224,70 @@ export function MyOrdersClient({ orders, error }: MyOrdersClientProps) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Kassen & Produkte Detail-Übersicht */}
|
{/* Kassen & Produkte Detail-Übersicht (Separate Container-Box je Kasse) */}
|
||||||
{items.length > 0 && (
|
{items.length > 0 && (
|
||||||
<div className="space-y-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" />
|
||||||
Enthaltene Kassen ({items.length}):
|
Kassenaufstellung ({items.length} {items.length === 1 ? 'Kasse' : 'Kassen'}):
|
||||||
</p>
|
</p>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2.5">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
{items.map((item, idx) => (
|
{items.map((item, idx) => {
|
||||||
|
const devName = item.device_name || `K${idx + 1}`
|
||||||
|
const licNum = item.license_number
|
||||||
|
const modules = item.selected_modules || []
|
||||||
|
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
key={idx}
|
key={idx}
|
||||||
className="bg-slate-900/60 border border-white/10 rounded-xl p-3 space-y-1.5 text-xs"
|
className="bg-slate-950/70 border border-slate-800 rounded-xl p-3.5 space-y-2.5 relative overflow-hidden"
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between gap-2">
|
{/* Kassen Container Header: Name + Lizenznummer daneben */}
|
||||||
<span className="font-bold text-white flex items-center gap-1.5">
|
<div className="flex items-center justify-between gap-2 border-b border-white/5 pb-2">
|
||||||
<Monitor className="w-3.5 h-3.5 text-sky-400 shrink-0" />
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
{item.device_name || `Kasse ${idx + 1}`}
|
<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}
|
||||||
</span>
|
</span>
|
||||||
<span className={`text-[9px] px-1.5 py-0.2 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`}>
|
{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>
|
||||||
|
<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'}
|
{item.billing_interval === 'one_time' ? 'Kauf' : 'Abo'}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-slate-300 font-medium">{item.product_name}</p>
|
|
||||||
{item.license_number && (
|
{/* Inhalt: Hauptprodukt & Module nach Kategorien */}
|
||||||
<p className="text-[10px] text-slate-400 font-mono">Lizenz: {item.license_number}</p>
|
<div className="space-y-2 text-xs">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<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>
|
||||||
)}
|
)}
|
||||||
{item.selected_modules && item.selected_modules.length > 0 && (
|
</div>
|
||||||
<div className="pt-1 border-t border-white/5 flex flex-wrap gap-1">
|
|
||||||
{item.selected_modules.map((mod: any, mIdx: number) => (
|
{modules.length > 0 && (
|
||||||
<span key={mIdx} className="text-[10px] bg-white/5 text-slate-400 px-1.5 py-0.5 rounded border border-white/5">
|
<div className="pt-2 border-t border-white/5 space-y-1.5">
|
||||||
+ {mod.module_name || mod.name} {mod.quantity > 1 ? `(${mod.quantity}x)` : ''}
|
<span className="text-[10px] uppercase font-bold text-slate-400 tracking-wider block">
|
||||||
|
Enthaltene Zusatzmodule:
|
||||||
|
</span>
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{modules.map((mod: any, mIdx: number) => (
|
||||||
|
<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}
|
||||||
|
{mod.quantity > 1 ? <span className="text-slate-400 font-mono ml-0.5">({mod.quantity}x)</span> : ''}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -68,13 +68,22 @@ function DeviceCard({
|
|||||||
`&device_id=${encodeURIComponent(device.deviceId)}`
|
`&device_id=${encodeURIComponent(device.deviceId)}`
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="p-4 rounded-xl bg-slate-900/60 border border-white/10 hover:border-white/20 transition-all flex flex-col md:flex-row md:items-start justify-between gap-4">
|
<div 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-Info links */}
|
{/* Kassen-Info links */}
|
||||||
<div className="space-y-2 min-w-[200px] flex-1">
|
<div className="space-y-2.5 min-w-[200px] flex-1">
|
||||||
{/* Kassen-Name + Status */}
|
{/* Kassen-Name + Lizenznummer daneben + Status */}
|
||||||
<div className="flex items-center gap-2 flex-wrap">
|
<div className="flex items-center gap-2 flex-wrap border-b border-white/5 pb-2">
|
||||||
<Monitor className="w-4 h-4 text-primary shrink-0" />
|
<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="font-bold text-white text-base">{device.deviceName}</span>
|
{device.deviceName}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{device.items[0]?.license_number && (
|
||||||
|
<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>
|
||||||
|
{device.items[0].license_number}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
<Badge
|
<Badge
|
||||||
className={`text-xs ${statusClass[device.orderStatus] ?? 'bg-slate-500/20 text-slate-300'}`}
|
className={`text-xs ${statusClass[device.orderStatus] ?? 'bg-slate-500/20 text-slate-300'}`}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user