From 53db465a24d727aaeedc5a3578f0247cbb37cb49 Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Tue, 30 Sep 2025 17:31:02 +0330
Subject: [PATCH] feat(profile): display dynamic user data from context

The previous profile page was a static placeholder using hardcoded data. This commit refactors the entire component to fetch and display real user information from the `useUser` context, making the page functional.

Key changes include:
- Replaced static `useState` with the `useUser` context hook for data fetching.
- Completely overhauled the UI for a cleaner, more organized, and responsive layout.
- Displays dynamic user details such as full name, email, phone number, and join date.
- Implemented a `Status` component to visually indicate email and phone verification status.
- Added an error fallback for the profile image, showing a default user icon if the image fails to load.
- Removed the previous local state management and image upload logic.
---
 src/app/profile/page.tsx                      | 231 ++++++++----------
 .../Layouts/header/user-info/index.tsx        |  40 ++-
 src/components/ui/Status.tsx                  |   6 +-
 3 files changed, 124 insertions(+), 153 deletions(-)

diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index 8aa724e..5f70706 100644
--- a/src/app/profile/page.tsx
+++ b/src/app/profile/page.tsx
@@ -1,148 +1,125 @@
 "use client";
 
+import { CheckIcon, CrossIcon, UserIcon } from "@/assets/icons";
+import Status from "@/components/ui/Status";
+import { useUser } from "@/contexts";
+import { formatPhoneNumber, unixToDate } from "@/utils/shared";
 import Image from "next/image";
-
 import { useState } from "react";
-import { CameraIcon } from "./_components/icons";
-import { SocialAccounts } from "./_components/social-accounts";
 
 export default function Page() {
-  const [data, setData] = useState({
-    name: "Danish Heilium",
-    profilePhoto: "/images/user/user-03.png",
-    coverPhoto: "/images/cover/cover-01.png",
-  });
+  const { user: data } = useUser();
+  const [imageError, setImageError] = useState(false);
 
-  const handleChange = (e: any) => {
-    if (e.target.name === "profilePhoto") {
-      const file = e.target?.files[0];
-
-      setData({
-        ...data,
-        profilePhoto: file && URL.createObjectURL(file),
-      });
-    } else if (e.target.name === "coverPhoto") {
-      const file = e.target?.files[0];
-
-      setData({
-        ...data,
-        coverPhoto: file && URL.createObjectURL(file),
-      });
-    } else {
-      setData({
-        ...data,
-        [e.target.name]: e.target.value,
-      });
-    }
-  };
+  const hasProfileImage = data?.profile_image && !imageError;
 
   return (
-    <div className="mx-auto w-full max-w-[970px]">
-      <div className="overflow-hidden rounded-[10px] bg-white shadow-1 dark:bg-gray-dark dark:shadow-card">
-        <div className="relative z-20 h-35 md:h-65">
-          <Image
-            src={data?.coverPhoto}
-            alt="profile cover"
-            className="h-full w-full rounded-tl-[10px] rounded-tr-[10px] object-cover object-center"
-            width={970}
-            height={260}
-            style={{
-              width: "auto",
-              height: "auto",
-            }}
-          />
-          <div className="absolute bottom-1 right-1 z-10 xsm:bottom-4 xsm:right-4">
-            <label
-              htmlFor="cover"
-              className="flex cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary px-[15px] py-[5px] text-body-sm font-medium text-white hover:bg-opacity-90"
-            >
-              <input
-                type="file"
-                name="coverPhoto"
-                id="coverPhoto"
-                className="sr-only"
-                onChange={handleChange}
-                accept="image/png, image/jpg, image/jpeg"
+    <div className="mx-auto w-full max-w-4xl rounded-lg bg-white p-6 shadow-default dark:bg-gray-dark">
+      <div className="relative h-48 w-full rounded-t-lg bg-gray-200 dark:bg-gray-700">
+        <Image
+          src={"/images/cover/cover-01.png"}
+          alt="Cover"
+          layout="fill"
+          objectFit="cover"
+          className="rounded-t-lg"
+        />
+        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 transform">
+          <div className="relative flex h-32 w-32 items-center justify-center overflow-hidden rounded-full border-4 border-white bg-gray-200 dark:border-gray-dark dark:bg-gray-700">
+            {hasProfileImage ? (
+              <Image
+                onError={() => setImageError(true)}
+                alt="Profile"
+                src={data.profile_image!}
+                layout="fill"
+                objectFit="cover"
+                className="rounded-full"
               />
-
-              <CameraIcon />
-
-              <span>Edit</span>
-            </label>
+            ) : (
+              <UserIcon className="h-16 w-16 text-gray-400 dark:text-gray-500" />
+            )}
           </div>
         </div>
-        <div className="px-4 pb-6 text-center lg:pb-8 xl:pb-11.5">
-          <div className="relative z-30 mx-auto -mt-22 h-30 w-full max-w-30 rounded-full bg-white/20 p-1 backdrop-blur sm:h-44 sm:max-w-[176px] sm:p-3">
-            <div className="relative drop-shadow-2">
-              {data?.profilePhoto && (
-                <>
-                  <Image
-                    src={data?.profilePhoto}
-                    width={160}
-                    height={160}
-                    className="overflow-hidden rounded-full"
-                    alt="profile"
-                  />
+      </div>
 
-                  <label
-                    htmlFor="profilePhoto"
-                    className="absolute bottom-0 right-0 flex size-8.5 cursor-pointer items-center justify-center rounded-full bg-primary text-white hover:bg-opacity-90 sm:bottom-2 sm:right-2"
-                  >
-                    <CameraIcon />
+      <div className="mt-16 text-center">
+        <h1 className="text-2xl font-bold text-dark dark:text-white">
+          {data?.full_name}
+        </h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          @{data?.username}
+        </p>
+      </div>
 
-                    <input
-                      type="file"
-                      name="profilePhoto"
-                      id="profilePhoto"
-                      className="sr-only"
-                      onChange={handleChange}
-                      accept="image/png, image/jpg, image/jpeg"
-                    />
-                  </label>
-                </>
-              )}
+      <div className="mt-6 border-t border-stroke pt-6 dark:border-stroke-dark">
+        <h2 className="mb-4 text-lg font-semibold text-dark dark:text-white">
+          User Information
+        </h2>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div>
+            <p className="font-medium text-dark dark:text-white">Email</p>
+            <p className="text-gray-600 dark:text-gray-300">{data?.email}</p>
+          </div>
+          <div>
+            <p className="font-medium text-dark dark:text-white">Phone</p>
+            <p className="text-gray-600 dark:text-gray-300">
+              {formatPhoneNumber(data?.phone)}
+            </p>
+          </div>
+          <div>
+            <p className="font-medium text-dark dark:text-white">Department</p>
+            <p className="text-gray-600 dark:text-gray-300">
+              {data?.department}
+            </p>
+          </div>
+          <div>
+            <p className="font-medium text-dark dark:text-white">Position</p>
+            <p className="text-gray-600 dark:text-gray-300">{data?.position}</p>
+          </div>
+          <div>
+            <p className="font-medium text-dark dark:text-white">Role</p>
+            <p className="capitalize text-gray-600 dark:text-gray-300">
+              {data?.role}
+            </p>
+          </div>
+          <div>
+            <p className="font-medium text-dark dark:text-white">Status</p>
+            <div className="w-fit">
+              <Status status={data?.status}>{data?.status}</Status>
             </div>
           </div>
-          <div className="mt-4">
-            <h3 className="mb-1 text-heading-6 font-bold text-dark dark:text-white">
-              {data?.name}
-            </h3>
-            <p className="font-medium">Ui/Ux Designer</p>
-            <div className="mx-auto mb-5.5 mt-5 grid max-w-[370px] grid-cols-3 rounded-[5px] border border-stroke py-[9px] shadow-1 dark:border-dark-3 dark:bg-dark-2 dark:shadow-card">
-              <div className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-dark-3 xsm:flex-row">
-                <span className="font-medium text-dark dark:text-white">
-                  259
-                </span>
-                <span className="text-body-sm">Posts</span>
-              </div>
-              <div className="flex flex-col items-center justify-center gap-1 border-r border-stroke px-4 dark:border-dark-3 xsm:flex-row">
-                <span className="font-medium text-dark dark:text-white">
-                  129K
-                </span>
-                <span className="text-body-sm">Followers</span>
-              </div>
-              <div className="flex flex-col items-center justify-center gap-1 px-4 xsm:flex-row">
-                <span className="font-medium text-dark dark:text-white">
-                  2K
-                </span>
-                <span className="text-body-sm-sm">Following</span>
-              </div>
-            </div>
+        </div>
+      </div>
 
-            <div className="mx-auto max-w-[720px]">
-              <h4 className="font-medium text-dark dark:text-white">
-                About Me
-              </h4>
-              <p className="mt-4">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Pellentesque posuere fermentum urna, eu condimentum mauris
-                tempus ut. Donec fermentum blandit aliquet. Etiam dictum dapibus
-                ultricies. Sed vel aliquet libero. Nunc a augue fermentum,
-                pharetra ligula sed, aliquam lacus.
-              </p>
+      <div className="mt-6 border-t border-stroke pt-6 dark:border-stroke-dark">
+        <h2 className="mb-4 text-lg font-semibold text-dark dark:text-white">
+          Account Details
+        </h2>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+          <div>
+            <p className="font-medium text-dark dark:text-white">Verified</p>
+            <div className="w-fit">
+              <Status status={data?.is_verified ? "success" : "warning"}>
+                {data?.is_verified ? (
+                  <CheckIcon fill="green" width={20} height={20} />
+                ) : (
+                  <CrossIcon fill="red" width={20} />
+                )}
+              </Status>
             </div>
-
-            <SocialAccounts />
+          </div>
+          <div>
+            <p className="font-medium text-dark dark:text-white">Last Login</p>
+            <p className="text-gray-600 dark:text-gray-300">
+              {unixToDate({ unix: data?.last_login_at ?? 0, hasTime: true })}
+            </p>
+          </div>
+          <div>
+            <p className="font-medium text-dark dark:text-white">
+              Member Since
+            </p>
+            <p className="text-gray-600 dark:text-gray-300">
+              {unixToDate({ unix: data?.created_at ?? 0, hasTime: true })}
+            </p>
           </div>
         </div>
       </div>
diff --git a/src/components/Layouts/header/user-info/index.tsx b/src/components/Layouts/header/user-info/index.tsx
index 640e94e..c73f290 100644
--- a/src/components/Layouts/header/user-info/index.tsx
+++ b/src/components/Layouts/header/user-info/index.tsx
@@ -16,11 +16,6 @@ import { LogOutIcon, SettingsIcon, UserIcon } from "./icons";
 export function UserInfo() {
   const [isOpen, setIsOpen] = useState(false);
   const { logout, user } = useUser();
-  const USER = {
-    name: "John Smith",
-    email: "johnson@nextadmin.com",
-    img: "/images/user/user-03.png",
-  };
 
   return (
     <Dropdown isOpen={isOpen} setIsOpen={setIsOpen}>
@@ -31,14 +26,7 @@ export function UserInfo() {
           <div className="rounded-full bg-gray-3 p-3.5 dark:bg-dark-3">
             <UserIcon />
           </div>
-          {/* <Image
-            src={USER.img}
-            className="size-12"
-            alt={`Avatar of ${USER.name}`}
-            role="presentation"
-            width={200}
-            height={200}
-          /> */}
+     
           <figcaption className="flex items-center gap-1 font-medium text-dark dark:text-dark-6 max-[1024px]:sr-only">
             <span>{user?.full_name}</span>
 
@@ -61,21 +49,27 @@ export function UserInfo() {
         <h2 className="sr-only">User information</h2>
 
         <figure className="flex items-center gap-2.5 px-5 py-3.5">
-          <Image
-            src={USER.img}
-            className="size-12"
-            alt={`Avatar for ${USER.name}`}
-            role="presentation"
-            width={200}
-            height={200}
-          />
+          {user?.profile_image ? (
+            <Image
+              src={user.profile_image}
+              className="size-12"
+              alt={`Avatar for ${user.full_name}`}
+              role="presentation"
+              width={200}
+              height={200}
+            />
+          ) : (
+            <div className="rounded-full bg-gray-3 p-4 dark:bg-gray-7">
+              <UserIcon width={30} height={30} />
+            </div>
+          )}
 
           <figcaption className="space-y-1 text-base font-medium">
             <div className="mb-2 leading-none text-dark dark:text-white">
-              {USER.name}
+              {user?.full_name}
             </div>
 
-            <div className="leading-none text-gray-6">{USER.email}</div>
+            <div className="leading-none text-gray-6">{user?.email}</div>
           </figcaption>
         </figure>
 
diff --git a/src/components/ui/Status.tsx b/src/components/ui/Status.tsx
index a8d4274..a025b83 100644
--- a/src/components/ui/Status.tsx
+++ b/src/components/ui/Status.tsx
@@ -2,11 +2,11 @@ import { cn } from "@/lib/utils";
 import { ReactNode } from "react";
 
 interface IProps {
-  status: string;
+  status?: string;
   children: ReactNode;
 }
 
-const Status = ({ status, children }: IProps) => {
+const Status = ({ status = "draft", children }: IProps) => {
   const reds = [
     "cancelled",
     "inactive",
@@ -22,7 +22,7 @@ const Status = ({ status, children }: IProps) => {
     "success",
     "verified",
     "published",
-    "sent"
+    "sent",
   ];
   const blues = ["awarded", "processing", "in-review", "scheduled"];
   const yellows = ["pending", "warning", "on-hold", "delayed"];