Zededa Token Dashboard

A modern web dashboard for managing and monitoring AI token usage across Zededa enterprises. Built with Next.js, TypeScript, and Okta authentication.

🚀 Quick Start (No Okta Required)

Don't have Okta access yet? No problem! Run the dashboard in testing mode:

npm install
npm run dev

Open http://localhost:3000 and click "Continue to Dashboard"

✅ Testing mode is already configured in .env ✅ Uses hardcoded bearer token ✅ No Okta setup needed

See QUICKSTART.md for detailed instructions.

---

Features

• Okta Authentication: Secure authentication for Zededa employees only
• Token Limits Management: Set and update token limits per enterprise
• Real-time Usage Monitoring: Track token consumption with visual charts
• Auto-refresh: Automatic data refresh every 30 seconds
• Usage Visualization: Interactive charts showing token consumption
• Reset Functionality: Reset token usage for enterprises

Tech Stack

• Frontend: Next.js 14, React 18, TypeScript
• Styling: Tailwind CSS
• Authentication: Okta (OAuth 2.0 / OIDC)
• Charts: Recharts
• Icons: Lucide React
• HTTP Client: Axios
• Date Formatting: date-fns

Prerequisites

• Node.js 20 or higher
• npm or yarn
• Okta account with admin access
• Access to Zededa AI Agents backend API

Setup Instructions

1. Clone the Repository

cd zededa-agent-ui

2. Install Dependencies

npm install

3. Configure Okta

1. Log in to your Okta admin console

2. Create a new application:

   • Application Type: Single-Page Application (SPA)
   • Grant Types: Authorization Code with PKCE
   • Sign-in redirect URIs: http://localhost:3000/login/callback
   • Sign-out redirect URIs: http://localhost:3000
   • Trusted Origins: Add http://localhost:3000

3. Note down:

   • Okta domain (e.g., your-domain.okta.com)
   • Client ID

4. Configure Environment Variables

Create a .env file in the root directory:

cp .env.example .env

Edit .env with your values:

# Okta Configuration
NEXT_PUBLIC_OKTA_DOMAIN=your-okta-domain.okta.com
NEXT_PUBLIC_OKTA_CLIENT_ID=your-okta-client-id

# Backend API Configuration
NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api/v1

# Zededa Configuration
ZEDCLOUD_BASE_URL=https://zedcloud.zededa.net

5. Run the Development Server

npm run dev

Open http://localhost:3000 in your browser.

Docker Deployment

Build and Run with Docker

# Build the image
docker build -t zededa-token-dashboard .

# Run the container
docker run -p 3000:3000 \
  -e NEXT_PUBLIC_OKTA_DOMAIN=your-okta-domain.okta.com \
  -e NEXT_PUBLIC_OKTA_CLIENT_ID=your-client-id \
  -e NEXT_PUBLIC_API_BASE_URL=http://localhost:8080/api/v1 \
  zededa-token-dashboard

Using Docker Compose

# Start the dashboard
docker-compose up -d

# Stop the dashboard
docker-compose down

API Integration

The dashboard integrates with the Zededa AI Agents backend API:

Endpoints Used

1. GET /api/v1/tokens/limits

   • Fetch current token limits for an enterprise
   • Query param: enterprise_id

2. POST /api/v1/tokens/limits

   • Set or update token limits
   • Body: { enterprise_id, token_limit, refill_interval }

3. GET /api/v1/tokens/usage

   • Get token usage statistics
   • Query param: enterprise_id

4. DELETE /api/v1/tokens/usage

   • Reset token usage for an enterprise
   • Query param: enterprise_id

Authentication

The dashboard uses Okta for user authentication. After login, the Okta access token is used to authenticate API requests to the backend.

Note: In production, you should implement a token exchange mechanism to convert Okta tokens to Zedcloud bearer tokens on the backend.

Usage Guide

Login

1. Click "Sign in with Okta" on the login page
2. Enter your Zededa Okta credentials
3. You'll be redirected to the dashboard after successful authentication

Monitor Token Usage

1. Navigate to the "Usage Monitor" tab

2. Enter an enterprise ID

3. Click "Fetch Usage" to view:

   • Tokens used vs. limit
   • Usage percentage
   • Refill interval and timestamp
   • Visual charts

4. Enable "Auto-refresh" for real-time monitoring

Manage Token Limits

1. Navigate to the "Manage Limits" tab
2. Enter an enterprise ID
3. Click "Fetch Current" to load existing limits
4. Update the token limit and refill interval
5. Click "Save Token Limits" to apply changes

Reset Token Usage

1. Go to the "Usage Monitor" tab
2. Fetch usage for an enterprise
3. Click "Reset Usage" button
4. Confirm the action
5. Usage will be reset to zero

Project Structure

zededa-agent-ui/
├── app/                      # Next.js app directory
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Home page with auth logic
│   ├── globals.css          # Global styles
│   └── login/
│       └── callback/
│           └── page.tsx     # Okta callback handler
├── components/              # React components
│   ├── Dashboard.tsx        # Main dashboard layout
│   ├── LoginPage.tsx        # Login UI
│   ├── TokenLimitsManager.tsx   # Limits management
│   ├── TokenUsageMonitor.tsx    # Usage monitoring
│   └── UsageChart.tsx       # Usage visualization
├── lib/                     # Utilities and configurations
│   ├── api.ts              # API client
│   └── oktaConfig.ts       # Okta configuration
├── public/                  # Static assets
├── Dockerfile              # Docker configuration
├── docker-compose.yml      # Docker Compose configuration
├── next.config.js          # Next.js configuration
├── tailwind.config.ts      # Tailwind CSS configuration
└── tsconfig.json           # TypeScript configuration

Security Considerations

1. Okta Domain Restriction: The application should be configured in Okta to only allow users from the Zededa organization
2. API Authentication: All API requests require valid bearer tokens
3. HTTPS: Use HTTPS in production environments
4. Environment Variables: Never commit .env files to version control
5. Token Storage: Access tokens are stored in localStorage (consider more secure alternatives for production)

Production Deployment

Okta Configuration for Production

1. Update redirect URIs in Okta:

   • Sign-in: https://your-domain.com/login/callback
   • Sign-out: https://your-domain.com

2. Add production domain to Trusted Origins

Environment Variables

Update .env for production:

NEXT_PUBLIC_OKTA_DOMAIN=your-okta-domain.okta.com
NEXT_PUBLIC_OKTA_CLIENT_ID=your-production-client-id
NEXT_PUBLIC_API_BASE_URL=https://api.your-domain.com/api/v1
ZEDCLOUD_BASE_URL=https://zedcloud.zededa.net

Build for Production

npm run build
npm start

Deploy with Docker

docker build -t zededa-token-dashboard:production .
docker push your-registry/zededa-token-dashboard:production

Troubleshooting

Login Issues

• Verify Okta domain and client ID are correct
• Check redirect URIs match in Okta configuration
• Ensure Trusted Origins are configured in Okta

API Connection Issues

• Verify backend API is running
• Check NEXT_PUBLIC_API_BASE_URL is correct
• Ensure CORS is properly configured on the backend
• Verify bearer token is valid

Build Errors

• Clear .next folder: rm -rf .next
• Delete node_modules and reinstall: rm -rf node_modules && npm install
• Check Node.js version: node --version (should be 20+)

Development

Adding New Features

1. Create feature branch: git checkout -b feature/your-feature
2. Make changes and test locally
3. Commit changes: git commit -m "Add your feature"
4. Push and create PR: git push origin feature/your-feature

Code Style

• TypeScript for type safety
• Use functional components with hooks
• Follow React best practices
• Use Tailwind CSS for styling

License

Copyright © 2024 Zededa. All rights reserved.

Support

For issues or questions:

• Create an issue in the repository
• Contact the Zededa DevOps team
• Email: [email protected]