Added stock management

frontend/assets/css/theme.css

@@ -233,4 +233,53 @@ input::placeholder {
     padding: 3rem;
     text-align: center;
     color: var(--text-muted);
+}
+
+.modal-split {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    margin-top: 1.5rem;
+}
+
+@media (min-width: 768px) {
+    .modal-split {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+.modal-content.large {
+    max-width: 800px;
+}
+
+.inner-table {
+    width: 100%;
+    margin-top: 1rem;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.inner-table th, .inner-table td {
+    padding: 0.75rem 1rem;
+    font-size: 0.85rem;
+}
+
+.inner-table th {
+    background: #111827;
+}
+
+.badge {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.25rem 0.6rem;
+    border-radius: 999px;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    border: 1px solid var(--border);
+}
+
+.badge.success {
+    background: rgba(16, 185, 129, 0.1);
+    color: var(--success);
+    border-color: rgba(16, 185, 129, 0.2);
 }

frontend/assets/js/api.js

@@ -72,11 +72,12 @@ async function loadItems() {
         tbody.innerHTML += `
             <tr>
                 <td style="font-weight: 600;">${item.name}</td>
-                <td><span style="background: rgba(255,255,255,0.05); padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.8rem; border: 1px solid var(--border);">${item.category}</span></td>
-                <td style="font-family: monospace; font-size: 1.05rem;">${item.total_quantity}</td>
+                <td><span class="badge">${item.category}</span></td>
+                <td style="font-family: monospace; font-size: 1.05rem;">${item.total_quantity || 0}</td>
                 <td style="text-align: right;">
+                    <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem; border-color: var(--success); color: var(--success);" onclick='openStockModal(${JSON.stringify(item).replace(/'/g, "&#39;")})'>Stock</button>
                     <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick='editItem(${JSON.stringify(item).replace(/'/g, "&#39;")})'>Edit</button>
-                    <button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteItem(${item.id})">Delete</button>
+                    <button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteItem(${item.id})">Del</button>
                 </td>
             </tr>
         `;
@@ -200,8 +201,9 @@ async function loadProjects() {
                 <td style="font-weight: 600;">${proj.name}</td>
                 <td style="color: var(--text-muted);">${proj.description}</td>
                 <td style="text-align: right;">
+                    <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem; border-color: var(--accent); color: var(--accent);" onclick='openAssociationModal(${JSON.stringify(proj).replace(/'/g, "&#39;")})'>Items</button>
                     <button class="btn btn-secondary" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick='editProject(${JSON.stringify(proj).replace(/'/g, "&#39;")})'>Edit</button>
-                    <button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteProject(${proj.id})">Delete</button>
+                    <button class="btn btn-secondary danger-btn" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.85rem;" onclick="deleteProject(${proj.id})">Del</button>
                 </td>
             </tr>
         `;
@@ -244,4 +246,142 @@ async function deleteProject(id) {
         await apiRequest(`/api/project?id=${id}`, 'DELETE');
         loadProjects();
     }
+}
+
+// ---- STOCK ----
+async function openStockModal(item) {
+    document.getElementById('stock-modal-title').innerText = `Stock: ${item.name}`;
+    document.getElementById('stock-item-id').value = item.id;
+    document.getElementById('stock-qty').value = '';
+    document.getElementById('stock-modal').classList.add('show');
+
+    await reloadStockTable(item.id);
+
+    const locData = await apiRequest('/api/location');
+    const locSelect = document.getElementById('stock-location');
+    locSelect.innerHTML = '<option value="">Select Location...</option>';
+    if (locData.locations) {
+        locData.locations.forEach(loc => {
+            locSelect.innerHTML += `<option value="${loc.id}">${loc.name}</option>`;
+        });
+    }
+}
+
+async function reloadStockTable(itemId) {
+    const tbody = document.getElementById('stock-table-body');
+    tbody.innerHTML = '<tr><td colspan="3" style="text-align:center;">Loading...</td></tr>';
+
+    try {
+        const data = await apiRequest(`/api/stock?item_id=${itemId}`);
+        tbody.innerHTML = '';
+        if (!data.stock || data.stock.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="3" style="text-align: center;">No stock entries.</td></tr>';
+            return;
+        }
+
+        data.stock.forEach(st => {
+            tbody.innerHTML += `
+                <tr>
+                    <td>${st.location_name || `Location #${st.location_id}`}</td>
+                    <td><span class="badge success">${st.quantity}</span></td>
+                    <td style="text-align: right;">
+                        <button class="btn btn-secondary danger-btn" style="padding: 0.2rem 0.5rem; font-size: 0.75rem;" onclick="deleteStock(${st.id}, ${itemId})">Del</button>
+                    </td>
+                </tr>
+            `;
+        });
+    } catch (e) {
+        tbody.innerHTML = '<tr><td colspan="3" style="text-align: center;">Failed to load.</td></tr>';
+    }
+}
+
+async function saveStock(event) {
+    event.preventDefault();
+    const itemId = document.getElementById('stock-item-id').value;
+    const payload = {
+        item_id: parseInt(itemId, 10),
+        location_id: parseInt(document.getElementById('stock-location').value, 10),
+        quantity: parseInt(document.getElementById('stock-qty').value, 10)
+    };
+
+    await apiRequest('/api/stock', 'POST', payload);
+    document.getElementById('stock-qty').value = '';
+    await reloadStockTable(itemId);
+    loadItems();
+}
+
+async function deleteStock(stockId, itemId) {
+    if (confirm("Remove this stock entry?")) {
+        await apiRequest(`/api/stock?id=${stockId}`, 'DELETE');
+        await reloadStockTable(itemId);
+        loadItems();
+    }
+}
+
+// ---- ASSOCIATIONS ----
+async function openAssociationModal(project) {
+    document.getElementById('association-modal-title').innerText = `Items for: ${project.name}`;
+    document.getElementById('assoc-project-id').value = project.id;
+    document.getElementById('assoc-qty').value = '';
+    document.getElementById('association-modal').classList.add('show');
+
+    await reloadAssociationTable(project.id);
+
+    const itemData = await apiRequest('/api/item');
+    const itemSelect = document.getElementById('assoc-item');
+    itemSelect.innerHTML = '<option value="">Select Item...</option>';
+    if (itemData.items) {
+        itemData.items.forEach(it => {
+            itemSelect.innerHTML += `<option value="${it.id}">${it.name} (Avail: ${it.total_quantity})</option>`;
+        });
+    }
+}
+
+async function reloadAssociationTable(projectId) {
+    const tbody = document.getElementById('association-table-body');
+    tbody.innerHTML = '<tr><td colspan="3" style="text-align:center;">Loading...</td></tr>';
+
+    try {
+        const data = await apiRequest(`/api/association?project_id=${projectId}`);
+        tbody.innerHTML = '';
+        if (!data.associations || data.associations.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="3" style="text-align: center;">No allocated items.</td></tr>';
+            return;
+        }
+
+        data.associations.forEach(asc => {
+            tbody.innerHTML += `
+                <tr>
+                    <td>${asc.item_name || `Item #${asc.item_id}`}</td>
+                    <td><span class="badge success">${asc.quantity}</span></td>
+                    <td style="text-align: right;">
+                        <button class="btn btn-secondary danger-btn" style="padding: 0.2rem 0.5rem; font-size: 0.75rem;" onclick="deleteAssociation(${asc.id}, ${projectId})">Del</button>
+                    </td>
+                </tr>
+            `;
+        });
+    } catch (e) {
+        tbody.innerHTML = '<tr><td colspan="3" style="text-align: center;">Failed to load.</td></tr>';
+    }
+}
+
+async function saveAssociation(event) {
+    event.preventDefault();
+    const projectId = document.getElementById('assoc-project-id').value;
+    const payload = {
+        project_id: parseInt(projectId, 10),
+        item_id: parseInt(document.getElementById('assoc-item').value, 10),
+        quantity: parseInt(document.getElementById('assoc-qty').value, 10)
+    };
+
+    await apiRequest('/api/association', 'POST', payload);
+    document.getElementById('assoc-qty').value = '';
+    await reloadAssociationTable(projectId);
+}
+
+async function deleteAssociation(assocId, projectId) {
+    if (confirm("Remove this item from the project?")) {
+        await apiRequest(`/api/association?id=${assocId}`, 'DELETE');
+        await reloadAssociationTable(projectId);
+    }
 }

frontend/htmx/contents/dash/inventory.html

@@ -36,9 +36,6 @@
             <div class="form-group">
                 <input type="text" id="item-desc" placeholder="Description">
             </div>
-            <div class="form-group">
-                <input type="number" id="item-qty" placeholder="Total Quantity" required>
-            </div>
             <div class="button-group">
                 <button type="submit" class="btn btn-primary">Save Item</button>
                 <button type="button" class="btn btn-secondary" onclick="closeModal('item-modal')">Cancel</button>
@@ -46,4 +43,46 @@
         </form>
     </div>
 </div>
+
+<div id="stock-modal" class="modal">
+    <div class="modal-content large">
+        <h2 id="stock-modal-title">Manage Stock</h2>
+        <div class="modal-split">
+            <div>
+                <h3>Current Locations</h3>
+                <div class="inner-table">
+                    <table>
+                        <thead>
+                        <tr>
+                            <th>Location</th>
+                            <th>Quantity</th>
+                            <th></th>
+                        </tr>
+                        </thead>
+                        <tbody id="stock-table-body">
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div>
+                <h3>Update Stock</h3>
+                <form id="stock-form" onsubmit="saveStock(event)" style="margin-top: 1rem;">
+                    <input type="hidden" id="stock-item-id">
+                    <div class="form-group">
+                        <select id="stock-location" class="search-input" style="width: 100%; padding: 0.85rem 1rem; background: #111827; color: white; border: 1px solid var(--border); border-radius: 10px;" required>
+                            <option value="">Select Location...</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <input type="number" id="stock-qty" placeholder="Quantity to add/set" required>
+                    </div>
+                    <div class="button-group">
+                        <button type="submit" class="btn btn-primary">Update Stock</button>
+                        <button type="button" class="btn btn-secondary" onclick="closeModal('stock-modal')">Done</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
 {{ end }}

frontend/htmx/contents/dash/projects.html

@@ -39,4 +39,46 @@
         </form>
     </div>
 </div>
+
+<div id="association-modal" class="modal">
+    <div class="modal-content large">
+        <h2 id="association-modal-title">Manage Project Items</h2>
+        <div class="modal-split">
+            <div>
+                <h3>Allocated Items</h3>
+                <div class="inner-table">
+                    <table>
+                        <thead>
+                        <tr>
+                            <th>Item</th>
+                            <th>Quantity</th>
+                            <th></th>
+                        </tr>
+                        </thead>
+                        <tbody id="association-table-body">
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div>
+                <h3>Allocate New Item</h3>
+                <form id="association-form" onsubmit="saveAssociation(event)" style="margin-top: 1rem;">
+                    <input type="hidden" id="assoc-project-id">
+                    <div class="form-group">
+                        <select id="assoc-item" class="search-input" style="width: 100%; padding: 0.85rem 1rem; background: #111827; color: white; border: 1px solid var(--border); border-radius: 10px;" required>
+                            <option value="">Select Item...</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <input type="number" id="assoc-qty" placeholder="Quantity needed" required>
+                    </div>
+                    <div class="button-group">
+                        <button type="submit" class="btn btn-primary">Allocate</button>
+                        <button type="button" class="btn btn-secondary" onclick="closeModal('association-modal')">Done</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
 {{ end }}