Livewire Component in Edit Form Sidebar

This project showcases how you can build a support ticket management system with a real-time status workflow sidebar embedded directly inside a Filament resource edit page using Livewire.

Within this system, you will find:

• Ticket creation and management
• Status workflow enforcement with allowed transition rules
• Real-time status transitions from a sticky sidebar component
• Full audit trail of every status change with user attribution
• Priority levels with color-coded badges

How to install

• Clone the repository with git clone
• Copy the .env.example file to .env and edit database credentials there
• Run composer install
• Run php artisan key:generate
• Run php artisan storage:link
• Run php artisan migrate --seed (it has some seeded data for your testing)
• Run npm ci and npm run build
• That's it: launch the /admin and log in with credentials [email protected] and password to manage companies.

Screenshots

How It Works

The project uses a standard Filament TicketResource for CRUD. The interesting part is the status workflow — each ticket moves through a defined set of statuses, and transitions are enforced by the TicketStatus enum. The sidebar Livewire component sits alongside the edit form, handling all status changes in real time.

1. Status Workflow — Enum-Driven Transition Rules

The TicketStatus enum defines which transitions are valid from each state. It implements HasLabel and HasColor so Filament renders colored badges automatically.

app/Enums/TicketStatus.php

enum TicketStatus: string implements HasColor, HasLabel
{
    case Open = 'open';
    case InProgress = 'in_progress';
    case AwaitingReply = 'awaiting_reply';
    case Resolved = 'resolved';
    case Closed = 'closed';
    case Cancelled = 'cancelled';
 
    public function nextAllowedStatuses(): array
    {
        return match ($this) {
            self::Open => [self::InProgress, self::Cancelled],
            self::InProgress => [self::AwaitingReply, self::Resolved, self::Cancelled],
            self::AwaitingReply => [self::InProgress, self::Resolved, self::Cancelled],
            self::Resolved => [self::Closed],
            self::Closed, self::Cancelled => [],
        };
    }
}

The key points:

• Each status declares exactly which statuses it can move to — invalid transitions are rejected before anything is persisted
• Closed and Cancelled return empty arrays, making them true terminal states with no further actions available
• getColor() returns Filament-compatible color strings (blue, amber, purple, etc.) reused by both the table badge columns and the sidebar status card

2. The TicketSidebar Livewire Component

The sidebar is a Livewire component embedded directly in the Filament edit page. A single transitionTo() method validates the transition, writes the audit record, and updates the ticket.