From b77af9e83173b5d621070ad555df0040bf139658 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 14:42:55 -0500
Subject: [PATCH] refactor: update layout and styling for server listing and
 card components to align with AdminLTE theme

---
 .../Servers/Proxmox/views/index.blade.php     | 28 ++++++++-----------
 .../Servers/Proxmox/views/server.blade.php    | 10 +++----
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/index.blade.php b/extensions/Servers/Proxmox/views/index.blade.php
index 16922b6a0..78aae2d68 100644
--- a/extensions/Servers/Proxmox/views/index.blade.php
+++ b/extensions/Servers/Proxmox/views/index.blade.php
@@ -1,30 +1,26 @@
-{{-- Server Listing - Compact Layout --}}
+{{-- Server Listing - AdminLTE Theme --}}
 <div class="flex flex-col flex-1" style="min-height: calc(100vh - 30rem);">
     {{-- Page Header --}}
-    <div class="flex items-center justify-between mb-3">
+    <div class="flex items-center gap-3 mb-4">
         <div class="flex items-center gap-2">
-            <div class="flex items-center justify-center w-8 h-8 rounded bg-blue-50 dark:bg-blue-900">
-                <x-ri-server-line class="size-4 text-primary" />
-            </div>
-            <div>
-                <h2 class="text-lg font-semibold">Servers</h2>
-                <p class="text-xs text-gray-500 dark:text-gray-400">Manage your virtual private servers</p>
-            </div>
+            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Servers</h2>
         </div>
     </div>
 
-    {{-- Server Cards Grid --}}
+    {{-- Server Cards --}}
     <div class="flex flex-col gap-3 flex-1">
         @forelse($servers as $server)
             <livewire:proxmox.server :server="$server" wire:key="proxmox-server-{{ $server->id }}" lazy />
         @empty
-            <div class="flex flex-col items-center justify-center text-center py-12 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
-                <div class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-700 mb-3">
-                    <x-ri-server-line class="size-6 text-gray-400" />
+            <x-proxmox::ui.card>
+                <div class="flex flex-col items-center justify-center text-center py-8">
+                    <div class="lte-info-box-icon lte-bg-light rounded-full mb-3" style="width: 48px; height: 48px;">
+                        <x-ri-server-line class="size-6 lte-text-muted" />
+                    </div>
+                    <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-1">No Servers Found</h3>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">You don't have any servers yet. Purchase a server to get started.</p>
                 </div>
-                <h3 class="text-base font-semibold text-gray-700 dark:text-gray-300 mb-1">No Servers Found</h3>
-                <p class="text-sm text-gray-500 dark:text-gray-400">You don't have any servers yet. Purchase a server to get started.</p>
-            </div>
+            </x-proxmox::ui.card>
         @endforelse
     </div>
 </div>
\ No newline at end of file
diff --git a/extensions/Servers/Proxmox/views/server.blade.php b/extensions/Servers/Proxmox/views/server.blade.php
index 0fbb1bf95..511104f86 100644
--- a/extensions/Servers/Proxmox/views/server.blade.php
+++ b/extensions/Servers/Proxmox/views/server.blade.php
@@ -1,8 +1,8 @@
-{{-- Server Card Component - Compact Layout --}}
+{{-- Server Card Component - AdminLTE Theme --}}
 <div class="space-y-2">
     @if($status)
     <a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
-        <div class="flex flex-col rounded-lg border border-gray-200 dark:border-gray-700 bg-card text-card-foreground shadow-sm hover:shadow-md hover:border-gray-300 dark:hover:border-gray-600 transition-shadow duration-150 cursor-pointer">
+        <div class="lte-card flex flex-col cursor-pointer">
             {{-- Header: Server Name & Status --}}
             <div class="flex items-center justify-between px-4 py-3">
                 <div class="flex items-center gap-2">
@@ -28,7 +28,7 @@
             </div>
 
             {{-- Quick Info Row --}}
-            <div class="flex flex-row flex-wrap gap-3 px-4 py-2 border-y border-gray-100 dark:border-gray-800 text-xs">
+            <div class="flex flex-row flex-wrap gap-3 px-4 py-2 border-y text-xs" style="border-color: var(--lte-card-border-color);">
                 <div class="flex flex-col min-w-[100px]">
                     <span class="font-medium text-gray-500 dark:text-gray-400 uppercase text-[10px]">IPv4</span>
                     <span class="text-xs">{{ $server->primaryIpv4->ip ?? 'None' }}</span>
@@ -80,7 +80,7 @@
                     <x-proxmox::ui.stat-card label="CPU" :value="($status->cpus ?? 'N/A') . ' Core' . (($status->cpus ?? 0) > 1 ? 's' : '')" icon="ri-cpu-line" />
                     <x-proxmox::ui.stat-card label="RAM" :value="round(($status->maxmem ?? 0) / (1024 * 1024 * 1024), 1) . ' GiB'" icon="ri-ram-line" />
                     <x-proxmox::ui.stat-card label="Disk" :value="Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0)" icon="ri-hard-drive-2-line" />
-                    <div class="flex flex-col gap-2 rounded border border-gray-200 dark:border-gray-700 bg-card p-3 text-card-foreground">
+                    <div class="flex flex-col gap-2 rounded p-3" style="border: 1px solid var(--lte-card-border-color); background-color: var(--lte-card-bg);">
                         <div class="flex items-center justify-between">
                             <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Bandwidth</span>
                             <x-ri-speed-line class="size-3 text-gray-400" />
@@ -95,7 +95,7 @@
     @else
     {{-- Error State --}}
     <a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
-        <div class="flex flex-col rounded-lg border border-red-200 dark:border-red-800 bg-card text-card-foreground shadow-sm hover:shadow-md hover:border-red-300 dark:hover:border-red-700 transition-shadow duration-150 cursor-pointer">
+        <div class="lte-card lte-card-outline-danger flex flex-col cursor-pointer">
             <div class="flex items-center justify-between px-4 py-3">
                 <div class="flex items-center gap-2">
                     <div class="flex items-center justify-center size-7 rounded bg-red-50 dark:bg-red-900">