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

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

@@ -47,12 +47,12 @@ export default function DateRange({ value, onChange }: Props) {
       setEnd(pr.date_end);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preset]);
+  }, [preset, start, end]);
 
   return (
-    <div className="flex items-center gap-2">
+    <div className="flex flex-col gap-2 w-full">
       <Select value={preset} onValueChange={(v) => setPreset(v)}>
-        <SelectTrigger className="min-w-[140px]">
+        <SelectTrigger className="w-full">
           <SelectValue placeholder={__("Last 7 days")} />
         </SelectTrigger>
         <SelectContent position="popper" className="z-[1000]">
@@ -66,26 +66,23 @@ export default function DateRange({ value, onChange }: Props) {
       </Select>
 
       {preset === "custom" && (
-        <div className="flex items-center gap-2">
+        <div className="flex flex-col gap-2 w-full">
           <input
             type="date"
-            className="border rounded-md px-3 py-2 text-sm"
+            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"
+            style={{ WebkitAppearance: 'none', MozAppearance: 'textfield' } as any}
             value={start || ""}
             onChange={(e) => setStart(e.target.value || undefined)}
+            placeholder={__("Start date")}
           />
-          <span className="opacity-60 text-sm">{__("to")}</span>
           <input
             type="date"
-            className="border rounded-md px-3 py-2 text-sm"
+            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"
+            style={{ WebkitAppearance: 'none', MozAppearance: 'textfield' } as any}
             value={end || ""}
             onChange={(e) => setEnd(e.target.value || undefined)}
+            placeholder={__("End date")}
           />
-          <button
-            className="border rounded-md px-3 py-2 text-sm"
-            onClick={() => onChange?.({ date_start: start, date_end: end, preset })}
-          >
-            {__("Apply")}
-          </button>
         </div>
       )}
     </div>