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

@@ -1,5 +1,6 @@
 {{--
-    Dropdown Item Component - AdminLTE style
+    Dropdown Item Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
 --}}
 
 @props([
@@ -11,82 +12,30 @@
 
 @php
     $tag = $href ? 'a' : 'button';
+    
+    $baseClasses = 'flex items-center gap-2.5 w-full px-3 py-2 text-sm text-left no-underline bg-transparent border-0 rounded-md cursor-pointer transition-colors duration-200';
+    
+    $variantClasses = match($variant) {
+        'danger' => 'text-error hover:bg-error/10 focus:bg-error/10',
+        'success' => 'text-success hover:bg-success/10 focus:bg-success/10',
+        default => 'text-primary hover:bg-primary/5 hover:text-primary-hover focus:bg-primary/5 focus:text-primary-hover dark:text-gray-200 dark:hover:bg-white/5',
+    };
+    
+    $disabledClasses = $disabled ? 'pointer-events-none opacity-50' : '';
 @endphp
 
-<style>
-    .dropdown-item-lte {
-        display: flex;
-        align-items: center;
-        gap: 0.625rem;
-        width: 100%;
-        padding: 0.5rem 0.75rem;
-        font-size: 0.875rem;
-        color: #212529;
-        text-align: left;
-        text-decoration: none;
-        background-color: transparent;
-        border: 0;
-        border-radius: calc(var(--lte-border-radius, 0.375rem) - 2px);
-        cursor: pointer;
-        transition: background-color var(--lte-transition-speed, 0.3s) ease, color var(--lte-transition-speed, 0.3s) ease;
-    }
-    .dropdown-item-lte:hover,
-    .dropdown-item-lte:focus {
-        background-color: rgba(0, 0, 0, 0.04);
-        color: var(--lte-primary, #0d6efd);
-        outline: none;
-    }
-    .dropdown-item-lte-danger {
-        color: var(--lte-danger, #dc3545);
-    }
-    .dropdown-item-lte-danger:hover,
-    .dropdown-item-lte-danger:focus {
-        background-color: rgba(220, 53, 69, 0.08);
-        color: var(--lte-danger, #dc3545);
-    }
-    .dropdown-item-lte-success {
-        color: var(--lte-success, #198754);
-    }
-    .dropdown-item-lte-success:hover,
-    .dropdown-item-lte-success:focus {
-        background-color: rgba(25, 135, 84, 0.08);
-        color: var(--lte-success, #198754);
-    }
-    .dropdown-item-lte-disabled {
-        pointer-events: none;
-        opacity: 0.5;
-    }
-    .dropdown-item-lte-icon {
-        flex-shrink: 0;
-        width: 1.125rem;
-        height: 1.125rem;
-    }
-    .dropdown-item-lte-text {
-        flex: 1;
-    }
-    /* Dark mode */
-    .dark .dropdown-item-lte {
-        color: #e5e7eb;
-    }
-    .dark .dropdown-item-lte:hover,
-    .dark .dropdown-item-lte:focus {
-        background-color: rgba(255, 255, 255, 0.04);
-    }
-</style>
-
 <{{ $tag }}
     @if($href) href="{{ $href }}" @endif
     @if($tag === 'button') type="button" @endif
     @if($disabled) disabled @endif
     {{ $attributes->class([
-        'dropdown-item-lte',
-        'dropdown-item-lte-danger' => $variant === 'danger',
-        'dropdown-item-lte-success' => $variant === 'success',
-        'dropdown-item-lte-disabled' => $disabled,
+        $baseClasses,
+        $variantClasses,
+        $disabledClasses,
     ]) }}
 >
     @if($icon)
-        <x-dynamic-component :component="$icon" class="dropdown-item-lte-icon" />
+        <x-dynamic-component :component="$icon" class="shrink-0 w-4.5 h-4.5" />
     @endif
-    <span class="dropdown-item-lte-text">{{ $slot }}</span>
+    <span class="flex-1">{{ $slot }}</span>
 </{{ $tag }}>