Teman UMKM — Rencana Versi Website (Laravel + Inertia React + MySQL)Legacy format

Teman UMKM — Rencana Versi Website (Laravel + Inertia React + MySQL) > Migrasi dari Flutter (mobile) + Firebase Realtime Database ke Laravel full-stack web.

1. Tech Stack

| Layer | Teknologi |

|-------|-----------|

| Backend Framework | Laravel 11+ |

| Database | MySQL (via Eloquent ORM) |

| Frontend | Inertia.js + React 18 |

| Auth | Laravel Breeze (React stack) + Sanctum |

| Styling | Tailwind CSS + Headless UI / shadcn/ui |

| Charts | Recharts / ApexCharts (React) |

| PDF Export | DomPDF / barryvdh/laravel-dompdf |

| Queue / Cron | Laravel Scheduler + Queue (database driver) |

| Validation | Laravel Form Request |

| Testing | PHPUnit (backend) + Vitest / React Testing Library (frontend) |

---

2. Database Schema (MySQL)

### 2.1 users

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| name | varchar(255) | Nama pengguna |

| email | varchar(255) unique | Email login |

| password | varchar(255) | bcrypt hash |

| business_name | varchar(255) nullable | Nama usaha |

| business_type | varchar(255) nullable | Jenis usaha |

| phone | varchar(50) nullable | No telepon |

| address | text nullable | Alamat |

| last_asset_reset | timestamp nullable | Terakhir reset aset bulanan |

| created_at | timestamp | |

| updated_at | timestamp | |

### 2.2 transactions

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| user_id | bigint FK → users.id | |

| type | enum('income','expense') | |

| source | varchar(255) | Sumber transaksi |

| amount | decimal(15,2) | Jumlah (>= 0) |

| category | varchar(100) | Kategori |

| description | text nullable | |

| receipt_url | varchar(500) nullable | URL bukti |

| asset_id | bigint FK → assets.id nullable | Aset terkait (jika penjualan) |

| date_time | datetime | Waktu transaksi |

| created_at | timestamp | |

| updated_at | timestamp | |

Index: (user_id, type, date_time), (user_id, category)

### 2.3 assets

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| user_id | bigint FK → users.id | |

| name | varchar(255) | Nama produk |

| category | varchar(100) | Kategori |

| purchase_price | decimal(15,2) default 0 | Harga modal |

| selling_price | decimal(15,2) default 0 | Harga jual |

| stock | integer default 0 | Stok |

| sold_quantity | integer default 0 | Terjual bulan ini |

| hpp | decimal(15,2) default 0 | Harga pokok produksi (dari recipe) |

| created_at | timestamp | |

| updated_at | timestamp | |

Index: (user_id, name), (user_id, category)

### 2.4 asset_recipes

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| asset_id | bigint FK → assets.id (cascade delete) | |

| raw_material_id | bigint FK → raw_materials.id | |

| quantity | decimal(12,4) | Jumlah bahan baku yang dibutuhkan |

| created_at | timestamp | |

Unique: (asset_id, raw_material_id)

### 2.5 raw_materials

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| user_id | bigint FK → users.id | |

| name | varchar(255) | Nama bahan |

| unit | enum('batang','meter','lembar','pack','ikat','buah','gram','kg') | Satuan |

| category | varchar(100) | Kategori |

| price | decimal(15,2) default 0 | Harga per unit |

| stock | decimal(12,4) default 0 | Stok |

| created_at | timestamp | |

| updated_at | timestamp | |

### 2.6 debts

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| user_id | bigint FK → users.id | |

| type | enum('debt','receivable') | Utang / Piutang |

| party | varchar(255) | Nama pihak terkait |

| amount | decimal(15,2) | Jumlah total |

| amount_paid | decimal(15,2) default 0 | Jumlah terbayar |

| date | date | Tanggal |

| due_date | date nullable | Jatuh tempo |

| description | text nullable | |

| is_paid | boolean default false | Status lunas |

| created_at | timestamp | |

| updated_at | timestamp | |

### 2.7 invoices

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| user_id | bigint FK → users.id | |

| customer_name | varchar(255) | |

| customer_contact | varchar(255) nullable | |

| total_amount | decimal(15,2) | |

| status | enum('draft','sent','paid','overdue') default 'draft' | |

| issue_date | date | |

| due_date | date nullable | |

| created_at | timestamp | |

| updated_at | timestamp | |

### 2.8 invoice_items

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| invoice_id | bigint FK → invoices.id (cascade delete) | |

| name | varchar(255) | Nama item |

| quantity | integer | |

| price | decimal(15,2) | Harga satuan |

| total | decimal(15,2) | quantity * price |

### 2.9 categories

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| user_id | bigint FK → users.id | |

| type | enum('income','expense') | |

| name | varchar(100) | |

| created_at | timestamp | |

Unique: (user_id, type, name)

### 2.10 monthly_asset_reports

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| user_id | bigint FK → users.id | |

| period | varchar(7) | Format: YYYY-MM |

| total_revenue | decimal(15,2) default 0 | |

| total_profit | decimal(15,2) default 0 | |

| total_items_sold | integer default 0 | |

| generated_at | timestamp | |

| created_at | timestamp | |

Unique: (user_id, period)

### 2.11 asset_performances

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| report_id | bigint FK → monthly_asset_reports.id (cascade delete) | |

| asset_id | bigint FK → assets.id | |

| asset_name | varchar(255) | Snapshot nama aset |

| category | varchar(100) | Snapshot kategori |

| purchase_price | decimal(15,2) | |

| selling_price | decimal(15,2) | |

| initial_stock | integer | |

| final_stock | integer | |

| items_sold | integer | |

| revenue | decimal(15,2) | |

| profit | decimal(15,2) | |

| profit_percentage | decimal(8,2) | |

### 2.12 activities

| Kolom | Tipe | Keterangan |

|-------|------|------------|

| id | bigint AI PK | |

| user_id | bigint FK → users.id | |

| type | enum('transaction','asset','debt','profile','raw_material') | |

| action | enum('create','update','delete','pay','restock','sell') | |

| description | varchar(500) | |

| metadata | json nullable | Data tambahan |

| created_at | timestamp | |

Index: (user_id, created_at)

---

3. Arsitektur Backend (Laravel)

### 3.1 Struktur Direktori

```

app/

├── Console/

│ └── Commands/

│ ├── AssetsMonthlyReset.php # Reset sold_quantity + generate report

│ └── CleanupOldActivities.php # Hapus aktivitas > 30 hari

├── Enums/

│ ├── TransactionType.php # income, expense

│ ├── DebtType.php # debt, receivable

│ └── ActivityType.php # transaction, asset, debt, profile, raw_material

├── Events/

│ ├── TransactionCreated.php

│ └── TransactionDeleted.php

├── Listeners/

│ ├── UpdateStockOnSale.php # Kurangi stok aset + bahan baku

│ └── ReverseStockOnDelete.php # Kembalikan stok saat transaksi dihapus

├── Exceptions/

│ └── InsufficientStockException.php

├── Http/

│ ├── Controllers/

│ │ ├── DashboardController.php

│ │ ├── TransactionController.php

│ │ ├── AssetController.php

│ │ ├── RawMaterialController.php

│ │ ├── DebtController.php

│ │ ├── InvoiceController.php

│ │ ├── CategoryController.php

│ │ ├── ReportController.php

│ │ ├── FinancialSummaryController.php

│ │ ├── ActivityController.php

│ │ ├── PdfExportController.php

│ │ ├── BackupController.php

│ │ └── ProfileController.php # (dari Breeze, ditambah business info)

│ ├── Requests/

│ │ ├── StoreTransactionRequest.php

│ │ ├── UpdateTransactionRequest.php

│ │ ├── StoreAssetRequest.php

│ │ ├── StoreRawMaterialRequest.php

│ │ ├── StoreDebtRequest.php

│ │ ├── PartialPaymentRequest.php

│ │ └── ...

│ └── Resources/

│ ├── TransactionResource.php

│ ├── AssetResource.php

│ ├── DebtResource.php

│ └── ...

├── Models/

│ ├── User.php

│ ├── Transaction.php

│ ├── Asset.php

│ ├── AssetRecipe.php

│ ├── RawMaterial.php

│ ├── Debt.php

│ ├── Invoice.php

│ ├── InvoiceItem.php

│ ├── Category.php

│ ├── MonthlyAssetReport.php

│ ├── AssetPerformance.php

│ └── Activity.php

└── Services/

├── HppCalculator.php # Hitung HPP dari recipe + material prices

├── StockDeductionService.php # Kurangi stok multi-level

├── FinancialAggregationService.php # Query agregat untuk laporan

└── ActivityLoggerService.php # Catat aktivitas user

```

### 3.2 Controllers & Endpoints

|--------|----------|------------|------------|

| GET | /transactions/{id} | TransactionController | Detail |

| DELETE | /transactions/{id} | TransactionController | Hapus, reverse stock |

| GET | /assets/{id} | AssetController | Detail |

| PUT | /assets/{id} | AssetController | Update |

| DELETE | /assets/{id} | AssetController | Hapus |

| POST | /assets/{id}/sell | AssetController | Jual produk (kurangi stok) |

| GET | /raw-materials/{id} | RawMaterialController | Detail |

| PUT | /raw-materials/{id} | RawMaterialController | Update |

| DELETE | /raw-materials/{id} | RawMaterialController | Hapus |

| POST | /raw-materials/{id}/restock | RawMaterialController | Tambah stok |

| PUT | /debts/{id} | DebtController | Update |

| DELETE | /debts/{id} | DebtController | Hapus |

| POST | /debts/{id}/pay | DebtController | Bayar (partial/full) |

| DELETE | /categories/{id} | CategoryController | Hapus |

### 3.3 Business Logic & Events

Flow A: Tambah Transaksi (Penjualan)

1. Request → StoreTransactionRequest validasi

2. TransactionController@store simpan transaction

3. Jika type=income dan asset_id terisi → dispatch TransactionCreated

4. UpdateStockOnSale listener:

• Kurangi assets.stock sejumlah quantity (default 1)

• Increment assets.sold_quantity

• Ambil recipe → kurangi stok setiap raw_materials sesuai quantity recipe

• Jika stok tidak cukup → throw InsufficientStockException

5. ActivityLoggerService catat "Menjual {asset_name}"

Flow B: Hapus Transaksi (Penjualan)

1. Dispatch TransactionDeleted

2. ReverseStockOnDelete listener: kembalikan stok aset & bahan baku

3. Catat aktivitas

Flow C: Tambah Bahan Baku (dengan harga > 0)

1. Simpan raw_material

2. Auto-create transaction type=expense, source=nama bahan, amount=price*stock, category="Pembelian barang"

Flow D: Monthly Reset Aset (Cron: tiap tanggal 1)

1. php artisan assets:monthly-reset

2. Untuk setiap user dengan last_asset_reset = amount, set is_paid = true`

5. Catat aktivitas

Flow F: HPP Calculator

1. Ambil semua AssetRecipe untuk aset tertentu

2. Untuk setiap recipe: harga_per_unit * quantity

3. Sum semua → total HPP

4. Simpan ke assets.hpp

### 3.4 Scheduled Commands

| Command | Jadwal | Deskripsi |

|---------|--------|-----------|

| assets:monthly-reset | 0 0 1 * * (tiap tgl 1) | Reset sold_quantity + generate report |

| activities:cleanup | 0 3 * * * (setiap hari jam 3 pagi) | Hapus aktivitas > 30 hari |

---

4. Frontend (Inertia.js + React + Tailwind)

### 4.1 Struktur Direktori Frontend

```

resources/js/

├── Components/ (shared UI)

│ ├── Layout.jsx # Main layout with sidebar/topbar

│ ├── AppBar.jsx # Top navigation

│ ├── Sidebar.jsx # Side navigation

│ ├── PrimaryButton.jsx

│ ├── SecondaryButton.jsx

│ ├── TextInput.jsx

│ ├── SelectInput.jsx

│ ├── Modal.jsx

│ ├── LoadingSpinner.jsx

│ ├── EmptyState.jsx

│ ├── Card.jsx

│ ├── StatsCard.jsx

│ ├── Pagination.jsx

│ ├── SearchInput.jsx

│ ├── Tabs.jsx

│ ├── Toast.jsx / Notification

│ ├── ConfirmDialog.jsx

│ └── Breadcrumb.jsx

├── Pages/

│ ├── Dashboard.jsx

│ ├── Auth/

│ │ ├── Login.jsx

│ │ └── Register.jsx

│ ├── Transactions/

│ │ ├── Index.jsx # List + filter tabs

│ │ ├── Create.jsx # Form tambah

│ │ └── Show.jsx # Detail

│ ├── Assets/

│ │ ├── Index.jsx # List + search + sort

│ │ ├── Create.jsx # Form + recipe builder

│ │ ├── Show.jsx # Detail + sell action

│ │ └── Recipe.jsx # Edit komposisi

│ ├── RawMaterials/

│ │ ├── Index.jsx # List

│ │ ├── Create.jsx # Form

│ │ └── Show.jsx # Detail + restock

│ ├── Debts/

│ │ ├── Index.jsx # List + tabs

│ │ ├── Create.jsx # Form

│ │ └── Pay.jsx # Partial payment

│ ├── Reports/

│ │ ├── Index.jsx # 5-tab reports

│ │ ├── FinancialSummary.jsx # Line chart interaktif

│ │ └── AssetMonthly.jsx # Laporan aset bulanan

│ ├── Settings/

│ │ ├── Index.jsx # Main settings

│ │ ├── Profile.jsx # Edit profil

│ │ ├── Business.jsx # Edit bisnis

│ │ └── Backup.jsx # Backup data

│ └── Activities/

│ └── Index.jsx # Activity history

├── Charts/

│ ├── BarChart.jsx # Recharts bar chart

│ ├── PieChart.jsx # Recharts pie chart

│ └── LineChart.jsx # Recharts line chart

├── Hooks/

│ ├── useFormatCurrency.js # Format IDR

│ └── useTheme.js # Dark mode toggle

└── Layouts/

└── AuthenticatedLayout.jsx # Layout untuk halaman yang login

```

### 4.2 Halaman & Komponen

#### Dashboard (/dashboard)

• Stats Cards: Saldo, pemasukan bulan ini, pengeluaran bulan ini, profit

• 7-Day Bar Chart: Pemasukan vs Pengeluaran 7 hari terakhir

• Quick Actions: Tambah transaksi, lihat laporan

• Recent Transactions: 5 transaksi terakhir

#### Transaksi Index (/transactions)

• Tabs: Semua | Pemasukan | Pengeluaran

• Sort: Tanggal (default), Jumlah

• Search: by source / description

• List: Card/list dengan icon type, source, amount, date

• Empty State: jika belum ada transaksi

• FAB: tombol "+" untuk tambah

#### Transaksi Create (/transactions/create)

• Form Fields:

• Type (radio: Pemasukan / Pengeluaran)

• Source (text input)

• Amount (currency input, auto-format IDR)

• Category (dropdown, depends on type)

• Date (date picker)

• Time (time picker)

• Description (textarea, optional)

• Asset (searchable select, optional — only for income type)

#### Aset Index (/assets)

• Search: by name / category

• Sort: Nama, Harga, Stok, Profit

• Summary Cards: Total nilai aset, total stok, total terjual, total profit

• List: Card format

#### Aset Create (/assets/create)

• Form Fields: name, category, selling_price, stock

• Recipe Builder: dynamic rows pilih bahan baku + quantity → auto-hitung HPP

#### Halaman Reports (/reports)

• 5 Tabs: Ringkasan | Pemasukan | Pengeluaran | Utang | Piutang

• Ringkasan: PieChart pemasukan vs pengeluaran, total, profit

• Pemasukan/Pengeluaran: BarChart per kategori, list detail

• Utang/Piutang: PieChart status (lunas/belum), total outstanding

• Export PDF button (download)

#### Financial Summary (/reports/financial-summary)

• Line Chart interaktif dengan filter:

• Metrik: Pemasukan / Pengeluaran / Profit

• Periode: 3 hari / 7 hari / 14 hari / 1 bulan / custom range

• Perubahan Persentase vs periode sebelumnya

### 4.3 Routing (inertia)

```js

// routes/web.php

Route::middleware(['auth', 'verified'])->group(function () {

Route::get('/dashboard', [DashboardController::class, 'index'])->name('dashboard');

// Transaksi

Route::resource('transactions', TransactionController::class)

->only(['index', 'create', 'store', 'show', 'destroy']);

// Aset

Route::resource('assets', AssetController::class)

->only(['index', 'create', 'store', 'show', 'update', 'destroy']);

Route::post('/assets/{asset}/sell', [AssetController::class, 'sell'])->name('assets.sell');

Route::get('/assets/{asset}/recipe', [AssetController::class, 'recipe'])->name('assets.recipe');

Route::put('/assets/{asset}/recipe', [AssetController::class, 'updateRecipe']);

// Bahan Baku

Route::resource('raw-materials', RawMaterialController::class)

->only(['index', 'create', 'store', 'show', 'update', 'destroy']);

Route::post('/raw-materials/{rawMaterial}/restock', [RawMaterialController::class, 'restock'])

->name('raw-materials.restock');

// Utang

Route::resource('debts', DebtController::class)

->only(['index', 'create', 'store', 'show', 'update', 'destroy']);

Route::post('/debts/{debt}/pay', [DebtController::class, 'pay'])->name('debts.pay');

// Laporan

Route::get('/reports', [ReportController::class, 'index'])->name('reports.index');

Route::get('/reports/data', [ReportController::class, 'data'])->name('reports.data');

Route::get('/reports/financial-summary', [FinancialSummaryController::class, 'index'])

->name('reports.financial-summary');

Route::get('/reports/financial-summary/data', [FinancialSummaryController::class, 'data']);

Route::get('/reports/asset-monthly', [ReportController::class, 'assetMonthly'])

->name('reports.asset-monthly');

Route::get('/reports/pdf', [PdfExportController::class, 'generate'])->name('reports.pdf');

// Kategori

Route::resource('categories', CategoryController::class)->only(['index', 'store', 'destroy']);

// Aktivitas

Route::get('/activities', [ActivityController::class, 'index'])->name('activities.index');

// Backup

Route::get('/backup', [BackupController::class, 'index'])->name('backup.index');

Route::get('/backup/download', [BackupController::class, 'download'])->name('backup.download');

// Profil

Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');

Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');

Route::get('/profile/business', [ProfileController::class, 'editBusiness'])

->name('profile.business');

Route::patch('/profile/business', [ProfileController::class, 'updateBusiness']);

});

```

---

5. Library Dependencies

### Composer (Backend)

```json

{

"require": {

"php": "^8.2",

"laravel/framework": "^11.0",

"laravel/breeze": "^2.0",

"laravel/sanctum": "^4.0",

"barryvdh/laravel-dompdf": "^3.0",

"spatie/laravel-activitylog": "^4.0"

"require-dev": {

"laravel/sail": "^1.0",

"barryvdh/laravel-ide-helper": "^3.0",

"laravel/tinker": "^2.0"

}

```

### NPM (Frontend)

```json

{

"devDependencies": {

"@inertiajs/react": "^2.0",

"@headlessui/react": "^2.0",

"@heroicons/react": "^2.0",

"react": "^18.0",

"react-dom": "^18.0",

"recharts": "^2.0",

"axios": "^1.0",

"tailwindcss": "^3.4",

"date-fns": "^3.0",

"use-debounce": "^10.0"

}

```

---

6. Development Phases

### Fase 1: Setup Proyek (Estimasi: 2 hari)

• [ ] composer create-project laravel/laravel teman-umkm-web

• [ ] Install Breeze (React + Inertia stack)

• [ ] Setup Sanctum

• [ ] Konfigurasi MySQL database

• [ ] Setup Tailwind CSS

• [ ] Buat layout dasar (sidebar + topbar)

• [ ] Setup authentication pages (login/register)

### Fase 2: Database & Models (Estimasi: 2 hari)

• [ ] Buat semua migration

• [ ] Buat semua model + relationships

• [ ] Buat Form Request validasi

• [ ] Buat Enums

### Fase 3: Core CRUD (Estimasi: 5 hari)

• [ ] Transactions: Index, Create, Show, Delete pages + backend

• [ ] Assets: Index, Create, Show, Recipe pages + backend

• [ ] Raw Materials: Index, Create, Show, Restock pages + backend

• [ ] Debts: Index, Create, Pay pages + backend

• [ ] Categories: Manage page

### Fase 4: Business Logic (Estimasi: 3 hari)

• [ ] Stock deduction on sale (Event + Listener)

• [ ] HPP calculator

• [ ] Auto-expense on raw material purchase

• [ ] Partial debt payment logic

• [ ] Monthly reset command

• [ ] Activity logging (model observers)

### Fase 5: Reports & Dashboard (Estimasi: 4 hari)

• [ ] Dashboard page + aggregation queries

• [ ] Report 5-tab page with Recharts

• [ ] Financial summary line chart with filters

• [ ] Monthly asset report page

• [ ] PDF export

### Fase 6: Polish & Pengaturan (Estimasi: 3 hari)

• [ ] Settings pages (profile, business, backup)

• [ ] Activity history page

• [ ] Loading states & skeleton loaders

• [ ] Empty states

• [ ] Error handling

• [ ] Dark mode

• [ ] Responsive design

• [ ] Testing

### Fase 7: Migrasi Data (Estimasi: 2 hari)

• [ ] Export data dari Firebase (JSON)

• [ ] Buat seeder/import script

• [ ] Validasi data hasil migrasi

Total estimasi: ~21 hari kerja

---

7. Catatan Migrasi Firebase → MySQL

| Firebase RTDB | MySQL | Catatan |

|---------------|-------|---------|

| users/{uid} | users | Field sama, tambah password untuk auth Laravel |

| transactions/{uid}/{id} | transactions | dateTime → date_time, tambah FK user_id |

| assets/{uid}/{id} | assets | _key tidak perlu, pakai auto-increment ID |

| assets/{uid}/{id}.recipe | asset_recipes | Array → tabel relasi |

| rawMaterials/{uid}/{id} | raw_materials | _key tidak perlu |

| debts/{uid}/{id} | debts | Sama |

| invoices/{uid}/{id} + items | invoices + invoice_items | Items dari JSON → tabel |

| categories/{uid}/income|expense | categories | Tambah kolom type |

| reports/{uid}/{id} | monthly_asset_reports + asset_performances | Sama |

| activities/{uid}/{id} | activities | metadata → JSON column |

| settings/{uid} | users (extend) | Simpan di kolom user saja |

| asset_transactions/{uid}/{id} | Tidak perlu | Digantikan event/trigger transaksi |

---

8. Struktur Navigasi (Sidebar)

```

🏠 Beranda → /dashboard

💰 Transaksi → /transactions

📦 Aset → /assets

├─ Daftar Aset → /assets

└─ Bahan Baku → /raw-materials

📋 Utang/Piutang → /debts

📊 Laporan → /reports

├─ Laporan Keuangan → /reports

├─ Ringkasan Finansial → /reports/financial-summary

└─ Laporan Aset → /reports/asset-monthly

📜 Aktivitas → /activities

⚙️ Pengaturan → /settings

├─ Edit Profil → /profile

├─ Info Bisnis → /profile/business

└─ Backup Data → /backup

```

Download .md

mohdismailbaidurie @mohdismailbaidurie

License MIT

Uploaded 6 days ago

Version v1

File size 24.9 KB

Downloads 7

Copies 3

admin ecommerce laravel saas tailwind

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/mohdismailbaidurie/teman-umkm-rencana-versi-website-laravel-inertia-react-mysql and implement it in my code

Don't have the MCP? Install it here