From 90bf32f8fdac07af435d7ca461956e2c4d7bba5f Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Tue, 26 Aug 2025 15:28:40 +0330
Subject: [PATCH]  orders

---
 src/app/profile/orders/page.tsx | 146 ++++++++++++++++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 src/app/profile/orders/page.tsx

diff --git a/src/app/profile/orders/page.tsx b/src/app/profile/orders/page.tsx
new file mode 100644
index 0000000..ff2b149
--- /dev/null
+++ b/src/app/profile/orders/page.tsx
@@ -0,0 +1,146 @@
+'use client'
+import withLayout from '@/hoc/withLayout'
+import { NextPage } from 'next'
+import React, { useState } from 'react'
+import Menu from '../components/Menu'
+import { Button } from '@/components/ui/button'
+import Image from 'next/image'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
+
+
+const Orders: NextPage = () => {
+    const [activeTab, setActiveTab] = useState<'current' | 'delivered' | 'returned' | 'cancelled'>('current')
+
+    const mockOrders = [
+        {
+            id: '656151',
+            amount: '18,500,000',
+            status: 'در انتظار پرداخت',
+            date: '1401 / 10 / 12',
+            products: [
+                { id: 1, image: 'https://picsum.photos/80/80?random=1', name: 'گوشی موبایل سامسونگ مدل Galaxy S24 Ultra' },
+                { id: 2, image: 'https://picsum.photos/80/80?random=2', name: 'لحاف کرسی ستین مدل ساده' },
+                { id: 3, image: 'https://picsum.photos/80/80?random=3', name: 'روغنی ستین کد T-2112 طرح گلریز' },
+                { id: 4, image: 'https://picsum.photos/80/80?random=4', name: 'شارژر دیواری 65 وات ماگسیونگ' },
+                { id: 5, image: 'https://picsum.photos/80/80?random=5', name: 'گوشی موبایل سامسونگ مدل Galaxy S24 Ultra' },
+                { id: 6, image: 'https://picsum.photos/80/80?random=6', name: 'لحاف کرسی ستین مدل ساده' },
+                { id: 7, image: 'https://picsum.photos/80/80?random=7', name: 'روغنی ستین کد T-2112 طرح گلریز' },
+                { id: 8, image: 'https://picsum.photos/80/80?random=8', name: 'شارژر دیواری 65 وات ماگسیونگ' },
+            ]
+        },
+        {
+            id: '846511',
+            amount: '254,500,000',
+            status: 'وضعیت سفارش: در حال ارسال',
+            date: '1401 / 8 / 10',
+            products: [
+                { id: 1, image: 'https://picsum.photos/80/80?random=5', name: 'گوشی موبایل سامسونگ مدل Galaxy S24 Ultra' },
+                { id: 2, image: 'https://picsum.photos/80/80?random=6', name: 'لحاف کرسی ستین مدل ساده' },
+                { id: 3, image: 'https://picsum.photos/80/80?random=7', name: 'روغنی ستین کد T-2112 طرح گلریز' },
+                { id: 4, image: 'https://picsum.photos/80/80?random=8', name: 'شارژر دیواری 65 وات ماگسیونگ' }
+            ]
+        }
+    ]
+
+    const tabs = [
+        { key: 'current' as const, label: 'جاری', count: 10 },
+        { key: 'delivered' as const, label: 'تحویل شده', count: 3 },
+        { key: 'returned' as const, label: 'مرجوع شده', count: 3 },
+        { key: 'cancelled' as const, label: 'لغو شده', count: 3 }
+    ]
+
+    return (
+        <div className='p-6'>
+            <Menu pageActive='orders' />
+
+            {/* Tabs */}
+            <div className='mt-14 border-b border-gray-200'>
+                <div className='flex gap-8'>
+                    {tabs.map((tab) => (
+                        <button
+                            key={tab.key}
+                            onClick={() => setActiveTab(tab.key)}
+                            className={`pb-4 px-2 border-b-2 transition-colors ${activeTab === tab.key
+                                ? 'border-primary text-primary'
+                                : 'border-transparent text-gray-600 hover:text-gray-800'
+                                }`}
+                        >
+                            <span className='ml-2'>{tab.label}</span>
+                            <span className={`inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs rounded-full ${activeTab === tab.key
+                                ? 'bg-primary text-white'
+                                : 'bg-gray-200 text-gray-600'
+                                }`}>
+                                {tab.count}
+                            </span>
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            {/* Orders List */}
+            <div className='mt-6 space-y-4'>
+                {mockOrders.map((order) => (
+                    <div key={order.id} className='bg-white border border-[#E0E0E0] rounded-[8px] p-5'>
+                        <div className='flex gap-6'>
+                            <div className='max-w-[234px]'>
+                                <div className=''>
+                                    <div className='text-sm text-[#7F7F7F] mb-1'>
+                                        شماره سفارش: <span className='text-black'> {order.id}</span>
+                                    </div>
+                                    <div className='text-sm text-[#7F7F7F] mt-4'>
+                                        مبلغ: <span className='text-black'> {order.amount} تومان</span>
+                                    </div>
+                                </div>
+
+                                <div className='mb-6 mt-4'>
+                                    <div className='text-sm text-[#7F7F7F]'>
+                                        وضعیت سفارش : <span className='text-black'>{order.status}</span>
+                                    </div>
+                                    <div className='text-sm text-[#7F7F7F] mt-4'>
+                                        تاریخ ثبت سفارش: <span className='text-black'> {order.date}</span>
+                                    </div>
+                                </div>
+
+                                <div className='flex gap-3'>
+                                    <Button
+                                        variant="outline"
+                                        className='px-6 py-2 h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50'
+                                    >
+                                        جزئیات سفارش
+                                    </Button>
+                                    <Button className='bg-primary hover:bg-primary/80 px-6 py-2 h-9 text-white'>
+                                        پرداخت
+                                    </Button>
+                                </div>
+                            </div>
+
+
+                            <div className='flex-1 flex gap-4 border-r border-border pr-5 overflow-hidden min-h-[225px]'>
+
+                                <Swiper
+                                    spaceBetween={16}
+                                    slidesPerView={'auto'}
+                                    className='h-full w-full'
+                                    grabCursor={true}
+                                >
+                                    {order.products.map((product) => (
+                                        <SwiperSlide key={product.id} className='!w-[234px]'>
+                                            <div className='flex w-[234px] h-[224px] flex-col p-7 items-center rounded-xl gap-2 border border-border'>
+                                                <Image src={product.image} className='max-w-[140px] max-h-[140px] object-center' alt={product.name} width={100} height={100} />
+                                                <div className='max-w-[200px] text-center text-sm font-light mt-4'>{product.name}</div>
+                                            </div>
+                                        </SwiperSlide>
+                                    ))}
+                                </Swiper>
+
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default withLayout(Orders)
\ No newline at end of file