danak/dmenu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

import client by excel

Browse Source
This commit is contained in:
morteza-mortezai
2026-06-18 23:01:25 +03:30
parent 13c6de66b3
commit 4d27448450
7 changed files with 252 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/langs/fa.json
+15 -1
View File
@@ -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
+38 -3
View File
@@ -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
+128
View File
@@ -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
+12 -1
View File
@@ -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
+18
View File
@@ -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
+17
View File
@@ -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
+24
View File
@@ -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');
};