Separate Airbnb and Booking results into distinct sections and increase to top 15 each

api.py

@@ -76,13 +76,14 @@ async def search_deals(
     )
     print(f"--- [API Request] Agent fertig. {results.get('total_deals_found')} Deals gefunden.")
     
-    # Optional: Ensure image_url has a fallback for the frontend
-    final_deals = results.get("top_10_deals", [])
-    for deal in final_deals:
-        if not deal.get("image_url"):
-            deal["image_url"] = "https://via.placeholder.com/800x450.png?text=KEIN+BILD+GEFUNDEN"
-    
-    results["top_10_deals"] = final_deals
+    # Process all deal lists for image fallbacks
+    for key in ["top_10_deals", "top_airbnb_deals", "top_booking_deals"]:
+        deals = results.get(key, [])
+        for deal in deals:
+            if not deal.get("image_url"):
+                deal["image_url"] = "https://via.placeholder.com/800x450.png?text=KEIN+BILD+GEFUNDEN"
+        results[key] = deals
+        
     return results
 
 if __name__ == "__main__":

frontend_dashboard.html

@@ -45,18 +45,18 @@
                 <div class="grid grid-cols-2 gap-2">
                     <div>
                         <label class="block text-sm font-medium text-gray-700">Check-In</label>
-                        <input type="date" id="input-checkin" value="2026-02-15" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm p-2 bg-gray-50 border">
+                        <input type="date" id="input-checkin" value="2026-03-08" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm p-2 bg-gray-50 border">
                     </div>
                     <div>
                         <label class="block text-sm font-medium text-gray-700">Check-Out</label>
-                        <input type="date" id="input-checkout" value="2026-02-22" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm p-2 bg-gray-50 border">
+                        <input type="date" id="input-checkout" value="2026-03-15" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm p-2 bg-gray-50 border">
                     </div>
                 </div>
 
                 <div class="grid grid-cols-2 gap-2">
                     <div>
                         <label class="block text-sm font-medium text-gray-700">Erwachsene</label>
-                        <input type="number" id="input-adults" value="4" min="1" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm p-2 bg-gray-50 border">
+                        <input type="number" id="input-adults" value="2" min="1" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm p-2 bg-gray-50 border">
                     </div>
                     <div>
                         <label class="block text-sm font-medium text-gray-700">Kinder</label>
@@ -88,22 +88,38 @@
 
         <!-- Main Content -->
         <main class="w-full lg:w-3/4">
-            <div class="flex justify-between items-end mb-6">
-                <div>
-                    <h2 class="text-3xl font-bold text-gray-800">Top Empfehlungen</h2>
-                    <p id="status-text" class="text-gray-500">Gefundene Deals für Holland im Februar 2026</p>
-                </div>
-                <div class="text-sm text-gray-500">Sortiert nach: <span class="font-semibold text-emerald-600 underline">Beste Bewertung</span></div>
+            <div class="mb-8">
+                <h2 class="text-3xl font-bold text-gray-800">Deine Urlaubs-Deals</h2>
+                <p id="status-text" class="text-gray-500">Gefundene Deals für Holland</p>
             </div>
 
-            <!-- Deal Grid -->
-            <div id="deal-grid" class="grid md:grid-cols-2 gap-6">
-                <!-- Initialer Lade-Zustand oder Platzhalter -->
-                <div class="col-span-2 text-center py-20 text-gray-400">
-                    <i class="fa-solid fa-search fa-3x mb-4"></i>
-                    <p>Klicke auf "Angebote finden", um die Suche zu starten.</p>
+            <!-- Airbnb Section -->
+            <section class="mb-12">
+                <div class="flex items-center mb-6 border-b pb-2">
+                    <i class="fa-brands fa-airbnb text-red-500 text-2xl mr-3"></i>
+                    <h2 class="text-2xl font-bold text-gray-700">Airbnb Empfehlungen</h2>
                 </div>
-            </div>
+                <div id="airbnb-grid" class="grid md:grid-cols-2 gap-6">
+                    <div class="col-span-2 text-center py-10 text-gray-400">
+                        <i class="fa-solid fa-search fa-2x mb-2"></i>
+                        <p>Noch keine Suche gestartet.</p>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Booking Section -->
+            <section>
+                <div class="flex items-center mb-6 border-b pb-2">
+                    <i class="fa-solid fa-hotel text-blue-600 text-2xl mr-3"></i>
+                    <h2 class="text-2xl font-bold text-gray-700">Booking.com Favoriten</h2>
+                </div>
+                <div id="booking-grid" class="grid md:grid-cols-2 gap-6">
+                    <div class="col-span-2 text-center py-10 text-gray-400">
+                        <i class="fa-solid fa-search fa-2x mb-2"></i>
+                        <p>Noch keine Suche gestartet.</p>
+                    </div>
+                </div>
+            </section>
         </main>
     </div>
 
@@ -116,7 +132,8 @@
 
     <script>
         const searchBtn = document.getElementById('search-btn');
-        const dealGrid = document.getElementById('deal-grid');
+        const airbnbGrid = document.getElementById('airbnb-grid');
+        const bookingGrid = document.getElementById('booking-grid');
         const statusText = document.getElementById('status-text');
 
         searchBtn.addEventListener('click', async () => {
@@ -137,65 +154,74 @@
             // Lade-Anzeige
             searchBtn.disabled = true;
             searchBtn.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin mr-2"></i> Suche läuft...';
-            dealGrid.innerHTML = '<div class="col-span-2 text-center py-20"><i class="fa-solid fa-compass fa-spin fa-3x text-emerald-600 mb-4"></i><p class="text-lg font-bold">Live-Suche aktiv...</p><p class="text-gray-500">Wir durchsuchen Booking.com und Airbnb (ca. 60 Sek.)</p></div>';
+            
+            const loadingHtml = '<div class="col-span-2 text-center py-20"><i class="fa-solid fa-compass fa-spin fa-3x text-emerald-600 mb-4"></i><p class="text-lg font-bold">Suche läuft...</p></div>';
+            airbnbGrid.innerHTML = loadingHtml;
+            bookingGrid.innerHTML = loadingHtml;
 
             try {
                 const url = `/search?cities=${encodeURIComponent(cities)}&checkin=${checkin}&checkout=${checkout}&adults=${adults}&children=${children}&pets=${pets}&budget=${budget}&budget_type=${budgetType}`;
                 const response = await fetch(url);
                 const data = await response.json();
 
-                renderDeals(data.top_10_deals);
-                statusText.innerText = `${data.top_10_deals.length} echte Deals verifiziert für ${data.search_params.nights} Nächte`;
+                renderDeals(data.top_airbnb_deals, 'airbnb');
+                renderDeals(data.top_booking_deals, 'booking');
+                
+                statusText.innerText = `${data.total_deals_found} Deals verarbeitet für ${data.search_params.nights} Nächte`;
             } catch (error) {
                 console.error('Error:', error);
-                dealGrid.innerHTML = '<div class="col-span-2 text-center py-20 text-red-500"><i class="fa-solid fa-circle-exclamation fa-3x mb-4"></i><p>Fehler bei der Suche. Ist das Backend online?</p></div>';
+                const errorHtml = '<div class="col-span-2 text-center py-20 text-red-500"><i class="fa-solid fa-circle-exclamation fa-3x mb-4"></i><p>Fehler bei der Suche.</p></div>';
+                airbnbGrid.innerHTML = errorHtml;
+                bookingGrid.innerHTML = errorHtml;
             } finally {
                 searchBtn.disabled = false;
                 searchBtn.innerHTML = 'Angebote finden';
             }
         });
 
-        function renderDeals(deals) {
+        function renderDeals(deals, source) {
+            const targetGrid = document.getElementById(source + '-grid');
             if (!deals || deals.length === 0) {
-                dealGrid.innerHTML = '<div class="col-span-2 text-center py-20"><p>Keine Angebote gefunden. Versuche es mit anderen Daten oder Zielen.</p></div>';
+                targetGrid.innerHTML = '<div class="col-span-2 text-center py-10"><p class="text-gray-400 italic">Keine passenden Angebote für diese Quelle gefunden.</p></div>';
                 return;
             }
 
-            dealGrid.innerHTML = deals.map(deal => `
-                <div class="deal-card bg-white rounded-2xl shadow-sm overflow-hidden border border-gray-100 flex flex-col">
+            targetGrid.innerHTML = deals.map(deal => `
+                <div class="deal-card bg-white rounded-2xl shadow-sm overflow-hidden border border-gray-100 flex flex-col h-full">
                     <div class="relative h-48 bg-gray-200">
                         <img src="${deal.image_url}" 
                              onerror="this.src='https://via.placeholder.com/800x450.png?text=BILD-LADE-FEHLER'"
                              alt="${deal.name}" 
                              class="object-cover w-full h-full">
                         <div class="absolute top-4 left-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-emerald-700 flex items-center">
-                            <i class="fa-solid fa-sun mr-1"></i> Wetter Bonus aktiv
+                            <i class="fa-solid fa-star text-yellow-500 mr-1"></i> ${deal.rating}
                         </div>
                         <div class="absolute top-4 right-4 bg-emerald-600 text-white px-3 py-1 rounded-full text-xs font-bold">
-                            ${deal.rank_score} Score
+                            Score: ${deal.rank_score}
                         </div>
                     </div>
-                    <div class="p-5 flex-grow">
+                    <div class="p-5 flex-grow flex flex-col">
                         <div class="flex justify-between items-start mb-2">
-                            <h3 class="text-lg font-bold">${deal.name}</h3>
-                            ${deal.pet_friendly ? '<span class="bg-blue-100 text-blue-700 text-[10px] uppercase font-black px-2 py-0.5 rounded">Hundefreundlich</span>' : ''}
+                            <h3 class="text-md font-bold leading-tight">${deal.name}</h3>
+                            ${deal.pet_friendly ? '<span title="Hunde erlaubt" class="text-emerald-600"><i class="fa-solid fa-dog"></i></span>' : ''}
                         </div>
-                        <p class="text-gray-500 text-sm mb-4"><i class="fa-solid fa-location-dot mr-1 text-emerald-500"></i> ${deal.location}</p>
+                        <p class="text-gray-500 text-xs mb-4"><i class="fa-solid fa-location-dot mr-1"></i> ${deal.location}</p>
                         
-                        <div class="flex justify-between items-center border-t pt-4 mt-auto">
-                            <div>
-                                <p class="text-xs text-gray-400">Preis pro Nacht</p>
-                                <p class="text-xl font-bold text-emerald-700">€${deal.price_per_night}</p>
-                            </div>
-                            <div class="text-right">
-                                <p class="text-xs text-gray-400">Gesamtpreis</p>
-                                <p class="text-lg font-semibold text-gray-800">€${deal.total_cost_for_trip}</p>
+                        <div class="mt-auto border-t pt-4">
+                            <div class="flex justify-between items-center">
+                                <div>
+                                    <p class="text-[10px] text-gray-400 uppercase font-bold">Pro Nacht</p>
+                                    <p class="text-lg font-bold text-emerald-700">€${deal.price_per_night}</p>
+                                </div>
+                                <div class="text-right">
+                                    <p class="text-[10px] text-gray-400 uppercase font-bold">Gesamtpreis</p>
+                                    <p class="text-md font-semibold text-gray-800">€${deal.total_cost_for_trip}</p>
+                                </div>
                             </div>
+                            <a href="${deal.url}" target="_blank" rel="noreferrer" class="block w-full mt-4 bg-gray-50 border border-gray-200 text-gray-700 py-2 rounded-lg font-bold hover:bg-gray-100 transition text-center text-sm">
+                                Zum Angebot <i class="fa-solid fa-external-link ml-1 text-[10px]"></i>
+                            </a>
                         </div>
-                        <p class="text-[10px] text-emerald-600 font-bold mt-2 uppercase tracking-wider">${deal.recommendation.split('|')[0]}</p>
-                        <a href="${deal.url}" target="_blank" rel="noreferrer" referrerpolicy="no-referrer" class="block w-full mt-4 bg-white border-2 border-emerald-600 text-emerald-600 py-2 rounded-lg font-bold hover:bg-emerald-50 transition text-center">
-                            Details (via ${deal.source})
-                        </a>
                     </div>
                 </div>
             `).join('');

holland_agent.py

@@ -119,6 +119,10 @@ class VacationAgent:
         print("📊 Ranking deals...\n")
         ranked = self.ranker.rank_deals(self.all_deals, nights)
 
+        # Separate deals by source
+        airbnb_deals = [d for d in ranked if "airbnb" in d.get("source", "").lower()]
+        booking_deals = [d for d in ranked if "booking" in d.get("source", "").lower()]
+
         # Generate summary
         summary = self.ranker.generate_summary(ranked, nights)
 
@@ -137,7 +141,9 @@ class VacationAgent:
                 "budget_range": f"€{self.budget_min}-{self.budget_max}"
             },
             "total_deals_found": len(self.all_deals),
-            "top_10_deals": ranked[:10],
+            "top_airbnb_deals": airbnb_deals[:15],
+            "top_booking_deals": booking_deals[:15],
+            "top_10_deals": ranked[:10], # Keep for backward compatibility
             "summary": summary
         }