10060387859

Committed 23 Jul 2024 10:55AM UTC coverage: 90.757% (+0.09%) from 90.671%

Build # 10060387859

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #73 from atlp-rwanda/ft-order-management

#68 Implement vendor and admin order management feature

Run Details

1079 of 1360 branches covered (79.34%)

Branch coverage included in aggregate %.

1519 of 1727 new or added lines in 21 files covered. (87.96%)

3 existing lines in 2 files now uncovered.

11332 of 12315 relevant lines covered (92.02%)

12.17 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

84.5

/src/components/Dashboard/DashboardSideBar/DashboardSideBar.tsx

import React from 'react';
import { NavLink } from 'react-router-dom';
import one from '/1.svg';
import two from '/3.svg';
import three from '/Component 3.svg';
import f from '/user-square.svg';
import dashboardIcon from '/Dashboard.svg';
import { CircleX } from 'lucide-react';
import userIcon from '../../../assets/Enquiry.svg';
import { useJwt } from 'react-jwt';
import { useSelector } from 'react-redux';
import { RootState } from '../../../redux/store';
import { DecodedToken } from '../../../pages/Authentication/Login';
import { AppDispatch } from '../../../redux/store';
import { clearCredentials } from '../../../redux/reducers/authReducer';
import { useDispatch } from 'react-redux';
import { clearUser } from '../../../redux/reducers/userReducer';
import { useNavigate } from 'react-router-dom';

interface DashboardSideBarProps {
  openNav: boolean;
  setOpenNav: (open: boolean) => void;
}

const DashboardSideBar: React.FC<DashboardSideBarProps> = ({ openNav, setOpenNav }) => {
  const { userToken } = useSelector((state: RootState) => state.auth);
  const { decodedToken } = useJwt<DecodedToken>(userToken);
  const navigate = useNavigate();
  const dispatch = useDispatch<AppDispatch>();

  const logoutHandler = () => {
    dispatch(clearCredentials());
    dispatch(clearUser());
    navigate('/');
  };

  return (
    <div
      data-testid="sidebar"
      className={`fixed h-[100vh] inset-y-0 left-0 z-20 bg-white transition-transform transform ${openNav ? 'translate-x-0' : '-translate-x-full'} md:translate-x-0 md:relative md:z-10 flex flex-col gap-8 w-[280px] md:w-[220px] lg:w-[270px] p-4 min-h-screen border-r-[1px] border-neutral-300 text-black ease-in-out duration-300`}
    >
      <NavLink
        to={'/' + decodedToken?.role.toLowerCase() + '/dashboard'}
        className=" text-xl lg:text-2xl font-bold text-primary py-2"
      >
        Knights
      </NavLink>
      <button onClick={() => setOpenNav(false)} className="md:hidden absolute right-4 top-6">
        <CircleX />
      </button>
      <div className="flex flex-col gap-1 text-[#7c7c7c] items-start w-full pt-8 md:pt-3 text-[.75rem] xmd:text-[.82rem] lg:text-[.9rem]">
        <NavLink
          to={'/' + decodedToken?.role.toLowerCase() + '/dashboard'}
          end
          className={({ isActive }) =>
            `flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`
          }
        >
          <img src={dashboardIcon} alt="Dashboard" className="w-5 lg:w-6" />
          Dashboard
        </NavLink>
        <NavLink
          to="orders"
          className={({ isActive }) =>
            `flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`
          }
        >
          <img src={three} alt="Orders" className="w-5 lg:w-6" /> Orders
        </NavLink>
        <NavLink
          to={'/' + decodedToken?.role.toLowerCase() + '/dashboard/products'}
          className={({ isActive }) =>
            `flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`
          }
        >
          <img src={one} alt="Products" className="w-5 lg:w-6" /> Products
        </NavLink>
        {decodedToken?.role.toLowerCase() === 'admin' && (
          <NavLink
            to="users"
            className={({ isActive }) =>
              `flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`
            }
          >
            <img src={userIcon} alt="Products" className="w-5 lg:w-6" /> Users
          </NavLink>
        )}
      </div>
      <div className="mt-auto md:pt-4 text-[#7c7c7c] flex flex-col gap-1 w-full pt-4 md:border-t md:border-neutral-300 text-[.75rem] xmd:text-[.82rem] lg:text-[.9rem] ">
        <NavLink
          to="account"
          className={({ isActive }) =>
            `flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`
          }
        >
          <img src={f} alt="Account" className="w-5 lg:w-6" /> Account
        </NavLink>
        <NavLink
          onClick={logoutHandler}
          to={'/'}
          className={({ isActive }) =>
            `flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`
          }
        >
          <img src={two} alt="Logout" className="w-5 lg:w-6" /> Logout
        </NavLink>
      </div>
    </div>
  );
};

export default DashboardSideBar;

1	import React from 'react';	1✔
2	import { NavLink } from 'react-router-dom';	1✔
3	import one from '/1.svg';	1✔
4	import two from '/3.svg';	1✔
5	import three from '/Component 3.svg';	1✔
6	import f from '/user-square.svg';	1✔
7	import dashboardIcon from '/Dashboard.svg';	1✔
8	import { CircleX } from 'lucide-react';	1✔
9	import userIcon from '../../../assets/Enquiry.svg';	1✔
10	import { useJwt } from 'react-jwt';	1✔
11	import { useSelector } from 'react-redux';	1✔
12	import { RootState } from '../../../redux/store';	1✔
13	import { DecodedToken } from '../../../pages/Authentication/Login';	1✔
14	import { AppDispatch } from '../../../redux/store';	1✔
15	import { clearCredentials } from '../../../redux/reducers/authReducer';	1✔
16	import { useDispatch } from 'react-redux';	1✔
17	import { clearUser } from '../../../redux/reducers/userReducer';	1✔
18	import { useNavigate } from 'react-router-dom';	1✔
19		1✔
20	interface DashboardSideBarProps {	1✔
21	openNav: boolean;	1✔
22	setOpenNav: (open: boolean) => void;	1✔
23	}	1✔
24		1✔
25	const DashboardSideBar: React.FC<DashboardSideBarProps> = ({ openNav, setOpenNav }) => {	1✔
26	const { userToken } = useSelector((state: RootState) => state.auth);	5✔
27	const { decodedToken } = useJwt<DecodedToken>(userToken);	5✔
28	const navigate = useNavigate();	5✔
29	const dispatch = useDispatch<AppDispatch>();	5✔
30		5✔
31	const logoutHandler = () => {	5✔
32	dispatch(clearCredentials());	×
33	dispatch(clearUser());	×
34	navigate('/');	×
35	};	×
36		5✔
37	return (	5✔
38	<div	5✔
39	data-testid="sidebar"	5✔
40	className={`fixed h-[100vh] inset-y-0 left-0 z-20 bg-white transition-transform transform ${openNav ? 'translate-x-0' : '-translate-x-full'} md:translate-x-0 md:relative md:z-10 flex flex-col gap-8 w-[280px] md:w-[220px] lg:w-[270px] p-4 min-h-screen border-r-[1px] border-neutral-300 text-black ease-in-out duration-300`}	5✔
41	>	5✔
42	<NavLink	5✔
43	to={'/' + decodedToken?.role.toLowerCase() + '/dashboard'}	5!
44	className=" text-xl lg:text-2xl font-bold text-primary py-2"	5✔
45	>	5✔
46	Knights	5✔
47	</NavLink>	5✔
48	<button onClick={() => setOpenNav(false)} className="md:hidden absolute right-4 top-6">	5✔
49	<CircleX />	5✔
50	</button>	5✔
51	<div className="flex flex-col gap-1 text-[#7c7c7c] items-start w-full pt-8 md:pt-3 text-[.75rem] xmd:text-[.82rem] lg:text-[.9rem]">	5✔
52	<NavLink	5✔
53	to={'/' + decodedToken?.role.toLowerCase() + '/dashboard'}	5!
54	end	5✔
55	className={({ isActive }) =>	5✔
56	`flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`	5!
57	}	5✔
58	>	5✔
59	<img src={dashboardIcon} alt="Dashboard" className="w-5 lg:w-6" />	5✔
60	Dashboard	5✔
61	</NavLink>	5✔
62	<NavLink	5✔
63	to="orders"	5✔
64	className={({ isActive }) =>	5✔
65	`flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`	5!
66	}	5✔
67	>	5✔
68	<img src={three} alt="Orders" className="w-5 lg:w-6" /> Orders	5✔
69	</NavLink>	5✔
70	<NavLink	5✔
71	to={'/' + decodedToken?.role.toLowerCase() + '/dashboard/products'}	5!
72	className={({ isActive }) =>	5✔
73	`flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`	5!
74	}	5✔
75	>	5✔
76	<img src={one} alt="Products" className="w-5 lg:w-6" /> Products	5✔
77	</NavLink>	5✔
78	{decodedToken?.role.toLowerCase() === 'admin' && (	5!
UNCOV 79	<NavLink	×
UNCOV 80	to="users"	×
81	className={({ isActive }) =>	×
NEW 82	`flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`	×
83	}	×
84	>	×
NEW 85	<img src={userIcon} alt="Products" className="w-5 lg:w-6" /> Users	×
86	</NavLink>	×
87	)}	5✔
88	</div>	5✔
89	<div className="mt-auto md:pt-4 text-[#7c7c7c] flex flex-col gap-1 w-full pt-4 md:border-t md:border-neutral-300 text-[.75rem] xmd:text-[.82rem] lg:text-[.9rem] ">	5✔
90	<NavLink	5✔
91	to="account"	5✔
92	className={({ isActive }) =>	5✔
93	`flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`	5!
94	}	5✔
95	>	5✔
96	<img src={f} alt="Account" className="w-5 lg:w-6" /> Account	5✔
97	</NavLink>	5✔
98	<NavLink	5✔
99	onClick={logoutHandler}	5✔
100	to={'/'}	5✔
101	className={({ isActive }) =>	5✔
102	`flex items-center gap-1 px-3 py-2 w-full rounded transition-all duration-300 ease-in-out hover:bg-primary hover:text-white ${isActive ? 'bg-primary text-white' : ''}`	5✔
103	}	5✔
104	>	5✔
105	<img src={two} alt="Logout" className="w-5 lg:w-6" /> Logout	5✔
106	</NavLink>	5✔
107	</div>	5✔
108	</div>	5✔
109	);	5✔
110	};	5✔
111		1✔
112	export default DashboardSideBar;	1✔

atlp-rwanda / knights-ecomm-fe / 10060387859

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous