Merge branch 'feature/delete_button_dialog' into 'develop'

close button dialog

See merge request witel-front-end/rms!72

src/app/(withAuth)/dashboard/damages/report/page.js

@@ -1,7 +1,11 @@
-import DamagesReportPage from "@/components/dashboard/damages/report"
+import DamagesReportPage from "@/components/dashboard/damages/report";
-import WithPermission from "@/core/middlewares/withPermission"
+import WithPermission from "@/core/middlewares/withPermission";
 
 const Page = () => {
-    return <WithPermission permission_name={["show-receipt", 'show-receipt-province']}><DamagesReportPage /></WithPermission>
+    return (
-}
+        <WithPermission permission_name={["show-receipt", "show-receipt-province"]}>
-export default Page
+            <DamagesReportPage />
+        </WithPermission>
+    );
+};
+export default Page;

src/components/dashboard/azmayesh/Forms/CandUAzmayesh/index.jsx

@@ -1,13 +1,27 @@
 "use client";
 
-import { Dialog } from "@mui/material";
+import { Dialog, IconButton } from "@mui/material";
 import FormAndRequest from "./FormAndRequest";
 import DialogLoading from "@/core/components/DialogLoading";
+import CloseIcon from "@mui/icons-material/Close";
 
 const CandUAzmayesh = ({ open, setOpen, mutate, updateInfo, rowId, loadingOpen, fromUpdate = false }) => {
     const isUpdateReady = fromUpdate ? updateInfo !== null : true;
     return (
         <Dialog open={open} fullWidth maxWidth="lg">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
             {isUpdateReady ? (
                 <FormAndRequest
                     setOpen={setOpen}

src/components/dashboard/azmayeshType/Forms/CandUAzmayeshType/index.jsx

@@ -1,11 +1,25 @@
-import { Dialog } from "@mui/material";
+import { Dialog, IconButton } from "@mui/material";
 import FormAndRequest from "./FormAndRequest";
 import DialogLoading from "@/core/components/DialogLoading";
+import CloseIcon from "@mui/icons-material/Close";
 
 const CandUAzmayeshType = ({ open, setOpen, mutate, rowId, updateInfo, loadingOpen, fromUpdate = false }) => {
     const isUpdateReady = fromUpdate ? updateInfo !== null : true;
     return (
         <Dialog open={open} fullWidth maxWidth="lg">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
             {isUpdateReady ? (
                 <FormAndRequest
                     setOpen={setOpen}

src/components/dashboard/damageItems/Actions/Create/Form/index.jsx

@@ -1,9 +1,23 @@
-import { Dialog } from "@mui/material";
+import { Dialog, IconButton } from "@mui/material";
 import CreateFormContent from "./CreateFormContent";
+import CloseIcon from "@mui/icons-material/Close";
 
 const CreateForm = ({ open, setOpen, mutate }) => {
     return (
         <Dialog open={open} fullWidth maxWidth="xs">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
             {open && <CreateFormContent setOpen={setOpen} mutate={mutate} />}
         </Dialog>
     );

src/components/dashboard/damageItems/RowActions/Edit/index.jsx

@@ -2,6 +2,7 @@ import BorderColorIcon from "@mui/icons-material/BorderColor";
 import { Dialog, IconButton, Tooltip } from "@mui/material";
 import EditFormContent from "./Form";
 import { useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
 
 const Edit = ({ row, mutate, rowId }) => {
     const [openEditDialog, setOpenEditDialog] = useState(false);
@@ -20,6 +21,19 @@ const Edit = ({ row, mutate, rowId }) => {
                 </IconButton>
             </Tooltip>
             <Dialog open={openEditDialog} fullWidth maxWidth="xs">
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenEditDialog(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <CloseIcon />
+                </IconButton>
                 {openEditDialog && (
                     <EditFormContent rowId={rowId} row={row} setOpen={setOpenEditDialog} mutate={mutate} />
                 )}

src/components/dashboard/damages/operator/Actions/create/Forms/index.jsx

@@ -1,9 +1,10 @@
 "use client";
-import { Dialog } from "@mui/material";
+import { Dialog, IconButton } from "@mui/material";
 import CreateFormContent from "./CreateFormContent";
 import { format } from "date-fns";
 import { CREATE_DAMAGE } from "@/core/utils/routes";
 import useRequest from "@/lib/hooks/useRequest";
+import CloseIcon from "@mui/icons-material/Close";
 
 const OperatorCreateForm = ({ open, setOpen, mutate }) => {
     const requestServer = useRequest({ notificationSuccess: true });
@@ -74,6 +75,19 @@ const OperatorCreateForm = ({ open, setOpen, mutate }) => {
     };
     return (
         <Dialog open={open} fullWidth maxWidth="md">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
             {open && (
                 <CreateFormContent
                     defaultData={defaultData}

src/components/dashboard/damages/operator/Form/EditForm/index.jsx

@@ -2,6 +2,7 @@ import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
 import BorderColorIcon from "@mui/icons-material/BorderColor";
 import EditController from "./EditController";
+import CloseIcon from "@mui/icons-material/Close";
 
 const EditForm = ({ row, mutate, rowId }) => {
     const [openEditDialog, setOpenEditDialog] = useState(false);
@@ -29,6 +30,19 @@ const EditForm = ({ row, mutate, rowId }) => {
                     },
                 }}
             >
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenEditDialog(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <CloseIcon />
+                </IconButton>
                 {openEditDialog && (
                     <EditController
                         openEditDialog={openEditDialog}

src/components/dashboard/damages/operator/Form/RegisterInsurance/index.jsx

@@ -2,6 +2,7 @@ import { Dialog, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
 import ReceiptIcon from "@mui/icons-material/Receipt";
 import RegisterInsuranceContent from "./RegisterInsuranceContent";
+import CloseIcon from "@mui/icons-material/Close";
 
 const RegisterInsurance = ({ row, mutate, rowId }) => {
     const [openRegisterInsuranceDialog, setOpenRegisterInsuranceDialog] = useState(false);
@@ -24,6 +25,19 @@ const RegisterInsurance = ({ row, mutate, rowId }) => {
                 maxWidth={"sm"}
                 scroll="paper"
             >
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenRegisterInsuranceDialog(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <CloseIcon />
+                </IconButton>
                 {openRegisterInsuranceDialog && (
                     <RegisterInsuranceContent
                         rowId={rowId}

src/components/dashboard/damages/report/ExcelPrint/index.jsx

@@ -41,7 +41,7 @@ const PrintExcel = ({ table, filterData }) => {
                 const filename = `خروجی کارتابل گزارشات خسارات وارده بر ابنیه فنی تاریخ_${moment().format("jYYYY_jMM_jDD")}.xlsx`;
                 FileSaver.saveAs(response.data, filename);
             })
-            .catch(() => { })
+            .catch(() => {})
             .finally(() => {
                 setLoading(false);
             });

src/components/dashboard/damages/report/ReportLists.jsx

@@ -94,7 +94,7 @@ const ReportLists = ({ data, specialFilter }) => {
                             return (renderedCellValue / 1).toLocaleString();
                         },
                     },
-                ]
+                ],
             },
             {
                 accessorKey: "kol_sabt_shode",
@@ -219,7 +219,7 @@ const ReportLists = ({ data, specialFilter }) => {
                             return (renderedCellValue / 1).toLocaleString();
                         },
                     },
-                ]
+                ],
             },
         ];
     }, []);

src/components/dashboard/damages/report/Search/FromDateController.jsx

@@ -13,7 +13,7 @@ const FromDateController = ({ control }) => {
                     name="from_date"
                     error={!!error}
                     value={value}
-                    label={'تاریخ تصادف (از تاریخ)'}
+                    label={"تاریخ تصادف (از تاریخ)"}
                     placeholder={"از تاریخ"}
                     setFieldValue={(name, newValue) => {
                         const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");

src/components/dashboard/damages/report/Search/ToDateController.jsx

@@ -15,7 +15,7 @@ const ToDateController = ({ control }) => {
                     minDate={minDate}
                     error={!!error}
                     value={value}
-                    label={'تاریخ تصادف (تا تاریخ)'}
+                    label={"تاریخ تصادف (تا تاریخ)"}
                     placeholder={"تا تاریخ"}
                     setFieldValue={(name, newValue) => {
                         const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");

src/components/dashboard/damages/report/index.jsx

@@ -1,4 +1,4 @@
-'use client'
+"use client";
 import PageTitle from "@/core/components/PageTitle";
 import { GET_PROVINCE_RECEIPT_REPORT, GET_COUNTRY_RECEIPT_REPORT } from "@/core/utils/routes";
 import { useAuth } from "@/lib/contexts/auth";
@@ -92,12 +92,12 @@ const DamagesReportPage = () => {
                     ],
                     filters: data,
                 });
-            } catch (e) { }
+            } catch (e) {}
         }
     };
 
     useEffect(() => {
-        if (!userPermissions) return
+        if (!userPermissions) return;
         onSearchSubmit(defaultValues);
     }, [userPermissions]);
 
@@ -133,5 +133,5 @@ const DamagesReportPage = () => {
             {!data ? <LinearProgress /> : <ReportLists specialFilter={specialFilter} data={data} />}
         </Stack>
     );
-}
+};
-export default DamagesReportPage
+export default DamagesReportPage;

src/components/dashboard/roadItems/operator/Actions/Create/Forms/index.jsx

@@ -1,8 +1,9 @@
 "use client";
-import { Dialog } from "@mui/material";
+import { Dialog, IconButton } from "@mui/material";
 import CreateFormContent from "@/components/dashboard/roadItems/operator/Actions/Create/Forms/CreateFormContent";
 import { CREATE_ROAD_ITEMS } from "@/core/utils/routes";
 import useRequest from "@/lib/hooks/useRequest";
+import CloseIcon from "@mui/icons-material/Close";
 
 const OperatorCreateForm = ({ open, setOpen, mutate }) => {
     const requestServer = useRequest({ notificationSuccess: true });
@@ -22,6 +23,19 @@ const OperatorCreateForm = ({ open, setOpen, mutate }) => {
     };
     return (
         <Dialog open={open} fullWidth maxWidth="sm">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
             {open && <CreateFormContent setOpen={setOpen} mutate={mutate} onSubmit={HandleSubmit} />}
         </Dialog>
     );

src/components/dashboard/roadItems/operator/Actions/ObservedGashtCreate/GashtCreate.jsx

@@ -1,11 +1,25 @@
-import { Dialog } from "@mui/material";
+import { Dialog, IconButton } from "@mui/material";
 import GashtCreateContent from "./GashtCreateContent";
 import { useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
 
 const GashtCreate = ({ open, setOpen, mutate, rowId }) => {
     const [tabState, setTabState] = useState(0);
     return (
         <Dialog open={open} fullWidth maxWidth={tabState === 0 ? "md" : "sm"}>
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
             {open && (
                 <GashtCreateContent mutate={mutate} setOpen={setOpen} setTabState={setTabState} tabState={tabState} />
             )}

src/components/dashboard/roadItems/operator/RowActions/EditForm/index.jsx

@@ -2,6 +2,7 @@ import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
 import BorderColorIcon from "@mui/icons-material/BorderColor";
 import EditController from "./EditController";
+import CloseIcon from "@mui/icons-material/Close";
 
 const EditForm = ({ row, mutate, rowId }) => {
     const [openEditDialog, setOpenEditDialog] = useState(false);
@@ -30,6 +31,19 @@ const EditForm = ({ row, mutate, rowId }) => {
                 }}
             >
                 <DialogTitle>ویرایش اطلاعات</DialogTitle>
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenEditDialog(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <CloseIcon />
+                </IconButton>
                 {openEditDialog && (
                     <EditController
                         openEditDialog={openEditDialog}

src/components/dashboard/roadItems/reports/ItemsReports/Search/FromDateController.jsx

@@ -13,7 +13,7 @@ const FromDateController = ({ control }) => {
                     name="from_date"
                     error={!!error}
                     value={value}
-                    label={'تاریخ فعالیت (از تاریخ)'}
+                    label={"تاریخ فعالیت (از تاریخ)"}
                     placeholder={"از تاریخ"}
                     setFieldValue={(name, newValue) => {
                         const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");

src/components/dashboard/roadItems/reports/ItemsReports/Search/ToDateController.jsx

@@ -15,7 +15,7 @@ const ToDateController = ({ control }) => {
                     minDate={minDate}
                     error={!!error}
                     value={value}
-                    label={'تاریخ فعالیت (تا تاریخ)'}
+                    label={"تاریخ فعالیت (تا تاریخ)"}
                     placeholder={"تا تاریخ"}
                     setFieldValue={(name, newValue) => {
                         const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");

src/components/dashboard/roadItems/reports/ItemsReports/index.jsx

@@ -52,8 +52,8 @@ const ReportPage = () => {
                     edare_name: "کل کشور",
                     sum: result.activities.length
                         ? result.activities
-                            .filter((report) => report.p === -1)
+                              .filter((report) => report.p === -1)
-                            .reduce((acc, report) => acc + (report.s || 0), 0)
+                              .reduce((acc, report) => acc + (report.s || 0), 0)
                         : 0,
                 };
                 itemsList.forEach((item) => {
@@ -82,7 +82,7 @@ const ReportPage = () => {
                     ],
                     filters: data,
                 });
-            } catch (e) { }
+            } catch (e) {}
         } else {
             try {
                 params.set("province_id", `${data.province_id}`);
@@ -92,8 +92,8 @@ const ReportPage = () => {
                     edare_name: "کل استان",
                     sum: result.activities.length
                         ? result.activities
-                            .filter((report) => report.c === -1)
+                              .filter((report) => report.c === -1)
-                            .reduce((acc, report) => acc + (report.s || 0), 0)
+                              .reduce((acc, report) => acc + (report.s || 0), 0)
                         : 0,
                 };
 
@@ -126,12 +126,12 @@ const ReportPage = () => {
                     ],
                     filters: data,
                 });
-            } catch (e) { }
+            } catch (e) {}
         }
     };
 
     useEffect(() => {
-        if (!userPermissions) return
+        if (!userPermissions) return;
         if (itemsList.length === 0) return;
         onSearchSubmit(defaultValues);
     }, [itemsList, userPermissions]);

src/components/dashboard/roadItems/reports/SubItemsReports/Search/FromDateController.jsx

@@ -13,7 +13,7 @@ const FromDateController = ({ control }) => {
                     name="from_date"
                     error={!!error}
                     value={value}
-                    label={'تاریخ فعالیت (از تاریخ)'}
+                    label={"تاریخ فعالیت (از تاریخ)"}
                     placeholder={"از تاریخ"}
                     setFieldValue={(name, newValue) => {
                         const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");

src/components/dashboard/roadItems/reports/SubItemsReports/Search/ToDateController.jsx

@@ -15,7 +15,7 @@ const ToDateController = ({ control }) => {
                     minDate={minDate}
                     error={!!error}
                     value={value}
-                    label={'تاریخ فعالیت (تا تاریخ)'}
+                    label={"تاریخ فعالیت (تا تاریخ)"}
                     placeholder={"تا تاریخ"}
                     setFieldValue={(name, newValue) => {
                         const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");

src/components/dashboard/roadItems/reports/SubItemsReports/index.jsx

@@ -166,7 +166,7 @@ const SubItemsReports = () => {
                     columns: createColumns(result.sub_items),
                     filters: data,
                 });
-            } catch (e) { }
+            } catch (e) {}
         } else {
             try {
                 params.set("province_id", `${data.province_id}`);
@@ -216,7 +216,7 @@ const SubItemsReports = () => {
     };
 
     useEffect(() => {
-        if (!userPermissions) return
+        if (!userPermissions) return;
         onSearchSubmit(defaultValues);
     }, [userPermissions]);
 

src/components/dashboard/roadItems/supervisor/SupervisorList.jsx

@@ -125,8 +125,8 @@ const SupervisorList = () => {
                                 props.dependencyFieldValue?.value === ""
                                     ? "empty"
                                     : loadingEdaratList
-                                        ? "loading"
+                                      ? "loading"
-                                        : props.filterParameters.value
+                                      : props.filterParameters.value
                             }
                             columnSelectOption={getColumnSelectOptions}
                         />
@@ -217,8 +217,8 @@ const SupervisorList = () => {
                                 props.dependencyFieldValue.value === ""
                                     ? "empty"
                                     : loadingSubItemsList
-                                        ? "loading"
+                                      ? "loading"
-                                        : props.filterParameters.value
+                                      : props.filterParameters.value
                             }
                             columnSelectOption={getColumnSelectOptions}
                         />

src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/index.jsx

@@ -1,11 +1,25 @@
 "use client";
 
-import { Dialog } from "@mui/material";
+import { Dialog, IconButton } from "@mui/material";
 import PatrolForms from "./PatrolForms";
+import CloseIcon from "@mui/icons-material/Close";
 
 const CreatePatrol = ({ open, setOpen, mutate }) => {
     return (
         <Dialog open={open} fullWidth maxWidth="md">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
             {open && <PatrolForms setOpen={setOpen} mutate={mutate} />}
         </Dialog>
     );

src/components/dashboard/roadPatrols/reports/Search/FromDateController.jsx

@@ -13,7 +13,7 @@ const FromDateController = ({ control }) => {
                     name="from_date"
                     error={!!error}
                     value={value}
-                    label={'تاریخ شروع (از تاریخ)'}
+                    label={"تاریخ شروع (از تاریخ)"}
                     placeholder={"از تاریخ"}
                     setFieldValue={(name, newValue) => {
                         const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");

src/components/dashboard/roadPatrols/reports/Search/ToDateController.jsx

@@ -15,7 +15,7 @@ const ToDateController = ({ control }) => {
                     minDate={minDate}
                     error={!!error}
                     value={value}
-                    label={'تاریخ شروع (تا تاریخ)'}
+                    label={"تاریخ شروع (تا تاریخ)"}
                     placeholder={"تا تاریخ"}
                     setFieldValue={(name, newValue) => {
                         const formattedDate = moment(new Date(newValue)).locale("en").format("YYYY-MM-DD");

src/components/dashboard/roadPatrols/reports/index.jsx

@@ -66,7 +66,7 @@ const ReportPage = () => {
                     ],
                     filters: data,
                 });
-            } catch (e) { }
+            } catch (e) {}
         } else {
             try {
                 params.set("province_id", `${data.province_id}`);
@@ -90,12 +90,12 @@ const ReportPage = () => {
                     ],
                     filters: data,
                 });
-            } catch (e) { }
+            } catch (e) {}
         }
     };
 
     useEffect(() => {
-        if (!userPermissions) return
+        if (!userPermissions) return;
         onSearchSubmit(defaultValues);
     }, [userPermissions]);
 

src/components/dashboard/roadPatrols/supervisor/SupervisorList.jsx

@@ -119,8 +119,8 @@ const SupervisorList = () => {
                                 props.dependencyFieldValue?.value === ""
                                     ? "empty"
                                     : loadingEdaratList
-                                        ? "loading"
+                                      ? "loading"
-                                        : props.filterParameters.value
+                                      : props.filterParameters.value
                             }
                             columnSelectOption={getColumnSelectOptions}
                         />

src/core/utils/pageMenu.js

@@ -487,7 +487,7 @@ export const pageMenu = [
                 type: "page",
                 route: "/dashboard/damages/report",
                 icon: <AssessmentIcon sx={{ width: "inherit", height: "inherit" }} />,
-                permissions: ["show-receipt", 'show-receipt-province'],
+                permissions: ["show-receipt", "show-receipt-province"],
             },
         ],
     },

src/lib/hooks/usePersianInput.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
 function usePersianInput(inputRef, onChange) {
     useEffect(() => {
         const input = inputRef.current;
@@ -6,7 +6,7 @@ function usePersianInput(inputRef, onChange) {
 
         const handleInput = (event) => {
             const originalValue = event.target.value;
-            const filteredValue = originalValue.replace(/[A-Za-z]/g, '');
+            const filteredValue = originalValue.replace(/[A-Za-z]/g, "");
             if (filteredValue !== originalValue) {
                 event.target.value = filteredValue;
                 if (onChange) {
@@ -19,15 +19,15 @@ function usePersianInput(inputRef, onChange) {
 
         const handleKeyDown = (event) => {
             const controlKeys = [
-                'Backspace',
+                "Backspace",
-                'Delete',
+                "Delete",
-                'Tab',
+                "Tab",
-                'Escape',
+                "Escape",
-                'Enter',
+                "Enter",
-                'ArrowLeft',
+                "ArrowLeft",
-                'ArrowRight',
+                "ArrowRight",
-                'ArrowUp',
+                "ArrowUp",
-                'ArrowDown'
+                "ArrowDown",
             ];
             if (controlKeys.includes(event.key)) return;
 
@@ -36,12 +36,12 @@ function usePersianInput(inputRef, onChange) {
             }
         };
 
-        input.addEventListener('input', handleInput);
+        input.addEventListener("input", handleInput);
-        input.addEventListener('keydown', handleKeyDown);
+        input.addEventListener("keydown", handleKeyDown);
 
         return () => {
-            input.removeEventListener('input', handleInput);
+            input.removeEventListener("input", handleInput);
-            input.removeEventListener('keydown', handleKeyDown);
+            input.removeEventListener("keydown", handleKeyDown);
         };
     }, [inputRef, onChange]);
 }