Implemented three major improvements based on user feedback.
1. OrderCard Redesign - Order ID Badge with Status Colors
Problem: Icon wasted space, status badge redundant
Solution: Replace icon with Order ID badge using status colors
New Design:
┌─────────────────────────────────┐
│ ☐ [#337] Nov 04, 2025, 11:44 PM│ ← Order ID with status color
│ Dwindi Ramadhana →│ ← Customer (bold)
│ 1 item · Test Digital │ ← Items
│ Rp64.500 │ ← Total (large, primary)
└─────────────────────────────────┘
Status Colors:
- Completed: Green background
- Processing: Blue background
- Pending: Amber background
- Failed: Red background
- Cancelled: Gray background
- Refunded: Purple background
- On-hold: Slate background
Changes:
- Removed Package icon
- Order ID badge: w-16 h-16, rounded-xl, status color bg
- Order ID: font-bold, centered in badge
- Removed status badge from bottom
- Customer name promoted to h3 (more prominent)
- Total: text-lg, text-primary (stands out)
- Cleaner, more modern look
Inspiration: Uber, DoorDash, Airbnb order cards
Result: More efficient use of space, status visible at a glance!
2. CRUD Header Improvements - Back Button in Contextual Header
Problem: Inline headers on New/Edit pages, no back button in header
Solution: Add back button to contextual header, remove inline headers
New Order:
┌─────────────────────────────────┐
│ [Back] New Order │ ← Contextual header
├─────────────────────────────────┤
│ Order form... │
└─────────────────────────────────┘
Edit Order:
┌─────────────────────────────────┐
│ [Back] Edit Order #337 │ ← Contextual header
├─────────────────────────────────┤
│ Order form... │
└─────────────────────────────────┘
Changes:
- Added Back button to contextual header (ghost variant)
- Removed inline page headers
- Cleaner, more consistent UI
- Back button always visible (no scroll needed)
Result: Better UX, consistent with mobile patterns!
3. FAB Visibility Fix - Hide on New/Edit Pages
Problem: FAB visible on Edit page, causing confusion
Solution: Hide FAB on New/Edit pages using useFABConfig("none")
Changes:
- New.tsx: Added useFABConfig("none")
- Edit.tsx: Added useFABConfig("none")
- FAB only visible on Orders list page
Result: No confusion, FAB only where it makes sense!
Files Modified:
- routes/Orders/components/OrderCard.tsx
- routes/Orders/New.tsx
- routes/Orders/Edit.tsx
Summary:
✅ OrderCard: Order ID badge with status colors
✅ CRUD Headers: Back button in contextual header
✅ FAB: Hidden on New/Edit pages
✅ Cleaner, more modern, more intuitive! 🎯
4e764f9368