From 75ca05454d4998078b4266c33a3426311b2289e4 Mon Sep 17 00:00:00 2001
From: headlessdev <damian.bergemann@outlook.com>
Date: Mon, 14 Apr 2025 15:35:32 +0200
Subject: [PATCH] Action Buttons Layout improvements

---
 app/dashboard/applications/Applications.tsx | 268 ++++----
 app/dashboard/servers/Servers.tsx           | 660 ++++++++++++--------
 2 files changed, 548 insertions(+), 380 deletions(-)

diff --git a/app/dashboard/applications/Applications.tsx b/app/dashboard/applications/Applications.tsx
index cd67711..ba6922d 100644
--- a/app/dashboard/applications/Applications.tsx
+++ b/app/dashboard/applications/Applications.tsx
@@ -474,140 +474,142 @@ export default function Dashboard() {
                               </Button>
                             )}
                           </div>
-                          <Button
-                            variant="destructive"
-                            size="icon"
-                            className="h-[72px] w-10"
-                            onClick={() => deleteApplication(app.id)}
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </Button>
-                          <AlertDialog>
-                            <AlertDialogTrigger asChild>
-                              <Button
-                                size="icon"
-                                className="h-[72px] w-10"
-                                onClick={() => openEditDialog(app)}
-                              >
-                                <Pencil className="h-4 w-4" />
-                              </Button>
-                            </AlertDialogTrigger>
-                            <AlertDialogContent>
-                              <AlertDialogHeader>
-                                <AlertDialogTitle>
-                                  Edit Application
-                                </AlertDialogTitle>
-                                <AlertDialogDescription>
-                                  <div className="space-y-4 pt-4">
-                                    <div className="grid w-full items-center gap-1.5">
-                                      <Label>Name</Label>
-                                      <Input
-                                        placeholder="e.g. Portainer"
-                                        value={editName}
-                                        onChange={(e) =>
-                                          setEditName(e.target.value)
-                                        }
-                                      />
-                                    </div>
-                                    <div className="grid w-full items-center gap-1.5">
-                                      <Label>Server</Label>
-                                      <Select
-                                        value={
-                                          editServerId !== null
-                                            ? String(editServerId)
-                                            : undefined
-                                        }
-                                        onValueChange={(v) =>
-                                          setEditServerId(Number(v))
-                                        }
-                                        required
-                                      >
-                                        <SelectTrigger className="w-full">
-                                          <SelectValue placeholder="Select server" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                          {servers.map((server) => (
-                                            <SelectItem
-                                              key={server.id}
-                                              value={String(server.id)}
-                                            >
-                                              {server.name}
-                                            </SelectItem>
-                                          ))}
-                                        </SelectContent>
-                                      </Select>
-                                    </div>
-                                    <div className="grid w-full items-center gap-1.5">
-                                      <Label>
-                                        Description{" "}
-                                        <span className="text-stone-600">
-                                          (optional)
-                                        </span>
-                                      </Label>
-                                      <Textarea
-                                        placeholder="Application description"
-                                        value={editDescription}
-                                        onChange={(e) =>
-                                          setEditDescription(e.target.value)
-                                        }
-                                      />
-                                    </div>
-                                    <div className="grid w-full items-center gap-1.5">
-                                      <Label>
-                                        Icon URL{" "}
-                                        <span className="text-stone-600">
-                                          (optional)
-                                        </span>
-                                      </Label>
-                                      <Input
-                                        placeholder="https://example.com/icon.png"
-                                        value={editIcon}
-                                        onChange={(e) =>
-                                          setEditIcon(e.target.value)
-                                        }
-                                      />
-                                    </div>
-                                    <div className="grid w-full items-center gap-1.5">
-                                      <Label>Public URL</Label>
-                                      <Input
-                                        placeholder="https://example.com"
-                                        value={editPublicURL}
-                                        onChange={(e) =>
-                                          setEditPublicURL(e.target.value)
-                                        }
-                                      />
-                                    </div>
-                                    <div className="grid w-full items-center gap-1.5">
-                                      <Label>
-                                        Local URL{" "}
-                                        <span className="text-stone-600">
-                                          (optional)
-                                        </span>
-                                      </Label>
-                                      <Input
-                                        placeholder="http://localhost:3000"
-                                        value={editLocalURL}
-                                        onChange={(e) =>
-                                          setEditLocalURL(e.target.value)
-                                        }
-                                      />
-                                    </div>
-                                  </div>
-                                </AlertDialogDescription>
-                              </AlertDialogHeader>
-                              <AlertDialogFooter>
-                                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                <AlertDialogAction
-                                  onClick={edit}
-                                  disabled={
-                                    !editName || !editPublicURL || !editServerId
-                                  }
+                          <div className="flex flex-col gap-2">
+                            <Button
+                              variant="destructive"
+                              size="icon"
+                              className="h-9 w-9"
+                              onClick={() => deleteApplication(app.id)}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                            <AlertDialog>
+                              <AlertDialogTrigger asChild>
+                                <Button
+                                  size="icon"
+                                  className="h-9 w-9"
+                                  onClick={() => openEditDialog(app)}
                                 >
-                                  Save Changes
-                                </AlertDialogAction>
-                              </AlertDialogFooter>
-                            </AlertDialogContent>
-                          </AlertDialog>
+                                  <Pencil className="h-4 w-4" />
+                                </Button>
+                              </AlertDialogTrigger>
+                              <AlertDialogContent>
+                                <AlertDialogHeader>
+                                  <AlertDialogTitle>
+                                    Edit Application
+                                  </AlertDialogTitle>
+                                  <AlertDialogDescription>
+                                    <div className="space-y-4 pt-4">
+                                      <div className="grid w-full items-center gap-1.5">
+                                        <Label>Name</Label>
+                                        <Input
+                                          placeholder="e.g. Portainer"
+                                          value={editName}
+                                          onChange={(e) =>
+                                            setEditName(e.target.value)
+                                          }
+                                        />
+                                      </div>
+                                      <div className="grid w-full items-center gap-1.5">
+                                        <Label>Server</Label>
+                                        <Select
+                                          value={
+                                            editServerId !== null
+                                              ? String(editServerId)
+                                              : undefined
+                                          }
+                                          onValueChange={(v) =>
+                                            setEditServerId(Number(v))
+                                          }
+                                          required
+                                        >
+                                          <SelectTrigger className="w-full">
+                                            <SelectValue placeholder="Select server" />
+                                          </SelectTrigger>
+                                          <SelectContent>
+                                            {servers.map((server) => (
+                                              <SelectItem
+                                                key={server.id}
+                                                value={String(server.id)}
+                                              >
+                                                {server.name}
+                                              </SelectItem>
+                                            ))}
+                                          </SelectContent>
+                                        </Select>
+                                      </div>
+                                      <div className="grid w-full items-center gap-1.5">
+                                        <Label>
+                                          Description{" "}
+                                          <span className="text-stone-600">
+                                            (optional)
+                                          </span>
+                                        </Label>
+                                        <Textarea
+                                          placeholder="Application description"
+                                          value={editDescription}
+                                          onChange={(e) =>
+                                            setEditDescription(e.target.value)
+                                          }
+                                        />
+                                      </div>
+                                      <div className="grid w-full items-center gap-1.5">
+                                        <Label>
+                                          Icon URL{" "}
+                                          <span className="text-stone-600">
+                                            (optional)
+                                          </span>
+                                        </Label>
+                                        <Input
+                                          placeholder="https://example.com/icon.png"
+                                          value={editIcon}
+                                          onChange={(e) =>
+                                            setEditIcon(e.target.value)
+                                          }
+                                        />
+                                      </div>
+                                      <div className="grid w-full items-center gap-1.5">
+                                        <Label>Public URL</Label>
+                                        <Input
+                                          placeholder="https://example.com"
+                                          value={editPublicURL}
+                                          onChange={(e) =>
+                                            setEditPublicURL(e.target.value)
+                                          }
+                                        />
+                                      </div>
+                                      <div className="grid w-full items-center gap-1.5">
+                                        <Label>
+                                          Local URL{" "}
+                                          <span className="text-stone-600">
+                                            (optional)
+                                          </span>
+                                        </Label>
+                                        <Input
+                                          placeholder="http://localhost:3000"
+                                          value={editLocalURL}
+                                          onChange={(e) =>
+                                            setEditLocalURL(e.target.value)
+                                          }
+                                        />
+                                      </div>
+                                    </div>
+                                  </AlertDialogDescription>
+                                </AlertDialogHeader>
+                                <AlertDialogFooter>
+                                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                  <AlertDialogAction
+                                    onClick={edit}
+                                    disabled={
+                                      !editName || !editPublicURL || !editServerId
+                                    }
+                                  >
+                                    Save Changes
+                                  </AlertDialogAction>
+                                </AlertDialogFooter>
+                              </AlertDialogContent>
+                            </AlertDialog>
+                          </div>
                         </div>
                       </div>
                     </div>
diff --git a/app/dashboard/servers/Servers.tsx b/app/dashboard/servers/Servers.tsx
index bf1a2cf..9b5853f 100644
--- a/app/dashboard/servers/Servers.tsx
+++ b/app/dashboard/servers/Servers.tsx
@@ -16,7 +16,20 @@ import {
   SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { Button } from "@/components/ui/button";
-import { Plus, Link, MonitorCog, FileDigit, Trash2, LayoutGrid, List, Pencil, Cpu, Microchip, MemoryStick, HardDrive } from "lucide-react";
+import {
+  Plus,
+  Link,
+  MonitorCog,
+  FileDigit,
+  Trash2,
+  LayoutGrid,
+  List,
+  Pencil,
+  Cpu,
+  Microchip,
+  MemoryStick,
+  HardDrive,
+} from "lucide-react";
 import {
   Card,
   CardContent,
@@ -62,7 +75,7 @@ import {
 } from "@/components/ui/tooltip";
 import Cookies from "js-cookie";
 import { useState, useEffect } from "react";
-import axios from 'axios';
+import axios from "axios";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface Server {
@@ -112,72 +125,75 @@ export default function Dashboard() {
   const [isSearching, setIsSearching] = useState<boolean>(false);
 
   useEffect(() => {
-    const savedLayout = Cookies.get('layoutPreference-servers');
-    setIsGridLayout(savedLayout === 'grid');
+    const savedLayout = Cookies.get("layoutPreference-servers");
+    setIsGridLayout(savedLayout === "grid");
   }, []);
 
   const toggleLayout = () => {
     const newLayout = !isGridLayout;
     setIsGridLayout(newLayout);
-    Cookies.set('layoutPreference-servers', newLayout ? 'grid' : 'standard', {
+    Cookies.set("layoutPreference-servers", newLayout ? "grid" : "standard", {
       expires: 365,
-      path: '/',
-      sameSite: 'strict'
+      path: "/",
+      sameSite: "strict",
     });
   };
 
   const add = async () => {
     try {
-      await axios.post('/api/servers/add', { 
-        name, 
-        os, 
-        ip, 
-        url, 
-        cpu, 
-        gpu, 
-        ram, 
-        disk 
+      await axios.post("/api/servers/add", {
+        name,
+        os,
+        ip,
+        url,
+        cpu,
+        gpu,
+        ram,
+        disk,
       });
       getServers();
     } catch (error: any) {
       console.log(error.response.data);
     }
-  }
+  };
 
   const getServers = async () => {
     try {
       setLoading(true);
-      const response = await axios.post<GetServersResponse>('/api/servers/get', { 
-        page: currentPage 
-      });
+      const response = await axios.post<GetServersResponse>(
+        "/api/servers/get",
+        {
+          page: currentPage,
+        }
+      );
       setServers(response.data.servers);
       setMaxPage(response.data.maxPage);
       setLoading(false);
     } catch (error: any) {
       console.log(error.response);
     }
-  }
+  };
 
   useEffect(() => {
     getServers();
   }, [currentPage]);
 
   const handlePrevious = () => {
-    setCurrentPage(prev => Math.max(1, prev - 1));
-  }
+    setCurrentPage((prev) => Math.max(1, prev - 1));
+  };
 
   const handleNext = () => {
-    setCurrentPage(prev => Math.min(maxPage, prev + 1));
-  }
+    setCurrentPage((prev) => Math.min(maxPage, prev + 1));
+  };
 
   const deleteApplication = async (id: number) => {
     try {
-      await axios.post('/api/servers/delete', { id });
+      await axios.post("/api/servers/delete", { id });
       getServers();
     } catch (error: any) {
       console.log(error.response.data);
     }
-  }
+  };
 
   const openEditDialog = (server: Server) => {
     setEditId(server.id);
@@ -193,9 +209,9 @@ export default function Dashboard() {
 
   const edit = async () => {
     if (!editId) return;
-    
+
     try {
-      await axios.put('/api/servers/edit', { 
+      await axios.put("/api/servers/edit", {
         id: editId,
         name: editName,
         os: editOs,
@@ -204,14 +220,14 @@ export default function Dashboard() {
         cpu: editCpu,
         gpu: editGpu,
         ram: editRam,
-        disk: editDisk
+        disk: editDisk,
       });
       getServers();
       setEditId(null);
     } catch (error: any) {
       console.log(error.response.data);
     }
-  }
+  };
 
   const searchServers = async () => {
     try {
@@ -272,8 +288,8 @@ export default function Dashboard() {
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <Button 
-                      variant="outline" 
+                    <Button
+                      variant="outline"
                       size="icon"
                       onClick={toggleLayout}
                     >
@@ -285,9 +301,9 @@ export default function Dashboard() {
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
-                    {isGridLayout ? 
-                      "Switch to list view" : 
-                      "Switch to grid view"}
+                    {isGridLayout
+                      ? "Switch to list view"
+                      : "Switch to grid view"}
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
@@ -301,70 +317,144 @@ export default function Dashboard() {
                   <AlertDialogHeader>
                     <AlertDialogTitle>Add an server</AlertDialogTitle>
                     <AlertDialogDescription>
-                    <Tabs defaultValue="general" className="w-full">
-                      <TabsList className="w-full">
-                        <TabsTrigger value="general">General</TabsTrigger>
-                        <TabsTrigger value="hardware">Hardware</TabsTrigger>
-                      </TabsList>
-                      <TabsContent value="general">
-                        <div className="space-y-4 pt-4">
-                          <div className="grid w-full items-center gap-1.5">
-                            <Label htmlFor="name">Name</Label>
-                            <Input id="name" type="text" placeholder="e.g. Server1" onChange={(e) => setName(e.target.value)}/>
-                          </div>
-                          <div className="grid w-full items-center gap-1.5">
-                            <Label htmlFor="description">Operating System <span className="text-stone-600">(optional)</span></Label>
-                            <Select onValueChange={(value) => setOs(value)}>
+                      <Tabs defaultValue="general" className="w-full">
+                        <TabsList className="w-full">
+                          <TabsTrigger value="general">General</TabsTrigger>
+                          <TabsTrigger value="hardware">Hardware</TabsTrigger>
+                        </TabsList>
+                        <TabsContent value="general">
+                          <div className="space-y-4 pt-4">
+                            <div className="grid w-full items-center gap-1.5">
+                              <Label htmlFor="name">Name</Label>
+                              <Input
+                                id="name"
+                                type="text"
+                                placeholder="e.g. Server1"
+                                onChange={(e) => setName(e.target.value)}
+                              />
+                            </div>
+                            <div className="grid w-full items-center gap-1.5">
+                              <Label htmlFor="description">
+                                Operating System{" "}
+                                <span className="text-stone-600">
+                                  (optional)
+                                </span>
+                              </Label>
+                              <Select onValueChange={(value) => setOs(value)}>
                                 <SelectTrigger className="w-full">
-                                    <SelectValue placeholder="Select OS" />
+                                  <SelectValue placeholder="Select OS" />
                                 </SelectTrigger>
                                 <SelectContent>
-                                    <SelectItem value="Windows">Windows</SelectItem>
-                                    <SelectItem value="Linux">Linux</SelectItem>
-                                    <SelectItem value="MacOS">MacOS</SelectItem>
+                                  <SelectItem value="Windows">
+                                    Windows
+                                  </SelectItem>
+                                  <SelectItem value="Linux">Linux</SelectItem>
+                                  <SelectItem value="MacOS">MacOS</SelectItem>
                                 </SelectContent>
-                            </Select>
-                          </div>
-                          <div className="grid w-full items-center gap-1.5">
-                            <Label htmlFor="icon">IP Adress <span className="text-stone-600">(optional)</span></Label>
-                            <Input id="icon" type="text" placeholder="e.g. 192.168.100.2" onChange={(e) => setIp(e.target.value)}/>
-                          </div>
-                          <div className="grid w-full items-center gap-1.5">
-                            <TooltipProvider>
+                              </Select>
+                            </div>
+                            <div className="grid w-full items-center gap-1.5">
+                              <Label htmlFor="icon">
+                                IP Adress{" "}
+                                <span className="text-stone-600">
+                                  (optional)
+                                </span>
+                              </Label>
+                              <Input
+                                id="icon"
+                                type="text"
+                                placeholder="e.g. 192.168.100.2"
+                                onChange={(e) => setIp(e.target.value)}
+                              />
+                            </div>
+                            <div className="grid w-full items-center gap-1.5">
+                              <TooltipProvider>
                                 <Tooltip>
-                                    <TooltipTrigger>
-                                        <Label htmlFor="publicURL">Management URL <span className="text-stone-600">(optional)</span></Label>
-                                    </TooltipTrigger>
-                                    <TooltipContent>
-                                    Link to a web interface (e.g. Proxmox or Portainer) with which the server can be managed
-                                    </TooltipContent>
+                                  <TooltipTrigger>
+                                    <Label htmlFor="publicURL">
+                                      Management URL{" "}
+                                      <span className="text-stone-600">
+                                        (optional)
+                                      </span>
+                                    </Label>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    Link to a web interface (e.g. Proxmox or
+                                    Portainer) with which the server can be
+                                    managed
+                                  </TooltipContent>
                                 </Tooltip>
-                            </TooltipProvider>
-                            <Input id="publicURL" type="text" placeholder="e.g. https://proxmox.server1.com" onChange={(e) => setUrl(e.target.value)}/>
+                              </TooltipProvider>
+                              <Input
+                                id="publicURL"
+                                type="text"
+                                placeholder="e.g. https://proxmox.server1.com"
+                                onChange={(e) => setUrl(e.target.value)}
+                              />
+                            </div>
                           </div>
-                        </div>
-                      </TabsContent>
-                      <TabsContent value="hardware">
-                        <div className="space-y-4 pt-4">
-                          <div className="grid w-full items-center gap-1.5">
-                            <Label htmlFor="name">CPU <span className="text-stone-600">(optional)</span></Label>
-                            <Input id="name" type="text" placeholder="e.g. AMD Ryzen™ 7 7800X3D" onChange={(e) => setCpu(e.target.value)}/>
+                        </TabsContent>
+                        <TabsContent value="hardware">
+                          <div className="space-y-4 pt-4">
+                            <div className="grid w-full items-center gap-1.5">
+                              <Label htmlFor="name">
+                                CPU{" "}
+                                <span className="text-stone-600">
+                                  (optional)
+                                </span>
+                              </Label>
+                              <Input
+                                id="name"
+                                type="text"
+                                placeholder="e.g. AMD Ryzen™ 7 7800X3D"
+                                onChange={(e) => setCpu(e.target.value)}
+                              />
+                            </div>
+                            <div className="grid w-full items-center gap-1.5">
+                              <Label htmlFor="name">
+                                GPU{" "}
+                                <span className="text-stone-600">
+                                  (optional)
+                                </span>
+                              </Label>
+                              <Input
+                                id="name"
+                                type="text"
+                                placeholder="e.g. AMD Radeon™ Graphics"
+                                onChange={(e) => setGpu(e.target.value)}
+                              />
+                            </div>
+                            <div className="grid w-full items-center gap-1.5">
+                              <Label htmlFor="name">
+                                RAM{" "}
+                                <span className="text-stone-600">
+                                  (optional)
+                                </span>
+                              </Label>
+                              <Input
+                                id="name"
+                                type="text"
+                                placeholder="e.g. 64GB DDR5"
+                                onChange={(e) => setRam(e.target.value)}
+                              />
+                            </div>
+                            <div className="grid w-full items-center gap-1.5">
+                              <Label htmlFor="name">
+                                Disk{" "}
+                                <span className="text-stone-600">
+                                  (optional)
+                                </span>
+                              </Label>
+                              <Input
+                                id="name"
+                                type="text"
+                                placeholder="e.g. 2TB SSD"
+                                onChange={(e) => setDisk(e.target.value)}
+                              />
+                            </div>
                           </div>
-                          <div className="grid w-full items-center gap-1.5">
-                              <Label htmlFor="name">GPU <span className="text-stone-600">(optional)</span></Label>
-                              <Input id="name" type="text" placeholder="e.g. AMD Radeon™ Graphics" onChange={(e) => setGpu(e.target.value)}/>
-                          </div>
-                          <div className="grid w-full items-center gap-1.5">
-                              <Label htmlFor="name">RAM <span className="text-stone-600">(optional)</span></Label>
-                              <Input id="name" type="text" placeholder="e.g. 64GB DDR5" onChange={(e) => setRam(e.target.value)}/>
-                          </div>
-                          <div className="grid w-full items-center gap-1.5">
-                              <Label htmlFor="name">Disk <span className="text-stone-600">(optional)</span></Label>
-                              <Input id="name" type="text" placeholder="e.g. 2TB SSD" onChange={(e) => setDisk(e.target.value)}/>
-                          </div>
-                        </div>
-                      </TabsContent>
-                    </Tabs>
+                        </TabsContent>
+                      </Tabs>
                     </AlertDialogDescription>
                   </AlertDialogHeader>
                   <AlertDialogFooter>
@@ -384,30 +474,48 @@ export default function Dashboard() {
             />
           </div>
           <br />
-          {!loading ?
-            <div className={isGridLayout ? 
-              "grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4" : 
-              "space-y-4"}>
+          {!loading ? (
+            <div
+              className={
+                isGridLayout
+                  ? "grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4"
+                  : "space-y-4"
+              }
+            >
               {servers.map((server) => (
-                <Card 
-                  key={server.id} 
-                  className={isGridLayout ? 
-                    "h-full flex flex-col justify-between" : 
-                    "w-full mb-4"}
+                <Card
+                  key={server.id}
+                  className={
+                    isGridLayout
+                      ? "h-full flex flex-col justify-between"
+                      : "w-full mb-4"
+                  }
                 >
                   <CardHeader>
                     <div className="flex items-center justify-between w-full">
                       <div className="flex items-center">
                         <div className="ml-4">
-                          <CardTitle className="text-2xl font-bold">{server.name}</CardTitle>
-                          <CardDescription className={`text-sm mt-1 grid gap-y-1 ${isGridLayout ? "grid-cols-1" : "grid-cols-2 gap-x-4"}`}>
+                          <CardTitle className="text-2xl font-bold">
+                            {server.name}
+                          </CardTitle>
+                          <CardDescription
+                            className={`text-sm mt-1 grid gap-y-1 ${
+                              isGridLayout
+                                ? "grid-cols-1"
+                                : "grid-cols-2 gap-x-4"
+                            }`}
+                          >
                             <div className="flex items-center gap-2 text-foreground/80">
                               <MonitorCog className="h-4 w-4 text-muted-foreground" />
-                              <span><b>OS:</b> {server.os || '-'}</span>
+                              <span>
+                                <b>OS:</b> {server.os || "-"}
+                              </span>
                             </div>
                             <div className="flex items-center gap-2 text-foreground/80">
                               <FileDigit className="h-4 w-4 text-muted-foreground" />
-                              <span><b>IP:</b> {server.ip || 'Nicht angegeben'}</span>
+                              <span>
+                                <b>IP:</b> {server.ip || "Nicht angegeben"}
+                              </span>
                             </div>
 
                             <div className="col-span-full pt-2 pb-2">
@@ -416,150 +524,197 @@ export default function Dashboard() {
 
                             <div className="flex items-center gap-2 text-foreground/80">
                               <Cpu className="h-4 w-4 text-muted-foreground" />
-                              <span><b>CPU:</b> {server.cpu || '-'}</span>
+                              <span>
+                                <b>CPU:</b> {server.cpu || "-"}
+                              </span>
                             </div>
                             <div className="flex items-center gap-2 text-foreground/80">
                               <Microchip className="h-4 w-4 text-muted-foreground" />
-                              <span><b>GPU:</b> {server.gpu || '-'}</span>
+                              <span>
+                                <b>GPU:</b> {server.gpu || "-"}
+                              </span>
                             </div>
                             <div className="flex items-center gap-2 text-foreground/80">
                               <MemoryStick className="h-4 w-4 text-muted-foreground" />
-                              <span><b>RAM:</b> {server.ram || '-'}</span>
+                              <span>
+                                <b>RAM:</b> {server.ram || "-"}
+                              </span>
                             </div>
                             <div className="flex items-center gap-2 text-foreground/80">
                               <HardDrive className="h-4 w-4 text-muted-foreground" />
-                              <span><b>Disk:</b> {server.disk || '-'}</span>
+                              <span>
+                                <b>Disk:</b> {server.disk || "-"}
+                              </span>
                             </div>
                           </CardDescription>
                         </div>
                       </div>
                       <div className="flex flex-col items-end justify-start space-y-2 w-[405px]">
                         <div className="flex items-center gap-2 w-full">
-                        <div className="flex flex-col space-y-2 flex-grow">
+                          <div className="flex flex-col space-y-2 flex-grow">
                             {server.url && (
-                                <Button 
-                                variant="outline" 
+                              <Button
+                                variant="outline"
                                 className="gap-2 w-full"
-                                onClick={() => window.open(server.url, "_blank")}
-                                >
+                                onClick={() =>
+                                  window.open(server.url, "_blank")
+                                }
+                              >
                                 <Link className="h-4 w-4" />
                                 Open Management URL
-                                </Button>
-                            )}
-                            </div>
-                        <Button 
-                            variant="destructive" 
-                            size="icon"
-                            className="w-10"
-                            onClick={() => deleteApplication(server.id)}
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </Button>
-                          <AlertDialog>
-                            <AlertDialogTrigger asChild>
-                              <Button 
-                                size="icon"
-                                className="w-10"
-                                onClick={() => openEditDialog(server)}
-                              >
-                                <Pencil className="h-4 w-4" />
                               </Button>
-                            </AlertDialogTrigger>
-                            <AlertDialogContent>
-                              <AlertDialogHeader>
-                                <AlertDialogTitle>Edit Server</AlertDialogTitle>
-                                <AlertDialogDescription>
-                                  <Tabs defaultValue="general" className="w-full">
-                                    <TabsList className="w-full">
-                                      <TabsTrigger value="general">General</TabsTrigger>
-                                      <TabsTrigger value="hardware">Hardware</TabsTrigger>
-                                    </TabsList>
-                                    <TabsContent value="general">
-                                      <div className="space-y-4 pt-4">
-                                    <div className="grid w-full items-center gap-1.5">
-                                      <Label htmlFor="editOs">Operating System</Label>
-                                      <Select 
-                                        value={editOs} 
-                                        onValueChange={setEditOs}
-                                      >
-                                        <SelectTrigger className="w-full">
-                                          <SelectValue placeholder="Select OS" />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                          <SelectItem value="Windows">Windows</SelectItem>
-                                          <SelectItem value="Linux">Linux</SelectItem>
-                                          <SelectItem value="MacOS">MacOS</SelectItem>
-                                        </SelectContent>
-                                      </Select>
-                                    </div>
-                                    <div className="grid w-full items-center gap-1.5">
-                                      <Label htmlFor="editIp">IP Adress</Label>
-                                      <Input 
-                                        id="editIp" 
-                                        type="text" 
-                                        placeholder="e.g. 192.168.100.2"
-                                        value={editIp}
-                                        onChange={(e) => setEditIp(e.target.value)}
-                                      />
-                                    </div>
-                                    <div className="grid w-full items-center gap-1.5">
-                                      <Label htmlFor="editUrl">Management URL</Label>
-                                      <Input 
-                                        id="editUrl" 
-                                        type="text" 
-                                        placeholder="e.g. https://proxmox.server1.com"
-                                        value={editUrl}
-                                        onChange={(e) => setEditUrl(e.target.value)}
-                                      />
-                                    </div>
-                                  </div>
-                                </TabsContent>
+                            )}
+                          </div>
+                          <div className="flex flex-col gap-2">
+                            <Button
+                              variant="destructive"
+                              size="icon"
+                              className="h-9 w-9"
+                              onClick={() => deleteApplication(server.id)}
+                            >
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                            <AlertDialog>
+                              <AlertDialogTrigger asChild>
+                                <Button
+                                  size="icon"
+                                  className="h-9 w-9"
+                                  onClick={() => openEditDialog(server)}
+                                >
+                                  <Pencil className="h-4 w-4" />
+                                </Button>
+                              </AlertDialogTrigger>
+                              <AlertDialogContent>
+                                <AlertDialogHeader>
+                                  <AlertDialogTitle>
+                                    Edit Server
+                                  </AlertDialogTitle>
+                                  <AlertDialogDescription>
+                                    <Tabs
+                                      defaultValue="general"
+                                      className="w-full"
+                                    >
+                                      <TabsList className="w-full">
+                                        <TabsTrigger value="general">
+                                          General
+                                        </TabsTrigger>
+                                        <TabsTrigger value="hardware">
+                                          Hardware
+                                        </TabsTrigger>
+                                      </TabsList>
+                                      <TabsContent value="general">
+                                        <div className="space-y-4 pt-4">
+                                          <div className="grid w-full items-center gap-1.5">
+                                            <Label htmlFor="editOs">
+                                              Operating System
+                                            </Label>
+                                            <Select
+                                              value={editOs}
+                                              onValueChange={setEditOs}
+                                            >
+                                              <SelectTrigger className="w-full">
+                                                <SelectValue placeholder="Select OS" />
+                                              </SelectTrigger>
+                                              <SelectContent>
+                                                <SelectItem value="Windows">
+                                                  Windows
+                                                </SelectItem>
+                                                <SelectItem value="Linux">
+                                                  Linux
+                                                </SelectItem>
+                                                <SelectItem value="MacOS">
+                                                  MacOS
+                                                </SelectItem>
+                                              </SelectContent>
+                                            </Select>
+                                          </div>
+                                          <div className="grid w-full items-center gap-1.5">
+                                            <Label htmlFor="editIp">
+                                              IP Adress
+                                            </Label>
+                                            <Input
+                                              id="editIp"
+                                              type="text"
+                                              placeholder="e.g. 192.168.100.2"
+                                              value={editIp}
+                                              onChange={(e) =>
+                                                setEditIp(e.target.value)
+                                              }
+                                            />
+                                          </div>
+                                          <div className="grid w-full items-center gap-1.5">
+                                            <Label htmlFor="editUrl">
+                                              Management URL
+                                            </Label>
+                                            <Input
+                                              id="editUrl"
+                                              type="text"
+                                              placeholder="e.g. https://proxmox.server1.com"
+                                              value={editUrl}
+                                              onChange={(e) =>
+                                                setEditUrl(e.target.value)
+                                              }
+                                            />
+                                          </div>
+                                        </div>
+                                      </TabsContent>
 
-                                <TabsContent value="hardware">
-          <div className="space-y-4 pt-4">
-            <div className="grid w-full items-center gap-1.5">
-              <Label htmlFor="editCpu">CPU</Label>
-              <Input 
-                id="editCpu" 
-                value={editCpu}
-                onChange={(e) => setEditCpu(e.target.value)}
-              />
-            </div>
-            <div className="grid w-full items-center gap-1.5">
-              <Label htmlFor="editGpu">GPU</Label>
-              <Input 
-                id="editGpu" 
-                value={editGpu}
-                onChange={(e) => setEditGpu(e.target.value)}
-              />
-            </div>
-            <div className="grid w-full items-center gap-1.5">
-              <Label htmlFor="editRam">RAM</Label>
-              <Input 
-                id="editRam" 
-                value={editRam}
-                onChange={(e) => setEditRam(e.target.value)}
-              />
-            </div>
-            <div className="grid w-full items-center gap-1.5">
-              <Label htmlFor="editDisk">Disk</Label>
-              <Input 
-                id="editDisk" 
-                value={editDisk}
-                onChange={(e) => setEditDisk(e.target.value)}
-              />
-            </div>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </AlertDialogDescription>
-  </AlertDialogHeader>
-  <AlertDialogFooter>
-    <AlertDialogCancel>Cancel</AlertDialogCancel>
-    <Button onClick={edit}>Save</Button>
-  </AlertDialogFooter>
-</AlertDialogContent>
-                          </AlertDialog>
+                                      <TabsContent value="hardware">
+                                        <div className="space-y-4 pt-4">
+                                          <div className="grid w-full items-center gap-1.5">
+                                            <Label htmlFor="editCpu">CPU</Label>
+                                            <Input
+                                              id="editCpu"
+                                              value={editCpu}
+                                              onChange={(e) =>
+                                                setEditCpu(e.target.value)
+                                              }
+                                            />
+                                          </div>
+                                          <div className="grid w-full items-center gap-1.5">
+                                            <Label htmlFor="editGpu">GPU</Label>
+                                            <Input
+                                              id="editGpu"
+                                              value={editGpu}
+                                              onChange={(e) =>
+                                                setEditGpu(e.target.value)
+                                              }
+                                            />
+                                          </div>
+                                          <div className="grid w-full items-center gap-1.5">
+                                            <Label htmlFor="editRam">RAM</Label>
+                                            <Input
+                                              id="editRam"
+                                              value={editRam}
+                                              onChange={(e) =>
+                                                setEditRam(e.target.value)
+                                              }
+                                            />
+                                          </div>
+                                          <div className="grid w-full items-center gap-1.5">
+                                            <Label htmlFor="editDisk">
+                                              Disk
+                                            </Label>
+                                            <Input
+                                              id="editDisk"
+                                              value={editDisk}
+                                              onChange={(e) =>
+                                                setEditDisk(e.target.value)
+                                              }
+                                            />
+                                          </div>
+                                        </div>
+                                      </TabsContent>
+                                    </Tabs>
+                                  </AlertDialogDescription>
+                                </AlertDialogHeader>
+                                <AlertDialogFooter>
+                                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                  <Button onClick={edit}>Save</Button>
+                                </AlertDialogFooter>
+                              </AlertDialogContent>
+                            </AlertDialog>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -567,41 +722,52 @@ export default function Dashboard() {
                 </Card>
               ))}
             </div>
-          : 
+          ) : (
             <div className="flex items-center justify-center">
-                  <div className='inline-block' role='status' aria-label='loading'>
-                  <svg className='w-6 h-6 stroke-white animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
-                  <g clip-path='url(#clip0_9023_61563)'>
-                      <path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' className='my-path'></path>
+              <div className="inline-block" role="status" aria-label="loading">
+                <svg
+                  className="w-6 h-6 stroke-white animate-spin "
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <g clip-path="url(#clip0_9023_61563)">
+                    <path
+                      d="M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444"
+                      stroke="stroke-current"
+                      stroke-width="1.4"
+                      stroke-linecap="round"
+                      className="my-path"
+                    ></path>
                   </g>
                   <defs>
-                      <clipPath id='clip0_9023_61563'>
-                      <rect width='24' height='24' fill='white'></rect>
-                      </clipPath>
+                    <clipPath id="clip0_9023_61563">
+                      <rect width="24" height="24" fill="white"></rect>
+                    </clipPath>
                   </defs>
-                  </svg>
-                  <span className='sr-only'>Loading...</span>
-                  </div>
+                </svg>
+                <span className="sr-only">Loading...</span>
               </div>
-          }
+            </div>
+          )}
           <div className="pt-4">
             <Pagination>
               <PaginationContent>
                 <PaginationItem>
-                  <PaginationPrevious 
-                    href="#" 
+                  <PaginationPrevious
+                    href="#"
                     onClick={handlePrevious}
                     isActive={currentPage > 1}
                   />
                 </PaginationItem>
-                
+
                 <PaginationItem>
                   <PaginationLink isActive>{currentPage}</PaginationLink>
                 </PaginationItem>
 
                 <PaginationItem>
-                  <PaginationNext 
-                    href="#" 
+                  <PaginationNext
+                    href="#"
                     onClick={handleNext}
                     isActive={currentPage < maxPage}
                   />
@@ -612,5 +778,5 @@ export default function Dashboard() {
         </div>
       </SidebarInset>
     </SidebarProvider>
-  )
-}
\ No newline at end of file
+  );
+}