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

components/appointment/detail/Form.js

@@ -2,7 +2,7 @@ import Content from "./Content";
 import EditField from "../../../app/component/fields/EditField";
 import DefaultSelect from "@/app/component/selectors/DefaultSelect";
 
-function Form({ changeData, insurance, supplementaryInsurance, data, isForAnother }) {
+function Form({ changeData, insurance, supplementaryInsurance, data, isForAnother, errors = {} }) {
   const findBasicInsuranceVal = () => {
     return insurance?.find(
       (g) =>
@@ -25,20 +25,21 @@ function Form({ changeData, insurance, supplementaryInsurance, data, isForAnothe
         justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"
     >
       <Content title="شماره موبایل" isConfirmed={isForAnother ? false : true}>
-        <EditField changeData={changeData} data={data?.phone} name="phone" />
+        <EditField changeData={changeData} data={data?.phone} name="phone" error={errors?.phone} />
       </Content>
       <Content title="کد ملی">
         <EditField
           changeData={changeData}
           data={data?.national_code}
           name="national_code"
+          error={errors?.national_code}
         />
       </Content>
       <Content title="نام">
-        <EditField changeData={changeData} data={data?.name} name="name" />
+        <EditField changeData={changeData} data={data?.name} name="name" error={errors?.name} />
       </Content>
       <Content title="نام خانوادگی">
-        <EditField changeData={changeData} data={data?.family} name="family" />
+        <EditField changeData={changeData} data={data?.family} name="family" error={errors?.family} />
       </Content>
       <Content title="جنسیت">
         <DefaultSelect
@@ -54,8 +55,12 @@ function Form({ changeData, insurance, supplementaryInsurance, data, isForAnothe
               ? { id: data.gender.value, title: data.gender.value === "male" ? "مرد" : "زن" }
               : null
           }
+          error={errors?.gender}
         />
       </Content>
+      <Content title="شماره بیمه">
+        <EditField changeData={changeData} data={data?.insurance_id} name="insurance_id" error={errors?.insurance_id} />
+      </Content>
       <Content title="نوع بیمه">
         <DefaultSelect
           updateData={(name, val) => changeData(val, "value", name)}
@@ -63,6 +68,7 @@ function Form({ changeData, insurance, supplementaryInsurance, data, isForAnothe
           name="basic_insurance"
           list={insurance}
           value={findBasicInsuranceVal()}
+          error={errors?.basic_insurance}
         />
       </Content>
       <Content title="بیمه تکمیلی">
@@ -72,6 +78,7 @@ function Form({ changeData, insurance, supplementaryInsurance, data, isForAnothe
           name="supplementary_insurance"
           list={supplementaryInsurance}
           value={findSupplementaryInsuranceVal()}
+          error={errors?.supplementary_insurance}
         />
       </Content>
     </div>