added layout to app

src/App.js

 import {BrowserRouter, Routes, Route} from 'react-router-dom';
 import Home from "./pages/home";
 import Dashboard from './pages/dashboard';
+import Layout from './pages/layout';
 import './App.css';
 
 function App() {
@@ -8,7 +9,7 @@ function App() {
     <BrowserRouter>
       <Routes>
         <Route path='/' element={<Home />}/>
-        <Route path=":id/dashboard" element={<Dashboard />}/>
+        <Route path=":id/dashboard" element={<Layout><Dashboard/></Layout>}/>
       </Routes>
     </BrowserRouter>
   );

src/components/header/index.jsx

+import React from 'react';
+import {Link} from 'react-router-dom';
+
+function Header() {
+    return (
+        <div className="flex items-center justify-between py-5 px-10">
+            <img src="/logo.png"/>
+            <div className="flex items-center">
+                <img src="/power-button.png" width="30px" height="30px"/>
+                <button className="ml-2 -mt-1 text-2xl" >
+                    <Link to="/">
+                        Logout
+                    </Link>
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default Header;

src/components/sidebar/index.jsx

+import React from "react";
+import { useSelector } from "react-redux";
+
+function Sidebar() {
+    const user = useSelector((state) => state.userDetails.user);
+  return (
+    <div className="w-[30%] flex items-center flex-col">
+      <div>
+        <img src="/user.png" width="130px" height="130px" />
+      </div>
+      <div className="flex items-center flex-col mt-5">
+        <p className="text-lg font-semibold">{user.empName}</p>
+        <p>{user.designation}</p>
+      </div>
+    </div>
+  );
+}
+
+export default Sidebar;

src/components/table/index.jsx

+import React from "react";
+
+function Table({headers, data, isView}) {
+  return (
+    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
+      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+          <tr>
+            {headers.map((item) => (
+              <th scope="col" class="px-6 py-3">
+                {item.title}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+            {
+                data?.map((item, index) => (
+                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                        {headers?.map((field) => (
+                            field.id !== "action" ? <td class="px-6 py-4">{item[field.id]}</td> : <td class="px-6 py-4"><button>View</button></td>
+                        ))}
+                        
+                    </tr>
+                ))
+            }
+
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default Table;

src/pages/dashboard/index.jsx

 import React, { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
-import { fetchReportees, fetchUser } from "../../redux/reducers/reporteesSlice";
+import { fetchReportees } from "../../redux/reducers/reporteesSlice";
+import { fetchUser } from "../../redux/reducers/userSlice";
+import Table from '../../components/table';
 
 function Dashboard() {
   const dispatch = useDispatch();
-  const reportees = useSelector((state) => state.reportees);
-  const user = reportees.user.reportees;
+  const reportees = useSelector((state) => state.reportees.reportees);
+  const userDetails = useSelector((state) => state.userDetails);
   const { id } = useParams();
+  const reporteIds = userDetails.user.reportees || {};
 
   useEffect(() => {
-    if (user) {
+    if (reporteIds.length > 0) {
       const data = {
-        reportees: reportees.user.reportees,
+        reportees: userDetails.user.reportees,
         sort: { type: "empId", order: 1 },
         page: 1,
         perPage: 10,
       };
       dispatch(fetchReportees(data));
     }
-  }, []);
+  }, [reporteIds]);
 
   useEffect(() => {
     dispatch(fetchUser(id));
   }, []);
 
-  return <div>Dashboard Page</div>;
+  const headers = [
+    {title: "Name", id:"empName"},
+    {title: "Emp.Id", id: "empId"},
+    {title: "Designation", id: 'designation'},
+    {title: "score", id:"score"},
+    {title: "Action", id:"action"},
+
+  ]
+  return (
+     <div>
+        <Table headers={headers} data={reportees.data} isView={true}/>    
+     </div>
+  )
 }
 
 export default Dashboard;

src/pages/home/index.jsx

@@ -10,24 +10,24 @@ function Home() {
   };
 
   return (
-    <div class="container py-10 px-10 mx-0 min-w-full h-screen flex items-center justify-center">
-      <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 ">
+    <div className="container py-10 px-10 mx-0 min-w-full h-screen flex items-center justify-center">
+      <div className="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700 ">
         <label
           for="email"
-          class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+          className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
         >
           Employee Id
         </label>
         <input
           type="text"
           id="email"
-          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
           placeholder=""
           required
           onChange={(e) => setId(e.target.value)}
         />
         <button
-          class="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded"
+          className="bg-purple-900 text-white hover:bg-blue-400 font-bold py-2 px-4 mt-3 rounded"
           onClick={handleNavigate}
           disabled={!id}
         >

src/pages/layout/index.jsx

+import React from 'react'
+import Header from '../../components/header';
+import Sidebar from '../../components/sidebar';
+
+function Layout({children}) {
+    return (
+        <div>
+            <Header/>
+            <div className="flex">
+                <Sidebar/>
+                <div className="bg-[#E9EDEE] w-full" style={{height:"88vh"}}>
+                    {children}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Layout;

src/redux/reducers/reporteesSlice.js

-import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
-import {base_url} from '../../utils/constants';
-import axios from 'axios';
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { base_url } from "../../utils/constants";
+import axios from "axios";
 
-const initialState= {
-    user: {},
-    reportees: [],
-    loading: false,
-    error: null,
-  }
+const initialState = {
+  reportees: [],
+  loading: false,
+  error: null,
+};
 
-  export const fetchUser = createAsyncThunk('getUser', async (id) => {
-
-    return await axios.get(`${base_url}/employee/${id}`)
-        .then(response => response.data);
-});
-export const fetchReportees = createAsyncThunk('getReportees', async (data) => {
-    return await axios.post(`${base_url}/getreportees`, data)
-        .then(response => response.data);
+export const fetchReportees = createAsyncThunk("getReportees", async (data) => {
+  return await axios
+    .post(`${base_url}/getreportees`, data)
+    .then((response) => response.data);
 });
 
 const reporteesSlice = createSlice({
-  name: 'counter',
+  name: "counter",
   initialState,
   reducers: {},
-  extraReducers: builder => {
+  extraReducers: (builder) => {
     builder.addCase(fetchReportees.pending, (state) => {
-        state.loading = true;
-        state.error="pending"
+      state.loading = true;
+      state.error = "pending";
     });
     builder.addCase(fetchReportees.fulfilled, (state, action) => {
-        state.loading = false;
-        state.reportees = action.payload;
-        state.error = '';
+      state.loading = false;
+      state.reportees = action.payload;
+      state.error = "";
     });
     builder.addCase(fetchReportees.rejected, (state, action) => {
-        state.loading = false;
-        state.reportees = [];
-        state.error = action.error || 'Something went wrong!';
-    });
-    // fetch user
-    builder.addCase(fetchUser.pending, (state) => {
-        state.loading = true;
-        state.error="pending"
-    });
-    builder.addCase(fetchUser.fulfilled, (state, action) => {
-        state.loading = false;
-        state.user = action.payload;
-        state.error = '';
-    });
-    builder.addCase(fetchUser.rejected, (state, action) => {
-        state.loading = false;
-        state.user = {};
-        state.error = action.error || 'Something went wrong!';
+      state.loading = false;
+      state.reportees = [];
+      state.error = action.error || "Something went wrong!";
     });
-}
+  },
 });
 
-export const {} =
-reporteesSlice.actions;
+export const {} = reporteesSlice.actions;
 
 export default reporteesSlice.reducer;

src/redux/reducers/rootReducer.js

 import { combineReducers } from 'redux';
 import reporteesReducer from './reporteesSlice';
+import userReducer from './userSlice';
 
 
 const rootReducer = combineReducers({
+    userDetails: userReducer,
     reportees: reporteesReducer
 });
 

src/redux/reducers/userSlice.js

+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { base_url } from "../../utils/constants";
+import axios from "axios";
+
+const initialState = {
+  user: {},
+  loading: false,
+  error: null,
+};
+
+export const fetchUser = createAsyncThunk("getUser", async (id) => {
+  return await axios
+    .get(`${base_url}/employee/${id}`)
+    .then((response) => response.data);
+});
+
+const userSlice = createSlice({
+  name: "counter",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    // fetch user
+    builder.addCase(fetchUser.pending, (state) => {
+      state.loading = true;
+      state.error = "pending";
+    });
+    builder.addCase(fetchUser.fulfilled, (state, action) => {
+      state.loading = false;
+      state.user = action.payload;
+      state.error = "";
+    });
+    builder.addCase(fetchUser.rejected, (state, action) => {
+      state.loading = false;
+      state.user = {};
+      state.error = action.error || "Something went wrong!";
+    });
+  },
+});
+
+export const {} = userSlice.actions;
+
+export default userSlice.reducer;