Changed stuff, added filter for statistics module

src/GarageApp/modules/StatisticsView.tsx

@@ -1,13 +1,76 @@
 import { useTranslation, withTranslation, Trans } from 'react-i18next';
+import Container from '@mui/material/Container';
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+import Grid from '@mui/material/Grid'
 
+const uid = "39e9009e-50e1-4277-bbf7-69e5e0f6c6dc"
+const expenses_response = await fetch(`/GarageApp/api/expenses/${uid}`);
+const fillups_response = await fetch(`/GarageApp/api/fillups/${uid}`);
+const expenses = await expenses_response.json();
+const fillups = await fillups_response.json();
 
+function BasicSelect({ selectedAge,setSelectedAge }) {
 
+  //const [age, setAge] = React.useState('30');
 
+  const handleChange = (event: SelectChangeEvent) => {
+    //setAge(event.target.value as string);
+    setSelectedAge(event.target.value as string);
+  };
+
+  return (
+    <Box sx={{ minWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel id="demo-simple-select-label">Age</InputLabel>
+        <Select
+          labelId="demo-simple-select-label"
+          id="demo-simple-select"
+          value={selectedAge}
+          label="Age"
+          onChange={handleChange}
+        >
+          <MenuItem value={10}>This Week</MenuItem>
+          <MenuItem value={20}>This Month</MenuItem>
+          <MenuItem value={30}>Past 30 days</MenuItem>
+          <MenuItem value={40}>Past 3 Months</MenuItem>
+          <MenuItem value={50}>This Year</MenuItem>
+          <MenuItem value={60}>All Time</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+};
 
 
 export default function StatisticsView() {
-	const { t, i18n } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const [selectedAge, setSelectedAge] = React.useState('30');
+  
   return (
-    <h1>{t ('statistics')}</h1>
-  )
+    <Container>
+      <Grid container spacing={2} sx={{alignItems: "center",justifyContent: "space-between"}}>
+        <Grid size="grow" sx={{justifyContent: "flex-start"}}>
+          <h1>
+            {t ('statistics')}
+          </h1>
+	  </Grid>
+          <Grid size="auto">
+            <BasicSelect selectedAge={selectedAge} setSelectedAge={setSelectedAge}/>
+	  </Grid>
+	</Grid>
+      <Grid container spacing={2} sx={{alignItems: "center",justifyContent: "space-between"}}>
+        <Grid size="grow" sx={{justifyContent: "flex-start"}}>
+	  <h2>
+	    {selectedAge}
+	  </h2>
+	</Grid>
+      </Grid>
+    </Container>
+
+  );
 }