From abdf73bcb08a23c3a6b6d7e409c6bac84eddaf80 Mon Sep 17 00:00:00 2001
From: hosseintaromi <hosseintaromii@gmail.com>
Date: Wed, 1 Oct 2025 18:19:18 +0800
Subject: [PATCH] feat(orders): enhance OrderDetailPage UI and set default
 status in OrdersListPage

---
 .../orders/order-detail/OrderDetailPage.tsx   | 71 ++++++++-----------
 .../orders/orders-list/OrdersListPage.tsx     |  2 +-
 2 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/src/pages/orders/order-detail/OrderDetailPage.tsx b/src/pages/orders/order-detail/OrderDetailPage.tsx
index 39059d3..e595712 100644
--- a/src/pages/orders/order-detail/OrderDetailPage.tsx
+++ b/src/pages/orders/order-detail/OrderDetailPage.tsx
@@ -220,56 +220,43 @@ const OrderDetailPage = () => {
                         </div>
                         <div className="p-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="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>
+                                <div className="space-y-4">
                                     {order.items.map((item) => {
                                         const baseWeight = (item.weight ?? 0) as number;
                                         const weightGr = Math.round(baseWeight * 1000);
                                         const formatFa = (n: number) => new Intl.NumberFormat('fa-IR').format(n);
                                         return (
-                                            <div key={item.id} className="px-4 md:px-6 py-0 md:py-4">
-                                                <div className="grid grid-cols-12 items-center hidden md:grid">
-                                                    <div className="col-span-5">
-                                                        <div className="font-medium text-gray-900 dark:text-gray-100">
-                                                            {item.product_name || `محصول شناسه: ${item.product_id}`}
+                                            <div key={item.id} className="px-4 md:px-6 py-3">
+                                                <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="flex items-start justify-between gap-4">
+                                                        <div className="min-w-0 flex-1">
+                                                            <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 className="text-sm text-gray-500 dark:text-gray-400">
-                                                            {item.product_variant_name || `واریانت شناسه: ${item.product_variant_id}`}
+                                                        <div className="text-left shrink-0">
+                                                            <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 className="col-span-2 text-center text-sm text-gray-700 dark:text-gray-300">{formatFa(item.quantity || 0)}</div>
-                                                    <div className="col-span-2 text-center text-sm text-gray-700 dark:text-gray-300">{formatFa(weightGr)}</div>
-                                                    <div className="col-span-1 text-center text-sm text-gray-700 dark:text-gray-300">{formatCurrency(item.unit_price || 0)}</div>
-                                                    <div className="col-span-2 text-left font-semibold text-gray-900 dark:text-gray-100">{formatCurrency(item.total_price || 0)}</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="font-medium text-gray-900 dark:text-gray-100 leading-relaxed">
-                                                        {item.product_name || `محصول شناسه: ${item.product_id}`}
-                                                    </div>
-                                                    <div className="text-sm text-gray-500 dark:text-gray-400">
-                                                        {item.product_variant_name || `واریانت شناسه: ${item.product_variant_id}`}
-                                                    </div>
-                                                    <div className="flex justify-between text-sm text-gray-700 dark:text-gray-300">
-                                                        <span>تعداد</span>
-                                                        <span>{formatFa(item.quantity || 0)}</span>
-                                                    </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 className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
+                                                        <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="text-[11px] text-gray-500 dark:text-gray-400">تعداد</div>
+                                                            <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(item.quantity || 0)}</div>
+                                                        </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="text-[11px] text-gray-500 dark:text-gray-400">وزن (گرم)</div>
+                                                            <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(weightGr)}</div>
+                                                        </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 col-span-2 md:col-span-2">
+                                                            <div className="flex items-center justify-between">
+                                                                <div className="text-[11px] text-gray-500 dark:text-gray-400">قیمت واحد</div>
+                                                                <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatCurrency(item.unit_price || 0)}</div>
+                                                            </div>
+                                                        </div>
                                                     </div>
                                                 </div>
                                             </div>
diff --git a/src/pages/orders/orders-list/OrdersListPage.tsx b/src/pages/orders/orders-list/OrdersListPage.tsx
index 218d8cd..6450923 100644
--- a/src/pages/orders/orders-list/OrdersListPage.tsx
+++ b/src/pages/orders/orders-list/OrdersListPage.tsx
@@ -67,7 +67,7 @@ const OrdersListPage = () => {
         page: 1,
         limit: 20,
         order_number: '',
-        status: undefined,
+        status: 'pending',
         payment_status: undefined,
         search: '',
     });