[Customer Portal][FE][Web] Implement Project Details Page and Modular Overview Components

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

@@ -18,6 +18,7 @@ import type { JSX } from "react";
 import { BrowserRouter, Route, Routes, Navigate } from "react-router";
 import ProjectHub from "@/pages/ProjectHub";
 import ProjectPage from "@/pages/ProjectPage";
+import ProjectDetails from "@/pages/ProjectDetails";
 import DashboardPage from "@/pages/DashboardPage";
 import SupportPage from "@/pages/SupportPage";
 import NoveraChatPage from "@/pages/NoveraChatPage";
@@ -41,10 +42,7 @@ export default function App(): JSX.Element {
               <Route index element={<Navigate to="dashboard" replace />} />
               <Route path="dashboard" element={<DashboardPage />} />
               {/* Project Details */}
-              <Route
-                path="project-details"
-                element={<ProjectPage title="Project Details" />}
-              />
+              <Route path="project-details" element={<ProjectDetails />} />
               {/* Support */}
               <Route path="support">
                 <Route index element={<SupportPage />} />

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

@@ -0,0 +1,92 @@
+// 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, beforeEach } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import useGetProjectDetails from "@/api/useGetProjectDetails";
+import { mockProjectDetails } from "@/models/mockData";
+import type { ReactNode } from "react";
+
+vi.mock("@/constants/apiConstants", async (importOriginal) => {
+  const actual = (await importOriginal()) as any;
+  return {
+    ...actual,
+    API_MOCK_DELAY: 0,
+  };
+});
+
+// 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("useGetProjectDetails", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should return project details for a valid project ID", async () => {
+    const validProjectId = mockProjectDetails[0].id;
+
+    const { result } = renderHook(() => useGetProjectDetails(validProjectId), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    const response = result.current.data;
+    expect(response).toBeDefined();
+    expect(response?.id).toBe(validProjectId);
+    expect(response?.name).toBe(mockProjectDetails[0].name);
+  });
+
+  it("should error for an invalid project ID", async () => {
+    const invalidProjectId = "invalid-id";
+
+    const { result } = renderHook(
+      () => useGetProjectDetails(invalidProjectId),
+      {
+        wrapper: createWrapper(),
+      },
+    );
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+
+    expect(result.current.error).toBeDefined();
+    expect(result.current.error?.message).toContain(
+      "Project with ID invalid-id not found",
+    );
+  });
+});

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

@@ -0,0 +1,89 @@
+// 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, beforeEach } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useGetProjectStat } from "@/api/useGetProjectStat";
+import { mockProjects } from "@/models/mockData";
+import type { ReactNode } from "react";
+
+vi.mock("@/constants/apiConstants", async (importOriginal) => {
+  const actual = (await importOriginal()) as any;
+  return {
+    ...actual,
+    API_MOCK_DELAY: 0,
+  };
+});
+
+// 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("useGetProjectStat", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should return project stats for a valid project ID", async () => {
+    const validProjectId = mockProjects[0].id;
+
+    const { result } = renderHook(() => useGetProjectStat(validProjectId), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    const response = result.current.data;
+    expect(response).toBeDefined();
+    expect(response?.projectStats).toBeDefined();
+    expect(response?.recentActivity).toBeDefined();
+  });
+
+  it("should error for an invalid project ID", async () => {
+    const invalidProjectId = "invalid-id";
+
+    const { result } = renderHook(() => useGetProjectStat(invalidProjectId), {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+
+    expect(result.current.error).toBeDefined();
+    expect(result.current.error?.message).toContain(
+      "Project stats not found for ID: invalid-id",
+    );
+  });
+});

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

@@ -0,0 +1,60 @@
+// 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 { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { useLogger } from "@/hooks/useLogger";
+import { mockProjectDetails } from "@/models/mockData";
+import { ApiQueryKeys, API_MOCK_DELAY } from "@/constants/apiConstants";
+import type { ProjectDetails } from "@/models/responses";
+
+/**
+ * Custom hook to fetch detailed project information by ID.
+ *
+ * @param {string} projectId - The ID of the project to fetch details for.
+ * @returns {UseQueryResult<ProjectDetails, Error>} The query result object.
+ */
+export default function useGetProjectDetails(
+  projectId: string,
+): UseQueryResult<ProjectDetails, Error> {
+  const logger = useLogger();
+
+  return useQuery<ProjectDetails, Error>({
+    queryKey: [ApiQueryKeys.PROJECT_DETAILS, projectId],
+    queryFn: async (): Promise<ProjectDetails> => {
+      logger.debug(`Fetching project details for project ID: ${projectId}`);
+
+      // Mock behavior: simulate network latency.
+      await new Promise((resolve) => setTimeout(resolve, API_MOCK_DELAY));
+
+      // Find project by ID from mock data.
+      const project = mockProjectDetails.find((p) => p.id === projectId);
+
+      if (!project) {
+        logger.error(`Project not found for ID: ${projectId}`);
+        throw new Error(`Project with ID ${projectId} not found`);
+      }
+
+      logger.debug(
+        `Project details fetched successfully for project ID: ${projectId}`,
+        project,
+      );
+
+      return project;
+    },
+    enabled: !!projectId,
+    staleTime: 5 * 60 * 1000, // 5 minutes
+  });
+}

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

@@ -0,0 +1,61 @@
+// 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 { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import { getMockProjectStats } from "@/models/mockFunctions";
+import { mockProjects } from "@/models/mockData";
+import { useLogger } from "@/hooks/useLogger";
+import { ApiQueryKeys, API_MOCK_DELAY } from "@/constants/apiConstants";
+import type { ProjectStatsResponse } from "@/models/responses";
+
+/**
+ * Custom hook to fetch project statistics.
+ *
+ * @param {string} projectId - The ID of the project.
+ * @returns {UseQueryResult<ProjectStatsResponse, Error>} The query result object.
+ */
+export function useGetProjectStat(
+  projectId: string,
+): UseQueryResult<ProjectStatsResponse, Error> {
+  const logger = useLogger();
+
+  return useQuery<ProjectStatsResponse, Error>({
+    queryKey: [ApiQueryKeys.PROJECT_STATS, projectId],
+    queryFn: async (): Promise<ProjectStatsResponse> => {
+      logger.debug(`Fetching project stats for project ID: ${projectId}`);
+
+      // Mock behavior: simulate network latency.
+      await new Promise((resolve) => setTimeout(resolve, API_MOCK_DELAY));
+
+      // Validate project ID
+      const projectExists = mockProjects.some((p) => p.id === projectId);
+      if (!projectExists) {
+        throw new Error(`Project stats not found for ID: ${projectId}`);
+      }
+
+      const stats: ProjectStatsResponse = getMockProjectStats();
+
+      logger.debug(
+        `Project stats fetched successfully for project ID: ${projectId}`,
+        stats,
+      );
+
+      return stats;
+    },
+    enabled: !!projectId,
+    staleTime: 5 * 60 * 1000,
+  });
+}

apps/customer-portal/webapp/src/components/common/filterPanel/ActiveFilters.tsx

@@ -96,7 +96,7 @@ const ActiveFilters = <T extends Record<string, any>>({
               icon={hasOptions ? <ChevronDown size={14} /> : undefined}
               size="small"
               variant="outlined"
-              color={isActive ? "primary" : "default"}
+              color={isActive ? "warning" : "default"}
               sx={{
                 "& .MuiChip-label": { order: 1, pr: 1 },
                 "& .MuiChip-icon": { order: 2, mr: 0.5, ml: 0 },
@@ -121,7 +121,7 @@ const ActiveFilters = <T extends Record<string, any>>({
           const optionValue =
             typeof option === "string" ? option : option.value;
           const isSelected =
-            appliedFilters[activeField.id] === optionLabel || // Check against display label which is currently stored in appliesFilters map (need to verify this assumption from CasesTable)
+            appliedFilters[activeField.id] === optionLabel ||
             appliedFilters[activeField.id] === optionValue;
 
           return (

apps/customer-portal/webapp/src/components/common/header/Header.tsx

@@ -36,10 +36,7 @@ interface HeaderProps {
  * @param {HeaderProps} props - The props for the component.
  * @returns {JSX.Element} The Header component.
  */
-export default function Header({
-  onToggleSidebar,
-  collapsed = false,
-}: HeaderProps): JSX.Element {
+export default function Header({ onToggleSidebar }: HeaderProps): JSX.Element {
   const navigate = useNavigate();
   const location = useLocation();
   const logger = useLogger();