From e823b3aa1e287db16c9937ec6a998a7a80df5977 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Tue, 23 Dec 2025 00:16:30 -0500
Subject: [PATCH] feat: enhance Firewall, Backup, Storage, and Power Controls
 sections with improved layouts and detailed information for better user
 interaction

---
 themes/lucentui/views/home.blade.php | 163 +++++++++++++++++++++------
 1 file changed, 131 insertions(+), 32 deletions(-)

diff --git a/themes/lucentui/views/home.blade.php b/themes/lucentui/views/home.blade.php
index 3cdc12e45..d2b90bdb8 100644
--- a/themes/lucentui/views/home.blade.php
+++ b/themes/lucentui/views/home.blade.php
@@ -316,31 +316,76 @@
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                 <!-- Firewall Manager -->
                 <div class="group relative overflow-hidden bg-gradient-to-br from-warning/5 via-background-secondary to-background-secondary border border-warning/20 hover:border-warning/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-warning/10">
+                    <div class="absolute top-0 right-0 w-48 h-48 bg-warning/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
                     <div class="relative z-10 h-full flex flex-col">
-                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg shadow-warning/30 mb-4">
-                            <x-ri-shield-keyhole-line class="size-6 text-white" />
+                        <div class="flex items-start justify-between mb-4">
+                            <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-warning to-warning/70 flex items-center justify-center shadow-lg shadow-warning/30">
+                                <x-ri-shield-keyhole-line class="size-6 text-white" />
+                            </div>
+                            <div class="flex gap-1.5">
+                                <span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Inbound</span>
+                                <span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Outbound</span>
+                            </div>
                         </div>
-                        <h3 class="text-lg font-bold text-color-base mb-2">Firewall</h3>
-                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Custom rules, IP aliases and real-time logs.</p>
-                        <div class="flex flex-wrap gap-1.5">
-                            <span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Inbound</span>
-                            <span class="px-2 py-1 bg-warning/10 text-warning text-xs font-medium rounded-lg">Outbound</span>
+                        <h3 class="text-lg font-bold text-color-base mb-2">Firewall Manager</h3>
+                        <p class="text-color-muted text-sm leading-relaxed mb-4">Create custom rules, manage IP aliases, and monitor real-time traffic logs to protect your server.</p>
+                        <!-- Mock Firewall Rules -->
+                        <div class="space-y-2 mt-auto">
+                            <div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
+                                <div class="w-2 h-2 rounded-full bg-success"></div>
+                                <span class="text-xs text-color-muted flex-1">Allow SSH (22/tcp)</span>
+                                <span class="text-xs text-success font-medium">Active</span>
+                            </div>
+                            <div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
+                                <div class="w-2 h-2 rounded-full bg-success"></div>
+                                <span class="text-xs text-color-muted flex-1">Allow HTTP/S (80,443)</span>
+                                <span class="text-xs text-success font-medium">Active</span>
+                            </div>
+                            <div class="flex items-center gap-3 p-2.5 bg-background/50 rounded-xl border border-neutral/10">
+                                <div class="w-2 h-2 rounded-full bg-error"></div>
+                                <span class="text-xs text-color-muted flex-1">Block 192.168.1.0/24</span>
+                                <span class="text-xs text-error font-medium">Denied</span>
+                            </div>
                         </div>
                     </div>
                 </div>
 
                 <!-- Backup & Snapshots -->
                 <div class="group relative overflow-hidden bg-gradient-to-br from-success/5 via-background-secondary to-background-secondary border border-success/20 hover:border-success/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-success/10">
+                    <div class="absolute bottom-0 left-0 w-48 h-48 bg-success/5 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
                     <div class="relative z-10 h-full flex flex-col">
-                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg shadow-success/30 mb-4">
-                            <x-ri-database-2-line class="size-6 text-white" />
+                        <div class="flex items-start justify-between mb-4">
+                            <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-success to-success/70 flex items-center justify-center shadow-lg shadow-success/30">
+                                <x-ri-database-2-line class="size-6 text-white" />
+                            </div>
+                            <div class="px-2.5 py-1 bg-success/10 rounded-lg border border-success/20">
+                                <span class="text-xs text-success font-medium">Auto-enabled</span>
+                            </div>
                         </div>
-                        <h3 class="text-lg font-bold text-color-base mb-2">Backups</h3>
-                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Automated snapshots with one-click restore.</p>
-                        <div class="p-2.5 bg-success/10 rounded-xl border border-success/20">
-                            <div class="flex items-center justify-between text-xs">
-                                <span class="text-color-muted">Last backup</span>
-                                <span class="text-success font-medium">2h ago</span>
+                        <h3 class="text-lg font-bold text-color-base mb-2">Backup & Snapshots</h3>
+                        <p class="text-color-muted text-sm leading-relaxed mb-4">Automated daily snapshots with instant one-click restore. Keep your data safe with point-in-time recovery.</p>
+                        <!-- Mock Backup List -->
+                        <div class="space-y-2 mt-auto">
+                            <div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
+                                <div class="flex items-center gap-2">
+                                    <x-ri-checkbox-circle-fill class="size-4 text-success" />
+                                    <span class="text-xs text-color-base font-medium">Daily Backup</span>
+                                </div>
+                                <span class="text-xs text-color-muted">2h ago</span>
+                            </div>
+                            <div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
+                                <div class="flex items-center gap-2">
+                                    <x-ri-checkbox-circle-fill class="size-4 text-success" />
+                                    <span class="text-xs text-color-base font-medium">Weekly Snapshot</span>
+                                </div>
+                                <span class="text-xs text-color-muted">3 days ago</span>
+                            </div>
+                            <div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10">
+                                <div class="flex items-center gap-2">
+                                    <x-ri-time-line class="size-4 text-warning" />
+                                    <span class="text-xs text-color-base font-medium">Next backup</span>
+                                </div>
+                                <span class="text-xs text-warning font-medium">in 22h</span>
                             </div>
                         </div>
                     </div>
@@ -351,33 +396,87 @@
             <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                 <!-- Storage Manager -->
                 <div class="group relative overflow-hidden bg-gradient-to-br from-purple-500/5 via-background-secondary to-background-secondary border border-purple-500/20 hover:border-purple-500/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-purple-500/10">
+                    <div class="absolute top-0 left-0 w-48 h-48 bg-purple-500/5 rounded-full blur-3xl -translate-y-1/2 -translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
                     <div class="relative z-10 h-full flex flex-col">
-                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-500/70 flex items-center justify-center shadow-lg shadow-purple-500/30 mb-4">
-                            <x-ri-hard-drive-2-line class="size-6 text-white" />
-                        </div>
-                        <h3 class="text-lg font-bold text-color-base mb-2">Storage</h3>
-                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Add, resize, or remove virtual disks.</p>
-                        <div class="flex items-center gap-2">
-                            <div class="flex-1 h-2 bg-background rounded-full overflow-hidden">
-                                <div class="h-full w-[65%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
+                        <div class="flex items-start justify-between mb-4">
+                            <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-500/70 flex items-center justify-center shadow-lg shadow-purple-500/30">
+                                <x-ri-hard-drive-2-line class="size-6 text-white" />
+                            </div>
+                            <div class="text-right">
+                                <div class="text-lg font-bold text-color-base">65 GB</div>
+                                <div class="text-xs text-color-muted">of 100 GB used</div>
+                            </div>
+                        </div>
+                        <h3 class="text-lg font-bold text-color-base mb-2">Storage Manager</h3>
+                        <p class="text-color-muted text-sm leading-relaxed mb-4">Add, resize, or remove virtual disks on the fly. Expand storage without downtime.</p>
+                        <!-- Storage Breakdown -->
+                        <div class="space-y-3 mt-auto">
+                            <div>
+                                <div class="flex items-center justify-between text-xs mb-1.5">
+                                    <span class="text-color-muted">System (sda1)</span>
+                                    <span class="text-purple-400 font-medium">45 GB</span>
+                                </div>
+                                <div class="h-2 bg-background rounded-full overflow-hidden">
+                                    <div class="h-full w-[45%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex items-center justify-between text-xs mb-1.5">
+                                    <span class="text-color-muted">Data (sdb1)</span>
+                                    <span class="text-purple-400 font-medium">20 GB</span>
+                                </div>
+                                <div class="h-2 bg-background rounded-full overflow-hidden">
+                                    <div class="h-full w-[20%] bg-gradient-to-r from-purple-500 to-purple-400 rounded-full"></div>
+                                </div>
+                            </div>
+                            <div class="flex items-center justify-between pt-2 border-t border-neutral/10">
+                                <span class="text-xs text-color-muted">Available</span>
+                                <span class="text-xs text-success font-medium">35 GB free</span>
                             </div>
-                            <span class="text-xs text-color-muted whitespace-nowrap">65/100GB</span>
                         </div>
                     </div>
                 </div>
 
                 <!-- Power Controls -->
                 <div class="group relative overflow-hidden bg-gradient-to-br from-error/5 via-background-secondary to-background-secondary border border-error/20 hover:border-error/40 rounded-3xl p-6 transition-all duration-500 hover:shadow-2xl hover:shadow-error/10">
+                    <div class="absolute bottom-0 right-0 w-48 h-48 bg-error/5 rounded-full blur-3xl translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
                     <div class="relative z-10 h-full flex flex-col">
-                        <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-error to-error/70 flex items-center justify-center shadow-lg shadow-error/30 mb-4">
-                            <x-ri-shut-down-line class="size-6 text-white" />
+                        <div class="flex items-start justify-between mb-4">
+                            <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-error to-error/70 flex items-center justify-center shadow-lg shadow-error/30">
+                                <x-ri-shut-down-line class="size-6 text-white" />
+                            </div>
+                            <div class="flex items-center gap-2 px-2.5 py-1 bg-success/10 rounded-lg border border-success/20">
+                                <div class="w-2 h-2 rounded-full bg-success animate-pulse"></div>
+                                <span class="text-xs text-success font-medium">Running</span>
+                            </div>
                         </div>
-                        <h3 class="text-lg font-bold text-color-base mb-2">Power</h3>
-                        <p class="text-color-muted text-sm leading-relaxed mb-4 flex-1">Start, stop, reboot, and power cycle.</p>
-                        <div class="flex gap-1.5">
-                            <span class="flex-1 py-1.5 bg-success/15 text-success text-xs font-medium rounded-lg text-center">Start</span>
-                            <span class="flex-1 py-1.5 bg-warning/15 text-warning text-xs font-medium rounded-lg text-center">Reboot</span>
-                            <span class="flex-1 py-1.5 bg-error/15 text-error text-xs font-medium rounded-lg text-center">Stop</span>
+                        <h3 class="text-lg font-bold text-color-base mb-2">Power Controls</h3>
+                        <p class="text-color-muted text-sm leading-relaxed mb-4">Full control over your server's power state. Start, stop, reboot, or force power cycle instantly.</p>
+                        <!-- Power Actions -->
+                        <div class="grid grid-cols-3 gap-2 mb-4">
+                            <div class="flex flex-col items-center gap-2 p-3 bg-success/10 hover:bg-success/20 rounded-xl border border-success/20 cursor-pointer transition-colors">
+                                <x-ri-play-fill class="size-5 text-success" />
+                                <span class="text-xs text-success font-medium">Start</span>
+                            </div>
+                            <div class="flex flex-col items-center gap-2 p-3 bg-warning/10 hover:bg-warning/20 rounded-xl border border-warning/20 cursor-pointer transition-colors">
+                                <x-ri-restart-line class="size-5 text-warning" />
+                                <span class="text-xs text-warning font-medium">Reboot</span>
+                            </div>
+                            <div class="flex flex-col items-center gap-2 p-3 bg-error/10 hover:bg-error/20 rounded-xl border border-error/20 cursor-pointer transition-colors">
+                                <x-ri-stop-fill class="size-5 text-error" />
+                                <span class="text-xs text-error font-medium">Stop</span>
+                            </div>
+                        </div>
+                        <!-- Server Stats -->
+                        <div class="flex items-center justify-between p-2.5 bg-background/50 rounded-xl border border-neutral/10 mt-auto">
+                            <div class="flex items-center gap-2">
+                                <x-ri-time-line class="size-4 text-color-muted" />
+                                <span class="text-xs text-color-muted">Uptime</span>
+                            </div>
+                            <span class="text-xs text-color-base font-medium">14d 6h 32m</span>
+                        </div>
+                    </div>
+                </div>
                         </div>
                     </div>
                 </div>