From b38aa268efe7378064f5374c531c33ca4820c405 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kazimierz=20Cio=C5=82ek?= <mrnikrutix@gmail.com>
Date: Tue, 7 Jul 2026 11:32:06 +0200
Subject: [PATCH] Add some features

---
 src-tauri/src/lib.rs                        |  27 ++
 src/lib/components/CabinsDialog.svelte      |  40 +--
 src/lib/components/InvoiceDialog.svelte     |  40 +--
 src/lib/components/InvoicePreview.svelte    |  19 +-
 src/lib/components/ReservationBar.svelte    |  63 +++--
 src/lib/components/ReservationDialog.svelte |  46 +---
 src/lib/components/ReservationSearch.svelte | 162 +++++++++++
 src/lib/components/ScheduleGrid.svelte      |  80 +++++-
 src/lib/components/StayPopover.svelte       | 160 +++++++++++
 src/lib/csv.ts                              |  28 ++
 src/lib/db.ts                               | 177 +++++++++---
 src/lib/schedule.svelte.ts                  |  11 +-
 src/lib/types.ts                            |   4 +
 src/routes/+layout.svelte                   | 132 ++++++++-
 src/routes/+page.svelte                     | 136 +++++++---
 src/routes/faktury/+page.svelte             | 135 +++++++---
 src/routes/goscie/+page.svelte              |  25 +-
 src/routes/raporty/+page.svelte             |  69 ++++-
 src/routes/sprzatanie/+page.svelte          | 281 ++++++++++++++++++++
 src/routes/ustawienia/+page.svelte          |  51 ++--
 20 files changed, 1367 insertions(+), 319 deletions(-)
 create mode 100644 src/lib/components/ReservationSearch.svelte
 create mode 100644 src/lib/components/StayPopover.svelte
 create mode 100644 src/lib/csv.ts
 create mode 100644 src/routes/sprzatanie/+page.svelte

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 1fc7309..61a4d5d 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -128,6 +128,26 @@ fn migrations() -> Vec<Migration> {
             );
         ",
         kind: MigrationKind::Up,
+    },
+    Migration {
+        version: 4,
+        description: "add_cleaned_flag",
+        sql: "
+            ALTER TABLE reservations ADD COLUMN cleaned INTEGER NOT NULL DEFAULT 0;
+            -- wyjazdy sprzed migracji uznajemy za posprzątane, żeby nie zalać widoku zaległościami
+            UPDATE reservations SET cleaned = 1 WHERE departure < date('now');
+            CREATE INDEX idx_reservations_departure ON reservations (departure);
+        ",
+        kind: MigrationKind::Up,
+    },
+    Migration {
+        version: 5,
+        description: "add_prepared_flag",
+        sql: "
+            ALTER TABLE reservations ADD COLUMN prepared INTEGER NOT NULL DEFAULT 0;
+            UPDATE reservations SET prepared = 1 WHERE arrival < date('now');
+        ",
+        kind: MigrationKind::Up,
     }]
 }
 
@@ -166,9 +186,16 @@ fn auto_backup(app: &tauri::AppHandle) -> std::io::Result<()> {
     Ok(())
 }
 
+/// Zapis tekstu do pliku wskazanego przez okno "Zapisz jako" (eksport CSV).
+#[tauri::command]
+fn save_text_file(path: String, contents: String) -> Result<(), String> {
+    std::fs::write(&path, contents).map_err(|e| e.to_string())
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
+        .invoke_handler(tauri::generate_handler![save_text_file])
         .setup(|app| {
             if let Err(e) = auto_backup(app.handle()) {
                 eprintln!("Nie udało się wykonać kopii zapasowej: {e}");
diff --git a/src/lib/components/CabinsDialog.svelte b/src/lib/components/CabinsDialog.svelte
index aff7e02..9ea1f23 100644
--- a/src/lib/components/CabinsDialog.svelte
+++ b/src/lib/components/CabinsDialog.svelte
@@ -101,9 +101,9 @@
           placeholder="—"
         />
         <span class="row-actions">
-          <button type="button" onclick={() => move(i, -1)} disabled={i === 0} aria-label="Przesuń wyżej">↑</button>
-          <button type="button" onclick={() => move(i, 1)} disabled={i === cabins.length - 1} aria-label="Przesuń niżej">↓</button>
-          <button type="button" class="danger" onclick={() => remove(cabin)}>Usuń</button>
+          <button type="button" class="btn sm" onclick={() => move(i, -1)} disabled={i === 0} aria-label="Przesuń wyżej">↑</button>
+          <button type="button" class="btn sm" onclick={() => move(i, 1)} disabled={i === cabins.length - 1} aria-label="Przesuń niżej">↓</button>
+          <button type="button" class="btn sm danger" onclick={() => remove(cabin)}>Usuń</button>
         </span>
       {/each}
     </div>
@@ -112,7 +112,7 @@
   <form class="add" onsubmit={add}>
     <input type="text" bind:value={newName} placeholder="Nazwa nowego domku" required />
     <input type="number" min="1" bind:value={newCapacity} placeholder="Osób" />
-    <button type="submit" class="primary">Dodaj</button>
+    <button type="submit" class="btn primary">Dodaj</button>
   </form>
 
   {#if error}
@@ -120,21 +120,14 @@
   {/if}
 
   <div class="actions">
-    <button type="button" onclick={onclose}>Zamknij</button>
+    <button type="button" class="btn" onclick={onclose}>Zamknij</button>
   </div>
 </dialog>
 
 <style>
   dialog {
     width: min(480px, calc(100vw - 32px));
-    border: 1px solid var(--border);
-    border-radius: 12px;
     padding: 20px;
-    background: var(--surface);
-    color: var(--text);
-  }
-  dialog::backdrop {
-    background: rgb(0 0 0 / 0.35);
   }
   h2 {
     margin: 0 0 14px;
@@ -170,29 +163,6 @@
     display: flex;
     gap: 4px;
   }
-  button {
-    font: inherit;
-    font-size: 13px;
-    padding: 5px 9px;
-    border-radius: 6px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    cursor: pointer;
-  }
-  button:disabled {
-    opacity: 0.4;
-    cursor: default;
-  }
-  button.danger {
-    color: var(--danger);
-    border-color: var(--danger);
-  }
-  button.primary {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: #fff;
-  }
   .add {
     display: grid;
     grid-template-columns: 1fr 80px auto;
diff --git a/src/lib/components/InvoiceDialog.svelte b/src/lib/components/InvoiceDialog.svelte
index 0d1f43e..bfdf157 100644
--- a/src/lib/components/InvoiceDialog.svelte
+++ b/src/lib/components/InvoiceDialog.svelte
@@ -340,7 +340,7 @@
           >✕</button>
         {/each}
       </div>
-      <button type="button" class="add-item" onclick={addItem}>+ Dodaj pozycję</button>
+      <button type="button" class="btn sm add-item" onclick={addItem}>+ Dodaj pozycję</button>
 
       <div class="totals">
         <span>Netto: {formatMoney(totals.net)} zł</span>
@@ -353,8 +353,8 @@
       {/if}
 
       <div class="actions">
-        <button type="button" onclick={onclose} disabled={saving}>Anuluj</button>
-        <button type="submit" class="primary" disabled={saving}>Zapisz i pokaż</button>
+        <button type="button" class="btn" onclick={onclose} disabled={saving}>Anuluj</button>
+        <button type="submit" class="btn primary" disabled={saving}>Zapisz i pokaż</button>
       </div>
     </form>
   {/if}
@@ -363,14 +363,7 @@
 <style>
   dialog {
     width: min(720px, calc(100vw - 32px));
-    border: 1px solid var(--border);
-    border-radius: 12px;
     padding: 20px;
-    background: var(--surface);
-    color: var(--text);
-  }
-  dialog::backdrop {
-    background: rgb(0 0 0 / 0.35);
   }
   h2 {
     margin: 0 0 4px;
@@ -446,14 +439,6 @@
   }
   .add-item {
     margin-top: 8px;
-    font: inherit;
-    font-size: 13px;
-    padding: 5px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    cursor: pointer;
   }
   .totals {
     display: flex;
@@ -481,23 +466,4 @@
     justify-content: flex-end;
     margin-top: 18px;
   }
-  .actions button {
-    font: inherit;
-    font-size: 14px;
-    padding: 8px 16px;
-    border-radius: 7px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    cursor: pointer;
-  }
-  .actions button.primary {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: #fff;
-  }
-  .actions button:disabled {
-    opacity: 0.6;
-    cursor: default;
-  }
 </style>
diff --git a/src/lib/components/InvoicePreview.svelte b/src/lib/components/InvoicePreview.svelte
index 0d64140..88d64c6 100644
--- a/src/lib/components/InvoicePreview.svelte
+++ b/src/lib/components/InvoicePreview.svelte
@@ -33,8 +33,8 @@
 <div class="overlay" role="dialog" aria-modal="true" aria-label="Podgląd faktury {invoice.invoice_number}">
   <div class="toolbar">
     <span class="title">Faktura {invoice.invoice_number}</span>
-    <button type="button" class="primary" onclick={print}>Drukuj / zapisz PDF</button>
-    <button type="button" onclick={onclose}>Zamknij</button>
+    <button type="button" class="btn primary" onclick={print}>Drukuj / zapisz PDF</button>
+    <button type="button" class="btn" onclick={onclose}>Zamknij</button>
   </div>
 
   <div class="sheet print-sheet">
@@ -165,21 +165,6 @@
     color: #fff;
     font-weight: 600;
   }
-  .toolbar button {
-    font: inherit;
-    font-size: 14px;
-    padding: 7px 14px;
-    border-radius: 7px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    cursor: pointer;
-  }
-  .toolbar button.primary {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: #fff;
-  }
 
   /* Arkusz A4 — zawsze czarno na białym, niezależnie od motywu aplikacji */
   .sheet {
diff --git a/src/lib/components/ReservationBar.svelte b/src/lib/components/ReservationBar.svelte
index d7ef5a4..e5ba3cf 100644
--- a/src/lib/components/ReservationBar.svelte
+++ b/src/lib/components/ReservationBar.svelte
@@ -22,9 +22,21 @@
       arrival: string,
       departure: string
     ) => void;
+    /** Najechanie myszą: rect paska albo null przy opuszczeniu — rodzic pokazuje popover. */
+    onhover: (reservation: Reservation, rect: DOMRect | null) => void;
+    highlight?: boolean;
   }
 
-  let { reservation: r, days, cabinIds, cabinIndex, onclick, onmove }: Props = $props();
+  let {
+    reservation: r,
+    days,
+    cabinIds,
+    cabinIndex,
+    onclick,
+    onmove,
+    onhover,
+    highlight = false
+  }: Props = $props();
 
   let n = $derived(days.length);
   let clippedStart = $derived(r.arrival < days[0]);
@@ -77,8 +89,18 @@
     return "move";
   }
 
+  function onpointerenter(event: PointerEvent) {
+    if (event.pointerType !== "mouse" || mode != null) return;
+    onhover(r, (event.currentTarget as HTMLElement).getBoundingClientRect());
+  }
+
+  function onpointerleave() {
+    onhover(r, null);
+  }
+
   function onpointerdown(event: PointerEvent) {
     if (event.button !== 0) return;
+    onhover(r, null);
     const el = event.currentTarget as HTMLElement;
     const m = modeForEvent(event, el);
     // przycięty pobyt (przełom miesiąca) można tylko skracać/wydłużać widoczną krawędzią
@@ -160,22 +182,6 @@
     return `left: calc(${startPos * 100}% + ${dayDelta * dayWidth}px); width: calc(${(endPos - startPos) * 100}% - ${dayDelta * dayWidth}px); z-index: 6; opacity: 0.75;`;
   });
 
-  let tooltip = $derived(
-    [
-      `${r.guest_name} · ${formatShort(r.arrival)} → ${formatShort(r.departure)}`,
-      r.status === "option" ? "Opcja (niepotwierdzona)" : "Potwierdzona",
-      r.settled ? "Pobyt rozliczony" : "",
-      r.phone ? `Tel.: ${r.phone}` : "",
-      r.num_guests ? `Osób: ${r.num_guests}` : "",
-      r.deposit_amount != null
-        ? `Zaliczka: ${r.deposit_amount} zł ${r.deposit_paid ? "(wpłacona)" : "(niewpłacona)"}`
-        : "",
-      r.notes ?? "",
-      "Przeciągnij, aby przenieść; krawędź zmienia daty"
-    ]
-      .filter(Boolean)
-      .join("\n")
-  );
 </script>
 
 <svelte:window onkeydown={onwindowkeydown} />
@@ -187,12 +193,16 @@
   class:clip-start={clippedStart}
   class:clip-end={clippedEnd}
   class:dragging
+  class:highlight
   style="left: {startPos * 100}%; width: {(endPos - startPos) * 100}%; {dragStyle}"
-  title={tooltip}
+  data-rid={r.id}
+  aria-label="{r.guest_name}, {formatShort(r.arrival)} do {formatShort(r.departure)}"
   onclick={handleClick}
   {onpointerdown}
   {onpointermove}
   {onpointerup}
+  {onpointerenter}
+  {onpointerleave}
 >
   {#if !clippedStart}<span class="handle l" aria-hidden="true"></span>{/if}
   {#if r.deposit_paid}<span class="paid" aria-label="Zaliczka wpłacona">✓</span>{/if}
@@ -222,6 +232,23 @@
   .bar.dragging {
     cursor: grabbing;
   }
+  .bar:hover:not(.dragging) {
+    filter: brightness(0.96);
+    box-shadow: 0 1px 4px rgb(0 0 0 / 0.14);
+  }
+  .bar.highlight {
+    animation: bar-pulse 1.1s ease-in-out 3;
+    z-index: 5;
+  }
+  @keyframes bar-pulse {
+    0%,
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+    50% {
+      box-shadow: 0 0 0 3px var(--accent);
+    }
+  }
   .handle {
     position: absolute;
     top: 0;
diff --git a/src/lib/components/ReservationDialog.svelte b/src/lib/components/ReservationDialog.svelte
index fc22dfd..a4c018e 100644
--- a/src/lib/components/ReservationDialog.svelte
+++ b/src/lib/components/ReservationDialog.svelte
@@ -48,7 +48,9 @@
           meter_start: null,
           meter_end: null,
           guest_id: null,
-          settled: false
+          settled: false,
+          cleaned: false,
+          prepared: false
         };
 
   let cabinId = $state(init.cabin_id);
@@ -144,7 +146,9 @@
       meter_start: normNumber(meterStart),
       meter_end: normNumber(meterEnd),
       guest_id: init.guest_id,
-      settled
+      settled,
+      cleaned: init.cleaned,
+      prepared: init.prepared
     };
   }
 
@@ -333,12 +337,12 @@
 
     <div class="actions">
       {#if editingId != null}
-        <button type="button" class="danger" onclick={remove} disabled={saving}>Usuń</button>
-        <button type="button" onclick={issueInvoice} disabled={saving}>Wystaw fakturę</button>
+        <button type="button" class="btn danger" onclick={remove} disabled={saving}>Usuń</button>
+        <button type="button" class="btn" onclick={issueInvoice} disabled={saving}>Wystaw fakturę</button>
       {/if}
       <span class="spacer"></span>
-      <button type="button" onclick={onclose} disabled={saving}>Anuluj</button>
-      <button type="submit" class="primary" disabled={saving}>Zapisz</button>
+      <button type="button" class="btn" onclick={onclose} disabled={saving}>Anuluj</button>
+      <button type="submit" class="btn primary" disabled={saving}>Zapisz</button>
     </div>
   </form>
 </dialog>
@@ -346,14 +350,7 @@
 <style>
   dialog {
     width: min(560px, calc(100vw - 32px));
-    border: 1px solid var(--border);
-    border-radius: 12px;
     padding: 20px;
-    background: var(--surface);
-    color: var(--text);
-  }
-  dialog::backdrop {
-    background: rgb(0 0 0 / 0.35);
   }
   h2 {
     margin: 0 0 16px;
@@ -459,27 +456,4 @@
   .spacer {
     flex: 1;
   }
-  .actions button {
-    font: inherit;
-    font-size: 14px;
-    padding: 8px 16px;
-    border-radius: 7px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    cursor: pointer;
-  }
-  .actions button.primary {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: #fff;
-  }
-  .actions button.danger {
-    color: var(--danger);
-    border-color: var(--danger);
-  }
-  .actions button:disabled {
-    opacity: 0.6;
-    cursor: default;
-  }
 </style>
diff --git a/src/lib/components/ReservationSearch.svelte b/src/lib/components/ReservationSearch.svelte
new file mode 100644
index 0000000..53ab412
--- /dev/null
+++ b/src/lib/components/ReservationSearch.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+  import type { Reservation } from "$lib/types";
+  import { formatShort } from "$lib/dates";
+  import * as db from "$lib/db";
+
+  interface Props {
+    cabinName: (id: number) => string;
+    onpick: (r: Reservation) => void;
+  }
+
+  let { cabinName, onpick }: Props = $props();
+
+  let query = $state("");
+  let results = $state<Reservation[]>([]);
+  let open = $state(false);
+  let highlighted = $state(0);
+  let searchToken = 0;
+
+  async function oninput() {
+    const q = query.trim();
+    if (q.length < 2) {
+      results = [];
+      open = false;
+      return;
+    }
+    const token = ++searchToken;
+    const found = await db.searchReservations(q);
+    if (token !== searchToken) return;
+    results = found;
+    highlighted = 0;
+    open = found.length > 0;
+  }
+
+  function pick(r: Reservation) {
+    open = false;
+    query = "";
+    onpick(r);
+  }
+
+  function onkeydown(event: KeyboardEvent) {
+    if (!open) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      highlighted = (highlighted + 1) % results.length;
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      highlighted = (highlighted - 1 + results.length) % results.length;
+    } else if (event.key === "Enter") {
+      event.preventDefault();
+      pick(results[highlighted]);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      open = false;
+    }
+  }
+
+  function onblur() {
+    open = false;
+  }
+</script>
+
+<div class="wrap">
+  <input
+    type="search"
+    bind:value={query}
+    {oninput}
+    {onkeydown}
+    {onblur}
+    placeholder="Szukaj gościa…"
+    autocomplete="off"
+    role="combobox"
+    aria-expanded={open}
+    aria-autocomplete="list"
+    aria-controls="reservation-search-results"
+    aria-label="Szukaj rezerwacji"
+  />
+  {#if open}
+    <ul class="results" id="reservation-search-results" role="listbox">
+      {#each results as r, i (r.id)}
+        <li role="option" aria-selected={i === highlighted}>
+          <button
+            type="button"
+            class:hl={i === highlighted}
+            onclick={() => pick(r)}
+            onpointerdown={(e) => e.preventDefault()}
+          >
+            <span class="n">{r.guest_name}</span>
+            <span class="d">{cabinName(r.cabin_id)}</span>
+            <span class="d">
+              {formatShort(r.arrival)} → {formatShort(r.departure)}.{r.departure.slice(0, 4)}
+            </span>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .wrap {
+    position: relative;
+    width: 220px;
+  }
+  input {
+    width: 100%;
+    font: inherit;
+    font-size: 13px;
+    color: var(--text);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 7px;
+    padding: 7px 11px;
+  }
+  .results {
+    position: absolute;
+    top: calc(100% + 4px);
+    right: 0;
+    min-width: 300px;
+    z-index: 20;
+    margin: 0;
+    padding: 4px;
+    list-style: none;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    box-shadow: 0 4px 14px rgb(0 0 0 / 0.15);
+    max-height: 300px;
+    overflow-y: auto;
+  }
+  .results button {
+    display: flex;
+    gap: 10px;
+    align-items: baseline;
+    width: 100%;
+    font: inherit;
+    font-size: 13px;
+    text-align: left;
+    padding: 6px 8px;
+    border: none;
+    border-radius: 5px;
+    background: transparent;
+    color: var(--text);
+    cursor: pointer;
+  }
+  .results button:hover,
+  .results button.hl {
+    background: var(--today);
+  }
+  .n {
+    font-weight: 600;
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .d {
+    flex: none;
+    font-size: 12px;
+    color: var(--muted);
+  }
+</style>
diff --git a/src/lib/components/ScheduleGrid.svelte b/src/lib/components/ScheduleGrid.svelte
index 4e588b8..f4e8bc0 100644
--- a/src/lib/components/ScheduleGrid.svelte
+++ b/src/lib/components/ScheduleGrid.svelte
@@ -2,6 +2,7 @@
   import type { Cabin, Reservation } from "$lib/types";
   import { isWeekend, todayISO, weekdayShort } from "$lib/dates";
   import ReservationBar from "./ReservationBar.svelte";
+  import StayPopover from "./StayPopover.svelte";
 
   interface Props {
     cabins: Cabin[];
@@ -15,13 +16,63 @@
       arrival: string,
       departure: string
     ) => void;
+    highlightId?: number | null;
   }
 
-  let { cabins, days, reservations, onCellClick, onReservationClick, onReservationMove }: Props =
-    $props();
+  let {
+    cabins,
+    days,
+    reservations,
+    onCellClick,
+    onReservationClick,
+    onReservationMove,
+    highlightId = null
+  }: Props = $props();
 
   let cabinIds = $derived(cabins.map((c) => c.id));
 
+  const POPOVER_WIDTH = 280;
+  const POPOVER_MAX_HEIGHT = 260;
+
+  let scrollEl: HTMLDivElement | undefined = $state();
+  let hoverInfo = $state<{ r: Reservation; x: number; y: number; above: boolean } | null>(null);
+  let hoverTimer: ReturnType<typeof setTimeout> | undefined;
+
+  function barHover(r: Reservation | null, rect: DOMRect | null) {
+    clearTimeout(hoverTimer);
+    if (!rect || !r) {
+      hoverInfo = null;
+      return;
+    }
+    hoverTimer = setTimeout(() => {
+      const above = rect.bottom + POPOVER_MAX_HEIGHT > window.innerHeight;
+      hoverInfo = {
+        r,
+        x: Math.min(Math.max(rect.left, 8), window.innerWidth - POPOVER_WIDTH - 8),
+        y: above ? rect.top - 6 : rect.bottom + 6,
+        above
+      };
+    }, 200);
+  }
+
+  function cabinNameById(id: number): string {
+    return cabins.find((c) => c.id === id)?.name ?? `Domek #${id}`;
+  }
+
+  // po skoku z wyszukiwarki dosuwamy siatkę do podświetlonego paska
+  $effect(() => {
+    const id = highlightId;
+    const el = scrollEl;
+    if (id == null || !el) return;
+    requestAnimationFrame(() => {
+      el.querySelector(`[data-rid="${id}"]`)?.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+        behavior: "smooth"
+      });
+    });
+  });
+
   const today = todayISO();
 
   let byCabin = $derived.by(() => {
@@ -38,7 +89,9 @@
   });
 </script>
 
-<div class="scroll">
+<!-- pointerleave tylko chowa popover pobytu — to nie jest element interaktywny -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="scroll" bind:this={scrollEl} onpointerleave={() => barHover(null, null)}>
   <div class="grid" style="grid-template-columns: 140px repeat({days.length}, minmax(34px, 1fr));">
     <div class="corner"></div>
     {#each days as d (d)}
@@ -49,11 +102,11 @@
     {/each}
 
     {#each cabins as cabin, cabinIndex (cabin.id)}
-      <div class="cabin-name">
+      <div class="cabin-name" class:odd={cabinIndex % 2 === 1}>
         <span class="cn">{cabin.name}</span>
         {#if cabin.capacity}<span class="cap">{cabin.capacity} os.</span>{/if}
       </div>
-      <div class="track">
+      <div class="track" class:odd={cabinIndex % 2 === 1}>
         {#each days as d (d)}
           <button
             type="button"
@@ -70,8 +123,10 @@
             {days}
             {cabinIds}
             {cabinIndex}
+            highlight={r.id === highlightId}
             onclick={() => onReservationClick(r)}
             onmove={onReservationMove}
+            onhover={barHover}
           />
         {/each}
       </div>
@@ -79,6 +134,16 @@
   </div>
 </div>
 
+{#if hoverInfo}
+  <StayPopover
+    reservation={hoverInfo.r}
+    cabinName={cabinNameById(hoverInfo.r.cabin_id)}
+    x={hoverInfo.x}
+    y={hoverInfo.y}
+    above={hoverInfo.above}
+  />
+{/if}
+
 <style>
   .scroll {
     overflow: auto;
@@ -124,6 +189,7 @@
   }
   .day-head.today {
     background: var(--today);
+    box-shadow: inset 0 -2px 0 var(--accent);
   }
   .day-head.today .num {
     color: var(--accent);
@@ -152,6 +218,10 @@
     font-size: 11px;
     flex: none;
   }
+  .cabin-name.odd,
+  .track.odd {
+    background: color-mix(in srgb, var(--surface) 55%, var(--bg));
+  }
   .track {
     grid-column: 2 / -1;
     position: relative;
diff --git a/src/lib/components/StayPopover.svelte b/src/lib/components/StayPopover.svelte
new file mode 100644
index 0000000..abe5c2f
--- /dev/null
+++ b/src/lib/components/StayPopover.svelte
@@ -0,0 +1,160 @@
+<script lang="ts">
+  import type { Reservation } from "$lib/types";
+  import { formatShort, nightsBetween } from "$lib/dates";
+  import { formatMoney } from "$lib/money";
+
+  interface Props {
+    reservation: Reservation;
+    cabinName: string;
+    x: number;
+    y: number;
+    above: boolean;
+  }
+
+  let { reservation: r, cabinName, x, y, above }: Props = $props();
+
+  let nights = $derived(nightsBetween(r.arrival, r.departure));
+  let stayTotal = $derived(r.price_per_night != null ? nights * r.price_per_night : null);
+  let energyUsage = $derived(
+    r.meter_start != null && r.meter_end != null && r.meter_end > r.meter_start
+      ? Math.round((r.meter_end - r.meter_start) * 10) / 10
+      : null
+  );
+</script>
+
+<div
+  class="popover"
+  class:above
+  style="left: {x}px; top: {y}px;"
+  role="tooltip"
+>
+  <div class="head">
+    <span class="name">{r.guest_name}</span>
+    <span class="badge {r.status}">{r.status === "option" ? "Opcja" : "Potwierdzona"}</span>
+    {#if r.settled}<span class="badge ok">Rozliczony</span>{/if}
+  </div>
+
+  <p class="dates">
+    {cabinName} · {formatShort(r.arrival)} → {formatShort(r.departure)} · {nights}
+    {nights === 1 ? "doba" : nights < 5 ? "doby" : "dób"}
+  </p>
+
+  {#if r.phone || r.num_guests}
+    <p>
+      {#if r.phone}<span>tel. {r.phone}</span>{/if}
+      {#if r.phone && r.num_guests}<span> · </span>{/if}
+      {#if r.num_guests}<span>{r.num_guests} os.</span>{/if}
+    </p>
+  {/if}
+  {#if r.address}
+    <p class="muted">{r.address}</p>
+  {/if}
+
+  {#if stayTotal != null || r.deposit_amount != null || energyUsage != null}
+    <div class="money">
+      {#if stayTotal != null}
+        <p>{nights} × {formatMoney(r.price_per_night ?? 0)} zł = <strong>{formatMoney(stayTotal)} zł</strong></p>
+      {/if}
+      {#if energyUsage != null}
+        <p>Energia: {energyUsage} kWh</p>
+      {/if}
+      {#if r.deposit_amount != null}
+        <p>
+          Zaliczka: {formatMoney(r.deposit_amount)} zł
+          <span class={r.deposit_paid ? "paid" : "unpaid"}>
+            {r.deposit_paid ? "✓ wpłacona" : "niewpłacona"}
+          </span>
+        </p>
+      {/if}
+    </div>
+  {/if}
+
+  {#if r.notes}
+    <p class="notes">{r.notes}</p>
+  {/if}
+</div>
+
+<style>
+  .popover {
+    position: fixed;
+    z-index: 100;
+    width: 280px;
+    pointer-events: none;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 10px 12px;
+    box-shadow: 0 6px 22px rgb(0 0 0 / 0.2);
+    font-size: 12px;
+    line-height: 1.5;
+  }
+  .popover.above {
+    transform: translateY(-100%);
+  }
+  .popover p {
+    margin: 0;
+  }
+  .head {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-bottom: 2px;
+  }
+  .name {
+    font-size: 13px;
+    font-weight: 600;
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .badge {
+    flex: none;
+    font-size: 10px;
+    font-weight: 600;
+    padding: 1px 7px;
+    border-radius: 10px;
+  }
+  .badge.confirmed {
+    background: var(--bar-confirmed-bg);
+    color: var(--bar-confirmed-text);
+  }
+  .badge.option {
+    background: var(--bar-option-bg);
+    color: var(--bar-option-text);
+  }
+  .badge.ok {
+    background: var(--ok);
+    color: var(--surface);
+  }
+  .dates {
+    color: var(--text);
+    font-weight: 500;
+  }
+  .muted {
+    color: var(--muted);
+  }
+  .money {
+    margin-top: 6px;
+    padding-top: 6px;
+    border-top: 1px solid var(--border);
+  }
+  .paid {
+    color: var(--ok);
+    font-weight: 600;
+  }
+  .unpaid {
+    color: var(--warn-text);
+    font-weight: 600;
+  }
+  .notes {
+    margin-top: 6px;
+    padding-top: 6px;
+    border-top: 1px solid var(--border);
+    color: var(--muted);
+    font-style: italic;
+    max-height: 60px;
+    overflow: hidden;
+  }
+</style>
diff --git a/src/lib/csv.ts b/src/lib/csv.ts
new file mode 100644
index 0000000..3cd553e
--- /dev/null
+++ b/src/lib/csv.ts
@@ -0,0 +1,28 @@
+import { save } from "@tauri-apps/plugin-dialog";
+import { invoke } from "@tauri-apps/api/core";
+
+/** Liczba w formacie polskiego Excela: przecinek dziesiętny, 2 miejsca. */
+export function csvNumber(n: number): string {
+  return n.toFixed(2).replace(".", ",");
+}
+
+/** CSV rozdzielany średnikami (polski Excel) z BOM, żeby UTF-8 otwierał się poprawnie. */
+export function toCsv(rows: (string | number | null | undefined)[][]): string {
+  const esc = (v: string | number | null | undefined): string => {
+    const s = v == null ? "" : String(v);
+    return /[";\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+  };
+  return String.fromCharCode(0xfeff) + rows.map((row) => row.map(esc).join(";")).join("\r\n");
+}
+
+/** Okno "Zapisz jako" i zapis pliku. Zwraca ścieżkę albo null przy anulowaniu. */
+export async function saveCsv(defaultName: string, csv: string): Promise<string | null> {
+  const path = await save({
+    title: "Zapisz plik CSV",
+    defaultPath: defaultName,
+    filters: [{ name: "Plik CSV", extensions: ["csv"] }]
+  });
+  if (!path) return null;
+  await invoke("save_text_file", { path, contents: csv });
+  return path;
+}
diff --git a/src/lib/db.ts b/src/lib/db.ts
index 1da13c3..92639ee 100644
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -26,13 +26,22 @@ async function getDb(): Promise<Database> {
   return db;
 }
 
-interface ReservationRow extends Omit<Reservation, "deposit_paid" | "settled"> {
+interface ReservationRow
+  extends Omit<Reservation, "deposit_paid" | "settled" | "cleaned" | "prepared"> {
   deposit_paid: number;
   settled: number;
+  cleaned: number;
+  prepared: number;
 }
 
 function toReservation(row: ReservationRow): Reservation {
-  return { ...row, deposit_paid: !!row.deposit_paid, settled: !!row.settled };
+  return {
+    ...row,
+    deposit_paid: !!row.deposit_paid,
+    settled: !!row.settled,
+    cleaned: !!row.cleaned,
+    prepared: !!row.prepared
+  };
 }
 
 // --- Domki ---
@@ -100,38 +109,8 @@ export async function createReservation(r: ReservationInput): Promise<void> {
   await d.execute(
     `INSERT INTO reservations
        (cabin_id, guest_name, address, phone, num_guests, deposit_amount, deposit_paid, status,
-        arrival, departure, notes, price_per_night, meter_start, meter_end, guest_id, settled)
-     VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16)`,
-    [
-      r.cabin_id,
-      r.guest_name,
-      r.address,
-      r.phone,
-      r.num_guests,
-      r.deposit_amount,
-      r.deposit_paid ? 1 : 0,
-      r.status,
-      r.arrival,
-      r.departure,
-      r.notes,
-      r.price_per_night,
-      r.meter_start,
-      r.meter_end,
-      r.guest_id,
-      r.settled ? 1 : 0
-    ]
-  );
-}
-
-export async function updateReservation(id: number, r: ReservationInput): Promise<void> {
-  const d = await getDb();
-  await d.execute(
-    `UPDATE reservations SET
-       cabin_id = $1, guest_name = $2, address = $3, phone = $4, num_guests = $5,
-       deposit_amount = $6, deposit_paid = $7, status = $8, arrival = $9, departure = $10,
-       notes = $11, price_per_night = $12, meter_start = $13, meter_end = $14,
-       guest_id = $15, settled = $16
-     WHERE id = $17`,
+        arrival, departure, notes, price_per_night, meter_start, meter_end, guest_id, settled, cleaned, prepared)
+     VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18)`,
     [
       r.cabin_id,
       r.guest_name,
@@ -149,6 +128,40 @@ export async function updateReservation(id: number, r: ReservationInput): Promis
       r.meter_end,
       r.guest_id,
       r.settled ? 1 : 0,
+      r.cleaned ? 1 : 0,
+      r.prepared ? 1 : 0
+    ]
+  );
+}
+
+export async function updateReservation(id: number, r: ReservationInput): Promise<void> {
+  const d = await getDb();
+  await d.execute(
+    `UPDATE reservations SET
+       cabin_id = $1, guest_name = $2, address = $3, phone = $4, num_guests = $5,
+       deposit_amount = $6, deposit_paid = $7, status = $8, arrival = $9, departure = $10,
+       notes = $11, price_per_night = $12, meter_start = $13, meter_end = $14,
+       guest_id = $15, settled = $16, cleaned = $17, prepared = $18
+     WHERE id = $19`,
+    [
+      r.cabin_id,
+      r.guest_name,
+      r.address,
+      r.phone,
+      r.num_guests,
+      r.deposit_amount,
+      r.deposit_paid ? 1 : 0,
+      r.status,
+      r.arrival,
+      r.departure,
+      r.notes,
+      r.price_per_night,
+      r.meter_start,
+      r.meter_end,
+      r.guest_id,
+      r.settled ? 1 : 0,
+      r.cleaned ? 1 : 0,
+      r.prepared ? 1 : 0,
       id
     ]
   );
@@ -207,6 +220,96 @@ export async function cabinReports(from: string, to: string): Promise<CabinRepor
   );
 }
 
+/** Rezerwacje pasujące do frazy (gość lub telefon), najnowsze najpierw. */
+export async function searchReservations(query: string): Promise<Reservation[]> {
+  const d = await getDb();
+  const rows = await d.select<ReservationRow[]>(
+    "SELECT * FROM reservations WHERE guest_name LIKE $1 OR phone LIKE $1 ORDER BY arrival DESC LIMIT 10",
+    [`%${query}%`]
+  );
+  return rows.map(toReservation);
+}
+
+/** Przyjazdy i wyjazdy przypadające dokładnie w danym dniu. */
+export async function dayEvents(
+  date: string
+): Promise<{ arrivals: Reservation[]; departures: Reservation[] }> {
+  const d = await getDb();
+  const [arrivals, departures] = await Promise.all([
+    d.select<ReservationRow[]>("SELECT * FROM reservations WHERE arrival = $1 ORDER BY cabin_id", [
+      date
+    ]),
+    d.select<ReservationRow[]>(
+      "SELECT * FROM reservations WHERE departure = $1 ORDER BY cabin_id",
+      [date]
+    )
+  ]);
+  return { arrivals: arrivals.map(toReservation), departures: departures.map(toReservation) };
+}
+
+// --- Sprzątanie ---
+
+/** Zaległe sprzątania: wyjazd przed `today`, jeszcze nieposprzątane. */
+export async function overdueCleanings(today: string): Promise<Reservation[]> {
+  const d = await getDb();
+  const rows = await d.select<ReservationRow[]>(
+    "SELECT * FROM reservations WHERE departure < $1 AND cleaned = 0 ORDER BY departure",
+    [today]
+  );
+  return rows.map(toReservation);
+}
+
+/** Wyjazdy (sprzątania) w zakresie [from, to). */
+export async function upcomingCleanings(from: string, to: string): Promise<Reservation[]> {
+  const d = await getDb();
+  const rows = await d.select<ReservationRow[]>(
+    "SELECT * FROM reservations WHERE departure >= $1 AND departure < $2 ORDER BY departure, cabin_id",
+    [from, to]
+  );
+  return rows.map(toReservation);
+}
+
+/** Przyjazdy w zakresie [from, to) — do wykrywania rotacji „wyjazd i przyjazd tego samego dnia". */
+export async function arrivalsInRange(
+  from: string,
+  to: string
+): Promise<{ cabin_id: number; arrival: string }[]> {
+  const d = await getDb();
+  return d.select<{ cabin_id: number; arrival: string }[]>(
+    "SELECT cabin_id, arrival FROM reservations WHERE arrival >= $1 AND arrival < $2",
+    [from, to]
+  );
+}
+
+export async function setReservationCleaned(id: number, cleaned: boolean): Promise<void> {
+  const d = await getDb();
+  await d.execute("UPDATE reservations SET cleaned = $1 WHERE id = $2", [cleaned ? 1 : 0, id]);
+}
+
+/**
+ * Przyjazdy w zakresie [from, to), przed którymi w danym domku nie było żadnego pobytu —
+ * domek trzeba przygotować, mimo że nie ma wyjazdu, który by to zgłosił.
+ */
+export async function firstArrivalsNeedingPrep(from: string, to: string): Promise<Reservation[]> {
+  const d = await getDb();
+  const rows = await d.select<ReservationRow[]>(
+    `SELECT r.* FROM reservations r
+     WHERE r.arrival >= $1 AND r.arrival < $2
+       AND NOT EXISTS (
+         SELECT 1 FROM reservations p
+         WHERE p.cabin_id = r.cabin_id AND p.id != r.id AND p.departure <= r.arrival
+       )
+     ORDER BY r.arrival, r.cabin_id`,
+    [from, to]
+  );
+  return rows.map(toReservation);
+}
+
+export async function setReservationPrepared(id: number, prepared: boolean): Promise<void> {
+  const d = await getDb();
+  await d.execute("UPDATE reservations SET prepared = $1 WHERE id = $2", [prepared ? 1 : 0, id]);
+}
+
 // --- Goście ---
 
 export async function searchGuests(query: string): Promise<Guest[]> {
@@ -394,6 +497,12 @@ export async function getInvoiceItems(invoiceId: number): Promise<InvoiceItem[]>
   );
 }
 
+/** Wszystkie pozycje wszystkich faktur — do eksportu CSV z sumami per faktura. */
+export async function listAllInvoiceItems(): Promise<InvoiceItem[]> {
+  const d = await getDb();
+  return d.select<InvoiceItem[]>("SELECT * FROM invoice_items ORDER BY invoice_id, position");
+}
+
 export async function getInvoiceForReservation(reservationId: number): Promise<Invoice | null> {
   const d = await getDb();
   const rows = await d.select<Invoice[]>(
diff --git a/src/lib/schedule.svelte.ts b/src/lib/schedule.svelte.ts
index d2645ec..927d157 100644
--- a/src/lib/schedule.svelte.ts
+++ b/src/lib/schedule.svelte.ts
@@ -1,6 +1,6 @@
 import * as db from "./db";
 import type { Cabin, Reservation, RevenueStats } from "./types";
-import { isoDate, monthDays } from "./dates";
+import { isoDate, monthDays, todayISO } from "./dates";
 
 export class ScheduleState {
   year = $state(new Date().getFullYear());
@@ -9,6 +9,8 @@ export class ScheduleState {
   reservations = $state<Reservation[]>([]);
   monthStats = $state<RevenueStats | null>(null);
   yearStats = $state<RevenueStats | null>(null);
+  todayArrivals = $state<Reservation[]>([]);
+  todayDepartures = $state<Reservation[]>([]);
   loading = $state(true);
   error = $state<string | null>(null);
 
@@ -21,16 +23,19 @@ export class ScheduleState {
       const from = isoDate(this.year, this.month, 1);
       const to =
         this.month === 11 ? isoDate(this.year + 1, 0, 1) : isoDate(this.year, this.month + 1, 1);
-      const [cabins, reservations, monthStats, yearStats] = await Promise.all([
+      const [cabins, reservations, monthStats, yearStats, today] = await Promise.all([
         db.listCabins(),
         db.listReservations(from, to),
         db.revenueStats(from, to),
-        db.revenueStats(isoDate(this.year, 0, 1), isoDate(this.year + 1, 0, 1))
+        db.revenueStats(isoDate(this.year, 0, 1), isoDate(this.year + 1, 0, 1)),
+        db.dayEvents(todayISO())
       ]);
       this.cabins = cabins;
       this.reservations = reservations;
       this.monthStats = monthStats;
       this.yearStats = yearStats;
+      this.todayArrivals = today.arrivals;
+      this.todayDepartures = today.departures;
     } catch (e) {
       this.error = `Nie udało się wczytać danych: ${e}`;
     } finally {
diff --git a/src/lib/types.ts b/src/lib/types.ts
index e51f86e..cb4d47c 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -31,6 +31,10 @@ export interface Reservation {
   guest_id: number | null;
   /** Czy pobyt został rozliczony z gościem */
   settled: boolean;
+  /** Czy domek został posprzątany po wyjeździe */
+  cleaned: boolean;
+  /** Czy domek został przygotowany przed przyjazdem (istotne przy pierwszym gościu w domku) */
+  prepared: boolean;
   created_at: string;
 }
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 94ca75c..5bfa199 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -8,13 +8,14 @@
     { href: "/", label: "Grafik" },
     { href: "/faktury", label: "Faktury" },
     { href: "/goscie", label: "Goście" },
+    { href: "/sprzatanie", label: "Sprzątanie" },
     { href: "/raporty", label: "Raporty" },
     { href: "/ustawienia", label: "Ustawienia" }
   ];
 </script>
 
 <nav class="topnav">
-  <span class="brand">Słoneczko</span>
+  <span class="brand"><span class="sun" aria-hidden="true"></span>Słoneczko</span>
   {#each links as link (link.href)}
     <a href={link.href} class:active={page.url.pathname === link.href}>{link.label}</a>
   {/each}
@@ -73,19 +74,148 @@
     color: var(--text);
     -webkit-font-smoothing: antialiased;
   }
+  :global(button) {
+    transition:
+      background-color 0.12s ease,
+      border-color 0.12s ease,
+      color 0.12s ease,
+      opacity 0.12s ease,
+      filter 0.12s ease;
+  }
+  :global(:focus-visible) {
+    outline: 2px solid var(--accent);
+    outline-offset: 1px;
+  }
+  :global(input),
+  :global(select),
+  :global(textarea) {
+    transition: border-color 0.12s ease;
+  }
+  :global(input:hover:not(:focus)),
+  :global(select:hover:not(:focus)) {
+    border-color: var(--muted);
+  }
+
+  /* --- Wspólny system przycisków --- */
+  :global(.btn) {
+    font: inherit;
+    font-size: 14px;
+    padding: 7px 14px;
+    border-radius: 7px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--text);
+    cursor: pointer;
+  }
+  :global(.btn:hover:not(:disabled)) {
+    background: var(--bg);
+    border-color: var(--muted);
+  }
+  :global(.btn:active:not(:disabled)) {
+    transform: translateY(0.5px);
+  }
+  :global(.btn:disabled) {
+    opacity: 0.5;
+    cursor: default;
+  }
+  :global(.btn.primary) {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+  }
+  :global(.btn.primary:hover:not(:disabled)) {
+    background: var(--accent);
+    border-color: var(--accent);
+    filter: brightness(1.08);
+  }
+  :global(.btn.danger) {
+    color: var(--danger);
+    border-color: var(--danger);
+  }
+  :global(.btn.danger:hover:not(:disabled)) {
+    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
+    border-color: var(--danger);
+  }
+  :global(.btn.sm) {
+    font-size: 12px;
+    padding: 4px 10px;
+    border-radius: 6px;
+  }
+  :global(.btn.icon) {
+    width: 34px;
+    padding: 7px 0;
+    font-size: 16px;
+    line-height: 1;
+    text-align: center;
+  }
+
+  /* --- Dialogi: wejście z animacją, przyciemnione i rozmyte tło --- */
+  :global(dialog) {
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    background: var(--surface);
+    color: var(--text);
+    box-shadow: 0 12px 40px rgb(0 0 0 / 0.18);
+    animation: dialog-in 0.16s ease-out;
+  }
+  :global(dialog::backdrop) {
+    background: rgb(0 0 0 / 0.35);
+    backdrop-filter: blur(2px);
+  }
+  @keyframes -global-dialog-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+    }
+  }
+
+  /* --- Cienkie scrollbary --- */
+  :global(::-webkit-scrollbar) {
+    width: 10px;
+    height: 10px;
+  }
+  :global(::-webkit-scrollbar-track) {
+    background: transparent;
+  }
+  :global(::-webkit-scrollbar-thumb) {
+    background: var(--border);
+    border-radius: 6px;
+  }
+  :global(::-webkit-scrollbar-thumb:hover) {
+    background: var(--muted);
+  }
+
+  /* --- Delikatne cienie kart i tabel --- */
+  :global(main :where(section, table, .empty, .scroll, .today-panel)) {
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.05);
+  }
   .topnav {
+    position: sticky;
+    top: 0;
+    z-index: 30;
     display: flex;
     align-items: center;
     gap: 4px;
     padding: 8px 16px;
     background: var(--surface);
     border-bottom: 1px solid var(--border);
+    box-shadow: 0 1px 3px rgb(0 0 0 / 0.04);
   }
   .brand {
+    display: flex;
+    align-items: center;
+    gap: 8px;
     font-weight: 700;
     font-size: 15px;
     margin-right: 14px;
   }
+  .sun {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #f0a52c;
+    box-shadow: 0 0 0 3px rgb(240 165 44 / 0.25);
+  }
   .topnav a {
     padding: 6px 12px;
     border-radius: 7px;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0747e02..47a1c07 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,6 +7,7 @@
   import CabinsDialog from "$lib/components/CabinsDialog.svelte";
   import InvoiceDialog from "$lib/components/InvoiceDialog.svelte";
   import InvoicePreview from "$lib/components/InvoicePreview.svelte";
+  import ReservationSearch from "$lib/components/ReservationSearch.svelte";
   import { formatMoney } from "$lib/money";
   import * as db from "$lib/db";
   import type {
@@ -52,6 +53,39 @@
   }
 
   let moveError = $state<string | null>(null);
+  let highlightId = $state<number | null>(null);
+
+  function cabinName(id: number): string {
+    return schedule.cabins.find((c) => c.id === id)?.name ?? `Domek #${id}`;
+  }
+
+  function jumpToReservation(r: Reservation) {
+    schedule.year = Number(r.arrival.slice(0, 4));
+    schedule.month = Number(r.arrival.slice(5, 7)) - 1;
+    void schedule.reload().then(() => {
+      highlightId = r.id;
+      setTimeout(() => (highlightId = null), 3500);
+    });
+  }
+
+  function onkeydown(event: KeyboardEvent) {
+    if (dialogParams || cabinsOpen || invoiceParams || preview) return;
+    const t = event.target;
+    if (
+      t instanceof HTMLInputElement ||
+      t instanceof HTMLTextAreaElement ||
+      t instanceof HTMLSelectElement
+    ) {
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      schedule.prevMonth();
+    } else if (event.key === "ArrowRight") {
+      schedule.nextMonth();
+    } else if (event.key === "Home") {
+      schedule.goToday();
+    }
+  }
 
   async function moveReservation(
     r: Reservation,
@@ -80,17 +114,37 @@
   <title>Słoneczko — grafik rezerwacji</title>
 </svelte:head>
 
+<svelte:window {onkeydown} />
+
 <main>
   <header class="toolbar">
-    <button type="button" class="icon" onclick={() => schedule.prevMonth()} aria-label="Poprzedni miesiąc">‹</button>
+    <button type="button" class="btn icon" onclick={() => schedule.prevMonth()} aria-label="Poprzedni miesiąc">‹</button>
     <span class="month">{MONTH_NAMES[schedule.month]} {schedule.year}</span>
-    <button type="button" class="icon" onclick={() => schedule.nextMonth()} aria-label="Następny miesiąc">›</button>
-    <button type="button" onclick={() => schedule.goToday()}>Dziś</button>
+    <button type="button" class="btn icon" onclick={() => schedule.nextMonth()} aria-label="Następny miesiąc">›</button>
+    <button type="button" class="btn" onclick={() => schedule.goToday()}>Dziś</button>
     <span class="spacer"></span>
-    <button type="button" onclick={() => (cabinsOpen = true)}>Domki</button>
-    <button type="button" class="primary" onclick={() => newReservation()}>+ Nowa rezerwacja</button>
+    <ReservationSearch {cabinName} onpick={jumpToReservation} />
+    <button type="button" class="btn" onclick={() => (cabinsOpen = true)}>Domki</button>
+    <button type="button" class="btn primary" onclick={() => newReservation()}>+ Nowa rezerwacja</button>
   </header>
 
+  {#if schedule.todayArrivals.length > 0 || schedule.todayDepartures.length > 0}
+    <div class="today-panel">
+      <strong>Dziś:</strong>
+      {#each schedule.todayDepartures as r (r.id)}
+        <button type="button" class="chip out" onclick={() => editReservation(r)}>
+          ↑ {cabinName(r.cabin_id)} · {r.guest_name}
+        </button>
+      {/each}
+      {#each schedule.todayArrivals as r (r.id)}
+        <button type="button" class="chip in" onclick={() => editReservation(r)}>
+          ↓ {cabinName(r.cabin_id)} · {r.guest_name}
+        </button>
+      {/each}
+      <span class="chip-hint">↑ wyjazd · ↓ przyjazd</span>
+    </div>
+  {/if}
+
   {#if schedule.monthStats && schedule.yearStats}
     <div class="stats">
       <span>
@@ -117,7 +171,7 @@
   {:else if !schedule.loading && schedule.cabins.length === 0}
     <div class="empty">
       <p>Nie ma jeszcze żadnych domków. Dodaj je, aby zacząć planować rezerwacje.</p>
-      <button type="button" class="primary" onclick={() => (cabinsOpen = true)}>Dodaj domki</button>
+      <button type="button" class="btn primary" onclick={() => (cabinsOpen = true)}>Dodaj domki</button>
     </div>
   {:else}
     <ScheduleGrid
@@ -127,6 +181,7 @@
       onCellClick={(cabinId, date) => newReservation(cabinId, date)}
       onReservationClick={editReservation}
       onReservationMove={moveReservation}
+      {highlightId}
     />
     <footer class="legend">
       <span><span class="sw confirmed"></span>Potwierdzona</span>
@@ -196,33 +251,45 @@
   .toolbar .spacer {
     flex: 1;
   }
-  .toolbar button {
-    font: inherit;
-    font-size: 14px;
-    padding: 7px 14px;
-    border-radius: 7px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    cursor: pointer;
-  }
-  .toolbar button.icon {
-    width: 34px;
-    padding: 7px 0;
-    font-size: 16px;
-    line-height: 1;
-  }
-  .toolbar button.primary {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: #fff;
-  }
-  .toolbar button:hover:not(.primary) {
-    background: var(--bg);
-  }
   .error {
     color: var(--danger);
   }
+  .today-panel {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+    padding: 8px 12px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 9px;
+    font-size: 13px;
+  }
+  .chip {
+    font: inherit;
+    font-size: 12px;
+    padding: 3px 10px;
+    border-radius: 20px;
+    border: none;
+    cursor: pointer;
+  }
+  .chip.out {
+    background: var(--bar-option-bg);
+    color: var(--bar-option-text);
+  }
+  .chip.in {
+    background: var(--bar-confirmed-bg);
+    color: var(--bar-confirmed-text);
+  }
+  .chip:hover {
+    filter: brightness(0.95);
+  }
+  .chip-hint {
+    margin-left: auto;
+    font-size: 11px;
+    color: var(--muted);
+  }
   .stats {
     display: flex;
     gap: 24px;
@@ -247,15 +314,6 @@
     border-radius: 10px;
     color: var(--muted);
   }
-  .empty button.primary {
-    font: inherit;
-    padding: 8px 16px;
-    border-radius: 7px;
-    border: 1px solid var(--accent);
-    background: var(--accent);
-    color: #fff;
-    cursor: pointer;
-  }
   .legend {
     display: flex;
     align-items: center;
diff --git a/src/routes/faktury/+page.svelte b/src/routes/faktury/+page.svelte
index 61ce34a..4f089dc 100644
--- a/src/routes/faktury/+page.svelte
+++ b/src/routes/faktury/+page.svelte
@@ -2,7 +2,8 @@
   import { onMount } from "svelte";
   import * as db from "$lib/db";
   import { formatShort } from "$lib/dates";
-  import { formatMoney, PAYMENT_METHOD_LABELS } from "$lib/money";
+  import { computeTotals, formatMoney, PAYMENT_METHOD_LABELS } from "$lib/money";
+  import { csvNumber, saveCsv, toCsv } from "$lib/csv";
   import InvoiceDialog from "$lib/components/InvoiceDialog.svelte";
   import InvoicePreview from "$lib/components/InvoicePreview.svelte";
   import type { Invoice, InvoiceDialogParams, InvoiceItem } from "$lib/types";
@@ -12,6 +13,22 @@
   let error = $state<string | null>(null);
   let dialogParams = $state<InvoiceDialogParams | null>(null);
   let preview = $state<{ invoice: Invoice; items: InvoiceItem[] } | null>(null);
+  let query = $state("");
+  let yearFilter = $state("all");
+
+  let years = $derived(
+    [...new Set(invoices.map((i) => i.issue_date.slice(0, 4)))].sort().reverse()
+  );
+  let filtered = $derived.by(() => {
+    const q = query.trim().toLowerCase();
+    return invoices.filter(
+      (i) =>
+        (yearFilter === "all" || i.issue_date.startsWith(yearFilter)) &&
+        (q === "" ||
+          i.invoice_number.toLowerCase().includes(q) ||
+          i.buyer_name.toLowerCase().includes(q))
+    );
+  });
 
   async function reload() {
     loading = true;
@@ -37,6 +54,50 @@
     dialogParams = { invoice, items: await db.getInvoiceItems(invoice.id) };
   }
 
+  let exportInfo = $state<string | null>(null);
+
+  async function exportCsv() {
+    error = null;
+    exportInfo = null;
+    try {
+      const allItems = await db.listAllInvoiceItems();
+      const byInvoice = new Map<number, InvoiceItem[]>();
+      for (const it of allItems) {
+        const list = byInvoice.get(it.invoice_id);
+        if (list) {
+          list.push(it);
+        } else {
+          byInvoice.set(it.invoice_id, [it]);
+        }
+      }
+      const rows: (string | number | null)[][] = [
+        ["Numer", "Data wystawienia", "Data sprzedaży", "Nabywca", "NIP", "Netto", "VAT", "Brutto", "Płatność"]
+      ];
+      for (const inv of filtered) {
+        const totals = computeTotals(byInvoice.get(inv.id) ?? []);
+        rows.push([
+          inv.invoice_number,
+          inv.issue_date,
+          inv.sale_date,
+          inv.buyer_name,
+          inv.buyer_nip,
+          csvNumber(totals.net),
+          csvNumber(totals.tax),
+          csvNumber(totals.gross),
+          PAYMENT_METHOD_LABELS[inv.payment_method]
+        ]);
+      }
+      const name = `faktury-${yearFilter === "all" ? "wszystkie" : yearFilter}.csv`;
+      const path = await saveCsv(name, toCsv(rows));
+      if (path) {
+        exportInfo = `Zapisano: ${path}`;
+        setTimeout(() => (exportInfo = null), 5000);
+      }
+    } catch (e) {
+      error = `Nie udało się wyeksportować: ${e}`;
+    }
+  }
+
   async function remove(invoice: Invoice) {
     if (!confirm(`Usunąć fakturę ${invoice.invoice_number} (${invoice.buyer_name})?`)) return;
     try {
@@ -56,7 +117,17 @@
   <header class="toolbar">
     <h1>Faktury</h1>
     <span class="spacer"></span>
-    <button type="button" class="primary" onclick={() => (dialogParams = { blank: true })}>
+    {#if invoices.length > 0}
+      <input type="search" bind:value={query} placeholder="Numer lub nabywca…" aria-label="Szukaj faktury" />
+      <select bind:value={yearFilter} aria-label="Rok">
+        <option value="all">Wszystkie lata</option>
+        {#each years as y (y)}
+          <option value={y}>{y}</option>
+        {/each}
+      </select>
+      <button type="button" class="btn" onclick={exportCsv}>Eksport CSV</button>
+    {/if}
+    <button type="button" class="btn primary" onclick={() => (dialogParams = { blank: true })}>
       + Nowa faktura
     </button>
   </header>
@@ -64,6 +135,9 @@
   {#if error}
     <p class="error">{error}</p>
   {/if}
+  {#if exportInfo}
+    <p class="info">{exportInfo}</p>
+  {/if}
 
   {#if !loading && invoices.length === 0}
     <div class="empty">
@@ -72,7 +146,7 @@
         Fakturę wystawisz z poziomu pobytu na grafiku (przycisk „Wystaw fakturę") albo przyciskiem powyżej.
       </p>
     </div>
-  {:else if invoices.length > 0}
+  {:else if filtered.length > 0}
     <table>
       <thead>
         <tr>
@@ -86,7 +160,7 @@
         </tr>
       </thead>
       <tbody>
-        {#each invoices as invoice (invoice.id)}
+        {#each filtered as invoice (invoice.id)}
           <tr>
             <td class="strong">{invoice.invoice_number}</td>
             <td>{formatShort(invoice.issue_date)}.{invoice.issue_date.slice(0, 4)}</td>
@@ -95,14 +169,16 @@
             <td class="num strong">{formatMoney(invoice.gross)} zł</td>
             <td>{PAYMENT_METHOD_LABELS[invoice.payment_method]}</td>
             <td class="row-actions">
-              <button type="button" onclick={() => openPreview(invoice)}>Podgląd</button>
-              <button type="button" onclick={() => edit(invoice)}>Edytuj</button>
-              <button type="button" class="danger" onclick={() => remove(invoice)}>Usuń</button>
+              <button type="button" class="btn sm" onclick={() => openPreview(invoice)}>Podgląd</button>
+              <button type="button" class="btn sm" onclick={() => edit(invoice)}>Edytuj</button>
+              <button type="button" class="btn sm danger" onclick={() => remove(invoice)}>Usuń</button>
             </td>
           </tr>
         {/each}
       </tbody>
     </table>
+  {:else if invoices.length > 0}
+    <p class="hint">Brak faktur pasujących do filtrów.</p>
   {/if}
 </main>
 
@@ -140,19 +216,33 @@
   .spacer {
     flex: 1;
   }
-  .toolbar button.primary {
+  .toolbar input[type="search"],
+  .toolbar select {
     font: inherit;
-    font-size: 14px;
-    padding: 7px 14px;
+    font-size: 13px;
+    color: var(--text);
+    background: var(--surface);
+    border: 1px solid var(--border);
     border-radius: 7px;
-    border: 1px solid var(--accent);
-    background: var(--accent);
-    color: #fff;
-    cursor: pointer;
+    padding: 7px 11px;
+  }
+  .toolbar input[type="search"] {
+    width: 200px;
+  }
+  .hint {
+    color: var(--muted);
+    font-size: 13px;
+  }
+  tbody tr:hover td {
+    background: var(--bg);
   }
   .error {
     color: var(--danger);
   }
+  .info {
+    color: var(--ok);
+    font-size: 13px;
+  }
   .empty {
     padding: 60px 20px;
     text-align: center;
@@ -195,21 +285,4 @@
     gap: 6px;
     justify-content: flex-end;
   }
-  .row-actions button {
-    font: inherit;
-    font-size: 12px;
-    padding: 4px 9px;
-    border-radius: 6px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    cursor: pointer;
-  }
-  .row-actions button:hover {
-    background: var(--bg);
-  }
-  .row-actions button.danger {
-    color: var(--danger);
-    border-color: var(--danger);
-  }
 </style>
diff --git a/src/routes/goscie/+page.svelte b/src/routes/goscie/+page.svelte
index ce79e88..4dfea62 100644
--- a/src/routes/goscie/+page.svelte
+++ b/src/routes/goscie/+page.svelte
@@ -132,10 +132,10 @@
             <td class="num">{guest.stay_count}</td>
             <td>{guest.last_departure ? `${formatShort(guest.last_departure)}.${guest.last_departure.slice(0, 4)}` : "—"}</td>
             <td class="row-actions">
-              <button type="button" onclick={() => toggleHistory(guest)} disabled={guest.stay_count === 0}>
+              <button type="button" class="btn sm" onclick={() => toggleHistory(guest)} disabled={guest.stay_count === 0}>
                 {expandedId === guest.id ? "Zwiń" : "Historia"}
               </button>
-              <button type="button" class="danger" onclick={() => remove(guest)}>Usuń</button>
+              <button type="button" class="btn sm danger" onclick={() => remove(guest)}>Usuń</button>
             </td>
           </tr>
           {#if expandedId === guest.id}
@@ -243,6 +243,9 @@
   .num {
     text-align: right;
   }
+  tbody tr:not(.history-row):hover td {
+    background: var(--bg);
+  }
   .strong {
     font-weight: 600;
   }
@@ -254,24 +257,6 @@
     gap: 6px;
     justify-content: flex-end;
   }
-  .row-actions button {
-    font: inherit;
-    font-size: 12px;
-    padding: 4px 9px;
-    border-radius: 6px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    cursor: pointer;
-  }
-  .row-actions button:disabled {
-    opacity: 0.4;
-    cursor: default;
-  }
-  .row-actions button.danger {
-    color: var(--danger);
-    border-color: var(--danger);
-  }
   .history-row td {
     background: var(--bg);
   }
diff --git a/src/routes/raporty/+page.svelte b/src/routes/raporty/+page.svelte
index f9fd871..7c11e95 100644
--- a/src/routes/raporty/+page.svelte
+++ b/src/routes/raporty/+page.svelte
@@ -3,6 +3,7 @@
   import * as db from "$lib/db";
   import { daysInMonth, isoDate, MONTH_NAMES } from "$lib/dates";
   import { formatMoney } from "$lib/money";
+  import { csvNumber, saveCsv, toCsv } from "$lib/csv";
   import type { Cabin, CabinReport, RevenueStats } from "$lib/types";
 
   let year = $state(new Date().getFullYear());
@@ -62,6 +63,48 @@
   }
 
   let maxMonthRevenue = $derived(Math.max(1, ...monthRows.map((m) => m.revenue_total)));
+
+  let exportInfo = $state<string | null>(null);
+
+  async function exportCsv() {
+    error = null;
+    exportInfo = null;
+    try {
+      const rows: (string | number | null)[][] = [[`Raport ${year}`], []];
+      rows.push(["Wg domków"]);
+      rows.push(["Domek", "Doby", "Obłożenie %", "Przychód", "Przychód potwierdzony"]);
+      for (const cabin of cabins) {
+        const row = cabinRows.find((r) => r.cabin_id === cabin.id);
+        rows.push([
+          cabin.name,
+          Math.round(row?.nights_total ?? 0),
+          Math.round(((row?.nights_total ?? 0) / daysInYear) * 100),
+          csvNumber(row?.revenue_total ?? 0),
+          csvNumber(row?.revenue_confirmed ?? 0)
+        ]);
+      }
+      rows.push([]);
+      rows.push(["Wg miesięcy"]);
+      rows.push(["Miesiąc", "Doby", "Obłożenie %", "Przychód", "Przychód potwierdzony"]);
+      monthRows.forEach((m, i) => {
+        const available = cabins.length * daysInMonth(year, i);
+        rows.push([
+          MONTH_NAMES[i],
+          Math.round(m.nights_total),
+          available > 0 ? Math.round((m.nights_total / available) * 100) : 0,
+          csvNumber(m.revenue_total),
+          csvNumber(m.revenue_confirmed)
+        ]);
+      });
+      const path = await saveCsv(`raport-${year}.csv`, toCsv(rows));
+      if (path) {
+        exportInfo = `Zapisano: ${path}`;
+        setTimeout(() => (exportInfo = null), 5000);
+      }
+    } catch (e) {
+      error = `Nie udało się wyeksportować: ${e}`;
+    }
+  }
 </script>
 
 <svelte:head>
@@ -72,11 +115,16 @@
   <header class="toolbar">
     <h1>Raporty</h1>
     <span class="spacer"></span>
-    <button type="button" class="icon" onclick={() => changeYear(-1)} aria-label="Poprzedni rok">‹</button>
+    <button type="button" class="btn" onclick={exportCsv} disabled={!yearStats}>Eksport CSV</button>
+    <button type="button" class="btn icon" onclick={() => changeYear(-1)} aria-label="Poprzedni rok">‹</button>
     <span class="year">{year}</span>
-    <button type="button" class="icon" onclick={() => changeYear(1)} aria-label="Następny rok">›</button>
+    <button type="button" class="btn icon" onclick={() => changeYear(1)} aria-label="Następny rok">›</button>
   </header>
 
+  {#if exportInfo}
+    <p class="info">{exportInfo}</p>
+  {/if}
+
   {#if error}
     <p class="error">{error}</p>
   {:else if yearStats}
@@ -203,21 +251,14 @@
     font-size: 16px;
     font-weight: 600;
   }
-  .toolbar button.icon {
-    font: inherit;
-    width: 34px;
-    padding: 7px 0;
-    font-size: 16px;
-    line-height: 1;
-    border-radius: 7px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    cursor: pointer;
-  }
   .error {
     color: var(--danger);
   }
+  .info {
+    color: var(--ok);
+    font-size: 13px;
+    margin: 0 0 10px;
+  }
   .hint {
     color: var(--muted);
     font-size: 12px;
diff --git a/src/routes/sprzatanie/+page.svelte b/src/routes/sprzatanie/+page.svelte
new file mode 100644
index 0000000..8f58691
--- /dev/null
+++ b/src/routes/sprzatanie/+page.svelte
@@ -0,0 +1,281 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import * as db from "$lib/db";
+  import { addDays, formatShort, todayISO } from "$lib/dates";
+  import type { Cabin, Reservation } from "$lib/types";
+
+  const DAYS_AHEAD = 14;
+
+  interface Task {
+    kind: "cleaning" | "prep";
+    r: Reservation;
+  }
+
+  let cabins = $state<Cabin[]>([]);
+  let overdue = $state<Reservation[]>([]);
+  let upcoming = $state<Reservation[]>([]);
+  let preps = $state<Reservation[]>([]);
+  let sameDayArrivals = $state<Set<string>>(new Set());
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+
+  const today = todayISO();
+
+  async function reload() {
+    loading = true;
+    error = null;
+    try {
+      const until = addDays(today, DAYS_AHEAD);
+      const [c, over, upc, firstArrivals, arrivals] = await Promise.all([
+        db.listCabins(),
+        db.overdueCleanings(today),
+        db.upcomingCleanings(today, until),
+        db.firstArrivalsNeedingPrep(today, until),
+        db.arrivalsInRange(today, until)
+      ]);
+      cabins = c;
+      overdue = over;
+      upcoming = upc;
+      preps = firstArrivals;
+      sameDayArrivals = new Set(arrivals.map((a) => `${a.cabin_id}|${a.arrival}`));
+    } catch (e) {
+      error = `Nie udało się wczytać sprzątań: ${e}`;
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(() => {
+    void reload();
+  });
+
+  let byDay = $derived.by(() => {
+    const map = new Map<string, Task[]>();
+    const push = (date: string, task: Task) => {
+      const list = map.get(date);
+      if (list) {
+        list.push(task);
+      } else {
+        map.set(date, [task]);
+      }
+    };
+    for (const r of upcoming) push(r.departure, { kind: "cleaning", r });
+    for (const r of preps) push(r.arrival, { kind: "prep", r });
+    return [...map.entries()].sort(([a], [b]) => (a < b ? -1 : 1));
+  });
+
+  function cabinName(id: number): string {
+    return cabins.find((c) => c.id === id)?.name ?? `Domek #${id}`;
+  }
+
+  function dayLabel(iso: string): string {
+    const weekday = new Date(iso + "T00:00:00").toLocaleDateString("pl-PL", { weekday: "long" });
+    const prefix = iso === today ? "Dziś — " : iso === addDays(today, 1) ? "Jutro — " : "";
+    return `${prefix}${weekday}, ${formatShort(iso)}`;
+  }
+
+  function hasSameDayArrival(r: Reservation): boolean {
+    return sameDayArrivals.has(`${r.cabin_id}|${r.departure}`);
+  }
+
+  async function toggleCleaned(r: Reservation, cleaned: boolean) {
+    error = null;
+    try {
+      await db.setReservationCleaned(r.id, cleaned);
+      r.cleaned = cleaned;
+      // zaległe znikają z listy dopiero po odświeżeniu — od razu, żeby lista była aktualna
+      if (overdue.some((o) => o.id === r.id)) {
+        await reload();
+      }
+    } catch (e) {
+      error = `Nie udało się zapisać: ${e}`;
+    }
+  }
+
+  async function togglePrepared(r: Reservation, prepared: boolean) {
+    error = null;
+    try {
+      await db.setReservationPrepared(r.id, prepared);
+      r.prepared = prepared;
+    } catch (e) {
+      error = `Nie udało się zapisać: ${e}`;
+    }
+  }
+</script>
+
+<svelte:head>
+  <title>Słoneczko — sprzątanie</title>
+</svelte:head>
+
+<main>
+  <header class="toolbar">
+    <h1>Sprzątanie</h1>
+    <span class="hint">wyjazdy z najbliższych {DAYS_AHEAD} dni</span>
+  </header>
+
+  {#if error}
+    <p class="error">{error}</p>
+  {/if}
+
+  {#if overdue.length > 0}
+    <section class="overdue">
+      <h2>Zaległe</h2>
+      {#each overdue as r (r.id)}
+        <label class="task">
+          <input
+            type="checkbox"
+            checked={r.cleaned}
+            onchange={(e) => toggleCleaned(r, e.currentTarget.checked)}
+          />
+          <span class="cabin">{cabinName(r.cabin_id)}</span>
+          <span class="muted">wyjazd {formatShort(r.departure)} · {r.guest_name}</span>
+        </label>
+      {/each}
+    </section>
+  {/if}
+
+  {#if !loading && byDay.length === 0 && overdue.length === 0}
+    <div class="empty">
+      <p>Brak sprzątań w najbliższych dniach.</p>
+    </div>
+  {/if}
+
+  {#each byDay as [day, tasks] (day)}
+    <section class:today={day === today}>
+      <h2>{dayLabel(day)}</h2>
+      {#each tasks as task (`${task.kind}-${task.r.id}`)}
+        {#if task.kind === "cleaning"}
+          <label class="task">
+            <input
+              type="checkbox"
+              checked={task.r.cleaned}
+              onchange={(e) => toggleCleaned(task.r, e.currentTarget.checked)}
+            />
+            <span class="cabin" class:done={task.r.cleaned}>{cabinName(task.r.cabin_id)}</span>
+            <span class="muted">po pobycie: {task.r.guest_name}</span>
+            {#if hasSameDayArrival(task.r)}
+              <span class="urgent">przyjazd tego samego dnia</span>
+            {/if}
+          </label>
+        {:else}
+          <label class="task">
+            <input
+              type="checkbox"
+              checked={task.r.prepared}
+              onchange={(e) => togglePrepared(task.r, e.currentTarget.checked)}
+            />
+            <span class="cabin" class:done={task.r.prepared}>{cabinName(task.r.cabin_id)}</span>
+            <span class="muted">przygotować — przyjeżdża: {task.r.guest_name}</span>
+            <span class="prep">pierwszy gość w domku</span>
+          </label>
+        {/if}
+      {/each}
+    </section>
+  {/each}
+</main>
+
+<style>
+  main {
+    padding: 14px 16px;
+    max-width: 640px;
+  }
+  .toolbar {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+    margin-bottom: 14px;
+  }
+  h1 {
+    margin: 0;
+    font-size: 18px;
+  }
+  .hint {
+    color: var(--muted);
+    font-size: 12px;
+  }
+  .error {
+    color: var(--danger);
+  }
+  .empty {
+    padding: 60px 20px;
+    text-align: center;
+    border: 1px dashed var(--border);
+    border-radius: 10px;
+    color: var(--muted);
+  }
+  section {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 12px 14px;
+    margin-bottom: 12px;
+  }
+  section.today {
+    border-color: var(--accent);
+  }
+  section.overdue {
+    border-color: var(--danger);
+  }
+  section.overdue h2 {
+    color: var(--danger);
+  }
+  h2 {
+    margin: 0 0 8px;
+    font-size: 13px;
+    font-weight: 600;
+  }
+  h2::first-letter {
+    text-transform: uppercase;
+  }
+  .task {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 4px;
+    border-top: 1px solid var(--border);
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .task input {
+    width: 17px;
+    height: 17px;
+    flex: none;
+    cursor: pointer;
+  }
+  .cabin {
+    font-weight: 600;
+    min-width: 110px;
+  }
+  .cabin.done {
+    text-decoration: line-through;
+    color: var(--muted);
+    font-weight: 400;
+  }
+  .muted {
+    color: var(--muted);
+    font-size: 12px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .urgent {
+    margin-left: auto;
+    flex: none;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--warn-text);
+    background: var(--bar-option-bg);
+    border-radius: 5px;
+    padding: 2px 8px;
+  }
+  .prep {
+    margin-left: auto;
+    flex: none;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--bar-confirmed-text);
+    background: var(--bar-confirmed-bg);
+    border-radius: 5px;
+    padding: 2px 8px;
+  }
+</style>
diff --git a/src/routes/ustawienia/+page.svelte b/src/routes/ustawienia/+page.svelte
index 386329b..4e1d345 100644
--- a/src/routes/ustawienia/+page.svelte
+++ b/src/routes/ustawienia/+page.svelte
@@ -138,6 +138,8 @@
   {/if}
 
   {#if settings}
+    <div class="cols">
+      <div class="col">
     <form onsubmit={save}>
       <section>
         <h2>Dane sprzedawcy (do faktur)</h2>
@@ -201,10 +203,12 @@
 
       <div class="actions">
         {#if savedFlash}<span class="saved">Zapisano</span>{/if}
-        <button type="submit" class="primary">Zapisz ustawienia</button>
+        <button type="submit" class="btn primary">Zapisz ustawienia</button>
       </div>
     </form>
+      </div>
 
+      <div class="col">
     <section>
       <h2>Cennik sezonowy</h2>
       {#if seasons.length > 0}
@@ -224,7 +228,7 @@
             <input type="date" bind:value={season.date_from} onchange={() => persistSeason(season)} aria-label="Początek okresu" />
             <input type="date" bind:value={season.date_to} onchange={() => persistSeason(season)} aria-label="Koniec okresu" />
             <input type="number" min="0" step="0.01" bind:value={season.price} onchange={() => persistSeason(season)} aria-label="Cena za dobę" />
-            <button type="button" class="danger" onclick={() => removeSeason(season)}>Usuń</button>
+            <button type="button" class="btn sm danger" onclick={() => removeSeason(season)}>Usuń</button>
           {/each}
         </div>
       {:else}
@@ -240,7 +244,7 @@
         <input type="date" bind:value={newSeason.date_from} required aria-label="Początek okresu" />
         <input type="date" bind:value={newSeason.date_to} required aria-label="Koniec okresu" />
         <input type="number" min="0" step="0.01" bind:value={newSeason.price} required placeholder="zł" aria-label="Cena za dobę" />
-        <button type="submit">Dodaj</button>
+        <button type="submit" class="btn">Dodaj</button>
       </form>
       <p class="hint">
         Cennik konkretnego domku ma pierwszeństwo przed cennikiem „Wszystkie domki". Przy pobycie na
@@ -255,17 +259,30 @@
         pliku bazy, przechowywanych jest 14 ostatnich). Możesz też zapisać kopię ręcznie, np. na pendrive.
       </p>
       <div class="actions" style="justify-content: flex-start; margin-top: 10px;">
-        <button type="button" class="primary" onclick={backup}>Zapisz kopię…</button>
+        <button type="button" class="btn primary" onclick={backup}>Zapisz kopię…</button>
         {#if backupInfo}<span class="saved">{backupInfo}</span>{/if}
       </div>
     </section>
+      </div>
+    </div>
   {/if}
 </main>
 
 <style>
   main {
     padding: 14px 16px;
-    max-width: 640px;
+    max-width: 1240px;
+  }
+  .cols {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: 0 16px;
+    align-items: start;
+  }
+  @media (max-width: 980px) {
+    .cols {
+      grid-template-columns: minmax(0, 1fr);
+    }
   }
   h1 {
     margin: 0 0 16px;
@@ -323,20 +340,6 @@
     font-size: 11px;
     color: var(--muted);
   }
-  .seasons button {
-    font: inherit;
-    font-size: 13px;
-    padding: 6px 10px;
-    border-radius: 6px;
-    border: 1px solid var(--border);
-    background: var(--surface);
-    color: var(--text);
-    cursor: pointer;
-  }
-  .seasons button.danger {
-    color: var(--danger);
-    border-color: var(--danger);
-  }
   .hint {
     margin: 10px 0 0;
     font-size: 12px;
@@ -355,14 +358,4 @@
     font-size: 13px;
     color: var(--accent);
   }
-  .actions button.primary {
-    font: inherit;
-    font-size: 14px;
-    padding: 8px 16px;
-    border-radius: 7px;
-    border: 1px solid var(--accent);
-    background: var(--accent);
-    color: #fff;
-    cursor: pointer;
-  }
 </style>