Changed stuff, added filter for statistics module

src/App (conflicted copy 2025-08-20 142151).tsx

@@ -1,29 +0,0 @@
-import { APITester } from "./APITester";
-import "./index.css";
-import { List } from "./wisher/list";
-
-import logo from "./logo.svg";
-import reactLogo from "./react.svg";
-
-import Button from '@mui/material/Button';
-import Grid from '@mui/material/Grid';
-import BtnGrid from './buttons';
-
-
-
-export function App() {
-  return (
-    <div className="app">
-      <div className="logo-container">
-        <img src={logo} alt="Bun Logo" className="logo bun-logo" />
-        <img src={reactLogo} alt="React Logo" className="logo react-logo" />
-      </div>
-
-      <h1>Bun + React</h1>
-      <h2>Testing Apps</h2>
-      <BtnGrid />
-    </div>
-  );
-}
-
-export default App;

src/App.tsx

@@ -6,6 +6,10 @@ import logo from "./logo.svg";
 import reactLogo from "./react.svg";
 
 import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import BtnGrid from './buttons';
+
+
 
 export function App() {
   return (
@@ -16,11 +20,8 @@ export function App() {
       </div>
 
       <h1>Bun + React</h1>
-      <p>
-        Edit <code>src/App.tsx</code> and save to test HMR
-      </p>
-      <APITester />
-      <List />
+      <h2>Testing Apps</h2>
+      <BtnGrid />
     </div>
   );
 }

src/GarageApp/modules/MenuBar.tsx

@@ -42,6 +42,7 @@ function GarageAppLogo() {
     </div>
   )
 }
+
 const pages = ['Home', 'Quick Entries', 'Import'];
 const settings = ['Profile', 'Admin', 'Logout'];
 function ResponsiveAppBar() {
@@ -106,25 +107,6 @@ function ResponsiveAppBar() {
               ))}
             </Menu>
           </Box>
-          <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
-          <Typography
-            variant="h5"
-            noWrap
-            component="a"
-            href="#app-bar-with-responsive-menu"
-            sx={{
-              mr: 2,
-              display: { xs: 'flex', md: 'none' },
-              flexGrow: 1,
-              fontFamily: 'monospace',
-              fontWeight: 700,
-              letterSpacing: '.3rem',
-              color: 'inherit',
-              textDecoration: 'none',
-            }}
-          >
-            LOGO
-          </Typography>
           <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
             {pages.map((page) => (
               <Button

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>
+
+  );
 }

src/GarageApp/modules/YourVehicles.tsx

@@ -5,11 +5,11 @@ import VehicleCard from "./VehicleCards";
 import Button from '@mui/material/Button';
 import { useTranslation, withTranslation, Trans } from 'react-i18next';
 
-
-const response = await fetch("/GarageApp/api/vehicles");
-//  console.log(response)
+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)
+  console.log(vehicles)
 export default function YourVehicleList() {
   const { t, i18n } = useTranslation();
   // const response = await fetch("/GarageApp/api/vehicles");

src/index.tsx

@@ -25,17 +25,33 @@ const server = serve({
 	const path = `src/GarageApp/locales/${lng}/translation.json`
 	return new Response(Bun.file(path))
     },
-    "/GarageApp/api/vehicles": async req => {
-	    const uid = "39e9009e-50e1-4277-bbf7-69e5e0f6c6dc"
+    "/GarageApp/api/vehicles/:uid": async req => {
+	    //const uid = "39e9009e-50e1-4277-bbf7-69e5e0f6c6dc"
+	    const uid = req.params.uid;
 	    const query = db.query(
 		    `SELECT * FROM vehicles WHERE id IN (SELECT vehicle_id FROM user_vehicles WHERE user_id='${uid}');`
 	    );
-//	    console.log(query.toString())
 	    const vehicles = query.all();
-//	    console.log(vehicles);
 	    return Response.json(vehicles)
     },
 
+    "/GarageApp/api/expenses/:uid": async req => {
+	    const uid = req.params.uid;
+	    const query = db.query(
+		    `SELECT * FROM expenses WHERE user_id='${uid}';`
+	    );
+	    const expenses = query.all();
+	    return Response.json(expenses)
+    },
+
+    "/GarageApp/api/fillups/:uid": async req => {
+	    const uid = req.params.uid;
+	    const query = db.query(
+		    `SELECT * FROM fillups WHERE user_id='${uid}';`
+	    );
+	    const fillups = query.all();
+	    return Response.json(fillups)
+    },
 
 
     "/api/hello": {