added a fix for variant selection (without it cards with multiple versions would add all at form submit)

src/db/schema.ts

@@ -131,6 +131,7 @@ export const inventory = pokeSchema.table('inventory',{
 	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 }),

src/pages/api/inventory.ts

@@ -2,7 +2,7 @@ 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 } from 'drizzle-orm';
+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>';
@@ -20,6 +20,7 @@ const inventories = await db
         inventoryId: inventory.inventoryId,
         cardId: inventory.cardId,
         condition: inventory.condition,
+        variant: inventory.variant,
         quantity: inventory.quantity,
         purchasePrice: inventory.purchasePrice,
         note: inventory.note,
@@ -35,7 +36,11 @@ const inventories = await db
         skus,
         and(
             eq(cards.productId, skus.productId),
-            eq(inventory.condition, skus.condition)
+            eq(inventory.condition, skus.condition),
+            eq(
+                sql`COALESCE(${inventory.variant}, 'Normal')`,
+                skus.variant
+            )
         )
     )
     .where(and(
@@ -49,7 +54,7 @@ const inventories = await db
         const purchasePriceDisplay = inv.purchasePrice ? `$${Number(inv.purchasePrice).toFixed(2)}` : '—';
 
         return `
-        <article class="alert alert-dark rounded-4 inventory-entry-card"
+        <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}"
@@ -106,12 +111,13 @@ const inventories = await db
 }
 
 
-const addToInventory = async (userId: string, cardId: number, condition: string, purchasePrice: number, quantity: number, note: string, catalogName: string) => {
+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,
@@ -147,11 +153,12 @@ export const POST: APIRoute = async ({ request, locals }) => {
 
         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, purchasePrice, quantity, note, catalogName);
+            await addToInventory(userId!, cardId, condition, variant, purchasePrice, quantity, note, catalogName);
             break;
 
         case 'remove':

src/pages/partials/card-modal.astro

@@ -181,6 +181,9 @@ for (const price of card?.prices ?? []) {
   }
 }
 
+// ── 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`;
 };
@@ -360,13 +363,13 @@ const altSearchUrl = (card: any) => {
                   })}
                   {hasAccess && (
                     <div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
-                      <div class="row g-3">
+                      <div class="row g-4">
                         <div class="col-12 col-md-6">
                           <h6 class="mt-1 mb-2">Add {card?.productName} to inventory</h6>
 
                           <form id="inventoryForm" data-inventory-form novalidate>
                             <div class="row gx-3 gy-1">
-                              <div class="col-4">
+                              <div class="col-3">
                                 <label for="quantity" class="form-label">Quantity</label>
                                 <input
                                   type="number"
@@ -381,7 +384,7 @@ const altSearchUrl = (card: any) => {
                                 <div class="invalid-feedback">Required.</div>
                               </div>
 
-                              <div class="col-8">
+                              <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
@@ -486,6 +489,9 @@ const altSearchUrl = (card: any) => {
                                   <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
@@ -534,7 +540,7 @@ const altSearchUrl = (card: any) => {
                           <h6 class="mt-1 mb-2">Inventory entries for {card?.productName}</h6>
 
                           <!-- Empty state -->
-                          <div class="alert alert-dark rounded-4 d-none" id="inventoryEmptyState">
+                          <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.