Widgets en el Panel

Un widget es un componente reutilizable que se muestra dentro del panel de administración.
Sirve para aportar información rápida, estadísticas, accesos directos o mensajes de bienvenida al usuario.

En Filament existen varios tipos de widgets, por ejemplo:

Stats Overview → muestra métricas y estadísticas rápidas.
Charts → gráficos para visualizar datos.
Tables → listados o tablas interactivas.
Custom Widgets → creados por el desarrollador con contenido libre.

Una idea muy útil 👌 es añadir un widget personalizado que muestre un texto de introducción o presentación en el panel principal de Filament.
Además, podemos aprovechar las traducciones de Laravel (__('...')) para hacerlo multilenguaje.

En la terminal ejecutamos:

php artisan make:filament-widget WelcomeWidget

Entonces el propio entorno va a realizar unas preguntas para crear el widget

Esto generará los siguientes archivos:

El controlador: app/Filament/Widgets/WelcomeWidget.php
La vista ** /resources/views**

Ejemplo de implementación:

<?php

namespace App\Filament\Widgets;

use Filament\Widgets\Widget;

class WelcomeWidget extends Widget
{
    protected static string $view = 'filament.widgets.welcome-widget';

    // Lo colocamos en la parte superior del dashboard
    protected int|string|array $columnSpan = 'full';

    protected static ?int $sort = -2; // se renderiza antes de las estadísticas
}

Paso 2. Crear la vista Blade multilenguaje

Creamos el archivo:

resources/views/filament/widgets/welcome-widget.blade.php

<x-filament-widgets::widget>
    <x-filament::section>
        <div class="p-6 text-center">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">
                👋 {{ __('dashboard.welcome_title') }}
            </h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">
                {!! __('dashboard.welcome_message') !!}
            </p>
        </div>
    </x-filament::section>
</x-filament-widgets::widget>

Paso 3. Añadir las traducciones

Creamos las claves en los archivos de idioma, por ejemplo en:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<?php
return [
    'welcome_title' => 'Welcome to the Admin Panel',
    'welcome_message' => 'This dashboard lets you manage <strong>teachers, students, projects, centers, enrollments, and cycles</strong>. Use the navigation on the left to get started.',
];

lang/es/dashboard.php

<?php
return [
    'welcome_title' => 'Bienvenido al Panel de Administración',
    'welcome_message' => 'Este panel te permite gestionar <strong>profesores, estudiantes, proyectos, centros, matrículas y ciclos</strong>. Usa la navegación de la izquierda para empezar.',
];

En tu página de Dashboard personalizada (por ejemplo, AdminHome), añade el widget:

public function getWidgets(): array
{
    return [
        \App\Filament\Widgets\WelcomeWidget::class,
        \App\Filament\Widgets\StatsOverview::class,
    ];
}

Resultado

Al abrir el panel de administración, verás en la parte superior una tarjeta elegante de bienvenida en el idioma actual del usuario,
seguida de las estadísticas y otros widgets que hayas configurado.

Widgets en el Panel

Qué es un widget en Filament

Tipos de widget que puedo usar

Crear un widget de presentación multilenguaje en Filament

Paso 1. Crear la clase del widget

Paso 2. Crear la vista Blade multilenguaje

Paso 3. Añadir las traducciones

Paso 4. Registrar el widget en tu Dashboard

Resultado