fix w sugestiach i js

Reviewed-on: #9

.env.example

@@ -1,20 +1,171 @@
-# Domyślny port aplikacji
+# APP_PORT:
+# Domyślny port, na którym uruchamiana jest aplikacja Flask
+# Domyślnie: 8000
 APP_PORT=8000
 
-# Klucz bezpieczeństwa Flask
+# SECRET_KEY:
+# Klucz używany przez Flask do zabezpieczenia sesji, tokenów i formularzy
+# Powinien być długi i trudny do odgadnięcia
 SECRET_KEY=supersekretnyklucz123
 
-# Hasło główne do systemu
+# SYSTEM_PASSWORD:
+# Hasło główne administratora systemowego, używane np. przy inicjalizacji
+# Domyślnie: admin
 SYSTEM_PASSWORD=admin
 
-# Domyślny admin (login i hasło)
+# DEFAULT_ADMIN_USERNAME:
+# Domyślna nazwa użytkownika administratora (tworzona przy starcie)
+# Domyślnie: admin
 DEFAULT_ADMIN_USERNAME=admin
+
+# DEFAULT_ADMIN_PASSWORD:
+# Domyślne hasło administratora
+# Domyślnie: admin123
 DEFAULT_ADMIN_PASSWORD=admin123
 
-# Katalog wgrywanych plików
+# UPLOAD_FOLDER:
+# Ścieżka (względna) do katalogu, gdzie zapisywane są wgrywane pliki
+# Domyślnie: uploads
 UPLOAD_FOLDER=uploads
 
+# SESSION_TIMEOUT_MINUTES:
+# Czas bezczynności użytkownika (w minutach), po którym sesja wygasa
+# Domyślnie: 10080 (7 dni)
+SESSION_TIMEOUT_MINUTES=10080
+
+# AUTH_COOKIE_MAX_AGE:
+# Czas życia ciasteczka autoryzacyjnego (w sekundach)
+# Domyślnie: 86400 (1 dzień)
+AUTH_COOKIE_MAX_AGE=86400
+
+# AUTHORIZED_COOKIE_VALUE:
+# Wartość ciasteczka uprawniającego do dostępu (np. do zasobów zabezpieczonych)
+# Powinna być trudna do przewidzenia
+# Chodzi to o zabezpieczenie strony "hasłęm głównym czyli endpointem /system-auth"
 AUTHORIZED_COOKIE_VALUE=twoj_wlasny_hash
 
-# czas zycia cookie
-AUTH_COOKIE_MAX_AGE=86400
+# SESSION_COOKIE_SECURE:
+# Określa, czy ciasteczko sesyjne (Flask session) ma mieć ustawiony atrybut "Secure".
+# Wymusza, by przeglądarka przesyłała je tylko przez HTTPS.
+# W środowisku deweloperskim (HTTP) ustaw na 0, by uniknąć błędu "secure cookie over insecure connection".
+# Zalecane: 1 w produkcji (HTTPS), 0 w dev.
+SESSION_COOKIE_SECURE=0
+
+# BCRYPT_PEPPER:
+# Dodatkowy „sekretny klucz” (pepper) dodawany do hasła przed zahashowaniem
+# Zwiększa bezpieczeństwo przechowywanych haseł
+BCRYPT_PEPPER=sekretnyKluczbcrypt
+
+# HEALTHCHECK_TOKEN:
+# Token wykorzystywany do sprawdzania stanu aplikacji (np. w Docker Compose)
+# Domyślnie: alamapsaikota123
+HEALTHCHECK_TOKEN=alamapsaikota123
+
+# Rodzaj bazy: sqlite, pgsql, mysql
+# Mozliwe wartosci: sqlite / pgsql / mysql
+DB_ENGINE=sqlite
+
+# --- Konfiguracja dla sqlite ---
+# Plik bazy bedzie utworzony automatycznie w katalogu ./instance
+# Pozostale zmienne sa ignorowane przy DB_ENGINE=sqlite
+
+# --- Konfiguracja dla pgsql ---
+# Ustaw DB_ENGINE=pgsql
+# Domyslny port PostgreSQL to 5432
+# Wymaga dzialajacego serwera PostgreSQL (np. kontener `postgres`)
+
+# --- Konfiguracja dla mysql ---
+# Ustaw DB_ENGINE=mysql
+# Domyslny port MySQL to 3306
+# Wymaga kontenera z MySQL i uzytkownika z dostepem do bazy
+
+# Wspolne zmienne (dla pgsql, mysql)
+# DB_HOST = pgsql lub mysql zgodnie z deployem (profil w docker-compose.yml)
+
+DB_HOST=pgsql 
+DB_PORT=5432
+DB_NAME=myapp
+DB_USER=user
+DB_PASSWORD=pass
+
+# ========================
+# Nagłówki bezpieczeństwa
+# ========================
+
+# ENABLE_HSTS:
+# Wymusza HTTPS poprzez ustawienie nagłówka Strict-Transport-Security.
+# Zalecane (1) jeśli aplikacja działa za HTTPS. Ustaw 0, jeśli korzystasz z HTTP lokalnie.
+ENABLE_HSTS=1
+
+# ENABLE_XFO:
+# Ustawia nagłówek X-Frame-Options: DENY, który blokuje osadzanie strony w <iframe>.
+# Chroni przed atakami typu clickjacking. Ustaw 0, jeśli celowo korzystasz z osadzania.
+ENABLE_XFO=1
+
+# ENABLE_XCTO:
+# Ustawia nagłówek X-Content-Type-Options: nosniff, który zapobiega sniffowaniu MIME przez przeglądarkę.
+# Chroni przed błędną interpretacją typów plików (np. skrypt JS jako obraz). Zalecane: 1.
+ENABLE_XCTO=1
+
+# ENABLE_CSP:
+# Ustawia podstawową politykę Content-Security-Policy (CSP), która ogranicza wczytywanie zasobów tylko z własnej domeny.
+# Zalecane: 1. Ustaw 0, jeśli używasz zewnętrznych skryptów lub masz problemy z WebSocketami (w CSP: connect-src 'self').
+ENABLE_CSP=1
+
+# REFERRER_POLICY:
+# Ustawia nagłówek Referrer-Policy, który kontroluje, ile informacji o źródle (refererze)
+# jest przekazywane podczas nawigacji lub zapytań sieciowych.
+# Domyślnie: strict-origin-when-cross-origin — pełny URL tylko w obrębie tej samej domeny,
+# a przy przejściach między domenami tylko origin (np. https://example.com).
+# Zalecane ustawienie dla dobrej równowagi między prywatnością a funkcjonalnością.
+# Inne możliwe wartości: no-referrer, same-origin, origin, strict-origin, unsafe-url itd.
+REFERRER_POLICY="strict-origin-when-cross-origin"
+
+# DEBUG_MODE:
+# Czy uruchomić aplikację w trybie debugowania (z konsolą błędów i autoreloaderem)
+# Domyślnie: 1
+DEBUG_MODE=1
+
+# DISABLE_ROBOTS:
+# Czy zablokować indeksowanie przez roboty (serwuje robots.txt z Disallow: /)
+# Domyślnie: 0
+DISABLE_ROBOTS=0
+
+# ========================
+# Nagłówki cache
+# ========================
+
+# JS_CACHE_CONTROL:
+# Nagłówki Cache-Control dla plików JS (/static/js/)
+# Domyślnie: "no-cache"
+JS_CACHE_CONTROL="no-cache"
+
+# CSS_CACHE_CONTROL:
+# Nagłówki Cache-Control dla plików CSS (/static/css/)
+# 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: "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: "max-age=86400"
+LIB_CSS_CACHE_CONTROL="max-age=86400"
+
+# UPLOADS_CACHE_CONTROL:
+# Nagłówki Cache-Control dla wgrywanych plików (/uploads/)
+# Domyślnie: "max-age=2592000, immutable"
+UPLOADS_CACHE_CONTROL="max-age=2592000, immutable"
+
+# DEFAULT_CATEGORIES:
+# Lista domyślnych kategorii tworzonych automatycznie przy starcie aplikacji,
+# jeśli nie istnieją w bazie danych.
+# Podaj w formacie CSV (oddzielone przecinkami) – kolejność zostanie zachowana.
+# Możesz dodać własne kategorie
+# UWAGA: Wielkość liter w nazwach jest zachowywana, ale porównywanie odbywa się
+# bez rozróżniania wielkości liter (case-insensitive).
+# Domyślnie: poniższa lista
+DEFAULT_CATEGORIES="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"

.gitignore

@@ -4,5 +4,8 @@ env
 *.db
 __pycache__
 instance/
+database/
 uploads/
-.DS_Store
+.DS_Store
+db/*
+*.swp

Dockerfile

@@ -4,6 +4,18 @@ 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 \
+    poppler-utils \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
 # Kopiujemy wymagania
 COPY requirements.txt requirements.txt
 

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"]

README.md

@@ -1,59 +1,76 @@
-# Live Lista Zakupów
+# Aplikacja List Zakupów
 
-Aplikacja webowa do współdzielonych list zakupów z obsługą wielu użytkowników, trybem współpracy w czasie rzeczywistym, panelami administracyjnymi oraz możliwością załączania paragonów.
+Prosta aplikacja webowa do zarządzania listami zakupów z obsługą użytkowników, OCR paragonów, statystykami i trybem współdzielenia.
 
-## Funkcje
+## Główne funkcje
 
-- Tworzenie, edycja i archiwizacja list zakupów
-- Dodawanie, edycja, usuwanie produktów i oznaczanie ich jako kupione
-- Udostępnianie list przez link (token)
-- Wgrywanie zdjęć paragonów do listy zakupów
-- Wyszukiwarka produktów i podpowiedzi
-- Komentarze do produktów
-- Panel administracyjny (zarządzanie użytkownikami, listami, paragonami)
-- Obsługa w czasie rzeczywistym (Socket.IO)
-- Logowanie i autoryzacja użytkowników
-- Systemowe hasło dostępu do aplikacji
+- Logowanie i zarządzanie użytkownikami (admin/user)
+- Tworzenie list zakupów z pozycjami i ilością
+- Wgrywanie paragonów (podstawowa obsługa OCR)
+- Archiwizacja i udostępnianie list (publiczne/prywatne)
+- Statystyki wydatków z podziałem na okresy, statystyki dla użytkowników
+- Panel administracyjny (statystyki, produkty, paragony, zarządzanie, użytkowmicy)
 
 ## Wymagania
 
-- Docker
-- Docker Compose
+- Python 3.9+
+- Docker (opcjonalnie dla produkcji)
 
-## Sposób uruchomienia z Docker Compose
+## Instalacja lokalna
 
-1. **Przygotuj plik `.env` w katalogu głównym projektu** (przykład):
+1. Sklonuj repozytorium:
 
-`APP_PORT=8000`
+   ```bash
+   git https://gitea.linuxiarz.pl/gru/lista_zakupowa_live.git
+   cd lista_zakupowa_live
+   ```
 
-`SECRET_KEY=twoj_super_tajny_klucz`
+2. Utwórz i uzupełnij plik `.env` (zobacz `.env example`).
 
-`SYSTEM_PASSWORD=haslo_do_aplikacji`
+3. Utwórz środowisko i zainstaluj zależności:
 
-`DEFAULT_ADMIN_USERNAME=admin`
+   ```bash
+   python -m venv venv
+   source venv/bin/activate
+   pip install -r requirements.txt
+   ```
 
-`DEFAULT_ADMIN_PASSWORD=admin123`
+4. Uruchom aplikację:
 
-2. **Uruchom aplikację:**
+   ```bash
+   flask --app app.py run
+   ```
 
-Domyślnie aplikacja będzie dostępna pod adresem:  
-**http://localhost:8000**
+## Deploy z Docker Compose
 
-3. **Pierwsze logowanie:**
-- Po wejściu na stronę zostaniesz poproszony o podanie hasła systemowego (`SYSTEM_PASSWORD`).
-- Przy pierwszym uruchomieniu zostanie automatycznie utworzone konto administratora na podstawie zmiennych `DEFAULT_ADMIN_USERNAME` i `DEFAULT_ADMIN_PASSWORD`.
+1. Skonfiguruj `.env`.
+
+2. Uruchom:
+
+   ```bash
+   docker-compose up --build
+   ```
+
+Aplikacja będzie dostępna pod `http://localhost:8000`.
 
 ## Domyślne dane logowania
 
-- **Login administratora:** `admin` (lub wartość z `DEFAULT_ADMIN_USERNAME`)
-- **Hasło administratora:** `admin123` (lub wartość z `DEFAULT_ADMIN_PASSWORD`)
+- Główne hasło systemowe: `admin`
+- Admin: `admin` / `admin123`
 
-4. **Aby uruchomić aplikację w Dockerze, wykonaj następujące kroki:**
+## Konfiguracja bazy danych
 
-* Przygotuj plik .env w katalogu projektu z wymaganymi zmiennymi środowiskowymi
-* Uruchom aplikację poleceniem:
-docker compose up --build
+Obsługiwane silniki: `sqlite`, `pgsql`, `mysql`.
 
----
+Ustaw `DB_ENGINE` oraz odpowiednie zmienne w `.env`:
 
+Przykład dla PostgreSQL:
 
+```env
+DB_ENGINE=pgsql
+DB_HOST=db
+DB_PORT=5432
+DB_NAME=myapp
+DB_USER=user
+DB_PASSWORD=pass
+```

_tools/add_products.py

@@ -0,0 +1,270 @@
+import urllib.request
+import json
+from app import db, SuggestedProduct, app
+
+CATEGORIES = {
+    "Przyprawa": [
+        "przyprawa",
+        "pieprz",
+        "sól",
+        "bazylia",
+        "oregano",
+        "papryka",
+        "majeranek",
+        "czosnek",
+        "tymianek",
+        "rozmaryn",
+        "kolendra",
+        "curry",
+        "imbir",
+        "goździki",
+        "chili",
+        "koper",
+        "kminek",
+        "liść laurowy",
+        "ziele angielskie",
+        "kurkuma",
+        "musztarda",
+        "chrzan",
+    ],
+    "Mięso": [
+        "kurczak",
+        "piersi z kurczaka",
+        "udka z kurczaka",
+        "wołowina",
+        "mielona wołowina",
+        "wieprzowina",
+        "schab",
+        "łopatka",
+        "szynka",
+        "boczek",
+        "indyk",
+        "filet z indyka",
+        "gulasz",
+        "pasztet",
+        "karkówka",
+        "żeberka",
+        "kiełbasa",
+        "parówki",
+        "salami",
+        "kabanos",
+    ],
+    "Ryba i owoce morza": [
+        "łosoś",
+        "dorsz",
+        "mintaj",
+        "makrela",
+        "pstrąg",
+        "karp",
+        "śledź",
+        "tuńczyk",
+        "morszczuk",
+        "sardynka",
+        "szproty",
+        "anchois",
+        "tilapia",
+        "sandacz",
+        "halibut",
+        "sum",
+        "flądra",
+        "ostrobok",
+        "paluszki rybne",
+        "konserwa rybna",
+    ],
+    "Nabiał": [
+        "mleko",
+        "jogurt",
+        "ser żółty",
+        "ser biały",
+        "twaróg",
+        "śmietana",
+        "masło",
+        "kefir",
+        "maślanka",
+        "serek wiejski",
+        "serek topiony",
+        "mozzarella",
+        "feta",
+        "parmezan",
+        "gouda",
+        "emmental",
+        "ser pleśniowy",
+        "ser homogenizowany",
+        "serek mascarpone",
+        "ser ricotta",
+    ],
+    "Warzywo": [
+        "pomidor",
+        "ogórek",
+        "marchew",
+        "cebula",
+        "sałata",
+        "papryka",
+        "ziemniak",
+        "kapusta",
+        "brokuł",
+        "kalafior",
+        "cukinia",
+        "bakłażan",
+        "szpinak",
+        "rukola",
+        "seler",
+        "por",
+        "burak",
+        "dynia",
+        "rzodkiewka",
+        "fasola",
+    ],
+    "Owoc": [
+        "jabłko",
+        "banan",
+        "gruszka",
+        "truskawka",
+        "winogrono",
+        "malina",
+        "borówka",
+        "czereśnia",
+        "wiśnia",
+        "brzoskwinia",
+        "nektaryna",
+        "śliwka",
+        "ananas",
+        "mango",
+        "kiwi",
+        "cytryna",
+        "limonka",
+        "pomarańcza",
+        "mandarynka",
+        "grejpfrut",
+    ],
+    "Pieczywo i zboża": [
+        "chleb",
+        "bułka",
+        "bagietka",
+        "kajzerka",
+        "pumpernikiel",
+        "chleb razowy",
+        "chleb żytni",
+        "tost",
+        "grahamka",
+        "croissant",
+        "tortilla",
+        "pizza",
+        "pierogi",
+        "ryż",
+        "makaron",
+        "kasza jaglana",
+        "kasza gryczana",
+        "owsianka",
+        "płatki kukurydziane",
+        "musli",
+    ],
+    "Słodycze i przekąski": [
+        "czekolada",
+        "baton",
+        "ciastko",
+        "wafel",
+        "lody",
+        "cukierek",
+        "żelki",
+        "herbatnik",
+        "paluszki",
+        "chipsy",
+        "orzeszki",
+        "popcorn",
+        "krakersy",
+        "ciasto",
+        "muffin",
+        "pączek",
+        "drożdżówka",
+        "babeczka",
+        "piernik",
+        "beza",
+    ],
+    "Napoje": [
+        "woda",
+        "sok jabłkowy",
+        "sok pomarańczowy",
+        "sok multiwitamina",
+        "cola",
+        "pepsi",
+        "napój gazowany",
+        "kawa",
+        "herbata",
+        "piwo",
+        "wino czerwone",
+        "wino białe",
+        "tonik",
+        "lemoniada",
+        "napój izotoniczny",
+        "kompot",
+        "napój mleczny",
+        "maślanka pitna",
+        "koktajl owocowy",
+        "nektar",
+    ],
+    "Tłuszcze i oleje": [
+        "oliwa",
+        "olej rzepakowy",
+        "olej słonecznikowy",
+        "masło klarowane",
+        "margaryna",
+        "smalec",
+        "masło orzechowe",
+        "tłuszcz kokosowy",
+        "olej lniany",
+        "olej z pestek winogron",
+        "olej sezamowy",
+        "olej ryżowy",
+        "olej z awokado",
+        "olej kukurydziany",
+        "olej arachidowy",
+        "olej palmowy",
+        "olej konopny",
+        "olej sojowy",
+        "olej dyniowy",
+        "olej z orzechów włoskich",
+    ],
+    "Dania gotowe": [
+        "pizza",
+        "hamburger",
+        "hot dog",
+        "zupa",
+        "gulasz",
+        "pierogi ruskie",
+        "pierogi z mięsem",
+        "lasagne",
+        "sałatka warzywna",
+        "kanapka",
+        "wrap",
+        "tortilla",
+        "zapiekanka",
+        "sushi",
+        "falafel",
+        "kebab",
+        "pyzy",
+        "kluski śląskie",
+        "kotlet schabowy",
+        "gołąbki",
+    ],
+}
+
+produkty = []
+
+for category, names in CATEGORIES.items():
+    for name in names:
+        produkty.append((category, name.lower().strip()))
+
+print(f"Przygotowano {len(produkty)} produktów do dodania.")
+
+with app.app_context():
+    dodane = 0
+    for category, name in produkty:
+        full_name = f"{category}: {name}"
+        if not SuggestedProduct.query.filter_by(name=full_name).first():
+            prod = SuggestedProduct(name=full_name)
+            db.session.add(prod)
+            dodane += 1
+    db.session.commit()
+
+print(f"Dodano {dodane} produktów do bazy.")

_tools/add_receipt_to_list.py

@@ -0,0 +1,47 @@
+import os
+from datetime import datetime
+from app import db, app, Receipt
+
+
+def extract_list_id(filename):
+    if filename.startswith("list_"):
+        parts = filename.split("_", 2)
+        if len(parts) >= 2 and parts[1].isdigit():
+            return int(parts[1])
+    return None
+
+
+def migrate_missing_receipts():
+    with app.app_context():
+        folder = app.config["UPLOAD_FOLDER"]
+        files = os.listdir(folder)
+        added = 0
+        skipped = 0
+
+        for file in files:
+            if not file.endswith(".webp"):
+                continue
+
+            list_id = extract_list_id(file)
+            if list_id is None:
+                print(f"Pominięto (brak list_id): {file}")
+                continue
+
+            exists = Receipt.query.filter_by(list_id=list_id, filename=file).first()
+            if exists:
+                skipped += 1
+                continue
+
+            new_receipt = Receipt(
+                list_id=list_id, filename=file, uploaded_at=datetime.utcnow()
+            )
+            db.session.add(new_receipt)
+            added += 1
+            print(f"📄 {file} dodany do Receipt (list_id={list_id})")
+
+        db.session.commit()
+        print(f"\n✅ Dodano: {added}, pominięto (już były): {skipped}")
+
+
+if __name__ == "__main__":
+    migrate_missing_receipts()

_tools/db/migrate.txt

@@ -0,0 +1,38 @@
+python3 -m venv venv_migrate
+source venv_migrate/bin/activate  
+pip install sqlalchemy psycopg2-binary dotenv 
+docker compose --profile pgsql up -d --build
+PYTHONPATH=. python3 _tools/db/migrate_sqlite_to_pgsql.py 
+rm -rf venv_migrate
+
+# reset wszystkich sekwencji w pgsql
+docker exec -it pgsql-db psql -U lista -d lista
+
+
+DO $$
+DECLARE
+    r RECORD;
+BEGIN
+    FOR r IN
+        SELECT 
+            c.relname AS seq_name,
+            t.relname AS table_name,
+            a.attname AS column_name
+        FROM 
+            pg_class c
+        JOIN 
+            pg_depend d ON d.objid = c.oid
+        JOIN 
+            pg_class t ON d.refobjid = t.oid
+        JOIN 
+            pg_attribute a ON a.attrelid = t.oid AND a.attnum = d.refobjsubid
+        WHERE 
+            c.relkind = 'S'
+            AND d.deptype = 'a'
+    LOOP
+        EXECUTE format(
+            'SELECT setval(%L, COALESCE((SELECT MAX(%I) FROM %I), 1), true)',
+            r.seq_name, r.column_name, r.table_name
+        );
+    END LOOP;
+END$$;

_tools/db/migrate_sqlite_to_pgsql.py

@@ -0,0 +1,61 @@
+import sys
+import os
+sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), "../../")))
+
+from sqlalchemy import create_engine, MetaData
+from sqlalchemy.orm import sessionmaker
+from config import Config
+from dotenv import load_dotenv
+load_dotenv()
+
+# Źródło: SQLite
+sqlite_engine = create_engine("sqlite:///instance/shopping.db")
+sqlite_meta = MetaData()
+sqlite_meta.reflect(bind=sqlite_engine)
+
+# Cel: PostgreSQL
+pg_engine = create_engine(Config.SQLALCHEMY_DATABASE_URI)
+pg_meta = MetaData()
+pg_meta.reflect(bind=pg_engine)
+
+# Sesje
+SQLiteSession = sessionmaker(bind=sqlite_engine)
+PGSession = sessionmaker(bind=pg_engine)
+
+sqlite_session = SQLiteSession()
+pg_session = PGSession()
+
+def migrate_table(table_name):
+    print("➡️  Używana baza docelowa:", Config.SQLALCHEMY_DATABASE_URI)
+    print(f"\n➡️  Migruję tabelę: {table_name}")
+    source_table = sqlite_meta.tables.get(table_name)
+    target_table = pg_meta.tables.get(table_name)
+
+    if source_table is None or target_table is None:
+        print(f"⚠️  Pominięto: {table_name} (brak w jednej z baz)")
+        return
+
+    rows = sqlite_session.execute(source_table.select()).fetchall()
+    if not rows:
+        print("ℹ️  Brak danych do migracji.")
+        return
+
+    insert_data = [dict(row._mapping) for row in rows]
+
+    try:
+        with pg_engine.begin() as conn:
+            conn.execute(target_table.delete())
+            conn.execute(target_table.insert(), insert_data)
+        print(f"✅ Przeniesiono: {len(rows)} rekordów")
+    except Exception as e:
+        print(f"❌ Błąd przy migracji {table_name}: {e}")
+
+
+def main():
+    tables = ["user", "shopping_list", "item", "expense", "receipt", "suggested_product"]
+    for table in tables:
+        migrate_table(table)
+    print("\n🎉 Migracja zakończona pomyślnie.")
+
+if __name__ == "__main__":
+    main()

_tools/migrate_to_webp.py

@@ -0,0 +1,83 @@
+import os
+from datetime import datetime
+from PIL import Image
+from app import db, app, Receipt
+
+ALLOWED_EXTS = ("jpg", "jpeg", "png", "gif", "heic")
+UPLOAD_FOLDER = None
+
+
+def convert_to_webp(input_path, output_path):
+    try:
+        image = Image.open(input_path).convert("RGB")
+        image.save(output_path, "WEBP", quality=85)
+        return True
+    except Exception as e:
+        print(f"Błąd konwersji {input_path}: {e}")
+        return False
+
+
+def extract_list_id(filename):
+    if filename.startswith("list_"):
+        parts = filename.split("_", 2)
+        if len(parts) >= 2 and parts[1].isdigit():
+            return int(parts[1])
+    return None
+
+
+def migrate():
+    global UPLOAD_FOLDER
+    with app.app_context():
+        UPLOAD_FOLDER = app.config["UPLOAD_FOLDER"]
+        files = os.listdir(UPLOAD_FOLDER)
+        created = 0
+        skipped = 0
+        existing = 0
+
+        for file in files:
+            ext = file.rsplit(".", 1)[-1].lower()
+            if ext not in ALLOWED_EXTS:
+                continue
+
+            list_id = extract_list_id(file)
+            if list_id is None:
+                print(f"Pominięto (brak list_id): {file}")
+                continue
+
+            src_path = os.path.join(UPLOAD_FOLDER, file)
+            base = os.path.splitext(file)[0]
+            webp_filename = base + ".webp"
+            dst_path = os.path.join(UPLOAD_FOLDER, webp_filename)
+
+            if os.path.exists(dst_path):
+                print(f"Pominięto (webp istnieje): {webp_filename}")
+                skipped += 1
+                continue
+
+            if convert_to_webp(src_path, dst_path):
+                os.remove(src_path)
+                r = Receipt.query.filter_by(
+                    list_id=list_id, filename=webp_filename
+                ).first()
+                if r:
+                    print(f"Już istnieje w Receipt: {webp_filename}")
+                    existing += 1
+                    continue
+
+                new_receipt = Receipt(
+                    list_id=list_id,
+                    filename=webp_filename,
+                    uploaded_at=datetime.utcnow(),
+                )
+                db.session.add(new_receipt)
+                created += 1
+                print(f"{file} → {webp_filename} + zapis do Receipt")
+
+        db.session.commit()
+        print(f"\nNowe wpisy: {created}")
+        print(f"Pominięte (webp istniało): {skipped}")
+        print(f"Duplikaty w bazie: {existing}")
+
+
+if __name__ == "__main__":
+    migrate()

_tools/update_missing_image_data.py

@@ -0,0 +1,44 @@
+import os
+from datetime import datetime
+from app import app, db, Receipt
+
+
+def update_missing_receipt_fields():
+    with app.app_context():
+        folder = app.config["UPLOAD_FOLDER"]
+        updated = 0
+
+        receipts = Receipt.query.filter(
+            (Receipt.filesize == None)
+            | (Receipt.filesize == 0)
+            | (Receipt.uploaded_at == None)
+        ).all()
+
+        for r in receipts:
+            path = os.path.join(folder, r.filename)
+            if not os.path.exists(path):
+                print(f"Brak pliku: {r.filename}")
+                continue
+
+            changed = False
+
+            if not r.filesize:
+                r.filesize = os.path.getsize(path)
+                changed = True
+                print(f"{r.filename} → filesize: {r.filesize} B")
+
+            if not r.uploaded_at:
+                timestamp = os.path.getmtime(path)
+                r.uploaded_at = datetime.fromtimestamp(timestamp)
+                changed = True
+                print(f"{r.filename} → uploaded_at: {r.uploaded_at}")
+
+            if changed:
+                updated += 1
+
+        db.session.commit()
+        print(f"\nZaktualizowano {updated} rekordów.")
+
+
+if __name__ == "__main__":
+    update_missing_receipt_fields()

_tools/wait_for_db.py

@@ -0,0 +1,23 @@
+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:
+    try:
+        with socket.create_connection((host, port), timeout=5):
+            print("Baza danych jest dostępna.")
+            break
+    except OSError:
+        print("Baza jeszcze nie odpowiada, czekam...")
+        time.sleep(2)

add_products.py

@@ -1,87 +0,0 @@
-import urllib.request
-import json
-from app import db, SuggestedProduct, app
-
-CATEGORIES = {
-    "Przyprawa": [
-        "przyprawa", "pieprz", "sól", "bazylia", "oregano", "papryka", "majeranek", "czosnek",
-        "tymianek", "rozmaryn", "kolendra", "curry", "imbir", "goździki", "chili", "koper",
-        "kminek", "liść laurowy", "ziele angielskie", "kurkuma", "musztarda", "chrzan"
-    ],
-    "Mięso": [
-        "kurczak", "piersi z kurczaka", "udka z kurczaka", "wołowina", "mielona wołowina",
-        "wieprzowina", "schab", "łopatka", "szynka", "boczek", "indyk", "filet z indyka", 
-        "gulasz", "pasztet", "karkówka", "żeberka", "kiełbasa", "parówki", "salami", "kabanos"
-    ],
-    "Ryba i owoce morza": [
-        "łosoś", "dorsz", "mintaj", "makrela", "pstrąg", "karp", "śledź", "tuńczyk",
-        "morszczuk", "sardynka", "szproty", "anchois", "tilapia", "sandacz", "halibut",
-        "sum", "flądra", "ostrobok", "paluszki rybne", "konserwa rybna"
-    ],
-    "Nabiał": [
-        "mleko", "jogurt", "ser żółty", "ser biały", "twaróg", "śmietana", "masło",
-        "kefir", "maślanka", "serek wiejski", "serek topiony", "mozzarella", "feta",
-        "parmezan", "gouda", "emmental", "ser pleśniowy", "ser homogenizowany",
-        "serek mascarpone", "ser ricotta"
-    ],
-    "Warzywo": [
-        "pomidor", "ogórek", "marchew", "cebula", "sałata", "papryka", "ziemniak",
-        "kapusta", "brokuł", "kalafior", "cukinia", "bakłażan", "szpinak", "rukola",
-        "seler", "por", "burak", "dynia", "rzodkiewka", "fasola"
-    ],
-    "Owoc": [
-        "jabłko", "banan", "gruszka", "truskawka", "winogrono", "malina", "borówka",
-        "czereśnia", "wiśnia", "brzoskwinia", "nektaryna", "śliwka", "ananas",
-        "mango", "kiwi", "cytryna", "limonka", "pomarańcza", "mandarynka", "grejpfrut"
-    ],
-    "Pieczywo i zboża": [
-        "chleb", "bułka", "bagietka", "kajzerka", "pumpernikiel", "chleb razowy",
-        "chleb żytni", "tost", "grahamka", "croissant", "tortilla", "pizza",
-        "pierogi", "ryż", "makaron", "kasza jaglana", "kasza gryczana", "owsianka",
-        "płatki kukurydziane", "musli"
-    ],
-    "Słodycze i przekąski": [
-        "czekolada", "baton", "ciastko", "wafel", "lody", "cukierek", "żelki",
-        "herbatnik", "paluszki", "chipsy", "orzeszki", "popcorn", "krakersy",
-        "ciasto", "muffin", "pączek", "drożdżówka", "babeczka", "piernik", "beza"
-    ],
-    "Napoje": [
-        "woda", "sok jabłkowy", "sok pomarańczowy", "sok multiwitamina", "cola",
-        "pepsi", "napój gazowany", "kawa", "herbata", "piwo", "wino czerwone",
-        "wino białe", "tonik", "lemoniada", "napój izotoniczny", "kompot",
-        "napój mleczny", "maślanka pitna", "koktajl owocowy", "nektar"
-    ],
-    "Tłuszcze i oleje": [
-        "oliwa", "olej rzepakowy", "olej słonecznikowy", "masło klarowane",
-        "margaryna", "smalec", "masło orzechowe", "tłuszcz kokosowy",
-        "olej lniany", "olej z pestek winogron", "olej sezamowy",
-        "olej ryżowy", "olej z awokado", "olej kukurydziany", "olej arachidowy",
-        "olej palmowy", "olej konopny", "olej sojowy", "olej dyniowy", "olej z orzechów włoskich"
-    ],
-    "Dania gotowe": [
-        "pizza", "hamburger", "hot dog", "zupa", "gulasz", "pierogi ruskie",
-        "pierogi z mięsem", "lasagne", "sałatka warzywna", "kanapka",
-        "wrap", "tortilla", "zapiekanka", "sushi", "falafel", "kebab",
-        "pyzy", "kluski śląskie", "kotlet schabowy", "gołąbki"
-    ]
-}
-
-produkty = []
-
-for category, names in CATEGORIES.items():
-    for name in names:
-        produkty.append((category, name.lower().strip()))
-
-print(f"Przygotowano {len(produkty)} produktów do dodania.")
-
-with app.app_context():
-    dodane = 0
-    for category, name in produkty:
-        full_name = f"{category}: {name}"
-        if not SuggestedProduct.query.filter_by(name=full_name).first():
-            prod = SuggestedProduct(name=full_name)
-            db.session.add(prod)
-            dodane += 1
-    db.session.commit()
-
-print(f"Dodano {dodane} produktów do bazy.")

alters.txt

@@ -1,33 +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;
-

config.py

@@ -1,12 +1,83 @@
 import os
 
+basedir = os.path.abspath(os.path.dirname(__file__))
+
+
 class Config:
-    SECRET_KEY = os.environ.get('SECRET_KEY', 'D8pceNZ8q%YR7^7F&9wAC2')
-    SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL', 'sqlite:///shopping.db')
+
+    SESSION_COOKIE_HTTPONLY = True
+    SESSION_COOKIE_SAMESITE = "Lax"  # działa w HTTP i HTTPS
+    
+    SECRET_KEY = os.environ.get("SECRET_KEY", "D8pceNZ8q%YR7^7F&9wAC2")
+
+    DB_ENGINE = os.environ.get("DB_ENGINE", "sqlite").lower()
+    if DB_ENGINE == "sqlite":
+        SQLALCHEMY_DATABASE_URI = (
+            f"sqlite:///{os.path.join(basedir, 'db', 'shopping.db')}"
+        )
+    elif DB_ENGINE == "pgsql":
+        SQLALCHEMY_DATABASE_URI = f"postgresql://{os.environ['DB_USER']}:{os.environ['DB_PASSWORD']}@{os.environ['DB_HOST']}:{os.environ.get('DB_PORT', 5432)}/{os.environ['DB_NAME']}"
+    elif DB_ENGINE == "mysql":
+        SQLALCHEMY_DATABASE_URI = f"mysql+pymysql://{os.environ['DB_USER']}:{os.environ['DB_PASSWORD']}@{os.environ['DB_HOST']}:{os.environ.get('DB_PORT', 3306)}/{os.environ['DB_NAME']}"
+    else:
+        raise ValueError("Nieobsługiwany typ bazy danych.")
+
     SQLALCHEMY_TRACK_MODIFICATIONS = False
-    SYSTEM_PASSWORD = os.environ.get('SYSTEM_PASSWORD', 'admin')
-    DEFAULT_ADMIN_USERNAME = os.environ.get('DEFAULT_ADMIN_USERNAME', 'admin')
-    DEFAULT_ADMIN_PASSWORD = os.environ.get('DEFAULT_ADMIN_PASSWORD', 'admin123')
-    UPLOAD_FOLDER = os.environ.get('UPLOAD_FOLDER', 'uploads')
-    AUTHORIZED_COOKIE_VALUE = os.environ.get('AUTHORIZED_COOKIE_VALUE', 'cookievalue')
-    AUTH_COOKIE_MAX_AGE = int(os.environ.get('AUTH_COOKIE_MAX_AGE', 86400))
+    SYSTEM_PASSWORD = os.environ.get("SYSTEM_PASSWORD", "admin")
+    DEFAULT_ADMIN_USERNAME = os.environ.get("DEFAULT_ADMIN_USERNAME", "admin")
+    DEFAULT_ADMIN_PASSWORD = os.environ.get("DEFAULT_ADMIN_PASSWORD", "admin123")
+    UPLOAD_FOLDER = os.environ.get("UPLOAD_FOLDER", "uploads")
+    AUTHORIZED_COOKIE_VALUE = os.environ.get("AUTHORIZED_COOKIE_VALUE", "cookievalue")
+    BCRYPT_PEPPER = os.environ.get("BCRYPT_PEPPER", "sekretnyKluczBcrypt")
+    SESSION_COOKIE_SECURE = os.environ.get("SESSION_COOKIE_SECURE", "0") == "1"
+    HEALTHCHECK_TOKEN = os.environ.get("HEALTHCHECK_TOKEN", "alamapsaikota1234")
+
+    try:
+        AUTH_COOKIE_MAX_AGE = int(
+            os.environ.get("AUTH_COOKIE_MAX_AGE", "86400") or "86400"
+        )
+    except ValueError:
+        AUTH_COOKIE_MAX_AGE = 86400
+
+    try:
+        SESSION_TIMEOUT_MINUTES = int(
+            os.environ.get("SESSION_TIMEOUT_MINUTES", "10080") or "10080"
+        )
+    except ValueError:
+        SESSION_TIMEOUT_MINUTES = 10080
+
+    ENABLE_HSTS = os.environ.get("ENABLE_HSTS", "0") == "1"
+    ENABLE_XFO = os.environ.get("ENABLE_XFO", "0") == "1"
+    ENABLE_XCTO = os.environ.get("ENABLE_XCTO", "0") == "1"
+    ENABLE_CSP = os.environ.get("ENABLE_CSP", "0") == "1"
+    ENABLE_PP = os.environ.get("ENABLE_PP", "0") == "1"
+    REFERRER_POLICY = os.environ.get("REFERRER_POLICY") or None
+
+    DEBUG_MODE = os.environ.get("DEBUG_MODE", "1") == "1"
+    DISABLE_ROBOTS = os.environ.get("DISABLE_ROBOTS", "0") == "1"
+
+    JS_CACHE_CONTROL = os.environ.get(
+        "JS_CACHE_CONTROL", "no-cache"
+    )
+    CSS_CACHE_CONTROL = os.environ.get(
+        "CSS_CACHE_CONTROL", "no-cache"
+    )
+    LIB_JS_CACHE_CONTROL = os.environ.get(
+        "LIB_JS_CACHE_CONTROL", "max-age=604800"
+    )
+    LIB_CSS_CACHE_CONTROL = os.environ.get(
+        "LIB_CSS_CACHE_CONTROL", "max-age=604800"
+    )
+    UPLOADS_CACHE_CONTROL = os.environ.get(
+        "UPLOADS_CACHE_CONTROL", "public, max-age=2592000, immutable"
+    )
+
+    DEFAULT_CATEGORIES = [
+        c.strip() for c in os.environ.get(
+            "DEFAULT_CATEGORIES",
+            "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,Różne,Chiny,Dom"
+        ).split(",") if c.strip()
+    ]

deploy_docker.sh

@@ -1,13 +1,28 @@
 #!/bin/bash
 set -e
 
-echo "Zatrzymuję i usuwam stare kontenery..."
-docker compose down --rmi all
+PROFILE=$1
+
+if [[ -z "$PROFILE" ]]; then
+  echo "Uzycie: $0 {pgsql|mysql|sqlite}"
+  exit 1
+fi
+
+echo "Zatrzymuje kontenery aplikacji i bazy..."
+if [[ "$PROFILE" == "sqlite" ]]; then
+  docker compose stop
+else
+  docker compose --profile "$PROFILE" stop
+fi
 
 echo "Pobieram najnowszy kod z repozytorium..."
 git pull
 
-echo "Buduję obrazy i uruchamiam kontenery..."
-docker compose up -d --build
+echo "Buduje 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!"

docker-compose.yml

@@ -4,15 +4,41 @@ services:
     container_name: live-lista-zakupow
     ports:
       - "${APP_PORT:-8000}:8000"
-    environment:
-      - FLASK_APP=app.py
-      - FLASK_ENV=production
-      - SECRET_KEY=${SECRET_KEY}
-      - SYSTEM_PASSWORD=${SYSTEM_PASSWORD}
-      - DEFAULT_ADMIN_USERNAME=${DEFAULT_ADMIN_USERNAME}
-      - DEFAULT_ADMIN_PASSWORD=${DEFAULT_ADMIN_PASSWORD}
-      - UPLOAD_FOLDER=${UPLOAD_FOLDER}
-      - AUTHORIZED_COOKIE_VALUE=${AUTHORIZED_COOKIE_VALUE}
-      - AUTH_COOKIE_MAX_AGE=${AUTH_COOKIE_MAX_AGE}
+    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)"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
+    env_file:
+      - .env
     volumes:
       - .:/app
+      - ./uploads:/app/uploads
+      - ./instance:/app/instance
+    restart: unless-stopped
+
+  pgsql:
+    image: postgres:17
+    container_name: pgsql-db
+    environment:
+      POSTGRES_DB: ${DB_NAME}
+      POSTGRES_USER: ${DB_USER}
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+    volumes:
+      - ./db/pgsql:/var/lib/postgresql/data
+    restart: unless-stopped
+    profiles: ["pgsql"]
+
+  mysql:
+    image: mysql:8
+    container_name: mysql-db
+    environment:
+      MYSQL_DATABASE: ${DB_NAME}
+      MYSQL_USER: ${DB_USER}
+      MYSQL_PASSWORD: ${DB_PASSWORD}
+      MYSQL_ROOT_PASSWORD: 89o38kUX5T4C
+    volumes:
+      - ./db/mysql:/var/lib/mysql
+    restart: unless-stopped
+    profiles: ["mysql"]

entrypoint.sh

@@ -1,3 +1,10 @@
 #!/bin/sh
-flask db upgrade 2>/dev/null || flask create_db
+
+# Czekaj na bazę w Pythonie
+python _tools/wait_for_db.py
+
+# Jak baza gotowa, to migruj li daj informacje
+flask db upgrade 2>/dev/null || flask db_info
+
+# Start aplikacji
 exec python app.py

requirements.txt

@@ -6,4 +6,15 @@ Flask-Compress
 eventlet
 Werkzeug
 Pillow
-psutil
+psutil
+pillow-heif
+
+pytesseract
+opencv-python-headless
+psycopg2-binary # pgsql
+pymysql         # mysql
+cryptography    # mysql8
+flask-talisman  # nagłówki
+bcrypt
+Flask-Session
+pdf2image

static/css/style.css

@@ -3,6 +3,7 @@
   width: 1.5em;
   height: 1.5em;
 }
+
 .clickable-item {
   cursor: pointer;
 }
@@ -25,20 +26,29 @@
 }
 
 .progress-bar {
-  border-radius: 20px !important;
-  transition: width 0.4s ease;
-  flex-direction: column;
-  justify-content: center;
-  white-space: nowrap;
+  border-radius: 0 !important;
+  transition: width 0.4s ease, background-color 0.4s ease;
 }
 
+.progress-bar:first-child {
+  border-top-left-radius: 20px !important;
+  border-bottom-left-radius: 20px !important;
+}
+
+.progress-bar:last-child {
+  border-top-right-radius: 20px !important;
+  border-bottom-right-radius: 20px !important;
+}
+
+
 /* rodzic już ma position-relative */
 .progress-label {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  pointer-events: none;   /* klikalne przyciski obok paska nie ucierpią */
+  pointer-events: none;
+  /* klikalne przyciski obok paska nie ucierpią */
   white-space: nowrap;
 }
 
@@ -53,7 +63,7 @@
 
 /* --- Styl przycisku wyboru pliku --- */
 input[type="file"]::file-selector-button {
-  background-color: #225d36; 
+  background-color: #225d36;
   color: #fff;
   border: none;
   padding: 0.5em 1em;
@@ -69,16 +79,19 @@ input[type="file"]::file-selector-button {
   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;
@@ -86,35 +99,50 @@ input[type="file"]::file-selector-button {
 }
 
 /* Badge - kolory pasujące do ciemnych alertów */
-.badge.bg-success, .badge.text-bg-success {
+.badge.bg-success,
+.badge.text-bg-success {
   background-color: #225d36 !important;
   color: #eaffea !important;
 }
-.badge.bg-danger, .badge.text-bg-danger {
+
+.badge.bg-danger,
+.badge.text-bg-danger {
   background-color: #7a1f23 !important;
   color: #ffeaea !important;
 }
-.badge.bg-info, .badge.text-bg-info {
+
+.badge.bg-info,
+.badge.text-bg-info {
   background-color: #1d3a4d !important;
   color: #eaf6ff !important;
 }
-.badge.bg-warning, .badge.text-bg-warning {
+
+.badge.bg-warning,
+.badge.text-bg-warning {
   background-color: #665c1e !important;
   color: #fffbe5 !important;
 }
-.badge.bg-secondary, .badge.text-bg-secondary {
+
+.badge.bg-secondary,
+.badge.text-bg-secondary {
   background-color: #343a40 !important;
   color: #e2e3e5 !important;
 }
-.badge.bg-primary, .badge.text-bg-primary {
+
+.badge.bg-primary,
+.badge.text-bg-primary {
   background-color: #184076 !important;
   color: #e6f0ff !important;
 }
-.badge.bg-light, .badge.text-bg-light {
+
+.badge.bg-light,
+.badge.text-bg-light {
   background-color: #444950 !important;
   color: #f8f9fa !important;
 }
-.badge.bg-dark, .badge.text-bg-dark {
+
+.badge.bg-dark,
+.badge.text-bg-dark {
   background-color: #181a1b !important;
   color: #f8f9fa !important;
 }
@@ -157,6 +185,7 @@ input[type="checkbox"].large-checkbox:disabled::before {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
 input[type="checkbox"].large-checkbox:disabled {
   cursor: not-allowed;
 }
@@ -172,25 +201,24 @@ input.form-control {
 }
 
 .info-bar-fixed {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
   width: 100%;
   color: #f8f9fa;
+  background-color: #212529;
   border-radius: 12px 12px 0 0;
   text-align: center;
-  padding: 10px 8px;
+  padding: 10px 10px;
   font-size: 0.95rem;
-  z-index: 9999;
   box-sizing: border-box;
+  margin-top: 2rem;
+  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.25);
 }
 
-@media (max-width: 600px) {
+@media (max-width: 768px) {
   .info-bar-fixed {
+    position: static;
     font-size: 0.85rem;
     padding: 8px 4px;
-    border-radius: 10px 10px 0 0;
+    border-radius: 0;
   }
 }
 
@@ -222,6 +250,7 @@ input.form-control {
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -231,11 +260,13 @@ input.form-control {
 #mass-add-list li.active {
   background: #198754 !important;
   color: #fff !important;
-  border: 1px solid #000000 !important; 
+  border: 1px solid #000000 !important;
 }
+
 #mass-add-list li {
   transition: background 0.2s;
 }
+
 .quantity-input {
   width: 60px;
   background: #343a40;
@@ -244,6 +275,7 @@ input.form-control {
   border-radius: 4px;
   text-align: center;
 }
+
 .add-btn {
   margin-left: 10px;
 }
@@ -255,6 +287,7 @@ input.form-control {
   justify-content: flex-end;
   gap: 4px;
 }
+
 .list-group-item {
   display: flex;
   align-items: center;
@@ -264,4 +297,120 @@ input.form-control {
 #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/admin_receipt_crop.js

@@ -0,0 +1,39 @@
+(function () {
+    document.addEventListener("DOMContentLoaded", function () {
+        const cropModal = document.getElementById("adminCropModal");
+        const cropImage = document.getElementById("adminCropImage");
+        const spinner = document.getElementById("adminCropLoading");
+        const saveButton = document.getElementById("adminSaveCrop");
+
+        if (!cropModal || !cropImage || !spinner || !saveButton) return;
+
+        let cropper;
+        let currentReceiptId;
+        const currentEndpoint = "/admin/crop_receipt";
+
+        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;
+
+            document.querySelectorAll('.cropper-container').forEach(e => e.remove());
+
+            if (cropper) cropper.destroy();
+            cropImage.onload = () => {
+                cropper = cropUtils.initCropper(cropImage);
+            };
+        });
+
+        cropModal.addEventListener("hidden.bs.modal", function () {
+            cropUtils.cleanUpCropper(cropImage, cropper);
+            cropper = null;
+        });
+
+        saveButton.addEventListener("click", function () {
+            if (!cropper) return;
+            spinner.classList.remove("d-none");
+            cropUtils.handleCrop(currentEndpoint, currentReceiptId, cropper, spinner);
+        });
+    });
+})();

static/js/categories_select_admin.js

@@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll("select.tom-dark").forEach(function (el) {
+        new TomSelect(el, {
+            plugins: ['remove_button'],
+            persist: false,
+            create: false,
+            hidePlaceholder: true,
+            dropdownParent: 'body'
+        });
+    });
+});

static/js/clickable_row.js

@@ -1,31 +1,40 @@
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll('.clickable-item').forEach(item => {
-    item.addEventListener('click', function(e) {
-      if (!e.target.closest('button') && e.target.tagName.toLowerCase() !== 'input') {
-        const checkbox = this.querySelector('input[type="checkbox"]');
+  const itemsContainer = document.getElementById('items');
+  if (!itemsContainer) return;
 
-        if (checkbox.disabled) {
-          return;
-        }
+  itemsContainer.addEventListener('click', function (e) {
+    const row = e.target.closest('.clickable-item');
+    if (!row || !itemsContainer.contains(row)) return;
 
-        if (checkbox.checked) {
-          socket.emit('uncheck_item', { item_id: parseInt(this.id.replace('item-', ''), 10) });
-        } else {
-          socket.emit('check_item', { item_id: parseInt(this.id.replace('item-', ''), 10) });
-        }
+    if (e.target.closest('button') || e.target.tagName.toLowerCase() === 'input') {
+      return;
+    }
 
-        checkbox.disabled = true;
-        this.classList.add('opacity-50');
+    const checkbox = row.querySelector('input[type="checkbox"]');
+    if (!checkbox || checkbox.disabled) {
+      return;
+    }
 
-        let existingSpinner = this.querySelector('.spinner-border');
-        if (!existingSpinner) {
-          const spinner = document.createElement('span');
-          spinner.className = 'spinner-border spinner-border-sm ms-2';
-          spinner.setAttribute('role', 'status');
-          spinner.setAttribute('aria-hidden', 'true');
-          checkbox.parentElement.appendChild(spinner);
-        }
-      }
-    });
+    const itemId = parseInt(row.id.replace('item-', ''), 10);
+    if (isNaN(itemId)) return;
+
+    if (checkbox.checked) {
+      socket.emit('uncheck_item', { item_id: itemId });
+    } else {
+      socket.emit('check_item', { item_id: itemId });
+    }
+
+    checkbox.disabled = true;
+    row.classList.add('opacity-50');
+
+    // Dodaj spinner tylko jeśli nie ma
+    let existingSpinner = row.querySelector('.spinner-border');
+    if (!existingSpinner) {
+      const spinner = document.createElement('span');
+      spinner.className = 'spinner-border spinner-border-sm ms-2';
+      spinner.setAttribute('role', 'status');
+      spinner.setAttribute('aria-hidden', 'true');
+      checkbox.parentElement.appendChild(spinner);
+    }
   });
 });

static/js/confirm_delete.js

@@ -0,0 +1,20 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const input = document.getElementById('confirm-delete-input');
+    const button = document.getElementById('confirm-delete-btn');
+    let timer = null;
+
+    input.addEventListener('input', function () {
+        button.disabled = true;
+        if (timer) clearTimeout(timer);
+
+        if (input.value.trim().toLowerCase() === 'usuń') {
+            timer = setTimeout(() => {
+                button.disabled = false;
+            }, 2000);
+        }
+    });
+
+    button.addEventListener('click', function () {
+        document.getElementById('delete-form').submit();
+    });
+});

static/js/expense_chart.js

@@ -0,0 +1,170 @@
+document.addEventListener("DOMContentLoaded", function () {
+    let expensesChart = null;
+    let categorySplit = true;
+    const rangeLabel = document.getElementById("chartRangeLabel");
+
+    if (typeof window.selectedCategoryId === "undefined") {
+        window.selectedCategoryId = "";
+    }
+
+    function loadExpenses(range = "last30days", startDate = null, endDate = null) {
+        let url = '/expenses_data?range=' + range;
+        const showAllCheckbox = document.getElementById("showAllLists");
+        if (showAllCheckbox && showAllCheckbox.checked) {
+            url += '&show_all=true';
+        }
+        if (startDate && endDate) {
+            url += `&start_date=${startDate}&end_date=${endDate}`;
+        }
+        if (window.selectedCategoryId) {
+            url += `&category_id=${window.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();
+                }
+
+                const tooltipOptions = {
+                    mode: 'index',
+                    intersect: false,
+                    callbacks: {
+                        label: function (context) {
+                            if (context.parsed.y === 0) {
+                                return ''; // pomija kategorie o wartości 0
+                            }
+                            return context.dataset.label + ': ' + context.parsed.y;
+                        }
+                    }
+                };
+
+                if (categorySplit) {
+                    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 {
+                    expensesChart = new Chart(ctx, {
+                        type: 'bar',
+                        data: {
+                            labels: data.labels,
+                            datasets: [{
+                                label: 'Suma wydatków [PLN]',
+                                data: data.expenses,
+                                backgroundColor: '#0d6efd'
+                            }]
+                        },
+                        options: {
+                            responsive: true,
+                            plugins: {
+                                tooltip: tooltipOptions
+                            },
+                            scales: { y: { beginAtZero: true } }
+                        }
+                    });
+                }
+
+                if (startDate && endDate) {
+                    rangeLabel.textContent = `Widok: własny zakres (${startDate} → ${endDate})`;
+                } else {
+                    let labelText = "";
+                    if (range === "last30days") labelText = "Widok: ostatnie 30 dni";
+                    else if (range === "currentmonth") labelText = "Widok: bieżący miesiąc";
+                    else if (range === "monthly") labelText = "Widok: miesięczne";
+                    else if (range === "quarterly") labelText = "Widok: kwartalne";
+                    else if (range === "halfyearly") labelText = "Widok: półroczne";
+                    else if (range === "yearly") labelText = "Widok: roczne";
+                    rangeLabel.textContent = labelText;
+                }
+            })
+            .catch(error => console.error("Błąd pobierania danych:", error));
+    }
+
+    // Udostępnienie globalne, żeby inne skrypty mogły wywołać reload
+    window.loadExpenses = loadExpenses;
+
+    const toggleBtn = document.getElementById("toggleCategorySplit");
+    toggleBtn.addEventListener("click", function () {
+        categorySplit = !categorySplit;
+        if (categorySplit) {
+            this.textContent = "🔵 Pokaż całościowo";
+            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();
+    });
+
+    toggleBtn.textContent = "🔵 Pokaż całościowo";
+    toggleBtn.classList.remove("btn-outline-warning");
+    toggleBtn.classList.add("btn-outline-info");
+
+    const startDateInput = document.getElementById("startDate");
+    const endDateInput = document.getElementById("endDate");
+
+    const today = new Date();
+    const lastWeek = new Date(today);
+    lastWeek.setDate(today.getDate() - 7);
+    const formatDate = (d) => d.toISOString().split('T')[0];
+    startDateInput.value = formatDate(lastWeek);
+    endDateInput.value = formatDate(today);
+
+    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');
+
+            if (range === "currentmonth") {
+                const today = new Date();
+                const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
+                const formatDate = (d) => d.toISOString().split('T')[0];
+                loadExpenses('custom', formatDate(firstDay), formatDate(today));
+            } else {
+                loadExpenses(range);
+            }
+        });
+    });
+
+    // Automatyczne ładowanie danych po przełączeniu na zakładkę Wykres
+    document.getElementById('chart-tab').addEventListener('shown.bs.tab', function () {
+        loadExpenses();
+    });
+
+    // Jeśli jesteśmy od razu na zakładce Wykres
+    if (document.getElementById('chart-tab').classList.contains('active')) {
+        loadExpenses("last30days");
+    }
+});

static/js/expense_tab.js

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

static/js/expense_table.js

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

static/js/expenses.js

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

static/js/functions.js

@@ -16,20 +16,47 @@ function updateItemState(itemId, isChecked) {
     if (sp) sp.remove();
   }
   updateProgressBar();
+  applyHidePurchased();
 }
 
 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;
 
-  const progressBar = document.getElementById('progress-bar');
-  if (progressBar) {
-    progressBar.style.width = `${percent}%`;
-    progressBar.setAttribute('aria-valuenow', percent);
-    progressBar.textContent = `${percent}%`;
-  }
+  barPurchased.style.width = `${percentPurchased}%`;
+  barNotPurchased.style.width = `${percentNotPurchased}%`;
+  barRemaining.style.width = `${percentRemaining}%`;
+
+  progressLabel.textContent = `${percent}%`;
+  progressLabel.classList.toggle('text-white', percent < 51);
+  progressLabel.classList.toggle('text-dark', percent >= 51);
+
+  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) {
@@ -91,6 +118,22 @@ function submitExpense(listId) {
 }
 
 function copyLink(link) {
+  if (navigator.share) {
+    navigator.share({
+      title: 'Udostępnij link',
+      text: 'Udostępniam link do listy:',
+      url: link
+    }).then(() => {
+      showToast('Link udostępniony!');
+    }).catch((err) => {
+      tryClipboard(link);
+    });
+    return;
+  }
+  tryClipboard(link);
+}
+
+function tryClipboard(link) {
   if (navigator.clipboard && window.isSecureContext) {
     navigator.clipboard.writeText(link).then(() => {
       showToast('Link skopiowany do schowka!');
@@ -103,33 +146,6 @@ function copyLink(link) {
   }
 }
 
-/* function shareLink(link) {
-  if (navigator.share) {
-    navigator.share({
-      title: 'Udostępnij moją listę',
-      text: 'Zobacz tę listę!',
-      url: link
-    })
-    .catch((error) => {
-      console.error('Błąd podczas udostępniania', error);
-      alert('Nie udało się udostępnić linka');
-    });
-  } else {
-    copyLink(link);
-  }
-}
-
-function fallbackCopy(link) {
-  navigator.clipboard.writeText(link).then(() => {
-    alert('Link skopiowany do schowka!');
-  });
-}
- */
-
-function openList(link) {
-  window.open(link, '_blank');
-}
-
 function fallbackCopyText(text) {
   const textarea = document.createElement('textarea');
   textarea.value = text;
@@ -156,8 +172,51 @@ function fallbackCopyText(text) {
   document.body.removeChild(textarea);
 }
 
+function openList(link) {
+  window.open(link, '_blank');
+}
+
+function applyHidePurchased(isInit = false) {
+  const toggle = document.getElementById('hidePurchasedToggle');
+  if (!toggle) return;
+  const hide = toggle.checked;
+
+  const items = document.querySelectorAll('#items li');
+
+  items.forEach(li => {
+    const isCheckedItem =
+      li.classList.contains('bg-success') || // kupione
+      li.classList.contains('bg-warning');   // niekupione
+
+    if (isCheckedItem) {
+      if (hide) {
+        if (isInit) {
+          // Jeśli inicjalizacja: od razu ukryj
+          li.classList.add('hide-purchased');
+          li.classList.remove('fade-out');
+        } else {
+          // Z animacją
+          li.classList.add('fade-out');
+          setTimeout(() => {
+            li.classList.add('hide-purchased');
+          }, 700);
+        }
+      } else {
+        // Odsłanianie
+        li.classList.remove('hide-purchased');
+        setTimeout(() => {
+          li.classList.remove('fade-out');
+        }, 10);
+      }
+    } else {
+      // Element nieoznaczony — zawsze pokazany
+      li.classList.remove('hide-purchased', 'fade-out');
+    }
+  });
+}
+
 function toggleVisibility(listId) {
-  fetch('/toggle_visibility/' + listId, {method: 'POST'})
+  fetch('/toggle_visibility/' + listId, { method: 'POST' })
     .then(response => response.json())
     .then(data => {
       const shareHeader = document.getElementById('share-header');
@@ -180,6 +239,14 @@ function toggleVisibility(listId) {
     });
 }
 
+function markNotPurchasedModal(e, id) {
+  e.stopPropagation();
+  const reason = prompt("Podaj powód oznaczenia jako niekupione:");
+  if (reason !== null) {
+    socket.emit('mark_not_purchased', { item_id: id, reason: reason });
+  }
+}
+
 function showToast(message, type = 'primary') {
   const toastContainer = document.getElementById('toast-container');
   const toast = document.createElement('div');
@@ -204,6 +271,100 @@ function isListDifferent(oldItems, newItems) {
   return false;
 }
 
+function renderItem(item, isShare = window.IS_SHARE, showEditOnly = false) {
+  const li = document.createElement('li');
+  li.id = `item-${item.id}`;
+  li.dataset.name = item.name.toLowerCase();
+  li.className = `list-group-item d-flex justify-content-between align-items-center flex-wrap clickable-item ${item.purchased ? 'bg-success text-white'
+    : item.not_purchased ? 'bg-warning text-dark'
+      : 'item-not-checked'
+    }`;
+
+  const isOwner = window.IS_OWNER === true || window.IS_OWNER === 'true';
+  const allowEdit = !isShare || showEditOnly || isOwner;
+
+  let quantityBadge = '';
+  if (item.quantity && item.quantity > 1) {
+    quantityBadge = `<span class="badge bg-secondary">x${item.quantity}</span>`;
+  }
+
+  let checkboxOrIcon = item.not_purchased
+    ? `<span class="ms-1 block-icon">🚫</span>`
+    : `<input id="checkbox-${item.id}" class="large-checkbox" type="checkbox" ${item.purchased ? 'checked' : ''}>`;
+
+  let noteHTML = item.note
+    ? `<small class="text-danger ms-4">[ <b>${item.note}</b> ]</small>` : '';
+
+  let reasonHTML = item.not_purchased_reason
+    ? `<small class="text-dark ms-4">[ <b>Powód: ${item.not_purchased_reason}</b> ]</small>` : '';
+
+  let dragHandle = window.isSorting ? `<span class="drag-handle me-2 text-danger" style="cursor: grab;">☰</span>` : '';
+
+  let left = `
+    <div class="d-flex align-items-center gap-2 flex-grow-1">
+      ${dragHandle}
+      ${checkboxOrIcon}
+      <span id="name-${item.id}" class="text-white">${item.name} ${quantityBadge}</span>
+      ${noteHTML}
+      ${reasonHTML}
+    </div>`;
+
+  let rightButtons = '';
+
+  // ✏️ i 🗑️ — tylko jeśli nie jesteśmy w trybie /share lub jesteśmy w 15s (tymczasowo) lub jesteśmy właścicielem
+  if (allowEdit) {
+    rightButtons += `
+      <button type="button" class="btn btn-outline-light"
+        onclick="editItem(${item.id}, '${item.name.replace(/'/g, "\\'")}', ${item.quantity || 1})">
+        ✏️
+      </button>
+      <button type="button" class="btn btn-outline-light"
+        onclick="deleteItem(${item.id})">
+        🗑️
+      </button>`;
+  }
+
+  // ✅ Jeśli element jest oznaczony jako niekupiony — pokaż "Przywróć"
+  if (item.not_purchased) {
+    rightButtons += `
+      <button type="button" class="btn btn-outline-light me-auto"
+        onclick="unmarkNotPurchased(${item.id})">
+        ✅ Przywróć
+      </button>`;
+  }
+
+  // ⚠️ tylko jeśli NIE jest oznaczony jako niekupiony i nie jesteśmy w 15s
+  if (!item.not_purchased && (isOwner || (isShare && !showEditOnly))) {
+
+    rightButtons += `
+      <button type="button" class="btn btn-outline-light"
+        onclick="markNotPurchasedModal(event, ${item.id})">
+        ⚠️
+      </button>`;
+  }
+
+  // 📝 tylko jeśli jesteśmy w /share i nie jesteśmy w 15s
+  if (isShare && !showEditOnly && !isOwner) {
+
+    rightButtons += `
+      <button type="button" class="btn btn-outline-light"
+        onclick="openNoteModal(event, ${item.id})">
+        📝
+      </button>`;
+  }
+
+  li.innerHTML = `${left}<div class="btn-group btn-group-sm" role="group">${rightButtons}</div>`;
+
+  if (item.added_by && item.owner_id && item.added_by_id && item.added_by_id !== item.owner_id) {
+    const infoEl = document.createElement('small');
+    infoEl.className = 'text-info ms-4';
+    infoEl.innerHTML = `[Dodał/a: <b>${item.added_by}</b>]`;
+    li.querySelector('.d-flex.align-items-center')?.appendChild(infoEl);
+  }
+
+  return li;
+}
+
 function updateListSmoothly(newItems) {
   const itemsContainer = document.getElementById('items');
   const existingItemsMap = new Map();
@@ -216,64 +377,7 @@ function updateListSmoothly(newItems) {
   const fragment = document.createDocumentFragment();
 
   newItems.forEach(item => {
-    let li = existingItemsMap.get(item.id);
-    let quantityBadge = '';
-    if (item.quantity && item.quantity > 1) {
-      quantityBadge = `<span class="badge bg-secondary">x${item.quantity}</span>`;
-    }
-
-    if (li) {
-      const checkbox = li.querySelector('input[type="checkbox"]');
-      if (checkbox) {
-        checkbox.checked = item.purchased;
-        checkbox.disabled = false;
-      }
-
-      li.classList.remove('bg-success', 'text-white', 'item-not-checked', 'opacity-50');
-      if (item.purchased) {
-        li.classList.add('bg-success', 'text-white');
-      } else {
-        li.classList.add('item-not-checked');
-      }
-
-      const nameSpan = li.querySelector(`#name-${item.id}`);
-      const expectedName = `${item.name} ${quantityBadge}`.trim();
-      if (nameSpan && nameSpan.innerHTML.trim() !== expectedName) {
-        nameSpan.innerHTML = expectedName;
-      }
-
-      let noteEl = li.querySelector('small');
-      if (item.note) {
-        if (!noteEl) {
-          const newNote = document.createElement('small');
-          newNote.className = 'text-danger ms-4';
-          newNote.innerHTML = `[ <b>${item.note}</b> ]`;
-          nameSpan.insertAdjacentElement('afterend', newNote);
-        } else {
-          noteEl.innerHTML = `[ <b>${item.note}</b> ]`;
-        }
-      } else if (noteEl) {
-        noteEl.remove();
-      }
-
-      const sp = li.querySelector('.spinner-border');
-      if (sp) sp.remove();
-
-    } else {
-      li = document.createElement('li');
-      li.className = `list-group-item d-flex justify-content-between align-items-center flex-wrap ${item.purchased ? 'bg-success text-white' : 'item-not-checked'}`;
-      li.id = `item-${item.id}`;
-
-      li.innerHTML = `
-        <div class="d-flex align-items-center gap-3 flex-grow-1">
-          <input class="large-checkbox" type="checkbox" ${item.purchased ? 'checked' : ''}>
-          <span id="name-${item.id}" class="text-white">${item.name} ${quantityBadge}</span>
-          ${item.note ? `<small class="text-danger ms-4">[ <b>${item.note}</b> ]</small>` : ''}
-        </div>
-        <button type="button" class="btn btn-sm btn-outline-info" onclick="openNoteModal(event, ${item.id})">📝</button>
-      `;
-    }
-
+    const li = renderItem(item);
     fragment.appendChild(li);
   });
 
@@ -282,9 +386,11 @@ function updateListSmoothly(newItems) {
 
   updateProgressBar();
   toggleEmptyPlaceholder();
+  applyHidePurchased();
 }
 
-document.addEventListener("DOMContentLoaded", function() {
+
+document.addEventListener("DOMContentLoaded", function () {
   const receiptSection = document.getElementById("receiptSection");
   const toggleBtn = document.querySelector('[data-bs-target="#receiptSection"]');
 
@@ -302,3 +408,16 @@ document.addEventListener("DOMContentLoaded", function() {
     localStorage.setItem("receiptSectionOpen", "false");
   });
 });
+
+document.addEventListener("DOMContentLoaded", function () {
+  const toggle = document.getElementById('hidePurchasedToggle');
+  if (!toggle) return;
+
+  const savedState = localStorage.getItem('hidePurchasedToggle');
+  toggle.checked = savedState === 'true';
+  applyHidePurchased(true);
+  toggle.addEventListener('change', function () {
+    localStorage.setItem('hidePurchasedToggle', toggle.checked ? 'true' : 'false');
+    applyHidePurchased();
+  });
+});

static/js/live.js

@@ -7,11 +7,11 @@ function toggleEmptyPlaceholder() {
 
   // prawdziwe <li> to te z data‑name lub id="item‑…"
   const hasRealItems = list.querySelector('li[data-name], li[id^="item-"]') !== null;
-  const placeholder  = document.getElementById('empty-placeholder');
+  const placeholder = document.getElementById('empty-placeholder');
 
   if (!hasRealItems && !placeholder) {
-    const li   = document.createElement('li');
-    li.id        = 'empty-placeholder';
+    const li = document.createElement('li');
+    li.id = 'empty-placeholder';
     li.className = 'list-group-item bg-dark text-secondary text-center w-100';
     li.textContent = 'Brak produktów w tej liście.';
     list.appendChild(li);
@@ -124,38 +124,63 @@ function setupList(listId, username) {
       summaryEl.innerHTML = `<b>💸 Łącznie wydano:</b> ${data.total.toFixed(2)} PLN`;
     }
 
-    showToast(`Dodano wydatek: ${data.amount.toFixed(2)} PLN`);
+    showToast(`Dodano wydatek: ${data.amount.toFixed(2)} PLN`, 'info');
   });
 
+
   socket.on('item_added', data => {
-    showToast(`${data.added_by} dodał: ${data.name}`);
-    const li = document.createElement('li');
-    li.className = 'list-group-item d-flex justify-content-between align-items-center flex-wrap item-not-checked';
-    li.id = `item-${data.id}`;
-    
-    let quantityBadge = '';
-    if (data.quantity && data.quantity > 1) {
-      quantityBadge = `<span class="badge bg-secondary">x${data.quantity}</span>`;
-    }
+    showToast(`${data.added_by} dodał: ${data.name}`, 'info');
 
-    li.innerHTML = `
-      <div class="d-flex align-items-center flex-wrap gap-2">
-        <input class="large-checkbox" type="checkbox">
-        <span id="name-${data.id}" class="text-white">${data.name} ${quantityBadge}</span>
-      </div>
-      <div class="mt-2 mt-md-0">
-        <button class="btn btn-sm btn-outline-warning me-1" onclick="editItem(${data.id}, '${data.name}', ${data.quantity || 1})">✏️</button>
-        <button class="btn btn-sm btn-outline-danger" onclick="deleteItem(${data.id})">🗑️</button>
-      </div>
-    `;
-
-//        #### WERSJA Z NAPISAMI ####
-//        <button class="btn btn-sm btn-outline-warning me-1" onclick="editItem(${data.id}, '${data.name}', ${data.quantity || 1})">✏️ Edytuj</button>
-//        <button class="btn btn-sm btn-outline-danger" onclick="deleteItem(${data.id})">🗑️ Usuń</button>
+    const item = {
+      ...data,
+      purchased: false,
+      not_purchased: false,
+      not_purchased_reason: '',
+      note: ''
+    };
 
+    const li = renderItem(item, false, true);  // ← tryb 15s
     document.getElementById('items').appendChild(li);
-    updateProgressBar();
     toggleEmptyPlaceholder();
+    updateProgressBar();
+
+    if (window.IS_SHARE) {
+      const countdownId = `countdown-${data.id}`;
+      const countdownBtn = document.createElement('button');
+      countdownBtn.type = 'button';
+      countdownBtn.className = 'btn btn-outline-warning';
+      countdownBtn.id = countdownId;
+      countdownBtn.disabled = true;
+      countdownBtn.textContent = '15s';
+
+      const btnGroup = li.querySelector('.btn-group');
+      if (btnGroup) {
+        btnGroup.prepend(countdownBtn);
+      }
+
+      let seconds = 15;
+      const intervalId = setInterval(() => {
+        const el = document.getElementById(countdownId);
+        if (el) {
+          seconds--;
+          el.textContent = `${seconds}s`;
+          if (seconds <= 0) {
+            el.remove();
+            clearInterval(intervalId);
+          }
+        } else {
+          clearInterval(intervalId);
+        }
+      }, 1000);
+
+      setTimeout(() => {
+        const existing = document.getElementById(`item-${data.id}`);
+        if (existing) {
+          const updated = renderItem(item, true);
+          existing.replaceWith(updated);
+        }
+      }, 15000);
+    }
   });
 
   socket.on('item_deleted', data => {
@@ -163,12 +188,12 @@ function setupList(listId, username) {
     if (li) {
       li.remove();
     }
-    showToast('Usunięto produkt');
+    showToast('Usunięto produkt z listy', 'success');
     updateProgressBar();
     toggleEmptyPlaceholder();
   });
 
-  socket.on('progress_updated', function(data) {
+  socket.on('progress_updated', function (data) {
     const progressBar = document.getElementById('progress-bar');
     if (progressBar) {
       progressBar.style.width = data.percent + '%';
@@ -183,46 +208,35 @@ function setupList(listId, username) {
   });
 
   socket.on('note_updated', data => {
-    const itemEl = document.getElementById(`item-${data.item_id}`);
-    if (itemEl) {
-      let noteEl = itemEl.querySelector('small');
-      if (noteEl) {
-        //noteEl.innerHTML = `[ Notatka: <b>${data.note}</b> ]`;
-        noteEl.innerHTML = `[ <b>${data.note}</b> ]`;
-      } else {
-        const newNote = document.createElement('small');
-        newNote.className = 'text-danger ms-4';
-        //newNote.innerHTML = `[ Notatka: <b>${data.note}</b> ]`;
-        newNote.innerHTML = `[ <b>${data.note}</b> ]`;
-
-        const flexColumn = itemEl.querySelector('.d-flex.flex-column');
-        if (flexColumn) {
-          flexColumn.appendChild(newNote);
-        } else {
-          itemEl.appendChild(newNote);
-        }
-      }
-    }
-    showToast('Notatka zaktualizowana!');
+    socket.emit('request_full_list', { list_id: window.LIST_ID });
+    showToast('Notatka dodana/zaktualizowana', 'success');
   });
 
   socket.on('item_edited', data => {
-    const nameSpan = document.getElementById(`name-${data.item_id}`);
-    if (nameSpan) {
-      let quantityBadge = '';
-      if (data.new_quantity && data.new_quantity > 1) {
-        quantityBadge = ` <span class="badge bg-secondary">x${data.new_quantity}</span>`;
-      }
-      nameSpan.innerHTML = `${data.new_name}${quantityBadge}`;
-    }
-    showToast(`Zaktualizowano produkt: ${data.new_name} (x${data.new_quantity})`);
-  });
+    const idx = window.currentItems.findIndex(i => i.id === data.item_id);
+    if (idx !== -1) {
+      window.currentItems[idx].name = data.new_name;
+      window.currentItems[idx].quantity = data.new_quantity;
 
-  updateProgressBar();
-  toggleEmptyPlaceholder();
+      const newItem = renderItem(window.currentItems[idx], true);
+      const oldItem = document.getElementById(`item-${data.item_id}`);
+      if (oldItem && newItem) {
+        oldItem.replaceWith(newItem);
+      }
+    }
+
+    showToast(`Zaktualizowano produkt: ${data.new_name} (x${data.new_quantity})`, 'success');
+
+    updateProgressBar();
+    toggleEmptyPlaceholder();
+  });
 
   // --- WAŻNE: zapisz dane do reconnect ---
   window.LIST_ID = listId;
   window.usernameForReconnect = username;
 
+}
+
+function unmarkNotPurchased(itemId) {
+  socket.emit('unmark_not_purchased', { item_id: itemId });
 }

static/js/mass_add.js

@@ -2,11 +2,16 @@ document.addEventListener('DOMContentLoaded', function () {
   const modal = document.getElementById('massAddModal');
   const productList = document.getElementById('mass-add-list');
 
+  // Funkcja normalizacji (usuwa diakrytyki i zamienia na lowercase)
+  function normalize(str) {
+    return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+  }
+
   modal.addEventListener('show.bs.modal', async function () {
     let addedProducts = new Set();
     document.querySelectorAll('#items li').forEach(li => {
       if (li.dataset.name) {
-        addedProducts.add(li.dataset.name.toLowerCase());
+        addedProducts.add(normalize(li.dataset.name));
       }
     });
 
@@ -20,8 +25,7 @@ document.addEventListener('DOMContentLoaded', function () {
         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(name.toLowerCase())) {
-          // Produkt już dodany — oznacz jako nieaktywny
+        if (addedProducts.has(normalize(name))) {
           const nameSpan = document.createElement('span');
           nameSpan.textContent = name;
           li.appendChild(nameSpan);
@@ -32,17 +36,14 @@ document.addEventListener('DOMContentLoaded', function () {
           badge.textContent = 'Dodano';
           li.appendChild(badge);
         } else {
-          // Nazwa produktu
           const nameSpan = document.createElement('span');
           nameSpan.textContent = name;
           nameSpan.style.flex = '1 1 auto';
           li.appendChild(nameSpan);
 
-          // Kontener na minus, pole i plus
           const qtyWrapper = document.createElement('div');
           qtyWrapper.className = 'd-flex align-items-center ms-2 quantity-controls';
 
-          // Minus
           const minusBtn = document.createElement('button');
           minusBtn.type = 'button';
           minusBtn.className = 'btn btn-outline-light btn-sm px-2';
@@ -51,18 +52,15 @@ document.addEventListener('DOMContentLoaded', function () {
             qty.value = Math.max(1, parseInt(qty.value) - 1);
           };
 
-          // Pole ilości
           const qty = document.createElement('input');
           qty.type = 'number';
           qty.min = 1;
           qty.value = 1;
-          qty.className = 'form-control text-center p-1';
-          qty.classList.add('rounded');
+          qty.className = 'form-control text-center p-1 rounded';
           qty.style.width = '50px';
           qty.style.margin = '0 2px';
           qty.title = 'Ilość';
 
-          // Plus
           const plusBtn = document.createElement('button');
           plusBtn.type = 'button';
           plusBtn.className = 'btn btn-outline-light btn-sm px-2';
@@ -75,10 +73,10 @@ document.addEventListener('DOMContentLoaded', function () {
           qtyWrapper.appendChild(qty);
           qtyWrapper.appendChild(plusBtn);
 
-          // Przycisk dodania
           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 });
@@ -97,29 +95,117 @@ document.addEventListener('DOMContentLoaded', function () {
 
   socket.on('item_added', data => {
     document.querySelectorAll('#mass-add-list li').forEach(li => {
-      const itemName = li.firstChild.textContent.trim();
+      const itemName = li.firstChild?.textContent.trim();
 
-      if (itemName === data.name && !li.classList.contains('opacity-50')) {
-        // Usuń wszystkie dzieci
-        while (li.firstChild) {
-          li.removeChild(li.firstChild);
-        }
-
-        // Ustaw nazwę
-        li.textContent = data.name;
-
-        // Dodaj klasę wyszarzenia
+      if (normalize(itemName) === normalize(data.name) && !li.classList.contains('opacity-50')) {
         li.classList.add('opacity-50');
 
-        // Dodaj badge
-        const badge = document.createElement('span');
-        badge.className = 'badge bg-success ms-auto';
-        badge.textContent = 'Dodano';
-        li.appendChild(badge);
+        // Usuń poprzednie przyciski
+        li.querySelectorAll('button').forEach(btn => btn.remove());
+        const quantityControls = li.querySelector('.quantity-controls');
+        if (quantityControls) quantityControls.remove();
 
-        // Zablokuj kliknięcia
-        li.onclick = null;
+        // Badge "Dodano"
+        const badge = document.createElement('span');
+        badge.className = 'badge bg-success';
+        badge.textContent = 'Dodano';
+
+        // Grupowanie przycisku + licznika
+        const btnGroup = document.createElement('div');
+        btnGroup.className = 'btn-group btn-group-sm me-2';
+        btnGroup.role = 'group';
+
+        const undoBtn = document.createElement('button');
+        undoBtn.className = 'btn btn-outline-warning';
+        undoBtn.innerHTML = '⟳ Cofnij';
+
+        const timerBtn = document.createElement('button');
+        timerBtn.className = 'btn btn-outline-secondary disabled';
+        let secondsLeft = 15;
+        timerBtn.textContent = `${secondsLeft}s`;
+
+        btnGroup.appendChild(undoBtn);
+        btnGroup.appendChild(timerBtn);
+
+        // Kontener na prawą stronę
+        const rightWrapper = document.createElement('div');
+        rightWrapper.className = 'd-flex align-items-center gap-2 ms-auto';
+        rightWrapper.appendChild(btnGroup);
+        rightWrapper.appendChild(badge);
+        li.appendChild(rightWrapper);
+
+        // Odliczanie
+        const intervalId = setInterval(() => {
+          secondsLeft--;
+          if (secondsLeft > 0) {
+            timerBtn.textContent = `${secondsLeft}s`;
+          } else {
+            clearInterval(intervalId);
+            btnGroup.remove();
+          }
+        }, 1000);
+
+        // Obsługa cofnięcia
+        undoBtn.onclick = () => {
+          clearInterval(intervalId);
+          btnGroup.remove();
+          badge.remove();
+          li.classList.remove('opacity-50');
+
+          // Przywróć kontrolki ilości
+          const qtyWrapper = document.createElement('div');
+          qtyWrapper.className = 'd-flex align-items-center ms-2 quantity-controls';
+
+          const minusBtn = document.createElement('button');
+          minusBtn.type = 'button';
+          minusBtn.className = 'btn btn-outline-light btn-sm px-2';
+          minusBtn.textContent = '−';
+
+          const qty = document.createElement('input');
+          qty.type = 'number';
+          qty.min = 1;
+          qty.value = 1;
+          qty.className = 'form-control text-center p-1 rounded';
+          qty.style.width = '50px';
+          qty.style.margin = '0 2px';
+          qty.title = 'Ilość';
+
+          const plusBtn = document.createElement('button');
+          plusBtn.type = 'button';
+          plusBtn.className = 'btn btn-outline-light btn-sm px-2';
+          plusBtn.textContent = '+';
+
+          minusBtn.onclick = () => {
+            qty.value = Math.max(1, parseInt(qty.value) - 1);
+          };
+          plusBtn.onclick = () => {
+            qty.value = parseInt(qty.value) + 1;
+          };
+
+          qtyWrapper.append(minusBtn, qty, plusBtn);
+          li.appendChild(qtyWrapper);
+
+          // Dodaj przycisk dodawania
+          const addBtn = document.createElement('button');
+          addBtn.className = 'btn btn-sm btn-primary ms-4';
+          addBtn.textContent = '+';
+          addBtn.onclick = () => {
+            const quantity = parseInt(qty.value) || 1;
+            socket.emit('add_item', {
+              list_id: LIST_ID,
+              name: data.name,
+              quantity: quantity
+            });
+          };
+          li.appendChild(addBtn);
+
+          // Usuń z listy
+          socket.emit('delete_item', { item_id: data.id });
+        };
       }
     });
   });
+
+
 });
+

static/js/notes.js

@@ -1,20 +1,22 @@
-let currentItemId = null;
+window.currentItemId = window.currentItemId ?? null;
 
-function openNoteModal(event, itemId) {
+window.openNoteModal = function (event, itemId) {
   event.stopPropagation();
-  currentItemId = itemId;
-  const noteEl = document.querySelector(`#item-${itemId} small`);
-  document.getElementById('noteText').value = noteEl ? noteEl.innerText : "";
+  window.currentItemId = itemId;
+  const noteEl = document.querySelector(`#item-${itemId} small.text-danger`);
+  document.getElementById('noteText').value = noteEl
+    ? noteEl.innerText.replace(/\[|\]|Powód:/g, "").trim()
+    : "";
   const modal = new bootstrap.Modal(document.getElementById('noteModal'));
   modal.show();
-}
+};
 
 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,27 +1,16 @@
-document.addEventListener("DOMContentLoaded", function() {
-  // Odśwież eventy
-  document.querySelectorAll('.sync-btn').forEach(btn => {
-    btn.replaceWith(btn.cloneNode(true));
-  });
-  document.querySelectorAll('.delete-suggestion-btn').forEach(btn => {
-    btn.replaceWith(btn.cloneNode(true));
-  });
+function bindSyncButton(button) {
+  button.addEventListener('click', function (e) {
+    e.preventDefault();
 
-  // Synchronizacja sugestii
-  document.querySelectorAll('.sync-btn').forEach(btn => {
-    btn.addEventListener('click', function(e) {
-      e.preventDefault();
+    const itemId = button.getAttribute('data-item-id');
+    button.disabled = true;
 
-      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'
-        }
-      })
+    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');
@@ -38,39 +27,65 @@ document.addEventListener("DOMContentLoaded", function() {
         showToast('Błąd synchronizacji', 'danger');
         button.disabled = false;
       });
-    });
   });
+}
 
-  // Usuwanie sugestii
-  document.querySelectorAll('.delete-suggestion-btn').forEach(btn => {
-    btn.addEventListener('click', function(e) {
-      e.preventDefault();
+function bindDeleteButton(button) {
+  button.addEventListener('click', function (e) {
+    e.preventDefault();
 
-      const suggestionId = this.getAttribute('data-suggestion-id');
-      const button = this;
-      button.disabled = true;
+    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();
 
-      fetch(`/admin/delete_suggestion/${suggestionId}`, {
-        method: 'POST',
-        headers: {
-          'X-Requested-With': 'XMLHttpRequest'
-        }
-      })
+    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 {
+        if (!data.success || !row) {
           button.disabled = false;
+          return;
+        }
+
+        const isProductRow = typeof itemId === 'string' && itemId !== '';
+        const cell = row.querySelector('td:last-child');
+        if (!cell) return;
+
+        if (isProductRow) {
+          cell.innerHTML = `<button class="btn btn-sm btn-outline-light sync-btn" data-item-id="${itemId}">🔄 Synchronizuj</button>`;
+          const syncBtn = cell.querySelector('.sync-btn');
+          if (syncBtn) bindSyncButton(syncBtn);
+        } else {
+          cell.innerHTML = '<span class="badge rounded-pill bg-warning opacity-75">Usunięto synchronizacje</span>';
         }
       })
       .catch(() => {
         showToast('Błąd usuwania sugestii', 'danger');
         button.disabled = false;
       });
-    });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+  document.querySelectorAll('.sync-btn').forEach(btn => {
+    const clone = btn.cloneNode(true);
+    btn.replaceWith(clone);
+    bindSyncButton(clone);
+  });
+
+  document.querySelectorAll('.delete-suggestion-btn').forEach(btn => {
+    const clone = btn.cloneNode(true);
+    btn.replaceWith(clone);
+    bindDeleteButton(clone);
   });
 });

static/js/receipt_analysis.js

@@ -0,0 +1,99 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const analyzeBtn = document.getElementById("analyzeBtn");
+    if (analyzeBtn) {
+        analyzeBtn.addEventListener("click", () => analyzeReceipts(LIST_ID));
+    }
+});
+
+async function analyzeReceipts(listId) {
+    const resultsDiv = document.getElementById("analysisResults");
+    resultsDiv.innerHTML = `
+    <div class="text-info d-flex align-items-center gap-2">
+      <div class="spinner-border spinner-border-sm text-info" role="status"></div>
+      <span>Trwa analiza paragonów...</span>
+    </div>`;
+
+    const start = performance.now();
+
+    try {
+        const res = await fetch(`/lists/${listId}/analyze`, { method: "POST" });
+        const data = await res.json();
+        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>`;
+
+        data.results.forEach((r, i) => {
+            const disabled = r.already_added ? "disabled" : "";
+            const inputStyle = "form-control d-inline-block bg-dark text-white border-light rounded";
+            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>`;
+
+            html += `
+            <div class="mb-2 d-flex align-items-center gap-2 flex-wrap">
+            <span class="text-light flex-grow-1">${r.filename}</span>
+            ${inputField}
+            ${button}
+            </div>`;
+        });
+
+
+        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 += `</div>`;
+        resultsDiv.innerHTML = html;
+        window._ocr_results = data.results;
+
+    } catch (err) {
+        resultsDiv.innerHTML = `<div class="text-danger">❌ Wystąpił błąd podczas analizy.</div>`;
+        console.error(err);
+    }
+}
+
+function emitExpense(i) {
+    const r = window._ocr_results[i];
+    const val = parseFloat(document.getElementById(`amount-${i}`).value);
+    const btn = document.getElementById(`add-btn-${i}`);
+
+    if (!isNaN(val) && val > 0) {
+        socket.emit('add_expense', {
+            list_id: LIST_ID,
+            amount: val,
+            receipt_filename: r.filename
+        });
+
+        document.getElementById(`amount-${i}`).disabled = true;
+        if (btn) {
+            btn.disabled = true;
+            btn.classList.remove('btn-outline-success');
+            btn.classList.add('btn-success');
+            btn.textContent = '✅ Dodano';
+        }
+    }
+}
+
+function emitAllExpenses(n) {
+    const btnAll = document.getElementById('addAllBtn');
+    if (btnAll) {
+        btnAll.disabled = true;
+        btnAll.innerHTML = `<span class="spinner-border spinner-border-sm me-2" role="status"></span>Dodawanie...`;
+    }
+
+    for (let i = 0; i < n; i++) {
+        setTimeout(() => emitExpense(i), i * 150);
+    }
+
+    setTimeout(() => {
+        if (btnAll) {
+            btnAll.innerHTML = '✅ Wszystko dodano';
+            btnAll.classList.remove('btn-success');
+            btnAll.classList.add('btn-outline-success');
+        }
+    }, n * 150 + 300);
+}

static/js/receipt_crop_logic.js

@@ -0,0 +1,96 @@
+(function () {
+    function initCropper(imgEl) {
+        return new Cropper(imgEl, {
+            viewMode: 1,
+            autoCropArea: 1,
+            responsive: true,
+            background: false,
+            zoomable: true,
+            movable: true,
+            dragMode: 'move',
+            minContainerHeight: 400,
+            minContainerWidth: 400,
+        });
+    }
+
+    function cleanUpCropper(imgEl, cropperInstance) {
+        if (cropperInstance) {
+            cropperInstance.destroy();
+        }
+        if (imgEl) imgEl.src = "";
+    }
+
+    function handleCrop(endpoint, receiptId, cropper, spinner) {
+        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;
+        }
+
+        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", receiptId);
+            formData.append("cropped_image", blob);
+
+            fetch(endpoint, {
+                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);
+    }
+
+    window.cropUtils = {
+        initCropper,
+        cleanUpCropper,
+        handleCrop,
+    };
+})();

static/js/receipt_section.js

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
   const receiptSection = document.getElementById("receiptSection");
   const toggleBtn = document.querySelector('[data-bs-target="#receiptSection"]');
 
@@ -16,3 +16,24 @@ document.addEventListener("DOMContentLoaded", function() {
     localStorage.setItem("receiptSectionOpen", "false");
   });
 });
+
+document.addEventListener("DOMContentLoaded", function () {
+  const btn = document.getElementById("toggleReceiptBtn");
+  const target = document.querySelector(btn.getAttribute("data-bs-target"));
+
+  function updateUI() {
+    const isShown = target.classList.contains("show");
+    btn.innerHTML = isShown
+      ? "📄 Ukryj sekcję paragonów"
+      : "📄 Pokaż sekcję paragonów";
+
+    btn.classList.toggle("active", isShown);
+    btn.classList.toggle("btn-outline-light", !isShown);
+    btn.classList.toggle("btn-secondary", isShown);
+  }
+
+  target.addEventListener("shown.bs.collapse", updateUI);
+  target.addEventListener("hidden.bs.collapse", updateUI);
+
+  updateUI();
+});

static/js/receipt_upload.js

@@ -3,29 +3,28 @@ window.receiptToastShown = window.receiptToastShown || false;
 if (!window.receiptUploaderInitialized) {
   document.addEventListener("DOMContentLoaded", function () {
     const form = document.getElementById("receiptForm");
-    const input = document.getElementById("receiptInput");
-    const gallery = document.getElementById("receiptGallery");
+    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");
     const progressContainer = document.getElementById("progressContainer");
     const progressBar = document.getElementById("progressBar");
-    const fileLabel = document.getElementById("fileLabel");
+    const gallery = document.getElementById("receiptGallery");
 
-    if (!form || !input || !gallery) return;
+    if (!form || !gallery) return;
 
-    // Zmiana labela po wyborze pliku
-    if (input && fileLabel) {
-      input.addEventListener("change", function () {
-        if (input.files.length > 0) {
-          fileLabel.textContent = input.files[0].name;
-        } else {
-          fileLabel.textContent = "Wybierz zdjęcie paragonu";
-        }
-      });
+    const isDesktop = window.matchMedia("(pointer: fine)").matches;
+
+    if (isDesktop) {
+      if (cameraBtn) cameraBtn.remove();
+      if (inputCamera) inputCamera.remove();
+      if (galleryBtnText) galleryBtnText.textContent = "➕ Dodaj paragon";
     }
 
-    form.addEventListener("submit", function (e) {
-      e.preventDefault();
-
-      const file = input.files[0];
+    function handleFileUpload(inputElement) {
+      const file = inputElement.files[0];
       if (!file) {
         showToast("Nie wybrano pliku!", "warning");
         return;
@@ -56,31 +55,35 @@ if (!window.receiptUploaderInitialized) {
         progressContainer.style.display = "none";
         progressBar.style.width = "0%";
         progressBar.textContent = "";
-        input.value = "";
-
-        if (fileLabel) {
-          fileLabel.textContent = "Wybierz zdjęcie paragonu";
-        }
+        inputElement.value = "";
+        window.receiptToastShown = false;
       };
 
       xhr.onreadystatechange = function () {
         if (xhr.readyState === XMLHttpRequest.DONE) {
-          if (xhr.status === 200) {
+          try {
             const res = JSON.parse(xhr.responseText);
-            if (res.success && res.url) {
+
+            if (xhr.status === 200 && res.success && res.url) {
               fetch(window.location.href)
                 .then(response => response.text())
                 .then(html => {
                   const parser = new DOMParser();
                   const doc = parser.parseFromString(html, "text/html");
                   const newGallery = doc.getElementById("receiptGallery");
+
                   if (newGallery) {
                     gallery.innerHTML = newGallery.innerHTML;
 
-                    lightbox.destroy();
-                    lightbox = GLightbox({
-                      selector: '.glightbox'
-                    });
+                    if (typeof lightbox !== "undefined") {
+                      lightbox.destroy();
+                    }
+                    lightbox = GLightbox({ selector: ".glightbox" });
+
+                    const analysisBlock = document.getElementById("receiptAnalysisBlock");
+                    if (analysisBlock) {
+                      analysisBlock.classList.remove("d-none");
+                    }
 
                     if (!window.receiptToastShown) {
                       showToast("Wgrano paragon", "success");
@@ -89,16 +92,21 @@ if (!window.receiptUploaderInitialized) {
                   }
                 });
             } else {
-              showToast(res.message || "Błąd podczas wgrywania.", "danger");
+              const errorMessage = res.error || res.message || "Błąd podczas wgrywania.";
+              showToast(errorMessage, "danger");
             }
-          } else {
-            showToast("Błąd serwera. Spróbuj ponownie.", "danger");
+          } catch (err) {
+            showToast("Błąd serwera (nieprawidłowa odpowiedź).", "danger");
           }
         }
       };
 
       xhr.send(formData);
-    });
+    }
+
+    inputCamera?.addEventListener("change", () => handleFileUpload(inputCamera));
+    inputGallery?.addEventListener("change", () => handleFileUpload(inputGallery));
+    inputPDF?.addEventListener("change", () => handleFileUpload(inputPDF));
   });
 
   window.receiptUploaderInitialized = true;

static/js/select.js

@@ -0,0 +1,12 @@
+document.addEventListener("DOMContentLoaded", function () {
+  new TomSelect("#categories", {
+    plugins: ['remove_button'],
+    maxItems: 1,
+    placeholder: 'Wybierz jedną kategorie...',
+    create: false,
+    sortField: {
+      field: "text",
+      direction: "asc"
+    }
+  });
+});

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

@@ -0,0 +1,14 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const select = document.getElementById("monthSelect");
+    if (!select) return;
+    select.addEventListener("change", () => {
+        const month = select.value;
+        const url = new URL(window.location.href);
+        if (month) {
+            url.searchParams.set("m", month);
+        } else {
+            url.searchParams.delete("m");
+        }
+        window.location.href = url.toString();
+    });
+});

static/js/sockets.js

@@ -2,93 +2,91 @@ let didReceiveFirstFullList = false;
 
 // --- Automatyczny reconnect po powrocie do karty/przywróceniu internetu ---
 function reconnectIfNeeded() {
-    if (!socket.connected) {
-        socket.connect();
-    }
+  if (!socket.connected) {
+    socket.connect();
+  }
 }
 
-document.addEventListener("visibilitychange", function() {
-    if (!document.hidden) {
-        reconnectIfNeeded();
-    }
+document.addEventListener("visibilitychange", function () {
+  if (!document.hidden) {
+    reconnectIfNeeded();
+  }
 });
 
-window.addEventListener("focus", function() {
-    reconnectIfNeeded();
+window.addEventListener("focus", function () {
+  reconnectIfNeeded();
 });
 
-window.addEventListener("online", function() {
-    reconnectIfNeeded();
+window.addEventListener("online", function () {
+  reconnectIfNeeded();
 });
 
 // --- Blokowanie checkboxów na czas reconnect ---
 function disableCheckboxes(disable) {
-    document.querySelectorAll('#items input[type="checkbox"]').forEach(cb => {
-        cb.disabled = disable;
-    });
+  document.querySelectorAll('#items input[type="checkbox"]').forEach(cb => {
+    cb.disabled = disable;
+  });
 }
 
 // --- Toasty przy rozłączeniu i połączeniu ---
 let firstConnect = true;
 let wasReconnected = false; // flaga do kontrolowania toasta
 
-socket.on('connect', function() {
-    if (!firstConnect) {
-        //showToast('Połączono z serwerem!', 'info');
-        disableCheckboxes(true);
-        wasReconnected = true;
+socket.on('connect', function () {
+  if (!firstConnect) {
+    //showToast('Połączono z serwerem!', 'info');
+    disableCheckboxes(true);
+    wasReconnected = true;
 
-        if (window.LIST_ID && window.usernameForReconnect) {
-            socket.emit('join_list', { room: window.LIST_ID, username: window.usernameForReconnect });
-        }
+    if (window.LIST_ID && window.usernameForReconnect) {
+      socket.emit('join_list', { room: window.LIST_ID, username: window.usernameForReconnect });
     }
-    firstConnect = false;
+  }
+  firstConnect = false;
 });
 
-socket.on('disconnect', function(reason) {
-    showToast('Utracono połączenie z serwerem...', 'warning');
-    disableCheckboxes(true);
+socket.on('disconnect', function (reason) {
+  //showToast('Utracono połączenie z serwerem...', 'warning');
+  disableCheckboxes(true);
 });
 
 socket.off('joined_confirmation');
-socket.on('joined_confirmation', function(data) {
-    if (wasReconnected) {
-        showToast(`Lista: ${data.list_title} – ponownie dołączono.`, 'info');
-        wasReconnected = false;
-    }
-    if (window.LIST_ID) {
-        socket.emit('request_full_list', { list_id: window.LIST_ID });
-    }
+socket.on('joined_confirmation', function (data) {
+  if (wasReconnected) {
+    showToast(`Lista: ${data.list_title} – ponownie dołączono.`, 'info');
+    wasReconnected = false;
+  }
+  if (window.LIST_ID) {
+    socket.emit('request_full_list', { list_id: window.LIST_ID });
+  }
 
 });
 
-socket.on('user_joined', function(data) {
-    showToast(`${data.username} dołączył do listy`, 'info');
+socket.on('user_joined', function (data) {
+  showToast(`${data.username} dołączył do listy`, 'info');
 });
 
-socket.on('user_left', function(data) {
-    showToast(`${data.username} opuścił listę`, 'warning');
+socket.on('user_left', function (data) {
+  showToast(`${data.username} opuścił listę`, 'warning');
 });
 
-socket.on('user_list', function(data) {
-    if (data.users.length > 0) {
-        const userList = data.users.join(', ');
-        showToast(`Obecni: ${userList}`, 'info');
-    }
+socket.on('user_list', function (data) {
+  if (data.users.length > 0) {
+    const userList = data.users.join(', ');
+    showToast(`Obecni: ${userList}`, 'info');
+  }
 });
 
 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");
@@ -103,6 +101,20 @@ socket.on('receipt_added', function (data) {
   }
 });
 
+socket.on("items_reordered", data => {
+  if (data.list_id !== window.LIST_ID) return;
+
+  if (window.currentItems) {
+    window.currentItems = data.order.map(id =>
+      window.currentItems.find(item => item.id === id)
+    ).filter(Boolean);
+
+    updateListSmoothly(window.currentItems);
+    //showToast('Kolejność produktów zaktualizowana', 'info');
+  }
+});
+
+
 socket.on('full_list', function (data) {
   const itemsContainer = document.getElementById('items');
 
@@ -112,6 +124,7 @@ socket.on('full_list', function (data) {
 
   const isDifferent = isListDifferent(oldItems, data.items);
 
+  window.currentItems = data.items;
   updateListSmoothly(data.items);
   toggleEmptyPlaceholder();
 
@@ -119,4 +132,12 @@ socket.on('full_list', function (data) {
     showToast('Lista została zaktualizowana', 'info');
   }
   didReceiveFirstFullList = true;
+});
+
+socket.on('item_marked_not_purchased', data => {
+  socket.emit('request_full_list', { list_id: window.LIST_ID });
+});
+
+socket.on('item_unmarked_not_purchased', data => {
+  socket.emit('request_full_list', { list_id: window.LIST_ID });
 });

static/js/sort_mode.js

@@ -0,0 +1,94 @@
+let sortable = null;
+let isSorting = false;
+
+function enableSortMode() {
+    if (isSorting) return;
+    isSorting = true;
+    window.isSorting = true;
+    localStorage.setItem('sortModeEnabled', 'true');
+
+    const itemsContainer = document.getElementById('items');
+    const listId = window.LIST_ID;
+    if (!itemsContainer || !listId) return;
+
+    if (window.currentItems) {
+        updateListSmoothly(window.currentItems);
+    }
+
+    setTimeout(() => {
+        if (sortable) sortable.destroy();
+
+        sortable = Sortable.create(itemsContainer, {
+            animation: 150,
+            handle: '.drag-handle',
+            ghostClass: 'drag-ghost',
+            filter: 'input, button',
+            preventOnFilter: false,
+            onEnd: () => {
+                const order = Array.from(itemsContainer.children)
+                    .map(li => parseInt(li.id.replace('item-', '')))
+                    .filter(id => !isNaN(id));
+
+                fetch('/reorder_items', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ list_id: listId, order })
+                }).then(() => {
+                    showToast('Zapisano nową kolejność', 'success');
+
+                    if (window.currentItems) {
+                        window.currentItems = order.map(id =>
+                            window.currentItems.find(item => item.id === id)
+                        );
+                        updateListSmoothly(window.currentItems);
+                    }
+                });
+            }
+        });
+
+        updateSortButtonUI(true);
+    }, 50);
+}
+
+function disableSortMode() {
+    if (sortable) {
+        sortable.destroy();
+        sortable = null;
+    }
+
+    isSorting = false;
+    localStorage.removeItem('sortModeEnabled');
+    window.isSorting = false;
+    if (window.currentItems) {
+        updateListSmoothly(window.currentItems);
+    }
+
+    updateSortButtonUI(false);
+
+}
+
+function toggleSortMode() {
+    isSorting ? disableSortMode() : enableSortMode();
+}
+
+function updateSortButtonUI(active) {
+    const btn = document.getElementById('sort-toggle-btn');
+    if (!btn) return;
+
+    if (active) {
+        btn.textContent = '✔️ Zakończ sortowanie';
+        btn.classList.remove('btn-outline-warning');
+        btn.classList.add('btn-outline-success');
+    } else {
+        btn.textContent = '✳️ Zmień kolejność';
+        btn.classList.remove('btn-outline-success');
+        btn.classList.add('btn-outline-warning');
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const wasSorting = localStorage.getItem('sortModeEnabled') === 'true';
+    if (wasSorting) {
+        enableSortMode();
+    }
+});

static/js/toggle_button.js

@@ -1,11 +1,8 @@
-document.addEventListener("DOMContentLoaded", function() {
+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,12 +15,10 @@ document.addEventListener("DOMContentLoaded", function() {
         }
     }
 
-    // Inicjalizacja stanu
     let active = toggleBtn.getAttribute("data-active") === "1";
     updateToggle(active);
 
-    // Obsługa kliknięcia
-    toggleBtn.addEventListener("click", function() {
+    toggleBtn.addEventListener("click", function () {
         active = !active;
         toggleBtn.setAttribute("data-active", active ? "1" : "0");
         hiddenInput.value = active ? "1" : "0";

static/js/user_management.js

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
   var resetPasswordModal = document.getElementById('resetPasswordModal');
   resetPasswordModal.addEventListener('show.bs.modal', function (event) {
     var button = event.relatedTarget;

static/js/user_receipt_crop.js

@@ -0,0 +1,39 @@
+(function () {
+    document.addEventListener("DOMContentLoaded", function () {
+        const cropModal = document.getElementById("userCropModal");
+        const cropImage = document.getElementById("userCropImage");
+        const spinner = document.getElementById("userCropLoading");
+        const saveButton = document.getElementById("userSaveCrop");
+
+        if (!cropModal || !cropImage || !spinner || !saveButton) return;
+
+        let cropper;
+        let currentReceiptId;
+        const currentEndpoint = "/user_crop_receipt";
+
+        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;
+
+            document.querySelectorAll('.cropper-container').forEach(e => e.remove());
+
+            if (cropper) cropper.destroy();
+            cropImage.onload = () => {
+                cropper = cropUtils.initCropper(cropImage);
+            };
+        });
+
+        cropModal.addEventListener("hidden.bs.modal", function () {
+            cropUtils.cleanUpCropper(cropImage, cropper);
+            cropper = null;
+        });
+
+        saveButton.addEventListener("click", function () {
+            if (!cropper) return;
+            spinner.classList.remove("d-none");
+            cropUtils.handleCrop(currentEndpoint, currentReceiptId, cropper, spinner);
+        });
+    });
+})();

static/lib/css/cropper.min.css

@@ -0,0 +1,9 @@
+/*!
+ * Cropper.js v1.6.2
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2024-04-21T07:43:02.731Z
+ */.cropper-container{-webkit-touch-callout:none;direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}

static/lib/css/sort_table.min.css

@@ -0,0 +1 @@
+.sortable thead th:not(.no-sort){cursor:pointer}.sortable thead th:not(.no-sort)::after,.sortable thead th:not(.no-sort)::before{transition:color .1s ease-in-out;font-size:1.2em;color:rgba(0,0,0,0)}.sortable thead th:not(.no-sort)::after{margin-left:3px;content:"▸"}.sortable thead th:not(.no-sort):hover::after{color:inherit}.sortable thead th:not(.no-sort)[aria-sort=descending]::after{color:inherit;content:"▾"}.sortable thead th:not(.no-sort)[aria-sort=ascending]::after{color:inherit;content:"▴"}.sortable thead th:not(.no-sort).indicator-left::after{content:""}.sortable thead th:not(.no-sort).indicator-left::before{margin-right:3px;content:"▸"}.sortable thead th:not(.no-sort).indicator-left:hover::before{color:inherit}.sortable thead th:not(.no-sort).indicator-left[aria-sort=descending]::before{color:inherit;content:"▾"}.sortable thead th:not(.no-sort).indicator-left[aria-sort=ascending]::before{color:inherit;content:"▴"}

static/lib/js/sort_table.min.js

@@ -0,0 +1,4 @@
+document.addEventListener("click",function(d){try{var A=d.shiftKey||d.altKey,f=function k(a,l){return a.nodeName===l?a:k(a.parentNode,l)}(d.target,"TH"),v=f.parentNode,w=v.parentNode,g=w.parentNode;if("THEAD"===w.nodeName&&g.classList.contains("sortable")&&!f.classList.contains("no-sort")){var h=v.cells;for(d=0;d<h.length;d++)h[d]!==f&&h[d].removeAttribute("aria-sort");h="descending";("descending"===f.getAttribute("aria-sort")||g.classList.contains("asc")&&"ascending"!==f.getAttribute("aria-sort"))&&
+(h="ascending");f.setAttribute("aria-sort",h);g.dataset.timer&&clearTimeout(+g.dataset.timer);g.dataset.timer=setTimeout(function(){(function(a,l){function k(b){if(b){if(l&&b.dataset.sortAlt)return b.dataset.sortAlt;if(b.dataset.sort)return b.dataset.sort;if(b.textContent)return b.textContent}return""}a.dispatchEvent(new Event("sort-start",{bubbles:!0}));for(var p=a.tHead.querySelector("th[aria-sort]"),q=a.tHead.children[0],B="ascending"===p.getAttribute("aria-sort"),C=a.classList.contains("n-last"),
+y=function(b,m,c){var e=k(m.cells[c]),n=k(b.cells[c]);if(C){if(""===e&&""!==n)return-1;if(""===n&&""!==e)return 1}var x=+e-+n;e=isNaN(x)?e.localeCompare(n):x;return 0===e&&q.cells[c]&&q.cells[c].hasAttribute("data-sort-tbr")?y(b,m,+q.cells[c].dataset.sortTbr):B?-e:e},r=0;r<a.tBodies.length;r++){var t=a.tBodies[r],z=[].slice.call(t.rows,0);z.sort(function(b,m){var c;return y(b,m,+(null!==(c=p.dataset.sortCol)&&void 0!==c?c:p.cellIndex))});var u=t.cloneNode();u.append.apply(u,z);a.replaceChild(u,t)}a.dispatchEvent(new Event("sort-end",
+{bubbles:!0}))})(g,A)},1).toString()}}catch{}});

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

@@ -0,0 +1,443 @@
+/**
+* Tom Select v2.4.3
+* Licensed under the Apache License, Version 2.0 (the "License");
+*/
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).TomSelect=t()}(this,(function(){"use strict"
+function e(e,t){e.split(/\s+/).forEach((e=>{t(e)}))}class t{constructor(){this._events={}}on(t,s){e(t,(e=>{const t=this._events[e]||[]
+t.push(s),this._events[e]=t}))}off(t,s){var i=arguments.length
+0!==i?e(t,(e=>{if(1===i)return void delete this._events[e]
+const t=this._events[e]
+void 0!==t&&(t.splice(t.indexOf(s),1),this._events[e]=t)})):this._events={}}trigger(t,...s){var i=this
+e(t,(e=>{const t=i._events[e]
+void 0!==t&&t.forEach((e=>{e.apply(i,s)}))}))}}const s=e=>(e=e.filter(Boolean)).length<2?e[0]||"":1==l(e)?"["+e.join("")+"]":"(?:"+e.join("|")+")",i=e=>{if(!o(e))return e.join("")
+let t="",s=0
+const i=()=>{s>1&&(t+="{"+s+"}")}
+return e.forEach(((n,o)=>{n!==e[o-1]?(i(),t+=n,s=1):s++})),i(),t},n=e=>{let t=Array.from(e)
+return s(t)},o=e=>new Set(e).size!==e.length,r=e=>(e+"").replace(/([\$\(\)\*\+\.\?\[\]\^\{\|\}\\])/gu,"\\$1"),l=e=>e.reduce(((e,t)=>Math.max(e,a(t))),0),a=e=>Array.from(e).length,c=e=>{if(1===e.length)return[[e]]
+let t=[]
+const s=e.substring(1)
+return c(s).forEach((function(s){let i=s.slice(0)
+i[0]=e.charAt(0)+i[0],t.push(i),i=s.slice(0),i.unshift(e.charAt(0)),t.push(i)})),t},d=[[0,65535]]
+let u,p
+const h={},g={"/":"⁄∕",0:"߀",a:"ⱥɐɑ",aa:"ꜳ",ae:"æǽǣ",ao:"ꜵ",au:"ꜷ",av:"ꜹꜻ",ay:"ꜽ",b:"ƀɓƃ",c:"ꜿƈȼↄ",d:"đɗɖᴅƌꮷԁɦ",e:"ɛǝᴇɇ",f:"ꝼƒ",g:"ǥɠꞡᵹꝿɢ",h:"ħⱨⱶɥ",i:"ɨı",j:"ɉȷ",k:"ƙⱪꝁꝃꝅꞣ",l:"łƚɫⱡꝉꝇꞁɭ",m:"ɱɯϻ",n:"ꞥƞɲꞑᴎлԉ",o:"øǿɔɵꝋꝍᴑ",oe:"œ",oi:"ƣ",oo:"ꝏ",ou:"ȣ",p:"ƥᵽꝑꝓꝕρ",q:"ꝗꝙɋ",r:"ɍɽꝛꞧꞃ",s:"ßȿꞩꞅʂ",t:"ŧƭʈⱦꞇ",th:"þ",tz:"ꜩ",u:"ʉ",v:"ʋꝟʌ",vy:"ꝡ",w:"ⱳ",y:"ƴɏỿ",z:"ƶȥɀⱬꝣ",hv:"ƕ"}
+for(let e in g){let t=g[e]||""
+for(let s=0;s<t.length;s++){let i=t.substring(s,s+1)
+h[i]=e}}const f=new RegExp(Object.keys(h).join("|")+"|[̀-ͯ·ʾʼ]","gu"),m=(e,t="NFKD")=>e.normalize(t),v=e=>Array.from(e).reduce(((e,t)=>e+y(t)),""),y=e=>(e=m(e).toLowerCase().replace(f,(e=>h[e]||"")),m(e,"NFC"))
+const O=e=>{const t={},s=(e,s)=>{const i=t[e]||new Set,o=new RegExp("^"+n(i)+"$","iu")
+s.match(o)||(i.add(r(s)),t[e]=i)}
+for(let t of function*(e){for(const[t,s]of e)for(let e=t;e<=s;e++){let t=String.fromCharCode(e),s=v(t)
+s!=t.toLowerCase()&&(s.length>3||0!=s.length&&(yield{folded:s,composed:t,code_point:e}))}}(e))s(t.folded,t.folded),s(t.folded,t.composed)
+return t},b=e=>{const t=O(e),i={}
+let o=[]
+for(let e in t){let s=t[e]
+s&&(i[e]=n(s)),e.length>1&&o.push(r(e))}o.sort(((e,t)=>t.length-e.length))
+const l=s(o)
+return p=new RegExp("^"+l,"u"),i},w=(e,t=1)=>(t=Math.max(t,e.length-1),s(c(e).map((e=>((e,t=1)=>{let s=0
+return e=e.map((e=>(u[e]&&(s+=e.length),u[e]||e))),s>=t?i(e):""})(e,t))))),_=(e,t=!0)=>{let n=e.length>1?1:0
+return s(e.map((e=>{let s=[]
+const o=t?e.length():e.length()-1
+for(let t=0;t<o;t++)s.push(w(e.substrs[t]||"",n))
+return i(s)})))},C=(e,t)=>{for(const s of t){if(s.start!=e.start||s.end!=e.end)continue
+if(s.substrs.join("")!==e.substrs.join(""))continue
+let t=e.parts
+const i=e=>{for(const s of t){if(s.start===e.start&&s.substr===e.substr)return!1
+if(1!=e.length&&1!=s.length){if(e.start<s.start&&e.end>s.start)return!0
+if(s.start<e.start&&s.end>e.start)return!0}}return!1}
+if(!(s.parts.filter(i).length>0))return!0}return!1}
+class S{parts
+substrs
+start
+end
+constructor(){this.parts=[],this.substrs=[],this.start=0,this.end=0}add(e){e&&(this.parts.push(e),this.substrs.push(e.substr),this.start=Math.min(e.start,this.start),this.end=Math.max(e.end,this.end))}last(){return this.parts[this.parts.length-1]}length(){return this.parts.length}clone(e,t){let s=new S,i=JSON.parse(JSON.stringify(this.parts)),n=i.pop()
+for(const e of i)s.add(e)
+let o=t.substr.substring(0,e-n.start),r=o.length
+return s.add({start:n.start,end:n.start+r,length:r,substr:o}),s}}const I=e=>{void 0===u&&(u=b(d)),e=v(e)
+let t="",s=[new S]
+for(let i=0;i<e.length;i++){let n=e.substring(i).match(p)
+const o=e.substring(i,i+1),r=n?n[0]:null
+let l=[],a=new Set
+for(const e of s){const t=e.last()
+if(!t||1==t.length||t.end<=i)if(r){const t=r.length
+e.add({start:i,end:i+t,length:t,substr:r}),a.add("1")}else e.add({start:i,end:i+1,length:1,substr:o}),a.add("2")
+else if(r){let s=e.clone(i,t)
+const n=r.length
+s.add({start:i,end:i+n,length:n,substr:r}),l.push(s)}else a.add("3")}if(l.length>0){l=l.sort(((e,t)=>e.length()-t.length()))
+for(let e of l)C(e,s)||s.push(e)}else if(i>0&&1==a.size&&!a.has("3")){t+=_(s,!1)
+let e=new S
+const i=s[0]
+i&&e.add(i.last()),s=[e]}}return t+=_(s,!0),t},A=(e,t)=>{if(e)return e[t]},k=(e,t)=>{if(e){for(var s,i=t.split(".");(s=i.shift())&&(e=e[s]););return e}},x=(e,t,s)=>{var i,n
+return e?(e+="",null==t.regex||-1===(n=e.search(t.regex))?0:(i=t.string.length/e.length,0===n&&(i+=.5),i*s)):0},F=(e,t)=>{var s=e[t]
+if("function"==typeof s)return s
+s&&!Array.isArray(s)&&(e[t]=[s])},L=(e,t)=>{if(Array.isArray(e))e.forEach(t)
+else for(var s in e)e.hasOwnProperty(s)&&t(e[s],s)},E=(e,t)=>"number"==typeof e&&"number"==typeof t?e>t?1:e<t?-1:0:(e=v(e+"").toLowerCase())>(t=v(t+"").toLowerCase())?1:t>e?-1:0
+class T{items
+settings
+constructor(e,t){this.items=e,this.settings=t||{diacritics:!0}}tokenize(e,t,s){if(!e||!e.length)return[]
+const i=[],n=e.split(/\s+/)
+var o
+return s&&(o=new RegExp("^("+Object.keys(s).map(r).join("|")+"):(.*)$")),n.forEach((e=>{let s,n=null,l=null
+o&&(s=e.match(o))&&(n=s[1],e=s[2]),e.length>0&&(l=this.settings.diacritics?I(e)||null:r(e),l&&t&&(l="\\b"+l)),i.push({string:e,regex:l?new RegExp(l,"iu"):null,field:n})})),i}getScoreFunction(e,t){var s=this.prepareSearch(e,t)
+return this._getScoreFunction(s)}_getScoreFunction(e){const t=e.tokens,s=t.length
+if(!s)return function(){return 0}
+const i=e.options.fields,n=e.weights,o=i.length,r=e.getAttrFn
+if(!o)return function(){return 1}
+const l=1===o?function(e,t){const s=i[0].field
+return x(r(t,s),e,n[s]||1)}:function(e,t){var s=0
+if(e.field){const i=r(t,e.field)
+!e.regex&&i?s+=1/o:s+=x(i,e,1)}else L(n,((i,n)=>{s+=x(r(t,n),e,i)}))
+return s/o}
+return 1===s?function(e){return l(t[0],e)}:"and"===e.options.conjunction?function(e){var i,n=0
+for(let s of t){if((i=l(s,e))<=0)return 0
+n+=i}return n/s}:function(e){var i=0
+return L(t,(t=>{i+=l(t,e)})),i/s}}getSortFunction(e,t){var s=this.prepareSearch(e,t)
+return this._getSortFunction(s)}_getSortFunction(e){var t,s=[]
+const i=this,n=e.options,o=!e.query&&n.sort_empty?n.sort_empty:n.sort
+if("function"==typeof o)return o.bind(this)
+const r=function(t,s){return"$score"===t?s.score:e.getAttrFn(i.items[s.id],t)}
+if(o)for(let t of o)(e.query||"$score"!==t.field)&&s.push(t)
+if(e.query){t=!0
+for(let e of s)if("$score"===e.field){t=!1
+break}t&&s.unshift({field:"$score",direction:"desc"})}else s=s.filter((e=>"$score"!==e.field))
+return s.length?function(e,t){var i,n
+for(let o of s){if(n=o.field,i=("desc"===o.direction?-1:1)*E(r(n,e),r(n,t)))return i}return 0}:null}prepareSearch(e,t){const s={}
+var i=Object.assign({},t)
+if(F(i,"sort"),F(i,"sort_empty"),i.fields){F(i,"fields")
+const e=[]
+i.fields.forEach((t=>{"string"==typeof t&&(t={field:t,weight:1}),e.push(t),s[t.field]="weight"in t?t.weight:1})),i.fields=e}return{options:i,query:e.toLowerCase().trim(),tokens:this.tokenize(e,i.respect_word_boundaries,s),total:0,items:[],weights:s,getAttrFn:i.nesting?k:A}}search(e,t){var s,i,n=this
+i=this.prepareSearch(e,t),t=i.options,e=i.query
+const o=t.score||n._getScoreFunction(i)
+e.length?L(n.items,((e,n)=>{s=o(e),(!1===t.filter||s>0)&&i.items.push({score:s,id:n})})):L(n.items,((e,t)=>{i.items.push({score:1,id:t})}))
+const r=n._getSortFunction(i)
+return r&&i.items.sort(r),i.total=i.items.length,"number"==typeof t.limit&&(i.items=i.items.slice(0,t.limit)),i}}const P=e=>null==e?null:N(e),N=e=>"boolean"==typeof e?e?"1":"0":e+"",j=e=>(e+"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),$=(e,t)=>{var s
+return function(i,n){var o=this
+s&&(o.loading=Math.max(o.loading-1,0),clearTimeout(s)),s=setTimeout((function(){s=null,o.loadedSearches[i]=!0,e.call(o,i,n)}),t)}},V=(e,t,s)=>{var i,n=e.trigger,o={}
+for(i of(e.trigger=function(){var s=arguments[0]
+if(-1===t.indexOf(s))return n.apply(e,arguments)
+o[s]=arguments},s.apply(e,[]),e.trigger=n,t))i in o&&n.apply(e,o[i])},q=(e,t=!1)=>{e&&(e.preventDefault(),t&&e.stopPropagation())},D=(e,t,s,i)=>{e.addEventListener(t,s,i)},H=(e,t)=>!!t&&(!!t[e]&&1===(t.altKey?1:0)+(t.ctrlKey?1:0)+(t.shiftKey?1:0)+(t.metaKey?1:0)),R=(e,t)=>{const s=e.getAttribute("id")
+return s||(e.setAttribute("id",t),t)},M=e=>e.replace(/[\\"']/g,"\\$&"),z=(e,t)=>{t&&e.append(t)},B=(e,t)=>{if(Array.isArray(e))e.forEach(t)
+else for(var s in e)e.hasOwnProperty(s)&&t(e[s],s)},K=e=>{if(e.jquery)return e[0]
+if(e instanceof HTMLElement)return e
+if(Q(e)){var t=document.createElement("template")
+return t.innerHTML=e.trim(),t.content.firstChild}return document.querySelector(e)},Q=e=>"string"==typeof e&&e.indexOf("<")>-1,G=(e,t)=>{var s=document.createEvent("HTMLEvents")
+s.initEvent(t,!0,!1),e.dispatchEvent(s)},U=(e,t)=>{Object.assign(e.style,t)},J=(e,...t)=>{var s=X(t);(e=Y(e)).map((e=>{s.map((t=>{e.classList.add(t)}))}))},W=(e,...t)=>{var s=X(t);(e=Y(e)).map((e=>{s.map((t=>{e.classList.remove(t)}))}))},X=e=>{var t=[]
+return B(e,(e=>{"string"==typeof e&&(e=e.trim().split(/[\t\n\f\r\s]/)),Array.isArray(e)&&(t=t.concat(e))})),t.filter(Boolean)},Y=e=>(Array.isArray(e)||(e=[e]),e),Z=(e,t,s)=>{if(!s||s.contains(e))for(;e&&e.matches;){if(e.matches(t))return e
+e=e.parentNode}},ee=(e,t=0)=>t>0?e[e.length-1]:e[0],te=(e,t)=>{if(!e)return-1
+t=t||e.nodeName
+for(var s=0;e=e.previousElementSibling;)e.matches(t)&&s++
+return s},se=(e,t)=>{B(t,((t,s)=>{null==t?e.removeAttribute(s):e.setAttribute(s,""+t)}))},ie=(e,t)=>{e.parentNode&&e.parentNode.replaceChild(t,e)},ne=(e,t)=>{if(null===t)return
+if("string"==typeof t){if(!t.length)return
+t=new RegExp(t,"i")}const s=e=>3===e.nodeType?(e=>{var s=e.data.match(t)
+if(s&&e.data.length>0){var i=document.createElement("span")
+i.className="highlight"
+var n=e.splitText(s.index)
+n.splitText(s[0].length)
+var o=n.cloneNode(!0)
+return i.appendChild(o),ie(n,i),1}return 0})(e):((e=>{1!==e.nodeType||!e.childNodes||/(script|style)/i.test(e.tagName)||"highlight"===e.className&&"SPAN"===e.tagName||Array.from(e.childNodes).forEach((e=>{s(e)}))})(e),0)
+s(e)},oe="undefined"!=typeof navigator&&/Mac/.test(navigator.userAgent)?"metaKey":"ctrlKey"
+var re={options:[],optgroups:[],plugins:[],delimiter:",",splitOn:null,persist:!0,diacritics:!0,create:null,createOnBlur:!1,createFilter:null,highlight:!0,openOnFocus:!0,shouldOpen:null,maxOptions:50,maxItems:null,hideSelected:null,duplicates:!1,addPrecedence:!1,selectOnTab:!1,preload:null,allowEmptyOption:!1,refreshThrottle:300,loadThrottle:300,loadingClass:"loading",dataAttr:null,optgroupField:"optgroup",valueField:"value",labelField:"text",disabledField:"disabled",optgroupLabelField:"label",optgroupValueField:"value",lockOptgroupOrder:!1,sortField:"$order",searchField:["text"],searchConjunction:"and",mode:null,wrapperClass:"ts-wrapper",controlClass:"ts-control",dropdownClass:"ts-dropdown",dropdownContentClass:"ts-dropdown-content",itemClass:"item",optionClass:"option",dropdownParent:null,controlInput:'<input type="text" autocomplete="off" size="1" />',copyClassesToDropdown:!1,placeholder:null,hidePlaceholder:null,shouldLoad:function(e){return e.length>0},render:{}}
+function le(e,t){var s=Object.assign({},re,t),i=s.dataAttr,n=s.labelField,o=s.valueField,r=s.disabledField,l=s.optgroupField,a=s.optgroupLabelField,c=s.optgroupValueField,d=e.tagName.toLowerCase(),u=e.getAttribute("placeholder")||e.getAttribute("data-placeholder")
+if(!u&&!s.allowEmptyOption){let t=e.querySelector('option[value=""]')
+t&&(u=t.textContent)}var p={placeholder:u,options:[],optgroups:[],items:[],maxItems:null}
+return"select"===d?(()=>{var t,d=p.options,u={},h=1
+let g=0
+var f=e=>{var t=Object.assign({},e.dataset),s=i&&t[i]
+return"string"==typeof s&&s.length&&(t=Object.assign(t,JSON.parse(s))),t},m=(e,t)=>{var i=P(e.value)
+if(null!=i&&(i||s.allowEmptyOption)){if(u.hasOwnProperty(i)){if(t){var a=u[i][l]
+a?Array.isArray(a)?a.push(t):u[i][l]=[a,t]:u[i][l]=t}}else{var c=f(e)
+c[n]=c[n]||e.textContent,c[o]=c[o]||i,c[r]=c[r]||e.disabled,c[l]=c[l]||t,c.$option=e,c.$order=c.$order||++g,u[i]=c,d.push(c)}e.selected&&p.items.push(i)}}
+p.maxItems=e.hasAttribute("multiple")?null:1,B(e.children,(e=>{var s,i,n
+"optgroup"===(t=e.tagName.toLowerCase())?((n=f(s=e))[a]=n[a]||s.getAttribute("label")||"",n[c]=n[c]||h++,n[r]=n[r]||s.disabled,n.$order=n.$order||++g,p.optgroups.push(n),i=n[c],B(s.children,(e=>{m(e,i)}))):"option"===t&&m(e)}))})():(()=>{const t=e.getAttribute(i)
+if(t)p.options=JSON.parse(t),B(p.options,(e=>{p.items.push(e[o])}))
+else{var r=e.value.trim()||""
+if(!s.allowEmptyOption&&!r.length)return
+const t=r.split(s.delimiter)
+B(t,(e=>{const t={}
+t[n]=e,t[o]=e,p.options.push(t)})),p.items=t}})(),Object.assign({},re,p,t)}var ae=0
+class ce extends(function(e){return e.plugins={},class extends e{constructor(...e){super(...e),this.plugins={names:[],settings:{},requested:{},loaded:{}}}static define(t,s){e.plugins[t]={name:t,fn:s}}initializePlugins(e){var t,s
+const i=this,n=[]
+if(Array.isArray(e))e.forEach((e=>{"string"==typeof e?n.push(e):(i.plugins.settings[e.name]=e.options,n.push(e.name))}))
+else if(e)for(t in e)e.hasOwnProperty(t)&&(i.plugins.settings[t]=e[t],n.push(t))
+for(;s=n.shift();)i.require(s)}loadPlugin(t){var s=this,i=s.plugins,n=e.plugins[t]
+if(!e.plugins.hasOwnProperty(t))throw new Error('Unable to find "'+t+'" plugin')
+i.requested[t]=!0,i.loaded[t]=n.fn.apply(s,[s.plugins.settings[t]||{}]),i.names.push(t)}require(e){var t=this,s=t.plugins
+if(!t.plugins.loaded.hasOwnProperty(e)){if(s.requested[e])throw new Error('Plugin has circular dependency ("'+e+'")')
+t.loadPlugin(e)}return s.loaded[e]}}}(t)){constructor(e,t){var s
+super(),this.order=0,this.isOpen=!1,this.isDisabled=!1,this.isReadOnly=!1,this.isInvalid=!1,this.isValid=!0,this.isLocked=!1,this.isFocused=!1,this.isInputHidden=!1,this.isSetup=!1,this.ignoreFocus=!1,this.ignoreHover=!1,this.hasOptions=!1,this.lastValue="",this.caretPos=0,this.loading=0,this.loadedSearches={},this.activeOption=null,this.activeItems=[],this.optgroups={},this.options={},this.userOptions={},this.items=[],this.refreshTimeout=null,ae++
+var i=K(e)
+if(i.tomselect)throw new Error("Tom Select already initialized on this element")
+i.tomselect=this,s=(window.getComputedStyle&&window.getComputedStyle(i,null)).getPropertyValue("direction")
+const n=le(i,t)
+this.settings=n,this.input=i,this.tabIndex=i.tabIndex||0,this.is_select_tag="select"===i.tagName.toLowerCase(),this.rtl=/rtl/i.test(s),this.inputId=R(i,"tomselect-"+ae),this.isRequired=i.required,this.sifter=new T(this.options,{diacritics:n.diacritics}),n.mode=n.mode||(1===n.maxItems?"single":"multi"),"boolean"!=typeof n.hideSelected&&(n.hideSelected="multi"===n.mode),"boolean"!=typeof n.hidePlaceholder&&(n.hidePlaceholder="multi"!==n.mode)
+var o=n.createFilter
+"function"!=typeof o&&("string"==typeof o&&(o=new RegExp(o)),o instanceof RegExp?n.createFilter=e=>o.test(e):n.createFilter=e=>this.settings.duplicates||!this.options[e]),this.initializePlugins(n.plugins),this.setupCallbacks(),this.setupTemplates()
+const r=K("<div>"),l=K("<div>"),a=this._render("dropdown"),c=K('<div role="listbox" tabindex="-1">'),d=this.input.getAttribute("class")||"",u=n.mode
+var p
+if(J(r,n.wrapperClass,d,u),J(l,n.controlClass),z(r,l),J(a,n.dropdownClass,u),n.copyClassesToDropdown&&J(a,d),J(c,n.dropdownContentClass),z(a,c),K(n.dropdownParent||r).appendChild(a),Q(n.controlInput)){p=K(n.controlInput)
+B(["autocorrect","autocapitalize","autocomplete","spellcheck"],(e=>{i.getAttribute(e)&&se(p,{[e]:i.getAttribute(e)})})),p.tabIndex=-1,l.appendChild(p),this.focus_node=p}else n.controlInput?(p=K(n.controlInput),this.focus_node=p):(p=K("<input/>"),this.focus_node=l)
+this.wrapper=r,this.dropdown=a,this.dropdown_content=c,this.control=l,this.control_input=p,this.setup()}setup(){const e=this,t=e.settings,s=e.control_input,i=e.dropdown,n=e.dropdown_content,o=e.wrapper,l=e.control,a=e.input,c=e.focus_node,d={passive:!0},u=e.inputId+"-ts-dropdown"
+se(n,{id:u}),se(c,{role:"combobox","aria-haspopup":"listbox","aria-expanded":"false","aria-controls":u})
+const p=R(c,e.inputId+"-ts-control"),h="label[for='"+(e=>e.replace(/['"\\]/g,"\\$&"))(e.inputId)+"']",g=document.querySelector(h),f=e.focus.bind(e)
+if(g){D(g,"click",f),se(g,{for:p})
+const t=R(g,e.inputId+"-ts-label")
+se(c,{"aria-labelledby":t}),se(n,{"aria-labelledby":t})}if(o.style.width=a.style.width,e.plugins.names.length){const t="plugin-"+e.plugins.names.join(" plugin-")
+J([o,i],t)}(null===t.maxItems||t.maxItems>1)&&e.is_select_tag&&se(a,{multiple:"multiple"}),t.placeholder&&se(s,{placeholder:t.placeholder}),!t.splitOn&&t.delimiter&&(t.splitOn=new RegExp("\\s*"+r(t.delimiter)+"+\\s*")),t.load&&t.loadThrottle&&(t.load=$(t.load,t.loadThrottle)),D(i,"mousemove",(()=>{e.ignoreHover=!1})),D(i,"mouseenter",(t=>{var s=Z(t.target,"[data-selectable]",i)
+s&&e.onOptionHover(t,s)}),{capture:!0}),D(i,"click",(t=>{const s=Z(t.target,"[data-selectable]")
+s&&(e.onOptionSelect(t,s),q(t,!0))})),D(l,"click",(t=>{var i=Z(t.target,"[data-ts-item]",l)
+i&&e.onItemSelect(t,i)?q(t,!0):""==s.value&&(e.onClick(),q(t,!0))})),D(c,"keydown",(t=>e.onKeyDown(t))),D(s,"keypress",(t=>e.onKeyPress(t))),D(s,"input",(t=>e.onInput(t))),D(c,"blur",(t=>e.onBlur(t))),D(c,"focus",(t=>e.onFocus(t))),D(s,"paste",(t=>e.onPaste(t)))
+const m=t=>{const n=t.composedPath()[0]
+if(!o.contains(n)&&!i.contains(n))return e.isFocused&&e.blur(),void e.inputState()
+n==s&&e.isOpen?t.stopPropagation():q(t,!0)},v=()=>{e.isOpen&&e.positionDropdown()}
+D(document,"mousedown",m),D(window,"scroll",v,d),D(window,"resize",v,d),this._destroy=()=>{document.removeEventListener("mousedown",m),window.removeEventListener("scroll",v),window.removeEventListener("resize",v),g&&g.removeEventListener("click",f)},this.revertSettings={innerHTML:a.innerHTML,tabIndex:a.tabIndex},a.tabIndex=-1,a.insertAdjacentElement("afterend",e.wrapper),e.sync(!1),t.items=[],delete t.optgroups,delete t.options,D(a,"invalid",(()=>{e.isValid&&(e.isValid=!1,e.isInvalid=!0,e.refreshState())})),e.updateOriginalInput(),e.refreshItems(),e.close(!1),e.inputState(),e.isSetup=!0,a.disabled?e.disable():a.readOnly?e.setReadOnly(!0):e.enable(),e.on("change",this.onChange),J(a,"tomselected","ts-hidden-accessible"),e.trigger("initialize"),!0===t.preload&&e.preload()}setupOptions(e=[],t=[]){this.addOptions(e),B(t,(e=>{this.registerOptionGroup(e)}))}setupTemplates(){var e=this,t=e.settings.labelField,s=e.settings.optgroupLabelField,i={optgroup:e=>{let t=document.createElement("div")
+return t.className="optgroup",t.appendChild(e.options),t},optgroup_header:(e,t)=>'<div class="optgroup-header">'+t(e[s])+"</div>",option:(e,s)=>"<div>"+s(e[t])+"</div>",item:(e,s)=>"<div>"+s(e[t])+"</div>",option_create:(e,t)=>'<div class="create">Add <strong>'+t(e.input)+"</strong>&hellip;</div>",no_results:()=>'<div class="no-results">No results found</div>',loading:()=>'<div class="spinner"></div>',not_loading:()=>{},dropdown:()=>"<div></div>"}
+e.settings.render=Object.assign({},i,e.settings.render)}setupCallbacks(){var e,t,s={initialize:"onInitialize",change:"onChange",item_add:"onItemAdd",item_remove:"onItemRemove",item_select:"onItemSelect",clear:"onClear",option_add:"onOptionAdd",option_remove:"onOptionRemove",option_clear:"onOptionClear",optgroup_add:"onOptionGroupAdd",optgroup_remove:"onOptionGroupRemove",optgroup_clear:"onOptionGroupClear",dropdown_open:"onDropdownOpen",dropdown_close:"onDropdownClose",type:"onType",load:"onLoad",focus:"onFocus",blur:"onBlur"}
+for(e in s)(t=this.settings[s[e]])&&this.on(e,t)}sync(e=!0){const t=this,s=e?le(t.input,{delimiter:t.settings.delimiter}):t.settings
+t.setupOptions(s.options,s.optgroups),t.setValue(s.items||[],!0),t.lastQuery=null}onClick(){var e=this
+if(e.activeItems.length>0)return e.clearActiveItems(),void e.focus()
+e.isFocused&&e.isOpen?e.blur():e.focus()}onMouseDown(){}onChange(){G(this.input,"input"),G(this.input,"change")}onPaste(e){var t=this
+t.isInputHidden||t.isLocked?q(e):t.settings.splitOn&&setTimeout((()=>{var e=t.inputValue()
+if(e.match(t.settings.splitOn)){var s=e.trim().split(t.settings.splitOn)
+B(s,(e=>{P(e)&&(this.options[e]?t.addItem(e):t.createItem(e))}))}}),0)}onKeyPress(e){var t=this
+if(!t.isLocked){var s=String.fromCharCode(e.keyCode||e.which)
+return t.settings.create&&"multi"===t.settings.mode&&s===t.settings.delimiter?(t.createItem(),void q(e)):void 0}q(e)}onKeyDown(e){var t=this
+if(t.ignoreHover=!0,t.isLocked)9!==e.keyCode&&q(e)
+else{switch(e.keyCode){case 65:if(H(oe,e)&&""==t.control_input.value)return q(e),void t.selectAll()
+break
+case 27:return t.isOpen&&(q(e,!0),t.close()),void t.clearActiveItems()
+case 40:if(!t.isOpen&&t.hasOptions)t.open()
+else if(t.activeOption){let e=t.getAdjacent(t.activeOption,1)
+e&&t.setActiveOption(e)}return void q(e)
+case 38:if(t.activeOption){let e=t.getAdjacent(t.activeOption,-1)
+e&&t.setActiveOption(e)}return void q(e)
+case 13:return void(t.canSelect(t.activeOption)?(t.onOptionSelect(e,t.activeOption),q(e)):(t.settings.create&&t.createItem()||document.activeElement==t.control_input&&t.isOpen)&&q(e))
+case 37:return void t.advanceSelection(-1,e)
+case 39:return void t.advanceSelection(1,e)
+case 9:return void(t.settings.selectOnTab&&(t.canSelect(t.activeOption)&&(t.onOptionSelect(e,t.activeOption),q(e)),t.settings.create&&t.createItem()&&q(e)))
+case 8:case 46:return void t.deleteSelection(e)}t.isInputHidden&&!H(oe,e)&&q(e)}}onInput(e){if(this.isLocked)return
+const t=this.inputValue()
+this.lastValue!==t&&(this.lastValue=t,""!=t?(this.refreshTimeout&&window.clearTimeout(this.refreshTimeout),this.refreshTimeout=((e,t)=>t>0?window.setTimeout(e,t):(e.call(null),null))((()=>{this.refreshTimeout=null,this._onInput()}),this.settings.refreshThrottle)):this._onInput())}_onInput(){const e=this.lastValue
+this.settings.shouldLoad.call(this,e)&&this.load(e),this.refreshOptions(),this.trigger("type",e)}onOptionHover(e,t){this.ignoreHover||this.setActiveOption(t,!1)}onFocus(e){var t=this,s=t.isFocused
+if(t.isDisabled||t.isReadOnly)return t.blur(),void q(e)
+t.ignoreFocus||(t.isFocused=!0,"focus"===t.settings.preload&&t.preload(),s||t.trigger("focus"),t.activeItems.length||(t.inputState(),t.refreshOptions(!!t.settings.openOnFocus)),t.refreshState())}onBlur(e){if(!1!==document.hasFocus()){var t=this
+if(t.isFocused){t.isFocused=!1,t.ignoreFocus=!1
+var s=()=>{t.close(),t.setActiveItem(),t.setCaret(t.items.length),t.trigger("blur")}
+t.settings.create&&t.settings.createOnBlur?t.createItem(null,s):s()}}}onOptionSelect(e,t){var s,i=this
+t.parentElement&&t.parentElement.matches("[data-disabled]")||(t.classList.contains("create")?i.createItem(null,(()=>{i.settings.closeAfterSelect&&i.close()})):void 0!==(s=t.dataset.value)&&(i.lastQuery=null,i.addItem(s),i.settings.closeAfterSelect&&i.close(),!i.settings.hideSelected&&e.type&&/click/.test(e.type)&&i.setActiveOption(t)))}canSelect(e){return!!(this.isOpen&&e&&this.dropdown_content.contains(e))}onItemSelect(e,t){var s=this
+return!s.isLocked&&"multi"===s.settings.mode&&(q(e),s.setActiveItem(t,e),!0)}canLoad(e){return!!this.settings.load&&!this.loadedSearches.hasOwnProperty(e)}load(e){const t=this
+if(!t.canLoad(e))return
+J(t.wrapper,t.settings.loadingClass),t.loading++
+const s=t.loadCallback.bind(t)
+t.settings.load.call(t,e,s)}loadCallback(e,t){const s=this
+s.loading=Math.max(s.loading-1,0),s.lastQuery=null,s.clearActiveOption(),s.setupOptions(e,t),s.refreshOptions(s.isFocused&&!s.isInputHidden),s.loading||W(s.wrapper,s.settings.loadingClass),s.trigger("load",e,t)}preload(){var e=this.wrapper.classList
+e.contains("preloaded")||(e.add("preloaded"),this.load(""))}setTextboxValue(e=""){var t=this.control_input
+t.value!==e&&(t.value=e,G(t,"update"),this.lastValue=e)}getValue(){return this.is_select_tag&&this.input.hasAttribute("multiple")?this.items:this.items.join(this.settings.delimiter)}setValue(e,t){V(this,t?[]:["change"],(()=>{this.clear(t),this.addItems(e,t)}))}setMaxItems(e){0===e&&(e=null),this.settings.maxItems=e,this.refreshState()}setActiveItem(e,t){var s,i,n,o,r,l,a=this
+if("single"!==a.settings.mode){if(!e)return a.clearActiveItems(),void(a.isFocused&&a.inputState())
+if("click"===(s=t&&t.type.toLowerCase())&&H("shiftKey",t)&&a.activeItems.length){for(l=a.getLastActive(),(n=Array.prototype.indexOf.call(a.control.children,l))>(o=Array.prototype.indexOf.call(a.control.children,e))&&(r=n,n=o,o=r),i=n;i<=o;i++)e=a.control.children[i],-1===a.activeItems.indexOf(e)&&a.setActiveItemClass(e)
+q(t)}else"click"===s&&H(oe,t)||"keydown"===s&&H("shiftKey",t)?e.classList.contains("active")?a.removeActiveItem(e):a.setActiveItemClass(e):(a.clearActiveItems(),a.setActiveItemClass(e))
+a.inputState(),a.isFocused||a.focus()}}setActiveItemClass(e){const t=this,s=t.control.querySelector(".last-active")
+s&&W(s,"last-active"),J(e,"active last-active"),t.trigger("item_select",e),-1==t.activeItems.indexOf(e)&&t.activeItems.push(e)}removeActiveItem(e){var t=this.activeItems.indexOf(e)
+this.activeItems.splice(t,1),W(e,"active")}clearActiveItems(){W(this.activeItems,"active"),this.activeItems=[]}setActiveOption(e,t=!0){e!==this.activeOption&&(this.clearActiveOption(),e&&(this.activeOption=e,se(this.focus_node,{"aria-activedescendant":e.getAttribute("id")}),se(e,{"aria-selected":"true"}),J(e,"active"),t&&this.scrollToOption(e)))}scrollToOption(e,t){if(!e)return
+const s=this.dropdown_content,i=s.clientHeight,n=s.scrollTop||0,o=e.offsetHeight,r=e.getBoundingClientRect().top-s.getBoundingClientRect().top+n
+r+o>i+n?this.scroll(r-i+o,t):r<n&&this.scroll(r,t)}scroll(e,t){const s=this.dropdown_content
+t&&(s.style.scrollBehavior=t),s.scrollTop=e,s.style.scrollBehavior=""}clearActiveOption(){this.activeOption&&(W(this.activeOption,"active"),se(this.activeOption,{"aria-selected":null})),this.activeOption=null,se(this.focus_node,{"aria-activedescendant":null})}selectAll(){const e=this
+if("single"===e.settings.mode)return
+const t=e.controlChildren()
+t.length&&(e.inputState(),e.close(),e.activeItems=t,B(t,(t=>{e.setActiveItemClass(t)})))}inputState(){var e=this
+e.control.contains(e.control_input)&&(se(e.control_input,{placeholder:e.settings.placeholder}),e.activeItems.length>0||!e.isFocused&&e.settings.hidePlaceholder&&e.items.length>0?(e.setTextboxValue(),e.isInputHidden=!0):(e.settings.hidePlaceholder&&e.items.length>0&&se(e.control_input,{placeholder:""}),e.isInputHidden=!1),e.wrapper.classList.toggle("input-hidden",e.isInputHidden))}inputValue(){return this.control_input.value.trim()}focus(){var e=this
+e.isDisabled||e.isReadOnly||(e.ignoreFocus=!0,e.control_input.offsetWidth?e.control_input.focus():e.focus_node.focus(),setTimeout((()=>{e.ignoreFocus=!1,e.onFocus()}),0))}blur(){this.focus_node.blur(),this.onBlur()}getScoreFunction(e){return this.sifter.getScoreFunction(e,this.getSearchOptions())}getSearchOptions(){var e=this.settings,t=e.sortField
+return"string"==typeof e.sortField&&(t=[{field:e.sortField}]),{fields:e.searchField,conjunction:e.searchConjunction,sort:t,nesting:e.nesting}}search(e){var t,s,i=this,n=this.getSearchOptions()
+if(i.settings.score&&"function"!=typeof(s=i.settings.score.call(i,e)))throw new Error('Tom Select "score" setting must be a function that returns a function')
+return e!==i.lastQuery?(i.lastQuery=e,t=i.sifter.search(e,Object.assign(n,{score:s})),i.currentResults=t):t=Object.assign({},i.currentResults),i.settings.hideSelected&&(t.items=t.items.filter((e=>{let t=P(e.id)
+return!(t&&-1!==i.items.indexOf(t))}))),t}refreshOptions(e=!0){var t,s,i,n,o,r,l,a,c,d
+const u={},p=[]
+var h=this,g=h.inputValue()
+const f=g===h.lastQuery||""==g&&null==h.lastQuery
+var m=h.search(g),v=null,y=h.settings.shouldOpen||!1,O=h.dropdown_content
+f&&(v=h.activeOption)&&(c=v.closest("[data-group]")),n=m.items.length,"number"==typeof h.settings.maxOptions&&(n=Math.min(n,h.settings.maxOptions)),n>0&&(y=!0)
+const b=(e,t)=>{let s=u[e]
+if(void 0!==s){let e=p[s]
+if(void 0!==e)return[s,e.fragment]}let i=document.createDocumentFragment()
+return s=p.length,p.push({fragment:i,order:t,optgroup:e}),[s,i]}
+for(t=0;t<n;t++){let e=m.items[t]
+if(!e)continue
+let n=e.id,l=h.options[n]
+if(void 0===l)continue
+let a=N(n),d=h.getOption(a,!0)
+for(h.settings.hideSelected||d.classList.toggle("selected",h.items.includes(a)),o=l[h.settings.optgroupField]||"",s=0,i=(r=Array.isArray(o)?o:[o])&&r.length;s<i;s++){o=r[s]
+let e=l.$order,t=h.optgroups[o]
+void 0===t?o="":e=t.$order
+const[i,a]=b(o,e)
+s>0&&(d=d.cloneNode(!0),se(d,{id:l.$id+"-clone-"+s,"aria-selected":null}),d.classList.add("ts-cloned"),W(d,"active"),h.activeOption&&h.activeOption.dataset.value==n&&c&&c.dataset.group===o.toString()&&(v=d)),a.appendChild(d),""!=o&&(u[o]=i)}}var w
+h.settings.lockOptgroupOrder&&p.sort(((e,t)=>e.order-t.order)),l=document.createDocumentFragment(),B(p,(e=>{let t=e.fragment,s=e.optgroup
+if(!t||!t.children.length)return
+let i=h.optgroups[s]
+if(void 0!==i){let e=document.createDocumentFragment(),s=h.render("optgroup_header",i)
+z(e,s),z(e,t)
+let n=h.render("optgroup",{group:i,options:e})
+z(l,n)}else z(l,t)})),O.innerHTML="",z(O,l),h.settings.highlight&&(w=O.querySelectorAll("span.highlight"),Array.prototype.forEach.call(w,(function(e){var t=e.parentNode
+t.replaceChild(e.firstChild,e),t.normalize()})),m.query.length&&m.tokens.length&&B(m.tokens,(e=>{ne(O,e.regex)})))
+var _=e=>{let t=h.render(e,{input:g})
+return t&&(y=!0,O.insertBefore(t,O.firstChild)),t}
+if(h.loading?_("loading"):h.settings.shouldLoad.call(h,g)?0===m.items.length&&_("no_results"):_("not_loading"),(a=h.canCreate(g))&&(d=_("option_create")),h.hasOptions=m.items.length>0||a,y){if(m.items.length>0){if(v||"single"!==h.settings.mode||null==h.items[0]||(v=h.getOption(h.items[0])),!O.contains(v)){let e=0
+d&&!h.settings.addPrecedence&&(e=1),v=h.selectable()[e]}}else d&&(v=d)
+e&&!h.isOpen&&(h.open(),h.scrollToOption(v,"auto")),h.setActiveOption(v)}else h.clearActiveOption(),e&&h.isOpen&&h.close(!1)}selectable(){return this.dropdown_content.querySelectorAll("[data-selectable]")}addOption(e,t=!1){const s=this
+if(Array.isArray(e))return s.addOptions(e,t),!1
+const i=P(e[s.settings.valueField])
+return null!==i&&!s.options.hasOwnProperty(i)&&(e.$order=e.$order||++s.order,e.$id=s.inputId+"-opt-"+e.$order,s.options[i]=e,s.lastQuery=null,t&&(s.userOptions[i]=t,s.trigger("option_add",i,e)),i)}addOptions(e,t=!1){B(e,(e=>{this.addOption(e,t)}))}registerOption(e){return this.addOption(e)}registerOptionGroup(e){var t=P(e[this.settings.optgroupValueField])
+return null!==t&&(e.$order=e.$order||++this.order,this.optgroups[t]=e,t)}addOptionGroup(e,t){var s
+t[this.settings.optgroupValueField]=e,(s=this.registerOptionGroup(t))&&this.trigger("optgroup_add",s,t)}removeOptionGroup(e){this.optgroups.hasOwnProperty(e)&&(delete this.optgroups[e],this.clearCache(),this.trigger("optgroup_remove",e))}clearOptionGroups(){this.optgroups={},this.clearCache(),this.trigger("optgroup_clear")}updateOption(e,t){const s=this
+var i,n
+const o=P(e),r=P(t[s.settings.valueField])
+if(null===o)return
+const l=s.options[o]
+if(null==l)return
+if("string"!=typeof r)throw new Error("Value must be set in option data")
+const a=s.getOption(o),c=s.getItem(o)
+if(t.$order=t.$order||l.$order,delete s.options[o],s.uncacheValue(r),s.options[r]=t,a){if(s.dropdown_content.contains(a)){const e=s._render("option",t)
+ie(a,e),s.activeOption===a&&s.setActiveOption(e)}a.remove()}c&&(-1!==(n=s.items.indexOf(o))&&s.items.splice(n,1,r),i=s._render("item",t),c.classList.contains("active")&&J(i,"active"),ie(c,i)),s.lastQuery=null}removeOption(e,t){const s=this
+e=N(e),s.uncacheValue(e),delete s.userOptions[e],delete s.options[e],s.lastQuery=null,s.trigger("option_remove",e),s.removeItem(e,t)}clearOptions(e){const t=(e||this.clearFilter).bind(this)
+this.loadedSearches={},this.userOptions={},this.clearCache()
+const s={}
+B(this.options,((e,i)=>{t(e,i)&&(s[i]=e)})),this.options=this.sifter.items=s,this.lastQuery=null,this.trigger("option_clear")}clearFilter(e,t){return this.items.indexOf(t)>=0}getOption(e,t=!1){const s=P(e)
+if(null===s)return null
+const i=this.options[s]
+if(null!=i){if(i.$div)return i.$div
+if(t)return this._render("option",i)}return null}getAdjacent(e,t,s="option"){var i
+if(!e)return null
+i="item"==s?this.controlChildren():this.dropdown_content.querySelectorAll("[data-selectable]")
+for(let s=0;s<i.length;s++)if(i[s]==e)return t>0?i[s+1]:i[s-1]
+return null}getItem(e){if("object"==typeof e)return e
+var t=P(e)
+return null!==t?this.control.querySelector(`[data-value="${M(t)}"]`):null}addItems(e,t){var s=this,i=Array.isArray(e)?e:[e]
+const n=(i=i.filter((e=>-1===s.items.indexOf(e))))[i.length-1]
+i.forEach((e=>{s.isPending=e!==n,s.addItem(e,t)}))}addItem(e,t){V(this,t?[]:["change","dropdown_close"],(()=>{var s,i
+const n=this,o=n.settings.mode,r=P(e)
+if((!r||-1===n.items.indexOf(r)||("single"===o&&n.close(),"single"!==o&&n.settings.duplicates))&&null!==r&&n.options.hasOwnProperty(r)&&("single"===o&&n.clear(t),"multi"!==o||!n.isFull())){if(s=n._render("item",n.options[r]),n.control.contains(s)&&(s=s.cloneNode(!0)),i=n.isFull(),n.items.splice(n.caretPos,0,r),n.insertAtCaret(s),n.isSetup){if(!n.isPending&&n.settings.hideSelected){let e=n.getOption(r),t=n.getAdjacent(e,1)
+t&&n.setActiveOption(t)}n.isPending||n.settings.closeAfterSelect||n.refreshOptions(n.isFocused&&"single"!==o),0!=n.settings.closeAfterSelect&&n.isFull()?n.close():n.isPending||n.positionDropdown(),n.trigger("item_add",r,s),n.isPending||n.updateOriginalInput({silent:t})}(!n.isPending||!i&&n.isFull())&&(n.inputState(),n.refreshState())}}))}removeItem(e=null,t){const s=this
+if(!(e=s.getItem(e)))return
+var i,n
+const o=e.dataset.value
+i=te(e),e.remove(),e.classList.contains("active")&&(n=s.activeItems.indexOf(e),s.activeItems.splice(n,1),W(e,"active")),s.items.splice(i,1),s.lastQuery=null,!s.settings.persist&&s.userOptions.hasOwnProperty(o)&&s.removeOption(o,t),i<s.caretPos&&s.setCaret(s.caretPos-1),s.updateOriginalInput({silent:t}),s.refreshState(),s.positionDropdown(),s.trigger("item_remove",o,e)}createItem(e=null,t=()=>{}){3===arguments.length&&(t=arguments[2]),"function"!=typeof t&&(t=()=>{})
+var s,i=this,n=i.caretPos
+if(e=e||i.inputValue(),!i.canCreate(e))return t(),!1
+i.lock()
+var o=!1,r=e=>{if(i.unlock(),!e||"object"!=typeof e)return t()
+var s=P(e[i.settings.valueField])
+if("string"!=typeof s)return t()
+i.setTextboxValue(),i.addOption(e,!0),i.setCaret(n),i.addItem(s),t(e),o=!0}
+return s="function"==typeof i.settings.create?i.settings.create.call(this,e,r):{[i.settings.labelField]:e,[i.settings.valueField]:e},o||r(s),!0}refreshItems(){var e=this
+e.lastQuery=null,e.isSetup&&e.addItems(e.items),e.updateOriginalInput(),e.refreshState()}refreshState(){const e=this
+e.refreshValidityState()
+const t=e.isFull(),s=e.isLocked
+e.wrapper.classList.toggle("rtl",e.rtl)
+const i=e.wrapper.classList
+var n
+i.toggle("focus",e.isFocused),i.toggle("disabled",e.isDisabled),i.toggle("readonly",e.isReadOnly),i.toggle("required",e.isRequired),i.toggle("invalid",!e.isValid),i.toggle("locked",s),i.toggle("full",t),i.toggle("input-active",e.isFocused&&!e.isInputHidden),i.toggle("dropdown-active",e.isOpen),i.toggle("has-options",(n=e.options,0===Object.keys(n).length)),i.toggle("has-items",e.items.length>0)}refreshValidityState(){var e=this
+e.input.validity&&(e.isValid=e.input.validity.valid,e.isInvalid=!e.isValid)}isFull(){return null!==this.settings.maxItems&&this.items.length>=this.settings.maxItems}updateOriginalInput(e={}){const t=this
+var s,i
+const n=t.input.querySelector('option[value=""]')
+if(t.is_select_tag){const o=[],r=t.input.querySelectorAll("option:checked").length
+function l(e,s,i){return e||(e=K('<option value="'+j(s)+'">'+j(i)+"</option>")),e!=n&&t.input.append(e),o.push(e),(e!=n||r>0)&&(e.selected=!0),e}t.input.querySelectorAll("option:checked").forEach((e=>{e.selected=!1})),0==t.items.length&&"single"==t.settings.mode?l(n,"",""):t.items.forEach((e=>{if(s=t.options[e],i=s[t.settings.labelField]||"",o.includes(s.$option)){l(t.input.querySelector(`option[value="${M(e)}"]:not(:checked)`),e,i)}else s.$option=l(s.$option,e,i)}))}else t.input.value=t.getValue()
+t.isSetup&&(e.silent||t.trigger("change",t.getValue()))}open(){var e=this
+e.isLocked||e.isOpen||"multi"===e.settings.mode&&e.isFull()||(e.isOpen=!0,se(e.focus_node,{"aria-expanded":"true"}),e.refreshState(),U(e.dropdown,{visibility:"hidden",display:"block"}),e.positionDropdown(),U(e.dropdown,{visibility:"visible",display:"block"}),e.focus(),e.trigger("dropdown_open",e.dropdown))}close(e=!0){var t=this,s=t.isOpen
+e&&(t.setTextboxValue(),"single"===t.settings.mode&&t.items.length&&t.inputState()),t.isOpen=!1,se(t.focus_node,{"aria-expanded":"false"}),U(t.dropdown,{display:"none"}),t.settings.hideSelected&&t.clearActiveOption(),t.refreshState(),s&&t.trigger("dropdown_close",t.dropdown)}positionDropdown(){if("body"===this.settings.dropdownParent){var e=this.control,t=e.getBoundingClientRect(),s=e.offsetHeight+t.top+window.scrollY,i=t.left+window.scrollX
+U(this.dropdown,{width:t.width+"px",top:s+"px",left:i+"px"})}}clear(e){var t=this
+if(t.items.length){var s=t.controlChildren()
+B(s,(e=>{t.removeItem(e,!0)})),t.inputState(),e||t.updateOriginalInput(),t.trigger("clear")}}insertAtCaret(e){const t=this,s=t.caretPos,i=t.control
+i.insertBefore(e,i.children[s]||null),t.setCaret(s+1)}deleteSelection(e){var t,s,i,n,o,r=this
+t=e&&8===e.keyCode?-1:1,s={start:(o=r.control_input).selectionStart||0,length:(o.selectionEnd||0)-(o.selectionStart||0)}
+const l=[]
+if(r.activeItems.length)n=ee(r.activeItems,t),i=te(n),t>0&&i++,B(r.activeItems,(e=>l.push(e)))
+else if((r.isFocused||"single"===r.settings.mode)&&r.items.length){const e=r.controlChildren()
+let i
+t<0&&0===s.start&&0===s.length?i=e[r.caretPos-1]:t>0&&s.start===r.inputValue().length&&(i=e[r.caretPos]),void 0!==i&&l.push(i)}if(!r.shouldDelete(l,e))return!1
+for(q(e,!0),void 0!==i&&r.setCaret(i);l.length;)r.removeItem(l.pop())
+return r.inputState(),r.positionDropdown(),r.refreshOptions(!1),!0}shouldDelete(e,t){const s=e.map((e=>e.dataset.value))
+return!(!s.length||"function"==typeof this.settings.onDelete&&!1===this.settings.onDelete(s,t))}advanceSelection(e,t){var s,i,n=this
+n.rtl&&(e*=-1),n.inputValue().length||(H(oe,t)||H("shiftKey",t)?(i=(s=n.getLastActive(e))?s.classList.contains("active")?n.getAdjacent(s,e,"item"):s:e>0?n.control_input.nextElementSibling:n.control_input.previousElementSibling)&&(i.classList.contains("active")&&n.removeActiveItem(s),n.setActiveItemClass(i)):n.moveCaret(e))}moveCaret(e){}getLastActive(e){let t=this.control.querySelector(".last-active")
+if(t)return t
+var s=this.control.querySelectorAll(".active")
+return s?ee(s,e):void 0}setCaret(e){this.caretPos=this.items.length}controlChildren(){return Array.from(this.control.querySelectorAll("[data-ts-item]"))}lock(){this.setLocked(!0)}unlock(){this.setLocked(!1)}setLocked(e=this.isReadOnly||this.isDisabled){this.isLocked=e,this.refreshState()}disable(){this.setDisabled(!0),this.close()}enable(){this.setDisabled(!1)}setDisabled(e){this.focus_node.tabIndex=e?-1:this.tabIndex,this.isDisabled=e,this.input.disabled=e,this.control_input.disabled=e,this.setLocked()}setReadOnly(e){this.isReadOnly=e,this.input.readOnly=e,this.control_input.readOnly=e,this.setLocked()}destroy(){var e=this,t=e.revertSettings
+e.trigger("destroy"),e.off(),e.wrapper.remove(),e.dropdown.remove(),e.input.innerHTML=t.innerHTML,e.input.tabIndex=t.tabIndex,W(e.input,"tomselected","ts-hidden-accessible"),e._destroy(),delete e.input.tomselect}render(e,t){var s,i
+const n=this
+if("function"!=typeof this.settings.render[e])return null
+if(!(i=n.settings.render[e].call(this,t,j)))return null
+if(i=K(i),"option"===e||"option_create"===e?t[n.settings.disabledField]?se(i,{"aria-disabled":"true"}):se(i,{"data-selectable":""}):"optgroup"===e&&(s=t.group[n.settings.optgroupValueField],se(i,{"data-group":s}),t.group[n.settings.disabledField]&&se(i,{"data-disabled":""})),"option"===e||"item"===e){const s=N(t[n.settings.valueField])
+se(i,{"data-value":s}),"item"===e?(J(i,n.settings.itemClass),se(i,{"data-ts-item":""})):(J(i,n.settings.optionClass),se(i,{role:"option",id:t.$id}),t.$div=i,n.options[s]=t)}return i}_render(e,t){const s=this.render(e,t)
+if(null==s)throw"HTMLElement expected"
+return s}clearCache(){B(this.options,(e=>{e.$div&&(e.$div.remove(),delete e.$div)}))}uncacheValue(e){const t=this.getOption(e)
+t&&t.remove()}canCreate(e){return this.settings.create&&e.length>0&&this.settings.createFilter.call(this,e)}hook(e,t,s){var i=this,n=i[t]
+i[t]=function(){var t,o
+return"after"===e&&(t=n.apply(i,arguments)),o=s.apply(i,arguments),"instead"===e?o:("before"===e&&(t=n.apply(i,arguments)),t)}}}return ce.define("change_listener",(function(){D(this.input,"change",(()=>{this.sync()}))})),ce.define("checkbox_options",(function(e){var t=this,s=t.onOptionSelect
+t.settings.hideSelected=!1
+const i=Object.assign({className:"tomselect-checkbox",checkedClassNames:void 0,uncheckedClassNames:void 0},e)
+var n=function(e,t){t?(e.checked=!0,i.uncheckedClassNames&&e.classList.remove(...i.uncheckedClassNames),i.checkedClassNames&&e.classList.add(...i.checkedClassNames)):(e.checked=!1,i.checkedClassNames&&e.classList.remove(...i.checkedClassNames),i.uncheckedClassNames&&e.classList.add(...i.uncheckedClassNames))},o=function(e){setTimeout((()=>{var t=e.querySelector("input."+i.className)
+t instanceof HTMLInputElement&&n(t,e.classList.contains("selected"))}),1)}
+t.hook("after","setupTemplates",(()=>{var e=t.settings.render.option
+t.settings.render.option=(s,o)=>{var r=K(e.call(t,s,o)),l=document.createElement("input")
+i.className&&l.classList.add(i.className),l.addEventListener("click",(function(e){q(e)})),l.type="checkbox"
+const a=P(s[t.settings.valueField])
+return n(l,!!(a&&t.items.indexOf(a)>-1)),r.prepend(l),r}})),t.on("item_remove",(e=>{var s=t.getOption(e)
+s&&(s.classList.remove("selected"),o(s))})),t.on("item_add",(e=>{var s=t.getOption(e)
+s&&o(s)})),t.hook("instead","onOptionSelect",((e,i)=>{if(i.classList.contains("selected"))return i.classList.remove("selected"),t.removeItem(i.dataset.value),t.refreshOptions(),void q(e,!0)
+s.call(t,e,i),o(i)}))})),ce.define("clear_button",(function(e){const t=this,s=Object.assign({className:"clear-button",title:"Clear All",html:e=>`<div class="${e.className}" title="${e.title}">&#10799;</div>`},e)
+t.on("initialize",(()=>{var e=K(s.html(s))
+e.addEventListener("click",(e=>{t.isLocked||(t.clear(),"single"===t.settings.mode&&t.settings.allowEmptyOption&&t.addItem(""),e.preventDefault(),e.stopPropagation())})),t.control.appendChild(e)}))})),ce.define("drag_drop",(function(){var e=this
+if("multi"!==e.settings.mode)return
+var t=e.lock,s=e.unlock
+let i,n=!0
+e.hook("after","setupTemplates",(()=>{var t=e.settings.render.item
+e.settings.render.item=(s,o)=>{const r=K(t.call(e,s,o))
+se(r,{draggable:"true"})
+const l=e=>{e.preventDefault(),r.classList.add("ts-drag-over"),a(r,i)},a=(e,t)=>{var s,i,n
+void 0!==t&&(((e,t)=>{do{var s
+if(e==(t=null==(s=t)?void 0:s.previousElementSibling))return!0}while(t&&t.previousElementSibling)
+return!1})(t,r)?(i=t,null==(n=(s=e).parentNode)||n.insertBefore(i,s.nextSibling)):((e,t)=>{var s
+null==(s=e.parentNode)||s.insertBefore(t,e)})(e,t))}
+return D(r,"mousedown",(e=>{n||q(e),e.stopPropagation()})),D(r,"dragstart",(e=>{i=r,setTimeout((()=>{r.classList.add("ts-dragging")}),0)})),D(r,"dragenter",l),D(r,"dragover",l),D(r,"dragleave",(()=>{r.classList.remove("ts-drag-over")})),D(r,"dragend",(()=>{var t
+document.querySelectorAll(".ts-drag-over").forEach((e=>e.classList.remove("ts-drag-over"))),null==(t=i)||t.classList.remove("ts-dragging"),i=void 0
+var s=[]
+e.control.querySelectorAll("[data-value]").forEach((e=>{if(e.dataset.value){let t=e.dataset.value
+t&&s.push(t)}})),e.setValue(s)})),r}})),e.hook("instead","lock",(()=>(n=!1,t.call(e)))),e.hook("instead","unlock",(()=>(n=!0,s.call(e))))})),ce.define("dropdown_header",(function(e){const t=this,s=Object.assign({title:"Untitled",headerClass:"dropdown-header",titleRowClass:"dropdown-header-title",labelClass:"dropdown-header-label",closeClass:"dropdown-header-close",html:e=>'<div class="'+e.headerClass+'"><div class="'+e.titleRowClass+'"><span class="'+e.labelClass+'">'+e.title+'</span><a class="'+e.closeClass+'">&times;</a></div></div>'},e)
+t.on("initialize",(()=>{var e=K(s.html(s)),i=e.querySelector("."+s.closeClass)
+i&&i.addEventListener("click",(e=>{q(e,!0),t.close()})),t.dropdown.insertBefore(e,t.dropdown.firstChild)}))})),ce.define("caret_position",(function(){var e=this
+e.hook("instead","setCaret",(t=>{"single"!==e.settings.mode&&e.control.contains(e.control_input)?(t=Math.max(0,Math.min(e.items.length,t)))==e.caretPos||e.isPending||e.controlChildren().forEach(((s,i)=>{i<t?e.control_input.insertAdjacentElement("beforebegin",s):e.control.appendChild(s)})):t=e.items.length,e.caretPos=t})),e.hook("instead","moveCaret",(t=>{if(!e.isFocused)return
+const s=e.getLastActive(t)
+if(s){const i=te(s)
+e.setCaret(t>0?i+1:i),e.setActiveItem(),W(s,"last-active")}else e.setCaret(e.caretPos+t)}))})),ce.define("dropdown_input",(function(){const e=this
+e.settings.shouldOpen=!0,e.hook("before","setup",(()=>{e.focus_node=e.control,J(e.control_input,"dropdown-input")
+const t=K('<div class="dropdown-input-wrap">')
+t.append(e.control_input),e.dropdown.insertBefore(t,e.dropdown.firstChild)
+const s=K('<input class="items-placeholder" tabindex="-1" />')
+s.placeholder=e.settings.placeholder||"",e.control.append(s)})),e.on("initialize",(()=>{e.control_input.addEventListener("keydown",(t=>{switch(t.keyCode){case 27:return e.isOpen&&(q(t,!0),e.close()),void e.clearActiveItems()
+case 9:e.focus_node.tabIndex=-1}return e.onKeyDown.call(e,t)})),e.on("blur",(()=>{e.focus_node.tabIndex=e.isDisabled?-1:e.tabIndex})),e.on("dropdown_open",(()=>{e.control_input.focus()}))
+const t=e.onBlur
+e.hook("instead","onBlur",(s=>{if(!s||s.relatedTarget!=e.control_input)return t.call(e)})),D(e.control_input,"blur",(()=>e.onBlur())),e.hook("before","close",(()=>{e.isOpen&&e.focus_node.focus({preventScroll:!0})}))}))})),ce.define("input_autogrow",(function(){var e=this
+e.on("initialize",(()=>{var t=document.createElement("span"),s=e.control_input
+t.style.cssText="position:absolute; top:-99999px; left:-99999px; width:auto; padding:0; white-space:pre; ",e.wrapper.appendChild(t)
+for(const e of["letterSpacing","fontSize","fontFamily","fontWeight","textTransform"])t.style[e]=s.style[e]
+var i=()=>{t.textContent=s.value,s.style.width=t.clientWidth+"px"}
+i(),e.on("update item_add item_remove",i),D(s,"input",i),D(s,"keyup",i),D(s,"blur",i),D(s,"update",i)}))})),ce.define("no_backspace_delete",(function(){var e=this,t=e.deleteSelection
+this.hook("instead","deleteSelection",(s=>!!e.activeItems.length&&t.call(e,s)))})),ce.define("no_active_items",(function(){this.hook("instead","setActiveItem",(()=>{})),this.hook("instead","selectAll",(()=>{}))})),ce.define("optgroup_columns",(function(){var e=this,t=e.onKeyDown
+e.hook("instead","onKeyDown",(s=>{var i,n,o,r
+if(!e.isOpen||37!==s.keyCode&&39!==s.keyCode)return t.call(e,s)
+e.ignoreHover=!0,r=Z(e.activeOption,"[data-group]"),i=te(e.activeOption,"[data-selectable]"),r&&(r=37===s.keyCode?r.previousSibling:r.nextSibling)&&(n=(o=r.querySelectorAll("[data-selectable]"))[Math.min(o.length-1,i)])&&e.setActiveOption(n)}))})),ce.define("remove_button",(function(e){const t=Object.assign({label:"&times;",title:"Remove",className:"remove",append:!0},e)
+var s=this
+if(t.append){var i='<a href="javascript:void(0)" class="'+t.className+'" tabindex="-1" title="'+j(t.title)+'">'+t.label+"</a>"
+s.hook("after","setupTemplates",(()=>{var e=s.settings.render.item
+s.settings.render.item=(t,n)=>{var o=K(e.call(s,t,n)),r=K(i)
+return o.appendChild(r),D(r,"mousedown",(e=>{q(e,!0)})),D(r,"click",(e=>{s.isLocked||(q(e,!0),s.isLocked||s.shouldDelete([o],e)&&(s.removeItem(o),s.refreshOptions(!1),s.inputState()))})),o}}))}})),ce.define("restore_on_backspace",(function(e){const t=this,s=Object.assign({text:e=>e[t.settings.labelField]},e)
+t.on("item_remove",(function(e){if(t.isFocused&&""===t.control_input.value.trim()){var i=t.options[e]
+i&&t.setTextboxValue(s.text.call(t,i))}}))})),ce.define("virtual_scroll",(function(){const e=this,t=e.canLoad,s=e.clearActiveOption,i=e.loadCallback
+var n,o,r={},l=!1,a=[]
+if(e.settings.shouldLoadMore||(e.settings.shouldLoadMore=()=>{if(n.clientHeight/(n.scrollHeight-n.scrollTop)>.9)return!0
+if(e.activeOption){var t=e.selectable()
+if(Array.from(t).indexOf(e.activeOption)>=t.length-2)return!0}return!1}),!e.settings.firstUrl)throw"virtual_scroll plugin requires a firstUrl() method"
+e.settings.sortField=[{field:"$order"},{field:"$score"}]
+const c=t=>!("number"==typeof e.settings.maxOptions&&n.children.length>=e.settings.maxOptions)&&!(!(t in r)||!r[t]),d=(t,s)=>e.items.indexOf(s)>=0||a.indexOf(s)>=0
+e.setNextUrl=(e,t)=>{r[e]=t},e.getUrl=t=>{if(t in r){const e=r[t]
+return r[t]=!1,e}return e.clearPagination(),e.settings.firstUrl.call(e,t)},e.clearPagination=()=>{r={}},e.hook("instead","clearActiveOption",(()=>{if(!l)return s.call(e)})),e.hook("instead","canLoad",(s=>s in r?c(s):t.call(e,s))),e.hook("instead","loadCallback",((t,s)=>{if(l){if(o){const s=t[0]
+void 0!==s&&(o.dataset.value=s[e.settings.valueField])}}else e.clearOptions(d)
+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)}

templates/admin/admin_panel.html

@@ -7,200 +7,314 @@
   <a href="/" class="btn btn-outline-secondary">← Powrót do strony głównej</a>
 </div>
 
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded mb-4">
-  <div class="container-fluid p-0">
-    <a class="navbar-brand" href="#">Funkcje:</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#adminNavbar" aria-controls="adminNavbar" aria-expanded="false" aria-label="Przełącz nawigację">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <div class="collapse navbar-collapse" id="adminNavbar">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-        <li class="nav-item">
-          <a class="nav-link" href="/admin/users">👥 Zarządzanie użytkownikami</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="/admin/receipts">📸 Paragony</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="/admin/products">🛍️ Produkty</a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle text-danger" href="#" id="clearDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            🗑️ Czyszczenie
-          </a>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item text-danger" href="/admin/delete_all_items">Usuń wszystkie produkty</a></li>
-          </ul>
-        </li>
-      </ul>
+<div class="card bg-dark 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('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>
     </div>
   </div>
-</nav>
+</div>
 
 <div class="row g-3 mb-4">
+  <!-- Statystyki liczbowe -->
   <div class="col-md-4">
     <div class="card bg-dark text-white h-100">
       <div class="card-body">
-        <p><strong>👤 Liczba użytkowników:</strong> {{ user_count }}</p>
-        <p><strong>📝 Liczba list zakupowych:</strong> {{ list_count }}</p>
-        <p><strong>🛒 Liczba produktów:</strong> {{ item_count }}</p>
-        <p><strong>✅ Zakupionych produktów:</strong> {{ purchased_items_count }}</p>
+        <h5 class="mb-3">📊 Statystyki ogólne</h5>
+        <table class="table table-dark table-sm mb-0">
+          <tbody>
+            <tr>
+              <td>👤 Użytkownicy</td>
+              <td class="text-end fw-bold">{{ user_count }}</td>
+            </tr>
+            <tr>
+              <td>📝 Listy zakupowe</td>
+              <td class="text-end fw-bold">{{ list_count }}</td>
+            </tr>
+            <tr>
+              <td>🛒 Produkty</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>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
 
-  {% if top_products %}
+  <!-- Najczęściej kupowane -->
   <div class="col-md-4">
     <div class="card bg-dark text-white h-100">
       <div class="card-body">
-        <h5>🔥 Najczęściej kupowane produkty:</h5>
-        <ul class="mb-0">
-          {% for name, count in top_products %}
-            <li>{{ name }} — {{ count }}×</li>
-          {% endfor %}
-        </ul>
+        <h5 class="mb-3">🔥 Najczęściej kupowane produkty</h5>
+        {% if top_products %}
+        {% set max_count = top_products[0][1] %}
+        {% for name, count in top_products %}
+        <div class="mb-2">
+          <div class="d-flex justify-content-between">
+            <span>{{ name }}</span>
+            <span class="badge rounded-pill bg-secondary opacity-75">{{ count }}×</span>
+          </div>
+          <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>
+          </div>
+        </div>
+        {% endfor %}
+        {% else %}
+        <span class="badge rounded-pill bg-secondary opacity-75">Brak danych</p>
+          {% endif %}
       </div>
     </div>
   </div>
-  {% endif %}
 
+  <!-- Podsumowanie wydatków -->
   <div class="col-md-4">
     <div class="card bg-dark text-white h-100">
       <div class="card-body">
         <h5>💸 Podsumowanie wydatków:</h5>
-        <ul class="mb-3">
-          <li><strong>Obecny miesiąc:</strong> {{ '%.2f'|format(month_expense_sum) }} PLN</li>
-          <li><strong>Obecny rok:</strong> {{ '%.2f'|format(year_expense_sum) }} PLN</li>
-          <li><strong>Całkowite:</strong> {{ '%.2f'|format(total_expense_sum) }} PLN</li>
-        </ul>
-        <button type="button" class="btn btn-outline-primary w-100 mt-3" data-bs-toggle="modal" data-bs-target="#expensesChartModal" id="loadExpensesBtn">
+
+        <table class="table table-dark table-sm mb-3">
+          <thead>
+            <tr>
+              <th>Typ listy</th>
+              <th>Miesiąc</th>
+              <th>Rok</th>
+              <th>Całkowite</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Wszystkie</td>
+              <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>
+            </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>
+            </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>
+            </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>
+            </tr>
+          </tbody>
+        </table>
+
+        <a href="{{ url_for('expenses') }}#chartTab" class="btn btn-outline-info">
           📊 Pokaż wykres wydatków
-        </button>
+        </a>
+
       </div>
     </div>
   </div>
+</div>
 
+{# panel wyboru miesiąca zawsze widoczny #}
+<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
 
-<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">
-      <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">
-            <a href="{{ url_for('view_list', list_id=l.id) }}" class="text-white">{{ l.title }}</a>
-          </td>
-          <td>
-            {% if l.is_archived %}
-              <span class="badge bg-secondary">Archiwalna</span>
-            {% elif l.is_temporary and l.expires_at and l.expires_at < now %}
-              <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_id %}
-              {{ l.owner_id }} / {{ l.owner.username if l.owner else 'Brak użytkownika' }}
-            {% else %}
-              -
-            {% endif %}
-          </td>
-          <td>{{ e.total_count }}</td>
-          <td>{{ e.purchased_count }}/{{ e.total_count }} ({{ e.percent }}%)</td>
-          <td>{{ e.comments_count }}</td>
-          <td>{{ e.receipts_count }}</td>
-          <td>
-            {% 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('archive_list', list_id=l.id) }}" class="btn btn-sm btn-outline-secondary">📥 Archiwizuj</a>
-            <a href="{{ url_for('delete_list', list_id=l.id) }}" class="btn btn-sm btn-outline-danger">🗑️ Usuń</a>
-          </td>
-        </tr>
-        {% endfor %}
-      </tbody>
+  {# 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') %}
 
-    </table>
+    {% 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>
-  <button type="submit" class="btn btn-danger mt-2">🗑️ Usuń zaznaczone listy</button>
-</form>
 
-<div class="modal fade" id="expensesChartModal" tabindex="-1" aria-labelledby="expensesChartModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-xl modal-dialog-centered">
-    <div class="modal-content bg-dark text-white rounded">
-      <div class="modal-header border-0">
-        <div>
-          <h5 class="modal-title m-0" id="expensesChartModalLabel">📊 Wydatki</h5>
-          <small id="chartRangeLabel" class="text-muted">Widok: miesięczne</small>
-        </div>
+  {# PRAWA STRONA — picker miesięcy zawsze widoczny #}
+  <form method="get" class="m-0">
+    <div class="input-group input-group-sm">
+      <span class="input-group-text bg-secondary text-white">📅</span>
+      <select name="m" class="form-select bg-dark text-white border-secondary" onchange="this.form.submit()">
+        <option value="all" {% if show_all %}selected{% endif %}>Wszystkie miesiące</option>
+        {% for val in month_options %}
+        {% set date_obj = (val ~ '-01') | todatetime %}
+        <option value="{{ val }}" {% if month_str==val %}selected{% endif %}>
+          {{ date_obj.strftime('%B %Y')|capitalize }}
+        </option>
+        {% endfor %}
+      </select>
+    </div>
+  </form>
+</div>
+
+<div class="card bg-dark text-white mb-5">
+  <div class="card-body">
+    <h3 class="mt-4">
+      📄 Listy zakupowe
+      {% if show_all %}
+      — <strong>wszystkie miesiące</strong>
+      {% else %}
+      — <strong>{{ month_str|replace('-', ' / ') }}</strong>
+      {% endif %}
+    </h3>
+    <form method="post" action="{{ url_for('delete_selected_lists') }}">
+      <div class="table-responsive">
+        <table class="table table-dark table-striped align-middle sortable">
+          <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 }}
+                  </div>
+                </div>
+              </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>
+                <div class="btn-group btn-group-sm" role="group">
+                  <a href="{{ url_for('edit_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light"
+                    title="Edytuj">✏️</a>
+                  <button type="button" class="btn btn-sm btn-outline-light preview-btn" data-list-id="{{ l.id }}"
+                    title="Podgląd produktów">
+                    👁️
+                  </button>
+                  <a href="{{ url_for('delete_list', list_id=l.id) }}" class="btn btn-sm btn-outline-light"
+                    onclick="return confirm('Na pewno usunąć tę listę?')" title="Usuń">🗑️</a>
+                </div>
+              </td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+      <div class="d-flex justify-content-end mt-2">
+        <button type="submit" class="btn btn-danger">🗑️ Usuń zaznaczone listy</button>
+      </div>
+    </form>
+  </div>
+</div>
+
+<div class="info-bar-fixed">
+  Python: {{ python_version.split()[0] }} | {{ system_info }} | RAM app: {{ app_memory }} |
+  DB: {{ db_info.engine|upper }}{% if db_info.version %} v{{ db_info.version[0] }}{% endif %} |
+  Tabele: {{ table_count }} | Rekordy: {{ record_total }} |
+  Uptime: {{ uptime_minutes }} min
+</div>
+
+<!-- Modal podglądu produktów -->
+<div class="modal fade" id="productPreviewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content bg-dark text-white">
+      <div class="modal-header">
+        <h5 class="modal-title" id="previewModalLabel">Podgląd produktów</h5>
         <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
       </div>
-      <div class="modal-body pt-0">
-        <div class="d-flex flex-wrap gap-2 mb-3">
-          <button class="btn btn-outline-light btn-sm range-btn active" data-range="monthly">📅 Miesięczne</button>
-          <button class="btn btn-outline-light btn-sm range-btn" data-range="quarterly">📊 Kwartalne</button>
-          <button class="btn btn-outline-light btn-sm range-btn" data-range="halfyearly">🗓️ Półroczne</button>
-          <button class="btn btn-outline-light btn-sm range-btn" data-range="yearly">📆 Roczne</button>
-        </div>
-
-        <div class="input-group input-group-sm mb-3 w-100" style="max-width: 570px;">
-          <span class="input-group-text bg-secondary text-white border-secondary">Od</span>
-          <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="startDate">
-          <span class="input-group-text bg-secondary text-white border-secondary">Do</span>
-          <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="endDate">
-          <button class="btn btn-outline-success" id="customRangeBtn">Pokaż dane z zakresu 📅</button>
-        </div>
-
-        <div class="bg-dark rounded p-2">
-          <canvas id="expensesChart" height="100"></canvas>
-        </div>
+      <div class="modal-body">
+        <ul id="product-list" class="list-group list-group-flush"></ul>
       </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);
-});
+  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>
+<script src="{{ url_for('static_bp.serve_js', filename='preview_list_modal.js') }}"></script>
 {% endblock %}
 
-<div class="info-bar-fixed">
-  Python: {{ python_version.split()[0] }} | {{ system_info }} | RAM app: {{ app_memory }}
-</div>
-
-
-{% endblock %}
+{% endblock %}

templates/admin/edit_list.html

@@ -3,43 +3,283 @@
 {% block content %}
 
 <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>
+  <h2 class="mb-2">🛠️ Edytuj listę #{{ list.id }}</h2>
+  <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
 </div>
 
-<form method="post">
-  <div class="mb-4">
-    <label for="title" class="form-label">Ustaw nazwę</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="card bg-dark 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">
 
-  <div class="mb-4">
-    <label for="amount" class="form-label">Ustaw kwotę wydatku (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>
+      <!-- Nazwa listy -->
+      <div class="mb-3">
+        <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-4">
-    <label for="owner_id" class="form-label">Zmień właściciela</label>
-    <select class="form-select bg-dark text-white border-secondary rounded" 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>
+      <!-- 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>
+
+      <!-- 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>
+
+
+      <!-- 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">
+          <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-4">
+        <div class="col-md-6">
+          <label class="form-label">📆 Utworzono</label>
+          <p class="form-control-plaintext text-white">
+            {{ list.created_at.strftime('%Y-%m-%d') }}
+          </p>
+        </div>
+        <div class="col-md-6">
+          <label 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 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>
+
+      <!-- Link udostępnienia -->
+      <div class="mb-4">
+        <label class="form-label">🔗 Link do udostępnienia</label>
+        <input type="text" class="form-control bg-dark text-white border-secondary rounded" readonly
+          value="{{ request.url_root }}share/{{ list.share_token }}">
+      </div>
+
+      <button type="submit" class="btn btn-success me-2">💾 Zapisz zmiany</button>
+    </form>
+
+  </div>
+</div>
+
+<div class="card bg-dark text-white mb-5">
+  <div class="card-body">
+    <h4 class="card-title">📝 Produkty</h4>
+
+    <form method="post" class="row g-2 mb-3">
+      <input type="hidden" name="action" value="add_item">
+      <div class="col-md-8">
+        <input type="text" class="form-control bg-dark text-white border-secondary rounded" name="item_name"
+          placeholder="Nazwa produktu" required>
+      </div>
+      <div class="col-md-1">
+        <input type="number" class="form-control bg-dark text-white border-secondary rounded" name="quantity" min="1"
+          value="1">
+      </div>
+      <div class="col-md-3 d-grid">
+        <button type="submit" class="btn btn-outline-success">➕ Dodaj</button>
+      </div>
+    </form>
+
+    <div class="table-responsive">
+      <table class="table table-dark table-bordered align-middle">
+        <thead>
+          <tr>
+            <th>Nazwa produktu</th>
+            <th>Notatka</th>
+            <th>Ilość</th>
+            <th>Aktualny stan</th>
+            <th>Akcja</th>
+            <th>Usuń</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for item in items %}
+          <tr>
+            <td>
+              <strong>{{ item.name }}</strong>
+            </td>
+            <td>
+              {% if item.note %}
+              <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>
+              {% endif %}
+            </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 w-auto">
+                  <input type="number" name="quantity" class="form-control bg-dark text-white border-secondary" min="1"
+                    value="{{ item.quantity }}">
+                  <button type="submit" class="btn btn-outline-light">💾</button>
+                </div>
+              </form>
+            </td>
+            <td>
+              {% if item.purchased %}
+              <span class="badge bg-success">✔️ Kupiony</span>
+              {% elif item.not_purchased %}
+              <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) }}">
+                <input type="hidden" name="item_id" value="{{ item.id }}">
+                <div class="btn-group btn-group-sm d-flex gap-1">
+                  {% if not item.not_purchased %}
+                  <button type="submit" name="action" value="toggle_purchased" class="btn btn-outline-light w-100">
+                    {{ '🚫 Odznacz' if item.purchased else '✅ Kupiony' }}
+                  </button>
+                  <button type="submit" name="action" value="mark_not_purchased" class="btn btn-outline-light w-100">⚠️
+                    Nie kupiony</button>
+                  {% endif %}
+                  {% if item.not_purchased %}
+                  <button type="submit" name="action" value="unmark_not_purchased" class="btn btn-outline-light w-100">✅
+                    Przywróć jako nieoznaczone</button>
+                  {% endif %}
+                </div>
+              </form>
+            </td>
+            <td>
+              <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-outline-light btn-sm w-100">🗑️</button>
+              </form>
+            </td>
+          </tr>
+          {% else %}
+          <tr>
+            <td colspan="5" class="text-center text-muted">Brak produktów.</td>
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+
+<div class="card bg-dark text-white mb-5">
+  <div class="card-body">
+    <h4 class="card-title">🧾 Paragony</h4>
+
+    <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
+      </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;">
+          </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>
+        </div>
+      </div>
       {% endfor %}
-    </select>
-  </div>
+    </div>
 
-  <div class="form-check form-switch mb-4">
-    <input class="form-check-input" type="checkbox" id="archived" name="archived" {% if list.is_archived %}checked{% endif %}>
-    <label class="form-check-label" for="archived">
-      Lista archiwalna
-    </label>
+    {% if not receipts %}
+    <div class="alert alert-info text-center mt-3" role="alert">
+      Brak paragonów.
+    </div>
+    {% endif %}
   </div>
+</div>
 
-  <div class="mb-2">
-    <button type="submit" class="btn btn-success me-2">💾 Zapisz</button>
-    <a href="{{ url_for('admin_panel') }}" class="btn btn-secondary">Anuluj</a>
-  </div>
-</form>
 
 {% endblock %}
+{% block scripts %}
+<script src="{{ url_for('static_bp.serve_js', filename='select.js') }}"></script>
+{% endblock %}

templates/admin/list_products.html

@@ -4,101 +4,134 @@
 
 <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
   <h2 class="mb-2">🛍️ Produkty i sugestie</h2>
-  <a href="/admin" class="btn btn-outline-secondary">← Powrót do panelu</a>
+  <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
 </div>
 
 <div class="card bg-dark text-white mb-5">
-  <div class="card-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>
-  </div>
-  <div class="card-body p-0">
-    <table class="table table-dark table-striped align-middle m-0">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Nazwa</th>
-          <th>Dodana przez</th>
-          <th>Sugestia</th>
-          <th>Akcje</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for item in items %}
-        <tr>
-          <td>{{ item.id }}</td>
-          <td class="fw-bold">{{ item.name }}</td>
-          <td>
-            {% if item.added_by %}
-              {{ users_dict.get(item.added_by, 'Nieznany') }}
-            {% else %}
-              Gość
-            {% endif %}
-          </td>
-          <td>
-            {% set suggestion = suggestions_dict.get(item.name.lower()) %}
-            {% if suggestion %}
+  <div class="card-body">
+    <div class="card-header d-flex justify-content-between align-items-center">
+      <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 sortable">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Nazwa</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"><span class="badge rounded-pill bg-primary">{{ item.name }}</span></td>
+            <td>
+              {% if item.added_by and users_dict.get(item.added_by) %}
+              👤 {{ users_dict[item.added_by] }} ({{ item.added_by }})
+              {% else %}
+              -
+              {% endif %}
+            </td>
+            <td><span class="badge rounded-pill bg-secondary">{{ usage_counts.get(item.name.lower(), 0) }}</span></td>
+            <td>
+              {% 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" data-suggestion-id="{{ suggestion.id }}">🗑️ Usuń</button>
-            {% else %}
-              <button class="btn btn-sm btn-outline-primary 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>
-        </tr>
-        {% endif %}
-      </tbody>
-    </table>
+              <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-light sync-btn" data-item-id="{{ item.id }}">🔄
+                Synchronizuj</button>
+              {% endif %}
+            </td>
+          </tr>
+          {% endfor %}
+          {% if items|length == 0 %}
+          <tr>
+            <td colspan="5" class="text-center">Pusta lista produktów.</td>
+          </tr>
+          {% endif %}
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
 
-<!-- Tabela z samymi sugestiami -->
-<div class="card bg-dark text-white">
-  <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>
-  </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">
-      <thead>
-        <tr>
-          <th>ID</th>
-          <th>Nazwa</th>
-          <th>Akcje</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for suggestion in suggestions_dict.values() %}
+<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">💡 Wszystkie sugestie (poza powiązanymi)</h4>
+      <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 sortable">
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Nazwa</th>
+            <th>Akcje</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% 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" data-suggestion-id="{{ suggestion.id }}">🗑️ Usuń</button>
+              <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 %}
-        <tr>
-          <td colspan="3" class="text-center text-muted">Brak sugestii do wyświetlenia.</td>
-        </tr>
-        {% endif %}
-      </tbody>
-    </table>
+          {% endfor %}
+          {% if orphan_suggestions|length == 0 %}
+          <tr>
+            <td colspan="3" class="text-center">Brak sugestii do wyświetlenia.</td>
+          </tr>
+          {% endif %}
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
 
+<div class="d-flex justify-content-between align-items-center mt-4">
+  <form method="get" class="d-flex align-items-center">
+    <label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
+    <select id="per_page" name="per_page" class="form-select form-select-sm me-2" onchange="this.form.submit()">
+      <option value="100" {% if per_page==100 %}selected{% endif %}>100</option>
+      <option value="200" {% if per_page==200 %}selected{% endif %}>200</option>
+      <option value="300" {% if per_page==300 %}selected{% endif %}>300</option>
+    </select>
+    <input type="hidden" name="page" value="{{ page }}">
+  </form>
+
+  <nav aria-label="Nawigacja stron">
+    <ul class="pagination pagination-dark mb-0">
+      <li class="page-item {% if page <= 1 %}disabled{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
+      </li>
+      {% for p in range(1, total_pages + 1) %}
+      <li class="page-item {% if p == page %}active{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{ p }}</a>
+      </li>
+      {% endfor %}
+      <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
 {% block scripts %}
 <script src="{{ url_for('static_bp.serve_js', filename='product_suggestion.js') }}"></script>
 {% endblock %}
 
-{% endblock %}
+{% endblock %}

templates/admin/mass_edit_categories.html

@@ -0,0 +1,138 @@
+{% extends 'base.html' %}
+{% block title %}Masowa edycja kategorii{% endblock %}
+{% 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>
+    <div>
+        <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
+    </div>
+</div>
+<div class="alert alert-warning border-warning text-dark" role="alert">
+    <strong>Uwaga!</strong> Przypisanie więcej niż jednej kategorii do listy może zaburzyć
+    poprawne zliczanie wydatków, ponieważ wydatki tej listy będą jednocześnie
+    klasyfikowane do kilku kategorii.
+</div>
+
+<form method="post">
+    <div class="card bg-dark text-white mb-5">
+        <div class="card-body p-0">
+            <div class="table-responsive">
+                <table class="table table-dark table-striped 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-info 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 %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <div class="mt-3">
+        <button type="submit" class="btn btn-success">💾 Zapisz</button>
+    </div>
+</form>
+
+<div class="d-flex justify-content-between align-items-center mt-4">
+    <form method="get" class="d-flex align-items-center">
+        <label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
+        <select id="per_page" name="per_page" class="form-select form-select-sm me-2" onchange="this.form.submit()">
+            <option value="25" {% if per_page==25 %}selected{% endif %}>25</option>
+            <option value="50" {% if per_page==50 %}selected{% endif %}>50</option>
+            <option value="100" {% if per_page==100 %}selected{% endif %}>100</option>
+        </select>
+        <input type="hidden" name="page" value="{{ page }}">
+    </form>
+
+    <nav aria-label="Nawigacja stron">
+        <ul class="pagination pagination-dark mb-0">
+            <li class="page-item {% if page <= 1 %}disabled{% endif %}">
+                <a class="page-link"
+                    href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
+            </li>
+            {% for p in range(1, total_pages + 1) %}
+            <li class="page-item {% if p == page %}active{% endif %}">
+                <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{ p }}</a>
+            </li>
+            {% endfor %}
+            <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
+                <a class="page-link"
+                    href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
+            </li>
+        </ul>
+    </nav>
+</div>
+
+
+<!-- Modal podglądu produktów -->
+<div class="modal fade" id="productPreviewModal" tabindex="-1" aria-labelledby="previewModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg modal-dialog-scrollable">
+        <div class="modal-content bg-dark text-white">
+            <div class="modal-header">
+                <h5 class="modal-title" id="previewModalLabel">Podgląd produktów</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                    aria-label="Zamknij"></button>
+            </div>
+            <div class="modal-body">
+                <ul id="product-list" class="list-group list-group-flush"></ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}
+{% block scripts %}
+<script src="{{ url_for('static_bp.serve_js', filename='preview_list_modal.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='categories_select_admin.js') }}"></script>
+{% endblock %}

templates/admin/receipts.html

@@ -4,38 +4,149 @@
 
 <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
   <h2 class="mb-2">📸 Wszystkie paragony</h2>
-  <a href="/admin" class="btn btn-outline-secondary">← Powrót do panelu</a>
+  <div>
+    <a href="{{ url_for('recalculate_filesizes_all') }}" class="btn btn-outline-primary me-2">
+      Przelicz rozmiary plików
+    </a>
+    <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-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;">
+          </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>
+        </div>
+      </div>
+      {% endfor %}
+
+    </div>
+
+    {% if not receipts %}
+    <div class="alert alert-info text-center mt-4" role="alert">
+      Nie wgrano żadnych paragonów.
+    </div>
+    {% endif %}
+  </div>
+</div>
+
+<div class="d-flex justify-content-between align-items-center mt-4">
+  <form method="get" class="d-flex align-items-center">
+    <label for="per_page" class="me-2">🔢 Pozycji na stronę:</label>
+    <select id="per_page" name="per_page" class="form-select form-select-sm me-2" onchange="this.form.submit()">
+      <option value="25" {% if per_page==25 %}selected{% endif %}>25</option>
+      <option value="50" {% if per_page==50 %}selected{% endif %}>50</option>
+      <option value="100" {% if per_page==100 %}selected{% endif %}>100</option>
+    </select>
+    <input type="hidden" name="page" value="{{ page }}">
+  </form>
+
+  <nav aria-label="Nawigacja stron">
+    <ul class="pagination pagination-dark mb-0">
+      <li class="page-item {% if page <= 1 %}disabled{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page - 1 }}">«</a>
+      </li>
+      {% for p in range(1, total_pages + 1) %}
+      <li class="page-item {% if p == page %}active{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ p }}">{{ p }}</a>
+      </li>
+      {% endfor %}
+      <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
+        <a class="page-link" href="?{{ query_string }}{% if query_string %}&{% endif %}page={{ page + 1 }}">»</a>
+      </li>
+    </ul>
+  </nav>
+</div>
+
+
+{% if orphan_files and request.path.endswith('/all') %}
+<hr class="my-4">
+<h4 class="mt-3 mb-2 text-warning">Znalezione nieprzypisane pliki ({{ orphan_files_count }})</h4>
 <div class="row g-3">
-  {% for img in image_files %}
-    {% set list_id = img.split('_')[1] if '_' in img else None %}
-    {% set file_path = (upload_folder ~ '/' ~ img) %}
-    {% set file_size = (file_path | filesizeformat) %}
-    {% set upload_time = (file_path | filemtime) %}
-    <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=img) }}" data-lightbox="receipts" data-title="{{ img }}">
-          <img src="{{ url_for('uploaded_file', filename=img) }}" class="card-img-top" style="object-fit: cover; height: 200px;">
+  {% for f in orphan_files %}
+  <div class="col-6 col-md-4 col-lg-3">
+    <div class="card bg-dark border-warning text-warning h-100">
+      <a href="{{ url_for('uploaded_file', filename=f) }}" class="glightbox" data-gallery="receipts"
+        data-title="{{ f }}">
+        <img src="{{ url_for('uploaded_file', filename=f) }}" class="card-img-top"
+          style="object-fit: cover; height: 200px;">
+      </a>
+      <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"
+          onclick="return confirm('Na pewno usunąć WYŁĄCZNIE plik {{ f }} z dysku?');">
+          🗑 Usuń plik z serwera
         </a>
-        <div class="card-body text-center">
-          <p class="small text-truncate mb-1">{{ img }}</p>
-          <p class="small mb-1">Rozmiar: {{ file_size }}</p>
-          <p class="small mb-1">Wgrano: {{ upload_time.strftime('%Y-%m-%d %H:%M') }}</p>
-          {% if list_id %}
-            <a href="{{ url_for('view_list', list_id=list_id|int) }}" class="btn btn-sm btn-outline-light w-100 mb-2">🔗 Lista #{{ list_id }}</a>
-          {% endif %}
-          <a href="{{ url_for('delete_receipt', filename=img) }}" class="btn btn-sm btn-outline-danger w-100">🗑️ Usuń</a>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+<div class="modal fade" id="adminCropModal" tabindex="-1" aria-labelledby="userCropModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-xl modal-dialog-centered">
+    <div class="modal-content bg-dark text-white">
+      <div class="modal-header">
+        <h5 class="modal-title">✂️ Przycinanie paragonu</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+      </div>
+      <div style="position: relative; width: 100%; height: 75vh;">
+        <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 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>
         </div>
       </div>
     </div>
-  {% endfor %}
+  </div>
 </div>
 
-{% if not image_files %}
-  <div class="alert alert-info text-center" role="alert">
-    Nie wgrano paragonów.
-  </div>
-{% endif %}
-
+{% 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>
 {% endblock %}
+
+{% endblock %}

templates/admin/user_management.html

@@ -4,7 +4,7 @@
 
 <div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
   <h2 class="mb-2">👥 Zarządzanie użytkownikami</h2>
-  <a href="/admin" class="btn btn-outline-secondary">← Powrót do panelu</a>
+  <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót do panelu</a>
 </div>
 
 <!-- Formularz dodawania nowego użytkownika -->
@@ -14,10 +14,12 @@
     <form method="post" action="{{ url_for('add_user') }}">
       <div class="row g-2">
         <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>
+          <input type="text" name="username" class="form-control bg-dark text-white border-secondary rounded"
+            placeholder="Nazwa użytkownika" 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>
+          <input type="password" name="password" class="form-control bg-dark text-white border-secondary rounded"
+            placeholder="Hasło" required>
         </div>
         <div class="col-md-4">
           <button type="submit" class="btn btn-outline-success w-100">Dodaj użytkownika</button>
@@ -27,50 +29,50 @@
   </div>
 </div>
 
-<table class="table table-dark table-striped align-middle">
-  <thead>
-    <tr>
-      <th>ID</th>
-      <th>Login</th>
-      <th>Rola</th>
-      <th>Akcje</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for user in users %}
-    <tr>
-      <td>{{ user.id }}</td>
-      <td class="fw-bold">{{ user.username }}</td>
-      <td>
-        {% if user.is_admin %}
-          <span class="badge bg-primary">Admin</span>
-        {% else %}
-          <span class="badge bg-secondary">Użytkownik</span>
-        {% endif %}
-      </td>
-      <td>
-        <button 
-          class="btn btn-sm btn-outline-warning 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>
-        {% else %}
-          <a href="/admin/demote_user/{{ user.id }}" class="btn btn-sm btn-outline-secondary">⬇️ Usuń admina</a>
-        {% endif %}
-        <a href="/admin/delete_user/{{ user.id }}" class="btn btn-sm btn-outline-danger me-1">🗑️ Usuń</a>
-      </td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-
+<div class="card bg-dark text-white mb-5">
+  <div class="card-body">
+    <table class="table table-dark table-striped align-middle">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Login</th>
+          <th>Rola</th>
+          <th>Akcje</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for user in users %}
+        <tr>
+          <td>{{ user.id }}</td>
+          <td class="fw-bold">{{ user.username }}</td>
+          <td>
+            {% if user.is_admin %}
+            <span class="badge rounded-pill bg-primary">Admin</span>
+            {% else %}
+            <span class="badge rounded-pill bg-secondary">Użytkownik</span>
+            {% endif %}
+          </td>
+          <td>
+            <button class="btn btn-sm btn-outline-warning 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>
+            {% else %}
+            <a href="/admin/demote_user/{{ user.id }}" class="btn btn-sm btn-outline-secondary">⬇️ Usuń admina</a>
+            {% endif %}
+            <a href="/admin/delete_user/{{ user.id }}" class="btn btn-sm btn-outline-danger me-1">🗑️ Usuń</a>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>
 <!-- Modal resetowania hasła -->
-<div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel" aria-hidden="true">
+<div class="modal fade" id="resetPasswordModal" tabindex="-1" aria-labelledby="resetPasswordModalLabel"
+  aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content bg-dark text-white">
       <form method="post" id="resetPasswordForm">

templates/base.html

@@ -1,94 +1,130 @@
 <!DOCTYPE html>
 <html lang="pl">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% block title %}Live Lista Zakupów{% endblock %}</title>
   <link rel="icon" type="image/svg+xml" href="{{ url_for('favicon') }}">
+
+  {# --- Style CSS ładowane tylko dla niezablokowanych --- #}
   {% if not is_blocked %}
   <link href="{{ url_for('static_bp.serve_css', filename='style.css') }}" rel="stylesheet">
   <link href="{{ url_for('static_bp.serve_css_lib', filename='glightbox.min.css') }}" rel="stylesheet">
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='sort_table.min.css') }}" rel="stylesheet">
   {% endif %}
+
+  {# --- Bootstrap zawsze --- #}
   <link href="{{ url_for('static_bp.serve_css_lib', filename='bootstrap.min.css') }}" rel="stylesheet">
+
+  {# --- Cropper CSS tylko dla wybranych podstron --- #}
+  {% set substrings_cropper = ['/admin/receipts', '/edit_my_list'] %}
+  {% if substrings_cropper | select("in", request.path) | list | length > 0 %}
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='cropper.min.css') }}" rel="stylesheet">
+  {% endif %}
+
+  {# --- Tom Select CSS tylko dla wybranych podstron --- #}
+  {% set substrings_tomselect = ['/edit_my_list', '/admin/edit_list', '/admin/mass_edit_categories'] %}
+  {% if substrings_tomselect | select("in", request.path) | list | length > 0 %}
+  <link href="{{ url_for('static_bp.serve_css_lib', filename='tom-select.bootstrap5.min.css') }}" rel="stylesheet">
+  {% endif %}
 </head>
+
 <body class="bg-dark text-white">
 
-<nav class="navbar navbar-dark bg-dark mb-3">
-  <div class="container-fluid">
-    <a class="navbar-brand fw-bold fs-4 text-success" href="/">
-      🛒 <span class="text-warning">Lista</span> Zakupów
-    </a>
+  <nav class="navbar navbar-dark bg-dark mb-3">
+    <div class="container-fluid">
+      <a class="navbar-brand fw-bold fs-4 text-success" href="/">
+        🛒 <span class="text-warning">Lista</span> Zakupów
+      </a>
 
-    {% if has_authorized_cookie and not is_blocked %}
+      {% if has_authorized_cookie and not is_blocked %}
       {% 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>
-        </div>
+      <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 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>
-        </div>
+      <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 rounded-pill bg-info">gość</span>
+      </div>
+      {% endif %}
       {% endif %}
-    {% endif %}
 
-    {% if not is_blocked %}
-    <div class="d-flex align-items-center gap-2">
-      {% if request.endpoint and request.endpoint != 'system_auth' %}
-        {% if current_user.is_authenticated and current_user.is_admin %}
-          <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-warning btn-sm">⚙️ Panel admina</a>
-        {% endif %}
+      {% if not is_blocked and request.endpoint and request.endpoint != 'system_auth' %}
+      <div class="d-flex align-items-center gap-2 flex-wrap">
         {% if current_user.is_authenticated %}
-          <a href="{{ url_for('logout') }}" class="btn btn-outline-light btn-sm">🚪 Wyloguj</a>
-        {% else %}
-          <a href="{{ url_for('login') }}" class="btn btn-outline-light btn-sm">🔑 Zaloguj</a>
+        {% if current_user.is_admin %}
+        <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-light btn-sm">⚙️</a>
         {% endif %}
+        <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>
+        {% endif %}
+      </div>
       {% endif %}
     </div>
-    {% endif %}
+  </nav>
 
+  <div class="container px-2">
+    {% block content %}{% endblock %}
   </div>
-</nav>
 
-<div class="container px-2">
-  {% block content %}{% endblock %}
-</div>
+  <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
 
-<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
+  <footer class="text-center text-secondary small mt-5 mb-3">
+    <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>
+  </footer>
 
-<script src="{{ url_for('static_bp.serve_js_lib', filename='bootstrap.bundle.min.js') }}"></script>
-{% if not is_blocked %}
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    {% with messages = get_flashed_messages(with_categories=true) %}
+  <script src="{{ url_for('static_bp.serve_js_lib', filename='bootstrap.bundle.min.js') }}"></script>
+  {% if not is_blocked %}
+  <script>
+    document.addEventListener('DOMContentLoaded', function () {
+      {% with messages = get_flashed_messages(with_categories = true) %}
       {% for category, message in messages %}
-        {% set cat = 'info' if not category else ('danger' if category == 'error' else category) %}
-        {% if message == 'Please log in to access this page.' %}
-          showToast("Aby uzyskać dostęp do tej strony, musisz być zalogowany.", "danger");
-        {% else %}
-          showToast({{ message|tojson }}, "{{ cat }}");
-        {% endif %}
-      {% endfor %}
+      {% set cat = 'info' if not category else ('danger' if category == 'error' else category) %}
+    {% if message == 'Please log in to access this page.' %}
+    showToast("Aby uzyskać dostęp do tej strony, musisz być zalogowany.", "danger");
+    {% else %}
+    showToast({{ message| tojson }}, "{{ cat }}");
+    {% endif %}
+    {% endfor %}
     {% endwith %}
   });
-</script>
-<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>
-{% if request.endpoint != 'system_auth'  %}
-<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>
-{% endif %}
-<script src="{{ url_for('static_bp.serve_js', filename='toasts.js') }}"></script>
-<script>
-  let lightbox = GLightbox({
+  </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>
+  {% endif %}
+  <script src="{{ url_for('static_bp.serve_js', filename='toasts.js') }}"></script>
+  <script>
+    let lightbox = GLightbox({
       selector: '.glightbox'
-  });
-</script>
-{% endif %}
+    });
+  </script>
 
-{% block scripts %}{% endblock %}
+  {% set substrings = ['/admin/receipts', '/edit_my_list'] %}
+  {% if substrings | select("in", request.path) | list | length > 0 %}
+  <script src="{{ url_for('static_bp.serve_js_lib', filename='cropper.min.js') }}"></script>
+  {% endif %}
 
+  {% set substrings = ['/edit_my_list', '/admin/edit_list', '/admin/mass_edit_categories'] %}
+  {% if substrings | select("in", request.path) | list | length > 0 %}
+  <script src="{{ url_for('static_bp.serve_js_lib', filename='tom-select.complete.min.js') }}"></script>
+  {% endif %}
+
+  {% endif %}
+
+  {% block scripts %}{% endblock %}
 </body>
-</html>
+
+</html>

templates/edit_my_list.html

@@ -1,14 +1,203 @@
 {% extends 'base.html' %}
-{% block content %}
 
-<h2>Edytuj listę: {{ list.title }}</h2>
-<form method="post">
-  <div class="mb-3">
-    <label for="title" class="form-label">Ustaw nazwe</label>
-    <input type="text" name="title" id="title" class="form-control" value="{{ list.title }}" required>
+{% block content %}
+<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
+  <h2>Edytuj listę: <strong>{{ list.title }}</strong></h2>
+  <a href="{{ url_for('main_page') }}" class="btn btn-outline-secondary">← Powrót</a>
+</div>
+
+<div class="card bg-dark text-white mb-5">
+  <div class="card-body">
+    <form method="post">
+
+      <!-- Nazwa listy -->
+      <div class="mb-3">
+        <label for="title" class="form-label">📝 Nazwa listy</label>
+        <input type="text" class="form-control bg-dark text-white border-secondary rounded" id="title" name="title"
+          value="{{ list.title }}" required>
+      </div>
+
+      <!-- Statusy listy -->
+      <div class="mb-4">
+        <label class="form-label">⚙️ Statusy listy</label>
+        <div class="d-flex flex-wrap gap-3">
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="public" name="is_public" {% if list.is_public
+              %}checked{% endif %}>
+            <label class="form-check-label" for="public">🌐 Publiczna</label>
+          </div>
+
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="temporary" name="is_temporary" {% if list.is_temporary
+              %}checked{% endif %}>
+            <label class="form-check-label" for="temporary">⏳ Tymczasowa</label>
+          </div>
+
+          <div class="form-check form-switch">
+            <input class="form-check-input" type="checkbox" id="archived" name="is_archived" {% if list.is_archived
+              %}checked{% endif %}>
+            <label class="form-check-label" for="archived">📦 Archiwalna</label>
+          </div>
+        </div>
+      </div>
+
+      <!-- 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">
+          <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">📆 Utworzono:</label>
+          <p class="form-control-plaintext text-white">
+            <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 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>
+
+      <!-- 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>
+
+      <!-- Przyciski -->
+      <div class="btn-group mt-4" role="group">
+        <button type="submit" class="btn btn-outline-light">💾 Zapisz</button>
+        <a href="{{ url_for('main_page') }}" class="btn btn-outline-light">❌ Anuluj</a>
+      </div>
+
+    </form>
   </div>
-  <button type="submit" class="btn btn-success">Zapisz</button>
-  <a href="{{ url_for('main_page') }}" class="btn btn-secondary">Anuluj</a>
-</form>
+</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">
+      <a href="{{ url_for('uploaded_file', filename=r.filename) }}" class="glightbox" data-gallery="receipts"
+        data-title="{{ r.filename }}">
+        <img src="{{ url_for('uploaded_file', filename=r.filename) }}" class="card-img-top"
+          style="object-fit: cover; height: 200px;">
+      </a>
+      <div class="card-body text-center">
+        <p class="small text-truncate mb-1">{{ r.filename }}</p>
+        <p class="small mb-1">Wgrano: {{ r.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</p>
+        {% if r.filesize and r.filesize >= 1024 * 1024 %}
+        <p class="small mb-1">Rozmiar: {{ (r.filesize / 1024 / 1024) | round(2) }} MB</p>
+        {% elif r.filesize %}
+        <p class="small mb-1">Rozmiar: {{ (r.filesize / 1024) | round(1) }} kB</p>
+        {% else %}
+        <p class="small mb-1 text-muted">Brak danych o rozmiarze</p>
+        {% endif %}
+
+        <a href="{{ url_for('rotate_receipt_user', receipt_id=r.id) }}"
+          class="btn btn-sm btn-outline-warning w-100 mb-2">🔄 Obróć o 90°</a>
+
+        <a href="#" class="btn btn-sm btn-outline-secondary w-100 mb-2" data-bs-toggle="modal"
+          data-bs-target="#userCropModal" data-img-src="{{ url_for('uploaded_file', filename=r.filename) }}"
+          data-receipt-id="{{ r.id }}" data-crop-endpoint="{{ url_for('crop_receipt_user') }}">
+          ✂️ Przytnij
+        </a>
+        <a href="{{ url_for('delete_receipt_user', receipt_id=r.id) }}" class="btn btn-sm btn-outline-danger w-100"
+          onclick="return confirm('Na pewno usunąć ten paragon?')">🗑️ Usuń</a>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+</div>
+{% endif %}
+
+<hr class="my-3">
+<!-- Trigger przycisk -->
+<div class="btn-group mt-4" role="group">
+  <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
+    🗑️ Usuń tę listę
+  </button>
+</div>
+</div>
+</div>
+<!-- MODAL -->
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content bg-dark border-danger text-white">
+      <div class="modal-header">
+        <h5 class="modal-title text-danger" id="deleteModalLabel">Potwierdź usunięcie</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
+      </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ń">
+      </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>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<form id="delete-form" method="post" action="{{ url_for('delete_user_list', list_id=list.id) }}"></form>
+<!-- Hidden delete form -->
+
+<div class="modal fade" id="userCropModal" tabindex="-1" aria-labelledby="userCropModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-xl modal-dialog-centered">
+    <div class="modal-content bg-dark text-white">
+      <div class="modal-header">
+        <h5 class="modal-title">✂️ Przycinanie paragonu</h5>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+      </div>
+      <div style="position: relative; width: 100%; height: 75vh;">
+        <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 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>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 
 {% 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>
+{% endblock %}

templates/errors.html

@@ -13,4 +13,4 @@
   </div>
 </div>
 
-{% endblock %}
+{% endblock %}

templates/expenses.html

@@ -0,0 +1,180 @@
+{% 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>
+
+<!-- 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 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-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-between align-items-center mb-2">
+              <div>
+                <button id="selectAllBtn" class="btn btn-sm btn-outline-light">Zaznacz wszystko</button>
+                <button id="deselectAllBtn" class="btn btn-sm btn-outline-light active" style="display: none;">Odznacz
+                  wszystko</button>
+              </div>
+              <h5 class="text-success m-0">💰 Suma: <span id="listsTotal">0.00 PLN</span></h5>
+            </div>
+
+            <!-- Tabela list z możliwością filtrowania -->
+            <div class="table-responsive">
+              <table class="table table-dark table-striped align-middle sortable">
+                <thead>
+                  <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="{% 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>
+                      <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>
+          </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">
+          <div class="btn-group btn-group-sm" role="group">
+            <button class="btn btn-outline-light range-btn active" data-range="last30days">🗓️ Ostatnie 30 dni</button>
+            <button class="btn btn-outline-light range-btn" data-range="currentmonth">📅 Bieżący miesiąc</button>
+            <button class="btn btn-outline-light range-btn" data-range="monthly">📆 Miesięczne</button>
+            <button class="btn btn-outline-light range-btn" data-range="quarterly">📊 Kwartalne</button>
+            <button class="btn btn-outline-light range-btn" data-range="halfyearly">🗓️ Półroczne</button>
+            <button class="btn btn-outline-light range-btn" data-range="yearly">📈 Roczne</button>
+          </div>
+        </div>
+
+        <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>
+
+{% 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='expense_chart.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='expense_table.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='expense_tab.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='select_all_table.js') }}"></script>
+
+{% endblock %}

templates/list.html

@@ -3,18 +3,32 @@
 {% block content %}
 
 <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
-<h2 class="mb-2">
-Lista: <strong>{{ list.title }}</strong>
-{% if list.is_archived %}
-  <span class="badge bg-secondary ms-2">(Archiwalna)</span>
-{% endif %}</h2>
+  <h2 class="mb-2">
+    Lista: <strong>{{ list.title }}</strong>
+    {% if list.is_archived %}
+    <span class="badge rounded-pill bg-secondary ms-2">(Archiwalna)</span>
+    {% endif %}
+
+    {% if list.category_badges %}
+    {% for cat in list.category_badges %}
+    <span class="badge rounded-pill rounded-pill text-dark ms-1" style="background-color: {{ cat.color }};
+                   font-size: 0.75rem;
+                   opacity: 0.85;">
+      {{ cat.name }}
+    </span>
+    {% endfor %}
+    {% else %}
+    <a href="{{ url_for('edit_my_list', list_id=list.id, next=url_for('view_list', list_id=list.id)) }}"
+      class="ms-2 text-light small fw-light" style="opacity: 0.9;">
+      ➕ Dodaj kategorię
+    </a>
+    {% endif %}
+  </h2>
 
-<a href="/" class="btn btn-outline-secondary">← Powrót do list</a>
 </div>
 
-<a href="{{ request.url_root }}share/{{ list.share_token }}" 
-   class="btn btn-primary btn-sm w-100 mb-3" 
-   {% if not list.is_public %}disabled{% endif %}>
+<a href="{{ request.url_root }}share/{{ list.share_token }}" class="btn btn-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">
@@ -22,26 +36,28 @@ Lista: <strong>{{ list.title }}</strong>
     <div class="mb-2">
       <strong id="share-header">
         {% if list.is_public %}
-          🔗 Udostępnij link:
+        🔗 Udostępnij link:
         {% else %}
-          🙈 Lista jest ukryta przed gośćmi
+        🙈 Lista jest ukryta przed gośćmi
         {% 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; {% if not list.is_public %}display: none;{% endif %}">
         {{ 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 %}>
+        onclick="copyLink('{{ request.url_root }}share/{{ list.share_token }}')" {% if not list.is_public %}disabled{%
+        endif %}>
         📋 Skopiuj / Udostępnij
       </button>
-      <button id="toggleVisibilityBtn" class="btn btn-outline-light btn-sm flex-fill" onclick="toggleVisibility({{ list.id }})">
+      <button id="toggleVisibilityBtn" class="btn btn-outline-light btn-sm flex-fill"
+        onclick="toggleVisibility({{ list.id }})">
         {% if list.is_public %}
-          🙈 Ukryj listę
+        🙈 Ukryj listę
         {% else %}
-          👁️ Udostępnij ponownie
+        👁️ Udostępnij ponownie
         {% endif %}
       </button>
     </div>
@@ -50,65 +66,116 @@ Lista: <strong>{{ list.title }}</strong>
 
 <!-- Progress bar (dynamic) -->
 <h5 id="progress-title" class="mb-2">
-  📊 Postęp listy — {{ purchased_count }}/{{ total_count }} kupionych ({{ percent|round(0) }}%)
+  📊 Postęp listy —
+  <span id="purchased-count">{{ purchased_count }}</span>/
+  <span id="total-count">{{ total_count }}</span> kupionych
+  (<span id="percent-value">{{ percent|int }}</span>%)
 </h5>
 
 <div class="progress progress-dark position-relative">
-  {# właściwy pasek postępu #}
-  <div id="progress-bar"
-       class="progress-bar bg-warning text-dark"
-       role="progressbar"
-       style="width: {{ percent }}%;"
-       aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
+  <div id="progress-bar-purchased" class="progress-bar bg-success" role="progressbar" data-bs-toggle="tooltip"
+    title="Kupione produkty">
   </div>
-
-  <span class="progress-label small fw-bold
-               {% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
-      {{ percent|round(0) }}%
-  </span>
+  <div id="progress-bar-not-purchased" class="progress-bar bg-warning" role="progressbar" data-bs-toggle="tooltip"
+    title="Oznaczone jako niekupione">
+  </div>
+  <div id="progress-bar-remaining" class="progress-bar bg-transparent" role="progressbar" data-bs-toggle="tooltip"
+    title="Pozostałe do kupienia">
+  </div>
+  <span id="progress-label" class="progress-label small fw-bold"></span>
 </div>
 
 {% if total_expense > 0 %}
-  <div id="total-expense2" class="text-success fw-bold mb-3">
-    💸 Łącznie wydano: {{ '%.2f'|format(total_expense) }} PLN
-  </div>
+<div id="total-expense2" class="text-success fw-bold mb-3">
+  💸 Łącznie wydano: {{ '%.2f'|format(total_expense) }} PLN
+</div>
 {% else %}
-  <div id="total-expense2" class="text-success fw-bold mb-3">
-    💸 Łącznie wydano: 0.00 PLN
-  </div>
+<div id="total-expense2" class="text-success fw-bold mb-3">
+  💸 Łącznie wydano: 0.00 PLN
+</div>
 {% endif %}
 
-<ul id="items" class="list-group mb-3">
+<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>
+  <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>
+  </div>
+</div>
+
+<ul id="items" class="list-group mb-3" data-is-share="{{ 'true' if is_share else 'false' }}">
   {% 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 {% if item.purchased %}bg-success text-white{% else %}item-not-checked{% endif %}" id="item-{{ item.id }}">
-  <div class="d-flex align-items-center flex-wrap gap-2 flex-grow-1">
-  <input class="large-checkbox" type="checkbox" {% if item.purchased %}checked{% endif %} {% if list.is_archived %}disabled{% endif %}>
-  <span id="name-{{ item.id }}" class="{% if item.purchased %}text-white{% else %}text-white{% endif %}">
-    {{ item.name }}
-    {% if item.quantity and item.quantity > 1 %}
-      <span class="badge bg-secondary">x{{ item.quantity }}</span>
-    {% endif %}
-  </span>
-    {% if item.note %}
-        <small class="text-danger ms-4">[ <b>{{ item.note }}</b> ]</small>
-    {% endif %}
-  </div>
-  <div class="mt-2 mt-md-0 d-flex gap-1">
-    <button class="btn btn-sm btn-outline-warning"
-      {% if list.is_archived %}disabled{% else %}onclick="editItem({{ item.id }}, '{{ item.name }}', {{ item.quantity or 1 }})"{% endif %}>
-      ✏️
-    </button>
-    <button class="btn btn-sm btn-outline-danger"
-      {% if list.is_archived %}disabled{% else %}onclick="deleteItem({{ item.id }})"{% endif %}>
-      🗑️
-    </button>
-  </div>
-</li>
+  <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 %}"
+    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 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 info_parts %}
+        <div class="info-line ms-4 small d-flex flex-wrap gap-2" id="info-{{ item.id }}">
+          {{ info_parts | join(' ') | safe }}
+        </div>
+        {% endif %}
+      </div>
+    </div>
+
+    <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>
+      {% 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>
+      {% 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>
+      {% 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>
 
@@ -121,8 +188,10 @@ Lista: <strong>{{ list.title }}</strong>
   </div>
   <div class="col-12 col-md-10">
     <div class="input-group w-100">
-      <input type="text" id="newItem" name="name" class="form-control bg-dark text-white border-secondary" 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;">
+      <input type="text" id="newItem" name="name" class="form-control bg-dark text-white border-secondary"
+        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>
     </div>
   </div>
@@ -135,21 +204,21 @@ Lista: <strong>{{ list.title }}</strong>
 
 <div class="row g-3 mt-2" id="receiptGallery">
   {% if receipt_files %}
-    {% for file in receipt_files %}
-      <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) }}" class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
-        </a>
-      </div>
-    {% endfor %}
+  {% for file in receipt_files %}
+  <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) }}"
+        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>
 
-
 <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">
@@ -169,11 +238,21 @@ Lista: <strong>{{ list.title }}</strong>
 </div>
 
 {% block scripts %}
+<script src="{{ url_for('static_bp.serve_js_lib', filename='Sortable.min.js') }}"></script>
+<script>
+  const isShare = document.getElementById('items').dataset.isShare === 'true';
+  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>
   setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
 </script>
-<script src="{{ url_for('static_bp.serve_js', filename='receipt_upload.js') }}"></script>
 {% endblock %}
 
-{% endblock %}
+{% endblock %}

templates/list_share.html

@@ -4,105 +4,205 @@
 
 <h2 class="mb-2">
   🛍️ {{ 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">
-      💸 {{ '%.2f'|format(total_expense) }} PLN
-    </span>
+  <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;">
-      💸 0.00 PLN
-    </span>
+  <span id="total-expense" class="badge rounded-pill bg-secondary ms-2" style="display: none;">
+    💸 0.00 PLN
+  </span>
   {% endif %}
+
+  {# Kategorie - tylko wyświetlenie, bez linków #}
+  {% if list.category_badges %}
+  {% for cat in list.category_badges %}
+  <span class="badge rounded-pill rounded-pill text-dark ms-1" style="background-color: {{ cat.color }};
+                 font-size: 0.75rem;
+                 opacity: 0.85;">
+    {{ cat.name }}
+  </span>
+  {% endfor %}
+  {% endif %}
+
 </h2>
 
-<ul id="items" class="list-group mb-3">
+
+<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>
+</div>
+
+<ul id="items" class="list-group mb-3" data-is-share="{{ 'true' if is_share else 'false' }}">
   {% 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{% else %}item-not-checked{% endif %}" id="item-{{ item.id }}">    <div class="d-flex align-items-center gap-3 flex-grow-1">
-  <input class="large-checkbox" type="checkbox" {% if item.purchased %}checked{% endif %} {% if list.is_archived %}disabled{% endif %}>
-      <span id="name-{{ item.id }}" class="{% if item.purchased %}text-white{% else %}text-white{% endif %}">
+
+  <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 %}">
+
+    <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>
 
-      {% if item.note %}
-        <small class="text-danger ms-4">[ <b>{{ item.note }}</b> ]</small>
-      {% endif %}
+      <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 info_parts %}
+        <div class="info-line ms-4 small d-flex flex-wrap gap-2" id="info-{{ item.id }}">
+          {{ info_parts | join(' ') | safe }}
+        </div>
+        {% endif %}
+      </div>
     </div>
-    <button type="button" class="btn btn-sm btn-outline-info"
-      {% if list.is_archived %}disabled{% else %}onclick="openNoteModal(event, {{ item.id }})"{% endif %}>
-      📝
-    </button>
-</li>
+
+    <div class="btn-group btn-group-sm" role="group">
+      {% 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>
+      {% else %}
+      <button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else %}
+        onclick="markNotPurchasedModal(event, {{ item.id }})" {% endif %}>
+        ⚠️
+      </button>
+      {% endif %}
+
+      <button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else %}
+        onclick="openNoteModal(event, {{ item.id }})" {% endif %}>
+        📝
+      </button>
+    </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>
 
 {% if not list.is_archived %}
-  <div class="input-group mb-2">
-    <input id="newItem" class="form-control bg-dark text-white border-secondary" placeholder="Dodaj produkt i ilość">
-    <input id="newQuantity" type="number" class="form-control bg-dark text-white border-secondary" placeholder="Ilość" min="1" value="1" style="max-width: 90px;">
-    <button onclick="addItem({{ list.id }})" class="btn btn-success rounded-end">➕ Dodaj</button>
-  </div>
+<div class="input-group mb-2">
+  <input id="newItem" class="form-control bg-dark text-white border-secondary" placeholder="Dodaj produkt i ilość" {% if
+    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>
+</div>
 {% endif %}
 
 {% if not list.is_archived %}
-  <hr>
-  <h5>💰 Dodaj wydatek</h5>
-  <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>
+<hr>
+<h5>💰 Dodaj wydatek</h5>
+<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 %}
-   <p id="total-expense2"><b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN</p>
+<p id="total-expense2"><b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN</p>
 
-<button class="btn btn-outline-light mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#receiptSection" aria-expanded="false" aria-controls="receiptSection">
+<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" id="receiptSection">
-{% set receipt_pattern = 'list_' ~ list.id %}
+<div class="collapse px-2 px-md-4" id="receiptSection">
+  {% set receipt_pattern = 'list_' ~ list.id %}
 
-<h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
+  <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="row g-3 mt-2" id="receiptGallery">
-  {% if receipt_files %}
+    {% if current_user.is_authenticated %}
+    <button id="analyzeBtn" class="btn btn-outline-info mb-3">
+      🔍 Zleć analizę OCR
+    </button>
+    {% else %}
+    <div class="alert alert-warning">🔒 Tylko zalogowani użytkownicy mogą zlecać analizę OCR paragonów.</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 %}
-      <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) }}" class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
-        </a>
-      </div>
+    <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) }}"
+          class="img-fluid rounded shadow-sm border border-secondary" style="max-height: 200px; object-fit: cover;">
+      </a>
+    </div>
     {% endfor %}
-  {% else %}
+    {% else %}
     <div class="alert alert-info text-center w-100" role="alert">
       Brak wgranych paragonów do tej listy.
     </div>
-  {% endif %}
-</div>
+    {% endif %}
+  </div>
 
-{% if not list.is_archived %}
+  {% if not list.is_archived and current_user.is_authenticated %}
   <hr>
   <h5>📤 Dodaj zdjęcie paragonu</h5>
-  <form id="receiptForm" action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post" enctype="multipart/form-data" class="text-center">
-    <label for="receiptInput" class="btn btn-outline-light w-100 py-3 mb-2 d-flex align-items-center justify-content-center gap-2">
-      <i class="bi bi-upload"></i> 📸 <span id="fileLabel">Wybierz zdjęcie paragonu</span>
-    </label>
-    <input type="file" name="receipt" accept="image/*" capture="environment" class="d-none" id="receiptInput">
-    <button type="submit" class="btn btn-success w-100 mb-2">➕ Wgraj paragon</button>
-    <div id="progressContainer" class="progress" style="height: 20px; display: none;">
-      <div id="progressBar" class="progress-bar bg-success fw-bold" role="progressbar" style="width: 0%;">0%</div>
-    </div>
-  </form>
-{% endif %}
+  <form id="receiptForm" action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post"
+    enctype="multipart/form-data" class="text-center">
 
+    <!-- Zrób zdjęcie (tylko mobile) -->
+    <label for="cameraInput" id="cameraBtn"
+      class="btn btn-outline-light w-100 py-2 mb-2 d-flex align-items-center justify-content-center gap-2">
+      <i class="bi bi-camera"></i> 📸 Zrób zdjęcie
+    </label>
+    <input type="file" name="receipt" accept="image/*" capture="environment" class="d-none" id="cameraInput">
+
+    <!-- Z galerii / Dodaj paragon -->
+    <label for="galleryInput" id="galleryBtn"
+      class="btn btn-outline-light w-100 py-2 mb-2 d-flex align-items-center justify-content-center gap-2">
+      <i class="bi bi-image"></i> <span id="galleryBtnText">🖼️ Z galerii</span>
+    </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"
+        style="width: 0%;">0%</div>
+    </div>
+
+    <div id="receiptGallery" class="mt-3"></div>
+  </form>
+  {% endif %}
 </div>
 
 <!-- Modal notatki -->
@@ -115,7 +215,8 @@
       </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. 'Nie było, zamieniłem na inny'"></textarea>
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Anuluj</button>
@@ -127,14 +228,23 @@
 </div>
 
 {% block scripts %}
+<script>
+  const isShare = document.getElementById('items').dataset.isShare === 'true';
+  window.IS_SHARE = isShare;
+  window.LIST_ID = {{ list.id }};
+  if (typeof isSorting === 'undefined') {
+    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>
   setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
 </script>
-
 {% endblock %}
 
-{% endblock %}
+{% endblock %}

templates/login.html

@@ -9,10 +9,12 @@
   <div class="card-body">
     <form method="post">
       <div class="mb-3">
-        <input type="text" name="username" placeholder="Login" class="form-control bg-dark text-white border-secondary rounded" required>
+        <input type="text" name="username" placeholder="Login"
+          class="form-control bg-dark text-white border-secondary rounded" required>
       </div>
       <div class="mb-3">
-        <input type="password" name="password" placeholder="Hasło" class="form-control bg-dark text-white border-secondary rounded" required>
+        <input type="password" name="password" placeholder="Hasło"
+          class="form-control bg-dark text-white border-secondary rounded" required>
       </div>
       <button type="submit" class="btn btn-success w-100">🔑 Zaloguj</button>
     </form>

templates/main.html

@@ -3,9 +3,9 @@
 {% block content %}
 
 {% 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.
-  </div>
+<div class="alert alert-info text-center" role="alert">
+  Jesteś w trybie gościa. Możesz tylko przeglądać listy udostępnione publicznie.
+</div>
 {% endif %}
 
 {% if current_user.is_authenticated %}
@@ -17,15 +17,10 @@
   <div class="card-body">
     <form action="/create" 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">
-        <button 
-          type="button" 
-          class="btn btn-outline-secondary rounded-end" 
-          id="tempToggle" 
-          data-active="0"
-          data-bs-toggle="tooltip"
-          data-bs-placement="top"
-          title="Po zaznaczeniu lista będzie ważna tylko 7 dni">
+        <input type="text" name="title" id="title" placeholder="Wprowadź nazwę nowej listy" required
+          class="form-control bg-dark text-white border-secondary">
+        <button type="button" class="btn btn-outline-secondary rounded-end" id="tempToggle" data-active="0"
+          data-bs-toggle="tooltip" data-bs-placement="top" title="Po zaznaczeniu lista będzie ważna tylko 7 dni">
           Tymczasowa
         </button>
         <input type="hidden" name="temporary" id="temporaryHidden" value="0">
@@ -36,88 +31,160 @@
 </div>
 {% endif %}
 
-{% if current_user.is_authenticated %}
-  <h3 class="mt-4 d-flex justify-content-between align-items-center flex-wrap">
-    Twoje listy
-    <button type="button" class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal" data-bs-target="#archivedModal">
-      📁 Zarchiwizowane
-    </button>
-  </h3>
-  {% if user_lists %}
-    <ul class="list-group mb-4">
-      {% for l in user_lists %}
-        {% 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: Ty)</span>
+{% set month_names = ["styczeń", "luty", "marzec", "kwiecień", "maj", "czerwiec", "lipiec", "sierpień", "wrzesień",
+"październik", "listopad", "grudzień"] %}
 
-          <div class="d-flex flex-wrap mt-2 mt-md-0">
-            <a href="/list/{{ l.id }}" class="btn btn-sm btn-outline-light me-1 mb-1">📄 Otwórz</a>
-            <a href="/copy/{{ l.id }}" class="btn btn-sm btn-outline-light me-1 mb-1">📋 Kopiuj</a>
-            <a href="/edit_my_list/{{ l.id }}" class="btn btn-sm btn-outline-light me-1 mb-1">✏️ Edytuj</a>
-            <a href="/toggle_archive_list/{{ l.id }}?archive=true" class="btn btn-sm btn-outline-light me-1 mb-1">🗄️ Archiwizuj</a>
-            {% if l.is_public %}
-              <a href="/toggle_visibility/{{ l.id }}" class="btn btn-sm btn-outline-light me-1 mb-1">🙈 Ukryj</a>
-            {% else %}
-              <a href="/toggle_visibility/{{ l.id }}" class="btn btn-sm btn-outline-light me-1 mb-1">👁️ Odkryj</a>
-            {% endif %}
-          </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>              
-          <span class="progress-label small fw-bold 
-                      {% if percent < 50 %}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 %}
-              </span>
-          </div>
-        </li>
-      {% endfor %}
-    </ul>
-  {% else %}
-    <p><span class="badge rounded-pill bg-secondary opacity-75">Nie masz jeszcze żadnych list. Utwórz pierwszą, korzystając z formularza powyżej!</span></p>
-  {% endif %}
+<!-- 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 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="all" {% if selected_month=='all' %}selected{% endif %}>
+      Wyświetl wszystko
+    </option>
+  </select>
+</div>
+
+<!-- Telefon: przycisk otwierający modal -->
+<div class="d-md-none mb-3">
+  <button class="btn btn-outline-light w-100" data-bs-toggle="modal" data-bs-target="#monthPickerModal">
+    📅 Wybierz miesiąc
+  </button>
+</div>
+
+{% if current_user.is_authenticated %}
+<h3 class="mt-4 d-flex justify-content-between align-items-center flex-wrap">
+  Twoje listy
+  <button type="button" class="btn btn-sm btn-outline-light ms-2" data-bs-toggle="modal"
+    data-bs-target="#archivedModal">
+    📁 Zarchiwizowane
+  </button>
+</h3>
+{% if user_lists %}
+<ul class="list-group mb-4">
+  {% for l in user_lists %}
+  {% 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: 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 %}
+      </div>
+    </div>
+
+    <div class="progress progress-dark progress-thin mt-2 position-relative">
+      {# 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 < 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 %}
+      </span>
+    </div>
+
+  </li>
+  {% endfor %}
+</ul>
+{% else %}
+<p><span class="badge rounded-pill bg-secondary opacity-75">Nie utworzono żadnej listy</span></p>
+{% endif %}
 {% endif %}
 
 <h3 class="mt-4">Publiczne listy innych użytkowników</h3>
 {% if public_lists %}
-  <ul class="list-group">
-    {% for l in public_lists %}
-      {% 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>
-        </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 %}">
-                  Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
-                  {% if l.total_expense > 0 %}
-                    — 💸 {{ '%.2f'|format(l.total_expense) }} PLN
-                  {% endif %}
-              </span>
-            </div>
-        </li>
-      {% endfor %}
-  </ul>
+<ul class="list-group">
+  {% for l in public_lists %}
+  {% 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 }})
+        {% for cat in l.category_badges %}
+        <span class="badge rounded-pill text-dark ms-1" style="background-color: {{ cat.color }};
+                 font-size: 0.56rem;
+                 opacity: 0.85;">
+          {{ cat.name }}
+        </span>
+        {% endfor %}
+      </span>
+
+      <a href="/guest-list/{{ l.id }}" class="btn btn-sm btn-outline-light">📄 Otwórz</a>
+    </div>
+    <div class="progress progress-dark progress-thin mt-2 position-relative">
+      {# 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 < 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 %}
+      </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 dostępnych list publicznych do wyświetlenia</span></p>
 {% endif %}
 
 <div class="modal fade" id="archivedModal" tabindex="-1" aria-labelledby="archivedModalLabel" aria-hidden="true">
@@ -129,18 +196,19 @@
       </div>
       <div class="modal-body">
         {% if archived_lists %}
-          <ul class="list-group">
-            {% 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>
-              </li>
-            {% endfor %}
-          </ul>
+        <ul class="list-group">
+          {% 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>
+          </li>
+          {% endfor %}
+        </ul>
         {% else %}
-          <div class="alert alert-info text-center" role="alert">
-            Nie masz żadnych zarchiwizowanych list.
-          </div>
+        <div class="alert alert-info text-center" role="alert">
+          Nie masz żadnych zarchiwizowanych list.
+        </div>
         {% endif %}
       </div>
       <div class="modal-footer">
@@ -150,8 +218,35 @@
   </div>
 </div>
 
+<div class="modal fade" id="monthPickerModal" tabindex="-1" aria-labelledby="monthPickerModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content bg-dark text-white">
+      <div class="modal-header">
+        <h5 class="modal-title">📅 Wybierz miesiąc</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="d-grid gap-2">
+          {% 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', m='all') }}"
+            class="btn btn-outline-secondary {% if selected_month == 'all' %}active{% endif %}">
+            📋 Wyświetl wszystkie
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</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>
 {% endblock %}
 
-{% endblock %}
+{% endblock %}

templates/system_auth.html

@@ -10,7 +10,8 @@
   <div class="card-body">
     <form method="post">
       <div class="mb-3">
-        <input type="password" name="password" placeholder="Hasło" class="form-control bg-dark text-white border-secondary rounded" required>
+        <input type="password" name="password" placeholder="Hasło"
+          class="form-control bg-dark text-white border-secondary rounded" required>
       </div>
       <button type="submit" class="btn btn-success w-100">🔓 Wejdź</button>
     </form>
@@ -19,9 +20,9 @@
 
 {% block scripts %}
 <script>
-document.addEventListener('DOMContentLoaded', function() {
-  document.querySelector('input[name="password"]').focus();
-});
+  document.addEventListener('DOMContentLoaded', function () {
+    document.querySelector('input[name="password"]').focus();
+  });
 </script>
 {% endblock %}