openship 0.1.0 → 0.1.1

package/apps/dashboard/src/app/(dashboard)/deployments/components/DeploymentHeader.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import React from "react";
+import { Rocket, CheckCircle2, XCircle, Loader2 } from "lucide-react";
+
+interface DeploymentHeaderProps {
+  stats: {
+    total: number;
+    success: number;
+    failed: number;
+    building: number;
+    pending?: number;
+    canceled?: number;
+  };
+  projectCount?: number;
+}
+
+export const DeploymentHeader: React.FC<DeploymentHeaderProps> = ({ stats, projectCount }) => {
+  const failureCount = (stats.failed || 0) + (stats.canceled || 0);
+  const successRate = stats.total > 0 ? Math.round((stats.success / stats.total) * 100) : 0;
+  const activeCount = (stats.building || 0) + (stats.pending || 0);
+
+  return (
+    <div className="bg-card rounded-2xl border border-border/50 p-5">
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        {/* Total */}
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
+            <Rocket className="size-4 text-primary" />
+          </div>
+          <div>
+            <span className="text-sm text-muted-foreground">Total</span>
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-lg font-semibold text-foreground">{stats.total}</span>
+              {projectCount !== undefined && (
+                <span className="text-[10px] text-muted-foreground">
+                  {projectCount} project{projectCount !== 1 ? "s" : ""}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Success */}
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center shrink-0">
+            <CheckCircle2 className="size-4 text-emerald-500" />
+          </div>
+          <div>
+            <span className="text-sm text-muted-foreground">Success</span>
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-lg font-semibold text-foreground">{stats.success}</span>
+              <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+                {successRate}%
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Failed */}
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-red-500/10 flex items-center justify-center shrink-0">
+            <XCircle className="size-4 text-red-500" />
+          </div>
+          <div>
+            <span className="text-sm text-muted-foreground">Failed</span>
+            <p className="text-lg font-semibold text-foreground">{failureCount}</p>
+          </div>
+        </div>
+
+        {/* In Progress */}
+        <div className="flex items-center gap-3">
+          <div className="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center shrink-0">
+            <Loader2 className={`size-4 text-amber-500${activeCount > 0 ? " animate-spin" : ""}`} />
+          </div>
+          <div>
+            <span className="text-sm text-muted-foreground">In Progress</span>
+            <div className="flex items-baseline gap-1.5">
+              <span className="text-lg font-semibold text-foreground">{activeCount}</span>
+              {activeCount > 0 && (
+                <span className="text-[10px] text-muted-foreground">building now</span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/apps/dashboard/src/app/(dashboard)/deployments/components/DeploymentMenu.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { MoreVertical, ExternalLink, Copy, RotateCcw, XCircle, Trash2 } from "lucide-react";
+import { generateIcon } from "@/utils/icons";
+import { deployApi } from "@/lib/api";
+
+interface Deployment {
+  id: string;
+  status: string;
+  domain: string;
+  owner?: string;
+  repo?: string;
+  commit: {
+    hash: string;
+  };
+}
+
+interface DeploymentMenuProps {
+  deployment: Deployment;
+  triggerClassName?: string;
+  onStatusChange?: () => void;
+}
+
+export const DeploymentMenu: React.FC<DeploymentMenuProps> = ({
+  deployment,
+  triggerClassName,
+  onStatusChange,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const isActive = ["pending", "queued", "building", "deploying"].includes(deployment.status);
+
+  const handleCancel = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsOpen(false);
+    try {
+      await deployApi.cancel(deployment.id);
+      onStatusChange?.();
+    } catch {
+      /* silent */
+    }
+  };
+
+  const handleDelete = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsOpen(false);
+    try {
+      await deployApi.deleteDeployment(deployment.id);
+      onStatusChange?.();
+    } catch {
+      /* silent */
+    }
+  };
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsOpen(!isOpen);
+        }}
+        className={triggerClassName || "w-8 h-8 rounded-lg flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"}
+      >
+        <MoreVertical className="w-4 h-4" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 top-10 w-56 bg-popover rounded-xl shadow-lg border border-border/50 py-2 z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+          {deployment.domain && (
+            <button
+              onClick={() => {
+                window.open(`https://${deployment.domain}`, "_blank");
+                setIsOpen(false);
+              }}
+              className="w-full px-4 py-2.5 text-left text-sm text-foreground/70 hover:bg-muted transition-colors flex items-center gap-3"
+            >
+              <ExternalLink className="w-4 h-4" />
+              Open Deployment
+            </button>
+          )}
+
+          {deployment.owner && deployment.repo && (
+            <button
+              onClick={() => {
+                window.open(`https://github.com/${deployment.owner}/${deployment.repo}`, "_blank");
+                setIsOpen(false);
+              }}
+              className="w-full px-4 py-2.5 text-left text-sm text-foreground/70 hover:bg-muted transition-colors flex items-center gap-3"
+            >
+              {generateIcon('https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg', 16, 'currentColor', {}, true)}
+              View Repository
+            </button>
+          )}
+
+          <div className="h-px bg-border/50 my-2" />
+
+          {deployment.domain && (
+            <button
+              onClick={() => {
+                navigator.clipboard.writeText(`https://${deployment.domain}`);
+                setIsOpen(false);
+              }}
+              className="w-full px-4 py-2.5 text-left text-sm text-foreground/70 hover:bg-muted transition-colors flex items-center gap-3"
+            >
+              <Copy className="w-4 h-4" />
+              Copy Domain URL
+            </button>
+          )}
+
+          <button
+            onClick={() => {
+              navigator.clipboard.writeText(deployment.id);
+              setIsOpen(false);
+            }}
+            className="w-full px-4 py-2.5 text-left text-sm text-foreground/70 hover:bg-muted transition-colors flex items-center gap-3"
+          >
+            <Copy className="w-4 h-4" />
+            Copy Build ID
+          </button>
+
+          {isActive && (
+            <>
+              <div className="h-px bg-border/50 my-2" />
+              <button
+                onClick={handleCancel}
+                className="w-full px-4 py-2.5 text-left text-sm text-red-500 hover:bg-red-500/10 transition-colors flex items-center gap-3"
+              >
+                <XCircle className="w-4 h-4" />
+                Cancel Deployment
+              </button>
+            </>
+          )}
+
+          {!isActive && deployment.status !== "building" && (
+            <>
+              <div className="h-px bg-border/50 my-2" />
+              <button
+                onClick={() => setIsOpen(false)}
+                className="w-full px-4 py-2.5 text-left text-sm text-foreground/70 hover:bg-muted transition-colors flex items-center gap-3"
+              >
+                <RotateCcw className="w-4 h-4" />
+                Redeploy
+              </button>
+            </>
+          )}
+
+          {!isActive && (
+            <>
+              <div className="h-px bg-border/50 my-2" />
+              <button
+                onClick={handleDelete}
+                className="w-full px-4 py-2.5 text-left text-sm text-red-500 hover:bg-red-500/10 transition-colors flex items-center gap-3"
+              >
+                <Trash2 className="w-4 h-4" />
+                Delete Deployment
+              </button>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+

package/apps/dashboard/src/app/(dashboard)/deployments/components/DeploymentsContent.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import Link from "next/link";
+import {
+  Rocket,
+  Activity,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  Clock,
+  Zap,
+  ArrowRight,
+} from "lucide-react";
+import { deployApi, projectsApi } from "@/lib/api";
+import { DeploymentsFilters } from "./DeploymentsFilters";
+import { DeploymentsList } from "./DeploymentsList";
+import { LoadingSkeleton } from "./LoadingSkeleton";
+import type { Deployment, Project } from "../types";
+import {
+  calculateDeploymentStats,
+  filterDeployments,
+  sortDeploymentsByDate,
+  mapRowToDeployment,
+  formatDistanceToNow,
+} from "../utils";
+
+interface DeploymentsContentProps {
+  /** When set, scope to this project and hide the project selector */
+  projectId?: string;
+  projectName?: string;
+}
+
+export const DeploymentsContent: React.FC<DeploymentsContentProps> = ({
+  projectId,
+  projectName,
+}) => {
+  const isProject = !!projectId;
+
+  const [deployments, setDeployments] = useState<Deployment[]>([]);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [filter, setFilter] = useState<
+    "all" | "success" | "failed" | "building" | "pending" | "canceled"
+  >("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedProjectId, setSelectedProjectId] = useState<string | "all">(
+    "all"
+  );
+
+  const fetchDeployments = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      if (isProject && projectId) {
+        const res = await projectsApi.getDeployments(projectId);
+        const rows: any[] = res.data ?? res.deployments ?? [];
+        const mapped = rows.map((r: any) =>
+          mapRowToDeployment({
+            ...r,
+            projectId,
+            projectName: projectName ?? r.projectName,
+          })
+        );
+        setDeployments(sortDeploymentsByDate(mapped));
+        setProjects([]);
+      } else {
+        const res = await deployApi.getAll({ perPage: 100 });
+        const rows: any[] = res.data ?? [];
+        const mapped = rows.map(mapRowToDeployment);
+        setDeployments(sortDeploymentsByDate(mapped));
+
+        const projectMap = new Map<string, Project>();
+        for (const d of mapped) {
+          if (d.projectId && d.projectName) {
+            projectMap.set(d.projectId, {
+              id: d.projectId,
+              name: d.projectName,
+            });
+          }
+        }
+        setProjects([...projectMap.values()]);
+      }
+    } catch {
+      /* silent */
+    } finally {
+      setIsLoading(false);
+    }
+  }, [isProject, projectId, projectName]);
+
+  useEffect(() => {
+    fetchDeployments();
+  }, [fetchDeployments]);
+
+  const filteredDeployments = useMemo(
+    () =>
+      filterDeployments(deployments, {
+        status: filter,
+        searchQuery,
+        projectId: selectedProjectId,
+      }),
+    [deployments, filter, searchQuery, selectedProjectId]
+  );
+
+  const stats = useMemo(
+    () => calculateDeploymentStats(deployments),
+    [deployments]
+  );
+
+  const activeCount = (stats.building || 0) + (stats.pending || 0);
+  const recentDeployments = deployments.slice(0, 4);
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="mb-6">
+        <div className="flex items-center gap-3 mb-1">
+          <div className="w-9 h-9 bg-primary/10 rounded-xl flex items-center justify-center">
+            <Rocket className="size-[18px] text-primary" />
+          </div>
+          <div>
+            <h1 className="text-xl font-semibold text-foreground" style={{ letterSpacing: "-0.2px" }}>
+              Deployments
+            </h1>
+            <p className="text-xs text-muted-foreground">
+              {isLoading
+                ? "Loading..."
+                : isProject
+                  ? `${deployments.length} deployment${deployments.length !== 1 ? "s" : ""}`
+                  : `${deployments.length} total across ${projects.length} project${projects.length !== 1 ? "s" : ""}`}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-6">
+        {/* LEFT COLUMN */}
+        <div className="space-y-4 min-w-0">
+          {isLoading ? (
+            <LoadingSkeleton />
+          ) : (
+            <>
+              <DeploymentsFilters
+                isProject={isProject}
+                filter={filter}
+                searchQuery={searchQuery}
+                selectedProjectId={selectedProjectId}
+                projects={projects}
+                onFilterChange={setFilter}
+                onSearchChange={setSearchQuery}
+                onProjectChange={setSelectedProjectId}
+              />
+
+              <DeploymentsList
+                deployments={filteredDeployments}
+                hasFilters={
+                  filter !== "all" ||
+                  searchQuery !== "" ||
+                  selectedProjectId !== "all"
+                }
+                onStatusChange={fetchDeployments}
+              />
+            </>
+          )}
+        </div>
+
+        {/* RIGHT COLUMN (Sticky) */}
+        <div className="space-y-4 lg:sticky lg:top-6 lg:self-start">
+          {/* Activity Overview */}
+          <div className="bg-card rounded-2xl border border-border/50 p-5">
+            <div className="flex items-center gap-2 mb-4">
+              <Activity className="size-4 text-muted-foreground" />
+              <h3 className="font-semibold text-foreground text-sm">Overview</h3>
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
+                    <Rocket className="size-4 text-primary" />
+                  </div>
+                  <span className="text-sm text-muted-foreground">Total</span>
+                </div>
+                <span className="text-lg font-semibold text-foreground">
+                  {isLoading ? "–" : stats.total}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 rounded-lg bg-emerald-500/10 flex items-center justify-center">
+                    <CheckCircle2 className="size-4 text-emerald-500" />
+                  </div>
+                  <span className="text-sm text-muted-foreground">Successful</span>
+                </div>
+                <span className="text-lg font-semibold text-foreground">
+                  {isLoading ? "–" : stats.success}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <div className="w-8 h-8 rounded-lg bg-red-500/10 flex items-center justify-center">
+                    <XCircle className="size-4 text-red-500" />
+                  </div>
+                  <span className="text-sm text-muted-foreground">Failed</span>
+                </div>
+                <span className="text-lg font-semibold text-foreground">
+                  {isLoading ? "–" : (stats.failed || 0) + (stats.canceled || 0)}
+                </span>
+              </div>
+
+              {activeCount > 0 && (
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div className="w-8 h-8 rounded-lg bg-amber-500/10 flex items-center justify-center">
+                      <Loader2 className="size-4 text-amber-500 animate-spin" />
+                    </div>
+                    <span className="text-sm text-muted-foreground">In Progress</span>
+                  </div>
+                  <span className="text-lg font-semibold text-foreground">{activeCount}</span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Quick Tip */}
+          {deployments.length > 0 ? (
+            <div className="bg-gradient-to-br from-primary/5 via-primary/3 to-transparent rounded-2xl border border-primary/10 p-5">
+              <div className="flex items-center gap-2 mb-3">
+                <Zap className="size-4 text-primary" />
+                <h3 className="font-semibold text-foreground text-sm">Auto-Deploy</h3>
+              </div>
+              <p className="text-sm text-muted-foreground leading-relaxed">
+                Enable auto-deploy to trigger deployments automatically on every push to your main branch.
+              </p>
+              {!isProject && (
+                <Link
+                  href="/projects"
+                  className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary/80 mt-3 transition-colors"
+                >
+                  Go to project settings
+                  <ArrowRight className="size-3.5" />
+                </Link>
+              )}
+            </div>
+          ) : (
+            <div className="bg-gradient-to-br from-primary/5 via-primary/3 to-transparent rounded-2xl border border-primary/10 p-5">
+              <div className="flex items-center gap-2 mb-3">
+                <Zap className="size-4 text-primary" />
+                <h3 className="font-semibold text-foreground text-sm">Get Started</h3>
+              </div>
+              <p className="text-sm text-muted-foreground leading-relaxed">
+                Import a Git repository or use a template to create your first deployment.
+              </p>
+              <Link
+                href="/library"
+                className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:text-primary/80 mt-3 transition-colors"
+              >
+                Deploy a project
+                <ArrowRight className="size-3.5" />
+              </Link>
+            </div>
+          )}
+
+          {/* Recent Deployments */}
+          <div className="bg-card rounded-2xl border border-border/50 p-5">
+            <div className="flex items-center gap-2 mb-4">
+              <Clock className="size-4 text-muted-foreground" />
+              <h3 className="font-semibold text-foreground text-sm">Recent</h3>
+            </div>
+
+            {isLoading ? (
+              <div className="space-y-3">
+                {[...Array(3)].map((_, i) => (
+                  <div key={i} className="flex items-center gap-3 animate-pulse">
+                    <div className="w-2 h-2 rounded-full bg-muted" />
+                    <div className="flex-1 h-4 bg-muted rounded" />
+                  </div>
+                ))}
+              </div>
+            ) : recentDeployments.length === 0 ? (
+              <div className="text-center py-4">
+                <div className="w-10 h-10 rounded-xl bg-muted/50 flex items-center justify-center mx-auto mb-3">
+                  <Clock className="size-4 text-muted-foreground/50" />
+                </div>
+                <p className="text-xs text-muted-foreground/70">
+                  Your deployments will appear here
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-2.5">
+                {recentDeployments.map((d) => (
+                  <Link
+                    key={d.id}
+                    href={`/build/${d.id}`}
+                    className="flex items-center gap-3 group"
+                  >
+                    <span
+                      className={`w-2 h-2 rounded-full shrink-0 ${
+                        d.status === "success" ? "bg-emerald-500" :
+                        d.status === "failed" ? "bg-red-500" :
+                        d.status === "building" ? "bg-amber-500" :
+                        "bg-muted-foreground/40"
+                      }`}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm text-foreground truncate group-hover:text-primary transition-colors">
+                        {d.projectName || "Unknown"}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {formatDistanceToNow(new Date(d.createdAt))}
+                      </p>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/apps/dashboard/src/app/(dashboard)/deployments/components/DeploymentsFilters.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { Search } from "lucide-react";
+import { ProjectFilter } from "./ProjectFilter";
+import type { Project } from "../types";
+
+interface DeploymentsFiltersProps {
+  filter: "all" | "success" | "failed" | "building" | "pending" | "canceled";
+  searchQuery: string;
+  selectedProjectId: string | "all";
+  projects: Project[];
+  onFilterChange: (filter: "all" | "success" | "failed" | "building" | "pending" | "canceled") => void;
+  onSearchChange: (query: string) => void;
+  onProjectChange: (projectId: string | "all") => void;
+  isProject: boolean;
+}
+
+const FILTERS = [
+  { value: "all", label: "All" },
+  { value: "success", label: "Success" },
+  { value: "failed", label: "Failed" },
+  { value: "building", label: "Building" },
+  { value: "canceled", label: "Canceled" },
+] as const;
+
+export const DeploymentsFilters: React.FC<DeploymentsFiltersProps> = React.memo(({
+  filter,
+  searchQuery,
+  selectedProjectId,
+  projects,
+  onFilterChange,
+  onSearchChange,
+  onProjectChange,
+  isProject,
+}) => {
+  const [localSearchQuery, setLocalSearchQuery] = useState(searchQuery);
+  const debounceTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    setLocalSearchQuery(searchQuery);
+  }, [searchQuery]);
+
+  const handleSearchChange = (value: string) => {
+    setLocalSearchQuery(value);
+    if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+    debounceTimeout.current = setTimeout(() => onSearchChange(value), 300);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimeout.current) clearTimeout(debounceTimeout.current);
+    };
+  }, []);
+
+  return (
+    <div className="bg-card rounded-2xl border border-border/50 px-4 py-3 space-y-3">
+      {/* Row 1: Search + Project filter */}
+      <div className="flex items-center gap-3">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder="Search deployments..."
+            value={localSearchQuery}
+            onChange={(e) => handleSearchChange(e.target.value)}
+            className="w-full pl-9 pr-3 py-2 bg-background border border-border rounded-lg text-sm text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-ring transition-colors"
+          />
+        </div>
+        {!isProject && (
+          <ProjectFilter
+            projects={projects}
+            selectedProjectId={selectedProjectId}
+            onProjectChange={onProjectChange}
+          />
+        )}
+      </div>
+
+      {/* Row 2: Status filters */}
+      <div className="flex items-center gap-2 flex-wrap">
+        {FILTERS.map((f) => (
+          <button
+            key={f.value}
+            onClick={() => onFilterChange(f.value)}
+            className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
+              filter === f.value
+                ? "bg-foreground text-background"
+                : "text-muted-foreground hover:text-foreground hover:bg-muted/60"
+            }`}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+});
+
+DeploymentsFilters.displayName = "DeploymentsFilters";