102 lines
3.7 KiB
TypeScript
102 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState, useCallback } from 'react';
|
|
import ReportsView from '@/components/ReportsView';
|
|
import { listExecutions } from '@/lib/pipeline-api';
|
|
import type { ExecutionStatus } from '@/lib/pipeline-types';
|
|
import type { JobStatus } from '@/components/ScraperTest';
|
|
|
|
export default function ReportsPage() {
|
|
const [executions, setExecutions] = useState<ExecutionStatus[]>([]);
|
|
const [jobsMap, setJobsMap] = useState<Map<string, JobStatus>>(new Map());
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const fetchData = useCallback(async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
|
|
// Fetch executions and jobs in parallel
|
|
const [executionsData, jobsResponse] = await Promise.all([
|
|
listExecutions('reviewiq', { limit: 100 }),
|
|
fetch('/api/jobs?limit=100').then(r => r.json())
|
|
]);
|
|
|
|
setExecutions(executionsData);
|
|
|
|
// Create a map of job_id -> job for quick lookup
|
|
const map = new Map<string, JobStatus>();
|
|
const jobsList = jobsResponse?.jobs || jobsResponse;
|
|
if (Array.isArray(jobsList)) {
|
|
jobsList.forEach((job: JobStatus) => {
|
|
map.set(job.job_id, job);
|
|
});
|
|
}
|
|
setJobsMap(map);
|
|
} catch (err) {
|
|
console.error('Failed to fetch data:', err);
|
|
setError(err instanceof Error ? err.message : 'Failed to load reports');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, [fetchData]);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="h-full overflow-y-auto p-6">
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900">Reports</h1>
|
|
<p className="text-gray-500 mt-1">AI-generated business intelligence reports from ReviewIQ pipeline</p>
|
|
</div>
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<div className="flex flex-col items-center gap-3">
|
|
<div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin" />
|
|
<span className="text-gray-500">Loading reports...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="h-full overflow-y-auto p-6">
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900">Reports</h1>
|
|
<p className="text-gray-500 mt-1">AI-generated business intelligence reports from ReviewIQ pipeline</p>
|
|
</div>
|
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
|
|
<div className="flex items-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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span className="font-medium">Error loading reports</span>
|
|
</div>
|
|
<p className="mt-1 text-sm">{error}</p>
|
|
<button
|
|
onClick={fetchData}
|
|
className="mt-3 px-4 py-2 bg-red-100 hover:bg-red-200 text-red-800 text-sm font-medium rounded-lg transition-colors"
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full overflow-y-auto p-6">
|
|
<div className="mb-6">
|
|
<h1 className="text-2xl font-bold text-gray-900">Reports</h1>
|
|
<p className="text-gray-500 mt-1">AI-generated business intelligence reports from ReviewIQ pipeline</p>
|
|
</div>
|
|
<ReportsView executions={executions} jobsMap={jobsMap} onRefresh={fetchData} />
|
|
</div>
|
|
);
|
|
}
|