openship 0.1.0 → 0.1.1

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

@@ -1,8 +1,330 @@
-export default function ProjectsPage() {
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import Link from "next/link";
+import { Project } from "@/constants/mock";
+import ProjectCard from "./components/ProjectCard";
+import EmptyState from "@/components/overview/EmptyState";
+import ActivityChart from "@/components/overview/ActivityChart";
+import { projectsApi } from "@/lib/api";
+import { generateIcon } from "@/utils/icons";
+import { useRouter } from "next/navigation";
+import { SlidingToggle } from "@/components/ui/SlidingToggle";
+import { Grid3x3, List } from "lucide-react";
+import { SectionContainer } from "@/components/ui/SectionContainer";
+import { useI18n } from "@/components/i18n-provider";
+
+export default function DeploymentDashboard() {
+  const { t } = useI18n();
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [pinnedProjects, setPinnedProjects] = useState<string[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isLoadingProjects, setIsLoadingProjects] = useState(true);
+  const [viewMode, setViewMode] = useState<"grid" | "list">("list");
+  const [numbers, setNumbers] = useState<any>({});
+  const router = useRouter();
+  const isLoadingRef = useRef<boolean>(false);
+  // Fetch projects from API
+  
+  useEffect(() => {
+    const fetchProjects = async () => {
+      try {
+        if(isLoadingRef.current) return;
+        isLoadingRef.current = true;
+        setIsLoadingProjects(true);
+        const response = await projectsApi.getHome();
+
+        setNumbers(response.numbers || {});
+
+        if (response.success && Array.isArray(response.projects)) {
+          // Map API response to Project interface
+          const mappedProjects: Project[] = response.projects.map((project: any, index: number) => {
+            const hasRepo = project.gitOwner && project.gitRepo;
+            const repoSlug = hasRepo ? `${project.gitOwner}/${project.gitRepo}` : '';
+
+            // Draft = never had a successful build (no activeDeploymentId)
+            const isDraft = !project.activeDeploymentId;
+            let status: Project["status"];
+            if (isDraft) {
+              status = "draft";
+            } else {
+              status = "live";
+            }
+
+            return {
+              id: project.id,
+              name: project.name || 'Unnamed Project',
+              description: project.commitMessage || project.description || `Production deployment`,
+              framework: project.framework || 'unknown',
+              url: project.activeDeploymentId ? `https://${project.slug}.opsh.io` : '',
+              status,
+              lastDeployed: project.updatedAt || project.createdAt,
+              domain: project.slug || '',
+              isCustomDomain: false,
+              deploymentCount: 1,
+              visitors: '0',
+              repo: repoSlug,
+              latestDeploymentId: project.latestDeploymentId || null,
+            };
+          });
+          setProjects(mappedProjects);
+        }
+      } catch (error) {
+        console.error('Error fetching projects:', error);
+      } finally {
+        setIsLoadingProjects(false);
+        isLoadingRef.current = false;
+      }
+    };
+
+    fetchProjects();
+
+    // Load pinned projects from localStorage
+    const stored = localStorage.getItem('pinnedProjects');
+    if (stored) {
+      setPinnedProjects(JSON.parse(stored));
+    }
+
+    return () => {
+      isLoadingRef.current = false;
+    };
+  }, []);
+
+  // Toggle pin project
+  const togglePin = (projectId: string) => {
+    setPinnedProjects(prev => {
+      const newPinned = prev.includes(projectId)
+        ? prev.filter(id => id !== projectId)
+        : [...prev, projectId];
+      localStorage.setItem('pinnedProjects', JSON.stringify(newPinned));
+      return newPinned;
+    });
+  };
+
+  const filteredProjects = projects.filter((project) =>
+    project.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    project.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    project.framework.toLowerCase().includes(searchQuery.toLowerCase())
+  ) || [];
+
+  const pinnedProjectsList = filteredProjects.filter(p => pinnedProjects.includes(p.id.toString()));
+  const unpinnedProjectsList = filteredProjects.filter(p => !pinnedProjects.includes(p.id.toString()));
+
+  const stats = [
+    {
+      icon: 'layers-363-1658238246.png',
+      label: t.dashboard.pages.projects.stats.totalProjects,
+      value: numbers.total_active_projects,
+      onClick: () => {
+        router.push('/deployments');
+      }
+    },
+    {
+      icon: 'check%20circle-68-1658234612.png',
+      label: t.dashboard.pages.projects.stats.liveNow,
+      value: numbers.total_active_projects,
+      onClick: () => {
+        router.push('/deployments');
+      }
+    },
+    {
+      icon: 'flash-109-1689918656.png',
+      label: t.dashboard.pages.projects.stats.avgPerDay,
+      value: (numbers.total_deployments / 7).toFixed(1),
+      onClick: () => {
+        router.push('/deployments');
+      }
+    },
+    {
+      icon: 'check%20circle-68-1658234612.png',
+      label: t.dashboard.pages.projects.stats.successRate,
+      value: `${numbers.total_success_deployments}/${numbers.total_deployments}`,
+      onClick: () => {
+        router.push('/deployments');
+      }
+    }
+  ]
+
   return (
-    <div>
-      <h1 className="text-2xl font-bold">Projects</h1>
-      <p className="mt-2 text-gray-600">Create and manage your deployment projects.</p>
+    <div className="min-h-screen bg-background pb-70">
+      <SectionContainer>
+        {/* Header */}
+        <div className="mb-6">
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div>
+              <h1 className="text-2xl font-medium text-foreground/80" style={{ letterSpacing: "-0.2px" }}>
+                {t.dashboard.pages.projects.title}
+              </h1>
+              <p className="text-sm text-muted-foreground/70 mt-1">
+                {t.dashboard.pages.projects.description}
+              </p>
+            </div>
+            <Link
+              href="/library"
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-primary text-primary-foreground text-sm font-medium transition-all hover:bg-primary/90 hover:shadow-lg hover:shadow-primary/25 hover:-translate-y-0.5 w-full sm:w-auto justify-center"
+            >
+              {generateIcon('story%20add-152-1658436130.png', 18, 'hsl(var(--primary-foreground))')}
+              <span>{t.dashboard.pages.projects.createButton}</span>
+            </Link>
+          </div>
+        </div>
+
+        {isLoadingProjects ? (
+          <div className="bg-card rounded-xl border border-border/50">
+            <div className="divide-y divide-border/50">
+              {[...Array(4)].map((_, i) => (
+                <div key={i} className="px-5 py-4 flex items-center gap-4 animate-pulse">
+                  <div className="w-10 h-10 bg-muted rounded-xl"></div>
+                  <div className="flex-1">
+                    <div className="h-4 bg-muted rounded-lg w-32 mb-2"></div>
+                    <div className="h-3 bg-muted/60 rounded-lg w-48"></div>
+                  </div>
+                  <div className="h-6 bg-muted/60 rounded-full w-16"></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : projects.length === 0 ? (
+          <EmptyState />
+        ) : (
+          <>
+            {/* Stats Overview - Stats Left, Chart Right */}
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 mb-6">
+              {/* Left - Quick Stats (4 columns) */}
+              <div className="lg:col-span-4">
+                <div className="bg-card rounded-xl border border-border/50 p-4 h-full flex flex-col justify-between gap-2">
+                  {stats.map((stat, index) => (
+                    <div
+                      key={index}
+                      onClick={() => stat.onClick}
+                      className="flex items-center justify-between py-2.5 px-3 rounded-lg bg-muted/40 hover:bg-muted/60 cursor-pointer transition-colors">
+                      <div className="flex items-center gap-2.5">
+                        <div className="w-8 h-8 rounded-lg bg-muted flex items-center justify-center">
+                          {generateIcon(stat.icon, 16, 'var(--th-text-muted)')}
+                        </div>
+                        <span className="text-xs text-muted-foreground font-medium">{stat.label}</span>
+                      </div>
+                      <p className="text-base font-semibold text-foreground">{stat.value}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Right - Activity Chart (8 columns) */}
+              <div className="lg:col-span-8">
+                <ActivityChart numbers={numbers} projects={projects} />
+              </div>
+            </div>
+
+            {/* Search Bar and View Toggle */}
+            <div className="bg-card rounded-xl border border-border/50 p-4 mb-6">
+              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
+                <div className="relative flex-1">
+                  <div className="absolute left-4 top-1/2 transform -translate-y-1/2 pointer-events-none">
+                    {generateIcon('search-123-1658435124.png', 18, 'var(--th-text-muted)')}
+                  </div>
+                  <input
+                    type="text"
+                    placeholder={t.dashboard.pages.projects.searchPlaceholder}
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="w-full pl-11 pr-4 py-2.5 bg-muted/40 border border-transparent rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/20 focus:bg-card transition-all text-foreground placeholder:text-muted-foreground"
+                  />
+                </div>
+
+                {/* View Toggle */}
+                <SlidingToggle
+                  options={[
+                    {
+                      value: 'list',
+                      icon: <List className="w-5 h-5" />,
+                    },
+                    {
+                      value: 'grid',
+                      icon: <Grid3x3 className="w-5 h-5" />,
+                    },
+                  ]}
+                  value={viewMode}
+                  onChange={(value) => setViewMode(value as "grid" | "list")}
+                  variant="rounded"
+                  selectedBg="bg-primary"
+                  selectedTextColor="text-primary-foreground"
+                  unselectedTextColor="text-muted-foreground"
+                  backgroundColor="bg-card"
+                  size="lg"
+                />
+              </div>
+            </div>
+
+            {/* Pinned Projects Section */}
+            {pinnedProjectsList.length > 0 && (
+              <div className="mb-6">
+                <div className="flex items-center gap-2 mb-3">
+                  {generateIcon('pin-210-1658433759.png', 16, 'var(--th-text-muted)')}
+                  <h2 className="text-sm font-medium text-foreground/80">
+                    {t.dashboard.pages.projects.pinnedProjects}
+                  </h2>
+                  <span className="text-xs text-muted-foreground">
+                    ({pinnedProjectsList.length})
+                  </span>
+                </div>
+                <div className={viewMode === "list" ? "space-y-4" : "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-5"}>
+                  {pinnedProjectsList.map((project) => (
+                    <ProjectCard
+                      key={project.id}
+                      project={project}
+                      viewMode={viewMode}
+                      isPinned={true}
+                      onTogglePin={() => togglePin(project.id.toString())}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* All Projects Section */}
+            {unpinnedProjectsList.length > 0 && (
+              <div>
+                {pinnedProjectsList.length > 0 && (
+                  <div className="flex items-center gap-2 mb-3">
+                    <h2 className="text-sm font-medium text-foreground/80">
+                      {t.dashboard.pages.projects.otherProjects}
+                    </h2>
+                    <span className="text-xs text-muted-foreground">
+                      ({unpinnedProjectsList.length})
+                    </span>
+                  </div>
+                )}
+                <div className={viewMode === "list" ? "space-y-4" : "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-5"}>
+                  {unpinnedProjectsList.map((project) => (
+                    <ProjectCard
+                      key={project.id}
+                      project={project}
+                      viewMode={viewMode}
+                      isPinned={false}
+                      onTogglePin={() => togglePin(project.id.toString())}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* No Results State */}
+            {filteredProjects.length === 0 && (
+              <div className="bg-card rounded-xl border border-border/50 py-16 text-center">
+                <div className="flex flex-col items-center">
+                  <div className="w-12 h-12 rounded-xl bg-muted flex items-center justify-center mb-4">
+                    {generateIcon('search-103-1658433844.png', 24, 'var(--th-text-muted)')}
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {t.dashboard.pages.projects.noResultsFound.replace('{query}', searchQuery)}
+                  </p>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </SectionContainer>
     </div>
   );
 }

package/apps/dashboard/src/app/(dashboard)/providers.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { GitHubProvider } from "@/context/GitHubContext";
+import { CloudProvider } from "@/context/CloudContext";
+
+interface DashboardProvidersProps {
+  children: React.ReactNode;
+  selfHosted: boolean;
+  deployMode: string;
+  authMode: "cloud" | "local" | "none";
+  cloudAuthUrl: string;
+  machineName?: string;
+}
+
+export function DashboardProviders({ children, selfHosted, deployMode, authMode, cloudAuthUrl, machineName }: DashboardProvidersProps) {
+  return (
+    <GitHubProvider initialSelfHosted={selfHosted} initialDeployMode={deployMode} initialAuthMode={authMode} initialCloudAuthUrl={cloudAuthUrl} initialMachineName={machineName}>
+      <CloudProvider>
+        {children}
+      </CloudProvider>
+    </GitHubProvider>
+  );
+}

package/apps/dashboard/src/app/(dashboard)/servers/[serverId]/_components/components-tab.tsx

@@ -0,0 +1,329 @@
+import {
+  Shield,
+  CheckCircle2,
+  XCircle,
+  Loader2,
+  Download,
+  RotateCcw,
+  ChevronDown,
+} from "lucide-react";
+import { useState, useRef, useEffect } from "react";
+import type {
+  ComponentStatus,
+  SetupComponentProgress,
+  SetupLogEvent,
+} from "@/lib/api/system";
+
+function HealthRow({ component }: { component: ComponentStatus }) {
+  return (
+    <div className="flex items-center gap-3 py-2.5 px-3 rounded-lg hover:bg-muted/30 transition-colors">
+      <div className="shrink-0">
+        {component.healthy ? (
+          <CheckCircle2 className="size-5 text-emerald-500" />
+        ) : (
+          <XCircle className="size-5 text-orange-500" />
+        )}
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <p className="text-sm font-medium text-foreground">
+            {component.label || component.name}
+          </p>
+          {component.version && (
+            <span className="text-xs text-muted-foreground bg-muted/50 px-1.5 py-0.5 rounded">
+              v{component.version}
+            </span>
+          )}
+        </div>
+        <p className="text-xs text-muted-foreground mt-0.5">
+          {component.message}
+        </p>
+      </div>
+      <div
+        className={`text-xs font-medium px-2.5 py-1 rounded-full ${
+          component.healthy
+            ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+            : "bg-orange-500/10 text-orange-600 dark:text-orange-400"
+        }`}
+      >
+        {component.healthy ? "Healthy" : "Unhealthy"}
+      </div>
+    </div>
+  );
+}
+
+export function ComponentsTab({
+  components,
+  checking,
+  checkError,
+  onRecheck,
+  onInstallMissing,
+  installing,
+  installDone,
+  installFinalStatus,
+  installComponents: streamComponents,
+  installLogs,
+  onDismissInstall,
+}: {
+  components: ComponentStatus[];
+  checking: boolean;
+  checkError: string | null;
+  onRecheck: () => void;
+  onInstallMissing: () => void;
+  installing: boolean;
+  installDone: boolean;
+  installFinalStatus: "completed" | "failed" | null;
+  installComponents: SetupComponentProgress[];
+  installLogs: SetupLogEvent[];
+  onDismissInstall: () => void;
+}) {
+  const [logsExpanded, setLogsExpanded] = useState(false);
+  const logEndRef = useRef<HTMLDivElement>(null);
+
+  const missingInstallableCount = components.filter(
+    (c) => !c.healthy && c.installable,
+  ).length;
+
+  useEffect(() => {
+    if (logsExpanded && logEndRef.current) {
+      logEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [installLogs.length, logsExpanded]);
+
+  return (
+    <div className="space-y-6">
+      {/* Health checks card */}
+      <div className="bg-card rounded-2xl border border-border/50">
+        <div className="flex items-center gap-3 px-5 py-4 border-b border-border/50">
+          <div className="w-9 h-9 bg-emerald-500/10 rounded-xl flex items-center justify-center">
+            <Shield className="size-[18px] text-emerald-500" />
+          </div>
+          <div className="flex-1">
+            <h2 className="font-semibold text-foreground text-[15px]">
+              System Health
+            </h2>
+            <p className="text-xs text-muted-foreground">
+              Required components &amp; services
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={onInstallMissing}
+              disabled={checking || installing || missingInstallableCount === 0}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg hover:bg-muted transition-colors text-muted-foreground disabled:opacity-50"
+            >
+              {installing ? (
+                <Loader2 className="size-3.5 animate-spin" />
+              ) : (
+                <Download className="size-3.5" />
+              )}
+              {installing
+                ? "Installing\u2026"
+                : missingInstallableCount > 0
+                  ? `Install Missing (${missingInstallableCount})`
+                  : "All installed"}
+            </button>
+            <button
+              onClick={onRecheck}
+              disabled={checking || installing}
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg hover:bg-muted transition-colors text-muted-foreground disabled:opacity-50"
+            >
+              {checking ? (
+                <Loader2 className="size-3.5 animate-spin" />
+              ) : (
+                <RotateCcw className="size-3.5" />
+              )}
+              {checking ? "Checking\u2026" : "Re-check"}
+            </button>
+          </div>
+        </div>
+
+        <div className="p-5 space-y-0.5">
+          {checkError && (
+            <div className="rounded-lg border border-red-500/20 bg-red-500/5 p-3 mb-3">
+              <p className="text-xs text-red-600 dark:text-red-400">
+                {checkError}
+              </p>
+            </div>
+          )}
+
+          {checking && components.length === 0 ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="flex flex-col items-center gap-2">
+                <Loader2 className="size-5 animate-spin text-muted-foreground" />
+                <p className="text-xs text-muted-foreground">
+                  Running health checks\u2026
+                </p>
+              </div>
+            </div>
+          ) : components.length > 0 ? (
+            components.map((comp) => (
+              <HealthRow key={comp.name} component={comp} />
+            ))
+          ) : !checkError ? (
+            <p className="text-sm text-muted-foreground text-center py-8">
+              No health data yet
+            </p>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Install progress */}
+      {(streamComponents.length > 0 || installing) && (
+        <div className="bg-card rounded-2xl border border-border/50">
+          <div className="flex items-center gap-3 px-5 py-4 border-b border-border/50">
+            <div
+              className={`w-9 h-9 rounded-xl flex items-center justify-center ${
+                installDone
+                  ? installFinalStatus === "completed"
+                    ? "bg-emerald-500/10"
+                    : "bg-red-500/10"
+                  : "bg-primary/10"
+              }`}
+            >
+              {installDone ? (
+                installFinalStatus === "completed" ? (
+                  <CheckCircle2 className="size-[18px] text-emerald-500" />
+                ) : (
+                  <XCircle className="size-[18px] text-red-500" />
+                )
+              ) : (
+                <Download className="size-[18px] text-primary" />
+              )}
+            </div>
+            <div className="flex-1">
+              <h2 className="font-semibold text-foreground text-[15px]">
+                {installDone
+                  ? installFinalStatus === "completed"
+                    ? "Install Complete"
+                    : "Install Finished with Errors"
+                  : "Installing\u2026"}
+              </h2>
+              <p className="text-xs text-muted-foreground">
+                {streamComponents.filter((c) => c.status === "installed").length}
+                /{streamComponents.length} components
+              </p>
+            </div>
+            {installDone && (
+              <button
+                onClick={onDismissInstall}
+                className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+              >
+                Dismiss
+              </button>
+            )}
+          </div>
+
+          {/* Progress bar */}
+          {streamComponents.length > 0 && (
+            <div className="px-5 pt-4">
+              <div className="h-1.5 bg-muted rounded-full overflow-hidden">
+                <div
+                  className={`h-full rounded-full transition-all duration-500 ${
+                    installDone && installFinalStatus === "failed"
+                      ? "bg-red-500"
+                      : "bg-primary"
+                  }`}
+                  style={{
+                    width: `${
+                      (streamComponents.filter(
+                        (c) =>
+                          c.status === "installed" || c.status === "failed",
+                      ).length /
+                        streamComponents.length) *
+                      100
+                    }%`,
+                  }}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Component rows */}
+          <div className="px-5 py-3 space-y-1">
+            {streamComponents.map((comp) => (
+              <div key={comp.name} className="flex items-center gap-2 py-1.5">
+                <div className="shrink-0">
+                  {comp.status === "installing" ? (
+                    <Loader2 className="size-3.5 text-primary animate-spin" />
+                  ) : comp.status === "installed" ? (
+                    <CheckCircle2 className="size-3.5 text-emerald-500" />
+                  ) : comp.status === "failed" ? (
+                    <XCircle className="size-3.5 text-red-500" />
+                  ) : (
+                    <div className="size-3.5 rounded-full border-2 border-border/50" />
+                  )}
+                </div>
+                <span className="text-sm font-medium text-foreground">
+                  {comp.label}
+                </span>
+                <span
+                  className={`ml-auto text-xs ${
+                    comp.status === "installing"
+                      ? "text-primary"
+                      : comp.status === "installed"
+                        ? "text-emerald-500"
+                        : comp.status === "failed"
+                          ? "text-red-500"
+                          : "text-muted-foreground"
+                  }`}
+                >
+                  {comp.status === "installing"
+                    ? "Installing\u2026"
+                    : comp.status === "installed"
+                      ? "Done"
+                      : comp.status === "failed"
+                        ? comp.error || "Failed"
+                        : "Waiting"}
+                </span>
+              </div>
+            ))}
+          </div>
+
+          {/* Expandable logs */}
+          {installLogs.length > 0 && (
+            <div className="border-t border-border/50">
+              <button
+                onClick={() => setLogsExpanded((v) => !v)}
+                className="flex items-center gap-2 w-full px-5 py-3 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <ChevronDown
+                  className={`size-3.5 transition-transform ${logsExpanded ? "rotate-180" : ""}`}
+                />
+                Install Logs ({installLogs.length})
+              </button>
+              {logsExpanded && (
+                <div className="max-h-[300px] overflow-y-auto px-4 pb-4 bg-muted/20 rounded-b-2xl">
+                  <div className="space-y-0.5">
+                    {installLogs.map((entry, i) => (
+                      <div
+                        key={i}
+                        className="flex gap-2 text-xs font-mono leading-5"
+                      >
+                        <span className="text-muted-foreground/50 shrink-0 select-none">
+                          {entry.component}
+                        </span>
+                        <span
+                          className={
+                            entry.level === "error"
+                              ? "text-red-500"
+                              : entry.level === "warn"
+                                ? "text-yellow-500"
+                                : "text-foreground/70"
+                          }
+                        >
+                          {entry.message}
+                        </span>
+                      </div>
+                    ))}
+                    <div ref={logEndRef} />
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}