export and paginations

src/langs/fa.json

@@ -859,7 +859,8 @@
     "invoice_count": "تعداد صورتحساب",
     "select_company": "انتخاب شرکت",
     "register_date": "تاریخ ثبت نام",
-    "company": "شرکت"
+    "company": "شرکت",
+    "export": "خروجی اکسل"
   },
   "bill": {
     "list": "لیست قبض‌ها",

src/pages/company/List.tsx

@@ -1,23 +1,51 @@
-import { FC } from 'react'
-import { useGetCompanies } from './hooks/useCompanyData'
+import { FC, useState } from 'react'
+import { useExportCompanies, useGetCompanies } from './hooks/useCompanyData'
 import Td from '../../components/Td'
 import PageLoading from '../../components/PageLoading'
 import { useTranslation } from 'react-i18next'
 import { CompanyItemType } from './types/CompanyTypes'
 import moment from 'moment-jalaali'
-import { Edit } from 'iconsax-react'
+import { DocumentDownload, Edit } from 'iconsax-react'
 import DeleteCompany from './components/DeleteCompany'
 import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import ToggleStatusCompany from './components/ToggleStatus'
+import Button from '../../components/Button'
+import Pagination from '../../components/Pagination'
 
 const CompanyList: FC = () => {
 
     const { t } = useTranslation('global')
-    const { data, isLoading, refetch } = useGetCompanies(1)
+    const [page, setPage] = useState<number>(1)
+    const { data, isLoading, refetch } = useGetCompanies(page)
+    const exportMutation = useExportCompanies()
+
+    const handleExport = async () => {
+        const blob = await exportMutation.mutateAsync()
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = `companies-export-${new Date().toISOString().slice(0, 10)}.xlsx`
+        link.click()
+        window.URL.revokeObjectURL(url)
+
+    }
 
     return (
         <div>
+            <div className='flex justify-end mb-4'>
+                <Button
+                    className='px-5 w-auto'
+                    onClick={handleExport}
+                    disabled={exportMutation.isPending}
+                    isLoading={exportMutation.isPending}
+                >
+                    <div className='flex gap-2'>
+                        <DocumentDownload size={20} color='#fff' />
+                        <div>{t('company.export')}</div>
+                    </div>
+                </Button>
+            </div>
             {
                 isLoading ?
                     <PageLoading />
@@ -63,6 +91,11 @@ const CompanyList: FC = () => {
                                 }
                             </tbody>
                         </table>
+                        <Pagination
+                            currentPage={page}
+                            totalPages={data?.data?.pager?.totalPages ?? 1}
+                            onPageChange={setPage}
+                        />
                     </div>
             }
         </div>

src/pages/company/hooks/useCompanyData.ts

@@ -90,3 +90,9 @@ export const useToggleStatusCompany = () => {
     mutationFn: (id: string) => api.toggleStatusCompany(id),
   });
 };
+
+export const useExportCompanies = () => {
+  return useMutation({
+    mutationFn: api.exportCompanies,
+  });
+};

src/pages/company/service/CompanyService.ts

@@ -78,3 +78,10 @@ export const toggleStatusCompany = async (id: string) => {
   const { data } = await axios.patch(`/companies/${id}/toggle-status`);
   return data;
 };
+
+export const exportCompanies = async () => {
+  const { data } = await axios.get(`/companies/list/all/export`, {
+    responseType: "blob",
+  });
+  return data;
+};