| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>LLM API — Usage & Billing</title> |
| <style> |
| body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f4f5f7; color: #1f2937; |
| margin: 0; padding: 40px; } |
| .card { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid #e5e7eb; |
| border-radius: 12px; padding: 32px 36px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } |
| h1 { font-size: 1.35rem; margin: 0 0 4px; } |
| .sub { color: #6b7280; font-size: 0.88rem; margin-bottom: 24px; } |
| .stats { display: flex; gap: 36px; margin-bottom: 28px; } |
| .stat .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; } |
| .stat .value { font-size: 1.5rem; font-weight: 700; margin-top: 2px; } |
| .stat .value.alert { color: #dc2626; } |
| table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } |
| th { text-align: left; color: #9ca3af; font-size: 0.72rem; text-transform: uppercase; |
| letter-spacing: 0.05em; padding: 8px 12px; border-bottom: 2px solid #e5e7eb; } |
| td { padding: 9px 12px; border-bottom: 1px solid #f3f4f6; } |
| td.cost { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } |
| tr.spike td { background: #fef2f2; } |
| tr.spike td.cost { color: #dc2626; } |
| .foot { margin-top: 20px; color: #9ca3af; font-size: 0.78rem; } |
| </style> |
| </head> |
| <body> |
| <div class="card"> |
| <h1>LLM API — Usage & Billing</h1> |
| <div class="sub">Project: prod-frontend · Period: May 5 – May 18, 2026</div> |
|
|
| <div class="stats"> |
| <div class="stat"> |
| <div class="label">14-day total</div> |
| <div class="value">$80.21</div> |
| </div> |
| <div class="stat"> |
| <div class="label">Avg / day (May 5–17)</div> |
| <div class="value">$4.66</div> |
| </div> |
| <div class="stat"> |
| <div class="label">Today</div> |
| <div class="value alert">$19.62</div> |
| </div> |
| </div> |
|
|
| <table> |
| <thead> |
| <tr><th>Date</th><th>API calls</th><th style="text-align:right">Cost (USD)</th></tr> |
| </thead> |
| <tbody> |
| <tr><td>2026-05-05</td><td>812</td><td class="cost">$4.21</td></tr> |
| <tr><td>2026-05-06</td><td>858</td><td class="cost">$4.68</td></tr> |
| <tr><td>2026-05-07</td><td>831</td><td class="cost">$4.55</td></tr> |
| <tr><td>2026-05-08</td><td>879</td><td class="cost">$4.92</td></tr> |
| <tr><td>2026-05-09</td><td>804</td><td class="cost">$4.33</td></tr> |
| <tr><td>2026-05-10</td><td>846</td><td class="cost">$4.71</td></tr> |
| <tr><td>2026-05-11</td><td>828</td><td class="cost">$4.58</td></tr> |
| <tr><td>2026-05-12</td><td>864</td><td class="cost">$4.80</td></tr> |
| <tr><td>2026-05-13</td><td>819</td><td class="cost">$4.44</td></tr> |
| <tr><td>2026-05-14</td><td>883</td><td class="cost">$4.95</td></tr> |
| <tr><td>2026-05-15</td><td>837</td><td class="cost">$4.62</td></tr> |
| <tr><td>2026-05-16</td><td>891</td><td class="cost">$5.07</td></tr> |
| <tr><td>2026-05-17</td><td>878</td><td class="cost">$4.73</td></tr> |
| <tr class="spike"><td>2026-05-18</td><td>1389</td><td class="cost">$19.62</td></tr> |
| </tbody> |
| </table> |
|
|
| <div class="foot">Exported from the provider billing console · figures in USD</div> |
| </div> |
| </body> |
| </html> |
|
|
