openship 0.1.1 → 0.1.7

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

@@ -1,89 +0,0 @@
-"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

@@ -1,182 +0,0 @@
-"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

@@ -1,324 +0,0 @@
-"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

@@ -1,99 +0,0 @@
-"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";