As an AI, you are tasked with developing a fully functional MVP for a SaaS application named 'Strategy Meter' using Next.js 14 App Router, TypeScript, Tailwind CSS, Drizzle ORM (with SQLite for development, adaptable to PostgreSQL for production), and shadcn/ui components. This application will help entrepreneurs define, track, and evaluate their business strategies.
The MVP must include the following core features and adhere to the specified technical architecture:
**1. User Authentication:** Implement robust user authentication using NextAuth.js (supporting email/password and ideally Google OAuth provider). This includes login, registration, and session management.
**2. Strategy Management (Full CRUD):**
* **Create Strategy:** Users can define a new strategy with a title, detailed description, start and end dates, and initial target Key Performance Indicators (KPIs).
* **View Strategies:** A dashboard or dedicated page listing all active and completed strategies for the authenticated user.
* **View Single Strategy:** A detailed page for each strategy showing its description, overall progress, associated KPIs, and decision history.
* **Update Strategy:** Ability to edit strategy details.
* **Delete Strategy:** Ability to remove an existing strategy.
**3. KPI Tracking (Full CRUD):**
* **Create KPI:** Users can add multiple KPIs (name, target value, unit, e.g., 'New Leads', '100', 'count') to an existing strategy.
* **View KPIs:** KPIs should be displayed within the strategy detail page.
* **Update KPI:** Ability to modify KPI details.
* **Delete KPI:** Ability to remove a KPI from a strategy.
**4. KPI Progress Recording:**
* Users can record daily/weekly/monthly progress values for each KPI. This should include the recorded value and the date of recording.
* Ability to view a history of progress records for each KPI.
**5. Progress Visualization:**
* On the single strategy detail page, display simple line or bar charts (e.g., using Recharts or Tremor) visualizing KPI progress against their defined targets over time.
* An overall strategy progress indicator (e.g., a percentage or status bar) based on average KPI performance or completion towards goals.
**6. Decision Support System:**
* At predefined intervals (e.g., midway through the strategy, at the end date, or manually triggered), provide a simple questionnaire or guided prompts to help users reflect on the strategy's performance. Questions like 'Are the initial assumptions still valid?', 'Were resources sufficient?', 'What worked/didn't work?' should be posed.
* The user's decision (e.g., 'Continue', 'Adjust', 'Pivot') and rationale, along with any follow-up actions, should be recorded and displayed in the strategy's history.
**Database Schema (Drizzle ORM):**
Define the following tables in `db/schema.ts`:
* `users`: `id` (PK), `name`, `email` (unique), `emailVerified`, `image`
* `accounts`: `userId` (FK to users), `type`, `provider`, `providerAccountId` (PK for provider+accountId), `refresh_token`, `access_token`, `expires_at`, `token_type`, `scope`, `id_token`, `session_state` (for NextAuth)
* `sessions`: `sessionToken` (PK), `userId` (FK to users), `expires`
* `verificationTokens`: `identifier`, `token` (unique), `expires`
* `strategies`: `id` (PK), `userId` (FK to users), `title`, `description`, `startDate`, `endDate`, `status` (`active`, `completed`, `paused`), `createdAt`, `updatedAt`
* `kpis`: `id` (PK), `strategyId` (FK to strategies), `name`, `targetValue` (number), `unit` (string), `createdAt`, `updatedAt`
* `kpiProgressRecords`: `id` (PK), `kpiId` (FK to kpis), `value` (number), `recordDate` (date), `createdAt`
* `strategyDecisions`: `id` (PK), `strategyId` (FK to strategies), `decisionType` (`continue`, `adjust`, `pivot`), `rationale` (text), `followUpActions` (text), `decisionDate`, `createdAt`
**API Routes (Next.js App Router):**
Create API routes within the `app/api` directory for all CRUD operations, ensuring proper authentication and authorization (users can only access and modify their own data).
* `/api/auth/...` (handled by NextAuth.js)
* `/api/strategies` (GET: fetch all user strategies; POST: create new strategy)
* `/api/strategies/[id]` (GET: fetch single strategy; PUT: update strategy; DELETE: delete strategy)
* `/api/strategies/[id]/kpis` (GET: fetch KPIs for a strategy; POST: add KPI to a strategy)
* `/api/kpis/[id]` (PUT: update KPI; DELETE: delete KPI)
* `/api/kpis/[id]/progress` (GET: fetch progress records for KPI; POST: add new progress record for KPI)
* `/api/strategies/[id]/decisions` (GET: fetch decisions for a strategy; POST: record a new decision)
**Pages (Next.js App Router):**
Implement the following pages with a multi-page structure:
* `/`: A simple landing/marketing page.
* `/dashboard`: The main user dashboard, providing an overview of active strategies and key metrics.
* `/strategies`: A page listing all strategies, with options to filter or sort.
* `/strategies/new`: A form page for creating a new strategy.
* `/strategies/[id]`: A dynamic page displaying the detailed view of a single strategy, including KPI lists, progress charts, and decision history.
* `/strategies/[id]/edit`: A form page for editing an existing strategy.
* `/login`, `/register`: Authentication pages.
**Technical Requirements & Best Practices:**
* Initialize a Next.js 14 project with TypeScript and App Router.
* Configure Drizzle ORM with `drizzle-kit` for schema management and migrations. Provide the initial `drizzle.config.ts` and `db/schema.ts`.
* Use Tailwind CSS for styling and integrate shadcn/ui components for a consistent and modern UI.
* Implement client-side data fetching and mutations efficiently using `React Query` or `SWR` hooks.
* Ensure proper error handling, loading states, and form validation across the application.
* The application should be responsiv