Create a full-stack web application using Next.js App Router, Drizzle ORM with PostgreSQL, and Tailwind CSS. The application, named 'Family Support System', is designed to help individuals living abroad manage financial support for their family members back home. It should feature a multi-page structure and implement robust CRUD operations for all data entities.
**Core Functionality:**
1. **User Authentication:** Implement secure authentication using Clerk or NextAuth.js. Users can register/login as either a 'Supporter' (living abroad) or a 'Recipient' (family member back home).
2. **Family Management:**
* **Supporter View:** Ability to invite and manage multiple 'Recipient' family members.
* **Recipient View:** Ability to link to one 'Supporter'.
3. **Budgeting (Supporter):**
* Create monthly budgets with predefined or custom categories (e.g., 'Living Expenses', 'Groceries', 'Medical', 'Education').
* Set target amounts for each category.
* Track actual expenses against the budget.
4. **Expense Tracking (Recipient):**
* Recipients can log expenses with date, amount, category, and optional notes/photos.
* Expenses should be linked to the Supporter's budget categories.
* Allow recipients to view their linked supporter's budget overview (read-only).
5. **Financial Transfers (Simulated):**
* Supporters can record planned or completed money transfers to recipients, including amount, date, and transfer method (e.g., 'Bank Transfer', 'Wise').
* Recipients can view incoming transfers.
* *Note: Actual money transfer integration is out of scope for MVP, simulate this functionality.*
6. **Reporting & Dashboard:**
* **Supporter Dashboard:** Overview of total sent, remaining budget, spending by category, and recent transfers.
* **Recipient Dashboard:** Overview of received funds, recent expenses, and upcoming/missing support.
* Generate monthly financial summary reports.
7. **Notifications:** Implement email or in-app notifications for:
* Budget nearing limit.
* New expense logged by recipient.
* Upcoming or overdue transfers.
**Technical Stack & Requirements:**
* **Framework:** Next.js (App Router - `app/` directory)
* **Database:** PostgreSQL
* **ORM:** Drizzle ORM (with Drizzle Kit for migrations)
* **Styling:** Tailwind CSS
* **State Management:** Zustand or React Context API
* **API Layer:** Next.js API Routes (`app/api/`) for backend logic.
**Database Schema Design (Drizzle):**
* `users` table: `id`, `email`, `name`, `role` ('supporter', 'recipient'), `clerk_id` (if using Clerk).
* `recipients` table: `id`, `userId` (foreign key to users), `supporterId` (foreign key to users, nullable if not linked yet).
* `budgets` table: `id`, `userId` (supporterId), `month`, `year`, `totalAmount`.
* `budget_categories` table: `id`, `budgetId`, `name`, `allocatedAmount`.
* `expenses` table: `id`, `recipientId`, `categoryId` (foreign key to budget_categories, nullable if category is custom/unassigned), `amount`, `date`, `description`, `receiptImageUrl` (optional).
* `transfers` table: `id`, `supporterId`, `recipientId`, `amount`, `date`, `method`, `status` ('pending', 'completed', 'failed').
**API Routes (CRUD):**
* `/api/users/*`: CRUD for user profiles.
* `/api/recipients/*`: CRUD for recipient management (invitations, linking).
* `/api/budgets/*`: CRUD for budgets and budget categories.
* `/api/expenses/*`: CRUD for expenses logged by recipients.
* `/api/transfers/*`: CRUD for managing financial transfers.
**Folder Structure:**
* `app/`: Main Next.js App Router directory.
* `layout.tsx`, `page.tsx` (Dashboard)
* `auth/`: Authentication pages.
* `dashboard/`: Supporter and Recipient dashboards.
* `budgets/`: Budget management pages.
* `expenses/`: Expense logging and viewing pages.
* `transfers/`: Transfer management pages.
* `api/`: API routes.
* `db/`: Drizzle ORM setup, schema definitions, migrations.
* `components/`: Reusable UI components.
* `lib/`: Utility functions, helper modules.
**Development Steps:**
1. Set up Next.js project with App Router.
2. Integrate Drizzle ORM with PostgreSQL and set up initial migrations.
3. Implement user authentication.
4. Build the UI using Tailwind CSS.
5. Develop API routes for each entity.
6. Implement frontend logic to interact with APIs, ensuring full CRUD functionality.
7. Create dashboards and reporting views.
8. Add notification system.