/** @jsxImportSource https://esm.sh/react */ import { Html5QrcodeScanner } from "https://esm.sh/html5-qrcode"; import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const companies = [ { id: "KLA", name: "Kartika Luwuk Abadi", logo: "🏢" }, { id: "LS", name: "Laut Sulindah", logo: "🌊" }, { id: "SPM", name: "Setia Petro Mandiri", logo: "⛽" }, { id: "EP", name: "Elnusa Petrofin", logo: "🛢️" }, { id: "PPN", name: "Pertamina Patra Niaga", logo: "🏭" }, { id: "SPML", name: "Sinar Pagi Mandiri", logo: "☀️" }, { id: "ABP", name: "Adiguna Bumi Petrol", logo: "🚛" }, ]; const transportTypes = ["Industri", "SPBU", "Kero"]; function AddVehicleForm({ company, onVehicleAdded, onCancel }) { const [formData, setFormData] = useState({ plateNumber: "", transportType: "", capacity: "", vehicleExpiry: "", simfitExpiry: "", stnkExpiry: "", taxExpiry: "", keurExpiry: "", tumExpiry: "", }); const handleChange = (e) => { const { name, value } = e.target; setFormData(prevData => ({ ...prevData, [name]: value })); }; const handleSubmit = async (e) => { e.preventDefault(); try { const response = await fetch("/api/vehicle", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...formData, company }), }); if (response.ok) { onVehicleAdded(); } else { console.error("Failed to add vehicle"); } } catch (error) { console.error("Error adding vehicle:", error); } }; return ( ); } function AllVehiclesTable({ onClose }) { const [vehicles, setVehicles] = useState([]); const [sortConfig, setSortConfig] = useState({ key: null, direction: "ascending" }); useEffect(() => { fetchAllVehicles(); }, []); const fetchAllVehicles = async () => { const response = await fetch("/api/all-vehicles"); const data = await response.json(); setVehicles(data); }; const formatDate = (dateString) => { const options = { year: "numeric", month: "long", day: "numeric" }; return new Date(dateString).toLocaleDateString("id-ID", options); }; const calculateDaysRemaining = (dateString) => { const diff = new Date(dateString) - new Date(); return Math.ceil(diff / (1000 * 60 * 60 * 24)); }; const getStatusColor = (dateString) => { const daysRemaining = calculateDaysRemaining(dateString); if (daysRemaining < 0) return "table-danger"; if (daysRemaining < 30) return "table-warning"; return "table-success"; }; const sortData = (key) => { let direction = "ascending"; if (sortConfig.key === key && sortConfig.direction === "ascending") { direction = "descending"; } setSortConfig({ key, direction }); setVehicles(vehicles.sort((a, b) => { if (a[key] < b[key]) return direction === "ascending" ? -1 : 1; if (a[key] > b[key]) return direction === "ascending" ? 1 : -1; return 0; })); }; return (

All Vehicles

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

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

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

Vehicle Data Checker

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

{companies.map((company) => (

))}

)} {showVehicleList && (

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

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

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

{scanError &&

{scanError}

}

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

Vehicle Data

{vehicleData.plateNumber ? (

Plate Number: {vehicleData.plateNumber}

Company: {vehicleData.company}

Transport Type: {vehicleData.transportType}

Capacity: {vehicleData.capacity}

Expiry Dates:

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

) :

Vehicle not registered.

}

)}

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

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { background-color: #f8f9fa; } .modal { background-color: rgba(0, 0, 0, 0.5); } .table th { cursor: pointer; } .table th:hover { background-color: #e9ecef; } `;

Add New Vehicle for {company}

All Vehicles

Vehicle Data Checker

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

Vehicle Data

Expiry Dates:

cekdatatruck

Version 16