first version
This commit is contained in:
111
templates/base.html
Normal file
111
templates/base.html
Normal file
@ -0,0 +1,111 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}OpenWebUI Monitoring Dashboard{% endblock %}</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<style>
|
||||
.navbar-brand {
|
||||
font-weight: bold;
|
||||
}
|
||||
.stats-card {
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.stats-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.table-responsive {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar {
|
||||
min-height: calc(100vh - 56px);
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.main-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/dashboard">
|
||||
<i class="bi bi-speedometer2"></i> OpenWebUI Monitor
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<span class="navbar-text">
|
||||
<i class="bi bi-clock"></i> Last Updated: <span id="last-updated">{{ "now" }}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<!-- Sidebar -->
|
||||
<nav class="col-md-3 col-lg-2 d-md-block sidebar">
|
||||
<div class="position-sticky pt-3">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if request.url.path == '/dashboard' %}active{% endif %}" href="/dashboard">
|
||||
<i class="bi bi-house"></i> Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if '/logs' in request.url.path %}active{% endif %}" href="/dashboard/logs">
|
||||
<i class="bi bi-journal-text"></i> Logs
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if '/users_report' in request.url.path %}active{% endif %}" href="/dashboard/users_report">
|
||||
<i class="bi bi-people"></i> Users Report
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 main-content">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Auto refresh functionality -->
|
||||
<script>
|
||||
function updateTimestamp() {
|
||||
document.getElementById('last-updated').textContent = new Date().toLocaleString();
|
||||
}
|
||||
|
||||
// Update timestamp every 30 seconds
|
||||
setInterval(updateTimestamp, 30000);
|
||||
updateTimestamp();
|
||||
|
||||
// Auto refresh page every 5 minutes for dashboard
|
||||
if (window.location.pathname === '/dashboard') {
|
||||
setInterval(() => {
|
||||
window.location.reload();
|
||||
}, 300000);
|
||||
}
|
||||
</script>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
157
templates/dashboard.html
Normal file
157
templates/dashboard.html
Normal file
@ -0,0 +1,157 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Dashboard - OpenWebUI Monitor{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<h1 class="h2">Dashboard</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group me-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.location.reload()">
|
||||
<i class="bi bi-arrow-clockwise"></i> Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 24 Hour Statistics -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card stats-card h-100 border-primary">
|
||||
<div class="card-body text-center">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title text-primary">
|
||||
<i class="bi bi-chat-dots"></i> Total Chats
|
||||
</h5>
|
||||
<h2 class="card-text">{{ stats.total_chats }}</h2>
|
||||
<small class="text-muted">Last 24 hours</small>
|
||||
</div>
|
||||
<div class="text-primary">
|
||||
<i class="bi bi-chat-dots display-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card stats-card h-100 border-success">
|
||||
<div class="card-body text-center">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title text-success">
|
||||
<i class="bi bi-cpu"></i> Total Tokens
|
||||
</h5>
|
||||
<h2 class="card-text">{{ "{:,}".format(stats.total_tokens) }}</h2>
|
||||
<small class="text-muted">Last 24 hours</small>
|
||||
</div>
|
||||
<div class="text-success">
|
||||
<i class="bi bi-cpu display-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 mb-3">
|
||||
<div class="card stats-card h-100 border-warning">
|
||||
<div class="card-body text-center">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h5 class="card-title text-warning">
|
||||
<i class="bi bi-currency-dollar"></i> Total Cost
|
||||
</h5>
|
||||
<h2 class="card-text">${{ stats.total_cost }}</h2>
|
||||
<small class="text-muted">Last 24 hours</small>
|
||||
</div>
|
||||
<div class="text-warning">
|
||||
<i class="bi bi-currency-dollar display-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-lightning"></i> Quick Actions
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="d-grid">
|
||||
<a href="/dashboard/logs" class="btn btn-outline-primary btn-lg">
|
||||
<i class="bi bi-journal-text"></i> View Recent Logs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="d-grid">
|
||||
<a href="/dashboard/users_report" class="btn btn-outline-success btn-lg">
|
||||
<i class="bi bi-people"></i> View Users Report
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Information -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-info-circle"></i> System Information
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-4">Status:</dt>
|
||||
<dd class="col-sm-8">
|
||||
<span class="badge bg-success">
|
||||
<i class="bi bi-check-circle"></i> Online
|
||||
</span>
|
||||
</dd>
|
||||
<dt class="col-sm-4">Database:</dt>
|
||||
<dd class="col-sm-8">
|
||||
<span class="badge bg-info">SQLite</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<dl class="row">
|
||||
<dt class="col-sm-4">API Version:</dt>
|
||||
<dd class="col-sm-8">v1.0</dd>
|
||||
<dt class="col-sm-4">Last Sync:</dt>
|
||||
<dd class="col-sm-8" id="current-time"></dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
function updateCurrentTime() {
|
||||
document.getElementById('current-time').textContent = new Date().toLocaleString();
|
||||
}
|
||||
|
||||
updateCurrentTime();
|
||||
setInterval(updateCurrentTime, 1000);
|
||||
</script>
|
||||
{% endblock %}
|
||||
163
templates/logs.html
Normal file
163
templates/logs.html
Normal file
@ -0,0 +1,163 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Logs - OpenWebUI Monitor{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<h1 class="h2">API Call Logs</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group me-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.location.reload()">
|
||||
<i class="bi bi-arrow-clockwise"></i> Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if logs %}
|
||||
<!-- Summary Info -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
Showing <strong>{{ logs|length }}</strong> most recent API calls.
|
||||
Logs are ordered by timestamp (newest first).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Logs Table -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-journal-text"></i> Recent API Calls
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th scope="col">
|
||||
<i class="bi bi-calendar"></i> Timestamp
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-envelope"></i> User Email
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-cpu"></i> Model
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-arrow-down"></i> Input Tokens
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-arrow-up"></i> Output Tokens
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-plus-circle"></i> Total Tokens
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-currency-dollar"></i> Cost (USD)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for log in logs %}
|
||||
<tr>
|
||||
<td>
|
||||
<small class="text-muted">{{ log.datetime }}</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary">{{ log.user_email }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ log.model_id }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-info">{{ "{:,}".format(log.input_tokens) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-success">{{ "{:,}".format(log.output_tokens) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{{ "{:,}".format(log.total_tokens) }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-warning text-dark">${{ log.cost_usd }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Summary -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-bar-chart"></i> Current Page Statistics
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="text-center">
|
||||
<h4 class="text-primary">{{ logs|length }}</h4>
|
||||
<small class="text-muted">Total Calls</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="text-center">
|
||||
<h4 class="text-success">{{ "{:,}".format(logs|sum(attribute='input_tokens')) }}</h4>
|
||||
<small class="text-muted">Input Tokens</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="text-center">
|
||||
<h4 class="text-info">{{ "{:,}".format(logs|sum(attribute='output_tokens')) }}</h4>
|
||||
<small class="text-muted">Output Tokens</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="text-center">
|
||||
<h4 class="text-warning">${{ "%.4f"|format(logs|sum(attribute='cost_usd')) }}</h4>
|
||||
<small class="text-muted">Total Cost</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<!-- No Data -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="bi bi-journal-x display-1 text-muted"></i>
|
||||
<h3 class="mt-3">No Logs Available</h3>
|
||||
<p class="text-muted">No API calls have been recorded yet.</p>
|
||||
<a href="/dashboard" class="btn btn-primary">
|
||||
<i class="bi bi-arrow-left"></i> Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Auto-refresh every 30 seconds
|
||||
setInterval(() => {
|
||||
window.location.reload();
|
||||
}, 30000);
|
||||
</script>
|
||||
{% endblock %}
|
||||
219
templates/users_report.html
Normal file
219
templates/users_report.html
Normal file
@ -0,0 +1,219 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Users Report - OpenWebUI Monitor{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<h1 class="h2">Users Report</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group me-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.location.reload()">
|
||||
<i class="bi bi-arrow-clockwise"></i> Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if users %}
|
||||
<!-- Summary Info -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
Total of <strong>{{ users|length }}</strong> users found.
|
||||
Users are sorted by total cost (highest first).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary Statistics -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-center border-primary">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-primary">
|
||||
<i class="bi bi-people"></i> Total Users
|
||||
</h5>
|
||||
<h3 class="card-text">{{ users|length }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-center border-success">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-success">
|
||||
<i class="bi bi-chat-dots"></i> Total Calls
|
||||
</h5>
|
||||
<h3 class="card-text">{{ "{:,}".format(users|sum(attribute='total_calls')) }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-center border-info">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-info">
|
||||
<i class="bi bi-cpu"></i> Total Tokens
|
||||
</h5>
|
||||
<h3 class="card-text">{{ "{:,}".format(users|sum(attribute='total_tokens')) }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card text-center border-warning">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title text-warning">
|
||||
<i class="bi bi-currency-dollar"></i> Total Cost
|
||||
</h5>
|
||||
<h3 class="card-text">${{ "%.4f"|format(users|sum(attribute='total_cost')) }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Users Table -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-table"></i> User Consumption Details
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover mb-0">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th scope="col">
|
||||
<i class="bi bi-hash"></i> Rank
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-envelope"></i> User Email
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-chat-dots"></i> Total Calls
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-arrow-down"></i> Input Tokens
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-arrow-up"></i> Output Tokens
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-plus-circle"></i> Total Tokens
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-currency-dollar"></i> Total Cost (USD)
|
||||
</th>
|
||||
<th scope="col">
|
||||
<i class="bi bi-bar-chart"></i> Avg Cost/Call
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user in users %}
|
||||
<tr>
|
||||
<td>
|
||||
{% if loop.index == 1 %}
|
||||
<span class="badge bg-warning text-dark">
|
||||
<i class="bi bi-trophy"></i> {{ loop.index }}
|
||||
</span>
|
||||
{% elif loop.index <= 3 %}
|
||||
<span class="badge bg-secondary">
|
||||
<i class="bi bi-award"></i> {{ loop.index }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-light text-dark">{{ loop.index }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-person-circle me-2"></i>
|
||||
<strong>{{ user.email }}</strong>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-info">{{ "{:,}".format(user.total_calls) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-primary">{{ "{:,}".format(user.total_input_tokens) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-success">{{ "{:,}".format(user.total_output_tokens) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<strong>{{ "{:,}".format(user.total_tokens) }}</strong>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-warning text-dark">${{ user.total_cost }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted">${{ "%.4f"|format(user.total_cost / user.total_calls) }}</small>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top Users Chart (Simple Visual) -->
|
||||
{% if users|length > 0 %}
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="bi bi-bar-chart"></i> Top Users by Cost
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% set max_cost = users[0].total_cost %}
|
||||
{% for user in users[:10] %}
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<small class="fw-bold">{{ user.email }}</small>
|
||||
<small class="text-muted">${{ user.total_cost }}</small>
|
||||
</div>
|
||||
<div class="progress" style="height: 20px;">
|
||||
<div class="progress-bar bg-primary" role="progressbar"
|
||||
style="width: {{ (user.total_cost / max_cost * 100) if max_cost > 0 else 0 }}%"
|
||||
aria-valuenow="{{ user.total_cost }}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="{{ max_cost }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<!-- No Data -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="bi bi-people-fill display-1 text-muted"></i>
|
||||
<h3 class="mt-3">No Users Found</h3>
|
||||
<p class="text-muted">No user data available yet. Users will appear here after API calls are recorded.</p>
|
||||
<a href="/dashboard" class="btn btn-primary">
|
||||
<i class="bi bi-arrow-left"></i> Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Auto-refresh every 60 seconds
|
||||
setInterval(() => {
|
||||
window.location.reload();
|
||||
}, 60000);
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user