fix w cropie

Reviewed-on: #11

.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,

.gitattributes

@@ -0,0 +1,3 @@
+*.py text working-tree-encoding=UTF-8
+*.env.example text working-tree-encoding=UTF-8
+.env text working-tree-encoding=UTF-8

.gitignore

@@ -3,9 +3,11 @@ venv
 env
 *.db
 __pycache__
-instance/
-database/
 uploads/
 .DS_Store
-db/*
-*.swp
+db/mysql/*
+db/pgsql/*
+db/shopping.db
+*.swp
+version.txt
+deploy/varnish/default.vcl

Dockerfile

@@ -1,35 +0,0 @@
-# Używamy lekkiego obrazu Pythona
-FROM python:3.13-slim
-
-# Ustawiamy katalog roboczy
-WORKDIR /app
-
-# Zależności systemowe do OCR, obrazów, tesseract i języka PL
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    tesseract-ocr \
-    tesseract-ocr-pol \
-    libglib2.0-0 \
-    libsm6 \
-    libxrender1 \
-    libxext6 \
-    && apt-get clean \
-    && rm -rf /var/lib/apt/lists/*
-
-# Kopiujemy wymagania
-COPY requirements.txt requirements.txt
-
-# Instalujemy zależności
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Kopiujemy resztę aplikacji
-COPY . .
-
-# Kopiujemy entrypoint i ustawiamy uprawnienia
-COPY entrypoint.sh /entrypoint.sh
-RUN chmod +x /entrypoint.sh
-
-# Otwieramy port
-EXPOSE 8000
-
-# Ustawiamy entrypoint
-ENTRYPOINT ["/entrypoint.sh"]

Dockerfile

@@ -0,0 +1 @@
+deploy/app/Dockerfile

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

@@ -10,6 +10,8 @@ class Config:
     
     SECRET_KEY = os.environ.get("SECRET_KEY", "D8pceNZ8q%YR7^7F&9wAC2")
 
+    APP_PORT = int(os.environ.get("APP_PORT", "8000") or "8000")
+
     DB_ENGINE = os.environ.get("DB_ENGINE", "sqlite").lower()
     if DB_ENGINE == "sqlite":
         SQLALCHEMY_DATABASE_URI = (
@@ -57,16 +59,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 +80,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,Leki,Odzież,Samochód"
         ).split(",") if c.strip()
     ]

deploy/app/Dockerfile

@@ -0,0 +1,35 @@
+
+FROM python:3.14-rc-trixie
+#FROM python:3.13-slim
+WORKDIR /app
+
+# Zależności systemowe do OCR, obrazów, tesseract i języka PL
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    tesseract-ocr \
+    tesseract-ocr-pol \
+    libglib2.0-0 \
+    libsm6 \
+    libxrender1 \
+    libxext6 \
+    poppler-utils \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+# Kopiujemy wymagania
+COPY requirements.txt requirements.txt
+
+# Instalujemy zależności
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Kopiujemy resztę aplikacji
+COPY . .
+
+# Kopiujemy entrypoint i ustawiamy uprawnienia
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+# Otwieramy port
+#EXPOSE 8000
+
+# Ustawiamy entrypoint
+ENTRYPOINT ["/entrypoint.sh"]

deploy/varnish/default.vcl.template

@@ -0,0 +1,234 @@
+vcl 4.1;
+
+import vsthrottle;
+import std;
+
+# ===== Backend =====
+backend app {
+  .host = "app";
+  .port = "${APP_PORT}";
+}
+
+# ===== ACL =====
+acl purge {
+  "127.0.0.1";
+  "::1";
+}
+
+# ===== RECV =====
+sub vcl_recv {
+  # RATE LIMIT: 200 żądań / 10s, blokada 60s
+  if (vsthrottle.is_denied(client.identity, 200, 10s, 60s)) {
+    return (synth(429, "Too Many Requests"));
+  }
+
+  # PURGE tylko lokalnie
+  if (req.method == "PURGE") {
+    if (!client.ip ~ purge) { return (synth(405, "Not allowed")); }
+    return (purge);
+  }
+
+  # omijamy cache dla healthchecków / wewnętrznych nagłówków
+  if (req.url == "/healthcheck" || req.http.X-Internal-Check) { return (pass); }
+
+  # Specjalna obsługa WebSocket i socket.io
+  if (req.http.Upgrade ~ "(?i)websocket" || req.url ~ "^/socket.io/") {
+    return (pipe);
+  }
+
+  # metody inne niż GET/HEAD bez cache
+  if (req.method != "GET" && req.method != "HEAD") { return (pass); }
+
+  # Żądania z Authorization nie są buforowane
+  if (req.http.Authorization) { return (pass); }
+
+  # ---- Normalizacja Accept-Encoding (kolejność: zstd > br > gzip) ----
+  if (req.http.Accept-Encoding) {
+    if (req.http.Accept-Encoding ~ "zstd") {
+      set req.http.Accept-Encoding = "zstd";
+    } else if (req.http.Accept-Encoding ~ "br") {
+      set req.http.Accept-Encoding = "br";
+    } else if (req.http.Accept-Encoding ~ "gzip") {
+      set req.http.Accept-Encoding = "gzip";
+    } else {
+      set req.http.Accept-Encoding = "identity";
+    }
+  }
+
+  # ---- (Opcjonalnie) Normalizacja Accept dla obrazów generowanych wariantowo ----
+  # if (req.url ~ "\.(png|jpe?g|gif|bmp)$") {
+  #   if (req.http.Accept ~ "image/webp") {
+  #     set req.http.X-Accept-Image = "modern";   # webp
+  #   } else {
+  #     set req.http.X-Accept-Image = "legacy";   # jpg/png
+  #   }
+  # }
+
+  # ---- STATYCZNE – agresywny cache + ignorujemy sesję ----
+  if (req.url ~ "^/static/" || req.url ~ "\.(css|js|png|jpe?g|webp|svg|ico|woff2?)$") {
+    unset req.http.Cookie;
+    unset req.http.Authorization;
+    return (hash);
+  }
+
+  if (!req.http.X-Forwarded-Proto) {
+    set req.http.X-Forwarded-Proto = "https";
+  }
+
+  return (hash);
+}
+
+# ===== PIPE (WebSocket passthrough) =====
+sub vcl_pipe {
+  if (req.http.Upgrade) {
+    set bereq.http.Upgrade = req.http.Upgrade;
+    set bereq.http.Connection = req.http.Connection;
+  }
+}
+
+# ===== HASH =====
+sub vcl_hash {
+  hash_data(req.url);
+  if (req.http.host) { hash_data(req.http.host); } else { hash_data(server.ip); }
+
+  # Cookie: zostają dla dynamicznych (dla statyków wyczyszczone wcześniej)
+  if (req.http.Cookie) { hash_data(req.http.Cookie); }
+
+  # Accept-Encoding: już znormalizowany do zstd/br/gzip/identity
+  if (req.http.Accept-Encoding) { hash_data(req.http.Accept-Encoding); }
+
+  # (Opcjonalnie) sygnał obrazów z negocjacją po Accept
+  if (req.http.X-Accept-Image) { hash_data(req.http.X-Accept-Image); }
+}
+
+# ===== BACKEND_RESPONSE =====
+sub vcl_backend_response {
+  # Zakaz cache – respektujemy
+  if (beresp.http.Cache-Control ~ "(?i)no-store|private") {
+    set beresp.uncacheable = true;
+    set beresp.ttl = 0s;
+    return (deliver);
+  }
+
+  # NIE cache'uj redirectów do loginu (HTML) z backendu
+  if (beresp.status >= 300 && beresp.status < 400) {
+    set beresp.uncacheable = true;
+    set beresp.ttl = 0s;
+    return (deliver);
+  }
+
+  # Nie cache'uj statyków, jeśli status ≠ 200
+  if (bereq.url ~ "^/static/" ||
+      bereq.url ~ "\.(css|js|png|jpe?g|webp|svg|ico|woff2?)($|\?)") {
+    if (beresp.status != 200) {
+      set beresp.uncacheable = true;
+      set beresp.ttl = 0s;
+      return (deliver);
+    }
+  }
+
+  # Jeśli pod .js przychodzi text/html — też nie cache'uj (to zwykle redirect/login)
+  if (bereq.url ~ "\.js(\?.*)?$" && beresp.http.Content-Type ~ "(?i)text/html") {
+    set beresp.uncacheable = true;
+    set beresp.ttl = 0s;
+    return (deliver);
+  }
+
+  # Wymuś poprawny Content-Type dla .js/.css, gdy backend zwróci HTML
+  if (bereq.url ~ "\.js(\?.*)?$") {
+    if (!beresp.http.Content-Type || beresp.http.Content-Type ~ "(?i)text/html") {
+      set beresp.http.Content-Type = "application/javascript; charset=utf-8";
+    }
+  }
+  if (bereq.url ~ "\.css(\?.*)?$") {
+    if (!beresp.http.Content-Type || beresp.http.Content-Type ~ "(?i)text/html") {
+      set beresp.http.Content-Type = "text/css; charset=utf-8";
+    }
+  }
+
+  # ---- STATYCZNE: zdejmij Set-Cookie i Vary: Cookie, zapewnij TTL ----
+  if (bereq.url ~ "^/static/" || bereq.url ~ "\.(css|js|png|jpe?g|webp|svg|ico|woff2?)$") {
+    unset beresp.http.Set-Cookie;
+
+    # Jeśli backend dodał Vary: Cookie, usuńmy ten element (nie wpływa na statyki)
+    if (beresp.http.Vary) {
+      set beresp.http.Vary = regsuball(beresp.http.Vary, "(?i)(^|,)[[:space:]]*Cookie[[:space:]]*(,|$)", "\1");
+      set beresp.http.Vary = regsuball(beresp.http.Vary, ",[[:space:]]*,", ",");
+      set beresp.http.Vary = regsub(beresp.http.Vary, "^[[:space:]]*,[[:space:]]*", "");
+      set beresp.http.Vary = regsub(beresp.http.Vary, "[[:space:]]*,[[:space:]]*$", "");
+      if (beresp.http.Vary ~ "^[[:space:]]*$") { unset beresp.http.Vary; }
+    }
+
+    # Jeśli brak kontroli czasu życia – ustawiamy twarde wartości
+    if (!(beresp.http.Cache-Control ~ "(?i)(s-maxage|max-age)")) {
+      set beresp.ttl = 24h;
+      set beresp.http.Cache-Control = "public, max-age=86400, immutable";
+    }
+
+    set beresp.grace = 1h;
+    set beresp.keep  = 24h;
+  }
+
+  # ---- Ogólne TTL z nagłówków ----
+  if (beresp.http.Cache-Control ~ "(?i)s-maxage=([0-9]+)") {
+    set beresp.ttl = std.duration(regsub(beresp.http.Cache-Control, "(?i).*s-maxage=([0-9]+).*", "\1") + "s", 0s);
+  } else if (beresp.http.Cache-Control ~ "(?i)max-age=([0-9]+)") {
+    set beresp.ttl = std.duration(regsub(beresp.http.Cache-Control, "(?i).*max-age=([0-9]+).*", "\1") + "s", 0s);
+  } else if (beresp.http.Expires) {
+    set beresp.ttl = std.time(beresp.http.Expires, now) - now;
+    if (beresp.ttl < 0s) { set beresp.ttl = 0s; }
+  } else {
+    if (beresp.ttl <= 0s) { set beresp.ttl = 60s; }
+  }
+
+  # Immutable => dłuższe grace/keep
+  if (beresp.http.Cache-Control ~ "(?i)immutable") {
+    set beresp.grace = 1h;
+    set beresp.keep  = 24h;
+  }
+
+  # Kompresja po stronie Varnisha wyłącznie dla klientów akceptujących gzip
+  # i tylko jeśli backend nie dostarczył już Content-Encoding.
+  if (!beresp.http.Content-Encoding && bereq.http.Accept-Encoding ~ "gzip") {
+    # Kompresujemy tylko „tekstowe” typy; wykluczamy WASM
+    if (beresp.http.Content-Type ~ "(?i)text/|application/(javascript|json|xml)") {
+      set beresp.do_gzip = true;
+    }
+  }
+
+  # Duże odpowiedzi streamujemy
+  if (beresp.http.Content-Length && std.integer(beresp.http.Content-Length, 0) > 1048576) {
+    set beresp.do_stream = true;
+  }
+}
+
+# (Opcjonalnie) Serwuj „stale” przy błędach backendu, jeśli jest obiekt w grace
+sub vcl_backend_error {
+  return (deliver);
+}
+
+# ===== DELIVER =====
+sub vcl_deliver {
+  if (obj.uncacheable) {
+    set resp.http.X-Cache = "PASS";
+    unset resp.http.Age;
+  } else if (obj.hits > 0) {
+    set resp.http.X-Cache = "HIT";
+  } else {
+    set resp.http.X-Cache = "MISS";
+    unset resp.http.Age;
+  }
+
+  unset resp.http.Via;
+  unset resp.http.X-Varnish;
+  unset resp.http.Server;
+}
+
+sub vcl_synth {
+  set resp.http.X-Cache = "SYNTH";
+}
+
+# ===== PURGE HANDLER =====
+sub vcl_purge {
+  return (synth(200, "Purged"));
+}

deploy_docker.sh

@@ -1,14 +1,23 @@
 #!/bin/bash
 set -e
 
+# --- Wczytaj zmienne z .env ---
+if [[ -f .env ]]; then
+  set -a
+  source .env
+  set +a
+fi
+
+APP_PORT="${APP_PORT:-8080}"
+
 PROFILE=$1
 
 if [[ -z "$PROFILE" ]]; then
-  echo "Uzycie: $0 {pgsql|mysql|sqlite}"
+  echo "Użycie: $0 {pgsql|mysql|sqlite}"
   exit 1
 fi
 
-echo "Zatrzymuje kontenery aplikacji i bazy..."
+echo "Zatrzymuję kontenery aplikacji i bazy..."
 if [[ "$PROFILE" == "sqlite" ]]; then
   docker compose stop
 else
@@ -18,11 +27,17 @@ fi
 echo "Pobieram najnowszy kod z repozytorium..."
 git pull
 
-echo "Buduje i uruchamiam kontenery..."
+echo "Generowanie default.vcl z APP_PORT=$APP_PORT"
+envsubst < deploy/varnish/default.vcl.template > deploy/varnish/default.vcl
+
+echo "Zapisuję hash commita do version.txt..."
+git rev-parse --short HEAD > version.txt
+
+echo "Buduję i uruchamiam kontenery..."
 if [[ "$PROFILE" == "sqlite" ]]; then
   docker compose up -d --build
 else
   DB_ENGINE="$PROFILE" docker compose --profile "$PROFILE" up -d --build
 fi
 
-echo "Gotowe!"
+echo "Gotowe! Wersja aplikacji: $(cat version.txt)"

docker-compose.yml

@@ -1,11 +1,13 @@
 services:
   app:
     build: .
-    container_name: live-lista-zakupow
-    ports:
-      - "${APP_PORT:-8000}:8000"
+    container_name: lista-zakupow-app
+    #ports:
+    #  - "${APP_PORT:-8000}:8000"
+    expose:
+      - "${APP_PORT:-8000}"
     healthcheck:
-      test: ["CMD", "python", "-c", "import urllib.request; import sys; req = urllib.request.Request('http://localhost:8000/healthcheck', headers={'X-Internal-Check': '${HEALTHCHECK_TOKEN}'}); sys.exit(0) if urllib.request.urlopen(req).read() == b'OK' else sys.exit(1)"]
+      test: ["CMD", "python", "-c", "import urllib.request; import sys; req = urllib.request.Request('http://localhost:${APP_PORT:-8000}/healthcheck', headers={'X-Internal-Check': '${HEALTHCHECK_TOKEN}'}); sys.exit(0) if urllib.request.urlopen(req).read() == b'OK' else sys.exit(1)"]
       interval: 30s
       timeout: 10s
       retries: 3
@@ -16,23 +18,36 @@ services:
       - .:/app
       - ./uploads:/app/uploads
       - ./instance:/app/instance
+    networks:
+      - lista-zakupow_network
     restart: unless-stopped
 
-  pgsql:
-    image: postgres:17
-    container_name: pgsql-db
-    environment:
-      POSTGRES_DB: ${DB_NAME}
-      POSTGRES_USER: ${DB_USER}
-      POSTGRES_PASSWORD: ${DB_PASSWORD}
+  varnish:
+    image: varnish:latest
+    container_name: lista-zakupow-varnish
+    depends_on:
+      app:
+        condition: service_healthy
+    ports:
+      - "${APP_PORT:-8000}:80"
     volumes:
-      - ./db/pgsql:/var/lib/postgresql/data
+      - ./deploy/varnish/default.vcl:/etc/varnish/default.vcl:ro
+    environment:
+      - VARNISH_SIZE=256m
+    healthcheck:
+      test: [ "CMD-SHELL", "curl -fsS -H 'X-Internal-Check=${HEALTHCHECK_TOKEN}' http://localhost/healthcheck | grep -q OK" ]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+    env_file:
+      - .env
+    networks:
+      - lista-zakupow_network
     restart: unless-stopped
-    profiles: ["pgsql"]
 
   mysql:
     image: mysql:8
-    container_name: mysql-db
+    container_name: lista-zakupow-mysql-db
     environment:
       MYSQL_DATABASE: ${DB_NAME}
       MYSQL_USER: ${DB_USER}
@@ -41,4 +56,25 @@ services:
     volumes:
       - ./db/mysql:/var/lib/mysql
     restart: unless-stopped
-    profiles: ["mysql"]
+    networks:
+      - lista-zakupow_network
+    profiles: ["mysql"]
+
+  pgsql:
+    image: postgres:18
+    container_name: lista-zakupow-pgsql
+    environment:
+      POSTGRES_DB: ${DB_NAME}
+      POSTGRES_USER: ${DB_USER}
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+      PGDATA: /var/lib/postgresql
+    volumes:
+      - ./db/pgsql/:/var/lib/postgresql
+    networks:
+      - lista-zakupow_network
+    restart: unless-stopped
+    profiles: ["pgsql"]
+
+networks:
+  lista-zakupow_network:
+    driver: bridge

requirements.txt

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

static/css/style.css

@@ -1,4 +1,59 @@
-/* --- Rozmiary i kursory --- */
+/* =========================================================
+   Variables (single source of truth)
+========================================================= */
+:root {
+  /* brand / info */
+  --primary: #184076;
+  --primary-border: #153866;
+  --primary-text: #e6f0ff;
+
+  --info: var(--primary);
+  --info-border: var(--primary-border);
+  --info-text: var(--primary-text);
+
+  /* success */
+  --success: #1c6930;
+  --success-border: #165024;
+  --success-text: #eaffea;
+
+  /* warning */
+  --warning: #665c1e;
+  --warning-border: #4d4415;
+  --warning-text: #fffbe5;
+
+  /* danger */
+  --danger: #6e1a1e;
+  --danger-border: #531417;
+  --danger-text: #ffeaea;
+
+  /* neutrals / dark */
+  --dark-900: #181a1b;
+  --dark-800: #1c1f22;
+  --dark-750: #1f2225;
+  --dark-700: #212529;
+  --dark-650: #23272a;
+  --dark-600: #2a2d31;
+  --dark-550: #2b2f33;
+  --dark-500: #2c2f33;
+  --dark-480: #2c3034;
+  --dark-470: #2a2d31;
+  --dark-450: #3a3f44;
+  --dark-400: #343a40;
+  --dark-350: #3d4248;
+  --dark-300: #495057;
+
+  --text-strong: #f8f9fa;
+  --text: #e2e3e5;
+  --text-dim: #e1e1e1;
+  --muted: #6c757d;
+
+  /* defaults */
+  --progress-default: #3d7bd6;
+}
+
+/* =========================================================
+   Utilities & Sizes
+========================================================= */
 .large-checkbox {
   width: 1.5em;
   height: 1.5em;
@@ -8,138 +63,182 @@
   cursor: pointer;
 }
 
-/* --- Kolory tła (nadpisane klasy Bootstrapa) --- */
-.bg-success {
-  background-color: #1e7e34 !important;
-}
-
-.btn-outline-light:hover {
-  background-color: #ffc107 !important;
-  color: #000 !important;
-  border-color: #ffc107 !important;
-}
-
-.progress-dark {
-  background-color: #212529 !important;
-  border-radius: 20px !important;
-  overflow: hidden;
-}
-
-.progress-bar {
-  border-radius: 20px !important;
-  transition: width 0.4s ease;
-  flex-direction: column;
-  justify-content: center;
-  white-space: nowrap;
-}
-
-/* rodzic już ma position-relative */
-.progress-label {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-  /* klikalne przyciski obok paska nie ucierpią */
-  white-space: nowrap;
-}
-
 .progress-thin {
   height: 12px;
 }
 
 .item-not-checked {
-  background-color: #2c2f33 !important;
-  color: white !important;
+  background-color: var(--dark-500) !important;
+  color: #fff !important;
 }
 
-/* --- Styl przycisku wyboru pliku --- */
+#empty-placeholder {
+  font-style: italic;
+  pointer-events: none;
+}
+
+.fade-out {
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+@media (pointer: fine) {
+  .only-mobile {
+    display: none !important;
+  }
+}
+
+/* Bootstrap bg overrides via variables */
+.bg-success {
+  background-color: var(--success) !important;
+}
+
+.bg-warning {
+  background-color: var(--warning) !important;
+}
+
+/* =========================================================
+   Buttons
+========================================================= */
+/* Primary */
+.btn-primary {
+  background-color: var(--primary) !important;
+  border-color: var(--primary-border) !important;
+}
+
+.btn-primary:hover,
+.btn-primary:focus,
+.btn-primary:active {
+  background-color: #13315f !important;
+  border-color: #10284f !important;
+}
+
+/* Success */
+.btn-success {
+  background-color: var(--success) !important;
+  border-color: var(--success-border) !important;
+  color: #fff !important;
+}
+
+.btn-success:hover,
+.btn-success:focus,
+.btn-success:active {
+  background-color: #155627 !important;
+  border-color: #124521 !important;
+  color: #fff !important;
+}
+
+/* Warning */
+.btn-warning {
+  background-color: var(--warning) !important;
+  border-color: var(--warning-border) !important;
+  color: var(--warning-text) !important;
+}
+
+.btn-warning:hover,
+.btn-warning:focus,
+.btn-warning:active {
+  background-color: #5c4c17 !important;
+  border-color: #3e3610 !important;
+  color: var(--warning-text) !important;
+}
+
+/* Outline */
+.btn-outline-success {
+  color: var(--success) !important;
+  border-color: var(--success) !important;
+}
+
+.btn-outline-success:hover,
+.btn-outline-success:focus,
+.btn-outline-success:active {
+  background-color: var(--success) !important;
+  border-color: var(--success-border) !important;
+  color: #fff !important;
+}
+
+.btn-outline-warning {
+  color: #d9c97a !important;
+  border-color: var(--warning) !important;
+}
+
+.btn-outline-warning:hover,
+.btn-outline-warning:focus,
+.btn-outline-warning:active {
+  background-color: var(--warning) !important;
+  border-color: var(--warning-border) !important;
+  color: var(--warning-text) !important;
+}
+
+/* File input button */
 input[type="file"]::file-selector-button {
-  background-color: #225d36;
-  color: #fff;
+  background-color: #1b4a29;
+  color: #f0f0f0;
   border: none;
-  padding: 0.5em 1em;
+  padding: .5em 1em;
   border-radius: 4px;
   font-weight: bold;
   cursor: pointer;
-  transition: background 0.2s;
+  transition: background .2s;
 }
 
-/* --- Ciemniejsze alerty Bootstrapa --- */
-.alert-success {
-  background-color: #225d36 !important;
-  color: #eaffea !important;
-  border-color: #174428 !important;
+/* =========================================================
+   Forms (inputs, selects, switches, placeholders)
+========================================================= */
+.form-select,
+.form-control,
+textarea.form-control {
+  background-color: var(--dark-700) !important;
+  color: var(--text-strong) !important;
+  border: 1px solid var(--dark-300) !important;
 }
 
-.alert-danger {
-  background-color: #7a1f23 !important;
-  color: #ffeaea !important;
-  border-color: #531417 !important;
+.form-select:focus,
+.form-control:focus,
+textarea.form-control:focus {
+  background-color: var(--dark-800) !important;
+  border-color: var(--primary) !important;
+  color: #fff !important;
+  box-shadow: 0 0 0 .25rem rgba(24, 64, 118, .35) !important;
 }
 
-.alert-info {
-  background-color: #1d3a4d !important;
-  color: #eaf6ff !important;
-  border-color: #152837 !important;
+.form-control:disabled,
+textarea.form-control:disabled {
+  background-color: var(--dark-550) !important;
+  color: var(--muted) !important;
+  cursor: not-allowed;
 }
 
-.alert-warning {
-  background-color: #665c1e !important;
-  color: #fffbe5 !important;
-  border-color: #4d4415 !important;
+/* Switch */
+.form-switch .form-check-input {
+  background-color: var(--dark-400) !important;
+  border-color: var(--dark-300) !important;
 }
 
-/* Badge - kolory pasujące do ciemnych alertów */
-.badge.bg-success,
-.badge.text-bg-success {
-  background-color: #225d36 !important;
-  color: #eaffea !important;
+.form-switch .form-check-input:checked {
+  background-color: var(--primary) !important;
+  border-color: var(--primary-border) !important;
 }
 
-.badge.bg-danger,
-.badge.text-bg-danger {
-  background-color: #7a1f23 !important;
-  color: #ffeaea !important;
+/* Placeholders */
+.form-control::placeholder,
+.bg-dark .form-control::placeholder {
+  color: #aaa !important;
+  opacity: 1 !important;
 }
 
-.badge.bg-info,
-.badge.text-bg-info {
-  background-color: #1d3a4d !important;
-  color: #eaf6ff !important;
+/* Paired corners (utility) */
+#tempToggle {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
-.badge.bg-warning,
-.badge.text-bg-warning {
-  background-color: #665c1e !important;
-  color: #fffbe5 !important;
+input.form-control {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-.badge.bg-secondary,
-.badge.text-bg-secondary {
-  background-color: #343a40 !important;
-  color: #e2e3e5 !important;
-}
-
-.badge.bg-primary,
-.badge.text-bg-primary {
-  background-color: #184076 !important;
-  color: #e6f0ff !important;
-}
-
-.badge.bg-light,
-.badge.text-bg-light {
-  background-color: #444950 !important;
-  color: #f8f9fa !important;
-}
-
-.badge.bg-dark,
-.badge.text-bg-dark {
-  background-color: #181a1b !important;
-  color: #f8f9fa !important;
-}
-
-/* --- Styl dla własnych checkboxów --- */
+/* XXL custom checkbox */
 input[type="checkbox"].large-checkbox {
   appearance: none;
   -webkit-appearance: none;
@@ -165,16 +264,16 @@ input[type="checkbox"].large-checkbox::before {
   top: 50%;
   transform: translateY(-50%);
   line-height: 1;
-  transition: color 0.2s;
+  transition: color .2s;
 }
 
 input[type="checkbox"].large-checkbox:checked::before {
   content: '✓';
-  color: #ffffff;
+  color: #fff;
 }
 
 input[type="checkbox"].large-checkbox:disabled::before {
-  opacity: 0.5;
+  opacity: .5;
   cursor: not-allowed;
 }
 
@@ -182,36 +281,206 @@ input[type="checkbox"].large-checkbox:disabled {
   cursor: not-allowed;
 }
 
-#tempToggle {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-input.form-control {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.info-bar-fixed {
-  width: 100%;
-  color: #f8f9fa;
-  background-color: #212529;
-  border-radius: 12px 12px 0 0;
-  text-align: center;
-  padding: 10px 10px;
-  font-size: 0.95rem;
+/* Tom-Select / TS */
+.tom-dark .ts-control {
+  background-color: var(--dark-700) !important;
+  color: #fff !important;
+  border: 1px solid var(--dark-300) !important;
+  border-radius: .375rem;
+  min-height: 38px;
+  padding: .25rem .5rem;
   box-sizing: border-box;
-  margin-top: 2rem;
-  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25);
 }
 
-@media (max-width: 768px) {
-  .info-bar-fixed {
-    position: static;
-    font-size: 0.85rem;
-    padding: 8px 4px;
-    border-radius: 0;
-  }
+.tom-dark .ts-control .item {
+  background-color: var(--dark-400) !important;
+  color: #fff !important;
+  border-radius: .25rem;
+  padding: 2px 8px;
+  margin-right: 4px;
+}
+
+.ts-dropdown {
+  background-color: var(--dark-700) !important;
+  color: #fff !important;
+  border: 1px solid var(--dark-300);
+  border-radius: .375rem;
+  z-index: 9999 !important;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.ts-dropdown .active {
+  background-color: var(--dark-300) !important;
+  color: #fff !important;
+}
+
+td select.tom-dark {
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* =========================================================
+   Alerts, Badges, Background helpers
+========================================================= */
+/* Alerts */
+.alert-success {
+  background-color: #225d36 !important;
+  color: var(--success-text) !important;
+  border-color: #174428 !important;
+}
+
+.alert-danger {
+  background-color: #7a1f23 !important;
+  color: var(--danger-text) !important;
+  border-color: #531417 !important;
+}
+
+.alert-info {
+  background-color: var(--primary) !important;
+  color: var(--primary-text) !important;
+  border-color: var(--primary-border) !important;
+}
+
+.alert-warning {
+  background-color: var(--warning) !important;
+  color: var(--warning-text) !important;
+  border-color: var(--warning-border) !important;
+}
+
+.alert-light {
+  background-color: #3a3f44 !important;
+  color: var(--text-strong) !important;
+  border-color: var(--dark-480) !important;
+}
+
+/* Badges */
+.badge.bg-success,
+.badge.text-bg-success {
+  background-color: #225d36 !important;
+  color: var(--success-text) !important;
+}
+
+.badge.bg-danger,
+.badge.text-bg-danger {
+  background-color: #7a1f23 !important;
+  color: var(--danger-text) !important;
+}
+
+.badge.bg-info,
+.badge.text-bg-info {
+  background-color: #1d3a4d !important;
+  color: #eaf6ff !important;
+}
+
+.badge.bg-warning,
+.badge.text-bg-warning {
+  background-color: var(--warning) !important;
+  color: var(--warning-text) !important;
+}
+
+.badge.bg-secondary,
+.badge.text-bg-secondary {
+  background-color: var(--dark-400) !important;
+  color: #e2e3e5 !important;
+}
+
+.badge.bg-primary,
+.badge.text-bg-primary {
+  background-color: var(--primary) !important;
+  color: var(--primary-text) !important;
+}
+
+.badge.bg-light,
+.badge.text-bg-light {
+  background-color: var(--dark-350) !important;
+  color: #f1f3f5 !important;
+}
+
+.badge.bg-dark,
+.badge.text-bg-dark {
+  background-color: var(--dark-900) !important;
+  color: var(--text-strong) !important;
+}
+
+/* =========================================================
+   Progress
+========================================================= */
+.progress-dark {
+  background-color: var(--dark-700) !important;
+  border-radius: 20px !important;
+  overflow: hidden;
+}
+
+.progress {
+  background-color: #2a2d31 !important;
+  border-radius: 20px !important;
+}
+
+.progress-bar {
+  border-radius: 0 !important;
+  transition: width .4s ease, background-color .4s ease;
+  background-color: var(--progress-default) !important;
+}
+
+.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;
+}
+
+.progress-bar.bg-success {
+  background-color: var(--success) !important;
+}
+
+.progress-bar.bg-danger {
+  background-color: var(--danger) !important;
+}
+
+.progress-bar.bg-warning {
+  background-color: var(--warning) !important;
+  color: #fff !important;
+}
+
+.progress-bar.bg-info {
+  background-color: #16425a !important;
+}
+
+/* Label (parent must be position-relative) */
+.progress-label {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* =========================================================
+   Cards & Tables
+========================================================= */
+.card {
+  background-color: var(--dark-500) !important;
+  border: 1px solid var(--dark-450) !important;
+  color: var(--text) !important;
+}
+
+.card-header,
+.card-footer {
+  background-color: var(--dark-650) !important;
+  border-color: var(--dark-450) !important;
+  color: #f1f3f5 !important;
+}
+
+.card .table {
+  border-radius: 0 !important;
+  overflow: hidden;
+  margin-bottom: 0;
 }
 
 .table-responsive {
@@ -223,47 +492,96 @@ input.form-control {
   min-width: 1000px;
 }
 
-.bg-dark .form-control::placeholder {
-  color: #ccc !important;
-  opacity: 1;
+.table-dark.table-striped tbody tr:nth-of-type(odd) {
+  background-color: rgba(255, 255, 255, .025);
 }
 
-.toast-body {
-  color: #ffffff !important;
-  font-weight: 500 !important;
+.table-dark tbody tr:hover {
+  background-color: rgba(255, 255, 255, .04);
 }
 
-.toast {
-  animation: fadeInUp 0.5s ease;
+.table-dark thead th {
+  background-color: var(--dark-800);
+  color: var(--text-dim);
+  font-weight: 500;
+  border-bottom: 1px solid var(--dark-450);
 }
 
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
+.table-dark td,
+.table-dark th {
+  padding: .6rem .75rem;
+  vertical-align: middle;
+  border-top: 1px solid var(--dark-450);
+}
 
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+/* =========================================================
+   Navs & Pagination
+========================================================= */
+.nav-tabs .nav-link.active,
+.nav-tabs .nav-item.show .nav-link {
+  background-color: var(--dark-500) !important;
+  color: var(--text-strong) !important;
+  border-color: var(--dark-450) var(--dark-450) var(--dark-500) !important;
+}
+
+.page-link {
+  color: #e0e0e0 !important;
+  background-color: var(--dark-750) !important;
+  border: 1px solid var(--dark-450) !important;
+}
+
+.page-link:hover,
+.page-link:focus {
+  color: #fff !important;
+  background-color: var(--dark-400) !important;
+  border-color: var(--dark-300) !important;
+}
+
+.page-item.active .page-link {
+  color: #fff !important;
+  background-color: var(--primary) !important;
+  border-color: var(--primary-border) !important;
+}
+
+.page-item.disabled .page-link {
+  color: var(--muted) !important;
+  background-color: var(--dark-550) !important;
+  border-color: var(--dark-450) !important;
+}
+
+/* =========================================================
+   Lists & Misc UI
+========================================================= */
+.list-group-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.list-group-item:first-child,
+.list-group-item:last-child {
+  border-radius: 0 !important;
+}
+
+#items li.hide-purchased {
+  display: none !important;
+}
+
+#mass-add-list li {
+  transition: background .2s;
 }
 
 #mass-add-list li.active {
   background: #198754 !important;
   color: #fff !important;
-  border: 1px solid #000000 !important;
-}
-
-#mass-add-list li {
-  transition: background 0.2s;
+  border: 1px solid #000 !important;
 }
 
 .quantity-input {
   width: 60px;
-  background: #343a40;
+  background: var(--dark-400);
   color: #fff;
-  border: 1px solid #495057;
+  border: 1px solid var(--dark-300);
   border-radius: 4px;
   text-align: center;
 }
@@ -280,48 +598,218 @@ input.form-control {
   gap: 4px;
 }
 
-.list-group-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+/* =========================================================
+   Toasts & Info Bar
+========================================================= */
+.toast {
+  animation: fadeInUp .5s ease;
 }
 
-#empty-placeholder {
-  font-style: italic;
-  pointer-events: none;
-}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
 
-#items li.hide-purchased {
-  display: none !important;
-}
-
-.list-group-item:first-child,
-.list-group-item:last-child {
-  border-radius: 0 !important;
-}
-
-.fade-out {
-  opacity: 0;
-  transition: opacity 0.5s ease;
-}
-
-@media (pointer: fine) {
-  .only-mobile {
-    display: none !important;
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-.ts-control {
-  background-color: #212529 !important;
-  color: #fff !important;
-  border: 1px solid #495057 !important;
+/* Base toast when not using text-bg-* */
+.toast:not([class*="text-bg-"]) {
+  background-color: var(--dark-500) !important;
+  color: #f1f1f1 !important;
+  border: 1px solid var(--dark-450) !important;
+  animation: fadeInUp .5s ease;
 }
 
-.ts-dropdown {
-  background-color: #212529 !important;
-  color: #fff !important;
+.toast .toast-body {
+  color: inherit !important;
 }
 
+.toast .btn-close {
+  filter: invert(1) grayscale(100%) brightness(200%);
+}
+
+/* Typed toasts (override Bootstrap text-bg-*) */
+.toast.text-bg-primary {
+  background-color: var(--info) !important;
+  color: var(--info-text) !important;
+  border-color: var(--info-border) !important;
+}
+
+.toast.text-bg-info {
+  background-color: var(--info) !important;
+  color: var(--info-text) !important;
+  border-color: var(--info-border) !important;
+}
+
+.toast.text-bg-success {
+  background-color: var(--success) !important;
+  color: var(--success-text) !important;
+  border-color: var(--success-border) !important;
+}
+
+.toast.text-bg-warning {
+  background-color: var(--warning) !important;
+  color: var(--warning-text) !important;
+  border-color: var(--warning-border) !important;
+}
+
+.toast.text-bg-danger {
+  background-color: var(--danger) !important;
+  color: var(--danger-text) !important;
+  border-color: var(--danger-border) !important;
+}
+
+.toast-body {
+  color: #fff !important;
+  font-weight: 500 !important;
+}
+
+.info-bar-fixed {
+  width: 100%;
+  color: var(--text-strong);
+  background-color: var(--dark-700);
+  border-radius: 12px 12px 0 0;
+  text-align: center;
+  padding: 10px 10px;
+  font-size: .95rem;
+  box-sizing: border-box;
+  margin-top: 2rem;
+  box-shadow: 0 -1px 4px rgba(0, 0, 0, .25);
+}
+
+@media (max-width: 768px) {
+  .info-bar-fixed {
+    position: static;
+    font-size: .85rem;
+    padding: 8px 4px;
+    border-radius: 0;
+  }
+}
+
+/* =========================================================
+   Modals (incl. fullscreen chart modal)
+========================================================= */
+.modal-content {
+  background-color: var(--dark-470) !important;
+  color: #f1f1f1 !important;
+  border: 1px solid var(--dark-450) !important;
+}
+
+.modal-header,
+.modal-footer {
+  background-color: var(--dark-650) !important;
+  border-color: var(--dark-450) !important;
+}
+
+/* Fullscreen chart modal */
+#chartFullscreenModal .modal-dialog {
+  max-width: 100vw;
+  width: 100vw;
+  margin: 0;
+}
+
+#chartFullscreenModal .modal-content {
+  height: 100vh;
+  border-radius: 0;
+}
+
+#chartFullscreenModal .modal-body {
+  display: flex;
+  flex: 1 1 auto;
+  padding: 0;
+  overflow: hidden;
+}
+
+#chartFullscreenCanvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* =========================================================
+   Dropdown (TS already above) — active
+========================================================= */
 .ts-dropdown .active {
-  background-color: #495057 !important;
+  background-color: var(--dark-300) !important;
+}
+
+.list-group-item.bg-success {
+  background-color: var(--success) !important;
+  border-color: var(--success-border) !important;
+  color: var(--success-text) !important;
+  --bs-bg-opacity: 1 !important;
+}
+
+.list-group-item.bg-warning {
+  background-color: var(--warning) !important;
+  border-color: var(--warning-border) !important;
+  color: var(--warning-text) !important;
+  --bs-bg-opacity: 1 !important;
+}
+
+.btn-outline-light {
+  color: #f8f9fa !important;
+  border-color: #f8f9fa !important;
+  background-color: transparent !important;
+  /* brak białego tła domyślnie */
+}
+
+.btn-outline-light:hover,
+.btn-outline-light:focus {
+  background-color: #6c757d !important;
+  /* szare, jak wcześniej */
+  color: #fff !important;
+  border-color: #6c757d !important;
+}
+
+.btn-outline-light:active,
+.btn-outline-light.active,
+.show>.btn-outline-light.dropdown-toggle {
+  background-color: #5a6268 !important;
+  /* ciemniejsze szare na active */
+  color: #fff !important;
+  border-color: #545b62 !important;
+}
+
+.btn-outline-info {
+  color: var(--info) !important;
+  border-color: var(--info) !important;
+  background-color: transparent !important;
+}
+
+.btn-outline-info:hover,
+.btn-outline-info:focus {
+  background-color: #1d4d8c !important;
+  border-color: #1d4d8c !important;
+  color: var(--info-text) !important;
+}
+
+.btn-outline-info:active,
+.btn-outline-info.active,
+.show>.btn-outline-info.dropdown-toggle {
+  background-color: var(--info) !important;
+  border-color: var(--info-border) !important;
+  color: var(--info-text) !important;
+}
+
+/* Tekstowe kolory */
+.text-success {
+  color: var(--success) !important;
+}
+
+.text-warning {
+  color: var(--warning) !important;
+}
+
+.text-info {
+  color: var(--info) !important;
+}
+
+.text-danger {
+  color: var(--danger) !important;
 }

static/css/style_old.css

@@ -0,0 +1,416 @@
+/* --- Rozmiary i kursory --- */
+.large-checkbox {
+    width: 1.5em;
+    height: 1.5em;
+}
+
+.clickable-item {
+    cursor: pointer;
+}
+
+/* --- Kolory tła (nadpisane klasy Bootstrapa) --- */
+.bg-success {
+    background-color: #1e7e34 !important;
+}
+
+.btn-outline-light:hover {
+    background-color: #ffc107 !important;
+    color: #000 !important;
+    border-color: #ffc107 !important;
+}
+
+.progress-dark {
+    background-color: #212529 !important;
+    border-radius: 20px !important;
+    overflow: hidden;
+}
+
+.progress-bar {
+    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;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    /* klikalne przyciski obok paska nie ucierpią */
+    white-space: nowrap;
+}
+
+.progress-thin {
+    height: 12px;
+}
+
+.item-not-checked {
+    background-color: #2c2f33 !important;
+    color: white !important;
+}
+
+/* --- Styl przycisku wyboru pliku --- */
+input[type="file"]::file-selector-button {
+    background-color: #225d36;
+    color: #fff;
+    border: none;
+    padding: 0.5em 1em;
+    border-radius: 4px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+/* --- Ciemniejsze alerty Bootstrapa --- */
+.alert-success {
+    background-color: #225d36 !important;
+    color: #eaffea !important;
+    border-color: #174428 !important;
+}
+
+.alert-danger {
+    background-color: #7a1f23 !important;
+    color: #ffeaea !important;
+    border-color: #531417 !important;
+}
+
+.alert-info {
+    background-color: #1d3a4d !important;
+    color: #eaf6ff !important;
+    border-color: #152837 !important;
+}
+
+.alert-warning {
+    background-color: #665c1e !important;
+    color: #fffbe5 !important;
+    border-color: #4d4415 !important;
+}
+
+/* Badge - kolory pasujące do ciemnych alertów */
+.badge.bg-success,
+.badge.text-bg-success {
+    background-color: #225d36 !important;
+    color: #eaffea !important;
+}
+
+.badge.bg-danger,
+.badge.text-bg-danger {
+    background-color: #7a1f23 !important;
+    color: #ffeaea !important;
+}
+
+.badge.bg-info,
+.badge.text-bg-info {
+    background-color: #1d3a4d !important;
+    color: #eaf6ff !important;
+}
+
+.badge.bg-warning,
+.badge.text-bg-warning {
+    background-color: #665c1e !important;
+    color: #fffbe5 !important;
+}
+
+.badge.bg-secondary,
+.badge.text-bg-secondary {
+    background-color: #343a40 !important;
+    color: #e2e3e5 !important;
+}
+
+.badge.bg-primary,
+.badge.text-bg-primary {
+    background-color: #184076 !important;
+    color: #e6f0ff !important;
+}
+
+.badge.bg-light,
+.badge.text-bg-light {
+    background-color: #444950 !important;
+    color: #f8f9fa !important;
+}
+
+.badge.bg-dark,
+.badge.text-bg-dark {
+    background-color: #181a1b !important;
+    color: #f8f9fa !important;
+}
+
+/* --- Styl dla własnych checkboxów --- */
+input[type="checkbox"].large-checkbox {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    width: 1.5em;
+    height: 1.5em;
+    margin: 0;
+    padding: 0;
+    outline: none;
+    background: none;
+    cursor: pointer;
+    position: relative;
+    vertical-align: middle;
+}
+
+input[type="checkbox"].large-checkbox::before {
+    content: '✗';
+    color: #dc3545;
+    font-size: 1.5em;
+    font-weight: bold;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    line-height: 1;
+    transition: color 0.2s;
+}
+
+input[type="checkbox"].large-checkbox:checked::before {
+    content: '✓';
+    color: #ffffff;
+}
+
+input[type="checkbox"].large-checkbox:disabled::before {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+input[type="checkbox"].large-checkbox:disabled {
+    cursor: not-allowed;
+}
+
+#tempToggle {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+input.form-control {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.info-bar-fixed {
+    width: 100%;
+    color: #f8f9fa;
+    background-color: #212529;
+    border-radius: 12px 12px 0 0;
+    text-align: center;
+    padding: 10px 10px;
+    font-size: 0.95rem;
+    box-sizing: border-box;
+    margin-top: 2rem;
+    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25);
+}
+
+@media (max-width: 768px) {
+    .info-bar-fixed {
+        position: static;
+        font-size: 0.85rem;
+        padding: 8px 4px;
+        border-radius: 0;
+    }
+}
+
+.table-responsive {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.table-responsive table {
+    min-width: 1000px;
+}
+
+.bg-dark .form-control::placeholder {
+    color: #ccc !important;
+    opacity: 1;
+}
+
+.toast-body {
+    color: #ffffff !important;
+    font-weight: 500 !important;
+}
+
+.toast {
+    animation: fadeInUp 0.5s ease;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#mass-add-list li.active {
+    background: #198754 !important;
+    color: #fff !important;
+    border: 1px solid #000000 !important;
+}
+
+#mass-add-list li {
+    transition: background 0.2s;
+}
+
+.quantity-input {
+    width: 60px;
+    background: #343a40;
+    color: #fff;
+    border: 1px solid #495057;
+    border-radius: 4px;
+    text-align: center;
+}
+
+.add-btn {
+    margin-left: 10px;
+}
+
+.quantity-controls {
+    min-width: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 4px;
+}
+
+.list-group-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#empty-placeholder {
+    font-style: italic;
+    pointer-events: none;
+}
+
+#items li.hide-purchased {
+    display: none !important;
+}
+
+.list-group-item:first-child,
+.list-group-item:last-child {
+    border-radius: 0 !important;
+}
+
+.fade-out {
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+
+@media (pointer: fine) {
+    .only-mobile {
+        display: none !important;
+    }
+}
+
+
+.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/access_users.js

@@ -0,0 +1,176 @@
+(function () {
+    const $ = (s, root = document) => root.querySelector(s);
+    const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));
+    const toast = (m, t = 'info') => (window.showToast ? window.showToast(m, t) : console.log(`[${t}]`, m));
+
+    function appendToken(box, user) {
+        const tokensBox = $('.tokens', box);
+        if (!tokensBox || !user?.id || !user?.username) return;
+        const empty = $('.no-perms', box);
+        if (empty) empty.remove();
+
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'btn btn-sm btn-outline-secondary rounded-pill token';
+        btn.dataset.userId = user.id;
+        btn.dataset.username = user.username;
+        btn.title = 'Kliknij, aby odebrać dostęp';
+        btn.innerHTML = `@${user.username} <span aria-hidden="true">×</span>`;
+        tokensBox.appendChild(btn);
+    }
+
+    function wantsJSON() {
+        return {
+            'Accept': 'application/json',
+            'X-Requested-With': 'fetch'
+        };
+    }
+
+    async function postAction(postUrl, nextPath, params) {
+        const form = new FormData();
+        for (const [k, v] of Object.entries(params)) form.set(k, v);
+        form.set('next', nextPath); // dla trybu HTML fallback
+
+        try {
+            const res = await fetch(postUrl, {
+                method: 'POST',
+                body: form,
+                credentials: 'same-origin',
+                headers: wantsJSON()
+            });
+
+            const ct = res.headers.get('content-type') || '';
+            if (ct.includes('application/json')) {
+                const data = await res.json().catch(() => ({}));
+                return { ok: !!data?.ok, data, status: res.status };
+            }
+            return { ok: res.ok, data: null, status: res.status };
+        } catch (e) {
+            console.error('POST failed', e);
+            return { ok: false, data: null, status: 0 };
+        }
+    }
+
+    function initEditor(box) {
+        if (!box || !box.classList?.contains('access-editor')) return;
+        if (box.dataset._accessEditorInit === '1') return;
+        box.dataset._accessEditorInit = '1';
+
+        const postUrl = box.dataset.postUrl || location.pathname;
+        const nextPath = box.dataset.next || location.pathname;
+        const suggestUrl = box.dataset.suggestUrl || '';
+        const grantAction = box.dataset.grantAction || 'grant';
+        const revokeField = box.dataset.revokeField || 'revoke_user_id';
+
+        const tokensBox = $('.tokens', box);
+        const input = $('.access-input', box);
+        const addBtn = $('.access-add', box);
+
+        // współdzielony datalist do sugestii
+        let datalist = $('#userHintsGeneric');
+        if (!datalist) {
+            datalist = document.createElement('datalist');
+            datalist.id = 'userHintsGeneric';
+            document.body.appendChild(datalist);
+        }
+        input?.setAttribute('list', datalist.id);
+
+        const unique = (arr) => Array.from(new Set(arr));
+        const parseUserText = (txt) => unique((txt || '').split(/[\s,;]+/g).map(s => s.trim().replace(/^@/, '').toLowerCase()).filter(Boolean));
+        const debounce = (fn, ms = 200) => { let t; return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; };
+
+        // Sugestie (GET JSON)
+        const renderHints = (users = []) => { datalist.innerHTML = users.slice(0, 20).map(u => `<option value="${u}">@${u}</option>`).join(''); };
+        let acCtrl = null;
+        const fetchHints = debounce(async (q) => {
+            if (!suggestUrl) return;
+            try {
+                acCtrl?.abort();
+                acCtrl = new AbortController();
+                const res = await fetch(`${suggestUrl}?q=${encodeURIComponent(q || '')}`, { credentials: 'same-origin', signal: acCtrl.signal });
+                if (!res.ok) return renderHints([]);
+                const data = await res.json().catch(() => ({ users: [] }));
+                renderHints(data.users || []);
+            } catch { renderHints([]); }
+        }, 200);
+
+        input?.addEventListener('focus', () => fetchHints(input.value));
+        input?.addEventListener('input', () => fetchHints(input.value));
+
+        // Revoke (klik w token)
+        box.addEventListener('click', async (e) => {
+            const btn = e.target.closest('.token');
+            if (!btn || !box.contains(btn)) return;
+
+            const userId = btn.dataset.userId;
+            const username = btn.dataset.username;
+            if (!userId) return toast('Brak identyfikatora użytkownika.', 'danger');
+
+            btn.disabled = true; btn.classList.add('disabled');
+            const res = await postAction(postUrl, nextPath, { [revokeField]: userId });
+
+            if (res.ok) {
+                btn.remove();
+                if (!$$('.token', box).length && tokensBox) {
+                    const empty = document.createElement('span');
+                    empty.className = 'no-perms text-warning small';
+                    empty.textContent = 'Brak dodanych uprawnień.';
+                    tokensBox.appendChild(empty);
+                }
+                toast(`Odebrano dostęp: @${username}`, 'success');
+            } else {
+                btn.disabled = false; btn.classList.remove('disabled');
+                toast(`Nie udało się odebrać dostępu @${username}`, 'danger');
+            }
+        });
+
+        // Grant (wiele loginów, bez przeładowania strony)
+        async function addUsers() {
+            const users = parseUserText(input?.value);
+            if (!users?.length) return toast('Podaj co najmniej jednego użytkownika', 'warning');
+
+            addBtn.disabled = true;
+            const prevText = addBtn.textContent;
+            addBtn.textContent = 'Dodaję…';
+
+            let okCount = 0, failCount = 0, appended = 0;
+
+            for (const u of users) {
+                const res = await postAction(postUrl, nextPath, { action: grantAction, grant_username: u });
+                if (res.ok) {
+                    okCount++;
+                    // jeśli backend odda JSON z userem – dolep token live
+                    if (res.data?.user) {
+                        appendToken(box, res.data.user);
+                        appended++;
+                    }
+                } else {
+                    failCount++;
+                }
+            }
+
+            addBtn.disabled = false;
+            addBtn.textContent = prevText;
+            if (input) input.value = '';
+
+            if (okCount) toast(`Dodano dostęp: ${okCount} użytkownika`, 'success');
+            if (failCount) toast(`Błędy przy dodawaniu: ${failCount}`, 'danger');
+
+            // fallback: jeśli nic nie dolepiliśmy (brak JSON), odśwież, by zobaczyć nowe tokeny
+            if (okCount && appended === 0) {
+                // opóźnij minimalnie, by toast mignął
+                setTimeout(() => location.reload(), 400);
+            }
+        }
+
+        addBtn?.addEventListener('click', addUsers);
+        input?.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); addUsers(); } });
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+        $$('.access-editor').forEach(initEditor);
+    });
+    document.addEventListener('shown.bs.modal', (ev) => {
+        $$('.access-editor', ev.target).forEach(initEditor);
+    });
+})();

static/js/admin_receipt_crop.js

@@ -13,16 +13,16 @@
 
         cropModal.addEventListener("shown.bs.modal", function (event) {
             const button = event.relatedTarget;
-            const imgSrc = button.getAttribute("data-img-src");
+            const baseSrc = button.getAttribute("data-img-src") || "";
+            const ver = button.getAttribute("data-version") || Date.now();
+            const sep = baseSrc.includes("?") ? "&" : "?";
+            cropImage.src = baseSrc + sep + "cb=" + ver;
+
             currentReceiptId = button.getAttribute("data-receipt-id");
-            cropImage.src = imgSrc;
 
             document.querySelectorAll('.cropper-container').forEach(e => e.remove());
-
             if (cropper) cropper.destroy();
-            cropImage.onload = () => {
-                cropper = cropUtils.initCropper(cropImage);
-            };
+            cropImage.onload = () => { cropper = cropUtils.initCropper(cropImage); };
         });
 
         cropModal.addEventListener("hidden.bs.modal", function () {

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/chart_controls.js

@@ -0,0 +1,179 @@
+// chart_controls.js
+// Logika UI: wybór zakresu, przełączanie dzienny/miesięczny, kategorie, show_all.
+// Współpracuje z window.loadExpenses (z expense_chart.js).
+document.addEventListener("DOMContentLoaded", function () {
+    const toggleMonthlySplit = document.getElementById("toggleMonthlySplit");
+    const toggleDailySplit = document.getElementById("toggleDailySplit");
+    const toggleCategory = document.getElementById("toggleCategorySplit");
+    const startDateInput = document.getElementById("startDate");
+    const endDateInput = document.getElementById("endDate");
+    const customRangeBtn = document.getElementById("customRangeBtn");
+    const showAllCheckbox = document.getElementById("showAllLists");
+
+    // pomocnicze
+    const iso = (d) => d.toISOString().split("T")[0];
+    const today = () => new Date();
+    const daysAgo = (n) => { const d = new Date(); d.setDate(d.getDate() - n); return d; };
+
+    function setActiveTimeSplit(active) {
+        const on = (btn) => { btn.classList.add("btn-primary"); btn.classList.remove("btn-outline-light"); btn.setAttribute("aria-pressed", "true"); };
+        const off = (btn) => { btn.classList.remove("btn-primary"); btn.classList.add("btn-outline-light"); btn.setAttribute("aria-pressed", "false"); };
+        if (active === "monthly") { on(toggleMonthlySplit); off(toggleDailySplit); }
+        else { on(toggleDailySplit); off(toggleMonthlySplit); }
+    }
+    function isDailyActive() { return toggleDailySplit?.classList.contains("btn-primary"); }
+
+    // ——— KLUCZOWE: jedno miejsce, które przeładowuje wykres zgodnie z aktualnym trybem ———
+    function reloadRespectingSplit(preferredRange = null) {
+        // preferredRange używamy dla przycisków typu monthly/quarterly/halfyearly/yearly
+        const sd = startDateInput?.value || null;
+        const ed = endDateInput?.value || null;
+
+        if (isDailyActive()) {
+            // Dzienny ZAWSZE z datami (fallback: ostatnie 30 dni), bo inaczej backend spadnie na monthly
+            const _sd = sd && ed ? sd : iso(daysAgo(30));
+            const _ed = sd && ed ? ed : iso(today());
+            window.loadExpenses("daily", _sd, _ed);
+            return;
+        }
+
+        // Miesięczny
+        if (sd && ed) {
+            window.loadExpenses("monthly", sd, ed);
+        } else if (preferredRange) {
+            window.loadExpenses(preferredRange);
+        } else {
+            window.loadExpenses("monthly");
+        }
+    }
+
+    // ——— Przełączniki czasu ———
+    toggleMonthlySplit?.addEventListener("click", () => {
+        setActiveTimeSplit("monthly");
+        reloadRespectingSplit("monthly");
+    });
+
+    toggleDailySplit?.addEventListener("click", () => {
+        setActiveTimeSplit("daily");
+        reloadRespectingSplit();
+    });
+
+    // ——— Podział na kategorie ———
+    toggleCategory?.addEventListener("click", function () {
+        const active = this.classList.contains("btn-primary");
+        if (active) {
+            this.classList.remove("btn-primary");
+            this.classList.add("btn-outline-light");
+            this.setAttribute("aria-pressed", "false");
+            this.textContent = "Przełącz na kategorie";
+            window.setCategorySplit(false);
+        } else {
+            this.classList.add("btn-primary");
+            this.classList.remove("btn-outline-light");
+            this.setAttribute("aria-pressed", "true");
+            this.textContent = "Przełącz na sumy";
+            window.setCategorySplit(true);
+        }
+
+        // porzucenie zakresu
+        document.querySelectorAll("#chartTab .range-btn").forEach(b => b.classList.remove("active"));
+        reloadRespectingSplit();
+    });
+
+
+    // ——— Własny zakres ———
+    customRangeBtn?.addEventListener("click", function () {
+        const sd = startDateInput?.value;
+        const ed = endDateInput?.value;
+        if (!(sd && ed)) return alert("Proszę wybrać obie daty!");
+        reloadRespectingSplit();
+    });
+
+    // ——— Predefiniowane zakresy pod wykresem ———
+    document.querySelectorAll("#chartTab .range-btn").forEach((btn) => {
+        btn.addEventListener("click", function () {
+            document.querySelectorAll("#chartTab .range-btn").forEach((b) => b.classList.remove("active"));
+            this.classList.add("active");
+            const r = this.getAttribute("data-range"); // last30days/currentmonth/monthly/quarterly/halfyearly/yearly
+
+            // Zakresy kubełkowane – bez start/end, bez "daily"
+            if (["monthly", "quarterly", "halfyearly", "yearly"].includes(r)) {
+                if (startDateInput) startDateInput.value = "";
+                if (endDateInput) endDateInput.value = "";
+                window.loadExpenses(r); // => /expenses_data?range=monthly|quarterly|halfyearly|yearly
+                return;
+            }
+
+            if (r === "currentmonth") {
+                const t = today();
+                const first = new Date(t.getFullYear(), t.getMonth(), 1);
+                if (isDailyActive()) {
+                    window.loadExpenses("daily", iso(first), iso(t));
+                } else {
+                    window.loadExpenses("monthly", iso(first), iso(t));
+                }
+                return;
+            }
+            if (r === "last30days") {
+                if (isDailyActive()) {
+                    window.loadExpenses("daily", iso(daysAgo(30)), iso(today()));
+                } else {
+                    window.loadExpenses("last30days");
+                }
+                return;
+            }
+
+            // reset pickera
+            if (startDateInput) startDateInput.value = "";
+            if (endDateInput) endDateInput.value = "";
+
+            reloadRespectingSplit(r);
+        });
+    });
+
+    // ——— KATEGORIE (🌐 Wszystkie + pojedyncze) ———
+    document.querySelectorAll(".category-filter").forEach((btn) => {
+        btn.addEventListener("click", function () {
+            // UI: podmień podświetlenie
+            document.querySelectorAll(".category-filter").forEach(b => {
+                b.classList.remove("btn-success");
+                b.classList.add("btn-outline-light");
+            });
+            this.classList.add("btn-success");
+            this.classList.remove("btn-outline-light");
+
+            // Zapisz filtr kategorii do globalnej zmiennej, którą odczytuje expense_chart.js
+            const cid = this.getAttribute("data-category-id") || "";
+            window.selectedCategoryId = cid;
+
+            // I ważne: przeładuj zgodnie z aktualnym trybem (to naprawia Twój przypadek #1)
+            reloadRespectingSplit();
+        });
+    });
+
+    // ——— SHOW ALL (Uwzględnij listy udostępnione/publiczne) ———
+    showAllCheckbox?.addEventListener("change", () => {
+        reloadRespectingSplit();
+    });
+
+
+    // ——— Inicjalizacja ———
+    // Podpowiedź dat do inputów
+
+
+    //if (startDateInput && endDateInput) {
+    //    startDateInput.value = iso(daysAgo(7));
+    //    endDateInput.value = iso(today());
+    //}
+
+    if (startDateInput && endDateInput) {
+        const now = new Date();
+        const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+
+        startDateInput.value = iso(startOfMonth);
+        endDateInput.value = iso(now);
+    }
+
+    setActiveTimeSplit("daily");
+    reloadRespectingSplit();
+});

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/download_chart.js

@@ -0,0 +1,67 @@
+// download_chart.js — eksport PNG z ciemnym tłem (tymczasowo), bez wielokrotnego bindowania
+
+document.addEventListener("DOMContentLoaded", () => {
+    const dlBtn = document.getElementById("downloadMainChartBtn");
+    if (!dlBtn) return;
+
+    // helper: bezpieczna nazwa pliku
+    const sanitize = (s) =>
+        (s || "")
+            .normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+            .replace(/[^a-zA-Z0-9-_]+/g, "_")
+            .replace(/_+/g, "_").replace(/^_+|_+$/g, "");
+
+    // helper: eksport z tymczasowym tłem
+    const exportChartPNG = (chart, bgColor = "#1e1e1e") => {
+        const canvas = chart.canvas;
+        const ctx = canvas.getContext("2d");
+
+        // 1) zapisz obraz
+        const snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+        // 2) podłóż tło pod istniejący rysunek
+        ctx.save();
+        ctx.globalCompositeOperation = "destination-over";
+        ctx.fillStyle = bgColor;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        ctx.restore();
+
+        // 3) wygeneruj PNG
+        const dataUrl = chart.toBase64Image("image/png", 1.0);
+
+        // 4) przywróć pierwotny obraz (transparentny)
+        ctx.putImageData(snapshot, 0, 0);
+
+        return dataUrl;
+    };
+
+    // jednorazowe bindowanie click
+    if (!dlBtn.dataset.bound) {
+        dlBtn.addEventListener("click", () => {
+            const chart = window.expensesChart || Chart.getChart(document.getElementById("expensesChart"));
+            if (!chart) return;
+
+            // nazwa: zakres + timestamp
+            const now = new Date();
+            const pad = (n) => String(n).padStart(2, "0");
+            const stamp = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
+            const rangeLabel = document.getElementById("chartRangeLabel")?.textContent || "";
+            const filename = `wydatki-${sanitize(rangeLabel)}-${stamp}.png`;
+
+            // (opcjonalnie) upewnij się, że layout jest świeży
+            chart.resize();
+            chart.update("none");
+
+            const a = document.createElement("a");
+            a.href = exportChartPNG(chart, "#1e1e1e"); // tu ustawiasz kolor tła eksportu
+            a.download = filename;
+            a.click();
+        });
+        dlBtn.dataset.bound = "1";
+    }
+
+    // aktywuj przycisk, gdy wykres istnieje
+    const enableIfReady = () => { dlBtn.disabled = !window.expensesChart; };
+    document.addEventListener("expensesChart:ready", enableIfReady);
+    enableIfReady();
+});

static/js/expense_chart.js

@@ -0,0 +1,150 @@
+// expense_chart.js
+// Czyste generowanie wykresu + publiczne API: window.loadExpenses, window.setCategorySplit
+// Współpracuje z backendem /expenses_data (range_type, start/end, by_category) – patrz app.py :contentReference[oaicite:3]{index=3}
+
+document.addEventListener("DOMContentLoaded", function () {
+    let expensesChart = null;
+    let categorySplit = false; // domyślnie wykres całościowy; przycisk w HTML startuje z aria-pressed="false"
+
+    const rangeLabel = document.getElementById("chartRangeLabel");
+    const showAllCheckbox = document.getElementById("showAllLists");
+    const ctx = document.getElementById("expensesChart")?.getContext("2d");
+
+    // Pomocnicze
+    const iso = (d) => d.toISOString().split("T")[0];
+    const today = () => new Date();
+    const daysAgo = (n) => { const d = new Date(); d.setDate(d.getDate() - n); return d; };
+
+    // Jeśli ktoś nie wstrzyknął globalnie selectedCategoryId (np. przez inny widok),
+    // zapewniamy istnienie zmiennej:
+    if (typeof window.selectedCategoryId === "undefined") {
+        window.selectedCategoryId = "";
+    }
+
+    // Ustawia tryb podziału na kategorie, bez odświeżania (kontroler zadzwoni potem w loadExpenses)
+    function setCategorySplit(on) {
+        categorySplit = !!on;
+    }
+
+    // Budowa URL dla /expenses_data zgodnie z backendem (range/start/end/show_all/category_id/by_category) :contentReference[oaicite:4]{index=4}
+    function buildUrl(range, startDate, endDate) {
+        let url = `/expenses_data?range=${encodeURIComponent(range)}`;
+
+        // show_all
+        if (showAllCheckbox) {
+            url += showAllCheckbox.checked ? "&show_all=true" : "&show_all=false";
+        } else {
+            url += "&show_all=true";
+        }
+
+        // daty (dodaj tylko, gdy kompletne)
+        if (startDate && endDate) {
+            url += `&start_date=${encodeURIComponent(startDate)}&end_date=${encodeURIComponent(endDate)}`;
+        }
+
+        // filtr kategorii list (z listy, nie "podziału na kategorie" na wykresie)
+        if (window.selectedCategoryId) {
+            url += `&category_id=${encodeURIComponent(window.selectedCategoryId)}`;
+        }
+
+        // podział na kategorie na wykresie
+        if (categorySplit) {
+            url += "&by_category=true";
+        }
+
+        return url;
+    }
+
+    // Label dla UI
+    function applyRangeLabel(range, startDate, endDate) {
+        if (startDate && endDate) {
+            rangeLabel.textContent = `Widok: własny zakres (${startDate} → ${endDate})`;
+            return;
+        }
+        const map = {
+            last30days: "Widok: ostatnie 30 dni",
+            currentmonth: "Widok: bieżący miesiąc",
+            monthly: "Widok: miesięczne",
+            quarterly: "Widok: kwartalne",
+            halfyearly: "Widok: półroczne",
+            yearly: "Widok: roczne",
+            daily: "Widok: dzienne",
+        };
+        rangeLabel.textContent = map[range] || "Widok: miesięczne";
+    }
+
+    // Publiczne API – kontroler zawsze woła nas z odpowiednim 'range' i (dla daily) z datami.
+    function loadExpenses(range = "monthly", startDate = null, endDate = null) {
+        // Naprawa: daily bez dat => ostatnie 30 dni
+        if (range === "daily" && !(startDate && endDate)) {
+            startDate = iso(daysAgo(30));
+            endDate = iso(today());
+        }
+
+        const url = buildUrl(range, startDate, endDate);
+
+        fetch(url, { cache: "no-store" })
+            .then((r) => r.json())
+            .then((data) => {
+                if (!ctx) return;
+
+                if (expensesChart) { expensesChart.destroy(); window.expensesChart = null; }
+
+                //if (expensesChart) expensesChart.destroy();
+
+                const tooltipOptions = {
+                    mode: "index",
+                    intersect: false,
+                    callbacks: {
+                        label: function (context) {
+                            if (context.parsed.y === 0) return "";
+                            return (context.dataset.label || "Suma") + ": " + context.parsed.y;
+                        },
+                    },
+                };
+
+                if (categorySplit) {
+                    // Stacked per-kategoria – backend zwraca datasets z labelami kategorii :contentReference[oaicite:6]{index=6}
+                    expensesChart = new Chart(ctx, {
+
+                        type: "bar",
+                        data: { labels: data.labels || [], datasets: data.datasets || [] },
+                        options: {
+                            responsive: true,
+                            plugins: { tooltip: tooltipOptions, legend: { position: "top" } },
+                            scales: { x: { stacked: true }, y: { stacked: true, beginAtZero: true } },
+                        },
+                    });
+                } else {
+                    // Całościowo – backend zwraca labels + expenses (sumy) :contentReference[oaicite:7]{index=7}
+                    expensesChart = new Chart(ctx, {
+
+                        type: "bar",
+                        data: {
+                            labels: data.labels || [],
+                            datasets: [{
+                                label: "Suma wydatków [PLN]",
+                                data: data.expenses || [],
+                            }],
+                        },
+                        options: {
+                            responsive: true,
+                            plugins: { tooltip: tooltipOptions },
+                            scales: { y: { beginAtZero: true } },
+                        },
+                    });
+                }
+
+                // na potrzeby otwarciu w modalu
+                window.expensesChart = expensesChart;
+                document.dispatchEvent(new Event('expensesChart:ready'));
+
+                applyRangeLabel(range, startDate, endDate);
+            })
+            .catch((e) => console.error("Błąd pobierania danych:", e));
+    }
+
+    // Eksport publiczny dla kontrolerów
+    window.loadExpenses = loadExpenses;
+    window.setCategorySplit = setCategorySplit;
+});

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,173 @@
+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 applyCustomBtn = document.getElementById('applyCustomRange');
+    const customStartInput = document.getElementById('customStart');
+    const customEndInput = document.getElementById('customEnd');
+
+    if (customStartInput && customEndInput) {
+        const now = new Date();
+        const y = now.getFullYear();
+        const m = String(now.getMonth() + 1).padStart(2, '0');
+        const d = String(now.getDate()).padStart(2, '0');
+        customStartInput.value = `${y}-${m}-01`;
+        customEndInput.value = `${y}-${m}-${d}`;
+    }
+
+    window.selectedCategoryId = "";
+    let initialLoad = true;
+
+    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() {
+        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") {
+                if (categoriesStr.trim() !== "") row.style.display = 'none';
+            } else {
+                if (!categories.includes(String(window.selectedCategoryId))) row.style.display = 'none';
+            }
+        });
+    }
+
+    function filterByCustomRange(startStr, endStr) {
+        const start = new Date(startStr);
+        const end = new Date(endStr);
+        if (isNaN(start) || isNaN(end)) return;
+        end.setHours(23, 59, 59, 999);
+        rows.forEach(row => {
+            const rowDateObj = new Date(row.dataset.date);
+            const show = rowDateObj >= start && rowDateObj <= end;
+            row.style.display = show ? '' : 'none';
+        });
+    }
+
+    checkboxes.forEach(cb => cb.addEventListener('change', updateTotal));
+
+    filterButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            initialLoad = false;
+            filterButtons.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            const range = btn.dataset.range;
+            filterByRange(range);
+            applyExpenseFilter();
+            applyCategoryFilter();
+            updateTotal();
+        });
+    });
+
+    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();
+            }
+        });
+    });
+
+    if (applyCustomBtn) {
+        applyCustomBtn.addEventListener('click', () => {
+            const startStr = customStartInput?.value;
+            const endStr = customEndInput?.value;
+            if (!startStr || !endStr) {
+                alert('Proszę wybrać obie daty!');
+                return;
+            }
+            initialLoad = false;
+            document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
+            filterByCustomRange(startStr, endStr);
+            applyExpenseFilter();
+            applyCategoryFilter();
+            updateTotal();
+        });
+    }
+
+    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');
     }
   });
@@ -225,17 +224,17 @@ function toggleVisibility(listId) {
       const copyBtn = document.getElementById('copyBtn');
       const toggleBtn = document.getElementById('toggleVisibilityBtn');
 
+      // URL zawsze widoczny i aktywny
+      shareUrlSpan.style.display = 'inline';
+      shareUrlSpan.textContent = data.share_url;
+      copyBtn.disabled = false;
+
       if (data.is_public) {
-        shareHeader.textContent = '🔗 Udostępnij link:';
-        shareUrlSpan.style.display = 'inline';
-        shareUrlSpan.textContent = data.share_url;
-        copyBtn.disabled = false;
+        shareHeader.textContent = '🔗 Udostępnij link (lista publiczna)';
         toggleBtn.innerHTML = '🙈 Ukryj listę';
       } else {
-        shareHeader.textContent = '🙈 Lista jest ukryta przed gośćmi';
-        shareUrlSpan.style.display = 'none';
-        copyBtn.disabled = true;
-        toggleBtn.innerHTML = '👁️ Udostępnij ponownie';
+        shareHeader.textContent = '🔗 Udostępnij link (widoczna tylko przez link / uprawnienia)';
+        toggleBtn.innerHTML = '🐵 Uczyń publiczną';
       }
     });
 }

static/js/lists_access.js

@@ -0,0 +1,254 @@
+(function () {
+    const $ = (s, root = document) => root.querySelector(s);
+    const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));
+
+    const filterInput = $('#listFilter');
+    const filterCount = $('#filterCount');
+    const selectAll = $('#selectAll');
+    const bulkTokens = $('#bulkTokens');
+    const bulkInput = $('#bulkUsersInput');
+    const bulkBtn = $('#bulkAddBtn');
+    const datalist = $('#userHints');
+
+    const unique = (arr) => Array.from(new Set(arr));
+    const parseUserText = (txt) => unique((txt || '')
+        .split(/[\s,;]+/g)
+        .map(s => s.trim().replace(/^@/, '').toLowerCase())
+        .filter(Boolean)
+    );
+
+    const selectedListIds = () =>
+        $$('.row-check:checked').map(ch => ch.dataset.listId);
+
+    const visibleRows = () =>
+        $$('#listsTable tbody tr').filter(r => r.style.display !== 'none');
+
+    // ===== Podpowiedzi (datalist) z DOM-u =====
+    (function buildHints() {
+        const names = new Set();
+        $$('.owner-username').forEach(el => names.add(el.dataset.username));
+        $$('.permitted-username').forEach(el => names.add(el.dataset.username));
+        // również tokeny już wyrenderowane
+        $$('.token[data-username]').forEach(el => names.add(el.dataset.username));
+        datalist.innerHTML = Array.from(names)
+            .sort((a, b) => a.localeCompare(b))
+            .map(u => `<option value="${u}">@${u}</option>`)
+            .join('');
+    })();
+
+    // ===== Live filter =====
+    function applyFilter() {
+        const q = (filterInput?.value || '').trim().toLowerCase();
+        let shown = 0;
+        $$('#listsTable tbody tr').forEach(tr => {
+            const hay = `${tr.dataset.id || ''} ${tr.dataset.title || ''} ${tr.dataset.owner || ''}`;
+            const ok = !q || hay.includes(q);
+            tr.style.display = ok ? '' : 'none';
+            if (ok) shown++;
+        });
+        if (filterCount) filterCount.textContent = shown ? `Widoczne: ${shown}` : 'Brak wyników';
+    }
+    filterInput?.addEventListener('input', applyFilter);
+    applyFilter();
+
+    // ===== Select all =====
+    selectAll?.addEventListener('change', () => {
+        visibleRows().forEach(tr => {
+            const cb = tr.querySelector('.row-check');
+            if (cb) cb.checked = selectAll.checked;
+        });
+    });
+
+    // ===== Copy share URL =====
+    $$('.copy-share').forEach(btn => {
+        btn.addEventListener('click', async () => {
+            const url = btn.dataset.url;
+            try {
+                await navigator.clipboard.writeText(url);
+                showToast('Skopiowano link udostępnienia', 'success');
+            } catch {
+                const ta = Object.assign(document.createElement('textarea'), { value: url });
+                document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove();
+                showToast('Skopiowano link udostępnienia', 'success');
+            }
+        });
+    });
+
+    // ===== Tokenized users field (global – belka) =====
+    function addGlobalToken(username) {
+        if (!username) return;
+        const exists = $(`.user-token[data-user="${username}"]`, bulkTokens);
+        if (exists) return;
+        const token = document.createElement('span');
+        token.className = 'badge rounded-pill text-bg-secondary user-token';
+        token.dataset.user = username;
+        token.innerHTML = `@${username} <button type="button" class="btn btn-sm btn-link p-0 ms-1 text-white">✕</button>`;
+        token.querySelector('button').addEventListener('click', () => token.remove());
+        bulkTokens.appendChild(token);
+    }
+    bulkInput?.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            parseUserText(bulkInput.value).forEach(addGlobalToken);
+            bulkInput.value = '';
+        }
+    });
+    bulkInput?.addEventListener('change', () => {
+        parseUserText(bulkInput.value).forEach(addGlobalToken);
+        bulkInput.value = '';
+    });
+
+    // ===== Bulk grant (z belki) =====
+    async function bulkGrant() {
+        const lists = selectedListIds();
+        const users = $$('.user-token', bulkTokens).map(t => t.dataset.user);
+
+        if (!lists.length) { showToast('Zaznacz przynajmniej jedną listę', 'warning'); return; }
+        if (!users.length) { showToast('Dodaj przynajmniej jednego użytkownika', 'warning'); return; }
+
+        bulkBtn.disabled = true;
+        bulkBtn.textContent = 'Pracuję…';
+
+        const url = location.pathname + location.search;
+        let ok = 0, fail = 0;
+
+        for (const lid of lists) {
+            for (const u of users) {
+                const form = new FormData();
+                form.set('action', 'grant');
+                form.set('target_list_id', lid);
+                form.set('grant_username', u);
+
+                try {
+                    const res = await fetch(url, { method: 'POST', body: form, credentials: 'same-origin' });
+                    if (res.ok) ok++; else fail++;
+                } catch { fail++; }
+            }
+        }
+
+        bulkBtn.disabled = false;
+        bulkBtn.textContent = '➕ Nadaj dostęp';
+
+        showToast(`Gotowe. Sukcesy: ${ok}${fail ? `, błędy: ${fail}` : ''}`, fail ? 'danger' : 'success');
+        location.reload();
+    }
+    bulkBtn?.addEventListener('click', bulkGrant);
+
+    // ===== Per-row "Access editor" (tokeny + dodawanie) =====
+    async function postAction(params) {
+        const url = location.pathname + location.search;
+        const form = new FormData();
+        for (const [k, v] of Object.entries(params)) form.set(k, v);
+        const res = await fetch(url, { method: 'POST', body: form, credentials: 'same-origin' });
+        return res.ok;
+    }
+
+    // Delegacja zdarzeń: kliknięcie tokenu = revoke
+    document.addEventListener('click', async (e) => {
+        const btn = e.target.closest('.access-editor .token');
+        if (!btn) return;
+
+        const wrapper = btn.closest('.access-editor');
+        const listId = wrapper?.dataset.listId;
+        const userId = btn.dataset.userId;
+        const username = btn.dataset.username;
+
+        if (!listId || !userId) return;
+
+        btn.disabled = true;
+        btn.classList.add('disabled');
+
+        const ok = await postAction({
+            action: 'revoke',
+            target_list_id: listId,
+            revoke_user_id: userId
+        });
+
+        if (ok) {
+            btn.remove();
+            const tokens = $$('.token', wrapper);
+            if (!tokens.length) {
+                // pokaż info „brak uprawnień”
+                let empty = $('.no-perms', wrapper);
+                if (!empty) {
+                    empty = document.createElement('span');
+                    empty.className = 'text-warning small no-perms';
+                    empty.textContent = 'Brak dodanych uprawnień.';
+                    $('.tokens', wrapper).appendChild(empty);
+                }
+            }
+            showToast(`Odebrano dostęp: @${username}`, 'success');
+        } else {
+            btn.disabled = false;
+            btn.classList.remove('disabled');
+            showToast(`Nie udało się odebrać dostępu @${username}`, 'danger');
+        }
+    });
+
+    // Dodawanie wielu użytkowników per-row
+    document.addEventListener('click', async (e) => {
+        const addBtn = e.target.closest('.access-editor .access-add');
+        if (!addBtn) return;
+
+        const wrapper = addBtn.closest('.access-editor');
+        const listId = wrapper?.dataset.listId;
+        const input = $('.access-input', wrapper);
+        if (!listId || !input) return;
+
+        const users = parseUserText(input.value);
+        if (!users.length) { showToast('Podaj co najmniej jednego użytkownika', 'warning'); return; }
+
+        addBtn.disabled = true;
+        addBtn.textContent = 'Dodaję…';
+
+        let okCount = 0, failCount = 0;
+
+        for (const u of users) {
+            const ok = await postAction({
+                action: 'grant',
+                target_list_id: listId,
+                grant_username: u
+            });
+            if (ok) {
+                okCount++;
+                // usuń info „brak uprawnień”
+                $('.no-perms', wrapper)?.remove();
+                // dodaj token jeśli nie ma
+                const exists = $(`.token[data-username="${u}"]`, wrapper);
+                if (!exists) {
+                    const token = document.createElement('button');
+                    token.type = 'button';
+                    token.className = 'btn btn-sm btn-outline-secondary rounded-pill token';
+                    token.dataset.username = u;
+                    token.dataset.userId = ''; // nie znamy ID — token nadal klikany, ale bez revoke po ID
+                    token.title = '@' + u;
+                    token.innerHTML = `@${u} <span aria-hidden="true">×</span>`;
+                    $('.tokens', wrapper).appendChild(token);
+                }
+            } else {
+                failCount++;
+            }
+        }
+
+        addBtn.disabled = false;
+        addBtn.textContent = '➕ Dodaj';
+        input.value = '';
+
+        if (okCount) showToast(`Dodano dostęp: ${okCount} użytk.`, 'success');
+        if (failCount) showToast(`Błędy przy dodawaniu: ${failCount}`, 'danger');
+
+        // Odśwież, by mieć poprawne user_id w tokenach (backend wie lepiej)
+        if (okCount) location.reload();
+    });
+
+    // Enter w polu per-row = zadziałaj jak przycisk
+    document.addEventListener('keydown', (e) => {
+        const inp = e.target.closest('.access-editor .access-input');
+        if (inp && e.key === 'Enter') {
+            e.preventDefault();
+            const btn = inp.closest('.access-editor')?.querySelector('.access-add');
+            btn?.click();
+        }
+    });
+
+})();

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

@@ -1,45 +1,260 @@
 document.addEventListener('DOMContentLoaded', function () {
   const modal = document.getElementById('massAddModal');
   const productList = document.getElementById('mass-add-list');
+  const sortBar = document.getElementById('sort-bar');
+  const productCountDisplay = document.getElementById('product-count');
+  const modalBody = modal?.querySelector('.modal-body');
 
-  // Funkcja normalizacji (usuwa diakrytyki i zamienia na lowercase)
   function normalize(str) {
-    return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+    return str?.trim().toLowerCase() || '';
   }
 
-  modal.addEventListener('show.bs.modal', async function () {
-    let addedProducts = new Set();
+  let sortMode = 'popularity';
+  let limit = 25;
+  let offset = 0;
+  let loading = false;
+  let reachedEnd = false;
+  let allProducts = [];
+  let addedProducts = new Set();
+
+  function renderSortBar() {
+    if (!sortBar) return;
+    sortBar.innerHTML = `
+      Sortuj: <a href="#" id="sort-popularity" ${sortMode === "popularity" ? 'style="font-weight:bold"' : ''}>Popularność</a> |
+      <a href="#" id="sort-alphabetical" ${sortMode === "alphabetical" ? 'style="font-weight:bold"' : ''}>Alfabetycznie</a>
+    `;
+    document.getElementById('sort-popularity').onclick = (e) => {
+      e.preventDefault();
+      if (sortMode !== 'popularity') {
+        sortMode = 'popularity';
+        resetAndFetchProducts();
+      }
+    };
+    document.getElementById('sort-alphabetical').onclick = (e) => {
+      e.preventDefault();
+      if (sortMode !== 'alphabetical') {
+        sortMode = 'alphabetical';
+        resetAndFetchProducts();
+      }
+    };
+  }
+
+  function resetAndFetchProducts() {
+    offset = 0;
+    reachedEnd = false;
+    allProducts = [];
+    productList.innerHTML = '';
+    fetchProducts(true);
+    renderSortBar();
+    if (productCountDisplay) productCountDisplay.textContent = '';
+  }
+
+  async function fetchProducts(reset = false) {
+    if (loading || reachedEnd) return;
+    loading = true;
+
+    if (!reset) {
+      const loadingLi = document.createElement('li');
+      loadingLi.className = 'list-group-item bg-dark text-light loading';
+      loadingLi.textContent = 'Ładowanie...';
+      productList.appendChild(loadingLi);
+    }
+
+    try {
+      const res = await fetch(`/all_products?sort=${sortMode}&limit=${limit}&offset=${offset}`);
+      const data = await res.json();
+      const products = data.products || [];
+
+      if (products.length < limit) reachedEnd = true;
+      allProducts = reset ? products : allProducts.concat(products);
+
+      const loadingEl = productList.querySelector('.loading');
+      if (loadingEl) loadingEl.remove();
+
+      if (reset && products.length === 0) {
+        const emptyLi = document.createElement('li');
+        emptyLi.className = 'list-group-item text-muted bg-dark';
+        emptyLi.textContent = 'Brak produktów do wyświetlenia.';
+        productList.appendChild(emptyLi);
+      } else {
+        renderProducts(products);
+      }
+
+      offset += limit;
+
+      if (productCountDisplay) {
+        productCountDisplay.textContent = `Wyświetlono ${allProducts.length} z ${data.total_count} pozycji`;
+      }
+
+      const statsEl = document.getElementById('massAddProductStats');
+      if (statsEl) {
+        statsEl.textContent = `(${allProducts.length} z ${data.total_count})`;
+      }
+
+
+    } catch (err) {
+      const loadingEl = productList.querySelector('.loading');
+      if (loadingEl) loadingEl.remove();
+      const errorLi = document.createElement('li');
+      errorLi.className = 'list-group-item text-danger bg-dark';
+      errorLi.textContent = 'Błąd ładowania danych';
+      productList.appendChild(errorLi);
+    }
+
+    loading = false;
+  }
+
+  function getAlreadyAddedProducts() {
+    const set = new Set();
     document.querySelectorAll('#items li').forEach(li => {
       if (li.dataset.name) {
-        addedProducts.add(normalize(li.dataset.name));
+        set.add(normalize(li.dataset.name));
       }
     });
+    return set;
+  }
 
-    productList.innerHTML = '<li class="list-group-item bg-dark text-light">Ładowanie...</li>';
-    try {
-      const res = await fetch('/all_products');
-      const data = await res.json();
-      const allproducts = data.allproducts;
-      productList.innerHTML = '';
-      allproducts.forEach(name => {
-        const li = document.createElement('li');
-        li.className = 'list-group-item d-flex justify-content-between align-items-center bg-dark text-light';
+  function renderProducts(products) {
+    addedProducts = getAlreadyAddedProducts();
 
-        if (addedProducts.has(normalize(name))) {
-          const nameSpan = document.createElement('span');
-          nameSpan.textContent = name;
-          li.appendChild(nameSpan);
+    const existingNames = new Set();
+    document.querySelectorAll('#mass-add-list li').forEach(li => {
+      const name = li.querySelector('span')?.textContent;
+      if (name) existingNames.add(normalize(name));
+    });
 
-          li.classList.add('opacity-50');
-          const badge = document.createElement('span');
-          badge.className = 'badge bg-success ms-auto';
-          badge.textContent = 'Dodano';
-          li.appendChild(badge);
-        } else {
-          const nameSpan = document.createElement('span');
-          nameSpan.textContent = name;
-          nameSpan.style.flex = '1 1 auto';
-          li.appendChild(nameSpan);
+    products.forEach(product => {
+      const name = typeof product === "object" ? product.name : product;
+      const normName = normalize(name);
+      if (existingNames.has(normName)) return;
+      existingNames.add(normName);
+
+      const li = document.createElement('li');
+      li.className = 'list-group-item d-flex justify-content-between align-items-center bg-dark text-light';
+
+      if (addedProducts.has(normName)) {
+        const nameSpan = document.createElement('span');
+        nameSpan.textContent = name;
+        li.appendChild(nameSpan);
+        li.classList.add('opacity-50');
+        const badge = document.createElement('span');
+        badge.className = 'badge bg-success ms-auto';
+        badge.textContent = 'Dodano';
+        li.appendChild(badge);
+      } else {
+        const nameSpan = document.createElement('span');
+        nameSpan.textContent = name;
+        nameSpan.style.flex = '1 1 auto';
+        li.appendChild(nameSpan);
+
+        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);
+
+        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 });
+        };
+
+        li.append(qtyWrapper, btn);
+      }
+
+      productList.appendChild(li);
+    });
+  }
+
+  if (modalBody) {
+    modalBody.addEventListener('scroll', function () {
+      if (!loading && !reachedEnd && (modalBody.scrollTop + modalBody.clientHeight > modalBody.scrollHeight - 80)) {
+        fetchProducts(false);
+      }
+    });
+  }
+
+  modal.addEventListener('show.bs.modal', function () {
+    resetAndFetchProducts();
+  });
+
+  renderSortBar();
+
+  socket.on('item_added', data => {
+    document.querySelectorAll('#mass-add-list li').forEach(li => {
+      const itemName = li.firstChild?.textContent.trim();
+      if (normalize(itemName) === normalize(data.name) && !li.classList.contains('opacity-50')) {
+        li.classList.add('opacity-50');
+        li.querySelectorAll('button').forEach(btn => btn.remove());
+        const quantityControls = li.querySelector('.quantity-controls');
+        if (quantityControls) quantityControls.remove();
+
+        const badge = document.createElement('span');
+        badge.className = 'badge bg-success';
+        badge.textContent = 'Dodano';
+
+        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.append(undoBtn, timerBtn);
+
+        const rightWrapper = document.createElement('div');
+        rightWrapper.className = 'd-flex align-items-center gap-2 ms-auto';
+        rightWrapper.append(btnGroup, badge);
+        li.appendChild(rightWrapper);
+
+        const intervalId = setInterval(() => {
+          secondsLeft--;
+          if (secondsLeft > 0) {
+            timerBtn.textContent = `${secondsLeft}s`;
+          } else {
+            clearInterval(intervalId);
+            btnGroup.remove();
+          }
+        }, 1000);
+
+        undoBtn.onclick = () => {
+          clearInterval(intervalId);
+          btnGroup.remove();
+          badge.remove();
+          li.classList.remove('opacity-50');
 
           const qtyWrapper = document.createElement('div');
           qtyWrapper.className = 'd-flex align-items-center ms-2 quantity-controls';
@@ -48,9 +263,6 @@ document.addEventListener('DOMContentLoaded', function () {
           minusBtn.type = 'button';
           minusBtn.className = 'btn btn-outline-light btn-sm px-2';
           minusBtn.textContent = '−';
-          minusBtn.onclick = () => {
-            qty.value = Math.max(1, parseInt(qty.value) - 1);
-          };
 
           const qty = document.createElement('input');
           qty.type = 'number';
@@ -65,52 +277,32 @@ document.addEventListener('DOMContentLoaded', function () {
           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.appendChild(minusBtn);
-          qtyWrapper.appendChild(qty);
-          qtyWrapper.appendChild(plusBtn);
-
-          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 });
-          };
-
+          qtyWrapper.append(minusBtn, qty, plusBtn);
           li.appendChild(qtyWrapper);
-          li.appendChild(btn);
-        }
-        productList.appendChild(li);
-      });
 
-    } catch (err) {
-      productList.innerHTML = '<li class="list-group-item text-danger bg-dark">Błąd ładowania danych</li>';
-    }
-  });
+          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);
 
-  socket.on('item_added', data => {
-    document.querySelectorAll('#mass-add-list li').forEach(li => {
-      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);
-
-        li.onclick = null;
+          socket.emit('delete_item', { item_id: data.id });
+        };
       }
     });
   });

static/js/modal_chart.js

@@ -0,0 +1,118 @@
+// modal_chart.js — final: kopiuje kolory z oryginałów, bez fallbacków i bez debugów
+
+function openChartFullscreen(sourceChartIdOrKey, title) {
+    const modalEl = document.getElementById("chartFullscreenModal");
+    const canvas = document.getElementById("chartFullscreenCanvas");
+    const titleEl = document.getElementById("chartModalTitle");
+    if (titleEl) titleEl.textContent = title || "Wykres";
+
+    // Znajdź wykres źródłowy (po elemencie, id Chart.js lub globalu)
+    const srcEl = document.getElementById(sourceChartIdOrKey);
+    const srcChart =
+        (srcEl && Chart.getChart(srcEl)) ||
+        Chart.getChart(sourceChartIdOrKey) ||
+        window[sourceChartIdOrKey] ||
+        window.expensesChart ||
+        null;
+
+    if (!srcChart) {
+        bootstrap.Modal.getOrCreateInstance(modalEl).show();
+        return;
+    }
+
+    // Skopiuj labels i datasets 1:1 (tylko bezpieczne klucze, żeby nie przenosić referencji Chart.js)
+    const safeDataset = (d) => {
+        const out = {
+            // dane i opis
+            label: d.label,
+            data: Array.isArray(d.data) ? d.data.slice() : [],
+            type: d.type,
+            // kolory / styl — dokładnie z oryginału, jeśli były
+            backgroundColor: d.backgroundColor,
+            borderColor: d.borderColor,
+            borderWidth: d.borderWidth,
+            borderSkipped: d.borderSkipped,
+            // stacking / kolejność
+            stack: d.stack,
+            order: d.order,
+            // wszystko co może być ważne dla Twoich barów/konfiguracji
+            parsing: d.parsing,
+            indexAxis: d.indexAxis,
+        };
+        // usuń klucze undefined (Chart.js lubi czyste configi)
+        Object.keys(out).forEach((k) => out[k] === undefined && delete out[k]);
+        return out;
+    };
+
+    const freshData = {
+        labels: Array.isArray(srcChart.data?.labels) ? srcChart.data.labels.slice() : [],
+        datasets: (srcChart.data?.datasets || []).map(safeDataset),
+    };
+
+    // Typ wykresu z oryginału (np. "bar")
+    const chartType = (srcChart.config && srcChart.config.type) || "bar";
+
+    // Minimalne, bezpieczne opcje: responsywność + stacking + orientacja
+    const scx = srcChart.config?.options?.scales?.x || {};
+    const scy = srcChart.config?.options?.scales?.y || {};
+
+    const freshOptions = {
+        responsive: true,
+        maintainAspectRatio: false,
+        // jeżeli oryginał miał pion/poziom, zachowaj
+        indexAxis: srcChart.config?.options?.indexAxis || "x",
+        // nie kopiujemy całych pluginów (unikamy referencji) — domyślne legend/tooltip są OK
+        plugins: {},
+        scales: {
+            x: { stacked: !!scx.stacked },
+            y: { stacked: !!scy.stacked, beginAtZero: scy.beginAtZero !== false },
+        },
+    };
+
+    // Helper: zniszcz wykres na canvasie modala, jeśli istnieje
+    const destroyOnCanvas = () => {
+        if (canvas._chartInstance) {
+            try { canvas._chartInstance.destroy(); } catch { }
+            canvas._chartInstance = null;
+        }
+        const existing = Chart.getChart(canvas);
+        if (existing) {
+            try { existing.destroy(); } catch { }
+        }
+    };
+    destroyOnCanvas();
+
+    // Po pokazaniu modala twórz wykres (gdy ma już wymiary)
+    const onShown = () => {
+        destroyOnCanvas();
+        const ctx = canvas.getContext("2d");
+        canvas._chartInstance = new Chart(ctx, {
+            type: chartType,
+            data: freshData,
+            options: freshOptions,
+        });
+        // lekki nudge layoutu
+        requestAnimationFrame(() => {
+            canvas._chartInstance.resize();
+            canvas._chartInstance.update();
+        });
+    };
+
+    const onHidden = () => { destroyOnCanvas(); };
+
+    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
+    modalEl.addEventListener("shown.bs.modal", onShown, { once: true });
+    modalEl.addEventListener("hidden.bs.modal", onHidden, { once: true });
+
+    modal.show();
+}
+
+// Odblokuj ⛶ gdy bazowy wykres gotowy
+document.addEventListener("expensesChart:ready", () => {
+    const b = document.getElementById("openFsBtn");
+    if (b) b.disabled = false;
+});
+document.addEventListener("DOMContentLoaded", () => {
+    const b = document.getElementById("openFsBtn");
+    if (b && window.expensesChart) b.disabled = false;
+});

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 z bazy danych</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_analysis.js

@@ -21,8 +21,8 @@ async function analyzeReceipts(listId) {
         const duration = ((performance.now() - start) / 1000).toFixed(2);
 
         let html = `<div class="card bg-dark text-white border-secondary p-3">`;
-        html += `<p><b>📊 Łącznie wykryto:</b> ${data.total.toFixed(2)} PLN</p>`;
         html += `<p class="text-secondary"><small>⏱ Czas analizy OCR: ${duration} sek.</small></p>`;
+        html += `<p><b>📊 Łącznie wykryto:</b> ${data.total.toFixed(2)} PLN</p>`;
 
         data.results.forEach((r, i) => {
             const disabled = r.already_added ? "disabled" : "";
@@ -30,8 +30,8 @@ async function analyzeReceipts(listId) {
             const inputField = `<input type="number" id="amount-${i}" value="${r.amount}" step="0.01" class="${inputStyle}" style="width: 120px;" ${disabled}>`;
 
             const button = r.already_added
-                ? `<span class="badge bg-primary ms-2">✅ Dodano</span>`
-                : `<button id="add-btn-${i}" onclick="emitExpense(${i})" class="btn btn-sm btn-outline-success ms-2">➕ Dodaj</button>`;
+                ? `<span class="badge rounded-pill bg-secondary ms-2">Dodano</span>`
+                : `<button id="add-btn-${i}" onclick="emitExpense(${i})" class="btn btn-outline-light ms-2">➕ Dodaj</button>`;
 
             html += `
             <div class="mb-2 d-flex align-items-center gap-2 flex-wrap">
@@ -43,7 +43,7 @@ async function analyzeReceipts(listId) {
 
 
         if (data.results.length > 1) {
-            html += `<button id="addAllBtn" onclick="emitAllExpenses(${data.results.length})" class="btn btn-success mt-3 w-100">➕ Dodaj wszystkie</button>`;
+            html += `<button id="addAllBtn" onclick="emitAllExpenses(${data.results.length})" class="btn btn-sm btn-outline-light mt-3 w-100">➕ Dodaj wszystkie</button>`;
         }
 
         html += `</div>`;

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/show_all_expense.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const showAllCheckbox = document.getElementById('showAllLists');
+    if (!showAllCheckbox) return;
+
+    const params = new URLSearchParams(window.location.search);
+    if (!params.has('show_all')) {
+        params.set('show_all', 'true');
+        window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
+    }
+    showAllCheckbox.checked = params.get('show_all') === 'true';
+
+    showAllCheckbox.addEventListener('change', function () {
+        const urlParams = new URLSearchParams(window.location.search);
+        urlParams.set('show_all', showAllCheckbox.checked ? 'true' : 'false');
+        window.location.search = urlParams.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/table_search.js

@@ -0,0 +1,28 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const searchInput = document.getElementById("search-table");
+    const clearButton = document.getElementById("clear-search");
+    const rows = document.querySelectorAll("table tbody tr");
+
+    if (!searchInput || !rows.length) return;
+
+    function filterTable(query) {
+        const q = query.toLowerCase();
+
+        rows.forEach(row => {
+            const rowText = row.textContent.toLowerCase();
+            row.style.display = rowText.includes(q) ? "" : "none";
+        });
+    }
+
+    searchInput.addEventListener("input", function () {
+        filterTable(this.value);
+    });
+
+    if (clearButton) {
+        clearButton.addEventListener("click", function () {
+            searchInput.value = "";
+            filterTable(""); // Pokaż wszystko
+            searchInput.focus();
+        });
+    }
+});

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/js/user_expenses.js

@@ -1,142 +0,0 @@
-document.addEventListener("DOMContentLoaded", function () {
-    let expensesChart = null;
-    let selectedCategoryId = "";
-    let categorySplit = false; // <-- nowy tryb
-    const rangeLabel = document.getElementById("chartRangeLabel");
-
-    function loadExpenses(range = "monthly", startDate = null, endDate = null) {
-        let url = '/user_expenses_data?range=' + range;
-        const showAllCheckbox = document.getElementById("showAllLists");
-        if (showAllCheckbox && showAllCheckbox.checked) {
-            url += '&show_all=true';
-        }
-        if (startDate && endDate) {
-            url += `&start_date=${startDate}&end_date=${endDate}`;
-        }
-        if (selectedCategoryId) {
-            url += `&category_id=${selectedCategoryId}`;
-        }
-        if (categorySplit) {
-            url += '&by_category=true';
-        }
-
-        fetch(url, { cache: "no-store" })
-            .then(response => response.json())
-            .then(data => {
-                const ctx = document.getElementById('expensesChart').getContext('2d');
-
-                if (expensesChart) {
-                    expensesChart.destroy();
-                }
-
-                if (categorySplit) {
-                    // Tryb z podziałem na kategorie
-                    expensesChart = new Chart(ctx, {
-                        type: 'bar',
-                        data: {
-                            labels: data.labels,
-                            datasets: data.datasets // <-- gotowe z backendu
-                        },
-                        options: {
-                            responsive: true,
-                            plugins: {
-                                tooltip: { mode: 'index', intersect: false },
-                                legend: { position: 'top' }
-                            },
-                            scales: {
-                                x: { stacked: true },
-                                y: { stacked: true, beginAtZero: true }
-                            }
-                        }
-                    });
-                } else {
-                    // Tryb zwykły
-                    expensesChart = new Chart(ctx, {
-                        type: 'bar',
-                        data: {
-                            labels: data.labels,
-                            datasets: [{
-                                label: 'Suma wydatków [PLN]',
-                                data: data.expenses,
-                                backgroundColor: '#0d6efd'
-                            }]
-                        },
-                        options: {
-                            responsive: true,
-                            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);
-            });
-    }
-
-    // Obsługa przycisku przełączania trybu
-    document.getElementById("toggleCategorySplit").addEventListener("click", function () {
-        categorySplit = !categorySplit;
-        if (categorySplit) {
-            this.textContent = "🔵 Pokaż całościowo";
-            this.classList.remove("btn-outline-warning");
-            this.classList.add("btn-outline-info");
-        } else {
-            this.textContent = "🎨 Pokaż podział na kategorie";
-            this.classList.remove("btn-outline-info");
-            this.classList.add("btn-outline-warning");
-        }
-        loadExpenses(); // przeładuj wykres
-    });
-
-    // Reszta Twojego kodu bez zmian...
-    const startDateInput = document.getElementById("startDate");
-    const endDateInput = document.getElementById("endDate");
-    const today = new Date();
-    const lastWeek = new Date(today);
-    lastWeek.setDate(today.getDate() - 7);
-    const formatDate = (d) => d.toISOString().split('T')[0];
-    startDateInput.value = formatDate(lastWeek);
-    endDateInput.value = formatDate(today);
-
-    loadExpenses();
-
-    document.getElementById('customRangeBtn').addEventListener('click', function () {
-        const startDate = startDateInput.value;
-        const endDate = endDateInput.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.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.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();
-        });
-    });
-});

static/js/user_receipt_crop.js

@@ -13,16 +13,16 @@
 
         cropModal.addEventListener("shown.bs.modal", function (event) {
             const button = event.relatedTarget;
-            const imgSrc = button.getAttribute("data-img-src");
+            const baseSrc = button.getAttribute("data-img-src") || "";
+            const ver = button.getAttribute("data-version") || Date.now();
+            const sep = baseSrc.includes("?") ? "&" : "?";
+            cropImage.src = baseSrc + sep + "cb=" + ver;
+
             currentReceiptId = button.getAttribute("data-receipt-id");
-            cropImage.src = imgSrc;
 
             document.querySelectorAll('.cropper-container').forEach(e => e.remove());
-
             if (cropper) cropper.destroy();
-            cropImage.onload = () => {
-                cropper = cropUtils.initCropper(cropImage);
-            };
+            cropImage.onload = () => { cropper = cropUtils.initCropper(cropImage); };
         });
 
         cropModal.addEventListener("hidden.bs.modal", function () {

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

@@ -4,16 +4,17 @@
 
 <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
   <h2 class="mb-2">⚙️ Panel administratora</h2>
-  <a href="/" class="btn btn-outline-secondary">← Powrót do strony głównej</a>
+  <a href="{{ url_for('main_page') }}" class="btn btn-outline-secondary">← Powrót do strony głównej</a>
 </div>
 
-<div class="card bg-dark text-white mb-4">
+<div class="card bg-secondary bg-opacity-10 text-white mb-4">
   <div class="card-body p-2">
     <div class="d-flex flex-wrap gap-2">
       <a href="{{ url_for('list_users') }}" class="btn btn-outline-light btn-sm">👥 Użytkownicy</a>
-      <a href="{{ url_for('admin_receipts', id='all') }}" class="btn btn-outline-light btn-sm">📸 Paragony</a>
+      <a href="{{ url_for('admin_receipts') }}" class="btn btn-outline-light btn-sm">📸 Paragony</a>
       <a href="{{ url_for('list_products') }}" class="btn btn-outline-light btn-sm">🛍️ Produkty</a>
       <a href="{{ url_for('admin_mass_edit_categories') }}" class="btn btn-outline-light btn-sm">🗂 Kategorie</a>
+      <a href="{{ url_for('admin_lists_access') }}" class="btn btn-outline-light btn-sm">🔐 Uprawnienia</a>
     </div>
   </div>
 </div>
@@ -35,19 +36,43 @@
               <td class="text-end fw-bold">{{ list_count }}</td>
             </tr>
             <tr>
-              <td>🛒 Produkty</td>
+              <td>🛒 Produkty na listach</td>
               <td class="text-end fw-bold">{{ item_count }}</td>
             </tr>
             <tr>
               <td>✅ Zakupione</td>
               <td class="text-end fw-bold">{{ purchased_items_count }}</td>
             </tr>
+            <tr>
+              <td>🚫 Nieoznaczone jako kupione</td>
+              <td class="text-end fw-bold">{{ not_purchased_count }}</td>
+            </tr>
+            <tr>
+              <td>✍️ Produkty z notatkami</td>
+              <td class="text-end fw-bold">{{ items_with_notes }}</td>
+            </tr>
+            <tr>
+              <td>🕓 Śr. czas do zakupu (h)</td>
+              <td class="text-end fw-bold">{{ avg_hours_to_purchase }}</td>
+            </tr>
+            <tr>
+              <td>💸 Średnia kwota na listę</td>
+              <td class="text-end fw-bold">{{ avg_list_expense }} zł</td>
+            </tr>
           </tbody>
         </table>
+        <hr>
+        <div class="small text-uppercase mb-1">📈 Średnie tempo tworzenia list:</div>
+        <ul class="list-unstyled small mb-0">
+          <li>📆 Tygodniowo: <strong>{{ avg_per_week }}</strong></li>
+          <li>🗓️ Miesięcznie: <strong>{{ avg_per_month }}</strong></li>
+          <!--< li>📅 Rocznie: <strong>{{ avg_per_year }}</strong></li> -->
+        </ul>
       </div>
     </div>
   </div>
 
+
   <!-- Najczęściej kupowane -->
   <div class="col-md-4">
     <div class="card bg-dark text-white h-100">
@@ -59,9 +84,9 @@
         <div class="mb-2">
           <div class="d-flex justify-content-between">
             <span>{{ name }}</span>
-            <span class="text-muted">{{ count }}×</span>
+            <span class="badge rounded-pill bg-secondary">{{ count }}x</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>
@@ -69,7 +94,9 @@
         </div>
         {% endfor %}
         {% else %}
-        <p class="text-muted mb-0">Brak danych</p>
+        <div>
+          <p><span class="badge rounded-pill bg-secondary opacity-75">Brak danych</span></p>
+        </div>
         {% endif %}
       </div>
     </div>
@@ -77,17 +104,18 @@
 
   <!-- Podsumowanie wydatków -->
   <div class="col-md-4">
-    <div class="card bg-dark text-white h-100">
+    <div class="card bg-dark text-white h-100 shadow-sm">
       <div class="card-body">
-        <h5>💸 Podsumowanie wydatków:</h5>
+        <h5 class="mb-3">💸 Podsumowanie wydatków</h5>
 
-        <table class="table table-dark table-sm mb-3">
-          <thead>
+        <table class="table table-dark table-sm mb-3 align-middle">
+          <thead class="text-muted small">
             <tr>
-              <th>Typ listy</th>
-              <th>Miesiąc</th>
-              <th>Rok</th>
-              <th>Całkowite</th>
+              <th title="Rodzaj listy zakupowej">Typ listy</th>
+              <th title="Wydatki w bieżącym miesiącu">Miesiąc</th>
+              <th title="Wydatki w bieżącym roku">Rok</th>
+              <th title="Wydatki łączne">Całkowite</th>
+              <!-- <th title="Średnia kwota na 1 listę">Średnia</th> -->
             </tr>
           </thead>
           <tbody>
@@ -96,181 +124,234 @@
               <td>{{ '%.2f'|format(expense_summary.all.month) }} PLN</td>
               <td>{{ '%.2f'|format(expense_summary.all.year) }} PLN</td>
               <td>{{ '%.2f'|format(expense_summary.all.total) }} PLN</td>
+              <!-- <td>{{ '%.2f'|format(expense_summary.all.avg) }} PLN</td> -->
             </tr>
             <tr>
               <td>Aktywne</td>
               <td>{{ '%.2f'|format(expense_summary.active.month) }} PLN</td>
               <td>{{ '%.2f'|format(expense_summary.active.year) }} PLN</td>
               <td>{{ '%.2f'|format(expense_summary.active.total) }} PLN</td>
+              <!-- <td>{{ '%.2f'|format(expense_summary.active.avg) }} PLN</td> -->
             </tr>
             <tr>
               <td>Archiwalne</td>
               <td>{{ '%.2f'|format(expense_summary.archived.month) }} PLN</td>
               <td>{{ '%.2f'|format(expense_summary.archived.year) }} PLN</td>
               <td>{{ '%.2f'|format(expense_summary.archived.total) }} PLN</td>
+              <!-- <td>{{ '%.2f'|format(expense_summary.archived.avg) }} PLN</td> -->
             </tr>
             <tr>
               <td>Wygasłe</td>
               <td>{{ '%.2f'|format(expense_summary.expired.month) }} PLN</td>
               <td>{{ '%.2f'|format(expense_summary.expired.year) }} PLN</td>
               <td>{{ '%.2f'|format(expense_summary.expired.total) }} PLN</td>
+              <!--  <td>{{ '%.2f'|format(expense_summary.expired.avg) }} PLN</td> -->
             </tr>
           </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-light w-100">
           📊 Pokaż wykres wydatków
-        </button>
+        </a>
       </div>
     </div>
   </div>
-</div>
 
-<div class="card bg-dark text-white mb-5">
-  <div class="card-body">
-    <h3 class="mt-4">📄 Wszystkie listy zakupowe</h3>
-    <form method="post" action="{{ url_for('delete_selected_lists') }}">
-      <div class="table-responsive">
-        <table class="table table-dark table-striped align-middle sortable">
-          <thead>
-            <tr>
-              <th><input type="checkbox" id="select-all"></th>
-              <th>ID</th>
-              <th>Tytuł</th>
-              <th>Status</th>
-              <th>Utworzono</th>
-              <th>Właściciel</th>
-              <th>Produkty</th>
-              <th>Wypełnienie</th>
-              <th>Komentarze</th>
-              <th>Paragony</th>
-              <th>Wydatki</th>
-              <th>Akcje</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for e in enriched_lists %}
-            {% set l = e.list %}
-            <tr>
-              <td><input type="checkbox" name="list_ids" value="{{ l.id }}"></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>
-                {% if l.categories %}
-                <span class="ms-1 text-info" data-bs-toggle="tooltip"
-                  title="{{ l.categories | map(attribute='name') | join(', ') }}">
-                  🏷
-                </span>
-                {% endif %}
-              </td>
+  <div class="card bg-dark text-white mb-5">
+    <div class="card-body">
 
-              <td>
-                {% if l.is_archived %}
-                <span class="badge bg-secondary">Archiwalna</span>
-                {% elif e.expired %}
-                <span class="badge bg-warning text-dark">Wygasła</span>
-                {% else %}
-                <span class="badge bg-success">Aktywna</span>
-                {% endif %}
-              </td>
-              <td>{{ l.created_at.strftime('%Y-%m-%d %H:%M') if l.created_at else '-' }}</td>
-              <td>
-                {% if l.owner %}
-                👤 {{ l.owner.username }} ({{ l.owner.id }})
-                {% else %}
-                -
-                {% endif %}
-              </td>
-              <td>{{ e.total_count }}</td>
-              <td>
-                <div class="progress" style="height: 14px;">
-                  <div class="progress-bar 
+      {# 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>
+
+      <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('admin_delete_list') }}"
+        onsubmit="return confirm('Na pewno usunąć tę listę?')" class="d-inline">
+        <div class="table-responsive">
+          <table class="table table-dark align-middle sortable">
+            <thead>
+              <tr>
+                <th><input type="checkbox" id="select-all"></th>
+                <th>ID</th>
+                <th>Tytuł</th>
+                <th>Status</th>
+                <th>Utworzono</th>
+                <th>Właściciel</th>
+                <th>Produkty</th>
+                <th>Progress</th>
+                <th>Koment.</th>
+                <th>Paragony</th>
+                <th>Wydatki</th>
+                <th>Akcje</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for e in enriched_lists %}
+              {% set l = e.list %}
+              <tr>
+                <td><input type="checkbox" name="list_ids" value="{{ l.id }}"></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>
+                  {% if l.categories %}
+                  <span class="ms-1 text-info" data-bs-toggle="tooltip"
+                    title="{{ l.categories | map(attribute='name') | join(', ') }}">
+                    🏷
+                  </span>
+                  {% endif %}
+                </td>
+
+                <td>
+                  {% if l.is_archived %}
+                  <span class="badge rounded-pill bg-secondary">Archiwalna</span>
+                  {% elif e.expired %}
+                  <span class="badge rounded-pill bg-warning text-dark">Wygasła</span>
+                  {% else %}
+                  <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>
+                <td>
+                  {% if l.owner %}
+                  👤 {{ l.owner.username }} ({{ l.owner.id }})
+                  {% else %}
+                  -
+                  {% endif %}
+                </td>
+                <td>{{ e.total_count }}</td>
+                <td>
+                  <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 }}%">
-                    {{ e.purchased_count }}/{{ e.total_count }}
+                      {{ e.purchased_count }}/{{ e.total_count }}
+                    </div>
                   </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 class="fw-bold 
+                </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 %}">
-                {% if e.total_expense > 0 %}
-                {{ '%.2f'|format(e.total_expense) }} PLN
-                {% else %}
-                -
-                {% 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>
-            </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
-      <button type="submit" class="btn btn-danger mt-2">🗑️ Usuń zaznaczone listy</button>
-    </form>
+                  {% if e.total_expense > 0 %}
+                  {{ '%.2f'|format(e.total_expense) }} PLN
+                  {% else %}
+                  -
+                  {% endif %}
+                </td>
+                <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>
+                  </div>
+                </td>
+              </tr>
+              {% endfor %}
+              {% if enriched_lists|length == 0 %}
+              <tr>
+                <td colspan="12" class="text-center py-4">
+                  Brak list zakupowych do wyświetlenia
+                </td>
+              </tr>
+              {% endif %}
+            </tbody>
+          </table>
+        </div>
+        <div class="d-flex justify-content-end mt-2">
+          <button type="submit" class="btn btn-outline-light btn-sm">🗑️ Usuń zaznaczone listy</button>
+        </div>
+      </form>
+    </div>
   </div>
-</div>
 
+  <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>
 
-<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>
+  <!-- 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>
-        <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 class="modal-body">
+          <ul id="product-list" class="list-group list-group-flush"></ul>
         </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>
+  {% 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') }}?v={{ APP_VERSION }}"></script>
+  {% endblock %}
 
-{% 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>
-{% endblock %}
+  {% endblock %}

templates/admin/edit_list.html

@@ -4,84 +4,104 @@
 
 <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">
+<div class="card bg-secondary bg-opacity-10 text-white mb-5">
   <div class="card-body">
     <h4 class="card-title">📄 Podstawowe informacje</h4>
     <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>
-          <p class="form-control-plaintext text-white">
-            {{ list.created_at.strftime('%Y-%m-%d') }}
-          </p>
+          <label class="form-label">📆 Utworzono</label>
+          <div>
+            <span class="badge rounded-pill bg-success rounded-pill text-dark ms-1">
+              {{ list.created_at.strftime('%Y-%m-%d') }}
+            </span>
+          </div>
         </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 +110,48 @@
         </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>
+
+      <!-- Dostęp / uprawnienia -->
+      <div class="mb-4 border-top pt-3 mt-4">
+        <h5 class="mb-3">🔐 Użytkownicy z dostępem</h5>
+
+        <a class="btn btn-outline-warning btn-sm mb-3" href="{{ url_for('admin_lists_access', list_id=list.id) }}">
+          ⚙️ Edytuj uprawnienia
+        </a>
+
+        {% if permitted_users %}
+        <ul class="list-group list-group-flush mb-3">
+          {% for u in permitted_users %}
+          <li
+            class="list-group-item bg-dark text-white d-flex justify-content-between align-items-center border-secondary">
+            <div>
+              <span class="fw-semibold">@{{ u.username }}</span>
+            </div>
+          </li>
+          {% endfor %}
+        </ul>
+        {% else %}
+        <div class="text-warning small">Brak dodatkowych uprawnień.</div>
+        {% endif %}
+      </div>
+
+      <button type="submit" class="btn btn-outline-light btn-sm 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">
@@ -115,7 +163,7 @@
           value="1">
       </div>
       <div class="col-md-3 d-grid">
-        <button type="submit" class="btn btn-outline-success">➕ Dodaj</button>
+        <button type="submit" class="btn btn-outline-light">➕ Dodaj</button>
       </div>
     </form>
 
@@ -123,10 +171,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,28 +184,23 @@
           <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>
+                  <button type="submit" class="btn btn-outline-light btn-sm">💾</button>
                 </div>
               </form>
             </td>
@@ -163,61 +208,46 @@
               {% 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 btn-sm">
+                    {{ '🚫 Odznacz' if item.purchased else '✅ Kupiony' }}
+                  </button>
+                  <button type="submit" name="action" value="mark_not_purchased" class="btn btn-outline-light btn-sm">⚠️
+                    Nie kupiony</button>
                   {% endif %}
-                </form>
-                {% endif %}
+                  {% if item.not_purchased %}
+                  <button type="submit" name="action" value="unmark_not_purchased"
+                    class="btn btn-outline-light btn-sm">✅
+                    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">🗑️</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>
 
@@ -227,41 +257,34 @@
 
     <div class="mb-3 text-end">
       <a href="{{ url_for('admin_receipts', id=list.id) }}" class="btn btn-sm btn-outline-light">
-        📂 Otwórz widok pełny dla tej listy
+        📂 Otwórz zarządzanie paragonami
       </a>
     </div>
 
     <div class="row g-3">
       {% 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;">
+        <div class="card bg-dark text-white h-100 shadow-sm border border-secondary">
+          <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox"
+            data-gallery="receipts" data-title="{{ r.filename }}">
+            <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
+              class="card-img-top" style="object-fit: cover; height: 200px;" title="{{ r.filename }}">
           </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', receipt_id=r.id) }}"
-              class="btn btn-sm btn-outline-warning w-100 mb-2">🔄 Obróć o 90°</a>
-            <a href="{{ url_for('rename_receipt', receipt_id=r.id) }}" class="btn btn-sm btn-outline-info w-100 mb-2">✏️
-              Zmień nazwę</a>
-            {% if not r.file_hash %}
-            <a href="{{ url_for('generate_receipt_hash', receipt_id=r.id) }}"
-              class="btn btn-sm btn-outline-secondary w-100 mb-2">🔐 Generuj hash</a>
-            {% endif %}
-            <a href="{{ url_for('delete_receipt', receipt_id=r.id) }}"
-              class="btn btn-sm btn-outline-danger w-100 mb-2">🗑️ Usuń</a>
+          <div class="card-body text-center p-2 small">
+            <div class="text-truncate fw-semibold" title="{{ r.filename }}">📄 {{ r.filename }}</div>
+            <div>📅 {{ r.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</div>
+            <div>👤 {{ r.uploaded_by_user.username if r.uploaded_by_user else "?" }}</div>
+            <div>
+              💾
+              {% if r.filesize and r.filesize >= 1024 * 1024 %}
+              {{ (r.filesize / 1024 / 1024) | round(2) }} MB
+              {% elif r.filesize %}
+              {{ (r.filesize / 1024) | round(1) }} kB
+              {% else %}
+              Brak danych
+              {% endif %}
+            </div>
           </div>
         </div>
       </div>
@@ -270,14 +293,13 @@
 
     {% if not receipts %}
     <div class="alert alert-info text-center mt-3" role="alert">
-      Brak paragonów.
+      ℹ️ Brak paragonów
     </div>
     {% endif %}
   </div>
 </div>
 
-
 {% endblock %}
 {% block scripts %}
-<script src="{{ url_for('static_bp.serve_js', filename='select.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='select.js') }}?v={{ APP_VERSION }}"></script>
 {% endblock %}

templates/admin/list_products.html

@@ -4,61 +4,87 @@
 
 <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-secondary bg-opacity-10 text-white mb-4">
+  <div class="card-body">
+
+    <!-- Formularz dodawania sugestii -->
+    <form action="{{ url_for('add_suggestion') }}" method="POST" class="mb-4">
+      <label class="form-label fw-bold mb-2">➕ Dodaj nową sugestię:</label>
+      <div class="input-group">
+        <input type="text" name="suggestion_name" class="form-control bg-dark text-white border-secondary"
+          placeholder="Nowa sugestia produktu…" required>
+        <button type="submit" class="btn btn-outline-light">➕ Dodaj</button>
+      </div>
+    </form>
+
+    <hr class="border-secondary opacity-50 mb-4 mt-2">
+
+    <!-- Szukajka z przyciskiem wyczyść -->
+    <label for="search-table" class="form-label fw-bold mb-2">🔍 Przeszukaj tabelę produktów i sugestii:</label>
+    <div class="input-group">
+      <input type="text" id="search-table" class="form-control bg-dark text-white border-secondary"
+        placeholder="Wpisz frazę, np. 'mleko'">
+      <button type="button" id="clear-search" class="btn btn-outline-light">🧹 Wyczyść</button>
+    </div>
+
+  </div>
 </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 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="12" class="text-center py-4">
+              Pusta lista produktów
+            </td>
           </tr>
           {% endif %}
+
         </tbody>
       </table>
     </div>
@@ -69,11 +95,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 align-middle sortable">
         <thead>
           <tr>
             <th>ID</th>
@@ -82,21 +108,23 @@
           </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="12" class="text-center py-4">
+              Brak niepowiązanych sugestii do wyświetlenia
+            </td>
           </tr>
           {% endif %}
         </tbody>
@@ -104,9 +132,44 @@
     </div>
   </div>
 </div>
+<hr>
+
+<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.page.value = 1; this.form.submit();">
+      <option value="100" {% if per_page==25 %}selected{% endif %}>100</option>
+      <option value="200" {% if per_page==50 %}selected{% endif %}>200</option>
+      <option value="300" {% if per_page==100 %}selected{% endif %}>300</option>
+      <option value="500" {% if per_page==500 %}selected{% endif %}>500</option>
+      <option value="750" {% if per_page==750 %}selected{% endif %}>750</option>
+      <option value="1000" {% if per_page==1000 %}selected{% endif %}>1000</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>
+<script src="{{ url_for('static_bp.serve_js', filename='product_suggestion.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='table_search.js') }}?v={{ APP_VERSION }}"></script>
 {% endblock %}
 
 {% endblock %}

templates/admin/lists_access.html

@@ -0,0 +1,211 @@
+{% extends 'base.html' %}
+{% block title %}Zarządzanie dostępem do list{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center flex-wrap mb-3">
+  <h2 class="mb-2">🔐{% if list_id %} Zarządzanie dostępem listy #{{ list_id }}{% else %} Zarządzanie dostępem do list
+    {% endif %}</h2>
+  <div class="d-flex gap-2">
+    {% if list_id %}
+    <a href="{{ url_for('admin_lists_access') }}" class="btn btn-outline-light">Powrót do wszystkich list</a>
+    {% endif %}
+    <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
+  </div>
+</div>
+
+<!-- STICKY ACTION BAR -->
+<div id="bulkBar" class="position-sticky top-0 z-3 mb-3" style="backdrop-filter: blur(6px);">
+  <div class="card bg-dark border-secondary shadow-sm">
+    <div class="card-body py-2 d-flex flex-wrap align-items-center gap-3">
+      <div class="d-flex align-items-center gap-2">
+        <input id="selectAll" class="form-check-input" type="checkbox" />
+        <label for="selectAll" class="form-check-label">Zaznacz wszystko</label>
+      </div>
+
+      <div class="vr text-secondary"></div>
+
+      <div class="flex-grow-1 d-flex align-items-center gap-2">
+        <input id="listFilter" class="form-control form-control-sm bg-dark text-white border-secondary"
+          placeholder="Szukaj po tytule/ID/właścicielu…" aria-label="Filtruj listy">
+        <span class="text-secondary small ms-1" id="filterCount">—</span>
+      </div>
+
+      <div class="vr text-secondary d-none d-md-block"></div>
+
+      <!-- BULK GRANT -->
+      <div class="flex-grow-1">
+        <div class="input-group input-group-sm">
+          <input id="bulkUsersInput" class="form-control bg-dark text-white border-secondary"
+            placeholder="Podaj użytkowników (po przecinku lub enterach)" list="userHints">
+          <button id="bulkAddBtn" class="btn btn-outline-light" type="button">➕ Nadaj dostęp</button>
+        </div>
+        <div id="bulkTokens" class="d-flex flex-wrap gap-2 mt-2"></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<!-- HINTS -->
+<datalist id="userHints"></datalist>
+
+<div class="card bg-dark text-white mb-5">
+  <div class="card-body">
+    <form id="statusForm" method="post">
+      <input type="hidden" name="action" value="save_changes">
+
+      <div class="table-responsive">
+        <table class="table table-dark align-middle" id="listsTable">
+          <thead class="align-middle">
+            <tr>
+              <th scope="col" style="width:36px;"></th>
+              <th scope="col">ID</th>
+              <th scope="col">Nazwa listy</th>
+              <th scope="col">Właściciel</th>
+              <th scope="col">Utworzono</th>
+              <th scope="col">Statusy</th>
+              <th scope="col">Udostępnianie</th>
+              <th scope="col" style="min-width: 340px;">Uprawnienia</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for l in lists %}
+            <tr data-id="{{ l.id }}" data-title="{{ l.title|lower }}"
+              data-owner="{{ (l.owner.username if l.owner else '-')|lower }}">
+              <td>
+                <input class="row-check form-check-input" type="checkbox" data-list-id="{{ l.id }}">
+                <input type="hidden" name="visible_ids" value="{{ l.id }}">
+              </td>
+
+              <td class="text-nowrap">#{{ l.id }}</td>
+
+              <td class="fw-bold align-middle">
+                <a href="{{ url_for('view_list', list_id=l.id) }}" class="text-white text-decoration-none">{{ l.title
+                  }}</a>
+              </td>
+
+              <td>
+                {% if l.owner %}
+                👤 <span class="owner-username" data-username="{{ l.owner.username }}">@{{ l.owner.username }}</span>
+                ({{ l.owner.id }})
+                {% else %}-{% endif %}
+              </td>
+
+              <td class="text-nowrap">{{ l.created_at.strftime('%Y-%m-%d %H:%M') if l.created_at else '-' }}</td>
+
+              <td style="min-width: 230px;">
+                <div class="form-check form-switch">
+                  <input class="form-check-input" type="checkbox" id="pub_{{ l.id }}" name="is_public_{{ l.id }}" {% if
+                    l.is_public %}checked{% endif %}>
+                  <label class="form-check-label" for="pub_{{ l.id }}">🌐 Publiczna</label>
+                </div>
+                <div class="form-check form-switch">
+                  <input class="form-check-input" type="checkbox" id="tmp_{{ l.id }}" name="is_temporary_{{ l.id }}" {%
+                    if l.is_temporary %}checked{% endif %}>
+                  <label class="form-check-label" for="tmp_{{ l.id }}">⏳ Tymczasowa</label>
+                </div>
+                <div class="form-check form-switch">
+                  <input class="form-check-input" type="checkbox" id="arc_{{ l.id }}" name="is_archived_{{ l.id }}" {%
+                    if l.is_archived %}checked{% endif %}>
+                  <label class="form-check-label" for="arc_{{ l.id }}">📦 Archiwalna</label>
+                </div>
+              </td>
+
+              <td style="min-width: 260px;">
+                {% if l.share_token %}
+                {% set share_url = url_for('shared_list', token=l.share_token, _external=True) %}
+                <div class="d-flex align-items-center gap-2">
+                  <div class="flex-grow-1 text-truncate mono small" title="{{ share_url }}">{{ share_url }}</div>
+                  <button class="btn btn-sm btn-outline-secondary copy-share" type="button" data-url="{{ share_url }}"
+                    aria-label="Kopiuj link">📋</button>
+                </div>
+                <div class="text-info small mt-1">
+                  {% if l.is_public %}Lista widoczna publicznie{% else %}Dostęp przez link / uprawnienia{% endif %}
+                </div>
+                {% else %}
+                <div class="text-warning small">Brak tokenu</div>
+                {% endif %}
+              </td>
+
+              <td>
+                <div class="access-editor" data-list-id="{{ l.id }}">
+                  <!-- Tokeny z uprawnieniami -->
+                  <div class="d-flex flex-wrap gap-2 mb-2 tokens">
+                    {% for u in permitted_by_list.get(l.id, []) %}
+                    <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill token"
+                      data-user-id="{{ u.id }}" data-username="{{ u.username }}" title="Kliknij, aby odebrać dostęp">
+                      @{{ u.username }} <span aria-hidden="true">×</span>
+                    </button>
+                    {% endfor %}
+                    {% if permitted_by_list.get(l.id, [])|length == 0 %}
+                    <span class="text-warning small no-perms">Brak dodanych uprawnień.</span>
+                    {% endif %}
+                  </div>
+
+                  <!-- Dodawanie (wiele na raz) -->
+                  <div class="input-group input-group-sm">
+                    <input type="text"
+                      class="form-control form-control-sm bg-dark text-white border-secondary access-input"
+                      placeholder="Dodaj @użytkownika (wiele: przecinki/enter)" list="userHints"
+                      aria-label="Dodaj użytkowników">
+                    <button type="button" class="btn btn-sm btn-outline-light access-add">➕ Dodaj</button>
+                  </div>
+                  <div class="text-secondary small mt-1">Kliknij token, aby odebrać dostęp.</div>
+                </div>
+              </td>
+
+            </tr>
+            {% endfor %}
+            {% if lists|length == 0 %}
+            <tr>
+              <td colspan="8" class="text-center py-4">Brak list do wyświetlenia</td>
+            </tr>
+            {% endif %}
+          </tbody>
+        </table>
+      </div>
+
+      <div class="mt-3 d-flex justify-content-end">
+        <button type="submit" class="btn btn-sm btn-outline-light">💾 Zapisz zmiany statusów</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+{% if not list_id %}
+<hr>
+<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.page.value = 1; 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>
+{% endif %}
+
+{% endblock %}
+{% block scripts %}
+<script src="{{ url_for('static_bp.serve_js', filename='lists_access.js') }}?v={{ APP_VERSION }}"></script>
+
+{% endblock %}

templates/admin/mass_edit_categories.html

@@ -3,65 +3,154 @@
 {% block content %}
 
 <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
-    <h2 class="mb-2">🗂 Masowa edycja kategorii list</h2>
+    <h2 class="mb-2">🗂 Masowa edycja kategorii</h2>
     <div>
         <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
     </div>
 </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">
-                    <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">Kategorie</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% for lst 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 style="min-width: 220px;">
-                                <select name="categories_{{ lst.id }}" multiple
-                                    class="form-select bg-dark text-white border-secondary">
-                                    {% for cat in categories %}
-                                    <option value="{{ cat.id }}" {% if cat in lst.categories %}selected{% endif %}>
-                                        {{ cat.name }}
-                                    </option>
-                                    {% endfor %}
-                                </select>
-                            </td>
-                        </tr>
-                        {% endfor %}
-                    </tbody>
-                </table>
+<div class="card bg-dark text-white mb-5">
+    <div class="card-body">
+        <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 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 l in lists %}
+                                <tr>
+                                    <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-light preview-btn"
+                                            data-list-id="{{ l.id }}">
+                                            🔍 Zobacz
+                                        </button>
+                                    </td>
+                                    <td style="min-width: 220px;">
+                                        <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 l.categories %}selected{% endif
+                                                %}>
+                                                {{ cat.name }}
+                                            </option>
+                                            {% endfor %}
+                                        </select>
+                                    </td>
+                                </tr>
+                                {% endfor %}
+                                {% if lists|length == 0 %}
+                                <tr>
+                                    <td colspan="12" class="text-center py-4">
+                                        Brak list zakupowych do wyświetlenia
+                                    </td>
+                                </tr>
+                                {% endif %}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <button type="submit" class="btn btn-sm btn-outline-light">💾 Zapisz zmiany</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<hr>
+<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.page.value = 1; 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 class="mt-3">
-        <button type="submit" class="btn btn-success">💾 Zapisz zmiany</button>
-    </div>
-</form>
+</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') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='categories_select_admin.js') }}?v={{ APP_VERSION }}"></script>
 {% endblock %}

templates/admin/receipts.html

@@ -3,69 +3,165 @@
 {% block content %}
 
 <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
-  <h2 class="mb-2">📸 Wszystkie paragony</h2>
+  <h2 class="mb-2">
+    📸 {% if id == 'all' %}Wszystkie paragony{% else %}Paragony dla listy #{{ id }}{% endif %}
+  </h2>
+
+  <p class="text-white-50 small mt-1">
+    {% if id == 'all' %}
+    Rozmiar plików tej strony:
+    {% else %}
+    Rozmiar plików listy #{{ id }}:
+    {% endif %}
+    <strong>
+      {% if page_filesize >= 1024*1024 %}
+      {{ (page_filesize / 1024 / 1024) | round(2) }} MB
+      {% else %}
+      {{ (page_filesize / 1024) | round(1) }} kB
+      {% endif %}
+    </strong>
+    {% if not (id != 'all' and (id|string).isdigit()) %}
+    | Łącznie:
+    <strong>
+      {% if total_filesize >= 1024*1024 %}
+      {{ (total_filesize / 1024 / 1024) | round(2) }} MB
+      {% else %}
+      {{ (total_filesize / 1024) | round(1) }} kB
+      {% endif %}
+    </strong>
+    {% endif %}
+  </p>
+
   <div>
-    <a href="{{ url_for('recalculate_filesizes_all') }}" class="btn btn-outline-primary me-2">
+    {% if id is string and id.isdigit() and id|int > 0 %}
+    <a href="{{ url_for('admin_receipts', id='all') }}" class="btn btn-outline-light me-2">
+      Pokaż wszystkie paragony
+    </a>
+    {% else %}
+    <a href="{{ url_for('recalculate_filesizes_all') }}" class="btn btn-outline-light me-2">
       Przelicz rozmiary plików
     </a>
-    <a href="/admin" class="btn btn-outline-secondary">← Powrót do panelu</a>
+    {% endif %}
+    <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
   </div>
 </div>
 
-<div class="card bg-dark text-white mb-5">
+<div class="card bg-secondary bg-opacity-10 text-white mb-5">
   <div class="card-body">
     <div class="row g-3">
       {% 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;">
+        <div class="card bg-dark text-white h-100 shadow-sm border border-secondary">
+          <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox"
+            data-gallery="receipts" data-title="{{ r.filename }}">
+            <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
+              class="card-img-top" style="object-fit: cover; height: 200px;"
+              title="Token: {{ r.version_token or '0' }}">
           </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', 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="#adminCropModal" data-img-src="{{ url_for('uploaded_file', filename=r.filename) }}"
-              data-receipt-id="{{ r.id }}" data-crop-endpoint="{{ url_for('crop_receipt_admin') }}">
-              ✂️ Przytnij
-            </a>
-            <a href="{{ url_for('rename_receipt', receipt_id=r.id) }}" class="btn btn-sm btn-outline-info w-100 mb-2">✏️
-              Zmień nazwę</a>
-            {% if not r.file_hash %}
-            <a href="{{ url_for('generate_receipt_hash', receipt_id=r.id) }}"
-              class="btn btn-sm btn-outline-secondary w-100 mb-2">🔐 Generuj hash</a>
-            {% endif %}
-            <a href="{{ url_for('delete_receipt', receipt_id=r.id) }}" class="btn btn-sm btn-outline-danger w-100 mb-2"
-              onclick="return confirm('Na pewno usunąć plik {{ r.filename }}?');">🗑️
-              Usuń</a>
-            <a href="{{ url_for('edit_list', list_id=r.list_id) }}" class="btn btn-sm btn-outline-light w-100 mb-2">✏️
-              Edytuj listę #{{ r.list_id }}</a>
+
+          <div class="card-body text-center p-2 small">
+            <div class="text-truncate fw-semibold" title="{{ r.filename }}">📄 {{ r.filename }}</div>
+            <div>📅 {{ r.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</div>
+            <div>👤 {{ r.uploaded_by_user.username if r.uploaded_by_user else "?" }}</div>
+            <div>
+              💾
+              {% if r.filesize and r.filesize >= 1024 * 1024 %}
+              {{ (r.filesize / 1024 / 1024) | round(2) }} MB
+              {% elif r.filesize %}
+              {{ (r.filesize / 1024) | round(1) }} kB
+              {% else %}
+              Brak danych
+              {% endif %}
+            </div>
+
+            <div class="dropdown mt-2">
+              <button class="btn btn-sm btn-outline-light dropdown-toggle w-100" type="button"
+                data-bs-toggle="dropdown">
+                ⋮ Akcje
+              </button>
+              <ul class="dropdown-menu dropdown-menu-dark w-100 text-start">
+                <li>
+                  <a class="dropdown-item" href="{{ url_for('rotate_receipt', receipt_id=r.id) }}">🔄 Obróć o 90°</a>
+                </li>
+                <li>
+                  <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#adminCropModal"
+                    data-img-src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
+                    data-receipt-id="{{ r.id }}" data-crop-endpoint="{{ url_for('crop_receipt_admin') }}"
+                    data-version="{{ r.version_token or '0' }}">
+                    ✂️ Przytnij
+                  </a>
+
+                </li>
+                <li>
+                  <a class="dropdown-item" href="{{ url_for('rename_receipt', receipt_id=r.id) }}">✏️ Zmień nazwę</a>
+                </li>
+                {% if not r.file_hash %}
+                <li>
+                  <a class="dropdown-item" href="{{ url_for('generate_receipt_hash', receipt_id=r.id) }}">🔐 Generuj
+                    hash</a>
+                </li>
+                {% endif %}
+                <li>
+                  <a class="dropdown-item text-danger" href="{{ url_for('delete_receipt', receipt_id=r.id) }}"
+                    onclick="return confirm('Na pewno usunąć plik {{ r.filename }}?');">🗑️ Usuń</a>
+                </li>
+                <li>
+                  <hr class="dropdown-divider">
+                </li>
+                <li>
+                  <a class="dropdown-item" href="{{ url_for('edit_list', list_id=r.list_id) }}">📋 Edytuj listę #{{
+                    r.list_id }}</a>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
       </div>
       {% endfor %}
-
     </div>
 
     {% if not receipts %}
     <div class="alert alert-info text-center mt-4" role="alert">
-      Nie wgrano żadnych paragonów.
+      <i class="fas fa-info-circle"></i>
+      Nie wgrano żadnego paragonu
     </div>
     {% endif %}
   </div>
 </div>
 
+{% if id == 'all' %}
+<hr>
+<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.page.value = 1; 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>
+{% endif %}
+
 {% 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>
@@ -81,7 +177,7 @@
       <div class="card-body text-center">
         <p class="small mb-1 fw-bold">{{ f }}</p>
         <div class="alert alert-warning small py-1 mb-2">Brak powiązania z listą!</div>
-        <a href="{{ url_for('delete_receipt', filename=f) }}" class="btn btn-sm btn-outline-danger w-100 mb-2"
+        <a href="{{ url_for('delete_receipt', filename=f) }}" class="btn btn-sm btn-outline-light w-100 mb-2"
           onclick="return confirm('Na pewno usunąć WYŁĄCZNIE plik {{ f }} z dysku?');">
           🗑 Usuń plik z serwera
         </a>
@@ -103,8 +199,10 @@
         <img id="adminCropImage" style="max-width: 100%; max-height: 100%; display: block; margin: auto;">
       </div>
       <div class="modal-footer">
-        <button class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
-        <button class="btn btn-success" id="adminSaveCrop">Zapisz</button>
+        <div class="btn-group" role="group">
+          <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">❌ Anuluj</button>
+          <button type="button" class="btn btn-sm btn-outline-light" id="adminSaveCrop">💾 Zapisz</button>
+        </div>
         <div id="adminCropLoading" class="position-absolute top-50 start-50 translate-middle text-center d-none">
           <div class="spinner-border text-light" role="status"></div>
           <div class="mt-2 text-light">⏳ Pracuję...</div>
@@ -114,12 +212,9 @@
   </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>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_crop_logic.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='admin_receipt_crop.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='receipt_crop_logic.js') }}?v={{ APP_VERSION }}"></script>
 {% endblock %}
 
 {% endblock %}

templates/admin/user_management.html

@@ -4,65 +4,85 @@
 
 <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 -->
-<div class="card bg-dark text-white mb-4">
+<div class="card bg-secondary bg-opacity-10 text-white mb-4">
   <div class="card-body">
-    <h5 class="card-title">➕ Dodaj nowego użytkownika</h5>
+    <h5 class="card-title mb-3">➕ Dodaj nowego użytkownika</h5>
     <form method="post" action="{{ url_for('add_user') }}">
-      <div class="row g-2">
+      <div class="row g-3 align-items-end">
         <div class="col-md-4">
-          <input type="text" name="username" class="form-control bg-dark text-white border-secondary rounded"
-            placeholder="Nazwa użytkownika" required>
+          <label for="username" class="form-label text-white-50">Nazwa użytkownika</label>
+          <input type="text" id="username" name="username"
+            class="form-control bg-dark text-white border-secondary rounded" placeholder="np. jan" required>
         </div>
         <div class="col-md-4">
-          <input type="password" name="password" class="form-control bg-dark text-white border-secondary rounded"
-            placeholder="Hasło" required>
+          <label for="password" class="form-label text-white-50">Hasło</label>
+          <input type="password" id="password" name="password"
+            class="form-control bg-dark text-white border-secondary rounded" placeholder="min. 6 znaków" required>
         </div>
-        <div class="col-md-4">
-          <button type="submit" class="btn btn-outline-success w-100">Dodaj użytkownika</button>
+        <div class="col-md-4 d-grid">
+          <button type="submit" class="btn btn-outline-light">➕ Dodaj użytkownika</button>
         </div>
       </div>
     </form>
   </div>
 </div>
 
+
 <div class="card bg-dark text-white mb-5">
   <div class="card-body">
-    <table class="table table-dark table-striped align-middle">
+    <table class="table table-dark align-middle sortable">
       <thead>
         <tr>
           <th>ID</th>
           <th>Login</th>
           <th>Rola</th>
+          <th>Listy</th>
+          <th>Produkty</th>
+          <th>Paragony</th>
           <th>Akcje</th>
         </tr>
       </thead>
       <tbody>
-        {% for user in users %}
+        {% for entry in user_data %}
+        {% set user = entry.user %}
         <tr>
           <td>{{ user.id }}</td>
           <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>{{ entry.list_count }}</td>
+          <td>{{ entry.item_count }}</td>
+          <td>{{ entry.receipt_count }}</td>
           <td>
-            <button class="btn btn-sm btn-outline-warning me-1" data-bs-toggle="modal"
+            <button class="btn btn-sm btn-outline-light me-1" data-bs-toggle="modal"
               data-bs-target="#resetPasswordModal" data-user-id="{{ user.id }}" data-username="{{ user.username }}">
               🔑 Ustaw hasło
             </button>
             {% if not user.is_admin %}
-            <a href="/admin/promote_user/{{ user.id }}" class="btn btn-sm btn-outline-info">⬆️ Ustaw admina</a>
+            <a href="/admin/promote_user/{{ user.id }}" class="btn btn-sm btn-outline-light">⬆️ Ustaw admina</a>
             {% else %}
-            <a href="/admin/demote_user/{{ user.id }}" class="btn btn-sm btn-outline-secondary">⬇️ Usuń admina</a>
+            <a href="/admin/demote_user/{{ user.id }}" class="btn btn-sm btn-outline-light">⬇️ Usuń admina</a>
+            {% endif %}
+            {% if user.username == 'admin' %}
+            <a class="btn btn-sm btn-outline-light me-1 disabled" aria-disabled="true" tabindex="-1"
+              title="Nie można usunąć konta administratora-głównego.">
+              🗑️ Usuń
+            </a>
+            {% else %}
+            <a href="/admin/delete_user/{{ user.id }}" class="btn btn-sm btn-outline-light me-1"
+              onclick="return confirm('Czy na pewno chcesz usunąć użytkownika {{ user.username }}?\\n\\nWszystkie jego listy zostaną przeniesione na administratora.')">
+              🗑️ Usuń
+            </a>
             {% endif %}
-            <a href="/admin/delete_user/{{ user.id }}" class="btn btn-sm btn-outline-danger me-1">🗑️ Usuń</a>
           </td>
         </tr>
         {% endfor %}
@@ -70,6 +90,7 @@
     </table>
   </div>
 </div>
+
 <!-- Modal resetowania hasła -->
 <div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel"
   aria-hidden="true">
@@ -82,10 +103,11 @@
         </div>
         <div class="modal-body">
           <p id="resetUsernameLabel">Dla użytkownika: <strong></strong></p>
-          <input type="password" name="password" placeholder="Nowe hasło" class="form-control" required>
+          <input type="password" name="password" placeholder="Nowe hasło"
+            class="form-control bg-dark text-white border-secondary rounded" required>
         </div>
         <div class="modal-footer border-0">
-          <button type="submit" class="btn btn-success w-100">💾 Zapisz nowe hasło</button>
+          <button type="submit" class="btn btn-sm btn-outline-light w-100">💾 Zapisz nowe hasło</button>
         </div>
       </form>
     </div>
@@ -93,8 +115,7 @@
 </div>
 
 {% block scripts %}
-
-<script src="{{ url_for('static_bp.serve_js', filename='user_management.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='user_management.js') }}?v={{ APP_VERSION }}"></script>
 {% endblock %}
 
 

templates/base.html

@@ -6,19 +6,36 @@
   <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') }}">
-  {% 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 %}
-  <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 %}
-  <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' %}
-  <link href="{{ url_for('static_bp.serve_css_lib', filename='tom-select.bootstrap5.min.css') }}" rel="stylesheet">
+
+  {# --- Bootstrap i główny css zawsze --- #}
+  <link href="{{ url_for('static_bp.serve_css', filename='style.css') }}?v={{ APP_VERSION }}" rel="stylesheet">
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='bootstrap.min.css') }}?v={{ APP_VERSION }}"
+    rel="stylesheet">
+
+  {# --- Style CSS ładowane tylko dla niezablokowanych --- #}
+  {% set exclude_paths = ['/system-auth'] %}
+  {% if (exclude_paths | select("in", request.path) | list | length == 0)
+  and has_authorized_cookie
+  and not is_blocked %}
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='glightbox.min.css') }}?v={{ APP_VERSION }}"
+    rel="stylesheet">
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='sort_table.min.css') }}?v={{ APP_VERSION }}"
+    rel="stylesheet">
   {% endif %}
 
+  {# --- 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') }}?v={{ APP_VERSION }}"
+    rel="stylesheet">
+  {% endif %}
+
+  {# --- 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') }}?v={{ APP_VERSION }}"
+    rel="stylesheet">
+  {% endif %}
 </head>
 
 <body class="bg-dark text-white">
@@ -33,12 +50,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">niezalogowany/a</span>
       </div>
       {% endif %}
       {% endif %}
@@ -49,7 +66,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>
@@ -69,6 +86,7 @@
     <hr class="text-secondary">
     <p class="mb-0">© 2025 <strong>linuxiarz.pl</strong> · <a href="https://gitea.linuxiarz.pl/gru/lista_zakupowa_live"
         target="_blank" class="link-success text-decoration-none"> source code</a>
+    <div class="small">v{{ APP_VERSION }}</div>
   </footer>
 
   <script src="{{ url_for('static_bp.serve_js_lib', filename='bootstrap.bundle.min.js') }}"></script>
@@ -89,31 +107,34 @@
   </script>
 
   {% if request.endpoint != 'system_auth' %}
-  <script src="{{ url_for('static_bp.serve_js_lib', filename='glightbox.min.js') }}"></script>
-  <script src="{{ url_for('static_bp.serve_js_lib', filename='socket.io.min.js') }}"></script>
-  <script src="{{ url_for('static_bp.serve_js_lib', filename='sort_table.min.js') }}"></script>
-  <script src="{{ url_for('static_bp.serve_js', filename='functions.js') }}"></script>
-  <script src="{{ url_for('static_bp.serve_js', filename='live.js') }}"></script>
-  <script src="{{ url_for('static_bp.serve_js', filename='sockets.js') }}"></script>
+  <script src="{{ url_for('static_bp.serve_js_lib', filename='glightbox.min.js') }}?v={{ APP_VERSION }}"></script>
+  <script src="{{ url_for('static_bp.serve_js_lib', filename='socket.io.min.js') }}?v={{ APP_VERSION }}"></script>
+  <script src="{{ url_for('static_bp.serve_js_lib', filename='sort_table.min.js') }}?v={{ APP_VERSION }}"></script>
+  <script src="{{ url_for('static_bp.serve_js', filename='functions.js') }}?v={{ APP_VERSION }}"></script>
+  <script src="{{ url_for('static_bp.serve_js', filename='live.js') }}?v={{ APP_VERSION }}"></script>
+  <script src="{{ url_for('static_bp.serve_js', filename='sockets.js') }}?v={{ APP_VERSION }}"></script>
   {% endif %}
-  <script src="{{ url_for('static_bp.serve_js', filename='toasts.js') }}"></script>
+  <script src="{{ url_for('static_bp.serve_js', filename='toasts.js') }}?v={{ APP_VERSION }}"></script>
   <script>
     let lightbox = GLightbox({
       selector: '.glightbox'
     });
   </script>
 
-  {% if '/admin/receipts' in request.path or '/edit_my_list' in request.path %}
-  <script src="{{ url_for('static_bp.serve_js_lib', filename='cropper.min.js') }}"></script>
+  {% 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') }}?v={{ APP_VERSION }}"></script>
   {% endif %}
-  {% if '/edit_my_list' or '/admin/edit_list' or '/admin/mass_edit_categories' in request.path %}
-  <script src="{{ url_for('static_bp.serve_js_lib', filename='tom-select.complete.min.js') }}"></script>
+
+  {% 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') }}?v={{ APP_VERSION }}"></script>
   {% endif %}
 
   {% endif %}
 
   {% block scripts %}{% endblock %}
-
 </body>
 
 </html>

templates/edit_my_list.html

@@ -1,127 +1,196 @@
 {% 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 bg-secondary bg-opacity-10 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 (czyli mogą zobaczyć goście)</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 (ustaw date wygasania)</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-sm btn-outline-light">💾 Zapisz</button>
+        <a href="{{ url_for('main_page') }}" class="btn btn-sm btn-outline-light">❌ Anuluj</a>
       </div>
     </form>
+  </div>
+</div>
 
-    {% if receipts %}
-    <hr class="my-4">
-    <h5>Paragony przypisane do tej listy</h5>
+<!-- DOSTĘP DO LISTY -->
+<div class="mb-3">
+  <label class="form-label">👥 Użytkownicy z dostępem</label>
 
-    <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="access-editor border rounded p-2 bg-dark" data-post-url="{{ request.path }}"
+    data-suggest-url="{{ url_for('edit_my_list_suggestions', list_id=list.id) }}" data-next="{{ request.path }}"
+    data-list-id="{{ list.id }}">
 
-            <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>
+    <!-- Tokeny uprawnionych -->
+    <div class="tokens d-flex flex-wrap gap-2 mb-2">
+      {% for u in permitted_users %}
+      <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill token" data-user-id="{{ u.id }}"
+        data-username="{{ u.username }}" title="Kliknij, aby odebrać dostęp">
+        @{{ u.username }} <span aria-hidden="true">×</span>
+      </button>
+      {% endfor %}
+      {% if not permitted_users or permitted_users|length == 0 %}
+      <span class="no-perms text-warning small">Brak dodanych uprawnień.</span>
+      {% endif %}
+    </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>
+    <!-- Dodawanie (wiele: przecinki/enter) + prywatne podpowiedzi -->
+    <div class="input-group input-group-sm">
+      <input type="text" class="access-input form-control form-control-sm bg-dark text-white border-secondary"
+        placeholder="Dodaj @użytkownika (wiele: przecinki/enter)" aria-label="Dodaj użytkowników">
+      <button type="button" class="access-add btn btn-sm btn-outline-light">➕ Dodaj</button>
+    </div>
+    <div class="text-secondary small mt-1">Kliknij token, aby odebrać dostęp.</div>
+  </div>
+</div>
+
+{% 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 shadow-sm border border-secondary">
+      <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox"
+        data-gallery="receipts" data-title="{{ r.filename }}">
+        <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
+          class="card-img-top" style="object-fit: cover; height: 200px;" title="{{ r.filename }}">
+      </a>
+
+      <div class="card-body text-center p-2 small">
+        <div class="text-truncate fw-semibold" title="{{ r.filename }}">📄 {{ r.filename }}</div>
+        <div>📅 {{ r.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</div>
+        <div>
+          💾
+          {% if r.filesize and r.filesize >= 1024 * 1024 %}
+          {{ (r.filesize / 1024 / 1024) | round(2) }} MB
+          {% elif r.filesize %}
+          {{ (r.filesize / 1024) | round(1) }} kB
+          {% else %}
+          Brak danych
+          {% endif %}
+        </div>
+
+        <div class="dropdown mt-2">
+          <button class="btn btn-sm btn-outline-light dropdown-toggle w-100" type="button" data-bs-toggle="dropdown">
+            ⋮ Akcje
+          </button>
+          <ul class="dropdown-menu dropdown-menu-dark w-100 text-start">
+            <li>
+              <a class="dropdown-item" href="{{ url_for('rotate_receipt_user', receipt_id=r.id) }}">🔄 Obróć o 90°</a>
+            </li>
+            <li>
+              <a class="dropdown-item" href="#" 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>
+            </li>
+            <li>
+              <a class="dropdown-item text-danger" href="{{ url_for('delete_receipt_user', receipt_id=r.id) }}"
+                onclick="return confirm('Na pewno usunąć ten paragon?')">
+                🗑️ Usuń
+              </a>
+            </li>
+          </ul>
         </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>
+  {% endfor %}
+</div>
+{% endif %}
+
+<hr class="my-3">
+<!-- Trigger przycisk -->
+<div class="btn-group mt-4" role="group">
+  <button type="button" class="btn btn-sm 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">
@@ -133,13 +202,13 @@
       </div>
       <div class="modal-body">
         <p>Aby usunąć listę <strong>{{ list.title }}</strong>, wpisz <code>usuń</code> i poczekaj 2 sekundy:</p>
-        <input type="text" id="confirm-delete-input" class="form-control bg-dark text-white border-warning"
-          placeholder="usuń">
+        <input type="text" id="confirm-delete-input" class="form-control bg-dark text-white border-warning rounded"
+          placeholder="">
       </div>
       <div class="modal-footer justify-content-between">
         <div class="btn-group" role="group">
-          <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Anuluj</button>
-          <button id="confirm-delete-btn" class="btn btn-outline-danger" disabled>🗑️ Usuń</button>
+          <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">Anuluj</button>
+          <button id="confirm-delete-btn" class="btn btn-sm btn-outline-light" disabled>🗑️ Usuń</button>
         </div>
       </div>
     </div>
@@ -159,8 +228,10 @@
         <img id="userCropImage" style="max-width: 100%; max-height: 100%; display: block; margin: auto;">
       </div>
       <div class="modal-footer">
-        <button class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
-        <button class="btn btn-success" id="userSaveCrop">Zapisz</button>
+        <div class="btn-group" role="group">
+          <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">❌ Anuluj</button>
+          <button type="button" class="btn btn-sm btn-outline-light" id="userSaveCrop">💾 Zapisz</button>
+        </div>
         <div id="userCropLoading" class="position-absolute top-50 start-50 translate-middle text-center d-none">
           <div class="spinner-border text-light" role="status"></div>
           <div class="mt-2 text-light">⏳ Pracuję...</div>
@@ -173,8 +244,9 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{{ url_for('static_bp.serve_js', filename='confirm_delete.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='user_receipt_crop.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_crop_logic.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='select.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='confirm_delete.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='user_receipt_crop.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='receipt_crop_logic.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='select.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='access_users.js') }}?v={{ APP_VERSION }}"></script>
 {% endblock %}

templates/expenses.html

@@ -0,0 +1,222 @@
+{% extends 'base.html' %}
+{% block title %}Wydatki z Twoich list{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
+  <h2 class="mb-2">Statystyki wydatków</h2>
+  <a href="{{ url_for('main_page') }}" class="btn btn-outline-secondary">← Powrót</a>
+</div>
+
+<div class="card bg-secondary bg-opacity-10 text-white mb-5">
+  <div class="card-body">
+    <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 %}>
+        <label class="form-check-label ms-2 text-white" for="showAllLists">
+          Uwzględnij listy udostępnione dla mnie i publiczne
+        </label>
+      </div>
+    </div>
+
+    <!-- Przyciski kategorii -->
+    <div class="d-flex flex-wrap gap-2 mb-3 justify-content-center">
+      <button type="button"
+        class="btn btn-sm category-filter {% if not selected_category %}btn-success{% else %}btn-outline-light{% endif %}"
+        data-category-id="">
+        🌐 Wszystkie
+      </button>
+      {% for cat in categories %}
+      <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 }}
+      </button>
+      {% endfor %}
+    </div>
+  </div>
+</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">
+          📊 Wykres
+        </button>
+      </li>
+    </ul>
+
+    <div class="tab-content" id="expenseTabsContent">
+      <!-- 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">
+              <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>
+                <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1"
+                  id="customStart">
+                <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="customEnd">
+                <button class="btn btn-outline-light" id="applyCustomRange">📊 Zastosuj zakres</button>
+              </div>
+            </div>
+
+            <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 align-middle sortable">
+                <thead>
+                  <tr>
+                    <th></th>
+                    <th>ID</th>
+                    <th>Nazwa listy</th>
+                    <th>Właściciel</th>
+                    <th>Data</th>
+                    <th>Wydatki (PLN)</th>
+                  </tr>
+                </thead>
+                <tbody id="listsTableBody">
+                  {% for list in lists_data %}
+                  <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="{% if list.categories %}{{ ','.join(list.categories | map('string')) }}{% else %}{% endif %}">
+
+                    <td>
+                      <input type="checkbox" class="form-check-input list-checkbox"
+                        data-amount="{{ '%.2f'|format(list.total_expense) }}">
+                    </td>
+                    <td>{{ list.id }}</td>
+                    <td>
+                      <strong>{{ list.title }}</strong>
+                    </td>
+                    <td>👤 {{ list.owner_username or '?' }}</td>
+                    <td>{{ list.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
+                    <td>{{ '%.2f'|format(list.total_expense) }}</td>
+                  </tr>
+                  {% endfor %}
+                </tbody>
+              </table>
+            </div>
+          </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">
+
+            <div class="text-end mb-2">
+              <div class="btn-group btn-group-sm">
+                <button class="btn btn-outline-light" id="openFsBtn"
+                  onclick="openChartFullscreen('expensesChart','Wydatki')" title="Pełny ekran" disabled>⛶</button>
+
+                <button type="button" class="btn btn-outline-light" id="downloadMainChartBtn" title="Pobierz jako PNG"
+                  disabled>⬇</button>
+              </div>
+            </div>
+
+            <div class="d-flex gap-3 mb-3">
+              <div>
+                <h6 class="text-white">Podział według czasu</h6>
+                <div class="btn-group" role="group" aria-label="Podział czasu">
+                  <button type="button" class="btn btn-outline-light btn-sm" id="toggleMonthlySplit"
+                    aria-pressed="true">Miesięczny</button>
+                  <button type="button" class="btn btn-outline-light btn-sm" id="toggleDailySplit"
+                    aria-pressed="false">Dzienny</button>
+                </div>
+              </div>
+              <div>
+                <h6 class="text-white">Kategorie/Sumy wydatków</h6>
+                <button class="btn btn-outline-light btn-sm" id="toggleCategorySplit" aria-pressed="false">Przełącz na
+                  kategorie</button>
+              </div>
+            </div>
+
+
+            <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">
+          <div class="btn-group btn-group-sm" role="group">
+            <button class="btn btn-outline-light range-btn" 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>
+
+        <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>
+            <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-light" id="customRangeBtn">📊 Pokaż dane z zakresu</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="chartFullscreenModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-xl modal-dialog-centered">
+    <div class="modal-content bg-dark">
+      <div class="modal-header">
+        <h5 class="modal-title" id="chartModalTitle">Wykres</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+      </div>
+      <div class="modal-body p-0">
+        <canvas id="chartFullscreenCanvas"></canvas>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static_bp.serve_js_lib', filename='chart.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='show_all_expense.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='expense_chart.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='expense_table.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='expense_tab.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='select_all_table.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='chart_controls.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='modal_chart.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='download_chart.js') }}?v={{ APP_VERSION }}"></script>
+{% endblock %}

templates/list.html

@@ -6,45 +6,61 @@
   <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 %}
+    <!-- PRZYCISK DO MODALA KATEGORII -->
+    <button class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal" data-bs-target="#categoriesModal">
+      ✏️ Zmień kategorie
+    </button>
+    {% else %}
+    <!-- ZAMIAST LINKU: OTWARCIE MODALA KATEGORII -->
+    <button class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal" data-bs-target="#categoriesModal">
+      ➕ Dodaj kategorię
+    </button>
     {% 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
+<a href="{{ request.url_root }}share/{{ list.share_token }}" class="btn btn-outline-primary btn-sm w-100 mb-3" {% if not
   list.is_public %}disabled{% endif %}>
   ✅ Otwórz tryb zakupowy / odznaczania produktów
 </a>
-<div id="share-card" class="card bg-dark text-white mb-4">
+
+<div id="share-card" class="card bg-secondary bg-opacity-10 text-white mb-4">
   <div class="card-body">
     <div class="mb-2">
       <strong id="share-header">
-        {% if list.is_public %}
-        🔗 Udostępnij link:
-        {% else %}
-        🙈 Lista jest ukryta przed gośćmi
-        {% endif %}
+        {% if list.is_public %}🔗 Udostępnij link (lista publiczna){% else %}🔗 Udostępnij link (widoczna przez link /
+        uprawnienia){% endif %}
       </strong>
-      <span id="share-url" class="badge bg-secondary text-wrap"
-        style="font-size: 0.7rem; {% if not list.is_public %}display: none;{% endif %}">
+      <span id="share-url" class="badge rounded-pill bg-secondary text-wrap" style="font-size: 0.7rem;">
         {{ request.url_root }}share/{{ list.share_token }}
       </span>
     </div>
     <div class="d-flex flex-column flex-md-row gap-2">
-      <button id="copyBtn" class="btn btn-success btn-sm flex-fill"
-        onclick="copyLink('{{ request.url_root }}share/{{ list.share_token }}')" {% if not list.is_public %}disabled{%
-        endif %}>
+      <button id="copyBtn" class="btn btn-outline-success btn-sm flex-fill"
+        onclick="copyLink('{{ request.url_root }}share/{{ list.share_token }}')">
         📋 Skopiuj / Udostępnij
       </button>
+
       <button id="toggleVisibilityBtn" class="btn btn-outline-light btn-sm flex-fill"
         onclick="toggleVisibility({{ list.id }})">
-        {% if list.is_public %}
-        🙈 Ukryj listę
-        {% else %}
-        👁️ Udostępnij ponownie
-        {% endif %}
+        {% if list.is_public %}🙈 Ustaw niepubliczną{% else %}🐵 Uczyń publiczną{% endif %}
+      </button>
+
+      <!-- ZAMIAST LINKU: OTWARCIE MODALA NADAWANIA DOSTĘPU -->
+      <button class="btn btn-outline-primary btn-sm flex-fill" data-bs-toggle="modal"
+        data-bs-target="#grantAccessModal">
+        ➕ Nadaj dostęp
       </button>
     </div>
   </div>
@@ -59,14 +75,13 @@
 </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>
-
-  <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-purchased" class="progress-bar bg-success" role="progressbar" data-bs-toggle="tooltip"
+    title="Kupione produkty"></div>
+  <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 %}
@@ -80,9 +95,8 @@
 {% endif %}
 
 <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
-  <button id="sort-toggle-btn" class="btn btn-sm btn-outline-warning" onclick="toggleSortMode()">
-    ✳️ Zmień kolejność
-  </button>
+  <button id="sort-toggle-btn" class="btn btn-sm btn-outline-warning" onclick="toggleSortMode()">✳️ Zmień
+    kolejność</button>
   <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" id="hidePurchasedToggle">
     <label class="form-check-label ms-2" for="hidePurchasedToggle">Ukryj zaznaczone</label>
@@ -93,35 +107,27 @@
   {% for item in items %}
   <li data-name="{{ item.name|lower }}" id="item-{{ item.id }}"
     class="list-group-item d-flex justify-content-between align-items-center flex-wrap clickable-item 
-         {% if item.purchased %}bg-success text-white{% elif item.not_purchased %}bg-warning text-dark{% else %}item-not-checked{% endif %}"
+           {% if item.purchased %}bg-success text-white{% elif item.not_purchased %}bg-warning text-dark{% else %}item-not-checked{% endif %}"
     data-is-share="{{ 'true' if is_share else 'false' }}">
 
     <div class="d-flex align-items-center gap-2 flex-grow-1">
-
       <input id="checkbox-{{ item.id }}" class="large-checkbox" type="checkbox" {% if item.purchased %}checked{% endif
         %} {% if list.is_archived or item.not_purchased %}disabled{% endif %}>
-
       <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>
 
       <div class="info-line ms-4 small d-flex flex-wrap gap-2" id="info-{{ item.id }}">
         {% set info_parts = [] %}
-        {% if item.note %}
-        {% set _ = info_parts.append('<span class="text-danger">[ <b>' ~ item.note ~ '</b> ]</span>') %}
-        {% endif %}
-        {% if item.not_purchased_reason %}
-        {% set _ = info_parts.append('<span class="text-dark">[ <b>Powód: ' ~ item.not_purchased_reason ~ '</b>
-          ]</span>') %}
-        {% endif %}
-        {% if item.added_by_display %}
-        {% set _ = info_parts.append('<span class="text-info">[ Dodał/a: <b>' ~ item.added_by_display ~ '</b> ]</span>')
-        %}
-        {% endif %}
-
+        {% if item.note %}{% set _ = info_parts.append('<span class="text-danger">[ <b>' ~ item.note ~ '</b> ]</span>')
+        %}{% endif %}
+        {% if item.not_purchased_reason %}{% set _ = info_parts.append('<span class="text-dark">[ <b>Powód: ' ~
+            item.not_purchased_reason ~ '</b> ]</span>') %}{% endif %}
+        {% if item.added_by_display %}{% set _ = info_parts.append('<span class="text-info">[ Dodał/a: <b>' ~
+            item.added_by_display ~ '</b> ]</span>') %}{% endif %}
         {% if info_parts %}
         <div class="info-line ms-4 small d-flex flex-wrap gap-2" id="info-{{ item.id }}">
           {{ info_parts | join(' ') | safe }}
@@ -132,34 +138,24 @@
 
     <div class="btn-group btn-group-sm" role="group">
       {% if not is_share %}
-      <button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else %}
-        onclick="editItem({{ item.id }}, '{{ item.name }}', {{ item.quantity or 1 }})" {% endif %}>
-        ✏️
-      </button>
-      <button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else %}
-        onclick="deleteItem({{ item.id }})" {% endif %}>
-        🗑️
-      </button>
+      <button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else
+        %}onclick="editItem({{ item.id }}, '{{ item.name }}', {{ item.quantity or 1 }})" {% endif %}>✏️</button>
+      <button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else
+        %}onclick="deleteItem({{ item.id }})" {% endif %}>🗑️</button>
       {% endif %}
 
       {% if item.not_purchased %}
-      <button type="button" class="btn btn-outline-light me-auto" {% if list.is_archived %}disabled{% else %}
-        onclick="unmarkNotPurchased({{ item.id }})" {% endif %}>
-        ✅ Przywróć
-      </button>
+      <button type="button" class="btn btn-outline-light me-auto" {% if list.is_archived %}disabled{% else
+        %}onclick="unmarkNotPurchased({{ item.id }})" {% endif %}>✅ Przywróć</button>
       {% elif not item.not_purchased %}
-      <button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else %}
-        onclick="markNotPurchasedModal(event, {{ item.id }})" {% endif %}>
-        ⚠️
-      </button>
+      <button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else
+        %}onclick="markNotPurchasedModal(event, {{ item.id }})" {% endif %}>⚠️</button>
       {% endif %}
     </div>
   </li>
-
   {% else %}
-  <li id="empty-placeholder" class="list-group-item bg-dark text-secondary text-center w-100">
-    Brak produktów w tej liście.
-  </li>
+  <li id="empty-placeholder" class="list-group-item bg-dark text-secondary text-center w-100">Brak produktów w tej
+    liście.</li>
   {% endfor %}
 </ul>
 
@@ -176,7 +172,8 @@
         placeholder="Dodaj produkt i ilość" required>
       <input type="number" id="newQuantity" name="quantity" class="form-control bg-dark text-white border-secondary"
         placeholder="Ilość" min="1" value="1" style="max-width: 90px;">
-      <button type="button" class="btn btn-success rounded-end" onclick="addItem({{ list.id }})">➕ Dodaj</button>
+      <button type="button" class="btn btn-outline-success rounded-end" onclick="addItem({{ list.id }})">➕
+        Dodaj</button>
     </div>
   </div>
 </div>
@@ -187,36 +184,125 @@
 <h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
 
 <div class="row g-3 mt-2" id="receiptGallery">
-  {% if receipt_files %}
-  {% for file in receipt_files %}
+  {% if receipts %}
+  {% for r in receipts %}
   <div class="col-6 col-md-4 col-lg-3 text-center">
-    <a href="{{ url_for('uploaded_file', filename=file) }}" class="glightbox" data-gallery="receipt-gallery">
-      <img src="{{ url_for('uploaded_file', filename=file) }}"
+    <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox"
+      data-gallery="receipt-gallery">
+      <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
         class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
     </a>
   </div>
   {% endfor %}
   {% else %}
-  <div class="alert alert-info text-center w-100" role="alert">
-    Brak wgranych paragonów do tej listy.
-  </div>
+  <div class="alert alert-info text-center w-100" role="alert">ℹ️ Brak wgranych paragonów do tej listy</div>
   {% endif %}
 </div>
 
+<!-- MODAL: KATEGORIA (pojedynczy wybór) -->
+<div class="modal fade" id="categoriesModal" tabindex="-1" aria-labelledby="categoriesModalLabel" 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="grantAccessModalLabel">Ustaw kategorię</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+      </div>
+
+      <form method="post" action="{{ url_for('list_settings', list_id=list.id) }}">
+        <div class="modal-body">
+          <div class="mb-4">
+            <label for="category_id" class="form-label">🏷️ Kategoria listy</label>
+            <select id="category_id" name="category_id"
+              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>
+
+          <input type="hidden" name="action" value="set_category">
+          <input type="hidden" name="next" value="{{ url_for('view_list', list_id=list.id) }}">
+        </div>
+
+        <div class="modal-footer justify-content-end">
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">❌ Anuluj</button>
+            <button type="submit" class="btn btn-sm btn-outline-light">💾 Zapisz</button>
+          </div>
+        </div>
+      </form>
+
+    </div>
+  </div>
+</div>
+
+<!-- MODAL: NADAWANIE DOSTĘPU -->
+<div class="modal fade" id="grantAccessModal" tabindex="-1" aria-labelledby="grantAccessModalLabel" 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="grantAccessModalLabel">Nadaj dostęp użytkownikom</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+      </div>
+
+      <div class="modal-body">
+        <div class="access-editor border rounded p-2 bg-dark"
+          data-post-url="{{ url_for('list_settings', list_id=list.id) }}"
+          data-suggest-url="{{ url_for('edit_my_list_suggestions', list_id=list.id) }}"
+          data-next="{{ url_for('view_list', list_id=list.id) }}" data-list-id="{{ list.id }}"
+          data-grant-action="grant_access" data-revoke-field="revoke_user_id">
+
+          <!-- Tokeny aktualnie uprawnionych -->
+          <div class="tokens d-flex flex-wrap gap-2 mb-2">
+            {% for u in permitted_users %}
+            <button type="button" class="btn btn-sm btn-outline-secondary rounded-pill token" data-user-id="{{ u.id }}"
+              data-username="{{ u.username }}" title="Kliknij, aby odebrać dostęp">
+              @{{ u.username }} <span aria-hidden="true">×</span>
+            </button>
+            {% endfor %}
+            {% if not permitted_users or permitted_users|length == 0 %}
+            <span class="no-perms text-warning small">Brak dodanych uprawnień.</span>
+            {% endif %}
+          </div>
+
+          <!-- Dodawanie wielu na raz + podpowiedzi prywatne -->
+          <div class="input-group input-group-sm">
+            <input type="text" class="access-input form-control form-control-sm bg-dark text-white border-secondary"
+              placeholder="Dodaj @użytkownika (wiele: przecinki/enter)" aria-label="Dodaj użytkowników">
+            <button type="button" class="access-add btn btn-sm btn-outline-light">➕ Dodaj</button>
+          </div>
+          <div class="text-secondary small mt-1">Kliknij token, aby odebrać dostęp.</div>
+        </div>
+      </div>
+
+      <div class="modal-footer justify-content-end">
+        <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">Zamknij</button>
+      </div>
+    </div>
+  </div>
+</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">
       <div class="modal-header">
-        <h5 class="modal-title" id="massAddModalLabel">Masowe dodawanie produktów</h5>
+        <h5 class="modal-title" id="massAddModalLabel">
+          Masowe dodawanie produktów
+          <span id="massAddProductStats" class="badge rounded-pill bg-primary ms-2"></span>
+        </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="mass-add-list" class="list-group">
-        </ul>
+        <div id="sort-bar" class="mb-2"></div>
+        <div class="mb-2"><span id="product-count" class="badge rounded-pill bg-primary ms-2"></span></div>
+        <ul id="mass-add-list" class="list-group"></ul>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Zamknij</button>
+        <button type="button" class="btn btn-outline-light btn-sm w-100" data-bs-dismiss="modal">Zamknij</button>
       </div>
     </div>
   </div>
@@ -229,12 +315,11 @@
   window.IS_SHARE = isShare;
   window.LIST_ID = {{ list.id }};
   window.IS_OWNER = {{ 'true' if is_owner else 'false' }};
-
 </script>
-
-<script src="{{ url_for('static_bp.serve_js', filename='mass_add.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='sort_mode.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='mass_add.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='sort_mode.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='access_users.js') }}?v={{ APP_VERSION }}"></script>
 <script>
   setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
 </script>

templates/list_share.html

@@ -6,19 +6,32 @@
   🛍️ {{ 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 %}
+
+  {% 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 +52,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>
 
@@ -98,8 +111,8 @@
     not current_user.is_authenticated %}disabled{% endif %}>
   <input id="newQuantity" type="number" class="form-control bg-dark text-white border-secondary" placeholder="Ilość"
     min="1" value="1" style="max-width: 90px;" {% if not current_user.is_authenticated %}disabled{% endif %}>
-  <button onclick="addItem({{ list.id }})" class="btn btn-success rounded-end" {% if not current_user.is_authenticated
-    %}disabled{% endif %}>➕ Dodaj</button>
+  <button onclick="addItem({{ list.id }})" class="btn btn-outline-success rounded-end" {% if not
+    current_user.is_authenticated %}disabled{% endif %}>➕ Dodaj</button>
 </div>
 {% endif %}
 
@@ -109,47 +122,55 @@
 <div class="input-group mb-2">
   <input id="expenseAmount" type="number" step="0.01" min="0" class="form-control bg-dark text-white border-secondary"
     placeholder="Kwota (PLN)">
-  <button onclick="submitExpense({{ list.id }})" class="btn btn-success rounded-end">💾 Zapisz</button>
-</div>
-{% endif %}
+  <button onclick="submitExpense({{ list.id }})" class="btn btn-outline-primary rounded-end">💾 Zapisz</button>
+</div>{% endif %}
 <p id="total-expense2"><b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN</p>
 
 <button id="toggleReceiptBtn" class="btn btn-outline-light mb-3 w-100 w-md-auto d-block mx-auto" type="button"
   data-bs-toggle="collapse" data-bs-target="#receiptSection" aria-expanded="false" aria-controls="receiptSection">
   📄 Pokaż sekcję paragonów
 </button>
+
 <div class="collapse px-2 px-md-4" id="receiptSection">
   {% set receipt_pattern = 'list_' ~ list.id %}
 
-  <div class="mt-3 p-3 border border-secondary rounded bg-dark text-white {% if not receipt_files %}d-none{% endif %}"
-    id="receiptAnalysisBlock">
-    <h5>🧠 Analiza paragonów (OCR)</h5>
-    <p class="text-small">System spróbuje automatycznie rozpoznać kwoty z dodanych paragonów.</p>
+  <div class="mt-3 p-3 border border-secondary rounded bg-dark text-white 
+  {% if not receipts %}
+     d-none
+  {% endif %}" id="receiptAnalysisBlock">
+
+    <h5>🔍 Analiza paragonów (OCR)</h5>
+    <p class="text-small">System spróbuje automatycznie rozpoznać kwoty z dodanych paragonów.<br>
+      Dokonaj korekty jeśli źle rozpozna kwote i kliknij w "Dodaj" aby dodać wydatek.
+    </p>
 
     {% if current_user.is_authenticated %}
-    <button id="analyzeBtn" class="btn btn-outline-info mb-3">
+    <button id="analyzeBtn" class="btn btn-sm btn-outline-light mb-3">
       🔍 Zleć analizę OCR
     </button>
     {% else %}
-    <div class="alert alert-warning">🔒 Tylko zalogowani użytkownicy mogą zlecać analizę OCR paragonów.</div>
+    <div class="alert alert-warning text-centerg">
+      ⚠️ Tylko zalogowani użytkownicy mogą zlecać analizę OCR.
+    </div>
     {% endif %}
     <div id="analysisResults" class="mt-2"></div>
   </div>
 
   <h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
   <div class="row g-3 mt-2" id="receiptGallery">
-    {% if receipt_files %}
-    {% for file in receipt_files %}
+    {% if receipts %}
+    {% for r in receipts %}
     <div class="col-6 col-md-4 col-lg-3 text-center">
-      <a href="{{ url_for('uploaded_file', filename=file) }}" class="glightbox" data-gallery="receipt-gallery">
-        <img src="{{ url_for('uploaded_file', filename=file) }}"
+      <a href="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}" class="glightbox"
+        data-gallery="receipt-gallery">
+        <img src="{{ url_for('uploaded_file', filename=r.filename) }}?v={{ r.version_token or '0' }}"
           class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
       </a>
     </div>
     {% endfor %}
     {% else %}
     <div class="alert alert-info text-center w-100" role="alert">
-      Brak wgranych paragonów do tej listy.
+      ℹ️ Brak wgranych paragonów do tej listy
     </div>
     {% endif %}
   </div>
@@ -174,6 +195,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"
@@ -187,20 +214,23 @@
 
 <!-- Modal notatki -->
 <div class="modal fade" id="noteModal" tabindex="-1" aria-hidden="true">
-  <div class="modal-dialog">
+  <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">Dodaj notatkę</h5>
         <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
       </div>
+
       <form id="noteForm" onsubmit="submitNote(event)">
         <div class="modal-body">
-          <textarea id="noteText" class="form-control" rows="4"
-            placeholder="Np. 'Nie było, zamieniłem na inny'"></textarea>
+          <textarea id="noteText" class="form-control" rows="4" placeholder="Np. 'Promocja 2+2'"></textarea>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
-          <button type="submit" class="btn btn-success">💾 Zapisz</button>
+          <div class="btn-group" role="group">
+            <button type="button" class="btn btn-outline-light btn-sm" data-bs-dismiss="modal">❌ Anuluj</button>
+            <button type="submit" class="btn btn-outline-light btn-sm">💾 Zapisz</button>
+          </div>
+
         </div>
       </form>
     </div>
@@ -216,12 +246,12 @@
     var isSorting = false;
   }
 </script>
-<script src="{{ url_for('static_bp.serve_js_lib', filename='Sortable.min.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='notes.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='clickable_row.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_section.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_analysis.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js_lib', filename='Sortable.min.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='notes.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='clickable_row.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='receipt_section.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='receipt_analysis.js') }}?v={{ APP_VERSION }}"></script>
 <script>
   setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
 </script>

templates/main.html

@@ -4,7 +4,7 @@
 
 {% if not current_user.is_authenticated %}
 <div class="alert alert-info text-center" role="alert">
-  Jesteś w trybie gościa. Możesz tylko przeglądać listy udostępnione publicznie.
+  ℹ️ Nie jesteś zalogowany/a. Możesz przeglądać tylko listy publiczne.
 </div>
 {% endif %}
 
@@ -13,9 +13,9 @@
   <h2 class="mb-2">Stwórz nową listę</h2>
 </div>
 
-<div class="card bg-dark text-white mb-4">
+<div class="card bg-secondary bg-opacity-10 text-white mb-4">
   <div class="card-body">
-    <form action="/create" method="post">
+    <form action="{{ url_for('create_list') }}" method="post">
       <div class="input-group mb-3">
         <input type="text" name="title" id="title" placeholder="Wprowadź nazwę nowej listy" required
           class="form-control bg-dark text-white border-secondary">
@@ -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>
 
@@ -63,7 +63,7 @@
   Twoje listy
   <button type="button" class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal"
     data-bs-target="#archivedModal">
-    📁 Zarchiwizowane
+    🗄️ Zarchiwizowane
   </button>
 </h3>
 {% if user_lists %}
@@ -74,33 +74,59 @@
   {% 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>
-        <a href="/copy/{{ l.id }}" class="btn btn-sm btn-outline-light">📋 Kopiuj</a>
-        <a href="/edit_my_list/{{ l.id }}" class="btn btn-sm btn-outline-light">✏️ Edytuj</a>
-        <a href="/toggle_archive_list/{{ l.id }}?archive=true" class="btn btn-sm btn-outline-light">🗄️ Archiwizuj</a>
-        {% if l.is_public %}
-        <a href="/toggle_visibility/{{ l.id }}" class="btn btn-sm btn-outline-light">🙈 Ukryj</a>
-        {% else %}
-        <a href="/toggle_visibility/{{ l.id }}" class="btn btn-sm btn-outline-light">👁️ Odkryj</a>
-        {% endif %}
+        <a href="{{ url_for('view_list', list_id=l.id) }}"
+          class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">📂 Otwórz</a>
+        <a href="{{ url_for('shared_list', token=l.share_token) }}"
+          class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">✏️ Odznaczaj</a>
+        <a href="{{ url_for('copy_list', list_id=l.id) }}"
+          class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">📋 Kopiuj</a>
+        <a href="{{ url_for('toggle_visibility', list_id=l.id) }}"
+          class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">
+          {% if l.is_public %}🙈 Ukryj{% else %}🐵 Odkryj{% endif %}
+        </a>
+        <a href="{{ url_for('edit_my_list', list_id=l.id) }}"
+          class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">⚙️ Ustawienia</a>
       </div>
     </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>
@@ -109,35 +135,58 @@
 {% endif %}
 {% endif %}
 
-<h3 class="mt-4">Publiczne listy innych użytkowników</h3>
-{% if public_lists %}
+
+<h3 class="mt-4"> {% if current_user.is_authenticated %}Udostępnione i publiczne listy innych użytkowników {% else %}
+  Publiczne listy innych użytkowników {% endif %}</h3>
+
+
+{% set lists_to_show = accessible_lists %}
+{% if lists_to_show %}
 <ul class="list-group">
-  {% for l in public_lists %}
+  {% for l in lists_to_show %}
   {% set purchased_count = l.purchased_count %}
   {% set total_count = l.total_count %}
   {% 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>
-      <a href="/guest-list/{{ l.id }}" class="btn btn-sm btn-outline-light">📄 Otwórz</a>
+      <span class="fw-bold">
+        {{ l.title }} (Autor: {{ l.owner.username if l.owner else '—' }})
+        {% 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="{{ url_for('shared_list', list_id=l.id) }}"
+        class="btn btn-sm btn-outline-light d-flex align-items-center text-nowrap">✏️ Odznaczaj</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>
-      <span class="progress-label small fw-bold 
-                      {% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
+      <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>
+
+      {% 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>
+
+      <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 < 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
-        {% endif %}
+        {% if l.total_expense > 0 %} — 💸 {{ '%.2f'|format(l.total_expense) }} PLN{% endif %}
       </span>
     </div>
   </li>
   {% endfor %}
 </ul>
 {% else %}
-<p><span class="badge rounded-pill bg-secondary opacity-75">Brak dostępnych list publicznych do wyświetlenia</span></p>
+<p><span class="badge rounded-pill bg-secondary opacity-75">Brak list do wyświetlenia</span></p>
 {% endif %}
 
 <div class="modal fade" id="archivedModal" tabindex="-1" aria-labelledby="archivedModalLabel" aria-hidden="true">
@@ -153,14 +202,18 @@
           {% for l in archived_lists %}
           <li class="list-group-item bg-dark text-white d-flex justify-content-between align-items-center flex-wrap">
             <span>{{ l.title }}</span>
-            <a href="/toggle_archive_list/{{ l.id }}?archive=false" class="btn btn-sm btn-outline-success">♻️
-              Przywróć</a>
+            <form action="{{ url_for('edit_my_list', list_id=l.id) }}" method="post" class="d-contents">
+              <input type="hidden" name="unarchive" value="1">
+              <button type="submit" class="btn btn-sm btn-outline-light">
+                ♻️ Przywróć
+              </button>
+            </form>
           </li>
           {% endfor %}
         </ul>
         {% else %}
         <div class="alert alert-info text-center" role="alert">
-          Nie masz żadnych zarchiwizowanych list.
+          ℹ️ Nie masz żadnych zarchiwizowanych list
         </div>
         {% endif %}
       </div>
@@ -180,14 +233,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>
@@ -195,8 +251,8 @@
 </div>
 
 {% block scripts %}
-<script src="{{ url_for('static_bp.serve_js', filename='toggle_button.js') }}"></script>
-<script src="{{ url_for('static_bp.serve_js', filename='select_month.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='toggle_button.js') }}?v={{ APP_VERSION }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='select_month.js') }}?v={{ APP_VERSION }}"></script>
 {% endblock %}
 
 {% endblock %}

templates/user_expenses.html

@@ -1,184 +0,0 @@
-{% extends 'base.html' %}
-{% block title %}Wydatki z Twoich list{% endblock %}
-
-{% block content %}
-<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
-  <h2 class="mb-2">Statystyki wydatków</h2>
-  <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 %}>
-    <label class="form-check-label ms-2 text-white" for="showAllLists">
-      Pokaż wszystkie publiczne listy innych
-    </label>
-  </div>
-</div>
-
-<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 %}">
-    🌐 Wszystkie
-  </a>
-  {% 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 %}">
-    {{ cat.name }}
-  </a>
-  {% 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">
-          📊 Wykres
-        </button>
-      </li>
-    </ul>
-
-    <div class="tab-content" id="expenseTabsContent">
-
-      <!--  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>
-
-
-
-            <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>
-                <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1"
-                  id="customStart">
-                <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="customEnd">
-                <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">
-                <label class="form-check-label ms-2 text-white" for="onlyWithExpenses">
-                  Pokaż tylko listy z wydatkami
-                </label>
-              </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>
-            <div class="table-responsive">
-              <table class="table table-dark table-striped align-middle sortable">
-                <thead>
-                  <tr>
-                    <th></th>
-                    <th>Nazwa listy</th>
-                    <th>Data</th>
-                    <th>Wydatki (PLN)</th>
-                  </tr>
-                </thead>
-                <tbody id="listsTableBody">
-                  {% for list in lists_data %}
-                  <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')) }}">
-
-
-                    <td>
-                      <input type="checkbox" class="form-check-input list-checkbox"
-                        data-amount="{{ '%.2f'|format(list.total_expense) }}">
-                    </td>
-                    <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>
-                  </tr>
-                  {% endfor %}
-                </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>
-
-        <!-- 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>
-            <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>
-
-
-      </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>
-{% endblock %}