46 lines
2.2 KiB
PHP
46 lines
2.2 KiB
PHP
<div>
|
|
@if ($hasTransactions)
|
|
|
|
<div class="my-6">
|
|
<div class="flex justify-between py-1">
|
|
<span class="text-gray text-sm">
|
|
{{ __('Account usage') }}
|
|
<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> |