meet-hub/MIGRATION_GUIDE.md

# 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.