julienfroidefond/stripstream-librarian
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(backoffice): redesign UI with enhanced background and glassmorphism effects

Browse Source 
- Add vibrant radial gradient backgrounds with multiple color zones
- Implement glassmorphism effects on header and cards
- Add subtle grain texture overlay
- Update card hover effects with smooth transitions
- Improve dark mode background visibility
This commit is contained in:
Julien Froidefond
2026-03-06 16:21:48 +01:00
parent 2b30ae47de
commit 7cdc72b6e1
30 changed files with 1783 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
apps/backoffice/app/jobs/[id]/page.tsx
View File

@@ -1,7 +1,10 @@
import { notFound } from "next/navigation";
import Link from "next/link";
import { apiFetch } from "../../../lib/api";
import { Card, CardHeader, StatusBadge, JobTypeBadge, StatBox, ProgressBar } from "../../components/ui";
import {
Card, CardHeader, CardTitle, CardDescription, CardContent,
StatusBadge, JobTypeBadge, StatBox, ProgressBar
} from "../../components/ui";
interface JobDetailPageProps {
params: Promise<{ id: string }>;
@@ -85,8 +88,14 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
return (
<>
<div className="mb-6">
<Link href="/jobs" className="inline-flex items-center text-sm text-muted hover:text-primary transition-colors">
← Back to jobs
<Link
href="/jobs"
className="inline-flex items-center text-sm text-muted-foreground hover:text-primary transition-colors duration-200"
>
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
Back to jobs
</Link>
<h1 className="text-3xl font-bold text-foreground mt-2">Job Details</h1>
</div>
@@ -94,43 +103,47 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Overview Card */}
<Card>
<CardHeader title="Overview" />
<div className="space-y-3">
<div className="flex items-center justify-between py-2 border-b border-line">
<span className="text-sm text-muted">ID</span>
<code className="px-2 py-1 bg-muted/10 rounded font-mono text-sm text-foreground">{job.id}</code>
<CardHeader>
<CardTitle>Overview</CardTitle>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-center justify-between py-2 border-b border-border/60">
<span className="text-sm text-muted-foreground">ID</span>
<code className="px-2 py-1 bg-muted rounded font-mono text-sm text-foreground">{job.id}</code>
</div>
<div className="flex items-center justify-between py-2 border-b border-line">
<span className="text-sm text-muted">Type</span>
<div className="flex items-center justify-between py-2 border-b border-border/60">
<span className="text-sm text-muted-foreground">Type</span>
<JobTypeBadge type={job.type} />
</div>
<div className="flex items-center justify-between py-2 border-b border-line">
<span className="text-sm text-muted">Status</span>
<div className="flex items-center justify-between py-2 border-b border-border/60">
<span className="text-sm text-muted-foreground">Status</span>
<StatusBadge status={job.status} />
</div>
<div className="flex items-center justify-between py-2">
<span className="text-sm text-muted">Library</span>
<span className="text-sm text-muted-foreground">Library</span>
<span className="text-sm text-foreground">{job.library_id || "All libraries"}</span>
</div>
</div>
</CardContent>
</Card>
{/* Timeline Card */}
<Card>
<CardHeader title="Timeline" />
<div className="space-y-4">
<CardHeader>
<CardTitle>Timeline</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex items-start gap-4">
<div className={`w-2 h-2 rounded-full mt-2 ${job.created_at ? 'bg-success' : 'bg-muted'}`} />
<div className="flex-1">
<span className="text-sm font-medium text-foreground">Created</span>
<p className="text-sm text-muted">{new Date(job.created_at).toLocaleString()}</p>
<p className="text-sm text-muted-foreground">{new Date(job.created_at).toLocaleString()}</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className={`w-2 h-2 rounded-full mt-2 ${job.started_at ? 'bg-success' : job.created_at ? 'bg-warning' : 'bg-muted'}`} />
<div className="flex-1">
<span className="text-sm font-medium text-foreground">Started</span>
<p className="text-sm text-muted">
<p className="text-sm text-muted-foreground">
{job.started_at ? new Date(job.started_at).toLocaleString() : "Pending..."}
</p>
</div>
@@ -139,7 +152,7 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
<div className={`w-2 h-2 rounded-full mt-2 ${job.finished_at ? 'bg-success' : job.started_at ? 'bg-primary animate-pulse' : 'bg-muted'}`} />
<div className="flex-1">
<span className="text-sm font-medium text-foreground">Finished</span>
<p className="text-sm text-muted">
<p className="text-sm text-muted-foreground">
{job.finished_at
? new Date(job.finished_at).toLocaleString()
: job.started_at
@@ -149,77 +162,93 @@ export default async function JobDetailPage({ params }: JobDetailPageProps) {
</p>
</div>
</div>
</div>
{job.started_at && (
<div className="mt-4 inline-flex items-center px-3 py-1.5 bg-primary-soft text-primary rounded-lg text-sm font-medium">
Duration: {formatDuration(job.started_at, job.finished_at)}
</div>
)}
{job.started_at && (
<div className="mt-4 inline-flex items-center px-3 py-1.5 bg-primary/10 text-primary rounded-lg text-sm font-medium">
Duration: {formatDuration(job.started_at, job.finished_at)}
</div>
)}
</CardContent>
</Card>
{/* Progress Card */}
{(job.status === "running" || job.status === "success" || job.status === "failed") && (
<Card>
<CardHeader title="Progress" />
{job.total_files && job.total_files > 0 && (
<>
<ProgressBar value={job.progress_percent || 0} showLabel size="lg" className="mb-4" />
<div className="grid grid-cols-3 gap-4">
<StatBox value={job.processed_files || 0} label="Processed" variant="primary" />
<StatBox value={job.total_files} label="Total" />
<StatBox value={job.total_files - (job.processed_files || 0)} label="Remaining" variant="warning" />
<CardHeader>
<CardTitle>Progress</CardTitle>
</CardHeader>
<CardContent>
{job.total_files && job.total_files > 0 && (
<>
<ProgressBar value={job.progress_percent || 0} showLabel size="lg" className="mb-4" />
<div className="grid grid-cols-3 gap-4">
<StatBox value={job.processed_files || 0} label="Processed" variant="primary" />
<StatBox value={job.total_files} label="Total" />
<StatBox value={job.total_files - (job.processed_files || 0)} label="Remaining" variant="warning" />
</div>
</>
)}
{job.current_file && (
<div className="mt-4 p-3 bg-muted/50 rounded-lg">
<span className="text-sm text-muted-foreground">Current file:</span>
<code className="block mt-1 text-xs font-mono text-foreground truncate">{job.current_file}</code>
</div>
</>
)}
{job.current_file && (
<div className="mt-4 p-3 bg-muted/5 rounded-lg">
<span className="text-sm text-muted">Current file:</span>
<code className="block mt-1 text-xs font-mono text-foreground truncate">{job.current_file}</code>
</div>
)}
)}
</CardContent>
</Card>
)}
{/* Statistics Card */}
{job.stats_json && (
<Card>
<CardHeader title="Statistics" />
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-4">
<StatBox value={job.stats_json.scanned_files} label="Scanned" variant="success" />
<StatBox value={job.stats_json.indexed_files} label="Indexed" variant="primary" />
<StatBox value={job.stats_json.removed_files} label="Removed" variant="warning" />
<StatBox value={job.stats_json.errors} label="Errors" variant={job.stats_json.errors > 0 ? "error" : "default"} />
</div>
{job.started_at && (
<div className="flex items-center justify-between py-2 border-t border-line">
<span className="text-sm text-muted">Speed:</span>
<span className="text-sm font-medium text-foreground">{formatSpeed(job.stats_json, duration)}</span>
<CardHeader>
<CardTitle>Statistics</CardTitle>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-4">
<StatBox value={job.stats_json.scanned_files} label="Scanned" variant="success" />
<StatBox value={job.stats_json.indexed_files} label="Indexed" variant="primary" />
<StatBox value={job.stats_json.removed_files} label="Removed" variant="warning" />
<StatBox value={job.stats_json.errors} label="Errors" variant={job.stats_json.errors > 0 ? "error" : "default"} />
</div>
)}
{job.started_at && (
<div className="flex items-center justify-between py-2 border-t border-border/60">
<span className="text-sm text-muted-foreground">Speed:</span>
<span className="text-sm font-medium text-foreground">{formatSpeed(job.stats_json, duration)}</span>
</div>
)}
</CardContent>
</Card>
)}
{/* Errors Card */}
{errors.length > 0 && (
<Card className="lg:col-span-2">
<CardHeader title={`Errors (${errors.length})`} />
<div className="space-y-2 max-h-80 overflow-y-auto">
<CardHeader>
<CardTitle>Errors ({errors.length})</CardTitle>
<CardDescription>Errors encountered during job execution</CardDescription>
</CardHeader>
<CardContent className="space-y-2 max-h-80 overflow-y-auto">
{errors.map((error) => (
<div key={error.id} className="p-3 bg-error-soft rounded-lg">
<code className="block text-sm font-mono text-error mb-1">{error.file_path}</code>
<p className="text-sm text-error/80">{error.error_message}</p>
<span className="text-xs text-muted">{new Date(error.created_at).toLocaleString()}</span>
<div key={error.id} className="p-3 bg-destructive/10 rounded-lg border border-destructive/20">
<code className="block text-sm font-mono text-destructive mb-1">{error.file_path}</code>
<p className="text-sm text-destructive/80">{error.error_message}</p>
<span className="text-xs text-muted-foreground">{new Date(error.created_at).toLocaleString()}</span>
</div>
))}
</div>
</CardContent>
</Card>
)}
{/* Error Message */}
{job.error_opt && (
<Card className="lg:col-span-2">
<CardHeader title="Error" />
<pre className="p-4 bg-error-soft rounded-lg text-sm text-error overflow-x-auto">{job.error_opt}</pre>
<CardHeader>
<CardTitle>Error</CardTitle>
<CardDescription>Job failed with error</CardDescription>
</CardHeader>
<CardContent>
<pre className="p-4 bg-destructive/10 rounded-lg text-sm text-destructive overflow-x-auto border border-destructive/20">{job.error_opt}</pre>
</CardContent>
</Card>
)}
</div>