Changes

src/components/admin/settings/KonsultasiTab.tsx

@@ -0,0 +1,170 @@
+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 { toast } from '@/hooks/use-toast';
+import { Video, Calendar, Clock } from 'lucide-react';
+import { formatIDR } from '@/lib/format';
+
+interface ConsultingSettings {
+  id?: string;
+  is_consulting_enabled: boolean;
+  consulting_block_price: number;
+  consulting_block_duration_minutes: number;
+  consulting_categories: string;
+}
+
+const emptySettings: ConsultingSettings = {
+  is_consulting_enabled: false,
+  consulting_block_price: 250000,
+  consulting_block_duration_minutes: 30,
+  consulting_categories: 'Teknis, Strategi Bisnis, Karier, Review Produk',
+};
+
+export function KonsultasiTab() {
+  const [settings, setSettings] = useState<ConsultingSettings>(emptySettings);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    fetchSettings();
+  }, []);
+
+  const fetchSettings = async () => {
+    const { data, error } = await supabase.from('consulting_settings').select('*').single();
+    if (data) setSettings(data);
+    setLoading(false);
+  };
+
+  const saveSettings = async () => {
+    setSaving(true);
+    const payload = { ...settings };
+    delete payload.id;
+
+    if (settings.id) {
+      const { error } = await supabase.from('consulting_settings').update(payload).eq('id', settings.id);
+      if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
+      else toast({ title: 'Berhasil', description: 'Pengaturan konsultasi disimpan' });
+    } else {
+      const { data, error } = await supabase.from('consulting_settings').insert(payload).select().single();
+      if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
+      else { setSettings(data); toast({ title: 'Berhasil', description: 'Pengaturan konsultasi disimpan' }); }
+    }
+    setSaving(false);
+  };
+
+  const categories = settings.consulting_categories.split(',').map(c => c.trim()).filter(Boolean);
+
+  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">
+            <Video className="w-5 h-5" />
+            Pengaturan Konsultasi
+          </CardTitle>
+          <CardDescription>
+            Konfigurasi layanan konsultasi 1-on-1
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center justify-between p-4 bg-muted rounded-lg">
+            <div>
+              <p className="font-medium">Aktifkan Layanan Konsultasi</p>
+              <p className="text-sm text-muted-foreground">
+                Tampilkan konsultasi di halaman produk dan dashboard member
+              </p>
+            </div>
+            <Switch
+              checked={settings.is_consulting_enabled}
+              onCheckedChange={(checked) => setSettings({ ...settings, is_consulting_enabled: checked })}
+            />
+          </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">
+                <Calendar className="w-4 h-4" />
+                Harga per Blok (IDR)
+              </Label>
+              <Input
+                type="number"
+                value={settings.consulting_block_price}
+                onChange={(e) => setSettings({ ...settings, consulting_block_price: parseInt(e.target.value) || 0 })}
+                className="border-2"
+              />
+              <p className="text-sm text-muted-foreground">
+                Harga saat ini: {formatIDR(settings.consulting_block_price)}
+              </p>
+            </div>
+
+            <div className="space-y-2">
+              <Label className="flex items-center gap-2">
+                <Clock className="w-4 h-4" />
+                Durasi Blok (menit)
+              </Label>
+              <Input
+                type="number"
+                min={15}
+                step={15}
+                value={settings.consulting_block_duration_minutes}
+                onChange={(e) => setSettings({ ...settings, consulting_block_duration_minutes: Math.max(15, parseInt(e.target.value) || 30) })}
+                className="border-2"
+              />
+              <p className="text-sm text-muted-foreground">
+                Minimum 15 menit, kelipatan 15 disarankan
+              </p>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label>Kategori Konsultasi (pisahkan dengan koma)</Label>
+            <Textarea
+              value={settings.consulting_categories}
+              onChange={(e) => setSettings({ ...settings, consulting_categories: e.target.value })}
+              placeholder="Teknis, Strategi Bisnis, Karier"
+              className="border-2"
+            />
+            <p className="text-sm text-muted-foreground">
+              Contoh: Teknis, Strategi Bisnis, Karier, Review Produk
+            </p>
+          </div>
+
+          {categories.length > 0 && (
+            <div className="space-y-2">
+              <Label>Preview Kategori</Label>
+              <div className="flex flex-wrap gap-2">
+                {categories.map((cat, i) => (
+                  <span
+                    key={i}
+                    className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm"
+                  >
+                    {cat}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <div className="p-4 bg-muted rounded-lg">
+            <p className="text-sm text-muted-foreground">
+              <strong>Cara kerja:</strong> 1 blok = 1 slot waktu konsultasi ({settings.consulting_block_duration_minutes} menit). 
+              Jika user memilih 2 blok, durasi total = {settings.consulting_block_duration_minutes * 2} menit, 
+              harga = {formatIDR(settings.consulting_block_price * 2)}.
+            </p>
+          </div>
+
+          <Button onClick={saveSettings} disabled={saving} className="shadow-sm">
+            {saving ? 'Menyimpan...' : 'Simpan Pengaturan'}
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/components/admin/settings/NotifikasiTab.tsx

@@ -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>
+  );
+}

src/components/admin/settings/WorkhoursTab.tsx

@@ -0,0 +1,166 @@
+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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { toast } from '@/hooks/use-toast';
+import { Plus, Pencil, Trash2, Clock } from 'lucide-react';
+
+interface Workhour {
+  id: string;
+  weekday: number;
+  start_time: string;
+  end_time: string;
+}
+
+const WEEKDAYS = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+const emptyWorkhour = { weekday: 1, start_time: '09:00', end_time: '17:00' };
+
+export function WorkhoursTab() {
+  const [workhours, setWorkhours] = useState<Workhour[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [editingWorkhour, setEditingWorkhour] = useState<Workhour | null>(null);
+  const [form, setForm] = useState(emptyWorkhour);
+
+  useEffect(() => {
+    fetchWorkhours();
+  }, []);
+
+  const fetchWorkhours = async () => {
+    const { data, error } = await supabase.from('workhours').select('*').order('weekday');
+    if (!error && data) setWorkhours(data);
+    setLoading(false);
+  };
+
+  const handleNew = () => {
+    setEditingWorkhour(null);
+    setForm(emptyWorkhour);
+    setDialogOpen(true);
+  };
+
+  const handleEdit = (wh: Workhour) => {
+    setEditingWorkhour(wh);
+    setForm({ weekday: wh.weekday, start_time: wh.start_time, end_time: wh.end_time });
+    setDialogOpen(true);
+  };
+
+  const handleSave = async () => {
+    const workhourData = {
+      weekday: form.weekday,
+      start_time: form.start_time,
+      end_time: form.end_time,
+    };
+
+    if (editingWorkhour) {
+      const { error } = await supabase.from('workhours').update(workhourData).eq('id', editingWorkhour.id);
+      if (error) toast({ title: 'Error', description: 'Gagal mengupdate', variant: 'destructive' });
+      else { toast({ title: 'Berhasil', description: 'Jam kerja diupdate' }); setDialogOpen(false); fetchWorkhours(); }
+    } else {
+      const { error } = await supabase.from('workhours').insert(workhourData);
+      if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
+      else { toast({ title: 'Berhasil', description: 'Jam kerja ditambahkan' }); setDialogOpen(false); fetchWorkhours(); }
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Hapus jam kerja ini?')) return;
+    const { error } = await supabase.from('workhours').delete().eq('id', id);
+    if (error) toast({ title: 'Error', description: 'Gagal menghapus', variant: 'destructive' });
+    else { toast({ title: 'Berhasil', description: 'Jam kerja dihapus' }); fetchWorkhours(); }
+  };
+
+  if (loading) return <div className="animate-pulse h-64 bg-muted rounded-md" />;
+
+  return (
+    <>
+      <Card className="border-2 border-border">
+        <CardHeader className="flex flex-row items-center justify-between">
+          <div>
+            <CardTitle className="flex items-center gap-2">
+              <Clock className="w-5 h-5" />
+              Jam Kerja
+            </CardTitle>
+            <CardDescription>Atur jadwal ketersediaan untuk konsultasi</CardDescription>
+          </div>
+          <Button onClick={handleNew} className="shadow-sm">
+            <Plus className="w-4 h-4 mr-2" />
+            Tambah Jam Kerja
+          </Button>
+        </CardHeader>
+        <CardContent className="p-0">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Hari</TableHead>
+                <TableHead>Mulai</TableHead>
+                <TableHead>Selesai</TableHead>
+                <TableHead className="text-right">Aksi</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {workhours.map((wh) => (
+                <TableRow key={wh.id}>
+                  <TableCell className="font-medium">{WEEKDAYS[wh.weekday]}</TableCell>
+                  <TableCell>{wh.start_time}</TableCell>
+                  <TableCell>{wh.end_time}</TableCell>
+                  <TableCell className="text-right">
+                    <Button variant="ghost" size="sm" onClick={() => handleEdit(wh)}>
+                      <Pencil className="w-4 h-4" />
+                    </Button>
+                    <Button variant="ghost" size="sm" onClick={() => handleDelete(wh.id)}>
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {workhours.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
+                    Belum ada jam kerja
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-w-md border-2 border-border">
+          <DialogHeader>
+            <DialogTitle>{editingWorkhour ? 'Edit Jam Kerja' : 'Tambah Jam Kerja'}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label>Hari</Label>
+              <Select value={form.weekday.toString()} onValueChange={(v) => setForm({ ...form, weekday: parseInt(v) })}>
+                <SelectTrigger className="border-2"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {WEEKDAYS.map((day, i) => (
+                    <SelectItem key={i} value={i.toString()}>{day}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label>Mulai</Label>
+                <Input type="time" value={form.start_time} onChange={(e) => setForm({ ...form, start_time: e.target.value })} className="border-2" />
+              </div>
+              <div className="space-y-2">
+                <Label>Selesai</Label>
+                <Input type="time" value={form.end_time} onChange={(e) => setForm({ ...form, end_time: e.target.value })} className="border-2" />
+              </div>
+            </div>
+            <Button onClick={handleSave} className="w-full shadow-sm">Simpan</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

src/pages/ConsultingBooking.tsx

@@ -0,0 +1,424 @@
+import { useEffect, useState, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/hooks/useAuth';
+import { useCart } from '@/contexts/CartContext';
+import { AppLayout } from '@/components/AppLayout';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Calendar } from '@/components/ui/calendar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { toast } from '@/hooks/use-toast';
+import { formatIDR } from '@/lib/format';
+import { Video, Clock, Calendar as CalendarIcon, MessageSquare } from 'lucide-react';
+import { format, addMinutes, parse, isAfter, isBefore, startOfDay, addDays } from 'date-fns';
+import { id } from 'date-fns/locale';
+
+interface ConsultingSettings {
+  id: string;
+  is_consulting_enabled: boolean;
+  consulting_block_price: number;
+  consulting_block_duration_minutes: number;
+  consulting_categories: string;
+}
+
+interface Workhour {
+  id: string;
+  weekday: number;
+  start_time: string;
+  end_time: string;
+}
+
+interface ConfirmedSlot {
+  date: string;
+  start_time: string;
+  end_time: string;
+}
+
+interface TimeSlot {
+  start: string;
+  end: string;
+  available: boolean;
+}
+
+export default function ConsultingBooking() {
+  const { user, loading: authLoading } = useAuth();
+  const navigate = useNavigate();
+  const { addItem } = useCart();
+
+  const [settings, setSettings] = useState<ConsultingSettings | null>(null);
+  const [workhours, setWorkhours] = useState<Workhour[]>([]);
+  const [confirmedSlots, setConfirmedSlots] = useState<ConfirmedSlot[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(addDays(new Date(), 1));
+  const [selectedSlots, setSelectedSlots] = useState<string[]>([]);
+  const [selectedCategory, setSelectedCategory] = useState('');
+  const [notes, setNotes] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  useEffect(() => {
+    if (selectedDate) {
+      fetchConfirmedSlots(selectedDate);
+    }
+  }, [selectedDate]);
+
+  const fetchData = async () => {
+    const [settingsRes, workhoursRes] = await Promise.all([
+      supabase.from('consulting_settings').select('*').single(),
+      supabase.from('workhours').select('*').order('weekday'),
+    ]);
+
+    if (settingsRes.data) setSettings(settingsRes.data);
+    if (workhoursRes.data) setWorkhours(workhoursRes.data);
+    setLoading(false);
+  };
+
+  const fetchConfirmedSlots = async (date: Date) => {
+    const dateStr = format(date, 'yyyy-MM-dd');
+    const { data } = await supabase
+      .from('consulting_slots')
+      .select('date, start_time, end_time')
+      .eq('date', dateStr)
+      .in('status', ['pending_payment', 'confirmed']);
+    
+    if (data) setConfirmedSlots(data);
+  };
+
+  const categories = useMemo(() => {
+    if (!settings?.consulting_categories) return [];
+    return settings.consulting_categories.split(',').map(c => c.trim()).filter(Boolean);
+  }, [settings?.consulting_categories]);
+
+  const availableSlots = useMemo((): TimeSlot[] => {
+    if (!selectedDate || !settings) return [];
+
+    const dayOfWeek = selectedDate.getDay();
+    const dayWorkhours = workhours.filter(w => w.weekday === dayOfWeek);
+
+    if (dayWorkhours.length === 0) return [];
+
+    const slots: TimeSlot[] = [];
+    const duration = settings.consulting_block_duration_minutes;
+
+    for (const wh of dayWorkhours) {
+      let current = parse(wh.start_time, 'HH:mm:ss', selectedDate);
+      const end = parse(wh.end_time, 'HH:mm:ss', selectedDate);
+
+      while (isBefore(addMinutes(current, duration), end) || format(addMinutes(current, duration), 'HH:mm') === format(end, 'HH:mm')) {
+        const slotStart = format(current, 'HH:mm');
+        const slotEnd = format(addMinutes(current, duration), 'HH:mm');
+
+        // Check if slot conflicts with confirmed/pending slots
+        const isConflict = confirmedSlots.some(cs => {
+          const csStart = cs.start_time.substring(0, 5);
+          const csEnd = cs.end_time.substring(0, 5);
+          return !(slotEnd <= csStart || slotStart >= csEnd);
+        });
+
+        slots.push({
+          start: slotStart,
+          end: slotEnd,
+          available: !isConflict,
+        });
+
+        current = addMinutes(current, duration);
+      }
+    }
+
+    return slots;
+  }, [selectedDate, workhours, confirmedSlots, settings]);
+
+  const toggleSlot = (slotStart: string) => {
+    setSelectedSlots(prev =>
+      prev.includes(slotStart)
+        ? prev.filter(s => s !== slotStart)
+        : [...prev, slotStart]
+    );
+  };
+
+  const totalBlocks = selectedSlots.length;
+  const totalPrice = totalBlocks * (settings?.consulting_block_price || 0);
+  const totalDuration = totalBlocks * (settings?.consulting_block_duration_minutes || 30);
+
+  const handleBookNow = async () => {
+    if (!user) {
+      toast({ title: 'Login diperlukan', description: 'Silakan login untuk melanjutkan', variant: 'destructive' });
+      navigate('/auth');
+      return;
+    }
+
+    if (selectedSlots.length === 0) {
+      toast({ title: 'Pilih slot', description: 'Pilih minimal satu slot waktu', variant: 'destructive' });
+      return;
+    }
+
+    if (!selectedCategory) {
+      toast({ title: 'Pilih kategori', description: 'Pilih kategori konsultasi', variant: 'destructive' });
+      return;
+    }
+
+    if (!selectedDate || !settings) return;
+
+    setSubmitting(true);
+
+    try {
+      // Create order
+      const { data: order, error: orderError } = await supabase
+        .from('orders')
+        .insert({
+          user_id: user.id,
+          total_amount: totalPrice,
+          status: 'pending',
+          payment_status: 'pending',
+          payment_provider: 'pakasir',
+        })
+        .select()
+        .single();
+
+      if (orderError) throw orderError;
+
+      // Create consulting slots
+      const slotsToInsert = selectedSlots.map(slotStart => {
+        const slotEnd = format(
+          addMinutes(parse(slotStart, 'HH:mm', new Date()), settings.consulting_block_duration_minutes),
+          'HH:mm'
+        );
+        return {
+          user_id: user.id,
+          order_id: order.id,
+          date: format(selectedDate, 'yyyy-MM-dd'),
+          start_time: slotStart + ':00',
+          end_time: slotEnd + ':00',
+          status: 'pending_payment',
+          topic_category: selectedCategory,
+          notes: notes,
+        };
+      });
+
+      const { error: slotsError } = await supabase.from('consulting_slots').insert(slotsToInsert);
+      if (slotsError) throw slotsError;
+
+      // Add to cart for Pakasir checkout
+      addItem({
+        id: `consulting-${order.id}`,
+        title: `Konsultasi 1-on-1 (${totalBlocks} blok)`,
+        price: totalPrice,
+        sale_price: null,
+        type: 'consulting',
+      });
+
+      toast({ title: 'Berhasil', description: 'Silakan lanjutkan ke pembayaran' });
+      navigate('/checkout');
+    } catch (error: any) {
+      toast({ title: 'Error', description: error.message, variant: 'destructive' });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (loading || authLoading) {
+    return (
+      <AppLayout>
+        <div className="container mx-auto px-4 py-8">
+          <Skeleton className="h-10 w-1/3 mb-8" />
+          <Skeleton className="h-96 w-full" />
+        </div>
+      </AppLayout>
+    );
+  }
+
+  if (!settings?.is_consulting_enabled) {
+    return (
+      <AppLayout>
+        <div className="container mx-auto px-4 py-8 text-center">
+          <h1 className="text-2xl font-bold mb-4">Layanan Konsultasi Tidak Tersedia</h1>
+          <p className="text-muted-foreground">Layanan konsultasi sedang tidak aktif.</p>
+          <Button onClick={() => navigate('/products')} className="mt-4">
+            Lihat Produk Lain
+          </Button>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  return (
+    <AppLayout>
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-4xl font-bold mb-2 flex items-center gap-3">
+          <Video className="w-10 h-10" />
+          Konsultasi 1-on-1
+        </h1>
+        <p className="text-muted-foreground mb-8">
+          Pilih waktu dan kategori untuk sesi konsultasi pribadi
+        </p>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Calendar & Slots */}
+          <div className="lg:col-span-2 space-y-6">
+            <Card className="border-2 border-border">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <CalendarIcon className="w-5 h-5" />
+                  Pilih Tanggal
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Calendar
+                  mode="single"
+                  selected={selectedDate}
+                  onSelect={setSelectedDate}
+                  disabled={(date) => date < startOfDay(new Date()) || date.getDay() === 0}
+                  locale={id}
+                  className="rounded-md border-2"
+                />
+              </CardContent>
+            </Card>
+
+            {selectedDate && (
+              <Card className="border-2 border-border">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Clock className="w-5 h-5" />
+                    Slot Waktu - {format(selectedDate, 'EEEE, d MMMM yyyy', { locale: id })}
+                  </CardTitle>
+                  <CardDescription>
+                    Klik slot untuk memilih. {settings.consulting_block_duration_minutes} menit per blok.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  {availableSlots.length === 0 ? (
+                    <p className="text-muted-foreground text-center py-8">
+                      Tidak ada slot tersedia pada hari ini
+                    </p>
+                  ) : (
+                    <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-2">
+                      {availableSlots.map((slot) => (
+                        <Button
+                          key={slot.start}
+                          variant={selectedSlots.includes(slot.start) ? 'default' : 'outline'}
+                          disabled={!slot.available}
+                          onClick={() => slot.available && toggleSlot(slot.start)}
+                          className="border-2"
+                        >
+                          {slot.start}
+                        </Button>
+                      ))}
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            )}
+
+            <Card className="border-2 border-border">
+              <CardHeader>
+                <CardTitle>Kategori Konsultasi</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex flex-wrap gap-2">
+                  {categories.map((cat) => (
+                    <Button
+                      key={cat}
+                      variant={selectedCategory === cat ? 'default' : 'outline'}
+                      onClick={() => setSelectedCategory(cat)}
+                      className="border-2"
+                    >
+                      {cat}
+                    </Button>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="border-2 border-border">
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <MessageSquare className="w-5 h-5" />
+                  Catatan (Opsional)
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Textarea
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  placeholder="Jelaskan topik atau pertanyaan yang ingin dibahas..."
+                  className="border-2 min-h-[100px]"
+                />
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Summary */}
+          <div className="lg:col-span-1">
+            <Card className="border-2 border-border sticky top-4">
+              <CardHeader>
+                <CardTitle>Ringkasan Booking</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Tanggal</span>
+                  <span className="font-medium">
+                    {selectedDate ? format(selectedDate, 'd MMM yyyy', { locale: id }) : '-'}
+                  </span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Jumlah Blok</span>
+                  <span className="font-medium">{totalBlocks} blok</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Total Durasi</span>
+                  <span className="font-medium">{totalDuration} menit</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Kategori</span>
+                  <span className="font-medium">{selectedCategory || '-'}</span>
+                </div>
+
+                {selectedSlots.length > 0 && (
+                  <div className="pt-4 border-t">
+                    <p className="text-sm text-muted-foreground mb-2">Slot dipilih:</p>
+                    <div className="flex flex-wrap gap-1">
+                      {selectedSlots.sort().map((slot) => (
+                        <span key={slot} className="px-2 py-1 bg-primary/10 text-primary rounded text-sm">
+                          {slot}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                <div className="pt-4 border-t">
+                  <div className="flex justify-between text-lg font-bold">
+                    <span>Total</span>
+                    <span>{formatIDR(totalPrice)}</span>
+                  </div>
+                  <p className="text-xs text-muted-foreground mt-1">
+                    {formatIDR(settings.consulting_block_price)} × {totalBlocks} blok
+                  </p>
+                </div>
+
+                <Button
+                  onClick={handleBookNow}
+                  disabled={submitting || selectedSlots.length === 0 || !selectedCategory}
+                  className="w-full shadow-sm"
+                >
+                  {submitting ? 'Memproses...' : 'Booking Sekarang'}
+                </Button>
+
+                <p className="text-xs text-muted-foreground text-center">
+                  Anda akan diarahkan ke halaman pembayaran
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}

src/pages/admin/AdminConsulting.tsx

@@ -0,0 +1,302 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { supabase } from '@/integrations/supabase/client';
+import { useAuth } from '@/hooks/useAuth';
+import { AppLayout } from '@/components/AppLayout';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
+import { toast } from '@/hooks/use-toast';
+import { formatIDR } from '@/lib/format';
+import { Video, Calendar, Clock, User, Link as LinkIcon, ExternalLink } from 'lucide-react';
+import { format, parseISO } from 'date-fns';
+import { id } from 'date-fns/locale';
+
+interface ConsultingSlot {
+  id: string;
+  user_id: string;
+  order_id: string;
+  date: string;
+  start_time: string;
+  end_time: string;
+  status: string;
+  topic_category: string;
+  notes: string;
+  meet_link: string | null;
+  created_at: string;
+  profiles?: {
+    full_name: string;
+    email: string;
+  };
+}
+
+const statusLabels: Record<string, { label: string; variant: 'default' | 'secondary' | 'destructive' | 'outline' }> = {
+  pending_payment: { label: 'Menunggu Pembayaran', variant: 'secondary' },
+  confirmed: { label: 'Dikonfirmasi', variant: 'default' },
+  completed: { label: 'Selesai', variant: 'outline' },
+  cancelled: { label: 'Dibatalkan', variant: 'destructive' },
+};
+
+export default function AdminConsulting() {
+  const { user, isAdmin, loading: authLoading } = useAuth();
+  const navigate = useNavigate();
+
+  const [slots, setSlots] = useState<ConsultingSlot[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedSlot, setSelectedSlot] = useState<ConsultingSlot | null>(null);
+  const [meetLink, setMeetLink] = useState('');
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!authLoading) {
+      if (!user) navigate('/auth');
+      else if (!isAdmin) navigate('/dashboard');
+      else fetchSlots();
+    }
+  }, [user, isAdmin, authLoading]);
+
+  const fetchSlots = async () => {
+    const { data, error } = await supabase
+      .from('consulting_slots')
+      .select(`
+        *,
+        profiles:user_id (full_name, email)
+      `)
+      .order('date', { ascending: false })
+      .order('start_time', { ascending: true });
+
+    if (!error && data) setSlots(data);
+    setLoading(false);
+  };
+
+  const openMeetDialog = (slot: ConsultingSlot) => {
+    setSelectedSlot(slot);
+    setMeetLink(slot.meet_link || '');
+    setDialogOpen(true);
+  };
+
+  const saveMeetLink = async () => {
+    if (!selectedSlot) return;
+    setSaving(true);
+
+    const { error } = await supabase
+      .from('consulting_slots')
+      .update({ meet_link: meetLink })
+      .eq('id', selectedSlot.id);
+
+    if (error) {
+      toast({ title: 'Error', description: error.message, variant: 'destructive' });
+    } else {
+      toast({ title: 'Berhasil', description: 'Link Google Meet disimpan' });
+      setDialogOpen(false);
+      fetchSlots();
+
+      // TODO: Trigger notification with meet link
+      console.log('Would trigger consulting_scheduled notification with meet_link:', meetLink);
+    }
+    setSaving(false);
+  };
+
+  const createMeetLink = async () => {
+    // Placeholder for Google Calendar API integration
+    const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+    
+    if (!GOOGLE_CLIENT_ID) {
+      toast({ 
+        title: 'Info', 
+        description: 'VITE_GOOGLE_CLIENT_ID belum dikonfigurasi. Masukkan link Meet secara manual.',
+      });
+      return;
+    }
+
+    // TODO: Implement actual Google Calendar API call
+    // For now, log what would happen
+    console.log('Would call Google Calendar API to create Meet link for slot:', selectedSlot);
+    toast({ 
+      title: 'Info', 
+      description: 'Integrasi Google Calendar akan tersedia setelah konfigurasi OAuth selesai.',
+    });
+  };
+
+  if (authLoading || loading) {
+    return (
+      <AppLayout>
+        <div className="container mx-auto px-4 py-8">
+          <Skeleton className="h-10 w-1/3 mb-8" />
+          <Skeleton className="h-96 w-full" />
+        </div>
+      </AppLayout>
+    );
+  }
+
+  const confirmedSlots = slots.filter(s => s.status === 'confirmed');
+  const pendingSlots = slots.filter(s => s.status === 'pending_payment');
+
+  return (
+    <AppLayout>
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-4xl font-bold mb-2 flex items-center gap-3">
+          <Video className="w-10 h-10" />
+          Manajemen Konsultasi
+        </h1>
+        <p className="text-muted-foreground mb-8">
+          Kelola jadwal dan link Google Meet untuk sesi konsultasi
+        </p>
+
+        {/* Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+          <Card className="border-2 border-border">
+            <CardContent className="pt-6">
+              <div className="text-2xl font-bold">{confirmedSlots.length}</div>
+              <p className="text-sm text-muted-foreground">Dikonfirmasi</p>
+            </CardContent>
+          </Card>
+          <Card className="border-2 border-border">
+            <CardContent className="pt-6">
+              <div className="text-2xl font-bold">{pendingSlots.length}</div>
+              <p className="text-sm text-muted-foreground">Menunggu Pembayaran</p>
+            </CardContent>
+          </Card>
+          <Card className="border-2 border-border">
+            <CardContent className="pt-6">
+              <div className="text-2xl font-bold">
+                {confirmedSlots.filter(s => !s.meet_link).length}
+              </div>
+              <p className="text-sm text-muted-foreground">Perlu Link Meet</p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Slots Table */}
+        <Card className="border-2 border-border">
+          <CardHeader>
+            <CardTitle>Jadwal Konsultasi</CardTitle>
+            <CardDescription>Daftar semua booking konsultasi</CardDescription>
+          </CardHeader>
+          <CardContent className="p-0">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Tanggal</TableHead>
+                  <TableHead>Waktu</TableHead>
+                  <TableHead>Klien</TableHead>
+                  <TableHead>Kategori</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Link Meet</TableHead>
+                  <TableHead className="text-right">Aksi</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {slots.map((slot) => (
+                  <TableRow key={slot.id}>
+                    <TableCell className="font-medium">
+                      {format(parseISO(slot.date), 'd MMM yyyy', { locale: id })}
+                    </TableCell>
+                    <TableCell>
+                      {slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)}
+                    </TableCell>
+                    <TableCell>
+                      <div>
+                        <p className="font-medium">{slot.profiles?.full_name || '-'}</p>
+                        <p className="text-sm text-muted-foreground">{slot.profiles?.email}</p>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline">{slot.topic_category}</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant={statusLabels[slot.status]?.variant || 'secondary'}>
+                        {statusLabels[slot.status]?.label || slot.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>
+                      {slot.meet_link ? (
+                        <a
+                          href={slot.meet_link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-primary hover:underline flex items-center gap-1"
+                        >
+                          <ExternalLink className="w-4 h-4" />
+                          Buka
+                        </a>
+                      ) : (
+                        <span className="text-muted-foreground">-</span>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      {slot.status === 'confirmed' && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => openMeetDialog(slot)}
+                          className="border-2"
+                        >
+                          <LinkIcon className="w-4 h-4 mr-2" />
+                          {slot.meet_link ? 'Edit Link' : 'Tambah Link'}
+                        </Button>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+                {slots.length === 0 && (
+                  <TableRow>
+                    <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
+                      Belum ada booking konsultasi
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+
+        {/* Meet Link Dialog */}
+        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+          <DialogContent className="max-w-md border-2 border-border">
+            <DialogHeader>
+              <DialogTitle>Link Google Meet</DialogTitle>
+              <DialogDescription>
+                Tambahkan atau edit link Google Meet untuk sesi ini
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              {selectedSlot && (
+                <div className="p-3 bg-muted rounded-lg text-sm space-y-1">
+                  <p><strong>Tanggal:</strong> {format(parseISO(selectedSlot.date), 'd MMMM yyyy', { locale: id })}</p>
+                  <p><strong>Waktu:</strong> {selectedSlot.start_time.substring(0, 5)} - {selectedSlot.end_time.substring(0, 5)}</p>
+                  <p><strong>Klien:</strong> {selectedSlot.profiles?.full_name}</p>
+                  <p><strong>Topik:</strong> {selectedSlot.topic_category}</p>
+                  {selectedSlot.notes && <p><strong>Catatan:</strong> {selectedSlot.notes}</p>}
+                </div>
+              )}
+
+              <div className="space-y-2">
+                <Input
+                  value={meetLink}
+                  onChange={(e) => setMeetLink(e.target.value)}
+                  placeholder="https://meet.google.com/xxx-xxxx-xxx"
+                  className="border-2"
+                />
+              </div>
+
+              <div className="flex gap-2">
+                <Button onClick={createMeetLink} variant="outline" className="flex-1 border-2">
+                  Buat Link Meet
+                </Button>
+                <Button onClick={saveMeetLink} disabled={saving} className="flex-1 shadow-sm">
+                  {saving ? 'Menyimpan...' : 'Simpan'}
+                </Button>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </AppLayout>
+  );
+}

src/pages/admin/AdminSettings.tsx

@@ -1,91 +1,26 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { supabase } from '@/integrations/supabase/client';
 import { useAuth } from '@/hooks/useAuth';
 import { AppLayout } from '@/components/AppLayout';
-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 { Skeleton } from '@/components/ui/skeleton';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { toast } from '@/hooks/use-toast';
-import { Plus, Pencil, Trash2, Clock } from 'lucide-react';
-
-interface Workhour {
-  id: string;
-  weekday: number;
-  start_time: string;
-  end_time: string;
-}
-
-const WEEKDAYS = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
-
-const emptyWorkhour = { weekday: 1, start_time: '09:00', end_time: '17:00' };
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { WorkhoursTab } from '@/components/admin/settings/WorkhoursTab';
+import { NotifikasiTab } from '@/components/admin/settings/NotifikasiTab';
+import { KonsultasiTab } from '@/components/admin/settings/KonsultasiTab';
+import { Clock, Bell, Video, Palette, Puzzle } from 'lucide-react';
 
 export default function AdminSettings() {
   const { user, isAdmin, loading: authLoading } = useAuth();
   const navigate = useNavigate();
-  const [loading, setLoading] = useState(true);
-  const [workhours, setWorkhours] = useState<Workhour[]>([]);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [editingWorkhour, setEditingWorkhour] = useState<Workhour | null>(null);
-  const [form, setForm] = useState(emptyWorkhour);
 
   useEffect(() => {
     if (!authLoading) {
       if (!user) navigate('/auth');
       else if (!isAdmin) navigate('/dashboard');
-      else fetchWorkhours();
     }
-  }, [user, isAdmin, authLoading]);
+  }, [user, isAdmin, authLoading, navigate]);
 
-  const fetchWorkhours = async () => {
-    const { data, error } = await supabase.from('workhours').select('*').order('weekday');
-    if (!error && data) setWorkhours(data);
-    setLoading(false);
-  };
-
-  const handleNew = () => {
-    setEditingWorkhour(null);
-    setForm(emptyWorkhour);
-    setDialogOpen(true);
-  };
-
-  const handleEdit = (wh: Workhour) => {
-    setEditingWorkhour(wh);
-    setForm({ weekday: wh.weekday, start_time: wh.start_time, end_time: wh.end_time });
-    setDialogOpen(true);
-  };
-
-  const handleSave = async () => {
-    const workhourData = {
-      weekday: form.weekday,
-      start_time: form.start_time,
-      end_time: form.end_time,
-    };
-
-    if (editingWorkhour) {
-      const { error } = await supabase.from('workhours').update(workhourData).eq('id', editingWorkhour.id);
-      if (error) toast({ title: 'Error', description: 'Gagal mengupdate', variant: 'destructive' });
-      else { toast({ title: 'Berhasil', description: 'Jam kerja diupdate' }); setDialogOpen(false); fetchWorkhours(); }
-    } else {
-      const { error } = await supabase.from('workhours').insert(workhourData);
-      if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
-      else { toast({ title: 'Berhasil', description: 'Jam kerja ditambahkan' }); setDialogOpen(false); fetchWorkhours(); }
-    }
-  };
-
-  const handleDelete = async (id: string) => {
-    if (!confirm('Hapus jam kerja ini?')) return;
-    const { error } = await supabase.from('workhours').delete().eq('id', id);
-    if (error) toast({ title: 'Error', description: 'Gagal menghapus', variant: 'destructive' });
-    else { toast({ title: 'Berhasil', description: 'Jam kerja dihapus' }); fetchWorkhours(); }
-  };
-
-  if (authLoading || loading) {
+  if (authLoading) {
     return (
       <AppLayout>
         <div className="container mx-auto px-4 py-8">
@@ -102,91 +37,54 @@ export default function AdminSettings() {
         <h1 className="text-4xl font-bold mb-2">Pengaturan</h1>
         <p className="text-muted-foreground mb-8">Konfigurasi platform</p>
 
-        <div className="space-y-8">
-          <Card className="border-2 border-border">
-            <CardHeader className="flex flex-row items-center justify-between">
-              <div>
-                <CardTitle className="flex items-center gap-2">
-                  <Clock className="w-5 h-5" />
-                  Jam Kerja
-                </CardTitle>
-                <CardDescription>Atur jadwal ketersediaan untuk konsultasi</CardDescription>
-              </div>
-              <Button onClick={handleNew} className="shadow-sm">
-                <Plus className="w-4 h-4 mr-2" />
-                Tambah Jam Kerja
-              </Button>
-            </CardHeader>
-            <CardContent className="p-0">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Hari</TableHead>
-                    <TableHead>Mulai</TableHead>
-                    <TableHead>Selesai</TableHead>
-                    <TableHead className="text-right">Aksi</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {workhours.map((wh) => (
-                    <TableRow key={wh.id}>
-                      <TableCell className="font-medium">{WEEKDAYS[wh.weekday]}</TableCell>
-                      <TableCell>{wh.start_time}</TableCell>
-                      <TableCell>{wh.end_time}</TableCell>
-                      <TableCell className="text-right">
-                        <Button variant="ghost" size="sm" onClick={() => handleEdit(wh)}>
-                          <Pencil className="w-4 h-4" />
-                        </Button>
-                        <Button variant="ghost" size="sm" onClick={() => handleDelete(wh.id)}>
-                          <Trash2 className="w-4 h-4" />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                  {workhours.length === 0 && (
-                    <TableRow>
-                      <TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
-                        Belum ada jam kerja
-                      </TableCell>
-                    </TableRow>
-                  )}
-                </TableBody>
-              </Table>
-            </CardContent>
-          </Card>
-        </div>
+        <Tabs defaultValue="workhours" className="space-y-6">
+          <TabsList className="grid w-full grid-cols-5 lg:w-auto lg:inline-flex">
+            <TabsTrigger value="workhours" className="flex items-center gap-2">
+              <Clock className="w-4 h-4" />
+              <span className="hidden sm:inline">Jam Kerja</span>
+            </TabsTrigger>
+            <TabsTrigger value="notifikasi" className="flex items-center gap-2">
+              <Bell className="w-4 h-4" />
+              <span className="hidden sm:inline">Notifikasi</span>
+            </TabsTrigger>
+            <TabsTrigger value="konsultasi" className="flex items-center gap-2">
+              <Video className="w-4 h-4" />
+              <span className="hidden sm:inline">Konsultasi</span>
+            </TabsTrigger>
+            <TabsTrigger value="branding" className="flex items-center gap-2" disabled>
+              <Palette className="w-4 h-4" />
+              <span className="hidden sm:inline">Branding</span>
+            </TabsTrigger>
+            <TabsTrigger value="integrasi" className="flex items-center gap-2" disabled>
+              <Puzzle className="w-4 h-4" />
+              <span className="hidden sm:inline">Integrasi</span>
+            </TabsTrigger>
+          </TabsList>
 
-        <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-          <DialogContent className="max-w-md border-2 border-border">
-            <DialogHeader>
-              <DialogTitle>{editingWorkhour ? 'Edit Jam Kerja' : 'Tambah Jam Kerja'}</DialogTitle>
-            </DialogHeader>
-            <div className="space-y-4 py-4">
-              <div className="space-y-2">
-                <Label>Hari</Label>
-                <Select value={form.weekday.toString()} onValueChange={(v) => setForm({ ...form, weekday: parseInt(v) })}>
-                  <SelectTrigger className="border-2"><SelectValue /></SelectTrigger>
-                  <SelectContent>
-                    {WEEKDAYS.map((day, i) => (
-                      <SelectItem key={i} value={i.toString()}>{day}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+          <TabsContent value="workhours">
+            <WorkhoursTab />
+          </TabsContent>
+
+          <TabsContent value="notifikasi">
+            <NotifikasiTab />
+          </TabsContent>
+
+          <TabsContent value="konsultasi">
+            <KonsultasiTab />
+          </TabsContent>
+
+          <TabsContent value="branding">
+            <div className="text-center py-12 text-muted-foreground">
+              Fitur Branding akan segera hadir
             </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label>Mulai</Label>
-                  <Input type="time" value={form.start_time} onChange={(e) => setForm({ ...form, start_time: e.target.value })} className="border-2" />
+          </TabsContent>
+
+          <TabsContent value="integrasi">
+            <div className="text-center py-12 text-muted-foreground">
+              Fitur Integrasi akan segera hadir
             </div>
-                <div className="space-y-2">
-                  <Label>Selesai</Label>
-                  <Input type="time" value={form.end_time} onChange={(e) => setForm({ ...form, end_time: e.target.value })} className="border-2" />
-                </div>
-              </div>
-              <Button onClick={handleSave} className="w-full shadow-sm">Simpan</Button>
-            </div>
-          </DialogContent>
-        </Dialog>
+          </TabsContent>
+        </Tabs>
       </div>
     </AppLayout>
   );