Create a full-stack Next.js application with the App Router (using the `app/` directory) that acts as a personal finance and payroll assistant, specifically designed to help young adults and first-time employees understand their pay stubs. The application should be a multi-page experience with robust user authentication and data management.
**Core Features:
1. **User Authentication:** Implement secure user registration and login using NextAuth.js with email/password and potentially OAuth providers (Google, GitHub).
2. **Dashboard:** A personalized dashboard upon login showing a summary of recent calculations, upcoming paydays, and quick access to core features.
3. **Payroll Calculator:** A core feature allowing users to input:
* Hourly Wage
* Hours Worked (per week/period)
* Pay Period Frequency (Weekly, Bi-weekly, Monthly)
* Pre-tax deductions (e.g., health insurance premiums, retirement contributions)
* Post-tax deductions (e.g., garnishments, specific voluntary deductions)
* Tax information (e.g., tax filing status, number of dependents - simplified for MVP)
The calculator should output:
* Gross Pay
* Total Pre-tax Deductions
* Taxable Income
* Estimated Taxes (Federal, State - use simplified calculations for MVP, e.g., flat rates or basic progressive tiers)
* Total Post-tax Deductions
* Net Pay
4. **Pay Stub Explainer:** A feature where users can input values from a real pay stub (or have the calculator populate it) and click on each line item (e.g., 'Medical Adj', 'Gross Pay', 'Federal Tax') to get a detailed, plain-language explanation of what it means, why it's there, and its impact. Use tooltips or modal popups for explanations.
5. **Deduction Management:** Allow users to add, edit, and delete common deduction types (Health Insurance, Dental, Vision, 401k, etc.) with their costs and tax implications (pre-tax vs. post-tax).
6. **Income History:** A page to view past payroll calculations and their breakdowns.
**Technical Stack & Requirements:
* **Framework:** Next.js (App Router - `app/` directory)
* **Language:** TypeScript
* **Database:** PostgreSQL
* **ORM:** Drizzle ORM (for schema definition and querying)
* **UI Library:** Tailwind CSS (for styling) and potentially a component library like Shadcn/ui for pre-built accessible components.
* **Authentication:** NextAuth.js
**Database Schema (Drizzle ORM):**
Define the following tables:
1. `users` table: `id`, `name`, `email`, `emailVerified`, `image`
2. `accounts` table: (for NextAuth.js integration)
3. `sessions` table: (for NextAuth.js integration)
4. `verificationTokens` table: (for NextAuth.js integration)
5. `payrollCalculations` table: `id`, `userId` (foreign key to `users`), `calculationDate`, `hourlyWage`, `hoursWorked`, `payPeriod`, `grossPay`, `totalPreTaxDeductions`, `taxableIncome`, `estimatedTaxes`, `totalPostTaxDeductions`, `netPay`, `createdAt`, `updatedAt`
6. `deductions` table: `id`, `payrollCalculationId` (foreign key to `payrollCalculations`), `name`, `amount`, `isPreTax` (boolean), `type` (e.g., 'Health Insurance', '401k', 'Other'), `createdAt`, `updatedAt`
7. `taxDetails` table: `id`, `payrollCalculationId` (foreign key to `payrollCalculations`), `federalTax`, `stateTax`, `localTax`, `socialSecurityTax`, `medicareTax`, `createdAt`, `updatedAt`
**API Routes (within `app/api/` or Server Actions):**
Implement CRUD operations for:
* Users (managed via NextAuth.js)
* Payroll Calculations (Create, Read, Update, Delete)
* Deductions (Create, Read, Update, Delete associated with a calculation)
* Tax Details (Create, Read, Update, Delete associated with a calculation)
**Frontend Structure (`app/` directory):**
* `/app/layout.tsx`: Root layout.
* `/app/page.tsx`: Landing page.
* `/app/auth/signin/page.tsx`: Sign in page.
* `/app/dashboard/page.tsx`: User dashboard.
* `/app/calculate/page.tsx`: Payroll calculator form page.
* `/app/calculate/[id]/page.tsx`: View details of a specific payroll calculation.
* `/app/paystub-explainer/page.tsx`: Interactive pay stub explainer.
* `/app/deductions/page.tsx`: Manage user's deductions.
* `/app/api/...`: API routes or use Server Actions for backend logic.
**Key Implementation Details:**
* Utilize Next.js Server Components and Client Components appropriately.
* Implement form handling and validation on the client-side and server-side.
* Ensure all database interactions are transactional where necessary.
* Provide clear error handling and user feedback.
* The pay stub explainer should have a mechanism to either manually input values or link dynamically to a selected calculation's details to provide context-specific explanations.
* For the MVP, tax calculations can be simplified (e.g., using estimated flat rates based on rough income brackets), but the structure should allow for more complex logic later.