trying to show username in saitstaff

Components/UserGreeting.js

@@ -0,0 +1,15 @@
+'use client'
+// components/UserGreeting.js
+
+const UserGreeting = () => {
+    const userDisplayName = sessionStorage.getItem("displayName") || "User";
+
+    return (
+      <h1 className="text-lg text-black-600 font-bold mt-2 ml-2">
+        Hi! {userDisplayName}
+      </h1>
+    );
+  };
+
+  export default UserGreeting;
+

app/sait-staff/login/page.js

@@ -5,10 +5,10 @@ import { auth } from "@/app/firebase/config";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { sendPasswordResetEmail } from "firebase/auth";
-import Modal from "@/Components/Modal";
+import Modal from "@/components/Modal";
 import { BiSolidCommentError } from "react-icons/bi";
 
-const sign_in = () => {
+const SignIn = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [loginError, setLoginError] = useState("");
@@ -22,6 +22,7 @@ const sign_in = () => {
       .then((userCredential) => {
         const user = userCredential.user;
         sessionStorage.setItem("user", true);
+        sessionStorage.setItem("displayName", user.displayName || "User");
         router.push("/sait-staff");
         setEmail("");
         setPassword("");
@@ -64,8 +65,7 @@ const sign_in = () => {
         backgroundSize: "cover", // Adjusts the size of the background image
         backgroundPosition: "center", // Centers the background image
         backgroundRepeat: "no-repeat", // Prevents the background image from repeating
-
-          }}
+      }}
     >
       <Fragment>
         <div className="container mx-auto">
@@ -116,7 +116,6 @@ const sign_in = () => {
                   Sign In
                 </button>
               </div>
-
             </div>
           </div>
         </div>
@@ -162,4 +161,4 @@ const sign_in = () => {
   );
 };
 
-export default sign_in;
+export default SignIn;

app/sait-staff/page.js

@@ -6,17 +6,21 @@ import Dash from "./overviewDash";
 import Settings from "./settingS";
 import { AiOutlineUser } from "react-icons/ai";
 import { LuLogOut } from "react-icons/lu";
-import { useUserAuth } from "@/services/utils";
+import { onAuthStateChanged } from 'firebase/auth';
+import { auth } from '@/app/firebase/config';
+import UserGreeting from '@/components/UserGreeting';
 //import navbar
 import SaitStaffNav from "@/components/SaitStaffNav";
 import { CgProfile } from "react-icons/cg";
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from "next/navigation";
 
 
 export default function Page() {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [activeTab, setActiveTab] = useState('home'); // Set default active tab
+  const [user, setUser] = useState(null);
+
   const router = useRouter();
 
   // function to select the tab
@@ -29,6 +33,7 @@ export default function Page() {
     return router.push("/");
   }
 
+
   return (
     <div className="flex min-h-screen mx-auto"
       style={{
@@ -45,7 +50,7 @@ export default function Page() {
              <div className=" bg-slate-200 relative h-12 w-12 border rounded-full overflow-hidden hover:bg-[#F29F3D]">
               <AiOutlineUser className="w-9 h-9 ml-1.5 mt-1 text-gray-600 " />
              </div>    
-             <h1 className="text-lg text-black-600 font-bold mt-2 ml-2 ">  Hi! {"User"}</h1>
+              <UserGreeting />
           </div>
           <button onClick={handeLogoutClick} className="inline-flex h-10 items-center justify-center rounded-md bg-gray-600 px-8 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-[#F29F3D] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#6c5ce7] disabled:pointer-events-none disabled:opacity-50 dark:bg-[#6c5ce7] dark:text-gray-50 dark:hover:bg-[#6c5ce7]/90 dark:focus-visible:ring-[#6c5ce7]">
             <LuLogOut className="mr-2 h-5 w-5" />