From e9673551ce43a3801d3d2bd1de96722faa1c63ea Mon Sep 17 00:00:00 2001
From: pascal <zatorskipascal@gmail.com>
Date: Mon, 20 Jul 2026 02:06:11 +0200
Subject: [PATCH 01/10] dodanie poradnika

---
 frontend/src/App.tsx    | 707 ++++++++++++++++++++++++++++-
 frontend/src/styles.css | 984 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 1678 insertions(+), 13 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 37a5291..e38c3db 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,7 +9,7 @@ const cityImage = new URL('./assets/city-panorama.png', import.meta.url).href;
 const loginRoomImage = new URL('./assets/login-room.png', import.meta.url).href;
 const SMS_VERIFICATION_CODE = '123456';
 
-type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'map' | 'login' | 'account' | 'accountSearches' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
+type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'guideBuying' | 'map' | 'login' | 'account' | 'accountSearches' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
 
 type MessageThreadListing = {
   listingId: number;
@@ -3413,7 +3413,8 @@ function App() {
           />
         )}
         {view === 'services' && <ServicesPage />}
-        {view === 'guides' && <GuidesPage />}
+        {view === 'guides' && <GuidesPage onNavigate={navigate} />}
+        {view === 'guideBuying' && <GuideBuyingPage onNavigate={navigate} />}
         {view === 'map' && <MapSearchPage initialCity={mapCity} offerType={mapOfferType} onNavigate={navigate} />}
         {view === 'home' && <HomePage onNavigate={navigate} filters={filters} onOpenMap={openMap} />}
       </main>
@@ -12292,7 +12293,668 @@ function AddListingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
   );
 }
 
-function GuidesPage() {
+const buyingProcessSteps = [
+  { icon: 'search', title: 'Analiza potrzeb i możliwości', text: 'Określ, po co kupujesz i na co Cię stać.' },
+  { icon: 'calculator', title: 'Określenie budżetu', text: 'Policz cenę plus wszystkie koszty dodatkowe.' },
+  { icon: 'chart', title: 'Sprawdzenie zdolności', text: 'Zbadaj zdolność kredytową w kilku bankach.' },
+  { icon: 'pin', title: 'Wybór i analiza lokalizacji', text: 'Sprawdź okolicę, dojazdy i plany zagospodarowania.' },
+  { icon: 'eye', title: 'Oglądanie mieszkań', text: 'Odwiedź kilka ofert i porównaj je na spokojnie.' },
+  { icon: 'group', title: 'Negocjacja ceny', text: 'Ustal realną wartość i wynegocjuj warunki.' },
+  { icon: 'calendar', title: 'Rezerwacja mieszkania', text: 'Zabezpiecz ofertę umową rezerwacyjną.' },
+  { icon: 'document', title: 'Umowa przedwstępna', text: 'Spisz warunki i terminy u notariusza lub cywilnie.' },
+  { icon: 'building', title: 'Kredyt hipoteczny', text: 'Złóż wnioski i wybierz najlepszą ofertę.' },
+  { icon: 'scale', title: 'Akt notarialny', text: 'Podpisz umowę przenoszącą własność.' },
+  { icon: 'key', title: 'Odbiór mieszkania', text: 'Sprawdź stan techniczny i spisz protokół.' },
+  { icon: 'house', title: 'Zameldowanie i formalności', text: 'Przepisz media, ubezpiecz i zamelduj się.' },
+];
+
+const buyingToc = [
+  { id: 'start', label: 'Od czego zacząć?' },
+  { id: 'budzet', label: 'Jak określić budżet?' },
+  { id: 'gotowka-kredyt', label: 'Gotówka czy kredyt?' },
+  { id: 'zdolnosc', label: 'Zdolność kredytowa' },
+  { id: 'rynek', label: 'Rynek pierwotny czy wtórny?' },
+  { id: 'lokalizacja', label: 'Wybór lokalizacji' },
+  { id: 'ogladanie', label: 'Jak oglądać mieszkanie?' },
+  { id: 'stan-techniczny', label: 'Stan techniczny' },
+  { id: 'ksiega-wieczysta', label: 'Księga wieczysta' },
+  { id: 'negocjacje', label: 'Negocjacja ceny' },
+  { id: 'umowa-przedwstepna', label: 'Umowa przedwstępna' },
+  { id: 'akt-notarialny', label: 'Akt notarialny' },
+  { id: 'odbior', label: 'Odbiór mieszkania' },
+  { id: 'klucze', label: 'Przekazanie kluczy' },
+  { id: 'bledy', label: 'Najczęstsze błędy' },
+  { id: 'faq', label: 'FAQ' },
+  { id: 'podsumowanie', label: 'Podsumowanie' },
+];
+
+const buyingCostRows = [
+  { name: 'Wkład własny', who: 'Kupujący', value: 'zwykle 10–20% ceny', note: 'Im wyższy, tym niższa rata i lepsze warunki kredytu.' },
+  { name: 'Podatek PCC (rynek wtórny)', who: 'Kupujący', value: '2% wartości', note: 'Zakup pierwszego mieszkania bywa zwolniony z PCC.' },
+  { name: 'Taksa notarialna', who: 'Kupujący', value: 'zależna od ceny', note: 'Stawki maksymalne są ustalone rozporządzeniem, do negocjacji.' },
+  { name: 'Wpis do księgi wieczystej', who: 'Kupujący', value: '200 zł + 200 zł', note: 'Wpis własności oraz ewentualnej hipoteki.' },
+  { name: 'Prowizja pośrednika', who: 'Zależnie od umowy', value: 'zwykle 1–3%', note: 'Tylko jeśli korzystasz z biura nieruchomości.' },
+  { name: 'Koszty kredytu', who: 'Kredytobiorca', value: 'prowizja, wycena, ubezpieczenia', note: 'Doliczane do finansowania zakupu z banku.' },
+];
+
+const buyingChecklist = [
+  'Przeczytaj aktualny odpis z księgi wieczystej i sprawdź dział III i IV.',
+  'Poproś o zaświadczenie o braku zaległości w czynszu i mediach.',
+  'Sprawdź, kto figuruje jako właściciel i czy zgadza się ze sprzedającym.',
+  'Zapytaj o zaległości i plany remontowe wspólnoty lub spółdzielni.',
+  'Obejrzyj mieszkanie za dnia i wieczorem, sprawdź nasłonecznienie.',
+  'Skontroluj instalacje: prąd, wodę, ogrzewanie, wentylację i wilgoć.',
+  'Ustal, co dokładnie wchodzi w cenę (meble, kuchnia, miejsce postojowe).',
+  'Zweryfikuj wysokość czynszu administracyjnego i co obejmuje.',
+  'Sprawdź plan zagospodarowania i co może powstać w okolicy.',
+  'Policz pełny koszt zakupu z podatkami i kredytem, nie tylko cenę.',
+];
+
+const buyingMistakes = [
+  { title: 'Liczenie tylko ceny mieszkania', text: 'Pomijanie podatków, taksy notarialnej, kosztów kredytu i wykończenia potrafi podnieść budżet o kilkanaście procent.' },
+  { title: 'Pominięcie księgi wieczystej', text: 'Brak sprawdzenia działu III i IV grozi zakupem mieszkania z hipoteką, służebnością lub roszczeniem osoby trzeciej.' },
+  { title: 'Zakup pod wpływem emocji', text: 'Decyzja po jednym oglądaniu i „bo ktoś inny też jest zainteresowany” to najczęstsza droga do przepłacenia.' },
+  { title: 'Brak zapasu w budżecie', text: 'Kredyt na maksimum zdolności nie zostawia poduszki na wzrost rat, remont czy nagłe wydatki.' },
+  { title: 'Zaliczka zamiast zadatku', text: 'Przy zaliczce, jeśli druga strona się wycofa, trudniej dochodzić rekompensaty niż przy zadatku.' },
+  { title: 'Zignorowanie stanu technicznego', text: 'Ukryta wilgoć, zła instalacja elektryczna czy stare piony to koszty, które ujawniają się dopiero po zakupie.' },
+];
+
+const buyingFaq = [
+  {
+    q: 'Ile własnych pieniędzy potrzebuję na start?',
+    a: 'Do kredytu banki oczekują zwykle wkładu własnego na poziomie 10–20% ceny. Do tego dochodzą koszty transakcyjne: podatek, taksa notarialna, wpisy do księgi wieczystej i ewentualna prowizja pośrednika. Bezpiecznie jest założyć, że oprócz wkładu własnego potrzebujesz jeszcze kilku procent ceny na same formalności.',
+  },
+  {
+    q: 'Czy lepiej kupić od dewelopera czy z rynku wtórnego?',
+    a: 'To zależy od Twoich priorytetów. Nowe mieszkanie od dewelopera bywa energooszczędne i objęte gwarancją, ale często wymaga wykończenia i czekania na odbiór. Rynek wtórny to gotowe do zamieszkania lokale w ukształtowanych dzielnicach, za to trzeba dokładniej sprawdzić stan techniczny i stan prawny.',
+  },
+  {
+    q: 'Czy przy zakupie pierwszego mieszkania zapłacę podatek PCC?',
+    a: 'Przy zakupie z rynku wtórnego standardowo obowiązuje podatek 2% od wartości. Dla osób kupujących swoje pierwsze mieszkanie lub dom przewidziano jednak zwolnienie z tego podatku. Zawsze potwierdź aktualne warunki u notariusza, bo to on nalicza i odprowadza PCC.',
+  },
+  {
+    q: 'Jak długo trwa cały proces zakupu?',
+    a: 'Zakup za gotówkę można sfinalizować nawet w kilka tygodni. Z kredytem hipotecznym realny czas to zwykle 1,5–3 miesiące, bo dochodzi analiza wniosku, wycena nieruchomości i decyzja banku. Warto ten czas uwzględnić w umowie przedwstępnej.',
+  },
+  {
+    q: 'Co daje umowa przedwstępna?',
+    a: 'Zabezpiecza obie strony: ustala cenę, termin i warunki finalnej transakcji. Najczęściej towarzyszy jej zadatek. Jeśli od umowy odstąpi kupujący, traci zadatek; jeśli sprzedający, zwraca go w podwójnej wysokości. To silniejsze zabezpieczenie niż zwykła zaliczka.',
+  },
+  {
+    q: 'Czy muszę korzystać z pośrednika?',
+    a: 'Nie ma takiego obowiązku. Dobry pośrednik oszczędza czas i pomaga w formalnościach, ale pobiera prowizję. Jeśli kupujesz samodzielnie, tym bardziej zadbaj o weryfikację stanu prawnego i technicznego oraz o dobrze napisane umowy.',
+  },
+];
+
+async function downloadBuyingChecklistPdf() {
+  const unwrapModuleDefault = <T,>(module: T | { default: T }): T =>
+    'default' in Object(module) ? (module as { default: T }).default : (module as T);
+  const downloadBlob = (blob: Blob, fileName: string) => {
+    const objectUrl = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = objectUrl;
+    link.download = fileName;
+    link.rel = 'noopener';
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
+  };
+
+  type PdfMakeRuntime = {
+    addFontContainer: (fontContainer: unknown) => void;
+    createPdf: (definition: unknown) => { getBlob: () => Promise<Blob> };
+  };
+
+  let pdfMake: PdfMakeRuntime;
+  try {
+    const pdfMakeModule = await import('pdfmake/build/pdfmake.js');
+    const robotoFontModule = await import('pdfmake/build/fonts/Roboto.js');
+    pdfMake = unwrapModuleDefault(pdfMakeModule as unknown as PdfMakeRuntime | { default: PdfMakeRuntime });
+    pdfMake.addFontContainer(unwrapModuleDefault(robotoFontModule as unknown as { default: unknown }));
+  } catch (error) {
+    console.error('Nie udało się załadować generatora PDF', error);
+    window.alert('Nie udało się przygotować pliku PDF. Odśwież stronę i spróbuj ponownie.');
+    return;
+  }
+
+  const docDefinition = {
+    pageSize: 'A4',
+    pageMargins: [48, 48, 48, 48],
+    defaultStyle: { font: 'Roboto', color: '#14223a', fontSize: 11, lineHeight: 1.35 },
+    content: [
+      { text: 'PolskaLokalnie', color: '#0b9f5c', fontSize: 12, bold: true, margin: [0, 0, 0, 2] },
+      { text: 'Lista kontrolna przy zakupie mieszkania', fontSize: 20, bold: true, margin: [0, 0, 0, 4] },
+      { text: '10 rzeczy, które warto sprawdzić przed podpisaniem umowy', color: '#526171', margin: [0, 0, 0, 18] },
+      {
+        ol: buyingChecklist.map((item) => ({ text: item, margin: [0, 0, 0, 6] })),
+      },
+      {
+        text: 'Materiał informacyjny. Nie stanowi porady prawnej ani podatkowej – w razie wątpliwości skonsultuj się z notariuszem lub doradcą.',
+        color: '#8793a3',
+        fontSize: 9,
+        margin: [0, 22, 0, 0],
+      },
+    ],
+  };
+
+  try {
+    const blob = await pdfMake.createPdf(docDefinition).getBlob();
+    downloadBlob(blob, 'lista-kontrolna-zakup-mieszkania.pdf');
+  } catch (error) {
+    console.error('Nie udało się wygenerować PDF', error);
+    window.alert('Nie udało się wygenerować pliku PDF. Spróbuj ponownie.');
+  }
+}
+
+function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+  const scrollToId = (id: string) => {
+    const target = document.getElementById(id);
+    if (target) {
+      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  return (
+    <section className="guide-article" aria-label="Poradnik: kupno mieszkania">
+      <header className="guide-hero">
+        <img src={heroImage} alt="" />
+        <div className="guide-hero-shade" />
+        <div className="guides-container guide-hero-inner">
+          <button className="guide-back" onClick={() => onNavigate('guides')}>
+            <Icon name="arrow" />
+            <span>Wróć do poradników</span>
+          </button>
+          <span className="guide-hero-badge">
+            <Icon name="house" />
+            Kupno mieszkania
+          </span>
+          <h1>Jak kupić mieszkanie krok po kroku</h1>
+          <p className="guide-hero-lead">
+            Kompletny, uczciwy przewodnik po całym procesie zakupu – od pierwszej decyzji, przez budżet,
+            kredyt i formalności, aż po odbiór kluczy. Prostym językiem, z listami kontrolnymi i praktycznymi
+            wskazówkami, które pomogą Ci uniknąć najczęstszych błędów.
+          </p>
+          <div className="guide-hero-chips">
+            <span><Icon name="check" /> Aktualna wiedza na 2026 rok</span>
+            <span><Icon name="shield" /> Oparte na sprawdzonych zasadach</span>
+            <span><Icon name="list" /> Listy kontrolne i PDF</span>
+            <span><Icon name="calculator" /> Kalkulatory kosztów</span>
+          </div>
+        </div>
+      </header>
+
+      <div className="guides-container guide-article-layout">
+        <aside className="guide-toc" aria-label="Spis treści">
+          <div className="guide-toc-inner">
+            <h2>Spis treści</h2>
+            <ol>
+              {buyingToc.map((item, index) => (
+                <li key={item.id}>
+                  <button onClick={() => scrollToId(item.id)}>
+                    <span>{index + 1}</span>
+                    {item.label}
+                  </button>
+                </li>
+              ))}
+            </ol>
+          </div>
+        </aside>
+
+        <div className="guide-body">
+          <section className="guide-process" aria-label="Proces zakupu w 12 krokach">
+            <div className="guide-block-head">
+              <h2>Proces zakupu mieszkania w 12 krokach</h2>
+              <p>Cała droga w skrócie. Poniżej rozwijamy każdy etap dokładnie.</p>
+            </div>
+            <div className="guide-process-grid">
+              {buyingProcessSteps.map((step, index) => (
+                <article key={step.title} className="guide-process-card">
+                  <span className="guide-process-num">{index + 1}</span>
+                  <span className="guide-process-icon"><Icon name={step.icon} /></span>
+                  <strong>{step.title}</strong>
+                  <small>{step.text}</small>
+                </article>
+              ))}
+            </div>
+          </section>
+
+          <article className="guide-chapter" id="start">
+            <span className="guide-chapter-index">01</span>
+            <h2>Od czego zacząć zakup mieszkania?</h2>
+            <p>
+              Zanim zaczniesz przeglądać oferty, odpowiedz sobie na kilka pytań. To one, a nie ładne zdjęcia,
+              zdecydują o trafności zakupu. Ustal, czy kupujesz dla siebie, dla rodziny, czy pod inwestycję,
+              jak długo planujesz tu mieszkać i co jest dla Ciebie nienegocjowalne – metraż, liczba pokoi,
+              piętro, winda, balkon czy miejsce postojowe.
+            </p>
+            <p>
+              Rozdziel potrzeby od zachcianek. Potrzeba to np. druga sypialnia przy powiększającej się rodzinie.
+              Zachcianka to konkretny kolor kuchni, który i tak zmienisz. Im lepiej rozpoznasz swoje realne potrzeby,
+              tym mniej ofert będziesz musiał obejrzeć i tym rzadziej dasz się ponieść emocjom.
+            </p>
+            <div className="guide-callout guide-callout-tip">
+              <Icon name="spark" />
+              <div>
+                <strong>Wskazówka</strong>
+                <p>Wypisz na kartce trzy kryteria, których nie odpuścisz, i trzy, które są mile widziane. Wracaj do tej listy przy każdym oglądaniu – to najprostsza ochrona przed impulsywną decyzją.</p>
+              </div>
+            </div>
+          </article>
+
+          <article className="guide-chapter" id="budzet">
+            <span className="guide-chapter-index">02</span>
+            <h2>Jak określić budżet?</h2>
+            <p>
+              Budżet to nie tylko cena mieszkania. To cena powiększona o wszystkie koszty transakcyjne oraz o to,
+              co wydasz zaraz po zakupie. Zsumuj cenę, podatki, taksę notarialną, wpisy do księgi wieczystej,
+              ewentualną prowizję pośrednika i koszty kredytu. Dopiero ta kwota pokazuje, na co naprawdę Cię stać.
+            </p>
+            <div className="guide-table-wrap">
+              <table className="guide-table">
+                <thead>
+                  <tr>
+                    <th>Koszt</th>
+                    <th>Kto ponosi</th>
+                    <th>Ile (orientacyjnie)</th>
+                    <th>Uwagi</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {buyingCostRows.map((row) => (
+                    <tr key={row.name}>
+                      <td data-label="Koszt"><strong>{row.name}</strong></td>
+                      <td data-label="Kto ponosi">{row.who}</td>
+                      <td data-label="Ile">{row.value}</td>
+                      <td data-label="Uwagi">{row.note}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <div className="guide-callout guide-callout-warn">
+              <Icon name="warning" />
+              <div>
+                <strong>Zostaw zapas</strong>
+                <p>Nie planuj zakupu na granicy możliwości. Poduszka finansowa na kilka rat, drobny remont i nieprzewidziane wydatki to nie luksus, tylko element bezpiecznego budżetu.</p>
+              </div>
+            </div>
+          </article>
+
+          <article className="guide-chapter" id="gotowka-kredyt">
+            <span className="guide-chapter-index">03</span>
+            <h2>Gotówka czy kredyt hipoteczny?</h2>
+            <p>
+              Zakup za gotówkę jest szybszy, prostszy i pozwala mocniej negocjować, bo sprzedający nie czeka na
+              decyzję banku. Nie zawsze jednak warto zamrażać wszystkie oszczędności w jednej nieruchomości –
+              tracisz płynność i poduszkę bezpieczeństwa.
+            </p>
+            <p>
+              Kredyt hipoteczny rozkłada koszt w czasie i pozwala kupić wcześniej, ale oznacza wieloletnie
+              zobowiązanie, odsetki i zależność od zmian stóp procentowych. Zanim zdecydujesz, porównaj oferty
+              kilku banków i policz całkowity koszt kredytu, a nie tylko wysokość raty.
+            </p>
+            <div className="guide-two-col">
+              <div className="guide-pro">
+                <h4><Icon name="check" /> Gotówka</h4>
+                <ul>
+                  <li>Szybka i prosta transakcja</li>
+                  <li>Silniejsza pozycja w negocjacjach</li>
+                  <li>Brak odsetek i rat</li>
+                  <li>Uwaga: mniejsza płynność finansowa</li>
+                </ul>
+              </div>
+              <div className="guide-con">
+                <h4><Icon name="credit-card" /> Kredyt hipoteczny</h4>
+                <ul>
+                  <li>Kupujesz, nie mając całej kwoty</li>
+                  <li>Oszczędności zostają jako rezerwa</li>
+                  <li>Uwaga: całkowity koszt rośnie o odsetki</li>
+                  <li>Uwaga: wieloletnie zobowiązanie</li>
+                </ul>
+              </div>
+            </div>
+          </article>
+
+          <article className="guide-chapter" id="zdolnosc">
+            <span className="guide-chapter-index">04</span>
+            <h2>Jak obliczyć zdolność kredytową?</h2>
+            <p>
+              Zdolność kredytowa to maksymalna kwota, jaką bank jest gotów Ci pożyczyć. Wpływają na nią głównie:
+              wysokość i stabilność dochodów, forma zatrudnienia, liczba osób na utrzymaniu, inne zobowiązania
+              (raty, karty, limity) oraz historia w BIK. Banki liczą też bufor na wypadek wzrostu stóp, dlatego
+              maksymalna kwota bywa niższa, niż wynikałoby z samej raty.
+            </p>
+            <p>
+              Każdy bank liczy zdolność inaczej, więc warto sprawdzić kilka ofert – różnice bywają znaczne.
+              Zanim złożysz wnioski, uporządkuj finanse: spłać drobne zobowiązania, zamknij nieużywane karty
+              i limity, zadbaj o pozytywną historię kredytową. To realnie podnosi zdolność.
+            </p>
+            <div className="guide-callout guide-callout-tip">
+              <Icon name="calculator" />
+              <div>
+                <strong>Policz orientacyjnie</strong>
+                <p>Skorzystaj z naszych kalkulatorów po prawej stronie, aby oszacować budżet i porównać koszty. Ostateczną zdolność zawsze potwierdza bank na podstawie dokumentów.</p>
+              </div>
+            </div>
+          </article>
+
+          <article className="guide-chapter" id="rynek">
+            <span className="guide-chapter-index">05</span>
+            <h2>Rynek pierwotny czy wtórny?</h2>
+            <p>
+              Rynek pierwotny to zakup od dewelopera – najczęściej nowe, energooszczędne mieszkanie, często jeszcze
+              w budowie i do wykończenia. Rynek wtórny to zakup od dotychczasowego właściciela – zwykle mieszkanie
+              gotowe do zamieszkania, w ukształtowanej okolicy. Oba mają swoje zalety; wybór zależy od tego, czy
+              wolisz nowe i „pod siebie”, czy gotowe i sprawdzone.
+            </p>
+            <div className="guide-two-col">
+              <div className="guide-market">
+                <h4><Icon name="building" /> Rynek pierwotny</h4>
+                <ul>
+                  <li>Nowy standard i niższe koszty eksploatacji</li>
+                  <li>Możliwość aranżacji od podstaw</li>
+                  <li>Gwarancja i rękojmia dewelopera</li>
+                  <li>Uwaga: często konieczne wykończenie i czekanie na odbiór</li>
+                </ul>
+              </div>
+              <div className="guide-market">
+                <h4><Icon name="house" /> Rynek wtórny</h4>
+                <ul>
+                  <li>Gotowe do zamieszkania od zaraz</li>
+                  <li>Sprawdzona lokalizacja i sąsiedztwo</li>
+                  <li>Możliwość zobaczenia realnego stanu</li>
+                  <li>Uwaga: dokładniej sprawdź stan techniczny i prawny</li>
+                </ul>
+              </div>
+            </div>
+          </article>
+
+          <article className="guide-chapter" id="lokalizacja">
+            <span className="guide-chapter-index">06</span>
+            <h2>Jak wybrać lokalizację?</h2>
+            <p>
+              Lokalizacji nie zmienisz remontem, dlatego to jedno z najważniejszych kryteriów. Sprawdź dojazd do
+              pracy i szkoły, dostęp do komunikacji, sklepów, przychodni i terenów zielonych. Odwiedź okolicę o
+              różnych porach dnia – rano, po południu i wieczorem – żeby poznać hałas, ruch i realny klimat miejsca.
+            </p>
+            <p>
+              Zajrzyj do miejscowego planu zagospodarowania przestrzennego, żeby wiedzieć, co może powstać w
+              sąsiedztwie – park czy ruchliwa droga to duża różnica dla komfortu i przyszłej wartości. Zwróć uwagę
+              na kierunki świata i nasłonecznienie oraz na to, czy okolica się rozwija, czy raczej podupada.
+            </p>
+          </article>
+
+          <article className="guide-chapter" id="ogladanie">
+            <span className="guide-chapter-index">07</span>
+            <h2>Jak oglądać mieszkanie?</h2>
+            <p>
+              Nie kupuj po jednym oglądaniu i nie oglądaj tylko przy pełnym słońcu. Przyjdź kilka razy, także
+              wieczorem, i nie bój się zadawać pytań: o wysokość czynszu i co obejmuje, o koszty ogrzewania, o wiek
+              instalacji, o plany remontowe budynku i o powód sprzedaży. Rób zdjęcia i notatki, bo po obejrzeniu
+              kilku ofert łatwo je pomylić.
+            </p>
+            <p>
+              Zwróć uwagę na to, czego nie widać na pierwszy rzut oka: ślady wilgoci w narożnikach i pod oknami,
+              stan okien i drzwi, ciśnienie wody, działanie wentylacji, wygłuszenie między mieszkaniami. Sprawdź też
+              części wspólne – klatkę, windę, piwnicę i otoczenie budynku mówią wiele o tym, jak zarządzana jest
+              nieruchomość.
+            </p>
+          </article>
+
+          <article className="guide-chapter" id="stan-techniczny">
+            <span className="guide-chapter-index">08</span>
+            <h2>Jak sprawdzić stan techniczny?</h2>
+            <p>
+              Stan techniczny decyduje o tym, ile dołożysz po zakupie. Najważniejsze punkty to instalacja
+              elektryczna (czy jest bezpieczna i o odpowiedniej mocy), instalacja wodno-kanalizacyjna i piony,
+              ogrzewanie, wentylacja oraz izolacja i ślady wilgoci lub grzyba. W starszych budynkach zwróć uwagę na
+              wiek instalacji i okien – ich wymiana bywa kosztowna.
+            </p>
+            <div className="guide-callout guide-callout-tip">
+              <Icon name="hammer" />
+              <div>
+                <strong>Rozważ fachowca</strong>
+                <p>Przy droższym zakupie lub starszym mieszkaniu warto zabrać na oględziny osobę znającą się na budownictwie. Koszt takiej konsultacji jest niewielki wobec potencjalnych ukrytych wad.</p>
+              </div>
+            </div>
+          </article>
+
+          <article className="guide-chapter" id="ksiega-wieczysta">
+            <span className="guide-chapter-index">09</span>
+            <h2>Jak sprawdzić księgę wieczystą?</h2>
+            <p>
+              Księga wieczysta to dokument, który pokazuje stan prawny nieruchomości. Odpis możesz sprawdzić online,
+              znając numer księgi. Zwróć uwagę na cztery działy: oznaczenie nieruchomości, właściciela, prawa i
+              ograniczenia oraz hipoteki. To podstawowa ochrona przed zakupem mieszkania z niespodziankami.
+            </p>
+            <ul className="guide-list">
+              <li><strong>Dział I</strong> – co to za nieruchomość: adres, metraż, pomieszczenia przynależne.</li>
+              <li><strong>Dział II</strong> – kto jest właścicielem. Musi zgadzać się z osobą sprzedającą.</li>
+              <li><strong>Dział III</strong> – prawa, ograniczenia, służebności i roszczenia osób trzecich.</li>
+              <li><strong>Dział IV</strong> – hipoteki. Jeśli jest, ustal z bankiem i notariuszem sposób jej wykreślenia.</li>
+            </ul>
+            <div className="guide-callout guide-callout-warn">
+              <Icon name="shield" />
+              <div>
+                <strong>Nie pomijaj tego kroku</strong>
+                <p>Wpis obciążający nieruchomość może przejść na Ciebie razem z zakupem. Sprawdzenie księgi to kilka minut, a chroni przed poważnymi problemami.</p>
+              </div>
+            </div>
+          </article>
+
+          <article className="guide-chapter" id="negocjacje">
+            <span className="guide-chapter-index">10</span>
+            <h2>Jak negocjować cenę?</h2>
+            <p>
+              Negocjacje zacznij od wiedzy. Sprawdź ceny podobnych mieszkań w okolicy, zobacz, jak długo oferta jest
+              wystawiona i poznaj sytuację sprzedającego. Argumentem nie są emocje, tylko fakty: konieczne remonty,
+              stan instalacji, wysoki czynsz czy niższe ceny porównywalnych lokali.
+            </p>
+            <p>
+              Bądź konkretny i spokojny. Podaj kwotę, którą jesteś gotów zapłacić, wraz z uzasadnieniem, i miej
+              wyznaczoną granicę, powyżej której rezygnujesz. Gotowość do szybkiej, pewnej transakcji – zwłaszcza za
+              gotówkę – to często silniejszy argument niż sama presja na obniżkę.
+            </p>
+          </article>
+
+          <article className="guide-chapter" id="umowa-przedwstepna">
+            <span className="guide-chapter-index">11</span>
+            <h2>Umowa przedwstępna</h2>
+            <p>
+              Umowa przedwstępna zabezpiecza ustalenia, zanim dojdzie do finalnej transakcji. Określa cenę, termin
+              zawarcia umowy właściwej, stan mieszkania i warunki, np. uzyskanie kredytu. Można ją zawrzeć zwykłą
+              formą pisemną lub u notariusza – forma notarialna daje silniejszą ochronę.
+            </p>
+            <div className="guide-callout guide-callout-info">
+              <Icon name="document" />
+              <div>
+                <strong>Zadatek a zaliczka</strong>
+                <p>Zadatek działa dyscyplinująco: jeśli od umowy odstąpi kupujący, traci zadatek; jeśli sprzedający – zwraca go w podwójnej wysokości. Zaliczka jest po prostu zwracana. Dla bezpieczeństwa transakcji częściej stosuje się zadatek.</p>
+              </div>
+            </div>
+          </article>
+
+          <article className="guide-chapter" id="akt-notarialny">
+            <span className="guide-chapter-index">12</span>
+            <h2>Akt notarialny</h2>
+            <p>
+              Przeniesienie własności mieszkania musi mieć formę aktu notarialnego. To notariusz sprawdza tożsamość
+              stron, stan prawny nieruchomości i treść umowy, a następnie składa wniosek o wpis nowego właściciela do
+              księgi wieczystej. Przy akcie płacisz taksę notarialną, podatek oraz opłaty sądowe.
+            </p>
+            <p>
+              Przed podpisaniem dokładnie przeczytaj projekt aktu – ceny, terminy, sposób i datę wydania mieszkania,
+              zapisy o zadatku i o wykreśleniu ewentualnej hipoteki. Jeśli czegoś nie rozumiesz, pytaj notariusza.
+              To jego rola, żeby wyjaśnić Ci każdy zapis.
+            </p>
+          </article>
+
+          <article className="guide-chapter" id="odbior">
+            <span className="guide-chapter-index">13</span>
+            <h2>Odbiór mieszkania</h2>
+            <p>
+              Odbiór to moment sprawdzenia, czy dostajesz mieszkanie w umówionym stanie. Spisz protokół zdawczo-odbiorczy:
+              stany liczników (prąd, woda, gaz, ciepło), liczbę kluczy i pilotów oraz to, co zostaje w mieszkaniu.
+              Przy nowym lokalu od dewelopera dokładnie sprawdź jakość wykończenia i zgłoś wszystkie usterki w protokole.
+            </p>
+            <div className="guide-callout guide-callout-tip">
+              <Icon name="list" />
+              <div>
+                <strong>Wszystko na piśmie</strong>
+                <p>Każdą usterkę i każdy stan licznika zapisz w protokole podpisanym przez obie strony. To Twój dowód na wypadek późniejszych rozliczeń i reklamacji.</p>
+              </div>
+            </div>
+          </article>
+
+          <article className="guide-chapter" id="klucze">
+            <span className="guide-chapter-index">14</span>
+            <h2>Przekazanie kluczy i formalności po zakupie</h2>
+            <p>
+              Po odbiorze zostają formalności, o których łatwo zapomnieć w euforii. Przepisz na siebie umowy na prąd,
+              gaz, wodę i internet, zgłoś zmianę właściciela do wspólnoty lub spółdzielni, rozważ ubezpieczenie
+              mieszkania i zamelduj się pod nowym adresem. Zachowaj wszystkie dokumenty zakupu w jednym miejscu.
+            </p>
+            <ul className="guide-list">
+              <li>Przepisanie liczników i umów z dostawcami mediów.</li>
+              <li>Zgłoszenie nowego właściciela do zarządcy budynku.</li>
+              <li>Ubezpieczenie nieruchomości (a przy kredycie – często wymagane).</li>
+              <li>Zameldowanie oraz aktualizacja adresu w ważnych instytucjach.</li>
+            </ul>
+          </article>
+
+          <section className="guide-checklist" id="checklista">
+            <div className="guide-block-head">
+              <h2>Checklista – 10 rzeczy do sprawdzenia przed zakupem</h2>
+              <p>Wydrukuj lub pobierz w PDF i miej przy sobie podczas oglądania.</p>
+            </div>
+            <div className="guide-checklist-grid">
+              {buyingChecklist.map((item, index) => (
+                <label className="guide-checklist-item" key={index}>
+                  <input type="checkbox" />
+                  <span className="guide-check-box"><Icon name="check" /></span>
+                  <span>{item}</span>
+                </label>
+              ))}
+            </div>
+            <button className="guide-download-btn" onClick={downloadBuyingChecklistPdf}>
+              <Icon name="document" />
+              Pobierz listę kontrolną (PDF)
+            </button>
+          </section>
+
+          <article className="guide-chapter" id="bledy">
+            <span className="guide-chapter-index">15</span>
+            <h2>Najczęstsze błędy kupujących</h2>
+            <p>Większości kosztownych pomyłek da się uniknąć, jeśli wie się, gdzie najczęściej się pojawiają.</p>
+            <div className="guide-mistakes">
+              {buyingMistakes.map((mistake) => (
+                <article key={mistake.title} className="guide-mistake">
+                  <span className="guide-mistake-icon"><Icon name="warning" /></span>
+                  <div>
+                    <strong>{mistake.title}</strong>
+                    <p>{mistake.text}</p>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </article>
+
+          <article className="guide-chapter" id="faq">
+            <span className="guide-chapter-index">16</span>
+            <h2>Najczęściej zadawane pytania (FAQ)</h2>
+            <div className="guide-faq">
+              {buyingFaq.map((item) => (
+                <details key={item.q} className="guide-faq-item">
+                  <summary>
+                    {item.q}
+                    <Icon name="chevron" />
+                  </summary>
+                  <p>{item.a}</p>
+                </details>
+              ))}
+            </div>
+          </article>
+
+          <article className="guide-chapter guide-summary" id="podsumowanie">
+            <span className="guide-chapter-index">17</span>
+            <h2>Podsumowanie</h2>
+            <p>
+              Zakup mieszkania to jedna z ważniejszych decyzji finansowych w życiu, ale rozłożona na etapy przestaje
+              być przytłaczająca. Zacznij od potrzeb i budżetu, świadomie wybierz sposób finansowania, dokładnie
+              sprawdź stan techniczny i prawny, a formalności potraktuj poważnie. Najlepszą ochroną są wiedza,
+              spokój i pisemne ustalenia – emocje zostaw na moment odbioru kluczy.
+            </p>
+            <div className="guide-summary-note">
+              <Icon name="warning" />
+              <p>Ten poradnik ma charakter informacyjny i nie stanowi porady prawnej ani podatkowej. Szczegóły dotyczące podatków, opłat i umów potwierdzaj u notariusza, doradcy kredytowego lub prawnika.</p>
+            </div>
+          </article>
+
+          <section className="guide-cta">
+            <div>
+              <h2>Gotowy, by znaleźć swoje mieszkanie?</h2>
+              <p>Przeglądaj aktualne oferty dopasowane do Twoich potrzeb i budżetu.</p>
+            </div>
+            <button onClick={() => onNavigate('buy')}>
+              Zobacz oferty mieszkań
+              <Icon name="arrow" />
+            </button>
+          </section>
+        </div>
+
+        <aside className="guide-aside" aria-label="Narzędzia i materiały">
+          <section className="guide-aside-card">
+            <h3><Icon name="calculator" /> Kalkulatory</h3>
+            <div className="guide-aside-list">
+              <button onClick={() => scrollToId('zdolnosc')}>
+                <span><strong>Kalkulator zdolności kredytowej</strong><small>Sprawdź, na jaki kredyt Cię stać</small></span>
+                <Icon name="chevron" />
+              </button>
+              <button onClick={() => onNavigate('valuation')}>
+                <span><strong>Kalkulator wyceny mieszkania</strong><small>Oszacuj wartość nieruchomości</small></span>
+                <Icon name="chevron" />
+              </button>
+              <button onClick={() => onNavigate('priceHistory')}>
+                <span><strong>Historia cen</strong><small>Zobacz, jak zmieniały się ceny</small></span>
+                <Icon name="chevron" />
+              </button>
+              <button onClick={() => onNavigate('districtRanking')}>
+                <span><strong>Ranking dzielnic</strong><small>Porównaj lokalizacje</small></span>
+                <Icon name="chevron" />
+              </button>
+            </div>
+          </section>
+
+          <section className="guide-aside-card">
+            <h3><Icon name="document" /> Do pobrania</h3>
+            <div className="guide-aside-downloads">
+              <button onClick={downloadBuyingChecklistPdf}>
+                <Icon name="document" />
+                <span><strong>Lista kontrolna (PDF)</strong><small>10 rzeczy do sprawdzenia</small></span>
+                <Icon name="upload" />
+              </button>
+            </div>
+          </section>
+
+          <section className="guide-aside-card guide-aside-mistakes">
+            <h3><Icon name="warning" /> Najczęstsze błędy</h3>
+            <ul>
+              {buyingMistakes.slice(0, 5).map((mistake) => (
+                <li key={mistake.title}>
+                  <Icon name="warning" />
+                  {mistake.title}
+                </li>
+              ))}
+            </ul>
+          </section>
+        </aside>
+      </div>
+    </section>
+  );
+}
+
+function GuidesPage({ onNavigate }: { onNavigate: (view: View) => void }) {
   return (
     <section className="guides-page" aria-label="Poradniki">
       <section className="guides-hero">
@@ -12329,16 +12991,35 @@ function GuidesPage() {
               </div>
             </div>
             <div className="guide-topic-grid">
-              {guideTopics.map((topic) => (
-                <article className="guide-topic-card" key={topic.title}>
-                  <span className={`guide-topic-icon ${topic.icon}`}>
-                    <Icon name={topic.icon} />
-                  </span>
-                  <h3>{topic.title}</h3>
-                  <p>{topic.text}</p>
-                  <small>{topic.count}</small>
-                </article>
-              ))}
+              {guideTopics.map((topic) => {
+                const isBuying = topic.title === 'Kupno mieszkania';
+                return (
+                  <article
+                    className={`guide-topic-card${isBuying ? ' is-clickable' : ''}`}
+                    key={topic.title}
+                    role={isBuying ? 'button' : undefined}
+                    tabIndex={isBuying ? 0 : undefined}
+                    onClick={isBuying ? () => onNavigate('guideBuying') : undefined}
+                    onKeyDown={
+                      isBuying
+                        ? (event) => {
+                            if (event.key === 'Enter' || event.key === ' ') {
+                              event.preventDefault();
+                              onNavigate('guideBuying');
+                            }
+                          }
+                        : undefined
+                    }
+                  >
+                    <span className={`guide-topic-icon ${topic.icon}`}>
+                      <Icon name={topic.icon} />
+                    </span>
+                    <h3>{topic.title}</h3>
+                    <p>{topic.text}</p>
+                    <small>{topic.count}</small>
+                  </article>
+                );
+              })}
             </div>
           </section>
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 2f93d5c..70b441f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -24858,3 +24858,987 @@ svg {
     grid-template-columns: 1fr !important;
   }
 }
+
+/* ===== Poradnik: Kupno mieszkania ===== */
+.guide-article {
+  background: linear-gradient(180deg, #f8fafc 0%, #f3f7fb 100%);
+  min-height: calc(100vh - 82px);
+  padding-bottom: 56px;
+}
+
+.guide-hero {
+  min-height: 340px;
+  overflow: hidden;
+  position: relative;
+}
+
+.guide-hero img {
+  height: 100%;
+  inset: 0;
+  object-fit: cover;
+  object-position: right center;
+  position: absolute;
+  width: 100%;
+}
+
+.guide-hero-shade {
+  background:
+    linear-gradient(180deg, rgba(248, 250, 252, 0) 72%, #f8fafc 100%),
+    linear-gradient(90deg, #f8fafc 0%, rgba(248, 250, 252, 0.97) 40%, rgba(248, 250, 252, 0.6) 62%, rgba(248, 250, 252, 0.06) 96%);
+  inset: 0;
+  position: absolute;
+}
+
+.guide-hero-inner {
+  min-height: 340px;
+  padding: 30px 48px 46px;
+  position: relative;
+  z-index: 1;
+}
+
+.guide-back {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid #dce4ec;
+  border-radius: 999px;
+  color: #14223a;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 850;
+  gap: 6px;
+  padding: 7px 14px 7px 10px;
+}
+
+.guide-back svg {
+  height: 15px;
+  transform: rotate(180deg);
+  width: 15px;
+}
+
+.guide-hero-badge {
+  align-items: center;
+  background: #0b9f5c;
+  border-radius: 999px;
+  color: #ffffff;
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 900;
+  gap: 7px;
+  margin-top: 20px;
+  padding: 7px 14px;
+}
+
+.guide-hero-badge svg {
+  height: 15px;
+  width: 15px;
+}
+
+.guide-hero h1 {
+  color: #14223a;
+  font-size: clamp(38px, 3.8vw, 60px);
+  line-height: 1.02;
+  margin: 16px 0 0;
+  max-width: 720px;
+}
+
+.guide-hero-lead {
+  color: #4a5766;
+  font-size: 17px;
+  font-weight: 650;
+  line-height: 1.5;
+  margin: 16px 0 0;
+  max-width: 680px;
+}
+
+.guide-hero-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 22px;
+}
+
+.guide-hero-chips span {
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #dce4ec;
+  border-radius: 8px;
+  color: #33465c;
+  display: inline-flex;
+  font-size: 12px;
+  font-weight: 800;
+  gap: 7px;
+  padding: 8px 12px;
+}
+
+.guide-hero-chips svg {
+  color: #0b9f5c;
+  height: 15px;
+  width: 15px;
+}
+
+.guide-article-layout {
+  align-items: start;
+  display: grid;
+  gap: 28px;
+  grid-template-columns: 232px minmax(0, 1fr) 312px;
+  margin-top: 26px;
+}
+
+/* Spis treści */
+.guide-toc {
+  position: sticky;
+  top: 20px;
+}
+
+.guide-toc-inner {
+  background: #ffffff;
+  border: 1px solid #dce4ec;
+  border-radius: 8px;
+  max-height: calc(100vh - 40px);
+  overflow-y: auto;
+  padding: 18px 16px;
+}
+
+.guide-toc-inner h2 {
+  color: #14223a;
+  font-size: 15px;
+  margin: 0 0 12px;
+}
+
+.guide-toc-inner ol {
+  counter-reset: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.guide-toc-inner li button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  color: #46586c;
+  cursor: pointer;
+  display: flex;
+  font-size: 13px;
+  font-weight: 700;
+  gap: 10px;
+  padding: 7px 8px;
+  text-align: left;
+  width: 100%;
+}
+
+.guide-toc-inner li button span {
+  align-items: center;
+  background: #eef3f8;
+  border-radius: 6px;
+  color: #0b9f5c;
+  display: grid;
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 900;
+  height: 22px;
+  place-items: center;
+  width: 22px;
+}
+
+.guide-toc-inner li button:hover {
+  background: #f2f7fb;
+  color: #14223a;
+}
+
+/* Blok główny */
+.guide-body {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 0;
+}
+
+.guide-block-head h2 {
+  color: #14223a;
+  font-size: 22px;
+  margin: 0;
+}
+
+.guide-block-head p {
+  color: #607085;
+  font-size: 14px;
+  font-weight: 650;
+  margin: 6px 0 0;
+}
+
+/* Proces 12 kroków */
+.guide-process {
+  background: #ffffff;
+  border: 1px solid #dce4ec;
+  border-radius: 8px;
+  padding: 22px;
+}
+
+.guide-process-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  margin-top: 18px;
+}
+
+.guide-process-card {
+  background: #f8fafc;
+  border: 1px solid #e6edf3;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 14px 12px;
+  position: relative;
+}
+
+.guide-process-num {
+  align-items: center;
+  background: #0b9f5c;
+  border-radius: 6px;
+  color: #ffffff;
+  display: grid;
+  font-size: 12px;
+  font-weight: 900;
+  height: 24px;
+  place-items: center;
+  width: 24px;
+}
+
+.guide-process-icon {
+  color: #13a360;
+}
+
+.guide-process-icon svg {
+  height: 22px;
+  width: 22px;
+}
+
+.guide-process-card strong {
+  color: #14223a;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1.25;
+}
+
+.guide-process-card small {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
+/* Rozdziały */
+.guide-chapter {
+  background: #ffffff;
+  border: 1px solid #dce4ec;
+  border-radius: 8px;
+  padding: 26px 28px;
+  position: relative;
+  scroll-margin-top: 20px;
+}
+
+.guide-chapter-index {
+  color: #d7e6dc;
+  font-size: 40px;
+  font-weight: 950;
+  letter-spacing: -1px;
+  line-height: 1;
+}
+
+.guide-chapter h2 {
+  color: #14223a;
+  font-size: 24px;
+  margin: 8px 0 14px;
+}
+
+.guide-chapter p {
+  color: #3f4d5e;
+  font-size: 15px;
+  font-weight: 550;
+  line-height: 1.62;
+  margin: 0 0 14px;
+}
+
+.guide-chapter p:last-child {
+  margin-bottom: 0;
+}
+
+.guide-list {
+  color: #3f4d5e;
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  list-style: none;
+  margin: 4px 0 14px;
+  padding: 0;
+}
+
+.guide-list li {
+  font-size: 15px;
+  font-weight: 550;
+  line-height: 1.5;
+  padding-left: 22px;
+  position: relative;
+}
+
+.guide-list li::before {
+  background: #0b9f5c;
+  border-radius: 50%;
+  content: "";
+  height: 7px;
+  left: 4px;
+  position: absolute;
+  top: 9px;
+  width: 7px;
+}
+
+.guide-list li strong {
+  color: #14223a;
+}
+
+/* Callouty */
+.guide-callout {
+  border-radius: 8px;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 24px minmax(0, 1fr);
+  margin-top: 6px;
+  padding: 16px 18px;
+}
+
+.guide-callout svg {
+  height: 22px;
+  margin-top: 2px;
+  width: 22px;
+}
+
+.guide-callout strong {
+  display: block;
+  font-size: 14px;
+  font-weight: 900;
+  margin-bottom: 4px;
+}
+
+.guide-callout p {
+  font-size: 14px !important;
+  margin: 0 !important;
+}
+
+.guide-callout-tip {
+  background: #edf8f1;
+  border: 1px solid #c6e8d4;
+}
+
+.guide-callout-tip svg,
+.guide-callout-tip strong {
+  color: #0b7a47;
+}
+
+.guide-callout-warn {
+  background: #fef6ec;
+  border: 1px solid #f6dcb6;
+}
+
+.guide-callout-warn svg,
+.guide-callout-warn strong {
+  color: #b9791b;
+}
+
+.guide-callout-info {
+  background: #eef4fd;
+  border: 1px solid #cfe0f7;
+}
+
+.guide-callout-info svg,
+.guide-callout-info strong {
+  color: #2c62c6;
+}
+
+.guide-callout p,
+.guide-callout-tip p,
+.guide-callout-warn p,
+.guide-callout-info p {
+  color: #3f4d5e;
+}
+
+/* Tabela kosztów */
+.guide-table-wrap {
+  border: 1px solid #e2e9f0;
+  border-radius: 8px;
+  margin: 4px 0 16px;
+  overflow-x: auto;
+}
+
+.guide-table {
+  border-collapse: collapse;
+  min-width: 560px;
+  width: 100%;
+}
+
+.guide-table th {
+  background: #f4f8fb;
+  border-bottom: 1px solid #e2e9f0;
+  color: #52627a;
+  font-size: 11px;
+  font-weight: 900;
+  letter-spacing: 0.03em;
+  padding: 11px 14px;
+  text-align: left;
+  text-transform: uppercase;
+}
+
+.guide-table td {
+  border-bottom: 1px solid #eef2f6;
+  color: #3f4d5e;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 12px 14px;
+  vertical-align: top;
+}
+
+.guide-table tr:last-child td {
+  border-bottom: 0;
+}
+
+.guide-table td strong {
+  color: #14223a;
+}
+
+/* Dwie kolumny (za/przeciw, rynki) */
+.guide-two-col {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: 1fr 1fr;
+  margin-top: 4px;
+}
+
+.guide-pro,
+.guide-con,
+.guide-market {
+  border: 1px solid #e2e9f0;
+  border-radius: 8px;
+  padding: 16px 18px;
+}
+
+.guide-pro {
+  background: #edf8f1;
+  border-color: #c6e8d4;
+}
+
+.guide-con {
+  background: #fbfdff;
+}
+
+.guide-market {
+  background: #f8fafc;
+}
+
+.guide-pro h4,
+.guide-con h4,
+.guide-market h4 {
+  align-items: center;
+  color: #14223a;
+  display: flex;
+  font-size: 15px;
+  gap: 8px;
+  margin: 0 0 12px;
+}
+
+.guide-pro h4 svg,
+.guide-market h4 svg {
+  color: #0b9f5c;
+  height: 17px;
+  width: 17px;
+}
+
+.guide-con h4 svg {
+  color: #2c62c6;
+  height: 17px;
+  width: 17px;
+}
+
+.guide-pro ul,
+.guide-con ul,
+.guide-market ul {
+  color: #3f4d5e;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.guide-pro li,
+.guide-con li,
+.guide-market li {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.45;
+  padding-left: 18px;
+  position: relative;
+}
+
+.guide-pro li::before,
+.guide-con li::before,
+.guide-market li::before {
+  color: #0b9f5c;
+  content: "›";
+  font-weight: 900;
+  left: 3px;
+  position: absolute;
+  top: 0;
+}
+
+/* Checklista */
+.guide-checklist {
+  background: #ffffff;
+  border: 1px solid #dce4ec;
+  border-radius: 8px;
+  padding: 24px 26px;
+  scroll-margin-top: 20px;
+}
+
+.guide-checklist-grid {
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 1fr 1fr;
+  margin: 16px 0 18px;
+}
+
+.guide-checklist-item {
+  align-items: flex-start;
+  background: #f8fafc;
+  border: 1px solid #e6edf3;
+  border-radius: 8px;
+  color: #33465c;
+  cursor: pointer;
+  display: flex;
+  font-size: 13px;
+  font-weight: 650;
+  gap: 10px;
+  line-height: 1.4;
+  padding: 12px 14px;
+}
+
+.guide-checklist-item input {
+  display: none;
+}
+
+.guide-check-box {
+  align-items: center;
+  background: #ffffff;
+  border: 1.5px solid #cdd7e1;
+  border-radius: 5px;
+  color: transparent;
+  display: grid;
+  flex-shrink: 0;
+  height: 20px;
+  place-items: center;
+  width: 20px;
+}
+
+.guide-check-box svg {
+  height: 13px;
+  width: 13px;
+}
+
+.guide-checklist-item input:checked ~ .guide-check-box {
+  background: #0b9f5c;
+  border-color: #0b9f5c;
+  color: #ffffff;
+}
+
+.guide-checklist-item input:checked ~ span:last-child {
+  color: #8a97a6;
+  text-decoration: line-through;
+}
+
+.guide-download-btn,
+.guide-cta button {
+  align-items: center;
+  background: #0b9f5c;
+  border: 0;
+  border-radius: 8px;
+  color: #ffffff;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 14px;
+  font-weight: 900;
+  gap: 8px;
+  padding: 12px 20px;
+}
+
+.guide-download-btn svg {
+  height: 17px;
+  width: 17px;
+}
+
+.guide-download-btn:hover,
+.guide-cta button:hover {
+  background: #0a8b50;
+}
+
+/* Najczęstsze błędy */
+.guide-mistakes {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 1fr 1fr;
+  margin-top: 4px;
+}
+
+.guide-mistake {
+  background: #fef6ec;
+  border: 1px solid #f6dcb6;
+  border-radius: 8px;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 34px minmax(0, 1fr);
+  padding: 14px 16px;
+}
+
+.guide-mistake-icon {
+  align-items: center;
+  background: #fbe4c4;
+  border-radius: 8px;
+  color: #b9791b;
+  display: grid;
+  height: 34px;
+  place-items: center;
+  width: 34px;
+}
+
+.guide-mistake-icon svg {
+  height: 18px;
+  width: 18px;
+}
+
+.guide-mistake strong {
+  color: #14223a;
+  display: block;
+  font-size: 14px;
+  font-weight: 900;
+  margin-bottom: 4px;
+}
+
+.guide-mistake p {
+  color: #4a5766 !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  line-height: 1.45 !important;
+  margin: 0 !important;
+}
+
+/* FAQ */
+.guide-faq {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 4px;
+}
+
+.guide-faq-item {
+  background: #f8fafc;
+  border: 1px solid #e6edf3;
+  border-radius: 8px;
+  padding: 0 16px;
+}
+
+.guide-faq-item summary {
+  align-items: center;
+  color: #14223a;
+  cursor: pointer;
+  display: flex;
+  font-size: 15px;
+  font-weight: 850;
+  gap: 12px;
+  justify-content: space-between;
+  list-style: none;
+  padding: 15px 0;
+}
+
+.guide-faq-item summary::-webkit-details-marker {
+  display: none;
+}
+
+.guide-faq-item summary svg {
+  color: #0b9f5c;
+  flex-shrink: 0;
+  height: 18px;
+  transition: transform 0.2s ease;
+  width: 18px;
+}
+
+.guide-faq-item[open] summary svg {
+  transform: rotate(180deg);
+}
+
+.guide-faq-item p {
+  color: #4a5766 !important;
+  font-size: 14px !important;
+  font-weight: 550 !important;
+  line-height: 1.6 !important;
+  margin: 0 !important;
+  padding: 0 0 16px !important;
+}
+
+/* Podsumowanie + CTA */
+.guide-summary {
+  background: #f5faf7;
+  border-color: #cfe9da;
+}
+
+.guide-summary-note {
+  align-items: flex-start;
+  background: #ffffff;
+  border: 1px solid #e2e9f0;
+  border-radius: 8px;
+  display: grid;
+  gap: 10px;
+  grid-template-columns: 20px minmax(0, 1fr);
+  margin-top: 8px;
+  padding: 14px 16px;
+}
+
+.guide-summary-note svg {
+  color: #8793a3;
+  height: 18px;
+  width: 18px;
+}
+
+.guide-summary-note p {
+  color: #64748b !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  line-height: 1.5 !important;
+  margin: 0 !important;
+}
+
+.guide-cta {
+  align-items: center;
+  background: linear-gradient(120deg, #0b9f5c 0%, #0c7f4c 100%);
+  border-radius: 10px;
+  color: #ffffff;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  justify-content: space-between;
+  padding: 26px 30px;
+}
+
+.guide-cta h2 {
+  color: #ffffff;
+  font-size: 22px;
+  margin: 0;
+}
+
+.guide-cta p {
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 14px;
+  font-weight: 650;
+  margin: 6px 0 0;
+}
+
+.guide-cta button {
+  background: #ffffff;
+  color: #0b7a47;
+}
+
+.guide-cta button:hover {
+  background: #f0f5f2;
+}
+
+.guide-cta button svg {
+  height: 16px;
+  width: 16px;
+}
+
+/* Prawy sidebar */
+.guide-aside {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: sticky;
+  top: 20px;
+}
+
+.guide-aside-card {
+  background: #ffffff;
+  border: 1px solid #dce4ec;
+  border-radius: 8px;
+  padding: 18px;
+}
+
+.guide-aside-card h3 {
+  align-items: center;
+  color: #14223a;
+  display: flex;
+  font-size: 15px;
+  gap: 8px;
+  margin: 0 0 14px;
+}
+
+.guide-aside-card h3 svg {
+  color: #0b9f5c;
+  height: 17px;
+  width: 17px;
+}
+
+.guide-aside-list,
+.guide-aside-downloads {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.guide-aside-list button,
+.guide-aside-downloads button {
+  align-items: center;
+  background: #f8fafc;
+  border: 1px solid #e6edf3;
+  border-radius: 8px;
+  color: #14223a;
+  cursor: pointer;
+  display: flex;
+  gap: 10px;
+  padding: 11px 12px;
+  text-align: left;
+  width: 100%;
+}
+
+.guide-aside-list button:hover,
+.guide-aside-downloads button:hover {
+  background: #eef4f9;
+  border-color: #d3e0ea;
+}
+
+.guide-aside-list button > span,
+.guide-aside-downloads button > span {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: 2px;
+  min-width: 0;
+}
+
+.guide-aside-list strong,
+.guide-aside-downloads strong {
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.guide-aside-list small,
+.guide-aside-downloads small {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.guide-aside-list button > svg {
+  color: #9aa5b4;
+  flex-shrink: 0;
+  height: 16px;
+  transform: rotate(-90deg);
+  width: 16px;
+}
+
+.guide-aside-downloads button > svg:first-child {
+  color: #0b9f5c;
+  flex-shrink: 0;
+  height: 20px;
+  width: 20px;
+}
+
+.guide-aside-downloads button > svg:last-child {
+  color: #9aa5b4;
+  flex-shrink: 0;
+  height: 16px;
+  width: 16px;
+}
+
+.guide-aside-mistakes ul {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.guide-aside-mistakes li {
+  align-items: center;
+  color: #46586c;
+  display: flex;
+  font-size: 13px;
+  font-weight: 700;
+  gap: 9px;
+  line-height: 1.35;
+}
+
+.guide-aside-mistakes li svg {
+  color: #d99a3a;
+  flex-shrink: 0;
+  height: 15px;
+  width: 15px;
+}
+
+@media (max-width: 1200px) {
+  .guide-article-layout {
+    grid-template-columns: minmax(0, 1fr) 300px;
+  }
+
+  .guide-toc {
+    display: none;
+  }
+
+  .guide-process-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 900px) {
+  .guide-hero-inner {
+    padding: 24px 20px 34px;
+  }
+
+  .guide-article-layout {
+    grid-template-columns: minmax(0, 1fr);
+    padding: 0 20px;
+  }
+
+  .guide-aside {
+    position: static;
+  }
+
+  .guide-process-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .guide-two-col,
+  .guide-checklist-grid,
+  .guide-mistakes {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 560px) {
+  .guide-chapter {
+    padding: 20px 18px;
+  }
+
+  .guide-process-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .guide-cta {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

From 12fcb60b4c178a53a790fc6e88157416333bdd6f Mon Sep 17 00:00:00 2001
From: pascal <zatorskipascal@gmail.com>
Date: Tue, 21 Jul 2026 17:02:25 +0200
Subject: [PATCH 02/10] =?UTF-8?q?Kalkulator=20zdolno=C5=9Bci,=20integracja?=
 =?UTF-8?q?=20Moich=20ofert=20i=20system=20powiadomie=C5=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Kalkulator zdolności kredytowej: nowy widok z live-obliczeniami (rata
  annuitetowa/malejąca, DTI/DSTI, rekomendacje, donut), wpięty w poradnik,
  panel i stronę główną; pasek boczny konta dla zalogowanych.
- Moje oferty: prawdziwe ogłoszenia (/listings/mine) scalone z listą,
  realne akcje Wstrzymaj/Wznów (PATCH /status, nowy status PAUSED),
  Usuń (DELETE) z kontrolą właściciela; realne wyświetlenia (viewsCount)
  i zapisane z ulubionych. Fix CHECK constraintu enuma w SchemaFixer.
- System powiadomień: encja Notification + serwis + kontroler + SSE
  realtime (token w query param w JwtAuthFilter). Podpięte źródła
  serwerowe (wiadomości, zmiana statusu ogłoszenia, zdarzenia konta)
  i klienckie (ulubione, spadek ceny, spotkania, weryfikacja telefonu).
  Centralny NotificationsProvider; dzwonek i strona bez zmian designu,
  klikalne z deep-linkami i oznaczaniem jako przeczytane.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../polskalokalnie/admin/AdminController.java |  24 +-
 .../pl/polskalokalnie/auth/JwtAuthFilter.java |  18 +-
 .../pl/polskalokalnie/config/SchemaFixer.java |  10 +
 .../listing/ListingController.java            |  18 +
 .../listing/ListingResponse.java              |   2 +
 .../listing/ListingService.java               |  66 +-
 .../polskalokalnie/listing/ListingStatus.java |   3 +-
 .../message/MessageService.java               |  35 +-
 .../CreateNotificationRequest.java            |  19 +
 .../notification/Notification.java            | 128 +++
 .../notification/NotificationController.java  |  71 ++
 .../notification/NotificationRepository.java  |  20 +
 .../notification/NotificationResponse.java    |  27 +
 .../notification/NotificationService.java     | 143 +++
 frontend/src/App.tsx                          | 857 +++++++++++++++---
 frontend/src/main.tsx                         |   5 +-
 frontend/src/notifications.tsx                | 178 ++++
 frontend/src/styles.css                       | 802 ++++++++++++++++
 18 files changed, 2314 insertions(+), 112 deletions(-)
 create mode 100644 backend/src/main/java/pl/polskalokalnie/notification/CreateNotificationRequest.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/notification/Notification.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/notification/NotificationController.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/notification/NotificationRepository.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/notification/NotificationResponse.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/notification/NotificationService.java
 create mode 100644 frontend/src/notifications.tsx

diff --git a/backend/src/main/java/pl/polskalokalnie/admin/AdminController.java b/backend/src/main/java/pl/polskalokalnie/admin/AdminController.java
index 2967327..ee2b6d6 100644
--- a/backend/src/main/java/pl/polskalokalnie/admin/AdminController.java
+++ b/backend/src/main/java/pl/polskalokalnie/admin/AdminController.java
@@ -27,6 +27,7 @@ import pl.polskalokalnie.listing.ListingStatus;
 import pl.polskalokalnie.message.MessageResponse;
 import pl.polskalokalnie.message.MessageService;
 import pl.polskalokalnie.message.SendMessageRequest;
+import pl.polskalokalnie.notification.NotificationService;
 import pl.polskalokalnie.report.ListingReportResponse;
 import pl.polskalokalnie.report.ListingReportService;
 import pl.polskalokalnie.report.ResolveListingReportRequest;
@@ -52,13 +53,15 @@ public class AdminController {
     private final TextModerationService textModerationService;
     private final AdminStatsService adminStatsService;
     private final PasswordEncoder passwordEncoder;
+    private final NotificationService notificationService;
 
     public AdminController(UserRepository userRepository, BlockedEmailRepository blockedEmailRepository,
             ListingService listingService, ListingReportService listingReportService,
             MessageService messageService,
             TextModerationService textModerationService,
             AdminStatsService adminStatsService,
-            PasswordEncoder passwordEncoder) {
+            PasswordEncoder passwordEncoder,
+            NotificationService notificationService) {
         this.userRepository = userRepository;
         this.blockedEmailRepository = blockedEmailRepository;
         this.listingService = listingService;
@@ -67,6 +70,7 @@ public class AdminController {
         this.textModerationService = textModerationService;
         this.adminStatsService = adminStatsService;
         this.passwordEncoder = passwordEncoder;
+        this.notificationService = notificationService;
     }
 
     // --- Uzytkownicy ---
@@ -93,7 +97,12 @@ public class AdminController {
     public UserResponse verify(@PathVariable Long id) {
         AppUser user = requireUser(id);
         user.setVerified(true);
-        return UserResponse.from(userRepository.save(user));
+        AppUser saved = userRepository.save(user);
+        notificationService.create(saved.getEmail(), "system", "check",
+                "Konto zweryfikowane",
+                "Twoje konto zostało zweryfikowane przez administratora. Masz dostęp do wszystkich funkcji serwisu.",
+                "accountSecurity", "account-verified");
+        return UserResponse.from(saved);
     }
 
     @PostMapping("/users/{id}/grant-admin")
@@ -104,7 +113,12 @@ public class AdminController {
         }
         user.setRole(Role.ADMIN);
         user.setVerified(true);
-        return UserResponse.from(userRepository.save(user));
+        AppUser saved = userRepository.save(user);
+        notificationService.create(saved.getEmail(), "system", "shield",
+                "Nadano uprawnienia administratora",
+                "Twoje konto otrzymało rolę administratora.",
+                "account", null);
+        return UserResponse.from(saved);
     }
 
     @PostMapping("/users/{id}/revoke-admin")
@@ -137,6 +151,10 @@ public class AdminController {
         String temporaryPassword = generateTemporaryPassword();
         user.setPasswordHash(passwordEncoder.encode(temporaryPassword));
         userRepository.save(user);
+        notificationService.create(user.getEmail(), "system", "lock",
+                "Hasło zostało zresetowane",
+                "Administrator zresetował hasło do Twojego konta. Zaloguj się nowym hasłem i ustaw własne w ustawieniach bezpieczeństwa.",
+                "accountSecurity", null);
         return new ResetPasswordResponse(temporaryPassword);
     }
 
diff --git a/backend/src/main/java/pl/polskalokalnie/auth/JwtAuthFilter.java b/backend/src/main/java/pl/polskalokalnie/auth/JwtAuthFilter.java
index 6bb9446..28a847f 100644
--- a/backend/src/main/java/pl/polskalokalnie/auth/JwtAuthFilter.java
+++ b/backend/src/main/java/pl/polskalokalnie/auth/JwtAuthFilter.java
@@ -30,9 +30,8 @@ public class JwtAuthFilter extends OncePerRequestFilter {
             @NonNull HttpServletResponse response,
             @NonNull FilterChain filterChain
     ) throws ServletException, IOException {
-        String header = request.getHeader("Authorization");
-        if (header != null && header.startsWith("Bearer ")) {
-            String token = header.substring(7);
+        String token = resolveToken(request);
+        if (token != null) {
             try {
                 Claims claims = jwtService.parse(token);
                 String email = claims.getSubject();
@@ -48,4 +47,17 @@ public class JwtAuthFilter extends OncePerRequestFilter {
         }
         filterChain.doFilter(request, response);
     }
+
+    // Token z naglowka Authorization, a dla SSE (EventSource nie ustawia naglowkow) - z parametru access_token.
+    private String resolveToken(HttpServletRequest request) {
+        String header = request.getHeader("Authorization");
+        if (header != null && header.startsWith("Bearer ")) {
+            return header.substring(7);
+        }
+        String param = request.getParameter("access_token");
+        if (param != null && !param.isBlank()) {
+            return param;
+        }
+        return null;
+    }
 }
diff --git a/backend/src/main/java/pl/polskalokalnie/config/SchemaFixer.java b/backend/src/main/java/pl/polskalokalnie/config/SchemaFixer.java
index 705aaa7..e88672b 100644
--- a/backend/src/main/java/pl/polskalokalnie/config/SchemaFixer.java
+++ b/backend/src/main/java/pl/polskalokalnie/config/SchemaFixer.java
@@ -48,6 +48,16 @@ public class SchemaFixer {
                 "ALTER TABLE IF EXISTS listing_report_attachments ADD COLUMN IF NOT EXISTS data_url TEXT"
             );
 
+            // Hibernate (ddl-auto=update) nie aktualizuje CHECK constraintu enuma po dodaniu nowej wartosci.
+            // Odtwarzamy go tak, aby dopuszczal status PAUSED (wstrzymane ogloszenie uzytkownika).
+            jdbcTemplate.execute(
+                "ALTER TABLE property_listings DROP CONSTRAINT IF EXISTS property_listings_status_check"
+            );
+            jdbcTemplate.execute(
+                "ALTER TABLE property_listings ADD CONSTRAINT property_listings_status_check "
+                + "CHECK (status IN ('PENDING','APPROVED','REJECTED','PAUSED'))"
+            );
+
             String dataUrlType = jdbcTemplate.query(
                 "SELECT data_type FROM information_schema.columns WHERE table_name = 'listing_report_attachments' AND column_name = 'data_url'",
                 rs -> rs.next() ? rs.getString(1) : null
diff --git a/backend/src/main/java/pl/polskalokalnie/listing/ListingController.java b/backend/src/main/java/pl/polskalokalnie/listing/ListingController.java
index 26c8a4e..020ca46 100644
--- a/backend/src/main/java/pl/polskalokalnie/listing/ListingController.java
+++ b/backend/src/main/java/pl/polskalokalnie/listing/ListingController.java
@@ -5,7 +5,9 @@ import java.net.URI;
 import java.util.List;
 import org.springframework.http.ResponseEntity;
 import org.springframework.security.core.Authentication;
+import org.springframework.web.bind.annotation.DeleteMapping;
 import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PatchMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestBody;
@@ -55,4 +57,20 @@ public class ListingController {
                 .created(URI.create("/api/listings/" + response.id()))
                 .body(response);
     }
+
+    // Wstrzymanie/wznowienie wlasnego ogloszenia (status=PAUSED lub APPROVED).
+    @PatchMapping("/{id}/status")
+    public ListingResponse updateStatus(
+            @PathVariable Long id,
+            @RequestParam ListingStatus status,
+            Authentication authentication
+    ) {
+        return listingService.setOwnStatus(id, authentication.getName(), status);
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseEntity<Void> delete(@PathVariable Long id, Authentication authentication) {
+        listingService.deleteOwn(id, authentication.getName());
+        return ResponseEntity.noContent().build();
+    }
 }
diff --git a/backend/src/main/java/pl/polskalokalnie/listing/ListingResponse.java b/backend/src/main/java/pl/polskalokalnie/listing/ListingResponse.java
index 7b30a4d..5da8292 100644
--- a/backend/src/main/java/pl/polskalokalnie/listing/ListingResponse.java
+++ b/backend/src/main/java/pl/polskalokalnie/listing/ListingResponse.java
@@ -26,6 +26,7 @@ public record ListingResponse(
         String coverPhoto,
         String ownerEmail,
         ListingStatus status,
+        Long viewsCount,
         Instant createdAt
 ) {
     public static ListingResponse from(PropertyListing listing) {
@@ -48,6 +49,7 @@ public record ListingResponse(
                 listing.getCoverPhoto(),
                 listing.getOwnerEmail(),
                 listing.getStatus(),
+                listing.getViewsCount(),
                 listing.getCreatedAt()
         );
     }
diff --git a/backend/src/main/java/pl/polskalokalnie/listing/ListingService.java b/backend/src/main/java/pl/polskalokalnie/listing/ListingService.java
index a8c740f..25b58ee 100644
--- a/backend/src/main/java/pl/polskalokalnie/listing/ListingService.java
+++ b/backend/src/main/java/pl/polskalokalnie/listing/ListingService.java
@@ -10,6 +10,7 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 import org.springframework.web.server.ResponseStatusException;
 import pl.polskalokalnie.moderation.TextModerationService;
+import pl.polskalokalnie.notification.NotificationService;
 
 @Service
 public class ListingService {
@@ -18,10 +19,13 @@ public class ListingService {
 
     private final ListingRepository listingRepository;
     private final TextModerationService textModerationService;
+    private final NotificationService notificationService;
 
-    public ListingService(ListingRepository listingRepository, TextModerationService textModerationService) {
+    public ListingService(ListingRepository listingRepository, TextModerationService textModerationService,
+            NotificationService notificationService) {
         this.listingRepository = listingRepository;
         this.textModerationService = textModerationService;
+        this.notificationService = notificationService;
     }
 
     public List<ListingResponse> search(String city, OfferType offerType, PropertyType propertyType) {
@@ -56,6 +60,39 @@ public class ListingService {
                 .toList();
     }
 
+    // --- Operacje wlasciciela na wlasnym ogloszeniu ---
+
+    // Wstrzymanie/wznowienie widocznosci wlasnego ogloszenia (tylko miedzy APPROVED i PAUSED).
+    @Transactional
+    public ListingResponse setOwnStatus(Long id, String ownerEmail, ListingStatus status) {
+        if (status != ListingStatus.APPROVED && status != ListingStatus.PAUSED) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Nieobslugiwana zmiana statusu");
+        }
+        PropertyListing listing = listingRepository.findById(id)
+                .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Listing not found"));
+        requireOwner(listing, ownerEmail);
+        if (listing.getStatus() != ListingStatus.APPROVED && listing.getStatus() != ListingStatus.PAUSED) {
+            throw new ResponseStatusException(HttpStatus.CONFLICT, "Tylko opublikowane ogloszenie mozna wstrzymac lub wznowic");
+        }
+        listing.setStatus(status);
+        return ListingResponse.from(listingRepository.save(listing));
+    }
+
+    @Transactional
+    public void deleteOwn(Long id, String ownerEmail) {
+        PropertyListing listing = listingRepository.findById(id)
+                .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Listing not found"));
+        requireOwner(listing, ownerEmail);
+        listingRepository.delete(listing);
+    }
+
+    private void requireOwner(PropertyListing listing, String ownerEmail) {
+        if (ownerEmail == null || listing.getOwnerEmail() == null
+                || !ownerEmail.equalsIgnoreCase(listing.getOwnerEmail())) {
+            throw new ResponseStatusException(HttpStatus.FORBIDDEN, "Brak uprawnien do tego ogloszenia");
+        }
+    }
+
     @Transactional
     public ListingDetailResponse create(ListingCreateRequest request, String ownerEmail) {
         textModerationService.validateOrThrow(
@@ -123,7 +160,32 @@ public class ListingService {
         PropertyListing listing = listingRepository.findById(id)
                 .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Listing not found"));
         listing.setStatus(status);
-        return ListingResponse.from(listingRepository.save(listing));
+        PropertyListing saved = listingRepository.save(listing);
+        notifyOwnerStatusChange(saved, status);
+        return ListingResponse.from(saved);
+    }
+
+    // Powiadomienie dla wlasciciela po decyzji moderacji (approve/reject).
+    private void notifyOwnerStatusChange(PropertyListing listing, ListingStatus status) {
+        if (listing.getOwnerEmail() == null) {
+            return;
+        }
+        String title;
+        String body;
+        String icon;
+        if (status == ListingStatus.APPROVED) {
+            title = "Ogłoszenie opublikowane";
+            body = "Twoje ogłoszenie „" + listing.getTitle() + "” zostało zatwierdzone i jest już widoczne w serwisie.";
+            icon = "check";
+        } else if (status == ListingStatus.REJECTED) {
+            title = "Ogłoszenie odrzucone";
+            body = "Twoje ogłoszenie „" + listing.getTitle() + "” zostało odrzucone przez moderację.";
+            icon = "warning";
+        } else {
+            return;
+        }
+        notificationService.create(listing.getOwnerEmail(), "listing", icon, title, body,
+                "listing:" + listing.getId(), "status-" + listing.getId() + "-" + status);
     }
 
     public void delete(Long id) {
diff --git a/backend/src/main/java/pl/polskalokalnie/listing/ListingStatus.java b/backend/src/main/java/pl/polskalokalnie/listing/ListingStatus.java
index 8a0c0d5..5e03db3 100644
--- a/backend/src/main/java/pl/polskalokalnie/listing/ListingStatus.java
+++ b/backend/src/main/java/pl/polskalokalnie/listing/ListingStatus.java
@@ -3,5 +3,6 @@ package pl.polskalokalnie.listing;
 public enum ListingStatus {
     PENDING,
     APPROVED,
-    REJECTED
+    REJECTED,
+    PAUSED
 }
diff --git a/backend/src/main/java/pl/polskalokalnie/message/MessageService.java b/backend/src/main/java/pl/polskalokalnie/message/MessageService.java
index 1faefe8..f3de50c 100644
--- a/backend/src/main/java/pl/polskalokalnie/message/MessageService.java
+++ b/backend/src/main/java/pl/polskalokalnie/message/MessageService.java
@@ -5,6 +5,7 @@ import org.springframework.http.HttpStatus;
 import org.springframework.stereotype.Service;
 import org.springframework.web.server.ResponseStatusException;
 import pl.polskalokalnie.moderation.TextModerationService;
+import pl.polskalokalnie.notification.NotificationService;
 import pl.polskalokalnie.user.AppUser;
 import pl.polskalokalnie.user.Role;
 import pl.polskalokalnie.user.UserRepository;
@@ -15,15 +16,18 @@ public class MessageService {
     private final MessageRepository messageRepository;
     private final UserRepository userRepository;
     private final TextModerationService textModerationService;
+    private final NotificationService notificationService;
 
     public MessageService(
             MessageRepository messageRepository,
             UserRepository userRepository,
-            TextModerationService textModerationService
+            TextModerationService textModerationService,
+            NotificationService notificationService
     ) {
         this.messageRepository = messageRepository;
         this.userRepository = userRepository;
         this.textModerationService = textModerationService;
+        this.notificationService = notificationService;
     }
 
     public AppUser resolveAdmin() {
@@ -46,9 +50,38 @@ public class MessageService {
         message.setRecipientId(recipientId);
         message.setContent(content.trim());
         Message saved = messageRepository.save(message);
+
+        notifyRecipient(senderId, recipientId, saved.getContent());
+
         return MessageResponse.from(saved, senderId);
     }
 
+    // Powiadomienie dla odbiorcy kazdej wiadomosci: admin->user ("Wiadomosc od obslugi"),
+    // user->admin traktujemy jako zapytanie/wiadomosc do obslugi.
+    private void notifyRecipient(Long senderId, Long recipientId, String content) {
+        AppUser recipient = userRepository.findById(recipientId).orElse(null);
+        if (recipient == null) {
+            return;
+        }
+        AppUser sender = userRepository.findById(senderId).orElse(null);
+        String senderName = sender != null && sender.getFullName() != null && !sender.getFullName().isBlank()
+                ? sender.getFullName()
+                : "użytkownika";
+        String preview = content.length() > 90 ? content.substring(0, 90) + "…" : content;
+
+        if (recipient.getRole() == Role.ADMIN) {
+            notificationService.create(recipient.getEmail(), "messages", "message",
+                    "Nowa wiadomość od użytkownika",
+                    senderName + ": " + preview,
+                    "messages", null);
+        } else {
+            notificationService.create(recipient.getEmail(), "messages", "mail",
+                    "Wiadomość od obsługi Mieszko",
+                    preview,
+                    "messages:admin", null);
+        }
+    }
+
     public long countUnreadFrom(Long recipientId, Long senderId) {
         return messageRepository.countByRecipientIdAndSenderIdAndReadFalse(recipientId, senderId);
     }
diff --git a/backend/src/main/java/pl/polskalokalnie/notification/CreateNotificationRequest.java b/backend/src/main/java/pl/polskalokalnie/notification/CreateNotificationRequest.java
new file mode 100644
index 0000000..b068e9c
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/notification/CreateNotificationRequest.java
@@ -0,0 +1,19 @@
+package pl.polskalokalnie.notification;
+
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.Size;
+
+/**
+ * Zadanie utworzenia powiadomienia dla zalogowanego uzytkownika (zdarzenia liczone po stronie klienta:
+ * alerty cenowe, spotkania, ulubione, weryfikacja telefonu, dopasowane oferty).
+ * userEmail NIE jest przyjmowany z ciala - serwer ustawia go z tokenu.
+ */
+public record CreateNotificationRequest(
+        @NotBlank @Size(max = 20) String category,
+        @Size(max = 40) String icon,
+        @NotBlank @Size(max = 200) String title,
+        @Size(max = 600) String body,
+        @Size(max = 200) String link,
+        @Size(max = 160) String dedupeKey
+) {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/notification/Notification.java b/backend/src/main/java/pl/polskalokalnie/notification/Notification.java
new file mode 100644
index 0000000..5c1c028
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/notification/Notification.java
@@ -0,0 +1,128 @@
+package pl.polskalokalnie.notification;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.Index;
+import jakarta.persistence.Table;
+import java.time.Instant;
+
+@Entity
+@Table(name = "notifications", indexes = {
+        @Index(name = "idx_notifications_user", columnList = "userEmail"),
+        @Index(name = "idx_notifications_user_dedupe", columnList = "userEmail,dedupeKey")
+})
+public class Notification {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(nullable = false)
+    private String userEmail;
+
+    // Kategoria zgodna z frontendem: listing | messages | system.
+    @Column(nullable = false, length = 20)
+    private String category;
+
+    @Column(nullable = false, length = 40)
+    private String icon;
+
+    @Column(nullable = false, length = 200)
+    private String title;
+
+    @Column(length = 600)
+    private String body;
+
+    // Deskryptor deep-linku, np. "listing:12", "messages:admin", "priceAlerts", "meetings".
+    @Column(length = 200)
+    private String link;
+
+    // Klucz idempotencji - blokuje duplikaty tego samego zdarzenia (np. jeden spadek ceny).
+    @Column(length = 160)
+    private String dedupeKey;
+
+    @Column(nullable = false)
+    private boolean read = false;
+
+    @Column(nullable = false)
+    private Instant createdAt = Instant.now();
+
+    public Long getId() {
+        return id;
+    }
+
+    public String getUserEmail() {
+        return userEmail;
+    }
+
+    public void setUserEmail(String userEmail) {
+        this.userEmail = userEmail;
+    }
+
+    public String getCategory() {
+        return category;
+    }
+
+    public void setCategory(String category) {
+        this.category = category;
+    }
+
+    public String getIcon() {
+        return icon;
+    }
+
+    public void setIcon(String icon) {
+        this.icon = icon;
+    }
+
+    public String getTitle() {
+        return title;
+    }
+
+    public void setTitle(String title) {
+        this.title = title;
+    }
+
+    public String getBody() {
+        return body;
+    }
+
+    public void setBody(String body) {
+        this.body = body;
+    }
+
+    public String getLink() {
+        return link;
+    }
+
+    public void setLink(String link) {
+        this.link = link;
+    }
+
+    public String getDedupeKey() {
+        return dedupeKey;
+    }
+
+    public void setDedupeKey(String dedupeKey) {
+        this.dedupeKey = dedupeKey;
+    }
+
+    public boolean isRead() {
+        return read;
+    }
+
+    public void setRead(boolean read) {
+        this.read = read;
+    }
+
+    public Instant getCreatedAt() {
+        return createdAt;
+    }
+
+    public void setCreatedAt(Instant createdAt) {
+        this.createdAt = createdAt;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/notification/NotificationController.java b/backend/src/main/java/pl/polskalokalnie/notification/NotificationController.java
new file mode 100644
index 0000000..709ae73
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/notification/NotificationController.java
@@ -0,0 +1,71 @@
+package pl.polskalokalnie.notification;
+
+import jakarta.validation.Valid;
+import java.util.List;
+import org.springframework.http.MediaType;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.Authentication;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
+
+@RestController
+@RequestMapping("/api/notifications")
+public class NotificationController {
+
+    private final NotificationService notificationService;
+
+    public NotificationController(NotificationService notificationService) {
+        this.notificationService = notificationService;
+    }
+
+    @GetMapping
+    public List<NotificationResponse> list(Authentication authentication) {
+        return notificationService.listOwn(authentication.getName());
+    }
+
+    @GetMapping("/unread-count")
+    public UnreadCountResponse unreadCount(Authentication authentication) {
+        return new UnreadCountResponse(notificationService.unreadCount(authentication.getName()));
+    }
+
+    @PostMapping("/{id}/read")
+    public ResponseEntity<Void> markRead(@PathVariable Long id, Authentication authentication) {
+        notificationService.markRead(id, authentication.getName());
+        return ResponseEntity.noContent().build();
+    }
+
+    @PostMapping("/read-all")
+    public ResponseEntity<Void> markAllRead(Authentication authentication) {
+        notificationService.markAllRead(authentication.getName());
+        return ResponseEntity.noContent().build();
+    }
+
+    // Zdarzenia liczone po stronie klienta (alerty cenowe, spotkania, ulubione, weryfikacja telefonu,
+    // dopasowane oferty). Powiadomienie zawsze trafia do zalogowanego uzytkownika (serwer ustawia odbiorce).
+    @PostMapping
+    public NotificationResponse create(@Valid @RequestBody CreateNotificationRequest request, Authentication authentication) {
+        Notification created = notificationService.create(
+                authentication.getName(),
+                request.category(),
+                request.icon(),
+                request.title(),
+                request.body(),
+                request.link(),
+                request.dedupeKey()
+        );
+        return created == null ? null : NotificationResponse.from(created);
+    }
+
+    @GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
+    public SseEmitter stream(Authentication authentication) {
+        return notificationService.subscribe(authentication.getName());
+    }
+
+    public record UnreadCountResponse(long count) {
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/notification/NotificationRepository.java b/backend/src/main/java/pl/polskalokalnie/notification/NotificationRepository.java
new file mode 100644
index 0000000..018a293
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/notification/NotificationRepository.java
@@ -0,0 +1,20 @@
+package pl.polskalokalnie.notification;
+
+import java.util.List;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Modifying;
+import org.springframework.data.jpa.repository.Query;
+import org.springframework.data.repository.query.Param;
+
+public interface NotificationRepository extends JpaRepository<Notification, Long> {
+
+    List<Notification> findTop100ByUserEmailIgnoreCaseOrderByCreatedAtDesc(String userEmail);
+
+    long countByUserEmailIgnoreCaseAndReadFalse(String userEmail);
+
+    boolean existsByUserEmailIgnoreCaseAndDedupeKey(String userEmail, String dedupeKey);
+
+    @Modifying
+    @Query("update Notification n set n.read = true where lower(n.userEmail) = lower(:email) and n.read = false")
+    int markAllRead(@Param("email") String email);
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/notification/NotificationResponse.java b/backend/src/main/java/pl/polskalokalnie/notification/NotificationResponse.java
new file mode 100644
index 0000000..03cefc6
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/notification/NotificationResponse.java
@@ -0,0 +1,27 @@
+package pl.polskalokalnie.notification;
+
+import java.time.Instant;
+
+public record NotificationResponse(
+        Long id,
+        String category,
+        String icon,
+        String title,
+        String body,
+        String link,
+        boolean read,
+        Instant createdAt
+) {
+    public static NotificationResponse from(Notification n) {
+        return new NotificationResponse(
+                n.getId(),
+                n.getCategory(),
+                n.getIcon(),
+                n.getTitle(),
+                n.getBody(),
+                n.getLink(),
+                n.isRead(),
+                n.getCreatedAt()
+        );
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/notification/NotificationService.java b/backend/src/main/java/pl/polskalokalnie/notification/NotificationService.java
new file mode 100644
index 0000000..87615b6
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/notification/NotificationService.java
@@ -0,0 +1,143 @@
+package pl.polskalokalnie.notification;
+
+import java.io.IOException;
+import java.util.List;
+import java.util.Map;
+import java.util.concurrent.ConcurrentHashMap;
+import java.util.concurrent.CopyOnWriteArrayList;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.server.ResponseStatusException;
+import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
+
+/**
+ * Centralny serwis powiadomien. Zapisuje powiadomienia per uzytkownik i wypycha je w czasie
+ * rzeczywistym przez SSE. Inne moduly (wiadomosci, ogloszenia, administracja) wolaja {@link #create}.
+ */
+@Service
+public class NotificationService {
+
+    private static final long SSE_TIMEOUT_MS = 30L * 60L * 1000L;
+
+    private final NotificationRepository repository;
+
+    // email uzytkownika -> otwarte polaczenia SSE (moze byc kilka kart/urzadzen).
+    private final Map<String, CopyOnWriteArrayList<SseEmitter>> emitters = new ConcurrentHashMap<>();
+
+    public NotificationService(NotificationRepository repository) {
+        this.repository = repository;
+    }
+
+    @Transactional
+    public Notification create(String userEmail, String category, String icon, String title,
+            String body, String link, String dedupeKey) {
+        if (userEmail == null || userEmail.isBlank() || title == null || title.isBlank()) {
+            return null;
+        }
+        if (dedupeKey != null && !dedupeKey.isBlank()
+                && repository.existsByUserEmailIgnoreCaseAndDedupeKey(userEmail, dedupeKey)) {
+            return null;
+        }
+        Notification notification = new Notification();
+        notification.setUserEmail(userEmail);
+        notification.setCategory(normalizeCategory(category));
+        notification.setIcon(icon == null || icon.isBlank() ? defaultIcon(category) : icon);
+        notification.setTitle(title.trim());
+        notification.setBody(body == null ? null : body.trim());
+        notification.setLink(link == null || link.isBlank() ? null : link.trim());
+        notification.setDedupeKey(dedupeKey == null || dedupeKey.isBlank() ? null : dedupeKey.trim());
+
+        Notification saved = repository.save(notification);
+        push(userEmail, NotificationResponse.from(saved));
+        return saved;
+    }
+
+    public List<NotificationResponse> listOwn(String email) {
+        return repository.findTop100ByUserEmailIgnoreCaseOrderByCreatedAtDesc(email).stream()
+                .map(NotificationResponse::from)
+                .toList();
+    }
+
+    public long unreadCount(String email) {
+        return repository.countByUserEmailIgnoreCaseAndReadFalse(email);
+    }
+
+    @Transactional
+    public void markRead(Long id, String email) {
+        Notification notification = repository.findById(id)
+                .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Powiadomienie nie istnieje"));
+        if (email == null || !email.equalsIgnoreCase(notification.getUserEmail())) {
+            throw new ResponseStatusException(HttpStatus.FORBIDDEN, "Brak dostepu do tego powiadomienia");
+        }
+        if (!notification.isRead()) {
+            notification.setRead(true);
+            repository.save(notification);
+        }
+    }
+
+    @Transactional
+    public void markAllRead(String email) {
+        repository.markAllRead(email);
+    }
+
+    // --- SSE ---
+
+    public SseEmitter subscribe(String email) {
+        SseEmitter emitter = new SseEmitter(SSE_TIMEOUT_MS);
+        CopyOnWriteArrayList<SseEmitter> list = emitters.computeIfAbsent(email, key -> new CopyOnWriteArrayList<>());
+        list.add(emitter);
+
+        emitter.onCompletion(() -> remove(email, emitter));
+        emitter.onTimeout(() -> remove(email, emitter));
+        emitter.onError(error -> remove(email, emitter));
+
+        try {
+            emitter.send(SseEmitter.event().name("ready").data("ok"));
+        } catch (IOException ex) {
+            remove(email, emitter);
+        }
+        return emitter;
+    }
+
+    private void push(String email, NotificationResponse payload) {
+        CopyOnWriteArrayList<SseEmitter> list = emitters.get(email);
+        if (list == null) {
+            return;
+        }
+        for (SseEmitter emitter : list) {
+            try {
+                emitter.send(SseEmitter.event().name("notification").data(payload));
+            } catch (Exception ex) {
+                remove(email, emitter);
+            }
+        }
+    }
+
+    private void remove(String email, SseEmitter emitter) {
+        CopyOnWriteArrayList<SseEmitter> list = emitters.get(email);
+        if (list != null) {
+            list.remove(emitter);
+            if (list.isEmpty()) {
+                emitters.remove(email, list);
+            }
+        }
+    }
+
+    private String normalizeCategory(String category) {
+        if ("listing".equals(category) || "messages".equals(category) || "system".equals(category)) {
+            return category;
+        }
+        return "system";
+    }
+
+    private String defaultIcon(String category) {
+        if ("messages".equals(category)) {
+            return "message";
+        }
+        if ("listing".equals(category)) {
+            return "house";
+        }
+        return "bell";
+    }
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e38c3db..05528d2 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,6 +2,8 @@ import { Fragment, type ChangeEvent as ReactChangeEvent, type ClipboardEvent as
 import './styles.css';
 import { apiFetch, useAuth } from './auth';
 import type { AuthUser, ContactPreference, PreferredLanguage } from './auth';
+import { useNotifications, toDisplayNotifications } from './notifications';
+import type { ServerNotification, DisplayNotification } from './notifications';
 import { getManualTranslation } from './i18nOverrides';
 
 const heroImage = new URL('./assets/hero-interior.png', import.meta.url).href;
@@ -9,7 +11,7 @@ const cityImage = new URL('./assets/city-panorama.png', import.meta.url).href;
 const loginRoomImage = new URL('./assets/login-room.png', import.meta.url).href;
 const SMS_VERIFICATION_CODE = '123456';
 
-type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'guideBuying' | 'map' | 'login' | 'account' | 'accountSearches' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
+type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'guideBuying' | 'creditCalculator' | 'map' | 'login' | 'account' | 'accountSearches' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
 
 type MessageThreadListing = {
   listingId: number;
@@ -33,7 +35,7 @@ type MessageThreadTarget = {
 
 export type ApiOfferType = 'SALE' | 'RENT';
 export type ApiPropertyType = 'APARTMENT' | 'HOUSE';
-export type ApiListingStatus = 'PENDING' | 'APPROVED' | 'REJECTED';
+export type ApiListingStatus = 'PENDING' | 'APPROVED' | 'REJECTED' | 'PAUSED';
 
 // Lekka reprezentacja z list (Kupuje/Wynajmuje, moje ogloszenia) - bez pelnej galerii.
 export type ApiListingSummary = {
@@ -55,6 +57,7 @@ export type ApiListingSummary = {
   coverPhoto: string | null;
   ownerEmail: string | null;
   status: ApiListingStatus;
+  viewsCount: number;
   createdAt: string;
 };
 
@@ -2646,6 +2649,7 @@ function App() {
   const translationTimerRef = useRef<number | null>(null);
   const translationInFlightRef = useRef(false);
   const filters = useFilterState();
+  const notificationsCenter = useNotifications();
   const [savedSearchesState, setSavedSearchesState] = useState<SavedSearchRecord[]>([]);
 
   const clearLoginHash = () => {
@@ -2685,6 +2689,17 @@ function App() {
     clearLoginHash();
   };
 
+  // Z kalkulatora zdolności: ustaw maksymalną cenę ofert na obliczony budżet i przejdź do wyszukiwarki.
+  const handleSearchWithBudget = (maxPrice: number) => {
+    if (maxPrice > 0) {
+      filters.setCity('');
+      filters.setCityInput('');
+      filters.setPriceMin('');
+      filters.setPriceMax(String(Math.round(maxPrice)));
+    }
+    navigate('buy');
+  };
+
   useEffect(() => {
     const onHashChange = () => {
       if (window.location.hash === '#login') {
@@ -3038,6 +3053,48 @@ function App() {
     navigate('messages');
   };
 
+  // Klik w powiadomienie: oznacz jako przeczytane (znika z dzwonka, licznik -1) i przejdź do właściwego miejsca.
+  const handleOpenNotification = (notification: ServerNotification | DisplayNotification) => {
+    notificationsCenter.markRead(notification.id);
+    const link = notification.link;
+    if (!link) {
+      navigate('notifications');
+      return;
+    }
+    if (link.startsWith('listing:')) {
+      const id = Number(link.slice('listing:'.length));
+      if (Number.isFinite(id) && id > 0) {
+        openListing(id);
+        return;
+      }
+    }
+    if (link.startsWith('messages')) {
+      navigate('messages');
+      return;
+    }
+    if (link === 'priceAlerts') {
+      navigate('accountPriceAlerts');
+      return;
+    }
+    if (link === 'meetings') {
+      navigate('accountMeetings');
+      return;
+    }
+    if (link === 'savedSearches') {
+      navigate('accountSearches');
+      return;
+    }
+    if (link === 'favorites') {
+      navigate('favorites');
+      return;
+    }
+    if (link === 'accountSecurity' || link === 'account' || link === 'accountListings') {
+      navigate(link as View);
+      return;
+    }
+    navigate('notifications');
+  };
+
   const toggleSavedSearch = (mode: SavedSearchMode) => {
     if (!user) {
       navigate('login');
@@ -3079,6 +3136,17 @@ function App() {
 
   const toggleListingFavorite = (listing: ApiListingDetail) => {
     const listingKey = favoriteListingKey(listing.id);
+    const alreadyFavorite = favoriteListingsState.some((item) => item.id === listingKey);
+    if (!alreadyFavorite) {
+      notificationsCenter.notify({
+        category: 'listing',
+        icon: 'heart',
+        title: 'Ogłoszenie zapisane',
+        body: `„${listing.title}” zostało zapisane do ulubionych.`,
+        link: `listing:${listing.id}`,
+        dedupeKey: `favorite-${listing.id}`,
+      });
+    }
     setFavoriteListingsState((current) => {
       const exists = current.some((item) => item.id === listingKey);
       if (exists) {
@@ -3292,6 +3360,21 @@ function App() {
         const existingEvents = readUserJsonStorage<FavoritePriceAlertEvent[]>(user, FAVORITE_PRICE_ALERTS_STORAGE_SUFFIX, []);
         const merged = mergePriceAlertEvents(incomingEvents, existingEvents);
         writeUserJsonStorage(user, FAVORITE_PRICE_ALERTS_STORAGE_SUFFIX, merged);
+
+        // Powiadomienie tylko o spadku ceny obserwowanego ogloszenia.
+        incomingEvents.forEach((event) => {
+          if (event.currentPrice < event.previousPrice) {
+            const diff = event.previousPrice - event.currentPrice;
+            notificationsCenter.notify({
+              category: 'listing',
+              icon: 'coin',
+              title: 'Zmiana ceny',
+              body: `Cena „${event.title}” spadła o ${diff.toLocaleString('pl-PL')} zł.`,
+              link: `listing:${event.listingId}`,
+              dedupeKey: `price-${event.listingId}-${event.currentPrice}`,
+            });
+          }
+        });
       }
 
       if (refreshedFavorites.size > 0) {
@@ -3323,7 +3406,7 @@ function App() {
 
   return (
     <div className={`site-shell ${view === 'login' ? 'login-shell' : ''}`}>
-      <Header activeView={view} onNavigate={navigate} onLogout={handleLogout} hasUnreadFavorites={unreadFavoriteIds.size > 0} />
+      <Header activeView={view} onNavigate={navigate} onLogout={handleLogout} hasUnreadFavorites={unreadFavoriteIds.size > 0} onOpenNotification={handleOpenNotification} />
       <main>
         {view === 'login' && <LoginPage onLogin={handleAuthenticated} />}
         {view === 'admin' && <AdminPage onNavigate={navigate} />}
@@ -3346,7 +3429,7 @@ function App() {
         {view === 'accountProfileEdit' && <AccountProfileEditPage onNavigate={navigate} activeView={view} />}
         {view === 'accountPublicProfile' && <AccountPublicProfilePage onNavigate={navigate} activeView={view} />}
         {view === 'accountHelpContact' && <AccountHelpContactPage onNavigate={navigate} activeView={view} user={user} />}
-        {view === 'notifications' && <NotificationsPage />}
+        {view === 'notifications' && <NotificationsPage onOpenNotification={handleOpenNotification} />}
         {view === 'messages' && (
           <MessagesPage
             onNavigate={navigate}
@@ -3390,6 +3473,7 @@ function App() {
         )}
         {view === 'sell' && <SellPage onNavigate={navigate} />}
         {view === 'valuation' && <ValuationPage onNavigate={navigate} />}
+        {view === 'creditCalculator' && <CreditCalculatorPage onNavigate={navigate} onSearchWithBudget={handleSearchWithBudget} />}
         {view === 'priceHistory' && <PriceHistoryPage onNavigate={navigate} user={user} />}
         {view === 'districtRanking' && <DistrictRankingPage onNavigate={navigate} />}
         {view === 'negotiation' && (
@@ -5343,6 +5427,7 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
   const isPriceHistoryView = activeView === 'priceHistory';
   const isNegotiationView = activeView === 'negotiation';
   const isValuationView = activeView === 'valuation';
+  const isCreditCalculatorView = activeView === 'creditCalculator';
   const isDistrictRankingView = activeView === 'districtRanking';
   const isComparisonView = activeView === 'comparison';
   const [messagesUnreadCount, setMessagesUnreadCount] = useState(0);
@@ -5435,6 +5520,7 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
 
       <div className="account-menu">
         <h3>Moje narzędzia</h3>
+        <button className={isCreditCalculatorView ? 'active' : ''} onClick={() => onNavigate('creditCalculator')}><Icon name="money" /> Zdolność kredytowa</button>
         <button className={isPriceHistoryView ? 'active' : ''} onClick={() => onNavigate('priceHistory')}><Icon name="chart" /> Historia cen</button>
         <button className={isNegotiationView ? 'active' : ''} onClick={() => onNavigate('negotiation')}><Icon name="coin" /> Ile możesz utargować?</button>
         <button className={isValuationView ? 'active' : ''} onClick={() => onNavigate('valuation')}><Icon name="calculator" /> Wyceny mieszkań</button>
@@ -5497,6 +5583,7 @@ function AccountDashboardPage({
   const [activeAlerts, setActiveAlerts] = useState<boolean[]>(() => alerts.map(() => true));
 
   const tools = [
+    { icon: 'money', title: 'Zdolność kredytowa', text: 'Sprawdź, na jaki kredyt Cię stać i jaka będzie rata', view: 'creditCalculator' as View },
     { icon: 'chart', title: 'Historia cen', text: 'Sprawdź jak zmieniały się ceny mieszkań w czasie', view: 'priceHistory' as View },
     { icon: 'coin', title: 'Ile możesz utargować?', text: 'AI podpowie realistyczną cenę transakcyjną', view: 'negotiation' as View },
     { icon: 'calculator', title: 'Wycena mieszkania', text: 'Darmowa wycena Twojego mieszkania online', view: 'valuation' as View },
@@ -7352,6 +7439,7 @@ function AccountComparisonPage({ onNavigate, activeView, onOpenListing }: { onNa
 }
 
 function AccountMeetingsPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+  const { notify } = useNotifications();
   type MeetingType = 'buy' | 'rent' | 'own';
   type MeetingStatus = 'planned' | 'completed' | 'cancelled';
   type MeetingItem = {
@@ -7613,7 +7701,13 @@ function AccountMeetingsPage({ onNavigate, activeView }: { onNavigate: (view: Vi
     if (selectedDateIsPast) {
       return;
     }
+    const target = meetings.find((meeting) => meeting.id === id);
     setMeetings((current) => current.map((meeting) => (meeting.id === id ? { ...meeting, status } : meeting)));
+    if (target && status === 'cancelled') {
+      notify({ category: 'system', icon: 'calendar', title: 'Spotkanie odwołane', body: `Spotkanie „${target.title}” zostało odwołane.`, link: 'meetings', dedupeKey: `meeting-${id}-cancelled` });
+    } else if (target && status === 'completed') {
+      notify({ category: 'system', icon: 'check', title: 'Spotkanie potwierdzone', body: `Spotkanie „${target.title}” zostało oznaczone jako zrealizowane.`, link: 'meetings', dedupeKey: `meeting-${id}-completed` });
+    }
   };
 
   const removeMeeting = (id: string) => {
@@ -7696,6 +7790,10 @@ function AccountMeetingsPage({ onNavigate, activeView }: { onNavigate: (view: Vi
       ]);
     }
 
+    if (!editingMeetingId) {
+      notify({ category: 'system', icon: 'calendar', title: 'Spotkanie zaplanowane', body: `„${newMeeting.title.trim()}” — ${newMeeting.dateKey}, godz. ${newMeeting.start}.`, link: 'meetings' });
+    }
+
     setFormError('');
     setSelectedDateKey(newMeeting.dateKey);
     const selectedDate = new Date(newMeeting.dateKey);
@@ -7967,6 +8065,9 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
     status: ListingStatus;
     pausedUntil?: string | null;
     promoted: boolean;
+    isApi?: boolean;
+    apiId?: number;
+    apiStatus?: ApiListingStatus;
   };
 
   type ListingTab = 'all' | 'sale' | 'rent' | 'archived';
@@ -8226,6 +8327,73 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
     window.localStorage.setItem(listingsStorageKey, JSON.stringify(listings));
   }, [listings]);
 
+  // Prawdziwe ogloszenia uzytkownika z backendu (/listings/mine) - scalane z makietami ponizej.
+  const [apiListings, setApiListings] = useState<ApiListingSummary[]>([]);
+  useEffect(() => {
+    let cancelled = false;
+    apiFetch<ApiListingSummary[]>('/listings/mine')
+      .then((data) => { if (!cancelled) setApiListings(data); })
+      .catch(() => { if (!cancelled) setApiListings([]); });
+    return () => { cancelled = true; };
+  }, []);
+
+  const isApiId = (id: string) => id.startsWith('api-');
+  const apiIdNum = (id: string) => Number(id.slice(4));
+
+  // Ulubione uzytkownika (localStorage) - do statystyki "zapisanych" dla realnych ogloszen.
+  const { user } = useAuth();
+  const favoriteListingIds = useMemo(
+    () => new Set(readUserJsonStorage<FavoriteListing[]>(user, FAVORITE_LISTINGS_STORAGE_SUFFIX, []).map((fav) => fav.listingId)),
+    [user],
+  );
+
+  const apiRows: ListingItem[] = apiListings.map((summary) => ({
+    id: `api-${summary.id}`,
+    title: summary.title,
+    address: [summary.address, summary.district, summary.city].filter(Boolean).join(', ') || summary.city,
+    area: summary.area,
+    rooms: summary.rooms,
+    floor: summary.floor ? (parseInt(summary.floor, 10) || 0) : 0,
+    price: summary.price,
+    monthlyFees: 0,
+    views: summary.viewsCount ?? 0,
+    saves: favoriteListingIds.has(summary.id) ? 1 : 0,
+    addedDate: (summary.createdAt || '').slice(0, 10) || '2025-01-01',
+    image: summary.coverPhoto || heroImage,
+    imagePosition: 'center',
+    category: summary.offerType === 'RENT' ? 'rent' : 'sale',
+    status: summary.status === 'PAUSED' ? 'paused' : 'active',
+    pausedUntil: null,
+    promoted: false,
+    isApi: true,
+    apiId: summary.id,
+    apiStatus: summary.status,
+  }));
+
+  // Prawdziwe ogloszenia na gorze listy, pod nimi makiety.
+  const allRows: ListingItem[] = [...apiRows, ...listings];
+
+  const apiSetStatus = (id: string, status: ApiListingStatus) => {
+    const numericId = apiIdNum(id);
+    apiFetch<ApiListingSummary>(`/listings/${numericId}/status?status=${status}`, { method: 'PATCH' })
+      .then((updated) => {
+        setApiListings((current) => current.map((item) => (item.id === numericId ? { ...item, status: updated.status } : item)));
+        setFeedback(status === 'PAUSED' ? 'Ogłoszenie zostało wstrzymane. Wznowisz je ręcznie.' : 'Ogłoszenie zostało wznowione i jest znów widoczne.');
+      })
+      .catch((error) => setFeedback(error instanceof Error ? error.message : 'Nie udało się zmienić statusu ogłoszenia.'));
+  };
+
+  const apiDeleteListing = (id: string) => {
+    const numericId = apiIdNum(id);
+    apiFetch<void>(`/listings/${numericId}`, { method: 'DELETE' })
+      .then(() => {
+        setApiListings((current) => current.filter((item) => item.id !== numericId));
+        setFeedback('Ogłoszenie zostało trwale usunięte z serwisu.');
+      })
+      .catch((error) => setFeedback(error instanceof Error ? error.message : 'Nie udało się usunąć ogłoszenia.'))
+      .finally(() => closeDeleteModal());
+  };
+
   useEffect(() => {
     const resumePausedListings = () => {
       const nowMs = Date.now();
@@ -8291,13 +8459,13 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
   };
 
   const tabCounts = {
-    all: listings.filter((item) => item.status !== 'archived').length,
-    sale: listings.filter((item) => item.category === 'sale' && item.status === 'active').length,
-    rent: listings.filter((item) => item.category === 'rent' && item.status === 'active').length,
-    archived: listings.filter((item) => item.status === 'paused').length,
+    all: allRows.filter((item) => item.status !== 'archived').length,
+    sale: allRows.filter((item) => item.category === 'sale' && item.status === 'active').length,
+    rent: allRows.filter((item) => item.category === 'rent' && item.status === 'active').length,
+    archived: allRows.filter((item) => item.status === 'paused').length,
   };
 
-  const visibleListings = listings
+  const visibleListings = allRows
     .filter((item) => {
       if (activeTab === 'archived') {
         return item.status === 'paused';
@@ -8363,6 +8531,14 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
   };
 
   const togglePause = (id: string) => {
+    if (isApiId(id)) {
+      const row = apiRows.find((item) => item.id === id);
+      if (!row) {
+        return;
+      }
+      apiSetStatus(id, row.status === 'paused' ? 'APPROVED' : 'PAUSED');
+      return;
+    }
     const listing = listings.find((item) => item.id === id);
     if (!listing || listing.status === 'archived') {
       return;
@@ -8433,6 +8609,10 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
   };
 
   const removeListing = (id: string) => {
+    if (isApiId(id)) {
+      apiDeleteListing(id);
+      return;
+    }
     setListings((current) => current.filter((item) => item.id !== id));
     const selectedReason = deleteReasons.find((reason) => reason.id === deleteReason);
     setFeedback(selectedReason ? `Ogłoszenie zostało usunięte (${selectedReason.title.toLowerCase()}).` : 'Ogłoszenie zostało usunięte.');
@@ -8474,8 +8654,6 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
             <p>Zarządzaj swoimi ogłoszeniami. Edytuj, promuj lub wstrzymuj oferty.</p>
           </header>
 
-          <MyApiListingsBand onOpenListing={onOpenListing} />
-
           <section className="listings-toolbar-card">
             <div className="listings-tabs" role="tablist" aria-label="Typ ofert">
               <button type="button" role="tab" className={activeTab === 'all' ? 'active' : ''} aria-selected={activeTab === 'all'} onClick={() => setActiveTab('all')}>Wszystkie ({tabCounts.all})</button>
@@ -8501,7 +8679,13 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
 
             {visibleListings.map((item) => (
               <article key={item.id} className="listing-row">
-                <div className="listing-photo" style={{ backgroundImage: `url(${item.image})`, backgroundPosition: item.imagePosition }} />
+                <div
+                  className={`listing-photo ${item.isApi ? 'clickable' : ''}`}
+                  style={{ backgroundImage: `url(${item.image})`, backgroundPosition: item.imagePosition }}
+                  onClick={item.isApi && item.apiId != null ? () => onOpenListing(item.apiId as number) : undefined}
+                  role={item.isApi ? 'button' : undefined}
+                  aria-label={item.isApi ? `Podgląd ogłoszenia ${item.title}` : undefined}
+                />
 
                 <div className="listing-main-copy">
                   <h3>{item.title}</h3>
@@ -8518,7 +8702,9 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
 
                 <div className={`listing-status ${statusClass(item.status)}`}>
                   <span>
-                    {item.status === 'paused' ? (
+                    {item.isApi && (item.apiStatus === 'PENDING' || item.apiStatus === 'REJECTED') ? (
+                      LISTING_STATUS_LABELS[item.apiStatus]
+                    ) : item.status === 'paused' ? (
                       <>
                         Wstrzymane
                         <br />
@@ -8527,6 +8713,7 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
                     ) : statusLabel(item.status)}
                   </span>
                   <small>Dodane: {formatDate(item.addedDate)}</small>
+                  {item.isApi && <em className="listing-live-tag">W serwisie</em>}
                   {item.promoted && <em>Promowane</em>}
                 </div>
 
@@ -8542,9 +8729,9 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
 
                 <div className="listing-actions">
                   {item.status !== 'archived' && <button type="button" onClick={() => openListingInAddEditor(item)}>Edytuj</button>}
-                  {item.status !== 'archived' && <button type="button" className="ghost" onClick={() => togglePause(item.id)}>{item.status === 'active' ? 'Wstrzymaj' : 'Wznów'}</button>}
+                  {(item.isApi ? (item.apiStatus === 'APPROVED' || item.apiStatus === 'PAUSED') : item.status !== 'archived') && <button type="button" className="ghost" onClick={() => togglePause(item.id)}>{item.status === 'active' ? 'Wstrzymaj' : 'Wznów'}</button>}
                   <button type="button" className="ghost danger" onClick={() => openDeleteModal(item.id)}>Usuń</button>
-                  <button type="button" className="ghost" onClick={() => togglePromote(item.id)}>{item.promoted ? 'Wyłącz promo' : 'Promuj'}</button>
+                  {!item.isApi && <button type="button" className="ghost" onClick={() => togglePromote(item.id)}>{item.promoted ? 'Wyłącz promo' : 'Promuj'}</button>}
                 </div>
               </article>
             ))}
@@ -8934,6 +9121,7 @@ function AccountSecurityPage({ onNavigate, activeView }: { onNavigate: (view: Vi
 
 function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
   const { user, updateProfile } = useAuth();
+  const { notify } = useNotifications();
   type UploadTarget = 'avatar' | 'cover';
   type MessageTone = 'success' | 'error' | 'info';
 
@@ -9385,6 +9573,7 @@ function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view:
       setVerificationCodeError('');
       setIsPhoneVerified(true);
       setPhoneVerificationStep(3);
+      notify({ category: 'system', icon: 'check', title: 'Numer telefonu zweryfikowany', body: 'Twój numer telefonu został pomyślnie zweryfikowany.', link: 'accountSecurity', dedupeKey: 'phone-verified' });
       return;
     }
     setVerificationCodeError('Kod jest nieprawidłowy. Spróbuj ponownie.');
@@ -12907,7 +13096,7 @@ function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
           <section className="guide-aside-card">
             <h3><Icon name="calculator" /> Kalkulatory</h3>
             <div className="guide-aside-list">
-              <button onClick={() => scrollToId('zdolnosc')}>
+              <button onClick={() => onNavigate('creditCalculator')}>
                 <span><strong>Kalkulator zdolności kredytowej</strong><small>Sprawdź, na jaki kredyt Cię stać</small></span>
                 <Icon name="chevron" />
               </button>
@@ -14108,6 +14297,528 @@ async function downloadValuationReportPdf(form: ValuationForm, valuation: Valuat
   }
 }
 
+// ---- Kalkulator zdolności kredytowej -------------------------------------
+
+type CreditMaritalStatus = 'Panna / kawaler' | 'W związku' | 'Małżeństwo' | 'Rozwiedziony/a' | 'Wdowiec/wdowa';
+type CreditIncomeSource = 'Umowa o pracę' | 'Umowa zlecenie' | 'Działalność gospodarcza' | 'B2B' | 'Emerytura' | 'Renta' | 'Dochód z najmu';
+type CreditSeniority = 'do 3 miesięcy' | '3-12 miesięcy' | '1-3 lata' | 'powyżej 3 lat';
+type CreditRepayment = 'równe' | 'malejące';
+
+type CreditForm = {
+  age: string;
+  maritalStatus: CreditMaritalStatus;
+  adults: number;
+  children: number;
+  income: string;
+  partnerIncome: string;
+  incomeSource: CreditIncomeSource;
+  seniority: CreditSeniority;
+  loanInstallments: string;
+  leasing: string;
+  alimony: string;
+  otherObligations: string;
+  creditCardLimit: string;
+  accountLimit: string;
+  propertyPrice: string;
+  ownContribution: string;
+  loanYears: number;
+  interestRate: string;
+  repayment: CreditRepayment;
+};
+
+const CREDIT_MARITAL_OPTIONS: CreditMaritalStatus[] = ['Panna / kawaler', 'W związku', 'Małżeństwo', 'Rozwiedziony/a', 'Wdowiec/wdowa'];
+const CREDIT_INCOME_SOURCES: CreditIncomeSource[] = ['Umowa o pracę', 'Umowa zlecenie', 'Działalność gospodarcza', 'B2B', 'Emerytura', 'Renta', 'Dochód z najmu'];
+const CREDIT_SENIORITY_OPTIONS: CreditSeniority[] = ['do 3 miesięcy', '3-12 miesięcy', '1-3 lata', 'powyżej 3 lat'];
+
+const INITIAL_CREDIT_FORM: CreditForm = {
+  age: '',
+  maritalStatus: 'W związku',
+  adults: 1,
+  children: 0,
+  income: '',
+  partnerIncome: '',
+  incomeSource: 'Umowa o pracę',
+  seniority: '1-3 lata',
+  loanInstallments: '',
+  leasing: '',
+  alimony: '',
+  otherObligations: '',
+  creditCardLimit: '',
+  accountLimit: '',
+  propertyPrice: '',
+  ownContribution: '',
+  loanYears: 25,
+  interestRate: '7,2',
+  repayment: 'równe',
+};
+
+const LIVING_COST_FIRST_ADULT = 1500;
+const LIVING_COST_NEXT_ADULT = 1000;
+const LIVING_COST_CHILD = 800;
+const CREDIT_MAX_DTI = 0.4;
+const LIMIT_MONTHLY_CHARGE = 0.05;
+const CREDIT_MIN_YEARS = 5;
+const CREDIT_MAX_YEARS = 35;
+
+function creditNum(value: string): number {
+  const parsed = parseNumber(value);
+  return parsed == null || parsed < 0 ? 0 : parsed;
+}
+
+// Rata annuitetowa (równa) dla danego kapitału.
+function annuityInstallmentForPrincipal(principal: number, monthlyRate: number, months: number): number {
+  if (principal <= 0 || months <= 0) return 0;
+  if (monthlyRate <= 0) return principal / months;
+  return (principal * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -months));
+}
+
+// Pierwsza (najwyższa) rata malejąca dla danego kapitału.
+function decreasingFirstInstallmentForPrincipal(principal: number, monthlyRate: number, months: number): number {
+  if (principal <= 0 || months <= 0) return 0;
+  return principal / months + principal * monthlyRate;
+}
+
+// Odwrotność: maksymalny kapitał, jaki uniesie dana rata.
+function principalForInstallment(installment: number, monthlyRate: number, months: number, decreasing: boolean): number {
+  if (installment <= 0 || months <= 0) return 0;
+  if (decreasing) {
+    return installment / (1 / months + monthlyRate);
+  }
+  if (monthlyRate <= 0) return installment * months;
+  return (installment * (1 - Math.pow(1 + monthlyRate, -months))) / monthlyRate;
+}
+
+type CreditResult = ReturnType<typeof calculateCreditworthiness>;
+
+function calculateCreditworthiness(form: CreditForm) {
+  const income = creditNum(form.income);
+  const partnerIncome = creditNum(form.partnerIncome);
+  const totalIncome = income + partnerIncome;
+  const adults = Math.max(1, Math.round(form.adults));
+  const children = Math.max(0, Math.round(form.children));
+  const livingCosts = LIVING_COST_FIRST_ADULT + Math.max(0, adults - 1) * LIVING_COST_NEXT_ADULT + children * LIVING_COST_CHILD;
+  const cardCharge = creditNum(form.creditCardLimit) * LIMIT_MONTHLY_CHARGE;
+  const accountCharge = creditNum(form.accountLimit) * LIMIT_MONTHLY_CHARGE;
+  const declaredObligations = creditNum(form.loanInstallments) + creditNum(form.leasing) + creditNum(form.alimony) + creditNum(form.otherObligations);
+  const totalObligations = declaredObligations + cardCharge + accountCharge;
+  const disposable = totalIncome - livingCosts - totalObligations;
+  const maxRateByDti = totalIncome * CREDIT_MAX_DTI;
+  const maxInstallment = Math.max(0, Math.min(maxRateByDti, disposable));
+
+  const years = Math.min(CREDIT_MAX_YEARS, Math.max(CREDIT_MIN_YEARS, Math.round(form.loanYears)));
+  const months = years * 12;
+  const monthlyRate = creditNum(form.interestRate) / 100 / 12;
+  const decreasing = form.repayment === 'malejące';
+
+  const maxLoan = principalForInstallment(maxInstallment, monthlyRate, months, decreasing);
+  const ownContribution = creditNum(form.ownContribution);
+  const maxPropertyPrice = maxLoan + ownContribution;
+  const recommendedOwnContribution = Math.round(maxPropertyPrice * 0.2);
+
+  const propertyPrice = creditNum(form.propertyPrice);
+  const loanForPrice = Math.max(0, propertyPrice - ownContribution);
+  const projectedInstallment = decreasing
+    ? decreasingFirstInstallmentForPrincipal(loanForPrice, monthlyRate, months)
+    : annuityInstallmentForPrincipal(loanForPrice, monthlyRate, months);
+  const leftoverAfterInstallment = totalIncome - livingCosts - totalObligations - projectedInstallment;
+  const dsti = totalIncome > 0 ? projectedInstallment / totalIncome : 0;
+  const dti = totalIncome > 0 ? totalObligations / totalIncome : 0;
+
+  const hasIncome = totalIncome > 0;
+  const ready = hasIncome && maxInstallment > 0;
+  const priceExceedsCapacity = propertyPrice > 0 && (loanForPrice > maxLoan + 1 || leftoverAfterInstallment < 0);
+
+  let ratingKey: 'verysafe' | 'safe' | 'moderate' | 'high' | 'none' | 'empty';
+  if (!hasIncome) {
+    ratingKey = 'empty';
+  } else if (disposable <= 0) {
+    ratingKey = 'none';
+  } else if (propertyPrice > 0) {
+    if (priceExceedsCapacity) {
+      ratingKey = 'high';
+    } else if (dsti <= 0.2) {
+      ratingKey = 'verysafe';
+    } else if (dsti <= 0.3) {
+      ratingKey = 'safe';
+    } else if (dsti <= 0.4) {
+      ratingKey = 'moderate';
+    } else {
+      ratingKey = 'high';
+    }
+  } else {
+    const ratio = totalIncome > 0 ? maxInstallment / totalIncome : 0;
+    ratingKey = ratio <= 0.2 ? 'verysafe' : ratio <= 0.3 ? 'safe' : 'moderate';
+  }
+
+  return {
+    income, partnerIncome, totalIncome, adults, children, livingCosts,
+    cardCharge, accountCharge, declaredObligations, totalObligations,
+    disposable, maxInstallment, years, months, monthlyRate, decreasing,
+    maxLoan, ownContribution, maxPropertyPrice, recommendedOwnContribution,
+    propertyPrice, loanForPrice, projectedInstallment, leftoverAfterInstallment,
+    dsti, dti, hasIncome, ready, priceExceedsCapacity, ratingKey,
+  };
+}
+
+const CREDIT_RATING_META: Record<CreditResult['ratingKey'], { label: string; tone: string; stars: number; note: string }> = {
+  verysafe: { label: 'Bardzo bezpieczny poziom', tone: 'verysafe', stars: 5, note: 'Rata i koszty życia zostawiają duży zapas w budżecie.' },
+  safe: { label: 'Bezpieczny poziom', tone: 'safe', stars: 4, note: 'Obciążenie mieści się w bezpiecznych granicach.' },
+  moderate: { label: 'Umiarkowane obciążenie', tone: 'moderate', stars: 3, note: 'Rata jest odczuwalna – warto zachować poduszkę finansową.' },
+  high: { label: 'Wysokie obciążenie', tone: 'high', stars: 2, note: 'Rata pochłania zbyt dużą część dochodu przy tej cenie.' },
+  none: { label: 'Brak zdolności', tone: 'none', stars: 0, note: 'Koszty i zobowiązania przekraczają dochód – zdolność wynosi 0 zł.' },
+  empty: { label: 'Uzupełnij dane', tone: 'empty', stars: 0, note: 'Podaj miesięczny dochód netto, aby obliczyć zdolność.' },
+};
+
+function creditMaxPropertyPrice(form: CreditForm): number {
+  return calculateCreditworthiness(form).maxPropertyPrice;
+}
+
+type CreditRecommendation = { icon: string; label: string; detail: string; delta: number };
+
+// Każda rekomendacja liczona jest ponownie na danych użytkownika (żadnych kwot na sztywno).
+function buildCreditRecommendations(form: CreditForm, base: number): CreditRecommendation[] {
+  const recs: CreditRecommendation[] = [];
+  const add = (icon: string, label: string, detail: string, next: CreditForm) => {
+    const delta = Math.round(creditMaxPropertyPrice(next) - base);
+    if (delta > 0) recs.push({ icon, label, detail, delta });
+  };
+  if (creditNum(form.creditCardLimit) > 0) {
+    add('credit-card', 'Zamknij kartę kredytową', 'Rezygnacja z limitu karty odciąża miesięczny budżet.', { ...form, creditCardLimit: '0' });
+  }
+  if (creditNum(form.accountLimit) > 0) {
+    add('scale', 'Zlikwiduj limit w koncie', 'Limit w koncie obniża zdolność, nawet jeśli go nie używasz.', { ...form, accountLimit: '0' });
+  }
+  if (creditNum(form.loanInstallments) > 0) {
+    add('check', 'Spłać bieżące kredyty', 'Zamknięcie rat uwalnia miejsce na ratę kredytu hipotecznego.', { ...form, loanInstallments: '0' });
+  }
+  if (Math.round(form.loanYears) < CREDIT_MAX_YEARS) {
+    add('clock', `Wydłuż okres kredytu do ${CREDIT_MAX_YEARS} lat`, 'Dłuższy okres obniża ratę i podnosi maksymalną kwotę kredytu.', { ...form, loanYears: CREDIT_MAX_YEARS });
+  }
+  if (creditNum(form.partnerIncome) === 0 && creditNum(form.income) > 0) {
+    add('group', 'Dodaj dochód partnera', 'Drugi dochód w gospodarstwie mocno zwiększa zdolność (symulacja: partner z dochodem jak Twój).', { ...form, partnerIncome: form.income });
+  }
+  add('coin', 'Zwiększ wkład własny o 50 000 zł', 'Wyższy wkład własny wprost podnosi dostępną cenę nieruchomości.', { ...form, ownContribution: String(creditNum(form.ownContribution) + 50000) });
+  return recs.sort((a, b) => b.delta - a.delta);
+}
+
+function formatPercent(value: number): string {
+  return `${(value * 100).toLocaleString('pl-PL', { maximumFractionDigits: 1 })}%`;
+}
+
+function CreditCalculatorPage({ onNavigate, onSearchWithBudget }: { onNavigate: (view: View) => void; onSearchWithBudget: (maxPrice: number) => void }) {
+  const { user } = useAuth();
+  const [form, setForm] = useState<CreditForm>(INITIAL_CREDIT_FORM);
+  const [highlight, setHighlight] = useState(false);
+  const resultRef = useRef<HTMLDivElement | null>(null);
+  const result = calculateCreditworthiness(form);
+  const rating = CREDIT_RATING_META[result.ratingKey];
+  const recommendations = buildCreditRecommendations(form, result.maxPropertyPrice);
+  const fmtPln = (value: number) => formatPln(Math.round(value));
+
+  const update = <Key extends keyof CreditForm>(field: Key, value: CreditForm[Key]) => {
+    setForm((current) => ({ ...current, [field]: value }));
+  };
+  const money = (field: keyof CreditForm) => (event: React.ChangeEvent<HTMLInputElement>) =>
+    update(field, event.target.value.replace(/[^\d]/g, '') as CreditForm[typeof field]);
+  const stepAdults = (delta: number) => update('adults', Math.min(12, Math.max(1, form.adults + delta)));
+  const stepChildren = (delta: number) => update('children', Math.min(12, Math.max(0, form.children + delta)));
+  const reset = () => { setForm(INITIAL_CREDIT_FORM); };
+  const handleCalculate = () => {
+    setHighlight(true);
+    window.setTimeout(() => setHighlight(false), 900);
+    resultRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+
+  // Donut struktury dochodów.
+  const donutRadius = 52;
+  const donutCirc = 2 * Math.PI * donutRadius;
+  const yourLen = result.totalIncome > 0 ? (result.income / result.totalIncome) * donutCirc : 0;
+  const partnerLen = result.totalIncome > 0 ? (result.partnerIncome / result.totalIncome) * donutCirc : 0;
+
+  const detailRows: { label: string; value: string; tone?: string }[] = [
+    { label: 'Łączne dochody netto', value: fmtPln(result.totalIncome) },
+    { label: 'Koszty utrzymania gospodarstwa', value: fmtPln(result.livingCosts) },
+    { label: 'Łączne zobowiązania', value: fmtPln(result.totalObligations) },
+    { label: 'Dochód po odliczeniach', value: fmtPln(Math.max(0, result.disposable)) },
+    { label: 'Zalecana maksymalna rata', value: fmtPln(result.maxInstallment) },
+    { label: 'Maksymalna kwota kredytu', value: fmtPln(result.maxLoan) },
+    { label: 'Maksymalna cena nieruchomości', value: fmtPln(result.maxPropertyPrice) },
+    { label: 'Przewidywana rata dla wpisanej ceny', value: fmtPln(result.projectedInstallment) },
+    { label: 'Kwota po opłaceniu raty', value: fmtPln(result.leftoverAfterInstallment), tone: result.leftoverAfterInstallment < 0 ? 'negative' : 'positive' },
+    { label: 'Wskaźnik DTI (zobowiązania / dochód)', value: formatPercent(result.dti) },
+    { label: 'Wskaźnik DSTI (rata / dochód)', value: formatPercent(result.dsti) },
+  ];
+
+  const pageBody = (
+    <>
+      <div className="credit-title">
+          <span className="credit-title-icon"><Icon name="house" /></span>
+          <div>
+            <h1>Kalkulator zdolności kredytowej</h1>
+            <p>Sprawdź, jaką kwotę kredytu hipotecznego możesz uzyskać i jakie będą orientacyjne warunki. Wynik przelicza się na bieżąco przy każdej zmianie.</p>
+          </div>
+        </div>
+
+        <div className="credit-layout">
+          <div className="credit-form-column">
+            <section className="credit-card">
+              <h2><span className="credit-step-badge">1</span> Twoje dane</h2>
+              <div className="credit-grid credit-grid-2">
+                <label className="credit-field">
+                  <span>Wiek</span>
+                  <input inputMode="numeric" value={form.age} onChange={(e) => update('age', e.target.value.replace(/[^\d]/g, ''))} placeholder="np. 30" />
+                </label>
+                <label className="credit-field">
+                  <span>Stan cywilny</span>
+                  <select value={form.maritalStatus} onChange={(e) => update('maritalStatus', e.target.value as CreditMaritalStatus)}>
+                    {CREDIT_MARITAL_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
+                  </select>
+                </label>
+                <div className="credit-field">
+                  <span>Liczba osób w gospodarstwie</span>
+                  <div className="credit-stepper">
+                    <button type="button" onClick={() => stepAdults(-1)} aria-label="Mniej osób">–</button>
+                    <strong>{form.adults}</strong>
+                    <button type="button" onClick={() => stepAdults(1)} aria-label="Więcej osób">+</button>
+                  </div>
+                </div>
+                <div className="credit-field">
+                  <span>Liczba dzieci</span>
+                  <div className="credit-stepper">
+                    <button type="button" onClick={() => stepChildren(-1)} aria-label="Mniej dzieci">–</button>
+                    <strong>{form.children}</strong>
+                    <button type="button" onClick={() => stepChildren(1)} aria-label="Więcej dzieci">+</button>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <section className="credit-card">
+              <h2><span className="credit-step-badge">2</span> Dochody miesięczne (netto)</h2>
+              <div className="credit-grid credit-grid-2">
+                <label className="credit-field">
+                  <span>Twój dochód</span>
+                  <div className="credit-input-suffix">
+                    <input inputMode="numeric" value={form.income} onChange={money('income')} placeholder="0" />
+                    <em>zł</em>
+                  </div>
+                </label>
+                <label className="credit-field">
+                  <span>Dochód partnera</span>
+                  <div className="credit-input-suffix">
+                    <input inputMode="numeric" value={form.partnerIncome} onChange={money('partnerIncome')} placeholder="0" />
+                    <em>zł</em>
+                  </div>
+                </label>
+                <label className="credit-field">
+                  <span>Źródło dochodu</span>
+                  <select value={form.incomeSource} onChange={(e) => update('incomeSource', e.target.value as CreditIncomeSource)}>
+                    {CREDIT_INCOME_SOURCES.map((option) => <option key={option} value={option}>{option}</option>)}
+                  </select>
+                </label>
+                <label className="credit-field">
+                  <span>Staż u obecnego pracodawcy</span>
+                  <select value={form.seniority} onChange={(e) => update('seniority', e.target.value as CreditSeniority)}>
+                    {CREDIT_SENIORITY_OPTIONS.map((option) => <option key={option} value={option}>{option}</option>)}
+                  </select>
+                </label>
+              </div>
+            </section>
+
+            <section className="credit-card">
+              <h2><span className="credit-step-badge">3</span> Zobowiązania miesięczne</h2>
+              <div className="credit-grid credit-grid-2">
+                <label className="credit-field">
+                  <span>Raty kredytów i pożyczek</span>
+                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.loanInstallments} onChange={money('loanInstallments')} placeholder="0" /><em>zł</em></div>
+                </label>
+                <label className="credit-field">
+                  <span>Leasing</span>
+                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.leasing} onChange={money('leasing')} placeholder="0" /><em>zł</em></div>
+                </label>
+                <label className="credit-field">
+                  <span>Alimenty</span>
+                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.alimony} onChange={money('alimony')} placeholder="0" /><em>zł</em></div>
+                </label>
+                <label className="credit-field">
+                  <span>Inne zobowiązania</span>
+                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.otherObligations} onChange={money('otherObligations')} placeholder="0" /><em>zł</em></div>
+                </label>
+                <label className="credit-field">
+                  <span>Limit karty kredytowej</span>
+                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.creditCardLimit} onChange={money('creditCardLimit')} placeholder="0" /><em>zł</em></div>
+                  <small>Obciążenie liczone jako 5% limitu = {fmtPln(result.cardCharge)}/mies.</small>
+                </label>
+                <label className="credit-field">
+                  <span>Limit w koncie</span>
+                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.accountLimit} onChange={money('accountLimit')} placeholder="0" /><em>zł</em></div>
+                  <small>Obciążenie liczone jako 5% limitu = {fmtPln(result.accountCharge)}/mies.</small>
+                </label>
+              </div>
+            </section>
+
+            <section className="credit-card">
+              <h2><span className="credit-step-badge">4</span> Informacje o kredycie</h2>
+              <div className="credit-grid credit-grid-2">
+                <label className="credit-field">
+                  <span>Cena nieruchomości</span>
+                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.propertyPrice} onChange={money('propertyPrice')} placeholder="0" /><em>zł</em></div>
+                </label>
+                <label className="credit-field">
+                  <span>Wkład własny</span>
+                  <div className="credit-input-suffix"><input inputMode="numeric" value={form.ownContribution} onChange={money('ownContribution')} placeholder="0" /><em>zł</em></div>
+                  <small>{creditNum(form.propertyPrice) > 0 ? `${formatPercent(creditNum(form.ownContribution) / creditNum(form.propertyPrice))} ceny nieruchomości` : 'Podaj cenę, aby zobaczyć udział wkładu'}</small>
+                </label>
+                <div className="credit-field credit-field-wide">
+                  <span>Okres kredytu: <strong className="credit-range-value">{result.years} lat</strong></span>
+                  <input type="range" min={CREDIT_MIN_YEARS} max={CREDIT_MAX_YEARS} step={1} value={result.years} onChange={(e) => update('loanYears', Number(e.target.value))} className="credit-range" />
+                  <div className="credit-range-scale"><span>{CREDIT_MIN_YEARS} lat</span><span>{CREDIT_MAX_YEARS} lat</span></div>
+                </div>
+                <label className="credit-field">
+                  <span>Oprocentowanie</span>
+                  <div className="credit-input-suffix"><input inputMode="decimal" value={form.interestRate} onChange={(e) => update('interestRate', e.target.value.replace(/[^\d.,]/g, ''))} placeholder="0" /><em>%</em></div>
+                </label>
+                <div className="credit-field">
+                  <span>Rodzaj rat</span>
+                  <div className="credit-segmented">
+                    <button type="button" className={form.repayment === 'równe' ? 'active' : ''} onClick={() => update('repayment', 'równe')}>Równe</button>
+                    <button type="button" className={form.repayment === 'malejące' ? 'active' : ''} onClick={() => update('repayment', 'malejące')}>Malejące</button>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <div className="credit-actions">
+              <button type="button" className="credit-btn-primary" onClick={handleCalculate}><Icon name="calculator" /> Oblicz zdolność</button>
+              <button type="button" className="credit-btn-ghost" onClick={reset}><Icon name="shuffle" /> Wyczyść dane</button>
+            </div>
+          </div>
+
+          <div className="credit-result-column" ref={resultRef}>
+            <section className={`credit-result-hero credit-tone-${rating.tone} ${highlight ? 'pulse' : ''}`}>
+              <div className="credit-hero-top">
+                <span>Twoja szacunkowa zdolność kredytowa</span>
+                <span className={`credit-badge credit-badge-${rating.tone}`}>{rating.label}</span>
+              </div>
+              <strong>{result.hasIncome ? fmtPln(result.maxLoan) : '— zł'}</strong>
+              <div className="credit-stars" aria-label={`Ocena: ${rating.stars} na 5`}>
+                {[1, 2, 3, 4, 5].map((n) => <span key={n} className={n <= rating.stars ? 'on' : ''}><Icon name="star" /></span>)}
+              </div>
+              <p>{rating.note}</p>
+            </section>
+
+            <div className="credit-tiles">
+              <div className="credit-tile">
+                <small>Maksymalna rata</small>
+                <strong>{fmtPln(result.maxInstallment)}</strong>
+                <em>{formatPercent(CREDIT_MAX_DTI)} Twoich dochodów</em>
+              </div>
+              <div className="credit-tile">
+                <small>Maksymalny kredyt</small>
+                <strong>{fmtPln(result.maxLoan)}</strong>
+                <em>{result.decreasing ? 'raty malejące' : 'raty równe'} · {result.years} lat</em>
+              </div>
+              <div className="credit-tile">
+                <small>Zalecany wkład własny</small>
+                <strong>{fmtPln(result.recommendedOwnContribution)}</strong>
+                <em>20% wartości nieruchomości</em>
+              </div>
+            </div>
+
+            <section className="credit-card credit-details">
+              <div className="credit-details-head">
+                <h3>Szczegóły symulacji</h3>
+                <div className="credit-donut-wrap">
+                  <svg viewBox="0 0 120 120" className="credit-donut" role="img" aria-label="Struktura dochodów">
+                    <circle cx="60" cy="60" r={donutRadius} className="credit-donut-track" />
+                    {result.totalIncome > 0 && (
+                      <circle cx="60" cy="60" r={donutRadius} className="credit-donut-you" strokeDasharray={`${yourLen} ${donutCirc - yourLen}`} strokeDashoffset={0} transform="rotate(-90 60 60)" />
+                    )}
+                    {result.partnerIncome > 0 && (
+                      <circle cx="60" cy="60" r={donutRadius} className="credit-donut-partner" strokeDasharray={`${partnerLen} ${donutCirc - partnerLen}`} strokeDashoffset={-yourLen} transform="rotate(-90 60 60)" />
+                    )}
+                    <text x="60" y="55" className="credit-donut-value">{Math.round(result.totalIncome / 1000)} tys.</text>
+                    <text x="60" y="72" className="credit-donut-label">łącznie</text>
+                  </svg>
+                  <ul className="credit-donut-legend">
+                    <li><i className="credit-dot-you" /> Twój dochód <b>{fmtPln(result.income)}</b></li>
+                    <li><i className="credit-dot-partner" /> Dochód partnera <b>{fmtPln(result.partnerIncome)}</b></li>
+                  </ul>
+                </div>
+              </div>
+              <dl className="credit-detail-rows">
+                {detailRows.map((row) => (
+                  <div key={row.label} className={`credit-detail-row ${row.tone ? `credit-detail-${row.tone}` : ''}`}>
+                    <dt>{row.label}</dt>
+                    <dd>{row.value}</dd>
+                  </div>
+                ))}
+              </dl>
+            </section>
+
+            <section className="credit-cta-band">
+              <div>
+                <strong>Znajdź nieruchomości w zasięgu Twojej zdolności</strong>
+                <span>Pokażemy oferty do {fmtPln(result.maxPropertyPrice)} (kredyt + wkład własny).</span>
+              </div>
+              <button type="button" disabled={result.maxPropertyPrice <= 0} onClick={() => onSearchWithBudget(result.maxPropertyPrice)}>
+                Zobacz oferty <Icon name="arrow" />
+              </button>
+            </section>
+
+            {recommendations.length > 0 && (
+              <section className="credit-card credit-recos">
+                <h3><Icon name="spark" /> Jak zwiększyć zdolność?</h3>
+                <div className="credit-reco-list">
+                  {recommendations.map((reco) => (
+                    <div key={reco.label} className="credit-reco">
+                      <span className="credit-reco-icon"><Icon name={reco.icon} /></span>
+                      <div className="credit-reco-body">
+                        <strong>{reco.label}</strong>
+                        <small>{reco.detail}</small>
+                      </div>
+                      <b className="credit-reco-delta">+{formatPln(reco.delta)}</b>
+                    </div>
+                  ))}
+                </div>
+              </section>
+            )}
+
+            <p className="credit-disclaimer">
+              <Icon name="shield" /> Wynik ma charakter orientacyjny i nie stanowi oferty ani decyzji banku. Rzeczywista zdolność zależy od zasad banku, historii kredytowej i indywidualnej sytuacji klienta. Nie zapisujemy Twoich danych finansowych bez Twojej zgody.
+            </p>
+          </div>
+        </div>
+    </>
+  );
+
+  if (user) {
+    return (
+      <section className="account-page" aria-label="Kalkulator zdolności kredytowej">
+        <div className="account-layout">
+          <AccountSidebar onNavigate={onNavigate} activeView="creditCalculator" />
+          <div className="account-main credit-account-main">
+            {pageBody}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="credit-page" aria-label="Kalkulator zdolności kredytowej">
+      <div className="credit-shell">
+        <div className="breadcrumb credit-breadcrumb">
+          <button type="button" onClick={() => onNavigate('guideBuying')}>Poradnik kupna</button>
+          <Icon name="chevron" />
+          <button type="button" className="active" onClick={() => onNavigate('creditCalculator')}>Kalkulator zdolności kredytowej</button>
+        </div>
+        {pageBody}
+      </div>
+    </section>
+  );
+}
+
 function ValuationPage({ onNavigate }: { onNavigate: (view: View) => void }) {
   const [step, setStep] = useState(0);
   const [valuationForm, setValuationForm] = useState<ValuationForm>(INITIAL_VALUATION_FORM);
@@ -17689,61 +18400,26 @@ function Header({
   onNavigate,
   onLogout,
   hasUnreadFavorites,
+  onOpenNotification,
 }: {
   activeView: View;
   onNavigate: (view: View) => void;
   onLogout: () => void;
   hasUnreadFavorites: boolean;
+  onOpenNotification: (notification: DisplayNotification) => void;
 }) {
   const { user } = useAuth();
+  const { notifications: serverNotifications, unreadCount } = useNotifications();
   const isLoggedIn = Boolean(user);
   const isAdmin = user?.role === 'ADMIN';
   const [isNotificationsOpen, setIsNotificationsOpen] = useState(false);
   const notificationPopoverRef = useRef<HTMLDivElement | null>(null);
   const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
   const accountMenuRef = useRef<HTMLDivElement | null>(null);
-  const [adminUnreadCount, setAdminUnreadCount] = useState(0);
 
-  useEffect(() => {
-    if (!user || user.role === 'ADMIN') {
-      setAdminUnreadCount(0);
-      return;
-    }
-
-    let cancelled = false;
-    apiFetch<{ count: number }>('/messages/unread-count')
-      .then((data) => {
-        if (!cancelled) {
-          setAdminUnreadCount(data.count);
-        }
-      })
-      .catch(() => {});
-
-    return () => {
-      cancelled = true;
-    };
-  }, [user]);
-
-  const allNotifications = useMemo(() => {
-    const base = getAllNotifications();
-    if (adminUnreadCount <= 0) {
-      return base;
-    }
-    const adminNotification: UserNotification = {
-      id: 'admin-message-live',
-      title: 'Nowa wiadomość od administracji',
-      description: `Masz ${adminUnreadCount} ${adminUnreadCount === 1 ? 'nieprzeczytaną wiadomość' : 'nieprzeczytane wiadomości'} od zespołu Mieszko.`,
-      timeLabel: 'Teraz',
-      dayLabel: 'Dzisiaj',
-      category: 'messages',
-      icon: 'message',
-      unread: true,
-      action: 'arrow',
-    };
-    return [adminNotification, ...base];
-  }, [adminUnreadCount]);
-  const unreadCount = allNotifications.filter((item) => item.unread).length;
-  const previewNotifications = allNotifications.slice(0, 3);
+  // Dane powiadomień z centralnego providera. W dzwonku pokazujemy nieprzeczytane (znikają po kliknięciu).
+  const displayNotifications = toDisplayNotifications(serverNotifications);
+  const previewNotifications = displayNotifications.filter((item) => item.unread).slice(0, 6);
 
   useEffect(() => {
     if (!isNotificationsOpen) {
@@ -17879,8 +18555,17 @@ function Header({
                 </div>
 
                 <div className="notification-popover-list">
+                  {previewNotifications.length === 0 && (
+                    <p className="notification-popover-empty">Brak nowych powiadomień.</p>
+                  )}
                   {previewNotifications.map((item) => (
-                    <article key={item.id} className="notification-popover-item">
+                    <article
+                      key={item.id}
+                      className="notification-popover-item"
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => { setIsNotificationsOpen(false); onOpenNotification(item); }}
+                    >
                       <span className={`notification-icon ${item.category}`}>
                         <Icon name={item.icon} />
                       </span>
@@ -17961,51 +18646,14 @@ function Header({
   );
 }
 
-function NotificationsPage() {
-  const { user } = useAuth();
+function NotificationsPage({ onOpenNotification }: { onOpenNotification: (notification: DisplayNotification) => void }) {
   const [activeTab, setActiveTab] = useState<'all' | NotificationCategory>('all');
-  const [adminUnreadCount, setAdminUnreadCount] = useState(0);
+  const { notifications: serverNotifications } = useNotifications();
 
-  useEffect(() => {
-    if (!user || user.role === 'ADMIN') {
-      setAdminUnreadCount(0);
-      return;
-    }
-
-    let cancelled = false;
-    apiFetch<{ count: number }>('/messages/unread-count')
-      .then((data) => {
-        if (!cancelled) {
-          setAdminUnreadCount(data.count);
-        }
-      })
-      .catch(() => {});
-
-    return () => {
-      cancelled = true;
-    };
-  }, [user]);
-
-  const allNotifications = useMemo(() => {
-    const base = getAllNotifications();
-    if (adminUnreadCount <= 0) {
-      return base;
-    }
-    const adminNotification: UserNotification = {
-      id: 'admin-message-live',
-      title: 'Nowa wiadomość od administracji',
-      description: `Masz ${adminUnreadCount} ${adminUnreadCount === 1 ? 'nieprzeczytaną wiadomość' : 'nieprzeczytane wiadomości'} od zespołu Mieszko.`,
-      timeLabel: 'Teraz',
-      dayLabel: 'Dzisiaj',
-      category: 'messages',
-      icon: 'message',
-      unread: true,
-      action: 'arrow',
-    };
-    return [adminNotification, ...base];
-  }, [adminUnreadCount]);
+  // Cała historia z backendu (przeczytane pozostają na liście); mapowanie do kształtu widoku bez zmiany designu.
+  const allNotifications = toDisplayNotifications(serverNotifications);
   const filteredNotifications = allNotifications.filter((item) => activeTab === 'all' || item.category === activeTab);
-  const groupedNotifications = filteredNotifications.reduce<Record<'Dzisiaj' | 'Wczoraj', UserNotification[]>>((groups, item) => {
+  const groupedNotifications = filteredNotifications.reduce<Record<'Dzisiaj' | 'Wczoraj', DisplayNotification[]>>((groups, item) => {
     groups[item.dayLabel].push(item);
     return groups;
   }, { Dzisiaj: [], Wczoraj: [] });
@@ -18034,7 +18682,13 @@ function NotificationsPage() {
                 <h2>{groupName}</h2>
                 <div className="notifications-list">
                   {groupedNotifications[groupName].map((item) => (
-                    <article key={item.id} className="notification-row">
+                    <article
+                      key={item.id}
+                      className={`notification-row${item.unread ? ' unread' : ''}`}
+                      role="button"
+                      tabIndex={0}
+                      onClick={() => onOpenNotification(item)}
+                    >
                       <span className={`notification-icon ${item.category}`}>
                         <Icon name={item.icon} />
                       </span>
@@ -19830,6 +20484,7 @@ const LISTING_STATUS_LABELS: Record<ApiListingStatus, string> = {
   PENDING: 'Oczekuje na moderację',
   APPROVED: 'Opublikowane',
   REJECTED: 'Odrzucone',
+  PAUSED: 'Wstrzymane',
 };
 
 function listingRoomsText(rooms: number): string {
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 9f89fe5..cc6c8d1 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,11 +2,14 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import { AuthProvider } from './auth';
+import { NotificationsProvider } from './notifications';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <AuthProvider>
-      <App />
+      <NotificationsProvider>
+        <App />
+      </NotificationsProvider>
     </AuthProvider>
   </React.StrictMode>,
 );
diff --git a/frontend/src/notifications.tsx b/frontend/src/notifications.tsx
new file mode 100644
index 0000000..81ebdef
--- /dev/null
+++ b/frontend/src/notifications.tsx
@@ -0,0 +1,178 @@
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { apiFetch, getToken, useAuth } from './auth';
+
+export type NotificationCategoryKey = 'listing' | 'messages' | 'system';
+
+// Powiadomienie w formie z backendu.
+export type ServerNotification = {
+  id: number;
+  category: NotificationCategoryKey;
+  icon: string;
+  title: string;
+  body: string | null;
+  link: string | null;
+  read: boolean;
+  createdAt: string;
+};
+
+// Zdarzenia liczone po stronie klienta (alerty cen, spotkania, ulubione, telefon, dopasowania).
+export type NotifyInput = {
+  category: NotificationCategoryKey;
+  icon?: string;
+  title: string;
+  body?: string;
+  link?: string;
+  dedupeKey?: string;
+};
+
+// Kształt do renderu (zgodny z istniejącym UI: title/description/timeLabel/dayLabel/category/icon/unread/action).
+export type DisplayNotification = ServerNotification & {
+  description: string;
+  timeLabel: string;
+  dayLabel: 'Dzisiaj' | 'Wczoraj';
+  unread: boolean;
+  action?: 'arrow';
+};
+
+type NotificationsContextValue = {
+  notifications: ServerNotification[];
+  unreadCount: number;
+  markRead: (id: number) => void;
+  markAllRead: () => void;
+  notify: (input: NotifyInput) => void;
+  refresh: () => void;
+};
+
+const NotificationsContext = createContext<NotificationsContextValue | null>(null);
+
+function pad(value: number): string {
+  return value < 10 ? `0${value}` : String(value);
+}
+
+// Mapowanie listy z backendu na kształt oczekiwany przez istniejący widok (bez zmiany designu).
+export function toDisplayNotifications(list: ServerNotification[]): DisplayNotification[] {
+  const now = new Date();
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+  const startOfYesterday = startOfToday - 24 * 60 * 60 * 1000;
+
+  return list.map((item) => {
+    const created = new Date(item.createdAt);
+    const createdMs = created.getTime();
+    const time = `${pad(created.getHours())}:${pad(created.getMinutes())}`;
+    const isToday = createdMs >= startOfToday;
+    const isYesterday = createdMs >= startOfYesterday && createdMs < startOfToday;
+
+    let timeLabel: string;
+    if (isToday) {
+      timeLabel = time;
+    } else if (isYesterday) {
+      timeLabel = `Wczoraj, ${time}`;
+    } else {
+      timeLabel = `${pad(created.getDate())}.${pad(created.getMonth() + 1)}, ${time}`;
+    }
+
+    const unread = !item.read;
+    return {
+      ...item,
+      description: item.body ?? '',
+      timeLabel,
+      // Widok grupuje wyłącznie na "Dzisiaj"/"Wczoraj" — starsze trafiają do "Wczoraj".
+      dayLabel: isToday ? 'Dzisiaj' : 'Wczoraj',
+      unread,
+      action: !unread && item.link ? 'arrow' : undefined,
+    };
+  });
+}
+
+export function NotificationsProvider({ children }: { children: ReactNode }) {
+  const { user } = useAuth();
+  const [notifications, setNotifications] = useState<ServerNotification[]>([]);
+  const sentDedupeKeys = useRef<Set<string>>(new Set());
+
+  const unreadCount = notifications.reduce((count, item) => (item.read ? count : count + 1), 0);
+
+  const refresh = useCallback(() => {
+    if (!getToken()) {
+      setNotifications([]);
+      return;
+    }
+    apiFetch<ServerNotification[]>('/notifications')
+      .then((data) => setNotifications(Array.isArray(data) ? data : []))
+      .catch(() => { /* cicho - brak sieci/tokenu */ });
+  }, []);
+
+  // Ładowanie listy + realtime (SSE) gdy użytkownik zalogowany. Token w query param (EventSource nie ustawia nagłówków).
+  useEffect(() => {
+    const token = getToken();
+    if (!user || !token) {
+      setNotifications([]);
+      sentDedupeKeys.current = new Set();
+      return;
+    }
+
+    refresh();
+
+    const source = new EventSource(`/api/notifications/stream?access_token=${encodeURIComponent(token)}`);
+    source.addEventListener('notification', (event) => {
+      try {
+        const incoming = JSON.parse((event as MessageEvent).data) as ServerNotification;
+        setNotifications((current) => (current.some((item) => item.id === incoming.id) ? current : [incoming, ...current]));
+      } catch {
+        /* ignoruj nieparsowalne zdarzenie */
+      }
+    });
+    // onerror: EventSource sam ponawia połączenie.
+
+    // Zapasowy polling na wypadek zerwanego SSE.
+    const pollId = window.setInterval(refresh, 60000);
+
+    return () => {
+      source.close();
+      window.clearInterval(pollId);
+    };
+  }, [user, refresh]);
+
+  const markRead = useCallback((id: number) => {
+    setNotifications((current) => current.map((item) => (item.id === id ? { ...item, read: true } : item)));
+    apiFetch(`/notifications/${id}/read`, { method: 'POST' }).catch(() => {});
+  }, []);
+
+  const markAllRead = useCallback(() => {
+    setNotifications((current) => current.map((item) => ({ ...item, read: true })));
+    apiFetch('/notifications/read-all', { method: 'POST' }).catch(() => {});
+  }, []);
+
+  const notify = useCallback((input: NotifyInput) => {
+    if (!getToken() || !input.title) {
+      return;
+    }
+    if (input.dedupeKey) {
+      if (sentDedupeKeys.current.has(input.dedupeKey)) {
+        return;
+      }
+      sentDedupeKeys.current.add(input.dedupeKey);
+    }
+    apiFetch<ServerNotification | null>('/notifications', { method: 'POST', body: JSON.stringify(input) })
+      .then((created) => {
+        if (created && created.id) {
+          setNotifications((current) => (current.some((item) => item.id === created.id) ? current : [created, ...current]));
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  return (
+    <NotificationsContext.Provider value={{ notifications, unreadCount, markRead, markAllRead, notify, refresh }}>
+      {children}
+    </NotificationsContext.Provider>
+  );
+}
+
+export function useNotifications(): NotificationsContextValue {
+  const context = useContext(NotificationsContext);
+  if (!context) {
+    throw new Error('useNotifications musi być użyte wewnątrz NotificationsProvider');
+  }
+  return context;
+}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 70b441f..5f2daca 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -25842,3 +25842,805 @@ svg {
     align-items: flex-start;
   }
 }
+
+/* ---- Kalkulator zdolności kredytowej ---- */
+.credit-page {
+  background: #f4f7fb;
+  padding: 34px 20px 70px;
+}
+
+.credit-shell {
+  margin: 0 auto;
+  max-width: 1240px;
+}
+
+.credit-breadcrumb {
+  margin-bottom: 18px;
+}
+
+.credit-title {
+  align-items: center;
+  display: flex;
+  gap: 18px;
+  margin-bottom: 26px;
+}
+
+.credit-title-icon {
+  align-items: center;
+  background: #e6f6ee;
+  border-radius: 14px;
+  color: #0b9f5c;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 26px;
+  height: 56px;
+  justify-content: center;
+  width: 56px;
+}
+
+.credit-title h1 {
+  color: #14223a;
+  font-size: 30px;
+  font-weight: 950;
+  margin: 0 0 6px;
+}
+
+.credit-title p {
+  color: #526171;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.55;
+  margin: 0;
+  max-width: 780px;
+}
+
+.credit-layout {
+  align-items: start;
+  display: grid;
+  gap: 22px;
+  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
+}
+
+.credit-form-column,
+.credit-result-column {
+  display: grid;
+  gap: 18px;
+  min-width: 0;
+}
+
+.credit-card {
+  background: #ffffff;
+  border: 1px solid #dfe7ef;
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(24, 35, 57, 0.05);
+  padding: 22px 22px 20px;
+}
+
+.credit-card h2 {
+  align-items: center;
+  color: #14223a;
+  display: flex;
+  font-size: 16px;
+  font-weight: 950;
+  gap: 12px;
+  margin: 0 0 18px;
+}
+
+.credit-step-badge {
+  align-items: center;
+  background: #0b9f5c;
+  border-radius: 50%;
+  color: #ffffff;
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 950;
+  height: 26px;
+  justify-content: center;
+  width: 26px;
+}
+
+.credit-grid {
+  display: grid;
+  gap: 16px;
+}
+
+.credit-grid-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.credit-field {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.credit-field-wide {
+  grid-column: 1 / -1;
+}
+
+.credit-field > span {
+  color: #27364d;
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.credit-field small {
+  color: #7a8798;
+  font-size: 11.5px;
+  font-weight: 800;
+}
+
+.credit-field input,
+.credit-field select {
+  background: #ffffff;
+  border: 1px solid #d5dee8;
+  border-radius: 8px;
+  color: #14223a;
+  font-size: 14px;
+  font-weight: 800;
+  min-height: 48px;
+  padding: 0 13px;
+  width: 100%;
+}
+
+.credit-field input:focus,
+.credit-field select:focus {
+  border-color: #0b9f5c;
+  box-shadow: 0 0 0 3px rgba(11, 159, 92, 0.14);
+  outline: none;
+}
+
+.credit-input-suffix {
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #d5dee8;
+  border-radius: 8px;
+  display: flex;
+  min-height: 48px;
+  overflow: hidden;
+  padding-right: 12px;
+}
+
+.credit-input-suffix:focus-within {
+  border-color: #0b9f5c;
+  box-shadow: 0 0 0 3px rgba(11, 159, 92, 0.14);
+}
+
+.credit-input-suffix input {
+  border: none;
+  box-shadow: none;
+  min-height: 46px;
+}
+
+.credit-input-suffix input:focus {
+  border: none;
+  box-shadow: none;
+}
+
+.credit-input-suffix em {
+  color: #7a8798;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.credit-stepper {
+  align-items: center;
+  border: 1px solid #d5dee8;
+  border-radius: 8px;
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr) 48px;
+  min-height: 48px;
+  overflow: hidden;
+}
+
+.credit-stepper button {
+  background: #f4f7fb;
+  border: none;
+  color: #0b9f5c;
+  font-size: 22px;
+  font-weight: 900;
+  height: 100%;
+}
+
+.credit-stepper button:hover {
+  background: #e6f6ee;
+}
+
+.credit-stepper strong {
+  color: #14223a;
+  font-size: 16px;
+  font-weight: 950;
+  text-align: center;
+}
+
+.credit-segmented {
+  background: #eef2f7;
+  border-radius: 8px;
+  display: grid;
+  gap: 4px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 4px;
+}
+
+.credit-segmented button {
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: #526171;
+  font-size: 13px;
+  font-weight: 900;
+  padding: 11px 8px;
+}
+
+.credit-segmented button.active {
+  background: #ffffff;
+  box-shadow: 0 2px 8px rgba(24, 35, 57, 0.12);
+  color: #0b9f5c;
+}
+
+.credit-range-value {
+  color: #0b9f5c;
+  font-weight: 950;
+}
+
+.credit-range {
+  -webkit-appearance: none;
+  appearance: none;
+  background: linear-gradient(#d5dee8, #d5dee8) no-repeat;
+  background-size: 100% 6px;
+  background-position: 0 center;
+  border-radius: 6px;
+  height: 24px;
+  width: 100%;
+}
+
+.credit-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  background: #0b9f5c;
+  border: 3px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(11, 159, 92, 0.4);
+  height: 22px;
+  width: 22px;
+}
+
+.credit-range::-moz-range-thumb {
+  background: #0b9f5c;
+  border: 3px solid #ffffff;
+  border-radius: 50%;
+  height: 22px;
+  width: 22px;
+}
+
+.credit-range-scale {
+  color: #97a3b2;
+  display: flex;
+  font-size: 11px;
+  font-weight: 800;
+  justify-content: space-between;
+}
+
+.credit-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.credit-btn-primary,
+.credit-btn-ghost {
+  align-items: center;
+  border-radius: 10px;
+  display: inline-flex;
+  font-size: 14px;
+  font-weight: 900;
+  gap: 9px;
+  justify-content: center;
+  min-height: 50px;
+  padding: 0 22px;
+}
+
+.credit-btn-primary {
+  background: #0b9f5c;
+  border: none;
+  color: #ffffff;
+  flex: 1 1 auto;
+}
+
+.credit-btn-primary:hover {
+  background: #0a8b50;
+}
+
+.credit-btn-ghost {
+  background: #ffffff;
+  border: 1px solid #d5dee8;
+  color: #27364d;
+}
+
+.credit-btn-ghost:hover {
+  border-color: #b7c2cf;
+}
+
+/* Wynik */
+.credit-result-hero {
+  border-radius: 14px;
+  color: #ffffff;
+  overflow: hidden;
+  padding: 26px 28px 24px;
+  position: relative;
+}
+
+.credit-tone-verysafe,
+.credit-tone-safe {
+  background: linear-gradient(135deg, #0b9f5c, #0a8b50);
+}
+
+.credit-tone-moderate {
+  background: linear-gradient(135deg, #d98a13, #c2790a);
+}
+
+.credit-tone-high {
+  background: linear-gradient(135deg, #e0592f, #c8461f);
+}
+
+.credit-tone-none,
+.credit-tone-empty {
+  background: linear-gradient(135deg, #4a5a70, #35435a);
+}
+
+.credit-result-hero.pulse {
+  animation: creditPulse 0.9s ease;
+}
+
+@keyframes creditPulse {
+  0% { transform: scale(1); }
+  40% { transform: scale(1.014); }
+  100% { transform: scale(1); }
+}
+
+.credit-hero-top {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+}
+
+.credit-hero-top > span:first-child {
+  font-size: 14px;
+  font-weight: 850;
+  opacity: 0.92;
+}
+
+.credit-badge {
+  background: rgba(255, 255, 255, 0.22);
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 900;
+  padding: 6px 12px;
+  white-space: nowrap;
+}
+
+.credit-result-hero strong {
+  display: block;
+  font-size: 44px;
+  font-weight: 950;
+  letter-spacing: -0.5px;
+  line-height: 1;
+  margin: 18px 0 12px;
+}
+
+.credit-stars {
+  display: flex;
+  gap: 3px;
+}
+
+.credit-stars span {
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 17px;
+}
+
+.credit-stars span.on {
+  color: #ffd873;
+}
+
+.credit-stars span svg {
+  fill: currentColor;
+  stroke: none;
+}
+
+.credit-result-hero p {
+  font-size: 13px;
+  font-weight: 750;
+  line-height: 1.5;
+  margin: 14px 0 0;
+  opacity: 0.94;
+}
+
+.credit-tiles {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.credit-tile {
+  background: #ffffff;
+  border: 1px solid #dfe7ef;
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(24, 35, 57, 0.05);
+  display: grid;
+  gap: 6px;
+  padding: 16px 16px 15px;
+}
+
+.credit-tile small {
+  color: #7a8798;
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.credit-tile strong {
+  color: #14223a;
+  font-size: 20px;
+  font-weight: 950;
+}
+
+.credit-tile em {
+  color: #0b9f5c;
+  font-size: 11.5px;
+  font-style: normal;
+  font-weight: 850;
+}
+
+.credit-details-head {
+  align-items: center;
+  display: grid;
+  gap: 20px;
+  grid-template-columns: minmax(0, 1fr) 250px;
+  margin-bottom: 18px;
+}
+
+.credit-details h3 {
+  color: #14223a;
+  font-size: 16px;
+  font-weight: 950;
+  margin: 0;
+}
+
+.credit-donut-wrap {
+  align-items: center;
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+}
+
+.credit-donut {
+  height: 128px;
+  width: 128px;
+}
+
+.credit-donut circle {
+  fill: none;
+  stroke-width: 13;
+}
+
+.credit-donut-track {
+  stroke: #eef2f7;
+}
+
+.credit-donut-you {
+  stroke: #0b9f5c;
+  stroke-linecap: round;
+}
+
+.credit-donut-partner {
+  stroke: #3f8bff;
+  stroke-linecap: round;
+}
+
+.credit-donut-value {
+  dominant-baseline: middle;
+  fill: #14223a;
+  font-size: 20px;
+  font-weight: 900;
+  stroke: none;
+  text-anchor: middle;
+}
+
+.credit-donut-label {
+  dominant-baseline: middle;
+  fill: #7a8798;
+  font-size: 10px;
+  font-weight: 800;
+  stroke: none;
+  text-anchor: middle;
+}
+
+.credit-donut-legend {
+  display: grid;
+  gap: 6px;
+  list-style: none;
+  margin: 4px 0 0;
+  padding: 0;
+  width: 100%;
+}
+
+.credit-donut-legend li {
+  align-items: center;
+  color: #526171;
+  display: flex;
+  font-size: 12px;
+  font-weight: 800;
+  gap: 7px;
+}
+
+.credit-donut-legend b {
+  color: #14223a;
+  margin-left: auto;
+}
+
+.credit-donut-legend i {
+  border-radius: 3px;
+  flex: 0 0 auto;
+  height: 11px;
+  width: 11px;
+}
+
+.credit-dot-you {
+  background: #0b9f5c;
+}
+
+.credit-dot-partner {
+  background: #3f8bff;
+}
+
+.credit-detail-rows {
+  display: grid;
+  gap: 0;
+  margin: 0;
+}
+
+.credit-detail-row {
+  align-items: center;
+  border-top: 1px solid #eef2f7;
+  display: flex;
+  gap: 12px;
+  justify-content: space-between;
+  padding: 11px 0;
+}
+
+.credit-detail-row dt {
+  color: #526171;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+.credit-detail-row dd {
+  color: #14223a;
+  font-size: 14px;
+  font-weight: 950;
+  margin: 0;
+  text-align: right;
+}
+
+.credit-detail-positive dd {
+  color: #0b9f5c;
+}
+
+.credit-detail-negative dd {
+  color: #d64545;
+}
+
+.credit-cta-band {
+  align-items: center;
+  background: linear-gradient(135deg, #e6f6ee, #f0f9f4);
+  border: 1px solid #bfe6d2;
+  border-radius: 12px;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  padding: 20px 22px;
+}
+
+.credit-cta-band strong {
+  color: #14223a;
+  display: block;
+  font-size: 15px;
+  font-weight: 950;
+}
+
+.credit-cta-band span {
+  color: #4b6a58;
+  display: block;
+  font-size: 13px;
+  font-weight: 750;
+  margin-top: 4px;
+}
+
+.credit-cta-band button {
+  align-items: center;
+  background: #0b9f5c;
+  border: none;
+  border-radius: 10px;
+  color: #ffffff;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: 14px;
+  font-weight: 900;
+  gap: 8px;
+  min-height: 48px;
+  padding: 0 20px;
+}
+
+.credit-cta-band button:hover:not(:disabled) {
+  background: #0a8b50;
+}
+
+.credit-cta-band button:disabled {
+  background: #b7c2cf;
+  cursor: not-allowed;
+}
+
+.credit-recos h3 {
+  align-items: center;
+  color: #14223a;
+  display: flex;
+  font-size: 16px;
+  font-weight: 950;
+  gap: 9px;
+  margin: 0 0 16px;
+}
+
+.credit-reco-list {
+  display: grid;
+  gap: 10px;
+}
+
+.credit-reco {
+  align-items: center;
+  background: #f8fafc;
+  border: 1px solid #e7edf3;
+  border-radius: 10px;
+  display: flex;
+  gap: 13px;
+  padding: 13px 15px;
+}
+
+.credit-reco-icon {
+  align-items: center;
+  background: #e6f6ee;
+  border-radius: 9px;
+  color: #0b9f5c;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 17px;
+  height: 40px;
+  justify-content: center;
+  width: 40px;
+}
+
+.credit-reco-body {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.credit-reco-body strong {
+  color: #14223a;
+  font-size: 13.5px;
+  font-weight: 900;
+}
+
+.credit-reco-body small {
+  color: #7a8798;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1.4;
+}
+
+.credit-reco-delta {
+  color: #0b9f5c;
+  flex: 0 0 auto;
+  font-size: 14px;
+  font-weight: 950;
+  margin-left: auto;
+  white-space: nowrap;
+}
+
+.credit-disclaimer {
+  align-items: flex-start;
+  color: #7a8798;
+  display: flex;
+  font-size: 12px;
+  font-weight: 700;
+  gap: 9px;
+  line-height: 1.55;
+  margin: 4px 0 0;
+}
+
+.credit-disclaimer svg {
+  color: #0b9f5c;
+  flex: 0 0 auto;
+  font-size: 16px;
+  margin-top: 1px;
+}
+
+@media (max-width: 1080px) {
+  .credit-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 720px) {
+  .credit-grid-2 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .credit-tiles {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .credit-details-head {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .credit-cta-band {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .credit-title h1 {
+    font-size: 24px;
+  }
+
+  .credit-result-hero strong {
+    font-size: 36px;
+  }
+}
+
+/* Prawdziwe ogloszenie z serwisu w liscie "Moje oferty" */
+.listing-photo.clickable {
+  cursor: pointer;
+}
+
+.listing-status em.listing-live-tag {
+  background: #e6f6ee;
+  border-radius: 999px;
+  color: #0b9f5c;
+  font-size: 10.5px;
+  font-style: normal;
+  font-weight: 900;
+  letter-spacing: 0.02em;
+  padding: 2px 8px;
+  text-transform: uppercase;
+}
+
+/* Kalkulator osadzony w panelu konta (z paskiem bocznym) */
+.credit-account-main {
+  min-width: 0;
+}
+
+.credit-account-main .credit-title {
+  margin-top: 0;
+}
+
+@media (max-width: 1280px) {
+  .credit-account-main .credit-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* Powiadomienia - klikalnosc (logika, bez zmiany wygladu) */
+.notification-row,
+.notification-popover-item[role="button"] {
+  cursor: pointer;
+}
+
+.notification-popover-empty {
+  color: #7a8798;
+  font-size: 13px;
+  font-weight: 700;
+  margin: 0;
+  padding: 18px 4px;
+  text-align: center;
+}

From a6b156695ff277d2cd14fa4da60b2d1eb52c80d4 Mon Sep 17 00:00:00 2001
From: pascal <zatorskipascal@gmail.com>
Date: Thu, 23 Jul 2026 23:15:15 +0200
Subject: [PATCH 03/10] sms & SMTP

---
 backend/pom.xml                               |   4 +
 .../PolskaLokalnieApplication.java            |   3 +
 .../pl/polskalokalnie/auth/AuthService.java   |  15 +-
 .../polskalokalnie/auth/SecurityConfig.java   |   1 +
 .../pl/polskalokalnie/campaign/Campaign.java  | 171 +++
 .../campaign/CampaignController.java          |  72 ++
 .../campaign/CampaignRecipient.java           | 147 +++
 .../campaign/CampaignRecipientRepository.java |  16 +
 .../campaign/CampaignRepository.java          |   9 +
 .../campaign/CampaignRequest.java             |  17 +
 .../campaign/CampaignResponse.java            |  39 +
 .../campaign/CampaignService.java             | 213 ++++
 .../campaign/CampaignStatsResponse.java       |  15 +
 .../campaign/CampaignStatus.java              |  14 +
 .../pl/polskalokalnie/campaign/Channel.java   |   6 +
 .../campaign/RecipientStatus.java             |  15 +
 .../config/LeadBackfillRunner.java            |  39 +
 .../lead/ImportResultResponse.java            |  13 +
 .../java/pl/polskalokalnie/lead/Lead.java     | 211 ++++
 .../polskalokalnie/lead/LeadController.java   |  61 ++
 .../lead/LeadCreateRequest.java               |  19 +
 .../lead/LeadImportRequest.java               |  14 +
 .../polskalokalnie/lead/LeadQueryService.java |  77 ++
 .../polskalokalnie/lead/LeadRepository.java   |  15 +
 .../pl/polskalokalnie/lead/LeadResponse.java  |  42 +
 .../pl/polskalokalnie/lead/LeadService.java   | 228 ++++
 .../pl/polskalokalnie/lead/LeadSource.java    |  12 +
 .../pl/polskalokalnie/lead/LeadStatus.java    |  12 +
 .../polskalokalnie/lead/LeadSyncService.java  |  63 ++
 .../lead/LeadUpdateRequest.java               |  22 +
 .../lead/MarketingConsentController.java      |  74 ++
 .../pl/polskalokalnie/lead/TargetGroup.java   | 165 +++
 .../lead/TargetGroupController.java           |  56 +
 .../lead/TargetGroupPreviewResponse.java      |  12 +
 .../lead/TargetGroupRepository.java           |   6 +
 .../lead/TargetGroupRequest.java              |  18 +
 .../lead/TargetGroupResponse.java             |  39 +
 .../lead/TargetGroupService.java              |  88 ++
 .../mailconfig/MailConfigController.java      |  80 ++
 .../mailconfig/MailConfigService.java         |  91 ++
 .../mailconfig/SmsConfigRequest.java          |  13 +
 .../mailconfig/SmsConfigResponse.java         |  23 +
 .../mailconfig/SmsGatewayConfig.java          |  81 ++
 .../SmsGatewayConfigRepository.java           |   6 +
 .../polskalokalnie/mailconfig/SmtpConfig.java | 114 ++
 .../mailconfig/SmtpConfigRepository.java      |   6 +
 .../mailconfig/SmtpConfigRequest.java         |  17 +
 .../mailconfig/SmtpConfigResponse.java        |  29 +
 .../send/CampaignDispatcher.java              | 140 +++
 .../pl/polskalokalnie/send/EmailSender.java   |  83 ++
 .../polskalokalnie/send/MessageComposer.java  |  69 ++
 .../pl/polskalokalnie/send/SendResult.java    |  18 +
 .../pl/polskalokalnie/send/SmsSender.java     |  73 ++
 .../unsubscribe/UnsubscribeController.java    |  44 +
 .../unsubscribe/UnsubscribeService.java       | 112 ++
 backend/src/main/resources/application.yml    |   2 +
 frontend/src/App.tsx                          |  51 +-
 frontend/src/admin/marketing.tsx              | 974 ++++++++++++++++++
 frontend/src/styles.css                       | 105 ++
 59 files changed, 4169 insertions(+), 5 deletions(-)
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/Campaign.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/CampaignController.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/CampaignRecipient.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/CampaignRecipientRepository.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/CampaignRepository.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/CampaignRequest.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/CampaignResponse.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/CampaignService.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/CampaignStatsResponse.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/CampaignStatus.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/Channel.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/campaign/RecipientStatus.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/config/LeadBackfillRunner.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/ImportResultResponse.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/Lead.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/LeadController.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/LeadCreateRequest.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/LeadImportRequest.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/LeadQueryService.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/LeadRepository.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/LeadResponse.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/LeadService.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/LeadSource.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/LeadStatus.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/LeadSyncService.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/LeadUpdateRequest.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/MarketingConsentController.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/TargetGroup.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/TargetGroupController.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/TargetGroupPreviewResponse.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/TargetGroupRepository.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/TargetGroupRequest.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/TargetGroupResponse.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/lead/TargetGroupService.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/mailconfig/MailConfigController.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/mailconfig/MailConfigService.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/mailconfig/SmsConfigRequest.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/mailconfig/SmsConfigResponse.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/mailconfig/SmsGatewayConfig.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/mailconfig/SmsGatewayConfigRepository.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfig.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigRepository.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigRequest.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigResponse.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/send/CampaignDispatcher.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/send/EmailSender.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/send/MessageComposer.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/send/SendResult.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/send/SmsSender.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/unsubscribe/UnsubscribeController.java
 create mode 100644 backend/src/main/java/pl/polskalokalnie/unsubscribe/UnsubscribeService.java
 create mode 100644 frontend/src/admin/marketing.tsx

diff --git a/backend/pom.xml b/backend/pom.xml
index c0bc397..5e07ec0 100644
--- a/backend/pom.xml
+++ b/backend/pom.xml
@@ -38,6 +38,10 @@
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-security</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-mail</artifactId>
+        </dependency>
         <dependency>
             <groupId>io.jsonwebtoken</groupId>
             <artifactId>jjwt-api</artifactId>
diff --git a/backend/src/main/java/pl/polskalokalnie/PolskaLokalnieApplication.java b/backend/src/main/java/pl/polskalokalnie/PolskaLokalnieApplication.java
index 39c5476..c48c380 100644
--- a/backend/src/main/java/pl/polskalokalnie/PolskaLokalnieApplication.java
+++ b/backend/src/main/java/pl/polskalokalnie/PolskaLokalnieApplication.java
@@ -3,9 +3,12 @@ package pl.polskalokalnie;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.boot.autoconfigure.security.servlet.UserDetailsServiceAutoConfiguration;
+import org.springframework.scheduling.annotation.EnableScheduling;
 
 // Uwierzytelnianie realizuje wlasny filtr JWT, wiec wylaczamy domyslnego
 // uzytkownika Spring Security (i mylacy log "Using generated security password").
+// @EnableScheduling wlacza workera wysylajacego kampanie z outboxu.
+@EnableScheduling
 @SpringBootApplication(exclude = UserDetailsServiceAutoConfiguration.class)
 public class PolskaLokalnieApplication {
 
diff --git a/backend/src/main/java/pl/polskalokalnie/auth/AuthService.java b/backend/src/main/java/pl/polskalokalnie/auth/AuthService.java
index 69341f0..8f9bddd 100644
--- a/backend/src/main/java/pl/polskalokalnie/auth/AuthService.java
+++ b/backend/src/main/java/pl/polskalokalnie/auth/AuthService.java
@@ -7,6 +7,7 @@ import org.springframework.http.HttpStatus;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.stereotype.Service;
 import org.springframework.web.server.ResponseStatusException;
+import pl.polskalokalnie.lead.LeadSyncService;
 import pl.polskalokalnie.moderation.TextModerationService;
 import pl.polskalokalnie.auth.dto.AuthResponse;
 import pl.polskalokalnie.auth.dto.LoginRequest;
@@ -31,19 +32,22 @@ public class AuthService {
     private final PasswordEncoder passwordEncoder;
     private final JwtService jwtService;
     private final TextModerationService textModerationService;
+    private final LeadSyncService leadSyncService;
 
     public AuthService(
             UserRepository userRepository,
             BlockedEmailRepository blockedEmailRepository,
             PasswordEncoder passwordEncoder,
             JwtService jwtService,
-            TextModerationService textModerationService
+            TextModerationService textModerationService,
+            LeadSyncService leadSyncService
     ) {
         this.userRepository = userRepository;
         this.blockedEmailRepository = blockedEmailRepository;
         this.passwordEncoder = passwordEncoder;
         this.jwtService = jwtService;
         this.textModerationService = textModerationService;
+        this.leadSyncService = leadSyncService;
     }
 
     public AuthResponse register(RegisterRequest request) {
@@ -69,7 +73,9 @@ public class AuthService {
         // Konta zalozone samodzielnie czekaja na weryfikacje danych przez administratora.
         user.setVerified(false);
 
-        return buildAuthResponse(userRepository.save(user));
+        AppUser saved = userRepository.save(user);
+        leadSyncService.syncUser(saved);
+        return buildAuthResponse(saved);
     }
 
     public AuthResponse login(LoginRequest request) {
@@ -121,6 +127,7 @@ public class AuthService {
             throw new ResponseStatusException(HttpStatus.FORBIDDEN, "Konto zostało zablokowane");
         }
 
+        leadSyncService.syncUser(user);
         return buildAuthResponse(user);
     }
 
@@ -151,7 +158,9 @@ public class AuthService {
             user.setBirthDate(null);
         }
 
-        return UserResponse.from(userRepository.save(user));
+        AppUser saved = userRepository.save(user);
+        leadSyncService.syncUser(saved);
+        return UserResponse.from(saved);
     }
 
     private AuthResponse buildAuthResponse(AppUser user) {
diff --git a/backend/src/main/java/pl/polskalokalnie/auth/SecurityConfig.java b/backend/src/main/java/pl/polskalokalnie/auth/SecurityConfig.java
index 12f9e3b..6769d69 100644
--- a/backend/src/main/java/pl/polskalokalnie/auth/SecurityConfig.java
+++ b/backend/src/main/java/pl/polskalokalnie/auth/SecurityConfig.java
@@ -37,6 +37,7 @@ public class SecurityConfig {
                         .requestMatchers("/error").permitAll()
                         .requestMatchers("/api/auth/register", "/api/auth/login", "/api/auth/social").permitAll()
                         .requestMatchers("/api/i18n/translate").permitAll()
+                        .requestMatchers(HttpMethod.GET, "/api/unsubscribe").permitAll()
                         .requestMatchers("/api/auth/me").authenticated()
                         .requestMatchers(HttpMethod.GET, "/api/listings/mine").authenticated()
                         .requestMatchers(HttpMethod.GET, "/api/listings", "/api/listings/**").permitAll()
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/Campaign.java b/backend/src/main/java/pl/polskalokalnie/campaign/Campaign.java
new file mode 100644
index 0000000..c272deb
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/Campaign.java
@@ -0,0 +1,171 @@
+package pl.polskalokalnie.campaign;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.EnumType;
+import jakarta.persistence.Enumerated;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.Table;
+import java.time.Instant;
+import java.time.LocalDate;
+import org.hibernate.annotations.ColumnDefault;
+
+/**
+ * Kampania marketingowa wysylana jednym kanalem (e-mail lub SMS) do wskazanej grupy docelowej.
+ * Outbox (pozycje {@link CampaignRecipient}) budowany jest przy starcie wysylki; worker
+ * przetwarza go z dziennym limitem. Tresc zawiera znaczniki personalizacji i stopke z rezygnacja.
+ */
+@Entity
+@Table(name = "campaigns")
+public class Campaign {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(nullable = false, length = 160)
+    private String name;
+
+    @Enumerated(EnumType.STRING)
+    @Column(nullable = false, length = 10)
+    private Channel channel;
+
+    // Temat dotyczy tylko kanalu e-mail.
+    @Column(length = 200)
+    private String subject;
+
+    @Column(nullable = false, length = 4000)
+    private String body;
+
+    @Column(nullable = false)
+    private Long targetGroupId;
+
+    private Instant scheduledAt;
+
+    @Column(nullable = false)
+    @ColumnDefault("200")
+    private Integer dailyLimit = 200;
+
+    @Enumerated(EnumType.STRING)
+    @Column(nullable = false, length = 20)
+    @ColumnDefault("'DRAFT'")
+    private CampaignStatus status = CampaignStatus.DRAFT;
+
+    // Ile wyslano dzisiaj (do egzekwowania dziennego limitu) i data resetu licznika.
+    @Column(nullable = false)
+    @ColumnDefault("0")
+    private Integer sentToday = 0;
+
+    private LocalDate sentTodayDate;
+
+    @Column(nullable = false, updatable = false)
+    private Instant createdAt;
+
+    @Column(length = 180)
+    private String createdBy;
+
+    @jakarta.persistence.PrePersist
+    void onCreate() {
+        if (createdAt == null) {
+            createdAt = Instant.now();
+        }
+    }
+
+    public Long getId() {
+        return id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public Channel getChannel() {
+        return channel;
+    }
+
+    public void setChannel(Channel channel) {
+        this.channel = channel;
+    }
+
+    public String getSubject() {
+        return subject;
+    }
+
+    public void setSubject(String subject) {
+        this.subject = subject;
+    }
+
+    public String getBody() {
+        return body;
+    }
+
+    public void setBody(String body) {
+        this.body = body;
+    }
+
+    public Long getTargetGroupId() {
+        return targetGroupId;
+    }
+
+    public void setTargetGroupId(Long targetGroupId) {
+        this.targetGroupId = targetGroupId;
+    }
+
+    public Instant getScheduledAt() {
+        return scheduledAt;
+    }
+
+    public void setScheduledAt(Instant scheduledAt) {
+        this.scheduledAt = scheduledAt;
+    }
+
+    public Integer getDailyLimit() {
+        return dailyLimit;
+    }
+
+    public void setDailyLimit(Integer dailyLimit) {
+        this.dailyLimit = dailyLimit;
+    }
+
+    public CampaignStatus getStatus() {
+        return status;
+    }
+
+    public void setStatus(CampaignStatus status) {
+        this.status = status;
+    }
+
+    public Integer getSentToday() {
+        return sentToday;
+    }
+
+    public void setSentToday(Integer sentToday) {
+        this.sentToday = sentToday;
+    }
+
+    public LocalDate getSentTodayDate() {
+        return sentTodayDate;
+    }
+
+    public void setSentTodayDate(LocalDate sentTodayDate) {
+        this.sentTodayDate = sentTodayDate;
+    }
+
+    public Instant getCreatedAt() {
+        return createdAt;
+    }
+
+    public String getCreatedBy() {
+        return createdBy;
+    }
+
+    public void setCreatedBy(String createdBy) {
+        this.createdBy = createdBy;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/CampaignController.java b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignController.java
new file mode 100644
index 0000000..6ce6e6c
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignController.java
@@ -0,0 +1,72 @@
+package pl.polskalokalnie.campaign;
+
+import jakarta.validation.Valid;
+import java.util.List;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.security.core.Authentication;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseStatus;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * Kampanie marketingowe w panelu administratora.
+ */
+@RestController
+@RequestMapping("/api/admin/campaigns")
+public class CampaignController {
+
+    private final CampaignService campaignService;
+
+    public CampaignController(CampaignService campaignService) {
+        this.campaignService = campaignService;
+    }
+
+    @GetMapping
+    public List<CampaignResponse> list() {
+        return campaignService.list();
+    }
+
+    @GetMapping("/{id}")
+    public CampaignResponse get(@PathVariable Long id) {
+        return campaignService.get(id);
+    }
+
+    @PostMapping
+    @ResponseStatus(HttpStatus.CREATED)
+    public CampaignResponse create(@Valid @RequestBody CampaignRequest request, Authentication authentication) {
+        return campaignService.create(request, authentication.getName());
+    }
+
+    @PutMapping("/{id}")
+    public CampaignResponse update(@PathVariable Long id, @Valid @RequestBody CampaignRequest request) {
+        return campaignService.update(id, request);
+    }
+
+    @PostMapping("/{id}/schedule")
+    public CampaignResponse schedule(@PathVariable Long id) {
+        return campaignService.schedule(id);
+    }
+
+    @PostMapping("/{id}/pause")
+    public CampaignResponse pause(@PathVariable Long id) {
+        return campaignService.pause(id);
+    }
+
+    @GetMapping("/{id}/stats")
+    public CampaignStatsResponse stats(@PathVariable Long id) {
+        return campaignService.stats(id);
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseEntity<Void> delete(@PathVariable Long id) {
+        campaignService.delete(id);
+        return ResponseEntity.noContent().build();
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRecipient.java b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRecipient.java
new file mode 100644
index 0000000..5a3f495
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRecipient.java
@@ -0,0 +1,147 @@
+package pl.polskalokalnie.campaign;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.EnumType;
+import jakarta.persistence.Enumerated;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.Index;
+import jakarta.persistence.PrePersist;
+import jakarta.persistence.Table;
+import java.time.Instant;
+
+/**
+ * Pojedyncza pozycja outboxu kampanii - jeden odbiorca. Adres (e-mail/telefon) jest zapisany jako
+ * migawka w chwili budowy outboxu, zeby pozniejsze zmiany leada nie zmienialy juz zakolejkowanej
+ * wysylki.
+ */
+@Entity
+@Table(name = "campaign_recipients", indexes = {
+        @Index(name = "idx_campaign_recipients_campaign", columnList = "campaignId"),
+        @Index(name = "idx_campaign_recipients_status", columnList = "status")
+})
+public class CampaignRecipient {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(nullable = false)
+    private Long campaignId;
+
+    private Long leadId;
+
+    @Enumerated(EnumType.STRING)
+    @Column(nullable = false, length = 10)
+    private Channel channel;
+
+    @Column(nullable = false, length = 200)
+    private String address;
+
+    @Column(length = 160)
+    private String name;
+
+    @Enumerated(EnumType.STRING)
+    @Column(nullable = false, length = 20)
+    private RecipientStatus status = RecipientStatus.QUEUED;
+
+    @Column(length = 500)
+    private String error;
+
+    @Column(length = 200)
+    private String providerMessageId;
+
+    private Instant sentAt;
+
+    @Column(nullable = false, updatable = false)
+    private Instant createdAt;
+
+    @PrePersist
+    void onCreate() {
+        if (createdAt == null) {
+            createdAt = Instant.now();
+        }
+    }
+
+    public Long getId() {
+        return id;
+    }
+
+    public Long getCampaignId() {
+        return campaignId;
+    }
+
+    public void setCampaignId(Long campaignId) {
+        this.campaignId = campaignId;
+    }
+
+    public Long getLeadId() {
+        return leadId;
+    }
+
+    public void setLeadId(Long leadId) {
+        this.leadId = leadId;
+    }
+
+    public Channel getChannel() {
+        return channel;
+    }
+
+    public void setChannel(Channel channel) {
+        this.channel = channel;
+    }
+
+    public String getAddress() {
+        return address;
+    }
+
+    public void setAddress(String address) {
+        this.address = address;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public RecipientStatus getStatus() {
+        return status;
+    }
+
+    public void setStatus(RecipientStatus status) {
+        this.status = status;
+    }
+
+    public String getError() {
+        return error;
+    }
+
+    public void setError(String error) {
+        this.error = error;
+    }
+
+    public String getProviderMessageId() {
+        return providerMessageId;
+    }
+
+    public void setProviderMessageId(String providerMessageId) {
+        this.providerMessageId = providerMessageId;
+    }
+
+    public Instant getSentAt() {
+        return sentAt;
+    }
+
+    public void setSentAt(Instant sentAt) {
+        this.sentAt = sentAt;
+    }
+
+    public Instant getCreatedAt() {
+        return createdAt;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRecipientRepository.java b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRecipientRepository.java
new file mode 100644
index 0000000..b3a8647
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRecipientRepository.java
@@ -0,0 +1,16 @@
+package pl.polskalokalnie.campaign;
+
+import java.util.List;
+import org.springframework.data.domain.Limit;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface CampaignRecipientRepository extends JpaRepository<CampaignRecipient, Long> {
+
+    List<CampaignRecipient> findByCampaignId(Long campaignId);
+
+    long countByCampaignIdAndStatus(Long campaignId, RecipientStatus status);
+
+    List<CampaignRecipient> findByCampaignIdAndStatusOrderByIdAsc(Long campaignId, RecipientStatus status, Limit limit);
+
+    boolean existsByCampaignId(Long campaignId);
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRepository.java b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRepository.java
new file mode 100644
index 0000000..e84620c
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRepository.java
@@ -0,0 +1,9 @@
+package pl.polskalokalnie.campaign;
+
+import java.util.List;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface CampaignRepository extends JpaRepository<Campaign, Long> {
+
+    List<Campaign> findByStatus(CampaignStatus status);
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRequest.java b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRequest.java
new file mode 100644
index 0000000..7ebf1d6
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignRequest.java
@@ -0,0 +1,17 @@
+package pl.polskalokalnie.campaign;
+
+import jakarta.validation.constraints.Min;
+import jakarta.validation.constraints.NotBlank;
+import jakarta.validation.constraints.NotNull;
+import java.time.Instant;
+
+public record CampaignRequest(
+        @NotBlank String name,
+        @NotNull Channel channel,
+        String subject,
+        @NotBlank String body,
+        @NotNull Long targetGroupId,
+        Instant scheduledAt,
+        @NotNull @Min(1) Integer dailyLimit
+) {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/CampaignResponse.java b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignResponse.java
new file mode 100644
index 0000000..822f49a
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignResponse.java
@@ -0,0 +1,39 @@
+package pl.polskalokalnie.campaign;
+
+import java.time.Instant;
+
+public record CampaignResponse(
+        Long id,
+        String name,
+        Channel channel,
+        String subject,
+        String body,
+        Long targetGroupId,
+        Instant scheduledAt,
+        Integer dailyLimit,
+        CampaignStatus status,
+        Integer sentToday,
+        Instant createdAt,
+        String createdBy,
+        long totalRecipients,
+        long sentCount
+) {
+    public static CampaignResponse from(Campaign campaign, long totalRecipients, long sentCount) {
+        return new CampaignResponse(
+                campaign.getId(),
+                campaign.getName(),
+                campaign.getChannel(),
+                campaign.getSubject(),
+                campaign.getBody(),
+                campaign.getTargetGroupId(),
+                campaign.getScheduledAt(),
+                campaign.getDailyLimit(),
+                campaign.getStatus(),
+                campaign.getSentToday(),
+                campaign.getCreatedAt(),
+                campaign.getCreatedBy(),
+                totalRecipients,
+                sentCount
+        );
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/CampaignService.java b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignService.java
new file mode 100644
index 0000000..081d78c
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignService.java
@@ -0,0 +1,213 @@
+package pl.polskalokalnie.campaign;
+
+import java.time.Instant;
+import java.util.Comparator;
+import java.util.LinkedHashSet;
+import java.util.List;
+import java.util.Locale;
+import java.util.Set;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.server.ResponseStatusException;
+import pl.polskalokalnie.lead.Lead;
+import pl.polskalokalnie.lead.LeadQueryService;
+import pl.polskalokalnie.lead.TargetGroup;
+import pl.polskalokalnie.lead.TargetGroupRepository;
+
+/**
+ * Logika kampanii marketingowych: CRUD, budowa outboxu z grupy docelowej oraz sterowanie
+ * wysylka (harmonogram/pauza). Outbox respektuje zgody marketingowe i trwale rezygnacje -
+ * odbiorcy bez zgody lub po opt-oucie nie trafiaja do kolejki. Sama wysylka odbywa sie w workerze.
+ */
+@Service
+public class CampaignService {
+
+    private final CampaignRepository campaignRepository;
+    private final CampaignRecipientRepository recipientRepository;
+    private final TargetGroupRepository targetGroupRepository;
+    private final LeadQueryService leadQueryService;
+
+    public CampaignService(CampaignRepository campaignRepository,
+            CampaignRecipientRepository recipientRepository,
+            TargetGroupRepository targetGroupRepository,
+            LeadQueryService leadQueryService) {
+        this.campaignRepository = campaignRepository;
+        this.recipientRepository = recipientRepository;
+        this.targetGroupRepository = targetGroupRepository;
+        this.leadQueryService = leadQueryService;
+    }
+
+    public List<CampaignResponse> list() {
+        return campaignRepository.findAll().stream()
+                .sorted(Comparator.comparing(Campaign::getCreatedAt).reversed())
+                .map(this::toResponse)
+                .toList();
+    }
+
+    public CampaignResponse get(Long id) {
+        return toResponse(requireCampaign(id));
+    }
+
+    @Transactional
+    public CampaignResponse create(CampaignRequest request, String createdBy) {
+        requireGroup(request.targetGroupId());
+        if (request.channel() == Channel.EMAIL && (request.subject() == null || request.subject().isBlank())) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Kampania e-mail wymaga tematu");
+        }
+        Campaign campaign = new Campaign();
+        apply(campaign, request);
+        campaign.setStatus(CampaignStatus.DRAFT);
+        campaign.setCreatedBy(createdBy);
+        return toResponse(campaignRepository.save(campaign));
+    }
+
+    @Transactional
+    public CampaignResponse update(Long id, CampaignRequest request) {
+        Campaign campaign = requireCampaign(id);
+        if (campaign.getStatus() != CampaignStatus.DRAFT) {
+            throw new ResponseStatusException(HttpStatus.CONFLICT, "Edytować można tylko kampanię w wersji roboczej");
+        }
+        requireGroup(request.targetGroupId());
+        if (request.channel() == Channel.EMAIL && (request.subject() == null || request.subject().isBlank())) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Kampania e-mail wymaga tematu");
+        }
+        apply(campaign, request);
+        return toResponse(campaignRepository.save(campaign));
+    }
+
+    @Transactional
+    public void delete(Long id) {
+        Campaign campaign = requireCampaign(id);
+        recipientRepository.deleteAll(recipientRepository.findByCampaignId(campaign.getId()));
+        campaignRepository.delete(campaign);
+    }
+
+    /**
+     * Uruchamia kampanie: buduje outbox (jesli jeszcze nie istnieje) i ustawia status. Kampania
+     * z data w przyszlosci przechodzi w SCHEDULED, w przeciwnym razie od razu w SENDING - workera
+     * wysylajacego dodajemy w kolejnej fazie.
+     */
+    @Transactional
+    public CampaignResponse schedule(Long id) {
+        Campaign campaign = requireCampaign(id);
+        if (campaign.getStatus() == CampaignStatus.COMPLETED || campaign.getStatus() == CampaignStatus.CANCELLED) {
+            throw new ResponseStatusException(HttpStatus.CONFLICT, "Kampania jest już zakończona");
+        }
+        if (!recipientRepository.existsByCampaignId(campaign.getId())) {
+            int built = buildOutbox(campaign);
+            if (built == 0) {
+                throw new ResponseStatusException(HttpStatus.BAD_REQUEST,
+                        "Brak odbiorców spełniających kryteria (uwzględniono zgody i rezygnacje)");
+            }
+        }
+        boolean future = campaign.getScheduledAt() != null && campaign.getScheduledAt().isAfter(Instant.now());
+        campaign.setStatus(future ? CampaignStatus.SCHEDULED : CampaignStatus.SENDING);
+        return toResponse(campaignRepository.save(campaign));
+    }
+
+    @Transactional
+    public CampaignResponse pause(Long id) {
+        Campaign campaign = requireCampaign(id);
+        if (campaign.getStatus() != CampaignStatus.SENDING && campaign.getStatus() != CampaignStatus.SCHEDULED) {
+            throw new ResponseStatusException(HttpStatus.CONFLICT, "Wstrzymać można tylko kampanię w toku lub zaplanowaną");
+        }
+        campaign.setStatus(CampaignStatus.PAUSED);
+        return toResponse(campaignRepository.save(campaign));
+    }
+
+    public CampaignStatsResponse stats(Long id) {
+        Campaign campaign = requireCampaign(id);
+        Long cid = campaign.getId();
+        return new CampaignStatsResponse(
+                recipientRepository.findByCampaignId(cid).size(),
+                recipientRepository.countByCampaignIdAndStatus(cid, RecipientStatus.QUEUED),
+                recipientRepository.countByCampaignIdAndStatus(cid, RecipientStatus.SENT),
+                recipientRepository.countByCampaignIdAndStatus(cid, RecipientStatus.DELIVERED),
+                recipientRepository.countByCampaignIdAndStatus(cid, RecipientStatus.FAILED),
+                recipientRepository.countByCampaignIdAndStatus(cid, RecipientStatus.BOUNCED),
+                recipientRepository.countByCampaignIdAndStatus(cid, RecipientStatus.OPTED_OUT)
+        );
+    }
+
+    // Buduje pozycje outboxu dla leadow z grupy, z poszanowaniem zgod, rezygnacji i obecnosci adresu.
+    private int buildOutbox(Campaign campaign) {
+        TargetGroup group = requireGroup(campaign.getTargetGroupId());
+        List<Lead> members = leadQueryService.resolve(group);
+        Set<String> seenAddresses = new LinkedHashSet<>();
+        int built = 0;
+        for (Lead lead : members) {
+            String address = eligibleAddress(lead, campaign.getChannel());
+            if (address == null) {
+                continue;
+            }
+            if (!seenAddresses.add(address.toLowerCase(Locale.ROOT))) {
+                continue;
+            }
+            CampaignRecipient recipient = new CampaignRecipient();
+            recipient.setCampaignId(campaign.getId());
+            recipient.setLeadId(lead.getId());
+            recipient.setChannel(campaign.getChannel());
+            recipient.setAddress(address);
+            recipient.setName(lead.getName());
+            recipient.setStatus(RecipientStatus.QUEUED);
+            recipientRepository.save(recipient);
+            built++;
+        }
+        return built;
+    }
+
+    // Zwraca adres kwalifikujacy leada do wysylki na danym kanale albo null, gdy nie kwalifikuje sie
+    // (brak adresu, brak zgody marketingowej lub trwala rezygnacja).
+    private static String eligibleAddress(Lead lead, Channel channel) {
+        if (channel == Channel.EMAIL) {
+            if (hasText(lead.getEmail()) && lead.isEmailConsent() && !lead.isEmailOptOut()) {
+                return lead.getEmail().trim();
+            }
+            return null;
+        }
+        if (hasText(lead.getPhone()) && lead.isSmsConsent() && !lead.isSmsOptOut()) {
+            return lead.getPhone().trim();
+        }
+        return null;
+    }
+
+    private void apply(Campaign campaign, CampaignRequest request) {
+        campaign.setName(request.name().trim());
+        campaign.setChannel(request.channel());
+        campaign.setSubject(trimToNull(request.subject()));
+        campaign.setBody(request.body());
+        campaign.setTargetGroupId(request.targetGroupId());
+        campaign.setScheduledAt(request.scheduledAt());
+        campaign.setDailyLimit(request.dailyLimit());
+    }
+
+    private Campaign requireCampaign(Long id) {
+        return campaignRepository.findById(id)
+                .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Kampania nie istnieje"));
+    }
+
+    private TargetGroup requireGroup(Long id) {
+        return targetGroupRepository.findById(id)
+                .orElseThrow(() -> new ResponseStatusException(HttpStatus.BAD_REQUEST, "Wskazana grupa docelowa nie istnieje"));
+    }
+
+    private CampaignResponse toResponse(Campaign campaign) {
+        long total = recipientRepository.findByCampaignId(campaign.getId()).size();
+        long sent = recipientRepository.countByCampaignIdAndStatus(campaign.getId(), RecipientStatus.SENT)
+                + recipientRepository.countByCampaignIdAndStatus(campaign.getId(), RecipientStatus.DELIVERED);
+        return CampaignResponse.from(campaign, total, sent);
+    }
+
+    private static boolean hasText(String value) {
+        return value != null && !value.trim().isEmpty();
+    }
+
+    private static String trimToNull(String value) {
+        if (value == null) {
+            return null;
+        }
+        String trimmed = value.trim();
+        return trimmed.isEmpty() ? null : trimmed;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/CampaignStatsResponse.java b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignStatsResponse.java
new file mode 100644
index 0000000..1e258f4
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignStatsResponse.java
@@ -0,0 +1,15 @@
+package pl.polskalokalnie.campaign;
+
+/**
+ * Statystyki kampanii - agregat licznosci pozycji outboxu wg statusu.
+ */
+public record CampaignStatsResponse(
+        long total,
+        long queued,
+        long sent,
+        long delivered,
+        long failed,
+        long bounced,
+        long optedOut
+) {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/CampaignStatus.java b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignStatus.java
new file mode 100644
index 0000000..bf1d074
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/CampaignStatus.java
@@ -0,0 +1,14 @@
+package pl.polskalokalnie.campaign;
+
+/**
+ * Cykl zycia kampanii. SENDING oznacza, ze outbox jest przetwarzany przez workera z limitem
+ * dziennym; PAUSED wstrzymuje wysylke bez utraty postepu; COMPLETED - caly outbox rozliczony.
+ */
+public enum CampaignStatus {
+    DRAFT,
+    SCHEDULED,
+    SENDING,
+    PAUSED,
+    COMPLETED,
+    CANCELLED
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/Channel.java b/backend/src/main/java/pl/polskalokalnie/campaign/Channel.java
new file mode 100644
index 0000000..cc5aa1e
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/Channel.java
@@ -0,0 +1,6 @@
+package pl.polskalokalnie.campaign;
+
+public enum Channel {
+    EMAIL,
+    SMS
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/campaign/RecipientStatus.java b/backend/src/main/java/pl/polskalokalnie/campaign/RecipientStatus.java
new file mode 100644
index 0000000..d1b0c50
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/campaign/RecipientStatus.java
@@ -0,0 +1,15 @@
+package pl.polskalokalnie.campaign;
+
+/**
+ * Status pojedynczej pozycji outboxu kampanii. QUEUED czeka na wysylke; SENT wyslane do
+ * dostawcy; DELIVERED potwierdzone; FAILED/BOUNCED bledy; OPTED_OUT - odbiorca zrezygnowal
+ * przed wysylka i zostal pominiety.
+ */
+public enum RecipientStatus {
+    QUEUED,
+    SENT,
+    DELIVERED,
+    FAILED,
+    BOUNCED,
+    OPTED_OUT
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/config/LeadBackfillRunner.java b/backend/src/main/java/pl/polskalokalnie/config/LeadBackfillRunner.java
new file mode 100644
index 0000000..0c1eebd
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/config/LeadBackfillRunner.java
@@ -0,0 +1,39 @@
+package pl.polskalokalnie.config;
+
+import org.springframework.boot.ApplicationRunner;
+import org.springframework.boot.ApplicationArguments;
+import org.springframework.core.annotation.Order;
+import org.springframework.stereotype.Component;
+import pl.polskalokalnie.lead.LeadRepository;
+import pl.polskalokalnie.lead.LeadSyncService;
+import pl.polskalokalnie.user.UserRepository;
+
+/**
+ * Jednorazowy backfill: zakłada leady REGISTERED_USER dla istniejących kont, które ich jeszcze
+ * nie mają. Kolejne rejestracje/aktualizacje profilu utrzymują synchronizację na bieżąco.
+ * Uruchamia się po SchemaFixer, żeby tabele leadów były już gotowe.
+ */
+@Component
+@Order(100)
+public class LeadBackfillRunner implements ApplicationRunner {
+
+    private final UserRepository userRepository;
+    private final LeadRepository leadRepository;
+    private final LeadSyncService leadSyncService;
+
+    public LeadBackfillRunner(UserRepository userRepository, LeadRepository leadRepository,
+            LeadSyncService leadSyncService) {
+        this.userRepository = userRepository;
+        this.leadRepository = leadRepository;
+        this.leadSyncService = leadSyncService;
+    }
+
+    @Override
+    public void run(ApplicationArguments args) {
+        userRepository.findAll().forEach(user -> {
+            if (leadRepository.findByUserId(user.getId()).isEmpty()) {
+                leadSyncService.syncUser(user);
+            }
+        });
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/ImportResultResponse.java b/backend/src/main/java/pl/polskalokalnie/lead/ImportResultResponse.java
new file mode 100644
index 0000000..dd79db3
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/ImportResultResponse.java
@@ -0,0 +1,13 @@
+package pl.polskalokalnie.lead;
+
+import java.util.List;
+
+/**
+ * Podsumowanie importu: ile dodano, ile pominieto (duplikaty/braki) oraz komunikaty diagnostyczne.
+ */
+public record ImportResultResponse(
+        int imported,
+        int skipped,
+        List<String> messages
+) {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/Lead.java b/backend/src/main/java/pl/polskalokalnie/lead/Lead.java
new file mode 100644
index 0000000..8f9ce06
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/Lead.java
@@ -0,0 +1,211 @@
+package pl.polskalokalnie.lead;
+
+import jakarta.persistence.CollectionTable;
+import jakarta.persistence.Column;
+import jakarta.persistence.ElementCollection;
+import jakarta.persistence.Entity;
+import jakarta.persistence.EnumType;
+import jakarta.persistence.Enumerated;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.Index;
+import jakarta.persistence.JoinColumn;
+import jakarta.persistence.PrePersist;
+import jakarta.persistence.Table;
+import java.time.Instant;
+import java.util.ArrayList;
+import java.util.List;
+import org.hibernate.annotations.ColumnDefault;
+
+/**
+ * Kontakt marketingowy (lead) - jedno zrodlo prawdy dla odbiorcow kampanii. Zasilany z trzech
+ * zrodel: zarejestrowani uzytkownicy (synchronizacja), reczne dodanie/import oraz formularze.
+ * Zgody ({@code emailConsent}/{@code smsConsent}) i trwale rezygnacje ({@code emailOptOut}/
+ * {@code smsOptOut}) decyduja o kwalifikacji leada do wysylki na danym kanale.
+ */
+@Entity
+@Table(name = "leads", indexes = {
+        @Index(name = "idx_leads_email", columnList = "email"),
+        @Index(name = "idx_leads_phone", columnList = "phone"),
+        @Index(name = "idx_leads_user_id", columnList = "userId")
+})
+public class Lead {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(length = 160)
+    private String name;
+
+    @Column(length = 180)
+    private String email;
+
+    @Column(length = 30)
+    private String phone;
+
+    @Column(length = 120)
+    private String city;
+
+    @Enumerated(EnumType.STRING)
+    @Column(nullable = false, length = 20)
+    private LeadSource source = LeadSource.MANUAL;
+
+    // Powiazanie z kontem uzytkownika, gdy source = REGISTERED_USER.
+    private Long userId;
+
+    @Enumerated(EnumType.STRING)
+    @Column(nullable = false, length = 20)
+    @ColumnDefault("'NEW'")
+    private LeadStatus status = LeadStatus.NEW;
+
+    // EAGER: tagi sa male i zawsze potrzebne w filtrach segmentow oraz odpowiedziach DTO
+    // (mapowanie odbywa sie poza sesja, bo open-in-view=false).
+    @ElementCollection(fetch = jakarta.persistence.FetchType.EAGER)
+    @CollectionTable(name = "lead_tags", joinColumns = @JoinColumn(name = "lead_id"))
+    @Column(name = "tag", length = 60)
+    private List<String> tags = new ArrayList<>();
+
+    @Column(nullable = false)
+    @ColumnDefault("true")
+    private boolean emailConsent = true;
+
+    @Column(nullable = false)
+    @ColumnDefault("true")
+    private boolean smsConsent = true;
+
+    // Trwala rezygnacja - raz ustawiona nie jest cofana przez kampanie ani synchronizacje.
+    @Column(nullable = false)
+    @ColumnDefault("false")
+    private boolean emailOptOut = false;
+
+    @Column(nullable = false)
+    @ColumnDefault("false")
+    private boolean smsOptOut = false;
+
+    @Column(length = 2000)
+    private String notes;
+
+    @Column(nullable = false, updatable = false)
+    private Instant createdAt;
+
+    @PrePersist
+    void onCreate() {
+        if (createdAt == null) {
+            createdAt = Instant.now();
+        }
+    }
+
+    public Long getId() {
+        return id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getEmail() {
+        return email;
+    }
+
+    public void setEmail(String email) {
+        this.email = email;
+    }
+
+    public String getPhone() {
+        return phone;
+    }
+
+    public void setPhone(String phone) {
+        this.phone = phone;
+    }
+
+    public String getCity() {
+        return city;
+    }
+
+    public void setCity(String city) {
+        this.city = city;
+    }
+
+    public LeadSource getSource() {
+        return source;
+    }
+
+    public void setSource(LeadSource source) {
+        this.source = source;
+    }
+
+    public Long getUserId() {
+        return userId;
+    }
+
+    public void setUserId(Long userId) {
+        this.userId = userId;
+    }
+
+    public LeadStatus getStatus() {
+        return status;
+    }
+
+    public void setStatus(LeadStatus status) {
+        this.status = status;
+    }
+
+    public List<String> getTags() {
+        return tags;
+    }
+
+    public void setTags(List<String> tags) {
+        this.tags = tags;
+    }
+
+    public boolean isEmailConsent() {
+        return emailConsent;
+    }
+
+    public void setEmailConsent(boolean emailConsent) {
+        this.emailConsent = emailConsent;
+    }
+
+    public boolean isSmsConsent() {
+        return smsConsent;
+    }
+
+    public void setSmsConsent(boolean smsConsent) {
+        this.smsConsent = smsConsent;
+    }
+
+    public boolean isEmailOptOut() {
+        return emailOptOut;
+    }
+
+    public void setEmailOptOut(boolean emailOptOut) {
+        this.emailOptOut = emailOptOut;
+    }
+
+    public boolean isSmsOptOut() {
+        return smsOptOut;
+    }
+
+    public void setSmsOptOut(boolean smsOptOut) {
+        this.smsOptOut = smsOptOut;
+    }
+
+    public String getNotes() {
+        return notes;
+    }
+
+    public void setNotes(String notes) {
+        this.notes = notes;
+    }
+
+    public Instant getCreatedAt() {
+        return createdAt;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/LeadController.java b/backend/src/main/java/pl/polskalokalnie/lead/LeadController.java
new file mode 100644
index 0000000..dfa9c87
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/LeadController.java
@@ -0,0 +1,61 @@
+package pl.polskalokalnie.lead;
+
+import jakarta.validation.Valid;
+import java.util.List;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PatchMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseStatus;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * Zarzadzanie baza leadow z panelu administratora. Ochrona przez regule /api/admin/** w
+ * SecurityConfig (rola ADMIN).
+ */
+@RestController
+@RequestMapping("/api/admin/leads")
+public class LeadController {
+
+    private final LeadService leadService;
+
+    public LeadController(LeadService leadService) {
+        this.leadService = leadService;
+    }
+
+    @GetMapping
+    public List<LeadResponse> list(
+            @RequestParam(required = false) LeadSource source,
+            @RequestParam(required = false) String search
+    ) {
+        return leadService.list(source, search);
+    }
+
+    @PostMapping
+    @ResponseStatus(HttpStatus.CREATED)
+    public LeadResponse create(@Valid @RequestBody LeadCreateRequest request) {
+        return leadService.create(request);
+    }
+
+    @PostMapping("/import")
+    public ImportResultResponse importCsv(@Valid @RequestBody LeadImportRequest request) {
+        return leadService.importCsv(request);
+    }
+
+    @PatchMapping("/{id}")
+    public LeadResponse update(@PathVariable Long id, @Valid @RequestBody LeadUpdateRequest request) {
+        return leadService.update(id, request);
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseEntity<Void> delete(@PathVariable Long id) {
+        leadService.delete(id);
+        return ResponseEntity.noContent().build();
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/LeadCreateRequest.java b/backend/src/main/java/pl/polskalokalnie/lead/LeadCreateRequest.java
new file mode 100644
index 0000000..35bc08b
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/LeadCreateRequest.java
@@ -0,0 +1,19 @@
+package pl.polskalokalnie.lead;
+
+import java.util.List;
+
+/**
+ * Reczne dodanie leada. Wymagany jest przynajmniej e-mail lub telefon - walidacja w serwisie,
+ * bo zalezy od obu pol naraz.
+ */
+public record LeadCreateRequest(
+        String name,
+        String email,
+        String phone,
+        String city,
+        List<String> tags,
+        Boolean emailConsent,
+        Boolean smsConsent,
+        String notes
+) {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/LeadImportRequest.java b/backend/src/main/java/pl/polskalokalnie/lead/LeadImportRequest.java
new file mode 100644
index 0000000..b744cf6
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/LeadImportRequest.java
@@ -0,0 +1,14 @@
+package pl.polskalokalnie.lead;
+
+import jakarta.validation.constraints.NotBlank;
+
+/**
+ * Import listy kontaktow. Klient przesyla surowa tresc CSV (lub liste wierszy oddzielonych
+ * srednikami/przecinkami). Parsowanie i deduplikacja odbywa sie w serwisie.
+ * Oczekiwane kolumny: name;email;phone;city (naglowek opcjonalny).
+ */
+public record LeadImportRequest(
+        @NotBlank String csv,
+        String defaultTag
+) {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/LeadQueryService.java b/backend/src/main/java/pl/polskalokalnie/lead/LeadQueryService.java
new file mode 100644
index 0000000..ea310c1
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/LeadQueryService.java
@@ -0,0 +1,77 @@
+package pl.polskalokalnie.lead;
+
+import java.util.List;
+import org.springframework.stereotype.Service;
+
+/**
+ * Wylicza czlonkow grupy docelowej (dynamicznego segmentu) na podstawie zapisanych kryteriow.
+ * Puste kryterium = brak ograniczenia. Nie wyklucza tu rezygnacji (opt-out) ani braku adresu -
+ * to robi budowa kampanii, bo zalezy od kanalu (e-mail vs SMS).
+ */
+@Service
+public class LeadQueryService {
+
+    private final LeadRepository leadRepository;
+
+    public LeadQueryService(LeadRepository leadRepository) {
+        this.leadRepository = leadRepository;
+    }
+
+    public List<Lead> resolve(TargetGroup group) {
+        return leadRepository.findAll().stream()
+                .filter(lead -> matches(lead, group))
+                .toList();
+    }
+
+    public long count(TargetGroup group) {
+        return leadRepository.findAll().stream()
+                .filter(lead -> matches(lead, group))
+                .count();
+    }
+
+    private boolean matches(Lead lead, TargetGroup group) {
+        if (group.getSources() != null && !group.getSources().isEmpty()
+                && !group.getSources().contains(lead.getSource())) {
+            return false;
+        }
+        if (hasText(group.getCity())
+                && (lead.getCity() == null || !lead.getCity().trim().equalsIgnoreCase(group.getCity().trim()))) {
+            return false;
+        }
+        if (hasText(group.getTag()) && !containsTagIgnoreCase(lead.getTags(), group.getTag().trim())) {
+            return false;
+        }
+        if (group.getStatus() != null && lead.getStatus() != group.getStatus()) {
+            return false;
+        }
+        if (group.isRequireEmail() && !hasText(lead.getEmail())) {
+            return false;
+        }
+        if (group.isRequirePhone() && !hasText(lead.getPhone())) {
+            return false;
+        }
+        if (group.isRequireEmailConsent() && !lead.isEmailConsent()) {
+            return false;
+        }
+        if (group.isRequireSmsConsent() && !lead.isSmsConsent()) {
+            return false;
+        }
+        return true;
+    }
+
+    private static boolean containsTagIgnoreCase(List<String> tags, String tag) {
+        if (tags == null) {
+            return false;
+        }
+        for (String candidate : tags) {
+            if (candidate != null && candidate.trim().equalsIgnoreCase(tag)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private static boolean hasText(String value) {
+        return value != null && !value.trim().isEmpty();
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/LeadRepository.java b/backend/src/main/java/pl/polskalokalnie/lead/LeadRepository.java
new file mode 100644
index 0000000..41353a4
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/LeadRepository.java
@@ -0,0 +1,15 @@
+package pl.polskalokalnie.lead;
+
+import java.util.Optional;
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface LeadRepository extends JpaRepository<Lead, Long> {
+
+    Optional<Lead> findByUserId(Long userId);
+
+    Optional<Lead> findFirstByEmailIgnoreCase(String email);
+
+    Optional<Lead> findFirstByPhone(String phone);
+
+    boolean existsByEmailIgnoreCase(String email);
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/LeadResponse.java b/backend/src/main/java/pl/polskalokalnie/lead/LeadResponse.java
new file mode 100644
index 0000000..45b0576
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/LeadResponse.java
@@ -0,0 +1,42 @@
+package pl.polskalokalnie.lead;
+
+import java.time.Instant;
+import java.util.List;
+
+public record LeadResponse(
+        Long id,
+        String name,
+        String email,
+        String phone,
+        String city,
+        LeadSource source,
+        Long userId,
+        LeadStatus status,
+        List<String> tags,
+        boolean emailConsent,
+        boolean smsConsent,
+        boolean emailOptOut,
+        boolean smsOptOut,
+        String notes,
+        Instant createdAt
+) {
+    public static LeadResponse from(Lead lead) {
+        return new LeadResponse(
+                lead.getId(),
+                lead.getName(),
+                lead.getEmail(),
+                lead.getPhone(),
+                lead.getCity(),
+                lead.getSource(),
+                lead.getUserId(),
+                lead.getStatus(),
+                List.copyOf(lead.getTags()),
+                lead.isEmailConsent(),
+                lead.isSmsConsent(),
+                lead.isEmailOptOut(),
+                lead.isSmsOptOut(),
+                lead.getNotes(),
+                lead.getCreatedAt()
+        );
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/LeadService.java b/backend/src/main/java/pl/polskalokalnie/lead/LeadService.java
new file mode 100644
index 0000000..c43add4
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/LeadService.java
@@ -0,0 +1,228 @@
+package pl.polskalokalnie.lead;
+
+import java.util.ArrayList;
+import java.util.Comparator;
+import java.util.LinkedHashSet;
+import java.util.List;
+import java.util.Locale;
+import java.util.Set;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.server.ResponseStatusException;
+
+/**
+ * Logika bazy leadow: listowanie z filtrami, reczne dodawanie, import listy, edycja i usuwanie.
+ * Deduplikacja po e-mailu i telefonie, dzieki czemu import i synchronizacja userow nie tworza
+ * podwojnych kontaktow.
+ */
+@Service
+public class LeadService {
+
+    private final LeadRepository leadRepository;
+
+    public LeadService(LeadRepository leadRepository) {
+        this.leadRepository = leadRepository;
+    }
+
+    public List<LeadResponse> list(LeadSource source, String search) {
+        String needle = search == null ? "" : search.trim().toLowerCase(Locale.ROOT);
+        return leadRepository.findAll().stream()
+                .filter(lead -> source == null || lead.getSource() == source)
+                .filter(lead -> needle.isEmpty() || matchesSearch(lead, needle))
+                .sorted(Comparator.comparing(Lead::getCreatedAt).reversed())
+                .map(LeadResponse::from)
+                .toList();
+    }
+
+    @Transactional
+    public LeadResponse create(LeadCreateRequest request) {
+        String email = normalizeEmail(request.email());
+        String phone = normalizePhone(request.phone());
+        if (email == null && phone == null) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Podaj co najmniej e-mail lub telefon");
+        }
+        if (email != null && leadRepository.findFirstByEmailIgnoreCase(email).isPresent()) {
+            throw new ResponseStatusException(HttpStatus.CONFLICT, "Lead z tym adresem e-mail już istnieje");
+        }
+        if (phone != null && leadRepository.findFirstByPhone(phone).isPresent()) {
+            throw new ResponseStatusException(HttpStatus.CONFLICT, "Lead z tym numerem telefonu już istnieje");
+        }
+
+        Lead lead = new Lead();
+        lead.setSource(LeadSource.MANUAL);
+        lead.setName(trimToNull(request.name()));
+        lead.setEmail(email);
+        lead.setPhone(phone);
+        lead.setCity(trimToNull(request.city()));
+        lead.setTags(cleanTags(request.tags()));
+        lead.setEmailConsent(request.emailConsent() == null || request.emailConsent());
+        lead.setSmsConsent(request.smsConsent() == null || request.smsConsent());
+        lead.setNotes(trimToNull(request.notes()));
+        return LeadResponse.from(leadRepository.save(lead));
+    }
+
+    @Transactional
+    public LeadResponse update(Long id, LeadUpdateRequest request) {
+        Lead lead = requireLead(id);
+        if (request.name() != null) {
+            lead.setName(trimToNull(request.name()));
+        }
+        if (request.email() != null) {
+            String email = normalizeEmail(request.email());
+            if (email != null) {
+                leadRepository.findFirstByEmailIgnoreCase(email)
+                        .filter(other -> !other.getId().equals(lead.getId()))
+                        .ifPresent(other -> {
+                            throw new ResponseStatusException(HttpStatus.CONFLICT, "Inny lead ma już ten e-mail");
+                        });
+            }
+            lead.setEmail(email);
+        }
+        if (request.phone() != null) {
+            lead.setPhone(normalizePhone(request.phone()));
+        }
+        if (request.city() != null) {
+            lead.setCity(trimToNull(request.city()));
+        }
+        if (request.status() != null) {
+            lead.setStatus(request.status());
+        }
+        if (request.tags() != null) {
+            lead.setTags(cleanTags(request.tags()));
+        }
+        if (request.emailConsent() != null) {
+            lead.setEmailConsent(request.emailConsent());
+        }
+        if (request.smsConsent() != null) {
+            lead.setSmsConsent(request.smsConsent());
+        }
+        // Opt-out to trwala rezygnacja - ustawiamy wylacznie na true, nie cofamy z panelu.
+        if (Boolean.TRUE.equals(request.emailOptOut())) {
+            lead.setEmailOptOut(true);
+        }
+        if (Boolean.TRUE.equals(request.smsOptOut())) {
+            lead.setSmsOptOut(true);
+        }
+        if (request.notes() != null) {
+            lead.setNotes(trimToNull(request.notes()));
+        }
+        return LeadResponse.from(leadRepository.save(lead));
+    }
+
+    @Transactional
+    public void delete(Long id) {
+        Lead lead = requireLead(id);
+        leadRepository.delete(lead);
+    }
+
+    @Transactional
+    public ImportResultResponse importCsv(LeadImportRequest request) {
+        List<String> messages = new ArrayList<>();
+        int imported = 0;
+        int skipped = 0;
+        String defaultTag = trimToNull(request.defaultTag());
+
+        String[] lines = request.csv().replace("\r\n", "\n").replace("\r", "\n").split("\n");
+        int lineNumber = 0;
+        for (String rawLine : lines) {
+            lineNumber++;
+            String line = rawLine.trim();
+            if (line.isEmpty()) {
+                continue;
+            }
+            String[] parts = line.split("[;,\t]", -1);
+            String header = parts.length > 0 ? parts[0].trim().toLowerCase(Locale.ROOT) : "";
+            // Pomijamy wiersz naglowka, jesli wyglada na etykiety kolumn.
+            if (lineNumber == 1 && (header.equals("name") || header.equals("imie") || header.equals("imię")
+                    || header.equals("nazwa") || header.contains("email") || header.contains("e-mail"))) {
+                continue;
+            }
+
+            String name = parts.length > 0 ? trimToNull(parts[0]) : null;
+            String email = normalizeEmail(parts.length > 1 ? parts[1] : null);
+            String phone = normalizePhone(parts.length > 2 ? parts[2] : null);
+            String city = parts.length > 3 ? trimToNull(parts[3]) : null;
+
+            if (email == null && phone == null) {
+                skipped++;
+                messages.add("Wiersz " + lineNumber + ": pominięto (brak e-maila i telefonu)");
+                continue;
+            }
+            if (email != null && leadRepository.findFirstByEmailIgnoreCase(email).isPresent()) {
+                skipped++;
+                messages.add("Wiersz " + lineNumber + ": pominięto (e-mail już istnieje)");
+                continue;
+            }
+            if (phone != null && leadRepository.findFirstByPhone(phone).isPresent()) {
+                skipped++;
+                messages.add("Wiersz " + lineNumber + ": pominięto (telefon już istnieje)");
+                continue;
+            }
+
+            Lead lead = new Lead();
+            lead.setSource(LeadSource.IMPORT);
+            lead.setName(name);
+            lead.setEmail(email);
+            lead.setPhone(phone);
+            lead.setCity(city);
+            if (defaultTag != null) {
+                lead.setTags(new ArrayList<>(List.of(defaultTag)));
+            }
+            leadRepository.save(lead);
+            imported++;
+        }
+        return new ImportResultResponse(imported, skipped, messages);
+    }
+
+    private Lead requireLead(Long id) {
+        return leadRepository.findById(id)
+                .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Lead nie istnieje"));
+    }
+
+    private static boolean matchesSearch(Lead lead, String needle) {
+        return contains(lead.getName(), needle)
+                || contains(lead.getEmail(), needle)
+                || contains(lead.getPhone(), needle)
+                || contains(lead.getCity(), needle);
+    }
+
+    private static boolean contains(String value, String needle) {
+        return value != null && value.toLowerCase(Locale.ROOT).contains(needle);
+    }
+
+    private static List<String> cleanTags(List<String> tags) {
+        List<String> cleaned = new ArrayList<>();
+        if (tags != null) {
+            Set<String> seen = new LinkedHashSet<>();
+            for (String tag : tags) {
+                String trimmed = trimToNull(tag);
+                if (trimmed != null && seen.add(trimmed.toLowerCase(Locale.ROOT))) {
+                    cleaned.add(trimmed);
+                }
+            }
+        }
+        return cleaned;
+    }
+
+    private static String normalizeEmail(String email) {
+        String trimmed = trimToNull(email);
+        return trimmed == null ? null : trimmed.toLowerCase(Locale.ROOT);
+    }
+
+    private static String normalizePhone(String phone) {
+        if (phone == null) {
+            return null;
+        }
+        String cleaned = phone.replaceAll("[\\s\\-()]", "").trim();
+        return cleaned.isEmpty() ? null : cleaned;
+    }
+
+    private static String trimToNull(String value) {
+        if (value == null) {
+            return null;
+        }
+        String trimmed = value.trim();
+        return trimmed.isEmpty() ? null : trimmed;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/LeadSource.java b/backend/src/main/java/pl/polskalokalnie/lead/LeadSource.java
new file mode 100644
index 0000000..6958e36
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/LeadSource.java
@@ -0,0 +1,12 @@
+package pl.polskalokalnie.lead;
+
+/**
+ * Zrodlo pochodzenia leada. REGISTERED_USER jest synchronizowany z kontem uzytkownika,
+ * pozostale powstaja recznie, przez import listy lub z formularzy na stronie.
+ */
+public enum LeadSource {
+    REGISTERED_USER,
+    MANUAL,
+    IMPORT,
+    FORM
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/LeadStatus.java b/backend/src/main/java/pl/polskalokalnie/lead/LeadStatus.java
new file mode 100644
index 0000000..cc9c57d
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/LeadStatus.java
@@ -0,0 +1,12 @@
+package pl.polskalokalnie.lead;
+
+/**
+ * Status kontaktu w lejku marketingowym. RESPONDED oznacza, ze lead odpowiedzial - takie
+ * kontakty mozna wykluczyc z kolejnych wysylek.
+ */
+public enum LeadStatus {
+    NEW,
+    CONTACTED,
+    RESPONDED,
+    UNSUBSCRIBED
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/LeadSyncService.java b/backend/src/main/java/pl/polskalokalnie/lead/LeadSyncService.java
new file mode 100644
index 0000000..6e208e1
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/LeadSyncService.java
@@ -0,0 +1,63 @@
+package pl.polskalokalnie.lead;
+
+import java.util.Locale;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import pl.polskalokalnie.user.AppUser;
+
+/**
+ * Utrzymuje leady typu REGISTERED_USER w zgodzie z kontami uzytkownikow. Wolane przy rejestracji
+ * i aktualizacji profilu oraz przez backfill przy starcie aplikacji. Zgody marketingowe (mail/SMS)
+ * uzytkownika przechowujemy na jego leadzie - to jedno zrodlo prawdy dla kwalifikacji do kampanii.
+ */
+@Service
+public class LeadSyncService {
+
+    private final LeadRepository leadRepository;
+
+    public LeadSyncService(LeadRepository leadRepository) {
+        this.leadRepository = leadRepository;
+    }
+
+    @Transactional
+    public Lead syncUser(AppUser user) {
+        if (user == null || user.getId() == null) {
+            return null;
+        }
+        Lead lead = leadRepository.findByUserId(user.getId())
+                .orElseGet(() -> leadRepository.findFirstByEmailIgnoreCase(user.getEmail()).orElseGet(Lead::new));
+
+        lead.setSource(LeadSource.REGISTERED_USER);
+        lead.setUserId(user.getId());
+        lead.setName(user.getFullName());
+        lead.setEmail(user.getEmail() == null ? null : user.getEmail().toLowerCase(Locale.ROOT));
+        lead.setPhone(normalizePhone(user.getPhone()));
+        return leadRepository.save(lead);
+    }
+
+    /**
+     * Zwraca lead powiazany z uzytkownikiem, tworzac go w razie potrzeby - uzywane przez ekran
+     * zgod marketingowych uzytkownika.
+     */
+    @Transactional
+    public Lead getOrCreateForUser(AppUser user) {
+        Lead lead = leadRepository.findByUserId(user.getId()).orElse(null);
+        return lead != null ? lead : syncUser(user);
+    }
+
+    @Transactional
+    public Lead updateConsentForUser(AppUser user, boolean emailConsent, boolean smsConsent) {
+        Lead lead = getOrCreateForUser(user);
+        lead.setEmailConsent(emailConsent);
+        lead.setSmsConsent(smsConsent);
+        return leadRepository.save(lead);
+    }
+
+    private static String normalizePhone(String phone) {
+        if (phone == null) {
+            return null;
+        }
+        String cleaned = phone.replaceAll("[\\s\\-()]", "").trim();
+        return cleaned.isEmpty() ? null : cleaned;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/LeadUpdateRequest.java b/backend/src/main/java/pl/polskalokalnie/lead/LeadUpdateRequest.java
new file mode 100644
index 0000000..2ade1ff
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/LeadUpdateRequest.java
@@ -0,0 +1,22 @@
+package pl.polskalokalnie.lead;
+
+import java.util.List;
+
+/**
+ * Aktualizacja leada z panelu. Pola null pozostawiaja dotychczasowa wartosc; kolekcja tagow i
+ * flagi zgod, gdy podane, nadpisuja stan. Opt-out ustawiamy tylko na true (trwala rezygnacja).
+ */
+public record LeadUpdateRequest(
+        String name,
+        String email,
+        String phone,
+        String city,
+        LeadStatus status,
+        List<String> tags,
+        Boolean emailConsent,
+        Boolean smsConsent,
+        Boolean emailOptOut,
+        Boolean smsOptOut,
+        String notes
+) {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/MarketingConsentController.java b/backend/src/main/java/pl/polskalokalnie/lead/MarketingConsentController.java
new file mode 100644
index 0000000..7bc69fc
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/MarketingConsentController.java
@@ -0,0 +1,74 @@
+package pl.polskalokalnie.lead;
+
+import jakarta.validation.constraints.NotNull;
+import org.springframework.http.HttpStatus;
+import org.springframework.security.core.Authentication;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.server.ResponseStatusException;
+import pl.polskalokalnie.user.AppUser;
+import pl.polskalokalnie.user.UserRepository;
+
+/**
+ * Zgody marketingowe zalogowanego uzytkownika. Zapisywane na leadzie powiazanym z kontem, dzieki
+ * czemu realnie steruja kwalifikacja uzytkownika jako odbiorcy kampanii. Endpoint wymaga
+ * uwierzytelnienia (regula anyRequest().authenticated() w SecurityConfig).
+ */
+@RestController
+@RequestMapping("/api/me/marketing")
+public class MarketingConsentController {
+
+    private final UserRepository userRepository;
+    private final LeadSyncService leadSyncService;
+
+    public MarketingConsentController(UserRepository userRepository, LeadSyncService leadSyncService) {
+        this.userRepository = userRepository;
+        this.leadSyncService = leadSyncService;
+    }
+
+    @GetMapping
+    public MarketingConsentResponse get(Authentication authentication) {
+        AppUser user = currentUser(authentication);
+        Lead lead = leadSyncService.getOrCreateForUser(user);
+        return MarketingConsentResponse.from(lead);
+    }
+
+    @PutMapping
+    public MarketingConsentResponse update(Authentication authentication, @RequestBody MarketingConsentRequest request) {
+        AppUser user = currentUser(authentication);
+        Lead lead = leadSyncService.updateConsentForUser(user,
+                Boolean.TRUE.equals(request.emailConsent()),
+                Boolean.TRUE.equals(request.smsConsent()));
+        return MarketingConsentResponse.from(lead);
+    }
+
+    private AppUser currentUser(Authentication authentication) {
+        return userRepository.findByEmailIgnoreCase(authentication.getName())
+                .orElseThrow(() -> new ResponseStatusException(HttpStatus.UNAUTHORIZED, "Sesja wygasła"));
+    }
+
+    public record MarketingConsentRequest(
+            @NotNull Boolean emailConsent,
+            @NotNull Boolean smsConsent
+    ) {
+    }
+
+    public record MarketingConsentResponse(
+            boolean emailConsent,
+            boolean smsConsent,
+            boolean emailOptOut,
+            boolean smsOptOut
+    ) {
+        static MarketingConsentResponse from(Lead lead) {
+            return new MarketingConsentResponse(
+                    lead.isEmailConsent(),
+                    lead.isSmsConsent(),
+                    lead.isEmailOptOut(),
+                    lead.isSmsOptOut()
+            );
+        }
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/TargetGroup.java b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroup.java
new file mode 100644
index 0000000..3058aab
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroup.java
@@ -0,0 +1,165 @@
+package pl.polskalokalnie.lead;
+
+import jakarta.persistence.CollectionTable;
+import jakarta.persistence.Column;
+import jakarta.persistence.ElementCollection;
+import jakarta.persistence.Entity;
+import jakarta.persistence.EnumType;
+import jakarta.persistence.Enumerated;
+import jakarta.persistence.GeneratedValue;
+import jakarta.persistence.GenerationType;
+import jakarta.persistence.Id;
+import jakarta.persistence.JoinColumn;
+import jakarta.persistence.PrePersist;
+import jakarta.persistence.Table;
+import java.time.Instant;
+import java.util.LinkedHashSet;
+import java.util.Set;
+
+/**
+ * Grupa docelowa jako dynamiczny segment - przechowuje zestaw kryteriow filtra, a nie zamrozona
+ * liste leadow. Czlonkowie wyliczaja sie na biezaco w {@link LeadQueryService} przy podgladzie
+ * i przy starcie kampanii. Puste kryterium oznacza brak ograniczenia dla danego pola.
+ */
+@Entity
+@Table(name = "target_groups")
+public class TargetGroup {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(nullable = false, length = 140)
+    private String name;
+
+    @Column(length = 400)
+    private String description;
+
+    // EAGER: zbior zrodel jest maly i zawsze uzywany przy wyliczaniu segmentu oraz w DTO
+    // (mapowanie poza sesja - open-in-view=false).
+    @ElementCollection(fetch = jakarta.persistence.FetchType.EAGER)
+    @CollectionTable(name = "target_group_sources", joinColumns = @JoinColumn(name = "group_id"))
+    @Column(name = "source", length = 20)
+    @Enumerated(EnumType.STRING)
+    private Set<LeadSource> sources = new LinkedHashSet<>();
+
+    @Column(length = 120)
+    private String city;
+
+    @Column(length = 60)
+    private String tag;
+
+    @Enumerated(EnumType.STRING)
+    @Column(length = 20)
+    private LeadStatus status;
+
+    @Column(nullable = false)
+    private boolean requireEmail = false;
+
+    @Column(nullable = false)
+    private boolean requirePhone = false;
+
+    @Column(nullable = false)
+    private boolean requireEmailConsent = false;
+
+    @Column(nullable = false)
+    private boolean requireSmsConsent = false;
+
+    @Column(nullable = false, updatable = false)
+    private Instant createdAt;
+
+    @PrePersist
+    void onCreate() {
+        if (createdAt == null) {
+            createdAt = Instant.now();
+        }
+    }
+
+    public Long getId() {
+        return id;
+    }
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getDescription() {
+        return description;
+    }
+
+    public void setDescription(String description) {
+        this.description = description;
+    }
+
+    public Set<LeadSource> getSources() {
+        return sources;
+    }
+
+    public void setSources(Set<LeadSource> sources) {
+        this.sources = sources;
+    }
+
+    public String getCity() {
+        return city;
+    }
+
+    public void setCity(String city) {
+        this.city = city;
+    }
+
+    public String getTag() {
+        return tag;
+    }
+
+    public void setTag(String tag) {
+        this.tag = tag;
+    }
+
+    public LeadStatus getStatus() {
+        return status;
+    }
+
+    public void setStatus(LeadStatus status) {
+        this.status = status;
+    }
+
+    public boolean isRequireEmail() {
+        return requireEmail;
+    }
+
+    public void setRequireEmail(boolean requireEmail) {
+        this.requireEmail = requireEmail;
+    }
+
+    public boolean isRequirePhone() {
+        return requirePhone;
+    }
+
+    public void setRequirePhone(boolean requirePhone) {
+        this.requirePhone = requirePhone;
+    }
+
+    public boolean isRequireEmailConsent() {
+        return requireEmailConsent;
+    }
+
+    public void setRequireEmailConsent(boolean requireEmailConsent) {
+        this.requireEmailConsent = requireEmailConsent;
+    }
+
+    public boolean isRequireSmsConsent() {
+        return requireSmsConsent;
+    }
+
+    public void setRequireSmsConsent(boolean requireSmsConsent) {
+        this.requireSmsConsent = requireSmsConsent;
+    }
+
+    public Instant getCreatedAt() {
+        return createdAt;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupController.java b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupController.java
new file mode 100644
index 0000000..9e77d26
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupController.java
@@ -0,0 +1,56 @@
+package pl.polskalokalnie.lead;
+
+import jakarta.validation.Valid;
+import java.util.List;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.DeleteMapping;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.ResponseStatus;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * Grupy docelowe (dynamiczne segmenty) w panelu administratora.
+ */
+@RestController
+@RequestMapping("/api/admin/target-groups")
+public class TargetGroupController {
+
+    private final TargetGroupService targetGroupService;
+
+    public TargetGroupController(TargetGroupService targetGroupService) {
+        this.targetGroupService = targetGroupService;
+    }
+
+    @GetMapping
+    public List<TargetGroupResponse> list() {
+        return targetGroupService.list();
+    }
+
+    @PostMapping
+    @ResponseStatus(HttpStatus.CREATED)
+    public TargetGroupResponse create(@Valid @RequestBody TargetGroupRequest request) {
+        return targetGroupService.create(request);
+    }
+
+    @PutMapping("/{id}")
+    public TargetGroupResponse update(@PathVariable Long id, @Valid @RequestBody TargetGroupRequest request) {
+        return targetGroupService.update(id, request);
+    }
+
+    @GetMapping("/{id}/preview")
+    public TargetGroupPreviewResponse preview(@PathVariable Long id) {
+        return targetGroupService.preview(id);
+    }
+
+    @DeleteMapping("/{id}")
+    public ResponseEntity<Void> delete(@PathVariable Long id) {
+        targetGroupService.delete(id);
+        return ResponseEntity.noContent().build();
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupPreviewResponse.java b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupPreviewResponse.java
new file mode 100644
index 0000000..2372d85
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupPreviewResponse.java
@@ -0,0 +1,12 @@
+package pl.polskalokalnie.lead;
+
+import java.util.List;
+
+/**
+ * Podglad segmentu: laczna liczba dopasowanych leadow oraz krotka probka do wyswietlenia w panelu.
+ */
+public record TargetGroupPreviewResponse(
+        long total,
+        List<LeadResponse> sample
+) {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupRepository.java b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupRepository.java
new file mode 100644
index 0000000..79d1e88
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupRepository.java
@@ -0,0 +1,6 @@
+package pl.polskalokalnie.lead;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface TargetGroupRepository extends JpaRepository<TargetGroup, Long> {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupRequest.java b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupRequest.java
new file mode 100644
index 0000000..25951c2
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupRequest.java
@@ -0,0 +1,18 @@
+package pl.polskalokalnie.lead;
+
+import jakarta.validation.constraints.NotBlank;
+import java.util.Set;
+
+public record TargetGroupRequest(
+        @NotBlank String name,
+        String description,
+        Set<LeadSource> sources,
+        String city,
+        String tag,
+        LeadStatus status,
+        boolean requireEmail,
+        boolean requirePhone,
+        boolean requireEmailConsent,
+        boolean requireSmsConsent
+) {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupResponse.java b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupResponse.java
new file mode 100644
index 0000000..1b8917d
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupResponse.java
@@ -0,0 +1,39 @@
+package pl.polskalokalnie.lead;
+
+import java.time.Instant;
+import java.util.LinkedHashSet;
+import java.util.Set;
+
+public record TargetGroupResponse(
+        Long id,
+        String name,
+        String description,
+        Set<LeadSource> sources,
+        String city,
+        String tag,
+        LeadStatus status,
+        boolean requireEmail,
+        boolean requirePhone,
+        boolean requireEmailConsent,
+        boolean requireSmsConsent,
+        long memberCount,
+        Instant createdAt
+) {
+    public static TargetGroupResponse from(TargetGroup group, long memberCount) {
+        return new TargetGroupResponse(
+                group.getId(),
+                group.getName(),
+                group.getDescription(),
+                new LinkedHashSet<>(group.getSources()),
+                group.getCity(),
+                group.getTag(),
+                group.getStatus(),
+                group.isRequireEmail(),
+                group.isRequirePhone(),
+                group.isRequireEmailConsent(),
+                group.isRequireSmsConsent(),
+                memberCount,
+                group.getCreatedAt()
+        );
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupService.java b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupService.java
new file mode 100644
index 0000000..72c9662
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/lead/TargetGroupService.java
@@ -0,0 +1,88 @@
+package pl.polskalokalnie.lead;
+
+import java.util.Comparator;
+import java.util.LinkedHashSet;
+import java.util.List;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.server.ResponseStatusException;
+
+@Service
+public class TargetGroupService {
+
+    private static final int PREVIEW_SAMPLE_SIZE = 20;
+
+    private final TargetGroupRepository targetGroupRepository;
+    private final LeadQueryService leadQueryService;
+
+    public TargetGroupService(TargetGroupRepository targetGroupRepository, LeadQueryService leadQueryService) {
+        this.targetGroupRepository = targetGroupRepository;
+        this.leadQueryService = leadQueryService;
+    }
+
+    public List<TargetGroupResponse> list() {
+        return targetGroupRepository.findAll().stream()
+                .sorted(Comparator.comparing(TargetGroup::getCreatedAt).reversed())
+                .map(group -> TargetGroupResponse.from(group, leadQueryService.count(group)))
+                .toList();
+    }
+
+    @Transactional
+    public TargetGroupResponse create(TargetGroupRequest request) {
+        TargetGroup group = new TargetGroup();
+        apply(group, request);
+        TargetGroup saved = targetGroupRepository.save(group);
+        return TargetGroupResponse.from(saved, leadQueryService.count(saved));
+    }
+
+    @Transactional
+    public TargetGroupResponse update(Long id, TargetGroupRequest request) {
+        TargetGroup group = requireGroup(id);
+        apply(group, request);
+        TargetGroup saved = targetGroupRepository.save(group);
+        return TargetGroupResponse.from(saved, leadQueryService.count(saved));
+    }
+
+    @Transactional
+    public void delete(Long id) {
+        TargetGroup group = requireGroup(id);
+        targetGroupRepository.delete(group);
+    }
+
+    public TargetGroupPreviewResponse preview(Long id) {
+        TargetGroup group = requireGroup(id);
+        List<Lead> members = leadQueryService.resolve(group);
+        List<LeadResponse> sample = members.stream()
+                .limit(PREVIEW_SAMPLE_SIZE)
+                .map(LeadResponse::from)
+                .toList();
+        return new TargetGroupPreviewResponse(members.size(), sample);
+    }
+
+    TargetGroup requireGroup(Long id) {
+        return targetGroupRepository.findById(id)
+                .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Grupa docelowa nie istnieje"));
+    }
+
+    private void apply(TargetGroup group, TargetGroupRequest request) {
+        group.setName(request.name().trim());
+        group.setDescription(trimToNull(request.description()));
+        group.setSources(request.sources() == null ? new LinkedHashSet<>() : new LinkedHashSet<>(request.sources()));
+        group.setCity(trimToNull(request.city()));
+        group.setTag(trimToNull(request.tag()));
+        group.setStatus(request.status());
+        group.setRequireEmail(request.requireEmail());
+        group.setRequirePhone(request.requirePhone());
+        group.setRequireEmailConsent(request.requireEmailConsent());
+        group.setRequireSmsConsent(request.requireSmsConsent());
+    }
+
+    private static String trimToNull(String value) {
+        if (value == null) {
+            return null;
+        }
+        String trimmed = value.trim();
+        return trimmed.isEmpty() ? null : trimmed;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/mailconfig/MailConfigController.java b/backend/src/main/java/pl/polskalokalnie/mailconfig/MailConfigController.java
new file mode 100644
index 0000000..7c85161
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/mailconfig/MailConfigController.java
@@ -0,0 +1,80 @@
+package pl.polskalokalnie.mailconfig;
+
+import jakarta.validation.Valid;
+import jakarta.validation.constraints.NotBlank;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import pl.polskalokalnie.send.EmailSender;
+import pl.polskalokalnie.send.SendResult;
+import pl.polskalokalnie.send.SmsSender;
+
+/**
+ * Konfiguracja poczty SMTP i bramki SMS w panelu administratora oraz kontrolowana wysylka testowa
+ * do pojedynczego odbiorcy. Sekrety nigdy nie sa zwracane - w odpowiedzi jedynie flaga "ustawione".
+ */
+@RestController
+@RequestMapping("/api/admin/mail-config")
+public class MailConfigController {
+
+    private final MailConfigService mailConfigService;
+    private final EmailSender emailSender;
+    private final SmsSender smsSender;
+
+    public MailConfigController(MailConfigService mailConfigService, EmailSender emailSender, SmsSender smsSender) {
+        this.mailConfigService = mailConfigService;
+        this.emailSender = emailSender;
+        this.smsSender = smsSender;
+    }
+
+    @GetMapping("/smtp")
+    public SmtpConfigResponse getSmtp() {
+        return SmtpConfigResponse.from(mailConfigService.getSmtp());
+    }
+
+    @PutMapping("/smtp")
+    public SmtpConfigResponse updateSmtp(@RequestBody SmtpConfigRequest request) {
+        return SmtpConfigResponse.from(mailConfigService.updateSmtp(request));
+    }
+
+    @GetMapping("/sms")
+    public SmsConfigResponse getSms() {
+        return SmsConfigResponse.from(mailConfigService.getSms());
+    }
+
+    @PutMapping("/sms")
+    public SmsConfigResponse updateSms(@RequestBody SmsConfigRequest request) {
+        return SmsConfigResponse.from(mailConfigService.updateSms(request));
+    }
+
+    @PostMapping("/smtp/test")
+    public TestResultResponse testSmtp(@Valid @RequestBody TestSendRequest request) {
+        SendResult result = emailSender.send(
+                mailConfigService.getSmtp(),
+                request.recipient().trim(),
+                "Test konfiguracji SMTP – Polska Lokalnie",
+                "<p>To jest wiadomość testowa potwierdzająca poprawną konfigurację poczty SMTP.</p>");
+        return TestResultResponse.from(result);
+    }
+
+    @PostMapping("/sms/test")
+    public TestResultResponse testSms(@Valid @RequestBody TestSendRequest request) {
+        SendResult result = smsSender.send(
+                mailConfigService.getSms(),
+                request.recipient().trim(),
+                "Test konfiguracji bramki SMS – Polska Lokalnie");
+        return TestResultResponse.from(result);
+    }
+
+    public record TestSendRequest(@NotBlank String recipient) {
+    }
+
+    public record TestResultResponse(boolean ok, String providerMessageId, String error) {
+        static TestResultResponse from(SendResult result) {
+            return new TestResultResponse(result.ok(), result.providerMessageId(), result.error());
+        }
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/mailconfig/MailConfigService.java b/backend/src/main/java/pl/polskalokalnie/mailconfig/MailConfigService.java
new file mode 100644
index 0000000..baa314a
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/mailconfig/MailConfigService.java
@@ -0,0 +1,91 @@
+package pl.polskalokalnie.mailconfig;
+
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+/**
+ * Dostep do jednorekordowej konfiguracji SMTP i bramki SMS. Sekrety (haslo, klucz API) sa
+ * nadpisywane tylko przy jawnej zmianie; puste pole w zadaniu zachowuje dotychczasowa wartosc.
+ * Metody get* zwracaja encje z sekretami wylacznie na uzytek wewnetrzny (sendery) - nie sa
+ * serializowane do klienta.
+ */
+@Service
+public class MailConfigService {
+
+    private static final long SINGLETON_ID = 1L;
+
+    private final SmtpConfigRepository smtpConfigRepository;
+    private final SmsGatewayConfigRepository smsGatewayConfigRepository;
+
+    public MailConfigService(SmtpConfigRepository smtpConfigRepository,
+            SmsGatewayConfigRepository smsGatewayConfigRepository) {
+        this.smtpConfigRepository = smtpConfigRepository;
+        this.smsGatewayConfigRepository = smsGatewayConfigRepository;
+    }
+
+    @Transactional
+    public SmtpConfig getSmtp() {
+        return smtpConfigRepository.findById(SINGLETON_ID).orElseGet(() -> {
+            SmtpConfig config = new SmtpConfig();
+            config.setId(SINGLETON_ID);
+            return smtpConfigRepository.save(config);
+        });
+    }
+
+    @Transactional
+    public SmsGatewayConfig getSms() {
+        return smsGatewayConfigRepository.findById(SINGLETON_ID).orElseGet(() -> {
+            SmsGatewayConfig config = new SmsGatewayConfig();
+            config.setId(SINGLETON_ID);
+            return smsGatewayConfigRepository.save(config);
+        });
+    }
+
+    @Transactional
+    public SmtpConfig updateSmtp(SmtpConfigRequest request) {
+        SmtpConfig config = getSmtp();
+        config.setHost(trimToNull(request.host()));
+        config.setPort(request.port());
+        if (request.sslEnabled() != null) {
+            config.setSslEnabled(request.sslEnabled());
+        }
+        config.setUsername(trimToNull(request.username()));
+        config.setFromName(trimToNull(request.fromName()));
+        config.setContactFormRecipient(trimToNull(request.contactFormRecipient()));
+        if (request.enabled() != null) {
+            config.setEnabled(request.enabled());
+        }
+        // Haslo zmieniamy tylko gdy podane (niepuste) - inaczej zachowujemy dotychczasowe.
+        String password = request.password();
+        if (password != null && !password.isBlank()) {
+            config.setPassword(password);
+        }
+        return smtpConfigRepository.save(config);
+    }
+
+    @Transactional
+    public SmsGatewayConfig updateSms(SmsConfigRequest request) {
+        SmsGatewayConfig config = getSms();
+        config.setEndpointUrl(trimToNull(request.endpointUrl()));
+        config.setCreator(trimToNull(request.creator()));
+        if (request.timeoutSeconds() != null) {
+            config.setTimeoutSeconds(request.timeoutSeconds());
+        }
+        if (request.enabled() != null) {
+            config.setEnabled(request.enabled());
+        }
+        String apiKey = request.apiKey();
+        if (apiKey != null && !apiKey.isBlank()) {
+            config.setApiKey(apiKey);
+        }
+        return smsGatewayConfigRepository.save(config);
+    }
+
+    private static String trimToNull(String value) {
+        if (value == null) {
+            return null;
+        }
+        String trimmed = value.trim();
+        return trimmed.isEmpty() ? null : trimmed;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsConfigRequest.java b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsConfigRequest.java
new file mode 100644
index 0000000..7b76afa
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsConfigRequest.java
@@ -0,0 +1,13 @@
+package pl.polskalokalnie.mailconfig;
+
+/**
+ * Zapis konfiguracji bramki SMS. Pole {@code apiKey} nadpisuje klucz tylko gdy niepuste.
+ */
+public record SmsConfigRequest(
+        String endpointUrl,
+        String apiKey,
+        String creator,
+        Integer timeoutSeconds,
+        Boolean enabled
+) {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsConfigResponse.java b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsConfigResponse.java
new file mode 100644
index 0000000..de6dafb
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsConfigResponse.java
@@ -0,0 +1,23 @@
+package pl.polskalokalnie.mailconfig;
+
+/**
+ * Odpowiedz konfiguracji bramki SMS - bez klucza API. {@code apiKeySet} sygnalizuje jedynie, czy
+ * klucz jest zapisany (badge "ustawione").
+ */
+public record SmsConfigResponse(
+        String endpointUrl,
+        String creator,
+        Integer timeoutSeconds,
+        boolean enabled,
+        boolean apiKeySet
+) {
+    public static SmsConfigResponse from(SmsGatewayConfig config) {
+        return new SmsConfigResponse(
+                config.getEndpointUrl(),
+                config.getCreator(),
+                config.getTimeoutSeconds(),
+                config.isEnabled(),
+                config.getApiKey() != null && !config.getApiKey().isBlank()
+        );
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsGatewayConfig.java b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsGatewayConfig.java
new file mode 100644
index 0000000..1357b88
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsGatewayConfig.java
@@ -0,0 +1,81 @@
+package pl.polskalokalnie.mailconfig;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.Id;
+import jakarta.persistence.Table;
+
+/**
+ * Konfiguracja bramki SMS (SoftSPM) - pojedynczy rekord (id = 1). Klucz API trzymany w bazie,
+ * nigdy zwracany w odpowiedziach API (maskowany) ani logowany.
+ */
+@Entity
+@Table(name = "sms_gateway_config")
+public class SmsGatewayConfig {
+
+    @Id
+    private Long id = 1L;
+
+    @Column(length = 400)
+    private String endpointUrl;
+
+    @Column(length = 400)
+    private String apiKey;
+
+    // Pole "creator" bramki - znacznik zrodla wiadomosci, max 50 znakow.
+    @Column(length = 50)
+    private String creator;
+
+    private Integer timeoutSeconds = 10;
+
+    @Column(nullable = false)
+    private boolean enabled = false;
+
+    public Long getId() {
+        return id;
+    }
+
+    public void setId(Long id) {
+        this.id = id;
+    }
+
+    public String getEndpointUrl() {
+        return endpointUrl;
+    }
+
+    public void setEndpointUrl(String endpointUrl) {
+        this.endpointUrl = endpointUrl;
+    }
+
+    public String getApiKey() {
+        return apiKey;
+    }
+
+    public void setApiKey(String apiKey) {
+        this.apiKey = apiKey;
+    }
+
+    public String getCreator() {
+        return creator;
+    }
+
+    public void setCreator(String creator) {
+        this.creator = creator;
+    }
+
+    public Integer getTimeoutSeconds() {
+        return timeoutSeconds;
+    }
+
+    public void setTimeoutSeconds(Integer timeoutSeconds) {
+        this.timeoutSeconds = timeoutSeconds;
+    }
+
+    public boolean isEnabled() {
+        return enabled;
+    }
+
+    public void setEnabled(boolean enabled) {
+        this.enabled = enabled;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsGatewayConfigRepository.java b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsGatewayConfigRepository.java
new file mode 100644
index 0000000..cd2d90d
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmsGatewayConfigRepository.java
@@ -0,0 +1,6 @@
+package pl.polskalokalnie.mailconfig;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface SmsGatewayConfigRepository extends JpaRepository<SmsGatewayConfig, Long> {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfig.java b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfig.java
new file mode 100644
index 0000000..9cd39e5
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfig.java
@@ -0,0 +1,114 @@
+package pl.polskalokalnie.mailconfig;
+
+import jakarta.persistence.Column;
+import jakarta.persistence.Entity;
+import jakarta.persistence.Id;
+import jakarta.persistence.Table;
+
+/**
+ * Konfiguracja konta e-mail (SMTP) - pojedynczy rekord (id = 1). Haslo trzymane w bazie, nigdy
+ * zwracane w odpowiedziach API (maskowane) ani logowane.
+ */
+@Entity
+@Table(name = "smtp_config")
+public class SmtpConfig {
+
+    @Id
+    private Long id = 1L;
+
+    @Column(length = 200)
+    private String host;
+
+    private Integer port;
+
+    @Column(nullable = false)
+    private boolean sslEnabled = true;
+
+    // Login SMTP = adres nadawcy.
+    @Column(length = 200)
+    private String username;
+
+    @Column(length = 160)
+    private String fromName;
+
+    @Column(length = 400)
+    private String password;
+
+    @Column(length = 200)
+    private String contactFormRecipient;
+
+    @Column(nullable = false)
+    private boolean enabled = false;
+
+    public Long getId() {
+        return id;
+    }
+
+    public void setId(Long id) {
+        this.id = id;
+    }
+
+    public String getHost() {
+        return host;
+    }
+
+    public void setHost(String host) {
+        this.host = host;
+    }
+
+    public Integer getPort() {
+        return port;
+    }
+
+    public void setPort(Integer port) {
+        this.port = port;
+    }
+
+    public boolean isSslEnabled() {
+        return sslEnabled;
+    }
+
+    public void setSslEnabled(boolean sslEnabled) {
+        this.sslEnabled = sslEnabled;
+    }
+
+    public String getUsername() {
+        return username;
+    }
+
+    public void setUsername(String username) {
+        this.username = username;
+    }
+
+    public String getFromName() {
+        return fromName;
+    }
+
+    public void setFromName(String fromName) {
+        this.fromName = fromName;
+    }
+
+    public String getPassword() {
+        return password;
+    }
+
+    public void setPassword(String password) {
+        this.password = password;
+    }
+
+    public String getContactFormRecipient() {
+        return contactFormRecipient;
+    }
+
+    public void setContactFormRecipient(String contactFormRecipient) {
+        this.contactFormRecipient = contactFormRecipient;
+    }
+
+    public boolean isEnabled() {
+        return enabled;
+    }
+
+    public void setEnabled(boolean enabled) {
+        this.enabled = enabled;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigRepository.java b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigRepository.java
new file mode 100644
index 0000000..bbaa406
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigRepository.java
@@ -0,0 +1,6 @@
+package pl.polskalokalnie.mailconfig;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+
+public interface SmtpConfigRepository extends JpaRepository<SmtpConfig, Long> {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigRequest.java b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigRequest.java
new file mode 100644
index 0000000..c15cc26
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigRequest.java
@@ -0,0 +1,17 @@
+package pl.polskalokalnie.mailconfig;
+
+/**
+ * Zapis konfiguracji SMTP. Pole {@code password} nadpisuje haslo tylko gdy niepuste - puste
+ * pozostawia dotychczasowe (wzorzec "wpisz, aby zmienic").
+ */
+public record SmtpConfigRequest(
+        String host,
+        Integer port,
+        Boolean sslEnabled,
+        String username,
+        String fromName,
+        String password,
+        String contactFormRecipient,
+        Boolean enabled
+) {
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigResponse.java b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigResponse.java
new file mode 100644
index 0000000..5cd2da4
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/mailconfig/SmtpConfigResponse.java
@@ -0,0 +1,29 @@
+package pl.polskalokalnie.mailconfig;
+
+/**
+ * Odpowiedz konfiguracji SMTP - bez hasla. {@code passwordSet} mowi tylko, czy haslo jest
+ * zapisane (badge "ustawione"), sama wartosc nigdy nie opuszcza serwera.
+ */
+public record SmtpConfigResponse(
+        String host,
+        Integer port,
+        boolean sslEnabled,
+        String username,
+        String fromName,
+        String contactFormRecipient,
+        boolean enabled,
+        boolean passwordSet
+) {
+    public static SmtpConfigResponse from(SmtpConfig config) {
+        return new SmtpConfigResponse(
+                config.getHost(),
+                config.getPort(),
+                config.isSslEnabled(),
+                config.getUsername(),
+                config.getFromName(),
+                config.getContactFormRecipient(),
+                config.isEnabled(),
+                config.getPassword() != null && !config.getPassword().isBlank()
+        );
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/send/CampaignDispatcher.java b/backend/src/main/java/pl/polskalokalnie/send/CampaignDispatcher.java
new file mode 100644
index 0000000..26d1caa
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/send/CampaignDispatcher.java
@@ -0,0 +1,140 @@
+package pl.polskalokalnie.send;
+
+import java.time.Instant;
+import java.time.LocalDate;
+import java.util.List;
+import org.springframework.data.domain.Limit;
+import org.springframework.scheduling.annotation.Scheduled;
+import org.springframework.stereotype.Component;
+import pl.polskalokalnie.campaign.Campaign;
+import pl.polskalokalnie.campaign.CampaignRecipient;
+import pl.polskalokalnie.campaign.CampaignRecipientRepository;
+import pl.polskalokalnie.campaign.CampaignRepository;
+import pl.polskalokalnie.campaign.CampaignStatus;
+import pl.polskalokalnie.campaign.Channel;
+import pl.polskalokalnie.campaign.RecipientStatus;
+import pl.polskalokalnie.mailconfig.MailConfigService;
+import pl.polskalokalnie.mailconfig.SmsGatewayConfig;
+import pl.polskalokalnie.mailconfig.SmtpConfig;
+
+/**
+ * Worker wysylajacy kampanie z outboxu. Cyklicznie promuje zaplanowane kampanie, ktorych termin
+ * nadszedl, a nastepnie wysyla zakolejkowane wiadomosci respektujac dzienny limit. Wysylka
+ * odbywa sie tylko gdy odpowiednia konfiguracja (SMTP/SMS) jest wlaczona - w przeciwnym razie
+ * pozycje pozostaja w kolejce (tryb sandbox). Jeden przebieg przetwarza ograniczona partie, by
+ * nie blokowac watku schedulera.
+ */
+@Component
+public class CampaignDispatcher {
+
+    private static final int BATCH_PER_TICK = 25;
+
+    private final CampaignRepository campaignRepository;
+    private final CampaignRecipientRepository recipientRepository;
+    private final MailConfigService mailConfigService;
+    private final EmailSender emailSender;
+    private final SmsSender smsSender;
+    private final MessageComposer messageComposer;
+
+    public CampaignDispatcher(CampaignRepository campaignRepository,
+            CampaignRecipientRepository recipientRepository,
+            MailConfigService mailConfigService,
+            EmailSender emailSender,
+            SmsSender smsSender,
+            MessageComposer messageComposer) {
+        this.campaignRepository = campaignRepository;
+        this.recipientRepository = recipientRepository;
+        this.mailConfigService = mailConfigService;
+        this.emailSender = emailSender;
+        this.smsSender = smsSender;
+        this.messageComposer = messageComposer;
+    }
+
+    @Scheduled(fixedDelayString = "${app.campaign.dispatch-interval-ms:15000}", initialDelay = 20000)
+    public void dispatch() {
+        promoteScheduled();
+        for (Campaign campaign : campaignRepository.findByStatus(CampaignStatus.SENDING)) {
+            processCampaign(campaign);
+        }
+    }
+
+    private void promoteScheduled() {
+        Instant now = Instant.now();
+        for (Campaign campaign : campaignRepository.findByStatus(CampaignStatus.SCHEDULED)) {
+            if (campaign.getScheduledAt() == null || !campaign.getScheduledAt().isAfter(now)) {
+                campaign.setStatus(CampaignStatus.SENDING);
+                campaignRepository.save(campaign);
+            }
+        }
+    }
+
+    private void processCampaign(Campaign campaign) {
+        // Reset dziennego licznika przy zmianie daty.
+        LocalDate today = LocalDate.now();
+        if (!today.equals(campaign.getSentTodayDate())) {
+            campaign.setSentToday(0);
+            campaign.setSentTodayDate(today);
+            campaignRepository.save(campaign);
+        }
+
+        int dailyLimit = campaign.getDailyLimit() != null ? campaign.getDailyLimit() : Integer.MAX_VALUE;
+        int remainingToday = dailyLimit - (campaign.getSentToday() != null ? campaign.getSentToday() : 0);
+        if (remainingToday <= 0) {
+            return;
+        }
+
+        // Konfiguracja wlaczona? Jesli nie - tryb sandbox, nic nie wychodzi (pozycje zostaja w kolejce).
+        SmtpConfig smtp = campaign.getChannel() == Channel.EMAIL ? mailConfigService.getSmtp() : null;
+        SmsGatewayConfig sms = campaign.getChannel() == Channel.SMS ? mailConfigService.getSms() : null;
+        if (campaign.getChannel() == Channel.EMAIL && (smtp == null || !smtp.isEnabled())) {
+            return;
+        }
+        if (campaign.getChannel() == Channel.SMS && (sms == null || !sms.isEnabled())) {
+            return;
+        }
+
+        int batch = Math.min(BATCH_PER_TICK, remainingToday);
+        List<CampaignRecipient> queued = recipientRepository
+                .findByCampaignIdAndStatusOrderByIdAsc(campaign.getId(), RecipientStatus.QUEUED, Limit.of(batch));
+
+        int sentNow = 0;
+        for (CampaignRecipient recipient : queued) {
+            SendResult result = campaign.getChannel() == Channel.EMAIL
+                    ? sendEmail(campaign, recipient, smtp)
+                    : sendSms(campaign, recipient, sms);
+
+            recipient.setSentAt(Instant.now());
+            if (result.ok()) {
+                recipient.setStatus(RecipientStatus.SENT);
+                recipient.setProviderMessageId(result.providerMessageId());
+                recipient.setError(null);
+                sentNow++;
+            } else {
+                recipient.setStatus(RecipientStatus.FAILED);
+                recipient.setError(result.error());
+            }
+            recipientRepository.save(recipient);
+        }
+
+        if (sentNow > 0) {
+            campaign.setSentToday((campaign.getSentToday() != null ? campaign.getSentToday() : 0) + sentNow);
+            campaignRepository.save(campaign);
+        }
+
+        // Zakonczenie kampanii, gdy nie ma juz nic w kolejce.
+        if (recipientRepository.countByCampaignIdAndStatus(campaign.getId(), RecipientStatus.QUEUED) == 0) {
+            campaign.setStatus(CampaignStatus.COMPLETED);
+            campaignRepository.save(campaign);
+        }
+    }
+
+    private SendResult sendEmail(Campaign campaign, CampaignRecipient recipient, SmtpConfig smtp) {
+        String html = messageComposer.composeEmail(campaign.getBody(), recipient.getName(), recipient.getLeadId());
+        return emailSender.send(smtp, recipient.getAddress(), campaign.getSubject(), html);
+    }
+
+    private SendResult sendSms(Campaign campaign, CampaignRecipient recipient, SmsGatewayConfig sms) {
+        String text = messageComposer.composeSms(campaign.getBody(), recipient.getName(), recipient.getLeadId());
+        return smsSender.send(sms, recipient.getAddress(), text);
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/send/EmailSender.java b/backend/src/main/java/pl/polskalokalnie/send/EmailSender.java
new file mode 100644
index 0000000..d1c9759
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/send/EmailSender.java
@@ -0,0 +1,83 @@
+package pl.polskalokalnie.send;
+
+import jakarta.mail.internet.InternetAddress;
+import jakarta.mail.internet.MimeMessage;
+import java.io.UnsupportedEncodingException;
+import java.nio.charset.StandardCharsets;
+import java.util.Properties;
+import org.springframework.mail.javamail.JavaMailSenderImpl;
+import org.springframework.mail.javamail.MimeMessageHelper;
+import org.springframework.stereotype.Component;
+import pl.polskalokalnie.mailconfig.SmtpConfig;
+
+/**
+ * Wysylka pojedynczego e-maila przez konto SMTP z konfiguracji. JavaMailSender budowany jest per
+ * wywolanie, bo konfiguracja moze zmienic sie w czasie dzialania aplikacji (niski wolumen).
+ * Dla portu 465 wlacza SSL, w przeciwnym razie STARTTLS.
+ */
+@Component
+public class EmailSender {
+
+    public SendResult send(SmtpConfig config, String to, String subject, String htmlBody) {
+        if (config == null || config.getHost() == null || config.getHost().isBlank()
+                || config.getUsername() == null || config.getUsername().isBlank()) {
+            return SendResult.failure("Konfiguracja SMTP jest niekompletna");
+        }
+        try {
+            JavaMailSenderImpl mailSender = buildMailSender(config);
+            MimeMessage message = mailSender.createMimeMessage();
+            MimeMessageHelper helper = new MimeMessageHelper(message, false, StandardCharsets.UTF_8.name());
+            helper.setFrom(fromAddress(config));
+            helper.setTo(to);
+            helper.setSubject(subject == null ? "" : subject);
+            helper.setText(htmlBody, true);
+            mailSender.send(message);
+            String messageId = message.getMessageID();
+            return SendResult.ok(messageId);
+        } catch (Exception ex) {
+            return SendResult.failure(shorten(ex.getMessage()));
+        }
+    }
+
+    private JavaMailSenderImpl buildMailSender(SmtpConfig config) {
+        JavaMailSenderImpl mailSender = new JavaMailSenderImpl();
+        mailSender.setHost(config.getHost());
+        int port = config.getPort() != null ? config.getPort() : (config.isSslEnabled() ? 465 : 587);
+        mailSender.setPort(port);
+        mailSender.setUsername(config.getUsername());
+        mailSender.setPassword(config.getPassword());
+        mailSender.setDefaultEncoding(StandardCharsets.UTF_8.name());
+
+        Properties props = mailSender.getJavaMailProperties();
+        props.put("mail.transport.protocol", "smtp");
+        props.put("mail.smtp.auth", "true");
+        props.put("mail.smtp.connectiontimeout", "10000");
+        props.put("mail.smtp.timeout", "15000");
+        props.put("mail.smtp.writetimeout", "15000");
+        if (config.isSslEnabled()) {
+            props.put("mail.smtp.ssl.enable", "true");
+            props.put("mail.smtp.ssl.protocols", "TLSv1.2 TLSv1.3");
+        } else {
+            props.put("mail.smtp.starttls.enable", "true");
+        }
+        return mailSender;
+    }
+
+    private InternetAddress fromAddress(SmtpConfig config) throws UnsupportedEncodingException {
+        try {
+            if (config.getFromName() != null && !config.getFromName().isBlank()) {
+                return new InternetAddress(config.getUsername(), config.getFromName(), StandardCharsets.UTF_8.name());
+            }
+            return new InternetAddress(config.getUsername());
+        } catch (Exception ex) {
+            throw new UnsupportedEncodingException("Nieprawidłowy adres nadawcy");
+        }
+    }
+
+    private static String shorten(String message) {
+        if (message == null) {
+            return "Nieznany błąd wysyłki";
+        }
+        return message.length() > 480 ? message.substring(0, 480) : message;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/send/MessageComposer.java b/backend/src/main/java/pl/polskalokalnie/send/MessageComposer.java
new file mode 100644
index 0000000..bf9b796
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/send/MessageComposer.java
@@ -0,0 +1,69 @@
+package pl.polskalokalnie.send;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.stereotype.Component;
+import pl.polskalokalnie.unsubscribe.UnsubscribeService;
+
+/**
+ * Sklada finalna tresc wiadomosci: personalizacja znacznikow ({{name}}) oraz obowiazkowa stopka z
+ * linkiem rezygnacji. Kazda wiadomosc marketingowa musi umozliwiac wypisanie sie - link generuje
+ * podpisany token per lead i kanal.
+ */
+@Component
+public class MessageComposer {
+
+    private final UnsubscribeService unsubscribeService;
+    private final String baseUrl;
+
+    public MessageComposer(UnsubscribeService unsubscribeService,
+            @Value("${app.public-base-url:http://localhost}") String baseUrl) {
+        this.unsubscribeService = unsubscribeService;
+        this.baseUrl = baseUrl == null ? "" : baseUrl.replaceAll("/+$", "");
+    }
+
+    /** Tresc HTML e-maila z personalizacja i stopka rezygnacji. */
+    public String composeEmail(String rawBody, String recipientName, Long leadId) {
+        String personalized = personalize(rawBody, recipientName);
+        String html = looksLikeHtml(personalized) ? personalized : textToHtml(personalized);
+        String link = unsubscribeLink(leadId, "email");
+        String footer = "<hr style=\"margin-top:24px;border:none;border-top:1px solid #e2e8f0\">"
+                + "<p style=\"font-size:12px;color:#94a3b8;line-height:1.5\">"
+                + "Otrzymujesz tę wiadomość, ponieważ wyraziłeś zgodę na kontakt marketingowy. "
+                + "<a href=\"" + link + "\" style=\"color:#94a3b8\">Zrezygnuj z otrzymywania wiadomości</a>.</p>";
+        return "<div style=\"font-family:system-ui,Segoe UI,Arial,sans-serif;color:#0f172a;font-size:15px;"
+                + "line-height:1.6\">" + html + footer + "</div>";
+    }
+
+    /** Tresc SMS z personalizacja i krotka informacja o rezygnacji. */
+    public String composeSms(String rawBody, String recipientName, Long leadId) {
+        String personalized = personalize(rawBody, recipientName).trim();
+        String link = unsubscribeLink(leadId, "sms");
+        return personalized + "\nRezygnacja: " + link;
+    }
+
+    private String unsubscribeLink(Long leadId, String channel) {
+        return baseUrl + "/api/unsubscribe?token=" + unsubscribeService.generateToken(leadId, channel);
+    }
+
+    private static String personalize(String body, String recipientName) {
+        String name = recipientName == null || recipientName.isBlank() ? "" : recipientName.trim();
+        String value = body == null ? "" : body;
+        // {{name}} -> imie/nazwa; gdy brak, usuwamy podwojne spacje po podstawieniu pustej wartosci.
+        return value.replace("{{name}}", name).replace("{{ name }}", name);
+    }
+
+    private static boolean looksLikeHtml(String value) {
+        return value != null && value.contains("<") && value.contains(">");
+    }
+
+    private static String textToHtml(String text) {
+        return escapeHtml(text).replace("\r\n", "\n").replace("\n", "<br>");
+    }
+
+    private static String escapeHtml(String value) {
+        return value
+                .replace("&", "&amp;")
+                .replace("<", "&lt;")
+                .replace(">", "&gt;");
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/send/SendResult.java b/backend/src/main/java/pl/polskalokalnie/send/SendResult.java
new file mode 100644
index 0000000..9677de7
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/send/SendResult.java
@@ -0,0 +1,18 @@
+package pl.polskalokalnie.send;
+
+/**
+ * Wynik proby wysylki pojedynczej wiadomosci przez sender (e-mail/SMS).
+ */
+public record SendResult(
+        boolean ok,
+        String providerMessageId,
+        String error
+) {
+    public static SendResult ok(String providerMessageId) {
+        return new SendResult(true, providerMessageId, null);
+    }
+
+    public static SendResult failure(String error) {
+        return new SendResult(false, null, error);
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/send/SmsSender.java b/backend/src/main/java/pl/polskalokalnie/send/SmsSender.java
new file mode 100644
index 0000000..506f8d1
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/send/SmsSender.java
@@ -0,0 +1,73 @@
+package pl.polskalokalnie.send;
+
+import java.net.URI;
+import java.net.URLEncoder;
+import java.net.http.HttpClient;
+import java.net.http.HttpRequest;
+import java.net.http.HttpResponse;
+import java.nio.charset.StandardCharsets;
+import java.time.Duration;
+import org.springframework.stereotype.Component;
+import pl.polskalokalnie.mailconfig.SmsGatewayConfig;
+
+/**
+ * Wysylka pojedynczego SMS przez bramke SoftSPM ({@code send_sms_api.php}). Zadanie HTTP POST
+ * (form-urlencoded) z kluczem API, polem creator, numerem i trescia; timeout z konfiguracji.
+ *
+ * UWAGA: dokladne nazwy parametrow bramki (apiKey/creator/to/message) nalezy potwierdzic z
+ * dokumentacja SoftSPM - sa wyodrebnione ponizej, by latwo je dopasowac.
+ */
+@Component
+public class SmsSender {
+
+    private static final String PARAM_API_KEY = "apiKey";
+    private static final String PARAM_CREATOR = "creator";
+    private static final String PARAM_TO = "to";
+    private static final String PARAM_MESSAGE = "message";
+
+    public SendResult send(SmsGatewayConfig config, String phone, String message) {
+        if (config == null || config.getEndpointUrl() == null || config.getEndpointUrl().isBlank()
+                || config.getApiKey() == null || config.getApiKey().isBlank()) {
+            return SendResult.failure("Konfiguracja bramki SMS jest niekompletna");
+        }
+        try {
+            int timeout = config.getTimeoutSeconds() != null && config.getTimeoutSeconds() > 0
+                    ? config.getTimeoutSeconds() : 10;
+            String form = PARAM_API_KEY + "=" + enc(config.getApiKey())
+                    + "&" + PARAM_CREATOR + "=" + enc(config.getCreator())
+                    + "&" + PARAM_TO + "=" + enc(phone)
+                    + "&" + PARAM_MESSAGE + "=" + enc(message);
+
+            HttpClient client = HttpClient.newBuilder()
+                    .connectTimeout(Duration.ofSeconds(timeout))
+                    .build();
+            HttpRequest request = HttpRequest.newBuilder()
+                    .uri(URI.create(config.getEndpointUrl()))
+                    .timeout(Duration.ofSeconds(timeout))
+                    .header("Content-Type", "application/x-www-form-urlencoded")
+                    .POST(HttpRequest.BodyPublishers.ofString(form, StandardCharsets.UTF_8))
+                    .build();
+
+            HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
+            String body = response.body() == null ? "" : response.body().trim();
+            if (response.statusCode() >= 200 && response.statusCode() < 300) {
+                return SendResult.ok(shorten(body));
+            }
+            return SendResult.failure("Bramka SMS zwróciła status " + response.statusCode()
+                    + (body.isEmpty() ? "" : ": " + shorten(body)));
+        } catch (Exception ex) {
+            return SendResult.failure(shorten(ex.getMessage()));
+        }
+    }
+
+    private static String enc(String value) {
+        return URLEncoder.encode(value == null ? "" : value, StandardCharsets.UTF_8);
+    }
+
+    private static String shorten(String value) {
+        if (value == null) {
+            return "";
+        }
+        return value.length() > 200 ? value.substring(0, 200) : value;
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/unsubscribe/UnsubscribeController.java b/backend/src/main/java/pl/polskalokalnie/unsubscribe/UnsubscribeController.java
new file mode 100644
index 0000000..bfcbe42
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/unsubscribe/UnsubscribeController.java
@@ -0,0 +1,44 @@
+package pl.polskalokalnie.unsubscribe;
+
+import org.springframework.http.MediaType;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * Publiczny endpoint rezygnacji - link z tokenem doklejany do kazdej wiadomosci marketingowej.
+ * Musi byc na liscie permitAll w SecurityConfig. Zwraca prosta strone potwierdzenia po polsku.
+ */
+@RestController
+@RequestMapping("/api/unsubscribe")
+public class UnsubscribeController {
+
+    private final UnsubscribeService unsubscribeService;
+
+    public UnsubscribeController(UnsubscribeService unsubscribeService) {
+        this.unsubscribeService = unsubscribeService;
+    }
+
+    @GetMapping(produces = MediaType.TEXT_HTML_VALUE)
+    public String unsubscribe(@RequestParam("token") String token) {
+        UnsubscribeService.Result result = unsubscribeService.unsubscribe(token);
+        String kanal = "sms".equals(result.channel()) ? "SMS" : "e-mail";
+        return page("Rezygnacja przyjęta",
+                "Twój adres" + (result.maskedContact().isEmpty() ? "" : " (" + result.maskedContact() + ")")
+                        + " został wypisany z wiadomości marketingowych (" + kanal + "). "
+                        + "Nie będziemy już wysyłać Ci kampanii tym kanałem.");
+    }
+
+    private static String page(String title, String message) {
+        return "<!doctype html><html lang=\"pl\"><head><meta charset=\"utf-8\">"
+                + "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"
+                + "<title>" + title + "</title>"
+                + "<style>body{font-family:system-ui,Segoe UI,Arial,sans-serif;background:#f5f6fa;margin:0;"
+                + "display:flex;min-height:100vh;align-items:center;justify-content:center;padding:24px}"
+                + ".card{background:#fff;max-width:460px;padding:36px 32px;border-radius:16px;"
+                + "box-shadow:0 12px 40px rgba(15,23,42,.12);text-align:center}"
+                + "h1{font-size:20px;color:#0f172a;margin:0 0 12px}p{color:#475569;line-height:1.6;margin:0}</style>"
+                + "</head><body><div class=\"card\"><h1>" + title + "</h1><p>" + message + "</p></div></body></html>";
+    }
+}
diff --git a/backend/src/main/java/pl/polskalokalnie/unsubscribe/UnsubscribeService.java b/backend/src/main/java/pl/polskalokalnie/unsubscribe/UnsubscribeService.java
new file mode 100644
index 0000000..c2c80b8
--- /dev/null
+++ b/backend/src/main/java/pl/polskalokalnie/unsubscribe/UnsubscribeService.java
@@ -0,0 +1,112 @@
+package pl.polskalokalnie.unsubscribe;
+
+import java.nio.charset.StandardCharsets;
+import java.util.Base64;
+import java.util.Locale;
+import javax.crypto.Mac;
+import javax.crypto.spec.SecretKeySpec;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.http.HttpStatus;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+import org.springframework.web.server.ResponseStatusException;
+import pl.polskalokalnie.lead.Lead;
+import pl.polskalokalnie.lead.LeadRepository;
+import pl.polskalokalnie.lead.LeadStatus;
+
+/**
+ * Generuje i weryfikuje podpisane (HMAC-SHA256) tokeny rezygnacji doklejane do kazdej wiadomosci
+ * marketingowej. Rezygnacja jest trwala: ustawia opt-out i zdejmuje zgode na danym kanale, dzieki
+ * czemu kontakt nie trafi do zadnej kolejnej kampanii.
+ */
+@Service
+public class UnsubscribeService {
+
+    private static final String HMAC_ALGO = "HmacSHA256";
+    private static final Base64.Encoder URL_ENCODER = Base64.getUrlEncoder().withoutPadding();
+    private static final Base64.Decoder URL_DECODER = Base64.getUrlDecoder();
+
+    private final LeadRepository leadRepository;
+    private final byte[] secret;
+
+    public UnsubscribeService(LeadRepository leadRepository, @Value("${app.jwt.secret}") String secret) {
+        this.leadRepository = leadRepository;
+        this.secret = secret.getBytes(StandardCharsets.UTF_8);
+    }
+
+    /** Token dla leada na danym kanale ("email" albo "sms"). */
+    public String generateToken(Long leadId, String channel) {
+        String payload = leadId + ":" + normalizeChannel(channel);
+        String encodedPayload = URL_ENCODER.encodeToString(payload.getBytes(StandardCharsets.UTF_8));
+        return encodedPayload + "." + sign(encodedPayload);
+    }
+
+    @Transactional
+    public Result unsubscribe(String token) {
+        if (token == null || !token.contains(".")) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Nieprawidłowy link rezygnacji");
+        }
+        int dot = token.lastIndexOf('.');
+        String encodedPayload = token.substring(0, dot);
+        String signature = token.substring(dot + 1);
+        if (!sign(encodedPayload).equals(signature)) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Link rezygnacji jest nieprawidłowy lub wygasł");
+        }
+
+        String payload = new String(URL_DECODER.decode(encodedPayload), StandardCharsets.UTF_8);
+        String[] parts = payload.split(":", 2);
+        if (parts.length != 2) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Nieprawidłowy link rezygnacji");
+        }
+        Long leadId = parseLeadId(parts[0]);
+        String channel = normalizeChannel(parts[1]);
+
+        Lead lead = leadRepository.findById(leadId)
+                .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Kontakt nie istnieje"));
+
+        if ("sms".equals(channel)) {
+            lead.setSmsOptOut(true);
+            lead.setSmsConsent(false);
+        } else {
+            lead.setEmailOptOut(true);
+            lead.setEmailConsent(false);
+        }
+        lead.setStatus(LeadStatus.UNSUBSCRIBED);
+        leadRepository.save(lead);
+        return new Result(channel, maskContact(lead, channel));
+    }
+
+    private String sign(String data) {
+        try {
+            Mac mac = Mac.getInstance(HMAC_ALGO);
+            mac.init(new SecretKeySpec(secret, HMAC_ALGO));
+            byte[] raw = mac.doFinal(data.getBytes(StandardCharsets.UTF_8));
+            return URL_ENCODER.encodeToString(raw);
+        } catch (Exception ex) {
+            throw new ResponseStatusException(HttpStatus.INTERNAL_SERVER_ERROR, "Błąd podpisu tokenu");
+        }
+    }
+
+    private static Long parseLeadId(String value) {
+        try {
+            return Long.parseLong(value);
+        } catch (NumberFormatException ex) {
+            throw new ResponseStatusException(HttpStatus.BAD_REQUEST, "Nieprawidłowy link rezygnacji");
+        }
+    }
+
+    private static String normalizeChannel(String channel) {
+        return channel != null && channel.trim().toLowerCase(Locale.ROOT).startsWith("sms") ? "sms" : "email";
+    }
+
+    private static String maskContact(Lead lead, String channel) {
+        String value = "sms".equals(channel) ? lead.getPhone() : lead.getEmail();
+        if (value == null || value.length() < 4) {
+            return "";
+        }
+        return value.substring(0, 2) + "***" + value.substring(value.length() - 2);
+    }
+
+    public record Result(String channel, String maskedContact) {
+    }
+}
diff --git a/backend/src/main/resources/application.yml b/backend/src/main/resources/application.yml
index 3ffcf1f..368e451 100644
--- a/backend/src/main/resources/application.yml
+++ b/backend/src/main/resources/application.yml
@@ -19,6 +19,8 @@ spring:
         format_sql: true
 
 app:
+  # Publiczny adres bazowy uzywany do budowy linkow (np. rezygnacja z kampanii).
+  public-base-url: ${APP_PUBLIC_BASE_URL:http://localhost}
   jwt:
     # W produkcji ustaw APP_JWT_SECRET (min. 32 znaki) przez zmienna srodowiskowa.
     secret: ${APP_JWT_SECRET:local-dev-secret-change-me-please-32chars-min}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 05528d2..c71a078 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import type { AuthUser, ContactPreference, PreferredLanguage } from './auth';
 import { useNotifications, toDisplayNotifications } from './notifications';
 import type { ServerNotification, DisplayNotification } from './notifications';
 import { getManualTranslation } from './i18nOverrides';
+import { AdminLeadsView, AdminCampaignsView, AdminMailConfigView } from './admin/marketing';
 
 const heroImage = new URL('./assets/hero-interior.png', import.meta.url).href;
 const cityImage = new URL('./assets/city-panorama.png', import.meta.url).href;
@@ -3636,7 +3637,8 @@ function accountStorageKey(suffix: string, user: AuthUser | null): string {
 
 type AdminTab =
   | 'dashboard' | 'listings' | 'users' | 'messages' | 'reports' | 'payments'
-  | 'stats' | 'settings' | 'moderation' | 'categories' | 'locations' | 'promotions' | 'forbiddenWords';
+  | 'stats' | 'settings' | 'moderation' | 'categories' | 'locations' | 'promotions' | 'forbiddenWords'
+  | 'leads' | 'campaigns' | 'mailConfig';
 
 const ADMIN_TAB_META: Record<AdminTab, { title: string; subtitle: string }> = {
   dashboard: { title: 'Panel administratora', subtitle: 'Zarządzaj ogłoszeniami i użytkownikami serwisu.' },
@@ -3652,6 +3654,9 @@ const ADMIN_TAB_META: Record<AdminTab, { title: string; subtitle: string }> = {
   locations: { title: 'Lokalizacje', subtitle: 'Zarządzaj obsługiwanymi miastami i dzielnicami.' },
   promotions: { title: 'Banery i promocje', subtitle: 'Zarządzaj banerami reklamowymi i promocjami.' },
   forbiddenWords: { title: 'Zakazane słowa', subtitle: 'Lista wszystkich niedozwolonych słów używanych przez globalny filtr treści.' },
+  leads: { title: 'Leady', subtitle: 'Baza kontaktów marketingowych i grupy docelowe (dynamiczne segmenty).' },
+  campaigns: { title: 'Kampanie marketingowe', subtitle: 'Twórz i wysyłaj kampanie e-mail oraz SMS do grup docelowych.' },
+  mailConfig: { title: 'Konfiguracja wysyłki', subtitle: 'Ustawienia poczty SMTP i bramki SMS dla kampanii i powiadomień.' },
 };
 
 const ADMIN_NAV_ITEMS: { id: AdminTab; icon: string; label: string }[] = [
@@ -3660,6 +3665,8 @@ const ADMIN_NAV_ITEMS: { id: AdminTab; icon: string; label: string }[] = [
   { id: 'users', icon: 'user', label: 'Użytkownicy' },
   { id: 'messages', icon: 'message', label: 'Wiadomości' },
   { id: 'reports', icon: 'warning', label: 'Zgłoszenia' },
+  { id: 'leads', icon: 'user', label: 'Leady' },
+  { id: 'campaigns', icon: 'mail', label: 'Kampanie marketingowe' },
   { id: 'payments', icon: 'credit-card', label: 'Płatności' },
   { id: 'stats', icon: 'chart', label: 'Statystyki' },
   { id: 'settings', icon: 'gear', label: 'Ustawienia serwisu' },
@@ -3667,6 +3674,7 @@ const ADMIN_NAV_ITEMS: { id: AdminTab; icon: string; label: string }[] = [
 
 const ADMIN_TOOL_ITEMS: { id: AdminTab; icon: string; label: string }[] = [
   { id: 'moderation', icon: 'check', label: 'Weryfikacja ogłoszeń' },
+  { id: 'mailConfig', icon: 'gear', label: 'Konfiguracja wysyłki' },
   { id: 'forbiddenWords', icon: 'shield', label: 'Zakazane słowa' },
   { id: 'categories', icon: 'list', label: 'Kategorie' },
   { id: 'locations', icon: 'pin', label: 'Lokalizacje' },
@@ -5028,6 +5036,9 @@ function AdminPage({ onNavigate }: { onNavigate: (view: View) => void }) {
           {!loading && tab === 'categories' && <AdminPlaceholderCard icon="list" label="Kategorie" />}
           {!loading && tab === 'locations' && <AdminPlaceholderCard icon="pin" label="Lokalizacje" />}
           {!loading && tab === 'promotions' && <AdminPlaceholderCard icon="spark" label="Banery i promocje" />}
+          {!loading && tab === 'leads' && <AdminLeadsView Icon={Icon} />}
+          {!loading && tab === 'campaigns' && <AdminCampaignsView Icon={Icon} />}
+          {!loading && tab === 'mailConfig' && <AdminMailConfigView Icon={Icon} />}
         </div>
       </div>
     </section>
@@ -8806,16 +8817,52 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
 function AccountSettingsPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
   const { user } = useAuth();
   const [accountSwitches, setAccountSwitches] = useState([true, true, false, false]);
+  // Indeks 4 ("Oferty promowane i newsletter") to zgoda marketingowa e-mail zapisywana na serwerze.
   const [mailSwitches, setMailSwitches] = useState([true, true, true, false, false]);
+  const [smsConsent, setSmsConsent] = useState(true);
   const address = user?.address ?? '';
   const birthDate = user?.birthDate ?? '';
 
+  // Wczytaj aktualną zgodę marketingową użytkownika (steruje kwalifikacją do kampanii).
+  useEffect(() => {
+    if (!user) {
+      return;
+    }
+    let active = true;
+    apiFetch<{ emailConsent: boolean; smsConsent: boolean }>('/me/marketing')
+      .then((consent) => {
+        if (!active) {
+          return;
+        }
+        setSmsConsent(consent.smsConsent);
+        setMailSwitches((current) => current.map((value, idx) => (idx === 4 ? consent.emailConsent : value)));
+      })
+      .catch(() => {
+        // Brak zgody/sesji - zostawiamy wartości domyślne.
+      });
+    return () => {
+      active = false;
+    };
+  }, [user]);
+
   const toggleAccountSwitch = (index: number) => {
     setAccountSwitches((current) => current.map((value, idx) => (idx === index ? !value : value)));
   };
 
   const toggleMailSwitch = (index: number) => {
-    setMailSwitches((current) => current.map((value, idx) => (idx === index ? !value : value)));
+    setMailSwitches((current) => {
+      const next = current.map((value, idx) => (idx === index ? !value : value));
+      // Zgodę marketingową e-mail (indeks 4) utrwalamy na serwerze.
+      if (index === 4) {
+        apiFetch('/me/marketing', {
+          method: 'PUT',
+          body: JSON.stringify({ emailConsent: next[4], smsConsent }),
+        }).catch(() => {
+          // Błąd zapisu nie blokuje UI; wartość zostanie zsynchronizowana przy kolejnym wejściu.
+        });
+      }
+      return next;
+    });
   };
 
   return (
diff --git a/frontend/src/admin/marketing.tsx b/frontend/src/admin/marketing.tsx
new file mode 100644
index 0000000..4da6dbd
--- /dev/null
+++ b/frontend/src/admin/marketing.tsx
@@ -0,0 +1,974 @@
+/**
+ * Widoki panelu administratora dla modułu marketingowego: Leady + grupy docelowe, Kampanie oraz
+ * konfiguracja poczty SMTP i bramki SMS. Wydzielone z App.tsx (monolit 22k linii), aby go nie
+ * powiększać. Komponent `Icon` przekazywany jest propem, żeby uniknąć cyklicznego importu.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { apiFetch } from '../auth';
+
+type IconComponent = (props: { name: string }) => JSX.Element | null;
+
+type LeadSource = 'REGISTERED_USER' | 'MANUAL' | 'IMPORT' | 'FORM';
+type LeadStatus = 'NEW' | 'CONTACTED' | 'RESPONDED' | 'UNSUBSCRIBED';
+
+type Lead = {
+  id: number;
+  name: string | null;
+  email: string | null;
+  phone: string | null;
+  city: string | null;
+  source: LeadSource;
+  userId: number | null;
+  status: LeadStatus;
+  tags: string[];
+  emailConsent: boolean;
+  smsConsent: boolean;
+  emailOptOut: boolean;
+  smsOptOut: boolean;
+  notes: string | null;
+  createdAt: string;
+};
+
+type TargetGroup = {
+  id: number;
+  name: string;
+  description: string | null;
+  sources: LeadSource[];
+  city: string | null;
+  tag: string | null;
+  status: LeadStatus | null;
+  requireEmail: boolean;
+  requirePhone: boolean;
+  requireEmailConsent: boolean;
+  requireSmsConsent: boolean;
+  memberCount: number;
+  createdAt: string;
+};
+
+type Channel = 'EMAIL' | 'SMS';
+type CampaignStatus = 'DRAFT' | 'SCHEDULED' | 'SENDING' | 'PAUSED' | 'COMPLETED' | 'CANCELLED';
+
+type Campaign = {
+  id: number;
+  name: string;
+  channel: Channel;
+  subject: string | null;
+  body: string;
+  targetGroupId: number;
+  scheduledAt: string | null;
+  dailyLimit: number;
+  status: CampaignStatus;
+  sentToday: number;
+  createdAt: string;
+  createdBy: string | null;
+  totalRecipients: number;
+  sentCount: number;
+};
+
+type CampaignStats = {
+  total: number;
+  queued: number;
+  sent: number;
+  delivered: number;
+  failed: number;
+  bounced: number;
+  optedOut: number;
+};
+
+const SOURCE_LABEL: Record<LeadSource, string> = {
+  REGISTERED_USER: 'Użytkownik',
+  MANUAL: 'Ręczny',
+  IMPORT: 'Import',
+  FORM: 'Formularz',
+};
+
+const STATUS_LABEL: Record<LeadStatus, string> = {
+  NEW: 'Nowy',
+  CONTACTED: 'Kontakt',
+  RESPONDED: 'Odpowiedział',
+  UNSUBSCRIBED: 'Wypisany',
+};
+
+const CAMPAIGN_STATUS_LABEL: Record<CampaignStatus, string> = {
+  DRAFT: 'Robocza',
+  SCHEDULED: 'Zaplanowana',
+  SENDING: 'Wysyłka',
+  PAUSED: 'Wstrzymana',
+  COMPLETED: 'Zakończona',
+  CANCELLED: 'Anulowana',
+};
+
+const ALL_SOURCES: LeadSource[] = ['REGISTERED_USER', 'MANUAL', 'IMPORT', 'FORM'];
+
+function errorMessage(err: unknown): string {
+  return err instanceof Error ? err.message : 'Wystąpił błąd. Spróbuj ponownie.';
+}
+
+/* ============================ LEADY + GRUPY DOCELOWE ============================ */
+
+export function AdminLeadsView({ Icon }: { Icon: IconComponent }) {
+  const [section, setSection] = useState<'leads' | 'groups'>('leads');
+  return (
+    <div className="mkt-wrap">
+      <div className="mkt-subnav">
+        <button type="button" className={section === 'leads' ? 'active' : ''} onClick={() => setSection('leads')}>
+          <Icon name="user" /> Baza leadów
+        </button>
+        <button type="button" className={section === 'groups' ? 'active' : ''} onClick={() => setSection('groups')}>
+          <Icon name="list" /> Grupy docelowe
+        </button>
+      </div>
+      {section === 'leads' ? <LeadsSection Icon={Icon} /> : <TargetGroupsSection Icon={Icon} />}
+    </div>
+  );
+}
+
+function LeadsSection({ Icon }: { Icon: IconComponent }) {
+  const [leads, setLeads] = useState<Lead[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [sourceFilter, setSourceFilter] = useState<'' | LeadSource>('');
+  const [search, setSearch] = useState('');
+  const [busyId, setBusyId] = useState<number | null>(null);
+
+  // Formularz nowego leada.
+  const [form, setForm] = useState({ name: '', email: '', phone: '', city: '', tags: '' });
+  const [saving, setSaving] = useState(false);
+
+  // Import.
+  const [csv, setCsv] = useState('');
+  const [importTag, setImportTag] = useState('');
+  const [importing, setImporting] = useState(false);
+  const [importResult, setImportResult] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const params = new URLSearchParams();
+      if (sourceFilter) params.set('source', sourceFilter);
+      if (search.trim()) params.set('search', search.trim());
+      const data = await apiFetch<Lead[]>(`/admin/leads${params.toString() ? `?${params.toString()}` : ''}`);
+      setLeads(data);
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [sourceFilter, search]);
+
+  useEffect(() => {
+    const timer = setTimeout(load, 200);
+    return () => clearTimeout(timer);
+  }, [load]);
+
+  const addLead = async () => {
+    if (!form.email.trim() && !form.phone.trim()) {
+      setError('Podaj co najmniej e-mail lub telefon.');
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await apiFetch<Lead>('/admin/leads', {
+        method: 'POST',
+        body: JSON.stringify({
+          name: form.name.trim() || null,
+          email: form.email.trim() || null,
+          phone: form.phone.trim() || null,
+          city: form.city.trim() || null,
+          tags: form.tags.split(',').map((t) => t.trim()).filter(Boolean),
+        }),
+      });
+      setForm({ name: '', email: '', phone: '', city: '', tags: '' });
+      await load();
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const runImport = async () => {
+    if (!csv.trim()) return;
+    setImporting(true);
+    setImportResult(null);
+    setError(null);
+    try {
+      const res = await apiFetch<{ imported: number; skipped: number; messages: string[] }>(
+        '/admin/leads/import',
+        { method: 'POST', body: JSON.stringify({ csv, defaultTag: importTag.trim() || null }) },
+      );
+      setImportResult(`Dodano ${res.imported}, pominięto ${res.skipped}.`);
+      setCsv('');
+      await load();
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setImporting(false);
+    }
+  };
+
+  const optOut = async (lead: Lead) => {
+    setBusyId(lead.id);
+    try {
+      await apiFetch(`/admin/leads/${lead.id}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ emailOptOut: true, smsOptOut: true }),
+      });
+      await load();
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const remove = async (lead: Lead) => {
+    setBusyId(lead.id);
+    try {
+      await apiFetch(`/admin/leads/${lead.id}`, { method: 'DELETE' });
+      await load();
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  return (
+    <div className="admin-card mkt-card">
+      <div className="admin-card-head">
+        <h2>Baza leadów</h2>
+        <span className="mkt-count">{leads.length} kontaktów</span>
+      </div>
+
+      <div className="mkt-toolbar">
+        <div className="mkt-search">
+          <Icon name="search" />
+          <input
+            type="search"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Szukaj po nazwie, e-mailu, telefonie, mieście..."
+          />
+        </div>
+        <select value={sourceFilter} onChange={(e) => setSourceFilter(e.target.value as '' | LeadSource)}>
+          <option value="">Wszystkie źródła</option>
+          {ALL_SOURCES.map((s) => (
+            <option key={s} value={s}>{SOURCE_LABEL[s]}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="mkt-addrow">
+        <input placeholder="Nazwa / imię" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
+        <input placeholder="E-mail" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
+        <input placeholder="Telefon" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
+        <input placeholder="Miasto" value={form.city} onChange={(e) => setForm({ ...form, city: e.target.value })} />
+        <input placeholder="Tagi (po przecinku)" value={form.tags} onChange={(e) => setForm({ ...form, tags: e.target.value })} />
+        <button type="button" className="admin-btn approve" onClick={addLead} disabled={saving}>
+          {saving ? 'Zapisywanie...' : 'Dodaj lead'}
+        </button>
+      </div>
+
+      {error && <p className="mkt-error">{error}</p>}
+
+      {loading ? (
+        <p className="admin-empty">Ładowanie...</p>
+      ) : leads.length === 0 ? (
+        <p className="admin-empty">Brak leadów. Dodaj kontakt lub zaimportuj listę.</p>
+      ) : (
+        <div className="mkt-table-scroll">
+          <table className="mkt-table">
+            <thead>
+              <tr>
+                <th>Nazwa</th><th>Kontakt</th><th>Miasto</th><th>Źródło</th><th>Status</th><th>Zgody</th><th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {leads.map((lead) => (
+                <tr key={lead.id}>
+                  <td>{lead.name || '—'}</td>
+                  <td>
+                    <div className="mkt-contact">
+                      {lead.email && <span>{lead.email}</span>}
+                      {lead.phone && <span className="mkt-muted">{lead.phone}</span>}
+                    </div>
+                  </td>
+                  <td>{lead.city || '—'}</td>
+                  <td><span className="mkt-chip">{SOURCE_LABEL[lead.source]}</span></td>
+                  <td>{STATUS_LABEL[lead.status]}</td>
+                  <td>
+                    <div className="mkt-consents">
+                      <span className={`mkt-dot ${lead.emailConsent && !lead.emailOptOut ? 'on' : 'off'}`} title="Zgoda e-mail">@</span>
+                      <span className={`mkt-dot ${lead.smsConsent && !lead.smsOptOut ? 'on' : 'off'}`} title="Zgoda SMS">SMS</span>
+                    </div>
+                  </td>
+                  <td className="mkt-actions">
+                    {!(lead.emailOptOut && lead.smsOptOut) && (
+                      <button type="button" title="Wypisz z kampanii" disabled={busyId === lead.id} onClick={() => optOut(lead)}>
+                        <Icon name="lock" />
+                      </button>
+                    )}
+                    <button type="button" title="Usuń lead" disabled={busyId === lead.id} onClick={() => remove(lead)}>
+                      <Icon name="trash" />
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      <div className="mkt-import">
+        <h3><Icon name="document" /> Import kontaktów (CSV)</h3>
+        <p className="mkt-muted">Kolumny: <code>nazwa;email;telefon;miasto</code> — jeden kontakt w wierszu, nagłówek opcjonalny.</p>
+        <textarea
+          rows={4}
+          value={csv}
+          onChange={(e) => setCsv(e.target.value)}
+          placeholder={'Jan Kowalski;jan@example.pl;600100200;Warszawa'}
+        />
+        <div className="mkt-import-actions">
+          <input placeholder="Tag dla importu (opcjonalnie)" value={importTag} onChange={(e) => setImportTag(e.target.value)} />
+          <button type="button" className="admin-btn approve" onClick={runImport} disabled={importing || !csv.trim()}>
+            {importing ? 'Importowanie...' : 'Importuj'}
+          </button>
+        </div>
+        {importResult && <p className="mkt-ok">{importResult}</p>}
+      </div>
+    </div>
+  );
+}
+
+function TargetGroupsSection({ Icon }: { Icon: IconComponent }) {
+  const emptyForm = {
+    name: '',
+    description: '',
+    sources: [] as LeadSource[],
+    city: '',
+    tag: '',
+    requireEmail: false,
+    requirePhone: false,
+    requireEmailConsent: false,
+    requireSmsConsent: false,
+  };
+  const [groups, setGroups] = useState<TargetGroup[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [form, setForm] = useState(emptyForm);
+  const [saving, setSaving] = useState(false);
+  const [busyId, setBusyId] = useState<number | null>(null);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      setGroups(await apiFetch<TargetGroup[]>('/admin/target-groups'));
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  const toggleSource = (s: LeadSource) => {
+    setForm((f) => ({
+      ...f,
+      sources: f.sources.includes(s) ? f.sources.filter((x) => x !== s) : [...f.sources, s],
+    }));
+  };
+
+  const create = async () => {
+    if (!form.name.trim()) {
+      setError('Podaj nazwę grupy.');
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await apiFetch<TargetGroup>('/admin/target-groups', {
+        method: 'POST',
+        body: JSON.stringify({
+          name: form.name.trim(),
+          description: form.description.trim() || null,
+          sources: form.sources,
+          city: form.city.trim() || null,
+          tag: form.tag.trim() || null,
+          requireEmail: form.requireEmail,
+          requirePhone: form.requirePhone,
+          requireEmailConsent: form.requireEmailConsent,
+          requireSmsConsent: form.requireSmsConsent,
+        }),
+      });
+      setForm(emptyForm);
+      await load();
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async (group: TargetGroup) => {
+    setBusyId(group.id);
+    try {
+      await apiFetch(`/admin/target-groups/${group.id}`, { method: 'DELETE' });
+      await load();
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  return (
+    <div className="mkt-grid-2">
+      <div className="admin-card mkt-card">
+        <div className="admin-card-head"><h2>Nowa grupa docelowa</h2></div>
+        <p className="mkt-muted">Grupa to dynamiczny segment — odbiorcy wyliczają się na bieżąco z kryteriów.</p>
+        <div className="mkt-form">
+          <label>Nazwa
+            <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="np. Deweloperzy Warszawa" />
+          </label>
+          <label>Opis
+            <input value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Opcjonalny opis" />
+          </label>
+          <fieldset className="mkt-fieldset">
+            <legend>Źródła (puste = wszystkie)</legend>
+            <div className="mkt-checks">
+              {ALL_SOURCES.map((s) => (
+                <label key={s} className="mkt-check">
+                  <input type="checkbox" checked={form.sources.includes(s)} onChange={() => toggleSource(s)} />
+                  {SOURCE_LABEL[s]}
+                </label>
+              ))}
+            </div>
+          </fieldset>
+          <div className="mkt-form-row">
+            <label>Miasto
+              <input value={form.city} onChange={(e) => setForm({ ...form, city: e.target.value })} placeholder="dowolne" />
+            </label>
+            <label>Tag
+              <input value={form.tag} onChange={(e) => setForm({ ...form, tag: e.target.value })} placeholder="dowolny" />
+            </label>
+          </div>
+          <div className="mkt-checks mkt-checks-col">
+            <label className="mkt-check"><input type="checkbox" checked={form.requireEmail} onChange={(e) => setForm({ ...form, requireEmail: e.target.checked })} /> Wymagany e-mail</label>
+            <label className="mkt-check"><input type="checkbox" checked={form.requirePhone} onChange={(e) => setForm({ ...form, requirePhone: e.target.checked })} /> Wymagany telefon</label>
+            <label className="mkt-check"><input type="checkbox" checked={form.requireEmailConsent} onChange={(e) => setForm({ ...form, requireEmailConsent: e.target.checked })} /> Tylko ze zgodą e-mail</label>
+            <label className="mkt-check"><input type="checkbox" checked={form.requireSmsConsent} onChange={(e) => setForm({ ...form, requireSmsConsent: e.target.checked })} /> Tylko ze zgodą SMS</label>
+          </div>
+          {error && <p className="mkt-error">{error}</p>}
+          <button type="button" className="admin-btn approve" onClick={create} disabled={saving}>
+            {saving ? 'Zapisywanie...' : 'Utwórz grupę'}
+          </button>
+        </div>
+      </div>
+
+      <div className="admin-card mkt-card">
+        <div className="admin-card-head">
+          <h2>Grupy docelowe</h2>
+          <span className="mkt-count">{groups.length}</span>
+        </div>
+        {loading ? (
+          <p className="admin-empty">Ładowanie...</p>
+        ) : groups.length === 0 ? (
+          <p className="admin-empty">Brak grup. Utwórz pierwszy segment.</p>
+        ) : (
+          <ul className="mkt-list">
+            {groups.map((g) => (
+              <li key={g.id}>
+                <div>
+                  <strong>{g.name}</strong>
+                  {g.description && <span className="mkt-muted"> — {g.description}</span>}
+                  <div className="mkt-group-meta">
+                    <span className="mkt-badge">{g.memberCount} odbiorców</span>
+                    {g.sources.length > 0 && <span className="mkt-muted">{g.sources.map((s) => SOURCE_LABEL[s]).join(', ')}</span>}
+                    {g.city && <span className="mkt-muted">miasto: {g.city}</span>}
+                    {g.requireEmailConsent && <span className="mkt-muted">zgoda e-mail</span>}
+                    {g.requireSmsConsent && <span className="mkt-muted">zgoda SMS</span>}
+                  </div>
+                </div>
+                <button type="button" className="mkt-icon-btn" title="Usuń grupę" disabled={busyId === g.id} onClick={() => remove(g)}>
+                  <Icon name="trash" />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ============================ KAMPANIE ============================ */
+
+export function AdminCampaignsView({ Icon }: { Icon: IconComponent }) {
+  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
+  const [groups, setGroups] = useState<TargetGroup[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [busyId, setBusyId] = useState<number | null>(null);
+  const [statsFor, setStatsFor] = useState<{ id: number; stats: CampaignStats } | null>(null);
+
+  const empty = { name: '', channel: 'EMAIL' as Channel, subject: '', body: '', targetGroupId: '', dailyLimit: 200, scheduledAt: '' };
+  const [form, setForm] = useState(empty);
+  const [saving, setSaving] = useState(false);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [c, g] = await Promise.all([
+        apiFetch<Campaign[]>('/admin/campaigns'),
+        apiFetch<TargetGroup[]>('/admin/target-groups'),
+      ]);
+      setCampaigns(c);
+      setGroups(g);
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  const create = async () => {
+    if (!form.name.trim() || !form.body.trim() || !form.targetGroupId) {
+      setError('Uzupełnij nazwę, treść i grupę docelową.');
+      return;
+    }
+    if (form.channel === 'EMAIL' && !form.subject.trim()) {
+      setError('Kampania e-mail wymaga tematu.');
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await apiFetch<Campaign>('/admin/campaigns', {
+        method: 'POST',
+        body: JSON.stringify({
+          name: form.name.trim(),
+          channel: form.channel,
+          subject: form.channel === 'EMAIL' ? form.subject.trim() : null,
+          body: form.body,
+          targetGroupId: Number(form.targetGroupId),
+          dailyLimit: Number(form.dailyLimit) || 1,
+          scheduledAt: form.scheduledAt ? new Date(form.scheduledAt).toISOString() : null,
+        }),
+      });
+      setForm(empty);
+      await load();
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const action = async (id: number, path: string) => {
+    setBusyId(id);
+    setError(null);
+    try {
+      await apiFetch(`/admin/campaigns/${id}/${path}`, { method: 'POST' });
+      await load();
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const remove = async (id: number) => {
+    setBusyId(id);
+    try {
+      await apiFetch(`/admin/campaigns/${id}`, { method: 'DELETE' });
+      if (statsFor?.id === id) setStatsFor(null);
+      await load();
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const showStats = async (id: number) => {
+    try {
+      const stats = await apiFetch<CampaignStats>(`/admin/campaigns/${id}/stats`);
+      setStatsFor({ id, stats });
+    } catch (err) {
+      setError(errorMessage(err));
+    }
+  };
+
+  return (
+    <div className="mkt-grid-2">
+      <div className="admin-card mkt-card">
+        <div className="admin-card-head"><h2>Nowa kampania</h2></div>
+        <div className="mkt-form">
+          <label>Nazwa
+            <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="np. Newsletter lipiec" />
+          </label>
+          <div className="mkt-form-row">
+            <label>Kanał
+              <select value={form.channel} onChange={(e) => setForm({ ...form, channel: e.target.value as Channel })}>
+                <option value="EMAIL">E-mail</option>
+                <option value="SMS">SMS</option>
+              </select>
+            </label>
+            <label>Grupa docelowa
+              <select value={form.targetGroupId} onChange={(e) => setForm({ ...form, targetGroupId: e.target.value })}>
+                <option value="">— wybierz —</option>
+                {groups.map((g) => (
+                  <option key={g.id} value={g.id}>{g.name} ({g.memberCount})</option>
+                ))}
+              </select>
+            </label>
+          </div>
+          {form.channel === 'EMAIL' && (
+            <label>Temat
+              <input value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })} placeholder="Temat wiadomości" />
+            </label>
+          )}
+          <label>Treść <span className="mkt-muted">(użyj {'{{name}}'} dla personalizacji; stopka z rezygnacją dodawana automatycznie)</span>
+            <textarea rows={5} value={form.body} onChange={(e) => setForm({ ...form, body: e.target.value })} placeholder="Cześć {{name}}, ..." />
+          </label>
+          <div className="mkt-form-row">
+            <label>Dzienny limit
+              <input type="number" min={1} value={form.dailyLimit} onChange={(e) => setForm({ ...form, dailyLimit: Number(e.target.value) })} />
+            </label>
+            <label>Zaplanuj na (opcjonalnie)
+              <input type="datetime-local" value={form.scheduledAt} onChange={(e) => setForm({ ...form, scheduledAt: e.target.value })} />
+            </label>
+          </div>
+          {error && <p className="mkt-error">{error}</p>}
+          <button type="button" className="admin-btn approve" onClick={create} disabled={saving}>
+            {saving ? 'Zapisywanie...' : 'Utwórz kampanię (robocza)'}
+          </button>
+        </div>
+      </div>
+
+      <div className="admin-card mkt-card">
+        <div className="admin-card-head">
+          <h2>Kampanie</h2>
+          <span className="mkt-count">{campaigns.length}</span>
+        </div>
+        {loading ? (
+          <p className="admin-empty">Ładowanie...</p>
+        ) : campaigns.length === 0 ? (
+          <p className="admin-empty">Brak kampanii.</p>
+        ) : (
+          <ul className="mkt-list">
+            {campaigns.map((c) => (
+              <li key={c.id} className="mkt-campaign">
+                <div>
+                  <strong>{c.name}</strong>
+                  <span className={`mkt-status mkt-status-${c.status.toLowerCase()}`}>{CAMPAIGN_STATUS_LABEL[c.status]}</span>
+                  <div className="mkt-group-meta">
+                    <span className="mkt-chip">{c.channel === 'EMAIL' ? 'E-mail' : 'SMS'}</span>
+                    <span className="mkt-muted">{c.sentCount}/{c.totalRecipients} wysłanych</span>
+                    <span className="mkt-muted">limit/dzień: {c.dailyLimit}</span>
+                  </div>
+                  {statsFor?.id === c.id && (
+                    <div className="mkt-stats">
+                      w kolejce: {statsFor.stats.queued} · wysłane: {statsFor.stats.sent} · dostarczone: {statsFor.stats.delivered} · błędy: {statsFor.stats.failed}
+                    </div>
+                  )}
+                </div>
+                <div className="mkt-campaign-actions">
+                  {(c.status === 'DRAFT' || c.status === 'PAUSED') && (
+                    <button type="button" className="admin-btn approve" disabled={busyId === c.id} onClick={() => action(c.id, 'schedule')}>
+                      Uruchom
+                    </button>
+                  )}
+                  {(c.status === 'SENDING' || c.status === 'SCHEDULED') && (
+                    <button type="button" className="admin-btn" disabled={busyId === c.id} onClick={() => action(c.id, 'pause')}>
+                      Wstrzymaj
+                    </button>
+                  )}
+                  <button type="button" className="mkt-icon-btn" title="Statystyki" onClick={() => showStats(c.id)}><Icon name="chart" /></button>
+                  <button type="button" className="mkt-icon-btn" title="Usuń" disabled={busyId === c.id} onClick={() => remove(c.id)}><Icon name="trash" /></button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ============================ KONFIGURACJA SMTP + SMS ============================ */
+
+type SmtpConfig = {
+  host: string | null;
+  port: number | null;
+  sslEnabled: boolean;
+  username: string | null;
+  fromName: string | null;
+  contactFormRecipient: string | null;
+  enabled: boolean;
+  passwordSet: boolean;
+};
+
+type SmsConfig = {
+  endpointUrl: string | null;
+  creator: string | null;
+  timeoutSeconds: number | null;
+  enabled: boolean;
+  apiKeySet: boolean;
+};
+
+export function AdminMailConfigView({ Icon }: { Icon: IconComponent }) {
+  return (
+    <div className="mkt-wrap">
+      <SmtpCard Icon={Icon} />
+      <SmsCard Icon={Icon} />
+    </div>
+  );
+}
+
+function SmtpCard({ Icon }: { Icon: IconComponent }) {
+  const [config, setConfig] = useState<SmtpConfig | null>(null);
+  const [password, setPassword] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [note, setNote] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [testTo, setTestTo] = useState('');
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      setConfig(await apiFetch<SmtpConfig>('/admin/mail-config/smtp'));
+    } catch (err) {
+      setError(errorMessage(err));
+    }
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  if (!config) return <div className="admin-card mkt-card"><p className="admin-empty">Ładowanie konfiguracji SMTP...</p></div>;
+
+  const set = (patch: Partial<SmtpConfig>) => setConfig({ ...config, ...patch });
+
+  const save = async () => {
+    setSaving(true);
+    setNote(null);
+    setError(null);
+    try {
+      const updated = await apiFetch<SmtpConfig>('/admin/mail-config/smtp', {
+        method: 'PUT',
+        body: JSON.stringify({
+          host: config.host,
+          port: config.port,
+          sslEnabled: config.sslEnabled,
+          username: config.username,
+          fromName: config.fromName,
+          contactFormRecipient: config.contactFormRecipient,
+          enabled: config.enabled,
+          password: password || null,
+        }),
+      });
+      setConfig(updated);
+      setPassword('');
+      setNote('Zapisano ustawienia SMTP.');
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const test = async () => {
+    if (!testTo.trim()) return;
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const res = await apiFetch<{ ok: boolean; error: string | null }>('/admin/mail-config/smtp/test', {
+        method: 'POST',
+        body: JSON.stringify({ recipient: testTo.trim() }),
+      });
+      setTestResult(res.ok ? 'Wiadomość testowa wysłana.' : `Błąd: ${res.error}`);
+    } catch (err) {
+      setTestResult(`Błąd: ${errorMessage(err)}`);
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  return (
+    <div className="admin-card mkt-card mkt-config">
+      <div className="admin-card-head mkt-config-head">
+        <span className="mkt-config-icon"><Icon name="mail" /></span>
+        <h2>Konto e-mail (SMTP)</h2>
+      </div>
+      <div className="mkt-config-grid">
+        <label>Adres odbiorcy wiadomości z formularza kontaktowego
+          <input value={config.contactFormRecipient ?? ''} onChange={(e) => set({ contactFormRecipient: e.target.value })} placeholder="np. kontakt@twojadomena.pl" />
+        </label>
+        <label>Wyświetlana nazwa nadawcy
+          <input value={config.fromName ?? ''} onChange={(e) => set({ fromName: e.target.value })} placeholder="np. Marketing" />
+        </label>
+        <label>Serwer SMTP
+          <input value={config.host ?? ''} onChange={(e) => set({ host: e.target.value })} placeholder="np. smtp.twojadomena.pl" />
+        </label>
+        <label>Hasło do konta e-mail {config.passwordSet && <span className="mkt-badge-set"><Icon name="lock" /> ustawione</span>}
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="wpisz, aby zmienić" />
+        </label>
+        <label>Port SMTP (465 = SSL)
+          <input type="number" value={config.port ?? ''} onChange={(e) => set({ port: e.target.value ? Number(e.target.value) : null })} placeholder="465" />
+        </label>
+        <label>Użyj SSL dla połączenia SMTP
+          <select value={config.sslEnabled ? 'on' : 'off'} onChange={(e) => set({ sslEnabled: e.target.value === 'on' })}>
+            <option value="on">Włączone</option>
+            <option value="off">Wyłączone</option>
+          </select>
+        </label>
+        <label>Login SMTP / adres nadawcy
+          <input value={config.username ?? ''} onChange={(e) => set({ username: e.target.value })} placeholder="np. marketing@twojadomena.pl" />
+        </label>
+        <label>Wysyłka kampanii e-mail aktywna
+          <select value={config.enabled ? 'on' : 'off'} onChange={(e) => set({ enabled: e.target.value === 'on' })}>
+            <option value="off">Wyłączone (sandbox)</option>
+            <option value="on">Włączone</option>
+          </select>
+        </label>
+      </div>
+      {error && <p className="mkt-error">{error}</p>}
+      {note && <p className="mkt-ok">{note}</p>}
+      <div className="mkt-config-save">
+        <button type="button" className="admin-btn approve" onClick={save} disabled={saving}>
+          {saving ? 'Zapisywanie...' : 'Zapisz ustawienia'}
+        </button>
+      </div>
+      <div className="mkt-test">
+        <h3>Test konfiguracji</h3>
+        <div className="mkt-test-row">
+          <input value={testTo} onChange={(e) => setTestTo(e.target.value)} placeholder="Adres e-mail do testu" />
+          <button type="button" className="admin-btn" onClick={test} disabled={testing || !testTo.trim()}>
+            <Icon name="mail" /> {testing ? 'Wysyłanie...' : 'Wyślij (e-mail)'}
+          </button>
+        </div>
+        {testResult && <p className={testResult.startsWith('Błąd') ? 'mkt-error' : 'mkt-ok'}>{testResult}</p>}
+      </div>
+    </div>
+  );
+}
+
+function SmsCard({ Icon }: { Icon: IconComponent }) {
+  const [config, setConfig] = useState<SmsConfig | null>(null);
+  const [apiKey, setApiKey] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [note, setNote] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [testTo, setTestTo] = useState('');
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    try {
+      setConfig(await apiFetch<SmsConfig>('/admin/mail-config/sms'));
+    } catch (err) {
+      setError(errorMessage(err));
+    }
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  if (!config) return <div className="admin-card mkt-card"><p className="admin-empty">Ładowanie konfiguracji SMS...</p></div>;
+
+  const set = (patch: Partial<SmsConfig>) => setConfig({ ...config, ...patch });
+
+  const save = async () => {
+    setSaving(true);
+    setNote(null);
+    setError(null);
+    try {
+      const updated = await apiFetch<SmsConfig>('/admin/mail-config/sms', {
+        method: 'PUT',
+        body: JSON.stringify({
+          endpointUrl: config.endpointUrl,
+          creator: config.creator,
+          timeoutSeconds: config.timeoutSeconds,
+          enabled: config.enabled,
+          apiKey: apiKey || null,
+        }),
+      });
+      setConfig(updated);
+      setApiKey('');
+      setNote('Zapisano ustawienia bramki SMS.');
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const test = async () => {
+    if (!testTo.trim()) return;
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const res = await apiFetch<{ ok: boolean; error: string | null }>('/admin/mail-config/sms/test', {
+        method: 'POST',
+        body: JSON.stringify({ recipient: testTo.trim() }),
+      });
+      setTestResult(res.ok ? 'SMS testowy wysłany.' : `Błąd: ${res.error}`);
+    } catch (err) {
+      setTestResult(`Błąd: ${errorMessage(err)}`);
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  return (
+    <div className="admin-card mkt-card mkt-config">
+      <div className="admin-card-head mkt-config-head">
+        <span className="mkt-config-icon"><Icon name="message" /></span>
+        <h2>Bramka SMS</h2>
+      </div>
+      <div className="mkt-config-grid">
+        <label>Klucz API bramki SMS {config.apiKeySet && <span className="mkt-badge-set"><Icon name="lock" /> ustawione</span>}
+          <input type="password" value={apiKey} onChange={(e) => setApiKey(e.target.value)} placeholder="wpisz, aby zmienić" />
+        </label>
+        <label>Znacznik źródła wiadomości (pole creator, max 50 znaków)
+          <input maxLength={50} value={config.creator ?? ''} onChange={(e) => set({ creator: e.target.value })} placeholder="np. Marketing" />
+        </label>
+        <label>Czy wysyłka SMS jest aktywna
+          <select value={config.enabled ? 'on' : 'off'} onChange={(e) => set({ enabled: e.target.value === 'on' })}>
+            <option value="off">Wyłączone (sandbox)</option>
+            <option value="on">Włączone</option>
+          </select>
+        </label>
+        <label>Pełny URL endpointu bramki SMS
+          <input value={config.endpointUrl ?? ''} onChange={(e) => set({ endpointUrl: e.target.value })} placeholder="https://api.softspm.pl/send_sms_api.php" />
+        </label>
+        <label>Timeout żądania HTTP do bramki (s)
+          <input type="number" value={config.timeoutSeconds ?? ''} onChange={(e) => set({ timeoutSeconds: e.target.value ? Number(e.target.value) : null })} placeholder="10" />
+        </label>
+      </div>
+      {error && <p className="mkt-error">{error}</p>}
+      {note && <p className="mkt-ok">{note}</p>}
+      <div className="mkt-config-save">
+        <button type="button" className="admin-btn approve" onClick={save} disabled={saving}>
+          {saving ? 'Zapisywanie...' : 'Zapisz ustawienia'}
+        </button>
+      </div>
+      <div className="mkt-test">
+        <h3>Test konfiguracji</h3>
+        <div className="mkt-test-row">
+          <input value={testTo} onChange={(e) => setTestTo(e.target.value)} placeholder="Numer telefonu do testu" />
+          <button type="button" className="admin-btn" onClick={test} disabled={testing || !testTo.trim()}>
+            <Icon name="message" /> {testing ? 'Wysyłanie...' : 'Wyślij (SMS)'}
+          </button>
+        </div>
+        {testResult && <p className={testResult.startsWith('Błąd') ? 'mkt-error' : 'mkt-ok'}>{testResult}</p>}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 5f2daca..9d194ea 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -26644,3 +26644,108 @@ svg {
   padding: 18px 4px;
   text-align: center;
 }
+
+/* ===================== Panel admina: moduł marketingowy (Leady / Kampanie / Konfiguracja) ===================== */
+.mkt-wrap { display: grid; gap: 18px; }
+.mkt-subnav { display: flex; gap: 8px; flex-wrap: wrap; }
+.mkt-subnav button {
+  display: inline-flex; align-items: center; gap: 6px;
+  background: #fff; border: 1px solid #d8e3ef; border-radius: 9px;
+  color: #304760; cursor: pointer; font-weight: 800; font-size: 13px; padding: 8px 14px;
+}
+.mkt-subnav button.active { background: #0f2f5b; border-color: #0f2f5b; color: #fff; }
+.mkt-subnav button svg { width: 15px; height: 15px; }
+
+.mkt-card { display: grid; gap: 14px; }
+.mkt-count, .mkt-badge, .mkt-chip {
+  font-size: 12px; font-weight: 800; color: #304760;
+  background: #eef3f9; border-radius: 999px; padding: 3px 10px;
+}
+.mkt-badge { background: #e4f0ff; color: #1256a0; }
+.mkt-chip { background: #f1f4f8; padding: 2px 8px; }
+
+.mkt-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+.mkt-search { position: relative; flex: 1 1 260px; display: flex; align-items: center; }
+.mkt-search svg { position: absolute; left: 10px; width: 15px; height: 15px; color: #8aa0b6; }
+.mkt-search input { width: 100%; padding-left: 32px; }
+.mkt-toolbar select, .mkt-toolbar input { padding: 9px 11px; border: 1px solid #d8e3ef; border-radius: 8px; font-size: 13px; }
+
+.mkt-addrow { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 8px; align-items: center; }
+.mkt-addrow input { padding: 9px 11px; border: 1px solid #d8e3ef; border-radius: 8px; font-size: 13px; }
+@media (max-width: 900px) { .mkt-addrow { grid-template-columns: 1fr 1fr; } }
+
+.mkt-table-scroll { overflow-x: auto; }
+.mkt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.mkt-table th { text-align: left; color: #6b7f96; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid #e6edf4; }
+.mkt-table td { padding: 10px; border-bottom: 1px solid #f0f4f8; color: #24374d; vertical-align: middle; }
+.mkt-contact { display: grid; }
+.mkt-muted { color: #8195a9; font-weight: 600; }
+.mkt-consents { display: flex; gap: 6px; }
+.mkt-dot { font-size: 10px; font-weight: 800; border-radius: 6px; padding: 2px 6px; }
+.mkt-dot.on { background: #dff5e8; color: #12784a; }
+.mkt-dot.off { background: #f3e2e2; color: #a53b31; }
+.mkt-actions { display: flex; gap: 6px; justify-content: flex-end; }
+.mkt-actions button, .mkt-icon-btn {
+  background: #fff; border: 1px solid #d8e3ef; border-radius: 7px; cursor: pointer;
+  color: #46617d; padding: 5px 7px; display: inline-flex; align-items: center;
+}
+.mkt-actions button svg, .mkt-icon-btn svg { width: 15px; height: 15px; }
+.mkt-actions button:disabled, .mkt-icon-btn:disabled { opacity: .5; cursor: default; }
+
+.mkt-import { border-top: 1px solid #eef2f6; padding-top: 14px; display: grid; gap: 8px; }
+.mkt-import h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; color: #24374d; }
+.mkt-import h3 svg { width: 16px; height: 16px; }
+.mkt-import textarea, .mkt-form textarea { width: 100%; border: 1px solid #d8e3ef; border-radius: 8px; padding: 10px; font-size: 13px; font-family: inherit; resize: vertical; }
+.mkt-import-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.mkt-import-actions input { flex: 1 1 220px; padding: 9px 11px; border: 1px solid #d8e3ef; border-radius: 8px; }
+
+.mkt-grid-2 { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 18px; align-items: start; }
+@media (max-width: 1000px) { .mkt-grid-2 { grid-template-columns: 1fr; } }
+
+.mkt-form { display: grid; gap: 12px; }
+.mkt-form label { display: grid; gap: 5px; font-size: 12px; font-weight: 800; color: #46617d; }
+.mkt-form input, .mkt-form select { padding: 9px 11px; border: 1px solid #d8e3ef; border-radius: 8px; font-size: 13px; font-weight: 500; }
+.mkt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
+.mkt-fieldset { border: 1px solid #e6edf4; border-radius: 8px; padding: 10px 12px; }
+.mkt-fieldset legend { font-size: 11px; font-weight: 800; color: #6b7f96; padding: 0 6px; }
+.mkt-checks { display: flex; gap: 12px; flex-wrap: wrap; }
+.mkt-checks-col { flex-direction: column; gap: 8px; }
+.mkt-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #33475c; }
+.mkt-check input { width: auto; }
+
+.mkt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
+.mkt-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #e9eff5; border-radius: 10px; padding: 12px 14px; }
+.mkt-list li strong { color: #17293c; }
+.mkt-group-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; align-items: center; }
+
+.mkt-campaign { align-items: flex-start; }
+.mkt-campaign-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
+.mkt-status { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 9px; margin-left: 8px; }
+.mkt-status-draft { background: #eef2f6; color: #5b6b7d; }
+.mkt-status-scheduled { background: #e4f0ff; color: #1256a0; }
+.mkt-status-sending { background: #fff2d8; color: #a9720c; }
+.mkt-status-paused { background: #f3e9df; color: #8a5a1f; }
+.mkt-status-completed { background: #dff5e8; color: #12784a; }
+.mkt-status-cancelled { background: #f3e2e2; color: #a53b31; }
+.mkt-stats { margin-top: 8px; font-size: 12px; color: #46617d; background: #f6f9fc; border-radius: 8px; padding: 8px 10px; }
+
+.mkt-config { max-width: 960px; }
+.mkt-config-head { display: flex; align-items: center; gap: 10px; }
+.mkt-config-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: #eef3fb; color: #1256a0; }
+.mkt-config-icon svg { width: 18px; height: 18px; }
+.mkt-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
+@media (max-width: 760px) { .mkt-config-grid { grid-template-columns: 1fr; } .mkt-form-row { grid-template-columns: 1fr; } }
+.mkt-config-grid label { display: grid; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #6b7f96; }
+.mkt-config-grid input, .mkt-config-grid select { padding: 10px 12px; border: 1px solid #d8e3ef; border-radius: 8px; font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: normal; color: #17293c; }
+.mkt-badge-set { display: inline-flex; align-items: center; gap: 4px; text-transform: none; letter-spacing: normal; font-size: 11px; font-weight: 800; color: #1256a0; background: #e4f0ff; border-radius: 999px; padding: 2px 8px; }
+.mkt-badge-set svg { width: 12px; height: 12px; }
+.mkt-config-save { display: flex; justify-content: flex-end; }
+.mkt-test { border-top: 1px solid #eef2f6; padding-top: 14px; display: grid; gap: 8px; }
+.mkt-test h3 { margin: 0; font-size: 14px; color: #24374d; }
+.mkt-test-row { display: flex; gap: 10px; flex-wrap: wrap; }
+.mkt-test-row input { flex: 1 1 240px; padding: 10px 12px; border: 1px solid #d8e3ef; border-radius: 8px; }
+.mkt-test-row .admin-btn { display: inline-flex; align-items: center; gap: 6px; }
+.mkt-test-row .admin-btn svg { width: 14px; height: 14px; }
+
+.mkt-error { color: #b3261e; font-size: 13px; font-weight: 600; margin: 0; }
+.mkt-ok { color: #12784a; font-size: 13px; font-weight: 600; margin: 0; }

From f072ed0115922ceffdbe83c92f0fee5414078e8f Mon Sep 17 00:00:00 2001
From: pascal <zatorskipascal@gmail.com>
Date: Thu, 23 Jul 2026 23:24:22 +0200
Subject: [PATCH 04/10] Dodaj react-router-dom, mape tras i ProtectedRoute

Fundament migracji z useState(view) na prawdziwy routing:
- react-router-dom 7 w zaleznosciach
- BrowserRouter w main.tsx (nginx ma juz try_files, wiec czyste sciezki dzialaja)
- routes.ts: centralna mapa adresow + helpery listingPath/mapPath/adminTabPath
- ProtectedRoute z obsluga stanu loading z AuthProvider

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/package-lock.json      |  60 ++++++++++++++++-
 frontend/package.json           |   3 +-
 frontend/src/ProtectedRoute.tsx |  37 +++++++++++
 frontend/src/main.tsx           |  13 ++--
 frontend/src/routes.ts          | 114 ++++++++++++++++++++++++++++++++
 frontend/src/styles.css         |   3 +
 6 files changed, 223 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/ProtectedRoute.tsx
 create mode 100644 frontend/src/routes.ts

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 417c18f..6c7e162 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,7 +11,8 @@
         "@types/pdfmake": "^0.3.3",
         "pdfmake": "^0.3.11",
         "react": "18.3.1",
-        "react-dom": "18.3.1"
+        "react-dom": "18.3.1",
+        "react-router-dom": "^7.18.1"
       },
       "devDependencies": {
         "@types/react": "18.3.12",
@@ -536,6 +537,19 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1039,6 +1053,44 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.18.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.1.tgz",
+      "integrity": "sha512-GDLgg3i3uM0aeJO3Fm+TCS+sDQ7gu12T6x0qdTEzcwqEfleci7JwugVNIF3U//0FWKnJT7ptG+20B2jfDqnZAg==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.18.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.18.1.tgz",
+      "integrity": "sha512-KaZh+X/6UtEp28x51AUYZDMg9NGoz2ja3dNHa+ta/tk40vCzKhQ/RypCWBMLbmDr6//E24Vv5uPsrqXFozdkAg==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.18.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/restructure": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz",
@@ -1097,6 +1149,12 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 755e641..d3d753e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,7 +12,8 @@
     "@types/pdfmake": "^0.3.3",
     "pdfmake": "^0.3.11",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-router-dom": "^7.18.1"
   },
   "devDependencies": {
     "@types/react": "18.3.12",
diff --git a/frontend/src/ProtectedRoute.tsx b/frontend/src/ProtectedRoute.tsx
new file mode 100644
index 0000000..0d0ce02
--- /dev/null
+++ b/frontend/src/ProtectedRoute.tsx
@@ -0,0 +1,37 @@
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
+import { useAuth } from './auth';
+import { ROUTES } from './routes';
+
+/**
+ * Bramka dostępu dla tras wymagających zalogowania (i opcjonalnie roli ADMIN).
+ *
+ * Uwaga na `loading`: po odświeżeniu strony token jest w localStorage, ale profil
+ * dociąga się asynchronicznie z /auth/me. Bez tego warunku bezpośrednie wejście na
+ * /konto wyrzucałoby zalogowanego użytkownika na logowanie, zanim profil dotrze.
+ *
+ * To zabezpieczenie interfejsu, nie kontrola dostępu do danych — autoryzację
+ * egzekwuje backend przy każdym endpoincie.
+ */
+export function ProtectedRoute({ requireAdmin = false }: { requireAdmin?: boolean }) {
+  const { user, loading } = useAuth();
+  const location = useLocation();
+
+  if (loading) {
+    return (
+      <div className="route-loading" role="status" aria-live="polite">
+        Wczytywanie…
+      </div>
+    );
+  }
+
+  if (!user) {
+    // Zapamiętujemy cel, żeby po zalogowaniu wrócić dokładnie tam, gdzie użytkownik zmierzał.
+    return <Navigate to={ROUTES.login} state={{ from: `${location.pathname}${location.search}` }} replace />;
+  }
+
+  if (requireAdmin && user.role !== 'ADMIN') {
+    return <Navigate to={ROUTES.account} replace />;
+  }
+
+  return <Outlet />;
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index cc6c8d1..b286115 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import { AuthProvider } from './auth';
 import { NotificationsProvider } from './notifications';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <AuthProvider>
-      <NotificationsProvider>
-        <App />
-      </NotificationsProvider>
-    </AuthProvider>
+    <BrowserRouter>
+      <AuthProvider>
+        <NotificationsProvider>
+          <App />
+        </NotificationsProvider>
+      </AuthProvider>
+    </BrowserRouter>
   </React.StrictMode>,
 );
diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts
new file mode 100644
index 0000000..f5a4356
--- /dev/null
+++ b/frontend/src/routes.ts
@@ -0,0 +1,114 @@
+// Centralna mapa adresów aplikacji. Jedyne źródło prawdy dla nawigacji —
+// komponenty korzystają z ROUTES zamiast trzymać identyfikatory widoków w stanie.
+export const ROUTES = {
+  home: '/',
+  buy: '/kupno',
+  rent: '/wynajem',
+  sell: '/jak-sprzedawac',
+  valuation: '/wycena',
+  priceHistory: '/historia-cen',
+  districtRanking: '/ranking-dzielnic',
+  negotiation: '/negocjacje',
+  comparison: '/konto/porownanie',
+  add: '/dodaj-ogloszenie',
+  services: '/firmy-i-uslugi',
+  guides: '/poradniki',
+  guideBuying: '/poradniki/kupno-mieszkania',
+  creditCalculator: '/kalkulator-zdolnosci',
+  map: '/mapa',
+  login: '/logowanie',
+  account: '/konto',
+  accountSearches: '/konto/wyszukiwania',
+  accountPriceAlerts: '/konto/alerty-cenowe',
+  accountMeetings: '/konto/spotkania',
+  accountListings: '/konto/moje-oferty',
+  accountSettings: '/konto/ustawienia',
+  accountSecurity: '/konto/bezpieczenstwo',
+  accountProfileEdit: '/konto/profil/edycja',
+  accountPublicProfile: '/konto/profil',
+  accountHelpContact: '/konto/pomoc',
+  notifications: '/powiadomienia',
+  favorites: '/ulubione',
+  messages: '/wiadomosci',
+  admin: '/admin',
+  listingDetail: '/oferta/:id',
+} as const;
+
+export type RoutePath = (typeof ROUTES)[keyof typeof ROUTES];
+
+// Szczegóły oferty: identyfikator trafia do adresu, nie do stanu Reacta.
+export function listingPath(id: number): string {
+  return `/oferta/${id}`;
+}
+
+// Negocjacje dotyczą konkretnej oferty — bez identyfikatora pokazujemy pierwszą z listy.
+export function negotiationPath(offerId?: number | null): string {
+  return offerId ? `${ROUTES.negotiation}/${offerId}` : ROUTES.negotiation;
+}
+
+// Mapa: miasto i typ oferty jako parametry zapytania, dzięki czemu wynik da się udostępnić.
+export function mapPath(city?: string, offerType?: 'SALE' | 'RENT'): string {
+  const params = new URLSearchParams();
+  if (city) {
+    params.set('miasto', city);
+  }
+  if (offerType === 'RENT') {
+    params.set('typ', 'wynajem');
+  }
+  const query = params.toString();
+  return query ? `${ROUTES.map}?${query}` : ROUTES.map;
+}
+
+// Zakładki panelu administratora jako podścieżki /admin/*.
+export const ADMIN_TAB_PATHS = {
+  dashboard: '',
+  listings: 'ogloszenia',
+  users: 'uzytkownicy',
+  messages: 'wiadomosci',
+  reports: 'zgloszenia',
+  payments: 'platnosci',
+  stats: 'statystyki',
+  settings: 'ustawienia',
+  moderation: 'weryfikacja',
+  categories: 'kategorie',
+  locations: 'lokalizacje',
+  promotions: 'promocje',
+  forbiddenWords: 'zakazane-slowa',
+  leads: 'leady',
+  campaigns: 'kampanie',
+  mailConfig: 'konfiguracja-wysylki',
+} as const;
+
+export type AdminTabKey = keyof typeof ADMIN_TAB_PATHS;
+
+export function adminTabPath(tab: AdminTabKey): string {
+  const segment = ADMIN_TAB_PATHS[tab];
+  return segment ? `${ROUTES.admin}/${segment}` : ROUTES.admin;
+}
+
+export const ADMIN_PATH_TO_TAB = Object.entries(ADMIN_TAB_PATHS).reduce<Record<string, AdminTabKey>>(
+  (acc, [tab, segment]) => {
+    acc[segment] = tab as AdminTabKey;
+    return acc;
+  },
+  {},
+);
+
+// Trasy dostępne wyłącznie po zalogowaniu (bramka w ProtectedRoute).
+export const PROTECTED_PATHS: string[] = [
+  ROUTES.add,
+  ROUTES.account,
+  ROUTES.accountSearches,
+  ROUTES.accountPriceAlerts,
+  ROUTES.accountMeetings,
+  ROUTES.accountListings,
+  ROUTES.accountSettings,
+  ROUTES.accountSecurity,
+  ROUTES.accountProfileEdit,
+  ROUTES.accountPublicProfile,
+  ROUTES.accountHelpContact,
+  ROUTES.notifications,
+  ROUTES.favorites,
+  ROUTES.messages,
+  ROUTES.comparison,
+];
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9d194ea..9239dd0 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -26749,3 +26749,6 @@ svg {
 
 .mkt-error { color: #b3261e; font-size: 13px; font-weight: 600; margin: 0; }
 .mkt-ok { color: #12784a; font-size: 13px; font-weight: 600; margin: 0; }
+
+/* Routing: stan wczytywania profilu przy wejsciu na trase chroniona */
+.route-loading { padding: 80px 24px; text-align: center; color: #5b6472; font-size: 15px; font-weight: 600; }

From ec5a7289f6965bfd7f59374503d111306731789b Mon Sep 17 00:00:00 2001
From: pascal <zatorskipascal@gmail.com>
Date: Thu, 23 Jul 2026 23:34:35 +0200
Subject: [PATCH 05/10] Zastap useState(view) routingiem opartym o
 react-router-dom

Rdzen migracji - kazdy widok ma wlasny adres URL:
- render {view === '...'} zastapiony przez <Routes> z 31 trasami
- usuniete: type View, PROTECTED_VIEWS, proteza #login, stan view/mapCity/
  mapOfferType/selectedListingId/messageThreadTarget
- prop onNavigate (166 wystapien) zastapiony hookiem useNavigate w komponentach
- /oferta/:id czyta identyfikator z adresu (ListingDetailRoute)
- /mapa?miasto=&typ= czyta parametry z query stringa (MapSearchRoute)
- dane przejsciowe miedzy trasami (watek wiadomosci, oferta do negocjacji)
  przekazywane w location.state zamiast globalnego stanu
- ProtectedRoute na trasach konta, requireAdmin na /admin
- powrot do zamierzonego celu po zalogowaniu (location.state.from)
- Header i AccountSidebar: <button> -> <NavLink>, aktywnosc z adresu
- strona 404 dla nieznanych adresow
- CSS: selektory menu rozszerzone o warianty <a> (wyglad bez zmian)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx    | 744 +++++++++++++++++++++-------------------
 frontend/src/styles.css |  47 ++-
 2 files changed, 417 insertions(+), 374 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c71a078..39e39d3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,8 @@
 import { Fragment, type ChangeEvent as ReactChangeEvent, type ClipboardEvent as ReactClipboardEvent, type Dispatch, type DragEvent as ReactDragEvent, type FormEvent as ReactFormEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, type SetStateAction, type WheelEvent as ReactWheelEvent, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import './styles.css';
+import { Link, NavLink, Navigate, Outlet, Route, Routes, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { ROUTES, listingPath, mapPath, negotiationPath, adminTabPath, ADMIN_PATH_TO_TAB, type AdminTabKey } from './routes';
+import { ProtectedRoute } from './ProtectedRoute';
 import { apiFetch, useAuth } from './auth';
 import type { AuthUser, ContactPreference, PreferredLanguage } from './auth';
 import { useNotifications, toDisplayNotifications } from './notifications';
@@ -12,7 +15,8 @@ const cityImage = new URL('./assets/city-panorama.png', import.meta.url).href;
 const loginRoomImage = new URL('./assets/login-room.png', import.meta.url).href;
 const SMS_VERIFICATION_CODE = '123456';
 
-type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'guideBuying' | 'creditCalculator' | 'map' | 'login' | 'account' | 'accountSearches' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
+// Podswietlenie aktywnej pozycji menu wyznacza NavLink na podstawie adresu.
+const navLinkClass = ({ isActive }: { isActive: boolean }) => (isActive ? 'active' : '');
 
 type MessageThreadListing = {
   listingId: number;
@@ -113,11 +117,6 @@ type LiveListingSummary = ApiListingSummary & {
 
 const LIVE_LISTINGS_REFRESH_MS = 15000;
 
-const PROTECTED_VIEWS = new Set<View>([
-  'add', 'admin', 'account', 'accountSearches', 'accountPriceAlerts', 'accountMeetings', 'accountListings', 'accountSettings',
-  'accountSecurity', 'accountProfileEdit', 'accountPublicProfile', 'accountHelpContact', 'notifications', 'favorites', 'messages', 'comparison',
-]);
-
 type NotificationCategory = 'listing' | 'messages' | 'system';
 
 type UserNotification = {
@@ -703,28 +702,28 @@ const insightCards = [
     title: 'AI wycena mieszkania',
     text: 'Sprawdź ile warte jest Twoje mieszkanie w 2 minuty',
     action: 'Wycena za darmo',
-    view: 'valuation' as const,
+    path: ROUTES.valuation,
   },
   {
     icon: 'trend',
     title: 'Historia cen',
     text: 'Sprawdź jak zmieniały się ceny w okolicy',
     action: 'Zobacz wykresy',
-    view: 'priceHistory' as const,
+    path: ROUTES.priceHistory,
   },
   {
     icon: 'house',
     title: 'Ranking dzielnic',
     text: 'Porównaj dzielnice pod kątem życia i inwestycji',
     action: 'Zobacz ranking',
-    view: 'districtRanking' as const,
+    path: ROUTES.districtRanking,
   },
   {
     icon: 'coin',
     title: 'Ile możesz utargować?',
     text: 'AI podpowie realistyczną cenę transakcyjną',
     action: 'Sprawdź teraz',
-    view: 'negotiation' as const,
+    path: ROUTES.negotiation,
   },
 ];
 
@@ -2618,12 +2617,8 @@ function preferredLanguageLabel(language: PreferredLanguage | null | undefined):
 
 function App() {
   const { user, logout } = useAuth();
-  const [view, setView] = useState<View>(() => (window.location.hash === '#login' ? 'login' : 'home'));
-  const [mapCity, setMapCity] = useState('');
-  const [mapOfferType, setMapOfferType] = useState<ApiOfferType>('SALE');
-  const [selectedNegotiationOffer, setSelectedNegotiationOffer] = useState<BuyOffer | null>(buyListings[0] ?? null);
-  const [selectedListingId, setSelectedListingId] = useState<number | null>(null);
-  const [messageThreadTarget, setMessageThreadTarget] = useState<MessageThreadTarget | null>(null);
+  const navigate = useNavigate();
+  const location = useLocation();
   const [favoriteListingsState, setFavoriteListingsState] = useState<FavoriteListing[]>(favoriteListings);
   const [favoritesPreferredTab, setFavoritesPreferredTab] = useState<FavoriteTab>('buy');
   const [listingPriceAlertSubscriptionsState, setListingPriceAlertSubscriptionsState] = useState<ListingPriceAlertSubscription[]>([]);
@@ -2653,41 +2648,17 @@ function App() {
   const notificationsCenter = useNotifications();
   const [savedSearchesState, setSavedSearchesState] = useState<SavedSearchRecord[]>([]);
 
-  const clearLoginHash = () => {
-    if (window.location.hash === '#login') {
-      window.history.replaceState(null, '', `${window.location.pathname}${window.location.search}`);
-    }
-  };
-
-  // Nawigacja z bramka autoryzacji: widoki chronione wymagaja zalogowania,
-  // panel admina wymaga roli ADMIN.
-  const navigate = (nextView: View) => {
-    let target = nextView;
-    if (target === 'admin' && user?.role !== 'ADMIN') {
-      target = user ? 'account' : 'login';
-    } else if (PROTECTED_VIEWS.has(target) && !user) {
-      target = 'login';
-    }
-
-    setView(target);
-    if (target === 'login') {
-      window.location.hash = 'login';
-      return;
-    }
-    clearLoginHash();
-  };
-
-  // Po udanym logowaniu kierujemy admina do panelu, uzytkownika do konta
-  // (pomijamy bramke navigate, bo stan user moze byc jeszcze swiezo ustawiany).
+  // Po udanym logowaniu wracamy tam, gdzie uzytkownik zmierzal (ProtectedRoute zapisuje cel
+  // w location.state.from). Gdy wszedl na logowanie wprost - admin do panelu, uzytkownik do konta.
   const handleAuthenticated = (loggedUser: AuthUser) => {
-    setView(loggedUser.role === 'ADMIN' ? 'admin' : 'account');
-    clearLoginHash();
+    const from = (location.state as { from?: string } | null)?.from;
+    const fallback = loggedUser.role === 'ADMIN' ? ROUTES.admin : ROUTES.account;
+    navigate(from && from !== ROUTES.login ? from : fallback, { replace: true });
   };
 
   const handleLogout = () => {
     logout();
-    setView('home');
-    clearLoginHash();
+    navigate(ROUTES.home);
   };
 
   // Z kalkulatora zdolności: ustaw maksymalną cenę ofert na obliczony budżet i przejdź do wyszukiwarki.
@@ -2698,20 +2669,9 @@ function App() {
       filters.setPriceMin('');
       filters.setPriceMax(String(Math.round(maxPrice)));
     }
-    navigate('buy');
+    navigate(ROUTES.buy);
   };
 
-  useEffect(() => {
-    const onHashChange = () => {
-      if (window.location.hash === '#login') {
-        setView('login');
-      }
-    };
-
-    window.addEventListener('hashchange', onHashChange);
-    return () => window.removeEventListener('hashchange', onHashChange);
-  }, []);
-
   useEffect(() => {
     if (!user) {
       setSavedSearchesState([]);
@@ -2832,10 +2792,10 @@ function App() {
   }, [user]);
 
   useEffect(() => {
-    if (view === 'favorites') {
+    if (location.pathname === ROUTES.favorites) {
       setUnreadFavoriteIds(new Set());
     }
-  }, [view]);
+  }, [location.pathname]);
 
   useEffect(() => {
     const preferred = user?.preferredLanguage ?? 'PL';
@@ -3033,25 +2993,25 @@ function App() {
         translationTimerRef.current = null;
       }
     };
-  }, [user?.preferredLanguage, view]);
+  }, [user?.preferredLanguage, location.pathname]);
 
+  // Miasto i typ oferty trafiaja do query stringa - wynik na mapie da sie udostepnic linkiem.
   const openMap = (name: string, source: 'buy' | 'rent' = 'buy') => {
-    setMapCity(name);
-    setMapOfferType(source === 'rent' ? 'RENT' : 'SALE');
-    navigate('map');
+    navigate(mapPath(name, source === 'rent' ? 'RENT' : 'SALE'));
   };
+
+  // Wybrana oferta to dane przejsciowe miedzy trasami - przekazujemy je w location.state,
+  // dzieki czemu nie zostaja w globalnym stanie po opuszczeniu widoku.
   const openNegotiation = (offer: BuyOffer) => {
-    setSelectedNegotiationOffer(offer);
-    navigate('negotiation');
+    navigate(negotiationPath(), { state: { offer } });
   };
+
   const openListing = (id: number) => {
-    setSelectedListingId(id);
-    navigate('listingDetail');
+    navigate(listingPath(id));
   };
 
   const openMessagesWithTarget = (target: MessageThreadTarget) => {
-    setMessageThreadTarget(target);
-    navigate('messages');
+    navigate(ROUTES.messages, { state: { threadTarget: target } });
   };
 
   // Klik w powiadomienie: oznacz jako przeczytane (znika z dzwonka, licznik -1) i przejdź do właściwego miejsca.
@@ -3059,7 +3019,7 @@ function App() {
     notificationsCenter.markRead(notification.id);
     const link = notification.link;
     if (!link) {
-      navigate('notifications');
+      navigate(ROUTES.notifications);
       return;
     }
     if (link.startsWith('listing:')) {
@@ -3070,35 +3030,35 @@ function App() {
       }
     }
     if (link.startsWith('messages')) {
-      navigate('messages');
+      navigate(ROUTES.messages);
       return;
     }
     if (link === 'priceAlerts') {
-      navigate('accountPriceAlerts');
+      navigate(ROUTES.accountPriceAlerts);
       return;
     }
     if (link === 'meetings') {
-      navigate('accountMeetings');
+      navigate(ROUTES.accountMeetings);
       return;
     }
     if (link === 'savedSearches') {
-      navigate('accountSearches');
+      navigate(ROUTES.accountSearches);
       return;
     }
     if (link === 'favorites') {
-      navigate('favorites');
+      navigate(ROUTES.favorites);
       return;
     }
     if (link === 'accountSecurity' || link === 'account' || link === 'accountListings') {
-      navigate(link as View);
+      navigate(ROUTES[link]);
       return;
     }
-    navigate('notifications');
+    navigate(ROUTES.notifications);
   };
 
   const toggleSavedSearch = (mode: SavedSearchMode) => {
     if (!user) {
-      navigate('login');
+      navigate(ROUTES.login);
       return;
     }
 
@@ -3121,7 +3081,7 @@ function App() {
 
   const openSavedSearch = (savedSearch: SavedSearchRecord) => {
     applySavedSearchToFilters(filters, savedSearch);
-    navigate(savedSearch.mode === 'rent' ? 'rent' : 'buy');
+    navigate(savedSearch.mode === 'rent' ? ROUTES.rent : ROUTES.buy);
   };
 
   const removeSavedSearch = (savedSearchId: string) => {
@@ -3406,107 +3366,177 @@ function App() {
   }, [user, monitoredListingIdList, monitoredListingIdsSignature, listingPriceAlertIdList, listingPriceAlertIdsSignature]);
 
   return (
-    <div className={`site-shell ${view === 'login' ? 'login-shell' : ''}`}>
-      <Header activeView={view} onNavigate={navigate} onLogout={handleLogout} hasUnreadFavorites={unreadFavoriteIds.size > 0} onOpenNotification={handleOpenNotification} />
+    <div className={`site-shell ${location.pathname === ROUTES.login ? 'login-shell' : ''}`}>
+      <Header onLogout={handleLogout} hasUnreadFavorites={unreadFavoriteIds.size > 0} onOpenNotification={handleOpenNotification} />
       <main>
-        {view === 'login' && <LoginPage onLogin={handleAuthenticated} />}
-        {view === 'admin' && <AdminPage onNavigate={navigate} />}
-        {view === 'account' && <AccountDashboardPage onNavigate={navigate} activeView={view} savedSearches={savedSearchesState} onOpenSavedSearch={openSavedSearch} />}
-        {view === 'accountSearches' && (
-          <AccountSavedSearchesPage
-            onNavigate={navigate}
-            activeView={view}
-            savedSearches={savedSearchesState}
-            onOpenSavedSearch={openSavedSearch}
-            onRemoveSavedSearch={removeSavedSearch}
+        <Routes>
+          {/* Trasy publiczne */}
+          <Route path={ROUTES.home} element={<HomePage filters={filters} onOpenMap={openMap} />} />
+          <Route path={ROUTES.login} element={<LoginPage onLogin={handleAuthenticated} />} />
+          <Route
+            path={ROUTES.buy}
+            element={(
+              <BuyPage
+                filters={filters}
+                onOpenMap={openMap}
+                onOpenNegotiation={openNegotiation}
+                onOpenListing={openListing}
+                isFavorite={isListingFavorite}
+                onToggleFavorite={toggleSummaryFavorite}
+                savedSearchActive={buySearchSaved}
+                onToggleSavedSearch={() => toggleSavedSearch('buy')}
+              />
+            )}
           />
-        )}
-        {view === 'accountPriceAlerts' && <AccountPriceAlertsPage onNavigate={navigate} activeView={view} user={user} onOpenListing={openListing} />}
-        {view === 'comparison' && <AccountComparisonPage onNavigate={navigate} activeView={view} onOpenListing={openListing} />}
-        {view === 'accountMeetings' && <AccountMeetingsPage onNavigate={navigate} activeView={view} />}
-        {view === 'accountListings' && <AccountListingsPage onNavigate={navigate} activeView={view} onOpenListing={openListing} />}
-        {view === 'accountSettings' && <AccountSettingsPage onNavigate={navigate} activeView={view} />}
-        {view === 'accountSecurity' && <AccountSecurityPage onNavigate={navigate} activeView={view} />}
-        {view === 'accountProfileEdit' && <AccountProfileEditPage onNavigate={navigate} activeView={view} />}
-        {view === 'accountPublicProfile' && <AccountPublicProfilePage onNavigate={navigate} activeView={view} />}
-        {view === 'accountHelpContact' && <AccountHelpContactPage onNavigate={navigate} activeView={view} user={user} />}
-        {view === 'notifications' && <NotificationsPage onOpenNotification={handleOpenNotification} />}
-        {view === 'messages' && (
-          <MessagesPage
-            onNavigate={navigate}
-            onOpenListing={openListing}
-            initialThreadTarget={messageThreadTarget}
-            onThreadTargetHandled={() => setMessageThreadTarget(null)}
+          <Route
+            path={ROUTES.rent}
+            element={(
+              <RentPage
+                filters={filters}
+                onOpenMap={openMap}
+                onOpenListing={openListing}
+                isFavorite={isListingFavorite}
+                onToggleFavorite={toggleSummaryFavorite}
+                savedSearchActive={rentSearchSaved}
+                onToggleSavedSearch={() => toggleSavedSearch('rent')}
+              />
+            )}
           />
-        )}
-        {view === 'favorites' && (
-          <FavoritesPage
-            onNavigate={navigate}
-            onOpenListing={openListing}
-            onStartChat={openMessagesWithTarget}
-            favoritesState={favoriteListingsState}
-            setFavoritesState={setFavoriteListingsState}
-            preferredTab={favoritesPreferredTab}
+          <Route
+            path={ROUTES.listingDetail}
+            element={(
+              <ListingDetailRoute
+                onStartChat={openMessagesWithTarget}
+                isFavorite={isListingFavorite}
+                onToggleFavorite={toggleListingFavorite}
+                isListingAlertEnabled={isListingPriceAlertEnabled}
+                onToggleListingAlert={toggleListingPriceAlert}
+              />
+            )}
           />
-        )}
-        {view === 'buy' && (
-          <BuyPage
-            filters={filters}
-            onOpenMap={openMap}
-            onOpenNegotiation={openNegotiation}
-            onOpenListing={openListing}
-            isFavorite={isListingFavorite}
-            onToggleFavorite={toggleSummaryFavorite}
-            savedSearchActive={buySearchSaved}
-            onToggleSavedSearch={() => toggleSavedSearch('buy')}
-          />
-        )}
-        {view === 'rent' && (
-          <RentPage
-            filters={filters}
-            onOpenMap={openMap}
-            onOpenListing={openListing}
-            isFavorite={isListingFavorite}
-            onToggleFavorite={toggleSummaryFavorite}
-            savedSearchActive={rentSearchSaved}
-            onToggleSavedSearch={() => toggleSavedSearch('rent')}
-          />
-        )}
-        {view === 'sell' && <SellPage onNavigate={navigate} />}
-        {view === 'valuation' && <ValuationPage onNavigate={navigate} />}
-        {view === 'creditCalculator' && <CreditCalculatorPage onNavigate={navigate} onSearchWithBudget={handleSearchWithBudget} />}
-        {view === 'priceHistory' && <PriceHistoryPage onNavigate={navigate} user={user} />}
-        {view === 'districtRanking' && <DistrictRankingPage onNavigate={navigate} />}
-        {view === 'negotiation' && (
-          <NegotiationPage
-            onNavigate={navigate}
-            offers={buyListings}
-            selectedOffer={selectedNegotiationOffer}
-            onSelectOffer={setSelectedNegotiationOffer}
-          />
-        )}
-        {view === 'add' && <AddListingPage onNavigate={navigate} />}
-        {view === 'listingDetail' && (
-          <ListingDetailPage
-            listingId={selectedListingId}
-            onNavigate={navigate}
-            onStartChat={openMessagesWithTarget}
-            isFavorite={isListingFavorite}
-            onToggleFavorite={toggleListingFavorite}
-            isListingAlertEnabled={isListingPriceAlertEnabled}
-            onToggleListingAlert={toggleListingPriceAlert}
-          />
-        )}
-        {view === 'services' && <ServicesPage />}
-        {view === 'guides' && <GuidesPage onNavigate={navigate} />}
-        {view === 'guideBuying' && <GuideBuyingPage onNavigate={navigate} />}
-        {view === 'map' && <MapSearchPage initialCity={mapCity} offerType={mapOfferType} onNavigate={navigate} />}
-        {view === 'home' && <HomePage onNavigate={navigate} filters={filters} onOpenMap={openMap} />}
+          <Route path={ROUTES.map} element={<MapSearchRoute />} />
+          <Route path={ROUTES.sell} element={<SellPage />} />
+          <Route path={ROUTES.valuation} element={<ValuationPage />} />
+          <Route path={ROUTES.creditCalculator} element={<CreditCalculatorPage onSearchWithBudget={handleSearchWithBudget} />} />
+          <Route path={ROUTES.priceHistory} element={<PriceHistoryPage user={user} />} />
+          <Route path={ROUTES.districtRanking} element={<DistrictRankingPage />} />
+          <Route path={ROUTES.negotiation} element={<NegotiationRoute />} />
+          <Route path={ROUTES.services} element={<ServicesPage />} />
+          <Route path={ROUTES.guides} element={<GuidesPage />} />
+          <Route path={ROUTES.guideBuying} element={<GuideBuyingPage />} />
+
+          {/* Trasy wymagajace zalogowania */}
+          <Route element={<ProtectedRoute />}>
+            <Route path={ROUTES.account} element={<AccountDashboardPage savedSearches={savedSearchesState} onOpenSavedSearch={openSavedSearch} />} />
+            <Route
+              path={ROUTES.accountSearches}
+              element={(
+                <AccountSavedSearchesPage
+                  savedSearches={savedSearchesState}
+                  onOpenSavedSearch={openSavedSearch}
+                  onRemoveSavedSearch={removeSavedSearch}
+                />
+              )}
+            />
+            <Route path={ROUTES.accountPriceAlerts} element={<AccountPriceAlertsPage user={user} onOpenListing={openListing} />} />
+            <Route path={ROUTES.comparison} element={<AccountComparisonPage onOpenListing={openListing} />} />
+            <Route path={ROUTES.accountMeetings} element={<AccountMeetingsPage />} />
+            <Route path={ROUTES.accountListings} element={<AccountListingsPage onOpenListing={openListing} />} />
+            <Route path={ROUTES.accountSettings} element={<AccountSettingsPage />} />
+            <Route path={ROUTES.accountSecurity} element={<AccountSecurityPage />} />
+            <Route path={ROUTES.accountProfileEdit} element={<AccountProfileEditPage />} />
+            <Route path={ROUTES.accountPublicProfile} element={<AccountPublicProfilePage />} />
+            <Route path={ROUTES.accountHelpContact} element={<AccountHelpContactPage user={user} />} />
+            <Route path={ROUTES.notifications} element={<NotificationsPage onOpenNotification={handleOpenNotification} />} />
+            <Route path={ROUTES.messages} element={<MessagesPage onOpenListing={openListing} />} />
+            <Route path={ROUTES.add} element={<AddListingPage />} />
+            <Route
+              path={ROUTES.favorites}
+              element={(
+                <FavoritesPage
+                  onOpenListing={openListing}
+                  onStartChat={openMessagesWithTarget}
+                  favoritesState={favoriteListingsState}
+                  setFavoritesState={setFavoriteListingsState}
+                  preferredTab={favoritesPreferredTab}
+                />
+              )}
+            />
+          </Route>
+
+          {/* Panel administratora - zakladki jako podsciezki /admin/* */}
+          <Route element={<ProtectedRoute requireAdmin />}>
+            <Route path={`${ROUTES.admin}/*`} element={<AdminPage />} />
+          </Route>
+
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
       </main>
     </div>
   );
 }
 
+// Szczegoly oferty: identyfikator pochodzi z adresu (/oferta/:id), nie ze stanu Reacta.
+// Dzieki temu link do oferty da sie wyslac, odswiezyc i otworzyc w nowej karcie.
+function ListingDetailRoute(props: {
+  onStartChat: (target: MessageThreadTarget) => void;
+  isFavorite: (listingId: number) => boolean;
+  onToggleFavorite: (listing: ApiListingDetail) => void;
+  isListingAlertEnabled: (listingId: number) => boolean;
+  onToggleListingAlert: (listing: ApiListingDetail) => void;
+}) {
+  const { id } = useParams<{ id: string }>();
+  const listingId = Number(id);
+
+  if (!Number.isFinite(listingId) || listingId <= 0) {
+    return <NotFoundPage />;
+  }
+
+  return <ListingDetailPage listingId={listingId} {...props} />;
+}
+
+// Mapa czyta miasto i typ oferty z query stringa (/mapa?miasto=Krakow&typ=wynajem).
+function MapSearchRoute() {
+  const [searchParams] = useSearchParams();
+  const city = searchParams.get('miasto') ?? '';
+  const offerType: ApiOfferType = searchParams.get('typ') === 'wynajem' ? 'RENT' : 'SALE';
+
+  return <MapSearchPage key={`${city}-${offerType}`} initialCity={city} offerType={offerType} />;
+}
+
+// Negocjacje: oferta wskazana z listy ofert przychodzi w location.state (dane przejsciowe),
+// wybor z rozwijanej listy to juz zwykly stan formularza.
+function NegotiationRoute() {
+  const location = useLocation();
+  const offerFromState = (location.state as { offer?: BuyOffer } | null)?.offer ?? null;
+  const [selectedOffer, setSelectedOffer] = useState<BuyOffer | null>(offerFromState ?? buyListings[0] ?? null);
+
+  useEffect(() => {
+    if (offerFromState) {
+      setSelectedOffer(offerFromState);
+    }
+  }, [offerFromState]);
+
+  return <NegotiationPage offers={buyListings} selectedOffer={selectedOffer} onSelectOffer={setSelectedOffer} />;
+}
+
+// Nieznany adres: czytelny komunikat zamiast pustego ekranu.
+function NotFoundPage() {
+  return (
+    <section className="not-found-page" aria-label="Nie znaleziono strony">
+      <div className="not-found-shell">
+        <h1>404</h1>
+        <h2>Nie znaleźliśmy tej strony</h2>
+        <p>Adres jest nieprawidłowy albo strona została przeniesiona.</p>
+        <div className="not-found-actions">
+          <Link className="not-found-primary" to={ROUTES.home}>Wróć na stronę główną</Link>
+          <Link className="not-found-secondary" to={ROUTES.buy}>Przeglądaj oferty</Link>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 type AdminListing = {
   id: number;
   title: string;
@@ -3815,7 +3845,8 @@ function AdminMessageModal({ user, onClose }: { user: AuthUser; onClose: () => v
   );
 }
 
-function AdminPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function AdminPage() {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const [tab, setTab] = useState<AdminTab>('dashboard');
   const [users, setUsers] = useState<AuthUser[]>([]);
@@ -4204,7 +4235,7 @@ function AdminPage({ onNavigate }: { onNavigate: (view: View) => void }) {
             <button type="button" onClick={loadData}>Odśwież status <Icon name="arrow" /></button>
           </div>
 
-          <button type="button" className="admin-back" onClick={() => onNavigate('home')}>
+          <button type="button" className="admin-back" onClick={() => navigate(ROUTES.home)}>
             <Icon name="arrow" /> Wróć do strony głównej
           </button>
         </aside>
@@ -4323,7 +4354,7 @@ function AdminPage({ onNavigate }: { onNavigate: (view: View) => void }) {
                   <h2>Szybkie akcje</h2>
                 </div>
                 <div className="admin-quick-actions-grid">
-                  <button type="button" onClick={() => onNavigate('add')}><Icon name="document" /> Dodaj nowe ogłoszenie <Icon name="arrow" /></button>
+                  <button type="button" onClick={() => navigate(ROUTES.add)}><Icon name="document" /> Dodaj nowe ogłoszenie <Icon name="arrow" /></button>
                   <button type="button" onClick={() => setTab('categories')}><Icon name="list" /> Zarządzaj kategoriami <Icon name="arrow" /></button>
                   <button type="button" onClick={() => setTab('locations')}><Icon name="pin" /> Zarządzaj lokalizacjami <Icon name="arrow" /></button>
                   <button type="button" onClick={() => setTab('promotions')}><Icon name="spark" /> Zarządzaj banerami <Icon name="arrow" /></button>
@@ -5045,7 +5076,8 @@ function AdminPage({ onNavigate }: { onNavigate: (view: View) => void }) {
   );
 }
 
-function DistrictRankingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function DistrictRankingPage() {
+  const navigate = useNavigate();
   const [rankingMetric, setRankingMetric] = useState<DistrictRankingMetric>('overall');
   const [propertyType, setPropertyType] = useState<DistrictPropertyType>('flat');
   const [marketType, setMarketType] = useState<DistrictMarketType>('all');
@@ -5096,9 +5128,9 @@ function DistrictRankingPage({ onNavigate }: { onNavigate: (view: View) => void
     <section className="district-ranking-page" aria-label="Ranking dzielnic">
       <div className="district-ranking-shell">
         <div className="district-breadcrumb">
-          <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => onNavigate('districtRanking')}>Ranking dzielnic</button>
+          <button type="button" className="active" onClick={() => navigate(ROUTES.districtRanking)}>Ranking dzielnic</button>
         </div>
 
         <div className="district-ranking-title">
@@ -5210,16 +5242,15 @@ function DistrictRankingPage({ onNavigate }: { onNavigate: (view: View) => void
 }
 
 function NegotiationPage({
-  onNavigate,
   offers,
   selectedOffer,
   onSelectOffer,
 }: {
-  onNavigate: (view: View) => void;
   offers: BuyOffer[];
   selectedOffer: BuyOffer | null;
   onSelectOffer: (offer: BuyOffer) => void;
 }) {
+  const navigate = useNavigate();
   const fallbackOffer = offers[0] ?? null;
   const activeOffer = selectedOffer ?? fallbackOffer;
 
@@ -5228,9 +5259,9 @@ function NegotiationPage({
       <section className="negotiation-page" aria-label="Ile możesz utargować">
         <div className="negotiation-shell">
           <div className="negotiation-breadcrumb">
-            <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+            <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => onNavigate('negotiation')}>Ile możesz utargować?</button>
+            <button type="button" className="active" onClick={() => navigate(ROUTES.negotiation)}>Ile możesz utargować?</button>
           </div>
 
           <div className="negotiation-title">
@@ -5265,9 +5296,9 @@ function NegotiationPage({
     <section className="negotiation-page" aria-label="Ile możesz utargować">
       <div className="negotiation-shell">
         <div className="negotiation-breadcrumb">
-          <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => onNavigate('negotiation')}>Ile możesz utargować?</button>
+          <button type="button" className="active" onClick={() => navigate(ROUTES.negotiation)}>Ile możesz utargować?</button>
         </div>
 
         <div className="negotiation-title">
@@ -5370,7 +5401,7 @@ function NegotiationPage({
                 <p>Nasi eksperci pomogą Ci przejść przez proces zakupu i wynegocjować najlepszą cenę.</p>
               </div>
               <div className="negotiation-cta-action">
-                <button type="button" onClick={() => onNavigate('services')}>Skontaktuj się z ekspertem</button>
+                <button type="button" onClick={() => navigate(ROUTES.services)}>Skontaktuj się z ekspertem</button>
                 <small>Pierwsza konsultacja gratis</small>
               </div>
             </section>
@@ -5424,23 +5455,13 @@ function NegotiationPage({
   );
 }
 
-function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountSidebar() {
   const { user } = useAuth();
-  const isSettingsView = activeView === 'accountSettings' || activeView === 'accountProfileEdit' || activeView === 'accountPublicProfile';
-  const isSecurityView = activeView === 'accountSecurity';
-  const isHelpContactView = activeView === 'accountHelpContact';
-  const isDashboardView = activeView === 'account';
-  const isSearchesView = activeView === 'accountSearches';
-  const isFavoritesView = activeView === 'favorites';
-  const isPriceAlertsView = activeView === 'accountPriceAlerts';
-  const isMeetingsView = activeView === 'accountMeetings';
-  const isListingsView = activeView === 'accountListings';
-  const isPriceHistoryView = activeView === 'priceHistory';
-  const isNegotiationView = activeView === 'negotiation';
-  const isValuationView = activeView === 'valuation';
-  const isCreditCalculatorView = activeView === 'creditCalculator';
-  const isDistrictRankingView = activeView === 'districtRanking';
-  const isComparisonView = activeView === 'comparison';
+  const location = useLocation();
+  // Ustawienia obejmuja takze podstrony profilu - podswietlamy je wspolna pozycja menu.
+  const isSettingsSection = location.pathname === ROUTES.accountSettings
+    || location.pathname === ROUTES.accountProfileEdit
+    || location.pathname === ROUTES.accountPublicProfile;
   const [messagesUnreadCount, setMessagesUnreadCount] = useState(0);
   const allListingsCount = (() => {
     if (typeof window === 'undefined') {
@@ -5515,35 +5536,35 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
 
       <div className="account-menu">
         <h3>Moje aktywności</h3>
-        <button className={isDashboardView ? 'active' : ''} onClick={() => onNavigate('account')}><Icon name="house" /> Panel główny</button>
-        <button className={isSearchesView ? 'active' : ''} onClick={() => onNavigate('accountSearches')}><Icon name="search" /> Zapisane wyszukiwania <span>{savedSearchCount}</span></button>
-        <button className={isFavoritesView ? 'active' : ''} onClick={() => onNavigate('favorites')}><Icon name="heart" /> Ulubione ogłoszenia <span>{favoritesCount}</span></button>
-        <button className={isPriceAlertsView ? 'active' : ''} onClick={() => onNavigate('accountPriceAlerts')}><Icon name="bell" /> Alerty cenowe <span>{priceAlertsCount}</span></button>
-        <button className={isComparisonView ? 'active' : ''} onClick={() => onNavigate('comparison')}><Icon name="shuffle" /> Porównanie mieszkań</button>
+        <NavLink to={ROUTES.account} className={navLinkClass}><Icon name="house" /> Panel główny</NavLink>
+        <NavLink to={ROUTES.accountSearches} className={navLinkClass}><Icon name="search" /> Zapisane wyszukiwania <span>{savedSearchCount}</span></NavLink>
+        <NavLink to={ROUTES.favorites} className={navLinkClass}><Icon name="heart" /> Ulubione ogłoszenia <span>{favoritesCount}</span></NavLink>
+        <NavLink to={ROUTES.accountPriceAlerts} className={navLinkClass}><Icon name="bell" /> Alerty cenowe <span>{priceAlertsCount}</span></NavLink>
+        <NavLink to={ROUTES.comparison} className={navLinkClass}><Icon name="shuffle" /> Porównanie mieszkań</NavLink>
       </div>
 
       <div className="account-menu">
         <h3>Moje transakcje</h3>
-        <button className={activeView === 'messages' ? 'active' : ''} onClick={() => onNavigate('messages')}><Icon name="message" /> Zapytania i wiadomości <span>{messagesUnreadCount}</span></button>
-        <button className={isMeetingsView ? 'active' : ''} onClick={() => onNavigate('accountMeetings')}><Icon name="calendar" /> Umówione spotkania</button>
-        <button className={isListingsView ? 'active' : ''} onClick={() => onNavigate('accountListings')}><Icon name="document" /> Moje oferty <span className="tag">{allListingsCount}</span></button>
+        <NavLink to={ROUTES.messages} className={navLinkClass}><Icon name="message" /> Zapytania i wiadomości <span>{messagesUnreadCount}</span></NavLink>
+        <NavLink to={ROUTES.accountMeetings} className={navLinkClass}><Icon name="calendar" /> Umówione spotkania</NavLink>
+        <NavLink to={ROUTES.accountListings} className={navLinkClass}><Icon name="document" /> Moje oferty <span className="tag">{allListingsCount}</span></NavLink>
       </div>
 
       <div className="account-menu">
         <h3>Moje narzędzia</h3>
-        <button className={isCreditCalculatorView ? 'active' : ''} onClick={() => onNavigate('creditCalculator')}><Icon name="money" /> Zdolność kredytowa</button>
-        <button className={isPriceHistoryView ? 'active' : ''} onClick={() => onNavigate('priceHistory')}><Icon name="chart" /> Historia cen</button>
-        <button className={isNegotiationView ? 'active' : ''} onClick={() => onNavigate('negotiation')}><Icon name="coin" /> Ile możesz utargować?</button>
-        <button className={isValuationView ? 'active' : ''} onClick={() => onNavigate('valuation')}><Icon name="calculator" /> Wyceny mieszkań</button>
-        <button className={isDistrictRankingView ? 'active' : ''} onClick={() => onNavigate('districtRanking')}><Icon name="house" /> Ranking dzielnic</button>
+        <NavLink to={ROUTES.creditCalculator} className={navLinkClass}><Icon name="money" /> Zdolność kredytowa</NavLink>
+        <NavLink to={ROUTES.priceHistory} className={navLinkClass}><Icon name="chart" /> Historia cen</NavLink>
+        <NavLink to={ROUTES.negotiation} className={navLinkClass}><Icon name="coin" /> Ile możesz utargować?</NavLink>
+        <NavLink to={ROUTES.valuation} className={navLinkClass}><Icon name="calculator" /> Wyceny mieszkań</NavLink>
+        <NavLink to={ROUTES.districtRanking} className={navLinkClass}><Icon name="house" /> Ranking dzielnic</NavLink>
       </div>
 
       <div className="account-menu">
         <h3>Ustawienia</h3>
-        <button className={isSettingsView ? 'active' : ''} onClick={() => onNavigate('accountSettings')}><Icon name="gear" /> Dane i ustawienia</button>
-        <button className={activeView === 'notifications' ? 'active' : ''} onClick={() => onNavigate('notifications')}><Icon name="bell" /> Powiadomienia</button>
-        <button className={isSecurityView ? 'active' : ''} onClick={() => onNavigate('accountSecurity')}><Icon name="shield" /> Bezpieczeństwo</button>
-        <button className={isHelpContactView ? 'active' : ''} onClick={() => onNavigate('accountHelpContact')}><Icon name="phone" /> Pomoc i kontakt</button>
+        <NavLink to={ROUTES.accountSettings} className={isSettingsSection ? 'active' : ''}><Icon name="gear" /> Dane i ustawienia</NavLink>
+        <NavLink to={ROUTES.notifications} className={navLinkClass}><Icon name="bell" /> Powiadomienia</NavLink>
+        <NavLink to={ROUTES.accountSecurity} className={navLinkClass}><Icon name="shield" /> Bezpieczeństwo</NavLink>
+        <NavLink to={ROUTES.accountHelpContact} className={navLinkClass}><Icon name="phone" /> Pomoc i kontakt</NavLink>
       </div>
 
       <div className="account-premium-card">
@@ -5558,16 +5579,13 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
 }
 
 function AccountDashboardPage({
-  onNavigate,
-  activeView,
   savedSearches,
   onOpenSavedSearch,
 }: {
-  onNavigate: (view: View) => void;
-  activeView: View;
   savedSearches: SavedSearchRecord[];
   onOpenSavedSearch: (savedSearch: SavedSearchRecord) => void;
 }) {
+  const navigate = useNavigate();
   const { user } = useAuth();
   type DashboardWidgetId = 'recent' | 'alerts' | 'searches' | 'tools';
   type DashboardWidgetConfig = {
@@ -5594,12 +5612,12 @@ function AccountDashboardPage({
   const [activeAlerts, setActiveAlerts] = useState<boolean[]>(() => alerts.map(() => true));
 
   const tools = [
-    { icon: 'money', title: 'Zdolność kredytowa', text: 'Sprawdź, na jaki kredyt Cię stać i jaka będzie rata', view: 'creditCalculator' as View },
-    { icon: 'chart', title: 'Historia cen', text: 'Sprawdź jak zmieniały się ceny mieszkań w czasie', view: 'priceHistory' as View },
-    { icon: 'coin', title: 'Ile możesz utargować?', text: 'AI podpowie realistyczną cenę transakcyjną', view: 'negotiation' as View },
-    { icon: 'calculator', title: 'Wycena mieszkania', text: 'Darmowa wycena Twojego mieszkania online', view: 'valuation' as View },
-    { icon: 'house', title: 'Ranking dzielnic', text: 'Zobacz najlepsze dzielnice w Polsce', view: 'districtRanking' as View },
-    { icon: 'shuffle', title: 'Porównanie mieszkań', text: 'Porównuj oferty i wybieraj najlepsze', view: 'comparison' as View },
+    { icon: 'money', title: 'Zdolność kredytowa', text: 'Sprawdź, na jaki kredyt Cię stać i jaka będzie rata', path: ROUTES.creditCalculator },
+    { icon: 'chart', title: 'Historia cen', text: 'Sprawdź jak zmieniały się ceny mieszkań w czasie', path: ROUTES.priceHistory },
+    { icon: 'coin', title: 'Ile możesz utargować?', text: 'AI podpowie realistyczną cenę transakcyjną', path: ROUTES.negotiation },
+    { icon: 'calculator', title: 'Wycena mieszkania', text: 'Darmowa wycena Twojego mieszkania online', path: ROUTES.valuation },
+    { icon: 'house', title: 'Ranking dzielnic', text: 'Zobacz najlepsze dzielnice w Polsce', path: ROUTES.districtRanking },
+    { icon: 'shuffle', title: 'Porównanie mieszkań', text: 'Porównuj oferty i wybieraj najlepsze', path: ROUTES.comparison },
   ];
 
   const recentListings = [
@@ -5794,7 +5812,7 @@ function AccountDashboardPage({
       <section className="account-panel" key="searches">
         <div className="account-panel-head">
           <h2>Moje wyszukiwania</h2>
-          <button type="button" onClick={() => onNavigate('accountSearches')}>Zobacz wszystkie <Icon name="arrow" /></button>
+          <button type="button" onClick={() => navigate(ROUTES.accountSearches)}>Zobacz wszystkie <Icon name="arrow" /></button>
         </div>
         <div className="account-searches">
           {savedSearches.slice(0, 4).map((row) => (
@@ -5821,7 +5839,7 @@ function AccountDashboardPage({
             </article>
           ))}
           {savedSearches.length === 0 && <p className="account-searches-empty">Nie masz jeszcze zapisanych wyszukiwań. Wejdź w Kup lub Wynajem i kliknij dzwonek „Zapisz wyszukiwanie”.</p>}
-          <button type="button" className="account-new-search" onClick={() => onNavigate('buy')}>Utwórz nowe wyszukiwanie <Icon name="plus" /></button>
+          <button type="button" className="account-new-search" onClick={() => navigate(ROUTES.buy)}>Utwórz nowe wyszukiwanie <Icon name="plus" /></button>
         </div>
       </section>
     ),
@@ -5836,11 +5854,11 @@ function AccountDashboardPage({
               key={tool.title}
               role="button"
               tabIndex={0}
-              onClick={() => onNavigate(tool.view)}
+              onClick={() => navigate(tool.path)}
               onKeyDown={(event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                   event.preventDefault();
-                  onNavigate(tool.view);
+                  navigate(tool.path);
                 }
               }}
             >
@@ -5860,7 +5878,7 @@ function AccountDashboardPage({
   return (
     <section className="account-page" aria-label="Panel konta użytkownika">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main">
           <div className="account-heading">
@@ -6019,18 +6037,15 @@ function AccountDashboardPage({
 }
 
 function AccountSavedSearchesPage({
-  onNavigate,
-  activeView,
   savedSearches,
   onOpenSavedSearch,
   onRemoveSavedSearch,
 }: {
-  onNavigate: (view: View) => void;
-  activeView: View;
   savedSearches: SavedSearchRecord[];
   onOpenSavedSearch: (savedSearch: SavedSearchRecord) => void;
   onRemoveSavedSearch: (savedSearchId: string) => void;
 }) {
+  const navigate = useNavigate();
   const [query, setQuery] = useState('');
   const [modeFilter, setModeFilter] = useState<'all' | SavedSearchMode>('all');
   const [sortMode, setSortMode] = useState<'newest' | 'oldest' | 'city'>('newest');
@@ -6066,7 +6081,7 @@ function AccountSavedSearchesPage({
   return (
     <section className="account-page account-searches-page" aria-label="Zapisane wyszukiwania">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main">
           <section className="account-panel account-searches-panel">
@@ -6075,7 +6090,7 @@ function AccountSavedSearchesPage({
                 <h1>Zapisane wyszukiwania</h1>
                 <p>Wróć do swoich filtrów jednym kliknięciem i przejdź od razu do odpowiedniej listy ofert.</p>
               </div>
-              <button type="button" onClick={() => onNavigate('buy')}>Dodaj nowe <Icon name="plus" /></button>
+              <button type="button" onClick={() => navigate(ROUTES.buy)}>Dodaj nowe <Icon name="plus" /></button>
             </div>
 
             <div className="account-searches-stats" aria-label="Statystyki zapisanych wyszukiwań">
@@ -6171,7 +6186,7 @@ function AccountSavedSearchesPage({
               <div className="account-searches-empty-state">
                 <strong>Nie masz jeszcze zapisanych wyszukiwań</strong>
                 <p>Ustaw filtry w Kup lub Wynajem i kliknij dzwonek „Zapisz wyszukiwanie”, a pojawią się tutaj.</p>
-                <button type="button" className="account-empty-add-button" onClick={() => onNavigate('buy')}>
+                <button type="button" className="account-empty-add-button" onClick={() => navigate(ROUTES.buy)}>
                   <Icon name="search" /> Przejdź do wyszukiwania
                 </button>
               </div>
@@ -6202,12 +6217,8 @@ function AccountSavedSearchesPage({
 }
 
 function AccountHelpContactPage({
-  onNavigate,
-  activeView,
   user,
 }: {
-  onNavigate: (view: View) => void;
-  activeView: View;
   user: AuthUser | null;
 }) {
   type HelpContactFormValues = {
@@ -6425,7 +6436,7 @@ function AccountHelpContactPage({
   return (
     <section className="account-page account-help-contact-page" aria-label="Pomoc i kontakt">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main">
           <section className="help-contact-panel">
@@ -6554,16 +6565,13 @@ function AccountHelpContactPage({
 }
 
 function AccountPriceAlertsPage({
-  onNavigate,
-  activeView,
   user,
   onOpenListing,
 }: {
-  onNavigate: (view: View) => void;
-  activeView: View;
   user: AuthUser | null;
   onOpenListing: (id: number) => void;
 }) {
+  const navigate = useNavigate();
   const [cityAlerts, setCityAlerts] = useState<CityPriceAlertSubscription[]>([]);
   const [priceEvents, setPriceEvents] = useState<FavoritePriceAlertEvent[]>([]);
   const [cityPriceEvents, setCityPriceEvents] = useState<CityPriceAlertEvent[]>([]);
@@ -6662,7 +6670,7 @@ function AccountPriceAlertsPage({
   return (
     <section className="account-settings-page price-alerts-page" aria-label="Powiadomienia i alerty cenowe">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main">
           <div className="price-alerts-heading">
@@ -6758,7 +6766,7 @@ function AccountPriceAlertsPage({
                     onOpenListing(activeListingEvent.listingId);
                     return;
                   }
-                  onNavigate('priceHistory');
+                  navigate(ROUTES.priceHistory);
                 }}
                 disabled={!latestEventType}
               >
@@ -6813,7 +6821,7 @@ function AccountPriceAlertsPage({
                   </div>
                 )}
               </div>
-              <button type="button" className="price-alerts-link" onClick={() => onNavigate('priceHistory')}>Dodaj kolejne lokalizacje</button>
+              <button type="button" className="price-alerts-link" onClick={() => navigate(ROUTES.priceHistory)}>Dodaj kolejne lokalizacje</button>
             </article>
 
             <article className="price-alerts-card price-alerts-active-list">
@@ -6830,7 +6838,7 @@ function AccountPriceAlertsPage({
                     <span>Usuń</span>
                   </button>
                 )) : (
-                  <button type="button" onClick={() => onNavigate('priceHistory')}>
+                  <button type="button" onClick={() => navigate(ROUTES.priceHistory)}>
                     <div>
                       <strong>Brak aktywnych alertów</strong>
                       <small>Przejdź do historii cen i dodaj pierwszą lokalizację.</small>
@@ -6839,7 +6847,7 @@ function AccountPriceAlertsPage({
                   </button>
                 )}
               </div>
-              <button type="button" className="price-alerts-manage" onClick={() => onNavigate('priceHistory')}>Zarządzaj alertami</button>
+              <button type="button" className="price-alerts-manage" onClick={() => navigate(ROUTES.priceHistory)}>Zarządzaj alertami</button>
             </article>
           </section>
         </div>
@@ -6848,7 +6856,8 @@ function AccountPriceAlertsPage({
   );
 }
 
-function AccountComparisonPage({ onNavigate, activeView, onOpenListing }: { onNavigate: (view: View) => void; activeView: View; onOpenListing: (id: number) => void }) {
+function AccountComparisonPage({ onOpenListing }: { onOpenListing: (id: number) => void }) {
+  const navigate = useNavigate();
   type ComparisonPropertyFilter = 'ALL' | ApiPropertyType | 'LAND' | 'COMMERCIAL' | 'ROOM';
 
   const comparisonPropertyOptions: Array<{ value: ComparisonPropertyFilter; label: string }> = [
@@ -7259,13 +7268,13 @@ function AccountComparisonPage({ onNavigate, activeView, onOpenListing }: { onNa
   return (
     <section className="comparison-page" aria-label="Porównanie mieszkań">
       <div className="comparison-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="comparison-main">
           <div className="comparison-breadcrumb">
-            <button type="button" onClick={() => onNavigate('home')}>Strona główna</button>
+            <button type="button" onClick={() => navigate(ROUTES.home)}>Strona główna</button>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => onNavigate('comparison')}>Porównywarka mieszkań</button>
+            <button type="button" className="active" onClick={() => navigate(ROUTES.comparison)}>Porównywarka mieszkań</button>
           </div>
 
           <div className="comparison-head">
@@ -7449,7 +7458,7 @@ function AccountComparisonPage({ onNavigate, activeView, onOpenListing }: { onNa
   );
 }
 
-function AccountMeetingsPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountMeetingsPage() {
   const { notify } = useNotifications();
   type MeetingType = 'buy' | 'rent' | 'own';
   type MeetingStatus = 'planned' | 'completed' | 'cancelled';
@@ -7846,7 +7855,7 @@ function AccountMeetingsPage({ onNavigate, activeView }: { onNavigate: (view: Vi
   return (
     <section className="account-settings-page meetings-page" aria-label="Umówione spotkania">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main meetings-main">
           <header className="settings-head meetings-head">
@@ -8055,7 +8064,8 @@ function MyApiListingsBand({ onOpenListing }: { onOpenListing: (id: number) => v
   );
 }
 
-function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavigate: (view: View) => void; activeView: View; onOpenListing: (id: number) => void }) {
+function AccountListingsPage({ onOpenListing }: { onOpenListing: (id: number) => void }) {
+  const navigate = useNavigate();
   type ListingCategory = 'sale' | 'rent';
   type ListingStatus = 'active' | 'paused' | 'archived';
   type ListingItem = {
@@ -8538,7 +8548,7 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
     };
 
     window.localStorage.setItem(EDIT_LISTING_DRAFT_STORAGE_KEY, JSON.stringify(draft));
-    onNavigate('add');
+    navigate(ROUTES.add);
   };
 
   const togglePause = (id: string) => {
@@ -8657,7 +8667,7 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
   return (
     <section className="account-settings-page account-listings-page" aria-label="Moje oferty">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main listings-main">
           <header className="settings-head listings-head">
@@ -8814,7 +8824,8 @@ function AccountListingsPage({ onNavigate, activeView, onOpenListing }: { onNavi
   );
 }
 
-function AccountSettingsPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountSettingsPage() {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const [accountSwitches, setAccountSwitches] = useState([true, true, false, false]);
   // Indeks 4 ("Oferty promowane i newsletter") to zgoda marketingowa e-mail zapisywana na serwerze.
@@ -8868,7 +8879,7 @@ function AccountSettingsPage({ onNavigate, activeView }: { onNavigate: (view: Vi
   return (
     <section className="account-settings-page" aria-label="Dane i ustawienia">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main">
           <header className="settings-head">
@@ -8887,7 +8898,7 @@ function AccountSettingsPage({ onNavigate, activeView }: { onNavigate: (view: Vi
               <strong>{getDisplayName(user)}</strong>
               <small>Konto Premium</small>
             </div>
-            <button type="button" onClick={() => onNavigate('accountProfileEdit')}>Edytuj</button>
+            <button type="button" onClick={() => navigate(ROUTES.accountProfileEdit)}>Edytuj</button>
           </div>
           <div className="settings-list">
             <article><span><Icon name="mail" /></span><em>Adres e-mail</em><strong>{user?.email}</strong><Icon name="chevron" /></article>
@@ -8979,7 +8990,7 @@ function AccountSettingsPage({ onNavigate, activeView }: { onNavigate: (view: Vi
   );
 }
 
-function AccountSecurityPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountSecurityPage() {
   const { user } = useAuth();
   const recentSecurityActivity = [
     {
@@ -9086,7 +9097,7 @@ function AccountSecurityPage({ onNavigate, activeView }: { onNavigate: (view: Vi
   return (
     <section className="account-settings-page account-security-page" aria-label="Bezpieczeństwo">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main security-main">
           <header className="settings-head security-head">
@@ -9166,7 +9177,8 @@ function AccountSecurityPage({ onNavigate, activeView }: { onNavigate: (view: Vi
   );
 }
 
-function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountProfileEditPage() {
+  const navigate = useNavigate();
   const { user, updateProfile } = useAuth();
   const { notify } = useNotifications();
   type UploadTarget = 'avatar' | 'cover';
@@ -9630,7 +9642,7 @@ function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view:
     <>
     <section className="account-settings-page" aria-label="Edytuj profil">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main">
           <div className="settings-breadcrumb">Dane i ustawienia <Icon name="chevron" /> <strong>Edytuj profil</strong></div>
@@ -9824,7 +9836,7 @@ function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view:
                   </article>
                   {coverPhotoName && (
                     <div className="cover-photo-actions-row">
-                      <button type="button" className="cover-preview-button" onClick={() => onNavigate('accountPublicProfile')}>Podgląd profilu</button>
+                      <button type="button" className="cover-preview-button" onClick={() => navigate(ROUTES.accountPublicProfile)}>Podgląd profilu</button>
                       <button type="button" className="cover-remove-button" onClick={clearCoverPhoto}>Usuń zdjęcie</button>
                     </div>
                   )}
@@ -9878,7 +9890,7 @@ function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view:
                       {profileVisibility === 'publiczna' && 'Zobacz jak inni widzą Twój profil.'}
                       {profileVisibility === 'kontakty' && 'Profil widzą tylko zaakceptowane kontakty.'}
                     </strong>
-                    <button type="button" className="mini-tag profile-preview-cta" onClick={() => onNavigate('accountPublicProfile')}>
+                    <button type="button" className="mini-tag profile-preview-cta" onClick={() => navigate(ROUTES.accountPublicProfile)}>
                       Zobacz profil <Icon name="arrow" />
                     </button>
                   </article>
@@ -10081,7 +10093,8 @@ function AccountProfileEditPage({ onNavigate, activeView }: { onNavigate: (view:
   );
 }
 
-function AccountPublicProfilePage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+function AccountPublicProfilePage() {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const publicProfileCover = window.localStorage.getItem(accountStorageKey('CoverImage', user)) || heroImage;
   const publicReviews = [
@@ -10154,7 +10167,7 @@ function AccountPublicProfilePage({ onNavigate, activeView }: { onNavigate: (vie
   return (
     <section className="account-settings-page public-profile-page" aria-label="Jak inni widzą Twój profil">
       <div className="account-layout">
-        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+        <AccountSidebar />
 
         <div className="account-main account-settings-main">
           <div className="settings-breadcrumb">Dane i ustawienia <Icon name="chevron" /> <strong>Jak inni widzą Twój profil</strong></div>
@@ -10163,7 +10176,7 @@ function AccountPublicProfilePage({ onNavigate, activeView }: { onNavigate: (vie
               <h1>Jak inni widzą Twój profil</h1>
               <p>Zobacz, jak Twój profil prezentuje się publicznie dla innych użytkowników Mieszko.</p>
             </div>
-            <button type="button" onClick={() => onNavigate('accountProfileEdit')}><Icon name="gear" /> Edytuj profil</button>
+            <button type="button" onClick={() => navigate(ROUTES.accountProfileEdit)}><Icon name="gear" /> Edytuj profil</button>
           </header>
 
           <section className="public-profile-cover-card">
@@ -10855,7 +10868,8 @@ function LoginPage({ onLogin }: { onLogin: (user: AuthUser) => void }) {
   );
 }
 
-function HomePage({ onNavigate, filters, onOpenMap }: { onNavigate: (view: View) => void; filters: FilterState; onOpenMap: (city: string, mode?: 'buy' | 'rent') => void }) {
+function HomePage({ filters, onOpenMap }: { filters: FilterState; onOpenMap: (city: string, mode?: 'buy' | 'rent') => void }) {
+  const navigate = useNavigate();
   const [favoriteListings, setFavoriteListings] = useState<Set<string>>(new Set());
 
   const toggleFavoriteListing = (location: string) => {
@@ -10926,14 +10940,14 @@ function HomePage({ onNavigate, filters, onOpenMap }: { onNavigate: (view: View)
 
       <section className="search-wrap" aria-label="Wyszukiwarka">
         <div className="search-tabs">
-          <button className="active" onClick={() => onNavigate('buy')}>
+          <button className="active" onClick={() => navigate(ROUTES.buy)}>
             Kup
           </button>
-          <button onClick={() => onNavigate('rent')}>Wynajem</button>
+          <button onClick={() => navigate(ROUTES.rent)}>Wynajem</button>
         </div>
 
         <div className="search-panel search-panel-mega">
-          <MegaSearch filters={filters} onOpenMap={onOpenMap} onSearch={() => onNavigate('buy')} />
+          <MegaSearch filters={filters} onOpenMap={onOpenMap} onSearch={() => navigate(ROUTES.buy)} />
         </div>
       </section>
 
@@ -10950,7 +10964,7 @@ function HomePage({ onNavigate, filters, onOpenMap }: { onNavigate: (view: View)
                     <h2>{card.title}</h2>
                     <p>{card.text}</p>
                   </div>
-                  <button type="button" onClick={() => onNavigate(card.view)}>{card.action}</button>
+                  <button type="button" onClick={() => navigate(card.path)}>{card.action}</button>
                 </article>
               ))}
             </div>
@@ -11253,7 +11267,8 @@ function RentPage({
   );
 }
 
-function AddListingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function AddListingPage() {
+  const navigate = useNavigate();
   const [currentStep, setCurrentStep] = useState(0);
   const [listingDetails, setListingDetails] = useState(INITIAL_LISTING_DETAILS);
   const [location, setLocation] = useState<ListingLocation>(INITIAL_LISTING_LOCATION);
@@ -12342,11 +12357,11 @@ function AddListingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
                         znajdziesz je w „Moich ogłoszeniach” ze statusem „Oczekuje”.
                       </p>
                       <div className="publish-success-actions">
-                        <button className="next-step-button" type="button" onClick={() => onNavigate('accountListings')}>
+                        <button className="next-step-button" type="button" onClick={() => navigate(ROUTES.accountListings)}>
                           Przejdź do moich ogłoszeń
                           <Icon name="arrow" />
                         </button>
-                        <button className="back-step-button" type="button" onClick={() => onNavigate('home')}>
+                        <button className="back-step-button" type="button" onClick={() => navigate(ROUTES.home)}>
                           Wróć do strony głównej
                         </button>
                       </div>
@@ -12683,7 +12698,8 @@ async function downloadBuyingChecklistPdf() {
   }
 }
 
-function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function GuideBuyingPage() {
+  const navigate = useNavigate();
   const scrollToId = (id: string) => {
     const target = document.getElementById(id);
     if (target) {
@@ -12697,7 +12713,7 @@ function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
         <img src={heroImage} alt="" />
         <div className="guide-hero-shade" />
         <div className="guides-container guide-hero-inner">
-          <button className="guide-back" onClick={() => onNavigate('guides')}>
+          <button className="guide-back" onClick={() => navigate(ROUTES.guides)}>
             <Icon name="arrow" />
             <span>Wróć do poradników</span>
           </button>
@@ -13132,7 +13148,7 @@ function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
               <h2>Gotowy, by znaleźć swoje mieszkanie?</h2>
               <p>Przeglądaj aktualne oferty dopasowane do Twoich potrzeb i budżetu.</p>
             </div>
-            <button onClick={() => onNavigate('buy')}>
+            <button onClick={() => navigate(ROUTES.buy)}>
               Zobacz oferty mieszkań
               <Icon name="arrow" />
             </button>
@@ -13143,19 +13159,19 @@ function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
           <section className="guide-aside-card">
             <h3><Icon name="calculator" /> Kalkulatory</h3>
             <div className="guide-aside-list">
-              <button onClick={() => onNavigate('creditCalculator')}>
+              <button onClick={() => navigate(ROUTES.creditCalculator)}>
                 <span><strong>Kalkulator zdolności kredytowej</strong><small>Sprawdź, na jaki kredyt Cię stać</small></span>
                 <Icon name="chevron" />
               </button>
-              <button onClick={() => onNavigate('valuation')}>
+              <button onClick={() => navigate(ROUTES.valuation)}>
                 <span><strong>Kalkulator wyceny mieszkania</strong><small>Oszacuj wartość nieruchomości</small></span>
                 <Icon name="chevron" />
               </button>
-              <button onClick={() => onNavigate('priceHistory')}>
+              <button onClick={() => navigate(ROUTES.priceHistory)}>
                 <span><strong>Historia cen</strong><small>Zobacz, jak zmieniały się ceny</small></span>
                 <Icon name="chevron" />
               </button>
-              <button onClick={() => onNavigate('districtRanking')}>
+              <button onClick={() => navigate(ROUTES.districtRanking)}>
                 <span><strong>Ranking dzielnic</strong><small>Porównaj lokalizacje</small></span>
                 <Icon name="chevron" />
               </button>
@@ -13190,7 +13206,8 @@ function GuideBuyingPage({ onNavigate }: { onNavigate: (view: View) => void }) {
   );
 }
 
-function GuidesPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function GuidesPage() {
+  const navigate = useNavigate();
   return (
     <section className="guides-page" aria-label="Poradniki">
       <section className="guides-hero">
@@ -13235,13 +13252,13 @@ function GuidesPage({ onNavigate }: { onNavigate: (view: View) => void }) {
                     key={topic.title}
                     role={isBuying ? 'button' : undefined}
                     tabIndex={isBuying ? 0 : undefined}
-                    onClick={isBuying ? () => onNavigate('guideBuying') : undefined}
+                    onClick={isBuying ? () => navigate(ROUTES.guideBuying) : undefined}
                     onKeyDown={
                       isBuying
                         ? (event) => {
                             if (event.key === 'Enter' || event.key === ' ') {
                               event.preventDefault();
-                              onNavigate('guideBuying');
+                              navigate(ROUTES.guideBuying);
                             }
                           }
                         : undefined
@@ -13358,7 +13375,8 @@ function GuidesPage({ onNavigate }: { onNavigate: (view: View) => void }) {
   );
 }
 
-function SellPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function SellPage() {
+  const navigate = useNavigate();
   return (
     <section className="sell-page" aria-label="Sprzedaj mieszkanie">
       <section className="sell-hero">
@@ -13385,7 +13403,7 @@ function SellPage({ onNavigate }: { onNavigate: (view: View) => void }) {
               <span><Icon name="spark" /> Pełne wsparcie</span>
             </div>
 
-            <button className="sell-primary" onClick={() => onNavigate('add')}>Dodaj ogłoszenie za darmo</button>
+            <button className="sell-primary" onClick={() => navigate(ROUTES.add)}>Dodaj ogłoszenie za darmo</button>
             <small>Zajmie Ci to tylko 2 minuty</small>
           </div>
         </div>
@@ -13429,7 +13447,7 @@ function SellPage({ onNavigate }: { onNavigate: (view: View) => void }) {
             <h2>Sprawdź wartość swojego mieszkania</h2>
             <p>Bezpłatna wycena online w 30 sekund</p>
             <div className="valuation-input">Podaj adres mieszkania</div>
-            <button onClick={() => onNavigate('valuation')}>Wyceń mieszkanie</button>
+            <button onClick={() => navigate(ROUTES.valuation)}>Wyceń mieszkanie</button>
             <div className="valuation-result">
               <span>Przykładowa wycena</span>
               <small>Kraków, Zabłocie</small>
@@ -13512,7 +13530,7 @@ function SellPage({ onNavigate }: { onNavigate: (view: View) => void }) {
             <strong>Gotowy na szybką i bezpieczną sprzedaż?</strong>
             <span>Dołącz do tysięcy osób, które już sprzedały z nami swoje mieszkanie.</span>
           </div>
-          <button onClick={() => onNavigate('add')}>Dodaj ogłoszenie za darmo</button>
+          <button onClick={() => navigate(ROUTES.add)}>Dodaj ogłoszenie za darmo</button>
           <small>Zajmie Ci to tylko 2 minuty</small>
         </section>
       </div>
@@ -14552,7 +14570,8 @@ function formatPercent(value: number): string {
   return `${(value * 100).toLocaleString('pl-PL', { maximumFractionDigits: 1 })}%`;
 }
 
-function CreditCalculatorPage({ onNavigate, onSearchWithBudget }: { onNavigate: (view: View) => void; onSearchWithBudget: (maxPrice: number) => void }) {
+function CreditCalculatorPage({ onSearchWithBudget }: { onSearchWithBudget: (maxPrice: number) => void }) {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const [form, setForm] = useState<CreditForm>(INITIAL_CREDIT_FORM);
   const [highlight, setHighlight] = useState(false);
@@ -14843,7 +14862,7 @@ function CreditCalculatorPage({ onNavigate, onSearchWithBudget }: { onNavigate:
     return (
       <section className="account-page" aria-label="Kalkulator zdolności kredytowej">
         <div className="account-layout">
-          <AccountSidebar onNavigate={onNavigate} activeView="creditCalculator" />
+          <AccountSidebar />
           <div className="account-main credit-account-main">
             {pageBody}
           </div>
@@ -14856,9 +14875,9 @@ function CreditCalculatorPage({ onNavigate, onSearchWithBudget }: { onNavigate:
     <section className="credit-page" aria-label="Kalkulator zdolności kredytowej">
       <div className="credit-shell">
         <div className="breadcrumb credit-breadcrumb">
-          <button type="button" onClick={() => onNavigate('guideBuying')}>Poradnik kupna</button>
+          <button type="button" onClick={() => navigate(ROUTES.guideBuying)}>Poradnik kupna</button>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => onNavigate('creditCalculator')}>Kalkulator zdolności kredytowej</button>
+          <button type="button" className="active" onClick={() => navigate(ROUTES.creditCalculator)}>Kalkulator zdolności kredytowej</button>
         </div>
         {pageBody}
       </div>
@@ -14866,7 +14885,8 @@ function CreditCalculatorPage({ onNavigate, onSearchWithBudget }: { onNavigate:
   );
 }
 
-function ValuationPage({ onNavigate }: { onNavigate: (view: View) => void }) {
+function ValuationPage() {
+  const navigate = useNavigate();
   const [step, setStep] = useState(0);
   const [valuationForm, setValuationForm] = useState<ValuationForm>(INITIAL_VALUATION_FORM);
   const [valuationLocationSuggestOpen, setValuationLocationSuggestOpen] = useState(false);
@@ -15023,9 +15043,9 @@ function ValuationPage({ onNavigate }: { onNavigate: (view: View) => void }) {
     <section className="valuation-page" aria-label="Wycena nieruchomości">
       <div className="valuation-shell">
         <div className="breadcrumb valuation-breadcrumb">
-          <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => onNavigate('valuation')}>Wycena nieruchomości</button>
+          <button type="button" className="active" onClick={() => navigate(ROUTES.valuation)}>Wycena nieruchomości</button>
         </div>
 
         <div className={`valuation-title ${isValuationResultStep ? 'result' : ''}`}>
@@ -15088,7 +15108,7 @@ function ValuationPage({ onNavigate }: { onNavigate: (view: View) => void }) {
                 <div className="valuation-result-actions">
                   <button type="button" className="valuation-back" onClick={() => setStep(2)}><Icon name="arrow" /> Wróć</button>
                   <button type="button" className="valuation-back" disabled={!valuation.ready} onClick={() => downloadValuationReportPdf(valuationForm, valuation, valuationConfidenceLabel)}><Icon name="document" /> Pobierz raport (PDF)</button>
-                  <button type="button" className="valuation-next" onClick={() => onNavigate('add')}>Rozpocznij sprzedaż <Icon name="arrow" /></button>
+                  <button type="button" className="valuation-next" onClick={() => navigate(ROUTES.add)}>Rozpocznij sprzedaż <Icon name="arrow" /></button>
                 </div>
               </section>
             </div>
@@ -16662,7 +16682,8 @@ function historyShortMarketLabel(market: PriceHistoryMarket) {
   return tail;
 }
 
-function PriceHistoryPage({ onNavigate, user }: { onNavigate: (view: View) => void; user: AuthUser | null }) {
+function PriceHistoryPage({ user }: { user: AuthUser | null }) {
+  const navigate = useNavigate();
   const [locationInput, setLocationInput] = useState('');
   const [selectedMarket, setSelectedMarket] = useState<PriceHistoryMarket | null>(null);
   const [propertyType, setPropertyType] = useState<HistoryPropertyType>('Mieszkanie');
@@ -16852,7 +16873,7 @@ function PriceHistoryPage({ onNavigate, user }: { onNavigate: (view: View) => vo
   const createCityAlert = () => {
     if (!user) {
       setCreateAlertFeedback('Zaloguj się, aby dodać alert cenowy.');
-      onNavigate('login');
+      navigate(ROUTES.login);
       return;
     }
     if (!selectedMarket) {
@@ -16886,9 +16907,9 @@ function PriceHistoryPage({ onNavigate, user }: { onNavigate: (view: View) => vo
     <section className="history-page" aria-label="Historia cen">
       <div className="history-shell">
         <div className="breadcrumb history-breadcrumb">
-          <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => onNavigate('priceHistory')}>Historia cen</button>
+          <button type="button" className="active" onClick={() => navigate(ROUTES.priceHistory)}>Historia cen</button>
         </div>
 
         <div className="history-title">
@@ -18067,7 +18088,8 @@ function LocationPickerMap({
   );
 }
 
-function MapSearchPage({ initialCity, offerType, onNavigate }: { initialCity: string; offerType: ApiOfferType; onNavigate: (view: View) => void }) {
+function MapSearchPage({ initialCity, offerType }: { initialCity: string; offerType: ApiOfferType }) {
+  const navigate = useNavigate();
   const knownInitialCity = findKnownCityKey(initialCity);
   const startCity = knownInitialCity ?? '';
   const initialCityValue = initialCity.trim();
@@ -18316,7 +18338,7 @@ function MapSearchPage({ initialCity, offerType, onNavigate }: { initialCity: st
   return (
     <section className="map-search-page" aria-label="Mapa ofert">
       <div className="map-search-bar">
-        <button type="button" className="map-back" onClick={() => onNavigate(isRentMode ? 'rent' : 'buy')}>
+        <button type="button" className="map-back" onClick={() => navigate(isRentMode ? ROUTES.rent : ROUTES.buy)}>
           <Icon name="chevron" />
           <span>Wróć do listy</span>
         </button>
@@ -18443,18 +18465,15 @@ function MapSearchPage({ initialCity, offerType, onNavigate }: { initialCity: st
 }
 
 function Header({
-  activeView,
-  onNavigate,
   onLogout,
   hasUnreadFavorites,
   onOpenNotification,
 }: {
-  activeView: View;
-  onNavigate: (view: View) => void;
   onLogout: () => void;
   hasUnreadFavorites: boolean;
   onOpenNotification: (notification: DisplayNotification) => void;
 }) {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const { notifications: serverNotifications, unreadCount } = useNotifications();
   const isLoggedIn = Boolean(user);
@@ -18524,15 +18543,15 @@ function Header({
     };
   }, [isAccountMenuOpen]);
 
-  const goToAccountSection = (targetView: View) => {
+  const goToAccountSection = (targetPath: string) => {
     setIsAccountMenuOpen(false);
-    onNavigate(targetView);
+    navigate(targetPath);
   };
 
   return (
     <header className={isAdmin ? 'header header-admin' : 'header'}>
       <div className="brand-group">
-        <button className="brand" onClick={() => onNavigate('home')} aria-label="Mieszko">
+        <Link className="brand" to={ROUTES.home} aria-label="Mieszko">
           <span className="brand-mark">
             <Icon name="logo" />
           </span>
@@ -18540,38 +18559,41 @@ function Header({
             <strong>mieszko</strong>
             <small>mieszkania za darmo</small>
           </span>
-        </button>
+        </Link>
 
         {isAdmin && <span className="brand-admin-badge">ADMIN</span>}
       </div>
 
       <nav className="nav" aria-label="Główna nawigacja">
-        <button className={activeView === 'buy' ? 'active' : ''} onClick={() => onNavigate('buy')}>
+        <NavLink to={ROUTES.buy} className={navLinkClass}>
           Kupuję
-        </button>
-        <button className={activeView === 'rent' ? 'active' : ''} onClick={() => onNavigate('rent')}>
+        </NavLink>
+        <NavLink to={ROUTES.rent} className={navLinkClass}>
           Wynajmuję
-        </button>
-        <button className={activeView === 'sell' ? 'active' : ''} onClick={() => onNavigate('sell')}>
+        </NavLink>
+        <NavLink to={ROUTES.sell} className={navLinkClass}>
           Jak sprzedawać
-        </button>
-        <button className={activeView === 'valuation' ? 'active' : ''} onClick={() => onNavigate('valuation')}>
+        </NavLink>
+        <NavLink to={ROUTES.valuation} className={navLinkClass}>
           Wycena mieszkania
-        </button>
-        <button className={activeView === 'services' ? 'active' : ''} onClick={() => onNavigate('services')}>
+        </NavLink>
+        <NavLink to={ROUTES.services} className={navLinkClass}>
           Firmy i usługi
-        </button>
-        <button className={activeView === 'guides' ? 'active' : ''} onClick={() => onNavigate('guides')}>
+        </NavLink>
+        <NavLink to={ROUTES.guides} className={navLinkClass}>
           Poradniki
-        </button>
+        </NavLink>
       </nav>
 
       <div className="header-actions">
-        <button className={activeView === 'favorites' ? 'icon-text favorites-shortcut active' : 'icon-text favorites-shortcut'} onClick={() => onNavigate('favorites')}>
+        <NavLink
+          to={ROUTES.favorites}
+          className={({ isActive }) => (isActive ? 'icon-text favorites-shortcut active' : 'icon-text favorites-shortcut')}
+        >
           <Icon name="heart" />
           <span>Ulubione</span>
           {hasUnreadFavorites && <i aria-hidden="true" />}
-        </button>
+        </NavLink>
         {isLoggedIn && (
           <div className="notify-bell-wrap" ref={notificationPopoverRef}>
             <button
@@ -18594,7 +18616,7 @@ function Header({
                     type="button"
                     onClick={() => {
                       setIsNotificationsOpen(false);
-                      onNavigate('notifications');
+                      navigate(ROUTES.notifications);
                     }}
                   >
                     Zobacz wszystkie
@@ -18630,16 +18652,16 @@ function Header({
           </div>
         )}
         {isAdmin && (
-          <button
-            className={activeView === 'admin' ? 'icon-text active' : 'icon-text'}
-            onClick={() => onNavigate('admin')}
+          <NavLink
+            to={ROUTES.admin}
+            className={({ isActive }) => (isActive ? 'icon-text active' : 'icon-text')}
           >
             <Icon name="shield" />
             <span>Panel admina</span>
-          </button>
+          </NavLink>
         )}
         {!isLoggedIn && (
-          <button className="icon-text" onClick={() => onNavigate('login')}>
+          <button className="icon-text" onClick={() => navigate(ROUTES.login)}>
             <Icon name="user" />
             <span>Moje konto</span>
           </button>
@@ -18660,13 +18682,13 @@ function Header({
 
             {isAccountMenuOpen && (
               <div className="account-popover" role="menu" aria-label="Menu konta">
-                <button type="button" role="menuitem" onClick={() => goToAccountSection('account')}>
+                <button type="button" role="menuitem" onClick={() => goToAccountSection(ROUTES.account)}>
                   <Icon name="house" /> Panel główny
                 </button>
-                <button type="button" role="menuitem" onClick={() => goToAccountSection('accountListings')}>
+                <button type="button" role="menuitem" onClick={() => goToAccountSection(ROUTES.accountListings)}>
                   <Icon name="document" /> Moje oferty
                 </button>
-                <button type="button" role="menuitem" onClick={() => goToAccountSection('accountSettings')}>
+                <button type="button" role="menuitem" onClick={() => goToAccountSection(ROUTES.accountSettings)}>
                   <Icon name="gear" /> Dane i ustawienia
                 </button>
                 <button
@@ -18684,7 +18706,7 @@ function Header({
             )}
           </div>
         )}
-        <button className="post-button" onClick={() => onNavigate('add')}>
+        <button className="post-button" onClick={() => navigate(ROUTES.add)}>
           <span>Dodaj ogłoszenie za darmo</span>
           <small>0 zł • Bez prowizji</small>
         </button>
@@ -18762,16 +18784,18 @@ function NotificationsPage({ onOpenNotification }: { onOpenNotification: (notifi
 }
 
 function MessagesPage({
-  onNavigate,
   onOpenListing,
-  initialThreadTarget,
-  onThreadTargetHandled,
 }: {
-  onNavigate: (view: View) => void;
   onOpenListing: (id: number) => void;
-  initialThreadTarget: MessageThreadTarget | null;
-  onThreadTargetHandled: () => void;
 }) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  // Rozmowa otwarta z ogloszenia lub ulubionych przychodzi w location.state.
+  // Po zalozeniu watku czyscimy state, zeby powrot Wstecz nie tworzyl go ponownie.
+  const initialThreadTarget = (location.state as { threadTarget?: MessageThreadTarget } | null)?.threadTarget ?? null;
+  const onThreadTargetHandled = useCallback(() => {
+    navigate(location.pathname, { replace: true, state: null });
+  }, [navigate, location.pathname]);
   type BusinessCard = {
     fullName: string;
     phone: string;
@@ -19605,9 +19629,9 @@ function MessagesPage({
       <div className="messages-shell">
         <div className="messages-header">
           <div className="messages-breadcrumb" aria-label="Nawigacja wiadomości">
-            <button type="button" onClick={() => onNavigate('account')}>Panel główny</button>
+            <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => onNavigate('messages')}>Wiadomości</button>
+            <button type="button" className="active" onClick={() => navigate(ROUTES.messages)}>Wiadomości</button>
           </div>
           <h1>Wiadomości</h1>
         </div>
@@ -19965,20 +19989,19 @@ function MessagesPage({
 }
 
 function FavoritesPage({
-  onNavigate,
   onOpenListing,
   onStartChat,
   favoritesState,
   setFavoritesState,
   preferredTab,
 }: {
-  onNavigate: (view: View) => void;
   onOpenListing: (id: number) => void;
   onStartChat: (target: MessageThreadTarget) => void;
   favoritesState: FavoriteListing[];
   setFavoritesState: Dispatch<SetStateAction<FavoriteListing[]>>;
   preferredTab: FavoriteTab;
 }) {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const [activeTab, setActiveTab] = useState<FavoriteTab>('buy');
   const [menuListingId, setMenuListingId] = useState<string | null>(null);
@@ -20265,7 +20288,7 @@ function FavoritesPage({
                 <div className="favorite-content">
                   <h3>Brak ogłoszeń w tej kategorii</h3>
                   <p>{searchQuery || activeFiltersCount > 0 ? 'Zmień filtry lub frazę wyszukiwania, aby zobaczyć więcej ofert.' : 'Dodaj nowe oferty do ulubionych, aby pojawiły się na tej liście.'}</p>
-                  <button type="button" className="favorite-empty-cta" onClick={() => onNavigate(activeTab === 'buy' ? 'buy' : 'rent')}><Icon name="plus" /> {activeTab === 'buy' ? 'Przejdź do ofert Kupuję' : 'Przejdź do ofert Wynajmuję'}</button>
+                  <button type="button" className="favorite-empty-cta" onClick={() => navigate(activeTab === 'buy' ? ROUTES.buy : ROUTES.rent)}><Icon name="plus" /> {activeTab === 'buy' ? 'Przejdź do ofert Kupuję' : 'Przejdź do ofert Wynajmuję'}</button>
                 </div>
               </article>
             )}
@@ -20662,7 +20685,6 @@ function useLiveListings(offerType: ApiOfferType, refreshMs = LIVE_LISTINGS_REFR
 
 function ListingDetailPage({
   listingId,
-  onNavigate,
   onStartChat,
   isFavorite,
   onToggleFavorite,
@@ -20670,13 +20692,13 @@ function ListingDetailPage({
   onToggleListingAlert,
 }: {
   listingId: number | null;
-  onNavigate: (view: View) => void;
   onStartChat: (target: MessageThreadTarget) => void;
   isFavorite: (listingId: number) => boolean;
   onToggleFavorite: (listing: ApiListingDetail) => void;
   isListingAlertEnabled: (listingId: number) => boolean;
   onToggleListingAlert: (listing: ApiListingDetail) => void;
 }) {
+  const navigate = useNavigate();
   const { user } = useAuth();
   const [listing, setListing] = useState<ApiListingDetail | null>(null);
   const [loading, setLoading] = useState(true);
@@ -20848,7 +20870,7 @@ function ListingDetailPage({
       <section className="listing-detail-page">
         <div className="listing-detail-state">
           <p>{error ?? 'Nie znaleziono ogłoszenia.'}</p>
-          <button type="button" className="listing-detail-back" onClick={() => onNavigate('buy')}>
+          <button type="button" className="listing-detail-back" onClick={() => navigate(ROUTES.buy)}>
             <Icon name="arrow" /> Wróć do ofert
           </button>
         </div>
@@ -20929,7 +20951,7 @@ function ListingDetailPage({
 
   const openReportModal = () => {
     if (!user) {
-      onNavigate('login');
+      navigate(ROUTES.login);
       return;
     }
     setReportStep(1);
@@ -21121,9 +21143,9 @@ function ListingDetailPage({
   return (
     <section className="listing-detail-page">
       <div className="listing-detail-crumbs">
-        <button type="button" onClick={() => onNavigate('home')}>Panel główny</button>
+        <button type="button" onClick={() => navigate(ROUTES.home)}>Panel główny</button>
         <span>›</span>
-        <button type="button" onClick={() => onNavigate(listing.offerType === 'RENT' ? 'rent' : 'buy')}>
+        <button type="button" onClick={() => navigate(listing.offerType === 'RENT' ? ROUTES.rent : ROUTES.buy)}>
           {listing.offerType === 'RENT' ? 'Wynajmuję' : 'Kupuję'}
         </button>
         <span>›</span>
@@ -21312,7 +21334,7 @@ function ListingDetailPage({
               </div>
             </div>
 
-            <button type="button" className="listing-detail-profile-btn" onClick={() => onNavigate('accountPublicProfile')}>
+            <button type="button" className="listing-detail-profile-btn" onClick={() => navigate(ROUTES.accountPublicProfile)}>
               Wyświetl profil
             </button>
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9239dd0..55ce034 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -86,13 +86,13 @@ svg {
   row-gap: 6px;
 }
 
-.header-admin .nav button {
+.header-admin .nav button, .header-admin .nav a {
   color: #dbe4f0;
   font-size: 12px;
   padding: 8px 0;
 }
 
-.header-admin .nav button.active::after {
+.header-admin .nav button.active::after, .header-admin .nav a.active::after {
   bottom: 2px;
 }
 
@@ -194,7 +194,7 @@ svg {
   min-width: 0;
 }
 
-.nav button {
+.nav button, .nav a {
   background: transparent;
   border: 0;
   color: #111a2e;
@@ -206,7 +206,7 @@ svg {
   white-space: nowrap;
 }
 
-.nav button.active::after {
+.nav button.active::after, .nav a.active::after {
   background: #13a360;
   border-radius: 999px;
   bottom: 20px;
@@ -10798,7 +10798,7 @@ svg {
     gap: 17px;
   }
 
-  .nav button,
+  .nav button, .nav a,
   .icon-text span {
     font-size: 12px;
   }
@@ -11003,11 +11003,11 @@ svg {
     padding-bottom: 4px;
   }
 
-  .nav button {
+  .nav button, .nav a {
     padding: 8px 0 12px;
   }
 
-  .nav button.active::after {
+  .nav button.active::after, .nav a.active::after {
     bottom: 3px;
   }
 
@@ -13947,7 +13947,7 @@ svg {
   text-transform: uppercase;
 }
 
-.account-menu button {
+.account-menu button, .account-menu a {
   align-items: center;
   background: transparent;
   border: 0;
@@ -13964,12 +13964,12 @@ svg {
   width: 100%;
 }
 
-.account-menu button svg {
+.account-menu button svg, .account-menu a svg {
   color: #7d8ca0;
   font-size: 14px;
 }
 
-.account-menu button span {
+.account-menu button span, .account-menu a span {
   background: #e8f8ef;
   border-radius: 999px;
   color: #109253;
@@ -13978,13 +13978,13 @@ svg {
   padding: 1px 6px;
 }
 
-.account-menu button .tag {
+.account-menu button .tag, .account-menu a .tag {
   border-radius: 4px;
   font-size: 9px;
   padding: 1px 5px;
 }
 
-.account-menu button.active {
+.account-menu button.active, .account-menu a.active {
   background: #ebf6f0;
   color: #109253;
 }
@@ -17044,7 +17044,7 @@ svg {
 .account-alerts article > span svg,
 .account-searches article > span svg,
 .account-tools article > span svg,
-.account-menu button svg {
+.account-menu button svg, .account-menu a svg {
   height: 14px;
   width: 14px;
 }
@@ -26752,3 +26752,24 @@ svg {
 
 /* Routing: stan wczytywania profilu przy wejsciu na trase chroniona */
 .route-loading { padding: 80px 24px; text-align: center; color: #5b6472; font-size: 15px; font-weight: 600; }
+
+/* Routing: NavLink/Link renderuja <a> - zerujemy domyslne style linku,
+   zeby menu wygladalo dokladnie tak jak wczesniejsze <button>. */
+.nav a,
+.account-menu a,
+.brand,
+.icon-text {
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.not-found-page { display: grid; padding: 90px 24px 120px; place-items: center; }
+.not-found-shell { max-width: 520px; text-align: center; }
+.not-found-shell h1 { color: #13a360; font-size: 88px; font-weight: 900; line-height: 1; margin: 0; }
+.not-found-shell h2 { color: #111a2e; font-size: 24px; font-weight: 800; margin: 16px 0 8px; }
+.not-found-shell p { color: #5b6472; font-size: 15px; margin: 0 0 28px; }
+.not-found-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
+.not-found-actions a { border-radius: 10px; font-size: 14px; font-weight: 800; padding: 12px 22px; text-decoration: none; }
+.not-found-primary { background: #13a360; color: #ffffff; }
+.not-found-secondary { border: 1px solid #d5dde7; color: #27384f; }

From af21991d9ff13138bb25985def038be4ed8d8144 Mon Sep 17 00:00:00 2001
From: pascal <zatorskipascal@gmail.com>
Date: Thu, 23 Jul 2026 23:36:30 +0200
Subject: [PATCH 06/10] Panel admina: 16 zakladek jako podsciezki /admin/*

- aktywna zakladka wyznaczana z adresu (useParams), nie z useState
- setTab() nawiguje zamiast zmieniac stan lokalny
- sidebar admina: <button> -> <NavLink>
- typ AdminTab zunifikowany z AdminTabKey z routes.ts
- nieznana sekcja /admin/cokolwiek -> strona 404
- CSS .admin-nav rozszerzony o warianty <a>

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx    | 38 +++++++++++++++++++++-----------------
 frontend/src/styles.css | 13 ++++++++-----
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 39e39d3..8867836 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3665,10 +3665,8 @@ function accountStorageKey(suffix: string, user: AuthUser | null): string {
   return `accountProfile:${user?.id ?? 'guest'}:${suffix}`;
 }
 
-type AdminTab =
-  | 'dashboard' | 'listings' | 'users' | 'messages' | 'reports' | 'payments'
-  | 'stats' | 'settings' | 'moderation' | 'categories' | 'locations' | 'promotions' | 'forbiddenWords'
-  | 'leads' | 'campaigns' | 'mailConfig';
+// Zakladki panelu maja odpowiedniki w sciezkach /admin/* - jedno zrodlo prawdy w routes.ts.
+type AdminTab = AdminTabKey;
 
 const ADMIN_TAB_META: Record<AdminTab, { title: string; subtitle: string }> = {
   dashboard: { title: 'Panel administratora', subtitle: 'Zarządzaj ogłoszeniami i użytkownikami serwisu.' },
@@ -3848,7 +3846,14 @@ function AdminMessageModal({ user, onClose }: { user: AuthUser; onClose: () => v
 function AdminPage() {
   const navigate = useNavigate();
   const { user } = useAuth();
-  const [tab, setTab] = useState<AdminTab>('dashboard');
+  // Aktywna zakladka wynika z adresu (/admin/leady), nie ze stanu komponentu -
+  // dzieki temu kazda sekcja panelu ma wlasny URL, dziala F5 i przycisk Wstecz.
+  const adminSegment = useParams()['*'] ?? '';
+  const tab: AdminTab = ADMIN_PATH_TO_TAB[adminSegment] ?? 'dashboard';
+  const isUnknownAdminSection = adminSegment !== '' && !(adminSegment in ADMIN_PATH_TO_TAB);
+  const setTab = useCallback((next: AdminTab) => {
+    navigate(adminTabPath(next));
+  }, [navigate]);
   const [users, setUsers] = useState<AuthUser[]>([]);
   const [listings, setListings] = useState<AdminListing[]>([]);
   const [reports, setReports] = useState<AdminListingReport[]>([]);
@@ -4193,6 +4198,10 @@ function AdminPage() {
     }
   };
 
+  if (isUnknownAdminSection) {
+    return <NotFoundPage />;
+  }
+
   return (
     <section className="admin-page admin-page-shell" aria-label="Panel administratora">
       <div className="admin-shell admin-shell-with-sidebar">
@@ -4201,31 +4210,26 @@ function AdminPage() {
 
           <nav className="admin-nav">
             {ADMIN_NAV_ITEMS.map((item) => (
-              <button
+              <NavLink
                 key={item.id}
-                type="button"
-                className={tab === item.id ? 'active' : ''}
-                onClick={() => setTab(item.id)}
+                to={adminTabPath(item.id)}
+                end={item.id === 'dashboard'}
+                className={navLinkClass}
               >
                 <Icon name={item.icon} /> {item.label}
                 {item.id === 'listings' && pendingCount > 0 && <b>{pendingCount}</b>}
                 {item.id === 'users' && pendingVerificationCount > 0 && <b>{pendingVerificationCount}</b>}
                 {item.id === 'reports' && pendingReportsCount > 0 && <b>{pendingReportsCount}</b>}
-              </button>
+              </NavLink>
             ))}
           </nav>
 
           <p className="admin-nav-group-label">Narzędzia</p>
           <nav className="admin-nav">
             {ADMIN_TOOL_ITEMS.map((item) => (
-              <button
-                key={item.id}
-                type="button"
-                className={tab === item.id ? 'active' : ''}
-                onClick={() => setTab(item.id)}
-              >
+              <NavLink key={item.id} to={adminTabPath(item.id)} className={navLinkClass}>
                 <Icon name={item.icon} /> {item.label}
-              </button>
+              </NavLink>
             ))}
           </nav>
 
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 55ce034..e2071c4 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -21387,7 +21387,7 @@ svg {
   gap: 3px;
 }
 
-.admin-nav button {
+.admin-nav button, .admin-nav a {
   align-items: center;
   background: transparent;
   border: 0;
@@ -21404,22 +21404,22 @@ svg {
   text-align: left;
 }
 
-.admin-nav button svg {
+.admin-nav button svg, .admin-nav a svg {
   color: #7186a0;
   height: 15px;
   width: 15px;
 }
 
-.admin-nav button.active {
+.admin-nav button.active, .admin-nav a.active {
   background: #ebf6f0;
   color: #109253;
 }
 
-.admin-nav button.active svg {
+.admin-nav button.active svg, .admin-nav a.active svg {
   color: #109253;
 }
 
-.admin-nav button b {
+.admin-nav button b, .admin-nav a b {
   background: #129357;
   border-radius: 999px;
   color: #ffffff;
@@ -26773,3 +26773,6 @@ svg {
 .not-found-actions a { border-radius: 10px; font-size: 14px; font-weight: 800; padding: 12px 22px; text-decoration: none; }
 .not-found-primary { background: #13a360; color: #ffffff; }
 .not-found-secondary { border: 1px solid #d5dde7; color: #27384f; }
+
+/* Routing: pozycje menu admina to teraz <a> (NavLink) */
+.admin-nav a { color: inherit; cursor: pointer; text-decoration: none; }

From 5f5bec72322f01dc177e2c56c05987d8e1bcfe47 Mon Sep 17 00:00:00 2001
From: pascal <zatorskipascal@gmail.com>
Date: Thu, 23 Jul 2026 23:48:43 +0200
Subject: [PATCH 07/10] Przewijanie przy zmianie trasy i naprawa petli renderow
 w porownaniu ofert

- nowa trasa startuje od gory strony, przy cofaniu (POP) pozycja zostaje
  przy przegladarce, wiec powrot do listy ofert wraca w to samo miejsce
- AccountComparisonPage: setSelectedDetails({}) tworzylo nowy obiekt przy
  kazdym przebiegu efektu zaleznego od selectedDetails, co dawalo
  nieskonczona petle ("Maximum update depth exceeded"). Blad byl obecny
  przed migracja - ujawnily go testy E2E nowej trasy /konto/porownanie.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8867836..8586684 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import { Fragment, type ChangeEvent as ReactChangeEvent, type ClipboardEvent as ReactClipboardEvent, type Dispatch, type DragEvent as ReactDragEvent, type FormEvent as ReactFormEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, type SetStateAction, type WheelEvent as ReactWheelEvent, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import './styles.css';
-import { Link, NavLink, Navigate, Outlet, Route, Routes, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { Link, NavLink, Route, Routes, useLocation, useNavigate, useNavigationType, useParams, useSearchParams } from 'react-router-dom';
 import { ROUTES, listingPath, mapPath, negotiationPath, adminTabPath, ADMIN_PATH_TO_TAB, type AdminTabKey } from './routes';
 import { ProtectedRoute } from './ProtectedRoute';
 import { apiFetch, useAuth } from './auth';
@@ -2619,6 +2619,7 @@ function App() {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
   const location = useLocation();
+  const navigationType = useNavigationType();
   const [favoriteListingsState, setFavoriteListingsState] = useState<FavoriteListing[]>(favoriteListings);
   const [favoritesPreferredTab, setFavoritesPreferredTab] = useState<FavoriteTab>('buy');
   const [listingPriceAlertSubscriptionsState, setListingPriceAlertSubscriptionsState] = useState<ListingPriceAlertSubscription[]>([]);
@@ -3365,6 +3366,14 @@ function App() {
     };
   }, [user, monitoredListingIdList, monitoredListingIdsSignature, listingPriceAlertIdList, listingPriceAlertIdsSignature]);
 
+  // Wejscie na nowa trase zaczynamy od gory strony. Przy cofaniu (POP) zostawiamy
+  // pozycje przegladarce, zeby powrot do listy ofert wracal w to samo miejsce.
+  useEffect(() => {
+    if (navigationType !== 'POP') {
+      window.scrollTo({ top: 0, behavior: 'auto' });
+    }
+  }, [location.pathname, navigationType]);
+
   return (
     <div className={`site-shell ${location.pathname === ROUTES.login ? 'login-shell' : ''}`}>
       <Header onLogout={handleLogout} hasUnreadFavorites={unreadFavoriteIds.size > 0} onOpenNotification={handleOpenNotification} />
@@ -6897,7 +6906,9 @@ function AccountComparisonPage({ onOpenListing }: { onOpenListing: (id: number)
 
   useEffect(() => {
     if (selectedIds.length === 0) {
-      setSelectedDetails({});
+      // Zachowujemy referencje pustego obiektu - podstawienie nowego {} zmienialoby
+      // zaleznosc selectedDetails i efekt wpadalby w nieskonczona petle renderow.
+      setSelectedDetails((current) => (Object.keys(current).length === 0 ? current : {}));
       return;
     }
 

From f966b4539a0261dbc68e2d9149a7a5786ad45e8d Mon Sep 17 00:00:00 2001
From: pascal <zatorskipascal@gmail.com>
Date: Thu, 23 Jul 2026 23:52:37 +0200
Subject: [PATCH 08/10] Okruszki nawigacyjne i CTA naglowka jako <Link>

- 16 przyciskow w breadcrumbach zamienionych na <Link> (semantyka linku,
  otwieranie w nowej karcie, podglad celu na hover)
- naglowek: "Moje konto" i "Dodaj ogloszenie za darmo" jako <Link>
- CSS breadcrumbow rozszerzony o warianty <a>, wyglad bez zmian
  (zweryfikowane zrzutami ekranu)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx    | 40 ++++++++++++++++++++--------------------
 frontend/src/styles.css | 37 +++++++++++++++++++++++++------------
 2 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 8586684..3503dd8 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5141,9 +5141,9 @@ function DistrictRankingPage() {
     <section className="district-ranking-page" aria-label="Ranking dzielnic">
       <div className="district-ranking-shell">
         <div className="district-breadcrumb">
-          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
+          <Link to={ROUTES.account}>Panel główny</Link>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => navigate(ROUTES.districtRanking)}>Ranking dzielnic</button>
+          <Link className="active" to={ROUTES.districtRanking}>Ranking dzielnic</Link>
         </div>
 
         <div className="district-ranking-title">
@@ -5272,9 +5272,9 @@ function NegotiationPage({
       <section className="negotiation-page" aria-label="Ile możesz utargować">
         <div className="negotiation-shell">
           <div className="negotiation-breadcrumb">
-            <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
+            <Link to={ROUTES.account}>Panel główny</Link>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => navigate(ROUTES.negotiation)}>Ile możesz utargować?</button>
+            <Link className="active" to={ROUTES.negotiation}>Ile możesz utargować?</Link>
           </div>
 
           <div className="negotiation-title">
@@ -5309,9 +5309,9 @@ function NegotiationPage({
     <section className="negotiation-page" aria-label="Ile możesz utargować">
       <div className="negotiation-shell">
         <div className="negotiation-breadcrumb">
-          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
+          <Link to={ROUTES.account}>Panel główny</Link>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => navigate(ROUTES.negotiation)}>Ile możesz utargować?</button>
+          <Link className="active" to={ROUTES.negotiation}>Ile możesz utargować?</Link>
         </div>
 
         <div className="negotiation-title">
@@ -7287,9 +7287,9 @@ function AccountComparisonPage({ onOpenListing }: { onOpenListing: (id: number)
 
         <div className="comparison-main">
           <div className="comparison-breadcrumb">
-            <button type="button" onClick={() => navigate(ROUTES.home)}>Strona główna</button>
+            <Link to={ROUTES.home}>Strona główna</Link>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => navigate(ROUTES.comparison)}>Porównywarka mieszkań</button>
+            <Link className="active" to={ROUTES.comparison}>Porównywarka mieszkań</Link>
           </div>
 
           <div className="comparison-head">
@@ -14890,9 +14890,9 @@ function CreditCalculatorPage({ onSearchWithBudget }: { onSearchWithBudget: (max
     <section className="credit-page" aria-label="Kalkulator zdolności kredytowej">
       <div className="credit-shell">
         <div className="breadcrumb credit-breadcrumb">
-          <button type="button" onClick={() => navigate(ROUTES.guideBuying)}>Poradnik kupna</button>
+          <Link to={ROUTES.guideBuying}>Poradnik kupna</Link>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => navigate(ROUTES.creditCalculator)}>Kalkulator zdolności kredytowej</button>
+          <Link className="active" to={ROUTES.creditCalculator}>Kalkulator zdolności kredytowej</Link>
         </div>
         {pageBody}
       </div>
@@ -15058,9 +15058,9 @@ function ValuationPage() {
     <section className="valuation-page" aria-label="Wycena nieruchomości">
       <div className="valuation-shell">
         <div className="breadcrumb valuation-breadcrumb">
-          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
+          <Link to={ROUTES.account}>Panel główny</Link>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => navigate(ROUTES.valuation)}>Wycena nieruchomości</button>
+          <Link className="active" to={ROUTES.valuation}>Wycena nieruchomości</Link>
         </div>
 
         <div className={`valuation-title ${isValuationResultStep ? 'result' : ''}`}>
@@ -16922,9 +16922,9 @@ function PriceHistoryPage({ user }: { user: AuthUser | null }) {
     <section className="history-page" aria-label="Historia cen">
       <div className="history-shell">
         <div className="breadcrumb history-breadcrumb">
-          <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
+          <Link to={ROUTES.account}>Panel główny</Link>
           <Icon name="chevron" />
-          <button type="button" className="active" onClick={() => navigate(ROUTES.priceHistory)}>Historia cen</button>
+          <Link className="active" to={ROUTES.priceHistory}>Historia cen</Link>
         </div>
 
         <div className="history-title">
@@ -18676,10 +18676,10 @@ function Header({
           </NavLink>
         )}
         {!isLoggedIn && (
-          <button className="icon-text" onClick={() => navigate(ROUTES.login)}>
+          <Link className="icon-text" to={ROUTES.login}>
             <Icon name="user" />
             <span>Moje konto</span>
-          </button>
+          </Link>
         )}
         {isLoggedIn && (
           <div className="account-menu-wrap" ref={accountMenuRef}>
@@ -18721,10 +18721,10 @@ function Header({
             )}
           </div>
         )}
-        <button className="post-button" onClick={() => navigate(ROUTES.add)}>
+        <Link className="post-button" to={ROUTES.add}>
           <span>Dodaj ogłoszenie za darmo</span>
           <small>0 zł • Bez prowizji</small>
-        </button>
+        </Link>
       </div>
     </header>
   );
@@ -19644,9 +19644,9 @@ function MessagesPage({
       <div className="messages-shell">
         <div className="messages-header">
           <div className="messages-breadcrumb" aria-label="Nawigacja wiadomości">
-            <button type="button" onClick={() => navigate(ROUTES.account)}>Panel główny</button>
+            <Link to={ROUTES.account}>Panel główny</Link>
             <Icon name="chevron" />
-            <button type="button" className="active" onClick={() => navigate(ROUTES.messages)}>Wiadomości</button>
+            <Link className="active" to={ROUTES.messages}>Wiadomości</Link>
           </div>
           <h1>Wiadomości</h1>
         </div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index e2071c4..df27c4b 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -6000,7 +6000,7 @@ svg {
   margin-bottom: 22px;
 }
 
-.valuation-breadcrumb button {
+.valuation-breadcrumb button, .valuation-breadcrumb a {
   background: transparent;
   border: 0;
   color: #768398;
@@ -6009,7 +6009,7 @@ svg {
   padding: 0;
 }
 
-.valuation-breadcrumb button.active {
+.valuation-breadcrumb button.active, .valuation-breadcrumb a.active {
   color: #14223a;
 }
 
@@ -6876,7 +6876,7 @@ svg {
   padding: 0;
 }
 
-.history-breadcrumb button {
+.history-breadcrumb button, .history-breadcrumb a {
   background: transparent;
   border: 0;
   color: #7a8798;
@@ -6885,7 +6885,7 @@ svg {
   padding: 0;
 }
 
-.history-breadcrumb button.active {
+.history-breadcrumb button.active, .history-breadcrumb a.active {
   color: #14223a;
 }
 
@@ -9553,7 +9553,7 @@ svg {
   margin-bottom: 24px;
 }
 
-.district-breadcrumb button {
+.district-breadcrumb button, .district-breadcrumb a {
   background: transparent;
   border: 0;
   color: #768398;
@@ -9562,7 +9562,7 @@ svg {
   padding: 0;
 }
 
-.district-breadcrumb button.active {
+.district-breadcrumb button.active, .district-breadcrumb a.active {
   color: #14223a;
 }
 
@@ -10090,7 +10090,7 @@ svg {
   margin-bottom: 18px;
 }
 
-.negotiation-breadcrumb button {
+.negotiation-breadcrumb button, .negotiation-breadcrumb a {
   background: transparent;
   border: 0;
   color: #768398;
@@ -10099,7 +10099,7 @@ svg {
   padding: 0;
 }
 
-.negotiation-breadcrumb button.active {
+.negotiation-breadcrumb button.active, .negotiation-breadcrumb a.active {
   color: #14223a;
 }
 
@@ -15192,7 +15192,7 @@ svg {
   margin: 2px 0 8px;
 }
 
-.messages-page .messages-breadcrumb button {
+.messages-page .messages-breadcrumb button, .messages-page .messages-breadcrumb a {
   background: transparent;
   border: 0;
   color: #718094;
@@ -15201,7 +15201,7 @@ svg {
   padding: 0;
 }
 
-.messages-page .messages-breadcrumb button.active {
+.messages-page .messages-breadcrumb button.active, .messages-page .messages-breadcrumb a.active {
   color: #14223a;
 }
 
@@ -24390,7 +24390,7 @@ svg {
   gap: 6px;
 }
 
-.comparison-breadcrumb button {
+.comparison-breadcrumb button, .comparison-breadcrumb a {
   background: transparent;
   border: 0;
   color: inherit;
@@ -24398,7 +24398,7 @@ svg {
   padding: 0;
 }
 
-.comparison-breadcrumb button.active {
+.comparison-breadcrumb button.active, .comparison-breadcrumb a.active {
   color: #152640;
 }
 
@@ -26776,3 +26776,16 @@ svg {
 
 /* Routing: pozycje menu admina to teraz <a> (NavLink) */
 .admin-nav a { color: inherit; cursor: pointer; text-decoration: none; }
+
+/* Routing: okruszki nawigacyjne to teraz <Link> */
+.breadcrumb a,
+.district-breadcrumb a,
+.negotiation-breadcrumb a,
+.comparison-breadcrumb a,
+.messages-breadcrumb a,
+.valuation-breadcrumb a,
+.history-breadcrumb a,
+.credit-breadcrumb a { color: inherit; cursor: pointer; text-decoration: none; }
+
+/* Routing: naglowkowe CTA jako <Link> - zachowanie wygladu przyciskow */
+.post-button { align-content: center; text-decoration: none; }

From e1ab61ec7ced5ea30e64c5e36f28e4f4f965c293 Mon Sep 17 00:00:00 2001
From: pascal <zatorskipascal@gmail.com>
Date: Thu, 23 Jul 2026 23:58:22 +0200
Subject: [PATCH 09/10] Standard routingu w AGENTS.md i usuniecie atrap
 href="#"

- AGENTS.md: obowiazkowy standard architektoniczny - kazdy widok ma wlasny
  URL w React Routerze, zakaz nawigacji na useState/setView/activeView,
  identyfikatory w parametrach URL, filtry w query string, ProtectedRoute
- 7 z 9 atrap href="#" zamienionych na <Link> do istniejacych tras
- pozostaly 2 w ServicesPage ("Zobacz firmy", "Zobacz wszystkie") - brak
  docelowej strony listy firm, wymagaja decyzji produktowej

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 AGENTS.md            | 25 +++++++++++++++++++++++++
 frontend/src/App.tsx | 14 +++++++-------
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index dae2a0d..299611b 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -44,6 +44,31 @@ Pull requests should include a short summary, testing performed, linked issues w
 
 Do not commit secrets, local credentials, generated build output, or machine-specific configuration. Store required environment variables in an ignored `.env` file and document safe example values in `.env.example`.
 
+## Standard architektoniczny: routing (obowiązkowy)
+
+Każdy nowy widok, ekran, zakładka lub podstrona **musi mieć własny, jednoznaczny adres URL** i być obsługiwana przez React Router. To twardy standard całego projektu, nie sugestia.
+
+Zasady:
+
+- **Nie buduj nawigacji na stanie.** Zakazane jako mechanizm przełączania stron: `useState('view')`, `setView`, `activeView`, `selectedPage`, `selectedTab` i pochodne.
+- **Nie przełączaj całych stron warunkowym renderowaniem** bez zmiany adresu (`{view === 'x' && <Page />}`).
+- **Do nawigacji używaj** `Link`, `NavLink`, `useNavigate` oraz tras zadeklarowanych w `Routes`.
+- **Identyfikatory obiektów trzymaj w parametrach URL**: `/oferta/:id`, `/profil/:id`, `/wiadomosci/:conversationId` — nie w stanie Reacta.
+- **Filtry, sortowanie, wyszukiwanie i paginację zapisuj w query string** wszędzie tam, gdzie użytkownik powinien móc skopiować lub odświeżyć widok.
+- **Zakładki paneli twórz jako trasy zagnieżdżone**: `/konto/ustawienia`, `/admin/uzytkownicy`.
+- **Trasy wymagające logowania zabezpieczaj `ProtectedRoute`** (`frontend/src/ProtectedRoute.tsx`). Pamiętaj, że to zabezpieczenie interfejsu — autoryzację egzekwuje backend.
+- **Nie używaj `href="#"`** ani przycisków imitujących linki.
+- **Każdy link musi działać** po odświeżeniu (F5), przy bezpośrednim wejściu z adresu, po użyciu Wstecz/Dalej i po otwarciu w nowej karcie.
+
+Gdzie co leży:
+
+- `frontend/src/routes.ts` — centralna mapa adresów (`ROUTES`) i helpery (`listingPath`, `mapPath`, `adminTabPath`). Nowy widok zaczynaj od wpisu tutaj, nie od literału ścieżki w JSX.
+- `frontend/src/ProtectedRoute.tsx` — bramka autoryzacji, obsługuje stan `loading` z `AuthProvider`.
+- `frontend/src/App.tsx` — deklaracja `<Routes>`.
+- `nginx/default.conf` — `try_files $uri $uri/ /index.html` (SPA fallback, już skonfigurowany).
+
+Przed zakończeniem każdego zadania sprawdź, czy dodane widoki mają trasy i czy adres zmienia się podczas nawigacji. Jeżeli istniejący kod łamie ten standard, nie powielaj starego rozwiązania — dostosuj go do React Routera.
+
 ## Behavioral Guidelines To Reduce Common LLM Coding Mistakes
 
 Tradeoff: These guidelines bias toward caution over speed. For trivial tasks, use judgment.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3503dd8..86d9d35 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -10987,7 +10987,7 @@ function HomePage({ filters, onOpenMap }: { filters: FilterState; onOpenMap: (ci
             <section className="offers" aria-label="Polecane ogłoszenia">
               <div className="section-head">
                 <h2>Polecane ogłoszenia</h2>
-                <a href="#">Zobacz wszystkie <Icon name="arrow" /></a>
+                <Link to={ROUTES.buy}>Zobacz wszystkie <Icon name="arrow" /></Link>
               </div>
 
               <div className="listing-loop">
@@ -13239,10 +13239,10 @@ function GuidesPage() {
             </div>
             <div className="popular-links">
               <span>Popularne:</span>
-              <a href="#">Kredyt hipoteczny</a>
-              <a href="#">Umowa najmu</a>
-              <a href="#">Podatek od sprzedaży</a>
-              <a href="#">Księga wieczysta</a>
+              <Link to={ROUTES.creditCalculator}>Kredyt hipoteczny</Link>
+              <Link to={ROUTES.rent}>Umowa najmu</Link>
+              <Link to={ROUTES.sell}>Podatek od sprzedaży</Link>
+              <Link to={ROUTES.guideBuying}>Księga wieczysta</Link>
             </div>
           </div>
         </div>
@@ -13294,7 +13294,7 @@ function GuidesPage() {
           <section className="guides-section">
             <div className="section-head">
               <h2>Polecane artykuły</h2>
-              <a href="#">Zobacz wszystkie <Icon name="arrow" /></a>
+              <Link to={ROUTES.guideBuying}>Zobacz wszystkie <Icon name="arrow" /></Link>
             </div>
             <div className="article-grid">
               {guideArticles.map((article) => (
@@ -13327,7 +13327,7 @@ function GuidesPage() {
                   <div>
                     <h3>{offer.title}</h3>
                     <span>{offer.count}</span>
-                    <a href="#">Zobacz oferty <Icon name="arrow" /></a>
+                    <Link to={ROUTES.buy}>Zobacz oferty <Icon name="arrow" /></Link>
                   </div>
                   <div
                     className="related-offer-image"

From 3e394998a31d8445f518ab4e69e08f4f2c1d6d66 Mon Sep 17 00:00:00 2001
From: pascal <zatorskipascal@gmail.com>
Date: Fri, 24 Jul 2026 00:37:04 +0200
Subject: [PATCH 10/10] Strona /firmy, CTA jako linki i testy Playwright
 routingu

Nowa trasa:
- /firmy - lista firm i uslug na istniejacych komponentach (.directory-card)
  i stylistyce sekcji uslug; filtr kategorii w query stringu (/firmy?kategoria=remonty)
- serviceCategories dostaly slug, nowa baza companyDirectory pokrywa wszystkie
  8 kategorii, wiec filtrowanie dziala na realnych danych
- "Zobacz firmy" prowadzi do listy z wybrana kategoria, "Zobacz wszystkie"
  do pelnej listy - ostatnie dwie atrapy href="#" usuniete

CTA zamienione na <Link> (wylacznie czysta nawigacja, bez akcji):
- 35 przyciskow onClick={() => navigate(x)} zamienionych automatycznie
- 5 skrotow panelu admina (setTab) -> Link do /admin/*
- karty narzedzi konta i kafelek poradnika: zamiast role="button" prawdziwy link
- pozycje menu konta i popovera powiadomien -> Link + zamkniecie popovera
- karty ofert: link rozciagniety na cala karte (.card-stretched-link) zamiast
  role="button", bez zagniezdzania przyciskow w <a>
- bez zmian zostaly przyciski wykonujace akcje: publikacja, zapis draftu,
  wyszukiwanie, oznaczanie powiadomien, bramki logowania

Wyglad 1:1 - rozszerzone selektory kontenerow o warianty <a>, reset :where(a)
o zerowej specyficznosci oraz odtworzenie centrowania tam, gdzie <button>
robil to domyslnie. Zweryfikowane zrzutami ekranu i pomiarem geometrii.

Naprawa: kazdy blad /auth/me (takze chwilowy timeout albo 5xx) kasowal token
i wylogowywal uzytkownika. Teraz sesje konczy tylko odrzucenie tokenu (401/403),
pozostale bledy sa ponawiane raz.

Testy: frontend/tests/routing.spec.ts (41 testow) + playwright.config.ts,
skrypt npm run test:e2e. E2E_BASE_URL pozwala uruchomic je na buildzie
produkcyjnym za nginx.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .gitignore                     |   2 +
 frontend/package-lock.json     |  64 ++++++
 frontend/package.json          |   4 +-
 frontend/playwright.config.ts  |  29 +++
 frontend/src/App.tsx           | 374 ++++++++++++++++++++++-----------
 frontend/src/auth.tsx          |  33 ++-
 frontend/src/routes.ts         |   7 +
 frontend/src/styles.css        | 182 ++++++++++++++--
 frontend/tests/routing.spec.ts | 249 ++++++++++++++++++++++
 9 files changed, 796 insertions(+), 148 deletions(-)
 create mode 100644 frontend/playwright.config.ts
 create mode 100644 frontend/tests/routing.spec.ts

diff --git a/.gitignore b/.gitignore
index c3c1758..a3f02be 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,8 @@ backend/target/
 frontend/node_modules/
 frontend/dist/
 frontend/.vite/
+frontend/test-results/
+frontend/playwright-report/
 
 # IDE
 .idea/
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6c7e162..1553223 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,6 +15,7 @@
         "react-router-dom": "^7.18.1"
       },
       "devDependencies": {
+        "@playwright/test": "^1.61.1",
         "@types/react": "18.3.12",
         "@types/react-dom": "18.3.1",
         "@vitejs/plugin-react": "6.0.2",
@@ -109,6 +110,22 @@
         "url": "https://github.com/sponsors/Boshen"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@rolldown/binding-android-arm64": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.3.tgz",
@@ -991,6 +1008,53 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/png-js": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/png-js/-/png-js-1.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d3d753e..061f929 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite --host 0.0.0.0",
     "build": "tsc && vite build",
-    "preview": "vite preview --host 0.0.0.0"
+    "preview": "vite preview --host 0.0.0.0",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@types/pdfmake": "^0.3.3",
@@ -16,6 +17,7 @@
     "react-router-dom": "^7.18.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.61.1",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "6.0.2",
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
new file mode 100644
index 0000000..51eac2e
--- /dev/null
+++ b/frontend/playwright.config.ts
@@ -0,0 +1,29 @@
+import { defineConfig } from '@playwright/test';
+
+// Testy routingu uruchamiamy na systemowym Chrome (bez pobierania przegladarek Playwright).
+// Domyslnie startujemy wlasny dev server; ustaw E2E_BASE_URL, zeby przetestowac
+// build produkcyjny za nginx, np. E2E_BASE_URL=http://localhost npm run test:e2e
+const baseURL = process.env.E2E_BASE_URL ?? 'http://localhost:5173';
+
+export default defineConfig({
+  testDir: './tests',
+  timeout: 60_000,
+  expect: { timeout: 15_000 },
+  fullyParallel: false,
+  workers: 1,
+  reporter: [['list']],
+  use: {
+    baseURL,
+    channel: 'chrome',
+    viewport: { width: 1680, height: 1050 },
+    actionTimeout: 15_000,
+  },
+  webServer: process.env.E2E_BASE_URL
+    ? undefined
+    : {
+        command: 'npm run dev',
+        url: 'http://localhost:5173',
+        reuseExistingServer: true,
+        timeout: 120_000,
+      },
+});
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 86d9d35..1d1bb6f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,7 +1,7 @@
 import { Fragment, type ChangeEvent as ReactChangeEvent, type ClipboardEvent as ReactClipboardEvent, type Dispatch, type DragEvent as ReactDragEvent, type FormEvent as ReactFormEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, type SetStateAction, type WheelEvent as ReactWheelEvent, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import './styles.css';
 import { Link, NavLink, Route, Routes, useLocation, useNavigate, useNavigationType, useParams, useSearchParams } from 'react-router-dom';
-import { ROUTES, listingPath, mapPath, negotiationPath, adminTabPath, ADMIN_PATH_TO_TAB, type AdminTabKey } from './routes';
+import { ROUTES, listingPath, mapPath, negotiationPath, companiesPath, adminTabPath, ADMIN_PATH_TO_TAB, type AdminTabKey } from './routes';
 import { ProtectedRoute } from './ProtectedRoute';
 import { apiFetch, useAuth } from './auth';
 import type { AuthUser, ContactPreference, PreferredLanguage } from './auth';
@@ -1510,49 +1510,60 @@ const rentListings: RentOffer[] = [
   },
 ];
 
+// slug trafia do adresu listy firm: /firmy?kategoria=remonty
 const serviceCategories = [
   {
+    slug: 'finanse',
     icon: 'credit-card',
     title: 'Finanse',
     text: 'Kredyty hipoteczne, doradcy, ubezpieczenia',
   },
   {
+    slug: 'prawo',
     icon: 'scale',
     title: 'Prawo i dokumenty',
     text: 'Notariusze, prawnicy, rzeczoznawcy',
   },
   {
+    slug: 'remonty',
     icon: 'paint',
     title: 'Remont i wykończenie',
     text: 'Firmy remontowe, fachowcy, projekty wnętrz',
   },
   {
+    slug: 'przeprowadzka',
     icon: 'truck',
     title: 'Przeprowadzka',
     text: 'Firmy przeprowadzkowe, magazyny, transport',
   },
   {
+    slug: 'wyposazenie',
     icon: 'sofa',
     title: 'Wyposażenie wnętrz',
     text: 'Meble, AGD, kuchnie na wymiar, oświetlenie',
   },
   {
+    slug: 'sprzedaz',
     icon: 'camera',
     title: 'Sprzedaż nieruchomości',
     text: 'Fotografia, home staging, wirtualne spacery 3D',
   },
   {
+    slug: 'deweloperzy',
     icon: 'city',
     title: 'Deweloperzy i inwestycje',
     text: 'Nowe inwestycje, deweloperzy, biura sprzedaży',
   },
   {
+    slug: 'inne',
     icon: 'dots',
     title: 'Inne usługi',
     text: 'Usługi dodatkowe związane z nieruchomościami',
   },
 ];
 
+type ServiceCategorySlug = (typeof serviceCategories)[number]['slug'];
+
 const serviceCompanies = [
   {
     icon: 'house',
@@ -1611,6 +1622,36 @@ const serviceDirectory = [
   },
 ];
 
+// Pelna baza firm dla listy /firmy. Kazda pozycja ma kategorie, wiec filtrowanie
+// po ?kategoria= dziala na realnych danych, a nie tylko podswietla zakladke.
+const companyDirectory: Array<{
+  title: string;
+  category: ServiceCategorySlug;
+  rating: string;
+  text: string;
+  city: string;
+  image: string;
+  position: string;
+}> = [
+  { title: 'Finanse Expert', category: 'finanse', rating: '4.9 (128 opinii)', text: 'Kredyty hipoteczne i doradztwo finansowe', city: 'Warszawa, cała Polska', image: cityImage, position: '50% 40%' },
+  { title: 'Kredyt Partner', category: 'finanse', rating: '4.6 (57 opinii)', text: 'Porównanie ofert kredytowych, ubezpieczenia', city: 'Gdańsk, pomorskie', image: heroImage, position: '30% 55%' },
+  { title: 'Notariusz Nowak', category: 'prawo', rating: '4.9 (74 opinie)', text: 'Kancelaria notarialna, akty i umowy', city: 'Wrocław, dolnośląskie', image: heroImage, position: '62% 45%' },
+  { title: 'Lex Nieruchomości', category: 'prawo', rating: '4.7 (41 opinii)', text: 'Obsługa prawna transakcji, księgi wieczyste', city: 'Warszawa, mazowieckie', image: cityImage, position: '70% 60%' },
+  { title: 'Remont Masters', category: 'remonty', rating: '4.8 (96 opinii)', text: 'Kompleksowe remonty mieszkań i domów', city: 'Kraków, małopolskie', image: heroImage, position: '72% 62%' },
+  { title: 'Perfect House', category: 'remonty', rating: '4.7 (64 opinie)', text: 'Wykończenia wnętrz pod klucz', city: 'Warszawa, mazowieckie', image: heroImage, position: '92% 50%' },
+  { title: 'Home Finish', category: 'remonty', rating: '4.6 (52 opinie)', text: 'Remonty, wykończenia, projekty wnętrz', city: 'Wrocław, dolnośląskie', image: heroImage, position: '48% 58%' },
+  { title: 'SuperPrzeprowadzki', category: 'przeprowadzka', rating: '4.7 (111 opinii)', text: 'Przeprowadzki lokalne i krajowe', city: 'Poznań, wielkopolskie', image: cityImage, position: '40% 50%' },
+  { title: 'Transport 24', category: 'przeprowadzka', rating: '4.5 (38 opinii)', text: 'Transport mebli, magazynowanie, pakowanie', city: 'Łódź, łódzkie', image: heroImage, position: '20% 70%' },
+  { title: 'Kuchnie na Wymiar', category: 'wyposazenie', rating: '4.8 (83 opinie)', text: 'Meble kuchenne i zabudowy na wymiar', city: 'Katowice, śląskie', image: heroImage, position: '85% 40%' },
+  { title: 'Salon Oświetlenia Lumo', category: 'wyposazenie', rating: '4.4 (29 opinii)', text: 'Oświetlenie, AGD, wyposażenie wnętrz', city: 'Szczecin, zachodniopomorskie', image: cityImage, position: '60% 35%' },
+  { title: 'FotoNieruchomości', category: 'sprzedaz', rating: '4.9 (67 opinii)', text: 'Fotografia ofert, home staging, spacery 3D', city: 'Warszawa, cała Polska', image: cityImage, position: '35% 65%' },
+  { title: 'Studio Wirtualnych Spacerów', category: 'sprzedaz', rating: '4.7 (45 opinii)', text: 'Wirtualne spacery 3D i plany mieszkań', city: 'Kraków, małopolskie', image: heroImage, position: '55% 48%' },
+  { title: 'Nowa Inwestycja Development', category: 'deweloperzy', rating: '4.6 (58 opinii)', text: 'Nowe inwestycje mieszkaniowe, biuro sprzedaży', city: 'Gdynia, pomorskie', image: cityImage, position: '80% 55%' },
+  { title: 'Osiedle Park Deweloper', category: 'deweloperzy', rating: '4.5 (34 opinie)', text: 'Mieszkania z rynku pierwotnego', city: 'Wrocław, dolnośląskie', image: heroImage, position: '45% 42%' },
+  { title: 'Serwis Domowy Fix', category: 'inne', rating: '4.6 (72 opinie)', text: 'Drobne naprawy, złota rączka, przeglądy', city: 'Cała Polska', image: heroImage, position: '68% 68%' },
+  { title: 'Czysto i Gotowe', category: 'inne', rating: '4.8 (91 opinii)', text: 'Sprzątanie po remoncie i przed wprowadzeniem', city: 'Warszawa, mazowieckie', image: cityImage, position: '25% 45%' },
+];
+
 const serviceSteps = [
   {
     icon: 'group',
@@ -3431,6 +3472,7 @@ function App() {
           <Route path={ROUTES.districtRanking} element={<DistrictRankingPage />} />
           <Route path={ROUTES.negotiation} element={<NegotiationRoute />} />
           <Route path={ROUTES.services} element={<ServicesPage />} />
+          <Route path={ROUTES.companies} element={<CompaniesPage />} />
           <Route path={ROUTES.guides} element={<GuidesPage />} />
           <Route path={ROUTES.guideBuying} element={<GuideBuyingPage />} />
 
@@ -3853,16 +3895,12 @@ function AdminMessageModal({ user, onClose }: { user: AuthUser; onClose: () => v
 }
 
 function AdminPage() {
-  const navigate = useNavigate();
   const { user } = useAuth();
   // Aktywna zakladka wynika z adresu (/admin/leady), nie ze stanu komponentu -
   // dzieki temu kazda sekcja panelu ma wlasny URL, dziala F5 i przycisk Wstecz.
   const adminSegment = useParams()['*'] ?? '';
   const tab: AdminTab = ADMIN_PATH_TO_TAB[adminSegment] ?? 'dashboard';
   const isUnknownAdminSection = adminSegment !== '' && !(adminSegment in ADMIN_PATH_TO_TAB);
-  const setTab = useCallback((next: AdminTab) => {
-    navigate(adminTabPath(next));
-  }, [navigate]);
   const [users, setUsers] = useState<AuthUser[]>([]);
   const [listings, setListings] = useState<AdminListing[]>([]);
   const [reports, setReports] = useState<AdminListingReport[]>([]);
@@ -4248,9 +4286,9 @@ function AdminPage() {
             <button type="button" onClick={loadData}>Odśwież status <Icon name="arrow" /></button>
           </div>
 
-          <button type="button" className="admin-back" onClick={() => navigate(ROUTES.home)}>
+          <Link className="admin-back" to={ROUTES.home}>
             <Icon name="arrow" /> Wróć do strony głównej
-          </button>
+          </Link>
         </aside>
 
         <div className="admin-main">
@@ -4311,7 +4349,7 @@ function AdminPage() {
                 <section className="admin-card admin-recent-listings">
                   <div className="admin-card-head">
                     <h2>Ostatnie ogłoszenia</h2>
-                    <button type="button" onClick={() => setTab('listings')}>Zobacz wszystkie <Icon name="arrow" /></button>
+                    <Link to={adminTabPath('listings')}>Zobacz wszystkie <Icon name="arrow" /></Link>
                   </div>
                   {recentListings.length === 0 ? (
                     <p className="admin-empty">Brak ogłoszeń do wyświetlenia.</p>
@@ -4341,7 +4379,7 @@ function AdminPage() {
                 <section className="admin-card admin-recent-users">
                   <div className="admin-card-head">
                     <h2>Aktywność użytkowników</h2>
-                    <button type="button" onClick={() => setTab('users')}>Zobacz wszystkich <Icon name="arrow" /></button>
+                    <Link to={adminTabPath('users')}>Zobacz wszystkich <Icon name="arrow" /></Link>
                   </div>
                   {recentUsers.length === 0 ? (
                     <p className="admin-empty">Brak użytkowników do wyświetlenia.</p>
@@ -4367,10 +4405,10 @@ function AdminPage() {
                   <h2>Szybkie akcje</h2>
                 </div>
                 <div className="admin-quick-actions-grid">
-                  <button type="button" onClick={() => navigate(ROUTES.add)}><Icon name="document" /> Dodaj nowe ogłoszenie <Icon name="arrow" /></button>
-                  <button type="button" onClick={() => setTab('categories')}><Icon name="list" /> Zarządzaj kategoriami <Icon name="arrow" /></button>
-                  <button type="button" onClick={() => setTab('locations')}><Icon name="pin" /> Zarządzaj lokalizacjami <Icon name="arrow" /></button>
-                  <button type="button" onClick={() => setTab('promotions')}><Icon name="spark" /> Zarządzaj banerami <Icon name="arrow" /></button>
+                  <Link to={ROUTES.add}><Icon name="document" /> Dodaj nowe ogłoszenie <Icon name="arrow" /></Link>
+                  <Link to={adminTabPath('categories')}><Icon name="list" /> Zarządzaj kategoriami <Icon name="arrow" /></Link>
+                  <Link to={adminTabPath('locations')}><Icon name="pin" /> Zarządzaj lokalizacjami <Icon name="arrow" /></Link>
+                  <Link to={adminTabPath('promotions')}><Icon name="spark" /> Zarządzaj banerami <Icon name="arrow" /></Link>
                 </div>
               </section>
             </div>
@@ -5414,7 +5452,7 @@ function NegotiationPage({
                 <p>Nasi eksperci pomogą Ci przejść przez proces zakupu i wynegocjować najlepszą cenę.</p>
               </div>
               <div className="negotiation-cta-action">
-                <button type="button" onClick={() => navigate(ROUTES.services)}>Skontaktuj się z ekspertem</button>
+                <Link to={ROUTES.services}>Skontaktuj się z ekspertem</Link>
                 <small>Pierwsza konsultacja gratis</small>
               </div>
             </section>
@@ -5825,7 +5863,7 @@ function AccountDashboardPage({
       <section className="account-panel" key="searches">
         <div className="account-panel-head">
           <h2>Moje wyszukiwania</h2>
-          <button type="button" onClick={() => navigate(ROUTES.accountSearches)}>Zobacz wszystkie <Icon name="arrow" /></button>
+          <Link to={ROUTES.accountSearches}>Zobacz wszystkie <Icon name="arrow" /></Link>
         </div>
         <div className="account-searches">
           {savedSearches.slice(0, 4).map((row) => (
@@ -5852,7 +5890,7 @@ function AccountDashboardPage({
             </article>
           ))}
           {savedSearches.length === 0 && <p className="account-searches-empty">Nie masz jeszcze zapisanych wyszukiwań. Wejdź w Kup lub Wynajem i kliknij dzwonek „Zapisz wyszukiwanie”.</p>}
-          <button type="button" className="account-new-search" onClick={() => navigate(ROUTES.buy)}>Utwórz nowe wyszukiwanie <Icon name="plus" /></button>
+          <Link className="account-new-search" to={ROUTES.buy}>Utwórz nowe wyszukiwanie <Icon name="plus" /></Link>
         </div>
       </section>
     ),
@@ -5863,24 +5901,14 @@ function AccountDashboardPage({
         </div>
         <div className="account-tools">
           {tools.map((tool) => (
-            <article
-              key={tool.title}
-              role="button"
-              tabIndex={0}
-              onClick={() => navigate(tool.path)}
-              onKeyDown={(event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                  event.preventDefault();
-                  navigate(tool.path);
-                }
-              }}
-            >
+            // Kafelek prowadzi na inna strone, wiec jest linkiem - bez protezy role="button".
+            <Link key={tool.title} to={tool.path}>
               <span><Icon name={tool.icon} /></span>
               <div>
                 <strong>{tool.title}</strong>
                 <small>{tool.text}</small>
               </div>
-            </article>
+            </Link>
           ))}
         </div>
         <button type="button" className="account-tools-more">Zobacz wszystkie narzędzia <Icon name="arrow" /></button>
@@ -6103,7 +6131,7 @@ function AccountSavedSearchesPage({
                 <h1>Zapisane wyszukiwania</h1>
                 <p>Wróć do swoich filtrów jednym kliknięciem i przejdź od razu do odpowiedniej listy ofert.</p>
               </div>
-              <button type="button" onClick={() => navigate(ROUTES.buy)}>Dodaj nowe <Icon name="plus" /></button>
+              <Link to={ROUTES.buy}>Dodaj nowe <Icon name="plus" /></Link>
             </div>
 
             <div className="account-searches-stats" aria-label="Statystyki zapisanych wyszukiwań">
@@ -6199,9 +6227,9 @@ function AccountSavedSearchesPage({
               <div className="account-searches-empty-state">
                 <strong>Nie masz jeszcze zapisanych wyszukiwań</strong>
                 <p>Ustaw filtry w Kup lub Wynajem i kliknij dzwonek „Zapisz wyszukiwanie”, a pojawią się tutaj.</p>
-                <button type="button" className="account-empty-add-button" onClick={() => navigate(ROUTES.buy)}>
+                <Link className="account-empty-add-button" to={ROUTES.buy}>
                   <Icon name="search" /> Przejdź do wyszukiwania
-                </button>
+                </Link>
               </div>
             )}
 
@@ -6834,7 +6862,7 @@ function AccountPriceAlertsPage({
                   </div>
                 )}
               </div>
-              <button type="button" className="price-alerts-link" onClick={() => navigate(ROUTES.priceHistory)}>Dodaj kolejne lokalizacje</button>
+              <Link className="price-alerts-link" to={ROUTES.priceHistory}>Dodaj kolejne lokalizacje</Link>
             </article>
 
             <article className="price-alerts-card price-alerts-active-list">
@@ -6851,16 +6879,16 @@ function AccountPriceAlertsPage({
                     <span>Usuń</span>
                   </button>
                 )) : (
-                  <button type="button" onClick={() => navigate(ROUTES.priceHistory)}>
+                  <Link to={ROUTES.priceHistory}>
                     <div>
                       <strong>Brak aktywnych alertów</strong>
                       <small>Przejdź do historii cen i dodaj pierwszą lokalizację.</small>
                     </div>
                     <span>Dodaj</span>
-                  </button>
+                  </Link>
                 )}
               </div>
-              <button type="button" className="price-alerts-manage" onClick={() => navigate(ROUTES.priceHistory)}>Zarządzaj alertami</button>
+              <Link className="price-alerts-manage" to={ROUTES.priceHistory}>Zarządzaj alertami</Link>
             </article>
           </section>
         </div>
@@ -8913,7 +8941,7 @@ function AccountSettingsPage() {
               <strong>{getDisplayName(user)}</strong>
               <small>Konto Premium</small>
             </div>
-            <button type="button" onClick={() => navigate(ROUTES.accountProfileEdit)}>Edytuj</button>
+            <Link to={ROUTES.accountProfileEdit}>Edytuj</Link>
           </div>
           <div className="settings-list">
             <article><span><Icon name="mail" /></span><em>Adres e-mail</em><strong>{user?.email}</strong><Icon name="chevron" /></article>
@@ -9851,7 +9879,7 @@ function AccountProfileEditPage() {
                   </article>
                   {coverPhotoName && (
                     <div className="cover-photo-actions-row">
-                      <button type="button" className="cover-preview-button" onClick={() => navigate(ROUTES.accountPublicProfile)}>Podgląd profilu</button>
+                      <Link className="cover-preview-button" to={ROUTES.accountPublicProfile}>Podgląd profilu</Link>
                       <button type="button" className="cover-remove-button" onClick={clearCoverPhoto}>Usuń zdjęcie</button>
                     </div>
                   )}
@@ -9905,9 +9933,9 @@ function AccountProfileEditPage() {
                       {profileVisibility === 'publiczna' && 'Zobacz jak inni widzą Twój profil.'}
                       {profileVisibility === 'kontakty' && 'Profil widzą tylko zaakceptowane kontakty.'}
                     </strong>
-                    <button type="button" className="mini-tag profile-preview-cta" onClick={() => navigate(ROUTES.accountPublicProfile)}>
+                    <Link className="mini-tag profile-preview-cta" to={ROUTES.accountPublicProfile}>
                       Zobacz profil <Icon name="arrow" />
-                    </button>
+                    </Link>
                   </article>
                 </div>
               </section>
@@ -10191,7 +10219,7 @@ function AccountPublicProfilePage() {
               <h1>Jak inni widzą Twój profil</h1>
               <p>Zobacz, jak Twój profil prezentuje się publicznie dla innych użytkowników Mieszko.</p>
             </div>
-            <button type="button" onClick={() => navigate(ROUTES.accountProfileEdit)}><Icon name="gear" /> Edytuj profil</button>
+            <Link to={ROUTES.accountProfileEdit}><Icon name="gear" /> Edytuj profil</Link>
           </header>
 
           <section className="public-profile-cover-card">
@@ -10955,10 +10983,10 @@ function HomePage({ filters, onOpenMap }: { filters: FilterState; onOpenMap: (ci
 
       <section className="search-wrap" aria-label="Wyszukiwarka">
         <div className="search-tabs">
-          <button className="active" onClick={() => navigate(ROUTES.buy)}>
+          <Link className="active" to={ROUTES.buy}>
             Kup
-          </button>
-          <button onClick={() => navigate(ROUTES.rent)}>Wynajem</button>
+          </Link>
+          <Link to={ROUTES.rent}>Wynajem</Link>
         </div>
 
         <div className="search-panel search-panel-mega">
@@ -10979,7 +11007,7 @@ function HomePage({ filters, onOpenMap }: { filters: FilterState; onOpenMap: (ci
                     <h2>{card.title}</h2>
                     <p>{card.text}</p>
                   </div>
-                  <button type="button" onClick={() => navigate(card.path)}>{card.action}</button>
+                  <Link to={card.path}>{card.action}</Link>
                 </article>
               ))}
             </div>
@@ -12372,13 +12400,13 @@ function AddListingPage() {
                         znajdziesz je w „Moich ogłoszeniach” ze statusem „Oczekuje”.
                       </p>
                       <div className="publish-success-actions">
-                        <button className="next-step-button" type="button" onClick={() => navigate(ROUTES.accountListings)}>
+                        <Link className="next-step-button" to={ROUTES.accountListings}>
                           Przejdź do moich ogłoszeń
                           <Icon name="arrow" />
-                        </button>
-                        <button className="back-step-button" type="button" onClick={() => navigate(ROUTES.home)}>
+                        </Link>
+                        <Link className="back-step-button" to={ROUTES.home}>
                           Wróć do strony głównej
-                        </button>
+                        </Link>
                       </div>
                     </div>
                   ) : (
@@ -12728,10 +12756,10 @@ function GuideBuyingPage() {
         <img src={heroImage} alt="" />
         <div className="guide-hero-shade" />
         <div className="guides-container guide-hero-inner">
-          <button className="guide-back" onClick={() => navigate(ROUTES.guides)}>
+          <Link className="guide-back" to={ROUTES.guides}>
             <Icon name="arrow" />
             <span>Wróć do poradników</span>
-          </button>
+          </Link>
           <span className="guide-hero-badge">
             <Icon name="house" />
             Kupno mieszkania
@@ -13163,10 +13191,10 @@ function GuideBuyingPage() {
               <h2>Gotowy, by znaleźć swoje mieszkanie?</h2>
               <p>Przeglądaj aktualne oferty dopasowane do Twoich potrzeb i budżetu.</p>
             </div>
-            <button onClick={() => navigate(ROUTES.buy)}>
+            <Link to={ROUTES.buy}>
               Zobacz oferty mieszkań
               <Icon name="arrow" />
-            </button>
+            </Link>
           </section>
         </div>
 
@@ -13174,22 +13202,22 @@ function GuideBuyingPage() {
           <section className="guide-aside-card">
             <h3><Icon name="calculator" /> Kalkulatory</h3>
             <div className="guide-aside-list">
-              <button onClick={() => navigate(ROUTES.creditCalculator)}>
+              <Link to={ROUTES.creditCalculator}>
                 <span><strong>Kalkulator zdolności kredytowej</strong><small>Sprawdź, na jaki kredyt Cię stać</small></span>
                 <Icon name="chevron" />
-              </button>
-              <button onClick={() => navigate(ROUTES.valuation)}>
+              </Link>
+              <Link to={ROUTES.valuation}>
                 <span><strong>Kalkulator wyceny mieszkania</strong><small>Oszacuj wartość nieruchomości</small></span>
                 <Icon name="chevron" />
-              </button>
-              <button onClick={() => navigate(ROUTES.priceHistory)}>
+              </Link>
+              <Link to={ROUTES.priceHistory}>
                 <span><strong>Historia cen</strong><small>Zobacz, jak zmieniały się ceny</small></span>
                 <Icon name="chevron" />
-              </button>
-              <button onClick={() => navigate(ROUTES.districtRanking)}>
+              </Link>
+              <Link to={ROUTES.districtRanking}>
                 <span><strong>Ranking dzielnic</strong><small>Porównaj lokalizacje</small></span>
                 <Icon name="chevron" />
-              </button>
+              </Link>
             </div>
           </section>
 
@@ -13261,30 +13289,25 @@ function GuidesPage() {
             <div className="guide-topic-grid">
               {guideTopics.map((topic) => {
                 const isBuying = topic.title === 'Kupno mieszkania';
-                return (
-                  <article
-                    className={`guide-topic-card${isBuying ? ' is-clickable' : ''}`}
-                    key={topic.title}
-                    role={isBuying ? 'button' : undefined}
-                    tabIndex={isBuying ? 0 : undefined}
-                    onClick={isBuying ? () => navigate(ROUTES.guideBuying) : undefined}
-                    onKeyDown={
-                      isBuying
-                        ? (event) => {
-                            if (event.key === 'Enter' || event.key === ' ') {
-                              event.preventDefault();
-                              navigate(ROUTES.guideBuying);
-                            }
-                          }
-                        : undefined
-                    }
-                  >
+                // Klikalny kafelek to link do poradnika; pozostale nie maja jeszcze tresci.
+                const content = (
+                  <>
                     <span className={`guide-topic-icon ${topic.icon}`}>
                       <Icon name={topic.icon} />
                     </span>
                     <h3>{topic.title}</h3>
                     <p>{topic.text}</p>
                     <small>{topic.count}</small>
+                  </>
+                );
+
+                return isBuying ? (
+                  <Link className="guide-topic-card is-clickable" key={topic.title} to={ROUTES.guideBuying}>
+                    {content}
+                  </Link>
+                ) : (
+                  <article className="guide-topic-card" key={topic.title}>
+                    {content}
                   </article>
                 );
               })}
@@ -13418,7 +13441,7 @@ function SellPage() {
               <span><Icon name="spark" /> Pełne wsparcie</span>
             </div>
 
-            <button className="sell-primary" onClick={() => navigate(ROUTES.add)}>Dodaj ogłoszenie za darmo</button>
+            <Link className="sell-primary" to={ROUTES.add}>Dodaj ogłoszenie za darmo</Link>
             <small>Zajmie Ci to tylko 2 minuty</small>
           </div>
         </div>
@@ -13462,7 +13485,7 @@ function SellPage() {
             <h2>Sprawdź wartość swojego mieszkania</h2>
             <p>Bezpłatna wycena online w 30 sekund</p>
             <div className="valuation-input">Podaj adres mieszkania</div>
-            <button onClick={() => navigate(ROUTES.valuation)}>Wyceń mieszkanie</button>
+            <Link to={ROUTES.valuation}>Wyceń mieszkanie</Link>
             <div className="valuation-result">
               <span>Przykładowa wycena</span>
               <small>Kraków, Zabłocie</small>
@@ -13545,7 +13568,7 @@ function SellPage() {
             <strong>Gotowy na szybką i bezpieczną sprzedaż?</strong>
             <span>Dołącz do tysięcy osób, które już sprzedały z nami swoje mieszkanie.</span>
           </div>
-          <button onClick={() => navigate(ROUTES.add)}>Dodaj ogłoszenie za darmo</button>
+          <Link to={ROUTES.add}>Dodaj ogłoszenie za darmo</Link>
           <small>Zajmie Ci to tylko 2 minuty</small>
         </section>
       </div>
@@ -15123,7 +15146,7 @@ function ValuationPage() {
                 <div className="valuation-result-actions">
                   <button type="button" className="valuation-back" onClick={() => setStep(2)}><Icon name="arrow" /> Wróć</button>
                   <button type="button" className="valuation-back" disabled={!valuation.ready} onClick={() => downloadValuationReportPdf(valuationForm, valuation, valuationConfidenceLabel)}><Icon name="document" /> Pobierz raport (PDF)</button>
-                  <button type="button" className="valuation-next" onClick={() => navigate(ROUTES.add)}>Rozpocznij sprzedaż <Icon name="arrow" /></button>
+                  <Link className="valuation-next" to={ROUTES.add}>Rozpocznij sprzedaż <Icon name="arrow" /></Link>
                 </div>
               </section>
             </div>
@@ -15454,6 +15477,121 @@ function ValuationPage() {
   );
 }
 
+// Lista firm i usług pod /firmy. Kategoria pochodzi z query stringa (?kategoria=remonty),
+// więc widok da się skopiować, odświeżyć i otworzyć w nowej karcie.
+function CompaniesPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const categoryParam = searchParams.get('kategoria');
+  const activeCategory = serviceCategories.find((item) => item.slug === categoryParam) ?? null;
+
+  const companies = activeCategory
+    ? companyDirectory.filter((company) => company.category === activeCategory.slug)
+    : companyDirectory;
+
+  // Zmiana filtra to zmiana adresu - replace, zeby nie zasmiecac historii przy przelaczaniu.
+  const selectCategory = (slug: string | null) => {
+    setSearchParams(slug ? { kategoria: slug } : {}, { replace: true });
+  };
+
+  return (
+    <section className="services-page companies-page" aria-label="Firmy i usługi">
+      <div className="services-frame companies-frame">
+        <div className="services-main">
+          <div className="breadcrumb">
+            <Link to={ROUTES.home}>Strona główna</Link>
+            <Icon name="chevron" />
+            <Link to={ROUTES.services}>Firmy i usługi</Link>
+            <Icon name="chevron" />
+            <strong>{activeCategory ? activeCategory.title : 'Wszystkie firmy'}</strong>
+          </div>
+
+          <section className="companies-head">
+            <h1>{activeCategory ? activeCategory.title : 'Wszystkie firmy i usługi'}</h1>
+            <p>
+              {activeCategory
+                ? activeCategory.text
+                : 'Sprawdzone firmy i specjaliści z całej Polski. Porównaj oferty, oceny i opinie klientów.'}
+            </p>
+            <span className="companies-count">
+              {companies.length === 1 ? '1 firma' : `${companies.length} firm`}
+              {activeCategory ? ` w kategorii „${activeCategory.title}”` : ' w bazie'}
+            </span>
+          </section>
+
+          <nav className="companies-filters" aria-label="Filtr kategorii">
+            <button
+              type="button"
+              className={activeCategory ? 'companies-chip' : 'companies-chip active'}
+              onClick={() => selectCategory(null)}
+            >
+              Wszystkie <span>{companyDirectory.length}</span>
+            </button>
+            {serviceCategories.map((category) => {
+              const count = companyDirectory.filter((company) => company.category === category.slug).length;
+              return (
+                <button
+                  key={category.slug}
+                  type="button"
+                  className={activeCategory?.slug === category.slug ? 'companies-chip active' : 'companies-chip'}
+                  onClick={() => selectCategory(category.slug)}
+                >
+                  <Icon name={category.icon} /> {category.title} <span>{count}</span>
+                </button>
+              );
+            })}
+          </nav>
+
+          <section className="services-section">
+            <div className="service-mini-search">
+              <SearchField icon="pin" label="Lokalizacja" value="Cała Polska" />
+              <SearchField icon="chevron" label="Usługa" value={activeCategory ? activeCategory.title : 'Wszystkie'} />
+              <SearchField icon="chevron" label="Sortuj według" value="Polecane" />
+              <button><Icon name="list" /> Filtry</button>
+            </div>
+
+            <div className="directory-list companies-list">
+              {companies.map((company) => (
+                <article className="directory-card" key={company.title}>
+                  <div
+                    className="directory-photo"
+                    style={{ backgroundImage: `url(${company.image})`, backgroundPosition: company.position }}
+                  />
+                  <div>
+                    <h3>{company.title}</h3>
+                    <p><Icon name="star" /> {company.rating}</p>
+                    <span>{company.text}</span>
+                    <small><Icon name="pin" /> {company.city}</small>
+                    <em><Icon name="check" /> Zweryfikowana firma</em>
+                  </div>
+                  <button>Zobacz profil</button>
+                  <Icon name="heart" />
+                </article>
+              ))}
+            </div>
+          </section>
+
+          <section className="services-section service-steps-section">
+            <h2>Jak to działa?</h2>
+            <div className="service-steps">
+              {serviceSteps.map((step) => (
+                <article className="service-step" key={step.title}>
+                  <span>
+                    <Icon name={step.icon} />
+                  </span>
+                  <div>
+                    <h3>{step.title}</h3>
+                    <p>{step.text}</p>
+                  </div>
+                </article>
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function ServicesPage() {
   return (
     <section className="services-page" aria-label="Firmy i usługi">
@@ -15491,7 +15629,7 @@ function ServicesPage() {
                   </span>
                   <h3>{category.title}</h3>
                   <p>{category.text}</p>
-                  <a href="#">Zobacz firmy <Icon name="arrow" /></a>
+                  <Link to={companiesPath(category.slug)}>Zobacz firmy <Icon name="arrow" /></Link>
                 </article>
               ))}
             </div>
@@ -15500,7 +15638,7 @@ function ServicesPage() {
           <section className="services-section">
             <div className="section-head">
               <h2>Polecane firmy</h2>
-              <a href="#">Zobacz wszystkie <Icon name="arrow" /></a>
+              <Link to={ROUTES.companies}>Zobacz wszystkie <Icon name="arrow" /></Link>
             </div>
             <div className="recommended-company-grid">
               {serviceCompanies.map((company) => (
@@ -17137,14 +17275,10 @@ function RealListingsBand({
             item.yearBuilt ? `${item.yearBuilt} r.` : null,
           ].filter(Boolean).join(' • ');
           return (
-            <article
-              key={item.id}
-              className="result-card real-result-card"
-              role="button"
-              tabIndex={0}
-              onClick={() => onOpenListing(item.id)}
-              onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); onOpenListing(item.id); } }}
-            >
+            // Karta prowadzi do stron oferty. Tytul jest linkiem rozciagnietym na cala
+            // karte (::after), dzieki czemu mamy prawdziwy <a href> - do skopiowania i
+            // otwarcia w nowej karcie - bez zagniezdzania przyciskow w <a>.
+            <article key={item.id} className="result-card real-result-card">
               <div className="result-photo" style={{ backgroundImage: `url(${item.coverPhoto ?? heroImage})` }}>
                 {offerType === 'SALE' && (
                   <div className="real-photo-badges">
@@ -17166,7 +17300,7 @@ function RealListingsBand({
               </div>
 
               <div className="result-info">
-                <h3>{item.title}</h3>
+                <h3><Link className="card-stretched-link" to={listingPath(item.id)}>{item.title}</Link></h3>
                 <p>{[item.city, item.district].filter(Boolean).join(', ')}</p>
                 <small>{meta}</small>
               </div>
@@ -17174,9 +17308,9 @@ function RealListingsBand({
               <div className="result-side">
                 <strong>{formatPln(item.price)}{item.offerType === 'RENT' ? ' /mc' : ''}</strong>
                 <span>{listingRelativeDate(item.createdAt)}</span>
-                <button type="button" className="real-card-cta" onClick={(event) => { event.stopPropagation(); onOpenListing(item.id); }}>
+                <Link className="real-card-cta" to={listingPath(item.id)}>
                   Zobacz ogłoszenie
-                </button>
+                </Link>
               </div>
             </article>
           );
@@ -18353,10 +18487,10 @@ function MapSearchPage({ initialCity, offerType }: { initialCity: string; offerT
   return (
     <section className="map-search-page" aria-label="Mapa ofert">
       <div className="map-search-bar">
-        <button type="button" className="map-back" onClick={() => navigate(isRentMode ? ROUTES.rent : ROUTES.buy)}>
+        <Link className="map-back" to={isRentMode ? ROUTES.rent : ROUTES.buy}>
           <Icon name="chevron" />
           <span>Wróć do listy</span>
-        </button>
+        </Link>
 
         <div className="map-field map-field-city">
           <Icon name="search" />
@@ -18558,10 +18692,8 @@ function Header({
     };
   }, [isAccountMenuOpen]);
 
-  const goToAccountSection = (targetPath: string) => {
-    setIsAccountMenuOpen(false);
-    navigate(targetPath);
-  };
+  // Pozycje menu sa linkami; zamkniecie popovera to efekt uboczny kliknięcia, nie nawigacja.
+  const closeAccountMenu = () => setIsAccountMenuOpen(false);
 
   return (
     <header className={isAdmin ? 'header header-admin' : 'header'}>
@@ -18627,15 +18759,9 @@ function Header({
               <section className="notification-popover" aria-label="Powiadomienia">
                 <div className="notification-popover-head">
                   <h3>Powiadomienia</h3>
-                  <button
-                    type="button"
-                    onClick={() => {
-                      setIsNotificationsOpen(false);
-                      navigate(ROUTES.notifications);
-                    }}
-                  >
+                  <Link to={ROUTES.notifications} onClick={() => setIsNotificationsOpen(false)}>
                     Zobacz wszystkie
-                  </button>
+                  </Link>
                 </div>
 
                 <div className="notification-popover-list">
@@ -18697,15 +18823,15 @@ function Header({
 
             {isAccountMenuOpen && (
               <div className="account-popover" role="menu" aria-label="Menu konta">
-                <button type="button" role="menuitem" onClick={() => goToAccountSection(ROUTES.account)}>
+                <Link role="menuitem" to={ROUTES.account} onClick={closeAccountMenu}>
                   <Icon name="house" /> Panel główny
-                </button>
-                <button type="button" role="menuitem" onClick={() => goToAccountSection(ROUTES.accountListings)}>
+                </Link>
+                <Link role="menuitem" to={ROUTES.accountListings} onClick={closeAccountMenu}>
                   <Icon name="document" /> Moje oferty
-                </button>
-                <button type="button" role="menuitem" onClick={() => goToAccountSection(ROUTES.accountSettings)}>
+                </Link>
+                <Link role="menuitem" to={ROUTES.accountSettings} onClick={closeAccountMenu}>
                   <Icon name="gear" /> Dane i ustawienia
-                </button>
+                </Link>
                 <button
                   type="button"
                   role="menuitem"
@@ -20303,7 +20429,7 @@ function FavoritesPage({
                 <div className="favorite-content">
                   <h3>Brak ogłoszeń w tej kategorii</h3>
                   <p>{searchQuery || activeFiltersCount > 0 ? 'Zmień filtry lub frazę wyszukiwania, aby zobaczyć więcej ofert.' : 'Dodaj nowe oferty do ulubionych, aby pojawiły się na tej liście.'}</p>
-                  <button type="button" className="favorite-empty-cta" onClick={() => navigate(activeTab === 'buy' ? ROUTES.buy : ROUTES.rent)}><Icon name="plus" /> {activeTab === 'buy' ? 'Przejdź do ofert Kupuję' : 'Przejdź do ofert Wynajmuję'}</button>
+                  <Link className="favorite-empty-cta" to={activeTab === 'buy' ? ROUTES.buy : ROUTES.rent}><Icon name="plus" /> {activeTab === 'buy' ? 'Przejdź do ofert Kupuję' : 'Przejdź do ofert Wynajmuję'}</Link>
                 </div>
               </article>
             )}
@@ -20885,9 +21011,9 @@ function ListingDetailPage({
       <section className="listing-detail-page">
         <div className="listing-detail-state">
           <p>{error ?? 'Nie znaleziono ogłoszenia.'}</p>
-          <button type="button" className="listing-detail-back" onClick={() => navigate(ROUTES.buy)}>
+          <Link className="listing-detail-back" to={ROUTES.buy}>
             <Icon name="arrow" /> Wróć do ofert
-          </button>
+          </Link>
         </div>
       </section>
     );
@@ -21158,11 +21284,11 @@ function ListingDetailPage({
   return (
     <section className="listing-detail-page">
       <div className="listing-detail-crumbs">
-        <button type="button" onClick={() => navigate(ROUTES.home)}>Panel główny</button>
+        <Link to={ROUTES.home}>Panel główny</Link>
         <span>›</span>
-        <button type="button" onClick={() => navigate(listing.offerType === 'RENT' ? ROUTES.rent : ROUTES.buy)}>
+        <Link to={listing.offerType === 'RENT' ? ROUTES.rent : ROUTES.buy}>
           {listing.offerType === 'RENT' ? 'Wynajmuję' : 'Kupuję'}
-        </button>
+        </Link>
         <span>›</span>
         <strong>{listing.title}</strong>
       </div>
@@ -21349,9 +21475,9 @@ function ListingDetailPage({
               </div>
             </div>
 
-            <button type="button" className="listing-detail-profile-btn" onClick={() => navigate(ROUTES.accountPublicProfile)}>
+            <Link className="listing-detail-profile-btn" to={ROUTES.accountPublicProfile}>
               Wyświetl profil
-            </button>
+            </Link>
 
             <div className="listing-detail-share">
               <strong>Udostępnij ofertę</strong>
diff --git a/frontend/src/auth.tsx b/frontend/src/auth.tsx
index 0c26e83..ae143eb 100644
--- a/frontend/src/auth.tsx
+++ b/frontend/src/auth.tsx
@@ -104,21 +104,42 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     }
     let cancelled = false;
     setLoading(true);
-    apiFetch<AuthUser>('/auth/me')
-      .then((me) => {
+
+    // Sesje konczymy wylacznie wtedy, gdy backend odrzuci token (401/403).
+    // Chwilowy blad sieci albo 5xx nie moze wylogowywac uzytkownika - taki blad
+    // ponawiamy raz, a token zostaje, wiec kolejne wejscie na strone go odzyska.
+    const loadProfile = async (canRetry: boolean): Promise<void> => {
+      try {
+        const me = await apiFetch<AuthUser>('/auth/me');
         if (!cancelled) {
           setUser(me);
           setLoading(false);
         }
-      })
-      .catch(() => {
-        if (!cancelled) {
+      } catch (error) {
+        if (cancelled) {
+          return;
+        }
+        const status = (error as { status?: number }).status;
+        if (status === 401 || status === 403) {
           window.localStorage.removeItem(TOKEN_KEY);
           setToken(null);
           setUser(null);
           setLoading(false);
+          return;
         }
-      });
+        if (canRetry) {
+          await new Promise((resolve) => { window.setTimeout(resolve, 400); });
+          if (!cancelled) {
+            await loadProfile(false);
+          }
+          return;
+        }
+        setUser(null);
+        setLoading(false);
+      }
+    };
+
+    void loadProfile(true);
     return () => {
       cancelled = true;
     };
diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts
index f5a4356..bfe8a61 100644
--- a/frontend/src/routes.ts
+++ b/frontend/src/routes.ts
@@ -12,6 +12,7 @@ export const ROUTES = {
   comparison: '/konto/porownanie',
   add: '/dodaj-ogloszenie',
   services: '/firmy-i-uslugi',
+  companies: '/firmy',
   guides: '/poradniki',
   guideBuying: '/poradniki/kupno-mieszkania',
   creditCalculator: '/kalkulator-zdolnosci',
@@ -59,6 +60,12 @@ export function mapPath(city?: string, offerType?: 'SALE' | 'RENT'): string {
   return query ? `${ROUTES.map}?${query}` : ROUTES.map;
 }
 
+// Lista firm i usług: kategoria w query stringu, dzięki czemu widok da się
+// skopiować, odświeżyć i otworzyć w nowej karcie.
+export function companiesPath(categorySlug?: string): string {
+  return categorySlug ? `${ROUTES.companies}?kategoria=${encodeURIComponent(categorySlug)}` : ROUTES.companies;
+}
+
 // Zakładki panelu administratora jako podścieżki /admin/*.
 export const ADMIN_TAB_PATHS = {
   dashboard: '',
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index df27c4b..2e5bfcd 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -589,7 +589,7 @@ svg {
   width: max-content;
 }
 
-.search-tabs button {
+.search-tabs button, .search-tabs a {
   background: rgba(255, 255, 255, 0.88);
   border: 0;
   color: #657284;
@@ -600,11 +600,11 @@ svg {
   padding: 10px 20px;
 }
 
-.search-tabs button:first-child {
+.search-tabs button:first-child, .search-tabs a:first-child {
   border-radius: 6px 0 0 0;
 }
 
-.search-tabs button:last-child {
+.search-tabs button:last-child, .search-tabs a:last-child {
   border-radius: 0 6px 0 0;
 }
 
@@ -798,7 +798,7 @@ svg {
   font-size: 12px;
 }
 
-.tool-card button {
+.tool-card button, .tool-card a {
   align-self: end;
   background: #f8fafc;
   border: 1px solid #e2e8ef;
@@ -3183,7 +3183,7 @@ svg {
   margin-top: 6px;
 }
 
-.result-side button {
+.result-side button, .result-side a {
   align-self: end;
   background: #0b9f5c;
   border: 0;
@@ -5922,7 +5922,7 @@ svg {
   padding: 15px 16px;
 }
 
-.sell-valuation-card button {
+.sell-valuation-card button, .sell-valuation-card a {
   background: #0b9f5c;
   border: 0;
   border-radius: 6px;
@@ -8331,7 +8331,7 @@ svg {
   margin-top: 3px;
 }
 
-.sell-bottom-cta button {
+.sell-bottom-cta button, .sell-bottom-cta a {
   background: #0b9f5c;
   border: 0;
   border-radius: 6px;
@@ -11417,7 +11417,7 @@ svg {
     width: 100%;
   }
 
-  .search-tabs button {
+  .search-tabs button, .search-tabs a {
     flex: 1;
     min-width: 0;
     padding-left: 10px;
@@ -18271,7 +18271,7 @@ svg {
   gap: 8px;
 }
 
-.price-alerts-active-items button {
+.price-alerts-active-items button, .price-alerts-active-items a {
   align-items: center;
   background: #fbfcfe;
   border: 1px solid #e2eaf3;
@@ -18405,7 +18405,7 @@ svg {
 }
 
 .settings-card-head.split > button,
-.settings-profile-row > button {
+.settings-profile-row > button, .settings-profile-row > a {
   background: #ffffff;
   border: 1px solid #d9e2ec;
   border-radius: 6px;
@@ -20757,7 +20757,7 @@ svg {
   gap: 12px;
 }
 
-.public-profile-head > button {
+.public-profile-head > button, .public-profile-head > a {
   align-items: center;
   background: #ffffff;
   border: 1px solid #d9e2ec;
@@ -20771,7 +20771,7 @@ svg {
   padding: 0 14px;
 }
 
-.public-profile-head > button svg {
+.public-profile-head > button svg, .public-profile-head > a svg {
   height: 14px;
   width: 14px;
 }
@@ -21559,7 +21559,7 @@ svg {
   margin: 0;
 }
 
-.admin-card-head button {
+.admin-card-head button, .admin-card-head a {
   background: transparent;
   border: 0;
   color: #159e5d;
@@ -21636,7 +21636,7 @@ svg {
   padding: 12px 18px 18px;
 }
 
-.admin-quick-actions-grid button {
+.admin-quick-actions-grid button, .admin-quick-actions-grid a {
   align-items: center;
   background: #f8fbff;
   border: 1px solid #e0e8f2;
@@ -21650,11 +21650,11 @@ svg {
   padding: 0 12px;
 }
 
-.admin-quick-actions-grid button svg:first-child {
+.admin-quick-actions-grid button svg:first-child, .admin-quick-actions-grid a svg:first-child {
   color: #109253;
 }
 
-.admin-quick-actions-grid button svg:last-child {
+.admin-quick-actions-grid button svg:last-child, .admin-quick-actions-grid a svg:last-child {
   margin-left: auto;
   opacity: 0.6;
 }
@@ -22853,7 +22853,7 @@ svg {
 }
 
 .listing-detail-back,
-.listing-detail-crumbs button {
+.listing-detail-crumbs button, .listing-detail-crumbs a {
   align-items: center;
   background: none;
   border: none;
@@ -26789,3 +26789,151 @@ svg {
 
 /* Routing: naglowkowe CTA jako <Link> - zachowanie wygladu przyciskow */
 .post-button { align-content: center; text-decoration: none; }
+
+/* Lista firm i uslug (/firmy) - korzysta z istniejacych kart .directory-card */
+.companies-frame {
+  display: block;
+  margin: 0 auto;
+  max-width: 1420px;
+  padding: 0 96px;
+}
+
+.companies-frame .services-main { padding-right: 0; }
+
+.companies-head { margin: 18px 0 20px; }
+
+.companies-head h1 {
+  color: #111a2e;
+  font-size: 30px;
+  font-weight: 900;
+  line-height: 1.15;
+  margin: 0 0 8px;
+}
+
+.companies-head p {
+  color: #5b6472;
+  font-size: 15px;
+  margin: 0 0 10px;
+  max-width: 720px;
+}
+
+.companies-count {
+  color: #109253;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.companies-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.companies-chip {
+  align-items: center;
+  background: #ffffff;
+  border: 1px solid #dce4ec;
+  border-radius: 999px;
+  color: #27384f;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: 13px;
+  font-weight: 800;
+  gap: 7px;
+  padding: 8px 14px;
+}
+
+.companies-chip svg { color: #7d8ca0; font-size: 14px; }
+
+.companies-chip span {
+  background: #eef3f8;
+  border-radius: 999px;
+  color: #5b6472;
+  font-size: 11px;
+  font-weight: 900;
+  padding: 1px 7px;
+}
+
+.companies-chip:hover { border-color: #b9c6d4; }
+
+.companies-chip.active {
+  background: #ebf6f0;
+  border-color: #13a360;
+  color: #109253;
+}
+
+.companies-chip.active svg { color: #109253; }
+.companies-chip.active span { background: #d7efe2; color: #0d7a45; }
+
+.companies-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+
+@media (max-width: 1280px) {
+  .companies-frame { padding: 0 24px; }
+  .companies-list { grid-template-columns: minmax(0, 1fr); }
+}
+
+@media (max-width: 720px) {
+  .companies-head h1 { font-size: 24px; }
+  .companies-frame { padding: 0 14px; }
+}
+
+/* Routing: CTA nawigacyjne renderuja sie jako <a> (Link). :where() ma zerowa
+   specyficznosc, wiec kazda istniejaca regula klasy nadal wygrywa - to tylko
+   zdejmuje domyslne podkreslenie i niebieski kolor linku. */
+:where(a) {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Routing: CTA o ukladzie blokowym odtwarzaja centrowanie tresci znane z <button> */
+a.sell-primary,
+a.account-new-search,
+a.price-alerts-link,
+a.price-alerts-manage,
+a.cover-preview-button,
+a.back-step-button,
+a.listing-detail-back {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+/* Kontenery, ktorych reguly nie ustawialy display - <button> centrowal tresc sam,
+   <a> wymaga tego jawnie. Pudelko (padding, min-height, tlo) bez zmian. */
+.search-tabs a,
+.tool-card a,
+.sell-valuation-card a,
+.sell-bottom-cta a,
+.settings-profile-row > a {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+/* Karty prowadzace do osobnej strony: link rozciagniety na cala karte.
+   Daje prawdziwy <a href> (kopiowanie, nowa karta, indeksowanie) bez
+   zagniezdzania przyciskow w <a>. Kontrolki karty zostaja klikalne nad nakladka. */
+.real-result-card { position: relative; }
+
+.card-stretched-link::after {
+  content: "";
+  inset: 0;
+  position: absolute;
+  z-index: 1;
+}
+
+.real-result-card .real-favorite-button,
+.real-result-card .real-card-cta {
+  position: relative;
+  z-index: 2;
+}
+
+.real-card-cta {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  text-align: center;
+}
diff --git a/frontend/tests/routing.spec.ts b/frontend/tests/routing.spec.ts
new file mode 100644
index 0000000..15c8cb6
--- /dev/null
+++ b/frontend/tests/routing.spec.ts
@@ -0,0 +1,249 @@
+import { test, expect, type Page } from '@playwright/test';
+import { ROUTES } from '../src/routes';
+
+// Standard projektu (AGENTS.md): kazdy widok ma wlasny URL obslugiwany przez React Router,
+// a nawigacja odbywa sie przez <Link>/<NavLink>. Te testy pilnuja tej zasady.
+
+const ADMIN = { email: 'admin@mieszko.pl', password: 'Admin123!' };
+
+const PUBLIC_ROUTES = [
+  ROUTES.home,
+  ROUTES.buy,
+  ROUTES.rent,
+  ROUTES.sell,
+  ROUTES.valuation,
+  ROUTES.priceHistory,
+  ROUTES.districtRanking,
+  ROUTES.negotiation,
+  ROUTES.creditCalculator,
+  ROUTES.map,
+  ROUTES.services,
+  ROUTES.companies,
+  ROUTES.guides,
+  ROUTES.guideBuying,
+  ROUTES.login,
+];
+
+const PROTECTED_ROUTES = [
+  ROUTES.account,
+  ROUTES.favorites,
+  ROUTES.messages,
+  ROUTES.add,
+  ROUTES.admin,
+  `${ROUTES.admin}/leady`,
+];
+
+async function goto(page: Page, path: string) {
+  await page.goto(path, { waitUntil: 'domcontentloaded' });
+  await page.locator('main').first().waitFor({ state: 'attached' });
+  // ProtectedRoute dociaga profil z /auth/me - poczekaj, az skonczy stan ladowania
+  await page.locator('.route-loading').waitFor({ state: 'detached' }).catch(() => {});
+  await page.waitForTimeout(400);
+}
+
+async function login(page: Page) {
+  await goto(page, ROUTES.login);
+  await page.getByPlaceholder('Wpisz swój adres e-mail').fill(ADMIN.email);
+  await page.getByPlaceholder('Wpisz swoje hasło').fill(ADMIN.password);
+  await page.getByRole('button', { name: 'Zaloguj się', exact: true }).click();
+  // token w localStorage to pewny dowod zalogowania - adres moze sie jeszcze zmieniac
+  await page.waitForFunction(() => Boolean(window.localStorage.getItem('polskalokalnie-auth-token')));
+  await page.waitForFunction(() => window.location.pathname !== '/logowanie');
+}
+
+test.describe('Trasy publiczne', () => {
+  for (const path of PUBLIC_ROUTES) {
+    test(`bezposrednie wejscie na ${path} (F5 / nowa karta / wklejony link)`, async ({ page }) => {
+      await goto(page, path);
+      expect(new URL(page.url()).pathname).toBe(path);
+      await expect(page.locator('main')).not.toBeEmpty();
+    });
+  }
+
+  test('nieznany adres pokazuje strone 404', async ({ page }) => {
+    await goto(page, '/adres-ktory-nie-istnieje');
+    await expect(page.locator('.not-found-page')).toBeVisible();
+  });
+
+  test('odswiezenie strony zachowuje widok', async ({ page }) => {
+    await goto(page, ROUTES.districtRanking);
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    expect(new URL(page.url()).pathname).toBe(ROUTES.districtRanking);
+  });
+});
+
+test.describe('Lista firm i uslug (/firmy)', () => {
+  test('wejscie na /firmy pokazuje pelna liste', async ({ page }) => {
+    await goto(page, ROUTES.companies);
+    await expect(page.locator('.companies-head h1')).toHaveText('Wszystkie firmy i usługi');
+    const cards = await page.locator('.directory-card').count();
+    expect(cards).toBeGreaterThan(10);
+  });
+
+  test('filtr kategorii dziala przez query string', async ({ page }) => {
+    await goto(page, `${ROUTES.companies}?kategoria=remonty`);
+    await expect(page.locator('.companies-head h1')).toHaveText('Remont i wykończenie');
+
+    const filtered = await page.locator('.directory-card').count();
+    await goto(page, ROUTES.companies);
+    const all = await page.locator('.directory-card').count();
+    expect(filtered).toBeGreaterThan(0);
+    expect(filtered).toBeLessThan(all);
+  });
+
+  test('nieznana kategoria nie wywraca widoku - pokazuje pelna liste', async ({ page }) => {
+    await goto(page, `${ROUTES.companies}?kategoria=nie-ma-takiej`);
+    await expect(page.locator('.companies-head h1')).toHaveText('Wszystkie firmy i usługi');
+  });
+
+  test('klik w chip kategorii zmienia adres i wynik', async ({ page }) => {
+    await goto(page, ROUTES.companies);
+    await page.locator('.companies-chip', { hasText: 'Finanse' }).first().click();
+    await page.waitForFunction(() => window.location.search.includes('kategoria=finanse'));
+    await expect(page.locator('.companies-head h1')).toHaveText('Finanse');
+  });
+
+  test('"Zobacz firmy" prowadzi do listy z wybrana kategoria', async ({ page }) => {
+    await goto(page, ROUTES.services);
+    const link = page.locator('.service-category-card', { hasText: 'Remont i wykończenie' }).getByRole('link');
+    await expect(link).toHaveAttribute('href', '/firmy?kategoria=remonty');
+    await link.click();
+    await page.waitForFunction(() => window.location.pathname === '/firmy');
+    await expect(page.locator('.companies-head h1')).toHaveText('Remont i wykończenie');
+  });
+
+  test('"Zobacz wszystkie" prowadzi do pelnej listy', async ({ page }) => {
+    await goto(page, ROUTES.services);
+    const link = page.locator('.services-section .section-head', { hasText: 'Polecane firmy' }).getByRole('link');
+    await expect(link).toHaveAttribute('href', ROUTES.companies);
+    await link.click();
+    await page.waitForFunction(() => window.location.pathname === '/firmy');
+    await expect(page.locator('.companies-head h1')).toHaveText('Wszystkie firmy i usługi');
+  });
+
+  test('Wstecz i Dalej dzialaja na filtrze kategorii', async ({ page }) => {
+    await goto(page, ROUTES.services);
+    await page.locator('.service-category-card', { hasText: 'Finanse' }).getByRole('link').click();
+    await page.waitForFunction(() => window.location.search.includes('kategoria=finanse'));
+
+    await page.goBack({ waitUntil: 'domcontentloaded' });
+    await page.waitForFunction(() => window.location.pathname === '/firmy-i-uslugi');
+
+    await page.goForward({ waitUntil: 'domcontentloaded' });
+    await page.waitForFunction(() => window.location.search.includes('kategoria=finanse'));
+  });
+});
+
+test.describe('Nawigacja przez linki', () => {
+  test('menu glowne to <a href> - mozna otworzyc w nowej karcie', async ({ page }) => {
+    await goto(page, ROUTES.home);
+    for (const [label, expected] of [
+      ['Kupuję', ROUTES.buy],
+      ['Wynajmuję', ROUTES.rent],
+      ['Poradniki', ROUTES.guides],
+      ['Firmy i usługi', ROUTES.services],
+    ] as const) {
+      const link = page.getByRole('link', { name: label, exact: true }).first();
+      await expect(link).toHaveAttribute('href', expected);
+    }
+  });
+
+  test('aktywna pozycja menu wynika z adresu', async ({ page }) => {
+    await goto(page, ROUTES.buy);
+    await expect(page.getByRole('link', { name: 'Kupuję', exact: true }).first()).toHaveClass(/active/);
+  });
+
+  test('CTA naglowka maja poprawne adresy', async ({ page }) => {
+    await goto(page, ROUTES.home);
+    await expect(page.locator('a.post-button')).toHaveAttribute('href', ROUTES.add);
+    await expect(page.getByRole('link', { name: 'Moje konto' })).toHaveAttribute('href', ROUTES.login);
+  });
+
+  test('CTA w tresci strony sa linkami z href', async ({ page }) => {
+    await goto(page, ROUTES.sell);
+    await expect(page.locator('a.sell-primary')).toHaveAttribute('href', ROUTES.add);
+    await expect(page.locator('.sell-valuation-card a')).toHaveAttribute('href', ROUTES.valuation);
+  });
+
+  test('karta oferty ma prawdziwy link do strony oferty', async ({ page }) => {
+    await goto(page, ROUTES.buy);
+    await page.locator('.real-result-card').first().waitFor();
+    const card = page.locator('.real-result-card').first();
+    const href = await card.locator('.card-stretched-link').getAttribute('href');
+    expect(href).toMatch(/^\/oferta\/\d+$/);
+    await expect(card.locator('a.real-card-cta')).toHaveAttribute('href', href!);
+  });
+
+  test('klik w serce na karcie nie nawiguje', async ({ page }) => {
+    await goto(page, ROUTES.buy);
+    await page.locator('.real-result-card').first().waitFor();
+    await page.locator('.real-result-card').first().locator('.real-favorite-button').click();
+    await page.waitForTimeout(700);
+    expect(new URL(page.url()).pathname).toBe(ROUTES.buy);
+  });
+
+  test('klik w menu zmienia adres, Wstecz i Dalej dzialaja', async ({ page }) => {
+    await goto(page, ROUTES.home);
+    await page.getByRole('link', { name: 'Kupuję', exact: true }).first().click();
+    await page.waitForFunction(() => window.location.pathname === '/kupno');
+
+    await page.getByRole('link', { name: 'Poradniki', exact: true }).first().click();
+    await page.waitForFunction(() => window.location.pathname === '/poradniki');
+
+    await page.goBack({ waitUntil: 'domcontentloaded' });
+    await page.waitForFunction(() => window.location.pathname === '/kupno');
+
+    await page.goForward({ waitUntil: 'domcontentloaded' });
+    await page.waitForFunction(() => window.location.pathname === '/poradniki');
+  });
+});
+
+test.describe('Standard: brak atrap linkow', () => {
+  const PAGES = [ROUTES.home, ROUTES.services, ROUTES.companies, ROUTES.guides, ROUTES.sell, ROUTES.buy];
+
+  for (const path of PAGES) {
+    test(`${path} nie zawiera href="#" ani javascript:void`, async ({ page }) => {
+      await goto(page, path);
+      const bad = await page.locator('a[href="#"], a[href^="javascript:"]').count();
+      expect(bad).toBe(0);
+    });
+  }
+});
+
+test.describe('Trasy chronione', () => {
+  test('bez logowania przekierowuja na /logowanie', async ({ page }) => {
+    for (const path of PROTECTED_ROUTES) {
+      await goto(page, path);
+      expect(new URL(page.url()).pathname).toBe(ROUTES.login);
+    }
+  });
+
+  test('po zalogowaniu wracamy na zamierzona strone', async ({ page }) => {
+    await goto(page, ROUTES.accountPriceAlerts);
+    expect(new URL(page.url()).pathname).toBe(ROUTES.login);
+
+    await page.getByPlaceholder('Wpisz swój adres e-mail').fill(ADMIN.email);
+    await page.getByPlaceholder('Wpisz swoje hasło').fill(ADMIN.password);
+    await page.getByRole('button', { name: 'Zaloguj się', exact: true }).click();
+
+    await page.waitForFunction(() => window.location.pathname === '/konto/alerty-cenowe');
+  });
+
+  test('zakladki panelu admina maja wlasne adresy i przezywaja F5', async ({ page }) => {
+    await login(page);
+    await goto(page, ROUTES.admin);
+
+    await page.locator('.admin-nav a', { hasText: 'Leady' }).first().click();
+    await page.waitForFunction(() => window.location.pathname === '/admin/leady');
+
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    await page.locator('.admin-nav').first().waitFor({ state: 'attached' });
+    expect(new URL(page.url()).pathname).toBe('/admin/leady');
+  });
+
+  test('nieznana sekcja panelu admina pokazuje 404', async ({ page }) => {
+    await login(page);
+    await goto(page, `${ROUTES.admin}/nie-ma-takiej-sekcji`);
+    await expect(page.locator('.not-found-page')).toBeVisible();
+  });
+});