Add calendar event lifecycle management and "Add to Calendar" feature
- 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
@@ -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', {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user