[Customer Portal][FE][Web] Add Dark Mode Support for Dashboard Charts and Improve Onboarding Visibility

apps/customer-portal/webapp/src/components/tab-bar/TabBar.tsx

@@ -26,7 +26,7 @@ export interface TabOption {
 }
 
 export interface TabBarProps {
-  tabs: TabOption[];
+  tabs: readonly TabOption[];
   activeTab: string;
   onTabChange: (tabId: string) => void;
   className?: string;

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

@@ -26,12 +26,14 @@ import ErrorIndicator from "@components/error-indicator/ErrorIndicator";
 import { ChartLegend } from "@features/dashboard/components/charts/ChartLegend";
 import {
   DASHBOARD_CHART_CAPTION_TOTAL,
+  DASHBOARD_CHART_DARK_MODE_SHADE,
   DASHBOARD_CHART_ERROR_ENTITY_ACTIVE_CASES,
   DASHBOARD_CHART_LEGEND_SKELETON_WIDTH_WIDE_PX,
   DASHBOARD_CHART_PIE_AREA_HEIGHT_PX,
   DASHBOARD_CHART_PIE_SKELETON_SIZE_PX,
   DASHBOARD_CHART_TITLE_OUTSTANDING_OPERATIONS,
 } from "@/features/dashboard/constants/charts";
+import { useDarkMode } from "@utils/useDarkMode";
 import {
   OperationsChartMode,
   type ActiveCasesChartProps,
@@ -58,6 +60,7 @@ export const ActiveCasesChart = ({
   variant = OperationsChartMode.SrAndCr,
   centerContent = false,
 }: ActiveCasesChartProps): JSX.Element => {
+  const isDarkMode = useDarkMode();
   // safe data
   const safeData = data ?? EMPTY_ACTIVE_CASES_DATA;
   // series config
@@ -72,6 +75,34 @@ export const ActiveCasesChart = ({
     Boolean(isError),
     errorGrey,
   );
+  const darkModeColorByName = new Map<string, string>([
+    [
+      "Service Requests (SR)",
+      colors.orange?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+        colors.orange?.[300] ??
+        "#FDBA74",
+    ],
+    [
+      "Change Requests (CR)",
+      colors.blue?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+        colors.blue?.[300] ??
+        "#93C5FD",
+    ],
+  ]);
+  const displayChartData = isDarkMode
+    ? chartData.map((entry) => ({
+        ...entry,
+        color: darkModeColorByName.get(entry.name) ?? entry.color,
+      }))
+    : chartData;
+  const displayLegendData = isDarkMode
+    ? buildActiveCasesLegendRows(seriesConfig, safeData).map((entry) => ({
+        ...entry,
+        color: darkModeColorByName.get(entry.name) ?? entry.color,
+      }))
+    : buildActiveCasesLegendRows(seriesConfig, safeData);
+  const darkModeCenterTextColor =
+    colors.blue?.[DASHBOARD_CHART_DARK_MODE_SHADE] ?? colors.blue?.[300];
 
   return (
     <Card sx={{ height: "100%", p: 2 }}>
@@ -113,7 +144,7 @@ export const ActiveCasesChart = ({
               tooltip={{ show: !isError, wrapperStyle: { zIndex: 1000 } }}
             >
               <Pie
-                data={chartData}
+                data={displayChartData}
                 cx="50%"
                 cy="50%"
                 innerRadius={60}
@@ -127,7 +158,7 @@ export const ActiveCasesChart = ({
                 label={false}
                 labelLine={false}
               >
-                {chartData.map((entry, index) => (
+                {displayChartData.map((entry, index) => (
                   <Cell
                     key={`cell-${index}`}
                     fill={entry.color}
@@ -164,7 +195,10 @@ export const ActiveCasesChart = ({
               </Box>
             ) : (
               <>
-                <Typography variant="h4">
+                <Typography
+                  variant="h4"
+                  color={isDarkMode ? darkModeCenterTextColor : undefined}
+                >
                   {formatActiveCasesCenterTotal(Boolean(data), safeData.total)}
                 </Typography>
                 <Typography variant="caption">
@@ -194,12 +228,14 @@ export const ActiveCasesChart = ({
           ))}
         </Box>
       ) : (
-        <Box sx={centerContent ? { maxWidth: 420, width: "100%", mx: "auto" } : undefined}>
-          <ChartLegend
-            data={buildActiveCasesLegendRows(seriesConfig, safeData)}
-            isError={isError}
-            showValues
-          />
+        <Box
+          sx={
+            centerContent
+              ? { maxWidth: 420, width: "100%", mx: "auto" }
+              : undefined
+          }
+        >
+          <ChartLegend data={displayLegendData} isError={isError} showValues />
         </Box>
       )}
     </Card>

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

@@ -26,11 +26,13 @@ import { ChartLegend } from "@features/dashboard/components/charts/ChartLegend";
 import { OUTSTANDING_ENGAGEMENTS_CATEGORY_CHART_DATA } from "@/features/dashboard/constants/dashboard";
 import {
   DASHBOARD_CHART_CAPTION_TOTAL,
+  DASHBOARD_CHART_DARK_MODE_SHADE,
   DASHBOARD_CHART_LEGEND_SKELETON_WIDTH_WIDE_PX,
   DASHBOARD_CHART_PIE_AREA_HEIGHT_PX,
   DASHBOARD_CHART_PIE_SKELETON_SIZE_PX,
   DASHBOARD_CHART_TITLE_OUTSTANDING_ENGAGEMENTS,
 } from "@/features/dashboard/constants/charts";
+import { useDarkMode } from "@utils/useDarkMode";
 import type { CasesTrendChartProps } from "@/features/dashboard/types/charts";
 import {
   EMPTY_CASES_TREND_DATA,
@@ -39,6 +41,10 @@ import {
   resolveEngagementsNumericTotal,
 } from "@features/dashboard/utils/dashboardCharts";
 
+function normalizeCategory(value: string): string {
+  return value.trim().toLowerCase().replace(/[\s_-]+/g, "-");
+}
+
 /**
  * Displays the cases trend chart.
  *
@@ -51,6 +57,7 @@ export const CasesTrendChart = ({
   isError,
   centerContent = false,
 }: CasesTrendChartProps): JSX.Element => {
+  const isDarkMode = useDarkMode();
   // safe data
   const safeData = data ?? EMPTY_CASES_TREND_DATA;
   // error grey
@@ -65,6 +72,47 @@ export const CasesTrendChart = ({
     errorGrey,
     fallbackGrey,
   );
+  const darkModeColorByCategory = new Map<string, string>([
+    [
+      normalizeCategory("onboarding"),
+      colors.blue?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+        colors.blue?.[300] ??
+        "#93C5FD",
+    ],
+    [
+      normalizeCategory("migration"),
+      colors.orange?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+        colors.orange?.[300] ??
+        "#FDBA74",
+    ],
+    [
+      normalizeCategory("services"),
+      colors.green?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+        colors.green?.[300] ??
+        "#86EFAC",
+    ],
+    [
+      normalizeCategory("follow-up"),
+      colors.purple?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+        colors.purple?.[300] ??
+        "#D8B4FE",
+    ],
+    [
+      normalizeCategory("improvements"),
+      colors.brown?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+        colors.brown?.[300] ??
+        "#D6BFA8",
+    ],
+  ]);
+  const displayChartData = isDarkMode
+    ? chartData.map((entry) => ({
+        ...entry,
+        color:
+          darkModeColorByCategory.get(normalizeCategory(entry.name)) ?? entry.color,
+      }))
+    : chartData;
+  const darkModeCenterTextColor =
+    colors.blue?.[DASHBOARD_CHART_DARK_MODE_SHADE] ?? colors.blue?.[300];
 
   // total
   const total = resolveEngagementsNumericTotal(
@@ -146,7 +194,7 @@ export const CasesTrendChart = ({
                   tooltip={{ show: !isError, wrapperStyle: { zIndex: 1000 } }}
                 >
                   <Pie
-                    data={chartData}
+                    data={displayChartData}
                     cx="50%"
                     cy="50%"
                     innerRadius={60}
@@ -160,7 +208,7 @@ export const CasesTrendChart = ({
                     label={false}
                     labelLine={false}
                   >
-                    {chartData.map((entry, index) => (
+                    {displayChartData.map((entry, index) => (
                       <Cell
                         key={`cell-${index}`}
                         fill={entry.color}
@@ -192,17 +240,28 @@ export const CasesTrendChart = ({
                 </>
               ) : (
                 <>
-                  <Typography variant="h4">{centerValue}</Typography>
+                  <Typography
+                    variant="h4"
+                    color={isDarkMode ? darkModeCenterTextColor : undefined}
+                  >
+                    {centerValue}
+                  </Typography>
                   <Typography variant="caption">
                     {DASHBOARD_CHART_CAPTION_TOTAL}
                   </Typography>
                 </>
               )}
             </Box>
           </Box>
-          <Box sx={centerContent ? { maxWidth: 420, width: "100%", mx: "auto" } : undefined}>
+          <Box
+            sx={
+              centerContent
+                ? { maxWidth: 420, width: "100%", mx: "auto" }
+                : undefined
+            }
+          >
             <ChartLegend
-              data={chartData.map((item) => ({
+              data={displayChartData.map((item) => ({
                 name: item.name,
                 value: item.value,
                 color: item.color,

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

@@ -26,12 +26,14 @@ import ErrorIndicator from "@components/error-indicator/ErrorIndicator";
 import { ChartLegend } from "@features/dashboard/components/charts/ChartLegend";
 import {
   DASHBOARD_CHART_CAPTION_TOTAL,
+  DASHBOARD_CHART_DARK_MODE_SHADE,
   DASHBOARD_CHART_ERROR_ENTITY_OUTSTANDING_CASES,
   DASHBOARD_CHART_LEGEND_SKELETON_WIDTH_INCIDENTS_PX,
   DASHBOARD_CHART_PIE_AREA_HEIGHT_PX,
   DASHBOARD_CHART_PIE_SKELETON_SIZE_PX,
   DASHBOARD_CHART_TITLE_OUTSTANDING_CASES,
 } from "@/features/dashboard/constants/charts";
+import { useDarkMode } from "@utils/useDarkMode";
 import type { OutstandingIncidentsChartProps } from "@/features/dashboard/types/charts";
 import {
   EMPTY_OUTSTANDING_INCIDENTS_DATA,
@@ -40,6 +42,7 @@ import {
   formatOutstandingIncidentsCenterTotal,
   resolveOutstandingIncidentsChartSource,
 } from "@features/dashboard/utils/dashboardCharts";
+import { SeverityLegendKey } from "@features/dashboard/types/dashboard";
 
 /**
  * Displays the Outstanding Incidents chart.
@@ -57,6 +60,7 @@ export const OutstandingIncidentsChart = ({
   restrictSeverityToLow = false,
   centerContent = false,
 }: OutstandingIncidentsChartProps): JSX.Element => {
+  const isDarkMode = useDarkMode();
   // safe data
   const safeData = data ?? EMPTY_OUTSTANDING_INCIDENTS_DATA;
   const displayedData = restrictSeverityToLow
@@ -74,17 +78,68 @@ export const OutstandingIncidentsChart = ({
     excludeS0,
     restrictSeverityToLow,
   );
+  const darkModeChartSource = chartSource.map((item) => {
+    let color;
+
+    switch (item.key) {
+      case SeverityLegendKey.Catastrophic:
+        color =
+          colors.red?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+          colors.red?.[300] ??
+          item.color;
+        break;
+
+      case SeverityLegendKey.Critical:
+        color =
+          colors.orange?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+          colors.orange?.[300] ??
+          item.color;
+        break;
+
+      case SeverityLegendKey.High:
+        color =
+          colors.yellow?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+          colors.yellow?.[300] ??
+          item.color;
+        break;
+
+      case SeverityLegendKey.Medium:
+        color =
+          colors.blue?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+          colors.blue?.[300] ??
+          item.color;
+        break;
+
+      default:
+        color =
+          colors.green?.[DASHBOARD_CHART_DARK_MODE_SHADE] ??
+          colors.green?.[300] ??
+          item.color;
+    }
+
+    return {
+      ...item,
+      color,
+    };
+  });
+  const displayChartSource = isDarkMode ? darkModeChartSource : chartSource;
   // error grey
   const errorGrey = colors.grey?.[300] ?? "#D1D5DB";
 
   // chart data
   const chartData = buildOutstandingIncidentsPieSlices(
-    chartSource,
+    displayChartSource,
     displayedData,
     Boolean(isLoading),
     Boolean(isError),
     errorGrey,
   );
+  const displayLegendData = buildOutstandingIncidentsLegendRows(
+    displayChartSource,
+    displayedData,
+  );
+  const darkModeCenterTextColor =
+    colors.blue?.[DASHBOARD_CHART_DARK_MODE_SHADE] ?? colors.blue?.[300];
 
   return (
     <Card sx={{ height: "100%", p: 2 }}>
@@ -177,7 +232,10 @@ export const OutstandingIncidentsChart = ({
               </Box>
             ) : (
               <>
-                <Typography variant="h4">
+                <Typography
+                  variant="h4"
+                  color={isDarkMode ? darkModeCenterTextColor : undefined}
+                >
                   {formatOutstandingIncidentsCenterTotal(
                     Boolean(data),
                     displayedData.total,
@@ -210,12 +268,14 @@ export const OutstandingIncidentsChart = ({
           ))}
         </Box>
       ) : (
-        <Box sx={centerContent ? { maxWidth: 420, width: "100%", mx: "auto" } : undefined}>
-          <ChartLegend
-            data={buildOutstandingIncidentsLegendRows(chartSource, displayedData)}
-            isError={isError}
-            showValues
-          />
+        <Box
+          sx={
+            centerContent
+              ? { maxWidth: 420, width: "100%", mx: "auto" }
+              : undefined
+          }
+        >
+          <ChartLegend data={displayLegendData} isError={isError} showValues />
         </Box>
       )}
     </Card>

apps/customer-portal/webapp/src/features/dashboard/constants/charts.ts

@@ -53,4 +53,7 @@ export const DASHBOARD_CHART_LEGEND_SKELETON_WIDTH_INCIDENTS_PX = 60;
 export const DASHBOARD_CHART_LEGEND_SKELETON_WIDTH_WIDE_PX = 80;
 
 // chart span
-export const DASHBOARD_CHART_SPAN = { xs: 12 as const, md: 4 as const };
+export const DASHBOARD_CHART_SPAN = { xs: 12 as const, md: 4 as const };
+
+// Dark-mode shade used for dashboard chart slices and legends.
+export const DASHBOARD_CHART_DARK_MODE_SHADE = 300;