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

@@ -10,6 +10,7 @@ import OrderHeader from "@/components/orders/order-header";
 
 export default async function OrdersPage() {
   return <section>
+    {/* <OrderEmpty /> */}
 
     {
       Array.from({ length: 20 }, (_, index) => <OrderItem />)

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

@@ -1,9 +1,13 @@
+import OrderStepperStatus from '@/components/orders/order-stepper-status'
 import React from 'react'
 
 const OrderDetail = () => {
-    return (
-        <div>OrderDetail</div>
-    )
+    return <section className=''>
+        
+        <h2 className='w-full p-2 bg-[#223D5D] text-white text-md font-medium'>در حال آماده‌سازی</h2>
+        <OrderStepperStatus currentStep={2} />
+
+    </section>
 }
 
 export default OrderDetail

src/components/orders/order-empty.tsx

@@ -1,16 +1,16 @@
 import { ShoppingBagIcon } from 'lucide-react'
-import React from '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-[#6B7280]' />
+          <ShoppingBagIcon className='size-12 text-gray-600' />
         </div>
         <h1 className='text-lg font-bold'>هنوز سفارشی ثبت نکرده‌اید</h1>
-        <p className='text-sm text-center text-[#6B7280]'>لیست سفارش‌های شما در حال حاضر خالی است. برای خرید از فروشگاه‌های اطراف روی دکمه زیر کلیک کنید.</p>
-        <button className='h-12 mt-4 rounded-full w-full bg-[#223D5D] text-white cursor-pointer'>شروع خرید</button>
+        <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>
   )

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

@@ -0,0 +1,103 @@
+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 isUpcoming = step.status === 'upcoming'
+
+          const circleBg = isUpcoming ? '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-white stroke-[3]" />
+                )}
+                {isCurrent && (
+                  <div className="size-2 rounded-full bg-white" />
+                )}
+              </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 isUpcoming = step.status === 'upcoming'
+          const textColor = isUpcoming
+            ? '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