import client by excel

src/langs/fa.json

@@ -736,7 +736,21 @@
     "address": "آدرس",
     "image_profile": "تصویر پروفایل",
     "upload_image": "آپلود تصویر",
-    "new_password": "رمز عبور جدید"
+    "new_password": "رمز عبور جدید",
+    "import_excel": "ورود از Excel",
+    "download_sample": "دانلود فایل نمونه",
+    "import_file": "فایل Excel",
+    "import_submit": "بارگذاری و ورود",
+    "import_description": "فایل Excel باید شامل ستون‌های phone، firstName، lastName و gender باشد. حداکثر ۵۰۰ ردیف.",
+    "import_file_required": "لطفاً یک فایل Excel انتخاب کنید",
+    "import_success": "مشتریان با موفقیت وارد شدند",
+    "import_failed": "خطا در ورود مشتریان",
+    "import_total": "تعداد کل: {{count}}",
+    "import_created": "کاربران جدید: {{count}}",
+    "import_linked": "متصل‌شده به رستوران: {{count}}",
+    "import_already_linked": "قبلاً متصل بودند: {{count}}",
+    "import_errors": "{{count}} خطا",
+    "import_error_row": "ردیف {{row}}{{phone}}: {{message}}"
   },
   "priority": "الویت",
   "messages": {

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>
     )
 }

src/pages/customers/components/ImportCustomersModal.tsx

@@ -0,0 +1,128 @@
+import { type FC, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { DocumentDownload } from 'iconsax-react';
+import { toast } from 'react-toastify';
+import DefaulModal from '@/components/DefaulModal';
+import Button from '@/components/Button';
+import UploadBox from '@/components/UploadBox';
+import { extractErrorMessage } from '@/config/func';
+import { useImportUsersFromExcel } from '../hooks/useUsersData';
+import { downloadCustomerImportSampleExcel } from '../utils/downloadCustomerImportSampleExcel';
+import type { ImportUsersResult } from '../types/Types';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+};
+
+const ImportCustomersModal: FC<Props> = ({ open, onClose }) => {
+  const { t } = useTranslation('global');
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [importResult, setImportResult] = useState<ImportUsersResult | null>(null);
+  const [isResetUpload, setIsResetUpload] = useState(false);
+
+  const { mutate: importUsers, isPending } = useImportUsersFromExcel();
+
+  const handleClose = () => {
+    setSelectedFile(null);
+    setImportResult(null);
+    setIsResetUpload(prev => !prev);
+    onClose();
+  };
+
+  const handleImport = () => {
+    if (!selectedFile) {
+      toast.error(t('customer.import_file_required'));
+      return;
+    }
+
+    importUsers(selectedFile, {
+      onSuccess: (response) => {
+        setImportResult(response);
+        toast.success(response.message || t('customer.import_success'));
+      },
+      onError: (error) => {
+        toast.error(extractErrorMessage(error, t('customer.import_failed')));
+      },
+    });
+  };
+
+  return (
+    <DefaulModal
+      open={open}
+      close={handleClose}
+      isHeader
+      title_header={t('customer.import_excel')}
+      width={520}
+    >
+      <div className='mt-6 flex flex-col gap-5'>
+        <p className='text-sm text-gray-600 leading-6'>
+          {t('customer.import_description')}
+        </p>
+
+        <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>
+
+        <UploadBox
+          label={t('customer.import_file')}
+          onChange={(files) => setSelectedFile(files[0] ?? null)}
+          isReset={isResetUpload}
+        />
+
+        {importResult && (
+          <div className='rounded-xl border border-border p-4 text-sm space-y-2'>
+            <p>{t('customer.import_total', { count: importResult.total })}</p>
+            <p>{t('customer.import_created', { count: importResult.usersCreated })}</p>
+            <p>{t('customer.import_linked', { count: importResult.usersLinked })}</p>
+            <p>{t('customer.import_already_linked', { count: importResult.usersAlreadyLinked })}</p>
+
+            {importResult.errors.length > 0 && (
+              <div className='mt-3'>
+                <p className='font-medium text-red-600 mb-2'>
+                  {t('customer.import_errors', { count: importResult.errors.length })}
+                </p>
+                <ul className='max-h-32 overflow-y-auto space-y-1 text-red-600'>
+                  {importResult.errors.map((error, index) => (
+                    <li key={`${error.row}-${index}`}>
+                      {t('customer.import_error_row', {
+                        row: error.row,
+                        message: error.message,
+                        phone: error.phone ? ` (${error.phone})` : '',
+                      })}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+        )}
+
+        <div className='flex gap-3'>
+          <Button
+            label='انصراف'
+            type='button'
+            onClick={handleClose}
+            className='bg-gray-100 text-gray-700'
+          />
+          <Button
+            label={t('customer.import_submit')}
+            type='button'
+            onClick={handleImport}
+            isloading={isPending}
+            disabled={!selectedFile}
+          />
+        </div>
+      </div>
+    </DefaulModal>
+  );
+};
+
+export default ImportCustomersModal;

src/pages/customers/hooks/useUsersData.ts

@@ -1,5 +1,5 @@
 import * as api from "../service/UsersService";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { GetUsersParams } from "../types/Types";
 
 export const useGetUsers = (params?: GetUsersParams) => {
@@ -8,3 +8,14 @@ export const useGetUsers = (params?: GetUsersParams) => {
     queryFn: () => api.getUsers(params),
   });
 };
+
+export const useImportUsersFromExcel = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: api.importUsersFromExcel,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+    },
+  });
+};

src/pages/customers/service/UsersService.ts

@@ -2,6 +2,7 @@ import axios from "@/config/axios";
 import type {
   GetCustomersResponse,
   GetUsersParams,
+  ImportUsersResponse,
 } from "@/pages/customers/types/Types";
 
 export const getUsers = async (params?: GetUsersParams) => {
@@ -10,3 +11,20 @@ export const getUsers = async (params?: GetUsersParams) => {
   });
   return data;
 };
+
+export const importUsersFromExcel = async (file: File) => {
+  const formData = new FormData();
+  formData.append("file", file);
+
+  const { data } = await axios.post<ImportUsersResponse>(
+    `/admin/users/import`,
+    formData,
+    {
+      headers: {
+        "Content-Type": "multipart/form-data",
+      },
+    },
+  );
+
+  return data.data;
+};

src/pages/customers/types/Types.ts

@@ -55,3 +55,20 @@ export type CustomerListRow = RowDataType & {
   totalOrderAmount: string;
   status: string;
 };
+
+export type ImportUserRowError = {
+  row: number;
+  phone?: string;
+  message: string;
+};
+
+export type ImportUsersResult = {
+  message?: string;
+  total: number;
+  usersCreated: number;
+  usersLinked: number;
+  usersAlreadyLinked: number;
+  errors: ImportUserRowError[];
+};
+
+export type ImportUsersResponse = IResponse<ImportUsersResult>;

src/pages/customers/utils/downloadCustomerImportSampleExcel.ts

@@ -0,0 +1,24 @@
+import * as XLSX from 'xlsx';
+
+const SAMPLE_ROWS = [
+  {
+    phone: '9123456789',
+    firstName: 'علی',
+    lastName: 'محمدی',
+    gender: 'مرد',
+  },
+  {
+    phone: '9129876543',
+    firstName: 'سارا',
+    lastName: 'احمدی',
+    gender: 'زن',
+  },
+];
+
+export const downloadCustomerImportSampleExcel = () => {
+  const worksheet = XLSX.utils.json_to_sheet(SAMPLE_ROWS);
+  const workbook = XLSX.utils.book_new();
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'customers');
+
+  XLSX.writeFile(workbook, 'customer-import-sample.xlsx');
+};