Complete redesign: modern, fresh, subtle Scandinavian tech studio look & feel for webshop and admin
This commit is contained in:
@@ -6,65 +6,65 @@
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between pb-6 border-b border-slate-800">
|
||||
<div class="flex items-center justify-between pb-6 border-b border-slate-200/80">
|
||||
<div>
|
||||
<div class="inline-flex items-center space-x-2 text-xs text-amber-400 font-bold uppercase tracking-wider mb-1">
|
||||
<i data-lucide="shopping-cart" class="w-4 h-4"></i>
|
||||
<span>Verkopen & Facturatie</span>
|
||||
<div class="inline-flex items-center space-x-1.5 text-xs text-slate-500 font-medium mb-1">
|
||||
<i data-lucide="shopping-cart" class="w-3.5 h-3.5"></i>
|
||||
<span>Verkopen & Orders</span>
|
||||
</div>
|
||||
<h1 class="font-heading text-2xl sm:text-3xl font-black text-white">Bestellingen ({{ $orders->total() }})</h1>
|
||||
<p class="text-xs sm:text-sm text-slate-400 mt-1">Inzicht in binnengekomen bestellingen, status en klantgegevens.</p>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900">Bestellingen ({{ $orders->total() }})</h1>
|
||||
<p class="text-xs text-slate-500 mt-1">Overzicht van binnengekomen bestellingen, orderstatussen en verzending.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Orders Table -->
|
||||
<div class="rounded-3xl bg-slate-900 border border-slate-800 overflow-hidden shadow-xl">
|
||||
<div class="rounded-2xl bg-white border border-slate-200/80 overflow-hidden shadow-2xs">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left text-xs text-slate-300">
|
||||
<thead class="bg-slate-950/80 text-[11px] uppercase tracking-wider text-slate-400 font-bold border-b border-slate-800">
|
||||
<table class="w-full text-left text-xs text-slate-700">
|
||||
<thead class="bg-slate-50/80 text-[11px] uppercase tracking-wider text-slate-500 font-semibold border-b border-slate-200/70">
|
||||
<tr>
|
||||
<th class="py-3.5 px-4">Order #</th>
|
||||
<th class="py-3.5 px-4">Datum</th>
|
||||
<th class="py-3.5 px-4">Klant</th>
|
||||
<th class="py-3.5 px-4">Items</th>
|
||||
<th class="py-3.5 px-4">Totaal</th>
|
||||
<th class="py-3.5 px-4">Status</th>
|
||||
<th class="py-3.5 px-4 text-right">Details</th>
|
||||
<th class="py-3 px-4">Order #</th>
|
||||
<th class="py-3 px-4">Datum</th>
|
||||
<th class="py-3 px-4">Klant</th>
|
||||
<th class="py-3 px-4">Items</th>
|
||||
<th class="py-3 px-4">Totaal</th>
|
||||
<th class="py-3 px-4">Status</th>
|
||||
<th class="py-3 px-4 text-right">Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-800/80 font-medium">
|
||||
<tbody class="divide-y divide-slate-100 font-medium">
|
||||
@forelse($orders as $order)
|
||||
<tr class="hover:bg-slate-800/50 transition">
|
||||
<td class="py-3.5 px-4 font-mono font-bold text-white">
|
||||
<tr class="hover:bg-slate-50/60 transition">
|
||||
<td class="py-3.5 px-4 font-mono font-bold text-slate-900">
|
||||
{{ $order->order_number }}
|
||||
</td>
|
||||
<td class="py-3.5 px-4 text-slate-400">
|
||||
<td class="py-3.5 px-4 text-slate-500">
|
||||
{{ $order->created_at->format('d-m-Y H:i') }}
|
||||
</td>
|
||||
<td class="py-3.5 px-4">
|
||||
<div class="font-bold text-white">{{ $order->customer_name }}</div>
|
||||
<div class="text-[11px] text-slate-400">{{ $order->customer_email }}</div>
|
||||
<div class="font-semibold text-slate-900">{{ $order->customer_name }}</div>
|
||||
<div class="text-[11px] text-slate-400 font-normal">{{ $order->customer_email }}</div>
|
||||
</td>
|
||||
<td class="py-3.5 px-4">
|
||||
<span class="px-2 py-0.5 rounded-md bg-slate-800 text-slate-300 text-[11px] font-bold">
|
||||
<span class="px-2 py-0.5 rounded-md bg-slate-100 text-slate-700 text-[11px] font-medium">
|
||||
{{ $order->items->count() }} items
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-3.5 px-4">
|
||||
<span class="font-heading font-black text-amber-400 text-sm">{{ $order->formatted_total }}</span>
|
||||
<span class="font-bold text-slate-900">{{ $order->formatted_total }}</span>
|
||||
</td>
|
||||
<td class="py-3.5 px-4">
|
||||
<span class="px-2.5 py-1 rounded-full text-[10px] font-black uppercase
|
||||
@if($order->status === 'completed' || $order->status === 'shipped') bg-emerald-500/20 text-emerald-400
|
||||
@elseif($order->status === 'printed' || $order->status === 'processing') bg-sky-500/20 text-sky-400
|
||||
@elseif($order->status === 'cancelled') bg-rose-500/20 text-rose-400
|
||||
@else bg-amber-500/20 text-amber-400 @endif
|
||||
">
|
||||
{{ $order->status }}
|
||||
<span class="px-2 py-0.5 rounded-full text-[10px] font-semibold
|
||||
@if($order->status === 'completed' || $order->status === 'shipped') bg-emerald-50 text-emerald-700 border border-emerald-200/60
|
||||
@elseif($order->status === 'printed' || $order->status === 'processing') bg-sky-50 text-sky-700 border border-sky-200/60
|
||||
@elseif($order->status === 'cancelled') bg-rose-50 text-rose-700 border border-rose-200/60
|
||||
@else bg-amber-50 text-amber-700 border border-amber-200/60
|
||||
@endif">
|
||||
{{ $order->status_label }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-3.5 px-4 text-right">
|
||||
<a href="{{ route('admin.orders.show', $order) }}" class="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-bold transition inline-flex items-center space-x-1">
|
||||
<a href="{{ route('admin.orders.show', $order) }}" class="inline-flex items-center space-x-1 px-2.5 py-1 rounded-lg bg-slate-100 hover:bg-slate-900 text-slate-700 hover:text-white text-xs font-medium transition">
|
||||
<span>Bekijken</span>
|
||||
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
||||
</a>
|
||||
@@ -72,8 +72,8 @@
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="p-10 text-center text-slate-500">
|
||||
Nog geen bestellingen binnengekomen.
|
||||
<td colspan="7" class="py-12 text-center text-slate-400">
|
||||
Nog geen bestellingen geplaatst.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
@@ -82,7 +82,7 @@
|
||||
</div>
|
||||
|
||||
@if($orders->hasPages())
|
||||
<div class="p-4 border-t border-slate-800 bg-slate-950/60">
|
||||
<div class="p-4 border-t border-slate-100">
|
||||
{{ $orders->links() }}
|
||||
</div>
|
||||
@endif
|
||||
@@ -90,4 +90,3 @@
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
Reference in New Issue
Block a user