Whisper Admin Dashboard ✨

Beautiful, modern admin dashboard for managing Whisper API keys and transcriptions with a distinctive "Sound Wave Elegance" design aesthetic.

✨ Features

• 🔐 Secure Authentication: JWT-based admin login with beautiful glass-morphism UI
• 🔑 API Key Management: Create, view, and delete API keys with elegant card layouts
• 📜 Transcription History: View all transcriptions with advanced filtering and search
• 🔄 Real-time Updates: Refresh and monitor transcription status with smooth animations
• 📱 Fully Responsive: Optimized for desktop, tablet, and mobile devices
• 🎨 Modern Design: "Sound Wave Elegance" aesthetic with purple gradients and micro-interactions
• ⚡ Performance: Optimized build with Turbopack, fast page loads
• ♿ Accessible: WCAG AA compliant with keyboard navigation support

🎨 Design Highlights

• Custom Color Palette: Purple-cyan gradient theme inspired by audio waveforms
• Beautiful Typography: Outfit + JetBrains Mono fonts
• Glass Morphism Effects: Translucent cards with backdrop blur
• Smooth Animations: Slide-up, scale-in, and staggered animations
• Gradient Backgrounds: Dynamic multi-color gradients
• Sound Wave Elements: Animated background effects on login page
• Status Badges: Color-coded status indicators with icons

See DESIGN_GUIDE.md for complete design system documentation.

🛠 Tech Stack

• Next.js 16.1.6: React framework with App Router & Turbopack
• React 19.2.3: Latest React with modern hooks
• TypeScript 5: Type-safe development
• Tailwind CSS 4: Utility-first CSS with custom design tokens
• Axios: HTTP client for API requests
• date-fns: Date formatting utilities
• js-cookie: Client-side cookie management

Prerequisites

• Node.js 18+ or 20+
• npm or yarn
• Running Whisper backend at http://localhost:8000

Installation

cd dashboard-admin
npm install

Configuration

Create or edit .env.local:

NEXT_PUBLIC_API_BASE_URL=http://localhost:8000

Running the Dashboard

# Development mode (runs on port 3008)
npm run dev

# Production build
npm run build
npm start

Access the dashboard at: http://localhost:3008

Default Credentials

• Username: admin
• Password: whisper_admin_2026

⚠️ IMPORTANT: Change the default password in the backend .env file before deploying to production!

Usage

1. Login

Navigate to http://localhost:3008/login and enter your admin credentials.

2. Manage API Keys

• Create New Key: Click "Create New Key" button, enter name and description
• View Keys: See all API keys with creation date, last used date, and status
• Copy Key: When created, copy the API key (shown only once!)
• Delete Key: Remove API keys that are no longer needed

3. View Transcriptions

• List All: View all transcriptions from all API keys
• View Details: Click "View" to see full transcription text and metadata
• Status Tracking: Monitor transcription status (pending, processing, completed, failed)
• Refresh: Update the list to see latest transcriptions

Project Structure

dashboard-admin/
├── app/
│   ├── dashboard/
│   │   ├── api-keys/
│   │   │   └── page.tsx          # API Keys management
│   │   ├── transcriptions/
│   │   │   └── page.tsx          # Transcriptions list
│   │   └── page.tsx              # Dashboard redirect
│   ├── login/
│   │   └── page.tsx              # Login page
│   ├── layout.tsx                # Root layout with AuthProvider
│   ├── page.tsx                  # Homepage (redirects)
│   └── globals.css               # Global styles
├── components/
│   ├── dashboard-layout.tsx      # Dashboard layout with nav
│   └── protected-route.tsx       # Auth wrapper component
├── lib/
│   ├── api-client.ts             # API client with auth
│   ├── auth-context.tsx          # Auth context provider
│   └── types.ts                  # TypeScript types
├── .env.local                    # Environment variables
├── package.json
└── README.md

API Integration

The dashboard integrates with the following backend endpoints:

Admin Endpoints

• POST /api/admin/login - Admin authentication
• GET /api/admin/api-keys - List all API keys
• POST /api/admin/api-keys - Create new API key
• DELETE /api/admin/api-keys/{key_id} - Delete API key
• GET /api/admin/transcriptions - List all transcriptions

Authentication

All admin requests use Bearer token authentication:

Authorization: Bearer {JWT_TOKEN}

The token is stored in cookies and automatically included in requests.

Development

Type Checking

npm run lint

Code Style

This project uses:

• ESLint for code quality
• TypeScript for type safety
• Tailwind CSS for styling

Troubleshooting

Cannot connect to backend

Make sure the Whisper backend is running:

cd ../py-whisper-be
uvicorn app.main:app --reload

Port 3008 already in use

Change the port in package.json:

{
  "scripts": {
    "dev": "next dev -p 3009"
  }
}

Authentication errors

Check that:

1. Backend is running and accessible
2. Admin credentials are correct
3. JWT token hasn't expired (valid for 7 days)

Security Notes

• JWT tokens are stored in HTTP-only cookies
• Tokens expire after 7 days
• All API requests are authenticated
• Use HTTPS in production
• Change default admin password
• Implement rate limiting for production

Production Deployment

1. Set environment variables:

   NEXT_PUBLIC_API_BASE_URL=https://your-api-domain.com

2. Build the application:

   npm run build

3. Start the production server:

   npm start

4. Use a reverse proxy (Nginx/Caddy) for HTTPS

License

MIT