# Best Practices

## PHP

### Traits
- Gabungkan multiple `use` trait menjadi satu baris dengan koma.
- **Hindari:**
  ```php
  use FlashesEntityMessage;
  use ParsesDataTableQuery;
  ```
- **Gunakan:**
  ```php
  use FlashesEntityMessage, ParsesDataTableQuery;
  ```

## JavaScript / Vue

### Struktur Folder Page-Specific Components
Komponen yang hanya digunakan oleh satu page tertentu (misalnya modal form, kolom tabel, action button) **harus ditempatkan di folder page-nya langsung** di dalam subfolder sesuai fungsinya, bukan di `resources/js/components/`.

Folder `resources/js/components/` hanya untuk komponen yang **reusable** lintas page (seperti UI primitives, DataTable, ConfirmDialog, dll).

Subfolder di dalam page folder dikelompokkan berdasarkan fungsi:
- `form/` — modal form, form fields
- `table/` — columns definition, data-table-actions, cell renderers

- **Hindari:**
  ```
  resources/js/components/admin/master/categories/
      CategoryFormModal.vue
      columns.ts
      data-table-actions.vue
  resources/js/pages/admin/master/categories/
      Index.vue
  ```
- **Gunakan:**
  ```
  resources/js/pages/admin/master/categories/
      Index.vue
      form/
          CategoryFormModal.vue
      table/
          columns.ts
          data-table-actions.vue
  ```

### Import Path
Gunakan relative import (`./`) untuk file yang berada di folder/subfolder yang sama, bukan absolute path `@/...`.

- **Hindari:**
  ```ts
  import CategoryFormModal from '@/components/admin/master/categories/CategoryFormModal.vue';
  ```
- **Gunakan:**
  ```ts
  // Dari Index.vue ke subfolder
  import CategoryFormModal from './form/CategoryFormModal.vue';
  import { createColumns } from './table/columns';

  // Dari columns.ts ke file satu folder
  import DataTableActions from './data-table-actions.vue';
  ```

### Pola CRUD (Create/Edit)
Gunakan **modal** untuk CRUD yang sederhana (sedikit field, tidak ada nested data complex), dan **page terpisah** untuk CRUD yang kompleks.

- **Modal** — form sederhana, biasanya 1-3 field, tidak memerlukan layout khusus:
  ```
  pages/admin/master/categories/
      Index.vue
      form/
          CategoryFormModal.vue    ← modal form
      table/
          columns.ts
          data-table-actions.vue
  ```
  Contoh: categories (1 field), suppliers (3 field), customers (3 field)

- **Page terpisah** — form kompleks, banyak field, nested data, file upload, atau memerlukan layout khusus:
  ```
  pages/admin/master/raw-materials/
      Index.vue
      Create.vue                   ← halaman tambah
      Edit.vue                     ← halaman ubah
      form/
          RawMaterialForm.vue      ← form component
      table/
          RawMaterialGroupedTable.vue
          data-table-actions.vue
          raw-material-status-toggle.vue
  ```
  Contoh: raw-materials (nested prices, multi-image upload, dynamic variant rows)