Restrict Usage view to admins only and document pricing

Changes:
1. Hide "📊 Usage" button from regular users - only admins can see statistics
2. Updated .env.example with detailed pricing documentation
3. Clarified that OpenAI API does NOT return costs, only token counts
4. Cost is calculated locally: (tokens / 1000) × price_per_1k

Cost Calculation:
- OpenAI API returns only usage.input_tokens and usage.output_tokens
- We calculate cost based on PROMPT_TOKEN_COST and COMPLETION_TOKEN_COST from .env
- Current values are placeholders - need to update with real prices from OpenAI pricing page
- Formula: cost = (prompt_tokens / 1000) × PROMPT_TOKEN_COST + (completion_tokens / 1000) × COMPLETION_TOKEN_COST

Admin-only features:
- 📊 Usage (token statistics)
- 👨‍💼 Admin (user management & analytics)

Regular users only see:
- 💬 Chat

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

backend/.env.example

@@ -1,32 +1,35 @@
-# Application Configuration
+# App
 APP_NAME=Seapac Ops Bot
 APP_ENV=development
 DEBUG=True
 SECRET_KEY=your-secret-key-here-change-in-production
 CORS_ORIGINS=http://localhost:3000
 
-# Database Configuration
-DATABASE_URL=postgresql+asyncpg://apac_ops_bot:secure_password@localhost:5432/apac_ops_bot
+# Database
+DATABASE_URL=postgresql+asyncpg://apac_ops_bot:password@localhost:5432/apac_ops_bot
 
-# Azure AD / MSAL Configuration
-AZURE_TENANT_ID=your-tenant-id-here
-AZURE_CLIENT_ID=your-client-id-here
-AZURE_CLIENT_SECRET=your-client-secret-here
+# Azure AD / MSAL
+AZURE_TENANT_ID=your-tenant-id
+AZURE_CLIENT_ID=your-client-id
+AZURE_CLIENT_SECRET=your-client-secret
 AZURE_REDIRECT_URI=http://localhost:8000/api/v1/auth/msal/callback
 
-# OpenAI Responses API Configuration
-OPENAI_API_KEY=sk-proj-your-api-key-here
+# OpenAI Responses API
+OPENAI_API_KEY=your-openai-api-key-here
 OPENAI_VECTOR_STORE_ID=vs_QkOKiQCqzCHS4iFT5lP9qUxc
 OPENAI_MODEL=gpt-5-nano-2025-08-07
 OPENAI_API_BASE=https://api.openai.com/v1
 
-# Redis Configuration
+# Redis
 REDIS_URL=redis://localhost:6379/0
 
 # Rate Limiting
 RATE_LIMIT_PER_MINUTE=30
 RATE_LIMIT_PER_DAY=1000
 
-# Token Cost Configuration (USD per 1K tokens)
-PROMPT_TOKEN_COST=0.0001
-COMPLETION_TOKEN_COST=0.0002
+# Token Costs (USD per 1K tokens) - UPDATE WITH REAL PRICES FROM OPENAI PRICING PAGE
+# Example prices (UPDATE THESE):
+# For gpt-4o: Input $2.50 per 1M tokens = 0.0025 per 1K, Output $10.00 per 1M = 0.010 per 1K
+# For gpt-4o-mini: Input $0.15 per 1M = 0.00015 per 1K, Output $0.60 per 1M = 0.0006 per 1K
+PROMPT_TOKEN_COST=0.0001      # TODO: Update with actual price for your model
+COMPLETION_TOKEN_COST=0.0002  # TODO: Update with actual price for your model

frontend/src/App.tsx

@@ -67,19 +67,21 @@ const AppContent: React.FC = () => {
           >
             💬 Chat
           </button>
-          <button
-            className={`btn-nav ${activeView === 'usage' ? 'active' : ''}`}
-            onClick={() => setActiveView('usage')}
-          >
-            📊 Usage
-          </button>
           {isAdmin && (
-            <button
-              className={`btn-nav ${activeView === 'admin' ? 'active' : ''}`}
-              onClick={() => setActiveView('admin')}
-            >
-              👨‍💼 Admin
-            </button>
+            <>
+              <button
+                className={`btn-nav ${activeView === 'usage' ? 'active' : ''}`}
+                onClick={() => setActiveView('usage')}
+              >
+                📊 Usage
+              </button>
+              <button
+                className={`btn-nav ${activeView === 'admin' ? 'active' : ''}`}
+                onClick={() => setActiveView('admin')}
+              >
+                👨‍💼 Admin
+              </button>
+            </>
           )}
           <div className="user-info">
             <span>👤 {user?.display_name} <span className="user-role">({user?.role})</span></span>