Laravel Livewire Panel Laravel Package

## Getting Started

### Minimal Steps to First Use
1. **Installation**:
   ```bash
   composer require alp-develop/laravel-livewire-panel
   php artisan panel:install --defaults

• This auto-configures with default settings (Bootstrap 5, admin prefix, Spatie gate driver).

2. Create a Livewire Component:

   php artisan make:livewire Dashboard
   

   Update the generated component (app/Livewire/Dashboard.php):

   use Livewire\Attributes\Layout;
   #[Layout('panel::layouts.app')]
   class Dashboard extends Component { ... }
   

3. Register the Route:

   // routes/web.php
   use AlpDevelop\LivewirePanel\Http\Middleware\PanelAuthMiddleware;
   
   Route::middleware(['web', PanelAuthMiddleware::class])
        ->prefix('admin')
        ->name('panel.admin.')
        ->group(function () {
            Route::get('/', \App\Livewire\Dashboard::class)->name('home');
        });
   

4. Access the Panel: Visit /admin/login to authenticate, then /admin to see your dashboard wrapped in the admin panel layout.

First Use Case: Quick Dashboard

• Use the built-in StatsCard widget to display metrics:

  // app/Livewire/Dashboard.php
  use AlpDevelop\LivewirePanel\Widgets\StatsCard;
  
  public function render()
  {
      return view('livewire.dashboard', [
          'widgets' => [
              StatsCard::make()
                  ->title('Users')
                  ->value('1,234')
                  ->icon('users')
                  ->color('primary'),
          ],
      ]);
  }
  

• Visit /admin to see the widget rendered in the dashboard grid.

Implementation Patterns

Core Workflows

1. Modular Development

• Modules: Create a custom module (e.g., Products) with:

  php artisan panel:make-module Products
  

  • Generates:
    • app/Livewire/Panel/Modules/Products/ProductsModule.php
    • resources/views/panel/modules/products/...
  • Register in config/panel.php under modules.admin.
• Widgets: Add widgets to modules:

  // ProductsModule.php
  public function widgets(): array
  {
      return [
          \App\Livewire\Panel\Widgets\ProductStats::class,
      ];
  }
  

2. Navigation Management

• Config Mode: Define navigation in config/panel.php:

  'navigation' => [
      'admin' => [
          'items' => [
              ['label' => 'Dashboard', 'route' => 'panel.admin.home'],
              ['label' => 'Products', 'route' => 'panel.admin.products.index'],
          ],
      ],
  ],
  

• Modules Mode: Auto-generate navigation from module metadata:

  // ProductsModule.php
  public function navigation(): array
  {
      return [
          'label' => 'Products',
          'icon' => 'box',
          'route' => 'panel.admin.products.index',
          'children' => [
              ['label' => 'List', 'route' => 'panel.admin.products.index'],
              ['label' => 'Create', 'route' => 'panel.admin.products.create'],
          ],
      ];
  }
  

3. Theming and Customization

• CSS Variables: Override theme variables in resources/css/panel.css:

  :root {
      --panel-primary: #6366f1;
      --panel-sidebar-bg: #1f2937;
  }
  

• Dark Mode: Toggle via navbar component:

  <x-panel::dark-mode-toggle />
  

• Layouts: Extend base layouts (e.g., resources/views/panel/layouts/app.blade.php):

  @extends('panel::layouts.app')
  @section('sidebar')
      @parent
      <div class="p-4">
          <x-panel::card>
              Custom Sidebar Content
          </x-panel::card>
      </div>
  @endsection
  

4. Authentication and Authorization

• Gates: Use Spatie or Laravel gates:

  // config/panel.php
  'gates' => [
      'admin' => [
          'driver' => 'spatie',
          'model' => \App\Models\User::class,
      ],
  ],
  

• Route Middleware: Protect routes with PanelAuthMiddleware:

  Route::middleware([PanelAuthMiddleware::class])->group(...);
  

• Gate Checks: In Livewire components:

  use AlpDevelop\LivewirePanel\Facades\Panel;
  
  public function mount()
  {
      $this->authorize('view-dashboard', Panel::current());
  }
  

5. Plugins and Extensions

• Create a Plugin:

  php artisan panel:make-plugin Analytics
  

  • Generates:
    • app/Plugins/Panel/AnalyticsPlugin.php
    • resources/views/panel/plugins/analytics/...
  • Register in config/panel.php under plugins.
• Add Navigation:

  // AnalyticsPlugin.php
  public function registerNavigation(): array
  {
      return [
          'label' => 'Analytics',
          'icon' => 'chart-bar',
          'route' => 'panel.admin.analytics',
      ];
  }
  

• Add Widgets:

  public function registerWidgets(): array
  {
      return [
          \App\Livewire\Panel\Widgets\AnalyticsChart::class,
      ];
  }
  

6. Search Functionality

• Global Search: Enable with Ctrl+K (default). Add providers:

  // config/panel.php
  'search' => [
      'admin' => [
          'providers' => [
              \App\Providers\Panel\ProductSearchProvider::class,
          ],
      ],
  ],
  

• Custom Provider:

  use AlpDevelop\LivewirePanel\Contracts\SearchProviderInterface;
  
  class ProductSearchProvider implements SearchProviderInterface
  {
      public function search(string $query): array
      {
          return Product::where('name', 'like', "%{$query}%")
              ->limit(15)
              ->get()
              ->map(fn ($product) => [
                  'label' => $product->name,
                  'route' => route('panel.admin.products.show', $product),
              ]);
      }
  }
  

7. Notifications

• Polling Notifications: Enable in config/panel.php:

  'notifications' => [
      'admin' => [
          'polling' => true,
          'providers' => [
              \App\Providers\Panel\UnreadMessagesProvider::class,
          ],
      ],
  ],
  

• Custom Provider:

  use AlpDevelop\LivewirePanel\Contracts\NotificationProviderInterface;
  
  class UnreadMessagesProvider implements NotificationProviderInterface
  {
      public function count(): int
      {
          return auth()->user()->unreadNotifications->count();
      }
  
      public function items(): array
      {
          return auth()->user()->unreadNotifications->take(10)->map(...);
      }
  }
  

Integration Tips

1. Multi-Panel Support

• Configure multiple panels in config/panel.php:

  'panels' => [
      'admin' => ['prefix' => 'admin', 'theme' => 'bootstrap5'],
      'shop' => ['prefix' => 'shop', 'theme' => 'tailwind'],
  ],
  

• Use Panel::for('shop') to switch contexts in code.

2. Livewire Component Integration

• Layouts: Always use #[Layout('panel::layouts.app')] for panel pages.
• Partial Layouts: Extend panel sections (e.g., sidebar, navbar) via Blade @section directives.
• Widgets: Register custom widgets:

  // app/Providers/PanelServiceProvider.php
  public function boot()
  {
      Panel::widgets()->add(
          \App\Livewire\Panel\Widgets\CustomWidget::class
      );
  }
  

3. Asset Management

• CDN Libraries: Enable in config/panel.php:

  'cdn' => [
      'chartjs' => true,
      'select2' => true,
  ],
  

• Custom Assets: Publish assets and override:

  php artisan vendor:publish --tag=panel-assets
  

4. Localization

• Language Switcher: Use the built-in component:

  <x-panel::locale-selector />
  

• Translations: Add custom keys to resources/lang/{locale}/panel.php:

  return [
      'custom_key' => 'Custom Value',
  ];