Flowforge

https://github.com/relaticle/flowforge
Admin
Flowforge transforms any Laravel model into a production-ready drag-and-drop Kanban board, working...
Tokens:19,400
Snippets:238
Trust Score:6.4
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Implement a real-world CardFlex example

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md

A comprehensive example showing how to combine text entries and CardFlex to display detailed card information.

```php
->cardSchema(fn (Schema $schema) => $schema->components([
    TextEntry::make('title')
        ->weight('bold')
        ->size('lg'),
    TextEntry::make('description')
        ->limit(100)
        ->color('gray'),
    CardFlex::make([
        TextEntry::make('priority')
            ->badge()
            ->icon('heroicon-o-flag'),
        TextEntry::make('due_date')
            ->badge()
            ->date()
            ->icon('heroicon-o-calendar'),
        TextEntry::make('assignedTo.name')
            ->badge()
            ->icon('heroicon-o-user'),
    ])->wrap()->justify('start'),
]))
```

--------------------------------

### Verify BCMath Installation

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/2.upgrading.md

Checks if the BCMath extension is correctly installed and enabled.

```bash
# Verify
php -m | grep bcmath
```

--------------------------------

### Complete Column Configuration Example

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md

Demonstrates mixing different color configuration methods within a columns definition.

```php
use Filament\Support\Colors\Color;

->columns([
    Column::make('todo')
        ->color('gray'),                    // Tailwind color name
    Column::make('in_progress')
        ->color(Color::Blue),                // Color constant
    Column::make('review')
        ->color('primary'),                  // Semantic color
    Column::make('done')
        ->color('#22c55e'),                  // Custom hex
])
```

--------------------------------

### Install BCMath Extension

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/2.upgrading.md

Installs the required BCMath PHP extension on Ubuntu/Debian systems.

```bash
# Ubuntu/Debian
sudo apt-get install php-bcmath
```

--------------------------------

### Verify BCMath Extension

Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md

Check if the required BCMath PHP extension is installed.

```bash
php -m | grep bcmath
```

--------------------------------

### Install Flowforge via Composer

Source: https://github.com/relaticle/flowforge/blob/4.x/README.md

Run this command in your terminal to add the Flowforge package to your Laravel project.

```bash
composer require relaticle/flowforge
```

--------------------------------

### Update Flowforge Dependency

Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md

Install the latest version of the Flowforge package via Composer.

```bash
composer require relaticle/flowforge:^3.0
```

--------------------------------

### FlowForge Configuration File

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Define default limits, kanban settings, and UI preferences in the configuration file.

```php
return [
    'columns' => [
        'default_limit' => 50,
    ],
    'kanban' => [
        'initial_cards_count' => 20,
        'cards_increment' => 10,
    ],
    'ui' => [
        'show_item_counts' => true,
    ],
];
```

--------------------------------

### Publish FlowForge Configuration

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Run this command to publish the package configuration file to your application.

```bash
php artisan vendor:publish --tag=flowforge-config
```

--------------------------------

### Implement a Filament BoardResourcePage

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Extends BoardResourcePage to integrate a board within a Filament resource. Requires linking to an existing resource class.

```php
use Relaticlelowforge\BoardResourcePage;

class TaskBoardPage extends BoardResourcePage
{
    protected static string $resource = TaskResource::class;

    public function board(Board $board): Board
    {
        return $board
            ->query($this->getResource()::getEloquentQuery())
            ->columnIdentifier('status')
            ->positionIdentifier('position')
            ->columns([...]);
    }
}
```

--------------------------------

### Generate Board Page

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Run the artisan command to scaffold a new board page class.

```bash
php artisan flowforge:make-board TaskBoard
```

--------------------------------

### Generate Flowforge Boards

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Create new board structures using Artisan commands.

```bash
php artisan flowforge:make-board TaskBoard
php artisan flowforge:make-board TaskBoard --resource  # For resource page
```

--------------------------------

### Configure Card and Column Actions

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Defines actions for cards and columns, and sets a specific action to trigger on card clicks.

```php
->cardActions([                                   // Card-level actions
    EditAction::make()->model(Task::class),
    DeleteAction::make()->model(Task::class),
])
->columnActions([                                 // Column-level actions
    CreateAction::make()->model(Task::class),
])
->cardAction('edit')                              // Make cards clickable
```

--------------------------------

### Create a Standalone Kanban Page

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/1.integration-patterns.md

Use this pattern to implement a dedicated Kanban board page within the Filament admin panel.

```php
<?php

namespace App\Filament\Pages;

use App\Models\Task;
use Relaticle\Flowforge\Board;
use Relaticle\Flowforge\BoardPage;
use Relaticle\Flowforge\Column;

class TaskBoard extends BoardPage
{
    protected static ?string $navigationIcon = 'heroicon-o-view-columns';
    
    public function board(Board $board): Board
    {
        return $board
            ->query(Task::query())
            ->columnIdentifier('status')
            ->positionIdentifier('position')
            ->columns([
                Column::make('todo')->label('To Do')->color('gray'),
                Column::make('in_progress')->label('In Progress')->color('blue'),
                Column::make('completed')->label('Completed')->color('green'),
            ]);
    }
}
```

--------------------------------

### Run development commands

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/4.community/1.contributing.md

Use these Composer commands to verify code quality, run tests, and format the codebase.

```bash
# Run tests
composer test

# Format code  
composer pint

# Static analysis
composer analyse
```

--------------------------------

### Configure Board Columns

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Define board columns with icons and colors using the Column class.

```php
use Relaticlelowforge\Column;

->columns([
    Column::make('backlog', 'Backlog')
        ->icon('heroicon-o-inbox')
        ->color('gray'),

    Column::make('todo', 'To Do')
        ->icon('heroicon-o-clipboard')
        ->color('info'),

    Column::make('in_progress', 'In Progress')
        ->icon('heroicon-o-play')
        ->color('warning'),

    Column::make('review', 'Review')
        ->icon('heroicon-o-eye')
        ->color('primary'),

    Column::make('done', 'Done')
        ->icon('heroicon-o-check-circle')
        ->color('success'),
])
```

--------------------------------

### Configure Pagination

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Set initial card load count and incremental loading behavior.

```php
->cardsPerColumn(20)           // Cards loaded initially
->cardsIncrement(10)           // Cards loaded on "Load More"
```

--------------------------------

### Configure Board Actions

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md

Ensure the board page uses the required traits and actions are properly configured with the model.

```php
class TaskBoard extends BoardPage
{
    use InteractsWithActions;  // Required
    use InteractsWithForms;   // Required
    
    public function board(Board $board): Board
    {
        return $board
            ->cardActions([
                EditAction::make()->model(Task::class),  // Model required
            ]);
    }
}
```

--------------------------------

### Enable Search

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Specify fields to be searchable within the board.

```php
->searchable(['title', 'description'])
```

--------------------------------

### Define Record Actions

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Configure actions available on individual cards.

```php
use Filament\Actions\Action;
use Filament\Actions\EditAction;
use Filament\Actions\DeleteAction;

->recordActions([
    EditAction::make()
        ->url(fn ($record) => route('tasks.edit', $record)),
    Action::make('archive')
        ->icon('heroicon-o-archive-box')
        ->action(fn ($record) => $record->archive()),
    DeleteAction::make(),
])
```

--------------------------------

### Configure Search and Filtering

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md

Use searchable() and filters() to add search fields and various filter types like SelectFilter and Filter to your board.

```php
use Filament\Tables\Filters\SelectFilter;
use Filament\Tables\Filters\Filter;

public function board(Board $board): Board
{
    return $board
        ->searchable(['title', 'description', 'assignee.name'])
        ->filters([
            SelectFilter::make('priority')
                ->options(['low' => 'Low', 'medium' => 'Medium', 'high' => 'High'])
                ->multiple(),
            SelectFilter::make('assigned_to')
                ->relationship('assignee', 'name')
                ->searchable()
                ->preload(),
            Filter::make('overdue')
                ->label('Overdue')
                ->query(fn (Builder $query) => $query->where('due_date', '<', now()))
                ->toggle(),
        ]);
}
```

--------------------------------

### Integrate Kanban into Filament Resources

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/1.integration-patterns.md

Use this pattern to add Kanban views to existing Filament resources, inheriting permissions and scopes.

```php
<?php

namespace App\Filament\Resources\CampaignResource\Pages;

use App\Filament\Resources\CampaignResource;
use Relaticle\Flowforge\Board;
use Relaticle\Flowforge\BoardResourcePage;
use Relaticle\Flowforge\Column;

class CampaignTaskBoard extends BoardResourcePage
{
    protected static string $resource = CampaignResource::class;
    
    public function board(Board $board): Board
    {
        return $board
            ->query(
                // Get tasks for this specific campaign and current user's team
                $this->getRecord()
                    ->tasks()
                    ->whereHas('team', fn($q) => $q->where('id', auth()->user()->current_team_id))
                    ->getQuery()
            )
            ->columnIdentifier('status')
            ->positionIdentifier('position')
            ->columns([
                Column::make('backlog')->label('Backlog')->color('gray'),
                Column::make('in_progress')->label('In Progress')->color('blue'),
                Column::make('review')->label('Review')->color('amber'),
                Column::make('completed')->label('Completed')->color('green'),
            ]);
    }
}

// Register in your CampaignResource
public static function getPages(): array
{
    return [
        'index' => Pages\ListCampaigns::route('/'),
        'create' => Pages\CreateCampaign::route('/create'),
        'edit' => Pages\EditCampaign::route('/{record}/edit'),
        'tasks' => Pages\CampaignTaskBoard::route('/{record}/tasks'), // Add this line
    ];
}
```

--------------------------------

### Implement Standalone Livewire Board

Source: https://github.com/relaticle/flowforge/blob/4.x/README.md

Use the InteractsWithBoard trait and define the board configuration within a Livewire component.

```php
use Relaticle\Flowforge\Concerns\InteractsWithBoard;

class TaskBoard extends Component implements HasBoard
{
    use InteractsWithBoard;
    
    public function board(Board $board): Board
    {
        return $board
            ->query(Task::query())
            ->columnIdentifier('status')
            ->positionIdentifier('position')
            ->columns([
                Column::make('todo')->label('To Do')->color('gray'),
                Column::make('in_progress')->label('In Progress')->color('blue'),
                Column::make('completed')->label('Completed')->color('green'),
            ]);
    }
}
```

--------------------------------

### Configure Essential Board Settings

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Defines the data source, identifier fields, and column structure required for a board.

```php
public function board(Board $board): Board
{
    return $board
        ->query(Task::query())                    // Required: Data source
        ->columnIdentifier('status')              // Required: Column field
        ->positionIdentifier('position')          // Required: Position field
        ->columns([                               // Required: Column definitions
            Column::make('todo')->label('To Do')->color('gray'),
            Column::make('done')->label('Done')->color('green'),
        ]);
}
```

--------------------------------

### Configure Filters

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Add select and ternary filters to the board interface.

```php
use Filament\Tables\Filters\SelectFilter;
use Filament\Tables\Filters\TernaryFilter;

->filters([
    SelectFilter::make('priority')
        ->options([
            'low' => 'Low',
            'medium' => 'Medium',
            'high' => 'High',
        ]),
    SelectFilter::make('assignee_id')
        ->relationship('assignee', 'name')
        ->searchable()
        ->preload(),
    TernaryFilter::make('is_overdue')
        ->label('Overdue'),
])
```

--------------------------------

### Generate Filament Board

Source: https://github.com/relaticle/flowforge/blob/4.x/README.md

Use the artisan command to scaffold a new board within a Filament admin panel.

```bash
php artisan flowforge:make-board TaskBoard --model=Task
```

--------------------------------

### Manage Pagination and Drag-Drop

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md

Programmatically load items to enable drag-and-drop when pagination is active.

```php
// Check if column is fully loaded
$this->isColumnFullyLoaded('todo'); // Returns false with pagination

// Load all cards programmatically
$this->loadAllItems('todo');

// Now drag-drop is enabled
$this->isColumnFullyLoaded('todo'); // Returns true
```

--------------------------------

### Flowforge Configuration Methods

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

A collection of methods used to configure the Flowforge board, including data source queries, column definitions, and card behavior settings.

```APIDOC
## Flowforge Configuration Methods

### Description
Methods used to define the structure, data source, and behavior of a Flowforge board.

### Methods
- **query(Builder)** - Required - Set the Eloquent query as data source
- **columnIdentifier(string)** - Required - Field name for column status
- **positionIdentifier(string)** - Required - Field name for drag-drop ordering
- **columns(array)** - Required - Define board columns
- **recordTitleAttribute(string)** - Optional - Field name for card titles
- **cardLabel(string|Closure|null)** - Optional - Name of a single card
- **pluralCardLabel(string|Closure|null)** - Optional - Name of a set of cards
- **cardSchema(Closure)** - Optional - Rich card content using Schema
- **cardActions(array)** - Optional - Actions available on each card
- **columnActions(array)** - Optional - Actions available on column headers
- **searchable(array)** - Optional - Enable search on specified fields
- **filters(array)** - Optional - Add filtering capabilities
- **cardAction(string)** - Optional - Make cards clickable with action
- **cardsPerColumn(int)** - Optional - Cards to load per column (pagination)
- **filtersFormWidth(Width)** - Optional - Filter panel width
- **filtersFormColumns(int)** - Optional - Columns in filter form
- **filtersLayout(FiltersLayout)** - Optional - Filter display layout
- **headerToolbar(bool)** - Optional - Render filters/search inline with page title
- **collapseEmptyColumns(bool)** - Optional - Collapse columns holding no cards into a rail
```

--------------------------------

### Listening to Livewire Events in PHP

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Use the #[On] attribute to listen for kanban-card-moved and kanban-items-loaded events within a Livewire component.

```php
use Livewire\Attributes\On;

#[On('kanban-card-moved')]
public function onCardMoved(string $cardId, string $columnId, string $position): void
{
    // Custom logic when a card moves (e.g., send notification, update analytics)
}

#[On('kanban-items-loaded')]
public function onItemsLoaded(string $columnId, int $loadedCount, int $totalCount, bool $isFullyLoaded): void
{
    // Track loading progress
}
```

--------------------------------

### Listening to Livewire Events in JavaScript

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Register event listeners using Livewire.on within the livewire:init event to handle frontend logic when a card is moved.

```javascript
document.addEventListener('livewire:init', () => {
    Livewire.on('kanban-card-moved', ({ cardId, columnId }) => {
        console.log(`Card ${cardId} moved to ${columnId}`);
    });
});
```

--------------------------------

### Configure Dynamic Columns

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Generate board columns dynamically based on database records.

```php
public function board(Board $board): Board
{
    $statuses = Status::ordered()->get();

    return $board
        ->query(Task::query())
        ->columnIdentifier('status_id')
        ->positionIdentifier('position')
        ->columns(
            $statuses->map(fn ($status) =>
                Column::make($status->id, $status->name)
                    ->icon($status->icon)
                    ->color($status->color)
            )->toArray()
        );
}
```

--------------------------------

### Implement a Standalone Livewire Board Component

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Uses the HasBoard interface and InteractsWithBoard trait to render a board in a custom Livewire component.

```php
use Livewire\Component;
use Relaticlelowforge\Board;
use Relaticlelowforge\Contracts\HasBoard;
use Relaticlelowforge\Concerns\InteractsWithBoard;

class TaskBoard extends Component implements HasBoard
{
    use InteractsWithBoard;

    public function board(Board $board): Board
    {
        return $board
            ->query(Task::query())
            ->columnIdentifier('status')
            ->positionIdentifier('position')
            ->columns([...]);
    }

    public function render()
    {
        return view('livewire.task-board');
    }
}
```

--------------------------------

### Board Configuration Methods

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Methods used to define the core structure of a board, including data source, column identifiers, and column definitions.

```APIDOC
## Board Configuration

### Description
Configures the primary data source and column structure for a board.

### Method
Fluent PHP Method

### Parameters
- **board** (Board) - Required - The board instance to configure.
- **query** (Builder) - Required - The data source query.
- **columnIdentifier** (string) - Required - The field name used to identify columns.
- **positionIdentifier** (string) - Required - The field name used to track card position.
- **columns** (array) - Required - An array of Column definitions.
```

--------------------------------

### Configure Clickable Card Actions with URLs

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Configures a card action with a URL to enable native link behavior, such as opening in a new tab.

```php
->cardActions([
    Action::make('view')
        ->url(fn (Task $record): string => TaskResource::getUrl('view', ['record' => $record])),
])
->cardAction('view')
```

--------------------------------

### Configure Board Page Class

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Define the board query, identifiers, and columns within the board method of your BoardPage class.

```php
use Relaticle\Flowforge\BoardPage;
use Relaticle\Flowforge\Board;
use Relaticle\Flowforge\Column;

class TaskBoard extends BoardPage
{
    protected static ?string $navigationIcon = 'heroicon-o-view-columns';

    public function board(Board $board): Board
    {
        return $board
            ->query(Task::query())
            ->columnIdentifier('status')
            ->positionIdentifier('position')
            ->recordTitleAttribute('title')
            ->columns([
                Column::make('todo', 'To Do')
                    ->icon('heroicon-o-clipboard'),
                Column::make('in_progress', 'In Progress')
                    ->icon('heroicon-o-play'),
                Column::make('done', 'Done')
                    ->icon('heroicon-o-check'),
            ]);
    }
}
```

--------------------------------

### Actions Configuration

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Methods for defining card-level and column-level actions, including click behavior.

```APIDOC
## Actions Configuration

### Description
Configures actions available on cards and columns, and defines click behavior for cards.

### Methods
- **cardActions(array)** - Defines actions available on cards.
- **columnActions(array)** - Defines actions available on columns.
- **cardAction(string)** - Sets a specific action to trigger when a card is clicked.
```

--------------------------------

### Repair Positions Interactively

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Run an interactive CLI tool to resolve position inconsistencies.

```bash
php artisan flowforge:repair-positions "App\Models\Task" status position
```

--------------------------------

### Artisan Commands

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

CLI commands for managing board generation, diagnosing position issues, and rebalancing or repairing positions.

```APIDOC
## Artisan Commands

### flowforge:make-board
Generates a new board class.
Usage: `php artisan flowforge:make-board [Name] [--resource]`

### flowforge:diagnose-positions
Diagnoses position issues like missing values, duplicates, or inversions.
Usage: `php artisan flowforge:diagnose-positions [Model] [Column] [PositionField]`

### flowforge:rebalance-positions
Rebalances positions for a model.
Usage: `php artisan flowforge:rebalance-positions [Model] [Column] [PositionField] [--column=...]`

### flowforge:repair-positions
Interactive tool to repair position issues.
Usage: `php artisan flowforge:repair-positions [Model] [Column] [PositionField]`
```

--------------------------------

### Implement Standalone Livewire Board

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/1.integration-patterns.md

Define a Livewire component implementing HasBoard, HasActions, and HasForms to render a custom task board.

```php
<?php

namespace App\Livewire;

use App\Models\Task;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Livewire\Component;
use Relaticle\Flowforge\Board;
use Relaticle\Flowforge\Column;
use Relaticle\Flowforge\Concerns\InteractsWithBoard;
use Relaticle\Flowforge\Contracts\HasBoard;

class TaskBoard extends Component implements HasBoard, HasActions, HasForms
{
    use InteractsWithActions;
    use InteractsWithBoard {
        InteractsWithBoard::getDefaultActionRecord insteadof InteractsWithActions;
    }
    use InteractsWithForms;

    public function board(Board $board): Board
    {
        return $board
            ->query(Task::query())
            ->columnIdentifier('status')
            ->positionIdentifier('position')
            ->columns([
                Column::make('todo')->label('To Do')->color('gray'),
                Column::make('in_progress')->label('In Progress')->color('blue'),
                Column::make('completed')->label('Completed')->color('green'),
            ]);
    }

    public function render()
    {
        return view('livewire.task-board');
    }
}
```

```blade
{{-- resources/views/livewire/task-board.blade.php --}}
<div>
    <h1 class="text-2xl font-bold mb-6">Task Board</h1>
    {{ $this->board }}
</div>
```

--------------------------------

### Implement a Filament Standard BoardPage

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Extends BoardPage to create a standalone board view. Requires defining column and position identifiers.

```php
use Relaticlelowforge\BoardPage;

class TaskBoard extends BoardPage
{
    protected static ?string $navigationIcon = 'heroicon-o-view-columns';
    protected static ?string $navigationGroup = 'Tasks';

    public function board(Board $board): Board
    {
        return $board
            ->query(Task::query()->where('team_id', auth()->user()->team_id))
            ->columnIdentifier('status')
            ->positionIdentifier('position')
            ->columns([...]);
    }
}
```

--------------------------------

### Implement Card Component

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/docs/css-guidelines.md

Use this structure for cards, applying priority modifiers like ff-card--priority-high as needed.

```html
<div class="ff-card ff-card--priority-high">
    <div class="ff-card__body">
        <h4 class="ff-card__title">Card Title</h4>
        <p class="ff-card__description">Description text</p>
        <div class="ff-card__badges">
            <!-- Badges go here -->
        </div>
    </div>
</div>
```

--------------------------------

### Define Column Actions

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Configure actions available in the column header.

```php
->columnActions([
    Action::make('add')
        ->icon('heroicon-o-plus')
        ->action(function (array $arguments) {
            // $arguments['column'] contains column identifier
            Task::create([
                'status' => $arguments['column'],
                'position' => DecimalPosition::forEmptyColumn(),
            ]);
        }),
])
```

--------------------------------

### Configure Search and Filtering

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Enables search, adds filters, and configures the layout and appearance of the filter panel.

```php
use Filament\Tables\Enums\FiltersLayout;
use Filament\Support\Enums\Width;

->searchable(['title', 'description'])            // Enable search
->filters([                                       // Add filters
    SelectFilter::make('priority'),
    Filter::make('overdue')->query(fn($q) =>
        $q->where('due_date', '<', now())
    ),
])
->filtersLayout(FiltersLayout::AboveContent)      // Display filters above board
->filtersFormWidth(Width::Large)                  // Filter panel width
->filtersFormColumns(3)                           // Columns in filter form
->headerToolbar()                                 // Inline filters/search in page header
->collapseEmptyColumns()                          // Collapse columns holding no cards
```

--------------------------------

### Create rich card layouts with Filament Schema

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md

Use Filament's Schema components to define the structure and content of your Kanban cards, including badges and icons.

```php
use Filament\Infolists\Components\TextEntry;
use Filament\Schemas\Schema;

public function board(Board $board): Board
{
    return $board
        ->cardSchema(fn (Schema $schema) => $schema->components([
            TextEntry::make('priority')->badge()->color(fn ($state) => match($state) {
                'high' => 'danger',
                'medium' => 'warning',
                'low' => 'success',
                default => 'gray'
            }),
            TextEntry::make('due_date')->date()->icon('heroicon-o-calendar'),
            TextEntry::make('assignee.name')->icon('heroicon-o-user'),
        ]));
}
```

--------------------------------

### Migrate task positions with order preservation

Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md

Use this migration script to add a decimal position column, calculate new positions based on existing order, and swap the columns. Ensure the 'tasks' table exists and has the required 'status' and 'position' columns before running.

```php
<?php

use Illuminate	ypes\Migrations\Migration;
use Illuminate\Support\Facades\DB;
use Relaticle\Flowforge\Services\DecimalPosition;

return new class extends Migration
{
    public function up(): void
    {
        // 1. Add new decimal column
        Schema::table('tasks', function (Blueprint $table) {
            $table->decimal('position_new', 20, 10)->nullable();
        });

        // 2. Convert existing positions maintaining order
        $statuses = DB::table('tasks')->distinct()->pluck('status');

        foreach ($statuses as $status) {
            $tasks = DB::table('tasks')
                ->where('status', $status)
                ->orderBy('position')  // Original string order
                ->get();

            $lastPosition = null;
            foreach ($tasks as $task) {
                $newPosition = $lastPosition === null
                    ? DecimalPosition::forEmptyColumn()
                    : DecimalPosition::after($lastPosition);

                DB::table('tasks')
                    ->where('id', $task->id)
                    ->update(['position_new' => $newPosition]);

                $lastPosition = $newPosition;
            }
        }

        // 3. Swap columns
        Schema::table('tasks', function (Blueprint $table) {
            $table->dropColumn('position');
        });

        Schema::table('tasks', function (Blueprint $table) {
            $table->renameColumn('position_new', 'position');
            $table->unique(['status', 'position'], 'unique_position_per_column');
        });
    }
};
```

--------------------------------

### Enable collapseEmptyColumns()

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md

Enable collapseEmptyColumns() to render columns with no cards as a 48px rail. This feature maintains drop target functionality, column actions, and visibility of the column name and count.

```php
public function board(Board $board): Board
{
    return $board
        ->collapseEmptyColumns();
}
```

--------------------------------

### Test Livewire drag and drop functionality

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md

Temporarily add this method to a component to verify drag-and-drop state transitions.

```php
// Add to board component temporarily
public function testDragDrop()
{
    $task = Task::first();
    $this->moveCard($task->id, 'in_progress');
    dd($task->fresh()->status);
}
```

--------------------------------

### Run Diagnostic and Rebalance Commands

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/2.upgrading.md

Executes diagnostic or rebalancing tasks for position data in v3.x.

```bash
php artisan flowforge:diagnose-positions   # Check for issues
php artisan flowforge:rebalance-positions  # Redistribute positions
```

--------------------------------

### Diagnose Position Integrity

Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md

Run the diagnostic tool to verify data integrity after migration.

```bash
php artisan flowforge:diagnose-positions \
    --model=App\\Models\\YourModel \
    --column=status \
    --position=position
```

--------------------------------

### Content Configuration

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Methods for configuring the display of card titles, labels, and rich content schemas.

```APIDOC
## Content Configuration

### Description
Configures how records are displayed within cards, including titles, labels, and custom schemas.

### Methods
- **recordTitleAttribute(string)** - Sets the attribute used for the card title.
- **cardLabel(string|Closure)** - Sets the singular label for cards.
- **pluralCardLabel(string|Closure)** - Sets the plural label for cards.
- **cardSchema(Closure)** - Defines the schema for card content using components.
```

--------------------------------

### Configure Card Content

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Sets the title attribute, labels, and schema for the content displayed within cards.

```php
->recordTitleAttribute('title')                   // Card title field
->cardLabel('Task')                               // Defaults to the model label
->pluralCardLabel('Tasks')                        // Defaults to the plural model label
->cardSchema(fn(Schema $schema) => $schema        // Rich card content
    ->components([
        TextEntry::make('description'),
        TextEntry::make('due_date')->date(),
    ])
)
```

--------------------------------

### Configure Board Position Identifier

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md

Add the position identifier to the board configuration to enable drag-and-drop functionality.

```php
// Correct configuration
public function board(Board $board): Board
{
    return $board
        ->query(Task::query())
        ->columnIdentifier('status')
        ->positionIdentifier('position')  // Required for drag-drop
        ->columns([...]);
}
```

--------------------------------

### Eager Load Card Relationships

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Optimize performance by eager loading related models for cards.

```php
public function board(Board $board): Board
{
    return $board
        ->query(Task::query()->with(['assignee', 'tags', 'project']))
        // ...
}
```

--------------------------------

### Build Columns from Enums

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md

Implement HasColor, HasIcon, and HasLabel contracts on an enum to automatically generate columns.

```php
use Filament\Support\Contracts\HasColor;
use Filament\Support\Contracts\HasIcon;
use Filament\Support\Contracts\HasLabel;

enum TaskStatus: string implements HasColor, HasIcon, HasLabel
{
    case Todo = 'todo';
    case InProgress = 'in_progress';
    case Done = 'done';

    public function getLabel(): string
    {
        return match ($this) {
            self::Todo => 'To Do',
            self::InProgress => 'In Progress',
            self::Done => 'Done',
        };
    }

    public function getColor(): string
    {
        return match ($this) {
            self::Todo => 'gray',
            self::InProgress => 'blue',
            self::Done => 'green',
        };
    }

    public function getIcon(): string
    {
        return match ($this) {
            self::Todo => 'heroicon-o-queue-list',
            self::InProgress => 'heroicon-o-arrow-path',
            self::Done => 'heroicon-o-check',
        };
    }
}

->columns(
    array_map(fn (TaskStatus $status) => Column::enum($status), TaskStatus::cases()),
)
```

--------------------------------

### Upgrade Flowforge to v4.x

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/2.upgrading.md

Use Composer to update the package to the latest major version.

```bash
composer require relaticle/flowforge:^4.0
```

--------------------------------

### Optimize Board Queries

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md

Improve performance by eager loading relationships and selecting only necessary fields.

```php
// Optimized query example
->query(
    Task::query()
        ->with(['assignee', 'priority'])  // Eager load relationships
        ->select(['id', 'title', 'status', 'position'])  // Select only needed fields
)
```

--------------------------------

### Migrate Position Column with Order Preservation

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/2.upgrading.md

Performs a manual migration to preserve existing card order when switching to the new decimal column type.

```php
public function up(): void
{
    // Add temporary column
    Schema::table('tasks', function (Blueprint $table) {
        $table->decimal('position_new', 20, 10)->nullable();
    });

    // Copy order (positions will be regenerated by repair command)
    DB::statement('UPDATE tasks SET position_new = CAST(position AS DECIMAL(20,10))');

    // Swap columns
    Schema::table('tasks', function (Blueprint $table) {
        $table->dropColumn('position');
    });
    Schema::table('tasks', function (Blueprint $table) {
        $table->renameColumn('position_new', 'position');
    });
}
```

--------------------------------

### Pagination Control Methods

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Methods for managing card pagination, loading items, and determining board positions within a column.

```php
// Load more cards for pagination
$this->loadMoreItems(string $columnId, ?int $count = null)

// Load all cards to enable reordering
$this->loadAllItems(string $columnId)

// Check if all cards are loaded
$this->isColumnFullyLoaded(string $columnId): bool

// Get position for new card in column
$this->getBoardPositionInColumn(string $columnId): string
```

--------------------------------

### Implement Badge Component

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/docs/css-guidelines.md

Badges support size and pill modifiers, with color defined by kanban-color-* classes.

```html
<div class="ff-badge ff-badge--sm ff-badge--pill kanban-color-red">
    <span class="ff-badge__label">Label</span>
    <span class="ff-badge__value">Value</span>
</div>
```

--------------------------------

### Verify database schema status

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md

Check the current migration status to ensure the database schema is up to date.

```bash
php artisan migrate:status
```

--------------------------------

### Pagination Control Methods

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Methods for managing card loading and pagination state within columns.

```APIDOC
### loadMoreItems
Loads additional cards for a specific column.
- **$columnId** (string) - Required
- **$count** (int) - Optional

### loadAllItems
Loads all cards for a specific column to enable reordering.
- **$columnId** (string) - Required

### isColumnFullyLoaded
Checks if all cards for a column have been loaded.
- **$columnId** (string) - Required
- Returns: bool

### getBoardPositionInColumn
Retrieves the position string for a new card in a column.
- **$columnId** (string) - Required
- Returns: string
```

--------------------------------

### Include CSS Assets

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/1.installation.md

Add the plugin's views to your custom Filament theme CSS file.

```css
@source "../../../../vendor/relaticle/flowforge/resources/views/**/*.blade.php";
```

--------------------------------

### Define Migration for Position Tracking

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Add the position column and a unique constraint to ensure concurrent safety.

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

return new class extends Migration
{
    public function up(): void
    {
        Schema::table('tasks', function (Blueprint $table) {
            $table->flowforgePositionColumn();
            $table->unique(['status', 'position']);
        });
    }
};
```

--------------------------------

### Implement Scoped Boards

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Restrict board queries to specific tenants, such as a user's team.

```php
public function board(Board $board): Board
{
    return $board
        ->query(Task::query()->where('team_id', auth()->user()->team_id))
        // ...
}
```

--------------------------------

### Update Service References

Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md

Replace deprecated Rank service calls with the new DecimalPosition service.

```diff
- use Relaticle\Flowforge\Services\Rank;
+ use Relaticle\Flowforge\Services\DecimalPosition;

// Empty column position
- $position = Rank::forEmptySequence()->get();
+ $position = DecimalPosition::forEmptyColumn();

// Position after another
- $position = Rank::after($lastRank)->get();
+ $position = DecimalPosition::after($lastPosition);

// Position before another
- $position = Rank::before($nextRank)->get();
+ $position = DecimalPosition::before($nextPosition);

// Position between two
- $position = Rank::betweenRanks($prevRank, $nextRank)->get();
+ $position = DecimalPosition::between($afterPos, $beforePos);
```

--------------------------------

### Update Factory Position Service for v3.x

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/2.upgrading.md

Updates usage of the Rank service to the DecimalPosition service for v3.x compatibility.

```php
// Before (v2.x)
use Relaticle\Flowforge\Services\Rank;
$position = Rank::forEmptySequence()->get();
$position = Rank::after($lastRank)->get();

// After (v3.x)
use Relaticle\Flowforge\Services\DecimalPosition;
$position = DecimalPosition::forEmptyColumn();
$position = DecimalPosition::after($lastPosition);
```

--------------------------------

### kanban-all-items-loaded

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Event dispatched when a column has finished loading all available items.

```APIDOC
## Event: kanban-all-items-loaded

### Description
Dispatched after the 'Load All' action completes for a specific column.

### Payload
- **columnId** (string) - The identifier of the column.
- **totalCount** (int) - The total number of items loaded.
```

--------------------------------

### Register Board Page

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/1.installation.md

Register the generated board page in your Filament AdminPanelProvider.

```php
->pages([
    App\Filament\Pages\TaskBoard::class,
])
```

--------------------------------

### Build Column from Backed Enum

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Create a column using a backed enum. Values are automatically applied if the enum implements HasLabel, HasColor, or HasIcon.

```php
Column::enum(TaskStatus::Todo)                   // identifier = $enum->value
```

--------------------------------

### Handle Missing BCMath Extension

Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md

The library requires the BCMath extension for decimal calculations.

```text
Error: Call to undefined function bcadd()
```

--------------------------------

### Integrate DecimalPosition in model factory

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/3.database-schema.md

Generate sequential position values within a factory definition using the DecimalPosition service to maintain order.

```php
use Relaticle\Flowforge\Services\DecimalPosition;

class TaskFactory extends Factory
{
    /** @var array<string, string> Track last position per status */
    private static array $lastPositions = [];

    public function definition(): array
    {
        $status = $this->faker->randomElement(['todo', 'in_progress', 'done']);

        return [
            'title' => $this->faker->sentence(3),
            'status' => $status,
            'position' => $this->generatePositionForStatus($status),
        ];
    }

    private function generatePositionForStatus(string $status): string
    {
        if (!isset(self::$lastPositions[$status])) {
            $position = DecimalPosition::forEmptyColumn();
        } else {
            $position = DecimalPosition::after(self::$lastPositions[$status]);
        }

        self::$lastPositions[$status] = $position;

        return $position;
    }
}
```

--------------------------------

### Update Blueprint Macro Schema

Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md

The migration from VARCHAR to DECIMAL(20,10) for position columns requires updating table definitions.

```php
// v2.x created:
$table->string('position')->nullable()->collation('utf8mb4_bin');

// v3.x creates:
$table->decimal('position', 20, 10)->nullable();
```

--------------------------------

### Repair Position Collisions and Ordering

Source: https://github.com/relaticle/flowforge/blob/4.x/UPGRADE.md

Use the repair command to resolve unique constraint violations or restore order after migration.

```bash
php artisan flowforge:repair-positions
# Select "regenerate" strategy
```

--------------------------------

### Rebalance Positions

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/3.database-schema.md

Redistributes positions evenly when gaps become too small.

```bash
php artisan flowforge:rebalance-positions \
    --model=App\\Models\\Task \
    --column=status \
    --position=position
```

--------------------------------

### Customize Column Appearance

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md

Define column labels, colors, and icons using the Column class.

```php
use Filament\Support\Colors\Color;

Column::make('todo')
    ->label('To Do')
    ->color('gray')        // Supports multiple color formats
    ->icon('heroicon-o-queue-list')
```

--------------------------------

### CSS Directory Structure

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/docs/css-guidelines.md

The organizational structure of the Flowforge CSS files.

```text
resources/css/flowforge.css
├── Base variables and theme configuration
├── Layout Components
├── UI Components
├── Color Systems
└── Utility Classes
```

--------------------------------

### Implement Manual Card Movement

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Override the moveCard method in a Livewire component to handle custom logic after a card position update.

```php
// In your Livewire component
public function moveCard(
    int|string $recordId,
    string $toColumn,
    ?string $afterRecordId = null,
    ?string $beforeRecordId = null
): void {
    // Parent handles position calculation and saving
    parent::moveCard($recordId, $toColumn, $afterRecordId, $beforeRecordId);

    // Add custom logic after move
    $this->dispatch('card-moved');
}
```

--------------------------------

### Define Custom Card Actions

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Add custom actions to cards, such as opening a resource view in a new tab.

```php
->recordActions([
    Action::make('view')
        ->url(fn ($record) => TaskResource::getUrl('view', ['record' => $record]))
        ->openUrlInNewTab(),
])
```

--------------------------------

### Implement Column Component

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/docs/css-guidelines.md

Columns contain a header with a title and count indicator, followed by a content area for cards.

```html
<div class="ff-column">
    <div class="ff-column__header">
        <div class="ff-column__title">
            Column Title
            <div class="ff-column__count kanban-color-blue">5</div>
        </div>
    </div>
    <div class="ff-column__content">
        <!-- Cards go here -->
    </div>
</div>
```

--------------------------------

### Set Column Colors with Filament Constants

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md

Use the Filament Color class constants to define column colors.

```php
use Filament\Support\Colors\Color;

Column::make('todo')->color(Color::Gray)
Column::make('in_progress')->color(Color::Blue)
Column::make('done')->color(Color::Green)
```

--------------------------------

### Register BoardResourcePage in Filament Resource

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Adds the board route to the getPages method of a Filament resource.

```php
public static function getPages(): array
{
    return [
        'index' => Pages\ListTasks::route('/'),
        'board' => Pages\TaskBoardPage::route('/board'),
    ];
}
```

--------------------------------

### Debug Board Data

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md

Use these snippets to verify data existence and query results when the board appears empty.

```php
// Add to board method temporarily
dd($this->getEloquentQuery()->get());
```

```php
// Check for global scopes, soft deletes, etc.
->query(Task::withoutGlobalScopes()->get())
```

--------------------------------

### Implement BackedEnum for Status Fields

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/3.database-schema.md

Flowforge automatically handles PHP BackedEnum for status fields when cast in the model.

```php
// Define your enum
enum TaskStatus: string
{
    case Todo = 'todo';
    case InProgress = 'in_progress';
    case Done = 'done';
}

// Cast in your model
class Task extends Model
{
    protected $casts = [
        'status' => TaskStatus::class,
    ];
}

// Flowforge automatically converts column IDs to enum values
Column::make('todo')      // → TaskStatus::Todo
Column::make('in_progress') // → TaskStatus::InProgress
Column::make('done')      // → TaskStatus::Done
```

--------------------------------

### Configure Blade Layout for Filament Assets

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/1.integration-patterns.md

Include Filament styles and scripts in your application layout to support Flowforge components.

```blade
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    @filamentStyles
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="antialiased">
    {{ $slot }}

    @filamentScripts
</body>
</html>
```

--------------------------------

### Calculate Decimal Positions

Source: https://github.com/relaticle/flowforge/blob/4.x/resources/boost/skills/flowforge-development/SKILL.md

Use the DecimalPosition service to manage card ordering with BCMath precision. Includes methods for jittered, deterministic, and sequence-based positioning.

```php
use Relaticlelowforge\Services\DecimalPosition;

// Position between two cards (includes cryptographic jitter)
$position = DecimalPosition::between($afterPosition, $beforePosition);

// Exact midpoint (deterministic, for testing)
$position = DecimalPosition::betweenExact($afterPosition, $beforePosition);

// Position before first card
$position = DecimalPosition::before($firstPosition);

// Position after last card
$position = DecimalPosition::after($lastPosition);

// Initial position for empty column
$position = DecimalPosition::forEmptyColumn();

// Smart positioning (handles nulls)
$position = DecimalPosition::calculate($afterPos, $beforePos);

// Check if rebalancing needed
if (DecimalPosition::needsRebalancing($posA, $posB)) {
    // Gap is < 0.0001
}

// Generate evenly-spaced sequence
$positions = DecimalPosition::generateSequence(count: 100);
```

--------------------------------

### Include Filament Assets in Layout

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md

Ensure Filament styles and scripts are included in your layout file to prevent Alpine component errors.

```blade
{{-- Required in your layout --}}
<head>
    @filamentStyles
</head>
<body>
    {{ $slot }}
    @filamentScripts
</body>
```

--------------------------------

### Enable headerToolbar()

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/2.customization.md

Use headerToolbar() to move search and filter components inline with the page title for a more compact layout. This is compatible with Dropdown and Modal filter layouts.

```php
public function board(Board $board): Board
{
    return $board
        ->searchable(['title', 'description'])
        ->filters([
            SelectFilter::make('priority')->options([...]),
        ])
        ->headerToolbar();
}
```

--------------------------------

### kanban-items-loaded

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/4.api-reference.md

Event dispatched after pagination loads additional cards into a column.

```APIDOC
## Event: kanban-items-loaded

### Description
Dispatched after the component loads more cards via pagination.

### Payload
- **columnId** (string) - The identifier of the column.
- **loadedCount** (int) - The number of items currently loaded.
- **totalCount** (int) - The total number of items available.
- **isFullyLoaded** (bool) - Indicates if all items have been retrieved.
```

--------------------------------

### Include Required CSS

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md

Add the Flowforge view source to your Tailwind CSS configuration to ensure proper styling.

```css
/* Required in your theme CSS file */
@source "../../../../vendor/relaticle/flowforge/resources/views/**/*.blade.php";
```

--------------------------------

### Update Factory Position Service

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/1.getting-started/2.upgrading.md

Replaces the deprecated Rank service with the DecimalPosition service for v4.x.

```php
// Before (v2.x)
use Relaticle\Flowforge\Services\Rank;
$position = Rank::forEmptySequence()->get();

// After (v4.x)
use Relaticle\Flowforge\Services\DecimalPosition;
$position = DecimalPosition::forEmptyColumn();
```

--------------------------------

### Clear view cache

Source: https://github.com/relaticle/flowforge/blob/4.x/docs/content/2.essentials/5.troubleshooting.md

Clear the compiled view files to resolve rendering issues.

```bash
php artisan view:clear
```
Tokens:
Raw