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/ui/tabs.blade.php

@@ -0,0 +1,82 @@
+{{--
+    Tabs Component - TailServer Theme
+    
+    Usage:
+    <x-proxmox::ui.tabs :tabs="['Overview', 'Settings', 'Logs']" active="Overview">
+        <x-proxmox::ui.tab-panel name="Overview">Overview content</x-proxmox::ui.tab-panel>
+        <x-proxmox::ui.tab-panel name="Settings">Settings content</x-proxmox::ui.tab-panel>
+        <x-proxmox::ui.tab-panel name="Logs">Logs content</x-proxmox::ui.tab-panel>
+    </x-proxmox::ui.tabs>
+--}}
+
+@props([
+    'tabs' => [],
+    'active' => null,
+    'variant' => 'default',
+])
+
+@php
+    $variantClasses = [
+        'default' => [
+            'container' => 'border-b border-neutral/15',
+            'tab' => 'px-4 py-3 text-sm font-medium border-b-2 -mb-px transition-all duration-200',
+            'active' => 'text-primary border-primary',
+            'inactive' => 'text-base/50 border-transparent hover:text-base hover:border-neutral/30',
+        ],
+        'pills' => [
+            'container' => 'flex gap-1.5 p-1.5 bg-neutral/5 rounded-xl border border-neutral/10',
+            'tab' => 'px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200',
+            'active' => 'bg-background-secondary text-base shadow-md',
+            'inactive' => 'text-base/50 hover:text-base hover:bg-neutral/10',
+        ],
+        'buttons' => [
+            'container' => 'flex gap-2',
+            'tab' => 'px-4 py-2.5 text-sm font-medium rounded-xl border transition-all duration-200',
+            'active' => 'bg-primary text-white border-primary shadow-md shadow-primary/25',
+            'inactive' => 'bg-background-secondary text-base/60 border-neutral/20 hover:border-neutral/40 hover:text-base hover:shadow-sm',
+        ],
+    ];
+    
+    $styles = $variantClasses[$variant] ?? $variantClasses['default'];
+    $activeTab = $active ?? ($tabs[0] ?? null);
+@endphp
+
+<div 
+    x-data="{ activeTab: '{{ $activeTab }}' }"
+    {{ $attributes }}
+>
+    {{-- Tab Navigation --}}
+    <div class="{{ $styles['container'] }}">
+        <nav class="flex @if($variant === 'default') -mb-px @endif">
+            @foreach($tabs as $tab)
+                @php
+                    $tabName = is_array($tab) ? ($tab['name'] ?? $tab['label'] ?? '') : $tab;
+                    $tabLabel = is_array($tab) ? ($tab['label'] ?? $tab['name'] ?? '') : $tab;
+                    $tabIcon = is_array($tab) ? ($tab['icon'] ?? null) : null;
+                    $tabBadge = is_array($tab) ? ($tab['badge'] ?? null) : null;
+                @endphp
+                <button
+                    type="button"
+                    @click="activeTab = '{{ $tabName }}'"
+                    :class="activeTab === '{{ $tabName }}' ? '{{ $styles['active'] }}' : '{{ $styles['inactive'] }}'"
+                    class="{{ $styles['tab'] }} flex items-center gap-2"
+                >
+                    @if($tabIcon)
+                        <x-dynamic-component :component="$tabIcon" class="size-4" />
+                    @endif
+                    <span>{{ $tabLabel }}</span>
+                    @if($tabBadge)
+                        <span class="px-1.5 py-0.5 text-xs font-semibold rounded-full bg-primary/10 text-primary">
+                            {{ $tabBadge }}
+                        </span>
+                    @endif
+                </button>
+            @endforeach
+        </nav>
+    </div>
+    
+    {{-- Tab Panels --}}
+    <div class="mt-4">
+        {{ $slot }}
+    </div>
+</div>