import with excel

src/pages/bill/Create.tsx

@@ -1,12 +1,13 @@
-import { FC, useEffect, useRef } from 'react'
+import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useGetAllCompanies } from '../company/hooks/useCompanyData'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
+import { useDropzone } from 'react-dropzone'
 import { CreateBillType } from './types/Types'
-import { useCreateBill } from './hooks/useBillData'
+import { useCreateBill, useCreateBillWithExcel } from './hooks/useBillData'
 import Button from '../../components/Button'
 import Input from '../../components/Input'
-import { TickCircle } from 'iconsax-react'
+import { DocumentUpload, TickCircle } from 'iconsax-react'
 import { toast } from 'react-toastify'
 import { ErrorType } from '../../helpers/types'
 import { Pages } from '../../config/Pages'
@@ -18,6 +19,21 @@ const CreateBill: FC = () => {
     const navigate = useNavigate()
     const getCompanies = useGetAllCompanies()
     const createBill = useCreateBill()
+    const createBillWithExcel = useCreateBillWithExcel()
+    const [excelFile, setExcelFile] = useState<File | null>(null)
+
+    const onDropExcel = useCallback((acceptedFiles: File[]) => {
+        setExcelFile(acceptedFiles[0] ?? null)
+    }, [])
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop: onDropExcel,
+        accept: {
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+            'application/vnd.ms-excel': ['.xls'],
+        },
+        maxFiles: 1,
+        multiple: false,
+    })
 
     const companies: CompanyItemType[] = getCompanies.data?.data?.companies ?? []
 
@@ -96,20 +112,75 @@ const CreateBill: FC = () => {
         formik.setFieldValue('values', next)
     }
 
+    const handleSubmitExcel = () => {
+        const waterRate = Number(formik.values.waterRate)
+        const dueDays = Number(formik.values.dueDays)
+        if (waterRate < 0 || dueDays < 0) {
+            toast.error('نرخ آب و تعداد روز مهلت را وارد کنید')
+            return
+        }
+        if (!excelFile) {
+            toast.error('فایل اکسل را انتخاب کنید')
+            return
+        }
+        createBillWithExcel.mutate(
+            { waterRate, dueDays, file: excelFile },
+            {
+                onSuccess: () => {
+                    toast.success('قبض آب با موفقیت از طریق اکسل ثبت شد')
+                    navigate(Pages.bill.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message?.[0] ?? 'خطا در ثبت قبض با اکسل')
+                },
+            }
+        )
+    }
+
     return (
         <div className="mt-4">
-            <div className="flex justify-between items-center">
+            <div className="flex justify-between items-center flex-wrap gap-3">
                 <div className="text-lg font-medium">افزودن قبض آب</div>
-                <Button
-                    className="w-fit px-4"
-                    onClick={() => formik.handleSubmit()}
-                    isLoading={createBill.isPending}
-                >
-                    <div className="flex items-center gap-2">
-                        <TickCircle size={20} color="white" />
-                        <span>ثبت قبض</span>
+                <div className="flex items-center gap-2 flex-wrap">
+                    <Button
+                        className="w-fit px-4"
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={createBill.isPending}
+                    >
+                        <div className="flex items-center gap-2">
+                            <TickCircle size={20} color="white" />
+                            <span>ثبت قبض</span>
+                        </div>
+                    </Button>
+                    <div
+                        {...getRootProps()}
+                        className="flex items-center gap-2 border border-border border-dashed rounded-xl pl-2 pr-1 py-1 bg-gray-50 min-h-10 cursor-pointer hover:bg-gray-100 transition-colors"
+                    >
+                        <input {...getInputProps()} />
+                        <div className="flex items-center gap-2 text-sm text-gray-600 whitespace-nowrap pointer-events-none">
+                            <DocumentUpload size={18} className="shrink-0" />
+                            <span>فایل اکسل</span>
+                        </div>
+                        {excelFile ? (
+                            <span className="text-xs text-gray-700 max-w-[140px] truncate pointer-events-none" title={excelFile.name}>
+                                {excelFile.name}
+                            </span>
+                        ) : (
+                            <span className="text-xs text-gray-400 pointer-events-none">کلیک یا فایل را اینجا رها کنید</span>
+                        )}
+                        <Button
+                            type="button"
+                            className="w-fit px-4 bg-secondary text-black hover:bg-secondary/90 shrink-0"
+                            onClick={(e) => {
+                                e.stopPropagation()
+                                handleSubmitExcel()
+                            }}
+                            isLoading={createBillWithExcel.isPending}
+                        >
+                            <span>ثبت با اکسل</span>
+                        </Button>
                     </div>
-                </Button>
+                </div>
             </div>
 
             <div className="mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl">

src/pages/bill/hooks/useBillData.ts

@@ -13,6 +13,12 @@ export const useCreateCharge = () => {
   });
 };
 
+export const useCreateBillWithExcel = () => {
+  return useMutation({
+    mutationFn: api.createBillWithExcel,
+  });
+};
+
 export const useGetBills = (page: number = 1) => {
   return useQuery({
     queryKey: ["bills", page],

src/pages/bill/service/Service.ts

@@ -1,5 +1,5 @@
 import axios from "../../../config/axios";
-import { CreateBillType, CreateBillChargeType } from "../types/Types";
+import { CreateBillType, CreateBillChargeType, CreateBillWithExcelType } from "../types/Types";
 
 export const createBill = async (params: CreateBillType) => {
   const { data } = await axios.post("/bills/water", params);
@@ -15,3 +15,14 @@ export const getBills = async (page: number = 1) => {
   const { data } = await axios.get(`/bills?page=${page}`);
   return data;
 };
+
+export const createBillWithExcel = async (params: CreateBillWithExcelType) => {
+  const formData = new FormData();
+  formData.append("waterRate", String(params.waterRate));
+  formData.append("dueDays", String(params.dueDays));
+  formData.append("file", params.file);
+  const { data } = await axios.post("/bills/water/excel", formData, {
+    headers: { "Content-Type": "multipart/form-data" },
+  });
+  return data;
+};

src/pages/bill/types/Types.ts

@@ -12,6 +12,12 @@ export type CreateBillChargeType = {
   dueDays: number;
 };
 
+export type CreateBillWithExcelType = {
+  waterRate: number;
+  dueDays: number;
+  file: File;
+};
+
 export type BillItemType = {
   id: string;
   createdAt: string;