Logout functionality

src/App.jsx

@@ -20,6 +20,7 @@ import {
     AddDrug,
     Medication,
     Alarms,
+    DispenseDrugByID,
 } from './pages';
 
 import { action as registerAction } from './pages/Register';
@@ -62,6 +63,10 @@ const router = createBrowserRouter([
                         path: 'dispense',
                         element: <DispenseDrug />,
                     },
+                    {
+                        path: 'dispense/:id',
+                        element: <DispenseDrugByID />,
+                    },
                     {
                         path: 'alerts',
                         element: <Alarms />,

src/components/NavLinks.jsx

@@ -1,30 +1,73 @@
 import { useDashboardContext } from '../pages/Dashboard';
-import links from '../utilities/links';
+import { linksAdmin, linksInventoryManager, linksClerk } from '../utilities/links';
 import { NavLink } from 'react-router-dom';
 
 const NavLinks = ({ isBigSidebar }) => {
-    const { toggleSidebar, user } = useDashboardContext();
-    console.log(user);
-    return (
-        <div className="nav-links">
-            {links.map((link) => {
-                const { text, path, icon } = link;
-                return (
-                    <NavLink
-                        to={path}
-                        key={text}
-                        className="nav-link"
-                        onClick={isBigSidebar ? 'null' : toggleSidebar}
-                        // This makes it so dashboard doesn't always show active class
-                        end
-                    >
-                        <span className="icon">{icon}</span>
-                        {text}
-                    </NavLink>
-                );
-            })}
-        </div>
-    );
+    const { toggleSidebar, role } = useDashboardContext();
+
+    if (role === 'admin') {
+        return (
+            <div className="nav-links">
+                {linksAdmin.map((link) => {
+                    const { text, path, icon } = link;
+                    return (
+                        <NavLink
+                            to={path}
+                            key={text}
+                            className="nav-link"
+                            onClick={isBigSidebar ? 'null' : toggleSidebar}
+                            end
+                        >
+                            <span className="icon">{icon}</span>
+                            {text}
+                        </NavLink>
+                    );
+                })}
+            </div>
+        );
+    }
+    if (role === 'inventoryManager') {
+        return (
+            <div className="nav-links">
+                {linksInventoryManager.map((link) => {
+                    const { text, path, icon } = link;
+                    return (
+                        <NavLink
+                            to={path}
+                            key={text}
+                            className="nav-link"
+                            onClick={isBigSidebar ? 'null' : toggleSidebar}
+                            end
+                        >
+                            <span className="icon">{icon}</span>
+                            {text}
+                        </NavLink>
+                    );
+                })}
+            </div>
+        );
+    }
+    if (role === 'clerk') {
+        return (
+            <div className="nav-links">
+                {linksClerk.map((link) => {
+                    const { text, path, icon } = link;
+                    return (
+                        <NavLink
+                            to={path}
+                            key={text}
+                            className="nav-link"
+                            onClick={isBigSidebar ? 'null' : toggleSidebar}
+                            end
+                        >
+                            <span className="icon">{icon}</span>
+                            {text}
+                        </NavLink>
+                    );
+                })}
+            </div>
+        );
+    }
 };
 
 export default NavLinks;

src/pages/AllDrugs.jsx

@@ -1,18 +1,22 @@
 import styled from 'styled-components';
 import { IoIosSearch } from 'react-icons/io';
 import { FaFilter } from 'react-icons/fa';
-
+import { AiFillMinusCircle } from 'react-icons/ai';
 import { useEffect, useState } from 'react';
 import FilterSearch from './FilterSearch';
-
 import { useLocation } from 'react-router-dom';
 import LiveSearch from '../components/LiveSearch';
-//import { dataListAnatomy } from '@chakra-ui/react/anatomy';
 import Pagination from '../components/Pagination';
 import { useNavigate } from 'react-router-dom';
 import { FaEye, FaEdit, FaTrash } from 'react-icons/fa';
+import { useDashboardContext } from './Dashboard';
+// import { TbChevronsDownLeft } from 'react-icons/tb';
 
 const AllDrugs = () => {
+    const { user, store } = useDashboardContext();
+    const roleOfUser = user.role;
+    console.log(roleOfUser);
+    console.log(store);
     const columnLabels = [
         'name',
         'genericName',
@@ -21,13 +25,16 @@ const AllDrugs = () => {
         'expirationDate',
         'lot',
         'ndcNumber',
-        'view/edit/delete',
+        'view/edit/delete/dispense',
     ];
 
     const editNavigate = useNavigate();
 
     const handleEdit = (drugId) => {
-        editNavigate(`/dashboard/edit/${drugId}`); // Navigate to the Edit Page with the drug ID
+        editNavigate(`/dashboard/edit/${drugId}`);
+    };
+    const handleDispense = (drugId) => {
+        editNavigate(`/dashboard/dispense/${drugId}`);
     };
 
     const [data, setData] = useState([]);
@@ -56,6 +63,7 @@ const AllDrugs = () => {
                 return response.json();
             })
             .then((data) => {
+                //  const filteredData = data.data.filter((item) => item.store === store);
                 if (alarmFilterData) {
                     setData(alarmFilterData);
                     setFilterData(alarmFilterData);
@@ -91,8 +99,6 @@ const AllDrugs = () => {
 
     return (
         <Wrapper>
-            {/*  */}
-
             <div className="centered-container">
                 <div className="filter-search-box">
                     <div className="left-filter-box">
@@ -117,19 +123,16 @@ const AllDrugs = () => {
                     </div>
                 )}
             </div>
-            {/*  */}
             <div className="grid-container">
-                {/* Render column headers */}
                 {columnLabels.map((label, index) => (
                     <div key={index} className="grid-item grid-header">
                         {label}
                     </div>
                 ))}
-                {/* Render rows dynamically */}
                 {getCurrentItems().map((drug, rowIndex) =>
                     columnLabels.map((label, colIndex) => (
                         <div key={`${rowIndex}-${colIndex}`} className="grid-item">
-                            {label === 'view/edit/delete' ? (
+                            {label === 'view/edit/delete/dispense' ? (
                                 <div className="actions">
                                     <button className="action-button view">
                                         <FaEye />
@@ -143,6 +146,12 @@ const AllDrugs = () => {
                                     <button className="action-button delete">
                                         <FaTrash />
                                     </button>
+                                    <button
+                                        className="action-button dispense"
+                                        onClick={() => handleDispense(drug._id)}
+                                    >
+                                        <AiFillMinusCircle />
+                                    </button>
                                 </div>
                             ) : (
                                 drug[label] || ''
@@ -282,6 +291,9 @@ const Wrapper = styled.section`
     .action-button.view {
         color: var(--color-blue-dark);
     }
+    .action-button.dispense {
+        color: var(--color-blue-dark);
+    }
 
     .action-button.edit {
         color: var(--color-green-dark);

src/pages/Dashboard.jsx

@@ -1,40 +1,42 @@
-import { useState, createContext, useContext } from 'react';
-import { Outlet, useLoaderData } from 'react-router-dom';
+import { useState, createContext, useContext, redirect } from 'react';
+import { Outlet, useLoaderData, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { BigSidebar, Navbar, SmallSidebar } from '../components';
 import customFetch from '../util/customFetch';
 import Alarms from './Alarms';
 
 export const loader = async () => {
     try {
-        // Retrieve the token from localStorage
         const token = localStorage.getItem('token');
         const userId = localStorage.getItem('userId');
-
-        // Make a GET request to the endpoint
         const response = await customFetch.get(`/users/${userId}`, {
             headers: {
-                Authorization: `Bearer ${token}`, // Add the token to the Authorization header
+                Authorization: `Bearer ${token}`,
             },
         });
-
-        // Handle the response
-        console.log('User Details:', response.data);
-        return response.data; // Return the user details
+        // console.log(response.data);
+        return response.data;
     } catch (error) {
-        // Handle errors
         console.error('Error fetching user details:', error?.response?.data || error.message);
-        throw error; // Re-throw the error for further handling if necessary
+        return redirect('/');
     }
 };
 
 const DashboardContext = createContext();
 
 const Dashboard = () => {
+    const navigate = useNavigate();
     const data = useLoaderData();
-    console.log(data.data.name);
 
-    const user = { name: data.data.name };
+    const user = data.data;
+    const userName = data.data.name;
+    const userId = data.data._id;
+    const role = data.data.role;
+    const store = data.data.store;
+    // console.log(`username : ${userName}`);
+    // console.log(`user id : ${userId}`);
+    // console.log(`user role : ${role}`);
+    // console.log(`user store : ${store}`);
     const [showSidebar, setShowSidebar] = useState(false);
     const [showAlarm, setShowAlarm] = useState(false);
 
@@ -48,17 +50,24 @@ const Dashboard = () => {
 
     const logoutUser = async () => {
         console.log('logout user');
+        localStorage.clear();
+        navigate('/');
     };
 
     return (
         <DashboardContext.Provider
             value={{
+                data,
                 user,
                 showSidebar,
                 toggleSidebar,
                 logoutUser,
                 toggleAlarm,
                 showAlarm,
+                role,
+                store,
+                userId,
+                userName,
             }}
         >
             <Wrapper>