feat: Apply localization to Login, Dashboard, and Navigation (Phase 9 - Batch 1)

**Pages Localized:**
- Login page: All UI strings (titles, labels, buttons, links)
- Dashboard page: Welcome message, quick actions, daily summary, predictions
- AppShell: Connection status and presence indicators
- MobileNav: Menu items and app branding
- TabBar: Bottom navigation labels

**Translation Files:**
- Created dashboard.json for all 5 languages (en, es, fr, pt, zh)
- Enhanced common.json with navigation and connection strings
- Updated i18n config to include dashboard namespace

**Languages Supported:**
- English, Spanish, French, Portuguese, Chinese (Simplified)

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

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

maternal-web/components/layouts/AppShell/AppShell.tsx

@@ -7,12 +7,14 @@ import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { ReactNode } from 'react';
 import { useWebSocket } from '@/hooks/useWebSocket';
 import { Wifi, WifiOff, People } from '@mui/icons-material';
+import { useTranslation } from '@/hooks/useTranslation';
 
 interface AppShellProps {
   children: ReactNode;
 }
 
 export const AppShell = ({ children }: AppShellProps) => {
+  const { t } = useTranslation('common');
   const isMobile = useMediaQuery('(max-width: 768px)');
   const isTablet = useMediaQuery('(max-width: 1024px)');
   const { isConnected, presence } = useWebSocket();
@@ -38,10 +40,10 @@ export const AppShell = ({ children }: AppShellProps) => {
           gap: 1,
         }}
       >
-        <Tooltip title={isConnected ? 'Real-time sync active' : 'Real-time sync disconnected'}>
+        <Tooltip title={isConnected ? t('connection.syncActive') : t('connection.syncDisconnected')}>
           <Chip
             icon={isConnected ? <Wifi /> : <WifiOff />}
-            label={isConnected ? 'Live' : 'Offline'}
+            label={isConnected ? t('connection.live') : t('connection.offline')}
             size="small"
             color={isConnected ? 'success' : 'default'}
             sx={{
@@ -52,7 +54,7 @@ export const AppShell = ({ children }: AppShellProps) => {
         </Tooltip>
 
         {isConnected && presence.count > 1 && (
-          <Tooltip title={`${presence.count} family members online`}>
+          <Tooltip title={t('connection.familyMembersOnline', { count: presence.count })}>
             <Chip
               icon={<People />}
               label={presence.count}

maternal-web/components/layouts/MobileNav/MobileNav.tsx

@@ -28,19 +28,21 @@ import {
   Group,
   Logout,
 } from '@mui/icons-material';
+import { useTranslation } from '@/hooks/useTranslation';
 
 export const MobileNav = () => {
+  const { t } = useTranslation('common');
   const [drawerOpen, setDrawerOpen] = useState(false);
   const router = useRouter();
 
   const menuItems = [
-    { label: 'Dashboard', icon: <Home />, path: '/' },
-    { label: 'Track Activity', icon: <Timeline />, path: '/track' },
-    { label: 'AI Assistant', icon: <Chat />, path: '/ai-assistant' },
-    { label: 'Insights', icon: <Insights />, path: '/insights' },
-    { label: 'Children', icon: <ChildCare />, path: '/children' },
-    { label: 'Family', icon: <Group />, path: '/family' },
-    { label: 'Settings', icon: <Settings />, path: '/settings' },
+    { label: t('navigation.dashboard'), icon: <Home />, path: '/' },
+    { label: t('navigation.trackActivity'), icon: <Timeline />, path: '/track' },
+    { label: t('navigation.ai'), icon: <Chat />, path: '/ai-assistant' },
+    { label: t('navigation.insights'), icon: <Insights />, path: '/insights' },
+    { label: t('navigation.children'), icon: <ChildCare />, path: '/children' },
+    { label: t('navigation.family'), icon: <Group />, path: '/family' },
+    { label: t('navigation.settings'), icon: <Settings />, path: '/settings' },
   ];
 
   const handleNavigate = (path: string) => {
@@ -61,7 +63,7 @@ export const MobileNav = () => {
             <MenuIcon />
           </IconButton>
           <Typography variant="h6" component="div" sx={{ flexGrow: 1, color: '#DB7093', fontWeight: 600 }}>
-            Maternal
+            {t('appName')}
           </Typography>
           <IconButton
             color="primary"
@@ -113,7 +115,7 @@ export const MobileNav = () => {
                 <ListItemIcon sx={{ color: 'error.main' }}>
                   <Logout />
                 </ListItemIcon>
-                <ListItemText primary="Logout" />
+                <ListItemText primary={t('navigation.logout')} />
               </ListItemButton>
             </ListItem>
           </List>

maternal-web/components/layouts/TabBar/TabBar.tsx

@@ -9,17 +9,19 @@ import {
   Insights,
   Settings,
 } from '@mui/icons-material';
+import { useTranslation } from '@/hooks/useTranslation';
 
 export const TabBar = () => {
+  const { t } = useTranslation('common');
   const router = useRouter();
   const pathname = usePathname();
 
   const tabs = [
-    { label: 'Home', icon: <Home />, value: '/' },
-    { label: 'Track', icon: <Timeline />, value: '/track' },
-    { label: 'AI Chat', icon: <Chat />, value: '/ai-assistant' },
-    { label: 'Insights', icon: <Insights />, value: '/insights' },
-    { label: 'Settings', icon: <Settings />, value: '/settings' },
+    { label: t('navigation.home'), icon: <Home />, value: '/' },
+    { label: t('navigation.track'), icon: <Timeline />, value: '/track' },
+    { label: t('navigation.aiChat'), icon: <Chat />, value: '/ai-assistant' },
+    { label: t('navigation.insights'), icon: <Insights />, value: '/insights' },
+    { label: t('navigation.settings'), icon: <Settings />, value: '/settings' },
   ];
 
   return (