Fixed app structure

src/app/applications/page.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { MoreVertical, Plus, Rocket } from "lucide-react";
+import InstallApplicationDialog from "@/components/dialogs/InstallApplication";
+import { getApplications, removeApp } from "@/lib/dockship/application";
+import RemoveDialog from "@/components/dialogs/Remove";
+import DeployAppDialog from "@/components/dialogs/DeployApp";
+import { useAsyncInterval } from "@/hooks/use-async";
+
+export default function ApplicationsPage() {
+  const { value: applications, setValue: setApplications } = useAsyncInterval(
+    [],
+    getApplications,
+    3000
+  );
+
+  const remove = async (appId: string) => {
+    await removeApp(appId);
+    setApplications((prev) => prev.filter((app) => app.id !== appId));
+  };
+
+  return (
+    <DashboardLayout
+      title="Applications"
+      subtitle="Manage installed applications"
+    >
+      {/* Header */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div className="flex flex-wrap items-center gap-2">
+          <Badge>{applications.length} apps</Badge>
+        </div>
+        <InstallApplicationDialog>
+          <Button size="sm" className="gap-2 w-full sm:w-auto">
+            <Plus className="w-4 h-4" /> Install Application
+          </Button>
+        </InstallApplicationDialog>
+      </div>
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {applications.map((app) => (
+          <Card key={app.id}>
+            <CardHeader>
+              <CardTitle>{app.name}</CardTitle>
+              <CardDescription>{app.repo}</CardDescription>
+            </CardHeader>
+
+            <CardContent className="flex flex-col gap-2">
+              {/* Deployments */}
+              <div className="flex justify-between items-center">
+                <span className="text-xs text-muted-foreground">
+                  Deployments
+                </span>
+                <span className="font-mono text-sm">
+                  {app.deployments?.length ?? 0}
+                </span>
+              </div>
+            </CardContent>
+
+            <CardFooter className="justify-end">
+              <DeployAppDialog defaultApp={app.id}>
+                <Button variant="ghost" size="icon-sm" aria-label="Deploy">
+                  <Rocket className="w-3 h-3" />
+                </Button>
+              </DeployAppDialog>
+
+              <RemoveDialog remove={() => remove(app.id)} />
+
+              <Button variant="ghost" size="icon-sm" aria-label="More options">
+                <MoreVertical className="w-3 h-3" />
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+    </DashboardLayout>
+  );
+}

src/lib/dockship/application.ts

@@ -4,6 +4,7 @@ import { verifySession } from "../../core/auth/session";
 import { getNodes } from "@/lib/dockship/node";
 import axios from "axios";
 import { Env, EnvVariable, Application } from "@/lib/types";
+import { read, write } from "@/app/api/file";
 
 export async function installApp(name: string, repo: string, nodeId: string) {
   if (await verifySession()) {
@@ -26,63 +27,53 @@ export async function installApp(name: string, repo: string, nodeId: string) {
 }
 
 export async function getApplications(): Promise<Application[]> {
-  const nodes = await getNodes();
+  if (await verifySession()) {
+    throw new Error("Unauthorized");
+  }
 
-  return (
-    await Promise.all(
-      nodes.map(
-        async (n) =>
-          await (
-            await axios.get(`http://${n.ip}:3000/api/applications`, {
-              headers: { Authorization: `ApiKey ${n.key}` },
-            })
-          ).data.applications
-      )
-    )
-  ).flat();
+  return read(() => [], "data", "apps.json");
 }
 
 export async function getEnv(): Promise<Record<string, Env>> {
-  const nodes = await getNodes();
+  const apps = await getApplications();
 
-  const envRecords = await Promise.all(
-    nodes.map(async (n) => {
-      const response = await axios.get(`http://${n.ip}:3000/api/env`, {
-        headers: { Authorization: `ApiKey ${n.key}` },
-      });
-      return response.data as Record<string, Env>;
-    })
-  );
+  return apps.reduce<Record<string, Env>>((acc, app) => {
+    acc[app.id] = {
+      id: app.id,
+      name: app.name,
+      variables: app.env,
+    };
 
-  const merged: Record<string, Env> = Object.assign({}, ...envRecords);
-
-  return merged;
+    return acc;
+  }, {});
 }
 
 export async function setEnv(
   appId: string,
   variables: Record<string, EnvVariable>
 ) {
-  const nodes = await getNodes();
+  if (await verifySession()) {
+    throw new Error("Unauthorized");
+  }
 
-  nodes.forEach(async (n) => {
-    await axios.post(
-      `http://${n.ip}:3000/api/env`,
-      { appId, variables },
-      {
-        headers: { Authorization: `ApiKey ${n.key}` },
-      }
-    );
-  });
+  const apps = await getApplications();
+  const app = apps.find((app) => app.id === appId);
+  if (!app) throw new Error("App not found");
+  editApp(appId, { ...app, env: variables });
 }
 
 export async function removeApp(appId: string) {
-  const nodes = await getNodes();
+  const apps = await getApplications();
 
-  nodes.forEach(async (n) => {
-    await axios.delete(`http://${n.ip}:3000/api/applications`, {
-      params: { appId },
-      headers: { Authorization: `ApiKey ${n.key}` },
-    });
-  });
+  const nextApps = apps.filter((app) => app.id !== appId);
+
+  await write(nextApps, "data", "apps.json");
+}
+
+export async function editApp(appId: string, updatedApp: Application) {
+  const apps = await getApplications();
+
+  const nextApps = apps.map((app) => (app.id === appId ? updatedApp : app));
+
+  await write(nextApps, "data", "apps.json");
 }

src/lib/types.ts

@@ -55,6 +55,7 @@ export interface Application {
   nodeId: string;
   createdAt: string;
   deployments: string[];
+  env: Record<string, EnvVariable>;
 }
 
 export interface Deployment {