refactor: enhance form validation and error handling in EditField, DefaultSelect, and Form components

app/component/fields/EditField.js

@@ -2,6 +2,21 @@ import EditGrayA from "@/components/icons/EditGrayA";
 import EditOrangeA from "@/components/icons/EditOrangeA";
 import { Button, TextField } from "@mui/material";
 
+// تابع تبدیل اعداد فارسی و عربی به انگلیسی
+const convertPersianToEnglish = (str) => {
+  const persianNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
+  const arabicNumbers = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
+
+  let result = str;
+  for (let i = 0; i < 10; i++) {
+    const regex = new RegExp(persianNumbers[i], 'g');
+    result = result.replace(regex, i.toString());
+    const arabicRegex = new RegExp(arabicNumbers[i], 'g');
+    result = result.replace(arabicRegex, i.toString());
+  }
+  return result;
+};
+
 function EditField({
   changeData,
   multiline,
@@ -14,7 +29,31 @@ function EditField({
   noDisable,
   type,
   props,
+  error,
 }) {
+  const handleChange = (e) => {
+    let inputValue = e.target.value;
+
+    // اگر فیلد کد ملی یا شماره موبایل یا شماره بیمه است، فقط اعداد انگلیسی
+    if (name === "national_code" || name === "phone" || name === "insurance_id" || type === "tel") {
+      // ابتدا اعداد فارسی و عربی را به انگلیسی تبدیل کن
+      inputValue = convertPersianToEnglish(inputValue);
+      // فقط اعداد انگلیسی را نگه دار
+      inputValue = inputValue.replace(/[^0-9]/g, '');
+
+      // محدودیت تعداد ارقام
+      if (name === "national_code" && inputValue.length > 10) {
+        inputValue = inputValue.slice(0, 10);
+      } else if (name === "phone" && inputValue.length > 11) {
+        inputValue = inputValue.slice(0, 11);
+      } else if (name === "insurance_id" && inputValue.length > 16) {
+        inputValue = inputValue.slice(0, 16);
+      }
+    }
+
+    changeData(inputValue, "value", name);
+  };
+
   return (
     <div className="relative w-full">
       <TextField
@@ -25,12 +64,11 @@ function EditField({
         value={data?.value || ""}
         placeholder={placeholder || ""}
         disabled={noDisable ? false : !data?.isEdit}
-        className={`!w-full res-field-account dark:!bg-transparent ${
-          isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
-        }`}
-        onChange={(e) => {
-          changeData(e.target.value, "value", name);
-        }}
+        error={!!error}
+        helperText={error || ""}
+        className={`!w-full res-field-account dark:!bg-transparent ${isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"}
+          }`}
+        onChange={handleChange}
         sx={{
           "& .MuiFormLabel-root": {
             top: "-4px !important",
@@ -43,6 +81,10 @@ function EditField({
             padding: "0 !important",
             borderRadius: "8px !important",
           },
+          "& .MuiFormHelperText-root": {
+            marginLeft: "0",
+            marginRight: "14px",
+          },
           ".Mui-focused": {
             "& .MuiOutlinedInput-notchedOutline": {
               border: "1px solid #5559CE !important",
@@ -50,17 +92,17 @@ function EditField({
             },
           },
           "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
-            {
-              display: "none",
-            },
+          {
+            display: "none",
+          },
         }}
       />
       <Button
         className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
                     ${multiline ? "!top-[24px]" : "!top-1/2"}`}
-        // onClick={() => {
-        // changeData(!data.isEdit, "isEdit", name);
-        // }}
+      // onClick={() => {
+      // changeData(!data.isEdit, "isEdit", name);
+      // }}
       >
         {icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
       </Button>