[feat] save/remove inventory working now

CLAUDE.md

@@ -0,0 +1,58 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Pokemon TCG card database and inventory management app. Users search cards, track market prices, and manage their collections. Closed beta.
+
+## Commands
+
+```bash
+npm run dev        # Start dev server (binds 0.0.0.0:4321)
+npm run build      # Production build → ./dist/
+npm run preview    # Preview production build
+```
+
+No test framework or linter is configured.
+
+Utility scripts in `scripts/` are run directly with `tsx` (e.g., `npx tsx scripts/reindex.ts`).
+
+## Tech Stack
+
+- **Astro 5** (SSR mode, Node.js standalone adapter)
+- **PostgreSQL** via Drizzle ORM (schema in `pokemon` namespace, snake_case DB columns)
+- **Typesense** for full-text card search
+- **Clerk** for authentication
+- **HTMX** for dynamic interactions (no SPA framework)
+- **Bootstrap 5** with custom SCSS overrides, dark theme
+- **Chart.js** for price history charts
+
+## Architecture
+
+### Data Flow
+
+TCGPlayer source data → `tcg_cards` → denormalized `cards` (per variant) → `skus` (per condition/language) → `price_history` / `sales_history`. User collections stored in `inventory` table linked to Clerk userId.
+
+PostgreSQL is source of truth. Typesense mirrors card/sku/inventory data for search. Both must be kept in sync — see `src/pages/api/inventory.ts` for the sync pattern (write to PG, then upsert/delete in Typesense).
+
+### Key Directories
+
+- `src/pages/` — Astro routes and API endpoints
+- `src/pages/partials/` — HTMX partial responses (HTML fragments returned to `hx-post` targets)
+- `src/pages/api/` — JSON/file API endpoints (`upload.ts` for CSV, `inventory.ts` for CRUD)
+- `src/components/` — Reusable `.astro` components
+- `src/db/` — Drizzle schema (`schema.ts`), relations (`relations.ts`), DB connection (`index.ts`), Typesense client (`typesense.ts`)
+- `scripts/` — Data ingestion and indexing utilities (not part of the app runtime)
+
+### Authentication
+
+Clerk middleware in `src/middleware.ts` protects routes via `createRouteMatcher`. Auth context accessed via `Astro.locals.auth()` in pages/API routes.
+
+### Database Schema
+
+Drizzle config uses `casing: 'snake_case'` — define schema fields in camelCase, they map to snake_case columns automatically. Migrations live in `./drizzle/`. Schema is scoped to the `pokemon` PostgreSQL schema.
+
+### Frontend Patterns
+
+Pages use HTMX for interactivity — forms POST to `/partials/*` endpoints that return HTML fragments. No client-side routing. View Transitions API enabled for page navigation animations. Card modals and inventory forms are HTMX-driven with `hx-post`, `hx-target`, and `hx-swap` attributes.

astro.config.mjs

@@ -18,5 +18,17 @@ export default defineConfig({
   output: "server",
   security: {
     checkOrigin: false
-  }
+  },
+  vite: {
+    css: {
+      preprocessorOptions: {
+        scss: {
+          // Silences deprecation warnings from dependencies
+          quietDeps: true,
+          // Specifically silence color function warnings
+          silenceDeprecations: ['color-functions', 'import','global-builtin'],
+        },
+      },
+    },
+  },
 });

package-lock.json

@@ -12,6 +12,7 @@
         "@clerk/astro": "^3.0.1",
         "@clerk/shared": "^4.0.0",
         "@clerk/themes": "^2.4.55",
+        "@popperjs/core": "^2.11.8",
         "astro": "^5.17.1",
         "bootstrap": "^5.3.8",
         "chalk": "^5.6.2",
@@ -121,7 +122,6 @@
       "resolved": "https://registry.npmjs.org/@azure-rest/core-client/-/core-client-2.5.1.tgz",
       "integrity": "sha512-EHaOXW0RYDKS5CFffnixdyRPak5ytiCtU7uXDcP/uiY+A6jFRwNGzzJBiznkCzvi5EYpY+YWinieqHb0oY916A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
         "@azure/core-auth": "^1.10.0",
@@ -139,7 +139,6 @@
       "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-2.1.2.tgz",
       "integrity": "sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.6.2"
       },
@@ -152,7 +151,6 @@
       "resolved": "https://registry.npmjs.org/@azure/core-auth/-/core-auth-1.10.1.tgz",
       "integrity": "sha512-ykRMW8PjVAn+RS6ww5cmK9U2CyH9p4Q88YJwvUslfuMmN98w/2rdGRLPqJYObapBCdzBVeDgYWdJnFPFb7qzpg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
         "@azure/core-util": "^1.13.0",
@@ -186,7 +184,6 @@
       "resolved": "https://registry.npmjs.org/@azure/core-http-compat/-/core-http-compat-2.3.2.tgz",
       "integrity": "sha512-Tf6ltdKzOJEgxZeWLCjMxrxbodB/ZeCbzzA1A2qHbhzAjzjHoBVSUeSl/baT/oHAxhc4qdqVaDKnc2+iE932gw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2"
       },
@@ -203,7 +200,6 @@
       "resolved": "https://registry.npmjs.org/@azure/core-lro/-/core-lro-2.7.2.tgz",
       "integrity": "sha512-0YIpccoX8m/k00O7mDDMdJpbr6mf1yWo2dfmxt5A8XVZVVMz2SSKaEbMCeJRvgQ0IaSlqhjT47p4hVIRRy90xw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.0.0",
         "@azure/core-util": "^1.2.0",
@@ -219,7 +215,6 @@
       "resolved": "https://registry.npmjs.org/@azure/core-paging/-/core-paging-1.6.2.tgz",
       "integrity": "sha512-YKWi9YuCU04B55h25cnOYZHxXYtEvQEbKST5vqRga7hWY9ydd3FZHdeQF8pyh+acWZvppw13M/LMGx0LABUVMA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.6.2"
       },
@@ -251,7 +246,6 @@
       "resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.3.1.tgz",
       "integrity": "sha512-9MWKevR7Hz8kNzzPLfX4EAtGM2b8mr50HPDBvio96bURP/9C+HjdH3sBlLSNNrvRAr5/k/svoH457gB5IKpmwQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.6.2"
       },
@@ -264,7 +258,6 @@
       "resolved": "https://registry.npmjs.org/@azure/core-util/-/core-util-1.13.1.tgz",
       "integrity": "sha512-XPArKLzsvl0Hf0CaGyKHUyVgF7oDnhKoP85Xv6M4StF/1AhfORhZudHtOyf2s+FcbuQ9dPRAjB8J2KvRRMUK2A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
         "@typespec/ts-http-runtime": "^0.3.0",
@@ -302,7 +295,6 @@
       "resolved": "https://registry.npmjs.org/@azure/keyvault-common/-/keyvault-common-2.0.0.tgz",
       "integrity": "sha512-wRLVaroQtOqfg60cxkzUkGKrKMsCP6uYXAOomOIysSMyt1/YM0eUn9LqieAWM8DLcU4+07Fio2YGpPeqUbpP9w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.0.0",
         "@azure/core-auth": "^1.3.0",
@@ -322,7 +314,6 @@
       "resolved": "https://registry.npmjs.org/@azure/keyvault-keys/-/keyvault-keys-4.10.0.tgz",
       "integrity": "sha512-eDT7iXoBTRZ2n3fLiftuGJFD+yjkiB1GNqzU2KbY1TLYeXeSPVTVgn2eJ5vmRTZ11978jy2Kg2wI7xa9Tyr8ag==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@azure-rest/core-client": "^2.3.3",
         "@azure/abort-controller": "^2.1.2",
@@ -346,7 +337,6 @@
       "resolved": "https://registry.npmjs.org/@azure/logger/-/logger-1.3.0.tgz",
       "integrity": "sha512-fCqPIfOcLE+CGqGPd66c8bZpwAji98tZ4JI9i/mlTNTlsIWslCfpg48s/ypyLxZTump5sypjrKn2/kY7q8oAbA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typespec/ts-http-runtime": "^0.3.0",
         "tslib": "^2.6.2"
@@ -360,7 +350,6 @@
       "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-4.29.0.tgz",
       "integrity": "sha512-/f3eHkSNUTl6DLQHm+bKecjBKcRQxbd/XLx8lvSYp8Nl/HRyPuIPOijt9Dt0sH50/SxOwQ62RnFCmFlGK+bR/w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@azure/msal-common": "15.15.0"
       },
@@ -373,7 +362,6 @@
       "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-15.15.0.tgz",
       "integrity": "sha512-/n+bN0AKlVa+AOcETkJSKj38+bvFs78BaP4rNtv3MJCmPH0YrHiskMRe74OhyZ5DZjGISlFyxqvf9/4QVEi2tw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -383,7 +371,6 @@
       "resolved": "https://registry.npmjs.org/@azure/msal-node/-/msal-node-3.8.8.tgz",
       "integrity": "sha512-+f1VrJH1iI517t4zgmuhqORja0bL6LDQXfBqkjuMmfTYXTQQnh1EvwwxO3UbKLT05N0obF72SRHFrC1RBDv5Gg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@azure/msal-common": "15.15.0",
         "jsonwebtoken": "^9.0.0",
@@ -1474,8 +1461,7 @@
       "version": "5.7.0",
       "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.7.0.tgz",
       "integrity": "sha512-WBu4ULVVxySLLzK1Ppq+OdfP+adRS4ntmDQT915rzDJ++i95gc2jZkM5B6LWEAwN3lGXpfie3yPABozdD3K3Vg==",
-      "license": "BSD-3-Clause",
+      "license": "BSD-3-Clause"
-      "peer": true
     },
     "node_modules/@js-temporal/polyfill": {
       "version": "0.5.1",
@@ -1803,6 +1789,7 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -2248,8 +2235,7 @@
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@tediousjs/connection-string/-/connection-string-0.5.0.tgz",
       "integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/@types/bootstrap": {
       "version": "5.2.10",
@@ -2326,6 +2312,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.4.0.tgz",
       "integrity": "sha512-9wLpoeWuBlcbBpOY3XmzSTG3oscB6xjBEEtn+pYXTfhyXhIxC5FsBer2KTopBlvKEiW9l13po9fq+SJY/5lkhw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.18.0"
       }
@@ -2336,6 +2323,7 @@
       "integrity": "sha512-gT+oueVQkqnj6ajGJXblFR4iavIXWsGAFCk3dP4Kki5+a9R4NMt0JARdk6s8cUKcfUoqP5dAtDSLU8xYUTFV+Q==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "pg-protocol": "*",
@@ -2347,7 +2335,6 @@
       "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-4.0.23.tgz",
       "integrity": "sha512-wwXrtQvbMHxCbBgjHaMGEmImFTQxxpfMOR/ZoQnXxB1woqkUbdLGFDgauo00Py9IudiaqSeiBiulSV9i6XIPig==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -2363,7 +2350,6 @@
       "resolved": "https://registry.npmjs.org/@typespec/ts-http-runtime/-/ts-http-runtime-0.3.4.tgz",
       "integrity": "sha512-CI0NhTrz4EBaa0U+HaaUZrJhPoso8sG7ZFya8uQoBA57fjzrjRSv87ekCjLZOFExN+gXE/z0xuN2QfH4H2HrLQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "http-proxy-agent": "^7.0.0",
         "https-proxy-agent": "^7.0.0",
@@ -2384,7 +2370,6 @@
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
       "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "event-target-shim": "^5.0.0"
       },
@@ -2409,7 +2394,6 @@
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
       "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 14"
       }
@@ -2543,6 +2527,7 @@
       "resolved": "https://registry.npmjs.org/astro/-/astro-5.18.1.tgz",
       "integrity": "sha512-m4VWilWZ+Xt6NPoYzC4CgGZim/zQUO7WFL0RHCH0AiEavF1153iC3+me2atDvXpf/yX4PyGUeD8wZLq1cirT3g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@astrojs/compiler": "^2.13.0",
         "@astrojs/internal-helpers": "0.7.6",
@@ -2684,15 +2669,13 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/bl": {
       "version": "6.1.6",
       "resolved": "https://registry.npmjs.org/bl/-/bl-6.1.6.tgz",
       "integrity": "sha512-jLsPgN/YSvPUg9UX0Kd73CXpm2Psg9FxMeCSXnk3WBO3CMT10JMwijubhGfHCnFu6TPn1ei3b975dxv7K2pWVg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/readable-stream": "^4.0.0",
         "buffer": "^6.0.3",
@@ -2766,7 +2749,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "base64-js": "^1.3.1",
         "ieee754": "^1.2.1"
@@ -2776,15 +2758,13 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
       "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
-      "license": "BSD-3-Clause",
+      "license": "BSD-3-Clause"
-      "peer": true
     },
     "node_modules/bundle-name": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
       "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "run-applescript": "^7.0.0"
       },
@@ -3160,7 +3140,6 @@
       "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz",
       "integrity": "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "bundle-name": "^4.1.0",
         "default-browser-id": "^5.0.0"
@@ -3177,7 +3156,6 @@
       "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
       "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -3190,7 +3168,6 @@
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
       "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4043,7 +4020,6 @@
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
       "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.0.1"
       }
@@ -4214,7 +4190,6 @@
       "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
       "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -4230,7 +4205,6 @@
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -4749,7 +4723,6 @@
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
       "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.0",
         "debug": "^4.3.4"
@@ -4763,7 +4736,6 @@
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
       "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.2",
         "debug": "4"
@@ -4777,7 +4749,6 @@
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
       "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -4807,8 +4778,7 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "BSD-3-Clause",
+      "license": "BSD-3-Clause"
-      "peer": true
     },
     "node_modules/immutable": {
       "version": "5.1.5",
@@ -4946,8 +4916,7 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz",
       "integrity": "sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/js-yaml": {
       "version": "4.1.1",
@@ -4973,7 +4942,6 @@
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
       "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "jws": "^4.0.1",
         "lodash.includes": "^4.3.0",
@@ -4996,7 +4964,6 @@
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
       "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "buffer-equal-constant-time": "^1.0.1",
         "ecdsa-sig-formatter": "1.0.11",
@@ -5008,7 +4975,6 @@
       "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
       "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "jwa": "^2.0.1",
         "safe-buffer": "^5.0.1"
@@ -5027,50 +4993,43 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
       "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/lodash.isboolean": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
       "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/lodash.isinteger": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
       "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/lodash.isnumber": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
       "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
       "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/lodash.isstring": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
       "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
       "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/loglevel": {
       "version": "1.9.2",
@@ -5982,7 +5941,6 @@
       "resolved": "https://registry.npmjs.org/mssql/-/mssql-11.0.1.tgz",
       "integrity": "sha512-KlGNsugoT90enKlR8/G36H0kTxPthDhmtNUCwEHvgRza5Cjpjoj+P2X6eMpFUDN7pFrJZsKadL4x990G8RBE1w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@tediousjs/connection-string": "^0.5.0",
         "commander": "^11.0.0",
@@ -6003,7 +5961,6 @@
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -6016,7 +5973,6 @@
       "resolved": "https://registry.npmjs.org/tedious/-/tedious-18.6.2.tgz",
       "integrity": "sha512-g7jC56o3MzLkE3lHkaFe2ZdOVFBahq5bsB60/M4NYUbocw/MCrS89IOEQUFr+ba6pb8ZHczZ/VqCyYeYq0xBAg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@azure/core-auth": "^1.7.2",
         "@azure/identity": "^4.2.1",
@@ -6070,8 +6026,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/native-duplexpair/-/native-duplexpair-1.0.0.tgz",
       "integrity": "sha512-E7QQoM+3jvNtlmyfqRZ0/U75VFgCls+fSkbml2MpgWkWyz3ox8Y58gNhfuziuQYGNNQAbFZJQck55LHCnCK6CA==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/neotraverse": {
       "version": "0.6.18",
@@ -6186,7 +6141,6 @@
       "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
       "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "default-browser": "^5.2.1",
         "define-lazy-prop": "^3.0.0",
@@ -6284,6 +6238,7 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
       "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.12.0",
         "pg-pool": "^3.13.0",
@@ -6491,7 +6446,6 @@
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -6555,7 +6509,6 @@
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
       "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "abort-controller": "^3.0.0",
         "buffer": "^6.0.3",
@@ -6821,14 +6774,14 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/rollup": {
       "version": "4.59.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
       "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -6873,7 +6826,6 @@
       "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
       "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -6899,21 +6851,20 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "license": "MIT",
+      "license": "MIT"
-      "peer": true
     },
     "node_modules/sass": {
       "version": "1.98.0",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.98.0.tgz",
       "integrity": "sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.1.5",
@@ -7099,8 +7050,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
       "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
-      "license": "BSD-3-Clause",
+      "license": "BSD-3-Clause"
-      "peer": true
     },
     "node_modules/standardwebhooks": {
       "version": "1.0.0",
@@ -7138,7 +7088,6 @@
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.2.0"
       }
@@ -7232,7 +7181,6 @@
       "resolved": "https://registry.npmjs.org/tarn/-/tarn-3.0.2.tgz",
       "integrity": "sha512-51LAVKUSZSVfI05vjPESNc5vwqqZpbXCsU+/+wxlOrUjk2SnFTt97v9ZgQrD4YmxYW1Px6w2KjaDitCfkvgxMQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -7242,7 +7190,6 @@
       "resolved": "https://registry.npmjs.org/tedious/-/tedious-19.2.1.tgz",
       "integrity": "sha512-pk1Q16Yl62iocuQB+RWbg6rFUFkIyzqOFQ6NfysCltRvQqKwfurgj8v/f2X+CKvDhSL4IJ0cCOfCHDg9PWEEYA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@azure/core-auth": "^1.7.2",
         "@azure/identity": "^4.2.1",
@@ -7351,6 +7298,7 @@
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -7382,6 +7330,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -7722,7 +7671,6 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -8375,7 +8323,6 @@
       "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
       "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "is-wsl": "^3.1.0"
       },
@@ -8454,6 +8401,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -13,6 +13,7 @@
     "@clerk/astro": "^3.0.1",
     "@clerk/shared": "^4.0.0",
     "@clerk/themes": "^2.4.55",
+    "@popperjs/core": "^2.11.8",
     "astro": "^5.17.1",
     "bootstrap": "^5.3.8",
     "chalk": "^5.6.2",

scripts/pokemon-helper.ts

@@ -88,6 +88,25 @@ export const createSkuCollection = async () => {
     console.log(chalk.green('Collection "skus" created successfully.'));
 }
 
+// Delete and recreate the 'inventory' index
+export const createInventoryCollection = async () => {
+    try {
+        await client.collections('inventories').delete();
+    } catch (error) {
+        // Ignore error, just means collection doesn't exist
+    }
+    await client.collections().create({
+        name: 'inventories',
+        fields: [
+            { name: 'id', type: 'string' },
+            { name: 'userId', type: 'string' },
+            { name: 'catalogName', type: 'string' },
+            { name: 'card_id', type: 'string', reference: 'cards.id' },
+        ]
+    });
+    console.log(chalk.green('Collection "inventories" created successfully.'));
+}
+
 
 export const upsertCardCollection = async (db:DBInstance) => {
     const pokemon = await db.query.cards.findMany({
@@ -131,6 +150,17 @@ export const upsertSkuCollection = async (db:DBInstance) => {
     console.log(chalk.green('Collection "skus" indexed successfully.'));
 }
 
+export const upsertInventoryCollection = async (db:DBInstance) => {
+    const inv = await db.query.inventory.findMany();
+    await client.collections('inventories').documents().import(inv.map(i => ({
+        id: i.inventoryId,
+        userId: i.userId,
+        catalogName: i.catalogName,
+        card_id: i.cardId.toString(),
+    })), { action: 'upsert' });
+    console.log(chalk.green('Collection "inventories" indexed successfully.'));
+}
+
 
 
 

scripts/reindex.ts

@@ -5,7 +5,10 @@ import * as Indexing from './pokemon-helper.ts';
 
 //await Indexing.createCardCollection();
 //await Indexing.createSkuCollection();
-await Indexing.upsertCardCollection(db);
+await Indexing.createInventoryCollection();
-await Indexing.upsertSkuCollection(db);
+
+//await Indexing.upsertCardCollection(db);
+//await Indexing.upsertSkuCollection(db);
+await Indexing.upsertInventoryCollection(db);
 await ClosePool();
 console.log(chalk.green('Pokémon reindex complete.'));

src/assets/js/main.js

@@ -1,6 +1,5 @@
 import * as bootstrap from 'bootstrap';
 window.bootstrap = bootstrap;
-import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 
 document.addEventListener('DOMContentLoaded', () => {
 

src/components/CardGrid.astro

@@ -48,6 +48,21 @@ import BackToTop from "./BackToTop.astro"
 (function () {
 
   function initInventoryForms(root = document) {
+    // Fetch inventory entries for this card
+    const invList = root.querySelector('#inventoryEntryList') || document.getElementById('inventoryEntryList');
+    if (invList && !invList.dataset.inventoryFetched) {
+      invList.dataset.inventoryFetched = 'true';
+      const cardId = invList.dataset.cardId;
+      if (cardId) {
+        const body = new FormData();
+        body.append('cardId', cardId);
+        fetch('/api/inventory', { method: 'POST', body })
+          .then(r => r.text())
+          .then(html => { invList.innerHTML = html || ''; })
+          .catch(() => { invList.innerHTML = '<span class="text-danger">Failed to load inventory</span>'; });
+      }
+    }
+
     const forms = root.querySelectorAll('[data-inventory-form]');
 
     forms.forEach((form) => {
@@ -446,6 +461,91 @@ import BackToTop from "./BackToTop.astro"
   });
 
   const cardModal = document.getElementById('cardModal');
+
+  // ── Delegated submit handler for inventory form ──────────────────────────
+  cardModal.addEventListener('submit', async (e) => {
+    const form = e.target.closest('[data-inventory-form]');
+    if (!form) return;
+    e.preventDefault();
+
+    if (!form.checkValidity()) { form.classList.add('was-validated'); return; }
+
+    const cardId = form.closest('[data-card-id]')?.dataset.cardId;
+    if (!cardId) return;
+
+    const submitBtn = form.querySelector('button[type="submit"]');
+    if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Saving…'; }
+
+    const body = new FormData(form);
+    body.append('action', 'add');
+    body.append('cardId', cardId);
+
+    try {
+      const res = await fetch('/api/inventory', { method: 'POST', body });
+      const html = await res.text();
+      const invList = document.getElementById('inventoryEntryList');
+      if (invList) invList.innerHTML = html || '';
+      form.reset();
+      form.classList.remove('was-validated');
+    } catch {
+      // keep current inventory list state
+    } finally {
+      if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Save to inventory'; }
+    }
+  });
+
+  // ── Delegated click handler for inventory entry buttons ─────────────────
+  cardModal.addEventListener('click', async (e) => {
+    const btn = e.target.closest('[data-inv-action]');
+    if (!btn) return;
+
+    const article = btn.closest('[data-inventory-id]');
+    if (!article) return;
+
+    const action = btn.dataset.invAction;
+    const inventoryId = article.dataset.inventoryId;
+    const cardId = article.dataset.cardId;
+    const qtyEl = article.querySelector('[data-inv-qty]');
+    let qty = Number(qtyEl?.textContent) || 1;
+
+    if (action === 'increment') {
+      qtyEl.textContent = ++qty;
+      return;
+    }
+
+    if (action === 'decrement') {
+      if (qty > 1) qtyEl.textContent = --qty;
+      return;
+    }
+
+    // update or remove — POST to API and reload inventory list
+    btn.disabled = true;
+    const body = new FormData();
+    body.append('cardId', cardId);
+
+    if (action === 'update') {
+      body.append('action', 'update');
+      body.append('inventoryId', inventoryId);
+      body.append('quantity', String(qty));
+      body.append('purchasePrice', article.dataset.purchasePrice);
+      body.append('note', article.dataset.note || '');
+    } else if (action === 'remove') {
+      body.append('action', 'remove');
+      body.append('inventoryId', inventoryId);
+    }
+
+    try {
+      const res = await fetch('/api/inventory', { method: 'POST', body });
+      const html = await res.text();
+      const invList = document.getElementById('inventoryEntryList');
+      if (invList) invList.innerHTML = html || '';
+    } catch {
+      // keep current state
+    } finally {
+      btn.disabled = false;
+    }
+  });
+
   cardModal.addEventListener('shown.bs.modal', () => {
     updateNavButtons(cardModal);
     initChartAfterSwap(cardModal);

src/db/relations.ts

@@ -21,9 +21,21 @@ export const relations = defineRelations(schema, (r) => ({
         }),
         history: r.many.priceHistory(),
         latestSales: r.many.salesHistory(),
+        inventories: r.many.inventory(),
+    },
+    inventory: {
+        card: r.one.cards({
+            from: r.inventory.cardId,
+            to: r.cards.cardId,
+        }),
+        sku: r.one.skus({
+            from: [r.inventory.cardId, r.inventory.condition],
+            to: [r.skus.cardId, r.skus.condition],
+        }),
     },
     cards: {
         prices: r.many.skus(),
+        inventories: r.many.inventory(),
         set: r.one.sets({
             from: r.cards.setId,
             to: r.sets.setId,

src/db/schema.ts

@@ -1,5 +1,5 @@
 //import { mysqlTable, int, varchar, boolean, decimal, datetime, index } from "drizzle-orm/mysql-core"
-import { integer, varchar, boolean, decimal, timestamp, index, pgSchema, uniqueIndex, primaryKey } from "drizzle-orm/pg-core";
+import { integer, varchar, boolean, decimal, timestamp, index, pgSchema, uuid, primaryKey } from "drizzle-orm/pg-core";
 
 export const pokeSchema = pgSchema("pokemon");
 
@@ -98,6 +98,7 @@ export const skus = pokeSchema.table('skus', {
 },
 (table) => [
 	index('idx_product_id_condition').on(table.productId, table.variant, table.condition),
+	index('idx_card_id_condition').on(table.cardId, table.condition),
 ]);
 
 export const priceHistory = pokeSchema.table('price_history', {
@@ -124,6 +125,20 @@ export const salesHistory = pokeSchema.table('sales_history',{
 	primaryKey({ name: 'pk_sales_history', columns: [table.skuId, table.orderDate] })
 ]);
 
+export const inventory = pokeSchema.table('inventory',{
+	inventoryId: uuid().primaryKey().notNull().defaultRandom(),
+	userId: varchar({ length: 100 }).notNull(),
+	catalogName: varchar({ length: 100 }),
+	cardId: integer().notNull(),
+	condition: varchar({ length: 255 }).notNull(),
+	quantity: integer(),
+	purchasePrice: integer(),
+	note: varchar({ length:255 })
+},
+(table) => [
+	index('idx_userid_cardid').on(table.userId, table.cardId)
+]);
+
 export const processingSkus = pokeSchema.table('processing_skus', {
 	skuId: integer().primaryKey(),
 });

src/pages/api/inventory.ts

@@ -0,0 +1,160 @@
+import type { APIRoute } from 'astro';
+import { db } from '../../db/index';
+import { inventory } from '../../db/schema';
+import { client } from '../../db/typesense';
+import { eq } from 'drizzle-orm';
+
+
+const GainLoss = (purchasePrice:any, marketPrice:any) => {
+    if (!purchasePrice || !marketPrice) return '<div class="fs-5 fw-semibold">N/A</div>';
+    const pp = Number(purchasePrice);
+    const mp = Number(marketPrice);
+    if (pp === mp) return '<div class="fs-5 fw-semibold text-warning">-</div>';
+    if (pp > mp) return `<div class="fs-5 fw-semibold text-critical">-$${pp-mp}</div>`;
+    return `<div class="fs-5 fw-semibold text-success">+$${mp-pp}</div>`;
+}
+
+
+const getInventory = async (userId:string, cardId:number) => {
+
+    const inventories = await db.query.inventory.findMany({
+        where: { userId:userId, cardId:cardId, },
+        with: { card: true, sku: true, }
+    });
+
+    const invHtml = inventories.map(inv => {
+        return `
+        <article class="border rounded-4 p-2 bg-body-tertiary inventory-entry-card"
+            data-inventory-id="${inv.inventoryId}"
+            data-card-id="${inv.cardId}"
+            data-purchase-price="${inv.purchasePrice}"
+            data-note="${(inv.note || '').replace(/"/g, '&quot;')}">
+            <div class="d-flex flex-column gap-2">
+                <!-- Top row -->
+                <div class="d-flex justify-content-between align-items-start gap-3">
+                    <div class="min-w-0 flex-grow-1">
+                        <div class="fw-semibold fs-5 text-body mb-1">${inv.condition}</div>
+                    </div>
+                </div>
+                <!-- Middle row -->
+                <div class="row g-2">
+                    <div class="col-4">
+                        <div class="small text-secondary">Purchase price</div>
+                        <div class="fs-5 fw-semibold">$${inv.purchasePrice}</div>
+                    </div>
+                    <div class="col-4">
+                        <div class="small text-secondary">Market price</div>
+                        <div class="fs-5 text-success">$${inv.sku?.marketPrice}</div>
+                    </div>
+                    <div class="col-4">
+                        <div class="small text-secondary">Gain / loss</div>
+                        ${GainLoss(inv.purchasePrice, inv.sku?.marketPrice)}
+                    </div>
+                </div>
+                <!-- Bottom row -->
+                <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
+                    <div class="d-flex align-items-center gap-2">
+                        <span class="small text-secondary">Qty</span>
+                        <div class="btn-group" role="group" aria-label="Quantity controls">
+                            <button type="button" class="btn btn-outline-secondary btn-sm" data-inv-action="decrement">−</button>
+                            <button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1" data-inv-qty>${inv.quantity}</button>
+                            <button type="button" class="btn btn-outline-secondary btn-sm" data-inv-action="increment">+</button>
+                        </div>
+                    </div>
+                    <div class="d-flex align-items-center gap-2 flex-wrap">
+                        <button type="button" class="btn btn-sm btn-outline-secondary" data-inv-action="update">Edit</button>
+                        <button type="button" class="btn btn-sm btn-outline-danger" data-inv-action="remove">Remove</button>
+                    </div>
+                </div>
+            </div>
+        </article>`;
+    });
+
+    return new Response(
+        invHtml.join(''),
+        {
+            status: 200,
+            headers: { 'Content-Type': 'text/html' },
+        }
+    );
+
+}
+
+
+const addToInventory = async (userId:string, cardId:number, condition:string, purchasePrice:number, quantity:number, note:string, catalogName:string) => {
+    // First add to database
+    const inv = await db.insert(inventory).values({
+        userId: userId,
+        cardId: cardId,
+        catalogName: catalogName,
+        condition: condition,
+        purchasePrice: purchasePrice,
+        quantity: quantity,
+        note: note,
+    }).returning();
+    // And then add to Typesense
+    await client.collections('inventories').documents().import(inv.map(i => ({
+        id: i.inventoryId,
+        userId: i.userId,
+        catalogName: i.catalogName,
+        card_id: i.cardId.toString(),
+    })));
+}
+
+const removeFromInventory = async (inventoryId:string) => {
+    await db.delete(inventory).where(eq( inventory.inventoryId, inventoryId ));
+    await client.collections('inventories').documents(inventoryId).delete();
+}
+
+const updateInventory = async (inventoryId:string, quantity:number, purchasePrice:number, note:string) => {
+    // Update in database
+    await db.update(inventory).set({
+        quantity: quantity,
+        purchasePrice: purchasePrice,
+        note: note,
+    }).where(eq( inventory.inventoryId, inventoryId ));
+    // There is no need to update Typesense for these fields as they are not indexed
+}
+
+export const POST: APIRoute = async ({ request, locals }) => {
+    // Access form data from the request body
+    const formData = await request.formData();
+    const action = formData.get('action');
+    const cardId = Number(formData.get('cardId')) || 0;
+    const { userId } = locals.auth();
+
+    switch (action) {
+
+        case 'add':
+            const condition = formData.get('condition')?.toString() || 'Unknown';
+            const purchasePrice = Number(formData.get('purchasePrice')) || 0;
+            const quantity = Number(formData.get('quantity')) || 1;
+            const note = formData.get('note')?.toString() || '';
+            const catalogName = formData.get('catalogName')?.toString() || 'Default';
+            await addToInventory(userId!, cardId, condition, purchasePrice, quantity, note, catalogName);
+            //return await getInventory(cardId);
+            break;
+
+        case 'remove':
+            const inventoryId = formData.get('inventoryId')?.toString() || '';
+            await removeFromInventory(inventoryId);
+            break;
+
+        case 'update':
+            const invId = formData.get('inventoryId')?.toString() || '';
+            const qty = Number(formData.get('quantity')) || 1;
+            const price = Number(formData.get('purchasePrice')) || 0;
+            const invNote = formData.get('note')?.toString() || '';
+            await updateInventory(invId, qty, price, invNote);
+            break;
+
+        default:
+            // No action = list inventory for this card
+            return getInventory(userId!, cardId);
+    }
+
+    // Always return current inventory after a mutation
+    return getInventory(userId!, cardId);
+
+
+};

src/pages/dashboard.astro

@@ -1028,7 +1028,7 @@ const totalGain = inventory.reduce((s, c) => s + gain(c) * c.qty, 0);
       document.getElementById("catalogList")?.appendChild(li);
 
       input.value = "";
-      bootstrap.Modal.getInstance(document.getElementById("newCatalogModal"))?.hide();
+      //bootstrap.Modal.getInstance(document.getElementById("newCatalogModal"))?.hide();
     });
 
     document.getElementById("csvFileInput")?.addEventListener("change", (e) => {

src/pages/partials/card-modal.astro

@@ -169,7 +169,6 @@ const altSearchUrl = (card: any) => {
   return `https://alt.xyz/browse?query=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&sortBy=newest_first`;
 };
 ---
-
   <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
     <div class="modal-content" data-card-id={card?.cardId}>
       <div class="modal-header border-0">
@@ -496,104 +495,13 @@ const altSearchUrl = (card: any) => {
                         <div class="alert alert-dark border-0 rounded-4 d-none" id="inventoryEmptyState">
                           <div class="fw-medium mb-1">No inventory entries yet</div>
                           <div class="text-secondary small">
-                            Once you add copies of this card, they’ll show up here.
+                            Once you add copies of this card, they'll show up here.
                           </div>
                         </div>
 
                         <!-- Inventory list -->
-                        <div class="d-flex flex-column gap-3" id="inventoryEntryList">
+                        <div class="d-flex flex-column gap-3" id="inventoryEntryList" data-card-id={cardId}>
-
+                          <span>Loading...</span>
-                          <!-- Inventory card -->
-                          <article class="border rounded-4 p-2 bg-body-tertiary inventory-entry-card">
-                            <div class="d-flex flex-column gap-2">
-
-                              <!-- Top row -->
-                              <div class="d-flex justify-content-between align-items-start gap-3">
-                                <div class="min-w-0 flex-grow-1">
-                                  <div class="fw-semibold fs-5 text-body mb-1">Near Mint</div>
-                                </div>
-                              </div>
-
-                              <!-- Middle row -->
-                              <div class="row g-2">
-                                <div class="col-4">
-                                  <div class="small text-secondary">Purchase price</div>
-                                  <div class="fs-5 fw-semibold">$8.50</div>
-                                </div>
-                                <div class="col-4">
-                                  <div class="small text-secondary">Market price</div>
-                                  <div class="fs-5 text-success">$10.25</div>
-                                </div>
-                                <div class="col-4">
-                                  <div class="small text-secondary">Gain / loss</div>
-                                  <div class="fs-5 fw-semibold text-success">+$1.75</div>
-                                </div>
-                              </div>
-
-                              <!-- Bottom row -->
-                              <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
-                                <div class="d-flex align-items-center gap-2">
-                                  <span class="small text-secondary">Qty</span>
-
-                                  <div class="btn-group" role="group" aria-label="Quantity controls">
-                                    <button type="button" class="btn btn-outline-secondary btn-sm">−</button>
-                                    <button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1">2</button>
-                                    <button type="button" class="btn btn-outline-secondary btn-sm">+</button>
-                                  </div>
-                                </div>
-
-                                <div class="d-flex align-items-center gap-2 flex-wrap">
-                                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
-                                  <button type="button" class="btn btn-sm btn-outline-danger">Remove</button>
-                                </div>
-                              </div>
-                            </div>
-                          </article>
-
-                          <!-- Inventory card -->
-                          <article class="border rounded-4 p-2 bg-body-tertiary inventory-entry-card">
-                            <div class="d-flex flex-column gap-2">
-
-                              <!-- Top row -->
-                              <div class="d-flex justify-content-between align-items-start gap-3">
-                                <div class="min-w-0 flex-grow-1">
-                                  <div class="fw-semibold fs-5 text-body mb-1">Lightly Played</div>
-                                </div>
-                              </div>
-
-                              <div class="row g-2">
-                                <div class="col-4">
-                                  <div class="small text-secondary">Purchase price</div>
-                                  <div class="fs-5 fw-semibold">$6.00</div>
-                                </div>
-                                <div class="col-4">
-                                  <div class="small text-secondary">Market price</div>
-                                  <div class="fs-5 text-success">$8.00</div>
-                                </div>
-                                <div class="col-4">
-                                  <div class="small text-secondary">Gain / loss</div>
-                                  <div class="fs-5 fw-semibold text-success">+$4.00</div>
-                                </div>
-                              </div>
-
-                              <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap">
-                                <div class="d-flex align-items-center gap-2">
-                                  <span class="small text-secondary">Qty</span>
-                                  <div class="btn-group" role="group" aria-label="Quantity controls">
-                                    <button type="button" class="btn btn-outline-secondary btn-sm">−</button>
-                                    <button type="button" class="btn btn-outline-secondary btn-sm" tabindex="-1">2</button>
-                                    <button type="button" class="btn btn-outline-secondary btn-sm">+</button>
-                                  </div>
-                                </div>
-
-                                <div class="d-flex align-items-center gap-2 flex-wrap">
-                                  <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
-                                  <button type="button" class="btn btn-sm btn-outline-danger">Remove</button>
-                                </div>
-                              </div>
-                            </div>
-                          </article>
-
                         </div>
                       </div>
                     </div>

src/pages/partials/cards.astro

@@ -234,7 +234,6 @@ const facets = searchResults.results.slice(1).map((result: any) => {
         }
     </div>
     <script define:vars={{ totalHits, filters, facets }} is:inline>
-
         // Filter the facet values to make things like Set easier to find
         const facetfilters = document.querySelectorAll('.facet-filter');
         for (const facetfilter of facetfilters) {
@@ -260,7 +259,8 @@ const facets = searchResults.results.slice(1).map((result: any) => {
             document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
         }
         document.getElementById('clear-filters').addEventListener('click', (e) => clearAllFilters(e));
-        document.getElementById('clear-all-filters').addEventListener('click', (e) => clearAllFilters(e));
+        const clearAllBtn = document.getElementById('clear-all-filters');
+        if (clearAllBtn) clearAllBtn.addEventListener('click', (e) => clearAllFilters(e));
 
         // Remove single facet value
         for (const li of document.querySelectorAll('.remove-filter')) {