From 325020338ddc57a92f5baae204be5601fedd7e39 Mon Sep 17 00:00:00 2001
From: shuki <shuki@shuki>
Date: Thu, 5 Mar 2026 05:30:21 +0200
Subject: [PATCH] Replace stat components with card-based layout for stats grid

DaisyUI stat components have internal styles that conflict when used
as standalone grid items, causing vertical overlap. Switch to plain
card components with manual typography classes instead.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 whm/gniza-whm/index.cgi | 62 ++++++++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 25 deletions(-)

diff --git a/whm/gniza-whm/index.cgi b/whm/gniza-whm/index.cgi
index 2623ba6..c07d2ac 100644
--- a/whm/gniza-whm/index.cgi
+++ b/whm/gniza-whm/index.cgi
@@ -116,40 +116,50 @@ print GnizaWHM::UI::render_flash();
 
     # Card 1: cPanel Accounts
     my $acct_count = scalar @cpanel_accounts;
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">cPanel Accounts</div>\n};
-    print qq{    <div class="stat-value text-primary">$acct_count</div>\n};
-    print qq{    <div class="stat-desc">on this server</div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">cPanel Accounts</div>\n};
+    print qq{      <div class="text-xl font-bold text-primary">$acct_count</div>\n};
+    print qq{      <div class="text-xs text-base-content/60">on this server</div>\n};
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     # Card 2: Backed Up Accounts
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">Backed Up Accounts</div>\n};
-    print qq{    <div class="stat-value text-secondary">$backed_up</div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">Backed Up Accounts</div>\n};
+    print qq{      <div class="text-xl font-bold text-secondary">$backed_up</div>\n};
     my $remote_count_desc = scalar @remotes;
-    print qq{    <div class="stat-desc">across $remote_count_desc remote(s)</div>\n};
+    print qq{      <div class="text-xs text-base-content/60">across $remote_count_desc remote(s)</div>\n};
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     # Card 3: Total Snapshots
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">Total Snapshots</div>\n};
-    print qq{    <div class="stat-value">$total_snaps</div>\n};
-    print qq{    <div class="stat-desc">across all remotes</div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">Total Snapshots</div>\n};
+    print qq{      <div class="text-xl font-bold">$total_snaps</div>\n};
+    print qq{      <div class="text-xs text-base-content/60">across all remotes</div>\n};
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     # Card 4: Remotes
     my $rem_count = scalar @remotes;
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">Remotes</div>\n};
-    print qq{    <div class="stat-value text-primary">$rem_count</div>\n};
-    print qq{    <div class="stat-desc">configured destinations</div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">Remotes</div>\n};
+    print qq{      <div class="text-xl font-bold text-primary">$rem_count</div>\n};
+    print qq{      <div class="text-xs text-base-content/60">configured destinations</div>\n};
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     # Card 5: Schedules
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">Schedules</div>\n};
-    print qq{    <div class="stat-value text-secondary">$sched_count</div>\n};
-    print qq{    <div class="stat-desc">active cron jobs</div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">Schedules</div>\n};
+    print qq{      <div class="text-xl font-bold text-secondary">$sched_count</div>\n};
+    print qq{      <div class="text-xs text-base-content/60">active cron jobs</div>\n};
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     # Card 6: Last Backup
@@ -164,15 +174,17 @@ print GnizaWHM::UI::render_flash();
         $badge_class = 'badge-neutral';
         $badge_text = $has_stats ? 'UNKNOWN' : 'N/A';
     }
-    print qq{  <div class="stat bg-white shadow-sm border border-base-300 rounded-box">\n};
-    print qq{    <div class="stat-title">Last Backup</div>\n};
-    print qq{    <div class="stat-value"><span class="badge $badge_class badge-lg">$badge_text</span></div>\n};
+    print qq{  <div class="card bg-white shadow-sm border border-base-300">\n};
+    print qq{    <div class="card-body p-4">\n};
+    print qq{      <div class="text-sm text-base-content/60">Last Backup</div>\n};
+    print qq{      <div class="mt-1 mb-1"><span class="badge $badge_class">$badge_text</span></div>\n};
     if ($last_log) {
         my $esc_log = GnizaWHM::UI::esc($last_log);
-        print qq{    <div class="stat-desc">$esc_log</div>\n};
+        print qq{      <div class="text-xs text-base-content/60">$esc_log</div>\n};
     } else {
-        print qq{    <div class="stat-desc">click Refresh to collect</div>\n};
+        print qq{      <div class="text-xs text-base-content/60">click Refresh to collect</div>\n};
     }
+    print qq{    </div>\n};
     print qq{  </div>\n};
 
     print qq{</div>\n};