513 lines
20 KiB
TypeScript
513 lines
20 KiB
TypeScript
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { toast } from '@/hooks/use-toast';
|
|
import { formatIDR } from '@/lib/format';
|
|
import { Video, Calendar, Clock, User, Link as LinkIcon, ExternalLink, CheckCircle, XCircle, Loader2 } from 'lucide-react';
|
|
import { format, parseISO, isToday, isTomorrow, isPast } 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;
|
|
};
|
|
}
|
|
|
|
interface PlatformSettings {
|
|
integration_n8n_base_url?: string;
|
|
integration_google_calendar_id?: 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 [settings, setSettings] = useState<PlatformSettings>({});
|
|
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);
|
|
const [creatingMeet, setCreatingMeet] = useState(false);
|
|
const [activeTab, setActiveTab] = useState('upcoming');
|
|
|
|
useEffect(() => {
|
|
if (!authLoading) {
|
|
if (!user) navigate('/auth');
|
|
else if (!isAdmin) navigate('/dashboard');
|
|
else {
|
|
fetchSlots();
|
|
fetchSettings();
|
|
}
|
|
}
|
|
}, [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 fetchSettings = async () => {
|
|
const { data } = await supabase
|
|
.from('platform_settings')
|
|
.select('integration_n8n_base_url, integration_google_calendar_id')
|
|
.single();
|
|
|
|
if (data) setSettings(data);
|
|
};
|
|
|
|
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();
|
|
|
|
// Send notification to client with meet link
|
|
if (meetLink && selectedSlot.profiles?.email) {
|
|
try {
|
|
await supabase.functions.invoke('send-notification', {
|
|
body: {
|
|
template_key: 'consulting_scheduled',
|
|
recipient_email: selectedSlot.profiles.email,
|
|
recipient_name: selectedSlot.profiles.full_name,
|
|
variables: {
|
|
consultation_date: format(parseISO(selectedSlot.date), 'd MMMM yyyy', { locale: id }),
|
|
consultation_time: `${selectedSlot.start_time.substring(0, 5)} - ${selectedSlot.end_time.substring(0, 5)}`,
|
|
meet_link: meetLink,
|
|
topic_category: selectedSlot.topic_category,
|
|
},
|
|
},
|
|
});
|
|
} catch (err) {
|
|
console.log('Notification skipped:', err);
|
|
}
|
|
}
|
|
}
|
|
setSaving(false);
|
|
};
|
|
|
|
const createMeetLink = async () => {
|
|
if (!selectedSlot) return;
|
|
|
|
// Check if n8n webhook is configured
|
|
const webhookUrl = settings.integration_n8n_base_url;
|
|
if (!webhookUrl) {
|
|
toast({
|
|
title: 'Info',
|
|
description: 'Webhook URL belum dikonfigurasi di Pengaturan Integrasi. Masukkan link Meet secara manual.',
|
|
});
|
|
return;
|
|
}
|
|
|
|
setCreatingMeet(true);
|
|
|
|
try {
|
|
// Call the webhook to create Google Meet link
|
|
const response = await fetch(`${webhookUrl}/create-meet`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
slot_id: selectedSlot.id,
|
|
date: selectedSlot.date,
|
|
start_time: selectedSlot.start_time,
|
|
end_time: selectedSlot.end_time,
|
|
topic: selectedSlot.topic_category,
|
|
client_name: selectedSlot.profiles?.full_name || 'Client',
|
|
client_email: selectedSlot.profiles?.email,
|
|
calendar_id: settings.integration_google_calendar_id,
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Webhook request failed');
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.meet_link) {
|
|
setMeetLink(data.meet_link);
|
|
toast({ title: 'Berhasil', description: 'Link Google Meet dibuat' });
|
|
} else {
|
|
throw new Error('No meet_link in response');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error creating meet link:', error);
|
|
toast({
|
|
title: 'Gagal',
|
|
description: 'Gagal membuat link Meet. Pastikan webhook sudah dikonfigurasi dengan benar.',
|
|
variant: 'destructive',
|
|
});
|
|
} finally {
|
|
setCreatingMeet(false);
|
|
}
|
|
};
|
|
|
|
const updateSlotStatus = async (slotId: string, newStatus: string) => {
|
|
const { error } = await supabase
|
|
.from('consulting_slots')
|
|
.update({ status: newStatus })
|
|
.eq('id', slotId);
|
|
|
|
if (error) {
|
|
toast({ title: 'Error', description: error.message, variant: 'destructive' });
|
|
} else {
|
|
toast({ title: 'Berhasil', description: `Status diubah ke ${statusLabels[newStatus]?.label || newStatus}` });
|
|
fetchSlots();
|
|
}
|
|
};
|
|
|
|
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 today = new Date().toISOString().split('T')[0];
|
|
const upcomingSlots = slots.filter(s => s.date >= today && (s.status === 'confirmed' || s.status === 'pending_payment'));
|
|
const pastSlots = slots.filter(s => s.date < today || s.status === 'completed' || s.status === 'cancelled');
|
|
const todaySlots = slots.filter(s => isToday(parseISO(s.date)) && s.status === 'confirmed');
|
|
|
|
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>
|
|
|
|
{/* Today's Sessions Alert */}
|
|
{todaySlots.length > 0 && (
|
|
<Card className="border-2 border-primary bg-primary/5 mb-6">
|
|
<CardContent className="py-4">
|
|
<h3 className="font-bold flex items-center gap-2">
|
|
<Calendar className="w-5 h-5" />
|
|
Sesi Hari Ini ({todaySlots.length})
|
|
</h3>
|
|
<div className="mt-2 space-y-2">
|
|
{todaySlots.map(slot => (
|
|
<div key={slot.id} className="flex items-center justify-between text-sm">
|
|
<span>
|
|
{slot.start_time.substring(0, 5)} - {slot.profiles?.full_name || 'N/A'} ({slot.topic_category})
|
|
</span>
|
|
{slot.meet_link ? (
|
|
<a href={slot.meet_link} target="_blank" rel="noopener noreferrer" className="text-primary underline flex items-center gap-1">
|
|
<ExternalLink className="w-3 h-3" /> Join
|
|
</a>
|
|
) : (
|
|
<Button size="sm" variant="outline" onClick={() => openMeetDialog(slot)}>
|
|
Tambah Link
|
|
</Button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
|
<Card className="border-2 border-border">
|
|
<CardContent className="pt-6">
|
|
<div className="text-2xl font-bold">{todaySlots.length}</div>
|
|
<p className="text-sm text-muted-foreground">Hari Ini</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-2 border-border">
|
|
<CardContent className="pt-6">
|
|
<div className="text-2xl font-bold">{upcomingSlots.filter(s => s.status === 'confirmed').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">{upcomingSlots.filter(s => !s.meet_link && s.status === 'confirmed').length}</div>
|
|
<p className="text-sm text-muted-foreground">Perlu Link Meet</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-2 border-border">
|
|
<CardContent className="pt-6">
|
|
<div className="text-2xl font-bold">{pastSlots.filter(s => s.status === 'completed').length}</div>
|
|
<p className="text-sm text-muted-foreground">Selesai</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
|
<TabsList className="mb-4">
|
|
<TabsTrigger value="upcoming">Mendatang ({upcomingSlots.length})</TabsTrigger>
|
|
<TabsTrigger value="past">Riwayat ({pastSlots.length})</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="upcoming">
|
|
<Card className="border-2 border-border">
|
|
<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>
|
|
{upcomingSlots.map((slot) => (
|
|
<TableRow key={slot.id}>
|
|
<TableCell className="font-medium">
|
|
<div>
|
|
{format(parseISO(slot.date), 'd MMM yyyy', { locale: id })}
|
|
{isToday(parseISO(slot.date)) && <Badge className="ml-2 bg-primary">Hari Ini</Badge>}
|
|
{isTomorrow(parseISO(slot.date)) && <Badge className="ml-2 bg-accent">Besok</Badge>}
|
|
</div>
|
|
</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 space-x-2">
|
|
{slot.status === 'confirmed' && (
|
|
<>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => openMeetDialog(slot)}
|
|
className="border-2"
|
|
>
|
|
<LinkIcon className="w-4 h-4 mr-1" />
|
|
{slot.meet_link ? 'Edit' : 'Link'}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => updateSlotStatus(slot.id, 'completed')}
|
|
className="border-2 text-green-600"
|
|
>
|
|
<CheckCircle className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => updateSlotStatus(slot.id, 'cancelled')}
|
|
className="border-2 text-destructive"
|
|
>
|
|
<XCircle className="w-4 h-4" />
|
|
</Button>
|
|
</>
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
{upcomingSlots.length === 0 && (
|
|
<TableRow>
|
|
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
|
|
Tidak ada jadwal mendatang
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="past">
|
|
<Card className="border-2 border-border">
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Tanggal</TableHead>
|
|
<TableHead>Waktu</TableHead>
|
|
<TableHead>Klien</TableHead>
|
|
<TableHead>Kategori</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{pastSlots.slice(0, 20).map((slot) => (
|
|
<TableRow key={slot.id}>
|
|
<TableCell>{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>{slot.profiles?.full_name || '-'}</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>
|
|
</TableRow>
|
|
))}
|
|
{pastSlots.length === 0 && (
|
|
<TableRow>
|
|
<TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
|
|
Belum ada riwayat konsultasi
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
{/* 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"
|
|
disabled={creatingMeet}
|
|
>
|
|
{creatingMeet ? (
|
|
<>
|
|
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
|
Membuat...
|
|
</>
|
|
) : (
|
|
'Buat Link Meet'
|
|
)}
|
|
</Button>
|
|
<Button onClick={saveMeetLink} disabled={saving} className="flex-1 shadow-sm">
|
|
{saving ? 'Menyimpan...' : 'Simpan'}
|
|
</Button>
|
|
</div>
|
|
|
|
{!settings.integration_n8n_base_url && (
|
|
<p className="text-xs text-muted-foreground text-center">
|
|
Tip: Konfigurasi webhook di Pengaturan → Integrasi untuk pembuatan otomatis
|
|
</p>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|