Car Inventory

/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { init, tx, id } from "https://esm.sh/@instantdb/core@0.12.12"; const APP_ID = "5518c0f9-481c-4aa8-85cd-eee42bd45319"; function CarWindow({ car, onSave, onClose, title }) { const [make, setMake] = useState(car?.make || ""); const [model, setModel] = useState(car?.model || ""); const [year, setYear] = useState(car?.year || ""); const [imageUrl, setImageUrl] = useState(car?.imageUrl || ""); const [lastOilChange, setLastOilChange] = useState(car?.lastOilChange || ""); const [insuranceExpiry, setInsuranceExpiry] = useState(car?.insuranceExpiry || ""); const [inspectionExpiry, setInspectionExpiry] = useState(car?.inspectionExpiry || ""); const handleSubmit = (e) => { e.preventDefault(); onSave({ id: car?.id, make, model, year: parseInt(year), imageUrl, lastOilChange, insuranceExpiry, inspectionExpiry }); }; return (

{title}

Make setMake(e.target.value)} required />

Model setModel(e.target.value)} required />

Year setYear(e.target.value)} required />

Image URL setImageUrl(e.target.value)} />

Last Oil Change setLastOilChange(e.target.value)} />

Insurance Expiry setInsuranceExpiry(e.target.value)} />

Inspection Expiry setInspectionExpiry(e.target.value)} />

); } function App() { const [cars, setCars] = useState([]); const [error, setError] = useState(null); const [db, setDb] = useState(null); const [editingCar, setEditingCar] = useState(null); const [addingCar, setAddingCar] = useState(false); const [activeTab, setActiveTab] = useState('cars'); useEffect(() => { console.log("App component mounted"); const initDb = async () => { try { const database = await init({ appId: APP_ID }); setDb(database); console.log("InstantDB initialized successfully"); } catch (err) { console.error("Error initializing InstantDB:", err); setError(`Failed to initialize database: ${err.message}`); } }; initDb(); }, []); useEffect(() => { if (db) { db.subscribeQuery({ cars: {} }, (resp) => { if (resp.error) { setError(`Error fetching cars: ${resp.error.message}`); return; } if (resp.data) { console.log("Fetched cars:", resp.data.cars); setCars(resp.data.cars || []); } }); } }, [db]); const addCar = async (carData) => { if (db) { try { await db.transact( tx.cars[id()].update({ ...carData, createdAt: Date.now(), }) ); console.log("Car added successfully"); setAddingCar(false); } catch (err) { console.error("Error adding car:", err); setError(`Failed to add car: ${err.message}`); } } else { setError("Database not initialized. Please refresh the page."); } }; const updateCar = async (carData) => { if (db) { try { await db.transact(tx.cars[carData.id].update(carData)); console.log("Car updated successfully"); setEditingCar(null); } catch (err) { console.error("Error updating car:", err); setError(`Failed to update car: ${err.message}`); } } }; const deleteCar = async (carId) => { if (db) { try { await db.transact(tx.cars[carId].delete()); console.log("Car deleted successfully"); } catch (err) { console.error("Error deleting car:", err); setError(`Failed to delete car: ${err.message}`); } } }; const getActions = () => { const now = new Date(); const actions = []; cars.forEach(car => { if (car.lastOilChange) { const lastOilChangeDate = new Date(car.lastOilChange); const daysSinceOilChange = Math.floor((now - lastOilChangeDate) / (1000 * 60 * 60 * 24)); if (daysSinceOilChange >= 365) { const daysOverdue = daysSinceOilChange - 365; actions.push({ car: `${car.year} ${car.make} ${car.model}`, action: 'Oil Change', dueDate: new Date(lastOilChangeDate.getTime() + 365 * 24 * 60 * 60 * 1000), daysLeft: -daysOverdue, type: 'oil' }); } } if (car.insuranceExpiry) { const insuranceExpiryDate = new Date(car.insuranceExpiry); const daysUntilExpiry = Math.floor((insuranceExpiryDate - now) / (1000 * 60 * 60 * 24)); if (daysUntilExpiry <= 60) { actions.push({ car: `${car.year} ${car.make} ${car.model}`, action: 'Insurance Renewal', dueDate: insuranceExpiryDate, daysLeft: daysUntilExpiry, type: 'insurance' }); } } if (car.inspectionExpiry) { const inspectionExpiryDate = new Date(car.inspectionExpiry); const daysUntilExpiry = Math.floor((inspectionExpiryDate - now) / (1000 * 60 * 60 * 24)); if (daysUntilExpiry <= 60) { actions.push({ car: `${car.year} ${car.make} ${car.model}`, action: 'Inspection Renewal', dueDate: inspectionExpiryDate, daysLeft: daysUntilExpiry, type: 'inspection' }); } } }); return actions.sort((a, b) => a.daysLeft - b.daysLeft); }; const renderActionTable = (actions, title, maxDays) => ( <>

{title}

{actions.filter(action => action.daysLeft <= maxDays).map((action, index) => ( ))}

Car	Action	Due Date	Days Left
{action.car}	{action.action}	{action.dueDate.toLocaleDateString()}	{action.daysLeft}

); console.log("Rendering App component"); return (

Car Inventory

{error &&

{error}

}

{activeTab === 'cars' && ( <>

{cars.map((car) => ( ))}

Image	Year	Make	Model	Actions
{car.imageUrl && ( )}	{car.year}	{car.make}	{car.model}

)} {activeTab === 'actions' && ( <> {renderActionTable(getActions(), "Actions Due in 30 Days", 30)} {renderActionTable(getActions(), "Actions Due in 60 Days", 60)} )}

View Source

{editingCar && ( setEditingCar(null)} title="Edit Car" /> )} {addingCar && ( setAddingCar(false)} title="Add Car" /> )}

); } function client() { console.log("Client function called"); const root = document.getElementById("root"); if (root) { console.log("Root element found, rendering App"); createRoot(root).render(); } else { console.error("Root element not found"); } } if (typeof document !== "undefined") { console.log("Document is defined, calling client function"); client(); } else { console.log("Document is undefined, skipping client-side rendering"); } async function server(request: Request): Promise { console.log("Server function called"); return new Response( ` Car Inventory

`, { headers: { "content-type": "text/html", }, } ); } export default server;

carInventory