feat(frontend): Implement complete authentication system

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>

components/layout/Sidebar.tsx

@@ -2,9 +2,10 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { LayoutDashboard, FolderKanban, Settings } from 'lucide-react';
+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 = [
   {
@@ -17,6 +18,11 @@ const navItems = [
     href: '/projects',
     icon: FolderKanban,
   },
+  {
+    title: 'Team',
+    href: '/team',
+    icon: Users,
+  },
   {
     title: 'Settings',
     href: '/settings',
@@ -27,33 +33,55 @@ const navItems = [
 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 h-[calc(100vh-3.5rem)] w-64 border-r border-border bg-background">
-      <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 + '/');
+    <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>
+            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>
   );
 }