You are an expert Next.js developer tasked with building a fully functional MVP for a personal finance management application called 'Wealth Compass'. The application will help individuals manage sudden wealth (e.g., settlements, inheritance, lottery wins) through personalized guidance and tools.
Technology Stack:
* Frontend/Backend: Next.js 14+ with App Router (app/ directory).
* Database: PostgreSQL (simulated or using a local setup like Docker/Supabase dev).
* ORM: Drizzle ORM.
* Styling: Tailwind CSS.
* Authentication: Basic email/password for MVP; plan for NextAuth.js in future iterations.
Core Functionalities & Pages:
1. Authentication:
* User Registration (Email, Password)
* User Login
* Basic session management (e.g., using secure cookies)
2. Dashboard Page (`/dashboard`):
* Displays an overview of the user's financial status.
* Summary of total funds, current balance, recent transactions.
* Quick links to other sections.
* A prominent section for 'Next Steps' or recommended actions based on their profile.
3. Financial Profile Management (`/profile`):
* Page: A form to create/edit user's financial profile.
* Data fields: Initial settlement amount, existing assets, liabilities (debts), risk tolerance (e.g., low, medium, high), immediate needs (e.g., housing, medical bills).
* CRUD:
* CREATE: Initial profile creation after registration.
* READ: Display current profile.
* UPDATE: Edit profile details.
4. Budgeting & Transactions (`/budget`):
* Page: Allows users to define budget categories (e.g., Housing, Food, Investment, Emergency Fund).
* Data fields for BudgetCategory: Name, allocated percentage/amount.
* Page: Allows users to add and view transactions.
* Data fields for Transaction: Amount, type (enum: 'income', 'expense'), categoryId, description, date.
* CRUD:
* CREATE: Add new budget categories, add new transactions.
* READ: View all budget categories, view all transactions (filterable by category, date).
* UPDATE: Edit budget category details, edit transaction details.
* DELETE: Remove budget categories, delete transactions.
5. Goals Management (`/goals`):
* Page: Users can define long-term financial goals.
* Data fields for Goal: Name (e.g., Buy a House, Child's Education), target amount, target date, current savings towards goal.
* CRUD:
* CREATE: Add new financial goals.
* READ: View all goals with progress indicators.
* UPDATE: Edit goal details, update current savings.
* DELETE: Remove goals.
6. Educational Content (`/learn`):
* Page: Displays a list of financial literacy modules.
* Data fields for EducationalModule: Title, content (Markdown/Rich Text), category.
* CRUD (Read-only for users; assume initial data or admin-managed):
* READ: View list of modules, view individual module content.
Database Schema (Drizzle ORM):
Define the Drizzle schema files (`drizzle/schema.ts`) for the following tables:
* `users`: id (uuid, primary key), email (string, unique), passwordHash (string), createdAt (timestamp), updatedAt (timestamp)
* `financialProfiles`: id (uuid, primary key), userId (uuid, foreign key to users.id), initialSettlementAmount (numeric), existingAssets (numeric), liabilities (numeric), riskTolerance (enum: 'low', 'medium', 'high'), immediateNeeds (text), createdAt (timestamp), updatedAt (timestamp)
* `budgetCategories`: id (uuid, primary key), userId (uuid, foreign key to users.id), name (string), allocatedPercentage (numeric), createdAt (timestamp), updatedAt (timestamp)
* `transactions`: id (uuid, primary key), userId (uuid, foreign key to users.id), amount (numeric), type (enum: 'income', 'expense'), categoryId (uuid, foreign key to budgetCategories.id), description (text), date (date), createdAt (timestamp), updatedAt (timestamp)
* `goals`: id (uuid, primary key), userId (uuid, foreign key to users.id), name (string), targetAmount (numeric), targetDate (date), currentSavings (numeric), createdAt (timestamp), updatedAt (timestamp)
* `educationalModules`: id (uuid, primary key), title (string), content (text), category (string), createdAt (timestamp), updatedAt (timestamp)
API Routes (`app/api/...`):
Implement API routes for full CRUD operations for `financialProfiles`, `budgetCategories`, `transactions`, and `goals`. All API routes should enforce user authentication and authorization (e.g., ensuring a user can only access/modify their own data).
* `/api/auth/register` (POST)
* `/api/auth/login` (POST)
* `/api/profile` (GET, PUT)
* `/api/budget-categories` (GET, POST)
* `/api/budget-categories/[id]` (PUT, DELETE)
* `/api/transactions` (GET, POST)
* `/api/transactions/[id]` (PUT, DELETE)
* `/api/goals` (GET, POST)
* `/api/goals/[id]` (PUT, DELETE)
File Structure:
Follow Next.js App Router conventions:
* `app/layout.tsx` (Root layout)
* `app/page.tsx` (Home/Landing page)
* `app/login/page.tsx`
* `app/register/page.tsx`
* `app/dashboard/page.tsx`
* `app/profile/page.tsx`
* `app/budget/page.tsx`
* `app/goals/page.tsx`
* `app/learn/page.tsx`
* `app/api/auth/register/route.ts`
* `app/api/auth/login/route.ts`
* `app/api/profile/route.ts`
* `app/api/budget-categories/route.ts`
* `app/api/budget-categories/[id]/route.ts`
* `app/api/transactions/route.ts`
* `app/api/transactions/[id]/route.ts`
* `app/api/goals/route.ts`
* `app/api/goals/[id]/route.ts`
* `drizzle/schema.ts`
* `lib/db.ts` (Drizzle connection and utility functions)
* `components/...` (reusable UI components for forms, cards, navigation etc.)
* `middleware.ts` (for authentication protection on routes like /dashboard)
User Interface:
* Use Tailwind CSS for styling, ensuring a clean and intuitive design.
* Implement responsive design for mobile and desktop viewpor