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>

CALENDAR_INTEGRATION.md

@@ -0,0 +1,444 @@
+# Calendar Event Management - Complete Implementation
+
+## Summary
+
+✅ **Google Calendar integration is now fully bidirectional:**
+- ✅ Creates events when sessions are booked
+- ✅ Stores Google Calendar event ID for tracking
+- ✅ Deletes events when sessions are cancelled
+- ✅ Members can add events to their own calendar with one click
+
+---
+
+## What Was Fixed
+
+### 1. ✅ `create-google-meet-event` Updated to Use `consulting_sessions`
+**File**: `supabase/functions/create-google-meet-event/index.ts`
+
+**Changes:**
+- Removed old `consulting_slots` queries (lines 317-334, 355-373)
+- Now updates `consulting_sessions` table instead
+- Stores both `meet_link` AND `calendar_event_id` in the session
+- Much simpler - just update one row per session
+
+**Before:**
+```typescript
+// Had to check order_id and update multiple slots
+const { data: slotData } = await supabase
+  .from("consulting_slots")
+  .select("order_id")
+  .eq("id", body.slot_id)
+  .single();
+
+if (slotData?.order_id) {
+  await supabase
+    .from("consulting_slots")
+    .update({ meet_link: meetLink })
+    .eq("order_id", slotData.order_id);
+}
+```
+
+**After:**
+```typescript
+// Just update the session directly
+await supabase
+  .from("consulting_sessions")
+  .update({
+    meet_link: meetLink,
+    calendar_event_id: eventDataResult.id  // ← NEW: Store event ID!
+  })
+  .eq("id", body.slot_id);
+```
+
+---
+
+### 2. ✅ Database Migration - Add `calendar_event_id` Column
+**File**: `supabase/migrations/20241228_add_calendar_event_id.sql`
+
+```sql
+-- Add column to store Google Calendar event ID
+ALTER TABLE consulting_sessions
+ADD COLUMN calendar_event_id TEXT;
+
+-- Index for faster lookups
+CREATE INDEX idx_consulting_sessions_calendar_event
+ON consulting_sessions(calendar_event_id);
+
+COMMENT ON COLUMN consulting_sessions.calendar_event_id
+IS 'Google Calendar event ID - used to delete events when sessions are cancelled/refunded';
+```
+
+**What this does:**
+- Stores the Google Calendar event ID for each consulting session
+- Allows us to delete the event later when session is cancelled/refunded
+- No more orphaned calendar events!
+
+---
+
+### 3. ✅ New Edge Function: `delete-calendar-event`
+**File**: `supabase/functions/delete-calendar-event/index.ts`
+
+**What it does:**
+1. Takes a `session_id` as input
+2. Retrieves the session's `calendar_event_id`
+3. Uses Google Calendar API to DELETE the event
+4. Clears the `calendar_event_id` from the database
+
+**API Usage:**
+```typescript
+await supabase.functions.invoke('delete-calendar-event', {
+  body: { session_id: 'session-uuid-here' }
+});
+```
+
+**Google Calendar API Call:**
+```http
+DELETE https://www.googleapis.com/calendar/v3/calendars/{calendarId}/events/{eventId}
+Authorization: Bearer {access_token}
+```
+
+**Error Handling:**
+- If event already deleted (410 Gone): Logs and continues
+- If calendar not configured: Returns success (graceful degradation)
+- If deletion fails: Logs error but doesn't block the operation
+
+---
+
+### 4. ✅ Admin Panel Integration - Auto-Delete on Cancel
+**File**: `src/pages/admin/AdminConsulting.tsx`
+
+**Changes:**
+- Added `calendar_event_id` to `ConsultingSession` interface
+- Updated `updateSessionStatus()` to call `delete-calendar-event` before cancelling
+- Calendar events are automatically deleted when admin cancels a session
+
+**Code:**
+```typescript
+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
+      }
+    }
+  }
+
+  // Update session status
+  const { error } = await supabase
+    .from('consulting_sessions')
+    .update({ status: newStatus })
+    .eq('id', sessionId);
+
+  if (!error) {
+    toast({ title: 'Berhasil', description: `Status diubah ke ${statusLabels[newStatus]?.label || newStatus}` });
+    fetchSessions();
+  }
+};
+```
+
+---
+
+### 5. ✅ "Add to Calendar" Button for Members
+**Files**: `src/pages/member/OrderDetail.tsx`, `src/components/reviews/ConsultingHistory.tsx`
+
+**What it does:**
+- Allows members to add consulting sessions to their own Google Calendar
+- Uses Google Calendar's public URL format (no OAuth required)
+- One-click addition with event details pre-filled
+
+**How it works:**
+
+```typescript
+// Generate Google Calendar link
+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()}`;
+};
+```
+
+**UI Implementation:**
+
+**OrderDetail.tsx** (after meet link):
+```tsx
+{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">
+        {consultingSlots[0].meet_link.substring(0, 40)}...
+      </a>
+    </div>
+    <Button asChild variant="outline" size="sm" className="w-full border-2">
+      <a href={generateCalendarLink(consultingSlots[0]) || '#'} target="_blank">
+        <Download className="w-4 h-4 mr-2" />
+        Tambah ke Kalender
+      </a>
+    </Button>
+  </div>
+)}
+```
+
+**ConsultingHistory.tsx** (upcoming sessions):
+```tsx
+{session.meet_link && (
+  <>
+    <Button asChild size="sm" variant="outline" className="border-2">
+      <a href={session.meet_link} target="_blank">Join</a>
+    </Button>
+    <Button asChild size="sm" variant="outline" className="border-2">
+      <a href={generateCalendarLink(session) || '#'} target="_blank" title="Tambah ke Kalender">
+        <Download className="w-4 h-4" />
+      </a>
+    </Button>
+  </>
+)}
+```
+
+**Google Calendar URL Format:**
+
+```
+https://www.google.com/calendar/render?action=TEMPLATE&text=Title&dates=StartDate/EndDate&details=Description&location=Location
+```
+
+**Benefits:**
+- ✅ No OAuth required for users
+- ✅ Works with any calendar app that supports Google Calendar links
+- ✅ Pre-fills all event details (title, time, description, location)
+- ✅ Opens in user's default calendar app
+- ✅ One-click addition
+
+---
+
+## Event Flow
+
+### Booking Flow (Create)
+```
+User books consulting
+    ↓
+ConsultingBooking.tsx creates session in DB
+    ↓
+handle-order-paid edge function triggered
+    ↓
+Calls create-google-meet-event
+    ↓
+Creates event in Google Calendar
+    ↓
+Returns meet_link + event_id
+    ↓
+Updates consulting_sessions:
+  - meet_link = "https://meet.google.com/xxx-xxx"
+  - calendar_event_id = "event_id_from_google"
+```
+
+### Cancellation Flow (Delete)
+```
+Admin cancels session in AdminConsulting.tsx
+    ↓
+Calls delete-calendar-event edge function
+    ↓
+Retrieves calendar_event_id from consulting_sessions
+    ↓
+Calls Google Calendar API to DELETE event
+    ↓
+Clears calendar_event_id from database
+    ↓
+Updates session status to 'cancelled'
+```
+
+---
+
+## Google Calendar API Response
+
+When an event is created, Google returns:
+
+```json
+{
+  "id": "a1b2c3d4e5f6g7h8i9j0",        // ← Calendar event ID
+  "status": "confirmed",
+  "htmlLink": "https://www.google.com/calendar/event?eid=a1b2c3d4...",
+  "created": "2024-12-28T10:00:00.000Z",
+  "updated": "2024-12-28T10:00:00.000Z",
+  "summary": "Konsultasi: Career Guidance - John Doe",
+  "description": "Client: john@example.com\n\nNotes: ...\n\nSlot ID: uuid-here",
+  "start": {
+    "dateTime": "2025-01-15T09:00:00+07:00",
+    "timeZone": "Asia/Jakarta"
+  },
+  "end": {
+    "dateTime": "2025-01-15T12:00:00+07:00",
+    "timeZone": "Asia/Jakarta"
+  },
+  "conferenceData": {
+    "entryPoints": [
+      {
+        "entryPointType": "video",
+        "uri": "https://meet.google.com/abc-defg-hij",  // ← Meet link
+        "label": "meet.google.com"
+      }
+    ]
+  }
+}
+```
+
+**Important fields:**
+- `id` - Event ID (stored in `calendar_event_id`)
+- `conferenceData.entryPoints[0].uri` - Meet link (stored in `meet_link`)
+
+---
+
+## Testing Checklist
+
+### ✅ Test Event Creation
+- [ ] Book a consulting session
+- [ ] Verify Google Calendar event is created
+- [ ] Verify `meet_link` is saved to `consulting_sessions`
+- [ ] Verify `calendar_event_id` is saved to `consulting_sessions`
+
+### ✅ Test Event Deletion
+- [ ] Cancel a session in admin panel
+- [ ] Verify Google Calendar event is deleted
+- [ ] Verify `calendar_event_id` is cleared from database
+- [ ] Verify session status is set to 'cancelled'
+
+### ✅ Test Edge Cases
+- [ ] Cancel session without calendar event (should not fail)
+- [ ] Cancel session when Google Calendar not configured (should not fail)
+- [ ] Delete already-deleted event (410 Gone - should handle gracefully)
+
+---
+
+## SQL Migration Steps
+
+Run this migration to add the `calendar_event_id` column:
+
+```bash
+# Connect to your Supabase database
+psql -h db.xxx.supabase.co -U postgres -d postgres
+
+# Or use Supabase Dashboard:
+# SQL Editor → Paste and Run
+```
+
+```sql
+-- Add calendar_event_id column
+ALTER TABLE consulting_sessions
+ADD COLUMN calendar_event_id TEXT;
+
+-- Create index
+CREATE INDEX idx_consulting_sessions_calendar_event
+ON consulting_sessions(calendar_event_id);
+
+-- Verify
+SELECT
+  id,
+  session_date,
+  start_time,
+  end_time,
+  meet_link,
+  calendar_event_id
+FROM consulting_sessions;
+```
+
+---
+
+## Deploy Edge Functions
+
+```bash
+# Deploy the updated create-google-meet-event function
+supabase functions deploy create-google-meet-event
+
+# Deploy the new delete-calendar-event function
+supabase functions deploy delete-calendar-event
+```
+
+Or use the Supabase Dashboard:
+- Edge Functions → Select function → Deploy
+
+---
+
+## Future Enhancements
+
+### Option 1: Auto-reschedule
+If session date/time changes:
+- Delete old event
+- Create new event with updated time
+- Update `calendar_event_id` in database
+
+### Option 2: Batch Delete
+If multiple sessions are cancelled (e.g., order refund):
+- Get all `calendar_event_id`s for the order
+- Delete all events in batch
+- Clear all `calendar_event_id`s
+
+### Option 3: Event Sync
+Periodic sync to ensure database and calendar are in sync:
+- Check all upcoming sessions
+- Verify events exist in Google Calendar
+- Recreate if missing (with warning)
+
+---
+
+## Troubleshooting
+
+### Issue: Event not deleted when session cancelled
+**Check:**
+1. Does the session have `calendar_event_id`?
+   ```sql
+   SELECT id, calendar_event_id FROM consulting_sessions WHERE id = 'session-uuid';
+   ```
+2. Are the OAuth credentials valid?
+   ```sql
+   SELECT google_oauth_config FROM platform_settings;
+   ```
+3. Check the edge function logs:
+   ```bash
+   supabase functions logs delete-calendar-event
+   ```
+
+### Issue: "Token exchange failed"
+**Solution:** Refresh OAuth credentials in settings
+- Go to: Admin → Settings → Integrations
+- Update `google_oauth_config` with new `refresh_token`
+
+### Issue: Event already deleted (410 Gone)
+**This is normal!** The function handles this gracefully and continues.
+
+---
+
+## Files Modified
+
+1. ✅ `supabase/functions/create-google-meet-event/index.ts` - Use consulting_sessions, store calendar_event_id
+2. ✅ `supabase/migrations/20241228_add_calendar_event_id.sql` - Add calendar_event_id column
+3. ✅ `supabase/functions/delete-calendar-event/index.ts` - NEW: Delete calendar events
+4. ✅ `src/pages/admin/AdminConsulting.tsx` - Auto-delete on cancel, add calendar_event_id to interface
+5. ✅ `src/pages/member/OrderDetail.tsx` - Add "Tambah ke Kalender" button
+6. ✅ `src/components/reviews/ConsultingHistory.tsx` - Add "Tambah ke Kalender" button
+
+---
+
+**All set!** 🎉
+Your consulting sessions now have full calendar lifecycle management.

MIGRATION_GUIDE.md

@@ -0,0 +1,227 @@
+# Consulting Slots Migration - Code Updates Summary
+
+## ✅ Completed Files
+
+### 1. src/pages/ConsultingBooking.tsx ✅
+- Updated interface: `ConfirmedSlot` → `ConfirmedSession` with `session_date` field
+- Updated `fetchConfirmedSlots()` to query `consulting_sessions` table
+- Updated slot creation logic to:
+  - Create ONE `consulting_sessions` row with session-level data
+  - Create MULTIPLE `consulting_time_slots` rows for each 45-min block
+- Conflict checking logic already compatible (uses `start_time`/`end_time` fields)
+
+### 2. supabase/functions/create-meet-link/index.ts ✅
+- Changed update query from `consulting_slots` to `consulting_sessions`
+- Updates meet_link once per session instead of once per slot
+
+## ⏳ In Progress
+
+### 3. src/pages/admin/AdminConsulting.tsx (PARTIAL)
+**Updated:**
+- Interface: `ConsultingSlot` → `ConsultingSession`
+- State: `slots` → `sessions`, `selectedSlot` → `selectedSession`
+- `fetchSessions()` - now queries `consulting_sessions` with profiles join
+- `openMeetDialog()` - uses session parameter
+- `saveMeetLink()` - updates `consulting_sessions` table
+- `createMeetLink()` - uses session fields (`session_date`, etc.)
+- `updateSessionStatus()` - renamed from `updateSlotStatus()`
+- Filtering logic - simplified (no grouping needed)
+- Stats sections - use `sessions` arrays
+- Today's Sessions Alert - uses `todaySessions` array
+
+**Still Needs Manual Update:**
+Replace all remaining references in the table rendering sections (lines ~428-end):
+
+```typescript
+// FIND AND REPLACE THESE PATTERNS:
+
+// 1. Tabs list:
+<TabsTrigger value="upcoming">Mendatang ({upcomingOrders.length})</TabsTrigger>
+<TabsTrigger value="past">Riwayat ({pastOrders.length})</TabsTrigger>
+// CHANGE TO:
+<TabsTrigger value="upcoming">Mendatang ({upcomingSessions.length})</TabsTrigger>
+<TabsTrigger value="past">Riwayat ({pastSessions.length})</TabsTrigger>
+
+// 2. Desktop table - upcoming:
+{upcomingOrders.map((order) => {
+  const firstSlot = order.slots[0];
+  const lastSlot = order.slots[order.slots.length - 1];
+  const sessionCount = order.slots.length;
+  return (
+    <TableRow key={order.orderId || 'no-order'}>
+// CHANGE TO:
+{upcomingSessions.map((session) => {
+  return (
+    <TableRow key={session.id}>
+
+// 3. Date cell:
+{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>}
+// CHANGE TO:
+{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>}
+
+// 4. Time cell:
+<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>
+)}
+// CHANGE TO:
+<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} blok</div>
+)}
+
+// 5. Client cell:
+<p className="font-medium">{order.profile?.name || '-'}</p>
+<p className="text-sm text-muted-foreground">{order.profile?.email}</p>
+// CHANGE TO:
+<p className="font-medium">{session.profiles?.name || '-'}</p>
+<p className="text-sm text-muted-foreground">{session.profiles?.email}</p>
+
+// 6. Category cell:
+<Badge variant="outline">{firstSlot.topic_category}</Badge>
+// CHANGE TO:
+<Badge variant="outline">{session.topic_category}</Badge>
+
+// 7. Status cell:
+<Badge variant={statusLabels[firstSlot.status]?.variant || 'secondary'}>
+  {statusLabels[firstSlot.status]?.label || firstSlot.status}
+</Badge>
+// CHANGE TO:
+<Badge variant={statusLabels[session.status]?.variant || 'secondary'}>
+  {statusLabels[session.status]?.label || session.status}
+</Badge>
+
+// 8. Meet link cell:
+{order.meetLink ? (
+  <a href={order.meetLink} ...>
+// CHANGE TO:
+{session.meet_link ? (
+  <a href={session.meet_link} ...>
+
+// 9. Action buttons:
+onClick={() => openMeetDialog(firstSlot)}
+onClick={() => updateSlotStatus(firstSlot.id, 'completed')}
+onClick={() => updateSlotStatus(firstSlot.id, 'cancelled')}
+// CHANGE TO:
+onClick={() => openMeetDialog(session)}
+onClick={() => updateSessionStatus(session.id, 'completed')}
+onClick={() => updateSessionStatus(session.id, 'cancelled')}
+
+// 10. Empty state:
+<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
+  Tidak ada jadwal mendatang
+</TableCell>
+// CHANGE TO (same colSpan):
+<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
+  Tidak ada jadwal mendatang
+</TableCell>
+
+// 11. Mobile card layout - same pattern as desktop:
+{upcomingOrders.map((order) => {
+  const firstSlot = order.slots[0];
+// CHANGE TO:
+{upcomingSessions.map((session) => {
+
+// Then replace all:
+// order.orderId → session.id
+// order.slots[0] / firstSlot → session
+// order.slots[order.slots.length - 1] / lastSlot → session
+// order.profile → session.profiles
+// order.meetLink → session.meet_link
+// sessionCount → session.total_blocks
+
+// 12. Past sessions tab - same pattern:
+{pastOrders.slice(0, 20).map((order) => {
+// CHANGE TO:
+{pastSessions.slice(0, 20).map((session) => {
+
+// 13. Dialog - selectedSlot references:
+{selectedSlot && (
+  <div className="p-3 bg-muted rounded-lg text-sm space-y-1">
+    <p><strong>Tanggal:</strong> {format(parseISO(selectedSlot.date), 'd MMMM yyyy', { locale: id })}</p>
+    <p><strong>Waktu:</strong> {selectedSlot.start_time.substring(0, 5)} - {selectedSlot.end_time.substring(0, 5)}</p>
+    <p><strong>Klien:</strong> {selectedSlot.profiles?.name}</p>
+    <p><strong>Topik:</strong> {selectedSlot.topic_category}</p>
+    {selectedSlot.notes && <p><strong>Catatan:</strong> {selectedSlot.notes}</p>}
+  </div>
+)}
+// CHANGE TO:
+{selectedSession && (
+  <div className="p-3 bg-muted rounded-lg text-sm space-y-1">
+    <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>
+)}
+```
+
+## 📋 Remaining Files to Update
+
+### 4. src/components/reviews/ConsultingHistory.tsx
+**Changes needed:**
+- Change query from `consulting_slots` to `consulting_sessions`
+- Remove grouping logic (no longer needed)
+- Update interface to use `ConsultingSession` with fields:
+  - `session_date` (instead of `date`)
+  - `total_duration_minutes`
+  - `total_blocks`
+  - `total_price`
+- Update all field references in rendering
+
+### 5. src/pages/member/OrderDetail.tsx
+**Changes needed:**
+- Find consulting_slots query and change to consulting_sessions
+- Update join to include session data
+- Update field names in rendering (date → session_date, etc.)
+
+### 6. supabase/functions/handle-order-paid/index.ts
+**Changes needed:**
+- Change status update from `consulting_slots` to `consulting_sessions`
+- Update logic to set `status = 'confirmed'` for session
+
+---
+
+## Quick Reference: Field Name Changes
+
+| Old (consulting_slots) | New (consulting_sessions) |
+|------------------------|---------------------------|
+| `date` | `session_date` |
+| `slots` array | Single `session` object |
+| `slots[0]` / `firstSlot` | `session` |
+| `slots[length-1]` / `lastSlot` | `session` |
+| `order_id` (for grouping) | `id` (session ID) |
+| `meet_link` (per slot) | `meet_link` (per session) |
+| Row count × 45min | `total_duration_minutes` |
+| Row count | `total_blocks` |
+
+---
+
+## Testing Checklist
+
+After migration:
+- [ ] Test booking flow - creates session + time slots
+- [ ] Test availability checking - uses sessions table
+- [ ] Test meet link creation - updates session
+- [ ] Test admin consulting page - displays sessions
+- [ ] Test user consulting history - displays sessions
+- [ ] Test order detail - shows consulting session info
+- [ ] Test payment confirmation - updates session status
+
+---
+
+## Rollback Plan (if needed)
+
+If issues arise:
+1. Restore old table: `ALTER TABLE consulting_slots RENAME TO consulting_slots_backup;`
+2. Create view: `CREATE VIEW consulting_slots AS SELECT ... FROM consulting_sessions JOIN consulting_time_slots;`
+3. Revert code changes from git
+
+---
+
+**Note:** All SQL tables should already be created. This document covers code changes only.

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;
-}
+  total_blocks: number;
-
-interface GroupedOrder {
-  orderId: string | null;
-  slots: ConsultingSlot[];
-  firstDate: string;
-  meetLink: string | null;
 }
 
 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
+    // Fetch consulting sessions
-    const { data: slotsData } = await supabase
+    const { data: sessionsData } = await supabase
-      .from('consulting_slots')
+      .from('consulting_sessions')
-      .select('id, date, start_time, end_time, status, topic_category, meet_link, order_id')
+      .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) {
+    if (sessionsData) {
-      setSlots(slotsData);
+      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 openReviewModal = (session: ConsultingSession) => {
-    const firstSlot = order.slots[0];
+    const dateLabel = format(new Date(session.session_date), 'd MMMM yyyy', { locale: id });
-    const lastSlot = order.slots[order.slots.length - 1];
+    const timeLabel = `${session.start_time.substring(0, 5)} - ${session.end_time.substring(0, 5)}`;
-    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)}`;
     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'));
+  // Generate Google Calendar link for adding to user's calendar
-  const upcomingOrders = groupedOrders.filter(o => o.slots.some(s => s.status === 'confirmed'));
+  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) => {
+              {upcomingSessions.map((session) => (
-                const firstSlot = order.slots[0];
+                <div key={session.id} className="flex items-center justify-between p-3 border-2 border-border bg-muted/30">
-                const lastSlot = order.slots[order.slots.length - 1];
+                  <div className="flex items-center gap-3">
-                return (
+                    <Calendar className="w-4 h-4 text-muted-foreground" />
-                  <div key={order.orderId || 'no-order'} className="flex items-center justify-between p-3 border-2 border-border bg-muted/30">
+                    <div>
-                    <div className="flex items-center gap-3">
+                      <p className="font-medium">
-                      <Calendar className="w-4 h-4 text-muted-foreground" />
+                        {format(new Date(session.session_date), 'd MMM yyyy', { locale: id })}
-                      <div>
+                      </p>
-                        <p className="font-medium">
+                      <p className="text-sm text-muted-foreground flex items-center gap-1">
-                          {format(new Date(firstSlot.date), 'd MMM yyyy', { locale: id })}
+                        <Clock className="w-3 h-3" />
-                        </p>
+                        {session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}
-                        <p className="text-sm text-muted-foreground flex items-center gap-1">
+                        {session.topic_category && ` • ${session.topic_category}`}
-                          <Clock className="w-3 h-3" />
+                      </p>
-                          {firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)}
-                          {firstSlot.topic_category && ` • ${firstSlot.topic_category}`}
-                        </p>
-                      </div>
                     </div>
-                    <div className="flex items-center gap-2">
+                  </div>
-                      {getStatusBadge(firstSlot.status)}
+                  <div className="flex items-center gap-2">
-                      {order.meetLink && (
+                    {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>
-                      )}
+                        <Button
-                    </div>
+                          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) => {
+              {doneSessions.map((session) => {
-                const firstSlot = order.slots[0];
+                const hasReviewed = session.order_id ? reviewedOrderIds.has(session.order_id) : false;
-                const lastSlot = order.slots[order.slots.length - 1];
-                const hasReviewed = order.orderId ? reviewedOrderIds.has(order.orderId) : 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)}
+                          {session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}
-                          {firstSlot.topic_category && ` • ${firstSlot.topic_category}`}
+                          {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" />

src/pages/ConsultingBooking.tsx

@@ -31,8 +31,8 @@ interface Workhour {
   end_time: string;
 }
 
-interface ConfirmedSlot {
+interface ConfirmedSession {
-  date: string;
+  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')
+      .from('consulting_sessions')
-      .select('date, start_time, end_time')
+      .select('session_date, start_time, end_time')
-      .eq('date', dateStr)
+      .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
+      // Create consulting session and time slots
-      const slotsToInsert = getSlotsInRange.map(slotStart => {
+      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,
+          session_id: session.id,
-          order_id: order.id,
+          slot_date: format(selectedDate, 'yyyy-MM-dd'),
-          date: format(selectedDate, 'yyyy-MM-dd'),
           start_time: slotStart + ':00',
           end_time: slotEnd + ':00',
-          status: 'pending_payment',
+          is_available: false,
-          topic_category: selectedCategory,
+          booked_at: new Date().toISOString(),
-          notes: notes,
         };
       });
 
-      const { error: slotsError } = await supabase.from('consulting_slots').insert(slotsToInsert);
+      const { error: timeSlotsError } = await supabase.from('consulting_time_slots').insert(timeSlotsToInsert);
-      if (slotsError) throw slotsError;
+      if (timeSlotsError) throw timeSlotsError;
 
       // Call edge function to create payment with QR code
       const { data: paymentData, error: paymentError } = await supabase.functions.invoke('create-payment', {

src/pages/admin/AdminConsulting.tsx

@@ -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 () => {
+  const fetchSessions = async () => {
-    // First fetch slots
+    // Fetch sessions with profile data
-    const { data: slotsData, error: slotsError } = await supabase
+    const { data: sessionsData, error: sessionsError } = await supabase
-      .from('consulting_slots')
+      .from('consulting_sessions')
-      .select('*')
+      .select(`
-      .order('date', { ascending: false })
+        *,
+        profiles (name, email)
+      `)
+      .order('session_date', { ascending: false })
       .order('start_time', { ascending: true });
 
-    if (slotsError || !slotsData) {
+    if (sessionsError || !sessionsData) {
-      console.error('Error fetching slots:', slotsError);
+      console.error('Error fetching sessions:', sessionsError);
       setLoading(false);
       return;
     }
 
-    // Then fetch profiles for each user_id
+    setSessions(sessionsData);
-    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);
     setLoading(false);
   };
 
@@ -131,41 +109,41 @@ export default function AdminConsulting() {
     if (data) setSettings(data);
   };
 
-  const openMeetDialog = (slot: ConsultingSlot) => {
+  const openMeetDialog = (session: ConsultingSession) => {
-    setSelectedSlot(slot);
+    setSelectedSession(session);
-    setMeetLink(slot.meet_link || '');
+    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_email: selectedSession.profiles.email,
-              recipient_name: selectedSlot.profiles.name,
+              recipient_name: selectedSession.profiles.name,
               variables: {
-                consultation_date: format(parseISO(selectedSlot.date), 'd MMMM yyyy', { locale: id }),
+                consultation_date: format(parseISO(selectedSession.session_date), 'd MMMM yyyy', { locale: id }),
-                consultation_time: `${selectedSlot.start_time.substring(0, 5)} - ${selectedSlot.end_time.substring(0, 5)}`,
+                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,
+          slot_id: selectedSession.id,
-          date: selectedSlot.date,
+          date: selectedSession.session_date,
-          start_time: selectedSlot.start_time,
+          start_time: selectedSession.start_time,
-          end_time: selectedSlot.end_time,
+          end_time: selectedSession.end_time,
-          topic: selectedSlot.topic_category || 'Konsultasi',
+          topic: selectedSession.topic_category || 'Konsultasi',
-          client_name: selectedSlot.profiles?.name || 'Client',
+          client_name: selectedSession.profiles?.name || 'Client',
-          client_email: selectedSlot.profiles?.email || '',
+          client_email: selectedSession.profiles?.email || '',
-          notes: `Manual creation by admin for slot ${selectedSlot.id}`,
+          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
+  // Filter sessions based on search query and status
-  const groupedOrders: GroupedOrder[] = (() => {
+  const filteredSessions = sessions.filter(session => {
-    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 => {
     // Search filter
     if (searchQuery) {
       const query = searchQuery.toLowerCase();
-      const firstSlot = order.slots[0];
-
       const matchesSearch =
-        order.profile?.name?.toLowerCase().includes(query) ||
+        session.profiles?.name?.toLowerCase().includes(query) ||
-        order.profile?.email?.toLowerCase().includes(query) ||
+        session.profiles?.email?.toLowerCase().includes(query) ||
-        firstSlot.topic_category?.toLowerCase().includes(query) ||
+        session.topic_category?.toLowerCase().includes(query) ||
-        order.orderId?.toLowerCase().includes(query);
+        session.order_id?.toLowerCase().includes(query);
 
       if (!matchesSearch) return false;
     }
 
     // Status filter
-    if (filterStatus !== 'all') {
+    if (filterStatus !== 'all' && session.status !== filterStatus) {
-      const firstSlot = order.slots[0];
+      return false;
-      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;
     }
 
     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 upcomingSessions = filteredSessions.filter(s => s.session_date >= today && (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 pastSessions = filteredSessions.filter(s => s.session_date < today || s.status === 'completed' || s.status === 'cancelled');
-  const todayOrders = filteredGroupedOrders.filter(o => isToday(parseISO(o.firstDate)) && o.slots.some(s => s.status === 'confirmed'));
+  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) => {
+                {todaySessions.map((session) => (
-                  const firstSlot = order.slots[0];
+                  <div key={session.id} className="flex items-center justify-between text-sm">
-                  const lastSlot = order.slots[order.slots.length - 1];
+                    <span>
-                  return (
+                      {session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)} • {session.profiles?.name || 'N/A'} ({session.topic_category})
-                    <div key={order.orderId || 'no-order'} className="flex items-center justify-between text-sm">
+                    </span>
-                      <span>
+                    {session.meet_link ? (
-                        {firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)} • {order.profile?.name || 'N/A'} ({firstSlot.topic_category})
+                      <a href={session.meet_link} target="_blank" rel="noopener noreferrer" className="text-primary underline flex items-center gap-1">
-                      </span>
+                        <ExternalLink className="w-3 h-3" /> Join
-                      {order.meetLink ? (
+                      </a>
-                        <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
+                      <Button size="sm" variant="outline" onClick={() => openMeetDialog(session)}>
-                        </a>
+                        Tambah Link
-                      ) : (
+                      </Button>
-                        <Button size="sm" variant="outline" onClick={() => openMeetDialog(firstSlot)}>
+                    )}
-                          Tambah Link
+                  </div>
-                        </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="upcoming">Mendatang ({upcomingSessions.length})</TabsTrigger>
-            <TabsTrigger value="past">Riwayat ({pastOrders.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) => {
+                    {upcomingSessions.map((session) => {
-                      const firstSlot = order.slots[0];
-                      const lastSlot = order.slots[order.slots.length - 1];
-                      const sessionCount = order.slots.length;
                       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 })}
+                              {format(parseISO(session.session_date), 'd MMM yyyy', { locale: id })}
-                              {isToday(parseISO(firstSlot.date)) && <Badge className="ml-2 bg-primary">Hari Ini</Badge>}
+                              {isToday(parseISO(session.session_date)) && <Badge className="ml-2 bg-primary">Hari Ini</Badge>}
-                              {isTomorrow(parseISO(firstSlot.date)) && <Badge className="ml-2 bg-accent">Besok</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>
+                              <div>{session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}</div>
-                              {sessionCount > 1 && (
+                              {session.total_blocks > 1 && (
-                                <div className="text-xs text-muted-foreground">{sessionCount} sesi</div>
+                                <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="font-medium">{session.profiles?.name || '-'}</p>
-                              <p className="text-sm text-muted-foreground">{order.profile?.email}</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'}>
+                            <Badge variant={statusLabels[session.status]?.variant || 'secondary'}>
-                              {statusLabels[firstSlot.status]?.label || firstSlot.status}
+                              {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) => {
+              {upcomingSessions.map((session) => {
-                const firstSlot = order.slots[0];
-                const lastSlot = order.slots[order.slots.length - 1];
-                const sessionCount = order.slots.length;
                 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'}>
+                            <Badge variant={statusLabels[session.status]?.variant || 'secondary'}>
-                              {statusLabels[firstSlot.status]?.label || firstSlot.status}
+                              {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)}
+                            {session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}
-                            {sessionCount > 1 && (
+                            {session.total_blocks > 1 && (
-                              <span className="ml-2 text-xs">({sessionCount} sesi)</span>
+                              <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) => {
+                    {pastSessions.slice(0, 20).map((session) => {
-                      const firstSlot = order.slots[0];
-                      const lastSlot = order.slots[order.slots.length - 1];
-                      const sessionCount = order.slots.length;
                       return (
-                        <TableRow key={order.orderId || 'no-order'}>
+                        <TableRow key={session.id || 'no-session'}>
-                          <TableCell>{format(parseISO(firstSlot.date), 'd MMM yyyy', { locale: id })}</TableCell>
+                          <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>
+                              <div>{session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}</div>
-                              {sessionCount > 1 && (
+                              {session.total_blocks > 1 && (
-                                <div className="text-xs text-muted-foreground">{sessionCount} sesi</div>
+                                <div className="text-xs text-muted-foreground">{session.total_blocks} sesi</div>
                               )}
                             </div>
                           </TableCell>
-                          <TableCell>{order.profile?.name || '-'}</TableCell>
+                          <TableCell>{session.profiles?.name || '-'}</TableCell>
-                          <TableCell><Badge variant="outline">{firstSlot.topic_category}</Badge></TableCell>
+                          <TableCell><Badge variant="outline">{session.topic_category}</Badge></TableCell>
                           <TableCell>
-                            <Badge variant={statusLabels[firstSlot.status]?.variant || 'secondary'}>
+                            <Badge variant={statusLabels[session.status]?.variant || 'secondary'}>
-                              {statusLabels[firstSlot.status]?.label || firstSlot.status}
+                              {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) => {
+              {pastSessions.slice(0, 20).map((session) => {
-                const firstSlot = order.slots[0];
-                const lastSlot = order.slots[order.slots.length - 1];
-                const sessionCount = order.slots.length;
                 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)}
+                            {session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}
-                            {sessionCount > 1 && (
+                            {session.total_blocks > 1 && (
-                              <span className="ml-2 text-xs">({sessionCount} sesi)</span>
+                              <span className="ml-2 text-xs">({session.total_blocks} sesi)</span>
                             )}
                           </p>
                         </div>
-                        <Badge variant={statusLabels[firstSlot.status]?.variant || 'secondary'}>
+                        <Badge variant={statusLabels[session.status]?.variant || 'secondary'}>
-                          {statusLabels[firstSlot.status]?.label || firstSlot.status}
+                          {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>Tanggal:</strong> {format(parseISO(selectedSession.session_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>Waktu:</strong> {selectedSession.start_time.substring(0, 5)} - {selectedSession.end_time.substring(0, 5)}</p>
-                  <p><strong>Klien:</strong> {selectedSlot.profiles?.name}</p>
+                  <p><strong>Klien:</strong> {selectedSession.profiles?.name}</p>
-                  <p><strong>Topik:</strong> {selectedSlot.topic_category}</p>
+                  <p><strong>Topik:</strong> {selectedSession.topic_category}</p>
-                  {selectedSlot.notes && <p><strong>Catatan:</strong> {selectedSlot.notes}</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 
+                <Button
-                  onClick={createMeetLink} 
+                  onClick={createMeetLink}
-                  variant="outline" 
+                  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

src/pages/member/OrderDetail.tsx

@@ -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)
+          // Always fetch consulting sessions for this order (consulting orders don't have order_items)
-          const { data: slots } = await supabase
+          const { data: sessions } = await supabase
-            .from("consulting_slots")
+            .from("consulting_sessions")
             .select("*")
             .eq("order_id", id)
-            .order("date", { ascending: true });
+            .order("session_date", { ascending: true });
 
-          if (slots && slots.length > 0) {
+          if (sessions && sessions.length > 0) {
-            setConsultingSlots(slots as ConsultingSlot[]);
+            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)}
+                        {consultingSlots[0].start_time.substring(0,5)} - {consultingSlots[0].end_time.substring(0,5)}
-                      </p>
-                      <p className="text-xs text-muted-foreground mt-1">
-                        {consultingSlots.length} blok ({consultingSlots.length * 45} menit)
                       </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>
+                        <p className="text-muted-foreground">Kategori</p>
-                        <a
+                        <p className="font-medium">{consultingSlots[0].topic_category}</p>
-                          href={consultingSlots[0].meet_link}
+                      </div>
-                          target="_blank"
+                    )}
-                          rel="noopener noreferrer"
+
-                          className="font-medium text-primary hover:underline text-sm"
+                    {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>

supabase/functions/create-google-meet-event/index.ts

@@ -311,27 +311,15 @@ serve(async (req: Request): Promise<Response> => {
       if (meetLink) {
         log(`Meet link found: ${meetLink}`);
 
-        // If this is part of a multi-slot order, update all slots with the same order_id
+        // Update consulting_sessions with meet_link and event_id
-        // First, check if this slot has an order_id
+        log(`Updating session ${body.slot_id} with meet_link and calendar_event_id`);
-        const { data: slotData } = await supabase
+        await supabase
-          .from("consulting_slots")
+          .from("consulting_sessions")
-          .select("order_id")
+          .update({
-          .eq("id", body.slot_id)
+            meet_link: meetLink,
-          .single();
+            calendar_event_id: eventDataResult.id
-
+          })
-        if (slotData?.order_id) {
+          .eq("id", body.slot_id);
-          log(`Updating all slots in order ${slotData.order_id} with meet_link`);
-          await supabase
-            .from("consulting_slots")
-            .update({ meet_link: meetLink })
-            .eq("order_id", slotData.order_id);
-        } else {
-          log(`No order_id found, updating only slot ${body.slot_id}`);
-          await supabase
-            .from("consulting_slots")
-            .update({ meet_link: meetLink })
-            .eq("id", body.slot_id);
-        }
 
         log("Successfully completed");
         return new Response(
@@ -351,26 +339,15 @@ serve(async (req: Request): Promise<Response> => {
     if (eventDataResult.hangoutLink) {
       log(`Using hangoutLink: ${eventDataResult.hangoutLink}`);
 
-      // If this is part of a multi-slot order, update all slots with the same order_id
+      // Update consulting_sessions with meet_link and event_id
-      const { data: slotData } = await supabase
+      log(`Updating session ${body.slot_id} with meet_link and calendar_event_id`);
-        .from("consulting_slots")
+      await supabase
-        .select("order_id")
+        .from("consulting_sessions")
-        .eq("id", body.slot_id)
+        .update({
-        .single();
+          meet_link: eventDataResult.hangoutLink,
-
+          calendar_event_id: eventDataResult.id
-      if (slotData?.order_id) {
+        })
-        log(`Updating all slots in order ${slotData.order_id} with meet_link`);
+        .eq("id", body.slot_id);
-        await supabase
-          .from("consulting_slots")
-          .update({ meet_link: eventDataResult.hangoutLink })
-          .eq("order_id", slotData.order_id);
-      } else {
-        log(`No order_id found, updating only slot ${body.slot_id}`);
-        await supabase
-          .from("consulting_slots")
-          .update({ meet_link: eventDataResult.hangoutLink })
-          .eq("id", body.slot_id);
-      }
 
       log("Successfully completed");
       return new Response(

supabase/functions/create-meet-link/index.ts

@@ -1,132 +0,0 @@
-import { serve } from "https://deno.land/std@0.190.0/http/server.ts";
-import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
-
-const corsHeaders = {
-  "Access-Control-Allow-Origin": "*",
-  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
-};
-
-interface CreateMeetRequest {
-  slot_id: string;
-  date: string;
-  start_time: string;
-  end_time: string;
-  client_name: string;
-  client_email: string;
-  topic: string;
-  notes?: string;
-}
-
-serve(async (req: Request): Promise<Response> => {
-  if (req.method === "OPTIONS") {
-    return new Response(null, { headers: corsHeaders });
-  }
-
-  try {
-    const supabaseUrl = Deno.env.get("SUPABASE_URL")!;
-    const supabaseServiceKey = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!;
-    const supabase = createClient(supabaseUrl, supabaseServiceKey);
-
-    const body: CreateMeetRequest = await req.json();
-    console.log("Creating meet link for slot:", body.slot_id);
-
-    // Get platform settings for Google Calendar ID
-    const { data: settings } = await supabase
-      .from("platform_settings")
-      .select("integration_google_calendar_id, brand_name")
-      .single();
-
-    const calendarId = settings?.integration_google_calendar_id;
-    const brandName = settings?.brand_name || "LearnHub";
-
-    if (!calendarId) {
-      return new Response(
-        JSON.stringify({ 
-          success: false, 
-          message: "Google Calendar ID belum dikonfigurasi di Pengaturan > Integrasi" 
-        }),
-        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
-      );
-    }
-
-    // For now, this is a placeholder that returns a message
-    // In production, you would integrate with Google Calendar API via OAuth or service account
-    // Or call an n8n webhook to handle the calendar creation
-
-    const { data: integrationSettings } = await supabase
-      .from("platform_settings")
-      .select("integration_n8n_base_url, integration_n8n_test_mode")
-      .single();
-
-    if (integrationSettings?.integration_n8n_base_url) {
-      // Check if we're in test mode (controlled by the integration_n8n_test_mode setting)
-      const isTestMode = integrationSettings.integration_n8n_test_mode || false;
-
-      const webhookPath = isTestMode ? "/webhook-test/" : "/webhook/";
-      const n8nUrl = `${integrationSettings.integration_n8n_base_url}${webhookPath}create-meet`;
-
-      console.log(`Calling n8n webhook: ${n8nUrl} (Test mode: ${isTestMode})`);
-
-      try {
-        const n8nResponse = await fetch(n8nUrl, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            slot_id: body.slot_id,
-            date: body.date,
-            start_time: body.start_time,
-            end_time: body.end_time,
-            client_name: body.client_name,
-            client_email: body.client_email,
-            topic: body.topic,
-            notes: body.notes,
-            calendar_id: calendarId,
-            brand_name: brandName,
-            test_mode: isTestMode, // Add test_mode flag for n8n to use
-          }),
-        });
-
-        if (n8nResponse.ok) {
-          const result = await n8nResponse.json();
-          
-          if (result.meet_link) {
-            // Update the slot with the meet link
-            await supabase
-              .from("consulting_slots")
-              .update({ meet_link: result.meet_link })
-              .eq("id", body.slot_id);
-
-            return new Response(
-              JSON.stringify({ success: true, meet_link: result.meet_link }),
-              { headers: { ...corsHeaders, "Content-Type": "application/json" } }
-            );
-          }
-        }
-      } catch (n8nError) {
-        console.error("n8n webhook error:", n8nError);
-      }
-    }
-
-    // Fallback: Return instructions for manual setup
-    return new Response(
-      JSON.stringify({ 
-        success: false, 
-        message: "Integrasi otomatis belum tersedia. Silakan buat link Meet secara manual atau konfigurasi n8n webhook di Pengaturan > Integrasi.",
-        manual_instructions: {
-          calendar_id: calendarId,
-          event_title: `Konsultasi: ${body.topic} - ${body.client_name}`,
-          event_date: body.date,
-          event_time: `${body.start_time} - ${body.end_time}`,
-        }
-      }),
-      { status: 200, headers: { ...corsHeaders, "Content-Type": "application/json" } }
-    );
-
-  } catch (error: any) {
-    console.error("Error creating meet link:", error);
-    return new Response(
-      JSON.stringify({ success: false, message: error.message }),
-      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
-    );
-  }
-});

supabase/functions/delete-calendar-event/index.ts

@@ -0,0 +1,193 @@
+import { serve } from "https://deno.land/std@0.190.0/http/server.ts";
+import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
+
+const corsHeaders = {
+  "Access-Control-Allow-Origin": "*",
+  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
+};
+
+interface GoogleOAuthConfig {
+  client_id: string;
+  client_secret: string;
+  refresh_token: string;
+  access_token?: string;
+  expires_at?: number;
+}
+
+interface DeleteEventRequest {
+  session_id: string;
+}
+
+// Function to get access token from refresh token (OAuth2)
+async function getGoogleAccessToken(oauthConfig: GoogleOAuthConfig): Promise<{ access_token: string; expires_in: number }> {
+  try {
+    console.log("Refreshing access token for calendar event deletion...");
+
+    const tokenRequest = {
+      client_id: oauthConfig.client_id,
+      client_secret: oauthConfig.client_secret,
+      refresh_token: oauthConfig.refresh_token,
+      grant_type: "refresh_token",
+    };
+
+    const response = await fetch("https://oauth2.googleapis.com/token", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams(tokenRequest),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Token exchange failed: ${errorText}`);
+    }
+
+    const data = await response.json();
+
+    if (!data.access_token) {
+      throw new Error("No access token in response");
+    }
+
+    return {
+      access_token: data.access_token,
+      expires_in: data.expires_in || 3600
+    };
+  } catch (error: any) {
+    console.error("Error getting Google access token:", error);
+    throw error;
+  }
+}
+
+serve(async (req: Request): Promise<Response> => {
+  if (req.method === "OPTIONS") {
+    return new Response(null, { headers: corsHeaders });
+  }
+
+  try {
+    const body: DeleteEventRequest = await req.json();
+    console.log("[DELETE-CALENDAR-EVENT] Deleting event for session:", body.session_id);
+
+    const supabaseUrl = Deno.env.get("SUPABASE_URL")!;
+    const supabaseServiceKey = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!;
+    const supabase = createClient(supabaseUrl, supabaseServiceKey);
+
+    // Get session data with calendar_event_id
+    const { data: session, error: sessionError } = await supabase
+      .from("consulting_sessions")
+      .select("id, calendar_event_id, user_id")
+      .eq("id", body.session_id)
+      .single();
+
+    if (sessionError || !session) {
+      console.error("[DELETE-CALENDAR-EVENT] Session not found:", sessionError);
+      return new Response(
+        JSON.stringify({ success: false, error: "Session not found" }),
+        { status: 404, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+
+    if (!session.calendar_event_id) {
+      console.log("[DELETE-CALENDAR-EVENT] No calendar_event_id found, skipping deletion");
+      return new Response(
+        JSON.stringify({ success: true, message: "No calendar event to delete" }),
+        { headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+
+    // Get OAuth config
+    const { data: settings } = await supabase
+      .from("platform_settings")
+      .select("integration_google_calendar_id, google_oauth_config")
+      .single();
+
+    const calendarId = settings?.integration_google_calendar_id;
+    const oauthConfigJson = settings?.google_oauth_config;
+
+    if (!calendarId || !oauthConfigJson) {
+      console.log("[DELETE-CALENDAR-EVENT] Calendar not configured, skipping deletion");
+      return new Response(
+        JSON.stringify({ success: true, message: "Calendar not configured" }),
+        { headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+
+    // Parse OAuth config
+    let oauthConfig: GoogleOAuthConfig;
+    try {
+      oauthConfig = JSON.parse(oauthConfigJson);
+    } catch (error) {
+      console.error("[DELETE-CALENDAR-EVENT] Failed to parse OAuth config");
+      return new Response(
+        JSON.stringify({ success: false, error: "Invalid OAuth config" }),
+        { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+      );
+    }
+
+    // Get access token
+    let accessToken: string;
+    const now = Math.floor(Date.now() / 1000);
+
+    if (oauthConfig.access_token && oauthConfig.expires_at && oauthConfig.expires_at > now + 60) {
+      accessToken = oauthConfig.access_token;
+    } else {
+      const tokenData = await getGoogleAccessToken(oauthConfig);
+      accessToken = tokenData.access_token;
+
+      // Update cached token
+      const newExpiresAt = now + tokenData.expires_in;
+      const updatedConfig = {
+        ...oauthConfig,
+        access_token: accessToken,
+        expires_at: newExpiresAt
+      };
+
+      await supabase
+        .from("platform_settings")
+        .update({ google_oauth_config: JSON.stringify(updatedConfig) })
+        .eq("id", settings.id);
+    }
+
+    // Delete event from Google Calendar
+    console.log(`[DELETE-CALENDAR-EVENT] Deleting event ${session.calendar_event_id} from calendar ${calendarId}`);
+
+    const deleteResponse = await fetch(
+      `https://www.googleapis.com/calendar/v3/calendars/${encodeURIComponent(calendarId)}/events/${encodeURIComponent(session.calendar_event_id)}`,
+      {
+        method: "DELETE",
+        headers: {
+          "Authorization": `Bearer ${accessToken}`,
+        },
+      }
+    );
+
+    if (!deleteResponse.ok) {
+      if (deleteResponse.status === 410) {
+        // Event already deleted (Gone)
+        console.log("[DELETE-CALENDAR-EVENT] Event already deleted (410)");
+      } else {
+        const errorText = await deleteResponse.text();
+        console.error("[DELETE-CALENDAR-EVENT] Failed to delete event:", errorText);
+        // Don't fail the operation, just log it
+      }
+    } else {
+      console.log("[DELETE-CALENDAR-EVENT] Event deleted successfully");
+    }
+
+    // Clear calendar_event_id from session
+    await supabase
+      .from("consulting_sessions")
+      .update({ calendar_event_id: null })
+      .eq("id", body.session_id);
+
+    return new Response(
+      JSON.stringify({ success: true, message: "Calendar event deleted" }),
+      { headers: { ...corsHeaders, "Content-Type": "application/json" } }
+    );
+
+  } catch (error: any) {
+    console.error("[DELETE-CALENDAR-EVENT] Error:", error);
+    return new Response(
+      JSON.stringify({ success: false, error: error.message }),
+      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
+    );
+  }
+});

supabase/functions/handle-order-paid/index.ts

@@ -30,7 +30,7 @@ serve(async (req: Request): Promise<Response> => {
     const supabaseServiceKey = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!;
     const supabase = createClient(supabaseUrl, supabaseServiceKey);
 
-    // Get full order details with items AND consulting slots
+    // Get full order details with items AND consulting sessions
     // Use maybeSingle() in case there are no related records
     const { data: order, error: orderError } = await supabase
       .from("orders")
@@ -41,12 +41,13 @@ serve(async (req: Request): Promise<Response> => {
           product_id,
           product:products (title, type)
         ),
-        consulting_slots (
+        consulting_sessions (
           id,
-          date,
+          session_date,
           start_time,
           end_time,
-          status
+          status,
+          topic_category
         )
       `)
       .eq("id", order_id)
@@ -72,8 +73,8 @@ serve(async (req: Request): Promise<Response> => {
       id: order.id,
       payment_status: order.payment_status,
       order_items_count: order.order_items?.length || 0,
-      consulting_slots_count: order.consulting_slots?.length || 0,
+      consulting_sessions_count: order.consulting_sessions?.length || 0,
-      consulting_slots: order.consulting_slots
+      consulting_sessions: order.consulting_sessions
     }));
 
     const userEmail = order.profiles?.email || "";
@@ -83,49 +84,45 @@ serve(async (req: Request): Promise<Response> => {
       product: { title: string; type: string };
     }>;
 
-    // Check if this is a consulting order by checking consulting_slots
+    // Check if this is a consulting order by checking consulting_sessions
-    const consultingSlots = order.consulting_slots as Array<{
+    const consultingSessions = order.consulting_sessions as Array<{
       id: string;
-      date: string;
+      session_date: string;
       start_time: string;
       end_time: string;
       status: string;
+      topic_category?: string;
       meet_link?: string;
     }>;
-    const isConsultingOrder = consultingSlots && consultingSlots.length > 0;
+    const isConsultingOrder = consultingSessions && consultingSessions.length > 0;
 
-    console.log("[HANDLE-PAID] isConsultingOrder:", isConsultingOrder, "consultingSlots:", consultingSlots);
+    console.log("[HANDLE-PAID] isConsultingOrder:", isConsultingOrder, "consultingSessions:", consultingSessions);
 
     if (isConsultingOrder) {
-      console.log("[HANDLE-PAID] Consulting order detected, processing slots");
+      console.log("[HANDLE-PAID] Consulting order detected, processing sessions");
 
-      // Sort slots by start_time to ensure correct ordering
+      // Update consulting sessions status from pending_payment to confirmed
-      consultingSlots.sort((a, b) => a.start_time.localeCompare(b.start_time));
-
-      // Update consulting slots status from pending_payment to confirmed
       const { error: updateError } = await supabase
-        .from("consulting_slots")
+        .from("consulting_sessions")
         .update({ status: "confirmed" })
         .eq("order_id", order_id)
         .in("status", ["pending_payment"]);
 
-      console.log("[HANDLE-PAID] Slot update result:", { updateError, order_id });
+      console.log("[HANDLE-PAID] Session update result:", { updateError, order_id });
 
       if (updateError) {
-        console.error("[HANDLE-PAID] Failed to update slots:", updateError);
+        console.error("[HANDLE-PAID] Failed to update sessions:", updateError);
       }
 
-      if (consultingSlots && consultingSlots.length > 0) {
+      if (consultingSessions && consultingSessions.length > 0) {
         try {
           console.log("[HANDLE-PAID] Creating Google Meet for order:", order_id);
 
-          // Group slots by order - use first slot's start time and last slot's end time
+          // Use the first session for Meet creation
-          const firstSlot = consultingSlots[0];
+          const session = consultingSessions[0];
-          const lastSlot = consultingSlots[consultingSlots.length - 1];
+          const topic = session.topic_category || "Konsultasi 1-on-1";
-          const topic = "Konsultasi 1-on-1";
 
-          console.log("[HANDLE-PAID] Time slots:", consultingSlots.map(s => `${s.start_time}-${s.end_time}`).join(', '));
+          console.log("[HANDLE-PAID] Session time:", `${session.start_time} - ${session.end_time}`);
-          console.log("[HANDLE-PAID] Event will be:", `${firstSlot.start_time} - ${lastSlot.end_time}`);
 
           const meetResponse = await fetch(
             `${supabaseUrl}/functions/v1/create-google-meet-event`,
@@ -136,14 +133,14 @@ serve(async (req: Request): Promise<Response> => {
                 "Authorization": `Bearer ${Deno.env.get("SUPABASE_ANON_KEY")}`,
               },
               body: JSON.stringify({
-                slot_id: firstSlot.id, // Use first slot ID
+                slot_id: session.id,
-                date: firstSlot.date,
+                date: session.session_date,
-                start_time: firstSlot.start_time,
+                start_time: session.start_time,
-                end_time: lastSlot.end_time, // Use last slot's end time for continuous block
+                end_time: session.end_time,
                 client_name: userName,
                 client_email: userEmail,
                 topic: topic,
-                notes: `${consultingSlots.length} sesi: ${consultingSlots.map(s => s.start_time.substring(0, 5)).join(', ')}`,
+                notes: `Session ID: ${session.id}`,
               }),
             }
           );
@@ -157,16 +154,16 @@ serve(async (req: Request): Promise<Response> => {
             if (meetData.success) {
               console.log("[HANDLE-PAID] Meet created:", meetData.meet_link);
 
-              // Update all slots with the same meet link
+              // Update session with meet link
               const { error: updateError } = await supabase
-                .from("consulting_slots")
+                .from("consulting_sessions")
                 .update({ meet_link: meetData.meet_link })
                 .eq("order_id", order_id);
 
               if (updateError) {
                 console.error("[HANDLE-PAID] Failed to update meet_link:", updateError);
               } else {
-                console.log("[HANDLE-PAID] Meet link updated for all slots in order:", order_id);
+                console.log("[HANDLE-PAID] Meet link updated for session:", order_id);
               }
             } else {
               console.error("[HANDLE-PAID] Meet creation returned success=false:", meetData);
@@ -182,7 +179,7 @@ serve(async (req: Request): Promise<Response> => {
         }
       }
 
-      // Send consulting notification with the consultingSlots data
+      // Send consulting notification with the consultingSessions data
       await sendNotification(supabase, "consulting_scheduled", {
         nama: userName,
         email: userEmail,
@@ -190,14 +187,14 @@ serve(async (req: Request): Promise<Response> => {
         tanggal_pesanan: new Date().toLocaleDateString("id-ID"),
         total: `Rp ${order.total_amount.toLocaleString("id-ID")}`,
         metode_pembayaran: order.payment_method || "Unknown",
-        tanggal_konsultasi: consultingSlots[0]?.date || "",
+        tanggal_konsultasi: consultingSessions[0]?.session_date || "",
-        jam_konsultasi: consultingSlots.map(s => s.start_time.substring(0, 5)).join(", "),
+        jam_konsultasi: consultingSessions.map(s => `${s.start_time.substring(0, 5)} - ${s.end_time.substring(0, 5)}`).join(", "),
-        link_meet: consultingSlots[0]?.meet_link || "Akan dikirim terpisah",
+        link_meet: consultingSessions[0]?.meet_link || "Akan dikirim terpisah",
         event: "consulting_scheduled",
         order_id,
         user_id: order.user_id,
         user_name: userName,
-        slots: consultingSlots,
+        slots: consultingSessions,
       });
     } else {
       // Regular product order - grant access

supabase/migrations/20241228_add_calendar_event_id.sql

@@ -0,0 +1,12 @@
+-- Add calendar_event_id column to consulting_sessions
+-- This stores the Google Calendar event ID for later deletion
+
+ALTER TABLE consulting_sessions
+ADD COLUMN calendar_event_id TEXT;
+
+-- Create index for faster lookups
+CREATE INDEX idx_consulting_sessions_calendar_event
+ON consulting_sessions(calendar_event_id);
+
+-- Add comment
+COMMENT ON COLUMN consulting_sessions.calendar_event_id IS 'Google Calendar event ID - used to delete events when sessions are cancelled/refunded';