Display live and cached consumption on dashboard

central_frontend/src/routes/HomeRoute.tsx

@@ -1,3 +1,27 @@
+import { Typography } from "@mui/material";
+import { CurrConsumptionWidget } from "./HomeRoute/CurrConsumptionWidget";
+import Grid from "@mui/material/Grid2";
+import { CachedConsumptionWidget } from "./HomeRoute/CachedConsumptionWidget";
+
 export function HomeRoute(): React.ReactElement {
-  return <>home authenticated todo</>;
+  return (
+    <div style={{ flex: 1, padding: "10px" }}>
+      <Typography component="h2" variant="h6" sx={{ mb: 2 }}>
+        Overview
+      </Typography>
+      <Grid
+        container
+        spacing={2}
+        columns={12}
+        sx={{ mb: (theme) => theme.spacing(2) }}
+      >
+        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+          <CurrConsumptionWidget />
+        </Grid>
+        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+          <CachedConsumptionWidget />
+        </Grid>
+      </Grid>
+    </div>
+  );
 }