feat: OrderCard redesign and CRUD header improvements

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! 🎯

admin-spa/src/components/filters/DateRange.tsx

@@ -50,7 +50,7 @@ export default function DateRange({ value, onChange }: Props) {
   }, [preset, start, end]);
 
   return (
-    <div className="flex flex-col gap-2 w-full">
+    <div className="flex flex-col lg:flex-row gap-2 w-full">
       <Select value={preset} onValueChange={(v) => setPreset(v)}>
         <SelectTrigger className="w-full">
           <SelectValue placeholder={__("Last 7 days")} />
@@ -66,10 +66,10 @@ export default function DateRange({ value, onChange }: Props) {
       </Select>
 
       {preset === "custom" && (
-        <div className="flex flex-col gap-2 w-full">
+        <div className="flex flex-col lg:flex-row gap-2 w-full">
           <input
             type="date"
-            className="w-full border border-input rounded-md px-3 py-2 text-sm bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+            className="w-full border !bg-transparent !border-input !rounded-md !shadow-sm px-3 py-2 text-sm bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
             style={{ WebkitAppearance: 'none', MozAppearance: 'textfield' } as any}
             value={start || ""}
             onChange={(e) => setStart(e.target.value || undefined)}
@@ -77,7 +77,7 @@ export default function DateRange({ value, onChange }: Props) {
           />
           <input
             type="date"
-            className="w-full border border-input rounded-md px-3 py-2 text-sm bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+            className="w-full border !bg-transparent !border-input !rounded-md !shadow-sm px-3 py-2 text-sm bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&::-webkit-calendar-picker-indicator]:cursor-pointer"
             style={{ WebkitAppearance: 'none', MozAppearance: 'textfield' } as any}
             value={end || ""}
             onChange={(e) => setEnd(e.target.value || undefined)}