feat: Restructure Channel Configuration as separate section

✅ New Structure:
Notifications
├── Staff Notifications (toggle only)
├── Customer Notifications (toggle only)
├── Channel Configuration (new section)
│   ├── Email Configuration
│   │   ├── Template Settings (colors, logo, branding)
│   │   └── Connection Settings (wp_mail/SMTP)
│   ├── Push Configuration
│   │   ├── Template Settings (icon, badge, sound)
│   │   └── Connection Settings (browser-native/FCM)
│   └── Future: WhatsApp, Telegram, SMS (addons)
└── Activity Log (coming soon)

✅ Separation of Concerns:
- Staff/Customer pages: "What to send" (enable/disable)
- Channel Config: "How to send" (global settings)

✅ Changes:
- Created ChannelConfiguration.tsx (main page listing all channels)
- Created EmailConfiguration.tsx (template + connection tabs)
- Created PushConfiguration.tsx (template + connection tabs)
- Updated Staff/Customer Channels tabs to toggle-only
- Removed Configure buttons from Staff/Customer pages
- Added links to Channel Configuration
- Updated main Notifications page with new card
- Added routing for all new pages

✅ Benefits:
- Clear separation: enable vs configure
- Global settings apply to both staff & customer
- Scalable for addon channels
- No confusion about where to configure
- Consistent with app patterns

🎯 Ready for: WhatsApp, Telegram, SMS addons

admin-spa/src/routes/Settings/Notifications.tsx

@@ -4,7 +4,7 @@ import { SettingsLayout } from './components/SettingsLayout';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { __ } from '@/lib/i18n';
-import { Bell, Users, ChevronRight, Activity, Palette } from 'lucide-react';
+import { Bell, Users, ChevronRight, Activity, Settings } from 'lucide-react';
 
 export default function NotificationsSettings() {
   return (
@@ -80,32 +80,32 @@ export default function NotificationsSettings() {
           </CardContent>
         </Card>
 
-        {/* Email Customization */}
+        {/* Channel Configuration */}
         <Card className="hover:shadow-md transition-shadow">
           <CardHeader>
             <div className="flex items-center gap-3">
               <div className="p-2 bg-green-500/10 rounded-lg">
-                <Palette className="h-6 w-6 text-green-500" />
+                <Settings className="h-6 w-6 text-green-500" />
               </div>
               <div>
-                <CardTitle>{__('Email Customization')}</CardTitle>
+                <CardTitle>{__('Channel Configuration')}</CardTitle>
                 <CardDescription>
-                  {__('Customize email appearance and branding')}
+                  {__('Configure notification channels and settings')}
                 </CardDescription>
               </div>
             </div>
           </CardHeader>
           <CardContent className="space-y-4">
             <p className="text-sm text-muted-foreground">
-              {__('Set your brand colors, logo, and email styling. Customize header, footer, and button colors for all email templates.')}
+              {__('Configure email, push notifications, WhatsApp, Telegram, and other notification channels. Set templates and connection settings.')}
             </p>
             <div className="flex items-center justify-between pt-2">
               <div className="text-sm text-muted-foreground">
-                {__('Colors, Logo, Styling')}
+                {__('Email, Push, WhatsApp, Telegram')}
               </div>
-              <Link to="/settings/notifications/email-customization">
+              <Link to="/settings/notifications/channels">
                 <Button variant="outline" size="sm">
-                  {__('Customize')}
+                  {__('Configure')}
                   <ChevronRight className="ml-2 h-4 w-4" />
                 </Button>
               </Link>