1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-22 18:04:26 +04:00

Compare commits

..

2 Commits

Author SHA1 Message Date
codecalm
7e09ccab21 feat: add billing usage component to cards page 2025-12-12 20:38:04 +01:00
codecalm
bbfdc91ef9 feat: include anomaly alert component in cards page 2025-12-12 19:49:43 +01:00
4 changed files with 79 additions and 1 deletions

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" fill="none" viewBox="0 0 20 15"><path fill="#3d58db" fill-rule="evenodd" d="M0 0v15h20V0z" clip-rule="evenodd"/><path fill="#ffd018" fill-rule="evenodd" d="m9.407 2.442-.14.818.733-.385.735.386-.14-.818.594-.64h-.821L10 1l-.367.804h-.822zm0 10.855-.14.819.734-.387.735.387-.14-.819.594-.639h-.821L10 11.855l-.367.804h-.822l.595.64zM3.484 8.743l.14-.818-.594-.64h.822l.367-.803.367.804h.822l-.595.639.14.818-.734-.386zm1.352 1.77-.14.818.734-.386.735.386-.14-.818.594-.64h-.821L5.43 9.07l-.367.804H4.24zm9.009.818.14-.818-.595-.64h.822l.367-.803.368.804h.821l-.594.639.14.818-.735-.386zm-9.01-6.062-.14.818.735-.386.735.386-.14-.818.594-.639h-.821l-.368-.804-.367.804H4.24zm9.01.818.14-.818-.595-.639h.822l.367-.804.368.804h.821l-.594.64.14.817-.735-.386zM6.66 12.595l-.14.819.735-.387.734.386-.14-.818.595-.639h-.822l-.367-.804-.368.804h-.821zm5.418.819.14-.819-.594-.639h.821l.367-.804.368.804h.821l-.594.64.14.817-.735-.386zM6.52 3.971l.735-.387.734.387-.14-.818.595-.64h-.822l-.367-.804-.368.804h-.821l.594.64zm5.558 0 .14-.818-.594-.64h.821l.367-.804.368.804h.821l-.594.64.14.818-.735-.387zM15.14 7.85l-.14.818.735-.386.735.386-.14-.818.593-.64h-.82l-.368-.803-.368.804h-.821z" clip-rule="evenodd"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="16" fill="none"><mask id="a" width="21" height="16" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" d="M.001.927h20v15h-20z"/></mask><g mask="url(#a)"><path fill="#F7FCFF" fill-rule="evenodd" d="M.001.927v15h20v-15h-20Z" clip-rule="evenodd"/><mask id="b" width="21" height="16" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" fill-rule="evenodd" d="M.001.927v15h20v-15h-20Z" clip-rule="evenodd"/></mask><g fill-rule="evenodd" clip-rule="evenodd" mask="url(#b)"><path fill="#3D58DB" d="M.001.927v15h20v-15h-20Z"/><path fill="#FFD018" d="m9.407 3.137-.14.818L10 3.57l.735.386-.14-.818.594-.64h-.821L10 1.695l-.367.804h-.822l.595.639Zm0 10.855-.14.819.734-.387.735.387-.14-.819.594-.639h-.821L10 12.55l-.367.804h-.822l.595.64ZM3.484 9.438l.14-.818-.594-.64h.822l.367-.803.367.804h.822l-.595.639.14.818-.734-.386-.735.386Zm1.352 1.77-.14.818.734-.386.735.386-.14-.818.594-.64h-.821l-.368-.803-.367.804H4.24l.595.639Zm9.009.818.14-.818-.595-.64h.822l.367-.803.368.804h.821l-.594.639.14.818-.735-.386-.734.386Zm-9.01-6.062-.14.818.735-.386.735.386-.14-.818.594-.639h-.821l-.368-.804-.367.804H4.24l.595.64Zm9.01.818.14-.818-.595-.639h.822l.367-.804.368.804h.821l-.594.64.14.817-.735-.386-.734.386ZM6.66 13.29l-.14.819.735-.387.734.386-.14-.818.595-.639h-.822l-.367-.804-.368.804h-.821l.594.64Zm5.418.819.14-.819-.594-.639h.821l.367-.804.368.804h.821l-.594.64.14.817-.735-.386-.734.386ZM6.52 4.666l.735-.387.734.387-.14-.818.595-.64h-.822l-.367-.804-.368.804h-.821l.594.64-.14.818Zm5.558 0 .14-.818-.594-.64h.821l.367-.804.368.804h.821l-.594.64.14.818-.735-.387-.734.387Zm3.062 3.879-.14.818.735-.386.735.386-.14-.818.593-.64h-.82l-.368-.803-.368.804h-.821l.594.639Z"/></g></g></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@@ -59,6 +59,7 @@ permalink: cards.html
</a>
</div>
<div class="col-md-6 col-lg-3">
{% include "cards/anomaly-alert.html" %}
</div>
<div class="col-md-6 col-lg-3">
@@ -197,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=">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-pills=true %}</div>
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 %}</div>

View File

@@ -0,0 +1,7 @@
<div class="card">
<div class="card-body text-center">
<h3 class="card-title">Get alerted for anomalies</h3>
<p class="text-secondary">Automatically monitor your projects for anomalies and get notified.</p>
{% include "ui/button.html" text="Get 30 days for free" color="dark" %}
</div>
</div>

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>