import React, { useState } from 'react'; import { base44 } from '@/api/base44Client'; import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { motion, AnimatePresence } from 'framer-motion'; import { Button } from "@/components/ui/button"; import { Plus, Trophy, TrendingUp, Loader2 } from 'lucide-react'; import FrameCard from '@/components/sports/FrameCard'; import AddFrameModal from '@/components/sports/AddFrameModal'; import CategoryFilter from '@/components/sports/CategoryFilter'; export default function Home() { const [showAddModal, setShowAddModal] = useState(false); const [selectedCategory, setSelectedCategory] = useState('all'); const queryClient = useQueryClient(); const { data: frames = [], isLoading } = useQuery({ queryKey: ['frames'], queryFn: () => base44.entities.Frame.list('-created_date'), }); const createMutation = useMutation({ mutationFn: (data) => base44.entities.Frame.create(data), onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['frames'] }); setShowAddModal(false); }, }); const deleteMutation = useMutation({ mutationFn: (id) => base44.entities.Frame.delete(id), onSuccess: () => queryClient.invalidateQueries({ queryKey: ['frames'] }), }); const updateMutation = useMutation({ mutationFn: ({ id, data }) => base44.entities.Frame.update(id, data), onSuccess: () => queryClient.invalidateQueries({ queryKey: ['frames'] }), }); const handleToggleFeatured = (frame) => { updateMutation.mutate({ id: frame.id, data: { is_featured: !frame.is_featured } }); }; const filteredFrames = selectedCategory === 'all' ? frames : frames.filter(f => f.category === selectedCategory); const featuredFrames = frames.filter(f => f.is_featured); return (