Implemented mobile-optimized navigation structure:
1. Bottom Navigation (Mobile Only)
- 5 items: Dashboard, Orders, Products, Customers, More
- Fixed at bottom, always visible
- Thumb-friendly positioning
- Active state indication
- Hidden on desktop (md:hidden)
2. More Menu Page
- Overflow menu for Coupons and Settings
- Clean list layout with icons
- Descriptions for each item
- Chevron indicators
3. FAB (Floating Action Button)
- Context-aware system via FABContext
- Fixed bottom-right (72px from bottom)
- Hidden on desktop (md:hidden)
- Ready for contextual actions per page
4. FAB Context System
- Global state for FAB configuration
- setFAB() / clearFAB() methods
- Supports icon, label, onClick, visibility
- Allows pages to control FAB behavior
5. Layout Updates
- Added pb-14 to main for bottom nav spacing
- BottomNav and FAB in mobile fullscreen layout
- Wrapped app with FABProvider
Structure (Mobile):
┌─────────────────────────────────┐
│ App Bar (will hide on scroll) │
├─────────────────────────────────┤
│ Page Header (sticky, contextual)│
├─────────────────────────────────┤
│ Submenu (sticky) │
├─────────────────────────────────┤
│ Content (scrollable) │
│ [+] FAB │
├─────────────────────────────────┤
│ Bottom Nav (fixed) │
└─────────────────────────────────┘
Next Steps:
- Implement scroll-hide for app bar
- Add contextual FAB per page
- Test on real devices
Files Created:
- BottomNav.tsx: Bottom navigation component
- More/index.tsx: More menu page
- FABContext.tsx: FAB state management
- FAB.tsx: Floating action button component
- useScrollDirection.ts: Scroll detection hook
Files Modified:
- App.tsx: Added bottom nav, FAB, More route, providers
Problem:
- Content still not shrinking on narrow viewports
- Horizontal scrolling persists
- Header shrinks but body doesn't
Root Cause:
Missing min-w-0 on parent containers:
<main className="flex-1 flex flex-col"> ← No min-w-0!
<div className="overflow-auto p-4"> ← No min-w-0!
<AppRoutes />
Without min-w-0, flex containers won't shrink below their
content's natural width, even if children have min-w-0.
Solution:
Add min-w-0 to the entire container chain:
<main className="flex-1 flex flex-col min-h-0 min-w-0">
<div className="overflow-auto p-4 min-w-0">
<AppRoutes />
Container Chain (all need min-w-0):
┌────────────────────────────────────┐
│ <div flex> │
│ <Sidebar flex-shrink-0> │
│ <main flex-1 min-w-0> ✅ │ ← Added
│ <SubmenuBar> │
│ <PageHeader> │
│ <div overflow-auto min-w-0> ✅ │ ← Added
│ <AppRoutes> │
│ <SettingsLayout min-w-0> │
│ <PageHeader min-w-0> │
│ Content... │
└────────────────────────────────────┘
Applied to all 3 layouts:
1. Fullscreen Desktop (Sidebar + Main)
2. Fullscreen Mobile (TopNav + Main)
3. WP-Admin (TopNav + Main)
Why this works:
- min-w-0 must be on EVERY flex container in the chain
- Breaking the chain at any level prevents shrinking
- Now entire tree can shrink from root to leaf
Files Modified:
- App.tsx: Added min-w-0 to <main> and scrollable <div>
Result:
✅ Content shrinks properly on all viewports
✅ No horizontal scrolling
✅ Works from 320px to 1920px+
✅ All layouts (fullscreen, mobile, WP-Admin)
Problem: Payment gateway settings modal was using Dialog on all screen sizes
Solution: Split into responsive Dialog (desktop) and Drawer (mobile)
Changes:
1. Added Drawer and useMediaQuery imports
2. Added isDesktop hook: useMediaQuery("(min-width: 768px)")
3. Split modal into two conditional renders:
- Desktop (≥768px): Dialog with horizontal footer layout
- Mobile (<768px): Drawer with vertical footer layout
Desktop Layout (Dialog):
- Center modal overlay
- Horizontal footer: Cancel | View in WC | Save
- max-h-[80vh] for scrolling
Mobile Layout (Drawer):
- Bottom sheet (slides up from bottom)
- Vertical footer (full width buttons):
1. Save Settings (primary)
2. View in WooCommerce (ghost)
3. Cancel (outline)
- max-h-[90vh] for more screen space
- Swipe down to dismiss
Benefits:
✅ Native mobile experience with bottom sheet
✅ Easier to reach buttons on mobile (bottom of screen)
✅ Better one-handed use
✅ Swipe gesture to dismiss
✅ Desktop keeps familiar modal experience
User Changes Applied:
- AlertDialog z-index: z-50 → z-[999] (higher than other modals)
- Dialog max-height: max-h-[100vh] → max-h-[80vh] (better desktop UX)
Files Modified:
- Payments.tsx: Responsive Dialog/Drawer implementation
- alert-dialog.tsx: Increased z-index for proper layering
✅ Issue 1: Toggle Not Saving (CRITICAL FIX)
Problem: Toggle appeared to work but didn't persist
Root Cause: Missing query invalidation after toggle
Solution:
- Added queryClient.invalidateQueries after successful toggle
- Now fetches real server state after optimistic update
- Ensures SPA and WooCommerce stay in sync
✅ Issue 2: SearchableSelect Default Value
Problem: Showing 'Select country...' when Indonesia selected
Root Cause: WooCommerce stores country as 'ID:DKI_JAKARTA'
Solution:
- Split country:state format in backend
- Extract country code only for select
- Added timezone fallback to 'UTC' if empty
✅ Issue 3: 3rd Party Gateway Settings
Problem: TriPay showing 'Configure in WooCommerce' link
Solution:
- Replaced external link with Settings button
- Now opens GenericGatewayForm modal
- All WC form_fields render automatically
- TriPay fields (enable_icon, expired, checkout_method) work!
📋 Files Modified:
- Payments.tsx: Added invalidation + settings button
- StoreSettingsProvider.php: Split country format
- All 3rd party gateways now configurable in SPA
🎯 Result:
✅ Toggle saves correctly to WooCommerce
✅ Country/timezone show selected values
✅ All gateways with form_fields are editable
✅ No more 'Configure in WooCommerce' for compliant gateways
