refactor: add gender selection to Form component and update DefaultSelect for improved option handling

app/component/selectors/DefaultSelect.js

@@ -10,19 +10,19 @@ function DefaultSelect({ list, value, updateData, label, error, name }) {
       value={value || ""}
       getOptionLabel={(option) => {
         if (typeof option === "string") return option;
-        return option?.name || option?.label || "";
+        return option?.title || option?.name || option?.label || "";
       }}
       className="!w-full !rounded-lg auto-complete-selector"
       onChange={(_, newValue) => {
-        updateData(name, newValue?.label || newValue || "");
+        updateData(name, newValue?.id || newValue?.label || newValue || "");
       }}
       sx={{
         ...styleTextSelectRight,
         // Hide Icon Number
         "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
-          {
+        {
-            display: "none",
+          display: "none",
-          },
+        },
         "& input[type=number]": {
           MozAppearance: "textfield",
         },
@@ -43,13 +43,13 @@ function DefaultSelect({ list, value, updateData, label, error, name }) {
             : "1px solid #D7D7D7 !important",
         },
         "& .MuiInput-underline:hover:not(.Mui-disabled):before, .MuiOutlinedInput-notchedOutline":
-          {
+        {
-            borderColor: error ? "red !important" : "#D7D7D7 !important",
+          borderColor: error ? "red !important" : "#D7D7D7 !important",
-          },
+        },
         "& .muirtl-1kiro5a-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline":
-          {
+        {
-            border: "1px solid #5559CE !important",
+          border: "1px solid #5559CE !important",
-          },
+        },
       }}
       renderOption={(props, option) => (
         <Button
@@ -58,7 +58,7 @@ function DefaultSelect({ list, value, updateData, label, error, name }) {
           key={option.id || props.id}
           className="!flex !justify-start !p-[8px] !text-start !text-[#A1A1A1] hover:dark:!bg-[#35343D] !bg-[#FFF] dark:!bg-[#1F1D2B]"
         >
-          {option.name || option.label}
+          {option.title || option.name || option.label}
         </Button>
       )}
       renderInput={(params) => (

components/appointment/detail/Form.js

@@ -40,6 +40,22 @@ function Form({ changeData, insurance, supplementaryInsurance, data, isForAnothe
       <Content title="نام خانوادگی">
         <EditField changeData={changeData} data={data?.family} name="family" />
       </Content>
+      <Content title="جنسیت">
+        <DefaultSelect
+          updateData={(name, val) => changeData(val, "value", name)}
+          label="جنسیت"
+          name="gender"
+          list={[
+            { id: "male", title: "مرد" },
+            { id: "female", title: "زن" },
+          ]}
+          value={
+            data?.gender?.value
+              ? { id: data.gender.value, title: data.gender.value === "male" ? "مرد" : "زن" }
+              : null
+          }
+        />
+      </Content>
       <Content title="نوع بیمه">
         <DefaultSelect
           updateData={(name, val) => changeData(val, "value", name)}

components/appointment/index.js

@@ -9,6 +9,8 @@ const defaultData = {
   phone: { value: "", isEdit: false },
   national_code: { value: "", isEdit: true },
   name: { value: "", isEdit: true },
+  family: { value: "", isEdit: true },
+  gender: { value: "", isEdit: true },
   basic_insurance: { value: "", isEdit: true },
 };
 
@@ -58,7 +60,9 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
                 value: res.national_code || "",
                 isEdit: res.national_code ? false : true,
               },
-              name: { value: `${res.name} ${res.family}`, isEdit: true },
+              name: { value: res.name || "", isEdit: true },
+              family: { value: res.family || "", isEdit: true },
+              gender: { value: res.gender || "", isEdit: true },
               basic_insurance: {
                 value: res.basic_insurance,
                 isEdit: true,
@@ -68,7 +72,17 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
             setPrevData(newData);
           }
         } catch (error) {
-          // خطا در دریافت پروفایل
+          // اگر 404 بود، فقط شماره موبایل را نگه می‌داریم و بقیه قابل ویرایش می‌شوند
+          if (error?.response?.status === 404) {
+            setData(prev => ({
+              ...prev,
+              national_code: { value: "", isEdit: true },
+              name: { value: "", isEdit: true },
+              family: { value: "", isEdit: true },
+              gender: { value: "", isEdit: true },
+              basic_insurance: { value: "", isEdit: true },
+            }));
+          }
         } finally {
           setIsLoading(false);
         }
@@ -100,7 +114,9 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
                   value: res.national_code || "",
                   isEdit: res.national_code ? false : true,
                 },
-                name: { value: `${res.name} ${res.family}`, isEdit: true },
+                name: { value: res.name || "", isEdit: true },
+                family: { value: res.family || "", isEdit: true },
+                gender: { value: res.gender || "", isEdit: true },
                 basic_insurance: {
                   value: res.basic_insurance,
                   isEdit: true,
@@ -110,7 +126,17 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
               setPrevData(newData);
             }
           } catch (error) {
-            // خطا در دریافت پروفایل
+            // اگر 404 بود، فقط شماره موبایل را نگه می‌داریم و بقیه قابل ویرایش می‌شوند
+            if (error?.response?.status === 404) {
+              setData(prev => ({
+                ...prev,
+                national_code: { value: "", isEdit: true },
+                name: { value: "", isEdit: true },
+                family: { value: "", isEdit: true },
+                gender: { value: "", isEdit: true },
+                basic_insurance: { value: "", isEdit: true },
+              }));
+            }
           }
         }
       }