Refactor charts to use centralized color palette configuration

- Introduced `chart-colors.ts` utility to manage reusable color configurations across all chart components (`UserGrowthChart`, `OrganizationDistributionChart`, `SessionActivityChart`, `UserStatusChart`).
- Updated chart components to replace inline color definitions with `CHART_PALETTES` for improved consistency and maintainability.
- Enhanced tooltip, legend, and axis styles to align with updated project theming.

frontend/src/components/charts/OrganizationDistributionChart.tsx

@@ -7,6 +7,7 @@
 
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { ChartCard } from './ChartCard';
+import { CHART_PALETTES } from '@/lib/chart-colors';
 
 export interface OrganizationDistributionData {
   name: string;
@@ -51,18 +52,21 @@ export function OrganizationDistributionChart({
           <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
           <XAxis
             dataKey="name"
-            className="text-xs"
+            stroke="hsl(var(--border))"
-            tick={{ fill: 'hsl(var(--muted-foreground))' }}
+            tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+            tickLine={{ stroke: 'hsl(var(--border))' }}
           />
           <YAxis
-            className="text-xs"
+            stroke="hsl(var(--border))"
-            tick={{ fill: 'hsl(var(--muted-foreground))' }}
+            tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+            tickLine={{ stroke: 'hsl(var(--border))' }}
           />
           <Tooltip
             contentStyle={{
               backgroundColor: 'hsl(var(--popover))',
               border: '1px solid hsl(var(--border))',
               borderRadius: '6px',
+              color: 'hsl(var(--popover-foreground))',
             }}
             labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
           />
@@ -74,13 +78,13 @@ export function OrganizationDistributionChart({
           <Bar
             dataKey="members"
             name="Total Members"
-            fill="hsl(var(--primary))"
+            fill={CHART_PALETTES.bar[0]}
             radius={[4, 4, 0, 0]}
           />
           <Bar
             dataKey="activeMembers"
             name="Active Members"
-            fill="hsl(var(--chart-2))"
+            fill={CHART_PALETTES.bar[1]}
             radius={[4, 4, 0, 0]}
           />
         </BarChart>

frontend/src/components/charts/SessionActivityChart.tsx

@@ -8,6 +8,7 @@
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { ChartCard } from './ChartCard';
 import { format, subDays } from 'date-fns';
+import { CHART_PALETTES } from '@/lib/chart-colors';
 
 export interface SessionActivityData {
   date: string;
@@ -52,29 +53,32 @@ export function SessionActivityChart({ data, loading, error }: SessionActivityCh
         <AreaChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
           <defs>
             <linearGradient id="colorActive" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor="hsl(var(--primary))" stopOpacity={0.8} />
+              <stop offset="5%" stopColor={CHART_PALETTES.area[0]} stopOpacity={0.8} />
-              <stop offset="95%" stopColor="hsl(var(--primary))" stopOpacity={0.1} />
+              <stop offset="95%" stopColor={CHART_PALETTES.area[0]} stopOpacity={0.1} />
             </linearGradient>
             <linearGradient id="colorNew" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor="hsl(var(--chart-2))" stopOpacity={0.8} />
+              <stop offset="5%" stopColor={CHART_PALETTES.area[1]} stopOpacity={0.8} />
-              <stop offset="95%" stopColor="hsl(var(--chart-2))" stopOpacity={0.1} />
+              <stop offset="95%" stopColor={CHART_PALETTES.area[1]} stopOpacity={0.1} />
             </linearGradient>
           </defs>
           <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
           <XAxis
             dataKey="date"
-            className="text-xs"
+            stroke="hsl(var(--border))"
-            tick={{ fill: 'hsl(var(--muted-foreground))' }}
+            tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+            tickLine={{ stroke: 'hsl(var(--border))' }}
           />
           <YAxis
-            className="text-xs"
+            stroke="hsl(var(--border))"
-            tick={{ fill: 'hsl(var(--muted-foreground))' }}
+            tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+            tickLine={{ stroke: 'hsl(var(--border))' }}
           />
           <Tooltip
             contentStyle={{
               backgroundColor: 'hsl(var(--popover))',
               border: '1px solid hsl(var(--border))',
               borderRadius: '6px',
+              color: 'hsl(var(--popover-foreground))',
             }}
             labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
           />
@@ -87,7 +91,7 @@ export function SessionActivityChart({ data, loading, error }: SessionActivityCh
             type="monotone"
             dataKey="activeSessions"
             name="Active Sessions"
-            stroke="hsl(var(--primary))"
+            stroke={CHART_PALETTES.area[0]}
             strokeWidth={2}
             fillOpacity={1}
             fill="url(#colorActive)"
@@ -96,7 +100,7 @@ export function SessionActivityChart({ data, loading, error }: SessionActivityCh
             type="monotone"
             dataKey="newSessions"
             name="New Sessions"
-            stroke="hsl(var(--chart-2))"
+            stroke={CHART_PALETTES.area[1]}
             strokeWidth={2}
             fillOpacity={1}
             fill="url(#colorNew)"

frontend/src/components/charts/UserGrowthChart.tsx

@@ -8,6 +8,7 @@
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';
 import { ChartCard } from './ChartCard';
 import { format, subDays } from 'date-fns';
+import { CHART_PALETTES } from '@/lib/chart-colors';
 
 export interface UserGrowthData {
   date: string;
@@ -54,18 +55,21 @@ export function UserGrowthChart({ data, loading, error }: UserGrowthChartProps)
           <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
           <XAxis
             dataKey="date"
-            className="text-xs"
+            stroke="hsl(var(--border))"
-            tick={{ fill: 'hsl(var(--muted-foreground))' }}
+            tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+            tickLine={{ stroke: 'hsl(var(--border))' }}
           />
           <YAxis
-            className="text-xs"
+            stroke="hsl(var(--border))"
-            tick={{ fill: 'hsl(var(--muted-foreground))' }}
+            tick={{ fill: 'hsl(var(--muted-foreground))', fontSize: 12 }}
+            tickLine={{ stroke: 'hsl(var(--border))' }}
           />
           <Tooltip
             contentStyle={{
               backgroundColor: 'hsl(var(--popover))',
               border: '1px solid hsl(var(--border))',
               borderRadius: '6px',
+              color: 'hsl(var(--popover-foreground))',
             }}
             labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
           />
@@ -78,7 +82,7 @@ export function UserGrowthChart({ data, loading, error }: UserGrowthChartProps)
             type="monotone"
             dataKey="totalUsers"
             name="Total Users"
-            stroke="hsl(var(--primary))"
+            stroke={CHART_PALETTES.line[0]}
             strokeWidth={2}
             dot={false}
             activeDot={{ r: 6 }}
@@ -87,7 +91,7 @@ export function UserGrowthChart({ data, loading, error }: UserGrowthChartProps)
             type="monotone"
             dataKey="activeUsers"
             name="Active Users"
-            stroke="hsl(var(--chart-2))"
+            stroke={CHART_PALETTES.line[1]}
             strokeWidth={2}
             dot={false}
             activeDot={{ r: 6 }}

frontend/src/components/charts/UserStatusChart.tsx

@@ -7,6 +7,7 @@
 
 import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
 import { ChartCard } from './ChartCard';
+import { CHART_PALETTES } from '@/lib/chart-colors';
 
 export interface UserStatusData {
   name: string;
@@ -23,10 +24,10 @@ interface UserStatusChartProps {
 // Generate mock data for development/demo
 function generateMockData(): UserStatusData[] {
   return [
-    { name: 'Active', value: 142, color: 'hsl(var(--chart-1))' },
+    { name: 'Active', value: 142, color: CHART_PALETTES.pie[0] },
-    { name: 'Inactive', value: 28, color: 'hsl(var(--chart-2))' },
+    { name: 'Inactive', value: 28, color: CHART_PALETTES.pie[1] },
-    { name: 'Pending', value: 15, color: 'hsl(var(--chart-3))' },
+    { name: 'Pending', value: 15, color: CHART_PALETTES.pie[2] },
-    { name: 'Suspended', value: 5, color: 'hsl(var(--chart-4))' },
+    { name: 'Suspended', value: 5, color: CHART_PALETTES.pie[3] },
   ];
 }
 
@@ -67,6 +68,7 @@ export function UserStatusChart({ data, loading, error }: UserStatusChartProps)
               backgroundColor: 'hsl(var(--popover))',
               border: '1px solid hsl(var(--border))',
               borderRadius: '6px',
+              color: 'hsl(var(--popover-foreground))',
             }}
             labelStyle={{ color: 'hsl(var(--popover-foreground))' }}
           />
@@ -75,6 +77,7 @@ export function UserStatusChart({ data, loading, error }: UserStatusChartProps)
             height={36}
             wrapperStyle={{
               paddingTop: '20px',
+              color: 'hsl(var(--foreground))',
             }}
           />
         </PieChart>

frontend/src/lib/chart-colors.ts

@@ -0,0 +1,78 @@
+/**
+ * Chart Color Configuration
+ * Provides vibrant, accessible colors for data visualization
+ * Converts design system colors to recharts-compatible formats
+ */
+
+export const CHART_COLORS = {
+  // Primary blue palette - vibrant and professional
+  primary: '#3b82f6',     // Blue 500
+  primaryLight: '#60a5fa', // Blue 400
+  primaryDark: '#2563eb',  // Blue 600
+
+  // Secondary accent colors - complementary palette
+  accent1: '#8b5cf6',     // Violet 500
+  accent2: '#ec4899',     // Pink 500
+  accent3: '#f59e0b',     // Amber 500
+  accent4: '#10b981',     // Emerald 500
+  accent5: '#06b6d4',     // Cyan 500
+
+  // Status colors
+  success: '#10b981',     // Emerald 500
+  warning: '#f59e0b',     // Amber 500
+  error: '#ef4444',       // Red 500
+  info: '#3b82f6',        // Blue 500
+
+  // Neutral colors for supporting elements
+  muted: '#94a3b8',       // Slate 400
+  mutedDark: '#64748b',   // Slate 500
+};
+
+// Chart-specific color palettes for different chart types
+export const CHART_PALETTES = {
+  // Line chart palette - 2 contrasting colors
+  line: [CHART_COLORS.primary, CHART_COLORS.accent1],
+
+  // Bar chart palette - 2 complementary colors
+  bar: [CHART_COLORS.primary, CHART_COLORS.accent2],
+
+  // Area chart palette - 2 harmonious colors with gradients
+  area: [CHART_COLORS.primary, CHART_COLORS.accent5],
+
+  // Pie chart palette - 4-5 distinct colors
+  pie: [
+    CHART_COLORS.primary,
+    CHART_COLORS.accent1,
+    CHART_COLORS.accent3,
+    CHART_COLORS.accent4,
+  ],
+
+  // Multi-series palette - for charts with many data series
+  multi: [
+    CHART_COLORS.primary,
+    CHART_COLORS.accent1,
+    CHART_COLORS.accent2,
+    CHART_COLORS.accent3,
+    CHART_COLORS.accent4,
+    CHART_COLORS.accent5,
+  ],
+};
+
+// Gradient definitions for area charts
+export const CHART_GRADIENTS = {
+  primary: {
+    start: CHART_COLORS.primary,
+    end: `${CHART_COLORS.primary}20`, // 20% opacity
+  },
+  accent: {
+    start: CHART_COLORS.accent1,
+    end: `${CHART_COLORS.accent1}20`, // 20% opacity
+  },
+};
+
+// Helper function to get color with opacity
+export function withOpacity(color: string, opacity: number): string {
+  // Convert opacity (0-1) to hex (00-FF)
+  const hex = Math.round(opacity * 255).toString(16).padStart(2, '0');
+  return `${color}${hex}`;
+}