Unifying Branding Across Filament Panels in Reimpact Platform

Introduction

Maintaining a consistent brand identity across multiple admin panels can be a challenge. In the Reimpact platform, we faced this issue with our eight Filament panels, each serving different modules. The goal was to ensure a unified look and feel while streamlining maintenance and updates.

The Problem

Previously, each Filament panel had its own branding configuration, leading to inconsistencies in color schemes, logos, and layouts. This made it difficult to maintain a cohesive user experience and required repetitive configuration across all panels. Changes to the branding required updating each panel individually, which was time-consuming and prone to errors.

The Solution: A Centralized Branding Trait

We implemented a HasReImpactBranding trait to centralize the branding configurations for all Filament panels. This trait provides a single source of truth for the color palette, logo, layout settings, and module selector. By applying this trait to each panel, we ensure a consistent brand experience across the entire platform.

Here's a simplified example of how the trait might be structured:

namespace App\Traits;

use Filament\Panel;

trait HasReImpactBranding
{
    public static function applyBranding(Panel $panel): Panel
    {
        return $panel
            ->defaultThemeMode('dark')
            ->brandLogo(asset('images/logo-white.webp'))
            ->colors([
                'primary' => '#02FE65',
            ])
            ->maxContentWidth('full')
            ->sidebarCollapsibleOnDesktop();
    }
}

This trait sets the default theme to dark mode, specifies the white logo for dark mode, defines the primary brand color, sets the content width to full, and enables a collapsible sidebar. The applyBranding method is then called within each Filament panel's configuration.

Module Selector with Livewire and Alpine.js

To enable users to switch between modules, we created a Livewire component with an Alpine.js dropdown. This component displays a list of modules the user has access to, based on their permissions. When a user selects a module, the application carries the tenant ID to the new module, ensuring seamless navigation.

The module selector is only visible to super admins. The Alpine.js dropdown provides a user-friendly interface with click-away functionality, transitions, and an active indicator for the currently selected module.

Benefits

• Consistency: Ensures a unified brand experience across all Filament panels.
• Maintainability: Simplifies branding updates by centralizing configurations in a single trait.
• Efficiency: Reduces repetitive configuration and minimizes the risk of errors.
• User Experience: Provides a seamless module selection experience with Livewire and Alpine.js.

Getting Started

1. Create a trait for your common Filament branding configurations.
2. Apply the trait to each of your Filament panels.
3. Implement a Livewire component with Alpine.js for module selection, if needed.
4. Customize the branding settings in the trait to match your brand guidelines.

Key Insight

Centralizing common configurations, such as branding, through traits or similar mechanisms significantly improves maintainability and consistency across your application. This approach allows you to make changes in one place and propagate them automatically to all relevant components.