Migrate UI components from AdminLTE to LucentUI Theme using Tailwind CSS

- Updated tab-panel component to use Tailwind for styling and transitions.
- Refactored table-row component to implement Tailwind classes for hover effects and borders.
- Converted table-td component to utilize Tailwind for alignment and text styles.
- Changed table-th component to apply Tailwind for header styling and sorting indicators.
- Revised table component to adopt Tailwind for layout, borders, and responsive design.
- Enhanced tabs component with Tailwind for navigation styles and transitions.
- Updated toggle component to use Tailwind for switch styles and accessibility.
- Refactored tooltip component to implement Tailwind for positioning and styling.
- Added visual enhancements to app.css for improved UI interactions and animations.

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

@@ -1,6 +1,6 @@
 {{--
-    Progress Bar Component - AdminLTE Theme
-    Based on AdminLTE v4 Progress Bar styling patterns
+    Progress Bar Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
     
     Usage:
     <x-proxmox::ui.progress :value="75" />
@@ -24,24 +24,24 @@
     $percent = $max > 0 ? min(100, ($value / $max) * 100) : 0;
     
     $colorClasses = [
-        'primary' => 'lte-bg-primary',
-        'secondary' => 'lte-bg-secondary',
-        'success' => 'lte-bg-success',
-        'warning' => 'lte-bg-warning',
-        'danger' => 'lte-bg-danger',
-        'info' => 'lte-bg-info',
+        'primary' => 'bg-primary',
+        'secondary' => 'bg-secondary',
+        'success' => 'bg-success',
+        'warning' => 'bg-warning',
+        'danger' => 'bg-error',
+        'info' => 'bg-info',
     ];
     
     $sizeClasses = [
-        'xs' => 'lte-progress-xs',
-        'sm' => 'lte-progress-sm',
-        'md' => '',
-        'lg' => '',
-        'xl' => '',
+        'xs' => 'h-1',
+        'sm' => 'h-2',
+        'md' => 'h-3',
+        'lg' => 'h-4',
+        'xl' => 'h-5',
     ];
     
     $colorClass = $colorClasses[$color] ?? $colorClasses['primary'];
-    $sizeClass = $sizeClasses[$size] ?? '';
+    $sizeClass = $sizeClasses[$size] ?? $sizeClasses['md'];
     
     // Auto-select color based on value if specified
     if ($color === 'auto') {
@@ -57,14 +57,14 @@
 
 <div {{ $attributes->class(['w-full']) }}>
     @if($showLabel || $label)
-        <div class="mb-2 flex items-center justify-between" style="font-size: 0.875rem;">
-            <span style="font-weight: 500;">{{ $label ?? 'Usage' }}</span>
-            <span style="font-weight: 600;">{{ number_format($percent, 1) }}%</span>
+        <div class="mb-2 flex items-center justify-between text-sm">
+            <span class="font-medium text-secondary dark:text-gray-300">{{ $label ?? 'Usage' }}</span>
+            <span class="font-semibold text-primary dark:text-gray-100">{{ number_format($percent, 1) }}%</span>
         </div>
     @endif
-    <div class="lte-progress {{ $sizeClass }}">
+    <div class="{{ $sizeClass }} w-full bg-neutral/30 dark:bg-gray-700 rounded-full overflow-hidden">
         <div 
-            class="lte-progress-bar {{ $colorClass }} {{ $striped ? 'lte-progress-bar-striped' : '' }} {{ $animated ? 'lte-progress-bar-animated' : '' }}"
+            class="{{ $colorClass }} h-full rounded-full transition-all duration-500 {{ $striped ? 'progress-striped' : '' }} {{ $animated ? 'progress-animated' : '' }}"
             role="progressbar"
             style="width: {{ $percent }}%; {{ $gradient ? 'background-image: ' . $gradient . ';' : '' }}"
             aria-valuenow="{{ $percent }}"