From d3f1a838ebc65f15f270b197eceec07f432c5152 Mon Sep 17 00:00:00 2001
From: Michael Chus <mike@mchus.pro>
Date: Sat, 21 Feb 2026 17:19:40 +0300
Subject: [PATCH] =?UTF-8?q?feat:=20add=20=D0=9F=D0=B0=D1=80=D1=82=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=B5=D1=80=D0=B0=20nav=20item=20and=20summary=20p?=
 =?UTF-8?q?age?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Top nav: link to /partnumber-books
- Page: summary cards (active version, unique LOTs, total PN, primary PN)
  + searchable items table for active book
  + collapsible history of all snapshots

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/templates/base.html             |   1 +
 web/templates/partnumber_books.html | 170 ++++++++++++++++++----------
 2 files changed, 112 insertions(+), 59 deletions(-)

diff --git a/web/templates/base.html b/web/templates/base.html
index 535d826..9ba9e68 100644
--- a/web/templates/base.html
+++ b/web/templates/base.html
@@ -21,6 +21,7 @@
                     <div class="hidden md:flex space-x-4">
                         <a href="/projects" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm">Мои проекты</a>
                         <a href="/pricelists" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm">Прайслисты</a>
+                        <a href="/partnumber-books" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm">Партномера</a>
                         <a href="/setup" class="text-gray-600 hover:text-gray-900 px-3 py-2 text-sm">Настройки</a>
                     </div>
                 </div>
diff --git a/web/templates/partnumber_books.html b/web/templates/partnumber_books.html
index a785684..b46cdc8 100644
--- a/web/templates/partnumber_books.html
+++ b/web/templates/partnumber_books.html
@@ -1,60 +1,91 @@
-{{define "title"}}QuoteForge - Листы сопоставлений{{end}}
+{{define "title"}}QuoteForge - Партномера{{end}}
 
 {{define "content"}}
 <div class="space-y-4">
     <div class="flex items-center justify-between">
-        <h1 class="text-2xl font-bold text-gray-900">Листы сопоставлений PN → LOT</h1>
+        <h1 class="text-2xl font-bold text-gray-900">Партномера</h1>
         <button onclick="syncPartnumberBooks()" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm">
             Синхронизировать
         </button>
     </div>
 
-    <div class="bg-white rounded-lg shadow overflow-hidden">
-        <div id="books-list-loading" class="p-8 text-center text-gray-400">Загрузка...</div>
+    <!-- Summary cards -->
+    <div id="summary-cards" class="grid grid-cols-2 md:grid-cols-4 gap-4 hidden">
+        <div class="bg-white rounded-lg shadow p-4">
+            <div class="text-xs text-gray-500 mb-1">Активный лист</div>
+            <div id="card-version" class="font-mono font-semibold text-gray-800 text-sm truncate">—</div>
+            <div id="card-date" class="text-xs text-gray-400 mt-0.5">—</div>
+        </div>
+        <div class="bg-white rounded-lg shadow p-4">
+            <div class="text-xs text-gray-500 mb-1">Уникальных LOT</div>
+            <div id="card-lots" class="text-2xl font-bold text-blue-600">—</div>
+        </div>
+        <div class="bg-white rounded-lg shadow p-4">
+            <div class="text-xs text-gray-500 mb-1">Всего PN</div>
+            <div id="card-pn-total" class="text-2xl font-bold text-gray-800">—</div>
+        </div>
+        <div class="bg-white rounded-lg shadow p-4">
+            <div class="text-xs text-gray-500 mb-1">Primary PN</div>
+            <div id="card-pn-primary" class="text-2xl font-bold text-green-600">—</div>
+        </div>
+    </div>
+
+    <div id="summary-empty" class="hidden bg-yellow-50 border border-yellow-200 rounded-lg p-4 text-sm text-yellow-800">
+        Нет активного листа сопоставлений. Нажмите «Синхронизировать» для загрузки с сервера.
+    </div>
+
+    <!-- Active book items with search -->
+    <div id="active-book-section" class="hidden bg-white rounded-lg shadow overflow-hidden">
+        <div class="px-4 py-3 border-b flex items-center justify-between gap-3">
+            <span class="font-semibold text-gray-800 whitespace-nowrap">Сопоставления активного листа</span>
+            <input type="text" id="pn-search" placeholder="Поиск по PN или LOT..."
+                   class="flex-1 max-w-xs px-3 py-1.5 border rounded text-sm focus:ring-2 focus:ring-blue-400 focus:outline-none"
+                   oninput="filterItems(this.value)">
+            <span id="pn-count" class="text-xs text-gray-400 whitespace-nowrap"></span>
+        </div>
+        <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+                <thead class="bg-gray-50 text-gray-600 sticky top-0">
+                    <tr>
+                        <th class="px-4 py-2 text-left">Partnumber</th>
+                        <th class="px-4 py-2 text-left">LOT</th>
+                        <th class="px-4 py-2 text-center w-24">Primary</th>
+                        <th class="px-4 py-2 text-left">Описание</th>
+                    </tr>
+                </thead>
+                <tbody id="active-items-body"></tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- All books list (collapsed by default) -->
+    <details class="bg-white rounded-lg shadow overflow-hidden">
+        <summary class="px-4 py-3 cursor-pointer text-sm font-medium text-gray-700 hover:bg-gray-50 select-none">
+            История снимков
+        </summary>
+        <div id="books-list-loading" class="p-6 text-center text-gray-400 text-sm">Загрузка...</div>
         <table id="books-table" class="w-full text-sm hidden">
             <thead class="bg-gray-50 text-gray-600">
                 <tr>
-                    <th class="px-4 py-3 text-left">Версия</th>
-                    <th class="px-4 py-3 text-left">Дата</th>
-                    <th class="px-4 py-3 text-right">Позиций</th>
-                    <th class="px-4 py-3 text-center">Статус</th>
-                    <th class="px-4 py-3 text-center">Действия</th>
+                    <th class="px-4 py-2 text-left">Версия</th>
+                    <th class="px-4 py-2 text-left">Дата</th>
+                    <th class="px-4 py-2 text-right">Позиций</th>
+                    <th class="px-4 py-2 text-center">Статус</th>
                 </tr>
             </thead>
             <tbody id="books-table-body"></tbody>
         </table>
-        <div id="books-empty" class="hidden p-8 text-center text-gray-400">
-            Нет листов сопоставлений. Синхронизируйте с сервером.
+        <div id="books-empty" class="hidden p-6 text-center text-gray-400 text-sm">
+            Нет загруженных снимков.
         </div>
-    </div>
-
-    <!-- Book detail -->
-    <div id="book-detail" class="hidden bg-white rounded-lg shadow overflow-hidden">
-        <div class="px-4 py-3 border-b flex items-center justify-between">
-            <h2 class="font-semibold text-gray-800">Позиции листа: <span id="detail-version"></span></h2>
-            <button onclick="closeBookDetail()" class="text-gray-400 hover:text-gray-700">✕</button>
-        </div>
-        <div class="p-4">
-            <div class="overflow-x-auto">
-                <table class="w-full text-sm">
-                    <thead class="bg-gray-50 text-gray-600">
-                        <tr>
-                            <th class="px-3 py-2 text-left">Partnumber</th>
-                            <th class="px-3 py-2 text-left">LOT</th>
-                            <th class="px-3 py-2 text-center">Primary PN</th>
-                            <th class="px-3 py-2 text-left">Описание</th>
-                        </tr>
-                    </thead>
-                    <tbody id="detail-items-body"></tbody>
-                </table>
-            </div>
-        </div>
-    </div>
+    </details>
 </div>
 {{end}}
 
 {{define "scripts"}}
 <script>
+let allItems = [];
+
 async function loadBooks() {
     const resp = await fetch('/api/partnumber-books');
     const data = await resp.json();
@@ -64,57 +95,78 @@ async function loadBooks() {
 
     if (!books.length) {
         document.getElementById('books-empty').classList.remove('hidden');
+        document.getElementById('summary-empty').classList.remove('hidden');
         return;
     }
 
+    // Fill history table
     const tbody = document.getElementById('books-table-body');
     tbody.innerHTML = '';
     books.forEach(b => {
         const tr = document.createElement('tr');
         tr.className = 'border-b hover:bg-gray-50';
         tr.innerHTML = `
-            <td class="px-4 py-3 font-mono text-sm">${b.version}</td>
-            <td class="px-4 py-3 text-gray-600">${b.created_at}</td>
-            <td class="px-4 py-3 text-right">${b.item_count}</td>
-            <td class="px-4 py-3 text-center">
-                ${b.is_active ? '<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">Активный</span>' : '<span class="px-2 py-1 bg-gray-100 text-gray-500 rounded text-xs">Архив</span>'}
-            </td>
-            <td class="px-4 py-3 text-center">
-                <button onclick="viewBookItems(${b.server_id}, '${b.version}')" class="text-blue-600 hover:text-blue-800 text-sm underline">
-                    Просмотр
-                </button>
+            <td class="px-4 py-2 font-mono text-xs">${b.version}</td>
+            <td class="px-4 py-2 text-gray-500 text-xs">${b.created_at}</td>
+            <td class="px-4 py-2 text-right text-xs">${b.item_count}</td>
+            <td class="px-4 py-2 text-center">
+                ${b.is_active
+                    ? '<span class="px-2 py-0.5 bg-green-100 text-green-700 rounded text-xs">Активный</span>'
+                    : '<span class="px-2 py-0.5 bg-gray-100 text-gray-500 rounded text-xs">Архив</span>'}
             </td>
         `;
         tbody.appendChild(tr);
     });
     document.getElementById('books-table').classList.remove('hidden');
+
+    // Load active book detail
+    const active = books.find(b => b.is_active) || books[0];
+    await loadActiveBookItems(active);
 }
 
-async function viewBookItems(serverId, version) {
-    const resp = await fetch(`/api/partnumber-books/${serverId}`);
+async function loadActiveBookItems(book) {
+    const resp = await fetch(`/api/partnumber-books/${book.server_id}`);
     const data = await resp.json();
-    const items = data.items || [];
+    allItems = data.items || [];
 
-    document.getElementById('detail-version').textContent = version;
-    const tbody = document.getElementById('detail-items-body');
+    // Compute stats
+    const lots = new Set(allItems.map(i => i.lot_name));
+    const primaryCount = allItems.filter(i => i.is_primary_pn).length;
+
+    document.getElementById('card-version').textContent = book.version;
+    document.getElementById('card-date').textContent = book.created_at;
+    document.getElementById('card-lots').textContent = lots.size;
+    document.getElementById('card-pn-total').textContent = allItems.length;
+    document.getElementById('card-pn-primary').textContent = primaryCount;
+    document.getElementById('summary-cards').classList.remove('hidden');
+    document.getElementById('active-book-section').classList.remove('hidden');
+
+    renderItems(allItems);
+}
+
+function renderItems(items) {
+    const tbody = document.getElementById('active-items-body');
     tbody.innerHTML = '';
     items.forEach(item => {
         const tr = document.createElement('tr');
-        tr.className = 'border-b';
+        tr.className = 'border-b hover:bg-gray-50';
         tr.innerHTML = `
-            <td class="px-3 py-1.5 font-mono text-xs">${item.partnumber}</td>
-            <td class="px-3 py-1.5 text-xs">${item.lot_name}</td>
-            <td class="px-3 py-1.5 text-center">${item.is_primary_pn ? '✓' : ''}</td>
-            <td class="px-3 py-1.5 text-xs text-gray-500">${item.description || ''}</td>
+            <td class="px-4 py-1.5 font-mono text-xs">${item.partnumber}</td>
+            <td class="px-4 py-1.5 text-xs font-medium text-blue-700">${item.lot_name}</td>
+            <td class="px-4 py-1.5 text-center text-green-600 text-xs">${item.is_primary_pn ? '✓' : ''}</td>
+            <td class="px-4 py-1.5 text-xs text-gray-500">${item.description || ''}</td>
         `;
         tbody.appendChild(tr);
     });
-    document.getElementById('book-detail').classList.remove('hidden');
-    document.getElementById('book-detail').scrollIntoView({behavior: 'smooth'});
+    document.getElementById('pn-count').textContent = `${items.length} из ${allItems.length}`;
 }
 
-function closeBookDetail() {
-    document.getElementById('book-detail').classList.add('hidden');
+function filterItems(query) {
+    const q = query.trim().toLowerCase();
+    if (!q) { renderItems(allItems); return; }
+    renderItems(allItems.filter(i =>
+        i.partnumber.toLowerCase().includes(q) || i.lot_name.toLowerCase().includes(q)
+    ));
 }
 
 async function syncPartnumberBooks() {