# Panduan Restyle Frontend Total (untuk Agent/Developer Berikutnya)

Frontend saat ini SENGAJA dibuat sederhana (Tailwind minimal, tanpa komponen
reusable, tanpa desain final "digital ticket stub" dari README). Struktur
data, route, dan logic sudah final — restyle visual tidak perlu menyentuh
apa pun di bawah ini, cukup edit file Blade.

## Yang BOLEH diubah bebas (murni presentasi)
- Semua file di `resources/views/**/*.blade.php` — HTML/class Tailwind/struktur DOM.
- `resources/css/app.css` — boleh tambah custom CSS/@layer/font/warna brand.
- `tailwind.config.js` — boleh tambah theme, warna, font family, dst.
- Asset statis baru (gambar, ikon) di `public/` atau `resources/`.

## Yang JANGAN diubah saat restyle (murni logic, bukan tampilan)
- Semua Controller di `app/Http/Controllers/**` — return data ke view via
  `compact()`, jangan ubah variabel yang dikirim kecuali memang menambah fitur.
- Semua Service di `app/Services/**` (OrderStatusService, StockAllocationService,
  FulfillmentService, CheckoutService, PakasirClient, ActivityLogService).
- Semua Model, migrasi, route (`routes/web.php`, `routes/api.php`).
- Script inline `<script>` di `storefront/show.blade.php` (fetch ke
  `/api/checkout`) — logic fetch boleh dipertahankan, tapi UI sekitarnya bebas
  diubah. Kalau mau ganti jadi Vue/React/Alpine, pastikan payload yang dikirim
  ke `/api/checkout` tetap sama (lihat `StoreCheckoutRequest` untuk kontrak
  field yang divalidasi backend).

## Peta halaman yang ada saat ini

| Halaman | View | Route name | Data yang tersedia |
|---|---|---|---|
| Katalog produk | `storefront/index.blade.php` | `storefront.index` | `$products` (koleksi Product, dengan `category`, method `availableStockCount()`) |
| Detail produk + form checkout | `storefront/show.blade.php` | `storefront.show` | `$product` (termasuk `checkout_schema` array untuk field dinamis) |
| Invoice publik | `invoice/show.blade.php` | `invoice.show` | `$order` (dengan `product`, `stockLinks.productStock`) |
| Login admin | `admin/auth/login.blade.php` | `admin.login` | - |
| Dashboard admin | `admin/dashboard.blade.php` | `admin.dashboard` | `$needsAction`, `$pendingPayment`, `$lowStockProducts` |
| CRUD Produk/Kategori/Stok/Order/Voucher/Log | `admin/{resource}/*.blade.php` | `admin.{resource}.*` | lihat masing-masing Controller |

## Layout induk
- Customer-facing: `resources/views/layouts/app.blade.php` (dipakai storefront + invoice).
- Admin: `resources/views/admin/layout.blade.php` (dipakai semua halaman admin).

Restyle biasanya cukup fokus ke dua file layout ini dulu (nav, warna, font),
lalu turun ke masing-masing halaman.

## checkout_schema — field dinamis, JANGAN di-hardcode di Blade

`storefront/show.blade.php` me-render form checkout dari `$product->checkout_schema`
secara dinamis (loop `@foreach`). Jangan ganti ini jadi field hardcoded per produk
— skema ini disimpan per produk di database dan bisa beda-beda tiap produk
(README bagian 4.1/4.3). Kalau restyle mengubah cara render field ini (misal
jadi step-by-step wizard), pastikan tetap generate `name="answers[{key}]"` agar
kompatibel dengan parsing JS yang mengirim ke `/api/checkout`.

## Status order dan tampilannya

Order punya 8 kemungkinan status: `PENDING_PAYMENT`, `EXPIRED`, `PAID`,
`FULFILLING`, `FULFILLMENT_FAILED`, `DELIVERED`, `DELIVERED_MANUAL`, `REFUNDED`.
Halaman invoice publik (`invoice/show.blade.php`) saat ini hanya membedakan
tampilan untuk `DELIVERED`/`DELIVERED_MANUAL` (tampilkan payload) vs
`PENDING_PAYMENT` (pesan menunggu) vs lainnya (tidak ada pesan khusus).
Saat restyle jadi "digital ticket stub", pertimbangkan tampilan berbeda untuk
tiap status (misal badge warna berbeda per status), bukan cuma dua kondisi ini.

## Konvensi penamaan uang dan tanggal

- Uang: selalu integer (rupiah, tanpa desimal), format tampilan pakai
  `number_format($value, 0, ',', '.')` — lihat contoh di view manapun.
- Tanggal: kolom `datetime` Laravel, format tampilan pakai `->format('d M Y H:i')`.

Konsistenkan format ini di seluruh halaman baru saat restyle.