feat: implement core pharmacy management dashboard and navigation infrastructure

src/components/Sidebar.tsx

@@ -1,8 +1,24 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
-import { LayoutDashboard, Users, Pill, Settings, HeartPulse, Box, Clock, ClipboardList } from 'lucide-react';
+import { NavLink, useNavigate } from 'react-router-dom';
+import { LayoutDashboard, Users, Pill, Settings, HeartPulse, Box, Clock, ClipboardList, Activity, Truck, LogOut } from 'lucide-react';
+import { useAuth } from '../contexts/AuthContext';
+import { logoutPharmacist } from '../services/api';
 
 const Sidebar: React.FC = () => {
+  const { logout } = useAuth();
+  const navigate = useNavigate();
+
+  const handleLogout = async () => {
+    try {
+      await logoutPharmacist();
+    } catch (error) {
+      console.error('Failed to call logout API, proceeding to clear local state', error);
+    } finally {
+      logout();
+      navigate('/login');
+    }
+  };
+
   return (
     <aside className="sidebar">
       <div className="sidebar-logo">
@@ -35,7 +51,6 @@ const Sidebar: React.FC = () => {
           <span>Prescriptions</span>
         </NavLink>
 
-        {/* 
         <NavLink 
           to="/patients" 
           className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
@@ -43,7 +58,6 @@ const Sidebar: React.FC = () => {
           <Users className="nav-item-icon" />
           <span>Patients</span>
         </NavLink>
-        */}
 
         <NavLink 
           to="/registers" 
@@ -61,6 +75,14 @@ const Sidebar: React.FC = () => {
           <span>History</span>
         </NavLink>
 
+        <NavLink 
+          to="/stock-movements" 
+          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
+        >
+          <Activity className="nav-item-icon" />
+          <span>Stock Movements</span>
+        </NavLink>
+
         <NavLink 
           to="/inventory" 
           className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
@@ -68,9 +90,15 @@ const Sidebar: React.FC = () => {
           <Box className="nav-item-icon" />
           <span>Inventory</span>
         </NavLink>
-      </nav>
-      
-      <div className="sidebar-footer" style={{ marginTop: 'auto' }}>
+
+        <NavLink 
+          to="/suppliers" 
+          className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
+        >
+          <Truck className="nav-item-icon" />
+          <span>Suppliers</span>
+        </NavLink>
+        
         <NavLink 
           to="/settings" 
           className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
@@ -78,6 +106,17 @@ const Sidebar: React.FC = () => {
           <Settings className="nav-item-icon" />
           <span>Settings</span>
         </NavLink>
+      </nav>
+      
+      <div className="sidebar-footer" style={{ marginTop: 'auto' }}>
+        <button 
+          onClick={handleLogout} 
+          className="nav-item" 
+          style={{ width: '100%', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', color: 'inherit', padding: '0.75rem 1rem', display: 'flex', alignItems: 'center', gap: '0.75rem' }}
+        >
+          <LogOut className="nav-item-icon" />
+          <span style={{ fontSize: '1rem' }}>Logout</span>
+        </button>
       </div>
     </aside>
   );