Widget filter on custom page

[ariesdg]

Package

Panel builder

Package Version

V3

How can we help you?

Hi,

I'd like to check how can i filter widget using HasFiltersAction in a custom page

This is my page

<?php

namespace App\Filament\App\Pages;

use App\Filament\App\Widgets\Analytics\AnalyticsSalesOverviewWidget;
use Filament\Pages\Page;
use Filament\Pages\Dashboard\Actions\FilterAction;
use Filament\Pages\Dashboard\Concerns\HasFiltersAction;
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Form;

class Analytics extends Page
{
    use HasFiltersAction;

    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.app.pages.analytics';

    protected function getHeaderActions(): array
    {
        return [
            FilterAction::make()
                ->form([
                    DatePicker::make('startDate'),
                    DatePicker::make('endDate'),
                ]),
        ];
    }

    protected function getHeaderWidgets(): array
    
    {
        return [
            AnalyticsSalesOverviewWidget::class,
        ];
    }
}

And the widget

<?php

namespace App\Filament\App\Widgets\Analytics;

use App\Enums\CurrencyEnum;
use App\Models\Order;
use Filament\Facades\Filament;
use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use Illuminate\Database\Eloquent\Builder;

class AnalyticsSalesOverviewWidget extends BaseWidget
{   
    use InteractsWithPageFilters;


    protected function getStats(): array
    {
        $startDate = $this->filters['startDate'] ?? now();
        $endDate = $this->filters['endDate'] ?? now();

        $orders = Order::when($startDate, fn (Builder $query) => $query->whereDate('created_at', '>=', $startDate))
            ->when($endDate, fn (Builder $query) => $query->whereDate('created_at', '<=', $endDate))
            ->count();

        return [
            Stat::make('Total Sale for this month',  CurrencyEnum::DEFAULT_SYMBOL->value.number_format($orders, 2))
                ->color('primary')
               
           
        ];
    }
}

[natalasa]

any solutions for this ?

[Fanom2813]

the stats disappear until refresh

[jkbroot]

This works well with me ;

page

<?php

namespace App\Filament\App\Pages;

use App\Filament\App\Widgets\FinancialOverviewWidget;
use App\Models\Branch;
use Carbon\Carbon;
use Filament\Facades\Filament;
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\Select;
use Filament\Pages\Dashboard\Actions\FilterAction;
use Filament\Pages\Dashboard\Concerns\HasFiltersForm;
use Filament\Pages\Page;

class FinancialReport extends Page
{
    use HasFiltersForm;
    public $branch_id;
    public $startDate;
    public $endDate;

    protected static ?string $navigationIcon = 'heroicon-o-chart-pie';

    protected static string $view = 'filament.app.pages.financial-report';

    protected function getHeaderActions(): array
    {
        return [
            FilterAction::make()
                ->form([
                    Select::make("branch_id")
                        ->prefixIcon("heroicon-o-bookmark-square")
                        ->label(__("Select Branch"))
                        ->options(Branch::all()->pluck('name', 'id'))
                        ->default($this->branch_id)
                        ->afterStateUpdated(function ($state) {
                            $this->branch_id = $state;
                            $this->updateWidgets();
                        })
                        ->hidden(function () {
                            $user = Filament::auth()->getUser();
                            $isOwner = Filament::getTenant()->owner_id == $user->id;
                            $hasAdminRole = $user->hasRole('admin');
                            return !$isOwner && !$hasAdminRole;
                        })
                        ->live()
                        ->preload()
                        ->allowHtml(),
                    DatePicker::make('startDate')
                        ->default(Carbon::now()->startOfMonth())
                        ->afterStateUpdated(function ($state) {
                            $this->startDate = $state;
                            $this->updateWidgets();
                        }),
                    DatePicker::make('endDate')
                        ->default(Carbon::now()->endOfMonth())
                        ->afterStateUpdated(function ($state) {
                            $this->endDate = $state;
                            $this->updateWidgets();
                        }),
                ]),
        ];
    }

    protected function updateWidgets()
    {
        $this->dispatch("filtersUpdated", [
            'branch_id' => $this->branch_id,
            'startDate' => $this->startDate,
            'endDate' => $this->endDate,
        ]);
    }

    protected function getFooterWidgets(): array
    {
        return [
            FinancialOverviewWidget::class,
        ];
    }
}

widget

<?php

namespace App\Filament\App\Widgets;

use App\Models\Expense;
use App\Models\Order;
use App\Models\OrderItem;
use App\Models\SalesStatistic;
use Carbon\Carbon;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class FinancialOverviewWidget extends BaseWidget
{
    use InteractsWithPageFilters;

    public $branch_id;
    public $startDate;
    public $endDate;

    protected $listeners = ["filtersUpdated" => "updateFilters"];

    public function updateFilters($filters)
    {
        $this->branch_id = $filters['branch_id'] ?? null;
        $this->startDate = $filters['startDate'] ?? Carbon::now()->startOfMonth();
        $this->endDate = $filters['endDate'] ?? Carbon::now()->endOfMonth();
    }

    protected function getStats(): array
    {
        $startDate = $this->startDate ?? Carbon::now()->startOfMonth();
        $endDate = $this->endDate ?? Carbon::now()->endOfMonth();

        $totalRevenue = Order::where('payment_status', 'paid')
            ->whereBetween('paid_at', [$startDate, $endDate])
            ->when($this->branch_id, function ($query) {
                $query->where('branch_id', $this->branch_id);
            })
            ->sum('total');

        $totalExpenses = Expense::whereBetween('expense_date', [$startDate, $endDate])
            ->when($this->branch_id, function ($query) {
                $query->where('branch_id', $this->branch_id);
            })
            ->sum('amount');

        $totalProfit = OrderItem::whereBetween('created_at', [$startDate, $endDate])
            ->when($this->branch_id, function ($query) {
                $query->whereHas('order', function ($orderQuery) {
                    $orderQuery->where('branch_id', $this->branch_id);
                });
            })
            ->get()
            ->sum(function ($orderItem) {
                return ($orderItem->price - $orderItem->cost) * $orderItem->quantity;
            });

        $totalSales = SalesStatistic::whereBetween('sale_date', [$startDate, $endDate])
            ->when($this->branch_id, function ($query) {
                $query->where('branch_id', $this->branch_id);
            })
            ->sum('quantity');

        return [
            Stat::make('Total Revenue', number_format($totalRevenue, 3) . ' OMR')
                ->description('Revenue for the selected period')
                ->descriptionIcon('heroicon-m-arrow-trending-up'),

            Stat::make('Net Profit', number_format($totalProfit, 3) . ' OMR')
                ->description('Net profit for the selected period')
                ->descriptionIcon('heroicon-m-arrow-trending-up'),

            Stat::make('Total Expenses', number_format($totalExpenses, 3) . ' OMR')
                ->description('Expenses for the selected period')
                ->descriptionIcon('heroicon-m-arrow-trending-down'),

            Stat::make('Total Sales', number_format($totalSales, 0))
                ->description('Total units sold in the selected period')
                ->descriptionIcon('heroicon-m-cube'),
        ];
    }
}

[Sparrowan]

This works well with me ;

page

<?php

namespace App\Filament\App\Pages;

use App\Filament\App\Widgets\FinancialOverviewWidget;
use App\Models\Branch;
use Carbon\Carbon;
use Filament\Facades\Filament;
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\Select;
use Filament\Pages\Dashboard\Actions\FilterAction;
use Filament\Pages\Dashboard\Concerns\HasFiltersForm;
use Filament\Pages\Page;

class FinancialReport extends Page
{
    use HasFiltersForm;
    public $branch_id;
    public $startDate;
    public $endDate;

    protected static ?string $navigationIcon = 'heroicon-o-chart-pie';

    protected static string $view = 'filament.app.pages.financial-report';

    protected function getHeaderActions(): array
    {
        return [
            FilterAction::make()
                ->form([
                    Select::make("branch_id")
                        ->prefixIcon("heroicon-o-bookmark-square")
                        ->label(__("Select Branch"))
                        ->options(Branch::all()->pluck('name', 'id'))
                        ->default($this->branch_id)
                        ->afterStateUpdated(function ($state) {
                            $this->branch_id = $state;
                            $this->updateWidgets();
                        })
                        ->hidden(function () {
                            $user = Filament::auth()->getUser();
                            $isOwner = Filament::getTenant()->owner_id == $user->id;
                            $hasAdminRole = $user->hasRole('admin');
                            return !$isOwner && !$hasAdminRole;
                        })
                        ->live()
                        ->preload()
                        ->allowHtml(),
                    DatePicker::make('startDate')
                        ->default(Carbon::now()->startOfMonth())
                        ->afterStateUpdated(function ($state) {
                            $this->startDate = $state;
                            $this->updateWidgets();
                        }),
                    DatePicker::make('endDate')
                        ->default(Carbon::now()->endOfMonth())
                        ->afterStateUpdated(function ($state) {
                            $this->endDate = $state;
                            $this->updateWidgets();
                        }),
                ]),
        ];
    }

    protected function updateWidgets()
    {
        $this->dispatch("filtersUpdated", [
            'branch_id' => $this->branch_id,
            'startDate' => $this->startDate,
            'endDate' => $this->endDate,
        ]);
    }

    protected function getFooterWidgets(): array
    {
        return [
            FinancialOverviewWidget::class,
        ];
    }
}

widget

<?php

namespace App\Filament\App\Widgets;

use App\Models\Expense;
use App\Models\Order;
use App\Models\OrderItem;
use App\Models\SalesStatistic;
use Carbon\Carbon;
use Filament\Widgets\Concerns\InteractsWithPageFilters;
use Filament\Widgets\StatsOverviewWidget as BaseWidget;
use Filament\Widgets\StatsOverviewWidget\Stat;

class FinancialOverviewWidget extends BaseWidget
{
    use InteractsWithPageFilters;

    public $branch_id;
    public $startDate;
    public $endDate;

    protected $listeners = ["filtersUpdated" => "updateFilters"];

    public function updateFilters($filters)
    {
        $this->branch_id = $filters['branch_id'] ?? null;
        $this->startDate = $filters['startDate'] ?? Carbon::now()->startOfMonth();
        $this->endDate = $filters['endDate'] ?? Carbon::now()->endOfMonth();
    }

    protected function getStats(): array
    {
        $startDate = $this->startDate ?? Carbon::now()->startOfMonth();
        $endDate = $this->endDate ?? Carbon::now()->endOfMonth();

        $totalRevenue = Order::where('payment_status', 'paid')
            ->whereBetween('paid_at', [$startDate, $endDate])
            ->when($this->branch_id, function ($query) {
                $query->where('branch_id', $this->branch_id);
            })
            ->sum('total');

        $totalExpenses = Expense::whereBetween('expense_date', [$startDate, $endDate])
            ->when($this->branch_id, function ($query) {
                $query->where('branch_id', $this->branch_id);
            })
            ->sum('amount');

        $totalProfit = OrderItem::whereBetween('created_at', [$startDate, $endDate])
            ->when($this->branch_id, function ($query) {
                $query->whereHas('order', function ($orderQuery) {
                    $orderQuery->where('branch_id', $this->branch_id);
                });
            })
            ->get()
            ->sum(function ($orderItem) {
                return ($orderItem->price - $orderItem->cost) * $orderItem->quantity;
            });

        $totalSales = SalesStatistic::whereBetween('sale_date', [$startDate, $endDate])
            ->when($this->branch_id, function ($query) {
                $query->where('branch_id', $this->branch_id);
            })
            ->sum('quantity');

        return [
            Stat::make('Total Revenue', number_format($totalRevenue, 3) . ' OMR')
                ->description('Revenue for the selected period')
                ->descriptionIcon('heroicon-m-arrow-trending-up'),

            Stat::make('Net Profit', number_format($totalProfit, 3) . ' OMR')
                ->description('Net profit for the selected period')
                ->descriptionIcon('heroicon-m-arrow-trending-up'),

            Stat::make('Total Expenses', number_format($totalExpenses, 3) . ' OMR')
                ->description('Expenses for the selected period')
                ->descriptionIcon('heroicon-m-arrow-trending-down'),

            Stat::make('Total Sales', number_format($totalSales, 0))
                ->description('Total units sold in the selected period')
                ->descriptionIcon('heroicon-m-cube'),
        ];
    }
}

@jkbroot Thanks. This worked perfectly.

[ingowinkt]

Yeah thanks @jkbroot!

My goal was to get the filterForms() widget for a custom page.
So I made a custom form using your logic.

I also added "live()" to the fields to trigger the onchange event, without the submit button.

And then i made a trait out of it:

<?php

namespace App\Filament\Clusters\Analytics\Concerns;


use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\Select;
use Filament\Forms\Form;
use Filament\Forms\Get;
use Livewire\Features\SupportEvents\HandlesEvents;

trait HasAnalyticsFilters
{
    use HandlesEvents;

    public $startDate;
    public $endDate;

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()
                    ->schema([
                        Select::make('segment')
                            ->boolean(),
                        DatePicker::make('startDate')
                            ->maxDate(fn (Get $get) => $get('endDate') ?: now())
                            ->live()
                            ->afterStateUpdated(function ($state) {
                                $this->startDate = $state;
                                $this->updateWidgets();
                            }),
                        DatePicker::make('endDate')
                            ->minDate(fn (Get $get) => $get('startDate') ?: now())
                            ->maxDate(now())
                            ->live()
                            ->afterStateUpdated(function ($state) {
                                $this->endDate = $state;
                                $this->updateWidgets();
                            }),
                    ])
                    ->columns(3),
            ]);
    }

    protected function updateWidgets()
    {
        $this->dispatch("filtersUpdated", [
            'startDate' => $this->startDate,
            'endDate' => $this->endDate,
        ]);
    }

}

and then just use it in any filament Page:

<?php

namespace App\Filament\Clusters\Analytics\Pages;

use App\Filament\Clusters\Analytics\Concerns\HasAnalyticsFilters;
use Filament\Pages\Page;

class Testpage extends Page
{
    use HasAnalyticsFilters;

   // ...
}

[Fanom2813]

Still fails on my side here is my code :

class BankLoanDashboard extends \Filament\Pages\Dashboard
{

    use HasFiltersForm;

    protected static ?string $navigationLabel = 'Bank Loan Dashboard';
    protected static ?string $navigationIcon = 'heroicon-o-chart-bar-square';
    protected static ?string $navigationGroup = 'Reports';
    protected static ?string $title = 'Bank Loan Dashboard';
    protected static string $routePath = 'bank-loan-dashboard';

    public $startDate;
    public $endDate;

    protected function getHeaderActions(): array
    {
        return [
            FilterAction::make()
                ->form([
                    DatePicker::make('startDate')
                        ->default(Carbon::now()->startOfMonth())
                        ->afterStateUpdated(function ($state) {
                            $this->startDate = $state;
                            $this->updateWidgets();
                        }),
                    DatePicker::make('endDate')
                        ->default(Carbon::now()->endOfMonth())
                        ->afterStateUpdated(function ($state) {
                            $this->endDate = $state;
                            $this->updateWidgets();
                        }),
                ]),
        ];
    }


    protected function updateWidgets()
    {
        $this->dispatch("filtersUpdated", [
            'startDate' => $this->startDate,
            'endDate' => $this->endDate,
        ]);
    }



}

class BankLoanReportOverview extends BaseWidget
{

    use InteractsWithPageFilters;

    public $startDate;
    public $endDate;

    protected $listeners = ["filtersUpdated" => "updateFilters"];

    public function updateFilters($filters)
    {
        $this->startDate = $filters['startDate'] ?? Carbon::now()->startOfMonth();
        $this->endDate = $filters['endDate'] ?? Carbon::now()->endOfMonth();
    }

    public static function canView(): bool
    {
        if (request()->routeIs('filament.admin.pages.bank-loan-dashboard')) {
            return true;
        }
        return false;
    }
    protected function getStats(): array
    {
        $startDate = $this->startDate ?? null;
        $endDate = $this->endDate ?? null;

        return [
            Stat::make('Total Loans', BankLoan::count())
                ->url(route('filament.admin.resources.bank-loans.index')),
        ];
    }
}

When i select the filter the stat widgets disappear randomly

after selecting the filter

[jkbroot]

class BankLoanDashboard extends \Filament\Pages\Dashboard

change this to

class BankLoanDashboard extends Page