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):
- PHP version: Pastikan minimal PHP 8.1. Filament v3 memerlukan PHP 8.1+.
- Build assets: Jalankan
npm run buildlokal, lalu upload folderpublic/build. - Storage link: Buat symlink
public/storagekestorage/app/publicuntuk upload gambar. - 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:cachedanroute:cachedi 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.