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>

src/components/reviews/ConsultingHistory.tsx

@@ -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" />