{/* Stats Cards */}
{/* Table */}
<{Component}Table {...actions} can={can} />
{/* Modals (at bottom) */}
<{Component}Modal {...actions} />
);
}
```
### Aturan Page
| Rule | Keterangan |
|------|-----------|
| **Semua page harus `"use client"`** | Tidak ada Server Components di pages |
| **Root wrapper wajib** | `` |
| **Section order** | Stats → Table → Modals |
| **Page harus < 200 baris** | Jika lebih, extract ke features |
| **Tidak ada inline modals** | Semua modal harus di-extract |
| **Tidak ada inline business logic** | Extract ke custom hooks |
---
## 5. Data Fetching Rules
### Wajib menggunakan SWR
```typescript
// ✅ BENAR
import useSWR from "swr";
import { GET_EVENT_GROUPS } from "@/lib/api-endpoints";
const { data, isLoading, mutate } = useSWR(GET_EVENT_GROUPS());
const items = data?.data ?? [];
// ❌ SALAH - Jangan gunakan useEffect + api.get
const [items, setItems] = useState([]);
useEffect(() => {
api.get("/event-groups").then((res) => setItems(res.data));
}, []);
```
### Aturan Data Fetching
| Rule | Keterangan |
|------|-----------|
| **Gunakan SWR untuk semua data fetching** | Bukan useEffect + api.get |
| **SWR key harus dari api-endpoints.ts** | Fungsi yang build URL string |
| **Conditional fetching** | `useSWR(condition ? URL : null)` |
| **Mutate setelah CRUD** | `mutate()` untuk revalidate data |
| **Tidak perlu `revalidateOnFocus: false`** | Sudah di-set global di SWRProvider |
---
## 6. Modal / Dialog Rules
### Wajib menggunakan Dialog component
```typescript
// ✅ BENAR
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, DialogFooter } from "@/components/ui/dialog";
// ❌ SALAH - Jangan gunakan raw div overlay
{isOpen && (
)}
```
### Aturan Modal
| Rule | Keterangan |
|------|-----------|
| **Gunakan `