feat(jobs): T22 complété - Page détail jobs avec timeline et stats

- Page /jobs/[id] avec affichage complet des détails
- Timeline visuelle (Created → Started → Finished)
- Barre de progression avec stats (processed/total/remaining)
- Stats: scanned, indexed, removed, errors
- Vitesse de traitement (fichiers/sec)
- Liste des erreurs avec fichier et message
- Navigation retour vers la liste
- Bouton 'View' sur chaque ligne de job
- Lien cliquable sur l'ID du job
- Styles CSS pour timeline, progress bar, statistiques

DoD: Page job détaillée avec timeline, stats et navigation complète

apps/backoffice/app/components/JobRow.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import Link from "next/link";
 import { JobProgress } from "./JobProgress";
 
 interface JobRowProps {
@@ -32,14 +33,16 @@ export function JobRow({ job, libraryName, highlighted, onCancel }: JobRowProps)
     <>
       <tr className={highlighted ? "job-highlighted" : undefined}>
         <td>
-          <code>{job.id.slice(0, 8)}</code>
+          <Link href={`/jobs/${job.id}`} className="job-id-link">
+            <code>{job.id.slice(0, 8)}</code>
+          </Link>
         </td>
         <td>{job.library_id ? libraryName || job.library_id.slice(0, 8) : "—"}</td>
         <td>{job.type}</td>
         <td>
           <span className={`status-${job.status}`}>{job.status}</span>
           {job.error_opt && <span className="error-hint" title={job.error_opt}>!</span>}
-          {job.status === "running" && (
+          {(job.status === "running" || job.status === "pending") && (
             <button 
               className="toggle-progress-btn"
               onClick={() => setShowProgress(!showProgress)}
@@ -50,14 +53,19 @@ export function JobRow({ job, libraryName, highlighted, onCancel }: JobRowProps)
         </td>
         <td>{new Date(job.created_at).toLocaleString()}</td>
         <td>
-          {job.status === "pending" || job.status === "running" ? (
+          <div style={{ display: "flex", gap: "8px" }}>
-            <button 
+            <Link href={`/jobs/${job.id}`} className="view-btn">
-              className="cancel-btn"
+              View
-              onClick={() => onCancel(job.id)}
+            </Link>
-            >
+            {(job.status === "pending" || job.status === "running") && (
-              Cancel
+              <button 
-            </button>
+                className="cancel-btn"
-          ) : null}
+                onClick={() => onCancel(job.id)}
+              >
+                Cancel
+              </button>
+            )}
+          </div>
         </td>
       </tr>
       {showProgress && (job.status === "running" || job.status === "pending") && (

apps/backoffice/app/globals.css

@@ -1258,3 +1258,334 @@ tr.job-highlighted td {
   gap: 8px;
   flex-wrap: wrap;
 }
+
+/* Job Detail Page Styles */
+.page-header {
+  margin-bottom: 24px;
+}
+
+.back-link {
+  display: inline-block;
+  margin-bottom: 12px;
+  color: hsl(198 78% 37%);
+  text-decoration: none;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+.job-detail-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+}
+
+@media (min-width: 768px) {
+  .job-detail-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .job-progress-detail,
+  .job-statistics,
+  .job-errors,
+  .job-error-message {
+    grid-column: 1 / -1;
+  }
+}
+
+.job-meta {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+.meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.meta-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+}
+
+.meta-value {
+  font-weight: 600;
+}
+
+.job-type {
+  text-transform: uppercase;
+  font-size: 0.8rem;
+}
+
+.job-type.full_rebuild {
+  color: hsl(280 60% 45%);
+}
+
+.job-type.rebuild {
+  color: hsl(198 78% 37%);
+}
+
+/* Timeline */
+.timeline {
+  position: relative;
+  padding-left: 24px;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: 8px;
+  bottom: 8px;
+  width: 2px;
+  background: var(--line);
+}
+
+.timeline-item {
+  position: relative;
+  padding-bottom: 16px;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.timeline-item:last-child {
+  padding-bottom: 0;
+}
+
+.timeline-dot {
+  position: absolute;
+  left: -20px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--line);
+  border: 2px solid var(--card);
+  margin-top: 4px;
+}
+
+.timeline-item.completed .timeline-dot {
+  background: hsl(142 60% 45%);
+}
+
+.timeline-item.active .timeline-dot {
+  background: hsl(198 78% 37%);
+  animation: pulse-dot 2s infinite;
+}
+
+.timeline-item.pending .timeline-dot {
+  background: var(--line);
+}
+
+@keyframes pulse-dot {
+  0%, 100% { box-shadow: 0 0 0 0 hsl(198 78% 37% / 0.4); }
+  50% { box-shadow: 0 0 0 6px hsl(198 78% 37% / 0); }
+}
+
+.timeline-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.timeline-label {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.timeline-time {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.duration-badge {
+  margin-top: 16px;
+  padding: 8px 12px;
+  background: hsl(198 52% 90%);
+  border-radius: 6px;
+  font-weight: 600;
+  color: hsl(198 78% 37%);
+}
+
+/* Progress */
+.progress-bar-large {
+  position: relative;
+  height: 32px;
+  background: var(--line);
+  border-radius: 16px;
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, hsl(198 78% 37%), hsl(192 85% 55%));
+  border-radius: 16px;
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-weight: 700;
+  font-size: 0.9rem;
+}
+
+.progress-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.stat-box {
+  text-align: center;
+  padding: 12px;
+  background: hsl(198 52% 95%);
+  border-radius: 8px;
+}
+
+.stat-box .stat-value {
+  display: block;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: hsl(198 78% 37%);
+}
+
+.stat-box .stat-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.current-file-box {
+  padding: 12px;
+  background: hsl(45 93% 90% / 0.3);
+  border: 1px solid hsl(45 93% 47% / 0.3);
+  border-radius: 8px;
+}
+
+.current-file-box .label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+
+.current-file-box .file-path {
+  font-size: 0.85rem;
+  word-break: break-all;
+}
+
+/* Statistics */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.stat-number {
+  display: block;
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--foreground);
+}
+
+.stat-number.success { color: hsl(142 60% 45%); }
+.stat-number.primary { color: hsl(198 78% 37%); }
+.stat-number.warning { color: hsl(45 93% 47%); }
+.stat-number.error { color: hsl(2 72% 48%); }
+
+.speed-stat {
+  text-align: center;
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+}
+
+.speed-label {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+}
+
+.speed-value {
+  font-weight: 700;
+  font-size: 1.1rem;
+  margin-left: 8px;
+}
+
+/* Errors */
+.errors-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.error-item {
+  padding: 12px;
+  background: hsl(2 72% 48% / 0.05);
+  border: 1px solid hsl(2 72% 48% / 0.2);
+  border-radius: 8px;
+}
+
+.error-file {
+  display: block;
+  font-size: 0.8rem;
+  margin-bottom: 4px;
+  word-break: break-all;
+}
+
+.error-message {
+  display: block;
+  font-size: 0.85rem;
+  color: hsl(2 72% 48%);
+  margin-bottom: 4px;
+}
+
+.error-time {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.error-details {
+  padding: 16px;
+  background: hsl(2 72% 48% / 0.05);
+  border: 1px solid hsl(2 72% 48% / 0.2);
+  border-radius: 8px;
+  overflow-x: auto;
+  font-size: 0.85rem;
+}
+
+/* Job list enhancements */
+.job-id-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.job-id-link:hover code {
+  background: hsl(198 52% 90%);
+  color: hsl(198 78% 37%);
+}
+
+.view-btn {
+  padding: 4px 10px;
+  font-size: 0.8rem;
+  background: hsl(198 78% 37% / 0.1);
+  border: 1px solid hsl(198 78% 37% / 0.3);
+  border-radius: 4px;
+  color: hsl(198 78% 37%);
+  text-decoration: none;
+}
+
+.view-btn:hover {
+  background: hsl(198 78% 37% / 0.2);
+}

apps/backoffice/app/jobs/[id]/page.tsx

@@ -0,0 +1,254 @@
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import { apiFetch } from "../../../lib/api";
+
+interface JobDetailPageProps {
+  params: Promise<{ id: string }>;
+}
+
+interface JobDetails {
+  id: string;
+  library_id: string | null;
+  type: string;
+  status: string;
+  created_at: string;
+  started_at: string | null;
+  finished_at: string | null;
+  current_file: string | null;
+  progress_percent: number | null;
+  processed_files: number | null;
+  total_files: number | null;
+  stats_json: {
+    scanned_files: number;
+    indexed_files: number;
+    removed_files: number;
+    errors: number;
+  } | null;
+  error_opt: string | null;
+}
+
+interface JobError {
+  id: string;
+  file_path: string;
+  error_message: string;
+  created_at: string;
+}
+
+async function getJobDetails(jobId: string): Promise<JobDetails | null> {
+  try {
+    return await apiFetch<JobDetails>(`/index/jobs/${jobId}`);
+  } catch {
+    return null;
+  }
+}
+
+async function getJobErrors(jobId: string): Promise<JobError[]> {
+  try {
+    return await apiFetch<JobError[]>(`/index/jobs/${jobId}/errors`);
+  } catch {
+    return [];
+  }
+}
+
+function formatDuration(start: string, end: string | null): string {
+  const startDate = new Date(start);
+  const endDate = end ? new Date(end) : new Date();
+  const diff = endDate.getTime() - startDate.getTime();
+  
+  if (diff < 60000) return `${Math.floor(diff / 1000)}s`;
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ${Math.floor((diff % 60000) / 1000)}s`;
+  return `${Math.floor(diff / 3600000)}h ${Math.floor((diff % 3600000) / 60000)}m`;
+}
+
+function formatSpeed(stats: { scanned_files: number } | null, duration: number): string {
+  if (!stats || duration === 0) return "-";
+  const filesPerSecond = stats.scanned_files / (duration / 1000);
+  return `${filesPerSecond.toFixed(1)} f/s`;
+}
+
+export default async function JobDetailPage({ params }: JobDetailPageProps) {
+  const { id } = await params;
+  const [job, errors] = await Promise.all([
+    getJobDetails(id),
+    getJobErrors(id),
+  ]);
+
+  if (!job) {
+    notFound();
+  }
+
+  const duration = job.started_at 
+    ? new Date(job.finished_at || new Date()).getTime() - new Date(job.started_at).getTime()
+    : 0;
+
+  return (
+    <>
+      <div className="page-header">
+        <Link href="/jobs" className="back-link">← Back to jobs</Link>
+        <h1>Job Details</h1>
+      </div>
+
+      <div className="job-detail-grid">
+        {/* Overview Card */}
+        <div className="card job-overview">
+          <h2>Overview</h2>
+          <div className="job-meta">
+            <div className="meta-item">
+              <span className="meta-label">ID</span>
+              <code className="meta-value">{job.id}</code>
+            </div>
+            <div className="meta-item">
+              <span className="meta-label">Type</span>
+              <span className={`meta-value job-type ${job.type}`}>{job.type}</span>
+            </div>
+            <div className="meta-item">
+              <span className="meta-label">Status</span>
+              <span className={`meta-value status-badge status-${job.status}`}>{job.status}</span>
+            </div>
+            <div className="meta-item">
+              <span className="meta-label">Library</span>
+              <span className="meta-value">{job.library_id || "All libraries"}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Timeline Card */}
+        <div className="card job-timeline">
+          <h2>Timeline</h2>
+          <div className="timeline">
+            <div className={`timeline-item ${job.created_at ? 'completed' : ''}`}>
+              <div className="timeline-dot" />
+              <div className="timeline-content">
+                <span className="timeline-label">Created</span>
+                <span className="timeline-time">{new Date(job.created_at).toLocaleString()}</span>
+              </div>
+            </div>
+            <div className={`timeline-item ${job.started_at ? 'completed' : ''} ${!job.started_at ? 'pending' : ''}`}>
+              <div className="timeline-dot" />
+              <div className="timeline-content">
+                <span className="timeline-label">Started</span>
+                <span className="timeline-time">
+                  {job.started_at ? new Date(job.started_at).toLocaleString() : "Pending..."}
+                </span>
+              </div>
+            </div>
+            <div className={`timeline-item ${job.finished_at ? 'completed' : ''} ${job.started_at && !job.finished_at ? 'active' : ''} ${!job.started_at ? 'pending' : ''}`}>
+              <div className="timeline-dot" />
+              <div className="timeline-content">
+                <span className="timeline-label">Finished</span>
+                <span className="timeline-time">
+                  {job.finished_at 
+                    ? new Date(job.finished_at).toLocaleString()
+                    : job.started_at 
+                      ? "Running..."
+                      : "Waiting..."
+                  }
+                </span>
+              </div>
+            </div>
+          </div>
+          {job.started_at && (
+            <div className="duration-badge">
+              Duration: {formatDuration(job.started_at, job.finished_at)}
+            </div>
+          )}
+        </div>
+
+        {/* Progress Card */}
+        {(job.status === "running" || job.status === "success" || job.status === "failed") && (
+          <div className="card job-progress-detail">
+            <h2>Progress</h2>
+            {job.total_files && job.total_files > 0 && (
+              <>
+                <div className="progress-bar-large">
+                  <div 
+                    className="progress-fill" 
+                    style={{ width: `${job.progress_percent || 0}%` }}
+                  />
+                  <span className="progress-text">{job.progress_percent || 0}%</span>
+                </div>
+                <div className="progress-stats-grid">
+                  <div className="stat-box">
+                    <span className="stat-value">{job.processed_files || 0}</span>
+                    <span className="stat-label">Processed</span>
+                  </div>
+                  <div className="stat-box">
+                    <span className="stat-value">{job.total_files}</span>
+                    <span className="stat-label">Total</span>
+                  </div>
+                  <div className="stat-box">
+                    <span className="stat-value">{job.total_files - (job.processed_files || 0)}</span>
+                    <span className="stat-label">Remaining</span>
+                  </div>
+                </div>
+              </>
+            )}
+            {job.current_file && (
+              <div className="current-file-box">
+                <span className="label">Current file:</span>
+                <code className="file-path">{job.current_file}</code>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Statistics Card */}
+        {job.stats_json && (
+          <div className="card job-statistics">
+            <h2>Statistics</h2>
+            <div className="stats-grid">
+              <div className="stat-item">
+                <span className="stat-number success">{job.stats_json.scanned_files}</span>
+                <span className="stat-label">Scanned</span>
+              </div>
+              <div className="stat-item">
+                <span className="stat-number primary">{job.stats_json.indexed_files}</span>
+                <span className="stat-label">Indexed</span>
+              </div>
+              <div className="stat-item">
+                <span className="stat-number warning">{job.stats_json.removed_files}</span>
+                <span className="stat-label">Removed</span>
+              </div>
+              <div className="stat-item">
+                <span className={`stat-number ${job.stats_json.errors > 0 ? 'error' : ''}`}>
+                  {job.stats_json.errors}
+                </span>
+                <span className="stat-label">Errors</span>
+              </div>
+            </div>
+            {job.started_at && (
+              <div className="speed-stat">
+                <span className="speed-label">Speed:</span>
+                <span className="speed-value">{formatSpeed(job.stats_json, duration)}</span>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Errors Card */}
+        {errors.length > 0 && (
+          <div className="card job-errors">
+            <h2>Errors ({errors.length})</h2>
+            <div className="errors-list">
+              {errors.map((error) => (
+                <div key={error.id} className="error-item">
+                  <code className="error-file">{error.file_path}</code>
+                  <span className="error-message">{error.error_message}</span>
+                  <span className="error-time">{new Date(error.created_at).toLocaleString()}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Error Message */}
+        {job.error_opt && (
+          <div className="card job-error-message">
+            <h2>Error</h2>
+            <pre className="error-details">{job.error_opt}</pre>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}