Kanban Board

Filament 4

A Filament application with a Kanban board featuring a Client model, Client Status enum, Kanban Board interface, and drag-and-drop functionality to move clients between statuses.

Txzvrmss5bJ2TQkS8vPOWVXNggtpJq-metaRmlsYW1lbnRFeGFtcGxlcyBUaHVtYkJhc2UgKDcpLnBuZw==-

Get the Source Code:

How it works

To create the Kanban board, you have to make a custom page like this:

php artisan make:filament-page ManageClientStatus

Once this is done, we have to add the following code to it:

app/Filament/Pages/ManageClientStatus.php

use App\Enums\ClientStatus;
use App\Models\Client;
use Filament\Support\Icons\Heroicon;
use Filament\Notifications\Notification;
use Filament\Pages\Page;
use Illuminate\Support\Collection;
use Livewire\Attributes\On;
 
class ManageClientStatus extends Page
{
protected static string | \BackedEnum | null $navigationIcon = Heroicon::OutlinedDocumentText;
 
protected string $view = 'filament.pages.manage-client-status';
 
#[On('statusChangeEvent')]
public function changeRecordStatus(int $id, ClientStatus $status): void
{
$client = Client::find($id);
$client->status = $status;
$client->save();
$clientName = $client->name;
 
Notification::make()
->title($clientName . ' Status Updated')
->success()
->send();
}
 
protected function getViewData(): array
{
$statuses = $this->statuses();
 
$records = $this->records();
 
$statuses = $statuses
->map(function ($status) use ($records) {
$status['group'] = $this->getId();
$status['kanbanRecordsId'] = "{$this->getId()}-{$status['id']}";
$status['records'] = $records
->filter(function ($record) use ($status) {
return $this->isRecordInStatus($record, $status);
});
 
return $status;
});
 
return [
'records' => $records,
'statuses' => $statuses,
];
}
 
protected function statuses(): Collection
{
return collect(ClientStatus::cases())
->map(function (ClientStatus $stage) {
return [
'id' => $stage->value,
'title' => $stage->getLabel(),
];
});
}
 
protected function records(): Collection
{
return Client::all()
->map(function (Client $item) {
return [
'id' => $item->id,
'title' => $item->name,
'status' => $item->status->value,
];
});
}
 
protected function isRecordInStatus($record, $status): bool
{
return $record['status'] === $status['id'];
}
}

Let's quickly go through the code:

The FULL tutorial is available after the purchase: in the Readme file of the official repository you would get invited to.
Get the Source Code: All 152 Premium Examples for $99