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

apps/customer-portal/webapp/package.json

@@ -11,13 +11,15 @@
   },
   "dependencies": {
     "@asgardeo/auth-react": "^5.4.3",
+    "@asgardeo/react-router": "^1.0.31",
     "@tanstack/react-query": "^5.90.20",
     "@tanstack/react-query-devtools": "^5.91.2",
     "@wso2/oxygen-ui": "^0.3.0",
     "@wso2/oxygen-ui-charts-react": "^0.3.0",
     "@wso2/oxygen-ui-icons-react": "^0.3.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-router": "^7.1.5",
     "zod": "^4.3.6"
   },
   "devDependencies": {

apps/customer-portal/webapp/src/App.tsx

@@ -14,8 +14,71 @@
 // specific language governing permissions and limitations
 // under the License.
 
-function App() {
-  return <></>;
-}
+import type { JSX } from "react";
+import { BrowserRouter, Route, Routes, Navigate } from "react-router";
+import ProjectHub from "@/pages/ProjectHub";
+import ProjectPage from "@/pages/ProjectPage";
+import AppLayout from "@/layouts/AppLayout";
+
+export default function App(): JSX.Element {
+  return (
+    <BrowserRouter>
+      <Routes>
+        {/* AppLayout component */}
+        <Route element={<AppLayout />}>
+          {/* ProjectHub Page */}
+          <Route path="/" element={<ProjectHub />} />
 
-export default App;
+          {/* Project Specific Routes */}
+          <Route path="/:projectId">
+            {/* Dashboard */}
+            <Route index element={<Navigate to="dashboard" replace />} />
+            <Route
+              path="dashboard"
+              element={<ProjectPage title="Dashboard" />}
+            />
+            {/* Project Details */}
+            <Route
+              path="project-details"
+              element={<ProjectPage title="Project Details" />}
+            />
+            {/* Support */}
+            <Route path="support" element={<ProjectPage title="Support" />} />
+            {/* Updates */}
+            <Route path="updates" element={<ProjectPage title="Updates" />} />
+            {/* SecurityCenter */}
+            <Route
+              path="security-center"
+              element={<ProjectPage title="Security Center" />}
+            />
+            {/* Engagements */}
+            <Route
+              path="engagements"
+              element={<ProjectPage title="Engagements" />}
+            />
+            {/* LegalContracts */}
+            <Route
+              path="legal-contracts"
+              element={<ProjectPage title="Legal Contracts" />}
+            />
+            {/* Community */}
+            <Route
+              path="community"
+              element={<ProjectPage title="Community" />}
+            />
+            {/* Announcements */}
+            <Route
+              path="announcements"
+              element={<ProjectPage title="Announcements" />}
+            />
+            {/* Settings */}
+            <Route path="settings" element={<ProjectPage title="Settings" />} />
+          </Route>
+        </Route>
+
+        {/* Fallback */}
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}

apps/customer-portal/webapp/src/AppWithConfig.tsx

@@ -18,12 +18,12 @@ import type { JSX } from "react";
 import { OxygenUIThemeProvider } from "@wso2/oxygen-ui";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import App from "@/App";
 import { AuthProvider } from "@asgardeo/auth-react";
 import { authConfig } from "@/config/authConfig";
 import { themeConfig } from "@/config/themeConfig";
 import { loggerConfig } from "@/config/loggerConfig";
 import LoggerProvider from "@/context/logger/LoggerProvider";
+import App from "@/App";
 
 const queryClient: QueryClient = new QueryClient();
 

apps/customer-portal/webapp/src/api/__tests__/useSearchProjects.test.tsx

@@ -0,0 +1,80 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import useSearchProjects from "../useSearchProjects";
+import { mockProjects } from "@/models/mockData";
+import type { ReactNode } from "react";
+
+// Mock useLogger
+vi.mock("@/hooks/useLogger", () => ({
+  useLogger: () => ({
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  }),
+}));
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+  return ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe("useSearchProjects", () => {
+  it("should return paginated mock projects in pages on query execution", async () => {
+    const { result } = renderHook(
+      () => useSearchProjects({ pagination: { offset: 0, limit: 2 } }),
+      {
+        wrapper: createWrapper(),
+      },
+    );
+
+    // Wait for the initial page to finish
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    const response = result.current.data;
+    expect(response).toBeDefined();
+    expect(response?.pages).toHaveLength(1);
+    expect(response?.pages[0].projects).toHaveLength(2);
+    expect(response?.pages[0].totalRecords).toBe(mockProjects.length);
+    expect(response?.pages[0].projects[0].name).toBe(mockProjects[0].name);
+    expect(response?.pages[0].offset).toBe(0);
+    expect(response?.pages[0].limit).toBe(2);
+  });
+
+  it("should handle default pagination if none provided", async () => {
+    const { result } = renderHook(() => useSearchProjects(), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    const response = result.current.data;
+    expect(response?.pages[0].offset).toBe(0);
+    expect(response?.pages[0].limit).toBe(10);
+  });
+});

apps/customer-portal/webapp/src/api/useSearchProjects.ts

@@ -0,0 +1,88 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import {
+  useInfiniteQuery,
+  type UseInfiniteQueryResult,
+  type InfiniteData,
+} from "@tanstack/react-query";
+import { useLogger } from "@/hooks/useLogger";
+import { mockProjects } from "@/models/mockData";
+import { ApiQueryKeys } from "@/constants/apiQueryKeys";
+import type { SearchProjectsRequest } from "@/models/requests";
+import type { SearchProjectsResponse } from "@/models/responses";
+
+/**
+ * Custom hook to search projects.
+ * This hook uses an infinite query to fetch projects in pages.
+ *
+ * @param {SearchProjectsRequest} searchData - The search and pagination parameters.
+ * @param {boolean} fetchAll - If true, treats this as a shared "all projects" query.
+ * @returns {UseInfiniteQueryResult<InfiniteData<SearchProjectsResponse>, Error>} The infinite query result object.
+ */
+export default function useSearchProjects(
+  searchData: SearchProjectsRequest = {},
+  fetchAll: boolean = false,
+): UseInfiniteQueryResult<InfiniteData<SearchProjectsResponse>, Error> {
+  const logger = useLogger();
+  const limit = fetchAll ? 100 : searchData.pagination?.limit || 10;
+
+  // A stable key for the "all projects" query ensures cache sharing
+  const queryKey = fetchAll
+    ? [ApiQueryKeys.PROJECTS, "all"]
+    : [ApiQueryKeys.PROJECTS, searchData];
+
+  return useInfiniteQuery<SearchProjectsResponse, Error>({
+    getPreviousPageParam: (firstPage) => {
+      const prevOffset = firstPage.offset - limit;
+      return prevOffset >= 0 ? prevOffset : undefined;
+    },
+    getNextPageParam: (lastPage) => {
+      const nextOffset = lastPage.offset + limit;
+      return nextOffset < lastPage.totalRecords ? nextOffset : undefined;
+    },
+    initialPageParam: 0,
+    queryFn: async ({ pageParam = 0 }): Promise<SearchProjectsResponse> => {
+      logger.debug(
+        `Fetching projects... offset: ${pageParam}, limit: ${limit}, fetchAll: ${fetchAll}`,
+      );
+
+      // Simulate a network delay
+      await new Promise((resolve) => setTimeout(resolve, 800));
+
+      const offset = typeof pageParam === "number" ? pageParam : 0;
+
+      const results: SearchProjectsResponse = {
+        limit,
+        offset,
+        projects: mockProjects.slice(offset, offset + limit).map((project) => ({
+          createdOn: project.createdOn,
+          description: project.description,
+          id: project.id,
+          key: project.key,
+          name: project.name,
+        })),
+        totalRecords: mockProjects.length,
+      };
+
+      logger.debug("Projects fetched successfully", results);
+
+      return results;
+    },
+    queryKey,
+    staleTime: Infinity,
+  });
+}

apps/customer-portal/webapp/src/components/footer/Footer.tsx

@@ -0,0 +1,38 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import {
+  COMPANY_NAME,
+  PRIVACY_POLICY_URL,
+  TERMS_OF_SERVICE_URL,
+} from "@/constants/appLayoutConstants";
+import { Footer as FooterUI } from "@wso2/oxygen-ui";
+import type { JSX } from "react";
+
+/**
+ * Footer component.
+ *
+ * @returns {JSX.Element} The Footer component.
+ */
+export default function Footer(): JSX.Element {
+  return (
+    <FooterUI
+      companyName={COMPANY_NAME}
+      termsUrl={TERMS_OF_SERVICE_URL}
+      privacyUrl={PRIVACY_POLICY_URL}
+    />
+  );
+}

apps/customer-portal/webapp/src/components/footer/__tests__/Footer.test.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) 2026 WSO2 LLC. (https://www.wso2.com).
+//
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import Footer from "@/components/footer/Footer";
+import {
+  COMPANY_NAME,
+  PRIVACY_POLICY_URL,
+  TERMS_OF_SERVICE_URL,
+} from "@/constants/appLayoutConstants";
+
+// Mock @wso2/oxygen-ui
+vi.mock("@wso2/oxygen-ui", () => ({
+  Footer: ({
+    companyName,
+    termsUrl,
+    privacyUrl,
+  }: {
+    companyName: string;
+    termsUrl: string;
+    privacyUrl: string;
+  }) => (
+    <div data-testid="footer-ui">
+      <span>{companyName}</span>
+      <a href={termsUrl}>Terms of Service</a>
+      <a href={privacyUrl}>Privacy Policy</a>
+    </div>
+  ),
+}));
+
+describe("Footer", () => {
+  it("should render the company name", () => {
+    render(<Footer />);
+    expect(screen.getByText(new RegExp(COMPANY_NAME, "i"))).toBeDefined();
+  });
+
+  it("should render the terms of service link with correct URL", () => {
+    render(<Footer />);
+    const termsLink = screen.getByRole("link", { name: /terms/i });
+    expect(termsLink).toHaveAttribute("href", TERMS_OF_SERVICE_URL);
+  });
+
+  it("should render the privacy policy link with correct URL", () => {
+    render(<Footer />);
+    const privacyLink = screen.getByRole("link", { name: /privacy/i });
+    expect(privacyLink).toHaveAttribute("href", PRIVACY_POLICY_URL);
+  });
+});