keyhan
2079 lines
103 KiB
TypeScript
2079 lines
103 KiB
TypeScript
'use client';
|
||
|
||
import { useState, useRef, useCallback } from 'react';
|
||
import { useRouter } from 'next/navigation';
|
||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||
import api from '@/lib/api';
|
||
import { useAuthStore } from '@/lib/store';
|
||
import { toast } from 'react-toastify';
|
||
import type { CreateApplicationDto, ClusterPublic, ClusterPoolPublic, CostBreakdown, BillingCycle } from '@/types';
|
||
import { Hexagon, FolderUp, Link as LinkIcon, CheckCircle, Package, Server, Scale, Home, Target, BarChart3, RotateCw, KeyRound, Rocket, Clock, Upload, XCircle, Database, Eye, EyeOff, RefreshCw, DollarSign, Wallet, CreditCard, Loader2 } from 'lucide-react';
|
||
|
||
const steps = ['Basic Info', 'Versions & Database', 'Resources', 'Review'];
|
||
|
||
type DeployStage = 'idle' | 'creating' | 'uploading-source' | 'uploading-db' | 'paying' | 'deploying' | 'done' | 'error';
|
||
|
||
const stageLabels: Record<DeployStage, string> = {
|
||
idle: '',
|
||
creating: 'Creating application...',
|
||
'uploading-source': 'Uploading source code...',
|
||
'uploading-db': 'Uploading database dump...',
|
||
paying: 'Processing payment...',
|
||
deploying: 'Starting deployment...',
|
||
done: 'Redirecting...',
|
||
error: 'An error occurred',
|
||
};
|
||
|
||
export default function DeployPage() {
|
||
const router = useRouter();
|
||
const user = useAuthStore((s) => s.user);
|
||
const isAdmin = user?.role === 'admin' || user?.role === 'technical';
|
||
const [step, setStep] = useState(0);
|
||
const [form, setForm] = useState<CreateApplicationDto>({
|
||
name: '',
|
||
description: '',
|
||
runtime: 'nodejs',
|
||
databaseType: 'none',
|
||
runtimeVersion: '20',
|
||
phpVersion: '',
|
||
dbVersion: '',
|
||
gitUrl: '',
|
||
gitToken: '',
|
||
gitBranch: '',
|
||
envVars: {},
|
||
cpuRequest: '100m',
|
||
cpuLimit: '500m',
|
||
memoryRequest: '128Mi',
|
||
memoryLimit: '512Mi',
|
||
replicas: 1,
|
||
port: 3000,
|
||
dbStorageSize: '1',
|
||
appStorageSize: '2',
|
||
enableRedis: false,
|
||
enableRabbitmq: false,
|
||
enableElasticsearch: false,
|
||
});
|
||
const [envKey, setEnvKey] = useState('');
|
||
const [envVal, setEnvVal] = useState('');
|
||
const [sourceMethod, setSourceMethod] = useState<'git' | 'upload'>('upload');
|
||
const [zipFile, setZipFile] = useState<File | null>(null);
|
||
const [uploadProgress, setUploadProgress] = useState(0);
|
||
const [isDragging, setIsDragging] = useState(false);
|
||
const [clusterMode, setClusterMode] = useState<'default' | 'manual' | 'pool'>('default');
|
||
const [showDbPassword, setShowDbPassword] = useState(false);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
const [dbDumpFile, setDbDumpFile] = useState<File | null>(null);
|
||
const dbDumpInputRef = useRef<HTMLInputElement>(null);
|
||
const [dbUploadProgress, setDbUploadProgress] = useState(0);
|
||
const [deployStage, setDeployStage] = useState<DeployStage>('idle');
|
||
const [wpMode, setWpMode] = useState<'fresh' | 'migrate' | 'public_html'>('fresh');
|
||
const [wpContentFile, setWpContentFile] = useState<File | null>(null);
|
||
const [isWpDragging, setIsWpDragging] = useState(false);
|
||
const wpFileInputRef = useRef<HTMLInputElement>(null);
|
||
const [selectedCycle, setSelectedCycle] = useState<BillingCycle>('monthly');
|
||
const [paymentMethod, setPaymentMethod] = useState<'wallet' | 'gateway'>('wallet');
|
||
const [isPaid, setIsPaid] = useState(false);
|
||
|
||
const { data: clusters = [] } = useQuery<ClusterPublic[]>({
|
||
queryKey: ['clusters-public'],
|
||
queryFn: () => api.get('/clusters/public').then((r) => r.data),
|
||
enabled: isAdmin,
|
||
});
|
||
|
||
const { data: pools = [] } = useQuery<ClusterPoolPublic[]>({
|
||
queryKey: ['pools-public'],
|
||
queryFn: () => api.get('/clusters/pools/public').then((r) => r.data),
|
||
enabled: isAdmin,
|
||
});
|
||
|
||
// Cost calculation for the review step
|
||
const { data: costData, isLoading: costLoading } = useQuery<CostBreakdown>({
|
||
queryKey: ['deploy-cost', form.runtime, form.databaseType, form.cpuLimit, form.memoryLimit, form.replicas, form.dbStorageSize, form.appStorageSize, form.enableRedis, form.enableRabbitmq, form.enableElasticsearch],
|
||
queryFn: () => api.post('/billing/calculate', {
|
||
runtime: form.runtime,
|
||
databaseType: form.databaseType,
|
||
cpuLimit: form.cpuLimit,
|
||
memoryLimit: form.memoryLimit,
|
||
replicas: form.replicas,
|
||
dbStorageSize: form.databaseType !== 'none' ? `${parseInt(form.dbStorageSize || '1', 10) || 1}` : undefined,
|
||
appStorageSize: `${parseInt(form.appStorageSize || '2', 10) || 2}`,
|
||
enableRedis: form.enableRedis,
|
||
enableRabbitmq: form.enableRabbitmq,
|
||
enableElasticsearch: form.enableElasticsearch,
|
||
}).then((r) => r.data),
|
||
enabled: step === 3,
|
||
});
|
||
|
||
// Wallet balance for the review step payment
|
||
const { data: walletData } = useQuery<{ balance: number }>({
|
||
queryKey: ['wallet-balance'],
|
||
queryFn: () => api.get('/billing/wallet').then((r) => r.data),
|
||
enabled: step === 3,
|
||
});
|
||
|
||
const payAmount = costData ? costData[selectedCycle] : 0;
|
||
const walletBalance = walletData?.balance ?? 0;
|
||
const hasEnoughBalance = walletBalance >= payAmount;
|
||
|
||
const walletPayMutation = useMutation({
|
||
mutationFn: async () => {
|
||
// First create the app
|
||
setDeployStage('creating');
|
||
const payload = { ...form };
|
||
if (payload.databaseType !== 'none' && payload.dbStorageSize) {
|
||
payload.dbStorageSize = `${parseInt(payload.dbStorageSize, 10) || 1}Gi`;
|
||
}
|
||
if (payload.appStorageSize) {
|
||
payload.appStorageSize = `${parseInt(payload.appStorageSize, 10) || 2}Gi`;
|
||
}
|
||
const res = await api.post('/applications', payload);
|
||
const appId = res.data.id;
|
||
|
||
// Upload source (regular apps or WordPress migrate/public_html)
|
||
const fileToUpload = form.runtime === 'wordpress' ? ((wpMode === 'migrate' || wpMode === 'public_html') ? wpContentFile : null) : (sourceMethod === 'upload' ? zipFile : null);
|
||
if (fileToUpload) {
|
||
setDeployStage('uploading-source');
|
||
setUploadProgress(0);
|
||
const formData = new FormData();
|
||
formData.append('file', fileToUpload);
|
||
await api.post(`/applications/${appId}/upload`, formData, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
onUploadProgress: (e) => { if (e.total) setUploadProgress(Math.round((e.loaded * 100) / e.total)); },
|
||
});
|
||
}
|
||
|
||
// Upload DB dump
|
||
if (form.databaseType !== 'none' && dbDumpFile) {
|
||
setDeployStage('uploading-db');
|
||
setDbUploadProgress(0);
|
||
const formData = new FormData();
|
||
formData.append('file', dbDumpFile);
|
||
await api.post(`/applications/${appId}/db-upload`, formData, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
onUploadProgress: (e) => { if (e.total) setDbUploadProgress(Math.round((e.loaded * 100) / e.total)); },
|
||
});
|
||
}
|
||
|
||
// Deduct from wallet
|
||
setDeployStage('paying');
|
||
await api.post(`/billing/wallet/pay/${appId}`, { amount: payAmount, cycle: selectedCycle });
|
||
|
||
return res;
|
||
},
|
||
onSuccess: (res) => {
|
||
setDeployStage('deploying');
|
||
toast.success('Payment successful! Deploying...');
|
||
api.post(`/deployments/applications/${res.data.id}/deploy`).catch(() => {});
|
||
setDeployStage('done');
|
||
router.push(`/dashboard/apps/${res.data.id}`);
|
||
},
|
||
onError: (err: any) => {
|
||
setDeployStage('error');
|
||
toast.error(err.response?.data?.message || 'Payment or deployment failed');
|
||
setUploadProgress(0);
|
||
setDbUploadProgress(0);
|
||
setTimeout(() => setDeployStage('idle'), 2000);
|
||
},
|
||
});
|
||
|
||
const gatewayPayMutation = useMutation({
|
||
mutationFn: async () => {
|
||
// Initiate gateway
|
||
setDeployStage('paying');
|
||
const { data: gw } = await api.post('/billing/gateway/initiate', {
|
||
amount: payAmount,
|
||
description: `Deploy: ${form.name} (${selectedCycle})`,
|
||
callbackUrl: `${window.location.origin}/dashboard/deploy`,
|
||
});
|
||
|
||
// In production, redirect to gw.gatewayUrl
|
||
// For now, auto-verify (simulated)
|
||
await api.post('/billing/gateway/verify', {
|
||
trackingCode: gw.trackingCode,
|
||
amount: payAmount,
|
||
});
|
||
|
||
// Now create the app
|
||
setDeployStage('creating');
|
||
const payload = { ...form };
|
||
if (payload.databaseType !== 'none' && payload.dbStorageSize) {
|
||
payload.dbStorageSize = `${parseInt(payload.dbStorageSize, 10) || 1}Gi`;
|
||
}
|
||
if (payload.appStorageSize) {
|
||
payload.appStorageSize = `${parseInt(payload.appStorageSize, 10) || 2}Gi`;
|
||
}
|
||
const res = await api.post('/applications', payload);
|
||
const appId = res.data.id;
|
||
|
||
// Upload source (regular apps or WordPress migrate/public_html)
|
||
const fileToUpload = form.runtime === 'wordpress' ? ((wpMode === 'migrate' || wpMode === 'public_html') ? wpContentFile : null) : (sourceMethod === 'upload' ? zipFile : null);
|
||
if (fileToUpload) {
|
||
setDeployStage('uploading-source');
|
||
setUploadProgress(0);
|
||
const formData = new FormData();
|
||
formData.append('file', fileToUpload);
|
||
await api.post(`/applications/${appId}/upload`, formData, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
onUploadProgress: (e) => { if (e.total) setUploadProgress(Math.round((e.loaded * 100) / e.total)); },
|
||
});
|
||
}
|
||
|
||
// Upload DB dump
|
||
if (form.databaseType !== 'none' && dbDumpFile) {
|
||
setDeployStage('uploading-db');
|
||
setDbUploadProgress(0);
|
||
const formData = new FormData();
|
||
formData.append('file', dbDumpFile);
|
||
await api.post(`/applications/${appId}/db-upload`, formData, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
onUploadProgress: (e) => { if (e.total) setDbUploadProgress(Math.round((e.loaded * 100) / e.total)); },
|
||
});
|
||
}
|
||
|
||
// Deduct from the wallet (which was just charged by gateway)
|
||
setDeployStage('paying');
|
||
await api.post(`/billing/wallet/pay/${appId}`, { amount: payAmount, cycle: selectedCycle });
|
||
|
||
return res;
|
||
},
|
||
onSuccess: (res) => {
|
||
setDeployStage('deploying');
|
||
toast.success('Payment successful! Deploying...');
|
||
api.post(`/deployments/applications/${res.data.id}/deploy`).catch(() => {});
|
||
setDeployStage('done');
|
||
router.push(`/dashboard/apps/${res.data.id}`);
|
||
},
|
||
onError: (err: any) => {
|
||
setDeployStage('error');
|
||
toast.error(err.response?.data?.message || 'Payment failed');
|
||
setUploadProgress(0);
|
||
setDbUploadProgress(0);
|
||
setTimeout(() => setDeployStage('idle'), 2000);
|
||
},
|
||
});
|
||
|
||
const createMutation = useMutation({
|
||
mutationFn: async (data: CreateApplicationDto) => {
|
||
setDeployStage('creating');
|
||
const res = await api.post('/applications', data);
|
||
const appId = res.data.id;
|
||
|
||
// Upload zip file if selected
|
||
// Upload source (regular apps or WordPress migrate/public_html)
|
||
const fileToUpload = data.runtime === 'wordpress' ? ((wpMode === 'migrate' || wpMode === 'public_html') ? wpContentFile : null) : (sourceMethod === 'upload' ? zipFile : null);
|
||
if (fileToUpload) {
|
||
setDeployStage('uploading-source');
|
||
setUploadProgress(0);
|
||
const formData = new FormData();
|
||
formData.append('file', fileToUpload);
|
||
await api.post(`/applications/${appId}/upload`, formData, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
onUploadProgress: (e) => {
|
||
if (e.total) setUploadProgress(Math.round((e.loaded * 100) / e.total));
|
||
},
|
||
});
|
||
}
|
||
|
||
// Upload DB dump if provided and a database was requested
|
||
if (data.databaseType && data.databaseType !== 'none' && dbDumpFile) {
|
||
setDeployStage('uploading-db');
|
||
setDbUploadProgress(0);
|
||
const formData = new FormData();
|
||
formData.append('file', dbDumpFile);
|
||
await api.post(`/applications/${appId}/db-upload`, formData, {
|
||
headers: { 'Content-Type': 'multipart/form-data' },
|
||
onUploadProgress: (e) => {
|
||
if (e.total) setDbUploadProgress(Math.round((e.loaded * 100) / e.total));
|
||
},
|
||
});
|
||
}
|
||
|
||
return res;
|
||
},
|
||
onSuccess: (res) => {
|
||
setDeployStage('deploying');
|
||
toast.success('Application created! Triggering deployment...');
|
||
api.post(`/deployments/applications/${res.data.id}/deploy`).catch(() => {});
|
||
setDeployStage('done');
|
||
router.push(`/dashboard/apps/${res.data.id}`);
|
||
},
|
||
onError: (err: any) => {
|
||
setDeployStage('error');
|
||
toast.error(err.response?.data?.message || 'Failed to create application');
|
||
setUploadProgress(0);
|
||
setDbUploadProgress(0);
|
||
setTimeout(() => setDeployStage('idle'), 2000);
|
||
},
|
||
});
|
||
|
||
const addEnvVar = () => {
|
||
if (envKey.trim()) {
|
||
setForm({ ...form, envVars: { ...form.envVars, [envKey]: envVal } });
|
||
setEnvKey('');
|
||
setEnvVal('');
|
||
}
|
||
};
|
||
|
||
const removeEnvVar = (key: string) => {
|
||
const updated = { ...form.envVars };
|
||
delete updated[key];
|
||
setForm({ ...form, envVars: updated });
|
||
};
|
||
|
||
const handleSubmit = () => {
|
||
const payload = { ...form };
|
||
// Format dbStorageSize with Gi suffix
|
||
if (payload.databaseType !== 'none' && payload.dbStorageSize) {
|
||
payload.dbStorageSize = `${parseInt(payload.dbStorageSize, 10) || 1}Gi`;
|
||
}
|
||
// Format appStorageSize with Gi suffix (all app types)
|
||
if (payload.appStorageSize) {
|
||
payload.appStorageSize = `${parseInt(payload.appStorageSize, 10) || 2}Gi`;
|
||
}
|
||
createMutation.mutate(payload);
|
||
};
|
||
|
||
const handleFileSelect = useCallback((file: File) => {
|
||
const validTypes = ['application/zip', 'application/x-zip-compressed', 'application/gzip', 'application/x-tar'];
|
||
const validExtensions = ['.zip', '.tar.gz', '.tgz'];
|
||
const hasValidExt = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
|
||
|
||
if (!hasValidExt && !validTypes.includes(file.type)) {
|
||
toast.error('Only .zip or .tar.gz files are allowed');
|
||
return;
|
||
}
|
||
if (file.size > 100 * 1024 * 1024) {
|
||
toast.error('File size must be less than 100MB');
|
||
return;
|
||
}
|
||
setZipFile(file);
|
||
toast.success(`Selected: ${file.name}`);
|
||
}, []);
|
||
|
||
const handleDrop = useCallback((e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
setIsDragging(false);
|
||
const file = e.dataTransfer.files[0];
|
||
if (file) handleFileSelect(file);
|
||
}, [handleFileSelect]);
|
||
|
||
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
setIsDragging(true);
|
||
}, []);
|
||
|
||
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
setIsDragging(false);
|
||
}, []);
|
||
|
||
const handleWpFileSelect = useCallback((file: File) => {
|
||
const validExtensions = ['.zip', '.tar.gz', '.tgz'];
|
||
const hasValidExt = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
|
||
if (!hasValidExt) {
|
||
toast.error('Only .zip or .tar.gz files are allowed');
|
||
return;
|
||
}
|
||
if (file.size > 200 * 1024 * 1024) {
|
||
toast.error('WordPress files must be less than 200MB');
|
||
return;
|
||
}
|
||
setWpContentFile(file);
|
||
// Auto-suggest app storage size based on file size (add 50% buffer, minimum 2GB)
|
||
const fileSizeGb = file.size / (1024 * 1024 * 1024);
|
||
const suggestedSize = Math.max(2, Math.ceil(fileSizeGb * 1.5));
|
||
setForm((prev) => ({ ...prev, appStorageSize: String(suggestedSize) }));
|
||
toast.success(`WordPress files selected: ${file.name}`);
|
||
}, []);
|
||
|
||
const handleWpDrop = useCallback((e: React.DragEvent) => {
|
||
e.preventDefault();
|
||
setIsWpDragging(false);
|
||
const file = e.dataTransfer.files[0];
|
||
if (file) handleWpFileSelect(file);
|
||
}, [handleWpFileSelect]);
|
||
|
||
const canNext = () => {
|
||
if (step === 0) {
|
||
if (form.name.length < 2) return false;
|
||
// WordPress: migrate or public_html mode requires wp-content file
|
||
if (form.runtime === 'wordpress') {
|
||
if ((wpMode === 'migrate' || wpMode === 'public_html') && !wpContentFile) return false;
|
||
} else {
|
||
if (sourceMethod === 'upload' && !zipFile) return false;
|
||
if (sourceMethod === 'git' && !form.gitUrl) return false;
|
||
}
|
||
return true;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
return (
|
||
<div className="max-w-2xl mx-auto space-y-8 animate-fade-in">
|
||
<div>
|
||
<h1 className="page-title">Deploy New Application</h1>
|
||
<p className="page-subtitle">Follow the steps to deploy your app to the cloud.</p>
|
||
</div>
|
||
|
||
{/* Step indicator */}
|
||
<div className="flex items-center justify-between">
|
||
{steps.map((label, i) => (
|
||
<div key={label} className="flex items-center flex-1 last:flex-none">
|
||
<div className="flex flex-col items-center">
|
||
<div className={`flex items-center justify-center w-9 h-9 rounded-full text-sm font-bold transition-all duration-300 ${
|
||
i < step
|
||
? 'bg-emerald-500 text-white shadow-md'
|
||
: i === step
|
||
? 'bg-primary-600 text-white shadow-lg ring-4 ring-primary-100'
|
||
: 'bg-gray-200 text-gray-500'
|
||
}`}>
|
||
{i < step ? '✓' : i + 1}
|
||
</div>
|
||
<span className={`mt-1.5 text-xs font-medium hidden sm:block ${
|
||
i <= step ? 'text-gray-900' : 'text-gray-400'
|
||
}`}>
|
||
{label}
|
||
</span>
|
||
</div>
|
||
{i < steps.length - 1 && (
|
||
<div className={`flex-1 h-0.5 mx-2 sm:mx-3 rounded-full transition-colors duration-300 ${
|
||
i < step ? 'bg-emerald-400' : 'bg-gray-200'
|
||
}`} />
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="card">
|
||
{/* Step 0: Basic Info */}
|
||
{step === 0 && (
|
||
<div className="space-y-5">
|
||
<h2 className="text-lg font-semibold text-gray-900">Basic Information</h2>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Application Name</label>
|
||
<input
|
||
className="input-field"
|
||
placeholder="my-awesome-app"
|
||
value={form.name}
|
||
onChange={(e) => setForm({ ...form, name: e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '-') })}
|
||
/>
|
||
<p className="mt-1 text-xs text-gray-400">Lowercase letters, numbers, and hyphens only</p>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Description (optional)</label>
|
||
<textarea
|
||
className="input-field"
|
||
rows={3}
|
||
placeholder="What does this app do?"
|
||
value={form.description}
|
||
onChange={(e) => setForm({ ...form, description: e.target.value })}
|
||
/>
|
||
</div>
|
||
|
||
{/* Application Runtime */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-3">Application Type</label>
|
||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||
{[
|
||
{ value: 'nodejs', label: 'Node.js', icon: <Hexagon className="w-5 h-5 text-green-500" />, desc: 'Express, NestJS, Fastify' },
|
||
{ value: 'laravel', label: 'Laravel', icon: <Hexagon className="w-5 h-5 text-orange-500" />, desc: 'PHP, Composer, Artisan' },
|
||
{ value: 'wordpress', label: 'WordPress', icon: <Hexagon className="w-5 h-5 text-blue-600" />, desc: 'Official image' },
|
||
{ value: 'go', label: 'Go', icon: <Hexagon className="w-5 h-5 text-cyan-500" />, desc: 'Gin, Echo, Fiber' },
|
||
{ value: 'python', label: 'Python', icon: <Hexagon className="w-5 h-5 text-yellow-500" />, desc: 'Flask, FastAPI' },
|
||
{ value: 'django', label: 'Django', icon: <Hexagon className="w-5 h-5 text-green-700" />, desc: 'Python web framework' },
|
||
{ value: 'php', label: 'PHP', icon: <Hexagon className="w-5 h-5 text-indigo-500" />, desc: 'Plain PHP apps' },
|
||
{ value: 'dotnet', label: '.NET', icon: <Hexagon className="w-5 h-5 text-purple-500" />, desc: 'ASP.NET Core' },
|
||
].map((opt) => (
|
||
<button
|
||
key={opt.value}
|
||
type="button"
|
||
onClick={() => {
|
||
const updates: any = { runtime: opt.value as any, phpVersion: '', runtimeVersion: '' };
|
||
if (opt.value === 'nodejs') { updates.port = 3000; updates.runtimeVersion = '20'; }
|
||
else if (opt.value === 'laravel') { updates.port = 8000; updates.phpVersion = '8.3'; }
|
||
else if (opt.value === 'wordpress') { updates.port = 80; updates.databaseType = 'mysql'; updates.runtimeVersion = '6.7'; updates.phpVersion = '8.3'; }
|
||
else if (opt.value === 'go') { updates.port = 8080; updates.runtimeVersion = '1.22'; }
|
||
else if (opt.value === 'python') { updates.port = 8000; updates.runtimeVersion = '3.12'; }
|
||
else if (opt.value === 'django') { updates.port = 8000; updates.runtimeVersion = '3.12'; }
|
||
else if (opt.value === 'php') { updates.port = 80; updates.phpVersion = '8.3'; }
|
||
else if (opt.value === 'dotnet') { updates.port = 5000; updates.runtimeVersion = '8.0'; }
|
||
setForm({ ...form, ...updates });
|
||
// Reset WordPress-specific state when switching types
|
||
if (opt.value !== 'wordpress') { setWpMode('fresh'); setWpContentFile(null); }
|
||
}}
|
||
className={`p-3 rounded-xl border-2 text-left transition-colors ${
|
||
form.runtime === opt.value ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
{opt.icon}
|
||
<p className="mt-1.5 font-semibold text-sm text-gray-900">{opt.label}</p>
|
||
<p className="text-xs text-gray-500">{opt.desc}</p>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Source Code Method — hidden for WordPress */}
|
||
{form.runtime !== 'wordpress' && (
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-3">Source Code</label>
|
||
<div className="grid grid-cols-2 gap-3 mb-4">
|
||
<button
|
||
type="button"
|
||
onClick={() => setSourceMethod('upload')}
|
||
className={`p-3 rounded-xl border-2 text-center transition-colors ${
|
||
sourceMethod === 'upload'
|
||
? 'border-primary-500 bg-primary-50'
|
||
: 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<FolderUp className="w-5 h-5 mx-auto text-gray-500" />
|
||
<p className="mt-1 font-semibold text-sm text-gray-900">Upload ZIP</p>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setSourceMethod('git')}
|
||
className={`p-3 rounded-xl border-2 text-center transition-colors ${
|
||
sourceMethod === 'git'
|
||
? 'border-primary-500 bg-primary-50'
|
||
: 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<LinkIcon className="w-5 h-5 mx-auto text-gray-500" />
|
||
<p className="mt-1 font-semibold text-sm text-gray-900">Git Repository</p>
|
||
</button>
|
||
</div>
|
||
|
||
{sourceMethod === 'git' ? (
|
||
<div className="space-y-3">
|
||
<div>
|
||
<label className="block text-xs text-gray-500 mb-1">Repository URL</label>
|
||
<input
|
||
className="input-field"
|
||
placeholder="https://github.com/user/repo.git"
|
||
value={form.gitUrl}
|
||
onChange={(e) => setForm({ ...form, gitUrl: e.target.value })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs text-gray-500 mb-1">
|
||
Access Token <span className="text-gray-400">(for private repos)</span>
|
||
</label>
|
||
<input
|
||
className="input-field"
|
||
type="password"
|
||
placeholder="ghp_xxxxxxxxxxxx or glpat-xxxxxxxxxxxx"
|
||
value={form.gitToken || ''}
|
||
onChange={(e) => setForm({ ...form, gitToken: e.target.value })}
|
||
/>
|
||
<p className="mt-1 text-xs text-gray-400">
|
||
GitHub: Personal Access Token · GitLab: Project Access Token · Leave empty for public repos
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs text-gray-500 mb-1">
|
||
Branch <span className="text-gray-400">(default: main)</span>
|
||
</label>
|
||
<input
|
||
className="input-field"
|
||
placeholder="main"
|
||
value={form.gitBranch || ''}
|
||
onChange={(e) => setForm({ ...form, gitBranch: e.target.value })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div>
|
||
{zipFile ? (
|
||
<div className="flex items-center justify-between p-4 bg-green-50 border border-green-200 rounded-xl">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
|
||
<CheckCircle className="w-5 h-5" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-medium text-green-800">{zipFile.name}</p>
|
||
<p className="text-xs text-green-600">
|
||
{(zipFile.size / (1024 * 1024)).toFixed(2)} MB
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setZipFile(null);
|
||
if (fileInputRef.current) fileInputRef.current.value = '';
|
||
}}
|
||
className="text-sm text-red-500 hover:text-red-700 font-medium"
|
||
>
|
||
Remove
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div
|
||
onDrop={handleDrop}
|
||
onDragOver={handleDragOver}
|
||
onDragLeave={handleDragLeave}
|
||
onClick={() => fileInputRef.current?.click()}
|
||
className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all ${
|
||
isDragging
|
||
? 'border-primary-500 bg-primary-50'
|
||
: 'border-gray-300 hover:border-primary-400 hover:bg-gray-50'
|
||
}`}
|
||
>
|
||
<div className="space-y-2">
|
||
<Package className="w-8 h-8 mx-auto text-gray-400" />
|
||
<p className="text-sm font-medium text-gray-700">
|
||
Drag & drop your project ZIP here
|
||
</p>
|
||
<p className="text-xs text-gray-500">
|
||
or click to browse • <strong>.zip</strong> files only • Max 100MB
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept=".zip,.tar.gz,.tgz"
|
||
className="hidden"
|
||
onChange={(e) => {
|
||
const file = e.target.files?.[0];
|
||
if (file) handleFileSelect(file);
|
||
e.target.value = '';
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* WordPress deployment mode — shown when WordPress is selected */}
|
||
{form.runtime === 'wordpress' && (
|
||
<div className="space-y-4">
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">Deployment Mode</label>
|
||
<div className="grid grid-cols-3 gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => { setWpMode('fresh'); setWpContentFile(null); }}
|
||
className={`p-4 rounded-xl border-2 text-left transition-colors ${
|
||
wpMode === 'fresh' ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<Rocket className="w-5 h-5 text-blue-600" />
|
||
<p className="mt-2 font-semibold text-sm text-gray-900">Fresh Install</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
Start with a clean WordPress. Install themes & plugins via the admin panel.
|
||
</p>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => { setWpMode('migrate'); setWpContentFile(null); }}
|
||
className={`p-4 rounded-xl border-2 text-left transition-colors ${
|
||
wpMode === 'migrate' ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<Upload className="w-5 h-5 text-emerald-600" />
|
||
<p className="mt-2 font-semibold text-sm text-gray-900">Migrate Existing Site</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
Upload your WordPress files (wp-content, themes, plugins) and optionally a DB dump.
|
||
</p>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => { setWpMode('public_html'); setWpContentFile(null); }}
|
||
className={`p-4 rounded-xl border-2 text-left transition-colors ${
|
||
wpMode === 'public_html' ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<FolderUp className="w-5 h-5 text-purple-600" />
|
||
<p className="mt-2 font-semibold text-sm text-gray-900">Upload public_html</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
Upload your entire public_html directory (full WordPress root) and deploy.
|
||
</p>
|
||
</button>
|
||
</div>
|
||
|
||
{wpMode === 'fresh' && (
|
||
<div className="p-4 bg-blue-50/50 border border-blue-200 rounded-xl">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<Hexagon className="w-5 h-5 text-blue-600" />
|
||
<h3 className="text-sm font-semibold text-gray-800">WordPress (Official Image)</h3>
|
||
</div>
|
||
<p className="text-xs text-gray-500">
|
||
A fresh WordPress installation will be deployed using the official Docker image.
|
||
You can install themes and plugins via the WordPress admin panel after deployment.
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{wpMode === 'migrate' && (
|
||
<div className="space-y-3">
|
||
<div className="p-3 bg-amber-50 border border-amber-200 rounded-xl">
|
||
<p className="text-xs text-gray-600">
|
||
<strong>Upload a ZIP</strong> containing your WordPress files. Supported structures:
|
||
</p>
|
||
<ul className="text-xs text-gray-500 mt-1 ml-4 list-disc space-y-0.5">
|
||
<li><code className="bg-amber-100 px-1 rounded">wp-content/</code> — themes, plugins, uploads</li>
|
||
<li><code className="bg-amber-100 px-1 rounded">wp-config.php</code> — custom configuration (optional)</li>
|
||
<li>Any custom <code className="bg-amber-100 px-1 rounded">.php</code> files at root level</li>
|
||
</ul>
|
||
<p className="text-xs text-gray-500 mt-1.5">
|
||
You can also upload a SQL database dump in the next step to restore your data.
|
||
</p>
|
||
</div>
|
||
|
||
{wpContentFile ? (
|
||
<div className="flex items-center justify-between p-4 bg-green-50 border border-green-200 rounded-xl">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
|
||
<CheckCircle className="w-5 h-5" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-medium text-green-800">{wpContentFile.name}</p>
|
||
<p className="text-xs text-green-600">
|
||
{(wpContentFile.size / (1024 * 1024)).toFixed(2)} MB
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setWpContentFile(null);
|
||
if (wpFileInputRef.current) wpFileInputRef.current.value = '';
|
||
}}
|
||
className="text-sm text-red-500 hover:text-red-700 font-medium"
|
||
>
|
||
Remove
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div
|
||
onDrop={handleWpDrop}
|
||
onDragOver={(e) => { e.preventDefault(); setIsWpDragging(true); }}
|
||
onDragLeave={(e) => { e.preventDefault(); setIsWpDragging(false); }}
|
||
onClick={() => wpFileInputRef.current?.click()}
|
||
className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all ${
|
||
isWpDragging
|
||
? 'border-primary-500 bg-primary-50'
|
||
: 'border-gray-300 hover:border-primary-400 hover:bg-gray-50'
|
||
}`}
|
||
>
|
||
<div className="space-y-2">
|
||
<FolderUp className="w-8 h-8 mx-auto text-gray-400" />
|
||
<p className="text-sm font-medium text-gray-700">
|
||
Drag & drop your WordPress ZIP here
|
||
</p>
|
||
<p className="text-xs text-gray-500">
|
||
ZIP with <strong>wp-content/</strong> folder • Max 200MB
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<input
|
||
ref={wpFileInputRef}
|
||
type="file"
|
||
accept=".zip,.tar.gz,.tgz"
|
||
className="hidden"
|
||
onChange={(e) => {
|
||
const file = e.target.files?.[0];
|
||
if (file) handleWpFileSelect(file);
|
||
e.target.value = '';
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{wpMode === 'public_html' && (
|
||
<div className="space-y-3">
|
||
<div className="p-3 bg-purple-50 border border-purple-200 rounded-xl">
|
||
<p className="text-xs text-gray-600">
|
||
<strong>Upload a ZIP</strong> of your entire <code className="bg-purple-100 px-1 rounded">public_html</code> directory (the full WordPress root):
|
||
</p>
|
||
<ul className="text-xs text-gray-500 mt-1 ml-4 list-disc space-y-0.5">
|
||
<li><code className="bg-purple-100 px-1 rounded">wp-admin/</code>, <code className="bg-purple-100 px-1 rounded">wp-includes/</code>, <code className="bg-purple-100 px-1 rounded">wp-content/</code></li>
|
||
<li><code className="bg-purple-100 px-1 rounded">wp-config.php</code>, <code className="bg-purple-100 px-1 rounded">.htaccess</code>, and all root PHP files</li>
|
||
</ul>
|
||
<p className="text-xs text-gray-500 mt-1.5">
|
||
The system auto-detects the full WordPress root and deploys it accordingly.
|
||
You can also upload a SQL database dump in the next step to restore your data.
|
||
</p>
|
||
</div>
|
||
|
||
{wpContentFile ? (
|
||
<div className="flex items-center justify-between p-4 bg-green-50 border border-green-200 rounded-xl">
|
||
<div className="flex items-center space-x-3">
|
||
<div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
|
||
<CheckCircle className="w-5 h-5" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-medium text-green-800">{wpContentFile.name}</p>
|
||
<p className="text-xs text-green-600">
|
||
{(wpContentFile.size / (1024 * 1024)).toFixed(2)} MB
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setWpContentFile(null);
|
||
if (wpFileInputRef.current) wpFileInputRef.current.value = '';
|
||
}}
|
||
className="text-sm text-red-500 hover:text-red-700 font-medium"
|
||
>
|
||
Remove
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div
|
||
onDrop={handleWpDrop}
|
||
onDragOver={(e) => { e.preventDefault(); setIsWpDragging(true); }}
|
||
onDragLeave={(e) => { e.preventDefault(); setIsWpDragging(false); }}
|
||
onClick={() => wpFileInputRef.current?.click()}
|
||
className={`border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all ${
|
||
isWpDragging
|
||
? 'border-primary-500 bg-primary-50'
|
||
: 'border-gray-300 hover:border-primary-400 hover:bg-gray-50'
|
||
}`}
|
||
>
|
||
<div className="space-y-2">
|
||
<FolderUp className="w-8 h-8 mx-auto text-gray-400" />
|
||
<p className="text-sm font-medium text-gray-700">
|
||
Drag & drop your public_html ZIP here
|
||
</p>
|
||
<p className="text-xs text-gray-500">
|
||
ZIP with full WordPress root (<strong>wp-admin/</strong>, <strong>wp-content/</strong>, ...) • Max 200MB
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
<input
|
||
ref={wpFileInputRef}
|
||
type="file"
|
||
accept=".zip,.tar.gz,.tgz"
|
||
className="hidden"
|
||
onChange={(e) => {
|
||
const file = e.target.files?.[0];
|
||
if (file) handleWpFileSelect(file);
|
||
e.target.value = '';
|
||
}}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Step 1: Versions & Database */}
|
||
{step === 1 && (
|
||
<div className="space-y-6">
|
||
<h2 className="text-lg font-semibold text-gray-900">Versions & Database</h2>
|
||
|
||
{/* Runtime Version Selectors */}
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
{form.runtime === 'nodejs' && (
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Node.js Version</label>
|
||
<select
|
||
className="input-field"
|
||
value={form.runtimeVersion || '20'}
|
||
onChange={(e) => setForm({ ...form, runtimeVersion: e.target.value })}
|
||
>
|
||
<option value="22">Node.js 22 (LTS)</option>
|
||
<option value="20">Node.js 20 (LTS)</option>
|
||
<option value="18">Node.js 18</option>
|
||
<option value="16">Node.js 16</option>
|
||
</select>
|
||
</div>
|
||
)}
|
||
{form.runtime === 'laravel' && (
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">PHP Version</label>
|
||
<select
|
||
className="input-field"
|
||
value={form.phpVersion || '8.3'}
|
||
onChange={(e) => setForm({ ...form, phpVersion: e.target.value })}
|
||
>
|
||
<option value="8.4">PHP 8.4</option>
|
||
<option value="8.3">PHP 8.3 (Recommended)</option>
|
||
<option value="8.2">PHP 8.2</option>
|
||
<option value="8.1">PHP 8.1</option>
|
||
</select>
|
||
</div>
|
||
)}
|
||
{form.runtime === 'wordpress' && (
|
||
<>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">WordPress Version</label>
|
||
<select
|
||
className="input-field"
|
||
value={form.runtimeVersion || '6.7'}
|
||
onChange={(e) => setForm({ ...form, runtimeVersion: e.target.value })}
|
||
>
|
||
<option value="6.7">WordPress 6.7 (Latest)</option>
|
||
<option value="6.6">WordPress 6.6</option>
|
||
<option value="6.5">WordPress 6.5</option>
|
||
<option value="6.4">WordPress 6.4</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">PHP Version</label>
|
||
<select
|
||
className="input-field"
|
||
value={form.phpVersion || '8.3'}
|
||
onChange={(e) => setForm({ ...form, phpVersion: e.target.value })}
|
||
>
|
||
<option value="8.3">PHP 8.3 (Recommended)</option>
|
||
<option value="8.2">PHP 8.2</option>
|
||
<option value="8.1">PHP 8.1</option>
|
||
</select>
|
||
</div>
|
||
</>
|
||
)}
|
||
{form.runtime === 'go' && (
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Go Version</label>
|
||
<select
|
||
className="input-field"
|
||
value={form.runtimeVersion || '1.22'}
|
||
onChange={(e) => setForm({ ...form, runtimeVersion: e.target.value })}
|
||
>
|
||
<option value="1.23">Go 1.23 (Latest)</option>
|
||
<option value="1.22">Go 1.22 (Recommended)</option>
|
||
<option value="1.21">Go 1.21</option>
|
||
</select>
|
||
</div>
|
||
)}
|
||
{(form.runtime === 'python' || form.runtime === 'django') && (
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Python Version</label>
|
||
<select
|
||
className="input-field"
|
||
value={form.runtimeVersion || '3.12'}
|
||
onChange={(e) => setForm({ ...form, runtimeVersion: e.target.value })}
|
||
>
|
||
<option value="3.13">Python 3.13 (Latest)</option>
|
||
<option value="3.12">Python 3.12 (Recommended)</option>
|
||
<option value="3.11">Python 3.11</option>
|
||
<option value="3.10">Python 3.10</option>
|
||
</select>
|
||
</div>
|
||
)}
|
||
{form.runtime === 'php' && (
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">PHP Version</label>
|
||
<select
|
||
className="input-field"
|
||
value={form.phpVersion || '8.3'}
|
||
onChange={(e) => setForm({ ...form, phpVersion: e.target.value })}
|
||
>
|
||
<option value="8.4">PHP 8.4 (Latest)</option>
|
||
<option value="8.3">PHP 8.3 (Recommended)</option>
|
||
<option value="8.2">PHP 8.2</option>
|
||
<option value="8.1">PHP 8.1</option>
|
||
</select>
|
||
</div>
|
||
)}
|
||
{form.runtime === 'dotnet' && (
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">.NET Version</label>
|
||
<select
|
||
className="input-field"
|
||
value={form.runtimeVersion || '8.0'}
|
||
onChange={(e) => setForm({ ...form, runtimeVersion: e.target.value })}
|
||
>
|
||
<option value="9.0">.NET 9.0 (Latest)</option>
|
||
<option value="8.0">.NET 8.0 LTS (Recommended)</option>
|
||
<option value="7.0">.NET 7.0</option>
|
||
<option value="6.0">.NET 6.0 LTS</option>
|
||
</select>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-3">
|
||
Database
|
||
{form.runtime === 'wordpress' && (
|
||
<span className="text-xs text-blue-500 mr-2"> — WordPress requires MySQL/MariaDB</span>
|
||
)}
|
||
</label>
|
||
<div className="grid grid-cols-3 sm:grid-cols-5 gap-3 sm:gap-4">
|
||
{[
|
||
{ value: 'none', label: 'None', icon: <XCircle className="w-6 h-6 text-gray-400" /> },
|
||
{ value: 'postgresql', label: 'PostgreSQL', icon: <svg className="w-6 h-6 text-blue-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19C3 20.66 7.03 22 12 22C16.97 22 21 20.66 21 19V5"/><path d="M3 12C3 13.66 7.03 15 12 15C16.97 15 21 13.66 21 12"/></svg> },
|
||
{ value: 'mysql', label: 'MySQL', icon: <svg className="w-6 h-6 text-orange-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19C3 20.66 7.03 22 12 22C16.97 22 21 20.66 21 19V5"/><path d="M3 12C3 13.66 7.03 15 12 15C16.97 15 21 13.66 21 12"/></svg> },
|
||
{ value: 'mariadb', label: 'MariaDB', icon: <svg className="w-6 h-6 text-teal-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19C3 20.66 7.03 22 12 22C16.97 22 21 20.66 21 19V5"/><path d="M3 12C3 13.66 7.03 15 12 15C16.97 15 21 13.66 21 12"/></svg> },
|
||
{ value: 'mongodb', label: 'MongoDB', icon: <svg className="w-6 h-6 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2L12 22M12 2C7.58 4 5 8 5 12C5 16 7.58 20 12 22M12 2C16.42 4 19 8 19 12C19 16 16.42 20 12 22"/></svg> },
|
||
].map((opt) => {
|
||
const isWordPress = form.runtime === 'wordpress';
|
||
const disabled = isWordPress && !['mysql', 'mariadb'].includes(opt.value);
|
||
return (
|
||
<button
|
||
key={opt.value}
|
||
type="button"
|
||
disabled={disabled}
|
||
onClick={() => {
|
||
let dbVersion = '';
|
||
if (opt.value === 'postgresql') dbVersion = '16';
|
||
else if (opt.value === 'mysql') dbVersion = '8.0';
|
||
else if (opt.value === 'mariadb') dbVersion = '11.4';
|
||
else if (opt.value === 'mongodb') dbVersion = '7.0';
|
||
setForm({ ...form, databaseType: opt.value as any, dbVersion });
|
||
}}
|
||
className={`p-4 rounded-xl border-2 text-center transition-colors ${
|
||
form.databaseType === opt.value ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300'
|
||
} ${disabled ? 'opacity-40 cursor-not-allowed' : ''}`}
|
||
>
|
||
<div className="flex justify-center">{opt.icon}</div>
|
||
<p className="mt-2 font-semibold text-sm text-gray-900">{opt.label}</p>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Database Version — shown when a DB is selected */}
|
||
{form.databaseType !== 'none' && (
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||
{form.databaseType === 'postgresql' ? 'PostgreSQL' : form.databaseType === 'mysql' ? 'MySQL' : form.databaseType === 'mariadb' ? 'MariaDB' : 'MongoDB'} Version
|
||
</label>
|
||
<select
|
||
className="input-field max-w-xs"
|
||
value={form.dbVersion || (form.databaseType === 'postgresql' ? '16' : form.databaseType === 'mysql' ? '8.0' : form.databaseType === 'mariadb' ? '11.4' : '7.0')}
|
||
onChange={(e) => setForm({ ...form, dbVersion: e.target.value })}
|
||
>
|
||
{form.databaseType === 'postgresql' ? (
|
||
<>
|
||
<option value="17">PostgreSQL 17 (Latest)</option>
|
||
<option value="16">PostgreSQL 16 (LTS)</option>
|
||
<option value="15">PostgreSQL 15</option>
|
||
<option value="14">PostgreSQL 14</option>
|
||
</>
|
||
) : form.databaseType === 'mysql' ? (
|
||
<>
|
||
<option value="9.0">MySQL 9.0 (Latest)</option>
|
||
<option value="8.4">MySQL 8.4 (LTS)</option>
|
||
<option value="8.0">MySQL 8.0</option>
|
||
<option value="5.7">MySQL 5.7</option>
|
||
</>
|
||
) : form.databaseType === 'mariadb' ? (
|
||
<>
|
||
<option value="11.4">MariaDB 11.4 (LTS)</option>
|
||
<option value="11.3">MariaDB 11.3</option>
|
||
<option value="10.11">MariaDB 10.11 (LTS)</option>
|
||
<option value="10.6">MariaDB 10.6</option>
|
||
</>
|
||
) : (
|
||
<>
|
||
<option value="7.0">MongoDB 7.0 (Latest)</option>
|
||
<option value="6.0">MongoDB 6.0</option>
|
||
<option value="5.0">MongoDB 5.0</option>
|
||
</>
|
||
)}
|
||
</select>
|
||
</div>
|
||
)}
|
||
|
||
{/* Database Credentials — shown when a DB is selected */}
|
||
{form.databaseType !== 'none' && (
|
||
<div className="p-4 bg-blue-50/50 border border-blue-200 rounded-xl space-y-4">
|
||
<div className="flex items-center gap-2">
|
||
<Database className="w-5 h-5 text-blue-500" />
|
||
<h3 className="text-sm font-semibold text-gray-800">Database Credentials</h3>
|
||
<span className="text-xs text-gray-400">(optional — auto-generated if empty)</span>
|
||
</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-xs text-gray-500 mb-1">Username</label>
|
||
<input
|
||
className="input-field"
|
||
placeholder="appuser"
|
||
value={form.dbUsername || ''}
|
||
onChange={(e) => setForm({ ...form, dbUsername: e.target.value })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-xs text-gray-500 mb-1">Password</label>
|
||
<div className="relative">
|
||
<input
|
||
className="input-field pr-20"
|
||
type={showDbPassword ? 'text' : 'password'}
|
||
placeholder="Auto-generated"
|
||
value={form.dbPassword || ''}
|
||
onChange={(e) => setForm({ ...form, dbPassword: e.target.value })}
|
||
/>
|
||
<div className="absolute inset-y-0 right-0 flex items-center gap-1 pr-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||
let pass = '';
|
||
for (let i = 0; i < 20; i++) pass += chars.charAt(Math.floor(Math.random() * chars.length));
|
||
setForm({ ...form, dbPassword: pass });
|
||
setShowDbPassword(true);
|
||
}}
|
||
className="p-1 text-gray-400 hover:text-blue-500 transition-colors"
|
||
title="Generate random password"
|
||
>
|
||
<RefreshCw className="w-4 h-4" />
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowDbPassword(!showDbPassword)}
|
||
className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
|
||
>
|
||
{showDbPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p className="text-xs text-gray-400">
|
||
These credentials are used for internal cluster communication only. The database is not exposed externally.
|
||
</p>
|
||
{/* Optional DB dump upload at creation time */}
|
||
<div className="pt-2">
|
||
<label className="block text-xs text-gray-500 mb-2">Optional: Upload DB dump to restore at creation</label>
|
||
<div
|
||
onDrop={(e) => {
|
||
e.preventDefault();
|
||
setIsDragging(false);
|
||
const f = e.dataTransfer.files[0];
|
||
if (f) {
|
||
if (!f.name.endsWith('.sql') && !f.name.endsWith('.gz') && !f.name.endsWith('.dump')) {
|
||
toast.error('Allowed: .sql, .gz, .dump');
|
||
} else if (f.size > 500 * 1024 * 1024) {
|
||
toast.error('Max 500MB');
|
||
} else {
|
||
setDbDumpFile(f);
|
||
const sizeGb = Math.max(1, Math.ceil((f.size / (1024 * 1024 * 1024)) * 3));
|
||
setForm((prev) => ({ ...prev, dbStorageSize: String(sizeGb) }));
|
||
}
|
||
}
|
||
}}
|
||
onDragOver={(e) => e.preventDefault()}
|
||
onClick={() => dbDumpInputRef.current?.click()}
|
||
className={`border-2 border-dashed rounded-xl p-3 text-center cursor-pointer transition-colors ${dbDumpFile ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-blue-400 hover:bg-gray-50'}`}
|
||
>
|
||
<input
|
||
ref={dbDumpInputRef}
|
||
type="file"
|
||
accept=".sql,.gz,.dump"
|
||
className="hidden"
|
||
onChange={(e) => {
|
||
const f = e.target.files?.[0];
|
||
if (f) {
|
||
if (!f.name.endsWith('.sql') && !f.name.endsWith('.gz') && !f.name.endsWith('.dump')) {
|
||
toast.error('Allowed: .sql, .gz, .dump');
|
||
} else if (f.size > 500 * 1024 * 1024) {
|
||
toast.error('Max 500MB');
|
||
} else {
|
||
setDbDumpFile(f);
|
||
const sizeGb = Math.max(1, Math.ceil((f.size / (1024 * 1024 * 1024)) * 3));
|
||
setForm((prev) => ({ ...prev, dbStorageSize: String(sizeGb) }));
|
||
}
|
||
}
|
||
e.target.value = '';
|
||
}}
|
||
/>
|
||
{dbDumpFile ? (
|
||
<div className="flex items-center justify-between">
|
||
<div className="text-sm text-left">
|
||
<p className="font-medium text-gray-800">{dbDumpFile.name}</p>
|
||
<p className="text-xs text-gray-500">{(dbDumpFile.size / (1024 * 1024)).toFixed(2)} MB</p>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<button type="button" onClick={() => setDbDumpFile(null)} className="text-sm text-red-500">Remove</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div>
|
||
<p className="text-sm text-gray-700">Upload a SQL dump to be restored after the database is created</p>
|
||
<p className="text-xs text-gray-400">Optional • Max 500MB</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Database Storage Size */}
|
||
<div className="pt-2">
|
||
<label className="block text-xs text-gray-500 mb-2">Database Storage Size</label>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current = parseInt(form.dbStorageSize || '1', 10);
|
||
if (current > 1) setForm({ ...form, dbStorageSize: String(current - 1) });
|
||
}}
|
||
disabled={parseInt(form.dbStorageSize || '1', 10) <= 1}
|
||
className="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
−
|
||
</button>
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
max={100}
|
||
value={form.dbStorageSize || '1'}
|
||
onChange={(e) => {
|
||
const val = Math.max(1, Math.min(100, parseInt(e.target.value, 10) || 1));
|
||
setForm({ ...form, dbStorageSize: String(val) });
|
||
}}
|
||
className="w-16 text-center py-2 border-x border-gray-300 text-sm font-semibold focus:outline-none"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current = parseInt(form.dbStorageSize || '1', 10);
|
||
if (current < 100) setForm({ ...form, dbStorageSize: String(current + 1) });
|
||
}}
|
||
disabled={parseInt(form.dbStorageSize || '1', 10) >= 100}
|
||
className="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
<span className="text-sm font-medium text-gray-700">GB</span>
|
||
{dbDumpFile && (
|
||
<span className="text-xs text-blue-500">
|
||
Suggested based on dump size ({(dbDumpFile.size / (1024 * 1024 * 1024)).toFixed(2)} GB)
|
||
</span>
|
||
)}
|
||
</div>
|
||
<p className="mt-1 text-xs text-gray-400">Minimum 1GB • Only expansion is allowed after creation</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Optional Services Section */}
|
||
<div className="bg-purple-50 rounded-xl p-5 border border-purple-200">
|
||
<div className="flex items-center gap-2 mb-4">
|
||
<Server className="w-5 h-5 text-purple-600" />
|
||
<h3 className="font-semibold text-gray-900">Optional Services</h3>
|
||
<span className="text-xs text-gray-400">(Enable additional services for your app)</span>
|
||
</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||
{/* Redis */}
|
||
<button
|
||
type="button"
|
||
onClick={() => setForm({ ...form, enableRedis: !form.enableRedis })}
|
||
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
||
form.enableRedis
|
||
? 'border-red-400 bg-red-50 shadow-sm'
|
||
: 'border-gray-200 bg-white hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${form.enableRedis ? 'bg-red-100' : 'bg-gray-100'}`}>
|
||
<svg className={`w-6 h-6 ${form.enableRedis ? 'text-red-500' : 'text-gray-400'}`} viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 2L2 7L12 12L22 7L12 2ZM2 17L12 22L22 17M2 12L12 17L22 12" stroke="currentColor" strokeWidth="2" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p className="font-semibold text-gray-900">Redis</p>
|
||
<p className="text-xs text-gray-500">In-memory cache & store</p>
|
||
</div>
|
||
</div>
|
||
{form.enableRedis && (
|
||
<div className="mt-3 pt-3 border-t border-red-200 text-xs text-red-600">
|
||
<p>REDIS_HOST, REDIS_PASSWORD, REDIS_URL will be available</p>
|
||
</div>
|
||
)}
|
||
</button>
|
||
|
||
{/* RabbitMQ */}
|
||
<button
|
||
type="button"
|
||
onClick={() => setForm({ ...form, enableRabbitmq: !form.enableRabbitmq })}
|
||
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
||
form.enableRabbitmq
|
||
? 'border-orange-400 bg-orange-50 shadow-sm'
|
||
: 'border-gray-200 bg-white hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${form.enableRabbitmq ? 'bg-orange-100' : 'bg-gray-100'}`}>
|
||
<svg className={`w-6 h-6 ${form.enableRabbitmq ? 'text-orange-500' : 'text-gray-400'}`} viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M21 3H3v18h18V3zM8 17H5v-3h3v3zm5-4h-3v-3h3v3zm5 0h-3v-3h3v3zm0-4h-8V6h8v3z"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p className="font-semibold text-gray-900">RabbitMQ</p>
|
||
<p className="text-xs text-gray-500">Message broker</p>
|
||
</div>
|
||
</div>
|
||
{form.enableRabbitmq && (
|
||
<div className="mt-3 pt-3 border-t border-orange-200 text-xs text-orange-600">
|
||
<p>RABBITMQ_HOST, RABBITMQ_USER, AMQP_URL will be available</p>
|
||
</div>
|
||
)}
|
||
</button>
|
||
|
||
{/* Elasticsearch */}
|
||
<button
|
||
type="button"
|
||
onClick={() => setForm({ ...form, enableElasticsearch: !form.enableElasticsearch })}
|
||
className={`p-4 rounded-xl border-2 text-left transition-all ${
|
||
form.enableElasticsearch
|
||
? 'border-yellow-400 bg-yellow-50 shadow-sm'
|
||
: 'border-gray-200 bg-white hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${form.enableElasticsearch ? 'bg-yellow-100' : 'bg-gray-100'}`}>
|
||
<svg className={`w-6 h-6 ${form.enableElasticsearch ? 'text-yellow-500' : 'text-gray-400'}`} viewBox="0 0 24 24" fill="currentColor">
|
||
<circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="2" fill="none"/>
|
||
<path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" stroke="currentColor" strokeWidth="2"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<p className="font-semibold text-gray-900">Elasticsearch</p>
|
||
<p className="text-xs text-gray-500">Logging & search</p>
|
||
</div>
|
||
</div>
|
||
{form.enableElasticsearch && (
|
||
<div className="mt-3 pt-3 border-t border-yellow-200 text-xs text-yellow-600">
|
||
<p>Logs collected via Fluent Bit sidecar</p>
|
||
</div>
|
||
)}
|
||
</button>
|
||
</div>
|
||
{(form.enableRedis || form.enableRabbitmq || form.enableElasticsearch) && (
|
||
<p className="mt-4 text-xs text-gray-500">
|
||
Each enabled service adds to the monthly cost. Services are deployed in your namespace and not shared.
|
||
</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* App Storage Size (all app types) */}
|
||
<div className="bg-green-50 rounded-xl p-5 border border-green-200">
|
||
<div className="flex items-center gap-2 mb-3">
|
||
<FolderUp className="w-5 h-5 text-green-600" />
|
||
<h3 className="font-semibold text-gray-900">
|
||
{form.runtime === 'wordpress' ? 'Upload Storage (wp-content)'
|
||
: form.runtime === 'laravel' ? 'Storage Directory'
|
||
: 'Application Data Storage'}
|
||
</h3>
|
||
</div>
|
||
<p className="text-sm text-gray-600 mb-4">
|
||
{form.runtime === 'wordpress'
|
||
? 'This space is used for uploads, plugins, themes, and other WordPress files.'
|
||
: form.runtime === 'laravel'
|
||
? 'This space is used for uploads, logs, cache, and other Laravel storage files.'
|
||
: 'This space is used for persistent application data, uploads, and files.'}
|
||
</p>
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex items-center border border-gray-300 rounded-lg overflow-hidden bg-white">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current = parseInt(form.appStorageSize || '2', 10);
|
||
if (current > 1) setForm({ ...form, appStorageSize: String(current - 1) });
|
||
}}
|
||
disabled={parseInt(form.appStorageSize || '2', 10) <= 1}
|
||
className="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
−
|
||
</button>
|
||
<input
|
||
type="number"
|
||
min={1}
|
||
max={100}
|
||
value={form.appStorageSize || '2'}
|
||
onChange={(e) => {
|
||
const val = Math.max(1, Math.min(100, parseInt(e.target.value, 10) || 2));
|
||
setForm({ ...form, appStorageSize: String(val) });
|
||
}}
|
||
className="w-16 text-center py-2 border-x border-gray-300 text-sm font-semibold focus:outline-none"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
const current = parseInt(form.appStorageSize || '2', 10);
|
||
if (current < 100) setForm({ ...form, appStorageSize: String(current + 1) });
|
||
}}
|
||
disabled={parseInt(form.appStorageSize || '2', 10) >= 100}
|
||
className="px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
<span className="text-sm font-medium text-gray-700">GB</span>
|
||
{wpContentFile && form.runtime === 'wordpress' && (
|
||
<span className="text-xs text-green-600">
|
||
Suggested based on wp-content ({(wpContentFile.size / (1024 * 1024 * 1024)).toFixed(2)} GB)
|
||
</span>
|
||
)}
|
||
</div>
|
||
<p className="mt-2 text-xs text-gray-500">Minimum 1GB • Recommended: 2GB or more</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Step 2: Resources */}
|
||
{step === 2 && (
|
||
<div className="space-y-6">
|
||
<h2 className="text-lg font-semibold text-gray-900">Resources & Configuration</h2>
|
||
|
||
{/* Cluster Assignment Mode — Admin only */}
|
||
{isAdmin ? (
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">Cluster Assignment</label>
|
||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4">
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setClusterMode('default');
|
||
setForm({ ...form, clusterId: undefined, poolId: undefined });
|
||
}}
|
||
className={`p-3 rounded-xl border-2 text-center transition-colors ${
|
||
clusterMode === 'default'
|
||
? 'border-primary-500 bg-primary-50'
|
||
: 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<Home className="w-5 h-5 mx-auto text-gray-500" />
|
||
<p className="mt-1 font-semibold text-sm text-gray-900">Default</p>
|
||
<p className="text-xs text-gray-500">Use default cluster</p>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setClusterMode('manual');
|
||
setForm({ ...form, poolId: undefined });
|
||
}}
|
||
className={`p-3 rounded-xl border-2 text-center transition-colors ${
|
||
clusterMode === 'manual'
|
||
? 'border-primary-500 bg-primary-50'
|
||
: 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<Target className="w-5 h-5 mx-auto text-gray-500" />
|
||
<p className="mt-1 font-semibold text-sm text-gray-900">Manual</p>
|
||
<p className="text-xs text-gray-500">Pick a specific cluster</p>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
setClusterMode('pool');
|
||
setForm({ ...form, clusterId: undefined });
|
||
}}
|
||
className={`p-3 rounded-xl border-2 text-center transition-colors ${
|
||
clusterMode === 'pool'
|
||
? 'border-primary-500 bg-primary-50'
|
||
: 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<Scale className="w-5 h-5 mx-auto text-gray-500" />
|
||
<p className="mt-1 font-semibold text-sm text-gray-900">Load Balanced</p>
|
||
<p className="text-xs text-gray-500">Pick a cluster pool</p>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Manual: show cluster list */}
|
||
{clusterMode === 'manual' && (
|
||
<div className="space-y-2">
|
||
{clusters.length === 0 ? (
|
||
<p className="text-sm text-gray-400 text-center py-4">No clusters available</p>
|
||
) : (
|
||
clusters.map((cluster) => (
|
||
<button
|
||
key={cluster.id}
|
||
type="button"
|
||
onClick={() => setForm({ ...form, clusterId: cluster.id })}
|
||
className={`w-full p-3 rounded-xl border-2 text-left transition-colors ${
|
||
form.clusterId === cluster.id
|
||
? 'border-primary-500 bg-primary-50'
|
||
: 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<Server className="w-5 h-5 text-gray-400" />
|
||
<div>
|
||
<p className="font-semibold text-sm text-gray-900">
|
||
{cluster.name}
|
||
{cluster.isDefault && (
|
||
<span className="ml-2 text-xs bg-blue-100 text-blue-700 px-1.5 py-0.5 rounded">Default</span>
|
||
)}
|
||
</p>
|
||
<p className="text-xs text-gray-500">
|
||
{[cluster.provider, cluster.region].filter(Boolean).join(' · ') || 'No region info'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
||
cluster.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'
|
||
}`}>
|
||
{cluster.status}
|
||
</span>
|
||
</div>
|
||
</button>
|
||
))
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Pool: show pool list */}
|
||
{clusterMode === 'pool' && (
|
||
<div className="space-y-2">
|
||
{pools.length === 0 ? (
|
||
<div className="text-center py-4">
|
||
<p className="text-sm text-gray-400">No cluster pools configured</p>
|
||
<p className="text-xs text-gray-400 mt-1">Ask your admin to create a cluster pool</p>
|
||
</div>
|
||
) : (
|
||
pools.map((pool) => (
|
||
<button
|
||
key={pool.id}
|
||
type="button"
|
||
onClick={() => setForm({ ...form, poolId: pool.id })}
|
||
className={`w-full p-3 rounded-xl border-2 text-left transition-colors ${
|
||
form.poolId === pool.id
|
||
? 'border-primary-500 bg-primary-50'
|
||
: 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center space-x-3">
|
||
<Scale className="w-5 h-5 text-gray-400" />
|
||
<div>
|
||
<p className="font-semibold text-sm text-gray-900">{pool.name}</p>
|
||
{pool.description && (
|
||
<p className="text-xs text-gray-500">{pool.description}</p>
|
||
)}
|
||
<div className="flex items-center space-x-2 mt-1">
|
||
<span className="text-xs bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded flex items-center gap-1">
|
||
{pool.strategy === 'least-apps' ? <><BarChart3 className="w-3 h-3" /> Least Apps</> : <><RotateCw className="w-3 h-3" /> Round Robin</>}
|
||
</span>
|
||
<span className="text-xs text-gray-400">
|
||
{pool.clusters.length} cluster{pool.clusters.length !== 1 ? 's' : ''}:
|
||
{' '}{pool.clusters.map((c) => c.name).join(', ')}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
))
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Default: info text */}
|
||
{clusterMode === 'default' && (
|
||
<div className="p-3 bg-gray-50 rounded-xl border border-gray-200">
|
||
<div className="flex items-center space-x-3">
|
||
<Home className="w-5 h-5 text-gray-400" />
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-700">Default cluster will be used</p>
|
||
<p className="text-xs text-gray-500">
|
||
Your app will be deployed to the platform's default cluster
|
||
{clusters.find((c) => c.isDefault) && (
|
||
<> — <strong>{clusters.find((c) => c.isDefault)?.name}</strong></>
|
||
)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className="p-3 bg-gray-50 rounded-xl border border-gray-200">
|
||
<div className="flex items-center space-x-3">
|
||
<Home className="w-5 h-5 text-gray-400" />
|
||
<div>
|
||
<p className="text-sm font-medium text-gray-700">Cluster Assignment</p>
|
||
<p className="text-xs text-gray-500">
|
||
Your app will be automatically deployed to the platform's default cluster
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">CPU Request</label>
|
||
<select className="input-field" value={form.cpuRequest} onChange={(e) => setForm({ ...form, cpuRequest: e.target.value })}>
|
||
<option value="50m">50m (0.05 core)</option>
|
||
<option value="100m">100m (0.1 core)</option>
|
||
<option value="250m">250m (0.25 core)</option>
|
||
<option value="500m">500m (0.5 core)</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">CPU Limit</label>
|
||
<select className="input-field" value={form.cpuLimit} onChange={(e) => setForm({ ...form, cpuLimit: e.target.value })}>
|
||
<option value="250m">250m (0.25 core)</option>
|
||
<option value="500m">500m (0.5 core)</option>
|
||
<option value="1">1 core</option>
|
||
<option value="2">2 cores</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Memory Request</label>
|
||
<select className="input-field" value={form.memoryRequest} onChange={(e) => setForm({ ...form, memoryRequest: e.target.value })}>
|
||
<option value="64Mi">64 Mi</option>
|
||
<option value="128Mi">128 Mi</option>
|
||
<option value="256Mi">256 Mi</option>
|
||
<option value="512Mi">512 Mi</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Memory Limit</label>
|
||
<select className="input-field" value={form.memoryLimit} onChange={(e) => setForm({ ...form, memoryLimit: e.target.value })}>
|
||
<option value="256Mi">256 Mi</option>
|
||
<option value="512Mi">512 Mi</option>
|
||
<option value="1Gi">1 Gi</option>
|
||
<option value="2Gi">2 Gi</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Replicas</label>
|
||
<input
|
||
type="number"
|
||
className="input-field"
|
||
min={1}
|
||
max={10}
|
||
value={form.replicas}
|
||
onChange={(e) => setForm({ ...form, replicas: parseInt(e.target.value) || 1 })}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Port</label>
|
||
<input
|
||
type="number"
|
||
className="input-field"
|
||
value={form.port}
|
||
onChange={(e) => setForm({ ...form, port: parseInt(e.target.value) || 3000 })}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Environment Variables */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">Environment Variables</label>
|
||
<div className="flex flex-col sm:flex-row gap-2 mb-3">
|
||
<input
|
||
className="input-field flex-1"
|
||
placeholder="KEY"
|
||
value={envKey}
|
||
onChange={(e) => setEnvKey(e.target.value)}
|
||
/>
|
||
<input
|
||
className="input-field flex-1"
|
||
placeholder="value"
|
||
value={envVal}
|
||
onChange={(e) => setEnvVal(e.target.value)}
|
||
/>
|
||
<button type="button" onClick={addEnvVar} className="btn-secondary shrink-0">Add</button>
|
||
</div>
|
||
{Object.entries(form.envVars || {}).map(([key, value]) => (
|
||
<div key={key} className="flex items-center justify-between bg-gray-50 rounded-lg px-3 py-2 mb-2">
|
||
<span className="text-sm font-mono">
|
||
<strong>{key}</strong> = {value}
|
||
</span>
|
||
<button onClick={() => removeEnvVar(key)} className="text-red-500 text-sm">Remove</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Step 3: Review */}
|
||
{step === 3 && (
|
||
<div className="space-y-4">
|
||
<h2 className="text-lg font-semibold text-gray-900">Review & Deploy</h2>
|
||
<div className="bg-gray-50 rounded-xl p-5 sm:p-6 space-y-3">
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Name</span>
|
||
<span className="text-sm font-medium">{form.name}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Runtime</span>
|
||
<span className="text-sm font-medium">
|
||
{form.runtime}
|
||
{form.runtime === 'nodejs' && form.runtimeVersion ? ` v${form.runtimeVersion}` : ''}
|
||
{form.runtime === 'wordpress' && form.runtimeVersion ? ` v${form.runtimeVersion}` : ''}
|
||
{(form.runtime === 'laravel' || form.runtime === 'wordpress') && form.phpVersion ? ` — PHP ${form.phpVersion}` : ''}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Database</span>
|
||
<span className="text-sm font-medium">
|
||
{form.databaseType}
|
||
{form.databaseType !== 'none' && form.dbVersion ? ` v${form.dbVersion}` : ''}
|
||
</span>
|
||
</div>
|
||
{form.databaseType !== 'none' && (
|
||
<>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">DB Username</span>
|
||
<span className="text-sm font-medium">{form.dbUsername || 'appuser (default)'}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">DB Password</span>
|
||
<span className="text-sm font-medium">{form.dbPassword ? '••••••••' : 'Auto-generated'}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">DB Storage</span>
|
||
<span className="text-sm font-medium">{form.dbStorageSize || '1'} GB</span>
|
||
</div>
|
||
{dbDumpFile && (
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">DB Dump</span>
|
||
<span className="text-sm font-medium">{dbDumpFile.name} ({(dbDumpFile.size / (1024 * 1024)).toFixed(1)} MB)</span>
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Source</span>
|
||
<span className="text-sm font-medium">
|
||
{form.runtime === 'wordpress'
|
||
? wpMode === 'migrate' && wpContentFile
|
||
? `Migrate: ${wpContentFile.name} (${(wpContentFile.size / (1024 * 1024)).toFixed(1)} MB)`
|
||
: 'WordPress (Fresh Install)'
|
||
: sourceMethod === 'upload'
|
||
? zipFile
|
||
? zipFile.name
|
||
: '—'
|
||
: form.gitUrl || '—'}
|
||
</span>
|
||
</div>
|
||
{form.runtime !== 'wordpress' && sourceMethod === 'git' && form.gitBranch && (
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Branch</span>
|
||
<span className="text-sm font-medium">{form.gitBranch}</span>
|
||
</div>
|
||
)}
|
||
{form.runtime !== 'wordpress' && sourceMethod === 'git' && form.gitToken && (
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Auth</span>
|
||
<span className="text-sm font-medium text-green-600">Token provided</span>
|
||
</div>
|
||
)}
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Cluster</span>
|
||
<span className="text-sm font-medium">
|
||
{isAdmin && clusterMode === 'manual' && form.clusterId
|
||
? `${clusters.find((c) => c.id === form.clusterId)?.name || form.clusterId}`
|
||
: isAdmin && clusterMode === 'pool' && form.poolId
|
||
? `${pools.find((p) => p.id === form.poolId)?.name || 'Pool'} (Load Balanced)`
|
||
: 'Default Cluster'}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">CPU</span>
|
||
<span className="text-sm font-medium">{form.cpuRequest} / {form.cpuLimit}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Memory</span>
|
||
<span className="text-sm font-medium">{form.memoryRequest} / {form.memoryLimit}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Replicas</span>
|
||
<span className="text-sm font-medium">{form.replicas}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Port</span>
|
||
<span className="text-sm font-medium">{form.port}</span>
|
||
</div>
|
||
{(form.enableRedis || form.enableRabbitmq || form.enableElasticsearch) && (
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Optional Services</span>
|
||
<span className="text-sm font-medium">
|
||
{[
|
||
form.enableRedis && 'Redis',
|
||
form.enableRabbitmq && 'RabbitMQ',
|
||
form.enableElasticsearch && 'Elasticsearch',
|
||
].filter(Boolean).join(', ')}
|
||
</span>
|
||
</div>
|
||
)}
|
||
{Object.keys(form.envVars || {}).length > 0 && (
|
||
<div className="flex justify-between">
|
||
<span className="text-sm text-gray-500">Env Vars</span>
|
||
<span className="text-sm font-medium">{Object.keys(form.envVars!).length} defined</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Cost Breakdown */}
|
||
<div className="bg-gradient-to-br from-emerald-50 to-teal-50 rounded-xl p-5 sm:p-6 border border-emerald-200">
|
||
<h3 className="text-sm font-semibold text-gray-700 flex items-center gap-2 mb-3">
|
||
<DollarSign className="w-4 h-4 text-emerald-600" /> Cost Estimate
|
||
</h3>
|
||
{costLoading ? (
|
||
<div className="text-sm text-gray-400 text-center py-3">Calculating...</div>
|
||
) : costData && costData.monthly > 0 ? (
|
||
<div className="space-y-3">
|
||
{/* Billing cycle selector */}
|
||
<div className="grid grid-cols-3 gap-2">
|
||
{(['hourly', 'monthly', 'yearly'] as BillingCycle[]).map((cycle) => (
|
||
<button
|
||
key={cycle}
|
||
type="button"
|
||
onClick={() => setSelectedCycle(cycle)}
|
||
className={`rounded-lg p-3 text-center transition-all ${
|
||
selectedCycle === cycle
|
||
? 'bg-white ring-2 ring-emerald-400 shadow-md'
|
||
: 'bg-white/60 hover:bg-white'
|
||
}`}
|
||
>
|
||
<p className="text-xs text-gray-500">
|
||
{cycle === 'hourly' ? 'Hourly' : cycle === 'monthly' ? 'Monthly' : 'Yearly'}
|
||
</p>
|
||
<p className="text-lg font-bold text-emerald-700">
|
||
{Number(costData[cycle]).toLocaleString('en-US')}
|
||
</p>
|
||
<p className="text-xs text-gray-400">Toman</p>
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{costData.breakdown && costData.breakdown.length > 0 && (
|
||
<div className="mt-2 pt-3 border-t border-emerald-200/50">
|
||
<p className="text-xs font-medium text-gray-500 mb-2">Breakdown</p>
|
||
{costData.breakdown.map((item, i) => (
|
||
<div key={i} className="flex justify-between text-xs py-1">
|
||
<span className="text-gray-600">{item.label}</span>
|
||
<span className="text-gray-900 font-medium">
|
||
{Number(item[selectedCycle]).toLocaleString('en-US')} T/{selectedCycle === 'hourly' ? 'hr' : selectedCycle === 'monthly' ? 'mo' : 'yr'}
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
) : (
|
||
<div className="text-sm text-gray-400 text-center py-3">No pricing plans defined yet</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Payment Method */}
|
||
{costData && costData.monthly > 0 && (
|
||
<div className="bg-white rounded-xl p-5 border border-gray-200">
|
||
<h3 className="text-sm font-semibold text-gray-700 mb-3">Payment Method</h3>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => setPaymentMethod('wallet')}
|
||
className={`p-4 rounded-xl border-2 text-left transition-colors ${
|
||
paymentMethod === 'wallet' ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<Wallet className="w-5 h-5 text-primary-600" />
|
||
<p className="mt-2 font-semibold text-sm text-gray-900">Pay from Wallet</p>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
Balance: {Number(walletBalance).toLocaleString('en-US')} T
|
||
{!hasEnoughBalance && <span className="text-red-500 block mt-0.5">Insufficient balance</span>}
|
||
</p>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setPaymentMethod('gateway')}
|
||
className={`p-4 rounded-xl border-2 text-left transition-colors ${
|
||
paymentMethod === 'gateway' ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300'
|
||
}`}
|
||
>
|
||
<CreditCard className="w-5 h-5 text-emerald-600" />
|
||
<p className="mt-2 font-semibold text-sm text-gray-900">Pay Now</p>
|
||
<p className="text-xs text-gray-500 mt-1">Online payment gateway</p>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="mt-4 p-3 bg-gray-50 rounded-lg flex items-center justify-between">
|
||
<span className="text-sm text-gray-600">Amount to pay ({selectedCycle})</span>
|
||
<span className="text-lg font-bold text-gray-900">{Number(payAmount).toLocaleString('en-US')} Toman</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Navigation */}
|
||
<div className="flex justify-between mt-8 pt-6 border-t border-gray-100">
|
||
<button
|
||
onClick={() => setStep(step - 1)}
|
||
disabled={step === 0}
|
||
className="btn-ghost disabled:opacity-0 disabled:pointer-events-none"
|
||
>
|
||
← Back
|
||
</button>
|
||
{step < steps.length - 1 ? (
|
||
<button
|
||
onClick={() => setStep(step + 1)}
|
||
disabled={!canNext()}
|
||
className="btn-primary disabled:opacity-50"
|
||
>
|
||
Next →
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={() => {
|
||
if (!costData || costData.monthly === 0) {
|
||
// No pricing — deploy directly
|
||
handleSubmit();
|
||
} else if (paymentMethod === 'wallet') {
|
||
if (!hasEnoughBalance) {
|
||
toast.error('Insufficient wallet balance. Please top up or use payment gateway.');
|
||
return;
|
||
}
|
||
walletPayMutation.mutate();
|
||
} else {
|
||
gatewayPayMutation.mutate();
|
||
}
|
||
}}
|
||
disabled={createMutation.isPending || walletPayMutation.isPending || gatewayPayMutation.isPending}
|
||
className="btn-primary disabled:opacity-50"
|
||
>
|
||
{(createMutation.isPending || walletPayMutation.isPending || gatewayPayMutation.isPending)
|
||
? uploadProgress > 0 && uploadProgress < 100
|
||
? `Uploading... ${uploadProgress}%`
|
||
: 'Processing...'
|
||
: costData && costData.monthly > 0
|
||
? <><CreditCard className="w-4 h-4 inline" /> Pay & Deploy</>
|
||
: <><Rocket className="w-4 h-4 inline" /> Deploy Application</>}
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Deploy Progress Overlay */}
|
||
{deployStage !== 'idle' && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
||
<div className="bg-white rounded-2xl shadow-2xl p-8 max-w-md w-full mx-4 space-y-6">
|
||
<div className="text-center">
|
||
{deployStage === 'error' ? (
|
||
<XCircle className="w-12 h-12 text-red-500 mx-auto mb-3" />
|
||
) : deployStage === 'done' ? (
|
||
<CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-3" />
|
||
) : (
|
||
<Loader2 className="w-12 h-12 text-primary-600 mx-auto mb-3 animate-spin" />
|
||
)}
|
||
<h3 className="text-lg font-semibold text-gray-900">
|
||
{deployStage === 'error' ? 'Deployment Failed' : deployStage === 'done' ? 'Success!' : 'Deploying Application'}
|
||
</h3>
|
||
<p className="text-sm text-gray-500 mt-1">{stageLabels[deployStage]}</p>
|
||
</div>
|
||
|
||
{/* Stage Progress Steps */}
|
||
<div className="space-y-3">
|
||
{/* Creating */}
|
||
<div className="flex items-center gap-3">
|
||
{deployStage === 'creating' ? (
|
||
<Loader2 className="w-5 h-5 text-primary-600 animate-spin shrink-0" />
|
||
) : ['uploading-source', 'uploading-db', 'paying', 'deploying', 'done'].includes(deployStage) ? (
|
||
<CheckCircle className="w-5 h-5 text-green-500 shrink-0" />
|
||
) : deployStage === 'error' ? (
|
||
<XCircle className="w-5 h-5 text-red-400 shrink-0" />
|
||
) : (
|
||
<div className="w-5 h-5 rounded-full border-2 border-gray-200 shrink-0" />
|
||
)}
|
||
<span className={`text-sm ${deployStage === 'creating' ? 'text-gray-900 font-medium' : 'text-gray-500'}`}>
|
||
Creating application
|
||
</span>
|
||
</div>
|
||
|
||
{/* Uploading source (only if we have a file) */}
|
||
{((form.runtime === 'wordpress' && (wpMode === 'migrate' || wpMode === 'public_html') && wpContentFile) || (form.runtime !== 'wordpress' && sourceMethod === 'upload' && zipFile)) && (
|
||
<div className="space-y-1">
|
||
<div className="flex items-center gap-3">
|
||
{deployStage === 'uploading-source' ? (
|
||
<Loader2 className="w-5 h-5 text-primary-600 animate-spin shrink-0" />
|
||
) : ['uploading-db', 'paying', 'deploying', 'done'].includes(deployStage) ? (
|
||
<CheckCircle className="w-5 h-5 text-green-500 shrink-0" />
|
||
) : (
|
||
<div className="w-5 h-5 rounded-full border-2 border-gray-200 shrink-0" />
|
||
)}
|
||
<span className={`text-sm flex-1 ${deployStage === 'uploading-source' ? 'text-gray-900 font-medium' : 'text-gray-500'}`}>
|
||
Uploading source code
|
||
{deployStage === 'uploading-source' && uploadProgress > 0 && (
|
||
<span className="text-primary-600 font-semibold ml-2">{uploadProgress}%</span>
|
||
)}
|
||
</span>
|
||
</div>
|
||
{deployStage === 'uploading-source' && (
|
||
<div className="ml-8 h-2 bg-gray-100 rounded-full overflow-hidden">
|
||
<div
|
||
className="h-full bg-primary-500 rounded-full transition-all duration-300 ease-out"
|
||
style={{ width: `${uploadProgress}%` }}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Uploading DB dump (only if we have a dump) */}
|
||
{dbDumpFile && form.databaseType !== 'none' && (
|
||
<div className="space-y-1">
|
||
<div className="flex items-center gap-3">
|
||
{deployStage === 'uploading-db' ? (
|
||
<Loader2 className="w-5 h-5 text-primary-600 animate-spin shrink-0" />
|
||
) : ['paying', 'deploying', 'done'].includes(deployStage) ? (
|
||
<CheckCircle className="w-5 h-5 text-green-500 shrink-0" />
|
||
) : (
|
||
<div className="w-5 h-5 rounded-full border-2 border-gray-200 shrink-0" />
|
||
)}
|
||
<span className={`text-sm flex-1 ${deployStage === 'uploading-db' ? 'text-gray-900 font-medium' : 'text-gray-500'}`}>
|
||
Uploading database dump
|
||
{deployStage === 'uploading-db' && dbUploadProgress > 0 && (
|
||
<span className="text-primary-600 font-semibold ml-2">{dbUploadProgress}%</span>
|
||
)}
|
||
</span>
|
||
</div>
|
||
{deployStage === 'uploading-db' && (
|
||
<div className="ml-8 h-2 bg-gray-100 rounded-full overflow-hidden">
|
||
<div
|
||
className="h-full bg-primary-500 rounded-full transition-all duration-300 ease-out"
|
||
style={{ width: `${dbUploadProgress}%` }}
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Payment (only if cost > 0) */}
|
||
{costData && costData.monthly > 0 && (
|
||
<div className="flex items-center gap-3">
|
||
{deployStage === 'paying' ? (
|
||
<Loader2 className="w-5 h-5 text-primary-600 animate-spin shrink-0" />
|
||
) : ['deploying', 'done'].includes(deployStage) ? (
|
||
<CheckCircle className="w-5 h-5 text-green-500 shrink-0" />
|
||
) : (
|
||
<div className="w-5 h-5 rounded-full border-2 border-gray-200 shrink-0" />
|
||
)}
|
||
<span className={`text-sm ${deployStage === 'paying' ? 'text-gray-900 font-medium' : 'text-gray-500'}`}>
|
||
Processing payment
|
||
</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* Deploying */}
|
||
<div className="flex items-center gap-3">
|
||
{deployStage === 'deploying' ? (
|
||
<Loader2 className="w-5 h-5 text-primary-600 animate-spin shrink-0" />
|
||
) : deployStage === 'done' ? (
|
||
<CheckCircle className="w-5 h-5 text-green-500 shrink-0" />
|
||
) : (
|
||
<div className="w-5 h-5 rounded-full border-2 border-gray-200 shrink-0" />
|
||
)}
|
||
<span className={`text-sm ${deployStage === 'deploying' ? 'text-gray-900 font-medium' : 'text-gray-500'}`}>
|
||
Starting deployment
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|