Add flight comparator web app with full scan pipeline
Full-stack flight price scanner built on fast-flights v3 (SOCS cookie bypass): Backend (FastAPI + SQLite): - REST API with rate limiting, Pydantic v2 validation, paginated responses - Scan pipeline: resolves airports, queries every day in the window, saves individual flights + aggregate route stats to SQLite - Background async scan processor with real-time progress tracking - Airport search endpoint backed by OpenFlights dataset - Daily scan window (all dates, not monthly samples) Frontend (React 19 + TypeScript + Tailwind CSS v4): - Dashboard with live scan status and recent scans - Create scan form: country mode or specific airports (searchable dropdown) - Scan detail page with expandable route rows showing individual flights (date, airline, departure, arrival, price) loaded on demand - AirportSearch component with debounced live search and multi-select Database: - scans → routes → flights schema with FK cascade and auto-update triggers - Migrations for schema evolution (relaxed country constraint) Tests: - 74 tests: unit + integration, isolated per-test SQLite DB - Confirmed flight fixtures in tests/confirmed_flights.json (50 real flights, BDS→FMM Ryanair + BDS→DUS Eurowings, scraped Feb 2026) - Integration tests parametrized from confirmed routes Docker: - Multi-stage builds, Compose orchestration, Nginx reverse proxy Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
384
flight-comparator/frontend/src/pages/ScanDetails.tsx
Normal file
384
flight-comparator/frontend/src/pages/ScanDetails.tsx
Normal file
@@ -0,0 +1,384 @@
|
||||
import { Fragment, useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { scanApi } from '../api';
|
||||
import type { Scan, Route, Flight } from '../api';
|
||||
|
||||
export default function ScanDetails() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [scan, setScan] = useState<Scan | null>(null);
|
||||
const [routes, setRoutes] = useState<Route[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPages, setTotalPages] = useState(1);
|
||||
const [sortField, setSortField] = useState<'min_price' | 'destination' | 'flight_count'>('min_price');
|
||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
|
||||
const [expandedRoute, setExpandedRoute] = useState<string | null>(null);
|
||||
const [flightsByDest, setFlightsByDest] = useState<Record<string, Flight[]>>({});
|
||||
const [loadingFlights, setLoadingFlights] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
loadScanDetails();
|
||||
}
|
||||
}, [id, page]);
|
||||
|
||||
// Auto-refresh while scan is running
|
||||
useEffect(() => {
|
||||
if (!scan || (scan.status !== 'pending' && scan.status !== 'running')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const interval = setInterval(() => {
|
||||
loadScanDetails();
|
||||
}, 3000); // Poll every 3 seconds
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [scan?.status, id]);
|
||||
|
||||
useEffect(() => {
|
||||
// Sort routes when sort field or direction changes
|
||||
const sorted = [...routes].sort((a, b) => {
|
||||
let aVal: any = a[sortField];
|
||||
let bVal: any = b[sortField];
|
||||
|
||||
if (sortField === 'min_price') {
|
||||
aVal = aVal ?? Infinity;
|
||||
bVal = bVal ?? Infinity;
|
||||
}
|
||||
|
||||
if (aVal < bVal) return sortDirection === 'asc' ? -1 : 1;
|
||||
if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
setRoutes(sorted);
|
||||
}, [sortField, sortDirection]);
|
||||
|
||||
const loadScanDetails = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [scanResponse, routesResponse] = await Promise.all([
|
||||
scanApi.get(Number(id)),
|
||||
scanApi.getRoutes(Number(id), page, 20),
|
||||
]);
|
||||
|
||||
setScan(scanResponse.data);
|
||||
setRoutes(routesResponse.data.data);
|
||||
setTotalPages(routesResponse.data.pagination.pages);
|
||||
} catch (error) {
|
||||
console.error('Failed to load scan details:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (field: typeof sortField) => {
|
||||
if (sortField === field) {
|
||||
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDirection('asc');
|
||||
}
|
||||
};
|
||||
|
||||
const toggleFlights = async (destination: string) => {
|
||||
if (expandedRoute === destination) {
|
||||
setExpandedRoute(null);
|
||||
return;
|
||||
}
|
||||
setExpandedRoute(destination);
|
||||
if (flightsByDest[destination]) return; // already loaded
|
||||
setLoadingFlights(destination);
|
||||
try {
|
||||
const resp = await scanApi.getFlights(Number(id), destination, 1, 200);
|
||||
setFlightsByDest((prev) => ({ ...prev, [destination]: resp.data.data }));
|
||||
} catch {
|
||||
setFlightsByDest((prev) => ({ ...prev, [destination]: [] }));
|
||||
} finally {
|
||||
setLoadingFlights(null);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
switch (status) {
|
||||
case 'completed': return 'bg-green-100 text-green-800';
|
||||
case 'running': return 'bg-blue-100 text-blue-800';
|
||||
case 'pending': return 'bg-yellow-100 text-yellow-800';
|
||||
case 'failed': return 'bg-red-100 text-red-800';
|
||||
default: return 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
};
|
||||
|
||||
const formatPrice = (price?: number) => {
|
||||
return price ? `€${price.toFixed(2)}` : 'N/A';
|
||||
};
|
||||
|
||||
if (loading && !scan) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-64">
|
||||
<div className="text-gray-500">Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!scan) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-gray-500">Scan not found</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="text-blue-500 hover:text-blue-700 mb-4"
|
||||
>
|
||||
← Back to Dashboard
|
||||
</button>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{scan.origin} → {scan.country}
|
||||
</h2>
|
||||
<p className="text-gray-600 mt-1">
|
||||
{scan.start_date} to {scan.end_date} • {scan.adults} adult(s) • {scan.seat_class}
|
||||
</p>
|
||||
</div>
|
||||
<span className={`px-3 py-1 text-sm font-medium rounded-full ${getStatusColor(scan.status)}`}>
|
||||
{scan.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar (for running scans) */}
|
||||
{(scan.status === 'pending' || scan.status === 'running') && (
|
||||
<div className="bg-white p-4 rounded-lg shadow mb-6">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
{scan.status === 'pending' ? 'Initializing...' : 'Scanning in progress...'}
|
||||
</span>
|
||||
<span className="text-sm text-gray-600">
|
||||
{scan.routes_scanned} / {scan.total_routes > 0 ? scan.total_routes : '?'} routes
|
||||
</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-200 rounded-full h-2.5">
|
||||
<div
|
||||
className="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: scan.total_routes > 0
|
||||
? `${Math.min((scan.routes_scanned / scan.total_routes) * 100, 100)}%`
|
||||
: '0%'
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-2">
|
||||
Auto-refreshing every 3 seconds...
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<div className="text-sm text-gray-500">Total Routes</div>
|
||||
<div className="text-2xl font-bold text-gray-900 mt-1">{scan.total_routes}</div>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<div className="text-sm text-gray-500">Routes Scanned</div>
|
||||
<div className="text-2xl font-bold text-gray-900 mt-1">{scan.routes_scanned}</div>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg shadow">
|
||||
<div className="text-sm text-gray-500">Total Flights</div>
|
||||
<div className="text-2xl font-bold text-gray-900 mt-1">{scan.total_flights}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Routes Table */}
|
||||
<div className="bg-white rounded-lg shadow overflow-hidden">
|
||||
<div className="px-6 py-4 border-b border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Routes Found</h3>
|
||||
</div>
|
||||
|
||||
{routes.length === 0 ? (
|
||||
<div className="px-6 py-12 text-center">
|
||||
{scan.status === 'completed' ? (
|
||||
<div>
|
||||
<p className="text-gray-500 text-lg">No routes found</p>
|
||||
<p className="text-gray-400 text-sm mt-2">No flights available for the selected route and dates.</p>
|
||||
</div>
|
||||
) : scan.status === 'failed' ? (
|
||||
<div>
|
||||
<p className="text-red-500 text-lg">Scan failed</p>
|
||||
{scan.error_message && (
|
||||
<p className="text-gray-500 text-sm mt-2">{scan.error_message}</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-4"></div>
|
||||
<p className="text-gray-500 text-lg">Scanning in progress...</p>
|
||||
<p className="text-gray-400 text-sm mt-2">
|
||||
Routes will appear here as they are discovered.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
|
||||
onClick={() => handleSort('destination')}
|
||||
>
|
||||
Destination {sortField === 'destination' && (sortDirection === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
City
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
|
||||
onClick={() => handleSort('flight_count')}
|
||||
>
|
||||
Flights {sortField === 'flight_count' && (sortDirection === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Airlines
|
||||
</th>
|
||||
<th
|
||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100"
|
||||
onClick={() => handleSort('min_price')}
|
||||
>
|
||||
Min Price {sortField === 'min_price' && (sortDirection === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Avg Price
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Max Price
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{routes.map((route) => (
|
||||
<Fragment key={route.id}>
|
||||
<tr
|
||||
key={route.id}
|
||||
className="hover:bg-gray-50 cursor-pointer"
|
||||
onClick={() => toggleFlights(route.destination)}
|
||||
>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-400 text-xs">
|
||||
{expandedRoute === route.destination ? '▼' : '▶'}
|
||||
</span>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{route.destination}</div>
|
||||
<div className="text-sm text-gray-500">{route.destination_name}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{route.destination_city || 'N/A'}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
||||
{route.flight_count}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-500">
|
||||
<div className="max-w-xs truncate">
|
||||
{route.airlines.join(', ')}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600">
|
||||
{formatPrice(route.min_price)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{formatPrice(route.avg_price)}
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{formatPrice(route.max_price)}
|
||||
</td>
|
||||
</tr>
|
||||
{expandedRoute === route.destination && (
|
||||
<tr key={`${route.id}-flights`}>
|
||||
<td colSpan={7} className="px-0 py-0 bg-gray-50">
|
||||
{loadingFlights === route.destination ? (
|
||||
<div className="px-8 py-4 text-sm text-gray-500">Loading flights...</div>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-100 text-xs text-gray-500 uppercase">
|
||||
<th className="px-8 py-2 text-left">Date</th>
|
||||
<th className="px-4 py-2 text-left">Airline</th>
|
||||
<th className="px-4 py-2 text-left">Departure</th>
|
||||
<th className="px-4 py-2 text-left">Arrival</th>
|
||||
<th className="px-4 py-2 text-left font-semibold text-green-700">Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(flightsByDest[route.destination] || []).map((f) => (
|
||||
<tr key={f.id} className="border-t border-gray-200 hover:bg-white">
|
||||
<td className="px-8 py-2 text-gray-700">{f.date}</td>
|
||||
<td className="px-4 py-2 text-gray-600">{f.airline || '—'}</td>
|
||||
<td className="px-4 py-2 text-gray-600">{f.departure_time || '—'}</td>
|
||||
<td className="px-4 py-2 text-gray-600">{f.arrival_time || '—'}</td>
|
||||
<td className="px-4 py-2 font-medium text-green-600">
|
||||
{f.price != null ? `€${f.price.toFixed(2)}` : '—'}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{(flightsByDest[route.destination] || []).length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} className="px-8 py-3 text-gray-400 text-center">
|
||||
No flight details available
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</Fragment>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="px-6 py-4 border-t border-gray-200 flex justify-between items-center">
|
||||
<div className="text-sm text-gray-500">
|
||||
Page {page} of {totalPages}
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={() => setPage(page - 1)}
|
||||
disabled={page === 1}
|
||||
className="px-3 py-1 border border-gray-300 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPage(page + 1)}
|
||||
disabled={page === totalPages}
|
||||
className="px-3 py-1 border border-gray-300 rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user