Create Admin Panel with Laravel Backpack - Part 3

1 Customize the Dashboard

Create a custom dashboard in `resources/views/admin/dashboard.blade.php`:

@extends(backpack_view('blank'))
@section('content')

    

        

            

                
{{ $totalUsers }}
                
Total Users
            
        
    
    

        

            

                
{{ $totalProducts }}
                
Total Products
            
        
    
    

        

            

                
{{ $totalOrders }}
                
Total Orders
            
        
    
    

        

            

                
{{ $totalRevenue }}
                
Total Revenue
            
        
    


    

        

            
Recent Orders
            

                
                        @foreach($recentOrders as $order)
                            
                        @endforeach
                    

                    

                        

                            
Order ID
                            
Customer
                            
Amount
                            
Status
                        
                    
                    

                                
{{ $order->id }}
                                
{{ $order->customer->name }}
                                
{{ $order->amount }}
                                
{{ $order->status }}
                            
                
            
        
    
    

        

            
Top Products
            

                
                        @foreach($topProducts as $product)
                            
                        @endforeach
                    

                    

                        

                            
Product
                            
Sales
                            
Revenue
                        
                    
                    

                                
{{ $product->name }}
                                
{{ $product->sales_count }}
                                
{{ $product->revenue }}
                            
                
            
        
    

@endsection

2 Add Custom Widgets

Create a custom widget in `app/Widgets/StatsWidget.php`:

namespace App\Widgets;
use Backpack\CRUD\app\Library\Widget;
use Illuminate\Support\Facades\DB;

class StatsWidget extends Widget
{
    protected $view = 'widgets.stats';
    public function getStats()
    {
        return [
            'total_users' => \App\Models\User::count(),
            'total_products' => \App\Models\Product::count(),
            'total_orders' => \App\Models\Order::count(),
            'total_revenue' => \App\Models\Order::sum('amount'),
        ];
    }
}

Create the widget view in `resources/views/widgets/stats.blade.php`:

@php
$stats = $this->getStats();
@endphp

    @foreach($stats as $key => $value)
        

            

                

                    
{{ $value }}
                    
{{ ucwords(str_replace('_', ' ', $key)) }}
                
            
        
    @endforeach

3 Customize the Theme

Create a custom theme in `resources/views/vendor/backpack/theme-tabler/`:

// Custom CSS
@import 'custom.css';
// Custom JavaScript
@import 'custom.js';
// Custom layouts
@import 'layouts/custom.blade.php';

Add custom styles in `public/css/custom.css`:

/* Custom styles */
.card {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar-brand {
    font-weight: bold;
}
.sidebar {
    background-color: #f8f9fa;
}
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}
.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

4 Add Custom Actions

Create a custom action in your CRUD controller:

use Backpack\CRUD\app\Http\Controllers\Operations\BulkAction;

class ProductCrudController extends CrudController
{
    use BulkAction;
    public function setup()
    {
        parent::setup();
        CRUD::addButton('top', 'export', 'view', 'crud::buttons.export', 'beginning');
    }
    public function export()
    {
        $products = Product::all();
        return Excel::download(new ProductsExport($products), 'products.xlsx');
    }
    protected function setupBulkActions()
    {
        CRUD::addBulkAction([
            'name' => 'export',
            'label' => 'Export Selected',
            'action' => function($entries) {
                return Excel::download(new ProductsExport($entries), 'selected-products.xlsx');
            }
        ]);
    }
}

5 Add Custom Validations

Create custom validation rules in your CRUD:

protected function setupCreateOperation()
{
    CRUD::setValidation([
        'name' => 'required|min:3',
        'price' => 'required|numeric|min:0',
        'sku' => [
            'required',
            'unique:products,sku',
            function ($attribute, $value, $fail) {
                if (!preg_match('/^[A-Z0-9-]+$/', $value)) {
                    $fail('The SKU must contain only uppercase letters, numbers, and hyphens.');
                }
            }
        ],
        'category_id' => 'required|exists:categories,id',
        'image' => 'required|image|max:2048'
    ]);
    CRUD::field('name');
    CRUD::field('price');
    CRUD::field('sku');
    CRUD::field('category_id');
    CRUD::field('image');
}