a540ab97b1
- Transfer user's browser fingerprint (user-agent, viewport, timezone, language, geolocation) to Chrome for more authentic scraping - Display review topics from Google Maps in analytics dashboard - Show business category badge in analytics header - Fix date_text null handling in analytics (handle undefined/timestamp fields) - Add review_topics and business_category to JobStatus interface Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
264 lines
10 KiB
TypeScript
264 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import ScraperTest, { JobStatus } from '@/components/ScraperTest';
|
|
import ReviewAnalytics from '@/components/ReviewAnalytics';
|
|
import Sidebar from '@/components/Sidebar';
|
|
import JobsView from '@/components/JobsView';
|
|
import { useState, useCallback, useEffect } from 'react';
|
|
|
|
interface Review {
|
|
author: string;
|
|
rating: number;
|
|
text: string | null;
|
|
date_text: string;
|
|
avatar_url: string | null;
|
|
profile_url: string | null;
|
|
review_id: string;
|
|
}
|
|
|
|
interface ReviewWithNew extends Review {
|
|
is_new?: boolean;
|
|
}
|
|
|
|
interface SelectedJob {
|
|
reviews: ReviewWithNew[];
|
|
businessName: string;
|
|
businessUrl: string;
|
|
jobId: string;
|
|
newCount?: number;
|
|
previousJobId?: string;
|
|
businessCategory?: string;
|
|
reviewTopics?: { topic: string; count: number }[];
|
|
}
|
|
|
|
type ViewType = 'newScrape' | 'jobs' | 'reports';
|
|
|
|
export default function Home() {
|
|
const [activeView, setActiveView] = useState<ViewType>('newScrape');
|
|
const [jobs, setJobs] = useState<JobStatus[]>([]);
|
|
const [selectedJob, setSelectedJob] = useState<SelectedJob | null>(null);
|
|
const [isLoadingJob, setIsLoadingJob] = useState<string | null>(null);
|
|
|
|
// Load jobs from API
|
|
const refreshJobs = useCallback(async () => {
|
|
try {
|
|
const response = await fetch('/api/jobs?limit=100');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
if (data.jobs) {
|
|
setJobs(data.jobs);
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load jobs:', err);
|
|
}
|
|
}, []);
|
|
|
|
// Load jobs from API on mount
|
|
useEffect(() => {
|
|
refreshJobs();
|
|
}, [refreshJobs]);
|
|
|
|
const handleJobsChange = useCallback((newJobs: JobStatus[]) => {
|
|
setJobs(prev => {
|
|
// Merge new jobs with existing, updating duplicates
|
|
const jobMap = new Map(prev.map(j => [j.job_id, j]));
|
|
newJobs.forEach(job => jobMap.set(job.job_id, job));
|
|
return Array.from(jobMap.values());
|
|
});
|
|
}, []);
|
|
|
|
const handleSelectReviews = useCallback((reviews: Review[], businessName: string, jobId: string, businessUrl?: string) => {
|
|
setSelectedJob({ reviews, businessName, businessUrl: businessUrl || '', jobId });
|
|
setActiveView('reports');
|
|
}, []);
|
|
|
|
const loadJobReviews = async (job: JobStatus, previousJob?: JobStatus) => {
|
|
if (job.status !== 'completed' || !job.reviews_count) return;
|
|
|
|
setIsLoadingJob(job.job_id);
|
|
try {
|
|
// Use compare API if we have a previous job
|
|
const url = previousJob
|
|
? `/api/jobs/${job.job_id}/compare?previous=${previousJob.job_id}`
|
|
: `/api/jobs/${job.job_id}/reviews?limit=10000`;
|
|
|
|
const response = await fetch(url);
|
|
if (!response.ok) throw new Error('Failed to fetch reviews');
|
|
const data = await response.json();
|
|
|
|
const reviews = data.reviews || [];
|
|
if (reviews.length > 0) {
|
|
// Extract business name from URL query param as fallback
|
|
let businessName = job.business_name;
|
|
if (!businessName) {
|
|
try {
|
|
const urlObj = new URL(job.url);
|
|
const query = urlObj.searchParams.get('query');
|
|
businessName = query ? decodeURIComponent(query) : 'Unknown Business';
|
|
} catch {
|
|
businessName = 'Unknown Business';
|
|
}
|
|
}
|
|
|
|
setSelectedJob({
|
|
reviews,
|
|
businessName,
|
|
businessUrl: job.url,
|
|
jobId: job.job_id,
|
|
newCount: data.new_count,
|
|
previousJobId: previousJob?.job_id,
|
|
businessCategory: job.business_category || undefined,
|
|
reviewTopics: job.review_topics || undefined,
|
|
});
|
|
setActiveView('reports');
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load job reviews:', err);
|
|
} finally {
|
|
setIsLoadingJob(null);
|
|
}
|
|
};
|
|
|
|
const renderMainContent = () => {
|
|
switch (activeView) {
|
|
case 'newScrape':
|
|
return (
|
|
<div className="h-full overflow-y-auto p-6">
|
|
<ScraperTest onJobsChange={handleJobsChange} onSelectReviews={handleSelectReviews} />
|
|
</div>
|
|
);
|
|
|
|
case 'jobs':
|
|
return (
|
|
<JobsView
|
|
jobs={jobs}
|
|
onSelectJob={loadJobReviews}
|
|
isLoadingJob={isLoadingJob}
|
|
onRefresh={refreshJobs}
|
|
/>
|
|
);
|
|
|
|
case 'reports': {
|
|
// Get completed jobs with reviews
|
|
const completedJobs = jobs
|
|
.filter(j => j.status === 'completed' && j.reviews_count && j.reviews_count > 0)
|
|
.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
|
|
|
|
return selectedJob ? (
|
|
<div className="h-full overflow-y-auto p-6">
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<h2 className="text-xl font-bold text-gray-900">Analytics</h2>
|
|
<button
|
|
onClick={() => setSelectedJob(null)}
|
|
className="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg font-medium transition-colors flex items-center gap-2"
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Back to Reports
|
|
</button>
|
|
</div>
|
|
<ReviewAnalytics reviews={selectedJob.reviews} businessName={selectedJob.businessName} businessUrl={selectedJob.businessUrl} newCount={selectedJob.newCount} businessCategory={selectedJob.businessCategory} reviewTopics={selectedJob.reviewTopics} />
|
|
</div>
|
|
) : (
|
|
<div className="h-full overflow-y-auto p-6">
|
|
<div className="mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-900">Reports</h2>
|
|
<p className="text-sm text-gray-600 mt-1">
|
|
{completedJobs.length} completed {completedJobs.length === 1 ? 'scrape' : 'scrapes'} with reviews
|
|
</p>
|
|
</div>
|
|
|
|
{completedJobs.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-16 text-gray-500">
|
|
<svg className="w-20 h-20 mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} 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>
|
|
<h3 className="text-xl font-semibold text-gray-700 mb-2">No Reports Yet</h3>
|
|
<p className="text-sm text-gray-500 mb-4">Complete a scrape job to see analytics reports</p>
|
|
<button
|
|
onClick={() => setActiveView('newScrape')}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
|
|
>
|
|
Start New Scrape
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{completedJobs.map(job => {
|
|
// Extract business name from URL as fallback
|
|
let businessName = job.business_name;
|
|
if (!businessName) {
|
|
try {
|
|
const urlObj = new URL(job.url);
|
|
const query = urlObj.searchParams.get('query');
|
|
businessName = query ? decodeURIComponent(query) : 'Unknown Business';
|
|
} catch {
|
|
businessName = 'Unknown Business';
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={job.job_id}
|
|
onClick={() => loadJobReviews(job)}
|
|
className="bg-white rounded-xl border-2 border-gray-200 p-5 cursor-pointer hover:border-blue-400 hover:shadow-lg transition-all"
|
|
>
|
|
<div className="flex items-start justify-between mb-3">
|
|
<h3 className="font-bold text-gray-900 truncate flex-1" title={businessName}>
|
|
{businessName}
|
|
</h3>
|
|
{job.rating_snapshot && (
|
|
<span className="flex items-center gap-1 text-yellow-600 font-semibold ml-2">
|
|
<svg className="w-4 h-4" 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>
|
|
{job.rating_snapshot.toFixed(1)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 text-sm text-gray-600 mb-3">
|
|
<span className="font-semibold text-blue-700">{job.reviews_count} reviews</span>
|
|
{job.scrape_time && <span>{job.scrape_time.toFixed(1)}s</span>}
|
|
</div>
|
|
|
|
<div className="text-xs text-gray-500">
|
|
{new Date(job.created_at).toLocaleDateString()} at {new Date(job.created_at).toLocaleTimeString()}
|
|
</div>
|
|
|
|
{isLoadingJob === job.job_id && (
|
|
<div className="mt-3 flex items-center gap-2 text-blue-600">
|
|
<div className="w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
|
<span className="text-sm font-medium">Loading...</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="h-screen w-screen overflow-hidden flex">
|
|
{/* Sidebar */}
|
|
<Sidebar
|
|
activeView={activeView}
|
|
onViewChange={setActiveView}
|
|
jobCount={jobs.length}
|
|
/>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 bg-gray-50 overflow-hidden">
|
|
{renderMainContent()}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|