Update app.py

app.py

@@ -800,6 +800,8 @@ ADMIN_TEMPLATE = """
         .btn { padding: 12px 20px; font-size: 1em; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; }
         .btn-primary { background-color: var(--admin-primary); color: #000; }
         .btn-primary:hover { background-color: var(--admin-primary-dark); }
+        .btn-secondary { background-color: var(--admin-secondary); color: white; }
+        .btn-secondary:hover { background-color: #5a6268; }
         .btn-delete { background-color: var(--admin-danger); color: white; }
         .btn-delete:hover { background-color: #c82333; }
         .user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--padding); margin-top: var(--padding); }
@@ -809,11 +811,7 @@ ADMIN_TEMPLATE = """
         .user-info img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 3px solid var(--admin-border); background-color: #eee; }
         .user-details .name { font-weight: 600; font-size: 1.2em; }
         .user-details .username { color: var(--admin-secondary); font-size: 0.9em; }
-        .referral-info {
-            font-size: 0.85em; color: var(--admin-secondary); margin-top: 8px;
-            padding: 8px; background-color: #f8f9fa; border-radius: 8px;
-            border: 1px solid var(--admin-border);
-        }
+        .referral-info { font-size: 0.85em; color: var(--admin-secondary); margin-top: 8px; padding: 8px; background-color: #f8f9fa; border-radius: 8px; border: 1px solid var(--admin-border); }
         .referral-info .ref-by { color: var(--admin-success); }
         .referral-info .ref-count { color: var(--admin-info); font-weight: 600; }
         .user-balances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; margin-bottom: 1rem; margin-top: 1rem; }
@@ -838,9 +836,6 @@ ADMIN_TEMPLATE = """
         .form-group { display: flex; flex-direction: column; }
         .form-group label { margin-bottom: 0.5rem; font-weight: 500; font-size: 0.9em; }
         .form-group input, .form-group textarea { padding: 10px; font-size: 1rem; border: 1px solid var(--admin-border); border-radius: 8px; width: 100%; box-sizing: border-box; }
-        .calculation-summary { background: #f0f0f0; padding: 1rem; border-radius: 8px; margin-top: 1rem; }
-        .summary-item { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.95em; }
-        .summary-item strong { font-weight: 600; }
         .history-container { margin-top: 1.5rem; }
         .history-container h3 { font-size: 1.2rem; margin-bottom: 1rem; }
         .history-list { list-style: none; padding: 0; max-height: 200px; overflow-y: auto; border: 1px solid var(--admin-border); border-radius: 8px; }
@@ -863,11 +858,16 @@ ADMIN_TEMPLATE = """
         .tab-btn.active { color: var(--admin-primary-dark); border-bottom-color: var(--admin-primary); }
         .tab-content { display: none; }
         .tab-content.active { display: block; }
-        .invoice-items-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
-        .invoice-items-table th, .invoice-items-table td { border: 1px solid var(--admin-border); padding: 8px; text-align: left; font-size: 0.9em; }
-        .invoice-items-table th { background-color: #e9ecef; font-weight: 600; color: var(--admin-text); }
-        .invoice-items-table .total-row td { font-weight: 700; background-color: #f0f0f0; }
-        .invoice-items-table .action-btn { background: none; border: none; color: var(--admin-danger); cursor: pointer; font-size: 1.2em; }
+        #newInvoiceItemsList { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
+        .invoice-item-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding-bottom: 10px; border-bottom: 1px solid var(--admin-border); }
+        .invoice-item-row .form-group { margin-bottom: 0; }
+        .form-group.item-name { flex: 3 1 200px; }
+        .form-group.item-qty, .form-group.item-price { flex: 1 1 80px; }
+        .item-total-group { flex: 1 1 90px; text-align: right; padding-bottom: 10px; }
+        .item-total-group .item-total-display { font-weight: 700; font-size: 1.1em; }
+        .invoice-item-row .action-btn { align-self: center; margin-bottom: 5px; background: none; border: none; color: var(--admin-danger); cursor: pointer; font-size: 1.2em; }
+        .invoice-items-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--admin-border); }
+        .invoice-items-total { font-size: 1.2em; font-weight: 700; }
         .invoice-section-summary { padding: 1rem; background-color: #e9ecef; border-radius: 8px; margin-top: 1rem; font-weight: 600; font-size: 1.1em; text-align: right; }
         .invoice-section-summary span { color: var(--admin-success); }
         .invoice-list-admin { list-style: none; padding: 0; max-height: 200px; overflow-y: auto; border: 1px solid var(--admin-border); border-radius: 8px; }
@@ -890,7 +890,7 @@ ADMIN_TEMPLATE = """
         .item-total { flex-basis: 20%; text-align: right; font-weight: bold; }
         .invoice-total-display { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dee2e6; display: flex; flex-direction: column; gap: 0.5rem; font-size: 1.1em; }
         .invoice-total-display div { display: flex; justify-content: space-between; }
-        .bonus-source-selector { display: flex; gap: 1rem; margin-bottom: 1rem; align-items: center; }
+        .bonus-source-selector { display: flex; gap: 1rem; margin-bottom: 1rem; align-items: center; flex-wrap: wrap; }
         .bonus-source-selector label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
     </style>
 </head>
@@ -1026,22 +1026,14 @@ ADMIN_TEMPLATE = """
         <div id="invoice-tab" class="tab-content">
             <div class="form-section">
                 <h3>Добавить новую накладную</h3>
-                <table class="invoice-items-table" id="newInvoiceItemsTable">
-                    <thead>
-                        <tr>
-                            <th>Товар</th><th>Кол-во</th><th>Цена за ед.</th>
-                            <th>Сумма</th><th></th>
-                        </tr>
-                    </thead>
-                    <tbody></tbody>
-                    <tfoot>
-                        <tr class="total-row">
-                            <td colspan="3" style="text-align: right;"><strong>Итоговая сумма:</strong></td>
-                            <td id="newInvoiceTotalAmount">0.00</td><td></td>
-                        </tr>
-                    </tfoot>
-                </table>
-                <button class="btn btn-primary" style="margin-top: 1rem;" onclick="addNewInvoiceItemRow()">Добавить товар</button>
+                <div id="newInvoiceItemsList"></div>
+                <div class="invoice-items-footer">
+                    <button class="btn btn-secondary" onclick="addNewInvoiceItemRow()">Добавить товар</button>
+                    <div class="invoice-items-total">
+                        <strong>Итого:</strong>
+                        <span id="newInvoiceTotalAmount">0.00</span>
+                    </div>
+                </div>
             </div>
             <div class="form-section">
                 <h3>Оплата бонусами</h3>
@@ -1454,9 +1446,10 @@ ADMIN_TEMPLATE = """
             const price = parseFloat(newInvoiceItems[index].unit_price) || 0;
             const itemTotal = qty * price;
             newInvoiceItems[index].item_total = itemTotal;
-            const tableBody = document.getElementById('newInvoiceItemsTable').getElementsByTagName('tbody')[0];
-            if (tableBody.rows[index]) {
-                tableBody.rows[index].querySelector('.item-total-display').textContent = itemTotal.toFixed(2);
+            const list = document.getElementById('newInvoiceItemsList');
+            const itemRow = list.children[index];
+            if (itemRow) {
+                itemRow.querySelector('.item-total-display').textContent = itemTotal.toFixed(2);
             }
             updateNewInvoiceTotal();
         }
@@ -1467,12 +1460,32 @@ ADMIN_TEMPLATE = """
         }
         
         function renderNewInvoiceItems() {
-            const tableBody = document.getElementById('newInvoiceItemsTable').getElementsByTagName('tbody')[0];
-            tableBody.innerHTML = '';
+            const list = document.getElementById('newInvoiceItemsList');
+            list.innerHTML = '';
             newInvoiceItems.forEach((item, index) => {
-                const newRow = tableBody.insertRow();
+                const itemDiv = document.createElement('div');
+                itemDiv.className = 'invoice-item-row';
                 const productName = item.product_name ? String(item.product_name).replace(/"/g, '&quot;') : '';
-                newRow.innerHTML = `<td><input type="text" placeholder="Название товара" value="${productName}" oninput="updateInvoiceItem(${index}, 'product_name', this.value)"></td><td><input type="number" step="1" min="1" placeholder="1" value="${item.quantity || '1'}" oninput="updateInvoiceItem(${index}, 'quantity', this.value)"></td><td><input type="number" step="0.01" min="0" placeholder="0.00" value="${item.unit_price || ''}" oninput="updateInvoiceItem(${index}, 'unit_price', this.value)"></td><td class="item-total-display">${(item.item_total || 0).toFixed(2)}</td><td><button class="action-btn" onclick="removeInvoiceItemRow(${index})">🗑️</button></td>`;
+                itemDiv.innerHTML = `
+                    <div class="form-group item-name">
+                        <label>Товар</label>
+                        <input type="text" placeholder="Название товара" value="${productName}" oninput="updateInvoiceItem(${index}, 'product_name', this.value)">
+                    </div>
+                    <div class="form-group item-qty">
+                        <label>Кол-во</label>
+                        <input type="number" step="1" min="1" placeholder="1" value="${item.quantity || '1'}" oninput="updateInvoiceItem(${index}, 'quantity', this.value)">
+                    </div>
+                    <div class="form-group item-price">
+                        <label>Цена</label>
+                        <input type="number" step="0.01" min="0" placeholder="0.00" value="${item.unit_price || ''}" oninput="updateInvoiceItem(${index}, 'unit_price', this.value)">
+                    </div>
+                    <div class="item-total-group">
+                         <label>Сумма</label>
+                         <div class="item-total-display">${(item.item_total || 0).toFixed(2)}</div>
+                    </div>
+                    <button class="action-btn" onclick="removeInvoiceItemRow(${index})">🗑️</button>
+                `;
+                list.appendChild(itemDiv);
             });
             updateNewInvoiceTotal();
         }
@@ -2030,4 +2043,4 @@ if __name__ == '__main__':
         print("WARNING: HF_TOKEN_WRITE not set. Periodic backups to Hugging Face are disabled.")
 
     print("--- Server Ready ---")
-    app.run(host=HOST, port=PORT, debug=False)
+    app.run(host=HOST, port=PORT, debug=False)