import { History as HistoryIcon } from 'lucide-react'; import { useEffect } from 'react'; import { Head, Link, router, usePage } from '@inertiajs/react'; import BatchHistoryCard from '@/Components/Batch/BatchHistoryCard'; import SiteNav from '@/Components/Navigation/SiteNav'; import InertiaPagination from '@/Components/Shared/InertiaPagination'; import { Button } from '@/Components/ui/button'; import { EmptyState } from '@/Components/ui/empty-state'; import { useNavigationState } from '@/hooks/useNavigationState'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackEvent } from '@/lib/analytics'; import { FEATURE_USED } from '@/lib/event-catalog'; import type { PageProps, SiteBasic } from '@/types'; interface BatchJob { id: number; created_at: string; completed_at: string | null; status: 'pending' | 'processing' | 'completed' | 'failed'; total_jobs: number; completed_jobs: number; failed_jobs: number; total_actual_tokens: number | null; total_estimated_tokens: number; total_actual_cost: number | null; total_estimated_cost: number; } interface PaginatedBatchJobs { data: BatchJob[]; links: Array<{ url: string | null; label: string; active: boolean }>; current_page: number; last_page: number; } interface Props { site: SiteBasic; batchJobs: PaginatedBatchJobs; hasActiveBatches: boolean; } export default function History({ site, batchJobs, hasActiveBatches }: Props) { const { polling_interval_ms } = usePage().props; const isNavigating = useNavigationState(); // Track feature usage useEffect(() => { trackEvent(FEATURE_USED, { feature: 'batch_ai' }); }, []); // Poll when there are active batches useEffect(() => { if (hasActiveBatches) { const interval = setInterval(() => { router.reload({ only: ['batchJobs', 'hasActiveBatches'] }); }, polling_interval_ms); return () => clearInterval(interval); } }, [hasActiveBatches, polling_interval_ms]); return ( <>

Batch AI History

View past and current batch AI draft generation jobs

{batchJobs.data.length === 0 ? ( Go to Recommendations } /> ) : (
{batchJobs.data.map((batchJob) => ( ))}
)}
); } History.layout = (page: React.ReactNode) => {page};