fix: OrderCard layout and filter UX improvements
Fixed all issues from user feedback round 2.
1. OrderCard Layout - Icon Inline with 2 Lines
Problem: Too much vertical space wasted, icon in separate column
New Layout:
┌─────────────────────────────────┐
│ ☐ [Icon] Nov 04, 2025, 11:44 PM │ ← Line 1: Date (small)
│ #337 →│ ← Line 2: Order# (big)
│ Dwindi Ramadhana │ ← Line 3: Customer
│ 1 item · Test Digital │ ← Line 4: Items
│ Rp64.500 Completed │ ← Line 5: Total + Status
└─────────────────────────────────┘
Changes:
- Icon inline with first 2 lines (date + order#)
- Date: text-xs, muted, top line
- Order#: text-lg, bold, second line
- Better space utilization
- Reduced padding: p-4 → p-3
- Cleaner hierarchy
Result: More compact, better use of horizontal space!
2. FilterBottomSheet Backdrop Margin
Problem: Backdrop had top margin from parent space-y-4
Fix:
- Added !m-0 to backdrop to override parent spacing
- Backdrop now properly covers entire screen
Result: Clean full-screen overlay!
3. DateRange Component Fixes
Problem:
- Horizontal overflow when custom dates selected
- WP forms.css overriding input styles
- Redundant "Apply" button
Fixes:
a) Layout:
- Changed from horizontal to vertical (flex-col)
- Full width inputs (w-full)
- Prevents overflow in bottom sheet
b) Styling:
- Override WP forms.css with shadcn classes
- border-input, bg-background, ring-offset-background
- focus-visible:ring-2 focus-visible:ring-ring
- WebkitAppearance: none to remove browser defaults
- Custom calendar picker cursor
c) Instant Filtering:
- Removed "Apply" button
- Added start/end to useEffect deps
- Filters apply immediately on date change
Result: Clean vertical layout, proper styling, instant filtering!
4. Filter Bottom Sheet UX
Problem: Apply/Cancel buttons confusing (filters already applied)
Industry Standard: Instant filtering on mobile
- Gmail: Filters apply instantly
- Amazon: Filters apply instantly
- Airbnb: Filters apply instantly
Solution:
- Removed "Apply" button
- Removed "Cancel" button
- Keep "Clear all filters" button (only when filters active)
- Filters apply instantly on change
- User can close sheet anytime (tap backdrop or X)
Result: Modern, intuitive mobile filter UX!
Files Modified:
- routes/Orders/components/OrderCard.tsx
- routes/Orders/components/FilterBottomSheet.tsx
- components/filters/DateRange.tsx
Summary:
✅ OrderCard: Icon inline, better space usage
✅ Backdrop: No margin, full coverage
✅ DateRange: Vertical layout, no overflow, proper styling
✅ Filters: Instant application, industry standard UX
✅ Clean, modern, mobile-first! 🎯
ff485a889a