Merge branch 'main' of https://github.com/Alexanderk30/quickclaw

Author: clawd

apps/web/src/app/dashboard/deployments/page.tsx

@@ -0,0 +1,129 @@
+import { Shell } from "@/components/Shell";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription, Button, Badge } from "ui";
+import Link from "next/link";
+
+// Mock data - would come from API
+const deployments = [
+  {
+    id: 1,
+    workflowName: "AI Executive Assistant",
+    status: "active",
+    lastRun: "2 minutes ago",
+    config: {
+      gmail: "user@example.com",
+      summaryTime: "09:00",
+    },
+  },
+  {
+    id: 2,
+    workflowName: "Discord Community Manager",
+    status: "paused",
+    lastRun: "3 hours ago",
+    config: {
+      server: "My Server",
+      channels: 5,
+    },
+  },
+];
+
+const statusColors: Record<string, "success" | "secondary" | "destructive"> = {
+  active: "success",
+  paused: "secondary",
+  failed: "destructive",
+};
+
+export default function DeploymentsPage() {
+  const hasDeployments = deployments.length > 0;
+
+  return (
+    <Shell>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="text-2xl font-semibold text-slate-900">My Deployments</h1>
+          <p className="text-slate-500 mt-1">
+            Manage your deployed AI workflows
+          </p>
+        </div>
+        <Link href="/workflows">
+          <Button variant="primary">Deploy New Workflow</Button>
+        </Link>
+      </div>
+
+      {/* Empty State */}
+      {!hasDeployments && (
+        <Card className="border-slate-100">
+          <CardContent className="pt-12 pb-12 text-center">
+            <div className="text-4xl mb-4">🚀</div>
+            <h3 className="text-lg font-medium text-slate-900 mb-2">
+              No deployments yet
+            </h3>
+            <p className="text-slate-500 mb-6 max-w-md mx-auto">
+              Deploy your first AI workflow in under 10 minutes and start automating your daily tasks.
+            </p>
+            <Link href="/workflows">
+              <Button variant="primary">Browse Workflows</Button>
+            </Link>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Deployments Grid */}
+      {hasDeployments && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {deployments.map((deployment) => (
+            <Card key={deployment.id} className="border-slate-100">
+              <CardHeader>
+                <div className="flex items-start justify-between">
+                  <div>
+                    <CardTitle>{deployment.workflowName}</CardTitle>
+                    <CardDescription>
+                      Last run: {deployment.lastRun}
+                    </CardDescription>
+                  </div>
+                  <Badge variant={statusColors[deployment.status]}>
+                    {deployment.status}
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2 mb-4">
+                  {Object.entries(deployment.config).map(([key, value]) => (
+                    <div key={key} className="text-sm">
+                      <span className="text-slate-500 capitalize">{key}: </span>
+                      <span className="text-slate-900">{value}</span>
+                    </div>
+                  ))}
+                </div>
+                
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex-1"
+                  >
+                    {deployment.status === "active" ? "Pause" : "Resume"}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex-1"
+                  >
+                    Reconfigure
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="text-red-600 hover:text-red-700 hover:border-red-200"
+                  >
+                    Delete
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </Shell>
+  );
+}