Filament Laravel

This filament is something to be recon, got used to Voyager but this is the next level.

Filament Admin Panel

How to build a Laravel Admin Panel. Built with Laravel 9, Filament, Spatie’s Laravel-Permissions, Jetstream, Livewire, and Tailwind CSS. Project name will be...

YouTube

This playlist is pretty straight forward, understood every bit of it.

laravel new project --jet
# update env for database
composer require filament/filament
php artisan migrate

composer require spatie/laravel-permission
php artisan vendor:publish --provider="Spatie\\Permission\\PermissionServiceProvider"

php artisan make:migration add_is_admin_users

Schema::table('users', function(Blueprint $table) {
    $table->boolean('is_admin')->after('name')->default(0);
});

use Spatie\\Permission\\Traits\\HasRoles;

class User extends Authenticatable {
	use HasRoles;
	protected $fillable = [
        'is_admin',
    ];
}

php artisan make:seeder RolesAndPermissionSeeder

# get this to rolesAndPermissionSeeder
<https://gist.github.com/madindo/95e9c7bacd744d27a31760dd0cc31683>

php artisan make:filament-resource Permission --simple

protected static ?string $navigationGroup = 'Admin Management';

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Card::make()
                    ->schema([
                        TextInput::make('name')
                            ->unique(ignoreRecord: true)
                            ->required()
                    ])
            ]);
    }

public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('id')->sortable(),
                TextColumn::make('name')->sortable()->searchable(),
                TextColumn::make('created_at')
                    ->dateTime('d-M-Y')
                    ->sortable()
                    ->searchable()
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\\Actions\\EditAction::make(),
                Tables\\Actions\\DeleteAction::make(),
            ])
            ->bulkActions([
                Tables\\Actions\\DeleteBulkAction::make(),
            ]);
    }

protected function getRedirectUrl(): string
{
    return $this->getResource()::getUrl('index');
}

php artisan make:filament-relation-manager RoleResource permissions name

User Resource w/ soft delete

composer require doctrine/dbal --dev
php artisan make:filament-resource User --generate

// to make list of checkbox relationship
CheckboxList::make('roles')
  ->relationship('roles', 'name')
  ->columns(2)
  ->helperText('Only Choose One!')
  ->required()

// password changing
Forms\\Components\\TextInput::make('password')
    ->password()
    ->maxLength(255)
    ->dehydrateStateUsing(
        static fn(null|string $state):
            null|string => filled($state) ? Hash::make($state) : null,
    )->required(
        static fn(Page $livewire): 
            string => $livewire instanceOf CreateUser,
    )->dehydrated(
        static fn(null|string $state): 
            bool => filled($state),
    )->label(
        static fn(Page $livewire): 
            string => $livewire instanceOf EditUser ? 'New Password' : "Password"
    ),

Customizing user menu

php artisan make:provider FilamentServiceProvider

#add to config app.php
App\\Providers\\FilamentServiceProvider::class,

#boot()
Filament::serving(function() {
  if (!empty(auth()->user()) && auth()->user()->is_admin == 1 && auth()->user()->hasAnyRole('super-admin', 'admin', 'moderator')) {
      Filament::registerUserMenuItems([
          UserMenuItem::make()
              ->label('Manage Users')
              ->url(UserResource::getUrl())
              ->icon('heroicon-s-users'),
          UserMenuItem::make()
              ->label('Manage Roles')
              ->url(RoleResource::getUrl())
              ->icon('heroicon-s-cog'),
          UserMenuItem::make()
              ->label('Manage Permission')
              ->url(PermissionResource::getUrl())
              ->icon('heroicon-s-key')
      ]);
  }
});

// to hide menu sidebar UserResource.php
protected static bool $shouldRegisterNavigation = false;

Authorization with policies

# User.php add

implements FilamentUser

public function canAccessFilament(): bool
{
    return $this->is_admin;
}

php artisan make:policy PermissionPolicy --model=Permission

public function viewAny(User $user)
{
    return $user->hasAnyRole(['super-admin', 'admin', 'moderator']);
}

# app/Providers/AuthServiceProvider.php
use App\\Policies\\PermissionPolicy;
protected $policies = [
    \\Spatie\\Permission\\Models\\Permission::class => PermissionPolicy::class,
];

Dashboard

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

protected function getCards(): array
    {
        return [
            Card::make('Unique views', '192.1k'),
            Card::make('Bounce rate', '21%'),
            Card::make('Average time on page', '3:12'),
        ];
    }

php artisan make:filament-widget BlogPostsChart --chart

protected function getData(): array
    {
        $users = User::select('created_at')->get()->groupBy(function($users) {
            return Carbon::parse($users->created_at)->format('F');
        });
        $quantities = [];
        foreach ($users as $user => $value) {
            array_push($quantities, $value->count());
        }
        return [
            'datasets' => [
                [
                    'label' => 'Users Joined',
                    'data' => $quantities,
                    'backgroundColor' => [
                        'rgba(255,99,132,0.2',
                        'rgba(255,99,132,0.2',
                        'rgba(255,99,132,0.2',
                        'rgba(255,99,132,0.2',
                    ]
                ],
            ],
            'labels' => $users->keys(),
        ];
    }

Custom theme

npm install tippy.js --save-dev

#tailwind.config.js
const colors = require('tailwindcss/colors')
colors: { 
    danger: colors.rose,
    primary: colors.blue,
    success: colors.green,
    warning: colors.yellow,
},

#vite.config.js
'resources/css/filament.css',

#create new file in resources/css/filament.css
@import '../../vendor/filament/filament/resources/css/app.css';

# open filamentServiceProvider in serving function
Filament::registerViteTheme('resources/css/filament.css');

Plugins

Settings

GitHub - reworck/filament-settings: Easy setting management for filament

Easy setting management for filament. Contribute to reworck/filament-settings development by creating an account on GitHub.

GitHubreworck

composer require reworck/filament-settings

# appServiceProvider - add more in values in here
\Reworck\FilamentSettings\FilamentSettings::setFormFields([
    \Filament\Forms\Components\TextInput::make('title'),
    \Filament\Forms\Components\Textarea::make('description'),
]);

# in User.php add function below, create permission and add to user if have any
public function canManageSettings(): bool
{
    return $this->can('manage.settings');
}