[Customer Portal][Webapp] Show partner-style projects/cases overview for multi-project users

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

@@ -49,6 +49,8 @@ import SettingsPage from "@features/settings/pages/SettingsPage";
 import ServiceNowCaseRedirectPage from "@features/project-hub/pages/ServiceNowCaseRedirectPage";
 import PartnerProjectsPage from "@features/project-hub/pages/PartnerProjectsPage";
 import PartnerCasesPage from "@features/project-hub/pages/PartnerCasesPage";
+import UserProjectsPage from "@features/project-hub/pages/UserProjectsPage";
+import UserCasesPage from "@features/project-hub/pages/UserCasesPage";
 import PartnerGuard from "@layouts/PartnerGuard";
 import Error401Page from "@components/error/Error401Page";
 import Error403Page from "@components/error/Error403Page";
@@ -108,6 +110,10 @@ export default function App(): JSX.Element {
                   <Route path="partner/cases" element={<PartnerCasesPage />} />
                 </Route>
 
+                {/* Home overview drill-down pages for non-partner users with multiple projects */}
+                <Route path="projects" element={<UserProjectsPage />} />
+                <Route path="cases" element={<UserCasesPage />} />
+
                 {/* Project Specific Routes */}
                 <Route path="projects/:projectId" element={<ProjectGuard />}>
                   {/* Dashboard */}

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

@@ -16,7 +16,9 @@
 
 import {
   useInfiniteQuery,
+  useQuery,
   type UseInfiniteQueryResult,
+  type UseQueryResult,
   type InfiniteData,
 } from "@tanstack/react-query";
 import { useAsgardeo } from "@asgardeo/react";
@@ -142,6 +144,78 @@ export default function useInfiniteProjects({
   });
 }
 
+interface UseGetProjectsPageParams {
+  offset: number;
+  limit: number;
+  searchQuery?: string;
+}
+
+/**
+ * Custom hook to fetch a single offset/limit page of projects.
+ * Use this over useInfiniteProjects when the caller drives pagination itself
+ * (e.g. a TablePagination component) rather than infinite scroll.
+ *
+ * @param {UseGetProjectsPageParams} params - Offset, limit, and search query.
+ * @returns {UseQueryResult} The query result object with the project page.
+ */
+export function useGetProjectsPage({
+  offset,
+  limit,
+  searchQuery,
+}: UseGetProjectsPageParams): UseQueryResult<SearchProjectsResponse, Error> {
+  const logger = useLogger();
+  const { isSignedIn, isLoading: isAuthLoading } = useAsgardeo();
+  const authFetch = useAuthApiClient();
+
+  const normalizedSearchQuery = searchQuery?.trim() || undefined;
+
+  return useQuery<SearchProjectsResponse, Error>({
+    queryKey: [ApiQueryKeys.PROJECTS, "page", offset, limit, normalizedSearchQuery],
+    enabled: isSignedIn && !isAuthLoading,
+    queryFn: async (): Promise<SearchProjectsResponse> => {
+      const baseUrl = window.config?.CUSTOMER_PORTAL_BACKEND_BASE_URL;
+      if (!baseUrl) {
+        throw new Error("CUSTOMER_PORTAL_BACKEND_BASE_URL is not configured");
+      }
+
+      const body: SearchProjectsRequest = {
+        pagination: { offset, limit },
+        ...(normalizedSearchQuery
+          ? { filters: { searchQuery: normalizedSearchQuery } }
+          : {}),
+      };
+
+      const response = await authFetch(`${baseUrl}/projects/search`, {
+        method: "POST",
+        body: JSON.stringify(body),
+      });
+
+      if (!response.ok) {
+        let apiMessage: string | undefined;
+        try {
+          const errBody = await response.json();
+          if (typeof errBody?.message === "string") {
+            apiMessage = errBody.message;
+          }
+        } catch {
+          // ignore – body may not be JSON
+        }
+        throw new ApiError(
+          response.status,
+          response.statusText,
+          apiMessage ?? `Error fetching projects: ${response.statusText}`,
+        );
+      }
+
+      logger.debug(
+        `[useGetProjectsPage] Fetched projects, offset: ${offset}, limit: ${limit}`,
+      );
+      return response.json();
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+}
+
 /**
  * Helper function to flatten paginated project data into a single array.
  *