Dashboard and UI fixes

[tuto1902]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @tuto1902, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the application's dashboard and fuel entry management by transforming them into dynamic Livewire components. It introduces a robust backend change to pre-calculate and store fuel efficiency, ensuring data accuracy and optimizing performance. The changes also unify the vehicle selection process across the application and include various UI improvements and dependency updates.

Highlights

• Dynamic Dashboard: The dashboard has been refactored into a Livewire component, enabling users to select a vehicle and view real-time statistics such as average/last efficiency, total distance, total cost, and cost per unit distance.
• Fuel Efficiency Pre-calculation: Fuel efficiency (MPG/KPL) is now calculated and stored directly in the fuel_entries table upon creation, improving data consistency and simplifying retrieval for display.
• Unified Vehicle Selection: Both the dashboard and fuel entries pages now utilize a consistent vehicle selection dropdown, with the selected vehicle ID persisted in the session for a smoother user experience.
• UI Navigation and Forms: The sidebar has been updated with direct links to 'Vehicles' and 'Fuel Entries' pages, and new 'Create' and 'Cancel' buttons have been added to relevant forms for improved user flow.
• Dependency Updates: Key Composer and NPM dependencies, including laravel/pint and prettier-plugin-tailwindcss, have been updated to their latest versions.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new dashboard and various UI improvements. I've identified a few critical issues that could lead to application errors, such as division-by-zero exceptions and undefined variables. I've also highlighted some areas for performance improvement and refactoring to enhance data integrity and code maintainability. Please review the detailed comments for specific suggestions.

[gemini-code-assist]

The $vehicle variable is not passed to the view. The view livewire.fuel-entries.blade.php uses this variable, which will cause an "Undefined variable" error.

        $vehicle = Vehicle::find($this->vehicleId);
        $this->fuelEntries = $vehicle ? $vehicle->fuelEntries()->latest()->get() : collect();

        return view('livewire.fuel-entries', ['vehicle' => $vehicle]);

[gemini-code-assist]

There is a risk of a division-by-zero error if $stat['total_distance'] is zero, which would crash the page. You should add a condition to handle this case, for example by not displaying this stat card or showing 'N/A'.

            @if($stat['total_distance'] > 0)
                size="xl">{{ Number::format($stat['total_cost'] / $stat['total_distance'], 2) }}</flux:heading>
            @endif

[gemini-code-assist]

The database query $vehicle->fuelEntries()->latest('odometer')->first() is executed multiple times within the if/else block. This query should be run only once and its result stored in a variable for reuse. This change will reduce database load and memory usage.

        if ($vehicle && $vehicle->fuelEntries()->exists()) {
            $latestFuelEntry = $vehicle->fuelEntries()->latest('odometer')->first();

            if (Auth::user()->distance_units == 'mi') {
                $this->stat['avg_efficiency'] = $vehicle->fuelEntries()->avg('mpg');
                $this->stat['last_efficiency'] = $latestFuelEntry?->mpg;
                $this->stat['total_distance'] = $latestFuelEntry?->odometer - $vehicle->initial_odometer;
            } else {
                $this->stat['avg_efficiency'] = $vehicle->fuelEntries()->avg('kpl');
                $this->stat['last_efficiency'] = $latestFuelEntry?->kpl;
                $this->stat['total_distance'] = Number::format(($latestFuelEntry?->odometer - $vehicle->initial_odometer) * 1.60934, 2);
            }
            $this->stat['total_cost'] = $vehicle->fuelEntries()->sum('total_cost');
        } else {
            $this->stat = [];
        }

[gemini-code-assist]

The booted method only implements a creating hook. This means that if a FuelEntry is updated (e.g., its odometer or fuel amount changes), the mpg and kpl values will not be recalculated, leading to stale and incorrect data. Using the saving hook will cover both creation and updates.

Additionally, the calculation logic has a risk of division by zero if fuel_amount is 0. This should be handled to prevent runtime errors.

    protected static function booted(): void
    {
        static::saving(function (FuelEntry $fuelEntry) {
            // Calculate fuel efficiency (mpg_kpl) using the odometer reading
            // form a previous entry or the inicial odometer reading of the
            // vehicle.
            // Formula
            // - (with previous entry): (current odometer - last odometer) / fuel amount
            // - (first entry): (current odometer - initial odometer) / fuel amount
            $differenceInKilometers = ($fuelEntry->odometer - $fuelEntry->latestOdometer) * 1.60934;
            $differenceInMiles = $fuelEntry->odometer - $fuelEntry->latestOdometer;
            $fuelAmounInLiters = $fuelEntry->fuel_amount * 3.78541;
            $fuelAmountInGallons = $fuelEntry->fuel_amount;

            if ($fuelAmountInGallons > 0) {
                $kilometersPerLiter = $differenceInKilometers / $fuelAmounInLiters;
                $milesPerGallon = $differenceInMiles / $fuelAmountInGallons;
            } else {
                $kilometersPerLiter = 0;
                $milesPerGallon = 0;
            }

            $fuelEntry->kpl = Number::format($kilometersPerLiter, 2);
            $fuelEntry->mpg = Number::format($milesPerGallon, 2);
        });
    }