fix: update heading background color in OrderDetail component

public/server-error-icon.svg

@@ -0,0 +1,3 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0027 38.0953C11.5441 36.9277 9.41619 35.164 7.81244 32.9647C6.2087 30.7653 5.17996 28.2 4.81972 25.5018C4.45948 22.8037 4.77916 20.0582 5.74972 17.5151C6.72028 14.9719 8.31093 12.7117 10.3771 10.9398C12.4433 9.16786 14.9194 7.94048 17.5806 7.36917C20.2417 6.79787 23.0034 6.90076 25.6146 7.66849C28.2259 8.43623 30.6039 9.84446 32.5325 11.7652C34.4612 13.6859 35.8793 16.0583 36.658 18.6666H40.8344C43.521 18.6619 46.1072 19.6875 48.0607 21.5321C50.0142 23.3768 51.1863 25.9003 51.3358 28.5831C51.4852 31.2659 50.6007 33.904 48.8642 35.9543C47.1278 38.0047 44.6715 39.3112 42.0009 39.6051M30.3342 28L23.3347 39.6675H32.6674L25.6679 51.335" stroke="#EF4444" stroke-width="2.5" stroke-linecap="round"/>
+</svg>

src/app/(customer)/(shop)/orders/(routes)/(landing)/page.tsx

@@ -0,0 +1,76 @@
+import Link from "next/link";
+import { requireSession } from "@/lib/auth/session";
+import { getOrderGroups } from "@/lib/api/orders";
+import { PAYMENT_STATUS_LABELS_FA } from "@/lib/order-status";
+import OrderItem from "@/components/orders/order-item";
+import OrderEmpty from "@/components/orders/order-empty";
+import OrderServerError from "@/components/orders/order-server-error";
+import OrdersSkeleton from "@/components/orders/orders-skeleton";
+import OrderHeader from "@/components/orders/order-header";
+
+export default async function OrdersPage() {
+  return <section>
+    {/* <OrderEmpty /> */}
+    {/* <OrderServerError /> */}
+    {
+      Array.from({ length: 20 }, (_, index) => <OrderItem />)
+    }
+    {/* <OrderEmpty />
+    <OrderServerError />
+    <OrdersSkeleton /> */}
+
+    {/* <OrdersSkeleton /> */}
+    {/* <OrderServerError /> */}
+    {/* <OrderEmpty /> */}
+    {/*  */}
+
+    {/* <OrderItem />
+    <OrderItem />
+    <OrderItem />
+    <OrderItem />
+    <OrderItem />
+    <OrderItem />
+    <OrderItem />
+    <OrderItem />
+    <OrderItem />
+    <OrderItem />
+    <OrderItem />
+    <OrderItem /> */}
+  </section>
+  // await requireSession("/orders");
+  // const orderGroups = await getOrderGroups();
+
+  // return (
+  //   <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-4 px-4 py-6">
+  //     <h1 className="text-lg font-bold">سفارش‌های من</h1>
+
+  //     {orderGroups.length === 0 && <p className="text-sm text-muted-foreground">هنوز سفارشی ثبت نکرده‌اید.</p>}
+
+  //     <div className="flex flex-col gap-3">
+  //       {orderGroups.map((group) => (
+  //         <Link
+  //           key={group.uuid}
+  //           href={`/order-groups/${group.uuid}`}
+  //           className="flex flex-col gap-2 rounded-2xl border border-border p-4"
+  //         >
+  //           <div className="flex justify-between text-sm text-muted-foreground">
+  //             <span>{new Date(group.created_at).toLocaleDateString("fa-IR")}</span>
+  //             <span>{PAYMENT_STATUS_LABELS_FA[group.payment_status]}</span>
+  //           </div>
+  //           <div className="flex flex-wrap gap-1 text-sm">
+  //             {group.orders.map((order) => (
+  //               <span key={order.uuid} className="rounded-full bg-muted px-2 py-0.5">
+  //                 {order.store.name}
+  //               </span>
+  //             ))}
+  //           </div>
+  //           <div className="flex justify-between font-semibold">
+  //             <span>مجموع</span>
+  //             <span>{group.total_amount.toLocaleString("fa-IR")} تومان</span>
+  //           </div>
+  //         </Link>
+  //       ))}
+  //     </div>
+  //   </main>
+  // );
+}

src/app/(customer)/(shop)/orders/(routes)/[orderId]/page.tsx

@@ -0,0 +1,22 @@
+import OrderItems from '@/components/orders/order-items'
+import OrderPaymentSticky from '@/components/orders/order-payment-sticky'
+import OrderStepperStatus from '@/components/orders/order-stepper-status'
+import OrderTimeAddressInfoAlert from '@/components/orders/order-time-address-info-alert'
+import React from 'react'
+
+const OrderDetail = () => {
+    return <section className='relative'>
+
+        <h2 className="w-full p-3 px-4 bg-primary-action text-primary-foreground text-md font-medium">
+            در حال آماده‌سازی
+        </h2>
+        <OrderStepperStatus currentStep={2} />
+        <OrderTimeAddressInfoAlert />
+        <OrderItems />
+        <OrderPaymentSticky />
+
+
+    </section>
+}
+
+export default OrderDetail

src/app/(customer)/(shop)/orders/layout.tsx

@@ -0,0 +1,15 @@
+import OrderHeader from '@/components/orders/order-header';
+import React from 'react'
+
+interface OrderLayoutInterface {
+    children: React.ReactNode;
+}
+
+const OrderLayout = async ({ children }: OrderLayoutInterface) => {
+    return <main className='max-w-5xl w-full mx-auto p-0'>
+        <OrderHeader />
+        {children}
+    </main>
+}
+
+export default OrderLayout

src/app/(customer)/(shop)/orders/page.tsx

@@ -1,43 +0,0 @@
-import Link from "next/link";
-import { requireSession } from "@/lib/auth/session";
-import { getOrderGroups } from "@/lib/api/orders";
-import { PAYMENT_STATUS_LABELS_FA } from "@/lib/order-status";
-
-export default async function OrdersPage() {
-  await requireSession("/orders");
-  const orderGroups = await getOrderGroups();
-
-  return (
-    <main className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-4 px-4 py-6">
-      <h1 className="text-lg font-bold">سفارش‌های من</h1>
-
-      {orderGroups.length === 0 && <p className="text-sm text-muted-foreground">هنوز سفارشی ثبت نکرده‌اید.</p>}
-
-      <div className="flex flex-col gap-3">
-        {orderGroups.map((group) => (
-          <Link
-            key={group.uuid}
-            href={`/order-groups/${group.uuid}`}
-            className="flex flex-col gap-2 rounded-2xl border border-border p-4"
-          >
-            <div className="flex justify-between text-sm text-muted-foreground">
-              <span>{new Date(group.created_at).toLocaleDateString("fa-IR")}</span>
-              <span>{PAYMENT_STATUS_LABELS_FA[group.payment_status]}</span>
-            </div>
-            <div className="flex flex-wrap gap-1 text-sm">
-              {group.orders.map((order) => (
-                <span key={order.uuid} className="rounded-full bg-muted px-2 py-0.5">
-                  {order.store.name}
-                </span>
-              ))}
-            </div>
-            <div className="flex justify-between font-semibold">
-              <span>مجموع</span>
-              <span>{group.total_amount.toLocaleString("fa-IR")} تومان</span>
-            </div>
-          </Link>
-        ))}
-      </div>
-    </main>
-  );
-}

src/components/orders/order-empty.tsx

@@ -0,0 +1,19 @@
+import { ShoppingBagIcon } from 'lucide-react'
+import Link from 'next/link'
+
+const OrderEmpty = () => {
+  return (
+    <div className='h-96 flex items-center justify-center p-5'>
+      <div className='max-w-xl w-full p-5 flex items-center justify-center flex-col gap-3'>
+        <div className='size-30 mb-2 bg-gray-100 flex items-center justify-center rounded-full'>
+          <ShoppingBagIcon className='size-12 text-gray-600' />
+        </div>
+        <h1 className='text-lg font-bold'>هنوز سفارشی ثبت نکرده‌اید</h1>
+        <p className='text-sm text-center text-gray-600'>لیست سفارش‌های شما در حال حاضر خالی است. برای خرید از فروشگاه‌های اطراف روی دکمه زیر کلیک کنید.</p>
+        <Link href='/' className='h-12 mt-4 rounded-full flex items-center justify-center w-full bg-primary-action text-white cursor-pointer'>شروع خرید</Link>
+      </div>
+    </div>
+  )
+}
+
+export default OrderEmpty

src/components/orders/order-header.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { ArrowRight, ShoppingBagIcon } from 'lucide-react';
+import { usePathname, useRouter } from 'next/navigation';
+
+const OrderHeader = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const isExactOrders = pathname === '/orders';
+
+  const onBackHandler = () => {
+    router.back();
+  };
+
+  const goToCartPage = () => {
+    router.push('/cart');
+  };
+
+  return (
+    <header className="flex items-center justify-between w-full mb-3 px-4 pt-3">
+      <div className="flex items-center gap-3">
+        <ArrowRight className="size-5 cursor-pointer" onClick={onBackHandler} />
+        <h2 className="text-lg font-bold">سفارش‌ها</h2>
+      </div>
+
+      {isExactOrders && (
+        <div
+          className="relative cursor-pointer inline-block"
+          onClick={goToCartPage}
+        >
+          <div className="size-10 rounded-full flex items-center justify-center">
+            <ShoppingBagIcon className="size-6" />
+          </div>
+
+          <span className="absolute -top-1 -right-1 flex items-center justify-center min-w-4 h-4 px-1 bg-primary-action text-primary-foreground text-[10px] font-bold rounded-full">
+            90
+          </span>
+        </div>
+      )}
+    </header>
+  );
+};
+
+export default OrderHeader;

src/components/orders/order-item.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const OrderItem = () => {
+  const router = useRouter();
+
+  const goToOrderDetail = () => router.push(`/orders/uuid`);
+
+  const statusClasses: Record<string, string> = {
+    'ارسال شد': 'bg-teal-bg text-primary-action',
+    'در حال آماده‌سازی': 'bg-[#E5F3FF] text-[#007BFF]',
+    'در انتظار تأیید': 'bg-[#FFF4E5] text-[#E67E22]',
+    'آماده تحویل حضوری': 'bg-[#EBE5FF] text-[#734DBF]',
+    'لغو شد': 'bg-[#FCE8E8] text-error',
+    'تحویل داده شد': 'bg-emerald-bg text-success',
+  };
+
+  const order = {
+    id: 1,
+    restaurant: 'فست‌فود برگر',
+    description: 'ساندویچ + نوشیدنی',
+    status: 'آماده تحویل حضوری',
+    time: 'امروز، 11:30',
+    itemsCount: 3,
+    totalPrice: 45000,
+    images: Array.from({ length: 5 }, (_, i) => ({
+      id: i,
+      src: `https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqIof_DOo6I5-oOLJ1V9_HPfSudXfhewy_5C5Ry7YOO-UXSZ1jvK7-0hw&s=10`,
+      alt: `product-${i}`,
+    })),
+  };
+
+  return (
+    <div className="w-full rounded-2xl min-h-32 border border-gray-300 bg-background p-4 mb-2">
+      <div className="flex items-center justify-between w-full gap-3">
+        <div className="flex items-center gap-4">
+          <div className="size-12 rounded-full bg-gradient-to-br from-primary-action to-primary flex items-center justify-center text-primary-foreground font-bold text-lg">
+            {order.restaurant.charAt(0)}
+          </div>
+          <div className="flex flex-col items-start">
+            <h2 className="text-md font-bold text-gray-800">{order.restaurant}</h2>
+            <p className="text-sm text-gray-600">{order.description}</p>
+          </div>
+        </div>
+
+        <span
+          className={`flex items-center justify-center px-3 py-1 rounded-full text-xs font-bold ${statusClasses[order.status]
+            }`}
+        >
+          {order.status}
+        </span>
+      </div>
+
+      <div className="w-full h-px bg-gray-200 my-4" />
+
+      <div className="grid grid-cols-3 gap-3 w-full">
+        <div className="col-span-2 flex items-center gap-1 overflow-x-auto pb-2 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
+          {order.images.map((img) => (
+            <div
+              key={img.id}
+              className="size-10 flex-shrink-0 rounded-lg bg-gray-200 overflow-hidden"
+            >
+              <img
+                src={img.src}
+                alt={img.alt}
+                className="w-full h-full object-cover"
+              />
+            </div>
+          ))}
+        </div>
+
+        <div className="col-span-1 flex flex-col items-end gap-1">
+          <div className="flex items-center gap-1 text-xs text-gray-600">
+            <span>{order.time}</span>
+          </div>
+          <div className="flex items-center gap-1 text-primary-action text-sm text-left font-bold">
+            <span>
+              {order.itemsCount} کالا • {order.totalPrice.toLocaleString('fa-IR')} تومان
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <button
+        className="w-full mt-8 rounded-xl h-12 bg-primary-action text-primary-foreground cursor-pointer hover:bg-primary-action/90 transition-colors font-medium"
+        onClick={goToOrderDetail}
+      >
+        مشاهده وضعیت
+      </button>
+    </div>
+  );
+};
+
+export default OrderItem;

src/components/orders/order-items.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+const OrderItems = () => {
+  return (
+    <div className="mt-5 grid grid-cols-1 gap-2 mx-8">
+      <h1 className="text-lg font-bold mb-3">اقلام سفارش</h1>
+
+      {/* order items */}
+      <div className="flex items-center justify-between w-full">
+        <div className="flex gap-3">
+          <span className="font-semibold text-sm">نان سنگک</span>
+          <span className="text-xs font-medium text-gray-700">10 عدد</span>
+        </div>
+        <span className="text-sm font-bold">۱۲،۰۰۰ تومان</span>
+      </div>
+    </div>
+  )
+}
+
+export default OrderItems

src/components/orders/order-payment-sticky.tsx

@@ -0,0 +1,34 @@
+const OrderPaymentSticky = () => {
+    return (
+        <div className="fixed bottom-0 left-0 right-0 z-50 bg-background border-t border-gray-100 w-full">
+            <div className="px-5 pt-5 pb-3 max-w-sm mx-auto w-full">
+                <div className="flex items-center justify-between mb-4">
+                    <div className="flex flex-col items-start">
+                        <span className="text-lg font-medium text-foreground">
+                            مبلغ پرداختی
+                        </span>
+                        <span className="text-xs font-normal text-gray-700">
+                            پرداخت از کیف پول
+                        </span>
+                    </div>
+                    <span className="text-lg font-medium text-foreground">
+                        1000000 تومان
+                    </span>
+                </div>
+
+                <button
+                    type="button"
+                    className="w-full h-12 rounded-xl border border-error bg-background text-error text-[15px] font-medium active:scale-[0.98] transition-transform cursor-pointer"
+                >
+                    پرداخت از کیف پول
+                </button>
+            </div>
+
+            <div className="flex justify-center pb-2">
+                <div className="w-[134px] h-[5px] rounded-full bg-gray-300" />
+            </div>
+        </div>
+    )
+}
+
+export default OrderPaymentSticky

src/components/orders/order-server-error.tsx

@@ -0,0 +1,24 @@
+import { ServerCrashIcon } from 'lucide-react'
+import React from 'react'
+
+const OrderServerError = () => {
+    return (
+        <div className="h-96 flex items-center justify-center p-5">
+            <div className="max-w-xl w-full p-5 flex items-center justify-center flex-col gap-3">
+                <div className="size-30 mb-2 bg-[#FEF2F2] flex items-center justify-center rounded-full">
+                    {/* <ServerCrashIcon className="size-12 text-error" /> */}
+                    <img src="/server-error-icon.svg" alt="وینسو" className="size-16" />
+                </div>
+                <h1 className="text-lg font-bold">خطا در برقراری ارتباط</h1>
+                <p className="text-sm text-center text-gray-600">
+                    متأسفانه در دریافت اطلاعات سفارش‌ها مشکلی پیش آمده است. لطفاً اتصال اینترنت خود را بررسی کرده و مجدداً تلاش کنید.
+                </p>
+                <button className="h-12 mt-4 rounded-full w-full border border-primary-action bg-background text-primary-action font-bold cursor-pointer">
+                    تلاش مجدد
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default OrderServerError

src/components/orders/order-stepper-status.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { Check } from 'lucide-react'
+
+type StepStatus = 'completed' | 'current' | 'upcoming'
+
+interface Step {
+  label: string
+  status: StepStatus
+}
+
+interface OrderStepperStatusProps {
+  /** ایندکس مرحله فعلی (۰-based). مراحل قبل completed، خودش current، بعد upcoming */
+  currentStep?: number
+  steps?: string[]
+}
+
+const DEFAULT_STEPS = [
+  'ثبت شد',
+  'پذیرفته شد',
+  'آماده‌سازی',
+  'ارسال شد',
+  'تحویل',
+]
+
+const OrderStepperStatus = ({
+  currentStep = 2,
+  steps = DEFAULT_STEPS,
+}: OrderStepperStatusProps) => {
+  const computedSteps: Step[] = steps.map((label, index) => {
+    if (index < currentStep) return { label, status: 'completed' }
+    if (index === currentStep) return { label, status: 'current' }
+    return { label, status: 'upcoming' }
+  })
+
+  return (
+    <div className="w-full px-8 py-6" dir="rtl">
+      <div className="flex items-center w-full">
+        {computedSteps.map((step, index) => {
+          const isLast = index === computedSteps.length - 1
+          const isCompleted = step.status === 'completed'
+          const isCurrent = step.status === 'current'
+
+          const circleBg = step.status === 'upcoming' ? 'bg-gray-300' : 'bg-primary-action'
+          const nextLineBg =
+            index < currentStep ? 'bg-primary-action' : 'bg-gray-300'
+
+          return (
+            <React.Fragment key={index}>
+              <div
+                className={`
+                  size-6 shrink-0 rounded-full flex items-center justify-center
+                  ${circleBg}
+                `}
+              >
+                {isCompleted && (
+                  <Check className="size-3.5 text-primary-foreground stroke-[3]" />
+                )}
+                {isCurrent && (
+                  <div className="size-2 rounded-full bg-background" />
+                )}
+              </div>
+
+              {!isLast && (
+                <div className={`flex-1 h-0.5 ${nextLineBg}`} />
+              )}
+            </React.Fragment>
+          )
+        })}
+      </div>
+
+      <div className="flex w-full mt-3">
+        {computedSteps.map((step, index) => {
+          const isLast = index === computedSteps.length - 1
+          const textColor =
+            step.status === 'upcoming'
+              ? 'text-gray-500'
+              : 'text-primary-action'
+
+          return (
+            <React.Fragment key={index}>
+              <div className="w-6 shrink-0 flex justify-center">
+                <span
+                  className={`
+                    text-[11px] font-medium text-center leading-tight
+                    w-16 -mx-5 ${textColor}
+                  `}
+                >
+                  {step.label}
+                </span>
+              </div>
+              {!isLast && <div className="flex-1" />}
+            </React.Fragment>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default OrderStepperStatus

src/components/orders/order-time-address-info-alert.tsx

@@ -0,0 +1,23 @@
+import { ClockIcon, MapPinIcon } from 'lucide-react'
+import React from 'react'
+
+const OrderTimeAddressInfoAlert = () => {
+  return (
+    <div className="flex flex-col gap-4 items-start p-4 bg-teal-bg rounded-2xl my-4 mx-4">
+      <div className="flex items-center gap-2">
+        <ClockIcon className="size-5 text-primary-action" />
+        <p className="text-md font-bold text-primary-action">
+          زمان تخمینی تحویل: ۳۰–۴۵ دقیقه دیگر
+        </p>
+      </div>
+      <div className="flex items-center gap-2">
+        <MapPinIcon className="size-5 text-primary-action" />
+        <p className="text-sm text-gray-700">
+          نارمک، خیابان شهید دستغیب، پلاک ۱۲، واحد ۳
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default OrderTimeAddressInfoAlert

src/components/orders/orders-skeleton.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+const OrdersSkeleton = () => {
+  return (
+    <div className="w-full space-y-2">
+      {Array.from({ length: 10 }).map((_, index) => (
+        <div
+          key={index}
+          className="w-full rounded-2xl min-h-32 border border-gray-300 bg-background p-4 animate-pulse"
+        >
+          <div className="flex items-center justify-between w-full gap-3">
+            <div className="flex items-center gap-4">
+              <div className="size-12 rounded-full bg-gray-200 flex-shrink-0" />
+              <div className="flex flex-col items-start gap-2">
+                <div className="w-32 h-4 bg-gray-200 rounded" />
+                <div className="w-24 h-3 bg-gray-200 rounded" />
+              </div>
+            </div>
+            <div className="w-24 h-6 bg-gray-200 rounded-full" />
+          </div>
+
+          <div className="w-full h-px bg-gray-200 my-4" />
+
+          <div className="grid grid-cols-3 gap-3 w-full">
+            <div className="col-span-2 flex items-center gap-1 overflow-x-auto pb-2">
+              {Array.from({ length: 3 }).map((_, imgIndex) => (
+                <div
+                  key={imgIndex}
+                  className="size-10 flex-shrink-0 rounded-lg bg-gray-200"
+                />
+              ))}
+            </div>
+
+            <div className="col-span-1 flex flex-col items-end gap-2">
+              <div className="w-20 h-3 bg-gray-200 rounded" />
+              <div className="w-28 h-4 bg-gray-200 rounded" />
+            </div>
+          </div>
+
+          <div className="w-full mt-8 rounded-xl h-12 bg-gray-200" />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default OrdersSkeleton;