[Customer Portal][FE][Web] Add Project Hub, UI Shell, and Routing Infrastructure

[dileepapeiris]

Purpose

This PR implements the first milestone of the customer portal, establishing the foundational application structure with routing, layout components, and project management features.

Goals

• Establish a robust routing infrastructure using react-router and @asgardeo/react-router.
• Implement a core UI App Shell (Header, Sidebar, Footer) using the Oxygen UI design system.
• Create a "Project Hub" to allow users to browse and select from available projects.
• Provide a scalable project-specific view architecture.
• Integrate mock data and API hooks for development and testing.

Approach

• Routing: Implemented nested routing where / leads to the Project Hub, and /:projectId/* handles project-specific dashboards.
• Data Fetching: Utilized React Query (useInfiniteQuery) for the useSearchProjects hook to support paginated project listing.
• Layout: Developed an AppLayout component that conditionally renders the Sidebar only when a specific project is selected.
• Testing: Achieved comprehensive unit test coverage for components, hooks, and utilities using Vitest.

User stories

• Project Discovery: As a user, I can view a list of all my projects on a central landing page (Project Hub).
• Project Context: As a user, I can select a project and see a dedicated sidebar and dashboard specific to that project.
• Navigation: As a user, I can use the Header's project switcher to jump between projects or return to the hub.
• Theme Preference: As a user, I can toggle between light and dark modes.

Walkthrough

Adds a router-based app structure for the customer portal: routing and App layout, header/sidebar/footer UI, project listing and pages, a paginated projects API hook with mocks, new constants/models, comprehensive tests, and updated test/vite config and package dependencies.

Changes

Cohort	File(s)	Summary
Dependencies & App Entry	package.json, App.tsx, AppWithConfig.tsx	Added react-router and @asgardeo/react-router; replaced placeholder App with a router implementation.
API Hook & Tests	useSearchProjects.ts, useSearchProjects.test.tsx	New useSearchProjects hook using useInfiniteQuery with paginated mock responses and tests.
Models & Mock Data	requests.ts, responses.ts, mockData.ts	Added request/response interfaces and mockProjects/mockUser test data.
Constants	appLayoutConstants.ts, apiQueryKeys.ts	Introduced APP_SHELL_NAV_ITEMS, footer/company constants, and ApiQueryKeys.
Layout & Pages	AppLayout.tsx, ProjectHub.tsx, ProjectPage.tsx	New AppLayout composing Header, SideBar, and Footer; ProjectHub page listing projects; ProjectPage template.
Header & Subcomponents	Header.tsx, Brand.tsx, Actions.tsx, ProjectSwitcher.tsx, SearchBar.tsx, UserProfile.tsx	Implemented Header integrating routing, project switching, and UI subcomponents with unit tests.
Sidebar & Widgets	SideBar.tsx, SubscriptionWidget.tsx	Added SideBar with project-aware links and collapsible SubscriptionWidget.
Footer & Logger	Footer.tsx, LoggerContext.tsx, useLogger.ts	New Footer using app constants; added runtime guards to useLogger.
Tests / Vite config	vite.config.ts	Configured CSS inclusion and inlining for @wso2/oxygen-ui dependencies in Vitest.

Sequence Diagram

sequenceDiagram
    participant User
    participant App as App (Router)
    participant Header
    participant ProjectSwitcher
    participant API as useSearchProjects
    participant Router as React Router
    participant ProjectPage

    User->>App: Load application
    App->>Header: Render with onToggleSidebar
    Header->>API: Fetch projects (infinite)
    API-->>Header: Return paginated projects
    Header->>ProjectSwitcher: Provide projects + selection

    User->>ProjectSwitcher: Select project
    ProjectSwitcher->>Header: onProjectChange(key)
    Header->>Router: Navigate to /{key}/dashboard
    Router->>ProjectPage: Render project page
    ProjectPage-->>User: Display project view

    User->>Header: Navigate to Project Hub
    Header->>Router: Navigate to /
    Router->>App: Render ProjectHub
    App-->>User: Show project list

Loading

Automation tests

• Unit tests: Comprehensive coverage for all UI components (Header, SideBar, Footer, ProjectHub) and custom hooks.

ScreenRecordings and screenshots

ProjectHub Page

ProjectHub to Project Dashboard Navigation

Screen.Recording.2026-01-29.at.22.18.02.mov

Project Dashboard Page

Light mode:

Dark Mode:

User Profile Dropdown

Light Mode

Dark Mode

Navigation between side nav bar tabs

Screen.Recording.2026-01-29.at.22.19.40.1.mov

Dark / Light / System mode toggle

Screen.Recording.2026-01-29.at.22.40.57.mov

Join Community Navigation

Screen.Recording.2026-01-29.at.22.44.50.mov

Terms and Conditions Navigation

Screen.Recording.2026-01-29.at.22.45.43.mov

Privacy Policy Navigation

Screen.Recording.2026-01-29.at.22.45.17.mov

---

Close(#49, #21)

Summary by CodeRabbit

• New Features

  • Project-based routing and layout with a Project Hub, per-project pages, and redirects.
  • Header with brand, project switcher, search bar, theme toggle, and user profile menu.
  • Sidebar with navigation, subscription panel, and settings link.
  • Footer with company, legal, and community links.
  • Project search with paginated results, mock data, and typed request/response models.

• Tests

  • Extensive unit tests covering pages, header, sidebar, footer, and search hook.

• Documentation

  • Added logger JSDoc and context guard notes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[dileepapeiris]

Note for reviewers:

The ProjectHub and ProjectPage.tsx files have been added temporarily.
The authentication part is currently disabled.
APIs are currently running with mock tests.

[Rashmika998]

LGTM