Usuario:ManuelRomero/Laravel/filament

Laravel Filament

• Paquete de laravel creado para generar de forma rápida en el backend:
  • Interfaces de aplicaciones
  • Paneles de control administrativos
  • formularios dinámicos
  • Tablas con filtros, búsquedas Exportación a Excell CSV Paginación y clasificación
  • Gestión de CRUD (Sistema Resource Management)
  • Widgets (gráficos, estadísticas y paneles informativos) y dashboards

https://filamentphp.com/docs

• Enfoco paneles de control

https://filamentphp.com/docs/3.x/panels/getting-started

Personalizando vistas

• PAra acceder a las vistas hay que publicarlas (traerlas de vendor/filament a la carpeta de resources:

php artisan vendor:publish --tag=filament-core-views

• Si no se publicaran se puede copiar manualmente

mkdir -p resources/views/vendor/filament
cp -r vendor/filament/filament/resources/views/* resources/views/vendor/filament/

Cambiar el logo

• Añadir en el provider el logo (mejor no modificarlo en la vista correspondiente)

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
//....
            ->brandLogo(asset('images/logo/logo.png')) // Ruta del logo principal
            ->darkModeBrandLogo(asset('images/logo/logo-dark.png')) // Logo para modo oscuro
            ->brandLogoHeight('5rem'); // Ajustar el tamaño si es necesario

Página principal: La navegación

Personalizar la Navegación Superior en Filament

En **Filament**, puedes personalizar la navegación superior para adaptarla a las necesidades de tu aplicación. A continuación, te presento algunas opciones y configuraciones que puedes aplicar:

1. Usar Navegación Superior (topNavigation())

Por defecto, Filament utiliza una barra lateral para la navegación. Si prefieres mover la navegación al área superior, puedes hacerlo utilizando el método `topNavigation()` en tu configuración:

use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // Otras configuraciones...
        ->topNavigation();
}

Esto trasladará todos los elementos de navegación a la parte superior de tu panel.

2. Personalizar Grupos de Navegación

Puedes organizar los elementos de navegación en grupos personalizados para una mejor estructura:

use Filament\Navigation\NavigationGroup;
use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // Otras configuraciones...
        ->navigationGroups([
            NavigationGroup::make()
                ->label('Tienda')
                ->icon('heroicon-o-shopping-cart'),
            NavigationGroup::make()
                ->label('Blog')
                ->icon('heroicon-o-pencil'),
            NavigationGroup::make()
                ->label('Configuración')
                ->icon('heroicon-o-cog-6-tooth')
                ->collapsed(),
        ]);
}

Esto crea grupos de navegación con íconos y la opción de estar colapsados inicialmente.

3. Añadir Ítems de Navegación Personalizados

Si deseas agregar enlaces personalizados en la navegación superior, puedes hacerlo de la siguiente manera:

use Filament\Navigation\NavigationItem;
use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // Otras configuraciones...
        ->navigationItems([
            NavigationItem::make('Analíticas')
                ->url('https://tusitio.com/analiticas', shouldOpenInNewTab: true)
                ->icon('heroicon-o-presentation-chart-line')
                ->group('Reportes')
                ->sort(3),
            NavigationItem::make('Inicio')
                ->label('Inicio')
                ->url('/')
                ->icon('heroicon-o-home'),
        ]);
}

Esto añade elementos de navegación que pueden enlazar a URLs internas o externas, con la opción de abrir en una nueva pestaña y asignarles íconos.

4. Personalizar el Menú de Usuario

El menú de usuario, ubicado en la esquina superior derecha, es totalmente personalizable. Puedes agregar nuevos ítems al menú de usuario de la siguiente manera:

use Filament\Navigation\MenuItem;
use Filament\Panel;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // Otras configuraciones...
        ->userMenuItems([
            MenuItem::make()
                ->label('Perfil')
                ->url('/perfil')
                ->icon('heroicon-o-user'),
            MenuItem::make()
                ->label('Configuración')
                ->url('/configuracion')
                ->icon('heroicon-o-cog-6-tooth'),
        ]);
}

Esto añade enlaces adicionales en el menú de usuario para acceder rápidamente a secciones como el perfil o la configuración.

5. Usar Render Hooks para Personalizaciones Avanzadas

Si necesitas personalizar aún más la navegación superior, puedes utilizar los "render hooks" que ofrece Filament:

use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
 
public function boot()
{
    FilamentView::registerRenderHook(
        PanelsRenderHook::HEADER_START,
        function () {
            return view('components.custom-header-links');
        }
    );
}

Luego, crea la vista `resources/views/components/custom-header-links.blade.php` con el contenido que deseas agregar al inicio del encabezado.

Limpiar la Caché

Asegúrate de limpiar la caché después de realizar cambios en la configuración para que se reflejen correctamente:

php artisan cache:clear
php artisan view:clear
php artisan config:clear

Resumen

1. Usar `Filament::topNavigation()` para mover la navegación a la parte superior.
2. Agrupar ítems de navegación con `NavigationGroup`.
3. Añadir ítems personalizados usando `NavigationItem`.
4. Personalizar el menú de usuario con `userMenuItems`.
5. Usar render hooks para personalizaciones avanzadas.
6. Limpiar la caché con `php artisan cache:clear` y `php artisan view:clear`.