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

@@ -1,5 +1,6 @@
 {{--
-    Dropdown Component - AdminLTE style
+    Dropdown Component - LucentUI Theme
+    Migrated from AdminLTE to Tailwind
     
     Usage:
     <x-proxmox::ui.dropdown>
@@ -21,50 +22,23 @@
 ])
 
 @php
-    $alignStyles = [
-        'left' => 'left: 0; transform-origin: top left;',
-        'right' => 'right: 0; transform-origin: top right;',
-        'center' => 'left: 50%; transform: translateX(-50%); transform-origin: top center;',
+    $alignClasses = [
+        'left' => 'left-0 origin-top-left',
+        'right' => 'right-0 origin-top-right',
+        'center' => 'left-1/2 -translate-x-1/2 origin-top',
     ];
     
-    $widthStyles = [
-        '32' => 'width: 8rem;',
-        '40' => 'width: 10rem;',
-        '48' => 'width: 12rem;',
-        '56' => 'width: 14rem;',
-        '64' => 'width: 16rem;',
-        '80' => 'width: 20rem;',
+    $widthClasses = [
+        '32' => 'w-32',
+        '40' => 'w-40',
+        '48' => 'w-48',
+        '56' => 'w-56',
+        '64' => 'w-64',
+        '80' => 'w-80',
     ];
 @endphp
 
-<style>
-    .dropdown-lte {
-        position: relative;
-        display: inline-block;
-    }
-    .dropdown-menu-lte {
-        position: absolute;
-        z-index: 1000;
-        margin-top: 0.5rem;
-        min-width: 10rem;
-        padding: 0.5rem;
-        background-color: #fff;
-        border: 1px solid var(--lte-border-color, #dee2e6);
-        border-radius: var(--lte-border-radius, 0.375rem);
-        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-    }
-    .dropdown-menu-lte[x-cloak] {
-        display: none !important;
-    }
-    /* Dark mode */
-    .dark .dropdown-menu-lte {
-        background-color: #1f2937;
-        border-color: #374151;
-        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
-    }
-</style>
-
-<div class="dropdown-lte" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
+<div class="relative inline-block" x-data="{ open: false }" @click.outside="open = false" @close.stop="open = false">
     <div @click="open = !open">
         {{ $trigger }}
     </div>
@@ -77,8 +51,7 @@
         x-transition:leave="transition ease-in duration-100"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
-        class="dropdown-menu-lte {{ $contentClasses }}"
-        style="{{ $widthStyles[$width] ?? 'width: 12rem;' }} {{ $alignStyles[$align] ?? $alignStyles['right'] }}"
+        class="absolute z-50 mt-2 min-w-40 p-2 bg-background border border-neutral rounded-lg shadow-lg {{ $widthClasses[$width] ?? 'w-48' }} {{ $alignClasses[$align] ?? $alignClasses['right'] }} {{ $contentClasses }}"
         x-cloak
         @click="open = false"
     >