feat: Add enhanced analytics dashboard with advanced visualizations

- Created EnhancedInsightsDashboard with multiple chart types:
  - Area charts with gradients for activity trends
  - Radar chart for weekly activity patterns
  - 24-hour heatmap visualization
  - Bubble/scatter chart for correlations
  - Time of day distribution bar chart
- Added toggle between basic and enhanced chart views
- Implemented chart export functionality (PNG/PDF)
- Fixed API endpoint URLs (circadian-rhythm, query params)
- Fixed component library conflicts (shadcn/ui → MUI)
- Added comprehensive null safety for timestamp handling
- Added alert type translations in all 5 languages
- Installed html2canvas and jspdf for export features
- Applied consistent minimum width styling to all charts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/components/features/analytics/UnifiedInsightsDashboard.tsx

@@ -21,11 +21,14 @@ import { useRouter } from 'next/navigation';
 import { childrenApi, Child } from '@/lib/api/children';
 import { analyticsApi, PatternInsights, PredictionInsights } from '@/lib/api/analytics';
 import { InsightsDashboard } from './InsightsDashboard';
+import { EnhancedInsightsDashboard } from './EnhancedInsightsDashboard';
 import PredictionsCard from './PredictionsCard';
 import GrowthSpurtAlert from './GrowthSpurtAlert';
 import ChildSelector from '@/components/common/ChildSelector';
 import { motion } from 'framer-motion';
 import { useAuth } from '@/lib/auth/AuthContext';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { ShowChart, BubbleChart } from '@mui/icons-material';
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -62,6 +65,7 @@ export function UnifiedInsightsDashboard() {
   const [predictionsLoading, setPredictionsLoading] = useState(false);
   const [days, setDays] = useState<number>(7);
   const [error, setError] = useState<string>('');
+  const [chartMode, setChartMode] = useState<'basic' | 'enhanced'>('basic');
 
   // Get the selected child ID (first one from the array for single selection)
   const selectedChildId = selectedChildIds[0] || '';
@@ -241,10 +245,35 @@ export function UnifiedInsightsDashboard() {
           </Tabs>
         </Box>
 
+        {/* Chart Mode Toggle for Insights Tab */}
+        {tabValue === 0 && (
+          <Box sx={{ mb: 2, display: 'flex', justifyContent: 'center' }}>
+            <ToggleButtonGroup
+              value={chartMode}
+              exclusive
+              onChange={(e, newMode) => newMode && setChartMode(newMode)}
+              size="small"
+            >
+              <ToggleButton value="basic" aria-label="basic charts">
+                <ShowChart sx={{ mr: 1 }} />
+                Basic Charts
+              </ToggleButton>
+              <ToggleButton value="enhanced" aria-label="enhanced charts">
+                <BubbleChart sx={{ mr: 1 }} />
+                Enhanced Charts
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </Box>
+        )}
+
         {/* Tab Panels */}
         <TabPanel value={tabValue} index={0}>
-          {/* Insights tab shows the existing InsightsDashboard */}
-          <InsightsDashboard selectedChildId={selectedChildId} days={days} />
+          {/* Insights tab shows either basic or enhanced dashboard */}
+          {chartMode === 'basic' ? (
+            <InsightsDashboard selectedChildId={selectedChildId} days={days} />
+          ) : (
+            <EnhancedInsightsDashboard selectedChildId={selectedChildId} days={days} />
+          )}
         </TabPanel>
 
         <TabPanel value={tabValue} index={1}>