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>
This commit is contained in:
dwindown
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user