Add URL-based routing with sidebar navigation
Replace client-side state switching with proper Next.js routes: - /new - New scrape form - /jobs - Jobs list with table view - /jobs/[id] - Individual job details and logs - /analytics - Analytics overview (completed jobs) - /analytics/[id] - Analytics for specific job Add JobsContext for shared state across routes. Update Sidebar to use next/link with pathname matching. Root page redirects to /new. Also adds partial job status styling to JobsView. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
288
web/app/jobs/[id]/page.tsx
Normal file
288
web/app/jobs/[id]/page.tsx
Normal file
@@ -0,0 +1,288 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { useJobs } from '@/contexts/JobsContext';
|
||||
import { JobStatus } from '@/components/ScraperTest';
|
||||
|
||||
interface LogEntry {
|
||||
timestamp: string;
|
||||
level: string;
|
||||
message: string;
|
||||
source: string;
|
||||
}
|
||||
|
||||
interface JobLogs {
|
||||
job_id: string;
|
||||
status: string;
|
||||
error_message: string | null;
|
||||
logs: LogEntry[];
|
||||
log_count: number;
|
||||
}
|
||||
|
||||
function formatDuration(seconds: number): string {
|
||||
if (seconds < 60) return `${seconds.toFixed(1)}s`;
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.round(seconds % 60);
|
||||
return `${mins}m ${secs}s`;
|
||||
}
|
||||
|
||||
function extractBusinessName(job: JobStatus): string {
|
||||
if (job.business_name) return job.business_name;
|
||||
try {
|
||||
const urlObj = new URL(job.url);
|
||||
const query = urlObj.searchParams.get('query');
|
||||
return query ? decodeURIComponent(query) : 'Unknown Business';
|
||||
} catch {
|
||||
return 'Unknown Business';
|
||||
}
|
||||
}
|
||||
|
||||
export default function JobDetailPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const { jobs, refreshJobs } = useJobs();
|
||||
const [job, setJob] = useState<JobStatus | null>(null);
|
||||
const [logs, setLogs] = useState<JobLogs | null>(null);
|
||||
const [isLoadingLogs, setIsLoadingLogs] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
const jobId = params.id as string;
|
||||
|
||||
// Find job from context or fetch it
|
||||
useEffect(() => {
|
||||
const foundJob = jobs.find(j => j.job_id === jobId);
|
||||
if (foundJob) {
|
||||
setJob(foundJob);
|
||||
} else {
|
||||
// Fetch job directly if not in context
|
||||
fetch(`/api/jobs/${jobId}`)
|
||||
.then(res => res.json())
|
||||
.then(data => setJob(data))
|
||||
.catch(console.error);
|
||||
}
|
||||
}, [jobId, jobs]);
|
||||
|
||||
// Fetch logs
|
||||
useEffect(() => {
|
||||
if (!jobId) return;
|
||||
setIsLoadingLogs(true);
|
||||
fetch(`/api/jobs/${jobId}/logs`)
|
||||
.then(res => res.json())
|
||||
.then(data => setLogs(data))
|
||||
.catch(console.error)
|
||||
.finally(() => setIsLoadingLogs(false));
|
||||
}, [jobId]);
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!confirm('Are you sure you want to delete this job?')) return;
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
await fetch(`/api/jobs/${jobId}`, { method: 'DELETE' });
|
||||
await refreshJobs();
|
||||
router.push('/jobs');
|
||||
} catch (err) {
|
||||
console.error('Failed to delete job:', err);
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!job) {
|
||||
return (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const businessName = extractBusinessName(job);
|
||||
const canViewAnalytics = job.reviews_count && job.reviews_count > 0;
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto p-6">
|
||||
{/* Breadcrumb */}
|
||||
<div className="mb-4 flex items-center gap-2 text-sm text-gray-500">
|
||||
<Link href="/jobs" className="hover:text-blue-600">Jobs</Link>
|
||||
<span>/</span>
|
||||
<span className="text-gray-900 font-medium">{jobId.slice(0, 8)}...</span>
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="bg-white border-2 border-gray-200 rounded-xl p-6 mb-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 mb-1">{businessName}</h1>
|
||||
{job.business_address && (
|
||||
<p className="text-gray-500 text-sm">{job.business_address}</p>
|
||||
)}
|
||||
</div>
|
||||
<span className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-semibold ${
|
||||
job.status === 'completed' ? 'bg-green-100 text-green-800' :
|
||||
job.status === 'partial' ? 'bg-orange-100 text-orange-800' :
|
||||
job.status === 'running' ? 'bg-blue-100 text-blue-800' :
|
||||
job.status === 'failed' ? 'bg-red-100 text-red-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{job.status === 'running' && (
|
||||
<div className="w-2 h-2 border border-current border-t-transparent rounded-full animate-spin" />
|
||||
)}
|
||||
{job.status.charAt(0).toUpperCase() + job.status.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
{job.reviews_count !== null && (
|
||||
<div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<div className="text-2xl font-bold text-blue-800">{job.reviews_count.toLocaleString()}</div>
|
||||
<div className="text-xs font-medium text-blue-600">Reviews</div>
|
||||
</div>
|
||||
)}
|
||||
{job.scrape_time !== null && (
|
||||
<div className="p-4 bg-green-50 border border-green-200 rounded-lg">
|
||||
<div className="text-2xl font-bold text-green-800">{formatDuration(job.scrape_time)}</div>
|
||||
<div className="text-xs font-medium text-green-600">Duration</div>
|
||||
</div>
|
||||
)}
|
||||
{job.rating_snapshot !== null && (
|
||||
<div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
|
||||
<div className="text-2xl font-bold text-yellow-800 flex items-center gap-1">
|
||||
{job.rating_snapshot.toFixed(1)}
|
||||
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="text-xs font-medium text-yellow-600">Rating</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-4 bg-gray-50 border border-gray-200 rounded-lg">
|
||||
<div className="text-sm font-bold text-gray-800">
|
||||
{new Date(job.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{new Date(job.created_at).toLocaleTimeString()}
|
||||
</div>
|
||||
<div className="text-xs font-medium text-gray-600 mt-1">Created</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3">
|
||||
{canViewAnalytics && (
|
||||
<Link
|
||||
href={`/analytics/${jobId}`}
|
||||
className="flex-1 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-semibold transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
View Analytics
|
||||
</Link>
|
||||
)}
|
||||
<a
|
||||
href={job.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl font-semibold transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
Open in Maps
|
||||
</a>
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting || job.status === 'running'}
|
||||
className="px-6 py-3 bg-red-100 hover:bg-red-200 text-red-700 rounded-xl font-semibold transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isDeleting ? (
|
||||
<div className="w-5 h-5 border-2 border-red-500 border-t-transparent rounded-full animate-spin" />
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
)}
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Error Message */}
|
||||
{job.error_message && (
|
||||
<div className="mt-4 p-4 bg-red-50 border border-red-200 rounded-lg">
|
||||
<div className="flex items-start gap-2">
|
||||
<svg className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<div>
|
||||
<p className="font-semibold text-red-800">Error</p>
|
||||
<p className="text-sm text-red-700">{job.error_message}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Logs Section */}
|
||||
<div className="bg-white border-2 border-gray-200 rounded-xl overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<h2 className="text-lg font-bold text-gray-900">Logs</h2>
|
||||
{logs && (
|
||||
<span className="text-sm text-gray-500">{logs.log_count} entries</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="max-h-[500px] overflow-y-auto p-4 bg-gray-900">
|
||||
{isLoadingLogs ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
) : logs && logs.logs.length > 0 ? (
|
||||
<div className="space-y-1 font-mono text-xs">
|
||||
{[...logs.logs]
|
||||
.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime())
|
||||
.map((log, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`px-2 py-1 rounded ${
|
||||
log.level === 'ERROR' ? 'bg-red-900/30 text-red-300' :
|
||||
log.level === 'WARNING' ? 'bg-yellow-900/30 text-yellow-300' :
|
||||
log.level === 'INFO' ? 'text-green-300' :
|
||||
'text-gray-400'
|
||||
}`}
|
||||
>
|
||||
<span className="text-gray-500">
|
||||
{new Date(log.timestamp).toLocaleTimeString()}
|
||||
</span>
|
||||
{' '}
|
||||
<span className={`font-bold ${
|
||||
log.level === 'ERROR' ? 'text-red-400' :
|
||||
log.level === 'WARNING' ? 'text-yellow-400' :
|
||||
log.level === 'INFO' ? 'text-blue-400' :
|
||||
'text-gray-500'
|
||||
}`}>
|
||||
[{log.level}]
|
||||
</span>
|
||||
{' '}
|
||||
<span className={`${
|
||||
log.source === 'browser' ? 'text-purple-400' : 'text-green-400'
|
||||
}`}>
|
||||
[{log.source}]
|
||||
</span>
|
||||
{' '}
|
||||
<span>{log.message}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center text-gray-500 py-8">
|
||||
<p className="font-medium">No logs available</p>
|
||||
<p className="text-sm">Logs are recorded during scraping</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user