All Vehicles

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {vehicles.map((vehicle) => (\n \n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n

sortData(\"plateNumber\")}>Plate Number	sortData(\"company\")}>Company	sortData(\"transportType\")}>Transport Type	sortData(\"capacity\")}>Capacity	sortData(\"vehicleExpiry\")}>Vehicle Expiry	sortData(\"simfitExpiry\")}>SIMFIT Expiry	sortData(\"stnkExpiry\")}>STNK Expiry	sortData(\"taxExpiry\")}>Tax Expiry	sortData(\"keurExpiry\")}>KEUR Expiry	sortData(\"tumExpiry\")}>TUM Expiry
{vehicle.plateNumber}	{vehicle.company}	{vehicle.transportType}	{vehicle.capacity}	{formatDate(vehicle.vehicleExpiry)}	{formatDate(vehicle.simfitExpiry)}	{formatDate(vehicle.stnkExpiry)}	{formatDate(vehicle.taxExpiry)}	{formatDate(vehicle.keurExpiry)}	{formatDate(vehicle.tumExpiry)}

\n \n

\n );\n}\n\nfunction App() {\n const [selectedCompany, setSelectedCompany] = useState(null);\n const [showScanner, setShowScanner] = useState(false);\n const [vehicleData, setVehicleData] = useState(null);\n const [vehicles, setVehicles] = useState([]);\n const [showVehicleList, setShowVehicleList] = useState(false);\n const [showAddVehicleForm, setShowAddVehicleForm] = useState(false);\n const [showAllVehicles, setShowAllVehicles] = useState(false);\n const [scanError, setScanError] = useState(null);\n const scannerRef = useRef(null);\n\n useEffect(() => {\n if (selectedCompany) {\n fetchVehicles(selectedCompany);\n setShowVehicleList(true);\n }\n }, [selectedCompany]);\n\n useEffect(() => {\n if (showScanner) {\n const html5QrcodeScanner = new Html5QrcodeScanner(\n \"qr-reader\",\n { fps: 10, qrbox: { width: 250, height: 250 } },\n false,\n );\n html5QrcodeScanner.render(handleScanResult);\n scannerRef.current = html5QrcodeScanner;\n } else if (scannerRef.current) {\n scannerRef.current.clear();\n }\n }, [showScanner]);\n\n const fetchVehicles = async (company) => {\n const response = await fetch(`/api/vehicles?company=${company}`);\n const data = await response.json();\n setVehicles(data);\n };\n\n const fetchAllVehicles = async () => {\n const response = await fetch(\"/api/all-vehicles\");\n const data = await response.json();\n return data;\n };\n\n const handleCompanyClick = (company) => {\n setSelectedCompany(company);\n setShowScanner(false);\n setShowAddVehicleForm(false);\n setShowAllVehicles(false);\n };\n\n const handleScannerClick = () => {\n setShowScanner(true);\n setSelectedCompany(null);\n setShowVehicleList(false);\n setShowAddVehicleForm(false);\n setShowAllVehicles(false);\n setScanError(null);\n setVehicleData(null);\n };\n\n const handleScanResult = async (decodedText) => {\n try {\n const allVehicles = await fetchAllVehicles();\n const matchedVehicle = allVehicles.find(vehicle => vehicle.plateNumber === decodedText);\n\n if (matchedVehicle) {\n setVehicleData(matchedVehicle);\n setShowScanner(false);\n } else {\n setScanError(`No vehicle found with plate number: ${decodedText}`);\n }\n } catch (error) {\n console.error(\"Error fetching vehicle data:\", error);\n setScanError(\"Error fetching vehicle data. Please try again.\");\n }\n };\n\n const handleAddVehicleClick = () => {\n setShowAddVehicleForm(true);\n setShowVehicleList(false);\n };\n\n const handleVehicleAdded = () => {\n setShowAddVehicleForm(false);\n fetchVehicles(selectedCompany);\n setShowVehicleList(true);\n };\n\n const handleShowAllVehicles = () => {\n setShowAllVehicles(true);\n setSelectedCompany(null);\n setShowScanner(false);\n setShowVehicleList(false);\n setShowAddVehicleForm(false);\n };\n\n const formatDate = (dateString) => {\n const options = { year: \"numeric\", month: \"long\", day: \"numeric\" };\n return new Date(dateString).toLocaleDateString(\"id-ID\", options);\n };\n\n const calculateDaysRemaining = (dateString) => {\n const diff = new Date(dateString) - new Date();\n return Math.ceil(diff / (1000 * 60 * 60 * 24));\n };\n\n const getStatusColor = (dateString) => {\n const daysRemaining = calculateDaysRemaining(dateString);\n if (daysRemaining < 0) return \"danger\";\n if (daysRemaining < 30) return \"warning\";\n return \"success\";\n };\n\n return (\n

Vehicle Data Checker

\n {!showVehicleList && !showScanner && !showAddVehicleForm && !showAllVehicles && (\n

\n {companies.map((company) => (\n

\n handleCompanyClick(company.id)}\n >\n

{company.logo}

{company.name}

\n \n

\n ))}\n

\n \n

📷

Scan QR Code

\n \n

\n )}\n\n {showVehicleList && (\n

Vehicles for {companies.find(c => c.id === selectedCompany).name}

\n {vehicles.map((vehicle) => (\n setVehicleData(vehicle)}\n >\n {vehicle.plateNumber}\n \n ))}\n

\n \n \n

\n )}\n\n {showAddVehicleForm && (\n {\n setShowAddVehicleForm(false);\n setShowVehicleList(true);\n }}\n />\n )}\n\n {showScanner && (\n

\n {scanError &&

{scanError}

}\n \n

\n )}\n\n {showAllVehicles && setShowAllVehicles(false)} />}\n\n {vehicleData && (\n

Vehicle Data

\n \n

\n {vehicleData.plateNumber\n ? (\n

\n Plate Number: {vehicleData.plateNumber}\n

\n Company: {vehicleData.company}\n

\n Transport Type: {vehicleData.transportType}\n

\n Capacity: {vehicleData.capacity}\n

Expiry Dates:

\n {item.label}: {formatDate(vehicleData[item.key + \"Expiry\"])}\n \n {calculateDaysRemaining(vehicleData[item.key + \"Expiry\"])} days remaining\n \n \n ))}\n

\n )\n :

Vehicle not registered.

}\n

\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const SCHEMA_VERSION = 2;\n const KEY = \"cekdatatruck\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_vehicles_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n plateNumber TEXT NOT NULL,\n company TEXT NOT NULL,\n transportType TEXT NOT NULL,\n capacity TEXT NOT NULL,\n vehicleExpiry DATE NOT NULL,\n simfitExpiry DATE NOT NULL,\n stnkExpiry DATE NOT NULL,\n taxExpiry DATE NOT NULL,\n keurExpiry DATE NOT NULL,\n tumExpiry DATE NOT NULL\n )\n `);\n\n const url = new URL(request.url);\n const path = url.pathname;\n\n if (request.method === \"POST\" && path === \"/api/vehicle\") {\n const body = await request.json();\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_vehicles_${SCHEMA_VERSION}\n (plateNumber, company, transportType, capacity, vehicleExpiry, simfitExpiry, stnkExpiry, taxExpiry, keurExpiry, tumExpiry)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n `,\n [\n body.plateNumber,\n body.company,\n body.transportType,\n body.capacity,\n body.vehicleExpiry,\n body.simfitExpiry,\n body.stnkExpiry,\n body.taxExpiry,\n body.keurExpiry,\n body.tumExpiry,\n ],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (path === \"/api/vehicles\") {\n const company = url.searchParams.get(\"company\");\n const vehicles = await sqlite.execute(`SELECT * FROM ${KEY}_vehicles_${SCHEMA_VERSION} WHERE company = ?`, [\n company,\n ]);\n return new Response(JSON.stringify(vehicles.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (path === \"/api/all-vehicles\") {\n const vehicles = await sqlite.execute(`SELECT * FROM ${KEY}_vehicles_${SCHEMA_VERSION}`);\n return new Response(JSON.stringify(vehicles.rows), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (path.startsWith(\"/api/vehicle/\")) {\n const plateNumber = path.split(\"/\").pop();\n const vehicle = await sqlite.execute(`SELECT * FROM ${KEY}_vehicles_${SCHEMA_VERSION} WHERE plateNumber = ?`, [\n plateNumber,\n ]);\n return new Response(JSON.stringify(vehicle.rows[0] || { plateNumber: null }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n return new Response(\n `\n \n \n \n \n \n Vehicle Data Checker\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n background-color: #f8f9fa;\n}\n.modal {\n background-color: rgba(0, 0, 0, 0.5);\n}\n.table th {\n cursor: pointer;\n}\n.table th:hover {\n background-color: #e9ecef;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/nirwan/cekdatatruck/code/main.tsx","extension","actionData","errors"]

Add New Vehicle for {company}

All Vehicles

Vehicle Data Checker

Vehicles for {companies.find(c => c.id === selectedCompany).name}

Vehicle Data

Expiry Dates: