Joseph.Rawlings
f7766b6d67
- Refactor JavaScript functions to prevent duplicate initializations on navigation - Add skeleton loaders for invoices and services during loading states - Introduce a new progress bar component with customizable properties - Update dropdown and checkbox components for better styling and accessibility - Improve modal and navigation components with enhanced animations and structure
83 lines
2.4 KiB
PHP
83 lines
2.4 KiB
PHP
@props([
|
|
'value' => 0,
|
|
'max' => 100,
|
|
'color' => 'primary',
|
|
'size' => 'md',
|
|
'showLabel' => false,
|
|
'animated' => true,
|
|
'gradient' => false,
|
|
])
|
|
|
|
@php
|
|
$percentage = $max > 0 ? min(100, ($value / $max) * 100) : 0;
|
|
|
|
$sizeClasses = match($size) {
|
|
'sm' => 'h-1.5',
|
|
'lg' => 'h-4',
|
|
default => 'h-2.5',
|
|
};
|
|
|
|
$colorClasses = match($color) {
|
|
'success' => 'bg-success',
|
|
'warning' => 'bg-warning',
|
|
'error' => 'bg-error',
|
|
'info' => 'bg-info',
|
|
default => 'bg-primary',
|
|
};
|
|
|
|
$gradientClasses = match($color) {
|
|
'success' => 'bg-gradient-to-r from-green-400 to-emerald-500',
|
|
'warning' => 'bg-gradient-to-r from-yellow-400 to-orange-500',
|
|
'error' => 'bg-gradient-to-r from-red-400 to-rose-500',
|
|
'info' => 'bg-gradient-to-r from-blue-400 to-cyan-500',
|
|
default => 'bg-gradient-to-r from-primary to-secondary',
|
|
};
|
|
@endphp
|
|
|
|
<div {{ $attributes->merge(['class' => 'w-full']) }}>
|
|
@if($showLabel)
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-sm font-medium text-color-base">{{ $slot }}</span>
|
|
<span class="text-sm font-medium text-color-muted">{{ number_format($percentage, 0) }}%</span>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="w-full bg-neutral/30 rounded-full {{ $sizeClasses }} overflow-hidden">
|
|
<div
|
|
class="{{ $gradient ? $gradientClasses : $colorClasses }} {{ $sizeClasses }} rounded-full transition-all duration-500 ease-out {{ $animated ? 'animate-progress-fill' : '' }}"
|
|
style="width: {{ $percentage }}%"
|
|
role="progressbar"
|
|
aria-valuenow="{{ $value }}"
|
|
aria-valuemin="0"
|
|
aria-valuemax="{{ $max }}"
|
|
>
|
|
@if($animated && $percentage > 0)
|
|
<div class="h-full w-full bg-white/20 animate-progress-shine"></div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@once
|
|
@push('styles')
|
|
<style>
|
|
@keyframes progress-fill {
|
|
from { width: 0%; }
|
|
}
|
|
|
|
@keyframes progress-shine {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
.animate-progress-fill {
|
|
animation: progress-fill 1s ease-out;
|
|
}
|
|
|
|
.animate-progress-shine {
|
|
animation: progress-shine 2s ease-in-out infinite;
|
|
}
|
|
</style>
|
|
@endpush
|
|
@endonce
|