Changes

2025-12-19 13:07:23 +00:00
parent 277f7506c3
commit 7f1622613c
6 changed files with 1500 additions and 156 deletions
--- a/src/pages/admin/AdminConsulting.tsx
+++ b/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>
+  );
+}