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

@@ -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>