From 5a5ca63f92e44c582029736982e4ebfd079ea810 Mon Sep 17 00:00:00 2001
From: Claude Agent <claude-agent@romfast.ro>
Date: Fri, 27 Mar 2026 12:42:40 +0000
Subject: [PATCH] feat(simplify): first-time guidance welcome card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show a welcome card on the dashboard when no sync runs exist yet.
Guides new users: 1. Check Settings → 2. Start Sync → 3. Map SKUs.
Card auto-hides after first successful sync.

Cache-bust: dashboard.js?v=31, style.css?v=24

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 api/app/static/js/dashboard.js   | 23 +++++++++++++++++++++++
 api/app/templates/dashboard.html |  4 +++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/api/app/static/js/dashboard.js b/api/app/static/js/dashboard.js
index 658d126..6a8ecb3 100644
--- a/api/app/static/js/dashboard.js
+++ b/api/app/static/js/dashboard.js
@@ -20,6 +20,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     loadDashOrders();
     startSyncPolling();
     wireFilterBar();
+    checkFirstTime();
 });
 
 async function initPollInterval() {
@@ -124,6 +125,28 @@ function updateSyncPanel(data) {
     }
 }
 
+async function checkFirstTime() {
+    const welcomeEl = document.getElementById('welcomeCard');
+    if (!welcomeEl) return;
+    try {
+        const data = await fetchJSON('/api/sync/status');
+        if (!data.last_run) {
+            welcomeEl.innerHTML = `<div class="welcome-card">
+                <h5 style="font-family:var(--font-display);margin:0 0 8px">Bine ai venit!</h5>
+                <p class="text-muted mb-2" style="font-size:0.875rem">Configureaza si ruleaza primul sync:</p>
+                <div class="welcome-steps">
+                    <span class="welcome-step"><b>1.</b> <a href="${window.ROOT_PATH||''}/settings">Verifica Settings</a></span>
+                    <span class="welcome-step"><b>2.</b> Apasa "Start Sync"</span>
+                    <span class="welcome-step"><b>3.</b> <a href="${window.ROOT_PATH||''}/missing-skus">Mapeaza SKU-urile lipsa</a></span>
+                </div>
+            </div>`;
+            welcomeEl.style.display = '';
+        } else {
+            welcomeEl.style.display = 'none';
+        }
+    } catch(e) { welcomeEl.style.display = 'none'; }
+}
+
 // Wire last-sync-row click → journal (use current running sync if active)
 document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('lastSyncRow')?.addEventListener('click', () => {
diff --git a/api/app/templates/dashboard.html b/api/app/templates/dashboard.html
index 26753a8..864f922 100644
--- a/api/app/templates/dashboard.html
+++ b/api/app/templates/dashboard.html
@@ -6,6 +6,8 @@
 {% block content %}
 <h4 class="mb-4">Panou de Comanda</h4>
 
+<div id="welcomeCard" style="display:none"></div>
+
 <!-- Sync Card (unified two-row panel) -->
 <div class="sync-card">
   <!-- TOP ROW: Status + Controls -->
@@ -121,5 +123,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{{ request.scope.get('root_path', '') }}/static/js/dashboard.js?v=30"></script>
+<script src="{{ request.scope.get('root_path', '') }}/static/js/dashboard.js?v=31"></script>
 {% endblock %}