i18n

src/client/Dashboard.js

@@ -1,8 +1,10 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Grid, Typography, Button, ButtonGroup, Box, Alert } from '@mui/material';
 import ControllerCard from './ControllerCard';
+import { useI18n } from './I18nContext';
 
 export default function Dashboard() {
+    const { t } = useI18n();
     const [groupedDevices, setGroupedDevices] = useState({});
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
@@ -44,7 +46,7 @@ export default function Dashboard() {
     // Auto-refresh logic (basic rerender trigger could be added here, 
     // but simpler to let ControllerCard handle data fetching internally based on props)
 
-    if (loading) return <Typography>Loading devices...</Typography>;
+    if (loading) return <Typography>{t('dashboard.loading')}</Typography>;
     if (error) return <Alert severity="error">{error}</Alert>;
 
     return (
@@ -55,19 +57,19 @@ export default function Dashboard() {
                         onClick={() => setRange('day')}
                         color={range === 'day' ? 'primary' : 'inherit'}
                     >
-                        24 Hours
+                        {t('dashboard.hours24')}
                     </Button>
                     <Button
                         onClick={() => setRange('week')}
                         color={range === 'week' ? 'primary' : 'inherit'}
                     >
-                        7 Days
+                        {t('dashboard.days7')}
                     </Button>
                     <Button
                         onClick={() => setRange('month')}
                         color={range === 'month' ? 'primary' : 'inherit'}
                     >
-                        30 Days
+                        {t('dashboard.days30')}
                     </Button>
                 </ButtonGroup>
             </Box>