As an expert Full Stack Developer, your task is to build a comprehensive, fully functional MVP for 'Payment Smart' using Next.js 14 App Router, React, TypeScript, Tailwind CSS, Drizzle ORM with PostgreSQL. The application must feature a multi-page structure, robust API routes, and full CRUD operations where applicable. Focus on delivering a complete application, not just a landing page or a single-page application. Implement a basic user authentication system (e.g., email/password) for managing companies and their payment processors. The application's core functionality will revolve around analyzing payment processing fees and comparing alternative providers.
**Key Pages & Functionality:**
1. **Landing Page (`/`):** A marketing page highlighting the value proposition of 'Payment Smart'.
2. **Authentication (`/signup`, `/login`):** User registration and login. Users create a company profile upon signup.
3. **Dashboard (`/dashboard`):** The central hub displaying aggregated analytics from connected payment processors. This includes total transactions, total fees paid, effective fee rate, and potential savings based on comparisons.
4. **Processor Management (`/processors`):** A page to connect new payment processors (e.g., Stripe, PayPal) via API keys (store securely, e.g., encrypted). Users can view, update (reconfigure keys), or delete connected processors. This page should also trigger data fetching from the external APIs.
5. **Comparison Tool (`/compare`):** A tool where users can input their transaction volume/type or select a connected processor to see a comparison of fees with alternative payment processors. This should provide estimated annual savings.
6. **Reports (`/reports`):** Detailed reports showing historical fee data, breakdowns by transaction type, and an overview of potential optimization opportunities.
7. **Migration Guides (`/migration`):** Resources, checklists, and template downloads (e.g., CSV for subscription data export/import) to guide users through switching payment processors.
8. **Settings (`/settings`):** User profile and company settings.
**Technology Stack:**
* **Framework:** Next.js 14 (App Router)
* **Language:** TypeScript
* **Styling:** Tailwind CSS
* **Database:** PostgreSQL
* **ORM:** Drizzle ORM
* **Authentication:** Basic email/password authentication (can use NextAuth.js if simpler for MVP, but plain implementation is fine too).
* **Deployment:** Vercel-ready configuration.
**Database Schema (Drizzle ORM):**
* **`users` table:** `id` (uuid, PK), `email` (string, unique), `password_hash` (string), `created_at` (timestamp), `updated_at` (timestamp).
* **`companies` table:** `id` (uuid, PK), `user_id` (uuid, FK to `users`), `name` (string), `created_at` (timestamp), `updated_at` (timestamp).
* **`payment_processors` table:** `id` (uuid, PK), `company_id` (uuid, FK to `companies`), `name` (string, e.g., 'Stripe', 'PayPal'), `api_key_encrypted` (string), `secret_key_encrypted` (string, optional), `configured_at` (timestamp).
* **`transactions` table:** `id` (uuid, PK), `payment_processor_id` (uuid, FK to `payment_processors`), `external_id` (string, unique from processor), `amount` (numeric), `fee_amount` (numeric), `currency` (string), `transaction_date` (timestamp), `status` (string, e.g., 'completed', 'refunded'), `created_at` (timestamp).
* **`processor_profiles` table:** `id` (uuid, PK), `name` (string, e.g., 'Stripe Standard', 'PayPal Business'), `base_fee_percent` (numeric), `per_transaction_fee` (numeric), `currency` (string), `notes` (text). (This table will store static/dummy data initially for comparison purposes, representing alternative processors).
**API Routes & CRUD Operations:**
* **`/api/auth/register`, `/api/auth/login`:** User authentication.
* **`/api/company`:** CRUD for company profile (Read, Update).
* **`/api/processors`:** CRUD for `payment_processors` (Create: connect, Read: list, Update: reconfigure, Delete: disconnect).
* **`/api/processors/[id]/fetch-data`:** An endpoint to simulate (or, if possible, integrate with a dummy external API) fetching transaction data from a connected payment processor. This should store fetched data into the `transactions` table.
* **`/api/transactions`:** Read operations for fetching and filtering transaction data for analysis.
* **`/api/compare`:** Logic for processing comparison requests and returning potential savings.
**General Requirements:**
* **Full CRUD:** Ensure all relevant entities (`users`, `companies`, `payment_processors`) have create, read, update, and delete functionality implemented via API routes and front-end forms/pages.
* **Data Security:** Emphasize secure storage of API keys (e.g., using environment variables and suggesting encryption for sensitive data in DB).
* **Error Handling:** Implement robust error handling for API calls and user input.
* **Loading States:** Show appropriate loading indicators for asynchronous operations.
* **Environment Variables:** Clearly define and use environment variables for database connections, API keys, etc.
* **Code Structure:** Organize code logically within the Next.js `app/`, `components/`, `lib/`, `db/` directories.
Your task is to provide the entire codebase for this MVP, including file structure, database migrations, API routes, and UI components, ensuring it's ready for deployment to Vercel. Focus on functionality over extreme visual polish, but ensure a clean and usable Tailwind CSS-based interface.