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

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"];