worked on GarageApp stuff

src/GarageApp/modules/SqliteImport.tsx

@@ -0,0 +1,19 @@
+import { Database } from "bun:sqlite";
+import db from "./hammond.db" with { "type": "sqlite" };
+
+
+const vehicles = db.query(`SELECT * FROM vehicles WHERE id IN (SELECT vehicle_id FROM user_vehicles WHERE user_id='39e9009e-50e1-4277-bbf7-69e5e0f6c6dc');`).all();
+
+
+export default vehicles
+
+
+
+//const db = new Database("../hammond.db", { create: true});
+
+
+//const query = db.query(`SELECT * FROM vehicles WHERE id IN (SELECT vehicle_id FROM user_vehicles WHERE user_id='39e9009e-50e1-4277-bbf7-69e5e0f6c6dc');`);
+
+//const vehicles = db.all();
+
+

src/GarageApp/modules/VehicleCards.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardMedia from '@mui/material/CardMedia';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import Collapse from '@mui/material/Collapse';
+import Avatar from '@mui/material/Avatar';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { red } from '@mui/material/colors';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import ShareIcon from '@mui/icons-material/Share';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+
+interface ExpandMoreProps extends IconButtonProps {
+  expand: boolean;
+}
+
+
+const ExpandMore = styled((props: ExpandMoreProps) => {
+  const { expand, ...other } = props;
+  return <IconButton {...other} />;
+})(({ theme }) => ({
+  marginLeft: 'auto',
+  transition: theme.transitions.create('transform', {
+    duration: theme.transitions.duration.shortest,
+  }),
+  variants: [
+    {
+      props: ({ expand }) => !expand,
+      style: {
+        transform: 'rotate(0deg)',
+      },
+    },
+    {
+      props: ({ expand }) => !!expand,
+      style: {
+        transform: 'rotate(180deg)',
+      },
+    },
+  ],
+}));
+
+export default function VehicleCard({ nickname, makemodel, registration}) {
+  const [expanded, setExpanded] = React.useState(false);
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <Card sx={{ }}>
+      <CardHeader
+        action={
+          <IconButton aria-label="settings">
+            <MoreVertIcon />
+          </IconButton>
+        }
+        title={`${nickname} - ${registration}`}
+        subheader={makemodel}
+      />
+      <CardMedia
+        component="img"
+        height="150"
+        image="https://www.topgear.com/sites/default/files/2023/02/topgear_-_alfa_giulia_gta-m026.jpg"
+        alt=""
+      />
+      <CardActions disableSpacing>
+        <IconButton aria-label="add to favorites">
+          <FavoriteIcon />
+        </IconButton>
+        <IconButton aria-label="share">
+          <ShareIcon />
+        </IconButton>
+        <ExpandMore
+          expand={expanded}
+          onClick={handleExpandClick}
+          aria-expanded={expanded}
+          aria-label="show more"
+        >
+          <ExpandMoreIcon />
+        </ExpandMore>
+      </CardActions>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>
+          <Typography>
+            Expanded area…
+          </Typography>
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+}
+

src/GarageApp/modules/YourVehicles.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+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 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"}}>
+	  <h1>{t ('yourvehicles')}</h1>
+      </Grid>
+      <Grid size="auto">
+      	<Button variant="contained">to become Add Vehicle button</Button>
+      </Grid>
+
+
+      </Grid>
+     
+	<Grid container 
+	spacing={{ xs: 1, md: 3 }}
+	columns={{ xs: 2, sm: 8, md: 12 }}
+	sx={{
+		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>
+ )
+}