openship 0.1.0 → 0.1.1

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

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

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

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

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

@@ -0,0 +1,9 @@
+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,8 +1,14 @@
+"use client";
+
+import React from "react";
+import { DeploymentsContent } from "./components";
+
 export default function DeploymentsPage() {
   return (
-    <div>
-      <h1 className="text-2xl font-bold">Deployments</h1>
-      <p className="mt-2 text-gray-600">View and manage your deployment history.</p>
+    <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

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

@@ -0,0 +1,176 @@
+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,8 +1,3 @@
 export default function DomainsPage() {
-  return (
-    <div>
-      <h1 className="text-2xl font-bold">Domains</h1>
-      <p className="mt-2 text-gray-600">Manage custom domains and DNS records.</p>
-    </div>
-  );
+  return <div />;
 }