Filament Progress Column

Columna de barra de progreso para tablas e infolists de Filament v4 con colores dinámicos y personalización completa.

Instalación

composer require cursosdesarrolloweb/filament-progress-column

Después de instalar, publica los assets:

php artisan filament:assets

Uso Rápido

Añade una columna de progreso en tu tabla:

use CursosDesarrolloWeb\ProgressColumn\Tables\Columns\ProgressColumn;

ProgressColumn::make('progress')
    ->progressMax(100)

Columna de Tabla

use CursosDesarrolloWeb\ProgressColumn\Tables\Columns\ProgressColumn;

// Uso básico - barra de 0 a 100
ProgressColumn::make('progress')
    ->progressMax(100)

// Con colores por umbral
ProgressColumn::make('completion')
    ->progressMax(100)
    ->progressColors([
        'danger' => 30,    // 0-30%: rojo
        'warning' => 70,   // 31-70%: amarillo  
        'success' => 100,  // 71-100%: verde
    ])

// Mostrar valor numérico
ProgressColumn::make('tasks_done')
    ->progressMax(50)
    ->progressShowValue()

// Formato de valor: porcentaje o fracción
ProgressColumn::make('score')
    ->progressMax(100)
    ->progressShowValue()
    ->progressFormat('percent')  // Muestra "75%"

ProgressColumn::make('items')
    ->progressMax(200)
    ->progressShowValue()
    ->progressFormat('fraction') // Muestra "150/200"

// Color fijo (sin umbrales)
ProgressColumn::make('level')
    ->progressMax(10)
    ->progressColor('primary')

// Tamaños: sm, md, lg
ProgressColumn::make('progress')
    ->progressHeight('lg')

// Barras rayadas con animación
ProgressColumn::make('uploading')
    ->progressMax(100)
    ->progressStriped()
    ->progressAnimated()

Entry para Infolist

use CursosDesarrolloWeb\ProgressColumn\Infolists\Components\ProgressEntry;

ProgressEntry::make('profile_completion')
    ->progressMax(100)
    ->progressColors([
        'danger' => 30,
        'warning' => 70,
        'success' => 100,
    ])
    ->progressShowValue()
    ->progressFormat('percent')
    ->progressHeight('md')

Métodos Disponibles

Valor y Cálculo

Colores

Apariencia

Colores por Umbral

Define umbrales ascendentes. El color se aplica cuando el porcentaje es menor o igual al umbral:

ProgressColumn::make('battery')
    ->progressMax(100)
    ->progressColors([
        'danger' => 20,    // 0-20%: rojo (batería crítica)
        'warning' => 50,   // 21-50%: amarillo (batería baja)
        'success' => 100,  // 51-100%: verde (batería OK)
    ])

Colores Disponibles

Ejemplos de Uso

Completitud de Perfil

ProgressColumn::make('profile_completion')
    ->label('Perfil')
    ->progressMax(100)
    ->progressColors([
        'danger' => 30,
        'warning' => 70,
        'success' => 100,
    ])
    ->progressShowValue()
    ->progressFormat('percent')

Tareas Completadas

ProgressColumn::make('completed_tasks')
    ->label('Tareas')
    ->progressMax(fn ($record) => $record->total_tasks)
    ->progressShowValue()
    ->progressFormat('fraction')
    ->progressColor('info')

Barra de Carga

ProgressColumn::make('upload_progress')
    ->label('Subida')
    ->progressMax(100)
    ->progressColor('primary')
    ->progressStriped()
    ->progressAnimated()
    ->progressShowValue()

Stock de Producto

ProgressColumn::make('stock')
    ->label('Stock')
    ->progressMax(fn ($record) => $record->max_stock)
    ->progressColors([
        'danger' => 10,    // Stock crítico
        'warning' => 30,   // Stock bajo
        'success' => 100,  // Stock OK
    ])
    ->progressShowValue()
    ->progressFormat('fraction')

Requisitos

• PHP 8.2+
• Laravel 11+
• Filament 4.x|5.x

Licencia

Propietario - Solo para suscriptores de CursosDesarrolloWeb.