ZYM/ACMChat-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first version

Browse Source
This commit is contained in:
ZhuangYumin
2025-06-26 14:28:10 +08:00
parent 8e6ac6e0c3
commit a08d1c3287
8 changed files with 992 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
templates/users_report.html Normal file
View 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 %}