Dmitri d4a5378adf Refactor: migrate frontend to Vite/React, add product backend modules

Frontend:
- Replace Next.js with Vite + React + TypeScript
- Add new component architecture (app-shell, sidebar, dashboard modules)
- Implement product modules: FRAME, safety protocols, walkthrough checkin,
  campus/staff attendance, personality quiz, sign language, classroom timer
- Add shadcn/ui component library with Tailwind CSS
- Remove legacy generated components, stores, and pages

Backend:
- Add product migrations: frame_entries, user_progress, safety_quiz_results,
  walkthrough_checkins, communication_events, personality_quiz_results,
  campus_attendance_config/summaries, staff_attendance_records, content_catalog
- Add corresponding models, services, and routes
- Implement cookie-based auth with refresh token rotation
- Add content catalog seeder with product content
- Migrate to ESLint flat config
- Switch from yarn to npm

Infrastructure:
- Update .gitignore for new tooling
- Add project documentation (CLAUDE.md, docs/)
- Remove deprecated config files and yarn.lock

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-06-09 15:18:23 +02:00

2.2 KiB

Raw Blame History

Sidebar Integration

Purpose

Sidebar renders app-shell navigation, module access, campus branding, and the current role badge through the three-layer frontend architecture.

View -> Business Logic -> API/Data Access -> Backend

Sidebar does not own product content records. It reads module metadata from shared app constants and uses backend-owned campus branding received from the app shell.

Frontend Layers

View:

frontend/src/components/frameworks/Sidebar.tsx
frontend/src/components/sidebar/SidebarView.tsx
frontend/src/components/sidebar/SidebarBrand.tsx
frontend/src/components/sidebar/SidebarNavigation.tsx
frontend/src/components/sidebar/SidebarCampusRolePanel.tsx
frontend/src/components/sidebar/SidebarIcons.tsx

Business logic:

frontend/src/business/app-shell/hooks.ts
frontend/src/business/app-shell/selectors.ts
frontend/src/business/app-shell/types.ts

Shared config:

frontend/src/shared/constants/appData.ts

Behavior

Sidebar.tsx is a thin wrapper that prepares the page model through useSidebarPage.
AppLayout receives prepared sidebarProps from useAppShell and does not assemble sidebar contracts inline.
useSidebarPage filters available modules by role and prepares role/campus display values.
useAppShell resolves backend-owned campus branding into campusInfo before passing it to Sidebar.
Selectors handle module access, role labels, and campus initials outside JSX.
Sidebar navigation calls the app-shell module navigation action, which navigates to the selected module route path.
The active sidebar item is derived from the current URL route through the app-shell business layer.
View components receive a prepared page model and do not call API/data access modules.
Sidebar navigation uses the local Button primitive instead of raw controls.

Data Ownership Rules

Do not add seeded campus records or module content to Sidebar components.
Campus branding is backend-owned data and should keep flowing through campusInfo.
Module IDs, route paths, and role access metadata stay centralized in frontend/src/shared/constants/appData.ts until backend-owned module configuration is introduced.

2.2 KiB Raw Blame History