domverse/ciaovolo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement Phase 5 — Scan Details redesign

Browse Source 
- Breadcrumb: ← Dashboard / Scan #N with ArrowLeft icon
- Header card: PlaneTakeoff icon + route, StatusChip, metadata row
  (Calendar, Users, Armchair icons), created-at timestamp
- StatCards for Total Routes / Routes Scanned / Flights Found
- Progress card with Loader2 spinner + % bar (running/pending only)
- Routes table: sort indicators, IATA chips (font-mono + primary-container),
  ChevronRight rotates 90° on expand, min price green / avg+max muted
- Animated expand: max-height 0→600px CSS transition (no snap)
- Sub-table light green background (#F8FDF9) with nested indent
- EmptyState for completed 0 routes and failed scans

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
domverse
2026-02-27 15:00:30 +01:00
parent 45aa2d9aae
commit d87bbe5148
1 changed files with 303 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

448
flight-comparator/frontend/src/pages/ScanDetails.tsx
View File

@@ -1,7 +1,33 @@
import { Fragment, useEffect, useState } from 'react'; import { Fragment, useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; import { useParams, useNavigate } from 'react-router-dom';
import {
ArrowLeft,
PlaneTakeoff,
Calendar,
Users,
Armchair,
Clock,
ChevronRight,
ChevronUp,
ChevronDown,
MapPin,
AlertCircle,
Loader2,
} from 'lucide-react';
import { scanApi } from '../api'; import { scanApi } from '../api';
import type { Scan, Route, Flight } from '../api'; import type { Scan, Route, Flight } from '../api';
import StatusChip from '../components/StatusChip';
import type { ScanStatus } from '../components/StatusChip';
import StatCard from '../components/StatCard';
import EmptyState from '../components/EmptyState';
import { SkeletonStatCard, SkeletonTableRow } from '../components/SkeletonCard';
import { cn } from '../lib/utils';
const formatPrice = (price?: number) =>
price != null ? `€${price.toFixed(2)}` : '—';
const formatDate = (d: string) =>
new Date(d).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' });
export default function ScanDetails() { export default function ScanDetails() {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
@@ -18,35 +44,21 @@ export default function ScanDetails() {
const [loadingFlights, setLoadingFlights] = useState<string | null>(null); const [loadingFlights, setLoadingFlights] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
if (id) { if (id) loadScanDetails();
loadScanDetails();
}
}, [id, page]); }, [id, page]);
// Auto-refresh while scan is running // Auto-refresh while running / pending
useEffect(() => { useEffect(() => {
if (!scan || (scan.status !== 'pending' && scan.status !== 'running')) { if (!scan || (scan.status !== 'pending' && scan.status !== 'running')) return;
return; const interval = setInterval(() => loadScanDetails(), 3000);
}
const interval = setInterval(() => {
loadScanDetails();
}, 3000); // Poll every 3 seconds
return () => clearInterval(interval); return () => clearInterval(interval);
}, [scan?.status, id]); }, [scan?.status, id]);
// Re-sort when sort params change
useEffect(() => { useEffect(() => {
// Sort routes when sort field or direction changes
const sorted = [...routes].sort((a, b) => { const sorted = [...routes].sort((a, b) => {
let aVal: any = a[sortField]; let aVal: number | string = a[sortField] ?? (sortField === 'min_price' ? Infinity : '');
let bVal: any = b[sortField]; let bVal: number | string = b[sortField] ?? (sortField === 'min_price' ? Infinity : '');
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;
if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1; if (aVal > bVal) return sortDirection === 'asc' ? 1 : -1;
return 0; return 0;
@@ -57,16 +69,15 @@ export default function ScanDetails() {
const loadScanDetails = async () => { const loadScanDetails = async () => {
try { try {
setLoading(true); setLoading(true);
const [scanResponse, routesResponse] = await Promise.all([ const [scanResp, routesResp] = await Promise.all([
scanApi.get(Number(id)), scanApi.get(Number(id)),
scanApi.getRoutes(Number(id), page, 20), scanApi.getRoutes(Number(id), page, 20),
]); ]);
setScan(scanResp.data);
setScan(scanResponse.data); setRoutes(routesResp.data.data);
setRoutes(routesResponse.data.data); setTotalPages(routesResp.data.pagination.pages);
setTotalPages(routesResponse.data.pagination.pages); } catch (err) {
} catch (error) { console.error('Failed to load scan details:', err);
console.error('Failed to load scan details:', error);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@@ -74,7 +85,7 @@ export default function ScanDetails() {
const handleSort = (field: typeof sortField) => { const handleSort = (field: typeof sortField) => {
if (sortField === field) { if (sortField === field) {
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc'); setSortDirection(d => d === 'asc' ? 'desc' : 'asc');
} else { } else {
setSortField(field); setSortField(field);
setSortDirection('asc'); setSortDirection('asc');
@@ -82,260 +93,308 @@ export default function ScanDetails() {
}; };
const toggleFlights = async (destination: string) => { const toggleFlights = async (destination: string) => {
if (expandedRoute === destination) { if (expandedRoute === destination) { setExpandedRoute(null); return; }
setExpandedRoute(null);
return;
}
setExpandedRoute(destination); setExpandedRoute(destination);
if (flightsByDest[destination]) return; // already loaded if (flightsByDest[destination]) return;
setLoadingFlights(destination); setLoadingFlights(destination);
try { try {
const resp = await scanApi.getFlights(Number(id), destination, 1, 200); const resp = await scanApi.getFlights(Number(id), destination, 1, 200);
setFlightsByDest((prev) => ({ ...prev, [destination]: resp.data.data })); setFlightsByDest(prev => ({ ...prev, [destination]: resp.data.data }));
} catch { } catch {
setFlightsByDest((prev) => ({ ...prev, [destination]: [] })); setFlightsByDest(prev => ({ ...prev, [destination]: [] }));
} finally { } finally {
setLoadingFlights(null); setLoadingFlights(null);
} }
}; };
const getStatusColor = (status: string) => { const SortIcon = ({ field }: { field: typeof sortField }) => {
switch (status) { if (sortField !== field) return <ChevronUp size={14} className="opacity-30" />;
case 'completed': return 'bg-green-100 text-green-800'; return sortDirection === 'asc'
case 'running': return 'bg-blue-100 text-blue-800'; ? <ChevronUp size={14} className="text-primary" />
case 'pending': return 'bg-yellow-100 text-yellow-800'; : <ChevronDown size={14} className="text-primary" />;
case 'failed': return 'bg-red-100 text-red-800';
default: return 'bg-gray-100 text-gray-800';
}
}; };
const formatPrice = (price?: number) => { const thCls = (field?: typeof sortField) => cn(
return price ? `€${price.toFixed(2)}` : 'N/A'; 'px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider select-none',
}; field
? cn('cursor-pointer hover:bg-surface-2 transition-colors', sortField === field ? 'text-primary' : 'text-on-surface-variant')
: 'text-on-surface-variant',
);
// ── Loading skeleton ────────────────────────────────────────────
if (loading && !scan) { if (loading && !scan) {
return ( return (
<div className="flex justify-center items-center h-64"> <div className="space-y-4">
<div className="text-gray-500">Loading...</div> <div className="h-4 w-48 rounded skeleton" />
<div className="bg-surface rounded-lg shadow-level-1 p-6 h-32 skeleton" />
<div className="grid grid-cols-3 gap-3">
{[0, 1, 2].map(i => <SkeletonStatCard key={i} />)}
</div>
</div> </div>
); );
} }
if (!scan) { if (!scan) {
return ( return (
<div className="text-center py-12"> <EmptyState
<p className="text-gray-500">Scan not found</p> icon={AlertCircle}
</div> title="Scan not found"
description="This scan doesn't exist or may have been deleted."
action={{ label: '← Dashboard', onClick: () => navigate('/') }}
/>
); );
} }
const isActive = scan.status === 'pending' || scan.status === 'running';
const progress = scan.total_routes > 0
? Math.min((scan.routes_scanned / scan.total_routes) * 100, 100)
: 0;
return ( return (
<div> <div className="space-y-4">
{/* Header */}
<div className="mb-6"> {/* ── Breadcrumb ────────────────────────────────────────────── */}
<button <button
onClick={() => navigate('/')} onClick={() => navigate('/')}
className="text-blue-500 hover:text-blue-700 mb-4" className="inline-flex items-center gap-1.5 text-sm text-on-surface-variant hover:text-on-surface transition-colors"
> >
← Back to Dashboard <ArrowLeft size={16} />
<span>Dashboard</span>
<span className="text-outline">/</span>
<span>Scan #{id}</span>
</button> </button>
<div className="flex justify-between items-start">
<div> {/* ── Header card ───────────────────────────────────────────── */}
<h2 className="text-2xl font-bold text-gray-900"> <div className="bg-surface rounded-lg shadow-level-1 p-6">
{/* Row 1: route + status chip */}
<div className="flex items-start justify-between gap-3">
<div className="flex items-center gap-2 flex-wrap min-w-0">
<PlaneTakeoff size={20} className="text-primary shrink-0" aria-hidden="true" />
<h1 className="text-xl font-semibold text-on-surface">
{scan.origin} → {scan.country} {scan.origin} → {scan.country}
</h2> </h1>
<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>
<StatusChip status={scan.status as ScanStatus} />
</div> </div>
{/* Progress Bar (for running scans) */} {/* Row 2: metadata */}
{(scan.status === 'pending' || scan.status === 'running') && ( <div className="mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-sm text-on-surface-variant">
<div className="bg-white p-4 rounded-lg shadow mb-6"> <span className="inline-flex items-center gap-1.5">
<div className="flex justify-between items-center mb-2"> <Calendar size={14} aria-hidden="true" />
<span className="text-sm font-medium text-gray-700"> {formatDate(scan.start_date)} – {formatDate(scan.end_date)}
{scan.status === 'pending' ? 'Initializing...' : 'Scanning in progress...'}
</span> </span>
<span className="text-sm text-gray-600"> <span className="inline-flex items-center gap-1.5">
{scan.routes_scanned} / {scan.total_routes > 0 ? scan.total_routes : '?'} routes <Users size={14} aria-hidden="true" />
{scan.adults} adult{scan.adults !== 1 ? 's' : ''}
</span>
<span className="inline-flex items-center gap-1.5">
<Armchair size={14} aria-hidden="true" />
{scan.seat_class.charAt(0).toUpperCase() + scan.seat_class.slice(1)}
</span> </span>
</div> </div>
<div className="w-full bg-gray-200 rounded-full h-2.5">
{/* Row 3: created at (completed / failed) */}
{!isActive && (
<p className="mt-2 text-xs text-on-surface-variant inline-flex items-center gap-1.5">
<Clock size={12} aria-hidden="true" />
Created {formatDate(scan.created_at)}
</p>
)}
</div>
{/* ── Stat cards ────────────────────────────────────────────── */}
<div className="grid grid-cols-3 gap-3">
{loading ? (
[0, 1, 2].map(i => <SkeletonStatCard key={i} />)
) : (
<>
<StatCard label="Total Routes" value={scan.total_routes} icon={MapPin} variant="primary" />
<StatCard label="Routes Scanned" value={scan.routes_scanned} icon={ChevronDown} variant="secondary" />
<StatCard label="Flights Found" value={scan.total_flights} icon={PlaneTakeoff} variant="primary" />
</>
)}
</div>
{/* ── Progress card (running / pending) ─────────────────────── */}
{isActive && (
<div className="bg-surface rounded-lg shadow-level-1 p-5 border border-[#A8C7FA]">
<div className="flex items-center gap-2 mb-3">
<Loader2 size={16} className="text-primary animate-spin shrink-0" aria-hidden="true" />
<span className="text-sm font-medium text-on-surface">
{scan.status === 'pending' ? 'Initializing…' : 'Scanning in progress…'}
</span>
</div>
<div className="flex items-center gap-3">
<div className="flex-1 h-1 bg-surface-2 rounded-full overflow-hidden">
<div <div
className="bg-blue-600 h-2.5 rounded-full transition-all duration-300" className="h-full bg-primary rounded-full transition-all duration-300"
style={{ style={{ width: `${progress}%` }}
width: scan.total_routes > 0 />
? `${Math.min((scan.routes_scanned / scan.total_routes) * 100, 100)}%`
: '0%'
}}
></div>
</div> </div>
<p className="text-xs text-gray-500 mt-2"> <span className="text-xs text-on-surface-variant shrink-0 w-10 text-right">
Auto-refreshing every 3 seconds... {Math.round(progress)}%
</span>
</div>
<p className="mt-2 text-xs text-on-surface-variant">
{scan.routes_scanned} of {scan.total_routes > 0 ? scan.total_routes : '?'} routes · auto-refreshing every 3 s
</p> </p>
</div> </div>
)} )}
{/* Stats */} {/* ── Routes table ──────────────────────────────────────────── */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> <div className="bg-surface rounded-lg shadow-level-1 overflow-hidden">
<div className="bg-white p-4 rounded-lg shadow"> <div className="px-5 py-4 border-b border-outline">
<div className="text-sm text-gray-500">Total Routes</div> <h2 className="text-sm font-semibold text-on-surface">Routes Found</h2>
<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> </div>
{routes.length === 0 ? ( {routes.length === 0 ? (
<div className="px-6 py-12 text-center"> <div className="px-6 py-8">
{scan.status === 'completed' ? ( {scan.status === 'completed' ? (
<div> <EmptyState
<p className="text-gray-500 text-lg">No routes found</p> icon={MapPin}
<p className="text-gray-400 text-sm mt-2">No flights available for the selected route and dates.</p> title="No routes found"
</div> description="No direct flights for the selected airports and date range."
/>
) : scan.status === 'failed' ? ( ) : scan.status === 'failed' ? (
<div> <EmptyState
<p className="text-red-500 text-lg">Scan failed</p> icon={AlertCircle}
{scan.error_message && ( title="Scan failed"
<p className="text-gray-500 text-sm mt-2">{scan.error_message}</p> description={scan.error_message || 'An error occurred during the scan.'}
)} />
</div>
) : ( ) : (
<div> /* running/pending — progress card above handles this */
<div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-4"></div> <p className="text-center text-sm text-on-surface-variant py-4">
<p className="text-gray-500 text-lg">Scanning in progress...</p> Routes will appear here as they are discovered…
<p className="text-gray-400 text-sm mt-2">
Routes will appear here as they are discovered.
</p> </p>
</div>
)} )}
</div> </div>
) : ( ) : (
<> <>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="w-full"> <table className="w-full">
<thead className="bg-gray-50"> <thead className="bg-surface-2 border-b border-outline">
<tr> <tr>
<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" className={thCls('destination')}
onClick={() => handleSort('destination')} onClick={() => handleSort('destination')}
> >
Destination {sortField === 'destination' && (sortDirection === 'asc' ? '↑' : '↓')} <span className="inline-flex items-center gap-1">
</th> Destination <SortIcon field="destination" />
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> </span>
City
</th> </th>
<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" className={thCls('flight_count')}
onClick={() => handleSort('flight_count')} onClick={() => handleSort('flight_count')}
> >
Flights {sortField === 'flight_count' && (sortDirection === 'asc' ? '↑' : '↓')} <span className="inline-flex items-center gap-1">
</th> Flights <SortIcon field="flight_count" />
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> </span>
Airlines
</th> </th>
<th className={thCls()}>Airlines</th>
<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" className={thCls('min_price')}
onClick={() => handleSort('min_price')} onClick={() => handleSort('min_price')}
> >
Min Price {sortField === 'min_price' && (sortDirection === 'asc' ? '↑' : '↓')} <span className="inline-flex items-center gap-1">
</th> Min Price <SortIcon field="min_price" />
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"> </span>
Avg Price
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Max Price
</th> </th>
<th className={thCls()}>Avg</th>
<th className={thCls()}>Max</th>
</tr> </tr>
</thead> </thead>
<tbody className="bg-white divide-y divide-gray-200"> <tbody className="divide-y divide-outline">
{routes.map((route) => ( {routes.map((route) => {
const isExpanded = expandedRoute === route.destination;
return (
<Fragment key={route.id}> <Fragment key={route.id}>
<tr <tr
key={route.id} className="hover:bg-surface-2 cursor-pointer transition-colors duration-150"
className="hover:bg-gray-50 cursor-pointer"
onClick={() => toggleFlights(route.destination)} onClick={() => toggleFlights(route.destination)}
> >
<td className="px-6 py-4 whitespace-nowrap"> {/* Destination */}
<td className="px-4 py-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-gray-400 text-xs"> <ChevronRight
{expandedRoute === route.destination ? '▼' : '▶'} size={16}
className={cn(
'text-on-surface-variant shrink-0 transition-transform duration-200',
isExpanded && 'rotate-90',
)}
aria-hidden="true"
/>
<span className="font-mono text-primary bg-primary-container px-2 py-0.5 rounded-sm text-sm font-medium">
{route.destination}
</span>
<span className="text-sm text-on-surface-variant truncate max-w-[180px]">
{route.destination_name || route.destination_city || ''}
</span> </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> </div>
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> {/* Flights */}
{route.destination_city || 'N/A'} <td className="px-4 py-4 text-sm text-on-surface">
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
{route.flight_count} {route.flight_count}
</td> </td>
<td className="px-6 py-4 text-sm text-gray-500"> {/* Airlines */}
<div className="max-w-xs truncate"> <td className="px-4 py-4 text-sm text-on-surface-variant max-w-[200px]">
{route.airlines.join(', ')} <span className="truncate block">{route.airlines.join(', ')}</span>
</div>
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-green-600"> {/* Min price */}
<td className="px-4 py-4 text-sm font-medium text-secondary">
{formatPrice(route.min_price)} {formatPrice(route.min_price)}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> {/* Avg */}
<td className="px-4 py-4 text-sm text-on-surface-variant">
{formatPrice(route.avg_price)} {formatPrice(route.avg_price)}
</td> </td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> {/* Max */}
<td className="px-4 py-4 text-sm text-on-surface-variant">
{formatPrice(route.max_price)} {formatPrice(route.max_price)}
</td> </td>
</tr> </tr>
{expandedRoute === route.destination && (
{/* Expanded flights sub-row */}
<tr key={`${route.id}-flights`}> <tr key={`${route.id}-flights`}>
<td colSpan={7} className="px-0 py-0 bg-gray-50"> <td colSpan={6} className="p-0">
<div
className="overflow-hidden transition-all duration-250 ease-in-out"
style={{ maxHeight: isExpanded ? '600px' : '0' }}
>
<div className="bg-[#F8FDF9]">
{loadingFlights === route.destination ? ( {loadingFlights === route.destination ? (
<div className="px-8 py-4 text-sm text-gray-500">Loading flights...</div> <table className="w-full">
<tbody>
<SkeletonTableRow />
<SkeletonTableRow />
<SkeletonTableRow />
</tbody>
</table>
) : ( ) : (
<table className="w-full text-sm"> <table className="w-full">
<thead> <thead className="bg-[#EEF7F0]">
<tr className="bg-gray-100 text-xs text-gray-500 uppercase"> <tr>
<th className="px-8 py-2 text-left">Date</th> <th className="pl-12 pr-4 py-2 text-left text-xs font-semibold uppercase tracking-wider text-on-surface-variant">Date</th>
<th className="px-4 py-2 text-left">Airline</th> <th className="px-4 py-2 text-left text-xs font-semibold uppercase tracking-wider text-on-surface-variant">Airline</th>
<th className="px-4 py-2 text-left">Departure</th> <th className="px-4 py-2 text-left text-xs font-semibold uppercase tracking-wider text-on-surface-variant">Departure</th>
<th className="px-4 py-2 text-left">Arrival</th> <th className="px-4 py-2 text-left text-xs font-semibold uppercase tracking-wider text-on-surface-variant">Arrival</th>
<th className="px-4 py-2 text-left font-semibold text-green-700">Price</th> <th className="px-4 py-2 text-right text-xs font-semibold uppercase tracking-wider text-on-surface-variant">Price</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody className="divide-y divide-[#D4EDDA]">
{(flightsByDest[route.destination] || []).map((f) => ( {(flightsByDest[route.destination] || []).map((f) => (
<tr key={f.id} className="border-t border-gray-200 hover:bg-white"> <tr key={f.id} className="hover:bg-[#EEF7F0] transition-colors">
<td className="px-8 py-2 text-gray-700">{f.date}</td> <td className="pl-12 pr-4 py-2.5 text-sm text-on-surface">{f.date}</td>
<td className="px-4 py-2 text-gray-600">{f.airline || '—'}</td> <td className="px-4 py-2.5 text-sm text-on-surface-variant">{f.airline || '—'}</td>
<td className="px-4 py-2 text-gray-600">{f.departure_time || '—'}</td> <td className="px-4 py-2.5 text-sm text-on-surface-variant font-mono">{f.departure_time || '—'}</td>
<td className="px-4 py-2 text-gray-600">{f.arrival_time || '—'}</td> <td className="px-4 py-2.5 text-sm text-on-surface-variant font-mono">{f.arrival_time || '—'}</td>
<td className="px-4 py-2 font-medium text-green-600"> <td className="px-4 py-2.5 text-sm font-medium text-secondary text-right">
{f.price != null ? `€${f.price.toFixed(2)}` : '—'} {f.price != null ? `€${f.price.toFixed(2)}` : '—'}
</td> </td>
</tr> </tr>
))} ))}
{(flightsByDest[route.destination] || []).length === 0 && ( {(flightsByDest[route.destination] || []).length === 0 && (
<tr> <tr>
<td colSpan={5} className="px-8 py-3 text-gray-400 text-center"> <td colSpan={5} className="pl-12 py-4 text-sm text-on-surface-variant">
No flight details available No flight details available
</td> </td>
</tr> </tr>
@@ -343,33 +402,35 @@ export default function ScanDetails() {
</tbody> </tbody>
</table> </table>
)} )}
</div>
</div>
</td> </td>
</tr> </tr>
)}
</Fragment> </Fragment>
))} );
})}
</tbody> </tbody>
</table> </table>
</div> </div>
{/* Pagination */} {/* Pagination */}
{totalPages > 1 && ( {totalPages > 1 && (
<div className="px-6 py-4 border-t border-gray-200 flex justify-between items-center"> <div className="px-5 py-3 border-t border-outline flex items-center justify-between">
<div className="text-sm text-gray-500"> <span className="text-sm text-on-surface-variant">
Page {page} of {totalPages} Page {page} of {totalPages}
</div> </span>
<div className="flex space-x-2"> <div className="flex gap-2">
<button <button
onClick={() => setPage(page - 1)} onClick={() => setPage(p => p - 1)}
disabled={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" className="px-3 py-1.5 border border-outline rounded-xs text-sm text-on-surface hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
> >
Previous Previous
</button> </button>
<button <button
onClick={() => setPage(page + 1)} onClick={() => setPage(p => p + 1)}
disabled={page === totalPages} 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" className="px-3 py-1.5 border border-outline rounded-xs text-sm text-on-surface hover:bg-surface-2 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
> >
Next Next
</button> </button>
@@ -379,6 +440,7 @@ export default function ScanDetails() {
</> </>
)} )}
</div> </div>
</div> </div>
); );
} }