You are an expert full-stack developer tasked with building a comprehensive financial management application called 'Financial Compass' using Next.js App Router, Drizzle ORM with PostgreSQL, and Tailwind CSS. The application must support multi-page navigation and implement full CRUD (Create, Read, Update, Delete) operations for all core features, ensuring a robust and scalable MVP.
**Project Structure:**
- Use the Next.js App Router (`app/` directory) for routing.
- Organize components logically within `components/`.
- Create API routes in `app/api/`.
- Configure Drizzle ORM with PostgreSQL for database interactions.
- Utilize Tailwind CSS for styling.
**Database Schema (Drizzle ORM):**
Define the following tables:
1. `users`:
- `id` (UUID, primary key)
- `email` (text, unique)
- `passwordHash` (text)
- `createdAt` (timestamp)
- `updatedAt` (timestamp)
2. `incomeSources`:
- `id` (UUID, primary key)
- `userId` (UUID, foreign key to `users.id`)
- `name` (text)
- `averageMonthlyIncome` (decimal)
- `isSeasonal` (boolean)
- `seasonalityDetails` (jsonb, e.g., `{ startMonth: 3, endMonth: 10 }`)
- `createdAt` (timestamp)
- `updatedAt` (timestamp)
3. `budgets`:
- `id` (UUID, primary key)
- `userId` (UUID, foreign key to `users.id`)
- `name` (text)
- `allocatedAmount` (decimal)
- `categoryId` (UUID, foreign key to `budgetCategories.id`)
- `startDate` (date)
- `endDate` (date)
- `createdAt` (timestamp)
- `updatedAt` (timestamp)
4. `budgetCategories`:
- `id` (UUID, primary key)
- `userId` (UUID, foreign key to `users.id`, nullable for default categories)
- `name` (text)
- `isDefault` (boolean)
- `createdAt` (timestamp)
- `updatedAt` (timestamp)
5. `expenses`:
- `id` (UUID, primary key)
- `userId` (UUID, foreign key to `users.id`)
- `description` (text)
- `amount` (decimal)
- `categoryId` (UUID, foreign key to `budgetCategories.id`)
- `expenseDate` (date)
- `createdAt` (timestamp)
- `updatedAt` (timestamp)
6. `emergencyFunds`:
- `id` (UUID, primary key)
- `userId` (UUID, foreign key to `users.id`)
- `targetAmount` (decimal)
- `currentAmount` (decimal, default 0)
- `goalName` (text)
- `createdAt` (timestamp)
- `updatedAt` (timestamp)
7. `financialGoals`:
- `id` (UUID, primary key)
- `userId` (UUID, foreign key to `users.id`)
- `goalName` (text)
- `targetAmount` (decimal)
- `targetDate` (date)
- `currentSaved` (decimal, default 0)
- `priority` (integer)
- `createdAt` (timestamp)
- `updatedAt` (timestamp)
**API Routes (`app/api/`):**
Implement API routes for full CRUD operations for each of the above entities. Example:
- `app/api/users/route.ts` (CRUD for users)
- `app/api/income/route.ts` (CRUD for incomeSources)
- `app/api/budgets/route.ts` (CRUD for budgets)
- `app/api/expenses/route.ts` (CRUD for expenses)
- `app/api/emergency-fund/route.ts` (CRUD for emergencyFunds)
- `app/api/goals/route.ts` (CRUD for financialGoals)
Each API route should handle GET, POST, PUT/PATCH, and DELETE requests appropriately, interacting with the Drizzle ORM to perform database operations. Ensure proper request body parsing and response formatting (JSON).
**Frontend Components and Pages (`app/` and `components/`):**
Develop the following pages and components:
1. **Authentication:**
- `app/login/page.tsx`: Login form.
- `app/register/page.tsx`: Registration form.
- Implement session management (e.g., using NextAuth.js or custom JWT).
2. **Dashboard (`app/dashboard/page.tsx`):**
- Overview of current financial status.
- Summary of income, expenses, budget adherence, emergency fund progress, and financial goal progress.
- Links to detailed sections.
3. **Income Management (`app/income/page.tsx`, `app/income/[id]/edit/page.tsx`):**
- Page to list all income sources.
- Form to add a new income source (CRUD).
- Page to edit an existing income source (CRUD).
4. **Budgeting (`app/budget/page.tsx`, `app/budget/[id]/edit/page.tsx`):**
- Page to view current budgets and budget categories.
- Form to create new budgets and categories (CRUD).
- Page to edit budgets (CRUD).
- Implement logic to automatically suggest budgets based on income and fixed expenses.
5. **Expenses (`app/expenses/page.tsx`, `app/expenses/[id]/edit/page.tsx`):**
- Page to log and view expenses.
- Form to add a new expense, linking it to a budget category (CRUD).
- Page to edit expenses (CRUD).
- Implement expense categorization and tracking against budgets.
6. **Emergency Fund (`app/emergency-fund/page.tsx`, `app/emergency-fund/[id]/edit/page.tsx`):**
- Page to set up and track emergency fund goals.
- Form to define target amount and current savings (CRUD).
- Functionality to add/withdraw funds from the emergency fund.
7. **Financial Goals (`app/goals/page.tsx`, `app/goals/[id]/edit/page.tsx`):**
- Page to define and track long-term financial goals.
- Form to set goal name, target amount, target date, and priority (CRUD).
- Visualizations for goal progress.
**Key Functionality Requirements:**
- **User Authentication:** Secure user registration and login.
- **Data Persistence:** All user data must be saved to the PostgreSQL database via Drizzle ORM.
- **Responsive Design:** Ensure the application is usable on both desktop and mobile devices using Tailwind CSS.
- **State Management:** Implement efficient client-side state management where necessary.
- **Error Handling:** Implement robust error handling for API requests and user inputs.
- **Data Visualization:** Use basic charts or progress bars to visualize budget adherence, emergency fund progress, and financial goal progress.
**DO NOT** generate a simple landing page or a basic SPA. The requirement is a fully functional MVP with multi-page structure, database integration, and complete