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...

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.
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');
}