feat: implement AppShell layout and AppLoader component; enhance ProtectedRoute with role-based navigation

[devcavin]

This pull request introduces a new AppShell component that provides a unified, role-aware layout and navigation for all authenticated pages. It restructures the routing logic so that all protected routes are now rendered inside this shell, ensuring a consistent layout and navigation experience. The loader component is also refactored for reuse and improved styling. Additionally, the route and navigation logic is cleaned up to use route constants and better handle authentication and authorization.

Layout and Navigation Improvements:

• Added a new AppShell component that provides a sidebar, mobile drawer, topbar, and role-based navigation links for all authenticated pages. The shell displays user info, supports logout, and adapts navigation links based on user role. (frontend/src/components/layout/AppShell.tsx)
• Updated the main router (Router.tsx) to wrap all protected routes inside the AppShell, ensuring consistent layout and navigation for all authenticated pages. (frontend/src/router/Router.tsx)

Loader and Routing Enhancements:

• Refactored the loading spinner into a reusable AppLoader component with improved styling, and updated usage in ProtectedRoute and AppShell. (frontend/src/components/AppLoader.tsx, frontend/src/auth/ProtectedRoute.tsx, frontend/src/components/layout/AppShell.tsx) [1] [2]
• Updated ProtectedRoute to use route constants from ROUTE_PATHS for navigation and to use the new AppLoader component. (frontend/src/auth/ProtectedRoute.tsx)

Minor Code Cleanups:

• Removed decorative comment lines and improved comments for clarity in AuthContext.tsx. (frontend/src/auth/AuthContext.tsx) [1] [2] [3] [4] [5]

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
gatelog	Ready	Preview, Comment	Jul 26, 2026 7:15pm