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/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,
         },
       });