From fdbac4ebff74c95903f5293a199fd9d7f45e1679 Mon Sep 17 00:00:00 2001
From: headlessdev <damian.bergemann@outlook.com>
Date: Sun, 20 Apr 2025 23:34:57 +0200
Subject: [PATCH] Enhance Servers component by adding a "No host server" option
 in the server selection dropdown, updating state management to handle
 monitoring settings based on selected host server, and introducing a new
 "Hardware Information" section for better organization of server details.

---
 app/dashboard/servers/Servers.tsx | 44 ++++++++++++++++++++++++-------
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/app/dashboard/servers/Servers.tsx b/app/dashboard/servers/Servers.tsx
index a215168..5d66b81 100644
--- a/app/dashboard/servers/Servers.tsx
+++ b/app/dashboard/servers/Servers.tsx
@@ -586,12 +586,19 @@ export default function Dashboard() {
                                 <Label>Host Server</Label>
                                 <Select
                                   value={hostServer?.toString()}
-                                  onValueChange={(value) => setHostServer(Number(value))}
+                                  onValueChange={(value) => {
+                                    const newHostServer = Number(value);
+                                    setHostServer(newHostServer);
+                                    if (newHostServer !== 0) {
+                                      setMonitoring(false);
+                                    }
+                                  }}
                                 >
                                   <SelectTrigger>
                                     <SelectValue placeholder="Select a host server" />
                                   </SelectTrigger>
                                   <SelectContent>
+                                    <SelectItem value="0">No host server</SelectItem>
                                     {hostServers.map((server) => (
                                       <SelectItem key={server.id} value={server.id.toString()}>
                                         {server.name}
@@ -714,6 +721,10 @@ export default function Dashboard() {
                                 <Separator />
                               </div>
 
+                              <div className="col-span-full mb-2">
+                                <h4 className="text-sm font-semibold">Hardware Information</h4>
+                              </div>
+
                               <div className="flex items-center gap-2 text-foreground/80">
                                 <Cpu className="h-4 w-4 text-muted-foreground" />
                                 <span>
@@ -839,7 +850,7 @@ export default function Dashboard() {
                                             <TabsTrigger value="general">General</TabsTrigger>
                                             <TabsTrigger value="hardware">Hardware</TabsTrigger>
                                             <TabsTrigger value="virtualization">Virtualization</TabsTrigger>
-                                            <TabsTrigger value="monitoring">Monitoring</TabsTrigger>
+                                            {(!editHostServer || editHostServer === 0) && <TabsTrigger value="monitoring">Monitoring</TabsTrigger>}
                                           </TabsList>
                                           <TabsContent value="general">
                                             <div className="space-y-4 pt-4">
@@ -1028,12 +1039,19 @@ export default function Dashboard() {
                                                   <Label>Host Server</Label>
                                                   <Select
                                                     value={editHostServer?.toString()}
-                                                    onValueChange={(value) => setEditHostServer(Number(value))}
+                                                    onValueChange={(value) => {
+                                                      const newHostServer = Number(value);
+                                                      setEditHostServer(newHostServer);
+                                                      if (newHostServer !== 0) {
+                                                        setEditMonitoring(false);
+                                                      }
+                                                    }}
                                                   >
                                                     <SelectTrigger>
                                                       <SelectValue placeholder="Select a host server" />
                                                     </SelectTrigger>
                                                     <SelectContent>
+                                                      <SelectItem value="0">No host server</SelectItem>
                                                       {hostServers
                                                         .filter((server) => server.id !== editId)
                                                         .map((server) => (
@@ -1377,23 +1395,25 @@ export default function Dashboard() {
                                                                           <Label>Host Server</Label>
                                                                           <Select
                                                                             value={editHostServer?.toString()}
-                                                                            onValueChange={(value) =>
-                                                                              setEditHostServer(Number(value))
-                                                                            }
+                                                                            onValueChange={(value) => {
+                                                                              const newHostServer = Number(value);
+                                                                              setEditHostServer(newHostServer);
+                                                                              if (newHostServer !== 0) {
+                                                                                setEditMonitoring(false);
+                                                                              }
+                                                                            }}
                                                                           >
                                                                             <SelectTrigger>
                                                                               <SelectValue placeholder="Select a host server" />
                                                                             </SelectTrigger>
                                                                             <SelectContent>
+                                                                              <SelectItem value="0">No host server</SelectItem>
                                                                               {hostServers
                                                                                 .filter(
                                                                                   (server) => server.id !== editId,
                                                                                 )
                                                                                 .map((server) => (
-                                                                                  <SelectItem
-                                                                                    key={server.id}
-                                                                                    value={server.id.toString()}
-                                                                                  >
+                                                                                  <SelectItem key={server.id} value={server.id.toString()}>
                                                                                     {server.name}
                                                                                   </SelectItem>
                                                                                 ))}
@@ -1434,6 +1454,10 @@ export default function Dashboard() {
                                                       </div>
                                                     </div>
 
+                                                    <div className="col-span-full mb-2">
+                                                      <h4 className="text-sm font-semibold">Hardware Information</h4>
+                                                    </div>
+
                                                     <div className="flex items-center gap-2 text-foreground/80">
                                                       <Cpu className="h-4 w-4 text-muted-foreground" />
                                                       <span>