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.tsx

@@ -10,9 +10,18 @@ export default function NotificationsSettings() {
   return (
     <SettingsLayout
       title={__('Notifications')}
-      description={__('Manage staff and customer notifications')}
+      description={__('Manage notification recipients and delivery channels')}
       action={<div />} // Empty action to trigger contextual header
     >
+      <div className="space-y-8">
+        {/* Recipients Section */}
+        <div>
+          <div className="mb-4">
+            <h2 className="text-lg font-semibold">{__('Recipients')}</h2>
+            <p className="text-sm text-muted-foreground">
+              {__('Configure notifications for different user types')}
+            </p>
+          </div>
           <div className="grid gap-6 md:grid-cols-2">
             {/* Staff Notifications */}
             <Card className="hover:shadow-md transition-shadow">
@@ -22,7 +31,7 @@ export default function NotificationsSettings() {
                     <Bell className="h-6 w-6 text-primary" />
                   </div>
                   <div>
-                <CardTitle>{__('Staff Notifications')}</CardTitle>
+                    <CardTitle>{__('Staff')}</CardTitle>
                     <CardDescription>
                       {__('Alerts for admins and staff members')}
                     </CardDescription>
@@ -55,7 +64,7 @@ export default function NotificationsSettings() {
                     <Users className="h-6 w-6 text-blue-500" />
                   </div>
                   <div>
-                <CardTitle>{__('Customer Notifications')}</CardTitle>
+                    <CardTitle>{__('Customer')}</CardTitle>
                     <CardDescription>
                       {__('Transactional emails and updates for customers')}
                     </CardDescription>
@@ -79,7 +88,18 @@ export default function NotificationsSettings() {
                 </div>
               </CardContent>
             </Card>
+          </div>
+        </div>
 
+        {/* Channels Section */}
+        <div>
+          <div className="mb-4">
+            <h2 className="text-lg font-semibold">{__('Channels')}</h2>
+            <p className="text-sm text-muted-foreground">
+              {__('Configure notification delivery methods and settings')}
+            </p>
+          </div>
+          <div className="grid gap-6 md:grid-cols-2">
             {/* Channel Configuration */}
             <Card className="hover:shadow-md transition-shadow">
               <CardHeader>
@@ -144,6 +164,8 @@ export default function NotificationsSettings() {
               </CardContent>
             </Card>
           </div>
+        </div>
+      </div>
     </SettingsLayout>
   );
 }

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);