hosseintaromi
/
admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(orders): enhance OrderDetailPage UI and set default status in OrdersListPage

This commit is contained in:
hosseintaromi 2025-10-01 18:19:18 +08:00
parent fbffc716ba
commit abdf73bcb0
2 changed files with 30 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/pages/orders/order-detail/OrderDetailPage.tsx
View File

@ -220,56 +220,43 @@ const OrderDetailPage = () => {
</div> </div>
<div className="p-0"> <div className="p-0">
{order?.items && order.items.length > 0 ? ( {order?.items && order.items.length > 0 ? (
<div className="md:divide-y divide-gray-200 dark:divide-gray-700 space-y-4 md:space-y-0"> <div className="space-y-4">
<div className="hidden md:grid grid-cols-12 px-6 py-3 text-xs text-gray-500 dark:text-gray-400">
<div className="col-span-5">محصول</div>
<div className="col-span-2 text-center">تعداد</div>
<div className="col-span-2 text-center">وزن (گرم)</div>
<div className="col-span-1 text-center">قیمت واحد</div>
<div className="col-span-2 text-left">جمع</div>
</div>
{order.items.map((item) => { {order.items.map((item) => {
const baseWeight = (item.weight ?? 0) as number; const baseWeight = (item.weight ?? 0) as number;
const weightGr = Math.round(baseWeight * 1000); const weightGr = Math.round(baseWeight * 1000);
const formatFa = (n: number) => new Intl.NumberFormat('fa-IR').format(n); const formatFa = (n: number) => new Intl.NumberFormat('fa-IR').format(n);
return ( return (
<div key={item.id} className="px-4 md:px-6 py-0 md:py-4"> <div key={item.id} className="px-4 md:px-6 py-3">
<div className="grid grid-cols-12 items-center hidden md:grid"> <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 md:p-5 shadow-sm">
<div className="col-span-5"> <div className="flex items-start justify-between gap-4">
<div className="font-medium text-gray-900 dark:text-gray-100"> <div className="min-w-0 flex-1">
{item.product_name || `محصول شناسه: ${item.product_id}`} <div className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
{item.product_name || `محصول شناسه: ${item.product_id}`}
</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">
{item.product_variant_name || `واریانت شناسه: ${item.product_variant_id}`}
</div>
</div> </div>
<div className="text-sm text-gray-500 dark:text-gray-400"> <div className="text-left shrink-0">
{item.product_variant_name || `واریانت شناسه: ${item.product_variant_id}`} <div className="text-xs text-gray-500 dark:text-gray-400">جمع</div>
<div className="text-base md:text-lg font-bold text-gray-900 dark:text-gray-100">{formatCurrency(item.total_price || 0)}</div>
</div> </div>
</div> </div>
<div className="col-span-2 text-center text-sm text-gray-700 dark:text-gray-300">{formatFa(item.quantity || 0)}</div> <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
<div className="col-span-2 text-center text-sm text-gray-700 dark:text-gray-300">{formatFa(weightGr)}</div> <div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 px-3 py-2 border border-gray-200 dark:border-gray-600">
<div className="col-span-1 text-center text-sm text-gray-700 dark:text-gray-300">{formatCurrency(item.unit_price || 0)}</div> <div className="text-[11px] text-gray-500 dark:text-gray-400">تعداد</div>
<div className="col-span-2 text-left font-semibold text-gray-900 dark:text-gray-100">{formatCurrency(item.total_price || 0)}</div> <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(item.quantity || 0)}</div>
</div> </div>
<div className="md:hidden space-y-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 border border-gray-200 dark:border-gray-600"> <div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 px-3 py-2 border border-gray-200 dark:border-gray-600">
<div className="font-medium text-gray-900 dark:text-gray-100 leading-relaxed"> <div className="text-[11px] text-gray-500 dark:text-gray-400">وزن (گرم)</div>
{item.product_name || `محصول شناسه: ${item.product_id}`} <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(weightGr)}</div>
</div> </div>
<div className="text-sm text-gray-500 dark:text-gray-400"> <div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 px-3 py-2 border border-gray-200 dark:border-gray-600 col-span-2 md:col-span-2">
{item.product_variant_name || `واریانت شناسه: ${item.product_variant_id}`} <div className="flex items-center justify-between">
</div> <div className="text-[11px] text-gray-500 dark:text-gray-400">قیمت واحد</div>
<div className="flex justify-between text-sm text-gray-700 dark:text-gray-300"> <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatCurrency(item.unit_price || 0)}</div>
<span>تعداد</span> </div>
<span>{formatFa(item.quantity || 0)}</span> </div>
</div>
<div className="flex justify-between text-sm text-gray-700 dark:text-gray-300">
<span>وزن (گرم)</span>
<span>{formatFa(weightGr)}</span>
</div>
<div className="flex justify-between text-sm text-gray-700 dark:text-gray-300">
<span>قیمت واحد</span>
<span>{formatCurrency(item.unit_price || 0)}</span>
</div>
<div className="flex justify-between text-sm font-semibold text-gray-900 dark:text-gray-100">
<span>جمع</span>
<span>{formatCurrency(item.total_price || 0)}</span>
</div> </div>
</div> </div>
</div> </div>

2
src/pages/orders/orders-list/OrdersListPage.tsx
View File

@ -67,7 +67,7 @@ const OrdersListPage = () => {
page: 1, page: 1,
limit: 20, limit: 20,
order_number: '', order_number: '',
status: undefined, status: 'pending',
payment_status: undefined, payment_status: undefined,
search: '', search: '',
}); });