Never confuse your tabs with different Filament environments again.

composer require pxlrbt/filament-environment-indicator

To use this plugin register it in your panel configuration:

use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;

$panel
    ->plugins([
        EnvironmentIndicatorPlugin::make(),
    ]);

Out of the box, this plugin adds a colored border to the top of the admin panel and a badge next to the search bar.

You can customize any behaviour via the plugin object.

Use php artisan vendor:publish --tag="filament-environment-indicator-views" to publish the view to the resources/views/vendor/filament-environment-indicator folder. After this you can customize it as you wish!

By default, the package checks whether you have Spatie permissions plugin installed and checks for a role called super_admin. You can further customize whether the indicators should be shown.

use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;

$panel->plugins([
    EnvironmentIndicatorPlugin::make()
        ->visible(fn () => auth()->user()?->can('see_indicator'))
]);

You can overwrite the default colors if you want your own colors or need to add more. The ->color()method accepts any Filament's Color object or a closure that returns a color object.

use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;
use Filament\Support\Colors\Color;

$panel->plugins([
    EnvironmentIndicatorPlugin::make()
        ->color(fn () => match (app()->environment()) {
            'production' => null,
            'staging' => Color::Orange,
            default => Color::Blue,
        })
]);

By default, both indicators are displayed. You can turn them off separately.

use pxlrbt\FilamentEnvironmentIndicator\EnvironmentIndicatorPlugin;
use Filament\Support\Colors\Color;

$panel->plugins([
    EnvironmentIndicatorPlugin::make()
        ->showBadge(false)
        ->showBorder(true)            
]);

If you want to contribute to this packages, you may want to test it in a real Filament project:

• Fork this repository to your GitHub account.
• Create a Filament app locally.
• Clone your fork in your Filament app's root directory.
• In the /filament-environment-indicator directory, create a branch for your fix, e.g. fix/error-message.

Install the packages in your app's composer.json:

"require": {
    "pxlrbt/filament-environment-indicator": "dev-fix/error-message as main-dev",
},
"repositories": [
    {
        "type": "path",
        "url": "filament-environment-indicator"
    }
]

Now, run composer update.

• Dennis Koch
• All Contributors