Changes
This commit is contained in:
gpt-engineer-app[bot]
243
src/components/reviews/ConsultingHistory.tsx
Normal file
243
src/components/reviews/ConsultingHistory.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
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 { format } from 'date-fns';
|
||||
import { id } from 'date-fns/locale';
|
||||
import { ReviewModal } from './ReviewModal';
|
||||
|
||||
interface ConsultingSlot {
|
||||
id: string;
|
||||
date: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
status: string;
|
||||
topic_category: string | null;
|
||||
meet_link: string | null;
|
||||
order_id: 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 [loading, setLoading] = useState(true);
|
||||
const [reviewModal, setReviewModal] = useState<{
|
||||
open: boolean;
|
||||
slotId: string;
|
||||
orderId: string | null;
|
||||
label: string;
|
||||
}>({ open: false, slotId: '', orderId: null, label: '' });
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [userId]);
|
||||
|
||||
const fetchData = async () => {
|
||||
// Fetch consulting slots
|
||||
const { data: slotsData } = await supabase
|
||||
.from('consulting_slots')
|
||||
.select('id, date, start_time, end_time, status, topic_category, meet_link, order_id')
|
||||
.eq('user_id', userId)
|
||||
.order('date', { ascending: false });
|
||||
|
||||
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
|
||||
const orderIds = slotsData
|
||||
.filter(s => s.order_id)
|
||||
.map(s => s.order_id as string);
|
||||
|
||||
if (orderIds.length > 0) {
|
||||
const { data: reviewsData } = await supabase
|
||||
.from('reviews')
|
||||
.select('order_id')
|
||||
.eq('user_id', userId)
|
||||
.eq('type', 'consulting')
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case 'done':
|
||||
return <Badge className="bg-accent">Selesai</Badge>;
|
||||
case 'confirmed':
|
||||
return <Badge className="bg-primary">Terkonfirmasi</Badge>;
|
||||
case 'pending_payment':
|
||||
return <Badge className="bg-secondary">Menunggu Pembayaran</Badge>;
|
||||
case 'cancelled':
|
||||
return <Badge variant="destructive">Dibatalkan</Badge>;
|
||||
default:
|
||||
return <Badge variant="outline">{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
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)}`;
|
||||
setReviewModal({
|
||||
open: true,
|
||||
slotId: slot.id,
|
||||
orderId: slot.order_id,
|
||||
label: `Sesi konsultasi ${dateLabel}, ${timeLabel}`,
|
||||
});
|
||||
};
|
||||
|
||||
const handleReviewSuccess = () => {
|
||||
// Mark this slot as reviewed
|
||||
setReviewedSlotIds(prev => new Set([...prev, reviewModal.slotId]));
|
||||
};
|
||||
|
||||
const doneSlots = slots.filter(s => s.status === 'done');
|
||||
const upcomingSlots = slots.filter(s => s.status === 'confirmed');
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="border-2 border-border">
|
||||
<CardHeader>
|
||||
<Skeleton className="h-6 w-40" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
{[...Array(2)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-20 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (slots.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card className="border-2 border-border">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Video className="w-5 h-5" />
|
||||
Riwayat Konsultasi
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* Upcoming sessions */}
|
||||
{upcomingSlots.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);
|
||||
return (
|
||||
<div key={slot.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(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)}
|
||||
{hasReviewed ? (
|
||||
<span className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<CheckCircle className="w-4 h-4 text-accent" />
|
||||
Sudah diulas
|
||||
</span>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => openReviewModal(slot)}
|
||||
className="border-2"
|
||||
>
|
||||
<Star className="w-4 h-4 mr-1" />
|
||||
Beri ulasan
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<ReviewModal
|
||||
open={reviewModal.open}
|
||||
onOpenChange={(open) => setReviewModal({ ...reviewModal, open })}
|
||||
userId={userId}
|
||||
productId={null}
|
||||
orderId={reviewModal.orderId}
|
||||
type="consulting"
|
||||
contextLabel={reviewModal.label}
|
||||
onSuccess={handleReviewSuccess}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
149
src/components/reviews/ReviewModal.tsx
Normal file
149
src/components/reviews/ReviewModal.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
import { useState } from 'react';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import { Star, X } from 'lucide-react';
|
||||
|
||||
interface ReviewModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
userId: string;
|
||||
productId?: string | null;
|
||||
orderId?: string | null;
|
||||
type: 'consulting' | 'bootcamp' | 'webinar' | 'general';
|
||||
contextLabel?: string;
|
||||
onSuccess?: () => void;
|
||||
}
|
||||
|
||||
export function ReviewModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
userId,
|
||||
productId,
|
||||
orderId,
|
||||
type,
|
||||
contextLabel,
|
||||
onSuccess,
|
||||
}: ReviewModalProps) {
|
||||
const [rating, setRating] = useState(0);
|
||||
const [hoverRating, setHoverRating] = useState(0);
|
||||
const [title, setTitle] = useState('');
|
||||
const [body, setBody] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (rating === 0) {
|
||||
toast({ title: 'Error', description: 'Pilih rating terlebih dahulu', variant: 'destructive' });
|
||||
return;
|
||||
}
|
||||
if (!title.trim()) {
|
||||
toast({ title: 'Error', description: 'Judul tidak boleh kosong', variant: 'destructive' });
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
const { error } = await supabase.from('reviews').insert({
|
||||
user_id: userId,
|
||||
product_id: productId || null,
|
||||
order_id: orderId || null,
|
||||
type,
|
||||
rating,
|
||||
title: title.trim(),
|
||||
body: body.trim() || null,
|
||||
is_approved: false,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
console.error('Review submit error:', error);
|
||||
toast({ title: 'Error', description: 'Gagal mengirim ulasan', variant: 'destructive' });
|
||||
} else {
|
||||
toast({ title: 'Berhasil', description: 'Terima kasih! Ulasan Anda akan ditinjau oleh admin.' });
|
||||
// Reset form
|
||||
setRating(0);
|
||||
setTitle('');
|
||||
setBody('');
|
||||
onOpenChange(false);
|
||||
onSuccess?.();
|
||||
}
|
||||
setSubmitting(false);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
if (!submitting) {
|
||||
onOpenChange(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Beri Ulasan</DialogTitle>
|
||||
{contextLabel && (
|
||||
<DialogDescription>{contextLabel}</DialogDescription>
|
||||
)}
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Rating</label>
|
||||
<div className="flex gap-1">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<button
|
||||
key={i}
|
||||
type="button"
|
||||
onClick={() => setRating(i)}
|
||||
onMouseEnter={() => setHoverRating(i)}
|
||||
onMouseLeave={() => setHoverRating(0)}
|
||||
className="p-1 transition-transform hover:scale-110"
|
||||
>
|
||||
<Star
|
||||
className={`w-8 h-8 ${
|
||||
i <= (hoverRating || rating)
|
||||
? 'fill-primary text-primary'
|
||||
: 'text-muted-foreground'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Judul</label>
|
||||
<Input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Ringkasan pengalaman Anda"
|
||||
className="border-2"
|
||||
maxLength={100}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Ulasan (Opsional)</label>
|
||||
<Textarea
|
||||
value={body}
|
||||
onChange={(e) => setBody(e.target.value)}
|
||||
placeholder="Ceritakan pengalaman Anda..."
|
||||
className="border-2 min-h-[100px]"
|
||||
maxLength={500}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 justify-end">
|
||||
<Button variant="outline" onClick={handleClose} disabled={submitting} className="border-2">
|
||||
Batal
|
||||
</Button>
|
||||
<Button onClick={handleSubmit} disabled={submitting}>
|
||||
{submitting ? 'Mengirim...' : 'Kirim Ulasan'}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user