u

src/client/Dashboard.js

@@ -9,25 +9,62 @@ class Dashboard extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            range: 'day' // 'day', 'week', 'month'
+            range: 'day', // 'day', 'week', 'month'
+            offset: 0
         };
     }
 
     setRange = (range) => {
-        this.setState({ range });
+        this.setState({ range, offset: 0 });
+    };
+
+    setOffset = (offset) => {
+        if (offset < 0) offset = 0;
+        this.setState({ offset });
     };
 
     render() {
         const { i18n: { t }, devicesCtx: { devices, groupedDevices, loading, error } } = this.props;
-        const { range } = this.state;
+        const { range, offset } = this.state;
+
+        const nowMs = Date.now();
+        const durationSec = (range === 'week' ? 7 * 24 * 3600 : (range === 'month' ? 30 * 24 * 3600 : 24 * 3600));
+        const endMs = nowMs - (offset * durationSec * 1000);
+        const startMs = endMs - (durationSec * 1000);
+
+        const dateOpts = { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' };
+        const dateRangeLabel = `${new Date(startMs).toLocaleString([], dateOpts)} - ${new Date(endMs).toLocaleString([], dateOpts)}`;
 
         if (loading) return <Typography>{t('dashboard.loading')}</Typography>;
         if (error) return <Alert severity="error">{error}</Alert>;
 
         return (
             <Box>
-                <Box display="flex" justifyContent="flex-end" mb={3}>
+                <Box
+                    display="flex"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    mb={3}
+                    sx={{
+                        position: 'sticky',
+                        top: 0,
+                        zIndex: 100,
+                        backgroundColor: '#1d2021', // Dashboard background color to cover content
+                        padding: '10px 20px', // Added horizontal padding
+                        borderBottom: '1px solid #3c3836',
+                        margin: '-16px -16px 16px -16px' // Negative margin to stretch full width if inside padding
+                    }}
+                >
+                    <Typography variant="h6" sx={{ color: '#ebdbb2' }}>
+                        {dateRangeLabel}
+                    </Typography>
                     <ButtonGroup variant="contained" aria-label="outlined primary button group">
+                        <Button
+                            onClick={() => this.setOffset(this.state.offset + 1)}
+                            color="inherit"
+                        >
+                            &lt;
+                        </Button>
                         <Button
                             onClick={() => this.setRange('day')}
                             color={range === 'day' ? 'primary' : 'inherit'}
@@ -46,6 +83,13 @@ class Dashboard extends Component {
                         >
                             {t('dashboard.days30')}
                         </Button>
+                        <Button
+                            onClick={() => this.setOffset(this.state.offset - 1)}
+                            disabled={this.state.offset <= 0}
+                            color="inherit"
+                        >
+                            &gt;
+                        </Button>
                     </ButtonGroup>
                 </Box>
 
@@ -55,10 +99,11 @@ class Dashboard extends Component {
                         controllerName={controllerName}
                         ports={ports}
                         range={range}
+                        offset={this.state.offset}
                     />
                 ))}
 
-                <OutputChart range={range} devices={devices} />
+                <OutputChart range={range} offset={this.state.offset} devices={devices} />
             </Box>
         );
     }