From 8d7eff13fbb6c72fb019b27914ffca27695f7f1a Mon Sep 17 00:00:00 2001
From: Charles <charles@pelican.dev>
Date: Fri, 28 Mar 2025 11:57:40 -0400
Subject: [PATCH] Update Overview and Server List (#1151)

* Update Overview and Server List

* Fix background on light mode
---
 .../ServerResource/Pages/ListServers.php      |  4 -
 .../Server/Widgets/ServerOverview.php         |  8 +-
 .../server-small-data-block.blade.php         |  2 +-
 .../columns/server-entry-column.blade.php     | 90 ++++++++++---------
 4 files changed, 53 insertions(+), 51 deletions(-)

diff --git a/app/Filament/App/Resources/ServerResource/Pages/ListServers.php b/app/Filament/App/Resources/ServerResource/Pages/ListServers.php
index e3d003a47..3d6a48fd8 100644
--- a/app/Filament/App/Resources/ServerResource/Pages/ListServers.php
+++ b/app/Filament/App/Resources/ServerResource/Pages/ListServers.php
@@ -31,10 +31,6 @@ class ListServers extends ListRecords
                         ->searchable(['name']),
                 ]),
             ])
-            ->contentGrid([
-                'default' => 1,
-                'md' => 2,
-            ])
             ->recordUrl(fn (Server $server) => Console::getUrl(panel: 'server', tenant: $server))
             ->emptyStateIcon('tabler-brand-docker')
             ->emptyStateDescription('')
diff --git a/app/Filament/Server/Widgets/ServerOverview.php b/app/Filament/Server/Widgets/ServerOverview.php
index e3c77583f..f81362b67 100644
--- a/app/Filament/Server/Widgets/ServerOverview.php
+++ b/app/Filament/Server/Widgets/ServerOverview.php
@@ -4,7 +4,6 @@ namespace App\Filament\Server\Widgets;
 
 use App\Enums\ContainerStatus;
 use App\Filament\Server\Components\SmallStatBlock;
-use App\Filament\Server\Components\StatBlock;
 use App\Models\Server;
 use Carbon\CarbonInterface;
 use Filament\Widgets\StatsOverviewWidget;
@@ -19,13 +18,12 @@ class ServerOverview extends StatsOverviewWidget
     protected function getStats(): array
     {
         return [
-            StatBlock::make('Name', $this->server->name)
-                ->description($this->server->description)
+            SmallStatBlock::make('Name', $this->server->name)
                 ->extraAttributes([
                     'class' => 'overflow-x-auto',
                 ]),
-            StatBlock::make('Status', $this->status()),
-            StatBlock::make('Address', $this->server->allocation->address)
+            SmallStatBlock::make('Status', $this->status()),
+            SmallStatBlock::make('Address', $this->server->allocation->address)
                 ->extraAttributes([
                     'class' => 'overflow-x-auto',
                 ]),
diff --git a/resources/views/filament/components/server-small-data-block.blade.php b/resources/views/filament/components/server-small-data-block.blade.php
index 677226ee4..ff9770fa5 100644
--- a/resources/views/filament/components/server-small-data-block.blade.php
+++ b/resources/views/filament/components/server-small-data-block.blade.php
@@ -1,5 +1,5 @@
 <div
-    class="grid grid-flow-row w-full p-3 rounded-lg shadow-sm overflow-hidden ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
+    class="grid grid-flow-row w-full p-3 rounded-lg bg-white shadow-sm overflow-hidden ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
     <span>
         <span class="text-md font-medium text-gray-500 dark:text-gray-400">
             {{ $getLabel() }}
diff --git a/resources/views/tables/columns/server-entry-column.blade.php b/resources/views/tables/columns/server-entry-column.blade.php
index bdeb0719e..11eef6ae2 100644
--- a/resources/views/tables/columns/server-entry-column.blade.php
+++ b/resources/views/tables/columns/server-entry-column.blade.php
@@ -13,55 +13,63 @@
     </style>
 </head>
 <div class="w-full">
-    <!-- Wrapper for Positioning -->
-    <div class="relative flex">
-        <!-- Status Strip Outside the Box -->
+    <div class="relative">
         <div
             class="absolute left-0 top-1 bottom-0 w-1 rounded-lg"
             style="background-color: {{ $server->condition->getColor(true) }};">
         </div>
 
-        <!-- Card Component -->
-        <div class="flex-1 bg-gray-800 dark:text-white rounded-lg overflow-hidden p-3">
-            <!-- Header -->
-            <div class="flex items-center mb-5 gap-2">
-                <x-filament::icon-button
-                    :icon="$server->condition->getIcon()"
-                    :color="$server->condition->getColor()"
-                    :tooltip="$server->condition->getLabel()"
-                    size="xl"
-                />
-                <h2 class="text-xl font-bold">
-                    {{ $server->name }}
-                    <span class="dark:text-gray-400">({{ $server->formatResource('uptime', type: ServerResourceType::Time) }})</span>
-                </h2>
-            </div>
+        <div class="bg-gray-800 dark:text-white overflow-hidden p-2">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                    <x-filament::icon-button
+                        :icon="$server->condition->getIcon()"
+                        :color="$server->condition->getColor()"
+                        :tooltip="$server->condition->getLabel()"
+                        size="xl"
+                    />
+                    <h2 class="text-2xl font-semibold p-2">
+                        {{ $server->name }}
+                        <span class="dark:text-gray-400">
+                        ({{ $server->formatResource('uptime', type: ServerResourceType::Time) }})
+                        </span>
+                    </h2>
+                </div>
 
-            <!-- Resource Usage -->
-            <div class="flex justify-between text-center">
-                <div>
-                    <p class="text-sm dark:text-gray-400">CPU</p>
-                    <p class="text-md font-semibold">{{ $server->formatResource('cpu_absolute', type: ServerResourceType::Percentage) }}</p>
-                    <hr class="p-0.5">
-                    <p class="text-xs dark:text-gray-400">{{ $server->formatResource('cpu', type: ServerResourceType::Percentage, limit: true) }}</p>
-                </div>
-                <div>
-                    <p class="text-sm dark:text-gray-400">Memory</p>
-                    <p class="text-md font-semibold">{{ $server->formatResource('memory_bytes') }}</p>
-                    <hr class="p-0.5">
-                    <p class="text-xs dark:text-gray-400">{{ $server->formatResource('memory', limit: true) }}</p>
-                </div>
-                <div>
-                    <p class="text-sm dark:text-gray-400">Disk</p>
-                    <p class="text-md font-semibold">{{ $server->formatResource('disk_bytes') }}</p>
-                    <hr class="p-0.5">
-                    <p class="text-xs dark:text-gray-400">{{ $server->formatResource('disk', limit: true) }}</p>
-                </div>
-                <div class="hidden sm:block">
-                    <p class="text-sm dark:text-gray-400">Network</p>
-                    <p class="text-md font-semibold">{{ $server->allocation->address }} </p>
+                <div class="flex w-1/2 justify-between text-center">
+                    <div class="w-1/4">
+                        <p class="text-md dark:text-gray-400">CPU</p>
+                        <hr class="p-0.5">
+                        <p class="text-md font-semibold">
+                            {{ $server->formatResource('cpu_absolute', type: ServerResourceType::Percentage) }}
+                        </p>
+                    </div>
+                    <div class="w-1/4">
+                        <p class="text-md dark:text-gray-400">Memory</p>
+                        <hr class="p-0.5">
+                        <p class="text-md font-semibold">
+                            {{ $server->formatResource('memory_bytes') }}
+                        </p>
+                    </div>
+                    <div class="w-1/4 hidden sm:block">
+                        <p class="text-md dark:text-gray-400">Disk</p>
+                        <hr class="p-0.5">
+                        <p class="text-md font-semibold">
+                            {{ $server->formatResource('disk_bytes') }}
+                        </p>
+                    </div>
+                    <div class="w-1/4 hidden sm:block">
+                        <p class="text-md dark:text-gray-400">Network</p>
+                        <hr class="p-0.5">
+                        <p class="text-md font-semibold">
+                            {{ $server->allocation->address }}
+                        </p>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
+
+
+