customers and service

2025-01-25 15:07:46 +03:30
parent d0c8a14be4
commit 0861501f48
11 changed files with 667 additions and 7 deletions
@@ -0,0 +1,124 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { Add, Eye } from 'iconsax-react'
+import Select from '../../components/Select'
+import Input from '../../components/Input'
+import Td from '../../components/Td'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+
+const CustomerList: FC = () => {
+
+    const { t } = useTranslation('global')
+
+    return (
+        <div className='mt-4'>
+            <div className='flex w-full justify-between items-center'>
+                <div>
+                    {t('customer.customer_list')}
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                    >
+                        <div className='flex gap-2'>
+                            <Add
+                                className='size-5'
+                                color='#fff'
+                            />
+                            <div>{t('customer.add_cutomer')}</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='flex justify-between items-center mt-12'>
+                <div className='flex gap-4'>
+                    <Select
+                        className='w-36'
+                        items={[
+                            { label: 'All', value: 'all' },
+                            { label: 'Active', value: 'active' },
+                            { label: 'Inactive', value: 'inactive' },
+                        ]}
+                        placeholder={t('service.category')}
+                    />
+                    <Select
+                        className='w-36'
+                        items={[
+                            { label: 'All', value: 'all' },
+                            { label: 'Active', value: 'active' },
+                            { label: 'Inactive', value: 'inactive' },
+                        ]}
+                        placeholder={t('service.status')}
+                    />
+                </div>
+                <div>
+                    <Input
+                        variant='search'
+                        placeholder={t('service.search')}
+                        className='bg-white border border-border'
+                    />
+                </div>
+            </div>
+
+            <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                <table className='w-full text-sm '>
+                    <thead className='thead'>
+                        <tr>
+                            <Td text={t('customer.name')} />
+                            <Td text={t('customer.company')} />
+                            <Td text={t('customer.email')} />
+                            <Td text={t('customer.active_services')} />
+                            <Td text={t('customer.factor')} />
+                            <Td text={t('customer.tickets')} />
+                            <Td text={t('customer.detail')} />
+                            <Td text={''} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr className='tr'>
+                            <Td text='مهرداد مظفری' />
+                            <Td text={'شرکت داناک'} />
+                            <Td text={'info@example.com'} />
+                            <Td text={'2 سرویس'} />
+                            <Td text={''}>
+                                <div className='text-[#0047FF]'>۳ صورت حساب</div>
+                            </Td>
+                            <Td text={''}>
+                                <div className='text-[#0047FF]'>۴ تیکت</div>
+                            </Td>
+                            <Td text={''}>
+                                <Link to={Pages.ticket.detail + '1'}>
+                                    <Eye size={20} color='#8C90A3' />
+                                </Link>
+                            </Td>
+                            <Td text={''} />
+                        </tr>
+                        <tr className='tr'>
+                            <Td text='مهرداد مظفری' />
+                            <Td text={'شرکت داناک'} />
+                            <Td text={'info@example.com'} />
+                            <Td text={'2 سرویس'} />
+                            <Td text={''}>
+                                <div className='text-[#0047FF]'>۳ صورت حساب</div>
+                            </Td>
+                            <Td text={''}>
+                                <div className='text-[#0047FF]'>۴ تیکت</div>
+                            </Td>
+                            <Td text={''}>
+                                <Link to={Pages.ticket.detail + '1'}>
+                                    <Eye size={20} color='#8C90A3' />
+                                </Link>
+                            </Td>
+                            <Td text={''} />
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default CustomerList