Implemented comprehensive accessibility enhancements to meet WCAG 2.1 AA standards:
**Skip Navigation:**
- Added skip-to-content link for keyboard users
- Link appears on focus and jumps directly to main content area
**Screen Reader Support:**
- Created .sr-only and .sr-only-focusable utility classes
- Added aria-hidden="true" to all decorative icons
- Added descriptive aria-label attributes to all icon-only buttons
**Enhanced Focus Indicators:**
- Implemented 3px visible outlines on all interactive elements
- Added :focus-visible for keyboard-only focus indicators
- Special focus styling for primary actions (orange outline)
- Consistent 2px outline-offset for better visibility
**Table Accessibility:**
- Added scope="col" attributes to all table headers
- Properly grouped button actions with role="group" and aria-label
**Button Improvements:**
- All icon-only buttons now have descriptive ARIA labels
- Added responsive text labels (visible on sm+ screens, hidden on mobile)
- Improved button groups with proper ARIA roles
**Files Modified:**
- _Layout.cshtml: Skip link, accessible menu close button
- Categories/Index.cshtml: ARIA labels, table scopes
- Users/Index.cshtml: ARIA labels, table scopes
- Orders/Index.cshtml: Table scopes
- Products/Index.cshtml: Table scopes
- ShippingRates/Index.cshtml: ARIA labels, table scopes
- VariantCollections/Index.cshtml: ARIA labels, table scopes
- modern-admin.css: Accessibility utilities and enhanced focus styles
**WCAG 2.1 AA Criteria Addressed:**
- 2.4.1 Bypass Blocks (Level A)
- 2.4.7 Focus Visible (Level AA)
- 4.1.2 Name, Role, Value (Level A)
- 1.3.1 Info and Relationships (Level A)
🚀 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Created NotificationHub for instant browser notifications
- Updated CryptoPaymentService to broadcast via SignalR
- Added JavaScript client with toast notifications
- Works with custom SSL certificates (no FCM dependency)
- Automatic reconnection with exponential backoff
- Notification sound and visual indicators
- Bypasses all Web Push SSL certificate issues
Problems Fixed:
1. Blank white screen on initial load (loading screen had display:none)
2. Only showed once (sessionStorage.blazorLoaded prevented repeat shows)
3. Fast connections meant users never saw it
Solution:
1. Removed display:none from HTML - screen visible immediately
2. Removed sessionStorage check - shows on every page load
3. Screen visible by default, hides when Blazor.start() completes
Behavior Now:
- Loading screen appears instantly (no blank white screen)
- Shows on every page load (full page refresh)
- Hides when SignalR connection established
- Works correctly with slow/throttled connections
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fixed 404 error - the controller is named VariantCollectionsController,
not ProductVariantsController.
Changes:
- Updated desktop nav to use VariantCollections controller
- Updated mobile menu to use VariantCollections controller
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Re-added Variants menu item to both desktop and mobile navigation.
User needs access to ProductVariants management to create variant collections.
Changes:
- Desktop nav: Added Variants between Products and Orders
- Mobile drawer: Added Variants between Products and Shipping
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Cleaned up navigation by removing standalone Variants menu item.
Variant management is still accessible through Products section.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Changed splash screen to use sessionStorage to detect first load vs navigation.
- Loading screen hidden by default, only shown on initial app load
- Uses sessionStorage flag to persist across navigation within same session
- Prevents jarring loading screen on every page navigation
- Updated hideLoadingScreen to use display:none instead of remove()
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented a professional loading screen for the PWA to eliminate the
"hang and wait" experience during app initialization.
Changes:
- Added full-screen gradient loading overlay with TeleShop branding
- Implemented animated triple-ring spinner with smooth animations
- Added automatic removal after PWA initialization (500ms fade-out)
- Included 5-second fallback timeout to prevent infinite loading
- Updated service worker cache version to v2
- Enhanced JWT validation to detect test/temporary keys
- Updated appsettings.json with secure JWT key
Design Features:
- Purple/blue gradient background matching brand colors
- Pulsing logo animation for visual interest
- Staggered spinner rings with cubic-bezier easing
- Fade-in-out loading text animation
- Mobile-responsive design (scales appropriately on all devices)
Technical Implementation:
- Loading screen visible by default (no FOUC)
- Removed via JavaScript when PWA manager initialization completes
- Graceful fade-out animation before DOM removal
- Console logging for debugging
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
**Product List Improvements:**
- Move Import/Export to settings menu for cleaner interface
- Replace Edit/Variants/Multi-Buys buttons with single Details action
- Remove Blazor UI button from product list
- Simplify product row actions for better mobile UX
**Product Details Enhancements:**
- Add Danger Zone section with Delete button at bottom
- Improve visual hierarchy and action placement
**Navigation Updates:**
- Remove hamburger menu toggle (desktop nav always visible)
- Rename Settings to Menu in mobile bottom nav
- Update settings drawer header and icon
**Code Cleanup:**
- Remove unused Blazor, Variations, and Variants endpoints (243 lines)
- Consolidate variant/multi-buy management within product details
- Clean up ProductsController for better maintainability
**PWA & Notifications:**
- Add proper PWA support detection (only show if browser supports)
- Implement session-based notification prompt tracking
- Prevent repeated prompts after dismissal in same session
- Respect permanent dismissal preferences
- Enhance iOS Safari detection and instructions
**Technical Details:**
- 6 files changed, 96 insertions(+), 286 deletions(-)
- Build successful with 0 errors
- All features production-ready
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit introduces a comprehensive variant management system and enhances
the existing ProductVariant model with per-variant weight overrides and stock
tracking, integrated across Admin Panel and TeleBot.
Features Added:
- Variant Collections: Reusable variant templates (e.g., "Standard Sizes")
- Admin UI for managing variant collections (CRUD operations)
- Dynamic variant editor with JavaScript-based UI
- Per-variant weight and weight unit overrides
- Per-variant stock level tracking
- SalesLedger model for financial tracking
ProductVariant Enhancements:
- Added Weight (decimal, nullable) field for variant-specific weights
- Added WeightUnit (enum, nullable) field for variant-specific units
- Maintains backward compatibility with product-level weights
TeleBot Integration:
- Enhanced variant selection UI to display stock levels
- Shows weight information with proper unit conversion (µg, g, oz, lb, ml, L)
- Compact button format: "Medium (15 in stock, 350g)"
- Real-time stock availability display
Database Migrations:
- 20250928014850_AddVariantCollectionsAndSalesLedger
- 20250928155814_AddWeightToProductVariants
Technical Changes:
- Updated Product model to support VariantCollectionId and VariantsJson
- Extended ProductService with variant collection operations
- Enhanced OrderService to handle variant-specific pricing and weights
- Updated LittleShop.Client DTOs to match server models
- Added JavaScript dynamic variant form builder
Files Modified: 15
Files Added: 17
Lines Changed: ~2000
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major changes:
• Remove BTCPay Server integration in favor of SilverPAY manual verification
• Add test data cleanup mechanisms (API endpoints and shell scripts)
• Fix compilation errors in TestController (IdentityReference vs CustomerIdentity)
• Add deployment automation scripts for Hostinger VPS
• Enhance integration testing with comprehensive E2E validation
• Add Blazor components and mobile-responsive CSS for admin interface
• Create production environment configuration scripts
Key Features Added:
• Manual payment verification through Admin panel Order Details
• Bulk test data cleanup with proper cascade handling
• Deployment automation with systemd service configuration
• Comprehensive E2E testing suite with SilverPAY integration validation
• Mobile-first admin interface improvements
Security & Production:
• Environment variable configuration for production secrets
• Proper JWT and VAPID key management
• SilverPAY API integration with live credentials
• Database cleanup and maintenance tools
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
FEATURES IMPLEMENTED:
1. Product Multi-Buys (renamed from Variations for clarity)
- Quantity-based pricing deals (e.g., 1 for £10, 3 for £25)
- Renamed UI to "Multi-Buys" with tags icon for better understanding
2. Product Variants (NEW)
- Support for colors, flavors, sizes, and other product options
- Separate from multi-buys - these are the actual variations customers choose
- Admin UI for managing variants per product
- Updated OrderItem model to store selected variants as JSON array
3. Live Bot Activity Dashboard
- Real-time view of customer interactions across all bots
- Shows active users (last 5 minutes)
- Live activity feed with user actions
- Statistics including today's activities and trending products
- Auto-refreshes every 5 seconds for live updates
- Accessible via "Live Activity" menu item
TECHNICAL CHANGES:
- Modified OrderItem.SelectedVariant to SelectedVariants (JSON array)
- Added BotActivityController for dashboard endpoints
- Created views for variant management (ProductVariants, CreateVariant, EditVariant)
- Updated Products Index to show separate buttons for Multi-Buys and Variants
- Fixed duplicate DTO definitions (removed duplicate files)
- Fixed ApplicationDbContext reference (changed to LittleShopContext)
UI IMPROVEMENTS:
- Multi-Buys: Tags icon, labeled as "pricing deals"
- Variants: Palette icon, labeled as "colors/flavors"
- Live dashboard with animated activity feed
- Visual indicators for active users and trending products
- Mobile-responsive dashboard layout
This update provides the foundation for:
- Customers selecting variants during checkout
- Real-time monitoring of bot usage patterns
- Better understanding of popular products and user behavior
Next steps: Implement variant selection in TeleBot checkout flow
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added new 'Pending Payment' tab to show orders awaiting payment (4 orders)
- Rebranded admin panel from 'LittleShop Admin' to 'TeleShop Admin'
- Updated login page, layout, and dashboard with new branding
- Fixed visibility issue where PendingPayment orders had no tab
- All 13 orders are now visible across appropriate tabs
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Add admin PWA push notifications for order management
- Integrate TeleBot customer messaging service
- Add push notification endpoints and VAPID key support
- Implement order status notifications throughout workflow
- Add notification UI components in admin panel
- Create TeleBotMessagingService for customer updates
- Add WebPush configuration to appsettings
- Fix compilation issues (BotStatus, BotContacts DbSet)
- Add comprehensive testing documentation
Features:
- Real-time admin notifications for new orders and status changes
- Customer order progress updates via TeleBot
- Graceful failure handling for notification services
- Test endpoints for notification system validation
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
Features Added:
- Standard e-commerce properties (Price, Weight, shipping fields)
- Order management with Create/Edit views and shipping information
- ShippingRates system for weight-based shipping calculations
- Comprehensive test coverage with JWT authentication tests
- Sample data seeder with 5 orders demonstrating full workflow
- Photo upload functionality for products
- Multi-cryptocurrency payment support (BTC, XMR, USDT, etc.)
Database Changes:
- Added ShippingRates table
- Added shipping fields to Orders (Name, Address, City, PostCode, Country)
- Renamed properties to standard names (BasePrice to Price, ProductWeight to Weight)
- Added UpdatedAt timestamps to models
UI Improvements:
- Added Create/Edit views for Orders
- Added ShippingRates management UI
- Updated navigation menu with Shipping option
- Enhanced Order Details view with shipping information
Sample Data:
- 3 Categories (Electronics, Clothing, Books)
- 5 Products with various prices
- 5 Shipping rates (Royal Mail options)
- 5 Orders in different statuses (Pending to Delivered)
- 3 Crypto payments demonstrating payment flow
Security:
- All API endpoints secured with JWT authentication
- No public endpoints - client apps must authenticate
- Privacy-focused design with minimal data collection
Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
