Refactor components to align with AdminLTE styles

- Updated alert component to use AdminLTE variant classes and added callout support.
- Refined badge component with AdminLTE base and variant classes, including size adjustments.
- Modified button component to implement AdminLTE button styles and improved loading indicators.
- Enhanced card component with AdminLTE variant classes and improved header/footer structure.
- Adjusted input component to follow AdminLTE design, including size classes and icon handling.
- Updated layout component to streamline button styles and loading indicators.
- Refined progress component to utilize AdminLTE styles for size and variant classes.
- Enhanced table component with AdminLTE table classes and improved loading state representation.

extensions/Servers/Proxmox/views/components/progress.blade.php

@@ -12,42 +12,49 @@
 @php
     $percentage = $max > 0 ? min(100, ($value / $max) * 100) : 0;
     
-    // Size classes
+    // AdminLTE size classes
     $sizeClasses = match($size) {
-        'xs' => 'h-1',
-        'sm' => 'h-2',
-        'md' => 'h-3',
-        'lg' => 'h-4',
-        'xl' => 'h-5',
-        default => 'h-3',
+        'xs' => 'lte-progress-xs',
+        'sm' => 'lte-progress-sm',
+        'md' => '',
+        'lg' => '',
+        'xl' => '',
+        default => '',
     };
     
-    // Variant classes for the fill
+    // Height style for non-standard sizes
+    $heightStyle = match($size) {
+        'lg' => 'height: 1.25rem;',
+        'xl' => 'height: 1.5rem;',
+        default => '',
+    };
+    
+    // AdminLTE variant classes for the fill
     $variantClasses = match($variant) {
-        'primary' => 'bg-primary',
-        'secondary' => 'bg-secondary',
-        'success' => 'bg-success',
-        'danger' => 'bg-danger',
-        'warning' => 'bg-warning',
-        'info' => 'bg-info',
-        'gradient' => 'bg-gradient-to-r from-primary to-secondary',
-        default => 'bg-primary',
+        'primary' => 'lte-bg-primary',
+        'secondary' => 'lte-bg-secondary',
+        'success' => 'lte-bg-success',
+        'danger' => 'lte-bg-danger',
+        'warning' => 'lte-bg-warning',
+        'info' => 'lte-bg-info',
+        'gradient' => 'lte-bg-gradient-primary',
+        default => 'lte-bg-primary',
     };
     
     // Dynamic color based on percentage
     if ($variant === 'auto') {
         if ($percentage >= 90) {
-            $variantClasses = 'bg-danger';
+            $variantClasses = 'lte-bg-danger';
         } elseif ($percentage >= 70) {
-            $variantClasses = 'bg-warning';
+            $variantClasses = 'lte-bg-warning';
         } else {
-            $variantClasses = 'bg-success';
+            $variantClasses = 'lte-bg-success';
         }
     }
     
-    // Animation classes
-    $animationClasses = $animated ? 'transition-all duration-500 ease-out' : '';
-    $stripedClasses = $striped ? 'bg-stripes' : '';
+    // Animation classes - AdminLTE style
+    $animatedClasses = $animated ? 'lte-progress-bar-animated' : '';
+    $stripedClasses = $striped ? 'lte-progress-bar-striped' : '';
 @endphp
 
 <div {{ $attributes->merge(['class' => 'flex flex-col gap-1.5']) }}>
@@ -55,19 +62,19 @@
     @if($label || $showValue)
         <div class="flex items-center justify-between text-sm">
             @if($label)
-                <span class="text-base/70 font-medium">{{ $label }}</span>
+                <span class="lte-text-muted" style="font-weight: 500;">{{ $label }}</span>
             @endif
             @if($showValue)
-                <span class="text-base/90 font-semibold">{{ number_format($percentage, 1) }}%</span>
+                <span style="font-weight: 600;">{{ number_format($percentage, 1) }}%</span>
             @endif
         </div>
     @endif
     
-    {{-- Progress bar container --}}
-    <div class="w-full bg-neutral/20 rounded-full overflow-hidden {{ $sizeClasses }}">
+    {{-- Progress bar container - AdminLTE style --}}
+    <div class="lte-progress {{ $sizeClasses }}" @if($heightStyle) style="{{ $heightStyle }}" @endif>
         {{-- Progress bar fill --}}
         <div 
-            class="{{ $sizeClasses }} {{ $variantClasses }} {{ $animationClasses }} {{ $stripedClasses }} rounded-full"
+            class="lte-progress-bar {{ $variantClasses }} {{ $animatedClasses }} {{ $stripedClasses }}"
             style="width: {{ $percentage }}%"
             role="progressbar"
             aria-valuenow="{{ $value }}"
@@ -76,27 +83,3 @@
         ></div>
     </div>
 </div>
-
-@once
-    <style>
-        .bg-stripes {
-            background-image: linear-gradient(
-                45deg,
-                rgba(255, 255, 255, 0.15) 25%,
-                transparent 25%,
-                transparent 50%,
-                rgba(255, 255, 255, 0.15) 50%,
-                rgba(255, 255, 255, 0.15) 75%,
-                transparent 75%,
-                transparent
-            );
-            background-size: 1rem 1rem;
-            animation: progress-stripes 1s linear infinite;
-        }
-        
-        @keyframes progress-stripes {
-            from { background-position: 1rem 0; }
-            to { background-position: 0 0; }
-        }
-    </style>
-@endonce