fix: Blank page error and reorganize notification cards

Fixed two issues:

1. Blank Page Error (ReferenceError)
   - EditTemplate.tsx referenced removed 'variables' object
   - Changed to use 'availableVariables' array
   - Error occurred in preview generation function

2. Reorganized Notification Cards
   - Added clear category sections: Recipients and Channels
   - Recipients section: Staff, Customer (ready for Affiliate, Merchant)
   - Channels section: Channel Configuration, Activity Log
   - Better structure for future scalability
   - Cleaner UI with section headers and descriptions

Structure Now:
├── Recipients
│   ├── Staff (Orders, Products, Customers)
│   └── Customer (Orders, Shipping, Account)
└── Channels
    ├── Channel Configuration (Email, Push, WhatsApp, Telegram)
    └── Activity Log (Coming soon)

Ready to add:
- Affiliate recipient (for affiliate notifications)
- Merchant recipient (for marketplace vendors)

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

@@ -318,7 +318,7 @@ export default function EditTemplate() {
     });
 
     // Highlight variables that don't have sample data
-    Object.keys(variables).forEach(key => {
+    availableVariables.forEach(key => {
       if (!storeVariables[key] && !sampleData[key]) {
         const sampleValue = `<span style="background: #fef3c7; padding: 2px 4px; border-radius: 2px;">[${key}]</span>`;
         previewBody = previewBody.replace(new RegExp(`\\{${key}\\}`, 'g'), sampleValue);