Dashboard Layout

The dashboard consists of several key areas:

• Top App Bar: Store logo/name, search bar, product type toggles (All/Singles/Sealed/Custom), theme toggle, cart icon
• Filter Drawer: Side panel (left) with all filtering options - toggle with menu icon
• Hero Section: Statistics showing total products, cart status, and filter indicators
• Product Grid: Main content area displaying product cards in responsive grid layout
• Cart Popover: Appears when clicking cart icon, showing cart contents and total

Product Grid

The product grid displays your inventory:

• Responsive Layout: Auto-adjusts columns based on screen size (1 column mobile, multiple desktop)
• Infinite Scroll: Automatically loads more products as you scroll down
• Product Cards: Each shows image, name, category, price, stock status, "Add to Cart" button
• Variant Selection: Cards with multiple variants show dropdown for condition/printing/language
• Click to View: Click any product card to open detailed product dialog
• Loading States: Skeleton loaders shown while fetching products

Search Functionality

Powerful search capabilities in the top app bar:

• Real-Time Search: Products filter as you type (300ms debounce for performance)
• Search Suggestions: After 2+ characters, suggestions appear in dropdown
• Product Name Matching: Searches match against product clean names (e.g., "Lightning Bolt")
• Context-Aware: Suggestions respect category/group filters
• Clear Search: X icon appears when text entered - click to clear
• Full-Text Search: Uses MongoDB text search for advanced matching

Filtering Options

Advanced filtering in the filter drawer:

• Sort By: Name A→Z, Name Z→A, Price ↑, Price ↓, Newest
• Game (Category): Filter by trading card game (MTG, Pokemon, Yu-Gi-Oh, etc.)
• Set (Group): Filter by specific set or expansion (category-dependent)
• Rarity: Single selection dropdown for rarity levels
• Frame Effects: Multiple selection for MTG special frames (Showcase, Extended Art, etc.)
• Legality: Multiple selection for format legality (Standard, Modern, Commander, etc.) - MTG only
• Type: Multiple selection for card types (Creature, Instant, Sorcery, etc.) - MTG only
• Creature Type: Multiple selection for creature types (Human, Elf, Dragon, etc.) - MTG only
• Clear All: Button resets all filters and search

Product Type Toggles

Toggle buttons in app bar filter by product type:

• All: Shows singles, sealed products, and custom inventory
• Singles: Individual cards (e.g., Magic cards, Pokémon cards)
• Sealed: Sealed products (boosters, boxes, packs)
• Custom: Custom inventory items (non-catalog products)
• Exclusive Selection: One type at a time
• Default: Starts with "All" selected

Stock Filter

Toggle chip controls stock visibility:

• In Stock (Default): Shows only items with quantity > 0
• All Items: Includes out-of-stock products
• Stock Definition: Items with quantity > 0 and not deleted
• Per Variant: Stock checked at variant level, not product level
• Real-Time: Stock reflects current inventory including cart reservations

Product Details Dialog

View detailed product information:

• Opening: Click product card or press Enter/Space on focused card
• Layout: Large product image (left), details and variant selector (right)
• Variant Selection: Dropdown shows all variants sorted by condition (NM first) then printing
• Variant Display: Shows condition abbreviation, printing, language, price, and stock
• Dynamic Updates: Changing variant updates image, price, and stock information
• Price Display: Uses variant-specific price or falls back to product-level pricing
• Stock Info: Shows exact quantity available or "Out of stock"
• Key Details: Product ID, category, printing, condition, language, availability
• Extended Data: Additional metadata (flavor text, game-specific attributes)
• Add to Cart: Button adds selected variant to cart (disabled if out of stock)
• Close: Click outside, press Escape, or click Close button

Keyboard Shortcuts

• Enter/Space: Open product details when card is focused
• Tab: Navigate between focusable elements
• Escape: Close product details dialog
• Ctrl+Shift+K: Unlock fullscreen kiosk mode (staff only)