WooNooW

dwindown/WooNooW

Fork 0

Commit Graph

Author	SHA1	Message	Date
dwindown	e8ca3ceeb2	fix: Vertical tabs visibility and add mobile search/filter Fixed 3 critical issues: 1. Fixed Vertical Tabs - Cards All Showing - Updated VerticalTabForm to hide inactive sections - Only active section visible (className: hidden for others) - Proper tab switching now works 2. Added Mobile Search/Filter to Coupons - Created CouponFilterSheet component - Added mobile search bar with icon - Filter button with active count badge - Matches Products pattern exactly - Sheet with Apply/Reset buttons 3. Removed max-height from VerticalTabForm - User removed max-h-[calc(100vh-200px)] - Content now flows naturally - Better for forms with varying heights Components Created: - CouponFilterSheet.tsx - Mobile filter bottom sheet - Discount type filter - Apply/Reset actions - Active filter count Changes to Coupons/index.tsx: - Added mobile search bar (md:hidden) - Added filter sheet state - Added activeFiltersCount - Search icon + SlidersHorizontal icon - Filter badge indicator Changes to VerticalTabForm: - Hide inactive sections (className: hidden) - Only show section matching activeTab - Proper visibility control Result: ✅ Vertical tabs work correctly (only one section visible) ✅ Mobile search/filter on Coupons (like Products) ✅ Filter count badge ✅ Professional mobile UX Next: Move customer site member checkbox to settings	2025-11-20 20:32:46 +07:00
dwindown	7455d99ab8	feat: Add vertical tab layout to Coupon form Implemented VerticalTabForm component for better UX Created Components: 1. VerticalTabForm.tsx - Reusable vertical tab layout - Left sidebar with navigation (250px on desktop) - Right content area (scrollable) - Scroll spy - auto-highlights active section - Click to scroll to section - Smooth scrolling behavior - Icons support for tabs 2. FormSection component - Wrapper for form sections - Proper ref forwarding - Section ID tracking Updated CouponForm: - Added vertical tab navigation - 3 sections: General, Usage restrictions, Usage limits - Icons: Settings, ShieldCheck, BarChart3 - Narrower content area (better readability) - Desktop-only (lg:block) - mobile keeps original layout Features: ✅ Scroll spy - active tab follows scroll ✅ Click navigation - smooth scroll to section ✅ Visual hierarchy - clear section separation ✅ Better space utilization ✅ Reduced form width for readability ✅ Professional UI like Shopify/Stripe Layout: - Desktop: 250px sidebar + remaining content - Content: max-h-[calc(100vh-200px)] scrollable - Sticky sidebar (top-4) - Active state: bg-primary text-primary-foreground - Hover state: bg-muted hover:text-foreground Next: Apply same pattern to Products form	2025-11-20 16:00:03 +07:00

Author

SHA1

Message

Date

dwindown

e8ca3ceeb2

fix: Vertical tabs visibility and add mobile search/filter

Fixed 3 critical issues:

1. Fixed Vertical Tabs - Cards All Showing
   - Updated VerticalTabForm to hide inactive sections
   - Only active section visible (className: hidden for others)
   - Proper tab switching now works

2. Added Mobile Search/Filter to Coupons
   - Created CouponFilterSheet component
   - Added mobile search bar with icon
   - Filter button with active count badge
   - Matches Products pattern exactly
   - Sheet with Apply/Reset buttons

3. Removed max-height from VerticalTabForm
   - User removed max-h-[calc(100vh-200px)]
   - Content now flows naturally
   - Better for forms with varying heights

Components Created:
- CouponFilterSheet.tsx - Mobile filter bottom sheet
  - Discount type filter
  - Apply/Reset actions
  - Active filter count

Changes to Coupons/index.tsx:
- Added mobile search bar (md:hidden)
- Added filter sheet state
- Added activeFiltersCount
- Search icon + SlidersHorizontal icon
- Filter badge indicator

Changes to VerticalTabForm:
- Hide inactive sections (className: hidden)
- Only show section matching activeTab
- Proper visibility control

Result:
✅ Vertical tabs work correctly (only one section visible)
✅ Mobile search/filter on Coupons (like Products)
✅ Filter count badge
✅ Professional mobile UX

Next: Move customer site member checkbox to settings

2025-11-20 20:32:46 +07:00

dwindown

7455d99ab8

feat: Add vertical tab layout to Coupon form

Implemented VerticalTabForm component for better UX

Created Components:
1. VerticalTabForm.tsx - Reusable vertical tab layout
   - Left sidebar with navigation (250px on desktop)
   - Right content area (scrollable)
   - Scroll spy - auto-highlights active section
   - Click to scroll to section
   - Smooth scrolling behavior
   - Icons support for tabs

2. FormSection component
   - Wrapper for form sections
   - Proper ref forwarding
   - Section ID tracking

Updated CouponForm:
- Added vertical tab navigation
- 3 sections: General, Usage restrictions, Usage limits
- Icons: Settings, ShieldCheck, BarChart3
- Narrower content area (better readability)
- Desktop-only (lg:block) - mobile keeps original layout

Features:
✅ Scroll spy - active tab follows scroll
✅ Click navigation - smooth scroll to section
✅ Visual hierarchy - clear section separation
✅ Better space utilization
✅ Reduced form width for readability
✅ Professional UI like Shopify/Stripe

Layout:
- Desktop: 250px sidebar + remaining content
- Content: max-h-[calc(100vh-200px)] scrollable
- Sticky sidebar (top-4)
- Active state: bg-primary text-primary-foreground
- Hover state: bg-muted hover:text-foreground

Next: Apply same pattern to Products form

2025-11-20 16:00:03 +07:00

2 Commits