Commit 1a7c084e authored by Ramadevi Guduri's avatar Ramadevi Guduri

routing chages

parent 748b9923
......@@ -13,10 +13,15 @@ function App() {
<BrowserRouter>
<Routes>
<Route path='/' element={<Home />}/>
<Route path="/dashboard" element={<Layout><Dashboard/></Layout>}/>
{/* profile page */}
<Route path="/dashboard" element={<Layout><AdminProfile/></Layout>}/>
{/* reportees page */}
<Route path="/myreportees" element={<Layout><Dashboard/></Layout>}/>
{/*adding activities*/}
<Route path="/viewreportee" element={<Layout><Viewreportee/></Layout>}/>
{/* fetch reports */}
<Route path="/reportees" element={<Layout><Exporttable/></Layout>}/>
<Route path="/adminProfile" element={<Layout><AdminProfile/></Layout>}/>
<Route path="/*" element={<PageNotFound/>}/>
</Routes>
......
......@@ -50,10 +50,9 @@ import ReportsIcon from '../../assets/icons/reportsIcon';
import AdminProfileIcon from '../../assets/icons/adminProfileIcon'; // Assuming you have an icon for Admin Profile
const menus = [
{ title: "Dashboard", path: '/dashboard', selectPaths: ['dashboard', 'viewreportee'], icon: <DashboardIcon /> },
{ title: "Dashboard", path: '/dashboard', selectPaths: ['dashboard'], icon: <DashboardIcon /> },
{ title: "My Reportees", path: '/myreportees', selectPaths: ['myreportees', 'viewreportee'], icon: <ReportsIcon /> },
{ title: "Reports", path: '/reportees', selectPaths:['reportees'], icon: <ReportsIcon /> },
// Add Admin Profile menu item
{ title: "Admin Profile", path: '/adminProfile', selectPaths: ['adminProfile'], icon: <AdminProfileIcon /> },
]
function Sidebar() {
......@@ -62,9 +61,9 @@ function Sidebar() {
const selected = url.split('/').at(-1)
return (
<div className="w-[20%] flex items-center flex-col overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
<div className="w-[20%] flex bg-blue-700 text-white items-center flex-col overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
<nav
className="hs-accordion-group p-6 w-full flex flex-col flex-wrap"
className="hs-accordion-group mt-1 w-full flex flex-col flex-wrap"
data-hs-accordion-always-open
>
<ul className="space-y-1.5">
......@@ -72,11 +71,11 @@ function Sidebar() {
menus.map((menu) => (
<li key={menu.path}>
<Link
className={`flex items-center ${menu.selectPaths.includes(selected) && 'bg-gray-100'} gap-x-3.5 py-2 px-2.5 text-sm text-slate-700 rounded-lg hover:bg-gray-100 `}
className={`flex ${menu.selectPaths.includes(selected) && 'bg-blue-500 ' } gap-x-3.5 py-2 lg:px-5 min-sm:px-4 text-sm text-slate-700 hover:bg-blue-500 text-white`}
to={menu.path}
>
<span>{menu.icon}</span>
{menu.title}
<p className="flex items-center">{menu.icon} <span className="ps-2"> {menu.title}</span></p>
</Link>
</li>
))
......
......@@ -59,10 +59,10 @@ function Table({headers, data,loading, handleSorting }) {
if(loading) return <Loading/>
else
return (
<div className={` overflow-auto sm:rounded-lg p-4 bg-gray-100`}>
<table className="w-full text-sm text-left rtl:text-right text-gray-500 bg-transparent justify-center border-separate border-spacing-y-2">
<thead className="text-xs text-gray-700 uppercase bg-gray-50">
<tr className="mb-2">
<div className={` overflow-auto sm:rounded-lg p-4 `}>
<table className="w-full text-sm text-left rtl:text-right bg-transparent justify-center ">
<thead className=" uppercase bg-white font-extrabold">
<tr className="mb-2 border-2 border-black-200">
{headers?.map((item,index) => (
<th key={index} scope="col" className={`px-6 py-4 w-[${item.width}]`} >
{ item.renderHeader ? item.renderHeader(item.title) : item.isSorting ?
......@@ -80,7 +80,7 @@ function Table({headers, data,loading, handleSorting }) {
(data?.length)?<tbody >
{
data?.map((item, index) => (
<tr key={item.id} className="bg-white hover:bg-gray-300 " >
<tr key={item.id} className="bg-[#eef5ff] font-medium hover:bg-white " >
{
headers?.map(({render, id}) => (
<td className="px-6 py-2 " >
......
......@@ -6,8 +6,8 @@ import Tabs from "./tabs";
const AdminProfile = () => {
const dispatch = useDispatch();
const { user,error,loading } = useSelector((state) => state.userDetails); // Get user data from Redux store
const { user, error, loading } = useSelector((state) => state.userDetails); // Get user data from Redux store
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
......@@ -18,50 +18,58 @@ const AdminProfile = () => {
<div className="p-4" >
<div className="bg-white p-3 rounded-md">
<div className="flex justify-between">
{user && (
{user && (<>
<div className="flex items-center">
<div>
<p className="font-medium mb-2">
Employee Name
</p>
<p className="font-medium">
<p className="font-medium mb-2">
Employee Id
</p>
<p className="font-medium">
Email Id
</p>
</div>
<div>
<p className="mb-2"><span className="font-medium">:</span> {user.empName}</p>
<p><span className="font-medium">:</span> {user.empId}</p>
<p className="mb-2"><span className="font-medium">:</span> {user.empId}</p>
<p><span className="font-medium">:</span> {user.empEmail}</p>
</div>
</div>
)}
<div className="flex items-center">
<div>
<p className="font-medium mb-2">
Designation
</p>
<p className="font-medium">
Role
</p>
</div>
<div>
<p className="mb-2"><span className="font-medium">:</span> {user.designation}</p>
<p><span className="font-medium">:</span> {user.techStack}</p>
</div>
</div>
<div className="flex flex-col justify-center items-center">
<div className={`w-[40px] h-[40px] rounded-full flex items-center text-white justify-center ${scoreColor(user.score)}`}>
<span className="text-lg font-bold">{user.score}</span>
<div className="flex items-center">
<div>
<p className="font-medium mb-2">
Designation
</p>
<p className="font-medium mb-2">
Role
</p>
<p className="font-medium">
Project
</p>
</div>
<div>
<p className="mb-2"><span className="font-medium">:</span> {user.designation}</p>
<p className="mb-2"><span className="font-medium">:</span> {user.techStack}</p>
<p><span className="font-medium">:</span> {user.project}</p>
</div>
</div>
<div className="">
<span className="text-blue-400 font-semibold">Total Score</span>
<div className="flex flex-col justify-center items-center">
<div className={`w-[40px] h-[40px] rounded-full flex items-center text-white justify-center ${scoreColor(user.score)}`}>
<span className="text-lg font-bold">{user.score}</span>
</div>
<div className="">
<span className="text-blue-400 font-semibold">Total Score</span>
</div>
</div>
</div>
</>
)}
</div>
</div>
<div className="mt-10">
<div className="mt-1">
< Tabs />
</div>
......
......@@ -8,11 +8,8 @@ import Loading from "../../components/loading Component/Loading";
const Tabs = () => {
const [index, setIndex] = useState(0);
const dispatch = useDispatch();
const { reports, loading, error, dutiesReports, initiativeReports } =
useSelector((state) => state.reports);
const { loading, error, dutiesReports, initiativeReports } =useSelector((state) => state.reports);
const { user } = useSelector((state) => state.userDetails);
// console.log(dutiesReports);
// console.log(initiativeReports);
const fetchActivities = (type) => {
const data = {
empId: user?.empId,
......@@ -20,7 +17,6 @@ const Tabs = () => {
page: 1,
perPage: 5,
};
console.log(data);
dispatch(fetchProfileReporteeActivities(data));
};
useEffect(() => {
......@@ -64,7 +60,10 @@ const Tabs = () => {
setIndex(0);
fetchActivities("duties");
}}
className="inline-block p-4 text-blue-600 border-b-2 border-blue-600 dark:text-blue-500 "
className={`inline-block p-4 border-b-2 border-blue-600 ${index === 0
? 'text-blue-600'
: 'border-transparent hover:text-blue-300 hover:border-blue-300'
}`}
>
Duties
</button>
......@@ -75,7 +74,10 @@ const Tabs = () => {
setIndex(index + 1);
fetchActivities("initiative");
}}
className="inline-block p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 "
className={`inline-block p-4 border-b-2 border-blue-600 ${index >0
? 'text-blue-600'
: 'border-transparent hover:text-blue-300 hover:border-blue-300'
}`}
>
Initiatives
</button>
......
......@@ -17,7 +17,7 @@ function Layout({children}) {
<Header isOpen={isOpen} />
<div className="flex pt-[85px]">
<Sidebar/>
<div className="bg-[#E9EDEE] w-full overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
<div className="bg-[#fafafb] w-full overflow-auto" style={{ height: `calc(${windowHeight}px - 87px)` }}>
{children}
</div>
{url.includes('/viewreportee') && <LeftSidebar/>}
......
import React from 'react'
function Exporttable() {
return (
<div>
Exporttable
</div>
)
}
export default Exporttable;
\ No newline at end of file
export const styles = {
genarateReportContainer: "overflow-auto sm:rounded-lg p-4 bg-[#E9EDEE] ",
genarateReportContainer: "overflow-auto sm:rounded-lg p-4 bg-gray-50 ",
textBlueHeading: "text-blue-800 py-3 pl-2 text-center fond-bold text-2xl",
formContainer: "p-2 text-[12px] mb-4",
flexContainer: "flex items-center justify-between",
......
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