order detail design done
This commit is contained in:
suryac
parent
29fd066314
commit
09e99fcc5a
@ -4,7 +4,7 @@ import { ORDER_BOOKING } from '../../api/config';
|
||||
import { Card } from '../reusable/Card';
|
||||
import { Spinner } from '../reusable/Spinner';
|
||||
import { EmptyState } from '../reusable/EmptyState';
|
||||
import { Store, User, Package, Calendar, Hash, Mail, Weight, List, MapPin } from 'lucide-react';
|
||||
import { Store, User, Package, Calendar, Hash, Weight, MapPin, ShoppingBag } from 'lucide-react';
|
||||
|
||||
export interface WiredDetailViewProps {
|
||||
instanceId: number | string;
|
||||
@ -116,163 +116,169 @@ export function OrderDetail({ instanceId }: WiredDetailViewProps) {
|
||||
const totalKgs = extract('total_kgs_3', remainingData) || 0;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 bg-[var(--tiles-card-bg)] p-1">
|
||||
{/* Top Section */}
|
||||
<div className="border border-slate-200 rounded-xl p-6 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col md:flex-row md:items-start justify-between gap-4">
|
||||
<div className="flex flex-col gap-6 bg-transparent">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">Order ID</div>
|
||||
<div className="text-2xl font-black text-slate-900 mb-2">{String(orderId)}</div>
|
||||
<div className="flex items-center gap-3 text-xs text-slate-500 font-medium">
|
||||
<span className="flex items-center gap-1.5"><Calendar size={14} /> {String(dateOfOrder)}</span>
|
||||
<span className="flex items-center gap-1.5"><Hash size={14} /> Instance #{instanceId}</span>
|
||||
<h1 className="text-xl font-semibold tracking-tight text-slate-900">Order Detail</h1>
|
||||
<p className="text-sm text-slate-500">#{orderId}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status + Date ribbon */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-4 shadow-sm">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full bg-emerald-100 px-3 py-1 text-sm font-semibold text-emerald-800">
|
||||
<span className="h-2 w-2 rounded-full bg-emerald-600" />
|
||||
{String(stateName)}
|
||||
</span>
|
||||
<span className="text-sm text-slate-500 hidden sm:inline">Order ID</span>
|
||||
<span className="font-mono text-sm font-semibold text-slate-800 hidden sm:inline">{String(orderId)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-slate-500">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>{String(dateOfOrder)}</span>
|
||||
<span className="ml-2 pl-2 border-l border-slate-200 flex items-center gap-1.5 text-xs">
|
||||
<Hash className="h-3 w-3" />
|
||||
Instance #{instanceId}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-3">
|
||||
{/* Main content */}
|
||||
<div className="space-y-6 lg:col-span-2">
|
||||
{/* Store summary */}
|
||||
<div className="rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-5 shadow-sm">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<div className="grid h-8 w-8 place-items-center rounded-full bg-emerald-100 text-emerald-600">
|
||||
<Store className="h-4 w-4" />
|
||||
</div>
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-emerald-800">Store</h2>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<p className="text-xs text-slate-500">Business</p>
|
||||
<p className="font-medium text-slate-900">{String(storeName)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500">Distributor</p>
|
||||
<p className="font-medium text-slate-900">{String(distributorName)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500">Route</p>
|
||||
<p className="font-medium text-slate-900">
|
||||
{String(routeName)} ({String(routeCode)})
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-slate-500">Store Code</p>
|
||||
<p className="font-mono font-medium text-slate-800">{(storeRaw as any)?.store_code_2 || (storeRaw as any)?.store_code || '-'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order items */}
|
||||
<div className="rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-5 shadow-sm">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<div className="grid h-8 w-8 place-items-center rounded-full bg-emerald-100 text-emerald-600">
|
||||
<ShoppingBag className="h-4 w-4" />
|
||||
</div>
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-emerald-800">Order Items</h2>
|
||||
<span className="ml-auto text-xs text-slate-500 font-semibold bg-slate-100 px-2 py-1 rounded-md">{itemsArray.length} items</span>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-100">
|
||||
{itemsArray.map((item: any, index: number) => {
|
||||
const product = item.product_name_3 || item.product_name || '-';
|
||||
const category = item.product_category_3 || item.product_category || '-';
|
||||
const sku = item.sku_code_3 || item.sku_code || item.sku || '-';
|
||||
const bags = item.bags_3 || item.bags || item.quantity || 0;
|
||||
const weight = item.sku_3 || item.sku || '';
|
||||
|
||||
return (
|
||||
<div key={index} className="group flex flex-col sm:flex-row sm:items-center justify-between py-4 first:pt-2 last:pb-2 gap-3">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="grid h-10 w-10 place-items-center rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-100 shrink-0 mt-1 sm:mt-0">
|
||||
<Package className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-slate-900">{String(product)}</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-[10px] text-slate-500">
|
||||
<span className="rounded text-slate-600 font-medium">
|
||||
{String(category)}
|
||||
</span>
|
||||
<span className="w-1 h-1 rounded-full bg-slate-300"></span>
|
||||
<span className="font-mono text-slate-500">{String(sku)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-left sm:text-right pl-14 sm:pl-0">
|
||||
<p className="font-bold text-slate-900 text-sm">{String(bags)} bag{Number(bags) === 1 ? "" : "s"}</p>
|
||||
{weight && <p className="text-xs text-slate-500 mt-0.5">SKU {String(weight)}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
{itemsArray.length === 0 && (
|
||||
<div className="py-6 text-center text-sm text-slate-500 italic">No items found in this order.</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border border-emerald-200 bg-[#E8FBF0] rounded-xl p-4 flex flex-col gap-1 min-w-[200px]">
|
||||
<div className="flex items-center gap-1.5 text-[10px] font-bold text-emerald-600 uppercase tracking-wider mb-1">
|
||||
<Store size={12} className="text-emerald-500" /> Store
|
||||
</div>
|
||||
<div className="text-sm font-bold text-slate-900">{String(storeName)}</div>
|
||||
<div className="flex items-center gap-2 text-[10px] text-slate-500 mt-1">
|
||||
<span className="flex items-center gap-1"><MapPin size={12} /> {String(routeCode)} - {String(routeName)}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-[10px] text-slate-500 mt-0.5">
|
||||
<span className="flex items-center gap-1"><User size={12} /> {String(distributorName)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Middle Stats Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="border border-slate-200 rounded-xl p-5 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col justify-between">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">
|
||||
<Package size={14} className="text-emerald-500" /> Total Bags
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-slate-900">{String(totalBags)}</div>
|
||||
</div>
|
||||
<div className="border border-slate-200 rounded-xl p-5 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col justify-between">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">
|
||||
<Weight size={14} className="text-blue-500" /> Total Kilograms
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-slate-900">{Number(totalKgs).toLocaleString()}</div>
|
||||
</div>
|
||||
<div className="border border-slate-200 rounded-xl p-5 bg-[var(--tiles-card-bg)] shadow-sm flex flex-col justify-between">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">
|
||||
<List size={14} className="text-slate-500" /> Order Items
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-slate-900">{itemsArray.length}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Section */}
|
||||
<div className="flex flex-col lg:flex-row gap-4">
|
||||
{/* Left Table */}
|
||||
<div className="flex-[2] border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden flex flex-col min-w-0">
|
||||
<div className="p-4 border-b border-emerald-200 flex items-center gap-2 bg-[#E8FBF0]">
|
||||
<Package size={14} className="text-emerald-500" />
|
||||
<span className="text-xs font-bold text-emerald-600 uppercase tracking-wider">Order Items</span>
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Totals */}
|
||||
<div className="rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-5 shadow-sm">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<div className="grid h-8 w-8 place-items-center rounded-full bg-blue-100 text-blue-600">
|
||||
<Weight className="h-4 w-4" />
|
||||
</div>
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-blue-800">Totals</h2>
|
||||
</div>
|
||||
<div className="overflow-x-auto flex-1">
|
||||
<table className="w-full text-sm text-left">
|
||||
<thead className="bg-[#E8FBF0]/50 text-[10px] font-bold text-slate-400 uppercase tracking-wider">
|
||||
<tr>
|
||||
<th className="px-5 py-3 border-b border-emerald-200">Product</th>
|
||||
<th className="px-5 py-3 border-b border-emerald-200">Category</th>
|
||||
<th className="px-5 py-3 border-b border-emerald-200">SKU</th>
|
||||
<th className="px-5 py-3 border-b border-emerald-200 text-right">Bags</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{itemsArray.map((item: any, idx: number) => {
|
||||
const product = item.product_name_3 || '-';
|
||||
const category = item.product_category_3 || '-';
|
||||
const sku = item.sku_code_3 || '-';
|
||||
const bags = item.bags_3 || '0';
|
||||
const brCode = item.br_code_3 || '-';
|
||||
const weight = item.sku_3 ? `${item.sku_3} kg` : '-';
|
||||
|
||||
return (
|
||||
<tr key={idx} className="hover:bg-[#E8FBF0]/50 transition-colors">
|
||||
<td className="px-5 py-3">
|
||||
<div className="font-bold text-slate-900 text-xs mb-0.5 whitespace-nowrap">{String(product)}</div>
|
||||
<div className="text-[10px] text-slate-500">BR Code {String(brCode)}</div>
|
||||
</td>
|
||||
<td className="px-5 py-3 text-xs text-slate-600 whitespace-nowrap">{String(category)}</td>
|
||||
<td className="px-5 py-3">
|
||||
<div className="text-xs text-slate-600 mb-0.5 whitespace-nowrap">{String(sku)}</div>
|
||||
<div className="text-[10px] text-slate-500 whitespace-nowrap">{String(weight)}</div>
|
||||
</td>
|
||||
<td className="px-5 py-3 text-right font-semibold text-slate-900 text-xs whitespace-nowrap">{String(bags)}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
<tr className="bg-[#E8FBF0] font-bold">
|
||||
<td colSpan={3} className="px-5 py-3 text-slate-900 text-xs">Total</td>
|
||||
<td className="px-5 py-3 text-right text-slate-900 text-xs">{String(totalBags)}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between rounded-xl bg-slate-50 border border-slate-100 p-3.5">
|
||||
<span className="text-sm font-medium text-slate-600">Total Bags</span>
|
||||
<span className="font-mono text-lg font-bold text-slate-800">{String(totalBags)}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between rounded-xl bg-slate-50 border border-slate-100 p-3.5">
|
||||
<span className="text-sm font-medium text-slate-600">Total Weight</span>
|
||||
<span className="font-mono text-lg font-bold text-slate-800">{Number(totalKgs).toLocaleString()} kg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Sidebar */}
|
||||
<div className="flex-1 flex flex-col gap-4 min-w-[280px]">
|
||||
{/* SO Card */}
|
||||
<div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-5">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
|
||||
<User size={14} className="text-slate-500" /> Sales Officer
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mb-5">
|
||||
<div className="w-10 h-10 rounded-full bg-slate-900 text-white flex items-center justify-center font-bold text-sm shrink-0">
|
||||
{soInitials}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-slate-900">{String(soName)}</div>
|
||||
<div className="text-[10px] text-slate-500">Sales Officer - ID {String(soId)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-[#E8FBF0] border border-emerald-200 flex items-center justify-center shrink-0">
|
||||
<Mail size={12} className="text-emerald-500" />
|
||||
</div>
|
||||
<div className="overflow-hidden">
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">Email</div>
|
||||
<div className="text-xs font-semibold text-slate-900 truncate">{String(soEmail)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-[#E8FBF0] border border-emerald-200 flex items-center justify-center shrink-0">
|
||||
<Hash size={12} className="text-emerald-500" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">User ID</div>
|
||||
<div className="text-xs font-semibold text-slate-900">{String(soId)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Sales officer */}
|
||||
<div className="rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-5 shadow-sm">
|
||||
<div className="mb-4 flex items-center gap-2">
|
||||
<div className="grid h-8 w-8 place-items-center rounded-full bg-purple-100 text-purple-600">
|
||||
<User className="h-4 w-4" />
|
||||
</div>
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-purple-800">Sales Officer</h2>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="grid h-11 w-11 place-items-center rounded-full bg-slate-800 text-white text-sm font-bold shrink-0">
|
||||
{soInitials}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="font-medium text-slate-900 truncate">{String(soName)}</p>
|
||||
<p className="text-xs text-slate-500 truncate">{String(soEmail)}</p>
|
||||
<p className="text-[10px] text-slate-400 mt-0.5">ID: {String(soId)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Meta */}
|
||||
<div className="border border-slate-200 rounded-xl bg-[var(--tiles-card-bg)] shadow-sm overflow-hidden p-5">
|
||||
<div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4">
|
||||
<Hash size={14} className="text-slate-500" /> Order Meta
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-500">Instance</span>
|
||||
<span className="font-bold text-slate-900">#{instanceId}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-500">State</span>
|
||||
<span className="font-bold text-slate-900">{String(stateName)}</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center text-xs">
|
||||
<span className="text-slate-500">Date of Order</span>
|
||||
<span className="font-bold text-slate-900">{String(dateOfOrder)}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Location hint */}
|
||||
<div className="rounded-2xl border border-slate-200 bg-[var(--tiles-card-bg)] p-5 shadow-sm">
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<div className="grid h-8 w-8 place-items-center rounded-full bg-amber-100 text-amber-600">
|
||||
<MapPin className="h-4 w-4" />
|
||||
</div>
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-amber-800">Location</h2>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 leading-relaxed">Order placed in route <span className="font-semibold text-slate-800">{String(routeName)}</span>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user