Kembali ke Blog
Insight

Laravel Filament 2026: Admin Panel UMKM dalam 30 Menit

14 Feb 2026 Idiarsosimbang 7 menit baca
Laravel Filament 2026: Admin Panel UMKM dalam 30 Menit

Filament 3 menjadi admin panel builder #1 di ekosistem Laravel. Pelajari cara membangun dashboard UMKM lengkap dengan CRUD, chart penjualan, dan role management hanya dalam 30 menit.


Di tahun 2026, Filament sudah menjadi standar de facto untuk membangun admin panel di ekosistem Laravel. Dengan Filament v4, developer UMKM Indonesia bisa membuat dashboard administrasi yang lengkap dalam waktu kurang dari 30 menit — tanpa menulis JavaScript apapun. Artikel ini memandu Anda membangun admin panel untuk bisnis UMKM dari nol.

Mengapa Filament untuk UMKM?

UMKM Indonesia punya kebutuhan yang unik: budget terbatas, tim kecil (sering kali 1 developer), dan perubahan requirement yang cepat. Filament menjawab semua tantangan ini:

  • Zero JavaScript: Semua UI dibangun dengan PHP. Tidak perlu belajar React, Vue, atau Angular.
  • TALL Stack: Tailwind CSS, Alpine.js, Laravel, Livewire — semua sudah terintegrasi dan tinggal pakai.
  • Rich Components: Form builder, table builder, notification system, widget dashboard — semua sudah tersedia out-of-the-box.
  • Plugin Ecosystem: 200+ plugin komunitas untuk fitur seperti audit log, media library, multi-tenancy, dan impor/ekspor Excel.
  • Responsive secara default: Semua komponen sudah mobile-friendly tanpa konfigurasi tambahan.

Setup Awal: 5 Menit

Mulai dari instalasi Laravel dan Filament:


# Buat proyek Laravel baru
composer create-project laravel/laravel umkm-panel

# Install Filament
cd umkm-panel
composer require filament/filament:"^3.0"

# Setup database (edit .env dulu)
php artisan migrate

# Buat admin user
php artisan make:filament-user

Buka http://localhost/admin — dashboard sudah siap. Seluruh proses ini memakan waktu kurang dari 5 menit.

Membuat CRUD Resource: 10 Menit

Misalnya Anda membangun panel untuk toko online UMKM. Buat resource untuk produk:

1. Buat Model dan Migration


php artisan make:model Product -m

// Migration
Schema::create('products', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('sku')->unique();
    $table->text('description')->nullable();
    $table->decimal('price', 12, 2);
    $table->integer('stock')->default(0);
    $table->string('category');
    $table->string('image')->nullable();
    $table->boolean('is_active')->default(true);
    $table->timestamps();
});

2. Generate Filament Resource


php artisan make:filament-resource Product --generate

Perintah ini otomatis membuat form, table, dan halaman CRUD berdasarkan kolom-kolom di migration. Anda sudah punya admin panel produk yang berfungsi penuh — list, create, edit, delete — dalam 1 perintah.

3. Kustomisasi Form

Filament form builder sangat powerful. Berikut contoh form produk yang kaya fitur:


public static function form(Form $form): Form
{
    return $form->schema([
        Forms\Components\Section::make('Informasi Produk')
            ->schema([
                Forms\Components\TextInput::make('name')
                    ->required()
                    ->maxLength(255)
                    ->live(onBlur: true)
                    ->afterStateUpdated(fn ($set, $state) => 
                        $set('sku', Str::slug($state))),
                Forms\Components\TextInput::make('sku')
                    ->required()
                    ->unique(ignoreRecord: true),
                Forms\Components\RichEditor::make('description')
                    ->columnSpanFull(),
            ])->columns(2),

        Forms\Components\Section::make('Harga & Stok')
            ->schema([
                Forms\Components\TextInput::make('price')
                    ->numeric()
                    ->prefix('Rp')
                    ->required(),
                Forms\Components\TextInput::make('stock')
                    ->numeric()
                    ->minValue(0),
                Forms\Components\Select::make('category')
                    ->options([
                        'elektronik' => 'Elektronik',
                        'fashion' => 'Fashion',
                        'makanan' => 'Makanan & Minuman',
                        'kesehatan' => 'Kesehatan',
                    ])
                    ->searchable(),
            ])->columns(3),

        Forms\Components\Section::make('Media')
            ->schema([
                Forms\Components\FileUpload::make('image')
                    ->image()
                    ->imageResizeMode('cover')
                    ->imageCropAspectRatio('1:1')
                    ->imageResizeTargetWidth('500')
                    ->imageResizeTargetHeight('500')
                    ->directory('products'),
                Forms\Components\Toggle::make('is_active')
                    ->label('Aktif')
                    ->default(true),
            ]),
    ]);
}

Dashboard Widgets: 5 Menit

Buat dashboard informatif untuk pemilik UMKM:


php artisan make:filament-widget StatsOverview --stats-overview

Kustomisasi widget untuk menampilkan metrik bisnis penting:


protected function getStats(): array
{
    return [
        Stat::make('Total Produk', Product::count())
            ->icon('heroicon-o-cube')
            ->color('primary'),
        Stat::make('Pendapatan Bulan Ini', 
            'Rp ' . number_format(Order::thisMonth()->sum('total')))
            ->icon('heroicon-o-banknotes')
            ->description('Naik 12% dari bulan lalu')
            ->descriptionIcon('heroicon-m-arrow-trending-up')
            ->color('success'),
        Stat::make('Pesanan Pending', 
            Order::where('status', 'pending')->count())
            ->icon('heroicon-o-clock')
            ->color('warning'),
        Stat::make('Stok Rendah', 
            Product::where('stock', '<', 10)->count())
            ->icon('heroicon-o-exclamation-triangle')
            ->color('danger'),
    ];
}

Fitur UMKM yang Sering Dibutuhkan

Berdasarkan pengalaman membangun panel admin untuk 20+ UMKM, berikut fitur yang paling sering diminta dan cara implementasinya di Filament:

1. Manajemen Pesanan dengan Status

Gunakan Select component dengan warna untuk visualisasi status order. Tambahkan bulk action untuk update status banyak pesanan sekaligus. Integrasikan dengan WhatsApp API untuk notifikasi otomatis ke buyer saat status berubah.

2. Laporan Penjualan

Gunakan Chart widget dengan ApexCharts (sudah built-in di Filament). Buat line chart untuk tren penjualan harian/mingguan, pie chart untuk distribusi kategori, dan bar chart untuk top products. Tambahkan filter date range untuk fleksibilitas analisis.

3. Impor/Ekspor Data

Install plugin filament/actions untuk menambahkan tombol ekspor ke Excel/CSV. Untuk impor, gunakan pxlrbt/filament-excel plugin yang mendukung impor dari file Excel dengan mapping kolom otomatis. Sangat berguna saat migrasi dari sistem manual (spreadsheet) ke aplikasi.

4. Multi-Tenant (Multi-Cabang)

Untuk UMKM dengan beberapa cabang, Filament mendukung multi-tenancy out-of-the-box. Setiap cabang punya data terpisah, tapi pemilik bisa switch antar cabang. Implementasi cukup dengan menambahkan HasTenants interface di class Panel.

5. User Roles & Permissions

Integrasikan dengan Spatie Permission untuk membuat role-based access. Contoh role yang umum untuk UMKM: Owner (akses penuh), Manager (CRUD produk + pesanan), Kasir (hanya buat pesanan baru), dan Viewer (lihat laporan saja).

Deployment Tips

Untuk deploy panel Filament di shared hosting Indonesia (Rumahweb, Niagahoster, Domainesia):

  1. PHP version: Pastikan minimal PHP 8.1. Filament v3 memerlukan PHP 8.1+.
  2. Build assets: Jalankan npm run build lokal, lalu upload folder public/build.
  3. Storage link: Buat symlink public/storage ke storage/app/public untuk upload gambar.
  4. Queue worker: Jika hosting mendukung cron, setup queue worker via scheduler. Jika tidak, gunakan sync driver.

Performance di Shared Hosting

Filament cukup ringan untuk shared hosting karena rendering dilakukan server-side oleh Livewire. Tips optimasi:

  • Enable OPcache di PHP configuration
  • Gunakan php artisan config:cache dan route:cache di production
  • Optimize autoloader: composer install --optimize-autoloader --no-dev
  • Gunakan CDN (Cloudflare free) untuk static assets

Filament adalah tool yang tepat untuk developer Indonesia yang melayani klien UMKM. Dengan investasi waktu 30 menit untuk belajar dasarnya, Anda bisa menghasilkan admin panel yang biasanya memakan waktu berminggu-minggu jika dibangun dari scratch. Ini bukan shortcut — ini adalah productivity multiplier yang memungkinkan Anda fokus pada business logic yang unik untuk setiap klien.

Bagikan artikel ini
Chat Kami