openship 0.1.0 → 0.1.1

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

@@ -0,0 +1,174 @@
+import React, { useRef, useState } from "react";
+import { Rocket, ChevronDown, ChevronUp } from "lucide-react";
+import { useProjectSettings } from "@/context/ProjectSettingsContext";
+import { EnvironmentSettings } from "./EnvironmentSettings";
+import { GitInfo } from "./GitInfo";
+import { projectsApi } from "@/lib/api";
+import { useToast } from "@/context/ToastContext";
+import { useRouter } from "next/navigation";
+import BuildSettingsComponent from "@/components/import-project/BuildSettings";
+
+export const BuildSettings = () => {
+  const { buildData, updateBuild, projectData, id } = useProjectSettings();
+  const router = useRouter();
+
+  const [showEnvironment, setShowEnvironment] = useState(false);
+
+  const [loading, setLoading] = useState({
+    installCommand: false,
+    buildCommand: false,
+    outputDirectory: false,
+    productionPaths: false,
+    startCommand: false,
+    productionPort: false,
+    redeploy: false,
+  });
+
+  const { showToast } = useToast();
+
+  const isLoadingRef = useRef(false);
+
+  const handleSaveField = async (field: string, value: string) => {
+    if (isLoadingRef.current) return;
+
+    setLoading({ ...loading, [field]: true });
+    isLoadingRef.current = true;
+
+    const response = await projectsApi.setOptions(id, { [field]: value });
+
+    if (response.success) {
+      updateBuild({ [field]: value });
+      showToast('Project options updated successfully', 'success', 'Updated');
+    } else {
+      showToast(response.message, 'error', 'Failed to update project options');
+    }
+
+    isLoadingRef.current = false;
+    setLoading({ ...loading, [field]: false });
+  };
+
+  const handleRedeploy = async () => {
+    if (!projectData?.id) return;
+
+    setLoading({ ...loading, redeploy: true });
+    try {
+      const response = await projectsApi.createDeploymentSession(projectData.id);
+
+      if (response.success) {
+        // Redirect to build page if deployment_id is returned
+        if (response.deployment_id) {
+          router.push(`/build/${response.deployment_id}?redeploy=true`);
+        }
+      } else {
+        showToast(response.message || 'Failed to start redeployment', 'error', 'Error');
+      }
+    } catch (error) {
+      console.error('Error redeploying project:', error);
+      showToast('Failed to start redeployment', 'error', 'Error');
+    } finally {
+      setLoading({ ...loading, redeploy: false });
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-9 gap-6">
+      {/* Left Column - Build Settings (6/8) */}
+      <div className="lg:col-span-6 space-y-6">
+        <BuildSettingsComponent
+          mode="advanced"
+          buildData={buildData}
+          buildConfig={{
+            options: buildData,
+            updateOptions: updateBuild,
+            framework: projectData?.framework,
+          }}
+          onSave={handleSaveField}
+          loading={loading}
+        />
+
+        {/* <ServerSideSwitch
+          style={{ background: '#fafafa' }}
+          productionPort={buildData.productionPort}
+          hasServer={buildData.hasServer}
+          handleServerToggleChange={(checked: boolean) => updateBuild({ hasServer: checked })}
+        /> */}
+        {/* Environment Settings Toggle Button */}
+        <div className="border-t border-gray-200 pt-6">
+          <button
+            onClick={() => setShowEnvironment(!showEnvironment)}
+            className="w-full flex items-center justify-between p-4 bg-amber-50 hover:from-amber-100 hover:to-green-100 rounded-xl border border-amber-200/50 transition-all group"
+          >
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center border border-amber-200">
+                <svg className="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                </svg>
+              </div>
+              <div className="text-left">
+                <h3 className="text-normal font-semibold text-black">Environment Variables</h3>
+                <p className="text-sm text-black/60">Manage your environment variables and secrets</p>
+              </div>
+            </div>
+            {showEnvironment ? (
+              <ChevronUp className="w-5 h-5 text-amber-600 transition-transform" />
+            ) : (
+              <ChevronDown className="w-5 h-5 text-amber-600 transition-transform" />
+            )}
+          </button>
+
+          {/* Environment Settings - Hidden by default */}
+          {showEnvironment && (
+            <div className="mt-6 animate-in slide-in-from-top-4 duration-300">
+              <EnvironmentSettings />
+            </div>
+          )}
+        </div>
+        {/* Redeploy Section */}
+        <div className="grid grid-cols-1">
+          <div className="">
+            <div className="mb-3">
+              <h3 className="text-sm font-semibold text-black/70">Redeploy Project</h3>
+              <p className="text-xs text-black/50 mt-1">Trigger a new deployment with the current configuration.</p>
+            </div>
+
+            <div className="p-4 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl border border-indigo-200/50 mb-4">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center border border-indigo-200">
+                  <Rocket className="w-5 h-5 text-indigo-600" />
+                </div>
+                <div className="flex-1">
+                  <h4 className="text-sm font-semibold text-black">Deploy Latest Changes</h4>
+                  <p className="text-xs text-black/60 mt-0.5">Start a fresh deployment with your current settings</p>
+                </div>
+              </div>
+            </div>
+
+            <button
+              onClick={handleRedeploy}
+              disabled={loading.redeploy}
+              className="w-full px-4 py-3 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white rounded-xl transition-all text-sm font-medium disabled:cursor-not-allowed flex items-center justify-center gap-2 shadow-sm hover:shadow-md"
+            >
+              {loading.redeploy ? (
+                <>
+                  <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  Deploying...
+                </>
+              ) : (
+                <>
+                  Redeploy Project
+                </>
+              )}
+            </button>
+          </div>
+          <div />
+        </div>
+
+      </div>
+
+      {/* Right Column - Git Info (2/8) */}
+      <div className="lg:col-span-3">
+        <GitInfo />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,45 @@
+import React from "react";
+import { AlertTriangle } from "lucide-react";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  projectName: string;
+}
+
+export const DeleteConfirmationDialog = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  projectName,
+}: Props) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+      <div className="bg-zinc-950 border border-zinc-800 rounded-xl p-6 max-w-md w-full">
+        <div className="flex items-center mb-4">
+          <div className="p-2 bg-red-950/20 rounded-lg mr-3">
+            <AlertTriangle className="h-6 w-6 text-red-400" />
+          </div>
+          <h3 className="text-lg font-semibold text-white">Delete Project</h3>
+        </div>
+        <p className="text-zinc-400 mb-6">
+          Are you sure you want to delete{" "}
+          <strong className="text-white">{projectName}</strong>? This action
+          cannot be undone and will permanently delete all project data,
+          deployments, and settings.
+        </p>
+        <div className="flex justify-end space-x-3">
+          <button onClick={onClose}>
+            Cancel
+          </button>
+          <button onClick={onConfirm}>
+            Delete Project
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,95 @@
+import React, { useState } from "react";
+import { AlertTriangle } from "lucide-react";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  projectName: string;
+}
+
+export const DeletionModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  projectName,
+}: Props) => {
+  const [inputValue, setInputValue] = useState("");
+  const isConfirmDisabled = inputValue !== projectName;
+
+  if (!isOpen) return null;
+
+  const handleConfirm = () => {
+    if (!isConfirmDisabled) {
+      onConfirm();
+      setInputValue("");
+      onClose();
+    }
+  };
+
+  const handleClose = () => {
+    setInputValue("");
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+      <div className="bg-white border border-black/10 rounded-xl p-6 max-w-md w-full shadow-xl">
+        <div className="flex items-center mb-4">
+          <div className="p-2 bg-amber-50 rounded-lg mr-3 border border-amber-200">
+            <AlertTriangle className="h-6 w-6 text-amber-600" />
+          </div>
+          <h3 className="text-lg font-semibold text-black">Delete Project</h3>
+        </div>
+        
+        <div className="mb-6 space-y-3">
+          <p className="text-black/70">
+            You are about to delete the project <strong className="text-black">{projectName}</strong> permanently.
+          </p>
+          
+          <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
+            <p className="text-sm text-amber-900 font-medium mb-1">Important Warning</p>
+            <p className="text-sm text-amber-800">
+              If you apply this, the entire project <strong>will be deleted</strong> and all associated data on our servers including backups <strong>will be lost permanently</strong>. Make sure this is what you intend.
+            </p>
+          </div>
+
+          <p className="text-sm text-black/60">
+            Type <strong className="text-black bg-black/5 px-1 rounded">{projectName}</strong> to confirm this action.
+          </p>
+        </div>
+
+        <div className="mb-6">
+          <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            placeholder={`Type "${projectName}" to confirm`}
+            className="w-full px-4 py-2.5 bg-black/5 text-black border border-black/10 rounded-lg text-sm focus:border-black focus:ring-2 focus:ring-black/10 outline-none transition-all"
+          />
+        </div>
+
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={handleClose}
+            className="px-5 py-2.5 bg-white text-black hover:bg-black/5 border border-black/10 rounded-full font-normal text-sm transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={isConfirmDisabled}
+            className={`px-5 py-2.5 rounded-full font-normal text-sm transition-all ${
+              isConfirmDisabled
+                ? 'bg-black/20 text-black/40 cursor-not-allowed'
+                : 'bg-black text-white hover:bg-gray-900'
+            }`}
+          >
+            Confirm Delete
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+

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

@@ -0,0 +1,11 @@
+"use client";
+
+import React from "react";
+import { useProjectSettings } from "@/context/ProjectSettingsContext";
+import { DeploymentsContent } from "@/app/(dashboard)/deployments/components";
+
+export const Deployments = () => {
+  const { id, projectData } = useProjectSettings();
+
+  return <DeploymentsContent projectId={id} projectName={projectData.name} />;
+};