Enhance layout and components with improved accessibility and performance

- 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

themes/lucentui/views/components/progress-bar.blade.php

@@ -0,0 +1,82 @@
+@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