Fix email template preview UX and add comprehensive shortcodes

1. Remove duplicate close button in preview modal
- Removed extra X button in DialogHeader since Dialog already has close functionality

2. Fix test email to include master layout
- Process shortcodes and render with master template before sending
- Import EmailTemplateRenderer and ShortcodeProcessor in sendTestEmail
- Send complete HTML email with header, footer, and styling applied

3. Add comprehensive table shortcodes for all notification types
- User info: {nama}, {email}
- Order info: {order_id}, {tanggal_pesanan}, {total}, {metode_pembayaran}, {status_pesanan}, {invoice_url}
- Product info: {produk}, {kategori_produk}, {harga_produk}, {deskripsi_produk}
- Access info: {link_akses}, {username_akses}, {password_akses}, {kadaluarsa_akses}
- Consulting: {tanggal_konsultasi}, {jam_konsultasi}, {durasi_konsultasi}, {jenis_konsultasi}, {topik_konsultasi}
- Event: {judul_event}, {tanggal_event}, {jam_event}, {link_event}, {lokasi_event}, {kapasitas_event}
- Bootcamp: {judul_bootcamp}, {progres_bootcamp}, {modul_selesai}, {modul_selanjutnya}, {link_progress}
- Company: {nama_perusahaan}, {website_perusahaan}, {email_support}, {telepon_support}
- Payment: {bank_tujuan}, {nomor_rekening}, {atas_nama}, {jumlah_pembayaran}, {batas_pembayaran}

4. Improve shortcode UI display
- Scrollable shortcode list with better organization
- Show available shortcodes summary
- Categorize shortcodes by type (User, Orders, Products, etc.)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/admin/EmailTemplatePreview.tsx

@@ -88,13 +88,6 @@ export function EmailTemplatePreview({
           <DialogDescription>
             Preview template email dengan master styling
           </DialogDescription>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={onClose}
-          >
-            <X className="w-4 h-4" />
-          </Button>
         </DialogHeader>
 
         <div className="space-y-4">
@@ -188,18 +181,51 @@ export function EmailTemplatePreview({
           {/* Shortcodes Used */}
           <div className="p-3 bg-blue-50 border border-blue-200 rounded">
             <h4 className="font-semibold text-sm mb-2">Shortcodes Used in This Template:</h4>
-            <div className="grid grid-cols-2 gap-2 text-sm">
-              {['{nama}', '{email}', '{order_id}', '{tanggal_pesanan}', '{total}', '{metode_pembayaran}',
-               '{produk}', '{link_akses}', '{tanggal_konsultasi}', '{jam_konsultasi}', '{link_meet}',
-               '{judul_event}', '{tanggal_event}', '{jam_event}', '{link_event}'].filter(shortcode =>
-                 (template.email_subject && template.email_subject.includes(shortcode)) ||
-                 (template.email_body_html && template.email_body_html.includes(shortcode))
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-2 text-sm max-h-32 overflow-y-auto">
+              {[
+                // User information
+                '{nama}', '{email}',
+                // Order information
+                '{order_id}', '{tanggal_pesanan}', '{total}', '{metode_pembayaran}', '{status_pesanan}', '{invoice_url}',
+                // Product information
+                '{produk}', '{kategori_produk}', '{harga_produk}', '{deskripsi_produk}',
+                // Access information
+                '{link_akses}', '{username_akses}', '{password_akses}', '{kadaluarsa_akses}',
+                // Consulting information
+                '{tanggal_konsultasi}', '{jam_konsultasi}', '{durasi_konsultasi}', '{link_meet}',
+                '{jenis_konsultasi}', '{topik_konsultasi}',
+                // Event information
+                '{judul_event}', '{tanggal_event}', '{jam_event}', '{link_event}', '{lokasi_event}', '{kapasitas_event}',
+                // Bootcamp/Course information
+                '{judul_bootcamp}', '{progres_bootcamp}', '{modul_selesai}', '{modul_selanjutnya}', '{link_progress}',
+                // Company information
+                '{nama_perusahaan}', '{website_perusahaan}', '{email_support}', '{telepon_support}',
+                // Payment information
+                '{bank_tujuan}', '{nomor_rekening}', '{atas_nama}', '{jumlah_pembayaran}', '{batas_pembayaran}'
+              ].filter(shortcode =>
+                (template.email_subject && template.email_subject.includes(shortcode)) ||
+                (template.email_body_html && template.email_body_html.includes(shortcode))
               ).map(shortcode => (
                 <code key={shortcode} className="bg-blue-100 px-2 py-1 rounded text-xs">
                   {shortcode}
                 </code>
               ))}
             </div>
+            {((template.email_subject && template.email_subject.includes('{')) ||
+              (template.email_body_html && template.email_body_html.includes('{'))) && (
+              <div className="mt-3 pt-3 border-t border-blue-200">
+                <p className="text-xs text-blue-700">
+                  <strong>All Available Shortcodes:</strong> User ({nama}, {email}), Orders ({order_id}, {tanggal_pesanan}, {total}, {metode_pembayaran}, {status_pesanan}, {invoice_url}),
+                  Products ({produk}, {kategori_produk}, {harga_produk}),
+                  Access ({link_akses}, {username_akses}, {password_akses}),
+                  Consulting ({tanggal_konsultasi}, {jam_konsultasi}, {link_meet}),
+                  Events ({judul_event}, {tanggal_event}, {link_event}),
+                  Bootcamp ({judul_bootcamp}, {progres_bootcamp}, {modul_selesai}),
+                  Payment ({bank_tujuan}, {nomor_rekening}, {jumlah_pembayaran}),
+                  Company ({nama_perusahaan}, {email_support})
+                </p>
+              </div>
+            )}
           </div>
 
           {/* Template Actions */}

src/components/admin/settings/NotifikasiTab.tsx

@@ -461,6 +461,18 @@ export function NotifikasiTab() {
         throw new Error('Konfigurasi email provider belum lengkap');
       }
 
+      // Import EmailTemplateRenderer and ShortcodeProcessor
+      const { EmailTemplateRenderer, ShortcodeProcessor } = await import('@/lib/email-templates/master-template');
+
+      // Process shortcodes and render with master template
+      const processedSubject = ShortcodeProcessor.process(template.email_subject || '');
+      const processedContent = ShortcodeProcessor.process(template.email_body_html || '');
+      const fullHtml = EmailTemplateRenderer.render({
+        subject: processedSubject,
+        content: processedContent,
+        brandName: 'ACCESS HUB'
+      });
+
       // Send test email using send-email-v2
       const { data, error } = await supabase.functions.invoke('send-email-v2', {
         body: {
@@ -468,8 +480,8 @@ export function NotifikasiTab() {
           api_token: emailData.api_token,
           from_name: emailData.from_name,
           from_email: emailData.from_email,
-          subject: template.email_subject,
-          html_body: template.email_body_html,
+          subject: processedSubject,
+          html_body: fullHtml,
         },
       });