TenX PM
87e9346d62
- NestJS backend with 11 modules: Auth, Employees, Departments, Attendance, Leaves, Payroll, Reimbursements, Announcements, Tax, Reports, Admin - JWT authentication with refresh tokens, role-based access (employee/hr_admin/super_admin) - MongoDB schemas with Mongoose for all entities - PDF payslip generation with pdfkit - OpenTelemetry tracing to SigNoz - Automatic database seeding on first startup - Next.js 14 frontend with App Router, Tailwind CSS - 25 pages covering all employee, HR admin, and super admin workflows - Multi-stage Dockerfile with nginx proxy - test-manifest.json for E2E testing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
118 lines
4.3 KiB
TypeScript
118 lines
4.3 KiB
TypeScript
'use client';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { useAuth } from '@/lib/auth-context';
|
|
|
|
interface NavItem {
|
|
href: string;
|
|
label: string;
|
|
icon: string;
|
|
}
|
|
|
|
const employeeNav: NavItem[] = [
|
|
{ href: '/dashboard', label: 'Dashboard', icon: '⊞' },
|
|
{ href: '/profile', label: 'My Profile', icon: '👤' },
|
|
{ href: '/attendance', label: 'Attendance', icon: '📅' },
|
|
{ href: '/leave', label: 'Leave', icon: '🏖' },
|
|
{ href: '/payslips', label: 'Payslips', icon: '💰' },
|
|
{ href: '/reimbursements', label: 'Reimbursements', icon: '📄' },
|
|
{ href: '/tax', label: 'Tax & Form 16', icon: '🧾' },
|
|
{ href: '/announcements', label: 'Announcements', icon: '📢' },
|
|
];
|
|
|
|
const hrAdminNav: NavItem[] = [
|
|
{ href: '/admin/dashboard', label: 'Dashboard', icon: '⊞' },
|
|
{ href: '/admin/employees', label: 'Employees', icon: '👥' },
|
|
{ href: '/admin/attendance', label: 'Attendance', icon: '📅' },
|
|
{ href: '/admin/leaves', label: 'Leave Approvals', icon: '✅' },
|
|
{ href: '/admin/payroll', label: 'Payroll', icon: '💰' },
|
|
{ href: '/admin/reimbursements', label: 'Reimbursements', icon: '📄' },
|
|
{ href: '/admin/announcements', label: 'Announcements', icon: '📢' },
|
|
{ href: '/admin/reports', label: 'Reports', icon: '📊' },
|
|
];
|
|
|
|
const superAdminNav: NavItem[] = [
|
|
{ href: '/superadmin/dashboard', label: 'Dashboard', icon: '⊞' },
|
|
{ href: '/superadmin/accounts', label: 'Admin Accounts', icon: '🛡' },
|
|
{ href: '/superadmin/settings', label: 'Org Settings', icon: '⚙' },
|
|
{ href: '/superadmin/audit-log', label: 'Audit Log', icon: '📋' },
|
|
];
|
|
|
|
export default function Sidebar() {
|
|
const { user, logout } = useAuth();
|
|
const pathname = usePathname();
|
|
|
|
const navItems =
|
|
user?.role === 'super_admin'
|
|
? superAdminNav
|
|
: user?.role === 'hr_admin'
|
|
? hrAdminNav
|
|
: employeeNav;
|
|
|
|
return (
|
|
<aside
|
|
className="flex flex-col w-64 min-h-screen bg-[#1E293B] text-white shadow-xl"
|
|
style={{ backgroundColor: '#1E293B' }}
|
|
>
|
|
{/* Logo */}
|
|
<div className="flex items-center px-6 py-5 border-b border-slate-700">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white font-bold text-sm">
|
|
HR
|
|
</div>
|
|
<span className="font-bold text-lg text-white">HR Portal</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* User Info */}
|
|
<div className="px-6 py-4 border-b border-slate-700">
|
|
<div className="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white font-semibold mb-2">
|
|
{user?.firstName?.[0]}{user?.lastName?.[0]}
|
|
</div>
|
|
<p className="text-sm font-semibold text-white truncate">
|
|
{user?.firstName} {user?.lastName}
|
|
</p>
|
|
<p className="text-xs text-slate-400 capitalize">
|
|
{user?.role?.replace('_', ' ')}
|
|
</p>
|
|
<p className="text-xs text-slate-500">{user?.employeeId}</p>
|
|
</div>
|
|
|
|
{/* Nav */}
|
|
<nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
|
|
{navItems.map((item) => {
|
|
const isActive =
|
|
pathname === item.href ||
|
|
(item.href !== '/dashboard' && item.href !== '/admin/dashboard' && item.href !== '/superadmin/dashboard' && pathname.startsWith(item.href));
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-150 ${
|
|
isActive
|
|
? 'bg-indigo-600 text-white'
|
|
: 'text-slate-300 hover:bg-slate-700 hover:text-white'
|
|
}`}
|
|
>
|
|
<span className="text-base w-5 text-center">{item.icon}</span>
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Logout */}
|
|
<div className="px-3 py-4 border-t border-slate-700">
|
|
<button
|
|
onClick={logout}
|
|
className="flex items-center gap-3 px-3 py-2.5 w-full rounded-lg text-sm font-medium text-slate-300 hover:bg-slate-700 hover:text-white transition-all duration-150"
|
|
>
|
|
<span className="text-base w-5 text-center">🚪</span>
|
|
<span>Logout</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|