WooNooW

Files

dwindown 97e24ae408 feat(ui): Make cards linkable and hide submenu on detail pages

Improved mobile UX matching Orders/Products pattern

Issue 1: Coupons and Customers cards not linkable
❌ Cards had separate checkbox and edit button
❌ Inconsistent with Orders/Products beautiful card design
❌ Less intuitive UX (extra tap required)

Issue 2: Submenu showing on detail/new/edit pages
❌ Submenu tabs visible on mobile detail/new/edit pages
❌ Distracting and annoying (user feedback)
❌ Redundant (page has own tabs + back button)

Changes Made:

1. Created CouponCard Component:
✅ Linkable card matching OrderCard/ProductCard pattern
✅ Whole card is tappable (better mobile UX)
✅ Checkbox with stopPropagation for selection
✅ Chevron icon indicating it's tappable
✅ Beautiful layout: Badge + Description + Usage + Amount
✅ Active scale animation on tap
✅ Hover effects

2. Updated Coupons/index.tsx:
✅ Replaced old card structure with CouponCard
✅ Fixed desktop edit link: /coupons/${id} → /coupons/${id}/edit
✅ Changed spacing: space-y-2 → space-y-3 (consistent with Orders)
✅ Cleaner, more maintainable code

3. Updated Customers/index.tsx:
✅ Made cards linkable (whole card is Link)
✅ Added ChevronRight icon
✅ Checkbox with stopPropagation
✅ Better layout: Name + Email + Stats + Total Spent
✅ Changed spacing: space-y-2 → space-y-3
✅ Matches Orders/Products card design

4. Updated SubmenuBar.tsx:
✅ Hide on mobile for detail/new/edit pages
✅ Show on desktop (still useful for navigation)
✅ Regex pattern: /\/(orders|products|coupons|customers)\/(?:new|\d+(?:\/edit)?)$/
✅ Applied via: hidden md:block class

Card Pattern Comparison:

Before (Coupons/Customers):

After (All modules):

Submenu Behavior:

Mobile:
- Index pages: ✅ Show submenu [All | New]
- Detail/New/Edit: ❌ Hide submenu (has own tabs + back button)

Desktop:
- All pages: ✅ Show submenu (useful for quick navigation)

Benefits:
✅ Consistent UX across all modules
✅ Better mobile experience (fewer taps)
✅ Less visual clutter on detail pages
✅ Cleaner, more intuitive navigation
✅ Matches industry standards (Shopify, WooCommerce)

Result: Mobile UX now matches the beautiful Orders/Products design!