Add comprehensive unit tests for homepage components and utilities

- Introduced unit tests for homepage components: `QuickStartCode`, `Header`, `DemoCredentialsModal`, `AnimatedTerminal`, `CTASection`, and `StatsSection`.
- Added utility tests for `chart-colors` including opacity, palettes, and gradient validation.
- Mocked dependencies (`framer-motion`, `react-syntax-highlighter`, `DemoCredentialsModal`) for isolated testing.
- Verified accessibility features, animations, and interactive behaviors across components.

frontend/tests/components/charts/UserStatusChart.test.tsx

@@ -6,14 +6,33 @@ import { render, screen } from '@testing-library/react';
 import { UserStatusChart } from '@/components/charts/UserStatusChart';
 import type { UserStatusData } from '@/components/charts/UserStatusChart';
 
+// Capture label function at module level for testing
+let capturedLabelFunction: ((entry: any) => string) | null = null;
+
 // Mock recharts to avoid rendering issues in tests
 jest.mock('recharts', () => {
   const OriginalModule = jest.requireActual('recharts');
+
+  const MockPie = (props: any) => {
+    // Capture the label function for testing
+    if (props.label && typeof props.label === 'function') {
+      capturedLabelFunction = props.label;
+    }
+    return <div data-testid="pie-chart">{props.children}</div>;
+  };
+
   return {
     ...OriginalModule,
     ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
       <div data-testid="responsive-container">{children}</div>
     ),
+    PieChart: ({ children }: { children: React.ReactNode }) => (
+      <div data-testid="pie-chart-container">{children}</div>
+    ),
+    Pie: MockPie,
+    Cell: ({ fill }: { fill: string }) => <div data-testid="cell" style={{ fill }} />,
+    Tooltip: () => <div data-testid="tooltip" />,
+    Legend: () => <div data-testid="legend" />,
   };
 });
 
@@ -69,4 +88,57 @@ describe('UserStatusChart', () => {
     expect(screen.getByText('User Status Distribution')).toBeInTheDocument();
     expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
   });
+
+  describe('renderLabel function', () => {
+    beforeEach(() => {
+      capturedLabelFunction = null;
+    });
+
+    it('formats label with name and percentage', () => {
+      render(<UserStatusChart data={mockData} />);
+
+      expect(capturedLabelFunction).toBeTruthy();
+
+      if (capturedLabelFunction) {
+        const result = capturedLabelFunction({ name: 'Active', percent: 0.75 });
+        expect(result).toBe('Active: 75%');
+      }
+    });
+
+    it('formats label with zero percent', () => {
+      render(<UserStatusChart data={mockData} />);
+
+      if (capturedLabelFunction) {
+        const result = capturedLabelFunction({ name: 'Inactive', percent: 0 });
+        expect(result).toBe('Inactive: 0%');
+      }
+    });
+
+    it('formats label with 100 percent', () => {
+      render(<UserStatusChart data={mockData} />);
+
+      if (capturedLabelFunction) {
+        const result = capturedLabelFunction({ name: 'All Users', percent: 1 });
+        expect(result).toBe('All Users: 100%');
+      }
+    });
+
+    it('rounds percentage to nearest whole number', () => {
+      render(<UserStatusChart data={mockData} />);
+
+      if (capturedLabelFunction) {
+        const result = capturedLabelFunction({ name: 'Pending', percent: 0.4567 });
+        expect(result).toBe('Pending: 46%');
+      }
+    });
+
+    it('handles small percentages', () => {
+      render(<UserStatusChart data={mockData} />);
+
+      if (capturedLabelFunction) {
+        const result = capturedLabelFunction({ name: 'Suspended', percent: 0.025 });
+        expect(result).toBe('Suspended: 3%');
+      }
+    });
+  });
 });