store/BEST_PRACTICE.md

Best Practices

PHP

Traits

• Gabungkan multiple use trait menjadi satu baris dengan koma.
• Hindari:

  use FlashesEntityMessage;
  use ParsesDataTableQuery;
  

• Gunakan:

  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:

  import CategoryFormModal from '@/components/admin/master/categories/CategoryFormModal.vue';
  

• Gunakan:

  // 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)