feat: Add responsive Dialog/Drawer pattern

Created responsive dialog pattern for better mobile UX:

Components Added:
1. drawer.tsx - Vaul-based drawer component (bottom sheet)
2. responsive-dialog.tsx - Smart wrapper that switches based on screen size
3. use-media-query.ts - Hook to detect screen size

Pattern:
- Desktop (≥768px): Use Dialog (modal overlay)
- Mobile (<768px): Use Drawer (bottom sheet)
- Provides consistent API for both

Usage Example:
<ResponsiveDialog
  open={isOpen}
  onOpenChange={setIsOpen}
  title="Settings"
  description="Configure your options"
  footer={<Button>Save</Button>}
>
  <FormContent />
</ResponsiveDialog>

Benefits:
- Better mobile UX with native-feeling bottom sheet
- Easier to reach buttons on mobile
- Consistent desktop experience
- Single component API

Dependencies:
- npm install vaul (drawer library)
- @radix-ui/react-dialog (already installed)

Next Steps:
- Convert payment gateway modal to use ResponsiveDialog
- Use AlertDialog for confirmations
- Apply pattern to other modals in project

Note: Payment gateway modal needs custom implementation
due to complex layout (scrollable body + sticky footer)

admin-spa/package.json

@@ -37,6 +37,7 @@
         "recharts": "^3.3.0",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
+        "vaul": "^1.1.2",
         "zustand": "^5.0.8"
     },
     "devDependencies": {