feat(userAccount): improve user profile handling with avatar upload and dynamic display name

components/dashboard/userAccount/Head.js

@@ -1,11 +1,21 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import CalendarAdD from "@/components/icons/CalendarAdD";
 import CardTickD from "@/components/icons/CardTickD";
 import { getParsedUserInfo } from "@/helper";
 import Image from "next/image";
 
 function Head({ user }) {
-  const userInfo = getParsedUserInfo() || {};
-  const displayName = userInfo.realName || user?.name || "کاربر";
+  // مقدار اولیه از prop سرور تا SSR و کلاینت یکسان باشند (جلوگیری از hydration mismatch)؛
+  // سپس در کلاینت نام واقعی از کوکی userInfo خوانده می‌شود.
+  const [displayName, setDisplayName] = useState(user?.name || "کاربر");
+
+  useEffect(() => {
+    const userInfo = getParsedUserInfo();
+    const name = userInfo?.realName || user?.name;
+    if (name) setDisplayName(name);
+  }, [user?.name]);
 
   return (
     <div className="hidden md:flex flex-col lg:flex-row w-full items-stretch justify-center gap-[12px] lg:gap-[24px]">

components/dashboard/userAccount/detailUser/information/component/Field.js

@@ -8,6 +8,7 @@ function Field({
   icon,
   placeholder,
   data,
+  value,
   name,
   iconGray,
   error,
@@ -16,12 +17,18 @@ function Field({
   props,
   disable,
 }) {
+  // وقتی value پاس داده شود فیلد controlled است (برای مقادیر فقط‌خواندنی مثل موبایل)؛
+  // در غیر این صورت رفتار قبلی (uncontrolled با defaultValue) حفظ می‌شود.
+  const controlled =
+    value !== undefined
+      ? { value: value ?? "" }
+      : { defaultValue: data };
+
   return (
     <div className="relative w-full">
       <TextField
         {...props}
-        // value={data}
-        defaultValue={data}
+        {...controlled}
         disabled={disable}
         type={type || "text"}
         placeholder={placeholder || ""}

components/dashboard/userAccount/detailUser/information/form/index.js

@@ -19,13 +19,18 @@ function Form({ insurance, errors, changeData, information }) {
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-[24px] gap-y-[10px]">
       <Content title="شماره موبایل" isConfirmed={true}>
         <Field
-          type="number"
+          type="text"
           disable={true}
           iconGray={true}
-          name="work_phone"
+          name="mobile_number"
           isTransparent={true}
           changeData={changeData}
-          data={parsedUserInfo?.mobile_number ?? parsedUserInfo?.username}
+          value={
+            parsedUserInfo?.mobile_number ??
+            parsedUserInfo?.username ??
+            information?.mobile_number ??
+            ""
+          }
         />
       </Content>
       <Content
@@ -43,7 +48,8 @@ function Form({ insurance, errors, changeData, information }) {
           isTransparent={true}
           changeData={changeData}
           data={information?.national_code}
-          disable={information?.prev_data}
+          // کد ملی فقط وقتی از قبل مقدار دارد قفل می‌شود؛ اگر خالی است قابل افزودن باشد.
+          disable={Boolean(information?.national_code)}
         />
       </Content>
       <Content req={true} error={errors?.name} title="نام" isConfirmed={false}>

components/dashboard/userAccount/detailUser/information/index.js

@@ -1,10 +1,8 @@
 import { useEffect, useState } from "react";
-import Image from "next/image";
-import { toast } from "react-toastify";
 import Form from "./form";
 import { request } from "@/services/response";
 import ButtonSendData from "./ButtonSendData";
-import { changeDateType, getParsedUserInfo, imageUrl } from "@/helper";
+import { changeDateType, getParsedUserInfo } from "@/helper";
 import { disease } from "./form/disease";
 import LoadingComponent from "@/app/component/LoadingComponent";
 
@@ -13,26 +11,6 @@ function Information({ information, setInformation }) {
   const [insurance, setInsurance] = useState();
   const [errors, setErrors] = useState({});
   const [loadingInfo, setLoadingInfo] = useState(true);
-  const [avatarUploading, setAvatarUploading] = useState(false);
-
-  const handleAvatarChange = async (e) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    setAvatarUploading(true);
-    try {
-      const res = await request.uploadUserAvatar(file);
-      const url = res?.data?.avatar || res?.data?.url;
-      if (url) {
-        setInformation((prev) => ({ ...(prev || {}), avatar: url }));
-        toast.success("عکس پروفایل به‌روزرسانی شد");
-      }
-    } catch {
-      toast.error("خطا در آپلود عکس");
-    } finally {
-      setAvatarUploading(false);
-      e.target.value = "";
-    }
-  };
 
   useEffect(() => {
     const parsedUserInfo = getParsedUserInfo();
@@ -51,11 +29,9 @@ function Information({ information, setInformation }) {
           setLoadingInfo(false);
           const profile = res?.data?.data;
 
-          const hasProfileData = Boolean(
-            profile && (profile.label || profile.family || profile.national_code)
-          );
-
-          if (hasProfileData) {
+          // ملاک «پروفایل از قبل وجود دارد» وجود uuid پروفایل است (نه پر بودن فیلدها)؛
+          // در غیر این صورت برای پروفایلِ خالیِ موجود، POST می‌زد و 409 می‌گرفت.
+          if (profile?.uuid) {
             let changedData = { ...profile };
             // backend stores the first name in `label`; the form binds to `name`
             changedData.name = profile?.label ?? "";
@@ -75,7 +51,6 @@ function Information({ information, setInformation }) {
             setInformation(changedData);
           } else {
             setInformation({
-              uuid: profile?.uuid,
               prev_data: false,
               other: {
                 disease: disease,
@@ -123,25 +98,6 @@ function Information({ information, setInformation }) {
   return (
     <LoadingComponent loading={loadingInfo}>
       <div className="opacity-page">
-        <div className="flex items-center gap-[16px] mb-[24px]">
-          <Image
-            src={imageUrl(information?.avatar, "/assets/images/profile-user.png")}
-            alt="avatar"
-            width={72}
-            height={72}
-            className="w-[72px] h-[72px] rounded-full object-cover border border-[#EFEFEF]"
-          />
-          <label className="cursor-pointer text-[#5559CE] text-[14px] font-medium">
-            {avatarUploading ? "در حال آپلود..." : "تغییر عکس"}
-            <input
-              type="file"
-              accept="image/*"
-              hidden
-              disabled={avatarUploading}
-              onChange={handleAvatarChange}
-            />
-          </label>
-        </div>
         <Form
           errors={errors}
           insurance={insurance}