Changes
This commit is contained in:
gpt-engineer-app[bot]
325
src/pages/admin/AdminReviews.tsx
Normal file
325
src/pages/admin/AdminReviews.tsx
Normal file
@@ -0,0 +1,325 @@
|
||||
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 { 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 { 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 () => {
|
||||
const { data, error } = await supabase
|
||||
.from("reviews")
|
||||
.select(`
|
||||
*,
|
||||
profiles (full_name, email),
|
||||
products (title)
|
||||
`)
|
||||
.order("created_at", { ascending: false });
|
||||
|
||||
if (error) {
|
||||
toast({ title: "Error", description: "Gagal mengambil data ulasan", variant: "destructive" });
|
||||
} 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 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 <div className="p-6">Loading...</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="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">
|
||||
<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 ({reviews.filter((r) => !r.is_approved).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-8 text-center text-muted-foreground">
|
||||
Tidak ada ulasan
|
||||
</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>
|
||||
<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">
|
||||
{!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">
|
||||
{reviews.filter((r) => !r.is_approved).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>
|
||||
<p className="text-muted-foreground text-sm">{review.body}</p>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{review.profiles?.full_name || review.profiles?.email}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user