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>
18 KiB
Full Integration Refactor Plan
Purpose
This document is the active cross-application backlog for integrating frontend/, backend/, and the PostgreSQL database.
It must track only unfinished integration work and hard implementation rules. Completed migration history belongs in the feature-specific docs under backend/docs/, frontend/docs/, and supporting audit docs.
When an item is completed, remove it from this plan and update the owning feature documentation instead of adding a completed checklist entry here.
Current Application Shape
frontend/is the only product frontend.backend/is the source of truth for auth, tenant ownership, roles, permissions, users, staff profiles, campuses, persisted workflows, content catalogs, email, files, and database access.ref-frontend/is a temporary generated reference. It is not runtime code and must be deleted after all needed endpoint-contract reference value is exhausted.
Non-Negotiable Rules
- No frontend persisted workflow may use mock, sample, seed, or fallback records.
- No frontend runtime code may import backend seed files.
- Frontend runtime constants may contain only UI config, route/module metadata, query keys, timing values, style tokens, static UI labels, and intentionally static product copy.
- Backend seeds are for database seeding only.
- Frontend seed data is allowed only in tests or
frontend/src/test-seeds/. - Backend owns tenant scoping and permissions. Frontend route hiding is UX only.
- All frontend backend calls go through typed modules in
frontend/src/shared/api/. - New frontend workflows must follow
View -> Business Logic -> API/Data Access -> Backend. - View components must not import
frontend/src/shared/api/. - Business logic must not import view components.
- API modules must not import business or view code.
- All imports use the
@alias. - No
any, unsafe casts, disabled TypeScript rules, disabled ESLint rules, compatibility bypasses, silent failures, or legacy re-export surfaces. - Frontend auth must use backend-owned HttpOnly cookies only. Access and refresh tokens must never be stored in frontend browser storage.
- Secrets live only in backend
.envor deployment environment variables. Frontend env values must be public browser-safe values only. - New backend modules must include migration/model/service/route, tenant and role enforcement, docs, and focused verification.
- Every changed workflow must update the relevant docs before it is considered complete.
Current Verification Baseline
Frontend current baseline:
npm run typecheckpasses.npm run lintpasses.npm run testpasses with 51 files and 198 tests.npm run buildpasses.npm run test:e2epasses with 4 backend-free Playwright smoke tests.npm run test:e2e:contentexists for backend-seeded content catalog integration tests. It requires backend migrations, backend seeders, and a running backend server.
Backend current baseline:
- Product module files have been syntax-checked with
node -c. npm audit --audit-level=lowreports 0 vulnerabilities.npm outdatedreports onlyjson2csv@6.0.0-alpha.2above the installed stable5.0.7; prerelease packages are not part of the stable dependency baseline.npm run lintstill fails on existing generated/template lint debt.npm run db:migratestill needs a local database verification run with the configured environment.
Active Workstreams
1. Backend Migration And Runtime Verification
Status: open.
Problem:
Backend product modules exist, but the configured local database migration/seed run has not been verified as a passing gate in this plan.
Required work:
- Run
npm run db:migrateagainst the configured local database. - Run
npm run db:seed. - Start backend with the documented env file.
- Verify public content catalog routes, auth routes, and product module routes respond.
- Record exact failing migration/seed/runtime errors if any.
Acceptance criteria:
npm run db:migratepasses.npm run db:seedpasses.- Backend starts without generated default secrets.
GET /api/public/content-catalog/:contentTypeworks for the required seeded content catalog types.- Any remaining backend runtime blocker is captured as a specific follow-up with file/error references.
2. Backend Lint Debt Cleanup
Status: open.
Problem:
Backend ESLint 10 is configured, but npm run lint fails on existing generated/template lint debt.
Required work:
- Fix unused imports, unused variables, useless assignments, and generated-template lint failures.
- Do not add broad ignores to hide debt.
- Do not disable rules inline unless a documented, reviewed exception is unavoidable.
- Keep generated-code behavior unchanged while cleaning lint.
Acceptance criteria:
npm run lintpasses frombackend/.- No broad lint-disable blocks are added.
- No generated route/service behavior changes unless required to remove a real defect.
3. Tenant Boundary Audit And Tests
Status: open and high priority.
Problem:
Generated backend code has partial tenant scoping. Multi-tenant correctness cannot rely on frontend filtering.
Required work:
- Audit all tenant-owned generated and product routes for organization scoping.
- Resolve inconsistent
organizationsIdversusorganizationIdusage where it affects tenant-owned data. - Ensure create/update/delete paths cannot accept another tenant's organization or campus.
- Ensure list/count/autocomplete endpoints are tenant-scoped.
- Add backend tests proving cross-tenant records are not visible or mutable.
Acceptance criteria:
- Tenant isolation tests cover users, campuses, staff, students, attendance, messages, documents, and product module tables.
- A non-global user cannot read or mutate another tenant's data.
- Campus-scoped users cannot mutate another campus unless their backend permission explicitly allows it.
4. Role Model Decision
Status: open.
Problem:
Backend currently maps generated roles to product roles. It is not yet a final product decision whether this mapping is the supported model or product roles should become first-class persisted backend roles/permissions.
Required decision:
- Option A: keep generated-role to product-role mapping as the supported model.
- Option B: create first-class persisted product roles:
Teacher,Para,Office Manager,Director,Superintendent.
Required work after decision:
- Document the chosen role model.
- Align
/api/auth/mepermissions and product role payload with the chosen model. - Add backend role/permission tests for staff, director, and superintendent paths.
- Keep frontend navigation driven by backend role/permissions.
Acceptance criteria:
- Role model is documented in backend docs.
- Backend tests prove role access for product modules.
- No frontend role grants capability that backend does not enforce.
5. Product Onboarding Contract
Status: blocked by customer decision.
Problem:
Generated auth signup/profile endpoints exist, but they do not define the product workflow for company creation, campus creation, user creation, staff profile creation, role assignment, campus assignment, or profile updates.
No-go rules:
- Do not implement frontend registration.
- Do not implement profile creation/editing UI.
- Do not treat generated signup/profile endpoints as the product onboarding contract.
- Do not add temporary compatibility paths.
Required customer decisions:
- Who creates a company.
- Who creates campuses.
- Who invites or creates users.
- How staff profiles are created and linked to users.
- How roles and campuses are assigned.
- Which profile fields users may update themselves.
- Which profile fields require director/superintendent/admin permissions.
Required work after decision:
- Add backend onboarding contract and docs.
- Add tenant-scoped backend workflows.
- Add frontend typed API modules.
- Add frontend business hooks.
- Add UI only after backend contract exists.
- Add authenticated Playwright workflows using backend-seeded fixtures.
Acceptance criteria:
- Onboarding workflow is customer-approved and documented.
- Backend owns all creation, assignment, and permission checks.
- Frontend only exposes flows backed by typed backend contracts.
6. Refresh Token Maintenance
Status: open.
Problem:
Cookie auth and refresh rotation exist, but scheduled cleanup for expired/revoked refresh-token rows remains unresolved.
Required work:
- Define refresh-token retention period.
- Add cleanup job or operational command.
- Ensure cleanup is observable.
- Document operational usage.
Acceptance criteria:
- Expired and revoked refresh-token rows are cleaned after the approved retention window.
- Cleanup failures are visible and not silent.
- Auth behavior remains unchanged for valid sessions.
7. API Documentation Hardening
Status: open.
Problem:
Markdown docs exist for migrated modules, but Swagger/OpenAPI coverage for product-specific and cookie-session endpoints is incomplete.
Required work:
- Document
/api/auth/signin/local. - Document
/api/auth/refresh. - Document
/api/auth/signout. - Document
/api/auth/me. - Document product module endpoints that are not covered by generated Swagger output.
- Document response and error shapes per endpoint.
Acceptance criteria:
- API docs match actual route payloads and response shapes.
- Cookie auth behavior is explicit.
- Frontend API contract tests remain aligned with docs.
8. Policy And Safety Acknowledgment Persistence
Status: open pending product contract.
Problem:
Policy content is document-backed, but policy/protocol acknowledgments are not yet persisted.
Required decisions:
- Which policies/protocols require acknowledgment.
- Which roles must acknowledge.
- Whether acknowledgments are per document version.
- Who can report acknowledgment status.
Required work after decision:
- Add acknowledgment backend model/migration/service/route.
- Enforce tenant and role scope.
- Add frontend typed API and business workflow.
- Add report views only if required.
Acceptance criteria:
- Acknowledgments survive reload.
- Acknowledgment status is tenant-scoped.
- Unauthorized roles cannot view individual acknowledgment records.
9. Attendance Source Contracts
Status: partially open.
Current state:
- Campus attendance daily aggregate summaries are implemented for the current UI.
- Staff attendance snapshot/reporting is read-only.
- Student/class attendance source-of-truth workflow is not defined.
Open decisions:
- Whether campus attendance aggregates are manually entered, imported, or derived from student attendance records.
- Which external or internal source owns staff attendance writes/imports.
- Whether student-level attendance UI is required.
Required work after decision:
- Add write/import endpoints only after source contract exists.
- Keep derived summaries server-side if summaries are derived.
- Add backend tests for source-of-truth calculations.
- Add frontend workflows only after backend contracts exist.
Acceptance criteria:
- Attendance source of truth is documented.
- UI values can be traced to backend records or server-side derivation.
- No frontend-only attendance source remains in persisted workflows.
10. Generated Audio Provider Contract
Status: open pending provider decision.
Problem:
Classroom timer uses built-in Web Audio sounds. AI-generated audio UI is intentionally not exposed because no backend audio provider contract exists.
No-go rules:
- Do not add generated audio UI.
- Do not call external audio providers from frontend runtime.
- Do not add frontend API keys or provider secrets.
Required work after decision:
- Define backend provider contract.
- Keep provider secrets in backend env.
- Add backend service with native provider errors where required.
- Add typed frontend API and explicit loading/error states.
Acceptance criteria:
- Generated audio is backend-mediated.
- No provider secret reaches the browser.
- Provider failures remain visible.
11. File Upload And Download Permissions
Status: open.
Problem:
Backend file and document routes exist. Product file workflows need explicit permission verification before new upload/download UI is added.
Required work:
- Audit upload permissions.
- Audit download permissions.
- Verify tenant and document ownership checks.
- Add typed frontend upload client only for approved workflows.
Acceptance criteria:
- Unauthorized users cannot access another tenant's files.
- Upload/download behavior is documented and tested before new UI is added.
12. Public Backend Route Audit
Status: open.
Problem:
Public routes must be intentionally public. This includes public content catalog routes and any generated/template public integrations.
Required work:
- List all routes without auth middleware.
- Mark each as public-by-design or requiring auth.
- Add auth where required.
- Document intentionally public routes.
Acceptance criteria:
- Every unauthenticated backend route is documented.
- No tenant-owned data is exposed through accidental public routes.
13. Backend-Seeded Authenticated E2E
Status: blocked by onboarding/profile fixtures.
Problem:
Current Playwright coverage includes backend-free smoke tests and backend-seeded content catalog tests. Authenticated persisted workflows need backend-seeded users, roles, campuses, staff profiles, and known credentials.
Required prerequisites:
- Product onboarding/profile contract.
- Backend-seeded auth fixtures.
- Tenant-scoped campus/staff fixtures.
- Stable test credentials stored only in ignored local env or dedicated test seed config.
Required workflows after prerequisites:
- Login to dashboard.
- Director creates or edits a FRAME entry and sees it after reload.
- Staff completes QBS quiz and director/superintendent sees compliance.
- Office enters campus attendance and superintendent sees aggregate.
- Director submits walkthrough and sees summary update.
- Staff marks a sign learned and progress persists after reload.
Acceptance criteria:
- Authenticated e2e tests use backend seeds, not frontend mock data.
- Tests do not require production secrets.
- Tests are documented and repeatable.
14. Accessibility Test Coverage
Status: open.
Required work:
- Add axe/Playwright accessibility checks for login.
- Add axe/Playwright checks for dashboard.
- Add checks for sidebar navigation.
- Add checks for modal dialogs.
- Add checks for forms with validation.
- Add checks for tables/reports.
Acceptance criteria:
- Accessibility tests run in a documented command.
- Critical violations block completion of the refactor.
15. ref-frontend/ Removal
Status: open.
Required work:
- Confirm no active docs require
ref-frontend/for endpoint contract reference. - Confirm no scripts import or run
ref-frontend/. - Delete
ref-frontend/. - Update root docs and any setup docs.
Acceptance criteria:
- Only
frontend/andbackend/remain as active application code. - No docs describe
ref-frontend/as needed for normal development.
16. OAuth Provider Strategy Modernization
Status: open. Deferred — run after the backend TypeScript/ESM migration (see backend/docs/typescript-esm-migration-plan.md, decision 0.7).
Problem:
Social login uses passport-google-oauth2 (0.2.0, last published 2022) and passport-microsoft (2.1.0). The Google strategy is low-maintenance and should be modernized, ideally consolidating both providers on a single maintained OAuth/OIDC library.
Required work:
- Choose target: minimal swap to
passport-google-oauth20, or consolidate both providers onopenid-client. - Replace the Google (and optionally Microsoft) passport strategy in
backend/src/auth/auth.ts. - Keep the existing cookie-based session and JWT issuance unchanged.
- Verify callback URLs, scopes, and the social-signup user flow end to end.
- Update auth docs (
backend/docs/auth-profile.md,cookie-auth.md).
Acceptance criteria:
- Google and Microsoft sign-in work end to end with the chosen library.
- No deprecated/unmaintained OAuth strategy remains in dependencies.
- Cookie/JWT auth behavior is unchanged for existing sessions.
- This change is isolated from the language/module migration (separate PR/task).
Strict Implementation Sequence
Use this order unless the user explicitly reprioritizes:
- Backend migration and seed verification.
- Backend lint debt cleanup.
- Tenant boundary audit and tests.
- Role model decision and enforcement tests.
- Public route audit.
- API documentation hardening.
- Product onboarding after customer decision.
- Authenticated backend-seeded e2e after onboarding/profile fixtures exist.
- Remaining optional product contracts: acknowledgments, attendance imports, generated audio, file upload/download UI.
- Accessibility test coverage.
- Remove
ref-frontend/. - OAuth provider strategy modernization (after backend TS/ESM migration).
Definition Of Done
The integration refactor is complete only when all of the following are true:
- Backend migrations and seeders pass on the configured local database.
- Backend lint passes without broad ignores.
- Backend tenant isolation tests prove cross-tenant data is not visible or mutable.
- Backend role/permission tests cover product staff, director, and superintendent paths.
- Every unauthenticated backend route is documented as public-by-design.
- Product onboarding contract is customer-approved or explicitly excluded from release scope.
- Every visible frontend workflow is backed by a typed backend API contract.
- No frontend runtime workflow depends on mock, sample, seed, or fallback records for persisted behavior.
- Frontend
typecheck,lint,test,build,test:e2e, and documented seeded e2e suites pass in their required environments. - Backend auth/API docs match actual route behavior.
- Required accessibility checks pass.
ref-frontend/is deleted or a dated, explicit exception explains why it is still needed.