Tabbed Laravel Package

Technical Evaluation

Architecture Fit

• FilamentPHP v5 Native Integration: The package is purpose-built for FilamentPHP v5, leveraging its resource system, Livewire components, and Blade views. This ensures deep integration with Filament’s architecture (e.g., resource pages, table actions, and panel plugins), reducing friction for adoption.
• Modular Design: The plugin follows Filament’s plugin pattern (PanelProvider registration), making it easy to enable/disable without modifying core application logic. The separation of concerns (e.g., OpenInTabAction, TabbedPlugin) aligns with Laravel/PHP’s dependency injection and service container principles.
• State Management: Uses localStorage for persistence across page navigations, which is a pragmatic choice for SPAs but may require adjustments for multi-tab browser sessions or SSO environments.

Integration Feasibility

• Low-Coupling: The package injects itself into Filament’s existing workflows (e.g., table actions, resource pages) without requiring changes to core business logic. The HasTabbedActions trait and OpenInTabAction provide multiple entry points for adoption.
• Backward Compatibility: Targets FilamentPHP v5, ensuring compatibility with Laravel 10/11. However, the package’s reliance on Filament-specific features (e.g., Resource, Table, Livewire) limits its utility outside Filament ecosystems.
• Customization Hooks: Offers extensive configuration via fluent methods (e.g., TabbedPlugin::make()->defaultPage('view')) and per-action options (e.g., tabName(), hoverCardContent()), allowing alignment with existing UI/UX patterns.

Technical Risk

• Filament Dependency: The package is exclusively for FilamentPHP v5. Adoption in non-Filament Laravel applications would require significant refactoring (e.g., replacing Filament’s resource system with custom routes/controllers).
• State Synchronization: localStorage persistence may cause issues in:
  • Multi-tab browser sessions (e.g., conflicting tab states).
  • SSO or headless environments (where localStorage is unreliable).
  • Shared devices (e.g., kiosks) where user-specific storage isn’t desired.
• Performance Overhead:
  • Lazy loading (lazyLoad()) and inactive tab destruction (destroyInactive()) mitigate memory usage, but unoptimized implementations could degrade performance in high-concurrency panels.
  • Drag-and-drop and keyboard shortcuts add JavaScript complexity, requiring testing for edge cases (e.g., touch devices, screen readers).
• Security:
  • Hover card content supports raw HTML (x-html), risking XSS if user-provided data isn’t sanitized (mitigated by the package’s warning but still a responsibility of the integrator).
  • Permissions logic (e.g., canClose(), canPin()) must be carefully implemented to avoid privilege escalation.

Key Questions

1. Filament Ecosystem Lock-In:

   • Is the application exclusively built on FilamentPHP v5? If not, what’s the migration path for non-Filament components?
   • Are there plans to extend this to other admin panels (e.g., Nova, Backpack) or vanilla Laravel?

2. State Management:

   • How will localStorage persistence interact with:
     • Multi-user sessions (e.g., shared devices)?
     • Headless or API-driven workflows?
     • SSO or token-based authentication?
   • Is server-side session storage (e.g., Redis) a viable alternative?

3. Performance:

   • What’s the expected scale of concurrent tabs per user? Are there benchmarks for memory/CPU usage with destroyInactive() enabled?
   • How will lazy loading affect initial page load times for resource-heavy tabs (e.g., large datasets)?

4. UX/Accessibility:

   • Have keyboard shortcuts and drag-and-drop been tested with screen readers and assistive technologies?
   • How does the package handle focus management (e.g., tab switching, modal confirmations)?

5. Maintenance:

   • The package is actively maintained (last release: 2026-05-22), but what’s the support model for Filament v6+ compatibility?
   • Are there plans to extract core tab logic (e.g., state management, drag-and-drop) into a more generic Laravel package?

6. Customization:

   • How intrusive are CSS overrides for theming? Can the tab bar be styled to match existing design systems?
   • Is there a way to extend the plugin’s functionality (e.g., custom tab types, third-party integrations)?

Integration Approach

Stack Fit

• Primary Fit: FilamentPHP v5 applications, especially those with:
  • Complex workflows requiring multi-step record interactions (e.g., tickets, support cases).
  • High user engagement (e.g., dashboards, analytics) where tabbed navigation improves productivity.
  • Custom resource pages needing state preservation (e.g., form previews, wizards).
• Secondary Fit:
  • Laravel applications using Filament for admin panels but with non-Filament frontend components (e.g., Vue/React SPAs). The package’s JS events (tabbed:open, tabbed:close) could bridge Filament and frontend state.
  • Projects already using Filament’s Livewire components and seeking to standardize tabbed navigation.

Migration Path

1. Pilot Phase:

   • Scope: Start with a single resource (e.g., UserResource) to test integration, performance, and UX.
   • Implementation:
     • Add HasTabbedActions trait or OpenInTabAction to the resource’s table.
     • Configure plugin in PanelProvider with default settings.
     • Monitor localStorage usage and tab switching behavior.
   • Validation:
     • Verify state preservation across page reloads.
     • Test edge cases (e.g., unsaved changes, nested resources).

2. Gradual Rollout:

   • Phase 1: Enable tabs for read-heavy resources (e.g., View pages for tickets, orders).
   • Phase 2: Extend to write-heavy resources (e.g., Edit/Create pages) with confirmOnClose() and closeOnSave().
   • Phase 3: Customize tab labels, colors, and hover cards for critical workflows (e.g., pinned tabs for dashboards).

3. Advanced Customization:

   • Override default tab bar position (e.g., PanelsRenderHook::PAGE_START) for full-width layouts.
   • Implement openFor() for related records (e.g., "View contact" in a ticket’s infolist).
   • Extend with JavaScript events for frontend integrations (e.g., syncing tab state with a Vue store).

Compatibility

• FilamentPHP v5: Fully supported. Tested with Filament’s latest features (e.g., Livewire 3, Blade components).
• Laravel Versions: Officially supports Laravel 10/11. May require adjustments for older versions (e.g., Livewire 2).
• Browser Support: Relies on modern JS features (e.g., CustomEvent, localStorage). Test for:
  • IE11 (unsupported; use polyfills if required).
  • Mobile browsers (touch interactions, viewport resizing).
• Third-Party Conflicts:
  • CSS: The package includes its own styles. Ensure no conflicts with existing Filament themes (e.g., filament.css).
  • JS: Keyboard shortcuts and drag-and-drop may conflict with other plugins. Test with:
    • Filament’s built-in shortcuts (e.g., Ctrl+K for search).
    • Custom JS libraries (e.g., SortableJS, Alpine.js).

Sequencing

1. Prerequisites:

   • Ensure FilamentPHP v5 is installed and configured.
   • Verify filament/support and filament/forms are up to date (required for Color and Actions).
   • Set up a PanelProvider if not already present.

2. Installation Order:

   composer require jibaymcs/tabbed
   

   • Add plugin to PanelProvider before registering resources to ensure tab bar rendering hooks fire correctly.

3. Resource Integration:

   • For automatic adoption, add use HasTabbedActions to resources.
   • For manual control, add OpenInTabAction to table configurations after other actions (to avoid UI clutter).

4. Testing:

   • Unit Tests: Mock TabbedPlugin and OpenInTabAction to verify permissions and record resolution.
   • E2E Tests: Test tab lifecycle (open/close/switch) with:
     • Unsaved changes (dirty state detection).
     • Related record navigation (openFor).
     • Keyboard shortcuts and drag-and-drop.

5. Deployment:

   • Staging: Test with a subset of users to validate performance and UX.
   • Production: Roll out with feature flags or gradual feature release (e.g., enable tabs for specific roles first).

Operational Impact

Maintenance

• Plugin Updates:
  • Monitor the [GitHub Releases](https://github.com/Jib