10111098538

Committed 26 Jul 2024 12:17PM UTC coverage: 91.198% (+0.2%) from 91.005%

Build # 10111098538

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #86 from atlp-rwanda/fix-transactions

fix(fix admin dashboard transactions)

Run Details

1154 of 1422 branches covered (81.15%)

Branch coverage included in aggregate %.

184 of 196 new or added lines in 4 files covered. (93.88%)

3 existing lines in 2 files now uncovered.

11890 of 12881 relevant lines covered (92.31%)

12.31 hits per line

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

78.47

/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 { BadgeDollarSign, 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>
        {decodedToken?.role.toLowerCase() !== 'admin' && (
          <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>
        )}
        {decodedToken?.role.toLowerCase() === 'admin' && (
          <NavLink
            to="transaction"
            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' : ''}`
            }
          >
            <BadgeDollarSign />
            Transactions
          </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 { BadgeDollarSign, 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	{decodedToken?.role.toLowerCase() !== 'admin' && (	5!
71	<NavLink	5✔
72	to={'/' + decodedToken?.role.toLowerCase() + '/dashboard/products'}	5!
73	className={({ isActive }) =>	5✔
74	`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!
75	}	5✔
76	>	5✔
77	<img src={one} alt="Products" className="w-5 lg:w-6" /> Products	5✔
78	</NavLink>	5✔
79	)}	5✔
80	{decodedToken?.role.toLowerCase() === 'admin' && (	5!
81	<NavLink	×
82	to="users"	×
83	className={({ isActive }) =>	×
84	`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' : ''}`	×
85	}	×
86	>	×
87	<img src={userIcon} alt="Products" className="w-5 lg:w-6" /> Users	×
88	</NavLink>	×
89	)}	5✔
90	{decodedToken?.role.toLowerCase() === 'admin' && (	5!
NEW 91	<NavLink	×
NEW 92	to="transaction"	×
NEW 93	className={({ isActive }) =>	×
NEW 94	`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' : ''}`	×
NEW 95	}	×
NEW 96	>	×
NEW 97	<BadgeDollarSign />	×
NEW 98	Transactions	×
NEW 99	</NavLink>	×
100	)}	5✔
101	</div>	5✔
102	<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✔
103	<NavLink	5✔
104	to="account"	5✔
105	className={({ isActive }) =>	5✔
106	`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!
107	}	5✔
108	>	5✔
109	<img src={f} alt="Account" className="w-5 lg:w-6" /> Account	5✔
110	</NavLink>	5✔
111	<NavLink	5✔
112	onClick={logoutHandler}	5✔
113	to={'/'}	5✔
114	className={({ isActive }) =>	5✔
115	`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✔
116	}	5✔
117	>	5✔
118	<img src={two} alt="Logout" className="w-5 lg:w-6" /> Logout	5✔
119	</NavLink>	5✔
120	</div>	5✔
121	</div>	5✔
122	);	5✔
123	};	5✔
124		1✔
125	export default DashboardSideBar;	1✔

atlp-rwanda / knights-ecomm-fe / 10111098538

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