Modul (Frontend)

Ringkasan

Modul fitur frontend berlokasi di resources/js/modules/. Setiap modul punya component, store, services, API layer, dan types sendiri — mengikuti pattern stores→services→api.

---

Struktur Folder

modules/landing/
├── setup/          → Wizard setup
├── schools/        → Profil sekolah
├── recruitment/    → Portal karir
├── articles/       → Berita & artikel
└── commons/        → Pattern bersama (dropdown, language, chatbot)

Struktur Internal Modul

module/
├── Index.svelte        # Entry point
├── api/                # Fetch functions
├── parts/              # Sub-komponen
├── services/           # Business logic
├── stores/             # State management
│   └── entry/          # Store groups + barrel index.ts
├── types/              # TypeScript interfaces
└── __tests__/          # Vitest tests

---

Pattern stores→services→api

Component → Store → Service → API → Backend

Layer	Tanggung jawab
Component	Render UI, panggil store action, subscribe
Store	Kelola StateContainer, expose getters/actions
Service	Orchestrasi API, transform data
API	HTTP fetch, typed responses

Aturan Ketat

• Component → Store (BUKAN langsung Service/API)
• Store → Service (BUKAN langsung API)
• Service → API (BUKAN fetch langsung)

---

Store Pattern

Semua store pakai StateContainer<TData> dari @/types/state:

interface StateContainer<TData> {
    meta: StateMeta;     // loading, initialized, updatedAt, errorAt
    data: TData;         // domain data
    errors: StateErrors; // validation errors
}

Nama File

<aksi>-<modul>.stores.ts — contoh: fetch-bulletin.stores.ts

---

File Penting

File	Tujuan
resources/js/lib/state.ts	Definisi StateContainer<TData>
resources/js/lib/i18n.svelte.ts	Fungsi t() untuk translasi
resources/js/modules/	Semua modul fitur