Merge branch 'initailSetup' into 'master'

added layout to app

See merge request !7

package-lock.json

@@ -8,9 +8,12 @@
       "name": "nisum-scorecard",
       "version": "0.1.0",
       "dependencies": {
+        "@reduxjs/toolkit": "^2.2.1",
+        "@tailwindcss/ui": "^0.7.2",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.6.7",
         "cors": "^2.8.5",
         "express": "^4.18.3",
         "lodash": "^4.17.21",
@@ -18,8 +21,14 @@
         "mongodb": "^6.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-redux": "^9.1.0",
+        "react-router-dom": "^6.22.3",
         "react-scripts": "5.0.1",
+        "redux-thunk": "^3.1.0",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "tailwindcss": "^3.4.1"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -3365,6 +3374,46 @@
         }
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz",
+      "integrity": "sha512-8CREoqJovQW/5I4yvvijm/emUiCCmcs4Ev4XPWd4mizSO+dD3g5G6w34QK5AGeNrSH7qM8Fl66j4vuV7dpOdkw==",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.4.tgz",
+      "integrity": "sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3683,6 +3732,41 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@tailwindcss/ui": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/ui/-/ui-0.7.2.tgz",
+      "integrity": "sha512-7HuFoWUMfVdY8EWEIS2FSJBCj+iEWL4JfljVE6Wd5qLrQrCzH10tuE0S6697jPm7dt8ZUEslFWlJtAsU76A5Nw==",
+      "dependencies": {
+        "@tailwindcss/custom-forms": "^0.2.1",
+        "@tailwindcss/typography": "^0.2.0",
+        "hex-rgb": "^4.1.0",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^1.8.3"
+      }
+    },
+    "node_modules/@tailwindcss/ui/node_modules/@tailwindcss/custom-forms": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
+      "integrity": "sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==",
+      "dependencies": {
+        "lodash": "^4.17.11",
+        "mini-svg-data-uri": "^1.0.3",
+        "traverse": "^0.6.6"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^1.0"
+      }
+    },
+    "node_modules/@tailwindcss/ui/node_modules/@tailwindcss/typography": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.2.0.tgz",
+      "integrity": "sha512-aPgMH+CjQiScLZculoDNOQUrrK2ktkbl3D6uCLYp1jgYRlNDrMONu9nMu8LfwAeetYNpVNeIGx7WzHSu0kvECg==",
+      "peerDependencies": {
+        "tailwindcss": "^1.5.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.4",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
@@ -4560,6 +4644,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
       "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@types/webidl-conversions": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
@@ -5493,6 +5582,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -9228,6 +9340,17 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hex-rgb": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/hex-rgb/-/hex-rgb-4.3.0.tgz",
+      "integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -12752,6 +12875,14 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -14919,6 +15050,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -15207,6 +15343,32 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-redux": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.0.tgz",
+      "integrity": "sha512-6qoDzIO+gbrza8h3hjMA9aq4nwVFCKFtY2iLxCtVT38Swyy2C/dJCGBXHeHLtx6qlg/8qzc2MrhOeduf5K32wQ==",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.3",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25",
+        "react": "^18.0",
+        "react-native": ">=0.69",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -15215,6 +15377,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "dependencies": {
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -15342,6 +15534,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.5.tgz",
@@ -15489,6 +15694,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "node_modules/reselect": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.0.tgz",
+      "integrity": "sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -17101,6 +17311,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/traverse": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.8.tgz",
+      "integrity": "sha512-aXJDbk6SnumuaZSANd21XAo15ucCDE38H4fkqiGsc3MhCK+wOlZvLP9cB/TvpHT0mOyWgC4Z8EwRlzqYSUzdsA==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
@@ -17444,6 +17665,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

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;