feat(simplify): first-time guidance welcome card

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>
This commit is contained in:
Claude Agent
2026-03-27 12:42:40 +00:00
parent 35709cdc6e
commit 5a5ca63f92
2 changed files with 26 additions and 1 deletions

View File

@@ -20,6 +20,7 @@ document.addEventListener('DOMContentLoaded', async () => {
loadDashOrders(); loadDashOrders();
startSyncPolling(); startSyncPolling();
wireFilterBar(); wireFilterBar();
checkFirstTime();
}); });
async function initPollInterval() { 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) // Wire last-sync-row click → journal (use current running sync if active)
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
document.getElementById('lastSyncRow')?.addEventListener('click', () => { document.getElementById('lastSyncRow')?.addEventListener('click', () => {

View File

@@ -6,6 +6,8 @@
{% block content %} {% block content %}
<h4 class="mb-4">Panou de Comanda</h4> <h4 class="mb-4">Panou de Comanda</h4>
<div id="welcomeCard" style="display:none"></div>
<!-- Sync Card (unified two-row panel) --> <!-- Sync Card (unified two-row panel) -->
<div class="sync-card"> <div class="sync-card">
<!-- TOP ROW: Status + Controls --> <!-- TOP ROW: Status + Controls -->
@@ -121,5 +123,5 @@
{% endblock %} {% endblock %}
{% block scripts %} {% 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 %} {% endblock %}