Refactor Proxmox server views for improved UI consistency and usability

- Updated server card component to use new UI elements and improved layout.
- Enhanced status display with badges and better status indicators.
- Refined quick info row for server details with consistent styling.
- Reorganized server configuration statistics into stat cards for clarity.
- Improved help modals for statistics and storage management sections.
- Streamlined alerts and warnings for better user experience.
- Updated storage management view to utilize new UI components and improve readability.

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

@@ -0,0 +1,102 @@
+@props([
+    'value' => 0,
+    'max' => 100,
+    'size' => 'md',
+    'variant' => 'primary',
+    'label' => null,
+    'showValue' => false,
+    'animated' => false,
+    'striped' => false,
+])
+
+@php
+    $percentage = $max > 0 ? min(100, ($value / $max) * 100) : 0;
+    
+    // Size classes
+    $sizeClasses = match($size) {
+        'xs' => 'h-1',
+        'sm' => 'h-2',
+        'md' => 'h-3',
+        'lg' => 'h-4',
+        'xl' => 'h-5',
+        default => 'h-3',
+    };
+    
+    // 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',
+    };
+    
+    // Dynamic color based on percentage
+    if ($variant === 'auto') {
+        if ($percentage >= 90) {
+            $variantClasses = 'bg-danger';
+        } elseif ($percentage >= 70) {
+            $variantClasses = 'bg-warning';
+        } else {
+            $variantClasses = 'bg-success';
+        }
+    }
+    
+    // Animation classes
+    $animationClasses = $animated ? 'transition-all duration-500 ease-out' : '';
+    $stripedClasses = $striped ? 'bg-stripes' : '';
+@endphp
+
+<div {{ $attributes->merge(['class' => 'flex flex-col gap-1.5']) }}>
+    {{-- Label and value row --}}
+    @if($label || $showValue)
+        <div class="flex items-center justify-between text-sm">
+            @if($label)
+                <span class="text-base/70 font-medium">{{ $label }}</span>
+            @endif
+            @if($showValue)
+                <span class="text-base/90 font-semibold">{{ 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 fill --}}
+        <div 
+            class="{{ $sizeClasses }} {{ $variantClasses }} {{ $animationClasses }} {{ $stripedClasses }} rounded-full"
+            style="width: {{ $percentage }}%"
+            role="progressbar"
+            aria-valuenow="{{ $value }}"
+            aria-valuemin="0"
+            aria-valuemax="{{ $max }}"
+        ></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