ff485a889a62fe625f34eb52107503dda432d852
3 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
dwindown
|
ff485a889a |
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! 🎯 |
||
|
dwindown
|
c62fbd9436 |
refine: Polish mobile Orders UI based on feedback
Addressed all three feedback points from user testing. 1. OrderCard Layout Improvements Problem: Card felt too dense, cramped spacing Changes: - Increased icon size: 10x10 → 12x12 - Increased icon padding: w-10 h-10 → w-12 h-12 - Rounded corners: rounded-lg → rounded-xl - Added shadow-sm for depth - Increased gap between elements: gap-3 → gap-4 - Added space-y-2 for vertical rhythm - Made order number bolder: font-semibold → font-bold - Increased order number size: text-base → text-lg - Made customer name font-medium (was muted) - Made total amount bolder and colored: font-semibold → font-bold text-primary - Increased total size: text-base → text-lg - Better status badge: px-2 py-0.5 → px-2.5 py-1, font-medium → font-semibold - Larger checkbox: default → w-5 h-5 - Centered chevron vertically: mt-2 → self-center Result: More breathing room, better hierarchy, easier to scan 2. FilterBottomSheet Z-Index & Padding Problem: Bottom sheet covered by FAB and bottom nav Changes: - Increased backdrop z-index: z-40 → z-[60] - Increased sheet z-index: z-50 → z-[70] (above FAB z-50) - Made sheet flexbox: added flex flex-col - Made content scrollable: added flex-1 overflow-y-auto - Added bottom padding: pb-24 (space for bottom nav) Result: Sheet now covers FAB, content scrolls, bottom nav visible 3. Contextual Headers for Order Pages Problem: Order Detail, New, Edit pages are actionable but had no headers Solution: Added contextual headers to all three pages Order Detail: - Header: "Order #337" - Actions: [Invoice] [Edit] buttons - Shows order number dynamically - Hides in print mode New Order: - Header: "New Order" - No actions (form has submit) Edit Order: - Header: "Edit Order #337" - No actions (form has submit) - Shows order number dynamically Implementation: - Import usePageHeader - useEffect to set/clear header - Order Detail: Custom action buttons - New/Edit: Simple title only Files Modified: - routes/Orders/components/OrderCard.tsx - routes/Orders/components/FilterBottomSheet.tsx - routes/Orders/Detail.tsx - routes/Orders/New.tsx - routes/Orders/Edit.tsx Result: ✅ Cards feel spacious and scannable ✅ Filter sheet properly layered ✅ Order pages have contextual headers ✅ Consistent mobile UX across all order flows ✅ Professional, polished feel! 🎯 |
||
|
dwindown
|
e0a236fc64 |
feat: Modern mobile-first Orders UI redesign
Implemented complete mobile-first redesign of Orders page with app-like UX. Problem: - Desktop table layout on mobile (cramped, not touch-friendly) - "New order" button redundant with FAB - Desktop-style filters not mobile-optimized - Checkbox selection too small for touch - Old-school pagination Solution: Full Modern Mobile-First Redesign New Components Created: 1. OrderCard.tsx - Card-based layout for mobile - Touch-friendly tap targets - Order number + status badge - Customer name - Items brief - Date + total amount - Chevron indicator - Checkbox for selection - Tap card → navigate to detail 2. FilterBottomSheet.tsx - Modern bottom sheet UI - Drag handle - Status filter - Date range picker - Sort order - Active filter count badge - Reset + Apply buttons - Smooth slide-in animation 3. SearchBar.tsx - Search input with icon - Filter button with badge - Clean, modern design - Touch-optimized Orders Page Redesign: Mobile Layout: ┌─────────────────────────────────┐ │ [🔍 Search orders...] [⚙] │ ← Search + Filter ├─────────────────────────────────┤ │ ┌─────────────────────────────┐ │ │ │ 📦 #337 💰 │ │ ← Order card │ │ Processing │ │ │ │ Dwindi Ramadhana │ │ │ │ 2 items · Product A, ... │ │ │ │ 2 hours ago Rp64.500 │ │ │ └─────────────────────────────┘ │ │ ┌─────────────────────────────┐ │ │ │ 📦 #336 ✓ │ │ │ │ Completed │ │ │ │ John Doe │ │ │ │ 1 item · Product B │ │ │ │ Yesterday Rp125.000 │ │ │ └─────────────────────────────┘ │ ├─────────────────────────────────┤ │ [Previous] Page 1 [Next] │ ├─────────────────────────────────┤ │ Dashboard Orders Products ... │ └─────────────────────────────────┘ ( + ) ← FAB Desktop Layout: - Keeps table view (familiar for desktop users) - Inline filters at top - All existing functionality preserved Features Implemented: ✅ Card-based mobile layout ✅ Search orders (by number, customer, status) ✅ Bottom sheet filters ✅ Active filter count badge ✅ Pull-to-refresh indicator ✅ Bulk selection with sticky action bar ✅ Touch-optimized tap targets ✅ Smooth animations ✅ Empty states with helpful messages ✅ Responsive: cards on mobile, table on desktop ✅ FAB for new order (removed redundant button) ✅ Clean, modern, app-like UX Mobile-Specific Improvements: 1. No "New order" button at top (use FAB) 2. Search bar replaces desktop filters 3. Filter icon opens bottom sheet 4. Cards instead of cramped table 5. Larger touch targets 6. Sticky bulk action bar 7. Pull-to-refresh support 8. Better empty states Desktop Unchanged: - Table layout preserved - Inline filters - All existing features work Result: ✅ Modern, app-like mobile UI ✅ Touch-friendly interactions ✅ Clean, uncluttered design ✅ Fast, responsive ✅ Desktop functionality preserved ✅ Consistent with mobile-first vision Files Created: - routes/Orders/components/OrderCard.tsx - routes/Orders/components/FilterBottomSheet.tsx - routes/Orders/components/SearchBar.tsx Files Modified: - routes/Orders/index.tsx (complete redesign) The Orders page is now a modern, mobile-first experience! 🎯 |