feat(dashboards): migrate admin + tracker dashboards to common-plat as product-agnostic
- Copy admin-dashboard-web → dashboards/admin-web - Copy tracker-dashboard-web → dashboards/tracker-web - Update pnpm-workspace.yaml to include dashboards/* - Replace file: refs with workspace:* for @bytelyst/* packages - Replace all hardcoded LysnrAI/lysnn.com branding with generic platform refs - Make telemetry use NEXT_PUBLIC_PRODUCT_ID / PRODUCT_ID env vars - Update mock credentials, seed data, invitation codes, placeholders - Update READMEs, e2e tests, unit tests for product-agnostic content - Both dashboards pass tsc --noEmit clean
This commit is contained in:
saravanakumardb1
parent
9a5e93bf05
commit
2d54795c30
29
dashboards/admin-web/.bundlesizerc.json
Normal file
29
dashboards/admin-web/.bundlesizerc.json
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"path": ".next/static/chunks/pages/_app-*.js",
|
||||||
|
"maxSize": "150kb",
|
||||||
|
"compression": "gzip"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": ".next/static/chunks/pages/_document-*.js",
|
||||||
|
"maxSize": "10kb",
|
||||||
|
"compression": "gzip"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": ".next/static/chunks/main-*.js",
|
||||||
|
"maxSize": "50kb",
|
||||||
|
"compression": "gzip"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": ".next/static/chunks/webpack-*.js",
|
||||||
|
"maxSize": "50kb",
|
||||||
|
"compression": "gzip"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": ".next/static/chunks/framework-*.js",
|
||||||
|
"maxSize": "100kb",
|
||||||
|
"compression": "gzip"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
4
dashboards/admin-web/.dockerignore
Normal file
4
dashboards/admin-web/.dockerignore
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
node_modules
|
||||||
|
.next
|
||||||
|
.env.local
|
||||||
|
.git
|
||||||
40
dashboards/admin-web/.env.example
Normal file
40
dashboards/admin-web/.env.example
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
# Admin Dashboard — Environment Variables
|
||||||
|
# Copy this file to .env.local and fill in the values.
|
||||||
|
#
|
||||||
|
# This dashboard is product-agnostic. Set PRODUCT_ID to deploy for any ByteLyst product.
|
||||||
|
|
||||||
|
# ── Product Identity ──
|
||||||
|
PRODUCT_ID=lysnrai
|
||||||
|
NEXT_PUBLIC_PRODUCT_ID=lysnrai
|
||||||
|
|
||||||
|
# ── Cosmos DB (via @bytelyst/cosmos package) ──
|
||||||
|
COSMOS_ENDPOINT=https://your-account.documents.azure.com:443/
|
||||||
|
COSMOS_KEY=your-cosmos-key
|
||||||
|
COSMOS_DATABASE=lysnrai
|
||||||
|
|
||||||
|
# ── Auth ──
|
||||||
|
JWT_SECRET=your-jwt-secret
|
||||||
|
|
||||||
|
# ── Microservice URLs (consolidated platform-service) ──
|
||||||
|
PLATFORM_SERVICE_URL=http://localhost:4003
|
||||||
|
BILLING_INTERNAL_KEY=
|
||||||
|
|
||||||
|
# ── Stripe ──
|
||||||
|
STRIPE_SECRET_KEY=sk_test_...
|
||||||
|
STRIPE_PUBLISHABLE_KEY=pk_test_...
|
||||||
|
STRIPE_WEBHOOK_SECRET=whsec_...
|
||||||
|
STRIPE_PRICE_PRO=price_...
|
||||||
|
STRIPE_PRICE_ENTERPRISE=price_...
|
||||||
|
|
||||||
|
# ── Seed (development only) ──
|
||||||
|
SEED_SECRET=your-seed-secret
|
||||||
|
|
||||||
|
# ── Optional: AI Chat ──
|
||||||
|
PERPLEXITY_API_KEY=
|
||||||
|
|
||||||
|
# ── Optional: Analytics ──
|
||||||
|
NEXT_PUBLIC_POSTHOG_KEY=
|
||||||
|
NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com
|
||||||
|
|
||||||
|
# ── Optional: Docs path ──
|
||||||
|
# DOCS_DIR=
|
||||||
44
dashboards/admin-web/.env.local.example
Normal file
44
dashboards/admin-web/.env.local.example
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
# Admin dashboard env template (DO NOT COMMIT REAL VALUES)
|
||||||
|
|
||||||
|
# Azure Cosmos DB (Azure resource kept old name)
|
||||||
|
COSMOS_ENDPOINT=https://cosmos-mywisprai.documents.azure.com:443/
|
||||||
|
COSMOS_KEY=<cosmos-key>
|
||||||
|
COSMOS_DATABASE=lysnrai
|
||||||
|
COSMOS_REGION=westus2
|
||||||
|
|
||||||
|
# JWT Secret (must match across all apps/services)
|
||||||
|
JWT_SECRET=<jwt-secret>
|
||||||
|
|
||||||
|
# Seed secret (POST /api/seed?secret=<value> to init containers + default users)
|
||||||
|
SEED_SECRET=<seed-secret>
|
||||||
|
|
||||||
|
# Azure Key Vault (optional)
|
||||||
|
AZURE_KEYVAULT_URL=https://kv-mywisprai.vault.azure.net/
|
||||||
|
|
||||||
|
# Azure Speech Service
|
||||||
|
AZURE_SPEECH_KEY=<azure-speech-key>
|
||||||
|
AZURE_SPEECH_REGION=eastus
|
||||||
|
|
||||||
|
# Azure OpenAI
|
||||||
|
AZURE_OPENAI_ENDPOINT=https://<your-resource>.openai.azure.com/
|
||||||
|
AZURE_OPENAI_KEY=<azure-openai-key>
|
||||||
|
AZURE_OPENAI_DEPLOYMENT=gpt-4o-mini
|
||||||
|
|
||||||
|
# Stripe (for promo code management) — test/live
|
||||||
|
STRIPE_SECRET_KEY=sk_test_...
|
||||||
|
|
||||||
|
# Backend API (FastAPI)
|
||||||
|
API_BASE_URL=http://localhost:8000
|
||||||
|
|
||||||
|
# Microservice URLs (consolidated platform-service)
|
||||||
|
PLATFORM_SERVICE_URL=http://localhost:4003
|
||||||
|
BILLING_INTERNAL_KEY=<billing-internal-key>
|
||||||
|
|
||||||
|
# Azure Blob Storage
|
||||||
|
AZURE_BLOB_CONNECTION_STRING=DefaultEndpointsProtocol=https;AccountName=bytelystblobs;AccountKey=<blob-account-key>;EndpointSuffix=core.windows.net
|
||||||
|
AZURE_BLOB_ACCOUNT_NAME=bytelystblobs
|
||||||
|
AZURE_BLOB_ACCOUNT_KEY=<blob-account-key>
|
||||||
|
|
||||||
|
# Perplexity AI (admin docs chatbot / RAG)
|
||||||
|
PERPLEXITY_API_KEY=pplx-...
|
||||||
|
|
||||||
42
dashboards/admin-web/.gitignore
vendored
Normal file
42
dashboards/admin-web/.gitignore
vendored
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files — .env.local IS committed (user preference)
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
|
test-results/
|
||||||
|
playwright-report/
|
||||||
1
dashboards/admin-web/.nvmrc
Normal file
1
dashboards/admin-web/.nvmrc
Normal file
@ -0,0 +1 @@
|
|||||||
|
20
|
||||||
40
dashboards/admin-web/Dockerfile
Normal file
40
dashboards/admin-web/Dockerfile
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
FROM node:20-alpine AS base
|
||||||
|
|
||||||
|
# Build
|
||||||
|
FROM base AS builder
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package.json package-lock.json* ./
|
||||||
|
|
||||||
|
# Copy pre-built @bytelyst/* packages (run scripts/docker-prep-dashboards.sh first)
|
||||||
|
# file: refs point to ../../learning_ai_common_plat/packages/* relative to /app
|
||||||
|
COPY .docker-deps/@bytelyst/ /learning_ai_common_plat/packages/
|
||||||
|
|
||||||
|
RUN npm ci
|
||||||
|
COPY . .
|
||||||
|
# Dummy env vars for Next.js build (page data collection requires these at build time)
|
||||||
|
ENV COSMOS_ENDPOINT=https://placeholder.documents.azure.com:443/
|
||||||
|
ENV COSMOS_KEY=placeholder==
|
||||||
|
ENV COSMOS_DATABASE=lysnrai
|
||||||
|
ENV JWT_SECRET=build-time-placeholder
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Production
|
||||||
|
FROM base AS runner
|
||||||
|
WORKDIR /app
|
||||||
|
ENV NODE_ENV=production
|
||||||
|
ENV NEXT_TELEMETRY_DISABLED=1
|
||||||
|
|
||||||
|
RUN addgroup --system --gid 1001 nodejs
|
||||||
|
RUN adduser --system --uid 1001 nextjs
|
||||||
|
|
||||||
|
COPY --from=builder /app/public ./public
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
|
||||||
|
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
|
||||||
|
|
||||||
|
USER nextjs
|
||||||
|
|
||||||
|
EXPOSE 3001
|
||||||
|
ENV PORT=3001
|
||||||
|
ENV HOSTNAME="0.0.0.0"
|
||||||
|
|
||||||
|
CMD ["node", "server.js"]
|
||||||
206
dashboards/admin-web/README.md
Normal file
206
dashboards/admin-web/README.md
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
# Platform Admin Dashboard
|
||||||
|
|
||||||
|
Product-agnostic admin console for the ByteLyst platform. Connects **directly** to Azure Cosmos DB via the `@azure/cosmos` SDK — no intermediate API server. Set `PRODUCT_ID` in `.env.local` to deploy for any product (e.g. `lysnrai`, `chronomind`, `nomgap`, `mindlyst`).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
| Layer | Technology |
|
||||||
|
| ------------- | ------------------------------------------------ |
|
||||||
|
| **Framework** | Next.js 16 (App Router, React 19) |
|
||||||
|
| **Styling** | TailwindCSS v4 + shadcn/ui (New York style) |
|
||||||
|
| **Database** | Azure Cosmos DB (NoSQL, Serverless) — direct SDK |
|
||||||
|
| **Auth** | JWT (jose) + bcrypt (bcryptjs), server-side only |
|
||||||
|
| **Charts** | Recharts |
|
||||||
|
| **Icons** | Lucide React |
|
||||||
|
| **Language** | TypeScript 5 |
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
cp .env.local.example .env.local # Fill in real Azure credentials
|
||||||
|
|
||||||
|
npm run dev # http://localhost:3001
|
||||||
|
npm run check # TypeScript + ESLint
|
||||||
|
npm run build # Production build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Seed the Database
|
||||||
|
|
||||||
|
Creates all Cosmos containers + default admin/viewer users:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
curl -X POST "http://localhost:3001/api/seed?secret=<SEED_SECRET>"
|
||||||
|
```
|
||||||
|
|
||||||
|
### Default Logins
|
||||||
|
|
||||||
|
| Email | Password | Role |
|
||||||
|
| ------------------ | ----------- | ----------- |
|
||||||
|
| `admin@example.com` | `Admin123!` | Super Admin |
|
||||||
|
| `viewer@example.com` | `viewer123` | Viewer |
|
||||||
|
|
||||||
|
## Environment Variables
|
||||||
|
|
||||||
|
Copy `.env.local.example` → `.env.local`:
|
||||||
|
|
||||||
|
| Variable | Required | Description |
|
||||||
|
| ------------------------- | -------- | ---------------------------------------- |
|
||||||
|
| `COSMOS_ENDPOINT` | Yes | Cosmos DB endpoint URL |
|
||||||
|
| `COSMOS_KEY` | Yes | Cosmos DB primary key |
|
||||||
|
| `COSMOS_DATABASE` | No | Database name (set per product) |
|
||||||
|
| `COSMOS_REGION` | No | Region (default: `westus2`) |
|
||||||
|
| `JWT_SECRET` | Yes | Shared JWT signing secret |
|
||||||
|
| `SEED_SECRET` | Yes | Secret for POST /api/seed |
|
||||||
|
| `AZURE_KEYVAULT_URL` | No | Azure Key Vault URL |
|
||||||
|
| `AZURE_SPEECH_KEY` | No | Speech service key (for future features) |
|
||||||
|
| `AZURE_SPEECH_REGION` | No | Speech region |
|
||||||
|
| `AZURE_OPENAI_ENDPOINT` | No | OpenAI endpoint |
|
||||||
|
| `AZURE_OPENAI_KEY` | No | OpenAI key |
|
||||||
|
| `AZURE_OPENAI_DEPLOYMENT` | No | Model deployment name |
|
||||||
|
|
||||||
|
## Pages
|
||||||
|
|
||||||
|
| Route | Description |
|
||||||
|
| ---------------- | ---------------------------------------------------------------- |
|
||||||
|
| `/` | Dashboard overview — KPIs, charts, recent activity |
|
||||||
|
| `/users` | User management — search, filter, detail dialogs |
|
||||||
|
| `/subscriptions` | Plan management — pricing, features, create plans |
|
||||||
|
| `/tokens` | API token management — create, revoke, scopes |
|
||||||
|
| `/usage` | Usage analytics — token/request charts, model costs |
|
||||||
|
| `/audit` | Audit log — admin actions, security events |
|
||||||
|
| `/settings` | Platform config — kill switch, Azure, rate limits, notifications |
|
||||||
|
| `/login` | Authentication page |
|
||||||
|
|
||||||
|
## API Routes
|
||||||
|
|
||||||
|
All routes are in `src/app/api/`:
|
||||||
|
|
||||||
|
| Endpoint | Method | Description |
|
||||||
|
| --------------------------- | -------------- | ------------------------------------------ |
|
||||||
|
| `/api/auth/login` | POST | Authenticate user (email + password → JWT) |
|
||||||
|
| `/api/auth/me` | GET | Get current user from Bearer token |
|
||||||
|
| `/api/users` | GET/POST | List/create users |
|
||||||
|
| `/api/users/[id]` | GET/PUT/DELETE | User CRUD by ID |
|
||||||
|
| `/api/tokens` | GET/POST | List/create API tokens |
|
||||||
|
| `/api/usage` | GET | Usage analytics |
|
||||||
|
| `/api/audit` | GET | Audit log entries |
|
||||||
|
| `/api/dashboard/stats` | GET | Dashboard KPI statistics |
|
||||||
|
| `/api/settings/kill-switch` | GET/PUT | Platform kill switch (read/toggle) |
|
||||||
|
| `/api/seed` | POST | Initialize containers + seed default users |
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── app/
|
||||||
|
│ ├── (dashboard)/ # Protected routes (sidebar + auth guard)
|
||||||
|
│ │ ├── layout.tsx # Dashboard shell (sidebar, error boundary)
|
||||||
|
│ │ ├── loading.tsx # Skeleton loading state
|
||||||
|
│ │ ├── page.tsx # Dashboard overview
|
||||||
|
│ │ ├── users/page.tsx
|
||||||
|
│ │ ├── subscriptions/page.tsx
|
||||||
|
│ │ ├── tokens/page.tsx
|
||||||
|
│ │ ├── usage/page.tsx
|
||||||
|
│ │ ├── audit/page.tsx
|
||||||
|
│ │ └── settings/page.tsx # Includes kill switch toggle
|
||||||
|
│ ├── api/ # Next.js API routes → direct Cosmos DB
|
||||||
|
│ │ ├── auth/login/route.ts
|
||||||
|
│ │ ├── auth/me/route.ts
|
||||||
|
│ │ ├── users/route.ts
|
||||||
|
│ │ ├── users/[id]/route.ts
|
||||||
|
│ │ ├── tokens/route.ts
|
||||||
|
│ │ ├── usage/route.ts
|
||||||
|
│ │ ├── audit/route.ts
|
||||||
|
│ │ ├── dashboard/stats/route.ts
|
||||||
|
│ │ ├── settings/kill-switch/route.ts
|
||||||
|
│ │ └── seed/route.ts
|
||||||
|
│ ├── login/page.tsx # Public login page
|
||||||
|
│ ├── layout.tsx # Root layout (providers)
|
||||||
|
│ └── providers.tsx # Auth + Theme providers
|
||||||
|
├── components/
|
||||||
|
│ ├── ui/ # 16 shadcn/ui primitives (avatar, badge, button, card, etc.)
|
||||||
|
│ ├── sidebar-nav.tsx # Responsive sidebar (mobile hamburger)
|
||||||
|
│ ├── auth-guard.tsx # Route protection → redirect to /login
|
||||||
|
│ └── error-boundary.tsx # Catch page crashes gracefully
|
||||||
|
└── lib/
|
||||||
|
├── cosmos.ts # Cosmos DB client singleton + container registry
|
||||||
|
├── auth-server.ts # JWT create/verify + bcrypt (server-side only)
|
||||||
|
├── auth-context.tsx # Client auth provider (localStorage tokens)
|
||||||
|
├── theme-context.tsx # Dark/light/system mode
|
||||||
|
├── api.ts # Client-side API helper functions
|
||||||
|
├── mock-data.ts # Mock data + types (fallback when Cosmos unavailable)
|
||||||
|
├── utils.ts # cn() tailwind merge helper
|
||||||
|
└── repositories/ # Direct Cosmos DB CRUD
|
||||||
|
├── users.ts # getUserById, getUserByEmail, createUser, updateUser
|
||||||
|
├── tokens.ts # API token CRUD
|
||||||
|
├── audit.ts # Audit log read/write
|
||||||
|
└── usage.ts # Usage statistics
|
||||||
|
```
|
||||||
|
|
||||||
|
## Cosmos DB Integration
|
||||||
|
|
||||||
|
The dashboard connects **directly** to Cosmos DB — no intermediate backend server.
|
||||||
|
|
||||||
|
**Pattern:**
|
||||||
|
|
||||||
|
```
|
||||||
|
Page Component → fetch("/api/...") → API Route → Repository → Cosmos SDK → Azure
|
||||||
|
```
|
||||||
|
|
||||||
|
**Key files:**
|
||||||
|
|
||||||
|
- `lib/cosmos.ts` — singleton `CosmosClient`, `getContainer(name)`, `initializeAllContainers()`
|
||||||
|
- `lib/repositories/*.ts` — CRUD functions per container
|
||||||
|
- `lib/auth-server.ts` — `authenticateUser()`, `createAccessToken()`, `verifyToken()`
|
||||||
|
|
||||||
|
**Container definitions** (in `cosmos.ts`):
|
||||||
|
|
||||||
|
| Container | Partition Key | TTL |
|
||||||
|
| ------------- | ------------- | ------- |
|
||||||
|
| `users` | `/id` | — |
|
||||||
|
| `licenses` | `/userId` | — |
|
||||||
|
| `transcripts` | `/userId` | — |
|
||||||
|
| `usage_daily` | `/userId` | 1 year |
|
||||||
|
| `settings` | `/userId` | — |
|
||||||
|
| `audit_log` | `/category` | 90 days |
|
||||||
|
| `api_tokens` | `/userId` | — |
|
||||||
|
| `devices` | `/userId` | — |
|
||||||
|
|
||||||
|
## Kill Switch
|
||||||
|
|
||||||
|
The Settings page has a prominent kill switch card at the top:
|
||||||
|
|
||||||
|
- **Green** = platform active, **Red** = platform disabled
|
||||||
|
- Toggle writes to `settings` container: `{ id: "kill_switch", userId: "system", enabled: bool }`
|
||||||
|
- All apps (desktop, mobile, web) read this document to check platform status
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Direct Cosmos DB** — no middleware, API routes call SDK directly
|
||||||
|
- **JWT auth** — bcrypt password hashing, HS256 JWT tokens
|
||||||
|
- **Auth guard** — redirects to `/login` if not authenticated
|
||||||
|
- **Mock fallback** — pages fall back to mock data if Cosmos is unavailable
|
||||||
|
- **Responsive** — sidebar collapses to hamburger on mobile
|
||||||
|
- **Dark mode** — toggle in sidebar footer, persisted to localStorage
|
||||||
|
- **Error boundary** — catches page crashes gracefully
|
||||||
|
- **Kill switch** — global platform toggle on Settings page
|
||||||
|
|
||||||
|
## Docker
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker build -t platform-admin .
|
||||||
|
docker run -p 3001:3000 --env-file .env.local platform-admin
|
||||||
|
|
||||||
|
# Or with docker-compose
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development Notes
|
||||||
|
|
||||||
|
- **Port**: runs on 3001 in dev (3000 may conflict with Docker)
|
||||||
|
- **shadcn/ui**: components are in `src/components/ui/`, added via `npx shadcn@latest add <component>`
|
||||||
|
- **Adding a new API route**: create `src/app/api/<name>/route.ts`, import from `@/lib/repositories/*`
|
||||||
|
- **Adding a new page**: create `src/app/(dashboard)/<name>/page.tsx` — auto-protected by auth guard
|
||||||
23
dashboards/admin-web/components.json
Normal file
23
dashboards/admin-web/components.json
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "src/app/globals.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide",
|
||||||
|
"rtl": false,
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
},
|
||||||
|
"registries": {}
|
||||||
|
}
|
||||||
45
dashboards/admin-web/e2e/login.spec.ts
Normal file
45
dashboards/admin-web/e2e/login.spec.ts
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
|
||||||
|
test.describe('Admin Login Page', () => {
|
||||||
|
test('shows admin login form', async ({ page }) => {
|
||||||
|
await page.goto('/login');
|
||||||
|
await expect(page.getByText('Platform Admin')).toBeVisible();
|
||||||
|
await expect(page.getByText('Sign in to access the admin dashboard')).toBeVisible();
|
||||||
|
await expect(page.getByLabel('Email')).toBeVisible();
|
||||||
|
await expect(page.getByLabel('Password')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('shows demo credentials hint', async ({ page }) => {
|
||||||
|
await page.goto('/login');
|
||||||
|
await expect(page.getByText(/admin@example\.com/)).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('Sign In button is disabled when form is empty', async ({ page }) => {
|
||||||
|
await page.goto('/login');
|
||||||
|
const btn = page.getByRole('button', { name: 'Sign In' });
|
||||||
|
await expect(btn).toBeDisabled();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('shows validation hint for short password', async ({ page }) => {
|
||||||
|
await page.goto('/login');
|
||||||
|
await page.getByLabel('Email').fill('admin@example.com');
|
||||||
|
await page.getByLabel('Password').fill('short');
|
||||||
|
await expect(page.getByText(/at least 8 characters/i)).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('shows error for invalid credentials', async ({ page }) => {
|
||||||
|
await page.goto('/login');
|
||||||
|
await page.getByLabel('Email').fill('wrong@admin.com');
|
||||||
|
await page.getByLabel('Password').fill('WrongPassword123!');
|
||||||
|
await page.getByRole('button', { name: 'Sign In' }).click();
|
||||||
|
await expect(page.getByText(/invalid|error/i)).toBeVisible({ timeout: 10000 });
|
||||||
|
});
|
||||||
|
|
||||||
|
test('enables Sign In when valid email and password entered', async ({ page }) => {
|
||||||
|
await page.goto('/login');
|
||||||
|
await page.getByLabel('Email').fill('admin@example.com');
|
||||||
|
await page.getByLabel('Password').fill('Admin123!');
|
||||||
|
const btn = page.getByRole('button', { name: 'Sign In' });
|
||||||
|
await expect(btn).toBeEnabled();
|
||||||
|
});
|
||||||
|
});
|
||||||
20
dashboards/admin-web/e2e/navigation.spec.ts
Normal file
20
dashboards/admin-web/e2e/navigation.spec.ts
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
|
||||||
|
test.describe('Admin Navigation & Protected Routes', () => {
|
||||||
|
test('redirects unauthenticated user to login', async ({ page }) => {
|
||||||
|
await page.goto('/');
|
||||||
|
await expect(page).toHaveURL(/\/login/);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('login page is responsive on mobile viewport', async ({ page }) => {
|
||||||
|
await page.setViewportSize({ width: 375, height: 667 });
|
||||||
|
await page.goto('/login');
|
||||||
|
await expect(page.getByText('Platform Admin')).toBeVisible();
|
||||||
|
await expect(page.getByLabel('Email')).toBeVisible();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('admin login page has correct title', async ({ page }) => {
|
||||||
|
await page.goto('/login');
|
||||||
|
await expect(page).toHaveTitle(/admin/i);
|
||||||
|
});
|
||||||
|
});
|
||||||
24
dashboards/admin-web/eslint.config.mjs
Normal file
24
dashboards/admin-web/eslint.config.mjs
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
import nextTs from "eslint-config-next/typescript";
|
||||||
|
|
||||||
|
const eslintConfig = defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
...nextTs,
|
||||||
|
{
|
||||||
|
rules: {
|
||||||
|
"react-hooks/set-state-in-effect": "off",
|
||||||
|
"@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_", varsIgnorePattern: "^_", caughtErrorsIgnorePattern: "^_" }],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// Override default ignores of eslint-config-next.
|
||||||
|
globalIgnores([
|
||||||
|
// Default ignores of eslint-config-next:
|
||||||
|
".next/**",
|
||||||
|
"out/**",
|
||||||
|
"build/**",
|
||||||
|
"next-env.d.ts",
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
56
dashboards/admin-web/next.config.ts
Normal file
56
dashboards/admin-web/next.config.ts
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import type { NextConfig } from 'next';
|
||||||
|
|
||||||
|
const securityHeaders = [
|
||||||
|
{
|
||||||
|
key: 'X-Frame-Options',
|
||||||
|
value: 'DENY',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'X-Content-Type-Options',
|
||||||
|
value: 'nosniff',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'X-XSS-Protection',
|
||||||
|
value: '1; mode=block',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Referrer-Policy',
|
||||||
|
value: 'strict-origin-when-cross-origin',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Permissions-Policy',
|
||||||
|
value: 'camera=(), microphone=(), geolocation=()',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Strict-Transport-Security',
|
||||||
|
value: 'max-age=31536000; includeSubDomains',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Content-Security-Policy',
|
||||||
|
value: [
|
||||||
|
"default-src 'self'",
|
||||||
|
"script-src 'self' 'unsafe-eval' 'unsafe-inline'",
|
||||||
|
"style-src 'self' 'unsafe-inline'",
|
||||||
|
"img-src 'self' data: blob:",
|
||||||
|
"font-src 'self' data:",
|
||||||
|
"connect-src 'self' https://*.documents.azure.com",
|
||||||
|
"frame-ancestors 'none'",
|
||||||
|
"base-uri 'self'",
|
||||||
|
"form-action 'self'",
|
||||||
|
].join('; '),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
...(process.env.VERCEL ? {} : { output: 'standalone' }),
|
||||||
|
async headers() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
source: '/(.*)',
|
||||||
|
headers: securityHeaders,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
16948
dashboards/admin-web/package-lock.json
generated
Normal file
16948
dashboards/admin-web/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
83
dashboards/admin-web/package.json
Normal file
83
dashboards/admin-web/package.json
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
{
|
||||||
|
"name": "@bytelyst/admin-web",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"engines": {
|
||||||
|
"node": "20.x"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "next build --webpack",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "eslint",
|
||||||
|
"check": "tsc --noEmit && eslint",
|
||||||
|
"test": "vitest run",
|
||||||
|
"test:watch": "vitest",
|
||||||
|
"test:e2e": "playwright test",
|
||||||
|
"test:e2e:ui": "playwright test --ui",
|
||||||
|
"build:analyze": "ANALYZE=true next build",
|
||||||
|
"test:coverage": "vitest run --coverage",
|
||||||
|
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md,yml,yaml}\"",
|
||||||
|
"format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,md,yml,yaml}\"",
|
||||||
|
"size:check": "bundlesize",
|
||||||
|
"prepare": "husky install"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@azure/cosmos": "^4.9.1",
|
||||||
|
"@azure/identity": "^4.13.0",
|
||||||
|
"@azure/keyvault-secrets": "^4.10.0",
|
||||||
|
"@bytelyst/api-client": "workspace:*",
|
||||||
|
"@bytelyst/auth": "workspace:*",
|
||||||
|
"@bytelyst/config": "workspace:*",
|
||||||
|
"@bytelyst/cosmos": "workspace:*",
|
||||||
|
"@bytelyst/errors": "workspace:*",
|
||||||
|
"@bytelyst/extraction": "workspace:*",
|
||||||
|
"@bytelyst/logger": "workspace:*",
|
||||||
|
"@bytelyst/react-auth": "workspace:*",
|
||||||
|
"@radix-ui/react-slider": "^1.3.6",
|
||||||
|
"@tailwindcss/typography": "^0.5.19",
|
||||||
|
"bcryptjs": "^3.0.3",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"jose": "^6.1.3",
|
||||||
|
"lucide-react": "^0.563.0",
|
||||||
|
"next": "16.1.6",
|
||||||
|
"posthog-js": "^1.196.0",
|
||||||
|
"radix-ui": "^1.4.3",
|
||||||
|
"react": "19.2.3",
|
||||||
|
"react-dom": "19.2.3",
|
||||||
|
"react-markdown": "^10.1.0",
|
||||||
|
"recharts": "^3.7.0",
|
||||||
|
"remark-gfm": "^4.0.1",
|
||||||
|
"tailwind-merge": "^3.4.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@playwright/test": "^1.58.2",
|
||||||
|
"@tailwindcss/postcss": "^4",
|
||||||
|
"@types/bcryptjs": "^2.4.6",
|
||||||
|
"@types/node": "^20",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"@vitest/coverage-v8": "^4.0.18",
|
||||||
|
"bundlesize": "^0.18.1",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-config-next": "16.1.6",
|
||||||
|
"husky": "^9.0.0",
|
||||||
|
"lint-staged": "^15.0.0",
|
||||||
|
"prettier": "^3.0.0",
|
||||||
|
"shadcn": "^3.8.4",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"tw-animate-css": "^1.4.0",
|
||||||
|
"typescript": "^5",
|
||||||
|
"vitest": "^4.0.18"
|
||||||
|
},
|
||||||
|
"lint-staged": {
|
||||||
|
"*.{ts,tsx}": [
|
||||||
|
"eslint --fix",
|
||||||
|
"prettier --write"
|
||||||
|
],
|
||||||
|
"*.{js,jsx,json,md,yml,yaml}": [
|
||||||
|
"prettier --write"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
26
dashboards/admin-web/playwright.config.ts
Normal file
26
dashboards/admin-web/playwright.config.ts
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { defineConfig, devices } from '@playwright/test';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
testDir: './e2e',
|
||||||
|
fullyParallel: true,
|
||||||
|
forbidOnly: !!process.env.CI,
|
||||||
|
retries: process.env.CI ? 2 : 0,
|
||||||
|
workers: process.env.CI ? 1 : undefined,
|
||||||
|
reporter: 'html',
|
||||||
|
use: {
|
||||||
|
baseURL: 'http://localhost:3001',
|
||||||
|
trace: 'on-first-retry',
|
||||||
|
},
|
||||||
|
projects: [
|
||||||
|
{
|
||||||
|
name: 'chromium',
|
||||||
|
use: { ...devices['Desktop Chrome'] },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
webServer: {
|
||||||
|
command: 'npm run dev',
|
||||||
|
url: 'http://localhost:3001',
|
||||||
|
reuseExistingServer: !process.env.CI,
|
||||||
|
timeout: 30_000,
|
||||||
|
},
|
||||||
|
});
|
||||||
7
dashboards/admin-web/postcss.config.mjs
Normal file
7
dashboards/admin-web/postcss.config.mjs
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
1
dashboards/admin-web/public/file.svg
Normal file
1
dashboards/admin-web/public/file.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 391 B |
1
dashboards/admin-web/public/globe.svg
Normal file
1
dashboards/admin-web/public/globe.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
1
dashboards/admin-web/public/next.svg
Normal file
1
dashboards/admin-web/public/next.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
1
dashboards/admin-web/public/vercel.svg
Normal file
1
dashboards/admin-web/public/vercel.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 128 B |
1
dashboards/admin-web/public/window.svg
Normal file
1
dashboards/admin-web/public/window.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||||
|
After Width: | Height: | Size: 385 B |
102
dashboards/admin-web/src/__tests__/audit.test.ts
Normal file
102
dashboards/admin-web/src/__tests__/audit.test.ts
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
/**
|
||||||
|
* Tests for GET /api/audit
|
||||||
|
*
|
||||||
|
* Covers:
|
||||||
|
* - 401 when unauthenticated
|
||||||
|
* - 200 with entries list and total (default mode)
|
||||||
|
* - 200 with summary (total + failedLogins) when ?summary=true
|
||||||
|
* - Passes category, limit, offset query params
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
const mockGetCurrentUser = vi.fn();
|
||||||
|
vi.mock('@/lib/auth-server', () => ({
|
||||||
|
getCurrentUser: (...args: unknown[]) => mockGetCurrentUser(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockQueryAudit = vi.fn();
|
||||||
|
const mockGetAuditStats = vi.fn();
|
||||||
|
vi.mock('@/lib/platform-client', () => ({
|
||||||
|
queryAudit: (...args: unknown[]) => mockQueryAudit(...args),
|
||||||
|
getAuditStats: (...args: unknown[]) => mockGetAuditStats(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { GET } from '@/app/api/audit/route';
|
||||||
|
|
||||||
|
async function callAudit(qs = '') {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return GET(
|
||||||
|
new NextRequest(
|
||||||
|
new Request(`http://localhost:3001/api/audit${qs}`, {
|
||||||
|
headers: { Authorization: 'Bearer test' },
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const admin = { id: 'usr_a', role: 'admin' };
|
||||||
|
|
||||||
|
describe('GET /api/audit', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when unauthenticated', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(null);
|
||||||
|
const res = await callAudit();
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns entries list with total by default', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(admin);
|
||||||
|
mockQueryAudit.mockResolvedValue({
|
||||||
|
records: [{ id: 'aud_1', category: 'auth', action: 'login_success' }],
|
||||||
|
count: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await callAudit();
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.entries).toHaveLength(1);
|
||||||
|
expect(data.total).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns summary when ?summary=true', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(admin);
|
||||||
|
mockGetAuditStats.mockResolvedValue({
|
||||||
|
stats: { login_success: 485, login_failed: 15 },
|
||||||
|
days: 90,
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await callAudit('?summary=true');
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.total).toBe(500);
|
||||||
|
expect(data.failedLogins).toBe(15);
|
||||||
|
// Should NOT call queryAudit in summary mode
|
||||||
|
expect(mockQueryAudit).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('passes category filter from query params', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(admin);
|
||||||
|
mockQueryAudit.mockResolvedValue({ records: [], count: 0 });
|
||||||
|
|
||||||
|
await callAudit('?category=auth&limit=50&offset=10');
|
||||||
|
expect(mockQueryAudit).toHaveBeenCalledWith({
|
||||||
|
category: 'auth',
|
||||||
|
limit: 50,
|
||||||
|
offset: 10,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it('uses default limit=100 and offset=0', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(admin);
|
||||||
|
mockQueryAudit.mockResolvedValue({ records: [], count: 0 });
|
||||||
|
|
||||||
|
await callAudit();
|
||||||
|
expect(mockQueryAudit).toHaveBeenCalledWith({
|
||||||
|
category: undefined,
|
||||||
|
limit: 100,
|
||||||
|
offset: 0,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
131
dashboards/admin-web/src/__tests__/auth-login.test.ts
Normal file
131
dashboards/admin-web/src/__tests__/auth-login.test.ts
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
/**
|
||||||
|
* Tests for POST /api/auth/login
|
||||||
|
*
|
||||||
|
* Covers:
|
||||||
|
* - 400 for missing email/password
|
||||||
|
* - 401 for invalid credentials (loginViaService rejects)
|
||||||
|
* - 200 with tokens and user data on success
|
||||||
|
* - Audit log entries for success and failure
|
||||||
|
* - 401 when loginViaService throws (inner catch returns 401)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
// ── Mocks ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const mockLoginViaService = vi.fn();
|
||||||
|
const mockLogAudit = vi.fn();
|
||||||
|
vi.mock('@/lib/platform-client', () => ({
|
||||||
|
loginViaService: (...args: unknown[]) => mockLoginViaService(...args),
|
||||||
|
logAudit: (...args: unknown[]) => mockLogAudit(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('@/lib/product-config', () => ({
|
||||||
|
PRODUCT_ID: 'test-product',
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { POST } from '@/app/api/auth/login/route';
|
||||||
|
|
||||||
|
// ── Helpers ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
async function callLogin(body: object) {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return POST(
|
||||||
|
new NextRequest(
|
||||||
|
new Request('http://localhost:3001/api/auth/login', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const loginResult = {
|
||||||
|
accessToken: 'access_tok_123',
|
||||||
|
refreshToken: 'refresh_tok_456',
|
||||||
|
user: {
|
||||||
|
id: 'usr_admin_1',
|
||||||
|
email: 'admin@example.com',
|
||||||
|
displayName: 'Admin User',
|
||||||
|
role: 'super_admin',
|
||||||
|
plan: 'enterprise',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Tests ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('POST /api/auth/login', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 400 when email is missing', async () => {
|
||||||
|
const res = await callLogin({ password: 'pass123' });
|
||||||
|
expect(res.status).toBe(400);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.error).toContain('required');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 400 when password is missing', async () => {
|
||||||
|
const res = await callLogin({ email: 'admin@example.com' });
|
||||||
|
expect(res.status).toBe(400);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 400 when both are missing', async () => {
|
||||||
|
const res = await callLogin({});
|
||||||
|
expect(res.status).toBe(400);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 401 for invalid credentials', async () => {
|
||||||
|
mockLoginViaService.mockRejectedValue(new Error('Invalid credentials'));
|
||||||
|
const res = await callLogin({ email: 'bad@example.com', password: 'wrong' });
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.error).toContain('Invalid credentials');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('logs audit entry on login failure', async () => {
|
||||||
|
mockLoginViaService.mockRejectedValue(new Error('Invalid credentials'));
|
||||||
|
await callLogin({ email: 'bad@example.com', password: 'wrong' });
|
||||||
|
expect(mockLogAudit).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
userId: 'bad@example.com',
|
||||||
|
action: 'login_failed',
|
||||||
|
category: 'auth',
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 200 with tokens and user data on success', async () => {
|
||||||
|
mockLoginViaService.mockResolvedValue(loginResult);
|
||||||
|
|
||||||
|
const res = await callLogin({ email: 'admin@example.com', password: 'admin123' });
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
expect(data.accessToken).toBe('access_tok_123');
|
||||||
|
expect(data.refreshToken).toBe('refresh_tok_456');
|
||||||
|
expect(data.user.id).toBe('usr_admin_1');
|
||||||
|
expect(data.user.email).toBe('admin@example.com');
|
||||||
|
expect(data.user.role).toBe('super_admin');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('logs audit entry on login success', async () => {
|
||||||
|
mockLoginViaService.mockResolvedValue(loginResult);
|
||||||
|
|
||||||
|
await callLogin({ email: 'admin@example.com', password: 'admin123' });
|
||||||
|
expect(mockLogAudit).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
userId: 'usr_admin_1',
|
||||||
|
action: 'login_success',
|
||||||
|
category: 'auth',
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 401 when loginViaService throws', async () => {
|
||||||
|
mockLoginViaService.mockRejectedValue(new Error('DB connection failed'));
|
||||||
|
const res = await callLogin({ email: 'admin@example.com', password: 'pass' });
|
||||||
|
// Inner catch returns 401 for any loginViaService failure
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
});
|
||||||
59
dashboards/admin-web/src/__tests__/auth-me.test.ts
Normal file
59
dashboards/admin-web/src/__tests__/auth-me.test.ts
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
/**
|
||||||
|
* Tests for GET /api/auth/me
|
||||||
|
*
|
||||||
|
* Covers:
|
||||||
|
* - 401 when no auth header
|
||||||
|
* - 401 when invalid token
|
||||||
|
* - 200 with user profile (excludes passwordHash)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
const mockGetMeViaService = vi.fn();
|
||||||
|
vi.mock('@/lib/platform-client', () => ({
|
||||||
|
getMeViaService: (...args: unknown[]) => mockGetMeViaService(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { GET } from '@/app/api/auth/me/route';
|
||||||
|
|
||||||
|
async function callMe(token?: string) {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
const headers: Record<string, string> = {};
|
||||||
|
if (token) headers['Authorization'] = token;
|
||||||
|
return GET(new NextRequest(new Request('http://localhost:3001/api/auth/me', { headers })));
|
||||||
|
}
|
||||||
|
|
||||||
|
const serviceUser = {
|
||||||
|
id: 'usr_admin_1',
|
||||||
|
email: 'admin@example.com',
|
||||||
|
displayName: 'Admin User',
|
||||||
|
role: 'super_admin',
|
||||||
|
plan: 'enterprise',
|
||||||
|
};
|
||||||
|
|
||||||
|
describe('GET /api/auth/me', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 with no auth header', async () => {
|
||||||
|
const res = await callMe();
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 401 with invalid token', async () => {
|
||||||
|
mockGetMeViaService.mockRejectedValue(new Error('Unauthorized'));
|
||||||
|
const res = await callMe('Bearer invalid_token');
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns user profile on valid token', async () => {
|
||||||
|
mockGetMeViaService.mockResolvedValue(serviceUser);
|
||||||
|
const res = await callMe('Bearer valid_token');
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.id).toBe('usr_admin_1');
|
||||||
|
expect(data.email).toBe('admin@example.com');
|
||||||
|
expect(data.role).toBe('super_admin');
|
||||||
|
// passwordHash must NOT be returned
|
||||||
|
expect(data.passwordHash).toBeUndefined();
|
||||||
|
});
|
||||||
|
});
|
||||||
105
dashboards/admin-web/src/__tests__/dashboard-stats.test.ts
Normal file
105
dashboards/admin-web/src/__tests__/dashboard-stats.test.ts
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
/**
|
||||||
|
* Tests for GET /api/dashboard/stats
|
||||||
|
*
|
||||||
|
* Covers:
|
||||||
|
* - 401 when unauthenticated
|
||||||
|
* - 200 returns aggregated stats from all repositories
|
||||||
|
* - Response shape includes users, tokens, usage, audit sections
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
const mockRequireAdmin = vi.fn();
|
||||||
|
vi.mock('@/lib/auth-server', () => ({
|
||||||
|
requireAdmin: (...args: unknown[]) => mockRequireAdmin(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockCountActiveTokens = vi.fn();
|
||||||
|
vi.mock('@/lib/repositories/tokens', () => ({
|
||||||
|
countActiveTokens: (...args: unknown[]) => mockCountActiveTokens(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockGetUsageSummary = vi.fn();
|
||||||
|
vi.mock('@/lib/billing-client', () => ({
|
||||||
|
getUsageSummary: (...args: unknown[]) => mockGetUsageSummary(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockGetUserCounts = vi.fn();
|
||||||
|
const mockGetAuditStats = vi.fn();
|
||||||
|
vi.mock('@/lib/platform-client', () => ({
|
||||||
|
getUserCounts: (...args: unknown[]) => mockGetUserCounts(...args),
|
||||||
|
getAuditStats: (...args: unknown[]) => mockGetAuditStats(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { GET } from '@/app/api/dashboard/stats/route';
|
||||||
|
|
||||||
|
async function callStats(token?: string) {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
const headers: Record<string, string> = {};
|
||||||
|
if (token) headers['Authorization'] = token;
|
||||||
|
return GET(
|
||||||
|
new NextRequest(new Request('http://localhost:3001/api/dashboard/stats', { headers }))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const admin = { id: 'usr_a', email: 'a@example.com', name: 'Admin', role: 'admin' };
|
||||||
|
|
||||||
|
describe('GET /api/dashboard/stats', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when unauthenticated', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(null);
|
||||||
|
const res = await callStats();
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns aggregated stats on success', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(admin);
|
||||||
|
mockGetUserCounts.mockResolvedValue({ total: 150, byPlan: { free: 100, pro: 40, enterprise: 10 } });
|
||||||
|
mockCountActiveTokens.mockResolvedValue(25);
|
||||||
|
mockGetUsageSummary.mockResolvedValue({
|
||||||
|
totalWords: 500000,
|
||||||
|
totalDictations: 12000,
|
||||||
|
totalCost: 245.5,
|
||||||
|
});
|
||||||
|
mockGetAuditStats.mockResolvedValue({
|
||||||
|
stats: { login_success: 8868, login_failed: 32 },
|
||||||
|
days: 90,
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await callStats('Bearer valid_token');
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
// Users section
|
||||||
|
expect(data.users.total).toBe(150);
|
||||||
|
expect(data.users.byPlan.free).toBe(100);
|
||||||
|
expect(data.users.byPlan.pro).toBe(40);
|
||||||
|
expect(data.users.byPlan.enterprise).toBe(10);
|
||||||
|
|
||||||
|
// Tokens section
|
||||||
|
expect(data.tokens.active).toBe(25);
|
||||||
|
|
||||||
|
// Usage section
|
||||||
|
expect(data.usage.totalWords).toBe(500000);
|
||||||
|
expect(data.usage.totalDictations).toBe(12000);
|
||||||
|
expect(data.usage.totalCost).toBe(245.5);
|
||||||
|
|
||||||
|
// Audit section
|
||||||
|
expect(data.audit.total).toBe(8900);
|
||||||
|
expect(data.audit.failedLogins).toBe(32);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('passes 30 days to getUsageSummary', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(admin);
|
||||||
|
mockGetUserCounts.mockResolvedValue({ total: 0, byPlan: {} });
|
||||||
|
mockCountActiveTokens.mockResolvedValue(0);
|
||||||
|
mockGetUsageSummary.mockResolvedValue({
|
||||||
|
totalWords: 0, totalDictations: 0, totalCost: 0,
|
||||||
|
});
|
||||||
|
mockGetAuditStats.mockResolvedValue({ stats: {}, days: 90 });
|
||||||
|
|
||||||
|
await callStats('Bearer valid_token');
|
||||||
|
expect(mockGetUsageSummary).toHaveBeenCalledWith(30);
|
||||||
|
});
|
||||||
|
});
|
||||||
94
dashboards/admin-web/src/__tests__/flags.test.ts
Normal file
94
dashboards/admin-web/src/__tests__/flags.test.ts
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
/**
|
||||||
|
* Tests for GET/POST /api/flags
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
const mockRequireAdmin = vi.fn();
|
||||||
|
vi.mock('@/lib/auth-server', () => ({
|
||||||
|
requireAdmin: (...args: unknown[]) => mockRequireAdmin(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockListFlags = vi.fn();
|
||||||
|
const mockCreateFlag = vi.fn();
|
||||||
|
vi.mock('@/lib/platform-client', () => ({
|
||||||
|
listFlags: (...args: unknown[]) => mockListFlags(...args),
|
||||||
|
createFlag: (...args: unknown[]) => mockCreateFlag(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { GET, POST } from '@/app/api/flags/route';
|
||||||
|
|
||||||
|
async function makeGet() {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return GET(new NextRequest(new Request('http://localhost:3001/api/flags')));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function makePost(body: object) {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return POST(
|
||||||
|
new NextRequest(
|
||||||
|
new Request('http://localhost:3001/api/flags', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('GET /api/flags', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when not admin', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(null);
|
||||||
|
const res = await makeGet();
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns flags list on success', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue({ id: 'admin1', role: 'admin' });
|
||||||
|
mockListFlags.mockResolvedValue({ flags: [{ key: 'dark_mode', enabled: true }] });
|
||||||
|
|
||||||
|
const res = await makeGet();
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.flags).toHaveLength(1);
|
||||||
|
expect(data.flags[0].key).toBe('dark_mode');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 500 on error', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue({ id: 'admin1' });
|
||||||
|
mockListFlags.mockRejectedValue(new Error('Service unavailable'));
|
||||||
|
|
||||||
|
const res = await makeGet();
|
||||||
|
expect(res.status).toBe(500);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('POST /api/flags', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when not admin', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(null);
|
||||||
|
const res = await makePost({ key: 'new_flag' });
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('creates flag and returns 201', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue({ id: 'admin1' });
|
||||||
|
mockCreateFlag.mockResolvedValue({ key: 'new_flag', enabled: true, id: 'f1' });
|
||||||
|
|
||||||
|
const res = await makePost({ key: 'new_flag', enabled: true });
|
||||||
|
expect(res.status).toBe(201);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.key).toBe('new_flag');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 500 on error', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue({ id: 'admin1' });
|
||||||
|
mockCreateFlag.mockRejectedValue(new Error('Conflict'));
|
||||||
|
|
||||||
|
const res = await makePost({ key: 'dup' });
|
||||||
|
expect(res.status).toBe(500);
|
||||||
|
});
|
||||||
|
});
|
||||||
235
dashboards/admin-web/src/__tests__/invitations.test.ts
Normal file
235
dashboards/admin-web/src/__tests__/invitations.test.ts
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
/**
|
||||||
|
* Tests for GET/POST /api/invitations and PATCH/DELETE /api/invitations/[id].
|
||||||
|
*
|
||||||
|
* Covers:
|
||||||
|
* - GET 401 unauthorized
|
||||||
|
* - GET 200 lists codes with total
|
||||||
|
* - POST 403 for non-admin
|
||||||
|
* - POST 400 for invalid grantPlan
|
||||||
|
* - POST 201 creates code with defaults
|
||||||
|
* - POST 201 creates code with custom code
|
||||||
|
* - PATCH 403 for non-admin
|
||||||
|
* - PATCH 404 for missing code
|
||||||
|
* - PATCH 200 toggles status
|
||||||
|
* - DELETE 403 for non-super_admin
|
||||||
|
* - DELETE 404 for missing code
|
||||||
|
* - DELETE 200 success
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
// ── Mocks ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const mockGetCurrentUser = vi.fn();
|
||||||
|
vi.mock('@/lib/auth-server', () => ({
|
||||||
|
getCurrentUser: (...args: unknown[]) => mockGetCurrentUser(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockListInvitations = vi.fn();
|
||||||
|
const mockCountInvitations = vi.fn();
|
||||||
|
const mockCreateInvitation = vi.fn();
|
||||||
|
const mockUpdateInvitation = vi.fn();
|
||||||
|
const mockDeleteInvitation = vi.fn();
|
||||||
|
vi.mock('@/lib/growth-client', () => ({
|
||||||
|
listInvitations: (...args: unknown[]) => mockListInvitations(...args),
|
||||||
|
countInvitations: (...args: unknown[]) => mockCountInvitations(...args),
|
||||||
|
createInvitation: (...args: unknown[]) => mockCreateInvitation(...args),
|
||||||
|
updateInvitation: (...args: unknown[]) => mockUpdateInvitation(...args),
|
||||||
|
deleteInvitation: (...args: unknown[]) => mockDeleteInvitation(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { GET, POST } from '@/app/api/invitations/route';
|
||||||
|
import { PATCH, DELETE } from '@/app/api/invitations/[id]/route';
|
||||||
|
|
||||||
|
// ── Helpers ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const adminUser = {
|
||||||
|
id: 'usr_admin_1',
|
||||||
|
email: 'admin@example.com',
|
||||||
|
name: 'Admin',
|
||||||
|
role: 'super_admin',
|
||||||
|
plan: 'enterprise',
|
||||||
|
};
|
||||||
|
|
||||||
|
const viewerUser = {
|
||||||
|
id: 'usr_viewer_1',
|
||||||
|
email: 'viewer@example.com',
|
||||||
|
name: 'Viewer',
|
||||||
|
role: 'viewer',
|
||||||
|
plan: 'free',
|
||||||
|
};
|
||||||
|
|
||||||
|
async function callGET(token = 'Bearer admin_tok') {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return GET(
|
||||||
|
new NextRequest(
|
||||||
|
new Request('http://localhost:3001/api/invitations', {
|
||||||
|
headers: { Authorization: token },
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function callPOST(body: object, token = 'Bearer admin_tok') {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return POST(
|
||||||
|
new NextRequest(
|
||||||
|
new Request('http://localhost:3001/api/invitations', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
Authorization: token,
|
||||||
|
},
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function callPATCH(id: string, body: object, token = 'Bearer admin_tok') {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return PATCH(
|
||||||
|
new NextRequest(
|
||||||
|
new Request(`http://localhost:3001/api/invitations/${id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
Authorization: token,
|
||||||
|
},
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
})
|
||||||
|
),
|
||||||
|
{ params: Promise.resolve({ id }) }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function callDELETE(id: string, token = 'Bearer admin_tok') {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return DELETE(
|
||||||
|
new NextRequest(
|
||||||
|
new Request(`http://localhost:3001/api/invitations/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: { Authorization: token },
|
||||||
|
})
|
||||||
|
),
|
||||||
|
{ params: Promise.resolve({ id }) }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Tests ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('GET /api/invitations', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when not authenticated', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(null);
|
||||||
|
const res = await callGET();
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns codes and total', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockListInvitations.mockResolvedValue({
|
||||||
|
invitations: [{ id: 'inv_1', code: 'LYSNR-ABC' }],
|
||||||
|
count: 1,
|
||||||
|
});
|
||||||
|
mockCountInvitations.mockResolvedValue({ count: 1 });
|
||||||
|
|
||||||
|
const res = await callGET();
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.codes).toHaveLength(1);
|
||||||
|
expect(data.total).toBe(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('POST /api/invitations', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 403 for non-admin', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(viewerUser);
|
||||||
|
const res = await callPOST({});
|
||||||
|
expect(res.status).toBe(403);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 400 for invalid grantPlan', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
const res = await callPOST({ grantPlan: 'invalid' });
|
||||||
|
expect(res.status).toBe(400);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('creates code with defaults', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockCreateInvitation.mockImplementation((body: Record<string, unknown>) => ({
|
||||||
|
...body,
|
||||||
|
id: 'inv_new',
|
||||||
|
status: 'active',
|
||||||
|
currentUses: 0,
|
||||||
|
redeemedBy: [],
|
||||||
|
}));
|
||||||
|
|
||||||
|
const res = await callPOST({ description: 'Beta invite' });
|
||||||
|
expect(res.status).toBe(201);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.code).toMatch(/^LYSNR-/);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('creates code with custom code', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockCreateInvitation.mockImplementation((body: Record<string, unknown>) => ({
|
||||||
|
...body,
|
||||||
|
id: 'inv_new',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const res = await callPOST({ code: 'my-custom-code' });
|
||||||
|
expect(res.status).toBe(201);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.code).toBe('MY-CUSTOM-CODE');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('PATCH /api/invitations/[id]', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 403 for non-admin', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(viewerUser);
|
||||||
|
const res = await callPATCH('inv_1', { status: 'disabled' });
|
||||||
|
expect(res.status).toBe(403);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 500 when update fails', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockUpdateInvitation.mockResolvedValue(null);
|
||||||
|
const res = await callPATCH('inv_missing', { status: 'disabled' });
|
||||||
|
expect(res.status).toBe(500);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('toggles status successfully', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockUpdateInvitation.mockResolvedValue({ id: 'inv_1', status: 'disabled' });
|
||||||
|
|
||||||
|
const res = await callPATCH('inv_1', { status: 'disabled' });
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.status).toBe('disabled');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('DELETE /api/invitations/[id]', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 403 for non-super_admin', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue({ ...adminUser, role: 'admin' });
|
||||||
|
const res = await callDELETE('inv_1');
|
||||||
|
expect(res.status).toBe(403);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('deletes successfully', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockDeleteInvitation.mockResolvedValue(undefined);
|
||||||
|
const res = await callDELETE('inv_1');
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.success).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
156
dashboards/admin-web/src/__tests__/kill-switch.test.ts
Normal file
156
dashboards/admin-web/src/__tests__/kill-switch.test.ts
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
/**
|
||||||
|
* Tests for GET/PUT /api/settings/kill-switch
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
const mockListFlags = vi.fn();
|
||||||
|
const mockCreateFlag = vi.fn();
|
||||||
|
const mockUpdateFlag = vi.fn();
|
||||||
|
vi.mock('@/lib/platform-client', () => ({
|
||||||
|
listFlags: (...args: unknown[]) => mockListFlags(...args),
|
||||||
|
createFlag: (...args: unknown[]) => mockCreateFlag(...args),
|
||||||
|
updateFlag: (...args: unknown[]) => mockUpdateFlag(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { GET, PUT } from '@/app/api/settings/kill-switch/route';
|
||||||
|
|
||||||
|
async function makeGet() {
|
||||||
|
return GET();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function makePut(body: object) {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return PUT(
|
||||||
|
new NextRequest(
|
||||||
|
new Request('http://localhost:3001/api/settings/kill-switch', {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('GET /api/settings/kill-switch', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns default state when no kill_switch flag exists', async () => {
|
||||||
|
mockListFlags.mockResolvedValue({ flags: [] });
|
||||||
|
|
||||||
|
const res = await makeGet();
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
expect(data.enabled).toBe(false);
|
||||||
|
expect(data.platforms.desktop).toBe(true);
|
||||||
|
expect(data.platforms.ios).toBe(true);
|
||||||
|
expect(data.platforms.android).toBe(true);
|
||||||
|
expect(data.platforms.web).toBe(true);
|
||||||
|
expect(data.reason).toBe('');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns existing kill_switch flag state', async () => {
|
||||||
|
mockListFlags.mockResolvedValue({
|
||||||
|
flags: [{
|
||||||
|
key: 'kill_switch',
|
||||||
|
enabled: true,
|
||||||
|
platforms: ['desktop', 'ios'],
|
||||||
|
description: 'Maintenance window',
|
||||||
|
updatedAt: '2026-02-16T00:00:00Z',
|
||||||
|
}],
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await makeGet();
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
expect(data.enabled).toBe(true);
|
||||||
|
expect(data.platforms.desktop).toBe(true);
|
||||||
|
expect(data.platforms.ios).toBe(true);
|
||||||
|
expect(data.platforms.android).toBe(false);
|
||||||
|
expect(data.platforms.web).toBe(false);
|
||||||
|
expect(data.reason).toBe('Maintenance window');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('maps empty platforms array to all-true', async () => {
|
||||||
|
mockListFlags.mockResolvedValue({
|
||||||
|
flags: [{ key: 'kill_switch', enabled: true, platforms: [] }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await makeGet();
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.platforms.desktop).toBe(true);
|
||||||
|
expect(data.platforms.ios).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 500 on error', async () => {
|
||||||
|
mockListFlags.mockRejectedValue(new Error('Service down'));
|
||||||
|
|
||||||
|
const res = await makeGet();
|
||||||
|
expect(res.status).toBe(500);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.error).toContain('kill switch');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('PUT /api/settings/kill-switch', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('updates existing kill_switch flag', async () => {
|
||||||
|
mockListFlags.mockResolvedValue({
|
||||||
|
flags: [{ key: 'kill_switch', id: 'flag-123', enabled: false }],
|
||||||
|
});
|
||||||
|
mockUpdateFlag.mockResolvedValue({
|
||||||
|
enabled: true,
|
||||||
|
platforms: [],
|
||||||
|
description: 'Emergency shutdown',
|
||||||
|
updatedAt: '2026-02-16T10:00:00Z',
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await makePut({ enabled: true, reason: 'Emergency shutdown' });
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.enabled).toBe(true);
|
||||||
|
expect(data.reason).toBe('Emergency shutdown');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('creates new kill_switch flag when none exists', async () => {
|
||||||
|
mockListFlags.mockResolvedValue({ flags: [] });
|
||||||
|
mockCreateFlag.mockResolvedValue({
|
||||||
|
key: 'kill_switch',
|
||||||
|
enabled: true,
|
||||||
|
platforms: ['desktop'],
|
||||||
|
description: 'Test',
|
||||||
|
updatedAt: '2026-02-16T10:00:00Z',
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await makePut({
|
||||||
|
enabled: true,
|
||||||
|
reason: 'Test',
|
||||||
|
platforms: { desktop: true, ios: false, android: false, web: false },
|
||||||
|
});
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
expect(mockCreateFlag).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 500 on error', async () => {
|
||||||
|
mockListFlags.mockRejectedValue(new Error('Network error'));
|
||||||
|
|
||||||
|
const res = await makePut({ enabled: false });
|
||||||
|
expect(res.status).toBe(500);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('defaults enabled to false when not provided', async () => {
|
||||||
|
mockListFlags.mockResolvedValue({ flags: [] });
|
||||||
|
mockCreateFlag.mockResolvedValue({
|
||||||
|
key: 'kill_switch',
|
||||||
|
enabled: false,
|
||||||
|
platforms: [],
|
||||||
|
updatedAt: '2026-02-16T10:00:00Z',
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await makePut({});
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.enabled).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
126
dashboards/admin-web/src/__tests__/licenses.test.ts
Normal file
126
dashboards/admin-web/src/__tests__/licenses.test.ts
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
/**
|
||||||
|
* Tests for GET/POST /api/licenses
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
const mockRequireAdmin = vi.fn();
|
||||||
|
vi.mock('@/lib/auth-server', () => ({
|
||||||
|
requireAdmin: (...args: unknown[]) => mockRequireAdmin(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockGetUserLicenses = vi.fn();
|
||||||
|
const mockGenerateLicense = vi.fn();
|
||||||
|
const mockRevokeLicense = vi.fn();
|
||||||
|
const mockDeactivateLicenseDevice = vi.fn();
|
||||||
|
vi.mock('@/lib/billing-client', () => ({
|
||||||
|
getUserLicenses: (...args: unknown[]) => mockGetUserLicenses(...args),
|
||||||
|
generateLicense: (...args: unknown[]) => mockGenerateLicense(...args),
|
||||||
|
revokeLicense: (...args: unknown[]) => mockRevokeLicense(...args),
|
||||||
|
deactivateLicenseDevice: (...args: unknown[]) => mockDeactivateLicenseDevice(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { GET, POST } from '@/app/api/licenses/route';
|
||||||
|
|
||||||
|
async function makeGet(params: Record<string, string> = {}) {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
const qs = new URLSearchParams(params).toString();
|
||||||
|
return GET(new NextRequest(new Request(`http://localhost:3001/api/licenses?${qs}`)));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function makePost(body: object) {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return POST(
|
||||||
|
new NextRequest(
|
||||||
|
new Request('http://localhost:3001/api/licenses', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('GET /api/licenses', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when not admin', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(null);
|
||||||
|
const res = await makeGet({ userId: 'u1' });
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 400 when userId missing', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue({ id: 'admin1' });
|
||||||
|
const res = await makeGet();
|
||||||
|
expect(res.status).toBe(400);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.error).toContain('userId');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns licenses for user', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue({ id: 'admin1' });
|
||||||
|
mockGetUserLicenses.mockResolvedValue({
|
||||||
|
licenses: [{ key: 'LYSNR-ABCD', status: 'active' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await makeGet({ userId: 'usr_1' });
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.licenses).toHaveLength(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 500 on service error', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue({ id: 'admin1' });
|
||||||
|
mockGetUserLicenses.mockRejectedValue(new Error('Service down'));
|
||||||
|
|
||||||
|
const res = await makeGet({ userId: 'usr_1' });
|
||||||
|
expect(res.status).toBe(500);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('POST /api/licenses', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when not admin', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(null);
|
||||||
|
const res = await makePost({ userId: 'u1' });
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('generates new license by default', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue({ id: 'admin1' });
|
||||||
|
mockGenerateLicense.mockResolvedValue({ key: 'LYSNR-NEW1', status: 'active' });
|
||||||
|
|
||||||
|
const res = await makePost({ userId: 'usr_1', plan: 'pro' });
|
||||||
|
expect(res.status).toBe(201);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.key).toBe('LYSNR-NEW1');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('revokes license when action is revoke', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue({ id: 'admin1' });
|
||||||
|
mockRevokeLicense.mockResolvedValue({ success: true });
|
||||||
|
|
||||||
|
const res = await makePost({ action: 'revoke', key: 'LYSNR-ABCD' });
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
expect(mockRevokeLicense).toHaveBeenCalledWith('LYSNR-ABCD');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('deactivates device when action is deactivate', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue({ id: 'admin1' });
|
||||||
|
mockDeactivateLicenseDevice.mockResolvedValue({ success: true });
|
||||||
|
|
||||||
|
const res = await makePost({ action: 'deactivate', key: 'LYSNR-ABCD', deviceId: 'dev1' });
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
expect(mockDeactivateLicenseDevice).toHaveBeenCalledWith('LYSNR-ABCD', 'dev1');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 500 on error', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue({ id: 'admin1' });
|
||||||
|
mockGenerateLicense.mockRejectedValue(new Error('Limit reached'));
|
||||||
|
|
||||||
|
const res = await makePost({ userId: 'u1' });
|
||||||
|
expect(res.status).toBe(500);
|
||||||
|
});
|
||||||
|
});
|
||||||
281
dashboards/admin-web/src/__tests__/promos.test.ts
Normal file
281
dashboards/admin-web/src/__tests__/promos.test.ts
Normal file
@ -0,0 +1,281 @@
|
|||||||
|
/**
|
||||||
|
* Tests for GET/POST /api/promos route.
|
||||||
|
*
|
||||||
|
* Covers:
|
||||||
|
* GET:
|
||||||
|
* - 401 when not authenticated
|
||||||
|
* - 200 lists promos with mapped fields
|
||||||
|
* - 200 filters by active param
|
||||||
|
* - Handles coupon as expanded object vs string ID
|
||||||
|
* - 500 when Stripe throws
|
||||||
|
*
|
||||||
|
* POST:
|
||||||
|
* - 403 for non-admin
|
||||||
|
* - 400 when code is missing
|
||||||
|
* - 400 when neither percentOff nor amountOff provided
|
||||||
|
* - 201 creates coupon + promo with percentOff
|
||||||
|
* - 201 creates coupon + promo with amountOff
|
||||||
|
* - 201 creates with maxRedemptions and expiresAt
|
||||||
|
* - 500 when Stripe throws (surfaces error message)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
// ── Mocks ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const mockGetCurrentUser = vi.fn();
|
||||||
|
vi.mock('@/lib/auth-server', () => ({
|
||||||
|
getCurrentUser: (...args: unknown[]) => mockGetCurrentUser(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockListPromos = vi.fn();
|
||||||
|
const mockCreatePromo = vi.fn();
|
||||||
|
|
||||||
|
vi.mock('@/lib/growth-client', () => ({
|
||||||
|
listPromos: (...args: unknown[]) => mockListPromos(...args),
|
||||||
|
createPromo: (...args: unknown[]) => mockCreatePromo(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { GET, POST } from '@/app/api/promos/route';
|
||||||
|
|
||||||
|
// ── Helpers ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const adminUser = {
|
||||||
|
id: 'usr_admin_1',
|
||||||
|
email: 'admin@example.com',
|
||||||
|
name: 'Admin',
|
||||||
|
role: 'super_admin',
|
||||||
|
plan: 'enterprise',
|
||||||
|
};
|
||||||
|
|
||||||
|
const viewerUser = {
|
||||||
|
id: 'usr_viewer_1',
|
||||||
|
email: 'viewer@example.com',
|
||||||
|
name: 'Viewer',
|
||||||
|
role: 'viewer',
|
||||||
|
plan: 'free',
|
||||||
|
};
|
||||||
|
|
||||||
|
async function callGET(params = '', token = 'Bearer admin_tok') {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return GET(
|
||||||
|
new NextRequest(
|
||||||
|
new Request(`http://localhost:3001/api/promos${params}`, {
|
||||||
|
headers: { Authorization: token },
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function callPOST(body: object, token = 'Bearer admin_tok') {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return POST(
|
||||||
|
new NextRequest(
|
||||||
|
new Request('http://localhost:3001/api/promos', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
Authorization: token,
|
||||||
|
},
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sample Stripe promo code with expanded coupon object (Stripe SDK v20+: coupon under promotion)
|
||||||
|
const samplePromo = {
|
||||||
|
id: 'promo_abc123',
|
||||||
|
code: 'LAUNCH20',
|
||||||
|
active: true,
|
||||||
|
promotion: {
|
||||||
|
coupon: {
|
||||||
|
id: 'coup_xyz',
|
||||||
|
percent_off: 20,
|
||||||
|
amount_off: null,
|
||||||
|
currency: null,
|
||||||
|
duration: 'once',
|
||||||
|
},
|
||||||
|
type: 'coupon',
|
||||||
|
},
|
||||||
|
times_redeemed: 3,
|
||||||
|
max_redemptions: 100,
|
||||||
|
expires_at: 1767225600, // 2026-01-01T00:00:00Z
|
||||||
|
created: 1736689200, // 2025-01-12
|
||||||
|
metadata: { createdBy: 'usr_admin_1' },
|
||||||
|
};
|
||||||
|
|
||||||
|
// Promo with coupon as string ID (not expanded)
|
||||||
|
const _samplePromoStringCoupon = {
|
||||||
|
id: 'promo_def456',
|
||||||
|
code: 'VIP50',
|
||||||
|
active: false,
|
||||||
|
promotion: {
|
||||||
|
coupon: 'coup_string_id',
|
||||||
|
type: 'coupon',
|
||||||
|
},
|
||||||
|
times_redeemed: 0,
|
||||||
|
max_redemptions: null,
|
||||||
|
expires_at: null,
|
||||||
|
created: 1736689200,
|
||||||
|
metadata: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Tests ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('GET /api/promos', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when not authenticated', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(null);
|
||||||
|
const res = await callGET();
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('lists promos via growth service', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockListPromos.mockResolvedValue({
|
||||||
|
promos: [samplePromo],
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await callGET();
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.promos).toHaveLength(1);
|
||||||
|
expect(data.promos[0].code).toBe('LAUNCH20');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('passes active filter to growth service', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockListPromos.mockResolvedValue({ promos: [] });
|
||||||
|
|
||||||
|
await callGET('?active=true');
|
||||||
|
expect(mockListPromos).toHaveBeenCalledWith(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('passes undefined when no active filter', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockListPromos.mockResolvedValue({ promos: [] });
|
||||||
|
|
||||||
|
await callGET();
|
||||||
|
expect(mockListPromos).toHaveBeenCalledWith(undefined);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 500 when growth service throws', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockListPromos.mockRejectedValue(new Error('Growth Service error'));
|
||||||
|
|
||||||
|
const res = await callGET();
|
||||||
|
expect(res.status).toBe(500);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('POST /api/promos', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 403 for non-admin', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(viewerUser);
|
||||||
|
const res = await callPOST({ code: 'TEST', percentOff: 10 });
|
||||||
|
expect(res.status).toBe(403);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 400 when code is missing', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
const res = await callPOST({ percentOff: 10 });
|
||||||
|
expect(res.status).toBe(400);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.error).toContain('code');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 400 when neither percentOff nor amountOff', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
const res = await callPOST({ code: 'NODISC' });
|
||||||
|
expect(res.status).toBe(400);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.error).toContain('percentOff');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('creates promo with percentOff via growth service', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockCreatePromo.mockResolvedValue({
|
||||||
|
id: 'promo_new',
|
||||||
|
code: 'SUMMER25',
|
||||||
|
percentOff: 25,
|
||||||
|
couponId: 'coup_new',
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await callPOST({ code: 'summer25', percentOff: 25 });
|
||||||
|
expect(res.status).toBe(201);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.code).toBe('SUMMER25');
|
||||||
|
expect(data.percentOff).toBe(25);
|
||||||
|
expect(data.couponId).toBe('coup_new');
|
||||||
|
|
||||||
|
expect(mockCreatePromo).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
code: 'summer25',
|
||||||
|
percentOff: 25,
|
||||||
|
createdBy: 'usr_admin_1',
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('creates promo with amountOff via growth service', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockCreatePromo.mockResolvedValue({
|
||||||
|
id: 'promo_amt',
|
||||||
|
code: 'SAVE5',
|
||||||
|
amountOff: 500,
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await callPOST({ code: 'SAVE5', amountOff: 500, currency: 'usd' });
|
||||||
|
expect(res.status).toBe(201);
|
||||||
|
|
||||||
|
expect(mockCreatePromo).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
code: 'SAVE5',
|
||||||
|
amountOff: 500,
|
||||||
|
currency: 'usd',
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('passes maxRedemptions and expiresAt', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockCreatePromo.mockResolvedValue({
|
||||||
|
id: 'promo_lim',
|
||||||
|
code: 'LIMITED',
|
||||||
|
maxRedemptions: 50,
|
||||||
|
expiresAt: '2026-01-01T00:00:00Z',
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await callPOST({
|
||||||
|
code: 'LIMITED',
|
||||||
|
percentOff: 10,
|
||||||
|
duration: 'forever',
|
||||||
|
maxRedemptions: 50,
|
||||||
|
expiresAt: '2026-01-01T00:00:00Z',
|
||||||
|
});
|
||||||
|
expect(res.status).toBe(201);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.maxRedemptions).toBe(50);
|
||||||
|
expect(data.expiresAt).toBeTruthy();
|
||||||
|
|
||||||
|
expect(mockCreatePromo).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
maxRedemptions: 50,
|
||||||
|
expiresAt: '2026-01-01T00:00:00Z',
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 500 with error message when growth service throws', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockCreatePromo.mockRejectedValue(new Error('Invalid coupon params'));
|
||||||
|
|
||||||
|
const res = await callPOST({ code: 'BAD', percentOff: -5 });
|
||||||
|
expect(res.status).toBe(500);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.error).toBe('Invalid coupon params');
|
||||||
|
});
|
||||||
|
});
|
||||||
94
dashboards/admin-web/src/__tests__/referrals-admin.test.ts
Normal file
94
dashboards/admin-web/src/__tests__/referrals-admin.test.ts
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
/**
|
||||||
|
* Tests for GET /api/referrals (admin view).
|
||||||
|
*
|
||||||
|
* Covers:
|
||||||
|
* - 401 when not authenticated
|
||||||
|
* - 200 returns referrals + stats
|
||||||
|
* - 200 summary mode returns stats only
|
||||||
|
* - 500 on unexpected error
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
// ── Mocks ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const mockGetCurrentUser = vi.fn();
|
||||||
|
vi.mock('@/lib/auth-server', () => ({
|
||||||
|
getCurrentUser: (...args: unknown[]) => mockGetCurrentUser(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockListReferrals = vi.fn();
|
||||||
|
const mockGetReferralStats = vi.fn();
|
||||||
|
vi.mock('@/lib/growth-client', () => ({
|
||||||
|
listReferrals: (...args: unknown[]) => mockListReferrals(...args),
|
||||||
|
getReferralStats: (...args: unknown[]) => mockGetReferralStats(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { GET } from '@/app/api/referrals/route';
|
||||||
|
|
||||||
|
// ── Helpers ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const adminUser = {
|
||||||
|
id: 'usr_admin_1',
|
||||||
|
email: 'admin@example.com',
|
||||||
|
name: 'Admin',
|
||||||
|
role: 'super_admin',
|
||||||
|
plan: 'enterprise',
|
||||||
|
};
|
||||||
|
|
||||||
|
async function callGET(params = '', token = 'Bearer admin_tok') {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return GET(
|
||||||
|
new NextRequest(
|
||||||
|
new Request(`http://localhost:3001/api/referrals${params}`, {
|
||||||
|
headers: { Authorization: token },
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Tests ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('GET /api/referrals (admin)', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when not authenticated', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(null);
|
||||||
|
const res = await callGET();
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns referrals and stats', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockListReferrals.mockResolvedValue({
|
||||||
|
referrals: [{ id: 'ref_1', referrerEmail: 'a@b.com', status: 'signed_up' }],
|
||||||
|
});
|
||||||
|
mockGetReferralStats.mockResolvedValue({ total: 5, completed: 3, rewarded: 1 });
|
||||||
|
|
||||||
|
const res = await callGET();
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.referrals).toHaveLength(1);
|
||||||
|
expect(data.stats.total).toBe(5);
|
||||||
|
expect(data.stats.completed).toBe(3);
|
||||||
|
expect(data.stats.rewarded).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns summary only when mode=summary', async () => {
|
||||||
|
mockGetCurrentUser.mockResolvedValue(adminUser);
|
||||||
|
mockGetReferralStats.mockResolvedValue({ total: 10, completed: 6, rewarded: 2 });
|
||||||
|
|
||||||
|
const res = await callGET('?mode=summary');
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.total).toBe(10);
|
||||||
|
expect(data.completed).toBe(6);
|
||||||
|
expect(data.referrals).toBeUndefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 500 on unexpected error', async () => {
|
||||||
|
mockGetCurrentUser.mockRejectedValue(new Error('DB down'));
|
||||||
|
const res = await callGET();
|
||||||
|
expect(res.status).toBe(500);
|
||||||
|
});
|
||||||
|
});
|
||||||
173
dashboards/admin-web/src/__tests__/telemetry.test.ts
Normal file
173
dashboards/admin-web/src/__tests__/telemetry.test.ts
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
/**
|
||||||
|
* Tests for client-side self-telemetry module (src/lib/telemetry.ts) — admin dashboard.
|
||||||
|
* Verifies event format, queue behavior, flush logic (admin-ingest proxy), and install ID.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
||||||
|
|
||||||
|
// Mock browser globals before importing the module
|
||||||
|
const mockSendBeacon = vi.fn().mockReturnValue(true);
|
||||||
|
const mockFetch = vi.fn().mockResolvedValue({ ok: true });
|
||||||
|
const mockAddEventListener = vi.fn();
|
||||||
|
|
||||||
|
vi.stubGlobal('navigator', { sendBeacon: mockSendBeacon, userAgent: 'TestAgent/1.0' });
|
||||||
|
vi.stubGlobal('fetch', mockFetch);
|
||||||
|
vi.stubGlobal('crypto', {
|
||||||
|
randomUUID: () => '550e8400-e29b-41d4-a716-446655440000',
|
||||||
|
});
|
||||||
|
|
||||||
|
const mockLocalStorage = new Map<string, string>();
|
||||||
|
vi.stubGlobal('localStorage', {
|
||||||
|
getItem: (key: string) => mockLocalStorage.get(key) ?? null,
|
||||||
|
setItem: (key: string, value: string) => mockLocalStorage.set(key, value),
|
||||||
|
removeItem: (key: string) => mockLocalStorage.delete(key),
|
||||||
|
});
|
||||||
|
|
||||||
|
vi.stubGlobal('document', { visibilityState: 'visible' });
|
||||||
|
vi.stubGlobal('window', {
|
||||||
|
addEventListener: mockAddEventListener,
|
||||||
|
});
|
||||||
|
|
||||||
|
import { trackEvent, trackPageView, flush, initTelemetry } from '@/lib/telemetry';
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
mockSendBeacon.mockClear();
|
||||||
|
mockFetch.mockClear();
|
||||||
|
mockAddEventListener.mockClear();
|
||||||
|
mockLocalStorage.clear();
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── trackEvent ─────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('trackEvent', () => {
|
||||||
|
it('queues an event with correct fields', () => {
|
||||||
|
trackEvent('info', 'admin', 'filter_applied');
|
||||||
|
flush();
|
||||||
|
|
||||||
|
expect(mockSendBeacon).toHaveBeenCalledTimes(1);
|
||||||
|
const [url, body] = mockSendBeacon.mock.calls[0];
|
||||||
|
expect(url).toBe('/api/telemetry/admin-ingest');
|
||||||
|
|
||||||
|
const payload = JSON.parse(body);
|
||||||
|
expect(payload.productId).toBe('test-product');
|
||||||
|
expect(payload.events).toHaveLength(1);
|
||||||
|
|
||||||
|
const event = payload.events[0];
|
||||||
|
expect(event.platform).toBe('web');
|
||||||
|
expect(event.channel).toBe('web_app');
|
||||||
|
expect(event.osFamily).toBe('other');
|
||||||
|
expect(event.eventType).toBe('info');
|
||||||
|
expect(event.module).toBe('admin');
|
||||||
|
expect(event.eventName).toBe('filter_applied');
|
||||||
|
expect(event.id).toBeDefined();
|
||||||
|
expect(event.sessionId).toBeDefined();
|
||||||
|
expect(event.anonymousInstallId).toBeDefined();
|
||||||
|
expect(event.occurredAt).toBeDefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('includes optional fields when provided', () => {
|
||||||
|
trackEvent('warn', 'admin', 'policy_changed', {
|
||||||
|
message: 'Policy updated',
|
||||||
|
tags: { policyId: 'pol_1' },
|
||||||
|
metrics: { duration_ms: 120 },
|
||||||
|
});
|
||||||
|
flush();
|
||||||
|
|
||||||
|
const payload = JSON.parse(mockSendBeacon.mock.calls[0][1]);
|
||||||
|
const event = payload.events[0];
|
||||||
|
expect(event.message).toBe('Policy updated');
|
||||||
|
expect(event.tags.policyId).toBe('pol_1');
|
||||||
|
expect(event.metrics.duration_ms).toBe(120);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('osFamily is "other" not "web"', () => {
|
||||||
|
trackEvent('info', 'test', 'test_event');
|
||||||
|
flush();
|
||||||
|
|
||||||
|
const payload = JSON.parse(mockSendBeacon.mock.calls[0][1]);
|
||||||
|
expect(payload.events[0].osFamily).toBe('other');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── trackPageView ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('trackPageView', () => {
|
||||||
|
it('creates page_view event with path tag', () => {
|
||||||
|
trackPageView('/ops/client-logs');
|
||||||
|
flush();
|
||||||
|
|
||||||
|
const payload = JSON.parse(mockSendBeacon.mock.calls[0][1]);
|
||||||
|
const event = payload.events[0];
|
||||||
|
expect(event.module).toBe('navigation');
|
||||||
|
expect(event.eventName).toBe('page_view');
|
||||||
|
expect(event.tags.path).toBe('/ops/client-logs');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── flush ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('flush', () => {
|
||||||
|
it('uses sendBeacon to admin-ingest route', () => {
|
||||||
|
trackEvent('info', 'test', 'test_event');
|
||||||
|
flush();
|
||||||
|
|
||||||
|
expect(mockSendBeacon).toHaveBeenCalledWith(
|
||||||
|
'/api/telemetry/admin-ingest',
|
||||||
|
expect.any(String),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('falls back to fetch when sendBeacon fails', () => {
|
||||||
|
mockSendBeacon.mockReturnValueOnce(false);
|
||||||
|
trackEvent('info', 'test', 'test_event');
|
||||||
|
flush();
|
||||||
|
|
||||||
|
expect(mockFetch).toHaveBeenCalledWith(
|
||||||
|
'/api/telemetry/admin-ingest',
|
||||||
|
expect.objectContaining({ method: 'POST', keepalive: true }),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('does nothing when queue is empty', () => {
|
||||||
|
flush();
|
||||||
|
expect(mockSendBeacon).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('clears queue after flush', () => {
|
||||||
|
trackEvent('info', 'test', 'event1');
|
||||||
|
trackEvent('info', 'test', 'event2');
|
||||||
|
flush();
|
||||||
|
|
||||||
|
mockSendBeacon.mockClear();
|
||||||
|
flush();
|
||||||
|
expect(mockSendBeacon).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── initTelemetry ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('initTelemetry', () => {
|
||||||
|
afterEach(() => {
|
||||||
|
flush();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('registers visibilitychange listener', () => {
|
||||||
|
initTelemetry();
|
||||||
|
expect(mockAddEventListener).toHaveBeenCalledWith(
|
||||||
|
'visibilitychange',
|
||||||
|
expect.any(Function),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('tracks session_started event', () => {
|
||||||
|
initTelemetry();
|
||||||
|
flush();
|
||||||
|
|
||||||
|
const payload = JSON.parse(mockSendBeacon.mock.calls[0][1]);
|
||||||
|
const sessionEvent = payload.events.find(
|
||||||
|
(e: Record<string, string>) => e.eventName === 'session_started',
|
||||||
|
);
|
||||||
|
expect(sessionEvent).toBeDefined();
|
||||||
|
expect(sessionEvent.module).toBe('app_lifecycle');
|
||||||
|
});
|
||||||
|
});
|
||||||
160
dashboards/admin-web/src/__tests__/tokens.test.ts
Normal file
160
dashboards/admin-web/src/__tests__/tokens.test.ts
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
/**
|
||||||
|
* Tests for /api/tokens routes
|
||||||
|
*
|
||||||
|
* Routes proxy to platform-service via JWT — no direct Cosmos or role checks.
|
||||||
|
*
|
||||||
|
* Covers:
|
||||||
|
* - GET /api/tokens — 401 without JWT, 200 with list
|
||||||
|
* - POST /api/tokens — 400 missing name, 201 on success
|
||||||
|
* - PATCH /api/tokens/[id] — 401 without JWT, 200 on success
|
||||||
|
* - DELETE /api/tokens/[id] — 401 without JWT, 200 on success
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
// ── Mocks ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const mockListTokens = vi.fn();
|
||||||
|
const mockCreateToken = vi.fn();
|
||||||
|
const mockRevokeToken = vi.fn();
|
||||||
|
const mockDeleteToken = vi.fn();
|
||||||
|
vi.mock('@/lib/platform-client', () => ({
|
||||||
|
listTokens: (...args: unknown[]) => mockListTokens(...args),
|
||||||
|
createToken: (...args: unknown[]) => mockCreateToken(...args),
|
||||||
|
revokeToken: (...args: unknown[]) => mockRevokeToken(...args),
|
||||||
|
deleteToken: (...args: unknown[]) => mockDeleteToken(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { GET, POST } from '@/app/api/tokens/route';
|
||||||
|
import { PATCH, DELETE } from '@/app/api/tokens/[id]/route';
|
||||||
|
|
||||||
|
// ── Helpers ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
async function callGet(token?: string) {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
const headers: Record<string, string> = {};
|
||||||
|
if (token) headers['Authorization'] = `Bearer ${token}`;
|
||||||
|
return GET(new NextRequest(new Request('http://localhost:3001/api/tokens', { headers })));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function callPost(body: object, token = 'admin_jwt') {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return POST(
|
||||||
|
new NextRequest(
|
||||||
|
new Request('http://localhost:3001/api/tokens', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function callPatch(id: string, token = 'admin_jwt') {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return PATCH(
|
||||||
|
new NextRequest(
|
||||||
|
new Request(`http://localhost:3001/api/tokens/${id}`, {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: { Authorization: `Bearer ${token}` },
|
||||||
|
})
|
||||||
|
),
|
||||||
|
{ params: Promise.resolve({ id }) }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function callDelete(id: string, token = 'admin_jwt') {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return DELETE(
|
||||||
|
new NextRequest(
|
||||||
|
new Request(`http://localhost:3001/api/tokens/${id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: { Authorization: `Bearer ${token}` },
|
||||||
|
})
|
||||||
|
),
|
||||||
|
{ params: Promise.resolve({ id }) }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Tests ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('GET /api/tokens', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when no JWT', async () => {
|
||||||
|
const res = await callGet();
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns token list on success', async () => {
|
||||||
|
mockListTokens.mockResolvedValue([
|
||||||
|
{ id: 'tok_1', name: 'CI Token', prefix: 'lysnr_abc', status: 'active' },
|
||||||
|
]);
|
||||||
|
const res = await callGet('valid_jwt');
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data).toHaveLength(1);
|
||||||
|
expect(data[0].name).toBe('CI Token');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('POST /api/tokens', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 400 when name is missing', async () => {
|
||||||
|
const res = await callPost({});
|
||||||
|
expect(res.status).toBe(400);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('creates token and returns with 201', async () => {
|
||||||
|
mockCreateToken.mockResolvedValue({
|
||||||
|
id: 'tok_new',
|
||||||
|
name: 'CI',
|
||||||
|
prefix: 'lysnr_xyz',
|
||||||
|
rawToken: 'lysnr_xyz_full_secret',
|
||||||
|
status: 'active',
|
||||||
|
});
|
||||||
|
const res = await callPost({ name: 'CI', scopes: ['dictation'] });
|
||||||
|
expect(res.status).toBe(201);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.rawToken).toBe('lysnr_xyz_full_secret');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('PATCH /api/tokens/[id]', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 without JWT', async () => {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
const res = await PATCH(
|
||||||
|
new NextRequest(new Request('http://localhost:3001/api/tokens/tok_1', { method: 'PATCH' })),
|
||||||
|
{ params: Promise.resolve({ id: 'tok_1' }) }
|
||||||
|
);
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('revokes token successfully', async () => {
|
||||||
|
mockRevokeToken.mockResolvedValue({ success: true, id: 'tok_1' });
|
||||||
|
const res = await callPatch('tok_1');
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('DELETE /api/tokens/[id]', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 without JWT', async () => {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
const res = await DELETE(
|
||||||
|
new NextRequest(new Request('http://localhost:3001/api/tokens/tok_1', { method: 'DELETE' })),
|
||||||
|
{ params: Promise.resolve({ id: 'tok_1' }) }
|
||||||
|
);
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('deletes token successfully', async () => {
|
||||||
|
mockDeleteToken.mockResolvedValue({ success: true, id: 'tok_1' });
|
||||||
|
const res = await callDelete('tok_1');
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
});
|
||||||
|
});
|
||||||
222
dashboards/admin-web/src/__tests__/users.test.ts
Normal file
222
dashboards/admin-web/src/__tests__/users.test.ts
Normal file
@ -0,0 +1,222 @@
|
|||||||
|
/**
|
||||||
|
* Tests for /api/users (GET, POST) and /api/users/[id] (GET, PUT, DELETE)
|
||||||
|
*
|
||||||
|
* Routes use requireAdmin from auth-server for auth, and platform-client
|
||||||
|
* functions (listUsers, getUserCounts, registerUser, getUser, updateUser,
|
||||||
|
* deleteUser) for data — no direct Cosmos repositories.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||||||
|
|
||||||
|
// ── Mocks ──────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const mockRequireAdmin = vi.fn();
|
||||||
|
vi.mock('@/lib/auth-server', () => ({
|
||||||
|
requireAdmin: (...args: unknown[]) => mockRequireAdmin(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const mockListUsers = vi.fn();
|
||||||
|
const mockGetUserCounts = vi.fn();
|
||||||
|
const mockRegisterUser = vi.fn();
|
||||||
|
const mockGetUser = vi.fn();
|
||||||
|
const mockUpdateUser = vi.fn();
|
||||||
|
const mockDeleteUser = vi.fn();
|
||||||
|
vi.mock('@/lib/platform-client', () => ({
|
||||||
|
listUsers: (...args: unknown[]) => mockListUsers(...args),
|
||||||
|
getUserCounts: (...args: unknown[]) => mockGetUserCounts(...args),
|
||||||
|
registerUser: (...args: unknown[]) => mockRegisterUser(...args),
|
||||||
|
getUser: (...args: unknown[]) => mockGetUser(...args),
|
||||||
|
updateUser: (...args: unknown[]) => mockUpdateUser(...args),
|
||||||
|
deleteUser: (...args: unknown[]) => mockDeleteUser(...args),
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock('@/lib/product-config', () => ({
|
||||||
|
PRODUCT_ID: 'test-product',
|
||||||
|
}));
|
||||||
|
|
||||||
|
import { GET as listUsersGET, POST as createUserPOST } from '@/app/api/users/route';
|
||||||
|
import {
|
||||||
|
GET as getUserGET,
|
||||||
|
PUT as updateUserPUT,
|
||||||
|
DELETE as deleteUserDELETE,
|
||||||
|
} from '@/app/api/users/[id]/route';
|
||||||
|
|
||||||
|
// ── Helpers ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
async function nr(url: string, opts?: RequestInit) {
|
||||||
|
const { NextRequest } = await import('next/server');
|
||||||
|
return new NextRequest(
|
||||||
|
new Request(url, {
|
||||||
|
headers: { Authorization: 'Bearer test', 'Content-Type': 'application/json', ...opts?.headers },
|
||||||
|
...opts,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const admin = { id: 'usr_a', email: 'a@example.com', name: 'Admin', role: 'admin' };
|
||||||
|
|
||||||
|
// ── GET /api/users ─────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('GET /api/users', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when unauthenticated', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(null);
|
||||||
|
const res = await listUsersGET(await nr('http://localhost:3001/api/users'));
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns users list with total and byPlan', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(admin);
|
||||||
|
mockListUsers.mockResolvedValue({ users: [{ id: 'u1', email: 'a@b.com' }] });
|
||||||
|
mockGetUserCounts.mockResolvedValue({ total: 42, byPlan: { free: 30, pro: 10, enterprise: 2 } });
|
||||||
|
|
||||||
|
const res = await listUsersGET(await nr('http://localhost:3001/api/users'));
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.users).toHaveLength(1);
|
||||||
|
expect(data.total).toBe(42);
|
||||||
|
expect(data.byPlan.free).toBe(30);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('passes limit and offset from query params', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(admin);
|
||||||
|
mockListUsers.mockResolvedValue({ users: [] });
|
||||||
|
mockGetUserCounts.mockResolvedValue({ total: 0, byPlan: {} });
|
||||||
|
|
||||||
|
await listUsersGET(await nr('http://localhost:3001/api/users?limit=10&offset=20'));
|
||||||
|
expect(mockListUsers).toHaveBeenCalledWith('test', 10, 20);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── POST /api/users ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('POST /api/users', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 403 for non-admin users', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(null);
|
||||||
|
const res = await createUserPOST(
|
||||||
|
await nr('http://localhost:3001/api/users', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ email: 'new@example.com', name: 'New', password: 'pass123' }),
|
||||||
|
})
|
||||||
|
);
|
||||||
|
expect(res.status).toBe(403);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns 400 when required fields are missing', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(admin);
|
||||||
|
const res = await createUserPOST(
|
||||||
|
await nr('http://localhost:3001/api/users', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ email: 'new@example.com' }),
|
||||||
|
})
|
||||||
|
);
|
||||||
|
expect(res.status).toBe(400);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.error).toContain('required');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('creates user with 201 when admin provides all fields', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(admin);
|
||||||
|
mockRegisterUser.mockResolvedValue({
|
||||||
|
user: { id: 'usr_new', email: 'new@example.com', displayName: 'New User', role: 'user', plan: 'free' },
|
||||||
|
});
|
||||||
|
|
||||||
|
const res = await createUserPOST(
|
||||||
|
await nr('http://localhost:3001/api/users', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ email: 'new@example.com', name: 'New User', password: 'pass123' }),
|
||||||
|
})
|
||||||
|
);
|
||||||
|
expect(res.status).toBe(201);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.email).toBe('new@example.com');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── GET /api/users/[id] ────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('GET /api/users/[id]', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 401 when unauthenticated', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(null);
|
||||||
|
const res = await getUserGET(await nr('http://localhost:3001/api/users/usr_1'), {
|
||||||
|
params: Promise.resolve({ id: 'usr_1' }),
|
||||||
|
});
|
||||||
|
expect(res.status).toBe(401);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('returns user data on success', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(admin);
|
||||||
|
mockGetUser.mockResolvedValue({ id: 'usr_1', email: 'user@example.com', role: 'user' });
|
||||||
|
const res = await getUserGET(await nr('http://localhost:3001/api/users/usr_1'), {
|
||||||
|
params: Promise.resolve({ id: 'usr_1' }),
|
||||||
|
});
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.id).toBe('usr_1');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── PUT /api/users/[id] ────────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('PUT /api/users/[id]', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 403 for non-admin users', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(null);
|
||||||
|
const res = await updateUserPUT(
|
||||||
|
await nr('http://localhost:3001/api/users/usr_1', {
|
||||||
|
method: 'PUT',
|
||||||
|
body: JSON.stringify({ name: 'Updated' }),
|
||||||
|
}),
|
||||||
|
{ params: Promise.resolve({ id: 'usr_1' }) }
|
||||||
|
);
|
||||||
|
expect(res.status).toBe(403);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('updates user and returns updated data', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(admin);
|
||||||
|
mockUpdateUser.mockResolvedValue({ id: 'usr_1', displayName: 'Updated Name', role: 'user' });
|
||||||
|
const res = await updateUserPUT(
|
||||||
|
await nr('http://localhost:3001/api/users/usr_1', {
|
||||||
|
method: 'PUT',
|
||||||
|
body: JSON.stringify({ name: 'Updated Name' }),
|
||||||
|
}),
|
||||||
|
{ params: Promise.resolve({ id: 'usr_1' }) }
|
||||||
|
);
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.displayName).toBe('Updated Name');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── DELETE /api/users/[id] ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
describe('DELETE /api/users/[id]', () => {
|
||||||
|
beforeEach(() => vi.clearAllMocks());
|
||||||
|
|
||||||
|
it('returns 403 for non-admin', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(null);
|
||||||
|
const res = await deleteUserDELETE(
|
||||||
|
await nr('http://localhost:3001/api/users/usr_1', { method: 'DELETE' }),
|
||||||
|
{ params: Promise.resolve({ id: 'usr_1' }) }
|
||||||
|
);
|
||||||
|
expect(res.status).toBe(403);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('deletes user successfully', async () => {
|
||||||
|
mockRequireAdmin.mockResolvedValue(admin);
|
||||||
|
mockDeleteUser.mockResolvedValue({ success: true });
|
||||||
|
const res = await deleteUserDELETE(
|
||||||
|
await nr('http://localhost:3001/api/users/usr_1', { method: 'DELETE' }),
|
||||||
|
{ params: Promise.resolve({ id: 'usr_1' }) }
|
||||||
|
);
|
||||||
|
expect(res.status).toBe(200);
|
||||||
|
const data = await res.json();
|
||||||
|
expect(data.success).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
216
dashboards/admin-web/src/app/(dashboard)/audit/page.tsx
Normal file
216
dashboards/admin-web/src/app/(dashboard)/audit/page.tsx
Normal file
@ -0,0 +1,216 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Shield, User, Settings2, Key, CreditCard, Search, AlertTriangle } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { mockAuditLog, type AuditEntry } from '@/lib/mock-data';
|
||||||
|
import { apiGetAudit } from '@/lib/api';
|
||||||
|
|
||||||
|
const categoryConfig: Record<
|
||||||
|
AuditEntry['category'],
|
||||||
|
{ label: string; icon: typeof Shield; color: string }
|
||||||
|
> = {
|
||||||
|
auth: { label: 'Auth', icon: Shield, color: 'bg-blue-50 text-blue-700' },
|
||||||
|
user: { label: 'User', icon: User, color: 'bg-purple-50 text-purple-700' },
|
||||||
|
config: { label: 'Config', icon: Settings2, color: 'bg-amber-50 text-amber-700' },
|
||||||
|
token: { label: 'Token', icon: Key, color: 'bg-emerald-50 text-emerald-700' },
|
||||||
|
billing: { label: 'Billing', icon: CreditCard, color: 'bg-pink-50 text-pink-700' },
|
||||||
|
};
|
||||||
|
|
||||||
|
function formatTimestamp(ts: string): string {
|
||||||
|
const d = new Date(ts);
|
||||||
|
return d.toLocaleString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AuditLogPage() {
|
||||||
|
const [entries, setEntries] = useState<AuditEntry[]>(mockAuditLog);
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [categoryFilter, setCategoryFilter] = useState<string>('all');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
apiGetAudit().then(({ data }) => {
|
||||||
|
if (data?.entries?.length) {
|
||||||
|
setEntries(
|
||||||
|
data.entries.map(e => ({
|
||||||
|
id: e.id,
|
||||||
|
category: e.category as AuditEntry['category'],
|
||||||
|
action: e.action,
|
||||||
|
actor: e.actor,
|
||||||
|
target: e.target,
|
||||||
|
ip: e.ip,
|
||||||
|
timestamp: e.timestamp,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const filtered = entries.filter(entry => {
|
||||||
|
const matchSearch =
|
||||||
|
!search ||
|
||||||
|
entry.actor.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
entry.action.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
(entry.target?.toLowerCase().includes(search.toLowerCase()) ?? false) ||
|
||||||
|
(entry.details?.toLowerCase().includes(search.toLowerCase()) ?? false);
|
||||||
|
const matchCategory = categoryFilter === 'all' || entry.category === categoryFilter;
|
||||||
|
return matchSearch && matchCategory;
|
||||||
|
});
|
||||||
|
|
||||||
|
const failedLogins = entries.filter(e => e.action === 'Failed Login').length;
|
||||||
|
const configChanges = entries.filter(e => e.category === 'config').length;
|
||||||
|
const userActions = entries.filter(e => e.category === 'user').length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Audit Log</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Track all administrative actions and security events
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Summary cards */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-3">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Total Events</CardTitle>
|
||||||
|
<Shield className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{entries.length}</div>
|
||||||
|
<p className="text-xs text-muted-foreground">Last 3 days</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Failed Logins</CardTitle>
|
||||||
|
<AlertTriangle className="h-4 w-4 text-destructive" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold text-destructive">{failedLogins}</div>
|
||||||
|
<p className="text-xs text-muted-foreground">Potential threats</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Config Changes</CardTitle>
|
||||||
|
<Settings2 className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{configChanges}</div>
|
||||||
|
<p className="text-xs text-muted-foreground">+ {userActions} user actions</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row">
|
||||||
|
<div className="relative flex-1">
|
||||||
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
placeholder="Search by actor, action, target…"
|
||||||
|
className="pl-9"
|
||||||
|
value={search}
|
||||||
|
onChange={e => setSearch(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Select value={categoryFilter} onValueChange={setCategoryFilter}>
|
||||||
|
<SelectTrigger className="w-[160px]">
|
||||||
|
<SelectValue placeholder="Category" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Categories</SelectItem>
|
||||||
|
<SelectItem value="auth">Auth</SelectItem>
|
||||||
|
<SelectItem value="user">User</SelectItem>
|
||||||
|
<SelectItem value="config">Config</SelectItem>
|
||||||
|
<SelectItem value="token">Token</SelectItem>
|
||||||
|
<SelectItem value="billing">Billing</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Table */}
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead className="w-[140px]">Time</TableHead>
|
||||||
|
<TableHead>Actor</TableHead>
|
||||||
|
<TableHead>Action</TableHead>
|
||||||
|
<TableHead>Category</TableHead>
|
||||||
|
<TableHead>Target</TableHead>
|
||||||
|
<TableHead className="hidden lg:table-cell">Details</TableHead>
|
||||||
|
<TableHead className="hidden md:table-cell">IP</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filtered.map(entry => {
|
||||||
|
const cat = categoryConfig[entry.category];
|
||||||
|
const isFailed = entry.action === 'Failed Login';
|
||||||
|
return (
|
||||||
|
<TableRow key={entry.id} className={isFailed ? 'bg-destructive/5' : undefined}>
|
||||||
|
<TableCell className="text-xs text-muted-foreground whitespace-nowrap">
|
||||||
|
{formatTimestamp(entry.timestamp)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-sm font-medium">{entry.actor}</TableCell>
|
||||||
|
<TableCell className="text-sm">
|
||||||
|
{isFailed && (
|
||||||
|
<AlertTriangle className="mr-1 inline h-3.5 w-3.5 text-destructive" />
|
||||||
|
)}
|
||||||
|
{entry.action}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="secondary" className={cat.color}>
|
||||||
|
<cat.icon className="mr-1 h-3 w-3" />
|
||||||
|
{cat.label}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-sm text-muted-foreground">
|
||||||
|
{entry.target ?? '—'}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="hidden lg:table-cell text-xs text-muted-foreground max-w-[200px] truncate">
|
||||||
|
{entry.details ?? '—'}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="hidden md:table-cell font-mono text-xs text-muted-foreground">
|
||||||
|
{entry.ip}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{filtered.length === 0 && (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={7} className="h-24 text-center text-muted-foreground">
|
||||||
|
No audit entries found.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
199
dashboards/admin-web/src/app/(dashboard)/billing/page.tsx
Normal file
199
dashboards/admin-web/src/app/(dashboard)/billing/page.tsx
Normal file
@ -0,0 +1,199 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useStripeConfig } from '@/lib/stripe-context';
|
||||||
|
import {
|
||||||
|
FlaskConical,
|
||||||
|
ShieldCheck,
|
||||||
|
CreditCard,
|
||||||
|
Webhook,
|
||||||
|
Server,
|
||||||
|
CheckCircle2,
|
||||||
|
XCircle,
|
||||||
|
ExternalLink,
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
function StatusBadge({ ok, label }: { ok: boolean; label: string }) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{ok ? (
|
||||||
|
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
|
||||||
|
) : (
|
||||||
|
<XCircle className="h-4 w-4 text-red-500" />
|
||||||
|
)}
|
||||||
|
<span className={ok ? 'text-foreground' : 'text-muted-foreground'}>{label}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BillingSettingsPage() {
|
||||||
|
const { mode, configured, isLive, priceIds, webhookConfigured, billingServiceUrl, loading } =
|
||||||
|
useStripeConfig();
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h1 className="text-2xl font-bold">Billing Configuration</h1>
|
||||||
|
<div className="text-muted-foreground">Loading Stripe configuration...</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold">Billing Configuration</h1>
|
||||||
|
<p className="text-muted-foreground mt-1">
|
||||||
|
Stripe account settings, product IDs, and service status.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mode Banner */}
|
||||||
|
<div
|
||||||
|
className={`rounded-lg border p-4 flex items-center gap-3 ${
|
||||||
|
isLive
|
||||||
|
? 'bg-emerald-50 border-emerald-200 dark:bg-emerald-950/30 dark:border-emerald-800'
|
||||||
|
: mode === 'test'
|
||||||
|
? 'bg-amber-50 border-amber-200 dark:bg-amber-950/30 dark:border-amber-800'
|
||||||
|
: 'bg-red-50 border-red-200 dark:bg-red-950/30 dark:border-red-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isLive ? (
|
||||||
|
<ShieldCheck className="h-6 w-6 text-emerald-600" />
|
||||||
|
) : (
|
||||||
|
<FlaskConical className="h-6 w-6 text-amber-600" />
|
||||||
|
)}
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-sm">
|
||||||
|
{isLive ? 'LIVE MODE' : mode === 'test' ? 'TEST MODE' : 'NOT CONFIGURED'}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
{isLive
|
||||||
|
? 'Real payments are being processed. Changes affect real customers.'
|
||||||
|
: mode === 'test'
|
||||||
|
? 'Using Stripe test keys. No real charges. Use card 4242 4242 4242 4242.'
|
||||||
|
: 'Stripe is not configured. Set STRIPE_SECRET_KEY in env.'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Configuration Status */}
|
||||||
|
<div className="rounded-lg border p-6 space-y-4">
|
||||||
|
<h2 className="text-lg font-semibold flex items-center gap-2">
|
||||||
|
<CreditCard className="h-5 w-5" />
|
||||||
|
Configuration Status
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||||
|
<StatusBadge ok={configured} label="Stripe API key configured" />
|
||||||
|
<StatusBadge ok={webhookConfigured} label="Webhook secret configured" />
|
||||||
|
<StatusBadge
|
||||||
|
ok={!!priceIds.pro && !priceIds.pro.includes('placeholder')}
|
||||||
|
label="Pro price ID set"
|
||||||
|
/>
|
||||||
|
<StatusBadge
|
||||||
|
ok={!!priceIds.enterprise && !priceIds.enterprise.includes('placeholder')}
|
||||||
|
label="Enterprise price ID set"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Product IDs */}
|
||||||
|
<div className="rounded-lg border p-6 space-y-4">
|
||||||
|
<h2 className="text-lg font-semibold flex items-center gap-2">
|
||||||
|
<CreditCard className="h-5 w-5" />
|
||||||
|
Stripe Products
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between py-2 border-b">
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">Pro Plan</div>
|
||||||
|
<div className="text-sm text-muted-foreground">$9.99/month</div>
|
||||||
|
</div>
|
||||||
|
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||||
|
{priceIds.pro || 'Not configured'}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between py-2 border-b">
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">Enterprise Plan</div>
|
||||||
|
<div className="text-sm text-muted-foreground">$29.99/month</div>
|
||||||
|
</div>
|
||||||
|
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||||
|
{priceIds.enterprise || 'Not configured'}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Services */}
|
||||||
|
<div className="rounded-lg border p-6 space-y-4">
|
||||||
|
<h2 className="text-lg font-semibold flex items-center gap-2">
|
||||||
|
<Server className="h-5 w-5" />
|
||||||
|
Services
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between py-2 border-b">
|
||||||
|
<div>
|
||||||
|
<div className="font-medium">Billing Service</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Subscriptions, usage metering, plan config
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||||
|
{billingServiceUrl}
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between py-2 border-b">
|
||||||
|
<div>
|
||||||
|
<div className="font-medium flex items-center gap-2">
|
||||||
|
Webhook Endpoint
|
||||||
|
<Webhook className="h-3.5 w-3.5 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Receives Stripe events (checkout, subscription changes)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className={`text-xs font-medium px-2 py-1 rounded ${
|
||||||
|
webhookConfigured
|
||||||
|
? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400'
|
||||||
|
: 'bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-400'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{webhookConfigured ? 'Configured' : 'Not configured'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Switching to Production */}
|
||||||
|
<div className="rounded-lg border p-6 space-y-4">
|
||||||
|
<h2 className="text-lg font-semibold">Switching to Production</h2>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Stripe mode is determined by the <code>STRIPE_SECRET_KEY</code> env var prefix. There is
|
||||||
|
no runtime toggle — this is a deliberate safety measure.
|
||||||
|
</p>
|
||||||
|
<div className="bg-muted/50 rounded p-4 text-sm space-y-2">
|
||||||
|
<div>
|
||||||
|
<strong>Test mode:</strong> <code>STRIPE_SECRET_KEY=sk_test_...</code>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<strong>Live mode:</strong> <code>STRIPE_SECRET_KEY=sk_live_...</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
To go live: update the env var in your deployment, create live products/prices, and
|
||||||
|
redeploy. See <code>docs/STRIPE_SETUP_GUIDE.md</code> → Go Live Checklist.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="https://dashboard.stripe.com/apikeys"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-1.5 text-sm text-primary hover:underline"
|
||||||
|
>
|
||||||
|
Open Stripe Dashboard
|
||||||
|
<ExternalLink className="h-3.5 w-3.5" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
436
dashboards/admin-web/src/app/(dashboard)/docs/page.tsx
Normal file
436
dashboards/admin-web/src/app/(dashboard)/docs/page.tsx
Normal file
@ -0,0 +1,436 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||||
|
import ReactMarkdown from 'react-markdown';
|
||||||
|
import remarkGfm from 'remark-gfm';
|
||||||
|
import {
|
||||||
|
FileText,
|
||||||
|
Search,
|
||||||
|
MessageSquare,
|
||||||
|
X,
|
||||||
|
Send,
|
||||||
|
Loader2,
|
||||||
|
ChevronRight,
|
||||||
|
FolderOpen,
|
||||||
|
BookOpen,
|
||||||
|
Bot,
|
||||||
|
User,
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
// ── Types ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface DocFile {
|
||||||
|
slug: string;
|
||||||
|
title: string;
|
||||||
|
path: string;
|
||||||
|
category: string;
|
||||||
|
sizeBytes: number;
|
||||||
|
modifiedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SearchResult extends DocFile {
|
||||||
|
snippet: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ChatMessage {
|
||||||
|
role: 'user' | 'assistant';
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Category metadata ──────────────────────────────────────────────
|
||||||
|
|
||||||
|
const CATEGORY_LABELS: Record<string, string> = {
|
||||||
|
root: 'Project Root',
|
||||||
|
docs: 'Documentation',
|
||||||
|
'docs/research': 'Research',
|
||||||
|
services: 'Service READMEs',
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Component ──────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export default function DocsPage() {
|
||||||
|
// Doc list & viewer state
|
||||||
|
const [docs, setDocs] = useState<DocFile[]>([]);
|
||||||
|
const [categories, setCategories] = useState<Record<string, DocFile[]>>({});
|
||||||
|
const [selectedSlug, setSelectedSlug] = useState<string | null>(null);
|
||||||
|
const [docContent, setDocContent] = useState<string>('');
|
||||||
|
const [docMeta, setDocMeta] = useState<DocFile | null>(null);
|
||||||
|
const [loadingDoc, setLoadingDoc] = useState(false);
|
||||||
|
|
||||||
|
// Search state
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const [searchResults, setSearchResults] = useState<SearchResult[] | null>(null);
|
||||||
|
const [, setSearching] = useState(false);
|
||||||
|
|
||||||
|
// Chat state
|
||||||
|
const [chatOpen, setChatOpen] = useState(false);
|
||||||
|
const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
|
||||||
|
const [chatInput, setChatInput] = useState('');
|
||||||
|
const [chatLoading, setChatLoading] = useState(false);
|
||||||
|
const chatEndRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
// Expanded categories
|
||||||
|
const [expandedCats, setExpandedCats] = useState<Set<string>>(new Set(['docs', 'root']));
|
||||||
|
|
||||||
|
// ── Load doc list ──
|
||||||
|
useEffect(() => {
|
||||||
|
fetch('/api/docs')
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(data => {
|
||||||
|
setDocs(data.docs || []);
|
||||||
|
setCategories(data.categories || {});
|
||||||
|
// Auto-expand all categories
|
||||||
|
if (data.categories) {
|
||||||
|
setExpandedCats(new Set(Object.keys(data.categories)));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(console.error);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// ── Load a specific doc ──
|
||||||
|
const loadDoc = useCallback(async (slug: string) => {
|
||||||
|
setSelectedSlug(slug);
|
||||||
|
setLoadingDoc(true);
|
||||||
|
setSearchResults(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/docs/${slug}`);
|
||||||
|
const data = await res.json();
|
||||||
|
setDocContent(data.content || '');
|
||||||
|
setDocMeta(data.meta || null);
|
||||||
|
} catch {
|
||||||
|
setDocContent('# Error\nFailed to load document.');
|
||||||
|
} finally {
|
||||||
|
setLoadingDoc(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// ── Search ──
|
||||||
|
const handleSearch = useCallback(async () => {
|
||||||
|
if (!searchQuery.trim()) {
|
||||||
|
setSearchResults(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSearching(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/docs?q=${encodeURIComponent(searchQuery)}`);
|
||||||
|
const data = await res.json();
|
||||||
|
setSearchResults(data.results || []);
|
||||||
|
} catch {
|
||||||
|
setSearchResults([]);
|
||||||
|
} finally {
|
||||||
|
setSearching(false);
|
||||||
|
}
|
||||||
|
}, [searchQuery]);
|
||||||
|
|
||||||
|
// ── Chat ──
|
||||||
|
const sendChat = useCallback(async () => {
|
||||||
|
if (!chatInput.trim() || chatLoading) return;
|
||||||
|
const question = chatInput.trim();
|
||||||
|
setChatInput('');
|
||||||
|
const newMessages: ChatMessage[] = [...chatMessages, { role: 'user', content: question }];
|
||||||
|
setChatMessages(newMessages);
|
||||||
|
setChatLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/docs/chat', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
question,
|
||||||
|
history: newMessages.slice(-6).map(m => ({
|
||||||
|
role: m.role,
|
||||||
|
content: m.content,
|
||||||
|
})),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
setChatMessages([
|
||||||
|
...newMessages,
|
||||||
|
{ role: 'assistant', content: data.answer || data.error || 'No response' },
|
||||||
|
]);
|
||||||
|
} catch {
|
||||||
|
setChatMessages([
|
||||||
|
...newMessages,
|
||||||
|
{ role: 'assistant', content: 'Failed to reach the AI assistant.' },
|
||||||
|
]);
|
||||||
|
} finally {
|
||||||
|
setChatLoading(false);
|
||||||
|
}
|
||||||
|
}, [chatInput, chatLoading, chatMessages]);
|
||||||
|
|
||||||
|
// Auto-scroll chat
|
||||||
|
useEffect(() => {
|
||||||
|
chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
}, [chatMessages]);
|
||||||
|
|
||||||
|
const toggleCategory = (cat: string) => {
|
||||||
|
setExpandedCats(prev => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(cat)) next.delete(cat);
|
||||||
|
else next.add(cat);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-[calc(100vh-4rem)] gap-0">
|
||||||
|
{/* ── Sidebar: File Tree ── */}
|
||||||
|
<div className="w-72 shrink-0 border-r bg-card overflow-y-auto">
|
||||||
|
{/* Search bar */}
|
||||||
|
<div className="p-3 border-b">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search docs..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={e => setSearchQuery(e.target.value)}
|
||||||
|
onKeyDown={e => e.key === 'Enter' && handleSearch()}
|
||||||
|
className="w-full rounded-md border bg-background pl-9 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search results */}
|
||||||
|
{searchResults !== null ? (
|
||||||
|
<div className="p-2">
|
||||||
|
<div className="flex items-center justify-between px-2 py-1">
|
||||||
|
<span className="text-xs font-semibold text-muted-foreground">
|
||||||
|
{searchResults.length} result{searchResults.length !== 1 ? 's' : ''}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setSearchResults(null);
|
||||||
|
setSearchQuery('');
|
||||||
|
}}
|
||||||
|
className="text-xs text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
Clear
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{searchResults.map(r => (
|
||||||
|
<button
|
||||||
|
key={r.slug}
|
||||||
|
onClick={() => loadDoc(r.slug)}
|
||||||
|
className={`w-full text-left rounded-md px-3 py-2 text-sm hover:bg-accent transition-colors ${
|
||||||
|
selectedSlug === r.slug ? 'bg-accent' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="font-medium truncate">{r.title}</div>
|
||||||
|
<div className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{r.snippet}</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
{searchResults.length === 0 && (
|
||||||
|
<p className="text-sm text-muted-foreground px-3 py-4 text-center">
|
||||||
|
No documents match your search.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
/* File tree */
|
||||||
|
<div className="p-2">
|
||||||
|
{Object.entries(categories).map(([cat, catDocs]) => (
|
||||||
|
<div key={cat} className="mb-1">
|
||||||
|
<button
|
||||||
|
onClick={() => toggleCategory(cat)}
|
||||||
|
className="flex items-center gap-1.5 w-full px-2 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground rounded transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronRight
|
||||||
|
className={`h-3 w-3 transition-transform ${
|
||||||
|
expandedCats.has(cat) ? 'rotate-90' : ''
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
<FolderOpen className="h-3.5 w-3.5" />
|
||||||
|
{CATEGORY_LABELS[cat] || cat}
|
||||||
|
<span className="ml-auto text-[10px] tabular-nums">{catDocs.length}</span>
|
||||||
|
</button>
|
||||||
|
{expandedCats.has(cat) && (
|
||||||
|
<div className="ml-4">
|
||||||
|
{catDocs.map(doc => (
|
||||||
|
<button
|
||||||
|
key={doc.slug}
|
||||||
|
onClick={() => loadDoc(doc.slug)}
|
||||||
|
className={`flex items-center gap-2 w-full rounded-md px-2 py-1.5 text-sm transition-colors ${
|
||||||
|
selectedSlug === doc.slug
|
||||||
|
? 'bg-primary text-primary-foreground'
|
||||||
|
: 'text-muted-foreground hover:bg-accent hover:text-foreground'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<FileText className="h-3.5 w-3.5 shrink-0" />
|
||||||
|
<span className="truncate">{doc.title}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Main Content Area ── */}
|
||||||
|
<div className="flex-1 flex flex-col overflow-hidden">
|
||||||
|
{/* Doc viewer */}
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
{loadingDoc ? (
|
||||||
|
<div className="flex items-center justify-center h-full">
|
||||||
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
) : docContent ? (
|
||||||
|
<div className="max-w-4xl mx-auto px-8 py-6">
|
||||||
|
{docMeta && (
|
||||||
|
<div className="flex items-center gap-2 text-xs text-muted-foreground mb-4 pb-3 border-b">
|
||||||
|
<BookOpen className="h-3.5 w-3.5" />
|
||||||
|
<span className="font-mono">{docMeta.path}</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>{(docMeta.sizeBytes / 1024).toFixed(1)} KB</span>
|
||||||
|
<span>•</span>
|
||||||
|
<span>Modified {new Date(docMeta.modifiedAt).toLocaleDateString()}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<article className="prose prose-sm dark:prose-invert max-w-none prose-headings:scroll-mt-4 prose-code:before:content-none prose-code:after:content-none prose-code:bg-muted prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm">
|
||||||
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>{docContent}</ReactMarkdown>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col items-center justify-center h-full text-muted-foreground">
|
||||||
|
<BookOpen className="h-12 w-12 mb-4 opacity-30" />
|
||||||
|
<h2 className="text-lg font-semibold">Project Documentation</h2>
|
||||||
|
<p className="text-sm mt-1">
|
||||||
|
Select a document from the sidebar or ask the AI assistant.
|
||||||
|
</p>
|
||||||
|
<p className="text-xs mt-4">
|
||||||
|
{docs.length} documents across {Object.keys(categories).length} categories
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chat FAB */}
|
||||||
|
{!chatOpen && (
|
||||||
|
<button
|
||||||
|
onClick={() => setChatOpen(true)}
|
||||||
|
className="fixed bottom-6 right-6 z-50 flex items-center gap-2 rounded-full bg-primary px-4 py-3 text-primary-foreground shadow-lg hover:opacity-90 transition-opacity"
|
||||||
|
>
|
||||||
|
<MessageSquare className="h-5 w-5" />
|
||||||
|
<span className="text-sm font-medium">Ask AI</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Chat Panel ── */}
|
||||||
|
{chatOpen && (
|
||||||
|
<div className="w-96 shrink-0 border-l bg-card flex flex-col">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between border-b px-4 py-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Bot className="h-5 w-5 text-primary" />
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold">AI Assistant</h3>
|
||||||
|
<p className="text-[10px] text-muted-foreground">
|
||||||
|
Powered by Perplexity • Knows all project docs
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setChatOpen(false)}
|
||||||
|
className="text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Messages */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||||
|
{chatMessages.length === 0 && (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<Bot className="h-10 w-10 mx-auto mb-3 text-muted-foreground opacity-40" />
|
||||||
|
<p className="text-sm text-muted-foreground">Ask me anything about the project!</p>
|
||||||
|
<div className="mt-4 space-y-2">
|
||||||
|
{[
|
||||||
|
'How do I deploy to production?',
|
||||||
|
"What's the Stripe setup process?",
|
||||||
|
'How does the billing service work?',
|
||||||
|
'What are the iOS TestFlight steps?',
|
||||||
|
].map(q => (
|
||||||
|
<button
|
||||||
|
key={q}
|
||||||
|
onClick={() => {
|
||||||
|
setChatInput(q);
|
||||||
|
}}
|
||||||
|
className="block w-full text-left text-xs bg-muted rounded-lg px-3 py-2 hover:bg-accent transition-colors"
|
||||||
|
>
|
||||||
|
{q}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{chatMessages.map((msg, i) => (
|
||||||
|
<div key={i} className={`flex gap-2 ${msg.role === 'user' ? 'justify-end' : ''}`}>
|
||||||
|
{msg.role === 'assistant' && (
|
||||||
|
<div className="shrink-0 w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center">
|
||||||
|
<Bot className="h-4 w-4 text-primary" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
className={`max-w-[85%] rounded-lg px-3 py-2 text-sm ${
|
||||||
|
msg.role === 'user' ? 'bg-primary text-primary-foreground' : 'bg-muted'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{msg.role === 'assistant' ? (
|
||||||
|
<div className="prose prose-sm dark:prose-invert max-w-none prose-p:my-1 prose-code:before:content-none prose-code:after:content-none prose-code:bg-background/50 prose-code:px-1 prose-code:rounded prose-code:text-xs">
|
||||||
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>{msg.content}</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
msg.content
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{msg.role === 'user' && (
|
||||||
|
<div className="shrink-0 w-7 h-7 rounded-full bg-muted flex items-center justify-center">
|
||||||
|
<User className="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{chatLoading && (
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<div className="shrink-0 w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center">
|
||||||
|
<Bot className="h-4 w-4 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div className="bg-muted rounded-lg px-3 py-2">
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div ref={chatEndRef} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input */}
|
||||||
|
<div className="border-t p-3">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={chatInput}
|
||||||
|
onChange={e => setChatInput(e.target.value)}
|
||||||
|
onKeyDown={e => e.key === 'Enter' && !e.shiftKey && sendChat()}
|
||||||
|
placeholder="Ask about the project..."
|
||||||
|
className="flex-1 rounded-md border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||||
|
disabled={chatLoading}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={sendChat}
|
||||||
|
disabled={chatLoading || !chatInput.trim()}
|
||||||
|
className="rounded-md bg-primary px-3 py-2 text-primary-foreground hover:opacity-90 disabled:opacity-50 transition-opacity"
|
||||||
|
>
|
||||||
|
<Send className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
425
dashboards/admin-web/src/app/(dashboard)/extraction/page.tsx
Normal file
425
dashboards/admin-web/src/app/(dashboard)/extraction/page.tsx
Normal file
@ -0,0 +1,425 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import {
|
||||||
|
Sparkles,
|
||||||
|
FileText,
|
||||||
|
Zap,
|
||||||
|
Activity,
|
||||||
|
RefreshCw,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronUp,
|
||||||
|
Tag,
|
||||||
|
Clock,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
import { apiFetch } from '@/lib/api';
|
||||||
|
|
||||||
|
// ── Types ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface ExtractionEntity {
|
||||||
|
extraction_class: string;
|
||||||
|
extraction_text: string;
|
||||||
|
attributes?: Record<string, string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ExtractResponse {
|
||||||
|
extractions: ExtractionEntity[];
|
||||||
|
metadata: {
|
||||||
|
modelId: string;
|
||||||
|
durationMs: number;
|
||||||
|
tokenCount?: number;
|
||||||
|
charCount: number;
|
||||||
|
};
|
||||||
|
requestId?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ExtractionTask {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
prompt: string;
|
||||||
|
classes: string[];
|
||||||
|
builtIn: boolean;
|
||||||
|
productId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SidecarHealth {
|
||||||
|
status: string;
|
||||||
|
sidecar?: { status: string; version: string };
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Helpers ──────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const CLASS_COLORS: Record<string, string> = {
|
||||||
|
action_item: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
|
||||||
|
decision: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
|
||||||
|
question: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
|
||||||
|
deadline: 'bg-red-500/20 text-red-400 border-red-500/30',
|
||||||
|
person: 'bg-green-500/20 text-green-400 border-green-500/30',
|
||||||
|
topic: 'bg-cyan-500/20 text-cyan-400 border-cyan-500/30',
|
||||||
|
emotion: 'bg-pink-500/20 text-pink-400 border-pink-500/30',
|
||||||
|
brain_signal: 'bg-indigo-500/20 text-indigo-400 border-indigo-500/30',
|
||||||
|
entity: 'bg-teal-500/20 text-teal-400 border-teal-500/30',
|
||||||
|
action: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
|
||||||
|
};
|
||||||
|
|
||||||
|
function getClassColor(cls: string): string {
|
||||||
|
return CLASS_COLORS[cls] || 'bg-zinc-500/20 text-zinc-400 border-zinc-500/30';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Component ────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export default function ExtractionPage() {
|
||||||
|
const [inputText, setInputText] = useState('');
|
||||||
|
const [selectedTask, setSelectedTask] = useState('transcript-extraction');
|
||||||
|
const [tasks, setTasks] = useState<ExtractionTask[]>([]);
|
||||||
|
const [result, setResult] = useState<ExtractResponse | null>(null);
|
||||||
|
const [health, setHealth] = useState<SidecarHealth | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [showTaskDetails, setShowTaskDetails] = useState(false);
|
||||||
|
|
||||||
|
// Load tasks and health on mount
|
||||||
|
useEffect(() => {
|
||||||
|
loadTasks();
|
||||||
|
checkHealth();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
async function loadTasks() {
|
||||||
|
try {
|
||||||
|
const res = await apiFetch<ExtractionTask[]>('/extraction/tasks');
|
||||||
|
if (res.data) setTasks(res.data);
|
||||||
|
} catch {
|
||||||
|
// Tasks endpoint may not be available yet
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function checkHealth() {
|
||||||
|
try {
|
||||||
|
const res = await apiFetch<SidecarHealth>('/extraction/extract/sidecar-health');
|
||||||
|
setHealth(res.data);
|
||||||
|
} catch {
|
||||||
|
setHealth({ status: 'error' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleExtract = useCallback(async () => {
|
||||||
|
if (!inputText.trim()) return;
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
setResult(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await apiFetch<ExtractResponse>('/extraction/extract', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({
|
||||||
|
text: inputText,
|
||||||
|
taskId: selectedTask,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (res.data) setResult(res.data);
|
||||||
|
else setError(res.error || 'No response from extraction service');
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : 'Extraction failed');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, [inputText, selectedTask]);
|
||||||
|
|
||||||
|
const currentTask = tasks.find((t) => t.id === selectedTask);
|
||||||
|
|
||||||
|
// Group extractions by class
|
||||||
|
const groupedExtractions = result?.extractions.reduce(
|
||||||
|
(acc, e) => {
|
||||||
|
const cls = e.extraction_class;
|
||||||
|
if (!acc[cls]) acc[cls] = [];
|
||||||
|
acc[cls].push(e);
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
{} as Record<string, ExtractionEntity[]>,
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold tracking-tight">Extraction</h1>
|
||||||
|
<p className="text-muted-foreground text-sm">
|
||||||
|
Extract structured entities from text using LangExtract
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className={
|
||||||
|
health?.status === 'ok'
|
||||||
|
? 'border-green-500/50 text-green-400'
|
||||||
|
: 'border-red-500/50 text-red-400'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Activity className="mr-1 h-3 w-3" />
|
||||||
|
{health?.status === 'ok' ? 'Sidecar Online' : 'Sidecar Offline'}
|
||||||
|
</Badge>
|
||||||
|
<Button variant="ghost" size="icon" onClick={checkHealth}>
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Input Section */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-3">
|
||||||
|
<div className="md:col-span-2 space-y-3">
|
||||||
|
<label className="text-sm font-medium">Input Text</label>
|
||||||
|
<textarea
|
||||||
|
className="w-full min-h-[200px] rounded-lg border border-border bg-background p-3 text-sm resize-y focus:outline-none focus:ring-2 focus:ring-ring"
|
||||||
|
placeholder="Paste a transcript, meeting notes, or any text to extract structured entities from..."
|
||||||
|
value={inputText}
|
||||||
|
onChange={(e) => setInputText(e.target.value)}
|
||||||
|
/>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button onClick={handleExtract} disabled={loading || !inputText.trim()}>
|
||||||
|
{loading ? (
|
||||||
|
<RefreshCw className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Sparkles className="mr-2 h-4 w-4" />
|
||||||
|
)}
|
||||||
|
{loading ? 'Extracting...' : 'Extract'}
|
||||||
|
</Button>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{inputText.length.toLocaleString()} chars
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Task Selector */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<label className="text-sm font-medium">Task</label>
|
||||||
|
<select
|
||||||
|
className="w-full rounded-lg border border-border bg-background p-2 text-sm"
|
||||||
|
value={selectedTask}
|
||||||
|
onChange={(e) => setSelectedTask(e.target.value)}
|
||||||
|
>
|
||||||
|
{tasks.length > 0 ? (
|
||||||
|
tasks.map((t) => (
|
||||||
|
<option key={t.id} value={t.id}>
|
||||||
|
{t.name} {t.builtIn ? '(built-in)' : ''}
|
||||||
|
</option>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<option value="transcript-extraction">Transcript Extraction</option>
|
||||||
|
<option value="triage">MindLyst Triage</option>
|
||||||
|
<option value="memory-insight">Memory Insight</option>
|
||||||
|
<option value="reflection-enrichment">Reflection Enrichment</option>
|
||||||
|
<option value="bug-report-extraction">Bug Report Extraction</option>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
{currentTask && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<button
|
||||||
|
className="flex items-center text-xs text-muted-foreground hover:text-foreground"
|
||||||
|
onClick={() => setShowTaskDetails(!showTaskDetails)}
|
||||||
|
>
|
||||||
|
{showTaskDetails ? (
|
||||||
|
<ChevronUp className="mr-1 h-3 w-3" />
|
||||||
|
) : (
|
||||||
|
<ChevronDown className="mr-1 h-3 w-3" />
|
||||||
|
)}
|
||||||
|
Task Details
|
||||||
|
</button>
|
||||||
|
{showTaskDetails && (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-4 space-y-2 text-xs">
|
||||||
|
<p className="text-muted-foreground">{currentTask.description}</p>
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{currentTask.classes.map((cls) => (
|
||||||
|
<Badge
|
||||||
|
key={cls}
|
||||||
|
variant="outline"
|
||||||
|
className={`text-[10px] ${getClassColor(cls)}`}
|
||||||
|
>
|
||||||
|
{cls}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Quick Stats */}
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-4 space-y-2">
|
||||||
|
<div className="flex items-center justify-between text-xs">
|
||||||
|
<span className="text-muted-foreground">Model</span>
|
||||||
|
<span>gemini-2.5-flash</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-xs">
|
||||||
|
<span className="text-muted-foreground">Tasks</span>
|
||||||
|
<span>{tasks.length || 5} available</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error */}
|
||||||
|
{error && (
|
||||||
|
<Card className="border-red-500/30 bg-red-500/5">
|
||||||
|
<CardContent className="pt-4">
|
||||||
|
<p className="text-sm text-red-400">{error}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Results */}
|
||||||
|
{result && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Result Metadata */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Entities</CardTitle>
|
||||||
|
<Tag className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{result.extractions.length}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Duration</CardTitle>
|
||||||
|
<Clock className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{result.metadata.durationMs}ms</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Model</CardTitle>
|
||||||
|
<Zap className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-lg font-bold truncate">{result.metadata.modelId}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Input</CardTitle>
|
||||||
|
<FileText className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">
|
||||||
|
{result.metadata.charCount.toLocaleString()}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground">characters</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Grouped Extractions */}
|
||||||
|
{groupedExtractions && Object.keys(groupedExtractions).length > 0 && (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<h3 className="text-sm font-medium">Extracted Entities by Class</h3>
|
||||||
|
<div className="grid gap-3 md:grid-cols-2">
|
||||||
|
{Object.entries(groupedExtractions).map(([cls, entities]) => (
|
||||||
|
<Card key={cls}>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Badge variant="outline" className={getClassColor(cls)}>
|
||||||
|
{cls}
|
||||||
|
</Badge>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{entities.length} found
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-2">
|
||||||
|
{entities.map((e, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="rounded-md border border-border/50 bg-muted/30 p-2 text-sm"
|
||||||
|
>
|
||||||
|
<p className="text-foreground">"{e.extraction_text}"</p>
|
||||||
|
{e.attributes && Object.keys(e.attributes).length > 0 && (
|
||||||
|
<div className="mt-1 flex flex-wrap gap-1">
|
||||||
|
{Object.entries(e.attributes).map(([k, v]) => (
|
||||||
|
<Badge
|
||||||
|
key={k}
|
||||||
|
variant="secondary"
|
||||||
|
className="text-[10px]"
|
||||||
|
>
|
||||||
|
{k}: {v}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Raw Results Table */}
|
||||||
|
<div className="space-y-3">
|
||||||
|
<h3 className="text-sm font-medium">All Extractions</h3>
|
||||||
|
<Card>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead className="w-[150px]">Class</TableHead>
|
||||||
|
<TableHead>Text</TableHead>
|
||||||
|
<TableHead className="w-[200px]">Attributes</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{result.extractions.map((e, i) => (
|
||||||
|
<TableRow key={i}>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className={`text-xs ${getClassColor(e.extraction_class)}`}>
|
||||||
|
{e.extraction_class}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-sm">{e.extraction_text}</TableCell>
|
||||||
|
<TableCell className="text-xs text-muted-foreground">
|
||||||
|
{e.attributes
|
||||||
|
? Object.entries(e.attributes)
|
||||||
|
.map(([k, v]) => `${k}=${v}`)
|
||||||
|
.join(', ')
|
||||||
|
: '—'}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
322
dashboards/admin-web/src/app/(dashboard)/flags/page.tsx
Normal file
322
dashboards/admin-web/src/app/(dashboard)/flags/page.tsx
Normal file
@ -0,0 +1,322 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
Flag,
|
||||||
|
Plus,
|
||||||
|
Loader2,
|
||||||
|
Trash2,
|
||||||
|
ToggleLeft,
|
||||||
|
ToggleRight,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Switch } from '@/components/ui/switch';
|
||||||
|
import { Slider } from '@/components/ui/slider';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
|
||||||
|
interface FlagDoc {
|
||||||
|
id: string;
|
||||||
|
productId: string;
|
||||||
|
key: string;
|
||||||
|
enabled: boolean;
|
||||||
|
description: string;
|
||||||
|
platforms: string[];
|
||||||
|
segments: string[];
|
||||||
|
percentage: number;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FlagsPage() {
|
||||||
|
const [flags, setFlags] = useState<FlagDoc[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
// Create dialog
|
||||||
|
const [createOpen, setCreateOpen] = useState(false);
|
||||||
|
const [creating, setCreating] = useState(false);
|
||||||
|
const [form, setForm] = useState({
|
||||||
|
key: '',
|
||||||
|
description: '',
|
||||||
|
enabled: true,
|
||||||
|
percentage: 100,
|
||||||
|
platforms: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadFlags = async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/flags');
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setFlags(data.flags ?? []);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadFlags();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleCreate = async () => {
|
||||||
|
if (!form.key.trim()) return;
|
||||||
|
setCreating(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/flags', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
key: form.key.trim().toLowerCase().replace(/\s+/g, '_'),
|
||||||
|
description: form.description,
|
||||||
|
enabled: form.enabled,
|
||||||
|
percentage: form.percentage,
|
||||||
|
platforms: form.platforms
|
||||||
|
? form.platforms.split(',').map(s => s.trim()).filter(Boolean)
|
||||||
|
: [],
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
setCreateOpen(false);
|
||||||
|
setForm({ key: '', description: '', enabled: true, percentage: 100, platforms: '' });
|
||||||
|
loadFlags();
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
} finally {
|
||||||
|
setCreating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggle = async (flag: FlagDoc) => {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/flags/${encodeURIComponent(flag.key)}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ enabled: !flag.enabled }),
|
||||||
|
});
|
||||||
|
if (res.ok) loadFlags();
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdatePercentage = async (flag: FlagDoc, percentage: number) => {
|
||||||
|
try {
|
||||||
|
await fetch(`/api/flags/${encodeURIComponent(flag.key)}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ percentage }),
|
||||||
|
});
|
||||||
|
loadFlags();
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (flag: FlagDoc) => {
|
||||||
|
if (!confirm(`Delete flag "${flag.key}"? This cannot be undone.`)) return;
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/flags/${encodeURIComponent(flag.key)}`, { method: 'DELETE' });
|
||||||
|
if (res.ok) loadFlags();
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-20">
|
||||||
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Feature Flags</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Control feature rollouts with percentage-based targeting
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
New Flag
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Create Feature Flag</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4 pt-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Key</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="enable_new_editor"
|
||||||
|
value={form.key}
|
||||||
|
onChange={e => setForm({ ...form, key: e.target.value })}
|
||||||
|
/>
|
||||||
|
<p className="text-[10px] text-muted-foreground">
|
||||||
|
Lowercase, underscores only (e.g. enable_new_editor)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Description</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="Enable the new rich text editor"
|
||||||
|
value={form.description}
|
||||||
|
onChange={e => setForm({ ...form, description: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Platforms (comma-separated, optional)</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="desktop, ios, android, web"
|
||||||
|
value={form.platforms}
|
||||||
|
onChange={e => setForm({ ...form, platforms: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Label>Enabled by default</Label>
|
||||||
|
<Switch
|
||||||
|
checked={form.enabled}
|
||||||
|
onCheckedChange={v => setForm({ ...form, enabled: v })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Label>Rollout Percentage</Label>
|
||||||
|
<span className="text-sm font-mono">{form.percentage}%</span>
|
||||||
|
</div>
|
||||||
|
<Slider
|
||||||
|
value={[form.percentage]}
|
||||||
|
onValueChange={([v]: number[]) => setForm({ ...form, percentage: v })}
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
step={1}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
className="w-full"
|
||||||
|
onClick={handleCreate}
|
||||||
|
disabled={creating || !form.key.trim()}
|
||||||
|
>
|
||||||
|
{creating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
Create Flag
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{flags.length === 0 ? (
|
||||||
|
<div className="text-center py-12 text-muted-foreground">
|
||||||
|
<Flag className="mx-auto h-12 w-12 mb-3 opacity-30" />
|
||||||
|
<p>No feature flags yet</p>
|
||||||
|
<p className="text-xs mt-1">Create your first flag to control feature rollouts</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{flags.map(flag => (
|
||||||
|
<Card key={flag.id}>
|
||||||
|
<CardHeader className="pb-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button
|
||||||
|
onClick={() => handleToggle(flag)}
|
||||||
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||||
|
title={flag.enabled ? 'Disable flag' : 'Enable flag'}
|
||||||
|
>
|
||||||
|
{flag.enabled ? (
|
||||||
|
<ToggleRight className="h-6 w-6 text-emerald-500" />
|
||||||
|
) : (
|
||||||
|
<ToggleLeft className="h-6 w-6" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-sm font-mono">{flag.key}</CardTitle>
|
||||||
|
{flag.description && (
|
||||||
|
<p className="text-xs text-muted-foreground mt-0.5">
|
||||||
|
{flag.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className={
|
||||||
|
flag.enabled
|
||||||
|
? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400'
|
||||||
|
: 'bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{flag.enabled ? 'ON' : 'OFF'}
|
||||||
|
</Badge>
|
||||||
|
<Badge variant="outline" className="font-mono text-xs">
|
||||||
|
{flag.percentage}%
|
||||||
|
</Badge>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 w-7 p-0 text-destructive hover:text-destructive"
|
||||||
|
onClick={() => handleDelete(flag)}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3.5 w-3.5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="pt-0">
|
||||||
|
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||||
|
{flag.platforms.length > 0 && (
|
||||||
|
<span>
|
||||||
|
Platforms: {flag.platforms.join(', ')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{flag.segments.length > 0 && (
|
||||||
|
<span>
|
||||||
|
Segments: {flag.segments.join(', ')}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span>
|
||||||
|
Updated {new Date(flag.updatedAt).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{flag.enabled && (
|
||||||
|
<div className="mt-3 flex items-center gap-3">
|
||||||
|
<span className="text-xs text-muted-foreground w-16">Rollout:</span>
|
||||||
|
<Slider
|
||||||
|
value={[flag.percentage]}
|
||||||
|
onValueChange={([v]: number[]) => handleUpdatePercentage(flag, v)}
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
step={1}
|
||||||
|
className="flex-1"
|
||||||
|
/>
|
||||||
|
<span className="text-xs font-mono w-10 text-right">{flag.percentage}%</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
572
dashboards/admin-web/src/app/(dashboard)/invitations/page.tsx
Normal file
572
dashboards/admin-web/src/app/(dashboard)/invitations/page.tsx
Normal file
@ -0,0 +1,572 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
Ticket,
|
||||||
|
Plus,
|
||||||
|
Copy,
|
||||||
|
MoreHorizontal,
|
||||||
|
CheckCircle2,
|
||||||
|
XCircle,
|
||||||
|
Clock,
|
||||||
|
Upload,
|
||||||
|
FileSpreadsheet,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/components/ui/dropdown-menu';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import {
|
||||||
|
apiListInvitations,
|
||||||
|
apiCreateInvitation,
|
||||||
|
apiUpdateInvitation,
|
||||||
|
apiDeleteInvitation,
|
||||||
|
apiBulkCreateInvitations,
|
||||||
|
type ApiInvitation,
|
||||||
|
type BulkInviteResult,
|
||||||
|
} from '@/lib/api';
|
||||||
|
|
||||||
|
const statusConfig: Record<string, { label: string; color: string; icon: typeof CheckCircle2 }> = {
|
||||||
|
active: { label: 'Active', color: 'bg-emerald-50 text-emerald-700', icon: CheckCircle2 },
|
||||||
|
expired: { label: 'Expired', color: 'bg-amber-50 text-amber-700', icon: Clock },
|
||||||
|
disabled: { label: 'Disabled', color: 'bg-red-50 text-red-700', icon: XCircle },
|
||||||
|
};
|
||||||
|
|
||||||
|
function formatDate(iso: string) {
|
||||||
|
return new Date(iso).toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function InvitationsPage() {
|
||||||
|
const [codes, setCodes] = useState<ApiInvitation[]>([]);
|
||||||
|
const [total, setTotal] = useState(0);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [showCreate, setShowCreate] = useState(false);
|
||||||
|
const [copied, setCopied] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Create form state
|
||||||
|
const [newCode, setNewCode] = useState('');
|
||||||
|
const [newDescription, setNewDescription] = useState('');
|
||||||
|
const [newPlan, setNewPlan] = useState('pro');
|
||||||
|
const [newTrialDays, setNewTrialDays] = useState('0');
|
||||||
|
const [newBonusTokens, setNewBonusTokens] = useState('0');
|
||||||
|
const [newMaxUses, setNewMaxUses] = useState('100');
|
||||||
|
const [creating, setCreating] = useState(false);
|
||||||
|
|
||||||
|
// Bulk upload state
|
||||||
|
const [showBulk, setShowBulk] = useState(false);
|
||||||
|
const [csvRows, setCsvRows] = useState<Record<string, string>[]>([]);
|
||||||
|
const [bulkUploading, setBulkUploading] = useState(false);
|
||||||
|
const [bulkResult, setBulkResult] = useState<BulkInviteResult | null>(null);
|
||||||
|
|
||||||
|
async function loadCodes() {
|
||||||
|
setLoading(true);
|
||||||
|
const { data } = await apiListInvitations();
|
||||||
|
if (data) {
|
||||||
|
setCodes(data.codes);
|
||||||
|
setTotal(data.total);
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void loadCodes();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
async function handleCreate() {
|
||||||
|
setCreating(true);
|
||||||
|
const { data, error } = await apiCreateInvitation({
|
||||||
|
code: newCode || undefined,
|
||||||
|
description: newDescription,
|
||||||
|
grantPlan: newPlan,
|
||||||
|
grantTrialDays: parseInt(newTrialDays) || 0,
|
||||||
|
bonusTokens: parseInt(newBonusTokens) || 0,
|
||||||
|
maxUses: parseInt(newMaxUses) || 100,
|
||||||
|
});
|
||||||
|
setCreating(false);
|
||||||
|
if (data) {
|
||||||
|
setShowCreate(false);
|
||||||
|
setNewCode('');
|
||||||
|
setNewDescription('');
|
||||||
|
setNewPlan('pro');
|
||||||
|
setNewTrialDays('0');
|
||||||
|
setNewBonusTokens('0');
|
||||||
|
setNewMaxUses('100');
|
||||||
|
loadCodes();
|
||||||
|
} else {
|
||||||
|
alert(error || 'Failed to create invitation');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleToggle(inv: ApiInvitation) {
|
||||||
|
const newStatus = inv.status === 'active' ? 'disabled' : 'active';
|
||||||
|
await apiUpdateInvitation(inv.id, { status: newStatus });
|
||||||
|
loadCodes();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleDelete(id: string) {
|
||||||
|
if (!confirm('Delete this invitation code?')) return;
|
||||||
|
await apiDeleteInvitation(id);
|
||||||
|
loadCodes();
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseCsvLine(line: string): string[] {
|
||||||
|
const fields: string[] = [];
|
||||||
|
let current = '';
|
||||||
|
let inQuotes = false;
|
||||||
|
for (let i = 0; i < line.length; i++) {
|
||||||
|
const ch = line[i];
|
||||||
|
if (inQuotes) {
|
||||||
|
if (ch === '"' && line[i + 1] === '"') {
|
||||||
|
current += '"';
|
||||||
|
i++; // skip escaped quote
|
||||||
|
} else if (ch === '"') {
|
||||||
|
inQuotes = false;
|
||||||
|
} else {
|
||||||
|
current += ch;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (ch === '"') {
|
||||||
|
inQuotes = true;
|
||||||
|
} else if (ch === ',') {
|
||||||
|
fields.push(current.trim());
|
||||||
|
current = '';
|
||||||
|
} else {
|
||||||
|
current += ch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fields.push(current.trim());
|
||||||
|
return fields;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCsvFile(e: React.ChangeEvent<HTMLInputElement>) {
|
||||||
|
const file = e.target.files?.[0];
|
||||||
|
if (!file) return;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = ev => {
|
||||||
|
const text = ev.target?.result as string;
|
||||||
|
const lines = text.split(/\r?\n/).filter(l => l.trim());
|
||||||
|
if (lines.length < 2) return;
|
||||||
|
const headers = parseCsvLine(lines[0]).map(h => h.toLowerCase());
|
||||||
|
const rows = lines.slice(1).map(line => {
|
||||||
|
const vals = parseCsvLine(line);
|
||||||
|
const row: Record<string, string> = {};
|
||||||
|
headers.forEach((h, i) => (row[h] = vals[i] || ''));
|
||||||
|
return row;
|
||||||
|
});
|
||||||
|
setCsvRows(rows);
|
||||||
|
setBulkResult(null);
|
||||||
|
};
|
||||||
|
reader.readAsText(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleBulkUpload() {
|
||||||
|
if (csvRows.length === 0) return;
|
||||||
|
setBulkUploading(true);
|
||||||
|
const invitations = csvRows.map(row => ({
|
||||||
|
code: row.code || '',
|
||||||
|
description: row.description || '',
|
||||||
|
createdBy: row.createdby || 'admin',
|
||||||
|
grantPlan: row.grantplan || row.plan || 'pro',
|
||||||
|
grantTrialDays: parseInt(row.granttrialdays || row.trialdays || '0') || 0,
|
||||||
|
bonusTokens: parseInt(row.bonustokens || '0') || 0,
|
||||||
|
maxUses: parseInt(row.maxuses || '100') || 100,
|
||||||
|
expiresAt: row.expiresat || null,
|
||||||
|
}));
|
||||||
|
const { data, error } = await apiBulkCreateInvitations(invitations);
|
||||||
|
setBulkUploading(false);
|
||||||
|
if (data) {
|
||||||
|
setBulkResult(data);
|
||||||
|
loadCodes();
|
||||||
|
} else {
|
||||||
|
alert(error || 'Bulk upload failed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyCode(code: string) {
|
||||||
|
navigator.clipboard.writeText(code);
|
||||||
|
setCopied(code);
|
||||||
|
setTimeout(() => setCopied(null), 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold">Invitation Codes</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Generate invite codes that grant plan access or bonus tokens
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
setShowBulk(true);
|
||||||
|
setCsvRows([]);
|
||||||
|
setBulkResult(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Upload className="mr-2 h-4 w-4" /> CSV Bulk Import
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => setShowCreate(true)}>
|
||||||
|
<Plus className="mr-2 h-4 w-4" /> Create Code
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 md:grid-cols-3">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">Total Codes</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{total}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Active Codes
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">
|
||||||
|
{codes.filter(c => c.status === 'active').length}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Total Redemptions
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">
|
||||||
|
{codes.reduce((sum, c) => sum + c.currentUses, 0)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
{loading ? (
|
||||||
|
<div className="p-8 text-center text-muted-foreground">Loading...</div>
|
||||||
|
) : codes.length === 0 ? (
|
||||||
|
<div className="p-8 text-center text-muted-foreground">
|
||||||
|
<Ticket className="mx-auto mb-2 h-8 w-8 opacity-40" />
|
||||||
|
No invitation codes yet. Create one to get started.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Code</TableHead>
|
||||||
|
<TableHead>Plan</TableHead>
|
||||||
|
<TableHead>Trial</TableHead>
|
||||||
|
<TableHead>Bonus Tokens</TableHead>
|
||||||
|
<TableHead>Uses</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Created</TableHead>
|
||||||
|
<TableHead className="w-[50px]" />
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{codes.map(inv => {
|
||||||
|
const cfg = statusConfig[inv.status] || statusConfig.active;
|
||||||
|
const StatusIcon = cfg.icon;
|
||||||
|
return (
|
||||||
|
<TableRow key={inv.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="text-sm font-mono font-bold">{inv.code}</code>
|
||||||
|
<button
|
||||||
|
onClick={() => copyCode(inv.code)}
|
||||||
|
className="text-muted-foreground hover:text-foreground"
|
||||||
|
title="Copy code"
|
||||||
|
>
|
||||||
|
<Copy className="h-3.5 w-3.5" />
|
||||||
|
</button>
|
||||||
|
{copied === inv.code && (
|
||||||
|
<span className="text-xs text-emerald-600">Copied!</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{inv.description && (
|
||||||
|
<p className="text-xs text-muted-foreground mt-0.5">{inv.description}</p>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="capitalize">
|
||||||
|
{inv.grantPlan}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{inv.grantTrialDays > 0 ? `${inv.grantTrialDays} days` : '—'}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{inv.bonusTokens > 0 ? inv.bonusTokens.toLocaleString() : '—'}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{inv.currentUses} / {inv.maxUses}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={`${cfg.color} border-0 gap-1`}>
|
||||||
|
<StatusIcon className="h-3 w-3" />
|
||||||
|
{cfg.label}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-muted-foreground text-xs">
|
||||||
|
{formatDate(inv.createdAt)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||||
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem onClick={() => copyCode(inv.code)}>
|
||||||
|
Copy Code
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => handleToggle(inv)}>
|
||||||
|
{inv.status === 'active' ? 'Disable' : 'Enable'}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => handleDelete(inv.id)}
|
||||||
|
className="text-destructive"
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Dialog open={showCreate} onOpenChange={setShowCreate}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Create Invitation Code</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Generate an invite code that grants plan access or bonus tokens when redeemed.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Code (optional — auto-generated if empty)</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="e.g. BETA-2026"
|
||||||
|
value={newCode}
|
||||||
|
onChange={e => setNewCode(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Description</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="e.g. Beta tester invite"
|
||||||
|
value={newDescription}
|
||||||
|
onChange={e => setNewDescription(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Grant Plan</Label>
|
||||||
|
<Select value={newPlan} onValueChange={setNewPlan}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="pro">Pro</SelectItem>
|
||||||
|
<SelectItem value="enterprise">Enterprise</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Trial Days (0 = permanent)</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
value={newTrialDays}
|
||||||
|
onChange={e => setNewTrialDays(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Bonus Tokens</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
value={newBonusTokens}
|
||||||
|
onChange={e => setNewBonusTokens(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Max Uses</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
value={newMaxUses}
|
||||||
|
onChange={e => setNewMaxUses(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowCreate(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleCreate} disabled={creating}>
|
||||||
|
{creating ? 'Creating...' : 'Create Code'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Bulk CSV Upload Dialog */}
|
||||||
|
<Dialog open={showBulk} onOpenChange={setShowBulk}>
|
||||||
|
<DialogContent className="max-w-2xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="flex items-center gap-2">
|
||||||
|
<FileSpreadsheet className="h-5 w-5" />
|
||||||
|
CSV Bulk Import
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Upload a CSV file with columns:{' '}
|
||||||
|
<code className="text-xs">
|
||||||
|
code, description, grantPlan, grantTrialDays, bonusTokens, maxUses
|
||||||
|
</code>
|
||||||
|
. The <code className="text-xs">createdBy</code> column is optional (defaults to your
|
||||||
|
admin ID).
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Input type="file" accept=".csv" onChange={handleCsvFile} className="cursor-pointer" />
|
||||||
|
|
||||||
|
{csvRows.length > 0 && !bulkResult && (
|
||||||
|
<div className="rounded border">
|
||||||
|
<div className="bg-muted px-3 py-2 text-sm font-medium">
|
||||||
|
Preview ({csvRows.length} row{csvRows.length !== 1 ? 's' : ''})
|
||||||
|
</div>
|
||||||
|
<div className="max-h-[200px] overflow-auto">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Code</TableHead>
|
||||||
|
<TableHead>Plan</TableHead>
|
||||||
|
<TableHead>Trial</TableHead>
|
||||||
|
<TableHead>Tokens</TableHead>
|
||||||
|
<TableHead>Max Uses</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{csvRows.slice(0, 10).map((row, i) => (
|
||||||
|
<TableRow key={i}>
|
||||||
|
<TableCell className="font-mono text-xs">{row.code}</TableCell>
|
||||||
|
<TableCell>{row.grantplan || row.plan || 'pro'}</TableCell>
|
||||||
|
<TableCell>{row.granttrialdays || row.trialdays || '0'}</TableCell>
|
||||||
|
<TableCell>{row.bonustokens || '0'}</TableCell>
|
||||||
|
<TableCell>{row.maxuses || '100'}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
{csvRows.length > 10 && (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
colSpan={5}
|
||||||
|
className="text-center text-muted-foreground text-xs"
|
||||||
|
>
|
||||||
|
...and {csvRows.length - 10} more rows
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{bulkResult && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex gap-4 text-sm">
|
||||||
|
<span className="text-emerald-600 font-medium">
|
||||||
|
✓ {bulkResult.created} created
|
||||||
|
</span>
|
||||||
|
{bulkResult.failed > 0 && (
|
||||||
|
<span className="text-red-600 font-medium">✗ {bulkResult.failed} failed</span>
|
||||||
|
)}
|
||||||
|
<span className="text-muted-foreground">of {bulkResult.total} total</span>
|
||||||
|
</div>
|
||||||
|
{bulkResult.errors.length > 0 && (
|
||||||
|
<div className="rounded border border-red-200 bg-red-50 p-2 text-xs space-y-1">
|
||||||
|
{bulkResult.errors.map((err, i) => (
|
||||||
|
<div key={i}>
|
||||||
|
<span className="font-medium">Row {err.index + 1}:</span> {err.error}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowBulk(false)}>
|
||||||
|
{bulkResult ? 'Close' : 'Cancel'}
|
||||||
|
</Button>
|
||||||
|
{!bulkResult && (
|
||||||
|
<Button onClick={handleBulkUpload} disabled={csvRows.length === 0 || bulkUploading}>
|
||||||
|
{bulkUploading
|
||||||
|
? 'Uploading...'
|
||||||
|
: `Import ${csvRows.length} Code${csvRows.length !== 1 ? 's' : ''}`}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
44
dashboards/admin-web/src/app/(dashboard)/layout.tsx
Normal file
44
dashboards/admin-web/src/app/(dashboard)/layout.tsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { SidebarNav } from '@/components/sidebar-nav';
|
||||||
|
import { AuthGuard } from '@/components/auth-guard';
|
||||||
|
import { ErrorBoundary } from '@/components/error-boundary';
|
||||||
|
import { useStripeConfig } from '@/lib/stripe-context';
|
||||||
|
import { FlaskConical, ShieldCheck } from 'lucide-react';
|
||||||
|
|
||||||
|
function StripeModeBanner() {
|
||||||
|
const { mode, isLive } = useStripeConfig();
|
||||||
|
if (mode === null) return null;
|
||||||
|
|
||||||
|
if (isLive) {
|
||||||
|
return (
|
||||||
|
<div className="bg-emerald-600 text-white text-xs font-semibold text-center py-1.5 px-4 flex items-center justify-center gap-2">
|
||||||
|
<ShieldCheck className="h-3.5 w-3.5" />
|
||||||
|
STRIPE LIVE MODE — Real payments active
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-amber-400 text-amber-950 text-xs font-semibold text-center py-1.5 px-4 flex items-center justify-center gap-2">
|
||||||
|
<FlaskConical className="h-3.5 w-3.5" />
|
||||||
|
{mode === 'test'
|
||||||
|
? 'STRIPE TEST MODE — No real charges, use test cards'
|
||||||
|
: 'DEV MODE — Stripe not configured, payments disabled'}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<AuthGuard>
|
||||||
|
<SidebarNav />
|
||||||
|
<main className="ml-64 min-h-screen bg-background max-md:ml-0">
|
||||||
|
<StripeModeBanner />
|
||||||
|
<div className="p-8 max-md:p-4">
|
||||||
|
<ErrorBoundary>{children}</ErrorBoundary>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</AuthGuard>
|
||||||
|
);
|
||||||
|
}
|
||||||
383
dashboards/admin-web/src/app/(dashboard)/licenses/page.tsx
Normal file
383
dashboards/admin-web/src/app/(dashboard)/licenses/page.tsx
Normal file
@ -0,0 +1,383 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Key,
|
||||||
|
Search,
|
||||||
|
Plus,
|
||||||
|
Copy,
|
||||||
|
Check,
|
||||||
|
Loader2,
|
||||||
|
Monitor,
|
||||||
|
Smartphone,
|
||||||
|
X,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
|
||||||
|
interface LicenseDoc {
|
||||||
|
id: string;
|
||||||
|
productId: string;
|
||||||
|
key: string;
|
||||||
|
userId: string;
|
||||||
|
plan: 'free' | 'pro' | 'enterprise';
|
||||||
|
status: 'active' | 'revoked' | 'expired';
|
||||||
|
activatedAt: string | null;
|
||||||
|
expiresAt: string | null;
|
||||||
|
deviceIds: string[];
|
||||||
|
maxDevices: number;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusColors: Record<string, string> = {
|
||||||
|
active: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400',
|
||||||
|
revoked: 'bg-red-50 text-red-700 dark:bg-red-950/30 dark:text-red-400',
|
||||||
|
expired: 'bg-amber-50 text-amber-700 dark:bg-amber-950/30 dark:text-amber-400',
|
||||||
|
};
|
||||||
|
|
||||||
|
const planColors: Record<string, string> = {
|
||||||
|
free: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
|
||||||
|
pro: 'bg-blue-50 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400',
|
||||||
|
enterprise: 'bg-purple-50 text-purple-700 dark:bg-purple-950/30 dark:text-purple-400',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function LicensesPage() {
|
||||||
|
const [userId, setUserId] = useState('');
|
||||||
|
const [licenses, setLicenses] = useState<LicenseDoc[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [searched, setSearched] = useState(false);
|
||||||
|
const [copiedKey, setCopiedKey] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// Generate dialog state
|
||||||
|
const [genOpen, setGenOpen] = useState(false);
|
||||||
|
const [genUserId, setGenUserId] = useState('');
|
||||||
|
const [genPlan, setGenPlan] = useState<'free' | 'pro' | 'enterprise'>('pro');
|
||||||
|
const [genMaxDevices, setGenMaxDevices] = useState('3');
|
||||||
|
const [generating, setGenerating] = useState(false);
|
||||||
|
const [generatedKey, setGeneratedKey] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const handleSearch = async () => {
|
||||||
|
if (!userId.trim()) return;
|
||||||
|
setLoading(true);
|
||||||
|
setSearched(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/licenses?userId=${encodeURIComponent(userId.trim())}`);
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setLicenses(data.licenses ?? []);
|
||||||
|
} else {
|
||||||
|
setLicenses([]);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
setLicenses([]);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGenerate = async () => {
|
||||||
|
if (!genUserId.trim()) return;
|
||||||
|
setGenerating(true);
|
||||||
|
setGeneratedKey(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/licenses', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
userId: genUserId.trim(),
|
||||||
|
plan: genPlan,
|
||||||
|
maxDevices: Number(genMaxDevices) || 3,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
const license = await res.json();
|
||||||
|
setGeneratedKey(license.key);
|
||||||
|
// Refresh search if same user
|
||||||
|
if (userId.trim() === genUserId.trim()) {
|
||||||
|
handleSearch();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
} finally {
|
||||||
|
setGenerating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRevokeLicense = async (key: string) => {
|
||||||
|
if (!confirm('Revoke this license key? The user will lose access on all devices.')) return;
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/licenses', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ key, action: 'revoke' }),
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
setLicenses(prev =>
|
||||||
|
prev.map(l => (l.key === key ? { ...l, status: 'revoked' } : l))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeactivateDevice = async (key: string, deviceId: string) => {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/licenses', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ action: 'deactivate', key, deviceId }),
|
||||||
|
});
|
||||||
|
if (res.ok) handleSearch();
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyToClipboard = async (key: string) => {
|
||||||
|
await navigator.clipboard.writeText(key);
|
||||||
|
setCopiedKey(key);
|
||||||
|
setTimeout(() => setCopiedKey(null), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Licenses</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Manage license keys — generate, view status, and deactivate devices
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Dialog open={genOpen} onOpenChange={setGenOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
Generate License
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Generate New License Key</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4 pt-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>User ID</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="usr_..."
|
||||||
|
value={genUserId}
|
||||||
|
onChange={e => setGenUserId(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Plan</Label>
|
||||||
|
<Select value={genPlan} onValueChange={v => setGenPlan(v as typeof genPlan)}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="free">Free</SelectItem>
|
||||||
|
<SelectItem value="pro">Pro</SelectItem>
|
||||||
|
<SelectItem value="enterprise">Enterprise</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Max Devices</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min={1}
|
||||||
|
max={100}
|
||||||
|
value={genMaxDevices}
|
||||||
|
onChange={e => setGenMaxDevices(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{generatedKey && (
|
||||||
|
<div className="rounded-lg border border-emerald-500/50 bg-emerald-50 dark:bg-emerald-950/30 p-4">
|
||||||
|
<p className="text-xs text-emerald-700 dark:text-emerald-300 mb-1">
|
||||||
|
License key generated:
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="text-sm font-mono font-bold text-emerald-800 dark:text-emerald-200">
|
||||||
|
{generatedKey}
|
||||||
|
</code>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => copyToClipboard(generatedKey)}
|
||||||
|
>
|
||||||
|
{copiedKey === generatedKey ? (
|
||||||
|
<Check className="h-4 w-4 text-emerald-600" />
|
||||||
|
) : (
|
||||||
|
<Copy className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
className="w-full"
|
||||||
|
onClick={handleGenerate}
|
||||||
|
disabled={generating || !genUserId.trim()}
|
||||||
|
>
|
||||||
|
{generating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
Generate
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Look Up Licenses</CardTitle>
|
||||||
|
<CardDescription>Search by user ID to view their license keys</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
placeholder="Enter user ID (e.g. usr_abc123...)"
|
||||||
|
value={userId}
|
||||||
|
onChange={e => setUserId(e.target.value)}
|
||||||
|
onKeyDown={e => e.key === 'Enter' && handleSearch()}
|
||||||
|
className="max-w-md"
|
||||||
|
/>
|
||||||
|
<Button onClick={handleSearch} disabled={loading || !userId.trim()}>
|
||||||
|
{loading ? (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Search className="mr-2 h-4 w-4" />
|
||||||
|
)}
|
||||||
|
Search
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Results */}
|
||||||
|
{searched && !loading && licenses.length === 0 && (
|
||||||
|
<div className="text-center py-12 text-muted-foreground">
|
||||||
|
<Key className="mx-auto h-12 w-12 mb-3 opacity-30" />
|
||||||
|
<p>No licenses found for this user</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{licenses.map(lic => (
|
||||||
|
<Card key={lic.id}>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Key className="h-5 w-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="text-sm font-mono font-bold">{lic.key}</code>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 w-6 p-0"
|
||||||
|
onClick={() => copyToClipboard(lic.key)}
|
||||||
|
>
|
||||||
|
{copiedKey === lic.key ? (
|
||||||
|
<Check className="h-3 w-3 text-emerald-600" />
|
||||||
|
) : (
|
||||||
|
<Copy className="h-3 w-3" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-0.5">
|
||||||
|
Created {new Date(lic.createdAt).toLocaleDateString()}
|
||||||
|
{lic.expiresAt && (
|
||||||
|
<> · Expires {new Date(lic.expiresAt).toLocaleDateString()}</>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge variant="secondary" className={planColors[lic.plan]}>
|
||||||
|
{lic.plan}
|
||||||
|
</Badge>
|
||||||
|
<Badge variant="secondary" className={statusColors[lic.status]}>
|
||||||
|
{lic.status}
|
||||||
|
</Badge>
|
||||||
|
{lic.status === 'active' && (
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 text-destructive hover:text-destructive border-destructive/30"
|
||||||
|
onClick={() => handleRevokeLicense(lic.key)}
|
||||||
|
>
|
||||||
|
Revoke
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center justify-between text-sm mb-3">
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
Devices: {lic.deviceIds.length} / {lic.maxDevices}
|
||||||
|
</span>
|
||||||
|
{lic.activatedAt && (
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
First activated {new Date(lic.activatedAt).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{lic.deviceIds.length > 0 ? (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{lic.deviceIds.map(deviceId => (
|
||||||
|
<div
|
||||||
|
key={deviceId}
|
||||||
|
className="flex items-center justify-between rounded-md border px-3 py-2"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{deviceId.length > 12 ? (
|
||||||
|
<Monitor className="h-4 w-4 text-muted-foreground" />
|
||||||
|
) : (
|
||||||
|
<Smartphone className="h-4 w-4 text-muted-foreground" />
|
||||||
|
)}
|
||||||
|
<code className="text-xs font-mono">{deviceId}</code>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 text-destructive hover:text-destructive"
|
||||||
|
onClick={() => handleDeactivateDevice(lic.key, deviceId)}
|
||||||
|
>
|
||||||
|
<X className="h-3 w-3 mr-1" />
|
||||||
|
Remove
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-xs text-muted-foreground italic">
|
||||||
|
No devices activated yet
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
39
dashboards/admin-web/src/app/(dashboard)/loading.tsx
Normal file
39
dashboards/admin-web/src/app/(dashboard)/loading.tsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { Loader2 } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function DashboardLoading() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header skeleton */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="h-8 w-48 animate-pulse rounded bg-muted" />
|
||||||
|
<div className="h-4 w-72 animate-pulse rounded bg-muted" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* KPI cards skeleton */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{Array.from({ length: 4 }).map((_, i) => (
|
||||||
|
<div key={i} className="rounded-xl border bg-card p-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="h-4 w-24 animate-pulse rounded bg-muted" />
|
||||||
|
<div className="h-8 w-8 animate-pulse rounded bg-muted" />
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 h-7 w-20 animate-pulse rounded bg-muted" />
|
||||||
|
<div className="mt-1 h-3 w-32 animate-pulse rounded bg-muted" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chart skeleton */}
|
||||||
|
<div className="grid gap-4 lg:grid-cols-2">
|
||||||
|
{Array.from({ length: 2 }).map((_, i) => (
|
||||||
|
<div key={i} className="rounded-xl border bg-card p-6">
|
||||||
|
<div className="mb-4 h-5 w-36 animate-pulse rounded bg-muted" />
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
227
dashboards/admin-web/src/app/(dashboard)/notifications/page.tsx
Normal file
227
dashboards/admin-web/src/app/(dashboard)/notifications/page.tsx
Normal file
@ -0,0 +1,227 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
Bell,
|
||||||
|
Search,
|
||||||
|
Loader2,
|
||||||
|
Monitor,
|
||||||
|
Smartphone,
|
||||||
|
Tablet,
|
||||||
|
Check,
|
||||||
|
X,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
|
||||||
|
interface DeviceDoc {
|
||||||
|
id: string;
|
||||||
|
productId: string;
|
||||||
|
userId: string;
|
||||||
|
deviceId: string;
|
||||||
|
platform: string;
|
||||||
|
pushToken?: string;
|
||||||
|
appVersion?: string;
|
||||||
|
osVersion?: string;
|
||||||
|
lastSeenAt: string;
|
||||||
|
createdAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NotificationPrefs {
|
||||||
|
pushEnabled: boolean;
|
||||||
|
emailEnabled: boolean;
|
||||||
|
categories: Record<string, boolean>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const platformIcons: Record<string, typeof Monitor> = {
|
||||||
|
macos: Monitor,
|
||||||
|
windows: Monitor,
|
||||||
|
linux: Monitor,
|
||||||
|
ios: Smartphone,
|
||||||
|
android: Smartphone,
|
||||||
|
ipad: Tablet,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function NotificationsPage() {
|
||||||
|
const [userId, setUserId] = useState('');
|
||||||
|
const [devices, setDevices] = useState<DeviceDoc[]>([]);
|
||||||
|
const [prefs, setPrefs] = useState<NotificationPrefs | null>(null);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [searched, setSearched] = useState(false);
|
||||||
|
|
||||||
|
const handleSearch = async () => {
|
||||||
|
if (!userId.trim()) return;
|
||||||
|
setLoading(true);
|
||||||
|
setSearched(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/notifications?userId=${encodeURIComponent(userId.trim())}`);
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setDevices(data.devices ?? []);
|
||||||
|
setPrefs(data.prefs ?? null);
|
||||||
|
} else {
|
||||||
|
setDevices([]);
|
||||||
|
setPrefs(null);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
setDevices([]);
|
||||||
|
setPrefs(null);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Notifications</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
View registered devices and notification preferences by user
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Look Up User</CardTitle>
|
||||||
|
<CardDescription>Search by user ID to view their devices and notification preferences</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Input
|
||||||
|
placeholder="Enter user ID (e.g. usr_abc123...)"
|
||||||
|
value={userId}
|
||||||
|
onChange={e => setUserId(e.target.value)}
|
||||||
|
onKeyDown={e => e.key === 'Enter' && handleSearch()}
|
||||||
|
className="max-w-md"
|
||||||
|
/>
|
||||||
|
<Button onClick={handleSearch} disabled={loading || !userId.trim()}>
|
||||||
|
{loading ? (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Search className="mr-2 h-4 w-4" />
|
||||||
|
)}
|
||||||
|
Search
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{searched && !loading && (
|
||||||
|
<>
|
||||||
|
{/* Notification Preferences */}
|
||||||
|
{prefs && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Notification Preferences</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-6 text-sm">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-muted-foreground">Push:</span>
|
||||||
|
{prefs.pushEnabled ? (
|
||||||
|
<Badge variant="secondary" className="bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400">
|
||||||
|
<Check className="mr-1 h-3 w-3" /> Enabled
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="secondary" className="bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
|
||||||
|
<X className="mr-1 h-3 w-3" /> Disabled
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-muted-foreground">Email:</span>
|
||||||
|
{prefs.emailEnabled ? (
|
||||||
|
<Badge variant="secondary" className="bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400">
|
||||||
|
<Check className="mr-1 h-3 w-3" /> Enabled
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="secondary" className="bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
|
||||||
|
<X className="mr-1 h-3 w-3" /> Disabled
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{Object.keys(prefs.categories).length > 0 && (
|
||||||
|
<div className="mt-3">
|
||||||
|
<p className="text-xs text-muted-foreground mb-2">Category Overrides:</p>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{Object.entries(prefs.categories).map(([cat, enabled]) => (
|
||||||
|
<Badge
|
||||||
|
key={cat}
|
||||||
|
variant="outline"
|
||||||
|
className={enabled ? 'border-emerald-300' : 'border-red-300 line-through'}
|
||||||
|
>
|
||||||
|
{cat}: {enabled ? 'on' : 'off'}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Devices */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">
|
||||||
|
Registered Devices ({devices.length})
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{devices.length === 0 ? (
|
||||||
|
<div className="text-center py-8 text-muted-foreground">
|
||||||
|
<Bell className="mx-auto h-10 w-10 mb-2 opacity-30" />
|
||||||
|
<p className="text-sm">No devices registered for this user</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{devices.map(device => {
|
||||||
|
const Icon = platformIcons[device.platform?.toLowerCase()] ?? Monitor;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={device.id}
|
||||||
|
className="flex items-center justify-between rounded-lg border px-4 py-3"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Icon className="h-5 w-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="text-xs font-mono">{device.deviceId}</code>
|
||||||
|
<Badge variant="outline" className="text-[10px]">
|
||||||
|
{device.platform}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 mt-0.5 text-[11px] text-muted-foreground">
|
||||||
|
{device.appVersion && <span>v{device.appVersion}</span>}
|
||||||
|
{device.osVersion && <span>{device.osVersion}</span>}
|
||||||
|
<span>
|
||||||
|
Last seen {new Date(device.lastSeenAt).toLocaleDateString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{device.pushToken ? (
|
||||||
|
<Badge variant="secondary" className="bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400 text-[10px]">
|
||||||
|
Push token
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge variant="secondary" className="bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400 text-[10px]">
|
||||||
|
No push token
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
1045
dashboards/admin-web/src/app/(dashboard)/ops/client-logs/page.tsx
Normal file
1045
dashboards/admin-web/src/app/(dashboard)/ops/client-logs/page.tsx
Normal file
File diff suppressed because it is too large
Load Diff
237
dashboards/admin-web/src/app/(dashboard)/ops/page.tsx
Normal file
237
dashboards/admin-web/src/app/(dashboard)/ops/page.tsx
Normal file
@ -0,0 +1,237 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { Activity, CheckCircle, RefreshCw, ShieldAlert } from 'lucide-react';
|
||||||
|
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Progress } from '@/components/ui/progress';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
|
||||||
|
interface ServiceCheck {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
status: 'healthy' | 'degraded' | 'down' | 'maintenance';
|
||||||
|
latency: number;
|
||||||
|
version?: string;
|
||||||
|
message?: string;
|
||||||
|
lastChecked: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface OpsStatus {
|
||||||
|
overall: 'healthy' | 'degraded' | 'critical';
|
||||||
|
timestamp: string;
|
||||||
|
services: ServiceCheck[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function OpsPage() {
|
||||||
|
const [data, setData] = useState<OpsStatus | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
|
||||||
|
const [_error, setError] = useState<string | null>(null);
|
||||||
|
const [countdown, setCountdown] = useState(10);
|
||||||
|
|
||||||
|
const fetchStatus = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const res = await fetch('/api/ops/status');
|
||||||
|
if (!res.ok) throw new Error('Failed to fetch status');
|
||||||
|
const json = await res.json();
|
||||||
|
setData(json);
|
||||||
|
setLastUpdated(new Date());
|
||||||
|
setError(null);
|
||||||
|
} catch (err) {
|
||||||
|
setError(String(err));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
setCountdown(10);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchStatus();
|
||||||
|
const timer = setInterval(() => {
|
||||||
|
setCountdown(prev => {
|
||||||
|
if (prev <= 1) {
|
||||||
|
fetchStatus(); // trigger refresh
|
||||||
|
return 10;
|
||||||
|
}
|
||||||
|
return prev - 1;
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
return () => clearInterval(timer);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'healthy':
|
||||||
|
return 'bg-green-500/10 text-green-500 hover:bg-green-500/20';
|
||||||
|
case 'degraded':
|
||||||
|
return 'bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20';
|
||||||
|
case 'down':
|
||||||
|
return 'bg-red-500/10 text-red-500 hover:bg-red-500/20';
|
||||||
|
default:
|
||||||
|
return 'bg-gray-500/10 text-gray-500';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getLatencyColor = (ms: number) => {
|
||||||
|
if (ms < 100) return 'text-green-500';
|
||||||
|
if (ms < 500) return 'text-yellow-500';
|
||||||
|
return 'text-red-500';
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-1 space-y-4 p-8 pt-6">
|
||||||
|
<div className="flex items-center justify-between space-y-2">
|
||||||
|
<h2 className="text-3xl font-bold tracking-tight">Mission Control</h2>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Button variant="outline" size="sm" onClick={() => fetchStatus()}>
|
||||||
|
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||||||
|
Refresh ({countdown}s)
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Global Status Banner */}
|
||||||
|
{data && (
|
||||||
|
<Card
|
||||||
|
className={`border-l-4 ${data.overall === 'healthy' ? 'border-l-green-500' : data.overall === 'degraded' ? 'border-l-yellow-500' : 'border-l-red-500'}`}
|
||||||
|
>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Global System Status</CardTitle>
|
||||||
|
{data.overall === 'healthy' ? (
|
||||||
|
<CheckCircle className="h-4 w-4 text-green-500" />
|
||||||
|
) : (
|
||||||
|
<ShieldAlert className="h-4 w-4 text-red-500" />
|
||||||
|
)}
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold capitalize">{data.overall}</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Last updated: {lastUpdated?.toLocaleTimeString()}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Service Grid */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{data?.services.map(svc => (
|
||||||
|
<Card key={svc.id}>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">{svc.name}</CardTitle>
|
||||||
|
<Activity
|
||||||
|
className={`h-4 w-4 ${svc.status === 'healthy' ? 'text-muted-foreground' : 'text-red-500 animate-pulse'}`}
|
||||||
|
/>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<Badge variant="outline" className={getStatusColor(svc.status)}>
|
||||||
|
{svc.status}
|
||||||
|
</Badge>
|
||||||
|
<div className={`text-sm font-mono font-bold ${getLatencyColor(svc.latency)}`}>
|
||||||
|
{svc.latency}ms
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1 mt-3">
|
||||||
|
<div className="flex justify-between text-xs">
|
||||||
|
<span className="text-muted-foreground">Uptime (30d)</span>
|
||||||
|
<span className="font-medium">99.9%</span>
|
||||||
|
</div>
|
||||||
|
<Progress value={svc.status === 'down' ? 0 : 99} className="h-1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{svc.message && (
|
||||||
|
<div className="mt-3 rounded bg-muted p-2 text-xs font-mono text-destructive">
|
||||||
|
{svc.message}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-3 text-xs text-muted-foreground flex justify-between">
|
||||||
|
<span>v{svc.version || '?'}</span>
|
||||||
|
<span>{new Date(svc.lastChecked).toLocaleTimeString()}</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{!data &&
|
||||||
|
loading &&
|
||||||
|
Array.from({ length: 5 }).map((_, i) => (
|
||||||
|
<Card key={i}>
|
||||||
|
<CardHeader>
|
||||||
|
<Skeleton className="h-4 w-[150px]" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Skeleton className="h-[100px] w-full" />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Dependency Matrix (Static for now) */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Infrastructure Dependencies</CardTitle>
|
||||||
|
<CardDescription>Status of external cloud providers and databases.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Dependency</TableHead>
|
||||||
|
<TableHead>Type</TableHead>
|
||||||
|
<TableHead>Region</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell className="font-medium">Azure Cosmos DB</TableCell>
|
||||||
|
<TableCell>Database</TableCell>
|
||||||
|
<TableCell>West US 2</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="bg-green-500/10 text-green-500">
|
||||||
|
Operational
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell className="font-medium">Azure OpenAI</TableCell>
|
||||||
|
<TableCell>AI Model</TableCell>
|
||||||
|
<TableCell>Sweden Central</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="bg-green-500/10 text-green-500">
|
||||||
|
Operational
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell className="font-medium">Stripe API</TableCell>
|
||||||
|
<TableCell>Payments</TableCell>
|
||||||
|
<TableCell>Global</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="outline" className="bg-green-500/10 text-green-500">
|
||||||
|
Operational
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
565
dashboards/admin-web/src/app/(dashboard)/ops/secrets/page.tsx
Normal file
565
dashboards/admin-web/src/app/(dashboard)/ops/secrets/page.tsx
Normal file
@ -0,0 +1,565 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from 'react';
|
||||||
|
import {
|
||||||
|
KeyRound,
|
||||||
|
RefreshCw,
|
||||||
|
Plus,
|
||||||
|
Eye,
|
||||||
|
EyeOff,
|
||||||
|
Copy,
|
||||||
|
Check,
|
||||||
|
Trash2,
|
||||||
|
RotateCcw,
|
||||||
|
Shield,
|
||||||
|
Clock,
|
||||||
|
AlertTriangle,
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
|
||||||
|
interface SecretEntry {
|
||||||
|
name: string;
|
||||||
|
enabled: boolean;
|
||||||
|
createdOn: string | null;
|
||||||
|
updatedOn: string | null;
|
||||||
|
expiresOn: string | null;
|
||||||
|
contentType: string | null;
|
||||||
|
tags: Record<string, string>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SecretDetail {
|
||||||
|
name: string;
|
||||||
|
value: string;
|
||||||
|
version: string;
|
||||||
|
enabled: boolean;
|
||||||
|
createdOn: string;
|
||||||
|
updatedOn: string;
|
||||||
|
expiresOn: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SecretsPage() {
|
||||||
|
const [secrets, setSecrets] = useState<SecretEntry[]>([]);
|
||||||
|
const [vaultUrl, setVaultUrl] = useState<string>('');
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
// View secret
|
||||||
|
const [viewingSecret, setViewingSecret] = useState<SecretDetail | null>(null);
|
||||||
|
const [viewLoading, setViewLoading] = useState(false);
|
||||||
|
const [showValue, setShowValue] = useState(false);
|
||||||
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
|
// Add/Edit dialog
|
||||||
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
|
const [dialogMode, setDialogMode] = useState<'add' | 'edit' | 'rotate'>('add');
|
||||||
|
const [formName, setFormName] = useState('');
|
||||||
|
const [formValue, setFormValue] = useState('');
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
|
// Delete confirmation
|
||||||
|
const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
|
||||||
|
const [deleting, setDeleting] = useState(false);
|
||||||
|
|
||||||
|
const fetchSecrets = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const res = await fetch('/api/ops/secrets');
|
||||||
|
if (!res.ok) {
|
||||||
|
const json = await res.json();
|
||||||
|
throw new Error(json.error || `HTTP ${res.status}`);
|
||||||
|
}
|
||||||
|
const json = await res.json();
|
||||||
|
setSecrets(json.secrets);
|
||||||
|
setVaultUrl(json.vaultUrl);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : String(err));
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchSecrets();
|
||||||
|
}, [fetchSecrets]);
|
||||||
|
|
||||||
|
const handleViewSecret = async (name: string) => {
|
||||||
|
try {
|
||||||
|
setViewLoading(true);
|
||||||
|
setShowValue(false);
|
||||||
|
setCopied(false);
|
||||||
|
const res = await fetch(`/api/ops/secrets/${encodeURIComponent(name)}`);
|
||||||
|
if (!res.ok) throw new Error('Failed to read secret');
|
||||||
|
const json = await res.json();
|
||||||
|
setViewingSecret(json);
|
||||||
|
} catch {
|
||||||
|
setViewingSecret(null);
|
||||||
|
} finally {
|
||||||
|
setViewLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCopy = async () => {
|
||||||
|
if (viewingSecret?.value) {
|
||||||
|
await navigator.clipboard.writeText(viewingSecret.value);
|
||||||
|
setCopied(true);
|
||||||
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openAddDialog = () => {
|
||||||
|
setDialogMode('add');
|
||||||
|
setFormName('');
|
||||||
|
setFormValue('');
|
||||||
|
setDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openEditDialog = (name: string, currentValue?: string) => {
|
||||||
|
setDialogMode('edit');
|
||||||
|
setFormName(name);
|
||||||
|
setFormValue(currentValue || '');
|
||||||
|
setDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openRotateDialog = (name: string) => {
|
||||||
|
setDialogMode('rotate');
|
||||||
|
setFormName(name);
|
||||||
|
// Generate a random 64-char hex string for rotation
|
||||||
|
const array = new Uint8Array(32);
|
||||||
|
crypto.getRandomValues(array);
|
||||||
|
setFormValue(Array.from(array, b => b.toString(16).padStart(2, '0')).join(''));
|
||||||
|
setDialogOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
if (!formName || !formValue) return;
|
||||||
|
try {
|
||||||
|
setSaving(true);
|
||||||
|
const res = await fetch('/api/ops/secrets', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ name: formName, value: formValue }),
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
const json = await res.json();
|
||||||
|
throw new Error(json.error || 'Failed to save');
|
||||||
|
}
|
||||||
|
setDialogOpen(false);
|
||||||
|
setFormName('');
|
||||||
|
setFormValue('');
|
||||||
|
await fetchSecrets();
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : String(err));
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async () => {
|
||||||
|
if (!deleteTarget) return;
|
||||||
|
try {
|
||||||
|
setDeleting(true);
|
||||||
|
const res = await fetch(`/api/ops/secrets/${encodeURIComponent(deleteTarget)}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
});
|
||||||
|
if (!res.ok) throw new Error('Failed to delete');
|
||||||
|
setDeleteTarget(null);
|
||||||
|
await fetchSecrets();
|
||||||
|
} catch (err) {
|
||||||
|
setError(err instanceof Error ? err.message : String(err));
|
||||||
|
} finally {
|
||||||
|
setDeleting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const isExpiringSoon = (expiresOn: string | null) => {
|
||||||
|
if (!expiresOn) return false;
|
||||||
|
const diff = new Date(expiresOn).getTime() - Date.now();
|
||||||
|
return diff > 0 && diff < 30 * 24 * 60 * 60 * 1000; // 30 days
|
||||||
|
};
|
||||||
|
|
||||||
|
const isExpired = (expiresOn: string | null) => {
|
||||||
|
if (!expiresOn) return false;
|
||||||
|
return new Date(expiresOn).getTime() < Date.now();
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDate = (iso: string | null) => {
|
||||||
|
if (!iso) return '—';
|
||||||
|
return new Date(iso).toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric',
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex-1 space-y-4 p-8 pt-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl font-bold tracking-tight">Secrets Manager</h2>
|
||||||
|
{vaultUrl && (
|
||||||
|
<p className="text-sm text-muted-foreground mt-1 font-mono">{vaultUrl}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button variant="outline" size="sm" onClick={fetchSecrets} disabled={loading}>
|
||||||
|
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" onClick={openAddDialog}>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
Add Secret
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error Banner */}
|
||||||
|
{error && (
|
||||||
|
<Card className="border-red-500/50 bg-red-500/5">
|
||||||
|
<CardContent className="p-4 flex items-center gap-3">
|
||||||
|
<AlertTriangle className="h-5 w-5 text-red-500 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-red-500">Error</p>
|
||||||
|
<p className="text-xs text-muted-foreground">{error}</p>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-3">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Total Secrets</CardTitle>
|
||||||
|
<KeyRound className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{secrets.length}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Active</CardTitle>
|
||||||
|
<Shield className="h-4 w-4 text-green-500" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold text-green-500">
|
||||||
|
{secrets.filter(s => s.enabled && !isExpired(s.expiresOn)).length}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Expiring Soon</CardTitle>
|
||||||
|
<Clock className="h-4 w-4 text-yellow-500" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold text-yellow-500">
|
||||||
|
{secrets.filter(s => isExpiringSoon(s.expiresOn)).length}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Secrets Table */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Vault Secrets</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Manage secrets stored in Azure Key Vault. Click a row to view its value.
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{loading && secrets.length === 0 ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{Array.from({ length: 6 }).map((_, i) => (
|
||||||
|
<Skeleton key={i} className="h-10 w-full" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Name</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Last Updated</TableHead>
|
||||||
|
<TableHead>Expires</TableHead>
|
||||||
|
<TableHead className="text-right">Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{secrets.map(secret => (
|
||||||
|
<TableRow key={secret.name} className="cursor-pointer hover:bg-muted/50">
|
||||||
|
<TableCell
|
||||||
|
className="font-mono text-sm font-medium"
|
||||||
|
onClick={() => handleViewSecret(secret.name)}
|
||||||
|
>
|
||||||
|
{secret.name}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{isExpired(secret.expiresOn) ? (
|
||||||
|
<Badge variant="destructive">Expired</Badge>
|
||||||
|
) : !secret.enabled ? (
|
||||||
|
<Badge variant="secondary">Disabled</Badge>
|
||||||
|
) : isExpiringSoon(secret.expiresOn) ? (
|
||||||
|
<Badge className="bg-yellow-500/10 text-yellow-500 hover:bg-yellow-500/20">
|
||||||
|
Expiring
|
||||||
|
</Badge>
|
||||||
|
) : (
|
||||||
|
<Badge className="bg-green-500/10 text-green-500 hover:bg-green-500/20">
|
||||||
|
Active
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-sm text-muted-foreground">
|
||||||
|
{formatDate(secret.updatedOn)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-sm text-muted-foreground">
|
||||||
|
{secret.expiresOn ? formatDate(secret.expiresOn) : 'Never'}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
<div className="flex items-center justify-end gap-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8"
|
||||||
|
title="View"
|
||||||
|
onClick={() => handleViewSecret(secret.name)}
|
||||||
|
>
|
||||||
|
<Eye className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8"
|
||||||
|
title="Edit"
|
||||||
|
onClick={() => openEditDialog(secret.name)}
|
||||||
|
>
|
||||||
|
<KeyRound className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8"
|
||||||
|
title="Rotate"
|
||||||
|
onClick={() => openRotateDialog(secret.name)}
|
||||||
|
>
|
||||||
|
<RotateCcw className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 text-red-500 hover:text-red-600"
|
||||||
|
title="Delete"
|
||||||
|
onClick={() => setDeleteTarget(secret.name)}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
{secrets.length === 0 && !loading && (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={5} className="text-center text-muted-foreground py-8">
|
||||||
|
No secrets found in vault
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* View Secret Dialog */}
|
||||||
|
<Dialog open={viewingSecret !== null} onOpenChange={() => setViewingSecret(null)}>
|
||||||
|
<DialogContent className="sm:max-w-lg">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="font-mono">{viewingSecret?.name}</DialogTitle>
|
||||||
|
<DialogDescription>Secret value from Azure Key Vault</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
{viewLoading ? (
|
||||||
|
<Skeleton className="h-20 w-full" />
|
||||||
|
) : viewingSecret ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Value</Label>
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
type={showValue ? 'text' : 'password'}
|
||||||
|
value={viewingSecret.value}
|
||||||
|
readOnly
|
||||||
|
className="pr-20 font-mono text-sm"
|
||||||
|
/>
|
||||||
|
<div className="absolute right-1 top-1 flex gap-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-7 w-7"
|
||||||
|
onClick={() => setShowValue(!showValue)}
|
||||||
|
>
|
||||||
|
{showValue ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={handleCopy}>
|
||||||
|
{copied ? (
|
||||||
|
<Check className="h-3.5 w-3.5 text-green-500" />
|
||||||
|
) : (
|
||||||
|
<Copy className="h-3.5 w-3.5" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||||
|
<div>
|
||||||
|
<p className="text-muted-foreground">Version</p>
|
||||||
|
<p className="font-mono text-xs truncate">{viewingSecret.version}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-muted-foreground">Created</p>
|
||||||
|
<p>{formatDate(viewingSecret.createdOn)}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-muted-foreground">Updated</p>
|
||||||
|
<p>{formatDate(viewingSecret.updatedOn)}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-muted-foreground">Expires</p>
|
||||||
|
<p>{viewingSecret.expiresOn ? formatDate(viewingSecret.expiresOn) : 'Never'}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setViewingSecret(null)}>
|
||||||
|
Close
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
if (viewingSecret) {
|
||||||
|
openEditDialog(viewingSecret.name, viewingSecret.value);
|
||||||
|
setViewingSecret(null);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Edit Value
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Add / Edit / Rotate Dialog */}
|
||||||
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||||
|
<DialogContent className="sm:max-w-lg">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>
|
||||||
|
{dialogMode === 'add'
|
||||||
|
? 'Add Secret'
|
||||||
|
: dialogMode === 'edit'
|
||||||
|
? 'Edit Secret'
|
||||||
|
: 'Rotate Secret'}
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
{dialogMode === 'add'
|
||||||
|
? 'Create a new secret in Azure Key Vault'
|
||||||
|
: dialogMode === 'edit'
|
||||||
|
? `Update the value for ${formName}`
|
||||||
|
: `Generate a new value for ${formName}`}
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Secret Name</Label>
|
||||||
|
<Input
|
||||||
|
value={formName}
|
||||||
|
onChange={e => setFormName(e.target.value)}
|
||||||
|
placeholder="e.g. my-new-secret"
|
||||||
|
disabled={dialogMode !== 'add'}
|
||||||
|
className="font-mono"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Secret Value</Label>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
value={formValue}
|
||||||
|
onChange={e => setFormValue(e.target.value)}
|
||||||
|
placeholder="Enter secret value"
|
||||||
|
className="font-mono"
|
||||||
|
/>
|
||||||
|
{dialogMode === 'rotate' && (
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
A random 64-character hex value has been generated. Edit or accept.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setDialogOpen(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSave} disabled={saving || !formName || !formValue}>
|
||||||
|
{saving ? (
|
||||||
|
<RefreshCw className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
) : dialogMode === 'rotate' ? (
|
||||||
|
<RotateCcw className="mr-2 h-4 w-4" />
|
||||||
|
) : (
|
||||||
|
<KeyRound className="mr-2 h-4 w-4" />
|
||||||
|
)}
|
||||||
|
{dialogMode === 'add' ? 'Create' : dialogMode === 'edit' ? 'Update' : 'Rotate'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Delete Confirmation Dialog */}
|
||||||
|
<Dialog open={deleteTarget !== null} onOpenChange={() => setDeleteTarget(null)}>
|
||||||
|
<DialogContent className="sm:max-w-md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle className="text-red-500">Delete Secret</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Are you sure you want to delete{' '}
|
||||||
|
<span className="font-mono font-bold">{deleteTarget}</span>? This will soft-delete
|
||||||
|
the secret in Azure Key Vault. It can be recovered within the retention period.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setDeleteTarget(null)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button variant="destructive" onClick={handleDelete} disabled={deleting}>
|
||||||
|
{deleting && <RefreshCw className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,675 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState, useCallback } from 'react';
|
||||||
|
import {
|
||||||
|
Plus,
|
||||||
|
RefreshCw,
|
||||||
|
Trash2,
|
||||||
|
Pencil,
|
||||||
|
ToggleLeft,
|
||||||
|
ToggleRight,
|
||||||
|
Shield,
|
||||||
|
Target,
|
||||||
|
Clock,
|
||||||
|
Percent,
|
||||||
|
X,
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
|
||||||
|
// ─── Types ──────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface TelemetryPolicy {
|
||||||
|
id: string;
|
||||||
|
productId: string;
|
||||||
|
name: string;
|
||||||
|
description?: string;
|
||||||
|
enabled: boolean;
|
||||||
|
priority: number;
|
||||||
|
eventTypes: string[];
|
||||||
|
modules: string[];
|
||||||
|
samplingRate: number;
|
||||||
|
targeting: {
|
||||||
|
platforms?: string[];
|
||||||
|
channels?: string[];
|
||||||
|
osFamilies?: string[];
|
||||||
|
appVersions?: string[];
|
||||||
|
releaseChannels?: string[];
|
||||||
|
percentage?: number;
|
||||||
|
};
|
||||||
|
startsAt?: string;
|
||||||
|
expiresAt?: string;
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
createdBy?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const EVENT_TYPES = ['debug', 'info', 'warn', 'error', 'fatal'];
|
||||||
|
const PLATFORMS = ['ios', 'android', 'macos', 'windows', 'linux', 'web'];
|
||||||
|
const CHANNELS = ['keyboard_extension', 'mobile_app', 'desktop_app', 'web_app'];
|
||||||
|
const RELEASE_CHANNELS = ['alpha', 'beta', 'stable'];
|
||||||
|
|
||||||
|
// ─── Component ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export default function TelemetryPoliciesPage() {
|
||||||
|
const [policies, setPolicies] = useState<TelemetryPolicy[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [showForm, setShowForm] = useState(false);
|
||||||
|
const [editingPolicy, setEditingPolicy] = useState<TelemetryPolicy | null>(null);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
|
// Form state
|
||||||
|
const [formName, setFormName] = useState('');
|
||||||
|
const [formDescription, setFormDescription] = useState('');
|
||||||
|
const [formEnabled, setFormEnabled] = useState(true);
|
||||||
|
const [formPriority, setFormPriority] = useState(100);
|
||||||
|
const [formEventTypes, setFormEventTypes] = useState<string[]>(['warn', 'error', 'fatal']);
|
||||||
|
const [formModules, setFormModules] = useState('');
|
||||||
|
const [formSamplingRate, setFormSamplingRate] = useState(1.0);
|
||||||
|
const [formPlatforms, setFormPlatforms] = useState<string[]>([]);
|
||||||
|
const [formChannels, setFormChannels] = useState<string[]>([]);
|
||||||
|
const [formReleaseChannels, setFormReleaseChannels] = useState<string[]>([]);
|
||||||
|
const [formPercentage, setFormPercentage] = useState(100);
|
||||||
|
const [formStartsAt, setFormStartsAt] = useState('');
|
||||||
|
const [formExpiresAt, setFormExpiresAt] = useState('');
|
||||||
|
const [preview, setPreview] = useState<{ matchedClients: number; totalClients: number; sampleSize: number } | null>(null);
|
||||||
|
const [previewLoading, setPreviewLoading] = useState(false);
|
||||||
|
|
||||||
|
const fetchPolicies = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/telemetry/policies');
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setPolicies(data.policies ?? []);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// best effort
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchPolicies();
|
||||||
|
}, [fetchPolicies]);
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
setFormName('');
|
||||||
|
setFormDescription('');
|
||||||
|
setFormEnabled(true);
|
||||||
|
setFormPriority(100);
|
||||||
|
setFormEventTypes(['warn', 'error', 'fatal']);
|
||||||
|
setFormModules('');
|
||||||
|
setFormSamplingRate(1.0);
|
||||||
|
setFormPlatforms([]);
|
||||||
|
setFormChannels([]);
|
||||||
|
setFormReleaseChannels([]);
|
||||||
|
setFormPercentage(100);
|
||||||
|
setFormStartsAt('');
|
||||||
|
setFormExpiresAt('');
|
||||||
|
setEditingPolicy(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openCreateForm = () => {
|
||||||
|
resetForm();
|
||||||
|
setShowForm(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const openEditForm = (policy: TelemetryPolicy) => {
|
||||||
|
setEditingPolicy(policy);
|
||||||
|
setFormName(policy.name);
|
||||||
|
setFormDescription(policy.description ?? '');
|
||||||
|
setFormEnabled(policy.enabled);
|
||||||
|
setFormPriority(policy.priority);
|
||||||
|
setFormEventTypes(policy.eventTypes);
|
||||||
|
setFormModules(policy.modules.join(', '));
|
||||||
|
setFormSamplingRate(policy.samplingRate);
|
||||||
|
setFormPlatforms(policy.targeting.platforms ?? []);
|
||||||
|
setFormChannels(policy.targeting.channels ?? []);
|
||||||
|
setFormReleaseChannels(policy.targeting.releaseChannels ?? []);
|
||||||
|
setFormPercentage(policy.targeting.percentage ?? 100);
|
||||||
|
setFormStartsAt(policy.startsAt ?? '');
|
||||||
|
setFormExpiresAt(policy.expiresAt ?? '');
|
||||||
|
setShowForm(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
setSaving(true);
|
||||||
|
const body = {
|
||||||
|
name: formName,
|
||||||
|
description: formDescription || undefined,
|
||||||
|
enabled: formEnabled,
|
||||||
|
priority: formPriority,
|
||||||
|
eventTypes: formEventTypes,
|
||||||
|
modules: formModules ? formModules.split(',').map(m => m.trim()).filter(Boolean) : [],
|
||||||
|
samplingRate: formSamplingRate,
|
||||||
|
targeting: {
|
||||||
|
platforms: formPlatforms.length > 0 ? formPlatforms : undefined,
|
||||||
|
channels: formChannels.length > 0 ? formChannels : undefined,
|
||||||
|
releaseChannels: formReleaseChannels.length > 0 ? formReleaseChannels : undefined,
|
||||||
|
percentage: formPercentage < 100 ? formPercentage : undefined,
|
||||||
|
},
|
||||||
|
startsAt: formStartsAt || undefined,
|
||||||
|
expiresAt: formExpiresAt || undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (editingPolicy) {
|
||||||
|
await fetch(`/api/telemetry/policies/${editingPolicy.id}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await fetch('/api/telemetry/policies', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(body),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setShowForm(false);
|
||||||
|
resetForm();
|
||||||
|
fetchPolicies();
|
||||||
|
} catch {
|
||||||
|
// best effort
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id: string) => {
|
||||||
|
if (!confirm('Delete this policy?')) return;
|
||||||
|
try {
|
||||||
|
await fetch(`/api/telemetry/policies/${id}`, { method: 'DELETE' });
|
||||||
|
fetchPolicies();
|
||||||
|
} catch {
|
||||||
|
// best effort
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggleEnabled = async (policy: TelemetryPolicy) => {
|
||||||
|
try {
|
||||||
|
await fetch(`/api/telemetry/policies/${policy.id}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ enabled: !policy.enabled }),
|
||||||
|
});
|
||||||
|
fetchPolicies();
|
||||||
|
} catch {
|
||||||
|
// best effort
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleArrayItem = (
|
||||||
|
arr: string[],
|
||||||
|
item: string,
|
||||||
|
setter: (v: string[]) => void
|
||||||
|
) => {
|
||||||
|
setter(arr.includes(item) ? arr.filter(x => x !== item) : [...arr, item]);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─── Render ───────────────────────────────────────────────────
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold tracking-tight">Telemetry Policies</h2>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Control what telemetry data is collected from clients
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button variant="outline" size="sm" onClick={fetchPolicies}>
|
||||||
|
<RefreshCw className="mr-2 h-4 w-4" />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" onClick={openCreateForm}>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
Create Policy
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-3">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardDescription>Total Policies</CardDescription>
|
||||||
|
<CardTitle className="text-3xl">{policies.length}</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardDescription>Active</CardDescription>
|
||||||
|
<CardTitle className="text-3xl text-green-500">
|
||||||
|
{policies.filter(p => p.enabled).length}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardDescription>Disabled</CardDescription>
|
||||||
|
<CardTitle className="text-3xl text-muted-foreground">
|
||||||
|
{policies.filter(p => !p.enabled).length}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Create/Edit Form */}
|
||||||
|
{showForm && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<CardTitle>{editingPolicy ? 'Edit Policy' : 'Create Policy'}</CardTitle>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
setShowForm(false);
|
||||||
|
resetForm();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{/* Basic info */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Name *</label>
|
||||||
|
<Input
|
||||||
|
value={formName}
|
||||||
|
onChange={e => setFormName(e.target.value)}
|
||||||
|
placeholder="e.g. Collect errors from beta"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Description</label>
|
||||||
|
<Input
|
||||||
|
value={formDescription}
|
||||||
|
onChange={e => setFormDescription(e.target.value)}
|
||||||
|
placeholder="Optional description"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Priority + Sampling */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-3">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium flex items-center gap-1">
|
||||||
|
<Shield className="h-3.5 w-3.5" /> Priority
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={formPriority}
|
||||||
|
onChange={e => setFormPriority(Number(e.target.value))}
|
||||||
|
min={0}
|
||||||
|
max={999}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">Higher = more important</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium flex items-center gap-1">
|
||||||
|
<Percent className="h-3.5 w-3.5" /> Sampling Rate
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={formSamplingRate}
|
||||||
|
onChange={e => setFormSamplingRate(Number(e.target.value))}
|
||||||
|
min={0}
|
||||||
|
max={1}
|
||||||
|
step={0.1}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">0 = none, 1 = all</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Enabled</label>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="w-full justify-start"
|
||||||
|
onClick={() => setFormEnabled(!formEnabled)}
|
||||||
|
>
|
||||||
|
{formEnabled ? (
|
||||||
|
<ToggleRight className="mr-2 h-4 w-4 text-green-500" />
|
||||||
|
) : (
|
||||||
|
<ToggleLeft className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||||
|
)}
|
||||||
|
{formEnabled ? 'Enabled' : 'Disabled'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Event Types */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Event Types</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{EVENT_TYPES.map(et => (
|
||||||
|
<Badge
|
||||||
|
key={et}
|
||||||
|
variant={formEventTypes.includes(et) ? 'default' : 'outline'}
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() => toggleArrayItem(formEventTypes, et, setFormEventTypes)}
|
||||||
|
>
|
||||||
|
{et}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modules */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">Modules (comma-separated)</label>
|
||||||
|
<Input
|
||||||
|
value={formModules}
|
||||||
|
onChange={e => setFormModules(e.target.value)}
|
||||||
|
placeholder="e.g. dictation, keyboard, app_lifecycle (empty = all)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Targeting */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="text-sm font-medium flex items-center gap-1">
|
||||||
|
<Target className="h-3.5 w-3.5" /> Targeting Rules
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-xs text-muted-foreground">Platforms</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{PLATFORMS.map(p => (
|
||||||
|
<Badge
|
||||||
|
key={p}
|
||||||
|
variant={formPlatforms.includes(p) ? 'default' : 'outline'}
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() => toggleArrayItem(formPlatforms, p, setFormPlatforms)}
|
||||||
|
>
|
||||||
|
{p}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground">Empty = all platforms</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-xs text-muted-foreground">Channels</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{CHANNELS.map(c => (
|
||||||
|
<Badge
|
||||||
|
key={c}
|
||||||
|
variant={formChannels.includes(c) ? 'default' : 'outline'}
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() => toggleArrayItem(formChannels, c, setFormChannels)}
|
||||||
|
>
|
||||||
|
{c}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-xs text-muted-foreground">Release Channels</label>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{RELEASE_CHANNELS.map(rc => (
|
||||||
|
<Badge
|
||||||
|
key={rc}
|
||||||
|
variant={formReleaseChannels.includes(rc) ? 'default' : 'outline'}
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() =>
|
||||||
|
toggleArrayItem(formReleaseChannels, rc, setFormReleaseChannels)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{rc}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-xs text-muted-foreground">
|
||||||
|
Percentage Rollout: {formPercentage}%
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min={0}
|
||||||
|
max={100}
|
||||||
|
value={formPercentage}
|
||||||
|
onChange={e => setFormPercentage(Number(e.target.value))}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Live Preview */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
disabled={previewLoading}
|
||||||
|
onClick={async () => {
|
||||||
|
setPreviewLoading(true);
|
||||||
|
setPreview(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/telemetry/policies/preview', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
targeting: {
|
||||||
|
platforms: formPlatforms.length > 0 ? formPlatforms : undefined,
|
||||||
|
channels: formChannels.length > 0 ? formChannels : undefined,
|
||||||
|
releaseChannels: formReleaseChannels.length > 0 ? formReleaseChannels : undefined,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (res.ok) setPreview(await res.json());
|
||||||
|
} catch { /* best effort */ } finally {
|
||||||
|
setPreviewLoading(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Target className="mr-1 h-3.5 w-3.5" />
|
||||||
|
{previewLoading ? 'Checking...' : 'Preview Match'}
|
||||||
|
</Button>
|
||||||
|
{preview && (
|
||||||
|
<span className="text-sm">
|
||||||
|
<strong className="text-primary">{preview.matchedClients}</strong>
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{' '}/ {preview.totalClients} clients would match
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-muted-foreground ml-1">
|
||||||
|
(from {preview.sampleSize} recent events)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scheduling */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium flex items-center gap-1">
|
||||||
|
<Clock className="h-3.5 w-3.5" /> Starts At
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="datetime-local"
|
||||||
|
value={formStartsAt ? formStartsAt.slice(0, 16) : ''}
|
||||||
|
onChange={e =>
|
||||||
|
setFormStartsAt(e.target.value ? new Date(e.target.value).toISOString() : '')
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium flex items-center gap-1">
|
||||||
|
<Clock className="h-3.5 w-3.5" /> Expires At
|
||||||
|
</label>
|
||||||
|
<Input
|
||||||
|
type="datetime-local"
|
||||||
|
value={formExpiresAt ? formExpiresAt.slice(0, 16) : ''}
|
||||||
|
onChange={e =>
|
||||||
|
setFormExpiresAt(e.target.value ? new Date(e.target.value).toISOString() : '')
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex justify-end gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
setShowForm(false);
|
||||||
|
resetForm();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleSave} disabled={!formName || saving}>
|
||||||
|
{saving ? 'Saving...' : editingPolicy ? 'Update Policy' : 'Create Policy'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Policies Table */}
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
{loading ? (
|
||||||
|
<div className="space-y-3 p-6">
|
||||||
|
{[1, 2, 3].map(i => (
|
||||||
|
<Skeleton key={i} className="h-12 w-full" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : policies.length === 0 ? (
|
||||||
|
<div className="p-12 text-center text-muted-foreground">
|
||||||
|
No policies yet. Create one to control telemetry collection.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Name</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Priority</TableHead>
|
||||||
|
<TableHead>Event Types</TableHead>
|
||||||
|
<TableHead>Sampling</TableHead>
|
||||||
|
<TableHead>Targeting</TableHead>
|
||||||
|
<TableHead>Schedule</TableHead>
|
||||||
|
<TableHead className="text-right">Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{policies
|
||||||
|
.sort((a, b) => b.priority - a.priority)
|
||||||
|
.map(policy => (
|
||||||
|
<TableRow key={policy.id}>
|
||||||
|
<TableCell>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">{policy.name}</p>
|
||||||
|
{policy.description && (
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{policy.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant={policy.enabled ? 'default' : 'secondary'}>
|
||||||
|
{policy.enabled ? 'Active' : 'Disabled'}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-mono">{policy.priority}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{policy.eventTypes.map(et => (
|
||||||
|
<Badge key={et} variant="outline" className="text-xs">
|
||||||
|
{et}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="font-mono">
|
||||||
|
{(policy.samplingRate * 100).toFixed(0)}%
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex flex-wrap gap-1 text-xs">
|
||||||
|
{policy.targeting.platforms?.map(p => (
|
||||||
|
<Badge key={p} variant="outline">
|
||||||
|
{p}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
{policy.targeting.percentage !== undefined &&
|
||||||
|
policy.targeting.percentage < 100 && (
|
||||||
|
<Badge variant="outline">
|
||||||
|
{policy.targeting.percentage}% rollout
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
{!policy.targeting.platforms?.length &&
|
||||||
|
policy.targeting.percentage === undefined && (
|
||||||
|
<span className="text-muted-foreground">All</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-xs text-muted-foreground">
|
||||||
|
{policy.startsAt
|
||||||
|
? new Date(policy.startsAt).toLocaleDateString()
|
||||||
|
: '—'}
|
||||||
|
{' → '}
|
||||||
|
{policy.expiresAt
|
||||||
|
? new Date(policy.expiresAt).toLocaleDateString()
|
||||||
|
: '∞'}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
<div className="flex justify-end gap-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleToggleEnabled(policy)}
|
||||||
|
title={policy.enabled ? 'Disable' : 'Enable'}
|
||||||
|
>
|
||||||
|
{policy.enabled ? (
|
||||||
|
<ToggleRight className="h-4 w-4 text-green-500" />
|
||||||
|
) : (
|
||||||
|
<ToggleLeft className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => openEditForm(policy)}
|
||||||
|
>
|
||||||
|
<Pencil className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleDelete(policy.id)}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4 text-destructive" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
509
dashboards/admin-web/src/app/(dashboard)/page.tsx
Normal file
509
dashboards/admin-web/src/app/(dashboard)/page.tsx
Normal file
@ -0,0 +1,509 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import {
|
||||||
|
Users,
|
||||||
|
DollarSign,
|
||||||
|
Zap,
|
||||||
|
TrendingUp,
|
||||||
|
UserPlus,
|
||||||
|
Activity,
|
||||||
|
ArrowUpRight,
|
||||||
|
ArrowDownRight,
|
||||||
|
RefreshCw,
|
||||||
|
Cpu,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import {
|
||||||
|
mockSummaryStats,
|
||||||
|
formatNumber,
|
||||||
|
formatCurrency,
|
||||||
|
type DailyMetric,
|
||||||
|
type User,
|
||||||
|
type ModelUsage,
|
||||||
|
} from '@/lib/mock-data';
|
||||||
|
import {
|
||||||
|
apiGetDashboardStats,
|
||||||
|
apiGetUsage,
|
||||||
|
apiListUsers,
|
||||||
|
apiGetRevenueAnalytics,
|
||||||
|
type DashboardStats,
|
||||||
|
type ApiUsageRecord,
|
||||||
|
type RevenueAnalytics,
|
||||||
|
} from '@/lib/api';
|
||||||
|
import {
|
||||||
|
AreaChart,
|
||||||
|
Area,
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
CartesianGrid,
|
||||||
|
Tooltip,
|
||||||
|
ResponsiveContainer,
|
||||||
|
BarChart,
|
||||||
|
Bar,
|
||||||
|
} from 'recharts';
|
||||||
|
|
||||||
|
function buildKpiCards(stats: typeof mockSummaryStats, revenue?: RevenueAnalytics | null) {
|
||||||
|
const fmt = (n: number) => (n >= 0 ? `+${n}%` : `${n}%`);
|
||||||
|
const mrrChange = revenue?.mrrChange ?? 0;
|
||||||
|
const churnRate = revenue?.churnRate ?? stats.churnRate;
|
||||||
|
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
title: 'Total Users',
|
||||||
|
value: stats.totalUsers.toString(),
|
||||||
|
change: revenue
|
||||||
|
? fmt(
|
||||||
|
Math.round(
|
||||||
|
((revenue.newSubscriptions - revenue.canceledSubscriptions) /
|
||||||
|
(stats.totalUsers || 1)) *
|
||||||
|
100 *
|
||||||
|
10
|
||||||
|
) / 10
|
||||||
|
)
|
||||||
|
: '—',
|
||||||
|
trend: (revenue
|
||||||
|
? revenue.newSubscriptions >= revenue.canceledSubscriptions
|
||||||
|
? 'up'
|
||||||
|
: 'down'
|
||||||
|
: 'up') as 'up' | 'down',
|
||||||
|
icon: Users,
|
||||||
|
subtitle: `${stats.activeUsers} active`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Monthly Revenue',
|
||||||
|
value: formatCurrency(revenue?.mrr ?? stats.monthlyRecurring),
|
||||||
|
change: revenue ? fmt(mrrChange) : '—',
|
||||||
|
trend: (mrrChange >= 0 ? 'up' : 'down') as 'up' | 'down',
|
||||||
|
icon: DollarSign,
|
||||||
|
subtitle: `${formatCurrency(revenue?.totalRevenue ?? stats.totalRevenue)} total`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Tokens This Month',
|
||||||
|
value: formatNumber(stats.totalTokensThisMonth),
|
||||||
|
change: '—',
|
||||||
|
trend: 'up' as const,
|
||||||
|
icon: Zap,
|
||||||
|
subtitle: `${formatNumber(stats.avgTokensPerUser)} avg/user`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'New Users',
|
||||||
|
value: (revenue?.newSubscriptions ?? stats.newUsersThisMonth).toString(),
|
||||||
|
change: '—',
|
||||||
|
trend: 'up' as const,
|
||||||
|
icon: UserPlus,
|
||||||
|
subtitle: `${stats.conversionRate}% conversion`,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Requests This Month',
|
||||||
|
value: formatNumber(stats.totalRequestsThisMonth),
|
||||||
|
change: '—',
|
||||||
|
trend: 'up' as const,
|
||||||
|
icon: Activity,
|
||||||
|
subtitle: 'API calls',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Churn Rate',
|
||||||
|
value: `${churnRate}%`,
|
||||||
|
change: revenue ? `${revenue.churnCount} canceled` : '—',
|
||||||
|
trend: (churnRate <= 5 ? 'down' : 'up') as 'up' | 'down',
|
||||||
|
icon: TrendingUp,
|
||||||
|
subtitle: 'Month over month',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
function mergeApiStats(
|
||||||
|
base: typeof mockSummaryStats,
|
||||||
|
api: DashboardStats
|
||||||
|
): typeof mockSummaryStats {
|
||||||
|
const totalUsers = api.users.total || base.totalUsers;
|
||||||
|
const totalTokens = api.usage.totalWords || base.totalTokensThisMonth;
|
||||||
|
return {
|
||||||
|
...base,
|
||||||
|
totalUsers,
|
||||||
|
activeUsers: totalUsers,
|
||||||
|
totalTokensThisMonth: totalTokens,
|
||||||
|
totalRequestsThisMonth: api.usage.totalDictations || base.totalRequestsThisMonth,
|
||||||
|
avgTokensPerUser: totalUsers > 0 ? Math.round(totalTokens / totalUsers) : 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function usageRecordsToDailyMetrics(records: ApiUsageRecord[]): DailyMetric[] {
|
||||||
|
const byDate = new Map<string, DailyMetric>();
|
||||||
|
for (const r of records) {
|
||||||
|
const existing = byDate.get(r.date);
|
||||||
|
if (existing) {
|
||||||
|
existing.totalTokens += r.tokensUsed;
|
||||||
|
existing.totalRequests += r.dictations;
|
||||||
|
existing.revenue += r.costUsd;
|
||||||
|
existing.activeUsers += 1;
|
||||||
|
} else {
|
||||||
|
byDate.set(r.date, {
|
||||||
|
date: r.date,
|
||||||
|
activeUsers: 1,
|
||||||
|
totalRequests: r.dictations,
|
||||||
|
totalTokens: r.tokensUsed,
|
||||||
|
revenue: r.costUsd,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Array.from(byDate.values()).sort((a, b) => a.date.localeCompare(b.date));
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildModelUsage(records: ApiUsageRecord[]): ModelUsage[] {
|
||||||
|
// Aggregate per-model from real usage records (each record now has optional model field)
|
||||||
|
const byModel: Record<string, { tokens: number; requests: number; cost: number }> = {};
|
||||||
|
for (const r of records) {
|
||||||
|
const model = (r as unknown as { model?: string }).model || 'gpt-4o-mini';
|
||||||
|
if (!byModel[model]) byModel[model] = { tokens: 0, requests: 0, cost: 0 };
|
||||||
|
byModel[model].tokens += r.tokensUsed;
|
||||||
|
byModel[model].requests += r.dictations;
|
||||||
|
byModel[model].cost += r.costUsd;
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalTokens = Object.values(byModel).reduce((s, m) => s + m.tokens, 0);
|
||||||
|
if (totalTokens === 0) return [];
|
||||||
|
|
||||||
|
return Object.entries(byModel).map(([model, stats]) => ({
|
||||||
|
model,
|
||||||
|
tokens: stats.tokens,
|
||||||
|
requests: stats.requests,
|
||||||
|
cost: stats.cost,
|
||||||
|
percentage: Math.round((stats.tokens / totalTokens) * 100),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
function KpiSkeleton() {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||||
|
<Skeleton className="h-4 w-24" />
|
||||||
|
<Skeleton className="h-4 w-4 rounded" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Skeleton className="h-7 w-20 mb-2" />
|
||||||
|
<Skeleton className="h-4 w-32" />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChartSkeleton() {
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<Skeleton className="h-5 w-48" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Skeleton className="h-[280px] w-full" />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function DashboardPage() {
|
||||||
|
const [stats, setStats] = useState({
|
||||||
|
...mockSummaryStats,
|
||||||
|
totalUsers: 0,
|
||||||
|
activeUsers: 0,
|
||||||
|
totalRevenue: 0,
|
||||||
|
monthlyRecurring: 0,
|
||||||
|
totalTokensThisMonth: 0,
|
||||||
|
totalRequestsThisMonth: 0,
|
||||||
|
avgTokensPerUser: 0,
|
||||||
|
newUsersThisMonth: 0,
|
||||||
|
conversionRate: 0,
|
||||||
|
churnRate: 0,
|
||||||
|
});
|
||||||
|
const [dailyMetrics, setDailyMetrics] = useState<DailyMetric[]>([]);
|
||||||
|
const [recentUsers, setRecentUsers] = useState<User[]>([]);
|
||||||
|
const [modelUsage, setModelUsage] = useState<ModelUsage[]>([]);
|
||||||
|
const [revenue, setRevenue] = useState<RevenueAnalytics | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [refreshing, setRefreshing] = useState(false);
|
||||||
|
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async (isRefresh = false) => {
|
||||||
|
if (isRefresh) setRefreshing(true);
|
||||||
|
try {
|
||||||
|
const [statsRes, usageRes, usersRes, revenueRes] = await Promise.allSettled([
|
||||||
|
apiGetDashboardStats(),
|
||||||
|
apiGetUsage(30),
|
||||||
|
apiListUsers(10),
|
||||||
|
apiGetRevenueAnalytics(6),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (statsRes.status === 'fulfilled' && statsRes.value.data) {
|
||||||
|
setStats(prev => mergeApiStats(prev, statsRes.value.data!));
|
||||||
|
}
|
||||||
|
if (usageRes.status === 'fulfilled' && usageRes.value.data?.records?.length) {
|
||||||
|
const metrics = usageRecordsToDailyMetrics(usageRes.value.data.records);
|
||||||
|
setDailyMetrics(metrics);
|
||||||
|
setModelUsage(buildModelUsage(usageRes.value.data.records));
|
||||||
|
}
|
||||||
|
if (usersRes.status === 'fulfilled' && usersRes.value.data?.users?.length) {
|
||||||
|
setRecentUsers(
|
||||||
|
usersRes.value.data.users
|
||||||
|
.sort((a, b) => b.lastActive.localeCompare(a.lastActive))
|
||||||
|
.slice(0, 6)
|
||||||
|
.map(u => ({
|
||||||
|
id: u.id,
|
||||||
|
name: u.name,
|
||||||
|
email: u.email,
|
||||||
|
plan: u.plan as User['plan'],
|
||||||
|
status: u.status as User['status'],
|
||||||
|
createdAt: u.createdAt,
|
||||||
|
lastActive: u.lastActive,
|
||||||
|
totalTokensUsed: u.totalTokensUsed,
|
||||||
|
totalRequests: u.totalRequests,
|
||||||
|
monthlySpend: u.monthlySpend,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (revenueRes.status === 'fulfilled' && revenueRes.value.data) {
|
||||||
|
setRevenue(revenueRes.value.data);
|
||||||
|
}
|
||||||
|
setLastUpdated(new Date());
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
setRefreshing(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
const interval = setInterval(() => fetchData(), 60000);
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, [fetchData]);
|
||||||
|
|
||||||
|
const kpiCards = buildKpiCards(stats, revenue);
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Platform overview and key metrics
|
||||||
|
{lastUpdated && (
|
||||||
|
<span className="ml-2 text-xs">
|
||||||
|
· Updated {lastUpdated.toLocaleTimeString()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" size="sm" onClick={() => fetchData(true)} disabled={refreshing}>
|
||||||
|
<RefreshCw className={`mr-2 h-4 w-4 ${refreshing ? 'animate-spin' : ''}`} />
|
||||||
|
Refresh
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* KPI Cards */}
|
||||||
|
{loading ? (
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{Array.from({ length: 6 }).map((_, i) => (
|
||||||
|
<KpiSkeleton key={i} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{kpiCards.map(card => (
|
||||||
|
<Card key={card.title} className="transition-shadow hover:shadow-md">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
{card.title}
|
||||||
|
</CardTitle>
|
||||||
|
<card.icon className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{card.value}</div>
|
||||||
|
<div className="flex items-center gap-2 mt-1">
|
||||||
|
<Badge
|
||||||
|
variant={card.title === 'Churn Rate' ? 'default' : 'secondary'}
|
||||||
|
className={`text-xs ${
|
||||||
|
card.trend === 'up' && card.title !== 'Churn Rate'
|
||||||
|
? 'text-emerald-600 bg-emerald-50'
|
||||||
|
: card.title === 'Churn Rate'
|
||||||
|
? 'text-emerald-600 bg-emerald-50'
|
||||||
|
: 'text-red-600 bg-red-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{card.trend === 'up' && card.title !== 'Churn Rate' ? (
|
||||||
|
<ArrowUpRight className="h-3 w-3 mr-0.5" />
|
||||||
|
) : (
|
||||||
|
<ArrowDownRight className="h-3 w-3 mr-0.5" />
|
||||||
|
)}
|
||||||
|
{card.change}
|
||||||
|
</Badge>
|
||||||
|
<span className="text-xs text-muted-foreground">{card.subtitle}</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Charts Row */}
|
||||||
|
{loading ? (
|
||||||
|
<div className="grid gap-6 lg:grid-cols-2">
|
||||||
|
<ChartSkeleton />
|
||||||
|
<ChartSkeleton />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-6 lg:grid-cols-2">
|
||||||
|
{/* Active Users Chart */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Daily Active Users (30 days)</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ResponsiveContainer width="100%" height={280}>
|
||||||
|
<AreaChart data={dailyMetrics}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="5%" stopColor="hsl(221, 83%, 53%)" stopOpacity={0.3} />
|
||||||
|
<stop offset="95%" stopColor="hsl(221, 83%, 53%)" stopOpacity={0} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
|
||||||
|
<XAxis dataKey="date" tickFormatter={v => v.slice(5)} className="text-xs" />
|
||||||
|
<YAxis className="text-xs" />
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid hsl(var(--border))',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
type="monotone"
|
||||||
|
dataKey="activeUsers"
|
||||||
|
stroke="hsl(221, 83%, 53%)"
|
||||||
|
fill="url(#colorUsers)"
|
||||||
|
strokeWidth={2}
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Revenue Chart */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Daily Revenue (30 days)</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ResponsiveContainer width="100%" height={280}>
|
||||||
|
<BarChart data={dailyMetrics}>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
|
||||||
|
<XAxis dataKey="date" tickFormatter={v => v.slice(5)} className="text-xs" />
|
||||||
|
<YAxis className="text-xs" tickFormatter={v => `$${v}`} />
|
||||||
|
<Tooltip
|
||||||
|
formatter={value => formatCurrency(Number(value))}
|
||||||
|
contentStyle={{
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid hsl(var(--border))',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Bar dataKey="revenue" fill="hsl(142, 71%, 45%)" radius={[4, 4, 0, 0]} />
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Bottom Row: Model Usage + Recent Users */}
|
||||||
|
<div className="grid gap-6 lg:grid-cols-2">
|
||||||
|
{/* Model Usage */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Model Usage Breakdown</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{modelUsage.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||||
|
<Cpu className="h-10 w-10 text-muted-foreground/30 mb-3" />
|
||||||
|
<p className="text-sm text-muted-foreground">No model usage data yet</p>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Usage will appear once users start dictating
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{modelUsage.map(m => (
|
||||||
|
<div key={m.model} className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="font-medium">{m.model}</span>
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
{formatNumber(m.tokens)} tokens · {formatCurrency(m.cost)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="h-2 rounded-full bg-muted overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full bg-primary transition-all"
|
||||||
|
style={{ width: `${m.percentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Recent Users */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Recent Users</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{recentUsers.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center justify-center py-8 text-center">
|
||||||
|
<Users className="h-10 w-10 text-muted-foreground/30 mb-3" />
|
||||||
|
<p className="text-sm text-muted-foreground">No users yet</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{recentUsers.map(user => (
|
||||||
|
<div
|
||||||
|
key={user.id}
|
||||||
|
className="flex items-center justify-between rounded-lg p-2 -mx-2 hover:bg-muted/50 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary">
|
||||||
|
{user.name
|
||||||
|
.split(' ')
|
||||||
|
.map(n => n[0])
|
||||||
|
.join('')}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium">{user.name}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">{user.email}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className={
|
||||||
|
user.plan === 'enterprise'
|
||||||
|
? 'bg-violet-50 text-violet-700'
|
||||||
|
: user.plan === 'pro'
|
||||||
|
? 'bg-blue-50 text-blue-700'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{user.plan}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
567
dashboards/admin-web/src/app/(dashboard)/products/page.tsx
Normal file
567
dashboards/admin-web/src/app/(dashboard)/products/page.tsx
Normal file
@ -0,0 +1,567 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
Package,
|
||||||
|
Plus,
|
||||||
|
Loader2,
|
||||||
|
Check,
|
||||||
|
X,
|
||||||
|
Globe,
|
||||||
|
Edit2,
|
||||||
|
Rocket,
|
||||||
|
CheckCircle2,
|
||||||
|
Trash2,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
|
||||||
|
interface ProductDoc {
|
||||||
|
id: string;
|
||||||
|
productId: string;
|
||||||
|
displayName: string;
|
||||||
|
licensePrefix: string;
|
||||||
|
packageName: string;
|
||||||
|
defaultPlan: 'free' | 'pro';
|
||||||
|
trialDays: number;
|
||||||
|
deviceLimits: { free: number; pro: number; enterprise: number };
|
||||||
|
websiteUrl: string;
|
||||||
|
status: 'active' | 'disabled';
|
||||||
|
createdAt: string;
|
||||||
|
updatedAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProductsPage() {
|
||||||
|
const [products, setProducts] = useState<ProductDoc[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
// Create dialog
|
||||||
|
const [createOpen, setCreateOpen] = useState(false);
|
||||||
|
const [creating, setCreating] = useState(false);
|
||||||
|
const [form, setForm] = useState({
|
||||||
|
productId: '',
|
||||||
|
displayName: '',
|
||||||
|
licensePrefix: '',
|
||||||
|
packageName: '',
|
||||||
|
defaultPlan: 'free' as 'free' | 'pro',
|
||||||
|
trialDays: '14',
|
||||||
|
websiteUrl: '',
|
||||||
|
deviceLimitFree: '1',
|
||||||
|
deviceLimitPro: '3',
|
||||||
|
deviceLimitEnterprise: '10',
|
||||||
|
});
|
||||||
|
|
||||||
|
// Edit dialog
|
||||||
|
const [editProduct, setEditProduct] = useState<ProductDoc | null>(null);
|
||||||
|
const [editForm, setEditForm] = useState<Record<string, string>>({});
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
|
// Onboarding state
|
||||||
|
const [onboarding, setOnboarding] = useState<string | null>(null);
|
||||||
|
const [onboardResult, setOnboardResult] = useState<{
|
||||||
|
productId: string;
|
||||||
|
plans: number;
|
||||||
|
flags: number;
|
||||||
|
} | null>(null);
|
||||||
|
|
||||||
|
const loadProducts = async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/products');
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setProducts(data.products ?? []);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadProducts();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleCreate = async () => {
|
||||||
|
setCreating(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/products', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
productId: form.productId,
|
||||||
|
displayName: form.displayName,
|
||||||
|
licensePrefix: form.licensePrefix,
|
||||||
|
packageName: form.packageName,
|
||||||
|
defaultPlan: form.defaultPlan,
|
||||||
|
trialDays: Number(form.trialDays) || 14,
|
||||||
|
websiteUrl: form.websiteUrl || '',
|
||||||
|
deviceLimits: {
|
||||||
|
free: Number(form.deviceLimitFree) || 1,
|
||||||
|
pro: Number(form.deviceLimitPro) || 3,
|
||||||
|
enterprise: Number(form.deviceLimitEnterprise) || 10,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
const product = await res.json();
|
||||||
|
setCreateOpen(false);
|
||||||
|
setForm({
|
||||||
|
productId: '', displayName: '', licensePrefix: '', packageName: '',
|
||||||
|
defaultPlan: 'free', trialDays: '14', websiteUrl: '',
|
||||||
|
deviceLimitFree: '1', deviceLimitPro: '3', deviceLimitEnterprise: '10',
|
||||||
|
});
|
||||||
|
// Auto-onboard: seed plans + kill_switch flag
|
||||||
|
await handleOnboard(product.productId);
|
||||||
|
loadProducts();
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
} finally {
|
||||||
|
setCreating(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOnboard = async (productId: string) => {
|
||||||
|
setOnboarding(productId);
|
||||||
|
setOnboardResult(null);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/products/${productId}/onboard`, { method: 'POST' });
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setOnboardResult({
|
||||||
|
productId,
|
||||||
|
plans: data.plans?.length ?? 0,
|
||||||
|
flags: data.flags?.length ?? 0,
|
||||||
|
});
|
||||||
|
setTimeout(() => setOnboardResult(null), 8000);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
} finally {
|
||||||
|
setOnboarding(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openEdit = (p: ProductDoc) => {
|
||||||
|
setEditProduct(p);
|
||||||
|
setEditForm({
|
||||||
|
displayName: p.displayName,
|
||||||
|
trialDays: String(p.trialDays),
|
||||||
|
defaultPlan: p.defaultPlan,
|
||||||
|
status: p.status,
|
||||||
|
websiteUrl: p.websiteUrl,
|
||||||
|
deviceLimitFree: String(p.deviceLimits.free),
|
||||||
|
deviceLimitPro: String(p.deviceLimits.pro),
|
||||||
|
deviceLimitEnterprise: String(p.deviceLimits.enterprise),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (productId: string) => {
|
||||||
|
if (!confirm(`Delete product "${productId}"? This cannot be undone.`)) return;
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/products/${productId}`, { method: 'DELETE' });
|
||||||
|
if (res.ok) {
|
||||||
|
setProducts(prev => prev.filter(p => p.productId !== productId && p.id !== productId));
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdate = async () => {
|
||||||
|
if (!editProduct) return;
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/products/${editProduct.id}`, {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
displayName: editForm.displayName,
|
||||||
|
trialDays: Number(editForm.trialDays),
|
||||||
|
defaultPlan: editForm.defaultPlan,
|
||||||
|
status: editForm.status,
|
||||||
|
websiteUrl: editForm.websiteUrl || '',
|
||||||
|
deviceLimits: {
|
||||||
|
free: Number(editForm.deviceLimitFree),
|
||||||
|
pro: Number(editForm.deviceLimitPro),
|
||||||
|
enterprise: Number(editForm.deviceLimitEnterprise),
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
setEditProduct(null);
|
||||||
|
loadProducts();
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-20">
|
||||||
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Products</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Manage registered products in the platform
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
Add Product
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-lg">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Register New Product</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4 pt-2 max-h-[60vh] overflow-y-auto">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Product ID</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="my-product"
|
||||||
|
value={form.productId}
|
||||||
|
onChange={e => setForm({ ...form, productId: e.target.value })}
|
||||||
|
/>
|
||||||
|
<p className="text-[10px] text-muted-foreground">Lowercase, no spaces</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Display Name</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="My Product"
|
||||||
|
value={form.displayName}
|
||||||
|
onChange={e => setForm({ ...form, displayName: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>License Prefix</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="PROD"
|
||||||
|
value={form.licensePrefix}
|
||||||
|
onChange={e => setForm({ ...form, licensePrefix: e.target.value.toUpperCase() })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Package Name</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="com.bytelyst.myproduct"
|
||||||
|
value={form.packageName}
|
||||||
|
onChange={e => setForm({ ...form, packageName: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Default Plan</Label>
|
||||||
|
<Select
|
||||||
|
value={form.defaultPlan}
|
||||||
|
onValueChange={v => setForm({ ...form, defaultPlan: v as 'free' | 'pro' })}
|
||||||
|
>
|
||||||
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="free">Free</SelectItem>
|
||||||
|
<SelectItem value="pro">Pro</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Trial Days</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
max={365}
|
||||||
|
value={form.trialDays}
|
||||||
|
onChange={e => setForm({ ...form, trialDays: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Website URL</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="https://example.com"
|
||||||
|
value={form.websiteUrl}
|
||||||
|
onChange={e => setForm({ ...form, websiteUrl: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Device Limits</Label>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-muted-foreground mb-1">Free</p>
|
||||||
|
<Input
|
||||||
|
type="number" min={0}
|
||||||
|
value={form.deviceLimitFree}
|
||||||
|
onChange={e => setForm({ ...form, deviceLimitFree: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-muted-foreground mb-1">Pro</p>
|
||||||
|
<Input
|
||||||
|
type="number" min={0}
|
||||||
|
value={form.deviceLimitPro}
|
||||||
|
onChange={e => setForm({ ...form, deviceLimitPro: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-muted-foreground mb-1">Enterprise</p>
|
||||||
|
<Input
|
||||||
|
type="number" min={0}
|
||||||
|
value={form.deviceLimitEnterprise}
|
||||||
|
onChange={e => setForm({ ...form, deviceLimitEnterprise: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
className="w-full"
|
||||||
|
onClick={handleCreate}
|
||||||
|
disabled={creating || !form.productId || !form.displayName || !form.licensePrefix}
|
||||||
|
>
|
||||||
|
{creating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
Create Product
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Onboarding success banner */}
|
||||||
|
{onboardResult && (
|
||||||
|
<div className="flex items-center gap-3 rounded-lg border border-emerald-500/50 bg-emerald-50 dark:bg-emerald-950/30 p-4">
|
||||||
|
<CheckCircle2 className="h-5 w-5 text-emerald-600 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-emerald-800 dark:text-emerald-200">
|
||||||
|
Product "{onboardResult.productId}" onboarded successfully
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-emerald-700 dark:text-emerald-300">
|
||||||
|
{onboardResult.plans} plans seeded{onboardResult.flags > 0 ? `, ${onboardResult.flags} flag(s) created` : ''}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{products.length === 0 ? (
|
||||||
|
<div className="text-center py-12 text-muted-foreground">
|
||||||
|
<Package className="mx-auto h-12 w-12 mb-3 opacity-30" />
|
||||||
|
<p>No products registered yet</p>
|
||||||
|
<p className="text-xs mt-1">Create your first product to get started</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-4 md:grid-cols-2">
|
||||||
|
{products.map(p => (
|
||||||
|
<Card key={p.id}>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||||
|
<Package className="h-5 w-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base">{p.displayName}</CardTitle>
|
||||||
|
<CardDescription className="font-mono text-xs">{p.productId}</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className={
|
||||||
|
p.status === 'active'
|
||||||
|
? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-400'
|
||||||
|
: 'bg-red-50 text-red-700 dark:bg-red-950/30 dark:text-red-400'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{p.status === 'active' ? <Check className="mr-1 h-3 w-3" /> : <X className="mr-1 h-3 w-3" />}
|
||||||
|
{p.status}
|
||||||
|
</Badge>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleOnboard(p.productId)}
|
||||||
|
disabled={onboarding === p.productId}
|
||||||
|
title="Seed plans & flags"
|
||||||
|
>
|
||||||
|
{onboarding === p.productId ? (
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Rocket className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => openEdit(p)}>
|
||||||
|
<Edit2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="text-destructive hover:text-destructive"
|
||||||
|
onClick={() => handleDelete(p.id)}
|
||||||
|
title="Delete product"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-2 gap-y-2 text-sm">
|
||||||
|
<div className="text-muted-foreground">License Prefix</div>
|
||||||
|
<div className="font-mono">{p.licensePrefix}-XXXX-XXXX-XXXX</div>
|
||||||
|
<div className="text-muted-foreground">Default Plan</div>
|
||||||
|
<div className="capitalize">{p.defaultPlan}</div>
|
||||||
|
<div className="text-muted-foreground">Trial Days</div>
|
||||||
|
<div>{p.trialDays}</div>
|
||||||
|
<div className="text-muted-foreground">Device Limits</div>
|
||||||
|
<div>
|
||||||
|
Free: {p.deviceLimits.free} · Pro: {p.deviceLimits.pro} · Ent: {p.deviceLimits.enterprise}
|
||||||
|
</div>
|
||||||
|
{p.websiteUrl && (
|
||||||
|
<>
|
||||||
|
<div className="text-muted-foreground">Website</div>
|
||||||
|
<a
|
||||||
|
href={p.websiteUrl}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-primary hover:underline flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<Globe className="h-3 w-3" />
|
||||||
|
{p.websiteUrl.replace(/^https?:\/\//, '')}
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Edit Dialog */}
|
||||||
|
<Dialog open={!!editProduct} onOpenChange={open => !open && setEditProduct(null)}>
|
||||||
|
<DialogContent className="max-w-lg">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Edit {editProduct?.displayName}</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4 pt-2">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Display Name</Label>
|
||||||
|
<Input
|
||||||
|
value={editForm.displayName ?? ''}
|
||||||
|
onChange={e => setEditForm({ ...editForm, displayName: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Status</Label>
|
||||||
|
<Select
|
||||||
|
value={editForm.status ?? 'active'}
|
||||||
|
onValueChange={v => setEditForm({ ...editForm, status: v })}
|
||||||
|
>
|
||||||
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="active">Active</SelectItem>
|
||||||
|
<SelectItem value="disabled">Disabled</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Default Plan</Label>
|
||||||
|
<Select
|
||||||
|
value={editForm.defaultPlan ?? 'free'}
|
||||||
|
onValueChange={v => setEditForm({ ...editForm, defaultPlan: v })}
|
||||||
|
>
|
||||||
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="free">Free</SelectItem>
|
||||||
|
<SelectItem value="pro">Pro</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Trial Days</Label>
|
||||||
|
<Input
|
||||||
|
type="number" min={0} max={365}
|
||||||
|
value={editForm.trialDays ?? '14'}
|
||||||
|
onChange={e => setEditForm({ ...editForm, trialDays: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Website URL</Label>
|
||||||
|
<Input
|
||||||
|
value={editForm.websiteUrl ?? ''}
|
||||||
|
onChange={e => setEditForm({ ...editForm, websiteUrl: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Device Limits</Label>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-muted-foreground mb-1">Free</p>
|
||||||
|
<Input
|
||||||
|
type="number" min={0}
|
||||||
|
value={editForm.deviceLimitFree ?? '1'}
|
||||||
|
onChange={e => setEditForm({ ...editForm, deviceLimitFree: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-muted-foreground mb-1">Pro</p>
|
||||||
|
<Input
|
||||||
|
type="number" min={0}
|
||||||
|
value={editForm.deviceLimitPro ?? '3'}
|
||||||
|
onChange={e => setEditForm({ ...editForm, deviceLimitPro: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-[10px] text-muted-foreground mb-1">Enterprise</p>
|
||||||
|
<Input
|
||||||
|
type="number" min={0}
|
||||||
|
value={editForm.deviceLimitEnterprise ?? '10'}
|
||||||
|
onChange={e => setEditForm({ ...editForm, deviceLimitEnterprise: e.target.value })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button className="w-full" onClick={handleUpdate} disabled={saving}>
|
||||||
|
{saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||||
|
Save Changes
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
348
dashboards/admin-web/src/app/(dashboard)/promos/page.tsx
Normal file
348
dashboards/admin-web/src/app/(dashboard)/promos/page.tsx
Normal file
@ -0,0 +1,348 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import { Tag, Plus, CheckCircle2, XCircle, Trash2, ToggleLeft, ToggleRight } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { apiListPromos, apiCreatePromo, apiDeletePromo, apiUpdatePromo, type ApiPromo } from '@/lib/api';
|
||||||
|
|
||||||
|
function formatDate(iso: string) {
|
||||||
|
return new Date(iso).toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDiscount(promo: ApiPromo): string {
|
||||||
|
if (promo.percentOff) return `${promo.percentOff}% off`;
|
||||||
|
if (promo.amountOff) return `$${(promo.amountOff / 100).toFixed(2)} off`;
|
||||||
|
return '—';
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PromosPage() {
|
||||||
|
const [promos, setPromos] = useState<ApiPromo[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [showCreate, setShowCreate] = useState(false);
|
||||||
|
|
||||||
|
// Create form
|
||||||
|
const [newCode, setNewCode] = useState('');
|
||||||
|
const [discountType, setDiscountType] = useState('percent');
|
||||||
|
const [newPercentOff, setNewPercentOff] = useState('20');
|
||||||
|
const [newAmountOff, setNewAmountOff] = useState('500');
|
||||||
|
const [newDuration, setNewDuration] = useState('once');
|
||||||
|
const [newMaxRedemptions, setNewMaxRedemptions] = useState('');
|
||||||
|
const [creating, setCreating] = useState(false);
|
||||||
|
|
||||||
|
const handleDelete = async (id: string) => {
|
||||||
|
if (!confirm('Delete this promo code? This cannot be undone.')) return;
|
||||||
|
const { error: err } = await apiDeletePromo(id);
|
||||||
|
if (!err) setPromos(prev => prev.filter(p => p.id !== id));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggleActive = async (promo: ApiPromo) => {
|
||||||
|
const { data } = await apiUpdatePromo(promo.id, { active: !promo.active });
|
||||||
|
if (data) setPromos(prev => prev.map(p => p.id === promo.id ? { ...p, active: !p.active } : p));
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadPromos = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
const { data, error: err } = await apiListPromos();
|
||||||
|
if (data) {
|
||||||
|
setPromos(data.promos);
|
||||||
|
} else {
|
||||||
|
setError(err || 'Failed to load promos');
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void loadPromos();
|
||||||
|
}, [loadPromos]);
|
||||||
|
|
||||||
|
async function handleCreate() {
|
||||||
|
if (!newCode.trim()) return;
|
||||||
|
setCreating(true);
|
||||||
|
const body: Record<string, unknown> = {
|
||||||
|
code: newCode.trim(),
|
||||||
|
duration: newDuration,
|
||||||
|
};
|
||||||
|
if (discountType === 'percent') {
|
||||||
|
body.percentOff = parseFloat(newPercentOff);
|
||||||
|
} else {
|
||||||
|
body.amountOff = parseInt(newAmountOff);
|
||||||
|
body.currency = 'usd';
|
||||||
|
}
|
||||||
|
if (newMaxRedemptions) {
|
||||||
|
body.maxRedemptions = parseInt(newMaxRedemptions);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { error: err } = await apiCreatePromo(body as Parameters<typeof apiCreatePromo>[0]);
|
||||||
|
setCreating(false);
|
||||||
|
if (!err) {
|
||||||
|
setShowCreate(false);
|
||||||
|
setNewCode('');
|
||||||
|
setNewPercentOff('20');
|
||||||
|
setNewAmountOff('500');
|
||||||
|
setNewDuration('once');
|
||||||
|
setNewMaxRedemptions('');
|
||||||
|
loadPromos();
|
||||||
|
} else {
|
||||||
|
alert(err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold">Promo Codes</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Stripe promotion codes for discounts on subscriptions
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={() => setShowCreate(true)}>
|
||||||
|
<Plus className="mr-2 h-4 w-4" /> Create Promo
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 md:grid-cols-3">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Total Promos
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{promos.length}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Active Promos
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{promos.filter(p => p.active).length}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Total Redemptions
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">
|
||||||
|
{promos.reduce((sum, p) => sum + p.timesRedeemed, 0)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
{loading ? (
|
||||||
|
<div className="p-8 text-center text-muted-foreground">Loading...</div>
|
||||||
|
) : error ? (
|
||||||
|
<div className="p-8 text-center text-muted-foreground">
|
||||||
|
<p className="text-sm">{error}</p>
|
||||||
|
<p className="text-xs mt-1">Ensure STRIPE_SECRET_KEY is set in admin .env.local</p>
|
||||||
|
</div>
|
||||||
|
) : promos.length === 0 ? (
|
||||||
|
<div className="p-8 text-center text-muted-foreground">
|
||||||
|
<Tag className="mx-auto mb-2 h-8 w-8 opacity-40" />
|
||||||
|
No promo codes yet. Create one in Stripe or via the button above.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Code</TableHead>
|
||||||
|
<TableHead>Discount</TableHead>
|
||||||
|
<TableHead>Duration</TableHead>
|
||||||
|
<TableHead>Redemptions</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Created</TableHead>
|
||||||
|
<TableHead>Expires</TableHead>
|
||||||
|
<TableHead>Actions</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{promos.map(promo => (
|
||||||
|
<TableRow key={promo.id}>
|
||||||
|
<TableCell>
|
||||||
|
<code className="text-sm font-mono font-bold">{promo.code}</code>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>{formatDiscount(promo)}</TableCell>
|
||||||
|
<TableCell className="capitalize">{promo.duration || '—'}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
{promo.timesRedeemed}
|
||||||
|
{promo.maxRedemptions ? ` / ${promo.maxRedemptions}` : ''}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge
|
||||||
|
className={`border-0 gap-1 ${
|
||||||
|
promo.active ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{promo.active ? (
|
||||||
|
<CheckCircle2 className="h-3 w-3" />
|
||||||
|
) : (
|
||||||
|
<XCircle className="h-3 w-3" />
|
||||||
|
)}
|
||||||
|
{promo.active ? 'Active' : 'Inactive'}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-muted-foreground text-xs">
|
||||||
|
{formatDate(promo.created)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-muted-foreground text-xs">
|
||||||
|
{promo.expiresAt ? formatDate(promo.expiresAt) : 'Never'}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 w-7 p-0"
|
||||||
|
onClick={() => handleToggleActive(promo)}
|
||||||
|
title={promo.active ? 'Deactivate' : 'Activate'}
|
||||||
|
>
|
||||||
|
{promo.active ? (
|
||||||
|
<ToggleRight className="h-4 w-4 text-emerald-600" />
|
||||||
|
) : (
|
||||||
|
<ToggleLeft className="h-4 w-4 text-muted-foreground" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 w-7 p-0 text-destructive hover:text-destructive"
|
||||||
|
onClick={() => handleDelete(promo.id)}
|
||||||
|
title="Delete promo"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Dialog open={showCreate} onOpenChange={setShowCreate}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Create Promo Code</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Creates a Stripe coupon + promotion code. Users can enter this at checkout.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Promo Code</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="e.g. LAUNCH20"
|
||||||
|
value={newCode}
|
||||||
|
onChange={e => setNewCode(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Discount Type</Label>
|
||||||
|
<Select value={discountType} onValueChange={setDiscountType}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="percent">Percentage</SelectItem>
|
||||||
|
<SelectItem value="amount">Fixed Amount</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>{discountType === 'percent' ? 'Percent Off' : 'Amount Off (cents)'}</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
value={discountType === 'percent' ? newPercentOff : newAmountOff}
|
||||||
|
onChange={e =>
|
||||||
|
discountType === 'percent'
|
||||||
|
? setNewPercentOff(e.target.value)
|
||||||
|
: setNewAmountOff(e.target.value)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Duration</Label>
|
||||||
|
<Select value={newDuration} onValueChange={setNewDuration}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="once">Once</SelectItem>
|
||||||
|
<SelectItem value="repeating">Repeating</SelectItem>
|
||||||
|
<SelectItem value="forever">Forever</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Max Redemptions (empty = unlimited)</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min="1"
|
||||||
|
placeholder="Unlimited"
|
||||||
|
value={newMaxRedemptions}
|
||||||
|
onChange={e => setNewMaxRedemptions(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowCreate(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleCreate} disabled={creating || !newCode.trim()}>
|
||||||
|
{creating ? 'Creating...' : 'Create Promo'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
168
dashboards/admin-web/src/app/(dashboard)/referrals/page.tsx
Normal file
168
dashboards/admin-web/src/app/(dashboard)/referrals/page.tsx
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Users, Gift, CheckCircle2, Clock } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import { apiListReferrals, type ApiReferral, type ReferralStats } from '@/lib/api';
|
||||||
|
|
||||||
|
const statusConfig: Record<string, { label: string; color: string; icon: typeof CheckCircle2 }> = {
|
||||||
|
pending: { label: 'Pending', color: 'bg-slate-50 text-slate-600', icon: Clock },
|
||||||
|
signed_up: { label: 'Signed Up', color: 'bg-blue-50 text-blue-700', icon: CheckCircle2 },
|
||||||
|
subscribed: { label: 'Subscribed', color: 'bg-emerald-50 text-emerald-700', icon: Gift },
|
||||||
|
rewarded: { label: 'Rewarded', color: 'bg-purple-50 text-purple-700', icon: Gift },
|
||||||
|
};
|
||||||
|
|
||||||
|
function formatDate(iso: string) {
|
||||||
|
return new Date(iso).toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ReferralsPage() {
|
||||||
|
const [referrals, setReferrals] = useState<ApiReferral[]>([]);
|
||||||
|
const [stats, setStats] = useState<ReferralStats>({ total: 0, completed: 0, rewarded: 0 });
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function load() {
|
||||||
|
setLoading(true);
|
||||||
|
const { data } = await apiListReferrals();
|
||||||
|
if (data) {
|
||||||
|
setReferrals(data.referrals);
|
||||||
|
setStats(data.stats);
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
load();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold">Referral Program</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Track user referrals and rewards across the platform
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 md:grid-cols-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Total Referrals
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{stats.total}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">Completed</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{stats.completed}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">Rewarded</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{stats.rewarded}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Conversion Rate
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">
|
||||||
|
{stats.total > 0 ? `${Math.round((stats.completed / stats.total) * 100)}%` : '—'}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardContent className="p-0">
|
||||||
|
{loading ? (
|
||||||
|
<div className="p-8 text-center text-muted-foreground">Loading...</div>
|
||||||
|
) : referrals.length === 0 ? (
|
||||||
|
<div className="p-8 text-center text-muted-foreground">
|
||||||
|
<Users className="mx-auto mb-2 h-8 w-8 opacity-40" />
|
||||||
|
No referrals yet. Users can share their referral links from the portal.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Referrer</TableHead>
|
||||||
|
<TableHead>Referred Email</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Referrer Reward</TableHead>
|
||||||
|
<TableHead>Referred Reward</TableHead>
|
||||||
|
<TableHead>Created</TableHead>
|
||||||
|
<TableHead>Completed</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{referrals.map(ref => {
|
||||||
|
const cfg = statusConfig[ref.status] || statusConfig.pending;
|
||||||
|
const StatusIcon = cfg.icon;
|
||||||
|
return (
|
||||||
|
<TableRow key={ref.id}>
|
||||||
|
<TableCell className="text-sm">{ref.referrerEmail}</TableCell>
|
||||||
|
<TableCell className="text-sm">{ref.referredEmail}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge className={`${cfg.color} border-0 gap-1`}>
|
||||||
|
<StatusIcon className="h-3 w-3" />
|
||||||
|
{cfg.label}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-sm">
|
||||||
|
{ref.referrerRewardTokens.toLocaleString()} tokens
|
||||||
|
{ref.referrerRewarded && (
|
||||||
|
<CheckCircle2 className="inline ml-1 h-3.5 w-3.5 text-emerald-600" />
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<span className="text-sm">
|
||||||
|
{ref.referredRewardTokens.toLocaleString()} tokens
|
||||||
|
{ref.referredRewarded && (
|
||||||
|
<CheckCircle2 className="inline ml-1 h-3.5 w-3.5 text-emerald-600" />
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-muted-foreground text-xs">
|
||||||
|
{formatDate(ref.createdAt)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-muted-foreground text-xs">
|
||||||
|
{ref.completedAt ? formatDate(ref.completedAt) : '—'}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
658
dashboards/admin-web/src/app/(dashboard)/settings/page.tsx
Normal file
658
dashboards/admin-web/src/app/(dashboard)/settings/page.tsx
Normal file
@ -0,0 +1,658 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import {
|
||||||
|
Save,
|
||||||
|
Globe,
|
||||||
|
Shield,
|
||||||
|
Bell,
|
||||||
|
Database,
|
||||||
|
Key,
|
||||||
|
Power,
|
||||||
|
Monitor,
|
||||||
|
Smartphone,
|
||||||
|
Tablet,
|
||||||
|
Globe2,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Switch } from '@/components/ui/switch';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { useToast } from '@/components/ui/toast';
|
||||||
|
|
||||||
|
interface PlatformFlags {
|
||||||
|
desktop: boolean;
|
||||||
|
ios: boolean;
|
||||||
|
android: boolean;
|
||||||
|
web: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface KillSwitchState {
|
||||||
|
enabled: boolean;
|
||||||
|
platforms: PlatformFlags;
|
||||||
|
reason: string;
|
||||||
|
updatedAt: string;
|
||||||
|
updatedBy: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PlatformSettings {
|
||||||
|
platformName: string;
|
||||||
|
supportEmail: string;
|
||||||
|
defaultLanguage: string;
|
||||||
|
maintenanceMode: boolean;
|
||||||
|
allowSelfRegistration: boolean;
|
||||||
|
rateLimits: {
|
||||||
|
globalPerMin: number;
|
||||||
|
perUserPerMin: number;
|
||||||
|
maxTokenBurst: number;
|
||||||
|
abuseThreshold: number;
|
||||||
|
autoSuspendOnAbuse: boolean;
|
||||||
|
ipBlocklist: boolean;
|
||||||
|
};
|
||||||
|
notifications: {
|
||||||
|
newUserSignup: boolean;
|
||||||
|
usageThreshold: boolean;
|
||||||
|
failedPayment: boolean;
|
||||||
|
securityAlerts: boolean;
|
||||||
|
};
|
||||||
|
dataRetentionDays: number;
|
||||||
|
backupFrequency: string;
|
||||||
|
auditLogging: boolean;
|
||||||
|
updatedAt?: string;
|
||||||
|
updatedBy?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULTS: PlatformSettings = {
|
||||||
|
platformName: '',
|
||||||
|
supportEmail: '',
|
||||||
|
defaultLanguage: 'en-US',
|
||||||
|
maintenanceMode: false,
|
||||||
|
allowSelfRegistration: true,
|
||||||
|
rateLimits: {
|
||||||
|
globalPerMin: 1000,
|
||||||
|
perUserPerMin: 60,
|
||||||
|
maxTokenBurst: 4096,
|
||||||
|
abuseThreshold: 50,
|
||||||
|
autoSuspendOnAbuse: true,
|
||||||
|
ipBlocklist: true,
|
||||||
|
},
|
||||||
|
notifications: {
|
||||||
|
newUserSignup: true,
|
||||||
|
usageThreshold: true,
|
||||||
|
failedPayment: true,
|
||||||
|
securityAlerts: true,
|
||||||
|
},
|
||||||
|
dataRetentionDays: 365,
|
||||||
|
backupFrequency: 'daily',
|
||||||
|
auditLogging: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
function getAuthHeaders(): HeadersInit {
|
||||||
|
if (typeof window === 'undefined') return {};
|
||||||
|
const token = localStorage.getItem('admin_access_token');
|
||||||
|
if (!token) return {};
|
||||||
|
return { Authorization: `Bearer ${token}` };
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SettingsPage() {
|
||||||
|
const [saved, setSaved] = useState(false);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const { toast } = useToast();
|
||||||
|
const [settings, setSettings] = useState<PlatformSettings>(DEFAULTS);
|
||||||
|
const [settingsLoading, setSettingsLoading] = useState(true);
|
||||||
|
const [killSwitch, setKillSwitch] = useState<KillSwitchState | null>(null);
|
||||||
|
const [killSwitchLoading, setKillSwitchLoading] = useState(true);
|
||||||
|
const [killSwitchToggling, setKillSwitchToggling] = useState(false);
|
||||||
|
|
||||||
|
const fetchSettings = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/settings/platform', { headers: getAuthHeaders() });
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setSettings({
|
||||||
|
platformName: data.platformName ?? DEFAULTS.platformName,
|
||||||
|
supportEmail: data.supportEmail ?? DEFAULTS.supportEmail,
|
||||||
|
defaultLanguage: data.defaultLanguage ?? DEFAULTS.defaultLanguage,
|
||||||
|
maintenanceMode: data.maintenanceMode ?? DEFAULTS.maintenanceMode,
|
||||||
|
allowSelfRegistration: data.allowSelfRegistration ?? DEFAULTS.allowSelfRegistration,
|
||||||
|
rateLimits: { ...DEFAULTS.rateLimits, ...(data.rateLimits ?? {}) },
|
||||||
|
notifications: { ...DEFAULTS.notifications, ...(data.notifications ?? {}) },
|
||||||
|
dataRetentionDays: data.dataRetentionDays ?? DEFAULTS.dataRetentionDays,
|
||||||
|
backupFrequency: data.backupFrequency ?? DEFAULTS.backupFrequency,
|
||||||
|
auditLogging: data.auditLogging ?? DEFAULTS.auditLogging,
|
||||||
|
updatedAt: data.updatedAt,
|
||||||
|
updatedBy: data.updatedBy,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// use defaults
|
||||||
|
} finally {
|
||||||
|
setSettingsLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const fetchKillSwitch = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/settings/kill-switch');
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setKillSwitch(data);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
} finally {
|
||||||
|
setKillSwitchLoading(false);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchSettings();
|
||||||
|
fetchKillSwitch();
|
||||||
|
}, [fetchSettings, fetchKillSwitch]);
|
||||||
|
|
||||||
|
const toggleKillSwitch = async () => {
|
||||||
|
if (!killSwitch) return;
|
||||||
|
setKillSwitchToggling(true);
|
||||||
|
try {
|
||||||
|
const newEnabled = !killSwitch.enabled;
|
||||||
|
const res = await fetch('/api/settings/kill-switch', {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
enabled: newEnabled,
|
||||||
|
platforms: killSwitch.platforms,
|
||||||
|
reason: newEnabled ? '' : 'Disabled by admin from dashboard',
|
||||||
|
updatedBy: 'admin',
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setKillSwitch(data);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
} finally {
|
||||||
|
setKillSwitchToggling(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const togglePlatform = async (platform: keyof PlatformFlags) => {
|
||||||
|
if (!killSwitch) return;
|
||||||
|
setKillSwitchToggling(true);
|
||||||
|
try {
|
||||||
|
const newPlatforms = { ...killSwitch.platforms, [platform]: !killSwitch.platforms[platform] };
|
||||||
|
const res = await fetch('/api/settings/kill-switch', {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
enabled: killSwitch.enabled,
|
||||||
|
platforms: newPlatforms,
|
||||||
|
reason: killSwitch.reason,
|
||||||
|
updatedBy: 'admin',
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setKillSwitch(data);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// ignore
|
||||||
|
} finally {
|
||||||
|
setKillSwitchToggling(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/settings/platform', {
|
||||||
|
method: 'PUT',
|
||||||
|
headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
|
||||||
|
body: JSON.stringify(settings),
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
setSettings(prev => ({ ...prev, updatedAt: data.updatedAt, updatedBy: data.updatedBy }));
|
||||||
|
setSaved(true);
|
||||||
|
setTimeout(() => setSaved(false), 2000);
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Failed to save settings', variant: 'error' });
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
toast({ title: 'Network error — could not save settings', variant: 'error' });
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (settingsLoading && killSwitchLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-20">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6 max-w-3xl">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Settings</h1>
|
||||||
|
<p className="text-muted-foreground">Platform configuration and admin preferences</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{settings.updatedAt && (
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
Last saved: {new Date(settings.updatedAt).toLocaleString()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<Button onClick={handleSave} disabled={saving || settingsLoading}>
|
||||||
|
<Save className="mr-2 h-4 w-4" />
|
||||||
|
{saving ? 'Saving…' : saved ? 'Saved!' : 'Save Changes'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Kill Switch */}
|
||||||
|
<Card
|
||||||
|
className={
|
||||||
|
killSwitch && !killSwitch.enabled
|
||||||
|
? 'border-destructive bg-destructive/5'
|
||||||
|
: 'border-green-500/50 bg-green-500/5'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Power
|
||||||
|
className={`h-5 w-5 ${killSwitch?.enabled ? 'text-green-500' : 'text-destructive'}`}
|
||||||
|
/>
|
||||||
|
<div className="flex-1">
|
||||||
|
<CardTitle className="text-base">Platform Kill Switch</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Master toggle — disables all apps (desktop, mobile, API) in real time via Cosmos DB
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p
|
||||||
|
className={`text-lg font-semibold ${killSwitch?.enabled ? 'text-green-600 dark:text-green-400' : 'text-destructive'}`}
|
||||||
|
>
|
||||||
|
{killSwitchLoading
|
||||||
|
? 'Loading...'
|
||||||
|
: killSwitch?.enabled
|
||||||
|
? 'PLATFORM ACTIVE'
|
||||||
|
: 'PLATFORM DISABLED'}
|
||||||
|
</p>
|
||||||
|
{killSwitch && !killSwitch.enabled && killSwitch.reason && (
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">Reason: {killSwitch.reason}</p>
|
||||||
|
)}
|
||||||
|
{killSwitch?.updatedAt && (
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Last changed: {new Date(killSwitch.updatedAt).toLocaleString()} by{' '}
|
||||||
|
{killSwitch.updatedBy}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={killSwitch?.enabled ?? true}
|
||||||
|
onCheckedChange={toggleKillSwitch}
|
||||||
|
disabled={killSwitchLoading || killSwitchToggling}
|
||||||
|
className="scale-125"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{killSwitch?.enabled && (
|
||||||
|
<>
|
||||||
|
<Separator className="my-4" />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium mb-3">Per-Platform Control</p>
|
||||||
|
<p className="text-xs text-muted-foreground mb-4">
|
||||||
|
Disable individual platforms while keeping others active
|
||||||
|
</p>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{[
|
||||||
|
{ key: 'desktop' as const, label: 'Desktop (macOS/Win)', icon: Monitor },
|
||||||
|
{ key: 'ios' as const, label: 'iOS', icon: Smartphone },
|
||||||
|
{ key: 'android' as const, label: 'Android', icon: Tablet },
|
||||||
|
{ key: 'web' as const, label: 'Web Dashboard', icon: Globe2 },
|
||||||
|
].map(({ key, label, icon: Icon }) => (
|
||||||
|
<div
|
||||||
|
key={key}
|
||||||
|
className="flex items-center justify-between rounded-lg border p-3"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Icon
|
||||||
|
className={`h-4 w-4 ${killSwitch.platforms?.[key] ? 'text-green-500' : 'text-muted-foreground'}`}
|
||||||
|
/>
|
||||||
|
<span className="text-sm">{label}</span>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={killSwitch.platforms?.[key] ?? true}
|
||||||
|
onCheckedChange={() => togglePlatform(key)}
|
||||||
|
disabled={killSwitchToggling}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* General */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Globe className="h-5 w-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base">General</CardTitle>
|
||||||
|
<CardDescription>Basic platform configuration</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Platform Name</Label>
|
||||||
|
<Input
|
||||||
|
value={settings.platformName}
|
||||||
|
onChange={e => setSettings(s => ({ ...s, platformName: e.target.value }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Support Email</Label>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
placeholder="support@example.com"
|
||||||
|
value={settings.supportEmail}
|
||||||
|
onChange={e => setSettings(s => ({ ...s, supportEmail: e.target.value }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Default Language</Label>
|
||||||
|
<Select
|
||||||
|
value={settings.defaultLanguage}
|
||||||
|
onValueChange={v => setSettings(s => ({ ...s, defaultLanguage: v }))}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-[200px]">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="en-US">English (US)</SelectItem>
|
||||||
|
<SelectItem value="en-GB">English (UK)</SelectItem>
|
||||||
|
<SelectItem value="es-ES">Spanish</SelectItem>
|
||||||
|
<SelectItem value="fr-FR">French</SelectItem>
|
||||||
|
<SelectItem value="de-DE">German</SelectItem>
|
||||||
|
<SelectItem value="ja-JP">Japanese</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium">Maintenance Mode</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Disable all API access for non-admin users
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={settings.maintenanceMode}
|
||||||
|
onCheckedChange={v => setSettings(s => ({ ...s, maintenanceMode: v }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium">Allow Self-Registration</p>
|
||||||
|
<p className="text-xs text-muted-foreground">Users can sign up without an invite</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={settings.allowSelfRegistration}
|
||||||
|
onCheckedChange={v => setSettings(s => ({ ...s, allowSelfRegistration: v }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Azure Configuration — managed via Secrets Manager */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Key className="h-5 w-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base">Azure Configuration</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Azure secrets are managed via the{' '}
|
||||||
|
<a href="/ops/secrets" className="text-primary underline underline-offset-2 hover:text-primary/80">
|
||||||
|
Secrets Manager
|
||||||
|
</a>
|
||||||
|
{' '}(Key Vault)
|
||||||
|
</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Azure Speech keys, OpenAI keys, Cosmos connection strings, and other secrets are stored
|
||||||
|
in Azure Key Vault and resolved at runtime. Use the{' '}
|
||||||
|
<a href="/ops/secrets" className="text-primary underline underline-offset-2">
|
||||||
|
Secrets Manager
|
||||||
|
</a>
|
||||||
|
{' '}to view, rotate, or update them.
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Rate Limiting */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Shield className="h-5 w-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base">Rate Limiting</CardTitle>
|
||||||
|
<CardDescription>Global rate limits and abuse prevention</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Global Rate Limit (req/min)</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={settings.rateLimits.globalPerMin}
|
||||||
|
onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, globalPerMin: parseInt(e.target.value) || 0 } }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Per-User Rate Limit (req/min)</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={settings.rateLimits.perUserPerMin}
|
||||||
|
onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, perUserPerMin: parseInt(e.target.value) || 0 } }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Max Token Burst (per request)</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={settings.rateLimits.maxTokenBurst}
|
||||||
|
onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, maxTokenBurst: parseInt(e.target.value) || 0 } }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Abuse Threshold (failed auth/hr)</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={settings.rateLimits.abuseThreshold}
|
||||||
|
onChange={e => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, abuseThreshold: parseInt(e.target.value) || 0 } }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium">Auto-Suspend on Abuse</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Automatically suspend users exceeding abuse thresholds
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={settings.rateLimits.autoSuspendOnAbuse}
|
||||||
|
onCheckedChange={v => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, autoSuspendOnAbuse: v } }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium">IP Blocklist</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Block requests from known malicious IPs
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={settings.rateLimits.ipBlocklist}
|
||||||
|
onCheckedChange={v => setSettings(s => ({ ...s, rateLimits: { ...s.rateLimits, ipBlocklist: v } }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Notifications */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Bell className="h-5 w-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base">Notifications</CardTitle>
|
||||||
|
<CardDescription>Admin alerts and email notifications</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium">New User Signup</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Get notified when a new user registers
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={settings.notifications.newUserSignup}
|
||||||
|
onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, newUserSignup: v } }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium">Usage Threshold Alert</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Alert when monthly token usage exceeds 80% of budget
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={settings.notifications.usageThreshold}
|
||||||
|
onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, usageThreshold: v } }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium">Failed Payment</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Alert when a subscription payment fails
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={settings.notifications.failedPayment}
|
||||||
|
onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, failedPayment: v } }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium">Security Alerts</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Suspicious activity and brute-force attempts
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={settings.notifications.securityAlerts}
|
||||||
|
onCheckedChange={v => setSettings(s => ({ ...s, notifications: { ...s.notifications, securityAlerts: v } }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Database */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Database className="h-5 w-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base">Database</CardTitle>
|
||||||
|
<CardDescription>Storage and data management</CardDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Database connection is configured via environment variables and{' '}
|
||||||
|
<a href="/ops/secrets" className="text-primary underline underline-offset-2">
|
||||||
|
Secrets Manager
|
||||||
|
</a>
|
||||||
|
. Cosmos DB endpoint and key are resolved from Azure Key Vault at runtime.
|
||||||
|
</p>
|
||||||
|
<Separator />
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Data Retention (days)</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={settings.dataRetentionDays}
|
||||||
|
onChange={e => setSettings(s => ({ ...s, dataRetentionDays: parseInt(e.target.value) || 365 }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Backup Frequency</Label>
|
||||||
|
<Select
|
||||||
|
value={settings.backupFrequency}
|
||||||
|
onValueChange={v => setSettings(s => ({ ...s, backupFrequency: v }))}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="hourly">Hourly</SelectItem>
|
||||||
|
<SelectItem value="daily">Daily</SelectItem>
|
||||||
|
<SelectItem value="weekly">Weekly</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium">Audit Logging</p>
|
||||||
|
<p className="text-xs text-muted-foreground">Log all admin actions for compliance</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={settings.auditLogging}
|
||||||
|
onCheckedChange={v => setSettings(s => ({ ...s, auditLogging: v }))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
447
dashboards/admin-web/src/app/(dashboard)/subscriptions/page.tsx
Normal file
447
dashboards/admin-web/src/app/(dashboard)/subscriptions/page.tsx
Normal file
@ -0,0 +1,447 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Check, Pencil, Plus, Users, Zap, Shield, Crown } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Switch } from '@/components/ui/switch';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import { formatCurrency, formatNumber } from '@/lib/mock-data';
|
||||||
|
import { apiListUsers, apiUpdatePlan, apiCreatePlan, apiListPlans, type PlanDoc } from '@/lib/api';
|
||||||
|
|
||||||
|
const planIcons = {
|
||||||
|
Free: Zap,
|
||||||
|
Pro: Shield,
|
||||||
|
Enterprise: Crown,
|
||||||
|
};
|
||||||
|
|
||||||
|
const planColors = {
|
||||||
|
Free: 'border-muted',
|
||||||
|
Pro: 'border-blue-200 bg-blue-50/30',
|
||||||
|
Enterprise: 'border-violet-200 bg-violet-50/30',
|
||||||
|
};
|
||||||
|
|
||||||
|
interface LocalPlan {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
price: number;
|
||||||
|
interval: string;
|
||||||
|
features: string[];
|
||||||
|
limits: { tokensPerMonth: number; requestsPerDay: number; modelsAllowed: string[] };
|
||||||
|
activeUsers: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function planDocToLocal(p: PlanDoc): LocalPlan {
|
||||||
|
return {
|
||||||
|
id: p.id,
|
||||||
|
name: p.displayName || p.name,
|
||||||
|
price: p.price,
|
||||||
|
interval: 'monthly',
|
||||||
|
features: p.features ?? [],
|
||||||
|
limits: {
|
||||||
|
tokensPerMonth: p.tokens ?? 0,
|
||||||
|
requestsPerDay: p.dictations ?? 0,
|
||||||
|
modelsAllowed: ['gpt-4o-mini'],
|
||||||
|
},
|
||||||
|
activeUsers: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function SubscriptionsPage() {
|
||||||
|
const [plans, setPlans] = useState<LocalPlan[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [newPlanName, setNewPlanName] = useState('');
|
||||||
|
const [newPlanPrice, setNewPlanPrice] = useState('');
|
||||||
|
const [newPlanTokens, setNewPlanTokens] = useState('');
|
||||||
|
const [newPlanRequests, setNewPlanRequests] = useState('');
|
||||||
|
const [newPlanYearly, setNewPlanYearly] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function load() {
|
||||||
|
try {
|
||||||
|
const [plansRes, usersRes] = await Promise.allSettled([
|
||||||
|
apiListPlans(),
|
||||||
|
apiListUsers(),
|
||||||
|
]);
|
||||||
|
let loadedPlans: LocalPlan[] = [];
|
||||||
|
if (plansRes.status === 'fulfilled' && plansRes.value.data?.plans?.length) {
|
||||||
|
loadedPlans = plansRes.value.data.plans.filter(p => p.active).map(planDocToLocal);
|
||||||
|
}
|
||||||
|
if (usersRes.status === 'fulfilled' && usersRes.value.data?.byPlan) {
|
||||||
|
const byPlan = usersRes.value.data.byPlan;
|
||||||
|
loadedPlans = loadedPlans.map(p => ({
|
||||||
|
...p,
|
||||||
|
activeUsers: byPlan[p.name.toLowerCase()] ?? 0,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
if (loadedPlans.length > 0) setPlans(loadedPlans);
|
||||||
|
} catch {
|
||||||
|
// use empty
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
load();
|
||||||
|
}, []);
|
||||||
|
const [editingPlan, setEditingPlan] = useState<string | null>(null);
|
||||||
|
const [showNewPlan, setShowNewPlan] = useState(false);
|
||||||
|
const [editPrice, setEditPrice] = useState('');
|
||||||
|
const [editTokens, setEditTokens] = useState('');
|
||||||
|
const [editRequests, setEditRequests] = useState('');
|
||||||
|
|
||||||
|
const totalMRR = plans.reduce((sum, p) => sum + p.price * p.activeUsers, 0);
|
||||||
|
const totalActiveUsers = plans.reduce((sum, p) => sum + p.activeUsers, 0);
|
||||||
|
|
||||||
|
const startEdit = (planId: string) => {
|
||||||
|
const plan = plans.find(p => p.id === planId);
|
||||||
|
if (plan) {
|
||||||
|
setEditPrice(plan.price.toString());
|
||||||
|
setEditTokens(plan.limits.tokensPerMonth.toString());
|
||||||
|
setEditRequests(plan.limits.requestsPerDay.toString());
|
||||||
|
setEditingPlan(planId);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveEdit = async () => {
|
||||||
|
if (!editingPlan) return;
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
await apiUpdatePlan(editingPlan, {
|
||||||
|
price: parseFloat(editPrice) || 0,
|
||||||
|
tokensPerMonth: parseInt(editTokens) || 0,
|
||||||
|
requestsPerDay: parseInt(editRequests) || 0,
|
||||||
|
});
|
||||||
|
setPlans(prev =>
|
||||||
|
prev.map(p =>
|
||||||
|
p.id === editingPlan
|
||||||
|
? {
|
||||||
|
...p,
|
||||||
|
price: parseFloat(editPrice) || 0,
|
||||||
|
limits: {
|
||||||
|
...p.limits,
|
||||||
|
tokensPerMonth: parseInt(editTokens) || 0,
|
||||||
|
requestsPerDay: parseInt(editRequests) || 0,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
: p
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setEditingPlan(null);
|
||||||
|
} catch {
|
||||||
|
// API failed — keep dialog open so user can retry
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreatePlan = async () => {
|
||||||
|
if (!newPlanName.trim()) return;
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
const created = await apiCreatePlan({
|
||||||
|
name: newPlanName.trim(),
|
||||||
|
price: parseFloat(newPlanPrice) || 0,
|
||||||
|
tokensPerMonth: parseInt(newPlanTokens) || 0,
|
||||||
|
requestsPerDay: parseInt(newPlanRequests) || 0,
|
||||||
|
yearlyDiscount: newPlanYearly,
|
||||||
|
});
|
||||||
|
setPlans(prev => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
id: created.data?.plan ?? `plan-${Date.now()}`,
|
||||||
|
name: newPlanName.trim(),
|
||||||
|
price: parseFloat(newPlanPrice) || 0,
|
||||||
|
interval: newPlanYearly ? 'yearly' : 'monthly',
|
||||||
|
features: [],
|
||||||
|
limits: {
|
||||||
|
tokensPerMonth: parseInt(newPlanTokens) || 0,
|
||||||
|
requestsPerDay: parseInt(newPlanRequests) || 0,
|
||||||
|
modelsAllowed: ['gpt-4o-mini'],
|
||||||
|
},
|
||||||
|
activeUsers: 0,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setShowNewPlan(false);
|
||||||
|
setNewPlanName('');
|
||||||
|
setNewPlanPrice('');
|
||||||
|
setNewPlanTokens('');
|
||||||
|
setNewPlanRequests('');
|
||||||
|
setNewPlanYearly(false);
|
||||||
|
} catch {
|
||||||
|
// keep dialog open on failure
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center py-20">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Subscriptions</h1>
|
||||||
|
<p className="text-muted-foreground">Manage pricing plans and subscription tiers</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={() => setShowNewPlan(true)}>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
New Plan
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Summary Cards */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-3">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Monthly Recurring Revenue
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{formatCurrency(totalMRR)}</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">Across {plans.length} plans</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Total Subscribers
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{totalActiveUsers}</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">Active subscriptions</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Avg Revenue Per User
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{totalActiveUsers > 0 ? formatCurrency(totalMRR / totalActiveUsers) : '$0.00'}</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">ARPU</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Plan Cards */}
|
||||||
|
<div className="grid gap-6 md:grid-cols-3">
|
||||||
|
{plans.map(plan => {
|
||||||
|
const Icon = planIcons[plan.name as keyof typeof planIcons] || Zap;
|
||||||
|
const borderColor = planColors[plan.name as keyof typeof planColors] || 'border-muted';
|
||||||
|
return (
|
||||||
|
<Card key={plan.id} className={`relative ${borderColor}`}>
|
||||||
|
<CardHeader>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
|
||||||
|
<Icon className="h-5 w-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-lg">{plan.name}</CardTitle>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Users className="h-3 w-3 text-muted-foreground" />
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{plan.activeUsers} active
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8"
|
||||||
|
onClick={() => startEdit(plan.id)}
|
||||||
|
>
|
||||||
|
<Pencil className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<span className="text-3xl font-bold">
|
||||||
|
{plan.price === 0 ? 'Free' : formatCurrency(plan.price)}
|
||||||
|
</span>
|
||||||
|
{plan.price > 0 && (
|
||||||
|
<span className="text-muted-foreground text-sm">
|
||||||
|
/{plan.interval === 'monthly' ? 'mo' : 'yr'}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
||||||
|
Limits
|
||||||
|
</p>
|
||||||
|
<div className="text-sm space-y-1">
|
||||||
|
<p>
|
||||||
|
<span className="font-medium">Tokens: </span>
|
||||||
|
{plan.limits.tokensPerMonth === -1
|
||||||
|
? 'Unlimited'
|
||||||
|
: formatNumber(plan.limits.tokensPerMonth) + '/mo'}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-medium">Requests: </span>
|
||||||
|
{plan.limits.requestsPerDay === -1
|
||||||
|
? 'Unlimited'
|
||||||
|
: formatNumber(plan.limits.requestsPerDay) + '/day'}
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span className="font-medium">Models: </span>
|
||||||
|
{plan.limits.modelsAllowed.join(', ')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
||||||
|
Features
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-1.5">
|
||||||
|
{plan.features.map(feature => (
|
||||||
|
<li key={feature} className="flex items-center gap-2 text-sm">
|
||||||
|
<Check className="h-3.5 w-3.5 text-emerald-500 shrink-0" />
|
||||||
|
{feature}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-2">
|
||||||
|
<Badge variant="secondary" className="w-full justify-center py-1">
|
||||||
|
Revenue: {formatCurrency(plan.price * plan.activeUsers)}/mo
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Edit Plan Dialog */}
|
||||||
|
<Dialog open={!!editingPlan} onOpenChange={() => setEditingPlan(null)}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Edit Plan Pricing</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Update pricing and limits for this subscription tier.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4 py-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Price (USD / month)</Label>
|
||||||
|
<Input type="number" value={editPrice} onChange={e => setEditPrice(e.target.value)} />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Tokens per Month (-1 for unlimited)</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={editTokens}
|
||||||
|
onChange={e => setEditTokens(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Requests per Day (-1 for unlimited)</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={editRequests}
|
||||||
|
onChange={e => setEditRequests(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setEditingPlan(null)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={saveEdit} disabled={saving}>
|
||||||
|
{saving ? 'Saving…' : 'Save Changes'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* New Plan Dialog */}
|
||||||
|
<Dialog open={showNewPlan} onOpenChange={setShowNewPlan}>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Create New Plan</DialogTitle>
|
||||||
|
<DialogDescription>Define a new subscription tier for your platform.</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4 py-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Plan Name</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="e.g. Team, Business..."
|
||||||
|
value={newPlanName}
|
||||||
|
onChange={e => setNewPlanName(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Price (USD / month)</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="49.99"
|
||||||
|
value={newPlanPrice}
|
||||||
|
onChange={e => setNewPlanPrice(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Tokens per Month</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="5000000"
|
||||||
|
value={newPlanTokens}
|
||||||
|
onChange={e => setNewPlanTokens(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Requests per Day</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="5000"
|
||||||
|
value={newPlanRequests}
|
||||||
|
onChange={e => setNewPlanRequests(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Switch id="yearly" checked={newPlanYearly} onCheckedChange={setNewPlanYearly} />
|
||||||
|
<Label htmlFor="yearly">Offer yearly billing (20% discount)</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowNewPlan(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleCreatePlan} disabled={saving || !newPlanName.trim()}>
|
||||||
|
{saving ? 'Creating…' : 'Create Plan'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
452
dashboards/admin-web/src/app/(dashboard)/tokens/page.tsx
Normal file
452
dashboards/admin-web/src/app/(dashboard)/tokens/page.tsx
Normal file
@ -0,0 +1,452 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
Key,
|
||||||
|
Plus,
|
||||||
|
Copy,
|
||||||
|
MoreHorizontal,
|
||||||
|
ShieldCheck,
|
||||||
|
ShieldOff,
|
||||||
|
Clock,
|
||||||
|
CheckCircle2,
|
||||||
|
XCircle,
|
||||||
|
AlertTriangle,
|
||||||
|
Trash2,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Switch } from '@/components/ui/switch';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/components/ui/dropdown-menu';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { mockApiTokens, formatDate, type ApiToken as MockApiToken } from '@/lib/mock-data';
|
||||||
|
import { apiListTokens, apiCreateToken, apiRevokeToken, apiDeleteToken } from '@/lib/api';
|
||||||
|
|
||||||
|
const statusConfig = {
|
||||||
|
active: {
|
||||||
|
label: 'Active',
|
||||||
|
color: 'bg-emerald-50 text-emerald-700',
|
||||||
|
icon: CheckCircle2,
|
||||||
|
},
|
||||||
|
revoked: {
|
||||||
|
label: 'Revoked',
|
||||||
|
color: 'bg-red-50 text-red-700',
|
||||||
|
icon: XCircle,
|
||||||
|
},
|
||||||
|
expired: {
|
||||||
|
label: 'Expired',
|
||||||
|
color: 'bg-amber-50 text-amber-700',
|
||||||
|
icon: AlertTriangle,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const allScopes = ['dictate', 'transcribe', 'cleanup', 'admin'];
|
||||||
|
|
||||||
|
export default function TokensPage() {
|
||||||
|
const [tokens, setTokens] = useState<MockApiToken[]>(mockApiTokens);
|
||||||
|
const [showCreate, setShowCreate] = useState(false);
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||||
|
const [newTokenName, setNewTokenName] = useState('');
|
||||||
|
const [newTokenScopes, setNewTokenScopes] = useState<string[]>(['dictate', 'transcribe']);
|
||||||
|
const [newTokenExpiry, setNewTokenExpiry] = useState('90');
|
||||||
|
const [generatedToken, setGeneratedToken] = useState<string | null>(null);
|
||||||
|
const [copiedPrefix, setCopiedPrefix] = useState<string | null>(null);
|
||||||
|
const [copiedToken, setCopiedToken] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
apiListTokens().then(({ data }) => {
|
||||||
|
if (data?.tokens?.length) {
|
||||||
|
setTokens(
|
||||||
|
data.tokens.map(t => ({
|
||||||
|
id: t.id,
|
||||||
|
userId: t.userId,
|
||||||
|
userName: t.userName,
|
||||||
|
name: t.name,
|
||||||
|
prefix: t.prefix,
|
||||||
|
status: t.status as MockApiToken['status'],
|
||||||
|
createdAt: t.createdAt,
|
||||||
|
expiresAt: t.expiresAt,
|
||||||
|
lastUsed: t.lastUsed,
|
||||||
|
scopes: t.scopes,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const filtered = tokens.filter(t => statusFilter === 'all' || t.status === statusFilter);
|
||||||
|
|
||||||
|
const activeCount = tokens.filter(t => t.status === 'active').length;
|
||||||
|
const revokedCount = tokens.filter(t => t.status === 'revoked').length;
|
||||||
|
const expiredCount = tokens.filter(t => t.status === 'expired').length;
|
||||||
|
|
||||||
|
const handleCreate = async () => {
|
||||||
|
const { data, error } = await apiCreateToken({
|
||||||
|
name: newTokenName,
|
||||||
|
scopes: newTokenScopes,
|
||||||
|
expiresInDays: parseInt(newTokenExpiry),
|
||||||
|
});
|
||||||
|
if (data) {
|
||||||
|
setGeneratedToken(data.rawToken);
|
||||||
|
setTokens(prev => [
|
||||||
|
{
|
||||||
|
id: data.id,
|
||||||
|
userId: data.userId,
|
||||||
|
userName: data.userName,
|
||||||
|
name: data.name,
|
||||||
|
prefix: data.prefix,
|
||||||
|
status: data.status as MockApiToken['status'],
|
||||||
|
createdAt: data.createdAt,
|
||||||
|
expiresAt: data.expiresAt,
|
||||||
|
lastUsed: data.lastUsed,
|
||||||
|
scopes: data.scopes,
|
||||||
|
},
|
||||||
|
...prev,
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
setGeneratedToken(`error: ${error}`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRevoke = async (tokenId: string) => {
|
||||||
|
const token = tokens.find(t => t.id === tokenId);
|
||||||
|
if (!token) return;
|
||||||
|
if (!confirm(`Revoke token "${token.name}"? This cannot be undone.`)) return;
|
||||||
|
const { error } = await apiRevokeToken(tokenId);
|
||||||
|
if (!error) {
|
||||||
|
setTokens(prev =>
|
||||||
|
prev.map(t => (t.id === tokenId ? { ...t, status: 'revoked' as const } : t))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (tokenId: string) => {
|
||||||
|
const token = tokens.find(t => t.id === tokenId);
|
||||||
|
if (!token) return;
|
||||||
|
if (!confirm(`Permanently delete token "${token.name}"? This cannot be undone.`)) return;
|
||||||
|
const { error } = await apiDeleteToken(tokenId);
|
||||||
|
if (!error) {
|
||||||
|
setTokens(prev => prev.filter(t => t.id !== tokenId));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleScope = (scope: string) => {
|
||||||
|
setNewTokenScopes(prev =>
|
||||||
|
prev.includes(scope) ? prev.filter(s => s !== scope) : [...prev, scope]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">API Tokens</h1>
|
||||||
|
<p className="text-muted-foreground">Create and manage API access tokens</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
setShowCreate(true);
|
||||||
|
setGeneratedToken(null);
|
||||||
|
setNewTokenName('');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Plus className="mr-2 h-4 w-4" />
|
||||||
|
Generate Token
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Summary */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-3">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Active Tokens
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ShieldCheck className="h-5 w-5 text-emerald-500" />
|
||||||
|
<span className="text-2xl font-bold">{activeCount}</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">Revoked</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ShieldOff className="h-5 w-5 text-red-500" />
|
||||||
|
<span className="text-2xl font-bold">{revokedCount}</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">Expired</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Clock className="h-5 w-5 text-amber-500" />
|
||||||
|
<span className="text-2xl font-bold">{expiredCount}</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filter */}
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||||
|
<SelectTrigger className="w-[180px]">
|
||||||
|
<SelectValue placeholder="Filter by status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Tokens</SelectItem>
|
||||||
|
<SelectItem value="active">Active</SelectItem>
|
||||||
|
<SelectItem value="revoked">Revoked</SelectItem>
|
||||||
|
<SelectItem value="expired">Expired</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tokens Table */}
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Name</TableHead>
|
||||||
|
<TableHead>User</TableHead>
|
||||||
|
<TableHead>Prefix</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead>Scopes</TableHead>
|
||||||
|
<TableHead>Created</TableHead>
|
||||||
|
<TableHead>Expires</TableHead>
|
||||||
|
<TableHead>Last Used</TableHead>
|
||||||
|
<TableHead className="w-[50px]" />
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filtered.map(token => {
|
||||||
|
const status = statusConfig[token.status];
|
||||||
|
return (
|
||||||
|
<TableRow key={token.id}>
|
||||||
|
<TableCell className="font-medium">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Key className="h-4 w-4 text-muted-foreground" />
|
||||||
|
{token.name}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-sm">{token.userName}</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<code className="text-xs bg-muted px-1.5 py-0.5 rounded">
|
||||||
|
{token.prefix}...
|
||||||
|
</code>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="secondary" className={status.color}>
|
||||||
|
<status.icon className="mr-1 h-3 w-3" />
|
||||||
|
{status.label}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex flex-wrap gap-1">
|
||||||
|
{token.scopes.map(scope => (
|
||||||
|
<Badge key={scope} variant="outline" className="text-[10px]">
|
||||||
|
{scope}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-sm text-muted-foreground">
|
||||||
|
{formatDate(token.createdAt)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-sm text-muted-foreground">
|
||||||
|
{formatDate(token.expiresAt)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-sm text-muted-foreground">
|
||||||
|
{token.lastUsed ? formatDate(token.lastUsed) : 'Never'}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||||
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => {
|
||||||
|
navigator.clipboard.writeText(token.prefix);
|
||||||
|
setCopiedPrefix(token.id);
|
||||||
|
setTimeout(() => setCopiedPrefix(null), 2000);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{copiedPrefix === token.id ? (
|
||||||
|
<CheckCircle2 className="mr-2 h-4 w-4 text-green-500" />
|
||||||
|
) : (
|
||||||
|
<Copy className="mr-2 h-4 w-4" />
|
||||||
|
)}
|
||||||
|
{copiedPrefix === token.id ? 'Copied!' : 'Copy Prefix'}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
{token.status === 'active' && (
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="text-red-600"
|
||||||
|
onClick={() => handleRevoke(token.id)}
|
||||||
|
>
|
||||||
|
<ShieldOff className="mr-2 h-4 w-4" />
|
||||||
|
Revoke Token
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="text-red-600"
|
||||||
|
onClick={() => handleDelete(token.id)}
|
||||||
|
>
|
||||||
|
<Trash2 className="mr-2 h-4 w-4" />
|
||||||
|
Delete Token
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Create Token Dialog */}
|
||||||
|
<Dialog open={showCreate} onOpenChange={setShowCreate}>
|
||||||
|
<DialogContent className="max-w-md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Generate API Token</DialogTitle>
|
||||||
|
<DialogDescription>Create a new API token for programmatic access.</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{!generatedToken ? (
|
||||||
|
<>
|
||||||
|
<div className="space-y-4 py-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Token Name</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="e.g. Production, CI/CD, Dev..."
|
||||||
|
value={newTokenName}
|
||||||
|
onChange={e => setNewTokenName(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Expiry</Label>
|
||||||
|
<Select value={newTokenExpiry} onValueChange={setNewTokenExpiry}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="30">30 days</SelectItem>
|
||||||
|
<SelectItem value="90">90 days</SelectItem>
|
||||||
|
<SelectItem value="180">180 days</SelectItem>
|
||||||
|
<SelectItem value="365">1 year</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Label>Scopes</Label>
|
||||||
|
{allScopes.map(scope => (
|
||||||
|
<div key={scope} className="flex items-center gap-2">
|
||||||
|
<Switch
|
||||||
|
id={`scope-${scope}`}
|
||||||
|
checked={newTokenScopes.includes(scope)}
|
||||||
|
onCheckedChange={() => toggleScope(scope)}
|
||||||
|
/>
|
||||||
|
<Label htmlFor={`scope-${scope}`} className="font-normal capitalize">
|
||||||
|
{scope}
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowCreate(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleCreate} disabled={!newTokenName.trim()}>
|
||||||
|
Generate
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4 py-4">
|
||||||
|
<div className="rounded-lg border bg-muted/50 p-4">
|
||||||
|
<p className="text-xs text-muted-foreground mb-2">
|
||||||
|
Your new API token (copy it now, it won't be shown again):
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="flex-1 text-sm font-mono break-all">{generatedToken}</code>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="shrink-0"
|
||||||
|
title={copiedToken ? 'Copied!' : 'Copy token'}
|
||||||
|
onClick={() => {
|
||||||
|
navigator.clipboard.writeText(generatedToken);
|
||||||
|
setCopiedToken(true);
|
||||||
|
setTimeout(() => setCopiedToken(false), 2000);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{copiedToken ? (
|
||||||
|
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||||
|
) : (
|
||||||
|
<Copy className="h-4 w-4" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="rounded-lg border border-amber-200 bg-amber-50 p-3">
|
||||||
|
<p className="text-sm text-amber-800">
|
||||||
|
<AlertTriangle className="inline mr-1 h-4 w-4" />
|
||||||
|
Store this token securely. You will not be able to see it again after closing this
|
||||||
|
dialog.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button onClick={() => setShowCreate(false)}>Done</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
798
dashboards/admin-web/src/app/(dashboard)/usage/page.tsx
Normal file
798
dashboards/admin-web/src/app/(dashboard)/usage/page.tsx
Normal file
@ -0,0 +1,798 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { Zap, BarChart3, DollarSign, Cpu, X, User as UserIcon } from 'lucide-react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import {
|
||||||
|
mockDailyMetrics,
|
||||||
|
mockUsers,
|
||||||
|
formatNumber,
|
||||||
|
formatCurrency,
|
||||||
|
type DailyMetric,
|
||||||
|
type User,
|
||||||
|
} from '@/lib/mock-data';
|
||||||
|
import {
|
||||||
|
apiGetUsage,
|
||||||
|
apiGetUsageSummary,
|
||||||
|
apiListUsers,
|
||||||
|
apiGetRetention,
|
||||||
|
type ApiUsageRecord,
|
||||||
|
type ApiModelBreakdown,
|
||||||
|
type ApiSourceBreakdown,
|
||||||
|
type ApiProductBreakdown,
|
||||||
|
type RetentionCohort,
|
||||||
|
} from '@/lib/api';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
import {
|
||||||
|
AreaChart,
|
||||||
|
Area,
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
CartesianGrid,
|
||||||
|
Tooltip,
|
||||||
|
ResponsiveContainer,
|
||||||
|
BarChart,
|
||||||
|
Bar,
|
||||||
|
PieChart,
|
||||||
|
Pie,
|
||||||
|
Cell,
|
||||||
|
} from 'recharts';
|
||||||
|
|
||||||
|
const COLORS = [
|
||||||
|
'hsl(221, 83%, 53%)',
|
||||||
|
'hsl(142, 71%, 45%)',
|
||||||
|
'hsl(38, 92%, 50%)',
|
||||||
|
'hsl(280, 67%, 55%)',
|
||||||
|
];
|
||||||
|
|
||||||
|
function usageRecordsToDailyMetrics(records: ApiUsageRecord[]): DailyMetric[] {
|
||||||
|
const byDate = new Map<string, DailyMetric>();
|
||||||
|
for (const r of records) {
|
||||||
|
const existing = byDate.get(r.date);
|
||||||
|
if (existing) {
|
||||||
|
existing.totalTokens += r.tokensUsed;
|
||||||
|
existing.totalRequests += r.dictations;
|
||||||
|
existing.revenue += r.costUsd;
|
||||||
|
existing.activeUsers += 1;
|
||||||
|
} else {
|
||||||
|
byDate.set(r.date, {
|
||||||
|
date: r.date,
|
||||||
|
activeUsers: 1,
|
||||||
|
totalRequests: r.dictations,
|
||||||
|
totalTokens: r.tokensUsed,
|
||||||
|
revenue: r.costUsd,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Array.from(byDate.values()).sort((a, b) => a.date.localeCompare(b.date));
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function UsagePage() {
|
||||||
|
const [timeRange, setTimeRange] = useState('30d');
|
||||||
|
const [dailyMetrics, setDailyMetrics] = useState<DailyMetric[]>(mockDailyMetrics);
|
||||||
|
const [modelUsage, setModelUsage] = useState<(ApiModelBreakdown & { percentage: number })[]>([]);
|
||||||
|
const [sourceUsage, setSourceUsage] = useState<(ApiSourceBreakdown & { percentage: number })[]>([]);
|
||||||
|
const [productUsage, setProductUsage] = useState<(ApiProductBreakdown & { percentage: number })[]>([]);
|
||||||
|
const [users, setUsers] = useState<User[]>(mockUsers);
|
||||||
|
const [cohorts, setCohorts] = useState<RetentionCohort[]>([]);
|
||||||
|
const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
|
||||||
|
const [productFilter, setProductFilter] = useState<string>('current');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const days = timeRange === '7d' ? 7 : timeRange === '90d' ? 90 : 30;
|
||||||
|
const uid = selectedUserId || undefined;
|
||||||
|
const pid = productFilter === 'current' ? undefined : productFilter;
|
||||||
|
apiGetUsage(days, uid, pid).then(({ data }) => {
|
||||||
|
if (data?.records?.length) {
|
||||||
|
setDailyMetrics(usageRecordsToDailyMetrics(data.records));
|
||||||
|
} else {
|
||||||
|
setDailyMetrics([]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
apiGetUsageSummary(days, uid, pid).then(({ data }) => {
|
||||||
|
if (data?.modelBreakdown?.length) {
|
||||||
|
const totalCost = data.modelBreakdown.reduce((s, m) => s + m.cost, 0);
|
||||||
|
setModelUsage(
|
||||||
|
data.modelBreakdown.map(m => ({
|
||||||
|
...m,
|
||||||
|
percentage: totalCost > 0 ? Math.round((m.cost / totalCost) * 100) : 0,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
setModelUsage([]);
|
||||||
|
}
|
||||||
|
if (data?.sourceBreakdown?.length) {
|
||||||
|
const totalTokens = data.sourceBreakdown.reduce((s, m) => s + m.tokens, 0);
|
||||||
|
setSourceUsage(
|
||||||
|
data.sourceBreakdown.map(m => ({
|
||||||
|
...m,
|
||||||
|
percentage: totalTokens > 0 ? Math.round((m.tokens / totalTokens) * 100) : 0,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
setSourceUsage([]);
|
||||||
|
}
|
||||||
|
if (data?.productBreakdown?.length) {
|
||||||
|
const totalTokens = data.productBreakdown.reduce((s, m) => s + m.tokens, 0);
|
||||||
|
setProductUsage(
|
||||||
|
data.productBreakdown.map(m => ({
|
||||||
|
...m,
|
||||||
|
percentage: totalTokens > 0 ? Math.round((m.tokens / totalTokens) * 100) : 0,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
setProductUsage([]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
apiGetRetention(8).then(({ data }) => {
|
||||||
|
if (data?.cohorts) setCohorts(data.cohorts);
|
||||||
|
});
|
||||||
|
apiListUsers().then(({ data }) => {
|
||||||
|
if (data?.users?.length) {
|
||||||
|
setUsers(
|
||||||
|
data.users.map(u => ({
|
||||||
|
id: u.id,
|
||||||
|
name: u.name,
|
||||||
|
email: u.email,
|
||||||
|
plan: u.plan as User['plan'],
|
||||||
|
status: u.status as User['status'],
|
||||||
|
createdAt: u.createdAt,
|
||||||
|
lastActive: u.lastActive,
|
||||||
|
totalTokensUsed: u.totalTokensUsed,
|
||||||
|
totalRequests: u.totalRequests,
|
||||||
|
monthlySpend: u.monthlySpend,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, [timeRange, selectedUserId, productFilter]);
|
||||||
|
|
||||||
|
const totalTokens = dailyMetrics.reduce((s, d) => s + d.totalTokens, 0);
|
||||||
|
const totalRequests = dailyMetrics.reduce((s, d) => s + d.totalRequests, 0);
|
||||||
|
const totalRevenue = dailyMetrics.reduce((s, d) => s + d.revenue, 0);
|
||||||
|
const totalModelCost = modelUsage.reduce((s, m) => s + m.cost, 0);
|
||||||
|
|
||||||
|
const topUsers = [...users].sort((a, b) => b.totalTokensUsed - a.totalTokensUsed).slice(0, 5);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Usage Analytics</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Monitor token consumption, API requests, and model usage
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Select value={productFilter} onValueChange={setProductFilter}>
|
||||||
|
<SelectTrigger className="w-[160px]">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="current">Current Product</SelectItem>
|
||||||
|
<SelectItem value="_all">All Products</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select value={timeRange} onValueChange={setTimeRange}>
|
||||||
|
<SelectTrigger className="w-[150px]">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="7d">Last 7 days</SelectItem>
|
||||||
|
<SelectItem value="30d">Last 30 days</SelectItem>
|
||||||
|
<SelectItem value="90d">Last 90 days</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* User Filter Banner */}
|
||||||
|
{selectedUserId && (
|
||||||
|
<Card className="border-blue-500/50 bg-blue-50 dark:bg-blue-950/30">
|
||||||
|
<CardContent className="pt-4 pb-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<UserIcon className="h-4 w-4 text-blue-600" />
|
||||||
|
<span className="text-sm font-medium text-blue-800 dark:text-blue-200">
|
||||||
|
Viewing usage for: {users.find(u => u.id === selectedUserId)?.name || selectedUserId}
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-blue-600 dark:text-blue-400">
|
||||||
|
({users.find(u => u.id === selectedUserId)?.email})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="text-blue-700 hover:text-blue-900"
|
||||||
|
onClick={() => setSelectedUserId(null)}
|
||||||
|
>
|
||||||
|
<X className="mr-1 h-3.5 w-3.5" />
|
||||||
|
Clear Filter
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Summary Cards */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Total Tokens
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Zap className="h-5 w-5 text-blue-500" />
|
||||||
|
<span className="text-2xl font-bold">{formatNumber(totalTokens)}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
{formatNumber(Math.round(totalTokens / 30))}/day avg
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Total Requests
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<BarChart3 className="h-5 w-5 text-emerald-500" />
|
||||||
|
<span className="text-2xl font-bold">{formatNumber(totalRequests)}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
{formatNumber(Math.round(totalRequests / 30))}/day avg
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Total Revenue
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<DollarSign className="h-5 w-5 text-amber-500" />
|
||||||
|
<span className="text-2xl font-bold">{formatCurrency(totalRevenue)}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
{formatCurrency(totalRevenue / 30)}/day avg
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
||||||
|
Model Costs (Azure)
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Cpu className="h-5 w-5 text-violet-500" />
|
||||||
|
<span className="text-2xl font-bold">{formatCurrency(totalModelCost)}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Margin: {formatCurrency(totalRevenue - totalModelCost)}
|
||||||
|
</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Charts Row 1 */}
|
||||||
|
<div className="grid gap-6 lg:grid-cols-2">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Token Consumption (30 days)</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
|
<AreaChart data={dailyMetrics}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="colorTokens" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="5%" stopColor="hsl(221, 83%, 53%)" stopOpacity={0.3} />
|
||||||
|
<stop offset="95%" stopColor="hsl(221, 83%, 53%)" stopOpacity={0} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
|
||||||
|
<XAxis dataKey="date" tickFormatter={v => v.slice(5)} className="text-xs" />
|
||||||
|
<YAxis className="text-xs" tickFormatter={v => formatNumber(v)} />
|
||||||
|
<Tooltip
|
||||||
|
formatter={value => formatNumber(Number(value))}
|
||||||
|
contentStyle={{
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid hsl(var(--border))',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
type="monotone"
|
||||||
|
dataKey="totalTokens"
|
||||||
|
stroke="hsl(221, 83%, 53%)"
|
||||||
|
fill="url(#colorTokens)"
|
||||||
|
strokeWidth={2}
|
||||||
|
name="Tokens"
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">API Requests (30 days)</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
|
<BarChart data={dailyMetrics}>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
|
||||||
|
<XAxis dataKey="date" tickFormatter={v => v.slice(5)} className="text-xs" />
|
||||||
|
<YAxis className="text-xs" tickFormatter={v => formatNumber(v)} />
|
||||||
|
<Tooltip
|
||||||
|
formatter={value => formatNumber(Number(value))}
|
||||||
|
contentStyle={{
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid hsl(var(--border))',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Bar
|
||||||
|
dataKey="totalRequests"
|
||||||
|
fill="hsl(142, 71%, 45%)"
|
||||||
|
radius={[4, 4, 0, 0]}
|
||||||
|
name="Requests"
|
||||||
|
/>
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Charts Row 2: Pie + Top Users */}
|
||||||
|
<div className="grid gap-6 lg:grid-cols-2">
|
||||||
|
{/* Model Distribution Pie */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Model Distribution by Cost</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ResponsiveContainer width="100%" height={300}>
|
||||||
|
<PieChart>
|
||||||
|
<Pie
|
||||||
|
data={modelUsage}
|
||||||
|
cx="50%"
|
||||||
|
cy="50%"
|
||||||
|
innerRadius={70}
|
||||||
|
outerRadius={110}
|
||||||
|
paddingAngle={4}
|
||||||
|
dataKey="cost"
|
||||||
|
nameKey="model"
|
||||||
|
label={({ name, percent }) => `${name} (${((percent ?? 0) * 100).toFixed(0)}%)`}
|
||||||
|
>
|
||||||
|
{modelUsage.map((_, idx) => (
|
||||||
|
<Cell key={idx} fill={COLORS[idx % COLORS.length]} />
|
||||||
|
))}
|
||||||
|
</Pie>
|
||||||
|
<Tooltip
|
||||||
|
formatter={value => formatCurrency(Number(value))}
|
||||||
|
contentStyle={{
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid hsl(var(--border))',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</PieChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Top Users by Token Usage */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">
|
||||||
|
Top Users by Token Usage
|
||||||
|
<span className="text-xs font-normal text-muted-foreground ml-2">
|
||||||
|
(click to drill down)
|
||||||
|
</span>
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Rank</TableHead>
|
||||||
|
<TableHead>User</TableHead>
|
||||||
|
<TableHead>Plan</TableHead>
|
||||||
|
<TableHead className="text-right">Tokens</TableHead>
|
||||||
|
<TableHead className="text-right">Requests</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{topUsers.map((user, idx) => (
|
||||||
|
<TableRow
|
||||||
|
key={user.id}
|
||||||
|
className={`cursor-pointer hover:bg-muted/50 ${selectedUserId === user.id ? 'bg-blue-50 dark:bg-blue-950/30' : ''}`}
|
||||||
|
onClick={() => setSelectedUserId(selectedUserId === user.id ? null : user.id)}
|
||||||
|
>
|
||||||
|
<TableCell>
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className={
|
||||||
|
idx === 0
|
||||||
|
? 'bg-amber-50 text-amber-700'
|
||||||
|
: idx === 1
|
||||||
|
? 'bg-slate-100 text-slate-600'
|
||||||
|
: idx === 2
|
||||||
|
? 'bg-orange-50 text-orange-700'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
>
|
||||||
|
#{idx + 1}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-sm">{user.name}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">{user.email}</p>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge
|
||||||
|
variant="secondary"
|
||||||
|
className={
|
||||||
|
user.plan === 'enterprise'
|
||||||
|
? 'bg-violet-50 text-violet-700'
|
||||||
|
: user.plan === 'pro'
|
||||||
|
? 'bg-blue-50 text-blue-700'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{user.plan}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono text-sm">
|
||||||
|
{formatNumber(user.totalTokensUsed)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono text-sm">
|
||||||
|
{formatNumber(user.totalRequests)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Detailed Model Breakdown */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Model Usage Breakdown</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Model</TableHead>
|
||||||
|
<TableHead className="text-right">Tokens</TableHead>
|
||||||
|
<TableHead className="text-right">Requests</TableHead>
|
||||||
|
<TableHead className="text-right">Cost</TableHead>
|
||||||
|
<TableHead className="text-right">% of Total</TableHead>
|
||||||
|
<TableHead className="text-right">Cost/1K Tokens</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{modelUsage.map(model => (
|
||||||
|
<TableRow key={model.model}>
|
||||||
|
<TableCell className="font-medium">{model.model}</TableCell>
|
||||||
|
<TableCell className="text-right font-mono">
|
||||||
|
{formatNumber(model.tokens)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono">
|
||||||
|
{formatNumber(model.requests)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono">
|
||||||
|
{formatCurrency(model.cost)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
<div className="flex items-center justify-end gap-2">
|
||||||
|
<div className="h-2 w-16 rounded-full bg-muted overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full bg-primary"
|
||||||
|
style={{ width: `${model.percentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm">{model.percentage}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono text-sm">
|
||||||
|
{formatCurrency((model.cost / model.tokens) * 1000)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
{/* Platform / Source Breakdown */}
|
||||||
|
{sourceUsage.length > 0 && (
|
||||||
|
<div className="grid gap-6 lg:grid-cols-2">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Usage by Platform</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ResponsiveContainer width="100%" height={280}>
|
||||||
|
<PieChart>
|
||||||
|
<Pie
|
||||||
|
data={sourceUsage}
|
||||||
|
cx="50%"
|
||||||
|
cy="50%"
|
||||||
|
innerRadius={60}
|
||||||
|
outerRadius={100}
|
||||||
|
paddingAngle={4}
|
||||||
|
dataKey="tokens"
|
||||||
|
nameKey="source"
|
||||||
|
label={({ name, percent }) => `${name} (${((percent ?? 0) * 100).toFixed(0)}%)`}
|
||||||
|
>
|
||||||
|
{sourceUsage.map((_, idx) => (
|
||||||
|
<Cell key={idx} fill={COLORS[idx % COLORS.length]} />
|
||||||
|
))}
|
||||||
|
</Pie>
|
||||||
|
<Tooltip
|
||||||
|
formatter={value => formatNumber(Number(value))}
|
||||||
|
contentStyle={{
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid hsl(var(--border))',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</PieChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Platform Breakdown</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Platform</TableHead>
|
||||||
|
<TableHead className="text-right">Tokens</TableHead>
|
||||||
|
<TableHead className="text-right">Requests</TableHead>
|
||||||
|
<TableHead className="text-right">Cost</TableHead>
|
||||||
|
<TableHead className="text-right">% of Tokens</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{sourceUsage.map(src => (
|
||||||
|
<TableRow key={src.source}>
|
||||||
|
<TableCell className="font-medium capitalize">{src.source}</TableCell>
|
||||||
|
<TableCell className="text-right font-mono">
|
||||||
|
{formatNumber(src.tokens)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono">
|
||||||
|
{formatNumber(src.requests)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono">
|
||||||
|
{formatCurrency(src.cost)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
<div className="flex items-center justify-end gap-2">
|
||||||
|
<div className="h-2 w-16 rounded-full bg-muted overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full bg-primary"
|
||||||
|
style={{ width: `${src.percentage}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm">{src.percentage}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Cross-Product Comparison */}
|
||||||
|
{productUsage.length > 1 && (
|
||||||
|
<>
|
||||||
|
<Separator />
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-bold tracking-tight mb-1">
|
||||||
|
Cross-Product Comparison
|
||||||
|
{selectedUserId && (
|
||||||
|
<span className="text-sm font-normal text-muted-foreground ml-2">
|
||||||
|
for {users.find(u => u.id === selectedUserId)?.name || selectedUserId}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-muted-foreground mb-4">
|
||||||
|
Token usage, requests, and cost breakdown by product
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-6 lg:grid-cols-2">
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Tokens by Product</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ResponsiveContainer width="100%" height={280}>
|
||||||
|
<BarChart data={productUsage} layout="vertical">
|
||||||
|
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
|
||||||
|
<XAxis type="number" tickFormatter={v => formatNumber(v)} className="text-xs" />
|
||||||
|
<YAxis type="category" dataKey="productId" width={100} className="text-xs" />
|
||||||
|
<Tooltip
|
||||||
|
formatter={value => formatNumber(Number(value))}
|
||||||
|
contentStyle={{
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid hsl(var(--border))',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Bar dataKey="tokens" name="Tokens" radius={[0, 4, 4, 0]}>
|
||||||
|
{productUsage.map((_, idx) => (
|
||||||
|
<Cell key={idx} fill={COLORS[idx % COLORS.length]} />
|
||||||
|
))}
|
||||||
|
</Bar>
|
||||||
|
</BarChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Product Breakdown</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Product</TableHead>
|
||||||
|
<TableHead className="text-right">Tokens</TableHead>
|
||||||
|
<TableHead className="text-right">Requests</TableHead>
|
||||||
|
<TableHead className="text-right">Cost</TableHead>
|
||||||
|
<TableHead className="text-right">% of Tokens</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{productUsage.map((prod, idx) => (
|
||||||
|
<TableRow key={prod.productId}>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div
|
||||||
|
className="h-3 w-3 rounded-full"
|
||||||
|
style={{ backgroundColor: COLORS[idx % COLORS.length] }}
|
||||||
|
/>
|
||||||
|
<span className="font-medium">{prod.productId}</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono">
|
||||||
|
{formatNumber(prod.tokens)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono">
|
||||||
|
{formatNumber(prod.requests)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono">
|
||||||
|
{formatCurrency(prod.cost)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right">
|
||||||
|
<div className="flex items-center justify-end gap-2">
|
||||||
|
<div className="h-2 w-16 rounded-full bg-muted overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-full rounded-full"
|
||||||
|
style={{
|
||||||
|
width: `${prod.percentage}%`,
|
||||||
|
backgroundColor: COLORS[idx % COLORS.length],
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span className="text-sm">{prod.percentage}%</span>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Cohort Retention Analysis */}
|
||||||
|
<Separator />
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-bold tracking-tight mb-1">Cohort Retention</h2>
|
||||||
|
<p className="text-sm text-muted-foreground mb-4">
|
||||||
|
Weekly signup cohorts — percentage of users active at 7, 14, and 30 days after signup
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Retention by Signup Week</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
{cohorts.length === 0 ? (
|
||||||
|
<p className="text-center text-muted-foreground py-8 text-sm">
|
||||||
|
No cohort data available yet. Users need to sign up and use the platform.
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Cohort</TableHead>
|
||||||
|
<TableHead>Week Start</TableHead>
|
||||||
|
<TableHead className="text-right">Signups</TableHead>
|
||||||
|
<TableHead className="text-center">7-Day</TableHead>
|
||||||
|
<TableHead className="text-center">14-Day</TableHead>
|
||||||
|
<TableHead className="text-center">30-Day</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{cohorts.map(c => (
|
||||||
|
<TableRow key={c.cohortWeek}>
|
||||||
|
<TableCell className="font-mono text-sm font-medium">{c.cohortWeek}</TableCell>
|
||||||
|
<TableCell className="text-sm text-muted-foreground">{c.cohortStart}</TableCell>
|
||||||
|
<TableCell className="text-right font-mono text-sm">{c.signups}</TableCell>
|
||||||
|
<TableCell className="text-center">
|
||||||
|
<RetentionCell rate={c.rate7d} count={c.retained7d} />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-center">
|
||||||
|
<RetentionCell rate={c.rate14d} count={c.retained14d} />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-center">
|
||||||
|
<RetentionCell rate={c.rate30d} count={c.retained30d} />
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function RetentionCell({ rate, count }: { rate: number; count: number }) {
|
||||||
|
if (rate < 0) {
|
||||||
|
return <span className="text-xs text-muted-foreground">—</span>;
|
||||||
|
}
|
||||||
|
const bg =
|
||||||
|
rate >= 60
|
||||||
|
? 'bg-emerald-100 text-emerald-800'
|
||||||
|
: rate >= 40
|
||||||
|
? 'bg-emerald-50 text-emerald-700'
|
||||||
|
: rate >= 20
|
||||||
|
? 'bg-amber-50 text-amber-700'
|
||||||
|
: 'bg-red-50 text-red-700';
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={`inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium ${bg}`}
|
||||||
|
title={`${count} users retained`}
|
||||||
|
>
|
||||||
|
{rate}%
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
384
dashboards/admin-web/src/app/(dashboard)/users/[id]/page.tsx
Normal file
384
dashboards/admin-web/src/app/(dashboard)/users/[id]/page.tsx
Normal file
@ -0,0 +1,384 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useParams, useRouter } from 'next/navigation';
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
User,
|
||||||
|
Mail,
|
||||||
|
Calendar,
|
||||||
|
Activity,
|
||||||
|
Zap,
|
||||||
|
DollarSign,
|
||||||
|
Shield,
|
||||||
|
Clock,
|
||||||
|
BarChart3,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton';
|
||||||
|
import { Separator } from '@/components/ui/separator';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import { apiGetUserView, type UserViewResponse, type ApiUsageRecord } from '@/lib/api';
|
||||||
|
import { formatNumber, formatCurrency, formatDate } from '@/lib/mock-data';
|
||||||
|
import {
|
||||||
|
AreaChart,
|
||||||
|
Area,
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
CartesianGrid,
|
||||||
|
Tooltip,
|
||||||
|
ResponsiveContainer,
|
||||||
|
} from 'recharts';
|
||||||
|
|
||||||
|
const planColors: Record<string, string> = {
|
||||||
|
free: '',
|
||||||
|
pro: 'bg-blue-50 text-blue-700',
|
||||||
|
enterprise: 'bg-violet-50 text-violet-700',
|
||||||
|
};
|
||||||
|
|
||||||
|
const statusColors: Record<string, string> = {
|
||||||
|
active: 'bg-emerald-50 text-emerald-700',
|
||||||
|
inactive: 'bg-amber-50 text-amber-700',
|
||||||
|
suspended: 'bg-red-50 text-red-700',
|
||||||
|
};
|
||||||
|
|
||||||
|
interface DailyUsage {
|
||||||
|
date: string;
|
||||||
|
dictations: number;
|
||||||
|
words: number;
|
||||||
|
tokens: number;
|
||||||
|
cost: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
function aggregateDaily(records: ApiUsageRecord[]): DailyUsage[] {
|
||||||
|
const byDate = new Map<string, DailyUsage>();
|
||||||
|
for (const r of records) {
|
||||||
|
const existing = byDate.get(r.date);
|
||||||
|
if (existing) {
|
||||||
|
existing.dictations += r.dictations;
|
||||||
|
existing.words += r.words;
|
||||||
|
existing.tokens += r.tokensUsed;
|
||||||
|
existing.cost += r.costUsd;
|
||||||
|
} else {
|
||||||
|
byDate.set(r.date, {
|
||||||
|
date: r.date,
|
||||||
|
dictations: r.dictations,
|
||||||
|
words: r.words,
|
||||||
|
tokens: r.tokensUsed,
|
||||||
|
cost: r.costUsd,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Array.from(byDate.values()).sort((a, b) => a.date.localeCompare(b.date));
|
||||||
|
}
|
||||||
|
|
||||||
|
function LoadingSkeleton() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Skeleton className="h-8 w-48" />
|
||||||
|
<div className="grid gap-4 md:grid-cols-4">
|
||||||
|
{[1, 2, 3, 4].map(i => (
|
||||||
|
<Skeleton key={i} className="h-24" />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Skeleton className="h-[300px]" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function UserDetailPage() {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const router = useRouter();
|
||||||
|
const [data, setData] = useState<UserViewResponse | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!id) return;
|
||||||
|
apiGetUserView(id)
|
||||||
|
.then(({ data: viewData, error: err }) => {
|
||||||
|
if (err) setError(err);
|
||||||
|
else if (viewData) setData(viewData);
|
||||||
|
})
|
||||||
|
.finally(() => setLoading(false));
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
if (loading) return <LoadingSkeleton />;
|
||||||
|
|
||||||
|
if (error || !data) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<Button variant="ghost" onClick={() => router.push('/users')}>
|
||||||
|
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||||
|
Back to Users
|
||||||
|
</Button>
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6 text-center text-muted-foreground">
|
||||||
|
{error || 'User not found'}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { profile, usage } = data;
|
||||||
|
const records = usage?.records ?? [];
|
||||||
|
const dailyUsage = aggregateDaily(records);
|
||||||
|
const totalTokens = records.reduce((s, r) => s + r.tokensUsed, 0);
|
||||||
|
const totalWords = records.reduce((s, r) => s + r.words, 0);
|
||||||
|
const totalDictations = records.reduce((s, r) => s + r.dictations, 0);
|
||||||
|
const totalCost = records.reduce((s, r) => s + r.costUsd, 0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button variant="ghost" size="icon" onClick={() => router.push('/users')}>
|
||||||
|
<ArrowLeft className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<h1 className="text-2xl font-bold">{profile.name}</h1>
|
||||||
|
<Badge variant="secondary" className={planColors[profile.plan] || ''}>
|
||||||
|
{profile.plan}
|
||||||
|
</Badge>
|
||||||
|
<Badge variant="secondary" className={statusColors[profile.status] || ''}>
|
||||||
|
{profile.status}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<p className="text-muted-foreground text-sm">{profile.email}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge variant="outline" className="text-xs">
|
||||||
|
<Shield className="mr-1 h-3 w-3" />
|
||||||
|
Read-only view
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Impersonation Banner */}
|
||||||
|
<div className="rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800 flex items-center gap-2">
|
||||||
|
<Shield className="h-4 w-4 shrink-0" />
|
||||||
|
<span>
|
||||||
|
You are viewing this user's data as <strong>{data.viewedBy.name}</strong> (
|
||||||
|
{data.viewedBy.role}). All data is read-only.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profile Info */}
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-1">
|
||||||
|
<User className="h-3.5 w-3.5" /> User ID
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<code className="text-xs font-mono">{profile.id}</code>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-1">
|
||||||
|
<Mail className="h-3.5 w-3.5" /> Email
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm font-medium">{profile.email}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-1">
|
||||||
|
<Calendar className="h-3.5 w-3.5" /> Member Since
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm font-medium">{formatDate(profile.createdAt)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-1">
|
||||||
|
<Clock className="h-3.5 w-3.5" /> Last Active
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm font-medium">{formatDate(profile.lastActive)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Usage KPI Cards (30 days) */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold mb-3">Usage (Last 30 Days)</h2>
|
||||||
|
<div className="grid gap-4 md:grid-cols-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-1">
|
||||||
|
<Activity className="h-3.5 w-3.5" /> Dictations
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-2xl font-bold">{formatNumber(totalDictations)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-1">
|
||||||
|
<BarChart3 className="h-3.5 w-3.5" /> Words
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-2xl font-bold">{formatNumber(totalWords)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-1">
|
||||||
|
<Zap className="h-3.5 w-3.5" /> Tokens Used
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-2xl font-bold">{formatNumber(totalTokens)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium text-muted-foreground flex items-center gap-1">
|
||||||
|
<DollarSign className="h-3.5 w-3.5" /> Cost
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-2xl font-bold">{formatCurrency(totalCost)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Usage Chart */}
|
||||||
|
{dailyUsage.length > 0 && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Daily Dictation Activity</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<ResponsiveContainer width="100%" height={250}>
|
||||||
|
<AreaChart data={dailyUsage}>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="colorDict" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="5%" stopColor="hsl(221, 83%, 53%)" stopOpacity={0.3} />
|
||||||
|
<stop offset="95%" stopColor="hsl(221, 83%, 53%)" stopOpacity={0} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<CartesianGrid strokeDasharray="3 3" className="opacity-30" />
|
||||||
|
<XAxis dataKey="date" tickFormatter={v => v.slice(5)} className="text-xs" />
|
||||||
|
<YAxis className="text-xs" />
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid hsl(var(--border))',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Area
|
||||||
|
type="monotone"
|
||||||
|
dataKey="dictations"
|
||||||
|
stroke="hsl(221, 83%, 53%)"
|
||||||
|
fill="url(#colorDict)"
|
||||||
|
strokeWidth={2}
|
||||||
|
name="Dictations"
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Recent Usage Records Table */}
|
||||||
|
{records.length > 0 && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">Recent Usage Records ({records.length})</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead>Date</TableHead>
|
||||||
|
<TableHead className="text-right">Dictations</TableHead>
|
||||||
|
<TableHead className="text-right">Words</TableHead>
|
||||||
|
<TableHead className="text-right">Tokens</TableHead>
|
||||||
|
<TableHead className="text-right">Cost</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{records.slice(0, 20).map(r => (
|
||||||
|
<TableRow key={r.id}>
|
||||||
|
<TableCell className="text-sm">{r.date}</TableCell>
|
||||||
|
<TableCell className="text-right font-mono text-sm">
|
||||||
|
{formatNumber(r.dictations)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono text-sm">
|
||||||
|
{formatNumber(r.words)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono text-sm">
|
||||||
|
{formatNumber(r.tokensUsed)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono text-sm">
|
||||||
|
{formatCurrency(r.costUsd)}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{records.length === 0 && (
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6 text-center text-muted-foreground">
|
||||||
|
<Activity className="mx-auto h-10 w-10 mb-3 opacity-30" />
|
||||||
|
<p className="text-sm">No usage data in the last 30 days</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Lifetime Stats */}
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold mb-3">Lifetime Statistics</h2>
|
||||||
|
<div className="grid gap-4 md:grid-cols-3">
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<p className="text-sm text-muted-foreground">Total Tokens Used</p>
|
||||||
|
<p className="text-xl font-bold font-mono">{formatNumber(profile.totalTokensUsed)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<p className="text-sm text-muted-foreground">Total Requests</p>
|
||||||
|
<p className="text-xl font-bold font-mono">{formatNumber(profile.totalRequests)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<p className="text-sm text-muted-foreground">Monthly Spend</p>
|
||||||
|
<p className="text-xl font-bold font-mono">{formatCurrency(profile.monthlySpend)}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
612
dashboards/admin-web/src/app/(dashboard)/users/page.tsx
Normal file
612
dashboards/admin-web/src/app/(dashboard)/users/page.tsx
Normal file
@ -0,0 +1,612 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import {
|
||||||
|
Search,
|
||||||
|
MoreHorizontal,
|
||||||
|
UserPlus,
|
||||||
|
Ban,
|
||||||
|
CheckCircle2,
|
||||||
|
XCircle,
|
||||||
|
Eye,
|
||||||
|
Trash2,
|
||||||
|
Copy,
|
||||||
|
Link,
|
||||||
|
Loader2,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/table';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/components/ui/dropdown-menu';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/dialog';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select';
|
||||||
|
import { mockUsers, formatNumber, formatCurrency, formatDate, type User } from '@/lib/mock-data';
|
||||||
|
import { apiListUsers, apiUpdateUser, apiDeleteUser, apiCreateInvitation, type ApiUser } from '@/lib/api';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { useToast } from '@/components/ui/toast';
|
||||||
|
|
||||||
|
function apiUserToUser(u: ApiUser): User {
|
||||||
|
return {
|
||||||
|
id: u.id,
|
||||||
|
name: u.name,
|
||||||
|
email: u.email,
|
||||||
|
plan: u.plan as User['plan'],
|
||||||
|
status: u.status as User['status'],
|
||||||
|
createdAt: u.createdAt,
|
||||||
|
lastActive: u.lastActive,
|
||||||
|
totalTokensUsed: u.totalTokensUsed,
|
||||||
|
totalRequests: u.totalRequests,
|
||||||
|
monthlySpend: u.monthlySpend,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusConfig = {
|
||||||
|
active: { label: 'Active', color: 'bg-emerald-50 text-emerald-700', icon: CheckCircle2 },
|
||||||
|
inactive: { label: 'Inactive', color: 'bg-amber-50 text-amber-700', icon: XCircle },
|
||||||
|
suspended: { label: 'Suspended', color: 'bg-red-50 text-red-700', icon: Ban },
|
||||||
|
};
|
||||||
|
|
||||||
|
const planConfig = {
|
||||||
|
free: { label: 'Free', color: '' },
|
||||||
|
pro: { label: 'Pro', color: 'bg-blue-50 text-blue-700' },
|
||||||
|
enterprise: { label: 'Enterprise', color: 'bg-violet-50 text-violet-700' },
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function UsersPage() {
|
||||||
|
const router = useRouter();
|
||||||
|
const { toast } = useToast();
|
||||||
|
const [users, setUsers] = useState<User[]>(mockUsers);
|
||||||
|
const [, setLoading] = useState(true);
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [planFilter, setPlanFilter] = useState<string>('all');
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||||
|
const [selectedUser, setSelectedUser] = useState<User | null>(null);
|
||||||
|
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
|
||||||
|
const [bulkLoading, setBulkLoading] = useState(false);
|
||||||
|
|
||||||
|
// Invite dialog state
|
||||||
|
const [showInvite, setShowInvite] = useState(false);
|
||||||
|
const [invitePlan, setInvitePlan] = useState<string>('pro');
|
||||||
|
const [inviteDescription, setInviteDescription] = useState('');
|
||||||
|
const [inviteCreating, setInviteCreating] = useState(false);
|
||||||
|
const [inviteLink, setInviteLink] = useState<string | null>(null);
|
||||||
|
const [inviteCopied, setInviteCopied] = useState(false);
|
||||||
|
|
||||||
|
const toggleSelect = (id: string) => {
|
||||||
|
setSelectedIds(prev => {
|
||||||
|
const next = new Set(prev);
|
||||||
|
if (next.has(id)) next.delete(id);
|
||||||
|
else next.add(id);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleSelectAll = () => {
|
||||||
|
if (selectedIds.size === filtered.length) {
|
||||||
|
setSelectedIds(new Set());
|
||||||
|
} else {
|
||||||
|
setSelectedIds(new Set(filtered.map(u => u.id)));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInvite = async () => {
|
||||||
|
setInviteCreating(true);
|
||||||
|
const { data, error } = await apiCreateInvitation({
|
||||||
|
description: inviteDescription || 'Invited from Users page',
|
||||||
|
grantPlan: invitePlan,
|
||||||
|
maxUses: 1,
|
||||||
|
});
|
||||||
|
setInviteCreating(false);
|
||||||
|
if (data) {
|
||||||
|
const userDashboardUrl = process.env.NEXT_PUBLIC_USER_DASHBOARD_URL || 'http://localhost:3002';
|
||||||
|
setInviteLink(`${userDashboardUrl}/login?ref=${encodeURIComponent(data.code)}`);
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Failed to create invite', description: error || 'Unknown error', variant: 'error' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyInviteLink = () => {
|
||||||
|
if (!inviteLink) return;
|
||||||
|
navigator.clipboard.writeText(inviteLink);
|
||||||
|
setInviteCopied(true);
|
||||||
|
setTimeout(() => setInviteCopied(false), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChangePlan = async (userId: string, newPlan: string) => {
|
||||||
|
const { error } = await apiUpdateUser(userId, { plan: newPlan });
|
||||||
|
if (!error) {
|
||||||
|
setUsers(prev =>
|
||||||
|
prev.map(u => (u.id === userId ? { ...u, plan: newPlan as User['plan'] } : u))
|
||||||
|
);
|
||||||
|
toast({ title: `Plan changed to ${newPlan}`, variant: 'success' });
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Failed to change plan', description: error, variant: 'error' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggleSuspend = async (user: User) => {
|
||||||
|
const newStatus = user.status === 'suspended' ? 'active' : 'suspended';
|
||||||
|
const { error } = await apiUpdateUser(user.id, { status: newStatus });
|
||||||
|
if (!error) {
|
||||||
|
setUsers(prev =>
|
||||||
|
prev.map(u => (u.id === user.id ? { ...u, status: newStatus as User['status'] } : u))
|
||||||
|
);
|
||||||
|
toast({ title: `User ${newStatus === 'suspended' ? 'suspended' : 'activated'}`, variant: newStatus === 'suspended' ? 'warning' : 'success' });
|
||||||
|
} else {
|
||||||
|
toast({ title: 'Action failed', description: error, variant: 'error' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const bulkAction = async (action: 'activate' | 'suspend' | 'delete') => {
|
||||||
|
if (selectedIds.size === 0) return;
|
||||||
|
setBulkLoading(true);
|
||||||
|
try {
|
||||||
|
for (const userId of selectedIds) {
|
||||||
|
if (action === 'delete') {
|
||||||
|
await apiDeleteUser(userId);
|
||||||
|
} else {
|
||||||
|
const status = action === 'activate' ? 'active' : 'suspended';
|
||||||
|
await apiUpdateUser(userId, { status });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update local state
|
||||||
|
setUsers(prev =>
|
||||||
|
action === 'delete'
|
||||||
|
? prev.filter(u => !selectedIds.has(u.id))
|
||||||
|
: prev.map(u =>
|
||||||
|
selectedIds.has(u.id)
|
||||||
|
? { ...u, status: action === 'activate' ? 'active' : 'suspended' }
|
||||||
|
: u
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setSelectedIds(new Set());
|
||||||
|
const count = selectedIds.size;
|
||||||
|
toast({
|
||||||
|
title:
|
||||||
|
action === 'delete'
|
||||||
|
? `${count} user${count !== 1 ? 's' : ''} deleted`
|
||||||
|
: `${count} user${count !== 1 ? 's' : ''} ${action === 'activate' ? 'activated' : 'suspended'}`,
|
||||||
|
variant: action === 'delete' ? 'warning' : 'success',
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Bulk action failed:', e);
|
||||||
|
toast({ title: 'Bulk action failed', description: String(e), variant: 'error' });
|
||||||
|
} finally {
|
||||||
|
setBulkLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
apiListUsers()
|
||||||
|
.then(({ data }) => {
|
||||||
|
if (data?.users?.length) {
|
||||||
|
setUsers(data.users.map(apiUserToUser));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => setLoading(false));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const filtered = users.filter(u => {
|
||||||
|
const matchesSearch =
|
||||||
|
u.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||||
|
u.email.toLowerCase().includes(search.toLowerCase());
|
||||||
|
const matchesPlan = planFilter === 'all' || u.plan === planFilter;
|
||||||
|
const matchesStatus = statusFilter === 'all' || u.status === statusFilter;
|
||||||
|
return matchesSearch && matchesPlan && matchesStatus;
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">Users</h1>
|
||||||
|
<p className="text-muted-foreground">Manage platform users and their subscriptions</p>
|
||||||
|
</div>
|
||||||
|
<Button onClick={() => {
|
||||||
|
setShowInvite(true);
|
||||||
|
setInviteLink(null);
|
||||||
|
setInviteDescription('');
|
||||||
|
setInvitePlan('pro');
|
||||||
|
setInviteCopied(false);
|
||||||
|
}}>
|
||||||
|
<UserPlus className="mr-2 h-4 w-4" />
|
||||||
|
Invite User
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bulk Actions Bar */}
|
||||||
|
{selectedIds.size > 0 && (
|
||||||
|
<Card className="border-primary/50 bg-primary/5">
|
||||||
|
<CardContent className="pt-4 pb-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-sm font-medium">
|
||||||
|
{selectedIds.size} user{selectedIds.size !== 1 ? 's' : ''} selected
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => bulkAction('activate')}
|
||||||
|
disabled={bulkLoading}
|
||||||
|
>
|
||||||
|
<CheckCircle2 className="mr-1 h-3.5 w-3.5 text-emerald-600" />
|
||||||
|
Activate
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => bulkAction('suspend')}
|
||||||
|
disabled={bulkLoading}
|
||||||
|
>
|
||||||
|
<Ban className="mr-1 h-3.5 w-3.5 text-amber-600" />
|
||||||
|
Suspend
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="text-red-600 hover:text-red-700"
|
||||||
|
onClick={() => {
|
||||||
|
if (confirm(`Delete ${selectedIds.size} user(s)? This cannot be undone.`)) {
|
||||||
|
bulkAction('delete');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={bulkLoading}
|
||||||
|
>
|
||||||
|
<Trash2 className="mr-1 h-3.5 w-3.5" />
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="ghost" onClick={() => setSelectedIds(new Set())}>
|
||||||
|
Clear
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<Card>
|
||||||
|
<CardContent className="pt-6">
|
||||||
|
<div className="flex flex-wrap gap-4">
|
||||||
|
<div className="relative flex-1 min-w-[200px]">
|
||||||
|
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||||
|
<Input
|
||||||
|
placeholder="Search by name or email..."
|
||||||
|
value={search}
|
||||||
|
onChange={e => setSearch(e.target.value)}
|
||||||
|
className="pl-9"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Select value={planFilter} onValueChange={setPlanFilter}>
|
||||||
|
<SelectTrigger className="w-[150px]">
|
||||||
|
<SelectValue placeholder="Plan" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Plans</SelectItem>
|
||||||
|
<SelectItem value="free">Free</SelectItem>
|
||||||
|
<SelectItem value="pro">Pro</SelectItem>
|
||||||
|
<SelectItem value="enterprise">Enterprise</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||||
|
<SelectTrigger className="w-[150px]">
|
||||||
|
<SelectValue placeholder="Status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">All Status</SelectItem>
|
||||||
|
<SelectItem value="active">Active</SelectItem>
|
||||||
|
<SelectItem value="inactive">Inactive</SelectItem>
|
||||||
|
<SelectItem value="suspended">Suspended</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Users Table */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-base">
|
||||||
|
{filtered.length} user{filtered.length !== 1 ? 's' : ''}
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Table>
|
||||||
|
<TableHeader>
|
||||||
|
<TableRow>
|
||||||
|
<TableHead className="w-[40px]">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="rounded border-gray-300"
|
||||||
|
checked={filtered.length > 0 && selectedIds.size === filtered.length}
|
||||||
|
onChange={toggleSelectAll}
|
||||||
|
/>
|
||||||
|
</TableHead>
|
||||||
|
<TableHead>User</TableHead>
|
||||||
|
<TableHead>Plan</TableHead>
|
||||||
|
<TableHead>Status</TableHead>
|
||||||
|
<TableHead className="text-right">Tokens Used</TableHead>
|
||||||
|
<TableHead className="text-right">Requests</TableHead>
|
||||||
|
<TableHead className="text-right">Monthly Spend</TableHead>
|
||||||
|
<TableHead>Last Active</TableHead>
|
||||||
|
<TableHead className="w-[50px]" />
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{filtered.map(user => {
|
||||||
|
const status = statusConfig[user.status];
|
||||||
|
const plan = planConfig[user.plan];
|
||||||
|
return (
|
||||||
|
<TableRow
|
||||||
|
key={user.id}
|
||||||
|
className={selectedIds.has(user.id) ? 'bg-primary/5' : ''}
|
||||||
|
>
|
||||||
|
<TableCell>
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
className="rounded border-gray-300"
|
||||||
|
checked={selectedIds.has(user.id)}
|
||||||
|
onChange={() => toggleSelect(user.id)}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-xs font-bold">
|
||||||
|
{user.name
|
||||||
|
.split(' ')
|
||||||
|
.map(n => n[0])
|
||||||
|
.join('')}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">{user.name}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">{user.email}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="secondary" className={plan.color}>
|
||||||
|
{plan.label}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Badge variant="secondary" className={status.color}>
|
||||||
|
<status.icon className="mr-1 h-3 w-3" />
|
||||||
|
{status.label}
|
||||||
|
</Badge>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono text-sm">
|
||||||
|
{formatNumber(user.totalTokensUsed)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono text-sm">
|
||||||
|
{formatNumber(user.totalRequests)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right font-mono text-sm">
|
||||||
|
{formatCurrency(user.monthlySpend)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-sm text-muted-foreground">
|
||||||
|
{formatDate(user.lastActive)}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||||||
|
<MoreHorizontal className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end">
|
||||||
|
<DropdownMenuItem onClick={() => setSelectedUser(user)}>
|
||||||
|
<Eye className="mr-2 h-4 w-4" />
|
||||||
|
Quick View
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem onClick={() => router.push(`/users/${user.id}`)}>
|
||||||
|
<Eye className="mr-2 h-4 w-4" />
|
||||||
|
View as User
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => handleChangePlan(user.id, user.plan === 'free' ? 'pro' : user.plan === 'pro' ? 'enterprise' : 'free')}
|
||||||
|
>
|
||||||
|
Cycle Plan ({user.plan} → {user.plan === 'free' ? 'pro' : user.plan === 'pro' ? 'enterprise' : 'free'})
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem
|
||||||
|
className="text-red-600"
|
||||||
|
onClick={() => handleToggleSuspend(user)}
|
||||||
|
>
|
||||||
|
<Ban className="mr-2 h-4 w-4" />
|
||||||
|
{user.status === 'suspended' ? 'Unsuspend' : 'Suspend'}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* User Detail Dialog */}
|
||||||
|
<Dialog open={!!selectedUser} onOpenChange={() => setSelectedUser(null)}>
|
||||||
|
<DialogContent className="max-w-lg">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{selectedUser?.name}</DialogTitle>
|
||||||
|
<DialogDescription>{selectedUser?.email}</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
{selectedUser && (
|
||||||
|
<div className="space-y-4 pt-2">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-xs text-muted-foreground">Plan</p>
|
||||||
|
<Badge variant="secondary" className={planConfig[selectedUser.plan].color}>
|
||||||
|
{planConfig[selectedUser.plan].label}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-xs text-muted-foreground">Status</p>
|
||||||
|
<Badge variant="secondary" className={statusConfig[selectedUser.status].color}>
|
||||||
|
{statusConfig[selectedUser.status].label}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-xs text-muted-foreground">Member Since</p>
|
||||||
|
<p className="text-sm font-medium">{formatDate(selectedUser.createdAt)}</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-xs text-muted-foreground">Last Active</p>
|
||||||
|
<p className="text-sm font-medium">{formatDate(selectedUser.lastActive)}</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-xs text-muted-foreground">Total Tokens Used</p>
|
||||||
|
<p className="text-sm font-medium font-mono">
|
||||||
|
{formatNumber(selectedUser.totalTokensUsed)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-xs text-muted-foreground">Total Requests</p>
|
||||||
|
<p className="text-sm font-medium font-mono">
|
||||||
|
{formatNumber(selectedUser.totalRequests)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-xs text-muted-foreground">Monthly Spend</p>
|
||||||
|
<p className="text-sm font-medium font-mono">
|
||||||
|
{formatCurrency(selectedUser.monthlySpend)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-xs text-muted-foreground">User ID</p>
|
||||||
|
<p className="text-sm font-mono text-muted-foreground">{selectedUser.id}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
{/* Invite User Dialog */}
|
||||||
|
<Dialog open={showInvite} onOpenChange={setShowInvite}>
|
||||||
|
<DialogContent className="max-w-md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Invite User</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
Generate a single-use invite link to share with a new user.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{!inviteLink ? (
|
||||||
|
<>
|
||||||
|
<div className="space-y-4 py-2">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Grant Plan</Label>
|
||||||
|
<Select value={invitePlan} onValueChange={setInvitePlan}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="pro">Pro</SelectItem>
|
||||||
|
<SelectItem value="enterprise">Enterprise</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Description (optional)</Label>
|
||||||
|
<Input
|
||||||
|
placeholder="e.g. Invite for John Doe"
|
||||||
|
value={inviteDescription}
|
||||||
|
onChange={e => setInviteDescription(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowInvite(false)}>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleInvite} disabled={inviteCreating}>
|
||||||
|
{inviteCreating ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
Creating...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Link className="mr-2 h-4 w-4" />
|
||||||
|
Generate Link
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4 py-2">
|
||||||
|
<div className="rounded-lg border bg-muted/50 p-4">
|
||||||
|
<p className="text-xs text-muted-foreground mb-2">
|
||||||
|
Share this link with the user to register:
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<code className="flex-1 text-sm font-mono break-all select-all">
|
||||||
|
{inviteLink}
|
||||||
|
</code>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="shrink-0"
|
||||||
|
onClick={copyInviteLink}
|
||||||
|
>
|
||||||
|
<Copy className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{inviteCopied && (
|
||||||
|
<p className="text-xs text-emerald-600 mt-1">Copied to clipboard!</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
This is a single-use invite that grants <strong>{invitePlan}</strong> plan access.
|
||||||
|
</p>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => setShowInvite(false)}>
|
||||||
|
Done
|
||||||
|
</Button>
|
||||||
|
<Button onClick={copyInviteLink}>
|
||||||
|
<Copy className="mr-2 h-4 w-4" />
|
||||||
|
{inviteCopied ? 'Copied!' : 'Copy Link'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
145
dashboards/admin-web/src/app/api/analytics/retention/route.ts
Normal file
145
dashboards/admin-web/src/app/api/analytics/retention/route.ts
Normal file
@ -0,0 +1,145 @@
|
|||||||
|
/**
|
||||||
|
* GET /api/analytics/retention — Cohort retention analysis.
|
||||||
|
*
|
||||||
|
* Groups users by signup week, then checks how many were active at
|
||||||
|
* 7, 14, and 30 days after signup. Returns a table suitable for a
|
||||||
|
* retention heatmap.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { getCurrentUser } from '@/lib/auth-server';
|
||||||
|
import { getContainer } from '@/lib/cosmos';
|
||||||
|
import { PRODUCT_ID } from '@/lib/product-config';
|
||||||
|
interface CohortRow {
|
||||||
|
cohortWeek: string; // e.g. "2026-W05"
|
||||||
|
cohortStart: string; // ISO date of Monday
|
||||||
|
signups: number;
|
||||||
|
retained7d: number;
|
||||||
|
retained14d: number;
|
||||||
|
retained30d: number;
|
||||||
|
rate7d: number; // 0-100
|
||||||
|
rate14d: number;
|
||||||
|
rate30d: number;
|
||||||
|
}
|
||||||
|
function getWeekLabel(date: Date): string {
|
||||||
|
const d = new Date(date);
|
||||||
|
d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
|
||||||
|
const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
|
||||||
|
const weekNo = Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
|
||||||
|
return `${d.getUTCFullYear()}-W${String(weekNo).padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
function getMondayOfWeek(date: Date): string {
|
||||||
|
const d = new Date(date);
|
||||||
|
const day = d.getUTCDay() || 7;
|
||||||
|
d.setUTCDate(d.getUTCDate() - day + 1);
|
||||||
|
return d.toISOString().slice(0, 10);
|
||||||
|
}
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
}
|
||||||
|
const url = new URL(req.url);
|
||||||
|
const weeks = parseInt(url.searchParams.get('weeks') ?? '8', 10);
|
||||||
|
// Get users created in the last N weeks
|
||||||
|
const sinceDate = new Date(Date.now() - weeks * 7 * 86400000).toISOString().slice(0, 10);
|
||||||
|
const usersContainer = getContainer('users');
|
||||||
|
const { resources: users } = await usersContainer.items
|
||||||
|
.query<{ id: string; createdAt: string }>({
|
||||||
|
query:
|
||||||
|
'SELECT c.id, c.createdAt FROM c ' +
|
||||||
|
'WHERE c.productId = @pid AND c.createdAt >= @since ' +
|
||||||
|
'ORDER BY c.createdAt ASC',
|
||||||
|
parameters: [
|
||||||
|
{ name: '@pid', value: PRODUCT_ID },
|
||||||
|
{ name: '@since', value: sinceDate },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
.fetchAll();
|
||||||
|
if (users.length === 0) {
|
||||||
|
return NextResponse.json({ cohorts: [], totalUsers: 0 });
|
||||||
|
}
|
||||||
|
// Group users by signup week
|
||||||
|
const cohortMap = new Map<string, { start: string; userIds: string[] }>();
|
||||||
|
for (const u of users) {
|
||||||
|
const d = new Date(u.createdAt);
|
||||||
|
const week = getWeekLabel(d);
|
||||||
|
const monday = getMondayOfWeek(d);
|
||||||
|
if (!cohortMap.has(week)) {
|
||||||
|
cohortMap.set(week, { start: monday, userIds: [] });
|
||||||
|
}
|
||||||
|
cohortMap.get(week)!.userIds.push(u.id);
|
||||||
|
}
|
||||||
|
// Get all usage records for these users
|
||||||
|
const usageContainer = getContainer('usage_daily');
|
||||||
|
const { resources: usageRecords } = await usageContainer.items
|
||||||
|
.query<{ userId: string; date: string }>({
|
||||||
|
query: 'SELECT c.userId, c.date FROM c ' + 'WHERE c.productId = @pid AND c.date >= @since',
|
||||||
|
parameters: [
|
||||||
|
{ name: '@pid', value: PRODUCT_ID },
|
||||||
|
{ name: '@since', value: sinceDate },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
.fetchAll();
|
||||||
|
// Build a set of (userId, date) for quick lookup
|
||||||
|
const userActiveDates = new Map<string, Set<string>>();
|
||||||
|
for (const r of usageRecords) {
|
||||||
|
if (!userActiveDates.has(r.userId)) {
|
||||||
|
userActiveDates.set(r.userId, new Set());
|
||||||
|
}
|
||||||
|
userActiveDates.get(r.userId)!.add(r.date);
|
||||||
|
}
|
||||||
|
// Calculate retention for each cohort
|
||||||
|
const cohorts: CohortRow[] = [];
|
||||||
|
const now = Date.now();
|
||||||
|
for (const [week, { start, userIds }] of cohortMap) {
|
||||||
|
const cohortStart = new Date(start).getTime();
|
||||||
|
const signups = userIds.length;
|
||||||
|
let retained7d = 0;
|
||||||
|
let retained14d = 0;
|
||||||
|
let retained30d = 0;
|
||||||
|
for (const uid of userIds) {
|
||||||
|
const dates = userActiveDates.get(uid);
|
||||||
|
if (!dates) continue;
|
||||||
|
// Check if user was active in the window [start+Nd, start+Nd+7d)
|
||||||
|
const hasActivityInRange = (offsetDays: number) => {
|
||||||
|
const rangeStart = cohortStart + offsetDays * 86400000;
|
||||||
|
const rangeEnd = rangeStart + 7 * 86400000;
|
||||||
|
if (rangeStart > now) return false; // Window hasn't arrived yet
|
||||||
|
for (const d of dates) {
|
||||||
|
const ts = new Date(d).getTime();
|
||||||
|
if (ts >= rangeStart && ts < rangeEnd) return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
if (hasActivityInRange(7)) retained7d++;
|
||||||
|
if (hasActivityInRange(14)) retained14d++;
|
||||||
|
if (hasActivityInRange(30)) retained30d++;
|
||||||
|
}
|
||||||
|
const day7elapsed = now - cohortStart >= 14 * 86400000;
|
||||||
|
const day14elapsed = now - cohortStart >= 21 * 86400000;
|
||||||
|
const day30elapsed = now - cohortStart >= 37 * 86400000;
|
||||||
|
cohorts.push({
|
||||||
|
cohortWeek: week,
|
||||||
|
cohortStart: start,
|
||||||
|
signups,
|
||||||
|
retained7d,
|
||||||
|
retained14d,
|
||||||
|
retained30d,
|
||||||
|
rate7d: day7elapsed ? Math.round((retained7d / signups) * 100) : -1,
|
||||||
|
rate14d: day14elapsed ? Math.round((retained14d / signups) * 100) : -1,
|
||||||
|
rate30d: day30elapsed ? Math.round((retained30d / signups) * 100) : -1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return NextResponse.json({
|
||||||
|
cohorts,
|
||||||
|
totalUsers: users.length,
|
||||||
|
weeksAnalyzed: weeks,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
logError('Retention analysis error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
170
dashboards/admin-web/src/app/api/analytics/revenue/route.ts
Normal file
170
dashboards/admin-web/src/app/api/analytics/revenue/route.ts
Normal file
@ -0,0 +1,170 @@
|
|||||||
|
/**
|
||||||
|
* GET /api/analytics/revenue — Revenue analytics for admin dashboard.
|
||||||
|
*
|
||||||
|
* Queries subscriptions and payments containers to compute:
|
||||||
|
* MRR, ARR, churn rate, LTV, ARPU, and monthly revenue breakdown.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { getCurrentUser } from '@/lib/auth-server';
|
||||||
|
import { getContainer } from '@/lib/cosmos';
|
||||||
|
import { PRODUCT_ID } from '@/lib/product-config';
|
||||||
|
|
||||||
|
interface MonthlyRevenue {
|
||||||
|
month: string; // YYYY-MM
|
||||||
|
revenue: number;
|
||||||
|
subscriptions: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RevenueResponse {
|
||||||
|
mrr: number;
|
||||||
|
arr: number;
|
||||||
|
mrrChange: number; // percentage vs prior month
|
||||||
|
totalRevenue: number;
|
||||||
|
revenueByMonth: MonthlyRevenue[];
|
||||||
|
churnRate: number;
|
||||||
|
churnCount: number;
|
||||||
|
ltv: number;
|
||||||
|
arpu: number;
|
||||||
|
newSubscriptions: number;
|
||||||
|
canceledSubscriptions: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const url = new URL(req.url);
|
||||||
|
const months = parseInt(url.searchParams.get('months') ?? '6', 10);
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
const sinceDate = new Date(now.getFullYear(), now.getMonth() - months, 1).toISOString();
|
||||||
|
|
||||||
|
// ---- Active subscriptions for MRR ----
|
||||||
|
const subsContainer = getContainer('subscriptions');
|
||||||
|
const { resources: activeSubs } = await subsContainer.items
|
||||||
|
.query<{ id: string; plan: string; price: number; status: string; createdAt: string }>({
|
||||||
|
query:
|
||||||
|
'SELECT c.id, c.plan, c.price, c.status, c.createdAt FROM c ' +
|
||||||
|
"WHERE c.productId = @pid AND c.status = 'active'",
|
||||||
|
parameters: [{ name: '@pid', value: PRODUCT_ID }],
|
||||||
|
})
|
||||||
|
.fetchAll();
|
||||||
|
|
||||||
|
// ---- Canceled subscriptions (last N months) ----
|
||||||
|
const { resources: canceledSubs } = await subsContainer.items
|
||||||
|
.query<{ id: string; canceledAt: string }>({
|
||||||
|
query:
|
||||||
|
'SELECT c.id, c.canceledAt FROM c ' +
|
||||||
|
"WHERE c.productId = @pid AND c.status = 'canceled' " +
|
||||||
|
'AND c.canceledAt >= @since',
|
||||||
|
parameters: [
|
||||||
|
{ name: '@pid', value: PRODUCT_ID },
|
||||||
|
{ name: '@since', value: sinceDate },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
.fetchAll();
|
||||||
|
|
||||||
|
// ---- New subscriptions (last N months) ----
|
||||||
|
const { resources: newSubs } = await subsContainer.items
|
||||||
|
.query<{ id: string; createdAt: string }>({
|
||||||
|
query:
|
||||||
|
'SELECT c.id, c.createdAt FROM c ' + 'WHERE c.productId = @pid AND c.createdAt >= @since',
|
||||||
|
parameters: [
|
||||||
|
{ name: '@pid', value: PRODUCT_ID },
|
||||||
|
{ name: '@since', value: sinceDate },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
.fetchAll();
|
||||||
|
|
||||||
|
// ---- Payments (last N months) ----
|
||||||
|
const paymentsContainer = getContainer('payments');
|
||||||
|
const { resources: payments } = await paymentsContainer.items
|
||||||
|
.query<{ amount: number; paidAt: string }>({
|
||||||
|
query:
|
||||||
|
'SELECT c.amount, c.paidAt FROM c ' +
|
||||||
|
"WHERE c.productId = @pid AND c.status = 'succeeded' " +
|
||||||
|
'AND c.paidAt >= @since',
|
||||||
|
parameters: [
|
||||||
|
{ name: '@pid', value: PRODUCT_ID },
|
||||||
|
{ name: '@since', value: sinceDate },
|
||||||
|
],
|
||||||
|
})
|
||||||
|
.fetchAll();
|
||||||
|
|
||||||
|
// ---- Compute metrics ----
|
||||||
|
const mrr = activeSubs.reduce((sum, s) => sum + (s.price ?? 0), 0);
|
||||||
|
const arr = mrr * 12;
|
||||||
|
|
||||||
|
const totalRevenue = payments.reduce((sum, p) => sum + (p.amount ?? 0), 0);
|
||||||
|
|
||||||
|
// Revenue by month
|
||||||
|
const monthBuckets: Record<string, { revenue: number; subscriptions: number }> = {};
|
||||||
|
for (let i = 0; i < months; i++) {
|
||||||
|
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
|
||||||
|
const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
|
||||||
|
monthBuckets[key] = { revenue: 0, subscriptions: 0 };
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const p of payments) {
|
||||||
|
const key = (p.paidAt ?? '').slice(0, 7);
|
||||||
|
if (monthBuckets[key]) {
|
||||||
|
monthBuckets[key].revenue += p.amount ?? 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const s of newSubs) {
|
||||||
|
const key = (s.createdAt ?? '').slice(0, 7);
|
||||||
|
if (monthBuckets[key]) {
|
||||||
|
monthBuckets[key].subscriptions += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const revenueByMonth: MonthlyRevenue[] = Object.entries(monthBuckets)
|
||||||
|
.sort(([a], [b]) => a.localeCompare(b))
|
||||||
|
.map(([month, data]) => ({ month, ...data }));
|
||||||
|
|
||||||
|
// MRR change vs prior month
|
||||||
|
const currentMonth = revenueByMonth[revenueByMonth.length - 1];
|
||||||
|
const priorMonth = revenueByMonth[revenueByMonth.length - 2];
|
||||||
|
const mrrChange =
|
||||||
|
priorMonth && priorMonth.revenue > 0
|
||||||
|
? ((currentMonth.revenue - priorMonth.revenue) / priorMonth.revenue) * 100
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
// Churn
|
||||||
|
const totalSubsStart = activeSubs.length + canceledSubs.length;
|
||||||
|
const churnRate = totalSubsStart > 0 ? (canceledSubs.length / totalSubsStart) * 100 : 0;
|
||||||
|
|
||||||
|
// LTV & ARPU
|
||||||
|
const activeCount = activeSubs.length || 1;
|
||||||
|
const arpu = mrr / activeCount;
|
||||||
|
const monthlyChurn = churnRate / 100 || 0.01; // avoid division by zero
|
||||||
|
const ltv = arpu / monthlyChurn;
|
||||||
|
|
||||||
|
const response: RevenueResponse = {
|
||||||
|
mrr: Math.round(mrr * 100) / 100,
|
||||||
|
arr: Math.round(arr * 100) / 100,
|
||||||
|
mrrChange: Math.round(mrrChange * 10) / 10,
|
||||||
|
totalRevenue: Math.round(totalRevenue * 100) / 100,
|
||||||
|
revenueByMonth,
|
||||||
|
churnRate: Math.round(churnRate * 10) / 10,
|
||||||
|
churnCount: canceledSubs.length,
|
||||||
|
ltv: Math.round(ltv * 100) / 100,
|
||||||
|
arpu: Math.round(arpu * 100) / 100,
|
||||||
|
newSubscriptions: newSubs.length,
|
||||||
|
canceledSubscriptions: canceledSubs.length,
|
||||||
|
};
|
||||||
|
|
||||||
|
return NextResponse.json(response);
|
||||||
|
} catch (err) {
|
||||||
|
const message = err instanceof Error ? err.message : 'Unknown error';
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Failed to compute revenue analytics', detail: message },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
28
dashboards/admin-web/src/app/api/audit/route.ts
Normal file
28
dashboards/admin-web/src/app/api/audit/route.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { getCurrentUser } from '@/lib/auth-server';
|
||||||
|
import * as platformClient from '@/lib/platform-client';
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
}
|
||||||
|
const url = new URL(req.url);
|
||||||
|
const category = url.searchParams.get('category') ?? undefined;
|
||||||
|
const limit = parseInt(url.searchParams.get('limit') ?? '100', 10);
|
||||||
|
const offset = parseInt(url.searchParams.get('offset') ?? '0', 10);
|
||||||
|
const summary = url.searchParams.get('summary') === 'true';
|
||||||
|
if (summary) {
|
||||||
|
const { stats } = await platformClient.getAuditStats(90);
|
||||||
|
const total = Object.values(stats).reduce((s, n) => s + n, 0);
|
||||||
|
const failedLogins = stats['login_failed'] ?? 0;
|
||||||
|
return NextResponse.json({ total, failedLogins });
|
||||||
|
}
|
||||||
|
const { records, count } = await platformClient.queryAudit({ category, limit, offset });
|
||||||
|
return NextResponse.json({ entries: records, total: count });
|
||||||
|
} catch (error) {
|
||||||
|
logError('Audit error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
49
dashboards/admin-web/src/app/api/auth/login/route.ts
Normal file
49
dashboards/admin-web/src/app/api/auth/login/route.ts
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { loginViaService, logAudit } from '@/lib/platform-client';
|
||||||
|
import { PRODUCT_ID } from '@/lib/product-config';
|
||||||
|
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const { email, password } = await req.json();
|
||||||
|
if (!email || !password) {
|
||||||
|
return NextResponse.json({ error: 'Email and password are required' }, { status: 400 });
|
||||||
|
}
|
||||||
|
const ip = req.headers.get('x-forwarded-for') ?? req.headers.get('x-real-ip') ?? '';
|
||||||
|
const userAgent = req.headers.get('user-agent') ?? '';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await loginViaService(email, password, PRODUCT_ID);
|
||||||
|
|
||||||
|
await logAudit({
|
||||||
|
userId: result.user.id,
|
||||||
|
action: 'login_success',
|
||||||
|
category: 'auth',
|
||||||
|
details: { ip, userAgent, email: result.user.email },
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
accessToken: result.accessToken,
|
||||||
|
refreshToken: result.refreshToken,
|
||||||
|
user: {
|
||||||
|
id: result.user.id,
|
||||||
|
email: result.user.email,
|
||||||
|
name: result.user.displayName,
|
||||||
|
role: result.user.role,
|
||||||
|
plan: result.user.plan,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
await logAudit({
|
||||||
|
userId: email,
|
||||||
|
action: 'login_failed',
|
||||||
|
category: 'auth',
|
||||||
|
details: { ip, userAgent },
|
||||||
|
});
|
||||||
|
return NextResponse.json({ error: 'Invalid credentials' }, { status: 401 });
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
logError('Login error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
23
dashboards/admin-web/src/app/api/auth/me/route.ts
Normal file
23
dashboards/admin-web/src/app/api/auth/me/route.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { getMeViaService } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const token = req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
|
||||||
|
if (!token) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
}
|
||||||
|
const user = await getMeViaService(token);
|
||||||
|
return NextResponse.json({
|
||||||
|
id: user.id,
|
||||||
|
email: user.email,
|
||||||
|
name: user.displayName,
|
||||||
|
role: user.role,
|
||||||
|
plan: user.plan,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
logError('Auth/me error', error);
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
}
|
||||||
|
}
|
||||||
36
dashboards/admin-web/src/app/api/dashboard/stats/route.ts
Normal file
36
dashboards/admin-web/src/app/api/dashboard/stats/route.ts
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { requireAdmin } from '@/lib/auth-server';
|
||||||
|
import { countActiveTokens } from '@/lib/repositories/tokens';
|
||||||
|
import * as billingClient from '@/lib/billing-client';
|
||||||
|
import * as platformClient from '@/lib/platform-client';
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
const token = req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
|
||||||
|
const [countsResult, activeTokens, usageRes, auditStatsRes] = await Promise.all([
|
||||||
|
platformClient.getUserCounts(token),
|
||||||
|
countActiveTokens(),
|
||||||
|
billingClient.getUsageSummary(30),
|
||||||
|
platformClient.getAuditStats(90),
|
||||||
|
]);
|
||||||
|
const auditTotal = Object.values(auditStatsRes.stats).reduce((s, n) => s + n, 0);
|
||||||
|
const failedLogins = auditStatsRes.stats['login_failed'] ?? 0;
|
||||||
|
return NextResponse.json({
|
||||||
|
users: { total: countsResult.total, byPlan: countsResult.byPlan },
|
||||||
|
tokens: { active: activeTokens },
|
||||||
|
usage: {
|
||||||
|
totalWords: usageRes.totalWords ?? 0,
|
||||||
|
totalDictations: usageRes.totalDictations ?? 0,
|
||||||
|
totalCost: usageRes.totalCost ?? 0,
|
||||||
|
},
|
||||||
|
audit: { total: auditTotal, failedLogins },
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
logError('Dashboard stats error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
19
dashboards/admin-web/src/app/api/docs/[...slug]/route.ts
Normal file
19
dashboards/admin-web/src/app/api/docs/[...slug]/route.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
/**
|
||||||
|
* GET /api/docs/[...slug] — Read a specific doc by its slug path.
|
||||||
|
* Example: GET /api/docs/docs/STRIPE_SETUP_GUIDE
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { readDoc } from '@/lib/docs';
|
||||||
|
|
||||||
|
export async function GET(_req: NextRequest, { params }: { params: Promise<{ slug: string[] }> }) {
|
||||||
|
const { slug } = await params;
|
||||||
|
const slugPath = slug.join('/');
|
||||||
|
const result = readDoc(slugPath);
|
||||||
|
|
||||||
|
if (!result) {
|
||||||
|
return NextResponse.json({ error: 'Document not found' }, { status: 404 });
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.json(result);
|
||||||
|
}
|
||||||
76
dashboards/admin-web/src/app/api/docs/chat/route.ts
Normal file
76
dashboards/admin-web/src/app/api/docs/chat/route.ts
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
/**
|
||||||
|
* POST /api/docs/chat — RAG chatbot powered by Perplexity AI.
|
||||||
|
*
|
||||||
|
* Sends all project docs as context + user question to Perplexity,
|
||||||
|
* returns a streaming or complete response.
|
||||||
|
*
|
||||||
|
* Body: { question: string, history?: Array<{ role: string, content: string }> }
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { getAllDocsContent } from '@/lib/docs';
|
||||||
|
const PERPLEXITY_API_KEY = process.env.PERPLEXITY_API_KEY;
|
||||||
|
const PERPLEXITY_URL = 'https://api.perplexity.ai/chat/completions';
|
||||||
|
const SYSTEM_PROMPT = `You are Platform Admin Assistant — an expert on the platform project.
|
||||||
|
You answer questions about the project's architecture, devops runbooks, deployment,
|
||||||
|
billing, Stripe setup, mobile apps, desktop app, microservices, testing, and any
|
||||||
|
other topic covered in the project documentation.
|
||||||
|
You have access to ALL project documentation below. Use it to give accurate,
|
||||||
|
specific answers. Reference document names when citing information.
|
||||||
|
If the docs don't contain the answer, say so clearly.
|
||||||
|
Be concise, use markdown formatting, and include code snippets when helpful.
|
||||||
|
--- PROJECT DOCUMENTATION ---
|
||||||
|
`;
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
if (!PERPLEXITY_API_KEY) {
|
||||||
|
return NextResponse.json({ error: 'PERPLEXITY_API_KEY not configured' }, { status: 500 });
|
||||||
|
}
|
||||||
|
const body = await req.json();
|
||||||
|
const { question, history = [] } = body;
|
||||||
|
if (!question || typeof question !== 'string') {
|
||||||
|
return NextResponse.json({ error: "Missing 'question' field" }, { status: 400 });
|
||||||
|
}
|
||||||
|
// Build context from all docs
|
||||||
|
const docsContext = getAllDocsContent(3000);
|
||||||
|
const systemMessage = SYSTEM_PROMPT + docsContext;
|
||||||
|
// Build messages array
|
||||||
|
const messages = [
|
||||||
|
{ role: 'system', content: systemMessage },
|
||||||
|
...history.slice(-6), // Keep last 6 messages for context window
|
||||||
|
{ role: 'user', content: question },
|
||||||
|
];
|
||||||
|
try {
|
||||||
|
const response = await fetch(PERPLEXITY_URL, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
Authorization: `Bearer ${PERPLEXITY_API_KEY}`,
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
model: 'sonar',
|
||||||
|
messages,
|
||||||
|
max_tokens: 2048,
|
||||||
|
temperature: 0.2,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
const err = await response.text();
|
||||||
|
logError('Perplexity API error', err, { status: response.status });
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: `Perplexity API error: ${response.status}` },
|
||||||
|
{ status: 502 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
const answer = data.choices?.[0]?.message?.content ?? 'No response generated.';
|
||||||
|
return NextResponse.json({
|
||||||
|
answer,
|
||||||
|
model: data.model,
|
||||||
|
usage: data.usage,
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
logError('Perplexity chat error', err);
|
||||||
|
return NextResponse.json({ error: 'Failed to reach Perplexity API' }, { status: 502 });
|
||||||
|
}
|
||||||
|
}
|
||||||
28
dashboards/admin-web/src/app/api/docs/route.ts
Normal file
28
dashboards/admin-web/src/app/api/docs/route.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
/**
|
||||||
|
* GET /api/docs — List all project documentation files.
|
||||||
|
* GET /api/docs?q=search+term — Full-text search across docs.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { listDocs, searchDocs } from '@/lib/docs';
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const q = req.nextUrl.searchParams.get('q');
|
||||||
|
|
||||||
|
if (q) {
|
||||||
|
const results = searchDocs(q);
|
||||||
|
return NextResponse.json({ results, query: q });
|
||||||
|
}
|
||||||
|
|
||||||
|
const docs = listDocs();
|
||||||
|
|
||||||
|
// Group by category
|
||||||
|
const categories: Record<string, typeof docs> = {};
|
||||||
|
for (const doc of docs) {
|
||||||
|
const cat = doc.category;
|
||||||
|
if (!categories[cat]) categories[cat] = [];
|
||||||
|
categories[cat].push(doc);
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.json({ docs, categories });
|
||||||
|
}
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
/**
|
||||||
|
* Extraction API proxy — forwards requests to extraction-service (port 4005).
|
||||||
|
*
|
||||||
|
* GET/POST /api/extraction/* → extraction-service /api/*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { getCurrentUser } from '@/lib/auth-server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
|
||||||
|
const EXTRACTION_SERVICE_URL =
|
||||||
|
process.env.EXTRACTION_SERVICE_URL || 'http://localhost:4005';
|
||||||
|
|
||||||
|
async function proxyToExtraction(
|
||||||
|
req: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ path: string[] }> },
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
}
|
||||||
|
|
||||||
|
const { path } = await params;
|
||||||
|
const targetPath = `/api/${path.join('/')}`;
|
||||||
|
const url = new URL(req.url);
|
||||||
|
const qs = url.search;
|
||||||
|
|
||||||
|
const headers: Record<string, string> = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'x-request-id': req.headers.get('x-request-id') || crypto.randomUUID(),
|
||||||
|
'x-user-id': caller.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchOptions: RequestInit = {
|
||||||
|
method: req.method,
|
||||||
|
headers,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (req.method === 'POST' || req.method === 'PUT') {
|
||||||
|
fetchOptions.body = await req.text();
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await fetch(`${EXTRACTION_SERVICE_URL}${targetPath}${qs}`, fetchOptions);
|
||||||
|
|
||||||
|
const data = await res.json().catch(() => null);
|
||||||
|
|
||||||
|
return NextResponse.json(data ?? { error: res.statusText }, {
|
||||||
|
status: res.status,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
logError('Extraction proxy error', error);
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Extraction service unavailable' },
|
||||||
|
{ status: 502 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET(
|
||||||
|
req: NextRequest,
|
||||||
|
context: { params: Promise<{ path: string[] }> },
|
||||||
|
) {
|
||||||
|
return proxyToExtraction(req, context);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(
|
||||||
|
req: NextRequest,
|
||||||
|
context: { params: Promise<{ path: string[] }> },
|
||||||
|
) {
|
||||||
|
return proxyToExtraction(req, context);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function PUT(
|
||||||
|
req: NextRequest,
|
||||||
|
context: { params: Promise<{ path: string[] }> },
|
||||||
|
) {
|
||||||
|
return proxyToExtraction(req, context);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(
|
||||||
|
req: NextRequest,
|
||||||
|
context: { params: Promise<{ path: string[] }> },
|
||||||
|
) {
|
||||||
|
return proxyToExtraction(req, context);
|
||||||
|
}
|
||||||
31
dashboards/admin-web/src/app/api/flags/[id]/route.ts
Normal file
31
dashboards/admin-web/src/app/api/flags/[id]/route.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { requireAdmin } from '@/lib/auth-server';
|
||||||
|
import { updateFlag, deleteFlag } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
// [id] here is actually the flag key (e.g. "kill_switch", "enable_new_editor")
|
||||||
|
export async function PUT(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { id: key } = await params;
|
||||||
|
const body = await req.json();
|
||||||
|
const flag = await updateFlag(key, body);
|
||||||
|
return NextResponse.json(flag);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { id: key } = await params;
|
||||||
|
await deleteFlag(key);
|
||||||
|
return NextResponse.json({ success: true });
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
28
dashboards/admin-web/src/app/api/flags/route.ts
Normal file
28
dashboards/admin-web/src/app/api/flags/route.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { requireAdmin } from '@/lib/auth-server';
|
||||||
|
import { listFlags, createFlag } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await listFlags();
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const body = await req.json();
|
||||||
|
const flag = await createFlag(body);
|
||||||
|
return NextResponse.json(flag, { status: 201 });
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
61
dashboards/admin-web/src/app/api/health/route.ts
Normal file
61
dashboards/admin-web/src/app/api/health/route.ts
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import { NextResponse } from 'next/server';
|
||||||
|
import { getDatabase } from '@/lib/cosmos';
|
||||||
|
|
||||||
|
interface Check {
|
||||||
|
name: string;
|
||||||
|
status: 'pass' | 'fail';
|
||||||
|
message?: string;
|
||||||
|
latencyMs?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const REQUIRED_ENV = [
|
||||||
|
'COSMOS_ENDPOINT',
|
||||||
|
'COSMOS_KEY',
|
||||||
|
'COSMOS_DATABASE',
|
||||||
|
'JWT_SECRET',
|
||||||
|
'STRIPE_SECRET_KEY',
|
||||||
|
'SEED_SECRET',
|
||||||
|
];
|
||||||
|
|
||||||
|
function checkEnvVars(): Check {
|
||||||
|
const missing = REQUIRED_ENV.filter(key => !process.env[key]);
|
||||||
|
if (missing.length > 0) {
|
||||||
|
return { name: 'env', status: 'fail', message: `Missing: ${missing.join(', ')}` };
|
||||||
|
}
|
||||||
|
return { name: 'env', status: 'pass', message: `${REQUIRED_ENV.length} required vars set` };
|
||||||
|
}
|
||||||
|
|
||||||
|
async function checkCosmos(): Promise<Check> {
|
||||||
|
const start = Date.now();
|
||||||
|
try {
|
||||||
|
const db = getDatabase();
|
||||||
|
await db.read();
|
||||||
|
return { name: 'cosmos', status: 'pass', latencyMs: Date.now() - start };
|
||||||
|
} catch (err) {
|
||||||
|
return {
|
||||||
|
name: 'cosmos',
|
||||||
|
status: 'fail',
|
||||||
|
message: err instanceof Error ? err.message : String(err),
|
||||||
|
latencyMs: Date.now() - start,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
const checks: Check[] = [];
|
||||||
|
|
||||||
|
checks.push(checkEnvVars());
|
||||||
|
checks.push(await checkCosmos());
|
||||||
|
|
||||||
|
const overall = checks.every(c => c.status === 'pass') ? 'ok' : 'degraded';
|
||||||
|
|
||||||
|
return NextResponse.json(
|
||||||
|
{
|
||||||
|
status: overall,
|
||||||
|
service: 'admin-dashboard',
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
checks,
|
||||||
|
},
|
||||||
|
{ status: overall === 'ok' ? 200 : 503 }
|
||||||
|
);
|
||||||
|
}
|
||||||
54
dashboards/admin-web/src/app/api/invitations/[id]/route.ts
Normal file
54
dashboards/admin-web/src/app/api/invitations/[id]/route.ts
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
/**
|
||||||
|
* PATCH /api/invitations/[id] — Update invitation code (disable/enable).
|
||||||
|
* DELETE /api/invitations/[id] — Delete invitation code.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { getCurrentUser } from '@/lib/auth-server';
|
||||||
|
import * as growthClient from '@/lib/growth-client';
|
||||||
|
export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller || !['super_admin', 'admin'].includes(caller.role)) {
|
||||||
|
return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
|
||||||
|
}
|
||||||
|
const { id } = await params;
|
||||||
|
const body = await req.json();
|
||||||
|
const updates: Record<string, unknown> = {};
|
||||||
|
if (body.status && ['active', 'disabled'].includes(body.status)) {
|
||||||
|
updates.status = body.status;
|
||||||
|
}
|
||||||
|
if (typeof body.maxUses === 'number') {
|
||||||
|
updates.maxUses = Math.max(1, body.maxUses);
|
||||||
|
}
|
||||||
|
if (body.description !== undefined) {
|
||||||
|
updates.description = body.description;
|
||||||
|
}
|
||||||
|
if (body.expiresAt !== undefined) {
|
||||||
|
updates.expiresAt = body.expiresAt;
|
||||||
|
}
|
||||||
|
const updated = await growthClient.updateInvitation(id, updates);
|
||||||
|
if (!updated) {
|
||||||
|
return NextResponse.json({ error: 'Update failed' }, { status: 500 });
|
||||||
|
}
|
||||||
|
return NextResponse.json(updated);
|
||||||
|
} catch (error) {
|
||||||
|
logError('Update invitation error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export async function DELETE(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller || caller.role !== 'super_admin') {
|
||||||
|
return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
|
||||||
|
}
|
||||||
|
const { id } = await params;
|
||||||
|
await growthClient.deleteInvitation(id);
|
||||||
|
return NextResponse.json({ success: true });
|
||||||
|
} catch (error) {
|
||||||
|
logError('Delete invitation error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
32
dashboards/admin-web/src/app/api/invitations/bulk/route.ts
Normal file
32
dashboards/admin-web/src/app/api/invitations/bulk/route.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
/**
|
||||||
|
* POST /api/invitations/bulk — Bulk create invitation codes.
|
||||||
|
* Accepts a JSON array of invitation objects, proxies to Growth Service.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { getCurrentUser } from '@/lib/auth-server';
|
||||||
|
import * as growthClient from '@/lib/growth-client';
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller || !['super_admin', 'admin'].includes(caller.role)) {
|
||||||
|
return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
|
||||||
|
}
|
||||||
|
const body = await req.json();
|
||||||
|
if (!Array.isArray(body)) {
|
||||||
|
return NextResponse.json({ error: 'Request body must be a JSON array' }, { status: 400 });
|
||||||
|
}
|
||||||
|
// Inject createdBy from the caller if not provided
|
||||||
|
const enriched = body.map((item: Record<string, unknown>) => ({
|
||||||
|
...item,
|
||||||
|
createdBy: item.createdBy || caller.id,
|
||||||
|
}));
|
||||||
|
const result = await growthClient.bulkCreateInvitations(enriched);
|
||||||
|
const status = result.failed > 0 ? 207 : 201;
|
||||||
|
return NextResponse.json(result, { status });
|
||||||
|
} catch (error) {
|
||||||
|
logError('Bulk invite error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
69
dashboards/admin-web/src/app/api/invitations/route.ts
Normal file
69
dashboards/admin-web/src/app/api/invitations/route.ts
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
/**
|
||||||
|
* GET /api/invitations — List all invitation codes.
|
||||||
|
* POST /api/invitations — Create a new invitation code.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { getCurrentUser } from '@/lib/auth-server';
|
||||||
|
import * as growthClient from '@/lib/growth-client';
|
||||||
|
import crypto from 'crypto';
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
}
|
||||||
|
const url = new URL(req.url);
|
||||||
|
const limit = parseInt(url.searchParams.get('limit') ?? '100', 10);
|
||||||
|
const offset = parseInt(url.searchParams.get('offset') ?? '0', 10);
|
||||||
|
const [listRes, countRes] = await Promise.all([
|
||||||
|
growthClient.listInvitations(limit, offset),
|
||||||
|
growthClient.countInvitations(),
|
||||||
|
]);
|
||||||
|
const codes = listRes.invitations;
|
||||||
|
const total = countRes.count;
|
||||||
|
return NextResponse.json({ codes, total });
|
||||||
|
} catch (error) {
|
||||||
|
logError('List invitations error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller || !['super_admin', 'admin'].includes(caller.role)) {
|
||||||
|
return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
|
||||||
|
}
|
||||||
|
const body = await req.json();
|
||||||
|
const {
|
||||||
|
description = '',
|
||||||
|
grantPlan = 'pro',
|
||||||
|
grantTrialDays = 0,
|
||||||
|
bonusTokens = 0,
|
||||||
|
maxUses = 100,
|
||||||
|
expiresAt = null,
|
||||||
|
code: customCode,
|
||||||
|
} = body;
|
||||||
|
if (!['pro', 'enterprise'].includes(grantPlan)) {
|
||||||
|
return NextResponse.json({ error: 'grantPlan must be pro or enterprise' }, { status: 400 });
|
||||||
|
}
|
||||||
|
const code = customCode
|
||||||
|
? customCode.toUpperCase().replace(/[^A-Z0-9-]/g, '')
|
||||||
|
: `INVITE-${crypto.randomBytes(4).toString('hex').toUpperCase()}`;
|
||||||
|
const invitation = await growthClient.createInvitation({
|
||||||
|
code,
|
||||||
|
description,
|
||||||
|
createdBy: caller.id,
|
||||||
|
grantPlan,
|
||||||
|
grantTrialDays: Math.max(0, grantTrialDays),
|
||||||
|
bonusTokens: Math.max(0, bonusTokens),
|
||||||
|
maxUses: Math.max(1, maxUses),
|
||||||
|
expiresAt,
|
||||||
|
});
|
||||||
|
return NextResponse.json(invitation, { status: 201 });
|
||||||
|
} catch (error) {
|
||||||
|
logError('Create invitation error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
48
dashboards/admin-web/src/app/api/licenses/route.ts
Normal file
48
dashboards/admin-web/src/app/api/licenses/route.ts
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { requireAdmin } from '@/lib/auth-server';
|
||||||
|
import {
|
||||||
|
getUserLicenses,
|
||||||
|
generateLicense,
|
||||||
|
revokeLicense,
|
||||||
|
deactivateLicenseDevice,
|
||||||
|
} from '@/lib/billing-client';
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
const userId = req.nextUrl.searchParams.get('userId');
|
||||||
|
if (!userId) return NextResponse.json({ error: 'userId is required' }, { status: 400 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await getUserLicenses(userId);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const body = await req.json();
|
||||||
|
|
||||||
|
if (body.action === 'revoke' && body.key) {
|
||||||
|
const result = await revokeLicense(body.key);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (body.action === 'deactivate' && body.key && body.deviceId) {
|
||||||
|
const result = await deactivateLicenseDevice(body.key, body.deviceId);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default: generate new license
|
||||||
|
const license = await generateLicense(body);
|
||||||
|
return NextResponse.json(license, { status: 201 });
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
24
dashboards/admin-web/src/app/api/notifications/route.ts
Normal file
24
dashboards/admin-web/src/app/api/notifications/route.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { requireAdmin } from '@/lib/auth-server';
|
||||||
|
import { listDevices, getNotificationPrefs } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
const userId = req.nextUrl.searchParams.get('userId');
|
||||||
|
if (!userId) return NextResponse.json({ error: 'userId is required' }, { status: 400 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const [devicesResult, prefs] = await Promise.all([
|
||||||
|
listDevices(userId),
|
||||||
|
getNotificationPrefs(userId),
|
||||||
|
]);
|
||||||
|
return NextResponse.json({
|
||||||
|
devices: devicesResult.devices ?? [],
|
||||||
|
prefs: prefs ?? { pushEnabled: true, emailEnabled: true, categories: {} },
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
61
dashboards/admin-web/src/app/api/ops/secrets/[name]/route.ts
Normal file
61
dashboards/admin-web/src/app/api/ops/secrets/[name]/route.ts
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { DefaultAzureCredential } from '@azure/identity';
|
||||||
|
import { SecretClient } from '@azure/keyvault-secrets';
|
||||||
|
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
|
function getSecretClient(): SecretClient {
|
||||||
|
const vaultUrl = process.env.AZURE_KEYVAULT_URL;
|
||||||
|
if (!vaultUrl) {
|
||||||
|
throw new Error('AZURE_KEYVAULT_URL is not configured');
|
||||||
|
}
|
||||||
|
return new SecretClient(vaultUrl, new DefaultAzureCredential());
|
||||||
|
}
|
||||||
|
|
||||||
|
/** GET /api/ops/secrets/[name] — read a specific secret value */
|
||||||
|
export async function GET(
|
||||||
|
_req: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ name: string }> },
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const { name } = await params;
|
||||||
|
const client = getSecretClient();
|
||||||
|
const secret = await client.getSecret(name);
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
name: secret.name,
|
||||||
|
value: secret.value,
|
||||||
|
version: secret.properties.version,
|
||||||
|
enabled: secret.properties.enabled,
|
||||||
|
createdOn: secret.properties.createdOn?.toISOString(),
|
||||||
|
updatedOn: secret.properties.updatedOn?.toISOString(),
|
||||||
|
expiresOn: secret.properties.expiresOn?.toISOString() ?? null,
|
||||||
|
contentType: secret.properties.contentType ?? null,
|
||||||
|
tags: secret.properties.tags ?? {},
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
const message = err instanceof Error ? err.message : String(err);
|
||||||
|
const status = message.includes('NotFound') ? 404 : 500;
|
||||||
|
return NextResponse.json({ error: message }, { status });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** DELETE /api/ops/secrets/[name] — soft-delete a secret */
|
||||||
|
export async function DELETE(
|
||||||
|
_req: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ name: string }> },
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const { name } = await params;
|
||||||
|
const client = getSecretClient();
|
||||||
|
const poller = await client.beginDeleteSecret(name);
|
||||||
|
await poller.pollUntilDone();
|
||||||
|
|
||||||
|
return NextResponse.json({ deleted: true, name });
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: err instanceof Error ? err.message : String(err) },
|
||||||
|
{ status: 500 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
95
dashboards/admin-web/src/app/api/ops/secrets/route.ts
Normal file
95
dashboards/admin-web/src/app/api/ops/secrets/route.ts
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { DefaultAzureCredential } from '@azure/identity';
|
||||||
|
import { SecretClient } from '@azure/keyvault-secrets';
|
||||||
|
|
||||||
|
export const dynamic = 'force-dynamic';
|
||||||
|
|
||||||
|
function getSecretClient(): SecretClient {
|
||||||
|
const vaultUrl = process.env.AZURE_KEYVAULT_URL;
|
||||||
|
if (!vaultUrl) {
|
||||||
|
throw new Error('AZURE_KEYVAULT_URL is not configured');
|
||||||
|
}
|
||||||
|
return new SecretClient(vaultUrl, new DefaultAzureCredential());
|
||||||
|
}
|
||||||
|
|
||||||
|
/** GET /api/ops/secrets — list all secrets with metadata */
|
||||||
|
export async function GET() {
|
||||||
|
try {
|
||||||
|
const client = getSecretClient();
|
||||||
|
const secrets: Array<{
|
||||||
|
name: string;
|
||||||
|
enabled: boolean;
|
||||||
|
createdOn: string | null;
|
||||||
|
updatedOn: string | null;
|
||||||
|
expiresOn: string | null;
|
||||||
|
contentType: string | null;
|
||||||
|
tags: Record<string, string>;
|
||||||
|
}> = [];
|
||||||
|
|
||||||
|
for await (const properties of client.listPropertiesOfSecrets()) {
|
||||||
|
secrets.push({
|
||||||
|
name: properties.name,
|
||||||
|
enabled: properties.enabled ?? true,
|
||||||
|
createdOn: properties.createdOn?.toISOString() ?? null,
|
||||||
|
updatedOn: properties.updatedOn?.toISOString() ?? null,
|
||||||
|
expiresOn: properties.expiresOn?.toISOString() ?? null,
|
||||||
|
contentType: properties.contentType ?? null,
|
||||||
|
tags: properties.tags ?? {},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort alphabetically
|
||||||
|
secrets.sort((a, b) => a.name.localeCompare(b.name));
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
vaultUrl: process.env.AZURE_KEYVAULT_URL,
|
||||||
|
count: secrets.length,
|
||||||
|
secrets,
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: err instanceof Error ? err.message : String(err) },
|
||||||
|
{ status: 500 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** POST /api/ops/secrets — set or update a secret */
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const body = await req.json();
|
||||||
|
const { name, value, contentType, expiresOn, tags } = body as {
|
||||||
|
name: string;
|
||||||
|
value: string;
|
||||||
|
contentType?: string;
|
||||||
|
expiresOn?: string;
|
||||||
|
tags?: Record<string, string>;
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!name || !value) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'name and value are required' },
|
||||||
|
{ status: 400 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const client = getSecretClient();
|
||||||
|
const result = await client.setSecret(name, value, {
|
||||||
|
contentType,
|
||||||
|
expiresOn: expiresOn ? new Date(expiresOn) : undefined,
|
||||||
|
tags,
|
||||||
|
});
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
name: result.name,
|
||||||
|
createdOn: result.properties.createdOn?.toISOString(),
|
||||||
|
updatedOn: result.properties.updatedOn?.toISOString(),
|
||||||
|
version: result.properties.version,
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: err instanceof Error ? err.message : String(err) },
|
||||||
|
{ status: 500 },
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
119
dashboards/admin-web/src/app/api/ops/status/route.ts
Normal file
119
dashboards/admin-web/src/app/api/ops/status/route.ts
Normal file
@ -0,0 +1,119 @@
|
|||||||
|
import { NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
export const dynamic = 'force-dynamic'; // No caching
|
||||||
|
|
||||||
|
interface ServiceCheck {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
url: string;
|
||||||
|
status: 'healthy' | 'degraded' | 'down' | 'maintenance';
|
||||||
|
latency: number;
|
||||||
|
version?: string;
|
||||||
|
uptime?: number;
|
||||||
|
message?: string;
|
||||||
|
lastChecked: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface OpsStatus {
|
||||||
|
overall: 'healthy' | 'degraded' | 'critical';
|
||||||
|
timestamp: string;
|
||||||
|
services: ServiceCheck[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const SERVICES = [
|
||||||
|
{
|
||||||
|
id: 'backend',
|
||||||
|
name: 'Backend API',
|
||||||
|
env: 'API_BASE_URL',
|
||||||
|
default: 'http://localhost:8000',
|
||||||
|
path: '/health',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'platform',
|
||||||
|
name: 'Platform Service',
|
||||||
|
env: 'PLATFORM_SERVICE_URL',
|
||||||
|
default: 'http://localhost:4003',
|
||||||
|
path: '/health',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'extraction',
|
||||||
|
name: 'Extraction Service',
|
||||||
|
env: 'EXTRACTION_SERVICE_URL',
|
||||||
|
default: 'http://localhost:4005',
|
||||||
|
path: '/health',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
const checks = await Promise.all(
|
||||||
|
SERVICES.map(async svc => {
|
||||||
|
const baseUrl = process.env[svc.env] || svc.default;
|
||||||
|
const url = `${baseUrl}${svc.path}`;
|
||||||
|
const start = Date.now();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await fetch(url, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
next: { revalidate: 0 },
|
||||||
|
signal: AbortSignal.timeout(3000), // 3s timeout
|
||||||
|
});
|
||||||
|
|
||||||
|
const latency = Date.now() - start;
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
return {
|
||||||
|
id: svc.id,
|
||||||
|
name: svc.name,
|
||||||
|
url,
|
||||||
|
status: 'down',
|
||||||
|
latency,
|
||||||
|
message: `HTTP ${res.status}`,
|
||||||
|
lastChecked: new Date().toISOString(),
|
||||||
|
} as ServiceCheck;
|
||||||
|
}
|
||||||
|
|
||||||
|
const json = await res.json();
|
||||||
|
// Assuming standard health response: { status: "ok", version: "0.1.0" }
|
||||||
|
// Fastify services return { status: "ok" }
|
||||||
|
const isOk = json.status === 'ok';
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: svc.id,
|
||||||
|
name: svc.name,
|
||||||
|
url,
|
||||||
|
status: isOk ? 'healthy' : 'degraded',
|
||||||
|
latency,
|
||||||
|
version: json.version,
|
||||||
|
message: isOk ? undefined : JSON.stringify(json),
|
||||||
|
lastChecked: new Date().toISOString(),
|
||||||
|
} as ServiceCheck;
|
||||||
|
} catch (err) {
|
||||||
|
return {
|
||||||
|
id: svc.id,
|
||||||
|
name: svc.name,
|
||||||
|
url,
|
||||||
|
status: 'down',
|
||||||
|
latency: Date.now() - start,
|
||||||
|
message: err instanceof Error ? err.message : String(err),
|
||||||
|
lastChecked: new Date().toISOString(),
|
||||||
|
} as ServiceCheck;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
const downCount = checks.filter(c => c.status === 'down').length;
|
||||||
|
const degradedCount = checks.filter(c => c.status === 'degraded').length;
|
||||||
|
|
||||||
|
let overall: OpsStatus['overall'] = 'healthy';
|
||||||
|
if (downCount > 0) overall = 'critical';
|
||||||
|
else if (degradedCount > 0) overall = 'degraded';
|
||||||
|
|
||||||
|
const response: OpsStatus = {
|
||||||
|
overall,
|
||||||
|
timestamp: new Date().toISOString(),
|
||||||
|
services: checks,
|
||||||
|
};
|
||||||
|
|
||||||
|
return NextResponse.json(response);
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { requireAdmin } from '@/lib/auth-server';
|
||||||
|
import { onboardProduct } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
export async function POST(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { id } = await params;
|
||||||
|
const result = await onboardProduct(id);
|
||||||
|
return NextResponse.json(result, { status: 201 });
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
32
dashboards/admin-web/src/app/api/products/[id]/route.ts
Normal file
32
dashboards/admin-web/src/app/api/products/[id]/route.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { requireAdmin } from '@/lib/auth-server';
|
||||||
|
import { updateProduct } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
type RouteContext = { params: Promise<{ id: string }> };
|
||||||
|
|
||||||
|
export async function PUT(req: NextRequest, { params }: RouteContext) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { id } = await params;
|
||||||
|
const body = await req.json();
|
||||||
|
const product = await updateProduct(id, body);
|
||||||
|
return NextResponse.json(product);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(req: NextRequest, { params }: RouteContext) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { id } = await params;
|
||||||
|
const product = await updateProduct(id, { status: 'disabled' });
|
||||||
|
return NextResponse.json(product);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
28
dashboards/admin-web/src/app/api/products/route.ts
Normal file
28
dashboards/admin-web/src/app/api/products/route.ts
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { requireAdmin } from '@/lib/auth-server';
|
||||||
|
import { listProducts, createProduct } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await listProducts();
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const body = await req.json();
|
||||||
|
const product = await createProduct(body);
|
||||||
|
return NextResponse.json(product, { status: 201 });
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
52
dashboards/admin-web/src/app/api/promos/[id]/route.ts
Normal file
52
dashboards/admin-web/src/app/api/promos/[id]/route.ts
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
/**
|
||||||
|
* Promo by ID — proxies to platform-service promo endpoints.
|
||||||
|
*
|
||||||
|
* DELETE /api/promos/:id → deactivate promo (Stripe promos cannot be deleted, only deactivated)
|
||||||
|
* PATCH /api/promos/:id → deactivate promo (toggle off)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { getCurrentUser } from '@/lib/auth-server';
|
||||||
|
import { deactivatePromo } from '@/lib/growth-client';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
|
||||||
|
type RouteContext = { params: Promise<{ id: string }> };
|
||||||
|
|
||||||
|
export async function DELETE(req: NextRequest, ctx: RouteContext) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller || !['super_admin', 'admin'].includes(caller.role)) {
|
||||||
|
return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
|
||||||
|
}
|
||||||
|
const { id } = await ctx.params;
|
||||||
|
await deactivatePromo(id);
|
||||||
|
return NextResponse.json({ success: true });
|
||||||
|
} catch (error) {
|
||||||
|
logError('Promo delete error', error);
|
||||||
|
return NextResponse.json({ error: 'Failed to deactivate promo' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function PATCH(req: NextRequest, ctx: RouteContext) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller || !['super_admin', 'admin'].includes(caller.role)) {
|
||||||
|
return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
|
||||||
|
}
|
||||||
|
const { id } = await ctx.params;
|
||||||
|
const body = await req.json();
|
||||||
|
// Only deactivation is supported by Stripe — active: false
|
||||||
|
if (body.active === false) {
|
||||||
|
const result = await deactivatePromo(id);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
}
|
||||||
|
// Stripe promotion codes cannot be re-activated once deactivated
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Stripe promotion codes cannot be re-activated once deactivated' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
} catch (error) {
|
||||||
|
logError('Promo update error', error);
|
||||||
|
return NextResponse.json({ error: 'Failed to update promo' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
71
dashboards/admin-web/src/app/api/promos/route.ts
Normal file
71
dashboards/admin-web/src/app/api/promos/route.ts
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
/**
|
||||||
|
* GET /api/promos — List Stripe promotion codes.
|
||||||
|
* POST /api/promos — Create a Stripe coupon + promotion code.
|
||||||
|
*
|
||||||
|
* Uses Stripe's native Coupon + Promotion Code APIs.
|
||||||
|
* No local DB needed — Stripe is the source of truth.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { getCurrentUser } from '@/lib/auth-server';
|
||||||
|
import * as growthClient from '@/lib/growth-client';
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
}
|
||||||
|
const url = new URL(req.url);
|
||||||
|
const active = url.searchParams.get('active');
|
||||||
|
const result = await growthClient.listPromos(active !== null ? active === 'true' : undefined);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (error) {
|
||||||
|
logError('List promos error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller || !['super_admin', 'admin'].includes(caller.role)) {
|
||||||
|
return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
|
||||||
|
}
|
||||||
|
const body = await req.json();
|
||||||
|
const {
|
||||||
|
code,
|
||||||
|
percentOff,
|
||||||
|
amountOff,
|
||||||
|
currency = 'usd',
|
||||||
|
duration = 'once',
|
||||||
|
durationInMonths,
|
||||||
|
maxRedemptions,
|
||||||
|
expiresAt,
|
||||||
|
} = body;
|
||||||
|
if (!code) {
|
||||||
|
return NextResponse.json({ error: 'code is required' }, { status: 400 });
|
||||||
|
}
|
||||||
|
if (!percentOff && !amountOff) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Either percentOff or amountOff is required' },
|
||||||
|
{ status: 400 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const created = await growthClient.createPromo({
|
||||||
|
code,
|
||||||
|
percentOff,
|
||||||
|
amountOff,
|
||||||
|
currency,
|
||||||
|
duration,
|
||||||
|
durationInMonths,
|
||||||
|
maxRedemptions,
|
||||||
|
expiresAt,
|
||||||
|
createdBy: caller.id,
|
||||||
|
});
|
||||||
|
return NextResponse.json(created, { status: 201 });
|
||||||
|
} catch (error) {
|
||||||
|
logError('Create promo error', error);
|
||||||
|
const msg = error instanceof Error ? error.message : 'Internal server error';
|
||||||
|
return NextResponse.json({ error: msg }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
32
dashboards/admin-web/src/app/api/referrals/route.ts
Normal file
32
dashboards/admin-web/src/app/api/referrals/route.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
/**
|
||||||
|
* GET /api/referrals — List all referrals (admin view).
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { getCurrentUser } from '@/lib/auth-server';
|
||||||
|
import * as growthClient from '@/lib/growth-client';
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const caller = await getCurrentUser(req.headers.get('authorization'));
|
||||||
|
if (!caller) {
|
||||||
|
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
}
|
||||||
|
const url = new URL(req.url);
|
||||||
|
const limit = parseInt(url.searchParams.get('limit') ?? '100', 10);
|
||||||
|
const offset = parseInt(url.searchParams.get('offset') ?? '0', 10);
|
||||||
|
const mode = url.searchParams.get('mode');
|
||||||
|
if (mode === 'summary') {
|
||||||
|
const stats = await growthClient.getReferralStats();
|
||||||
|
return NextResponse.json(stats);
|
||||||
|
}
|
||||||
|
const [listRes, stats] = await Promise.all([
|
||||||
|
growthClient.listReferrals(limit, offset),
|
||||||
|
growthClient.getReferralStats(),
|
||||||
|
]);
|
||||||
|
return NextResponse.json({ referrals: listRes.referrals, stats });
|
||||||
|
} catch (error) {
|
||||||
|
logError('List referrals error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
77
dashboards/admin-web/src/app/api/seed/route.ts
Normal file
77
dashboards/admin-web/src/app/api/seed/route.ts
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
/**
|
||||||
|
* Seed endpoint — creates containers and initial admin user.
|
||||||
|
* POST /api/seed?secret=<SEED_SECRET>
|
||||||
|
*
|
||||||
|
* Only works when SEED_SECRET env var matches the query param.
|
||||||
|
* Disable in production by not setting SEED_SECRET.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
import { initializeAllContainers } from '@/lib/cosmos';
|
||||||
|
import { hashPassword } from '@/lib/auth-server';
|
||||||
|
import { getUserByEmail, createUser } from '@/lib/repositories/users';
|
||||||
|
import { PRODUCT_ID } from '@/lib/product-config';
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const seedSecret = process.env.SEED_SECRET;
|
||||||
|
if (!seedSecret) {
|
||||||
|
return NextResponse.json({ error: 'Seeding is disabled' }, { status: 403 });
|
||||||
|
}
|
||||||
|
const url = new URL(req.url);
|
||||||
|
if (url.searchParams.get('secret') !== seedSecret) {
|
||||||
|
return NextResponse.json({ error: 'Invalid seed secret' }, { status: 403 });
|
||||||
|
}
|
||||||
|
// 1. Create all Cosmos DB containers
|
||||||
|
await initializeAllContainers();
|
||||||
|
// 2. Create default admin user if not exists
|
||||||
|
const adminEmail = 'admin@example.com';
|
||||||
|
const existing = await getUserByEmail(adminEmail);
|
||||||
|
if (!existing) {
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
await createUser({
|
||||||
|
id: `usr_admin_${Date.now()}`,
|
||||||
|
productId: PRODUCT_ID,
|
||||||
|
email: adminEmail,
|
||||||
|
name: 'Admin User',
|
||||||
|
passwordHash: await hashPassword('admin123'),
|
||||||
|
role: 'super_admin',
|
||||||
|
plan: 'enterprise',
|
||||||
|
status: 'active',
|
||||||
|
createdAt: now,
|
||||||
|
lastActive: now,
|
||||||
|
totalTokensUsed: 0,
|
||||||
|
totalRequests: 0,
|
||||||
|
monthlySpend: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 3. Create viewer user if not exists
|
||||||
|
const viewerEmail = 'viewer@example.com';
|
||||||
|
const existingViewer = await getUserByEmail(viewerEmail);
|
||||||
|
if (!existingViewer) {
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
await createUser({
|
||||||
|
id: `usr_viewer_${Date.now()}`,
|
||||||
|
productId: PRODUCT_ID,
|
||||||
|
email: viewerEmail,
|
||||||
|
name: 'Viewer User',
|
||||||
|
passwordHash: await hashPassword('viewer123'),
|
||||||
|
role: 'viewer',
|
||||||
|
plan: 'free',
|
||||||
|
status: 'active',
|
||||||
|
createdAt: now,
|
||||||
|
lastActive: now,
|
||||||
|
totalTokensUsed: 0,
|
||||||
|
totalRequests: 0,
|
||||||
|
monthlySpend: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return NextResponse.json({
|
||||||
|
success: true,
|
||||||
|
message: 'Containers initialized and default users seeded',
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
logError('Seed error', error);
|
||||||
|
return NextResponse.json({ error: 'Seed failed', details: String(error) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
121
dashboards/admin-web/src/app/api/settings/kill-switch/route.ts
Normal file
121
dashboards/admin-web/src/app/api/settings/kill-switch/route.ts
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
/**
|
||||||
|
* Kill Switch API — proxies to platform-service feature flags module.
|
||||||
|
*
|
||||||
|
* GET /api/settings/kill-switch → { enabled, platforms, reason, updatedAt, updatedBy }
|
||||||
|
* PUT /api/settings/kill-switch → body: { enabled?, platforms?, reason? }
|
||||||
|
*
|
||||||
|
* Maps the kill_switch feature flag to the legacy per-platform format.
|
||||||
|
* The flag's `enabled` field = master switch, `platforms` array = which platforms are affected,
|
||||||
|
* and `description` field stores the reason.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { listFlags, createFlag, updateFlag } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
const FLAG_KEY = 'kill_switch';
|
||||||
|
const ALL_PLATFORMS = ['desktop', 'ios', 'android', 'web'];
|
||||||
|
|
||||||
|
interface PlatformFlags {
|
||||||
|
desktop: boolean;
|
||||||
|
ios: boolean;
|
||||||
|
android: boolean;
|
||||||
|
web: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function flagToPlatforms(flagPlatforms: string[]): PlatformFlags {
|
||||||
|
if (flagPlatforms.length === 0) {
|
||||||
|
return { desktop: true, ios: true, android: true, web: true };
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
desktop: flagPlatforms.includes('desktop'),
|
||||||
|
ios: flagPlatforms.includes('ios'),
|
||||||
|
android: flagPlatforms.includes('android'),
|
||||||
|
web: flagPlatforms.includes('web'),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function platformsToArray(platforms: PlatformFlags): string[] {
|
||||||
|
const arr = ALL_PLATFORMS.filter(p => platforms[p as keyof PlatformFlags]);
|
||||||
|
return arr.length === ALL_PLATFORMS.length ? [] : arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
try {
|
||||||
|
const result = await listFlags();
|
||||||
|
const flag = (result.flags ?? []).find(f => f.key === FLAG_KEY);
|
||||||
|
|
||||||
|
if (!flag) {
|
||||||
|
return NextResponse.json({
|
||||||
|
enabled: false,
|
||||||
|
platforms: { desktop: true, ios: true, android: true, web: true },
|
||||||
|
reason: '',
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
updatedBy: 'system',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
enabled: flag.enabled,
|
||||||
|
platforms: flagToPlatforms(flag.platforms ?? []),
|
||||||
|
reason: flag.description ?? '',
|
||||||
|
updatedAt: flag.updatedAt,
|
||||||
|
updatedBy: 'admin',
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Failed to read kill switch', details: String(error) },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function PUT(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const body = await req.json();
|
||||||
|
const enabled = typeof body.enabled === 'boolean' ? body.enabled : false;
|
||||||
|
const reason = typeof body.reason === 'string' ? body.reason : '';
|
||||||
|
|
||||||
|
const platforms: PlatformFlags = body.platforms ?? {
|
||||||
|
desktop: true, ios: true, android: true, web: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
const result = await listFlags();
|
||||||
|
const existing = (result.flags ?? []).find(f => f.key === FLAG_KEY);
|
||||||
|
|
||||||
|
if (existing) {
|
||||||
|
const updated = await updateFlag(existing.id, {
|
||||||
|
enabled,
|
||||||
|
description: reason,
|
||||||
|
platforms: platformsToArray(platforms),
|
||||||
|
});
|
||||||
|
return NextResponse.json({
|
||||||
|
enabled: updated.enabled,
|
||||||
|
platforms: flagToPlatforms(updated.platforms ?? []),
|
||||||
|
reason: updated.description ?? '',
|
||||||
|
updatedAt: updated.updatedAt,
|
||||||
|
updatedBy: body.updatedBy ?? 'admin',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const created = await createFlag({
|
||||||
|
key: FLAG_KEY,
|
||||||
|
enabled,
|
||||||
|
description: reason,
|
||||||
|
platforms: platformsToArray(platforms),
|
||||||
|
segments: [],
|
||||||
|
percentage: 100,
|
||||||
|
});
|
||||||
|
return NextResponse.json({
|
||||||
|
enabled: created.enabled,
|
||||||
|
platforms: flagToPlatforms(created.platforms ?? []),
|
||||||
|
reason: created.description ?? '',
|
||||||
|
updatedAt: created.updatedAt,
|
||||||
|
updatedBy: body.updatedBy ?? 'admin',
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
return NextResponse.json(
|
||||||
|
{ error: 'Failed to update kill switch', details: String(error) },
|
||||||
|
{ status: 500 }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
24
dashboards/admin-web/src/app/api/settings/plans/route.ts
Normal file
24
dashboards/admin-web/src/app/api/settings/plans/route.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
/**
|
||||||
|
* Plans API — proxies to platform-service /plans endpoint.
|
||||||
|
*
|
||||||
|
* GET /api/settings/plans → list plans
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { requireAdmin } from '@/lib/auth-server';
|
||||||
|
import { listPlans } from '@/lib/platform-client';
|
||||||
|
import { PRODUCT_ID } from '@/lib/product-config';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
const result = await listPlans(PRODUCT_ID);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (error) {
|
||||||
|
logError('Plans list error', error);
|
||||||
|
return NextResponse.json({ error: 'Failed to list plans' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
133
dashboards/admin-web/src/app/api/settings/platform/route.ts
Normal file
133
dashboards/admin-web/src/app/api/settings/platform/route.ts
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
/**
|
||||||
|
* Platform Settings API — persists admin-configurable settings to Cosmos DB.
|
||||||
|
*
|
||||||
|
* GET /api/settings/platform → current settings
|
||||||
|
* PUT /api/settings/platform → update settings
|
||||||
|
*
|
||||||
|
* Stored in the `settings` container with id=platform_config, userId=_system.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { getContainer } from '@/lib/cosmos';
|
||||||
|
import { requireAdmin } from '@/lib/auth-server';
|
||||||
|
import { logError } from '@/lib/logger';
|
||||||
|
|
||||||
|
const SETTINGS_ID = 'platform_config';
|
||||||
|
const PARTITION_KEY = '_system';
|
||||||
|
|
||||||
|
interface PlatformSettings {
|
||||||
|
id: string;
|
||||||
|
userId: string;
|
||||||
|
platformName: string;
|
||||||
|
supportEmail: string;
|
||||||
|
defaultLanguage: string;
|
||||||
|
maintenanceMode: boolean;
|
||||||
|
allowSelfRegistration: boolean;
|
||||||
|
rateLimits: {
|
||||||
|
globalPerMin: number;
|
||||||
|
perUserPerMin: number;
|
||||||
|
maxTokenBurst: number;
|
||||||
|
abuseThreshold: number;
|
||||||
|
autoSuspendOnAbuse: boolean;
|
||||||
|
ipBlocklist: boolean;
|
||||||
|
};
|
||||||
|
notifications: {
|
||||||
|
newUserSignup: boolean;
|
||||||
|
usageThreshold: boolean;
|
||||||
|
failedPayment: boolean;
|
||||||
|
securityAlerts: boolean;
|
||||||
|
};
|
||||||
|
dataRetentionDays: number;
|
||||||
|
backupFrequency: string;
|
||||||
|
auditLogging: boolean;
|
||||||
|
updatedAt: string;
|
||||||
|
updatedBy: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DEFAULTS: PlatformSettings = {
|
||||||
|
id: SETTINGS_ID,
|
||||||
|
userId: PARTITION_KEY,
|
||||||
|
platformName: '',
|
||||||
|
supportEmail: '',
|
||||||
|
defaultLanguage: 'en-US',
|
||||||
|
maintenanceMode: false,
|
||||||
|
allowSelfRegistration: true,
|
||||||
|
rateLimits: {
|
||||||
|
globalPerMin: 1000,
|
||||||
|
perUserPerMin: 60,
|
||||||
|
maxTokenBurst: 4096,
|
||||||
|
abuseThreshold: 50,
|
||||||
|
autoSuspendOnAbuse: true,
|
||||||
|
ipBlocklist: true,
|
||||||
|
},
|
||||||
|
notifications: {
|
||||||
|
newUserSignup: true,
|
||||||
|
usageThreshold: true,
|
||||||
|
failedPayment: true,
|
||||||
|
securityAlerts: true,
|
||||||
|
},
|
||||||
|
dataRetentionDays: 365,
|
||||||
|
backupFrequency: 'daily',
|
||||||
|
auditLogging: true,
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
updatedBy: 'system',
|
||||||
|
};
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
const container = getContainer('settings');
|
||||||
|
try {
|
||||||
|
const { resource } = await container.item(SETTINGS_ID, PARTITION_KEY).read<PlatformSettings>();
|
||||||
|
if (resource) return NextResponse.json(resource);
|
||||||
|
} catch {
|
||||||
|
// Not found — return defaults
|
||||||
|
}
|
||||||
|
return NextResponse.json(DEFAULTS);
|
||||||
|
} catch (error) {
|
||||||
|
logError('Platform settings GET error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function PUT(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const admin = await requireAdmin(req);
|
||||||
|
if (!admin) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
const body = await req.json();
|
||||||
|
const container = getContainer('settings');
|
||||||
|
|
||||||
|
let existing: PlatformSettings = DEFAULTS;
|
||||||
|
try {
|
||||||
|
const { resource } = await container.item(SETTINGS_ID, PARTITION_KEY).read<PlatformSettings>();
|
||||||
|
if (resource) existing = resource;
|
||||||
|
} catch {
|
||||||
|
// Use defaults
|
||||||
|
}
|
||||||
|
|
||||||
|
const updated: PlatformSettings = {
|
||||||
|
...existing,
|
||||||
|
platformName: body.platformName ?? existing.platformName,
|
||||||
|
supportEmail: body.supportEmail ?? existing.supportEmail,
|
||||||
|
defaultLanguage: body.defaultLanguage ?? existing.defaultLanguage,
|
||||||
|
maintenanceMode: body.maintenanceMode ?? existing.maintenanceMode,
|
||||||
|
allowSelfRegistration: body.allowSelfRegistration ?? existing.allowSelfRegistration,
|
||||||
|
rateLimits: { ...existing.rateLimits, ...(body.rateLimits ?? {}) },
|
||||||
|
notifications: { ...existing.notifications, ...(body.notifications ?? {}) },
|
||||||
|
dataRetentionDays: body.dataRetentionDays ?? existing.dataRetentionDays,
|
||||||
|
backupFrequency: body.backupFrequency ?? existing.backupFrequency,
|
||||||
|
auditLogging: body.auditLogging ?? existing.auditLogging,
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
updatedBy: admin.email ?? 'admin',
|
||||||
|
};
|
||||||
|
|
||||||
|
await container.items.upsert(updated);
|
||||||
|
return NextResponse.json(updated);
|
||||||
|
} catch (error) {
|
||||||
|
logError('Platform settings PUT error', error);
|
||||||
|
return NextResponse.json({ error: 'Internal server error' }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
34
dashboards/admin-web/src/app/api/stripe/config/route.ts
Normal file
34
dashboards/admin-web/src/app/api/stripe/config/route.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
/**
|
||||||
|
* GET /api/stripe/config — Returns Stripe configuration for admin dashboard.
|
||||||
|
* Includes mode, configured status, product/price IDs, and account info.
|
||||||
|
* Safe to expose — no secret keys included.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
function getStripeMode(): 'test' | 'live' | 'dev' {
|
||||||
|
const key = process.env.STRIPE_SECRET_KEY;
|
||||||
|
if (!key) return 'dev';
|
||||||
|
if (key.startsWith('sk_test_')) return 'test';
|
||||||
|
if (key.startsWith('sk_live_')) return 'live';
|
||||||
|
return 'dev';
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET() {
|
||||||
|
const mode = getStripeMode();
|
||||||
|
const key = process.env.STRIPE_SECRET_KEY || '';
|
||||||
|
|
||||||
|
return NextResponse.json({
|
||||||
|
mode,
|
||||||
|
configured: !!key && !key.includes('placeholder'),
|
||||||
|
publishableKey: process.env.STRIPE_PUBLISHABLE_KEY
|
||||||
|
? `${process.env.STRIPE_PUBLISHABLE_KEY.slice(0, 12)}...`
|
||||||
|
: null,
|
||||||
|
priceIds: {
|
||||||
|
pro: process.env.STRIPE_PRICE_PRO || null,
|
||||||
|
enterprise: process.env.STRIPE_PRICE_ENTERPRISE || null,
|
||||||
|
},
|
||||||
|
webhookConfigured: !!process.env.STRIPE_WEBHOOK_SECRET,
|
||||||
|
billingServiceUrl: process.env.PLATFORM_SERVICE_URL || 'http://localhost:4003',
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
|
||||||
|
const PLATFORM_SERVICE_URL = process.env.PLATFORM_SERVICE_URL || 'http://localhost:4003';
|
||||||
|
const PRODUCT_ID = process.env.PRODUCT_ID || 'unknown';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Proxy admin self-telemetry events from the browser to platform-service.
|
||||||
|
* Separate from /api/telemetry which is the admin query route for viewing client logs.
|
||||||
|
* Accepts sendBeacon POST requests from the client-side telemetry module.
|
||||||
|
*/
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
try {
|
||||||
|
const body = await req.text();
|
||||||
|
|
||||||
|
const res = await fetch(`${PLATFORM_SERVICE_URL}/api/telemetry/events`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-Product-Id': PRODUCT_ID,
|
||||||
|
},
|
||||||
|
body,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
return NextResponse.json({ ok: true });
|
||||||
|
}
|
||||||
|
return NextResponse.json({ ok: false }, { status: res.status });
|
||||||
|
} catch {
|
||||||
|
return NextResponse.json({ ok: false }, { status: 502 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { updateClusterStatus } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
function getJwt(req: NextRequest): string {
|
||||||
|
const cookie = req.headers.get('cookie') ?? '';
|
||||||
|
const match = cookie.match(/(?:^|;\s*)token=([^;]+)/);
|
||||||
|
if (match) return match[1];
|
||||||
|
return req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function PATCH(
|
||||||
|
req: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
const jwt = getJwt(req);
|
||||||
|
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { id } = await params;
|
||||||
|
const { searchParams } = new URL(req.url);
|
||||||
|
const pk = searchParams.get('pk') ?? '';
|
||||||
|
const { status } = await req.json();
|
||||||
|
const result = await updateClusterStatus(jwt, id, pk, status);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
29
dashboards/admin-web/src/app/api/telemetry/erasure/route.ts
Normal file
29
dashboards/admin-web/src/app/api/telemetry/erasure/route.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { eraseTelemetryUser } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
function getJwt(req: NextRequest): string {
|
||||||
|
const cookie = req.headers.get('cookie') ?? '';
|
||||||
|
const match = cookie.match(/(?:^|;\s*)token=([^;]+)/);
|
||||||
|
if (match) return match[1];
|
||||||
|
return req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* GDPR erasure — delete all telemetry events for a given userId.
|
||||||
|
* POST body: { userId: string }
|
||||||
|
*/
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
const jwt = getJwt(req);
|
||||||
|
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { userId } = await req.json();
|
||||||
|
if (!userId || typeof userId !== 'string') {
|
||||||
|
return NextResponse.json({ error: 'userId required' }, { status: 400 });
|
||||||
|
}
|
||||||
|
const result = await eraseTelemetryUser(jwt, userId);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
24
dashboards/admin-web/src/app/api/telemetry/geo/route.ts
Normal file
24
dashboards/admin-web/src/app/api/telemetry/geo/route.ts
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { getTelemetryGeoDistribution } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
function getJwt(req: NextRequest): string {
|
||||||
|
const cookie = req.headers.get('cookie') ?? '';
|
||||||
|
const match = cookie.match(/(?:^|;\s*)token=([^;]+)/);
|
||||||
|
if (match) return match[1];
|
||||||
|
return req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const jwt = getJwt(req);
|
||||||
|
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { searchParams } = new URL(req.url);
|
||||||
|
const from = searchParams.get('from') ?? undefined;
|
||||||
|
const to = searchParams.get('to') ?? undefined;
|
||||||
|
const result = await getTelemetryGeoDistribution(jwt, from, to);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
21
dashboards/admin-web/src/app/api/telemetry/metrics/route.ts
Normal file
21
dashboards/admin-web/src/app/api/telemetry/metrics/route.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { getTelemetryMetrics } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
function getJwt(req: NextRequest): string {
|
||||||
|
const cookie = req.headers.get('cookie') ?? '';
|
||||||
|
const match = cookie.match(/(?:^|;\s*)token=([^;]+)/);
|
||||||
|
if (match) return match[1];
|
||||||
|
return req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const jwt = getJwt(req);
|
||||||
|
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await getTelemetryMetrics(jwt);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import {
|
||||||
|
updateTelemetryPolicy,
|
||||||
|
deleteTelemetryPolicy,
|
||||||
|
} from '@/lib/platform-client';
|
||||||
|
|
||||||
|
function getJwt(req: NextRequest): string {
|
||||||
|
const cookie = req.headers.get('cookie') ?? '';
|
||||||
|
const match = cookie.match(/(?:^|;\s*)token=([^;]+)/);
|
||||||
|
if (match) return match[1];
|
||||||
|
return req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function PUT(
|
||||||
|
req: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
const jwt = getJwt(req);
|
||||||
|
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { id } = await params;
|
||||||
|
const body = await req.json();
|
||||||
|
const result = await updateTelemetryPolicy(jwt, id, body);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function DELETE(
|
||||||
|
req: NextRequest,
|
||||||
|
{ params }: { params: Promise<{ id: string }> }
|
||||||
|
) {
|
||||||
|
const jwt = getJwt(req);
|
||||||
|
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { id } = await params;
|
||||||
|
const result = await deleteTelemetryPolicy(jwt, id);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { previewTelemetryPolicy } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
function getJwt(req: NextRequest): string {
|
||||||
|
const cookie = req.headers.get('cookie') ?? '';
|
||||||
|
const match = cookie.match(/(?:^|;\s*)token=([^;]+)/);
|
||||||
|
if (match) return match[1];
|
||||||
|
return req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
const jwt = getJwt(req);
|
||||||
|
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const { targeting } = await req.json();
|
||||||
|
const result = await previewTelemetryPolicy(jwt, targeting || {});
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
37
dashboards/admin-web/src/app/api/telemetry/policies/route.ts
Normal file
37
dashboards/admin-web/src/app/api/telemetry/policies/route.ts
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import {
|
||||||
|
listTelemetryPolicies,
|
||||||
|
createTelemetryPolicy,
|
||||||
|
} from '@/lib/platform-client';
|
||||||
|
|
||||||
|
function getJwt(req: NextRequest): string {
|
||||||
|
const cookie = req.headers.get('cookie') ?? '';
|
||||||
|
const match = cookie.match(/(?:^|;\s*)token=([^;]+)/);
|
||||||
|
if (match) return match[1];
|
||||||
|
return req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const jwt = getJwt(req);
|
||||||
|
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await listTelemetryPolicies(jwt);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function POST(req: NextRequest) {
|
||||||
|
const jwt = getJwt(req);
|
||||||
|
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const body = await req.json();
|
||||||
|
const result = await createTelemetryPolicy(jwt, body);
|
||||||
|
return NextResponse.json(result, { status: 201 });
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
34
dashboards/admin-web/src/app/api/telemetry/route.ts
Normal file
34
dashboards/admin-web/src/app/api/telemetry/route.ts
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { NextRequest, NextResponse } from 'next/server';
|
||||||
|
import { queryTelemetryEvents, queryTelemetryClusters } from '@/lib/platform-client';
|
||||||
|
|
||||||
|
function getJwt(req: NextRequest): string {
|
||||||
|
const cookie = req.headers.get('cookie') ?? '';
|
||||||
|
const match = cookie.match(/(?:^|;\s*)token=([^;]+)/);
|
||||||
|
if (match) return match[1];
|
||||||
|
return req.headers.get('authorization')?.replace('Bearer ', '') ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function GET(req: NextRequest) {
|
||||||
|
const jwt = getJwt(req);
|
||||||
|
if (!jwt) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
|
||||||
|
|
||||||
|
const { searchParams } = new URL(req.url);
|
||||||
|
const view = searchParams.get('view') || 'events';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const filters: Record<string, string> = {};
|
||||||
|
for (const [key, value] of searchParams.entries()) {
|
||||||
|
if (key !== 'view' && value) filters[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (view === 'clusters') {
|
||||||
|
const result = await queryTelemetryClusters(jwt, filters);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await queryTelemetryEvents(jwt, filters);
|
||||||
|
return NextResponse.json(result);
|
||||||
|
} catch (err) {
|
||||||
|
return NextResponse.json({ error: String(err) }, { status: 500 });
|
||||||
|
}
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user