fixed hosting page

app/main.py

@@ -718,6 +718,7 @@ def host_dashboard(request: Request, db: Session = Depends(get_db)):
     current_user = require_host(request, db, "/host")
     if isinstance(current_user, RedirectResponse):
         return current_user
+    today = date.today()
     listings = db.scalars(
         select(Listing)
         .where(Listing.host_id == current_user.id)
@@ -731,10 +732,51 @@ def host_dashboard(request: Request, db: Session = Depends(get_db)):
         .options(joinedload(Booking.guest), joinedload(Booking.listing))
         .order_by(Booking.check_in)
     ).all()
+    reservations_by_listing: dict[int, list[Booking]] = {}
+    for booking in reservations:
+        reservations_by_listing.setdefault(booking.listing_id, []).append(booking)
+
+    confirmed_reservation_count = 0
+    blocked_window_count = 0
+    upcoming_reservations = [
+        booking for booking in reservations if booking.status == "confirmed" and booking.check_out >= today
+    ]
+    host_cards = []
+    for listing in listings:
+        listing_reservations = reservations_by_listing.get(listing.id, [])
+        confirmed_count = sum(1 for booking in listing_reservations if booking.status == "confirmed")
+        confirmed_reservation_count += confirmed_count
+        blocked_windows = sorted(listing.blocked_ranges, key=lambda blocked_window: blocked_window["start"])
+        blocked_window_count += len(blocked_windows)
+        upcoming_listing_reservations = [
+            booking for booking in listing_reservations if booking.status == "confirmed" and booking.check_out >= today
+        ]
+        host_cards.append(
+            {
+                "listing": listing,
+                "blocked_windows": blocked_windows,
+                "confirmed_count": confirmed_count,
+                "upcoming_count": len(upcoming_listing_reservations),
+                "next_arrival": min(
+                    (booking.check_in for booking in upcoming_listing_reservations),
+                    default=None,
+                ),
+            }
+        )
     return templates.TemplateResponse(
         request=request,
         name="host_dashboard.html",
-        context=build_context(request, db, listings=listings, reservations=reservations),
+        context=build_context(
+            request,
+            db,
+            listings=listings,
+            reservations=reservations,
+            host_cards=host_cards,
+            today=today,
+            blocked_window_count=blocked_window_count,
+            confirmed_reservation_count=confirmed_reservation_count,
+            upcoming_reservations=upcoming_reservations,
+        ),
     )
 
 

app/static/styles.css

@@ -67,6 +67,7 @@ pre {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 20px;
   padding: 18px 22px;
   border-radius: 999px;
@@ -77,6 +78,8 @@ pre {
   display: flex;
   align-items: center;
   gap: 14px;
+  flex: 1 1 220px;
+  min-width: 0;
 }
 
 .brand strong {
@@ -127,6 +130,8 @@ pre {
 .main-nav {
   flex-wrap: wrap;
   justify-content: center;
+  flex: 1 1 280px;
+  min-width: 0;
 }
 
 .main-nav a,
@@ -136,6 +141,17 @@ pre {
 
 .nav-actions {
   justify-content: flex-end;
+  flex: 1 1 280px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.nav-actions form {
+  display: flex;
+}
+
+.persona-pill {
+  flex-wrap: wrap;
 }
 
 .primary-button,
@@ -795,6 +811,113 @@ textarea {
   display: grid;
 }
 
+.host-listings-grid,
+.host-card-body,
+.host-card-sections,
+.host-reservation-list,
+.host-reservation-meta {
+  display: grid;
+  gap: 18px;
+}
+
+.host-listings-grid {
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+}
+
+.host-card {
+  display: grid;
+  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+
+.host-card-media {
+  display: block;
+}
+
+.host-card-heading {
+  margin-bottom: 0;
+}
+
+.host-card-heading h2 {
+  margin-bottom: 6px;
+}
+
+.host-metric-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 12px;
+}
+
+.host-metric,
+.host-subpanel,
+.host-reservation-card {
+  border-radius: 20px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.host-metric {
+  display: grid;
+  gap: 4px;
+  padding: 14px 16px;
+}
+
+.host-metric strong {
+  font-size: 1.4rem;
+  font-family: "Iowan Old Style", "Georgia", serif;
+}
+
+.host-metric span,
+.host-inline-note {
+  color: var(--muted);
+}
+
+.host-subpanel {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+}
+
+.host-subpanel h3,
+.host-reservation-header h3 {
+  margin: 0;
+  font-family: "Iowan Old Style", "Georgia", serif;
+}
+
+.host-form-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.host-chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.host-inline-note {
+  margin: 0;
+}
+
+.host-reservation-card {
+  display: grid;
+  gap: 16px;
+  padding: 18px;
+}
+
+.host-reservation-header {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.host-reservation-meta {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
 .code-block {
   padding: 14px 16px;
   border-radius: 18px;
@@ -804,7 +927,7 @@ textarea {
 }
 
 .stats-row {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 }
 
 .stat-card {
@@ -926,6 +1049,7 @@ td {
   }
 
   .site-header {
+    display: grid;
     border-radius: 28px;
   }
 
@@ -954,6 +1078,17 @@ td {
   .listing-gallery .hero-image {
     grid-row: auto;
   }
+
+  .main-nav,
+  .nav-actions {
+    width: 100%;
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+
+  .host-card {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 720px) {
@@ -979,4 +1114,13 @@ td {
     width: 100%;
     height: 200px;
   }
+
+  .host-form-row {
+    grid-template-columns: 1fr;
+  }
+
+  .host-reservation-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
 }

app/templates/host_dashboard.html

@@ -6,6 +6,7 @@
       <p class="eyebrow">Hosting Console</p>
       <h1>Manage listings and reservations</h1>
     </div>
+    <span class="helper-copy">Review availability, add calendar blocks, and keep upcoming guest details visible at every screen size.</span>
   </section>
 
   <section class="stats-row">
@@ -19,57 +20,134 @@
     </article>
     <article class="stat-card">
       <span>Confirmed</span>
-      <strong>{{ reservations|selectattr("status", "equalto", "confirmed")|list|length }}</strong>
+      <strong>{{ confirmed_reservation_count }}</strong>
+    </article>
+    <article class="stat-card">
+      <span>Blocked windows</span>
+      <strong>{{ blocked_window_count }}</strong>
     </article>
   </section>
 
-  <section class="three-up">
-    {% for listing in listings %}
-      <article class="panel">
-        <img class="panel-image" src="{{ listing.primary_image }}" alt="{{ listing.title }}" />
-        <h2>{{ listing.title }}</h2>
-        <p>{{ listing.city }} · {{ listing.neighborhood }}</p>
-        <p>${{ "%.0f"|format(listing.price_per_night) }} / night · {{ listing.max_guests }} guests max</p>
-        <form class="stacked-form" method="post" action="/host/listings/{{ listing.id }}/block">
-          <label>
-            Block start
-            <input type="date" name="start_date" required />
-          </label>
-          <label>
-            Block end
-            <input type="date" name="end_date" required />
-          </label>
-          <button class="secondary-button wide-button" type="submit">Block Dates</button>
-        </form>
+  <section class="host-listings-grid">
+    {% for card in host_cards %}
+      <article class="panel host-card">
+        <a class="host-card-media" href="{{ request.app.url_path_for('listing_detail', slug=card.listing.slug) }}">
+          <img class="panel-image" src="{{ card.listing.primary_image }}" alt="{{ card.listing.title }}" />
+        </a>
+        <div class="host-card-body">
+          <div class="panel-heading host-card-heading">
+            <div>
+              <p class="eyebrow compact">{{ card.listing.city }}</p>
+              <h2>{{ card.listing.title }}</h2>
+              <p>{{ card.listing.neighborhood }} · ${{ "%.0f"|format(card.listing.price_per_night) }} / night · {{ card.listing.max_guests }} guests max</p>
+            </div>
+            <a class="inline-link" href="{{ request.app.url_path_for('listing_detail', slug=card.listing.slug) }}">Open listing</a>
+          </div>
+
+          <div class="host-metric-row">
+            <article class="host-metric">
+              <strong>{{ card.confirmed_count }}</strong>
+              <span>Confirmed reservations</span>
+            </article>
+            <article class="host-metric">
+              <strong>{{ card.upcoming_count }}</strong>
+              <span>Upcoming arrivals</span>
+            </article>
+            <article class="host-metric">
+              <strong>{{ card.blocked_windows|length }}</strong>
+              <span>Calendar blocks</span>
+            </article>
+          </div>
+
+          <div class="host-card-sections">
+            <section class="host-subpanel">
+              <h3>Block dates</h3>
+              <form class="stacked-form" method="post" action="/host/listings/{{ card.listing.id }}/block">
+                <div class="host-form-row">
+                  <label>
+                    Block start
+                    <input type="date" name="start_date" min="{{ today.isoformat() }}" required />
+                  </label>
+                  <label>
+                    Block end
+                    <input type="date" name="end_date" min="{{ today.isoformat() }}" required />
+                  </label>
+                </div>
+                <button class="secondary-button wide-button" type="submit">Save block</button>
+              </form>
+            </section>
+
+            <section class="host-subpanel">
+              <h3>Existing blocks</h3>
+              {% if card.blocked_windows %}
+                <div class="host-chip-list">
+                  {% for blocked_window in card.blocked_windows %}
+                    <span class="chip muted">{{ blocked_window.start }} to {{ blocked_window.end }}</span>
+                  {% endfor %}
+                </div>
+              {% else %}
+                <p class="helper-copy">No blocked dates yet for this listing.</p>
+              {% endif %}
+              {% if card.next_arrival %}
+                <p class="host-inline-note">Next arrival: {{ card.next_arrival.isoformat() }}</p>
+              {% endif %}
+            </section>
+          </div>
+        </div>
       </article>
     {% endfor %}
   </section>
 
   <section class="panel">
-    <h2>Reservations</h2>
-    <div class="table-wrap">
-      <table>
-        <thead>
-          <tr>
-            <th>Code</th>
-            <th>Listing</th>
-            <th>Guest</th>
-            <th>Dates</th>
-            <th>Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for booking in reservations %}
-            <tr>
-              <td>{{ booking.confirmation_code }}</td>
-              <td>{{ booking.listing.title }}</td>
-              <td>{{ booking.guest.name }}</td>
-              <td>{{ booking.check_in.isoformat() }} to {{ booking.check_out.isoformat() }}</td>
-              <td><span class="status-pill {{ booking.status }}">{{ booking.status }}</span></td>
-            </tr>
-          {% endfor %}
-        </tbody>
-      </table>
+    <div class="panel-heading">
+      <div>
+        <h2>Upcoming reservations</h2>
+        <p class="helper-copy">Guest details stay readable without relying on a horizontal scroll table.</p>
+      </div>
+      <span class="helper-copy">{{ upcoming_reservations|length }} upcoming stay{{ "" if upcoming_reservations|length == 1 else "s" }}</span>
     </div>
+
+    {% if upcoming_reservations %}
+      <div class="host-reservation-list">
+        {% for booking in upcoming_reservations %}
+          <article class="host-reservation-card">
+            <div class="host-reservation-header">
+              <div>
+                <p class="eyebrow compact">Reservation {{ booking.confirmation_code }}</p>
+                <h3>{{ booking.listing.title }}</h3>
+                <p>{{ booking.guest.name }} · {{ booking.guest.hometown }}</p>
+              </div>
+              <span class="status-pill {{ booking.status }}">{{ booking.status }}</span>
+            </div>
+            <div class="host-reservation-meta">
+              <div class="trip-detail-card">
+                <strong>Dates</strong>
+                <span>{{ booking.check_in.isoformat() }} to {{ booking.check_out.isoformat() }}</span>
+              </div>
+              <div class="trip-detail-card">
+                <strong>Stay details</strong>
+                <span>{{ booking.nights }} nights · {{ booking.guests }} guests</span>
+              </div>
+              <div class="trip-detail-card">
+                <strong>Total</strong>
+                <span>${{ "%.0f"|format(booking.total_price) }}</span>
+              </div>
+            </div>
+          </article>
+        {% endfor %}
+      </div>
+    {% else %}
+      <div class="empty-state">
+        <h3>No upcoming reservations.</h3>
+        <p>New guest bookings will appear here with dates, totals, and stay details.</p>
+      </div>
+    {% endif %}
   </section>
+
+  {% if not host_cards %}
+    <section class="empty-state">
+      <h3>No listings yet.</h3>
+      <p>Switch to a seeded host account with listings to manage calendar blocks and reservations.</p>
+    </section>
+  {% endif %}
 {% endblock %}

tests/test_app.py

@@ -3,9 +3,17 @@ from datetime import datetime
 
 from sqlalchemy import select
 from sqlalchemy.orm import joinedload
+from starlette.requests import Request
 
 from app.database import SessionLocal
-from app.main import _parse_optional_float, _parse_optional_int, merge_ranges
+from app.main import (
+    app,
+    _parse_optional_float,
+    _parse_optional_int,
+    block_listing_dates,
+    host_dashboard,
+    merge_ranges,
+)
 from app.models import Booking, Listing, TaskDefinition
 from app.seed import reset_database
 from app.tasks import evaluate_task
@@ -15,6 +23,22 @@ class WebArenaAirbnbTests(unittest.TestCase):
     def setUp(self):
         reset_database()
 
+    def _build_request(self, path: str, user_id: int | None = None, method: str = "GET") -> Request:
+        scope = {
+            "type": "http",
+            "method": method,
+            "path": path,
+            "headers": [],
+            "query_string": b"",
+            "session": {"user_id": user_id} if user_id is not None else {},
+            "client": ("127.0.0.1", 12345),
+            "server": ("testserver", 80),
+            "scheme": "http",
+            "http_version": "1.1",
+            "app": app,
+        }
+        return Request(scope)
+
     def test_seeded_task_catalog_exists(self):
         with SessionLocal() as db:
             tasks = db.scalars(
@@ -74,6 +98,37 @@ class WebArenaAirbnbTests(unittest.TestCase):
         self.assertEqual(_parse_optional_int("4"), 4)
         self.assertEqual(_parse_optional_float("4.5"), 4.5)
 
+    def test_host_dashboard_renders_host_management_sections(self):
+        with SessionLocal() as db:
+            response = host_dashboard(self._build_request("/host", user_id=2), db)
+            body = response.body.decode()
+
+        self.assertIn("Manage listings and reservations", body)
+        self.assertIn("Existing blocks", body)
+        self.assertIn("Upcoming reservations", body)
+        self.assertIn("Annex Glass Loft", body)
+
+    def test_block_listing_dates_updates_host_calendar_and_redirects(self):
+        with SessionLocal() as db:
+            response = block_listing_dates(
+                request=self._build_request("/host/listings/1/block", user_id=2, method="POST"),
+                listing_id=1,
+                start_date="2026-04-04",
+                end_date="2026-04-07",
+                db=db,
+            )
+            listing = db.get(Listing, 1)
+
+        self.assertEqual(response.status_code, 303)
+        self.assertEqual(response.headers["location"], "/host?notice=Blocked%20dates%20on%20Annex%20Glass%20Loft.")
+        self.assertEqual(
+            listing.blocked_ranges,
+            [
+                {"start": "2026-04-03", "end": "2026-04-07"},
+                {"start": "2026-06-12", "end": "2026-06-15"},
+            ],
+        )
+
 
 if __name__ == "__main__":
     unittest.main()