Edit APplications Function & Edit Application API Fixes

app/api/applications/edit/route.ts

@@ -5,6 +5,7 @@ interface EditRequest {
     id: number;
     name: string;
     description: string;
+    serverId: number;
     icon: string;
     publicURL: string;
     localURL: string;
@@ -13,16 +14,17 @@ interface EditRequest {
 export async function PUT(request: NextRequest) {
     try {
         const body: EditRequest = await request.json();
-        const { id, name, description, icon, publicURL, localURL } = body;
+        const { id, name, description, serverId, icon, publicURL, localURL } = body;
 
-        const existingServer = await prisma.server.findUnique({ where: { id } });
+        const existingApp = await prisma.application.findUnique({ where: { id } });
-        if (!existingServer) {
+        if (!existingApp) {
             return NextResponse.json({ error: "Server not found" }, { status: 404 });
         }
 
         const updatedApplication = await prisma.application.update({
             where: { id },
             data: { 
+                serverId,
                 name, 
                 description,
                 icon,

app/dashboard/applications/Applications.tsx

@@ -16,7 +16,15 @@ 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,
+} from "lucide-react";
 import {
   Card,
   CardContent,
@@ -89,6 +97,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);
@@ -98,8 +115,8 @@ export default function Dashboard() {
   const [loading, setLoading] = useState<boolean>(true);
 
   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 +124,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,
         description,
         icon,
         publicURL,
         localURL,
-        serverId 
+        serverId,
       });
       getApplications();
     } catch (error: any) {
       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,23 +162,54 @@ 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);
     }
+  };
 
   return (
     <SidebarProvider>
@@ -196,12 +244,20 @@ export default function Dashboard() {
                 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>
@@ -216,17 +272,26 @@ export default function Dashboard() {
                         <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" onChange={(e) => setName(e.target.value)}/>
+                            <Input
+                              placeholder="e.g. Portainer"
+                              onChange={(e) => setName(e.target.value)}
+                            />
                           </div>
                           <div className="grid w-full items-center gap-1.5">
                             <Label>Server</Label>
-                          <Select onValueChange={(v) => setServerId(Number(v))} required>
+                            <Select
+                              onValueChange={(v) => setServerId(Number(v))}
+                              required
+                            >
                               <SelectTrigger className="w-full">
                                 <SelectValue placeholder="Select server" />
                               </SelectTrigger>
                               <SelectContent>
                                 {servers.map((server) => (
-                                <SelectItem key={server.id} value={String(server.id)}>
+                                  <SelectItem
+                                    key={server.id}
+                                    value={String(server.id)}
+                                  >
                                     {server.name}
                                   </SelectItem>
                                 ))}
@@ -234,27 +299,51 @@ export default function Dashboard() {
                             </Select>
                           </div>
                           <div className="grid w-full items-center gap-1.5">
-                          <Label>Description <span className="text-stone-600">(optional)</span></Label>
+                            <Label>
-                          <Textarea placeholder="Application description" onChange={(e) => setDescription(e.target.value)}/>
+                              Description{" "}
+                              <span className="text-stone-600">(optional)</span>
+                            </Label>
+                            <Textarea
+                              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>
+                            <Label>
-                          <Input placeholder="https://example.com/icon.png" onChange={(e) => setIcon(e.target.value)}/>
+                              Icon URL{" "}
+                              <span className="text-stone-600">(optional)</span>
+                            </Label>
+                            <Input
+                              placeholder="https://example.com/icon.png"
+                              onChange={(e) => setIcon(e.target.value)}
+                            />
                           </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)}/>
+                            <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>
+                            <Label>
-                          <Input placeholder="http://localhost:3000" onChange={(e) => setLocalURL(e.target.value)}/>
+                              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>
@@ -264,38 +353,59 @@ export default function Dashboard() {
             </div>
           </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
                   key={app.id}
-                className={isGridLayout ? "h-full flex flex-col justify-between relative" : "w-full mb-4 relative"}
+                  className={
+                    isGridLayout
+                      ? "h-full flex flex-col justify-between relative"
+                      : "w-full mb-4 relative"
+                  }
                 >
                   <CardHeader>
                     <div className="absolute top-2 right-2">
                       <div
-                      className={`w-4 h-4 rounded-full flex items-center justify-center ${app.online ? "bg-green-700" : "bg-red-700"}`}
+                        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"}
                       >
-                      <div className={`w-2 h-2 rounded-full ${app.online ? "bg-green-500" : "bg-red-500"}`} />
+                        <div
+                          className={`w-2 h-2 rounded-full ${
+                            app.online ? "bg-green-500" : "bg-red-500"
+                          }`}
+                        />
                       </div>
                     </div>
                     <div className="flex items-center justify-between w-full">
                       <div className="flex items-center">
                         <div className="w-16 h-16 flex-shrink-0 flex items-center justify-center rounded-md">
                           {app.icon ? (
-                          <img src={app.icon} alt={app.name} className="w-full h-full object-contain rounded-md" />
+                            <img
+                              src={app.icon}
+                              alt={app.name}
+                              className="w-full h-full object-contain rounded-md"
+                            />
                           ) : (
                             <span className="text-gray-500 text-xs">Image</span>
                           )}
                         </div>
                         <div className="ml-4">
-                        <CardTitle className="text-2xl font-bold">{app.name}</CardTitle>
+                          <CardTitle className="text-2xl font-bold">
+                            {app.name}
+                          </CardTitle>
                           <CardDescription className="text-md">
-                          {app.description}<br />
+                            {app.description}
-                          Server: {app.server || 'No server'}
+                            <br />
+                            Server: {app.server || "No server"}
                           </CardDescription>
                         </div>
                       </div>
@@ -305,7 +415,9 @@ export default function Dashboard() {
                             <Button
                               variant="outline"
                               className="gap-2 w-full"
-                            onClick={() => window.open(app.publicURL, "_blank")}
+                              onClick={() =>
+                                window.open(app.publicURL, "_blank")
+                              }
                             >
                               <Link className="h-4 w-4" />
                               Open Public URL
@@ -314,7 +426,9 @@ export default function Dashboard() {
                               <Button
                                 variant="outline"
                                 className="gap-2 w-full"
-                              onClick={() => window.open(app.localURL, "_blank")}
+                                onClick={() =>
+                                  window.open(app.localURL, "_blank")
+                                }
                               >
                                 <Home className="h-4 w-4" />
                                 Open Local URL
@@ -329,6 +443,132 @@ export default function Dashboard() {
                           >
                             <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
+                                  }
+                                >
+                                  Save Changes
+                                </AlertDialogAction>
+                              </AlertDialogFooter>
+                            </AlertDialogContent>
+                          </AlertDialog>
                         </div>
                       </div>
                     </div>
@@ -336,23 +576,34 @@ 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>
                   </defs>
                 </svg>
-                <span className='sr-only'>Loading...</span>
+                <span className="sr-only">Loading...</span>
               </div>
             </div>
-          }
+          )}
           <div className="pt-4">
             <Pagination>
               <PaginationContent>
@@ -379,5 +630,5 @@ export default function Dashboard() {
         </div>
       </SidebarInset>
     </SidebarProvider>
-  )
+  );
 }