Changes

src/components/admin/settings/BrandingTab.tsx

@@ -0,0 +1,239 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { toast } from '@/hooks/use-toast';
+import { Palette, Image, Mail } from 'lucide-react';
+
+interface PlatformSettings {
+  id?: string;
+  brand_name: string;
+  brand_tagline: string;
+  brand_logo_url: string;
+  brand_favicon_url: string;
+  brand_primary_color: string;
+  brand_accent_color: string;
+  brand_email_from_name: string;
+}
+
+const emptySettings: PlatformSettings = {
+  brand_name: '',
+  brand_tagline: '',
+  brand_logo_url: '',
+  brand_favicon_url: '',
+  brand_primary_color: '#111827',
+  brand_accent_color: '#0F766E',
+  brand_email_from_name: '',
+};
+
+export function BrandingTab() {
+  const [settings, setSettings] = useState<PlatformSettings>(emptySettings);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    fetchSettings();
+  }, []);
+
+  const fetchSettings = async () => {
+    const { data, error } = await supabase
+      .from('platform_settings')
+      .select('*')
+      .single();
+    
+    if (data) {
+      setSettings({
+        id: data.id,
+        brand_name: data.brand_name || '',
+        brand_tagline: data.brand_tagline || '',
+        brand_logo_url: data.brand_logo_url || '',
+        brand_favicon_url: data.brand_favicon_url || '',
+        brand_primary_color: data.brand_primary_color || '#111827',
+        brand_accent_color: data.brand_accent_color || '#0F766E',
+        brand_email_from_name: data.brand_email_from_name || '',
+      });
+    }
+    setLoading(false);
+  };
+
+  const saveSettings = async () => {
+    setSaving(true);
+    const payload = { ...settings };
+    delete payload.id;
+
+    if (settings.id) {
+      const { error } = await supabase
+        .from('platform_settings')
+        .update(payload)
+        .eq('id', settings.id);
+      
+      if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
+      else toast({ title: 'Berhasil', description: 'Pengaturan branding disimpan' });
+    } else {
+      const { data, error } = await supabase
+        .from('platform_settings')
+        .insert(payload)
+        .select()
+        .single();
+      
+      if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
+      else {
+        setSettings({ ...settings, id: data.id });
+        toast({ title: 'Berhasil', description: 'Pengaturan branding disimpan' });
+      }
+    }
+    setSaving(false);
+  };
+
+  if (loading) return <div className="animate-pulse h-64 bg-muted rounded-md" />;
+
+  return (
+    <div className="space-y-6">
+      <Card className="border-2 border-border">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Palette className="w-5 h-5" />
+            Identitas Brand
+          </CardTitle>
+          <CardDescription>
+            Konfigurasi nama, tagline, dan tampilan platform
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <Label>Nama Platform</Label>
+              <Input
+                value={settings.brand_name}
+                onChange={(e) => setSettings({ ...settings, brand_name: e.target.value })}
+                placeholder="LearnHub"
+                className="border-2"
+              />
+              <p className="text-sm text-muted-foreground">
+                Ditampilkan di sidebar, header, dan email
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Tagline</Label>
+              <Input
+                value={settings.brand_tagline}
+                onChange={(e) => setSettings({ ...settings, brand_tagline: e.target.value })}
+                placeholder="Belajar bareng, dari praktisi."
+                className="border-2"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <Label className="flex items-center gap-2">
+                <Image className="w-4 h-4" />
+                Logo Utama (URL)
+              </Label>
+              <Input
+                value={settings.brand_logo_url}
+                onChange={(e) => setSettings({ ...settings, brand_logo_url: e.target.value })}
+                placeholder="https://example.com/logo.png"
+                className="border-2"
+              />
+              {settings.brand_logo_url && (
+                <div className="mt-2 p-2 bg-muted rounded-md">
+                  <img 
+                    src={settings.brand_logo_url} 
+                    alt="Logo preview" 
+                    className="h-12 object-contain"
+                    onError={(e) => (e.currentTarget.style.display = 'none')}
+                  />
+                </div>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label className="flex items-center gap-2">
+                <Image className="w-4 h-4" />
+                Favicon (URL)
+              </Label>
+              <Input
+                value={settings.brand_favicon_url}
+                onChange={(e) => setSettings({ ...settings, brand_favicon_url: e.target.value })}
+                placeholder="https://example.com/favicon.ico"
+                className="border-2"
+              />
+              {settings.brand_favicon_url && (
+                <div className="mt-2 p-2 bg-muted rounded-md">
+                  <img 
+                    src={settings.brand_favicon_url} 
+                    alt="Favicon preview" 
+                    className="h-8 w-8 object-contain"
+                    onError={(e) => (e.currentTarget.style.display = 'none')}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div className="space-y-2">
+              <Label>Warna Utama (Hex)</Label>
+              <div className="flex gap-2">
+                <Input
+                  type="color"
+                  value={settings.brand_primary_color}
+                  onChange={(e) => setSettings({ ...settings, brand_primary_color: e.target.value })}
+                  className="w-16 h-10 p-1 border-2"
+                />
+                <Input
+                  value={settings.brand_primary_color}
+                  onChange={(e) => setSettings({ ...settings, brand_primary_color: e.target.value })}
+                  placeholder="#111827"
+                  className="border-2 flex-1"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>Warna Aksen / Tombol (Hex)</Label>
+              <div className="flex gap-2">
+                <Input
+                  type="color"
+                  value={settings.brand_accent_color}
+                  onChange={(e) => setSettings({ ...settings, brand_accent_color: e.target.value })}
+                  className="w-16 h-10 p-1 border-2"
+                />
+                <Input
+                  value={settings.brand_accent_color}
+                  onChange={(e) => setSettings({ ...settings, brand_accent_color: e.target.value })}
+                  placeholder="#0F766E"
+                  className="border-2 flex-1"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label className="flex items-center gap-2">
+              <Mail className="w-4 h-4" />
+              Nama Pengirim Default Email
+            </Label>
+            <Input
+              value={settings.brand_email_from_name}
+              onChange={(e) => setSettings({ ...settings, brand_email_from_name: e.target.value })}
+              placeholder="LearnHub Team"
+              className="border-2"
+            />
+            <p className="text-sm text-muted-foreground">
+              Digunakan jika SMTP from_name kosong
+            </p>
+          </div>
+
+          <Button onClick={saveSettings} disabled={saving} className="shadow-sm">
+            {saving ? 'Menyimpan...' : 'Simpan Pengaturan'}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/components/admin/settings/IntegrasiTab.tsx

@@ -0,0 +1,280 @@
+import { useEffect, useState } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { toast } from '@/hooks/use-toast';
+import { Puzzle, Webhook, MessageSquare, Calendar, Mail, Link as LinkIcon } from 'lucide-react';
+
+interface IntegrationSettings {
+  id?: string;
+  integration_n8n_base_url: string;
+  integration_whatsapp_number: string;
+  integration_whatsapp_url: string;
+  integration_google_calendar_id: string;
+  integration_email_provider: string;
+  integration_email_api_base_url: string;
+  integration_privacy_url: string;
+  integration_terms_url: string;
+}
+
+const emptySettings: IntegrationSettings = {
+  integration_n8n_base_url: '',
+  integration_whatsapp_number: '',
+  integration_whatsapp_url: '',
+  integration_google_calendar_id: '',
+  integration_email_provider: 'smtp',
+  integration_email_api_base_url: '',
+  integration_privacy_url: '/privacy',
+  integration_terms_url: '/terms',
+};
+
+export function IntegrasiTab() {
+  const [settings, setSettings] = useState<IntegrationSettings>(emptySettings);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    fetchSettings();
+  }, []);
+
+  const fetchSettings = async () => {
+    const { data, error } = await supabase
+      .from('platform_settings')
+      .select('*')
+      .single();
+    
+    if (data) {
+      setSettings({
+        id: data.id,
+        integration_n8n_base_url: data.integration_n8n_base_url || '',
+        integration_whatsapp_number: data.integration_whatsapp_number || '',
+        integration_whatsapp_url: data.integration_whatsapp_url || '',
+        integration_google_calendar_id: data.integration_google_calendar_id || '',
+        integration_email_provider: data.integration_email_provider || 'smtp',
+        integration_email_api_base_url: data.integration_email_api_base_url || '',
+        integration_privacy_url: data.integration_privacy_url || '/privacy',
+        integration_terms_url: data.integration_terms_url || '/terms',
+      });
+    }
+    setLoading(false);
+  };
+
+  const saveSettings = async () => {
+    setSaving(true);
+    const payload = { ...settings };
+    delete payload.id;
+
+    if (settings.id) {
+      const { error } = await supabase
+        .from('platform_settings')
+        .update(payload)
+        .eq('id', settings.id);
+      
+      if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
+      else toast({ title: 'Berhasil', description: 'Pengaturan integrasi disimpan' });
+    } else {
+      const { data, error } = await supabase
+        .from('platform_settings')
+        .insert(payload)
+        .select()
+        .single();
+      
+      if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
+      else {
+        setSettings({ ...settings, id: data.id });
+        toast({ title: 'Berhasil', description: 'Pengaturan integrasi disimpan' });
+      }
+    }
+    setSaving(false);
+  };
+
+  if (loading) return <div className="animate-pulse h-64 bg-muted rounded-md" />;
+
+  return (
+    <div className="space-y-6">
+      {/* n8n / Webhook */}
+      <Card className="border-2 border-border">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Webhook className="w-5 h-5" />
+            n8n / Webhook
+          </CardTitle>
+          <CardDescription>
+            Konfigurasi URL untuk integrasi otomatisasi
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label>Base URL n8n / Integrasi</Label>
+            <Input
+              value={settings.integration_n8n_base_url}
+              onChange={(e) => setSettings({ ...settings, integration_n8n_base_url: e.target.value })}
+              placeholder="https://automation.domain.com"
+              className="border-2"
+            />
+            <p className="text-sm text-muted-foreground">
+              Digunakan sebagai target default untuk webhook lanjutan. webhook_url per template tetap harus URL lengkap.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* WhatsApp */}
+      <Card className="border-2 border-border">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <MessageSquare className="w-5 h-5" />
+            WhatsApp
+          </CardTitle>
+          <CardDescription>
+            Nomor kontak untuk dukungan dan notifikasi
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>Nomor WhatsApp Dukungan</Label>
+              <Input
+                value={settings.integration_whatsapp_number}
+                onChange={(e) => setSettings({ ...settings, integration_whatsapp_number: e.target.value })}
+                placeholder="+62812xxxx"
+                className="border-2"
+              />
+              <p className="text-sm text-muted-foreground">
+                Ditampilkan di konfirmasi konsultasi
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label>URL WhatsApp Click-to-Chat (Opsional)</Label>
+              <Input
+                value={settings.integration_whatsapp_url}
+                onChange={(e) => setSettings({ ...settings, integration_whatsapp_url: e.target.value })}
+                placeholder="https://wa.me/62812..."
+                className="border-2"
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Google Calendar */}
+      <Card className="border-2 border-border">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Calendar className="w-5 h-5" />
+            Google Calendar
+          </CardTitle>
+          <CardDescription>
+            Untuk pembuatan event konsultasi otomatis
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label>ID Kalender Google untuk Konsultasi</Label>
+            <Input
+              value={settings.integration_google_calendar_id}
+              onChange={(e) => setSettings({ ...settings, integration_google_calendar_id: e.target.value })}
+              placeholder="your-calendar@gmail.com"
+              className="border-2"
+            />
+            <p className="text-sm text-muted-foreground">
+              Backend/n8n akan menggunakan ID ini untuk membuat event
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Email Provider */}
+      <Card className="border-2 border-border">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Mail className="w-5 h-5" />
+            Provider Email (Opsional)
+          </CardTitle>
+          <CardDescription>
+            Konfigurasi alternatif selain SMTP
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>Provider Email Eksternal</Label>
+              <Select
+                value={settings.integration_email_provider}
+                onValueChange={(value) => setSettings({ ...settings, integration_email_provider: value })}
+              >
+                <SelectTrigger className="border-2">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="smtp">SMTP (Default)</SelectItem>
+                  <SelectItem value="resend">Resend</SelectItem>
+                  <SelectItem value="mailgun">Mailgun</SelectItem>
+                  <SelectItem value="sendgrid">SendGrid</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label>API Base URL Provider Email</Label>
+              <Input
+                value={settings.integration_email_api_base_url}
+                onChange={(e) => setSettings({ ...settings, integration_email_api_base_url: e.target.value })}
+                placeholder="https://api.resend.com"
+                className="border-2"
+                disabled={settings.integration_email_provider === 'smtp'}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Public Links */}
+      <Card className="border-2 border-border">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <LinkIcon className="w-5 h-5" />
+            Link Publik
+          </CardTitle>
+          <CardDescription>
+            URL untuk halaman legal
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>URL Kebijakan Privasi</Label>
+              <Input
+                value={settings.integration_privacy_url}
+                onChange={(e) => setSettings({ ...settings, integration_privacy_url: e.target.value })}
+                placeholder="/privacy"
+                className="border-2"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>URL Syarat & Ketentuan</Label>
+              <Input
+                value={settings.integration_terms_url}
+                onChange={(e) => setSettings({ ...settings, integration_terms_url: e.target.value })}
+                placeholder="/terms"
+                className="border-2"
+              />
+            </div>
+          </div>
+          <p className="text-sm text-muted-foreground">
+            Default: halaman internal. Bisa diganti dengan URL eksternal.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Button onClick={saveSettings} disabled={saving} className="shadow-sm">
+        {saving ? 'Menyimpan...' : 'Simpan Pengaturan'}
+      </Button>
+    </div>
+  );
+}

src/components/admin/settings/NotifikasiTab.tsx

@@ -41,14 +41,49 @@ const SHORTCODES_HELP = {
   event: ['{judul_event}', '{tanggal_event}', '{jam_event}', '{link_event}'],
 };
 
-const DEFAULT_TEMPLATES = [
-  { key: 'payment_success', name: 'Pembayaran Berhasil' },
-  { key: 'access_granted', name: 'Akses Produk Diberikan' },
-  { key: 'order_created', name: 'Pesanan Dibuat' },
-  { key: 'payment_reminder', name: 'Pengingat Pembayaran' },
-  { key: 'consulting_scheduled', name: 'Konsultasi Terjadwal' },
-  { key: 'event_reminder', name: 'Reminder Webinar/Bootcamp' },
-  { key: 'bootcamp_progress', name: 'Progress Bootcamp' },
+const DEFAULT_TEMPLATES: { key: string; name: string; defaultSubject: string; defaultBody: string }[] = [
+  { 
+    key: 'payment_success', 
+    name: 'Pembayaran Berhasil',
+    defaultSubject: 'Pembayaran Berhasil - Order #{order_id}',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Terima kasih, pembayaran Anda sebesar <strong>{total}</strong> telah berhasil dikonfirmasi.</p><p><strong>Detail Pesanan:</strong></p><ul><li>Order ID: {order_id}</li><li>Tanggal: {tanggal_pesanan}</li><li>Metode: {metode_pembayaran}</li></ul><p>Produk: {produk}</p>'
+  },
+  { 
+    key: 'access_granted', 
+    name: 'Akses Produk Diberikan',
+    defaultSubject: 'Akses Anda Sudah Aktif - {produk}',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Selamat! Akses Anda ke <strong>{produk}</strong> sudah aktif.</p><p><a href="{link_akses}" style="display:inline-block;padding:12px 24px;background:#0066cc;color:white;text-decoration:none;border-radius:6px;">Akses Sekarang</a></p>'
+  },
+  { 
+    key: 'order_created', 
+    name: 'Pesanan Dibuat',
+    defaultSubject: 'Pesanan Anda #{order_id} Sedang Diproses',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Pesanan Anda dengan nomor <strong>{order_id}</strong> telah kami terima.</p><p>Total: <strong>{total}</strong></p><p>Silakan selesaikan pembayaran sebelum batas waktu.</p>'
+  },
+  { 
+    key: 'payment_reminder', 
+    name: 'Pengingat Pembayaran',
+    defaultSubject: 'Jangan Lupa Bayar - Order #{order_id}',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Pesanan Anda dengan nomor <strong>{order_id}</strong> menunggu pembayaran.</p><p>Total: <strong>{total}</strong></p><p>Segera selesaikan pembayaran agar tidak kedaluwarsa.</p>'
+  },
+  { 
+    key: 'consulting_scheduled', 
+    name: 'Konsultasi Terjadwal',
+    defaultSubject: 'Konsultasi Anda Sudah Terjadwal - {tanggal_konsultasi}',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Sesi konsultasi Anda telah dikonfirmasi:</p><ul><li>Tanggal: <strong>{tanggal_konsultasi}</strong></li><li>Jam: <strong>{jam_konsultasi}</strong></li></ul><p>Link meeting: <a href="{link_meet}">{link_meet}</a></p><p>Jika ada pertanyaan, hubungi kami.</p>'
+  },
+  { 
+    key: 'event_reminder', 
+    name: 'Reminder Webinar/Bootcamp',
+    defaultSubject: 'Reminder: {judul_event} Dimulai {tanggal_event}',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Jangan lupa, <strong>{judul_event}</strong> akan dimulai:</p><ul><li>Tanggal: {tanggal_event}</li><li>Jam: {jam_event}</li></ul><p><a href="{link_event}" style="display:inline-block;padding:12px 24px;background:#0066cc;color:white;text-decoration:none;border-radius:6px;">Bergabung</a></p>'
+  },
+  { 
+    key: 'bootcamp_progress', 
+    name: 'Progress Bootcamp',
+    defaultSubject: 'Update Progress Bootcamp Anda',
+    defaultBody: '<h2>Halo {nama}!</h2><p>Ini adalah update progress bootcamp Anda.</p><p>Terus semangat belajar!</p>'
+  },
 ];
 
 const emptySmtp: SmtpSettings = {
@@ -94,8 +129,8 @@ export function NotifikasiTab() {
       key: t.key,
       name: t.name,
       is_active: false,
-      email_subject: '',
-      email_body_html: '',
+      email_subject: t.defaultSubject,
+      email_body_html: t.defaultBody,
       webhook_url: '',
     }));
     const { data, error } = await supabase.from('notification_templates').insert(toInsert).select();
@@ -261,8 +296,8 @@ export function NotifikasiTab() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="text-sm text-muted-foreground p-3 bg-muted rounded-md">
-            <p className="font-medium mb-2">Shortcode yang tersedia:</p>
+          <div className="text-sm text-muted-foreground p-3 bg-muted rounded-md space-y-2">
+            <p className="font-medium">Shortcode yang tersedia:</p>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
               <div>
                 <span className="font-medium">Umum:</span> {SHORTCODES_HELP.common.join(', ')}
@@ -277,6 +312,11 @@ export function NotifikasiTab() {
                 <span className="font-medium">Event:</span> {SHORTCODES_HELP.event.join(', ')}
               </div>
             </div>
+            <p className="text-xs mt-2 p-2 bg-background rounded border">
+              <strong>Penting:</strong> Toggle "Aktifkan" hanya mengontrol pengiriman email. 
+              Jika <code>webhook_url</code> diisi, sistem tetap akan mengirim payload ke URL tersebut 
+              meskipun email dinonaktifkan.
+            </p>
           </div>
 
           {templates.map((template) => (