From 766f2353e007d9aa0da4dbbbef4f069551237112 Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Wed, 19 Nov 2025 17:10:48 +0700
Subject: [PATCH] fix: Blank page error and reorganize notification cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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)
---
 .../src/routes/Settings/Notifications.tsx     | 270 ++++++++++--------
 .../Settings/Notifications/EditTemplate.tsx   |   2 +-
 2 files changed, 147 insertions(+), 125 deletions(-)

diff --git a/admin-spa/src/routes/Settings/Notifications.tsx b/admin-spa/src/routes/Settings/Notifications.tsx
index 6fbc51a..5a356c7 100644
--- a/admin-spa/src/routes/Settings/Notifications.tsx
+++ b/admin-spa/src/routes/Settings/Notifications.tsx
@@ -10,139 +10,161 @@ 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="grid gap-6 md:grid-cols-2">
-        {/* Staff Notifications */}
-        <Card className="hover:shadow-md transition-shadow">
-          <CardHeader>
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-primary/10 rounded-lg">
-                <Bell className="h-6 w-6 text-primary" />
-              </div>
-              <div>
-                <CardTitle>{__('Staff Notifications')}</CardTitle>
-                <CardDescription>
-                  {__('Alerts for admins and staff members')}
-                </CardDescription>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
+      <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">
-              {__('Get notified about orders, low stock, new customers, and more. Configure email and push notifications for your team.')}
+              {__('Configure notifications for different user types')}
             </p>
-            <div className="flex items-center justify-between pt-2">
-              <div className="text-sm text-muted-foreground">
-                {__('Orders, Products, Customers')}
-              </div>
-              <Link to="/settings/notifications/staff">
-                <Button variant="outline" size="sm">
-                  {__('Configure')}
-                  <ChevronRight className="ml-2 h-4 w-4" />
-                </Button>
-              </Link>
-            </div>
-          </CardContent>
-        </Card>
+          </div>
+          <div className="grid gap-6 md:grid-cols-2">
+            {/* Staff Notifications */}
+            <Card className="hover:shadow-md transition-shadow">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-primary/10 rounded-lg">
+                    <Bell className="h-6 w-6 text-primary" />
+                  </div>
+                  <div>
+                    <CardTitle>{__('Staff')}</CardTitle>
+                    <CardDescription>
+                      {__('Alerts for admins and staff members')}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-sm text-muted-foreground">
+                  {__('Get notified about orders, low stock, new customers, and more. Configure email and push notifications for your team.')}
+                </p>
+                <div className="flex items-center justify-between pt-2">
+                  <div className="text-sm text-muted-foreground">
+                    {__('Orders, Products, Customers')}
+                  </div>
+                  <Link to="/settings/notifications/staff">
+                    <Button variant="outline" size="sm">
+                      {__('Configure')}
+                      <ChevronRight className="ml-2 h-4 w-4" />
+                    </Button>
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
 
-        {/* Customer Notifications */}
-        <Card className="hover:shadow-md transition-shadow">
-          <CardHeader>
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-blue-500/10 rounded-lg">
-                <Users className="h-6 w-6 text-blue-500" />
-              </div>
-              <div>
-                <CardTitle>{__('Customer Notifications')}</CardTitle>
-                <CardDescription>
-                  {__('Transactional emails and updates for customers')}
-                </CardDescription>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <p className="text-sm text-muted-foreground">
-              {__('Manage order confirmations, shipping updates, account emails, and marketing messages sent to your customers.')}
-            </p>
-            <div className="flex items-center justify-between pt-2">
-              <div className="text-sm text-muted-foreground">
-                {__('Orders, Shipping, Account')}
-              </div>
-              <Link to="/settings/notifications/customer">
-                <Button variant="outline" size="sm">
-                  {__('Configure')}
-                  <ChevronRight className="ml-2 h-4 w-4" />
-                </Button>
-              </Link>
-            </div>
-          </CardContent>
-        </Card>
+            {/* Customer Notifications */}
+            <Card className="hover:shadow-md transition-shadow">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-blue-500/10 rounded-lg">
+                    <Users className="h-6 w-6 text-blue-500" />
+                  </div>
+                  <div>
+                    <CardTitle>{__('Customer')}</CardTitle>
+                    <CardDescription>
+                      {__('Transactional emails and updates for customers')}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-sm text-muted-foreground">
+                  {__('Manage order confirmations, shipping updates, account emails, and marketing messages sent to your customers.')}
+                </p>
+                <div className="flex items-center justify-between pt-2">
+                  <div className="text-sm text-muted-foreground">
+                    {__('Orders, Shipping, Account')}
+                  </div>
+                  <Link to="/settings/notifications/customer">
+                    <Button variant="outline" size="sm">
+                      {__('Configure')}
+                      <ChevronRight className="ml-2 h-4 w-4" />
+                    </Button>
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
 
-        {/* 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">
-                <Settings className="h-6 w-6 text-green-500" />
-              </div>
-              <div>
-                <CardTitle>{__('Channel Configuration')}</CardTitle>
-                <CardDescription>
-                  {__('Configure notification channels and settings')}
-                </CardDescription>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
+        {/* Channels Section */}
+        <div>
+          <div className="mb-4">
+            <h2 className="text-lg font-semibold">{__('Channels')}</h2>
             <p className="text-sm text-muted-foreground">
-              {__('Configure email, push notifications, WhatsApp, Telegram, and other notification channels. Set templates and connection settings.')}
+              {__('Configure notification delivery methods and settings')}
             </p>
-            <div className="flex items-center justify-between pt-2">
-              <div className="text-sm text-muted-foreground">
-                {__('Email, Push, WhatsApp, Telegram')}
-              </div>
-              <Link to="/settings/notifications/channels">
-                <Button variant="outline" size="sm">
-                  {__('Configure')}
-                  <ChevronRight className="ml-2 h-4 w-4" />
-                </Button>
-              </Link>
-            </div>
-          </CardContent>
-        </Card>
+          </div>
+          <div className="grid gap-6 md:grid-cols-2">
+            {/* 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">
+                    <Settings className="h-6 w-6 text-green-500" />
+                  </div>
+                  <div>
+                    <CardTitle>{__('Channel Configuration')}</CardTitle>
+                    <CardDescription>
+                      {__('Configure notification channels and settings')}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-sm text-muted-foreground">
+                  {__('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">
+                    {__('Email, Push, WhatsApp, Telegram')}
+                  </div>
+                  <Link to="/settings/notifications/channels">
+                    <Button variant="outline" size="sm">
+                      {__('Configure')}
+                      <ChevronRight className="ml-2 h-4 w-4" />
+                    </Button>
+                  </Link>
+                </div>
+              </CardContent>
+            </Card>
 
-        {/* Activity Log */}
-        <Card className="hover:shadow-md transition-shadow">
-          <CardHeader>
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-purple-500/10 rounded-lg">
-                <Activity className="h-6 w-6 text-purple-500" />
-              </div>
-              <div>
-                <CardTitle>{__('Activity Log')}</CardTitle>
-                <CardDescription>
-                  {__('View notification history and activities')}
-                </CardDescription>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <p className="text-sm text-muted-foreground">
-              {__('Track all notification activities, view delivery status, and monitor system events.')}
-            </p>
-            <div className="flex items-center justify-between pt-2">
-              <div className="text-sm text-muted-foreground">
-                {__('Coming soon')}
-              </div>
-              <Button variant="outline" size="sm" disabled>
-                {__('View Log')}
-                <ChevronRight className="ml-2 h-4 w-4" />
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
+            {/* Activity Log */}
+            <Card className="hover:shadow-md transition-shadow">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-purple-500/10 rounded-lg">
+                    <Activity className="h-6 w-6 text-purple-500" />
+                  </div>
+                  <div>
+                    <CardTitle>{__('Activity Log')}</CardTitle>
+                    <CardDescription>
+                      {__('View notification history and activities')}
+                    </CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <p className="text-sm text-muted-foreground">
+                  {__('Track all notification activities, view delivery status, and monitor system events.')}
+                </p>
+                <div className="flex items-center justify-between pt-2">
+                  <div className="text-sm text-muted-foreground">
+                    {__('Coming soon')}
+                  </div>
+                  <Button variant="outline" size="sm" disabled>
+                    {__('View Log')}
+                    <ChevronRight className="ml-2 h-4 w-4" />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
       </div>
     </SettingsLayout>
   );
diff --git a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx b/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
index f7e94db..629ff00 100644
--- a/admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx
+++ b/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);