diff --git a/products.db b/products.db
index 81cce0a..4d3e6c4 100644
Binary files a/products.db and b/products.db differ
diff --git a/products_old.db b/products_old.db
deleted file mode 100644
index 940f404..0000000
Binary files a/products_old.db and /dev/null differ
diff --git a/public/index.html b/public/index.html
index 5e851cb..2e04465 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,820 +4,935 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Batch Management</title>
+  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
   <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
+    :root {
+      --bg: #f4f3f0;
+      --surface: #ffffff;
+      --border: #e2e0db;
+      --border-strong: #c8c5be;
+      --text-primary: #1a1917;
+      --text-secondary: #6b6860;
+      --text-muted: #9b9890;
+      --accent: #2563eb;
+      --accent-light: #eff6ff;
+      --green: #16a34a;
+      --green-light: #f0fdf4;
+      --amber: #d97706;
+      --amber-light: #fffbeb;
+      --red: #dc2626;
+      --red-light: #fef2f2;
+      --red-row: #fff5f5;
+      --selected: #eff6ff;
+      --selected-border: #bfdbfe;
+      --mono: 'IBM Plex Mono', monospace;
+      --sans: 'DM Sans', sans-serif;
     }
 
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-      background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+      font-family: var(--sans);
+      background: var(--bg);
       min-height: 100vh;
-      padding: 20px;
+      padding: 24px 20px;
+      color: var(--text-primary);
     }
 
-    .container {
-      max-width: 1600px;
+    .wrap {
+      max-width: 1400px;
       margin: 0 auto;
-      background: white;
-      border-radius: 16px;
-      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-      overflow: hidden;
     }
 
-    .header {
-      background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
-      color: white;
-      padding: 30px;
-      text-align: center;
-    }
-
-    .header h1 {
-      font-size: 28px;
-      font-weight: 600;
-      margin-bottom: 10px;
-    }
-
-    .controls {
-      padding: 25px 30px;
-      background: #f8f9fa;
+    /* Header */
+    .top-bar {
       display: flex;
-      gap: 15px;
-      flex-wrap: wrap;
       align-items: center;
-      border-bottom: 1px solid #e9ecef;
+      justify-content: space-between;
+      margin-bottom: 16px;
+      gap: 12px;
     }
 
-    .search-box {
-      flex: 1;
-      min-width: 250px;
-      position: relative;
-    }
-
-    .search-box input {
-      width: 100%;
-      padding: 12px 16px;
-      border: 2px solid #e9ecef;
-      border-radius: 8px;
-      font-size: 14px;
-      transition: all 0.3s;
-    }
-
-    .search-box input:focus {
-      outline: none;
-      border-color: #2c3e50;
-      box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
-    }
-
-    .btn {
-      padding: 12px 24px;
-      border: none;
-      border-radius: 8px;
-      font-size: 14px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.3s;
+    .top-bar h1 {
+      font-size: 18px;
+      font-weight: 600;
+      letter-spacing: -0.3px;
       display: flex;
       align-items: center;
       gap: 8px;
     }
 
-    .btn-primary {
-      background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
-      color: white;
+    .top-bar h1 span { color: var(--text-muted); font-weight: 400; font-size: 14px; }
+
+    /* Controls bar */
+    .controls {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 12px;
+      align-items: center;
+      flex-wrap: wrap;
     }
 
-    .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(44, 62, 80, 0.4);
+    .search-wrap {
+      position: relative;
+      flex: 1;
+      min-width: 200px;
     }
 
-    .btn-success {
-      background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
-      color: white;
+    .search-wrap input {
+      width: 100%;
+      padding: 7px 12px 7px 32px;
+      border: 1px solid var(--border-strong);
+      border-radius: 6px;
+      font-size: 13px;
+      font-family: var(--sans);
+      background: var(--surface);
+      color: var(--text-primary);
+      transition: border-color 0.15s, box-shadow 0.15s;
     }
 
-    .btn-success:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
+    .search-wrap input:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
     }
 
-    .table-container {
-      overflow-x: auto;
-      padding: 0 30px 30px;
+    .search-icon {
+      position: absolute;
+      left: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--text-muted);
+      font-size: 13px;
+      pointer-events: none;
+    }
+
+    /* Buttons */
+    .btn {
+      padding: 7px 14px;
+      border: none;
+      border-radius: 6px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--sans);
+      cursor: pointer;
+      transition: all 0.15s;
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      white-space: nowrap;
+    }
+
+    .btn-primary { background: var(--accent); color: #fff; }
+    .btn-primary:hover { background: #1d4ed8; }
+
+    .btn-success { background: var(--green); color: #fff; }
+    .btn-success:hover { background: #15803d; }
+
+    .btn-ghost {
+      background: var(--surface);
+      color: var(--text-secondary);
+      border: 1px solid var(--border-strong);
+    }
+    .btn-ghost:hover { background: var(--bg); color: var(--text-primary); }
+
+    .btn-danger { background: var(--red); color: #fff; }
+    .btn-danger:hover { background: #b91c1c; }
+
+    .btn-sm { padding: 4px 10px; font-size: 12px; }
+
+    /* Selection bar */
+    .selection-bar {
+      display: none;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 14px;
+      background: var(--accent-light);
+      border: 1px solid var(--selected-border);
+      border-radius: 6px;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+    }
+
+    .selection-bar.show { display: flex; }
+
+    .selection-count {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--accent);
+      flex: 1;
+    }
+
+    /* Table */
+    .table-wrap {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
     }
 
     table {
       width: 100%;
       border-collapse: collapse;
-      margin-top: 20px;
+      font-size: 13px;
     }
 
     thead {
-      background: #f8f9fa;
+      background: #fafaf8;
+      border-bottom: 1px solid var(--border);
     }
 
     th {
-      padding: 16px;
+      padding: 9px 12px;
       text-align: left;
+      font-size: 11px;
       font-weight: 600;
-      color: #495057;
-      font-size: 13px;
+      color: var(--text-muted);
       text-transform: uppercase;
-      letter-spacing: 0.5px;
+      letter-spacing: 0.6px;
       cursor: pointer;
       user-select: none;
-      position: relative;
+      white-space: nowrap;
     }
 
-    th:hover {
-      background: #e9ecef;
-    }
-
-    th.sorted::after {
-      content: ' ▼';
-      font-size: 10px;
-    }
-
-    th.sorted.asc::after {
-      content: ' ▲';
-    }
+    th:hover { color: var(--text-secondary); }
+    th.sort-asc::after { content: ' ↑'; color: var(--accent); }
+    th.sort-desc::after { content: ' ↓'; color: var(--accent); }
 
     td {
-      padding: 16px;
-      border-bottom: 1px solid #f1f3f5;
-      color: #495057;
-      font-size: 14px;
+      padding: 9px 12px;
+      border-bottom: 1px solid #f5f4f1;
+      vertical-align: top;
+      line-height: 1.4;
     }
 
+    tbody tr:last-child td { border-bottom: none; }
+
     tbody tr {
-      transition: background 0.2s;
-    }
-
-    tbody tr:hover {
-      background: #f8f9fa;
-    }
-
-    .batch-row {
+      transition: background 0.1s;
       cursor: pointer;
-      font-weight: 500;
     }
 
-    .batch-row:hover {
-      background: #e3f2fd !important;
+    tbody tr:hover:not(.diff-row) { background: #fafaf8; }
+
+    /* Row with different MPN => red highlight */
+    tr.diff-row {
+      background: #fff8f8;
     }
 
-    .batch-row.expanded {
-      background: #e8f5e9 !important;
+    tr.diff-row:hover { background: #fff0f0; }
+
+    tr.diff-row td { border-bottom-color: #fee2e2; }
+
+    /* Selected row */
+    tr.selected:not(.diff-row) { background: var(--selected) !important; }
+    tr.selected.diff-row { background: #fce7e7 !important; }
+
+    /* Checkbox col */
+    .cb-col { width: 32px; padding: 9px 6px 9px 12px !important; }
+
+    input[type="checkbox"] {
+      width: 14px;
+      height: 14px;
+      accent-color: var(--accent);
+      cursor: pointer;
     }
 
-    .items-row {
-      display: none;
-      background: #fafafa;
+    /* ID col */
+    .id-val {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-muted);
     }
 
-    .items-row.show {
-      display: table-row;
-    }
-
-    .items-cell {
-      padding: 20px !important;
-      border-left: 4px solid #27ae60;
-    }
-
-    .items-container {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-      gap: 15px;
-    }
-
-    .items-section {
-      background: white;
-      border-radius: 8px;
-      padding: 15px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    }
-
-    .items-section h4 {
-      color: #2c3e50;
-      margin-bottom: 10px;
-      font-size: 14px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .items-section.mix h4 {
-      color: #e74c3c;
-    }
-
-    .item-card {
-      background: #f8f9fa;
-      padding: 10px;
-      border-radius: 6px;
-      margin-bottom: 8px;
-      border-left: 3px solid #27ae60;
+    /* Batch name */
+    .batch-name {
+      font-weight: 600;
       font-size: 13px;
+      font-family: var(--mono);
+      color: var(--text-primary);
     }
 
-    .items-section.mix .item-card {
-      border-left-color: #e74c3c;
-    }
-
-    .item-card .label {
-      color: #6c757d;
-      font-weight: 500;
-      display: inline-block;
-      width: 40px;
-    }
-
-    .item-card .value {
-      color: #495057;
-    }
-
-    .badge {
-      display: inline-block;
-      padding: 4px 12px;
-      border-radius: 12px;
-      font-size: 12px;
+    /* Diff indicator */
+    .diff-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 7px;
+      border-radius: 4px;
+      font-size: 11px;
       font-weight: 500;
     }
 
-    .badge-success {
-      background: #d4edda;
-      color: #155724;
+    .diff-badge.ok { background: var(--green-light); color: var(--green); }
+    .diff-badge.mix { background: var(--red-light); color: var(--red); }
+
+    /* Products cell */
+    .products-cell {
+      vertical-align: top;
     }
 
-    .badge-warning {
-      background: #fff3cd;
-      color: #856404;
+    .product-list {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
     }
 
-    .delete-btn {
-      background: #dc3545;
-      color: white;
+    .product-tag {
+      font-size: 11px;
+      font-family: var(--mono);
+      color: var(--text-secondary);
+      background: #f5f4f0;
+      padding: 2px 6px;
+      border-radius: 3px;
+      white-space: nowrap;
+      /* overflow: hidden; */
+      /* text-overflow: ellipsis;
+      max-width: 240px; */
+    }
+
+    .product-tag.red-tag {
+      background: #fee2e2;
+      color: #991b1b;
+    }
+
+    .more-btn {
+      font-size: 11px;
+      color: var(--accent);
+      background: none;
       border: none;
-      padding: 6px 12px;
-      border-radius: 6px;
       cursor: pointer;
+      padding: 2px 0;
+      text-align: left;
+      text-decoration: underline;
+      text-decoration-style: dotted;
+      font-family: var(--sans);
+      font-weight: 500;
+    }
+
+    .more-btn:hover { color: #1d4ed8; }
+
+    .product-expanded {
+      max-height: 150px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      margin-top: 2px;
+      padding-right: 4px;
+    }
+
+    .product-expanded::-webkit-scrollbar { width: 4px; }
+    .product-expanded::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }
+
+    /* SN list in cell */
+    .sn-list {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+    }
+
+    .sn-val {
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
+
+    /* Date */
+    .date-val {
       font-size: 12px;
-      transition: all 0.3s;
+      color: var(--text-muted);
+      white-space: nowrap;
     }
 
-    .delete-btn:hover {
-      background: #c82333;
-      transform: scale(1.05);
+    /* Delete btn */
+    .del-btn {
+      background: none;
+      border: 1px solid var(--border-strong);
+      color: var(--text-muted);
+      padding: 4px 10px;
+      border-radius: 5px;
+      font-size: 11px;
+      cursor: pointer;
+      font-family: var(--sans);
+      font-weight: 500;
+      transition: all 0.15s;
     }
 
-    .expand-icon {
-      display: inline-block;
-      transition: transform 0.3s;
-      margin-right: 8px;
-    }
-
-    .expand-icon.expanded {
-      transform: rotate(90deg);
+    .del-btn:hover {
+      background: var(--red-light);
+      border-color: #fca5a5;
+      color: var(--red);
     }
 
+    /* Pagination */
     .pagination {
       display: flex;
-      justify-content: center;
       align-items: center;
-      gap: 10px;
-      padding: 30px;
+      justify-content: center;
+      gap: 4px;
+      padding: 16px;
       flex-wrap: wrap;
     }
 
-    .page-btn {
-      padding: 8px 16px;
-      border: 2px solid #e9ecef;
-      background: white;
-      border-radius: 6px;
+    .pg-btn {
+      padding: 5px 11px;
+      border: 1px solid var(--border-strong);
+      background: var(--surface);
+      border-radius: 5px;
       cursor: pointer;
-      font-size: 14px;
-      transition: all 0.3s;
+      font-size: 12px;
+      font-family: var(--sans);
+      font-weight: 500;
+      transition: all 0.12s;
+      color: var(--text-secondary);
     }
 
-    .page-btn:hover:not(:disabled) {
-      border-color: #2c3e50;
-      color: #2c3e50;
-    }
+    .pg-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+    .pg-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+    .pg-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
 
-    .page-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
+    .pg-info { font-size: 12px; color: var(--text-muted); padding: 0 8px; }
 
-    .page-btn.active {
-      background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
-      color: white;
-      border-color: transparent;
-    }
-
-    .page-info {
-      color: #6c757d;
+    /* Empty / loading */
+    .state-msg {
+      text-align: center;
+      padding: 60px 20px;
+      color: var(--text-muted);
       font-size: 14px;
     }
 
-    .loading {
-      text-align: center;
-      padding: 40px;
-      color: #6c757d;
-    }
-
-    .empty {
-      text-align: center;
-      padding: 60px;
-      color: #adb5bd;
-    }
-
-    .empty h3 {
-      margin-bottom: 10px;
-      color: #6c757d;
-    }
-
-    .modal {
+    /* Modal */
+    .modal-backdrop {
       display: none;
       position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0,0,0,0.5);
-      z-index: 1000;
+      inset: 0;
+      background: rgba(0,0,0,0.35);
+      z-index: 100;
       justify-content: center;
       align-items: center;
+      padding: 20px;
     }
 
-    .modal.active {
-      display: flex;
-    }
+    .modal-backdrop.open { display: flex; }
 
-    .modal-content {
-      background: white;
-      padding: 30px;
-      border-radius: 12px;
-      width: 90%;
-      max-width: 800px;
-      max-height: 80vh;
+    .modal-box {
+      background: var(--surface);
+      border-radius: 10px;
+      padding: 26px 28px;
+      width: 100%;
+      max-width: 820px;
+      max-height: 88vh;
       overflow-y: auto;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.2);
     }
 
-    .modal h2 {
+    .modal-box h2 {
+      font-size: 16px;
+      font-weight: 600;
       margin-bottom: 20px;
-      color: #495057;
+      color: var(--text-primary);
     }
 
-    .form-group {
-      margin-bottom: 15px;
-    }
+    .form-group { margin-bottom: 16px; }
 
     .form-group label {
       display: block;
-      margin-bottom: 5px;
-      color: #495057;
-      font-size: 14px;
-      font-weight: 500;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 6px;
     }
 
     .form-group input, .form-group textarea {
       width: 100%;
-      padding: 10px;
-      border: 2px solid #e9ecef;
+      padding: 9px 12px;
+      border: 1px solid var(--border-strong);
       border-radius: 6px;
-      font-size: 14px;
-      font-family: inherit;
+      font-size: 13px;
+      font-family: var(--sans);
+      background: var(--surface);
+      color: var(--text-primary);
+      transition: border-color 0.15s;
+    }
+
+    .form-group input:focus, .form-group textarea:focus {
+      outline: none;
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
     }
 
     .form-group textarea {
-      min-height: 150px;
+      min-height: 130px;
       resize: vertical;
-    }
-
-    .modal-buttons {
-      display: flex;
-      gap: 10px;
-      margin-top: 20px;
-    }
-
-    .btn-secondary {
-      background: #6c757d;
-      color: white;
-      flex: 1;
-    }
-
-    .btn-secondary:hover {
-      background: #5a6268;
-    }
-
-    .help-text {
+      font-family: var(--mono);
       font-size: 12px;
-      color: #6c757d;
-      margin-top: 5px;
     }
 
-    .json-example {
-      background: #f8f9fa;
-      padding: 15px;
-      border-radius: 6px;
-      font-family: 'Courier New', monospace;
-      font-size: 12px;
+    .json-hint {
+      background: #fafaf8;
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      padding: 10px 12px;
+      font-family: var(--mono);
+      font-size: 11px;
+      color: var(--text-secondary);
+      margin-top: 6px;
       overflow-x: auto;
-      margin-top: 10px;
+      white-space: pre;
+      line-height: 1.5;
     }
 
-    @media (max-width: 768px) {
-      .items-container {
-        grid-template-columns: 1fr;
-      }
+    .help { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
 
-      .controls {
-        padding: 20px;
-      }
+    .modal-footer {
+      display: flex;
+      gap: 8px;
+      margin-top: 20px;
+      justify-content: flex-end;
+    }
 
-      .search-box {
-        min-width: 100%;
-      }
+    /* Toast */
+    .toast {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      background: var(--text-primary);
+      color: #fff;
+      padding: 10px 16px;
+      border-radius: 7px;
+      font-size: 13px;
+      font-family: var(--sans);
+      z-index: 999;
+      opacity: 0;
+      transform: translateY(8px);
+      transition: all 0.2s;
+      pointer-events: none;
+    }
 
-      .table-container {
-        padding: 0 20px 20px;
-      }
-
-      table {
-        font-size: 12px;
-      }
-
-      th, td {
-        padding: 10px 8px;
-      }
-
-      .header h1 {
-        font-size: 22px;
-      }
-
-      .pagination {
-        padding: 20px;
-      }
+    .toast.show {
+      opacity: 1;
+      transform: translateY(0);
     }
   </style>
 </head>
 <body>
-  <div class="container">
-    <div class="header">
-      <h1>📦 Batch Management System</h1>
-      <p>Manage batches with items and mixed items</p>
-    </div>
+<div class="wrap">
 
-    <div class="controls">
-      <div class="search-box">
-        <input type="text" id="searchInput" placeholder="Search by batch name or ID...">
-      </div>
-      <button class="btn btn-success" onclick="openCreateModal()">
-        ➕ Create Batch
-      </button>
-    </div>
-
-    <div class="table-container">
-      <div id="loading" class="loading" style="display: none;">
-        Loading batches...
-      </div>
-
-      <div id="empty" class="empty" style="display: none;">
-        <h3>No batches found</h3>
-        <p>Create your first batch to get started!</p>
-      </div>
-
-      <table id="batchTable" style="display: none;">
-        <thead>
-          <tr>
-            <th onclick="sortTable('id')" style="width: 80px;">ID</th>
-            <th onclick="sortTable('batch_name')">Batch Name</th>
-            <th style="width: 120px;">Items</th>
-            <th style="width: 120px;">Mixed Items</th>
-            <th onclick="sortTable('createdAt')" style="width: 180px;">Created At</th>
-            <th style="width: 100px;">Actions</th>
-          </tr>
-        </thead>
-        <tbody id="batchBody"></tbody>
-      </table>
-    </div>
-
-    <div class="pagination" id="pagination"></div>
+  <!-- Header -->
+  <div class="top-bar">
+    <h1>📦 Batch Management <span id="totalCount"></span></h1>
+    <button class="btn btn-success" onclick="openModal()">＋ New Batch</button>
   </div>
 
-  <!-- Create Batch Modal -->
-  <div id="createModal" class="modal">
-    <div class="modal-content">
-      <h2>Create New Batch</h2>
-      
-      <div class="form-group">
-        <label>Batch Name *</label>
-        <input type="text" id="batchNameInput" placeholder="e.g., BATCH_20250210141530">
-        <div class="help-text">Format: BATCH_yyyymmddhhmmss or any unique name</div>
-      </div>
-
-      <div class="form-group">
-        <label>Items (Valid - Same MPN) *</label>
-        <textarea id="itemsInput" placeholder='Enter JSON array of items...'></textarea>
-        <div class="json-example">
-Example:
-[
-  {"mpn": "CN_M378A5143DB0-CPB_1620", "sn": "U03A00062074544398"},
-  {"mpn": "CN_M378A5143DB0-CPB_1620", "sn": "U03A00062074544399"}
-]</div>
-      </div>
-
-      <div class="form-group">
-        <label>Mixed Items (Different MPN) - Optional</label>
-        <textarea id="itemsMixInput" placeholder='Enter JSON array of mixed items...'></textarea>
-        <div class="json-example">
-Example:
-[
-  {"mpn": "CN_M378A5143DB0-CPB_1621", "sn": "U03A00062074544403"}
-]</div>
-      </div>
-
-      <div class="modal-buttons">
-        <button class="btn btn-secondary" onclick="closeCreateModal()">Cancel</button>
-        <button class="btn btn-success" onclick="createBatch()">Create Batch</button>
-      </div>
+  <!-- Controls -->
+  <div class="controls">
+    <div class="search-wrap">
+      <span class="search-icon">🔍</span>
+      <input id="searchInput" type="text" placeholder="Search batch name or ID or SN">
     </div>
+    <button class="btn btn-ghost" onclick="selectAll()">Select All</button>
+    <button class="btn btn-ghost" onclick="clearSel()">Clear</button>
   </div>
 
-  <script>
-    let currentPage = 1;
-    let currentSort = 'id';
-    let currentOrder = 'DESC';
-    let searchTerm = '';
-    let URL = window.location.hostname === 'localhost' 
-      ? 'http://localhost:4444/api/' 
-      : 'https://logs1.danielvu.com/mobile-api/';
+  <!-- Selection action bar -->
+  <div class="selection-bar" id="selBar">
+    <span class="selection-count" id="selCount">0 selected</span>
+    <button class="btn btn-ghost btn-sm" onclick="copySN()">📋 Copy SN</button>
+    <button class="btn btn-ghost btn-sm" onclick="copyModel()">📋 Copy Model</button>
+    <button class="btn btn-ghost btn-sm" onclick="copyAll()">📋 Copy All Fields</button>
+  </div>
 
-    let expandedBatches = new Set();
-
-    async function loadBatches() {
-      document.getElementById('loading').style.display = 'block';
-      document.getElementById('batchTable').style.display = 'none';
-      document.getElementById('empty').style.display = 'none';
-
-      try {
-        const response = await fetch(`${URL}batch/get-all?page=${currentPage}&sortBy=${currentSort}&sortOrder=${currentOrder}&search=${encodeURIComponent(searchTerm)}`);
-        const data = await response.json();
-
-        document.getElementById('loading').style.display = 'none';
-
-        if (data.batches.length === 0) {
-          document.getElementById('empty').style.display = 'block';
-        } else {
-          document.getElementById('batchTable').style.display = 'table';
-          renderBatches(data.batches);
-          renderPagination(data);
-        }
-
-        updateSortIndicators();
-      } catch (error) {
-        console.error('Error loading batches:', error);
-        document.getElementById('loading').style.display = 'none';
-        alert('Error loading batches. Please check if the server is running.');
-      }
-    }
-
-    function renderBatches(batches) {
-      const tbody = document.getElementById('batchBody');
-      tbody.innerHTML = batches.map(batch => {
-        const date = new Date(batch.createdAt + "Z");
-        const formattedDate = date.toLocaleString('en-US', {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit',
-          second: '2-digit',
-          hour12: false
-        });
-
-        const isExpanded = expandedBatches.has(batch.id);
-        
-        return `
-        <tr class="batch-row ${isExpanded ? 'expanded' : ''}" onclick="toggleBatch(${batch.id})">
-          <td>
-            <span class="expand-icon ${isExpanded ? 'expanded' : ''}">▶</span>
-            ${batch.id}
-          </td>
-          <td><strong>${batch.batch_name}</strong></td>
-          <td><span class="badge badge-success">${batch.items.length}</span></td>
-          <td><span class="badge badge-warning">${batch.items_mix.length}</span></td>
-          <td>${formattedDate}</td>
-          <td>
-            <button class="delete-btn" onclick="event.stopPropagation(); deleteBatch(${batch.id})">Delete</button>
-          </td>
+  <!-- Table -->
+  <div class="table-wrap">
+    <div id="stateMsg" class="state-msg">⏳ Loading…</div>
+    <table id="mainTable" style="display:none;">
+      <thead>
+        <tr>
+          <th class="cb-col"><input type="checkbox" id="masterCb" onchange="toggleAll(this)"></th>
+          <th
+          style="width:50px;">ID</th>
+           <!-- onclick="doSort('id')"  -->
+          <th
+          style="min-width:160px;">Batch Name</th>
+           <!-- onclick="doSort('batch_name')"  -->
+          <th style="width:110px;">Summary</th>
+          <th style="min-width:180px;">Different MPN</th>
+          <th style="min-width:240px;">Same MPN Products</th>
+          <th
+          style="width:130px;">Created</th>
+           <!-- onclick="doSort('createdAt')" -->
+          <th style="width:70px;"></th>
         </tr>
-        <tr class="items-row ${isExpanded ? 'show' : ''}" id="items-${batch.id}">
-          <td colspan="6" class="items-cell">
-            <div class="items-container">
-              <div class="items-section">
-                <h4>✅ Valid Items (${batch.items.length})</h4>
-                ${batch.items.length > 0 ? batch.items.map(item => `
-                  <div class="item-card">
-                    <div><span class="label">MPN:</span> <span class="value">${item.mpn}</span></div>
-                    <div><span class="label">SN:</span> <span class="value">${item.sn}</span></div>
-                  </div>
-                `).join('') : '<p style="color: #999;">No items</p>'}
-              </div>
-              <div class="items-section mix">
-                <h4>⚠️ Mixed Items (${batch.items_mix.length})</h4>
-                ${batch.items_mix.length > 0 ? batch.items_mix.map(item => `
-                  <div class="item-card">
-                    <div><span class="label">MPN:</span> <span class="value">${item.mpn}</span></div>
-                    <div><span class="label">SN:</span> <span class="value">${item.sn}</span></div>
-                  </div>
-                `).join('') : '<p style="color: #999;">No mixed items</p>'}
-              </div>
-            </div>
-          </td>
-        </tr>
-        `;
-      }).join('');
-    }
+      </thead>
+      <tbody id="tbody"></tbody>
+    </table>
+  </div>
 
-    function toggleBatch(batchId) {
-      if (expandedBatches.has(batchId)) {
-        expandedBatches.delete(batchId);
+  <div class="pagination" id="pagination"></div>
+</div>
+
+<!-- Create Modal -->
+<div class="modal-backdrop" id="modal" onclick="bgClose(event)">
+  <div class="modal-box">
+    <h2>Create New Batch</h2>
+    <div class="form-group">
+      <label>Batch Name *</label>
+      <input id="fName" type="text" placeholder="BATCH_20250210141530">
+      <div class="help">Format: BATCH_yyyymmddhhmmss</div>
+    </div>
+    <div class="form-group">
+      <label>Items — Same MPN *</label>
+      <textarea id="fItems" placeholder='JSON array…'></textarea>
+      <div class="json-hint">[{"brand":"Samsung","mpn":"CN_M378A5143DB0-CPB_1620","mpn_custom":"Custom 1","sn":"U03A..."}]</div>
+    </div>
+    <div class="form-group">
+      <label>Mixed Items — Different MPN (optional)</label>
+      <textarea id="fMix" placeholder='JSON array…'></textarea>
+      <div class="json-hint">[{"brand":"Micron","mpn":"CN_M378A5143DB0-CPB_1621","mpn_custom":"Custom 3","sn":"U03A..."}]</div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-ghost" onclick="closeModal()">Cancel</button>
+      <button class="btn btn-success" onclick="createBatch()">Create</button>
+    </div>
+  </div>
+</div>
+
+<!-- Toast -->
+<div class="toast" id="toast"></div>
+
+<script>
+  const API = window.location.hostname === 'localhost'
+    ? 'http://localhost:4444/api/'
+    : 'https://logs1.danielvu.com/mobile-api/';
+
+  let page = 1, sortBy = 'id', sortOrder = 'DESC', search = '';
+  let allBatches = [];
+  let selectedIds = new Set();
+
+  // ── Load ────────────────────────────────────────────
+  async function load() {
+    document.getElementById('stateMsg').textContent = '⏳ Loading…';
+    document.getElementById('stateMsg').style.display = 'block';
+    document.getElementById('mainTable').style.display = 'none';
+
+    try {
+      const r = await fetch(`${API}batch/get-all?page=${page}&sortBy=${sortBy}&sortOrder=${sortOrder}&search=${encodeURIComponent(search)}`);
+      const d = await r.json();
+
+      document.getElementById('stateMsg').style.display = 'none';
+
+      if (!d.batches || d.batches.length === 0) {
+        document.getElementById('stateMsg').textContent = 'No batches found.';
+        document.getElementById('stateMsg').style.display = 'block';
+        document.getElementById('totalCount').textContent = '';
+        renderPagination({ total: 0, totalPages: 1 });
+        return;
+      }
+
+      allBatches = d.batches;
+      document.getElementById('mainTable').style.display = 'table';
+      document.getElementById('totalCount').textContent = `(${d.total})`;
+      render();
+      renderPagination(d);
+      updateSortHeaders();
+    } catch (e) {
+      document.getElementById('stateMsg').textContent = '⚠️ Failed to load. Check server.';
+      document.getElementById('stateMsg').style.display = 'block';
+    }
+  }
+
+  // ── Render rows ────────────────────────────────────
+  function productTag(it, cls) {
+    cls = cls || '';
+    const label = (it.brand ? it.brand + ' ' : '') +" - "+ (it.mpn_custom ? it.mpn_custom + ' ' : '') +" - "+ (it.sn || '');
+    return `<span class="product-tag ${cls}">${label}</span>`;
+  }
+
+  function render() {
+    const tbody = document.getElementById('tbody');
+    tbody.innerHTML = '';
+
+    allBatches.sort((a, b) => b.id - a.id).forEach(b => {
+      const hasMix = b.items_mix && b.items_mix.length > 0;
+      const isSelected = selectedIds.has(b.id);
+      const sameItems = b.items || [];
+      const mixItems  = b.items_mix || [];
+      const total = sameItems.length + mixItems.length;
+      const PREVIEW = 5;
+      const cellKey = `c${b.id}`;
+
+      const tr = document.createElement('tr');
+      tr.className = (hasMix ? 'diff-row' : '') + (isSelected ? ' selected' : '');
+      tr.onclick = (e) => {
+        if (e.target.type === 'checkbox' || e.target.classList.contains('del-btn') || e.target.classList.contains('more-btn')) return;
+        toggleRow(b.id);
+      };
+
+      const dt = new Date(b.createdAt + 'Z');
+      const dateFmt = dt.toLocaleString('en-US', { year:'numeric', month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit', hour12:false });
+
+      // col: Summary
+      const summaryHtml = `
+        <div style="display:flex;flex-direction:column;gap:3px;white-space:nowrap;">
+          <span style="font-size:12px;font-weight:600;">${total} total</span>
+          <span style="font-size:11px;color:var(--green);">✓ ${sameItems.length} same</span>
+          ${mixItems.length > 0 ? `<span style="font-size:11px;color:var(--red);">⚠ ${mixItems.length} diff</span>` : ''}
+        </div>`;
+
+      // col: Different MPN
+      let diffHtml = hasMix
+        ? '<div class="product-list">' + mixItems.map(it => productTag(it,'red-tag')).join('') + '</div>'
+        : '<span style="color:var(--text-muted);font-size:11px;">—</span>';
+
+      // col: Same MPN — preview 5 + expandable rest (no re-render, pure DOM toggle)
+      let sameHtml = '';
+      if (sameItems.length === 0) {
+        sameHtml = '<span style="color:var(--text-muted);font-size:11px;">—</span>';
       } else {
-        expandedBatches.add(batchId);
-      }
-      loadBatches();
-    }
-
-    function renderPagination(data) {
-      const pagination = document.getElementById('pagination');
-      let html = '';
-
-      html += `<button class="page-btn" ${currentPage === 1 ? 'disabled' : ''} onclick="changePage(${currentPage - 1})">Previous</button>`;
-
-      const startPage = Math.max(1, currentPage - 2);
-      const endPage = Math.min(data.totalPages, currentPage + 2);
-
-      for (let i = startPage; i <= endPage; i++) {
-        html += `<button class="page-btn ${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</button>`;
-      }
-
-      html += `<button class="page-btn" ${currentPage === data.totalPages ? 'disabled' : ''} onclick="changePage(${currentPage + 1})">Next</button>`;
-      html += `<span class="page-info">Total: ${data.total} batches</span>`;
-
-      pagination.innerHTML = html;
-    }
-
-    function changePage(page) {
-      currentPage = page;
-      loadBatches();
-    }
-
-    function sortTable(column) {
-      if (currentSort === column) {
-        currentOrder = currentOrder === 'DESC' ? 'ASC' : 'DESC';
-      } else {
-        currentSort = column;
-        currentOrder = 'DESC';
-      }
-      currentPage = 1;
-      loadBatches();
-    }
-
-    function updateSortIndicators() {
-      document.querySelectorAll('th').forEach(th => {
-        th.classList.remove('sorted', 'asc');
-      });
-
-      const columns = ['id', 'batch_name', 'createdAt'];
-      const index = columns.indexOf(currentSort);
-      if (index !== -1) {
-        const th = document.querySelectorAll('th')[index];
-        th.classList.add('sorted');
-        if (currentOrder === 'ASC') {
-          th.classList.add('asc');
+        const previewTags = sameItems.slice(0, PREVIEW).map(it => productTag(it,'')).join('');
+        sameHtml = `<div class="product-list">${previewTags}</div>`;
+        if (sameItems.length > PREVIEW) {
+          const restCount = sameItems.length - PREVIEW;
+          const restTags  = sameItems.slice(PREVIEW).map(it => productTag(it,'')).join('');
+          sameHtml += `<div class="product-expanded" id="${cellKey}-exp" style="display:none;">${restTags}</div>`;
+          sameHtml += `<button class="more-btn" id="${cellKey}-btn" onclick="toggleMore(event,'${cellKey}',${restCount})">＋ ${restCount} more</button>`;
         }
       }
-    }
 
-    let searchTimeout;
-    document.getElementById('searchInput').addEventListener('input', (e) => {
-      clearTimeout(searchTimeout);
-      searchTimeout = setTimeout(() => {
-        searchTerm = e.target.value;
-        currentPage = 1;
-        expandedBatches.clear();
-        loadBatches();
-      }, 300);
+      tr.innerHTML = `
+        <td class="cb-col"><input type="checkbox" ${isSelected ? 'checked' : ''} onchange="toggleById(${b.id})"></td>
+        <td><span class="id-val">#${b.id}</span></td>
+        <td>
+          <div class="batch-name">${b.batch_name}</div>
+          <div style="margin-top:4px;"><span class="diff-badge ${hasMix?'mix':'ok'}">${hasMix?'⚠ Mixed':'✓ Uniform'}</span></div>
+        </td>
+        <td style="vertical-align:middle;">${summaryHtml}</td>
+        <td class="products-cell">${diffHtml}</td>
+        <td class="products-cell">${sameHtml}</td>
+        <td><span class="date-val">${dateFmt}</span></td>
+        <td><button class="del-btn" onclick="event.stopPropagation();deleteBatch(${b.id})">Delete</button></td>
+      `;
+      tbody.appendChild(tr);
     });
 
-    async function deleteBatch(id) {
-      if (!confirm('Are you sure you want to delete this batch and all its items?')) return;
+    updateSelBar();
+    updateMasterCb();
+  }
 
-      try {
-        const response = await fetch(`${URL}batch/delete/${id}`, {
-          method: 'DELETE'
-        });
+  function toggleMore(e, cellKey, restCount) {
+    e.stopPropagation();
+    const exp = document.getElementById(cellKey + '-exp');
+    const btn = document.getElementById(cellKey + '-btn');
+    if (!exp || !btn) return;
+    const opening = exp.style.display === 'none';
+    exp.style.display = opening ? 'flex' : 'none';
+    btn.textContent = opening ? '↑ Show less' : ('＋ ' + restCount + ' more');
+  }
 
-        if (response.ok) {
-          expandedBatches.delete(id);
-          loadBatches();
-        } else {
-          alert('Error deleting batch');
-        }
-      } catch (error) {
-        console.error('Error deleting batch:', error);
-        alert('Error deleting batch');
-      }
+  // ── Selection ────────────────────────────────────
+  function toggleRow(id) {
+    if (selectedIds.has(id)) selectedIds.delete(id);
+    else selectedIds.add(id);
+    render();
+  }
+
+  function toggleById(id) {
+    if (selectedIds.has(id)) selectedIds.delete(id);
+    else selectedIds.add(id);
+    updateSelBar();
+    updateMasterCb();
+  }
+
+  function toggleAll(cb) {
+    if (cb.checked) allBatches.forEach(b => selectedIds.add(b.id));
+    else allBatches.forEach(b => selectedIds.delete(b.id));
+    render();
+  }
+
+  function selectAll() {
+    allBatches.forEach(b => selectedIds.add(b.id));
+    render();
+  }
+
+  function clearSel() {
+    selectedIds.clear();
+    render();
+  }
+
+  function updateSelBar() {
+    const bar = document.getElementById('selBar');
+    const count = document.getElementById('selCount');
+    if (selectedIds.size > 0) {
+      bar.classList.add('show');
+      count.textContent = `${selectedIds.size} selected`;
+    } else {
+      bar.classList.remove('show');
     }
+  }
 
-    function openCreateModal() {
-      document.getElementById('createModal').classList.add('active');
-      // Auto-generate batch name with timestamp
-      const now = new Date();
-      const timestamp = now.getFullYear() + 
-        String(now.getMonth() + 1).padStart(2, '0') + 
-        String(now.getDate()).padStart(2, '0') + 
-        String(now.getHours()).padStart(2, '0') + 
-        String(now.getMinutes()).padStart(2, '0') + 
-        String(now.getSeconds()).padStart(2, '0');
-      document.getElementById('batchNameInput').value = `BATCH_${timestamp}`;
+  function updateMasterCb() {
+    const master = document.getElementById('masterCb');
+    master.checked = allBatches.length > 0 && allBatches.every(b => selectedIds.has(b.id));
+    master.indeterminate = selectedIds.size > 0 && !master.checked;
+  }
+
+  // ── Copy functions ────────────────────────────────
+  function getSelectedBatches() {
+    return allBatches.filter(b => selectedIds.has(b.id));
+  }
+
+  function copySN() {
+    const batches = getSelectedBatches();
+    const sns = [];
+    batches.forEach(b => {
+      (b.items || []).forEach(it => sns.push(it.sn));
+      (b.items_mix || []).forEach(it => sns.push(it.sn));
+    });
+    copyText(sns.join('\n'), `Copied ${sns.length} SN(s)`);
+  }
+
+  function copyModel() {
+    const batches = getSelectedBatches();
+    const models = new Set();
+    batches.forEach(b => {
+      (b.items || []).forEach(it => models.add(it.mpn_custom));
+      (b.items_mix || []).forEach(it => models.add(it.mpn_custom));
+    });
+    copyText([...models].join('\n'), `Copied ${models.size} model(s)`);
+  }
+
+  function copyAll() {
+    const batches = getSelectedBatches();
+    const lines = [];
+    batches.forEach(b => {
+      (b.items || []).forEach(it => {
+        lines.push([b.batch_name, it.brand || '', it.mpn, it.mpn_custom || '', it.sn].join('\t'));
+      });
+      (b.items_mix || []).forEach(it => {
+        lines.push([b.batch_name, it.brand || '', it.mpn, it.mpn_custom || '', it.sn, '[MIX]'].join('\t'));
+      });
+    });
+    copyText(lines.join('\n'), `Copied ${lines.length} row(s)`);
+  }
+
+  function copyText(text, msg) {
+    navigator.clipboard.writeText(text).then(() => toast(msg)).catch(() => {
+      const el = document.createElement('textarea');
+      el.value = text;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand('copy');
+      el.remove();
+      toast(msg);
+    });
+  }
+
+  function toast(msg) {
+    const el = document.getElementById('toast');
+    el.textContent = msg;
+    el.classList.add('show');
+    setTimeout(() => el.classList.remove('show'), 2000);
+  }
+
+  // ── Sort ──────────────────────────────────────────
+  function doSort(col) {
+    if (sortBy === col) sortOrder = sortOrder === 'DESC' ? 'ASC' : 'DESC';
+    else { sortBy = col; sortOrder = 'DESC'; }
+    page = 1;
+    load();
+  }
+
+  function updateSortHeaders() {
+    document.querySelectorAll('thead th').forEach(th => {
+      th.classList.remove('sort-asc', 'sort-desc');
+    });
+    // map col to index
+    const map = { id: 1, batch_name: 2, createdAt: 6 };
+    const idx = map[sortBy];
+    if (idx !== undefined) {
+      const ths = document.querySelectorAll('thead th');
+      ths[idx].classList.add(sortOrder === 'ASC' ? 'sort-asc' : 'sort-desc');
     }
+  }
 
-    function closeCreateModal() {
-      document.getElementById('createModal').classList.remove('active');
-      document.getElementById('batchNameInput').value = '';
-      document.getElementById('itemsInput').value = '';
-      document.getElementById('itemsMixInput').value = '';
+  // ── Pagination ────────────────────────────────────
+  function renderPagination(d) {
+    const el = document.getElementById('pagination');
+    if (!d.totalPages || d.totalPages <= 1) { el.innerHTML = ''; return; }
+    let html = `<button class="pg-btn" ${page === 1 ? 'disabled' : ''} onclick="goPage(${page - 1})">Prev</button>`;
+    const s = Math.max(1, page - 2), e = Math.min(d.totalPages, page + 2);
+    for (let i = s; i <= e; i++) {
+      html += `<button class="pg-btn ${i === page ? 'active' : ''}" onclick="goPage(${i})">${i}</button>`;
     }
+    html += `<button class="pg-btn" ${page === d.totalPages ? 'disabled' : ''} onclick="goPage(${page + 1})">Next</button>`;
+    html += `<span class="pg-info">${d.total} batches</span>`;
+    el.innerHTML = html;
+  }
 
-    async function createBatch() {
-      const batch_name = document.getElementById('batchNameInput').value.trim();
-      const itemsText = document.getElementById('itemsInput').value.trim();
-      const itemsMixText = document.getElementById('itemsMixInput').value.trim();
+  function goPage(p) { page = p; load(); }
 
-      if (!batch_name) {
-        alert('Please enter a batch name');
-        return;
-      }
+  // ── Delete ────────────────────────────────────────
+  async function deleteBatch(id) {
+    if (!confirm('Delete this batch and all its items?')) return;
+    try {
+      const r = await fetch(`${API}batch/delete/${id}`, { method: 'DELETE' });
+      if (r.ok) { selectedIds.delete(id); load(); toast('Batch deleted'); }
+      else toast('Error deleting batch');
+    } catch { toast('Error deleting batch'); }
+  }
 
-      if (!itemsText) {
-        alert('Please enter at least one item');
-        return;
-      }
+  // ── Create modal ──────────────────────────────────
+  function openModal() {
+    const now = new Date();
+    const ts = now.getFullYear() + pad(now.getMonth()+1) + pad(now.getDate()) + pad(now.getHours()) + pad(now.getMinutes()) + pad(now.getSeconds());
+    document.getElementById('fName').value = `BATCH_${ts}`;
+    document.getElementById('fItems').value = '';
+    document.getElementById('fMix').value = '';
+    document.getElementById('modal').classList.add('open');
+  }
 
-      let items, items_mix;
+  function closeModal() { document.getElementById('modal').classList.remove('open'); }
 
-      try {
-        items = JSON.parse(itemsText);
-        if (!Array.isArray(items) || items.length === 0) {
-          alert('Items must be a non-empty array');
-          return;
-        }
-      } catch (e) {
-        alert('Invalid JSON format for items: ' + e.message);
-        return;
-      }
+  function bgClose(e) { if (e.target.id === 'modal') closeModal(); }
 
-      try {
-        items_mix = itemsMixText ? JSON.parse(itemsMixText) : [];
-        if (!Array.isArray(items_mix)) {
-          alert('Mixed items must be an array');
-          return;
-        }
-      } catch (e) {
-        alert('Invalid JSON format for mixed items: ' + e.message);
-        return;
-      }
+  function pad(n) { return String(n).padStart(2, '0'); }
 
-      try {
-        const response = await fetch(URL + 'batch/save', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({ batch_name, items, items_mix })
-        });
+  async function createBatch() {
+    const batch_name = document.getElementById('fName').value.trim();
+    const itemsTxt = document.getElementById('fItems').value.trim();
+    const mixTxt = document.getElementById('fMix').value.trim();
+    if (!batch_name) { alert('Batch name required'); return; }
+    if (!itemsTxt) { alert('Items required'); return; }
+    let items, items_mix;
+    try { items = JSON.parse(itemsTxt); } catch(e) { alert('Invalid JSON for items: ' + e.message); return; }
+    try { items_mix = mixTxt ? JSON.parse(mixTxt) : []; } catch(e) { alert('Invalid JSON for mixed items: ' + e.message); return; }
 
-        const result = await response.json();
+    try {
+      const r = await fetch(API + 'batch/save', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ batch_name, items, items_mix })
+      });
+      const res = await r.json();
+      if (r.ok) {
+        closeModal();
+        load();
+        toast(`✅ Batch created — ${res.inserted_items} items, ${res.inserted_mix_items} mixed`);
+      } else { alert('Error: ' + res.error); }
+    } catch(e) { alert('Error: ' + e.message); }
+  }
 
-        if (response.ok) {
-          closeCreateModal();
-          expandedBatches.clear();
-          loadBatches();
-          alert(`Batch created successfully!\nItems: ${result.inserted_items}\nMixed Items: ${result.inserted_mix_items}`);
-        } else {
-          alert('Error creating batch: ' + result.error);
-        }
-      } catch (error) {
-        console.error('Error creating batch:', error);
-        alert('Error creating batch: ' + error.message);
-      }
-    }
+  // ── Search debounce ───────────────────────────────
+  let st;
+  document.getElementById('searchInput').addEventListener('input', e => {
+    clearTimeout(st);
+    st = setTimeout(() => { search = e.target.value; page = 1; selectedIds.clear(); load(); }, 300);
+  });
 
-    // Load batches on page load
-    loadBatches();
-  </script>
+  load();
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/server.js b/server.js
index ef7955a..9a29578 100644
--- a/server.js
+++ b/server.js
@@ -37,7 +37,9 @@ db.serialize(() => {
   db.run(`CREATE TABLE IF NOT EXISTS items (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     batch_id INTEGER NOT NULL,
+    brand TEXT,
     mpn TEXT NOT NULL,
+    mpn_custom TEXT,
     sn TEXT NOT NULL,
     createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
     FOREIGN KEY (batch_id) REFERENCES batches(id) ON DELETE CASCADE
@@ -47,7 +49,9 @@ db.serialize(() => {
   db.run(`CREATE TABLE IF NOT EXISTS items_mix (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     batch_id INTEGER NOT NULL,
+    brand TEXT,
     mpn TEXT NOT NULL,
+    mpn_custom TEXT,
     sn TEXT NOT NULL,
     createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
     FOREIGN KEY (batch_id) REFERENCES batches(id) ON DELETE CASCADE
@@ -58,12 +62,38 @@ db.serialize(() => {
   db.run(`CREATE INDEX IF NOT EXISTS idx_items_mix_batch_id ON items_mix(batch_id)`);
   db.run(`CREATE INDEX IF NOT EXISTS idx_items_mpn ON items(mpn)`);
   db.run(`CREATE INDEX IF NOT EXISTS idx_items_sn ON items(sn)`);
+  db.run(`CREATE INDEX IF NOT EXISTS idx_items_brand ON items(brand)`);
+  db.run(`CREATE INDEX IF NOT EXISTS idx_items_mix_brand ON items_mix(brand)`);
 });
 
 // ==================== BATCH API ROUTES ====================
 
+function runAsync(db, sql, params = []) {
+  return new Promise((resolve, reject) => {
+    db.run(sql, params, function (err) {
+      if (err) reject(err);
+      else resolve(this); // this.lastID, this.changes
+    });
+  });
+}
+
+function prepareRunAsync(stmt, params = []) {
+  return new Promise((resolve, reject) => {
+    stmt.run(params, function (err) {
+      if (err) reject(err);
+      else resolve();
+    });
+  });
+}
+
+function finalizeAsync(stmt) {
+  return new Promise((resolve, reject) => {
+    stmt.finalize((err) => (err ? reject(err) : resolve()));
+  });
+}
+
 // Save batch with items and items_mix
-app.post('/api/batch/save', (req, res) => {
+app.post('/api/batch/save', async (req, res) => {
   const { batch_name, items, items_mix } = req.body;
 
   if (!batch_name) {
@@ -74,70 +104,108 @@ app.post('/api/batch/save', (req, res) => {
     return res.status(400).json({ error: 'items array is required and must not be empty' });
   }
 
-  db.serialize(() => {
-    db.run('BEGIN TRANSACTION');
+  let insertedItems = 0;
+  let insertedMixItems = 0;
+  let errors = [];
+
+  try {
+    // BEGIN
+    await runAsync(db, 'BEGIN TRANSACTION');
 
     // Insert batch
-    db.run('INSERT INTO batches (batch_name) VALUES (?)', [batch_name], function(err) {
-      if (err) {
-        db.run('ROLLBACK');
-        return res.status(500).json({ error: 'Batch name already exists or database error: ' + err.message });
+    const batchResult = await runAsync(
+      db,
+      'INSERT INTO batches (batch_name) VALUES (?)',
+      [batch_name]
+    );
+
+    const batchId = batchResult.lastID;
+
+    // ===== Insert items =====
+    const itemStmt = db.prepare(
+      'INSERT INTO items (batch_id, brand, mpn, mpn_custom, sn) VALUES (?, ?, ?, ?, ?)'
+    );
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+
+      if (!item.mpn || !item.sn) {
+        errors.push(`Item at index ${i} is missing mpn or sn`);
+        continue;
       }
 
-      const batchId = this.lastID;
-      let insertedItems = 0;
-      let insertedMixItems = 0;
-      let errors = [];
+      try {
+        await prepareRunAsync(itemStmt, [
+          batchId,
+          item.brand || null,
+          item.mpn,
+          item.mpn_custom || null,
+          item.sn
+        ]);
+        insertedItems++;
+      } catch (err) {
+        errors.push(`Error inserting item at index ${i}: ${err.message}`);
+      }
+    }
+
+    await finalizeAsync(itemStmt);
+
+    // ===== Insert items_mix (optional) =====
+    if (Array.isArray(items_mix) && items_mix.length > 0) {
+      const mixStmt = db.prepare(
+        'INSERT INTO items_mix (batch_id, brand, mpn, mpn_custom, sn) VALUES (?, ?, ?, ?, ?)'
+      );
+
+      for (let i = 0; i < items_mix.length; i++) {
+        const item = items_mix[i];
 
-      // Insert items
-      const itemStmt = db.prepare('INSERT INTO items (batch_id, mpn, sn) VALUES (?, ?, ?)');
-      items.forEach((item, index) => {
         if (!item.mpn || !item.sn) {
-          errors.push(`Item at index ${index} is missing mpn or sn`);
-          return;
+          errors.push(`Mixed item at index ${i} is missing mpn or sn`);
+          continue;
         }
-        itemStmt.run(batchId, item.mpn, item.sn, (err) => {
-          if (err) errors.push(`Error inserting item at index ${index}: ${err.message}`);
-          else insertedItems++;
-        });
-      });
-      itemStmt.finalize();
 
-      // Insert items_mix if provided
-      if (Array.isArray(items_mix) && items_mix.length > 0) {
-        const mixStmt = db.prepare('INSERT INTO items_mix (batch_id, mpn, sn) VALUES (?, ?, ?)');
-        items_mix.forEach((item, index) => {
-          if (!item.mpn || !item.sn) {
-            errors.push(`Mixed item at index ${index} is missing mpn or sn`);
-            return;
-          }
-          mixStmt.run(batchId, item.mpn, item.sn, (err) => {
-            if (err) errors.push(`Error inserting mixed item at index ${index}: ${err.message}`);
-            else insertedMixItems++;
-          });
-        });
-        mixStmt.finalize();
+        try {
+          await prepareRunAsync(mixStmt, [
+            batchId,
+            item.brand || null,
+            item.mpn,
+            item.mpn_custom || null,
+            item.sn
+          ]);
+          insertedMixItems++;
+        } catch (err) {
+          errors.push(`Error inserting mixed item at index ${i}: ${err.message}`);
+        }
       }
 
-      db.run('COMMIT', (err) => {
-        if (err) {
-          db.run('ROLLBACK');
-          return res.status(500).json({ error: 'Transaction failed: ' + err.message });
-        }
+      await finalizeAsync(mixStmt);
+    }
 
-        res.json({
-          success: true,
-          batch_id: batchId,
-          batch_name,
-          inserted_items: insertedItems,
-          inserted_mix_items: insertedMixItems,
-          errors: errors.length > 0 ? errors : undefined
-        });
-      });
+    // COMMIT
+    await runAsync(db, 'COMMIT');
+
+    return res.json({
+      success: true,
+      batch_id: batchId,
+      batch_name,
+      inserted_items: insertedItems,
+      inserted_mix_items: insertedMixItems,
+      errors: errors.length ? errors : undefined
     });
-  });
+
+  } catch (err) {
+    // ROLLBACK nếu có lỗi nghiêm trọng
+    try {
+      await runAsync(db, 'ROLLBACK');
+    } catch (_) { }
+
+    return res.status(500).json({
+      error: err.message
+    });
+  }
 });
 
+
 // Get all batches with their items and items_mix
 app.get('/api/batch/get-all', (req, res) => {
   const page = parseInt(req.query.page) || 1;
@@ -157,12 +225,28 @@ app.get('/api/batch/get-all', (req, res) => {
   let params = [];
 
   if (search) {
-    const searchCondition = ` WHERE batch_name LIKE ? OR id LIKE ?`;
-    query += searchCondition;
-    countQuery += searchCondition;
-    const searchParam = `%${search}%`;
-    params = [searchParam, searchParam];
-  }
+  const searchCondition = `
+    WHERE 
+      batch_name LIKE ?
+      OR id LIKE ?
+      OR EXISTS (
+        SELECT 1 FROM items 
+        WHERE items.batch_id = batches.id 
+        AND sn LIKE ?
+      )
+      OR EXISTS (
+        SELECT 1 FROM items_mix 
+        WHERE items_mix.batch_id = batches.id 
+        AND sn LIKE ?
+      )
+  `;
+
+  query += searchCondition;
+  countQuery += searchCondition;
+
+  const searchParam = `%${search}%`;
+  params = [searchParam, searchParam, searchParam, searchParam];
+}
 
   query += ` ORDER BY ${column} ${order} LIMIT ? OFFSET ?`;
   params.push(limit, offset);
@@ -193,14 +277,14 @@ app.get('/api/batch/get-all', (req, res) => {
 
       batches.forEach(batch => {
         // Get items
-        db.all('SELECT mpn, sn, createdAt FROM items WHERE batch_id = ?', [batch.id], (err, items) => {
+        db.all('SELECT brand, mpn, mpn_custom, sn, createdAt FROM items WHERE batch_id = ?', [batch.id], (err, items) => {
           if (err) {
             console.error('Error fetching items:', err);
             items = [];
           }
 
           // Get items_mix
-          db.all('SELECT mpn, sn, createdAt FROM items_mix WHERE batch_id = ?', [batch.id], (err, items_mix) => {
+          db.all('SELECT brand, mpn, mpn_custom, sn, createdAt FROM items_mix WHERE batch_id = ?', [batch.id], (err, items_mix) => {
             if (err) {
               console.error('Error fetching items_mix:', err);
               items_mix = [];
@@ -246,13 +330,13 @@ app.get('/api/batch/get/:id', (req, res) => {
     }
 
     // Get items
-    db.all('SELECT mpn, sn, createdAt FROM items WHERE batch_id = ?', [id], (err, items) => {
+    db.all('SELECT brand, mpn, mpn_custom, sn, createdAt FROM items WHERE batch_id = ?', [id], (err, items) => {
       if (err) {
         return res.status(500).json({ error: err.message });
       }
 
       // Get items_mix
-      db.all('SELECT mpn, sn, createdAt FROM items_mix WHERE batch_id = ?', [id], (err, items_mix) => {
+      db.all('SELECT brand, mpn, mpn_custom, sn, createdAt FROM items_mix WHERE batch_id = ?', [id], (err, items_mix) => {
         if (err) {
           return res.status(500).json({ error: err.message });
         }
@@ -273,7 +357,7 @@ app.get('/api/batch/get/:id', (req, res) => {
 app.delete('/api/batch/delete/:id', (req, res) => {
   const id = req.params.id;
 
-  db.run('DELETE FROM batches WHERE id = ?', id, function(err) {
+  db.run('DELETE FROM batches WHERE id = ?', id, function (err) {
     if (err) {
       return res.status(500).json({ error: err.message });
     }
@@ -289,7 +373,7 @@ app.delete('/api/batch/delete/:id', (req, res) => {
 // Search items across all batches
 app.get('/api/items/search', (req, res) => {
   const search = req.query.q || '';
-  
+
   if (!search) {
     return res.status(400).json({ error: 'Search query is required' });
   }
@@ -300,29 +384,36 @@ app.get('/api/items/search', (req, res) => {
     SELECT 
       b.id as batch_id,
       b.batch_name,
+      i.brand,
       i.mpn,
+      i.mpn_custom,
       i.sn,
       i.createdAt,
       'items' as type
     FROM items i
     JOIN batches b ON i.batch_id = b.id
-    WHERE i.mpn LIKE ? OR i.sn LIKE ?
+    WHERE i.mpn LIKE ? OR i.sn LIKE ? OR i.brand LIKE ? OR i.mpn_custom LIKE ?
     UNION ALL
     SELECT 
       b.id as batch_id,
       b.batch_name,
+      im.brand,
       im.mpn,
+      im.mpn_custom,
       im.sn,
       im.createdAt,
       'items_mix' as type
     FROM items_mix im
     JOIN batches b ON im.batch_id = b.id
-    WHERE im.mpn LIKE ? OR im.sn LIKE ?
+    WHERE im.mpn LIKE ? OR im.sn LIKE ? OR im.brand LIKE ? OR im.mpn_custom LIKE ?
     ORDER BY createdAt DESC
     LIMIT 100
   `;
 
-  db.all(query, [searchParam, searchParam, searchParam, searchParam], (err, results) => {
+  db.all(query, [
+    searchParam, searchParam, searchParam, searchParam,
+    searchParam, searchParam, searchParam, searchParam
+  ], (err, results) => {
     if (err) {
       return res.status(500).json({ error: err.message });
     }