abrban/cloud-host
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate from react-hot-toast to react-toastify and replace all emoji icons with Lucide React

Browse Source 
- 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
2026-04-06 17:20:56 +03:30
parent 5d281b85d6
commit 3c3e0e48fa
18 changed files with 248 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/dashboard/admin/apps/page.tsx
+13 -12
View File
@@ -4,8 +4,9 @@ import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';
import api from '@/lib/api';
import toast from 'react-hot-toast';
import { toast } from 'react-toastify';
import type { Application } from '@/types';
import { Search, X, Package, Hexagon, User, Database, Box } from 'lucide-react';
const statusColors: Record<string, string> = {
running: 'badge-green',
@@ -130,7 +131,7 @@ export default function AdminAppsPage() {
{/* Search */}
<div className="relative">
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-base">🔍</span>
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-4 h-4" />
<input
type="text"
placeholder="Search by app name, user name, email, or user ID…"
@@ -141,16 +142,16 @@ export default function AdminAppsPage() {
{search && (
<button
onClick={() => { setSearch(''); setDebouncedSearch(''); }}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 text-sm"
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
>
✕
<X className="w-4 h-4" />
</button>
)}
</div>
{apps.length === 0 ? (
<div className="card text-center py-16">
<div className="text-5xl mb-4">📦</div>
<Package className="w-12 h-12 mx-auto mb-4 text-gray-300" />
{debouncedSearch ? (
<>
<p className="text-gray-600 text-lg font-medium">No applications found</p>
@@ -188,8 +189,8 @@ export default function AdminAppsPage() {
<tr key={app.id} className="hover:bg-gray-50/50 transition-colors">
<td className="px-6 py-4">
<Link href={`/dashboard/apps/${app.id}`} className="flex items-center gap-3 group">
<div className="w-9 h-9 rounded-lg bg-primary-50 flex items-center justify-center text-base shrink-0">
{app.runtime === 'nodejs' ? '🟩' : '🟧'}
<div className="w-9 h-9 rounded-lg bg-primary-50 flex items-center justify-center shrink-0">
<Hexagon className={`w-5 h-5 ${app.runtime === 'nodejs' ? 'text-green-600' : 'text-orange-500'}`} />
</div>
<div>
<span className="font-semibold text-gray-900 group-hover:text-primary-600 transition-colors block">
@@ -252,8 +253,8 @@ export default function AdminAppsPage() {
>
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center text-lg">
{app.runtime === 'nodejs' ? '🟩' : '🟧'}
<div className="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center">
<Hexagon className={`w-5 h-5 ${app.runtime === 'nodejs' ? 'text-green-600' : 'text-orange-500'}`} />
</div>
<div>
<h3 className="font-semibold text-gray-900">{app.name}</h3>
@@ -266,14 +267,14 @@ export default function AdminAppsPage() {
</div>
{app.user && (
<div className="flex items-center gap-2 mb-2 text-xs text-gray-500">
<span>👤 {app.user.firstName} {app.user.lastName}</span>
<span className="flex items-center gap-1"><User className="w-3 h-3" /> {app.user.firstName} {app.user.lastName}</span>
<span className="text-gray-300">•</span>
<span>{app.user.email}</span>
</div>
)}
<div className="flex items-center gap-4 text-xs text-gray-500">
<span>💾 {app.databaseType}</span>
<span>📦 {app.replicas} replica{app.replicas > 1 ? 's' : ''}</span>
<span className="flex items-center gap-1"><Database className="w-3 h-3" /> {app.databaseType}</span>
<span className="flex items-center gap-1"><Box className="w-3 h-3" /> {app.replicas} replica{app.replicas > 1 ? 's' : ''}</span>
</div>
</Link>
);
frontend/src/app/dashboard/admin/clusters/page.tsx
+8 -7
View File
@@ -3,8 +3,9 @@
import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import api from '@/lib/api';
import toast from 'react-hot-toast';
import { toast } from 'react-toastify';
import type { Cluster, ClusterResources } from '@/types';
import { Server, CheckCircle, XCircle, BarChart3, Clock, RotateCw, Plug, X } from 'lucide-react';
function ResourcePanel({ clusterId }: { clusterId: string }) {
const { data, isLoading, error } = useQuery<ClusterResources>({
@@ -201,7 +202,7 @@ export default function AdminClustersPage() {
<p className="page-subtitle">{clusters.length} cluster{clusters.length !== 1 ? 's' : ''} registered</p>
</div>
<button onClick={() => setShowForm(!showForm)} className={showForm ? 'btn-ghost' : 'btn-primary'}>
{showForm ? '✕ Cancel' : '+ Add Cluster'}
{showForm ? <><X className="w-4 h-4 inline" /> Cancel</> : '+ Add Cluster'}
</button>
</div>
@@ -263,7 +264,7 @@ export default function AdminClustersPage() {
disabled={!form.name || !form.apiServer || !form.kubeconfig || createMutation.isPending}
className="btn-primary"
>
{createMutation.isPending ? '🔄 Verifying connection & adding...' : 'Add Cluster'}
{createMutation.isPending ? <><RotateCw className="w-4 h-4 inline animate-spin" /> Verifying connection & adding...</> : 'Add Cluster'}
</button>
</div>
)}
@@ -283,7 +284,7 @@ export default function AdminClustersPage() {
</div>
) : clusters.length === 0 ? (
<div className="card text-center py-16">
<div className="text-5xl mb-4">🖥️</div>
<Server className="w-12 h-12 mx-auto text-gray-300 mb-4" />
<p className="text-gray-600 font-medium">No clusters registered yet.</p>
<p className="text-gray-400 text-sm mt-1">Add a Kubernetes cluster to start deploying applications.</p>
</div>
@@ -296,7 +297,7 @@ export default function AdminClustersPage() {
<div className={`w-11 h-11 rounded-xl flex items-center justify-center shrink-0 ${
cluster.status === 'active' ? 'bg-emerald-50' : 'bg-red-50'
}`}>
{cluster.status === 'active' ? '✅' : '❌'}
{cluster.status === 'active' ? <CheckCircle className="w-5 h-5 text-emerald-500" /> : <XCircle className="w-5 h-5 text-red-500" />}
</div>
<div className="min-w-0">
<div className="flex items-center gap-2 flex-wrap">
@@ -322,14 +323,14 @@ export default function AdminClustersPage() {
onClick={() => toggleResources(cluster.id)}
className={`btn-ghost text-sm ${expandedResources.has(cluster.id) ? 'bg-purple-50 text-purple-700' : ''}`}
>
📊 Resources
<BarChart3 className="w-4 h-4 inline" /> Resources
</button>
<button
onClick={() => testMutation.mutate(cluster.id)}
disabled={testingId === cluster.id}
className="btn-ghost text-sm disabled:opacity-50"
>
{testingId === cluster.id ? '⏳ Testing...' : '🔌 Test'}
{testingId === cluster.id ? <><Clock className="w-3 h-3 inline animate-spin" /> Testing...</> : <><Plug className="w-3 h-3 inline" /> Test</>}
</button>
<button
onClick={() => { if (confirm('Remove this cluster?')) deleteMutation.mutate(cluster.id); }}
frontend/src/app/dashboard/admin/pools/page.tsx
+11 -10
View File
@@ -3,8 +3,9 @@
import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import api from '@/lib/api';
import toast from 'react-hot-toast';
import { toast } from 'react-toastify';
import type { Cluster, ClusterPool } from '@/types';
import { Scale, BarChart3, RotateCw, CheckCircle, XCircle, Pencil, Clock, X } from 'lucide-react';
export default function AdminPoolsPage() {
const queryClient = useQueryClient();
@@ -107,7 +108,7 @@ export default function AdminPoolsPage() {
onClick={() => { showForm ? resetForm() : setShowForm(true); }}
className={showForm ? 'btn-ghost' : 'btn-primary'}
>
{showForm ? '✕ Cancel' : '+ Create Pool'}
{showForm ? <><X className="w-4 h-4 inline" /> Cancel</> : '+ Create Pool'}
</button>
</div>
@@ -135,8 +136,8 @@ export default function AdminPoolsPage() {
value={form.strategy}
onChange={(e) => setForm({ ...form, strategy: e.target.value as any })}
>
<option value="least-apps">📊 Least Apps — deploy to cluster with fewest apps</option>
<option value="round-robin">🔄 Round Robin — rotate across clusters evenly</option>
<option value="least-apps">Least Apps — deploy to cluster with fewest apps</option>
<option value="round-robin">Round Robin — rotate across clusters evenly</option>
</select>
</div>
</div>
@@ -223,7 +224,7 @@ export default function AdminPoolsPage() {
className="btn-primary disabled:opacity-50"
>
{createMutation.isPending || updateMutation.isPending
? '⏳ Saving...'
? <><Clock className="w-4 h-4 inline animate-spin" /> Saving...</>
: editingPool
? 'Update Pool'
: 'Create Pool'}
@@ -254,7 +255,7 @@ export default function AdminPoolsPage() {
</div>
) : pools.length === 0 ? (
<div className="card text-center py-16">
<div className="text-5xl mb-4">⚖️</div>
<Scale className="w-12 h-12 mx-auto text-gray-300 mb-4" />
<p className="text-gray-600 font-medium">No cluster pools created yet</p>
<p className="text-sm text-gray-400 mt-1">
Create a pool to enable load-balanced deployment across multiple clusters
@@ -274,8 +275,8 @@ export default function AdminPoolsPage() {
<span className={`badge ${pool.isActive ? 'badge-green' : 'badge-gray'}`}>
{pool.isActive ? 'Active' : 'Inactive'}
</span>
<span className="badge badge-purple">
{pool.strategy === 'least-apps' ? '📊 Least Apps' : '🔄 Round Robin'}
<span className="badge badge-purple 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>
</div>
{pool.description && (
@@ -293,7 +294,7 @@ export default function AdminPoolsPage() {
: 'bg-red-50 text-red-700 border border-red-200'
}`}
>
<span>{cluster.status === 'active' ? '✅' : '❌'}</span>
<span>{cluster.status === 'active' ? <CheckCircle className="w-3 h-3" /> : <XCircle className="w-3 h-3" />}</span>
<span>{cluster.name}</span>
<span className="text-gray-400">
({cluster.provider || 'N/A'} · {cluster.region || 'N/A'})
@@ -314,7 +315,7 @@ export default function AdminPoolsPage() {
onClick={() => startEdit(pool)}
className="btn-ghost text-sm"
>
✏️ Edit
<Pencil className="w-3 h-3 inline" /> Edit
</button>
<button
onClick={() => {
frontend/src/app/dashboard/admin/tickets/page.tsx
+9 -8
View File
@@ -5,6 +5,7 @@ import { useQuery } from '@tanstack/react-query';
import Link from 'next/link';
import api from '@/lib/api';
import type { Ticket, TicketStats, TicketDepartment, TicketStatus } from '@/types';
import { ClipboardList, Wrench, Briefcase, User, Inbox } from 'lucide-react';
const statusColors: Record<string, string> = {
open: 'bg-yellow-100 text-yellow-700',
@@ -48,7 +49,7 @@ export default function AdminTicketsPage() {
return (
<div className="space-y-6">
<div>
<h1 className="text-2xl font-bold text-gray-900">📋 All Tickets</h1>
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2"><ClipboardList className="w-6 h-6" /> All Tickets</h1>
<p className="text-sm text-gray-500 mt-1">Overview of all support tickets across departments</p>
</div>
@@ -77,7 +78,7 @@ export default function AdminTicketsPage() {
<div className="mt-1 space-y-0.5">
{Object.entries(stats.byDepartment).map(([dept, data]) => (
<div key={dept} className="flex items-center justify-between text-xs">
<span className="text-gray-600 capitalize">{dept === 'technical' ? '🔧' : '💼'} {dept}</span>
<span className="text-gray-600 capitalize flex items-center gap-1">{dept === 'technical' ? <Wrench className="w-3 h-3" /> : <Briefcase className="w-3 h-3" />} {dept}</span>
<span className="font-medium">
<span className={data.open > 0 ? 'text-red-600' : 'text-green-600'}>{data.open} unanswered</span>
<span className="text-gray-400"> / {data.total}</span>
@@ -103,7 +104,7 @@ export default function AdminTicketsPage() {
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
}`}
>
{dept === '' ? 'All' : dept === 'technical' ? '🔧 Technical' : '💼 Sales'}
{dept === '' ? 'All' : dept === 'technical' ? 'Technical' : 'Sales'}
</button>
))}
</div>
@@ -132,7 +133,7 @@ export default function AdminTicketsPage() {
</div>
) : tickets.length === 0 ? (
<div className="card p-12 text-center">
<span className="text-4xl">📭</span>
<Inbox className="w-10 h-10 mx-auto text-gray-300" />
<h3 className="mt-3 text-lg font-semibold text-gray-700">No tickets found</h3>
</div>
) : (
@@ -153,14 +154,14 @@ export default function AdminTicketsPage() {
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${priorityColors[ticket.priority]}`}>
{ticket.priority}
</span>
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-700">
{ticket.department === 'technical' ? '🔧 Technical' : '💼 Sales'}
<span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-700 flex items-center gap-1">
{ticket.department === 'technical' ? <Wrench className="w-3 h-3" /> : <Briefcase className="w-3 h-3" />} {ticket.department === 'technical' ? 'Technical' : 'Sales'}
</span>
</div>
<div className="flex items-center gap-3 mt-1.5 text-xs text-gray-500">
{ticket.user && (
<span>
👤 {ticket.user.firstName} {ticket.user.lastName} ({ticket.user.email})
<span className="flex items-center gap-1">
<User className="w-3 h-3" /> {ticket.user.firstName} {ticket.user.lastName} ({ticket.user.email})
</span>
)}
<span>•</span>
frontend/src/app/dashboard/admin/users/page.tsx
+6 -12
View File
@@ -4,8 +4,9 @@ import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } 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 { AdminUser } from '@/types';
import { Users, Search, X, Clock } from 'lucide-react';
export default function AdminUsersPage() {
const queryClient = useQueryClient();
@@ -66,7 +67,7 @@ export default function AdminUsersPage() {
<p className="page-subtitle">{users.length} user{users.length !== 1 ? 's' : ''} registered</p>
</div>
<button onClick={() => setShowForm(!showForm)} className={showForm ? 'btn-ghost' : 'btn-primary'}>
{showForm ? '✕ Cancel' : '+ Add User'}
{showForm ? <><X className="w-4 h-4 inline" /> Cancel</> : '+ Add User'}
</button>
</div>
@@ -132,7 +133,7 @@ export default function AdminUsersPage() {
disabled={!form.email || !form.password || !form.firstName || !form.lastName || createUser.isPending}
className="btn-primary disabled:opacity-50"
>
{createUser.isPending ? '⏳ Creating...' : 'Create User'}
{createUser.isPending ? <><Clock className="w-4 h-4 inline animate-spin" /> Creating...</> : 'Create User'}
</button>
</div>
)}
@@ -145,14 +146,7 @@ export default function AdminUsersPage() {
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
<svg
className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
</div>
{isLoading ? (
@@ -170,7 +164,7 @@ export default function AdminUsersPage() {
</div>
) : users.length === 0 ? (
<div className="card text-center py-16">
<div className="text-5xl mb-4">👥</div>
<Users className="w-12 h-12 mx-auto text-gray-300 mb-4" />
<p className="text-gray-600 font-medium">{search ? 'No users found matching your search.' : 'No users yet.'}</p>
</div>
) : (
frontend/src/app/dashboard/apps/[id]/page.tsx
+36 -35
View File
@@ -3,9 +3,10 @@
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useParams, useRouter } from 'next/navigation';
import api from '@/lib/api';
import toast from 'react-hot-toast';
import { toast } from 'react-toastify';
import type { Application, Deployment, ResourceUsage, ClusterPublic, ClusterPoolPublic } from '@/types';
import { useState, useRef, useCallback, useEffect } from 'react';
import { Hexagon, Rocket, Play, Square, RotateCw, Globe, Package, Server, Scale, CheckCircle, Clock, XCircle, AlertCircle, Link, GitBranch, KeyRound, FolderUp, BarChart3, ChevronDown, FileText, Monitor, Hammer, Settings, RefreshCw, Upload, Circle, Pin } from 'lucide-react';
const statusColors: Record<string, string> = {
running: 'badge-green',
@@ -293,8 +294,8 @@ export default function AppDetailPage() {
{/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
<div className="flex items-center gap-4 flex-1 min-w-0">
<div className="w-14 h-14 rounded-2xl bg-primary-50 flex items-center justify-center text-2xl shrink-0">
{app.runtime === 'nodejs' ? '🟩' : '🟧'}
<div className="w-14 h-14 rounded-2xl bg-primary-50 flex items-center justify-center shrink-0">
<Hexagon className={`w-7 h-7 ${app.runtime === 'nodejs' ? 'text-green-500' : 'text-orange-500'}`} />
</div>
<div className="min-w-0">
<div className="flex items-center gap-2 flex-wrap">
@@ -312,39 +313,39 @@ export default function AppDetailPage() {
<div className="flex flex-wrap gap-2 shrink-0">
{!hasDeployments && (
<button onClick={() => deployMutation.mutate()} disabled={deployMutation.isPending || (!app.codePath && !app.gitUrl)} className="btn-primary text-sm disabled:opacity-50">
{deployMutation.isPending ? '⏳ Deploying...' : '🚀 Deploy'}
{deployMutation.isPending ? <><Clock className="w-4 h-4 inline animate-spin" /> Deploying...</> : <><Rocket className="w-4 h-4 inline" /> Deploy</>}
</button>
)}
{hasDeployments && (
<>
{isStopped ? (
<button onClick={() => startMutation.mutate()} disabled={startMutation.isPending} className="btn-primary text-sm disabled:opacity-50">
{startMutation.isPending ? '⏳...' : '▶️ Start'}
{startMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : <><Play className="w-3 h-3 inline" /> Start</>}
</button>
) : (
<button onClick={() => stopMutation.mutate()} disabled={stopMutation.isPending || isInProgress} className="btn-secondary text-sm disabled:opacity-50">
{stopMutation.isPending ? '⏳...' : '⏹️ Stop'}
{stopMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : <><Square className="w-3 h-3 inline" /> Stop</>}
</button>
)}
{isRunning && (
<button onClick={() => restartMutation.mutate()} disabled={restartMutation.isPending} className="btn-secondary text-sm disabled:opacity-50">
{restartMutation.isPending ? '⏳...' : '🔄 Restart'}
{restartMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : <><RotateCw className="w-3 h-3 inline" /> Restart</>}
</button>
)}
{!isInProgress && (
<button onClick={() => redeployMutation.mutate()} disabled={redeployMutation.isPending} className="btn-primary text-sm disabled:opacity-50" title="Rebuild from latest source code">
{redeployMutation.isPending ? '⏳...' : '🔄 Redeploy'}
{redeployMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : <><RefreshCw className="w-3 h-3 inline" /> Redeploy</>}
</button>
)}
{isRunning && (
<button onClick={() => previewMutation.mutate()} disabled={previewMutation.isPending} className="text-sm px-4 py-2 rounded-xl font-medium bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-200 disabled:opacity-50 transition-all active:scale-[0.98]">
{previewMutation.isPending ? '⏳...' : '🌐 Preview'}
{previewMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : <><Globe className="w-3 h-3 inline" /> Preview</>}
</button>
)}
</>
)}
<button onClick={handleDelete} disabled={deleteMutation.isPending} className="btn-danger text-sm disabled:opacity-50">
{deleteMutation.isPending ? '⏳...' : 'Delete'}
{deleteMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /></> : 'Delete'}
</button>
</div>
</div>
@@ -381,7 +382,7 @@ export default function AppDetailPage() {
<div className="flex justify-between">
<dt className="text-sm text-gray-500">Cluster</dt>
<dd className="text-sm font-medium text-gray-900">
🖥️ {clusters.find((c) => c.id === app.clusterId)?.name || 'Unknown'}
<Server className="w-4 h-4 inline text-gray-400" /> {clusters.find((c) => c.id === app.clusterId)?.name || 'Unknown'}
</dd>
</div>
)}
@@ -389,7 +390,7 @@ export default function AppDetailPage() {
<div className="flex justify-between">
<dt className="text-sm text-gray-500">Pool</dt>
<dd className="text-sm font-medium text-gray-900">
⚖️ {pools.find((p) => p.id === app.poolId)?.name || 'Unknown'}
<Scale className="w-4 h-4 inline text-gray-400" /> {pools.find((p) => p.id === app.poolId)?.name || 'Unknown'}
</dd>
</div>
)}
@@ -408,7 +409,7 @@ export default function AppDetailPage() {
<h2 className="text-lg font-semibold text-gray-900 mb-4">Deployment History</h2>
{deployments.length === 0 ? (
<div className="text-center py-8">
<div className="text-3xl mb-2">📦</div>
<Package className="w-8 h-8 mx-auto text-gray-300 mb-2" />
<p className="text-gray-500 text-sm">No deployments yet</p>
<p className="text-gray-400 text-xs mt-1">Upload source code and click Deploy to get started</p>
</div>
@@ -423,7 +424,7 @@ export default function AppDetailPage() {
</p>
{d.errorMessage && (
<p className="text-xs text-red-500 mt-1 truncate" title={d.errorMessage}>
❌ {d.errorMessage}
<XCircle className="w-3 h-3 inline" /> {d.errorMessage}
</p>
)}
</div>
@@ -439,13 +440,13 @@ export default function AppDetailPage() {
{/* Source Code Upload */}
<div className="card">
<h2 className="text-lg font-semibold text-gray-900 mb-4">📦 Source Code</h2>
<h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2"><Package className="w-5 h-5" /> Source Code</h2>
{app.codePath ? (
<div className="flex items-center justify-between p-4 bg-green-50 border border-green-200 rounded-xl mb-4">
<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">Source code uploaded</p>
@@ -463,20 +464,20 @@ export default function AppDetailPage() {
<div className="flex items-center justify-between p-4 bg-blue-50 border border-blue-200 rounded-xl mb-4">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
🔗
<Link className="w-5 h-5" />
</div>
<div>
<p className="text-sm font-medium text-blue-800">Git repository connected</p>
<p className="text-xs text-blue-600 font-mono">{app.gitUrl}</p>
<div className="flex items-center space-x-3 mt-1">
{app.gitBranch && (
<span className="text-xs text-blue-500">
🌿 {app.gitBranch}
<span className="text-xs text-blue-500 flex items-center gap-1">
<GitBranch className="w-3 h-3" /> {app.gitBranch}
</span>
)}
{app.gitToken && (
<span className="text-xs text-green-600">
🔑 Private
<span className="text-xs text-green-600 flex items-center gap-1">
<KeyRound className="w-3 h-3" /> Private
</span>
)}
</div>
@@ -512,7 +513,7 @@ export default function AppDetailPage() {
{uploadMutation.isPending ? (
<div className="space-y-3">
<div className="text-3xl">⏳</div>
<Upload className="w-8 h-8 mx-auto text-gray-400 animate-pulse" />
<p className="text-sm font-medium text-gray-700">Uploading... {uploadProgress}%</p>
<div className="w-48 mx-auto bg-gray-200 rounded-full h-2">
<div
@@ -523,7 +524,7 @@ export default function AppDetailPage() {
</div>
) : (
<div className="space-y-2">
<div className="text-3xl">📁</div>
<FolderUp className="w-8 h-8 mx-auto text-gray-400" />
<p className="text-sm font-medium text-gray-700">
{app.codePath ? 'Upload new version' : 'Upload your project source code'}
</p>
@@ -539,12 +540,12 @@ export default function AppDetailPage() {
{/* Resource Monitoring & Scaling */}
<div className="card">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold text-gray-900">📊 Resources & Scaling</h2>
<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2"><BarChart3 className="w-5 h-5" /> Resources & Scaling</h2>
<button
onClick={() => setShowResources(!showResources)}
className="btn-secondary text-sm"
>
{showResources ? '🔽 Hide' : '📊 Monitor'}
{showResources ? <><ChevronDown className="w-4 h-4 inline" /> Hide</> : <><BarChart3 className="w-4 h-4 inline" /> Monitor</>}
</button>
</div>
@@ -574,7 +575,7 @@ export default function AppDetailPage() {
<div className="bg-purple-50 rounded-xl p-4 text-center">
<p className="text-xs text-purple-500 font-medium">Metrics</p>
<p className="text-2xl font-bold text-purple-700">
{resourceUsage.metrics.length > 0 ? '✅' : '⏳'}
{resourceUsage.metrics.length > 0 ? <CheckCircle className="w-6 h-6 mx-auto text-purple-700" /> : <Clock className="w-6 h-6 mx-auto text-purple-400" />}
</p>
<p className="text-xs text-purple-400">
{resourceUsage.metrics.length > 0 ? 'Available' : 'Waiting...'}
@@ -599,7 +600,7 @@ export default function AppDetailPage() {
<div key={metric.name} className="bg-gray-50 rounded-xl p-4 space-y-3">
<div className="flex items-center justify-between">
<p className="text-xs font-mono text-gray-600 truncate max-w-[250px]" title={metric.name}>
🟢 {metric.name}
<Circle className="w-2 h-2 inline fill-green-500 text-green-500" /> {metric.name}
</p>
</div>
@@ -673,7 +674,7 @@ export default function AppDetailPage() {
{pod.status}
</span>
</td>
<td className="py-2">{pod.ready ? '✅' : '⏳'}</td>
<td className="py-2">{pod.ready ? <CheckCircle className="w-4 h-4 text-green-500" /> : <Clock className="w-4 h-4 text-yellow-500" />}</td>
<td className="py-2">{pod.restarts}</td>
</tr>
))}
@@ -685,7 +686,7 @@ export default function AppDetailPage() {
{/* Scaling Controls */}
<div className="border-t pt-4">
<h3 className="text-sm font-semibold text-gray-700 mb-3">⚙️ Scale Resources</h3>
<h3 className="text-sm font-semibold text-gray-700 mb-3 flex items-center gap-1"><Settings className="w-4 h-4" /> Scale Resources</h3>
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
<div>
<label className="block text-xs text-gray-500 mb-1">CPU Request</label>
@@ -751,7 +752,7 @@ export default function AppDetailPage() {
disabled={scaleMutation.isPending}
className="btn-primary text-sm w-full disabled:opacity-50"
>
{scaleMutation.isPending ? '⏳ Applying...' : '🔄 Apply Changes'}
{scaleMutation.isPending ? <><Clock className="w-3 h-3 inline animate-spin" /> Applying...</> : <><RefreshCw className="w-3 h-3 inline" /> Apply Changes</>}
</button>
</div>
</div>
@@ -771,7 +772,7 @@ export default function AppDetailPage() {
{/* Logs — Pod & Build */}
<div className="card">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold text-gray-900">📋 Logs</h2>
<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2"><FileText className="w-5 h-5" /> Logs</h2>
<div className="flex items-center space-x-3">
{showLogs && logTab === 'pod' && (
<span className="text-xs text-gray-400 flex items-center space-x-1">
@@ -789,7 +790,7 @@ export default function AppDetailPage() {
onClick={() => setShowLogs(!showLogs)}
className="btn-secondary text-sm"
>
{showLogs ? '🔽 Hide Logs' : '📋 Show Logs'}
{showLogs ? <><ChevronDown className="w-4 h-4 inline" /> Hide Logs</> : <><FileText className="w-4 h-4 inline" /> Show Logs</>}
</button>
</div>
</div>
@@ -805,7 +806,7 @@ export default function AppDetailPage() {
: 'text-gray-500 hover:text-gray-700'
}`}
>
🖥️ Pod Logs
<Monitor className="w-4 h-4 inline" /> Pod Logs
</button>
<button
onClick={() => setLogTab('build')}
@@ -815,7 +816,7 @@ export default function AppDetailPage() {
: 'text-gray-500 hover:text-gray-700'
}`}
>
🔨 Build Logs
<Hammer className="w-4 h-4 inline" /> Build Logs
</button>
</div>
@@ -834,7 +835,7 @@ export default function AppDetailPage() {
<div>
{buildLogsData?.version && (
<div className="flex items-center gap-3 mb-2 text-xs text-gray-500">
<span>📌 {buildLogsData.version}</span>
<span><Pin className="w-3 h-3 inline" /> {buildLogsData.version}</span>
<span className={`badge ${statusColors[buildLogsData.status] || 'badge-gray'}`}>
{buildLogsData.status}
</span>
frontend/src/app/dashboard/apps/page.tsx
+12 -11
View File
@@ -3,8 +3,9 @@
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';
import api from '@/lib/api';
import toast from 'react-hot-toast';
import { toast } from 'react-toastify';
import type { Application } from '@/types';
import { Rocket, Package, Hexagon, Database, Box } from 'lucide-react';
const statusColors: Record<string, string> = {
running: 'badge-green',
@@ -64,17 +65,17 @@ export default function AppsPage() {
<p className="page-subtitle">{apps.length} application{apps.length !== 1 ? 's' : ''}</p>
</div>
<Link href="/dashboard/deploy" className="btn-primary">
🚀 New Application
<Rocket className="w-4 h-4 mr-1 inline" /> New Application
</Link>
</div>
{apps.length === 0 ? (
<div className="card text-center py-16">
<div className="text-5xl mb-4">📦</div>
<Package className="w-12 h-12 mx-auto mb-4 text-gray-300" />
<p className="text-gray-600 text-lg font-medium">No applications yet</p>
<p className="text-gray-400 mt-1 text-sm">Deploy your first application to get started.</p>
<Link href="/dashboard/deploy" className="btn-primary mt-6 inline-flex">
🚀 Deploy your first app
<Link href="/dashboard/deploy" className="btn-primary mt-6 inline-flex items-center gap-1">
<Rocket className="w-4 h-4" /> Deploy your first app
</Link>
</div>
) : (
@@ -99,8 +100,8 @@ export default function AppsPage() {
<tr key={app.id} className="hover:bg-gray-50/50 transition-colors">
<td className="px-6 py-4">
<Link href={`/dashboard/apps/${app.id}`} className="flex items-center gap-3 group">
<div className="w-9 h-9 rounded-lg bg-primary-50 flex items-center justify-center text-base shrink-0">
{app.runtime === 'nodejs' ? '🟩' : '🟧'}
<div className="w-9 h-9 rounded-lg bg-primary-50 flex items-center justify-center shrink-0">
<Hexagon className={`w-5 h-5 ${app.runtime === 'nodejs' ? 'text-green-600' : 'text-orange-500'}`} />
</div>
<span className="font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">
{app.name}
@@ -147,8 +148,8 @@ export default function AppsPage() {
>
<div className="flex items-center justify-between mb-3">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center text-lg">
{app.runtime === 'nodejs' ? '🟩' : '🟧'}
<div className="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center">
<Hexagon className={`w-5 h-5 ${app.runtime === 'nodejs' ? 'text-green-600' : 'text-orange-500'}`} />
</div>
<div>
<h3 className="font-semibold text-gray-900">{app.name}</h3>
@@ -160,8 +161,8 @@ export default function AppsPage() {
</span>
</div>
<div className="flex items-center gap-4 text-xs text-gray-500">
<span>💾 {app.databaseType}</span>
<span>📦 {app.replicas} replica{app.replicas > 1 ? 's' : ''}</span>
<span className="flex items-center gap-1"><Database className="w-3 h-3" /> {app.databaseType}</span>
<span className="flex items-center gap-1"><Box className="w-3 h-3" /> {app.replicas} replica{app.replicas > 1 ? 's' : ''}</span>
</div>
</Link>
);
frontend/src/app/dashboard/deploy/page.tsx
+30 -29
View File
@@ -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>
frontend/src/app/dashboard/layout.tsx
+47 -32
View File
@@ -1,38 +1,57 @@
'use client';
import { useEffect, useState } from 'react';
import { useEffect, useState, type ReactNode } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import Link from 'next/link';
import { useQuery } from '@tanstack/react-query';
import { useAuthStore } from '@/lib/store';
import api from '@/lib/api';
import {
LayoutDashboard,
Package,
Rocket,
Ticket,
Users,
Server,
Scale,
ClipboardList,
Wrench,
Briefcase,
Cloud,
Menu,
X,
LogOut,
Boxes,
} from 'lucide-react';
const userNavItems = [
{ href: '/dashboard', label: 'Dashboard', icon: '📊' },
{ href: '/dashboard/apps', label: 'Applications', icon: '📦' },
{ href: '/dashboard/deploy', label: 'New Deploy', icon: '🚀' },
{ href: '/dashboard/tickets', label: 'Tickets', icon: '🎫' },
type NavItem = { href: string; label: string; icon: ReactNode };
const userNavItems: NavItem[] = [
{ href: '/dashboard', label: 'Dashboard', icon: <LayoutDashboard className="w-4 h-4" /> },
{ href: '/dashboard/apps', label: 'Applications', icon: <Package className="w-4 h-4" /> },
{ href: '/dashboard/deploy', label: 'New Deploy', icon: <Rocket className="w-4 h-4" /> },
{ href: '/dashboard/tickets', label: 'Tickets', icon: <Ticket className="w-4 h-4" /> },
];
const adminNavItems = [
{ href: '/dashboard/admin/users', label: 'Users', icon: '👥' },
{ href: '/dashboard/admin/apps', label: 'All Applications', icon: '📦' },
{ href: '/dashboard/admin/clusters', label: 'Clusters', icon: '🖥️' },
{ href: '/dashboard/admin/pools', label: 'Cluster Pools', icon: '⚖️' },
{ href: '/dashboard/admin/tickets', label: 'All Tickets', icon: '📋' },
const adminNavItems: NavItem[] = [
{ href: '/dashboard/admin/users', label: 'Users', icon: <Users className="w-4 h-4" /> },
{ href: '/dashboard/admin/apps', label: 'All Applications', icon: <Boxes className="w-4 h-4" /> },
{ href: '/dashboard/admin/clusters', label: 'Clusters', icon: <Server className="w-4 h-4" /> },
{ href: '/dashboard/admin/pools', label: 'Cluster Pools', icon: <Scale className="w-4 h-4" /> },
{ href: '/dashboard/admin/tickets', label: 'All Tickets', icon: <ClipboardList className="w-4 h-4" /> },
];
const technicalNavItems = [
{ href: '/dashboard/admin/users', label: 'Users', icon: '👥' },
{ href: '/dashboard/admin/apps', label: 'All Applications', icon: '📦' },
{ href: '/dashboard/admin/clusters', label: 'Clusters', icon: '🖥️' },
{ href: '/dashboard/admin/pools', label: 'Cluster Pools', icon: '⚖️' },
{ href: '/dashboard/staff/tickets', label: 'Technical Tickets', icon: '🔧' },
const technicalNavItems: NavItem[] = [
{ href: '/dashboard/admin/users', label: 'Users', icon: <Users className="w-4 h-4" /> },
{ href: '/dashboard/admin/apps', label: 'All Applications', icon: <Boxes className="w-4 h-4" /> },
{ href: '/dashboard/admin/clusters', label: 'Clusters', icon: <Server className="w-4 h-4" /> },
{ href: '/dashboard/admin/pools', label: 'Cluster Pools', icon: <Scale className="w-4 h-4" /> },
{ href: '/dashboard/staff/tickets', label: 'Technical Tickets', icon: <Wrench className="w-4 h-4" /> },
];
const salesNavItems = [
{ href: '/dashboard/admin/users', label: 'Users', icon: '👥' },
{ href: '/dashboard/staff/tickets', label: 'Sales Tickets', icon: '💼' },
const salesNavItems: NavItem[] = [
{ href: '/dashboard/admin/users', label: 'Users', icon: <Users className="w-4 h-4" /> },
{ href: '/dashboard/staff/tickets', label: 'Sales Tickets', icon: <Briefcase className="w-4 h-4" /> },
];
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
@@ -65,7 +84,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
if (!isAuthenticated) return null;
const NavLink = ({ item, badge }: { item: { href: string; label: string; icon: string }; badge?: number }) => {
const NavLink = ({ item, badge }: { item: NavItem; badge?: number }) => {
const isActive = pathname === item.href || (item.href !== '/dashboard' && pathname.startsWith(item.href + '/'));
return (
<Link
@@ -76,7 +95,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
}`}
>
<span className="text-base">{item.icon}</span>
{item.icon}
<span className="flex-1">{item.label}</span>
{badge !== undefined && badge > 0 && (
<span className="min-w-[20px] h-5 flex items-center justify-center px-1.5 text-xs font-bold rounded-full bg-red-500 text-white">
@@ -186,10 +205,10 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
>
<div className="flex items-center justify-between mb-6">
<Link href="/dashboard" className="text-lg font-bold text-primary-600">
☁️ CloudHost
<Cloud className="w-5 h-5 inline mr-1" /> CloudHost
</Link>
<button onClick={() => setSidebarOpen(false)} className="btn-icon">
✕
<X className="w-4 h-4" />
</button>
</div>
<SidebarContent />
@@ -205,12 +224,10 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
onClick={() => setSidebarOpen(true)}
className="btn-icon lg:hidden"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
<Menu className="w-5 h-5" />
</button>
<Link href="/dashboard" className="text-xl font-bold text-primary-600 flex items-center gap-2">
<span>☁️</span>
<Cloud className="w-6 h-6" />
<span className="hidden sm:inline">CloudHost</span>
</Link>
</div>
@@ -233,9 +250,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
onClick={() => { logout(); router.push('/login'); }}
className="btn-ghost text-gray-500 hover:text-red-600"
>
<svg className="w-4 h-4 sm:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
<LogOut className="w-4 h-4 sm:hidden" />
<span className="hidden sm:inline">Sign out</span>
</button>
</div>
frontend/src/app/dashboard/page.tsx
+18 -11
View File
@@ -2,9 +2,11 @@
import { useQuery } from '@tanstack/react-query';
import Link from 'next/link';
import type { ReactNode } from 'react';
import api from '@/lib/api';
import { useAuthStore } from '@/lib/store';
import type { Application } from '@/types';
import { Rocket, Package, Circle, Hexagon } from 'lucide-react';
const statusColors: Record<string, string> = {
running: 'bg-emerald-100 text-emerald-700',
@@ -16,9 +18,14 @@ const statusColors: Record<string, string> = {
stopped: 'bg-gray-100 text-gray-600',
};
const statusIcons: Record<string, string> = {
running: '🟢', pending: '🟡', building: '🔵', deploying: '🔵',
failed: '🔴', build_failed: '🔴', stopped: '⚪',
const statusIcons: Record<string, ReactNode> = {
running: <Circle className="w-3 h-3 fill-emerald-500 text-emerald-500" />,
pending: <Circle className="w-3 h-3 fill-amber-500 text-amber-500" />,
building: <Circle className="w-3 h-3 fill-blue-500 text-blue-500" />,
deploying: <Circle className="w-3 h-3 fill-blue-500 text-blue-500" />,
failed: <Circle className="w-3 h-3 fill-red-500 text-red-500" />,
build_failed: <Circle className="w-3 h-3 fill-red-500 text-red-500" />,
stopped: <Circle className="w-3 h-3 fill-gray-400 text-gray-400" />,
};
export default function DashboardPage() {
@@ -41,7 +48,7 @@ export default function DashboardPage() {
{/* Welcome */}
<div>
<h1 className="page-title">
Welcome back, {user?.firstName}! 👋
Welcome back, {user?.firstName}!
</h1>
<p className="page-subtitle">
Here&apos;s an overview of your applications.
@@ -75,7 +82,7 @@ export default function DashboardPage() {
<div className="page-header mb-4">
<h2 className="text-lg font-semibold text-gray-900">Recent Applications</h2>
<Link href="/dashboard/deploy" className="btn-primary text-sm">
🚀 New Application
<Rocket className="w-4 h-4 mr-1 inline" /> New Application
</Link>
</div>
@@ -94,13 +101,13 @@ export default function DashboardPage() {
</div>
) : apps.length === 0 ? (
<div className="card text-center py-16">
<div className="text-5xl mb-4">📦</div>
<Package className="w-12 h-12 mx-auto mb-4 text-gray-300" />
<p className="text-gray-600 text-lg font-medium">No applications yet</p>
<p className="text-gray-400 mt-1 text-sm">
Deploy your first application to get started.
</p>
<Link href="/dashboard/deploy" className="btn-primary mt-6 inline-flex">
🚀 Deploy your first app
<Link href="/dashboard/deploy" className="btn-primary mt-6 inline-flex items-center gap-1">
<Rocket className="w-4 h-4" /> Deploy your first app
</Link>
</div>
) : (
@@ -115,8 +122,8 @@ export default function DashboardPage() {
className="card-hover flex items-center justify-between group"
>
<div className="flex items-center gap-4">
<div className="w-11 h-11 rounded-xl bg-primary-50 flex items-center justify-center text-lg shrink-0">
{app.runtime === 'nodejs' ? '🟩' : '🟧'}
<div className="w-11 h-11 rounded-xl bg-primary-50 flex items-center justify-center shrink-0">
<Hexagon className={`w-5 h-5 ${app.runtime === 'nodejs' ? 'text-green-600' : 'text-orange-500'}`} />
</div>
<div className="min-w-0">
<h3 className="font-semibold text-gray-900 group-hover:text-primary-700 transition-colors truncate">
@@ -129,7 +136,7 @@ export default function DashboardPage() {
</div>
</div>
<div className="flex items-center gap-2 shrink-0">
<span className="text-sm">{statusIcons[status]}</span>
{statusIcons[status]}
<span className={`badge ${statusColors[status] || 'badge-gray'}`}>
{status}
</span>
frontend/src/app/dashboard/staff/tickets/page.tsx
+7 -5
View File
@@ -6,6 +6,7 @@ import Link from 'next/link';
import api from '@/lib/api';
import { useAuthStore } from '@/lib/store';
import type { Ticket, TicketStatus } from '@/types';
import { Wrench, Briefcase, User, CheckCircle } from 'lucide-react';
const statusColors: Record<string, string> = {
open: 'bg-yellow-100 text-yellow-700',
@@ -26,7 +27,8 @@ export default function StaffTicketsPage() {
// Determine which department this staff member handles
const department = user?.role === 'sales' ? 'sales' : 'technical';
const departmentLabel = department === 'technical' ? '🔧 Technical' : '💼 Sales';
const departmentLabel = department === 'technical' ? 'Technical' : 'Sales';
const DeptIcon = department === 'technical' ? Wrench : Briefcase;
const { data: tickets = [], isLoading } = useQuery<Ticket[]>({
queryKey: ['staff-tickets', department, statusFilter],
@@ -42,7 +44,7 @@ export default function StaffTicketsPage() {
return (
<div className="space-y-6">
<div>
<h1 className="text-2xl font-bold text-gray-900">{departmentLabel} Tickets</h1>
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2"><DeptIcon className="w-5 h-5" /> {departmentLabel} Tickets</h1>
<p className="text-sm text-gray-500 mt-1">
{tickets.length} total tickets
</p>
@@ -95,7 +97,7 @@ export default function StaffTicketsPage() {
</div>
) : tickets.length === 0 ? (
<div className="card p-12 text-center">
<span className="text-4xl">✅</span>
<CheckCircle className="w-10 h-10 mx-auto text-gray-300" />
<h3 className="mt-3 text-lg font-semibold text-gray-700">No tickets</h3>
<p className="text-sm text-gray-500 mt-1">
{statusFilter ? `No ${statusFilter} tickets` : 'No tickets in this department'}
@@ -122,8 +124,8 @@ export default function StaffTicketsPage() {
</div>
<div className="flex items-center gap-3 mt-1.5 text-xs text-gray-500">
{ticket.user && (
<span>
👤 {ticket.user.firstName} {ticket.user.lastName} ({ticket.user.email})
<span className="flex items-center gap-1">
<User className="w-3 h-3" /> {ticket.user.firstName} {ticket.user.lastName} ({ticket.user.email})
</span>
)}
<span>•</span>
frontend/src/app/dashboard/tickets/[id]/page.tsx
+4 -3
View File
@@ -5,8 +5,9 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useParams, useRouter } from 'next/navigation';
import api from '@/lib/api';
import { useAuthStore } from '@/lib/store';
import toast from 'react-hot-toast';
import { toast } from 'react-toastify';
import type { Ticket } from '@/types';
import { Wrench, Briefcase } from 'lucide-react';
const statusColors: Record<string, string> = {
open: 'bg-yellow-100 text-yellow-700',
@@ -83,8 +84,8 @@ export default function TicketDetailPage() {
<span className={`px-2 py-0.5 rounded-full text-xs font-medium ${statusColors[ticket.status]}`}>
{ticket.status}
</span>
<span className="text-xs text-gray-500">
{ticket.department === 'technical' ? '🔧 Technical' : '💼 Sales'}
<span className="text-xs text-gray-500 flex items-center gap-1">
{ticket.department === 'technical' ? <><Wrench className="w-3 h-3" /> Technical</> : <><Briefcase className="w-3 h-3" /> Sales</>}
</span>
<span className="text-xs text-gray-400">
{new Date(ticket.createdAt).toLocaleString()}
frontend/src/app/dashboard/tickets/page.tsx
+10 -9
View File
@@ -5,8 +5,9 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';
import api from '@/lib/api';
import { useAuthStore } from '@/lib/store';
import toast from 'react-hot-toast';
import { toast } from 'react-toastify';
import type { Ticket, CreateTicketDto, TicketDepartment, TicketPriority } from '@/types';
import { Wrench, Briefcase, Ticket as TicketIcon, X } from 'lucide-react';
const statusColors: Record<string, string> = {
open: 'bg-yellow-100 text-yellow-700',
@@ -29,10 +30,10 @@ export default function TicketsPage() {
// Staff can only create tickets to other departments
const availableDepartments: { value: TicketDepartment; label: string }[] = [];
if (user?.role !== 'technical') {
availableDepartments.push({ value: 'technical', label: '🔧 Technical Support' });
availableDepartments.push({ value: 'technical', label: 'Technical Support' });
}
if (user?.role !== 'sales') {
availableDepartments.push({ value: 'sales', label: '💼 Sales' });
availableDepartments.push({ value: 'sales', label: 'Sales' });
}
const canCreateTicket = availableDepartments.length > 0;
const [form, setForm] = useState<CreateTicketDto>({
@@ -72,7 +73,7 @@ export default function TicketsPage() {
</div>
{canCreateTicket && (
<button onClick={() => setShowCreate(!showCreate)} className="btn-primary">
{showCreate ? '✕ Cancel' : '+ New Ticket'}
{showCreate ? <><X className="w-4 h-4 inline" /> Cancel</> : '+ New Ticket'}
</button>
)}
</div>
@@ -115,9 +116,9 @@ export default function TicketsPage() {
value={form.priority}
onChange={(e) => setForm({ ...form, priority: e.target.value as TicketPriority })}
>
<option value="low">🟢 Low</option>
<option value="medium">🟡 Medium</option>
<option value="high">🔴 High</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
@@ -149,7 +150,7 @@ export default function TicketsPage() {
</div>
) : tickets.length === 0 ? (
<div className="card p-12 text-center">
<span className="text-4xl">🎫</span>
<TicketIcon className="w-10 h-10 mx-auto text-gray-300" />
<h3 className="mt-3 text-lg font-semibold text-gray-700">No tickets yet</h3>
<p className="text-sm text-gray-500 mt-1">Create a ticket if you need help</p>
</div>
@@ -173,7 +174,7 @@ export default function TicketsPage() {
</span>
</div>
<div className="flex items-center gap-3 mt-1.5 text-xs text-gray-500">
<span>{ticket.department === 'technical' ? '🔧 Technical' : '💼 Sales'}</span>
<span className="flex items-center gap-1">{ticket.department === 'technical' ? <><Wrench className="w-3 h-3" /> Technical</> : <><Briefcase className="w-3 h-3" /> Sales</>}</span>
<span>•</span>
<span>{new Date(ticket.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}</span>
<span>•</span>