How to Setup Admin Dashboard Using Laravel and Filament

In this guide, we embark on developing an admin dashboard using Filament. Follow along until the end to get the skills needed to create an admin dashboard and change the styling to the individual’s preference.

We will use the below technologies:

• Laravel 10
• Filament

Laravel

Laravel is a PHP web framework for building fluid and responsive web applications. Laravel has an elegant syntax that guarantees code quality when building with Laravel. Laravel makes building feature-rich web applications without worrying about the low-level complexities of development.

Laravel has diverse features designed to improve the developer’s experience. Some features that enhance speed include comprehensive dependency injection, an expressive database abstraction layer, support for queues and scheduled jobs, robust unit and integration testing capabilities, and much more. Therefore, building with Laravel is efficient.

Filament

Filament is a Laravel package that provides different components to enhance building with Laravel. Filament is packed with components to make your website more appealing. Some components include a panel builder to build a Laravel admin panel, a form builder to create outstanding Livewire-powered forms, and many more. This tutorial sets up and configures an admin dashboard using Filament.

Guide to Setup Laravel and Filament

Prerequisite:

Before diving into Laravel setup, it is essential to have a solid understanding of the following technologies:

• PHP 8.2 or above
• Nginx
• Composer

Step 1: Setting Up Laravel

Open your terminal and run the following command to create a new Laravel project:

composer create-project --prefer-dist laravel/laravel my-laravel-app

Output:

In your terminal, enter into your project directory:

cd my-laravel-app

Step 2: Install Filament

Once Laravel is set up install Filament via Composer.

composer require filament/filament

Step 3: Publish Filament Assets:

Publish the Filament assets to your project.

php artisan filament:install --panels

Step 4: Configuration

Filament provides a configuration file to change the admin panel to fit an individual’s specifications. Publish the configuration file to be able to make the needed changes using this command:

php artisan vendor:publish --tag=filament-config

Customize Configuration

Open filament.php file in the config/filament.php directory. Here, you can change the application name, logo, navigation links, and authentication options to suite your projects specifications.

Create a user

Create a new user through running the following command in your terminal.

php artisan make:filament-user

php artisan serve

Dashboard

Input login credentials to log in to the dashboard, and the following page will load:

Building an admin dashboard using Filament makes it simple and fast. You can build a functional admin panel efficiently with a user-friendly interface and powerful features. Thus, this comprehensive tutorial gives you the skillset to create an admin dashboard and customize it to your needs using Filament. Go on, and practice more!

• Live Demo: https://laravel-filament-admin.avdemosites.com/admin/login
• Email: admin@avyatech.com
• Password: 123456789
• Fork this project on GitHub: https://github.com/AvyaTechnologyPrivateLimited/laravel-filament-admin-dashboard

CRUD: Create Retrieve Update Delete

For learning purpose we will create CRUD operation for below modules

• Customer
• Order

1. Customer

Create Filament Resource. Run the following command in your terminal to create customer resource

php artisan make:filament-resource CustomerResource
php artisan make:model Customer -m

Output: The above command will create the following files

Customer Resources

app/Filament/Resources/CustomerResource.php
app/Filament/Resources/CustomerResource/Pages/CreateCustomer.php
app/Filament/Resources/CustomerResource/Pages/EditCustomer.php
app/Filament/Resources/CustomerResource/Pages/ListCustomer.php

Model

app/Models/Customer.php

Migration

database/migrations/[ timestamp ]_create_customers_table.php

Make the following changes to the Customer.php it is located inside the directory app/Filament/Resources/CustomerResource.php

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\CustomerResource\Pages;
use App\Filament\Resources\CustomerResource\RelationManagers;
use App\Models\Customer;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

use Filament\Tables\Columns\TextColumn;

class CustomerResource extends Resource
{
    protected static ?string $model = Customer::class;

    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                //
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('name'),
                TextColumn::make('email'),
                TextColumn::make('created_at'),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListCustomers::route('/'),
            'create' => Pages\CreateCustomer::route('/create'),
            'edit' => Pages\EditCustomer::route('/{record}/edit'),
        ];
    }
}

Update the CreateCustomer.php file as shown below. It is located in the folder app/Filament/Resources/CustomerResource/Pages/CreateCustomer.php

<?php

namespace App\Filament\Resources\CustomerResource\Pages;

use App\Filament\Resources\CustomerResource;
use Filament\Actions;
use Filament\Resources\Pages\CreateRecord;

use Filament\Forms\Components\TextInput;
use Filament\Forms\Form;
use App\Models\Customer;

class CreateCustomer extends CreateRecord
{
    protected static string $resource = CustomerResource::class;

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name')->required(),
                TextInput::make('email')->required()->unique(),
                TextInput::make('password')->required()
            ]);
    }
}

Update the EditCustomer.php file as shown below. It is inside the directory app/Filament/Resources/CustomerResource/Pages/EditCustomer.php

<?php

namespace App\Filament\Resources\CustomerResource\Pages;

use App\Filament\Resources\CustomerResource;
use Filament\Actions;
use Filament\Resources\Pages\EditRecord;

use Filament\Forms\Components\TextInput;
use Filament\Forms\Form;
use App\Models\Customer;

class EditCustomer extends EditRecord
{
    protected static string $resource = CustomerResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\DeleteAction::make(),
        ];
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name')->required(),
                TextInput::make('email')->required()->unique(),
            ]);
    }
}

Make changes to the Customer.php file as shown below. The file is located inside the app/Models/Customer.php.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Hash;

class Customer extends Model
{
    use HasFactory;

    protected $guarded = ['id'];

    protected $hidden = [
        'password',
    ];

    public function setPasswordAttribute($value)
    {
        $this->attributes['password'] = Hash::make($value);
    }

    public function orders()
    {
        return $this->belongsTo(Order::class);
    }

}

Update the 2024_02_22_163247_customers.php file as shown below for migrations. It is located inside the directory database/migrations/2024_02_22_163247_customers.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('customers', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('customers');
    }
};

After update, run the command shown below to migrate the changes to the database (db)

php artisan migrate

All the above steps have aided us in successfully creating a Customer module.

List Customer: https://laravel-filament-admin.avdemosites.com/admin/customers

Create Customer: https://laravel-filament-admin.avdemosites.com/admin/customers/create

Edit Customer:https://laravel-filament-admin.avdemosites.com/admin/customers/1/edit

Now we will test customer module online.

2. Order

Create Filament Resource. In your terminal, run the following commands to create an order resource.

php artisan make:filament-resource OrderResource
php artisan make:model Order -m

The commands above will create the following files.

Order Resources:

app/Filament/Resources/OrderResource.php

app/Filament/Resources/OrderResource/Pages/CreateOrder.php

app/Filament/Resources/OrderResource/Pages/EditOrder.php

app/Filament/Resources/OrderResource/Pages/ListOrder.php

Model:

app/Models/Order.php

Migration

database/migrations/[ timestamp ]_create_orders_table.php

Update the OrderResource.php file as shown below. The file is located inside the directory app/Filament/Resources/OrderResource.php

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\OrderResource\Pages;
use App\Filament\Resources\OrderResource\RelationManagers;
use App\Models\Order;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

use Filament\Tables\Columns\TextColumn;

class OrderResource extends Resource
{
    protected static ?string $model = Order::class;

    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('order_num'),
                TextColumn::make('customer.name'),
                TextColumn::make('product_name'),
                TextColumn::make('quantity'),
                TextColumn::make('price'),
                TextColumn::make('created_at'),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListOrders::route('/'),
            'create' => Pages\CreateOrder::route('/create'),
            'edit' => Pages\EditOrder::route('/{record}/edit'),
        ];
    }
}

Update the CreateOrder.php file as shown below. It is located inside the directory app/Filament/Resources/CustomerResource/Pages/CreateOrder.php

<?php

namespace App\Filament\Resources\OrderResource\Pages;

use App\Filament\Resources\OrderResource;
use Filament\Actions;
use Filament\Resources\Pages\CreateRecord;

use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Select;
use Filament\Forms\Form;
use App\Models\{Order, Customer};

class CreateOrder extends CreateRecord
{
    protected static string $resource = OrderResource::class;

    public function form(Form $form): Form
    {
        $customers = Customer::pluck('name', 'id');
        return $form
            ->schema([
                Select::make('customer_id')
                ->options($customers)
                ->required(),
                TextInput::make('order_num')
                ->default('ORD-' . time())
                ->readOnly()
                ->label('Order Number')
                ->readOnly(),
                Select::make('product_name')
                ->options(['T-Shirt'=>'T-Shirt', 'Shirt'=>'Shirt', 'Paint'=>'Paint', 'Watch'=>'Watch'])
                ->required(),
                TextInput::make('quantity')->numeric()->required(),
                TextInput::make('price')->numeric()->required()
            ]);
    }
}

Update the EditCustomer.php file as shown below. It is located inside the directory app/Filament/Resources/CustomerResource/Pages/EditCustomer.php

<?php

namespace App\Filament\Resources\CustomerResource\Pages;

use App\Filament\Resources\CustomerResource;
use Filament\Actions;
use Filament\Resources\Pages\EditRecord;

use Filament\Forms\Components\TextInput;
use Filament\Forms\Form;
use App\Models\Customer;

class EditCustomer extends EditRecord
{
    protected static string $resource = CustomerResource::class;

    protected function getHeaderActions(): array
    {
        return [
            Actions\DeleteAction::make(),
        ];
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('name')->required(),
                TextInput::make('email')->required()->unique(),
            ]);
    }
}

Update the Order.php file as shown below. It is located inside the directory app/Models/Order.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Order extends Model
{
    use HasFactory;

    protected $guarded = ['id'];

    public function customer()
    {
        return $this->belongsTo(Customer::class);
    }
}

Update the [ timestamps ]_orders.php file as shown below. It is located inside the directory, database/migrations/[ timestamps ]_orders.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('orders', function (Blueprint $table) {
            $table->id();
            $table->integer('customer_id');
            $table->string('order_num');
            $table->integer('price');
            $table->string('product_name');
            $table->integer('quantity');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('orders');
    }
};

After the update, run the below command to migrate the changes to the database (db)

php artisan migrate

We have successfully created an Order module with the above steps.
Now we will test the orders module online

List Order: https://laravel-filament-admin.avdemosites.com/admin/orders

Order Create: https://laravel-filament-admin.avdemosites.com/admin/orders/create

Order Edit: https://laravel-filament-admin.avdemosites.com/admin/orders/2/edit

Useful Commands

Filament provides several useful commands to help you manage and customize your admin panel efficiently. Here are some of the most commonly used commands:

Command	Description
php artisan filament:install	Installs the Filament package into your Laravel project.
php artisan vendor:publish –tag=filament-config	Publishes the Filament configuration file to your project, allowing customization.
php artisan make:filament-resource User	Generates a new resource (e.g., for a model) in your Filament admin panel.
php artisan filament:publish	Publishes Filament’s assets, such as JavaScript and CSS files, to your project for customization.
php artisan make:filament-component MyCustomComponent	Creates a new custom component within the Filament admin panel.
php artisan filament:user email@example.com	Quickly creates a new user account with the specified email address.
php artisan filament:users	Displays a list of all users registered in your Filament admin panel.
php artisan filament:reset-password email@example.com	Resets the password for a specified user account.
php artisan filament:install-preset	Installs a Filament preset to add pre-configured components and resources to your admin panel.
php artisan filament:uninstall	Uninstalls the Filament package from your Laravel project.
php artisan filament:make-role admin	Generates a new user role with the specified name.
php artisan filament:assign-role email@example.com admin	Assigns a role to a specific user by providing the user’s email and the role’s name.
php artisan filament:roles	Displays a list of all user roles defined in your Filament admin panel.
php artisan filament:clear-cache	Clears the cache for the Filament admin panel.
php artisan make:filament-policy UserPolicy –model=User	Generates a policy class for a specific model to define authorization rules.
php artisan make:filament-action DeleteUser –model=User	Creates a custom action for a resource in your Filament admin panel.
php artisan filament:publish –component=table	Publishes assets for specific Filament components to customize their appearance or behavior.
php artisan make:filament-page MyCustomPage	Generates a custom page within your Filament admin panel.
php artisan filament:publish –translations	Publishes translations for Filament’s language files to customize or add new translations.
php artisan make:filament-form MyCustomForm	Generates a form component for customizing form layouts within your Filament admin panel.

These commands cover functionalities for managing, customizing, and extending your Filament admin panel within your Laravel project.

Hire a dedicated developer or a Laravel development company for further assistance.