Fix consulting order processing and display

- Fix consulting history to show continuous time range (09:00 - 11:00) instead of listing individual slots
- Add foreign key relationships for consulting_slots (order_id and user_id)
- Fix handle-order-paid to query profiles(email, name) instead of full_name
- Add completed consulting sessions with recordings to Member Access page
- Add user_id foreign key constraint to consulting_slots table
- Add orders foreign key constraint for consulting_slots relationship

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/reviews/ConsultingHistory.tsx

@@ -20,20 +20,26 @@ interface ConsultingSlot {
   order_id: string | null;
 }
 
+interface GroupedOrder {
+  orderId: string | null;
+  slots: ConsultingSlot[];
+  firstDate: string;
+  meetLink: string | null;
+}
+
 interface ConsultingHistoryProps {
   userId: string;
 }
 
 export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
   const [slots, setSlots] = useState<ConsultingSlot[]>([]);
-  const [reviewedSlotIds, setReviewedSlotIds] = useState<Set<string>>(new Set());
+  const [reviewedOrderIds, setReviewedOrderIds] = useState<Set<string>>(new Set());
   const [loading, setLoading] = useState(true);
   const [reviewModal, setReviewModal] = useState<{
     open: boolean;
-    slotId: string;
     orderId: string | null;
     label: string;
-  }>({ open: false, slotId: '', orderId: null, label: '' });
+  }>({ open: false, orderId: null, label: '' });
 
   useEffect(() => {
     fetchData();
@@ -50,9 +56,7 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
     if (slotsData) {
       setSlots(slotsData);
 
-      // Check which slots have been reviewed
-      // We use a combination approach: check for consulting reviews by this user
-      // For consulting, we'll track by order_id since that's how we link them
+      // Check which orders have been reviewed
       const orderIds = slotsData
         .filter(s => s.order_id)
         .map(s => s.order_id as string);
@@ -66,14 +70,7 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
           .in('order_id', orderIds);
 
         if (reviewsData) {
-          const reviewedOrderIds = new Set(reviewsData.map(r => r.order_id));
-          // Map order_id back to slot_id
-          const reviewedIds = new Set(
-            slotsData
-              .filter(s => s.order_id && reviewedOrderIds.has(s.order_id))
-              .map(s => s.id)
-          );
-          setReviewedSlotIds(reviewedIds);
+          setReviewedOrderIds(new Set(reviewsData.map(r => r.order_id)));
         }
       }
     }
@@ -81,6 +78,26 @@ 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':
@@ -96,24 +113,27 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
     }
   };
 
-  const openReviewModal = (slot: ConsultingSlot) => {
-    const dateLabel = format(new Date(slot.date), 'd MMMM yyyy', { locale: id });
-    const timeLabel = `${slot.start_time.substring(0, 5)} - ${slot.end_time.substring(0, 5)}`;
+  const openReviewModal = (order: GroupedOrder) => {
+    const firstSlot = order.slots[0];
+    const lastSlot = order.slots[order.slots.length - 1];
+    const dateLabel = format(new Date(firstSlot.date), 'd MMMM yyyy', { locale: id });
+    const timeLabel = `${firstSlot.start_time.substring(0, 5)} - ${lastSlot.end_time.substring(0, 5)}`;
     setReviewModal({
       open: true,
-      slotId: slot.id,
-      orderId: slot.order_id,
+      orderId: order.orderId,
       label: `Sesi konsultasi ${dateLabel}, ${timeLabel}`,
     });
   };
 
   const handleReviewSuccess = () => {
-    // Mark this slot as reviewed
-    setReviewedSlotIds(prev => new Set([...prev, reviewModal.slotId]));
+    // Mark this order as reviewed
+    if (reviewModal.orderId) {
+      setReviewedOrderIds(prev => new Set([...prev, reviewModal.orderId!]));
+    }
   };
 
-  const doneSlots = slots.filter(s => s.status === 'done');
-  const upcomingSlots = slots.filter(s => s.status === 'confirmed');
+  const doneOrders = groupedOrders.filter(o => o.slots.every(s => s.status === 'done'));
+  const upcomingOrders = groupedOrders.filter(o => o.slots.some(s => s.status === 'confirmed'));
 
   if (loading) {
     return (
@@ -147,62 +167,68 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
         </CardHeader>
         <CardContent className="space-y-4">
           {/* Upcoming sessions */}
-          {upcomingSlots.length > 0 && (
+          {upcomingOrders.length > 0 && (
             <div className="space-y-2">
               <h4 className="text-sm font-medium text-muted-foreground">Sesi Mendatang</h4>
-              {upcomingSlots.map((slot) => (
-                <div key={slot.id} className="flex items-center justify-between p-3 border-2 border-border bg-muted/30">
-                  <div className="flex items-center gap-3">
-                    <Calendar className="w-4 h-4 text-muted-foreground" />
-                    <div>
-                      <p className="font-medium">
-                        {format(new Date(slot.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" />
-                        {slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)}
-                        {slot.topic_category && ` • ${slot.topic_category}`}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    {getStatusBadge(slot.status)}
-                    {slot.meet_link && (
-                      <Button asChild size="sm" variant="outline" className="border-2">
-                        <a href={slot.meet_link} target="_blank" rel="noopener noreferrer">
-                          Join
-                        </a>
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Completed sessions */}
-          {doneSlots.length > 0 && (
-            <div className="space-y-2">
-              <h4 className="text-sm font-medium text-muted-foreground">Sesi Selesai</h4>
-              {doneSlots.map((slot) => {
-                const hasReviewed = reviewedSlotIds.has(slot.id);
+              {upcomingOrders.map((order) => {
+                const firstSlot = order.slots[0];
+                const lastSlot = order.slots[order.slots.length - 1];
                 return (
-                  <div key={slot.id} className="flex items-center justify-between p-3 border-2 border-border">
+                  <div key={order.orderId || 'no-order'} className="flex items-center justify-between p-3 border-2 border-border bg-muted/30">
                     <div className="flex items-center gap-3">
                       <Calendar className="w-4 h-4 text-muted-foreground" />
                       <div>
                         <p className="font-medium">
-                          {format(new Date(slot.date), 'd MMM yyyy', { locale: id })}
+                          {format(new Date(firstSlot.date), 'd MMM yyyy', { locale: id })}
                         </p>
                         <p className="text-sm text-muted-foreground flex items-center gap-1">
                           <Clock className="w-3 h-3" />
-                          {slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)}
-                          {slot.topic_category && ` • ${slot.topic_category}`}
+                          {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">
-                      {getStatusBadge(slot.status)}
+                      {getStatusBadge(firstSlot.status)}
+                      {order.meetLink && (
+                        <Button asChild size="sm" variant="outline" className="border-2">
+                          <a href={order.meetLink} target="_blank" rel="noopener noreferrer">
+                            Join
+                          </a>
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {/* Completed sessions */}
+          {doneOrders.length > 0 && (
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium text-muted-foreground">Sesi Selesai</h4>
+              {doneOrders.map((order) => {
+                const firstSlot = order.slots[0];
+                const lastSlot = order.slots[order.slots.length - 1];
+                const hasReviewed = order.orderId ? reviewedOrderIds.has(order.orderId) : false;
+                return (
+                  <div key={order.orderId || 'no-order'} 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 })}
+                        </p>
+                        <p className="text-sm text-muted-foreground flex items-center gap-1">
+                          <Clock className="w-3 h-3" />
+                          {firstSlot.start_time.substring(0, 5)} - {lastSlot.end_time.substring(0, 5)}
+                          {firstSlot.topic_category && ` • ${firstSlot.topic_category}`}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {getStatusBadge(firstSlot.status)}
                       {hasReviewed ? (
                         <span className="flex items-center gap-1 text-xs text-muted-foreground">
                           <CheckCircle className="w-4 h-4 text-accent" />
@@ -212,7 +238,7 @@ export function ConsultingHistory({ userId }: ConsultingHistoryProps) {
                         <Button
                           size="sm"
                           variant="outline"
-                          onClick={() => openReviewModal(slot)}
+                          onClick={() => openReviewModal(order)}
                           className="border-2"
                         >
                           <Star className="w-4 h-4 mr-1" />

src/pages/member/MemberAccess.tsx

@@ -7,8 +7,10 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Video, Calendar, BookOpen, ArrowRight, Search, X } from 'lucide-react';
+import { Video, Calendar, BookOpen, ArrowRight, Search, X, Clock } from 'lucide-react';
 import { Input } from '@/components/ui/input';
+import { format } from 'date-fns';
+import { id } from 'date-fns/locale';
 
 interface UserAccess {
   id: string;
@@ -25,10 +27,21 @@ interface UserAccess {
   };
 }
 
+interface ConsultingSession {
+  id: string;
+  date: string;
+  start_time: string;
+  end_time: string;
+  status: string;
+  recording_url: string | null;
+  topic_category: string | null;
+}
+
 export default function MemberAccess() {
   const { user, loading: authLoading } = useAuth();
   const navigate = useNavigate();
   const [access, setAccess] = useState<UserAccess[]>([]);
+  const [consultingSessions, setConsultingSessions] = useState<ConsultingSession[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedType, setSelectedType] = useState<string>('all');
@@ -39,7 +52,7 @@ export default function MemberAccess() {
   }, [user, authLoading]);
 
   const fetchAccess = async () => {
-    const [accessRes, paidOrdersRes] = await Promise.all([
+    const [accessRes, paidOrdersRes, consultingRes] = await Promise.all([
       // Get direct user_access
       supabase
         .from('user_access')
@@ -57,6 +70,13 @@ export default function MemberAccess() {
         )
         .eq("user_id", user!.id)
         .eq("payment_status", "paid"),
+      // Get completed consulting sessions with recordings
+      supabase
+        .from('consulting_slots')
+        .select('id, date, start_time, end_time, status, recording_url, topic_category')
+        .eq('user_id', user!.id)
+        .eq('status', 'done')
+        .order('date', { ascending: false }),
     ]);
 
     // Combine access from user_access and paid orders
@@ -81,6 +101,7 @@ export default function MemberAccess() {
     }
 
     setAccess([...directAccess, ...paidProductAccess]);
+    setConsultingSessions(consultingRes.data || []);
     setLoading(false);
   };
 
@@ -249,7 +270,60 @@ export default function MemberAccess() {
           </div>
         )}
 
-        {access.length === 0 ? (
+        {/* Consulting Sessions with Recordings */}
+        {consultingSessions.length > 0 && (
+          <div className="mb-8">
+            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
+              <Video className="w-6 h-6" />
+              Sesi Konsultasi Selesai
+            </h2>
+            <div className="grid gap-4">
+              {consultingSessions.map((session) => (
+                <Card key={session.id} className="border-2 border-border">
+                  <CardHeader>
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <CardTitle className="text-xl">
+                          1-on-1: {session.topic_category || 'Konsultasi'}
+                        </CardTitle>
+                        <CardDescription>Konsultasi</CardDescription>
+                      </div>
+                      <Badge className="bg-brand-accent text-white rounded-full">Selesai</Badge>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
+                      <Calendar className="w-4 h-4" />
+                      <span>{format(new Date(session.date), 'd MMMM yyyy', { locale: id })}</span>
+                      <Clock className="w-4 h-4 ml-2" />
+                      <span>{session.start_time.substring(0, 5)} - {session.end_time.substring(0, 5)}</span>
+                    </div>
+                    {session.recording_url ? (
+                      <Button asChild className="shadow-sm">
+                        <a href={session.recording_url} target="_blank" rel="noopener noreferrer">
+                          <Video className="w-4 h-4 mr-2" />
+                          Tonton Rekaman
+                          <ArrowRight className="w-4 h-4 ml-2" />
+                        </a>
+                      </Button>
+                    ) : (
+                      <Badge className="bg-muted text-primary">Rekaman segera tersedia</Badge>
+                    )}
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Products Section */}
+        {access.length > 0 && (
+          <div>
+            <h2 className="text-2xl font-bold mb-4">Produk & Kursus</h2>
+          </div>
+        )}
+
+        {access.length === 0 && consultingSessions.length === 0 ? (
           <Card className="border-2 border-border">
             <CardContent className="py-12 text-center">
               <p className="text-muted-foreground mb-4">Anda belum memiliki akses ke produk apapun</p>
@@ -258,7 +332,7 @@ export default function MemberAccess() {
               </Button>
             </CardContent>
           </Card>
-        ) : (
+        ) : access.length === 0 ? null : (
           <div className="grid gap-4">
             {filteredAccess.length === 0 && access.length > 0 && (
               <div className="text-center py-16">