v0.0.2 dev->main

v0.0.2

app/api/applications/edit/route.ts

@@ -0,0 +1,40 @@
+import { NextResponse, NextRequest } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+interface EditRequest {
+    id: number;
+    name: string;
+    description: string;
+    serverId: number;
+    icon: string;
+    publicURL: string;
+    localURL: string;
+}
+
+export async function PUT(request: NextRequest) {
+    try {
+        const body: EditRequest = await request.json();
+        const { id, name, description, serverId, icon, publicURL, localURL } = body;
+
+        const existingApp = await prisma.application.findUnique({ where: { id } });
+        if (!existingApp) {
+            return NextResponse.json({ error: "Server not found" }, { status: 404 });
+        }
+
+        const updatedApplication = await prisma.application.update({
+            where: { id },
+            data: { 
+                serverId,
+                name, 
+                description,
+                icon,
+                publicURL,
+                localURL
+            }
+        });
+
+        return NextResponse.json({ message: "Application updated", application: updatedApplication });
+    } catch (error: any) {
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/api/applications/search/route.ts

@@ -0,0 +1,32 @@
+import { NextResponse, NextRequest } from "next/server";
+import { prisma } from "@/lib/prisma";
+import Fuse from "fuse.js";
+
+interface SearchRequest {
+    searchterm: string;
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        const body: SearchRequest = await request.json();
+        const { searchterm } = body;  
+        
+        const applications = await prisma.application.findMany({});
+
+        const fuseOptions = {
+            keys: ['name', 'description'],
+            threshold: 0.3,
+            includeScore: true,
+        };
+
+        const fuse = new Fuse(applications, fuseOptions);
+        
+        const searchResults = fuse.search(searchterm);
+
+        const results = searchResults.map(({ item }) => item);
+
+        return NextResponse.json({ results });
+    } catch (error: any) {
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/api/servers/search/route.ts

@@ -0,0 +1,32 @@
+import { NextResponse, NextRequest } from "next/server";
+import { prisma } from "@/lib/prisma";
+import Fuse from "fuse.js";
+
+interface SearchRequest {
+    searchterm: string;
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        const body: SearchRequest = await request.json();
+        const { searchterm } = body;  
+        
+        const servers = await prisma.server.findMany({});
+
+        const fuseOptions = {
+            keys: ['name', 'description', 'cpu', 'gpu', 'ram', 'disk'],
+            threshold: 0.3,
+            includeScore: true,
+        };
+
+        const fuse = new Fuse(servers, fuseOptions);
+        
+        const searchResults = fuse.search(searchterm);
+
+        const results = searchResults.map(({ item }) => item);
+
+        return NextResponse.json({ results });
+    } catch (error: any) {
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/dashboard/applications/Applications.tsx

@@ -16,7 +16,16 @@ import {
   SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { Button } from "@/components/ui/button";
-import { Plus, Link, Home, Trash2, LayoutGrid, List } from "lucide-react";
+import {
+  Plus,
+  Link,
+  Home,
+  Trash2,
+  LayoutGrid,
+  List,
+  Pencil,
+  Zap,
+} from "lucide-react";
 import {
   Card,
   CardContent,
@@ -89,6 +98,15 @@ export default function Dashboard() {
   const [publicURL, setPublicURL] = useState<string>("");
   const [localURL, setLocalURL] = useState<string>("");
   const [serverId, setServerId] = useState<number | null>(null);
+
+  const [editName, setEditName] = useState<string>("");
+  const [editDescription, setEditDescription] = useState<string>("");
+  const [editIcon, setEditIcon] = useState<string>("");
+  const [editPublicURL, setEditPublicURL] = useState<string>("");
+  const [editLocalURL, setEditLocalURL] = useState<string>("");
+  const [editId, setEditId] = useState<number | null>(null);
+  const [editServerId, setEditServerId] = useState<number | null>(null);
+
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [maxPage, setMaxPage] = useState<number>(1);
   const [itemsPerPage, setItemsPerPage] = useState<number>(5);
@@ -97,9 +115,12 @@ export default function Dashboard() {
   const [isGridLayout, setIsGridLayout] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
 
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+
   useEffect(() => {
-    const savedLayout = Cookies.get('layoutPreference-app');
+    const savedLayout = Cookies.get("layoutPreference-app");
-    const layout_bool = savedLayout === 'grid';
+    const layout_bool = savedLayout === "grid";
     setIsGridLayout(layout_bool);
     setItemsPerPage(layout_bool ? 15 : 5);
   }, []);
@@ -107,35 +128,35 @@ export default function Dashboard() {
   const toggleLayout = () => {
     const newLayout = !isGridLayout;
     setIsGridLayout(newLayout);
-    Cookies.set('layoutPreference-app', newLayout ? 'grid' : 'standard', {
+    Cookies.set("layoutPreference-app", newLayout ? "grid" : "standard", {
       expires: 365,
-      path: '/',
+      path: "/",
-      sameSite: 'strict'
+      sameSite: "strict",
     });
     setItemsPerPage(newLayout ? 15 : 5);
   };
 
   const add = async () => {
     try {
-      await axios.post('/api/applications/add', { 
+      await axios.post("/api/applications/add", {
-        name, 
+        name,
-        description, 
+        description,
-        icon, 
+        icon,
-        publicURL, 
+        publicURL,
         localURL,
-        serverId 
+        serverId,
       });
       getApplications();
     } catch (error: any) {
-        console.log(error.response?.data);
+      console.log(error.response?.data);
     }
-  }
+  };
 
   const getApplications = async () => {
     try {
       setLoading(true);
       const response = await axios.post<ApplicationsResponse>(
-        '/api/applications/get', 
+        "/api/applications/get",
         { page: currentPage, ITEMS_PER_PAGE: itemsPerPage }
       );
       setApplications(response.data.applications);
@@ -145,22 +166,88 @@ export default function Dashboard() {
     } catch (error: any) {
       console.log(error.response?.data);
     }
-  }
+  };
 
   useEffect(() => {
     getApplications();
   }, [currentPage, itemsPerPage]);
 
-  const handlePrevious = () => setCurrentPage(prev => Math.max(1, prev - 1));
+  const handlePrevious = () => setCurrentPage((prev) => Math.max(1, prev - 1));
-  const handleNext = () => setCurrentPage(prev => Math.min(maxPage, prev + 1));
+  const handleNext = () =>
+    setCurrentPage((prev) => Math.min(maxPage, prev + 1));
 
   const deleteApplication = async (id: number) => {
     try {
-      await axios.post('/api/applications/delete', { id });
+      await axios.post("/api/applications/delete", { id });
       getApplications();
     } catch (error: any) {
       console.log(error.response?.data);
     }
+  };
+
+  const openEditDialog = (app: Application) => {
+    setEditId(app.id);
+    setEditServerId(app.serverId);
+    setEditName(app.name);
+    setEditDescription(app.description || "");
+    setEditIcon(app.icon || "");
+    setEditLocalURL(app.localURL || "");
+    setEditPublicURL(app.publicURL || "");
+  };
+
+  const edit = async () => {
+    if (!editId) return;
+
+    try {
+      await axios.put("/api/applications/edit", {
+        id: editId,
+        serverId: editServerId,
+        name: editName,
+        description: editDescription,
+        icon: editIcon,
+        publicURL: editPublicURL,
+        localURL: editLocalURL,
+      });
+      getApplications();
+      setEditId(null);
+    } catch (error: any) {
+      console.log(error.response.data);
+    }
+  };
+
+  const searchApplications = async () => {
+    try {
+      setIsSearching(true);
+      const response = await axios.post<{ results: Application[] }>(
+        "/api/applications/search",
+        { searchterm: searchTerm }
+      );
+      setApplications(response.data.results);
+      setIsSearching(false);
+    } catch (error: any) {
+      console.error("Search error:", error.response?.data);
+      setIsSearching(false);
+    }
+  };
+
+  useEffect(() => {
+    const delayDebounce = setTimeout(() => {
+      if (searchTerm.trim() === "") {
+        getApplications();
+      } else {
+        searchApplications();
+      }
+    }, 300);
+
+    return () => clearTimeout(delayDebounce);
+  }, [searchTerm]);
+
+  const generateIconURL = async () => {
+    setIcon("https://cdn.jsdelivr.net/gh/selfhst/icons/png/" + name.toLowerCase() + ".png")
+  }
+
+  const generateEditIconURL = async () => {
+    setEditIcon("https://cdn.jsdelivr.net/gh/selfhst/icons/png/" + editName.toLowerCase() + ".png")
   }
 
   return (
@@ -192,16 +279,24 @@ export default function Dashboard() {
           <div className="flex justify-between items-center">
             <span className="text-2xl font-semibold">Your Applications</span>
             <div className="flex gap-2">
-              <Button 
+              <Button
-                variant="outline" 
+                variant="outline"
                 size="icon"
                 onClick={toggleLayout}
-                title={isGridLayout ? "Switch to list view" : "Switch to grid view"}
+                title={
+                  isGridLayout ? "Switch to list view" : "Switch to grid view"
+                }
               >
-                {isGridLayout ? <List className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}
+                {isGridLayout ? (
+                  <List className="h-4 w-4" />
+                ) : (
+                  <LayoutGrid className="h-4 w-4" />
+                )}
               </Button>
               {servers.length === 0 ? (
-                <p className="text-muted-foreground">You must first add a server.</p>
+                <p className="text-muted-foreground">
+                  You must first add a server.
+                </p>
               ) : (
                 <AlertDialog>
                   <AlertDialogTrigger asChild>
@@ -214,151 +309,367 @@ export default function Dashboard() {
                       <AlertDialogTitle>Add an application</AlertDialogTitle>
                       <AlertDialogDescription>
                         <div className="space-y-4 pt-4">
-                        <div className="grid w-full items-center gap-1.5">
+                          <div className="grid w-full items-center gap-1.5">
-                          <Label>Name</Label>
+                            <Label>Name</Label>
-                          <Input placeholder="e.g. Portainer" onChange={(e) => setName(e.target.value)}/>
+                            <Input
-                        </div>
+                              placeholder="e.g. Portainer"
-                        <div className="grid w-full items-center gap-1.5">
+                              onChange={(e) => setName(e.target.value)}
-                          <Label>Server</Label>
+                            />
-                          <Select onValueChange={(v) => setServerId(Number(v))} required>
+                          </div>
-                            <SelectTrigger className="w-full">
+                          <div className="grid w-full items-center gap-1.5">
-                              <SelectValue placeholder="Select server" />
+                            <Label>Server</Label>
-                            </SelectTrigger>
+                            <Select
-                            <SelectContent>
+                              onValueChange={(v) => setServerId(Number(v))}
-                              {servers.map((server) => (
+                              required
-                                <SelectItem key={server.id} value={String(server.id)}>
+                            >
-                                  {server.name}
+                              <SelectTrigger className="w-full">
-                                </SelectItem>
+                                <SelectValue placeholder="Select server" />
-                              ))}
+                              </SelectTrigger>
-                            </SelectContent>
+                              <SelectContent>
-                          </Select>
+                                {servers.map((server) => (
-                        </div>
+                                  <SelectItem
-                        <div className="grid w-full items-center gap-1.5">
+                                    key={server.id}
-                          <Label>Description <span className="text-stone-600">(optional)</span></Label>
+                                    value={String(server.id)}
-                          <Textarea placeholder="Application description" onChange={(e) => setDescription(e.target.value)}/>
+                                  >
-                        </div>
+                                    {server.name}
-                        <div className="grid w-full items-center gap-1.5">
+                                  </SelectItem>
-                          <Label>Icon URL <span className="text-stone-600">(optional)</span></Label>
+                                ))}
-                          <Input placeholder="https://example.com/icon.png" onChange={(e) => setIcon(e.target.value)}/>
+                              </SelectContent>
-                        </div>
+                            </Select>
-                        <div className="grid w-full items-center gap-1.5">
+                          </div>
-                          <Label>Public URL</Label>
+                          <div className="grid w-full items-center gap-1.5">
-                          <Input placeholder="https://example.com" onChange={(e) => setPublicURL(e.target.value)}/>
+                            <Label>
-                        </div>
+                              Description{" "}
-                        <div className="grid w-full items-center gap-1.5">
+                              <span className="text-stone-600">(optional)</span>
-                          <Label>Local URL <span className="text-stone-600">(optional)</span></Label>
+                            </Label>
-                          <Input placeholder="http://localhost:3000" onChange={(e) => setLocalURL(e.target.value)}/>
+                            <Textarea
-                        </div>
+                              placeholder="Application description"
+                              onChange={(e) => setDescription(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>
+                            <div className="flex gap-2">
+                              <Input
+                                value={icon}
+                                placeholder="https://example.com/icon.png"
+                                onChange={(e) => setIcon(e.target.value)}
+                              />
+                              <Button variant="outline" size="icon" onClick={generateIconURL}>
+                                <Zap />
+                              </Button>
+                            </div>
+                          </div>
+                          <div className="grid w-full items-center gap-1.5">
+                            <Label>Public URL</Label>
+                            <Input
+                              placeholder="https://example.com"
+                              onChange={(e) => setPublicURL(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"
+                              onChange={(e) => setLocalURL(e.target.value)}
+                            />
+                          </div>
                         </div>
                       </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>
                       <AlertDialogCancel>Cancel</AlertDialogCancel>
-                      <AlertDialogAction onClick={add} disabled={!name || !publicURL || !serverId}>
+                      <AlertDialogAction
+                        onClick={add}
+                        disabled={!name || !publicURL || !serverId}
+                      >
                         Add
                       </AlertDialogAction>
                     </AlertDialogFooter>
                   </AlertDialogContent>
                 </AlertDialog>
               )}
+            </div>
           </div>
+          <div className="flex flex-col gap-2 mb-4 pt-2">
+            <Input
+              id="application-search"
+              placeholder="Type to search..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
           </div>
           <br />
-          {!loading ?
+          {!loading ? (
-            <div className={isGridLayout ? 
+            <div
-              "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" : 
+              className={
-              "space-y-4"}>
+                isGridLayout
+                  ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+                  : "space-y-4"
+              }
+            >
               {applications.map((app) => (
-                <Card 
+                <Card
-                key={app.id} 
+                  key={app.id}
-                className={isGridLayout ? "h-full flex flex-col justify-between relative" : "w-full mb-4 relative"}
+                  className={
-              >
+                    isGridLayout
-                <CardHeader>
+                      ? "h-full flex flex-col justify-between relative"
-                  <div className="absolute top-2 right-2">
+                      : "w-full mb-4 relative"
-                    <div
+                  }
-                      className={`w-4 h-4 rounded-full flex items-center justify-center ${app.online ? "bg-green-700" : "bg-red-700"}`}
+                >
-                      title={app.online ? "Online" : "Offline"}
+                  <CardHeader>
-                    >
+                    <div className="absolute top-2 right-2">
-                      <div className={`w-2 h-2 rounded-full ${app.online ? "bg-green-500" : "bg-red-500"}`} />
+                      <div
-                    </div>
+                        className={`w-4 h-4 rounded-full flex items-center justify-center ${
-                  </div>
+                          app.online ? "bg-green-700" : "bg-red-700"
-                  <div className="flex items-center justify-between w-full">
+                        }`}
-                    <div className="flex items-center">
+                        title={app.online ? "Online" : "Offline"}
-                      <div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md">
+                      >
-                        {app.icon ? (
+                        <div
-                          <img src={app.icon} alt={app.name} className="w-full h-full object-contain rounded-md" />
+                          className={`w-2 h-2 rounded-full ${
-                        ) : (
+                            app.online ? "bg-green-500" : "bg-red-500"
-                          <span className="text-gray-500 text-xs">Image</span>
+                          }`}
-                        )}
+                        />
-                      </div>
-                      <div className="ml-4">
-                        <CardTitle className="text-2xl font-bold">{app.name}</CardTitle>
-                        <CardDescription className="text-md">
-                          {app.description}<br />
-                          Server: {app.server || 'No server'}
-                        </CardDescription>
                       </div>
                     </div>
-                    <div className="flex flex-col items-end justify-start space-y-2 w-[270px]">
+                    <div className="flex items-center justify-between w-full">
-                      <div className="flex items-center gap-2 w-full">
+                      <div className="flex items-center">
-                        <div className="flex flex-col space-y-2 flex-grow">
+                        <div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md">
-                          <Button 
+                          {app.icon ? (
-                            variant="outline" 
+                            <img
-                            className="gap-2 w-full"
+                              src={app.icon}
-                            onClick={() => window.open(app.publicURL, "_blank")}
+                              alt={app.name}
-                          >
+                              className="w-full h-full object-contain rounded-md"
-                            <Link className="h-4 w-4" />
+                            />
-                            Open Public URL
+                          ) : (
-                          </Button>
+                            <span className="text-gray-500 text-xs">Image</span>
-                          {app.localURL && (
-                            <Button 
-                              variant="outline" 
-                              className="gap-2 w-full"
-                              onClick={() => window.open(app.localURL, "_blank")}
-                            >
-                              <Home className="h-4 w-4" />
-                              Open Local URL
-                            </Button>
                           )}
                         </div>
-                        <Button 
+                        <div className="ml-4">
-                          variant="destructive" 
+                          <CardTitle className="text-2xl font-bold">
-                          size="icon"
+                            {app.name}
-                          className="h-[72px] w-10"
+                          </CardTitle>
-                          onClick={() => deleteApplication(app.id)}
+                          <CardDescription className="text-md">
-                        >
+                            {app.description}
-                          <Trash2 className="h-4 w-4" />
+                            <br />
-                        </Button>
+                            Server: {app.server || "No server"}
+                          </CardDescription>
+                        </div>
+                      </div>
+                      <div className="flex flex-col items-end justify-start space-y-2 w-[270px]">
+                        <div className="flex items-center gap-2 w-full">
+                          <div className="flex flex-col space-y-2 flex-grow">
+                            <Button
+                              variant="outline"
+                              className="gap-2 w-full"
+                              onClick={() =>
+                                window.open(app.publicURL, "_blank")
+                              }
+                            >
+                              <Link className="h-4 w-4" />
+                              Open Public URL
+                            </Button>
+                            {app.localURL && (
+                              <Button
+                                variant="outline"
+                                className="gap-2 w-full"
+                                onClick={() =>
+                                  window.open(app.localURL, "_blank")
+                                }
+                              >
+                                <Home className="h-4 w-4" />
+                                Open Local URL
+                              </Button>
+                            )}
+                          </div>
+                          <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)}
+                                >
+                                  <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>
+                                        <div className="flex gap-2">
+                                          <Input
+                                            placeholder="https://example.com/icon.png"
+                                            value={editIcon}
+                                            onChange={(e) =>
+                                              setEditIcon(e.target.value)
+                                            }
+                                          />
+                                          <Button variant="outline" size="icon" onClick={generateEditIconURL}>
+                                            <Zap />
+                                          </Button>
+                                        </div>
+                                      </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>
-                  </div>
+                  </CardHeader>
-                </CardHeader>
+                </Card>
-              </Card>                 
+              ))}
-            ))}
             </div>
-          :
+          ) : (
-          <div className="flex items-center justify-center">
+            <div className="flex items-center justify-center">
-                <div className='inline-block' role='status' aria-label='loading'>
+              <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'>
+                <svg
-                <g clip-path='url(#clip0_9023_61563)'>
+                  className="w-6 h-6 stroke-white animate-spin "
-                    <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>
+                  viewBox="0 0 24 24"
-                </g>
+                  fill="none"
-                <defs>
+                  xmlns="http://www.w3.org/2000/svg"
-                    <clipPath id='clip0_9023_61563'>
+                >
-                    <rect width='24' height='24' fill='white'></rect>
+                  <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>
-                </defs>
+                  </defs>
                 </svg>
-                <span className='sr-only'>Loading...</span>
+                <span className="sr-only">Loading...</span>
-                </div>
+              </div>
             </div>
-          }
+          )}
           <div className="pt-4">
             <Pagination>
               <PaginationContent>
                 <PaginationItem>
-                  <PaginationPrevious 
+                  <PaginationPrevious
-                    href="#" 
+                    href="#"
                     onClick={handlePrevious}
                     isActive={currentPage > 1}
                   />
@@ -367,8 +678,8 @@ export default function Dashboard() {
                   <PaginationLink isActive>{currentPage}</PaginationLink>
                 </PaginationItem>
                 <PaginationItem>
-                  <PaginationNext 
+                  <PaginationNext
-                    href="#" 
+                    href="#"
                     onClick={handleNext}
                     isActive={currentPage < maxPage}
                   />
@@ -379,5 +690,5 @@ export default function Dashboard() {
         </div>
       </SidebarInset>
     </SidebarProvider>
-  )
+  );
-}
+}

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 {
@@ -108,73 +121,79 @@ export default function Dashboard() {
   const [editRam, setEditRam] = useState<string>("");
   const [editDisk, setEditDisk] = useState<string>("");
 
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+
   useEffect(() => {
-    const savedLayout = Cookies.get('layoutPreference-servers');
+    const savedLayout = Cookies.get("layoutPreference-servers");
-    setIsGridLayout(savedLayout === 'grid');
+    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: '/',
+      path: "/",
-      sameSite: 'strict'
+      sameSite: "strict",
     });
   };
 
   const add = async () => {
     try {
-      await axios.post('/api/servers/add', { 
+      await axios.post("/api/servers/add", {
-        name, 
+        name,
-        os, 
+        os,
-        ip, 
+        ip,
-        url, 
+        url,
-        cpu, 
+        cpu,
-        gpu, 
+        gpu,
-        ram, 
+        ram,
-        disk 
+        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', { 
+      const response = await axios.post<GetServersResponse>(
-        page: currentPage 
+        "/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);
@@ -190,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,
@@ -201,14 +220,41 @@ 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 {
+      setIsSearching(true);
+      const response = await axios.post<{ results: Server[] }>(
+        "/api/servers/search",
+        { searchterm: searchTerm }
+      );
+      setServers(response.data.results);
+      setIsSearching(false);
+    } catch (error: any) {
+      console.error("Search error:", error.response?.data);
+      setIsSearching(false);
+    }
+  };
+
+  useEffect(() => {
+    const delayDebounce = setTimeout(() => {
+      if (searchTerm.trim() === "") {
+        getServers();
+      } else {
+        searchServers();
+      }
+    }, 300);
+
+    return () => clearTimeout(delayDebounce);
+  }, [searchTerm]);
 
   return (
     <SidebarProvider>
@@ -242,8 +288,8 @@ export default function Dashboard() {
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <Button 
+                    <Button
-                      variant="outline" 
+                      variant="outline"
                       size="icon"
                       onClick={toggleLayout}
                     >
@@ -255,9 +301,9 @@ export default function Dashboard() {
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
-                    {isGridLayout ? 
+                    {isGridLayout
-                      "Switch to list view" : 
+                      ? "Switch to list view"
-                      "Switch to grid view"}
+                      : "Switch to grid view"}
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
@@ -271,70 +317,144 @@ export default function Dashboard() {
                   <AlertDialogHeader>
                     <AlertDialogTitle>Add an server</AlertDialogTitle>
                     <AlertDialogDescription>
-                    <Tabs defaultValue="general" className="w-full">
+                      <Tabs defaultValue="general" className="w-full">
-                      <TabsList className="w-full">
+                        <TabsList className="w-full">
-                        <TabsTrigger value="general">General</TabsTrigger>
+                          <TabsTrigger value="general">General</TabsTrigger>
-                        <TabsTrigger value="hardware">Hardware</TabsTrigger>
+                          <TabsTrigger value="hardware">Hardware</TabsTrigger>
-                      </TabsList>
+                        </TabsList>
-                      <TabsContent value="general">
+                        <TabsContent value="general">
-                        <div className="space-y-4 pt-4">
+                          <div className="space-y-4 pt-4">
-                          <div className="grid w-full items-center gap-1.5">
+                            <div className="grid w-full items-center gap-1.5">
-                            <Label htmlFor="name">Name</Label>
+                              <Label htmlFor="name">Name</Label>
-                            <Input id="name" type="text" placeholder="e.g. Server1" onChange={(e) => setName(e.target.value)}/>
+                              <Input
-                          </div>
+                                id="name"
-                          <div className="grid w-full items-center gap-1.5">
+                                type="text"
-                            <Label htmlFor="description">Operating System <span className="text-stone-600">(optional)</span></Label>
+                                placeholder="e.g. Server1"
-                            <Select onValueChange={(value) => setOs(value)}>
+                                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="Windows">
-                                    <SelectItem value="Linux">Linux</SelectItem>
+                                    Windows
-                                    <SelectItem value="MacOS">MacOS</SelectItem>
+                                  </SelectItem>
+                                  <SelectItem value="Linux">Linux</SelectItem>
+                                  <SelectItem value="MacOS">MacOS</SelectItem>
                                 </SelectContent>
-                            </Select>
+                              </Select>
-                          </div>
+                            </div>
-                          <div className="grid w-full items-center gap-1.5">
+                            <div className="grid w-full items-center gap-1.5">
-                            <Label htmlFor="icon">IP Adress <span className="text-stone-600">(optional)</span></Label>
+                              <Label htmlFor="icon">
-                            <Input id="icon" type="text" placeholder="e.g. 192.168.100.2" onChange={(e) => setIp(e.target.value)}/>
+                                IP Adress{" "}
-                          </div>
+                                <span className="text-stone-600">
-                          <div className="grid w-full items-center gap-1.5">
+                                  (optional)
-                            <TooltipProvider>
+                                </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>
+                                  <TooltipTrigger>
-                                        <Label htmlFor="publicURL">Management URL <span className="text-stone-600">(optional)</span></Label>
+                                    <Label htmlFor="publicURL">
-                                    </TooltipTrigger>
+                                      Management URL{" "}
-                                    <TooltipContent>
+                                      <span className="text-stone-600">
-                                    Link to a web interface (e.g. Proxmox or Portainer) with which the server can be managed
+                                        (optional)
-                                    </TooltipContent>
+                                      </span>
+                                    </Label>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    Link to a web interface (e.g. Proxmox or
+                                    Portainer) with which the server can be
+                                    managed
+                                  </TooltipContent>
                                 </Tooltip>
-                            </TooltipProvider>
+                              </TooltipProvider>
-                            <Input id="publicURL" type="text" placeholder="e.g. https://proxmox.server1.com" onChange={(e) => setUrl(e.target.value)}/>
+                              <Input
+                                id="publicURL"
+                                type="text"
+                                placeholder="e.g. https://proxmox.server1.com"
+                                onChange={(e) => setUrl(e.target.value)}
+                              />
+                            </div>
                           </div>
-                        </div>
+                        </TabsContent>
-                      </TabsContent>
+                        <TabsContent value="hardware">
-                      <TabsContent value="hardware">
+                          <div className="space-y-4 pt-4">
-                        <div className="space-y-4 pt-4">
+                            <div className="grid w-full items-center gap-1.5">
-                          <div className="grid w-full items-center gap-1.5">
+                              <Label htmlFor="name">
-                            <Label htmlFor="name">CPU <span className="text-stone-600">(optional)</span></Label>
+                                CPU{" "}
-                            <Input id="name" type="text" placeholder="e.g. AMD Ryzen™ 7 7800X3D" onChange={(e) => setCpu(e.target.value)}/>
+                                <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">
+                        </TabsContent>
-                              <Label htmlFor="name">GPU <span className="text-stone-600">(optional)</span></Label>
+                      </Tabs>
-                              <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>
                     </AlertDialogDescription>
                   </AlertDialogHeader>
                   <AlertDialogFooter>
@@ -345,31 +465,57 @@ export default function Dashboard() {
               </AlertDialog>
             </div>
           </div>
+          <div className="flex flex-col gap-2 mb-4 pt-2">
+            <Input
+              id="application-search"
+              placeholder="Type to search..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
           <br />
-          {!loading ?
+          {!loading ? (
-            <div className={isGridLayout ? 
+            <div
-              "grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4" : 
+              className={
-              "space-y-4"}>
+                isGridLayout
+                  ? "grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-4"
+                  : "space-y-4"
+              }
+            >
               {servers.map((server) => (
-                <Card 
+                <Card
-                  key={server.id} 
+                  key={server.id}
-                  className={isGridLayout ? 
+                  className={
-                    "h-full flex flex-col justify-between" : 
+                    isGridLayout
-                    "w-full mb-4"}
+                      ? "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>
+                          <CardTitle className="text-2xl font-bold">
-                          <CardDescription className={`text-sm mt-1 grid gap-y-1 ${isGridLayout ? "grid-cols-1" : "grid-cols-2 gap-x-4"}`}>
+                            {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">
@@ -378,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 
+                              <Button
-                                variant="outline" 
+                                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>
+                          </div>
-                              <AlertDialogHeader>
+                          <div className="flex flex-col gap-2">
-                                <AlertDialogTitle>Edit Server</AlertDialogTitle>
+                            <Button
-                                <AlertDialogDescription>
+                              variant="destructive"
-                                  <Tabs defaultValue="general" className="w-full">
+                              size="icon"
-                                    <TabsList className="w-full">
+                              className="h-9 w-9"
-                                      <TabsTrigger value="general">General</TabsTrigger>
+                              onClick={() => deleteApplication(server.id)}
-                                      <TabsTrigger value="hardware">Hardware</TabsTrigger>
+                            >
-                                    </TabsList>
+                              <Trash2 className="h-4 w-4" />
-                                    <TabsContent value="general">
+                            </Button>
-                                      <div className="space-y-4 pt-4">
+                            <AlertDialog>
-                                    <div className="grid w-full items-center gap-1.5">
+                              <AlertDialogTrigger asChild>
-                                      <Label htmlFor="editOs">Operating System</Label>
+                                <Button
-                                      <Select 
+                                  size="icon"
-                                        value={editOs} 
+                                  className="h-9 w-9"
-                                        onValueChange={setEditOs}
+                                  onClick={() => openEditDialog(server)}
-                                      >
+                                >
-                                        <SelectTrigger className="w-full">
+                                  <Pencil className="h-4 w-4" />
-                                          <SelectValue placeholder="Select OS" />
+                                </Button>
-                                        </SelectTrigger>
+                              </AlertDialogTrigger>
-                                        <SelectContent>
+                              <AlertDialogContent>
-                                          <SelectItem value="Windows">Windows</SelectItem>
+                                <AlertDialogHeader>
-                                          <SelectItem value="Linux">Linux</SelectItem>
+                                  <AlertDialogTitle>
-                                          <SelectItem value="MacOS">MacOS</SelectItem>
+                                    Edit Server
-                                        </SelectContent>
+                                  </AlertDialogTitle>
-                                      </Select>
+                                  <AlertDialogDescription>
-                                    </div>
+                                    <Tabs
-                                    <div className="grid w-full items-center gap-1.5">
+                                      defaultValue="general"
-                                      <Label htmlFor="editIp">IP Adress</Label>
+                                      className="w-full"
-                                      <Input 
+                                    >
-                                        id="editIp" 
+                                      <TabsList className="w-full">
-                                        type="text" 
+                                        <TabsTrigger value="general">
-                                        placeholder="e.g. 192.168.100.2"
+                                          General
-                                        value={editIp}
+                                        </TabsTrigger>
-                                        onChange={(e) => setEditIp(e.target.value)}
+                                        <TabsTrigger value="hardware">
-                                      />
+                                          Hardware
-                                    </div>
+                                        </TabsTrigger>
-                                    <div className="grid w-full items-center gap-1.5">
+                                      </TabsList>
-                                      <Label htmlFor="editUrl">Management URL</Label>
+                                      <TabsContent value="general">
-                                      <Input 
+                                        <div className="space-y-4 pt-4">
-                                        id="editUrl" 
+                                          <div className="grid w-full items-center gap-1.5">
-                                        type="text" 
+                                            <Label htmlFor="editOs">
-                                        placeholder="e.g. https://proxmox.server1.com"
+                                              Operating System
-                                        value={editUrl}
+                                            </Label>
-                                        onChange={(e) => setEditUrl(e.target.value)}
+                                            <Select
-                                      />
+                                              value={editOs}
-                                    </div>
+                                              onValueChange={setEditOs}
-                                  </div>
+                                            >
-                                </TabsContent>
+                                              <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">
+                                      <TabsContent value="hardware">
-          <div className="space-y-4 pt-4">
+                                        <div className="space-y-4 pt-4">
-            <div className="grid w-full items-center gap-1.5">
+                                          <div className="grid w-full items-center gap-1.5">
-              <Label htmlFor="editCpu">CPU</Label>
+                                            <Label htmlFor="editCpu">CPU</Label>
-              <Input 
+                                            <Input
-                id="editCpu" 
+                                              id="editCpu"
-                value={editCpu}
+                                              value={editCpu}
-                onChange={(e) => setEditCpu(e.target.value)}
+                                              onChange={(e) =>
-              />
+                                                setEditCpu(e.target.value)
-            </div>
+                                              }
-            <div className="grid w-full items-center gap-1.5">
+                                            />
-              <Label htmlFor="editGpu">GPU</Label>
+                                          </div>
-              <Input 
+                                          <div className="grid w-full items-center gap-1.5">
-                id="editGpu" 
+                                            <Label htmlFor="editGpu">GPU</Label>
-                value={editGpu}
+                                            <Input
-                onChange={(e) => setEditGpu(e.target.value)}
+                                              id="editGpu"
-              />
+                                              value={editGpu}
-            </div>
+                                              onChange={(e) =>
-            <div className="grid w-full items-center gap-1.5">
+                                                setEditGpu(e.target.value)
-              <Label htmlFor="editRam">RAM</Label>
+                                              }
-              <Input 
+                                            />
-                id="editRam" 
+                                          </div>
-                value={editRam}
+                                          <div className="grid w-full items-center gap-1.5">
-                onChange={(e) => setEditRam(e.target.value)}
+                                            <Label htmlFor="editRam">RAM</Label>
-              />
+                                            <Input
-            </div>
+                                              id="editRam"
-            <div className="grid w-full items-center gap-1.5">
+                                              value={editRam}
-              <Label htmlFor="editDisk">Disk</Label>
+                                              onChange={(e) =>
-              <Input 
+                                                setEditRam(e.target.value)
-                id="editDisk" 
+                                              }
-                value={editDisk}
+                                            />
-                onChange={(e) => setEditDisk(e.target.value)}
+                                          </div>
-              />
+                                          <div className="grid w-full items-center gap-1.5">
-            </div>
+                                            <Label htmlFor="editDisk">
-          </div>
+                                              Disk
-        </TabsContent>
+                                            </Label>
-      </Tabs>
+                                            <Input
-    </AlertDialogDescription>
+                                              id="editDisk"
-  </AlertDialogHeader>
+                                              value={editDisk}
-  <AlertDialogFooter>
+                                              onChange={(e) =>
-    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                                setEditDisk(e.target.value)
-    <Button onClick={edit}>Save</Button>
+                                              }
-  </AlertDialogFooter>
+                                            />
-</AlertDialogContent>
+                                          </div>
-                          </AlertDialog>
+                                        </div>
+                                      </TabsContent>
+                                    </Tabs>
+                                  </AlertDialogDescription>
+                                </AlertDialogHeader>
+                                <AlertDialogFooter>
+                                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                  <Button onClick={edit}>Save</Button>
+                                </AlertDialogFooter>
+                              </AlertDialogContent>
+                            </AlertDialog>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -529,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'>
+              <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'>
+                <svg
-                  <g clip-path='url(#clip0_9023_61563)'>
+                  className="w-6 h-6 stroke-white animate-spin "
-                      <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>
+                  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'>
+                    <clipPath id="clip0_9023_61563">
-                      <rect width='24' height='24' fill='white'></rect>
+                      <rect width="24" height="24" fill="white"></rect>
-                      </clipPath>
+                    </clipPath>
                   </defs>
-                  </svg>
+                </svg>
-                  <span className='sr-only'>Loading...</span>
+                <span className="sr-only">Loading...</span>
-                  </div>
               </div>
-          }
+            </div>
+          )}
           <div className="pt-4">
             <Pagination>
               <PaginationContent>
                 <PaginationItem>
-                  <PaginationPrevious 
+                  <PaginationPrevious
-                    href="#" 
+                    href="#"
                     onClick={handlePrevious}
                     isActive={currentPage > 1}
                   />
                 </PaginationItem>
-                
+
                 <PaginationItem>
                   <PaginationLink isActive>{currentPage}</PaginationLink>
                 </PaginationItem>
 
                 <PaginationItem>
-                  <PaginationNext 
+                  <PaginationNext
-                    href="#" 
+                    href="#"
                     onClick={handleNext}
                     isActive={currentPage < maxPage}
                   />
@@ -574,5 +778,5 @@ export default function Dashboard() {
         </div>
       </SidebarInset>
     </SidebarProvider>
-  )
+  );
-}
+}

components/app-sidebar.tsx

@@ -18,8 +18,8 @@ import { Button } from "@/components/ui/button"
 import Link from "next/link"
 import Cookies from "js-cookie"
 import { useRouter } from "next/navigation"
+import packageJson from "@/package.json"
 
-// Typdefinitionen
 interface NavItem {
   title: string
   icon?: React.ComponentType<any>
@@ -83,7 +83,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 <Image src="/logo.png" width={48} height={48} alt="Logo"/>
                 <div className="flex flex-col gap-0.5 leading-none">
                   <span className="font-semibold">CoreControl</span>
-                  <span className="">v0.0.1</span>
+                  <span className="">v{packageJson.version}</span>
                 </div>
               </a>
             </SidebarMenuButton>

compose.yml

@@ -8,7 +8,7 @@ services:
       LOGIN_PASSWORD: "SecretPassword"
       JWT_SECRET: RANDOM_SECRET
       ACCOUNT_SECRET: RANDOM_SECRET
-      DATABASE_URL: "postgresql://postgres:postgres@db:5432/postgres?sslmode=require&schema=public"
+      DATABASE_URL: "postgresql://postgres:postgres@db:5432/postgres"
     depends_on:
       - db
       - agent
@@ -16,7 +16,7 @@ services:
   agent:
     image: haedlessdev/corecontrol-agent:latest
     environment:
-      DATABASE_URL: "postgresql://postgres:postgres@db:5432/postgres?sslmode=require&schema=public"
+      DATABASE_URL: "postgresql://postgres:postgres@db:5432/postgres"
 
   db:
     image: postgres:17

package-lock.json

@@ -26,12 +26,12 @@
         "axios": "^1.8.4",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "fuse.js": "^7.1.0",
         "js-cookie": "^3.0.5",
         "jsonwebtoken": "^9.0.2",
         "lucide-react": "^0.487.0",
         "next": "15.3.0",
         "next-themes": "^0.4.6",
-        "pg": "^8.14.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "tailwind-merge": "^3.2.0",
@@ -2821,6 +2821,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.1.0.tgz",
+      "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -3443,95 +3452,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/pg": {
-      "version": "8.14.1",
-      "resolved": "https://registry.npmjs.org/pg/-/pg-8.14.1.tgz",
-      "integrity": "sha512-0TdbqfjwIun9Fm/r89oB7RFQ0bLgduAhiIqIXOsyKoiC/L54DbuAAzIEN/9Op0f1Po9X7iCPXGoa/Ah+2aI8Xw==",
-      "license": "MIT",
-      "dependencies": {
-        "pg-connection-string": "^2.7.0",
-        "pg-pool": "^3.8.0",
-        "pg-protocol": "^1.8.0",
-        "pg-types": "^2.1.0",
-        "pgpass": "1.x"
-      },
-      "engines": {
-        "node": ">= 8.0.0"
-      },
-      "optionalDependencies": {
-        "pg-cloudflare": "^1.1.1"
-      },
-      "peerDependencies": {
-        "pg-native": ">=3.0.1"
-      },
-      "peerDependenciesMeta": {
-        "pg-native": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/pg-cloudflare": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.1.1.tgz",
-      "integrity": "sha512-xWPagP/4B6BgFO+EKz3JONXv3YDgvkbVrGw2mTo3D6tVDQRh1e7cqVGvyR3BE+eQgAvx1XhW/iEASj4/jCWl3Q==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/pg-connection-string": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.7.0.tgz",
-      "integrity": "sha512-PI2W9mv53rXJQEOb8xNR8lH7Hr+EKa6oJa38zsK0S/ky2er16ios1wLKhZyxzD7jUReiWokc9WK5nxSnC7W1TA==",
-      "license": "MIT"
-    },
-    "node_modules/pg-int8": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz",
-      "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/pg-pool": {
-      "version": "3.8.0",
-      "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.8.0.tgz",
-      "integrity": "sha512-VBw3jiVm6ZOdLBTIcXLNdSotb6Iy3uOCwDGFAksZCXmi10nyRvnP2v3jl4d+IsLYRyXf6o9hIm/ZtUzlByNUdw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "pg": ">=8.0"
-      }
-    },
-    "node_modules/pg-protocol": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.8.0.tgz",
-      "integrity": "sha512-jvuYlEkL03NRvOoyoRktBK7+qU5kOvlAwvmrH8sr3wbLrOdVWsRxQfz8mMy9sZFsqJ1hEWNfdWKI4SAmoL+j7g==",
-      "license": "MIT"
-    },
-    "node_modules/pg-types": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz",
-      "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==",
-      "license": "MIT",
-      "dependencies": {
-        "pg-int8": "1.0.1",
-        "postgres-array": "~2.0.0",
-        "postgres-bytea": "~1.0.0",
-        "postgres-date": "~1.0.4",
-        "postgres-interval": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/pgpass": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz",
-      "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==",
-      "license": "MIT",
-      "dependencies": {
-        "split2": "^4.1.0"
-      }
-    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3567,45 +3487,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postgres-array": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
-      "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postgres-bytea": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz",
-      "integrity": "sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postgres-date": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz",
-      "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postgres-interval": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz",
-      "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==",
-      "license": "MIT",
-      "dependencies": {
-        "xtend": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/prisma": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/prisma/-/prisma-6.6.0.tgz",
@@ -3839,15 +3720,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/split2": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz",
-      "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">= 10.x"
-      }
-    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -4013,15 +3885,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
     "node_modules/zustand": {
       "version": "4.5.6",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.6.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "corecontrol",
-  "version": "0.1.0",
+  "version": "0.0.2",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -27,12 +27,12 @@
     "axios": "^1.8.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "fuse.js": "^7.1.0",
     "js-cookie": "^3.0.5",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.487.0",
     "next": "15.3.0",
     "next-themes": "^0.4.6",
-    "pg": "^8.14.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.2.0",