[V0_FILE]typescriptreact:file="leaderboard.tsx" isMerged="true" "use client" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Trophy } from "lucide-react" // Sample data for the leaderboard const leaderboardData = [ { id: 1, rank: 1, name: "Alex Johnson", username: "alexj", score: 9875, avatar: "/placeholder.svg?height=40&width=40", change: "up", gamesPlayed: 152, winRate: "68%", }, { id: 2, rank: 2, name: "Maria Garcia", username: "mgarcia", score: 9432, avatar: "/placeholder.svg?height=40&width=40", change: "same", gamesPlayed: 138, winRate: "65%", }, { id: 3, rank: 3, name: "David Kim", username: "dkim", score: 9154, avatar: "/placeholder.svg?height=40&width=40", change: "up", gamesPlayed: 145, winRate: "62%", }, { id: 4, rank: 4, name: "Sarah Williams", username: "swilliams", score: 8975, avatar: "/placeholder.svg?height=40&width=40", change: "down", gamesPlayed: 132, winRate: "59%", }, { id: 5, rank: 5, name: "James Brown", username: "jbrown", score: 8742, avatar: "/placeholder.svg?height=40&width=40", change: "up", gamesPlayed: 128, winRate: "57%", }, { id: 6, rank: 6, name: "Emily Davis", username: "edavis", score: 8521, avatar: "/placeholder.svg?height=40&width=40", change: "down", gamesPlayed: 120, winRate: "55%", }, { id: 7, rank: 7, name: "Michael Wilson", username: "mwilson", score: 8347, avatar: "/placeholder.svg?height=40&width=40", change: "same", gamesPlayed: 115, winRate: "53%", }, { id: 8, rank: 8, name: "Jessica Taylor", username: "jtaylor", score: 8102, avatar: "/placeholder.svg?height=40&width=40", change: "up", gamesPlayed: 110, winRate: "51%", }, { id: 9, rank: 9, name: "Robert Martinez", username: "rmartinez", score: 7986, avatar: "/placeholder.svg?height=40&width=40", change: "down", gamesPlayed: 105, winRate: "49%", }, { id: 10, rank: 10, name: "Jennifer Anderson", username: "janderson", score: 7854, avatar: "/placeholder.svg?height=40&width=40", change: "up", gamesPlayed: 100, winRate: "47%", }, ] export default function Leaderboard() { return (

Leaderboard Top players ranked by score

Rank Player Score Games Win Rate {leaderboardData.map((player) => ( {player.rank <= 3 ? ( {player.rank} ) : ( {player.rank} )}

{player.name .split(" ") .map((n) => n[0]) .join("")}

{player.name}

@{player.username}

{player.score.toLocaleString()} {player.gamesPlayed} {player.winRate} ))}

) } [V0_FILE]typescriptreact:file="leaderboard-with-admin.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Trophy, Pencil, Plus, Trash2, LogOut } from "lucide-react" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import * as z from "zod" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" // Define the user type type Tim = { id: number rank: number name: string region: string score: number avatar: string change: "up" | "down" | "same" } type Azuriranje = { id: number adminName: string action: string points: number timName: string timestamp: Date } type Admin = { username: string password: string } // Initial sample data const pocetniTimovi: Tim[] = [ { id: 1, rank: 1, name: "Lokalni tim Bihać", region: "Bihać", score: 9875, avatar: "/placeholder.svg?height=40&width=40", change: "up", }, { id: 2, rank: 2, name: "Lokalni tim Sarajevo", region: "Sarajevo", score: 9432, avatar: "/placeholder.svg?height=40&width=40", change: "same", }, { id: 3, rank: 3, name: "Lokalni tim Tuzla", region: "Tuzla", score: 9154, avatar: "/placeholder.svg?height=40&width=40", change: "up", }, { id: 4, rank: 4, name: "Lokalni tim Mostar", region: "Mostar", score: 8975, avatar: "/placeholder.svg?height=40&width=40", change: "down", }, { id: 5, rank: 5, name: "Lokalni tim Zenica", region: "Zenica", score: 8742, avatar: "/placeholder.svg?height=40&width=40", change: "up", }, ] const admini: Admin[] = [ { username: "Imad Lisica", password: "srednjoskolci17.11" }, { username: "Sara Nuhanović", password: "asubih04.11" }, { username: "Nejla Zukančić", password: "mladi12.08" }, { username: "Albin Begović", password: "volonteri05.12" }, ] // Form validation schema const timFormSchema = z.object({ name: z.string().min(2, { message: "Ime mora imati najmanje 2 karaktera." }), region: z.string().min(2, { message: "Regija mora imati najmanje 2 karaktera." }), score: z.coerce.number().min(0, { message: "Rezultat mora biti pozitivan broj." }), }) const loginFormSchema = z.object({ username: z.string().min(1, { message: "Korisničko ime je obavezno." }), password: z.string().min(1, { message: "Lozinka je obavezna." }), }) export default function LeaderboardWithAdmin() { const [timovi, setTimovi] = useState(pocetniTimovi) const [timZaUredjivanje, setTimZaUredjivanje] = useState(null) const [isAddDialogOpen, setIsAddDialogOpen] = useState(false) const [isEditDialogOpen, setIsEditDialogOpen] = useState(false) const [azuriranja, setAzuriranja] = useState([]) const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false) const [isLoginDialogOpen, setIsLoginDialogOpen] = useState(false) const [activeTab, setActiveTab] = useState("leaderboard") const [trenutniAdmin, setTrenutniAdmin] = useState(null) useEffect(() => { if (activeTab === "admin" && !isAdminLoggedIn) { setIsLoginDialogOpen(true) } }, [activeTab, isAdminLoggedIn]) // Sort and update ranks const azurirajRangove = (listaTimova: Tim[]): Tim[] => { const sortirani = [...listaTimova].sort((a, b) => b.score - a.score) return sortirani.map((tim, index) => ({ ...tim, rank: index + 1, })) } // Add new team const dodajTim = (podaciTima: Omit) => { const noviTim: Tim = { id: timovi.length > 0 ? Math.max(...timovi.map((t) => t.id)) + 1 : 1, rank: 0, // Will be calculated avatar: "/placeholder.svg?height=40&width=40", change: "same", ...podaciTima, } const azuriraniTimovi = azurirajRangove([...timovi, noviTim]) setTimovi(azuriraniTimovi) setIsAddDialogOpen(false) // Add update for new team const novoAzuriranje: Azuriranje = { id: azuriranja.length + 1, adminName: trenutniAdmin || "Admin", action: "dodao novi tim", points: podaciTima.score, timName: podaciTima.name, timestamp: new Date(), } setAzuriranja((prev) => [novoAzuriranje, ...prev]) } // Update team const azurirajTim = (azuriraniTim: Tim) => { const azuriraniTimovi = timovi.map((tim) => (tim.id === azuriraniTim.id ? azuriraniTim : tim)) setTimovi(azurirajRangove(azuriraniTimovi)) setIsEditDialogOpen(false) setTimZaUredjivanje(null) // Add update for team edit const stariTim = timovi.find((t) => t.id === azuriraniTim.id) if (stariTim) { const razlikaRezultata = azuriraniTim.score - stariTim.score if (razlikaRezultata !== 0) { const novoAzuriranje: Azuriranje = { id: azuriranja.length + 1, adminName: trenutniAdmin || "Admin", action: razlikaRezultata > 0 ? "dodao" : "oduzeo", points: Math.abs(razlikaRezultata), timName: azuriraniTim.name, timestamp: new Date(), } setAzuriranja((prev) => [novoAzuriranje, ...prev]) } } } // Delete team const obrisiTim = (id: number) => { const timZaBrisanje = timovi.find((t) => t.id === id) const azuriraniTimovi = timovi.filter((tim) => tim.id !== id) setTimovi(azurirajRangove(azuriraniTimovi)) // Add update for team deletion if (timZaBrisanje) { const novoAzuriranje: Azuriranje = { id: azuriranja.length + 1, adminName: trenutniAdmin || "Admin", action: "obrisao tim", points: 0, timName: timZaBrisanje.name, timestamp: new Date(), } setAzuriranja((prev) => [novoAzuriranje, ...prev]) } } // Update score const azurirajRezultat = (timId: number, bodovi: number) => { const azuriraniTimovi = timovi.map((tim) => { if (tim.id === timId) { const noviRezultat = Math.max(0, tim.score + bodovi) // Ensure score is not negative // Add new update const novoAzuriranje: Azuriranje = { id: azuriranja.length + 1, adminName: trenutniAdmin || "Admin", action: bodovi > 0 ? "dodao" : "oduzeo", points: Math.abs(bodovi), timName: tim.name, timestamp: new Date(), } setAzuriranja((prev) => [novoAzuriranje, ...prev]) return { ...tim, score: noviRezultat } } return tim }) setTimovi(azurirajRangove(azuriraniTimovi)) } // Form for adding new team const DodajTimForma = () => { const form = useForm>({ resolver: zodResolver(timFormSchema), defaultValues: { name: "", region: "", score: 0, }, }) function onSubmit(values: z.infer) { dodajTim(values) form.reset() } return (

( Ime tima )} /> ( Regija )} /> ( Rezultat )} /> ) } // Form for editing team const UrediTimForma = ({ tim }: { tim: Tim }) => { const form = useForm>({ resolver: zodResolver(timFormSchema), defaultValues: { name: tim.name, region: tim.region, score: tim.score, }, }) function onSubmit(values: z.infer) { azurirajTim({ ...tim, ...values }) form.reset() } return (

( Ime tima )} /> ( Regija )} /> ( Rezultat )} /> ) } // Login form const LoginForma = () => { const form = useForm>({ resolver: zodResolver(loginFormSchema), defaultValues: { username: "", password: "", }, }) function onSubmit(values: z.infer) { const admin = admini.find((a) => a.username === values.username && a.password === values.password) if (admin) { setIsAdminLoggedIn(true) setTrenutniAdmin(admin.username) setIsLoginDialogOpen(false) } else { form.setError("password", { type: "manual", message: "Pogrešno korisničko ime ili lozinka", }) } } return (

( Korisničko ime )} /> ( Lozinka )} /> ) } const handleLogout = () => { setIsAdminLoggedIn(false) setTrenutniAdmin(null) setActiveTab("leaderboard") } return (

Rang lista Admin panel {/* Leaderboard Tab */}

Rang lista Najbolji timovi rangirani po rezultatu

Rang Tim Regija Rezultat {timovi.map((tim) => ( {tim.rank <= 3 ? ( {tim.rank} ) : ( {tim.rank} )}

{tim.name .split(" ") .map((n) => n[0]) .join("")}

{tim.name}

{tim.region} {tim.score.toLocaleString()} ))}

{/* Recent Updates Section */} Nedavna ažuriranja Najnovije promjene rezultata {azuriranja.map((azuriranje, index) => (

{azuriranje.adminName} {azuriranje.action}{" "} {azuriranje.points} {azuriranje.points === 1 ? "bod" : "bodova"} za tim{" "} {azuriranje.timName}

{azuriranje.timestamp.toLocaleString()}

{index < azuriranja.length - 1 && }

))}

{/* Admin Panel Tab */} {isAdminLoggedIn ? (

Admin panel Prijavljen kao: {trenutniAdmin}

Rang Ime tima Regija Rezultat Brzo ažuriranje rezultata Akcije {timovi.map((tim) => ( {tim.rank} {tim.name} {tim.region} {tim.score.toLocaleString()}

{[-5, -4, -3, -2, 2, 3, 4, 5].map((bodovi) => ( ))}

))}

) : ( )}

) }