Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

feat: add billing usage component to cards page

Browse Source
This commit is contained in:
codecalm
2025-12-12 20:38:04 +01:00
parent bbfdc91ef9
commit 7e09ccab21
2 changed files with 70 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
preview/pages/cards.html
View File

@@ -198,6 +198,7 @@ permalink: cards.html
<div class="col-md-6 col-lg-3">{% include "cards/card.html" footer-elements="more,>switch" %}</div> <div class="col-md-6 col-lg-3">{% include "cards/card.html" footer-elements="more,>switch" %}</div>
<div class="col-md-6 col-lg-3">{% include "cards/card.html" footer-elements=">avatars" %}</div> <div class="col-md-6 col-lg-3">{% include "cards/card.html" footer-elements=">avatars" %}</div>
<div class="col-md-6 col-lg-4">{% include "cards/billing-usage.html" %}</div>
<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div> <div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div>
<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div> <div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div>
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 %}</div> <div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 %}</div>

69
shared/includes/cards/billing-usage.html Normal file
View File

@@ -0,0 +1,69 @@
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<div>30 days remaining in cycle</div>
{% include "ui/button.html" text="Billing" %}
</div>
<div class="row mb-4">
<div class="col">
<div class="text-secondary small mb-1">Included Credit</div>
<div class="mb-2">$4.22 / $20</div>
{% include "ui/progress.html" value="21.1" size="sm" color="primary" %}
</div>
<div class="col-auto text-end">
<div class="text-secondary small mb-1">On-Demand Charges</div>
<div>$0</div>
</div>
</div>
<div class="space-y space-y-2">
<div class="d-flex justify-content-between">
<div>Edge Function Execution Units</div>
<div>$2.00</div>
</div>
<div class="d-flex justify-content-between">
<div>Edge Middleware Invocations</div>
<div>$0.65</div>
</div>
<div class="d-flex justify-content-between">
<div>Function Invocations</div>
<div>$0.60</div>
</div>
<div class="d-flex justify-content-between">
<div>On-Demand Concurrent Build Minutes</div>
<div>$0.32</div>
</div>
<div class="d-flex justify-content-between">
<div>Fluid Active CPU</div>
<div>$0.19</div>
</div>
<div class="d-flex justify-content-between">
<div>Function Duration</div>
<div>$0.18</div>
</div>
<div class="d-flex justify-content-between">
<div>Image Optimization Transformation</div>
<div>$0.10</div>
</div>
<div class="d-flex justify-content-between">
<div>Fast Origin Transfer</div>
<div>$0.08</div>
</div>
<div class="d-flex justify-content-between">
<div>Fluid Provisioned Memory</div>
<div>$0.04</div>
</div>
<div class="d-flex justify-content-between">
<div>Image Optimization Cache Writes</div>
<div>$0.02</div>
</div>
</div>
<div class="text-center mt-4">
<button class="btn btn-icon" aria-label="Expand">
{% include "ui/icon.html" icon="arrow-up" %}
</button>
</div>
</div>
</div>