Build a comprehensive multi-page web application using Next.js App Router (app/ directory), TypeScript, and Tailwind CSS. The application, named 'Debt Compass', will help university students and their parents manage educational debt and improve financial literacy. The core functionality should revolve around comparing loan options, modeling potential debt burdens, and developing repayment strategies.
**Database Schema (Drizzle ORM with PostgreSQL):**
1. **users:**
* `id` (UUID, primary key)
* `email` (VARCHAR, unique)
* `password` (VARCHAR)
* `role` ENUM ('student', 'parent', 'admin')
* `createdAt` (TIMESTAMP)
* `updatedAt` (TIMESTAMP)
2. **student_profiles:**
* `id` (UUID, primary key)
* `userId` (UUID, foreign key to users.id, unique)
* `schoolName` (VARCHAR)
* `program` (VARCHAR)
* `expectedGraduationYear` (INTEGER)
* `createdAt` (TIMESTAMP)
* `updatedAt` (TIMESTAMP)
3. **loan_options:**
* `id` (UUID, primary key)
* `name` (VARCHAR)
* `type` ENUM ('federal', 'private', 'institutional')
* `interestRate` (DECIMAL)
* `loanTermYears` (INTEGER)
* `fees` (DECIMAL)
* `createdAt` (TIMESTAMP)
* `updatedAt` (TIMESTAMP)
4. **user_loans:**
* `id` (UUID, primary key)
* `userId` (UUID, foreign key to users.id)
* `loanOptionId` (UUID, foreign key to loan_options.id)
* `principalAmount` (DECIMAL)
* `borrowingDate` (DATE)
* `createdAt` (TIMESTAMP)
* `updatedAt` (TIMESTAMP)
5. **repayment_plans:**
* `id` (UUID, primary key)
* `userId` (UUID, foreign key to users.id)
* `planName` (VARCHAR)
* `monthlyPayment` (DECIMAL)
* `totalInterestPaid` (DECIMAL)
* `totalPrincipalPaid` (DECIMAL)
* `totalCost` (DECIMAL)
* `startDate` (DATE)
* `endDate` (DATE)
* `createdAt` (TIMESTAMP)
* `updatedAt` (TIMESTAMP)
6. **financial_literacy_modules:**
* `id` (UUID, primary key)
* `title` (VARCHAR)
* `content` (TEXT)
* `moduleType` ENUM ('article', 'video', 'quiz')
* `createdAt` (TIMESTAMP)
* `updatedAt` (TIMESTAMP)
**Core Features and Pages:**
1. **Authentication:** Secure user registration, login, and logout using NextAuth.js with email/password and potentially OAuth providers.
2. **Dashboard (app/dashboard):** A personalized overview for logged-in users, showing current loan summary, projected debt, upcoming payments, and quick access to financial literacy modules. This page should be protected and only accessible after authentication.
3. **Loan Comparison Tool (app/compare-loans):**
* Allows users to input loan amounts, select from predefined or user-added loan options (using `loan_options` and `user_loans` tables).
* Calculates estimated monthly payments, total interest, and total repayment cost for each selected loan.
* Provides a clear, sortable table comparing different loan scenarios.
* **API Routes:**
* `POST /api/loans/compare`: Accepts loan parameters and returns calculated repayment details.
* `GET /api/loans/options`: Fetches all available loan options.
* `POST /api/user-loans`: Adds a new loan to the user's profile.
* `GET /api/user-loans`: Retrieves the user's current loans.
* `PUT /api/user-loans/[id]`: Updates an existing user loan.
* `DELETE /api/user-loans/[id]`: Deletes a user loan.
4. **Debt Repayment Planner (app/repayment-planner):**
* Users can input their total debt and desired monthly payment.
* Generates a projected repayment schedule, including principal and interest breakdown over time (using `repayment_plans` table).
* Allows users to simulate different repayment strategies (e.g., snowball, avalanche) and visualize their impact.
* **API Routes:**
* `POST /api/repayment-planner`: Generates and saves a repayment plan.
* `GET /api/repayment-planner`: Retrieves the user's saved repayment plans.
* `GET /api/repayment-planner/[id]`: Retrieves a specific repayment plan.
* `PUT /api/repayment-planner/[id]`: Updates a repayment plan.
* `DELETE /api/repayment-planner/[id]`: Deletes a repayment plan.
5. **Financial Literacy Hub (app/literacy):**
* Displays a list of articles, videos, and quizzes from the `financial_literacy_modules` table.
* Individual module pages to display content.
* Basic quiz functionality (store results if desired, but not strictly required for MVP).
* **API Routes:**
* `GET /api/literacy/modules`: Fetches all available literacy modules.
* `GET /api/literacy/modules/[id]`: Fetches a specific literacy module.
6. **User Profile Management (app/profile):**
* Allows users to update their personal information and `student_profiles`.
* **API Routes:**
* `GET /api/profile`: Retrieves user profile data.
* `PUT /api/profile`: Updates user profile data.
**Technical Stack:**
* **Framework:** Next.js App Router (app/ directory)
* **Language:** TypeScript
* **Styling:** Tailwind CSS
* **Database:** PostgreSQL
* **ORM:** Drizzle ORM (with PostgreSQL adapter)
* **Authentication:** NextAuth.js
* **State Management:** React Context API or Zustand (for simpler client-side state if needed).
**Implementation Details:**
* Implement robust error handling for all API routes and client-side interactions.
* Ensure proper data validation on both client and server sides.
* Create reusable UI components using React and Tailwind CSS.
* Structure the project logically within the `app/` directory for pages and `components/`, `lib/`, `hooks/`, `server/` (for Drizzle setup/migrations) directories.
* Set up Drizzle migrations for database schema changes.
* The application should be fully responsive and mobile-first.
* DO NOT generate a simple landing page or a basic SPA.