From 257871d5f1bf60083c3eaf86890456784c5c8a90 Mon Sep 17 00:00:00 2001 From: Arda Samadi Date: Wed, 17 Jun 2026 13:00:18 +0330 Subject: [PATCH] feat(seller-dashboard): desktop-friendly layouts for list and hub pages Redesign mobile-style seller dashboard pages for desktop (lg:) while leaving the mobile view unchanged: - products: table-style header row (product/price/variant/actions) with a bordered card wrapper and an "add product" button; accordion rows align to the columns, inline price hidden on desktop. - orders: pill-style status tabs + search on one row, orders shown as a two-column card grid instead of stretched full-width rows. - financial-dashboard: three-column card grid with icon chips. - setting: status/theme as side-by-side cards, menu items as a three-column card grid (logout styled in red). Co-Authored-By: Claude Opus 4.8 --- ...re.$storeId.financial-dashboard._index.tsx | 55 ++++--- app/routes/store.$storeId.orders._index.tsx | 76 +++++----- app/routes/store.$storeId.products.tsx | 62 ++++++-- app/routes/store.$storeId.setting.tsx | 135 ++++++++++-------- 4 files changed, 202 insertions(+), 126 deletions(-) diff --git a/app/routes/store.$storeId.financial-dashboard._index.tsx b/app/routes/store.$storeId.financial-dashboard._index.tsx index 6c08caa..ca26018 100644 --- a/app/routes/store.$storeId.financial-dashboard._index.tsx +++ b/app/routes/store.$storeId.financial-dashboard._index.tsx @@ -70,32 +70,41 @@ export default function FinancialDashboard() { ]; return (
- - {menuItems.map((item, index) => ( -
{ - cashFunds(item.link); - }} - role="button" - key={index} - tabIndex={0} - onKeyDown={(e) => { - if (e.key === "Enter") { +
+ +
+

+ داشبورد مالی +

+
+ {menuItems.map((item, index) => ( +
{ cashFunds(item.link); - } - }} - className="border-b flex items-center w-full p-4 bg-WHITE hover:bg-WHITE3 cursor-pointer" - > -
-
- {item.icon} -

{item.title}

+ }} + role="button" + key={index} + tabIndex={0} + onKeyDown={(e) => { + if (e.key === "Enter") { + cashFunds(item.link); + } + }} + className="border-b flex items-center w-full p-4 bg-WHITE hover:bg-WHITE3 cursor-pointer lg:border lg:border-WHITE3 lg:rounded-2xl lg:p-6 lg:items-start lg:hover:shadow-md lg:transition-shadow" + > +
+
+ + {item.icon} + +

{item.title}

+
+

{item.description}

-

{item.description}

+
- -
- ))} + ))} +
); } diff --git a/app/routes/store.$storeId.orders._index.tsx b/app/routes/store.$storeId.orders._index.tsx index 777f358..d49f882 100644 --- a/app/routes/store.$storeId.orders._index.tsx +++ b/app/routes/store.$storeId.orders._index.tsx @@ -129,7 +129,7 @@ function OrderItem({ navigate(`/store/${storeId}/orders/${order.id}`); } }} - className={`border-t ${isLastOrder && "border-b"} p-2 bg-WHITE hover:bg-WHITE3 cursor-pointer transition-colors duration-300`} + className={`border-t ${isLastOrder && "border-b"} p-2 bg-WHITE hover:bg-WHITE3 cursor-pointer transition-colors duration-300 lg:border lg:border-WHITE3 lg:rounded-2xl lg:p-5 lg:hover:shadow-md lg:hover:bg-WHITE`} >
{/* Header */} @@ -235,50 +235,58 @@ export default function Orders() { }; return ( -
+
{/* Header */} - +
+ +
+

+ سفارش‌های دریافتی +

- {/* Tabs */} -
-
- {orderTabs.map((tab) => ( - - ))} + {/* Tabs + Search row (desktop puts them side by side) */} +
+ {/* Tabs */} +
+
+ {orderTabs.map((tab) => ( + + ))} +
-
- {/* Search Bar */} -
-
- setSearchQuery(e.target.value)} - className="w-full h-10 px-3 py-2 pr-10 bg-WHITE2 border border-WHITE2 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent" - /> -
- + {/* Search Bar */} +
+
+ setSearchQuery(e.target.value)} + className="w-full h-10 px-3 py-2 pr-10 bg-WHITE2 border border-WHITE2 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-200 focus:border-transparent" + /> +
+ +
{/* Orders List */} {filteredOrders.length > 0 ? ( -
+
{filteredOrders.map((order, index) => ( -
+
{product.primaryImage && ( )} -
-

{product.title}

+
+

+ {product.title} +

+ {/* Price shown inline on mobile only; desktop uses its own column */} {product.basePrice && ( -

+

{parseInt(product.basePrice).toLocaleString("fa-IR")} تومان

)}
-
- {variants && variants.length > 0 && ( + {/* Desktop price column */} + + {product.basePrice + ? `${parseInt(product.basePrice).toLocaleString("fa-IR")} تومان` + : "—"} + + {/* Desktop variants column */} + + {variants && variants.length > 0 ? ( {variants.length} نوع + ) : ( + — + )} + +
+ {variants && variants.length > 0 && ( + + {variants.length} نوع + )}
-
+ {/* Desktop table-style header */} +
+ محصول + قیمت + تنوع + عملیات +
+ +
{products.map((product) => product.id ? ( {/* Header */} - - - {/* Store Status */} -
-
-
-
- -

وضعیت فروشگاه (فعال)

-
-

- در حالت فعال، فروشگاه برای مخاطبان نمایش داده می‌شود. -

-
- -
+
+
+

+ تنظیمات فروشگاه +

- {/* Theme Toggle */} -
-
-
-

- {initialTheme === "dark" ? "حالت تاریک" : "حالت روشن"} -

-

- تغییر حالت نمایش به تاریک یا روشن -

+ {/* Status + Theme cards */} +
+ {/* Store Status */} +
+
+
+
+ +

+ وضعیت فروشگاه (فعال) +

+
+

+ در حالت فعال، فروشگاه برای مخاطبان نمایش داده می‌شود. +

+
+ +
+
+ + {/* Theme Toggle */} +
+
+
+

+ {initialTheme === "dark" ? "حالت تاریک" : "حالت روشن"} +

+

+ تغییر حالت نمایش به تاریک یا روشن +

+
+
-
{/* Menu Items */} -
- {storeMenuItems.map((item, index) => ( -
handleItemClick(item)} - role="button" - tabIndex={0} - onKeyDown={(e) => { - if (e.key === "Enter" || e.key === " ") { - handleItemClick(item); - } - }} - > -
- {item.image} -

{item.title}

+
+ {storeMenuItems.map((item, index) => { + const isLogout = item.pageName === "logout"; + return ( +
handleItemClick(item)} + role="button" + tabIndex={0} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + handleItemClick(item); + } + }} + > +
+ + {item.image} + +

{item.title}

+
+
- -
- ))} + ); + })}
{/* Instagram Sync Drawer */}