Spaces:

Antoni09
/

Test_DB

Running

App Files Files Community

Antoni09 commited on Nov 15, 2025

Commit

9c4e7c0

verified ·

1 Parent(s): 4d09f4d

Upload 10 files

Browse files

Files changed (10) hide show

Dockerfile +11 -11
README.md +36 -67
db.py +33 -13
entrypoint.sh +27 -27
index.html +109 -68
invoice_app.py +190 -190
main.js +415 -202
requirements.txt +2 -2
server.py +34 -7
styles.css +904 -568

Dockerfile CHANGED Viewed

@@ -1,12 +1,12 @@
-FROM python:3.11-slim
-WORKDIR /app
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-COPY . .
-RUN mkdir -p /data \
- && chmod -R 777 /data
-COPY web_invoice_store.json /data/web_invoice_store.json
-RUN chmod 666 /data/web_invoice_store.json
-ENV DATA_DIR=/data
-ENV PORT=7860
 CMD ["python", "server.py"]

+FROM python:3.11-slim
+WORKDIR /app
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+COPY . .
+RUN mkdir -p /data \
+ && chmod -R 777 /data
+COPY web_invoice_store.json /data/web_invoice_store.json
+RUN chmod 666 /data/web_invoice_store.json
+ENV DATA_DIR=/data
+ENV PORT=7860
 CMD ["python", "server.py"]

README.md CHANGED Viewed

@@ -9,87 +9,56 @@ pinned: false
 # Generator faktur
-Repozytorium zawiera dwa sposoby wystawiania faktur:
-1. prosta aplikacje CLI,
-2. rozbudowany frontend/ backend, ktory generuje faktury w PDF.
-## 1. Aplikacja CLI
-Niewielkie narzedzie w Pythonie, ktore pomaga zebrac podstawowe dane i wystawic fakture z pojedyncza pozycja (usluga lub towar). Dane firmy zapisywane sa lokalnie w `invoice_data.json`, a kazda wygenerowana faktura trafia do katalogu `invoices/`.
-## Wymagania
-- Python 3.8 lub nowszy
-## Pierwsze uruchomienie
-```powershell
-python invoice_app.py
-```
-1. Podaj dane firmy (nazwa, adres, NIP, numer konta).
-2. Ustaw haslo, ktore bedzie wymagane przy kolejnych uruchomieniach.
-Po zakonczeniu konfiguracji uruchom aplikacje ponownie, aby sie zalogowac i wystawic pierwsza fakture.
-## Wystawianie faktury
-```powershell
-python invoice_app.py
-```
-1. Zaloguj sie haslem ustawionym wczesniej.
-2. Podaj opis uslugi/towaru, ilosc oraz cene jednostkowa.
-3. Opcjonalnie wpisz dane klienta.
-Aplikacja automatycznie policzy kwote netto i zapisze fakture w katalogu `invoices/` jako plik tekstowy (np. `invoices/FV-20240101-120000.txt`). Dane faktury sa rowniez dopisywane do pliku `invoice_data.json`, dzieki czemu latwo przechowywac historie.
-## 2. Aplikacja webowa (frontend + backend)
-Interfejs przegladarkowy z serwerem REST (Flask), ktory przechowuje dane firmy oraz historie faktur w pliku `web_invoice_store.json`.
 ### Wymagania
 - Python 3.8+
-- Zainstalowany pakiet `Flask`
 ```powershell
-python -m pip install -r requirements.txt
 ```
-### Uruchomienie
-1. Start serwera API oraz statycznego frontendu:
-   ```powershell
-   python server.py
-   ```
-2. W przegladarce odwiedz `http://localhost:5000/`.
-### Funkcje webowego generatora
-- Pierwsze uruchomienie:
-  - konfiguracja danych sprzedawcy (nazwa, adres, kod pocztowy, miejscowosc, NIP, numer konta, haslo),
-  - dane przechowywane lokalnie na serwerze w `web_invoice_store.json`.
-- Logowanie chronione haslem (token przechowywany w `sessionStorage` przegladarki).
-- Panel po zalogowaniu:
-  - wyswietlenie danych sprzedawcy oraz mozliwosc edycji bezpośrednio z poziomu UI,
-  - formularz danych nabywcy z rozszerzonym adresem (ulica, kod pocztowy, miejscowosc, NIP),
-  - pole daty sprzedazy/wykonania uslugi (niezalezne od daty wystawienia),
-  - pozycje faktury z dynamiczna tabela: wprowadzamy cene brutto, wybieramy stawke VAT (23/8/5/0/ZW/NP), aplikacja automatycznie liczy cene netto, wartosc netto, VAT i brutto,
-  - obsluga pozycji zwolnionych (ZW) wraz z polem na podstawe prawna zwolnienia (wyswietlana na fakturze),
-  - podsumowanie stawek (np. 23% – X netto / VAT – Y, ZW – Z netto / VAT – 0) zamiast pojedynczej sumy netto,
-  - generowanie podgladu faktury oraz eksport do PDF w formacie A4 (NABYWCA po lewej, SPRZEDAWCA po prawej, tabela zgodna z nazewnictwem ustawy: „Cena jedn. netto”, „Wartosc netto (pozycja)”, „Stawka VAT”, „Kwota VAT (pozycja)”, „Wartosc brutto”).
-- Historia faktur zapisywana jest po stronie serwera (ostatnie 200 dokumentow).
-> **Uwaga:** do wygenerowania pliku PDF wykorzystywana jest biblioteka [jsPDF](https://cdnjs.com/libraries/jspdf) ladowana z CDN. Przegladarka musi miec dostep do internetu, aby pobrac skrypt.
-### Reset danych webowych
-Usun plik `web_invoice_store.json`, aby uruchomic konfiguracje od nowa (spowoduje to utrate historii faktur).
-## Reset danych CLI
-Jezeli chcesz rozpoczac konfiguracje od nowa, usun pliki `invoice_data.json` i katalog `invoices/` (uwaga: spowoduje to utrate historii wystawionych faktur).

 # Generator faktur
+Projekt oferuje dwa sposoby tworzenia faktur: prostą aplikację CLI oraz rozbudowany panel webowy z backendem Flask i estetycznym PDF-em.
+## Co w środku?
+- **CLI** – szybkie narzędzie terminalowe do pojedynczych dokumentów.
+- **Frontend + backend** – logowanie, edycja danych firmy, inteligentny formularz nabywcy, historia faktur i eleganckie PDF-y z logo.
+---
+## Aplikacja webowa
 ### Wymagania
 - Python 3.8+
+- `pip install -r requirements.txt`
+- (opcjonalnie) `NEON_DATABASE_URL` – gdy ustawisz połączenie z bazą PostgreSQL/Neon, klienci i faktury są zapisywani w bazie zamiast w pliku.
+### Uruchomienie
 ```powershell
+python server.py
+# aplikacja działa na http://localhost:5000
 ```
+### Funkcje
+- onboarding z konfiguracją firmy i logo,
+- logowanie z tokenem w `sessionStorage`,
+- edycja sprzedawcy i zarządzanie logo (PNG/JPG do 512 KB),
+- formularz nabywcy z wyszukiwarką (po nazwie lub NIP-ie, wyniki tylko z konta zalogowanego użytkownika),
+- dynamiczna tabela pozycji licząca netto/VAT/brutto oraz obsługę stawek 23/8/5/0/ZW/NP,
+- sekcja zwolnienia podatkowego i automatyczna nota prawna,
+- dashboard z filtrami dat, wykresem i historią ostatnich 200 faktur,
+- eksport PDF spójny z UI (logo nad sprzedawcą, kapsułki z sumami, czytelna tabela).
+> PDF-y generuje [jsPDF](https://cdnjs.com/libraries/jspdf) ładowany z CDN – przeglądarka musi mieć dostęp do internetu.
+### Reset danych
+- tryb plikowy: usuń `web_invoice_store.json`, aby przejść onboarding ponownie,
+- tryb Neon: wyczyść tabele w bazie lub użyj nowej bazy.
+---
+## Aplikacja CLI
+Lekki kreator w terminalu zapisujący dokumenty do katalogu `invoices/` i historię w `invoice_data.json`.
+### Uruchomienie
+```powershell
+python invoice_app.py
+```
+1. Przy pierwszym starcie wpisz dane firmy i ustaw hasło.
+2. Przy kolejnych startach logujesz się, uzupełniasz dane pozycji i (opcjonalnie) klienta.
+3. Utworzona faktura trafia do `invoices/`, a historia do pliku JSON.
+### Reset CLI
+Usuń katalog `invoices/` oraz plik `invoice_data.json`, aby rozpocząć od nowa (historia zostanie utracona).

db.py CHANGED Viewed

@@ -123,11 +123,11 @@ def update_business_logo(account_id: int, mime: Optional[str], data_base64: Opti
         (mime, data_base64, account_id),
     )
-def upsert_client(account_id: int, payload: Dict[str, str]) -> int:
-    row = fetch_one(
-        """
-        SELECT id FROM clients
-        WHERE account_id = %s AND tax_id = %s
         """,
         (account_id, payload["tax_id"]),
     )
@@ -170,14 +170,34 @@ def upsert_client(account_id: int, payload: Dict[str, str]) -> int:
                 payload["tax_id"],
                 payload.get("phone"),
             ),
-        )
-        return cur.fetchone()["id"]
-def insert_invoice(account_id: int, client_id: int, invoice: Dict[str, Any]) -> int:
-    with db_conn() as conn, conn.cursor() as cur:
-        cur.execute(
-            """
             INSERT INTO invoices (account_id, client_id, invoice_number, issued_at,
                                   sale_date, payment_term_days, exemption_note,
                                   total_net, total_vat, total_gross)

         (mime, data_base64, account_id),
     )
+def upsert_client(account_id: int, payload: Dict[str, str]) -> int:
+    row = fetch_one(
+        """
+        SELECT id FROM clients
+        WHERE account_id = %s AND tax_id = %s
         """,
         (account_id, payload["tax_id"]),
     )
                 payload["tax_id"],
                 payload.get("phone"),
             ),
+        )
+        return cur.fetchone()["id"]
+def search_clients(account_id: int, term: str, limit: int = 10) -> List[Dict[str, Any]]:
+    query = (term or "").strip().lower()
+    like = f"%{query}%"
+    return fetch_all(
+        """
+        SELECT name, tax_id, address_line, postal_code, city, phone
+        FROM clients
+        WHERE account_id = %s
+          AND (
+            %s = '' OR
+            LOWER(COALESCE(name, '')) LIKE %s OR
+            LOWER(COALESCE(tax_id, '')) LIKE %s
+          )
+        ORDER BY LOWER(COALESCE(name, tax_id, '')) ASC
+        LIMIT %s
+        """,
+        (account_id, query, like, like, limit),
+    )
+def insert_invoice(account_id: int, client_id: int, invoice: Dict[str, Any]) -> int:
+    with db_conn() as conn, conn.cursor() as cur:
+        cur.execute(
+            """
             INSERT INTO invoices (account_id, client_id, invoice_number, issued_at,
                                   sale_date, payment_term_days, exemption_note,
                                   total_net, total_vat, total_gross)

entrypoint.sh CHANGED Viewed

@@ -1,27 +1,27 @@
-#!/usr/bin/env bash
-set -euo pipefail
-# /data jest montowane przez HF; jeśli nie mamy uprawnień, pomiń
-if [ ! -d /data ]; then
-  echo "Info: /data not available (will be mounted by Spaces)."
-fi
-: "${DATABASE_URL:?ERROR: DATABASE_URL is not set}"
-python - <<'PY'
-import os
-from sqlalchemy import create_engine, text
-engine = create_engine(os.environ["DATABASE_URL"], pool_pre_ping=True)
-with engine.begin() as conn:
-    conn.execute(text("""
-        CREATE TABLE IF NOT EXISTS notes (
-            id SERIAL PRIMARY KEY,
-            body TEXT NOT NULL,
-            created_at TIMESTAMPTZ DEFAULT now()
-        )
-    """))
-PY
-# Start aplikacji – dopasuj do swojej
-exec python server.py
-# (albo: exec python server.py)

+#!/usr/bin/env bash
+set -euo pipefail
+# /data jest montowane przez HF; jeśli nie mamy uprawnień, pomiń
+if [ ! -d /data ]; then
+  echo "Info: /data not available (will be mounted by Spaces)."
+fi
+: "${DATABASE_URL:?ERROR: DATABASE_URL is not set}"
+python - <<'PY'
+import os
+from sqlalchemy import create_engine, text
+engine = create_engine(os.environ["DATABASE_URL"], pool_pre_ping=True)
+with engine.begin() as conn:
+    conn.execute(text("""
+        CREATE TABLE IF NOT EXISTS notes (
+            id SERIAL PRIMARY KEY,
+            body TEXT NOT NULL,
+            created_at TIMESTAMPTZ DEFAULT now()
+        )
+    """))
+PY
+# Start aplikacji – dopasuj do swojej
+exec python server.py
+# (albo: exec python server.py)

index.html CHANGED Viewed

@@ -10,44 +10,75 @@
   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-  <main class="container">
-    <div class="header-section">
-      <div class="logo-container">
-        <img src="small_logotyp do strony.jpg" alt="Logotyp FakturON!" class="logo">
-        <h1 class="app-title">Generator faktur</h1>
-      </div>
-      <p class="app-description">
-        Strona internetowa, gdzie możesz zupełnie bezpłatnie wystawić fakturę, edytować ją,
-        przeglądać swoje faktury oraz śledzić przychody.
-      </p>
-    </div>
-    <section id="auth-section" class="panel">
-      <div class="auth-login">
-        <div class="auth-card login-card">
-          <h3>Zaloguj się</h3>
-          <form id="login-form" class="form">
-            <label>
-              Email
-              <input type="email" name="email" autocomplete="email" required>
-            </label>
-            <label>
-              Hasło
-              <input type="password" name="password" autocomplete="current-password" required>
-            </label>
-            <button type="submit">Zaloguj</button>
-            <hr class="form-divider">
-          </form>
-          <p id="login-feedback" class="feedback" aria-live="polite"></p>
-          <div class="auth-actions">
-            <span>Nie masz konta?</span>
-            <button id="show-register-button" type="button" class="ghost-button">Stwórz konto</button>
-          </div>
-          <p id="legacy-login-hint" class="hint hidden"></p>
-        </div>
-      </div>
-    </section>
     <section id="register-section" class="panel hidden">
       <div class="auth-card register-card">
@@ -108,37 +139,40 @@
             <button id="cancel-register" type="button" class="link-button">Anuluj</button>
           </div>
         </form>
-        <p id="register-feedback" class="feedback"></p>
-        <p class="hint">Dane konta przechowywane są lokalnie na serwerze.</p>
-      </div>
-    </section>
     <section id="app-section" class="panel hidden">
-      <header class="app-header">
-        <div>
-          <h2>Panel faktur</h2>
-          <p id="current-login-label" class="app-subtitle"></p>
-        </div>
-        <nav class="app-nav">
-          <button type="button" class="app-nav-button active" data-view="invoice-builder">Nowa faktura</button>
-          <button type="button" class="app-nav-button" data-view="dashboard">Dashboard</button>
-        </nav>
-        <button id="logout-button" type="button" class="link-button">Wyloguj</button>
       </header>
       <section id="invoice-builder-section" class="app-view">
         <section class="business-section">
           <div class="business-section-header">
             <h3>Dane sprzedawcy</h3>
-            <div class="business-actions">
-              <button id="toggle-business-form" type="button" class="link-button">Edycja danych</button>
-              <label for="logo-input" class="button secondary">
-                <input id="logo-input" type="file" accept="image/png,image/jpeg" hidden>
-                Wgraj logo
-              </label>
-              <button id="remove-logo-button" type="button" class="link-button hidden">Usuń logo</button>
-            </div>
-          </div>
           <div id="business-display" class="business-display"></div>
           <div id="logo-preview" class="logo-preview hidden">
             <span class="logo-preview-label">Logo sprzedawcy</span>
@@ -199,13 +233,20 @@
             </div>
           </fieldset>
-          <fieldset>
-            <legend>Dane nabywcy</legend>
-            <div class="field-grid">
-              <label>
-                Nazwa / Imię i nazwisko
-                <input type="text" name="clientName">
-              </label>
               <label>
                 NIP
                 <input type="text" name="clientTaxId">

   <link rel="stylesheet" href="styles.css">
 </head>
 <body>
+  <main class="container">
+    <div class="brand-banner">
+      <img src="small_logotyp do strony.jpg" alt="Logotyp FakturON!" class="brand-logo">
+    </div>
+    <section id="hero-panel" class="panel hero-panel">
+      <div class="hero-columns">
+        <div class="hero-content">
+          <p class="eyebrow">Bezpłatny panel faktur</p>
+          <h1 class="app-title">Generator faktur</h1>
+          <p class="app-description">
+            Proste narzędzie do wystawiania i analizowania faktur: logujesz się, uzupełniasz dane kontrahenta,
+            zapisujesz dokument i od razu widzisz efekty w dashboardzie. Zero opłat, zero limitów.
+          </p>
+          <p class="hero-lead">
+            Cały proces zamyka się w jednym widoku – formularze, podgląd i historia korzystają z tej samej siatki,
+            dzięki czemu wyglądają identycznie na desktopie i na telefonie.
+          </p>
+          <ul class="header-highlights">
+            <li>
+              <strong>Zawsze bezpłatnie</strong>
+              <span>Generator działa bez limitów dokumentów i bez pakietów abonamentowych.</span>
+            </li>
+            <li>
+              <strong>Szybkie wystawianie</strong>
+              <span>W jednym formularzu zbierasz dane sprzedawcy, nabywcy i pozycje, a podgląd generuje się automatycznie.</span>
+            </li>
+            <li>
+              <strong>Spójny wygląd</strong>
+              <span>Każdy etap korzysta z tej samej siatki, więc łatwo pracować na desktopie i na telefonie.</span>
+            </li>
+            <li>
+              <strong>Dashboard i historia</strong>
+              <span>Po zalogowaniu od razu widać statystyki i listę faktur gotowych do pobrania.</span>
+            </li>
+          </ul>
+        </div>
+        <section id="auth-section" class="auth-panel">
+          <div class="auth-panel-header">
+            <p class="eyebrow">Logowanie</p>
+            <h2 class="auth-headline">Wejdź do generatora</h2>
+            <p class="auth-copy">Zaloguj się i prowadź całą obsługę faktur w jednym darmowym panelu.</p>
+          </div>
+          <div class="auth-login">
+            <div class="auth-card login-card">
+              <h3>Zaloguj się</h3>
+              <form id="login-form" class="form">
+                <label>
+                  Email
+                  <input type="email" name="email" autocomplete="email" required>
+                </label>
+                <label>
+                  Hasło
+                  <input type="password" name="password" autocomplete="current-password" required>
+                </label>
+                <button type="submit">Zaloguj</button>
+                <hr class="form-divider">
+              </form>
+              <p id="login-feedback" class="feedback" aria-live="polite"></p>
+              <div class="auth-actions">
+                <span>Nie masz konta?</span>
+                <button id="show-register-button" type="button" class="ghost-button">Stwórz konto</button>
+              </div>
+              <p id="legacy-login-hint" class="hint hidden"></p>
+            </div>
+          </div>
+        </section>
+      </div>
+    </section>
     <section id="register-section" class="panel hidden">
       <div class="auth-card register-card">
             <button id="cancel-register" type="button" class="link-button">Anuluj</button>
           </div>
         </form>
+        <p id="register-feedback" class="feedback"></p>
+        <p class="hint">Wskazowka: dane firmy zaktualizujesz pozniej w sekcji "Dane sprzedawcy".</p>
+      </div>
+    </section>
     <section id="app-section" class="panel hidden">
+      <header class="app-header">
+        <div>
+          <h2>Panel faktur</h2>
+        </div>
+        <div id="login-badge" class="login-badge hidden" aria-live="polite">
+          <span class="badge-label">Zalogowany jako</span>
+          <span id="current-login-label" class="badge-value"></span>
+        </div>
+        <nav class="app-nav">
+          <button type="button" class="app-nav-button active" data-view="invoice-builder">Nowa faktura</button>
+          <button type="button" class="app-nav-button" data-view="dashboard">Dashboard</button>
+        </nav>
+        <button id="logout-button" type="button" class="link-button">Wyloguj</button>
       </header>
       <section id="invoice-builder-section" class="app-view">
         <section class="business-section">
           <div class="business-section-header">
             <h3>Dane sprzedawcy</h3>
+            <div class="business-actions">
+              <button id="toggle-business-form" type="button" class="pill-button">Edycja danych</button>
+              <label for="logo-input" class="pill-button secondary">
+                <input id="logo-input" type="file" accept="image/png,image/jpeg" hidden>
+                Wgraj logo
+              </label>
+              <button id="remove-logo-button" type="button" class="pill-button danger hidden">Usuń logo</button>
+            </div>
+          </div>
           <div id="business-display" class="business-display"></div>
           <div id="logo-preview" class="logo-preview hidden">
             <span class="logo-preview-label">Logo sprzedawcy</span>
             </div>
           </fieldset>
+        <fieldset>
+          <legend>Dane nabywcy</legend>
+          <div class="client-lookup">
+            <label for="client-search">
+              Szybkie wyszukiwanie nabywcy
+              <input type="text" id="client-search" placeholder="Wpisz NIP lub nazwę klienta">
+            </label>
+            <div id="client-suggestions" class="client-suggestions hidden" role="listbox"></div>
+          </div>
+          <div class="field-grid">
+            <label>
+              Nazwa / Imię i nazwisko
+              <input type="text" name="clientName">
+            </label>
               <label>
                 NIP
                 <input type="text" name="clientTaxId">

invoice_app.py CHANGED Viewed

@@ -1,190 +1,190 @@
-import getpass
-import hashlib
-import json
-import os
-from datetime import datetime
-DATA_FILE = "invoice_data.json"
-INVOICE_FOLDER = "invoices"
-def hash_password(password: str) -> str:
-    return hashlib.sha256(password.encode("utf-8")).hexdigest()
-def prompt_non_empty(prompt: str) -> str:
-    while True:
-        value = input(prompt).strip()
-        if value:
-            return value
-        print("Pole nie moze byc puste.")
-def prompt_positive_float(prompt: str) -> float:
-    while True:
-        raw_value = input(prompt).replace(",", ".").strip()
-        try:
-            value = float(raw_value)
-        except ValueError:
-            print("Wprowadz liczbe.")
-            continue
-        if value <= 0:
-            print("Wartosc musi byc wieksza od zera.")
-            continue
-        return value
-def load_data():
-    if not os.path.exists(DATA_FILE):
-        return None
-    with open(DATA_FILE, "r", encoding="utf-8") as handle:
-        return json.load(handle)
-def save_data(data) -> None:
-    with open(DATA_FILE, "w", encoding="utf-8") as handle:
-        json.dump(data, handle, indent=2, ensure_ascii=False)
-def run_setup():
-    print("=== Konfiguracja konta przedsiebiorcy ===")
-    business = {
-        "company_name": prompt_non_empty("Nazwa firmy: "),
-        "owner_name": prompt_non_empty("Imie i nazwisko wlasciciela: "),
-        "address": prompt_non_empty("Adres: "),
-        "tax_id": prompt_non_empty("NIP: "),
-        "bank_account": prompt_non_empty("Numer konta bankowego: "),
-    }
-    print("\nUstaw haslo do logowania.")
-    while True:
-        password = getpass.getpass("Haslo: ")
-        confirm = getpass.getpass("Powtorz haslo: ")
-        if not password:
-            print("Haslo nie moze byc puste.")
-            continue
-        if password != confirm:
-            print("Hasla nie sa identyczne. Sprobuj ponownie.")
-            continue
-        break
-    data = {
-        "business": business,
-        "password_hash": hash_password(password),
-        "invoices": [],
-    }
-    save_data(data)
-    print("\nDane zapisane. Uruchom aplikacje ponownie, aby zalogowac sie i wystawiac faktury.")
-def authenticate(data) -> bool:
-    for attempt in range(3):
-        password = getpass.getpass("Haslo: ")
-        if hash_password(password) == data["password_hash"]:
-            return True
-        print("Nieprawidlowe haslo.")
-    return False
-def prompt_client_details():
-    answer = input("Dodac dane klienta? (T/N): ").strip().lower()
-    if answer not in ("t", "tak"):
-        return {}
-    print("\n=== Dane klienta ===")
-    client = {
-        "name": prompt_non_empty("Nazwa / Imie i nazwisko: "),
-        "address": prompt_non_empty("Adres: "),
-        "tax_id": input("NIP (opcjonalnie): ").strip(),
-    }
-    return client
-def format_invoice_text(invoice_id: str, business: dict, invoice: dict) -> str:
-    lines = [
-        f"Faktura: {invoice_id}",
-        f"Data wystawienia: {invoice['issued_at']}",
-        "",
-        "=== Sprzedawca ===",
-        f"Nazwa: {business['company_name']}",
-        f"Wlasciciel: {business['owner_name']}",
-        f"Adres: {business['address']}",
-        f"NIP: {business['tax_id']}",
-        f"Konto bankowe: {business['bank_account']}",
-        "",
-        "=== Nabywca ===",
-    ]
-    client = invoice.get("client", {})
-    if client:
-        lines.extend(
-            [
-                f"Nazwa: {client.get('name', '')}",
-                f"Adres: {client.get('address', '')}",
-                f"NIP: {client.get('tax_id', '') or '---'}",
-            ]
-        )
-    else:
-        lines.append("Brak danych klienta (pole opcjonalne).")
-    lines.extend(
-        [
-            "",
-            "=== Pozycja ===",
-            f"Opis: {invoice['item_description']}",
-            f"Ilosc: {invoice['quantity']}",
-            f"Cena jednostkowa: {invoice['unit_price']:.2f} PLN",
-            f"Wartosc netto: {invoice['net_total']:.2f} PLN",
-        ]
-    )
-    return "\n".join(lines)
-def create_invoice(data):
-    print("\n=== Wystaw fakture ===")
-    description = prompt_non_empty("Opis uslugi / towaru: ")
-    quantity = prompt_positive_float("Ilosc: ")
-    unit_price = prompt_positive_float("Cena jednostkowa (PLN): ")
-    client = prompt_client_details()
-    issued_at = datetime.now().strftime("%Y-%m-%d %H:%M")
-    invoice_id = datetime.now().strftime("FV-%Y%m%d-%H%M%S")
-    net_total = quantity * unit_price
-    invoice = {
-        "invoice_id": invoice_id,
-        "issued_at": issued_at,
-        "item_description": description,
-        "quantity": quantity,
-        "unit_price": unit_price,
-        "net_total": net_total,
-        "client": client,
-    }
-    os.makedirs(INVOICE_FOLDER, exist_ok=True)
-    invoice_path = os.path.join(INVOICE_FOLDER, f"{invoice_id}.txt")
-    with open(invoice_path, "w", encoding="utf-8") as handle:
-        handle.write(format_invoice_text(invoice_id, data["business"], invoice))
-    data["invoices"].append(invoice)
-    save_data(data)
-    print(f"\nFaktura zapisana do {invoice_path}")
-    print(f"Suma do zaplaty: {net_total:.2f} PLN")
-def main():
-    data = load_data()
-    if data is None:
-        run_setup()
-        return
-    print("=== Logowanie ===")
-    if not authenticate(data):
-        print("Zbyt wiele nieudanych prob logowania. Zakonczono.")
-        return
-    create_invoice(data)
-if __name__ == "__main__":
-    main()

+import getpass
+import hashlib
+import json
+import os
+from datetime import datetime
+DATA_FILE = "invoice_data.json"
+INVOICE_FOLDER = "invoices"
+def hash_password(password: str) -> str:
+    return hashlib.sha256(password.encode("utf-8")).hexdigest()
+def prompt_non_empty(prompt: str) -> str:
+    while True:
+        value = input(prompt).strip()
+        if value:
+            return value
+        print("Pole nie moze byc puste.")
+def prompt_positive_float(prompt: str) -> float:
+    while True:
+        raw_value = input(prompt).replace(",", ".").strip()
+        try:
+            value = float(raw_value)
+        except ValueError:
+            print("Wprowadz liczbe.")
+            continue
+        if value <= 0:
+            print("Wartosc musi byc wieksza od zera.")
+            continue
+        return value
+def load_data():
+    if not os.path.exists(DATA_FILE):
+        return None
+    with open(DATA_FILE, "r", encoding="utf-8") as handle:
+        return json.load(handle)
+def save_data(data) -> None:
+    with open(DATA_FILE, "w", encoding="utf-8") as handle:
+        json.dump(data, handle, indent=2, ensure_ascii=False)
+def run_setup():
+    print("=== Konfiguracja konta przedsiebiorcy ===")
+    business = {
+        "company_name": prompt_non_empty("Nazwa firmy: "),
+        "owner_name": prompt_non_empty("Imie i nazwisko wlasciciela: "),
+        "address": prompt_non_empty("Adres: "),
+        "tax_id": prompt_non_empty("NIP: "),
+        "bank_account": prompt_non_empty("Numer konta bankowego: "),
+    }
+    print("\nUstaw haslo do logowania.")
+    while True:
+        password = getpass.getpass("Haslo: ")
+        confirm = getpass.getpass("Powtorz haslo: ")
+        if not password:
+            print("Haslo nie moze byc puste.")
+            continue
+        if password != confirm:
+            print("Hasla nie sa identyczne. Sprobuj ponownie.")
+            continue
+        break
+    data = {
+        "business": business,
+        "password_hash": hash_password(password),
+        "invoices": [],
+    }
+    save_data(data)
+    print("\nDane zapisane. Uruchom aplikacje ponownie, aby zalogowac sie i wystawiac faktury.")
+def authenticate(data) -> bool:
+    for attempt in range(3):
+        password = getpass.getpass("Haslo: ")
+        if hash_password(password) == data["password_hash"]:
+            return True
+        print("Nieprawidlowe haslo.")
+    return False
+def prompt_client_details():
+    answer = input("Dodac dane klienta? (T/N): ").strip().lower()
+    if answer not in ("t", "tak"):
+        return {}
+    print("\n=== Dane klienta ===")
+    client = {
+        "name": prompt_non_empty("Nazwa / Imie i nazwisko: "),
+        "address": prompt_non_empty("Adres: "),
+        "tax_id": input("NIP (opcjonalnie): ").strip(),
+    }
+    return client
+def format_invoice_text(invoice_id: str, business: dict, invoice: dict) -> str:
+    lines = [
+        f"Faktura: {invoice_id}",
+        f"Data wystawienia: {invoice['issued_at']}",
+        "",
+        "=== Sprzedawca ===",
+        f"Nazwa: {business['company_name']}",
+        f"Wlasciciel: {business['owner_name']}",
+        f"Adres: {business['address']}",
+        f"NIP: {business['tax_id']}",
+        f"Konto bankowe: {business['bank_account']}",
+        "",
+        "=== Nabywca ===",
+    ]
+    client = invoice.get("client", {})
+    if client:
+        lines.extend(
+            [
+                f"Nazwa: {client.get('name', '')}",
+                f"Adres: {client.get('address', '')}",
+                f"NIP: {client.get('tax_id', '') or '---'}",
+            ]
+        )
+    else:
+        lines.append("Brak danych klienta (pole opcjonalne).")
+    lines.extend(
+        [
+            "",
+            "=== Pozycja ===",
+            f"Opis: {invoice['item_description']}",
+            f"Ilosc: {invoice['quantity']}",
+            f"Cena jednostkowa: {invoice['unit_price']:.2f} PLN",
+            f"Wartosc netto: {invoice['net_total']:.2f} PLN",
+        ]
+    )
+    return "\n".join(lines)
+def create_invoice(data):
+    print("\n=== Wystaw fakture ===")
+    description = prompt_non_empty("Opis uslugi / towaru: ")
+    quantity = prompt_positive_float("Ilosc: ")
+    unit_price = prompt_positive_float("Cena jednostkowa (PLN): ")
+    client = prompt_client_details()
+    issued_at = datetime.now().strftime("%Y-%m-%d %H:%M")
+    invoice_id = datetime.now().strftime("FV-%Y%m%d-%H%M%S")
+    net_total = quantity * unit_price
+    invoice = {
+        "invoice_id": invoice_id,
+        "issued_at": issued_at,
+        "item_description": description,
+        "quantity": quantity,
+        "unit_price": unit_price,
+        "net_total": net_total,
+        "client": client,
+    }
+    os.makedirs(INVOICE_FOLDER, exist_ok=True)
+    invoice_path = os.path.join(INVOICE_FOLDER, f"{invoice_id}.txt")
+    with open(invoice_path, "w", encoding="utf-8") as handle:
+        handle.write(format_invoice_text(invoice_id, data["business"], invoice))
+    data["invoices"].append(invoice)
+    save_data(data)
+    print(f"\nFaktura zapisana do {invoice_path}")
+    print(f"Suma do zaplaty: {net_total:.2f} PLN")
+def main():
+    data = load_data()
+    if data is None:
+        run_setup()
+        return
+    print("=== Logowanie ===")
+    if not authenticate(data):
+        print("Zbyt wiele nieudanych prob logowania. Zakonczono.")
+        return
+    create_invoice(data)
+if __name__ == "__main__":
+    main()

main.js CHANGED Viewed

@@ -63,8 +63,9 @@ const EXEMPTION_REASONS = [
 const EXEMPTION_REASON_LOOKUP = new Map(EXEMPTION_REASONS.map((reason) => [reason.value, reason]));
-const authSection = document.getElementById("auth-section");
-const appSection = document.getElementById("app-section");
 const registerForm = document.getElementById("register-form");
 const loginForm = document.getElementById("login-form");
@@ -73,14 +74,17 @@ const loginSubmitButtonDefaultText = loginSubmitButton && loginSubmitButton.text
 const invoiceForm = document.getElementById("invoice-form");
 const businessForm = document.getElementById("business-form");
-const registerFeedback = document.getElementById("register-feedback");
-const loginFeedback = document.getElementById("login-feedback");
-const businessFeedback = document.getElementById("business-feedback");
-const logoFeedback = document.getElementById("logo-feedback");
-const registerSection = document.getElementById("register-section");
-const showRegisterButton = document.getElementById("show-register-button");
-const backToLoginButton = document.getElementById("back-to-login");
-const cancelRegisterButton = document.getElementById("cancel-register");
 const businessDisplay = document.getElementById("business-display");
 const toggleBusinessFormButton = document.getElementById("toggle-business-form");
@@ -144,7 +148,8 @@ let invoicesChart = null;
 let maxLogoSize = 512 * 1024;
 let pdfFontPromise = null;
 let pdfFontBase64 = null;
-let customExemptionNote = "";
 function setVisibility(element, visible) {
   if (!element) {
@@ -159,17 +164,19 @@ function setVisibility(element, visible) {
   }
 }
-function setAppState(state) {
-  if (state === "app") {
-    setVisibility(authSection, false);
-    setVisibility(registerSection, false);
-    setVisibility(appSection, true);
-  } else {
-    setVisibility(authSection, true);
-    setVisibility(registerSection, false);
-    setVisibility(appSection, false);
-  }
-}
 function openRegisterPanel() {
   if (!registerSection) {
@@ -461,13 +468,22 @@ function setActiveView(view) {
   }
 }
-function updateLoginLabel() {
-  if (!currentLogin) {
-    currentLoginLabel.textContent = "";
-    return;
-  }
-  currentLoginLabel.textContent = `Zalogowany jako ${currentLogin}`;
-}
 function updateLogoPreview() {
   if (currentLogo && currentLogo.data && currentLogo.mime_type) {
@@ -786,14 +802,9 @@ function startInvoiceEdit(invoiceId) {
   invoiceForm.elements.saleDate.value = invoice.sale_date || "";
   invoiceForm.elements.paymentTerm.value = invoice.payment_term || 14;
-  if (invoice.client) {
-    invoiceForm.elements.clientName.value = invoice.client.name || "";
-    invoiceForm.elements.clientTaxId.value = invoice.client.tax_id || "";
-    invoiceForm.elements.clientAddress.value = invoice.client.address_line || "";
-    invoiceForm.elements.clientPostalCode.value = invoice.client.postal_code || "";
-    invoiceForm.elements.clientCity.value = invoice.client.city || "";
-    invoiceForm.elements.clientPhone.value = invoice.client.phone || "";
-  }
   itemsBody.innerHTML = "";
   if (Array.isArray(invoice.items) && invoice.items.length > 0) {
@@ -931,15 +942,108 @@ function fillBusinessForm(business) {
   businessForm.elements.bank_account.value = business.bank_account || "";
 }
-function setBusinessFormVisibility(visible, { preserveFeedback = false } = {}) {
-  setVisibility(businessForm, visible);
-  if (toggleBusinessFormButton) {
-    toggleBusinessFormButton.textContent = visible ? "Ukryj formularz" : "Edycja danych";
-  }
   if (!visible && !preserveFeedback) {
     clearFeedback(businessFeedback);
-  }
-}
 function vatSelectElement(initialValue = "23") {
   const select = document.createElement("select");
@@ -1374,24 +1478,33 @@ function renderInvoicePreview(invoice) {
   `;
 }
-function drawPartyBox(doc, title, lines, x, y, width) {
-  const lineHeight = 5;
-  const wrappedLines = lines.flatMap((line) => doc.splitTextToSize(line, width));
-  const boxHeight = wrappedLines.length * lineHeight + 14;
-  doc.roundedRect(x - 4, y - 8, width + 8, boxHeight, 2, 2);
-  doc.setFontSize(11);
-  doc.text(title, x, y);
-  doc.setFontSize(10);
-  let cursor = y + 5;
-  wrappedLines.forEach((line) => {
-    doc.text(line, x, cursor);
-    cursor += lineHeight;
-  });
-  return y - 8 + boxHeight;
-}
 function arrayBufferToBase64(buffer) {
   const bytes = new Uint8Array(buffer);
@@ -1404,8 +1517,16 @@ function arrayBufferToBase64(buffer) {
   return btoa(binary);
 }
-const PDF_FONT_FILE = "Roboto-VariableFont_wdth,wght.ttf";
-const PDF_FONT_NAME = "RobotoPolish";
 async function ensurePdfFont() {
   if (pdfFontPromise) {
@@ -1463,38 +1584,26 @@ async function generatePdf(business, invoice, logo) {
     doc.addFont(PDF_FONT_FILE, PDF_FONT_NAME, "normal");
   }
-  doc.setFont(PDF_FONT_NAME, "normal");
-  if (logo && logo.data && logo.mime_type) {
-    const format = logo.mime_type === "image/png" ? "PNG" : "JPEG";
-    const dataUrl = logo.data_url || `data:${logo.mime_type};base64,${logo.data}`;
-    try {
-      let logoWidth = 45;
-      let logoHeight = 18;
-      if (doc.getImageProperties) {
-        const props = doc.getImageProperties(dataUrl);
-        if (props?.width && props?.height) {
-          const ratio = props.height / props.width;
-          logoHeight = logoWidth * ratio;
-          if (logoHeight > 22) {
-            logoHeight = 22;
-            logoWidth = logoHeight / ratio;
-          }
-        }
-      }
-      const logoX = pageWidth - marginX - logoWidth;
-      const logoY = 14;
-      doc.addImage(dataUrl, format, logoX, logoY, logoWidth, logoHeight);
-    } catch (error) {
-      console.warn("Nie udało się dodać logo do PDF:", error);
-    }
-  }
-  doc.setFontSize(16);
-  doc.text(`Faktura ${invoice.invoice_id}`, marginX, cursorY);
-  doc.setFontSize(10);
-  doc.text(`Data wystawienia: ${invoice.issued_at}`, marginX, cursorY + 6);
-  doc.text(`Data sprzedaży: ${invoice.sale_date}`, marginX, cursorY + 12);
-  cursorY += 22;
   const columnWidth = 85;
   const sellerX = marginX + columnWidth + 12;
@@ -1517,9 +1626,38 @@ async function generatePdf(business, invoice, logo) {
     `Konto: ${business.bank_account}`,
   ];
-  const buyerBottom = drawPartyBox(doc, "NABYWCA", clientLines, marginX, cursorY, columnWidth);
-  const sellerBottom = drawPartyBox(doc, "SPRZEDAWCA", sellerLines, sellerX, cursorY, columnWidth);
-  cursorY = Math.max(buyerBottom, sellerBottom) + 12;
   const tableColumns = [
     { key: "name", label: "Nazwa", width: 44 },
@@ -1536,27 +1674,46 @@ async function generatePdf(business, invoice, logo) {
   tableColumns.forEach((column) => {
     column.headerLines = doc.splitTextToSize(column.label, column.width - 4);
   });
-  const headerHeight = Math.max(...tableColumns.map((column) => column.headerLines.length * headerLineHeight + 3));
-  const tableWidth = tableColumns.reduce((sum, column) => sum + column.width, 0);
-  doc.setFillColor(241, 243, 247);
-  doc.rect(marginX, cursorY, tableWidth, headerHeight, "F");
-  doc.rect(marginX, cursorY, tableWidth, headerHeight);
-  let offsetX = marginX;
-  doc.setFontSize(10);
-  tableColumns.forEach((column) => {
-    doc.rect(offsetX, cursorY, column.width, headerHeight);
-    column.headerLines.forEach((line, index) => {
-      const textY = cursorY + 4 + index * headerLineHeight;
-      doc.text((line || "").trim(), offsetX + 2, textY);
-    });
-    offsetX += column.width;
-  });
-  cursorY += headerHeight;
-  const invoiceItems = Array.isArray(invoice.items) ? invoice.items : [];
-  invoiceItems.forEach((item) => {
     const quantity = formatQuantity(item.quantity);
     const unitLabel = UNIT_OPTIONS.some((option) => option.value === item.unit) ? item.unit : DEFAULT_UNIT;
     const unitNet = formatCurrency(item.unit_price_net);
@@ -1564,80 +1721,113 @@ async function generatePdf(business, invoice, logo) {
     const vatAmount = formatCurrency(item.vat_amount);
     const grossTotal = formatCurrency(item.gross_total);
-    const wrapText = (text, width) =>
-      doc
-        .splitTextToSize(text ?? "", width)
-        .map((line) => line.trim());
     const columnData = tableColumns.map((column) => {
       switch (column.key) {
         case "name":
           return wrapText(item.name, column.width - 4);
-        case "quantity":
-          return [quantity];
-        case "unit":
-          return [unitLabel];
-        case "unitNet":
-          return [unitNet];
-        case "netTotal":
-          return [netTotal];
-        case "vatLabel":
-          return [item.vat_label];
-        case "vatAmount":
-          return [vatAmount];
-        case "grossTotal":
-          return [grossTotal];
-        default:
-          return [""];
-      }
-    });
     const rowHeight = Math.max(...columnData.map((data) => data.length)) * lineHeight + 2;
-    offsetX = marginX;
-    tableColumns.forEach((column, index) => {
-      doc.rect(offsetX, cursorY, column.width, rowHeight);
-      const lines = columnData[index];
-      lines.forEach((line, lineIndex) => {
-        const textY = cursorY + (lineIndex + 1) * lineHeight;
-        const content = (line || "").trim();
-        doc.text(content, offsetX + 2, textY);
-      });
-      offsetX += column.width;
-    });
-    cursorY += rowHeight;
-  });
-  cursorY += 10;
-  doc.setFontSize(11);
-  doc.text("Podsumowanie stawek:", marginX, cursorY);
-  cursorY += 6;
-  const summaryEntries = Array.isArray(invoice.summary) ? invoice.summary : [];
-  summaryEntries.forEach((entry) => {
-    const summaryLine = `${entry.vat_label} – Netto: ${formatCurrency(entry.net_total)} / VAT: ${formatCurrency(entry.vat_total)} / Brutto: ${formatCurrency(entry.gross_total)}`;
-    const wrapped = doc.splitTextToSize(summaryLine, 170);
-    wrapped.forEach((line) => {
-      doc.text((line || "").trim(), marginX, cursorY);
-      cursorY += lineHeight;
-    });
   });
-  cursorY += 6;
-  doc.setFontSize(12);
-  doc.text(`Suma netto: ${formatCurrency(invoice.totals.net)}`, marginX, cursorY);
-  doc.text(`Suma VAT: ${formatCurrency(invoice.totals.vat)}`, marginX, cursorY + 6);
-  doc.text(`Suma brutto: ${formatCurrency(invoice.totals.gross)}`, marginX, cursorY + 12);
-  if (invoice.payment_term) {
-    doc.text(`Termin płatności: ${invoice.payment_term} dni`, marginX, cursorY + 18);
-  }
-  cursorY += 30;
-  if (invoice.exemption_note) {
-    doc.setFontSize(10);
-    const noteLines = doc.splitTextToSize(`Podstawa prawna zwolnienia: ${invoice.exemption_note}`, 170);
-    doc.text(noteLines, marginX, cursorY);
-  }
   doc.save(`${invoice.invoice_id}.pdf`);
 }
@@ -2082,11 +2272,11 @@ if (logoInput) {
   });
 }
-if (removeLogoButton) {
-  removeLogoButton.addEventListener("click", async () => {
-    clearFeedback(logoFeedback);
-    if (!currentLogo) {
-      showFeedback(logoFeedback, "Brak logo do usunięcia.");
       return;
     }
     try {
@@ -2097,17 +2287,40 @@ if (removeLogoButton) {
     } catch (error) {
       showFeedback(logoFeedback, error.message || "Nie udało się usunąć logo.");
     }
-  });
-}
-if (cancelEditInvoiceButton) {
-  cancelEditInvoiceButton.addEventListener("click", () => {
-    exitInvoiceEdit();
-    resetInvoiceForm();
-  });
-}
-initialize().catch((error) => {
-  console.error(error);
-  showFeedback(registerFeedback, "Nie udało się uruchomić aplikacji.");
-});

 const EXEMPTION_REASON_LOOKUP = new Map(EXEMPTION_REASONS.map((reason) => [reason.value, reason]));
+const heroPanel = document.getElementById("hero-panel");
+const authSection = document.getElementById("auth-section");
+const appSection = document.getElementById("app-section");
 const registerForm = document.getElementById("register-form");
 const loginForm = document.getElementById("login-form");
 const invoiceForm = document.getElementById("invoice-form");
 const businessForm = document.getElementById("business-form");
+const registerFeedback = document.getElementById("register-feedback");
+const loginFeedback = document.getElementById("login-feedback");
+const businessFeedback = document.getElementById("business-feedback");
+const logoFeedback = document.getElementById("logo-feedback");
+const registerSection = document.getElementById("register-section");
+const showRegisterButton = document.getElementById("show-register-button");
+const backToLoginButton = document.getElementById("back-to-login");
+const cancelRegisterButton = document.getElementById("cancel-register");
+const clientSearchInput = document.getElementById("client-search");
+const clientSuggestionsContainer = document.getElementById("client-suggestions");
+const loginBadge = document.getElementById("login-badge");
 const businessDisplay = document.getElementById("business-display");
 const toggleBusinessFormButton = document.getElementById("toggle-business-form");
 let maxLogoSize = 512 * 1024;
 let pdfFontPromise = null;
 let pdfFontBase64 = null;
+let customExemptionNote = "";
+let clientLookupTimeout = null;
 function setVisibility(element, visible) {
   if (!element) {
   }
 }
+function setAppState(state) {
+  if (state === "app") {
+    setVisibility(authSection, false);
+    setVisibility(registerSection, false);
+    setVisibility(appSection, true);
+    setVisibility(heroPanel, false);
+  } else {
+    setVisibility(authSection, true);
+    setVisibility(registerSection, false);
+    setVisibility(appSection, false);
+    setVisibility(heroPanel, true);
+  }
+}
 function openRegisterPanel() {
   if (!registerSection) {
   }
 }
+function updateLoginLabel() {
+  if (!currentLoginLabel) {
+    return;
+  }
+  if (!currentLogin) {
+    currentLoginLabel.textContent = "";
+    if (loginBadge) {
+      loginBadge.classList.add("hidden");
+    }
+    return;
+  }
+  currentLoginLabel.textContent = currentLogin;
+  if (loginBadge) {
+    loginBadge.classList.remove("hidden");
+  }
+}
 function updateLogoPreview() {
   if (currentLogo && currentLogo.data && currentLogo.mime_type) {
   invoiceForm.elements.saleDate.value = invoice.sale_date || "";
   invoiceForm.elements.paymentTerm.value = invoice.payment_term || 14;
+  if (invoice.client) {
+    setClientFormValues(invoice.client);
+  }
   itemsBody.innerHTML = "";
   if (Array.isArray(invoice.items) && invoice.items.length > 0) {
   businessForm.elements.bank_account.value = business.bank_account || "";
 }
+function setBusinessFormVisibility(visible, { preserveFeedback = false } = {}) {
+  setVisibility(businessForm, visible);
+  if (toggleBusinessFormButton) {
+    toggleBusinessFormButton.textContent = visible ? "Ukryj formularz" : "Edycja danych";
+  }
   if (!visible && !preserveFeedback) {
     clearFeedback(businessFeedback);
+  }
+}
+function setClientFormValues(client = {}) {
+  if (!invoiceForm) {
+    return;
+  }
+  invoiceForm.elements.clientName.value = client.name || "";
+  invoiceForm.elements.clientTaxId.value = client.tax_id || "";
+  invoiceForm.elements.clientAddress.value = client.address_line || "";
+  invoiceForm.elements.clientPostalCode.value = client.postal_code || "";
+  invoiceForm.elements.clientCity.value = client.city || "";
+  invoiceForm.elements.clientPhone.value = client.phone || "";
+}
+function hideClientSuggestions() {
+  if (!clientSuggestionsContainer) {
+    return;
+  }
+  clientSuggestionsContainer.classList.add("hidden");
+  clientSuggestionsContainer.innerHTML = "";
+}
+function selectClientFromLookup(client) {
+  setClientFormValues(client);
+  if (clientSearchInput) {
+    const summary = [client.name, client.tax_id].filter(Boolean).join(" • ");
+    clientSearchInput.value = summary || client.name || client.tax_id || "";
+  }
+  hideClientSuggestions();
+}
+function renderClientSuggestions(clients) {
+  if (!clientSuggestionsContainer) {
+    return;
+  }
+  clientSuggestionsContainer.innerHTML = "";
+  if (!Array.isArray(clients) || clients.length === 0) {
+    const empty = document.createElement("p");
+    empty.className = "client-suggestions-empty";
+    empty.textContent = "Brak dopasowanych klientów.";
+    clientSuggestionsContainer.appendChild(empty);
+    clientSuggestionsContainer.classList.remove("hidden");
+    return;
+  }
+  const fragment = document.createDocumentFragment();
+  clients.forEach((client) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "client-suggestion";
+    button.setAttribute("role", "option");
+    button.innerHTML = `
+      <strong>${client.name || "Bez nazwy"}</strong>
+      <span>${[client.tax_id, client.city].filter(Boolean).join(" • ")}</span>
+    `;
+    button.addEventListener("click", () => {
+      selectClientFromLookup(client);
+    });
+    fragment.appendChild(button);
+  });
+  clientSuggestionsContainer.appendChild(fragment);
+  clientSuggestionsContainer.classList.remove("hidden");
+}
+async function requestClientSuggestions(term) {
+  const query = (term || "").trim();
+  if (!clientSuggestionsContainer || !clientSearchInput) {
+    return;
+  }
+  if (!authToken || query.length < 2) {
+    hideClientSuggestions();
+    return;
+  }
+  try {
+    const data = await apiRequest(`/api/clients?q=${encodeURIComponent(query)}`, {}, true);
+    renderClientSuggestions(data.clients || []);
+  } catch (error) {
+    console.error(error);
+    hideClientSuggestions();
+  }
+}
+function handleClientSearchInput(event) {
+  const term = event.target.value || "";
+  if (clientLookupTimeout) {
+    window.clearTimeout(clientLookupTimeout);
+  }
+  if (!term.trim()) {
+    hideClientSuggestions();
+    return;
+  }
+  clientLookupTimeout = window.setTimeout(() => {
+    requestClientSuggestions(term);
+  }, 250);
+}
 function vatSelectElement(initialValue = "23") {
   const select = document.createElement("select");
   `;
 }
+function drawPartyBox(doc, title, lines, x, y, width, options = {}) {
+  const lineHeight = 5;
+  const wrappedLines = lines.flatMap((line) => doc.splitTextToSize(line, width));
+  const boxHeight = wrappedLines.length * lineHeight + 18;
+  const bgColor = options.bgColor || PDF_COLORS.surface;
+  const plain = options.plain || false;
+  if (!plain) {
+    doc.setDrawColor(...PDF_COLORS.border);
+    doc.setFillColor(...bgColor);
+    doc.roundedRect(x - 4, y - 10, width + 8, boxHeight, 2.5, 2.5, "FD");
+  }
+  doc.setFontSize(11);
+  doc.setTextColor(...PDF_COLORS.muted);
+  doc.text(title.toUpperCase(), x, y - 2);
+  doc.setFontSize(10);
+  doc.setTextColor(...PDF_COLORS.text);
+  let cursor = y + 4;
+  wrappedLines.forEach((line) => {
+    doc.text(line, x, cursor);
+    cursor += lineHeight;
+  });
+  return y - 10 + boxHeight;
+}
 function arrayBufferToBase64(buffer) {
   const bytes = new Uint8Array(buffer);
   return btoa(binary);
 }
+const PDF_FONT_FILE = "Roboto-VariableFont_wdth,wght.ttf";
+const PDF_FONT_NAME = "RobotoPolish";
+const PDF_COLORS = {
+  accent: [37, 99, 235],
+  accentMuted: [226, 236, 255],
+  text: [16, 24, 40],
+  muted: [102, 112, 133],
+  border: [215, 222, 236],
+  surface: [249, 251, 255],
+};
 async function ensurePdfFont() {
   if (pdfFontPromise) {
     doc.addFont(PDF_FONT_FILE, PDF_FONT_NAME, "normal");
   }
+  doc.setFont(PDF_FONT_NAME, "normal");
+  doc.setTextColor(...PDF_COLORS.text);
+  doc.setFontSize(18);
+  doc.text("Faktura", marginX, cursorY + 2);
+  doc.setFontSize(13);
+  doc.text(invoice.invoice_id, marginX, cursorY + 10);
+  doc.setFontSize(10);
+  doc.setTextColor(...PDF_COLORS.muted);
+  const metaLines = [
+    `Data wystawienia: ${invoice.issued_at}`,
+    `Data sprzedaży: ${invoice.sale_date}`,
+  ];
+  if (invoice.payment_term) {
+    metaLines.push(`Termin płatności: ${invoice.payment_term} dni`);
+  }
+  metaLines.forEach((line, index) => {
+    doc.text(line, marginX, cursorY + 18 + index * 5);
+  });
+  cursorY += 18 + metaLines.length * 5 + 6;
   const columnWidth = 85;
   const sellerX = marginX + columnWidth + 12;
     `Konto: ${business.bank_account}`,
   ];
+  let logoBottom = cursorY;
+  if (logo && logo.data && logo.mime_type) {
+    const format = logo.mime_type === "image/png" ? "PNG" : "JPEG";
+    const dataUrl = logo.data_url || `data:${logo.mime_type};base64,${logo.data}`;
+    try {
+      let logoWidth = 40;
+      let logoHeight = 16;
+      if (doc.getImageProperties) {
+        const props = doc.getImageProperties(dataUrl);
+        if (props?.width && props?.height) {
+          const ratio = props.height / props.width;
+          logoHeight = logoWidth * ratio;
+          if (logoHeight > 20) {
+            logoHeight = 20;
+            logoWidth = logoHeight / ratio;
+          }
+        }
+      }
+      const logoX = sellerX;
+      const logoY = Math.max(cursorY - logoHeight - 12, 18);
+      doc.addImage(dataUrl, format, logoX, logoY, logoWidth, logoHeight);
+      logoBottom = logoY + logoHeight;
+    } catch (error) {
+      console.warn("Nie udało się dodać logo nad sprzedawcą:", error);
+    }
+  }
+  const buyerBottom = drawPartyBox(doc, "NABYWCA", clientLines, marginX, cursorY, columnWidth, { plain: true });
+  const sellerBottom = drawPartyBox(doc, "SPRZEDAWCA", sellerLines, sellerX, cursorY, columnWidth, {
+    plain: true,
+  });
+  cursorY = Math.max(buyerBottom, sellerBottom, logoBottom) + 12;
   const tableColumns = [
     { key: "name", label: "Nazwa", width: 44 },
   tableColumns.forEach((column) => {
     column.headerLines = doc.splitTextToSize(column.label, column.width - 4);
   });
+  const headerHeight = Math.max(...tableColumns.map((column) => column.headerLines.length * headerLineHeight + 3));
+  const tableWidth = tableColumns.reduce((sum, column) => sum + column.width, 0);
+  doc.setFillColor(...PDF_COLORS.accentMuted);
+  doc.setDrawColor(...PDF_COLORS.border);
+  doc.rect(marginX, cursorY, tableWidth, headerHeight, "F");
+  doc.rect(marginX, cursorY, tableWidth, headerHeight);
+  let offsetX = marginX;
+  doc.setFontSize(10);
+  doc.setTextColor(...PDF_COLORS.text);
+  const rightAlignedColumns = new Set(["quantity", "unit", "unitNet", "netTotal", "vatAmount", "grossTotal"]);
+  tableColumns.forEach((column) => {
+    doc.rect(offsetX, cursorY, column.width, headerHeight);
+    column.headerLines.forEach((line, index) => {
+      const textY = cursorY + 4 + index * headerLineHeight;
+      const textX = rightAlignedColumns.has(column.key) ? offsetX + column.width - 2 : offsetX + 2;
+      doc.text((line || "").trim(), textX, textY, {
+        align: rightAlignedColumns.has(column.key) ? "right" : "left",
+      });
+    });
+    offsetX += column.width;
+  });
+  cursorY += headerHeight;
+  const withPercent = (value) => {
+    if (!value) {
+      return "-";
+    }
+    if (/%$/.test(value)) {
+      return value;
+    }
+    if (/^\d+(\.\d+)?$/.test(value)) {
+      return `${value}%`;
+    }
+    return value;
+  };
+  const invoiceItems = Array.isArray(invoice.items) ? invoice.items : [];
+  invoiceItems.forEach((item, rowIndex) => {
     const quantity = formatQuantity(item.quantity);
     const unitLabel = UNIT_OPTIONS.some((option) => option.value === item.unit) ? item.unit : DEFAULT_UNIT;
     const unitNet = formatCurrency(item.unit_price_net);
     const vatAmount = formatCurrency(item.vat_amount);
     const grossTotal = formatCurrency(item.gross_total);
+    const wrapText = (text, width) => {
+      const available = Math.max(width - 4, 6);
+      return doc
+        .splitTextToSize(text ?? "", available)
+        .map((line) => line.trim());
+    };
     const columnData = tableColumns.map((column) => {
       switch (column.key) {
         case "name":
           return wrapText(item.name, column.width - 4);
+        case "quantity":
+          return wrapText(quantity, column.width);
+        case "unit":
+          return wrapText(unitLabel, column.width);
+        case "unitNet":
+          return wrapText(unitNet, column.width);
+        case "netTotal":
+          return wrapText(netTotal, column.width);
+        case "vatLabel":
+          return wrapText(withPercent(item.vat_label), column.width);
+        case "vatAmount":
+          return wrapText(vatAmount, column.width);
+        case "grossTotal":
+          return wrapText(grossTotal, column.width);
+        default:
+          return wrapText("", column.width);
+      }
+    });
     const rowHeight = Math.max(...columnData.map((data) => data.length)) * lineHeight + 2;
+    offsetX = marginX;
+    if (rowIndex % 2 === 1) {
+      doc.setFillColor(248, 250, 253);
+      doc.rect(marginX, cursorY, tableWidth, rowHeight, "F");
+    }
+    tableColumns.forEach((column, index) => {
+      doc.rect(offsetX, cursorY, column.width, rowHeight);
+      const lines = columnData[index];
+      lines.forEach((line, lineIndex) => {
+          const textY = cursorY + (lineIndex + 1) * lineHeight;
+          const content = (line || "").trim();
+          const alignRight = rightAlignedColumns.has(column.key);
+          const textX = alignRight ? offsetX + column.width - 2 : offsetX + 2;
+          doc.text(content, textX, textY, { align: alignRight ? "right" : "left" });
+      });
+      offsetX += column.width;
+    });
+    cursorY += rowHeight;
   });
+  cursorY += 10;
+  doc.setFontSize(11);
+  doc.text("Podsumowanie stawek", marginX, cursorY);
+  cursorY += 6;
+  const summaryEntries = Array.isArray(invoice.summary) ? invoice.summary : [];
+  doc.setFontSize(10);
+  doc.setTextColor(...PDF_COLORS.text);
+  summaryEntries.forEach((entry) => {
+    const summaryLine = `${withPercent(entry.vat_label)}  |  Netto: ${formatCurrency(entry.net_total)}   VAT: ${formatCurrency(entry.vat_total)}   Brutto: ${formatCurrency(entry.gross_total)}`;
+    const wrapped = doc.splitTextToSize(summaryLine, 170);
+    wrapped.forEach((line) => {
+      doc.text((line || "").trim(), marginX, cursorY);
+      cursorY += lineHeight;
+    });
+    cursorY += 2;
+  });
+  cursorY += 6;
+  const totals = [
+    { label: "Netto", value: formatCurrency(invoice.totals.net), variant: "muted" },
+    { label: "VAT", value: formatCurrency(invoice.totals.vat), variant: "muted" },
+    { label: "Brutto", value: formatCurrency(invoice.totals.gross), variant: "accent" },
+  ];
+  const chipWidth = 54;
+  const chipHeight = 20;
+  doc.setFontSize(10);
+  totals.forEach((chip, index) => {
+    const x = marginX + index * (chipWidth + 12);
+    if (chip.variant === "accent") {
+      doc.setFillColor(...PDF_COLORS.accent);
+      doc.setTextColor(255, 255, 255);
+    } else {
+      doc.setFillColor(...PDF_COLORS.surface);
+      doc.setTextColor(...PDF_COLORS.muted);
+    }
+    doc.roundedRect(x, cursorY, chipWidth, chipHeight, 4, 4, "F");
+    doc.text(chip.label.toUpperCase(), x + 3, cursorY + 6);
+    doc.setFontSize(chip.variant === "accent" ? 12 : 11);
+    if (chip.variant === "accent") {
+      doc.setTextColor(255, 255, 255);
+    } else {
+      doc.setTextColor(...PDF_COLORS.text);
+    }
+    doc.text(chip.value, x + 3, cursorY + 14);
+    doc.setFontSize(10);
+  });
+  cursorY += chipHeight + 12;
+  if (invoice.exemption_note) {
+    doc.setFontSize(10);
+    doc.setTextColor(...PDF_COLORS.text);
+    const noteLines = doc.splitTextToSize(`Podstawa prawna zwolnienia: ${invoice.exemption_note}`, 170);
+    doc.text(noteLines, marginX, cursorY);
+  }
   doc.save(`${invoice.invoice_id}.pdf`);
 }
   });
 }
+if (removeLogoButton) {
+  removeLogoButton.addEventListener("click", async () => {
+    clearFeedback(logoFeedback);
+    if (!currentLogo) {
+      showFeedback(logoFeedback, "Brak logo do usunięcia.");
       return;
     }
     try {
     } catch (error) {
       showFeedback(logoFeedback, error.message || "Nie udało się usunąć logo.");
     }
+  });
+}
+if (cancelEditInvoiceButton) {
+  cancelEditInvoiceButton.addEventListener("click", () => {
+    exitInvoiceEdit();
+    resetInvoiceForm();
+  });
+}
+if (clientSearchInput) {
+  clientSearchInput.addEventListener("input", handleClientSearchInput);
+  clientSearchInput.addEventListener("focus", () => {
+    if ((clientSearchInput.value || "").trim().length >= 2) {
+      requestClientSuggestions(clientSearchInput.value);
+    }
+  });
+}
+document.addEventListener("click", (event) => {
+  if (!clientSuggestionsContainer || !clientSearchInput) {
+    return;
+  }
+  if (
+    clientSuggestionsContainer.contains(event.target) ||
+    clientSearchInput === event.target ||
+    clientSearchInput.contains(event.target)
+  ) {
+    return;
+  }
+  hideClientSuggestions();
+});
+initialize().catch((error) => {
+  console.error(error);
+  showFeedback(registerFeedback, "Nie udało się uruchomić aplikacji.");
+});

requirements.txt CHANGED Viewed

	@@ -1,2 +1,2 @@
1	- Flask==3.0.2
2	- psycopg2-binary==2.9.9


1	+ Flask==3.0.2
2	+ psycopg2-binary==2.9.9

server.py CHANGED Viewed

@@ -19,6 +19,7 @@ from db import (
     fetch_one,
     fetch_business_logo,
     insert_invoice,
     update_business,
     update_business_logo,
     upsert_client,
@@ -331,13 +332,39 @@ def api_business() -> Any:
     if not account:
         return jsonify({"error": "Nie znaleziono konta."}), 404
-    account["business"] = payload
-    save_store(data)
-    return jsonify({"message": "Dane sprzedawcy zostaly zaktualizowane."})
-@app.route("/api/logo", methods=["GET", "POST", "DELETE"])
-def api_logo() -> Any:
     try:
         login_key = require_auth()
     except PermissionError:

     fetch_one,
     fetch_business_logo,
     insert_invoice,
+    search_clients,
     update_business,
     update_business_logo,
     upsert_client,
     if not account:
         return jsonify({"error": "Nie znaleziono konta."}), 404
+    account["business"] = payload
+    save_store(data)
+    return jsonify({"message": "Dane sprzedawcy zostaly zaktualizowane."})
+@app.route("/api/clients", methods=["GET"])
+def api_clients() -> Any:
+    try:
+        login_key = require_auth()
+    except PermissionError:
+        return jsonify({"error": "Brak autoryzacji."}), 401
+    if not DATABASE_AVAILABLE:
+        return jsonify({"clients": []})
+    try:
+        account_row = get_account_row(login_key)
+    except KeyError:
+        return jsonify({"error": "Nie znaleziono konta."}), 404
+    search_term = (request.args.get("q") or "").strip()
+    limit_param = request.args.get("limit", "10")
+    try:
+        limit_value = int(limit_param)
+    except ValueError:
+        limit_value = 10
+    limit_value = max(1, min(25, limit_value))
+    clients = search_clients(account_row["id"], search_term, limit_value)
+    return jsonify({"clients": clients})
+@app.route("/api/logo", methods=["GET", "POST", "DELETE"])
+def api_logo() -> Any:
     try:
         login_key = require_auth()
     except PermissionError:

styles.css CHANGED Viewed

@@ -1,155 +1,254 @@
-:root {
-  --bg: #f5f5f5;
-  --panel-bg: #ffffff;
-  --text: #202124;
-  --muted: #5f6368;
-  --accent: #1a73e8;
-  --danger: #c5221f;
-  --border: #dadce0;
-  --radius: 10px;
-  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-  font-family: "Roboto", "Segoe UI", Tahoma, sans-serif;
-}
-* {
-  box-sizing: border-box;
-}
-body {
-  margin: 0;
-  background: linear-gradient(180deg, #f7f9fc 0%, #eef1f6 100%);
-  color: var(--text);
-}
-.container {
-  max-width: 980px;
-  margin: 0 auto;
-  padding: 40px 20px 64px;
-}
-.header-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 32px;
-  text-align: center;
-}
-.logo-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-.logo {
-  max-width: 180px;
-  height: auto;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-.app-title {
-  text-align: center;
-  font-size: 24px;
-  margin: 0;
-  font-weight: 600;
-}
-.app-description {
-  text-align: center;
-  font-size: 16px;
-  color: var(--muted);
-  line-height: 1.5;
-  margin: 0;
-  max-width: 600px;
-}
-.panel {
-  background: var(--panel-bg);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  padding: 28px 32px;
-  margin-bottom: 32px;
-  border: 1px solid rgba(32, 33, 36, 0.08);
-}
-.auth-card {
-  border: 1px solid rgba(32, 33, 36, 0.12);
-  border-radius: var(--radius);
-  padding: 24px 28px;
-  background: #f9fbff;
-  display: grid;
-  gap: 18px;
-  max-width: 520px;
-  margin: 0 auto;
-  width: 100%;
-}
-.auth-login {
-  display: flex;
-  justify-content: center;
-}
-.login-card {
-  width: 100%;
-}
-#register-section {
-  display: flex;
-  justify-content: center;
-}
-#register-section .register-card {
-  max-width: 640px;
-  width: 100%;
-}
-.register-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-}
-.auth-card h3 {
-  margin: 0;
-}
-.auth-card .form {
-  gap: 18px;
-  width: 100%;
-}
-.auth-actions {
-  margin-top: 4px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  font-size: 14px;
-  color: var(--muted);
-  text-align: center;
-}
-.ghost-button {
-  padding: 10px 20px;
-  border: 1px solid var(--accent);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--accent);
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s ease, color 0.2s ease;
-}
-.ghost-button:hover {
-  background: rgba(26, 115, 232, 0.12);
-}
 .form-divider {
   border: none;
@@ -157,233 +256,420 @@ body {
   margin: 16px 0 0;
 }
-.register-fields {
-  display: grid;
-  gap: 24px;
-}
-.register-credentials {
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-}
-.register-company {
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-}
-.hidden {
-  display: none;
-}
-.form {
-  display: grid;
-  gap: 20px;
-}
-.field-grid {
-  display: grid;
-  gap: 18px 24px;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-}
-label {
-  display: grid;
-  gap: 8px;
-  font-weight: 600;
-  font-size: 15px;
-}
-input,
-textarea,
-select {
-  padding: 12px 14px;
-  border-radius: 8px;
-  border: 1px solid var(--border);
-  font-size: 15px;
-  background: #fbfbff;
-}
-input:focus,
-textarea:focus,
-select:focus {
-  outline: 2px solid rgba(26, 115, 232, 0.35);
-  outline-offset: 1px;
-  border-color: var(--accent);
-  background: #ffffff;
-}
-textarea {
-  resize: vertical;
-  min-height: 96px;
-}
-#exemption-note-wrapper {
-  display: grid;
-  gap: 12px;
-}
-#exemption-note-wrapper textarea[readonly] {
-  background: #f4f6fb;
   color: var(--muted);
 }
-button {
-  padding: 12px 20px;
-  border-radius: 8px;
-  border: none;
-  font-size: 15px;
-  font-weight: 600;
-  background: var(--accent);
-  color: white;
-  cursor: pointer;
-  transition: background 0.2s ease;
-}
-button:hover {
-  background: #0f5ec4;
-}
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 12px 20px;
-  border-radius: 8px;
-  border: none;
-  font-size: 15px;
-  font-weight: 600;
-  background: var(--accent);
-  color: #ffffff;
-  cursor: pointer;
-  transition: background 0.2s ease;
-}
-.button.secondary {
-  background: rgba(26, 115, 232, 0.12);
-  color: var(--accent);
-  border: 1px solid rgba(26, 115, 232, 0.25);
-}
-.button.secondary:hover {
-  background: rgba(26, 115, 232, 0.2);
-}
-.button input[type="file"] {
-  display: none;
-}
-button:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
 }
-.link-button {
-  background: none;
-  color: var(--accent);
-  padding: 0;
-}
-.link-button:hover {
-  color: #0f5ec4;
-  background: none;
-}
-.hint {
-  color: var(--muted);
-  font-size: 13px;
-  margin: 0;
-}
-.feedback {
-  color: var(--muted);
-  min-height: 20px;
   font-size: 14px;
 }
-.feedback:empty {
-  display: none;
 }
-.feedback.error {
   color: var(--danger);
 }
-.feedback.success {
-  color: #188038;
-}
-.app-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-.app-subtitle {
-  margin: 4px 0 0;
-  color: var(--muted);
-  font-size: 14px;
-}
-.app-nav {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-.app-nav-button {
-  background: rgba(26, 115, 232, 0.12);
-  color: var(--accent);
-  border: 1px solid rgba(26, 115, 232, 0.25);
-}
-.app-nav-button:hover {
-  background: rgba(26, 115, 232, 0.2);
-}
-.app-nav-button.active {
-  background: var(--accent);
-  color: #ffffff;
-}
-.app-nav-button.active:hover {
-  background: #0f5ec4;
-}
-.business-section {
-  border: 1px solid rgba(32, 33, 36, 0.08);
-  border-radius: var(--radius);
-  padding: 20px 24px;
-  background: #fbfcff;
-  margin-bottom: 24px;
-}
-.app-view {
-  display: grid;
-  gap: 24px;
-}
-.business-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-.business-actions {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-.business-display {
-  font-size: 15px;
-  line-height: 1.4;
-}
 .business-display-grid {
   display: grid;
@@ -401,24 +687,25 @@ button:disabled {
   font-weight: 600;
 }
-.logo-preview {
-  margin-top: 16px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 12px;
-  display: grid;
-  gap: 8px;
-  max-width: 260px;
-  background: #ffffff;
-}
-.logo-preview-label {
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--muted);
-  font-weight: 600;
-}
 .logo-preview img {
   max-width: 100%;
@@ -426,97 +713,124 @@ button:disabled {
   object-fit: contain;
 }
-.form-actions {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-.items-section {
-  border: 1px solid rgba(32, 33, 36, 0.08);
-  border-radius: var(--radius);
-  padding: 20px 24px;
-  background: #ffffff;
-  display: grid;
-  gap: 18px;
-}
-.items-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.items-table-wrapper {
-  overflow-x: auto;
-}
-.items-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 14px;
-}
-.items-table th,
-.items-table td {
-  border: 1px solid var(--border);
-  padding: 10px 12px;
-  text-align: left;
-}
-.items-table th {
-  background: #f1f3f7;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-}
-.items-table input,
-.items-table select {
-  width: 100%;
-  padding: 8px 10px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: #ffffff;
-}
-.items-table .remove-item {
-  color: var(--danger);
-  background: none;
-  padding: 0;
-}
-.items-table .remove-item:hover {
-  text-decoration: underline;
-}
-.totals {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  font-weight: 600;
-  margin-top: 8px;
-  padding: 12px 16px;
-  border-radius: 8px;
-  background: #f7f9ff;
-}
-.rate-summary {
-  display: grid;
-  gap: 10px;
-  margin-top: 8px;
-}
-.rate-summary-item {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  font-weight: 600;
-  padding: 8px 12px;
-  border: 1px dashed rgba(26, 115, 232, 0.25);
-  border-radius: 6px;
-  background: #ffffff;
-}
 .invoice-preview {
   display: grid;
@@ -596,110 +910,132 @@ button:disabled {
   font-size: 14px;
 }
-.dashboard-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-.filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  align-items: flex-end;
-}
-.dashboard-summary {
-  display: grid;
-  gap: 16px;
-  margin: 24px 0;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-}
-.summary-card {
-  border: 1px solid rgba(32, 33, 36, 0.08);
-  border-radius: var(--radius);
-  background: #fbfcff;
-  padding: 16px;
-  display: grid;
-  gap: 6px;
-}
-.summary-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.summary-count {
-  font-size: 20px;
-  font-weight: 700;
-}
-.summary-amount {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--accent);
-}
-.dashboard-chart {
-  border: 1px solid rgba(32, 33, 36, 0.08);
-  border-radius: var(--radius);
-  background: #ffffff;
-  padding: 16px;
-}
-.dashboard-table .items-table th,
-.dashboard-table .items-table td {
-  white-space: nowrap;
-}
-.dashboard-table .items-table td:last-child {
-  width: 160px;
-}
-.table-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-#invoices-empty {
-  margin-top: 12px;
-  text-align: center;
-}
-@media (max-width: 640px) {
-  .panel {
-    padding: 20px;
-  }
-  .header-section {
-    flex-direction: column;
-    text-align: center;
-    gap: 16px;
-  }
-  .logo {
-    max-width: 150px;
-  }
-  .app-title {
-    font-size: 20px;
-  }
-  .app-header {
-    flex-direction: column;
-    gap: 12px;
-    align-items: flex-start;
-  }
-  .business-section,
-  .items-section {
-    padding: 16px;
-  }
-}

+:root {
+  --bg: #e9eef5;
+  --panel-bg: #ffffff;
+  --surface: #f7f9ff;
+  --surface-alt: #eef3ff;
+  --text: #101828;
+  --muted: #667085;
+  --accent: #2563eb;
+  --accent-dark: #1d4ed8;
+  --accent-soft: rgba(37, 99, 235, 0.1);
+  --danger: #dc2626;
+  --border: #dfe4ee;
+  --radius: 16px;
+  --radius-sm: 10px;
+  --shadow: 0 25px 60px rgba(15, 23, 42, 0.08);
+  font-family: "Roboto", "Segoe UI", Tahoma, sans-serif;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  font-family: "Roboto", "Segoe UI", Tahoma, sans-serif;
+  color: var(--text);
+  line-height: 1.6;
+  background: radial-gradient(circle at top, #f5f7ff 0%, #e7edf8 60%, #dee5f1 100%);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 48px 32px 80px;
+  display: grid;
+  gap: 32px;
+}
+.brand-banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 0 16px;
+}
+.brand-logo {
+  max-width: 220px;
+  width: 100%;
+  height: auto;
+  border-radius: 16px;
+  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.18);
+}
+.hero-panel {
+  background: linear-gradient(135deg, #fdfbff 0%, #f5f7ff 50%, #eef3ff 100%);
+}
+.hero-columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
+  gap: 40px;
+  align-items: stretch;
+}
+.hero-content {
+  display: grid;
+  gap: 8px;
+}
+.hero-lead {
+  margin: 0;
+  color: var(--text);
+  font-size: 16px;
+}
+.eyebrow {
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--accent);
+  margin: 0;
+}
+.app-title {
+  font-size: 24px;
+  margin: 0;
+  font-weight: 700;
+  line-height: 1.15;
+  display: inline-block;
+  width: fit-content;
+}
+.app-title::after {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 3px;
+  background: var(--accent);
+  margin-top: 8px;
+  border-radius: 999px;
+}
+.app-description {
+  font-size: 16px;
+  color: var(--muted);
+  margin: 0;
+  max-width: 520px;
+}
+.header-highlights {
+  list-style: none;
+  padding: 0;
+  margin: 12px 0 0;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+.header-highlights li {
+  padding: 18px;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgba(16, 24, 40, 0.08);
+  background: #ffffff;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  display: grid;
+  gap: 6px;
+}
+.header-highlights strong {
+  font-size: 15px;
+  color: var(--accent);
+}
+.header-highlights span {
+  font-size: 14px;
+  color: var(--muted);
+}
+.panel {
+  background: var(--panel-bg);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 36px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+}
+.auth-card {
+  border: 1px solid rgba(16, 24, 40, 0.08);
+  border-radius: var(--radius);
+  padding: 28px 32px;
+  background: #ffffff;
+  display: grid;
+  gap: 20px;
+  max-width: 520px;
+  margin: 0 auto;
+  width: 100%;
+  box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
+}
+.auth-panel {
+  display: grid;
+  gap: 24px;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: var(--radius);
+  padding: 24px 28px;
+  border: 2px solid rgba(37, 99, 235, 0.4);
+  box-shadow: 0 20px 35px rgba(15, 23, 42, 0.1);
+}
+.auth-panel-header {
+  display: grid;
+  gap: 8px;
+}
+.auth-headline {
+  margin: 0;
+  font-size: 22px;
+}
+.auth-copy {
+  margin: 0;
+  color: var(--muted);
+  font-size: 15px;
+}
+.auth-login {
+  display: flex;
+  justify-content: center;
+}
+.login-card {
+  width: 100%;
+}
+#register-section {
+  display: flex;
+  justify-content: center;
+}
+#register-section .register-card {
+  max-width: 640px;
+  width: 100%;
+}
+.register-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+.auth-card h3 {
+  margin: 0;
+}
+.auth-card .form {
+  gap: 18px;
+  width: 100%;
+}
+.auth-actions {
+  margin-top: 4px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 14px;
+  color: var(--muted);
+}
+.ghost-button {
+  padding: 12px 20px;
+  border: 1px solid rgba(37, 99, 235, 0.35);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--accent);
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+.ghost-button:hover {
+  background: rgba(37, 99, 235, 0.08);
+}
 .form-divider {
   border: none;
   margin: 16px 0 0;
 }
+.register-fields {
+  display: grid;
+  gap: 28px;
+}
+.register-credentials {
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+.register-company {
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+.hidden {
+  display: none;
+}
+.form {
+  display: grid;
+  gap: 24px;
+  width: 100%;
+}
+.client-lookup {
+  position: relative;
+  display: grid;
+  gap: 8px;
+}
+.client-lookup label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+}
+.client-lookup input {
+  width: 100%;
+}
+.client-suggestions {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 6px;
+  background: #ffffff;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.15);
+  z-index: 5;
+  max-height: 320px;
+  overflow-y: auto;
+  display: grid;
+}
+.client-suggestion {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 10px 14px;
+  border: none;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  font-size: 14px;
+}
+.client-suggestion:last-child {
+  border-bottom: none;
+}
+.client-suggestion strong {
+  font-size: 14px;
+  color: var(--text);
+}
+.client-suggestion span {
+  font-size: 12px;
+  color: var(--muted);
+}
+.client-suggestions-empty {
+  padding: 12px 14px;
+  font-size: 13px;
+  color: var(--muted);
+}
+.field-grid {
+  display: grid;
+  gap: 20px 28px;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+fieldset {
+  border: 1px solid rgba(16, 24, 40, 0.1);
+  border-radius: var(--radius);
+  padding: 24px 28px 28px;
+  display: grid;
+  gap: 18px;
+  background: var(--surface);
+  margin: 0;
+}
+legend {
+  font-weight: 700;
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+  padding: 0 8px;
+}
+label {
+  display: grid;
+  gap: 8px;
+  font-weight: 600;
+  font-size: 14px;
+}
+input,
+textarea,
+select {
+  padding: 12px 16px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  font-size: 15px;
+  background: #ffffff;
+  min-height: 48px;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
+  background: #ffffff;
+}
+textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+#exemption-note-wrapper {
+  display: grid;
+  gap: 12px;
+  padding: 20px;
+  border: 1px dashed rgba(16, 24, 40, 0.15);
+  border-radius: var(--radius-sm);
+  background: #ffffff;
+}
+#exemption-note-wrapper textarea[readonly] {
+  background: #f4f6fb;
+  color: var(--muted);
+}
+button {
+  padding: 13px 28px;
+  border-radius: var(--radius-sm);
+  border: none;
+  font-size: 15px;
+  font-weight: 600;
+  background: var(--accent);
+  color: #ffffff;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
+  box-shadow: 0 15px 30px rgba(37, 99, 235, 0.25);
+}
+button:hover {
+  background: var(--accent-dark);
+  transform: translateY(-1px);
+  box-shadow: 0 20px 35px rgba(37, 99, 235, 0.3);
+}
+button:focus-visible {
+  outline: 3px solid rgba(37, 99, 235, 0.35);
+  outline-offset: 2px;
+}
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 13px 24px;
+  border-radius: var(--radius-sm);
+  border: none;
+  font-size: 15px;
+  font-weight: 600;
+  background: var(--accent);
+  color: #ffffff;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
+  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);
+}
+.button.secondary {
+  background: rgba(37, 99, 235, 0.12);
+  color: var(--accent);
+  border: 1px solid rgba(37, 99, 235, 0.25);
+  box-shadow: none;
+}
+.button.secondary:hover {
+  background: rgba(37, 99, 235, 0.2);
+}
+.button input[type="file"] {
+  display: none;
+}
+button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+.link-button {
+  background: none;
+  color: var(--accent);
+  padding: 0;
+  border-radius: 0;
+  box-shadow: none;
+  transform: none;
+  font-weight: 600;
+  transition: color 0.2s ease;
+}
+.link-button:hover {
+  color: var(--accent-dark);
+  background: none;
+  box-shadow: none;
+  transform: none;
+}
+.hint {
   color: var(--muted);
+  font-size: 13px;
+  margin: 0;
 }
+.feedback {
+  color: var(--muted);
+  min-height: 20px;
+  font-size: 14px;
+}
+.feedback:empty {
+  display: none;
+}
+.feedback.error {
+  color: var(--danger);
+}
+.feedback.success {
+  color: #188038;
 }
+.app-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+.login-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(37, 99, 235, 0.3);
+  background: rgba(37, 99, 235, 0.08);
+  font-size: 13px;
+  color: var(--muted);
+}
+.badge-label {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+  font-size: 11px;
+  color: var(--muted);
+}
+.badge-value {
+  font-weight: 700;
+  color: var(--accent);
+}
+.app-nav {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 6px;
+  background: var(--surface);
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+}
+.app-nav-button {
+  background: transparent;
+  color: var(--muted);
+  border: none;
+  padding: 10px 20px;
+  border-radius: 999px;
+  box-shadow: none;
+  transform: none;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+.app-nav-button:hover {
+  background: rgba(37, 99, 235, 0.08);
+  color: var(--text);
+  box-shadow: none;
+  transform: none;
+}
+.app-nav-button.active {
+  background: #ffffff;
+  color: var(--accent);
+  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.12);
+}
+.app-nav-button.active:hover {
+  background: #ffffff;
+}
+.app-view {
+  display: grid;
+  gap: 32px;
+}
+.business-section {
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: var(--radius);
+  padding: 28px 32px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
+  display: grid;
+  gap: 18px;
+}
+.business-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.business-actions {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.pill-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(37, 99, 235, 0.35);
+  background: rgba(37, 99, 235, 0.08);
+  color: var(--accent);
+  padding: 8px 16px;
+  border-radius: 999px;
   font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+  min-height: 38px;
+  height: 38px;
 }
+.pill-button:hover,
+.pill-button:focus-visible {
+  background: rgba(37, 99, 235, 0.15);
 }
+.pill-button.secondary {
+  background: #ffffff;
+}
+.pill-button.danger {
+  border-color: rgba(220, 38, 38, 0.4);
   color: var(--danger);
+  background: rgba(220, 38, 38, 0.08);
+}
+.pill-button.danger:hover,
+.pill-button.danger:focus-visible {
+  background: rgba(220, 38, 38, 0.15);
+}
+.pill-button input[type="file"] {
+  display: none;
+}
+.business-display {
+  font-size: 15px;
+  line-height: 1.4;
 }
 .business-display-grid {
   display: grid;
   font-weight: 600;
 }
+.logo-preview {
+  margin-top: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 16px;
+  display: grid;
+  gap: 10px;
+  max-width: 280px;
+  background: #ffffff;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
+}
+.logo-preview-label {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted);
+  font-weight: 700;
+}
 .logo-preview img {
   max-width: 100%;
   object-fit: contain;
 }
+.form-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.items-section {
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: var(--radius);
+  padding: 24px 28px;
+  background: #ffffff;
+  display: grid;
+  gap: 20px;
+}
+.items-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.items-table-wrapper {
+  overflow-x: auto;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: #ffffff;
+}
+.items-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 14px;
+}
+.items-table th,
+.items-table td {
+  padding: 12px 14px;
+  text-align: left;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+.items-table tr:last-child td {
+  border-bottom: none;
+}
+.items-table th {
+  background: var(--surface);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 12px;
+  color: var(--muted);
+}
+.items-table tbody tr:nth-child(even) {
+  background: rgba(37, 99, 235, 0.03);
+}
+.items-table tbody tr:hover {
+  background: rgba(37, 99, 235, 0.08);
+}
+.items-table input,
+.items-table select {
+  width: 100%;
+  min-height: 44px;
+}
+.items-table .remove-item {
+  color: var(--danger);
+  background: none;
+  padding: 0;
+  box-shadow: none;
+}
+.items-table .remove-item:hover {
+  text-decoration: underline;
+  background: none;
+}
+.totals {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 16px;
+  font-weight: 600;
+  margin-top: 8px;
+  padding: 0;
+}
+.totals span {
+  display: block;
+  padding: 14px 16px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--surface);
+  text-align: center;
+}
+.rate-summary {
+  display: grid;
+  gap: 10px;
+  margin-top: 8px;
+}
+.rate-summary-item {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-weight: 600;
+  padding: 12px 16px;
+  border: 1px dashed rgba(37, 99, 235, 0.4);
+  border-radius: var(--radius-sm);
+  background: #ffffff;
+}
 .invoice-preview {
   display: grid;
   font-size: 14px;
 }
+.dashboard-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+  padding-bottom: 12px;
+}
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: flex-end;
+}
+.dashboard-summary {
+  display: grid;
+  gap: 18px;
+  margin: 24px 0;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+.summary-card {
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: var(--radius);
+  background: var(--surface);
+  padding: 20px;
+  display: grid;
+  gap: 8px;
+  box-shadow: 0 12px 25px rgba(15, 23, 42, 0.08);
+}
+.summary-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.summary-count {
+  font-size: 22px;
+  font-weight: 700;
+}
+.summary-amount {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--accent);
+}
+.dashboard-chart {
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: var(--radius);
+  background: #ffffff;
+  padding: 24px;
+  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
+}
+.dashboard-table .items-table th,
+.dashboard-table .items-table td {
+  white-space: nowrap;
+}
+.dashboard-table .items-table td:last-child {
+  width: 160px;
+}
+.table-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+#invoices-empty {
+  margin-top: 12px;
+  text-align: center;
+  padding: 12px 0;
+}
+@media (max-width: 1024px) {
+  .container {
+    padding: 40px 24px 64px;
+  }
+  .hero-columns {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 900px) {
+  .hero-columns {
+    grid-template-columns: 1fr;
+  }
+}
+@media (max-width: 640px) {
+  .container {
+    padding: 32px 16px 56px;
+  }
+  .panel {
+    padding: 24px;
+  }
+  .brand-logo {
+    max-width: 160px;
+  }
+  .app-title {
+    font-size: 24px;
+  }
+  .auth-panel {
+    grid-template-columns: 1fr;
+  }
+  .app-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+  }
+  .business-section,
+  .items-section {
+    padding: 20px;
+  }
+}