Frontend Stack

Teknologi dan arsitektur frontend Scola.

Last verified: 2026-03-16

---

Tech Stack

Layer	Technology	Version
Framework	Vue 3 (Composition API)	3.x
Build	Vite	5.x
Styling	TailwindCSS	3.x
Icons	Lucide Vue Next	latest
State Management	Pinia	latest
Routing	Vue Router	4.x
HTTP Client	Axios	latest
PWA	Vite PWA Plugin	latest
E2E Testing	Playwright	latest
Auth	Firebase (FCM + Google SSO)	latest

Project Structure

src/
├── api/              # Axios instances & API service modules
├── components/       # Reusable UI components
│   ├── ui/           # Base primitives (buttons, inputs, cards, modals)
│   ├── layout/       # Layout (NSidebar3, MobileBottomBar, AppHeader)
│   ├── dashboard/    # Dashboard widget components
│   └── shared/       # Cross-domain shared components
├── composables/      # Vue composables (useXxx pattern)
├── config/           # App configuration
│   ├── menuRegistry.js      # Menu structure per role
│   └── roleCapabilities.js  # Role → capability mapping
├── layouts/          # Page layout wrappers (AppLayout.vue)
├── router/           # Vue Router definitions
│   ├── index.js              # Router setup + guards
│   ├── adminRoutes.js        # Admin portal routes (~4500 lines)
│   ├── teacherRoutes.js      # Teacher routes (~500 lines)
│   ├── studentRoutes.js      # Student portal routes
│   ├── parentRoutes.js       # Parent portal routes
│   ├── counselingRoutes.js   # Counselor routes
│   ├── principalRoutes.js    # Principal routes
│   ├── foundationRoutes.js   # Foundation chairman routes
│   ├── vicePrincipalRoutes.js # Vice-principal routes
│   ├── librarianRoutes.js    # Librarian routes
│   ├── labTechnicianRoutes.js # Lab technician routes
│   └── spmbRoutes.js         # SPMB public routes
├── services/         # Business logic service layer
├── stores/           # Pinia stores
├── utils/            # Utility functions (roleUtils, formatters, etc.)
└── views/            # Page components organized by domain
    ├── AdminViews/
    ├── FacultyViews/
    ├── StudentViews/
    ├── ParentViews/
    ├── Principal/
    ├── Yayasan/
    ├── CounselingManagement/
    ├── LearningManagement/
    ├── ExamManagement/
    ├── ReportCardManagement/
    ├── AttendanceManagement/
    ├── AccountingManagement/
    ├── LibraryManagement/
    ├── ScheduleManagement/
    ├── AssignmentManagement/
    ├── AnalyticsManagement/
    ├── AdmissionManagement/
    ├── Communication/
    ├── Chat/
    ├── Calendar/
    ├── Laboran/
    └── BendaharaViews/

Key Architectural Patterns

Route Guards (Capability-Based)

// Route definition
{
  path: "/faculty/schedule",
  meta: {
    requiresAuth: true,
    capability: 'academics.schedule.view'  // Required capability
  }
}

// Guard checks:
// 1. User authenticated?
// 2. User has required capability? (from roleCapabilities.js)
// 3. User role in allowedRoles? (if specified)
// 4. Portal scope boundary check

Portal Scope Isolation

Each role group has its own portal scope to prevent cross-role access: - admin → admin portal - principal → principal portal - vice_principal → vice-principal portal - counseling → counselor portal - student → student portal (fail-closed for safety)

Menu Registry Pattern

// menuRegistry.js defines menu structure
// roleCapabilities.js maps roles → capabilities
// At runtime: menu items filtered by user's capabilities

Environment Variables

Variable	Description	Default
VITE_API_URL	Backend API URL (leave empty for same-origin proxy)	empty
VITE_FIREBASE_*	Firebase config keys	per-environment
VITE_APP_ENV	Environment identifier	development