openship 0.1.1 → 0.1.7

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

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

@@ -1,235 +0,0 @@
-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>
-  );
-};
-
-