feat(userAccount): enhance user profile handling with avatar upload and additional user data

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

@@ -25,7 +25,7 @@ function Form({ insurance, errors, changeData, information }) {
           name="work_phone"
           isTransparent={true}
           changeData={changeData}
-          data={parsedUserInfo?.username}
+          data={parsedUserInfo?.mobile_number ?? parsedUserInfo?.username}
         />
       </Content>
       <Content

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

@@ -1,8 +1,10 @@
 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 } from "@/helper";
+import { changeDateType, getParsedUserInfo, imageUrl } from "@/helper";
 import { disease } from "./form/disease";
 import LoadingComponent from "@/app/component/LoadingComponent";
 
@@ -11,6 +13,26 @@ 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();
@@ -101,6 +123,25 @@ 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}