126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
import React from '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">
|
|
<HeartPulse size={28} color="#a5b4fc" />
|
|
<span>PharmaAI</span>
|
|
</div>
|
|
|
|
<nav className="sidebar-nav">
|
|
<NavLink
|
|
to="/"
|
|
className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
|
|
>
|
|
<LayoutDashboard className="nav-item-icon" />
|
|
<span>Dashboard</span>
|
|
</NavLink>
|
|
|
|
<NavLink
|
|
to="/pharmacy"
|
|
className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
|
|
>
|
|
<Pill className="nav-item-icon" />
|
|
<span>Pharmacy</span>
|
|
</NavLink>
|
|
|
|
<NavLink
|
|
to="/prescriptions"
|
|
className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
|
|
>
|
|
<ClipboardList className="nav-item-icon" />
|
|
<span>Prescriptions</span>
|
|
</NavLink>
|
|
|
|
<NavLink
|
|
to="/patients"
|
|
className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
|
|
>
|
|
<Users className="nav-item-icon" />
|
|
<span>Patients</span>
|
|
</NavLink>
|
|
|
|
<NavLink
|
|
to="/registers"
|
|
className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
|
|
>
|
|
<ClipboardList className="nav-item-icon" />
|
|
<span>Registers</span>
|
|
</NavLink>
|
|
|
|
<NavLink
|
|
to="/history"
|
|
className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
|
|
>
|
|
<Clock className="nav-item-icon" />
|
|
<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' : ''}`}
|
|
>
|
|
<Box className="nav-item-icon" />
|
|
<span>Inventory</span>
|
|
</NavLink>
|
|
|
|
<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' : ''}`}
|
|
>
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|