[Customer Portal] [web] Refactor dashboard charts and support cases table

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

@@ -82,7 +82,14 @@ export function useGetProjectSupportStats(
           );
         }
 
-        const data: ProjectSupportStats = await response.json();
+        const raw = (await response.json()) as any;
+        const data: ProjectSupportStats = {
+          ongoingCases: raw?.ongoingCases ?? 0,
+          resolvedRecently:
+            raw?.resolvedRecently ?? raw?.sessionChats ?? 0,
+          resolvedChats: raw?.resolvedChats ?? 0,
+          activeChats: raw?.activeChats ?? 0,
+        };
         logger.debug("[useGetProjectSupportStats] Data received:", data);
         return data;
       } catch (error) {

apps/customer-portal/webapp/src/components/dashboard/cases-table/CasesList.tsx

@@ -37,10 +37,7 @@ import {
   getStatusColor,
   mapSeverityToDisplay,
 } from "@utils/support";
-import {
-  getCaseTypeChipConfig,
-  getSeverityLegendColor,
-} from "@constants/dashboardConstants";
+import { getSeverityLegendColor } from "@constants/dashboardConstants";
 import ErrorIndicator from "@components/common/error-indicator/ErrorIndicator";
 import CasesTableSkeleton from "@components/dashboard/cases-table/CasesTableSkeleton";
 
@@ -76,19 +73,18 @@ const CasesList = ({
           <TableHead>
             <TableRow>
               <TableCell>Created</TableCell>
-              <TableCell>Engagement</TableCell>
-              <TableCell>Type</TableCell>
+              <TableCell>Details</TableCell>
+              <TableCell>Severity</TableCell>
               <TableCell>Assigned to</TableCell>
               <TableCell>Status</TableCell>
-              <TableCell>Severity</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
             {isLoading ? (
               <CasesTableSkeleton rowsPerPage={rowsPerPage} />
             ) : isError ? (
               <TableRow>
-                <TableCell colSpan={6} align="center">
+                <TableCell colSpan={5} align="center">
                   <Box
                     sx={{
                       display: "flex",
@@ -106,7 +102,7 @@ const CasesList = ({
               </TableRow>
             ) : data?.cases.length === 0 ? (
               <TableRow>
-                <TableCell colSpan={6} align="center">
+                <TableCell colSpan={5} align="center">
                   No cases found.
                 </TableCell>
               </TableRow>
@@ -170,39 +166,24 @@ const CasesList = ({
                   </TableCell>
                   <TableCell>
                     {(() => {
-                      const typeLabel =
-                        row.type?.label ?? row.caseTypes?.label;
-                      const config = getCaseTypeChipConfig(typeLabel ?? undefined);
-                      if (!config) {
-                        return (
-                          <Typography variant="body2" color="text.secondary">
-                            --
-                          </Typography>
-                        );
-                      }
-                      const { Icon } = config;
-                      const mainColor = config.textColor;
+                      const severityColor = getSeverityLegendColor(
+                        row.severity?.label,
+                      );
                       return (
                         <Chip
-                          icon={<Icon size={12} />}
-                          label={config.displayLabel}
+                          label={mapSeverityToDisplay(row.severity?.label)}
                           size="small"
                           variant="outlined"
                           sx={{
+                            bgcolor: alpha(severityColor, 0.1),
+                            color: severityColor,
+                            borderColor: alpha(severityColor, 0.3),
                             fontWeight: 500,
-                            bgcolor: alpha(mainColor, 0.1),
-                            color: mainColor,
-                            borderColor: alpha(mainColor, 0.3),
                             px: 0,
                             height: 20,
                             fontSize: "0.75rem",
-                            "& .MuiChip-icon": {
-                              color: "inherit",
-                              ml: "6px",
-                              mr: "6px",
-                            },
                             "& .MuiChip-label": {
-                              pl: 0,
+                              pl: "6px",
                               pr: "6px",
                             },
                           }}
@@ -237,33 +218,6 @@ const CasesList = ({
                       </Typography>
                     </Box>
                   </TableCell>
-                  <TableCell>
-                    {(() => {
-                      const severityColor = getSeverityLegendColor(
-                        row.severity?.label,
-                      );
-                      return (
-                        <Chip
-                          label={mapSeverityToDisplay(row.severity?.label)}
-                          size="small"
-                          variant="outlined"
-                          sx={{
-                            bgcolor: alpha(severityColor, 0.1),
-                            color: severityColor,
-                            borderColor: alpha(severityColor, 0.3),
-                            fontWeight: 500,
-                            px: 0,
-                            height: 20,
-                            fontSize: "0.75rem",
-                            "& .MuiChip-label": {
-                              pl: "6px",
-                              pr: "6px",
-                            },
-                          }}
-                        />
-                      );
-                    })()}
-                  </TableCell>
                 </TableRow>
               ))
             )}

apps/customer-portal/webapp/src/components/dashboard/cases-table/CasesTable.tsx

@@ -26,11 +26,7 @@ import type { FilterField } from "@components/common/filter-panel/FilterPopover"
 import CasesTableHeader from "@components/dashboard/cases-table/CasesTableHeader";
 import CasesFilters from "@components/dashboard/cases-table/CasesFilters";
 import CasesList from "@components/dashboard/cases-table/CasesList";
-import {
-  normalizeCaseTypeOptions,
-  mapSeverityToDisplay,
-  isS0Case,
-} from "@utils/support";
+import { mapSeverityToDisplay, isS0Case } from "@utils/support";
 import { isS0SeverityLabel } from "@constants/dashboardConstants";
 import type { CaseListItem, CaseSearchResponse } from "@models/responses";
 
@@ -105,12 +101,6 @@ const CasesTable = ({
           value: d.id,
         })) || [],
     },
-    {
-      id: "caseTypes",
-      label: "Case Type",
-      type: "select",
-      options: normalizeCaseTypeOptions(filtersMetadata?.caseTypes || []),
-    },
   ];
 
   const caseSearchRequest = useMemo(
@@ -121,7 +111,6 @@ const CasesTable = ({
         severityId: filters.severityId ? Number(filters.severityId) : undefined,
         issueId: filters.issueTypes ? Number(filters.issueTypes) : undefined,
         deploymentId: filters.deploymentId || undefined,
-        caseTypes: filters.caseTypes?.length ? [filters.caseTypes] : undefined,
       },
       sortBy: {
         field: "createdOn",

apps/customer-portal/webapp/src/components/dashboard/cases-table/CasesTableHeader.tsx

@@ -59,9 +59,9 @@ const CasesTableHeader = ({
       >
         {/* Title and description */}
         <Box>
-          <Typography variant="h6">Outstanding Engagements</Typography>
+          <Typography variant="h6">Outstanding Support Cases</Typography>
           <Typography variant="body2" color="text.secondary">
-            Manage and track all your open engagements
+            Track and manage all active support tickets
           </Typography>
         </Box>
         {/* Filter and Create buttons */}

apps/customer-portal/webapp/src/components/dashboard/cases-table/__tests__/CasesList.test.tsx

@@ -158,33 +158,6 @@ describe("CasesList", () => {
     expect(screen.getByText("No cases found.")).toBeInTheDocument();
   });
 
-  it("should render Case chip when type is Incident", () => {
-    const dataWithType = {
-      cases: [
-        {
-          ...mockData.cases[0],
-          type: { id: "1", label: "Incident" },
-        },
-      ],
-      totalRecords: 1,
-      offset: 0,
-      limit: 10,
-    } as typeof mockData;
-
-    render(
-      <CasesList
-        isLoading={false}
-        data={dataWithType}
-        page={0}
-        rowsPerPage={10}
-        onPageChange={mockOnPageChange}
-        onRowsPerPageChange={mockOnRowsPerPageChange}
-      />,
-    );
-
-    expect(screen.getByText("Case")).toBeInTheDocument();
-  });
-
   it("should render list of cases", () => {
     render(
       <CasesList

apps/customer-portal/webapp/src/components/dashboard/cases-table/__tests__/CasesTableHeader.test.tsx

@@ -64,7 +64,7 @@ describe("CasesTableHeader", () => {
   it("should render title and buttons", () => {
     render(<CasesTableHeader {...mockProps} />);
 
-    expect(screen.getByText("Outstanding Engagements")).toBeInTheDocument();
+    expect(screen.getByText("Outstanding Support Cases")).toBeInTheDocument();
     expect(screen.getByText("Create")).toBeInTheDocument();
     expect(screen.getByText("Filters")).toBeInTheDocument();
   });

apps/customer-portal/webapp/src/components/dashboard/charts/ActiveCasesChart.tsx

@@ -28,12 +28,8 @@ import { ACTIVE_CASES_CHART_DATA } from "@constants/dashboardConstants";
 
 interface ActiveCasesChartProps {
   data: {
-    open: number;
-    workInProgress: number;
-    awaitingInfo: number;
-    waitingOnWso2: number;
-    solutionProposed: number;
-    reopened: number;
+    serviceRequests: number;
+    changeRequests: number;
     total: number;
   };
   isLoading?: boolean;
@@ -53,12 +49,8 @@ export const ActiveCasesChart = ({
   isError,
 }: ActiveCasesChartProps): JSX.Element => {
   const safeData = data ?? {
-    open: 0,
-    workInProgress: 0,
-    awaitingInfo: 0,
-    waitingOnWso2: 0,
-    solutionProposed: 0,
-    reopened: 0,
+    serviceRequests: 0,
+    changeRequests: 0,
     total: 0,
   };
 
@@ -80,7 +72,7 @@ export const ActiveCasesChart = ({
     <Card sx={{ height: "100%", p: 2 }}>
       {/* Title */}
       <Typography variant="h6" component="h3" sx={{ mb: 2 }}>
-        Active Engagements
+        Outstanding Operations
       </Typography>
       {/* Chart state */}
       {isLoading ? (