From a2546d0f1adda9081f10caf7dba582da4e6da170 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 18 Dec 2025 05:30:39 -0500
Subject: [PATCH] refactor: simplify overview view structure and enhance UI
 elements for better clarity and usability

---
 .../Servers/Proxmox/views/overview.blade.php  | 123 ++++++------------
 1 file changed, 41 insertions(+), 82 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index d167c95ae..67e94bbe8 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -86,98 +86,56 @@
             </div>
         </div>
 
-        <div class="flex flex-col gap-1.5" wire:init="checkStatus" wire:poll.{{ $fastPolling ? '2s' : '30s' }}="checkStatus"
+        <div wire:init="checkStatus" wire:poll.{{ $fastPolling ? '2s' : '30s' }}="checkStatus"
             wire:key="{{ $fastPolling ? 'fast' : 'slow' }}">
-            <div class="flex items-center gap-2.5 min-w-0 group">
-                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white break-words tracking-tight">Server Overview</h1>
-                <div class="relative" x-data="{ open: false }" x-cloak>
-                    <button type="button" @click="open = true" class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors opacity-70 hover:opacity-100">
-                        <svg class="size-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01" stroke-linecap="round" stroke-linejoin="round"/></svg>
-                    </button>
-                    <!-- Modal Backdrop -->
-                    <div x-show="open" 
-                         x-transition:enter="transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0"
-                         x-transition:enter-end="opacity-100"
-                         x-transition:leave="transition ease-in duration-200"
-                         x-transition:leave-start="opacity-100"
-                         x-transition:leave-end="opacity-0"
-                         @click="open = false"
-                         @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm"
-                         style="display: none;">
-                    </div>
-                    <!-- Modal -->
-                    <div x-show="open"
-                         x-transition:enter="transition ease-out duration-300"
-                         x-transition:enter-start="opacity-0 scale-95 translate-y-4"
-                         x-transition:enter-end="opacity-100 scale-100 translate-y-0"
-                         x-transition:leave="transition ease-in duration-200"
-                         x-transition:leave-start="opacity-100 scale-100 translate-y-0"
-                         x-transition:leave-end="opacity-0 scale-95 translate-y-4"
-                         @click.away="open = false"
-                         @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
-                         style="display: none;">
-                        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-2xl p-6 lg:p-8">
-                            <button @click="open = false" class="absolute top-5 right-5 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 transition-colors opacity-75 hover:opacity-100">
-                                <x-ri-close-line class="size-5" />
-                            </button>
-                            <div class="flex items-center gap-3 mb-4 pr-8">
-                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10 opacity-80">
-                                    <svg class="size-5 text-primary" fill="currentColor" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="5" rx="1" stroke="currentColor" stroke-width="1" fill="none"/><rect x="2" y="10" width="20" height="5" rx="1" stroke="currentColor" stroke-width="1" fill="none"/><circle cx="6" cy="5.5" r="0.5" fill="currentColor"/><circle cx="6" cy="12.5" r="0.5" fill="currentColor"/></svg>
+            <x-proxmox::ui.section-header 
+                title="Server Overview" 
+                subtitle="Real-time resource monitoring and server configuration details."
+                icon="ri-server-line"
+                class="mb-6">
+                <x-slot name="actions">
+                    <x-proxmox::ui.help-modal icon="ri-question-line" title="Server Overview">
+                        <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
+                            Complete overview of your virtual machine including real-time resource usage, server status, network configuration, and DNS information.
+                        </p>
+                        <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
+                            <div class="flex gap-3">
+                                <div class="flex-shrink-0 mt-0.5">
+                                    <span class="flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10 opacity-75">
+                                        <svg class="h-4 w-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="3" y="3" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="3" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="14" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="14" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                                    </span>
                                 </div>
                                 <div>
-                                    <h3 class="font-bold text-lg text-gray-900 dark:text-white">Server Overview</h3>
-                                    <p class="text-xs text-gray-500 dark:text-gray-400">Real-time monitoring</p>
+                                    <p class="block font-sans text-xs font-semibold text-base/90">Status</p>
+                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">Power state with real-time updates every 2-30 seconds.</p>
                                 </div>
                             </div>
-                            <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed mb-4 opacity-90">
-                                Complete overview of your virtual machine including real-time resource usage, server status, network configuration, and DNS information.
-                            </p>
-                            <div class="pt-4 mt-4 border-t border-gray-200 dark:border-gray-700 space-y-3">
-                                <div class="flex gap-3">
-                                    <div class="flex-shrink-0 mt-0.5">
-                                        <span class="flex items-center justify-center h-8 w-8 rounded-lg bg-primary/10 opacity-75">
-                                            <svg class="h-4 w-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="3" y="3" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="3" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="14" y="14" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/><rect x="3" y="14" width="7" height="7" stroke-linecap="round" stroke-linejoin="round"/></svg>
-                                        </span>
-                                    </div>
-                                    <div>
-                                        <p class="text-sm font-semibold text-gray-900 dark:text-white">Status</p>
-                                        <p class="text-xs text-gray-600 dark:text-gray-400 opacity-80">Power state with real-time updates every 2-30 seconds.</p>
-                                    </div>
+                            <div class="flex gap-3">
+                                <div class="flex-shrink-0 mt-0.5">
+                                    <span class="flex items-center justify-center h-8 w-8 rounded-lg bg-success/10 opacity-75">
+                                        <svg class="h-4 w-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 9h6v6H9zM9 2v2M9 20v2M15 2v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                                    </span>
                                 </div>
-                                <div class="flex gap-3">
-                                    <div class="flex-shrink-0 mt-0.5">
-                                        <span class="flex items-center justify-center h-8 w-8 rounded-lg bg-success/10 opacity-75">
-                                            <svg class="h-4 w-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 9h6v6H9zM9 2v2M9 20v2M15 2v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2" stroke-linecap="round" stroke-linejoin="round"/></svg>
-                                        </span>
-                                    </div>
-                                    <div>
-                                        <p class="text-sm font-semibold text-gray-900 dark:text-white">Resources</p>
-                                        <p class="text-xs text-gray-600 dark:text-gray-400 opacity-80">CPU, memory usage, and uptime statistics from the hypervisor.</p>
-                                    </div>
+                                <div>
+                                    <p class="block font-sans text-xs font-semibold text-base/90">Resources</p>
+                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">CPU, memory usage, and uptime statistics from the hypervisor.</p>
                                 </div>
-                                <div class="flex gap-3">
-                                    <div class="flex-shrink-0 mt-0.5">
-                                        <span class="flex items-center justify-center h-8 w-8 rounded-lg bg-warning/10 opacity-75">
-                                            <svg class="h-4 w-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke-linecap="round" stroke-linejoin="round"/></svg>
-                                        </span>
-                                    </div>
-                                    <div>
-                                        <p class="text-sm font-semibold text-gray-900 dark:text-white">Network</p>
-                                        <p class="text-xs text-gray-600 dark:text-gray-400 opacity-80">IPv4/IPv6 addresses and DNS configuration for your VM.</p>
-                                    </div>
+                            </div>
+                            <div class="flex gap-3">
+                                <div class="flex-shrink-0 mt-0.5">
+                                    <span class="flex items-center justify-center h-8 w-8 rounded-lg bg-warning/10 opacity-75">
+                                        <svg class="h-4 w-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                                    </span>
+                                </div>
+                                <div>
+                                    <p class="block font-sans text-xs font-semibold text-base/90">Network</p>
+                                    <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">IPv4/IPv6 addresses and DNS configuration for your VM.</p>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                </div>
-            </div>
-            <p class="text-sm text-gray-600 dark:text-gray-400 opacity-80 ml-0.5">
-                Real-time resource monitoring and server configuration details.
-            </p>
-        </div>
+                    </x-proxmox::ui.help-modal>
+                </x-slot>
+            </x-proxmox::ui.section-header>
         <style>
             /* TailAdmin Progress Bar Styles */
             progress {
@@ -1364,6 +1322,7 @@
                 </div>
             </div>
         </div>
+        </div>
     </div>