# Bighappy Web User Panel

A production-ready Next.js web panel for the Bighappy platform — handling account activation, subscription management, and Stripe payments.

## Tech Stack

- **Next.js 16** (App Router)
- **TypeScript** (strict mode)
- **Redux Toolkit + Redux Persist**
- **Tailwind CSS** + custom design tokens
- **Radix UI** primitives (ShadCN-style)
- **Axios** with request/response interceptors + refresh token flow
- **HTTP-only Cookie Authentication**
- **Stripe** Hosted Checkout
- **React Hook Form + Zod** validation
- **React Hot Toast** notifications
- **next-themes** (Dark/Light mode, default dark)

---

## Getting Started

### 1. Clone & Install

```bash
npm install
```

### 2. Environment Variables

Copy `.env.example` to `.env.local` and fill in:

```env
NEXT_PUBLIC_API_URL=http://localhost:3001/api
NEXT_PUBLIC_APP_NAME=Bighappy
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
```

### 3. Run Development Server

```bash
npm run dev
```

Open [http://localhost:3000](http://localhost:3000).

---

## Project Structure

```
src/
├── app/                   # Next.js App Router pages
│   ├── layout.tsx         # Root layout with providers
│   ├── page.tsx           # Home / landing page
│   ├── login/             # Login page
│   ├── register/          # Register info (mobile-only)
│   ├── activate/          # Email activation with token
│   ├── pricing/           # Plans + free trial page
│   ├── dashboard/         # Protected dashboard
│   ├── account/           # Protected account management
│   ├── transactions/      # Protected billing history
│   ├── success/           # Stripe payment success
│   └── cancel/            # Stripe payment cancelled
│
├── components/
│   ├── ui/                # Base UI primitives (Button, Input, Card, etc.)
│   ├── shared/            # Reusable feature components
│   └── layout/            # Navbar, ProtectedRoute, Providers
│
├── modules/               # (Reserved for future feature modules)
├── services/              # API service layer (auth, subscription, plan, payment)
├── store/                 # Redux store + slices
│   └── slices/            # authSlice, subscriptionSlice, paymentSlice, uiSlice, themeSlice
├── hooks/                 # useAuth, useSubscription, useRedux
├── utils/                 # cn(), formatDate(), formatCurrency(), status helpers
├── types/                 # All TypeScript types
├── constants/             # Routes, API endpoints, app config
└── configs/               # Axios instance with interceptors
```

---

## Authentication Flow

1. User registers via **mobile app**
2. Backend sends activation email
3. User clicks link → `/activate?token=abc123`
4. Token validated via `POST /auth/activate`
5. User auto-logged in via HTTP-only cookies
6. Redirected to `/pricing`

---

## Subscription Flow

| Status | Description |
|---|---|
| `none` | No plan, restricted mode |
| `trialing` | 3-day free trial active |
| `trial_expired` | Trial ended, restricted |
| `active` | Paid plan, full access |
| `cancelled` | Cancelled, access until period end |
| `expired` | Access ended |

---

## API Assumptions

The following endpoints are expected from the NestJS backend:

| Method | Endpoint | Purpose |
|---|---|---|
| POST | `/auth/login` | Login user |
| POST | `/auth/activate` | Activate account with token |
| POST | `/auth/logout` | Logout |
| POST | `/auth/refresh-token` | Refresh JWT |
| GET | `/me` | Get current user |
| GET | `/plans` | Get all available plans |
| GET | `/subscription` | Get current subscription |
| POST | `/subscription/trial` | Start 3-day free trial |
| POST | `/subscription/cancel` | Cancel subscription at period end |
| POST | `/stripe/checkout-session` | Create Stripe checkout session |
| GET | `/transactions` | Get payment history |

### Expected API Response Format

```json
{
  "success": true,
  "code": 200,
  "message": "Success",
  "data": {}
}
```

---

## Environment Notes

- Auth tokens are managed via **HTTP-only cookies** (server sets them on login/activate)
- `withCredentials: true` is set on all Axios requests
- Redux only persists `auth` and `theme` slices
- The `/plans` route is an alias that redirects to `/pricing`