From adf31dc999949b40b7d4d1865508f8f8193c2ab8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Afra=20=E2=80=8C?= <afra@Afras-MacBook-Air.local>
Date: Wed, 2 Sep 2026 01:30:30 +0330
Subject: [PATCH] perf: cart page modified

---
 src/app/(customer)/(shop)/cart/page.tsx   | 124 ++++++++++++++--------
 src/components/customer/cart-item-row.tsx |  44 +++++---
 2 files changed, 110 insertions(+), 58 deletions(-)

diff --git a/src/app/(customer)/(shop)/cart/page.tsx b/src/app/(customer)/(shop)/cart/page.tsx
index 243db0c..e5e3def 100644
--- a/src/app/(customer)/(shop)/cart/page.tsx
+++ b/src/app/(customer)/(shop)/cart/page.tsx
@@ -1,14 +1,13 @@
 import Link from "next/link";
+import { ArrowRight, ShoppingBasket } from "lucide-react";
 import { getCart } from "@/lib/api/cart";
 import { requireSession } from "@/lib/auth/session";
 import { CartItemRow } from "@/components/customer/cart-item-row";
-import { ClearCartButton } from "@/components/customer/clear-cart-button";
 import { Button } from "@/components/ui/button";
 
 export default async function CartPage() {
   await requireSession("/cart");
   const cart = await getCart();
-  const hasBlockedGroup = cart.groups.some((g) => !g.meets_minimum_order);
 
   if (cart.groups.length === 0) {
     return (
@@ -21,58 +20,93 @@ export default async function CartPage() {
     );
   }
 
+  const totalItemLines = cart.groups.reduce(
+    (sum, g) => sum + g.items.length,
+    0,
+  );
+
   return (
-    <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-6 px-4 py-6">
-      <div className="flex items-center justify-between">
-        <h1 className="text-lg font-bold">سبد خرید</h1>
-        <ClearCartButton />
+    <main className="mx-auto flex w-full max-w-md flex-1 flex-col gap-6 px-4 pt-4 pb-6">
+      {/* DOM order intentionally mirrors the screenshot's left→right layout, not reading
+          order — under this app's inherited dir="rtl", the first child renders at the
+          right edge and the last at the left. */}
+      <div className="flex items-center justify-start gap-3">
+        <Link href="/" aria-label="بازگشت">
+          <ArrowRight className="h-5 w-5 text-foreground" />
+        </Link>
+        <h1 className="text-[18px] font-bold leading-none text-foreground">
+          سبد خرید
+        </h1>
       </div>
 
-      {cart.groups.map((group) => (
-        <section key={group.store.uuid} className="flex flex-col gap-2 rounded-2xl border border-border p-4">
-          <Link href={`/stores/${group.store.uuid}`} className="font-medium">
-            {group.store.name}
-          </Link>
+      <div className="flex flex-col gap-8">
+        {cart.groups.map((group) => (
+          <section
+            key={group.store.uuid}
+            className="relative rounded-2xl border border-gray-300 bg-white p-6 shadow-[0_2px_10px_-6px_rgba(0,0,0,0.039),0_14px_28px_-12px_rgba(0,0,0,0.071)]"
+          >
+            <span className="absolute -top-3 left-4 rounded-lg bg-blue-bg px-2.5 py-1 text-[12px] font-semibold leading-none text-primary-action">
+              {group.items.length.toLocaleString("fa-IR")} کالا
+            </span>
 
-          <div className="divide-y divide-border">
-            {group.items.map((item) => (
-              <CartItemRow key={item.uuid} item={item} />
-            ))}
-          </div>
+            <Link
+              href={`/stores/${group.store.uuid}`}
+              className="flex items-center justify-start gap-2 pb-5 mb-3 border-b border-b-[#E4E4E7]"
+            >
+              <ShoppingBasket className="h-4.5 w-4.5 text-foreground" />
+              <span className="text-[16px] font-bold leading-none text-foreground">
+                {group.store.name}
+              </span>
+            </Link>
 
-          <div className="flex flex-col gap-1 border-t border-border pt-2 text-sm">
-            <div className="flex justify-between text-muted-foreground">
-              <span>جمع کالاها</span>
-              <span>{group.items_subtotal.toLocaleString("fa-IR")} تومان</span>
+            <div className="divide-y divide-gray-200">
+              {group.items.map((item) => (
+                <CartItemRow key={item.uuid} item={item} />
+              ))}
             </div>
-            <div className="flex justify-between text-muted-foreground">
-              <span>هزینه ارسال</span>
-              <span>{group.delivery_fee.toLocaleString("fa-IR")} تومان</span>
-            </div>
-            <div className="flex justify-between font-semibold">
-              <span>مجموع</span>
-              <span>{group.total.toLocaleString("fa-IR")} تومان</span>
-            </div>
-          </div>
 
-          {!group.meets_minimum_order && (
-            <p className="rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
-              حداقل مبلغ سفارش برای این فروشگاه رعایت نشده است.
-            </p>
-          )}
-        </section>
-      ))}
+            <div className="flex items-center justify-start border-t border-gray-200 pt-5 pb-1">
+              <span className="text-[13px] font-semibold leading-none text-foreground">
+                جمع فروشگاه: {group.total.toLocaleString("fa-IR")} تومان
+              </span>
+            </div>
 
-      <div className="sticky bottom-4 flex flex-col gap-2 rounded-2xl border border-border bg-background p-4 shadow-lg">
-        <div className="flex justify-between font-semibold">
-          <span>مبلغ قابل پرداخت</span>
-          <span>{cart.grand_total.toLocaleString("fa-IR")} تومان</span>
+            {!group.meets_minimum_order && (
+              <p className="mt-3 rounded-lg bg-error/10 px-3 py-2 text-xs text-error">
+                حداقل مبلغ سفارش برای این فروشگاه رعایت نشده است.
+              </p>
+            )}
+
+            <Link
+              href={group.meets_minimum_order ? "/checkout" : "#"}
+              aria-disabled={!group.meets_minimum_order}
+              className="mt-4 flex justify-center"
+            >
+              <button
+                type="button"
+                disabled={!group.meets_minimum_order}
+                className="w-full rounded-xl bg-primary-action px-8 py-3 text-[14px] font-bold text-white disabled:opacity-40"
+              >
+                تکمیل سفارش
+              </button>
+            </Link>
+          </section>
+        ))}
+      </div>
+
+      <div className="flex flex-row justify-between border-t border-gray-200 pt-4 px-5">
+        <div className="flex flex-col items-start justify-start gap-2">
+          <span className="text-[14px] font-semibold text-foreground">
+            جمع کل سبد ({cart.groups.length.toLocaleString("fa-IR")} فروشگاه،{" "}
+            {totalItemLines.toLocaleString("fa-IR")} کالا)
+          </span>
+          <p className="text-end text-[12px] leading-normal text-gray-600">
+            هر فروشگاه جداگانه پرداخت و ارسال می‌شود
+          </p>
         </div>
-        <Link href={hasBlockedGroup ? "#" : "/checkout"} aria-disabled={hasBlockedGroup}>
-          <Button size="lg" className="w-full" disabled={hasBlockedGroup}>
-            ادامه و ثبت سفارش
-          </Button>
-        </Link>
+        <span className="text-[16px] font-bold leading-none text-foreground">
+          {cart.grand_total.toLocaleString("fa-IR")} تومان
+        </span>
       </div>
     </main>
   );
diff --git a/src/components/customer/cart-item-row.tsx b/src/components/customer/cart-item-row.tsx
index 0a92ad9..df582a2 100644
--- a/src/components/customer/cart-item-row.tsx
+++ b/src/components/customer/cart-item-row.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useTransition } from "react";
 import { useRouter, usePathname } from "next/navigation";
+import { Minus, Plus, Trash2 } from "lucide-react";
 import { updateCartItemQuantity, removeCartItem } from "@/lib/api/cart";
 import type { CartItem } from "@/types/api";
 
@@ -33,41 +34,58 @@ export function CartItemRow({ item }: { item: CartItem }) {
   }
 
   return (
-    <div className="flex flex-col gap-1.5 py-3">
-      <div className={`flex items-center gap-3 ${isPending ? "opacity-50" : ""}`}>
-        <div className="h-14 w-14 shrink-0 overflow-hidden rounded-xl bg-muted">
+    <div className={`flex flex-col gap-2 py-4 ${isPending ? "opacity-50" : ""}`}>
+      {/* DOM order intentionally mirrors the screenshot's left→right layout, not reading
+          order — under this app's inherited dir="rtl", the first child renders at the
+          right edge and the last at the left. */}
+      <div className="flex items-start justify-start gap-3">
+        <div className="h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-muted">
           {item.product.image_url && (
             // eslint-disable-next-line @next/next/no-img-element
             <img src={item.product.image_url} alt="" className="h-full w-full object-cover" />
           )}
         </div>
-        <div className="flex flex-1 flex-col gap-1">
-          <span className="text-sm font-medium">{item.product.name}</span>
-          <span className="text-xs text-muted-foreground">{item.product.price.toLocaleString("fa-IR")} تومان</span>
+        <div className="flex flex-col items-start gap-3 text-right m-2">
+          <span className="text-[14px] font-bold leading-none text-foreground">{item.product.name}</span>
+          <span className="text-[13px] leading-none text-gray-600">
+            {item.product.price.toLocaleString("fa-IR")} تومان
+          </span>
         </div>
-        <div className="flex items-center gap-2 rounded-full border border-border px-2 py-1">
+      </div>
+
+      <div className="flex items-center justify-end gap-3">
+        <div className="flex h-8 items-center gap-3 rounded-lg border border-gray-300 px-2">
           <button
             type="button"
             disabled={isPending}
             onClick={() => changeQuantity(item.quantity - 1)}
-            className="flex h-6 w-6 items-center justify-center text-sm"
             aria-label="کاهش تعداد"
           >
-            −
+            <Minus className="h-3.5 w-3.5 text-foreground" />
           </button>
-          <span className="w-5 text-center text-sm">{item.quantity.toLocaleString("fa-IR")}</span>
+          <span className="min-w-3 text-center text-[13px] font-bold leading-none text-foreground">
+            {item.quantity.toLocaleString("fa-IR")}
+          </span>
           <button
             type="button"
             disabled={isPending}
             onClick={() => changeQuantity(item.quantity + 1)}
-            className="flex h-6 w-6 items-center justify-center text-sm"
             aria-label="افزایش تعداد"
           >
-            +
+            <Plus className="h-3.5 w-3.5 text-foreground" />
           </button>
         </div>
-        <span className="w-20 shrink-0 text-end text-sm font-semibold">{item.line_total.toLocaleString("fa-IR")}</span>
+        <button
+          type="button"
+          disabled={isPending}
+          onClick={() => changeQuantity(0)}
+          aria-label="حذف از سبد"
+          className="flex h-8 w-8 items-center justify-center disabled:opacity-40"
+        >
+          <Trash2 className="h-4.5 w-4.5 text-error" />
+        </button>
       </div>
+
       {error && <p className="text-end text-xs text-error">{error}</p>}
     </div>
   );