From d3d1905b18ab0608a16125b7bae700b82a7bbb35 Mon Sep 17 00:00:00 2001
From: Claude Agent <claude-agent@romfast.ro>
Date: Fri, 27 Mar 2026 12:42:29 +0000
Subject: [PATCH] feat(simplify): simplified logs view

Default to showing problem orders (ERROR/SKIPPED) first. Imported
orders collapsed behind "X comenzi importate cu succes" toggle.
Reduces noise for operators scanning for issues.

Cache-bust: logs.js?v=14, style.css?v=23

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 api/app/static/css/style.css | 34 ++++++++++++++++++++++
 api/app/static/js/logs.js    | 55 +++++++++++++++++++++++++++++++++---
 api/app/templates/base.html  |  2 +-
 api/app/templates/logs.html  |  2 +-
 4 files changed, 87 insertions(+), 6 deletions(-)

diff --git a/api/app/static/css/style.css b/api/app/static/css/style.css
index ef3e79d..d992814 100644
--- a/api/app/static/css/style.css
+++ b/api/app/static/css/style.css
@@ -1059,3 +1059,37 @@ tr.mapping-deleted td {
     border-color: var(--accent);
     font-weight: 500;
 }
+
+/* ── Logs OK toggle ────────────────────── */
+.log-ok-toggle {
+    padding: 8px 12px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: 0.85rem;
+    border-top: 1px solid var(--border-subtle);
+}
+.log-ok-toggle:hover { background: var(--surface-raised); }
+
+/* ── Welcome card ──────────────────────── */
+.welcome-card {
+    background: var(--accent-light);
+    border: 1px solid var(--accent);
+    border-radius: 8px;
+    padding: 16px 20px;
+    margin-bottom: 12px;
+}
+.welcome-steps {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+    font-size: 0.875rem;
+}
+.welcome-step {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+.welcome-step a {
+    color: var(--info);
+    text-decoration: underline;
+}
diff --git a/api/app/static/js/logs.js b/api/app/static/js/logs.js
index ea65639..b4c6165 100644
--- a/api/app/static/js/logs.js
+++ b/api/app/static/js/logs.js
@@ -141,7 +141,11 @@ async function loadRunOrders(runId, statusFilter, page) {
         if (orders.length === 0) {
             tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted py-3">Nicio comanda</td></tr>';
         } else {
-            tbody.innerHTML = orders.map((o, i) => {
+            const problemOrders = orders.filter(o => ['ERROR', 'SKIPPED'].includes(o.status));
+            const okOrders = orders.filter(o => ['IMPORTED', 'ALREADY_IMPORTED'].includes(o.status));
+            const otherOrders = orders.filter(o => !['ERROR', 'SKIPPED', 'IMPORTED', 'ALREADY_IMPORTED'].includes(o.status));
+
+            function orderRow(o, i) {
                 const dateStr = fmtDate(o.order_date);
                 const orderTotal = o.order_total != null ? Number(o.order_total).toFixed(2) : '-';
                 return `<tr style="cursor:pointer" onclick="openOrderDetail('${esc(o.order_number)}')">
@@ -155,7 +159,31 @@ async function loadRunOrders(runId, statusFilter, page) {
                     <td class="text-end text-muted">${fmtCost(o.discount_total)}</td>
                     <td class="text-end fw-bold">${orderTotal}</td>
                 </tr>`;
-            }).join('');
+            }
+
+            let html = '';
+            // Show problem orders first (always visible)
+            problemOrders.forEach((o, i) => { html += orderRow(o, i); });
+            otherOrders.forEach((o, i) => { html += orderRow(o, problemOrders.length + i); });
+
+            // Collapsible OK orders
+            if (okOrders.length > 0) {
+                const toggleId = 'okOrdersCollapse_' + Date.now();
+                html += `<tr><td colspan="9" class="p-0">
+                    <div class="log-ok-toggle" onclick="this.nextElementSibling.classList.toggle('d-none')">
+                        ▶ ${okOrders.length} comenzi importate cu succes
+                    </div>
+                    <div class="d-none">
+                        <table class="table mb-0">
+                            <tbody>
+                                ${okOrders.map((o, i) => orderRow(o, problemOrders.length + otherOrders.length + i)).join('')}
+                            </tbody>
+                        </table>
+                    </div>
+                </td></tr>`;
+            }
+
+            tbody.innerHTML = html;
         }
 
         // Mobile flat rows
@@ -164,7 +192,11 @@ async function loadRunOrders(runId, statusFilter, page) {
             if (orders.length === 0) {
                 mobileList.innerHTML = '<div class="flat-row text-muted py-3 justify-content-center">Nicio comanda</div>';
             } else {
-                mobileList.innerHTML = orders.map(o => {
+                const problemOrders = orders.filter(o => ['ERROR', 'SKIPPED'].includes(o.status));
+                const okOrders = orders.filter(o => ['IMPORTED', 'ALREADY_IMPORTED'].includes(o.status));
+                const otherOrders = orders.filter(o => !['ERROR', 'SKIPPED', 'IMPORTED', 'ALREADY_IMPORTED'].includes(o.status));
+
+                function mobileRow(o) {
                     const d = o.order_date || '';
                     let dateFmt = '-';
                     if (d.length >= 10) {
@@ -178,7 +210,22 @@ async function loadRunOrders(runId, statusFilter, page) {
                         <span class="grow truncate fw-bold">${esc(o.customer_name || '—')}</span>
                         <span class="text-nowrap">x${o.items_count || 0}${totalStr ? ' · <strong>' + totalStr + '</strong>' : ''}</span>
                     </div>`;
-                }).join('');
+                }
+
+                let mobileHtml = '';
+                problemOrders.forEach(o => { mobileHtml += mobileRow(o); });
+                otherOrders.forEach(o => { mobileHtml += mobileRow(o); });
+
+                if (okOrders.length > 0) {
+                    mobileHtml += `<div class="log-ok-toggle" onclick="this.nextElementSibling.classList.toggle('d-none')">
+                        ▶ ${okOrders.length} comenzi importate cu succes
+                    </div>
+                    <div class="d-none">
+                        ${okOrders.map(o => mobileRow(o)).join('')}
+                    </div>`;
+                }
+
+                mobileList.innerHTML = mobileHtml;
             }
         }
 
diff --git a/api/app/templates/base.html b/api/app/templates/base.html
index 37dd61c..0b2dc73 100644
--- a/api/app/templates/base.html
+++ b/api/app/templates/base.html
@@ -19,7 +19,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css" rel="stylesheet">
     {% set rp = request.scope.get('root_path', '') %}
-    <link href="{{ rp }}/static/css/style.css?v=22" rel="stylesheet">
+    <link href="{{ rp }}/static/css/style.css?v=24" rel="stylesheet">
 </head>
 <body>
     <!-- Top Navbar (hidden on mobile via CSS) -->
diff --git a/api/app/templates/logs.html b/api/app/templates/logs.html
index 34999a3..a6720cb 100644
--- a/api/app/templates/logs.html
+++ b/api/app/templates/logs.html
@@ -102,5 +102,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="{{ request.scope.get('root_path', '') }}/static/js/logs.js?v=13"></script>
+<script src="{{ request.scope.get('root_path', '') }}/static/js/logs.js?v=14"></script>
 {% endblock %}