feat: implement page-specific component structure and enhance category management with new form and table components

BEST_PRACTICE.md

@@ -13,3 +13,51 @@ ### Traits
   ```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';
+  ```

resources/js/pages/admin/master/categories/Index.vue

@@ -2,8 +2,8 @@
 import { Head } from '@inertiajs/vue3';
 import { Plus } from '@lucide/vue';
 import { computed, ref, watch } from 'vue';
-import CategoryFormModal from '@/components/admin/master/categories/CategoryFormModal.vue';
-import { createColumns } from '@/components/admin/master/categories/columns';
+import CategoryFormModal from './form/CategoryFormModal.vue';
+import { createColumns } from './table/columns';
 import { DataTable } from '@/components/data-table';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';

resources/js/pages/admin/master/categories/table/columns.ts

@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/vue-table';
 import { h } from 'vue';
-import DataTableActions from '@/components/admin/master/categories/data-table-actions.vue';
+import DataTableActions from './data-table-actions.vue';
 import { DataTableColumnHeader } from '@/components/data-table';
 import type { CategoryListItem } from '@/types/category';