92 lines
3.2 KiB
TypeScript
92 lines
3.2 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { supabase } from '@/integrations/supabase/client';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { AppLayout } from '@/components/AppLayout';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
|
import { CurriculumEditor } from '@/components/admin/CurriculumEditor';
|
|
import { BookOpen } from 'lucide-react';
|
|
|
|
interface Product {
|
|
id: string;
|
|
title: string;
|
|
slug: string;
|
|
}
|
|
|
|
export default function AdminBootcamp() {
|
|
const { user, isAdmin, loading: authLoading } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [bootcamps, setBootcamps] = useState<Product[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (!authLoading) {
|
|
if (!user) navigate('/auth');
|
|
else if (!isAdmin) navigate('/dashboard');
|
|
else fetchBootcamps();
|
|
}
|
|
}, [user, isAdmin, authLoading]);
|
|
|
|
const fetchBootcamps = async () => {
|
|
const { data, error } = await supabase
|
|
.from('products')
|
|
.select('id, title, slug')
|
|
.eq('type', 'bootcamp')
|
|
.order('created_at', { ascending: false });
|
|
if (!error && data) setBootcamps(data);
|
|
setLoading(false);
|
|
};
|
|
|
|
if (authLoading || loading) {
|
|
return (
|
|
<AppLayout>
|
|
<div className="container mx-auto px-4 py-8">
|
|
<Skeleton className="h-10 w-1/3 mb-8" />
|
|
<Skeleton className="h-64 w-full" />
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AppLayout>
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="flex items-center gap-3 mb-8">
|
|
<BookOpen className="w-8 h-8" />
|
|
<div>
|
|
<h1 className="text-4xl font-bold">Manajemen Bootcamp</h1>
|
|
<p className="text-muted-foreground">Kelola kurikulum bootcamp</p>
|
|
</div>
|
|
</div>
|
|
|
|
{bootcamps.length === 0 ? (
|
|
<Card className="border-2 border-border">
|
|
<CardContent className="py-12 text-center">
|
|
<p className="text-muted-foreground mb-4">Belum ada bootcamp. Buat produk dengan tipe bootcamp terlebih dahulu.</p>
|
|
<Button onClick={() => navigate('/admin/products')} variant="outline" className="border-2">
|
|
Ke Manajemen Produk
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
) : (
|
|
<Accordion type="single" collapsible className="space-y-4">
|
|
{bootcamps.map((bootcamp) => (
|
|
<AccordionItem key={bootcamp.id} value={bootcamp.id} className="border-2 border-border bg-card">
|
|
<AccordionTrigger className="px-4 hover:no-underline">
|
|
<span className="font-bold">{bootcamp.title}</span>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-4 pb-4">
|
|
<CurriculumEditor productId={bootcamp.id} />
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
)}
|
|
</div>
|
|
</AppLayout>
|
|
);
|
|
}
|