MBGDash
Bootstrap 5 HTML Theme untuk Manajemen Dapur — platform SaaS operasional dapur produksi dan distribusi makanan bergizi ke sekolah-sekolah.
Daftar Isi
Gambaran Umum
MBGDash adalah HTML theme siap-pakai sebagai referensi UI untuk project Laravel 13 + Livewire 3. Theme ini mencakup seluruh alur kerja operasional dapur mulai dari manajemen data master, inventori bahan baku, proses produksi, distribusi ke sekolah, hingga laporan dan pengaturan sistem.
Karakteristik:
- Palet warna navy biru + gold yang elegan
- Sidebar navigation data-driven — edit satu tempat, semua halaman update otomatis
- Light/Dark mode dengan toggle + localStorage
- Responsive — mobile, tablet, desktop
- Tanpa build tool — langsung buka di browser
Struktur Folder
mbgdash/
├── assets/
│ ├── css/
│ │ └── mbgdash.css # Semua custom styles
│ ├── js/
│ │ ├── mbgdash.js # Core: sidebar, dark mode, toast, helpers
│ │ └── charts-config.js # Konfigurasi Chart.js per tipe halaman
│ └── img/ # Letakkan aset gambar di sini
├── pages/ # 31 halaman sub-modul
│ ├── dashboard-*.html
│ ├── master-*.html
│ ├── inventory-*.html
│ ├── production-*.html
│ ├── distribution-*.html
│ ├── report-*.html
│ └── users-*.html, tenant-list.html, settings.html, notifications.html
├── partials/ # Fragmen HTML (opsional)
├── index.html # Halaman login
├── dashboard.html # Dashboard Owner
└── README.md
Daftar Halaman
Root
| File |
Keterangan |
index.html |
Login page |
dashboard.html |
Dashboard Owner — ringkasan semua KPI |
Dashboard per Role (pages/)
| File |
Role |
dashboard-manager.html |
Manager — operasional harian |
dashboard-gudang.html |
Staf Gudang — stok & penerimaan |
dashboard-produksi.html |
Staf Produksi — progress memasak |
dashboard-kurir.html |
Kurir — jadwal pengiriman |
Master Data (pages/master-*)
| File |
Entitas |
Kode |
master-kitchens.html |
Dapur |
DPR-XXX |
master-schools.html |
Sekolah penerima |
SCH-XXX |
master-suppliers.html |
Supplier bahan baku |
SUP-XXX |
master-ingredients.html |
Bahan baku & katalog |
BBK-XXX |
master-menus.html |
Menu makanan |
MNU-XXX |
master-recipes.html |
Resep & komposisi bahan |
RSP-XXX |
Inventori (pages/inventory-*)
| File |
Keterangan |
inventory-stock-in.html |
Penerimaan bahan baku (Purchase Order) |
inventory-stock-out.html |
Pengeluaran bahan baku untuk produksi |
inventory-adjustment.html |
Penyesuaian stok manual |
inventory-waste.html |
Pencatatan waste / pembuangan |
inventory-opname.html |
Stock opname berkala |
inventory-history.html |
Riwayat pergerakan stok (ledger) |
Produksi (pages/production-*)
| File |
Keterangan |
production-list.html |
Daftar batch produksi |
production-create.html |
Buat batch produksi baru |
production-detail.html |
Detail & timeline status batch |
State Machine Produksi:
Draft → Memasak → Pengemasan → Siap Distribusi → Terkirim
Distribusi (pages/distribution-*)
| File |
Keterangan |
distribution-list.html |
Daftar pengiriman |
distribution-create.html |
Buat surat jalan pengiriman baru |
distribution-detail.html |
Detail & konfirmasi penerimaan sekolah |
State Machine Distribusi:
Draft → Dikirim → Terkirim → Dikonfirmasi Sekolah
Laporan (pages/report-*)
| File |
Keterangan |
report-production.html |
Laporan produksi + grafik tren |
report-distribution.html |
Laporan distribusi per sekolah |
report-stock.html |
Laporan pergerakan stok |
report-waste.html |
Laporan waste & analisis |
Sistem
| File |
Keterangan |
users-list.html |
Daftar pengguna tenant |
users-form.html |
Tambah/edit pengguna + role card selector |
tenant-list.html |
Kelola tenant (Super Admin) |
settings.html |
Pengaturan: Umum, Profil, Keamanan, Notifikasi, Zona Waktu |
notifications.html |
Pusat notifikasi + filter tab |
Dependensi
Semua dimuat via jsDelivr CDN — tidak perlu instalasi lokal.
| Paket |
Versi |
Kegunaan |
| Bootstrap |
5.3.3 |
CSS framework + komponen JS |
| Bootstrap Icons |
1.11.3 |
Icon set (1.800+ ikon) |
| Chart.js |
4.4.4 |
Grafik dashboard & laporan |
Untuk produksi: unduh dan serve secara lokal atau bundle dengan Vite/Laravel Mix.
