feat: separate routes v2

views/usage.html

@@ -0,0 +1,49 @@
+<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>