Prompt Aplikasi Inventory

# One-Shot Prompt — Tutorial Laravel Vue: Sistem Gudang

Buat aplikasi web "Sistem Gudang" sesuai spesifikasi berikut.

---

## Prerequisite & Harness

### Harness (aturan untuk agent)
- JANGAN menginstall package/software di level sistem (apt, brew, dsb.) secara mandiri.
- BOLEH menginstall dependency lokal proyek melalui Composer (`composer require`) dan npm (`npm install`).
- Jika ada prerequisite yang belum tersedia, HENTIKAN proses dan konfirmasi ke developer — instalasi dilakukan oleh developer, bukan oleh agent.

### Prerequisite
Asumsikan environment berikut sudah tersedia:
- PHP 8.x terbaru beserta ekstensi: `pdo_mysql`, `mbstring`, `xml`, `curl`, `zip`, `intl`, `bcmath`, `gd`
- Composer
- Node.js + npm (versi stable)
- Docker + Docker Compose — atau, jika Docker tidak tersedia, akses langsung ke server MySQL yang sudah berjalan

## 1. Teknologi

- Laravel 13
- Official **Laravel Vue Starter Kit** (`laravel/vue-starter-kit`):
  - Vue 3 (Composition API) + TypeScript
  - Inertia
  - Tailwind CSS + shadcn-vue
  - Autentikasi bawaan (Fortify)
- Docker Compose untuk server database (folder `docker/`)
  - Database: **MySQL 8** lewat docker
  - Gunakan image resmi `mysql:8.4`



## 2. Susunan Aplikasi

Struktur repository (monorepo sederhana):

```
/laravel-gudang
├── app/                          → proyek Laravel (hasil install Laravel Vue Starter Kit)
│   ├── app/                     → kode aplikasi (Models, Http, dst.)
│   ├── database/
│   ├── lang/
│   ├── resources/js/            → komponen Vue (TypeScript)
│   ├── .env
│   └── ...
├── docker/
│   └── docker-compose-dev.yml   → service MySQL saja
└── README.md                     → dokumentasi setup (bahasa Indonesia)
```

### Keputusan
- Gunakan starter kit resmi apa adanya.
- JANGAN membuat autentikasi maupun layout dasar secara kustom.
- Gunakan resource controller + `Inertia::render()`, bukan API JSON terpisah.
- Aplikasi Laravel dan Vite berjalan langsung di host (`php artisan serve` + `npm run dev`)
  - Laravel terhubung ke container MySQL.
  - JANGAN membuat Dockerfile apa pun untuk proyek ini.
  - JANGAN menambahkan service lain (nginx, php, node, phpmyadmin, dll).
- Setiap aksi CRUD adalah **halaman tersendiri** (full page navigation), BUKAN modal/dialog/drawer/sheet.
- URL wajib mengikuti pola RESTful resource Laravel (lihat section Routing).
- Navigasi antar halaman menggunakan komponen `<Link>` dari Inertia, bukan `window.location`.

## 3. ERD

### Entitas
- **items**: id, sku (unik), name, unit, timestamps
- **storage_locations**: id, code (unik), name, description (nullable), timestamps
- **item_stocks** (pivot): id, item_id, storage_location_id, quantity (integer, min 0), timestamps

### Relasi
- `Item` ↔ `StorageLocation` adalah **many-to-many** via tabel pivot `item_stocks`.
- Nilai `quantity` disimpan di pivot (gunakan `withPivot`).

---

## 4. UI

Semua halaman berada di belakang middleware auth.

### Master Barang
- CRUD barang.
- Kolom: SKU, Nama Barang, Satuan.

### Master Lokasi
- CRUD lokasi penyimpanan.
- Kolom: Kode Lokasi, Nama Lokasi, Deskripsi.

### Penempatan Barang
- Pilih satu lokasi penyimpanan.
- Tambahkan beberapa baris barang secara dinamis, masing-masing dengan quantity.
- Simpan ke `item_stocks` melalui relasi (sync/attach).

### Routing & Pola Halaman

#### Backend Route

Semua entitas WAJIB memakai pola RESTful berikut. Contoh untuk `locations`
(pola identik berlaku untuk `items` dan `placements`):

| Method | URI                       | Route name         | Komponen Vue                        |
|--------|---------------------------|--------------------|-------------------------------------|
| GET    | `/locations`              | `locations.index`  | `Pages/Locations/Index.vue`         |
| GET    | `/locations/new`          | `locations.create` | `Pages/Locations/Create.vue`        |
| POST   | `/locations`              | `locations.store`  | —                                   |
| GET    | `/locations/{location}`   | `locations.show`   | `Pages/Locations/Show.vue`          |
| GET    | `/locations/{location}/edit` | `locations.edit` | `Pages/Locations/Edit.vue`          |
| PUT    | `/locations/{location}`   | `locations.update` | —                                   |
| DELETE | `/locations/{location}`   | `locations.destroy`| —     

#### Frontend Route

- Halaman Vue (TypeScript), satu file per aksi RESTful:
  `Items/{Index,Create,Edit,Show}.vue`,
  `Locations/{Index,Create,Edit,Show}.vue`,
  `Placements/{Index,Create}.vue`

## 5. User Story

1. Sebagai admin, saya dapat login ke sistem.
2. Sebagai admin, saya dapat mengelola data barang.
3. Sebagai admin, saya dapat mengelola lokasi penyimpanan.
4. Sebagai admin, saya dapat menempatkan beberapa barang pada satu lokasi beserta jumlah stoknya.

---

## 6. Aturan Implementasi (In Scope)

- Fokus pada CRUD dan relasi many-to-many.
- Seluruh validasi HANYA di backend menggunakan **Form Request Laravel**.
- Vue tidak melakukan validasi bisnis apa pun — hanya menampilkan pesan error dari Laravel (props `errors` Inertia).
- Seluruh teks UI (label, tombol, pesan sukses, pesan validasi) menggunakan **Laravel localization** (folder `lang/`), di-share ke Vue melalui Inertia shared props. Tidak ada teks hard-coded di komponen.
- Seluruh pengguna memiliki satu level akses.

---

## 7. Out of Scope

- RBAC / Role & Permission
- Multi gudang
- Audit log
- Riwayat mutasi stok
- Optimasi performa dan deployment
- Automated test , developer akan melakukan test secara mandiri

---

## 8. Deliverables

- Migration
- Model beserta relasi
- Form Request
- Controller
- Halaman Vue (TypeScript)
- File bahasa (`id` dan `en`)
- Seeder contoh data
- Readme dalam bahasa indonesia

Updated on September 20, 2026 by Todi Adiyatmo