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