openship 0.1.1 → 0.1.7

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

@@ -1,31 +0,0 @@
-"use client";
-
-import React from "react";
-import { DeploymentCard } from "./DeploymentCard";
-import { EmptyState } from "./EmptyState";
-import type { Deployment } from "../types";
-
-interface DeploymentsListProps {
-  deployments: Deployment[];
-  hasFilters: boolean;
-  onStatusChange?: () => void;
-}
-
-export const DeploymentsList: React.FC<DeploymentsListProps> = ({
-  deployments,
-  hasFilters,
-  onStatusChange,
-}) => {
-  if (deployments.length === 0) {
-    return <EmptyState hasFilters={hasFilters} />;
-  }
-
-  return (
-    <div className="bg-card rounded-2xl border border-border/50 divide-y divide-border/50">
-      {deployments.map((deployment, index) => (
-        <DeploymentCard key={deployment.id || index} deployment={deployment} onStatusChange={onStatusChange} />
-      ))}
-    </div>
-  );
-};
-

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

@@ -1,101 +0,0 @@
-"use client";
-
-import React from "react";
-import Link from "next/link";
-import { SearchX, Plus, GitBranch } from "lucide-react";
-
-interface EmptyStateProps {
-  hasFilters: boolean;
-}
-
-export const EmptyState: React.FC<EmptyStateProps> = ({ hasFilters }) => {
-  if (hasFilters) {
-    return (
-      <div className="bg-card rounded-2xl border border-border/50 p-16 text-center">
-        <div className="max-w-md mx-auto">
-          <div className="w-16 h-16 bg-muted/60 rounded-full flex items-center justify-center mx-auto mb-4 border border-border/50">
-            <SearchX className="w-7 h-7 text-muted-foreground/50" />
-          </div>
-          <h3 className="text-lg font-medium text-foreground/80 mb-2">No deployments found</h3>
-          <p className="text-sm text-muted-foreground leading-relaxed">
-            Try adjusting your filters or clearing your search.
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="bg-card rounded-2xl border border-border/50 px-6 pb-10 text-center">
-      {/* SVG Illustration — matches home page empty state */}
-      <div className="relative mx-auto w-64 h-44">
-        <svg className="absolute inset-0 w-full h-full" viewBox="0 0 260 180" fill="none">
-          {/* Background card stack */}
-          <rect x="75" y="45" width="130" height="95" rx="14" fill="var(--th-sf-04)" />
-          <rect x="65" y="35" width="130" height="95" rx="14" fill="var(--th-sf-03)" stroke="var(--th-bd-subtle)" strokeWidth="1" />
-          <rect x="55" y="25" width="130" height="95" rx="14" fill="var(--th-card-bg)" stroke="var(--th-bd-default)" strokeWidth="1" />
-
-          {/* Card header bar */}
-          <rect x="55" y="25" width="130" height="28" rx="14" fill="var(--th-sf-05)" />
-          <circle cx="72" cy="39" r="4" fill="#ef4444" fillOpacity="0.6" />
-          <circle cx="84" cy="39" r="4" fill="#eab308" fillOpacity="0.6" />
-          <circle cx="96" cy="39" r="4" fill="#22c55e" fillOpacity="0.6" />
-
-          {/* Content lines */}
-          <rect x="70" y="65" width="50" height="5" rx="2.5" fill="var(--th-on-12)" />
-          <rect x="70" y="76" width="85" height="4" rx="2" fill="var(--th-on-08)" />
-          <rect x="70" y="85" width="65" height="4" rx="2" fill="var(--th-on-08)" />
-
-          {/* Rocket icon in card */}
-          <circle cx="84" cy="108" r="10" fill="var(--th-on-05)" stroke="var(--th-on-10)" strokeWidth="1" />
-          <path d="M84 102l3 8h-6l3-8z" fill="var(--th-on-20)" />
-          <circle cx="84" cy="106" r="2" fill="var(--th-on-30)" />
-
-          {/* Plus button */}
-          <circle cx="210" cy="90" r="22" fill="var(--th-on-05)" />
-          <circle cx="210" cy="90" r="16" fill="var(--th-card-bg)" stroke="var(--th-on-20)" strokeWidth="2" strokeDasharray="4 3" />
-          <path d="M210 82v16M202 90h16" stroke="var(--th-on-40)" strokeWidth="2" strokeLinecap="round" />
-
-          {/* Decorative dots */}
-          <circle cx="30" cy="60" r="4" fill="var(--th-on-10)" />
-          <circle cx="40" cy="140" r="6" fill="var(--th-on-08)" />
-          <circle cx="230" cy="40" r="3" fill="var(--th-on-12)" />
-          <circle cx="245" cy="130" r="5" fill="var(--th-on-06)" />
-
-          {/* Sparkle accents */}
-          <path d="M25 100l2-4 2 4-4-2 4 0-4 2z" fill="var(--th-on-16)" />
-          <path d="M220 150l1.5-3 1.5 3-3-1.5 3 0-3 1.5z" fill="var(--th-on-12)" />
-
-          {/* Connecting line */}
-          <path d="M185 95 Q 192 92 195 90" stroke="var(--th-on-12)" strokeWidth="1.5" strokeDasharray="3 3" fill="none" />
-        </svg>
-      </div>
-
-      <h3 className="text-lg font-medium text-foreground/80 mb-2">
-        No deployments yet
-      </h3>
-      <p className="text-sm text-muted-foreground max-w-sm mx-auto mb-8 leading-relaxed">
-        Deploy your first project and it will appear here with
-        build status, commit details, and performance metrics.
-      </p>
-
-      <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
-        <Link
-          href="/library"
-          className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground text-sm font-medium rounded-xl hover:bg-primary/90 transition-all hover:shadow-lg hover:shadow-primary/25 hover:-translate-y-0.5"
-        >
-          <Plus className="size-4" />
-          Deploy Project
-        </Link>
-        <Link
-          href="/library"
-          className="inline-flex items-center gap-2 px-6 py-3 bg-muted/50 text-foreground text-sm font-medium rounded-xl hover:bg-muted transition-colors"
-        >
-          <GitBranch className="size-4" />
-          Browse Templates
-        </Link>
-      </div>
-    </div>
-  );
-};
-

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

@@ -1,57 +0,0 @@
-"use client";
-
-import React from "react";
-
-export const LoadingSkeleton = () => {
-  return (
-    <div className="space-y-4">
-      {/* Header Skeleton */}
-      <div className="bg-card rounded-2xl border border-border/50 p-5 animate-pulse">
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-          {[...Array(4)].map((_, i) => (
-            <div key={i} className="flex items-center gap-3">
-              <div className="w-8 h-8 bg-muted rounded-lg shrink-0" />
-              <div className="space-y-1.5">
-                <div className="h-3 bg-muted rounded w-14" />
-                <div className="h-5 bg-muted rounded w-8" />
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Filters Skeleton */}
-      <div className="bg-card rounded-2xl border border-border/50 px-4 py-3 animate-pulse">
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-2">
-            <div className="h-8 bg-muted rounded-lg w-16"></div>
-            <div className="h-8 bg-muted rounded-lg w-20"></div>
-            <div className="h-8 bg-muted rounded-lg w-18"></div>
-          </div>
-          <div className="h-9 bg-muted rounded-lg w-60"></div>
-        </div>
-      </div>
-
-      {/* Cards Skeleton */}
-      <div className="bg-card rounded-2xl border border-border/50 divide-y divide-border/50">
-        {[...Array(5)].map((_, i) => (
-          <div key={i} className="px-4 py-3.5 flex items-center gap-4 animate-pulse">
-            <div className="w-10 h-10 bg-muted rounded-xl shrink-0"></div>
-            <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2 mb-1.5">
-                <div className="h-4 bg-muted rounded w-32"></div>
-                <div className="h-5 bg-muted rounded-full w-16"></div>
-              </div>
-              <div className="flex items-center gap-2">
-                <div className="h-3 bg-muted rounded w-48"></div>
-                <div className="h-3 bg-muted rounded w-12"></div>
-              </div>
-            </div>
-            <div className="h-7 bg-muted rounded-lg w-20 shrink-0"></div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-

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

@@ -1,109 +0,0 @@
-"use client";
-
-import React, { useState, useRef, useEffect } from "react";
-import { ChevronDown, Layers, Check } from "lucide-react";
-import type { Project } from "../types";
-
-interface ProjectFilterProps {
-  projects: Project[];
-  selectedProjectId: string | "all";
-  onProjectChange: (projectId: string | "all") => void;
-}
-
-export const ProjectFilter: React.FC<ProjectFilterProps> = ({
-  projects,
-  selectedProjectId,
-  onProjectChange,
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const selectedProject = selectedProjectId === "all" 
-    ? { id: "all", name: "All Projects" }
-    : projects.find(p => p.id === selectedProjectId) || { id: "all", name: "All Projects" };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-
-  return (
-    <div className="relative" ref={dropdownRef}>
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 px-3 py-2 bg-muted/50 border border-border/50 rounded-lg text-sm font-medium text-foreground/70 hover:bg-muted hover:text-foreground transition-all min-w-[150px] justify-between"
-      >
-        <div className="flex items-center gap-2">
-          <Layers className="size-4 text-muted-foreground" />
-          <span className="truncate">{selectedProject.name}</span>
-        </div>
-        <ChevronDown 
-          className={`w-4 h-4 text-muted-foreground transition-transform ${isOpen ? 'rotate-180' : ''}`} 
-        />
-      </button>
-
-      {isOpen && (
-        <div className="absolute top-full left-0 mt-2 w-72 bg-popover border border-border/50 rounded-xl shadow-lg overflow-hidden z-50 max-h-96 overflow-y-auto">
-          {/* All Projects Option */}
-          <button
-            onClick={() => {
-              onProjectChange("all");
-              setIsOpen(false);
-            }}
-            className={`w-full px-4 py-3 text-left text-sm transition-colors flex items-center gap-3 ${
-              selectedProjectId === "all"
-                ? "bg-primary/10 text-primary font-semibold"
-                : "text-foreground/70 hover:bg-muted"
-            }`}
-          >
-            <div className="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
-              <Layers className="size-4 text-primary" />
-            </div>
-            <span>All Projects</span>
-            {selectedProjectId === "all" && (
-              <div className="ml-auto">
-                <Check className="size-4 text-primary" />
-              </div>
-            )}
-          </button>
-
-          {/* Divider */}
-          <div className="h-px bg-border/50 mx-2" />
-
-          {/* Individual Projects */}
-          {projects.map((project) => (
-            <button
-              key={project.id}
-              onClick={() => {
-                onProjectChange(project.id);
-                setIsOpen(false);
-              }}
-              className={`w-full px-4 py-3 text-left text-sm transition-colors flex items-center gap-3 ${
-                selectedProjectId === project.id
-                  ? "bg-primary/10 text-primary font-semibold"
-                  : "text-foreground/70 hover:bg-muted"
-              }`}
-            >
-              <div className="w-8 h-8 rounded-lg bg-muted border border-border/50 flex items-center justify-center flex-shrink-0">
-                <Layers className="size-4 text-muted-foreground" />
-              </div>
-              <span className="truncate flex-1">{project.name}</span>
-              {selectedProjectId === project.id && (
-                <div className="flex-shrink-0">
-                  <Check className="size-4 text-primary" />
-                </div>
-              )}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-

package/apps/dashboard/src/app/(dashboard)/deployments/components/index.ts

@@ -1,9 +0,0 @@
-export { DeploymentCard } from "./DeploymentCard";
-export { DeploymentsContent } from "./DeploymentsContent";
-export { DeploymentsFilters } from "./DeploymentsFilters";
-export { DeploymentsList } from "./DeploymentsList";
-export { ProjectFilter } from "./ProjectFilter";
-export { DeploymentHeader } from "./DeploymentHeader";
-export { EmptyState } from "./EmptyState";
-export { LoadingSkeleton } from "./LoadingSkeleton";
-export { DeploymentMenu } from "./DeploymentMenu";

package/apps/dashboard/src/app/(dashboard)/deployments/page.tsx

@@ -1,14 +0,0 @@
-"use client";
-
-import React from "react";
-import { DeploymentsContent } from "./components";
-
-export default function DeploymentsPage() {
-  return (
-    <div className="min-h-screen bg-background">
-      <div className="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <DeploymentsContent />
-      </div>
-    </div>
-  );
-}

package/apps/dashboard/src/app/(dashboard)/deployments/types.ts

@@ -1,44 +0,0 @@
-export interface Deployment {
-  id: string;
-  status: "success" | "failed" | "building" | "pending" | "canceled" | "cancelled";
-  domain: string;
-  framework: string;
-  commit: {
-    hash: string;
-    fullHash?: string | null;
-    message: string;
-    author: string;
-    timestamp: string;
-    url?: string | null;
-    changedFiles?: Array<{
-      name: string;
-      type: 'added' | 'modified' | 'removed';
-      language?: string;
-    }>;
-  };
-  buildTime: number | null;
-  createdAt: string;
-  type: string;
-  environment: string;
-  owner?: string;
-  repo?: string;
-  branch?: string;
-  projectId?: string;
-  projectName?: string;
-  failureReason?: string;
-}
-
-export interface Project {
-  id: string;
-  name: string;
-}
-
-export interface DeploymentStats {
-  total: number;
-  success: number;
-  failed: number;
-  building: number;
-  pending?: number;
-  canceled?: number;
-}
-

package/apps/dashboard/src/app/(dashboard)/deployments/utils.ts

@@ -1,176 +0,0 @@
-import type { Deployment } from "./types";
-
-export const mapRowToDeployment = (row: any): Deployment => {
-  const statusMap: Record<string, Deployment["status"]> = {
-    ready: "success",
-    queued: "pending",
-    deploying: "building",
-    cancelled: "canceled",
-  };
-  return {
-    id: row.id,
-    status: statusMap[row.status] ?? row.status,
-    domain: row.url ?? "",
-    framework: row.framework ?? "",
-    commit: {
-      hash: row.commitSha?.slice(0, 7) ?? "N/A",
-      fullHash: row.commitSha ?? null,
-      message: row.commitMessage ?? "Manual deployment",
-      author: row.meta?.gitOwner ?? "",
-      timestamp: row.createdAt,
-    },
-    buildTime: row.buildDurationMs ? Math.round(row.buildDurationMs / 1000) : null,
-    createdAt: row.createdAt,
-    type: "git",
-    environment: row.environment ?? "production",
-    owner: row.meta?.gitOwner,
-    repo: row.meta?.gitRepo,
-    branch: row.branch ?? undefined,
-    projectId: row.projectId,
-    projectName: row.projectName,
-    failureReason: row.errorMessage ?? undefined,
-  };
-};
-
-/**
- * Formats a date to a human-readable "time ago" string
- */
-export const formatDistanceToNow = (date: Date): string => {
-  const now = new Date();
-  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
-
-  if (diffInSeconds < 60) return `${diffInSeconds}s ago`;
-  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m ago`;
-  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
-  if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)}d ago`;
-  if (diffInSeconds < 31536000) return `${Math.floor(diffInSeconds / 2592000)}mo ago`;
-  return `${Math.floor(diffInSeconds / 31536000)}y ago`;
-};
-
-/**
- * Formats build time in seconds to a readable string
- */
-export const formatBuildTime = (seconds: number | null): string | null => {
-  if (!seconds) return null;
-  const mins = Math.floor(seconds / 60);
-  const secs = seconds % 60;
-  return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
-};
-
-/**
- * Gets the status configuration for a deployment
- */
-export const getStatusConfig = (status: string) => {
-  switch (status) {
-    case "success":
-      return {
-        icon: 'checkmark-72-1658234612.png',
-        color: "var(--color-emerald-500)",
-        bgColor: "bg-emerald-500/10",
-        borderColor: "border-emerald-500/20",
-        label: "Deployed",
-      };
-    case "failed":
-      return {
-        icon: 'close remove-802-1662363936.png',
-        color: "var(--color-red-500)",
-        bgColor: "bg-red-500/10",
-        borderColor: "border-red-500/20",
-        label: "Failed",
-      };
-    case "canceled":
-      return {
-        icon: 'close%20circle-73-1658234612.png',
-        color: "var(--color-gray-500)",
-        bgColor: "bg-muted/60",
-        borderColor: "border-border/50",
-        label: "Canceled",
-      };
-    case "building":
-      return {
-        icon: 'loading-51-1663582768.png',
-        color: "var(--color-blue-500)",
-        bgColor: "bg-blue-500/10",
-        borderColor: "border-blue-500/20",
-        label: "Building",
-      };
-    case "deploying":
-      return {
-        icon: 'loading-51-1663582768.png',
-        color: "var(--color-blue-500)",
-        bgColor: "bg-blue-500/10",
-        borderColor: "border-blue-500/20",
-        label: "Deploying",
-      };
-    case "cancelled":
-      return {
-        icon: 'close%20circle-73-1658234612.png',
-        color: "var(--color-gray-500)",
-        bgColor: "bg-muted/60",
-        borderColor: "border-border/50",
-        label: "Canceled",
-      };
-    default:
-      return {
-        icon: 'circle%20clock-39-1658435834.png',
-        color: "var(--color-amber-500)",
-        bgColor: "bg-amber-500/10",
-        borderColor: "border-amber-500/20",
-        label: "Pending",
-      };
-  }
-};
-
-/**
- * Sorts deployments by creation date (most recent first)
- */
-export const sortDeploymentsByDate = (deployments: Deployment[]): Deployment[] => {
-  return [...deployments].sort(
-    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
-  );
-};
-
-/**
- * Filters deployments based on multiple criteria
- */
-export const filterDeployments = (
-  deployments: Deployment[],
-  filters: {
-    status?: "all" | "success" | "failed" | "building" | "pending" | "canceled";
-    searchQuery?: string;
-    projectId?: string | "all";
-  }
-): Deployment[] => {
-  const { status = "all", searchQuery = "", projectId = "all" } = filters;
-
-  return deployments.filter((deployment) => {
-    // Handle both "canceled" and "cancelled" spellings
-    const deploymentStatus = deployment.status === 'cancelled' ? 'canceled' : deployment.status;
-    const matchesStatus = status === "all" || deploymentStatus === status;
-    const matchesSearch =
-      !searchQuery ||
-      deployment.commit.message.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      deployment.commit.hash.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      deployment.commit.author.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      deployment.projectName?.toLowerCase().includes(searchQuery.toLowerCase());
-    const matchesProject = projectId === "all" || deployment.projectId === projectId;
-
-    return matchesStatus && matchesSearch && matchesProject;
-  });
-};
-
-/**
- * Calculates deployment statistics
- */
-export const calculateDeploymentStats = (deployments: Deployment[]) => {
-  return {
-    total: deployments.length,
-    success: deployments.filter((d) => d.status === "success").length,
-    failed: deployments.filter((d) => d.status === "failed").length,
-    building: deployments.filter((d) => d.status === "building").length,
-    pending: deployments.filter((d) => d.status === "pending").length,
-    // Handle both "canceled" and "cancelled" spellings
-    canceled: deployments.filter((d) => d.status === "canceled" || d.status === "cancelled").length,
-  };
-};
-

package/apps/dashboard/src/app/(dashboard)/domains/page.tsx

@@ -1,3 +0,0 @@
-export default function DomainsPage() {
-  return <div />;
-}