diff --git a/src/components/CustomerStats.tsx b/src/components/CustomerStats.tsx new file mode 100644 index 0000000..6f0850e --- /dev/null +++ b/src/components/CustomerStats.tsx @@ -0,0 +1,41 @@ +import { EmptyWallet, Star1 } from 'iconsax-react' +import { type FC } from 'react' + +interface CustomerStatsProps { + points?: number | string + walletBalance?: string +} + +const CustomerStats: FC = ({ + points = '124', + walletBalance = '۲۴۰.۰۰۰ تومان' +}) => { + return ( +
+
+
+ +
امتیاز
+
+ +
+ +
{points} امتیاز
+
+ +
+
+ +
موجودی کیف پول
+
+ +
+ +
{walletBalance}
+
+
+ ) +} + +export default CustomerStats + diff --git a/src/index.css b/src/index.css index 1f3b422..8074abb 100644 --- a/src/index.css +++ b/src/index.css @@ -43,3 +43,7 @@ textarea::placeholder { .dltr { direction: ltr; } + +tbody tr:nth-child(odd) { + background: rgba(233, 235, 244, 0.2) !important; +} diff --git a/src/pages/customers/AddressesTable.tsx b/src/pages/customers/AddressesTable.tsx new file mode 100644 index 0000000..05f2d86 --- /dev/null +++ b/src/pages/customers/AddressesTable.tsx @@ -0,0 +1,94 @@ +import Table from '@/components/Table' +import { type FC } from 'react' +import type { RowDataType, ActionType } from '@/components/types/TableTypes' + +interface AddressData extends RowDataType { + id: number + number: number + title: string + province: string + city: string + address: string +} + +const AddressesTable: FC = () => { + const handleRowActions = (item: AddressData): ActionType[] => { + return [ + { + label: 'ویرایش', + onClick: () => { + console.log('ویرایش آدرس:', item.id) + }, + }, + { + label: 'حذف', + onClick: () => { + console.log('حذف آدرس:', item.id) + }, + }, + ] + } + + const columns = [ + { + key: 'number', + title: 'شماره', + }, + { + key: 'title', + title: 'عنوان', + }, + { + key: 'province', + title: 'استان', + }, + { + key: 'city', + title: 'شهر', + }, + { + key: 'address', + title: 'آدرس', + }, + ] + + const data: AddressData[] = [ + { + id: 1, + number: 1, + title: 'خانه', + province: 'مرکزی', + city: 'اراک', + address: 'خیابان شریعتی - خیابان جنت', + }, + { + id: 2, + number: 2, + title: 'خانه', + province: 'مرکزی', + city: 'اراک', + address: 'خیابان شریعتی - خیابان جنت', + }, + { + id: 3, + number: 3, + title: 'خانه', + province: 'مرکزی', + city: 'اراک', + address: 'خیابان شریعتی - خیابان جنت', + }, + ] + + return ( + + ) +} + +export default AddressesTable + diff --git a/src/pages/customers/Details.tsx b/src/pages/customers/Details.tsx new file mode 100644 index 0000000..082401f --- /dev/null +++ b/src/pages/customers/Details.tsx @@ -0,0 +1,113 @@ +import Button from '@/components/Button' +import CustomerStats from '@/components/CustomerStats' +import AddressesTable from './AddressesTable' +import TransactionsTable from './TransactionsTable' +import PointsLogTable from './PointsLogTable' +import DiscountCodesTable from './DiscountCodesTable' +import { Edit, TaskSquare } from 'iconsax-react' +import { type FC } from 'react' + +const CustomerDetails: FC = () => { + return ( +
+
+

مشتری: مهرداد مظفری

+ +
+ +
+
+
+
+
+ اطلاعات مشتری +
+
+ +
ویرایش
+
+
+ +
+
+
+ نام و نام خانوادگی : +
+
مهرداد مظفری
+
+ +
+
+ کدملی : +
+
۰۵۲۱۲۳۴۵۶۷
+
+ +
+
شغل:
+
برنامه نویس
+
+ +
+
تاریخ تولد :
+
۱۳۶۹/۰۵/۱۱
+
+
+ +
+
+
شماره تماس:
+
۰۸۶۹۱۰۰۹۱۰۰۱
+
+ +
+
ایمیل:
+
info@example.com
+
+
+
+ +
+
+ آدرس ها +
+ +
+ +
+
+ تراکنش ها +
+ +
+ +
+
+ لاگ امتیازها +
+ +
+ +
+
+ + +
+
+ کد تخفیف +
+ +
+
+
+ +
+ ) +} + +export default CustomerDetails \ No newline at end of file diff --git a/src/pages/customers/DiscountCodesTable.tsx b/src/pages/customers/DiscountCodesTable.tsx new file mode 100644 index 0000000..2d39647 --- /dev/null +++ b/src/pages/customers/DiscountCodesTable.tsx @@ -0,0 +1,93 @@ +import { type FC } from 'react' +import { TicketDiscount } from 'iconsax-react' + +interface DiscountCode { + id: string + code: string + expiryDate: string + status: 'used' | 'unused' +} + +const DiscountCodesTable: FC = () => { + const discountCodes: DiscountCode[] = [ + { + id: '1', + code: 'A12345', + expiryDate: '1403/12/01', + status: 'unused' + }, + { + id: '2', + code: 'A12345', + expiryDate: '1403/12/01', + status: 'used' + }, + { + id: '3', + code: 'A12345', + expiryDate: '1403/12/01', + status: 'used' + } + ] + + const getStatusStyles = (status: 'used' | 'unused') => { + if (status === 'unused') { + return 'text-[#0047FF]' + } + return 'text-[#FF0000]' + } + + const getStatusText = (status: 'used' | 'unused') => { + return status === 'unused' ? 'استفاده نشده' : 'استفاده شده' + } + + return ( +
+
+ + + + + + + + + {discountCodes.map((item) => ( + + + + + + ))} + +
+ کد + + انقضا + + وضعیت +
+ {item.code} + + {item.expiryDate} + + + {getStatusText(item.status)} + +
+ + + + ) +} + +export default DiscountCodesTable + diff --git a/src/pages/customers/List.tsx b/src/pages/customers/List.tsx index 8257940..fb96277 100644 --- a/src/pages/customers/List.tsx +++ b/src/pages/customers/List.tsx @@ -5,6 +5,8 @@ import { Add, Eye } from 'iconsax-react' import { type FC, useState } from 'react' import type { RowDataType, ActionType } from '@/components/types/TableTypes' import type { FilterValues } from '@/components/Filters' +import { Pages } from '@/config/Pages' +import { Link } from 'react-router-dom' interface CustomerData extends RowDataType { id: number @@ -100,8 +102,12 @@ const CustomersList: FC = () => { { key: 'details', title: 'جزییات', - render: () => { - return + render: (item: CustomerData) => { + return ( + + + + ) }, }, ] diff --git a/src/pages/customers/PointsLogTable.tsx b/src/pages/customers/PointsLogTable.tsx new file mode 100644 index 0000000..19c9b56 --- /dev/null +++ b/src/pages/customers/PointsLogTable.tsx @@ -0,0 +1,94 @@ +import Table from '@/components/Table' +import { type FC } from 'react' +import type { RowDataType, ActionType } from '@/components/types/TableTypes' + +interface PointsLogData extends RowDataType { + id: number + number: number + title: string + points: number + date: string + description: string +} + +const PointsLogTable: FC = () => { + const handleRowActions = (item: PointsLogData): ActionType[] => { + return [ + { + label: 'ویرایش', + onClick: () => { + console.log('ویرایش لاگ امتیاز:', item.id) + }, + }, + { + label: 'حذف', + onClick: () => { + console.log('حذف لاگ امتیاز:', item.id) + }, + }, + ] + } + + const columns = [ + { + key: 'number', + title: 'شماره', + }, + { + key: 'title', + title: 'عنوان', + }, + { + key: 'points', + title: 'امتیاز', + }, + { + key: 'date', + title: 'تاریخ', + }, + { + key: 'description', + title: 'توضیحات', + }, + ] + + const data: PointsLogData[] = [ + { + id: 1, + number: 1, + title: 'خرید با امتیاز', + points: 200, + date: '۱۳۶۹/۰۵/۱۱', + description: 'معادل ۲۰۰,۰۰۰ تومان', + }, + { + id: 2, + number: 1, + title: 'افزایش امتیاز', + points: 200, + date: '۱۳۶۹/۰۵/۱۱', + description: 'دعوت دوستان', + }, + { + id: 3, + number: 1, + title: 'افزایش امتیاز', + points: 200, + date: '۱۳۶۹/۰۵/۱۱', + description: 'خرید اول', + }, + ] + + return ( + + ) +} + +export default PointsLogTable + diff --git a/src/pages/customers/TransactionsTable.tsx b/src/pages/customers/TransactionsTable.tsx new file mode 100644 index 0000000..3d5b6c8 --- /dev/null +++ b/src/pages/customers/TransactionsTable.tsx @@ -0,0 +1,127 @@ +import Table from '@/components/Table' +import { type FC } from 'react' +import type { RowDataType, ActionType } from '@/components/types/TableTypes' + +interface TransactionData extends RowDataType { + id: number + number: number + transactionType: string + amount: string + paymentDate: string + status: 'successful' | 'unsuccessful' | 'unknown' +} + +const TransactionsTable: FC = () => { + const handleRowActions = (item: TransactionData): ActionType[] => { + return [ + { + label: 'ویرایش', + onClick: () => { + console.log('ویرایش تراکنش:', item.id) + }, + }, + { + label: 'حذف', + onClick: () => { + console.log('حذف تراکنش:', item.id) + }, + }, + ] + } + + const getStatusColor = (status: string) => { + switch (status) { + case 'successful': + return 'text-green-600' + case 'unsuccessful': + return 'text-red-600' + case 'unknown': + return 'text-orange-600' + default: + return 'text-gray-600' + } + } + + const getStatusText = (status: string) => { + switch (status) { + case 'successful': + return 'موفق' + case 'unsuccessful': + return 'ناموفق' + case 'unknown': + return 'نا مشخص' + default: + return status + } + } + + const columns = [ + { + key: 'number', + title: 'شماره', + }, + { + key: 'transactionType', + title: 'نوع تراکنش', + }, + { + key: 'amount', + title: 'مبلغ', + }, + { + key: 'paymentDate', + title: 'تاریخ پرداخت', + }, + { + key: 'status', + title: 'وضعیت', + render: (item: TransactionData) => { + return ( + + {getStatusText(item.status)} + + ) + }, + }, + ] + + const data: TransactionData[] = [ + { + id: 1, + number: 1, + transactionType: 'پرداخت اینترنتی', + amount: '۴,۰۰۰,۰۰۰ ریال', + paymentDate: '۱۳۶۹/۰۵/۱۱', + status: 'successful', + }, + { + id: 2, + number: 1, + transactionType: 'پرداخت اینترنتی', + amount: '۴,۰۰۰,۰۰۰ ریال', + paymentDate: '۱۳۶۹/۰۵/۱۱', + status: 'unsuccessful', + }, + { + id: 3, + number: 1, + transactionType: 'پرداخت اینترنتی', + amount: '۴,۰۰۰,۰۰۰ ریال', + paymentDate: '۱۳۶۹/۰۵/۱۱', + status: 'unknown', + }, + ] + + return ( +
+ ) +} + +export default TransactionsTable + diff --git a/src/router/Main.tsx b/src/router/Main.tsx index c1d3e36..336c34b 100644 --- a/src/router/Main.tsx +++ b/src/router/Main.tsx @@ -10,6 +10,7 @@ import { Pages } from '@/config/Pages' import CreateFood from '@/pages/food/Create' import CategoryFood from '@/pages/food/Category' import CustomersList from '@/pages/customers/List' +import CustomerDetails from '@/pages/customers/Details' const MainRouter: FC = () => { @@ -32,6 +33,7 @@ const MainRouter: FC = () => { } /> } /> } /> + } />