Skip to content

N
nisum-scorecard
Commit 61c0029d authored by Ramadevi Guduri's avatar Ramadevi Guduri
Browse files
Options

reportsuiand slice

parent ac2d1f63
Hide whitespace changes
Inline Side-by-side
Showing with 243 additions and 5 deletions
src/App.js
View file @ 61c0029d
...@@ -5,7 +5,7 @@ import Layout from './pages/layout'; ...@@ -5,7 +5,7 @@ import Layout from './pages/layout';
import Viewreportee from './pages/viewReportee'; import Viewreportee from './pages/viewReportee';
import './App.css'; import './App.css';
import PageNotFound from './pages/pagenotfound/PageNotFound'; import PageNotFound from './pages/pagenotfound/PageNotFound';
import Exporttable from './pages/reportexport'
function App() { function App() {
return ( return (
<BrowserRouter> <BrowserRouter>
...@@ -13,6 +13,7 @@ function App() { ...@@ -13,6 +13,7 @@ function App() {
<Route path='/' element={<Home />}/> <Route path='/' element={<Home />}/>
<Route path="/dashboard" element={<Layout><Dashboard/></Layout>}/> <Route path="/dashboard" element={<Layout><Dashboard/></Layout>}/>
<Route path="/viewreportee" element={<Layout><Viewreportee/></Layout>}/> <Route path="/viewreportee" element={<Layout><Viewreportee/></Layout>}/>
<Route path="/reportees" element={<Layout><Exporttable/></Layout>}/>
<Route path="/*" element={<PageNotFound/>}/> <Route path="/*" element={<PageNotFound/>}/>
</Routes> </Routes>
</BrowserRouter> </BrowserRouter>
......
src/components/sidebar/index.jsx
View file @ 61c0029d
...@@ -37,7 +37,7 @@ function Sidebar() { ...@@ -37,7 +37,7 @@ function Sidebar() {
</li> </li>
<li> <li>
<Link <Link
className={`flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-lg hover:bg-gray-100 `} className={`flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-lg hover:bg-gray-100 `} to={`/reportees`}
> >
<svg <svg
className="size-4" className="size-4"
......
src/pages/reportexport/index.jsx 0 → 100644
View file @ 61c0029d
import React, { useEffect ,useState} from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { fetchReportstableData } from '../../redux/reducers/exporttableslice';
import { setPastMonth,setPastTwoMonths,setPastsixMonths,setPasttwelvemonths } from '../../redux/reducers/exporttableslice';
function Exporttable() {
const dispatch = useDispatch()
const { user } = useSelector((state) => state.userDetails);
const { totalReporteesData } = useSelector((state) => state.totalreportees);
const [selectedOption, setSelectedOption] = useState('');
const handleDropdownChange = (event) => {
const selectedValue = event.target.value;
setSelectedOption(selectedValue);
if (selectedValue === 'pastMonth') {
dispatch(setPastMonth());
} else if (selectedValue === 'pastthreeMonth') {
dispatch(setPastTwoMonths());
} else if (selectedValue === 'pastsixMonth'){
dispatch(setPastsixMonths());
} else if (selectedValue === 'pasttwelvemonth')
dispatch(setPasttwelvemonths());
};
useEffect(() => {
dispatch(fetchReportstableData({
reportees: user.reportees,
page: 1,
perPage: user.reportees.length
}))
}, [user]);
if (totalReporteesData?.length > 0)
return (
<div>
<div className="" >
<div className="text-blue-800 py-3 pl-2 text-center"> Genarate Report</div>
<div>
<form className=" p-2 text-[12px]" >
<div className="flex items-center justify-evenly ">
<div className='flex items-center'>
<label htmlFor="countries" className='font-semibold'>Select Employee: </label>
<select className="bg-gray-50 ml-2 w-[200px] border border-gray-300 text-gray-900 text-sm rounded-sm focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700" >
<option id="" value="">Select</option>
{
totalReporteesData && totalReporteesData.map((reportee) => <option>{reportee?.empName}</option>)
}
</select>
</div>
<div className='flex items-center'>
<label htmlFor="countries" className='font-semibold'>Select Period:</label>
<select value={selectedOption} onChange={handleDropdownChange} className="bg-gray-50 ml-2 w-[200px] border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 " >
<option id="" value="">Select</option>
<option id="" value="pastMonth">Past 1 months</option>
<option id="" value="pastthreeMonth">Past 3 months</option>
<option id="" value="pastsixMonth">Past 6 months</option>
<option id="" value="pasttwelvemonth">Past year</option>
</select>
</div>
<div className='flex'>
<button className="px-8 py-2 ml-5 w-[100px] h-[40px] bg-green-500 text-white font-semibold rounded-md">View</button>
<button type="button" className="px-3 py-2 ml-5 w-[100px] h-[40px] bg-red-500 font-semibold text-white rounded-md">Download</button>
</div>
</div>
</form>
</div>
</div>
<div className='mx-20 items-center justify-center '>
<div className='mt-5'>
<div className='max-w-sm ml-4'>
<div className="relative">
<div className="absolute mt-3 flex items-center ps-3 pointer-events-none">
<svg className="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
</svg>
</div>
<input type="search" id="default-search" className="block p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 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="Search " />
</div>
</div>
</div>
<div className="p-4">
<table className="border-2 border-collapse w-full border-[#B7B7B7]">
<thead>
<tr >
<th className="border-2 p-2 border-[#B7B7B7] text-start font-medium bg-[#D9D9D9] w-4/12">
ACTIVITY NAME
</th>
<th className="border-2 p-2 border-[#B7B7B7] text-start font-medium bg-[#D9D9D9] w-4/12 ">
DATE
</th>
<th className="border-2 p-2 border-[#B7B7B7] text-start font-medium bg-[#D9D9D9] w-4/12 " >
SCORE
</th>
<th className="border-2 p-2 border-[#B7B7B7] text-start font-medium bg-[#D9D9D9] w-4/12 " >
COMMENTS
</th>
</tr>
</thead>
<tbody>
<tr>
<td className="border-2 p-2 border-[#B7B7B7] bg-white">
ABC
</td>
<td className="border-2 p-2 border-[#B7B7B7] bg-white">
01/01/2024
</td>
<td className="border-2 p-2 border-[#B7B7B7] bg-white">
5
</td>
<td className="border-2 p-2 border-[#B7B7B7] bg-white">
VERY GOOD
</td>
</tr>
<tr>
<td className="border-2 p-2 border-[#B7B7B7] bg-white">
XYZ
</td>
<td className="border-2 p-2 border-[#B7B7B7] bg-white">
01/01/2024
</td>
<td className="border-2 p-2 border-[#B7B7B7] bg-white">
4
</td>
<td className="border-2 p-2 border-[#B7B7B7] bg-white">
GOOD
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
)
else
return <div classNameName="w-full h-full">
<p className="text-center align-middle pt-14 pb-14 text-blue-500 font-bold">No records to display</p>
</div>
}
export default Exporttable
\ No newline at end of file
src/redux/reducers/exporttableslice.js 0 → 100644
View file @ 61c0029d
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { base_url } from "../../utils/constants";
import axios from "axios";
const initialState = {
totalReporteesData: [],
activitiesData:null,
loading: false,
error: null,
fromDate: null,
toDate: null,
};
export const fetchReportstableData = createAsyncThunk("getreportees", async (data) => {
return await axios.post(`${base_url}/getreportees`, data)
.then((response) => response.data);
});
const exporttableSlice = createSlice({
name: "totalReportees",
initialState,
reducers: {
resetReporteesTableData:() => {
return initialState
},
setPastMonth: (state) => {
const toDate = new Date();
const fromDate = new Date();
fromDate.setMonth(fromDate.getMonth() - 1);
state.fromDate = fromDate;
state.toDate = toDate;
console.log(fromDate,toDate)
},
setPastTwoMonths: (state) => {
const toDate = new Date();
const fromDate = new Date();
fromDate.setMonth(fromDate.getMonth() - 3);
state.fromDate = fromDate;
state.toDate = toDate;
console.log(fromDate,toDate)
},
setPastsixMonths: (state) => {
const toDate = new Date();
const fromDate = new Date();
fromDate.setMonth(fromDate.getMonth() - 6);
state.fromDate = fromDate;
state.toDate = toDate;
console.log(fromDate,toDate)
},
setPasttwelvemonths: (state) => {
const toDate = new Date();
const fromDate = new Date();
fromDate.setMonth(fromDate.getMonth() - 12);
state.fromDate = fromDate;
state.toDate = toDate;
console.log(fromDate,toDate)
},
},
extraReducers: (builder) => {
builder.addCase(fetchReportstableData.pending, (state) => {
state.loading = true;
state.error = "pending";
});
builder.addCase(fetchReportstableData.fulfilled, (state, action) => {
state.loading = false;
state.totalReporteesData = action.payload.data;
state.error = "";
});
builder.addCase(fetchReportstableData.rejected, (state, action) => {
state.loading = false;
state.totalReporteesData = null;
state.error = action.error || "Something went wrong!";
});
},
});
export const {resetReporteesTableData,setPastMonth,setPastTwoMonths,setPastsixMonths,setPasttwelvemonths} = exporttableSlice.actions;
export default exporttableSlice.reducer;
src/redux/reducers/rootReducer.js
View file @ 61c0029d
...@@ -2,12 +2,13 @@ import { combineReducers } from 'redux'; ...@@ -2,12 +2,13 @@ import { combineReducers } from 'redux';
import reporteesReducer from './reporteesSlice'; import reporteesReducer from './reporteesSlice';
import userReducer from './userSlice'; import userReducer from './userSlice';
import reportReducer from './viewreporteeSlice'; import reportReducer from './viewreporteeSlice';
import exporttableReducer from './exporttableslice';
const rootReducer = combineReducers({ const rootReducer = combineReducers({
userDetails: userReducer, userDetails: userReducer,
reportees: reporteesReducer, reportees: reporteesReducer,
reports: reportReducer reports: reportReducer,
totalreportees: exporttableReducer
}); });
export default rootReducer; export default rootReducer;
\ No newline at end of file
src/utils/clearStore.js
View file @ 61c0029d
import {resetUser} from '../redux/reducers/userSlice'; import {resetUser} from '../redux/reducers/userSlice';
import {resetReportees} from '../redux/reducers/reporteesSlice'; import {resetReportees} from '../redux/reducers/reporteesSlice';
import { resetReports } from '../redux/reducers/viewreporteeSlice'; import { resetReports } from '../redux/reducers/viewreporteeSlice';
import {resetReporteesTableData} from '../redux/reducers/exporttableslice';
const clearStore = (dispatch) => { const clearStore = (dispatch) => {
dispatch(resetUser()); dispatch(resetUser());
dispatch(resetReportees()); dispatch(resetReportees());
dispatch(resetReports()) dispatch(resetReports())
dispatch(resetReporteesTableData())
}; };
export default clearStore; export default clearStore;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment