create tabs component + create filter component + my orders page

2025-10-18 14:42:41 +03:30
parent b4da39fe5f
commit 8ce42653cf
17 changed files with 739 additions and 11 deletions
@@ -0,0 +1,118 @@
+import Tabs from '@/components/Tabs'
+import { useState, type FC } from 'react'
+import { TabMyOrdersEnum } from './enum/OrderEnum'
+import Filters from '@/components/Filters'
+import Button from '@/components/Button'
+import { AddSquare } from 'iconsax-react'
+import Table from '@/components/Table'
+
+const MyOrders: FC = () => {
+
+    const [activeTab, setActiveTab] = useState<TabMyOrdersEnum>(TabMyOrdersEnum.ALL)
+    return (
+        <div className='mt-5'>
+            <h1>
+                سفارشات من
+            </h1>
+
+            <div className='mt-10'>
+                <Tabs
+                    items={[
+                        { label: 'همه', value: TabMyOrdersEnum.ALL },
+                        { label: 'در حال انجام', value: TabMyOrdersEnum.IN_PROGRESS },
+                        { label: 'تایید شده', value: TabMyOrdersEnum.CONFIRMED },
+                        { label: 'تحویل داده شده', value: TabMyOrdersEnum.DELIVERED },
+                        { label: 'کنسل شده', value: TabMyOrdersEnum.CANCELLED },
+                    ]}
+                    activeTab={activeTab}
+                    onTabChange={(tab) => setActiveTab(tab as TabMyOrdersEnum)}
+                />
+            </div>
+
+            <div className='mt-16 flex justify-between items-center'>
+                <Filters
+                    fields={[
+                        { type: 'input', name: 'search', placeholder: 'جستجو' },
+                        { type: 'date', name: 'date', placeholder: 'تاریخ' },
+                        {
+                            type: 'select', name: 'status', placeholder: 'وضعیت', options: [
+                                { label: 'همه', value: 'all' },
+                                { label: 'در حال انجام', value: 'in_progress' },
+                                { label: 'تایید شده', value: 'confirmed' },
+                                { label: 'تحویل داده شده', value: 'delivered' },
+                                { label: 'کنسل شده', value: 'cancelled' },
+                            ]
+                        },
+                    ]}
+                    onChange={() => { }}
+                />
+
+                <Button
+                    className='w-fit px-5'
+                >
+                    <div className='flex items-center gap-2'>
+                        <AddSquare
+                            size={16}
+                            color='#000000'
+                        />
+                        <span>
+                            سفارش جدید
+                        </span>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-10'>
+                <Table
+                    columns={[
+                        {
+                            key: 'id',
+                            title: 'شماره',
+                        },
+                        {
+                            key: 'title',
+                            title: 'عنوان',
+                        },
+                        {
+                            key: 'createdAt',
+                            title: 'زمان ثبت سفارش',
+                        },
+                        {
+                            key: 'designer',
+                            title: 'طراح',
+                        },
+                        {
+                            key: 'type',
+                            title: 'نوع سفارش',
+                        },
+                        {
+                            key: 'itemsCount',
+                            title: 'تعداد اقلام',
+                        },
+                        {
+                            key: 'status',
+                            title: 'وضعیت سفارش',
+                        },
+                        {
+                            key: 'actions',
+                            title: '',
+                        }
+                    ]}
+                    data={[
+                        {
+                            id: 1,
+                            title: 'سفارش 1',
+                            createdAt: '2021-01-01',
+                            designer: 'طراح 1',
+                            type: 'نوع 1',
+                            itemsCount: 10,
+                            status: 'در حال انجام',
+                        },
+                    ]}
+                />
+            </div>
+        </div>
+    )
+}
+
+export default MyOrders
@@ -0,0 +1,7 @@
+export const enum TabMyOrdersEnum {
+  ALL = "all",
+  IN_PROGRESS = "in_progress",
+  CONFIRMED = "confirmed",
+  DELIVERED = "delivered",
+  CANCELLED = "cancelled",
+}