Initial commit

resources/views/livewire/account-usage-bar.blade.php

@@ -0,0 +1,46 @@
+<div>
+    @if ($hasTransactions)
+    
+    <div class="my-6">
+        <div class="flex justify-between py-1">
+            <span class="text-gray text-sm">
+                {{ __('Account usage') }} &nbsp;
+                <button
+                    wire:click="$dispatch('openAccountUsageInfoModal')"
+                    class="ml-1 underline hover:text-theme-accent underline cursor-pointer">
+                    {{ __('info') }}
+                </button>
+            </span>
+        </div>
+        <svg class="rc-progress-line" preserveAspectRatio="none" viewBox="0 0 100 1">
+            <path class="rc-progress-line-trail" d="M 0.5,0.5 L 99.5,0.5" fill-opacity="0" stroke-linecap="round" stroke-width="1" stroke="rgb(var(--color-secondary))"></path>
+
+            <!-- Path for the part up to 80% -->
+            <path class="rc-progress-line-path" d="M 0.5,0.5 L {{ min($balancePct, 80) }}.5,0.5" fill-opacity="0" stroke-linecap="round" stroke-width="1" stroke="rgb(var(--color-brand))"
+                  style="stroke-dasharray: {{ min($balancePct, 80) }}px, 100px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.5s ease, stroke 0.5s ease; ">
+            </path>
+
+            <!-- Path for the part over 80% -->
+            @if ($balancePct > 80)
+                <path class="rc-progress-line-path" d="M 80.5,0.5 L {{ $balancePct }}.5,0.5" fill-opacity="0" stroke-linecap="round" stroke-width="1" stroke="#ef4444"
+                      style="stroke-dasharray: {{ $balancePct - 80 }}px, 100px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.5s ease, stroke 0.5s ease; transition-delay: 0.5s ;
+">
+                </path>
+            @endif
+            
+        </svg>
+      
+        <div class="flex justify-between py-1">
+            <span class="text-theme-muted text-sm">
+                {{__('Balance limit of this account')}}: 
+                {{ ' ' . tbFormat($selectedAccount['limitMax'])}}</span>
+            @if ($balancePct > 80)
+                <span class="text-theme-muted text-sm">{{ tbFormat($selectedAccount['available']) . ' ' . __('available') }}</span>
+            @endif
+        </div>
+    </div>
+    @endif
+
+    <!-- Account Usage Info Modal -->
+    <livewire:account-usage-info-modal />
+</div>