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/app/page.tsx

@@ -25,8 +25,10 @@ import { useQuery } from '@apollo/client/react';
 import { GET_DASHBOARD } from '@/graphql/queries/dashboard';
 import { format } from 'date-fns';
 import { useRealTimeActivities } from '@/hooks/useWebSocket';
+import { useTranslation } from '@/hooks/useTranslation';
 
 export default function HomePage() {
+  const { t } = useTranslation('dashboard');
   const { user, isLoading: authLoading } = useAuth();
   const router = useRouter();
   const [selectedChildId, setSelectedChildId] = useState<string | null>(null);
@@ -93,12 +95,12 @@ export default function HomePage() {
   }, [data, selectedChildId]);
 
   const quickActions = [
-    { icon: <Restaurant />, label: 'Feeding', color: '#E91E63', path: '/track/feeding' }, // Pink with 4.5:1 contrast
-    { icon: <Hotel />, label: 'Sleep', color: '#1976D2', path: '/track/sleep' }, // Blue with 4.5:1 contrast
-    { icon: <BabyChangingStation />, label: 'Diaper', color: '#F57C00', path: '/track/diaper' }, // Orange with 4.5:1 contrast
-    { icon: <MedicalServices />, label: 'Medicine', color: '#C62828', path: '/track/medication' }, // Red with 4.5:1 contrast
-    { icon: <Insights />, label: 'Activities', color: '#558B2F', path: '/activities' }, // Green with 4.5:1 contrast
-    { icon: <SmartToy />, label: 'AI Assistant', color: '#D84315', path: '/ai-assistant' }, // Deep orange with 4.5:1 contrast
+    { icon: <Restaurant />, label: t('quickActions.feeding'), color: '#E91E63', path: '/track/feeding' }, // Pink with 4.5:1 contrast
+    { icon: <Hotel />, label: t('quickActions.sleep'), color: '#1976D2', path: '/track/sleep' }, // Blue with 4.5:1 contrast
+    { icon: <BabyChangingStation />, label: t('quickActions.diaper'), color: '#F57C00', path: '/track/diaper' }, // Orange with 4.5:1 contrast
+    { icon: <MedicalServices />, label: t('quickActions.medicine'), color: '#C62828', path: '/track/medication' }, // Red with 4.5:1 contrast
+    { icon: <Insights />, label: t('quickActions.activities'), color: '#558B2F', path: '/activities' }, // Green with 4.5:1 contrast
+    { icon: <SmartToy />, label: t('quickActions.aiAssistant'), color: '#D84315', path: '/ai-assistant' }, // Deep orange with 4.5:1 contrast
   ];
 
   const formatSleepHours = (minutes: number) => {
@@ -132,15 +134,15 @@ export default function HomePage() {
             transition={{ duration: 0.5 }}
           >
             <Typography variant="h4" component="h1" gutterBottom fontWeight="600" sx={{ mb: 1 }}>
-              Welcome Back{user?.name ? `, ${user.name}` : ''}! 👋
+              {user?.name ? t('welcomeBackWithName', { name: user.name }) : t('welcomeBack')} 👋
             </Typography>
           <Typography variant="body1" sx={{ mb: 4, color: 'text.primary' }}>
-            Track your child's activities and get AI-powered insights
+            {t('subtitle')}
           </Typography>
 
           {/* Quick Actions */}
           <Typography variant="h6" component="h2" gutterBottom fontWeight="600" sx={{ mb: 2 }}>
-            Quick Actions
+            {t('quickActions.title')}
           </Typography>
           <Grid container spacing={2} sx={{ mb: 4 }}>
             {quickActions.map((action, index) => (
@@ -160,7 +162,7 @@ export default function HomePage() {
                         router.push(action.path);
                       }
                     }}
-                    aria-label={`Navigate to ${action.label}`}
+                    aria-label={t('quickActions.navigateTo', { action: action.label })}
                     sx={{
                       p: 3,
                       height: '100%',
@@ -196,7 +198,7 @@ export default function HomePage() {
 
           {/* Today's Summary */}
           <Typography variant="h6" component="h2" gutterBottom fontWeight="600" sx={{ mb: 2 }}>
-            Today's Summary{selectedChild ? ` - ${selectedChild.name}` : ''}
+            {selectedChild ? t('summary.titleWithChild', { childName: selectedChild.name }) : t('summary.title')}
           </Typography>
           <ErrorBoundary
             isolate
@@ -210,8 +212,8 @@ export default function HomePage() {
                 <Box sx={{ textAlign: 'center', py: 4 }}>
                   <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
                     {children.length === 0
-                      ? 'Add a child to start tracking'
-                      : 'No activities tracked today'}
+                      ? t('summary.noChild')
+                      : t('summary.noActivities')}
                   </Typography>
                 </Box>
               ) : (
@@ -232,7 +234,7 @@ export default function HomePage() {
                         {dailySummary.feedingCount || 0}
                       </Typography>
                       <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                        Feedings
+                        {t('summary.feedings')}
                       </Typography>
                     </Box>
                   </Grid>
@@ -254,7 +256,7 @@ export default function HomePage() {
                           : '0m'}
                       </Typography>
                       <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                        Sleep
+                        {t('summary.sleep')}
                       </Typography>
                     </Box>
                   </Grid>
@@ -274,7 +276,7 @@ export default function HomePage() {
                         {dailySummary.diaperCount || 0}
                       </Typography>
                       <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                        Diapers
+                        {t('summary.diapers')}
                       </Typography>
                     </Box>
                   </Grid>
@@ -294,7 +296,7 @@ export default function HomePage() {
                         {dailySummary.medicationCount || 0}
                       </Typography>
                       <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                        Medications
+                        {t('summary.medications')}
                       </Typography>
                     </Box>
                   </Grid>
@@ -308,13 +310,13 @@ export default function HomePage() {
           <Box sx={{ mt: 4 }}>
             <Paper sx={{ p: 3, bgcolor: 'primary.light' }}>
               <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }} gutterBottom>
-                Next Predicted Activity
+                {t('predictions.title')}
               </Typography>
               <Typography variant="h6" fontWeight="600" gutterBottom>
-                Nap time in 45 minutes
+                {t('predictions.napTime', { minutes: 45 })}
               </Typography>
               <Typography variant="body2" sx={{ color: 'rgba(0, 0, 0, 0.7)' }}>
-                Based on your child's sleep patterns
+                {t('predictions.basedOnPatterns')}
               </Typography>
             </Paper>
           </Box>