working on uploading image

src/core/components/Profile/Update/form.jsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { Autocomplete, Avatar, Backdrop, Badge, Box, Grid, TextField } from "@mui/material";
+import StyledForm from "@/core/components/StyledForm";
+import useRequest from "@/lib/hooks/useRequest";
+import { Controller, useForm } from "react-hook-form";
+import { useAuth } from "@/lib/contexts/auth";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import DataSAverOn from "@mui/icons-material/DataSAverOn";
+import { useState } from "react";
+
+const degreeItems = ["دیپلم", "کارشناسی", "کارشناسی ارشد", "دکترا"];
+
+const Form = () => {
+    const request = useRequest();
+    const { user } = useAuth();
+    const [uploadBackDrop, setUploadBackDrop] = useState(false);
+    const defaultValues = {
+        first_name: user.data.first_name,
+        last_name: user.data.last_name,
+        degree: user.data.degree,
+        major: user.data.major,
+        mobile: user.data.mobile,
+        avatar: user.data.avatar,
+    };
+
+    console.log("defaultValues", defaultValues);
+
+    const {
+        control,
+        watch,
+        register,
+        handleSubmit,
+        setValue,
+        formState: { isSubmitting },
+    } = useForm({ defaultValues: defaultValues });
+
+    return (
+        <StyledForm id={"UpdateProfileForm"}>
+            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", mb: 4, position: "relative" }}>
+                <Badge
+                    overlap="circular"
+                    anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+                    badgeContent={<AddCircleIcon sx={{ fontSize: "2rem" }} color="primary" />}
+                >
+                    <Avatar
+                        onMouseEnter={() => setUploadBackDrop(true)}
+                        onMouseLeave={() => setUploadBackDrop(false)}
+                        alt={watch("first_name")}
+                        src={`${process.env.NEXT_PUBLIC_API_URL}/${watch("avatar")}`}
+                        sx={{ width: 150, height: 150, border: "1px solid #e1e1e1", cursor: "pointer" }}
+                    />
+                </Badge>
+                <Backdrop
+                    sx={{
+                        color: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1,
+                        position: "absolute", width: 150, height: 150,
+                        marginLeft: "auto", marginRight: "auto",
+                        borderRadius: "50%",
+                    }}
+                    open={uploadBackDrop}
+                >
+                    <DataSAverOn sx={{ fontSize: "4rem" }} color="inherit" />
+                </Backdrop>
+            </Box>
+            <Grid container columns={{ xs: 1, sm: 2 }} spacing={2}>
+                <Grid item xs={1}>
+                    <TextField
+                        autoComplete="off"
+                        {...register("first_name")}
+                        label="نام"
+                        size="small"
+                        fullWidth
+                        type="text"
+                    />
+                </Grid>
+                <Grid item xs={1}>
+                    <TextField
+                        autoComplete="off"
+                        {...register("last_name")}
+                        label="نام خانوادگی"
+                        size="small"
+                        fullWidth
+                        type="text"
+                    />
+                </Grid>
+                <Grid item xs={1}>
+                    <TextField
+                        autoComplete="off"
+                        {...register("major")}
+                        label="رشته تحصیلی"
+                        size="small"
+                        fullWidth
+                        type="text"
+                    />
+                </Grid>
+                <Grid item xs={1}>
+                    <Controller
+                        name="degree"
+                        control={control}
+                        render={({ field: { onChange, value } }) => (
+                            <Autocomplete
+                                size="small"
+                                disablePortal
+                                value={value}
+                                onChange={(event, newValue) => {
+                                    onChange(newValue);
+                                }}
+                                options={degreeItems}
+                                renderInput={(params) => (
+                                    <TextField autoComplete="off" fullWidth {...params} label="مدرک تحصیلی" />
+                                )}
+                            />
+                        )}
+                    />
+                </Grid>
+                <Grid item xs={2}>
+                    <TextField
+                        autoComplete="off"
+                        {...register("mobile")}
+                        label="موبایل"
+                        size="small"
+                        fullWidth
+                        type="text"
+                    />
+                </Grid>
+            </Grid>
+        </StyledForm>
+    );
+};
+export default Form;

src/core/components/Profile/Update/index.jsx

@@ -12,6 +12,7 @@ import {
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import CloseIcon from "@mui/icons-material/Close";
+import Form from "./form";
 
 const Update = ({ open, setOpen }) => {
     const theme = useTheme();
@@ -37,7 +38,7 @@ const Update = ({ open, setOpen }) => {
                 </IconButton>
             </Box>
             <DialogContent dividers>
-                form will come here
+                <Form />
             </DialogContent>
             <DialogActions>
                 <Button autoFocus variant="outlined" onClick={() => {

src/core/components/Profile/index.jsx

@@ -7,11 +7,18 @@ import VpnKeyIcon from "@mui/icons-material/VpnKey";
 import { useState } from "react";
 import Update from "@/core/components/Profile/Update";
 import ChangePass from "@/core/components/Profile/ChangePass";
+import { useAuth } from "@/lib/contexts/auth";
 
 const Profile = () => {
+    const { getUser } = useAuth();
     const [openUpdate, setOpenUpdate] = useState(false);
     const [openChangePass, setOpenChangePass] = useState(false);
 
+    const openUpdateProfile = () => {
+        getUser();
+        setOpenUpdate(true);
+    };
+
     return (
         <>
             <Stack sx={{
@@ -45,9 +52,7 @@ const Profile = () => {
                 </Box>
                 <Box sx={{ display: "flex", justifyContent: "center" }}>
                     <Tooltip title="ویرایش پروفایل" arrow>
-                        <IconButton aria-label="ویرایش پروفایل" color="success" onClick={() => {
-                            setOpenUpdate(true);
-                        }}>
+                        <IconButton aria-label="ویرایش پروفایل" color="success" onClick={openUpdateProfile}>
                             <ModeEditIcon />
                         </IconButton>
                     </Tooltip>

src/core/utils/routes.js

@@ -1,6 +1,6 @@
 const api = process.env.NEXT_PUBLIC_API_URL;
 
-export const GET_USER_ROUTE = api + "/webapi/user/get-permission";
+export const GET_USER_ROUTE = api + "/api/v3/profile/info";
 export const GET_LOGIN_ROUTE = api + "/login_dev";
 export const GET_INQUIRY_PRIVACY_FENCING_ROUTE = api + "/api/v3/harim/divarkeshi";
 export const GET_PERMISSIONS_ROUTE = api + "/webapi/user/get-permission";