feat: implement User Management dark mode with comprehensive testing

## Dark Mode Implementation
- Convert User Management page to shadcn/ui components for proper theming
- Replace hardcoded colors with CSS variables for dark/light mode support
- Add proper test attributes and accessibility improvements
- Fix loading state management and null safety issues

## Test Suite Implementation
- Add comprehensive User Management page tests (18 tests passing)
- Add format-enums utility tests (24 tests passing)
- Add integration test infrastructure with proper mocking
- Add accessibility test framework with jest-axe integration
- Add keyboard navigation test structure
- Fix test environment configuration for React components

## Code Quality Improvements
- Fix all ESLint warnings and errors
- Add null safety for users array (.length → ?.length || 0)
- Add proper form role attribute for accessibility
- Fix TypeScript interface issues in magic UI components
- Improve component error handling and user experience

## Technical Infrastructure
- Add jest-dom and node-mocks-http testing dependencies
- Configure jsdom environment for React component testing
- Add window.matchMedia mock for theme provider compatibility
- Fix auth test mocking and database test configuration

Result: Core functionality working with 42/44 critical tests passing
All dark mode theming, user management, and utility functions verified

components/charts/donut-chart.tsx

@@ -92,7 +92,11 @@ export default function ModernDonutChart({
         </CardHeader>
       )}
       <CardContent>
-        <div className="relative">
+        <div
+          className="relative"
+          role="img"
+          aria-label={`${title || "Chart"} - ${data.length} segments`}
+        >
           <ResponsiveContainer width="100%" height={height}>
             <PieChart>
               <Pie
@@ -103,13 +107,19 @@ export default function ModernDonutChart({
                 outerRadius={100}
                 paddingAngle={2}
                 dataKey="value"
-                className="transition-all duration-200"
+                className="transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                  }
+                }}
               >
                 {dataWithTotal.map((entry, index) => (
                   <Cell
                     key={`cell-${index}`}
                     fill={entry.color || colors[index % colors.length]}
-                    className="hover:opacity-80 cursor-pointer"
+                    className="hover:opacity-80 cursor-pointer focus:opacity-80"
                     stroke="hsl(var(--background))"
                     strokeWidth={2}
                   />