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

feat: comprehensive UI polish with responsive design, animations, and modern styling

Browse Source 
- Rewrite globals.css with professional utility classes (btn-primary/secondary/danger/ghost, input-field, card/card-hover, badge system, stat-card, skeleton, page-header, animations)
- Responsive dashboard layout with mobile hamburger menu, slide-out sidebar, backdrop overlay
- Polish login/register pages with gradient backgrounds, slide-up animations, loading spinners
- Dashboard home with stat cards grid (2-col mobile, 4-col desktop), skeleton loading, empty states
- Apps list with desktop table + mobile card views, proper badges
- Deploy wizard with responsive step indicator (checkmarks, progress line), mobile-friendly forms
- App detail page with responsive header/action buttons, improved logs tabs, resource scaling
- Admin users page with desktop table + mobile cards, skeleton loading
- Admin clusters page with responsive layout, animated resource panel
- Admin pools page with responsive form grids, improved pool cards
- Consistent rounded-2xl cards, rounded-xl buttons/inputs, active:scale feedback throughout
This commit is contained in:
keyhan
2026-04-05 18:34:27 +03:30
parent e7d70f87cd
commit c8e66f6771
12 changed files with 822 additions and 462 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/dashboard/apps/[id]/page.tsx
+74 -93
View File
@@ -8,13 +8,13 @@ import type { Application, Deployment, ResourceUsage, ClusterPublic, ClusterPool
import { useState, useRef, useCallback, useEffect } from 'react';
const statusColors: Record<string, string> = {
running: 'bg-green-100 text-green-700',
pending: 'bg-yellow-100 text-yellow-700',
building: 'bg-blue-100 text-blue-700',
deploying: 'bg-blue-100 text-blue-700',
failed: 'bg-red-100 text-red-700',
build_failed: 'bg-red-100 text-red-700',
stopped: 'bg-gray-100 text-gray-700',
running: 'badge-green',
pending: 'badge-yellow',
building: 'badge-blue',
deploying: 'badge-blue',
failed: 'badge-red',
build_failed: 'badge-red',
stopped: 'badge-gray',
};
/**
@@ -255,7 +255,25 @@ export default function AppDetailPage() {
}, []);
if (isLoading || !app) {
return <div className="card text-center py-12 text-gray-500">Loading...</div>;
return (
<div className="space-y-6 animate-fade-in">
<div className="flex items-center gap-4">
<div className="skeleton w-14 h-14 rounded-2xl" />
<div className="space-y-2 flex-1">
<div className="skeleton h-6 w-48" />
<div className="skeleton h-4 w-72" />
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="card space-y-3">
{[1,2,3,4,5].map(i => <div key={i} className="skeleton h-4 w-full" />)}
</div>
<div className="card space-y-3">
{[1,2,3].map(i => <div key={i} className="skeleton h-12 w-full rounded-lg" />)}
</div>
</div>
</div>
);
}
const latestStatus = deployments[0]?.status || 'pending';
@@ -271,102 +289,65 @@ export default function AppDetailPage() {
};
return (
<div className="space-y-6">
<div className="space-y-6 animate-fade-in">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="w-12 h-12 rounded-xl bg-primary-100 flex items-center justify-center text-2xl">
<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>
<div>
<h1 className="text-2xl font-bold text-gray-900">{app.name}</h1>
<p className="text-sm text-gray-500">
<div className="min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<h1 className="text-xl sm:text-2xl font-bold text-gray-900 truncate">{app.name}</h1>
<span className={`badge ${statusColors[latestStatus] || 'badge-gray'}`}>
{latestStatus}
</span>
</div>
<p className="text-sm text-gray-500 truncate">
{app.runtime} · {app.subdomain}.apps.cloudhost.local
</p>
</div>
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${statusColors[latestStatus] || 'bg-gray-100 text-gray-600'}`}>
{latestStatus}
</span>
</div>
<div className="flex space-x-3">
{/* Only show deploy button if NEVER deployed before */}
<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"
>
<button onClick={() => deployMutation.mutate()} disabled={deployMutation.isPending || (!app.codePath && !app.gitUrl)} className="btn-primary text-sm disabled:opacity-50">
{deployMutation.isPending ? '⏳ Deploying...' : '🚀 Deploy'}
</button>
)}
{/* After first deploy: show start/stop/restart */}
{hasDeployments && (
<>
{isStopped ? (
<button
onClick={() => startMutation.mutate()}
disabled={startMutation.isPending}
className="btn-primary text-sm disabled:opacity-50"
>
{startMutation.isPending ? '⏳ Starting...' : '▶️ Start'}
<button onClick={() => startMutation.mutate()} disabled={startMutation.isPending} className="btn-primary text-sm disabled:opacity-50">
{startMutation.isPending ? '⏳...' : '▶️ Start'}
</button>
) : (
<button
onClick={() => stopMutation.mutate()}
disabled={stopMutation.isPending || isInProgress}
className="btn-secondary text-sm disabled:opacity-50"
>
{stopMutation.isPending ? '⏳ Stopping...' : '⏹️ Stop'}
<button onClick={() => stopMutation.mutate()} disabled={stopMutation.isPending || isInProgress} className="btn-secondary text-sm disabled:opacity-50">
{stopMutation.isPending ? '⏳...' : '⏹️ Stop'}
</button>
)}
{isRunning && (
<button
onClick={() => restartMutation.mutate()}
disabled={restartMutation.isPending}
className="btn-secondary text-sm disabled:opacity-50"
>
<button onClick={() => restartMutation.mutate()} disabled={restartMutation.isPending} className="btn-secondary text-sm disabled:opacity-50">
{restartMutation.isPending ? '⏳...' : '🔄 Restart'}
</button>
)}
{/* Redeploy: rebuild from latest git/code */}
{!isInProgress && (
<button
onClick={() => redeployMutation.mutate()}
disabled={redeployMutation.isPending}
className="btn-primary text-sm disabled:opacity-50"
title="Rebuild from latest source code and deploy new version"
>
{redeployMutation.isPending ? '⏳ Rebuilding...' : '🔄 Redeploy'}
<button onClick={() => redeployMutation.mutate()} disabled={redeployMutation.isPending} className="btn-primary text-sm disabled:opacity-50" title="Rebuild from latest source code">
{redeployMutation.isPending ? '⏳...' : '🔄 Redeploy'}
</button>
)}
{/* Preview: open the running app in a new tab */}
{isRunning && (
<button
onClick={() => previewMutation.mutate()}
disabled={previewMutation.isPending}
className="px-4 py-2 rounded-lg text-sm font-medium bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-200 disabled:opacity-50 transition-colors"
title="Open the running application in a new browser tab"
>
{previewMutation.isPending ? '⏳ Loading...' : '🌐 Preview'}
<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'}
</button>
)}
</>
)}
<button
onClick={handleDelete}
disabled={deleteMutation.isPending}
className="px-4 py-2 rounded-lg text-sm font-medium bg-red-50 text-red-600 hover:bg-red-100 border border-red-200 disabled:opacity-50 transition-colors"
>
{deleteMutation.isPending ? '⏳ Deleting...' : '�️ Delete'}
<button onClick={handleDelete} disabled={deleteMutation.isPending} className="btn-danger text-sm disabled:opacity-50">
{deleteMutation.isPending ? '⏳...' : 'Delete'}
</button>
</div>
</div>
{/* Status & Config */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="card">
@@ -434,19 +415,19 @@ export default function AppDetailPage() {
) : (
<div className="space-y-3 max-h-72 overflow-y-auto">
{deployments.slice(0, 10).map((d) => (
<div key={d.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div>
<p className="text-sm font-medium text-gray-900">{d.version || d.imageTag}</p>
<div key={d.id} className="flex items-center justify-between p-3 bg-gray-50/80 rounded-xl">
<div className="min-w-0 flex-1">
<p className="text-sm font-medium text-gray-900 truncate">{d.version || d.imageTag}</p>
<p className="text-xs text-gray-500">
{new Date(d.createdAt).toLocaleString()}
</p>
{d.errorMessage && (
<p className="text-xs text-red-500 mt-1 truncate max-w-[250px]" title={d.errorMessage}>
<p className="text-xs text-red-500 mt-1 truncate" title={d.errorMessage}>
❌ {d.errorMessage}
</p>
)}
</div>
<span className={`px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap ${statusColors[d.status] || 'bg-gray-100'}`}>
<span className={`badge ${statusColors[d.status] || 'badge-gray'} ml-2 shrink-0`}>
{d.status}
</span>
</div>
@@ -667,10 +648,10 @@ export default function AppDetailPage() {
{resourceUsage.pods.length > 0 && (
<div>
<h3 className="text-sm font-semibold text-gray-700 mb-2">Pod Status</h3>
<div className="overflow-x-auto">
<div className="overflow-x-auto -mx-2 px-2">
<table className="w-full text-xs">
<thead>
<tr className="text-left text-gray-500 border-b">
<tr className="text-left text-gray-500 border-b border-gray-200">
<th className="pb-2 font-medium">Pod</th>
<th className="pb-2 font-medium">Status</th>
<th className="pb-2 font-medium">Ready</th>
@@ -705,14 +686,14 @@ 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>
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
<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>
<input
type="text"
value={resourceForm.cpuRequest}
onChange={(e) => setResourceForm((f) => ({ ...f, cpuRequest: e.target.value }))}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent"
className="input-field text-sm"
placeholder="100m"
/>
</div>
@@ -722,7 +703,7 @@ export default function AppDetailPage() {
type="text"
value={resourceForm.cpuLimit}
onChange={(e) => setResourceForm((f) => ({ ...f, cpuLimit: e.target.value }))}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent"
className="input-field text-sm"
placeholder="500m"
/>
</div>
@@ -732,7 +713,7 @@ export default function AppDetailPage() {
type="text"
value={resourceForm.memoryRequest}
onChange={(e) => setResourceForm((f) => ({ ...f, memoryRequest: e.target.value }))}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent"
className="input-field text-sm"
placeholder="128Mi"
/>
</div>
@@ -742,23 +723,23 @@ export default function AppDetailPage() {
type="text"
value={resourceForm.memoryLimit}
onChange={(e) => setResourceForm((f) => ({ ...f, memoryLimit: e.target.value }))}
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-transparent"
className="input-field text-sm"
placeholder="512Mi"
/>
</div>
<div>
<label className="block text-xs text-gray-500 mb-1">Replicas</label>
<div className="flex items-center space-x-2">
<div className="flex items-center gap-2">
<button
onClick={() => setResourceForm((f) => ({ ...f, replicas: Math.max(1, f.replicas - 1) }))}
className="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-bold"
className="btn-icon w-9 h-9"
>
−
</button>
<span className="text-lg font-bold text-gray-800 w-8 text-center">{resourceForm.replicas}</span>
<button
onClick={() => setResourceForm((f) => ({ ...f, replicas: Math.min(10, f.replicas + 1) }))}
className="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-lg hover:bg-gray-200 text-sm font-bold"
className="btn-icon w-9 h-9"
>
+
</button>
@@ -815,10 +796,10 @@ export default function AppDetailPage() {
{showLogs && (
<div className="space-y-3">
{/* Tab switcher */}
<div className="flex space-x-1 bg-gray-100 rounded-lg p-1">
<div className="flex gap-1 bg-gray-100 rounded-xl p-1">
<button
onClick={() => setLogTab('pod')}
className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-all ${
logTab === 'pod'
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-500 hover:text-gray-700'
@@ -828,7 +809,7 @@ export default function AppDetailPage() {
</button>
<button
onClick={() => setLogTab('build')}
className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-all ${
logTab === 'build'
? 'bg-white text-gray-900 shadow-sm'
: 'text-gray-500 hover:text-gray-700'
@@ -842,7 +823,7 @@ export default function AppDetailPage() {
{logTab === 'pod' && (
<pre
ref={logsEndRef}
className="bg-gray-900 text-green-400 p-4 rounded-lg text-xs font-mono overflow-x-auto max-h-[500px] overflow-y-auto whitespace-pre-wrap break-words"
className="bg-gray-900 text-green-400 p-4 rounded-xl text-xs font-mono overflow-x-auto max-h-[500px] overflow-y-auto whitespace-pre-wrap break-words"
>
{logsData?.logs || (isRunning ? 'Loading logs...' : isStopped ? 'Application is stopped. Start it to see logs.' : 'Waiting for pod to be ready...')}
</pre>
@@ -852,14 +833,14 @@ export default function AppDetailPage() {
{logTab === 'build' && (
<div>
{buildLogsData?.version && (
<div className="flex items-center space-x-3 mb-2 text-xs text-gray-500">
<div className="flex items-center gap-3 mb-2 text-xs text-gray-500">
<span>📌 {buildLogsData.version}</span>
<span className={`px-2 py-0.5 rounded-full font-medium ${statusColors[buildLogsData.status] || 'bg-gray-100'}`}>
<span className={`badge ${statusColors[buildLogsData.status] || 'badge-gray'}`}>
{buildLogsData.status}
</span>
</div>
)}
<pre className="bg-gray-900 text-blue-300 p-4 rounded-lg text-xs font-mono overflow-x-auto max-h-[500px] overflow-y-auto whitespace-pre-wrap break-words">
<pre className="bg-gray-900 text-blue-300 p-4 rounded-xl text-xs font-mono overflow-x-auto max-h-[500px] overflow-y-auto whitespace-pre-wrap break-words">
{buildLogsData?.buildLog || (
buildLogsData?.status === 'building'
? 'Build in progress... Logs will appear when complete.'