Enhance Fuel Management Dashboard
Budget: ₹1,500 – ₹12,500 INR
I already have a production-ready fuel management dashboard built with pure HTML5, CSS3, JavaScript, and Chart.js. It runs great in a dark industrial theme, is fully responsive, and currently shows real-time KPI cards (consumption, cost, efficiency, anomalies), 30-day consumption trends, a fuel-type split doughnut, monthly cost bars for FY 2025-26, a fleet-log table with status badges, station-wise progress bars, live alerts, and a live clock with a manual refresh button.
The next iteration is focused on one specific addition: bringing Fuel Purchase Locations into the interface. I’d like this new data point presented in a clean, sortable, searchable tabular view that blends seamlessly with the existing UI/UX. Columns will likely include location name, address, purchase date, quantity, cost, and any notes, but I’m open to your suggestions on the exact schema so long as it stays compact on mobile.
Scope of work
• Extend the current codebase (HTML, CSS, JS, Chart.js) to add a Fuel Purchase Locations KPI tile and a full-width table section.
• Style the table to match the dark theme, with zebra striping, hover states, and optional status badges if that helps usability.
• Keep everything responsive and lightweight—no new frameworks unless absolutely necessary.
• Provide clean, commented code and a short read-me so I can drop the new module straight into the existing repo and test locally.
Acceptance criteria
– Table renders without console errors in the latest Chrome, Edge, and Firefox.
– Sorting and basic filtering (at least on location and date) work client-side.
– Mobile breakpoint stacks columns gracefully or offers horizontal scroll.
– All new CSS variables follow the current naming convention.
If you have experience fusing new data widgets into custom dashboards and can keep the aesthetic consistent, I’d love to work with you.
The next iteration is focused on one specific addition: bringing Fuel Purchase Locations into the interface. I’d like this new data point presented in a clean, sortable, searchable tabular view that blends seamlessly with the existing UI/UX. Columns will likely include location name, address, purchase date, quantity, cost, and any notes, but I’m open to your suggestions on the exact schema so long as it stays compact on mobile.
Scope of work
• Extend the current codebase (HTML, CSS, JS, Chart.js) to add a Fuel Purchase Locations KPI tile and a full-width table section.
• Style the table to match the dark theme, with zebra striping, hover states, and optional status badges if that helps usability.
• Keep everything responsive and lightweight—no new frameworks unless absolutely necessary.
• Provide clean, commented code and a short read-me so I can drop the new module straight into the existing repo and test locally.
Acceptance criteria
– Table renders without console errors in the latest Chrome, Edge, and Firefox.
– Sorting and basic filtering (at least on location and date) work client-side.
– Mobile breakpoint stacks columns gracefully or offers horizontal scroll.
– All new CSS variables follow the current naming convention.
If you have experience fusing new data widgets into custom dashboards and can keep the aesthetic consistent, I’d love to work with you.