dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add calendar event lifecycle management and "Add to Calendar" feature

Browse Source 
- Migrate consulting_slots to consulting_sessions structure
- Add calendar_event_id to track Google Calendar events
- Create delete-calendar-event edge function for auto-cleanup
- Add "Tambah ke Kalender" button for members (OrderDetail, ConsultingHistory)
- Update create-google-meet-event to store calendar event ID
- Update handle-order-paid to use consulting_sessions table
- Remove deprecated create-meet-link function
- Add comprehensive documentation (CALENDAR_INTEGRATION.md, MIGRATION_GUIDE.md)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2025-12-28 13:54:16 +07:00
parent 952bb209cf
commit 5ab4e6b974
11 changed files with 1303 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/components/reviews/ConsultingHistory.tsx
View File

@@ -4,27 +4,21 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import { Video, Calendar, Clock, Star, MessageSquare, CheckCircle } from 'lucide-react';
import { Video, Calendar, Clock, Star, MessageSquare, CheckCircle, Download } from 'lucide-react';
import { format } from 'date-fns';
import { id } from 'date-fns/locale';
import { ReviewModal } from './ReviewModal';
interface ConsultingSlot {
interface ConsultingSession {
id: string;
date: string;
session_date: string;
start_time: string;
end_time: string;
status: string;
topic_category: string | null;
meet_link: string | null;
order_id: string | null;
}
interface GroupedOrder {
orderId: string | null;
slots: ConsultingSlot[];
firstDate: string;
meetLink: string | null;
total_blocks: number;
}
interface ConsultingHistoryProps {
@@ -32,7 +26,7 @@ interface ConsultingHistoryProps {
}
export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
const [slots, setSlots] = useState<ConsultingSlot[]>([]);
const [sessions, setSessions] = useState<ConsultingSession[]>([]);
const [reviewedOrderIds, setReviewedOrderIds] = useState<Set<string>>(new Set());
const [loading, setLoading] = useState(true);
const [reviewModal, setReviewModal] = useState<{
@@ -46,18 +40,18 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
}, [userId]);
const fetchData = async () => {
// Fetch consulting slots
const { data: slotsData } = await supabase
.from('consulting_slots')
.select('id, date, start_time, end_time, status, topic_category, meet_link, order_id')
// Fetch consulting sessions
const { data: sessionsData } = await supabase
.from('consulting_sessions')
.select('id, session_date, start_time, end_time, status, topic_category, meet_link, order_id, total_blocks')
.eq('user_id', userId)
.order('date', { ascending: false });
.order('session_date', { ascending: false });
if (slotsData) {
setSlots(slotsData);
if (sessionsData) {
setSessions(sessionsData);
// Check which orders have been reviewed
const orderIds = slotsData
const orderIds = sessionsData
.filter(s => s.order_id)
.map(s => s.order_id as string);
@@ -78,26 +72,6 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
setLoading(false);
};
// Group slots by order_id
const groupedOrders: GroupedOrder[] = (() => {
const groups = new Map<string | null, ConsultingSlot[]>();
slots.forEach(slot => {
const orderId = slot.order_id || 'no-order';
if (!groups.has(orderId)) {
groups.set(orderId, []);
}
groups.get(orderId)!.push(slot);
});
return Array.from(groups.entries()).map(([orderId, slots]) => ({
orderId: orderId === 'no-order' ? null : orderId,
slots,
firstDate: slots[0].date,
meetLink: slots[0].meet_link, // Use meet_link from first slot
})).sort((a, b) => new Date(b.firstDate).getTime() - new Date(a.firstDate).getTime());
})();
const getStatusBadge = (status: string) => {
switch (status) {
case 'done':
@@ -113,14 +87,12 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
}
};
const openReviewModal = (order: GroupedOrder) => {
const firstSlot = order.slots[0];
const lastSlot = order.slots[order.slots.length - 1];
const dateLabel = format(new Date(firstSlot.date), 'd MMMM yyyy', { locale: id });
const timeLabel = `${firstSlot.start_time.substring(0, 5)} - ${lastSlot.end_time.substring(0, 5)}`;
const openReviewModal = (session: ConsultingSession) => {
const dateLabel = format(new Date(session.session_date), 'd MMMM yyyy', { locale: id });
const timeLabel = `${session.start_time.substring(0, 5)} - ${session.end_time.substring(0, 5)}`;
setReviewModal({
open: true,
orderId: order.orderId,
orderId: session.order_id,
label: `Sesi konsultasi ${dateLabel}, ${timeLabel}`,
});
};
@@ -132,8 +104,31 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
}
};
const doneOrders = groupedOrders.filter(o => o.slots.every(s => s.status === 'done'));
const upcomingOrders = groupedOrders.filter(o => o.slots.some(s => s.status === 'confirmed'));
// Generate Google Calendar link for adding to user's calendar
const generateCalendarLink = (session: ConsultingSession) => {
if (!session.meet_link) return null;
const startDate = new Date(`${session.session_date}T${session.start_time}`);
const endDate = new Date(`${session.session_date}T${session.end_time}`);
// Format dates for Google Calendar (YYYYMMDDTHHmmssZ)
const formatDate = (date: Date) => {
return date.toISOString().replace(/-|:|\.\d\d\d/g, '');
};
const params = new URLSearchParams({
action: 'TEMPLATE',
text: `Konsultasi: ${session.topic_category || 'Sesi Konsultasi'}`,
dates: `${formatDate(startDate)}/${formatDate(endDate)}`,
details: `Link Meet: ${session.meet_link}`,
location: session.meet_link,
});
return `https://www.google.com/calendar/render?${params.toString()}`;
};
const doneSessions = sessions.filter(s => s.status === 'done' || s.status === 'completed');
const upcomingSessions = sessions.filter(s => s.status === 'confirmed');
if (loading) {
return (
@@ -152,7 +147,7 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
);
}
if (slots.length === 0) {
if (sessions.length === 0) {
return null;
}
@@ -167,68 +162,79 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
</CardHeader>
<CardContent className="space-y-4">
{/* Upcoming sessions */}
{upcomingOrders.length > 0 && (
{upcomingSessions.length > 0 && (
<div className="space-y-2">
<h4 className="text-sm font-medium text-muted-foreground">Sesi Mendatang</h4>
{upcomingOrders.map((order) => {
const firstSlot = order.slots[0];
const lastSlot = order.slots[order.slots.length - 1];
return (
<div key={order.orderId || 'no-order'} className="flex items-center justify-between p-3 border-2 border-border bg-muted/30">
<div className="flex items-center gap-3">
<Calendar className="w-4 h-4 text-muted-foreground" />
<div>
<p className="font-medium">
{format(new Date(firstSlot.date), 'd MMM yyyy', { locale: id })}
</p>
<p className="text-sm text-muted-foreground flex items-center gap-1">
<Clock className="w-3 h-3" />
{firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)}
{firstSlot.topic_category && ` • ${firstSlot.topic_category}`}
</p>
</div>
{upcomingSessions.map((session) => (
<div key={session.id} className="flex items-center justify-between p-3 border-2 border-border bg-muted/30">
<div className="flex items-center gap-3">
<Calendar className="w-4 h-4 text-muted-foreground" />
<div>
<p className="font-medium">
{format(new Date(session.session_date), 'd MMM yyyy', { locale: id })}
</p>
<p className="text-sm text-muted-foreground flex items-center gap-1">
<Clock className="w-3 h-3" />
{session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}
{session.topic_category && ` • ${session.topic_category}`}
</p>
</div>
<div className="flex items-center gap-2">
{getStatusBadge(firstSlot.status)}
{order.meetLink && (
</div>
<div className="flex items-center gap-2">
{getStatusBadge(session.status)}
{session.meet_link && (
<>
<Button asChild size="sm" variant="outline" className="border-2">
<a href={order.meetLink} target="_blank" rel="noopener noreferrer">
<a href={session.meet_link} target="_blank" rel="noopener noreferrer">
Join
</a>
</Button>
)}
</div>
<Button
asChild
size="sm"
variant="outline"
className="border-2"
>
<a
href={generateCalendarLink(session) || '#'}
target="_blank"
rel="noopener noreferrer"
title="Tambah ke Kalender"
>
<Download className="w-4 h-4" />
</a>
</Button>
</>
)}
</div>
);
})}
</div>
))}
</div>
)}
{/* Completed sessions */}
{doneOrders.length > 0 && (
{doneSessions.length > 0 && (
<div className="space-y-2">
<h4 className="text-sm font-medium text-muted-foreground">Sesi Selesai</h4>
{doneOrders.map((order) => {
const firstSlot = order.slots[0];
const lastSlot = order.slots[order.slots.length - 1];
const hasReviewed = order.orderId ? reviewedOrderIds.has(order.orderId) : false;
{doneSessions.map((session) => {
const hasReviewed = session.order_id ? reviewedOrderIds.has(session.order_id) : false;
return (
<div key={order.orderId || 'no-order'} className="flex items-center justify-between p-3 border-2 border-border">
<div key={session.id} className="flex items-center justify-between p-3 border-2 border-border">
<div className="flex items-center gap-3">
<Calendar className="w-4 h-4 text-muted-foreground" />
<div>
<p className="font-medium">
{format(new Date(firstSlot.date), 'd MMM yyyy', { locale: id })}
{format(new Date(session.session_date), 'd MMM yyyy', { locale: id })}
</p>
<p className="text-sm text-muted-foreground flex items-center gap-1">
<Clock className="w-3 h-3" />
{firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)}
{firstSlot.topic_category && ` • ${firstSlot.topic_category}`}
{session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}
{session.topic_category && ` • ${session.topic_category}`}
</p>
</div>
</div>
<div className="flex items-center gap-2">
{getStatusBadge(firstSlot.status)}
{getStatusBadge(session.status)}
{hasReviewed ? (
<span className="flex items-center gap-1 text-xs text-muted-foreground">
<CheckCircle className="w-4 h-4 text-accent" />
@@ -238,7 +244,7 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
<Button
size="sm"
variant="outline"
onClick={() => openReviewModal(order)}
onClick={() => openReviewModal(session)}
className="border-2"
>
<Star className="w-4 h-4 mr-1" />

59
src/pages/ConsultingBooking.tsx
View File

@@ -31,8 +31,8 @@ interface Workhour {
end_time: string;
}
interface ConfirmedSlot {
date: string;
interface ConfirmedSession {
session_date: string;
start_time: string;
end_time: string;
}
@@ -107,9 +107,9 @@ export default function ConsultingBooking() {
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)
.from('consulting_sessions')
.select('session_date, start_time, end_time')
.eq('session_date', dateStr)
.in('status', ['pending_payment', 'confirmed']);
if (data) setConfirmedSlots(data);
@@ -331,26 +331,55 @@ export default function ConsultingBooking() {
if (orderError) throw orderError;
// Create consulting slots
const slotsToInsert = getSlotsInRange.map(slotStart => {
// Create consulting session and time slots
const firstSlotStart = getSlotsInRange[0];
const lastSlotEnd = format(
addMinutes(parse(getSlotsInRange[getSlotsInRange.length - 1], 'HH:mm', new Date()), settings.consulting_block_duration_minutes),
'HH:mm'
);
// Calculate session duration in minutes
const sessionDurationMinutes = totalBlocks * settings.consulting_block_duration_minutes;
// Create the session record (ONE row per booking)
const { data: session, error: sessionError } = await supabase
.from('consulting_sessions')
.insert({
user_id: user.id,
order_id: order.id,
session_date: format(selectedDate, 'yyyy-MM-dd'),
start_time: firstSlotStart + ':00',
end_time: lastSlotEnd + ':00',
total_duration_minutes: sessionDurationMinutes,
topic_category: selectedCategory,
notes: notes,
status: 'pending_payment',
total_blocks: totalBlocks,
total_price: totalPrice,
})
.select()
.single();
if (sessionError) throw sessionError;
// Create time slots for availability tracking (MULTIPLE rows per booking)
const timeSlotsToInsert = getSlotsInRange.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'),
session_id: session.id,
slot_date: format(selectedDate, 'yyyy-MM-dd'),
start_time: slotStart + ':00',
end_time: slotEnd + ':00',
status: 'pending_payment',
topic_category: selectedCategory,
notes: notes,
is_available: false,
booked_at: new Date().toISOString(),
};
});
const { error: slotsError } = await supabase.from('consulting_slots').insert(slotsToInsert);
if (slotsError) throw slotsError;
const { error: timeSlotsError } = await supabase.from('consulting_time_slots').insert(timeSlotsToInsert);
if (timeSlotsError) throw timeSlotsError;
// Call edge function to create payment with QR code
const { data: paymentData, error: paymentError } = await supabase.functions.invoke('create-payment', {

388
src/pages/admin/AdminConsulting.tsx
View File

@@ -18,17 +18,21 @@ import { Video, Calendar, Clock, User, Link as LinkIcon, ExternalLink, CheckCirc
import { format, parseISO, isToday, isTomorrow, isPast } from 'date-fns';
import { id } from 'date-fns/locale';
interface ConsultingSlot {
interface ConsultingSession {
id: string;
user_id: string;
order_id: string;
date: string;
session_date: string;
start_time: string;
end_time: string;
total_duration_minutes: number;
status: string;
topic_category: string;
notes: string;
meet_link: string | null;
calendar_event_id: string | null;
total_blocks: number;
total_price: number;
created_at: string;
profiles?: {
name: string;
@@ -36,17 +40,6 @@ interface ConsultingSlot {
};
}
interface GroupedOrder {
orderId: string | null;
slots: ConsultingSlot[];
firstDate: string;
meetLink: string | null;
profile: {
name: string;
email: string;
} | null;
}
interface PlatformSettings {
integration_n8n_base_url?: string;
integration_google_calendar_id?: string;
@@ -63,10 +56,10 @@ export default function AdminConsulting() {
const { user, isAdmin, loading: authLoading } = useAuth();
const navigate = useNavigate();
const [slots, setSlots] = useState<ConsultingSlot[]>([]);
const [sessions, setSessions] = useState<ConsultingSession[]>([]);
const [settings, setSettings] = useState<PlatformSettings>({});
const [loading, setLoading] = useState(true);
const [selectedSlot, setSelectedSlot] = useState<ConsultingSlot | null>(null);
const [selectedSession, setSelectedSession] = useState<ConsultingSession | null>(null);
const [meetLink, setMeetLink] = useState('');
const [dialogOpen, setDialogOpen] = useState(false);
const [saving, setSaving] = useState(false);
@@ -80,45 +73,30 @@ export default function AdminConsulting() {
if (!user) navigate('/auth');
else if (!isAdmin) navigate('/dashboard');
else {
fetchSlots();
fetchSessions();
fetchSettings();
}
}
}, [user, isAdmin, authLoading]);
const fetchSlots = async () => {
// First fetch slots
const { data: slotsData, error: slotsError } = await supabase
.from('consulting_slots')
.select('*')
.order('date', { ascending: false })
const fetchSessions = async () => {
// Fetch sessions with profile data
const { data: sessionsData, error: sessionsError } = await supabase
.from('consulting_sessions')
.select(`
*,
profiles (name, email)
`)
.order('session_date', { ascending: false })
.order('start_time', { ascending: true });
if (slotsError || !slotsData) {
console.error('Error fetching slots:', slotsError);
if (sessionsError || !sessionsData) {
console.error('Error fetching sessions:', sessionsError);
setLoading(false);
return;
}
// Then fetch profiles for each user_id
const userIds = [...new Set(slotsData.map(s => s.user_id))];
const { data: profilesData } = await supabase
.from('profiles')
.select('id, name, email')
.in('id', userIds);
// Create a map for quick lookup
const profilesMap = new Map(
(profilesData || []).map(p => [p.id, { name: p.name, email: p.email }])
);
// Combine slots with profile data
const slotsWithProfiles = slotsData.map(slot => ({
...slot,
profiles: profilesMap.get(slot.user_id) || null
}));
setSlots(slotsWithProfiles);
setSessions(sessionsData);
setLoading(false);
};
@@ -131,41 +109,41 @@ export default function AdminConsulting() {
if (data) setSettings(data);
};
const openMeetDialog = (slot: ConsultingSlot) => {
setSelectedSlot(slot);
setMeetLink(slot.meet_link || '');
const openMeetDialog = (session: ConsultingSession) => {
setSelectedSession(session);
setMeetLink(session.meet_link || '');
setDialogOpen(true);
};
const saveMeetLink = async () => {
if (!selectedSlot) return;
if (!selectedSession) return;
setSaving(true);
const { error } = await supabase
.from('consulting_slots')
.from('consulting_sessions')
.update({ meet_link: meetLink })
.eq('id', selectedSlot.id);
.eq('id', selectedSession.id);
if (error) {
toast({ title: 'Error', description: error.message, variant: 'destructive' });
} else {
toast({ title: 'Berhasil', description: 'Link Google Meet disimpan' });
setDialogOpen(false);
fetchSlots();
fetchSessions();
// Send notification to client with meet link
if (meetLink && selectedSlot.profiles?.email) {
if (meetLink && selectedSession.profiles?.email) {
try {
await supabase.functions.invoke('send-notification', {
body: {
template_key: 'consulting_scheduled',
recipient_email: selectedSlot.profiles.email,
recipient_name: selectedSlot.profiles.name,
recipient_email: selectedSession.profiles.email,
recipient_name: selectedSession.profiles.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)}`,
consultation_date: format(parseISO(selectedSession.session_date), 'd MMMM yyyy', { locale: id }),
consultation_time: `${selectedSession.start_time.substring(0, 5)} - ${selectedSession.end_time.substring(0, 5)}`,
meet_link: meetLink,
topic_category: selectedSlot.topic_category,
topic_category: selectedSession.topic_category,
},
},
});
@@ -178,7 +156,7 @@ export default function AdminConsulting() {
};
const createMeetLink = async () => {
if (!selectedSlot) return;
if (!selectedSession) return;
// Check if Google Calendar is configured
const calendarId = settings.integration_google_calendar_id;
@@ -202,14 +180,14 @@ export default function AdminConsulting() {
'Authorization': `Bearer ${import.meta.env.VITE_SUPABASE_ANON_KEY || ''}`,
},
body: JSON.stringify({
slot_id: selectedSlot.id,
date: selectedSlot.date,
start_time: selectedSlot.start_time,
end_time: selectedSlot.end_time,
topic: selectedSlot.topic_category || 'Konsultasi',
client_name: selectedSlot.profiles?.name || 'Client',
client_email: selectedSlot.profiles?.email || '',
notes: `Manual creation by admin for slot ${selectedSlot.id}`,
slot_id: selectedSession.id,
date: selectedSession.session_date,
start_time: selectedSession.start_time,
end_time: selectedSession.end_time,
topic: selectedSession.topic_category || 'Konsultasi',
client_name: selectedSession.profiles?.name || 'Client',
client_email: selectedSession.profiles?.email || '',
notes: `Manual creation by admin for session ${selectedSession.id}`,
}),
});
@@ -238,17 +216,32 @@ export default function AdminConsulting() {
}
};
const updateSlotStatus = async (slotId: string, newStatus: string) => {
const updateSessionStatus = async (sessionId: string, newStatus: string) => {
// If cancelling and session has a calendar event, delete it first
if (newStatus === 'cancelled') {
const session = sessions.find(s => s.id === sessionId);
if (session?.calendar_event_id) {
try {
await supabase.functions.invoke('delete-calendar-event', {
body: { session_id: sessionId }
});
} catch (err) {
console.log('Failed to delete calendar event:', err);
// Continue with status update even if calendar deletion fails
}
}
}
const { error } = await supabase
.from('consulting_slots')
.from('consulting_sessions')
.update({ status: newStatus })
.eq('id', slotId);
.eq('id', sessionId);
if (error) {
toast({ title: 'Error', description: error.message, variant: 'destructive' });
} else {
toast({ title: 'Berhasil', description: `Status diubah ke ${statusLabels[newStatus]?.label || newStatus}` });
fetchSlots();
fetchSessions();
}
};
@@ -263,59 +256,32 @@ export default function AdminConsulting() {
);
}
// Group slots by order_id
const groupedOrders: GroupedOrder[] = (() => {
const groups = new Map<string | null, ConsultingSlot[]>();
slots.forEach(slot => {
const orderId = slot.order_id || 'no-order';
if (!groups.has(orderId)) {
groups.set(orderId, []);
}
groups.get(orderId)!.push(slot);
});
return Array.from(groups.entries()).map(([orderId, slots]) => ({
orderId: orderId === 'no-order' ? null : orderId,
slots,
firstDate: slots[0].date,
meetLink: slots[0].meet_link,
profile: slots[0].profiles || null,
})).sort((a, b) => new Date(a.firstDate).getTime() - new Date(b.firstDate).getTime());
})();
// Filter orders based on search query and status
const filteredGroupedOrders = groupedOrders.filter(order => {
// Filter sessions based on search query and status
const filteredSessions = sessions.filter(session => {
// Search filter
if (searchQuery) {
const query = searchQuery.toLowerCase();
const firstSlot = order.slots[0];
const matchesSearch =
order.profile?.name?.toLowerCase().includes(query) ||
order.profile?.email?.toLowerCase().includes(query) ||
firstSlot.topic_category?.toLowerCase().includes(query) ||
order.orderId?.toLowerCase().includes(query);
session.profiles?.name?.toLowerCase().includes(query) ||
session.profiles?.email?.toLowerCase().includes(query) ||
session.topic_category?.toLowerCase().includes(query) ||
session.order_id?.toLowerCase().includes(query);
if (!matchesSearch) return false;
}
// Status filter
if (filterStatus !== 'all') {
const firstSlot = order.slots[0];
if (filterStatus === 'confirmed' && firstSlot.status !== 'confirmed') return false;
if (filterStatus === 'pending_payment' && firstSlot.status !== 'pending_payment') return false;
if (filterStatus === 'completed' && firstSlot.status !== 'completed') return false;
if (filterStatus === 'cancelled' && firstSlot.status !== 'cancelled') return false;
if (filterStatus !== 'all' && session.status !== filterStatus) {
return false;
}
return true;
});
const today = new Date().toISOString().split('T')[0];
const upcomingOrders = filteredGroupedOrders.filter(o => o.firstDate >= today && o.slots.some(s => s.status === 'confirmed' || s.status === 'pending_payment'));
const pastOrders = filteredGroupedOrders.filter(o => o.firstDate < today || o.slots.every(s => s.status === 'completed' || s.status === 'cancelled'));
const todayOrders = filteredGroupedOrders.filter(o => isToday(parseISO(o.firstDate)) && o.slots.some(s => s.status === 'confirmed'));
const upcomingSessions = filteredSessions.filter(s => s.session_date >= today && (s.status === 'confirmed' || s.status === 'pending_payment'));
const pastSessions = filteredSessions.filter(s => s.session_date < today || s.status === 'completed' || s.status === 'cancelled');
const todaySessions = filteredSessions.filter(s => isToday(parseISO(s.session_date)) && s.status === 'confirmed');
return (
<AppLayout>
@@ -329,34 +295,30 @@ export default function AdminConsulting() {
</p>
{/* Today's Sessions Alert */}
{todayOrders.length > 0 && (
{todaySessions.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 ({todayOrders.length})
Sesi Hari Ini ({todaySessions.length})
</h3>
<div className="mt-2 space-y-2">
{todayOrders.map((order) => {
const firstSlot = order.slots[0];
const lastSlot = order.slots[order.slots.length - 1];
return (
<div key={order.orderId || 'no-order'} className="flex items-center justify-between text-sm">
<span>
{firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)} • {order.profile?.name || 'N/A'} ({firstSlot.topic_category})
</span>
{order.meetLink ? (
<a href={order.meetLink} 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(firstSlot)}>
Tambah Link
</Button>
)}
</div>
);
})}
{todaySessions.map((session) => (
<div key={session.id} className="flex items-center justify-between text-sm">
<span>
{session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)} • {session.profiles?.name || 'N/A'} ({session.topic_category})
</span>
{session.meet_link ? (
<a href={session.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(session)}>
Tambah Link
</Button>
)}
</div>
))}
</div>
</CardContent>
</Card>
@@ -366,25 +328,25 @@ export default function AdminConsulting() {
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<Card className="border-2 border-border">
<CardContent className="pt-6">
<div className="text-2xl font-bold">{todayOrders.length}</div>
<div className="text-2xl font-bold">{todaySessions.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">{upcomingOrders.filter(o => o.slots.some(s => s.status === 'confirmed')).length}</div>
<div className="text-2xl font-bold">{upcomingSessions.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">{upcomingOrders.filter(o => !o.meetLink && o.slots.some(s => s.status === 'confirmed')).length}</div>
<div className="text-2xl font-bold">{upcomingSessions.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">{pastOrders.filter(o => o.slots.every(s => s.status === 'completed')).length}</div>
<div className="text-2xl font-bold">{pastSessions.filter(s => s.status === 'completed').length}</div>
<p className="text-sm text-muted-foreground">Selesai</p>
</CardContent>
</Card>
@@ -471,7 +433,7 @@ export default function AdminConsulting() {
{/* Result count */}
<p className="text-sm text-muted-foreground">
Menampilkan {filteredGroupedOrders.length} dari {groupedOrders.length} jadwal konsultasi
Menampilkan {filteredSessions.length} dari {sessions.length} jadwal konsultasi
</p>
</div>
</CardContent>
@@ -480,8 +442,8 @@ export default function AdminConsulting() {
{/* Tabs */}
<Tabs value={activeTab} onValueChange={setActiveTab}>
<TabsList className="mb-4">
<TabsTrigger value="upcoming">Mendatang ({upcomingOrders.length})</TabsTrigger>
<TabsTrigger value="past">Riwayat ({pastOrders.length})</TabsTrigger>
<TabsTrigger value="upcoming">Mendatang ({upcomingSessions.length})</TabsTrigger>
<TabsTrigger value="past">Riwayat ({pastSessions.length})</TabsTrigger>
</TabsList>
<TabsContent value="upcoming">
@@ -502,45 +464,42 @@ export default function AdminConsulting() {
</TableRow>
</TableHeader>
<TableBody>
{upcomingOrders.map((order) => {
const firstSlot = order.slots[0];
const lastSlot = order.slots[order.slots.length - 1];
const sessionCount = order.slots.length;
{upcomingSessions.map((session) => {
return (
<TableRow key={order.orderId || 'no-order'}>
<TableRow key={session.id || 'no-session'}>
<TableCell className="font-medium">
<div>
{format(parseISO(firstSlot.date), 'd MMM yyyy', { locale: id })}
{isToday(parseISO(firstSlot.date)) && <Badge className="ml-2 bg-primary">Hari Ini</Badge>}
{isTomorrow(parseISO(firstSlot.date)) && <Badge className="ml-2 bg-accent">Besok</Badge>}
{format(parseISO(session.session_date), 'd MMM yyyy', { locale: id })}
{isToday(parseISO(session.session_date)) && <Badge className="ml-2 bg-primary">Hari Ini</Badge>}
{isTomorrow(parseISO(session.session_date)) && <Badge className="ml-2 bg-accent">Besok</Badge>}
</div>
</TableCell>
<TableCell>
<div>
<div>{firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)}</div>
{sessionCount > 1 && (
<div className="text-xs text-muted-foreground">{sessionCount} sesi</div>
<div>{session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}</div>
{session.total_blocks > 1 && (
<div className="text-xs text-muted-foreground">{session.total_blocks} sesi</div>
)}
</div>
</TableCell>
<TableCell>
<div>
<p className="font-medium">{order.profile?.name || '-'}</p>
<p className="text-sm text-muted-foreground">{order.profile?.email}</p>
<p className="font-medium">{session.profiles?.name || '-'}</p>
<p className="text-sm text-muted-foreground">{session.profiles?.email}</p>
</div>
</TableCell>
<TableCell>
<Badge variant="outline">{firstSlot.topic_category}</Badge>
<Badge variant="outline">{session.topic_category}</Badge>
</TableCell>
<TableCell>
<Badge variant={statusLabels[firstSlot.status]?.variant || 'secondary'}>
{statusLabels[firstSlot.status]?.label || firstSlot.status}
<Badge variant={statusLabels[session.status]?.variant || 'secondary'}>
{statusLabels[session.status]?.label || session.status}
</Badge>
</TableCell>
<TableCell>
{order.meetLink ? (
{session.meet_link ? (
<a
href={order.meetLink}
href={session.meet_link}
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline flex items-center gap-1"
@@ -553,21 +512,21 @@ export default function AdminConsulting() {
)}
</TableCell>
<TableCell className="text-right space-x-2">
{firstSlot.status === 'confirmed' && (
{session.status === 'confirmed' && (
<>
<Button
variant="outline"
size="sm"
onClick={() => openMeetDialog(firstSlot)}
onClick={() => openMeetDialog(session)}
className="border-2"
>
<LinkIcon className="w-4 h-4 mr-1" />
{order.meetLink ? 'Edit' : 'Link'}
{session.meet_link ? 'Edit' : 'Link'}
</Button>
<Button
variant="outline"
size="sm"
onClick={() => updateSlotStatus(firstSlot.id, 'completed')}
onClick={() => updateSessionStatus(session.id, 'completed')}
className="border-2 text-green-600"
>
<CheckCircle className="w-4 h-4" />
@@ -575,7 +534,7 @@ export default function AdminConsulting() {
<Button
variant="outline"
size="sm"
onClick={() => updateSlotStatus(firstSlot.id, 'cancelled')}
onClick={() => updateSessionStatus(session.id, 'cancelled')}
className="border-2 text-destructive"
>
<XCircle className="w-4 h-4" />
@@ -586,7 +545,7 @@ export default function AdminConsulting() {
</TableRow>
);
})}
{upcomingOrders.length === 0 && (
{upcomingSessions.length === 0 && (
<TableRow>
<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
Tidak ada jadwal mendatang
@@ -601,27 +560,24 @@ export default function AdminConsulting() {
{/* Mobile Card Layout */}
<div className="md:hidden space-y-3">
{upcomingOrders.map((order) => {
const firstSlot = order.slots[0];
const lastSlot = order.slots[order.slots.length - 1];
const sessionCount = order.slots.length;
{upcomingSessions.map((session) => {
return (
<div key={order.orderId || 'no-order'} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card shadow-sm">
<div key={session.id || 'no-session'} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card shadow-sm">
<div>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap mb-1">
<h3 className="font-semibold text-sm">
{format(parseISO(firstSlot.date), 'd MMM yyyy', { locale: id })}
{format(parseISO(session.session_date), 'd MMM yyyy', { locale: id })}
</h3>
<Badge variant={statusLabels[firstSlot.status]?.variant || 'secondary'}>
{statusLabels[firstSlot.status]?.label || firstSlot.status}
<Badge variant={statusLabels[session.status]?.variant || 'secondary'}>
{statusLabels[session.status]?.label || session.status}
</Badge>
</div>
<p className="text-sm text-muted-foreground">
{firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)}
{sessionCount > 1 && (
<span className="ml-2 text-xs">({sessionCount} sesi)</span>
{session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}
{session.total_blocks > 1 && (
<span className="ml-2 text-xs">({session.total_blocks} sesi)</span>
)}
</p>
</div>
@@ -630,18 +586,18 @@ export default function AdminConsulting() {
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Klien:</span>
<div className="text-right">
<p className="text-sm font-medium">{order.profile?.name || '-'}</p>
<p className="text-sm font-medium">{session.profiles?.name || '-'}</p>
</div>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Kategori:</span>
<Badge variant="outline" className="text-xs">{firstSlot.topic_category}</Badge>
<Badge variant="outline" className="text-xs">{session.topic_category}</Badge>
</div>
{order.meetLink && (
{session.meet_link && (
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Meet:</span>
<a
href={order.meetLink}
href={session.meet_link}
target="_blank"
rel="noopener noreferrer"
className="text-primary hover:underline text-sm flex items-center gap-1"
@@ -652,21 +608,21 @@ export default function AdminConsulting() {
</div>
)}
</div>
{firstSlot.status === 'confirmed' && (
{session.status === 'confirmed' && (
<div className="flex gap-2 pt-2 border-t border-border">
<Button
variant="outline"
size="sm"
onClick={() => openMeetDialog(firstSlot)}
onClick={() => openMeetDialog(session)}
className="flex-1 border-2 text-xs"
>
<LinkIcon className="w-3 h-3 mr-1" />
{order.meetLink ? 'Edit' : 'Link'}
{session.meet_link ? 'Edit' : 'Link'}
</Button>
<Button
variant="outline"
size="sm"
onClick={() => updateSlotStatus(firstSlot.id, 'completed')}
onClick={() => updateSessionStatus(session.id, 'completed')}
className="flex-1 border-2 text-green-600 text-xs"
>
<CheckCircle className="w-3 h-3 mr-1" />
@@ -675,7 +631,7 @@ export default function AdminConsulting() {
<Button
variant="outline"
size="sm"
onClick={() => updateSlotStatus(firstSlot.id, 'cancelled')}
onClick={() => updateSessionStatus(session.id, 'cancelled')}
className="flex-1 border-2 text-destructive text-xs"
>
<XCircle className="w-3 h-3 mr-1" />
@@ -687,7 +643,7 @@ export default function AdminConsulting() {
</div>
);
})}
{upcomingOrders.length === 0 && (
{upcomingSessions.length === 0 && (
<div className="text-center py-8 text-muted-foreground">
Tidak ada jadwal mendatang
</div>
@@ -711,32 +667,29 @@ export default function AdminConsulting() {
</TableRow>
</TableHeader>
<TableBody>
{pastOrders.slice(0, 20).map((order) => {
const firstSlot = order.slots[0];
const lastSlot = order.slots[order.slots.length - 1];
const sessionCount = order.slots.length;
{pastSessions.slice(0, 20).map((session) => {
return (
<TableRow key={order.orderId || 'no-order'}>
<TableCell>{format(parseISO(firstSlot.date), 'd MMM yyyy', { locale: id })}</TableCell>
<TableRow key={session.id || 'no-session'}>
<TableCell>{format(parseISO(session.session_date), 'd MMM yyyy', { locale: id })}</TableCell>
<TableCell>
<div>
<div>{firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)}</div>
{sessionCount > 1 && (
<div className="text-xs text-muted-foreground">{sessionCount} sesi</div>
<div>{session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}</div>
{session.total_blocks > 1 && (
<div className="text-xs text-muted-foreground">{session.total_blocks} sesi</div>
)}
</div>
</TableCell>
<TableCell>{order.profile?.name || '-'}</TableCell>
<TableCell><Badge variant="outline">{firstSlot.topic_category}</Badge></TableCell>
<TableCell>{session.profiles?.name || '-'}</TableCell>
<TableCell><Badge variant="outline">{session.topic_category}</Badge></TableCell>
<TableCell>
<Badge variant={statusLabels[firstSlot.status]?.variant || 'secondary'}>
{statusLabels[firstSlot.status]?.label || firstSlot.status}
<Badge variant={statusLabels[session.status]?.variant || 'secondary'}>
{statusLabels[session.status]?.label || session.status}
</Badge>
</TableCell>
</TableRow>
);
})}
{pastOrders.length === 0 && (
{pastSessions.length === 0 && (
<TableRow>
<TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
Belum ada riwayat konsultasi
@@ -751,44 +704,41 @@ export default function AdminConsulting() {
{/* Mobile Card Layout */}
<div className="md:hidden space-y-3">
{pastOrders.slice(0, 20).map((order) => {
const firstSlot = order.slots[0];
const lastSlot = order.slots[order.slots.length - 1];
const sessionCount = order.slots.length;
{pastSessions.slice(0, 20).map((session) => {
return (
<div key={order.orderId || 'no-order'} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card shadow-sm">
<div key={session.id || 'no-session'} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card shadow-sm">
<div>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<h3 className="font-semibold text-sm">
{format(parseISO(firstSlot.date), 'd MMM yyyy', { locale: id })}
{format(parseISO(session.session_date), 'd MMM yyyy', { locale: id })}
</h3>
<p className="text-sm text-muted-foreground">
{firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)}
{sessionCount > 1 && (
<span className="ml-2 text-xs">({sessionCount} sesi)</span>
{session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}
{session.total_blocks > 1 && (
<span className="ml-2 text-xs">({session.total_blocks} sesi)</span>
)}
</p>
</div>
<Badge variant={statusLabels[firstSlot.status]?.variant || 'secondary'}>
{statusLabels[firstSlot.status]?.label || firstSlot.status}
<Badge variant={statusLabels[session.status]?.variant || 'secondary'}>
{statusLabels[session.status]?.label || session.status}
</Badge>
</div>
<div className="space-y-1">
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Klien:</span>
<span className="text-sm">{order.profile?.name || '-'}</span>
<span className="text-sm">{session.profiles?.name || '-'}</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-muted-foreground">Kategori:</span>
<Badge variant="outline" className="text-xs">{firstSlot.topic_category}</Badge>
<Badge variant="outline" className="text-xs">{session.topic_category}</Badge>
</div>
</div>
</div>
</div>
);
})}
{pastOrders.length === 0 && (
{pastSessions.length === 0 && (
<div className="text-center py-8 text-muted-foreground">
Belum ada riwayat konsultasi
</div>
@@ -813,13 +763,13 @@ export default function AdminConsulting() {
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
{selectedSlot && (
{selectedSession && (
<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?.name}</p>
<p><strong>Topik:</strong> {selectedSlot.topic_category}</p>
{selectedSlot.notes && <p><strong>Catatan:</strong> {selectedSlot.notes}</p>}
<p><strong>Tanggal:</strong> {format(parseISO(selectedSession.session_date), 'd MMMM yyyy', { locale: id })}</p>
<p><strong>Waktu:</strong> {selectedSession.start_time.substring(0, 5)} - {selectedSession.end_time.substring(0, 5)}</p>
<p><strong>Klien:</strong> {selectedSession.profiles?.name}</p>
<p><strong>Topik:</strong> {selectedSession.topic_category}</p>
{selectedSession.notes && <p><strong>Catatan:</strong> {selectedSession.notes}</p>}
</div>
)}
@@ -833,9 +783,9 @@ export default function AdminConsulting() {
</div>
<div className="flex gap-2">
<Button
onClick={createMeetLink}
variant="outline"
<Button
onClick={createMeetLink}
variant="outline"
className="flex-1 border-2"
disabled={creatingMeet}
>
@@ -852,7 +802,7 @@ export default function AdminConsulting() {
{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

92
src/pages/member/OrderDetail.tsx
View File

@@ -10,7 +10,7 @@ import { Skeleton } from "@/components/ui/skeleton";
import { Separator } from "@/components/ui/separator";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { formatIDR, formatDate } from "@/lib/format";
import { ArrowLeft, Package, CreditCard, Calendar, AlertCircle, Video, Clock, RefreshCw } from "lucide-react";
import { ArrowLeft, Package, CreditCard, Calendar as CalendarIcon, AlertCircle, Video, Clock, RefreshCw, Download } from "lucide-react";
import { QRCodeSVG } from "qrcode.react";
import { getPaymentStatusLabel, getPaymentStatusColor, getProductTypeLabel } from "@/lib/statusHelpers";
@@ -44,11 +44,13 @@ interface Order {
interface ConsultingSlot {
id: string;
date: string;
session_date: string;
start_time: string;
end_time: string;
status: string;
meet_link?: string;
topic_category?: string;
notes?: string;
}
export default function OrderDetail() {
@@ -123,15 +125,15 @@ export default function OrderDetail() {
} else {
setOrder(data);
// Always fetch consulting slots for this order (consulting orders don't have order_items)
const { data: slots } = await supabase
.from("consulting_slots")
// Always fetch consulting sessions for this order (consulting orders don't have order_items)
const { data: sessions } = await supabase
.from("consulting_sessions")
.select("*")
.eq("order_id", id)
.order("date", { ascending: true });
.order("session_date", { ascending: true });
if (slots && slots.length > 0) {
setConsultingSlots(slots as ConsultingSlot[]);
if (sessions && sessions.length > 0) {
setConsultingSlots(sessions as ConsultingSlot[]);
}
}
@@ -246,6 +248,29 @@ export default function OrderDetail() {
}
};
// Generate Google Calendar link for adding to user's calendar
const generateCalendarLink = (session: ConsultingSlot) => {
if (!session.meet_link) return null;
const startDate = new Date(`${session.session_date}T${session.start_time}`);
const endDate = new Date(`${session.session_date}T${session.end_time}`);
// Format dates for Google Calendar (YYYYMMDDTHHmmssZ)
const formatDate = (date: Date) => {
return date.toISOString().replace(/-|:|\.\d\d\d/g, '');
};
const params = new URLSearchParams({
action: 'TEMPLATE',
text: `Konsultasi: ${session.topic_category || 'Sesi Konsultasi'}`,
dates: `${formatDate(startDate)}/${formatDate(endDate)}`,
details: `Link Meet: ${session.meet_link}${session.notes ? `\n\nCatatan: ${session.notes}` : ''}`,
location: session.meet_link,
});
return `https://www.google.com/calendar/render?${params.toString()}`;
};
if (authLoading || loading) {
return (
<AppLayout>
@@ -491,7 +516,7 @@ export default function OrderDetail() {
{/* Smart Item/Service Display */}
{consultingSlots.length > 0 ? (
// === Consulting Orders (NO order_items, has consulting_slots) ===
// === Consulting Orders (NO order_items, has consulting_sessions) ===
<>
<Card className="border-2 border-primary bg-primary/5 mb-6">
<CardHeader>
@@ -507,17 +532,14 @@ export default function OrderDetail() {
<div>
<p className="text-muted-foreground">Waktu Konsultasi</p>
<p className="font-bold text-lg">
{consultingSlots[0].start_time.substring(0,5)} - {consultingSlots[consultingSlots.length-1].end_time.substring(0,5)}
</p>
<p className="text-xs text-muted-foreground mt-1">
{consultingSlots.length} blok ({consultingSlots.length * 45} menit)
{consultingSlots[0].start_time.substring(0,5)} - {consultingSlots[0].end_time.substring(0,5)}
</p>
</div>
<div>
<p className="text-muted-foreground">Tanggal</p>
<p className="font-medium">
{new Date(consultingSlots[0].date).toLocaleDateString("id-ID", {
{new Date(consultingSlots[0].session_date).toLocaleDateString("id-ID", {
weekday: "long",
year: "numeric",
month: "long",
@@ -526,17 +548,41 @@ export default function OrderDetail() {
</p>
</div>
{consultingSlots[0]?.meet_link && (
{consultingSlots[0]?.topic_category && (
<div>
<p className="text-muted-foreground text-sm">Google Meet Link</p>
<a
href={consultingSlots[0].meet_link}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-primary hover:underline text-sm"
<p className="text-muted-foreground">Kategori</p>
<p className="font-medium">{consultingSlots[0].topic_category}</p>
</div>
)}
{consultingSlots[0]?.meet_link && (
<div className="space-y-2">
<div>
<p className="text-muted-foreground text-sm">Google Meet Link</p>
<a
href={consultingSlots[0].meet_link}
target="_blank"
rel="noopener noreferrer"
className="font-medium text-primary hover:underline text-sm"
>
{consultingSlots[0].meet_link.substring(0, 40)}...
</a>
</div>
<Button
asChild
variant="outline"
size="sm"
className="w-full border-2"
>
{consultingSlots[0].meet_link.substring(0, 40)}...
</a>
<a
href={generateCalendarLink(consultingSlots[0]) || '#'}
target="_blank"
rel="noopener noreferrer"
>
<Download className="w-4 h-4 mr-2" />
Tambah ke Kalender
</a>
</Button>
</div>
)}
</div>