# Psyche Admin Dashboard

Web interface for managing AI virtual assistants in the Psyche platform.

Part of the Psyche AI Virtual Assistant Platform.

## Overview

The Admin Dashboard provides a comprehensive management interface for:

- **Personas**: Create and manage AI personas with personality, expertise, and memory
- **Sessions**: Monitor and manage active assistant sessions
- **Knowledge Base**: Upload and manage documents for RAG
- **Analytics**: View metrics, performance, and usage statistics
- **Tools**: Manage tool integrations and MCP connections
- **Settings**: Configure system settings and integrations

## Tech Stack

- **Framework**: Next.js 14.2 with App Router
- **UI Components**: Radix UI (40+ accessible components)
- **Styling**: Tailwind CSS with custom design system
- **State Management**: Zustand + React Query
- **Forms**: React Hook Form + Zod validation
- **Charts**: Recharts
- **Testing**: Vitest + Playwright

## Features

### Dashboard Overview
- Real-time session monitoring
- System health and status
- Quick statistics (active sessions, personas, response time)
- Recent activity feed

### Persona Management
- CRUD operations for AI personas
- Personality configuration (Big Five model)
- Expertise domain setup
- Voice and avatar configuration
- Training status tracking

### Session Management
- Active session monitoring
- Platform support (Zoom, Teams, Meet, Webex)
- Session metrics and analytics
- Message and tool usage tracking

### Knowledge Base
- Multi-format document upload (PDF, DOCX, MD, HTML, CSV, JSON)
- Document search and filtering
- Source tracking and versioning
- RAG pipeline integration

### Analytics
- Session volume trends
- Response time metrics
- User satisfaction scores
- Quality metrics (accuracy, latency, error rates)
- Platform usage breakdown

### Accessibility (WCAG 2.1)
- Skip navigation links
- Proper ARIA landmarks
- Keyboard navigation
- Screen reader support
- High contrast dark mode

## Project Structure

```
src/
├── app/                    # Next.js App Router
│   ├── layout.tsx          # Root layout
│   ├── providers.tsx       # Client providers
│   ├── auth/               # Authentication pages
│   └── dashboard/          # Dashboard pages
│       ├── personas/       # Persona management
│       ├── sessions/       # Session management
│       ├── knowledge/      # Knowledge base
│       ├── analytics/      # Analytics
│       ├── tools/          # Tool management
│       └── settings/       # Settings
├── components/             # React components
│   ├── ui/                 # Radix UI components
│   └── layout/             # Layout components
├── api/                    # API client
├── stores/                 # Zustand stores
├── hooks/                  # Custom hooks
├── types/                  # TypeScript types
├── lib/                    # Utilities
└── styles/                 # Global styles
```

## Development

### Using Nx

```bash
# Install dependencies (from monorepo root)
pnpm install

# Development server
nx dev psyche-admin
nx serve psyche-admin

# Production build
nx build psyche-admin

# Start production server
nx start psyche-admin

# Type checking
nx typecheck psyche-admin

# Linting
nx lint psyche-admin

# Formatting
nx format psyche-admin
nx format-check psyche-admin

# Testing
nx test psyche-admin
nx test-watch psyche-admin
nx test-cov psyche-admin

# Visual regression tests
nx test-visual psyche-admin
nx test-visual-update psyche-admin

# Bundle analysis
nx analyze psyche-admin

# Docker
nx docker-build psyche-admin
nx docker-run psyche-admin
```

### Direct Commands

```bash
cd apps/psyche/admin
pnpm dev          # Development server
pnpm build        # Production build
pnpm start        # Production server
pnpm lint         # ESLint
pnpm typecheck    # TypeScript check
pnpm test         # Unit tests
pnpm test:visual  # Playwright tests
```

## Configuration

### Environment Variables

| Variable               | Description           | Default                   |
| ---------------------- | --------------------- | ------------------------- |
| `NEXT_PUBLIC_API_URL`  | Backend API URL       | http://localhost:8000     |
| `NEXT_PUBLIC_WS_URL`   | WebSocket URL         | ws://localhost:8001       |
| `NEXT_PUBLIC_APP_URL`  | Application URL       | http://localhost:3000     |

### Next.js Configuration

- Server Actions enabled (2MB body limit)
- Optimized image formats (AVIF, WebP)
- Security headers (HSTS, CSP, X-Frame-Options)
- TypeScript strict mode

## API Integration

The dashboard communicates with backend services via:

- REST API at `NEXT_PUBLIC_API_URL`
- WebSocket for real-time updates at `NEXT_PUBLIC_WS_URL`

### API Endpoints

```
/api/v1/sessions     - Session management
/api/v1/personas     - Persona management
/api/v1/knowledge    - Knowledge base
/api/v1/tools        - Tool management
/api/v1/webhooks     - Webhook configuration
```

## Theming

- Light and dark mode support
- Custom color palette (Psyche blue)
- Tailwind CSS utility classes
- Glass morphism effects
- Smooth animations

## Testing

### Unit Tests (Vitest)
```bash
nx test psyche-admin
```

### Visual Regression (Playwright)
```bash
nx test-visual psyche-admin
```

### Coverage Report
```bash
nx test-cov psyche-admin
```

## Docker

### Build Image
```bash
nx docker-build psyche-admin
```

### Run Container
```bash
nx docker-run psyche-admin
```

The container:
- Runs on port 3000
- Uses Node.js 20 Alpine
- Includes health checks
- Non-root user (psyche)

## License

Proprietary - Oshun Platform