Skip to content

N
nisum-scorecard
Commit 69c42b34 authored by Venkaiah Naidu Singamchetty's avatar Venkaiah Naidu Singamchetty
Browse files
Options

Merge branch 'scorecarduidesigns' into 'master' 

Scorecarduidesigns

See merge request !72
parents d91794fd f28229a9
Show whitespace changes
Inline Side-by-side
Showing with 243 additions and 5 deletions
src/App.js
View file @ 69c42b34
......@@ -5,7 +5,7 @@ import Layout from './pages/layout';
import Viewreportee from './pages/viewReportee';
import './App.css';
import PageNotFound from './pages/pagenotfound/PageNotFound';
import Exporttable from './pages/reportexport'
function App() {
return (
<BrowserRouter>
......@@ -13,6 +13,7 @@ function App() {
<Route path='/' element={<Home />}/>
<Route path="/dashboard" element={<Layout><Dashboard/></Layout>}/>
<Route path="/viewreportee" element={<Layout><Viewreportee/></Layout>}/>
<Route path="/reportees" element={<Layout><Exporttable/></Layout>}/>
<Route path="/*" element={<PageNotFound/>}/>
</Routes>
</BrowserRouter>
......
src/components/sidebar/index.jsx
View file @ 69c42b34
......@@ -37,7 +37,7 @@ function Sidebar() {
</li>
<li>
<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
className="size-4"
......
src/pages/reportexport/index.jsx 0 → 100644
View file @ 69c42b34
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 @ 69c42b34
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 @ 69c42b34
......@@ -2,12 +2,13 @@ import { combineReducers } from 'redux';
import reporteesReducer from './reporteesSlice';
import userReducer from './userSlice';
import reportReducer from './viewreporteeSlice';
import exporttableReducer from './exporttableslice';
const rootReducer = combineReducers({
userDetails: userReducer,
reportees: reporteesReducer,
reports: reportReducer
reports: reportReducer,
totalreportees: exporttableReducer
});
export default rootReducer;
\ No newline at end of file
src/utils/clearStore.js
View file @ 69c42b34
import {resetUser} from '../redux/reducers/userSlice';
import {resetReportees} from '../redux/reducers/reporteesSlice';
import { resetReports } from '../redux/reducers/viewreporteeSlice';
import {resetReporteesTableData} from '../redux/reducers/exporttableslice';
const clearStore = (dispatch) => {
dispatch(resetUser());
dispatch(resetReportees());
dispatch(resetReports())
dispatch(resetReporteesTableData())
};
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