webp support

2025-07-20 17:34:53 +02:00 · 2025-07-20 17:34:21 +02:00 · 2025-07-20 16:50:26 +02:00 · 2025-07-20 10:36:58 +02:00 · 2025-07-19 23:04:11 +02:00 · 2025-07-19 22:59:17 +02:00
41 changed files with 3346 additions and 1460 deletions
--- a/.env.example
+++ b/.env.example
@@ -17,4 +17,10 @@ UPLOAD_FOLDER=uploads
 AUTHORIZED_COOKIE_VALUE=twoj_wlasny_hash

 # czas zycia cookie
-AUTH_COOKIE_MAX_AGE=86400
+AUTH_COOKIE_MAX_AGE=86400
+
+# dla compose
+HEALTHCHECK_TOKEN=alamapsaikota123
+
+# sesja zalogowanego usera (domyślnie 7 dni)
+SESSION_TIMEOUT_MINUTES=10080
--- a/add_products.py
+++ b/add_products.py
@@ -4,66 +4,249 @@ 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"
+        "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"
+        "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"
+        "ł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"
+        "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"
+        "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"
+        "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"
+        "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"
+        "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"
+        "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"
+        "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"
-    ]
+        "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 = []
--- a/add_receipt_to_list.py
+++ b/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()
--- a/alters.txt
+++ b/alters.txt
@@ -28,6 +28,24 @@ 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
+# licznik najczesciej kupowanych reczy
 ALTER TABLE suggested_product ADD COLUMN usage_count INTEGER DEFAULT 0;

+# funkcja niekupione
+ALTER TABLE item ADD COLUMN not_purchased_reason TEXT;
+ALTER TABLE item ADD COLUMN not_purchased BOOLEAN DEFAULT 0;
+
+# funkcja sortowania
+ALTER TABLE item ADD COLUMN position INTEGER DEFAULT 0;
+
+# migracja paragonów do nowej tabeli
+CREATE TABLE receipt (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    list_id INTEGER NOT NULL,
+    filename TEXT NOT NULL,
+    uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (list_id) REFERENCES shopping_list(id)
+);
+
+ALTER TABLE receipt ADD COLUMN filesize INTEGER;
+
--- a/app.py
+++ b/app.py
--- a/config.py
+++ b/config.py
@@ -1,12 +1,15 @@
 import os

+
 class Config:
-    SECRET_KEY = os.environ.get('SECRET_KEY', 'D8pceNZ8q%YR7^7F&9wAC2')
-    SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URL', 'sqlite:///shopping.db')
+    SECRET_KEY = os.environ.get("SECRET_KEY", "D8pceNZ8q%YR7^7F&9wAC2")
+    SQLALCHEMY_DATABASE_URI = os.environ.get("DATABASE_URL", "sqlite:///shopping.db")
    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")
+    AUTH_COOKIE_MAX_AGE = int(os.environ.get("AUTH_COOKIE_MAX_AGE", 86400))
+    HEALTHCHECK_TOKEN = os.environ.get("HEALTHCHECK_TOKEN", "alamapsaikota1234")
+    SESSION_TIMEOUT_MINUTES = int(os.environ.get("SESSION_TIMEOUT_MINUTES", 10080))
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -4,6 +4,12 @@ services:
    container_name: live-lista-zakupow
    ports:
      - "${APP_PORT:-8000}:8000"
+    healthcheck:
+      test: ["CMD", "python", "-c", "import urllib.request; import sys; req = urllib.request.Request('http://localhost:8000/healthcheck', headers={'X-Internal-Check': '${HEALTHCHECK_TOKEN}'}); sys.exit(0) if urllib.request.urlopen(req).read() == b'OK' else sys.exit(1)"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
    environment:
      - FLASK_APP=app.py
      - FLASK_ENV=production
@@ -14,5 +20,7 @@ services:
      - UPLOAD_FOLDER=${UPLOAD_FOLDER}
      - AUTHORIZED_COOKIE_VALUE=${AUTHORIZED_COOKIE_VALUE}
      - AUTH_COOKIE_MAX_AGE=${AUTH_COOKIE_MAX_AGE}
+      - HEALTHCHECK_TOKEN=${HEALTHCHECK_TOKEN}
+      - SESSION_TIMEOUT_MINUTES=${SESSION_TIMEOUT_MINUTES}
    volumes:
      - .:/app
--- a/migrate_to_webp.py
+++ b/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()
--- a/requirements.txt
+++ b/requirements.txt
@@ -6,4 +6,5 @@ Flask-Compress
 eventlet
 Werkzeug
 Pillow
-psutil
+psutil
+pillow-heif
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -3,6 +3,7 @@
  width: 1.5em;
  height: 1.5em;
 }
+
 .clickable-item {
  cursor: pointer;
 }
@@ -38,7 +39,8 @@
  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 +55,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 +71,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 +91,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 +177,7 @@ input[type="checkbox"].large-checkbox:disabled::before {
  opacity: 0.5;
  cursor: not-allowed;
 }
+
 input[type="checkbox"].large-checkbox:disabled {
  cursor: not-allowed;
 }
@@ -186,11 +207,12 @@ input.form-control {
  box-sizing: border-box;
 }

-@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 +244,7 @@ input.form-control {
    opacity: 0;
    transform: translateY(20px);
  }
+
  to {
    opacity: 1;
    transform: translateY(0);
@@ -231,11 +254,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 +269,7 @@ input.form-control {
  border-radius: 4px;
  text-align: center;
 }
+
 .add-btn {
  margin-left: 10px;
 }
@@ -255,6 +281,7 @@ input.form-control {
  justify-content: flex-end;
  gap: 4px;
 }
+
 .list-group-item {
  display: flex;
  align-items: center;
@@ -264,4 +291,24 @@ 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;
+  }
 }
--- a/static/js/clickable_row.js
+++ b/static/js/clickable_row.js
@@ -1,6 +1,6 @@
 document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll('.clickable-item').forEach(item => {
-    item.addEventListener('click', function(e) {
+    item.addEventListener('click', function (e) {
      if (!e.target.closest('button') && e.target.tagName.toLowerCase() !== 'input') {
        const checkbox = this.querySelector('input[type="checkbox"]');

--- a/static/js/confirm_delete.js
+++ b/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();
+    });
+});
--- a/static/js/expenses.js
+++ b/static/js/expenses.js
@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
    let expensesChart = null;
    const rangeLabel = document.getElementById("chartRangeLabel");

@@ -8,57 +8,57 @@ document.addEventListener("DOMContentLoaded", function() {
            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');
+        fetch(url, { cache: "no-store" })
+            .then(response => response.json())
+            .then(data => {
+                const ctx = document.getElementById('expensesChart').getContext('2d');

-            if (expensesChart) {
-                expensesChart.destroy();
-            }
+                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
+                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);
            });
-
-            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() {
+    document.getElementById('loadExpensesBtn').addEventListener('click', function () {
        loadExpenses();
    });

    document.querySelectorAll('.range-btn').forEach(btn => {
-        btn.addEventListener('click', function() {
+        btn.addEventListener('click', function () {
            document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            const range = this.getAttribute('data-range');
@@ -66,7 +66,7 @@ document.addEventListener("DOMContentLoaded", function() {
        });
    });

-    document.getElementById('customRangeBtn').addEventListener('click', function() {
+    document.getElementById('customRangeBtn').addEventListener('click', function () {
        const startDate = document.getElementById('startDate').value;
        const endDate = document.getElementById('endDate').value;
        if (startDate && endDate) {
@@ -78,7 +78,7 @@ document.addEventListener("DOMContentLoaded", function() {
    });
 });

-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
    const startDateInput = document.getElementById("startDate");
    const endDateInput = document.getElementById("endDate");

--- a/static/js/functions.js
+++ b/static/js/functions.js
@@ -16,6 +16,7 @@ function updateItemState(itemId, isChecked) {
    if (sp) sp.remove();
  }
  updateProgressBar();
+  applyHidePurchased();
 }

 function updateProgressBar() {
@@ -24,12 +25,40 @@ function updateProgressBar() {
  const purchased = Array.from(items).filter(li => li.classList.contains('bg-success')).length;
  const percent = total > 0 ? Math.round((purchased / total) * 100) : 0;

+  // Pasek postępu
  const progressBar = document.getElementById('progress-bar');
  if (progressBar) {
    progressBar.style.width = `${percent}%`;
    progressBar.setAttribute('aria-valuenow', percent);
-    progressBar.textContent = `${percent}%`;
+    progressBar.textContent = percent > 0 ? `${percent}%` : ''; // opcjonalnie
  }
+
+  // Label na pasku postępu
+  const progressLabel = document.getElementById('progress-label');
+  if (progressLabel) {
+    progressLabel.textContent = `${percent}%`;
+    if (percent === 0) {
+      progressLabel.style.display = 'inline';
+    } else {
+      progressLabel.style.display = 'none';
+    }
+    // Kolor tekstu labela
+    if (percent < 50) {
+      progressLabel.classList.remove('text-dark');
+      progressLabel.classList.add('text-white');
+    } else {
+      progressLabel.classList.remove('text-white');
+      progressLabel.classList.add('text-dark');
+    }
+  }
+
+  // Nagłówek
+  const purchasedCount = document.getElementById('purchased-count');
+  if (purchasedCount) purchasedCount.textContent = purchased;
+  const totalCount = document.getElementById('total-count');
+  if (totalCount) totalCount.textContent = total;
+  const percentValue = document.getElementById('percent-value');
+  if (percentValue) percentValue.textContent = percent;
 }

 function addItem(listId) {
@@ -91,6 +120,22 @@ function submitExpense(listId) {
 }

 function copyLink(link) {
+  if (navigator.share) {
+    navigator.share({
+      title: 'Udostępnij link',
+      text: '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 +148,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 +174,50 @@ function fallbackCopyText(text) {
  document.body.removeChild(textarea);
 }

+function openList(link) {
+  window.open(link, '_blank');
+}
+
+function applyHidePurchased(isInit = false) {
+  //console.log("applyHidePurchased: wywołana, isInit =", isInit);
+  const toggle = document.getElementById('hidePurchasedToggle');
+  if (!toggle) return;
+  const hide = toggle.checked;
+
+  const items = document.querySelectorAll('#items li');
+
+  items.forEach(li => {
+    const isPurchased = li.classList.contains('bg-success');
+
+    if (isPurchased) {
+      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 niekupiony — 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 +240,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');
@@ -205,6 +273,7 @@ function isListDifferent(oldItems, newItems) {
 }

 function updateListSmoothly(newItems) {
+
  const itemsContainer = document.getElementById('items');
  const existingItemsMap = new Map();

@@ -222,58 +291,62 @@ function updateListSmoothly(newItems) {
      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 {
+    if (!li) {
      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>
-      `;
    }

+    // Klasy tła
+    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'
+      }`;
+
+    // Wewnętrzny HTML
+    li.innerHTML = `
+      <div class="d-flex align-items-center gap-2 flex-grow-1">
+        ${isSorting ? `<span class="drag-handle me-2 text-danger" style="cursor: grab;">☰</span>` : ''}
+        ${!item.not_purchased ? `
+          <input id="checkbox-${item.id}" class="large-checkbox" type="checkbox" 
+            ${item.purchased ? 'checked' : ''}>
+        ` : `
+          <span class="ms-1 block-icon">🚫</span>
+        `}
+        <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>` : ''}
+        ${item.not_purchased_reason ? `<small class="text-dark ms-4">[ <b>Powód: ${item.not_purchased_reason}</b> ]</small>` : ''}
+      </div>
+      <div class="btn-group btn-group-sm" role="group">
+        ${item.not_purchased ? `
+          <button type="button" class="btn btn-outline-light me-auto"
+            onclick="unmarkNotPurchased(${item.id})">
+            ✅ Przywróć
+          </button>
+        ` : `
+          <button type="button" class="btn btn-outline-light"
+            onclick="markNotPurchasedModal(event, ${item.id})">
+            ⚠️
+          </button>
+          ${window.IS_SHARE ? `
+            <button type="button" class="btn btn-outline-light"
+              onclick="openNoteModal(event, ${item.id})">
+              📝
+            </button>
+          ` : ''}
+        `}
+        ${!window.IS_SHARE ? `
+          <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>
+        ` : ''}
+      </div>
+    `;
+
    fragment.appendChild(li);
  });

@@ -282,9 +355,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 +377,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();
+  });
+});
--- a/static/js/live.js
+++ b/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,50 @@ 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}`);
+    showToast(`${data.added_by} dodał: ${data.name}`, 'info');
    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>`;
    }

    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>
-    `;
+    <div class="d-flex align-items-center flex-wrap gap-2 flex-grow-1">
+      <input class="large-checkbox" type="checkbox">
+      <span id="name-${data.id}" class="text-white">${data.name} ${quantityBadge}</span>
+    </div>
+    <div class="btn-group btn-group-sm" role="group">
+      <button type="button" class="btn btn-outline-light"
+        onclick="editItem(${data.id}, '${data.name.replace(/'/g, "\\'")}', ${data.quantity || 1})">
+        ✏️
+      </button>
+      <button type="button" class="btn btn-outline-light"
+        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>
+    // góra listy  
+    //document.getElementById('items').prepend(li);

+    // dół listy
    document.getElementById('items').appendChild(li);
-    updateProgressBar();
    toggleEmptyPlaceholder();
+
+    setTimeout(() => {
+      if (window.LIST_ID) {
+        socket.emit('request_full_list', { list_id: window.LIST_ID });
+      }
+    }, 15000);
+
  });

  socket.on('item_deleted', data => {
@@ -163,12 +175,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 + '%';
@@ -203,7 +215,7 @@ function setupList(listId, username) {
        }
      }
    }
-    showToast('Notatka zaktualizowana!');
+    showToast('Notatka dodana/zaktualizowana', 'success');
  });

  socket.on('item_edited', data => {
@@ -215,7 +227,7 @@ function setupList(listId, username) {
      }
      nameSpan.innerHTML = `${data.new_name}${quantityBadge}`;
    }
-    showToast(`Zaktualizowano produkt: ${data.new_name} (x${data.new_quantity})`);
+    showToast(`Zaktualizowano produkt: ${data.new_name} (x${data.new_quantity})`, 'success');
  });

  updateProgressBar();
@@ -225,4 +237,8 @@ function setupList(listId, username) {
  window.LIST_ID = listId;
  window.usernameForReconnect = username;

+}
+
+function unmarkNotPurchased(itemId) {
+  socket.emit('unmark_not_purchased', { item_id: itemId });
 }
--- a/static/js/mass_add.js
+++ b/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,13 +73,13 @@ 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 });
+            socket.emit('request_full_list', { list_id: LIST_ID });
          };

          li.appendChild(qtyWrapper);
@@ -99,25 +97,19 @@ document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('#mass-add-list li').forEach(li => {
      const itemName = li.firstChild.textContent.trim();

-      if (itemName === data.name && !li.classList.contains('opacity-50')) {
-        // Usuń wszystkie dzieci
+      if (normalize(itemName) === normalize(data.name) && !li.classList.contains('opacity-50')) {
        while (li.firstChild) {
          li.removeChild(li.firstChild);
        }

-        // Ustaw nazwę
        li.textContent = data.name;
-
-        // Dodaj klasę wyszarzenia
        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);

-        // Zablokuj kliknięcia
        li.onclick = null;
      }
    });
--- a/static/js/notes.js
+++ b/static/js/notes.js
@@ -1,13 +1,13 @@
 let 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 : "";
+  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();
@@ -20,3 +20,4 @@ function submitNote(e) {
    modal.hide();
  }
 }
+
--- a/static/js/product_suggestion.js
+++ b/static/js/product_suggestion.js
@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
  // Odśwież eventy
  document.querySelectorAll('.sync-btn').forEach(btn => {
    btn.replaceWith(btn.cloneNode(true));
@@ -9,7 +9,7 @@ document.addEventListener("DOMContentLoaded", function() {

  // Synchronizacja sugestii
  document.querySelectorAll('.sync-btn').forEach(btn => {
-    btn.addEventListener('click', function(e) {
+    btn.addEventListener('click', function (e) {
      e.preventDefault();

      const itemId = this.getAttribute('data-item-id');
@@ -22,28 +22,28 @@ document.addEventListener("DOMContentLoaded", function() {
          'X-Requested-With': 'XMLHttpRequest'
        }
      })
-      .then(response => response.json())
-      .then(data => {
-        showToast(data.message, data.success ? 'success' : 'danger');
+        .then(response => response.json())
+        .then(data => {
+          showToast(data.message, data.success ? 'success' : 'danger');

-        if (data.success) {
-          button.innerText = '✅ Zsynchronizowano';
-          button.classList.remove('btn-outline-primary');
-          button.classList.add('btn-success');
-        } else {
+          if (data.success) {
+            button.innerText = '✅ Zsynchronizowano';
+            button.classList.remove('btn-outline-primary');
+            button.classList.add('btn-success');
+          } else {
+            button.disabled = false;
+          }
+        })
+        .catch(() => {
+          showToast('Błąd synchronizacji', 'danger');
          button.disabled = false;
-        }
-      })
-      .catch(() => {
-        showToast('Błąd synchronizacji', 'danger');
-        button.disabled = false;
-      });
+        });
    });
  });

  // Usuwanie sugestii
  document.querySelectorAll('.delete-suggestion-btn').forEach(btn => {
-    btn.addEventListener('click', function(e) {
+    btn.addEventListener('click', function (e) {
      e.preventDefault();

      const suggestionId = this.getAttribute('data-suggestion-id');
@@ -56,21 +56,21 @@ document.addEventListener("DOMContentLoaded", function() {
          'X-Requested-With': 'XMLHttpRequest'
        }
      })
-      .then(response => response.json())
-      .then(data => {
-        showToast(data.message, data.success ? 'success' : 'danger');
+        .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) {
+            const row = button.closest('tr');
+            if (row) row.remove();
+          } else {
+            button.disabled = false;
+          }
+        })
+        .catch(() => {
+          showToast('Błąd usuwania sugestii', 'danger');
          button.disabled = false;
-        }
-      })
-      .catch(() => {
-        showToast('Błąd usuwania sugestii', 'danger');
-        button.disabled = false;
-      });
+        });
    });
  });
 });
--- a/static/js/receipt_section.js
+++ b/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"]');

--- a/static/js/receipt_upload.js
+++ b/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 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 || !inputCamera || !inputGallery || !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;
+
+    // 🧼 Jedno miejsce, pełna logika desktopowa
+    if (isDesktop) {
+      if (cameraBtn) cameraBtn.remove(); // całkowicie usuń przycisk
+      if (inputCamera) inputCamera.remove(); // oraz input
+      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,11 +55,8 @@ 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 () {
@@ -77,10 +73,10 @@ if (!window.receiptUploaderInitialized) {
                  if (newGallery) {
                    gallery.innerHTML = newGallery.innerHTML;

-                    lightbox.destroy();
-                    lightbox = GLightbox({
-                      selector: '.glightbox'
-                    });
+                    if (typeof lightbox !== "undefined") {
+                      lightbox.destroy();
+                    }
+                    lightbox = GLightbox({ selector: ".glightbox" });

                    if (!window.receiptToastShown) {
                      showToast("Wgrano paragon", "success");
@@ -98,7 +94,10 @@ if (!window.receiptUploaderInitialized) {
      };

      xhr.send(formData);
-    });
+    }
+
+    inputCamera?.addEventListener("change", () => handleFileUpload(inputCamera));
+    inputGallery?.addEventListener("change", () => handleFileUpload(inputGallery));
  });

  window.receiptUploaderInitialized = true;
--- a/static/js/sockets.js
+++ b/static/js/sockets.js
@@ -2,83 +2,83 @@ 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;

@@ -103,6 +103,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 +126,7 @@ socket.on('full_list', function (data) {

  const isDifferent = isListDifferent(oldItems, data.items);

+  window.currentItems = data.items;
  updateListSmoothly(data.items);
  toggleEmptyPlaceholder();

@@ -119,4 +134,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 });
 });
--- a/static/js/sort_mode.js
+++ b/static/js/sort_mode.js
@@ -0,0 +1,83 @@
+let sortable = null;
+let isSorting = false;
+
+function enableSortMode() {
+    if (sortable || isSorting) return;
+    isSorting = true;
+    localStorage.setItem('sortModeEnabled', 'true');
+
+    const itemsContainer = document.getElementById('items');
+    const listId = window.LIST_ID;
+
+    if (!itemsContainer || !listId) return;
+
+    sortable = Sortable.create(itemsContainer, {
+        animation: 150,
+        handle: '.drag-handle',
+        ghostClass: 'drag-ghost',
+        filter: 'input, button',
+        preventOnFilter: false,
+        onEnd: function () {
+            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);
+                }
+            });
+        }
+    });
+
+    const btn = document.getElementById('sort-toggle-btn');
+    if (btn) {
+        btn.textContent = '✔️ Zakończ sortowanie';
+        btn.classList.remove('btn-outline-warning');
+        btn.classList.add('btn-outline-success');
+    }
+
+    if (window.currentItems) {
+        updateListSmoothly(window.currentItems);
+    }
+}
+
+function disableSortMode() {
+    if (sortable) {
+        sortable.destroy();
+        sortable = null;
+    }
+    isSorting = false;
+    localStorage.removeItem('sortModeEnabled');
+
+    const btn = document.getElementById('sort-toggle-btn');
+    if (btn) {
+        btn.textContent = '✳️ Zmień kolejność';
+        btn.classList.remove('btn-outline-success');
+        btn.classList.add('btn-outline-warning');
+    }
+
+    if (window.currentItems) {
+        updateListSmoothly(window.currentItems);
+    }
+}
+
+function toggleSortMode() {
+    isSorting ? disableSortMode() : enableSortMode();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    const wasSorting = localStorage.getItem('sortModeEnabled') === 'true';
+    if (wasSorting) {
+        enableSortMode();
+    }
+});
--- a/static/js/toggle_button.js
+++ b/static/js/toggle_button.js
@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", function () {
    const toggleBtn = document.getElementById("tempToggle");
    const hiddenInput = document.getElementById("temporaryHidden");

@@ -23,7 +23,7 @@ document.addEventListener("DOMContentLoaded", function() {
    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";
--- a/static/js/user_expenses.js
+++ b/static/js/user_expenses.js
@@ -0,0 +1,90 @@
+document.addEventListener("DOMContentLoaded", function () {
+    let expensesChart = null;
+    const rangeLabel = document.getElementById("chartRangeLabel");
+
+    function loadExpenses(range = "monthly", startDate = null, endDate = null) {
+        let url = '/user/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);
+            });
+    }
+
+    // Inicjalizacja zakresu dat
+    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);
+
+    // Załaduj początkowy widok
+    loadExpenses();
+
+    // Przycisk własnego zakresu
+    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!");
+        }
+    });
+
+    // Zakresy predefiniowane
+    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);
+        });
+    });
+});
--- a/static/js/user_management.js
+++ b/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;
--- a/static/lib/js/Sortable.min.js
+++ b/static/lib/js/Sortable.min.js
--- a/templates/admin/admin_panel.html
+++ b/templates/admin/admin_panel.html
@@ -10,7 +10,8 @@
 <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ę">
+    <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>

@@ -20,18 +21,10 @@
          <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>
+          <a class="nav-link" href="/admin/receipts/all">📸 Wszystkie 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>
+          <a class="nav-link" href="/admin/products">🛍️ Produkty i sugestie</a>
        </li>
      </ul>
    </div>
@@ -57,7 +50,7 @@
        <h5>🔥 Najczęściej kupowane produkty:</h5>
        <ul class="mb-0">
          {% for name, count in top_products %}
-            <li>{{ name }} — {{ count }}×</li>
+          <li>{{ name }} — {{ count }}×</li>
          {% endfor %}
        </ul>
      </div>
@@ -74,133 +67,137 @@
          <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">
+        <button type="button" class="btn btn-outline-primary w-100 mt-3" data-bs-toggle="modal"
+          data-bs-target="#expensesChartModal" id="loadExpensesBtn">
          📊 Pokaż wykres wydatków
        </button>
      </div>
    </div>
  </div>

+  <div class="card bg-dark text-white mb-5">
+    <div class="card-body">
+      <h3 class="mt-4">📄 Wszystkie listy zakupowe</h3>
+      <form method="post" action="{{ url_for('delete_selected_lists') }}">
+        <div class="table-responsive">
+          <table class="table table-dark table-striped align-middle">
+            <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 e.expired %}
+                  <span class="badge bg-warning text-dark">Wygasła</span>
+                  {% else %}
+                  <span class="badge bg-success">Aktywna</span>
+                  {% endif %}
+                </td>
+                <td>{{ l.created_at.strftime('%Y-%m-%d %H:%M') if l.created_at else '-' }}</td>
+                <td>
+                  {% if l.owner_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('delete_list', list_id=l.id) }}" class="btn btn-sm btn-outline-danger">🗑️
+                    Usuń</a>
+                </td>
+              </tr>
+              {% endfor %}
+            </tbody>

-<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>
-
-    </table>
+          </table>
+        </div>
+        <button type="submit" class="btn btn-danger mt-2">🗑️ Usuń zaznaczone listy</button>
+      </form>
+    </div>
  </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>
-        <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 class="modal fade" id="expensesChartModal" tabindex="-1" aria-labelledby="expensesChartModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-xl modal-dialog-centered">
+      <div class="modal-content bg-dark text-white rounded">
+        <div class="modal-header border-0">
+          <div>
+            <h5 class="modal-title m-0" id="expensesChartModalLabel">📊 Wydatki</h5>
+            <small id="chartRangeLabel" class="text-muted">Widok: miesięczne</small>
+          </div>
+          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Zamknij"></button>
        </div>
+        <div class="modal-body pt-0">
+          <div class="d-flex flex-wrap gap-2 mb-3">
+            <button class="btn btn-outline-light btn-sm range-btn active" data-range="monthly">📅 Miesięczne</button>
+            <button class="btn btn-outline-light btn-sm range-btn" data-range="quarterly">📊 Kwartalne</button>
+            <button class="btn btn-outline-light btn-sm range-btn" data-range="halfyearly">🗓️ Półroczne</button>
+            <button class="btn btn-outline-light btn-sm range-btn" data-range="yearly">📆 Roczne</button>
+          </div>

-        <div class="input-group input-group-sm mb-3 w-100" style="max-width: 570px;">
-          <span class="input-group-text bg-secondary text-white border-secondary">Od</span>
-          <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="startDate">
-          <span class="input-group-text bg-secondary text-white border-secondary">Do</span>
-          <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="endDate">
-          <button class="btn btn-outline-success" id="customRangeBtn">Pokaż dane z zakresu 📅</button>
-        </div>
+          <div class="input-group input-group-sm mb-3 w-100" style="max-width: 570px;">
+            <span class="input-group-text bg-secondary text-white border-secondary">Od</span>
+            <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="startDate">
+            <span class="input-group-text bg-secondary text-white border-secondary">Do</span>
+            <input type="date" class="form-control bg-dark text-white border-secondary flex-grow-1" id="endDate">
+            <button class="btn btn-outline-success" id="customRangeBtn">Pokaż dane z zakresu 📅</button>
+          </div>

-        <div class="bg-dark rounded p-2">
-          <canvas id="expensesChart" height="100"></canvas>
+          <div class="bg-dark rounded p-2">
+            <canvas id="expensesChart" height="100"></canvas>
+          </div>
        </div>
      </div>
    </div>
  </div>
-</div>

-{% block scripts %}
-<script src="{{ url_for('static_bp.serve_js_lib', filename='chart.js') }}"></script>
-<script>
-document.getElementById('select-all').addEventListener('click', function(){
-  const checkboxes = document.querySelectorAll('input[name="list_ids"]');
-  checkboxes.forEach(cb => cb.checked = this.checked);
-});
-</script>
-<script src="{{ url_for('static_bp.serve_js', filename='expenses.js') }}"></script>
-{% endblock %}
+  {% block scripts %}
+  <script src="{{ url_for('static_bp.serve_js_lib', filename='chart.js') }}"></script>
+  <script>
+    document.getElementById('select-all').addEventListener('click', function () {
+      const checkboxes = document.querySelectorAll('input[name="list_ids"]');
+      checkboxes.forEach(cb => cb.checked = this.checked);
+    });
+  </script>
+  <script src="{{ url_for('static_bp.serve_js', filename='expenses.js') }}"></script>
+  {% endblock %}

-<div class="info-bar-fixed">
-  Python: {{ python_version.split()[0] }} | {{ system_info }} | RAM app: {{ app_memory }}
-</div>
-
-
-{% endblock %}
+  <div class="info-bar-fixed">
+    Python: {{ python_version.split()[0] }} | {{ system_info }} | RAM app: {{ app_memory }}
+  </div>
+  {% endblock %}
--- a/templates/admin/edit_list.html
+++ b/templates/admin/edit_list.html
@@ -3,43 +3,232 @@
 {% 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>
+  <h2 class="mb-2">🛠️ Edytuj listę #{{ list.id }}</h2>
  <a href="{{ url_for('admin_panel') }}" class="btn btn-outline-secondary">← Powrót</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>
+      <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>
+      <div class="mb-3">
+        <label for="amount" class="form-label">Całkowity wydatek (PLN)</label>
+        <input type="number" step="0.01" min="0" class="form-control bg-dark text-white border-secondary rounded"
+          id="amount" name="amount" value="{{ '%.2f'|format(total_expense) }}">
+      </div>
+
+      <div class="mb-3">
+        <label for="owner_id" class="form-label">Właściciel</label>
+        <select class="form-select bg-dark text-white border-secondary" id="owner_id" name="owner_id">
+          {% for user in users %}
+          <option value="{{ user.id }}" {% if list.owner_id==user.id %}selected{% endif %}>{{ user.username }}</option>
+          {% endfor %}
+        </select>
+      </div>
+
+      <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" id="archived" name="archived" {% if list.is_archived %}checked{%
+          endif %}>
+        <label class="form-check-label" for="archived">Archiwalna</label>
+      </div>
+
+      <div class="form-check form-switch mb-4">
+        <input class="form-check-input" type="checkbox" id="public" name="public" {% if list.is_public %}checked{% endif
+          %}>
+        <label class="form-check-label" for="public">Publiczna</label>
+      </div>
+
+      <div class="form-check form-switch mb-3">
+        <input class="form-check-input" type="checkbox" id="temporary" name="temporary" {% if list.is_temporary
+          %}checked{% endif %}>
+        <label class="form-check-label" for="temporary">Tymczasowa</label>
+      </div>
+
+      <div class="row">
+        <div class="col-md-6 mb-3">
+          <label for="expires_date" class="form-label">Data wygaśnięcia</label>
+          <input type="date" class="form-control bg-dark text-white border-secondary rounded" id="expires_date"
+            name="expires_date" value="{{ list.expires_at.strftime('%Y-%m-%d') if list.expires_at else '' }}">
+        </div>
+        <div class="col-md-6 mb-3">
+          <label for="expires_time" class="form-label">Godzina wygaśnięcia</label>
+          <input type="time" class="form-control bg-dark text-white border-secondary rounded" id="expires_time"
+            name="expires_time" value="{{ list.expires_at.strftime('%H:%M') if list.expires_at else '' }}">
+        </div>
+      </div>
+
+
+
+      <div class="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 scope="col">Nazwa</th>
+            <th scope="col">Status</th>
+            <th scope="col">Oznaczenie</th>
+            <th scope="col">Usuń</th>
+          </tr>
+        </thead>
+        <tbody>
+          {% for item in items %}
+          <tr>
+            <td>
+              <strong>{{ item.name }}</strong>
+              <small class="text-muted">(x{{ item.quantity }})</small>
+            </td>
+            <td>
+              {% if item.purchased %}
+              <span class="badge bg-success">✔️ Kupiony</span>
+              {% elif item.not_purchased %}
+              <span class="badge bg-warning text-dark">⚠️ Nie kupione</span>
+              {% else %}
+              <span class="badge bg-secondary">Nieoznaczony</span>
+              {% endif %}
+            </td>
+            <td>
+              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-grid gap-1">
+                <input type="hidden" name="action" value="toggle_purchased">
+                <input type="hidden" name="item_id" value="{{ item.id }}">
+                {% if not item.not_purchased %}
+                <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-grid gap-1">
+                  <input type="hidden" name="action" value="toggle_purchased">
+                  <input type="hidden" name="item_id" value="{{ item.id }}">
+                  {% if item.purchased %}
+                  <button type="submit" class="btn btn-outline-warning btn-sm">🚫 Odznacz</button>
+                  {% else %}
+                  <button type="submit" class="btn btn-outline-success btn-sm">✅ Oznacz</button>
+                  {% endif %}
+                </form>
+                {% endif %}
+              </form>
+
+              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-grid gap-1 mt-1">
+                <input type="hidden" name="action" value="mark_not_purchased">
+                <input type="hidden" name="item_id" value="{{ item.id }}">
+                <button type="submit" class="btn btn-outline-warning btn-sm">⚠️ Nie kupione</button>
+              </form>
+
+              {% if item.not_purchased %}
+              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}"
+                class="d-grid gap-1 mt-3 border-top pt-2">
+                <input type="hidden" name="action" value="unmark_not_purchased">
+                <input type="hidden" name="item_id" value="{{ item.id }}">
+                <button type="submit" class="btn btn-outline-success btn-sm">✅ Przywróć na liste</button>
+              </form>
+
+              {% if item.not_purchased_reason %}
+              <div class="mt-2 text-warning small border-top pt-2">
+                <strong>Powód:</strong> {{ item.not_purchased_reason }}
+              </div>
+              {% endif %}
+              {% endif %}
+            </td>
+
+            <td>
+              <form method="post" action="{{ url_for('edit_list', list_id=list.id) }}" class="d-inline">
+                <input type="hidden" name="action" value="delete_item">
+                <input type="hidden" name="item_id" value="{{ item.id }}">
+                <button type="submit" class="btn btn-danger btn-sm w-100">🗑️ Usuń</button>
+              </form>
+            </td>
+          </tr>
+          {% else %}
+          <tr>
+            <td colspan="4" 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) }}" data-lightbox="receipts"
+            data-title="{{ r.filename }}" class="glightbox">
+            <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>
+
+            {% 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">Rozmiar nieznany</p>
+            {% endif %}
+
+            <p class="small mb-1">Wgrano: {{ r.uploaded_at.strftime('%Y-%m-%d %H:%M') }}</p>
+
+            <a href="{{ url_for('delete_receipt', filename=r.filename) }}?next={{ url_for('edit_list', list_id=list.id) }}"
+              class="btn btn-sm btn-outline-danger w-100">🗑️ Usuń</a>
+          </div>
+        </div>
+      </div>
      {% endfor %}
-    </select>
-  </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>
-  </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>
+    {% if not receipts %}
+    <div class="alert alert-info text-center mt-3" role="alert">
+      Brak paragonów.
+    </div>
+    {% endif %}
  </div>
-</form>
+</div>

-{% endblock %}
+
+{% endblock %}
--- a/templates/admin/list_products.html
+++ b/templates/admin/list_products.html
@@ -8,92 +8,100 @@
 </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 %}
+  <div class="card-body">
+
+
+    <div class="card-header d-flex justify-content-between align-items-center">
+      <h4 class="m-0">📦 Produkty (z synchronizacją sugestii)</h4>
+      <span class="badge bg-secondary">{{ items|length }} produktów</span>
+    </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 %}
+              {% else %}
              Gość
-            {% endif %}
-          </td>
-          <td>
-            {% set suggestion = suggestions_dict.get(item.name.lower()) %}
-            {% if suggestion %}
+              {% endif %}
+            </td>
+            <td>
+              {% set suggestion = suggestions_dict.get(item.name.lower()) %}
+              {% 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-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>
+    </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 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() %}
          {% if suggestion.name.lower() not in item_names %}
          <tr>
            <td>{{ suggestion.id }}</td>
            <td class="fw-bold">{{ suggestion.name }}</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-danger 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 suggestions_dict|length == 0 %}
+          <tr>
+            <td colspan="3" class="text-center text-muted">Brak sugestii do wyświetlenia.</td>
+          </tr>
+          {% endif %}
+        </tbody>
+      </table>
+    </div>
  </div>
 </div>

@@ -101,4 +109,4 @@
 <script src="{{ url_for('static_bp.serve_js', filename='product_suggestion.js') }}"></script>
 {% endblock %}

-{% endblock %}
+{% endblock %}
--- a/templates/admin/receipts.html
+++ b/templates/admin/receipts.html
@@ -7,35 +7,45 @@
  <a href="/admin" class="btn btn-outline-secondary">← Powrót do panelu</a>
 </div>

-<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;">
-        </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 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('edit_list', list_id=r.list_id) }}" class="btn btn-sm btn-outline-light w-100 mb-2">✏️
+              Edytuj listę #{{ r.list_id }}</a>
+            <a href="{{ url_for('delete_receipt', filename=r.filename|urlencode) }}?next={{ request.path }}"
+              class="btn btn-sm btn-outline-danger w-100">🗑️ Usuń</a>
+
+          </div>
        </div>
      </div>
+      {% endfor %}
+
    </div>
-  {% endfor %}
-</div>

-{% if not image_files %}
-  <div class="alert alert-info text-center" role="alert">
-    Nie wgrano paragonów.
+    {% if not receipts %}
+    <div class="alert alert-info text-center mt-4" role="alert">
+      Nie wgrano żadnych paragonów.
+    </div>
+    {% endif %}
  </div>
-{% endif %}
-
-{% endblock %}
+</div>
+{% endblock %}
--- a/templates/admin/user_management.html
+++ b/templates/admin/user_management.html
@@ -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 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>
+</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">
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="pl">
+
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -11,84 +12,86 @@
  {% endif %}
  <link href="{{ url_for('static_bp.serve_css_lib', filename='bootstrap.min.css') }}" rel="stylesheet">
 </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 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 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('user_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>
-
-<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({
-      selector: '.glightbox'
-  });
-</script>
-{% endif %}
+  </script>

-{% block scripts %}{% endblock %}
+  {% 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', 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 %}
+
+  {% block scripts %}{% endblock %}

 </body>
-</html>
+
+</html>
--- a/templates/edit_my_list.html
+++ b/templates/edit_my_list.html
@@ -1,14 +1,94 @@
 {% extends 'base.html' %}
+
 {% block content %}
+<h2>Edytuj listę: <strong>{{ list.title }}</strong></h2>

-<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>
+<div class="card bg-dark text-white mb-5">
+  <div class="card-body">
+    <form method="post">
+      <div class="mb-3">
+        <label for="title" class="form-label">Nazwa listy</label>
+        <input type="text" name="title" id="title" class="form-control bg-dark text-white border-secondary rounded"
+          value="{{ list.title }}" required>
+      </div>
+
+      <div class="form-check mb-3">
+        <input class="form-check-input rounded" type="checkbox" name="is_public" id="is_public" {% if list.is_public
+          %}checked{% endif %}>
+        <label class="form-check-label" for="is_public">Lista publiczna</label>
+      </div>
+
+      <div class="form-check mb-3">
+        <input class="form-check-input rounded" type="checkbox" name="is_temporary" id="is_temporary" {% if
+          list.is_temporary %}checked{% endif %}>
+        <label class="form-check-label" for="is_temporary">Lista tymczasowa</label>
+      </div>
+
+      <div class="row mb-3">
+        <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>
+
+      <div class="form-check mb-3">
+        <input class="form-check-input" type="checkbox" name="is_archived" id="is_archived" {% if list.is_archived
+          %}checked{% endif %}>
+        <label class="form-check-label" for="is_archived">Zarchiwizowana</label>
+      </div>
+
+      <div class="btn-group mt-4" role="group">
+        <button type="submit" class="btn btn-outline-success">Zapisz</button>
+        <a href="{{ url_for('main_page') }}" class="btn btn-outline-light">Anuluj</a>
+      </div>
+
+    </form>
+
+    <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>
-  <button type="submit" class="btn btn-success">Zapisz</button>
-  <a href="{{ url_for('main_page') }}" class="btn btn-secondary">Anuluj</a>
-</form>
+</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 -->
+<form id="delete-form" method="post" action="{{ url_for('delete_user_list', list_id=list.id) }}"></form>
 {% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static_bp.serve_js', filename='confirm_delete.js') }}"></script>
+{% endblock %}
--- a/templates/errors.html
+++ b/templates/errors.html
@@ -13,4 +13,4 @@
  </div>
 </div>

-{% endblock %}
+{% endblock %}
--- a/templates/list.html
+++ b/templates/list.html
@@ -3,18 +3,18 @@
 {% 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 bg-secondary ms-2">(Archiwalna)</span>
+    {% endif %}
+  </h2>

-<a href="/" class="btn btn-outline-secondary">← Powrót do list</a>
+  <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 +22,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 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 +52,101 @@ 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|round(0) }}</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" 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
+  <span id="progress-label" class="progress-label small fw-bold
               {% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
-      {{ percent|round(0) }}%
+    {{ percent|round(0) }}%
  </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 bg-secondary">x{{ item.quantity }}</span>
+        {% endif %}
+      </span>
+
+      {% if item.note %}
+      <small class="text-danger ms-4">[ <b>{{ item.note }}</b> ]</small>
+      {% endif %}
+
+      {% if item.not_purchased_reason %}
+      <small class="text-dark ms-4">[ <b>Powód: {{ item.not_purchased_reason }}</b> ]</small>
+      {% endif %}
+    </div>
+
+    <div class="btn-group btn-group-sm" role="group">
+      {% if item.not_purchased %}
+      <button type="button" class="btn btn-outline-success" {% 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 %}
+
+      {% if not is_share %}
+      <button type="button" class="btn btn-outline-warning" {% 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-danger" {% if list.is_archived %}disabled{% else
+        %}onclick="deleteItem({{ 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 +159,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,17 +175,18 @@ 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>

@@ -169,11 +210,19 @@ 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 }};
+</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 %}
--- a/templates/list_share.html
+++ b/templates/list_share.html
@@ -4,104 +4,155 @@

 <h2 class="mb-2">
  🛍️ {{ list.title }}
+
+
  {% if list.is_archived %}
-    <span class="badge bg-secondary ms-2">(Archiwalna)</span>
+  <span class="badge 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 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 bg-secondary ms-2" style="display: none;">
+    💸 0.00 PLN
+  </span>
  {% 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 bg-secondary">x{{ item.quantity }}</span>
        {% endif %}
      </span>

      {% if item.note %}
-        <small class="text-danger ms-4">[ <b>{{ item.note }}</b> ]</small>
+      <small class="text-danger ms-4">[ <b>{{ item.note }}</b> ]</small>
+      {% endif %}
+      {% if item.not_purchased_reason %}
+      <small class="text-dark ms-4">[ <b>Powód: {{ item.not_purchased_reason }}</b> ]</small>
      {% endif %}
    </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-success" {% 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>
+      <button type="button" class="btn btn-outline-light" {% if list.is_archived %}disabled{% else
+        %}onclick="openNoteModal(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>

 {% 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ść">
+  <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>
 {% 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 class="btn btn-outline-light mb-3" 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 %}
+  {% set receipt_pattern = 'list_' ~ list.id %}

-<h5 class="mt-4">📸 Paragony dodane do tej listy</h5>
+  <h5 class="mt-4">📸 Paragony dodane do tej listy</h5>

-<div class="row g-3 mt-2" id="receiptGallery">
-  {% if receipt_files %}
+  <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 %}
  <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>
+  <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="receiptInput">
-    <button type="submit" class="btn btn-success w-100 mb-2">➕ Wgraj paragon</button>
+    <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">
+
    <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>
+
+    <div id="receiptGallery" class="mt-3"></div>
  </form>
-{% endif %}
+
+  {% endif %}

 </div>

@@ -115,7 +166,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 +179,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>
  setupList({{ list.id }}, '{{ current_user.username if current_user.is_authenticated else 'Gość' }}');
 </script>
-
 {% endblock %}

-{% endblock %}
+{% endblock %}
--- a/templates/login.html
+++ b/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>
--- a/templates/main.html
+++ b/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">
@@ -37,89 +32,89 @@
 {% 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>
+<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>

-          <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 
+      <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">
+      <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 %}
+        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 %}
 {% 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 
+<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>
+        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">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content bg-dark text-white">
@@ -129,18 +124,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">
@@ -154,4 +150,4 @@
 <script src="{{ url_for('static_bp.serve_js', filename='toggle_button.js') }}"></script>
 {% endblock %}

-{% endblock %}
+{% endblock %}
--- a/templates/system_auth.html
+++ b/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 %}

--- a/templates/user_expenses.html
+++ b/templates/user_expenses.html
@@ -0,0 +1,89 @@
+{% extends 'base.html' %}
+{% block title %}📊 Twoje wydatki{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between align-items-center flex-wrap mb-4">
+  <h2 class="mb-2">Statystyki wydatków</h2>
+  <a href="{{ url_for('main_page') }}" class="btn btn-outline-secondary">← Powrót</a>
+</div>
+
+<div class="card bg-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="table-tab" data-bs-toggle="tab" data-bs-target="#tableTab" type="button"
+          role="tab">
+          📄 Tabela
+        </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">
+      <!-- Tabela -->
+      <div class="tab-pane fade show active" id="tableTab" role="tabpanel">
+        <div class="card bg-dark text-white mb-4">
+          <div class="card-body">
+            {% if expense_table %}
+            <div class="row g-4">
+              {% for row in expense_table %}
+              <div class="col-12 col-sm-6 col-lg-4">
+                <div class="card bg-dark text-white border border-secondary h-100 shadow-sm">
+                  <div class="card-body">
+                    <h5 class="card-title text-truncate" title="{{ row.title }}">{{ row.title }}</h5>
+                    <p class="mb-1">💸 <strong>{{ '%.2f'|format(row.amount) }} PLN</strong></p>
+                    <p class="mb-0">📅 {{ row.added_at.strftime('%Y-%m-%d') }}</p>
+                  </div>
+                </div>
+              </div>
+              {% endfor %}
+            </div>
+            {% else %}
+            <div class="alert alert-info text-center mb-0">Brak wydatków do wyświetlenia.</div>
+            {% endif %}
+          </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">
+            <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-4">
+          <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="row g-2 mb-4">
+          <div class="col-6 col-md-3">
+            <input type="date" id="startDate" class="form-control bg-dark text-white border-secondary rounded">
+          </div>
+          <div class="col-6 col-md-3">
+            <input type="date" id="endDate" class="form-control bg-dark text-white border-secondary rounded">
+          </div>
+          <div class="col-12 col-md-3">
+            <button class="btn btn-outline-light w-100" id="customRangeBtn">📊 Zakres własny</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='user_expenses.js') }}"></script>
+{% endblock %}
--- a/update_missing_image_data.py
+++ b/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()
Author	SHA1	Message	Date
Mateusz Gruszczyński	ae89f55446	webp support	2025-07-20 17:34:53 +02:00
Mateusz Gruszczyński	3ebb364322	webp support	2025-07-20 17:34:21 +02:00
Mateusz Gruszczyński	470cd32745	webp support	2025-07-20 16:50:26 +02:00
Mateusz Gruszczyński	1f609b6dba	dropbne poprawki w js	2025-07-20 10:36:58 +02:00
Mateusz Gruszczyński	f71697b6db	python libheif	2025-07-19 23:04:11 +02:00
Mateusz Gruszczyński	6dc712f76e	python libheif	2025-07-19 22:59:17 +02:00
Mateusz Gruszczyński	69b1e9495f	python libheif	2025-07-19 22:56:38 +02:00
Mateusz Gruszczyński	114bf5c047	upload z zjec z galerii + prettycode	2025-07-19 22:53:49 +02:00
Mateusz Gruszczyński	d8233cb6e5	upload z zjec z galerii + prettycode	2025-07-19 22:19:51 +02:00
Mateusz Gruszczyński	7a9042ffb2	upload z zjec z galerii + prettycode	2025-07-19 22:18:23 +02:00
Mateusz Gruszczyński	1df8e44e4d	upload z zjec z galerii + prettycode	2025-07-19 22:16:21 +02:00
Mateusz Gruszczyński	c09edd04b0	upload z zjec z galerii + prettycode	2025-07-19 22:07:58 +02:00
Mateusz Gruszczyński	115d15a055	uxowe zmiany	2025-07-18 22:32:00 +02:00
gru	65a09b2305	Merge pull request 'funkcja_niekupione' (#2 ) from funkcja_niekupione into master Reviewed-on: #2	2025-07-18 22:07:28 +02:00
gru	d48654f5b6	Merge branch 'master' into funkcja_niekupione	2025-07-18 22:07:06 +02:00
Mateusz Gruszczyński	1c88e5c00b	usuniecie funckji masowego usuwania produktow z bazy	2025-07-18 12:30:18 +02:00
Mateusz Gruszczyński	69f1b4d1c8	dropbny fix	2025-07-18 12:12:43 +02:00
Mateusz Gruszczyński	8c9f0f1a6a	nowa funckcja zmiana kolejnosci produktów	2025-07-18 12:09:21 +02:00
Mateusz Gruszczyński	804b80bbf5	nowa funckcja i male zmiany w js	2025-07-18 10:45:51 +02:00
Mateusz Gruszczyński	45290a6147	nowe funkcje i zmiany ux	2025-07-17 13:48:46 +02:00
Mateusz Gruszczyński	377e592f90	nowe funkcje i zmiany ux	2025-07-17 13:35:21 +02:00
Mateusz Gruszczyński	133b91073d	nowe funkcja statystyk i poprawki	2025-07-16 23:07:58 +02:00
Mateusz Gruszczyński	6431393baf	porządkowanie kodu i poprawki js	2025-07-16 16:13:54 +02:00
Mateusz Gruszczyński	d3e50305a7	poprawki w js	2025-07-16 09:04:01 +02:00
Mateusz Gruszczyński	53394469de	poprawki w js	2025-07-15 23:55:50 +02:00
Mateusz Gruszczyński	9dcd144b34	funckja niekupione - poprawki w szablonie i backendzie	2025-07-15 23:27:54 +02:00
Mateusz Gruszczyński	4ef183e2a9	funckja niekupione	2025-07-15 23:05:21 +02:00
Mateusz Gruszczyński	3b94f93892	funckja niekupione	2025-07-15 22:48:25 +02:00
gru	1bc96a1979	Merge pull request 'ukrycie_zaznaczonych' (#1 ) from ukrycie_zaznaczonych into master Reviewed-on: #1	2025-07-12 23:39:35 +02:00
Mateusz Gruszczyński	2c6887095d	healthcheck w docker-compose	2025-07-12 23:25:42 +02:00
Mateusz Gruszczyński	94eceb76ab	healthcheck w docker-compose	2025-07-12 23:21:32 +02:00
Mateusz Gruszczyński	bd0f6003f5	healthcheck w docker-compose	2025-07-12 23:18:53 +02:00
Mateusz Gruszczyński	58e0929a4c	healthcheck w docker-compose	2025-07-12 23:13:13 +02:00
Mateusz Gruszczyński	95c11589e2	zmiany w panelu	2025-07-12 23:06:55 +02:00
Mateusz Gruszczyński	b590ebc6b6	poprawka w progressbarze	2025-07-12 15:31:04 +02:00
Mateusz Gruszczyński	d1c8970108	fixy w js	2025-07-12 15:21:16 +02:00
Mateusz Gruszczyński	eaa5fde7a5	Funkcja: suwak z ukryciem zaznaczonych prodktów	2025-07-11 23:47:59 +02:00
Mateusz Gruszczyński	78700c48c5	zmrestore old login	2025-07-11 13:22:43 +02:00