Order Management with Livewire

Example Livewire project for managing Orders, Products in Categories with quite complex tables and dynamic elements.

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:

Show or hide the password
Generate a random password
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

Want to get the access to GitHub repository?

Become a Premium Member for $129/year or $29/month