show profile user in header

public/assets/images/avatar.svg

@@ -0,0 +1,5 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="50" cy="50" r="50" fill="#E7EAF3"/>
+<path d="M51.04 45.6862C50.7025 45.6525 50.2975 45.6525 49.9263 45.6862C41.8938 45.4163 35.515 38.835 35.515 30.735C35.515 22.4662 42.1975 15.75 50.5 15.75C58.7688 15.75 65.485 22.4662 65.485 30.735C65.4513 38.835 59.0725 45.4163 51.04 45.6862Z" fill="#8C90A3"/>
+<path d="M34.1651 58.14C25.9976 63.6075 25.9976 72.5175 34.1651 77.9513C43.4463 84.1613 58.6676 84.1613 67.9488 77.9513C76.1163 72.4838 76.1163 63.5738 67.9488 58.14C58.7013 51.9638 43.4801 51.9638 34.1651 58.14Z" fill="#8C90A3"/>
+</svg>

src/app/[name]/(Profile)/profile/hooks/userProfileData.ts

@@ -0,0 +1,10 @@
+import { useQuery } from "@tanstack/react-query";
+import * as api from "../service/ProfileService";
+
+export const useGetProfile = () => {
+  return useQuery({
+    queryKey: ["profile"],
+    queryFn: api.getProfile,
+    retry: false,
+  });
+};

src/app/[name]/(Profile)/profile/service/ProfileService.ts

@@ -0,0 +1,7 @@
+import { api } from "@/config/axios";
+import { GetProfileResponse } from "../types/Types";
+
+export const getProfile = async (): Promise<GetProfileResponse> => {
+  const { data } = await api.get<GetProfileResponse>("/public/user/me");
+  return data;
+};

src/app/[name]/(Profile)/profile/types/Types.ts

@@ -0,0 +1,23 @@
+export interface UserProfile {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string | null;
+  restaurant: string;
+  firstName: string;
+  lastName: string;
+  phone: string;
+  birthDate: string;
+  marriageDate: string;
+  referrer: string | null;
+  isActive: boolean;
+  gender: boolean;
+  wallet: number;
+  points: number;
+}
+
+export interface GetProfileResponse {
+  statusCode: number;
+  success: boolean;
+  data: UserProfile;
+}

src/app/globals.css

@@ -9,7 +9,6 @@
   box-sizing: border-box;
 }
 
-
 html,
 body {
   @apply h-full bg-background font-irancell font-normal text-foreground;
@@ -109,9 +108,10 @@ input:autofill {
   transition: background-color 10000s ease-in-out 0s;
 }
 
-
 .box-shadow-normal {
   box-shadow: 0px 2px 16px 0px #00000014;
+  height: fit-content;
+  padding-bottom: 20px;
 }
 
 .gradient-border {
@@ -128,16 +128,14 @@ input:autofill {
   /* border thickness */
   border-radius: inherit;
   /* inherit border-radius from parent */
-  background: linear-gradient(to bottom right,
+  background: linear-gradient(
-      var(--container) 6.25%,
+    to bottom right,
-      rgba(255, 253, 253, 0) 52.01%,
+    var(--container) 6.25%,
-      var(--container) 96.87%);
+    rgba(255, 253, 253, 0) 52.01%,
-  mask:
+    var(--container) 96.87%
-    linear-gradient(#fff 0 0) content-box,
+  );
-    linear-gradient(#fff 0 0);
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-  -webkit-mask:
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   pointer-events: none;
@@ -361,4 +359,4 @@ html[data-theme="dark"] {
   body {
     @apply bg-background text-foreground;
   }
-} */
+} */

src/components/topbar/TopBar.tsx

@@ -10,6 +10,7 @@ import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import useToggle from '@/hooks/helpers/useToggle'
 import LogoutPrompt from '@/features/general/LogoutPrompt'
+import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData'
 
 type Props = {
     profileDropState: boolean,
@@ -23,9 +24,13 @@ type Props = {
 }
 
 function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: Props) {
+
     const params = useParams();
     const { name } = params;
     const { state: logoutModal, toggle: toggleLogoutModal } = useToggle();
+    const { data: profile } = useGetProfile();
+    const profileData = profile?.data;
+    const fullName = profileData ? `${profileData.firstName} ${profileData.lastName}`.trim() : 'کاربر داناک';
 
     return (
         <div className="w-full">
@@ -76,9 +81,9 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                             height={24}
                             alt='Profile avatar'
                             className='rounded-full'
-                            src={'/assets/images/user-avatar.png'} />
+                            src={'/assets/images/avatar.svg'} />
                         <div className='pe-0 hidden xl:inline-flex items-end' >
-                            <div className='ps-2 pe-1 text-xs text-nowrap'>مهرداد مظفری</div>
+                            <div className='ps-2 pe-1 text-xs text-nowrap'>{fullName}</div>
                             <ArrowDown2 className='stroke-disabled-text' size={14} />
                             {/* <img src={arrow} /> */}
                         </div>
@@ -91,14 +96,15 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                 >
                     <div className='place-items-center pt-8'>
                         <Image
-                            src={'/assets/images/user-avatar.png'}
+                            src={'/assets/images/avatar.svg'}
                             width={56}
                             height={56}
                             className='rounded-full'
                             unoptimized
                             alt={'user avatar'}
                         />
-                        <p className='text-xs mt-2'>mail@danakcorp.com</p>
+                        <p className='text-xs mt-2'>{profileData?.firstName + ' ' + profileData?.lastName}</p>
+                        {/* <p className='text-xs mt-2'>{profileData?.phone}</p> */}
                     </div>
 
                     <Seperator className='my-6' />