Order Management with Livewire

How to install

• Clone the repository with git clone
• Copy the .env.example file to .env and edit database credentials there
• Run composer install
• Run php artisan key:generate
• Run php artisan storage:link
• Run php artisan migrate --seed (it has some seeded data for your testing)
• Run npm ci and npm run build
• Launch the main URL /. Log in with any seeded user or register with a new user.
• That's it.

How It Works

This project uses Livewire. Livewire components are found in the default app/Livewire directory.

app/
└── Livewire/
    ├── CategoriesList.php
    ├── OrderForm.php
    ├── OrdersList.php
    ├── ProductForm.php
    ├── ProductsList.php
    ├── RegisterPassword.php
    └── TotalRevenueChart.php

In the registration page, instead of password inputs, the Livewire RegisterPasswords component is added to:

1. Show or hide the password
2. Generate a random password
3. Show password strength

In the dashboard, we show a TotalRevenueChart Livewire component, which shows the revenue from the last seven days' orders. The Livewire polling feature auto-updates the chart every minute.

When polling occurs, it calls the updateChartData() method. In this method, an event is fired with the new chart data.

app/Livewire/TotalRevenueChart.php:

use App\Models\Order;
use Livewire\Component;
use Illuminate\Contracts\View\View;
 
class TotalRevenueChart extends Component
{
    public function render(): View
    {
        return view('livewire.total-revenue-chart');
    }
 
    public function updateChartData(): void 
    {
        $this->dispatch('updateChartData', data: $this->getData())->self();
    }
 
    protected function getData(): array
    {
        $data = Order::query()
            ->select('order_date', \DB::raw('sum(total) as total'))
            ->where('order_date', '>=', now()->subDays(7))
            ->groupBy('order_date')
            ->get();
 
        return [
            'datasets' => [
                [
                    'label' => 'Total revenue from last 7 days',
                    'data'  => $data->map(fn (Order $order) => $order->total / 100),
                ],
            ],
            'labels'   => $data->map(fn (Order $order) => $order->order_date->format('d/m/Y')),
        ];
    }
}

Next, we will build:

• Orders CRUD
• Products CRUD
• Categories CRUD
• And Widget for our Dashboard page