import { useState, useEffect } from "react";
import { Button, Input, Card, CardContent } from "@/components/ui"; // shadcn/ui
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function BookingCalendar() {
const [cars, setCars] = useState([]);
const [selectedCar, setSelectedCar] = useState("");
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
const [form, setForm] = useState({ firstName: "", lastName: "", phone: "", email: "" });
const [showPopup, setShowPopup] = useState(false);
useEffect(() => {
// Fetch car list from your website API or static JSON
fetch("/api/cars") // <-- you create this route
.then(res => res.json())
.then(data => setCars(data));
}, []);
const handleSubmit = async e => {
e.preventDefault();
if (!selectedCar || !startDate || !endDate) return alert("Please fill all fields");
const res = await fetch("/api/book", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
carId: selectedCar,
startDate,
endDate,
...form
})
});
if (res.ok) setShowPopup(true);
else alert("Dates unavailable or error occurred");
};
return (
{/* Confirmation popup */}
{showPopup && (
)}
);
}
// server.js
import express from "express";
import sqlite3 from "sqlite3";
import { open } from "sqlite";
import bodyParser from "body-parser";
const app = express();
app.use(bodyParser.json());
const db = await open({ filename: "notoriousdrive.db", driver: sqlite3.Database });
// Cars endpoint (you’d pull from your DB)
app.get("/api/cars", async (_, res) => {
const cars = await db.all("SELECT id, name FROM cars");
res.json(cars);
});
// Booking endpoint
app.post("/api/book", async (req, res) => {
const { carId, startDate, endDate, firstName, lastName, phone, email } = req.body;
// Check for conflicts
const conflict = await db.get(
`SELECT * FROM reservations
WHERE carId = ? AND
( (startDate <= ? AND endDate >= ?) OR
(startDate <= ? AND endDate >= ?) )`,
[carId, startDate, startDate, endDate, endDate]
);
if (conflict) return res.status(409).send("Dates already booked");
await db.run(
`INSERT INTO reservations (carId, startDate, endDate, firstName, lastName, phone, email)
VALUES (?,?,?,?,?,?,?)`,
[carId, startDate, endDate, firstName, lastName, phone, email]
);
res.sendStatus(200);
});
app.listen(3001, () => console.log("API running on http://localhost:3001"));
Reserve a Car
Reservation Received!
Notorious Drive will contact you within 24 hours.
