'servercomments-added'

package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "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",
@@ -13,7 +16,10 @@
     "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"
   },
   "scripts": {
@@ -40,5 +46,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }

server.js

@@ -18,6 +18,7 @@ connectToDb((err) => {
     }
 })
 
+//to get all the employees data
 app.get('/employees', (req, res) => {
     db.collection('employees').find().toArray()
         .then(result => { res.send(result) })
@@ -40,6 +41,11 @@ Example of post Data
     "searchText":"eng"
 }*/
 app.post('/getreportees', (req, res) => {
+    let reporteesArray = req.body.reportees || [];
+    let sortBy=req.body.sort?req.body.sort.type || "_id" :"_id"
+    let sortByOrder=req.body.sort?parseInt(req.body.sort.order)|| 1: 1;
+    let page = req.body.page?parseInt(req.body.page) || 1 : 1;
+    let limit = req.body.perPage?parseInt(req.body.perPage) || 10: 10;
     let reporteesArray = req.body.reportees || [];
     let sortBy=req.body.sort?req.body.sort.type || "_id" :"_id"
     let sortByOrder=req.body.sort?parseInt(req.body.sort.order)|| 1: 1;

src/App.js

-import logo from './logo.svg';
+import {BrowserRouter, Routes, Route} from 'react-router-dom';
+import Home from "./pages/home";
+import Dashboard from './pages/dashboard';
 import './App.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path='/' element={<Home />}/>
+        <Route path=":id/dashboard" element={<Dashboard />}/>
+      </Routes>
+    </BrowserRouter>
   );
 }
 

src/index.css

+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

src/index.js

@@ -3,11 +3,15 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { Provider } from 'react-redux';
+import store from './redux/store';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+     <Provider store={store}>
       <App />
+    </Provider>
   </React.StrictMode>
 );
 

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";
+
+function Dashboard() {
+  const dispatch = useDispatch();
+  const reportees = useSelector((state) => state.reportees);
+  const user = reportees.user.reportees;
+  const { id } = useParams();
+
+  useEffect(() => {
+    if (user) {
+      const data = {
+        reportees: reportees.user.reportees,
+        sort: { type: "empId", order: 1 },
+        page: 1,
+        perPage: 10,
+      };
+      dispatch(fetchReportees(data));
+    }
+  }, []);
+
+  useEffect(() => {
+    dispatch(fetchUser(id));
+  }, []);
+
+  return <div>Dashboard Page</div>;
+}
+
+export default Dashboard;

src/pages/home/index.jsx

+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+function Home() {
+  const navigate = useNavigate();
+  const [id, setId] = useState(null);
+
+  const handleNavigate = () => {
+    navigate(`${id}/dashboard`);
+  };
+
+  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 ">
+        <label
+          for="email"
+          class="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"
+          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"
+          onClick={handleNavigate}
+          disabled={!id}
+        >
+          Score Card
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Home;

src/redux/reducers/reporteesSlice.js

+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import {base_url} from '../../utils/constants';
+import axios from 'axios';
+
+const initialState= {
+    user: {},
+    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);
+});
+
+const reporteesSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder.addCase(fetchReportees.pending, (state) => {
+        state.loading = true;
+        state.error="pending"
+    });
+    builder.addCase(fetchReportees.fulfilled, (state, action) => {
+        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!';
+    });
+}
+});
+
+export const {} =
+reporteesSlice.actions;
+
+export default reporteesSlice.reducer;

src/redux/reducers/rootReducer.js

+import { combineReducers } from 'redux';
+import reporteesReducer from './reporteesSlice';
+
+
+const rootReducer = combineReducers({
+    reportees: reporteesReducer
+});
+
+export default rootReducer;
\ No newline at end of file

src/redux/store.js

+import { configureStore } from '@reduxjs/toolkit';
+import rootReducer from './reducers/rootReducer';
+
+const store = configureStore({
+  reducer: rootReducer,
+});
+
+export default store;
\ No newline at end of file

src/utils/constants.js

+export const base_url = 'http://localhost:4000'
\ No newline at end of file

tailwind.config.js

+module.exports = {
+    content: [
+      "./index.html",
+      "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+      fontSize: {
+        xs: ['12px', '16px'],
+        sm: ['14px', '20px'],
+        base: ['16px', '19.5px'],
+        lg: ['18px', '21.94px'],
+        xl: ['20px', '24.38px'],
+        '2xl': ['24px', '29.26px'],
+        '3xl': ['28px', '50px'],
+        '4xl': ['48px', '58px'],
+        '8xl': ['96px', '106px']
+      },
+      extend: {
+        fontFamily: {
+          palanquin: ['Palanquin', 'sans-serif'],
+          montserrat: ['Montserrat', 'sans-serif'],
+        },
+        colors: {
+          'primary': "#ECEEFF",
+          "coral-red": "#FF6452",
+          "slate-gray": "#6D6D6D",
+          "pale-blue": "#F5F6FF",
+          "white-400": "rgba(255, 255, 255, 0.80)"
+        },
+        boxShadow: {
+          '3xl': '0 10px 40px rgba(0, 0, 0, 0.1)'
+        },
+        backgroundImage: {
+          'hero': "url('assets/images/collection-background.svg')",
+          'card': "url('assets/images/thumbnail-background.svg')",
+        },
+        screens: {
+          "wide": "1440px"
+        }
+      },
+    },
+    plugins: [],
+  }
\ No newline at end of file