6 catalog data and mode mappers (#25)

* supabase product proxy and rendering

* minor pipeline refactor

* refactoring and demand estimation

* trackion of date index searching

* fixing changes of imports

* data seeding

* chore: airline basic refactor

* feat: huge push of product changes and item review with cart

* refactored design

* chore: moving route elsewhere and align

* fix: build of web/

* chore: fixing paper build

* fixing chars

web/src/app/airline/products/[id]/page.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { Navigation } from '@/components/ui';
+import { useCart } from '@/contexts/CartContext';
+import AirlineDetails from '@/components/feats/airline/AirlineDetails';
+import { transformProduct, type Flight, type AirlineProduct } from '@/lib/airline-utils';
+import type { EventName } from '@/lib/events';
+
+const dispatchInteraction = (eventName: EventName, productId?: string, metadata?: Record<string, unknown>) => {
+    const e = new CustomEvent('definedInteraction', {
+        detail: { eventName, productId, metadata },
+    });
+    document.dispatchEvent(e);
+};
+
+export default function AirlineProductPage() {
+    const params = useParams();
+    const router = useRouter();
+    const { addItem } = useCart();
+    const [product, setProduct] = useState<Flight | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [added, setAdded] = useState(false);
+
+    const productId = params.id as string;
+
+    useEffect(() => {
+        const fetchProduct = async () => {
+            try {
+                const res = await fetch(`/api/products/${productId}`);
+                if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
+                const json = await res.json();
+                const transformed = transformProduct(json.data as AirlineProduct);
+                setProduct(transformed);
+
+                // fire learn_more_about_item event when product loads
+                dispatchInteraction('learn_more_about_item', productId, {
+                    type: 'airline',
+                    dateIndex: transformed.dateIndex,
+                    flightType: transformed.flightType,
+                });
+            } catch (e) {
+                setError(e instanceof Error ? e.message : 'Failed to load product');
+                console.error('[FETCH_FLIGHT_ERROR]', e);
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchProduct();
+    }, [productId]);
+
+    const handleAddToCart = () => {
+        if (!product) return;
+
+        addItem({
+            id: productId,
+            type: 'airline',
+            name: product.flightType,
+            price: product.basePrice,
+            metadata: {
+                departure: product.departure,
+                arrival: product.arrival,
+                duration: product.duration,
+                cabinClass: product.cabinClass,
+            },
+            dateIndex: product.dateIndex,
+        });
+
+        dispatchInteraction('add_item_to_cart', productId, {
+            type: 'airline',
+            price: product.basePrice,
+        });
+
+        setAdded(true);
+        setTimeout(() => setAdded(false), 2000);
+    };
+
+    return (
+        <>
+            <Navigation />
+            <main className="max-w-4xl mx-auto px-4 py-8">
+                {loading && <div className="text-center py-8">Loading flight details...</div>}
+                {error && <div className="text-red-500 text-center py-8">{error}</div>}
+
+                {!loading && !error && product && (
+                    <>
+                        <button
+                            onClick={() => router.back()}
+                            className="mt-6 text-blue-600 hover:underline"
+                        >
+                            ← Back to flights
+                        </button>
+                        <AirlineDetails
+                            product={product}
+                            onAddToCart={handleAddToCart}
+                            addedToCart={added}
+                        />
+
+                    </>
+                )}
+            </main>
+        </>
+    );
+}

web/src/app/airline/products/page.tsx

@@ -1,73 +1,69 @@
 'use client';
 
+import { useState, useEffect, Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
 import { Navigation } from '@/components/ui';
 import AirlineCard from '@/components/feats/airline/AirlineCard';
+import { transformProduct, type Flight, type AirlineProduct } from '@/lib/airline-utils';
 
-type CabinClass = 'economy' | 'premium' | 'business' | 'first';
-type FareRule = 'flexible' | 'standard' | 'basic';
+function FlightsList() {
+  const searchParams = useSearchParams();
+  const [flights, setFlights] = useState<Flight[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
-interface Flight {
-  id: string;
-  departure: { time: string; airport: string };
-  arrival: { time: string; airport: string };
-  duration: string;
-  stops: number;
-  cabinClass: CabinClass;
-  fareRule: FareRule;
-  refundable: boolean;
-  basePrice: number;
-}
+  useEffect(() => {
+    const fetchFlights = async () => {
+      try {
+        const url = new URL('/api/products', window.location.origin);
+        url.searchParams.set('type', 'airline');
 
-const genRandomFlights = (): Flight[] => {
-  const airports = ['JFK', 'LAX', 'ORD', 'ATL', 'DFW', 'SFO', 'SEA', 'MIA'];
-  const cabins: CabinClass[] = ['economy', 'premium', 'business', 'first'];
-  const fareRules: FareRule[] = ['flexible', 'standard', 'basic'];
+        // forward all relevant search params to the API
+        const params = ['dateIndex', 'origin', 'destination', 'tripType', 'adults', 'children', 'infants'];
+        params.forEach(param => {
+          const val = searchParams.get(param);
+          if (val) url.searchParams.set(param, val);
+        });
 
-  return Array.from({ length: 12 }, (_, i) => {
-    const depHour = Math.floor(Math.random() * 24);
-    const arrHour = (depHour + Math.floor(Math.random() * 6) + 2) % 24;
-    const stops = Math.random() > 0.6 ? 0 : Math.floor(Math.random() * 2) + 1;
-    const cabin = cabins[Math.floor(Math.random() * cabins.length)];
-    const fareRule = fareRules[Math.floor(Math.random() * fareRules.length)];
-
-    const basePrice = Math.floor(
-      (cabin === 'economy' ? 200 : cabin === 'premium' ? 400 : cabin === 'business' ? 800 : 1500) +
-      Math.random() * 300
-    );
-
-    return {
-      id: `flt-${i}`,
-      departure: {
-        time: `${depHour.toString().padStart(2, '0')}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}`,
-        airport: airports[Math.floor(Math.random() * airports.length)],
-      },
-      arrival: {
-        time: `${arrHour.toString().padStart(2, '0')}:${Math.floor(Math.random() * 60).toString().padStart(2, '0')}`,
-        airport: airports[Math.floor(Math.random() * airports.length)],
-      },
-      duration: `${Math.floor(Math.random() * 5) + 2}h ${Math.floor(Math.random() * 60)}m`,
-      stops,
-      cabinClass: cabin,
-      fareRule,
-      refundable: Math.random() > 0.7,
-      basePrice,
+        const res = await fetch(url.toString());
+        if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
+        const json = await res.json();
+        const transformed = json.data.map((p: AirlineProduct) => transformProduct(p));
+        setFlights(transformed);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Failed to load products');
+        console.error('[FETCH_ERROR]', e);
+      } finally {
+        setLoading(false);
+      }
     };
-  });
-};
-
-export default function AirlineProducts() {
-  const flights = genRandomFlights();
+    fetchFlights();
+  }, [searchParams]);
 
   return (
     <>
-      <Navigation />
-      <main className="max-w-7xl mx-auto px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">Available Flights</h1>
+      <h1 className="text-3xl font-bold mb-6">Available Flights</h1>
+      {loading && <div className="text-center py-8">Loading...</div>}
+      {error && <div className="text-red-500 text-center py-8">{error}</div>}
+      {!loading && !error && (
         <div className="space-y-4">
           {flights.map((f) => (
             <AirlineCard key={f.id} flight={f} />
           ))}
         </div>
+      )}
+    </>
+  );
+}
+
+export default function AirlineProducts() {
+  return (
+    <>
+      <Navigation />
+      <main className="max-w-7xl mx-auto px-4 py-8">
+        <Suspense fallback={<div className="text-center py-8">Loading...</div>}>
+          <FlightsList />
+        </Suspense>
       </main>
     </>
   );

web/src/app/api/products/[id]/route.ts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params;
+
+  if (!id) {
+    return NextResponse.json(
+      { error: 'product id is required' },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const backendUrl = process.env.BACKEND_URL || 'http://localhost:5000';
+    const url = new URL(`${backendUrl}/api/products/${id}`);
+
+    const res = await fetch(url.toString());
+
+    if (!res.ok) {
+      throw new Error(`Backend returned ${res.status}`);
+    }
+
+    const data = await res.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('[PRODUCT_DETAIL_ERROR]', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch product details' },
+      { status: 500 }
+    );
+  }
+}

web/src/app/api/products/route.ts

@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const type = searchParams.get('type');
+
+  if (!type || !['hotel', 'airline'].includes(type)) {
+    return NextResponse.json(
+      { error: 'type parameter must be "hotel" or "airline"' },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const backendUrl = process.env.BACKEND_URL || 'http://localhost:5000';
+    const url = new URL(`${backendUrl}/api/products/type/${type}`);
+
+    // forward all query params to backend (excluding 'type')
+    searchParams.forEach((value, key) => {
+      if (key !== 'type') {
+        url.searchParams.set(key, value);
+      }
+    });
+
+    const res = await fetch(url.toString());
+
+    if (!res.ok) {
+      throw new Error(`Backend returned ${res.status}`);
+    }
+
+    const data = await res.json();
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('[PRODUCTS_PROXY_ERROR]', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch products' },
+      { status: 500 }
+    );
+  }
+}

web/src/app/cart/page.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { Navigation } from '@/components/ui';
+import { useCart } from '@/contexts/CartContext';
+import type { EventName } from '@/lib/events';
+
+const dispatchInteraction = (eventName: EventName, productId?: string, metadata?: Record<string, unknown>) => {
+    const e = new CustomEvent('definedInteraction', {
+        detail: { eventName, productId, metadata },
+    });
+    document.dispatchEvent(e);
+};
+
+export default function CartPage() {
+    const { items, removeItem, clearCart, itemCount } = useCart();
+
+    const handleRemove = (id: string, type: string) => {
+        removeItem(id);
+        dispatchInteraction('remove_item', id, { type });
+    };
+    let itemTypes = Array.from(new Set(items.map(item => item.type)))[0] || 'items';
+
+
+    const total = items.reduce((sum, item) => sum + item.price, 0);
+
+    return (
+        <>
+            <Navigation />
+            <main className="max-w-4xl mx-auto px-4 py-8">
+                <div className="flex justify-between items-center mb-6">
+                    <h1 className="text-3xl font-bold">Shopping Cart</h1>
+                    {itemCount > 0 && (
+                        <button
+                            onClick={clearCart}
+                            className="text-sm text-red-600 hover:underline"
+                        >
+                            Clear cart
+                        </button>
+                    )}
+                </div>
+
+                {itemCount === 0 ? (
+                    <div className="text-center py-12">
+                        <p className="text-gray-500 mb-4">Your cart is empty</p>
+                        <a href="/" className="text-blue-600 hover:underline">Browse our selection</a>
+                    </div>
+                ) : (
+                    <>
+                        <div className="space-y-4 mb-8">
+                            {items.map(item => (
+                                <div
+                                    key={item.id}
+                                    className="flex justify-between items-start p-4 border rounded-lg hover:bg-gray-50"
+                                >
+                                    <div className="flex-1">
+                                        <div className="flex items-center gap-2 mb-1">
+                                            <span className="px-2 py-0.5 text-xs font-medium rounded bg-blue-100 text-blue-800">
+                                                {item.type}
+                                            </span>
+                                            <h3 className="font-semibold">{item.name}</h3>
+                                        </div>
+
+                                        {item.type === 'hotel' && (
+                                            <div className="text-sm text-gray-600">
+                                                <p>{String(item.metadata.roomType)}</p>
+                                                <p>{String(item.metadata.checkIn)} - {String(item.metadata.checkOut)}</p>
+                                                <p>{String(item.metadata.nights)} night{Number(item.metadata.nights) > 1 ? 's' : ''}</p>
+                                            </div>
+                                        )}
+
+                                        {item.type === 'airline' && (
+                                            <div className="text-sm text-gray-600">
+                                                <p>{String(item.metadata.cabinClass)} Class</p>
+                                                <p>{String((item.metadata.departure as any)?.airport)} → {String((item.metadata.arrival as any)?.airport)}</p>
+                                                <p>Duration: {String(item.metadata.duration)}</p>
+                                            </div>
+                                        )}
+                                    </div>
+
+                                    <div className="text-right ml-4">
+                                        <p className="text-xl font-bold mb-2">${item.price}</p>
+                                        <button
+                                            onClick={() => handleRemove(item.id, item.type)}
+                                            className="text-sm text-red-600 hover:underline"
+                                        >
+                                            Remove
+                                        </button>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+
+                        <div className="border-t pt-4">
+                            <div className="flex justify-between items-center mb-4">
+                                <span className="text-xl font-semibold">Total</span>
+                                <span className="text-3xl font-bold">${total.toFixed(2)}</span>
+                            </div>
+                            <button
+                                onClick={() => dispatchInteraction('checkout_start', undefined, { total, itemCount })}
+                                className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors"
+                            >
+                                Proceed to Checkout
+                            </button>
+                        </div>
+                    </>
+                )}
+            </main>
+        </>
+    );
+}

web/src/app/hotel/products/[id]/page.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { Navigation } from '@/components/ui';
+import { useCart } from '@/contexts/CartContext';
+import HotelDetails from '@/components/feats/hotel/HotelDetails';
+import { transformProduct, type Hotel, type HotelProduct } from '@/lib/hotel-utils';
+import type { EventName } from '@/lib/events';
+
+const dispatchInteraction = (eventName: EventName, productId?: string, metadata?: Record<string, unknown>) => {
+    const e = new CustomEvent('definedInteraction', {
+        detail: { eventName, productId, metadata },
+    });
+    document.dispatchEvent(e);
+};
+
+export default function HotelProductPage() {
+    const params = useParams();
+    const router = useRouter();
+    const { addItem } = useCart();
+    const [product, setProduct] = useState<Hotel | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [added, setAdded] = useState(false);
+
+    const productId = params.id as string;
+
+    useEffect(() => {
+        const fetchProduct = async () => {
+            try {
+                const res = await fetch(`/api/products/${productId}`);
+                if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
+                const json = await res.json();
+                const transformed = transformProduct(json.data as HotelProduct);
+                setProduct(transformed);
+
+                // fire learn_more_about_item event when product loads
+                dispatchInteraction('learn_more_about_item', productId, {
+                    type: 'hotel',
+                    dateIndex: transformed.dateIndex,
+                    roomType: transformed.roomType,
+                });
+            } catch (e) {
+                setError(e instanceof Error ? e.message : 'Failed to load product');
+                console.error('[FETCH_HOTEL_ERROR]', e);
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchProduct();
+    }, [productId]);
+
+    const handleAddToCart = () => {
+        if (!product) return;
+
+        addItem({
+            id: productId,
+            type: 'hotel',
+            name: product.name,
+            price: product.pricePerNight,
+            metadata: {
+                roomType: product.roomType,
+                nights: product.nights,
+                checkIn: product.checkIn,
+                checkOut: product.checkOut,
+            },
+            dateIndex: product.dateIndex,
+        });
+
+        dispatchInteraction('add_item_to_cart', productId, {
+            type: 'hotel',
+            price: product.pricePerNight,
+        });
+
+        setAdded(true);
+        setTimeout(() => setAdded(false), 2000);
+    };
+
+    return (
+        <>
+            <Navigation />
+            <main className="max-w-4xl mx-auto px-4 py-8">
+                {loading && <div className="text-center py-8">Loading hotel details...</div>}
+                {error && <div className="text-red-500 text-center py-8">{error}</div>}
+
+                {!loading && !error && product && (
+                    <>
+                        <button
+                            onClick={() => router.back()}
+                            className="mt-6 text-blue-600 hover:underline"
+                        >
+                            ← Back to rooms
+                        </button>
+                        <HotelDetails
+                            product={product}
+                            onAddToCart={handleAddToCart}
+                            addedToCart={added}
+                        />
+
+                    </>
+                )}
+            </main>
+        </>
+    );
+}

web/src/app/hotel/products/page.tsx

@@ -1,74 +1,69 @@
 'use client';
 
+import { useState, useEffect, Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
 import { Navigation } from '@/components/ui';
 import HotelCard from '@/components/feats/hotel/HotelCard';
+import { transformProduct, type Hotel, type HotelProduct } from '@/lib/hotel-utils';
 
-interface Hotel {
-  id: string;
-  name: string;
-  roomType: string;
-  checkIn: string;
-  checkOut: string;
-  amenities: string[];
-  refundable: boolean;
-  pricePerNight: number;
-  nights: number;
+function RoomsList() {
+  const searchParams = useSearchParams();
+  const [rooms, setRooms] = useState<Hotel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchRooms = async () => {
+      try {
+        const url = new URL('/api/products', window.location.origin);
+        url.searchParams.set('type', 'hotel');
+
+        // forward all relevant search params to the API
+        const params = ['dateIndex', 'destination', 'adults', 'rooms'];
+        params.forEach(param => {
+          const val = searchParams.get(param);
+          if (val) url.searchParams.set(param, val);
+        });
+
+        const res = await fetch(url.toString());
+        if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
+        const json = await res.json();
+        const transformed = json.data.map((p: HotelProduct) => transformProduct(p));
+        setRooms(transformed);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : 'Failed to load products');
+        console.error('[FETCH_ERROR]', e);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchRooms();
+  }, [searchParams]);
+
+  return (
+    <>
+      <h1 className="text-3xl font-bold mb-6">Available Rooms</h1>
+      {loading && <div className="text-center py-8">Loading...</div>}
+      {error && <div className="text-red-500 text-center py-8">{error}</div>}
+      {!loading && !error && (
+        <div className="space-y-4">
+          {rooms.map((r) => (
+            <HotelCard key={r.id} hotel={r} />
+          ))}
+        </div>
+      )}
+    </>
+  );
 }
 
-const genRandomHotels = (): Hotel[] => {
-  const names = [
-    'Grand Plaza Hotel',
-    'Seaside Resort',
-    'Downtown Suites',
-    'Mountain View Lodge',
-    'City Center Inn',
-    'Luxury Beach Resort',
-    'Urban Boutique Hotel',
-    'Garden View Hotel',
-  ];
-  const roomTypes = ['Standard Room', 'Deluxe Room', 'Suite', 'Executive Suite', 'Premium Room'];
-  const amenities = ['wifi', 'pool', 'gym', 'parking', 'breakfast', 'spa'];
-
-  return Array.from({ length: 10 }, (_, i) => {
-    const nights = Math.floor(Math.random() * 5) + 1;
-    const basePrice = Math.floor(80 + Math.random() * 220);
-    const selectedAmenities = amenities
-      .sort(() => Math.random() - 0.5)
-      .slice(0, Math.floor(Math.random() * 3) + 2);
-
-    const today = new Date();
-    const checkInDate = new Date(today);
-    checkInDate.setDate(today.getDate() + Math.floor(Math.random() * 10));
-    const checkOutDate = new Date(checkInDate);
-    checkOutDate.setDate(checkInDate.getDate() + nights);
-
-    return {
-      id: `htl-${i}`,
-      name: names[i % names.length],
-      roomType: roomTypes[Math.floor(Math.random() * roomTypes.length)],
-      checkIn: checkInDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
-      checkOut: checkOutDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
-      amenities: selectedAmenities,
-      refundable: Math.random() > 0.5,
-      pricePerNight: basePrice,
-      nights,
-    };
-  });
-};
-
 export default function HotelProducts() {
-  const hotels = genRandomHotels();
-
   return (
     <>
       <Navigation />
       <main className="max-w-7xl mx-auto px-4 py-8">
-        <h1 className="text-3xl font-bold mb-6">Available Hotels</h1>
-        <div className="space-y-4">
-          {hotels.map((h) => (
-            <HotelCard key={h.id} hotel={h} />
-          ))}
-        </div>
+        <Suspense fallback={<div className="text-center py-8">Loading...</div>}>
+          <RoomsList />
+        </Suspense>
       </main>
     </>
   );

web/src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { TrackingProvider } from "@/components/TrackingProvider";
+import { CartProvider } from "@/contexts/CartContext";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -28,7 +29,9 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <TrackingProvider>{children}</TrackingProvider>
+        <CartProvider>
+          <TrackingProvider>{children}</TrackingProvider>
+        </CartProvider>
       </body>
     </html>
   );

web/src/components/feats/airline/AirlineCard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type { EventName } from '@/lib/events';
+import type { Flight } from '@/lib/airline-utils';
 import { useHoverTracking } from '@/hooks/useHoverTracking';
 import PriceDisplay from '@/components/ui/PriceDisplay';
 
@@ -11,32 +12,17 @@ const dispatchInteraction = (eventName: EventName, productId?: string, metadata?
     document.dispatchEvent(e);
 };
 
-type CabinClass = 'economy' | 'premium' | 'business' | 'first';
-type FareRule = 'flexible' | 'standard' | 'basic';
-
-interface Flight {
-    id: string;
-    departure: { time: string; airport: string };
-    arrival: { time: string; airport: string };
-    duration: string;
-    stops: number;
-    cabinClass: CabinClass;
-    fareRule: FareRule;
-    refundable: boolean;
-    basePrice: number;
-}
-
 export default function AirlineCard({ flight }: { flight: Flight }) {
     const durationRef = useHoverTracking({
         eventName: 'hover_over_title',
         productId: flight.id,
-        metadata: { elementText: flight.duration },
+        metadata: { elementText: flight.duration, dateIndex: flight.dateIndex },
     });
 
     const priceRef = useHoverTracking({
         eventName: 'hover_over_paragraph',
         productId: flight.id,
-        metadata: { elementText: 'price' },
+        metadata: { elementText: 'price', dateIndex: flight.dateIndex },
     });
 
     const handleCardClick = () => {
@@ -44,7 +30,9 @@ export default function AirlineCard({ flight }: { flight: Flight }) {
             cabinClass: flight.cabinClass,
             fareRule: flight.fareRule,
             price: flight.basePrice,
+            dateIndex: flight.dateIndex,
         });
+        window.location.href = `/airline/products/${flight.id}`;
     };
 
     return (

web/src/components/feats/airline/AirlineDetails.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import type { Flight } from '@/lib/airline-utils';
+
+interface AirlineDetailsProps {
+  product: Flight;
+  onAddToCart: () => void;
+  addedToCart: boolean;
+}
+
+export default function AirlineDetails({ product, onAddToCart, addedToCart }: AirlineDetailsProps) {
+  return (
+    <div className="w-full flex flex-col lg:flex-row gap-12 py-8">
+      {/* Image Section */}
+      <div className="w-full lg:w-1/3 bg-gray-100 rounded-lg aspect-square flex items-center justify-center shrink-0">
+        <span className="text-gray-400 text-lg font-medium">Flight Image</span>
+      </div>
+
+      {/* Details Section */}
+      <div className="flex-1 flex flex-col">
+        <div className="flex justify-between items-start border-b pb-6 mb-6">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900 mb-1">{product.flightType}</h1>
+            <p className="text-lg text-gray-500">{product.cabinClass} Class</p>
+          </div>
+          <div className="text-right">
+            <p className="text-4xl font-bold text-gray-900">${product.basePrice}</p>
+            {product.refundable && (
+              <span className="inline-block mt-2 px-3 py-1 bg-green-50 text-green-700 rounded-full text-xs font-medium">
+                Refundable
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between mb-10">
+          <div className="text-center min-w-[100px]">
+            <p className="text-3xl font-bold text-gray-900">{product.departure.time}</p>
+            <p className="text-sm text-gray-500 font-medium mt-1">{product.departure.airport}</p>
+          </div>
+
+          <div className="flex-1 px-8 flex flex-col items-center">
+            <p className="text-sm text-gray-500 mb-2">{product.duration}</p>
+            <div className="w-full h-0.5 bg-gray-200 relative flex items-center justify-center">
+              <div className="absolute w-3 h-3 bg-gray-400 rounded-full"></div>
+            </div>
+            <p className="text-sm text-gray-500 mt-2">
+              {product.stops === 0 ? 'Nonstop' : `${product.stops} stop${product.stops > 1 ? 's' : ''}`}
+            </p>
+          </div>
+
+          <div className="text-center min-w-[100px]">
+            <p className="text-3xl font-bold text-gray-900">{product.arrival.time}</p>
+            <p className="text-sm text-gray-500 font-medium mt-1">{product.arrival.airport}</p>
+          </div>
+        </div>
+
+        <div className="mt-auto flex items-center justify-between pt-6 border-t">
+          <div className="text-gray-600">
+            <span className="font-bold text-gray-900">{product.availability}</span> seats remaining
+            <span className="mx-2">•</span>
+            {product.fareRule}
+          </div>
+          <button
+            onClick={onAddToCart}
+            disabled={addedToCart}
+            className="px-8 py-4 bg-black hover:bg-gray-800 disabled:bg-green-600 text-white rounded-lg text-lg font-medium transition-all min-w-[200px]"
+          >
+            {addedToCart ? 'In Cart' : 'Add to Cart'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/feats/airline/AirlineHero.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { useState, FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
 import { Button, Label, Input, DateInput, RadioGroup, Dropdown, DropdownCounter } from '@/components/ui';
+import { dateToDaysFromToday } from '@/lib/airline-utils';
 
 type TripType = 'roundtrip' | 'oneway' | 'multicity';
 
@@ -19,6 +21,7 @@ const LocationIcon = () => (
 );
 
 export default function AirlineHero() {
+  const router = useRouter();
   const [tripType, setTripType] = useState<TripType>('roundtrip');
   const [origin, setOrigin] = useState('');
   const [destination, setDestination] = useState('');
@@ -28,7 +31,23 @@ export default function AirlineHero() {
 
   const handleSearch = (e: FormEvent) => {
     e.preventDefault();
-    console.log({ tripType, origin, destination, departDate, returnDate, passengers });
+    const params = new URLSearchParams();
+
+    if (departDate) {
+      const daysOffset = dateToDaysFromToday(departDate);
+      params.set('dateIndex', daysOffset.toString());
+    }
+
+    if (origin) params.set('origin', origin);
+    if (destination) params.set('destination', destination);
+    if (tripType !== 'roundtrip') params.set('tripType', tripType);
+    if (returnDate && tripType === 'roundtrip') params.set('returnDate', returnDate);
+
+    params.set('adults', passengers.adults.toString());
+    params.set('children', passengers.children.toString());
+    params.set('infants', passengers.infants.toString());
+
+    router.push(`/airline/products?${params.toString()}`);
   };
 
   const totalPax = passengers.adults + passengers.children + passengers.infants;

web/src/components/feats/hotel/HotelCard.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type { EventName } from '@/lib/events';
+import type { Hotel } from '@/lib/hotel-utils';
 import { useHoverTracking } from '@/hooks/useHoverTracking';
 import PriceDisplay from '@/components/ui/PriceDisplay';
 
@@ -11,18 +12,6 @@ const dispatchInteraction = (eventName: EventName, productId?: string, metadata?
     document.dispatchEvent(e);
 };
 
-interface Hotel {
-    id: string;
-    name: string;
-    roomType: string;
-    checkIn: string;
-    checkOut: string;
-    amenities: string[];
-    refundable: boolean;
-    pricePerNight: number;
-    nights: number;
-}
-
 const AmenityIcon = ({ name }: { name: string }) => {
     const iconMap: Record<string, string> = {
         wifi: 'Wi-Fi',
@@ -39,13 +28,13 @@ export default function HotelCard({ hotel }: { hotel: Hotel }) {
     const titleRef = useHoverTracking({
         eventName: 'hover_over_title',
         productId: hotel.id,
-        metadata: { elementText: hotel.name },
+        metadata: { elementText: hotel.name, dateIndex: hotel.dateIndex },
     });
 
     const priceRef = useHoverTracking({
         eventName: 'hover_over_paragraph',
         productId: hotel.id,
-        metadata: { elementText: 'price' },
+        metadata: { elementText: 'price', dateIndex: hotel.dateIndex },
     });
 
     const handleCardClick = () => {
@@ -53,7 +42,9 @@ export default function HotelCard({ hotel }: { hotel: Hotel }) {
             roomType: hotel.roomType,
             price: hotel.pricePerNight,
             nights: hotel.nights,
+            dateIndex: hotel.dateIndex,
         });
+        window.location.href = `/hotel/products/${hotel.id}`;
     };
 
     return (

web/src/components/feats/hotel/HotelDetails.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import type { Hotel } from '@/lib/hotel-utils';
+
+interface HotelDetailsProps {
+  product: Hotel;
+  onAddToCart: () => void;
+  addedToCart: boolean;
+}
+
+export default function HotelDetails({ product, onAddToCart, addedToCart }: HotelDetailsProps) {
+  return (
+    <div className="w-full flex flex-col lg:flex-row gap-12 py-8">
+      {/* Image Section - Larger and cleaner */}
+      <div className="w-full lg:w-1/2 bg-gray-100 rounded-lg aspect-[4/3] flex items-center justify-center shrink-0">
+        <span className="text-gray-400 text-lg font-medium">Hotel Image</span>
+      </div>
+
+      {/* Details Section - Full height/width usage */}
+      <div className="flex-1 flex flex-col">
+        <div className="border-b pb-6 mb-6">
+          <h1 className="text-4xl font-bold text-gray-900 mb-2">{product.name}</h1>
+          <p className="text-xl text-gray-500">{product.roomType}</p>
+        </div>
+
+        <div className="grid grid-cols-2 gap-8 mb-8">
+          <div>
+            <h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-2">Check-in</h3>
+            <p className="text-lg text-gray-700">{product.checkIn}</p>
+          </div>
+          <div>
+            <h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-2">Check-out</h3>
+            <p className="text-lg text-gray-700">{product.checkOut}</p>
+          </div>
+        </div>
+
+        <div className="mb-8">
+          <h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wider mb-3">Amenities</h3>
+          <div className="flex flex-wrap gap-3">
+            {product.amenities.map(a => (
+              <span key={a} className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-md text-sm font-medium">
+                {a}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        {product.refundable && (
+          <div className="mb-8 p-4 bg-green-50 text-green-800 rounded-md inline-block">
+            <span className="font-medium">Free cancellation available</span>
+          </div>
+        )}
+
+        <div className="mt-auto pt-6 border-t flex items-center justify-between">
+          <div>
+            <p className="text-sm text-gray-500 mb-1">Total for {product.nights} night{product.nights > 1 ? 's' : ''}</p>
+            <div className="flex items-baseline gap-2">
+              <span className="text-4xl font-bold text-gray-900">${product.pricePerNight * product.nights}</span>
+              <span className="text-gray-500">/ {product.nights} nights</span>
+            </div>
+          </div>
+
+          <button
+            onClick={onAddToCart}
+            disabled={addedToCart}
+            className="px-8 py-4 bg-black hover:bg-gray-800 disabled:bg-green-600 text-white rounded-lg text-lg font-medium transition-all min-w-[200px]"
+          >
+            {addedToCart ? 'In Cart' : 'Add to Cart'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/feats/hotel/HotelHero.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { useState, FormEvent } from 'react';
+import { useRouter } from 'next/navigation';
 import { Button, Label, Input, DateInput, Dropdown, DropdownCounter } from '@/components/ui';
+import { dateToDaysFromToday } from '@/lib/hotel-utils';
 
 const LocationIcon = () => (
   <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -11,14 +13,25 @@ const LocationIcon = () => (
 );
 
 export default function HotelHero() {
+  const router = useRouter();
   const [destination, setDestination] = useState('');
   const [checkIn, setCheckIn] = useState('');
-  const [checkOut, setCheckOut] = useState('');
   const [guests, setGuests] = useState({ adults: 2, rooms: 1 });
 
   const handleSearch = (e: FormEvent) => {
     e.preventDefault();
-    console.log({ destination, checkIn, checkOut, guests });
+    const params = new URLSearchParams();
+
+    if (checkIn) {
+      const daysOffset = dateToDaysFromToday(checkIn);
+      params.set('dateIndex', daysOffset.toString());
+    }
+
+    if (destination) params.set('destination', destination);
+    params.set('adults', guests.adults.toString());
+    params.set('rooms', guests.rooms.toString());
+
+    router.push(`/hotel/products?${params.toString()}`);
   };
 
   return (
@@ -26,16 +39,16 @@ export default function HotelHero() {
       <div className="w-full max-w-4xl px-4">
         <div className="text-center mb-8">
           <h1 className="text-4xl md:text-5xl font-bold mb-4">
-            Find your perfect stay
+            Find your perfect room
           </h1>
           <p className="text-lg">
-            Search hotels, compare prices, and book with confidence
+            Search rooms, compare prices, and book with confidence
           </p>
         </div>
 
         <form onSubmit={handleSearch} className="search-form">
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-            <div className="sm:col-span-2">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div>
               <Label htmlFor="destination">Where to?</Label>
               <Input
                 type="text"
@@ -49,7 +62,7 @@ export default function HotelHero() {
             </div>
 
             <div>
-              <Label htmlFor="checkIn">Check-in</Label>
+              <Label htmlFor="checkIn">Date (1 night stay)</Label>
               <DateInput
                 id="checkIn"
                 value={checkIn}
@@ -59,43 +72,27 @@ export default function HotelHero() {
             </div>
 
             <div>
-              <Label htmlFor="checkOut">Check-out</Label>
-              <DateInput
-                id="checkOut"
-                value={checkOut}
-                onChange={(e) => setCheckOut(e.target.value)}
-                required
-              />
-            </div>
-
-            <div className="sm:col-span-2 lg:col-span-4">
-              <Label htmlFor="guests">Guests & Rooms</Label>
-              <Dropdown label={`${guests.adults} ${guests.adults === 1 ? 'adult' : 'adults'}, ${guests.rooms} ${guests.rooms === 1 ? 'room' : 'rooms'}`}>
+              <Label htmlFor="guests">Guests</Label>
+              <Dropdown label={`${guests.adults} ${guests.adults === 1 ? 'adult' : 'adults'}`}>
                 <DropdownCounter
                   label="Adults"
                   value={guests.adults}
                   min={1}
                   onChange={(v) => setGuests({ ...guests, adults: v })}
                 />
-                <DropdownCounter
-                  label="Rooms"
-                  value={guests.rooms}
-                  min={1}
-                  onChange={(v) => setGuests({ ...guests, rooms: v })}
-                />
               </Dropdown>
             </div>
 
-            <div className="sm:col-span-2 lg:col-span-4">
+            <div className="sm:col-span-2 lg:col-span-3">
               <Button type="submit" fullWidth>
-                Search Hotels
+                Search Rooms
               </Button>
             </div>
           </div>
         </form>
 
         <div className="mt-6 text-center text-sm">
-          <p>Over 2 million hotels worldwide · Best price guarantee · Free cancellation on most bookings</p>
+          <p>Over 2 million rooms worldwide · Best price guarantee · Free cancellation on most bookings</p>
         </div>
       </div>
     </div>

web/src/contexts/CartContext.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+export interface CartItem {
+  id: string;
+  type: 'hotel' | 'airline';
+  name: string;
+  price: number;
+  metadata: Record<string, unknown>;
+  dateIndex: number;
+}
+
+interface CartContextType {
+  items: CartItem[];
+  addItem: (item: CartItem) => void;
+  removeItem: (id: string) => void;
+  clearCart: () => void;
+  itemCount: number;
+}
+
+const CartContext = createContext<CartContextType | undefined>(undefined);
+
+const CART_KEY = 'phantom_cart';
+
+export const CartProvider = ({ children }: { children: ReactNode }) => {
+  const [items, setItems] = useState<CartItem[]>([]);
+  const [loaded, setLoaded] = useState(false);
+
+  // load cart from sessionStorage on mount
+  useEffect(() => {
+    const stored = sessionStorage.getItem(CART_KEY);
+    if (stored) {
+      try {
+        setItems(JSON.parse(stored));
+      } catch (e) {
+        console.error('[CART_LOAD]', e);
+      }
+    }
+    setLoaded(true);
+  }, []);
+
+  // persist to sessionStorage whenever cart changes
+  useEffect(() => {
+    if (!loaded) return;
+    sessionStorage.setItem(CART_KEY, JSON.stringify(items));
+  }, [items, loaded]);
+
+  const addItem = (item: CartItem) => {
+    setItems(prev => {
+      // prevent duplicates
+      if (prev.find(i => i.id === item.id)) return prev;
+      return [...prev, item];
+    });
+  };
+
+  const removeItem = (id: string) => {
+    setItems(prev => prev.filter(i => i.id !== id));
+  };
+
+  const clearCart = () => {
+    setItems([]);
+  };
+
+  return (
+    <CartContext.Provider value={{ items, addItem, removeItem, clearCart, itemCount: items.length }}>
+      {children}
+    </CartContext.Provider>
+  );
+};
+
+export const useCart = () => {
+  const ctx = useContext(CartContext);
+  if (!ctx) throw new Error('useCart must be used within CartProvider');
+  return ctx;
+};

web/src/lib/airline-utils.ts

@@ -0,0 +1,75 @@
+export interface AirlineProduct {
+  id: string;
+  flight_type: string;
+  date_index: number;
+  metadata: {
+    departure: { time: string; airport: string };
+    arrival: { time: string; airport: string };
+    duration: string;
+    stops: number;
+    cabin_class: string;
+    fare_rule: string;
+    refundable: boolean;
+    total?: number;
+    base_price: number;
+  };
+  availability: number;
+}
+
+export interface Flight {
+  id: string;
+  flightType: string;
+  departure: { time: string; airport: string };
+  arrival: { time: string; airport: string };
+  duration: string;
+  stops: number;
+  cabinClass: string;
+  fareRule: string;
+  refundable: boolean;
+  basePrice: number;
+  dateIndex: number;
+  availability: number;
+}
+
+const EPOCH = new Date(0);
+
+export const transformProduct = (p: AirlineProduct): Flight => {
+  const { id, flight_type, date_index, metadata, availability } = p;
+
+  return {
+    id,
+    flightType: flight_type,
+    departure: metadata.departure,
+    arrival: metadata.arrival,
+    duration: metadata.duration,
+    stops: metadata.stops,
+    cabinClass: metadata.cabin_class,
+    fareRule: metadata.fare_rule,
+    refundable: metadata.refundable,
+    basePrice: metadata.base_price,
+    dateIndex: date_index,
+    availability,
+  };
+};
+
+// convert date string to days from today
+export const dateToDaysFromToday = (dateStr: string): number => {
+  const target = new Date(dateStr);
+  target.setHours(0, 0, 0, 0);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return Math.floor((target.getTime() - today.getTime()) / 86400000);
+};
+
+// convert date string to date_index (days since epoch)
+export const dateToIndex = (dateStr: string): number => {
+  const d = new Date(dateStr);
+  return Math.floor((d.getTime() - EPOCH.getTime()) / 86400000);
+};
+
+// get current date_index
+export const todayIndex = (): number => {
+  const now = new Date();
+  now.setHours(0, 0, 0, 0);
+  return Math.floor((now.getTime() - EPOCH.getTime()) / 86400000);
+};

web/src/lib/hotel-utils.ts

@@ -0,0 +1,71 @@
+export interface HotelProduct {
+  id: string;
+  room_type: string;
+  date_index: number;
+  metadata: {
+    amenities?: string[];
+    total?: number;
+    image_url?: string;
+    base_price?: number;
+    name?: string;
+    refundable?: boolean;
+  };
+  availability: number;
+}
+
+export interface Hotel {
+  id: string;
+  name: string;
+  roomType: string;
+  checkIn: string;
+  checkOut: string;
+  dateIndex: number;
+  amenities: string[];
+  refundable: boolean;
+  pricePerNight: number;
+  nights: number;
+}
+
+const EPOCH = new Date(0);
+
+export const transformProduct = (p: HotelProduct): Hotel => {
+  const { id, room_type, date_index, metadata } = p;
+  const checkIn = new Date(EPOCH.getTime() + date_index * 86400000);
+  const nights = 1;
+  const checkOut = new Date(checkIn.getTime() + nights * 86400000);
+
+  return {
+    id,
+    name: metadata?.name || room_type,
+    roomType: room_type,
+    checkIn: checkIn.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+    checkOut: checkOut.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+    dateIndex: date_index,
+    amenities: metadata?.amenities || [],
+    refundable: metadata?.refundable || false,
+    pricePerNight: metadata?.base_price || 100,
+    nights,
+  };
+};
+
+// convert date string to days from today
+export const dateToDaysFromToday = (dateStr: string): number => {
+  const target = new Date(dateStr);
+  target.setHours(0, 0, 0, 0);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return Math.floor((target.getTime() - today.getTime()) / 86400000);
+};
+
+// convert date string to date_index (days since epoch)
+export const dateToIndex = (dateStr: string): number => {
+  const d = new Date(dateStr);
+  return Math.floor((d.getTime() - EPOCH.getTime()) / 86400000);
+};
+
+// get current date_index
+export const todayIndex = (): number => {
+  const now = new Date();
+  now.setHours(0, 0, 0, 0);
+  return Math.floor((now.getTime() - EPOCH.getTime()) / 86400000);
+};

web/src/lib/product-utils.ts

@@ -0,0 +1,25 @@
+import { HotelProduct, Hotel, transformProduct as transformHotel } from './hotel-utils';
+import { AirlineProduct, Flight, transformProduct as transformFlight } from './airline-utils';
+
+export type Product = Hotel | Flight;
+export type ProductRaw = HotelProduct | AirlineProduct;
+
+export const isHotelProduct = (p: ProductRaw): p is HotelProduct => {
+  return 'room_type' in p;
+};
+
+export const isAirlineProduct = (p: ProductRaw): p is AirlineProduct => {
+  return 'flight_type' in p;
+};
+
+export const transformProduct = (p: ProductRaw): Product => {
+  if (isHotelProduct(p)) {
+    return transformHotel(p);
+  }
+  return transformFlight(p);
+};
+
+export const getProductType = (p: Product): 'hotel' | 'airline' => {
+  if ('roomType' in p) return 'hotel';
+  return 'airline';
+};

web/src/proxy.ts

@@ -11,6 +11,7 @@ export function proxy(req: NextRequest) {
         pathname.startsWith('/_next') ||
         pathname.startsWith('/static') ||
         pathname.startsWith('/start-task') ||
+        pathname.startsWith('/cart') ||
         pathname.includes('.')
         // TODO: add robots.txt and sitemap.xml if needed here
     ) {