feat: implement user profile initialization and order history management for stolik3_api

public/assets/js/stolik3_api.js

@@ -7,11 +7,11 @@ window.kitchenAnimations = [
 ];
 window.selectedAnimationHtml = null;
 
-    const params = new URLSearchParams(location.search);
+const params = new URLSearchParams(location.search);
-    let hashParam = (params.get("h") || "").trim();
+let hashParam = (params.get("h") || "").trim();
 
-    // Jeśli brak hasha w URL – zapytaj użytkownika (np. do testów)
+// Jeśli brak hasha w URL – zapytaj użytkownika (np. do testów)
-    if (!hashParam) {
+if (!hashParam) {
   const input = prompt("Podaj bezpieczny hash stolika (wymagane):");
   const trimmed = (input || "").trim();
   if (trimmed) {
@@ -19,54 +19,150 @@ window.selectedAnimationHtml = null;
     newUrl.searchParams.set("h", trimmed);
     location.replace(newUrl.toString());
   }
+}
+
+let tableParam = ""; // Puste, zostanie uzupełnione przez backend
+
+// USER PROFILE LOGIC
+const userProfileKey = "karczma_user_profile";
+const USER_PROFILE_EXPIRE_MS = 180 * 24 * 60 * 60 * 1000; // ~6 months
+
+function initUserProfile() {
+  try {
+    const raw = localStorage.getItem(userProfileKey);
+    let profile = null;
+    if (raw) {
+      profile = JSON.parse(raw);
     }
 
-    let tableParam = ""; // Puste, zostanie uzupełnione przez backend
+    const now = Date.now();
 
-    // UI Elements
+    // Check if profile exists and is valid
-    const loadingScreen = document.getElementById("loadingScreen");
+    if (profile) {
-    const loaderMsg = document.getElementById("loaderMsg");
+      if (profile.declined) {
-    const tableLabel = document.getElementById("tableLabel");
+        // User declined in the past, don't ask again.
-    const prepStatus = document.getElementById("prepStatus");
+        return;
-    const progressBar = document.getElementById("progressBar");
+      }
-    const statusMeta = document.getElementById("statusMeta");
-    const itemsList = document.getElementById("itemsList");
-    const emptyState = document.getElementById("emptyState");
-    const metaFooter = document.getElementById("metaFooter");
-    const statusIcon = document.getElementById("statusIcon");
-    const storageKey = `stolik2_state_${(tableParam || "unknown").toLowerCase()}`;
-    const historyKey = "stolik2_global_history";
-    const historySection = document.getElementById("historySection");
-    const historyList = document.getElementById("historyList");
-    const SIX_MONTHS_MS = 180 * 24 * 60 * 60 * 1000;
-    const HOT_WINDOW_MS = 5 * 60 * 60 * 1000;
 
-    // Dynamic Loader Messages
+      // If expired, maybe we want to ask again or we could just keep it if they didn't decline.
-    const LOADER_MIN_MS = 10_000;
+      // The user said: "trzymamy przez wiele miesięcy (odnawiamy datę przy każdej wizycie)"
-    const loadStartTime = Date.now();
+      if (now - profile.lastVisit > USER_PROFILE_EXPIRE_MS) {
+        // Profile expired. Ask again.
+        showNameDialog();
+      } else {
+        // Profile valid, renew date and show greeting
+        profile.lastVisit = now;
+        localStorage.setItem(userProfileKey, JSON.stringify(profile));
+        showGreeting(profile.name, profile.firstVisit || profile.lastVisit);
+      }
+    } else {
+      // No profile, ask for name
+      showNameDialog();
+    }
+  } catch (err) {
+    // If error parsing, ask again
+    showNameDialog();
+  }
+}
 
-    const msgs = ["Rozgrzewamy piece...", "Szef kuchni sprawdza składniki...", "Łączenie z sercem restauracji...", "Prawie gotowe..."];
+function showNameDialog() {
-    let msgIdx = 0;
+  const modal = document.getElementById("nameModal");
-    const msgInterval = setInterval(() => {
+  if (modal) {
+    modal.classList.add("active");
+    document.body.style.overflow = 'hidden';
+  }
+}
+
+function hideNameDialog() {
+  const modal = document.getElementById("nameModal");
+  if (modal) {
+    modal.classList.remove("active");
+    document.body.style.overflow = '';
+  }
+}
+
+window.saveUserName = function () {
+  const input = document.getElementById("userNameInput").value.trim();
+  if (input) {
+    const now = Date.now();
+    const profile = { name: input, firstVisit: now, lastVisit: now, declined: false };
+    localStorage.setItem(userProfileKey, JSON.stringify(profile));
+    hideNameDialog();
+    showGreeting(profile.name, profile.firstVisit);
+  }
+};
+
+window.declineUserName = function () {
+  const profile = { name: null, firstVisit: Date.now(), lastVisit: Date.now(), declined: true };
+  localStorage.setItem(userProfileKey, JSON.stringify(profile));
+  hideNameDialog();
+};
+
+function showGreeting(name, firstVisitTime) {
+  const banner = document.getElementById("greetingBanner");
+  if (banner && name) {
+    const isToday = new Date(firstVisitTime).toDateString() === new Date().toDateString();
+
+    if (isToday) {
+      banner.innerHTML = `Cześć ${name}, życzymy pysznego posiłku!`;
+    } else {
+      banner.innerHTML = `Witaj ${name}, super że do nas wracasz!`;
+    }
+    banner.style.display = "block";
+  }
+}
+
+// Call init
+initUserProfile();
+
+// UI Elements
+const loadingScreen = document.getElementById("loadingScreen");
+const loaderMsg = document.getElementById("loaderMsg");
+const tableLabel = document.getElementById("tableLabel");
+const prepStatus = document.getElementById("prepStatus");
+const progressBar = document.getElementById("progressBar");
+const statusMeta = document.getElementById("statusMeta");
+const itemsList = document.getElementById("itemsList");
+const emptyState = document.getElementById("emptyState");
+const metaFooter = document.getElementById("metaFooter");
+const statusIcon = document.getElementById("statusIcon");
+const storageKey = `stolik2_state_${(tableParam || "unknown").toLowerCase()}`;
+const historyKey = "stolik2_global_history";
+const historySection = document.getElementById("historySection");
+const historyList = document.getElementById("historyList");
+const SIX_MONTHS_MS = 180 * 24 * 60 * 60 * 1000;
+const HOT_WINDOW_MS = 5 * 60 * 60 * 1000;
+
+// Dynamic Loader Messages
+const LOADER_MIN_MS = 10_000;
+const loadStartTime = Date.now();
+
+const msgs = ["Rozgrzewamy piece...", "Szef kuchni sprawdza składniki...", "Łączenie z sercem restauracji...", "Prawie gotowe..."];
+let msgIdx = 0;
+const msgInterval = setInterval(() => {
   msgIdx = (msgIdx + 1) % msgs.length;
   loaderMsg.textContent = msgs[msgIdx];
-    }, 4000);
+}, 4000);
 
-    // Initial State
+// Initial State
-    if (tableParam) {
+if (tableParam) {
   tableLabel.textContent = `Stolik ${tableParam}`;
-    }
+}
 
-    function hideLoader() {
+function hideLoader() {
   const elapsed = Date.now() - loadStartTime;
   const remaining = Math.max(0, LOADER_MIN_MS - elapsed);
   setTimeout(() => {
     loadingScreen.classList.add("hidden");
     clearInterval(msgInterval);
-      }, remaining);
+    const bottomNav = document.getElementById("bottomNav");
+    if (bottomNav) {
+      bottomNav.style.display = "";
     }
+  }, remaining);
+}
 
-    function updateUI(bills) {
+function updateUI(bills) {
   // Hide loader after minimum display time
   hideLoader();
 
@@ -81,9 +177,9 @@ window.selectedAnimationHtml = null;
 
   renderItems(items);
   updateStatus(bills, items);
-    }
+}
 
-    function detectTableCandidates(bill) {
+function detectTableCandidates(bill) {
   const remark = String(bill?.Remark || "");
   const description = String(bill?.Description || "").trim();
 
@@ -95,20 +191,23 @@ window.selectedAnimationHtml = null;
   const fromDescription = description.toLowerCase();
 
   return { fromRemark, fromDescription, remark: remark.toLowerCase() };
-    }
+}
+
+function showEmptyState() {
+  const title = document.getElementById("ordersTitle");
+  if (title) title.classList.add("hidden");
   
-    function showEmptyState() {
   emptyState.classList.remove("hidden");
   itemsList.innerHTML = "";
   prepStatus.textContent = "Brak aktywnych zamówień";
   statusIcon.textContent = "🍃";
   progressBar.style.width = "0%";
-      statusMeta.textContent = "Zapraszamy do złożenia zamówienia u kelnera.";
+  statusMeta.textContent = "Zapraszamy do sprawdzenia naszego menu.";
   // Historia może istnieć nawet gdy brak bieżących pozycji
   renderGlobalHistory();
-    }
+}
 
-    function normalizeArticleName(rawName) {
+function normalizeArticleName(rawName) {
   const name = String(rawName || "Pozycja");
 
   // Usuwa gramatury typu: "300G", "250 G", "500/200/150G".
@@ -121,9 +220,9 @@ window.selectedAnimationHtml = null;
     .replace(/\s{2,}/g, " ")
     .replace(/\s+([,.;:!?])/g, "$1")
     .trim() || "Pozycja";
-    }
+}
 
-    function loadPersistedItems() {
+function loadPersistedItems() {
   try {
     const raw = localStorage.getItem(storageKey);
     if (!raw) return [];
@@ -132,17 +231,17 @@ window.selectedAnimationHtml = null;
   } catch {
     return [];
   }
-    }
+}
 
-    function savePersistedItems(items) {
+function savePersistedItems(items) {
   try {
     localStorage.setItem(storageKey, JSON.stringify(items));
   } catch {
     // brak miejsca/tryb prywatny
   }
-    }
+}
 
-    function loadGlobalHistory() {
+function loadGlobalHistory() {
   try {
     const raw = localStorage.getItem(historyKey);
     if (!raw) return [];
@@ -151,9 +250,9 @@ window.selectedAnimationHtml = null;
   } catch {
     return [];
   }
-    }
+}
 
-    function saveGlobalHistory(entries) {
+function saveGlobalHistory(entries) {
   const now = Date.now();
   const cleaned = entries
     .filter((e) => e && e.name && Number.isFinite(e.archivedAt))
@@ -164,9 +263,9 @@ window.selectedAnimationHtml = null;
   } catch {
     // ignore storage errors
   }
-    }
+}
 
-    function addItemsToGlobalHistory(items, sourceTable) {
+function addItemsToGlobalHistory(items, sourceTable) {
   if (!items.length) return;
   const now = Date.now();
   const existing = loadGlobalHistory();
@@ -189,9 +288,9 @@ window.selectedAnimationHtml = null;
 
   if (!toAdd.length) return;
   saveGlobalHistory([...existing, ...toAdd]);
-    }
+}
 
-    function renderGlobalHistory() {
+function renderGlobalHistory() {
   const now = Date.now();
   const history = loadGlobalHistory()
     .filter((e) => (now - (e.archivedAt || 0)) <= SIX_MONTHS_MS)
@@ -215,21 +314,29 @@ window.selectedAnimationHtml = null;
     div.innerHTML = `
           <div class="item-info">
             <span class="item-name">${entry.name}</span>
-            <span class="item-meta">Stolik ${entry.sourceTable || "?"} • ${dt.toLocaleDateString("pl-PL")} ${dt.toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}</span>
+            <span class="item-meta">Stolik ${entry.sourceTable || "?"} • ${dt.toLocaleDateString("pl-PL")} ${dt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
           </div>
           <div class="item-qty">x${entry.qty}</div>
         `;
     historyList.appendChild(div);
   });
-    }
+}
 
-    function mergeWithPersistedItems(articles) {
+window.clearGlobalHistory = function(e) {
+  if (e) e.preventDefault();
+  if (confirm("Czy na pewno chcesz usunąć historię swoich poprzednich zamówień?")) {
+    localStorage.removeItem(historyKey);
+    renderGlobalHistory();
+  }
+};
+
+function mergeWithPersistedItems(articles) {
   const current = new Map();
 
   articles.forEach(a => {
     const name = normalizeArticleName(a.Name);
-        const todo = parseFloat(String(a.QuantityToDo || a.QuantitySet || "0").replace(",","."));
+    const todo = parseFloat(String(a.QuantityToDo || a.QuantitySet || "0").replace(",", "."));
-        const done = parseFloat(String(a.QuantityDone || "0").replace(",","."));
+    const done = parseFloat(String(a.QuantityDone || "0").replace(",", "."));
 
     if (!current.has(name)) {
       current.set(name, { name, qty: 0, done: 0, present: true, completedByDisappear: false });
@@ -270,9 +377,12 @@ window.selectedAnimationHtml = null;
 
   savePersistedItems(merged);
   return merged;
-    }
+}
+
+function renderItems(items) {
+  const title = document.getElementById("ordersTitle");
+  if (title) title.classList.remove("hidden");
 
-    function renderItems(items) {
   emptyState.classList.add("hidden");
   itemsList.innerHTML = "";
 
@@ -299,9 +409,9 @@ window.selectedAnimationHtml = null;
   });
 
   renderGlobalHistory();
-    }
+}
 
-    function updateStatus(bills, items) {
+function updateStatus(bills, items) {
   let total = 0;
   let done = 0;
   items.forEach(i => {
@@ -330,15 +440,15 @@ window.selectedAnimationHtml = null;
   }
 
   // Footer meta
-      const newest = [...bills].sort((a,b) => new Date(b?.Date || 0) - new Date(a?.Date || 0))[0];
+  const newest = [...bills].sort((a, b) => new Date(b?.Date || 0) - new Date(a?.Date || 0))[0];
   const time = newest?.Date
-        ? new Date(newest.Date).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
+    ? new Date(newest.Date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
     : "--:--";
   metaFooter.textContent = `Zamówienie złożone o godzinie ${time} • Stolik ${tableParam}`;
-    }
+}
 
-    // API Fetch Logic
+// API Fetch Logic
-    async function fetchOrders() {
+async function fetchOrders() {
   try {
     if (!hashParam) {
       updateUI([]);
@@ -382,7 +492,7 @@ window.selectedAnimationHtml = null;
 
       // Najnowszy czas dodania (do pokazania w stopce)
       const latestDate = matches.length > 0
-              ? matches.sort((a,b) => new Date(b.DataDodania) - new Date(a.DataDodania))[0].DataDodania 
+        ? matches.sort((a, b) => new Date(b.DataDodania) - new Date(a.DataDodania))[0].DataDodania
         : null;
 
       // Przekazanie do dotychczasowej logiki aktualizującej UI (w odpowiednim formacie)
@@ -397,15 +507,15 @@ window.selectedAnimationHtml = null;
   } catch (err) {
     loaderMsg.textContent = "Problem z połączeniem. Próbujemy ponownie...";
   }
-    }
+}
 
-    fetchOrders();
+fetchOrders();
-    setInterval(fetchOrders, 10000);
+setInterval(fetchOrders, 10000);
 
-    // --- CALL WAITER LOGIC ---
+// --- CALL WAITER LOGIC ---
-    let billState = { payment: '', doc: '', nip: '', company: null };
+let billState = { payment: '', doc: '', nip: '', company: null };
 
-    function showToast(msg) {
+function showToast(msg) {
   const t = document.getElementById("toastMsg");
   document.getElementById("toastText").textContent = msg;
 
@@ -414,39 +524,39 @@ window.selectedAnimationHtml = null;
   t.classList.add("active");
 
   setTimeout(() => t.classList.remove("active"), 3500);
-    }
+}
 
-    function sendApiSimulated(actionName, details) {
+function sendApiSimulated(actionName, details) {
   console.log(`[SYMULACJA API] Akcja: ${actionName}`, details);
   // Przykładowe wysłanie docelowo:
   // if (window.socket && window.socket.readyState === WebSocket.OPEN) {
   //   window.socket.send(JSON.stringify({ action: "sendUpstream", payload: { type: actionName, table: tableParam, ...details } }));
   // }
-    }
+}
 
-    window.callWaiter = function(type) {
+window.callWaiter = function (type) {
   if (type === 'order') {
     sendApiSimulated("CallWaiter_Order", { table: tableParam });
     showToast("Kelner wkrótce do Ciebie podejdzie!");
   }
-    };
+};
 
-    window.openWaiterDialog = function() {
+window.openWaiterDialog = function () {
   document.getElementById("waiterModal").classList.add("active");
   document.body.style.overflow = 'hidden';
-    };
+};
 
-    window.closeWaiterDialog = function() {
+window.closeWaiterDialog = function () {
   document.getElementById("waiterModal").classList.remove("active");
   document.body.style.overflow = '';
-    };
+};
 
-    window.confirmCallWaiter = function() {
+window.confirmCallWaiter = function () {
   closeWaiterDialog();
   callWaiter('order');
-    };
+};
 
-    window.openBillDialog = async function() {
+window.openBillDialog = async function () {
   billState = { payment: '', doc: '', nip: '', company: null, selectedBillId: null };
   document.getElementById("billModal").classList.add("active");
   document.body.style.overflow = 'hidden'; // Zablokuj scroll tła
@@ -475,9 +585,9 @@ window.selectedAnimationHtml = null;
   } catch (err) {
     document.getElementById("billLoading").innerHTML = "Błąd pobierania rachunków.";
   }
-    };
+};
 
-    function renderBillList(bills) {
+function renderBillList(bills) {
   document.getElementById("billLoading").classList.add("hidden");
   document.getElementById("billListContainer").classList.remove("hidden");
 
@@ -502,13 +612,13 @@ window.selectedAnimationHtml = null;
         `;
     container.appendChild(div);
   });
-    }
+}
 
-    window.goBackToBillList = function() {
+window.goBackToBillList = function () {
   goToStep("stepBillList");
-    };
+};
 
-    window.showBillReview = function(bill) {
+window.showBillReview = function (bill) {
   billState.selectedBillId = bill.id;
 
   const content = document.getElementById("billReviewContent");
@@ -534,20 +644,20 @@ window.selectedAnimationHtml = null;
 
   document.getElementById("billTotalAmount").textContent = bill.suma.toFixed(2) + " PLN";
   goToStep("stepBillReview");
-    };
+};
 
-    window.closeBillDialog = function() {
+window.closeBillDialog = function () {
   document.getElementById("billModal").classList.remove("active");
   document.body.style.overflow = ''; // Odblokuj scroll tła
-    };
+};
 
-    window.goToStep = function(stepId) {
+window.goToStep = function (stepId) {
   document.querySelectorAll('.step').forEach(el => el.classList.remove('active'));
   document.getElementById(stepId).classList.add('active');
-    };
+};
 
-    // --- SPA NAVIGATION LOGIC ---
+// --- SPA NAVIGATION LOGIC ---
-    window.switchTab = function(tabName) {
+window.switchTab = function (tabName) {
   // 1. Zdejmij .active z widoków i ikonek nav
   document.querySelectorAll('.view-section').forEach(el => el.classList.add('hidden'));
   document.querySelectorAll('.view-section').forEach(el => el.classList.remove('active'));
@@ -568,14 +678,14 @@ window.selectedAnimationHtml = null;
     view.classList.add('active');
     document.getElementById('navMenu').classList.add('active');
   }
-    };
+};
 
-    window.selectPayment = function(method) {
+window.selectPayment = function (method) {
   billState.payment = method;
   goToStep("stepDocument");
-    };
+};
 
-    window.selectDocument = function(docType) {
+window.selectDocument = function (docType) {
   billState.doc = docType;
   if (docType === 'paragon') {
     closeBillDialog();
@@ -586,9 +696,9 @@ window.selectedAnimationHtml = null;
     document.getElementById("nipInput").value = '';
     setTimeout(() => document.getElementById("nipInput").focus(), 100);
   }
-    };
+};
 
-    window.fetchGUS = function() {
+window.fetchGUS = function () {
   const nip = document.getElementById("nipInput").value.replace(/[\s-]/g, '');
   if (nip.length < 10) {
     alert("Wprowadź poprawny numer NIP.");
@@ -605,43 +715,57 @@ window.selectedAnimationHtml = null;
     billState.nip = nip;
     billState.company = {
       name: "Przykładowa Firma Sp. z o.o.",
-          address: "ul. Gastronomiczna 12/4, 00-120 Warszawa",
+      street: "ul. Gastronomiczna 12/4",
+      zip: "00-120",
+      city: "Warszawa",
       nip: nip
     };
 
     document.getElementById("cmpName").value = billState.company.name;
-        document.getElementById("cmpAddress").value = billState.company.address;
+    document.getElementById("cmpStreet").value = billState.company.street;
+    document.getElementById("cmpZip").value = billState.company.zip;
+    document.getElementById("cmpCity").value = billState.company.city;
     document.getElementById("cmpNip").value = "NIP: " + billState.company.nip;
 
     // reset do readonly
     document.getElementById("cmpName").readOnly = true;
-        document.getElementById("cmpAddress").readOnly = true;
+    document.getElementById("cmpStreet").readOnly = true;
+    document.getElementById("cmpZip").readOnly = true;
+    document.getElementById("cmpCity").readOnly = true;
     document.getElementById("btnEditCompany").textContent = "Popraw ręcznie";
 
     goToStep("stepVerify");
   }, 1200);
-    };
+};
 
-    window.editCompanyData = function() {
+window.editCompanyData = function () {
   const n = document.getElementById("cmpName");
-      const a = document.getElementById("cmpAddress");
+  const s = document.getElementById("cmpStreet");
+  const z = document.getElementById("cmpZip");
+  const c = document.getElementById("cmpCity");
   const btn = document.getElementById("btnEditCompany");
 
   if (n.readOnly) {
     n.readOnly = false;
-        a.readOnly = false;
+    s.readOnly = false;
+    z.readOnly = false;
+    c.readOnly = false;
     n.focus();
     btn.textContent = "Zakończ edycję";
   } else {
     n.readOnly = true;
-        a.readOnly = true;
+    s.readOnly = true;
+    z.readOnly = true;
+    c.readOnly = true;
     btn.textContent = "Popraw ręcznie";
   }
-    };
+};
 
-    window.confirmInvoice = function() {
+window.confirmInvoice = function () {
   billState.company.name = document.getElementById("cmpName").value;
-      billState.company.address = document.getElementById("cmpAddress").value;
+  billState.company.street = document.getElementById("cmpStreet").value;
+  billState.company.zip = document.getElementById("cmpZip").value;
+  billState.company.city = document.getElementById("cmpCity").value;
 
   closeBillDialog();
   sendApiSimulated("CallWaiter_Bill", {
@@ -653,11 +777,11 @@ window.selectedAnimationHtml = null;
     company: billState.company
   });
   showToast("Dziękujemy! Prośba o fakturę została wysłana.");
-    };
+};
 
-    // Fallback: If no data after 25s, show empty state anyway
+// Fallback: If no data after 25s, show empty state anyway
-    setTimeout(() => {
+setTimeout(() => {
   if (!loadingScreen.classList.contains("hidden")) {
     updateUI([]);
   }
-    }, 25000);
+}, 25000);

public/stolik3_api.html

@@ -1,14 +1,18 @@
 <!doctype html>
 <html lang="pl">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Karczma Biesiada – Twoje Zamówienie</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap"
+    rel="stylesheet">
   <link rel="stylesheet" href="assets/css/stolik3_api.css">
 </head>
+
 <body>
 
   <div id="loadingScreen">
@@ -24,6 +28,9 @@
       <h1 class="logo-text">Karczma Biesiada</h1>
       <div id="tableLabel" class="table-badge">Wybierz stolik</div>
     </header>
+    <div id="greetingBanner"
+      style="display:none; text-align:center; padding: 10px; font-weight:600; color:var(--primary); font-family:'Playfair Display', serif; font-size:18px;">
+    </div>
 
     <main id="mainContent">
       <div id="statusView" class="view-section active">
@@ -46,20 +53,27 @@
           </div>
         </section>
 
-      <section class="items-container">
+        <section class="items-container" id="ordersContainer">
-        <h3>Twoje zamówione dania</h3>
+          <h3 id="ordersTitle">Twoje zamówione dania</h3>
           <div id="emptyState" class="empty-state hidden">
-          <div class="empty-icon">🍽️</div>
+            <div class="empty-icon">📖</div>
-          <p style="color: var(--text-muted)">Aktualnie nie przygotowujemy niczego dla tego stolika.</p>
+            <p style="color: var(--text-muted)">Jeśli właśnie złożyłeś zamówienie, daj nam chwilkę na jego
-          <p style="font-size: 14px">Jeśli właśnie złożyłeś zamówienie, daj nam chwilkę na jego przetworzenie.</p>
+              przetworzenie.</p>
+            <button class="btn btn-primary" style="margin-top: 15px; padding: 12px 20px; font-size: 15px;"
+              onclick="switchTab('menu')">Przeglądaj menu</button>
           </div>
           <div id="itemsList"></div>
         </section>
 
         <section id="historySection" class="items-container history-section hidden">
           <h3>Twoje poprzednie zamówienia</h3>
-        <p class="history-note">To są pozycje z innych wizyt, które były widoczne na tym telefonie po zeskanowaniu kodów QR. Jeśli kiedyś byłeś w restauracji bez skanowania kodu, tych pozycji tu nie będzie 🙂</p>
+          <p class="history-note">To są pozycje z innych wizyt, które były widoczne na tym telefonie po zeskanowaniu
+            kodów QR. Jeśli kiedyś byłeś w restauracji bez skanowania kodu, tych pozycji tu nie będzie 🙂</p>
           <div id="historyList"></div>
+          <div style="text-align: center; margin-top: 15px;">
+            <a href="#" onclick="clearGlobalHistory(event)"
+              style="font-size: 12px; color: var(--text-muted); text-decoration: underline;">Usuń historię</a>
+          </div>
         </section>
 
         <div id="metaFooter" class="meta-footer"></div>
@@ -76,10 +90,17 @@
       </div> <!-- Koniec menuView -->
 
     </main>
+
+    <footer style="text-align: center; padding: 10px 0 20px; margin-top: 5px;">
+      <a href="https://magico.pl" target="_blank"
+        style="font-size: 12px; color: var(--text-muted); text-decoration: none;">
+        &copy; Magico Software
+      </a>
+    </footer>
   </div>
 
   <!-- Bottom Navigation Bar -->
-  <nav class="bottom-nav">
+  <nav class="bottom-nav" id="bottomNav" style="display: none;">
     <div class="nav-item active" onclick="switchTab('status')" id="navStatus">
       <span class="nav-icon">🍽️</span>
       <span class="nav-label">Zamówienie</span>
@@ -102,17 +123,40 @@
   <div class="modal-overlay" id="waiterModal">
     <div class="modal-content" style="text-align: center;">
       <div style="font-size: 48px; margin-bottom: 15px;">🛎️</div>
-      <h3 style="margin-top: 0; color: var(--text-main); font-family: 'Playfair Display', serif; font-size: 24px;">Przywołać obsługę?</h3>
+      <h3 style="margin-top: 0; color: var(--text-main); font-family: 'Playfair Display', serif; font-size: 24px;">
+        Przywołać obsługę?</h3>
       <p style="color: var(--text-muted); font-size: 15px; margin-bottom: 25px; line-height: 1.5;">
-        Kelner otrzyma natychmiastowe powiadomienie na swoim panelu i podejdzie do Twojego stolika najszybciej jak to możliwe.
+        Kelner otrzyma natychmiastowe powiadomienie na swoim panelu i podejdzie do Twojego stolika najszybciej jak to
+        możliwe.
       </p>
       <div style="display: flex; gap: 12px; flex-direction: column;">
-        <button class="btn btn-primary" onclick="confirmCallWaiter()" style="padding: 14px; font-size: 16px;">Tak, poproś kelnera</button>
+        <button class="btn btn-primary" onclick="confirmCallWaiter()" style="padding: 14px; font-size: 16px;">Tak,
+          poproś kelnera</button>
         <button class="btn btn-secondary" onclick="closeWaiterDialog()" style="padding: 14px;">Anuluj</button>
       </div>
     </div>
   </div>
 
+  <!-- NAME DIALOG -->
+  <div class="modal-overlay" id="nameModal">
+    <div class="modal-content" style="text-align: center;">
+      <div style="font-size: 48px; margin-bottom: 15px;">👋</div>
+      <h3 style="margin-top: 0; color: var(--text-main); font-family: 'Playfair Display', serif; font-size: 24px;">Podaj
+        swoje imię</h3>
+      <p style="color: var(--text-muted); font-size: 15px; margin-bottom: 20px; line-height: 1.5;">
+        Dzięki temu będziemy mogli powitać Cię osobiście podczas Twojej wizyty!
+      </p>
+      <div class="input-group" style="margin-bottom: 25px; text-align: left;">
+        <input type="text" id="userNameInput" class="input-field" placeholder="Twoje imię..." autocomplete="off" />
+      </div>
+      <div style="display: flex; gap: 12px; flex-direction: column;">
+        <button class="btn btn-primary" onclick="saveUserName()" style="padding: 14px; font-size: 16px;">Idę
+          dalej</button>
+        <button class="btn btn-secondary" onclick="declineUserName()" style="padding: 14px;">Nie chcę podawać</button>
+      </div>
+    </div>
+  </div>
+
   <!-- BILL DIALOG -->
   <div class="modal-overlay" id="billModal">
     <div class="modal-content">
@@ -127,29 +171,34 @@
           ⏳ Pobieranie rachunków...
         </div>
         <div id="billListContainer" class="hidden">
-          <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Mamy kilka otwartych rachunków na tym stoliku. Który chcesz opłacić?</p>
+          <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Mamy kilka otwartych
+            rachunków na tym stoliku. Który chcesz opłacić?</p>
           <div id="billListItems" style="display:flex; flex-direction:column; gap:10px;"></div>
         </div>
       </div>
 
       <!-- Step 0.5: Bill Review -->
       <div class="step" id="stepBillReview">
-        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Podsumowanie rachunku:</p>
+        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Podsumowanie rachunku:
-        <div id="billReviewContent" style="background: var(--surface-light); padding: 15px; border-radius: 12px; max-height: 40vh; overflow-y: auto; margin-bottom: 15px;">
+        </p>
+        <div id="billReviewContent"
+          style="background: var(--surface-light); padding: 15px; border-radius: 12px; max-height: 40vh; overflow-y: auto; margin-bottom: 15px;">
         </div>
         <div style="display:flex; justify-content:space-between; font-weight:700; font-size:18px; margin-bottom: 20px;">
           <span>Do zapłaty:</span>
           <span id="billTotalAmount" style="color:var(--primary);">0.00 PLN</span>
         </div>
         <div style="display:flex; gap:12px;">
-          <button class="btn btn-secondary" style="flex:1;" onclick="goBackToBillList()" id="btnBackToBills">Wróć</button>
+          <button class="btn btn-secondary" style="flex:1;" onclick="goBackToBillList()"
-          <button class="btn btn-primary" style="flex:2;" onclick="goToStep('stepPayment')">Dalej</button>
+            id="btnBackToBills">Wróć</button>
+          <button class="btn btn-primary" style="flex:2;" onclick="goToStep('stepPayment')">Poproś rachunek</button>
         </div>
       </div>
 
       <!-- Step 1: Payment Method -->
       <div class="step" id="stepPayment">
-        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wybierz preferowaną formę płatności:</p>
+        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wybierz preferowaną formę
+          płatności:</p>
         <div class="option-grid">
           <div class="option-card" onclick="selectPayment('karta')">
             <span class="option-icon">💳</span>
@@ -160,12 +209,14 @@
             <span class="option-label">Gotówka</span>
           </div>
         </div>
-        <button class="btn btn-secondary" onclick="goToStep('stepBillReview')" style="margin-top: 15px;">Wróć do podsumowania</button>
+        <button class="btn btn-secondary" onclick="goToStep('stepBillReview')" style="margin-top: 15px;">Wróć do
+          podsumowania</button>
       </div>
 
       <!-- Step 2: Document Type -->
       <div class="step" id="stepDocument">
-        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Jakiego dokumentu potrzebujesz?</p>
+        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Jakiego dokumentu
+          potrzebujesz?</p>
         <div class="option-grid">
           <div class="option-card" onclick="selectDocument('paragon')">
             <span class="option-icon">🧾</span>
@@ -181,10 +232,11 @@
 
       <!-- Step 3: NIP Input -->
       <div class="step" id="stepNIP">
-        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wprowadź NIP firmy, abyśmy mogli automatycznie pobrać dane.</p>
+        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Wprowadź NIP firmy,
+          abyśmy mogli automatycznie pobrać dane.</p>
         <div class="input-group">
           <label class="input-label">Numer NIP</label>
-          <input type="text" id="nipInput" class="input-field" placeholder="np. 1234567890" autocomplete="off" />
+          <input type="number" id="nipInput" class="input-field" placeholder="np. 1234567890" autocomplete="off" />
         </div>
         <div style="display:flex; gap:12px; margin-top: 24px;">
           <button class="btn btn-secondary" style="flex:1;" onclick="goToStep('stepDocument')">Wróć</button>
@@ -194,11 +246,17 @@
 
       <!-- Step 4: Verify Data -->
       <div class="step" id="stepVerify">
-        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Czy poniższe dane do faktury są prawidłowe?</p>
+        <p style="margin-top:0; color:var(--text-muted); font-size:14px; margin-bottom: 20px;">Czy poniższe dane do
+          faktury są prawidłowe?</p>
 
         <div class="company-details">
           <input type="text" id="cmpName" class="company-input" style="font-weight:700; margin-bottom:4px;" readonly />
-          <input type="text" id="cmpAddress" class="company-input" style="margin-bottom:4px;" readonly />
+          <input type="text" id="cmpStreet" class="company-input" placeholder="Ulica i numer" style="margin-bottom:4px;"
+            readonly />
+          <div style="display: flex; gap: 8px; margin-bottom: 4px;">
+            <input type="text" id="cmpZip" class="company-input" placeholder="Kod" style="flex: 1;" readonly />
+            <input type="text" id="cmpCity" class="company-input" placeholder="Miasto" style="flex: 2;" readonly />
+          </div>
           <input type="text" id="cmpNip" class="company-input muted" readonly />
         </div>
 
@@ -221,4 +279,5 @@
 
   <script src="assets/js/stolik3_api.js"></script>
 </body>
+
 </html>