Refactor still working on UI changes

client/src/components/layout/Header.jsx

@@ -2,6 +2,7 @@ import { useRecipe, Button, Stack, Text, Flex } from "@chakra-ui/react"
 import UserAvatarMenu from "./UserAvatarMenu.jsx";
 import { NavLink } from "react-router-dom";
 import useAuthStore from "@/store/authStore";
+import {SearchBar} from "@/components/dashboard/SearchBar.jsx";
 
 // Import the asset properly so Vite can bundle it for any server
 // import defaultAvatar from "@/assets/user_profile.svg";
@@ -13,7 +14,8 @@ export default function Header() {
 
     const { user } = useAuthStore();
     console.log(user);
-    const displayName = user ? (user.fullName || user.username) : "Loading...";
+    const displayName = user ? (user.firstName || user.username) : "Loading...";
+    const avatarname = user ? (user.fullName || user.username) : "Loading...";
 
     const displayEmail = user?.email || "LDAP User";
 
@@ -23,15 +25,17 @@ export default function Header() {
             {/*<Button as={NavLink} to="/home" color="color" variant="plain" textStyle="5xl" fontWeight="bold">*/}
             {/*    VDAP*/}
             {/*</Button>*/}
+            <SearchBar placeholder="Enter a volcano to search" size="sm" width="410px" />
 
             {/* User Profile Section */}
             <Flex align="center" gap={3} pr={6}>
-                <Stack gap="0" textAlign="right" cursor="default">
-                    <Text color="color" fontWeight="bold" textStyle="lg">{displayName}</Text>
-                    <Text color="fg.muted" textStyle="sm">{displayEmail}</Text>
-                </Stack>
+                <Text color="color" fontWeight="bold" textStyle="md" >{displayName}</Text>
+                {/*<Stack gap="0" textAlign="right" cursor="default">*/}
+                {/*    <Text color="color" fontWeight="bold" textStyle="md" width="100%" >{displayName}</Text>*/}
+                {/*    <Text color="fg.muted" textStyle="sm">{displayEmail}</Text>*/}
+                {/*</Stack>*/}
                 <UserAvatarMenu
-                    name={displayName}
+                    name={avatarname}
                     // avatar={user.avatar}
                 />
             </Flex>