Changes
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,5 +1,6 @@
|
||||
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";
|
||||
@@ -8,6 +9,7 @@ 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";
|
||||
|
||||
@@ -37,6 +39,7 @@ export default function AdminReviews() {
|
||||
}, []);
|
||||
|
||||
const fetchReviews = async () => {
|
||||
setLoading(true);
|
||||
const { data, error } = await supabase
|
||||
.from("reviews")
|
||||
.select(`
|
||||
@@ -47,7 +50,9 @@ export default function AdminReviews() {
|
||||
.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[]) || []);
|
||||
}
|
||||
@@ -110,6 +115,8 @@ export default function AdminReviews() {
|
||||
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) => (
|
||||
@@ -132,194 +139,225 @@ export default function AdminReviews() {
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="p-6">Loading...</div>;
|
||||
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 (
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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-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>
|
||||
<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>
|
||||
))
|
||||
)}
|
||||
</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>
|
||||
) : (
|
||||
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>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
<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]"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setEditReview(null)}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button onClick={handleSaveEdit}>Simpan</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setEditReview(null)}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button onClick={handleSaveEdit}>Simpan</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user