About

This application is a Fuel Tracking System designed for managing fuel records for a fleet of vehicles, specifically tailored for a fleet of up to 370 vehicles. The app allows users to input, view, and analyze fuel consumption data, providing a comprehensive dashboard for fleet management. To use the app, users can navigate through three main tabs: the Fuel Entry Form, Fuel Records Table, and Dashboard. In the Fuel Entry Form, users can input details such as vehicle plate number, model, driver name, fuel amount, fuel price, gas station, and any additional notes. The app validates the input data and calculates the total cost based on the fuel amount and price. Once the data is submitted, it is stored in the local storage for persistence. The Fuel Records Table displays all entered fuel records, allowing users to filter and sort the data based on various criteria, such as date and vehicle plate number. Users can also delete records if necessary. The Dashboard provides key statistics, including total records, total fuel consumed, total cost, average fuel per record, and insights into the top vehicles by fuel consumption. The application is built using React, leveraging hooks such as useState and useEffect for state management and side effects. The user interface is styled with CSS, ensuring a responsive design that adapts to different screen sizes. The app also utilizes local storage for data persistence, allowing users to retain their records even after refreshing the page. Key features of the app include: - A user-friendly form for entering fuel records. - A sortable and filterable table for viewing records. - A dashboard that summarizes key statistics and insights. - Data persistence using local storage. - Responsive design for accessibility on various devices. Overall, this Fuel Tracking System provides a robust solution for fleet managers to efficiently track and analyze fuel consumption across their vehicles.