Project Structure

Frontend directory organization.

Directory Layout

sis_frontend/
├── src/
│   ├── api/                 # API layer
│   │   ├── index.ts         # Axios instance (cookie-based auth, CSRF handling)
│   │   ├── services/        # 36 domain API service files
│   │   │   ├── academic.api.ts
│   │   │   ├── audit.api.ts
│   │   │   ├── auth.api.ts
│   │   │   ├── authorization.api.ts
│   │   │   ├── billing.api.ts
│   │   │   ├── creditConversions.api.ts
│   │   │   ├── emailTemplates.api.ts
│   │   │   ├── formbuilder.api.ts
│   │   │   ├── grading.api.ts
│   │   │   ├── holds.api.ts
│   │   │   ├── lms.api.ts
│   │   │   ├── lookups.api.ts
│   │   │   ├── organization.api.ts
│   │   │   ├── people.api.ts
│   │   │   ├── planning.api.ts
│   │   │   ├── proxy.api.ts
│   │   │   ├── registration.api.ts
│   │   │   ├── reporting.api.ts
│   │   │   ├── roles.api.ts
│   │   │   ├── settings.api.ts
│   │   │   ├── student.api.ts
│   │   │   ├── testscores.api.ts
│   │   │   ├── transaction.api.ts
│   │   │   └── workflow.api.ts
│   │   └── types/           # TypeScript interfaces
│   │       └── index.ts
│   ├── components/          # 35 reusable components
│   │   ├── layout/          # App layout (sidebar, header, footer)
│   │   ├── academic/        # Academic domain components
│   │   ├── audit/           # Audit domain components
│   │   ├── common/          # Generic shared components
│   │   ├── formbuilder/     # Form builder components
│   │   ├── grading/         # Grading components
│   │   ├── graduation/      # Graduation components
│   │   ├── people/          # People domain components
│   │   ├── registration/    # Registration components
│   │   └── testscores/      # Test scores components
│   ├── composables/         # Vue composables
│   │   └── use{Feature}.ts
│   ├── i18n/                # Vue i18n configuration
│   ├── locales/             # Translation files (en.json, etc.)
│   ├── router/              # Vue Router
│   │   └── index.ts
│   ├── stores/              # 10 Pinia stores
│   │   ├── auth.ts          # Session-based auth state
│   │   ├── authorization.ts # Permissions and roles
│   │   ├── branding.ts      # Institution branding
│   │   ├── holds.ts         # Student hold state
│   │   ├── instance.ts      # Which deployment this is
│   │   ├── lookups.ts       # Cached lookup values
│   │   ├── menuLayout.ts    # Dynamic menu configuration
│   │   ├── recentPages.ts   # Recently visited pages
│   │   └── settings.ts      # App settings
│   ├── views/               # 147 page components across 18 directories
│   │   ├── academic/
│   │   ├── admin/
│   │   ├── advising/
│   │   ├── apply/
│   │   ├── auth/
│   │   ├── billing/
│   │   ├── core/
│   │   ├── grading/
│   │   ├── graduation/
│   │   ├── people/
│   │   ├── proxy/
│   │   ├── records/
│   │   ├── registration/
│   │   ├── reports/
│   │   ├── student/
│   │   ├── students/
│   │   ├── DashboardView.vue
│   │   └── HomeView.vue
│   ├── App.vue
│   └── main.ts
├── public/                  # Static assets
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Key Directories

api/

API communication layer:

• index.ts -- Axios instance with withCredentials: true for cookie-based auth, CSRF token interceptor, and Accept-Language header for i18n
• services/ -- 36 domain-specific API service files
• types/ -- TypeScript interfaces for all API responses and requests

components/

91 reusable Vue components organized by domain:

• layout/ -- App shell (sidebar, header, breadcrumbs)
• academic/ -- Course and academic components
• admin/ -- Administration screen components
• audit/ -- Degree audit components
• billing/ -- Billing components
• common/ -- Generic shared components
• communications/ -- Staff-to-student email composer
• formbuilder/ -- Dynamic form components
• grading/ -- Grade roster components
• graduation/ -- Graduation workflow components
• organization/ -- Organization components
• people/ -- Person detail components
• registration/ -- Registration and planning components
• students/ -- Student record components
• testscores/ -- Test score components
• workflows/ -- Approval workflow components

views/

147 page-level components across 18 directories:

• Organized by domain/feature area
• Named {Feature}View.vue

stores/

10 Pinia stores for global state:

Store	Purpose
auth.ts	Session state, user info, login/logout
authorization.ts	Permissions, roles, menu visibility
branding.ts	Institution branding (logo, colors)
holds.ts	Cached hold state for the hold banner
instance.ts	Deployment kind (restricted refuses most writes)
lookups.ts	Cached lookup table values
menuLayout.ts	Dynamic sidebar menu configuration
recentPages.ts	Recently visited pages, per active role
scrollPositions.ts	Per-page scroll restoration
settings.ts	Application settings