import client by excel

src/pages/customers/List.tsx

@@ -1,8 +1,13 @@
 import Table from '@/components/Table'
 import Filters, { type FieldType } from '@/components/Filters'
-import { type FC, useMemo } from 'react'
+import Button from '@/components/Button'
+import { type FC, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { DocumentDownload, DocumentUpload } from 'iconsax-react'
 import { useGetUsers } from './hooks/useUsersData'
 import { useCustomerFilters } from './hooks/useCustomerFilters'
+import ImportCustomersModal from './components/ImportCustomersModal'
+import { downloadCustomerImportSampleExcel } from './utils/downloadCustomerImportSampleExcel'
 import type { CustomerListRow, UserRestaurant } from '@/pages/customers/types/Types'
 import { formatOptionalDate, formatFaNumber } from '@/helpers/func'
 
@@ -22,6 +27,9 @@ const mapUserRestaurantToRow = (userRestaurant: UserRestaurant): CustomerListRow
 }
 
 const CustomersList: FC = () => {
+    const { t } = useTranslation('global')
+    const [isImportModalOpen, setIsImportModalOpen] = useState(false)
+
     const {
         filters,
         currentPage,
@@ -92,8 +100,30 @@ const CustomersList: FC = () => {
 
     return (
         <div className='mt-5'>
-            <div className='flex justify-between items-center'>
-                <h1 className='text-lg font-light'>لیست مشتریان</h1>
+            <div className='flex flex-wrap justify-between items-center gap-3'>
+                <h1 className='text-lg font-light'>{t('customer.customer_list')}</h1>
+                <div className='flex flex-wrap gap-2'>
+                    <Button
+                        type='button'
+                        className='w-fit px-4 bg-gray-100 text-gray-700'
+                        onClick={downloadCustomerImportSampleExcel}
+                    >
+                        <div className='flex items-center gap-2'>
+                            <DocumentDownload size={18} color='#374151' />
+                            <span>{t('customer.download_sample')}</span>
+                        </div>
+                    </Button>
+                    <Button
+                        type='button'
+                        className='w-fit px-4'
+                        onClick={() => setIsImportModalOpen(true)}
+                    >
+                        <div className='flex items-center gap-2'>
+                            <DocumentUpload size={18} color='#fff' />
+                            <span>{t('customer.import_excel')}</span>
+                        </div>
+                    </Button>
+                </div>
             </div>
 
             <div className='mt-8'>
@@ -116,6 +146,11 @@ const CustomersList: FC = () => {
                     onPageChange: handlePageChange,
                 }}
             />
+
+            <ImportCustomersModal
+                open={isImportModalOpen}
+                onClose={() => setIsImportModalOpen(false)}
+            />
         </div>
     )
 }