Added Statistics calculation

Statistics now show calculated values

src/GarageApp/index.css

@@ -191,6 +191,13 @@ code {
 .MuiGrid-root {
 	text-align: left;
 }
+.simple-select-label {
+	color: white;
+}
+.MuiSelect-root {
+	color: white; 
+}
+
 @media (prefers-reduced-motion) {
   *,
   ::before,

src/GarageApp/modules/StatisticsView.tsx

@@ -7,6 +7,8 @@ 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'
+import Paper from '@mui/material/Paper'
+import Time from 'react-time';
 
 const uid = "39e9009e-50e1-4277-bbf7-69e5e0f6c6dc"
 const expenses_response = await fetch(`/GarageApp/api/expenses/${uid}`);
@@ -14,25 +16,24 @@ 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 update = (event: SelectChangeEvent) => {
 
-  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"
+        <InputLabel id="simple-select-label">Age</InputLabel>
+	<Select
+          labelId="simple-select-label"
+          id="simple-select"
           value={selectedAge}
           label="Age"
-          onChange={handleChange}
+          onChange={update}
         >
           <MenuItem value={10}>This Week</MenuItem>
           <MenuItem value={20}>This Month</MenuItem>
@@ -47,12 +48,92 @@ function BasicSelect({ selectedAge,setSelectedAge }) {
 };
 
 
+
+function StatisticsCalc({ ageSelect,inputJSON,onChange }) {
+  const [calculator, setCalculator] = React.useState([]);
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // midnight today
+  const day = (today.getDay() + 6) % 7; // 0 = Monday, ... 6 = Sunday
+  const weekStart = new Date(today);
+  weekStart.setDate(today.getDate() - day);
+  const weekEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999);
+  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1, 23, 59, 59, 999);
+  const monthEnd = new Date(now.getFullYear(), now.getMonth(), 31, 23, 59, 59, 999);
+  const past30Days = new Date(now.getFullYear(), now.getMonth(), now.getDate()-30, 23, 59, 59, 999);
+  const past3Months = new Date(now.getFullYear(), now.getMonth()-3, now.getDate(), 23, 59, 59, 999);
+  const yearStart = new Date(now.getFullYear(), 1, 1, 23, 59, 59, 999);
+  
+  const thisWeek = inputJSON.filter(expense => {
+    const expenseDate = new Date(expense.date);
+    return expenseDate.getTime() >= weekStart.getTime() && expenseDate.getTime() <= weekEnd.getTime();
+  });
+
+  const thisMonth = inputJSON.filter(expense => {
+    const expenseDate = new Date(expense.date);
+    return expenseDate.getTime() >= monthStart.getTime() && expenseDate.getTime() <= monthEnd.getTime();
+  });
+  
+  const pastDays = inputJSON.filter(expense => {
+    const expenseDate = new Date(expense.date);
+    return expenseDate.getTime() >= past30Days.getTime() && expenseDate.getTime() <= today.getTime();
+  });
+  
+  const pastMonths = inputJSON.filter(expense => {
+    const expenseDate = new Date(expense.date);
+    return expenseDate.getTime() >= past3Months.getTime() && expenseDate.getTime() <= today.getTime();
+  });
+  
+  const thisYear = inputJSON.filter(expense => {
+    const expenseDate = new Date(expense.date);
+    return expenseDate.getTime() >= yearStart.getTime() && expenseDate.getTime() <= today.getTime();
+  });
+
+  React.useEffect(() => {
+
+    if (ageSelect === 10) {
+      setCalculator(thisWeek.map(expense => Number(expense.total_amount)));
+    }
+    else if (ageSelect === 20) {
+      setCalculator(thisMonth.map(expense => Number(expense.total_amount)));
+    }
+    else if (ageSelect === 30) {
+      setCalculator(pastDays.map(expense => Number(expense.total_amount)));
+    }
+    else if (ageSelect === 40) {
+      setCalculator(pastMonths.map(expense => Number(expense.total_amount)));
+    }
+    else if (ageSelect === 50) {
+      setCalculator(thisYear.map(expense => Number(expense.total_amount)));
+    }
+    else if (ageSelect === 60) {
+      setCalculator(inputJSON.map(expense => Number(expense.total_amount)));
+    }
+  
+  }, [ageSelect]);
+   const calcTotal = calculator.reduce((total, amount) => total + amount, 0);
+   onChange(calcTotal)
+
+  return (
+    <div>
+        <ul>
+	  <p>{calcTotal.toFixed(2)}</p>
+	</ul>
+    </div>
+  );
+}
+
+
+
 export default function StatisticsView() {
   const { t, i18n } = useTranslation();
   const [selectedAge, setSelectedAge] = React.useState('30');
-  
+  const [expenseTotal, setExpenseTotal] = React.useState(0);
+  const [fillupTotal, setFillupTotal] = React.useState(0);
+
   return (
-    <Container>
+  <Container>
+  <Box>	  
+    <Paper>
       <Grid container spacing={2} sx={{alignItems: "center",justifyContent: "space-between"}}>
         <Grid size="grow" sx={{justifyContent: "flex-start"}}>
           <h1>
@@ -65,12 +146,22 @@ export default function StatisticsView() {
 	</Grid>
       <Grid container spacing={2} sx={{alignItems: "center",justifyContent: "space-between"}}>
         <Grid size="grow" sx={{justifyContent: "flex-start"}}>
-	  <h2>
-	    {selectedAge}
-	  </h2>
+	  <h2>{t ('otherexpenses')}:</h2>
+	  <StatisticsCalc ageSelect={selectedAge} inputJSON={expenses} onChange={setExpenseTotal} />
+	</Grid>
+        <Grid size="grow" sx={{justifyContent: "flex-start"}}>
+	  <h2>{t ('fillupcost')}:</h2>
+	  <StatisticsCalc ageSelect={selectedAge} inputJSON={fillups} onChange={setFillupTotal}/>
+	</Grid>
+        <Grid size="grow" sx={{justifyContent: "flex-start"}}>
+	  <h2>{t ('totalexpenses')}:</h2>
+	  <ul>
+            <p>{(fillupTotal + expenseTotal).toFixed(2)}</p>
+	  </ul>
 	</Grid>
       </Grid>
-    </Container>
-
+    </Paper>
+  </Box>
+  </Container>
   );
 }

src/GarageApp/modules/YourVehicles.tsx

@@ -7,39 +7,32 @@ import { useTranslation, withTranslation, Trans } from 'react-i18next';
 
 const uid = "39e9009e-50e1-4277-bbf7-69e5e0f6c6dc"
 const response = await fetch(`/GarageApp/api/vehicles/${uid}`);
-  console.log(response)
 const vehicles = await response.json();
-  console.log(vehicles)
 export default function YourVehicleList() {
   const { t, i18n } = useTranslation();
-  // const response = await fetch("/GarageApp/api/vehicles");
-//  const vehicles = await response.json();
   return (
-  <Container>
-    <Grid container spacing={2} sx={{alignItems: "center",justifyContent: "space-between"}}>
-      <Grid size="grow" sx={{justifyContent: "flex-start"}}>
+    <Container>
+      <Grid container spacing={2} sx={{alignItems: "center",justifyContent: "space-between"}}>
+        <Grid size="grow" sx={{justifyContent: "flex-start"}}>
 	  <h1>{t ('yourvehicles')}</h1>
+        </Grid>
+        <Grid size="auto">
+      	  <Button variant="contained">to become Add Vehicle button</Button>
+        </Grid>
       </Grid>
-      <Grid size="auto">
-      	<Button variant="contained">to become Add Vehicle button</Button>
-      </Grid>
-
-
-      </Grid>
-     
-	<Grid container 
+      <Grid container 
 	spacing={{ xs: 1, md: 3 }}
 	columns={{ xs: 2, sm: 8, md: 12 }}
 	sx={{
-		justifyContent: "grow",
-		alignItems: "stretch"
+          justifyContent: "grow",
+          alignItems: "stretch"
 	}}>
-	{vehicles.map((vehicle, index) => (
-		<Grid key={index} size={{ xs: 2, sm: 4, md: 4 }} justifyContent="center" alignItems="center">
-			<VehicleCard nickname={vehicle.nickname} makemodel={vehicle.make + " " + vehicle.model} registration={vehicle.registration}/>
-		</Grid>
-	))}
-	</Grid>
-	</Container>
+	  {vehicles.map((vehicle, index) => (
+            <Grid key={index} size={{ xs: 2, sm: 4, md: 4 }} justifyContent="center" alignItems="center">
+              <VehicleCard nickname={vehicle.nickname} makemodel={vehicle.make + " " + vehicle.model} registration={vehicle.registration}/>
+            </Grid>
+          ))}
+      </Grid>
+    </Container>
  )
 }