146 lines
11 KiB
TypeScript
146 lines
11 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Layout } from '@/components/Layout';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { supabase } from '@/integrations/supabase/client';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import { toast } from '@/hooks/use-toast';
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
|
import { Plus, Pencil, Trash2 } from 'lucide-react';
|
|
import { CurriculumEditor } from '@/components/admin/CurriculumEditor';
|
|
|
|
interface Product { id: string; title: string; slug: string; type: string; description: string; content: string; meeting_link: string | null; recording_url: string | null; price: number; sale_price: number | null; is_active: boolean; }
|
|
|
|
const emptyProduct = { title: '', slug: '', type: 'consulting', description: '', content: '', meeting_link: '', recording_url: '', price: 0, sale_price: null as number | null, is_active: true };
|
|
|
|
export default function Admin() {
|
|
const { user, isAdmin, loading: authLoading } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [products, setProducts] = useState<Product[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [dialogOpen, setDialogOpen] = useState(false);
|
|
const [editingProduct, setEditingProduct] = useState<Product | null>(null);
|
|
const [form, setForm] = useState(emptyProduct);
|
|
const [saving, setSaving] = useState(false);
|
|
const [activeTab, setActiveTab] = useState('details');
|
|
|
|
useEffect(() => {
|
|
if (!authLoading) {
|
|
if (!user) navigate('/auth');
|
|
else if (!isAdmin) { toast({ title: 'Access denied', description: 'Admin access required', variant: 'destructive' }); navigate('/dashboard'); }
|
|
else fetchProducts();
|
|
}
|
|
}, [user, isAdmin, authLoading, navigate]);
|
|
|
|
const fetchProducts = async () => {
|
|
const { data, error } = await supabase.from('products').select('*').order('created_at', { ascending: false });
|
|
if (!error && data) setProducts(data);
|
|
setLoading(false);
|
|
};
|
|
|
|
const generateSlug = (title: string) => title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
|
|
|
|
const handleEdit = (product: Product) => {
|
|
setEditingProduct(product);
|
|
setForm({ title: product.title, slug: product.slug, type: product.type, description: product.description, content: product.content || '', meeting_link: product.meeting_link || '', recording_url: product.recording_url || '', price: product.price, sale_price: product.sale_price, is_active: product.is_active });
|
|
setActiveTab('details');
|
|
setDialogOpen(true);
|
|
};
|
|
|
|
const handleNew = () => { setEditingProduct(null); setForm(emptyProduct); setActiveTab('details'); setDialogOpen(true); };
|
|
|
|
const handleSave = async () => {
|
|
if (!form.title || !form.slug || form.price <= 0) { toast({ title: 'Validation error', description: 'Please fill in all required fields', variant: 'destructive' }); return; }
|
|
setSaving(true);
|
|
const productData = { title: form.title, slug: form.slug, type: form.type, description: form.description, content: form.content, meeting_link: form.meeting_link || null, recording_url: form.recording_url || null, price: form.price, sale_price: form.sale_price || null, is_active: form.is_active };
|
|
if (editingProduct) {
|
|
const { error } = await supabase.from('products').update(productData).eq('id', editingProduct.id);
|
|
if (error) toast({ title: 'Error', description: 'Failed to update product', variant: 'destructive' });
|
|
else { toast({ title: 'Success', description: 'Product updated' }); setDialogOpen(false); fetchProducts(); }
|
|
} else {
|
|
const { error } = await supabase.from('products').insert(productData);
|
|
if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
|
|
else { toast({ title: 'Success', description: 'Product created' }); setDialogOpen(false); fetchProducts(); }
|
|
}
|
|
setSaving(false);
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
if (!confirm('Are you sure you want to delete this product?')) return;
|
|
const { error } = await supabase.from('products').delete().eq('id', id);
|
|
if (error) toast({ title: 'Error', description: 'Failed to delete product', variant: 'destructive' });
|
|
else { toast({ title: 'Success', description: 'Product deleted' }); fetchProducts(); }
|
|
};
|
|
|
|
if (authLoading || loading) return (<Layout><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></Layout>);
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="container mx-auto px-4 py-8">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div><h1 className="text-4xl font-bold">Admin Panel</h1><p className="text-muted-foreground">Manage your products</p></div>
|
|
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
|
<DialogTrigger asChild><Button onClick={handleNew} className="shadow-sm"><Plus className="w-4 h-4 mr-2" />Add Product</Button></DialogTrigger>
|
|
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto border-2 border-border">
|
|
<DialogHeader><DialogTitle>{editingProduct ? 'Edit Product' : 'New Product'}</DialogTitle></DialogHeader>
|
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="mt-4">
|
|
<TabsList className="border-2 border-border">
|
|
<TabsTrigger value="details">Details</TabsTrigger>
|
|
{editingProduct && form.type === 'bootcamp' && <TabsTrigger value="curriculum">Curriculum</TabsTrigger>}
|
|
</TabsList>
|
|
<TabsContent value="details" className="space-y-4 py-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2"><Label>Title *</Label><Input value={form.title} onChange={(e) => setForm({ ...form, title: e.target.value, slug: generateSlug(e.target.value) })} className="border-2" /></div>
|
|
<div className="space-y-2"><Label>Slug *</Label><Input value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} className="border-2" /></div>
|
|
</div>
|
|
<div className="space-y-2"><Label>Type</Label><Select value={form.type} onValueChange={(v) => setForm({ ...form, type: v })}><SelectTrigger className="border-2"><SelectValue /></SelectTrigger><SelectContent><SelectItem value="consulting">Consulting</SelectItem><SelectItem value="webinar">Webinar</SelectItem><SelectItem value="bootcamp">Bootcamp</SelectItem></SelectContent></Select></div>
|
|
<div className="space-y-2"><Label>Description</Label><Textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} className="border-2" rows={2} /></div>
|
|
<div className="space-y-2"><Label>Content (HTML)</Label><Textarea value={form.content} onChange={(e) => setForm({ ...form, content: e.target.value })} className="border-2 font-mono text-sm" rows={6} /></div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2"><Label>Meeting Link</Label><Input value={form.meeting_link} onChange={(e) => setForm({ ...form, meeting_link: e.target.value })} placeholder="https://meet.google.com/..." className="border-2" /></div>
|
|
<div className="space-y-2"><Label>Recording URL</Label><Input value={form.recording_url} onChange={(e) => setForm({ ...form, recording_url: e.target.value })} placeholder="https://youtube.com/..." className="border-2" /></div>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-2"><Label>Price *</Label><Input type="number" value={form.price} onChange={(e) => setForm({ ...form, price: parseFloat(e.target.value) || 0 })} className="border-2" /></div>
|
|
<div className="space-y-2"><Label>Sale Price</Label><Input type="number" value={form.sale_price || ''} onChange={(e) => setForm({ ...form, sale_price: e.target.value ? parseFloat(e.target.value) : null })} placeholder="Leave empty if no sale" className="border-2" /></div>
|
|
</div>
|
|
<div className="flex items-center gap-2"><Switch checked={form.is_active} onCheckedChange={(checked) => setForm({ ...form, is_active: checked })} /><Label>Active</Label></div>
|
|
<Button onClick={handleSave} className="w-full shadow-sm" disabled={saving}>{saving ? 'Saving...' : 'Save Product'}</Button>
|
|
</TabsContent>
|
|
{editingProduct && form.type === 'bootcamp' && <TabsContent value="curriculum" className="py-4"><CurriculumEditor productId={editingProduct.id} /></TabsContent>}
|
|
</Tabs>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
<Card className="border-2 border-border">
|
|
<CardContent className="p-0">
|
|
<Table>
|
|
<TableHeader><TableRow><TableHead>Title</TableHead><TableHead>Type</TableHead><TableHead>Price</TableHead><TableHead>Status</TableHead><TableHead className="text-right">Actions</TableHead></TableRow></TableHeader>
|
|
<TableBody>
|
|
{products.map((product) => (
|
|
<TableRow key={product.id}>
|
|
<TableCell className="font-medium">{product.title}</TableCell>
|
|
<TableCell className="capitalize">{product.type}</TableCell>
|
|
<TableCell>{product.sale_price ? <span><span className="font-bold">${product.sale_price}</span><span className="text-muted-foreground line-through ml-2">${product.price}</span></span> : <span className="font-bold">${product.price}</span>}</TableCell>
|
|
<TableCell><span className={product.is_active ? 'text-foreground' : 'text-muted-foreground'}>{product.is_active ? 'Active' : 'Inactive'}</span></TableCell>
|
|
<TableCell className="text-right"><Button variant="ghost" size="sm" onClick={() => handleEdit(product)}><Pencil className="w-4 h-4" /></Button><Button variant="ghost" size="sm" onClick={() => handleDelete(product.id)}><Trash2 className="w-4 h-4" /></Button></TableCell>
|
|
</TableRow>
|
|
))}
|
|
{products.length === 0 && <TableRow><TableCell colSpan={5} className="text-center py-8 text-muted-foreground">No products yet. Create your first product!</TableCell></TableRow>}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
} |