Changes
This commit is contained in:
gpt-engineer-app[bot]
384
src/components/admin/settings/NotifikasiTab.tsx
Normal file
384
src/components/admin/settings/NotifikasiTab.tsx
Normal file
@@ -0,0 +1,384 @@
|
||||
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 { Switch } from '@/components/ui/switch';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { RichTextEditor } from '@/components/RichTextEditor';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import { Mail, AlertTriangle, Send, ChevronDown, ChevronUp, Webhook } from 'lucide-react';
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
||||
|
||||
interface SmtpSettings {
|
||||
id?: string;
|
||||
smtp_host: string;
|
||||
smtp_port: number;
|
||||
smtp_username: string;
|
||||
smtp_password: string;
|
||||
smtp_from_name: string;
|
||||
smtp_from_email: string;
|
||||
smtp_use_tls: boolean;
|
||||
}
|
||||
|
||||
interface NotificationTemplate {
|
||||
id: string;
|
||||
key: string;
|
||||
name: string;
|
||||
is_active: boolean;
|
||||
email_subject: string;
|
||||
email_body_html: string;
|
||||
webhook_url: string;
|
||||
last_payload_example: Record<string, unknown> | null;
|
||||
}
|
||||
|
||||
const SHORTCODES_HELP = {
|
||||
common: ['{nama}', '{email}', '{order_id}', '{tanggal_pesanan}', '{total}', '{metode_pembayaran}'],
|
||||
access: ['{produk}', '{link_akses}'],
|
||||
consulting: ['{tanggal_konsultasi}', '{jam_konsultasi}', '{link_meet}'],
|
||||
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 emptySmtp: SmtpSettings = {
|
||||
smtp_host: '',
|
||||
smtp_port: 587,
|
||||
smtp_username: '',
|
||||
smtp_password: '',
|
||||
smtp_from_name: '',
|
||||
smtp_from_email: '',
|
||||
smtp_use_tls: true,
|
||||
};
|
||||
|
||||
export function NotifikasiTab() {
|
||||
const [smtp, setSmtp] = useState<SmtpSettings>(emptySmtp);
|
||||
const [templates, setTemplates] = useState<NotificationTemplate[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [testEmail, setTestEmail] = useState('');
|
||||
const [expandedTemplates, setExpandedTemplates] = useState<Set<string>>(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const fetchData = async () => {
|
||||
// Fetch SMTP settings
|
||||
const { data: smtpData } = await supabase.from('notification_settings').select('*').single();
|
||||
if (smtpData) setSmtp(smtpData);
|
||||
|
||||
// Fetch templates
|
||||
const { data: templatesData } = await supabase.from('notification_templates').select('*').order('key');
|
||||
if (templatesData && templatesData.length > 0) {
|
||||
setTemplates(templatesData);
|
||||
} else {
|
||||
// Seed default templates if none exist
|
||||
await seedTemplates();
|
||||
}
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const seedTemplates = async () => {
|
||||
const toInsert = DEFAULT_TEMPLATES.map(t => ({
|
||||
key: t.key,
|
||||
name: t.name,
|
||||
is_active: false,
|
||||
email_subject: '',
|
||||
email_body_html: '',
|
||||
webhook_url: '',
|
||||
}));
|
||||
const { data, error } = await supabase.from('notification_templates').insert(toInsert).select();
|
||||
if (!error && data) setTemplates(data);
|
||||
};
|
||||
|
||||
const saveSmtp = async () => {
|
||||
setSaving(true);
|
||||
const payload = { ...smtp };
|
||||
delete payload.id;
|
||||
|
||||
if (smtp.id) {
|
||||
const { error } = await supabase.from('notification_settings').update(payload).eq('id', smtp.id);
|
||||
if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
|
||||
else toast({ title: 'Berhasil', description: 'Pengaturan SMTP disimpan' });
|
||||
} else {
|
||||
const { data, error } = await supabase.from('notification_settings').insert(payload).select().single();
|
||||
if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
|
||||
else { setSmtp(data); toast({ title: 'Berhasil', description: 'Pengaturan SMTP disimpan' }); }
|
||||
}
|
||||
setSaving(false);
|
||||
};
|
||||
|
||||
const sendTestEmail = async () => {
|
||||
if (!testEmail) return toast({ title: 'Error', description: 'Masukkan email tujuan', variant: 'destructive' });
|
||||
console.log('Test email would be sent to:', testEmail, 'with SMTP config:', smtp);
|
||||
toast({ title: 'Info', description: `Email uji coba akan dikirim ke ${testEmail} (fitur sedang dikembangkan)` });
|
||||
};
|
||||
|
||||
const updateTemplate = async (template: NotificationTemplate) => {
|
||||
const { id, key, name, ...updates } = template;
|
||||
const { error } = await supabase.from('notification_templates').update(updates).eq('id', id);
|
||||
if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
|
||||
else toast({ title: 'Berhasil', description: `Template "${name}" disimpan` });
|
||||
};
|
||||
|
||||
const toggleExpand = (id: string) => {
|
||||
setExpandedTemplates(prev => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const isSmtpConfigured = smtp.smtp_host && smtp.smtp_username && smtp.smtp_password;
|
||||
|
||||
if (loading) return <div className="animate-pulse h-64 bg-muted rounded-md" />;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* SMTP Settings */}
|
||||
<Card className="border-2 border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Mail className="w-5 h-5" />
|
||||
Pengaturan SMTP
|
||||
</CardTitle>
|
||||
<CardDescription>Konfigurasi server email untuk pengiriman notifikasi</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{!isSmtpConfigured && (
|
||||
<Alert variant="destructive" className="border-2">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
<AlertDescription>
|
||||
Konfigurasi SMTP belum lengkap. Email tidak akan terkirim.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>SMTP Host</Label>
|
||||
<Input
|
||||
value={smtp.smtp_host}
|
||||
onChange={(e) => setSmtp({ ...smtp, smtp_host: e.target.value })}
|
||||
placeholder="smtp.example.com"
|
||||
className="border-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>SMTP Port</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={smtp.smtp_port}
|
||||
onChange={(e) => setSmtp({ ...smtp, smtp_port: parseInt(e.target.value) || 587 })}
|
||||
className="border-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Username</Label>
|
||||
<Input
|
||||
value={smtp.smtp_username}
|
||||
onChange={(e) => setSmtp({ ...smtp, smtp_username: e.target.value })}
|
||||
className="border-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Password</Label>
|
||||
<Input
|
||||
type="password"
|
||||
value={smtp.smtp_password}
|
||||
onChange={(e) => setSmtp({ ...smtp, smtp_password: e.target.value })}
|
||||
className="border-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Nama Pengirim</Label>
|
||||
<Input
|
||||
value={smtp.smtp_from_name}
|
||||
onChange={(e) => setSmtp({ ...smtp, smtp_from_name: e.target.value })}
|
||||
placeholder="Nama Bisnis"
|
||||
className="border-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Email Pengirim</Label>
|
||||
<Input
|
||||
type="email"
|
||||
value={smtp.smtp_from_email}
|
||||
onChange={(e) => setSmtp({ ...smtp, smtp_from_email: e.target.value })}
|
||||
placeholder="noreply@example.com"
|
||||
className="border-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
checked={smtp.smtp_use_tls}
|
||||
onCheckedChange={(checked) => setSmtp({ ...smtp, smtp_use_tls: checked })}
|
||||
/>
|
||||
<Label>Gunakan TLS/SSL</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 pt-4 border-t">
|
||||
<Button onClick={saveSmtp} disabled={saving}>
|
||||
{saving ? 'Menyimpan...' : 'Simpan'}
|
||||
</Button>
|
||||
<div className="flex gap-2 flex-1">
|
||||
<Input
|
||||
type="email"
|
||||
value={testEmail}
|
||||
onChange={(e) => setTestEmail(e.target.value)}
|
||||
placeholder="Email uji coba"
|
||||
className="border-2 max-w-xs"
|
||||
/>
|
||||
<Button variant="outline" onClick={sendTestEmail} className="border-2">
|
||||
<Send className="w-4 h-4 mr-2" />
|
||||
Kirim Email Uji Coba
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Notification Templates */}
|
||||
<Card className="border-2 border-border">
|
||||
<CardHeader>
|
||||
<CardTitle>Template Notifikasi</CardTitle>
|
||||
<CardDescription>
|
||||
Atur template email untuk berbagai jenis notifikasi
|
||||
</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="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<div>
|
||||
<span className="font-medium">Umum:</span> {SHORTCODES_HELP.common.join(', ')}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Akses:</span> {SHORTCODES_HELP.access.join(', ')}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Konsultasi:</span> {SHORTCODES_HELP.consulting.join(', ')}
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-medium">Event:</span> {SHORTCODES_HELP.event.join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{templates.map((template) => (
|
||||
<Collapsible
|
||||
key={template.id}
|
||||
open={expandedTemplates.has(template.id)}
|
||||
onOpenChange={() => toggleExpand(template.id)}
|
||||
>
|
||||
<div className="border-2 border-border rounded-lg">
|
||||
<CollapsibleTrigger asChild>
|
||||
<div className="flex items-center justify-between p-4 cursor-pointer hover:bg-muted/50">
|
||||
<div className="flex items-center gap-4">
|
||||
<Switch
|
||||
checked={template.is_active}
|
||||
onCheckedChange={(checked) => {
|
||||
const updated = { ...template, is_active: checked };
|
||||
setTemplates(templates.map(t => t.id === template.id ? updated : t));
|
||||
updateTemplate(updated);
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
/>
|
||||
<div>
|
||||
<p className="font-medium">{template.name}</p>
|
||||
<p className="text-sm text-muted-foreground">{template.key}</p>
|
||||
</div>
|
||||
</div>
|
||||
{expandedTemplates.has(template.id) ? (
|
||||
<ChevronUp className="w-5 h-5" />
|
||||
) : (
|
||||
<ChevronDown className="w-5 h-5" />
|
||||
)}
|
||||
</div>
|
||||
</CollapsibleTrigger>
|
||||
|
||||
<CollapsibleContent>
|
||||
<div className="p-4 pt-0 space-y-4 border-t">
|
||||
<div className="space-y-2">
|
||||
<Label>Subjek Email</Label>
|
||||
<Input
|
||||
value={template.email_subject}
|
||||
onChange={(e) => {
|
||||
setTemplates(templates.map(t =>
|
||||
t.id === template.id ? { ...t, email_subject: e.target.value } : t
|
||||
));
|
||||
}}
|
||||
placeholder="Subjek email..."
|
||||
className="border-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Isi Email (HTML)</Label>
|
||||
<RichTextEditor
|
||||
content={template.email_body_html}
|
||||
onChange={(html) => {
|
||||
setTemplates(templates.map(t =>
|
||||
t.id === template.id ? { ...t, email_body_html: html } : t
|
||||
));
|
||||
}}
|
||||
placeholder="Tulis isi email..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="flex items-center gap-2">
|
||||
<Webhook className="w-4 h-4" />
|
||||
Webhook URL (opsional, untuk n8n/Zapier)
|
||||
</Label>
|
||||
<Input
|
||||
value={template.webhook_url}
|
||||
onChange={(e) => {
|
||||
setTemplates(templates.map(t =>
|
||||
t.id === template.id ? { ...t, webhook_url: e.target.value } : t
|
||||
));
|
||||
}}
|
||||
placeholder="https://n8n.example.com/webhook/..."
|
||||
className="border-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{template.last_payload_example && (
|
||||
<div className="space-y-2">
|
||||
<Label>Contoh Payload Terakhir</Label>
|
||||
<pre className="p-3 bg-muted rounded-md text-xs overflow-x-auto">
|
||||
{JSON.stringify(template.last_payload_example, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={() => updateTemplate(template)}
|
||||
className="shadow-sm"
|
||||
>
|
||||
Simpan Template
|
||||
</Button>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</div>
|
||||
</Collapsible>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user