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

Fix recent orders component UI and styling
All checks were successful
Staging Build / build (push) Successful in 3m40s
Details

Browse Source
This commit is contained in:
DanielS
2026-06-30 22:00:38 +02:00
parent c4fe221350
commit 541a9651ec
5 changed files with 35 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
shop/components/admin/recent-orders.tsx
View File

@@ -74,43 +74,41 @@ export function AdminRecentOrders() {
return () => clearInterval(interval)
}, [])
return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
<Card className="col-span-4 glass-dark border-white/5">
<CardHeader>
<CardTitle>Übersicht (letzte 6 Monate)</CardTitle>
</CardHeader>
<CardContent className="pl-2">
<RevenueChart data={chartData} />
</CardContent>
</Card>
return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7 bg-[#020617]/85 p-4 rounded-xl">
<div className="rounded-xl border border-white/5 bg-[#020617]/85 overflow-hidden backdrop-blur-xl col-span-4">
<CardHeader>
<CardTitle className="text-white">Übersicht (letzte 6 Monate)</CardTitle>
</CardHeader>
<CardContent className="pl-2">
<RevenueChart data={chartData} />
</CardContent>
</div>
<Card className="col-span-3 glass-dark border-white/5">
<CardHeader className="flex flex-row items-center justify-between pb-3">
<CardTitle>Neue Bestellungen</CardTitle>
<span className="text-[10px] text-slate-500">
Aktualisiert: {lastChecked.toLocaleTimeString('de-DE')}
</span>
</CardHeader>
<CardContent>
{orders.length === 0 ? (
<p className="text-slate-500 text-sm italic text-center py-8">Noch keine Bestellungen</p>
) : (
<div className="space-y-3">
{orders.map(order => {
<div className="flex flex-col gap-4 bg-[#020617]/85 p-4 rounded-xl border border-white/5 col-span-3">
<div className="flex flex-row items-center justify-between pb-3">
<h3 className="font-semibold text-lg text-white">Neue Bestellungen</h3>
<span className="text-[10px] text-slate-500">
Aktualisiert: {lastChecked.toLocaleTimeString('de-DE')}
</span>
</div>
<div className="space-y-3">
{orders.length === 0 ? (
<p className="text-slate-500 text-sm italic text-center py-8">Noch keine Bestellungen</p>
) : (
orders.map(order => {
const isNew = newOrderIds.has(order.id)
const customerName =
order.customer_data?.company_name ||
`${order.customer_data?.first_name ?? ''} ${order.customer_data?.last_name ?? ''}`.trim() ||
'Unbekannt'
return (
<Link key={order.id} href="/admin/orders" className="block">
<div
className={`flex items-center gap-3 p-3 rounded-lg transition-all duration-500 ${
isNew
? 'bg-primary/10 border border-primary/30 shadow-[0_0_12px_rgba(59,130,246,0.2)]'
: 'bg-white/5 hover:bg-white/10 border border-white/5'
: 'bg-[#020617]/20 hover:bg-[#020617]/30 border border-white/5'
}`}
>
<div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary text-xs font-bold shrink-0">
@@ -124,18 +122,15 @@ export function AdminRecentOrders() {
<p className="font-medium text-white text-sm">
{new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(order.total_price)}
</p>
<Badge className={`text-[10px] ${statusClass[order.status] ?? ''}`}>
{statusLabel[order.status] ?? order.status}
</Badge>
<Badge className={`text-[10px] ${statusClass[order.status] ?? ''}`}>{statusLabel[order.status] ?? order.status}</Badge>
</div>
</div>
</Link>
)
})}
</div>
)}
</CardContent>
</Card>
</div>
)
})
)}
</div>
</div>
</div>
)
}