From b91b64f32cd3d456b1c7e0a93fc6fa0a9f09cd3c Mon Sep 17 00:00:00 2001
From: Thad Miller <thaddeus.miller@lonza.com>
Date: Fri, 10 Jul 2026 17:11:59 -0400
Subject: [PATCH] [feat] cleanup dashboard page and allow removal of inventory

---
 src/pages/dashboard.astro                | 175 +++++------------------
 src/pages/partials/inventory-cards.astro |  12 --
 src/pages/partials/inventory-modal.astro |   3 +-
 3 files changed, 37 insertions(+), 153 deletions(-)

diff --git a/src/pages/dashboard.astro b/src/pages/dashboard.astro
index ffabeca..afbd64d 100644
--- a/src/pages/dashboard.astro
+++ b/src/pages/dashboard.astro
@@ -98,16 +98,6 @@ const catalogs = catalogRows
 
     <main class="col-12 col-md-10 p-4">
       <div class="d-flex flex-wrap gap-2 align-items-center mb-4">
-        <div class="d-flex align-items-center gap-1">
-          <button id="btnGrid" type="button" class="btn btn-sm btn-link text-secondary px-1 view-toggle-btn active" title="Images view">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1.5rem" height="1.5rem" fill="currentColor"><path d="M351.6 220.4C349.7 258.3 381.1 288.3 418 286.5L527.6 281.1C593 275.5 589.7 214.9 589 162.5C593.9 90.4 588.4 39.6 502.4 44.6C391.5 42.2 352.5 36.7 354.5 164.3C353.4 183.3 352.4 202.4 351.5 220.3zM418.4 168.6L418.4 168.6C419.6 147.4 420.8 125.9 421.6 109.4C421.6 109.2 421.6 109.1 421.7 109C421.7 108.8 422 108.6 422.1 108.6C456.2 108.5 491.4 108.6 525.7 108.7C525.8 108.7 526 109 526.1 109.1L526.1 109.3C525.5 142.4 524.9 184.6 524.2 217.3L415.6 222.6C416.3 207.3 417.4 188.1 418.5 168.7zM301.4 112.5C303.3 74.7 272 44.6 235 46.4L125.4 51.8C40.8 58.8 69.2 164.2 63.1 222.4C62.4 258.3 91.2 288.3 127.5 288.3C159.4 288.3 198.3 288.3 231 288.3C298.6 286.3 297.2 220.3 298.5 168.6C299.6 149.6 300.6 130.5 301.5 112.6zM234.6 164.3C233.4 185.6 232.2 207 231.4 223.5C231.4 223.7 231.4 223.8 231.3 223.9C231.3 224 231.1 224.2 231.1 224.2L231 224.3C198.3 224.2 159.3 224.3 127.3 224.3C127.3 224.3 127.2 224.3 127.1 224.2C127 224.1 126.9 224 126.9 224L126.9 223.8C127.5 192.1 128.1 149.9 128.8 115.8L237.4 110.5C236.7 125.8 235.6 145 234.5 164.4zM63.6 404C64.5 421.9 65.5 441 66.6 460C68.2 512.2 65.9 577.1 134.1 579.7L237.6 579.7C273.9 579.7 302.7 549.7 302 513.9C301.7 498.8 301.4 480.4 301.1 461.9C301.8 409.5 305 348.9 239.7 343.3L130 338C93 336.2 61.7 366.2 63.6 404.1zM130.4 455.8C129.3 436.4 128.3 417.1 127.5 401.8L236.1 407.1C236.8 441.2 237.3 483.4 238 515C238 515.1 238 515.1 238 515.2C238 515.3 237.9 515.4 237.8 515.5C237.7 515.6 237.6 515.6 237.6 515.6C205.8 515.6 166.4 515.5 134 515.6C133.9 515.6 133.7 515.3 133.7 515.2C133.6 515.1 133.6 515 133.6 514.8C132.8 498.3 131.6 476.9 130.4 455.6L130.4 455.6zM523 578.1C560 579.9 591.3 549.8 589.4 512C588.5 494.1 587.5 475 586.4 456C585.9 381.4 580.2 328.2 490 336.3C457.9 336.4 439 336.3 415.4 336.3C379.1 336.3 350.3 366.3 351 402.1C351.3 417.2 351.6 435.6 351.9 454.1C351.2 506.5 348 567.1 413.3 572.7L523 578.1zM525.5 514.1L416.9 508.8C416.2 474.7 415.7 432.5 415 400.9L415 400.7C415 400.6 415.3 400.3 415.3 400.3C443.6 400.3 484.7 400.3 518.9 400.3C518.9 400.3 519 400.3 519.1 400.4C519.2 400.5 519.3 400.6 519.3 400.7C519.4 400.8 519.4 400.9 519.4 401.1C521.1 435.4 524 484.9 525.4 514.3z"/></svg>
-            <span class="ms-1">Grid</span>
-          </button>
-          <button id="btnTable" type="button" class="btn btn-sm btn-link text-secondary px-1 view-toggle-btn" title="List view">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1.5rem" height="1.5rem" fill="currentColor" style="d-inline"><path d="M102.3 211.8C110.7 214 118.9 213.7 126.2 210C132.6 208 138.3 204 142.4 198.4C184.2 169.6 148.5 98.8 98.3 108.3C39.6 119.9 49.3 205.8 102.2 211.8zM114.4 375.6C114.4 375.6 114.8 375.5 116.2 375.3L116.5 375.2C169.2 368.9 178.6 283.3 120.1 271.7C69.9 262.3 34.2 332.9 76 361.8C80.1 367.4 85.9 371.4 92.3 373.4C99 376.6 106.8 377.6 114.5 375.5zM116.8 423.5C63.5 413.9 30 495.4 84.4 522.3C130.5 544.4 183.2 485.4 150.4 446.7C147.9 440.2 143.4 434.9 137.7 431.2C132.1 426.4 124.8 423.5 116.8 423.5zM352.8 508.4C423.1 503.6 491.2 499 561.5 501.8C579.2 502.5 594.1 488.8 594.8 471.1C595.5 453.4 581.7 438.6 564.1 437.9C490.4 435 416.4 439.9 344.2 444.8C310.8 447 277.8 449.3 245.4 450.7C227.7 451.4 214 466.4 214.8 484C215.5 501.7 230.5 515.4 248.1 514.6C283.8 513 318.6 510.7 352.8 508.4zM344 344.8L344.3 344.8C412.9 343.4 479.9 342.9 548.3 346.2C566 347 580.9 333.3 581.7 315.6C582.5 298 568.8 283 551.1 282.2C482.2 278.8 412.2 279.3 343.1 280.7C310.3 281.3 277.9 281.9 245.8 281.9C228.1 281.9 213.8 296.2 213.8 313.9C213.8 331.6 228.1 345.9 245.8 345.9C278.5 345.9 311.4 345.3 343.9 344.7zM444.8 187.4C480.8 186.5 519 181.7 551.8 187.6C569.2 190.7 585.8 179.1 588.9 161.7C592 144.3 580.4 127.7 563 124.6C484.4 115.2 408.3 126.5 331 129.9C301.8 131.9 273.7 133 246 131.4C228.4 130.3 213.2 143.8 212.2 161.4C213.8 217.2 300.2 190.8 335.5 193.7C372.2 191.2 408.7 188.4 444.8 187.4z"/></svg>
-            <span class="ms-1">List</span>
-          </button>
-        </div>
 
         <div class="vr opacity-25 mx-1"></div>
 
@@ -150,103 +140,10 @@ const catalogs = catalogRows
       <div id="inventoryView">
         <div id="gridView" class="row g-4 row-cols-2 row-cols-md-3 row-cols-xl-4 row-cols-xxxl-5" hx-post="/partials/inventory-cards" hx-trigger="load">
         </div>
-
-        <!-- <div id="tableView" style="display:none">
-          <div class="inv-list-wrap">
-            <table class="table align-middle mb-0 inv-list-table">
-              <tbody id="inventoryRows">
-                {inventory.map(card => {
-                  const market = nmPrice(card);
-                  const purchase = nmPurchase(card);
-                  const diff = market - purchase;
-                  const pct = purchase > 0 ? (diff / purchase) * 100 : 0;
-                  const isGain = diff >= 0;
-
-                  return (
-                    <tr class="inv-list-row">
-                      <td class="inv-list-cardcell">
-                        <div class="inv-list-card">
-                          <div
-                            class="inv-list-thumb card-trigger"
-                            data-card-id={card.productId}
-                            data-bs-toggle="modal"
-                            data-bs-target="#cardModal"
-                          >
-                            <img
-                              src={`/cards/${card.productId}.jpg`}
-                              alt={card.productName}
-                              loading="lazy"
-                              decoding="async"
-                              onerror="this.onerror=null;this.src='/cards/default.jpg';"
-                            />
-                          </div>
-
-                          <div class="inv-list-info">
-                            <div
-                              class="inv-list-name"
-                              data-card-id={card.productId}
-                              data-bs-toggle="modal"
-                              data-bs-target="#cardModal"
-                              style="cursor:pointer"
-                            >
-                              {card.productName}
-                            </div>
-
-                            <div class="inv-list-meta">
-                              <div class="inv-list-setlink">{card.setName}</div>
-                              <div>{card.rarityName}</div>
-                              <div>{card.number}</div>
-                            </div>
-
-                            <div class="inv-list-condition">
-                              <span>Near Mint</span>
-                              <span>•</span>
-                              <span>{card.variant !== "Normal" ? card.variant : "Holofoil"}</span>
-                            </div>
-                          </div>
-
-                          <div class="inv-list-right">
-                            <div class={`inv-list-price-line ${isGain ? "up" : "down"}`}>
-                              <span class="inv-grid-arrow small">{isGain ? "▲" : "▼"}</span>
-                              <span class="inv-list-price">${market.toFixed(2)}</span>
-                            </div>
-                            <div class={`inv-list-delta ${isGain ? "up" : "down"}`}>
-                              {isGain ? "+" : "-"}${Math.abs(diff).toFixed(2)} ({isGain ? "+" : "-"}{Math.abs(pct).toFixed(2)}%)
-                            </div>
-                            <div class="inv-list-qty">Qty: {card.qty}</div>
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-          <div class="text-secondary small mt-2 ps-1" id="rowCount"></div>
-        </div> -->
       </div>
     </main>
 </div>
 
-  <!-- <div class="modal fade" id="newCatalogModal" tabindex="-1" aria-labelledby="newCatalogLabel" aria-modal="true" role="dialog">
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content bg-dark text-light border border-secondary">
-        <div class="modal-header border-secondary">
-          <h5 class="modal-title" id="newCatalogLabel">Create Catalog</h5>
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          <label class="form-label small text-secondary text-uppercase fw-semibold" for="catalogNameInput">Catalog Name</label>
-          <input id="catalogNameInput" type="text" class="form-control bg-dark-subtle text-light border-secondary" placeholder="e.g. Japanese Holos" />
-        </div>
-        <div class="modal-footer border-secondary">
-          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-success" id="createCatalogBtn">Create</button>
-        </div>
-      </div>
-    </div>
-  </div>-->
 
   <div class="modal fade" id="bulkImportModal" tabindex="-1" aria-labelledby="bulkImportLabel" aria-modal="true" role="dialog">
     <div class="modal-dialog modal-lg modal-dialog-centered">
@@ -280,43 +177,6 @@ const catalogs = catalogRows
       <div class="modal-content p-2">Loading...</div>
     </div>
   </div>
-<!--
-  <div class="modal fade" id="inventoryEditModal" tabindex="-1" aria-labelledby="inventoryEditLabel" aria-modal="true" role="dialog">
-    <div class="modal-dialog modal-dialog-centered">
-      <div class="modal-content bg-dark text-light border border-secondary">
-        <div class="modal-header border-secondary">
-          <h5 class="modal-title" id="inventoryEditLabel">Edit Inventory</h5>
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body" id="inventoryEditBody">
-          <p class="text-secondary small">Select a card to edit its quantity and purchase price.</p>
-        </div>
-        <div class="modal-footer border-secondary">
-          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-success">Save</button>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="modal fade" id="addCardModal" tabindex="-1" aria-labelledby="addCardLabel" aria-modal="true" role="dialog">
-    <div class="modal-dialog modal-lg modal-dialog-centered">
-      <div class="modal-content bg-dark text-light border border-secondary">
-        <div class="modal-header border-secondary">
-          <h5 class="modal-title" id="addCardLabel">Add Card</h5>
-          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-          <input type="text" class="form-control bg-dark-subtle text-light border-secondary mb-3" placeholder="Search card name…" id="addCardSearch" />
-          <p class="text-secondary small">Search results will appear here. Connect to your card database API to enable live search.</p>
-        </div>
-        <div class="modal-footer border-secondary">
-          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-primary" disabled>Add Selected</button>
-        </div>
-      </div>
-    </div>
-  </div> -->
 
 <script is:inline>
 (function () {
@@ -534,6 +394,41 @@ const catalogs = catalogRows
     render();
   });
 
+  // ── Delete inventory entry ──────────────────────────────────────────────
+  modal.addEventListener('click', async (e) => {
+    const delBtn = e.target.closest('[data-inventory-delete]');
+    if (!delBtn) return;
+
+    const form = delBtn.closest('[data-inventory-edit-form]');
+    const inventoryId = form?.querySelector('[name=inventoryId]')?.value;
+    const cardId = form?.querySelector('[name=cardId]')?.value;
+    if (!inventoryId) return;
+    if (!confirm('Are you sure you want to remove this card from your inventory?')) return;
+
+    const original = delBtn.textContent;
+    delBtn.disabled = true; delBtn.textContent = 'Deleting…';
+
+    try {
+      const body = new FormData();
+      body.append('action', 'remove');
+      body.append('inventoryId', inventoryId);
+      if (cardId) body.append('cardId', cardId);
+
+      const res = await fetch('/api/inventory', { method: 'POST', body });
+      if (res.ok) {
+        // drop the matching grid tile, then close the modal
+        document.querySelector(`#gridView [data-inventory-id="${inventoryId}"]`)?.closest('.col')?.remove();
+        const instance = window.bootstrap?.Modal.getInstance(modal);
+        if (instance) instance.hide();
+        else modal.querySelector('[data-bs-dismiss=modal]')?.click();
+      } else {
+        delBtn.disabled = false; delBtn.textContent = original;
+      }
+    } catch {
+      delBtn.disabled = false; delBtn.textContent = original;
+    }
+  });
+
   // ── Save catalog + note ─────────────────────────────────────────────────
   modal.addEventListener('submit', async (e) => {
     const form = e.target.closest('[data-inventory-edit-form]');
diff --git a/src/pages/partials/inventory-cards.astro b/src/pages/partials/inventory-cards.astro
index 34b936c..c5f62b1 100644
--- a/src/pages/partials/inventory-cards.astro
+++ b/src/pages/partials/inventory-cards.astro
@@ -105,18 +105,6 @@ console.log(`totalHits: ${totalHits}`);
                 </span>
             </div>
         </div>
-        <div class="d-flex flex-row justify-content-between my-1 align-items-center edit-bar">
-            <input type="number" class="form-control form-control-sm text-center" style="max-width: 33%;" value={inventory.quantity} min="1" max="999" aria-label="Quantity input" aria-describedby="button-minus button-plus">
-            <div class="" aria-label="Edit controls">
-                <button type="button" class="btn btn-sm btn-edit me-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="edit-svg"><path d="M374.4 146.5L374.4 146.5C395.3 128.4 443.5 85.4 468.5 97.6C484.4 105.9 497.8 112.8 501.3 120.1L501.4 120.2L501.5 120.3L501.6 120.5C507.6 130.2 518.4 150.1 519.6 161.6C513.5 192.1 484 217.1 461.6 240.4C425.7 208.6 404.1 187.1 369.7 150.6C371.3 149.2 372.8 147.9 374.4 146.5zM484.1 307.3C484.3 307.1 484.5 307 484.6 306.8C525.1 265.7 579.4 226.1 583.7 161.7C575.2 64.5 475.6-2.1 395.9 50.5C299.2 114.8 235.3 194.9 152 272.8C118.1 305.6 72.6 334.1 62.3 384.2C60.7 400.9 62.5 429.9 63.3 446.8C63.3 472.2 62.6 516.6 62.3 535.2C65.6 607.8 181.9 562 225.7 560.1C249.2 555.4 267.7 533 280.2 519.6C280.4 519.4 280.5 519.3 280.5 519.3C350.4 450.8 416.9 378.7 484.2 307.4zM416.2 285.7C349.4 358.2 282.1 428.8 211.2 497.7C182.1 502.9 154.5 507.3 126.6 510C128.2 471.4 125.7 426.3 125.8 391.4C138.8 367.7 172.1 340.8 194.2 320.8C239.9 279.4 276.7 234.2 323.2 194.7C356.5 230 380.6 254.2 416.1 285.7z"/></svg></button>
-                
-                <button type="button" class="btn btn-sm btn-delete"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" class="delete-svg">
-                <filter id='shadow' color-interpolation-filters="sRGB">
-                    <feDropShadow dx="2" dy="2" stdDeviation="2" flood-opacity="0.5"/>
-                </filter>
-                <path d="M345.1 124.8C361 125.2 374.2 126 386.3 127.8C386.2 137.1 385.4 148.3 384.6 157.9C340.9 156.9 297.8 157.6 254.5 158C254.8 149.7 252.4 136.7 255.2 129.7C279.3 123.4 313.6 125.1 345.1 124.7zM448.7 160.7C460.3 66.9 431.8 64.5 346.7 60.8C268.3 59.6 178 54.7 190.5 158.2C157.2 162.7 96.1 137.9 89.6 186.5C88.1 210.7 111.2 222.9 132.8 220.8L132.8 478.6C132.6 530.6 176.7 571.9 228.6 569.3L398.9 569.3C500.4 574.1 515.3 476.9 509.7 395.2C509.1 364.1 511.4 273.6 512.5 223.8C554.7 223.7 554.5 159.5 512.2 159.8L448.6 160.7zM448.5 224.7C446.1 301.9 445.5 378 445.8 440.3C442.6 476.1 442.9 507.5 400.1 505.2L227 505.2C211.1 506.8 196.6 494.9 196.7 478.5L196.7 222.1C280.4 222.3 366.5 219.1 448.4 224.6z"/></svg></button>
-            </div>
-        </div>
         <div class="d-flex flex-row mt-1">
             <div class="text-body-tertiary flex-grow-1 small">{card.setName}</div>
         </div>
diff --git a/src/pages/partials/inventory-modal.astro b/src/pages/partials/inventory-modal.astro
index 327d049..868f013 100644
--- a/src/pages/partials/inventory-modal.astro
+++ b/src/pages/partials/inventory-modal.astro
@@ -193,7 +193,8 @@ const altSearchUrl = (card: any) => {
                       placeholder="e.g. bought at local shop, gift, graded copy…"
                     >{inv?.note ?? ''}</textarea>
                   </div>
-                  <div class="col-12 d-flex justify-content-end pt-1">
+                  <div class="col-12 d-flex justify-content-end gap-2 pt-1">
+                    <button type="button" class="btn btn-outline-danger" data-inventory-delete>Delete</button>
                     <button type="submit" class="btn btn-success">Save</button>
                   </div>
                 </div>