Compare commits
16 Commits
master
...
5d716a4d8e
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
5d716a4d8e | ||
|
|
d06c6fb9bf | ||
|
|
404355304c | ||
|
|
87235ab37a | ||
| 12a42b87b8 | |||
| 03394d81e8 | |||
| 86da8a91ad | |||
| 66290fcb97 | |||
| 7a1b7eb5fe | |||
| 3be17fe84c | |||
| 38f041d86f | |||
|
|
b65e2a2859 | ||
|
|
91823174d2 | ||
|
|
943bd33c9a | ||
|
|
9975db20cb | ||
|
|
db12844dea |
58
CLAUDE.md
Normal file
58
CLAUDE.md
Normal file
@@ -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.
|
||||
@@ -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'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
110
package-lock.json
generated
110
package-lock.json
generated
@@ -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",
|
||||
"peer": true
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"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",
|
||||
"peer": true
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -12,7 +12,7 @@ async function findMissingImages() {
|
||||
.where(sql`${schema.tcgcards.sealed} = false`);
|
||||
const missingImages: string[] = [];
|
||||
for (const card of cards) {
|
||||
const imagePath = path.join(process.cwd(), 'static', 'cards', `${card.productId}.jpg`);
|
||||
const imagePath = path.join(process.cwd(), 'public', 'cards', `${card.productId}.jpg`);
|
||||
try {
|
||||
await fs.access(imagePath);
|
||||
} catch (err) {
|
||||
|
||||
@@ -54,7 +54,6 @@ export const createCardCollection = async () => {
|
||||
{ name: 'productLineName', type: 'string', facet: true },
|
||||
{ name: 'rarityName', type: 'string', facet: true },
|
||||
{ name: 'setName', type: 'string', facet: true },
|
||||
{ name: 'setCode', type: 'string' },
|
||||
{ name: 'cardType', type: 'string', facet: true },
|
||||
{ name: 'energyType', type: 'string', facet: true },
|
||||
{ name: 'number', type: 'string', sort: true },
|
||||
@@ -89,21 +88,32 @@ 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({
|
||||
with: { set: true, tcgdata: true, prices: true },
|
||||
});
|
||||
await client.collections('cards').documents().import(pokemon.map(card => {
|
||||
// Use the NM SKU price matching the card's variant (kept fresh by syncPrices)
|
||||
// Fall back to any NM sku, then to tcgdata price
|
||||
const nmSku = card.prices.find(p => p.condition === 'Near Mint' && p.variant === card.variant)
|
||||
?? card.prices.find(p => p.condition === 'Near Mint');
|
||||
const marketPrice = nmSku?.marketPrice
|
||||
? DollarToInt(nmSku.marketPrice)
|
||||
: card.tcgdata?.marketPrice
|
||||
? DollarToInt(card.tcgdata.marketPrice)
|
||||
: null;
|
||||
const marketPrice = card.tcgdata?.marketPrice ? DollarToInt(card.tcgdata.marketPrice) : null;
|
||||
|
||||
return {
|
||||
id: card.cardId.toString(),
|
||||
@@ -114,13 +124,12 @@ export const upsertCardCollection = async (db:DBInstance) => {
|
||||
productLineName: card.productLineName,
|
||||
rarityName: card.rarityName,
|
||||
setName: card.set?.setName || "",
|
||||
setCode: card.set?.setCode || "",
|
||||
cardType: card.cardType || "",
|
||||
energyType: card.energyType || "",
|
||||
number: card.number,
|
||||
Artist: card.artist || "",
|
||||
sealed: card.sealed,
|
||||
content: [card.productName, card.productLineName, card.set?.setName || "", card.set?.setCode || "", card.number, card.rarityName, card.artist || ""].join(' '),
|
||||
content: [card.productName, card.productLineName, card.set?.setName || "", card.number, card.rarityName, card.artist || ""].join(' '),
|
||||
releaseDate: card.tcgdata?.releaseDate ? Math.floor(new Date(card.tcgdata.releaseDate).getTime() / 1000) : 0,
|
||||
...(marketPrice !== null && { marketPrice }),
|
||||
sku_id: card.prices.map(price => price.skuId.toString())
|
||||
@@ -141,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.'));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -242,7 +242,7 @@ async function syncProductLine(productLine: string, field: string, fieldValue: s
|
||||
}
|
||||
|
||||
// get image if it doesn't already exist
|
||||
const imagePath = path.join(process.cwd(), 'static', 'cards', `${item.productId}.jpg`);
|
||||
const imagePath = path.join(process.cwd(), 'public', 'cards', `${item.productId}.jpg`);
|
||||
if (!await helper.FileExists(imagePath)) {
|
||||
const imageResponse = await fetch(`https://tcgplayer-cdn.tcgplayer.com/product/${item.productId}_in_1000x1000.jpg`);
|
||||
if (imageResponse.ok) {
|
||||
|
||||
@@ -5,7 +5,10 @@ import * as Indexing from './pokemon-helper.ts';
|
||||
|
||||
//await Indexing.createCardCollection();
|
||||
//await Indexing.createSkuCollection();
|
||||
await Indexing.upsertCardCollection(db);
|
||||
await Indexing.upsertSkuCollection(db);
|
||||
await Indexing.createInventoryCollection();
|
||||
|
||||
//await Indexing.upsertCardCollection(db);
|
||||
//await Indexing.upsertSkuCollection(db);
|
||||
await Indexing.upsertInventoryCollection(db);
|
||||
await ClosePool();
|
||||
console.log(chalk.green('Pokémon reindex complete.'));
|
||||
|
||||
@@ -154,7 +154,6 @@ const updateLatestSales = async (updatedCards: Set<number>) => {
|
||||
const start = Date.now();
|
||||
const updatedCards = await syncPrices();
|
||||
await helper.upsertSkuCollection(db);
|
||||
await helper.upsertCardCollection(db);
|
||||
//console.log(updatedCards);
|
||||
//console.log(updatedCards.size);
|
||||
//await updateLatestSales(updatedCards);
|
||||
|
||||
@@ -172,6 +172,16 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.col:has(.image-grow:hover) .inventory-button {
|
||||
opacity: 0.20;
|
||||
transition: opacity 350ms ease;
|
||||
}
|
||||
|
||||
.inventory-button {
|
||||
// add transition to existing rule
|
||||
transition: opacity 350ms ease;
|
||||
}
|
||||
|
||||
.card-modal {
|
||||
background-color: rgba(1, 11, 18, 0.8);
|
||||
cursor: default;
|
||||
@@ -278,6 +288,40 @@ $tiers: (
|
||||
}
|
||||
}
|
||||
|
||||
// ── Inventory form condition buttons ──────────────────────────────────────
|
||||
// Reuses $tiers map so colors stay in sync with nav tabs and price-row
|
||||
|
||||
$cond-text: (
|
||||
nm: rgba(156, 204, 102, 1),
|
||||
lp: rgba(211, 225, 86, 1),
|
||||
mp: rgba(255, 238, 87, 1),
|
||||
hp: rgba(255, 201, 41, 1),
|
||||
dmg: rgba(255, 167, 36, 1),
|
||||
);
|
||||
|
||||
@each $name, $color in $tiers {
|
||||
@if map-has-key($cond-text, $name) {
|
||||
.btn-check:checked + .btn-cond-#{$name} {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
color: rgba(0, 0, 0, 0.94);
|
||||
}
|
||||
|
||||
.btn-cond-#{$name} {
|
||||
border-color: rgba($color, 0.4);
|
||||
color: var(--bs-body-color);
|
||||
background: transparent;
|
||||
font-weight: 600;
|
||||
transition: background-color 0.1s, border-color 0.1s;
|
||||
}
|
||||
|
||||
.btn-check:not(:checked) + .btn-cond-#{$name}:hover {
|
||||
background-color: rgba($color, 0.67);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* --------------------------------------------------
|
||||
Misc UI
|
||||
-------------------------------------------------- */
|
||||
@@ -378,6 +422,30 @@ $tiers: (
|
||||
stroke: var(--bs-info-border-subtle);
|
||||
}
|
||||
|
||||
.delete-svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
fill: var(--bs-danger);
|
||||
stroke: var(--bs-danger);
|
||||
}
|
||||
|
||||
.edit-svg {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
fill: var(--bs-warning);
|
||||
stroke: var(--bs-warning);
|
||||
}
|
||||
|
||||
.btn:hover .delete-svg {
|
||||
fill: var(--bs-danger-border-subtle);
|
||||
stroke: var(--bs-danger-border-subtle);
|
||||
}
|
||||
|
||||
.btn:hover .edit-svg {
|
||||
fill: var(--bs-warning-border-subtle);
|
||||
stroke: var(--bs-warning-border-subtle);
|
||||
}
|
||||
|
||||
.shadow-filter {
|
||||
filter:
|
||||
drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
|
||||
@@ -417,21 +485,20 @@ $tiers: (
|
||||
);
|
||||
}
|
||||
|
||||
.inventory-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: -2rem;
|
||||
margin-right: -0.25rem;
|
||||
border-radius: 0.33rem;
|
||||
.inventory-button, .btn-vendor {
|
||||
background-color: hsl(262, 47%, 55%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.inventory-label {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
.inventory-button {
|
||||
margin-bottom: -2.25rem;
|
||||
margin-right: -0.25rem;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.inventory-button:hover, .btn-vendor:hover {
|
||||
background-color: hsl(262, 39%, 40%);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fs-7 {
|
||||
|
||||
@@ -1,52 +1,97 @@
|
||||
import * as bootstrap from 'bootstrap';
|
||||
window.bootstrap = bootstrap;
|
||||
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
|
||||
|
||||
// trap browser back and close the modal if open
|
||||
const cardModal = document.getElementById('cardModal');
|
||||
const loadingMsg = cardModal.innerHTML;
|
||||
// Push a new history state when the modal is shown
|
||||
cardModal.addEventListener('shown.bs.modal', () => {
|
||||
history.pushState({ modalOpen: true }, null, '#cardModal');
|
||||
});
|
||||
// Listen for the browser's back button (popstate event)
|
||||
window.addEventListener('popstate', (e) => {
|
||||
if (cardModal.classList.contains('show')) {
|
||||
const modalInstance = bootstrap.Modal.getInstance(cardModal);
|
||||
if (modalInstance) {
|
||||
modalInstance.hide();
|
||||
}
|
||||
}
|
||||
});
|
||||
// Trigger a back navigation when the modal is closed via its native controls (X, backdrop click)
|
||||
cardModal.addEventListener('hide.bs.modal', () => {
|
||||
cardModal.innerHTML = loadingMsg;
|
||||
if (history.state && history.state.modalOpen) {
|
||||
history.back();
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Initialize all Bootstrap modals
|
||||
document.querySelectorAll('.modal').forEach(modalEl => {
|
||||
bootstrap.Modal.getOrCreateInstance(modalEl);
|
||||
});
|
||||
|
||||
|
||||
import { Tooltip } from "bootstrap";
|
||||
|
||||
// Initialize all tooltips globally
|
||||
const initTooltips = () => {
|
||||
// Initialize tooltips
|
||||
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
|
||||
if (!el._tooltipInstance) {
|
||||
el._tooltipInstance = new Tooltip(el, {
|
||||
container: 'body', // ensures tooltip is appended to body, important for modals
|
||||
});
|
||||
el._tooltipInstance = new bootstrap.Tooltip(el, { container: 'body' });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Run on page load
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initTooltips);
|
||||
// ---------------- DASHBOARD LOGIC ----------------
|
||||
const toggleBtn = document.getElementById("toggleViewBtn");
|
||||
const gridView = document.getElementById("gridView");
|
||||
const tableView = document.getElementById("tableView");
|
||||
const searchInput = document.getElementById("inventorySearch");
|
||||
const tbody = document.getElementById("inventoryRows");
|
||||
|
||||
if(toggleBtn && gridView && tableView && tbody) {
|
||||
// TOGGLE GRID/TABLE
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
if(gridView.style.display !== "none") {
|
||||
gridView.style.display = "none";
|
||||
tableView.style.display = "block";
|
||||
toggleBtn.textContent = "Switch to Grid View";
|
||||
} else {
|
||||
initTooltips();
|
||||
gridView.style.display = "block";
|
||||
tableView.style.display = "none";
|
||||
toggleBtn.textContent = "Switch to Table View";
|
||||
}
|
||||
});
|
||||
|
||||
// SEARCH FILTER
|
||||
if(searchInput) {
|
||||
searchInput.addEventListener("input", e => {
|
||||
const term = e.target.value.toLowerCase();
|
||||
[...tbody.querySelectorAll("tr")].forEach(row => {
|
||||
row.style.display = row.textContent.toLowerCase().includes(term) ? "" : "none";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Optional: observe DOM changes for dynamically added tooltips (e.g., modals loaded later)
|
||||
const observer = new MutationObserver(() => initTooltips());
|
||||
observer.observe(document.body, { childList: true, subtree: true });
|
||||
// SORTING
|
||||
document.querySelectorAll("th[data-key]").forEach(th => {
|
||||
let sortAsc = true;
|
||||
th.addEventListener("click", () => {
|
||||
const key = th.dataset.key;
|
||||
const indexMap = {name:0,set:1,condition:2,qty:3,price:4,market:5,gain:6};
|
||||
const idx = indexMap[key];
|
||||
const rows = [...tbody.querySelectorAll("tr")];
|
||||
|
||||
rows.sort((a,b) => {
|
||||
let aText = a.children[idx].textContent.replace(/\$|,/g,'').toLowerCase();
|
||||
let bText = b.children[idx].textContent.replace(/\$|,/g,'').toLowerCase();
|
||||
if(!isNaN(aText) && !isNaN(bText)) return sortAsc ? aText-bText : bText-aText;
|
||||
return sortAsc ? aText.localeCompare(bText) : bText.localeCompare(aText);
|
||||
});
|
||||
|
||||
sortAsc = !sortAsc;
|
||||
tbody.innerHTML="";
|
||||
rows.forEach(r => tbody.appendChild(r));
|
||||
});
|
||||
});
|
||||
|
||||
// INLINE EDITING + GAIN/LOSS UPDATE
|
||||
tbody.addEventListener("input", e => {
|
||||
const row = e.target.closest("tr");
|
||||
if(!row) return;
|
||||
|
||||
const priceCell = row.querySelector(".editable-price");
|
||||
const qtyCell = row.querySelector(".editable-qty");
|
||||
const marketCell = row.children[5];
|
||||
const gainCell = row.querySelector(".gain");
|
||||
|
||||
if(e.target.classList.contains("editable-price")) {
|
||||
e.target.textContent = e.target.textContent.replace(/[^\d.]/g,"");
|
||||
}
|
||||
if(e.target.classList.contains("editable-qty")) {
|
||||
e.target.textContent = e.target.textContent.replace(/\D/g,"");
|
||||
}
|
||||
|
||||
const price = parseFloat(priceCell.textContent) || 0;
|
||||
const qty = parseInt(qtyCell.textContent) || 0;
|
||||
const market = parseFloat(marketCell.textContent) || 0;
|
||||
const gain = market - price;
|
||||
|
||||
gainCell.textContent = (gain>=0 ? "+" : "-") + Math.abs(gain);
|
||||
gainCell.className = gain>=0 ? "gain text-success" : "gain text-danger";
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -32,6 +32,12 @@ function setEmptyState(isEmpty) {
|
||||
canvasWrapper.classList.toggle('d-none', isEmpty);
|
||||
}
|
||||
|
||||
function setChartVisible(visible) {
|
||||
const modal = document.getElementById('cardModal');
|
||||
const chartWrapper = modal?.querySelector('#priceHistoryChart')?.closest('.alert');
|
||||
if (chartWrapper) chartWrapper.classList.toggle('d-none', !visible);
|
||||
}
|
||||
|
||||
function buildChartData(history, rangeKey) {
|
||||
const cutoff = RANGE_DAYS[rangeKey] === Infinity
|
||||
? new Date(0)
|
||||
@@ -39,20 +45,14 @@ function buildChartData(history, rangeKey) {
|
||||
|
||||
const filtered = history.filter(r => new Date(r.calculatedAt) >= cutoff);
|
||||
|
||||
// Always build the full date axis for the selected window, even if sparse.
|
||||
// Generate one label per day in the range so the x-axis reflects the
|
||||
// chosen period rather than collapsing to only the days that have data.
|
||||
const dataDateSet = new Set(filtered.map(r => r.calculatedAt));
|
||||
const allDates = [...dataDateSet].sort((a, b) => new Date(a) - new Date(b));
|
||||
|
||||
// If we have real data, expand the axis to span from cutoff → today so
|
||||
// empty stretches at the start/end of a range are visible.
|
||||
let axisLabels = allDates;
|
||||
if (allDates.length > 0 && RANGE_DAYS[rangeKey] !== Infinity) {
|
||||
const start = new Date(cutoff);
|
||||
const end = new Date();
|
||||
const expanded = [];
|
||||
// Step through every day in the window
|
||||
for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
|
||||
expanded.push(d.toISOString().split('T')[0]);
|
||||
}
|
||||
@@ -101,17 +101,9 @@ function buildChartData(history, rangeKey) {
|
||||
function updateChart() {
|
||||
if (!chartInstance) return;
|
||||
const { labels, datasets, hasData, activeConditionHasData } = buildChartData(allHistory, activeRange);
|
||||
|
||||
// Always push the new labels/datasets to the chart so the x-axis
|
||||
// reflects the selected time window — even when there's no data for
|
||||
// the active condition. Then toggle the empty state overlay on top.
|
||||
chartInstance.data.labels = labels;
|
||||
chartInstance.data.datasets = datasets;
|
||||
chartInstance.update('none');
|
||||
|
||||
// Show the empty state overlay if the active condition has no points
|
||||
// in this window, but leave the (empty) chart visible underneath so
|
||||
// the axis communicates the selected period.
|
||||
setEmptyState(!hasData || !activeConditionHasData);
|
||||
}
|
||||
|
||||
@@ -135,7 +127,6 @@ function initPriceChart(canvas) {
|
||||
|
||||
const { labels, datasets, hasData, activeConditionHasData } = buildChartData(allHistory, activeRange);
|
||||
|
||||
// Render the chart regardless — show empty state overlay if needed
|
||||
setEmptyState(!hasData || !activeConditionHasData);
|
||||
|
||||
chartInstance = new Chart(canvas.getContext('2d'), {
|
||||
@@ -202,9 +193,16 @@ function initFromCanvas(canvas) {
|
||||
activeCondition = "Near Mint";
|
||||
activeRange = '1m';
|
||||
const modal = document.getElementById('cardModal');
|
||||
|
||||
modal?.querySelectorAll('.price-range-btn').forEach(b => {
|
||||
b.classList.toggle('active', b.dataset.range === '1m');
|
||||
});
|
||||
|
||||
// Hide chart if the vendor tab is already active when the modal opens
|
||||
// (e.g. opened via the inventory button)
|
||||
const activeTab = modal?.querySelector('.nav-link.active')?.getAttribute('data-bs-target');
|
||||
setChartVisible(activeTab !== '#nav-vendor');
|
||||
|
||||
initPriceChart(canvas);
|
||||
}
|
||||
|
||||
@@ -225,6 +223,10 @@ function setup() {
|
||||
document.addEventListener('shown.bs.tab', (e) => {
|
||||
if (!modal.contains(e.target)) return;
|
||||
const target = e.target?.getAttribute('data-bs-target');
|
||||
|
||||
// Hide the chart when the vendor tab is active, show it for all others
|
||||
setChartVisible(target !== '#nav-vendor');
|
||||
|
||||
const conditionMap = {
|
||||
'#nav-nm': 'Near Mint',
|
||||
'#nav-lp': 'Lightly Played',
|
||||
|
||||
@@ -44,15 +44,147 @@ import BackToTop from "./BackToTop.astro"
|
||||
|
||||
<BackToTop />
|
||||
|
||||
<!-- <script src="src/assets/js/holofoil-init.js" is:inline></script> -->
|
||||
|
||||
<script is:inline>
|
||||
(function () {
|
||||
|
||||
// ── Price mode helpers ────────────────────────────────────────────────────
|
||||
// marketPriceByCondition is injected into the modal HTML via a data attribute
|
||||
// on #inventoryEntryList: data-market-prices='{"Near Mint":6.00,...}'
|
||||
// See card-modal.astro for where this is set.
|
||||
|
||||
function getMarketPrices(form) {
|
||||
const listEl = form.closest('.tab-pane')?.querySelector('#inventoryEntryList')
|
||||
?? document.getElementById('inventoryEntryList');
|
||||
try {
|
||||
return JSON.parse(listEl?.dataset.marketPrices || '{}');
|
||||
} catch {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function applyPriceModeUI(form, mode) {
|
||||
const priceInput = form.querySelector('#purchasePrice');
|
||||
const pricePrefix = form.querySelector('#pricePrefix');
|
||||
const priceSuffix = form.querySelector('#priceSuffix');
|
||||
const priceHint = form.querySelector('#priceHint');
|
||||
if (!priceInput) return;
|
||||
|
||||
const isPct = mode === 'percent';
|
||||
pricePrefix?.classList.toggle('d-none', isPct);
|
||||
priceSuffix?.classList.toggle('d-none', !isPct);
|
||||
priceInput.step = isPct ? '1' : '0.01';
|
||||
priceInput.max = isPct ? '100' : '';
|
||||
priceInput.placeholder = isPct ? '0' : '0.00';
|
||||
priceInput.classList.toggle('rounded-end', !isPct);
|
||||
priceInput.classList.toggle('rounded-start', isPct);
|
||||
|
||||
if (priceHint && !isPct) priceHint.textContent = 'Enter the purchase price.';
|
||||
}
|
||||
|
||||
function updatePriceHint(form) {
|
||||
const priceInput = form.querySelector('#purchasePrice');
|
||||
const priceHint = form.querySelector('#priceHint');
|
||||
if (!priceInput || !priceHint) return;
|
||||
|
||||
const mode = form.querySelector('input[name="priceMode"]:checked')?.value ?? 'dollar';
|
||||
if (mode !== 'percent') { priceHint.textContent = 'Enter the purchase price.'; return; }
|
||||
|
||||
const condition = form.querySelector('input[name="condition"]:checked')?.value ?? 'Near Mint';
|
||||
const prices = getMarketPrices(form);
|
||||
const marketPrice = prices[condition] ?? 0;
|
||||
const pct = parseFloat(priceInput.value) || 0;
|
||||
const resolved = ((pct / 100) * marketPrice).toFixed(2);
|
||||
priceHint.textContent = marketPrice
|
||||
? `= $${resolved} (${pct}% of $${marketPrice.toFixed(2)} market)`
|
||||
: 'No market price available for this condition.';
|
||||
}
|
||||
|
||||
function resolveFormPrice(form) {
|
||||
// Returns a FormData ready to POST; % is converted to $ in-place.
|
||||
const data = new FormData(form);
|
||||
const mode = data.get('priceMode');
|
||||
if (mode === 'percent') {
|
||||
const condition = data.get('condition');
|
||||
const prices = getMarketPrices(form);
|
||||
const marketPrice = prices[condition] ?? 0;
|
||||
const pct = parseFloat(data.get('purchasePrice')) || 0;
|
||||
data.set('purchasePrice', ((pct / 100) * marketPrice).toFixed(2));
|
||||
}
|
||||
data.delete('priceMode'); // UI-only field
|
||||
return data;
|
||||
}
|
||||
|
||||
// ── Empty state helper ────────────────────────────────────────────────────
|
||||
function syncEmptyState(invList) {
|
||||
const emptyState = document.getElementById('inventoryEmptyState');
|
||||
if (!emptyState) return;
|
||||
const hasEntries = invList.querySelector('[data-inventory-id]') !== null;
|
||||
emptyState.classList.toggle('d-none', hasEntries);
|
||||
}
|
||||
|
||||
// ── Inventory form init (binding price-mode UI events) ───────────────────
|
||||
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 || '';
|
||||
syncEmptyState(invList);
|
||||
})
|
||||
.catch(() => { invList.innerHTML = '<span class="text-danger">Failed to load inventory</span>'; });
|
||||
}
|
||||
}
|
||||
|
||||
const forms = root.querySelectorAll('[data-inventory-form]');
|
||||
|
||||
forms.forEach((form) => {
|
||||
if (form.dataset.inventoryBound === 'true') return;
|
||||
form.dataset.inventoryBound = 'true';
|
||||
|
||||
const priceInput = form.querySelector('#purchasePrice');
|
||||
const modeInputs = form.querySelectorAll('input[name="priceMode"]');
|
||||
const condInputs = form.querySelectorAll('input[name="condition"]');
|
||||
|
||||
// Set initial UI state
|
||||
const checkedMode = form.querySelector('input[name="priceMode"]:checked')?.value ?? 'dollar';
|
||||
applyPriceModeUI(form, checkedMode);
|
||||
|
||||
// Mode toggle
|
||||
modeInputs.forEach((input) => {
|
||||
input.addEventListener('change', () => {
|
||||
if (priceInput) priceInput.value = ''; // clear stale value on mode switch
|
||||
applyPriceModeUI(form, input.value);
|
||||
updatePriceHint(form);
|
||||
});
|
||||
});
|
||||
|
||||
// Condition change updates the hint when in % mode
|
||||
condInputs.forEach((input) => {
|
||||
input.addEventListener('change', () => updatePriceHint(form));
|
||||
});
|
||||
|
||||
// Live hint as user types
|
||||
priceInput?.addEventListener('input', () => updatePriceHint(form));
|
||||
|
||||
// Reset — restore to $ mode
|
||||
form.addEventListener('reset', () => {
|
||||
setTimeout(() => {
|
||||
applyPriceModeUI(form, 'dollar');
|
||||
updatePriceHint(form);
|
||||
}, 0);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ── Sort dropdown ─────────────────────────────────────────────────────────
|
||||
document.addEventListener('click', (e) => {
|
||||
const sortBy = document.getElementById('sortBy');
|
||||
|
||||
const btn = e.target.closest('#sortBy [data-bs-toggle="dropdown"]');
|
||||
if (btn) {
|
||||
e.preventDefault();
|
||||
@@ -112,16 +244,12 @@ import BackToTop from "./BackToTop.astro"
|
||||
|
||||
// ── Global helpers ────────────────────────────────────────────────────────
|
||||
window.copyImage = async function(img) {
|
||||
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
|
||||
(navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
|
||||
|
||||
try {
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = img.naturalWidth;
|
||||
canvas.height = img.naturalHeight;
|
||||
|
||||
// Load with crossOrigin so toBlob() stays untainted
|
||||
await new Promise((resolve) => {
|
||||
const clean = new Image();
|
||||
clean.crossOrigin = 'anonymous';
|
||||
@@ -130,17 +258,10 @@ import BackToTop from "./BackToTop.astro"
|
||||
clean.src = img.src;
|
||||
});
|
||||
|
||||
if (navigator.clipboard && navigator.clipboard.write) {
|
||||
const blob = await new Promise((resolve, reject) => {
|
||||
canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob failed')), 'image/png');
|
||||
});
|
||||
|
||||
if (isIOS) {
|
||||
const file = new File([blob], 'card.png', { type: 'image/png' });
|
||||
await navigator.share({ files: [file] });
|
||||
return;
|
||||
}
|
||||
|
||||
if (navigator.clipboard && navigator.clipboard.write) {
|
||||
await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
|
||||
showCopyToast('📋 Image copied!', '#198754');
|
||||
} else {
|
||||
@@ -159,7 +280,6 @@ import BackToTop from "./BackToTop.astro"
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
if (err.name === 'AbortError') return;
|
||||
console.error('Failed:', err);
|
||||
showCopyToast('❌ Copy failed', '#dc3545');
|
||||
}
|
||||
@@ -183,6 +303,20 @@ import BackToTop from "./BackToTop.astro"
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// ── Tab switching helper ──────────────────────────────────────────────────
|
||||
function switchToRequestedTab() {
|
||||
const tab = sessionStorage.getItem('openModalTab');
|
||||
if (!tab) return;
|
||||
sessionStorage.removeItem('openModalTab');
|
||||
requestAnimationFrame(() => {
|
||||
try {
|
||||
const tabEl = document.querySelector(`#cardModal [data-bs-target="#${tab}"]`);
|
||||
if (tabEl) bootstrap.Tab.getOrCreateInstance(tabEl).show();
|
||||
} catch (e) {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ── State ─────────────────────────────────────────────────────────────────
|
||||
const cardIndex = [];
|
||||
let currentCardId = null;
|
||||
@@ -270,10 +404,17 @@ import BackToTop from "./BackToTop.astro"
|
||||
|
||||
if (modal._reconnectChartObserver) modal._reconnectChartObserver();
|
||||
|
||||
modal.querySelectorAll('[data-bs-toggle="tab"]').forEach(el => {
|
||||
bootstrap.Tab.getInstance(el)?.dispose();
|
||||
});
|
||||
|
||||
modal.innerHTML = html;
|
||||
|
||||
if (typeof htmx !== 'undefined') htmx.process(modal);
|
||||
initInventoryForms(modal);
|
||||
updateNavButtons(modal);
|
||||
initChartAfterSwap(modal);
|
||||
switchToRequestedTab();
|
||||
};
|
||||
|
||||
if (document.startViewTransition && direction) {
|
||||
@@ -358,8 +499,14 @@ import BackToTop from "./BackToTop.astro"
|
||||
|
||||
if (target._reconnectChartObserver) target._reconnectChartObserver();
|
||||
|
||||
target.querySelectorAll('[data-bs-toggle="tab"]').forEach(el => {
|
||||
bootstrap.Tab.getInstance(el)?.dispose();
|
||||
});
|
||||
|
||||
target.innerHTML = html;
|
||||
|
||||
if (typeof htmx !== 'undefined') htmx.process(target);
|
||||
initInventoryForms(target);
|
||||
|
||||
const destImg = target.querySelector('img.card-image');
|
||||
if (destImg) {
|
||||
@@ -376,6 +523,7 @@ import BackToTop from "./BackToTop.astro"
|
||||
await transition.finished;
|
||||
updateNavButtons(target);
|
||||
initChartAfterSwap(target);
|
||||
switchToRequestedTab();
|
||||
|
||||
} catch (err) {
|
||||
console.error('[card-modal] transition failed:', err);
|
||||
@@ -391,18 +539,113 @@ 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…'; }
|
||||
|
||||
// resolveFormPrice converts % → $ and strips priceMode before POSTing
|
||||
const body = resolveFormPrice(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 || '';
|
||||
syncEmptyState(invList);
|
||||
}
|
||||
form.reset();
|
||||
form.classList.remove('was-validated');
|
||||
// reset fires our listener which restores $ mode UI
|
||||
} 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 || '';
|
||||
syncEmptyState(invList);
|
||||
}
|
||||
} catch {
|
||||
// keep current state
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
cardModal.addEventListener('shown.bs.modal', () => {
|
||||
updateNavButtons(cardModal);
|
||||
initChartAfterSwap(cardModal);
|
||||
initInventoryForms(cardModal);
|
||||
switchToRequestedTab();
|
||||
});
|
||||
|
||||
cardModal.addEventListener('hidden.bs.modal', () => {
|
||||
currentCardId = null;
|
||||
updateNavButtons(null);
|
||||
});
|
||||
|
||||
// ── AdSense re-init on infinite scroll ───────────────────────────────────
|
||||
document.addEventListener('htmx:afterSwap', () => {
|
||||
(window.adsbygoogle = window.adsbygoogle || []).push({});
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initInventoryForms();
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
37
src/components/InventoryTable.astro
Normal file
37
src/components/InventoryTable.astro
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
const mockInventory = [
|
||||
{ name: "Charizard", set: "Base Set", condition: "NM", qty: 2, price: 350, market: 400, gain: 50 },
|
||||
{ name: "Pikachu", set: "Shining Legends", condition: "LP", qty: 5, price: 15, market: 20, gain: 5 },
|
||||
];
|
||||
---
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-dark table-striped table-hover align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Card</th>
|
||||
<th>Set</th>
|
||||
<th>Condition</th>
|
||||
<th>Qty</th>
|
||||
<th>Price</th>
|
||||
<th>Market</th>
|
||||
<th>Gain/Loss</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{mockInventory.map(card => (
|
||||
<tr>
|
||||
<td>{card.name}</td>
|
||||
<td>{card.set}</td>
|
||||
<td>{card.condition}</td>
|
||||
<td>{card.qty}</td>
|
||||
<td>${card.price}</td>
|
||||
<td>${card.market}</td>
|
||||
<td class={card.gain >= 0 ? "text-success" : "text-danger"}>
|
||||
{card.gain >= 0 ? "+" : "-"}${Math.abs(card.gain)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -1,7 +0,0 @@
|
||||
<div class="d-none d-xl-block sticky-top mt-5" style="top: 70px;">
|
||||
<ins class="adsbygoogle"
|
||||
style="display:block"
|
||||
data-ad-format="autorelaxed"
|
||||
data-ad-client="ca-pub-1140571217687341"
|
||||
data-ad-slot="8889263515"></ins>
|
||||
</div>
|
||||
@@ -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,
|
||||
|
||||
@@ -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,22 @@ 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(),
|
||||
variant: varchar({ length: 100 }).default('Normal'),
|
||||
quantity: integer(),
|
||||
purchasePrice: decimal({ precision: 10, scale: 2 }),
|
||||
note: varchar({ length:255 }),
|
||||
createdAt: timestamp().notNull().defaultNow(),
|
||||
},
|
||||
(table) => [
|
||||
index('idx_userid_cardid').on(table.userId, table.cardId)
|
||||
]);
|
||||
|
||||
export const processingSkus = pokeSchema.table('processing_skus', {
|
||||
skuId: integer().primaryKey(),
|
||||
});
|
||||
|
||||
@@ -16,7 +16,6 @@ const { title } = Astro.props;
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="htmx-config" content='{"historyCacheSize": 50}'/>
|
||||
<meta name="google-adsense-account" content="ca-pub-1140571217687341">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title>{title}</title>
|
||||
|
||||
@@ -1,45 +1,17 @@
|
||||
import { clerkMiddleware, createRouteMatcher, clerkClient } from '@clerk/astro/server';
|
||||
// src/middleware.ts
|
||||
import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';
|
||||
import type { AstroMiddlewareRequest, AstroMiddlewareResponse } from 'astro';
|
||||
|
||||
const isProtectedRoute = createRouteMatcher(['/pokemon']);
|
||||
const isAdminRoute = createRouteMatcher(['/admin']);
|
||||
const isProtectedRoute = createRouteMatcher([
|
||||
'/pokemon',
|
||||
]);
|
||||
|
||||
const TARGET_ORG_ID = "org_3Baav9czkRLLlC7g89oJWqRRulK";
|
||||
|
||||
export const onRequest = clerkMiddleware(async (auth, context) => {
|
||||
const { isAuthenticated, userId, redirectToSignIn } = auth();
|
||||
export const onRequest = clerkMiddleware((auth, context) => {
|
||||
const { isAuthenticated, redirectToSignIn } = auth()
|
||||
|
||||
if (!isAuthenticated && isProtectedRoute(context.request)) {
|
||||
return redirectToSignIn();
|
||||
}
|
||||
// Add custom logic to run before redirecting
|
||||
|
||||
if (isAdminRoute(context.request)) {
|
||||
if (!isAuthenticated || !userId) {
|
||||
return redirectToSignIn();
|
||||
}
|
||||
|
||||
try {
|
||||
const client = await clerkClient(context); // pass context here
|
||||
const memberships = await client.organizations.getOrganizationMembershipList({
|
||||
organizationId: TARGET_ORG_ID,
|
||||
});
|
||||
|
||||
console.log("Total memberships found:", memberships.data.length);
|
||||
console.log("Current userId:", userId);
|
||||
console.log("Memberships:", JSON.stringify(memberships.data.map(m => ({
|
||||
userId: m.publicUserData?.userId,
|
||||
role: m.role,
|
||||
})), null, 2));
|
||||
|
||||
const userMembership = memberships.data.find(
|
||||
(m) => m.publicUserData?.userId === userId
|
||||
);
|
||||
|
||||
if (!userMembership || userMembership.role !== "org:admin") {
|
||||
return context.redirect("/");
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Clerk membership check failed:", e);
|
||||
return context.redirect("/");
|
||||
}
|
||||
return redirectToSignIn()
|
||||
}
|
||||
});
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
export const prerender = false;
|
||||
import Layout from '../layouts/Main.astro';
|
||||
import NavItems from '../components/NavItems.astro';
|
||||
import NavBar from '../components/NavBar.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
---
|
||||
<Layout title="Admin Panel">
|
||||
<NavBar slot="navbar">
|
||||
<NavItems slot="navItems" />
|
||||
</NavBar>
|
||||
<div class="row mb-4" slot="page">
|
||||
<div class="col-12">
|
||||
<h1>Admin Panel</h1>
|
||||
</div>
|
||||
</div>
|
||||
<Footer slot="footer" />
|
||||
</Layout>
|
||||
182
src/pages/api/inventory.ts
Normal file
182
src/pages/api/inventory.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
import { db } from '../../db/index';
|
||||
import { inventory, skus, cards } from '../../db/schema';
|
||||
import { client } from '../../db/typesense';
|
||||
import { eq, and, sql } 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).toFixed(2)}</div>`;
|
||||
return `<div class="fs-6 fw-semibold text-success">+$${(mp - pp).toFixed(2)}</div>`;
|
||||
}
|
||||
|
||||
const getInventory = async (userId: string, cardId: number) => {
|
||||
|
||||
const inventories = await db
|
||||
.select({
|
||||
inventoryId: inventory.inventoryId,
|
||||
cardId: inventory.cardId,
|
||||
condition: inventory.condition,
|
||||
variant: inventory.variant,
|
||||
quantity: inventory.quantity,
|
||||
purchasePrice: inventory.purchasePrice,
|
||||
note: inventory.note,
|
||||
marketPrice: skus.marketPrice,
|
||||
createdAt: inventory.createdAt,
|
||||
})
|
||||
.from(inventory)
|
||||
.leftJoin(
|
||||
cards,
|
||||
eq(inventory.cardId, cards.cardId)
|
||||
)
|
||||
.leftJoin(
|
||||
skus,
|
||||
and(
|
||||
eq(cards.productId, skus.productId),
|
||||
eq(inventory.condition, skus.condition),
|
||||
eq(
|
||||
sql`COALESCE(${inventory.variant}, 'Normal')`,
|
||||
skus.variant
|
||||
)
|
||||
)
|
||||
)
|
||||
.where(and(
|
||||
eq(inventory.userId, userId),
|
||||
eq(inventory.cardId, cardId)
|
||||
));
|
||||
|
||||
const invHtml = inventories.map(inv => {
|
||||
const marketPrice = inv.marketPrice ? Number(inv.marketPrice).toFixed(2) : null;
|
||||
const marketPriceDisplay = marketPrice ? `$${marketPrice}` : '—';
|
||||
const purchasePriceDisplay = inv.purchasePrice ? `$${Number(inv.purchasePrice).toFixed(2)}` : '—';
|
||||
|
||||
return `
|
||||
<article class="border rounded-4 p-2 inventory-entry-card"
|
||||
data-inventory-id="${inv.inventoryId}"
|
||||
data-card-id="${inv.cardId}"
|
||||
data-purchase-price="${inv.purchasePrice}"
|
||||
data-note="${(inv.note || '').replace(/"/g, '"')}">
|
||||
<div class="d-flex flex-column">
|
||||
<!-- Top row -->
|
||||
<div class="d-flex justify-content-between gap-3">
|
||||
<div class="min-w-0 flex-grow-1">
|
||||
<div class="fw-semibold fs-6 text-body mb-1">${inv.condition}</div>
|
||||
</div>
|
||||
<div class="fs-7 text-secondary">Added: ${inv.createdAt ? new Date(inv.createdAt).toLocaleDateString() : '—'}</div>
|
||||
</div>
|
||||
<!-- Middle row -->
|
||||
<div class="row g-2">
|
||||
<div class="col-4">
|
||||
<div class="small text-secondary">Purchase price</div>
|
||||
<div class="fs-6 fw-semibold">${purchasePriceDisplay}</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="small text-secondary">Market price</div>
|
||||
<div class="fs-6 text-success">${marketPriceDisplay}</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="small text-secondary">Gain / loss</div>
|
||||
${GainLoss(inv.purchasePrice, marketPrice)}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom row -->
|
||||
<div class="d-flex justify-content-between align-items-center gap-3 flex-wrap mt-2">
|
||||
<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" onclick="if(!confirm('Are you sure you want to remove this card from your inventory?')) event.stopImmediatePropagation();">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, variant: string, purchasePrice: number, quantity: number, note: string, catalogName: string) => {
|
||||
const inv = await db.insert(inventory).values({
|
||||
userId: userId,
|
||||
cardId: cardId,
|
||||
catalogName: catalogName,
|
||||
condition: condition,
|
||||
variant: variant,
|
||||
purchasePrice: purchasePrice,
|
||||
quantity: quantity,
|
||||
note: note,
|
||||
}).returning();
|
||||
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) => {
|
||||
await db.update(inventory).set({
|
||||
quantity: quantity,
|
||||
purchasePrice: purchasePrice,
|
||||
note: note,
|
||||
}).where(eq(inventory.inventoryId, inventoryId));
|
||||
}
|
||||
|
||||
export const POST: APIRoute = async ({ request, locals }) => {
|
||||
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 variant = formData.get('variant')?.toString() || 'Normal';
|
||||
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, variant, purchasePrice, quantity, note, catalogName);
|
||||
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:
|
||||
return getInventory(userId!, cardId);
|
||||
}
|
||||
|
||||
return getInventory(userId!, cardId);
|
||||
};
|
||||
1048
src/pages/dashboard.astro
Normal file
1048
src/pages/dashboard.astro
Normal file
File diff suppressed because it is too large
Load Diff
@@ -4,7 +4,7 @@ import Layout from '../layouts/Main.astro';
|
||||
import NavItems from '../components/NavItems.astro';
|
||||
import NavBar from '../components/NavBar.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { Show, SignInButton, SignUpButton, SignOutButton, GoogleOneTap, UserAvatar, UserButton, UserProfile } from '@clerk/astro/components'
|
||||
import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/components'
|
||||
---
|
||||
<Layout title="Rigid's App Thing">
|
||||
<NavBar slot="navbar">
|
||||
@@ -16,41 +16,31 @@ import { Show, SignInButton, SignUpButton, SignOutButton, GoogleOneTap, UserAvat
|
||||
<p class="text-secondary">(working title)</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 mb-2">
|
||||
<h2 class="mt-3">The Pokémon card tracker you actually want.</h2>
|
||||
<h2 class="mt-3">Welcome!</h2>
|
||||
<p class="mt-2">
|
||||
Browse real market prices and condition data across 70,000+ cards! No more
|
||||
juggling multiple tabs or guessing what your cards are worth.
|
||||
You've been selected to participate in the closed beta! This single page web application is meant to elevate condition/variant data for the Pokemon TCG. In future iterations, we will add vendor inventory/collection management features, as well.
|
||||
</p>
|
||||
<p class="my-2">
|
||||
We're now open to everyone. Create a free account to get started —
|
||||
collection and inventory management tools are coming soon as part of a
|
||||
premium plan.
|
||||
After the closed beta is complete, the app will move into a more open beta. Feel free to play "Who's that Pokémon?" with the random Pokémon generator <a href="/404">here</a>. Refresh the page to see a new Pokémon!
|
||||
</p>
|
||||
<Show when="signed-in">
|
||||
<a href="/pokemon" class="btn btn-warning mt-2">Take me to the cards!</a>
|
||||
<a href="/pokemon" class="btn btn-warning mt-2">Take me to the cards</a>
|
||||
</Show>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 d-flex justify-content-end align-items-start mt-3">
|
||||
<div class="d-flex gap-3 mx-auto">
|
||||
<div class="d-flex gap-3">
|
||||
<Show when="signed-out">
|
||||
<div class="card border p-5 w-100">
|
||||
<SignUpButton asChild mode="modal">
|
||||
<button class="btn btn-success w-100 mb-2">Create free account</button>
|
||||
</SignUpButton>
|
||||
<SignInButton asChild mode="modal">
|
||||
<p class="text-center text-secondary my-2">Already have an account?</p>
|
||||
<button class="btn btn-outline-light w-100">Sign in</button>
|
||||
<button class="btn btn-success">Sign In</button>
|
||||
</SignInButton>
|
||||
<p class="text-center h6 text-light mt-2 mb-0">Free to join!</p>
|
||||
</div>
|
||||
<GoogleOneTap />
|
||||
<SignUpButton asChild mode="modal">
|
||||
<button class="btn btn-dark">Request Access</button>
|
||||
</SignUpButton>
|
||||
</Show>
|
||||
<Show when="signed-in">
|
||||
<div class="w-100">
|
||||
<SignOutButton asChild>
|
||||
<button class="btn btn-danger mt-2 ms-auto float-end">Sign Out</button>
|
||||
<button class="btn btn-danger">Sign Out</button>
|
||||
</SignOutButton>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,6 +10,18 @@ import FirstEditionIcon from "../../components/FirstEditionIcon.astro";
|
||||
|
||||
import { Tooltip } from "bootstrap";
|
||||
|
||||
import { clerkClient } from '@clerk/astro/server';
|
||||
|
||||
const { userId, has } = Astro.locals.auth();
|
||||
const TARGET_ORG_ID = 'org_3Baav9czkRLLlC7g89oJWqRRulK';
|
||||
|
||||
let hasAccess = has({ feature: 'inventory_add' });
|
||||
|
||||
if (!hasAccess && userId) {
|
||||
const memberships = await clerkClient(Astro).users.getOrganizationMembershipList({ userId });
|
||||
hasAccess = memberships.data.some(m => m.organization.id === TARGET_ORG_ID);
|
||||
}
|
||||
|
||||
export const partial = true;
|
||||
export const prerender = false;
|
||||
|
||||
@@ -51,36 +63,9 @@ const calculatedAt = (() => {
|
||||
return new Date(Math.max(...dates.map(d => d.getTime())));
|
||||
})();
|
||||
|
||||
// ── Spread-based volatility (high - low) / low ────────────────────────────
|
||||
// Log-return volatility was unreliable because marketPrice is a smoothed daily
|
||||
// value, not transaction-driven. The 30-day high/low spread is a more honest
|
||||
// proxy for price movement over the period.
|
||||
|
||||
const volatilityByCondition: Record<string, { label: string; spread: number }> = {};
|
||||
|
||||
for (const price of card?.prices ?? []) {
|
||||
const condition = price.condition;
|
||||
const low = Number(price.lowestPrice);
|
||||
const high = Number(price.highestPrice);
|
||||
const market = Number(price.marketPrice);
|
||||
|
||||
if (!low || !high || !market || market <= 0) {
|
||||
volatilityByCondition[condition] = { label: '—', spread: 0 };
|
||||
continue;
|
||||
}
|
||||
|
||||
const spread = (high - low) / market;
|
||||
|
||||
const label = spread >= 0.50 ? 'High'
|
||||
: spread >= 0.25 ? 'Medium'
|
||||
: 'Low';
|
||||
|
||||
volatilityByCondition[condition] = { label, spread: Math.round(spread * 100) / 100 };
|
||||
}
|
||||
|
||||
// ── Price history for chart ───────────────────────────────────────────────
|
||||
// ── Fetch price history + compute volatility ──────────────────────────────
|
||||
const cardSkus = card?.prices?.length
|
||||
? await db.select().from(skus).where(eq(skus.productId, card.productId))
|
||||
? await db.select().from(skus).where(eq(skus.cardId, cardId))
|
||||
: [];
|
||||
|
||||
const skuIds = cardSkus.map(s => s.skuId);
|
||||
@@ -99,6 +84,41 @@ const historyRows = skuIds.length
|
||||
.orderBy(priceHistory.calculatedAt)
|
||||
: [];
|
||||
|
||||
// Rolling 30-day cutoff for volatility calculation
|
||||
const thirtyDaysAgo = new Date(Date.now() - 30 * 86_400_000);
|
||||
|
||||
const byCondition: Record<string, number[]> = {};
|
||||
for (const row of historyRows) {
|
||||
if (row.marketPrice == null) continue;
|
||||
if (!row.calculatedAt) continue;
|
||||
if (new Date(row.calculatedAt) < thirtyDaysAgo) continue;
|
||||
const price = Number(row.marketPrice);
|
||||
if (price <= 0) continue;
|
||||
if (!byCondition[row.condition]) byCondition[row.condition] = [];
|
||||
byCondition[row.condition].push(price);
|
||||
}
|
||||
|
||||
function computeVolatility(prices: number[]): { label: string; monthlyVol: number } {
|
||||
if (prices.length < 2) return { label: '—', monthlyVol: 0 };
|
||||
const returns: number[] = [];
|
||||
for (let i = 1; i < prices.length; i++) {
|
||||
returns.push(Math.log(prices[i] / prices[i - 1]));
|
||||
}
|
||||
const mean = returns.reduce((a, b) => a + b, 0) / returns.length;
|
||||
const variance = returns.reduce((sum, r) => sum + (r - mean) ** 2, 0) / (returns.length - 1);
|
||||
const monthlyVol = Math.sqrt(variance) * Math.sqrt(30);
|
||||
const label = monthlyVol >= 0.30 ? 'High'
|
||||
: monthlyVol >= 0.15 ? 'Medium'
|
||||
: 'Low';
|
||||
return { label, monthlyVol: Math.round(monthlyVol * 100) / 100 };
|
||||
}
|
||||
|
||||
const volatilityByCondition: Record<string, { label: string; monthlyVol: number }> = {};
|
||||
for (const [condition, prices] of Object.entries(byCondition)) {
|
||||
volatilityByCondition[condition] = computeVolatility(prices);
|
||||
}
|
||||
|
||||
// ── Price history for chart (full history, not windowed) ──────────────────
|
||||
const priceHistoryForChart = historyRows.map(row => ({
|
||||
condition: row.condition,
|
||||
calculatedAt: row.calculatedAt
|
||||
@@ -107,11 +127,29 @@ const priceHistoryForChart = historyRows.map(row => ({
|
||||
marketPrice: row.marketPrice,
|
||||
})).filter(r => r.calculatedAt !== null);
|
||||
|
||||
// ── Determine which range buttons to show ────────────────────────────────
|
||||
const now = Date.now();
|
||||
const oldestDate = historyRows.length
|
||||
? Math.min(...historyRows
|
||||
.filter(r => r.calculatedAt)
|
||||
.map(r => new Date(r.calculatedAt!).getTime()))
|
||||
: now;
|
||||
|
||||
const dataSpanDays = (now - oldestDate) / 86_400_000;
|
||||
|
||||
const showRanges = {
|
||||
'1m': dataSpanDays >= 1,
|
||||
'3m': dataSpanDays >= 60,
|
||||
'6m': dataSpanDays >= 180,
|
||||
'1y': dataSpanDays >= 365,
|
||||
'all': dataSpanDays >= 400,
|
||||
};
|
||||
|
||||
const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
|
||||
|
||||
const conditionAttributes = (price: any) => {
|
||||
const condition: string = price?.condition || "Near Mint";
|
||||
const vol = volatilityByCondition[condition] ?? { label: '—', spread: 0 };
|
||||
const vol = volatilityByCondition[condition] ?? { label: '—', monthlyVol: 0 };
|
||||
|
||||
const volatilityClass = (() => {
|
||||
switch (vol.label) {
|
||||
@@ -124,7 +162,7 @@ const conditionAttributes = (price: any) => {
|
||||
|
||||
const volatilityDisplay = vol.label === '—'
|
||||
? '—'
|
||||
: `${vol.label} (${(vol.spread * 100).toFixed(0)}%)`;
|
||||
: `${vol.label} (${(vol.monthlyVol * 100).toFixed(0)}%)`;
|
||||
|
||||
return {
|
||||
"Near Mint": { label: "nav-nm", volatility: volatilityDisplay, volatilityClass, class: "show active" },
|
||||
@@ -135,6 +173,17 @@ const conditionAttributes = (price: any) => {
|
||||
}[condition];
|
||||
};
|
||||
|
||||
// ── Build a market price lookup keyed by condition for use in JS ──────────
|
||||
const marketPriceByCondition: Record<string, number> = {};
|
||||
for (const price of card?.prices ?? []) {
|
||||
if (price.condition && price.marketPrice != null) {
|
||||
marketPriceByCondition[price.condition] = Number(price.marketPrice);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Derive distinct variants available for this card ─────────────────────
|
||||
const availableVariants = [...new Set(cardSkus.map(s => s.variant))].sort();
|
||||
|
||||
const ebaySearchUrl = (card: any) => {
|
||||
return `https://www.ebay.com/sch/i.html?_nkw=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&LH_Sold=1&Graded=No&_dcat=183454`;
|
||||
};
|
||||
@@ -142,8 +191,8 @@ const ebaySearchUrl = (card: any) => {
|
||||
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">
|
||||
@@ -164,6 +213,9 @@ const altSearchUrl = (card: any) => {
|
||||
<!-- Card image column -->
|
||||
<div class="col-sm-12 col-md-3">
|
||||
<div class="position-relative mt-1">
|
||||
|
||||
<!-- card-image-wrap gives the modal image shimmer effects
|
||||
without the hover lift/scale that image-grow has in main.scss -->
|
||||
<div
|
||||
class="card-image-wrap rounded-4"
|
||||
data-energy={card?.energyType}
|
||||
@@ -197,34 +249,36 @@ const altSearchUrl = (card: any) => {
|
||||
<ul class="nav nav-tabs nav-fill border-0 me-3 mb-2" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link nm active" id="nm-tab" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true">
|
||||
<span class="d-none d-xxl-inline">Near Mint</span><span class="d-xxl-none">NM</span>
|
||||
<span class="d-none">Near Mint</span><span class="d-inline">NM</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link lp" id="lp-tab" data-bs-toggle="tab" data-bs-target="#nav-lp" type="button" role="tab" aria-controls="nav-lp" aria-selected="false">
|
||||
<span class="d-none d-xxl-inline">Lightly Played</span><span class="d-xxl-none">LP</span>
|
||||
<span class="d-none">Lightly Played</span><span class="d-inline">LP</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link mp" id="mp-tab" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false">
|
||||
<span class="d-none d-xxl-inline">Moderately Played</span><span class="d-xxl-none">MP</span>
|
||||
<span class="d-none">Moderately Played</span><span class="d-inline">MP</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link hp" id="hp-tab" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false">
|
||||
<span class="d-none d-xxl-inline">Heavily Played</span><span class="d-xxl-none">HP</span>
|
||||
<span class="d-none">Heavily Played</span><span class="d-inline">HP</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link dmg" id="dmg-tab" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false">
|
||||
<span class="d-none d-xxl-inline">Damaged</span><span class="d-xxl-none">DMG</span>
|
||||
<span class="d-none">Damaged</span><span class="d-inline">DMG</span>
|
||||
</button>
|
||||
</li>
|
||||
{hasAccess && (
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link vendor d-none" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false">
|
||||
<button class="nav-link vendor" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false">
|
||||
<span class="d-none d-xxl-inline">Inventory</span><span class="d-xxl-none">+/-</span>
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" id="myTabContent">
|
||||
@@ -241,11 +295,11 @@ const altSearchUrl = (card: any) => {
|
||||
<p class="mb-0 mt-1">${price.marketPrice}</p>
|
||||
</div>
|
||||
<div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-0">
|
||||
<h6 class="mb-auto">Low Price <span class="small p text-secondary">(30 day)</span></h6>
|
||||
<h6 class="mb-auto">Lowest Price</h6>
|
||||
<p class="mb-0 mt-1">${price.lowestPrice}</p>
|
||||
</div>
|
||||
<div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-0">
|
||||
<h6 class="mb-auto">High Price <span class="small p text-secondary">(30 day)</span></h6>
|
||||
<h6 class="mb-auto">Highest Price</h6>
|
||||
<p class="mb-0 mt-1">${price.highestPrice}</p>
|
||||
</div>
|
||||
<div class={`alert rounded p-2 flex-fill d-flex flex-column mb-0 ${attributes?.volatilityClass}`}>
|
||||
@@ -260,14 +314,14 @@ const altSearchUrl = (card: any) => {
|
||||
data-bs-trigger="hover focus click"
|
||||
data-bs-html="true"
|
||||
data-bs-title={`
|
||||
<div class='tooltip-heading fw-bold mb-1'>30-Day Price Spread</div>
|
||||
<div class='tooltip-heading fw-bold mb-1'>Monthly Volatility</div>
|
||||
<div class='small'>
|
||||
<p class="mb-1">
|
||||
<strong>What this measures:</strong> how wide the gap between the 30-day low and high is,
|
||||
relative to the market price.
|
||||
<strong>What this measures:</strong> how much the market price tends to move day-to-day,
|
||||
scaled up to a monthly expectation.
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
A card with <strong>50%+ spread</strong> has seen significant price swings over the past month.
|
||||
A card with <strong>30% volatility</strong> typically swings ±30% over a month.
|
||||
</p>
|
||||
</div>
|
||||
`}
|
||||
@@ -307,12 +361,204 @@ const altSearchUrl = (card: any) => {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{hasAccess && (
|
||||
<div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-6">
|
||||
<h6 class="mt-1 mb-2">Add {card?.productName} to inventory</h6>
|
||||
|
||||
<div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0"></div>
|
||||
<form id="inventoryForm" data-inventory-form novalidate>
|
||||
<div class="row gx-3 gy-1">
|
||||
<div class="col-3">
|
||||
<label for="quantity" class="form-label">Quantity</label>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control mt-1"
|
||||
id="quantity"
|
||||
name="quantity"
|
||||
min="1"
|
||||
step="1"
|
||||
value="1"
|
||||
required
|
||||
/>
|
||||
<div class="invalid-feedback">Required.</div>
|
||||
</div>
|
||||
|
||||
<div class="col-9">
|
||||
<div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
|
||||
<label for="purchasePrice" class="form-label">
|
||||
Purchase price
|
||||
</label>
|
||||
|
||||
<div class="btn-group btn-group-sm price-toggle" role="group" aria-label="Price mode">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="priceMode"
|
||||
id="mode-dollar"
|
||||
value="dollar"
|
||||
autocomplete="off"
|
||||
checked
|
||||
/>
|
||||
<label class="btn btn-outline-secondary" for="mode-dollar">$</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="priceMode"
|
||||
id="mode-percent"
|
||||
value="percent"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-outline-secondary" for="mode-percent">%</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<span class="input-group-text mt-1" id="pricePrefix">$</span>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control mt-1 rounded-end"
|
||||
id="purchasePrice"
|
||||
name="purchasePrice"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
aria-describedby="pricePrefix priceSuffix priceHint"
|
||||
required
|
||||
/>
|
||||
<span class="input-group-text d-none mt-1" id="priceSuffix">%</span>
|
||||
</div>
|
||||
|
||||
<div class="form-text" id="priceHint">Enter the purchase price.</div>
|
||||
<div class="invalid-feedback">Enter a purchase price.</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<label class="form-label">Condition</label>
|
||||
<div class="btn-group condition-input w-100" role="group" aria-label="Condition">
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-nm"
|
||||
value="Near Mint"
|
||||
autocomplete="off"
|
||||
checked
|
||||
/>
|
||||
<label class="btn btn-cond-nm" for="cond-nm">NM</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-lp"
|
||||
value="Lightly Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-lp" for="cond-lp">LP</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-mp"
|
||||
value="Moderately Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-mp" for="cond-mp">MP</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-hp"
|
||||
value="Heavily Played"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-hp" for="cond-hp">HP</label>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
class="btn-check"
|
||||
name="condition"
|
||||
id="cond-dmg"
|
||||
value="Damaged"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<label class="btn btn-cond-dmg" for="cond-dmg">DMG</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="variant" value={card?.variant} />
|
||||
|
||||
<div class="col-12">
|
||||
<label for="catalogName" class="form-label">
|
||||
Catalog
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
id="catalogName"
|
||||
name="catalogName"
|
||||
list="catalogSuggestions"
|
||||
placeholder="Default"
|
||||
autocomplete="off"
|
||||
maxlength="100"
|
||||
/>
|
||||
<datalist id="catalogSuggestions">
|
||||
|
||||
</datalist>
|
||||
<div class="form-text">
|
||||
Type a name or pick an existing catalog.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="note" class="form-label">
|
||||
Note
|
||||
</label>
|
||||
<textarea
|
||||
class="form-control"
|
||||
id="note"
|
||||
name="note"
|
||||
rows="2"
|
||||
maxlength="255"
|
||||
placeholder="e.g. bought at local shop, gift, graded copy…"
|
||||
></textarea>
|
||||
<div class="form-text text-end" id="noteCount">0 / 255</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 d-flex gap-3 pt-2">
|
||||
<button type="reset" class="btn btn-outline-danger flex-fill">Reset</button>
|
||||
<button type="submit" class="btn btn-success flex-fill">Save to inventory</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6">
|
||||
<h6 class="mt-1 mb-2">Inventory entries for {card?.productName}</h6>
|
||||
|
||||
<!-- Empty state -->
|
||||
<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.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inventory list -->
|
||||
<div class="d-flex flex-column gap-3" id="inventoryEntryList" data-card-id={cardId} data-market-prices={JSON.stringify(marketPriceByCondition)}>
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<!-- Chart lives permanently outside tab-content so Bootstrap never hides it. -->
|
||||
<div class="d-block d-lg-flex gap-1 mt-1">
|
||||
<div class="d-block d-lg-flex gap-1 mt-1 price-chart-container">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-dark rounded p-2 mb-0">
|
||||
<h6>Market Price History</h6>
|
||||
@@ -328,11 +574,11 @@ const altSearchUrl = (card: any) => {
|
||||
</canvas>
|
||||
</div>
|
||||
<div class="btn-group btn-group-sm d-flex flex-row gap-1 justify-content-end mt-2" role="group" aria-label="Time range">
|
||||
<button type="button" class="btn btn-dark price-range-btn active" data-range="1m">1M</button>
|
||||
<button type="button" class="btn btn-dark price-range-btn" data-range="3m">3M</button>
|
||||
<button type="button" class="btn btn-dark price-range-btn" data-range="6m">6M</button>
|
||||
<button type="button" class="btn btn-dark price-range-btn" data-range="1y">1Y</button>
|
||||
<button type="button" class="btn btn-dark price-range-btn" data-range="all">All</button>
|
||||
{showRanges['1m'] && <button type="button" class="btn btn-dark price-range-btn active" data-range="1m">1M</button>}
|
||||
{showRanges['3m'] && <button type="button" class="btn btn-dark price-range-btn" data-range="3m">3M</button>}
|
||||
{showRanges['6m'] && <button type="button" class="btn btn-dark price-range-btn" data-range="6m">6M</button>}
|
||||
{showRanges['1y'] && <button type="button" class="btn btn-dark price-range-btn" data-range="1y">1Y</button>}
|
||||
{showRanges['all'] && <button type="button" class="btn btn-dark price-range-btn" data-range="all">All</button>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
---
|
||||
import { client } from '../../db/typesense';
|
||||
import { clerkClient } from '@clerk/astro/server';
|
||||
|
||||
const { userId, has } = Astro.locals.auth();
|
||||
const TARGET_ORG_ID = 'org_3Baav9czkRLLlC7g89oJWqRRulK';
|
||||
|
||||
let hasAccess = has({ feature: 'inventory_add' });
|
||||
|
||||
if (!hasAccess && userId) {
|
||||
const memberships = await clerkClient(Astro).users.getOrganizationMembershipList({ userId });
|
||||
hasAccess = memberships.data.some(m => m.organization.id === TARGET_ORG_ID);
|
||||
}
|
||||
|
||||
import RarityIcon from '../../components/RarityIcon.astro';
|
||||
import FirstEditionIcon from "../../components/FirstEditionIcon.astro";
|
||||
export const prerender = false;
|
||||
@@ -48,53 +60,15 @@ const languageFilter = language === 'en' ? " && productLineName:=`Pokemon`"
|
||||
// synonyms alone (e.g. terms that need to match across multiple set names)
|
||||
// and rewrites them into a direct filter, clearing the query so it doesn't
|
||||
// also try to text-match against card names.
|
||||
|
||||
const ALIAS_FILTERS = [
|
||||
// ── Era / set groupings ───────────────────────────────────────────────
|
||||
{ re: /^(e-?reader|e reader)$/i, field: 'setName',
|
||||
values: ['Expedition Base Set', 'Aquapolis', 'Skyridge', 'Battle-e'] },
|
||||
|
||||
{ re: /^neo$/i, field: 'setName',
|
||||
values: ['Neo Genesis', 'Neo Discovery', 'Neo Revelation', 'Neo Destiny'] },
|
||||
|
||||
{ re: /^(wotc|wizards)$/i, field: 'setName',
|
||||
values: ['Base Set', 'Jungle', 'Fossil', 'Base Set 2', 'Team Rocket',
|
||||
'Gym Heroes', 'Gym Challenge', 'Neo Genesis', 'Neo Discovery',
|
||||
'Neo Revelation', 'Neo Destiny', 'Expedition Base Set',
|
||||
'Aquapolis', 'Skyridge', 'Battle-e'] },
|
||||
|
||||
{ re: /^(sun\s*(&|and)\s*moon|s(&|and)m|sm)$/i, field: 'setName',
|
||||
values: ['Sun & Moon', 'Guardians Rising', 'Burning Shadows', 'Crimson Invasion',
|
||||
'Ultra Prism', 'Forbidden Light', 'Celestial Storm', 'Dragon Majesty',
|
||||
'Lost Thunder', 'Team Up', 'Unbroken Bonds', 'Unified Minds',
|
||||
'Hidden Fates', 'Cosmic Eclipse', 'Detective Pikachu'] },
|
||||
|
||||
{ re: /^(sword\s*(&|and)\s*shield|s(&|and)s|swsh)$/i, field: 'setName',
|
||||
values: ['Sword & Shield', 'Rebel Clash', 'Darkness Ablaze', 'Vivid Voltage',
|
||||
'Battle Styles', 'Chilling Reign', 'Evolving Skies', 'Fusion Strike',
|
||||
'Brilliant Stars', 'Astral Radiance', 'Pokemon GO', 'Lost Origin',
|
||||
'Silver Tempest', 'Crown Zenith'] },
|
||||
|
||||
// ── Card type shorthands ──────────────────────────────────────────────
|
||||
{ re: /^trainers?$/i, field: 'cardType', values: ['Trainer'] },
|
||||
{ re: /^supporters?$/i, field: 'cardType', values: ['Supporter'] },
|
||||
{ re: /^stadiums?$/i, field: 'cardType', values: ['Stadium'] },
|
||||
{ re: /^items?$/i, field: 'cardType', values: ['Item'] },
|
||||
{ re: /^(energys?|energies)$/i, field: 'cardType', values: ['Energy'] },
|
||||
|
||||
// ── Rarity shorthands ─────────────────────────────────────────────────
|
||||
{ re: /^promos?$/i, field: 'rarityName', values: ['Promo'] },
|
||||
];
|
||||
const EREADER_SETS = ['Expedition Base Set', 'Aquapolis', 'Skyridge', 'Battle-e'];
|
||||
const EREADER_RE = /^(e-?reader|e reader)$/i;
|
||||
|
||||
let resolvedQuery = query;
|
||||
let queryFilter = '';
|
||||
|
||||
for (const alias of ALIAS_FILTERS) {
|
||||
if (alias.re.test(query.trim())) {
|
||||
if (EREADER_RE.test(query.trim())) {
|
||||
resolvedQuery = '';
|
||||
queryFilter = `${alias.field}:=[${alias.values.map(s => '`' + s + '`').join(',')}]`;
|
||||
break;
|
||||
}
|
||||
queryFilter = `setName:=[${EREADER_SETS.map(s => '`' + s + '`').join(',')}]`;
|
||||
}
|
||||
|
||||
const filters = Array.from(formData.entries())
|
||||
@@ -156,10 +130,7 @@ if (start === 0) {
|
||||
const searchRequests = { searches: searchArray };
|
||||
const commonSearchParams = {
|
||||
q: resolvedQuery,
|
||||
query_by: 'content,setName,setCode,productName,Artist',
|
||||
query_by_weights: '10,6,8,9,8',
|
||||
num_typos: '2,1,0,1,2',
|
||||
prefix: 'true,true,false,false,false',
|
||||
query_by: 'content,setName,productLineName,rarityName,energyType,cardType'
|
||||
};
|
||||
|
||||
// use typesense to search for cards matching the query and return the productIds of the results
|
||||
@@ -275,7 +246,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) {
|
||||
@@ -301,7 +271,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')) {
|
||||
@@ -317,21 +288,20 @@ const facets = searchResults.results.slice(1).map((result: any) => {
|
||||
}
|
||||
|
||||
{pokemon.length === 0 && (
|
||||
<div id="notfound" class="mt-4 h6" hx-swap-oob="true">
|
||||
No cards found! Please modify your search and try again.
|
||||
<div id="notfound" hx-swap-oob="true">
|
||||
Pokemon not found
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pokemon.map((card: any, i: number) => (
|
||||
|
||||
<div class="col equal-height-col">
|
||||
<div class="inventory-button position-relative float-end shadow-filter text-center d-none">
|
||||
<div class="inventory-label pt-2">+/-</div>
|
||||
</div>
|
||||
{pokemon.map((card:any) => (
|
||||
<div class="col">
|
||||
{hasAccess && (
|
||||
<button type="button" class="btn btn-sm inventory-button position-relative float-end shadow-filter text-center p-2" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="event.stopPropagation(); sessionStorage.setItem('openModalTab', 'nav-vendor');">
|
||||
<b>+/–</b>
|
||||
</button>
|
||||
)}
|
||||
<div class="card-trigger position-relative" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
|
||||
<div class="image-grow rounded-4 card-image h-100" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}>
|
||||
<img src={`/static/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/>
|
||||
<span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
|
||||
<div class="image-grow rounded-4 card-image" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}><img src={`/static/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/><span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
|
||||
<div class="holo-shine"></div>
|
||||
<div class="holo-glare"></div>
|
||||
</div>
|
||||
@@ -346,14 +316,13 @@ const facets = searchResults.results.slice(1).map((result: any) => {
|
||||
</div>
|
||||
<div class="h5 my-0">{card.productName}</div>
|
||||
<div class="d-flex flex-row lh-1 mt-1 justify-content-between">
|
||||
<div class="text-secondary flex-grow-1"><span class="d-none d-lg-flex">{card.setName}</span><span class="d-flex d-lg-none">{card.setCode}</span></div>
|
||||
<div class="text-secondary flex-grow-1 d-none d-lg-flex">{card.setName}</div>
|
||||
<div class="text-body-tertiary">{card.number}</div>
|
||||
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
|
||||
</div>
|
||||
<div class="text-body-tertiary">{card.variant}</div>
|
||||
<span class="d-none">{card.productId}</span>
|
||||
<div class="text-body-tertiary">{card.variant}</div><span class="d-none">{card.productId}</span>
|
||||
</div>
|
||||
</>
|
||||
|
||||
))}
|
||||
{start + 20 < totalHits &&
|
||||
<div hx-post="/partials/cards" hx-trigger="revealed" hx-include="#searchform" hx-target="#cardGrid" hx-swap="beforeend" hx-on--after-request="afterUpdate(event)">
|
||||
|
||||
Reference in New Issue
Block a user