Dashboard with Stats

In this lesson, we will add widgets to the dashboard to show the latest information.

bookings dashbaord

First, we will add the statistics for the last 7 days. One widget will show the number of newly added properties in the last 7 days, and another widget will show the number new users in the last 7 days.

Create the widget.

php artisan make:filament-widget LastSevenDaysStats --stats-overview

app/Filament/Widgets/LastSevenDaysStats.php:

use App\Models\User;
use App\Models\Property;
 
class LastSevenDaysStats extends BaseWidget
{
    protected function getCards(): array
    {
        return [
            Card::make('Last 7 days new properties', Property::where('created_at', '>', now()->subDays(7)->endOfDay())->count()),
            Card::make('Last 7 days new users', User::where('created_at', '>', now()->subDays(7)->endOfDay())->count())
        ];
    }
}

7days stats

Next, we will add a chart showing the total revenue in the last 30 days.

For getting data for the chart, we will use Filament recommended package flowframe/laravel-trend.

composer require flowframe/laravel-trend

Create the chart. For the chart type I will choose Line chart.

php artisan make:filament-widget TotalBookingsRevenue --chart

app/Filament/Widgets/TotalBookingsRevenue.php:

use App\Models\Booking;
use Flowframe\Trend\Trend;
use Flowframe\Trend\TrendValue;
use Filament\Widgets\LineChartWidget;
 
class TotalBoookingsRevenue extends LineChartWidget
{
    protected static ?string $heading = 'Total bookings revenue for the last 30 days';
 
    protected int | string | array $columnSpan = 'full';
 
    protected function getData(): array
    {
        $data = Trend::model(Booking::class)
            ->between(
                start: now()->subMonth()->endOfDay(),
                end: now(),
            )
            ->perDay()
            ->sum('total_price');
 
        return [
            'datasets' => [
                [
                    'label' => 'Revenue',
                    'data' => $data->map(fn (TrendValue $value) => $value->aggregate),
                ],
            ],
            'labels' => $data->map(fn (TrendValue $value) => $value->date),
        ];
    }
}

chart

So that's it for this simple admin panel for our Booking.com API. If you suggest more features or ask questions in the comments, we may likely continue this course with more lessons in the future!

All the code for these Filament features is in this Pull Request to the original Booking.com API repository, intentionally not merged.

Manage Bookings

Dashboard with Stats

Course Content

Lessons List

Filament Adminpanel for Booking.com API Project

Dashboard with Stats

Course Content

Lessons List