fix w sugestiach i js

.env.example

@@ -137,28 +137,28 @@ DISABLE_ROBOTS=0
 
 # JS_CACHE_CONTROL:
 # Nagłówki Cache-Control dla plików JS (/static/js/)
-# Domyślnie: "no-cache, no-store, must-revalidate"
-JS_CACHE_CONTROL="no-cache, no-store, must-revalidate"
+# Domyślnie: "no-cache"
+JS_CACHE_CONTROL="no-cache"
 
 # CSS_CACHE_CONTROL:
 # Nagłówki Cache-Control dla plików CSS (/static/css/)
-# Domyślnie: "public, max-age=3600"
-CSS_CACHE_CONTROL="public, max-age=3600"
+# Domyślnie: "no-cache"
+CSS_CACHE_CONTROL="no-cache"
 
 # LIB_JS_CACHE_CONTROL:
 # Nagłówki Cache-Control dla bibliotek JS (/static/lib/js/)
-# Domyślnie: "public, max-age=604800"
-LIB_JS_CACHE_CONTROL="public, max-age=604800"
+# Domyślnie: "max-age=86400"
+LIB_JS_CACHE_CONTROL="max-age=86400"
 
 # LIB_CSS_CACHE_CONTROL:
 # Nagłówki Cache-Control dla bibliotek CSS (/static/lib/css/)
-# Domyślnie: "public, max-age=604800"
-LIB_CSS_CACHE_CONTROL="public, max-age=604800"
+# Domyślnie: "max-age=86400"
+LIB_CSS_CACHE_CONTROL="max-age=86400"
 
 # UPLOADS_CACHE_CONTROL:
 # Nagłówki Cache-Control dla wgrywanych plików (/uploads/)
-# Domyślnie: "public, max-age=2592000, immutable"
-UPLOADS_CACHE_CONTROL="public, max-age=2592000, immutable"
+# Domyślnie: "max-age=2592000, immutable"
+UPLOADS_CACHE_CONTROL="max-age=2592000, immutable"
 
 # DEFAULT_CATEGORIES:
 # Lista domyślnych kategorii tworzonych automatycznie przy starcie aplikacji,

Dockerfile

@@ -12,6 +12,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \
     libsm6 \
     libxrender1 \
     libxext6 \
+    poppler-utils \
     && apt-get clean \
     && rm -rf /var/lib/apt/lists/*
 

Dockerfile_alpine

@@ -0,0 +1,66 @@
+# =========================
+#  Stage 1 – Build
+# =========================
+FROM python:3.13-alpine AS builder
+
+WORKDIR /app
+
+# Instalacja bibliotek do kompilacji + zależności runtime
+RUN apk add --no-cache \
+    tesseract-ocr \
+    tesseract-ocr-data-pol \
+    poppler-utils \
+    libjpeg-turbo \
+    zlib \
+    libpng \
+    libwebp \
+    libffi \
+    libmagic \
+    && apk add --no-cache --virtual .build-deps \
+    build-base \
+    jpeg-dev \
+    zlib-dev \
+    libpng-dev \
+    libwebp-dev \
+    libffi-dev
+
+# Kopiujemy plik wymagań
+COPY requirements.txt .
+
+# Instalujemy zależności Pythona do folderu tymczasowego
+RUN pip install --no-cache-dir --prefix=/install -r requirements.txt
+
+
+# =========================
+#  Stage 2 – Final image
+# =========================
+FROM python:3.13-alpine
+
+WORKDIR /app
+
+# Instalacja tylko bibliotek runtime (bez dev)
+RUN apk add --no-cache \
+    tesseract-ocr \
+    tesseract-ocr-data-pol \
+    poppler-utils \
+    libjpeg-turbo \
+    zlib \
+    libpng \
+    libwebp \
+    libffi \
+    libmagic
+
+# Kopiujemy zbudowane biblioteki z buildera
+COPY --from=builder /install /usr/local
+
+# Kopiujemy kod aplikacji
+COPY . .
+
+# Ustawiamy entrypoint
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+# Otwieramy port aplikacji
+EXPOSE 8000
+
+ENTRYPOINT ["/entrypoint.sh"]

_tools/wait_for_db.py

@@ -1,10 +1,16 @@
 import os
 import socket
 import time
+import sys
+
+db_engine = os.environ.get("DB_ENGINE", "mysql").lower()
+
+if db_engine == "sqlite":
+    print("SQLite - koncze oczekiwanie na baze..")
+    sys.exit(0)
 
 host = os.environ.get("DB_HOST", "mysql")
 port = int(os.environ.get("DB_PORT", 3306))
-
 print(f"Czekam na bazę danych {host}:{port}...")
 
 while True:

alters.txt

@@ -1,92 +0,0 @@
-# SUGEROWANE PRODUKTY
-CREATE TABLE IF NOT EXISTS suggested_product (
-    id INTEGER PRIMARY KEY AUTOINCREMENT,
-    name TEXT UNIQUE NOT NULL
-);
-
-# NOTATKI
-ALTER TABLE item
-ADD COLUMN note TEXT;
-
-# NOWE FUNKCJE ADMINA
-ALTER TABLE shopping_list ADD COLUMN is_archived BOOLEAN DEFAULT FALSE;
-
-
-# FUNKCJA WYDATKOW
-CREATE TABLE expense (
-    id INTEGER PRIMARY KEY AUTOINCREMENT,
-    list_id INTEGER,
-    amount FLOAT NOT NULL,
-    added_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-    receipt_filename VARCHAR(255),
-    FOREIGN KEY(list_id) REFERENCES shopping_list(id)
-);
-
-# FUNKCJA UKRYCIA PUBLICZNIE LISTY
-ALTER TABLE shopping_list ADD COLUMN is_public BOOLEAN NOT NULL DEFAULT 1;
-
-# ilośc produktów 
-ALTER TABLE item ADD COLUMN quantity INTEGER DEFAULT 1;
-
-# licznik najczesciej kupowanych reczy
-ALTER TABLE suggested_product ADD COLUMN usage_count INTEGER DEFAULT 0;
-
-# funkcja niekupione
-ALTER TABLE item ADD COLUMN not_purchased_reason TEXT;
-ALTER TABLE item ADD COLUMN not_purchased BOOLEAN DEFAULT 0;
-
-# funkcja sortowania
-ALTER TABLE item ADD COLUMN position INTEGER DEFAULT 0;
-
-# migracja paragonów do nowej tabeli
-CREATE TABLE receipt (
-    id INTEGER PRIMARY KEY AUTOINCREMENT,
-    list_id INTEGER NOT NULL,
-    filename TEXT NOT NULL,
-    uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
-    FOREIGN KEY (list_id) REFERENCES shopping_list(id)
-);
-
-ALTER TABLE receipt ADD COLUMN filesize INTEGER;
-
-# unikanie identycznych plikow
-ALTER TABLE receipt ADD COLUMN file_hash TEXT
-
-########## kategorie
--- 1. Nowa tabela kategorii
-CREATE TABLE category (
-    id SERIAL PRIMARY KEY, -- w SQLite: INTEGER PRIMARY KEY AUTOINCREMENT
-    name VARCHAR(100) NOT NULL UNIQUE
-);
-
--- 2. Tabela łącząca elementy z kategoriami
-CREATE TABLE item_category (
-    item_id INTEGER NOT NULL,
-    category_id INTEGER NOT NULL,
-    PRIMARY KEY (item_id, category_id),
-    FOREIGN KEY (item_id) REFERENCES item(id) ON DELETE CASCADE,
-    FOREIGN KEY (category_id) REFERENCES category(id) ON DELETE CASCADE
-);
-
--- 3. Wstawienie kategorii początkowych
-INSERT INTO category (name) VALUES
-('Spożywcze'),
-('Budowlane'),
-('Zabawki'),
-('Chemia'),
-('Inne'),
-('Elektronika'),
-('Odzież i obuwie'),
-('Artykuły biurowe'),
-('Kosmetyki i higiena'),
-('Motoryzacja'),
-('Ogród i rośliny'),
-('Zwierzęta'),
-('Sprzęt sportowy'),
-('Książki i prasa'),
-('Narzędzia i majsterkowanie'),
-('RTV / AGD'),
-('Apteka i suplementy'),
-('Artykuły dekoracyjne'),
-('Gry i hobby'),
-('Usługi');

config.py

@@ -57,16 +57,16 @@ class Config:
     DISABLE_ROBOTS = os.environ.get("DISABLE_ROBOTS", "0") == "1"
 
     JS_CACHE_CONTROL = os.environ.get(
-        "JS_CACHE_CONTROL", "no-cache, no-store, must-revalidate"
+        "JS_CACHE_CONTROL", "no-cache"
     )
     CSS_CACHE_CONTROL = os.environ.get(
-        "CSS_CACHE_CONTROL", "public, max-age=3600"
+        "CSS_CACHE_CONTROL", "no-cache"
     )
     LIB_JS_CACHE_CONTROL = os.environ.get(
-        "LIB_JS_CACHE_CONTROL", "public, max-age=604800"
+        "LIB_JS_CACHE_CONTROL", "max-age=604800"
     )
     LIB_CSS_CACHE_CONTROL = os.environ.get(
-        "LIB_CSS_CACHE_CONTROL", "public, max-age=604800"
+        "LIB_CSS_CACHE_CONTROL", "max-age=604800"
     )
     UPLOADS_CACHE_CONTROL = os.environ.get(
         "UPLOADS_CACHE_CONTROL", "public, max-age=2592000, immutable"
@@ -78,6 +78,6 @@ class Config:
             "Spożywcze,Budowlane,Zabawki,Chemia,Inne,Elektronika,Odzież i obuwie,"
             "Artykuły biurowe,Kosmetyki i higiena,Motoryzacja,Ogród i rośliny,"
             "Zwierzęta,Sprzęt sportowy,Książki i prasa,Narzędzia i majsterkowanie,"
-            "RTV / AGD,Apteka i suplementy,Artykuły dekoracyjne,Gry i hobby,Usługi,Pieczywo"
+            "RTV / AGD,Apteka i suplementy,Artykuły dekoracyjne,Gry i hobby,Usługi,Pieczywo,Różne,Chiny,Dom"
         ).split(",") if c.strip()
     ]

requirements.txt

@@ -16,4 +16,5 @@ pymysql         # mysql
 cryptography    # mysql8
 flask-talisman  # nagłówki
 bcrypt
-Flask-Session
+Flask-Session
+pdf2image

static/css/style.css

@@ -26,13 +26,21 @@
 }
 
 .progress-bar {
-  border-radius: 20px !important;
-  transition: width 0.4s ease;
-  flex-direction: column;
-  justify-content: center;
-  white-space: nowrap;
+  border-radius: 0 !important;
+  transition: width 0.4s ease, background-color 0.4s ease;
 }
 
+.progress-bar:first-child {
+  border-top-left-radius: 20px !important;
+  border-bottom-left-radius: 20px !important;
+}
+
+.progress-bar:last-child {
+  border-top-right-radius: 20px !important;
+  border-bottom-right-radius: 20px !important;
+}
+
+
 /* rodzic już ma position-relative */
 .progress-label {
   position: absolute;
@@ -311,17 +319,98 @@ input.form-control {
   }
 }
 
-.ts-control {
+
+.ts-dropdown .active {
+  background-color: #495057 !important;
+}
+
+.pagination-dark .page-link {
+  color: #fff;
+  background-color: #212529;
+  border: 1px solid #495057;
+}
+
+.pagination-dark .page-link:hover {
+  background-color: #343a40;
+  border-color: #6c757d;
+  color: #fff;
+}
+
+.pagination-dark .page-item.active .page-link {
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+  color: #fff;
+}
+
+.pagination-dark .page-item.disabled .page-link {
+  background-color: #2b3035;
+  border-color: #495057;
+  color: #6c757d;
+}
+
+.tom-dark .ts-control {
   background-color: #212529 !important;
   color: #fff !important;
   border: 1px solid #495057 !important;
+  border-radius: 0.375rem;
+  min-height: 38px;
+  padding: 0.25rem 0.5rem;
+  box-sizing: border-box;
+}
+
+.tom-dark .ts-control .item {
+  background-color: #343a40 !important;
+  color: #fff !important;
+  border-radius: 0.25rem;
+  padding: 2px 8px;
+  margin-right: 4px;
 }
 
 .ts-dropdown {
   background-color: #212529 !important;
   color: #fff !important;
+  border: 1px solid #495057;
+  border-radius: 0.375rem;
+  z-index: 9999 !important;
+  max-height: 300px;
+  overflow-y: auto;
 }
 
 .ts-dropdown .active {
   background-color: #495057 !important;
+  color: #fff !important;
+}
+
+td select.tom-dark {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+  background-color: rgba(255, 255, 255, 0.025);
+}
+
+.table-dark tbody tr:hover {
+  background-color: rgba(255, 255, 255, 0.04);
+}
+
+.table-dark thead th {
+  background-color: #1c1f22;
+  color: #e1e1e1;
+  font-weight: 500;
+  border-bottom: 1px solid #3a3f44;
+}
+
+.table-dark td,
+.table-dark th {
+  padding: 0.6rem 0.75rem;
+  vertical-align: middle;
+  border-top: 1px solid #3a3f44;
+}
+
+.card .table {
+  border-radius: 0 !important;
+  overflow: hidden;
+  margin-bottom: 0;
 }

static/js/_unused_receipt_crop.js

@@ -1,109 +0,0 @@
-let cropper;
-let currentReceiptId;
-
-document.addEventListener("DOMContentLoaded", function () {
-    const cropModal = document.getElementById("cropModal");
-    const cropImage = document.getElementById("cropImage");
-    const spinner = document.getElementById("cropLoading");
-
-    cropModal.addEventListener("shown.bs.modal", function (event) {
-        const button = event.relatedTarget;
-        const imgSrc = button.getAttribute("data-img-src");
-        currentReceiptId = button.getAttribute("data-receipt-id");
-
-        cropImage.src = imgSrc;
-
-        if (cropper) {
-            cropper.destroy();
-            cropper = null;
-        }
-
-        cropImage.onload = () => {
-            cropper = new Cropper(cropImage, {
-                viewMode: 1,
-                autoCropArea: 1,
-                responsive: true,
-                background: false,
-                zoomable: true,
-                movable: true,
-                dragMode: 'move',
-                minContainerHeight: 400,
-                minContainerWidth: 400,
-            });
-        };
-    });
-
-    document.getElementById("saveCrop").addEventListener("click", function () {
-        if (!cropper) return;
-
-        spinner.classList.remove("d-none");
-
-        const cropData = cropper.getData();
-        const imageData = cropper.getImageData();
-
-        const scaleX = imageData.naturalWidth / imageData.width;
-        const scaleY = imageData.naturalHeight / imageData.height;
-
-        const width = cropData.width * scaleX;
-        const height = cropData.height * scaleY;
-
-        if (width < 1 || height < 1) {
-            spinner.classList.add("d-none");
-            showToast("Obszar przycięcia jest zbyt mały lub pusty", "danger");
-            return;
-        }
-
-        // Ogranicz do 2000x2000 w proporcji
-        const maxDim = 2000;
-        const scale = Math.min(1, maxDim / Math.max(width, height));
-
-        const finalWidth = Math.round(width * scale);
-        const finalHeight = Math.round(height * scale);
-
-        const croppedCanvas = cropper.getCroppedCanvas({
-            width: finalWidth,
-            height: finalHeight,
-            imageSmoothingEnabled: true,
-            imageSmoothingQuality: 'high',
-        });
-
-
-        if (!croppedCanvas) {
-            spinner.classList.add("d-none");
-            showToast("Nie można uzyskać obrazu przycięcia", "danger");
-            return;
-        }
-
-        croppedCanvas.toBlob(function (blob) {
-            if (!blob) {
-                spinner.classList.add("d-none");
-                showToast("Nie udało się zapisać obrazu", "danger");
-                return;
-            }
-
-            const formData = new FormData();
-            formData.append("receipt_id", currentReceiptId);
-            formData.append("cropped_image", blob);
-
-            fetch("/admin/crop_receipt", {
-                method: "POST",
-                body: formData,
-            })
-                .then((res) => res.json())
-                .then((data) => {
-                    spinner.classList.add("d-none");
-                    if (data.success) {
-                        showToast("Zapisano przycięty paragon", "success");
-                        setTimeout(() => location.reload(), 1500);
-                    } else {
-                        showToast("Błąd: " + (data.error || "Nieznany"), "danger");
-                    }
-                })
-                .catch((err) => {
-                    spinner.classList.add("d-none");
-                    showToast("Błąd sieci", "danger");
-                    console.error(err);
-                });
-        }, "image/webp", 1.0);
-    });
-});

static/js/categories_select_admin.js

@@ -1,11 +1,11 @@
 document.addEventListener("DOMContentLoaded", function () {
-    document.querySelectorAll('select[multiple]').forEach(function (el) {
+    document.querySelectorAll("select.tom-dark").forEach(function (el) {
         new TomSelect(el, {
             plugins: ['remove_button'],
-            placeholder: 'Wybierz kategorie...',
+            persist: false,
             create: false,
-            sortField: { field: "text", direction: "asc" },
+            hidePlaceholder: true,
             dropdownParent: 'body'
         });
     });
-});
+});

static/js/clickable_row.js

@@ -6,7 +6,6 @@ document.addEventListener("DOMContentLoaded", () => {
     const row = e.target.closest('.clickable-item');
     if (!row || !itemsContainer.contains(row)) return;
 
-    // Ignoruj kliknięcia w przyciski i inputy
     if (e.target.closest('button') || e.target.tagName.toLowerCase() === 'input') {
       return;
     }

static/js/expense_chart.js

@@ -1,11 +1,14 @@
 document.addEventListener("DOMContentLoaded", function () {
     let expensesChart = null;
-    let selectedCategoryId = "";
-    let categorySplit = false; // <-- nowy tryb
+    let categorySplit = true;
     const rangeLabel = document.getElementById("chartRangeLabel");
 
-    function loadExpenses(range = "monthly", startDate = null, endDate = null) {
-        let url = '/user_expenses_data?range=' + range;
+    if (typeof window.selectedCategoryId === "undefined") {
+        window.selectedCategoryId = "";
+    }
+
+    function loadExpenses(range = "last30days", startDate = null, endDate = null) {
+        let url = '/expenses_data?range=' + range;
         const showAllCheckbox = document.getElementById("showAllLists");
         if (showAllCheckbox && showAllCheckbox.checked) {
             url += '&show_all=true';
@@ -13,8 +16,8 @@ document.addEventListener("DOMContentLoaded", function () {
         if (startDate && endDate) {
             url += `&start_date=${startDate}&end_date=${endDate}`;
         }
-        if (selectedCategoryId) {
-            url += `&category_id=${selectedCategoryId}`;
+        if (window.selectedCategoryId) {
+            url += `&category_id=${window.selectedCategoryId}`;
         }
         if (categorySplit) {
             url += '&by_category=true';
@@ -29,18 +32,27 @@ document.addEventListener("DOMContentLoaded", function () {
                     expensesChart.destroy();
                 }
 
+                const tooltipOptions = {
+                    mode: 'index',
+                    intersect: false,
+                    callbacks: {
+                        label: function (context) {
+                            if (context.parsed.y === 0) {
+                                return ''; // pomija kategorie o wartości 0
+                            }
+                            return context.dataset.label + ': ' + context.parsed.y;
+                        }
+                    }
+                };
+
                 if (categorySplit) {
-                    // Tryb z podziałem na kategorie
                     expensesChart = new Chart(ctx, {
                         type: 'bar',
-                        data: {
-                            labels: data.labels,
-                            datasets: data.datasets // <-- gotowe z backendu
-                        },
+                        data: { labels: data.labels, datasets: data.datasets },
                         options: {
                             responsive: true,
                             plugins: {
-                                tooltip: { mode: 'index', intersect: false },
+                                tooltip: tooltipOptions,
                                 legend: { position: 'top' }
                             },
                             scales: {
@@ -50,7 +62,6 @@ document.addEventListener("DOMContentLoaded", function () {
                         }
                     });
                 } else {
-                    // Tryb zwykły
                     expensesChart = new Chart(ctx, {
                         type: 'bar',
                         data: {
@@ -63,6 +74,9 @@ document.addEventListener("DOMContentLoaded", function () {
                         },
                         options: {
                             responsive: true,
+                            plugins: {
+                                tooltip: tooltipOptions
+                            },
                             scales: { y: { beginAtZero: true } }
                         }
                     });
@@ -72,20 +86,23 @@ document.addEventListener("DOMContentLoaded", function () {
                     rangeLabel.textContent = `Widok: własny zakres (${startDate} → ${endDate})`;
                 } else {
                     let labelText = "";
-                    if (range === "monthly") labelText = "Widok: miesięczne";
+                    if (range === "last30days") labelText = "Widok: ostatnie 30 dni";
+                    else if (range === "currentmonth") labelText = "Widok: bieżący miesiąc";
+                    else if (range === "monthly") labelText = "Widok: miesięczne";
                     else if (range === "quarterly") labelText = "Widok: kwartalne";
                     else if (range === "halfyearly") labelText = "Widok: półroczne";
                     else if (range === "yearly") labelText = "Widok: roczne";
                     rangeLabel.textContent = labelText;
                 }
             })
-            .catch(error => {
-                console.error("Błąd pobierania danych:", error);
-            });
+            .catch(error => console.error("Błąd pobierania danych:", error));
     }
 
-    // Obsługa przycisku przełączania trybu
-    document.getElementById("toggleCategorySplit").addEventListener("click", function () {
+    // Udostępnienie globalne, żeby inne skrypty mogły wywołać reload
+    window.loadExpenses = loadExpenses;
+
+    const toggleBtn = document.getElementById("toggleCategorySplit");
+    toggleBtn.addEventListener("click", function () {
         categorySplit = !categorySplit;
         if (categorySplit) {
             this.textContent = "🔵 Pokaż całościowo";
@@ -96,12 +113,16 @@ document.addEventListener("DOMContentLoaded", function () {
             this.classList.remove("btn-outline-info");
             this.classList.add("btn-outline-warning");
         }
-        loadExpenses(); // przeładuj wykres
+        loadExpenses();
     });
 
-    // Reszta Twojego kodu bez zmian...
+    toggleBtn.textContent = "🔵 Pokaż całościowo";
+    toggleBtn.classList.remove("btn-outline-warning");
+    toggleBtn.classList.add("btn-outline-info");
+
     const startDateInput = document.getElementById("startDate");
     const endDateInput = document.getElementById("endDate");
+
     const today = new Date();
     const lastWeek = new Date(today);
     lastWeek.setDate(today.getDate() - 7);
@@ -109,8 +130,6 @@ document.addEventListener("DOMContentLoaded", function () {
     startDateInput.value = formatDate(lastWeek);
     endDateInput.value = formatDate(today);
 
-    loadExpenses();
-
     document.getElementById('customRangeBtn').addEventListener('click', function () {
         const startDate = startDateInput.value;
         const endDate = endDateInput.value;
@@ -127,16 +146,25 @@ document.addEventListener("DOMContentLoaded", function () {
             document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
             this.classList.add('active');
             const range = this.getAttribute('data-range');
-            loadExpenses(range);
+
+            if (range === "currentmonth") {
+                const today = new Date();
+                const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
+                const formatDate = (d) => d.toISOString().split('T')[0];
+                loadExpenses('custom', formatDate(firstDay), formatDate(today));
+            } else {
+                loadExpenses(range);
+            }
         });
     });
 
-    document.querySelectorAll('.category-filter').forEach(btn => {
-        btn.addEventListener('click', function () {
-            document.querySelectorAll('.category-filter').forEach(b => b.classList.remove('active'));
-            this.classList.add('active');
-            selectedCategoryId = this.dataset.categoryId || "";
-            loadExpenses();
-        });
+    // Automatyczne ładowanie danych po przełączeniu na zakładkę Wykres
+    document.getElementById('chart-tab').addEventListener('shown.bs.tab', function () {
+        loadExpenses();
     });
+
+    // Jeśli jesteśmy od razu na zakładce Wykres
+    if (document.getElementById('chart-tab').classList.contains('active')) {
+        loadExpenses("last30days");
+    }
 });

static/js/expense_tab.js

@@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", function () {
+    // Sprawdzamy, czy hash w URL to #chartTab
+    if (window.location.hash === "#chartTab") {
+        const chartTabTrigger = document.querySelector('#chart-tab');
+        if (chartTabTrigger) {
+            // Wymuszenie aktywacji zakładki Bootstrap
+            const tab = new bootstrap.Tab(chartTabTrigger);
+            tab.show();
+        }
+    }
+});

static/js/expense_table.js

@@ -0,0 +1,176 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const checkboxes = document.querySelectorAll('.list-checkbox');
+    const totalEl = document.getElementById('listsTotal');
+    const filterButtons = document.querySelectorAll('.range-btn');
+    const rows = document.querySelectorAll('#listsTableBody tr');
+    const categoryButtons = document.querySelectorAll('.category-filter');
+    const onlyWith = document.getElementById('onlyWithExpenses');
+
+    window.selectedCategoryId = "";
+    let initialLoad = true; // flaga - true tylko przy pierwszym wejściu
+
+    function updateTotal() {
+        let total = 0;
+        checkboxes.forEach(cb => {
+            const row = cb.closest('tr');
+            if (cb.checked && row.style.display !== 'none') {
+                total += parseFloat(cb.dataset.amount);
+            }
+        });
+        totalEl.textContent = total.toFixed(2) + ' PLN';
+    }
+
+    function getISOWeek(date) {
+        const target = new Date(date.valueOf());
+        const dayNr = (date.getDay() + 6) % 7;
+        target.setDate(target.getDate() - dayNr + 3);
+        const firstThursday = new Date(target.getFullYear(), 0, 4);
+        const dayDiff = (target - firstThursday) / 86400000;
+        return 1 + Math.floor(dayDiff / 7);
+    }
+
+    function filterByRange(range) {
+        const now = new Date();
+        const todayStr = now.toISOString().slice(0, 10);
+        const year = now.getFullYear();
+        const month = now.toISOString().slice(0, 7);
+        const week = `${year}-${String(getISOWeek(now)).padStart(2, '0')}`;
+
+        let startDate = null;
+        let endDate = null;
+
+        if (range === 'last30days') {
+            endDate = now;
+            startDate = new Date();
+            startDate.setDate(endDate.getDate() - 29);
+        }
+        if (range === 'currentmonth') {
+            startDate = new Date(year, now.getMonth(), 1);
+            endDate = now;
+        }
+
+        rows.forEach(row => {
+            const rDate = row.dataset.date;
+            const rMonth = row.dataset.month;
+            const rWeek = row.dataset.week;
+            const rYear = row.dataset.year;
+            const rowDateObj = new Date(rDate);
+
+            let show = true;
+            if (range === 'day') show = rDate === todayStr;
+            else if (range === 'month') show = rMonth === month;
+            else if (range === 'week') show = rWeek === week;
+            else if (range === 'year') show = rYear === String(year);
+            else if (range === 'all') show = true;
+            else if (range === 'last30days') show = rowDateObj >= startDate && rowDateObj <= endDate;
+            else if (range === 'currentmonth') show = rowDateObj >= startDate && rowDateObj <= endDate;
+
+            row.style.display = show ? '' : 'none';
+        });
+    }
+
+    function filterByLast30Days() {
+        filterByRange('last30days');
+    }
+
+    function applyExpenseFilter() {
+        if (!onlyWith || !onlyWith.checked) return;
+        rows.forEach(row => {
+            const amt = parseFloat(row.querySelector('.list-checkbox').dataset.amount || 0);
+            if (amt <= 0) row.style.display = 'none';
+        });
+    }
+
+    function applyCategoryFilter() {
+        if (!window.selectedCategoryId) return;
+
+        rows.forEach(row => {
+            const categoriesStr = row.dataset.categories || "";
+            const categories = categoriesStr ? categoriesStr.split(",") : [];
+
+            if (window.selectedCategoryId === "none") {
+                // Bez kategorii
+                if (categoriesStr.trim() !== "") {
+                    row.style.display = 'none';
+                }
+            } else {
+                // Normalne filtrowanie po ID kategorii
+                if (!categories.includes(String(window.selectedCategoryId))) {
+                    row.style.display = 'none';
+                }
+            }
+        });
+    }
+
+    // Obsługa checkboxów wierszy
+    checkboxes.forEach(cb => cb.addEventListener('change', updateTotal));
+
+    // Obsługa przycisków zakresu
+    filterButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            initialLoad = false; // po kliknięciu wyłączamy tryb startowy
+
+            filterButtons.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+
+            const range = btn.dataset.range;
+            filterByRange(range);
+            applyExpenseFilter();
+            applyCategoryFilter();
+            updateTotal();
+        });
+    });
+
+    // Checkbox "tylko z wydatkami"
+    if (onlyWith) {
+        onlyWith.addEventListener('change', () => {
+            if (initialLoad) {
+                filterByLast30Days();
+            } else {
+                const activeRange = document.querySelector('.range-btn.active');
+                if (activeRange) {
+                    filterByRange(activeRange.dataset.range);
+                }
+            }
+            applyExpenseFilter();
+            applyCategoryFilter();
+            updateTotal();
+        });
+    }
+
+    // Obsługa kliknięcia w kategorię
+    categoryButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            categoryButtons.forEach(b => b.classList.remove('btn-success', 'active'));
+            categoryButtons.forEach(b => b.classList.add('btn-outline-light'));
+            btn.classList.remove('btn-outline-light');
+            btn.classList.add('btn-success', 'active');
+
+            window.selectedCategoryId = btn.dataset.categoryId || "";
+
+            if (initialLoad) {
+                filterByLast30Days();
+            } else {
+                const activeRange = document.querySelector('.range-btn.active');
+                if (activeRange) {
+                    filterByRange(activeRange.dataset.range);
+                }
+            }
+
+            applyExpenseFilter();
+            applyCategoryFilter();
+            updateTotal();
+
+            const chartTab = document.querySelector('#chart-tab');
+            if (chartTab && chartTab.classList.contains('active') && typeof window.loadExpenses === 'function') {
+                window.loadExpenses();
+            }
+        });
+    });
+
+    // Start – domyślnie ostatnie 30 dni
+    filterByLast30Days();
+    applyExpenseFilter();
+    applyCategoryFilter();
+    updateTotal();
+});

static/js/expenses.js

@@ -1,93 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
-    let expensesChart = null;
-    const rangeLabel = document.getElementById("chartRangeLabel");
-
-    function loadExpenses(range = "monthly", startDate = null, endDate = null) {
-        let url = '/admin/expenses_data?range=' + range;
-        if (startDate && endDate) {
-            url += `&start_date=${startDate}&end_date=${endDate}`;
-        }
-
-        fetch(url, { cache: "no-store" })
-            .then(response => response.json())
-            .then(data => {
-                const ctx = document.getElementById('expensesChart').getContext('2d');
-
-                if (expensesChart) {
-                    expensesChart.destroy();
-                }
-
-                expensesChart = new Chart(ctx, {
-                    type: 'bar',
-                    data: {
-                        labels: data.labels,
-                        datasets: [{
-                            label: 'Suma wydatków [PLN]',
-                            data: data.expenses,
-                            backgroundColor: '#0d6efd'
-                        }]
-                    },
-                    options: {
-                        scales: {
-                            y: {
-                                beginAtZero: true
-                            }
-                        }
-                    }
-                });
-
-                if (startDate && endDate) {
-                    rangeLabel.textContent = `Widok: własny zakres (${startDate} → ${endDate})`;
-                } else {
-                    let labelText = "";
-                    if (range === "monthly") labelText = "Widok: miesięczne";
-                    else if (range === "quarterly") labelText = "Widok: kwartalne";
-                    else if (range === "halfyearly") labelText = "Widok: półroczne";
-                    else if (range === "yearly") labelText = "Widok: roczne";
-                    rangeLabel.textContent = labelText;
-                }
-
-            })
-            .catch(error => {
-                console.error("Błąd pobierania danych:", error);
-            });
-    }
-
-    document.getElementById('loadExpensesBtn').addEventListener('click', function () {
-        loadExpenses();
-    });
-
-    document.querySelectorAll('.range-btn').forEach(btn => {
-        btn.addEventListener('click', function () {
-            document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
-            this.classList.add('active');
-            const range = this.getAttribute('data-range');
-            loadExpenses(range);
-        });
-    });
-
-    document.getElementById('customRangeBtn').addEventListener('click', function () {
-        const startDate = document.getElementById('startDate').value;
-        const endDate = document.getElementById('endDate').value;
-        if (startDate && endDate) {
-            document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
-            loadExpenses('custom', startDate, endDate);
-        } else {
-            alert("Proszę wybrać obie daty!");
-        }
-    });
-});
-
-document.addEventListener("DOMContentLoaded", function () {
-    const startDateInput = document.getElementById("startDate");
-    const endDateInput = document.getElementById("endDate");
-
-    const today = new Date();
-    const threeDaysAgo = new Date(today);
-    threeDaysAgo.setDate(today.getDate() - 7);
-
-    const formatDate = (d) => d.toISOString().split('T')[0];
-
-    startDateInput.value = formatDate(threeDaysAgo);
-    endDateInput.value = formatDate(today);
-});

static/js/functions.js

@@ -20,45 +20,43 @@ function updateItemState(itemId, isChecked) {
 }
 
 function updateProgressBar() {
+  const barPurchased = document.getElementById('progress-bar-purchased');
+  const barNotPurchased = document.getElementById('progress-bar-not-purchased');
+  const barRemaining = document.getElementById('progress-bar-remaining');
+  const progressLabel = document.getElementById('progress-label');
+  const percentValueEl = document.getElementById('percent-value');
+
+  if (!barPurchased || !barNotPurchased || !barRemaining || !progressLabel) {
+    return;
+  }
+
   const items = document.querySelectorAll('#items li');
   const total = items.length;
+
   const purchased = Array.from(items).filter(li => li.classList.contains('bg-success')).length;
+  const notPurchased = Array.from(items).filter(li => li.classList.contains('bg-warning')).length;
+  const remaining = total - purchased - notPurchased;
+
+  const percentPurchased = total > 0 ? (purchased / total) * 100 : 0;
+  const percentNotPurchased = total > 0 ? (notPurchased / total) * 100 : 0;
+  const percentRemaining = total > 0 ? (remaining / total) * 100 : 0;
+
   const percent = total > 0 ? Math.round((purchased / total) * 100) : 0;
 
-  // Pasek postępu
-  const progressBar = document.getElementById('progress-bar');
-  if (progressBar) {
-    progressBar.style.width = `${percent}%`;
-    progressBar.setAttribute('aria-valuenow', percent);
-    progressBar.textContent = percent > 0 ? `${percent}%` : ''; // opcjonalnie
-  }
+  barPurchased.style.width = `${percentPurchased}%`;
+  barNotPurchased.style.width = `${percentNotPurchased}%`;
+  barRemaining.style.width = `${percentRemaining}%`;
 
-  // Label na pasku postępu
-  const progressLabel = document.getElementById('progress-label');
-  if (progressLabel) {
-    progressLabel.textContent = `${percent}%`;
-    if (percent === 0) {
-      progressLabel.style.display = 'inline';
-    } else {
-      progressLabel.style.display = 'none';
-    }
-    // Kolor tekstu labela
-    if (percent < 50) {
-      progressLabel.classList.remove('text-dark');
-      progressLabel.classList.add('text-white');
-    } else {
-      progressLabel.classList.remove('text-white');
-      progressLabel.classList.add('text-dark');
-    }
-  }
+  progressLabel.textContent = `${percent}%`;
+  progressLabel.classList.toggle('text-white', percent < 51);
+  progressLabel.classList.toggle('text-dark', percent >= 51);
 
-  // Nagłówek
-  const purchasedCount = document.getElementById('purchased-count');
-  if (purchasedCount) purchasedCount.textContent = purchased;
-  const totalCount = document.getElementById('total-count');
-  if (totalCount) totalCount.textContent = total;
-  const percentValue = document.getElementById('percent-value');
-  if (percentValue) percentValue.textContent = percent;
+  const purchasedCountEl = document.getElementById('purchased-count');
+  const totalCountEl = document.getElementById('total-count');
+
+  if (purchasedCountEl) purchasedCountEl.textContent = purchased;
+  if (totalCountEl) totalCountEl.textContent = total;
+  if (percentValueEl) percentValueEl.textContent = percent;
 }
 
 function addItem(listId) {
@@ -179,7 +177,6 @@ function openList(link) {
 }
 
 function applyHidePurchased(isInit = false) {
-  //console.log("applyHidePurchased: wywołana, isInit =", isInit);
   const toggle = document.getElementById('hidePurchasedToggle');
   if (!toggle) return;
   const hide = toggle.checked;
@@ -187,9 +184,11 @@ function applyHidePurchased(isInit = false) {
   const items = document.querySelectorAll('#items li');
 
   items.forEach(li => {
-    const isPurchased = li.classList.contains('bg-success');
+    const isCheckedItem =
+      li.classList.contains('bg-success') || // kupione
+      li.classList.contains('bg-warning');   // niekupione
 
-    if (isPurchased) {
+    if (isCheckedItem) {
       if (hide) {
         if (isInit) {
           // Jeśli inicjalizacja: od razu ukryj
@@ -210,7 +209,7 @@ function applyHidePurchased(isInit = false) {
         }, 10);
       }
     } else {
-      // Element niekupiony — zawsze pokazany
+      // Element nieoznaczony — zawsze pokazany
       li.classList.remove('hide-purchased', 'fade-out');
     }
   });

static/js/live.js

@@ -153,7 +153,10 @@ function setupList(listId, username) {
       countdownBtn.disabled = true;
       countdownBtn.textContent = '15s';
 
-      li.querySelector('.btn-group')?.prepend(countdownBtn);
+      const btnGroup = li.querySelector('.btn-group');
+      if (btnGroup) {
+        btnGroup.prepend(countdownBtn);
+      }
 
       let seconds = 15;
       const intervalId = setInterval(() => {
@@ -205,21 +208,10 @@ function setupList(listId, username) {
   });
 
   socket.on('note_updated', data => {
-    const idx = window.currentItems.findIndex(i => i.id === data.item_id);
-    if (idx !== -1) {
-      window.currentItems[idx].note = data.note;
-
-      const newItem = renderItem(window.currentItems[idx], true);
-      const oldItem = document.getElementById(`item-${data.item_id}`);
-      if (oldItem && newItem) {
-        oldItem.replaceWith(newItem);
-      }
-    }
-
+    socket.emit('request_full_list', { list_id: window.LIST_ID });
     showToast('Notatka dodana/zaktualizowana', 'success');
   });
 
-
   socket.on('item_edited', data => {
     const idx = window.currentItems.findIndex(i => i.id === data.item_id);
     if (idx !== -1) {

static/js/mass_add.js

@@ -76,10 +76,10 @@ document.addEventListener('DOMContentLoaded', function () {
           const btn = document.createElement('button');
           btn.className = 'btn btn-sm btn-primary ms-4';
           btn.textContent = '+';
+
           btn.onclick = () => {
             const quantity = parseInt(qty.value) || 1;
             socket.emit('add_item', { list_id: LIST_ID, name: name, quantity: quantity });
-            socket.emit('request_full_list', { list_id: LIST_ID });
           };
 
           li.appendChild(qtyWrapper);
@@ -95,23 +95,117 @@ document.addEventListener('DOMContentLoaded', function () {
 
   socket.on('item_added', data => {
     document.querySelectorAll('#mass-add-list li').forEach(li => {
-      const itemName = li.firstChild.textContent.trim();
+      const itemName = li.firstChild?.textContent.trim();
 
       if (normalize(itemName) === normalize(data.name) && !li.classList.contains('opacity-50')) {
-        while (li.firstChild) {
-          li.removeChild(li.firstChild);
-        }
-
-        li.textContent = data.name;
         li.classList.add('opacity-50');
 
-        const badge = document.createElement('span');
-        badge.className = 'badge bg-success ms-auto';
-        badge.textContent = 'Dodano';
-        li.appendChild(badge);
+        // Usuń poprzednie przyciski
+        li.querySelectorAll('button').forEach(btn => btn.remove());
+        const quantityControls = li.querySelector('.quantity-controls');
+        if (quantityControls) quantityControls.remove();
 
-        li.onclick = null;
+        // Badge "Dodano"
+        const badge = document.createElement('span');
+        badge.className = 'badge bg-success';
+        badge.textContent = 'Dodano';
+
+        // Grupowanie przycisku + licznika
+        const btnGroup = document.createElement('div');
+        btnGroup.className = 'btn-group btn-group-sm me-2';
+        btnGroup.role = 'group';
+
+        const undoBtn = document.createElement('button');
+        undoBtn.className = 'btn btn-outline-warning';
+        undoBtn.innerHTML = '⟳ Cofnij';
+
+        const timerBtn = document.createElement('button');
+        timerBtn.className = 'btn btn-outline-secondary disabled';
+        let secondsLeft = 15;
+        timerBtn.textContent = `${secondsLeft}s`;
+
+        btnGroup.appendChild(undoBtn);
+        btnGroup.appendChild(timerBtn);
+
+        // Kontener na prawą stronę
+        const rightWrapper = document.createElement('div');
+        rightWrapper.className = 'd-flex align-items-center gap-2 ms-auto';
+        rightWrapper.appendChild(btnGroup);
+        rightWrapper.appendChild(badge);
+        li.appendChild(rightWrapper);
+
+        // Odliczanie
+        const intervalId = setInterval(() => {
+          secondsLeft--;
+          if (secondsLeft > 0) {
+            timerBtn.textContent = `${secondsLeft}s`;
+          } else {
+            clearInterval(intervalId);
+            btnGroup.remove();
+          }
+        }, 1000);
+
+        // Obsługa cofnięcia
+        undoBtn.onclick = () => {
+          clearInterval(intervalId);
+          btnGroup.remove();
+          badge.remove();
+          li.classList.remove('opacity-50');
+
+          // Przywróć kontrolki ilości
+          const qtyWrapper = document.createElement('div');
+          qtyWrapper.className = 'd-flex align-items-center ms-2 quantity-controls';
+
+          const minusBtn = document.createElement('button');
+          minusBtn.type = 'button';
+          minusBtn.className = 'btn btn-outline-light btn-sm px-2';
+          minusBtn.textContent = '−';
+
+          const qty = document.createElement('input');
+          qty.type = 'number';
+          qty.min = 1;
+          qty.value = 1;
+          qty.className = 'form-control text-center p-1 rounded';
+          qty.style.width = '50px';
+          qty.style.margin = '0 2px';
+          qty.title = 'Ilość';
+
+          const plusBtn = document.createElement('button');
+          plusBtn.type = 'button';
+          plusBtn.className = 'btn btn-outline-light btn-sm px-2';
+          plusBtn.textContent = '+';
+
+          minusBtn.onclick = () => {
+            qty.value = Math.max(1, parseInt(qty.value) - 1);
+          };
+          plusBtn.onclick = () => {
+            qty.value = parseInt(qty.value) + 1;
+          };
+
+          qtyWrapper.append(minusBtn, qty, plusBtn);
+          li.appendChild(qtyWrapper);
+
+          // Dodaj przycisk dodawania
+          const addBtn = document.createElement('button');
+          addBtn.className = 'btn btn-sm btn-primary ms-4';
+          addBtn.textContent = '+';
+          addBtn.onclick = () => {
+            const quantity = parseInt(qty.value) || 1;
+            socket.emit('add_item', {
+              list_id: LIST_ID,
+              name: data.name,
+              quantity: quantity
+            });
+          };
+          li.appendChild(addBtn);
+
+          // Usuń z listy
+          socket.emit('delete_item', { item_id: data.id });
+        };
       }
     });
   });
+
+
 });
+

static/js/notes.js

@@ -1,10 +1,12 @@
-let currentItemId = null;
+window.currentItemId = window.currentItemId ?? null;
 
 window.openNoteModal = function (event, itemId) {
   event.stopPropagation();
-  currentItemId = itemId;
+  window.currentItemId = itemId;
   const noteEl = document.querySelector(`#item-${itemId} small.text-danger`);
-  document.getElementById('noteText').value = noteEl ? noteEl.innerText.replace(/\[|\]|Powód:/g, "").trim() : "";
+  document.getElementById('noteText').value = noteEl
+    ? noteEl.innerText.replace(/\[|\]|Powód:/g, "").trim()
+    : "";
   const modal = new bootstrap.Modal(document.getElementById('noteModal'));
   modal.show();
 };
@@ -13,11 +15,10 @@ function submitNote(e) {
   e.preventDefault();
   const text = document.getElementById('noteText').value;
 
-  if (currentItemId !== null) {
-    socket.emit('update_note', { item_id: currentItemId, note: text });
+  if (window.currentItemId !== null) {
+    socket.emit('update_note', { item_id: window.currentItemId, note: text });
 
     const modal = bootstrap.Modal.getInstance(document.getElementById('noteModal'));
     modal.hide();
   }
 }
-

static/js/preview_list_modal.js

@@ -0,0 +1,112 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const modalElement = document.getElementById("productPreviewModal");
+    const modal = new bootstrap.Modal(modalElement);
+
+    modalElement.addEventListener("hidden.bs.modal", function () {
+        document.querySelectorAll(".modal-backdrop").forEach((el) => el.remove());
+        document.body.classList.remove("modal-open");
+        document.body.style.overflow = "";
+    });
+
+    document.querySelectorAll(".preview-btn").forEach((btn) => {
+        btn.addEventListener("click", async () => {
+            const listId = btn.dataset.listId;
+            const modalTitle = document.getElementById("previewModalLabel");
+            const productList = document.getElementById("product-list");
+
+            modalTitle.textContent = "Ładowanie...";
+            productList.innerHTML = `
+        <li class="list-group-item bg-dark text-white">
+          ⏳ Ładowanie produktów...
+        </li>`;
+
+            modal.show();
+
+            try {
+                const res = await fetch(`/admin/list_items/${listId}`);
+                const data = await res.json();
+
+                modalTitle.textContent = `🛒 ${data.title}`;
+                productList.innerHTML = "";
+
+                // 🔢 PODSUMOWANIE
+                const summary = document.createElement("div");
+                summary.className = "mb-3";
+
+                const percent =
+                    data.total_count > 0
+                        ? Math.round((data.purchased_count / data.total_count) * 100)
+                        : 0;
+
+                summary.innerHTML = `
+          <p class="mb-1">📦 <strong>${data.total_count}</strong> produktów</p>
+          <p class="mb-1">✅ Kupione: <strong>${data.purchased_count}</strong> (${percent}%)</p>
+          <p class="mb-1">💸 Wydatek: <strong>${data.total_expense.toFixed(2)} zł</strong></p>
+          <hr class="my-2">
+        `;
+                productList.appendChild(summary);
+
+                // 🛒 LISTY PRODUKTÓW
+                const purchasedList = document.createElement("ul");
+                purchasedList.className = "list-group list-group-flush mb-3";
+
+                const notPurchasedList = document.createElement("ul");
+                notPurchasedList.className = "list-group list-group-flush";
+
+                let hasPurchased = false;
+                let hasUnpurchased = false;
+
+                data.items.forEach((item) => {
+                    const li = document.createElement("li");
+                    li.className =
+                        "list-group-item bg-dark text-white d-flex justify-content-between";
+                    li.innerHTML = `
+            <span>${item.name}</span>
+            <span class="badge ${item.purchased
+                            ? "bg-success"
+                            : item.not_purchased
+                                ? "bg-warning text-dark"
+                                : "bg-secondary"
+                        }">
+              x${item.quantity}
+            </span>`;
+
+                    if (item.purchased) {
+                        purchasedList.appendChild(li);
+                        hasPurchased = true;
+                    } else {
+                        notPurchasedList.appendChild(li);
+                        hasUnpurchased = true;
+                    }
+                });
+
+                if (hasPurchased) {
+                    const h5 = document.createElement("h6");
+                    h5.textContent = "✔️ Kupione";
+                    productList.appendChild(h5);
+                    productList.appendChild(purchasedList);
+                }
+
+                if (hasUnpurchased) {
+                    const h5 = document.createElement("h6");
+                    h5.textContent = "🚫 Niekupione / Nieoznaczone";
+                    productList.appendChild(h5);
+                    productList.appendChild(notPurchasedList);
+                }
+
+                if (!hasPurchased && !hasUnpurchased) {
+                    productList.innerHTML = `
+            <li class="list-group-item bg-dark text-muted fst-italic">
+              Brak produktów
+            </li>`;
+                }
+            } catch (err) {
+                modalTitle.textContent = "Błąd";
+                productList.innerHTML = `
+          <li class="list-group-item bg-dark text-danger">
+            ❌ Błąd podczas ładowania
+          </li>`;
+            }
+        });
+    });
+});

static/js/product_suggestion.js

@@ -1,76 +1,91 @@
+function bindSyncButton(button) {
+  button.addEventListener('click', function (e) {
+    e.preventDefault();
+
+    const itemId = button.getAttribute('data-item-id');
+    button.disabled = true;
+
+    fetch(`/admin/sync_suggestion/${itemId}`, {
+      method: 'POST',
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+      .then(response => response.json())
+      .then(data => {
+        showToast(data.message, data.success ? 'success' : 'danger');
+
+        if (data.success) {
+          button.innerText = '✅ Zsynchronizowano';
+          button.classList.remove('btn-outline-primary');
+          button.classList.add('btn-success');
+        } else {
+          button.disabled = false;
+        }
+      })
+      .catch(() => {
+        showToast('Błąd synchronizacji', 'danger');
+        button.disabled = false;
+      });
+  });
+}
+
+function bindDeleteButton(button) {
+  button.addEventListener('click', function (e) {
+    e.preventDefault();
+
+    const suggestionId = button.getAttribute('data-suggestion-id');
+    const row = button.closest('tr');
+    const itemId = button.getAttribute('data-item-id');
+    const nameBadge = row?.querySelector('.badge.bg-primary');
+    const itemName = nameBadge?.innerText.trim().toLowerCase();
+
+    button.disabled = true;
+
+    fetch(`/admin/delete_suggestion/${suggestionId}`, {
+      method: 'POST',
+      headers: {
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+      .then(response => response.json())
+      .then(data => {
+        showToast(data.message, data.success ? 'success' : 'danger');
+
+        if (!data.success || !row) {
+          button.disabled = false;
+          return;
+        }
+
+        const isProductRow = typeof itemId === 'string' && itemId !== '';
+        const cell = row.querySelector('td:last-child');
+        if (!cell) return;
+
+        if (isProductRow) {
+          cell.innerHTML = `<button class="btn btn-sm btn-outline-light sync-btn" data-item-id="${itemId}">🔄 Synchronizuj</button>`;
+          const syncBtn = cell.querySelector('.sync-btn');
+          if (syncBtn) bindSyncButton(syncBtn);
+        } else {
+          cell.innerHTML = '<span class="badge rounded-pill bg-warning opacity-75">Usunięto synchronizacje</span>';
+        }
+      })
+      .catch(() => {
+        showToast('Błąd usuwania sugestii', 'danger');
+        button.disabled = false;
+      });
+  });
+}
+
 document.addEventListener("DOMContentLoaded", function () {
-  // Odśwież eventy
   document.querySelectorAll('.sync-btn').forEach(btn => {
-    btn.replaceWith(btn.cloneNode(true));
+    const clone = btn.cloneNode(true);
+    btn.replaceWith(clone);
+    bindSyncButton(clone);
   });
+
   document.querySelectorAll('.delete-suggestion-btn').forEach(btn => {
-    btn.replaceWith(btn.cloneNode(true));
-  });
-
-  // Synchronizacja sugestii
-  document.querySelectorAll('.sync-btn').forEach(btn => {
-    btn.addEventListener('click', function (e) {
-      e.preventDefault();
-
-      const itemId = this.getAttribute('data-item-id');
-      const button = this;
-      button.disabled = true;
-
-      fetch(`/admin/sync_suggestion/${itemId}`, {
-        method: 'POST',
-        headers: {
-          'X-Requested-With': 'XMLHttpRequest'
-        }
-      })
-        .then(response => response.json())
-        .then(data => {
-          showToast(data.message, data.success ? 'success' : 'danger');
-
-          if (data.success) {
-            button.innerText = '✅ Zsynchronizowano';
-            button.classList.remove('btn-outline-primary');
-            button.classList.add('btn-success');
-          } else {
-            button.disabled = false;
-          }
-        })
-        .catch(() => {
-          showToast('Błąd synchronizacji', 'danger');
-          button.disabled = false;
-        });
-    });
-  });
-
-  // Usuwanie sugestii
-  document.querySelectorAll('.delete-suggestion-btn').forEach(btn => {
-    btn.addEventListener('click', function (e) {
-      e.preventDefault();
-
-      const suggestionId = this.getAttribute('data-suggestion-id');
-      const button = this;
-      button.disabled = true;
-
-      fetch(`/admin/delete_suggestion/${suggestionId}`, {
-        method: 'POST',
-        headers: {
-          'X-Requested-With': 'XMLHttpRequest'
-        }
-      })
-        .then(response => response.json())
-        .then(data => {
-          showToast(data.message, data.success ? 'success' : 'danger');
-
-          if (data.success) {
-            const row = button.closest('tr');
-            if (row) row.remove();
-          } else {
-            button.disabled = false;
-          }
-        })
-        .catch(() => {
-          showToast('Błąd usuwania sugestii', 'danger');
-          button.disabled = false;
-        });
-    });
+    const clone = btn.cloneNode(true);
+    btn.replaceWith(clone);
+    bindDeleteButton(clone);
   });
 });

static/js/receipt_upload.js

@@ -5,6 +5,7 @@ if (!window.receiptUploaderInitialized) {
     const form = document.getElementById("receiptForm");
     const inputCamera = document.getElementById("cameraInput");
     const inputGallery = document.getElementById("galleryInput");
+    const inputPDF = document.getElementById("pdfInput");
     const galleryBtn = document.getElementById("galleryBtn");
     const galleryBtnText = document.getElementById("galleryBtnText");
     const cameraBtn = document.getElementById("cameraBtn");
@@ -12,13 +13,13 @@ if (!window.receiptUploaderInitialized) {
     const progressBar = document.getElementById("progressBar");
     const gallery = document.getElementById("receiptGallery");
 
-    if (!form || !inputCamera || !inputGallery || !gallery) return;
+    if (!form || !gallery) return;
 
     const isDesktop = window.matchMedia("(pointer: fine)").matches;
 
     if (isDesktop) {
-      if (cameraBtn) cameraBtn.remove(); // całkowicie usuń przycisk
-      if (inputCamera) inputCamera.remove(); // oraz input
+      if (cameraBtn) cameraBtn.remove();
+      if (inputCamera) inputCamera.remove();
       if (galleryBtnText) galleryBtnText.textContent = "➕ Dodaj paragon";
     }
 
@@ -79,7 +80,6 @@ if (!window.receiptUploaderInitialized) {
                     }
                     lightbox = GLightbox({ selector: ".glightbox" });
 
-                    // Pokaż sekcję OCR jeśli była ukryta
                     const analysisBlock = document.getElementById("receiptAnalysisBlock");
                     if (analysisBlock) {
                       analysisBlock.classList.remove("d-none");
@@ -106,6 +106,7 @@ if (!window.receiptUploaderInitialized) {
 
     inputCamera?.addEventListener("change", () => handleFileUpload(inputCamera));
     inputGallery?.addEventListener("change", () => handleFileUpload(inputGallery));
+    inputPDF?.addEventListener("change", () => handleFileUpload(inputPDF));
   });
 
   window.receiptUploaderInitialized = true;

static/js/select.js

@@ -1,8 +1,8 @@
 document.addEventListener("DOMContentLoaded", function () {
   new TomSelect("#categories", {
     plugins: ['remove_button'],
-    maxItems: 3, // limit wyboru
-    placeholder: 'Wybierz kategorie...',
+    maxItems: 1,
+    placeholder: 'Wybierz jedną kategorie...',
     create: false,
     sortField: {
       field: "text",

static/js/select_all_table.js

@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const checkboxes = document.querySelectorAll('.list-checkbox');
+    const totalEl = document.getElementById('listsTotal');
+    const selectAllBtn = document.getElementById('selectAllBtn');
+    const deselectAllBtn = document.getElementById('deselectAllBtn');
+
+    function updateTotal() {
+        let total = 0;
+        checkboxes.forEach(cb => {
+            const row = cb.closest('tr');
+            if (cb.checked && row.style.display !== 'none') {
+                total += parseFloat(cb.dataset.amount);
+            }
+        });
+        totalEl.textContent = total.toFixed(2) + ' PLN';
+    }
+
+    selectAllBtn.addEventListener('click', () => {
+        checkboxes.forEach(cb => cb.checked = true);
+        updateTotal();
+        selectAllBtn.style.display = 'none';
+        deselectAllBtn.style.display = 'inline-block';
+    });
+
+    deselectAllBtn.addEventListener('click', () => {
+        checkboxes.forEach(cb => cb.checked = false);
+        updateTotal();
+        deselectAllBtn.style.display = 'none';
+        selectAllBtn.style.display = 'inline-block';
+    });
+
+    checkboxes.forEach(cb => {
+        cb.addEventListener('change', updateTotal);
+    });
+});

static/js/select_month.js

@@ -5,9 +5,9 @@ document.addEventListener("DOMContentLoaded", () => {
         const month = select.value;
         const url = new URL(window.location.href);
         if (month) {
-            url.searchParams.set("month", month);
+            url.searchParams.set("m", month);
         } else {
-            url.searchParams.delete("month");
+            url.searchParams.delete("m");
         }
         window.location.href = url.toString();
     });

static/js/sockets.js

@@ -82,13 +82,11 @@ socket.on('receipt_added', function (data) {
   const gallery = document.getElementById("receiptGallery");
   if (!gallery) return;
 
-  // Usuń placeholder, jeśli istnieje
   const alert = gallery.querySelector(".alert");
   if (alert) {
     alert.remove();
   }
 
-  // Sprawdź, czy już istnieje obraz z tym URL
   const existing = Array.from(gallery.querySelectorAll("img")).find(img => img.src === data.url);
   if (!existing) {
     const col = document.createElement("div");

static/js/sort_mode.js

@@ -11,12 +11,10 @@ function enableSortMode() {
     const listId = window.LIST_ID;
     if (!itemsContainer || !listId) return;
 
-    // Odśwież widok listy z uchwytami (☰)
     if (window.currentItems) {
         updateListSmoothly(window.currentItems);
     }
 
-    // Poczekaj na DOM po odświeżeniu listy
     setTimeout(() => {
         if (sortable) sortable.destroy();
 

static/js/toggle_button.js

@@ -1,11 +1,8 @@
 document.addEventListener("DOMContentLoaded", function () {
     const toggleBtn = document.getElementById("tempToggle");
     const hiddenInput = document.getElementById("temporaryHidden");
-
-    // Inicjalizacja tooltipa
     const tooltip = new bootstrap.Tooltip(toggleBtn);
 
-    // Funkcja aktualizująca wygląd
     function updateToggle(isActive) {
         if (isActive) {
             toggleBtn.classList.remove("btn-outline-secondary");
@@ -18,11 +15,9 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     }
 
-    // Inicjalizacja stanu
     let active = toggleBtn.getAttribute("data-active") === "1";
     updateToggle(active);
 
-    // Obsługa kliknięcia
     toggleBtn.addEventListener("click", function () {
         active = !active;
         toggleBtn.setAttribute("data-active", active ? "1" : "0");

static/js/user_expense_category.js

@@ -1,23 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
-    const categoryButtons = document.querySelectorAll(".category-filter");
-    const rows = document.querySelectorAll("#listsTableBody tr");
-
-    categoryButtons.forEach(btn => {
-        btn.addEventListener("click", function () {
-            const selectedCat = this.dataset.category;
-
-            // Zmiana stylu przycisku aktywnego
-            categoryButtons.forEach(b => b.classList.remove("active"));
-            this.classList.add("active");
-
-            rows.forEach(row => {
-                const rowCats = row.dataset.categories ? row.dataset.categories.split(",") : [];
-                if (selectedCat === "all" || rowCats.includes(selectedCat)) {
-                    row.style.display = "";
-                } else {
-                    row.style.display = "none";
-                }
-            });
-        });
-    });
-});

static/js/user_expense_lists.js

@@ -1,160 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
-    const checkboxes = document.querySelectorAll('.list-checkbox');
-    const totalEl = document.getElementById('listsTotal');
-    const filterButtons = document.querySelectorAll('.range-btn');
-    const rows = document.querySelectorAll('#listsTableBody tr');
-
-    const onlyWith = document.getElementById('onlyWithExpenses');
-    const customStart = document.getElementById('customStart');
-    const customEnd = document.getElementById('customEnd');
-
-    // Przywróć zapisane daty
-    if (localStorage.getItem('customStart')) {
-        customStart.value = localStorage.getItem('customStart');
-    }
-    if (localStorage.getItem('customEnd')) {
-        customEnd.value = localStorage.getItem('customEnd');
-    }
-
-    function updateTotal() {
-        let total = 0;
-        checkboxes.forEach(cb => {
-            const row = cb.closest('tr');
-            if (cb.checked && row.style.display !== 'none') {
-                total += parseFloat(cb.dataset.amount);
-            }
-        });
-
-        totalEl.textContent = total.toFixed(2) + ' PLN';
-        totalEl.parentElement.classList.add('animate__animated', 'animate__fadeIn');
-        setTimeout(() => {
-            totalEl.parentElement.classList.remove('animate__animated', 'animate__fadeIn');
-        }, 400);
-    }
-
-    checkboxes.forEach(cb => cb.addEventListener('change', updateTotal));
-
-    filterButtons.forEach(btn => {
-        btn.addEventListener('click', () => {
-            filterButtons.forEach(b => b.classList.remove('active'));
-            btn.classList.add('active');
-            const range = btn.dataset.range;
-
-            // Czyść lokalne daty przy kliknięciu zakresu
-            localStorage.removeItem('customStart');
-            localStorage.removeItem('customEnd');
-
-            const now = new Date();
-            const todayStr = now.toISOString().slice(0, 10);
-            const year = now.getFullYear();
-            const month = now.toISOString().slice(0, 7);
-            const week = `${year}-${String(getISOWeek(now)).padStart(2, '0')}`;
-
-            rows.forEach(row => {
-                const rDate = row.dataset.date;
-                const rMonth = row.dataset.month;
-                const rWeek = row.dataset.week;
-                const rYear = row.dataset.year;
-
-                let show = true;
-                if (range === 'day') show = rDate === todayStr;
-                if (range === 'month') show = rMonth === month;
-                if (range === 'week') show = rWeek === week;
-                if (range === 'year') show = rYear === String(year);
-
-                row.style.display = show ? '' : 'none';
-            });
-
-            applyExpenseFilter();
-            updateTotal();
-        });
-    });
-
-    function getISOWeek(date) {
-        const target = new Date(date.valueOf());
-        const dayNr = (date.getDay() + 6) % 7;
-        target.setDate(target.getDate() - dayNr + 3);
-        const firstThursday = new Date(target.getFullYear(), 0, 4);
-        const dayDiff = (target - firstThursday) / 86400000;
-        return 1 + Math.floor(dayDiff / 7);
-    }
-
-    document.getElementById('applyCustomRange').addEventListener('click', () => {
-        const start = customStart.value;
-        const end = customEnd.value;
-
-        // Zapamiętaj daty
-        localStorage.setItem('customStart', start);
-        localStorage.setItem('customEnd', end);
-
-        filterButtons.forEach(b => b.classList.remove('active'));
-
-        rows.forEach(row => {
-            const date = row.dataset.date;
-            const show = (!start || date >= start) && (!end || date <= end);
-            row.style.display = show ? '' : 'none';
-        });
-
-        applyExpenseFilter();
-        updateTotal();
-    });
-
-    if (onlyWith) {
-        onlyWith.addEventListener('change', () => {
-            applyExpenseFilter();
-            updateTotal();
-        });
-    }
-
-    function applyExpenseFilter() {
-        if (!onlyWith || !onlyWith.checked) return;
-        rows.forEach(row => {
-            const amt = parseFloat(row.querySelector('.list-checkbox').dataset.amount || 0);
-            if (amt <= 0) row.style.display = 'none';
-        });
-    }
-
-    // Domyślnie kliknij „Miesiąc”
-    const defaultBtn = document.querySelector('.range-btn[data-range="month"]');
-    if (defaultBtn && !customStart.value && !customEnd.value) {
-        defaultBtn.click();
-    }
-});
-
-document.addEventListener("DOMContentLoaded", function () {
-    const toggleBtn = document.getElementById("toggleAllCheckboxes");
-    let allChecked = false;
-
-    toggleBtn?.addEventListener("click", () => {
-        const checkboxes = document.querySelectorAll(".list-checkbox");
-        allChecked = !allChecked;
-
-        checkboxes.forEach(cb => {
-            cb.checked = allChecked;
-        });
-
-        toggleBtn.textContent = allChecked ? "🚫 Odznacz wszystkie" : "✅ Zaznacz wszystkie";
-        const updateTotalEvent = new Event('change');
-        checkboxes.forEach(cb => cb.dispatchEvent(updateTotalEvent));
-    });
-});
-
-document.getElementById("applyCustomRange")?.addEventListener("click", () => {
-    const start = document.getElementById("customStart")?.value;
-    const end = document.getElementById("customEnd")?.value;
-    if (start && end) {
-        const url = `/user_expenses?start_date=${start}&end_date=${end}`;
-        window.location.href = url;
-    }
-});
-
-document.getElementById("showAllLists").addEventListener("change", function () {
-    const checked = this.checked;
-    const url = new URL(window.location.href);
-    if (checked) {
-        url.searchParams.set("show_all", "true");
-    } else {
-        url.searchParams.delete("show_all");
-    }
-    window.location.href = url.toString();
-});

static/lib/js/tom-select.complete.min.js

@@ -441,4 +441,3 @@ i.call(e,t,s),l=!1})),e.hook("after","refreshOptions",(()=>{const t=e.lastValue
 var s
 c(t)?(s=e.render("loading_more",{query:t}))&&(s.setAttribute("data-selectable",""),o=s):t in r&&!n.querySelector(".no-results")&&(s=e.render("no_more_results",{query:t})),s&&(J(s,e.settings.optionClass),n.append(s))})),e.on("initialize",(()=>{a=Object.keys(e.options),n=e.dropdown_content,e.settings.render=Object.assign({},{loading_more:()=>'<div class="loading-more-results">Loading more results ... </div>',no_more_results:()=>'<div class="no-more-results">No more results</div>'},e.settings.render),n.addEventListener("scroll",(()=>{e.settings.shouldLoadMore.call(e)&&c(e.lastValue)&&(l||(l=!0,e.load.call(e,e.lastValue)))}))}))})),ce}))
 var tomSelect=function(e,t){return new TomSelect(e,t)}
-//# sourceMappingURL=tom-select.complete.min.js.map

templates/admin/admin_panel.html

@@ -61,7 +61,7 @@
             <span>{{ name }}</span>
             <span class="badge rounded-pill bg-secondary opacity-75">{{ count }}×</span>
           </div>
-          <div class="progress" style="height: 6px;">
+          <div class="progress bg-transparent" style=" height: 6px;">
             <div class="progress-bar bg-success" role="progressbar" style="width: {{ (count / max_count) * 100 }}%"
               aria-valuenow="{{ count }}" aria-valuemin="0" aria-valuemax="{{ max_count }}">
             </div>
@@ -118,18 +118,75 @@
           </tbody>
         </table>
 
-        <button type="button" class="btn btn-outline-primary w-100 mt-3" data-bs-toggle="modal"
-          data-bs-target="#expensesChartModal" id="loadExpensesBtn">
+        <a href="{{ url_for('expenses') }}#chartTab" class="btn btn-outline-info">
           📊 Pokaż wykres wydatków
-        </button>
+        </a>
+
       </div>
     </div>
   </div>
 </div>
 
+{# panel wyboru miesiąca zawsze widoczny #}
+<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
+
+  {# LEWA STRONA — przyciski ← → TYLKO gdy nie show_all #}
+  <div class="d-flex gap-2">
+    {% if not show_all %}
+    {% set current_date = now.replace(day=1) %}
+    {% set prev_month = (current_date - timedelta(days=1)).strftime('%Y-%m') %}
+    {% set next_month = (current_date + timedelta(days=31)).replace(day=1).strftime('%Y-%m') %}
+
+    {% if prev_month in month_options %}
+    <a href="{{ url_for('admin_panel', m=prev_month) }}" class="btn btn-outline-light btn-sm">
+      ← {{ prev_month }}
+    </a>
+    {% else %}
+    <button class="btn btn-outline-light btn-sm opacity-50" disabled>← {{ prev_month }}</button>
+    {% endif %}
+
+    {% if next_month in month_options %}
+    <a href="{{ url_for('admin_panel', m=next_month) }}" class="btn btn-outline-light btn-sm">
+      {{ next_month }} →
+    </a>
+    {% else %}
+    <button class="btn btn-outline-light btn-sm opacity-50" disabled>{{ next_month }} →</button>
+    {% endif %}
+    {% else %}
+    {# Tryb wszystkie miesiące — możemy pokazać skrót do bieżącego miesiąca #}
+    <a href="{{ url_for('admin_panel', m=now.strftime('%Y-%m')) }}" class="btn btn-outline-light btn-sm">
+      📅 Przejdź do bieżącego miesiąca
+    </a>
+    {% endif %}
+  </div>
+
+  {# PRAWA STRONA — picker miesięcy zawsze widoczny #}
+  <form method="get" class="m-0">
+    <div class="input-group input-group-sm">
+      <span class="input-group-text bg-secondary text-white">📅</span>
+      <select name="m" class="form-select bg-dark text-white border-secondary" onchange="this.form.submit()">
+        <option value="all" {% if show_all %}selected{% endif %}>Wszystkie miesiące</option>
+        {% for val in month_options %}
+        {% set date_obj = (val ~ '-01') | todatetime %}
+        <option value="{{ val }}" {% if month_str==val %}selected{% endif %}>
+          {{ date_obj.strftime('%B %Y')|capitalize }}
+        </option>
+        {% endfor %}
+      </select>
+    </div>
+  </form>
+</div>
+
 <div class="card bg-dark text-white mb-5">
   <div class="card-body">
-    <h3 class="mt-4">📄 Wszystkie listy zakupowe</h3>
+    <h3 class="mt-4">
+      📄 Listy zakupowe
+      {% if show_all %}
+      — <strong>wszystkie miesiące</strong>
+      {% else %}
+      — <strong>{{ month_str|replace('-', ' / ') }}</strong>
+      {% endif %}
+    </h3>
     <form method="post" action="{{ url_for('delete_selected_lists') }}">
       <div class="table-responsive">
         <table class="table table-dark table-striped align-middle sortable">
@@ -142,8 +199,8 @@
               <th>Utworzono</th>
               <th>Właściciel</th>
               <th>Produkty</th>
-              <th>Wypełnienie</th>
-              <th>Komentarze</th>
+              <th>Progress</th>
+              <th>Koment.</th>
               <th>Paragony</th>
               <th>Wydatki</th>
               <th>Akcje</th>
@@ -167,11 +224,11 @@
 
               <td>
                 {% if l.is_archived %}
-                <span class="badge bg-secondary">Archiwalna</span>
+                <span class="badge rounded-pill bg-secondary">Archiwalna</span>
                 {% elif e.expired %}
-                <span class="badge bg-warning text-dark">Wygasła</span>
+                <span class="badge rounded-pill bg-warning text-dark">Wygasła</span>
                 {% else %}
-                <span class="badge bg-success">Aktywna</span>
+                <span class="badge rounded-pill bg-success">Aktywna</span>
                 {% endif %}
               </td>
               <td>{{ l.created_at.strftime('%Y-%m-%d %H:%M') if l.created_at else '-' }}</td>
@@ -184,8 +241,8 @@
               </td>
               <td>{{ e.total_count }}</td>
               <td>
-                <div class="progress" style="height: 14px;">
-                  <div class="progress-bar 
+                <div class="progress bg-transparent" style=" height: 14px;">
+                  <div class="progress-bar fw-bold text-black text-cente
                       {% if e.percent >= 80 %}bg-success
                       {% elif e.percent >= 40 %}bg-warning
                       {% else %}bg-danger{% endif %}" role="progressbar" style="width: {{ e.percent }}%">
@@ -193,8 +250,8 @@
                   </div>
                 </div>
               </td>
-              <td><span class="badge bg-primary">{{ e.comments_count }}</span></td>
-              <td><span class="badge bg-secondary">{{ e.receipts_count }}</span></td>
+              <td><span class="badge rounded-pill bg-primary">{{ e.comments_count }}</span></td>
+              <td><span class="badge rounded-pill bg-secondary">{{ e.receipts_count }}</span></td>
               <td class="fw-bold 
                   {% if e.total_expense >= 500 %}text-danger
                   {% elif e.total_expense > 0 %}text-success{% endif %}">
@@ -204,73 +261,60 @@
                 -
                 {% endif %}
               </td>
-              <td class="d-flex flex-wrap gap-1">
-                <a href="{{ url_for('edit_list', list_id=l.id) }}" class="btn btn-sm btn-outline-primary">✏️ Edytuj</a>
-                <a href="{{ url_for('delete_list', list_id=l.id) }}" class="btn btn-sm btn-outline-danger"
-                  onclick="return confirm('Na pewno usunąć tę listę?')">🗑️ Usuń</a>
+              <td>
+                <div class="btn-group btn-group-sm" role="group">
+                  <a href="{{ url_for('edit_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light"
+                    title="Edytuj">✏️</a>
+                  <button type="button" class="btn btn-sm btn-outline-light preview-btn" data-list-id="{{ l.id }}"
+                    title="Podgląd produktów">
+                    👁️
+                  </button>
+                  <a href="{{ url_for('delete_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light"
+                    onclick="return confirm('Na pewno usunąć tę listę?')" title="Usuń">🗑️</a>
+                </div>
               </td>
             </tr>
             {% endfor %}
           </tbody>
         </table>
       </div>
-      <button type="submit" class="btn btn-danger mt-2">🗑️ Usuń zaznaczone listy</button>
+      <div class="d-flex justify-content-end mt-2">
+        <button type="submit" class="btn btn-danger">🗑️ Usuń zaznaczone listy</button>
+      </div>
     </form>
   </div>
 </div>
 
-
-<div class="modal fade" id="expensesChartModal" tabindex="-1" aria-labelledby="expensesChartModalLabel"
-  aria-hidden="true">
-  <div class="modal-dialog modal-xl modal-dialog-centered">
-    <div class="modal-content bg-dark text-white rounded">
-      <div class="modal-header border-0">
-        <div>
-          <h5 class="modal-title m-0" id="expensesChartModalLabel">📊 Wydatki</h5>
-          <small id="chartRangeLabel" class="text-muted">Widok: miesięczne</small>
-        </div>
-        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
-      </div>
-      <div class="modal-body pt-0">
-        <div class="d-flex flex-wrap gap-2 mb-3">
-          <button class="btn btn-outline-light btn-sm range-btn active" data-range="monthly">📅 Miesięczne</button>
-          <button class="btn btn-outline-light btn-sm range-btn" data-range="quarterly">📊 Kwartalne</button>
-          <button class="btn btn-outline-light btn-sm range-btn" data-range="halfyearly">🗓️ Półroczne</button>
-          <button class="btn btn-outline-light btn-sm range-btn" data-range="yearly">📆 Roczne</button>
-        </div>
-
-        <div class="input-group input-group-sm mb-3 w-100" style="max-width: 570px;">
-          <span class="input-group-text bg-secondary text-white border-secondary">Od</span>
-          <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="startDate">
-          <span class="input-group-text bg-secondary text-white border-secondary">Do</span>
-          <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="endDate">
-          <button class="btn btn-outline-success" id="customRangeBtn">Pokaż dane z zakresu 📅</button>
-        </div>
-
-        <div class="bg-dark rounded p-2">
-          <canvas id="expensesChart" height="100"></canvas>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-{% block scripts %}
-<script src="{{ url_for('static_bp.serve_js_lib', filename='chart.js') }}"></script>
-<script>
-  document.getElementById('select-all').addEventListener('click', function () {
-    const checkboxes = document.querySelectorAll('input[name="list_ids"]');
-    checkboxes.forEach(cb => cb.checked = this.checked);
-  });
-</script>
-<script src="{{ url_for('static_bp.serve_js', filename='expenses.js') }}"></script>
-
-{% endblock %}
-
 <div class="info-bar-fixed">
   Python: {{ python_version.split()[0] }} | {{ system_info }} | RAM app: {{ app_memory }} |
   DB: {{ db_info.engine|upper }}{% if db_info.version %} v{{ db_info.version[0] }}{% endif %} |
   Tabele: {{ table_count }} | Rekordy: {{ record_total }} |
   Uptime: {{ uptime_minutes }} min
 </div>
+
+<!-- Modal podglądu produktów -->
+<div class="modal fade" id="productPreviewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content bg-dark text-white">
+      <div class="modal-header">
+        <h5 class="modal-title" id="previewModalLabel">Podgląd produktów</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+      </div>
+      <div class="modal-body">
+        <ul id="product-list" class="list-group list-group-flush"></ul>
+      </div>
+    </div>
+  </div>
+</div>
+
+{% block scripts %}
+<script>
+  document.getElementById('select-all').addEventListener('click', function () {
+    const checkboxes = document.querySelectorAll('input[name="list_ids"]');
+    checkboxes.forEach(cb => cb.checked = this.checked);
+  });
+</script>
+<script src="{{ url_for('static_bp.serve_js', filename='preview_list_modal.js') }}"></script>
+{% endblock %}
+
 {% endblock %}

templates/admin/edit_list.html

@@ -4,7 +4,7 @@
 
 <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
   <h2 class="mb-2">🛠️ Edytuj listę #{{ list.id }}</h2>
-  <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót</a>
+  <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
 </div>
 
 <div class="card bg-dark text-white mb-5">
@@ -13,75 +13,93 @@
     <form method="post" class="mt-3">
       <input type="hidden" name="action" value="save">
 
+      <!-- Nazwa listy -->
       <div class="mb-3">
-        <label for="title" class="form-label">Nazwa listy</label>
+        <label for="title" class="form-label">📝 Nazwa listy</label>
         <input type="text" class="form-control bg-dark text-white border-secondary rounded" id="title" name="title"
           value="{{ list.title }}" required>
       </div>
 
-      <div class="mb-3">
-        <label for="amount" class="form-label">Całkowity wydatek (PLN)</label>
-        <input type="number" step="0.01" min="0" class="form-control bg-dark text-white border-secondary rounded"
-          id="amount" name="amount" value="{{ '%.2f'|format(total_expense) }}">
+      <!-- Wydatek i właściciel -->
+      <div class="row mb-3">
+        <div class="col-md-6">
+          <label for="amount" class="form-label">💰 Całkowity wydatek (PLN)</label>
+          <input type="number" step="0.01" min="0" class="form-control bg-dark text-white border-secondary rounded"
+            id="amount" name="amount" value="{{ '%.2f'|format(total_expense) }}">
+        </div>
+
+        <div class="col-md-6">
+          <label for="owner_id" class="form-label">👤 Właściciel</label>
+          <select class="form-select bg-dark text-white border-secondary" id="owner_id" name="owner_id">
+            {% for user in users %}
+            <option value="{{ user.id }}" {% if list.owner_id==user.id %}selected{% endif %}>
+              {{ user.username }}
+            </option>
+            {% endfor %}
+          </select>
+        </div>
       </div>
 
-      <div class="mb-3">
-        <label for="owner_id" class="form-label">Właściciel</label>
-        <select class="form-select bg-dark text-white border-secondary" id="owner_id" name="owner_id">
-          {% for user in users %}
-          <option value="{{ user.id }}" {% if list.owner_id==user.id %}selected{% endif %}>{{ user.username }}</option>
-          {% endfor %}
-        </select>
+      <!-- Statusy -->
+      <div class="mb-4">
+        <label class="form-label">⚙️ Statusy listy</label>
+        <div class="d-flex flex-wrap gap-3">
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="archived" name="archived" {% if list.is_archived
+              %}checked{% endif %}>
+            <label class="form-check-label" for="archived">📦 Archiwalna</label>
+          </div>
+
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="public" name="public" {% if list.is_public %}checked{%
+              endif %}>
+            <label class="form-check-label" for="public">🌐 Publiczna</label>
+          </div>
+
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="temporary" name="temporary" {% if list.is_temporary
+              %}checked{% endif %}>
+            <label class="form-check-label" for="temporary">⏳ Tymczasowa (podaj date i godzine wygasania)</label>
+          </div>
+        </div>
       </div>
 
-      <div class="form-check form-switch mb-3">
-        <input class="form-check-input" type="checkbox" id="archived" name="archived" {% if list.is_archived %}checked{%
-          endif %}>
-        <label class="form-check-label" for="archived">Archiwalna</label>
-      </div>
 
-      <div class="form-check form-switch mb-4">
-        <input class="form-check-input" type="checkbox" id="public" name="public" {% if list.is_public %}checked{% endif
-          %}>
-        <label class="form-check-label" for="public">Publiczna</label>
-      </div>
-
-      <div class="form-check form-switch mb-3">
-        <input class="form-check-input" type="checkbox" id="temporary" name="temporary" {% if list.is_temporary
-          %}checked{% endif %}>
-        <label class="form-check-label" for="temporary">Tymczasowa</label>
-      </div>
-
-      <div class="row">
-        <div class="col-md-6 mb-3">
-          <label for="expires_date" class="form-label">Data wygaśnięcia</label>
+      <!-- Data/godzina wygaśnięcia -->
+      <div class="row mb-4">
+        <div class="col-md-6">
+          <label for="expires_date" class="form-label">📅 Data wygaśnięcia</label>
           <input type="date" class="form-control bg-dark text-white border-secondary rounded" id="expires_date"
             name="expires_date" value="{{ list.expires_at.strftime('%Y-%m-%d') if list.expires_at else '' }}">
         </div>
-        <div class="col-md-6 mb-3">
-          <label for="expires_time" class="form-label">Godzina wygaśnięcia</label>
+        <div class="col-md-6">
+          <label for="expires_time" class="form-label">⏰ Godzina wygaśnięcia</label>
           <input type="time" class="form-control bg-dark text-white border-secondary rounded" id="expires_time"
             name="expires_time" value="{{ list.expires_at.strftime('%H:%M') if list.expires_at else '' }}">
         </div>
       </div>
 
-      <div class="row mb-3">
+      <!-- Utworzono / Zmień miesiąc -->
+      <div class="row mb-4">
         <div class="col-md-6">
-          <label class="form-label">Aktualna data utworzenia listy</label>
+          <label class="form-label">📆 Utworzono</label>
           <p class="form-control-plaintext text-white">
             {{ list.created_at.strftime('%Y-%m-%d') }}
           </p>
         </div>
         <div class="col-md-6">
-          <label for="created_month" class="form-label">Przenieś listę do miesiąca</label>
+          <label class="form-label">📁 Przenieś do miesiąca (format: rok-miesiąc np 2026-01)</label>
           <input type="month" id="created_month" name="created_month"
             class="form-control bg-dark text-white border-secondary rounded">
         </div>
       </div>
 
+      <!-- Kategorie -->
       <div class="mb-4">
-        <label class="form-label">Kategorie</label>
-        <select id="categories" name="categories" multiple>
+        <label for="categories" class="form-label">🏷️ Kategorie</label>
+        <select id="categories" name="categories"
+          class="form-select tom-dark bg-dark text-white border-secondary rounded">
+          <option value="">– brak –</option>
           {% for cat in categories %}
           <option value="{{ cat.id }}" {% if cat.id in selected_categories %}selected{% endif %}>
             {{ cat.name }}
@@ -90,20 +108,23 @@
         </select>
       </div>
 
+      <!-- Link udostępnienia -->
       <div class="mb-4">
-        <label class="form-label">Link do udostępnienia</label>
+        <label class="form-label">🔗 Link do udostępnienia</label>
         <input type="text" class="form-control bg-dark text-white border-secondary rounded" readonly
           value="{{ request.url_root }}share/{{ list.share_token }}">
       </div>
 
       <button type="submit" class="btn btn-success me-2">💾 Zapisz zmiany</button>
     </form>
+
   </div>
 </div>
 
 <div class="card bg-dark text-white mb-5">
   <div class="card-body">
-    <h4 class="card-title">🛒 Produkty</h4>
+    <h4 class="card-title">📝 Produkty</h4>
+
     <form method="post" class="row g-2 mb-3">
       <input type="hidden" name="action" value="add_item">
       <div class="col-md-8">
@@ -123,10 +144,12 @@
       <table class="table table-dark table-bordered align-middle">
         <thead>
           <tr>
-            <th scope="col">Nazwa</th>
-            <th scope="col">Status</th>
-            <th scope="col">Oznaczenie</th>
-            <th scope="col">Usuń</th>
+            <th>Nazwa produktu</th>
+            <th>Notatka</th>
+            <th>Ilość</th>
+            <th>Aktualny stan</th>
+            <th>Akcja</th>
+            <th>Usuń</th>
           </tr>
         </thead>
         <tbody>
@@ -134,26 +157,21 @@
           <tr>
             <td>
               <strong>{{ item.name }}</strong>
-              <small class="text-small text-success">(x{{ item.quantity }})</small>
-
+            </td>
+            <td>
               {% if item.note %}
-              <div class="text-info small mt-1">
-                <strong>Notatka:</strong> {{ item.note }}
-              </div>
+              <div class="text-info small mt-1"><strong>Notatka:</strong> {{ item.note }}</div>
               {% endif %}
-
               {% if item.not_purchased_reason %}
-              <div class="text-warning small mt-1">
-                <strong>Powód:</strong> {{ item.not_purchased_reason }}
-              </div>
+              <div class="text-warning small mt-1"><strong>Powód:</strong> {{ item.not_purchased_reason }}</div>
               {% endif %}
-
-              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="mt-2">
+            </td>
+            <td>
+              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}">
                 <input type="hidden" name="action" value="edit_quantity">
                 <input type="hidden" name="item_id" value="{{ item.id }}">
-                <div class="input-group input-group-sm ">
-                  <input type="number" name="quantity"
-                    class="form-control bg-dark text-white border-secondary rounded-left" min="1"
+                <div class="input-group input-group-sm w-auto">
+                  <input type="number" name="quantity" class="form-control bg-dark text-white border-secondary" min="1"
                     value="{{ item.quantity }}">
                   <button type="submit" class="btn btn-outline-light">💾</button>
                 </div>
@@ -163,61 +181,45 @@
               {% if item.purchased %}
               <span class="badge bg-success">✔️ Kupiony</span>
               {% elif item.not_purchased %}
-              <span class="badge bg-warning text-dark">⚠️ Nie kupione</span>
+              <span class="badge bg-warning text-dark">⚠️ Nie kupiony</span>
               {% else %}
               <span class="badge bg-secondary">Nieoznaczony</span>
               {% endif %}
             </td>
             <td>
-              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-grid gap-1">
-                <input type="hidden" name="action" value="toggle_purchased">
+              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}">
                 <input type="hidden" name="item_id" value="{{ item.id }}">
-                {% if not item.not_purchased %}
-                <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-grid gap-1">
-                  <input type="hidden" name="action" value="toggle_purchased">
-                  <input type="hidden" name="item_id" value="{{ item.id }}">
-                  {% if item.purchased %}
-                  <button type="submit" class="btn btn-outline-warning btn-sm">🚫 Odznacz</button>
-                  {% else %}
-                  <button type="submit" class="btn btn-outline-success btn-sm">✅ Oznacz</button>
+                <div class="btn-group btn-group-sm d-flex gap-1">
+                  {% if not item.not_purchased %}
+                  <button type="submit" name="action" value="toggle_purchased" class="btn btn-outline-light w-100">
+                    {{ '🚫 Odznacz' if item.purchased else '✅ Kupiony' }}
+                  </button>
+                  <button type="submit" name="action" value="mark_not_purchased" class="btn btn-outline-light w-100">⚠️
+                    Nie kupiony</button>
                   {% endif %}
-                </form>
-                {% endif %}
+                  {% if item.not_purchased %}
+                  <button type="submit" name="action" value="unmark_not_purchased" class="btn btn-outline-light w-100">✅
+                    Przywróć jako nieoznaczone</button>
+                  {% endif %}
+                </div>
               </form>
-
-              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-grid gap-1 mt-1">
-                <input type="hidden" name="action" value="mark_not_purchased">
-                <input type="hidden" name="item_id" value="{{ item.id }}">
-                <button type="submit" class="btn btn-outline-warning btn-sm">⚠️ Nie kupione</button>
-              </form>
-
-              {% if item.not_purchased %}
-              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}"
-                class="d-grid gap-1 mt-3 border-top pt-2">
-                <input type="hidden" name="action" value="unmark_not_purchased">
-                <input type="hidden" name="item_id" value="{{ item.id }}">
-                <button type="submit" class="btn btn-outline-success btn-sm">✅ Przywróć na liste</button>
-              </form>
-              {% endif %}
             </td>
-
             <td>
-              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-inline">
+              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}">
                 <input type="hidden" name="action" value="delete_item">
                 <input type="hidden" name="item_id" value="{{ item.id }}">
-                <button type="submit" class="btn btn-danger btn-sm w-100">🗑️ Usuń</button>
+                <button type="submit" class="btn btn-outline-light btn-sm w-100">🗑️</button>
               </form>
             </td>
           </tr>
           {% else %}
           <tr>
-            <td colspan="4" class="text-center text-muted">Brak produktów.</td>
+            <td colspan="5" class="text-center text-muted">Brak produktów.</td>
           </tr>
           {% endfor %}
         </tbody>
       </table>
     </div>
-
   </div>
 </div>
 

templates/admin/list_products.html

@@ -4,59 +4,56 @@
 
 <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
   <h2 class="mb-2">🛍️ Produkty i sugestie</h2>
-  <a href="/admin" class="btn btn-outline-secondary">← Powrót do panelu</a>
+  <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
 </div>
 
 <div class="card bg-dark text-white mb-5">
   <div class="card-body">
-
-
     <div class="card-header d-flex justify-content-between align-items-center">
-      <h4 class="m-0">📦 Produkty (z synchronizacją sugestii)</h4>
-      <span class="badge bg-secondary">{{ items|length }} produktów</span>
+      <h4 class="m-0">📦 Produkty (z synchronizacją sugestii o unikalnych nazwach)</h4>
+      <span class="badge rounded-pill bg-info">{{ total_items }} produktów</span>
     </div>
     <div class="card-body p-0">
-      <table class="table table-dark table-striped align-middle m-0">
+      <table class="table table-dark table-striped align-middle sortable">
         <thead>
           <tr>
             <th>ID</th>
             <th>Nazwa</th>
-            <th>Dodana przez</th>
-            <th>Sugestia</th>
-            <th>Akcje</th>
+            <th>Dodany przez</th>
+            <th>Ilość użyć</th>
+            <th>Akcja</th>
           </tr>
         </thead>
         <tbody>
           {% for item in items %}
           <tr>
             <td>{{ item.id }}</td>
-            <td class="fw-bold">{{ item.name }}</td>
+            <td class="fw-bold"><span class="badge rounded-pill bg-primary">{{ item.name }}</span></td>
             <td>
-              {% if item.added_by %}
-              {{ users_dict.get(item.added_by, 'Nieznany') }}
+              {% if item.added_by and users_dict.get(item.added_by) %}
+              👤 {{ users_dict[item.added_by] }} ({{ item.added_by }})
               {% else %}
-              Gość
+              -
               {% endif %}
             </td>
+            <td><span class="badge rounded-pill bg-secondary">{{ usage_counts.get(item.name.lower(), 0) }}</span></td>
             <td>
-              {% set suggestion = suggestions_dict.get(item.name.lower()) %}
+              {% set clean_name = item.name | replace('\xa0', ' ') | trim | lower %}
+              {% set suggestion = suggestions_dict.get(clean_name) %}
               {% if suggestion %}
               ✅ Istnieje (ID: {{ suggestion.id }})
-              <button class="btn btn-sm btn-outline-danger ms-1 delete-suggestion-btn"
+              <button class="btn btn-sm btn-outline-light ms-1 delete-suggestion-btn"
                 data-suggestion-id="{{ suggestion.id }}">🗑️ Usuń</button>
               {% else %}
-              <button class="btn btn-sm btn-outline-primary sync-btn" data-item-id="{{ item.id }}">🔄
+              <button class="btn btn-sm btn-outline-light sync-btn" data-item-id="{{ item.id }}">🔄
                 Synchronizuj</button>
               {% endif %}
             </td>
-            <td>
-              <a href="/list/{{ item.list_id }}" class="btn btn-sm btn-outline-light mb-1">📄 Zobacz listę</a>
-            </td>
           </tr>
           {% endfor %}
           {% if items|length == 0 %}
           <tr>
-            <td colspan="5" class="text-center text-muted">Brak produktów do wyświetlenia.</td>
+            <td colspan="5" class="text-center">Pusta lista produktów.</td>
           </tr>
           {% endif %}
         </tbody>
@@ -69,11 +66,11 @@
   <div class="card-body">
     <div class="card-header d-flex justify-content-between align-items-center">
       <h4 class="m-0">💡 Wszystkie sugestie (poza powiązanymi)</h4>
-      <span class="badge bg-secondary">{{ suggestions_dict|length }} sugestii</span>
+      <span class="badge rounded-pill bg-info">{{ orphan_suggestions|length }} sugestii</span>
     </div>
     <div class="card-body p-0">
       {% set item_names = items | map(attribute='name') | map('lower') | list %}
-      <table class="table table-dark table-striped align-middle m-0">
+      <table class="table table-dark table-striped align-middle sortable">
         <thead>
           <tr>
             <th>ID</th>
@@ -82,21 +79,21 @@
           </tr>
         </thead>
         <tbody>
-          {% for suggestion in suggestions_dict.values() %}
+          {% for suggestion in orphan_suggestions %}
           {% if suggestion.name.lower() not in item_names %}
           <tr>
             <td>{{ suggestion.id }}</td>
-            <td class="fw-bold">{{ suggestion.name }}</td>
+            <td class="fw-bold"><span class="badge rounded-pill bg-primary">{{ suggestion.name }}</span></td>
             <td>
-              <button class="btn btn-sm btn-outline-danger delete-suggestion-btn"
+              <button class="btn btn-sm btn-outline-light delete-suggestion-btn"
                 data-suggestion-id="{{ suggestion.id }}">🗑️ Usuń</button>
             </td>
           </tr>
           {% endif %}
           {% endfor %}
-          {% if suggestions_dict|length == 0 %}
+          {% if orphan_suggestions|length == 0 %}
           <tr>
-            <td colspan="3" class="text-center text-muted">Brak sugestii do wyświetlenia.</td>
+            <td colspan="3" class="text-center">Brak sugestii do wyświetlenia.</td>
           </tr>
           {% endif %}
         </tbody>
@@ -105,6 +102,34 @@
   </div>
 </div>
 
+<div class="d-flex justify-content-between align-items-center mt-4">
+  <form method="get" class="d-flex align-items-center">
+    <label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
+    <select id="per_page" name="per_page" class="form-select form-select-sm me-2" onchange="this.form.submit()">
+      <option value="100" {% if per_page==100 %}selected{% endif %}>100</option>
+      <option value="200" {% if per_page==200 %}selected{% endif %}>200</option>
+      <option value="300" {% if per_page==300 %}selected{% endif %}>300</option>
+    </select>
+    <input type="hidden" name="page" value="{{ page }}">
+  </form>
+
+  <nav aria-label="Nawigacja stron">
+    <ul class="pagination pagination-dark mb-0">
+      <li class="page-item {% if page <= 1 %}disabled{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
+      </li>
+      {% for p in range(1, total_pages + 1) %}
+      <li class="page-item {% if p == page %}active{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{ p }}</a>
+      </li>
+      {% endfor %}
+      <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
 {% block scripts %}
 <script src="{{ url_for('static_bp.serve_js', filename='product_suggestion.js') }}"></script>
 {% endblock %}

templates/admin/mass_edit_categories.html

@@ -8,33 +8,64 @@
         <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
     </div>
 </div>
+<div class="alert alert-warning border-warning text-dark" role="alert">
+    <strong>Uwaga!</strong> Przypisanie więcej niż jednej kategorii do listy może zaburzyć
+    poprawne zliczanie wydatków, ponieważ wydatki tej listy będą jednocześnie
+    klasyfikowane do kilku kategorii.
+</div>
 
 <form method="post">
     <div class="card bg-dark text-white mb-5">
         <div class="card-body p-0">
             <div class="table-responsive">
-                <table class="table table-dark table-striped table-hover align-middle mb-0">
+                <table class="table table-dark table-striped align-middle sortable">
                     <thead>
                         <tr>
                             <th scope="col">ID</th>
                             <th scope="col">Nazwa listy</th>
                             <th scope="col">Właściciel</th>
                             <th scope="col">Data utworzenia</th>
+                            <th scope="col">Status</th>
+                            <th scope="col">Podgląd produktów</th>
                             <th scope="col">Kategorie</th>
                         </tr>
                     </thead>
                     <tbody>
-                        {% for lst in lists %}
+                        {% for l in lists %}
                         <tr>
-                            <td>{{ lst.id }}</td>
-                            <td>{{ lst.title }}</td>
-                            <td>{{ lst.owner.username if lst.owner else "?" }}</td>
-                            <td>{{ lst.created_at.strftime('%Y-%m-%d') }}</td>
+                            <td>{{ l.id }}</td>
+                            <td class="fw-bold align-middle">
+                                <a href="{{ url_for('view_list', list_id=l.id) }}" class="text-white">{{ l.title }}</a>
+                            </td>
+                            <td>
+                                {% if l.owner %}
+                                👤 {{ l.owner.username }} ({{ l.owner.id }})
+                                {% else %}
+                                -
+                                {% endif %}
+                            </td>
+                            <td>{{ l.created_at.strftime('%Y-%m-%d %H:%M') if l.created_at else '-' }}</td>
+                            <td>
+                                {% if l.is_archived %}<span class="badge rounded-pill bg-secondary">Archiwalna</span>{%
+                                endif %}
+                                {% if l.is_temporary %}<span
+                                    class="badge rounded-pill bg-warning text-dark">Tymczasowa</span>{%
+                                endif %}
+                                {% if l.is_public %}<span class="badge rounded-pill bg-success">Publiczna</span>{% else
+                                %}
+                                <span class="badge rounded-pill bg-dark">Prywatna</span>{% endif %}
+                            </td>
+                            <td>
+                                <button type="button" class="btn btn-sm btn-outline-info preview-btn"
+                                    data-list-id="{{ l.id }}">
+                                    🔍 Zobacz
+                                </button>
+                            </td>
                             <td style="min-width: 220px;">
-                                <select name="categories_{{ lst.id }}" multiple
-                                    class="form-select bg-dark text-white border-secondary">
+                                <select name="categories_{{ l.id }}" multiple
+                                    class="form-select tom-dark bg-dark text-white border-secondary rounded">
                                     {% for cat in categories %}
-                                    <option value="{{ cat.id }}" {% if cat in lst.categories %}selected{% endif %}>
+                                    <option value="{{ cat.id }}" {% if cat in l.categories %}selected{% endif %}>
                                         {{ cat.name }}
                                     </option>
                                     {% endfor %}
@@ -49,19 +80,59 @@
     </div>
 
     <div class="mt-3">
-        <button type="submit" class="btn btn-success">💾 Zapisz zmiany</button>
+        <button type="submit" class="btn btn-success">💾 Zapisz</button>
     </div>
 </form>
 
+<div class="d-flex justify-content-between align-items-center mt-4">
+    <form method="get" class="d-flex align-items-center">
+        <label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
+        <select id="per_page" name="per_page" class="form-select form-select-sm me-2" onchange="this.form.submit()">
+            <option value="25" {% if per_page==25 %}selected{% endif %}>25</option>
+            <option value="50" {% if per_page==50 %}selected{% endif %}>50</option>
+            <option value="100" {% if per_page==100 %}selected{% endif %}>100</option>
+        </select>
+        <input type="hidden" name="page" value="{{ page }}">
+    </form>
+
+    <nav aria-label="Nawigacja stron">
+        <ul class="pagination pagination-dark mb-0">
+            <li class="page-item {% if page <= 1 %}disabled{% endif %}">
+                <a class="page-link"
+                    href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
+            </li>
+            {% for p in range(1, total_pages + 1) %}
+            <li class="page-item {% if p == page %}active{% endif %}">
+                <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{ p }}</a>
+            </li>
+            {% endfor %}
+            <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
+                <a class="page-link"
+                    href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
+            </li>
+        </ul>
+    </nav>
+</div>
+
+
+<!-- Modal podglądu produktów -->
+<div class="modal fade" id="productPreviewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content bg-dark text-white">
+            <div class="modal-header">
+                <h5 class="modal-title" id="previewModalLabel">Podgląd produktów</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                    aria-label="Zamknij"></button>
+            </div>
+            <div class="modal-body">
+                <ul id="product-list" class="list-group list-group-flush"></ul>
+            </div>
+        </div>
+    </div>
+</div>
+
 {% endblock %}
 {% block scripts %}
-<script src="https://cdn.jsdelivr.net/npm/tom-select/dist/js/tom-select.complete.min.js"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='admin_mass_categories.js') }}"></script>
-
-<style>
-    .ts-dropdown {
-        z-index: 9999 !important;
-        /* 🔹 dropdown zawsze na wierzchu */
-    }
-</style>
+<script src="{{ url_for('static_bp.serve_js', filename='preview_list_modal.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='categories_select_admin.js') }}"></script>
 {% endblock %}

templates/admin/receipts.html

@@ -8,7 +8,7 @@
     <a href="{{ url_for('recalculate_filesizes_all') }}" class="btn btn-outline-primary me-2">
       Przelicz rozmiary plików
     </a>
-    <a href="/admin" class="btn btn-outline-secondary">← Powrót do panelu</a>
+    <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
   </div>
 </div>
 
@@ -66,6 +66,35 @@
   </div>
 </div>
 
+<div class="d-flex justify-content-between align-items-center mt-4">
+  <form method="get" class="d-flex align-items-center">
+    <label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
+    <select id="per_page" name="per_page" class="form-select form-select-sm me-2" onchange="this.form.submit()">
+      <option value="25" {% if per_page==25 %}selected{% endif %}>25</option>
+      <option value="50" {% if per_page==50 %}selected{% endif %}>50</option>
+      <option value="100" {% if per_page==100 %}selected{% endif %}>100</option>
+    </select>
+    <input type="hidden" name="page" value="{{ page }}">
+  </form>
+
+  <nav aria-label="Nawigacja stron">
+    <ul class="pagination pagination-dark mb-0">
+      <li class="page-item {% if page <= 1 %}disabled{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
+      </li>
+      {% for p in range(1, total_pages + 1) %}
+      <li class="page-item {% if p == page %}active{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{ p }}</a>
+      </li>
+      {% endfor %}
+      <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+
 {% if orphan_files and request.path.endswith('/all') %}
 <hr class="my-4">
 <h4 class="mt-3 mb-2 text-warning">Znalezione nieprzypisane pliki ({{ orphan_files_count }})</h4>
@@ -114,8 +143,6 @@
   </div>
 </div>
 
-
-
 {% block scripts %}
 <script src="{{ url_for('static_bp.serve_js', filename='receipt_crop.js') }}"></script>
 <script src="{{ url_for('static_bp.serve_js', filename='admin_receipt_crop.js') }}"></script>

templates/admin/user_management.html

@@ -4,7 +4,7 @@
 
 <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
   <h2 class="mb-2">👥 Zarządzanie użytkownikami</h2>
-  <a href="/admin" class="btn btn-outline-secondary">← Powrót do panelu</a>
+  <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
 </div>
 
 <!-- Formularz dodawania nowego użytkownika -->
@@ -47,9 +47,9 @@
           <td class="fw-bold">{{ user.username }}</td>
           <td>
             {% if user.is_admin %}
-            <span class="badge bg-primary">Admin</span>
+            <span class="badge rounded-pill bg-primary">Admin</span>
             {% else %}
-            <span class="badge bg-secondary">Użytkownik</span>
+            <span class="badge rounded-pill bg-secondary">Użytkownik</span>
             {% endif %}
           </td>
           <td>

templates/base.html

@@ -6,19 +6,28 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}Live Lista Zakupów{% endblock %}</title>
   <link rel="icon" type="image/svg+xml" href="{{ url_for('favicon') }}">
+
+  {# --- Style CSS ładowane tylko dla niezablokowanych --- #}
   {% if not is_blocked %}
   <link href="{{ url_for('static_bp.serve_css', filename='style.css') }}" rel="stylesheet">
   <link href="{{ url_for('static_bp.serve_css_lib', filename='glightbox.min.css') }}" rel="stylesheet">
   <link href="{{ url_for('static_bp.serve_css_lib', filename='sort_table.min.css') }}" rel="stylesheet">
   {% endif %}
+
+  {# --- Bootstrap zawsze --- #}
   <link href="{{ url_for('static_bp.serve_css_lib', filename='bootstrap.min.css') }}" rel="stylesheet">
-  {% if '/admin/receipts' in request.path or '/edit_my_list' in request.path %}
+
+  {# --- Cropper CSS tylko dla wybranych podstron --- #}
+  {% set substrings_cropper = ['/admin/receipts', '/edit_my_list'] %}
+  {% if substrings_cropper | select("in", request.path) | list | length > 0 %}
   <link href="{{ url_for('static_bp.serve_css_lib', filename='cropper.min.css') }}" rel="stylesheet">
   {% endif %}
-  {% if '/edit_my_list' or '/admin/edit_list' in request.path or '/admin/mass_edit_categories' %}
+
+  {# --- Tom Select CSS tylko dla wybranych podstron --- #}
+  {% set substrings_tomselect = ['/edit_my_list', '/admin/edit_list', '/admin/mass_edit_categories'] %}
+  {% if substrings_tomselect | select("in", request.path) | list | length > 0 %}
   <link href="{{ url_for('static_bp.serve_css_lib', filename='tom-select.bootstrap5.min.css') }}" rel="stylesheet">
   {% endif %}
-
 </head>
 
 <body class="bg-dark text-white">
@@ -33,12 +42,12 @@
       {% if current_user.is_authenticated %}
       <div class="d-flex justify-content-center align-items-center text-white small flex-wrap text-center">
         <span class="me-1">Zalogowany:</span>
-        <span class="badge bg-success">{{ current_user.username }}</span>
+        <span class="badge rounded-pill bg-success">{{ current_user.username }}</span>
       </div>
       {% else %}
       <div class="d-flex justify-content-center align-items-center text-white small flex-wrap text-center">
         <span class="me-1">Przeglądasz jako</span>
-        <span class="badge bg-info">gość</span>
+        <span class="badge rounded-pill bg-info">gość</span>
       </div>
       {% endif %}
       {% endif %}
@@ -49,7 +58,7 @@
         {% if current_user.is_admin %}
         <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-light btn-sm">⚙️</a>
         {% endif %}
-        <a href="{{ url_for('user_expenses') }}" class="btn btn-outline-light btn-sm">📊</a>
+        <a href="{{ url_for('expenses') }}" class="btn btn-outline-light btn-sm">📊</a>
         <a href="{{ url_for('logout') }}" class="btn btn-outline-light btn-sm">🚪</a>
         {% else %}
         <a href="{{ url_for('login') }}" class="btn btn-outline-light btn-sm">🔑 Zaloguj</a>
@@ -103,17 +112,19 @@
     });
   </script>
 
-  {% if '/admin/receipts' in request.path or '/edit_my_list' in request.path %}
+  {% set substrings = ['/admin/receipts', '/edit_my_list'] %}
+  {% if substrings | select("in", request.path) | list | length > 0 %}
   <script src="{{ url_for('static_bp.serve_js_lib', filename='cropper.min.js') }}"></script>
   {% endif %}
-  {% if '/edit_my_list' or '/admin/edit_list' or '/admin/mass_edit_categories' in request.path %}
+
+  {% set substrings = ['/edit_my_list', '/admin/edit_list', '/admin/mass_edit_categories'] %}
+  {% if substrings | select("in", request.path) | list | length > 0 %}
   <script src="{{ url_for('static_bp.serve_js_lib', filename='tom-select.complete.min.js') }}"></script>
   {% endif %}
 
   {% endif %}
 
   {% block scripts %}{% endblock %}
-
 </body>
 
 </html>

templates/edit_my_list.html

@@ -1,127 +1,150 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<h2>Edytuj listę: <strong>{{ list.title }}</strong></h2>
+<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
+  <h2>Edytuj listę: <strong>{{ list.title }}</strong></h2>
+  <a href="{{ url_for('main_page') }}" class="btn btn-outline-secondary">← Powrót</a>
+</div>
 
 <div class="card bg-dark text-white mb-5">
   <div class="card-body">
     <form method="post">
+
+      <!-- Nazwa listy -->
       <div class="mb-3">
-        <label for="title" class="form-label">Nazwa listy</label>
-        <input type="text" name="title" id="title" class="form-control bg-dark text-white border-secondary rounded"
+        <label for="title" class="form-label">📝 Nazwa listy</label>
+        <input type="text" class="form-control bg-dark text-white border-secondary rounded" id="title" name="title"
           value="{{ list.title }}" required>
       </div>
 
-      <div class="form-check mb-3">
-        <input class="form-check-input rounded" type="checkbox" name="is_public" id="is_public" {% if list.is_public
-          %}checked{% endif %}>
-        <label class="form-check-label" for="is_public">Lista publiczna</label>
+      <!-- Statusy listy -->
+      <div class="mb-4">
+        <label class="form-label">⚙️ Statusy listy</label>
+        <div class="d-flex flex-wrap gap-3">
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="public" name="is_public" {% if list.is_public
+              %}checked{% endif %}>
+            <label class="form-check-label" for="public">🌐 Publiczna</label>
+          </div>
+
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="temporary" name="is_temporary" {% if list.is_temporary
+              %}checked{% endif %}>
+            <label class="form-check-label" for="temporary">⏳ Tymczasowa</label>
+          </div>
+
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="archived" name="is_archived" {% if list.is_archived
+              %}checked{% endif %}>
+            <label class="form-check-label" for="archived">📦 Archiwalna</label>
+          </div>
+        </div>
       </div>
 
-      <div class="form-check mb-3">
-        <input class="form-check-input rounded" type="checkbox" name="is_temporary" id="is_temporary" {% if
-          list.is_temporary %}checked{% endif %}>
-        <label class="form-check-label" for="is_temporary">Lista tymczasowa</label>
-      </div>
-
-      <div class="row mb-3">
+      <!-- Data/Godzina wygaśnięcia -->
+      <div class="row mb-4">
         <div class="col-md-6">
-          <label for="expires_date" class="form-label">Data wygaśnięcia</label>
+          <label for="expires_date" class="form-label">📅 Data wygaśnięcia</label>
           <input type="date" class="form-control bg-dark text-white border-secondary rounded" id="expires_date"
             name="expires_date" value="{{ list.expires_at.strftime('%Y-%m-%d') if list.expires_at else '' }}">
         </div>
         <div class="col-md-6">
-          <label for="expires_time" class="form-label">Godzina wygaśnięcia</label>
+          <label for="expires_time" class="form-label">⏰ Godzina wygaśnięcia</label>
           <input type="time" class="form-control bg-dark text-white border-secondary rounded" id="expires_time"
             name="expires_time" value="{{ list.expires_at.strftime('%H:%M') if list.expires_at else '' }}">
         </div>
       </div>
 
-
+      <!-- Utworzono / Zmień miesiąc -->
       <div class="row mb-3">
         <div class="col-md-6">
-          <label class="form-label">Aktualna data utworzenia:</label>
+          <label class="form-label">📆 Utworzono:</label>
           <p class="form-control-plaintext text-white">
-            {{ list.created_at.strftime('%Y-%m-%d') }}
+            <span class="badge rounded-pill bg-success rounded-pill text-dark ms-1">
+              {{ list.created_at.strftime('%Y-%m-%d') }}
+            </span>
           </p>
         </div>
         <div class="col-md-6">
-          <label for="move_to_month" class="form-label">Przenieś listę do miesiąca</label>
+          <label class="form-label">📁 Przenieś do miesiąca (format: rok-miesiąc np 2026-01)</label>
           <input type="month" id="move_to_month" name="move_to_month"
             class="form-control bg-dark text-white border-secondary rounded">
         </div>
       </div>
 
-      <div class="form-check mb-3">
-        <input class="form-check-input" type="checkbox" name="is_archived" id="is_archived" {% if list.is_archived
-          %}checked{% endif %}>
-        <label class="form-check-label" for="is_archived">Zarchiwizowana</label>
+      <!-- Kategorie -->
+      <div class="mb-4">
+        <label for="categories" class="form-label">🏷️ Kategorie</label>
+        <select id="categories" name="categories"
+          class="form-select tom-dark bg-dark text-white border-secondary rounded">
+          <option value="">– brak –</option>
+          {% for cat in categories %}
+          <option value="{{ cat.id }}" {% if cat.id in selected_categories %}selected{% endif %}>
+            {{ cat.name }}
+          </option>
+          {% endfor %}
+        </select>
       </div>
 
-      <label for="title" class="form-label">Kategorie</label>
-      <select id="categories" name="categories" multiple>
-        {% for cat in categories %}
-        <option value="{{ cat.id }}" {% if cat.id in selected_categories %}selected{% endif %}>
-          {{ cat.name }}
-        </option>
-        {% endfor %}
-      </select>
-
+      <!-- Przyciski -->
       <div class="btn-group mt-4" role="group">
-        <button type="submit" class="btn btn-outline-success">Zapisz</button>
-        <a href="{{ url_for('main_page') }}" class="btn btn-outline-light">Anuluj</a>
+        <button type="submit" class="btn btn-outline-light">💾 Zapisz</button>
+        <a href="{{ url_for('main_page') }}" class="btn btn-outline-light">❌ Anuluj</a>
       </div>
+
     </form>
+  </div>
+</div>
 
-    {% if receipts %}
-    <hr class="my-4">
-    <h5>Paragony przypisane do tej listy</h5>
+{% if receipts %}
+<hr class="my-4">
+<h5>Paragony przypisane do tej listy</h5>
 
-    <div class="row">
-      {% for r in receipts %}
-      <div class="col-6 col-md-4 col-lg-3">
-        <div class="card bg-dark text-white h-100">
-          <a href="{{ url_for('uploaded_file', filename=r.filename) }}" class="glightbox" data-gallery="receipts"
-            data-title="{{ r.filename }}">
-            <img src="{{ url_for('uploaded_file', filename=r.filename) }}" class="card-img-top"
-              style="object-fit: cover; height: 200px;">
-          </a>
-          <div class="card-body text-center">
-            <p class="small text-truncate mb-1">{{ r.filename }}</p>
-            <p class="small mb-1">Wgrano: {{ r.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</p>
-            {% if r.filesize and r.filesize >= 1024 * 1024 %}
-            <p class="small mb-1">Rozmiar: {{ (r.filesize / 1024 / 1024) | round(2) }} MB</p>
-            {% elif r.filesize %}
-            <p class="small mb-1">Rozmiar: {{ (r.filesize / 1024) | round(1) }} kB</p>
-            {% else %}
-            <p class="small mb-1 text-muted">Brak danych o rozmiarze</p>
-            {% endif %}
+<div class="row">
+  {% for r in receipts %}
+  <div class="col-6 col-md-4 col-lg-3">
+    <div class="card bg-dark text-white h-100">
+      <a href="{{ url_for('uploaded_file', filename=r.filename) }}" class="glightbox" data-gallery="receipts"
+        data-title="{{ r.filename }}">
+        <img src="{{ url_for('uploaded_file', filename=r.filename) }}" class="card-img-top"
+          style="object-fit: cover; height: 200px;">
+      </a>
+      <div class="card-body text-center">
+        <p class="small text-truncate mb-1">{{ r.filename }}</p>
+        <p class="small mb-1">Wgrano: {{ r.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</p>
+        {% if r.filesize and r.filesize >= 1024 * 1024 %}
+        <p class="small mb-1">Rozmiar: {{ (r.filesize / 1024 / 1024) | round(2) }} MB</p>
+        {% elif r.filesize %}
+        <p class="small mb-1">Rozmiar: {{ (r.filesize / 1024) | round(1) }} kB</p>
+        {% else %}
+        <p class="small mb-1 text-muted">Brak danych o rozmiarze</p>
+        {% endif %}
 
-            <a href="{{ url_for('rotate_receipt_user', receipt_id=r.id) }}"
-              class="btn btn-sm btn-outline-warning w-100 mb-2">🔄 Obróć o 90°</a>
+        <a href="{{ url_for('rotate_receipt_user', receipt_id=r.id) }}"
+          class="btn btn-sm btn-outline-warning w-100 mb-2">🔄 Obróć o 90°</a>
 
-            <a href="#" class="btn btn-sm btn-outline-secondary w-100 mb-2" data-bs-toggle="modal"
-              data-bs-target="#userCropModal" data-img-src="{{ url_for('uploaded_file', filename=r.filename) }}"
-              data-receipt-id="{{ r.id }}" data-crop-endpoint="{{ url_for('crop_receipt_user') }}">
-              ✂️ Przytnij
-            </a>
-            <a href="{{ url_for('delete_receipt_user', receipt_id=r.id) }}" class="btn btn-sm btn-outline-danger w-100"
-              onclick="return confirm('Na pewno usunąć ten paragon?')">🗑️ Usuń</a>
-          </div>
-        </div>
+        <a href="#" class="btn btn-sm btn-outline-secondary w-100 mb-2" data-bs-toggle="modal"
+          data-bs-target="#userCropModal" data-img-src="{{ url_for('uploaded_file', filename=r.filename) }}"
+          data-receipt-id="{{ r.id }}" data-crop-endpoint="{{ url_for('crop_receipt_user') }}">
+          ✂️ Przytnij
+        </a>
+        <a href="{{ url_for('delete_receipt_user', receipt_id=r.id) }}" class="btn btn-sm btn-outline-danger w-100"
+          onclick="return confirm('Na pewno usunąć ten paragon?')">🗑️ Usuń</a>
       </div>
-      {% endfor %}
-    </div>
-    {% endif %}
-
-    <hr class="my-3">
-    <!-- Trigger przycisk -->
-    <div class="btn-group mt-4" role="group">
-      <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
-        🗑️ Usuń tę listę
-      </button>
     </div>
   </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+<hr class="my-3">
+<!-- Trigger przycisk -->
+<div class="btn-group mt-4" role="group">
+  <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
+    🗑️ Usuń tę listę
+  </button>
+</div>
+</div>
 </div>
 <!-- MODAL -->
 <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">

templates/expenses.html

@@ -7,7 +7,6 @@
   <a href="{{ url_for('main_page') }}" class="btn btn-outline-secondary">← Powrót</a>
 </div>
 
-
 <div class="d-flex justify-content-center mb-3">
   <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" id="showAllLists" {% if show_all %}checked{% endif %}>
@@ -17,31 +16,31 @@
   </div>
 </div>
 
+<!-- Przyciski kategorii -->
 <div class="d-flex flex-wrap gap-2 mb-3 justify-content-center">
-  <a href="{{ url_for('user_expenses') }}"
-    class="btn btn-sm {% if not selected_category %}btn-success{% else %}btn-outline-light{% endif %}">
+  <button type="button"
+    class="btn btn-sm category-filter {% if not selected_category %}btn-success{% else %}btn-outline-light{% endif %}"
+    data-category-id="">
     🌐 Wszystkie
-  </a>
+  </button>
   {% for cat in categories %}
-  <a href="{{ url_for('user_expenses', category_id=cat.id) }}"
-    class="btn btn-sm {% if selected_category == cat.id %}btn-success{% else %}btn-outline-light{% endif %}">
+  <button type="button"
+    class="btn btn-sm category-filter {% if selected_category == cat.id %}btn-success{% else %}btn-outline-light{% endif %}"
+    data-category-id="{{ cat.id }}">
     {{ cat.name }}
-  </a>
+  </button>
   {% endfor %}
 </div>
 
-
 <div class="card bg-dark text-white mb-5">
   <div class="card-body">
     <ul class="nav nav-tabs mb-3" id="expenseTabs" role="tablist">
-
       <li class="nav-item" role="presentation">
         <button class="nav-link active" id="lists-tab" data-bs-toggle="tab" data-bs-target="#listsTab" type="button"
           role="tab">
           📚 Listy
         </button>
       </li>
-
       <li class="nav-item" role="presentation">
         <button class="nav-link" id="chart-tab" data-bs-toggle="tab" data-bs-target="#chartTab" type="button"
           role="tab">
@@ -51,22 +50,20 @@
     </ul>
 
     <div class="tab-content" id="expenseTabsContent">
-
-      <!--  LISTY -->
+      <!-- LISTY -->
       <div class="tab-pane fade show active" id="listsTab" role="tabpanel">
         <div class="card bg-dark text-white mb-4">
           <div class="card-body">
-
             <div class="d-flex flex-wrap gap-2 mb-3 justify-content-center">
-              <button class="btn btn-outline-light btn-sm range-btn" data-range="day">🗓️ Dzień</button>
-              <button class="btn btn-outline-light btn-sm range-btn" data-range="week">📆 Tydzień</button>
-              <button class="btn btn-outline-light btn-sm range-btn active" data-range="month">📅 Miesiąc</button>
-              <button class="btn btn-outline-light btn-sm range-btn" data-range="year">📈 Rok</button>
-              <button class="btn btn-outline-light btn-sm range-btn" data-range="all">🌐 Wszystko</button>
+              <div class="btn-group btn-group-sm" role="group">
+                <button class="btn btn-outline-light range-btn" data-range="day">🗓️ Dzień</button>
+                <button class="btn btn-outline-light range-btn" data-range="week">📆 Tydzień</button>
+                <button class="btn btn-outline-light range-btn active" data-range="month">📅 Miesiąc</button>
+                <button class="btn btn-outline-light range-btn" data-range="year">📈 Rok</button>
+                <button class="btn btn-outline-light range-btn" data-range="all">🌐 Wszystko</button>
+              </div>
             </div>
 
-
-
             <div class="d-flex justify-content-center mb-3">
               <div class="input-group input-group-sm w-100" style="max-width: 570px;">
                 <span class="input-group-text bg-secondary text-white border-secondary">Od</span>
@@ -77,6 +74,7 @@
                 <button class="btn btn-outline-success" id="applyCustomRange">📊 Zastosuj zakres</button>
               </div>
             </div>
+
             <div class="d-flex justify-content-center mb-3">
               <div class="form-check form-switch">
                 <input class="form-check-input" type="checkbox" id="onlyWithExpenses">
@@ -86,11 +84,16 @@
               </div>
             </div>
 
-            <div class="d-flex justify-content-end mb-2">
-              <button id="toggleAllCheckboxes" class="btn btn-outline-light btn-sm">
-                ✅ Zaznacz wszystkie
-              </button>
+            <div class="d-flex justify-content-between align-items-center mb-2">
+              <div>
+                <button id="selectAllBtn" class="btn btn-sm btn-outline-light">Zaznacz wszystko</button>
+                <button id="deselectAllBtn" class="btn btn-sm btn-outline-light active" style="display: none;">Odznacz
+                  wszystko</button>
+              </div>
+              <h5 class="text-success m-0">💰 Suma: <span id="listsTotal">0.00 PLN</span></h5>
             </div>
+
+            <!-- Tabela list z możliwością filtrowania -->
             <div class="table-responsive">
               <table class="table table-dark table-striped align-middle sortable">
                 <thead>
@@ -106,8 +109,7 @@
                   <tr data-date="{{ list.created_at.strftime('%Y-%m-%d') }}"
                     data-week="{{ list.created_at.isocalendar()[0] }}-{{ '%02d' % list.created_at.isocalendar()[1] }}"
                     data-month="{{ list.created_at.strftime('%Y-%m') }}" data-year="{{ list.created_at.year }}"
-                    data-categories="{{ ','.join(list.categories | map('string')) }}">
-
+                    data-categories="{% if list.categories %}{{ ','.join(list.categories | map('string')) }}{% else %}{% endif %}">
 
                     <td>
                       <input type="checkbox" class="form-check-input list-checkbox"
@@ -116,7 +118,6 @@
                     <td>
                       <strong>{{ list.title }}</strong>
                       <br><small class="text-small">👤 {{ list.owner_username or '?' }}</small>
-
                     </td>
                     <td>{{ list.created_at.strftime('%Y-%m-%d') }}</td>
                     <td>{{ '%.2f'|format(list.total_expense) }}</td>
@@ -125,38 +126,34 @@
                 </tbody>
               </table>
             </div>
-
-            <hr>
-            <h5 class="text-success mt-3">💰 Suma zaznaczonych: <span id="listsTotal">0.00 PLN</span></h5>
           </div>
         </div>
       </div>
 
-
       <!-- WYKRES -->
       <div class="tab-pane fade" id="chartTab" role="tabpanel">
         <div class="card bg-dark text-white mb-4">
           <div class="card-body">
-
             <button class="btn btn-outline-light w-100 py-2 mb-2 d-flex align-items-center justify-content-center gap-2"
               id="toggleCategorySplit">
               🎨 Pokaż podział na kategorie
             </button>
-
             <p id="chartRangeLabel" class="fw-bold mb-3">Widok: miesięczne</p>
             <canvas id="expensesChart" height="120"></canvas>
           </div>
         </div>
 
-
         <div class="d-flex flex-wrap gap-2 mb-3 justify-content-center">
-          <button class="btn btn-outline-light btn-sm range-btn active" data-range="monthly">📅 Miesięczne</button>
-          <button class="btn btn-outline-light btn-sm range-btn" data-range="quarterly">📊 Kwartalne</button>
-          <button class="btn btn-outline-light btn-sm range-btn" data-range="halfyearly">🗓️ Półroczne</button>
-          <button class="btn btn-outline-light btn-sm range-btn" data-range="yearly">📈 Roczne</button>
+          <div class="btn-group btn-group-sm" role="group">
+            <button class="btn btn-outline-light range-btn active" data-range="last30days">🗓️ Ostatnie 30 dni</button>
+            <button class="btn btn-outline-light range-btn" data-range="currentmonth">📅 Bieżący miesiąc</button>
+            <button class="btn btn-outline-light range-btn" data-range="monthly">📆 Miesięczne</button>
+            <button class="btn btn-outline-light range-btn" data-range="quarterly">📊 Kwartalne</button>
+            <button class="btn btn-outline-light range-btn" data-range="halfyearly">🗓️ Półroczne</button>
+            <button class="btn btn-outline-light range-btn" data-range="yearly">📈 Roczne</button>
+          </div>
         </div>
 
-        <!-- Picker daty w formie input-group -->
         <div class="d-flex justify-content-center mb-4">
           <div class="input-group input-group-sm w-100" style="max-width: 570px;">
             <span class="input-group-text bg-secondary text-white border-secondary">Od</span>
@@ -166,19 +163,18 @@
             <button class="btn btn-outline-success" id="customRangeBtn">📊 Pokaż dane z zakresu</button>
           </div>
         </div>
-
-
       </div>
     </div>
-
   </div>
 </div>
-</div>
+
 {% endblock %}
 
 {% block scripts %}
 <script src="{{ url_for('static_bp.serve_js_lib', filename='chart.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='user_expenses.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='user_expense_lists.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='user_expense_category.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='expense_chart.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='expense_table.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='expense_tab.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='select_all_table.js') }}"></script>
+
 {% endblock %}

templates/list.html

@@ -6,11 +6,25 @@
   <h2 class="mb-2">
     Lista: <strong>{{ list.title }}</strong>
     {% if list.is_archived %}
-    <span class="badge bg-secondary ms-2">(Archiwalna)</span>
+    <span class="badge rounded-pill bg-secondary ms-2">(Archiwalna)</span>
+    {% endif %}
+
+    {% if list.category_badges %}
+    {% for cat in list.category_badges %}
+    <span class="badge rounded-pill rounded-pill text-dark ms-1" style="background-color: {{ cat.color }};
+                   font-size: 0.75rem;
+                   opacity: 0.85;">
+      {{ cat.name }}
+    </span>
+    {% endfor %}
+    {% else %}
+    <a href="{{ url_for('edit_my_list', list_id=list.id, next=url_for('view_list', list_id=list.id)) }}"
+      class="ms-2 text-light small fw-light" style="opacity: 0.9;">
+      ➕ Dodaj kategorię
+    </a>
     {% endif %}
   </h2>
 
-  <a href="/" class="btn btn-outline-secondary">← Powrót do list</a>
 </div>
 
 <a href="{{ request.url_root }}share/{{ list.share_token }}" class="btn btn-primary btn-sm w-100 mb-3" {% if not
@@ -27,7 +41,7 @@
         🙈 Lista jest ukryta przed gośćmi
         {% endif %}
       </strong>
-      <span id="share-url" class="badge bg-secondary text-wrap"
+      <span id="share-url" class="badge rounded-pill bg-secondary text-wrap"
         style="font-size: 0.7rem; {% if not list.is_public %}display: none;{% endif %}">
         {{ request.url_root }}share/{{ list.share_token }}
       </span>
@@ -59,14 +73,16 @@
 </h5>
 
 <div class="progress progress-dark position-relative">
-  <div id="progress-bar" class="progress-bar bg-warning text-dark" role="progressbar" style="width: {{ percent }}%;"
-    aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
+  <div id="progress-bar-purchased" class="progress-bar bg-success" role="progressbar" data-bs-toggle="tooltip"
+    title="Kupione produkty">
   </div>
-
-  <span id="progress-label" class="progress-label small fw-bold
-               {% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
-    {{ percent|round(0) }}%
-  </span>
+  <div id="progress-bar-not-purchased" class="progress-bar bg-warning" role="progressbar" data-bs-toggle="tooltip"
+    title="Oznaczone jako niekupione">
+  </div>
+  <div id="progress-bar-remaining" class="progress-bar bg-transparent" role="progressbar" data-bs-toggle="tooltip"
+    title="Pozostałe do kupienia">
+  </div>
+  <span id="progress-label" class="progress-label small fw-bold"></span>
 </div>
 
 {% if total_expense > 0 %}
@@ -104,7 +120,7 @@
       <span id="name-{{ item.id }}" class="text-white">
         {{ item.name }}
         {% if item.quantity and item.quantity > 1 %}
-        <span class="badge bg-secondary">x{{ item.quantity }}</span>
+        <span class="badge rounded-pill bg-secondary">x{{ item.quantity }}</span>
         {% endif %}
       </span>
 
@@ -203,7 +219,6 @@
   {% endif %}
 </div>
 
-
 <div class="modal fade" id="massAddModal" tabindex="-1" aria-labelledby="massAddModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg modal-dialog-scrollable">
     <div class="modal-content bg-dark text-white">

templates/list_share.html

@@ -6,19 +6,33 @@
   🛍️ {{ list.title }}
 
   {% if list.is_archived %}
-  <span class="badge bg-secondary ms-2">(Archiwalna)</span>
+  <span class="badge rounded-pill bg-secondary ms-2">(Archiwalna)</span>
   {% endif %}
+
   {% if total_expense > 0 %}
-  <span id="total-expense1" class="badge bg-success ms-2">
+  <span id="total-expense1" class="badge rounded-pill bg-success ms-2">
     💸 {{ '%.2f'|format(total_expense) }} PLN
   </span>
   {% else %}
-  <span id="total-expense" class="badge bg-secondary ms-2" style="display: none;">
+  <span id="total-expense" class="badge rounded-pill bg-secondary ms-2" style="display: none;">
     💸 0.00 PLN
   </span>
   {% endif %}
+
+  {# Kategorie - tylko wyświetlenie, bez linków #}
+  {% if list.category_badges %}
+  {% for cat in list.category_badges %}
+  <span class="badge rounded-pill rounded-pill text-dark ms-1" style="background-color: {{ cat.color }};
+                 font-size: 0.75rem;
+                 opacity: 0.85;">
+    {{ cat.name }}
+  </span>
+  {% endfor %}
+  {% endif %}
+
 </h2>
 
+
 <div class="form-check form-switch mb-3 d-flex justify-content-end">
   <input class="form-check-input" type="checkbox" id="hidePurchasedToggle">
   <label class="form-check-label ms-2" for="hidePurchasedToggle">Ukryj zaznaczone</label>
@@ -39,7 +53,7 @@
       <span id="name-{{ item.id }}" class="text-white">
         {{ item.name }}
         {% if item.quantity and item.quantity > 1 %}
-        <span class="badge bg-secondary">x{{ item.quantity }}</span>
+        <span class="badge rounded-pill bg-secondary">x{{ item.quantity }}</span>
         {% endif %}
       </span>
 
@@ -174,6 +188,12 @@
     </label>
     <input type="file" name="receipt" accept="image/*" class="d-none" id="galleryInput">
 
+    <label for="pdfInput" id="pdfBtn"
+      class="btn btn-outline-light w-100 py-2 mb-2 d-flex align-items-center justify-content-center gap-2">
+      📄 Dodaj PDF
+    </label>
+    <input type="file" name="receipt" accept="application/pdf" class="d-none" id="pdfInput">
+
     <div id="progressContainer" class="progress progress-dark rounded-3 overflow-hidden shadow-sm"
       style="height: 20px; display: none;">
       <div id="progressBar" class="progress-bar bg-success fw-bold text-white text-center" role="progressbar"

templates/main.html

@@ -33,21 +33,21 @@
 
 {% set month_names = ["styczeń", "luty", "marzec", "kwiecień", "maj", "czerwiec", "lipiec", "sierpień", "wrzesień",
 "październik", "listopad", "grudzień"] %}
-{% set selected_month = request.args.get('month') or now.strftime('%Y-%m') %}
 
 <!-- Pulpit: zwykły <select> -->
 <div class="d-none d-md-flex justify-content-end align-items-center flex-wrap gap-2 mb-3">
   <label for="monthSelect" class="text-white small mb-0">📅 Wybierz miesiąc:</label>
   <select id="monthSelect" class="form-select form-select-sm bg-dark text-white border-secondary"
     style="min-width: 180px;">
-    {% for offset in range(0, 6) %}
-    {% set d = (now - timedelta(days=offset * 30)) %}
-    {% set val = d.strftime('%Y-%m') %}
-    <option value="{{ val }}" {% if selected_month==val %}selected{% endif %}>
-      {{ month_names[d.month - 1] }} {{ d.year }}
+    {% for m in month_options %}
+    {% set year, month = m.split('-') %}
+    <option value="{{ m }}" {% if selected_month==m %}selected{% endif %}>
+      {{ month_names[month|int - 1] }} {{ year }}
     </option>
     {% endfor %}
-    <option value="">Wyświetl wszystko</option>
+    <option value="all" {% if selected_month=='all' %}selected{% endif %}>
+      Wyświetl wszystko
+    </option>
   </select>
 </div>
 
@@ -74,7 +74,16 @@
   {% set percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %}
   <li class="list-group-item bg-dark text-white">
     <div class="d-flex justify-content-between align-items-center flex-wrap w-100">
-      <span class="fw-bold">{{ l.title }} (Autor: Ty)</span>
+      <span class="fw-bold">
+        {{ l.title }} (Autor: Ty)
+        {% for cat in l.category_badges %}
+        <span class="badge rounded-pill text-dark ms-1" style="background-color: {{ cat.color }};
+                 font-size: 0.56rem;
+                 opacity: 0.85;">
+          {{ cat.name }}
+        </span>
+        {% endfor %}
+      </span>
 
       <div class="btn-group mt-2 mt-md-0" role="group">
         <a href="/list/{{ l.id }}" class="btn btn-sm btn-outline-light">📄 Otwórz</a>
@@ -90,17 +99,31 @@
     </div>
 
     <div class="progress progress-dark progress-thin mt-2 position-relative">
-      <div class="progress-bar bg-warning text-dark" role="progressbar" style="width: {{ percent }}%;"
-        aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
-      </div>
+      {# Kupione #}
+      <div class="progress-bar bg-success" role="progressbar"
+        style="width: {{ (purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
+        aria-valuemax="100"></div>
+
+      {# Niekupione #}
+      {% set not_purchased_count = l.not_purchased_count if l.total_count else 0 %}
+      <div class="progress-bar bg-warning" role="progressbar"
+        style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
+        aria-valuemax="100"></div>
+
+      {# Pozostałe #}
+      <div class="progress-bar bg-transparent" role="progressbar"
+        style="width: {{ 100 - ((purchased_count + not_purchased_count) / total_count * 100) if total_count > 0 else 100 }}%"
+        aria-valuemin="0" aria-valuemax="100"></div>
+
       <span class="progress-label small fw-bold 
-                      {% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
+        {% if percent < 51 %}text-white{% else %}text-dark{% endif %}">
         Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
         {% if l.total_expense > 0 %}
-        — 💸 {{ '%.2f'|format(l.total_expense) }} PLN
+        — 💸 {{ '%.2f'|format(l.total_expense) }} PLN
         {% endif %}
       </span>
     </div>
+
   </li>
   {% endfor %}
 </ul>
@@ -118,21 +141,45 @@
   {% set percent = (purchased_count / total_count * 100) if total_count > 0 else 0 %}
   <li class="list-group-item bg-dark text-white">
     <div class="d-flex justify-content-between align-items-center flex-wrap w-100">
-      <span class="fw-bold">{{ l.title }} (Autor: {{ l.owner.username }})</span>
+      <span class="fw-bold">
+        {{ l.title }} (Autor: {{ l.owner.username }})
+        {% for cat in l.category_badges %}
+        <span class="badge rounded-pill text-dark ms-1" style="background-color: {{ cat.color }};
+                 font-size: 0.56rem;
+                 opacity: 0.85;">
+          {{ cat.name }}
+        </span>
+        {% endfor %}
+      </span>
+
       <a href="/guest-list/{{ l.id }}" class="btn btn-sm btn-outline-light">📄 Otwórz</a>
     </div>
     <div class="progress progress-dark progress-thin mt-2 position-relative">
-      <div class="progress-bar bg-warning text-dark" role="progressbar" style="width: {{ percent }}%;"
-        aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
-      </div>
+      {# Kupione #}
+      <div class="progress-bar bg-success" role="progressbar"
+        style="width: {{ (purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
+        aria-valuemax="100"></div>
+
+      {# Niekupione #}
+      {% set not_purchased_count = l.not_purchased_count if l.total_count else 0 %}
+      <div class="progress-bar bg-warning" role="progressbar"
+        style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
+        aria-valuemax="100"></div>
+
+      {# Pozostałe #}
+      <div class="progress-bar bg-transparent" role="progressbar"
+        style="width: {{ 100 - ((purchased_count + not_purchased_count) / total_count * 100) if total_count > 0 else 100 }}%"
+        aria-valuemin="0" aria-valuemax="100"></div>
+
       <span class="progress-label small fw-bold 
-                      {% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
+        {% if percent < 51 %}text-white{% else %}text-dark{% endif %}">
         Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
         {% if l.total_expense > 0 %}
-        — 💸 {{ '%.2f'|format(l.total_expense) }} PLN
+        — 💸 {{ '%.2f'|format(l.total_expense) }} PLN
         {% endif %}
       </span>
     </div>
+
   </li>
   {% endfor %}
 </ul>
@@ -180,14 +227,17 @@
       </div>
       <div class="modal-body">
         <div class="d-grid gap-2">
-          {% for offset in range(0, 6) %}
-          {% set d = (now - timedelta(days=offset * 30)) %}
-          {% set val = d.strftime('%Y-%m') %}
-          <a href="{{ url_for('main_page', month=val) }}" class="btn btn-outline-light">
-            {{ month_names[d.month - 1] }} {{ d.year }}
+          {% for m in month_options %}
+          {% set year, month = m.split('-') %}
+          <a href="{{ url_for('main_page', m=m) }}"
+            class="btn btn-outline-light {% if selected_month == m %}active{% endif %}">
+            {{ month_names[month|int - 1] }} {{ year }}
           </a>
           {% endfor %}
-          <a href="{{ url_for('main_page') }}" class="btn btn-outline-secondary">📋 Wyświetl wszystkie</a>
+          <a href="{{ url_for('main_page', m='all') }}"
+            class="btn btn-outline-secondary {% if selected_month == 'all' %}active{% endif %}">
+            📋 Wyświetl wszystkie
+          </a>
         </div>
       </div>
     </div>