openship 0.1.0 → 0.1.1

package/apps/dashboard/src/app/(dashboard)/projects/[id]/[[...slug]]/page.tsx

@@ -0,0 +1,286 @@
+"use client";
+
+import React from "react";
+import {
+  MoreVertical,
+  HelpCircle,
+  MessageSquare,
+  Bug,
+  BookOpen,
+  ExternalLink,
+  Rocket,
+  ListTree,
+  Trash2,
+} from "lucide-react";
+
+import { GeneralSettings } from "../components/GeneralSettings";
+import { DomainSettings } from "../components/DomainSettings";
+import { GitSettings } from "../components/GitSettings";
+import { BuildSettings } from "../components/BuildSettings";
+import { LogsSettings } from "../components/LogsSettings";
+import { Deployments } from "../components/Deployments";
+import { AdvancedSettings } from "../components/AdvancedSettings";
+import { useProjectSettings } from "@/context/ProjectSettingsContext";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useToast } from "@/context/ToastContext";
+import { projectsApi } from "@/lib/api";
+import ErrorState from "@/components/shared/ErrorState";
+import { ProductionUrlSkeleton, ProjectIdentitySkeleton, ProjectInfoSkeleton, StatsCardsSkeleton, TopPathsSkeleton, TrafficChartSkeleton } from "../components/general";
+import { SectionContainer } from "@/components/ui/SectionContainer";
+import DropdownMenu, { type MenuAction } from "@/components/ui/DropdownMenu";
+import { encodeRepoSlug } from "@/utils/repoSlug";
+
+const ProjectSettingsContent = () => {
+  const { projectData, projectNotFound, errorType, activeTab, setActiveTab, tabs, isLoadingAnalytics } = useProjectSettings();
+
+  const { showToast } = useToast();
+  const router = useRouter();
+
+  const handleDeleteProject = async () => {
+    const response = await projectsApi.delete(projectData.id);
+    if (response.success) {
+      showToast('Project deleted successfully', 'success');
+      router.push('/');
+    } else {
+      showToast(response.message || response.error, 'error', 'Failed to delete project');
+    }
+  };
+
+  const helpMenuActions: MenuAction[] = [
+    {
+      id: 'support',
+      label: 'Contact Support',
+      icon: <HelpCircle className="w-4 h-4" />,
+      onClick: () => {
+        window.open('https://oblien.com/support', '_blank');
+      },
+    },
+    {
+      id: 'report-issue',
+      label: 'Report Issue',
+      icon: <Bug className="w-4 h-4" />,
+      onClick: () => {
+        window.open('https://github.com/oblien/deployments/issues/new', '_blank');
+      },
+    },
+    {
+      id: 'feedback',
+      label: 'Send Feedback',
+      icon: <MessageSquare className="w-4 h-4" />,
+      onClick: () => {
+        window.open('https://oblien.com/feedback', '_blank');
+      },
+    },
+    {
+      id: 'divider',
+      divider: true,
+    },
+    {
+      id: 'documentation',
+      label: 'Documentation',
+      icon: <BookOpen className="w-4 h-4" />,
+      onClick: () => {
+        window.open('https://oblien.com/docs', '_blank');
+      },
+    },
+    {
+      id: 'community',
+      label: 'Join Community',
+      icon: <ExternalLink className="w-4 h-4" />,
+      onClick: () => {
+        window.open('https://discord.gg/oblien', '_blank');
+      },
+    },
+  ];
+
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case "general":
+        return <GeneralSettings />;
+      case "domains":
+        return <DomainSettings />;
+      case "deployments":
+        return <Deployments />;
+      case "git":
+        return <GitSettings />;
+      case "settings":
+        return <BuildSettings />;
+      case "logs":
+        return <LogsSettings />;
+      case "advanced":
+        return <AdvancedSettings onDeleteProject={handleDeleteProject} />;
+      default:
+        return <GeneralSettings />;
+    }
+  };
+
+  if (projectNotFound) {
+    return <ErrorState type={errorType || 'project-not-found'} />;
+  }
+
+  const isDraft = !isLoadingAnalytics && !projectData.activeDeploymentId;
+
+  if (isDraft && (activeTab === "general" || activeTab === "error")) {
+    const deploySlug = projectData.gitOwner && projectData.gitRepo
+      ? encodeRepoSlug(projectData.gitOwner, projectData.gitRepo)
+      : null;
+
+    return (
+      <div className="min-h-screen bg-[#fafafa] pb-32">
+        <SectionContainer>
+          <div className="py-20 text-center">
+            {/* SVG Illustration */}
+            <div className="relative mx-auto w-72 h-48 mb-10">
+              <svg className="absolute inset-0 w-full h-full" viewBox="0 0 290 200" fill="none">
+                {/* Background card stack */}
+                <rect x="80" y="50" width="140" height="100" rx="14" fill="var(--th-sf-04)" />
+                <rect x="70" y="40" width="140" height="100" rx="14" fill="var(--th-sf-03)" stroke="var(--th-bd-subtle)" strokeWidth="1" />
+                <rect x="60" y="30" width="140" height="100" rx="14" fill="var(--th-card-bg)" stroke="var(--th-bd-default)" strokeWidth="1" />
+
+                {/* Card header bar */}
+                <rect x="60" y="30" width="140" height="28" rx="14" fill="var(--th-sf-05)" />
+                <circle cx="78" cy="44" r="4" fill="#ef4444" fillOpacity="0.6" />
+                <circle cx="90" cy="44" r="4" fill="#eab308" fillOpacity="0.6" />
+                <circle cx="102" cy="44" r="4" fill="#22c55e" fillOpacity="0.6" />
+
+                {/* Content placeholder lines */}
+                <rect x="76" y="70" width="55" height="5" rx="2.5" fill="var(--th-on-12)" />
+                <rect x="76" y="82" width="90" height="4" rx="2" fill="var(--th-on-08)" />
+                <rect x="76" y="92" width="70" height="4" rx="2" fill="var(--th-on-08)" />
+
+                {/* Rocket icon */}
+                <circle cx="230" cy="80" r="24" fill="var(--th-on-05)" />
+                <circle cx="230" cy="80" r="17" fill="var(--th-card-bg)" stroke="var(--th-on-20)" strokeWidth="2" strokeDasharray="4 3" />
+                <path d="M230 72v6m0 4v6" stroke="var(--th-on-30)" strokeWidth="2" strokeLinecap="round" />
+                <path d="M226 78l4-6 4 6" stroke="var(--th-on-30)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+
+                {/* Paused / waiting indicator - clock */}
+                <circle cx="110" cy="110" r="9" fill="var(--th-on-08)" />
+                <circle cx="110" cy="110" r="6" fill="var(--th-card-bg)" />
+                <path d="M110 107v3l2 2" stroke="var(--th-on-30)" strokeWidth="1.2" strokeLinecap="round" />
+
+                {/* Decorative dots */}
+                <circle cx="35" cy="65" r="4" fill="var(--th-on-10)" />
+                <circle cx="45" cy="155" r="6" fill="var(--th-on-08)" />
+                <circle cx="255" cy="45" r="3" fill="var(--th-on-12)" />
+                <circle cx="265" cy="145" r="5" fill="var(--th-on-06)" />
+
+                {/* Sparkle accents */}
+                <path d="M30 110l2-4 2 4-4-2 4 0-4 2z" fill="var(--th-on-16)" />
+                <path d="M250 165l1.5-3 1.5 3-3-1.5 3 0-3 1.5z" fill="var(--th-on-12)" />
+
+                {/* Dashed connection line */}
+                <path d="M200 95 Q 210 88 213 83" stroke="var(--th-on-12)" strokeWidth="1.5" strokeDasharray="3 3" fill="none" />
+              </svg>
+            </div>
+
+            {/* Draft Badge */}
+            <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-amber-100 text-amber-700 mb-4">
+              <span className="w-1.5 h-1.5 rounded-full bg-amber-500" />
+              Draft
+            </span>
+
+            <h2 className="text-2xl font-semibold text-foreground/80 mb-2" style={{ letterSpacing: "-0.2px" }}>
+              {projectData.name || "Untitled Project"}
+            </h2>
+            <p className="text-sm text-muted-foreground/70 max-w-md mx-auto mb-10 leading-relaxed">
+              This project hasn&apos;t been deployed yet. Configure your build settings and deploy, or view past deployment attempts.
+            </p>
+
+            {/* Action Buttons */}
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-3 mb-6">
+              <Link
+                href={deploySlug ? `/deploy/${deploySlug}` : "/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"
+              >
+                <Rocket className="size-4" />
+                Configure &amp; Deploy
+              </Link>
+              <button
+                onClick={() => {
+                  setActiveTab("deployments");
+                  window.history.replaceState({}, '', `/projects/${projectData.id}/deployments`);
+                }}
+                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"
+              >
+                <ListTree className="size-4" />
+                See Deployments
+              </button>
+            </div>
+
+            <button
+              onClick={handleDeleteProject}
+              className="inline-flex items-center gap-2 px-4 py-2 text-xs font-medium text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors"
+            >
+              <Trash2 className="size-3.5" />
+              Delete Project
+            </button>
+          </div>
+        </SectionContainer>
+      </div>
+    );
+  }
+
+  if (isLoadingAnalytics) {
+    return (
+      <SectionContainer>
+        {/* Main Grid Layout */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
+          {/* Left Column - 2 cols */}
+          <div className="lg:col-span-2 space-y-5">
+            <TrafficChartSkeleton />
+            <StatsCardsSkeleton />
+            <ProjectIdentitySkeleton />
+          </div>
+
+          {/* Right Column - 1 col */}
+          <div className="space-y-5">
+            <TopPathsSkeleton />
+            <ProductionUrlSkeleton />
+            <ProjectInfoSkeleton />
+          </div>
+        </div>
+      </SectionContainer>
+    );
+  }
+  return (
+    <div className="min-h-screen bg-[#fafafa] pb-32">
+      <SectionContainer>
+        {/* Compact Header - Hide when project not found */}
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <div className="flex items-center space-x-2 text-sm text-black/40 mb-2">
+              <Link href="/" className="hover:text-black transition-colors font-medium">
+                Dashboard
+              </Link>
+              <span>/</span>
+              <Link href={`/projects/${projectData.id || 'projectId'}`} className="hover:text-black transition-colors font-medium">
+                {projectData.custom_domain || projectData.domain || projectData.name || 'Project'}
+              </Link>
+              <span>/</span>
+              <span className="text-black font-medium">Settings</span>
+            </div>
+            <h1 className="text-2xl font-semibold text-black">
+              {tabs.find(t => t.id === activeTab)?.label}
+            </h1>
+          </div>
+
+          {/* Help & Share Menu */}
+          <DropdownMenu
+            actions={helpMenuActions}
+            trigger={<MoreVertical className="w-5 h-5 text-gray-600" />}
+            align="right"
+          />
+        </div>
+
+        {/* Content */}
+        {renderTabContent()}
+      </SectionContainer>
+
+    </div>
+  );
+};
+
+export default ProjectSettingsContent;

package/apps/dashboard/src/app/(dashboard)/projects/[id]/components/AdvancedSettings.tsx

@@ -0,0 +1,235 @@
+import React, { useState } from "react";
+import { generateIcon } from "@/utils/icons";
+import { useProjectSettings } from "@/context/ProjectSettingsContext";
+import { DeletionModal } from "./DeletionModal";
+import { ResourceSettings } from "./ResourceSettings";
+import { SleepModeSettings } from "./SleepModeSettings";
+import { useToast } from "@/context/ToastContext";
+import { projectsApi } from "@/lib/api";
+
+interface Props {
+  onDeleteProject: () => void;
+}
+
+
+export const AdvancedSettings = ({ onDeleteProject }: Props) => {
+  const { showToast } = useToast();
+  const { projectData } = useProjectSettings();
+  const [isProjectActive, setIsProjectActive] = useState(projectData?.active ?? true);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  const [loading, setLoading] = useState({
+    disableProject: false,
+    deleteProject: false,
+    clearInstallCache: false,
+    clearBuildCache: false,
+  });
+  
+
+  const handleDisableProject = async () => {
+    if (loading.disableProject) return;
+    setLoading({ ...loading, disableProject: true });
+    const response = await projectsApi.toggle(projectData.id, !isProjectActive);
+   
+    if (response.success) {
+      setIsProjectActive(!isProjectActive);
+      setLoading({ ...loading, disableProject: false });
+    } else {
+      showToast(response.message,'error', 'Failed to disable project');
+      setLoading({ ...loading, disableProject: false });
+    }
+  };
+
+  const handleClearInstallCache = async () => {
+    if (loading.clearInstallCache) return;
+    setLoading({ ...loading, clearInstallCache: true });
+    const response = await projectsApi.clearCache(projectData.id);
+    if (response.success) {
+      setLoading({ ...loading, clearInstallCache: false });
+    } else {
+      showToast(response.message,'error', 'Failed to clear install cache');
+      setLoading({ ...loading, clearInstallCache: false });
+    }
+  };
+
+  const handleClearBuildCache = async () => {
+    if (loading.clearBuildCache) return;
+    setLoading({ ...loading, clearBuildCache: true });
+    const response = await projectsApi.clearBuild(projectData.id);
+    if (response.success) {
+      setLoading({ ...loading, clearBuildCache: false });
+    } else {
+      showToast(response.message,'error', 'Failed to clear build cache');
+      setLoading({ ...loading, clearBuildCache: false });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Project Status Control */}
+      <div className="bg-white rounded-[20px] border border-black/5 p-6">
+        <div className="flex items-center gap-3 mb-5">
+          <div className="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center border border-indigo-200">
+
+            {generateIcon('setting-100-1658432731.png', 24, 'rgb(79, 70, 229)')}
+          </div>
+          <h3 className="text-lg font-semibold text-black">Project Status</h3>
+        </div>
+
+        <div className="space-y-4">
+          {/* Enable/Disable */}
+          <div className="flex items-center justify-between p-4 bg-black/5 rounded-xl hover:bg-black/10 transition-all">
+            <div className="flex items-center gap-3">
+              {isProjectActive ? (
+                generateIcon('pause-279-1658234823.png', 24, 'var(--color-emerald-600)')
+              ) : (
+                generateIcon('play-287-1658234823.png', 24, 'var(--color-amber-600)')
+              )}
+              <div>
+                <p className="text-sm font-semibold text-black">
+                  {isProjectActive ? 'Project Active' : 'Project Disabled'}
+                </p>
+                <p className="text-xs text-black/50">
+                  {isProjectActive ? 'Project is live and accessible' : 'Project is paused and not accessible'}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={handleDisableProject}
+              disabled={loading.disableProject}
+              className={`px-5 py-2.5 rounded-full font-medium text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-all ${isProjectActive
+                ? 'bg-amber-500 hover:bg-amber-600 text-white'
+                : 'bg-black hover:bg-black/80 text-white'
+                }`}
+            >
+              {isProjectActive ? 'Disable' : 'Enable'}
+            </button>
+          </div>
+
+          {/* Visibility */}
+          {/* <div className="flex items-center justify-between p-4 bg-black/5 rounded-xl hover:bg-black/10 transition-all">
+            <div className="flex items-center gap-3">
+              {isProjectPublic ? (
+                <Eye className="w-5 h-5 text-indigo-600" />
+              ) : (
+                <EyeOff className="w-5 h-5 text-black/50" />
+              )}
+              <div>
+                <p className="text-sm font-semibold text-black">
+                  {isProjectPublic ? 'Public Project' : 'Private Project'}
+                </p>
+                <p className="text-xs text-black/50">
+                  {isProjectPublic ? 'Visible in public listings' : 'Hidden from public view'}
+                </p>
+              </div>
+            </div>
+            <button
+              onClick={handleToggleVisibility}
+              className="px-5 py-2.5 rounded-full bg-black/5 hover:bg-black/10 text-black font-medium text-sm transition-all"
+            >
+              {isProjectPublic ? 'Make Private' : 'Make Public'}
+            </button>
+          </div> */}
+        </div>
+      </div>
+
+      {/* Machine Power */}
+      <ResourceSettings 
+        projectId={projectData?.id} 
+        currentResources={projectData?.resources} 
+      />
+
+      {/* Container Mode */}
+      <SleepModeSettings 
+        projectId={projectData?.id} 
+        currentMode={projectData?.sleep_mode} 
+      />
+
+      {/* Security Settings */}
+      <div className="bg-white rounded-[20px] border border-black/5 p-6">
+        <div className="flex items-center gap-3 mb-5">
+          <div className="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center border border-indigo-200">
+            {generateIcon('record%20circle-69-1663753435.png', 24, 'rgb(79, 70, 229)')}
+          </div>
+
+          <h3 className="text-lg font-semibold text-black">Cache</h3>
+        </div>
+
+        <div className="flex items-center gap-4 ">
+          <button onClick={handleClearInstallCache} disabled={loading.clearInstallCache} className="w-full flex items-center justify-between p-4 bg-black/5 hover:bg-black/10 rounded-xl transition-all text-left disabled:opacity-50 disabled:cursor-not-allowed">
+            <div className="flex items-center gap-3">
+              {generateIcon('npm-184-1693375161.png', 20, 'rgb(79, 70, 229)')}
+              <div>
+                <p className="text-sm font-semibold text-black">Clear Install Cache</p>
+                <p className="text-xs text-black/50">Clear the node_modules cache for the project</p>
+              </div>
+            </div>
+          </button>
+
+          <button onClick={handleClearBuildCache} disabled={loading.clearBuildCache} className="w-full flex items-center justify-between p-4 bg-black/5 hover:bg-black/10 rounded-xl transition-all text-left disabled:opacity-50 disabled:cursor-not-allowed">
+            <div className="flex items-center gap-3">
+              {generateIcon('tools-118-1658432731.png', 24, 'rgb(79, 70, 229)')}
+              <div>
+                <p className="text-sm font-semibold text-black">Clear Build Cache</p>
+                <p className="text-xs text-black/50">Remove all cached build files</p>
+              </div>
+            </div>
+          </button>
+        </div>
+      </div>
+
+      {/* Danger Zone - Delete */}
+      <div className="bg-red-50/50 rounded-[20px] border border-red-200/50 p-6">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-10 h-10 bg-red-100 rounded-xl flex items-center justify-center border border-red-200">
+            {generateIcon('fire-82-1689139787.png', 24, 'var(--color-red-600)')}
+          </div>
+          <h3 className="text-lg font-semibold text-red-900">Danger Zone</h3>
+        </div>
+
+        <div className="mb-5">
+          <h4 className="text-base font-semibold text-red-900 mb-2">
+            Delete This Project
+          </h4>
+          <p className="text-sm text-red-800/80 leading-relaxed mb-4">
+            Once you delete a project, there is no going back. This action will permanently remove:
+          </p>
+          <ul className="space-y-2 text-sm text-red-800/80 mb-6">
+            <li className="flex items-center gap-2">
+              <div className="w-1.5 h-1.5 bg-red-600 rounded-full"></div>
+              All deployments and deployment history
+            </li>
+            <li className="flex items-center gap-2">
+              <div className="w-1.5 h-1.5 bg-red-600 rounded-full"></div>
+              Custom domains and DNS configurations
+            </li>
+            <li className="flex items-center gap-2">
+              <div className="w-1.5 h-1.5 bg-red-600 rounded-full"></div>
+              Environment variables and secrets
+            </li>
+            <li className="flex items-center gap-2">
+              <div className="w-1.5 h-1.5 bg-red-600 rounded-full"></div>
+              All project data and analytics
+            </li>
+          </ul>
+        </div>
+
+        <button
+          onClick={() => setShowDeleteModal(true)}
+          className="inline-flex items-center gap-2 bg-red-600 text-white hover:bg-red-700 font-medium px-6 py-3 rounded-full transition-all hover:shadow-md"
+        >
+          {generateIcon('delete-24-1692683695.png', 24, 'white')}
+          Delete Project Permanently
+        </button>
+      </div>
+      <DeletionModal
+        isOpen={showDeleteModal}
+        onClose={() => setShowDeleteModal(false)}
+        onConfirm={onDeleteProject}
+        projectName={projectData?.name || projectData?.domain}
+      />
+    </div>
+  );
+};
+
+