Create and manage filament Dashboards using gridstack js

This package allows to add widgets and define the layout of the dashboard page on a per-user basic. This package uses Laravel model settings package to ensure persistence of data in the database.

Installation

You can install the package via composer:

composer require invaders-xx/filament-gridstack-dashboard

php artisan filament:assets

Note: Add plugin Blade files to your custom theme tailwind.config.js for dark mode.

To set up your own custom theme, you can visit the official instruction page on the Filament website.

Add the plugin's views to your tailwind.config.js file.

content: [
    '<path-to-vendor>/invaders-xx/filament-gridstack-dashboard/resources/**/*.blade.php',
]

Please visit Laravel model settings to configure your User model to use this package.

You can publish the config file with:

php artisan vendor:publish --tag="filament-gridstack-dashboard-config"

This is the contents of the published config file:

return [
];

There is no option at the moment.

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-gridstack-dashboard-views"

Usage

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GridstackDashboardPlugin::make()
        ])
}

you can configure the settings path (string in dotted format where to store in the settings) By default the path is 'dashboard.layout'

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GridstackDashboardPlugin::make()->settingsPath('dashboard.settings'),
        ])
}

Only select certain widgets to be displayed

Set the allowed_widgets config. Set this value to null if you want to show all widgets of the panel.

return [
    'allowed_widgets' => [
        RunningProjectsChart::class,
        BrutoMarginChart::class,
        ApprovedQuotes::class,
        FollowUpTableWidget::class,
        PaymentRemindersTableWidget::class
    ]
];

Set an empty state (when the user hasn't chosen any widgets)

Set the empty_state_widgets` config.

return [
    'empty_state_widgets' =>
    [
        [
            "widget" => RunningProjectsChart::class,
            "x" => 0,
            "y" => 0,
            "w" => 6,
        ],
        [
            "widget" => BrutoMarginChart::class,
            "x" => 6,
            "y" => 0,
            "w" => 6,
        ],

        [
            "widget" => ApprovedQuotes::class,
            "x" => 0,
            "y" => 1,
            "w" => 12,
        ],
        [
            "widget" => FollowUpTableWidget::class,
            "x" => 0,
            "y" => 2,
            "w" => 12,
        ],
        [
            "widget" => PaymentRemindersTableWidget::class,
            "x" => 0,
            "y" => 3,
            "w" => 12,
        ]
    ]
];

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

License

The MIT License (MIT). Please see License File for more information.

NWN-Software / filament-gridstack-dashboard