<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Fuel Entry</title>
<!-- This line contains all the info Chrome needs to make the app installable. -->
<link rel="manifest" href="data:application/manifest+json;base64,ewogICJzaG9ydF9uYW1lIjogIkZ1ZWwgRW50cnkiLAogICJuYW1lIjogIkZ1ZWwgRGF0YSBFbnRyeSBBcHAiLAogICJpY29ucyI6IFsKICAgIHsKICAgICAgInNyYyI6ICJodHRwczovL3BsYWNlaG9sZC5jby8xOTJ4MTkyLzAyMDYxNy8wZWE1ZTk/dGV4dD1GRSIsCiAgICAgICJ0eXBlIjogImltYWdlL3BuZyIsCiAgICAgICJzaXplcyI6ICIxOTJ4MTkyIgogICAgfSwKICAgIHsKICAgICAgInNyYyI6ICJodHRwczovL3BsYWNlaG9sZC5jby81MTJ4NTEyLzAyMDYxNy8wZWE1ZTk/dGV4dD1GRSIsCiAgICAgICJ0eXBlIjogImltYWdlL3BuZyIsCiAgICAgICJzaXplcyI6ICI1MTJ4NTEyIgogICAgfQogIF0sCiAgInN0YXJ0X3VybCI6ICIuIiwKICAiZGlzcGxheSI6ICJzdGFuZGFsb25lIiwKICAidGhlbWVfY29sb3IiOiAiIzBlYTVlOSIsCiAgImJhY2tncm91bmRfY29sb3IiOiAiIzAyMDYxNyIKfQ==">
<meta name="theme-color" content="#0ea5e9">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; background-color: #020617; color: #e2e8f0; }
.form-label { color: #94a3b8; font-size: 0.875rem; margin-bottom: 0.5rem; display: block; }
.form-input {
background-color: #0f172a; border: 1px solid #334155; color: #e2e8f0;
border-radius: 0.5rem; padding: 0.75rem; width: 100%; font-size: 1rem;
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.form-input:focus { outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.3); }
.btn-primary { background: linear-gradient(90deg, #0ea5e9, #3b82f6); color: white; font-weight: 600; padding: 0.75rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: all 0.2s; display: block; width: 100%; font-size: 1rem; }
.entry-card { background-color: #1e293b; border: 1px solid #334155; border-radius: 0.5rem; padding: 0.75rem; margin-bottom: 0.5rem; }
</style>
</head>
<body class="p-4">
<div class="max-w-md mx-auto">
<h1 class="text-2xl font-bold text-center mb-6 text-white">Fuel Data Entry</h1>
<form id="fuelEntryForm" class="space-y-4 mb-8">
<div>
<label for="assetId" class="form-label">Asset ID</label>
<select id="assetId" class="form-input" required>
<option value="" disabled selected>Select an Asset</option>
<option value="GF0701">GF0701</option>
<option value="SO-UN-A181">SO-UN-A181</option>
<option value="SO-UN-A182">SO-UN-A182</option>
<option value="SO-UN-A204">SO-UN-A204</option>
</select>
</div>
<div><label for="date" class="form-label">Date</label><input type="date" id="date" class="form-input" required></div>
<div><label for="startKms" class="form-label">Start Kilometers</label><input type="number" id="startKms" class="form-input" required inputmode="numeric" placeholder="e.g., 2066"></div>
<div><label for="finishKms" class="form-label">Finish Kilometers</label><input type="number" id="finishKms" class="form-input" required inputmode="numeric" placeholder="e.g., 2599"></div>
<div><label for="litres" class="form-label">Litres Consumed</label><input type="number" id="litres" class="form-input" required inputmode="decimal" step="0.01" placeholder="e.g., 110"></div>
<div><label for="totalCost" class="form-label">Total Cost ($)</label><input type="number" id="totalCost" class="form-input" required inputmode="decimal" step="0.01" placeholder="e.g., 82.50"></div>
<button type="submit" class="btn-primary">Save Entry</button>
</form>
<div>
<h2 class="text-lg font-semibold mb-2">Recent Entries</h2>
<div id="recentEntries" class="space-y-2"><p class="text-slate-400 text-center">No entries yet.</p></div>
</div>
</div>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
import { getFirestore, collection, addDoc, onSnapshot, query, orderBy, limit } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";
import { getAuth, signInAnonymously } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js";
const firebaseConfig = JSON.parse(typeof __firebase_config__ !== 'undefined' ? __firebase_config__ : '{}');
if (!firebaseConfig.projectId) {
document.body.innerHTML = `<div class="text-red-500 text-center p-8"><strong>Error:</strong> Firebase configuration is missing or invalid. The application cannot connect to the database.</div>`;
} else {
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
signInAnonymously(auth).catch((error) => console.error("Anonymous sign-in failed:", error));
const fuelCollection = collection(db, 'fuel-entries');
const form = document.getElementById('fuelEntryForm');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const startKms = parseFloat(document.getElementById('startKms').value);
const finishKms = parseFloat(document.getElementById('finishKms').value);
const litres = parseFloat(document.getElementById('litres').value);
const distance = finishKms - startKms;
const kmPerLitre = litres > 0 ? distance / litres : 0;
const newEntry = {
assetId: document.getElementById('assetId').value, date: document.getElementById('date').value,
startKms, finishKms, distance, litres, totalCost: parseFloat(document.getElementById('totalCost').value),
kmPerLitre: parseFloat(kmPerLitre.toFixed(2)), createdAt: new Date()
};
try {
await addDoc(fuelCollection, newEntry);
form.reset();
const submitButton = e.target.querySelector('button[type="submit"]');
const originalText = submitButton.textContent;
submitButton.textContent = 'Saved!';
setTimeout(() => { submitButton.textContent = originalText; }, 2000);
} catch (error) { console.error("Error adding document: ", error); }
});
const q = query(fuelCollection, orderBy('createdAt', 'desc'), limit(5));
onSnapshot(q, (querySnapshot) => {
const recentEntriesContainer = document.getElementById('recentEntries');
recentEntriesContainer.innerHTML = '';
if (querySnapshot.empty) { recentEntriesContainer.innerHTML = '<p class="text-slate-400 text-center">No entries yet.</p>'; return; }
querySnapshot.forEach((doc) => {
const entry = doc.data();
const entryDiv = document.createElement('div');
entryDiv.className = 'entry-card';
entryDiv.innerHTML = `<div class="flex justify-between items-center text-sm"><strong class="text-cyan-400">${entry.assetId}</strong><span class="text-slate-400">${entry.date}</span></div><div class="text-xs text-slate-300 mt-1">${entry.distance} km | ${entry.litres} L | $${entry.totalCost}</div>`;
recentEntriesContainer.appendChild(entryDiv);
});
});
}
</script>
</body>
</html>