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

@@ -3,19 +3,29 @@
     'subtitle' => null,
     'icon' => null,
     'iconClass' => 'size-5',
+    'iconColor' => 'lte-text-primary',
     'actions' => null,
     'padding' => true,
     'flush' => false,
     'collapsible' => false,
     'collapsed' => false,
     'storageKey' => null,
+    'variant' => null,
+    'outline' => false,
 ])
 
 @php
-    $cardClasses = 'bg-background-secondary rounded-xl border border-neutral/20 shadow-sm';
-    $headerClasses = 'flex items-center justify-between gap-4';
-    $bodyClasses = $padding ? 'p-5' : '';
-    $headerPadding = $flush ? 'px-5 py-4' : ($padding ? 'pb-4' : 'p-5 pb-4');
+    // AdminLTE Card variant classes
+    $variantClasses = match($variant) {
+        'primary' => $outline ? 'lte-card-outline-primary' : 'lte-card-primary',
+        'success' => $outline ? 'lte-card-outline-success' : 'lte-card-success',
+        'warning' => $outline ? 'lte-card-outline-warning' : 'lte-card-warning',
+        'danger' => $outline ? 'lte-card-outline-danger' : 'lte-card-danger',
+        'info' => $outline ? 'lte-card-outline-info' : 'lte-card-info',
+        default => '',
+    };
+    
+    $cardClasses = "lte-card lte-slide-in-up $variantClasses";
 @endphp
 
 <div {{ $attributes->merge(['class' => $cardClasses]) }}
@@ -37,32 +47,40 @@
     @endif
 >
     @if($title || $icon || $actions || isset($header))
-        <div class="{{ $headerPadding }} {{ $headerClasses }} border-b border-neutral/10">
-            <div class="flex items-center gap-3">
+        <div class="lte-card-header">
+            <h3 class="lte-card-title">
                 @if($icon)
-                    <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                        <x-dynamic-component :component="$icon" class="{{ $iconClass }} text-primary" />
-                    </div>
+                    <span class="lte-info-box-icon lte-bg-light rounded" style="width: 36px; height: 36px; font-size: 1rem;">
+                        <x-dynamic-component :component="$icon" class="{{ $iconClass }} {{ $iconColor }}" />
+                    </span>
                 @endif
-                <div class="flex flex-col gap-0.5">
-                    @if($title)
-                        <h3 class="text-base font-semibold text-base/90">{{ $title }}</h3>
-                    @endif
+                <span>
+                    {{ $title }}
                     @if($subtitle)
-                        <p class="text-sm text-base/60">{{ $subtitle }}</p>
+                        <small class="lte-text-muted d-block" style="font-size: 0.8rem; font-weight: normal;">{{ $subtitle }}</small>
                     @endif
-                </div>
-            </div>
-            <div class="flex items-center gap-2">
+                </span>
+            </h3>
+            @if($actions || $collapsible)
+            <div class="lte-card-tools">
                 @if($actions)
                     {{ $actions }}
                 @endif
                 @if($collapsible)
-                    <button @click="toggle()" type="button" class="text-base/50 hover:text-base/70 transition-colors p-1 rounded-lg hover:bg-neutral/10">
-                        <x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-5 transition-transform duration-200 rotate-180' : 'size-5 transition-transform duration-200'" />
+                    <button 
+                        type="button" 
+                        @click="toggle()"
+                        class="lte-btn lte-btn-sm lte-btn-outline-secondary"
+                        style="padding: 0.25rem 0.5rem;"
+                    >
+                        <x-ri-arrow-down-s-line 
+                            class="size-4 transition-transform duration-200"
+                            x-bind:class="isCollapsed ? 'rotate-180' : ''" 
+                        />
                     </button>
                 @endif
             </div>
+            @endif
             @if(isset($header))
                 {{ $header }}
             @endif
@@ -70,17 +88,26 @@
     @endif
 
     @if($collapsible)
-        <div x-show="!isCollapsed" x-collapse x-cloak class="{{ $bodyClasses }}">
+        <div 
+            class="lte-card-body"
+            x-show="!isCollapsed"
+            x-transition:enter="transition ease-out duration-200"
+            x-transition:enter-start="opacity-0"
+            x-transition:enter-end="opacity-100"
+            x-transition:leave="transition ease-in duration-150"
+            x-transition:leave-start="opacity-100"
+            x-transition:leave-end="opacity-0"
+        >
             {{ $slot }}
         </div>
     @else
-        <div class="{{ $bodyClasses }}">
+        <div class="lte-card-body">
             {{ $slot }}
         </div>
     @endif
 
     @if(isset($footer))
-        <div class="px-5 py-4 border-t border-neutral/10 bg-neutral/5 rounded-b-xl">
+        <div class="lte-card-footer">
             {{ $footer }}
         </div>
     @endif