refactor: migrate from react-hot-toast to react-toastify and replace all emoji icons with Lucide React
- Replaced react-hot-toast with react-toastify (ToastContainer in providers.tsx) - Removed @heroicons/react dependency - Added lucide-react for consistent SVG icon system - Migrated all 18 frontend pages from emoji icons to Lucide components - Updated sidebar navigation, login/register, dashboard, apps, deploy, tickets, admin users/clusters/pools pages - All emoji indicators (status, runtime, actions) now use proper SVG icons - Build passes with zero TypeScript errors
This commit is contained in:
keyhan
@@ -5,8 +5,9 @@ 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-hot-toast';
|
||||
import { toast } from 'react-toastify';
|
||||
import type { CreateApplicationDto, ClusterPublic, ClusterPoolPublic } from '@/types';
|
||||
import { Hexagon, FolderUp, Link as LinkIcon, CheckCircle, Package, Server, Scale, Home, Target, BarChart3, RotateCw, KeyRound, Rocket, Clock, Upload, XCircle } from 'lucide-react';
|
||||
|
||||
const steps = ['Basic Info', 'Runtime & Database', 'Resources', 'Review'];
|
||||
|
||||
@@ -219,7 +220,7 @@ export default function DeployPage() {
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">📁</span>
|
||||
<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
|
||||
@@ -231,7 +232,7 @@ export default function DeployPage() {
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">🔗</span>
|
||||
<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>
|
||||
@@ -280,7 +281,7 @@ export default function DeployPage() {
|
||||
<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>
|
||||
@@ -313,7 +314,7 @@ export default function DeployPage() {
|
||||
}`}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<div className="text-3xl">📦</div>
|
||||
<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>
|
||||
@@ -348,8 +349,8 @@ export default function DeployPage() {
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">Application Runtime</label>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{[
|
||||
{ value: 'nodejs', label: 'Node.js', icon: '🟩', desc: 'Express, NestJS, Fastify...' },
|
||||
{ value: 'laravel', label: 'Laravel', icon: '🟧', desc: 'PHP 8.3, Composer, Artisan' },
|
||||
{ value: 'nodejs', label: 'Node.js', icon: <Hexagon className="w-6 h-6 text-green-500" />, desc: 'Express, NestJS, Fastify...' },
|
||||
{ value: 'laravel', label: 'Laravel', icon: <Hexagon className="w-6 h-6 text-orange-500" />, desc: 'PHP 8.3, Composer, Artisan' },
|
||||
].map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
@@ -359,7 +360,7 @@ export default function DeployPage() {
|
||||
form.runtime === opt.value ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">{opt.icon}</span>
|
||||
{opt.icon}
|
||||
<p className="mt-2 font-semibold text-gray-900">{opt.label}</p>
|
||||
<p className="text-xs text-gray-500">{opt.desc}</p>
|
||||
</button>
|
||||
@@ -370,9 +371,9 @@ export default function DeployPage() {
|
||||
<label className="block text-sm font-medium text-gray-700 mb-3">Database</label>
|
||||
<div className="grid grid-cols-3 gap-3 sm:gap-4">
|
||||
{[
|
||||
{ value: 'none', label: 'None', icon: '❌' },
|
||||
{ value: 'postgresql', label: 'PostgreSQL', icon: '🐘' },
|
||||
{ value: 'mysql', label: 'MySQL', icon: '🐬' },
|
||||
{ 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> },
|
||||
].map((opt) => (
|
||||
<button
|
||||
key={opt.value}
|
||||
@@ -382,7 +383,7 @@ export default function DeployPage() {
|
||||
form.databaseType === opt.value ? 'border-primary-500 bg-primary-50' : 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">{opt.icon}</span>
|
||||
<div className="flex justify-center">{opt.icon}</div>
|
||||
<p className="mt-2 font-semibold text-sm text-gray-900">{opt.label}</p>
|
||||
</button>
|
||||
))}
|
||||
@@ -413,7 +414,7 @@ export default function DeployPage() {
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">🏠</span>
|
||||
<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>
|
||||
@@ -429,7 +430,7 @@ export default function DeployPage() {
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">🎯</span>
|
||||
<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>
|
||||
@@ -445,7 +446,7 @@ export default function DeployPage() {
|
||||
: 'border-gray-200 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<span className="text-xl">⚖️</span>
|
||||
<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>
|
||||
@@ -470,7 +471,7 @@ export default function DeployPage() {
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-lg">🖥️</span>
|
||||
<Server className="w-5 h-5 text-gray-400" />
|
||||
<div>
|
||||
<p className="font-semibold text-sm text-gray-900">
|
||||
{cluster.name}
|
||||
@@ -517,15 +518,15 @@ export default function DeployPage() {
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-lg">⚖️</span>
|
||||
<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">
|
||||
{pool.strategy === 'least-apps' ? '📊 Least Apps' : '🔄 Round Robin'}
|
||||
<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' : ''}:
|
||||
@@ -545,7 +546,7 @@ export default function DeployPage() {
|
||||
{clusterMode === 'default' && (
|
||||
<div className="p-3 bg-gray-50 rounded-xl border border-gray-200">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-lg">🏠</span>
|
||||
<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">
|
||||
@@ -562,7 +563,7 @@ export default function DeployPage() {
|
||||
) : (
|
||||
<div className="p-3 bg-gray-50 rounded-xl border border-gray-200">
|
||||
<div className="flex items-center space-x-3">
|
||||
<span className="text-lg">🏠</span>
|
||||
<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">
|
||||
@@ -686,7 +687,7 @@ export default function DeployPage() {
|
||||
<span className="text-sm font-medium">
|
||||
{sourceMethod === 'upload'
|
||||
? zipFile
|
||||
? `📁 ${zipFile.name}`
|
||||
? zipFile.name
|
||||
: '—'
|
||||
: form.gitUrl || '—'}
|
||||
</span>
|
||||
@@ -700,17 +701,17 @@ export default function DeployPage() {
|
||||
{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>
|
||||
<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}`
|
||||
? `${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'}
|
||||
? `${pools.find((p) => p.id === form.poolId)?.name || 'Pool'} (Load Balanced)`
|
||||
: 'Default Cluster'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
@@ -764,9 +765,9 @@ export default function DeployPage() {
|
||||
>
|
||||
{createMutation.isPending
|
||||
? uploadProgress > 0 && uploadProgress < 100
|
||||
? `⏳ Uploading... ${uploadProgress}%`
|
||||
: '⏳ Deploying...'
|
||||
: '🚀 Deploy Application'}
|
||||
? `Uploading... ${uploadProgress}%`
|
||||
: 'Deploying...'
|
||||
: <><Rocket className="w-4 h-4 inline" /> Deploy Application</>}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user