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