Dashboard & Navigation
Relevant source files
The following files were used as context for generating this wiki page:
The Dashboard and Navigation system serves as the central hub for the Bridge AI platform, facilitating user movement between core services such as AI networking, educational articles, and product showcases. The dashboard provides a visual overview of the platform's domains—AI Chatbots, Law, Marketing, and Finance—while the navigation architecture manages the transition from authentication states to functional application modules.
Sources: frontend/front/src/getstarted/getstarted.jsx:43-51, frontend/front/src/App.jsx:13-33
Routing Architecture
The application utilizes react-router-dom to manage client-side navigation. The App component defines the route hierarchy, mapping specific URL paths to functional components. Navigation is primarily handled through Link components and the useNavigate hook for programmatic transitions.
This diagram illustrates the primary navigational flow between routes defined in the application.
Sources: frontend/front/src/App.jsx:13-33, frontend/front/src/loginpage.jsx:22, frontend/front/src/getstarted/getstarted.jsx:82
Route Definitions
The following table summarizes the primary routes available within the navigation system:
| Path | Component | Description |
|---|---|---|
/ | LoginPage | Entry point for user authentication. |
/dashboard | Dashboard | Main landing page featuring the content carousel. |
/chatbotpage | ChatbotPage | The primary AI interaction interface. |
/articles | ArticlesPage | Interface for browsing and searching summarized articles. |
/products | ProductsPage | Showcase for monthly product highlights. |
/help | Help | FAQ and contact information page. |
Sources: frontend/front/src/App.jsx:16-32
Dashboard Implementation
The Dashboard (implemented in getstarted.jsx) serves as an onboarding screen. It features a carousel that automatically cycles through key platform topics every 3 seconds using a setInterval hook.
Component Logic
- Carousel State: Managed via
currentIndexstate, which tracks the currently visible topic image. - Auto-rotation: An
useEffecthook triggers the transition between topic IDs (AI Chatbots, Law, Marketing, Finance). - Call to Action: A prominent "Get Started" button links users directly to the chatbot interface.
useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % topics.length);
}, 3000);
return () => clearInterval(interval);
}, [topics.length]);
Sources: frontend/front/src/getstarted/getstarted.jsx:53-62
Global Navigation Components
Navigation elements are distributed across specialized components to provide context-aware access to features.
Sidebar Navigation
The ChatbotPage includes a retractable sidebar containing links to high-level application sections. This sidebar is toggled via a state variable (sidebarOpen).
| Link Text | Destination | File Reference |
|---|---|---|
| Home | /dashboard | chatbot.jsx:322 |
| Showcase | /products | chatbot.jsx:323 |
| Help | /help | chatbot.jsx:324 |
Sources: frontend/front/src/chatbot/chatbot.jsx:321-325
Header and Profile Actions
The application utilizes icons within the header area of functional pages for quick access to secondary features:
- Profile Icon: Toggles a dropdown menu for "Edit Profile", "Settings", and "Logout".
- Articles Icon: Provides a direct link to the news/article summary feature.
Sequence showing the interaction with the profile navigation menu.
Authentication Flow
Navigation is tightly coupled with the authentication state. Users are restricted to the LoginPage or SignupPage until a valid session is established.
- Signup: Users provide details in
signup.jsx. Upon success, they are navigated back to the login screen. - Login: The
handleLoginfunction inloginpage.jsxstores the JWT token and user data inlocalStoragebefore redirecting to the/dashboard. - Logout: A dedicated
/logoutpagehandles the termination of the user session.
Sources: frontend/front/src/loginpage.jsx:18-24, frontend/front/src/signup/signup.jsx:21-23
Conclusion
The Dashboard & Navigation system provides a structured entry point into the Bridge AI ecosystem. By combining a dynamic dashboard carousel with a persistent sidebar and header navigation in the chatbot interface, the system ensures that users can easily access AI tools, educational content, and account management features.