50 lines
1.4 KiB
HTML
50 lines
1.4 KiB
HTML
<section id="page-usage" class="page active">
|
|
<div class="usage-header">
|
|
<h2>API Usage & Statistics</h2>
|
|
<div class="usage-controls">
|
|
<div class="date-range">
|
|
<label>From:</label>
|
|
<input type="date" id="usage-from" />
|
|
<label>To:</label>
|
|
<input type="date" id="usage-to" />
|
|
<button id="usage-apply-filter" class="btn-secondary">Apply</button>
|
|
</div>
|
|
<div class="export-actions">
|
|
<button id="export-json" class="btn-secondary">Export JSON</button>
|
|
<button id="export-csv" class="btn-secondary">Export CSV</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="usage-stats">
|
|
<div class="stat-card">
|
|
<h4>Total Requests</h4>
|
|
<div class="stat-value" id="stat-requests">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h4>Total Tokens</h4>
|
|
<div class="stat-value" id="stat-tokens">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h4>Estimated Cost</h4>
|
|
<div class="stat-value" id="stat-cost">$0.00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="usage-charts">
|
|
<div class="chart-container">
|
|
<h4>Usage by Provider</h4>
|
|
<canvas id="chart-provider"></canvas>
|
|
</div>
|
|
<div class="chart-container">
|
|
<h4>Usage by Agent</h4>
|
|
<canvas id="chart-agent"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="usage-data" class="usage-details">
|
|
<h3>Provider Details</h3>
|
|
<div class="usage-grid" id="provider-grid"></div>
|
|
</div>
|
|
</section>
|