364 lines
14 KiB
TypeScript
364 lines
14 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { supabase } from "@/integrations/supabase/client";
|
|
import { AppLayout } from "@/components/AppLayout";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { toast } from "@/hooks/use-toast";
|
|
import { Star, Check, X, Edit, Trash2 } from "lucide-react";
|
|
|
|
interface Review {
|
|
id: string;
|
|
user_id: string;
|
|
product_id: string | null;
|
|
type: string;
|
|
rating: number;
|
|
title: string;
|
|
body: string;
|
|
is_approved: boolean;
|
|
created_at: string;
|
|
profiles: { full_name: string | null; email: string | null } | null;
|
|
products: { title: string } | null;
|
|
}
|
|
|
|
export default function AdminReviews() {
|
|
const [reviews, setReviews] = useState<Review[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [filter, setFilter] = useState({ type: "all", status: "all" });
|
|
const [editReview, setEditReview] = useState<Review | null>(null);
|
|
const [editForm, setEditForm] = useState({ title: "", body: "" });
|
|
|
|
useEffect(() => {
|
|
fetchReviews();
|
|
}, []);
|
|
|
|
const fetchReviews = async () => {
|
|
setLoading(true);
|
|
const { data, error } = await supabase
|
|
.from("reviews")
|
|
.select(`
|
|
*,
|
|
profiles (full_name, email),
|
|
products (title)
|
|
`)
|
|
.order("created_at", { ascending: false });
|
|
|
|
if (error) {
|
|
console.error("Fetch reviews error:", error);
|
|
toast({ title: "Error", description: "Gagal mengambil data ulasan", variant: "destructive" });
|
|
setReviews([]);
|
|
} else {
|
|
setReviews((data as unknown as Review[]) || []);
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
const handleApprove = async (id: string, approved: boolean) => {
|
|
const { error } = await supabase
|
|
.from("reviews")
|
|
.update({ is_approved: approved })
|
|
.eq("id", id);
|
|
|
|
if (error) {
|
|
toast({ title: "Error", description: "Gagal mengubah status", variant: "destructive" });
|
|
} else {
|
|
toast({ title: "Berhasil", description: approved ? "Ulasan disetujui" : "Ulasan ditolak" });
|
|
fetchReviews();
|
|
}
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm("Hapus ulasan ini?")) return;
|
|
|
|
const { error } = await supabase.from("reviews").delete().eq("id", id);
|
|
|
|
if (error) {
|
|
toast({ title: "Error", description: "Gagal menghapus", variant: "destructive" });
|
|
} else {
|
|
toast({ title: "Berhasil", description: "Ulasan dihapus" });
|
|
fetchReviews();
|
|
}
|
|
};
|
|
|
|
const handleEdit = (review: Review) => {
|
|
setEditReview(review);
|
|
setEditForm({ title: review.title, body: review.body });
|
|
};
|
|
|
|
const handleSaveEdit = async () => {
|
|
if (!editReview) return;
|
|
|
|
const { error } = await supabase
|
|
.from("reviews")
|
|
.update({ title: editForm.title, body: editForm.body })
|
|
.eq("id", editReview.id);
|
|
|
|
if (error) {
|
|
toast({ title: "Error", description: "Gagal menyimpan", variant: "destructive" });
|
|
} else {
|
|
toast({ title: "Berhasil", description: "Ulasan diperbarui" });
|
|
setEditReview(null);
|
|
fetchReviews();
|
|
}
|
|
};
|
|
|
|
const filteredReviews = reviews.filter((r) => {
|
|
if (filter.type !== "all" && r.type !== filter.type) return false;
|
|
if (filter.status === "approved" && !r.is_approved) return false;
|
|
if (filter.status === "pending" && r.is_approved) return false;
|
|
return true;
|
|
});
|
|
|
|
const pendingReviews = reviews.filter((r) => !r.is_approved);
|
|
|
|
const renderStars = (rating: number) => (
|
|
<div className="flex gap-0.5">
|
|
{[1, 2, 3, 4, 5].map((i) => (
|
|
<Star
|
|
key={i}
|
|
className={`w-4 h-4 ${i <= rating ? "fill-primary text-primary" : "text-muted-foreground"}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
const getTypeLabel = (type: string) => {
|
|
switch (type) {
|
|
case "consulting": return "Konsultasi";
|
|
case "bootcamp": return "Bootcamp";
|
|
case "webinar": return "Webinar";
|
|
case "general": return "Umum";
|
|
default: return type;
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<AppLayout>
|
|
<div className="container mx-auto px-4 py-8">
|
|
<Skeleton className="h-10 w-48 mb-4" />
|
|
<Skeleton className="h-6 w-64 mb-8" />
|
|
<div className="space-y-4">
|
|
{[...Array(3)].map((_, i) => (
|
|
<Skeleton key={i} className="h-32 w-full" />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AppLayout>
|
|
<div className="container mx-auto px-4 py-8 space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Ulasan</h1>
|
|
<p className="text-muted-foreground">Kelola ulasan dari member</p>
|
|
</div>
|
|
|
|
<div className="flex gap-4 flex-wrap">
|
|
<Select value={filter.type} onValueChange={(v) => setFilter({ ...filter, type: v })}>
|
|
<SelectTrigger className="w-40 border-2">
|
|
<SelectValue placeholder="Tipe" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Semua Tipe</SelectItem>
|
|
<SelectItem value="consulting">Konsultasi</SelectItem>
|
|
<SelectItem value="bootcamp">Bootcamp</SelectItem>
|
|
<SelectItem value="webinar">Webinar</SelectItem>
|
|
<SelectItem value="general">Umum</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={filter.status} onValueChange={(v) => setFilter({ ...filter, status: v })}>
|
|
<SelectTrigger className="w-40 border-2">
|
|
<SelectValue placeholder="Status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Semua Status</SelectItem>
|
|
<SelectItem value="pending">Menunggu</SelectItem>
|
|
<SelectItem value="approved">Disetujui</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<Tabs defaultValue="list">
|
|
<TabsList>
|
|
<TabsTrigger value="list">Daftar ({filteredReviews.length})</TabsTrigger>
|
|
<TabsTrigger value="pending">
|
|
Menunggu ({pendingReviews.length})
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="list" className="mt-4">
|
|
<div className="space-y-4">
|
|
{filteredReviews.length === 0 ? (
|
|
<Card className="border-2 border-border">
|
|
<CardContent className="py-12 text-center">
|
|
<Star className="w-12 h-12 mx-auto mb-4 text-muted-foreground" />
|
|
<h3 className="text-lg font-semibold mb-2">Belum ada ulasan</h3>
|
|
<p className="text-muted-foreground">
|
|
Ulasan dari member akan muncul di sini setelah mereka mengirimkan ulasan.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
filteredReviews.map((review) => (
|
|
<Card key={review.id} className="border-2 border-border">
|
|
<CardContent className="py-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1 space-y-2">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{renderStars(review.rating)}
|
|
<Badge variant="outline">{getTypeLabel(review.type)}</Badge>
|
|
<Badge className={review.is_approved ? "bg-accent" : "bg-secondary"}>
|
|
{review.is_approved ? "Disetujui" : "Menunggu"}
|
|
</Badge>
|
|
</div>
|
|
<h3 className="font-bold">{review.title}</h3>
|
|
{review.body && <p className="text-muted-foreground text-sm">{review.body}</p>}
|
|
<div className="text-xs text-muted-foreground">
|
|
<span>{review.profiles?.full_name || review.profiles?.email || "Unknown"}</span>
|
|
{review.products && <span> • {review.products.title}</span>}
|
|
<span> • {new Date(review.created_at).toLocaleDateString("id-ID")}</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 flex-shrink-0">
|
|
{!review.is_approved && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-2"
|
|
onClick={() => handleApprove(review.id, true)}
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
</Button>
|
|
)}
|
|
{review.is_approved && (
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-2"
|
|
onClick={() => handleApprove(review.id, false)}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
)}
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-2"
|
|
onClick={() => handleEdit(review)}
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-2 text-destructive hover:text-destructive"
|
|
onClick={() => handleDelete(review.id)}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="pending" className="mt-4">
|
|
<div className="space-y-4">
|
|
{pendingReviews.length === 0 ? (
|
|
<Card className="border-2 border-border">
|
|
<CardContent className="py-12 text-center">
|
|
<Check className="w-12 h-12 mx-auto mb-4 text-accent" />
|
|
<h3 className="text-lg font-semibold mb-2">Semua ulasan sudah dimoderasi</h3>
|
|
<p className="text-muted-foreground">
|
|
Tidak ada ulasan yang menunggu persetujuan.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
pendingReviews.map((review) => (
|
|
<Card key={review.id} className="border-2 border-primary/20">
|
|
<CardContent className="py-4">
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div className="flex-1 space-y-2">
|
|
<div className="flex items-center gap-2">
|
|
{renderStars(review.rating)}
|
|
<Badge variant="outline">{getTypeLabel(review.type)}</Badge>
|
|
</div>
|
|
<h3 className="font-bold">{review.title}</h3>
|
|
{review.body && <p className="text-muted-foreground text-sm">{review.body}</p>}
|
|
<div className="text-xs text-muted-foreground">
|
|
{review.profiles?.full_name || review.profiles?.email}
|
|
{review.products && <span> • {review.products.title}</span>}
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 flex-shrink-0">
|
|
<Button size="sm" onClick={() => handleApprove(review.id, true)}>
|
|
<Check className="w-4 h-4 mr-1" /> Setujui
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
className="border-2 text-destructive"
|
|
onClick={() => handleDelete(review.id)}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))
|
|
)}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
|
|
<Dialog open={!!editReview} onOpenChange={() => setEditReview(null)}>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Edit Ulasan</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Judul</label>
|
|
<Input
|
|
value={editForm.title}
|
|
onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
|
|
className="border-2"
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Isi</label>
|
|
<Textarea
|
|
value={editForm.body}
|
|
onChange={(e) => setEditForm({ ...editForm, body: e.target.value })}
|
|
className="border-2 min-h-[100px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setEditReview(null)}>
|
|
Batal
|
|
</Button>
|
|
<Button onClick={handleSaveEdit}>Simpan</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|