From 4f1717c4b19d3adf63923fc9f2cdf14d450c0900 Mon Sep 17 00:00:00 2001
From: morgane <enagore@gmail.com>
Date: Wed, 17 Jun 2026 18:22:35 +0000
Subject: [PATCH] Ajouter reconcile.html

---
 reconcile.html | 123 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 reconcile.html
diff --git a/reconcile.html b/reconcile.html
new file mode 100644
index 0000000..21fe149
--- /dev/null
+++ b/reconcile.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EverShelf - Réconciliation</title>
+    <style>
+        :root { --bg: #111827; --card: #1f2937; --text: #f3f4f6; --accent: #3b82f6; }
+        body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; }
+        
+        /* Formulaire de modification (fixé en haut) */
+        .edit-zone { 
+            position: sticky; top: 0; background: var(--card); padding: 20px; 
+            border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); z-index: 100;
+            display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; margin-bottom: 30px;
+        }
+        
+        /* Grille de produits */
+        .inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
+        .product-card { 
+            background: var(--card); padding: 15px; border-radius: 8px; cursor: pointer;
+            border: 1px solid #374151; transition: 0.2s;
+        }
+        .product-card:hover { border-color: var(--accent); transform: translateY(-2px); }
+        .product-card h4 { margin: 0 0 10px 0; font-size: 14px; }
+        .badge { background: #374151; padding: 3px 8px; border-radius: 4px; font-size: 11px; color: #9ca3af; }
+
+        input, select { background: #374151; color: white; border: 1px solid #4b5563; padding: 10px; border-radius: 6px; }
+        button { background: var(--accent); color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; }
+        button:hover { background: #2563eb; }
+        .status { font-size: 12px; margin-top: 5px; color: #10b981; }
+    </style>
+</head>
+<body>
+
+    <div class="edit-zone">
+        <input type="hidden" id="edit-id">
+        <input type="text" id="edit-name" placeholder="Nom du produit">
+        <select id="edit-category">
+            <option value="">-- Catégorie --</option>
+        </select>
+        <button onclick="saveChanges()">ENREGISTRER</button>
+        <div id="save-status" class="status" style="grid-column: span 4; display:none;">Modification enregistrée !</div>
+    </div>
+
+    <div id="loader" style="text-align:center;">Chargement de l'inventaire...</div>
+    <div class="inventory-grid" id="inventory"></div>
+
+    <script>
+        let categories = {};
+
+        // 1. Charger les catégories FR
+        fetch('translations/fr.json')
+            .then(r => r.json())
+            .then(data => {
+                categories = data.categories;
+                const sel = document.getElementById('edit-category');
+                Object.entries(categories).forEach(([key, val]) => {
+                    const opt = document.createElement('option');
+                    opt.value = key; opt.textContent = val;
+                    sel.appendChild(opt);
+                });
+                loadInventory(); // Charger les produits après les catégories
+            });
+
+        // 2. Charger les produits via app_bootstrap
+        function loadInventory() {
+            fetch('api/index.php?action=app_bootstrap')
+                .then(r => r.json())
+                .then(data => {
+                    document.getElementById('loader').style.display = 'none';
+                    const container = document.getElementById('inventory');
+                    
+                    // Dans app_bootstrap, les produits sont souvent dans data.inventory ou data.products
+                    const products = data.inventory || data.products || [];
+                    
+                    container.innerHTML = "";
+                    products.forEach(p => {
+                        const card = document.createElement('div');
+                        card.className = 'product-card';
+                        const catLabel = categories[p.category] || p.category;
+                        card.innerHTML = `
+                            <h4>${p.name}</h4>
+                            <span class="badge">${catLabel}</span>
+                        `;
+                        card.onclick = () => prepareEdit(p);
+                        container.appendChild(card);
+                    });
+                });
+        }
+
+        // 3. Remplir le formulaire au clic
+        function prepareEdit(p) {
+            document.getElementById('edit-id').value = p.id;
+            document.getElementById('edit-name').value = p.name;
+            document.getElementById('edit-category').value = p.category;
+            window.scrollTo({top: 0, behavior: 'smooth'});
+        }
+
+        // 4. Sauvegarder
+        function saveChanges() {
+            const data = {
+                id: document.getElementById('edit-id').value,
+                name: document.getElementById('edit-name').value,
+                category: document.getElementById('edit-category').value
+            };
+
+            fetch('api/index.php?action=product_edit', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify(data)
+            })
+            .then(r => r.json())
+            .then(res => {
+                const st = document.getElementById('save-status');
+                st.style.display = 'block';
+                setTimeout(() => st.style.display = 'none', 3000);
+                loadInventory(); // Recharger pour voir le changement
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
