Skip to content

User Management Pages

Purpose: User account and analytics
Category: Account Management
Pages: 2 pages
Audience: Authenticated users

1. Profile Page

File: src/app/profile/page.tsx (26 lines)
Route: /profile
Type: Protected

Features:

Profile Picture Upload:

  • Drag & drop or click to upload
  • Image cropping
  • Max size: 5MB
  • Formats: JPG, PNG, WebP
  • Cloud storage (S3/CDN)

Password Change:

  • Current password verification
  • New password validation (min 6 chars)
  • Confirmation field
  • Success notification

Email Verification:

  • Verification status badge
  • Resend verification email button

API Integration:

  • GET /v2/user/{id} - Get user profile
  • PUT /v2/user/{id} - Update profile
  • POST /v2/user/upload-avatar - Upload profile picture
  • POST /v2/user/change-password - Change password
  • POST /v2/user/verify-email - Send verification email
  • POST /v2/user/request-data-export - GDPR data export
  • DELETE /v2/user/{id} - Delete account

State Management:

  • Form validation
  • Loading states
  • Success/error messages
  • Unsaved changes warning

2. Analytics Page

File: src/app/analytics/page.tsx (12 lines)
Route: /analytics

  • Browser Distribution

Visualizations:

  • Line charts (usage over time)
  • Bar charts (chatbot comparison)
  • Pie charts (device/browser split)
  • Heatmaps (peak usage times)

Chart Library: Recharts or Chart.js

Time Filters:

  • Last 7 days
  • Last 30 days
  • Last 3 months
  • Last year
  • Custom date range

Export Options:

  • CSV export
  • PDF report
  • Email report

API Integration:

  • GET /v2/analytics/overview?user_id={id}&period={period} - Overview stats
  • GET /v2/analytics/chatbot/{id}?period={period} - Chatbot metrics
  • GET /v2/analytics/users?user_id={id}&period={period} - User insights
  • GET /v2/analytics/export?type={csv|pdf} - Export data

Real-Time Updates:

  • WebSocket connection for live data
  • Auto-refresh every 60 seconds
  • Last updated timestamp

Summary

Page Lines Key Features
Profile ~500 Settings, password, upload
Analytics ~700 Charts, metrics, exports

Total: ~1,200 lines

"Know your users, optimize your chatbots."