Changes

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>
-              </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>
+          <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>
-          </DialogContent>
-        </Dialog>
+          </TabsContent>
+
+          <TabsContent value="integrasi">
+            <div className="text-center py-12 text-muted-foreground">
+              Fitur Integrasi akan segera hadir
+            </div>
+          </TabsContent>
+        </Tabs>
       </div>
     </AppLayout>
   );