e60b70de52
Implemented comprehensive JWT-based authentication with token refresh mechanism, user state management, and protected routes. Changes: - Upgraded API client from fetch to Axios with automatic token refresh interceptors - Created API configuration with centralized endpoint definitions - Implemented Zustand auth store for user state management with persistence - Created React Query hooks for login, register, logout, and current user - Built login and registration pages with form validation (Zod + React Hook Form) - Implemented AuthGuard component for route protection - Enhanced Header with user dropdown menu and logout functionality - Updated Sidebar with user information display at bottom - Added Team navigation item to sidebar - Configured environment variables for API base URL Technical Details: - JWT token storage in localStorage with secure key names - Automatic token refresh on 401 responses - Request queueing during token refresh to prevent race conditions - TypeScript strict typing throughout - ESLint compliant code (fixed type safety issues) - Proper error handling with user-friendly messages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { LayoutDashboard, FolderKanban, Settings, Users } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useUIStore } from '@/stores/ui-store';
|
|
import { useAuthStore } from '@/stores/authStore';
|
|
|
|
const navItems = [
|
|
{
|
|
title: 'Dashboard',
|
|
href: '/dashboard',
|
|
icon: LayoutDashboard,
|
|
},
|
|
{
|
|
title: 'Projects',
|
|
href: '/projects',
|
|
icon: FolderKanban,
|
|
},
|
|
{
|
|
title: 'Team',
|
|
href: '/team',
|
|
icon: Users,
|
|
},
|
|
{
|
|
title: 'Settings',
|
|
href: '/settings',
|
|
icon: Settings,
|
|
},
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
const sidebarOpen = useUIStore((state) => state.sidebarOpen);
|
|
const user = useAuthStore((state) => state.user);
|
|
|
|
if (!sidebarOpen) return null;
|
|
|
|
return (
|
|
<aside className="fixed left-0 top-14 z-40 flex h-[calc(100vh-3.5rem)] w-64 flex-col border-r border-border bg-background">
|
|
<div className="flex-1 overflow-y-auto">
|
|
<nav className="flex flex-col gap-1 p-4">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive =
|
|
pathname === item.href || pathname.startsWith(item.href + '/');
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{item.title}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* User info section at bottom */}
|
|
<div className="border-t border-border p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground">
|
|
{user?.fullName.charAt(0).toUpperCase()}
|
|
</div>
|
|
<div className="flex-1 overflow-hidden">
|
|
<p className="truncate text-sm font-medium">{user?.fullName}</p>
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
{user?.tenantName}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2 text-xs text-muted-foreground">
|
|
Role: {user?.role}
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|