Spaces:

iajitpanday
/

vBot-2.1

Sleeping

App Files Files Community

Ajit Panday commited on Apr 5, 2025

Commit

1a39cdb

1 Parent(s): 1b35bfe

Add admin interface for customer management

Browse files

Files changed (2) hide show

app/static/admin.html +197 -0
main.py +6 -18

app/static/admin.html ADDED Viewed

	@@ -0,0 +1,197 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>vBot Admin Interface</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        .container { max-width: 800px; margin-top: 2rem; }
+        .customer-list { margin-top: 2rem; }
+        .token-section { margin-bottom: 2rem; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1 class="mb-4">vBot Admin Interface</h1>
+        <!-- Login Section -->
+        <div class="card token-section">
+            <div class="card-body">
+                <h5 class="card-title">Admin Login</h5>
+                <form id="loginForm">
+                    <div class="mb-3">
+                        <label for="username" class="form-label">Username</label>
+                        <input type="text" class="form-control" id="username" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="password" class="form-label">Password</label>
+                        <input type="password" class="form-control" id="password" required>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Login</button>
+                </form>
+                <div id="tokenStatus" class="mt-3"></div>
+            </div>
+        </div>
+        <!-- Add Customer Section -->
+        <div class="card">
+            <div class="card-body">
+                <h5 class="card-title">Add New Customer</h5>
+                <form id="customerForm">
+                    <div class="mb-3">
+                        <label for="name" class="form-label">Name</label>
+                        <input type="text" class="form-control" id="name" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="company_name" class="form-label">Company Name</label>
+                        <input type="text" class="form-control" id="company_name" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="email" class="form-label">Email</label>
+                        <input type="email" class="form-control" id="email" required>
+                    </div>
+                    <button type="submit" class="btn btn-success">Add Customer</button>
+                </form>
+                <div id="customerStatus" class="mt-3"></div>
+            </div>
+        </div>
+        <!-- Customer List Section -->
+        <div class="card customer-list">
+            <div class="card-body">
+                <h5 class="card-title">Customer List</h5>
+                <div id="customerList" class="table-responsive">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Company</th>
+                                <th>Email</th>
+                                <th>API Key</th>
+                                <th>Status</th>
+                            </tr>
+                        </thead>
+                        <tbody id="customerTableBody"></tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        let accessToken = null;
+        // Login Form Handler
+        document.getElementById('loginForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const username = document.getElementById('username').value;
+            const password = document.getElementById('password').value;
+            try {
+                const response = await fetch('/api/v1/token', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: `username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    accessToken = data.access_token;
+                    document.getElementById('tokenStatus').innerHTML =
+                        '<div class="alert alert-success">Login successful!</div>';
+                    loadCustomers();
+                } else {
+                    document.getElementById('tokenStatus').innerHTML =
+                        '<div class="alert alert-danger">Login failed. Please check your credentials.</div>';
+                }
+            } catch (error) {
+                document.getElementById('tokenStatus').innerHTML =
+                    '<div class="alert alert-danger">Error connecting to server.</div>';
+            }
+        });
+        // Customer Form Handler
+        document.getElementById('customerForm').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            if (!accessToken) {
+                document.getElementById('customerStatus').innerHTML =
+                    '<div class="alert alert-danger">Please login first.</div>';
+                return;
+            }
+            const customerData = {
+                name: document.getElementById('name').value,
+                company_name: document.getElementById('company_name').value,
+                email: document.getElementById('email').value
+            };
+            try {
+                const response = await fetch('/api/v1/customers/', {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${accessToken}`,
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(customerData)
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    document.getElementById('customerStatus').innerHTML =
+                        '<div class="alert alert-success">Customer added successfully!</div>';
+                    document.getElementById('customerForm').reset();
+                    loadCustomers();
+                } else {
+                    const error = await response.json();
+                    document.getElementById('customerStatus').innerHTML =
+                        `<div class="alert alert-danger">Error: ${error.detail}</div>`;
+                }
+            } catch (error) {
+                document.getElementById('customerStatus').innerHTML =
+                    '<div class="alert alert-danger">Error connecting to server.</div>';
+            }
+        });
+        // Load Customers
+        async function loadCustomers() {
+            if (!accessToken) return;
+            try {
+                const response = await fetch('/api/v1/customers', {
+                    headers: {
+                        'Authorization': `Bearer ${accessToken}`
+                    }
+                });
+                if (response.ok) {
+                    const customers = await response.json();
+                    const tbody = document.getElementById('customerTableBody');
+                    tbody.innerHTML = '';
+                    customers.forEach(customer => {
+                        const tr = document.createElement('tr');
+                        tr.innerHTML = `
+                            <td>${customer.name}</td>
+                            <td>${customer.company_name}</td>
+                            <td>${customer.email}</td>
+                            <td><code>${customer.api_key}</code></td>
+                            <td>${customer.is_active ? 'Active' : 'Inactive'}</td>
+                        `;
+                        tbody.appendChild(tr);
+                    });
+                }
+            } catch (error) {
+                console.error('Error loading customers:', error);
+            }
+        }
+        // Initial load if token exists
+        if (accessToken) {
+            loadCustomers();
+        }
+    </script>
+</body>
+</html>

main.py CHANGED Viewed

@@ -1,6 +1,8 @@
 from fastapi import FastAPI, File, UploadFile, HTTPException, Depends, Header, Form, status
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse
 from datetime import datetime
 import os
 from dotenv import load_dotenv
@@ -141,6 +143,9 @@ app.add_middleware(
     allow_headers=["*"],
 )
 # Initialize Hugging Face models
 transcriber = pipeline("automatic-speech-recognition", model=WHISPER_MODEL)
 summarizer = pipeline("summarization", model=SUMMARIZER_MODEL)
@@ -152,24 +157,7 @@ app.include_router(auth_router, prefix="/api/v1", tags=["auth"])
 @app.get("/")
 async def root():
     """Root endpoint providing API information"""
-    return {
-        "name": "vBot API",
-        "version": "1.0.0",
-        "description": "AI-powered call analysis tool for Asterisk-based PBX systems",
-        "endpoints": {
-            "process_call": "/api/v1/process-call",
-            "list_calls": "/api/v1/calls",
-            "get_call": "/api/v1/calls/{call_id}",
-            "health_check": "/api/v1/health",
-            "admin": {
-                "create_customer": "/api/v1/customers/",
-                "list_customers": "/api/v1/customers",
-                "get_customer": "/api/v1/customers/{customer_id}",
-                "delete_customer": "/api/v1/customers/{customer_id}"
-            }
-        },
-        "documentation": "/docs"
-    }
 async def get_customer_by_api_key(api_key: str = Header(...), db: Session = Depends(get_db)):
     """Get customer by API key"""

 from fastapi import FastAPI, File, UploadFile, HTTPException, Depends, Header, Form, status
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
 from datetime import datetime
 import os
 from dotenv import load_dotenv
     allow_headers=["*"],
 )
+# Mount static files
+app.mount("/static", StaticFiles(directory="app/static"), name="static")
 # Initialize Hugging Face models
 transcriber = pipeline("automatic-speech-recognition", model=WHISPER_MODEL)
 summarizer = pipeline("summarization", model=SUMMARIZER_MODEL)
 @app.get("/")
 async def root():
     """Root endpoint providing API information"""
+    return FileResponse("app/static/admin.html")
 async def get_customer_by_api_key(api_key: str = Header(...), db: Session = Depends(get_db)):
     """Get customer by API key"""