feat: Add zone management backend + drawer z-index fix + SettingsCard action prop

## 1. Fixed Drawer Z-Index ✅
- Increased drawer z-index from 50 to 60
- Now appears above bottom navigation (z-50)
- Fixes mobile drawer visibility issue

## 2. Zone Management Backend ✅
Added full CRUD for shipping zones:
- POST /settings/shipping/zones - Create zone
- PUT /settings/shipping/zones/{id} - Update zone
- DELETE /settings/shipping/zones/{id} - Delete zone
- GET /settings/shipping/locations - Get countries/states/continents

Features:
- Create zones with name and regions
- Update zone name and regions
- Delete zones
- Region selector with continents, countries, and states
- Proper cache invalidation

## 3. Zone Management Frontend (In Progress) ⏳
- Added state for zone CRUD (showAddZone, editingZone, deletingZone)
- Added mutations (createZone, updateZone, deleteZone)
- Added "Add Zone" button to SettingsCard
- Updated empty state with "Create First Zone" button

## 4. Enhanced SettingsCard Component ✅
- Added optional `action` prop for header buttons
- Flexbox layout for title/description + action
- Used in Shipping zones for "Add Zone" button

## Next Steps:
- Add delete button to each zone
- Create Add/Edit Zone dialog with region selector
- Add delete confirmation dialog
- Then move to Tax rates and Email subjects

admin-spa/src/routes/Settings/components/SettingsCard.tsx

@@ -6,14 +6,20 @@ interface SettingsCardProps {
   description?: string;
   children: React.ReactNode;
   className?: string;
+  action?: React.ReactNode;
 }
 
-export function SettingsCard({ title, description, children, className = '' }: SettingsCardProps) {
+export function SettingsCard({ title, description, children, className = '', action }: SettingsCardProps) {
   return (
     <Card className={className}>
       <CardHeader>
-        <CardTitle>{title}</CardTitle>
-        {description && <CardDescription>{description}</CardDescription>}
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex-1">
+            <CardTitle>{title}</CardTitle>
+            {description && <CardDescription>{description}</CardDescription>}
+          </div>
+          {action && <div className="flex-shrink-0">{action}</div>}
+        </div>
       </CardHeader>
       <CardContent className="space-y-4">
         {children}