routing issue cleared

src/components/header/index.jsx

@@ -21,8 +21,8 @@ function Header() {
                 <button className=" -mt-1 text-2xl flex" onClick={() => setOpen(!open)}>
                     <img src="/user.png" width="35px" height="35px" className="mt-2 pr-2" />
                     <div className="flex flex-col">
-                        <p className="text-lg font-semibold">{user.empName}</p>
-                        <p className="text-xs">{user.designation}</p>
+                        <p className="text-lg font-semibold">{user?.empName}</p>
+                        <p className="text-xs">{user?.designation}</p>
                     </div>
                 </button>
                 <button onClick={handleLogout} className={`${!open && "hidden"} absolute top-[40px] bg-white opacity-100 shadow-md px-5 py-1 bg-opacity-100 rounded border border-gray-400 right-0 hover:bg-blue-400 hover:text-white w-[-webkit-fill-available]`} style={{zIndex: 1}}>

src/pages/reports/index.jsx

 import React, { useState, useEffect, useMemo } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { useParams } from "react-router";
+import { useParams,useNavigate } from "react-router";
 import { base_url } from "../../utils/constants";
 import axios from 'axios';
 import { fetchReports } from "../../redux/reducers/reportSlice";
@@ -10,6 +10,7 @@ import DateRangePicker from "../../components/dateRangePicker/DateRangePicker";
 
 function Reports() {
   const dispatch = useDispatch();
+  const navigate=useNavigate();
   const { id } = useParams();
   const empId = Number(id)
   const reportees = useSelector((state) => state.reportees.reportees);
@@ -96,6 +97,14 @@ function Reports() {
     })
   }, [id,reportees]);
 
+  useEffect(() => {
+    if(user){
+       navigate("/dashboard")
+    }else{
+      navigate("/")
+    }
+  }, [user]);
+
   return (
     <div className="p-4" >
       <div className=" bg-white p-3">