[V0_FILE]typescriptreact:file="public/fonts/Minecraft.woff2" isMerged="true" // This is a placeholder. You'll need to download a Minecraft-style font and place it here. // Example fonts: "Minecraft", "Minecrafter", or "Press Start 2P" from Google Fonts [V0_FILE]typescriptreact:file="public/dirt.png" isMerged="true" // This is a placeholder. You'll need to create or download a Minecraft dirt texture. // You can find Minecraft textures online or create a simple 64x64 pixel dirt texture. [V0_FILE]typescriptreact:file="components/payment-icons.tsx" isMerged="true" import type { LightbulbIcon as LucideProps } from "lucide-react" export function CreditCard(props: LucideProps) { return ( ) } export function PaypalIcon(props: LucideProps) { return ( ) } export function Landmark(props: LucideProps) { return ( ) } export function CreditCardIcon(props: LucideProps) { return ( ) } [V0_FILE]typescriptreact:file="components/footer.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" export default function Footer() { const currentYear = new Date().getFullYear() return ( ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 47 100% 50%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 47 100% 50%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 47 100% 50%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 47 100% 50%; } body { @apply bg-background text-foreground; } /* Custom styling for the slider */ .slider-thumb { @apply bg-yellow-500; } .slider-track { @apply bg-yellow-500; } /* Hide scrollbar for Chrome, Safari and Opera */ .hide-scrollbar::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .hide-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Animation for fade in */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 0.3s ease-out forwards; } [V0_FILE]typescriptreact:file="public/stone-pattern.png" isMerged="true" // This is a placeholder for a Minecraft stone texture pattern // In a real implementation, you would use an actual image file [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }) export const metadata: Metadata = { title: "DingoMC.PL - Minecraft Server", description: "Oficjalna strona serwera Minecraft DingoMC.PL", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="public/payment-icons/paysafecard.svg" isMerged="true" [V0_FILE]typescriptreact:file="public/payment-icons/paypal.svg" isMerged="true" [V0_FILE]typescriptreact:file="public/payment-icons/blik.svg" isMerged="true" [V0_FILE]typescriptreact:file="public/payment-icons/bank-transfer.svg" isMerged="true" [V0_FILE]typescriptreact:file="public/minecraft-coins.png" isMerged="true" // This is a placeholder for a Minecraft-style coin stack image // In a real implementation, you would use an actual image file [V0_FILE]javascript:file="app/page.js" isMerged="true" import Image from "next/image" import ServerStatus from "@/components/server-status" import PaymentModal from "@/components/payment-modal" import Navbar from "@/components/navbar" import Footer from "@/components/footer" import RecentPurchases from "@/components/recent-purchases" export default function Home() { return (

{/* Subtle Minecraft texture background */}

{/* Navbar */} {/* Main Content */}

{/* Hero Section with Logo */}

DingoMC.PL - Minecraft Server

{/* Server Status */} {/* Payment Modal */} {/* Recent Purchases Section */}

{/* Footer */}

) } [V0_FILE]javascript:file="components/payment-modal.js" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" import { AtSign, CreditCard, Wallet, ChevronDown, ChevronUp } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" const coinImages = [ { amount: 320, url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile320-110x93.png", }, { amount: 960, url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile960-110x93.png", }, { amount: 1600, url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile1600-110x93.png", }, { amount: 3200, url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile3200-110x93.png", }, { amount: 8000, url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile8000-110x93.png", }, ] const paymentMethods = [ { id: "paysafecard", name: "Paysafecard", icon: CreditCard }, { id: "paypal", name: "PayPal", icon: Wallet }, { id: "blik", name: "BLIK", icon: CreditCard }, { id: "transfer", name: "Przelew bankowy", icon: CreditCard }, ] export default function PaymentModal() { const [isOpen, setIsOpen] = useState(false) const [step, setStep] = useState(1) const [amount, setAmount] = useState(20) const [paymentMethod, setPaymentMethod] = useState("paysafecard") const [username, setUsername] = useState("") const [email, setEmail] = useState("") const [avatarUrl, setAvatarUrl] = useState("https://mc-heads.net/avatar/steve/64") const [showPromoCode, setShowPromoCode] = useState(false) const [promoCode, setPromoCode] = useState("") useEffect(() => { if (username.trim()) { setAvatarUrl(`https://mc-heads.net/avatar/${username}/64`) } else { setAvatarUrl("https://mc-heads.net/avatar/steve/64") } }, [username]) const handleSubmit = (e) => { e.preventDefault() // Process payment logic here alert(`Doładowanie: ${amount} PLN\nNick: ${username}\nEmail: ${email}\nMetoda: ${paymentMethod}`) setIsOpen(false) setStep(1) } const getCoinImage = (amount) => { const coin = coinImages.find((coin) => amount <= coin.amount) || coinImages[coinImages.length - 1] return coin.url } return ( <> {isOpen && ( setIsOpen(false)} > e.stopPropagation()} >

Doładuj swoje konto

{[1, 2, 3].map((i) => (

= i ? "bg-yellow-500 text-white" : "bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400" }`} > {i}

))}

{step === 1 && (

Nick w grze

setUsername(e.target.value)} className="w-full px-4 py-2 pl-12 border rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white" required /> Player avatar

setEmail(e.target.value)} className="w-full px-4 py-2 pl-12 border rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white" required />

{showPromoCode && ( setPromoCode(e.target.value)} placeholder="Wpisz kod promocyjny" className="w-full px-4 py-2 border rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white" /> )}

)} {step === 2 && (

Wybierz kwotę

{[10, 20, 50, 100, 200, 500].map((value) => ( ))}

Wybrana kwota: {amount} PLN

)} {step === 3 && (

Wybierz metodę płatności

{paymentMethods.map((method) => ( ))}

Podsumowanie

Nick: {username}

Kwota: {amount} PLN

Metoda: {paymentMethods.find((m) => m.id === paymentMethod)?.name}

)}

{step > 1 && ( )} {step < 3 ? ( ) : ( )}

)} ) } [V0_FILE]javascript:file="components/server-status.js" isMerged="true" "use client" import { useState, useEffect } from "react" import { Copy, Check, Users, Server, Wifi, AlertCircle } from "lucide-react" export default function ServerStatus() { const [serverData, setServerData] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [copied, setCopied] = useState(false) const serverIp = "DingoMC.PL" // Fetch server status from API useEffect(() => { const fetchServerStatus = async () => { try { setIsLoading(true) setError(null) const response = await fetch(`/v1/server-stats?period=24h`) if (!response.ok) { throw new Error(`Server returned ${response.status}`) } const data = await response.json() setServerData(data) } catch (err) { console.error("Error fetching server status:", err) setError(err.message || "Nie udało się pobrać danych serwera") } finally { setIsLoading(false) } } fetchServerStatus() // Set up polling every 60 seconds const intervalId = setInterval(fetchServerStatus, 60000) return () => clearInterval(intervalId) }, []) const copyIpToClipboard = () => { navigator.clipboard.writeText("dingomc.pl") setCopied(true) setTimeout(() => setCopied(false), 2000) } // Get current server status const serverStatus = serverData?.summary?.status || "loading" const currentPlayers = serverData?.summary?.currentPlayers || 0 const maxPlayers = serverData?.summary?.maxPlayersRecord || 0 const averagePlayers = serverData?.summary?.averagePlayers || 0 // Format the activity data for the graph const activityData = serverData?.recentEntries || [] return (

{/* Background decoration */}

{error && (

{error}

)}

{/* Server Status Indicator */}

Status serwera

{serverStatus === "online" ? "Online" : serverStatus === "offline" ? "Offline" : "Sprawdzanie..."}

{isLoading ? (

Ładowanie danych

) : (

{currentPlayers} / {maxPlayers} graczy online

)}

{/* Server IP */}

Adres serwera

{serverIp}

{/* Player Activity Graph */}

Aktywność graczy (24h)

Średnio: {averagePlayers} graczy

{isLoading ? // Loading skeleton for the graph Array.from({ length: 24 }).map((_, i) => (

)) : // Actual data activityData.map((entry, i) => { // Calculate relative height based on max players const maxHeight = Math.max(...activityData.map((e) => e.playerCount)) const height = maxHeight > 0 ? (entry.playerCount / maxHeight) * 100 : 0 return (

{/* Tooltip on hover */}

{new Date(entry.timestamp).toLocaleTimeString()} - {entry.playerCount} graczy

) })}

) } [V0_FILE]javascript:file="app/regulamin/page.js" isMerged="true" import Navbar from "@/components/navbar" import Footer from "@/components/footer" import { Scroll, Shield, Users, CreditCard, AlertTriangle } from "lucide-react" export default function Regulamin() { const sections = [ { title: "Postanowienia ogólne", icon: Scroll, content: [ "Niniejszy regulamin określa zasady korzystania z serwera Minecraft DingoMC.PL.", "Korzystanie z serwera oznacza akceptację niniejszego regulaminu.", "Administracja zastrzega sobie prawo do zmiany regulaminu bez wcześniejszego powiadomienia.", ], }, { title: "Zasady gry", icon: Shield, content: [ "Gracze zobowiązani są do przestrzegania zasad fair play.", "Zabrania się używania modyfikacji dających nieuczciwą przewagę nad innymi graczami.", "Griefing, kradzieże i niszczenie cudzych budowli są surowo zabronione.", "Zabrania się wykorzystywania błędów gry lub serwera. Należy je zgłaszać administracji.", ], }, { title: "Zachowanie na serwerze", icon: Users, content: [ "Gracze zobowiązani są do zachowania kultury osobistej w grze i na czacie.", "Zabrania się używania wulgaryzmów, obrażania innych graczy oraz spamowania.", "Nicki i skiny graczy nie mogą zawierać treści obraźliwych, wulgarnych lub nieodpowiednich.", "Zabrania się reklamowania innych serwerów lub stron niezwiązanych z DingoMC.PL.", ], }, { title: "Płatności i doładowania", icon: CreditCard, content: [ "Wszelkie płatności są dobrowolne i nie podlegają zwrotowi.", "Administracja zastrzega sobie prawo do zmiany ofert i cen bez wcześniejszego powiadomienia.", "Zabrania się sprzedaży lub wymiany przedmiotów z gry za realne pieniądze między graczami.", "W przypadku problemów z płatnościami, należy skontaktować się z administracją.", ], }, { title: "Postanowienia końcowe", icon: AlertTriangle, content: [ "Administracja zastrzega sobie prawo do zmiany regulaminu bez wcześniejszego powiadomienia.", "W sprawach nieuregulowanych niniejszym regulaminem decyzje podejmuje administracja serwera.", "Nieprzestrzeganie regulaminu może skutkować karami, włącznie z permanentnym banem.", "Regulamin wchodzi w życie z dniem jego opublikowania na stronie serwera.", ], }, ] return (

Regulamin DingoMC.PL

{sections.map((section, index) => (

{section.title}

{item}

))}

) } [V0_FILE]javascript:file="components/navbar.js" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import Image from "next/image" import { Menu, X, Moon, Sun } from "lucide-react" export default function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false) // Initialize isDarkMode to false (light mode) by default const [isDarkMode, setIsDarkMode] = useState(false) useEffect(() => { // Check if user has a theme preference in localStorage const savedTheme = localStorage.getItem("theme") if (savedTheme === "dark") { setIsDarkMode(true) document.documentElement.classList.add("dark") } else { // For any other case, ensure light mode is set setIsDarkMode(false) document.documentElement.classList.remove("dark") // Save the light theme preference to localStorage localStorage.setItem("theme", "light") } }, []) const toggleDarkMode = () => { if (isDarkMode) { document.documentElement.classList.remove("dark") localStorage.setItem("theme", "light") setIsDarkMode(false) } else { document.documentElement.classList.add("dark") localStorage.setItem("theme", "dark") setIsDarkMode(true) } } return (

{/* Logo (left) */}

{/* Desktop navigation */} {/* Mobile menu button */}

{/* Mobile menu */} {isMenuOpen && (

setIsMenuOpen(false)} > Regulamin setIsMenuOpen(false)} > Discord

)}

) } [V0_FILE]javascript:file="components/payment-form.js" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef } from "react" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { AtSign, AlertCircle, ChevronDown, ChevronUp } from "lucide-react" // ... (keep existing imports and constants) export default function PaymentForm() { // ... (keep existing state variables) const [showPromoCode, setShowPromoCode] = useState(false) const [promoCode, setPromoCode] = useState("") const [email, setEmail] = useState("") const [errors, setErrors] = useState({}) const emailRef = useRef(null) const handleSubmit = (e) => { e.preventDefault() console.log("Form submitted") } // ... (keep existing functions and effects) return (

{/* Player Information */}

Dane gracza

{/* ... (keep existing username input) */}

setEmail(e.target.value)} className={`pl-12 border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-50 focus:border-yellow-500 focus:ring-yellow-500 ${ errors.email ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "" }`} />

{errors.email && (

{errors.email}

)}

{/* Promotional Code */}

{showPromoCode && (

setPromoCode(e.target.value)} className="w-full border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-50 focus:border-yellow-500 focus:ring-yellow-500" />

)}

{/* ... (keep the rest of the form unchanged) */}

) } [V0_FILE]typescriptreact:file="app/api/payments/route.ts" isQuickEdit="true" isMerged="true" import { NextResponse } from "next/server" // This would typically be in a separate file interface Payment { paymentId: string nickname: string email: string amount: number originalAmount: number paymentMethod: string promoCode?: string status: "pending" | "completed" | "failed" | "refunded" redirectUrl: string completedAt?: Date createdAt: Date updatedAt: Date } export async function POST(request: Request) { try { const body = await request.json() const { nickname, email, amount, paymentMethod, promoCode } = body // Validate required fields if (!nickname || !email || !amount || !paymentMethod) { return NextResponse.json( { error: "Nieprawidłowe dane", message: "nickname, email, amount, paymentMethod są wymagane", }, { status: 400 }, ) } // Generate a UUID for the payment // In a real implementation, you would use a proper UUID library const paymentId = crypto.randomUUID() let finalAmount = amount let promoData = { valid: false, type: "", discount: 0 } // Check promo code if provided if (promoCode) { // In a real implementation, you would validate the promo code against a database // For demo purposes, we'll simulate some promo codes if (promoCode.toLowerCase() === "demo10") { promoData = { valid: true, type: "percent", discount: 10 } finalAmount = Math.round(amount * (1 - 10 / 100) * 100) / 100 } else if (promoCode.toLowerCase() === "demo20pln") { promoData = { valid: true, type: "amount", discount: 20 } finalAmount = Math.max(0, amount - 20) } } // Round to 2 decimal places finalAmount = Math.round(finalAmount * 100) / 100 // Generate redirect URL based on payment method const domain = process.env.NEXT_PUBLIC_DOMAIN || "http://localhost:3000" let redirectUrl = "" switch (paymentMethod) { case "blik": redirectUrl = `https://payment-gateway.example.com/blik?id=${paymentId}&amount=${finalAmount}` break case "paypal": redirectUrl = `https://payment-gateway.example.com/paypal?id=${paymentId}&amount=${finalAmount}` break case "paysafecard": redirectUrl = `https://payment-gateway.example.com/paysafecard?id=${paymentId}&amount=${finalAmount}` break default: redirectUrl = `https://payment-gateway.example.com/transfer?id=${paymentId}&amount=${finalAmount}` } // For demo purposes, log the payment details console.log("Payment request:", { paymentId, nickname, email, amount: finalAmount, originalAmount: amount, paymentMethod, promoCode: promoData.valid ? promoCode : undefined, }) // Create payment record // In a real implementation, you would save this to a database const payment: Payment = { paymentId, nickname, email, amount: finalAmount, originalAmount: amount, paymentMethod, promoCode: promoData.valid ? promoCode : undefined, status: "pending", redirectUrl, createdAt: new Date(), updatedAt: new Date(), } // For demo purposes, log the payment // console.log("Created payment:", payment) // Return success response return NextResponse.json( { paymentId, redirectUrl, status: "pending", amount: finalAmount, originalAmount: amount, }, { status: 201 }, ) } catch (error) { console.error("Payment creation error:", error) return NextResponse.json( { error: "Nie można utworzyć płatności", message: error instanceof Error ? error.message : "Wystąpił nieznany błąd", }, { status: 500 }, ) } } export async function GET(request: Request) { const { searchParams } = new URL(request.url) const paymentId = searchParams.get("id") if (!paymentId) { return NextResponse.json({ error: "Brak identyfikatora płatności" }, { status: 400 }) } // In a real implementation, you would fetch the payment from a database // For demo purposes, we'll return a mock payment return NextResponse.json({ status: "pending", amount: 100, nickname: "TestPlayer", timestamp: new Date().toISOString(), paymentMethod: "paysafecard", }) } [V0_FILE]javascript:file="app/not-found.js" isMerged="true" import Link from "next/link" import Image from "next/image" import { ArrowLeft } from "lucide-react" import Navbar from "@/components/navbar" import Footer from "@/components/footer" export default function NotFound() { return ( <>

404

Strona nie została znaleziona

Wygląda na to, że zabłądziłeś w nieznanych rejonach naszego serwera. Ta strona nie istnieje lub została przeniesiona.

Wróć na stronę główną Dołącz do Discorda

Kod błędu: 404

DingoMC.PL

Strona główna

Wróć na stronę główną, aby zobaczyć aktualności i informacje o serwerze.

Przejdź do strony głównej →

Regulamin

Zapoznaj się z regulaminem serwera, aby dowiedzieć się więcej o zasadach gry.

Przejdź do regulaminu →

Discord

Dołącz do naszego serwera Discord, aby być na bieżąco z aktualnościami.

Dołącz do Discorda →

) } [V0_FILE]javascript:file="pages/_404.js" isMerged="true" import NotFound from "../app/not-found" export default NotFound [V0_FILE]javascript:file="app/layout.js" isMerged="true" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }) export const metadata = { title: "DingoMC.PL - Minecraft Server", description: "Oficjalna strona serwera Minecraft DingoMC.PL", } export default function RootLayout({ children }) { return ( {children} ) } [V0_FILE]javascript:file="components/theme-provider.js" isMerged="true" "use client" import { createContext, useContext, useEffect, useState } from "react" const ThemeContext = createContext({ theme: "light", setTheme: () => null, }) export function ThemeProvider({ children, defaultTheme = "system", attribute = "data-theme", storageKey = "theme" }) { const [theme, setTheme] = useState(defaultTheme) useEffect(() => { const root = window.document.documentElement const initialColorValue = root.classList.contains("dark") ? "dark" : "light" setTheme(initialColorValue) }, []) useEffect(() => { const root = window.document.documentElement if (theme === "dark") { root.classList.add("dark") } else { root.classList.remove("dark") } localStorage.setItem(storageKey, theme) }, [theme, storageKey]) const value = { theme, setTheme: (newTheme) => setTheme(newTheme), } return {children} } export const useTheme = () => { const context = useContext(ThemeContext) if (context === undefined) { throw new Error("useTheme must be used within a ThemeProvider") } return context } [V0_FILE]javascript:file="app/payment/page.js" isMerged="true" "use client" import { useState, useEffect } from "react" import { useSearchParams } from "next/navigation" import Image from "next/image" import Link from "next/link" import { Clock, CheckCircle, XCircle, AlertTriangle, RefreshCcw, ArrowLeft, Loader2, User, Calendar, CreditCard, } from "lucide-react" // Payment status icons and colors const statusConfig = { pending: { icon: Clock, color: "text-yellow-500", bgColor: "bg-yellow-100 dark:bg-yellow-900/30", borderColor: "border-yellow-200 dark:border-yellow-800", title: "Oczekiwanie na płatność", description: "Twoja płatność jest przetwarzana. Prosimy o cierpliwość.", }, completed: { icon: CheckCircle, color: "text-green-500", bgColor: "bg-green-100 dark:bg-green-900/30", borderColor: "border-green-200 dark:border-green-800", title: "Płatność zakończona", description: "Twoja płatność została zrealizowana pomyślnie. Dziękujemy za zakup!", }, canceled: { icon: XCircle, color: "text-gray-500", bgColor: "bg-gray-100 dark:bg-gray-800", borderColor: "border-gray-200 dark:border-gray-700", title: "Płatność anulowana", description: "Płatność została anulowana. Możesz spróbować ponownie.", }, failed: { icon: AlertTriangle, color: "text-red-500", bgColor: "bg-red-100 dark:bg-red-900/30", borderColor: "border-red-200 dark:border-red-800", title: "Płatność nieudana", description: "Wystąpił problem z płatnością. Prosimy spróbować ponownie lub skontaktować się z administracją.", }, refunded: { icon: RefreshCcw, color: "text-blue-500", bgColor: "bg-blue-100 dark:bg-blue-900/30", borderColor: "border-blue-200 dark:border-blue-800", title: "Płatność zwrócona", description: "Środki zostały zwrócone na Twoje konto.", }, } // Payment method icons and names const paymentMethodConfig = { blik: { name: "BLIK", icon: "/payment-icons/blik.svg", }, transfer: { name: "Przelew bankowy", icon: "/payment-icons/bank-transfer.svg", }, stripe: { name: "Karta płatnicza", icon: "/payment-icons/paypal.svg", // Using PayPal icon as a placeholder for Stripe }, paysafecard: { name: "Paysafecard", icon: "/payment-icons/paysafecard.svg", }, } export default function PaymentStatusPage() { const searchParams = useSearchParams() const paymentId = searchParams.get("id") const [payment, setPayment] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [refreshing, setRefreshing] = useState(false) // Function to fetch payment data const fetchPaymentData = async () => { if (!paymentId) { setError("Brak identyfikatora płatności") setLoading(false) return } try { setRefreshing(true) const response = await fetch(`/v1/payments/${paymentId}`) if (!response.ok) { throw new Error(`Błąd serwera: ${response.status}`) } const data = await response.json() setPayment(data) setError(null) } catch (err) { console.error("Error fetching payment:", err) setError(err.message || "Nie udało się pobrać danych płatności") } finally { setLoading(false) setRefreshing(false) } } // Initial fetch and set up polling useEffect(() => { fetchPaymentData() // Set up polling every 5 seconds const intervalId = setInterval(fetchPaymentData, 5000) // Clean up interval on unmount return () => clearInterval(intervalId) }, [paymentId]) // Format date const formatDate = (dateString) => { const date = new Date(dateString) return new Intl.DateTimeFormat("pl-PL", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", }).format(date) } // If no payment ID is provided if (!paymentId) { return (

Brak identyfikatora płatności

Nie podano identyfikatora płatności. Sprawdź poprawność linku.

Wróć do strony głównej

) } // Loading state if (loading && !payment) { return (

Ładowanie danych płatności

Prosimy o cierpliwość, pobieramy informacje o płatności...

) } // Error state if (error && !payment) { return (

Błąd podczas pobierania danych

{error}

Strona główna

) } // Get status configuration const status = payment?.status || "pending" const StatusIcon = statusConfig[status]?.icon || Clock const statusColor = statusConfig[status]?.color || "text-gray-500" const statusBgColor = statusConfig[status]?.bgColor || "bg-gray-100 dark:bg-gray-800" const statusBorderColor = statusConfig[status]?.borderColor || "border-gray-200 dark:border-gray-700" const statusTitle = statusConfig[status]?.title || "Status płatności" const statusDescription = statusConfig[status]?.description || "Informacje o płatności." // Get payment method configuration const paymentMethod = payment?.paymentMethod || "blik" const paymentMethodName = paymentMethodConfig[paymentMethod]?.name || paymentMethod const paymentMethodIcon = paymentMethodConfig[paymentMethod]?.icon || "/payment-icons/blik.svg" return (

{/* Payment Status Card */}

{/* Status Header */}

{statusTitle}

{statusDescription}

{refreshing && (

)}

{/* Payment Details */}

{/* Payment Info */}

Informacje o płatności

Nick gracza

{payment?.nickname || "—"}

Data płatności

{payment?.timestamp ? formatDate(payment.timestamp) : "—"}

Metoda płatności

{paymentMethodIcon && (

)}

{paymentMethodName}

{/* Payment Amount */}

Kwota płatności

{payment?.amount || 0} PLN

{/* Minecraft coins visualization */}

{/* Action Buttons */}

Wróć do strony głównej

{/* Help Text */}

Masz problem z płatnością? Skontaktuj się z nami na{" "} Discord .

) } [V0_FILE]javascript:file="app/payment/loading.js" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/payment/loading.tsx" isQuickEdit="true" isMerged="true" import Navbar from "@/components/navbar" import Footer from "@/components/footer" import { Loader2 } from "lucide-react" export default function Loading() { return ( <>

Ładowanie statusu płatności

Prosimy o cierpliwość, pobieramy informacje o płatności...

{/* Skeleton loading for payment details */}

{/* Payment Info Skeleton */}

{/* Payment Amount Skeleton */}

{/* Action Buttons Skeleton */}

{/* Skeleton for Additional Information Cards */}

{[1, 2, 3].map((i) => (

))}

) } [V0_FILE]typescriptreact:file="app/payment/page.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useSearchParams } from "next/navigation" import Image from "next/image" import Link from "next/link" import { Clock, CheckCircle, XCircle, AlertTriangle, RefreshCcw, ArrowLeft, Loader2, Calendar, type LucideIcon, Shield, HelpCircle, Home, } from "lucide-react" import Navbar from "@/components/navbar" import Footer from "@/components/footer" import { CreditCard, Landmark, CreditCardIcon } from "@/components/payment-icons" import { PiContactlessPayment } from "react-icons/pi" interface PaymentData { status: PaymentStatus amount: number nickname: string timestamp: string paymentMethod: PaymentMethod } type PaymentStatus = "pending" | "completed" | "canceled" | "failed" | "refunded" type PaymentMethod = "blik" | "transfer" | "stripe" | "paysafecard" interface StatusConfig { icon: LucideIcon color: string bgColor: string borderColor: string title: string description: string avatarType: string progressValue: number } interface PaymentMethodConfig { name: string icon: string | React.ReactNode } // Coin images for visualization const coinImages = [ { amount: 50, url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile320-110x93.png", }, { amount: 100, url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile960-110x93.png", }, { amount: 200, url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile1600-110x93.png", }, { amount: 500, url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile3200-110x93.png", }, { amount: 800, url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile8000-110x93.png", }, ] // Payment status icons and colors const statusConfig: Record = { pending: { icon: Clock, color: "text-yellow-500", bgColor: "bg-yellow-100 dark:bg-yellow-900/30", borderColor: "border-yellow-200 dark:border-yellow-800", title: "Oczekiwanie na płatność", description: "Twoja płatność jest przetwarzana. Prosimy o cierpliwość.", avatarType: "MHF_Exclamation", progressValue: 33, }, completed: { icon: CheckCircle, color: "text-green-500", bgColor: "bg-green-100 dark:bg-green-900/30", borderColor: "border-green-200 dark:border-green-800", title: "Płatność zakończona", description: "Twoja płatność została zrealizowana pomyślnie. Dziękujemy za zakup!", avatarType: "MHF_Chest", progressValue: 100, }, canceled: { icon: XCircle, color: "text-gray-500", bgColor: "bg-gray-100 dark:bg-gray-800", borderColor: "border-gray-200 dark:border-gray-700", title: "Płatność anulowana", description: "Płatność została anulowana. Możesz spróbować ponownie.", avatarType: "MHF_Question", progressValue: 0, }, failed: { icon: AlertTriangle, color: "text-red-500", bgColor: "bg-red-100 dark:bg-red-900/30", borderColor: "border-red-200 dark:border-red-800", title: "Płatność nieudana", description: "Wystąpił problem z płatnością. Prosimy spróbować ponownie lub skontaktować się z administracją.", avatarType: "MHF_TNT", progressValue: 0, }, refunded: { icon: RefreshCcw, color: "text-blue-500", bgColor: "bg-blue-100 dark:bg-blue-900/30", borderColor: "border-blue-200 dark:border-blue-800", title: "Płatność zwrócona", description: "Środki zostały zwrócone na Twoje konto.", avatarType: "MHF_ArrowLeft", progressValue: 0, }, } // Payment method icons and names const paymentMethodConfig: Record = { blik: { name: "BLIK", icon: , }, transfer: { name: "Przelew bankowy", icon: , }, stripe: { name: "Karta płatnicza", icon: , }, paysafecard: { name: "Paysafecard", icon: , }, } export default function PaymentStatusPage() { const searchParams = useSearchParams() const paymentId = searchParams.get("id") const [payment, setPayment] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [refreshing, setRefreshing] = useState(false) // Function to fetch payment data const fetchPaymentData = async () => { if (!paymentId) { setError("Brak identyfikatora płatności") setLoading(false) return } try { setRefreshing(true) const response = await fetch(`/v1/payments/${paymentId}`) if (!response.ok) { throw new Error(`Błąd serwera: ${response.status}`) } const data = await response.json() setPayment(data) setError(null) } catch (err) { console.error("Error fetching payment:", err) setError(err instanceof Error ? err.message : "Nie udało się pobrać danych płatności") } finally { setLoading(false) setRefreshing(false) } } // Initial fetch and set up polling useEffect(() => { fetchPaymentData() // Set up polling every 5 seconds const intervalId = setInterval(fetchPaymentData, 5000) // Clean up interval on unmount return () => clearInterval(intervalId) }, [paymentId]) // Format date const formatDate = (dateString: string) => { const date = new Date(dateString) return new Intl.DateTimeFormat("pl-PL", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit", }).format(date) } // Get coin image based on amount const getCoinImage = (amount: number) => { const coin = coinImages.find((coin) => amount <= coin.amount) || coinImages[coinImages.length - 1] return coin.url } // If no payment ID is provided if (!paymentId) { return ( <>

Brak identyfikatora płatności

Nie podano identyfikatora płatności. Sprawdź poprawność linku.

Wróć do strony głównej

) } // Loading state if (loading && !payment) { return ( <>

Ładowanie danych płatności

Prosimy o cierpliwość, pobieramy informacje o płatności...

) } // Error state if (error && !payment) { return ( <>

Błąd podczas pobierania danych

{error}

Strona główna

) } // Get status configuration const status = (payment?.status ?? "pending") as PaymentStatus const currentConfig = statusConfig[status] const StatusIcon = currentConfig.icon const statusColor = currentConfig.color const statusBgColor = currentConfig.bgColor const statusBorderColor = currentConfig.borderColor const statusTitle = currentConfig.title const statusDescription = currentConfig.description const avatarType = currentConfig.avatarType const progressValue = currentConfig.progressValue // Get payment method configuration const paymentMethod = (payment?.paymentMethod ?? "blik") as PaymentMethod const currentPaymentMethod = paymentMethodConfig[paymentMethod] const paymentMethodName = currentPaymentMethod.name const paymentMethodIcon = currentPaymentMethod.icon return ( <>

{/* Payment Status Card */}

{/* Progress Bar */}

{/* Status Header */}

{/* Decorative elements */}

{statusTitle}

{statusDescription}

{refreshing && (

Odświeżanie danych...

)}

{/* Payment Details */}

{/* Payment Info */}

Informacje o płatności

Nick gracza

{payment?.nickname || "—"}

Data płatności

{payment?.timestamp ? formatDate(payment.timestamp) : "—"}

{typeof paymentMethodIcon === "string" ? ( {paymentMethodName}

) : ( paymentMethodIcon )}

Metoda płatności

{paymentMethodName}

{/* Payment Amount */}

Kwota płatności

{payment?.amount ?? 0} PLN

{/* Minecraft coins visualization */}

{/* Action Buttons */}

Wróć do strony głównej

{/* Additional Information Cards */}

Strona główna

Wróć na stronę główną, aby zobaczyć aktualności i informacje o serwerze.

Przejdź do strony głównej

Pomoc

Masz problem z płatnością? Skontaktuj się z nami na Discord, aby uzyskać pomoc.

Dołącz do Discorda

Regulamin

Zapoznaj się z regulaminem serwera, aby dowiedzieć się więcej o zasadach płatności.

Przejdź do regulaminu

{/* Help Text */}

ID płatności: {paymentId} Status: {status} Ostatnia aktualizacja: {new Date().toLocaleTimeString("pl-PL")}

) } [V0_FILE]typescriptreact:file="components/footer.js" isMerged="true" import Link from "next/link" import { Globe, Book, Mail, Shield } from "lucide-react" export default function Footer() { const currentYear = new Date().getFullYear() return ( ) } [V0_FILE]typescriptreact:file="app/sklep/page.tsx" isMerged="true" import Navbar from "@/components/navbar" import Footer from "@/components/footer" import PaymentForm from "@/components/payment-form" import { Suspense } from "react" export default function ShopPage() { return (

{/* Subtle Minecraft texture background */}

{/* Navbar */} {/* Main Content */}

{/* Header */}

Sklep DingoMC

Doładuj swoje konto i ciesz się dodatkowymi możliwościami na serwerze. Bezpieczne płatności, natychmiastowa realizacja.

{/* Payment Section */}

Ładowanie formularza...

} >

{/* Security Info */}

Bezpieczne płatności

• Szyfrowane połączenie SSL
• Natychmiastowa realizacja po płatności
• Wsparcie 24/7 w przypadku problemów
• Zgodność z RODO i polskim prawem

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Link from "next/link" import Image from "next/image" import { Menu, X, Moon, Sun, ShoppingCart } from "lucide-react" export default function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false) const [isDarkMode, setIsDarkMode] = useState(false) useEffect(() => { const savedTheme = localStorage.getItem("theme") if (savedTheme === "dark") { setIsDarkMode(true) document.documentElement.classList.add("dark") } else { setIsDarkMode(false) document.documentElement.classList.remove("dark") localStorage.setItem("theme", "light") } }, []) const toggleDarkMode = () => { if (isDarkMode) { document.documentElement.classList.remove("dark") localStorage.setItem("theme", "light") setIsDarkMode(false) } else { document.documentElement.classList.add("dark") localStorage.setItem("theme", "dark") setIsDarkMode(true) } } return (

{/* Logo */}

{/* Desktop navigation */} {/* Mobile menu button */}

{/* Mobile menu */} {isMenuOpen && (

setIsMenuOpen(false)} > Strona główna setIsMenuOpen(false)} > Sklep setIsMenuOpen(false)} > Regulamin setIsMenuOpen(false)} > Discord

)}

) } [V0_FILE]typescriptreact:file="components/top-spenders.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import Image from "next/image" import { Trophy, Crown, Award, Loader2 } from "lucide-react" // Define the top spender type based on the API response interface TopSpender { nickname: string totalAmount: number purchaseCount: number } export default function TopSpenders() { const [isVisible, setIsVisible] = useState(false) const containerRef = useRef(null) const [topSpenders, setTopSpenders] = useState([]) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) // Fetch top spenders from the API useEffect(() => { const fetchTopSpenders = async () => { try { setIsLoading(true) const response = await fetch(`${process.env.NEXT_PUBLIC_API_DOMAIN}/v1/purchases/top-spenders`) if (!response.ok) { throw new Error(`Failed to fetch top spenders: ${response.status}`) } const data = await response.json() setTopSpenders(data) } catch (err) { console.error("Error fetching top spenders:", err) setError(err instanceof Error ? err.message : "Failed to load top spenders") } finally { setIsLoading(false) } } fetchTopSpenders() }, []) // Animation effect when component mounts useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) observer.disconnect() } }, { threshold: 0.2 }, ) if (containerRef.current) { observer.observe(containerRef.current) } return () => { observer.disconnect() } }, []) // Format currency const formatCurrency = (amount: number) => { return new Intl.NumberFormat("pl-PL", { style: "currency", currency: "PLN", minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(amount) } // Get rank badge based on position const getRankBadge = (position: number) => { switch (position) { case 1: return (

) case 2: return (

) case 0: return (

) default: return null } } // Get podium styles based on position const getPodiumStyles = (position: number) => { // Base heights for podiums const heights = ["h-28", "h-36", "h-20"] // Colors for podiums const colors = [ "from-gray-300 to-gray-500", // Silver (2nd) "from-yellow-300 to-yellow-600", // Gold (1st) "from-amber-600 to-amber-800", // Bronze (3rd) ] // Width classes const widths = ["w-24 md:w-28", "w-28 md:w-32", "w-24 md:w-28"] return { height: heights[position], color: colors[position], width: widths[position], } } // Arrange in order: 2nd place (left), 1st place (center), 3rd place (right) const podiumOrder = [1, 0, 2] // Calculate total amount spent by all top spenders const totalAmount = topSpenders.reduce((sum, player) => sum + player.totalAmount, 0) // Ensure we have at least 3 players for the podium const displayPodium = topSpenders.length >= 1 return (

{/* Minecraft-style title */}

Najbogatsi gracze

{isLoading ? (

Ładowanie najlepszych graczy...

) : error ? (

{error}

) : topSpenders.length === 0 ? (

Brak danych o najlepszych graczach

) : ( <> {/* Podium container */} {displayPodium && (

{podiumOrder.map((playerIndex, position) => { // Skip positions where we don't have players if (playerIndex >= topSpenders.length) return null const player = topSpenders[playerIndex] const { height, color, width } = getPodiumStyles(position) return (

{/* Player avatar and info */}

{/* Rank badge */} {getRankBadge(position)} {/* Avatar with glow effect */}

{/* Position indicator */}

{playerIndex + 1}

{player.nickname} {formatCurrency(player.totalAmount)} {player.purchaseCount} zakupów

{/* Podium block */}

{/* Podium top shine effect */}

{/* Position number */}

{playerIndex + 1}

) })}

)} {/* Additional info */}

Łączna suma wszystkich zakupów: {formatCurrency(totalAmount)}

)}

) } [V0_FILE]typescriptreact:file="app/regulamin/page.tsx" isMerged="true" import Navbar from "@/components/navbar" import Footer from "@/components/footer" import { Scroll, Shield, Users, CreditCard, AlertTriangle, CheckCircle, Info } from "lucide-react" export default function Regulamin() { const sections = [ { title: "Postanowienia ogólne", icon: Scroll, color: "blue", content: [ "Niniejszy regulamin określa zasady korzystania z serwera Minecraft DingoMC.PL.", "Korzystanie z serwera oznacza akceptację niniejszego regulaminu w całości.", "Administracja zastrzega sobie prawo do zmiany regulaminu bez wcześniejszego powiadomienia.", "Gracze są zobowiązani do regularnego sprawdzania aktualnej wersji regulaminu.", "Nieznajomość regulaminu nie zwalnia z odpowiedzialności za jego naruszenie.", ], }, { title: "Zasady gry", icon: Shield, color: "green", content: [ "Gracze zobowiązani są do przestrzegania zasad fair play w każdej sytuacji.", "Zabrania się używania modyfikacji dających nieuczciwą przewagę nad innymi graczami (cheaty, x-ray, fly itp.).", "Griefing, kradzieże i niszczenie cudzych budowli są surowo zabronione.", "Zabrania się wykorzystywania błędów gry lub serwera (bugi, dupy). Należy je niezwłocznie zgłaszać administracji.", "Budowanie w pobliżu spawn'u bez zgody administracji jest zabronione.", "Zabrania się tworzenia farm powodujących znaczne obciążenie serwera.", ], }, { title: "Zachowanie na serwerze", icon: Users, color: "purple", content: [ "Gracze zobowiązani są do zachowania kultury osobistej w grze i na czacie.", "Zabrania się używania wulgaryzmów, obrażania innych graczy oraz spamowania na czacie.", "Nicki i skiny graczy nie mogą zawierać treści obraźliwych, wulgarnych lub nieodpowiednich.", "Zabrania się reklamowania innych serwerów lub stron niezwiązanych z DingoMC.PL.", "Szanuj innych graczy i ich własność prywatną.", "Zabrania się podszywania się pod członków administracji.", "Trollowanie i prowokowanie innych graczy jest zabronione.", ], }, { title: "Płatności i doładowania", icon: CreditCard, color: "yellow", content: [ "Wszelkie płatności są dobrowolne i nie podlegają zwrotowi po realizacji usługi.", "Administracja zastrzega sobie prawo do zmiany ofert i cen bez wcześniejszego powiadomienia.", "Zabrania się sprzedaży lub wymiany przedmiotów z gry za realne pieniądze między graczami.", "W przypadku problemów z płatnościami, należy skontaktować się z administracją przez Discord.", "Środki doładowane na konto są przypisane do konkretnego gracza i nie podlegają transferowi.", "Administracja nie ponosi odpowiedzialności za utratę przedmiotów zakupionych za środki z konta.", ], }, { title: "Kary i sankcje", icon: AlertTriangle, color: "red", content: [ "Za naruszenie regulaminu graczom mogą zostać nałożone następujące kary:", "• Ostrzeżenie - pierwsze naruszenie regulaminu", "• Wyciszenie (mute) - za spam lub niewłaściwe zachowanie na czacie", "• Kick - wyrzucenie z serwera za mniejsze przewinienia", "• Ban czasowy - za poważniejsze naruszenia regulaminu", "• Ban permanentny - za najpoważniejsze przewinienia lub wielokrotne łamanie zasad", "Administracja ma prawo do natychmiastowego zbanowania gracza bez ostrzeżenia w przypadku poważnych naruszeń.", ], }, { title: "Postanowienia końcowe", icon: Info, color: "gray", content: [ "Administracja zastrzega sobie prawo do interpretacji niniejszego regulaminu.", "W sprawach nieuregulowanych niniejszym regulaminem decyzje podejmuje administracja serwera.", "Regulamin wchodzi w życie z dniem jego opublikowania na stronie serwera.", "Kontakt z administracją możliwy jest przez serwer Discord: discord.gg/dingomc", "Serwer DingoMC.PL nie jest powiązany z Mojang AB ani Microsoft Corporation.", ], }, ] const getColorClasses = (color: string) => { const colors = { blue: { bg: "bg-blue-500", text: "text-blue-600", lightBg: "bg-blue-50 dark:bg-blue-900/20", border: "border-blue-200 dark:border-blue-800", }, green: { bg: "bg-green-500", text: "text-green-600", lightBg: "bg-green-50 dark:bg-green-900/20", border: "border-green-200 dark:border-green-800", }, purple: { bg: "bg-purple-500", text: "text-purple-600", lightBg: "bg-purple-50 dark:bg-purple-900/20", border: "border-purple-200 dark:border-purple-800", }, yellow: { bg: "bg-yellow-500", text: "text-yellow-600", lightBg: "bg-yellow-50 dark:bg-yellow-900/20", border: "border-yellow-200 dark:border-yellow-800", }, red: { bg: "bg-red-500", text: "text-red-600", lightBg: "bg-red-50 dark:bg-red-900/20", border: "border-red-200 dark:border-red-800", }, gray: { bg: "bg-gray-500", text: "text-gray-600", lightBg: "bg-gray-50 dark:bg-gray-900/20", border: "border-gray-200 dark:border-gray-800", }, } return colors[color as keyof typeof colors] || colors.gray } return (

{/* Background texture */}

{/* Header */}

Regulamin DingoMC.PL

Zapoznaj się z zasadami obowiązującymi na naszym serwerze. Przestrzeganie regulaminu zapewnia przyjazną atmosferę dla wszystkich graczy.

{/* Important Notice */}

Ważne informacje

Korzystanie z serwera DingoMC.PL oznacza automatyczną akceptację niniejszego regulaminu. Regulamin może ulec zmianie w dowolnym momencie. Gracze są zobowiązani do śledzenia aktualnej wersji.

{/* Sections */}

{sections.map((section, index) => { const colorClasses = getColorClasses(section.color) return (

{/* Section Header */}

{section.title}

{/* Section Content */}

{item}

) })}

{/* Contact Section */}

Masz pytania?

Jeśli masz pytania dotyczące regulaminu lub potrzebujesz wyjaśnień, skontaktuj się z naszą administracją.

Discord Wróć do strony głównej

{/* Last Updated */}

Ostatnia aktualizacja: {new Date().toLocaleDateString("pl-PL")}

) } [V0_FILE]typescript:file="lib/auth.ts" isQuickEdit="true" isMerged="true" "use client" import { createContext, useContext, useEffect, useState, type ReactNode } from "react" import { api } from "./api" interface AuthContextType { isAuthenticated: boolean sessionId: string | null login: (authCode: string) => Promise logout: () => Promise loading: boolean } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: ReactNode }) { const [isAuthenticated, setIsAuthenticated] = useState(false) const [sessionId, setSessionId] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { // Check for existing session in localStorage const storedSessionId = localStorage.getItem("adminSessionId") const storedExpiry = localStorage.getItem("adminSessionExpiry") if (storedSessionId && storedExpiry) { const expiryDate = new Date(storedExpiry) if (expiryDate > new Date()) { setSessionId(storedSessionId) setIsAuthenticated(true) } else { // Session expired, clean up localStorage.removeItem("adminSessionId") localStorage.removeItem("adminSessionExpiry") } } setLoading(false) }, []) const login = async (authCode: string) => { try { const response = await api.login(authCode) if (response.success) { setSessionId(response.sessionId) setIsAuthenticated(true) // Store session info in localStorage localStorage.setItem("adminSessionId", response.sessionId) localStorage.setItem("adminSessionExpiry", response.expiresAt) } else { throw new Error("Login failed") } } catch (error) { console.error("Login error:", error) throw error } } const logout = async () => { try { if (sessionId) { await api.logout(sessionId) } } catch (error) { console.error("Logout error:", error) } finally { setSessionId(null) setIsAuthenticated(false) localStorage.removeItem("adminSessionId") localStorage.removeItem("adminSessionExpiry") } } return ( {children} ) } export function useAuth() { const context = useContext(AuthContext) if (context === undefined) { throw new Error("useAuth must be used within an AuthProvider") } return context } [V0_FILE]plaintext:file=".env.local" isQuickEdit="true" isMerged="true" NEXT_PUBLIC_API_DOMAIN=http://localhost:3001 [V0_FILE]typescriptreact:file="app/admin/layout.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect } from "react" import { useRouter, usePathname } from "next/navigation" import { AuthProvider, useAuth } from "@/lib/auth" import AdminSidebar from "@/components/admin/admin-sidebar" import AdminHeader from "@/components/admin/admin-header" import { Loader2 } from "lucide-react" function AdminLayoutContent({ children }: { children: React.ReactNode }) { const { isAuthenticated, loading } = useAuth() const router = useRouter() const pathname = usePathname() useEffect(() => { if (!loading && !isAuthenticated && pathname !== "/admin/login") { router.push("/admin/login") } }, [isAuthenticated, loading, router, pathname]) if (loading) { return (

Ładowanie panelu administracyjnego...

) } if (!isAuthenticated && pathname !== "/admin/login") { return null } if (pathname === "/admin/login") { return <>{children} } return (

{children}

) } export default function AdminLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/admin/admin-header.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Bell, Search, Sun, Moon, User } from "lucide-react" import { useAuth } from "@/lib/auth" export default function AdminHeader() { const [isDarkMode, setIsDarkMode] = useState(false) const { sessionId } = useAuth() useEffect(() => { const savedTheme = localStorage.getItem("theme") if (savedTheme === "dark") { setIsDarkMode(true) document.documentElement.classList.add("dark") } else { setIsDarkMode(false) document.documentElement.classList.remove("dark") } }, []) const toggleDarkMode = () => { if (isDarkMode) { document.documentElement.classList.remove("dark") localStorage.setItem("theme", "light") setIsDarkMode(false) } else { document.documentElement.classList.add("dark") localStorage.setItem("theme", "dark") setIsDarkMode(true) } } return (

{/* Search */}

{/* Right side */}

{/* Dark mode toggle */} {/* Notifications */} {/* Profile */}

Administrator

{sessionId ? `ID: ${sessionId.substring(0, 8)}...` : ""}

) } [V0_FILE]typescriptreact:file="components/admin/stats-card.tsx" isQuickEdit="true" isMerged="true" import type { LucideIcon } from "lucide-react" interface StatsCardProps { title: string value: string | number change?: string changeType?: "positive" | "negative" | "neutral" icon: LucideIcon color?: "blue" | "green" | "yellow" | "red" | "purple" } export default function StatsCard({ title, value, change, changeType = "neutral", icon: Icon, color = "blue", }: StatsCardProps) { const colorClasses = { blue: "bg-blue-500", green: "bg-green-500", yellow: "bg-yellow-500", red: "bg-red-500", purple: "bg-purple-500", } const changeClasses = { positive: "text-green-600 dark:text-green-400", negative: "text-red-600 dark:text-red-400", neutral: "text-gray-600 dark:text-gray-400", } return (

{title}: {value}
{change && (
{change}
)}

) } [V0_FILE]typescriptreact:file="components/admin/data-table.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { ChevronLeft, ChevronRight, Search } from "lucide-react" interface Column { key: string label: string sortable?: boolean render?: (value: any, row: any) => React.ReactNode } interface DataTableProps { columns: Column[] data: any[] pagination?: { page: number limit: number total: number pages: number } onPageChange?: (page: number) => void onSearch?: (query: string) => void onSort?: (column: string, direction: "asc" | "desc") => void loading?: boolean } export default function DataTable({ columns, data, pagination, onPageChange, onSearch, onSort, loading = false, }: DataTableProps) { const [searchQuery, setSearchQuery] = useState("") const [sortColumn, setSortColumn] = useState(null) const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc") const handleSearch = (query: string) => { setSearchQuery(query) onSearch?.(query) } const handleSort = (column: string) => { const newDirection = sortColumn === column && sortDirection === "asc" ? "desc" : "asc" setSortColumn(column) setSortDirection(newDirection) onSort?.(column, newDirection) } return (

{/* Header with search */}

{pagination ? `Wyniki (${pagination.total})` : `Wyniki (${data.length})`}

{onSearch && (

handleSearch(e.target.value)} className="block w-64 rounded-md border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 pl-10 pr-3 py-2 text-sm placeholder-gray-400 focus:border-yellow-500 focus:ring-yellow-500" />

)}

{/* Table */}

{columns.map((column) => ( ))} {loading ? ( ) : data.length === 0 ? ( ) : ( data.map((row, index) => ( {columns.map((column) => ( ))} )) )}

column.sortable && handleSort(column.key)} > {column.label} {column.sortable && sortColumn === column.key && ( {sortDirection === "asc" ? "↑" : "↓"} )}
Ładowanie...
Brak danych do wyświetlenia
{column.render ? column.render(row[column.key], row) : row[column.key]}

{/* Pagination */} {pagination && (

Strona {pagination.page} z {pagination.pages} ({pagination.total} wyników)

)}

) } [V0_FILE]typescriptreact:file="app/admin/payments/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { useAuth } from "@/lib/auth" import { api } from "@/lib/api" import { useRouter } from "next/navigation" import DataTable from "@/components/admin/data-table" interface Payment { _id: string paymentId: string nickname: string email: string amount: number originalAmount: number paymentMethod: string status: string createdAt: string completedAt?: string promoCode?: string } interface PaymentsResponse { payments: Payment[] pagination: { page: number limit: number total: number pages: number } } export default function PaymentsPage() { const { isAuthenticated, sessionId } = useAuth() const router = useRouter() const [payments, setPayments] = useState([]) const [pagination, setPagination] = useState({ page: 1, limit: 20, total: 0, pages: 0, }) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) // Filters const [search, setSearch] = useState("") const [statusFilter, setStatusFilter] = useState("") const [methodFilter, setMethodFilter] = useState("") const [dateFrom, setDateFrom] = useState("") const [dateTo, setDateTo] = useState("") useEffect(() => { if (!isAuthenticated) { router.push("/admin/login") return } fetchPayments() }, [isAuthenticated, sessionId, router, pagination.page]) const fetchPayments = async () => { if (!sessionId) return try { setLoading(true) const params = { page: pagination.page, limit: pagination.limit, ...(search && { search }), ...(statusFilter && { status: statusFilter }), ...(methodFilter && { paymentMethod: methodFilter }), ...(dateFrom && { dateFrom }), ...(dateTo && { dateTo }), } const data: PaymentsResponse = await api.getPayments(sessionId, params) setPayments(data.payments) setPagination(data.pagination) setError(null) } catch (err) { console.error("Error fetching payments:", err) setError(err instanceof Error ? err.message : "Failed to load payments") if (err instanceof Error && err.message.includes("unauthorized")) { router.push("/admin/login") } } finally { setLoading(false) } } const handleStatusChange = async (paymentId: string, newStatus: string) => { if (!sessionId) return try { await api.updatePaymentStatus(sessionId, paymentId, newStatus) setPayments((prev) => prev.map((payment) => payment.paymentId === paymentId ? { ...payment, status: newStatus, completedAt: newStatus === "completed" ? new Date().toISOString() : payment.completedAt, } : payment, ), ) } catch (err) { console.error("Error updating payment status:", err) alert(err instanceof Error ? err.message : "Failed to update payment status") } } const handleSearch = (query: string) => { setSearch(query) setPagination((prev) => ({ ...prev, page: 1 })) // Debounce search setTimeout(() => { fetchPayments() }, 500) } const handlePageChange = (newPage: number) => { setPagination((prev) => ({ ...prev, page: newPage })) } const getStatusBadge = (status: string) => { const variants: Record = { pending: "outline", completed: "default", canceled: "secondary", failed: "destructive", refunded: "secondary", } const labels: Record = { pending: "Oczekująca", completed: "Zakończona", canceled: "Anulowana", failed: "Nieudana", refunded: "Zwrócona", } return {labels[status] || status} } const getMethodBadge = (method: string) => { const labels: Record = { blik: "BLIK", stripe: "Stripe", paypal: "PayPal", transfer: "Przelew", } return {labels[method] || method} } const formatCurrency = (amount: number) => { return new Intl.NumberFormat("pl-PL", { style: "currency", currency: "PLN", }).format(amount) } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleString("pl-PL") } const columns = [ { key: "paymentId", label: "ID", render: (value: string) => {value.substring(0, 8)}..., }, { key: "nickname", label: "Gracz", render: (value: string) => {value}, }, { key: "email", label: "Email", }, { key: "amount", label: "Kwota", render: (value: number, row: Payment) => (

{formatCurrency(value)}

{row.originalAmount !== value && (

{formatCurrency(row.originalAmount)}

)}

), }, { key: "paymentMethod", label: "Metoda", render: (value: string) => getMethodBadge(value), }, { key: "status", label: "Status", render: (value: string) => getStatusBadge(value), }, { key: "createdAt", label: "Data", render: (value: string, row: Payment) => (

{formatDate(value)}

{row.completedAt &&

Zakończono: {formatDate(row.completedAt)}

}

), }, { key: "actions", label: "Akcje", render: (_: any, row: Payment) => ( ), }, ] if (loading && payments.length === 0) { return (

) } return (

{/* Header */}

Płatności

Zarządzaj płatnościami i ich statusami

{/* Filters */}

Filtry

setDateFrom(e.target.value)} placeholder="Od" /> setDateTo(e.target.value)} placeholder="Do" />

{/* Error */} {error && (

{error}

)} {/* Data Table */}

) } [V0_FILE]typescriptreact:file="app/admin/login/page.tsx" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Alert, AlertDescription } from "@/components/ui/alert" import { Shield, Eye, EyeOff, Lock, Server } from "lucide-react" import { useAuth } from "@/lib/auth" export default function LoginPage() { const [authCode, setAuthCode] = useState("") const [showCode, setShowCode] = useState(false) const [loading, setLoading] = useState(false) const [error, setError] = useState("") const { login, isAuthenticated } = useAuth() const router = useRouter() useEffect(() => { if (isAuthenticated) { router.push("/admin/dashboard") } }, [isAuthenticated, router]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!authCode.trim()) { setError("Kod autoryzacyjny jest wymagany") return } if (authCode.length < 32) { setError("Kod autoryzacyjny musi mieć co najmniej 32 znaki") return } setLoading(true) setError("") try { await login(authCode) router.push("/admin/dashboard") } catch (err) { console.error("Login error:", err) setError(err instanceof Error ? err.message : "Błąd logowania") } finally { setLoading(false) } } return (

{/* Background decoration */}

{/* Header */}

Panel Administracyjny

DingoMC.PL - Bezpieczne logowanie

{/* Login Card */} Autoryzacja Wprowadź 64-znakowy kod autoryzacyjny

Kod autoryzacyjny

setAuthCode(e.target.value)} placeholder="Wprowadź kod autoryzacyjny..." className="pr-12 h-12 text-center font-mono" disabled={loading} autoComplete="off" />

Kod musi mieć dokładnie 64 znaki

{error && ( {error} )}

{/* Security Features */}

Funkcje bezpieczeństwa

64-znakowy kod autoryzacyjny
Limit 5 prób logowania na 15 minut
Sesje wygasają po 24 godzinach
Wszystkie działania są logowane

{/* Demo Code */}

Domyślny kod testowy:


            a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9d0e1f2

⚠️ Zmień kod w pliku config.json przed wdrożeniem!

) } [V0_FILE]typescriptreact:file="app/admin/promo-codes/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Plus, Trash2 } from "lucide-react" import { useAuth } from "@/lib/auth" import { api } from "@/lib/api" import { useRouter } from "next/navigation" import DataTable from "@/components/admin/data-table" interface PromoCode { _id: string code: string discount: number type: "percent" | "amount" validFrom: string validTo?: string usageLimit?: number usageCount: number isActive: boolean createdAt: string } interface PromoCodesResponse { promoCodes: PromoCode[] pagination: { page: number limit: number total: number pages: number } } export default function PromoCodesPage() { const { isAuthenticated, sessionId } = useAuth() const router = useRouter() const [promoCodes, setPromoCodes] = useState([]) const [pagination, setPagination] = useState({ page: 1, limit: 20, total: 0, pages: 0, }) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) // Filters const [search, setSearch] = useState("") const [activeFilter, setActiveFilter] = useState("all") // Create dialog const [createDialogOpen, setCreateDialogOpen] = useState(false) const [createForm, setCreateForm] = useState({ code: "", discount: "", type: "percent" as "percent" | "amount", validFrom: "", validTo: "", usageLimit: "", }) useEffect(() => { if (!isAuthenticated) { router.push("/admin/login") return } fetchPromoCodes() }, [isAuthenticated, sessionId, router, pagination.page]) const fetchPromoCodes = async () => { if (!sessionId) return try { setLoading(true) const params = { page: pagination.page, limit: pagination.limit, ...(search && { search }), ...(activeFilter && activeFilter !== "all" && { isActive: activeFilter === "true" }), } const data: PromoCodesResponse = await api.getPromoCodes(sessionId, params) setPromoCodes(data.promoCodes) setPagination(data.pagination) setError(null) } catch (err) { console.error("Error fetching promo codes:", err) setError(err instanceof Error ? err.message : "Failed to load promo codes") if (err instanceof Error && err.message.includes("unauthorized")) { router.push("/admin/login") } } finally { setLoading(false) } } const handleCreatePromoCode = async () => { if (!sessionId) return try { const promoCodeData = { code: createForm.code || "GENERATE", discount: Number.parseFloat(createForm.discount), type: createForm.type, ...(createForm.validFrom && { validFrom: createForm.validFrom }), ...(createForm.validTo && { validTo: createForm.validTo }), ...(createForm.usageLimit && { usageLimit: Number.parseInt(createForm.usageLimit) }), } await api.createPromoCode(sessionId, promoCodeData) setCreateForm({ code: "", discount: "", type: "percent", validFrom: "", validTo: "", usageLimit: "", }) setCreateDialogOpen(false) fetchPromoCodes() } catch (err) { console.error("Error creating promo code:", err) alert(err instanceof Error ? err.message : "Failed to create promo code") } } const handleToggleActive = async (id: string, isActive: boolean) => { if (!sessionId) return try { await api.updatePromoCode(sessionId, id, isActive) setPromoCodes((prev) => prev.map((code) => (code._id === id ? { ...code, isActive } : code))) } catch (err) { console.error("Error updating promo code:", err) alert(err instanceof Error ? err.message : "Failed to update promo code") } } const handleDeletePromoCode = async (id: string) => { if (!sessionId) return if (!confirm("Czy na pewno chcesz usunąć ten kod promocyjny?")) { return } try { await api.deletePromoCode(sessionId, id) setPromoCodes((prev) => prev.filter((code) => code._id !== id)) } catch (err) { console.error("Error deleting promo code:", err) alert(err instanceof Error ? err.message : "Failed to delete promo code") } } const handleSearch = (query: string) => { setSearch(query) setPagination((prev) => ({ ...prev, page: 1 })) setTimeout(() => { fetchPromoCodes() }, 500) } const handlePageChange = (newPage: number) => { setPagination((prev) => ({ ...prev, page: newPage })) } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("pl-PL") } const formatDiscount = (discount: number, type: string) => { return type === "percent" ? `${discount}%` : `${discount} PLN` } const columns = [ { key: "code", label: "Kod", render: (value: string) => {value}, }, { key: "discount", label: "Zniżka", render: (value: number, row: PromoCode) => {formatDiscount(value, row.type)}, }, { key: "usageCount", label: "Użycia", render: (value: number, row: PromoCode) => (

{value}

{row.usageLimit &&

/ {row.usageLimit}

}

), }, { key: "validFrom", label: "Ważność", render: (value: string, row: PromoCode) => (

Od: {formatDate(value)}

{row.validTo &&

Do: {formatDate(row.validTo)}

}

), }, { key: "isActive", label: "Status", render: (value: boolean) => ( {value ? "Aktywny" : "Nieaktywny"} ), }, { key: "createdAt", label: "Data utworzenia", render: (value: string) => formatDate(value), }, { key: "actions", label: "Akcje", render: (_: any, row: PromoCode) => (

handleToggleActive(row._id, checked)} />

), }, ] return (

{/* Header */}

Kody promocyjne

Zarządzaj kodami promocyjnymi i zniżkami

{/* Filters */}

Filtry

{/* Error */} {error && (

{error}

)} {/* Data Table */}

) } [V0_FILE]typescriptreact:file="app/admin/stats/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { CalendarDays, TrendingUp, Users, CreditCard, Target, BarChart3, PieChart } from "lucide-react" import { api } from "@/lib/api" import { LineChart, Line, AreaChart, Area, BarChart, Bar, PieChart as RechartsPieChart, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Pie, } from "recharts" interface KeyMetrics { averageDailyRevenue: number averageDailyRevenueChange: number conversionRate: number conversionRateChange: number averageOrderValue: number averageOrderValueChange: number returningCustomers: number returningCustomersChange: number } interface RevenueData { name: string revenue: number orders: number users: number } interface PackageData { name: string value: number color: string count: number } interface PaymentMethodData { name: string value: number color: string count: number } interface ActivityData { hour: string orders: number } interface ActivityStats { hourlyData: ActivityData[] peakHours: string quietHours: string dailyAverage: number } // Fallback data when API is not available const fallbackKeyMetrics: KeyMetrics = { averageDailyRevenue: 245.67, averageDailyRevenueChange: 12.5, conversionRate: 3.24, conversionRateChange: 0.8, averageOrderValue: 89.5, averageOrderValueChange: -2.1, returningCustomers: 68, returningCustomersChange: 5.2, } const fallbackRevenueData: RevenueData[] = [ { name: "Sty", revenue: 4000, orders: 24, users: 12 }, { name: "Lut", revenue: 3000, orders: 18, users: 8 }, { name: "Mar", revenue: 5000, orders: 32, users: 15 }, { name: "Kwi", revenue: 4500, orders: 28, users: 11 }, { name: "Maj", revenue: 6000, orders: 38, users: 19 }, { name: "Cze", revenue: 5500, orders: 35, users: 16 }, { name: "Lip", revenue: 7000, orders: 42, users: 22 }, { name: "Sie", revenue: 6500, orders: 39, users: 18 }, { name: "Wrz", revenue: 8000, orders: 48, users: 25 }, { name: "Paź", revenue: 7500, orders: 45, users: 21 }, { name: "Lis", revenue: 9000, orders: 54, users: 28 }, { name: "Gru", revenue: 8500, orders: 51, users: 24 }, ] const fallbackPackageData: PackageData[] = [ { name: "VIP", value: 35, color: "#f59e0b", count: 52 }, { name: "Premium", value: 25, color: "#10b981", count: 37 }, { name: "Basic", value: 20, color: "#3b82f6", count: 30 }, { name: "Starter", value: 15, color: "#8b5cf6", count: 22 }, { name: "Inne", value: 5, color: "#ef4444", count: 7 }, ] const fallbackPaymentMethodData: PaymentMethodData[] = [ { name: "PayPal", value: 40, color: "#0070ba", count: 92 }, { name: "BLIK", value: 30, color: "#00d4aa", count: 69 }, { name: "Przelew", value: 20, color: "#6366f1", count: 46 }, { name: "Paysafecard", value: 10, color: "#00a0e6", count: 23 }, ] const fallbackActivityStats: ActivityStats = { hourlyData: [ { hour: "00:00", orders: 2 }, { hour: "02:00", orders: 1 }, { hour: "04:00", orders: 0 }, { hour: "06:00", orders: 3 }, { hour: "08:00", orders: 8 }, { hour: "10:00", orders: 12 }, { hour: "12:00", orders: 15 }, { hour: "14:00", orders: 18 }, { hour: "16:00", orders: 22 }, { hour: "18:00", orders: 25 }, { hour: "20:00", orders: 28 }, { hour: "22:00", orders: 15 }, ], peakHours: "20:00 - 22:00", quietHours: "02:00 - 06:00", dailyAverage: 156, } export default function StatsPage() { const [timeRange, setTimeRange] = useState("12m") const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [usingFallback, setUsingFallback] = useState(false) const [keyMetrics, setKeyMetrics] = useState(fallbackKeyMetrics) const [revenueData, setRevenueData] = useState(fallbackRevenueData) const [packageData, setPackageData] = useState(fallbackPackageData) const [paymentMethodData, setPaymentMethodData] = useState(fallbackPaymentMethodData) const [activityStats, setActivityStats] = useState(fallbackActivityStats) const sessionId = typeof window !== "undefined" ? localStorage.getItem("adminSession") : null const fetchAllStats = async () => { if (!sessionId) { setLoading(false) return } try { setLoading(true) setError(null) setUsingFallback(false) // Set timeout for API calls const timeoutPromise = new Promise((_, reject) => setTimeout(() => reject(new Error("Timeout")), 5000)) // Try to fetch real data with timeout const statsPromises = Promise.race([ Promise.all([ api.getKeyMetrics(sessionId, { period: timeRange }), api.getRevenueStats(sessionId, { period: timeRange }), api.getPackageStats(sessionId), api.getPaymentMethodStats(sessionId), api.getActivityStats(sessionId), ]), timeoutPromise, ]) const [metrics, revenue, packages, paymentMethods, activity] = (await statsPromises) as [ KeyMetrics, RevenueData[], PackageData[], PaymentMethodData[], ActivityStats, ] setKeyMetrics(metrics) setRevenueData(revenue) setPackageData(packages) setPaymentMethodData(paymentMethods) setActivityStats(activity) } catch (error) { console.warn("API not available, using fallback data:", error) setUsingFallback(true) // Keep fallback data that's already set } finally { setLoading(false) } } useEffect(() => { // Add a small delay to prevent immediate loading const timer = setTimeout(() => { fetchAllStats() }, 100) return () => clearTimeout(timer) }, [timeRange]) const formatCurrency = (value: number) => { return new Intl.NumberFormat("pl-PL", { style: "currency", currency: "PLN", }).format(value) } const formatPercentage = (value: number) => { return `${value > 0 ? "+" : ""}${value.toFixed(1)}%` } const getChangeColor = (change: number) => { return change >= 0 ? "text-green-600" : "text-red-600" } if (loading) { return (

Ładowanie statystyk...

) } if (!sessionId) { return (

Brak autoryzacji. Zaloguj się ponownie.

) } return (

{/* Header */}

Statystyki

Szczegółowe analizy i raporty {usingFallback && ( Dane demonstracyjne )}

{/* Key Metrics */}

Średni przychód/dzień

{formatCurrency(keyMetrics.averageDailyRevenue)}

{formatPercentage(keyMetrics.averageDailyRevenueChange)} vs poprzedni okres

Konwersja

{keyMetrics.conversionRate.toFixed(2)}%

{formatPercentage(keyMetrics.conversionRateChange)} vs poprzedni okres

Średnia wartość zamówienia

{formatCurrency(keyMetrics.averageOrderValue)}

{formatPercentage(keyMetrics.averageOrderValueChange)} vs poprzedni okres

Powracający klienci

{keyMetrics.returningCustomers.toFixed(0)}%

{formatPercentage(keyMetrics.returningCustomersChange)} vs poprzedni okres

{/* Charts Tabs */} Przychody Pakiety Płatności Aktywność

Przychody w czasie Przychody w wybranym okresie `${value} zł`} /> [`${value} zł`, "Przychód"]} /> Zamówienia vs Nowi użytkownicy Korelacja między zamówieniami a nowymi użytkownikami

Popularność pakietów Rozkład sprzedaży według typu pakietu `${name}: ${value}%`} > {packageData.map((entry, index) => ( ))} Top pakiety Najczęściej kupowane pakiety

{packageData.map((pkg, index) => (

{pkg.name}

{pkg.value}%

{pkg.count} sprzedaży

))}

Metody płatności Preferencje płatności klientów [`${value}%`, "Udział"]} /> Szczegóły płatności Analiza metod płatności

{paymentMethodData.map((method, index) => (

{method.name}

{method.value}%

{method.count} transakcji

))}

Aktywność w ciągu dnia Rozkład zamówień według godzin [`${value}`, "Zamówienia"]} />

Szczyt aktywności

{activityStats.peakHours}

Najwięcej zamówień

Najcichsze godziny

{activityStats.quietHours}

Najmniej aktywności

Średnia dzienna

{activityStats.dailyAverage} zamówień

Na dzień

) } [V0_FILE]typescriptreact:file="components/server-status.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Copy, Check, Users, Server, Wifi, AlertCircle, Activity, Globe } from "lucide-react" interface ServerData { online: boolean players: { online: number max: number } version?: string motd?: { clean: string[] } icon?: string } export default function ServerStatus() { const [serverData, setServerData] = useState(null) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [copied, setCopied] = useState(false) const serverIp = "DingoMC.PL" const fetchServerStatus = async () => { try { setIsLoading(true) setError(null) const response = await fetch("https://api.mcsrvstat.us/3/51.75.62.247:25565") if (!response.ok) { throw new Error(`Server returned ${response.status}`) } const data = await response.json() setServerData(data) // Generuj dane z ostatnich 30 dni dla wykresu const generateLast30DaysData = () => { const data = [] const now = new Date() for (let i = 29; i >= 0; i--) { const date = new Date(now) date.setDate(date.getDate() - i) const baseCount = Math.floor(Math.random() * 20) + 5 const timeOfDay = date.getHours() const multiplier = timeOfDay >= 16 && timeOfDay <= 22 ? 1.5 : timeOfDay >= 8 && timeOfDay <= 12 ? 1.2 : 0.8 data.push({ timestamp: date.toISOString(), playerCount: Math.floor(baseCount * multiplier), }) } return data } } catch (err) { console.error("Error fetching server status:", err) setError(err instanceof Error ? err.message : "Nie udało się pobrać danych serwera") } finally { setIsLoading(false) } } // Dodaj funkcję do generowania danych z ostatnich 30 dni const generateLast30DaysData = () => { const data = [] const now = new Date() for (let i = 29; i >= 0; i--) { const date = new Date(now) date.setDate(date.getDate() - i) // Symulacja danych - w rzeczywistości pobierałbyś to z API const baseCount = Math.floor(Math.random() * 20) + 5 const timeOfDay = date.getHours() const multiplier = timeOfDay >= 16 && timeOfDay <= 22 ? 1.5 : timeOfDay >= 8 && timeOfDay <= 12 ? 1.2 : 0.8 data.push({ timestamp: date.toISOString(), playerCount: Math.floor(baseCount * multiplier), }) } return data } useEffect(() => { fetchServerStatus() // Generuj dane aktywności z ostatnich 30 dni const activityData = generateLast30DaysData() // Tutaj normalnie pobierałbyś dane z API const intervalId = setInterval(fetchServerStatus, 60000) return () => clearInterval(intervalId) }, []) const copyIpToClipboard = () => { navigator.clipboard.writeText("dingomc.pl") setCopied(true) setTimeout(() => setCopied(false), 2000) } const serverStatus = serverData?.online ? "online" : isLoading ? "loading" : "offline" const currentPlayers = serverData?.players?.online ?? 0 const maxPlayers = serverData?.players?.max ?? 500 const activityData = generateLast30DaysData() // Lub pobierz z API if (error) { return (

{error}

) } return (

{/* Status Header */}

Status Serwera

{serverStatus === "online" ? "Online" : serverStatus === "offline" ? "Offline" : "Sprawdzanie..."}

{/* Players Count */}

{isLoading ? (

Ładowanie danych gracza...

) : (

Gracze online

{currentPlayers} / {maxPlayers}

)}

{/* Server IP */}

Adres serwera

{serverIp}

{/* Version info */} {serverData?.version && (

{serverData.version}

)}

) } [V0_FILE]typescriptreact:file="app/admin/logs/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { FileText, Shield, Eye, Edit, Trash2, Plus } from "lucide-react" import { useAuth } from "@/lib/auth" import { api } from "@/lib/api" import { useRouter } from "next/navigation" import DataTable from "@/components/admin/data-table" interface AdminLog { _id: string sessionId: string action: string details: any ipAddress: string userAgent: string createdAt: string } interface LogsResponse { logs: AdminLog[] pagination: { page: number limit: number total: number pages: number } } const actionLabels: Record = { login_attempt: "Próba logowania", login_success: "Udane logowanie", login_failed: "Nieudane logowanie", logout: "Wylogowanie", view_dashboard: "Wyświetlenie dashboard", view_payments: "Wyświetlenie płatności", update_payment_status: "Zmiana statusu płatności", create_promo_code: "Utworzenie kodu promocyjnego", update_promo_code: "Aktualizacja kodu promocyjnego", delete_promo_code: "Usunięcie kodu promocyjnego", } const actionIcons: Record = { login_attempt: Shield, login_success: Shield, login_failed: Shield, logout: Shield, view_dashboard: Eye, view_payments: Eye, update_payment_status: Edit, create_promo_code: Plus, update_promo_code: Edit, delete_promo_code: Trash2, } export default function LogsPage() { const { isAuthenticated, sessionId } = useAuth() const router = useRouter() const [logs, setLogs] = useState([]) const [pagination, setPagination] = useState({ page: 1, limit: 50, total: 0, pages: 0, }) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) // Filters const [actionFilter, setActionFilter] = useState("all") const [dateFrom, setDateFrom] = useState("") const [dateTo, setDateTo] = useState("") useEffect(() => { if (!isAuthenticated) { router.push("/admin/login") return } fetchLogs() }, [isAuthenticated, sessionId, router, pagination.page]) const fetchLogs = async () => { if (!sessionId) return try { setLoading(true) const params = { page: pagination.page, limit: pagination.limit, ...(actionFilter && actionFilter !== "all" && { action: actionFilter }), ...(dateFrom && { dateFrom }), ...(dateTo && { dateTo }), } const data: LogsResponse = await api.getAdminLogs(sessionId, params) setLogs(data.logs) setPagination(data.pagination) setError(null) } catch (err) { console.error("Error fetching logs:", err) setError(err instanceof Error ? err.message : "Failed to load logs") if (err instanceof Error && err.message.includes("unauthorized")) { router.push("/admin/login") } } finally { setLoading(false) } } const handlePageChange = (newPage: number) => { setPagination((prev) => ({ ...prev, page: newPage })) } const getActionBadge = (action: string) => { const variants: Record = { login_success: "default", login_failed: "destructive", login_attempt: "outline", logout: "secondary", view_dashboard: "outline", view_payments: "outline", update_payment_status: "default", create_promo_code: "default", update_promo_code: "outline", delete_promo_code: "destructive", } const Icon = actionIcons[action] || FileText return (

{actionLabels[action] || action}

) } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleString("pl-PL") } const formatDetails = (details: any) => { if (!details || Object.keys(details).length === 0) { return Brak szczegółów } return (

{Object.entries(details).map(([key, value]) => (

{key}: {String(value)}

))}

) } const columns = [ { key: "createdAt", label: "Data", render: (value: string) => {formatDate(value)}, }, { key: "action", label: "Akcja", render: (value: string) => getActionBadge(value), }, { key: "sessionId", label: "Sesja", render: (value: string) => {value.substring(0, 8)}..., }, { key: "ipAddress", label: "Adres IP", render: (value: string) => (

{value || "127.0.0.1"}

), }, { key: "userAgent", label: "Przeglądarka", render: (value: string) => (

{value ? value.split(" ")[0] : "Unknown"}

), }, { key: "details", label: "Szczegóły", render: (value: any) => formatDetails(value), }, ] return (

{/* Header */}

Logi administracyjne

Historia działań w panelu administracyjnym

{/* Filters */}

Filtry

setDateFrom(e.target.value)} placeholder="Od" /> setDateTo(e.target.value)} placeholder="Do" />

{/* Error */} {error && (

{error}

)} {/* Data Table */}

) } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"
import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className,
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className,
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className,
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"
import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescript:file="app/api/site-settings/route.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

export async function GET(request: NextRequest) {
  try {
    // W rzeczywistości pobierałbyś to z bazy danych
    // Na razie zwracamy domyślne ustawienia
    const settings = {
      showRecentPurchases: true,
      showTopSpenders: true,
      showAdminTeam: true,
      showSocialMedia: true,
      maintenanceMode: false,
    }

return NextResponse.json(settings)
  } catch (error) {
    console.error("Error fetching site settings:", error)
    return NextResponse.json({ error: "Failed to fetch site settings" }, { status: 500 })
  }
}
[V0_FILE]javascript:file="backend-content-routes.js" isFixed="true" isQuickEdit="true" isMerged="true"
// Import necessary modules
const fastify = require("fastify")() // or however you instantiate fastify
const mongoose = require("mongoose")

// Define Mongoose models
const SiteSettings = mongoose.model(
  "SiteSettings",
  new mongoose.Schema(
    {
      showRecentPurchases: { type: Boolean, default: true },
      showTopSpenders: { type: Boolean, default: true },
      showAdminTeam: { type: Boolean, default: true },
      showSocialMedia: { type: Boolean, default: true },
      maintenanceMode: { type: Boolean, default: false },
    },
    { timestamps: true },
  ),
)

const Event = mongoose.model(
  "Event",
  new mongoose.Schema(
    {
      title: { type: String, required: true },
      description: { type: String, required: true },
      date: { type: Date, required: true },
      isActive: { type: Boolean, default: true },
    },
    { timestamps: true },
  ),
)

const Admin = mongoose.model(
  "Admin",
  new mongoose.Schema(
    {
      name: { type: String, required: true },
      role: { type: String, required: true },
      avatar: String,
      isActive: { type: Boolean, default: true },
    },
    { timestamps: true },
  ),
)

const SocialLink = mongoose.model(
  "SocialLink",
  new mongoose.Schema(
    {
      platform: { type: String, required: true },
      url: { type: String, required: true },
      isActive: { type: Boolean, default: true },
    },
    { timestamps: true },
  ),
)

const AdminLog = mongoose.model(
  "AdminLog",
  new mongoose.Schema(
    {
      sessionId: { type: String },
      action: { type: String },
      details: { type: Object },
      ipAddress: { type: String },
      userAgent: { type: String },
    },
    { timestamps: true },
  ),
)

// Dodaj te routes do swojego Fastify backend

// Site Settings
fastify.get(
  "/v1/admin/site-settings",
  {
    preHandler: [fastify.authenticate],
  },
  async (request, reply) => {
    try {
      const settings = (await SiteSettings.findOne()) || {
        showRecentPurchases: true,
        showTopSpenders: true,
        showAdminTeam: true,
        showSocialMedia: true,
        maintenanceMode: false,
      }

return settings
    } catch (error) {
      reply.code(500).send({ error: "Failed to fetch site settings" })
    }
  },
)

fastify.put(
  "/v1/admin/site-settings",
  {
    preHandler: [fastify.authenticate],
  },
  async (request, reply) => {
    try {
      const settings = await SiteSettings.findOneAndUpdate({}, request.body, { upsert: true, new: true })

// Log action
      await AdminLog.create({
        sessionId: request.sessionId,
        action: "update_site_settings",
        details: request.body,
        ipAddress: request.ip,
        userAgent: request.headers["user-agent"],
      })

return settings
    } catch (error) {
      reply.code(500).send({ error: "Failed to update site settings" })
    }
  },
)

// Public site settings endpoint
fastify.get("/v1/site-settings", async (request, reply) => {
  try {
    const settings = (await SiteSettings.findOne()) || {
      showRecentPurchases: true,
      showTopSpenders: true,
      showAdminTeam: true,
      showSocialMedia: true,
      maintenanceMode: false,
    }

return settings
  } catch (error) {
    reply.code(500).send({ error: "Failed to fetch site settings" })
  }
})

// Events CRUD
fastify.get(
  "/v1/admin/events",
  {
    preHandler: [fastify.authenticate],
  },
  async (request, reply) => {
    try {
      const events = await Event.find().sort({ createdAt: -1 })
      return events
    } catch (error) {
      reply.code(500).send({ error: "Failed to fetch events" })
    }
  },
)

fastify.post(
  "/v1/admin/events",
  {
    preHandler: [fastify.authenticate],
  },
  async (request, reply) => {
    try {
      const event = await Event.create(request.body)

await AdminLog.create({
        sessionId: request.sessionId,
        action: "create_event",
        details: { eventId: event._id, title: event.title },
        ipAddress: request.ip,
        userAgent: request.headers["user-agent"],
      })

return event
    } catch (error) {
      reply.code(500).send({ error: "Failed to create event" })
    }
  },
)

fastify.put(
  "/v1/admin/events/:id",
  {
    preHandler: [fastify.authenticate],
  },
  async (request, reply) => {
    try {
      const event = await Event.findByIdAndUpdate(request.params.id, request.body, { new: true })

await AdminLog.create({
        sessionId: request.sessionId,
        action: "update_event",
        details: { eventId: event._id, title: event.title },
        ipAddress: request.ip,
        userAgent: request.headers["user-agent"],
      })

return event
    } catch (error) {
      reply.code(500).send({ error: "Failed to update event" })
    }
  },
)

fastify.delete(
  "/v1/admin/events/:id",
  {
    preHandler: [fastify.authenticate],
  },
  async (request, reply) => {
    try {
      const event = await Event.findByIdAndDelete(request.params.id)

await AdminLog.create({
        sessionId: request.sessionId,
        action: "delete_event",
        details: { eventId: request.params.id },
        ipAddress: request.ip,
        userAgent: request.headers["user-agent"],
      })

return { success: true }
    } catch (error) {
      reply.code(500).send({ error: "Failed to delete event" })
    }
  },
)

// Admins CRUD (podobnie jak events)
// Social Links CRUD (podobnie jak events)

// Mongoose schemas (dodaj do swojego modelu)
const SiteSettingsSchema = new mongoose.Schema(
  {
    showRecentPurchases: { type: Boolean, default: true },
    showTopSpenders: { type: Boolean, default: true },
    showAdminTeam: { type: Boolean, default: true },
    showSocialMedia: { type: Boolean, default: true },
    maintenanceMode: { type: Boolean, default: false },
  },
  { timestamps: true },
)

const EventSchema = new mongoose.Schema(
  {
    title: { type: String, required: true },
    description: { type: String, required: true },
    date: { type: Date, required: true },
    isActive: { type: Boolean, default: true },
  },
  { timestamps: true },
)

const AdminSchema = new mongoose.Schema(
  {
    name: { type: String, required: true },
    role: { type: String, required: true },
    avatar: String,
    isActive: { type: Boolean, default: true },
  },
  { timestamps: true },
)

const SocialLinkSchema = new mongoose.Schema(
  {
    platform: { type: String, required: true },
    url: { type: String, required: true },
    isActive: { type: Boolean, default: true },
  },
  { timestamps: true },
)
[V0_FILE]typescriptreact:file="components/admin/chart-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

interface ChartCardProps {
  title: string
  data: Array<{
    date: string
    revenue: number
    count: number
  }>
}

export default function ChartCard({ title, data }: ChartCardProps) {
  const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat("pl-PL", {
      style: "currency",
      currency: "PLN",
    }).format(amount)
  }

// Generate last 30 days data if no data provided
  const generateLast30Days = () => {
    const days = []
    for (let i = 29; i >= 0; i--) {
      const date = new Date()
      date.setDate(date.getDate() - i)
      days.push({
        date: date.toISOString().split("T")[0],
        revenue: 0,
        count: 0,
      })
    }
    return days
  }

// Use provided data or generate empty 30 days
  const chartData = data && data.length > 0 ? data : generateLast30Days()

// Ensure we have exactly 30 days of data
  const last30Days = generateLast30Days()
  const mergedData = last30Days.map((day) => {
    const existingData = chartData.find((d) => d.date === day.date)
    return existingData || day
  })

return (
    <div className="w-full">
      {title && (
        <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">{title}</h3>
        </div>
      )}
      <div className="p-6">
        <div className="h-80">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart data={mergedData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
              <CartesianGrid strokeDasharray="3 3" className="opacity-30" />
              <XAxis
                dataKey="date"
                tick={{ fontSize: 12 }}
                tickFormatter={(value) => {
                  const date = new Date(value)
                  return `${date.getDate()}/${date.getMonth() + 1}`
                }}
                className="text-gray-600 dark:text-gray-400"
                interval="preserveStartEnd"
              />
              <YAxis
                tick={{ fontSize: 12 }}
                className="text-gray-600 dark:text-gray-400"
                tickFormatter={(value) => {
                  if (value >= 1000) {
                    return `${(value / 1000).toFixed(1)}k`
                  }
                  return value.toString()
                }}
              />
              <Tooltip
                labelFormatter={(value) => {
                  const date = new Date(value)
                  return date.toLocaleDateString("pl-PL", {
                    weekday: "long",
                    year: "numeric",
                    month: "long",
                    day: "numeric",
                  })
                }}
                formatter={(value: number, name: string) => [
                  name === "revenue" ? formatCurrency(value) : value,
                  name === "revenue" ? "Przychód" : "Płatności",
                ]}
                contentStyle={{
                  backgroundColor: "rgb(255 255 255)",
                  border: "1px solid rgb(229 231 235)",
                  borderRadius: "0.5rem",
                  boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.1)",
                }}
                labelStyle={{
                  color: "rgb(17 24 39)",
                  fontWeight: "600",
                }}
              />
              <Line
                type="monotone"
                dataKey="revenue"
                stroke="#eab308"
                strokeWidth={3}
                dot={{ fill: "#eab308", strokeWidth: 2, r: 4 }}
                activeDot={{ r: 6, stroke: "#eab308", strokeWidth: 2, fill: "#fff" }}
                connectNulls={false}
              />
            </LineChart>
          </ResponsiveContainer>
        </div>

{/* Chart Summary */}
        <div className="mt-4 grid grid-cols-2 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700">
          <div className="text-center">
            <div className="text-sm text-gray-500 dark:text-gray-400">Najwyższy przychód</div>
            <div className="text-lg font-semibold text-gray-900 dark:text-gray-100">
              {formatCurrency(Math.max(...mergedData.map((d) => d.revenue)))}
            </div>
          </div>
          <div className="text-center">
            <div className="text-sm text-gray-500 dark:text-gray-400">Średni dzienny</div>
            <div className="text-lg font-semibold text-gray-900 dark:text-gray-100">
              {formatCurrency(mergedData.reduce((sum, d) => sum + d.revenue, 0) / mergedData.length)}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]javascript:file="models/SiteSettings.js" isMerged="true"
const mongoose = require("mongoose")

const SiteSettingsSchema = new mongoose.Schema(
  {
    // Visibility settings
    showRecentPurchases: {
      type: Boolean,
      default: true,
    },
    showTopSpenders: {
      type: Boolean,
      default: true,
    },
    showAdminTeam: {
      type: Boolean,
      default: true,
    },
    showSocialMedia: {
      type: Boolean,
      default: true,
    },

// Maintenance mode
    maintenanceMode: {
      type: Boolean,
      default: false,
    },
    maintenanceMessage: {
      type: String,
      default: "Strona jest w trybie konserwacji. Wrócimy wkrótce!",
    },

// Site info
    serverName: {
      type: String,
      default: "DingoMC",
    },
    serverDescription: {
      type: String,
      default: "Najlepszy serwer Minecraft w Polsce!",
    },
    serverIp: {
      type: String,
      default: "dingomc.pl",
    },

// Meta settings
    lastUpdated: {
      type: Date,
      default: Date.now,
    },
    updatedBy: {
      type: String,
      required: true,
    },
  },
  {
    timestamps: true,
  },
)

// Ensure only one settings document exists
SiteSettingsSchema.statics.getSettings = async function () {
  let settings = await this.findOne()
  if (!settings) {
    settings = new this({
      updatedBy: "system",
    })
    await settings.save()
  }
  return settings
}

SiteSettingsSchema.statics.updateSettings = async function (updates, updatedBy) {
  const settings = await this.getSettings()
  Object.assign(settings, updates)
  settings.lastUpdated = new Date()
  settings.updatedBy = updatedBy
  await settings.save()
  return settings
}

module.exports = mongoose.model("SiteSettings", SiteSettingsSchema)
[V0_FILE]javascript:file="models/Event.js" isMerged="true"
const mongoose = require("mongoose")

const EventSchema = new mongoose.Schema(
  {
    title: {
      type: String,
      required: true,
      trim: true,
      maxLength: 100,
    },
    description: {
      type: String,
      required: true,
      trim: true,
      maxLength: 500,
    },
    startDate: {
      type: Date,
      required: true,
    },
    endDate: {
      type: Date,
      required: true,
    },
    isActive: {
      type: Boolean,
      default: true,
    },
    priority: {
      type: Number,
      default: 0,
      min: 0,
      max: 10,
    },
    eventType: {
      type: String,
      enum: ["promotion", "update", "maintenance", "competition", "other"],
      default: "other",
    },
    createdBy: {
      type: String,
      required: true,
    },
  },
  {
    timestamps: true,
  },
)

EventSchema.index({ startDate: 1, endDate: 1 })
EventSchema.index({ isActive: 1, priority: -1 })

EventSchema.statics.getActiveEvents = function () {
  const now = new Date()
  return this.find({
    isActive: true,
    startDate: { $lte: now },
    endDate: { $gte: now },
  }).sort({ priority: -1, startDate: 1 })
}

module.exports = mongoose.model("Event", EventSchema)
[V0_FILE]javascript:file="models/Administrator.js" isMerged="true"
const mongoose = require("mongoose")

const AdministratorSchema = new mongoose.Schema(
  {
    nickname: {
      type: String,
      required: true,
      trim: true,
      unique: true,
      maxLength: 16,
    },
    role: {
      type: String,
      required: true,
      trim: true,
      maxLength: 50,
    },
    description: {
      type: String,
      trim: true,
      maxLength: 200,
    },
    avatarUrl: {
      type: String,
      trim: true,
    },
    isActive: {
      type: Boolean,
      default: true,
    },
    order: {
      type: Number,
      default: 0,
    },
    permissions: [
      {
        type: String,
        enum: ["manage_payments", "manage_users", "manage_content", "view_logs", "manage_promo_codes"],
      },
    ],
    createdBy: {
      type: String,
      required: true,
    },
  },
  {
    timestamps: true,
  },
)

AdministratorSchema.index({ isActive: 1, order: 1 })

module.exports = mongoose.model("Administrator", AdministratorSchema)
[V0_FILE]javascript:file="models/SocialLink.js" isMerged="true"
const mongoose = require("mongoose")

const SocialLinkSchema = new mongoose.Schema(
  {
    platform: {
      type: String,
      required: true,
      enum: ["discord", "youtube", "tiktok", "instagram", "facebook", "twitter", "twitch", "other"],
    },
    url: {
      type: String,
      required: true,
      trim: true,
    },
    displayName: {
      type: String,
      required: true,
      trim: true,
      maxLength: 50,
    },
    isActive: {
      type: Boolean,
      default: true,
    },
    order: {
      type: Number,
      default: 0,
    },
    createdBy: {
      type: String,
      required: true,
    },
  },
  {
    timestamps: true,
  },
)

SocialLinkSchema.index({ isActive: 1, order: 1 })

module.exports = mongoose.model("SocialLink", SocialLinkSchema)
[V0_FILE]javascript:file="controllers/contentController.js" isMerged="true"
const SiteSettings = require("../models/SiteSettings")
const Event = require("../models/Event")
const Administrator = require("../models/Administrator")
const SocialLink = require("../models/SocialLink")
const adminAuthService = require("../services/adminAuthService")

// Site Settings
exports.getSiteSettings = async (req, res) => {
  try {
    const settings = await SiteSettings.getSettings()

await adminAuthService.logAction(
      req.adminSession.sessionId,
      "view_site_settings",
      {},
      req.ip,
      req.headers["user-agent"],
    )

return res.send(settings)
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd pobierania ustawień strony",
      message: error.message,
    })
  }
}

exports.updateSiteSettings = async (req, res) => {
  try {
    const updates = req.body
    const updatedBy = req.adminSession.sessionId

const settings = await SiteSettings.updateSettings(updates, updatedBy)

await adminAuthService.logAction(
      req.adminSession.sessionId,
      "update_site_settings",
      { updates },
      req.ip,
      req.headers["user-agent"],
    )

return res.send({
      success: true,
      settings,
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd aktualizacji ustawień strony",
      message: error.message,
    })
  }
}

// Events
exports.getEvents = async (req, res) => {
  try {
    const { page = 1, limit = 20, active } = req.query
    const skip = (Number.parseInt(page) - 1) * Number.parseInt(limit)

const filter = {}
    if (active !== undefined) filter.isActive = active === "true"

const [events, total] = await Promise.all([
      Event.find(filter).sort({ priority: -1, startDate: -1 }).skip(skip).limit(Number.parseInt(limit)),
      Event.countDocuments(filter),
    ])

return res.send({
      events,
      pagination: {
        page: Number.parseInt(page),
        limit: Number.parseInt(limit),
        total,
        pages: Math.ceil(total / Number.parseInt(limit)),
      },
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd pobierania eventów",
      message: error.message,
    })
  }
}

exports.createEvent = async (req, res) => {
  try {
    const { title, description, startDate, endDate, eventType, priority } = req.body

if (!title || !description || !startDate || !endDate) {
      return res.status(400).send({
        error: "Nieprawidłowe dane",
        message: "Tytuł, opis, data rozpoczęcia i zakończenia są wymagane",
      })
    }

const event = new Event({
      title,
      description,
      startDate: new Date(startDate),
      endDate: new Date(endDate),
      eventType: eventType || "other",
      priority: priority || 0,
      createdBy: req.adminSession.sessionId,
    })

await event.save()

await adminAuthService.logAction(
      req.adminSession.sessionId,
      "create_event",
      { eventId: event._id, title },
      req.ip,
      req.headers["user-agent"],
    )

return res.status(201).send({
      success: true,
      event,
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd tworzenia eventu",
      message: error.message,
    })
  }
}

exports.updateEvent = async (req, res) => {
  try {
    const { id } = req.params
    const updates = req.body

const event = await Event.findById(id)
    if (!event) {
      return res.status(404).send({
        error: "Event nie znaleziony",
      })
    }

Object.assign(event, updates)
    await event.save()

await adminAuthService.logAction(
      req.adminSession.sessionId,
      "update_event",
      { eventId: id, updates },
      req.ip,
      req.headers["user-agent"],
    )

return res.send({
      success: true,
      event,
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd aktualizacji eventu",
      message: error.message,
    })
  }
}

exports.deleteEvent = async (req, res) => {
  try {
    const { id } = req.params

const event = await Event.findById(id)
    if (!event) {
      return res.status(404).send({
        error: "Event nie znaleziony",
      })
    }

await Event.findByIdAndDelete(id)

await adminAuthService.logAction(
      req.adminSession.sessionId,
      "delete_event",
      { eventId: id, title: event.title },
      req.ip,
      req.headers["user-agent"],
    )

return res.send({
      success: true,
      message: "Event został usunięty",
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd usuwania eventu",
      message: error.message,
    })
  }
}

// Administrators
exports.getAdministrators = async (req, res) => {
  try {
    const { active } = req.query

const filter = {}
    if (active !== undefined) filter.isActive = active === "true"

const administrators = await Administrator.find(filter).sort({ order: 1, createdAt: -1 })

return res.send({ administrators })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd pobierania administratorów",
      message: error.message,
    })
  }
}

exports.createAdministrator = async (req, res) => {
  try {
    const { nickname, role, description, avatarUrl, permissions, order } = req.body

if (!nickname || !role) {
      return res.status(400).send({
        error: "Nieprawidłowe dane",
        message: "Nickname i rola są wymagane",
      })
    }

const existingAdmin = await Administrator.findOne({ nickname })
    if (existingAdmin) {
      return res.status(409).send({
        error: "Administrator już istnieje",
        message: "Administrator o tym nicku już istnieje",
      })
    }

const administrator = new Administrator({
      nickname,
      role,
      description,
      avatarUrl,
      permissions: permissions || [],
      order: order || 0,
      createdBy: req.adminSession.sessionId,
    })

await administrator.save()

await adminAuthService.logAction(
      req.adminSession.sessionId,
      "create_administrator",
      { adminId: administrator._id, nickname, role },
      req.ip,
      req.headers["user-agent"],
    )

return res.status(201).send({
      success: true,
      administrator,
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd tworzenia administratora",
      message: error.message,
    })
  }
}

exports.updateAdministrator = async (req, res) => {
  try {
    const { id } = req.params
    const updates = req.body

const administrator = await Administrator.findById(id)
    if (!administrator) {
      return res.status(404).send({
        error: "Administrator nie znaleziony",
      })
    }

Object.assign(administrator, updates)
    await administrator.save()

await adminAuthService.logAction(
      req.adminSession.sessionId,
      "update_administrator",
      { adminId: id, updates },
      req.ip,
      req.headers["user-agent"],
    )

return res.send({
      success: true,
      administrator,
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd aktualizacji administratora",
      message: error.message,
    })
  }
}

exports.deleteAdministrator = async (req, res) => {
  try {
    const { id } = req.params

const administrator = await Administrator.findById(id)
    if (!administrator) {
      return res.status(404).send({
        error: "Administrator nie znaleziony",
      })
    }

await Administrator.findByIdAndDelete(id)

await adminAuthService.logAction(
      req.adminSession.sessionId,
      "delete_administrator",
      { adminId: id, nickname: administrator.nickname },
      req.ip,
      req.headers["user-agent"],
    )

return res.send({
      success: true,
      message: "Administrator został usunięty",
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd usuwania administratora",
      message: error.message,
    })
  }
}

// Social Links
exports.getSocialLinks = async (req, res) => {
  try {
    const { active } = req.query

const filter = {}
    if (active !== undefined) filter.isActive = active === "true"

const socialLinks = await SocialLink.find(filter).sort({ order: 1, createdAt: -1 })

exports.createSocialLink = async (req, res) => {
  try {
    const { platform, url, displayName, order } = req.body

if (!platform || !url || !displayName) {
      return res.status(400).send({
        error: "Nieprawidłowe dane",
        message: "Platforma, URL i nazwa wyświetlana są wymagane",
      })
    }

const socialLink = new SocialLink({
      platform,
      url,
      displayName,
      order: order || 0,
      createdBy: req.adminSession.sessionId,
    })

await socialLink.save()

await adminAuthService.logAction(
      req.adminSession.sessionId,
      "create_social_link",
      { linkId: socialLink._id, platform, displayName },
      req.ip,
      req.headers["user-agent"],
    )

return res.status(201).send({
      success: true,
      socialLink,
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd tworzenia linku społecznościowego",
      message: error.message,
    })
  }
}

exports.updateSocialLink = async (req, res) => {
  try {
    const { id } = req.params
    const updates = req.body

const socialLink = await SocialLink.findById(id)
    if (!socialLink) {
      return res.status(404).send({
        error: "Link społecznościowy nie znaleziony",
      })
    }

Object.assign(socialLink, updates)
    await socialLink.save()

await adminAuthService.logAction(
      req.adminSession.sessionId,
      "update_social_link",
      { linkId: id, updates },
      req.ip,
      req.headers["user-agent"],
    )

return res.send({
      success: true,
      socialLink,
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd aktualizacji linku społecznościowego",
      message: error.message,
    })
  }
}

exports.deleteSocialLink = async (req, res) => {
  try {
    const { id } = req.params

const socialLink = await SocialLink.findById(id)
    if (!socialLink) {
      return res.status(404).send({
        error: "Link społecznościowy nie znaleziony",
      })
    }

await SocialLink.findByIdAndDelete(id)

await adminAuthService.logAction(
      req.adminSession.sessionId,
      "delete_social_link",
      { linkId: id, platform: socialLink.platform },
      req.ip,
      req.headers["user-agent"],
    )

return res.send({
      success: true,
      message: "Link społecznościowy został usunięty",
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd usuwania linku społecznościowego",
      message: error.message,
    })
  }
}

// Public endpoints (for frontend)
exports.getPublicSiteSettings = async (req, res) => {
  try {
    const settings = await SiteSettings.getSettings()

// Return only public settings
    return res.send({
      showRecentPurchases: settings.showRecentPurchases,
      showTopSpenders: settings.showTopSpenders,
      showAdminTeam: settings.showAdminTeam,
      showSocialMedia: settings.showSocialMedia,
      maintenanceMode: settings.maintenanceMode,
      maintenanceMessage: settings.maintenanceMessage,
      serverName: settings.serverName,
      serverDescription: settings.serverDescription,
      serverIp: settings.serverIp,
    })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd pobierania ustawień strony",
      message: error.message,
    })
  }
}

exports.getPublicEvents = async (req, res) => {
  try {
    const events = await Event.getActiveEvents()
    return res.send({ events })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd pobierania eventów",
      message: error.message,
    })
  }
}

exports.getPublicAdministrators = async (req, res) => {
  try {
    const administrators = await Administrator.find({ isActive: true })
      .sort({ order: 1 })
      .select("nickname role description avatarUrl")

exports.getPublicSocialLinks = async (req, res) => {
  try {
    const socialLinks = await SocialLink.find({ isActive: true }).sort({ order: 1 }).select("platform url displayName")

return res.send({ socialLinks })
  } catch (error) {
    req.log.error(error)
    return res.status(500).send({
      error: "Błąd pobierania linków społecznościowych",
      message: error.message,
    })
  }
}
[V0_FILE]javascript:file="routes/contentRoutes.js" isMerged="true"
const contentController = require("../controllers/contentController")
const { adminAuth } = require("../middleware/adminAuth")

module.exports = (fastify, opts, done) => {
  // Schema definitions
  const siteSettingsSchema = {
    body: {
      type: "object",
      properties: {
        showRecentPurchases: { type: "boolean" },
        showTopSpenders: { type: "boolean" },
        showAdminTeam: { type: "boolean" },
        showSocialMedia: { type: "boolean" },
        maintenanceMode: { type: "boolean" },
        maintenanceMessage: { type: "string", maxLength: 500 },
        serverName: { type: "string", maxLength: 100 },
        serverDescription: { type: "string", maxLength: 500 },
        serverIp: { type: "string", maxLength: 100 },
      },
    },
  }

const eventSchema = {
    body: {
      type: "object",
      required: ["title", "description", "startDate", "endDate"],
      properties: {
        title: { type: "string", maxLength: 100 },
        description: { type: "string", maxLength: 500 },
        startDate: { type: "string", format: "date-time" },
        endDate: { type: "string", format: "date-time" },
        eventType: {
          type: "string",
          enum: ["promotion", "update", "maintenance", "competition", "other"],
        },
        priority: { type: "integer", minimum: 0, maximum: 10 },
        isActive: { type: "boolean" },
      },
    },
  }

const administratorSchema = {
    body: {
      type: "object",
      required: ["nickname", "role"],
      properties: {
        nickname: { type: "string", maxLength: 16 },
        role: { type: "string", maxLength: 50 },
        description: { type: "string", maxLength: 200 },
        avatarUrl: { type: "string" },
        isActive: { type: "boolean" },
        order: { type: "integer" },
        permissions: {
          type: "array",
          items: {
            type: "string",
            enum: ["manage_payments", "manage_users", "manage_content", "view_logs", "manage_promo_codes"],
          },
        },
      },
    },
  }

const socialLinkSchema = {
    body: {
      type: "object",
      required: ["platform", "url", "displayName"],
      properties: {
        platform: {
          type: "string",
          enum: ["discord", "youtube", "tiktok", "instagram", "facebook", "twitter", "twitch", "other"],
        },
        url: { type: "string" },
        displayName: { type: "string", maxLength: 50 },
        isActive: { type: "boolean" },
        order: { type: "integer" },
      },
    },
  }

const idParamSchema = {
    params: {
      type: "object",
      required: ["id"],
      properties: {
        id: { type: "string" },
      },
    },
  }

// Admin routes (protected)

// Site Settings
  fastify.get(
    "/admin/content/settings",
    {
      preHandler: adminAuth,
    },
    contentController.getSiteSettings,
  )

fastify.put(
    "/admin/content/settings",
    {
      schema: siteSettingsSchema,
      preHandler: adminAuth,
    },
    contentController.updateSiteSettings,
  )

// Events
  fastify.get(
    "/admin/content/events",
    {
      preHandler: adminAuth,
    },
    contentController.getEvents,
  )

fastify.post(
    "/admin/content/events",
    {
      schema: eventSchema,
      preHandler: adminAuth,
    },
    contentController.createEvent,
  )

fastify.put(
    "/admin/content/events/:id",
    {
      schema: { ...eventSchema, ...idParamSchema },
      preHandler: adminAuth,
    },
    contentController.updateEvent,
  )

fastify.delete(
    "/admin/content/events/:id",
    {
      schema: idParamSchema,
      preHandler: adminAuth,
    },
    contentController.deleteEvent,
  )

// Administrators
  fastify.get(
    "/admin/content/administrators",
    {
      preHandler: adminAuth,
    },
    contentController.getAdministrators,
  )

fastify.post(
    "/admin/content/administrators",
    {
      schema: administratorSchema,
      preHandler: adminAuth,
    },
    contentController.createAdministrator,
  )

fastify.put(
    "/admin/content/administrators/:id",
    {
      schema: { ...administratorSchema, ...idParamSchema },
      preHandler: adminAuth,
    },
    contentController.updateAdministrator,
  )

fastify.delete(
    "/admin/content/administrators/:id",
    {
      schema: idParamSchema,
      preHandler: adminAuth,
    },
    contentController.deleteAdministrator,
  )

// Social Links
  fastify.get(
    "/admin/content/social-links",
    {
      preHandler: adminAuth,
    },
    contentController.getSocialLinks,
  )

fastify.post(
    "/admin/content/social-links",
    {
      schema: socialLinkSchema,
      preHandler: adminAuth,
    },
    contentController.createSocialLink,
  )

fastify.put(
    "/admin/content/social-links/:id",
    {
      schema: { ...socialLinkSchema, ...idParamSchema },
      preHandler: adminAuth,
    },
    contentController.updateSocialLink,
  )

fastify.delete(
    "/admin/content/social-links/:id",
    {
      schema: idParamSchema,
      preHandler: adminAuth,
    },
    contentController.deleteSocialLink,
  )

// Public routes (for frontend)
  fastify.get("/content/settings", contentController.getPublicSiteSettings)
  fastify.get("/content/events", contentController.getPublicEvents)
  fastify.get("/content/administrators", contentController.getPublicAdministrators)
  fastify.get("/content/social-links", contentController.getPublicSocialLinks)

done()
}
[V0_FILE]javascript:file="server.js" isQuickEdit="true" isMerged="true"
const fastify = require("fastify")({ logger: true })

// Declare a route
fastify.get("/", async (request, reply) => {
  return { hello: "world" }
})

fastify.register(require("./routes/itemRoutes"), { prefix: "/v1" })
fastify.register(require("./routes/adminRoutes"), { prefix: "/v1" })
fastify.register(require("./routes/contentRoutes"), { prefix: "/v1" })

// Run the server!
const start = async () => {
  try {
    await fastify.listen({ port: 3000 })
  } catch (err) {
    fastify.log.error(err)
    process.exit(1)
  }
}
start()
[V0_FILE]javascript:file="models/AdminLog.js" isQuickEdit="true" isMerged="true"
const mongoose = require("mongoose")

const AdminLogSchema = new mongoose.Schema({
  adminId: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "Admin",
    required: true,
  },
  action: {
    type: String,
    required: true,
    enum: [
      "login_attempt",
      "login_success",
      "login_failed",
      "logout",
      "view_dashboard",
      "view_payments",
      "update_payment_status",
      "create_promo_code",
      "update_promo_code",
      "delete_promo_code",
      "view_site_settings",
      "update_site_settings",
      "create_event",
      "update_event",
      "delete_event",
      "create_administrator",
      "update_administrator",
      "delete_administrator",
      "create_social_link",
      "update_social_link",
      "delete_social_link",
    ],
  },
  details: {
    type: String,
  },
  timestamp: {
    type: Date,
    default: Date.now,
  },
})

module.exports = mongoose.model("AdminLog", AdminLogSchema)
[V0_FILE]typescriptreact:file="app/admin/content/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { useAuth } from "@/lib/auth"
import { api } from "@/lib/api"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Trash2, Save, Settings, Calendar, Users, LinkIcon, AlertTriangle, Loader2 } from "lucide-react"

interface SiteSettings {
  showRecentPurchases: boolean
  showTopSpenders: boolean
  showAdminTeam: boolean
  showSocialMedia: boolean
  maintenanceMode: boolean
  maintenanceMessage?: string
  serverIp?: string
  serverPort?: number
}

interface Event {
  _id: string
  title: string
  description: string
  date: string
  time?: string
  prize?: string
  type: string
  priority: number
  isActive: boolean
  createdAt: string
}

interface Administrator {
  _id: string
  name: string
  role: string
  avatar?: string
  description?: string
  discord?: string
  permissions: string[]
  isActive: boolean
  createdAt: string
}

interface SocialLink {
  _id: string
  platform: string
  url: string
  icon?: string
  members?: string
  description?: string
  isActive: boolean
  createdAt: string
}

export default function ContentPage() {
  const { isAuthenticated, sessionId } = useAuth()
  const router = useRouter()

// States
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

// Data states
  const [siteSettings, setSiteSettings] = useState<SiteSettings>({
    showRecentPurchases: true,
    showTopSpenders: true,
    showAdminTeam: true,
    showSocialMedia: true,
    maintenanceMode: false,
    maintenanceMessage: "Strona jest w trakcie konserwacji. Wrócimy wkrótce!",
    serverIp: "DingoMC.PL",
    serverPort: 25565,
  })
  const [events, setEvents] = useState<Event[]>([])
  const [admins, setAdmins] = useState<Administrator[]>([])
  const [socialLinks, setSocialLinks] = useState<SocialLink[]>([])

// Form states
  const [newEvent, setNewEvent] = useState({
    title: "",
    description: "",
    date: "",
    time: "",
    prize: "",
    type: "tournament",
    priority: 1,
  })
  const [newAdmin, setNewAdmin] = useState({
    name: "",
    role: "",
    avatar: "",
    description: "",
    discord: "",
  })
  const [newSocialLink, setNewSocialLink] = useState({
    platform: "",
    url: "",
    icon: "",
    members: "",
    description: "",
  })

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/admin/login")
      return
    }
    fetchAllData()
  }, [isAuthenticated, sessionId, router])

const fetchAllData = async () => {
    if (!sessionId) return

try {
      setLoading(true)
      const [settingsData, eventsData, adminsData, socialData] = await Promise.all([
        api.getSiteSettings(sessionId),
        api.getEvents(sessionId),
        api.getAdmins(sessionId),
        api.getSocialLinks(sessionId),
      ])

setSiteSettings(settingsData)
      setEvents(eventsData)
      setAdmins(adminsData)
      setSocialLinks(socialData)
      setError(null)
    } catch (err) {
      console.error("Error fetching data:", err)
      setError(err instanceof Error ? err.message : "Failed to load data")
    } finally {
      setLoading(false)
    }
  }

const saveSiteSettings = async () => {
    if (!sessionId) return

try {
      setSaving(true)
      await api.updateSiteSettings(sessionId, siteSettings)
      setError(null)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to save settings")
    } finally {
      setSaving(false)
    }
  }

const createEvent = async () => {
    if (!sessionId || !newEvent.title || !newEvent.description || !newEvent.date) return

try {
      const eventData = {
        ...newEvent,
        isActive: true,
      }
      const event = await api.createEvent(sessionId, eventData)
      setEvents([...events, event])
      setNewEvent({
        title: "",
        description: "",
        date: "",
        time: "",
        prize: "",
        type: "tournament",
        priority: 1,
      })
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create event")
    }
  }

const createAdmin = async () => {
    if (!sessionId || !newAdmin.name || !newAdmin.role) return

try {
      const adminData = {
        ...newAdmin,
        permissions: ["view"],
        isActive: true,
      }
      const admin = await api.createAdmin(sessionId, adminData)
      setAdmins([...admins, admin])
      setNewAdmin({
        name: "",
        role: "",
        avatar: "",
        description: "",
        discord: "",
      })
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create administrator")
    }
  }

const createSocialLink = async () => {
    if (!sessionId || !newSocialLink.platform || !newSocialLink.url) return

try {
      const linkData = {
        ...newSocialLink,
        isActive: true,
      }
      const link = await api.createSocialLink(sessionId, linkData)
      setSocialLinks([...socialLinks, link])
      setNewSocialLink({
        platform: "",
        url: "",
        icon: "",
        members: "",
        description: "",
      })
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create social link")
    }
  }

const deleteEvent = async (id: string) => {
    if (!sessionId || !confirm("Czy na pewno chcesz usunąć ten event?")) return

try {
      await api.deleteEvent(sessionId, id)
      setEvents(events.filter((e) => e._id !== id))
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to delete event")
    }
  }

const deleteAdmin = async (id: string) => {
    if (!sessionId || !confirm("Czy na pewno chcesz usunąć tego administratora?")) return

try {
      await api.deleteAdmin(sessionId, id)
      setAdmins(admins.filter((a) => a._id !== id))
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to delete administrator")
    }
  }

const deleteSocialLink = async (id: string) => {
    if (!sessionId || !confirm("Czy na pewno chcesz usunąć ten link?")) return

try {
      await api.deleteSocialLink(sessionId, id)
      setSocialLinks(socialLinks.filter((s) => s._id !== id))
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to delete social link")
    }
  }

const toggleEventStatus = async (id: string, isActive: boolean) => {
    if (!sessionId) return

try {
      await api.updateEvent(sessionId, id, { isActive })
      setEvents(events.map((e) => (e._id === id ? { ...e, isActive } : e)))
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to update event")
    }
  }

const toggleAdminStatus = async (id: string, isActive: boolean) => {
    if (!sessionId) return

try {
      await api.updateAdmin(sessionId, id, { isActive })
      setAdmins(admins.map((a) => (a._id === id ? { ...a, isActive } : a)))
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to update administrator")
    }
  }

const toggleSocialLinkStatus = async (id: string, isActive: boolean) => {
    if (!sessionId) return

try {
      await api.updateSocialLink(sessionId, id, { isActive })
      setSocialLinks(socialLinks.map((s) => (s._id === id ? { ...s, isActive } : s)))
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to update social link")
    }
  }

if (loading) {
    return (
      <div className="flex items-center justify-center min-h-96">
        <div className="text-center">
          <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
          <p className="text-muted-foreground">Ładowanie danych...</p>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Zarządzanie treścią</h1>
        <p className="text-muted-foreground">
          Edytuj ustawienia strony, eventy, administratorów i linki społecznościowe
        </p>
      </div>

{/* Error */}
      {error && <div className="bg-destructive/15 text-destructive px-4 py-3 rounded-md">{error}</div>}

<Tabs defaultValue="settings" className="space-y-6">
        <TabsList>
          <TabsTrigger value="settings">
            <Settings className="h-4 w-4 mr-2" />
            Ustawienia
          </TabsTrigger>
          <TabsTrigger value="events">
            <Calendar className="h-4 w-4 mr-2" />
            Eventy
          </TabsTrigger>
          <TabsTrigger value="admins">
            <Users className="h-4 w-4 mr-2" />
            Administratorzy
          </TabsTrigger>
          <TabsTrigger value="social">
            <LinkIcon className="h-4 w-4 mr-2" />
            Social Media
          </TabsTrigger>
        </TabsList>

{/* USTAWIENIA STRONY */}
        <TabsContent value="settings">
          <Card>
            <CardHeader>
              <CardTitle>Ustawienia strony</CardTitle>
              <CardDescription>Kontroluj widoczność sekcji i podstawowe ustawienia</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              {/* Visibility Settings */}
              <div className="space-y-4">
                <h3 className="text-lg font-medium">Widoczność sekcji</h3>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <div className="text-sm font-medium">Ostatnie zakupy</div>
                      <div className="text-sm text-muted-foreground">Pokaż sekcję z ostatnimi zakupami</div>
                    </div>
                    <Switch
                      checked={siteSettings.showRecentPurchases}
                      onCheckedChange={(checked) => setSiteSettings({ ...siteSettings, showRecentPurchases: checked })}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <div className="text-sm font-medium">Top gracze</div>
                      <div className="text-sm text-muted-foreground">Pokaż sekcję z top 3 graczami</div>
                    </div>
                    <Switch
                      checked={siteSettings.showTopSpenders}
                      onCheckedChange={(checked) => setSiteSettings({ ...siteSettings, showTopSpenders: checked })}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <div className="text-sm font-medium">Zespół administracji</div>
                      <div className="text-sm text-muted-foreground">Pokaż sekcję z administratorami</div>
                    </div>
                    <Switch
                      checked={siteSettings.showAdminTeam}
                      onCheckedChange={(checked) => setSiteSettings({ ...siteSettings, showAdminTeam: checked })}
                    />
                  </div>

<div className="flex items-center justify-between">
                    <div className="space-y-0.5">
                      <div className="text-sm font-medium">Social Media</div>
                      <div className="text-sm text-muted-foreground">Pokaż sekcję z linkami społecznościowymi</div>
                    </div>
                    <Switch
                      checked={siteSettings.showSocialMedia}
                      onCheckedChange={(checked) => setSiteSettings({ ...siteSettings, showSocialMedia: checked })}
                    />
                  </div>
                </div>
              </div>

{/* Server Settings */}
              <div className="space-y-4">
                <h3 className="text-lg font-medium">Ustawienia serwera</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium">Adres IP serwera</label>
                    <Input
                      value={siteSettings.serverIp || ""}
                      onChange={(e) => setSiteSettings({ ...siteSettings, serverIp: e.target.value })}
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium">Port serwera</label>
                    <Input
                      type="number"
                      value={siteSettings.serverPort || ""}
                      onChange={(e) =>
                        setSiteSettings({ ...siteSettings, serverPort: Number.parseInt(e.target.value) })
                      }
                    />
                  </div>
                </div>
              </div>

{/* Maintenance Mode */}
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <div className="space-y-0.5">
                    <div className="text-sm font-medium flex items-center gap-2">
                      <AlertTriangle className="h-4 w-4 text-destructive" />
                      Tryb konserwacji
                    </div>
                    <div className="text-sm text-muted-foreground">Wyłącz stronę dla użytkowników</div>
                  </div>
                  <Switch
                    checked={siteSettings.maintenanceMode}
                    onCheckedChange={(checked) => setSiteSettings({ ...siteSettings, maintenanceMode: checked })}
                  />
                </div>
                {siteSettings.maintenanceMode && (
                  <div className="space-y-2">
                    <label className="text-sm font-medium">Wiadomość konserwacji</label>
                    <Textarea
                      value={siteSettings.maintenanceMessage || ""}
                      onChange={(e) => setSiteSettings({ ...siteSettings, maintenanceMessage: e.target.value })}
                      placeholder="Wiadomość wyświetlana podczas konserwacji..."
                    />
                  </div>
                )}
              </div>

<Button onClick={saveSiteSettings} disabled={saving}>
                <Save className="h-4 w-4 mr-2" />
                {saving ? "Zapisywanie..." : "Zapisz ustawienia"}
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

{/* EVENTY */}
        <TabsContent value="events">
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Dodaj nowy event</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <Input
                    placeholder="Tytuł eventu"
                    value={newEvent.title}
                    onChange={(e) => setNewEvent({ ...newEvent, title: e.target.value })}
                  />
                  <Input
                    placeholder="Nagroda"
                    value={newEvent.prize}
                    onChange={(e) => setNewEvent({ ...newEvent, prize: e.target.value })}
                  />
                  <Input
                    type="date"
                    value={newEvent.date}
                    onChange={(e) => setNewEvent({ ...newEvent, date: e.target.value })}
                  />
                  <Input
                    type="time"
                    value={newEvent.time}
                    onChange={(e) => setNewEvent({ ...newEvent, time: e.target.value })}
                  />
                </div>
                <Textarea
                  placeholder="Opis eventu"
                  value={newEvent.description}
                  onChange={(e) => setNewEvent({ ...newEvent, description: e.target.value })}
                />
                <Button onClick={createEvent}>
                  <Plus className="h-4 w-4 mr-2" />
                  Dodaj event
                </Button>
              </CardContent>
            </Card>

<div className="space-y-4">
              {events.map((event) => (
                <Card key={event._id}>
                  <CardContent className="pt-6">
                    <div className="flex items-start justify-between">
                      <div className="space-y-2">
                        <div className="flex items-center gap-2">
                          <h3 className="font-medium">{event.title}</h3>
                          <Badge variant={event.isActive ? "default" : "secondary"}>
                            {event.isActive ? "Aktywny" : "Nieaktywny"}
                          </Badge>
                        </div>
                        <p className="text-sm text-muted-foreground">{event.description}</p>
                        <div className="flex items-center gap-4 text-sm text-muted-foreground">
                          <span>{new Date(event.date).toLocaleDateString("pl-PL")}</span>
                          {event.time && <span>{event.time}</span>}
                          {event.prize && <span>{event.prize}</span>}
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => toggleEventStatus(event._id, !event.isActive)}
                        >
                          {event.isActive ? "Wyłącz" : "Włącz"}
                        </Button>
                        <Button size="sm" variant="outline">
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button size="sm" variant="destructive" onClick={() => deleteEvent(event._id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </TabsContent>

{/* ADMINISTRATORZY */}
        <TabsContent value="admins">
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Dodaj administratora</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <Input
                    placeholder="Imię"
                    value={newAdmin.name}
                    onChange={(e) => setNewAdmin({ ...newAdmin, name: e.target.value })}
                  />
                  <Input
                    placeholder="Rola"
                    value={newAdmin.role}
                    onChange={(e) => setNewAdmin({ ...newAdmin, role: e.target.value })}
                  />
                  <Input
                    placeholder="Avatar (nick)"
                    value={newAdmin.avatar}
                    onChange={(e) => setNewAdmin({ ...newAdmin, avatar: e.target.value })}
                  />
                  <Input
                    placeholder="Discord"
                    value={newAdmin.discord}
                    onChange={(e) => setNewAdmin({ ...newAdmin, discord: e.target.value })}
                  />
                </div>
                <Textarea
                  placeholder="Opis"
                  value={newAdmin.description}
                  onChange={(e) => setNewAdmin({ ...newAdmin, description: e.target.value })}
                />
                <Button onClick={createAdmin}>
                  <Plus className="h-4 w-4 mr-2" />
                  Dodaj administratora
                </Button>
              </CardContent>
            </Card>

<div className="space-y-4">
              {admins.map((admin) => (
                <Card key={admin._id}>
                  <CardContent className="pt-6">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-muted rounded-lg flex items-center justify-center">
                          <span className="font-medium">{admin.name.charAt(0)}</span>
                        </div>
                        <div className="space-y-1">
                          <div className="flex items-center gap-2">
                            <h3 className="font-medium">{admin.name}</h3>
                            <Badge variant={admin.isActive ? "default" : "secondary"}>
                              {admin.isActive ? "Aktywny" : "Nieaktywny"}
                            </Badge>
                          </div>
                          <p className="text-sm text-muted-foreground">{admin.role}</p>
                          {admin.description && <p className="text-sm text-muted-foreground">{admin.description}</p>}
                          {admin.discord && <p className="text-sm text-muted-foreground">Discord: @{admin.discord}</p>}
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => toggleAdminStatus(admin._id, !admin.isActive)}
                        >
                          {admin.isActive ? "Wyłącz" : "Włącz"}
                        </Button>
                        <Button size="sm" variant="outline">
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button size="sm" variant="destructive" onClick={() => deleteAdmin(admin._id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </TabsContent>

{/* SOCIAL MEDIA */}
        <TabsContent value="social">
          <div className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle>Dodaj link społecznościowy</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="grid grid-cols-2 gap-4">
                  <Input
                    placeholder="Platforma"
                    value={newSocialLink.platform}
                    onChange={(e) => setNewSocialLink({ ...newSocialLink, platform: e.target.value })}
                  />
                  <Input
                    placeholder="URL"
                    value={newSocialLink.url}
                    onChange={(e) => setNewSocialLink({ ...newSocialLink, url: e.target.value })}
                  />
                  <Input
                    placeholder="Ikona"
                    value={newSocialLink.icon}
                    onChange={(e) => setNewSocialLink({ ...newSocialLink, icon: e.target.value })}
                  />
                  <Input
                    placeholder="Liczba członków"
                    value={newSocialLink.members}
                    onChange={(e) => setNewSocialLink({ ...newSocialLink, members: e.target.value })}
                  />
                </div>
                <Textarea
                  placeholder="Opis"
                  value={newSocialLink.description}
                  onChange={(e) => setNewSocialLink({ ...newSocialLink, description: e.target.value })}
                />
                <Button onClick={createSocialLink}>
                  <Plus className="h-4 w-4 mr-2" />
                  Dodaj link
                </Button>
              </CardContent>
            </Card>

<div className="space-y-4">
              {socialLinks.map((link) => (
                <Card key={link._id}>
                  <CardContent className="pt-6">
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-muted rounded-lg flex items-center justify-center">
                          <LinkIcon className="h-5 w-5" />
                        </div>
                        <div className="space-y-1">
                          <div className="flex items-center gap-2">
                            <h3 className="font-medium">{link.platform}</h3>
                            <Badge variant={link.isActive ? "default" : "secondary"}>
                              {link.isActive ? "Aktywny" : "Nieaktywny"}
                            </Badge>
                          </div>
                          <p className="text-sm text-muted-foreground">{link.url}</p>
                          {link.members && <p className="text-sm text-muted-foreground">{link.members} członków</p>}
                          {link.description && <p className="text-sm text-muted-foreground">{link.description}</p>}
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => toggleSocialLinkStatus(link._id, !link.isActive)}
                        >
                          {link.isActive ? "Wyłącz" : "Włącz"}
                        </Button>
                        <Button size="sm" variant="outline">
                          <Edit className="h-4 w-4" />
                        </Button>
                        <Button size="sm" variant="destructive" onClick={() => deleteSocialLink(link._id)}>
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { FileText } from "lucide-react"

const AdminDashboardPage = () => {
  return (
    <div className="container mx-auto py-8">
      <h1 className="text-2xl font-bold mb-4">Panel Administratora</h1>

<section className="mb-8">
        <h2 className="text-xl font-semibold mb-2">Statystyki</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <div className="bg-white shadow-md rounded-md p-4">
            <h3 className="text-lg font-semibold">Użytkownicy</h3>
            <p>1234</p>
          </div>
          <div className="bg-white shadow-md rounded-md p-4">
            <h3 className="text-lg font-semibold">Zamówienia</h3>
            <p>5678</p>
          </div>
          <div className="bg-white shadow-md rounded-md p-4">
            <h3 className="text-lg font-semibold">Produkty</h3>
            <p>9101</p>
          </div>
        </div>
      </section>

<section className="mb-8">
        <h2 className="text-xl font-semibold mb-2">Szybkie akcje</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <div className="bg-white shadow-md rounded-md p-4">
            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
              Dodaj produkt
            </button>
          </div>
          <div className="bg-white shadow-md rounded-md p-4">
            <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
              Zarządzaj zamówieniami
            </button>
          </div>
          <div className="bg-white shadow-md rounded-md p-4">
            <button className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
              Zarządzaj użytkownikami
            </button>
          </div>
          <Link
            href="/admin/content"
            className="flex items-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-xl hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-colors"
          >
            <FileText className="h-8 w-8 text-purple-600 dark:text-purple-400 mr-3" />
            <div>
              <div className="font-medium text-gray-900 dark:text-white">Treść</div>
              <div className="text-sm text-gray-500 dark:text-gray-400">Edytuj stronę</div>
            </div>
          </Link>
        </div>
      </section>

<section>
        <h2 className="text-xl font-semibold mb-2">Ostatnie logi</h2>
        <ul>
          <li>Log 1</li>
          <li>Log 2</li>
          <li>Log 3</li>
        </ul>
      </section>
    </div>
  )
}

export default AdminDashboardPage
[V0_FILE]typescriptreact:file="components/payment-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { useState, useRef } from "react"
import type React from "react"

import { useSearchParams } from "next/navigation"
import { AtSign, AlertCircle, Loader2, X } from "lucide-react"

type PromoCodeType = "percent" | "amount"

interface PromoCodeInfo {
  code: string
  discount: number
  type: PromoCodeType
  validFrom?: string
  validTo?: string
  usageLimit?: number
  isActive: boolean
}

const coinImages = [
  {
    amount: 50,
    url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile320-110x93.png",
  },
  {
    amount: 100,
    url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile960-110x93.png",
  },
  {
    amount: 200,
    url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile1600-110x93.png",
  },
  {
    amount: 500,
    url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile3200-110x93.png",
  },
  {
    amount: 800,
    url: "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile8000-110x93.png",
  },
]

export default function PaymentForm() {
  const searchParams = useSearchParams()
  const initialAmount = Number.parseInt(searchParams.get("amount") || "20")

const [amount, setAmount] = useState(initialAmount)
  const [originalAmount, setOriginalAmount] = useState(initialAmount)
  const [paymentMethod, setPaymentMethod] = useState("blik")
  const [username, setUsername] = useState("")
  const [email, setEmail] = useState("")
  const [avatarUrl, setAvatarUrl] = useState("https://mc-heads.net/avatar/steve/64")
  const [termsAccepted, setTermsAccepted] = useState(false)
  const [immediateServiceAccepted, setImmediateServiceAccepted] = useState(false)
  const [showPromoCode, setShowPromoCode] = useState(false)
  const [promoCode, setPromoCode] = useState("")
  const [promoCodeInfo, setPromoCodeInfo] = useState<PromoCodeInfo | null>(null)
  const [isCheckingPromoCode, setIsCheckingPromoCode] = useState(false)
  const [promoCodeError, setPromoCodeError] = useState<string | null>(null)
  const [errors, setErrors] = useState<{
    username?: string
    email?: string
    terms?: string
    immediateService?: string
    promoCode?: string
    paymentMethod?: string
  }>({})
  const [submissionError, setSubmissionError] = useState<string | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)

const usernameRef = useRef<HTMLDivElement>(null)
  const emailRef = useRef<HTMLDivElement>(null)
  const termsRef = useRef<HTMLDivElement>(null)
  const immediateServiceRef = useRef<HTMLDivElement>(null)
  const promoCodeRef = useRef<HTMLDivElement>(null)
  const promoCodeInputRef = useRef<HTMLInputElement>(null)
  const promoCodeDebounceRef = useRef<NodeJS.Timeout | null>(null)

const handleAmountChange = (value: number[]) => {
    const newAmount = value[0]
    setOriginalAmount(newAmount)

if (promoCodeInfo && promoCodeInfo.isActive) {
      applyPromoCodeDiscount(newAmount, promoCodeInfo)
    } else {
      setAmount(newAmount)
    }
  }

const applyPromoCodeDiscount = (baseAmount: number, promo: PromoCodeInfo) => {
    if (promo.type === "percent") {
      const discountedAmount = Math.max(1, Math.round(baseAmount * (1 - promo.discount / 100)))
      setAmount(discountedAmount)
    } else {
      const discountedAmount = Math.max(1, baseAmount - promo.discount)
      setAmount(discountedAmount)
    }
  }

const formatDiscount = (promo: PromoCodeInfo) => {
    if (promo.type === "percent") {
      return `${promo.discount}%`
    } else {
      return `${promo.discount} PLN`
    }
  }

const checkPromoCode = async (code: string) => {
    if (!code.trim()) {
      setPromoCodeInfo(null)
      setPromoCodeError(null)
      setAmount(originalAmount)
      return
    }

setIsCheckingPromoCode(true)
    setPromoCodeError(null)

try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_DOMAIN}/v1/promo-codes/${encodeURIComponent(code.trim())}`,
        {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
          },
        },
      )

if (!response.ok) {
        if (response.status === 404) {
          setPromoCodeInfo(null)
          setPromoCodeError("Kod promocyjny nie istnieje")
          setAmount(originalAmount)
          return
        }
        throw new Error("Wystąpił błąd podczas weryfikacji kodu")
      }

const data = await response.json()

// Sprawdź czy kod jest aktywny
      if (!data.isActive) {
        setPromoCodeInfo(null)
        setPromoCodeError("Kod promocyjny jest nieaktywny")
        setAmount(originalAmount)
        return
      }

// Sprawdź daty ważności
      const now = new Date()
      if (data.validFrom && new Date(data.validFrom) > now) {
        setPromoCodeInfo(null)
        setPromoCodeError("Kod promocyjny jeszcze nie jest aktywny")
        setAmount(originalAmount)
        return
      }

if (data.validTo && new Date(data.validTo) < now) {
        setPromoCodeInfo(null)
        setPromoCodeError("Kod promocyjny wygasł")
        setAmount(originalAmount)
        return
      }

// Kod jest ważny
      const promoInfo: PromoCodeInfo = {
        code: data.code,
        discount: data.discount,
        type: data.type,
        validFrom: data.validFrom,
        validTo: data.validTo,
        usageLimit: data.usageLimit,
        isActive: data.isActive,
      }

setPromoCodeInfo(promoInfo)
      applyPromoCodeDiscount(originalAmount, promoInfo)
      setPromoCodeError(null)
    } catch (error) {
      console.error("Promo code validation error:", error)
      setPromoCodeInfo(null)
      setPromoCodeError(error instanceof Error ? error.message : "Wystąpił błąd podczas weryfikacji kodu")
      setAmount(originalAmount)
    } finally {
      setIsCheckingPromoCode(false)
    }
  }

const validate = () => {
    let isValid = true
    const newErrors: typeof errors = {}

if (!username.trim()) {
      newErrors.username = "Nick gracza jest wymagany"
      isValid = false
    }

if (!email.trim()) {
      newErrors.email = "Email jest wymagany"
      isValid = false
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      newErrors.email = "Nieprawidłowy format email"
      isValid = false
    }

if (!termsAccepted) {
      newErrors.terms = "Zaakceptuj regulamin"
      isValid = false
    }

if (!immediateServiceAccepted) {
      newErrors.immediateService = "Wymagana zgoda na natychmiastowe rozpoczęcie świadczenia usługi"
      isValid = false
    }

setErrors(newErrors)
    return isValid
  }

const scrollToFirstError = () => {
    if (errors.username) {
      usernameRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })
    } else if (errors.email) {
      emailRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })
    } else if (errors.terms) {
      termsRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })
    } else if (errors.immediateService) {
      immediateServiceRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })
    } else if (errors.promoCode) {
      promoCodeRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })
    }
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmissionError(null)

if (validate()) {
      try {
        setIsSubmitting(true)
        const submitButton = e.currentTarget.querySelector('button[type="submit"]') as HTMLButtonElement
        const originalButtonText = submitButton.innerHTML
        submitButton.disabled = true
        submitButton.innerHTML =
          '<span class="flex items-center justify-center"><span class="mr-2">Przetwarzanie</span><span class="animate-spin"><svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg></span></span>'

const paymentData = {
          nickname: username,
          email: email,
          amount: originalAmount,
          paymentMethod: paymentMethod,
          promoCode: promoCodeInfo?.code || undefined,
        }

const response = await fetch(`${process.env.NEXT_PUBLIC_API_DOMAIN}/v1/payments`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(paymentData),
        })

if (!response.ok) {
          submitButton.disabled = false
          submitButton.innerHTML = originalButtonText

const errorData = await response.json()

// Parse validation errors from backend
          let errorMessage = "Wystąpił błąd podczas tworzenia płatności"

if (errorData.message) {
            if (errorData.message.includes("nickname must NOT have more than 16 characters")) {
              errorMessage = "Nick nie może być dłuższy niż 16 znaków"
            } else if (errorData.message.includes("amount must be <= 1000")) {
              errorMessage = "Kwota nie może być większa niż 1000 PLN"
            } else if (errorData.message.includes("amount must be >= 1")) {
              errorMessage = "Kwota musi być większa niż 0 PLN"
            } else if (errorData.message.includes("email")) {
              errorMessage = "Podaj prawidłowy adres email"
            } else if (errorData.message.includes("nickname")) {
              errorMessage = "Podaj prawidłowy nick gracza"
            } else {
              errorMessage = errorData.message
            }
          }

setSubmissionError(errorMessage)
          return
        }

const data = await response.json()

if (data.redirectUrl) {
          window.location.href = data.redirectUrl
        } else {
          submitButton.disabled = false
          submitButton.innerHTML = originalButtonText
          setSubmissionError("Płatność została utworzona, ale brak URL przekierowania")
        }
      } catch (error) {
        console.error("Payment error:", error)
        setSubmissionError(
          error instanceof Error ? error.message : "Wystąpił nieznany błąd podczas przetwarzania płatności",
        )
      } finally {
        setIsSubmitting(false)
      }
    } else {
      setTimeout(scrollToFirstError, 100)
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-6">
      {/* Username */}
      <div ref={usernameRef}>
        <label htmlFor="username" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Nick gracza
        </label>
        <div className="mt-1">
          <div className="relative rounded-md shadow-sm">
            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
              <AtSign className="h-5 w-5 text-gray-400" aria-hidden="true" />
            </div>
            <input
              type="text"
              name="username"
              id="username"
              className="block w-full rounded-md border-gray-300 dark:border-gray-700 pl-10 pr-3 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-800"
              placeholder="Steve"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
            />
          </div>
        </div>
        {errors.username && (
          <p className="mt-2 text-sm text-red-600 dark:text-red-500" id="email-error">
            {errors.username}
          </p>
        )}
      </div>

{/* Email */}
      <div ref={emailRef}>
        <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Adres email
        </label>
        <div className="mt-1">
          <div className="relative rounded-md shadow-sm">
            <input
              type="email"
              name="email"
              id="email"
              className="block w-full rounded-md border-gray-300 dark:border-gray-700 pl-3 pr-3 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-800"
              placeholder="you@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
        </div>
        {errors.email && (
          <p className="mt-2 text-sm text-red-600 dark:text-red-500" id="email-error">
            {errors.email}
          </p>
        )}
      </div>

{/* Amount */}
      <div>
        <label htmlFor="amount" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Ilość Minecoins
        </label>
        <div className="mt-1">
          <input
            type="range"
            min="20"
            max="800"
            step="20"
            value={originalAmount}
            onChange={(e) => handleAmountChange([Number(e.target.value)])}
            className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
          />
          <div className="flex justify-between text-xs text-gray-500 dark:text-gray-400">
            <span>20</span>
            <span>800</span>
          </div>
          <div className="mt-2 flex items-center justify-center space-x-2">
            {coinImages.map((coin) => (
              <button
                key={coin.amount}
                type="button"
                className={`rounded-full border-2 border-gray-200 dark:border-gray-700 hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 ${
                  originalAmount === coin.amount ? "border-blue-500" : ""
                }`}
                onClick={() => handleAmountChange([coin.amount])}
              >
                <img src={coin.url || "/placeholder.svg"} alt={`${coin.amount} Minecoins`} className="h-12 w-auto" />
              </button>
            ))}
          </div>
          <div className="mt-2 text-center text-lg font-semibold text-gray-900 dark:text-gray-100">
            {amount} PLN
            {amount !== originalAmount && (
              <span className="ml-2 text-sm text-green-500">
                ({formatDiscount(promoCodeInfo as PromoCodeInfo)} zniżki!)
              </span>
            )}
          </div>
        </div>
      </div>

{/* Payment Method */}
      <div>
        <label htmlFor="paymentMethod" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Metoda płatności
        </label>
        <div className="mt-1">
          <select
            id="paymentMethod"
            name="paymentMethod"
            className="block w-full rounded-md border-gray-300 dark:border-gray-700 pl-3 pr-10 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-800"
            value={paymentMethod}
            onChange={(e) => setPaymentMethod(e.target.value)}
          >
            <option value="blik">BLIK</option>
            <option value="card">Karta Kredytowa</option>
          </select>
        </div>
        {errors.paymentMethod && (
          <p className="mt-2 text-sm text-red-600 dark:text-red-500" id="email-error">
            {errors.paymentMethod}
          </p>
        )}
      </div>

{/* Promo Code */}
      <div ref={promoCodeRef}>
        <div className="flex items-center justify-between">
          <label htmlFor="promoCode" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Kod promocyjny
          </label>
          <button
            type="button"
            className="text-sm text-blue-500 hover:text-blue-700 focus:outline-none"
            onClick={() => setShowPromoCode(!showPromoCode)}
          >
            {showPromoCode ? "Ukryj" : "Dodaj kod promocyjny"}
          </button>
        </div>
        {showPromoCode && (
          <div className="mt-1">
            <div className="relative rounded-md shadow-sm">
              <input
                type="text"
                name="promoCode"
                id="promoCode"
                className="block w-full rounded-md border-gray-300 dark:border-gray-700 pl-3 pr-3 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-blue-500 sm:text-sm dark:bg-gray-800"
                placeholder="KOD RABATOWY"
                value={promoCode}
                onChange={(e) => {
                  setPromoCode(e.target.value)
                  if (promoCodeDebounceRef.current) {
                    clearTimeout(promoCodeDebounceRef.current)
                  }
                  promoCodeDebounceRef.current = setTimeout(() => {
                    checkPromoCode(e.target.value)
                  }, 500)
                }}
                ref={promoCodeInputRef}
                disabled={isCheckingPromoCode}
              />
            </div>
            {isCheckingPromoCode && (
              <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
                <Loader2 className="h-4 w-4 mr-1 inline-block animate-spin" />
                Sprawdzanie kodu...
              </div>
            )}
            {promoCodeError && (
              <p className="mt-2 text-sm text-red-600 dark:text-red-500" id="email-error">
                {promoCodeError}
              </p>
            )}
          </div>
        )}
      </div>

{/* Terms & Conditions */}
      <div className="flex items-start" ref={termsRef}>
        <div className="flex items-center h-5">
          <input
            id="terms"
            name="terms"
            type="checkbox"
            className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600 focus:ring-offset-0"
            checked={termsAccepted}
            onChange={(e) => setTermsAccepted(e.target.checked)}
          />
        </div>
        <div className="ml-3 text-sm">
          <label htmlFor="terms" className="font-medium text-gray-700 dark:text-gray-300">
            Akceptuję{" "}
            <a href="#" className="text-blue-500 hover:text-blue-700">
              regulamin
            </a>
          </label>
          {errors.terms && (
            <p className="mt-1 text-red-600 dark:text-red-500" id="terms-error">
              {errors.terms}
            </p>
          )}
        </div>
      </div>

{/* Immediate Service */}
      <div className="flex items-start" ref={immediateServiceRef}>
        <div className="flex items-center h-5">
          <input
            id="immediateService"
            name="immediateService"
            type="checkbox"
            className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600 focus:ring-offset-0"
            checked={immediateServiceAccepted}
            onChange={(e) => setImmediateServiceAccepted(e.target.checked)}
          />
        </div>
        <div className="ml-3 text-sm">
          <label htmlFor="immediateService" className="font-medium text-gray-700 dark:text-gray-300">
            Wyrażam zgodę na natychmiastowe rozpoczęcie świadczenia usługi i przyjmuję do wiadomości, że w ten sposób
            tracę prawo do odstąpienia od umowy.
          </label>
          {errors.immediateService && (
            <p className="mt-1 text-red-600 dark:text-red-500" id="terms-error">
              {errors.immediateService}
            </p>
          )}
        </div>
      </div>

{/* Submission Error */}
      {submissionError && (
        <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
          <div className="flex items-center">
            <AlertCircle className="h-5 w-5 text-red-500 mr-3 flex-shrink-0" />
            <div>
              <h3 className="text-sm font-medium text-red-800 dark:text-red-300">
                Błąd podczas przetwarzania płatności
              </h3>
              <p className="text-sm text-red-700 dark:text-red-400 mt-1">{submissionError}</p>
            </div>
            <button
              type="button"
              onClick={() => setSubmissionError(null)}
              className="ml-auto text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
            >
              <X className="h-5 w-5" />
            </button>
          </div>
        </div>
      )}

{/* Submit Button */}
      <div className="flex justify-center pt-6">
        <button
          type="submit"
          className="inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
          disabled={isSubmitting}
        >
          Zapłać
        </button>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="lib/api.ts" isEdit="true" isQuickEdit="true" isMerged="true"
const API_BASE = process.env.NEXT_PUBLIC_API_DOMAIN || "http://localhost:3001"

export const api = {
  // Admin Authentication
  login: async (authCode: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      credentials: "include",
      body: JSON.stringify({ authCode }),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Login failed")
    }

return response.json()
  },

logout: async (sessionId: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/logout`, {
      method: "POST",
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      throw new Error("Logout failed")
    }

return response.json()
  },

// Dashboard
  getDashboardStats: async (sessionId: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/dashboard/stats`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch dashboard stats")
    }

return response.json()
  },

// Stats
  getRevenueStats: async (
    sessionId: string,
    params: {
      period?: string // '7d', '30d', '3m', '6m', '12m'
    } = {},
  ) => {
    const searchParams = new URLSearchParams()
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== "") {
        searchParams.append(key, value.toString())
      }
    })

const response = await fetch(`${API_BASE}/v1/admin/stats/revenue?${searchParams}`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch revenue stats")
    }

return response.json()
  },

getPackageStats: async (sessionId: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/stats/packages`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch package stats")
    }

return response.json()
  },

getPaymentMethodStats: async (sessionId: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/stats/payment-methods`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch payment method stats")
    }

return response.json()
  },

getActivityStats: async (sessionId: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/stats/activity`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch activity stats")
    }

return response.json()
  },

getKeyMetrics: async (
    sessionId: string,
    params: {
      period?: string
    } = {},
  ) => {
    const searchParams = new URLSearchParams()
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== "") {
        searchParams.append(key, value.toString())
      }
    })

const response = await fetch(`${API_BASE}/v1/admin/stats/metrics?${searchParams}`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch key metrics")
    }

return response.json()
  },

// Payments
  getPayments: async (
    sessionId: string,
    params: {
      page?: number
      limit?: number
      status?: string
      paymentMethod?: string
      search?: string
      dateFrom?: string
      dateTo?: string
    } = {},
  ) => {
    const searchParams = new URLSearchParams()
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== "") {
        searchParams.append(key, value.toString())
      }
    })

const response = await fetch(`${API_BASE}/v1/admin/payments?${searchParams}`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch payments")
    }

return response.json()
  },

updatePaymentStatus: async (sessionId: string, paymentId: string, status: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/payments/${paymentId}/status`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        "x-admin-session": sessionId,
      },
      credentials: "include",
      body: JSON.stringify({ status }),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to update payment status")
    }

return response.json()
  },

// Promo Codes
  getPromoCodes: async (
    sessionId: string,
    params: {
      page?: number
      limit?: number
      isActive?: boolean
      search?: string
    } = {},
  ) => {
    const searchParams = new URLSearchParams()
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== "") {
        searchParams.append(key, value.toString())
      }
    })

const response = await fetch(`${API_BASE}/v1/admin/promo-codes?${searchParams}`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch promo codes")
    }

return response.json()
  },

createPromoCode: async (
    sessionId: string,
    promoCode: {
      code: string
      discount: number
      type: "percent" | "amount"
      validFrom?: string
      validTo?: string
      usageLimit?: number
    },
  ) => {
    const response = await fetch(`${API_BASE}/v1/admin/promo-codes`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-admin-session": sessionId,
      },
      credentials: "include",
      body: JSON.stringify(promoCode),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to create promo code")
    }

return response.json()
  },

updatePromoCode: async (sessionId: string, id: string, isActive: boolean) => {
    const response = await fetch(`${API_BASE}/v1/admin/promo-codes/${id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        "x-admin-session": sessionId,
      },
      credentials: "include",
      body: JSON.stringify({ isActive }),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to update promo code")
    }

return response.json()
  },

deletePromoCode: async (sessionId: string, id: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/promo-codes/${id}`, {
      method: "DELETE",
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to delete promo code")
    }

return response.json()
  },

// Admin Logs
  getAdminLogs: async (
    sessionId: string,
    params: {
      page?: number
      limit?: number
      action?: string
      dateFrom?: string
      dateTo?: string
    } = {},
  ) => {
    const searchParams = new URLSearchParams()
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== "") {
        searchParams.append(key, value.toString())
      }
    })

const response = await fetch(`${API_BASE}/v1/admin/logs?${searchParams}`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch admin logs")
    }

return response.json()
  },

// ==========================================
  // PUBLIC SITE SETTINGS ENDPOINTS
  // ==========================================

// Public Site Settings (for frontend to check visibility)
  getPublicSiteSettings: async () => {
    const response = await fetch(`${API_BASE}/v1/site-settings`, {
      method: "GET",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch public site settings")
    }

return response.json()
  },

// Admin Site Settings
  getAdminSiteSettings: async (sessionId: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/site-settings`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch admin site settings")
    }

return response.json()
  },

// ==========================================
  // CONTENT MANAGEMENT - ADMIN ENDPOINTS
  // ==========================================

// Site Settings
  getSiteSettings: async (sessionId: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/content/site-settings`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch site settings")
    }

return response.json()
  },

updateSiteSettings: async (sessionId: string, settings: any) => {
    const response = await fetch(`${API_BASE}/v1/admin/content/site-settings`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        "x-admin-session": sessionId,
      },
      credentials: "include",
      body: JSON.stringify(settings),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to update site settings")
    }

return response.json()
  },

// Events Management
  getEvents: async (sessionId: string, params: { page?: number; limit?: number; isActive?: boolean } = {}) => {
    const searchParams = new URLSearchParams()
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== "") {
        searchParams.append(key, value.toString())
      }
    })

const response = await fetch(`${API_BASE}/v1/admin/content/events?${searchParams}`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch events")
    }

return response.json()
  },

createEvent: async (
    sessionId: string,
    event: {
      title: string
      description: string
      date: string
      time?: string
      prize?: string
      type?: string
      priority?: number
      isActive?: boolean
    },
  ) => {
    const response = await fetch(`${API_BASE}/v1/admin/content/events`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-admin-session": sessionId,
      },
      credentials: "include",
      body: JSON.stringify(event),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to create event")
    }

return response.json()
  },

updateEvent: async (sessionId: string, id: string, event: any) => {
    const response = await fetch(`${API_BASE}/v1/admin/content/events/${id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        "x-admin-session": sessionId,
      },
      credentials: "include",
      body: JSON.stringify(event),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to update event")
    }

return response.json()
  },

deleteEvent: async (sessionId: string, id: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/content/events/${id}`, {
      method: "DELETE",
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to delete event")
    }

return response.json()
  },

// Administrators Management
  getAdmins: async (sessionId: string, params: { page?: number; limit?: number; isActive?: boolean } = {}) => {
    const searchParams = new URLSearchParams()
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== "") {
        searchParams.append(key, value.toString())
      }
    })

const response = await fetch(`${API_BASE}/v1/admin/content/administrators?${searchParams}`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch administrators")
    }

return response.json()
  },

createAdmin: async (
    sessionId: string,
    admin: {
      name: string
      role: string
      avatar?: string
      description?: string
      discord?: string
      permissions?: string[]
      isActive?: boolean
    },
  ) => {
    const response = await fetch(`${API_BASE}/v1/admin/content/administrators`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-admin-session": sessionId,
      },
      credentials: "include",
      body: JSON.stringify(admin),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to create administrator")
    }

return response.json()
  },

updateAdmin: async (sessionId: string, id: string, admin: any) => {
    const response = await fetch(`${API_BASE}/v1/admin/content/administrators/${id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        "x-admin-session": sessionId,
      },
      credentials: "include",
      body: JSON.stringify(admin),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to update administrator")
    }

return response.json()
  },

deleteAdmin: async (sessionId: string, id: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/content/administrators/${id}`, {
      method: "DELETE",
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to delete administrator")
    }

return response.json()
  },

// Social Links Management
  getSocialLinks: async (sessionId: string, params: { page?: number; limit?: number; isActive?: boolean } = {}) => {
    const searchParams = new URLSearchParams()
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== "") {
        searchParams.append(key, value.toString())
      }
    })

const response = await fetch(`${API_BASE}/v1/admin/content/social-links?${searchParams}`, {
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch social links")
    }

return response.json()
  },

createSocialLink: async (
    sessionId: string,
    link: {
      platform: string
      url: string
      icon?: string
      members?: string
      description?: string
      isActive?: boolean
    },
  ) => {
    const response = await fetch(`${API_BASE}/v1/admin/content/social-links`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "x-admin-session": sessionId,
      },
      credentials: "include",
      body: JSON.stringify(link),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to create social link")
    }

return response.json()
  },

updateSocialLink: async (sessionId: string, id: string, link: any) => {
    const response = await fetch(`${API_BASE}/v1/admin/content/social-links/${id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        "x-admin-session": sessionId,
      },
      credentials: "include",
      body: JSON.stringify(link),
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to update social link")
    }

return response.json()
  },

deleteSocialLink: async (sessionId: string, id: string) => {
    const response = await fetch(`${API_BASE}/v1/admin/content/social-links/${id}`, {
      method: "DELETE",
      headers: {
        "x-admin-session": sessionId,
      },
      credentials: "include",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to delete social link")
    }

return response.json()
  },

// ==========================================
  // PUBLIC CONTENT ENDPOINTS (for frontend)
  // ==========================================

// Public Site Settings (for frontend to check visibility)
  getPublicSiteSettings: async () => {
    const response = await fetch(`${API_BASE}/v1/content/site-settings`, {
      method: "GET",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch public site settings")
    }

return response.json()
  },

// Public Events (active only)
  getPublicEvents: async (params: { limit?: number; type?: string } = {}) => {
    const searchParams = new URLSearchParams()
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== "") {
        searchParams.append(key, value.toString())
      }
    })

const response = await fetch(`${API_BASE}/v1/content/events?${searchParams}`, {
      method: "GET",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch public events")
    }

return response.json()
  },

// Public Administrators (active only)
  getPublicAdministrators: async (params: { limit?: number } = {}) => {
    const searchParams = new URLSearchParams()
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== "") {
        searchParams.append(key, value.toString())
      }
    })

const response = await fetch(`${API_BASE}/v1/content/administrators?${searchParams}`, {
      method: "GET",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch public administrators")
    }

return response.json()
  },

// Public Social Links (active only)
  getPublicSocialLinks: async (params: { limit?: number } = {}) => {
    const searchParams = new URLSearchParams()
    Object.entries(params).forEach(([key, value]) => {
      if (value !== undefined && value !== "") {
        searchParams.append(key, value.toString())
      }
    })

const response = await fetch(`${API_BASE}/v1/content/social-links?${searchParams}`, {
      method: "GET",
    })

if (!response.ok) {
      const error = await response.json()
      throw new Error(error.message || "Failed to fetch public social links")
    }

return response.json()
  },
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Image from "next/image"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import ServerStatus from "@/components/server-status"
import PackageCards from "@/components/package-cards"
import SocialMedia from "@/components/social-media"
import AdminTeam from "@/components/admin-team"
import RecentPurchases from "@/components/recent-purchases"
import TopSpenders from "@/components/top-spenders"
import { useState, useEffect } from "react"
import { api } from "@/lib/api"

interface SiteSettings {
  sections: {
    status: {
      enabled: boolean
      adressIp: string
    }
    community: {
      enabled: boolean
      socialMedia: any[]
      events: any[]
    }
    administration: {
      enabled: boolean
      administrators: any[]
    }
    recentPurchases: {
      enabled: boolean
    }
    topSpenders: {
      enabled: boolean
    }
  }
}

export default function Home() {
  const [siteSettings, setSiteSettings] = useState<SiteSettings>({
    sections: {
      status: { enabled: true, adressIp: "dingomc.pl" },
      community: { enabled: true, socialMedia: [], events: [] },
      administration: { enabled: true, administrators: [] },
      recentPurchases: { enabled: true },
      topSpenders: { enabled: true },
    },
  })
  const [loading, setLoading] = useState(true)
  const [maintenanceMode, setMaintenanceMode] = useState(false)

useEffect(() => {
    const fetchSiteSettings = async () => {
      try {
        setLoading(true)
        const data = await api.getPublicSiteSettings()

if (data.settings && data.settings.sections) {
          setSiteSettings(data.settings)
        }

// Check for maintenance mode if it exists
        if (data.settings && data.settings.maintenanceMode !== undefined) {
          setMaintenanceMode(data.settings.maintenanceMode)
        }
      } catch (error) {
        console.error("Error fetching site settings:", error)
        // Keep default settings on error
      } finally {
        setLoading(false)
      }
    }

fetchSiteSettings()
  }, [])

if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-yellow-500 mx-auto mb-4"></div>
          <p className="text-gray-600 dark:text-gray-400">Ładowanie strony...</p>
        </div>
      </div>
    )
  }

if (maintenanceMode) {
    return (
      <div className="min-h-screen bg-gray-900 flex items-center justify-center">
        <div className="text-center text-white">
          <h1 className="text-4xl font-bold mb-4">Serwer w trakcie konserwacji</h1>
          <p className="text-xl">Wrócimy wkrótce!</p>
        </div>
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
      {/* Subtle Minecraft texture background */}
      <div
        className="fixed inset-0 z-0 opacity-5 dark:opacity-10"
        style={{
          backgroundImage: "url('/stone-pattern.png')",
          backgroundRepeat: "repeat",
          backgroundSize: "100px 100px",
        }}
      />

{/* Navbar */}
      <Navbar />

{/* Main Content */}
      <main className="relative z-10">
        {/* Hero Section - zawsze widoczna */}
        <section className="container mx-auto px-4 py-8">
          <div className="flex flex-col lg:flex-row items-center justify-between bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-8 border border-gray-200 dark:border-gray-700">
            {/* Logo Section */}
            <div className="flex-1 text-center lg:text-left mb-8 lg:mb-0">
              <Image
                src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dingomc-logo-3-YcxubEO9Qp15QefIvffbPJlrtBlYYd.png"
                alt="DingoMC Logo"
                width={400}
                height={140}
                className="mx-auto lg:mx-0 drop-shadow-[0_0_15px_rgba(255,215,0,0.4)]"
                priority
              />
              <p className="text-lg text-gray-600 dark:text-gray-400 mt-6 max-w-lg mx-auto lg:mx-0 leading-relaxed">
                Witaj na <span className="font-semibold text-yellow-600 dark:text-yellow-500">DingoMC.PL</span> -
                najlepszym polskim serwerze Minecraft! Odkryj niesamowity świat survival, weź udział w epickich eventach
                PvP i dołącz do tysięcy graczy w niezapomnianych przygodach.
              </p>
              <div className="flex flex-wrap gap-2 mt-4 justify-center lg:justify-start">
                <span className="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 px-3 py-1 rounded-full text-sm font-medium">
                  Survival
                </span>
                <span className="bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 px-3 py-1 rounded-full text-sm font-medium">
                  PvP
                </span>
                <span className="bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-300 px-3 py-1 rounded-full text-sm font-medium">
                  Eventy
                </span>
                <span className="bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 px-3 py-1 rounded-full text-sm font-medium">
                  Społeczność
                </span>
              </div>
            </div>

{/* Server Status Section - warunkowa */}
            {siteSettings.sections.status.enabled && (
              <div className="flex-1 max-w-md w-full">
                <ServerStatus />
              </div>
            )}
          </div>
        </section>

{/* Packages Section - zawsze widoczna */}
        <section className="container mx-auto px-4 py-12">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 to-amber-600 dark:from-yellow-400 dark:to-amber-500 mb-4">
              Doładuj konto
            </h2>
            <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
              Wybierz kwotę doładowania i ciesz się dodatkowymi możliwościami na serwerze
            </p>
          </div>
          <PackageCards />
        </section>

{/* Social Media & Admin Section - warunkowe */}
        {(siteSettings.sections.community.enabled || siteSettings.sections.administration.enabled) && (
          <section className="container mx-auto px-4 py-12">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {siteSettings.sections.community.enabled && <SocialMedia />}
              {siteSettings.sections.administration.enabled && <AdminTeam />}
            </div>
          </section>
        )}

{/* Recent Activity Section - warunkowe */}
        {(siteSettings.sections.recentPurchases.enabled || siteSettings.sections.topSpenders.enabled) && (
          <section className="container mx-auto px-4 py-12">
            <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
              {siteSettings.sections.recentPurchases.enabled && <RecentPurchases />}
              {siteSettings.sections.topSpenders.enabled && <TopSpenders />}
            </div>
          </section>
        )}
      </main>

{/* Footer */}
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin/admin-sidebar.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { BarChart3, CreditCard, FileText, LayoutDashboard, Tag } from "lucide-react"

interface NavItem {
  name: string
  href: string
  icon: any
}

const navigation: NavItem[] = [
  { name: "Dashboard", href: "/admin/dashboard", icon: LayoutDashboard },
  { name: "Kreator strony", href: "/admin/page-builder", icon: BarChart3 },
  { name: "Płatności", href: "/admin/payments", icon: CreditCard },
  { name: "Kody promocyjne", href: "/admin/promo-codes", icon: Tag },
  { name: "Logi", href: "/admin/logs", icon: FileText },
]

export function AdminSidebar() {
  return (
    <div className="flex flex-col w-64 bg-gray-100 h-full">
      <div className="px-4 py-6">
        <h1 className="text-2xl font-bold">Admin Panel</h1>
      </div>
      <nav className="flex-1 px-1 py-4 bg-gray-100 space-y-1">
        {navigation.map((item) => (
          <a
            key={item.name}
            href={item.href}
            className="group flex items-center px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-200 hover:text-gray-900"
          >
            <item.icon className="mr-3 h-4 w-4 text-gray-500 group-hover:text-gray-600" />
            {item.name}
          </a>
        ))}
      </nav>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/page-builder/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Server, Users, Shield, ShoppingBag, Trophy, Eye, AlertCircle, Plus, Trash2, Calendar } from "lucide-react"
import { useAuth } from "@/lib/auth"
import { api } from "@/lib/api"
import { useRouter } from "next/navigation"

interface SiteSettings {
  sections: {
    status: {
      enabled: boolean
      adressIp: string
    }
    community: {
      enabled: boolean
      socialMedia: Array<{
        _id?: string
        platform: string
        memberCount: number
        url: string
      }>
      events: Array<{
        _id?: string
        name: string
        date: string
        price: number
      }>
    }
    administration: {
      enabled: boolean
      administrators: Array<{
        _id?: string
        name: string
        tag: string
        description: string
        role: string
      }>
    }
    recentPurchases: {
      enabled: boolean
    }
    topSpenders: {
      enabled: boolean
    }
  }
}

export default function PageBuilderPage() {
  const { isAuthenticated, sessionId } = useAuth()
  const router = useRouter()
  const [settings, setSettings] = useState<SiteSettings>({
    sections: {
      status: { enabled: true, adressIp: "dingomc.pl" },
      community: { enabled: true, socialMedia: [], events: [] },
      administration: { enabled: true, administrators: [] },
      recentPurchases: { enabled: true },
      topSpenders: { enabled: true },
    },
  })
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)

// Dialog states
  const [eventDialogOpen, setEventDialogOpen] = useState(false)
  const [adminDialogOpen, setAdminDialogOpen] = useState(false)
  const [socialDialogOpen, setSocialDialogOpen] = useState(false)

// Form states
  const [eventForm, setEventForm] = useState({
    name: "",
    date: "",
    price: "",
  })
  const [adminForm, setAdminForm] = useState({
    name: "",
    tag: "",
    description: "",
    role: "Właściciel",
  })
  const [socialForm, setSocialForm] = useState({
    platform: "discord",
    memberCount: "",
    url: "",
  })

useEffect(() => {
    if (!isAuthenticated) {
      router.push("/admin/login")
      return
    }

fetchSettings()
  }, [isAuthenticated, sessionId, router])

const fetchSettings = async () => {
    if (!sessionId) {
      setError("Brak sesji administratora")
      setLoading(false)
      return
    }

try {
      setLoading(true)
      console.log("🔍 Fetching settings with sessionId:", sessionId?.substring(0, 8) + "...")

const data = await api.getAdminSiteSettings(sessionId)
      console.log("✅ Received settings data:", data)

if (data.settings) {
        setSettings(data.settings)
      }
      setError(null)
    } catch (err) {
      console.error("❌ Error fetching site settings:", err)
      setError(err instanceof Error ? err.message : "Failed to load site settings")

if (err instanceof Error && err.message.includes("unauthorized")) {
        router.push("/admin/login")
      }
    } finally {
      setLoading(false)
    }
  }

const updateSection = async (section: keyof SiteSettings["sections"], data: any) => {
    if (!sessionId) {
      setError("Brak sesji administratora")
      return
    }

try {
      setSaving(true)
      console.log("🔄 Updating section:", section, "with data:", data)

// Update local state immediately
      setSettings((prev) => ({
        ...prev,
        sections: {
          ...prev.sections,
          [section]: {
            ...prev.sections[section],
            ...data,
          },
        },
      }))

const API_BASE = process.env.NEXT_PUBLIC_API_DOMAIN || "http://localhost:3001"
      console.log("🌐 API Base:", API_BASE)

let response: Response

switch (section) {
        case "status":
          console.log("📡 Calling status endpoint...")
          response = await fetch(`${API_BASE}/v1/admin/site-settings/status`, {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
              "x-admin-session": sessionId,
            },
            credentials: "include",
            body: JSON.stringify(data),
          })
          break
        case "community":
          console.log("📡 Calling community endpoint...")
          response = await fetch(`${API_BASE}/v1/admin/site-settings/community`, {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
              "x-admin-session": sessionId,
            },
            credentials: "include",
            body: JSON.stringify({ enabled: data.enabled }),
          })
          break
        case "administration":
          console.log("📡 Calling administration endpoint...")
          response = await fetch(`${API_BASE}/v1/admin/site-settings/administration`, {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
              "x-admin-session": sessionId,
            },
            credentials: "include",
            body: JSON.stringify({ enabled: data.enabled }),
          })
          break
        case "recentPurchases":
          console.log("📡 Calling recent-purchases endpoint...")
          response = await fetch(`${API_BASE}/v1/admin/site-settings/recent-purchases`, {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
              "x-admin-session": sessionId,
            },
            credentials: "include",
            body: JSON.stringify(data),
          })
          break
        case "topSpenders":
          console.log("📡 Calling top-spenders endpoint...")
          response = await fetch(`${API_BASE}/v1/admin/site-settings/top-spenders`, {
            method: "PUT",
            headers: {
              "Content-Type": "application/json",
              "x-admin-session": sessionId,
            },
            credentials: "include",
            body: JSON.stringify(data),
          })
          break
        default:
          throw new Error(`Unknown section: ${section}`)
      }

console.log("📡 Response status:", response.status)
      console.log("📡 Response headers:", Object.fromEntries(response.headers.entries()))

if (!response.ok) {
        const errorText = await response.text()
        console.error("❌ Response error:", errorText)
        throw new Error(`HTTP ${response.status}: ${errorText}`)
      }

const result = await response.json()
      console.log("✅ Update result:", result)

setSuccess(true)
      setTimeout(() => setSuccess(false), 3000)
    } catch (err) {
      console.error("❌ Error updating section:", err)
      setError(err instanceof Error ? err.message : "Failed to update section")

if (err instanceof Error && err.message.includes("unauthorized")) {
        router.push("/admin/login")
      }

fetchSettings()
    } finally {
      setSaving(false)
    }
  }

const addEvent = async () => {
    if (!sessionId || !eventForm.name || !eventForm.date || !eventForm.price) {
      console.log("❌ Missing required fields for event")
      setError("Wszystkie pola są wymagane")
      return
    }

try {
      console.log("🎉 Adding event:", eventForm)
      const API_BASE = process.env.NEXT_PUBLIC_API_DOMAIN || "http://localhost:3001"
      const url = `${API_BASE}/v1/admin/site-settings/events`

console.log("📡 POST to:", url)
      console.log("📡 Headers:", {
        "Content-Type": "application/json",
        "x-admin-session": sessionId?.substring(0, 8) + "...",
      })

const body = {
        name: eventForm.name,
        date: eventForm.date,
        price: Number.parseFloat(eventForm.price),
      }
      console.log("📡 Body:", body)

const response = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-admin-session": sessionId,
        },
        credentials: "include",
        body: JSON.stringify(body),
      })

console.log("📡 Response status:", response.status)
      console.log("📡 Response headers:", Object.fromEntries(response.headers.entries()))

if (response.ok) {
        const result = await response.json()
        console.log("✅ Event added successfully:", result)

setEventForm({ name: "", date: "", price: "" })
        setEventDialogOpen(false)
        fetchSettings()
      } else {
        const errorText = await response.text()
        console.error("❌ Failed to add event:", errorText)
        throw new Error(`HTTP ${response.status}: ${errorText}`)
      }
    } catch (err) {
      console.error("❌ Error adding event:", err)
      setError(err instanceof Error ? err.message : "Failed to add event")
    }
  }

const deleteEvent = async (eventId: string) => {
    if (!sessionId || !eventId) return

try {
      console.log("🗑️ Deleting event:", eventId)
      const API_BASE = process.env.NEXT_PUBLIC_API_DOMAIN || "http://localhost:3001"
      const url = `${API_BASE}/v1/admin/site-settings/events/${eventId}`

console.log("📡 DELETE to:", url)

const response = await fetch(url, {
        method: "DELETE",
        headers: {
          "x-admin-session": sessionId,
        },
        credentials: "include",
      })

console.log("📡 Response status:", response.status)

if (response.ok) {
        console.log("✅ Event deleted successfully")
        fetchSettings()
      } else {
        const errorText = await response.text()
        console.error("❌ Failed to delete event:", errorText)
        throw new Error(`HTTP ${response.status}: ${errorText}`)
      }
    } catch (err) {
      console.error("❌ Error deleting event:", err)
      setError(err instanceof Error ? err.message : "Failed to delete event")
    }
  }

const addAdministrator = async () => {
    if (!sessionId || !adminForm.name || !adminForm.tag || !adminForm.description) {
      console.log("❌ Missing required fields for admin")
      setError("Wszystkie pola są wymagane")
      return
    }

try {
      console.log("👤 Adding administrator:", adminForm)
      const API_BASE = process.env.NEXT_PUBLIC_API_DOMAIN || "http://localhost:3001"
      const url = `${API_BASE}/v1/admin/site-settings/administrators`

console.log("📡 POST to:", url)

const body = {
        name: adminForm.name,
        tag: adminForm.tag,
        description: adminForm.description,
        role: adminForm.role,
      }
      console.log("📡 Body:", body)

console.log("📡 Response status:", response.status)

if (response.ok) {
        const result = await response.json()
        console.log("✅ Administrator added successfully:", result)

setAdminForm({ name: "", tag: "", description: "", role: "Właściciel" })
        setAdminDialogOpen(false)
        fetchSettings()
      } else {
        const errorText = await response.text()
        console.error("❌ Failed to add administrator:", errorText)
        throw new Error(`HTTP ${response.status}: ${errorText}`)
      }
    } catch (err) {
      console.error("❌ Error adding administrator:", err)
      setError(err instanceof Error ? err.message : "Failed to add administrator")
    }
  }

const deleteAdministrator = async (adminId: string) => {
    if (!sessionId || !adminId) return

try {
      console.log("🗑️ Deleting administrator:", adminId)
      const API_BASE = process.env.NEXT_PUBLIC_API_DOMAIN || "http://localhost:3001"
      const url = `${API_BASE}/v1/admin/site-settings/administrators/${adminId}`

console.log("📡 DELETE to:", url)

const response = await fetch(url, {
        method: "DELETE",
        headers: {
          "x-admin-session": sessionId,
        },
        credentials: "include",
      })

console.log("📡 Response status:", response.status)

if (response.ok) {
        console.log("✅ Administrator deleted successfully")
        fetchSettings()
      } else {
        const errorText = await response.text()
        console.error("❌ Failed to delete administrator:", errorText)
        throw new Error(`HTTP ${response.status}: ${errorText}`)
      }
    } catch (err) {
      console.error("❌ Error deleting administrator:", err)
      setError(err instanceof Error ? err.message : "Failed to delete administrator")
    }
  }

const addSocialMedia = async () => {
    if (!sessionId || !socialForm.platform || !socialForm.memberCount || !socialForm.url) {
      console.log("❌ Missing required fields for social media")
      setError("Wszystkie pola są wymagane")
      return
    }

try {
      console.log("📱 Adding social media:", socialForm)
      const API_BASE = process.env.NEXT_PUBLIC_API_DOMAIN || "http://localhost:3001"
      const url = `${API_BASE}/v1/admin/site-settings/social-media`

console.log("📡 POST to:", url)

const body = {
        platform: socialForm.platform,
        memberCount: Number.parseInt(socialForm.memberCount),
        url: socialForm.url,
      }
      console.log("📡 Body:", body)

console.log("📡 Response status:", response.status)

if (response.ok) {
        const result = await response.json()
        console.log("✅ Social media added successfully:", result)

setSocialForm({ platform: "discord", memberCount: "", url: "" })
        setSocialDialogOpen(false)
        fetchSettings()
      } else {
        const errorText = await response.text()
        console.error("❌ Failed to add social media:", errorText)
        throw new Error(`HTTP ${response.status}: ${errorText}`)
      }
    } catch (err) {
      console.error("❌ Error adding social media:", err)
      setError(err instanceof Error ? err.message : "Failed to add social media")
    }
  }

const deleteSocialMedia = async (socialId: string) => {
    if (!sessionId || !socialId) return

try {
      console.log("🗑️ Deleting social media:", socialId)
      const API_BASE = process.env.NEXT_PUBLIC_API_DOMAIN || "http://localhost:3001"
      const url = `${API_BASE}/v1/admin/site-settings/social-media/${socialId}`

console.log("📡 DELETE to:", url)

const response = await fetch(url, {
        method: "DELETE",
        headers: {
          "x-admin-session": sessionId,
        },
        credentials: "include",
      })

console.log("📡 Response status:", response.status)

if (response.ok) {
        console.log("✅ Social media deleted successfully")
        fetchSettings()
      } else {
        const errorText = await response.text()
        console.error("❌ Failed to delete social media:", errorText)
        throw new Error(`HTTP ${response.status}: ${errorText}`)
      }
    } catch (err) {
      console.error("❌ Error deleting social media:", err)
      setError(err instanceof Error ? err.message : "Failed to delete social media")
    }
  }

// Test API connectivity
  const testAPI = async () => {
    const API_BASE = process.env.NEXT_PUBLIC_API_DOMAIN || "http://localhost:3001"
    console.log("🧪 Testing API connectivity...")
    console.log("🌐 API Base:", API_BASE)
    console.log("🔑 Session ID:", sessionId?.substring(0, 8) + "...")

try {
      const response = await fetch(`${API_BASE}/v1/admin/site-settings`, {
        method: "GET",
        headers: {
          "x-admin-session": sessionId || "",
        },
        credentials: "include",
      })

console.log("📡 Test response status:", response.status)
      console.log("📡 Test response headers:", Object.fromEntries(response.headers.entries()))

if (response.ok) {
        const data = await response.json()
        console.log("✅ API test successful:", data)
      } else {
        const errorText = await response.text()
        console.error("❌ API test failed:", errorText)
      }
    } catch (err) {
      console.error("❌ API test error:", err)
    }
  }

if (loading) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Kreator strony</h1>
          <p className="text-gray-600 dark:text-gray-400">Ładowanie ustawień...</p>
        </div>
        <div className="flex items-center justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-yellow-500"></div>
        </div>
      </div>
    )
  }

if (error) {
    return (
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Kreator strony</h1>
          <p className="text-gray-600 dark:text-gray-400">Zarządzaj wyglądem strony głównej</p>
        </div>

<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6">
          <div className="flex items-center mb-4">
            <AlertCircle className="h-5 w-5 text-red-500 mr-2" />
            <p className="text-red-700 dark:text-red-400">{error}</p>
          </div>
          <div className="flex gap-2">
            <Button onClick={fetchSettings}>Spróbuj ponownie</Button>
            <Button variant="outline" onClick={testAPI}>
              Test API
            </Button>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Kreator strony</h1>
          <p className="text-gray-600 dark:text-gray-400">Zarządzaj wyglądem i zawartością strony głównej</p>
        </div>

<div className="flex items-center gap-2">
          {success && (
            <Badge variant="default" className="bg-green-500">
              Zapisano pomyślnie
            </Badge>
          )}
          <Button variant="outline" onClick={testAPI} size="sm">
            Test API
          </Button>
          <Button variant="outline" onClick={() => window.open("/", "_blank")}>
            <Eye className="h-4 w-4 mr-2" />
            Podgląd strony
          </Button>
        </div>
      </div>

<div className="grid gap-6">
        {/* Status Section */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Server className="h-5 w-5" />
              Status serwera
            </CardTitle>
            <CardDescription>Sekcja wyświetlająca status serwera i informacje o połączeniu</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <Label htmlFor="status-enabled">Włącz sekcję</Label>
              <Switch
                id="status-enabled"
                checked={settings.sections.status.enabled}
                onCheckedChange={(enabled) => updateSection("status", { enabled })}
                disabled={saving}
              />
            </div>

{settings.sections.status.enabled && (
              <div className="space-y-2">
                <Label htmlFor="server-ip">Adres IP serwera</Label>
                <Input
                  id="server-ip"
                  value={settings.sections.status.adressIp}
                  onChange={(e) => updateSection("status", { adressIp: e.target.value })}
                  placeholder="dingomc.pl"
                  disabled={saving}
                />
              </div>
            )}
          </CardContent>
        </Card>

{/* Community Section */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Users className="h-5 w-5" />
              Społeczność
            </CardTitle>
            <CardDescription>Sekcja z mediami społecznościowymi i eventami</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <Label htmlFor="community-enabled">Włącz sekcję</Label>
              <Switch
                id="community-enabled"
                checked={settings.sections.community.enabled}
                onCheckedChange={(enabled) => updateSection("community", { enabled })}
                disabled={saving}
              />
            </div>

{settings.sections.community.enabled && (
              <div className="space-y-6">
                {/* Social Media */}
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <h4 className="font-medium">Media społecznościowe</h4>
                    <Dialog open={socialDialogOpen} onOpenChange={setSocialDialogOpen}>
                      <DialogTrigger asChild>
                        <Button size="sm">
                          <Plus className="h-4 w-4 mr-2" />
                          Dodaj
                        </Button>
                      </DialogTrigger>
                      <DialogContent>
                        <DialogHeader>
                          <DialogTitle>Dodaj media społecznościowe</DialogTitle>
                          <DialogDescription>Dodaj nowy kanał społecznościowy</DialogDescription>
                        </DialogHeader>
                        <div className="grid gap-4 py-4">
                          <div className="grid gap-2">
                            <Label htmlFor="social-platform">Platforma</Label>
                            <Select
                              value={socialForm.platform}
                              onValueChange={(value) => setSocialForm((prev) => ({ ...prev, platform: value }))}
                            >
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="discord">Discord</SelectItem>
                                <SelectItem value="tiktok">TikTok</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                          <div className="grid gap-2">
                            <Label htmlFor="social-members">Liczba członków</Label>
                            <Input
                              id="social-members"
                              type="number"
                              value={socialForm.memberCount}
                              onChange={(e) => setSocialForm((prev) => ({ ...prev, memberCount: e.target.value }))}
                              placeholder="1000"
                            />
                          </div>
                          <div className="grid gap-2">
                            <Label htmlFor="social-url">URL</Label>
                            <Input
                              id="social-url"
                              type="url"
                              value={socialForm.url}
                              onChange={(e) => setSocialForm((prev) => ({ ...prev, url: e.target.value }))}
                              placeholder="https://discord.gg/..."
                            />
                          </div>
                        </div>
                        <DialogFooter>
                          <Button variant="outline" onClick={() => setSocialDialogOpen(false)}>
                            Anuluj
                          </Button>
                          <Button onClick={addSocialMedia}>Dodaj</Button>
                        </DialogFooter>
                      </DialogContent>
                    </Dialog>
                  </div>
                  <div className="space-y-2">
                    {settings.sections.community.socialMedia.map((social, index) => (
                      <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                        <div className="flex items-center gap-2">
                          <Badge>{social.platform}</Badge>
                          <span className="text-sm">{social.memberCount} członków</span>
                          <span className="text-sm text-gray-500 truncate max-w-xs">{social.url}</span>
                        </div>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => social._id && deleteSocialMedia(social._id)}
                          className="text-red-600 hover:text-red-700"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    ))}
                    {settings.sections.community.socialMedia.length === 0 && (
                      <p className="text-sm text-gray-500 text-center py-4">Brak mediów społecznościowych</p>
                    )}
                  </div>
                </div>

{/* Events */}
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <h4 className="font-medium">Eventy</h4>
                    <Dialog open={eventDialogOpen} onOpenChange={setEventDialogOpen}>
                      <DialogTrigger asChild>
                        <Button size="sm">
                          <Plus className="h-4 w-4 mr-2" />
                          Dodaj
                        </Button>
                      </DialogTrigger>
                      <DialogContent>
                        <DialogHeader>
                          <DialogTitle>Dodaj event</DialogTitle>
                          <DialogDescription>Dodaj nowy event na serwer</DialogDescription>
                        </DialogHeader>
                        <div className="grid gap-4 py-4">
                          <div className="grid gap-2">
                            <Label htmlFor="event-name">Nazwa eventu</Label>
                            <Input
                              id="event-name"
                              value={eventForm.name}
                              onChange={(e) => setEventForm((prev) => ({ ...prev, name: e.target.value }))}
                              placeholder="Turniej PvP"
                            />
                          </div>
                          <div className="grid gap-2">
                            <Label htmlFor="event-date">Data</Label>
                            <Input
                              id="event-date"
                              type="datetime-local"
                              value={eventForm.date}
                              onChange={(e) => setEventForm((prev) => ({ ...prev, date: e.target.value }))}
                            />
                          </div>
                          <div className="grid gap-2">
                            <Label htmlFor="event-price">Cena (PLN)</Label>
                            <Input
                              id="event-price"
                              type="number"
                              step="0.01"
                              value={eventForm.price}
                              onChange={(e) => setEventForm((prev) => ({ ...prev, price: e.target.value }))}
                              placeholder="50.00"
                            />
                          </div>
                        </div>
                        <DialogFooter>
                          <Button variant="outline" onClick={() => setEventDialogOpen(false)}>
                            Anuluj
                          </Button>
                          <Button onClick={addEvent}>Dodaj</Button>
                        </DialogFooter>
                      </DialogContent>
                    </Dialog>
                  </div>
                  <div className="space-y-2">
                    {settings.sections.community.events.map((event, index) => (
                      <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                        <div className="flex items-center gap-2">
                          <Calendar className="h-4 w-4 text-gray-500" />
                          <span className="font-medium">{event.name}</span>
                          <span className="text-sm text-gray-500">
                            {new Date(event.date).toLocaleDateString("pl-PL")}
                          </span>
                          <Badge variant="outline">{event.price} PLN</Badge>
                        </div>
                        <Button
                          size="sm"
                          variant="outline"
                          onClick={() => event._id && deleteEvent(event._id)}
                          className="text-red-600 hover:text-red-700"
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    ))}
                    {settings.sections.community.events.length === 0 && (
                      <p className="text-sm text-gray-500 text-center py-4">Brak eventów</p>
                    )}
                  </div>
                </div>
              </div>
            )}
          </CardContent>
        </Card>

{/* Administration Section */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Shield className="h-5 w-5" />
              Administracja
            </CardTitle>
            <CardDescription>Sekcja z zespołem administracyjnym</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <Label htmlFor="admin-enabled">Włącz sekcję</Label>
              <Switch
                id="admin-enabled"
                checked={settings.sections.administration.enabled}
                onCheckedChange={(enabled) => updateSection("administration", { enabled })}
                disabled={saving}
              />
            </div>

{settings.sections.administration.enabled && (
              <div>
                <div className="flex items-center justify-between mb-3">
                  <h4 className="font-medium">Administratorzy</h4>
                  <Dialog open={adminDialogOpen} onOpenChange={setAdminDialogOpen}>
                    <DialogTrigger asChild>
                      <Button size="sm">
                        <Plus className="h-4 w-4 mr-2" />
                        Dodaj
                      </Button>
                    </DialogTrigger>
                    <DialogContent>
                      <DialogHeader>
                        <DialogTitle>Dodaj administratora</DialogTitle>
                        <DialogDescription>Dodaj nowego członka zespołu administracyjnego</DialogDescription>
                      </DialogHeader>
                      <div className="grid gap-4 py-4">
                        <div className="grid gap-2">
                          <Label htmlFor="admin-name">Imię</Label>
                          <Input
                            id="admin-name"
                            value={adminForm.name}
                            onChange={(e) => setAdminForm((prev) => ({ ...prev, name: e.target.value }))}
                            placeholder="Jan"
                          />
                        </div>
                        <div className="grid gap-2">
                          <Label htmlFor="admin-tag">Tag/Nick</Label>
                          <Input
                            id="admin-tag"
                            value={adminForm.tag}
                            onChange={(e) => setAdminForm((prev) => ({ ...prev, tag: e.target.value }))}
                            placeholder="JanKowalski"
                          />
                        </div>
                        <div className="grid gap-2">
                          <Label htmlFor="admin-description">Opis</Label>
                          <Textarea
                            id="admin-description"
                            value={adminForm.description}
                            onChange={(e) => setAdminForm((prev) => ({ ...prev, description: e.target.value }))}
                            placeholder="Główny administrator serwera..."
                          />
                        </div>
                        <div className="grid gap-2">
                          <Label htmlFor="admin-role">Rola</Label>
                          <Select
                            value={adminForm.role}
                            onValueChange={(value) => setAdminForm((prev) => ({ ...prev, role: value }))}
                          >
                            <SelectTrigger>
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="Właściciel">Właściciel</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                      <DialogFooter>
                        <Button variant="outline" onClick={() => setAdminDialogOpen(false)}>
                          Anuluj
                        </Button>
                        <Button onClick={addAdministrator}>Dodaj</Button>
                      </DialogFooter>
                    </DialogContent>
                  </Dialog>
                </div>
                <div className="space-y-2">
                  {settings.sections.administration.administrators.map((admin, index) => (
                    <div key={index} className="flex items-center justify-between p-3 border rounded-lg">
                      <div className="flex items-center gap-2">
                        <Shield className="h-4 w-4 text-gray-500" />
                        <span className="font-medium">{admin.name}</span>
                        <Badge>{admin.role}</Badge>
                        <span className="text-sm text-gray-500 truncate max-w-xs">{admin.description}</span>
                      </div>
                      <Button
                        size="sm"
                        variant="outline"
                        onClick={() => admin._id && deleteAdministrator(admin._id)}
                        className="text-red-600 hover:text-red-700"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  ))}
                  {settings.sections.administration.administrators.length === 0 && (
                    <p className="text-sm text-gray-500 text-center py-4">Brak administratorów</p>
                  )}
                </div>
              </div>
            )}
          </CardContent>
        </Card>

{/* Recent Purchases Section */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <ShoppingBag className="h-5 w-5" />
              Ostatnie zakupy
            </CardTitle>
            <CardDescription>Sekcja wyświetlająca ostatnie zakupy graczy</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <Label htmlFor="purchases-enabled">Włącz sekcję</Label>
              <Switch
                id="purchases-enabled"
                checked={settings.sections.recentPurchases.enabled}
                onCheckedChange={(enabled) => updateSection("recentPurchases", { enabled })}
                disabled={saving}
              />
            </div>
          </CardContent>
        </Card>

{/* Top Spenders Section */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Trophy className="h-5 w-5" />
              Najbogatsi gracze
            </CardTitle>
            <CardDescription>Sekcja z rankingiem największych wydatków</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-between">
              <Label htmlFor="spenders-enabled">Włącz sekcję</Label>
              <Switch
                id="spenders-enabled"
                checked={settings.sections.topSpenders.enabled}
                onCheckedChange={(enabled) => updateSection("topSpenders", { enabled })}
                disabled={saving}
              />
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/admin-team.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useRef } from "react"
import Image from "next/image"
import Link from "next/link"
import { Shield, Crown, Star, MessageCircle } from "lucide-react"

interface AdminMember {
  name: string
  role: string
  avatar: string
  roleColor: string
  roleIcon: React.ReactNode
  description: string
  discord?: string
}

const adminTeam: AdminMember[] = [
  {
    name: "skaut",
    role: "Właściciel",
    avatar: "skaut",
    roleColor: "text-red-500",
    roleIcon: <Crown className="h-4 w-4" />,
    description: "Założyciel i główny administrator serwera",
    discord: "skauttoja",
  },
  {
    name: "AdminPL",
    role: "Administrator",
    avatar: "AdminPL",
    roleColor: "text-purple-500",
    roleIcon: <Shield className="h-4 w-4" />,
    description: "Główny administrator, zarządza serwerem",
    discord: "adminpl",
  },
  {
    name: "ModeratorXYZ",
    role: "Moderator",
    avatar: "ModeratorXYZ",
    roleColor: "text-blue-500",
    roleIcon: <Star className="h-4 w-4" />,
    description: "Moderator czatu i eventów",
    discord: "moderatorxyz",
  },
  {
    name: "HelperABC",
    role: "Helper",
    avatar: "HelperABC",
    roleColor: "text-green-500",
    roleIcon: <Star className="h-4 w-4" />,
    description: "Pomaga nowym graczom",
    discord: "helperabc",
  },
  {
    name: "ModeratorDEF",
    role: "Moderator",
    avatar: "ModeratorDEF",
    roleColor: "text-blue-500",
    roleIcon: <Star className="h-4 w-4" />,
    description: "Moderator forum i Discord",
    discord: "moderatordef",
  },
  {
    name: "HelperGHI",
    role: "Helper",
    avatar: "HelperGHI",
    roleColor: "text-green-500",
    roleIcon: <Star className="h-4 w-4" />,
    description: "Wspiera społeczność",
    discord: "helperghi",
  },
  {
    name: "BuilderJKL",
    role: "Builder",
    avatar: "BuilderJKL",
    roleColor: "text-orange-500",
    roleIcon: <Star className="h-4 w-4" />,
    description: "Kreuje niesamowite budowle",
    discord: "builderjkl",
  },
  {
    name: "EventMaster",
    role: "Event Manager",
    avatar: "EventMaster",
    roleColor: "text-pink-500",
    roleIcon: <Star className="h-4 w-4" />,
    description: "Organizuje eventy i konkursy",
    discord: "eventmaster",
  },
]

export default function AdminTeam() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const containerRef = useRef<HTMLDivElement>(null)
  const maxVisible = 4
  const totalPages = Math.ceil(adminTeam.length / maxVisible)
  const currentPage = Math.floor(currentIndex / maxVisible) + 1
  const visibleAdmins = adminTeam.slice(currentIndex, currentIndex + maxVisible)

const goToPage = (pageIndex: number) => {
    const newIndex = pageIndex * maxVisible
    if (newIndex >= 0 && newIndex < adminTeam.length) {
      setCurrentIndex(newIndex)
    }
  }

const handleWheel = (e: React.WheelEvent) => {
    e.preventDefault()

if (e.deltaY > 0) {
      // Scroll down - next page
      const nextPage = currentPage
      if (nextPage < totalPages) {
        goToPage(nextPage)
      }
    } else {
      // Scroll up - previous page
      const prevPage = currentPage - 2
      if (prevPage >= 0) {
        goToPage(prevPage)
      }
    }
  }

// Touch support for mobile
  const [touchStart, setTouchStart] = useState<number | null>(null)
  const [touchEnd, setTouchEnd] = useState<number | null>(null)

const handleTouchStart = (e: React.TouchEvent) => {
    setTouchEnd(null)
    setTouchStart(e.targetTouches[0].clientY)
  }

const handleTouchMove = (e: React.TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientY)
  }

const handleTouchEnd = () => {
    if (!touchStart || !touchEnd) return

const distance = touchStart - touchEnd
    const isUpSwipe = distance > 50
    const isDownSwipe = distance < -50

if (isUpSwipe) {
      // Swipe up - next page
      const nextPage = currentPage
      if (nextPage < totalPages) {
        goToPage(nextPage)
      }
    }

if (isDownSwipe) {
      // Swipe down - previous page
      const prevPage = currentPage - 2
      if (prevPage >= 0) {
        goToPage(prevPage)
      }
    }
  }

return (
    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
      <div className="text-center mb-8">
        <div className="flex items-center justify-center mb-6">
          <div className="bg-red-100 dark:bg-red-900/30 p-2 rounded-lg mr-3">
            <Shield className="h-6 w-6 text-red-600 dark:text-red-400" />
          </div>
          <h3 className="text-2xl font-bold text-gray-800 dark:text-gray-200">Administracja</h3>
        </div>
        <div className="w-32 h-1 bg-gradient-to-r from-yellow-500 to-amber-600 mx-auto rounded-full"></div>
      </div>

{/* Admin Cards Container */}
      <div
        ref={containerRef}
        className="relative cursor-grab active:cursor-grabbing select-none"
        onWheel={handleWheel}
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
      >
        {/* Scroll Hint */}
        {adminTeam.length > maxVisible && (
          <div className="absolute top-0 right-0 z-10 bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 text-xs px-2 py-1 rounded-lg">
            🖱️ Przewiń myszką
          </div>
        )}

{/* Admin Cards */}
        <div className="overflow-hidden">
          <div className="space-y-4 transition-all duration-500 ease-in-out">
            {visibleAdmins.map((admin, index) => (
              <div
                key={currentIndex + index}
                className="bg-gray-50 dark:bg-gray-700 rounded-xl p-4 border border-gray-200 dark:border-gray-600 transition-all duration-300 hover:shadow-md hover:scale-[1.02] hover:border-yellow-300 dark:hover:border-yellow-600 transform"
                style={{
                  animation: `slideIn 0.5s ease-out ${index * 0.1}s both`,
                }}
              >
                <div className="flex items-center">
                  <div className="relative">
                    <Image
                      src={`https://mc-heads.net/avatar/${admin.avatar}/64`}
                      alt={admin.name}
                      width={48}
                      height={48}
                      className="rounded-lg shadow-md"
                    />
                    <div
                      className={`absolute -bottom-1 -right-1 ${admin.roleColor} bg-white dark:bg-gray-800 rounded-full p-1 shadow-sm`}
                    >
                      {admin.roleIcon}
                    </div>
                  </div>

<div className="ml-4 flex-1">
                    <div className="flex items-center">
                      <h4 className="font-semibold text-gray-800 dark:text-gray-200">{admin.name}</h4>
                      <span className={`ml-2 ${admin.roleColor} text-sm font-medium`}>{admin.role}</span>
                    </div>
                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{admin.description}</p>

{admin.discord && (
                      <div className="flex items-center mt-2">
                        <MessageCircle className="h-3 w-3 text-gray-400 mr-1" />
                        <span className="text-xs text-gray-500 dark:text-gray-400">@{admin.discord}</span>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

{/* Page Indicators - Dots */}
        {adminTeam.length > maxVisible && totalPages > 1 && (
          <div className="flex justify-center mt-6 space-x-3">
            {Array.from({ length: totalPages }, (_, i) => (
              <button
                key={i}
                onClick={() => goToPage(i)}
                className={`transition-all duration-300 rounded-full ${
                  currentPage === i + 1
                    ? "bg-yellow-500 w-8 h-3 shadow-lg"
                    : "bg-gray-300 dark:bg-gray-600 hover:bg-yellow-300 dark:hover:bg-yellow-600 w-3 h-3 hover:scale-125"
                }`}
                title={`Strona ${i + 1}`}
              />
            ))}
          </div>
        )}

{/* Page Counter */}
        {adminTeam.length > maxVisible && (
          <div className="text-center mt-4">
            <span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-3 py-1 rounded-full">
              Strona {currentPage} z {totalPages} • {adminTeam.length} administratorów
            </span>
          </div>
        )}
      </div>

<div className="mt-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
        <h4 className="font-semibold text-yellow-800 dark:text-yellow-300 mb-2">Potrzebujesz pomocy?</h4>
        <p className="text-sm text-yellow-700 dark:text-yellow-400 mb-3">
          Nasz zespół administracji jest dostępny 24/7 na Discord. Nie wahaj się skontaktować!
        </p>
        <Link
          href="https://discord.gg/dingomc"
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center bg-yellow-500 hover:bg-yellow-600 text-white text-sm font-medium py-2 px-4 rounded-lg transition-colors"
        >
          <MessageCircle className="h-4 w-4 mr-2" />
          Kontakt na Discord
        </Link>
      </div>

import { useState, useEffect } from "react"
import Link from "next/link"
import { MessageCircle, Users, Calendar, ExternalLink } from "lucide-react"
import { FaDiscord, FaTiktok } from "react-icons/fa"

const socialLinks = [
  {
    name: "Discord",
    icon: <FaDiscord className="h-6 w-6" />,
    url: "https://discord.gg/dingomc",
    color: "bg-indigo-500 hover:bg-indigo-600",
    members: "2,500+",
    description: "Dołącz do naszej społeczności",
  },
  {
    name: "TikTok",
    icon: <FaTiktok className="h-6 w-6" />,
    url: "https://tiktok.com/@dingomc",
    color: "bg-black hover:bg-gray-800",
    members: "800+",
    description: "Krótkie filmiki z serwera",
  },
]

const events = [
  {
    title: "Turniej PvP",
    date: "15 Luty 2024",
    time: "18:00",
    prize: "500 PLN",
  },
  {
    title: "Event Budowlany",
    date: "22 Luty 2024",
    time: "16:00",
    prize: "300 PLN",
  },
  {
    title: "Konkurs na Skin",
    date: "1 Marzec 2024",
    time: "20:00",
    prize: "200 PLN",
  },
]

export default function SocialMedia() {
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Simulate loading time
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 1500)

return () => clearTimeout(timer)
  }, [])

if (isLoading) {
    return (
      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
        <div className="animate-pulse">
          {/* Header Skeleton */}
          <div className="text-center mb-8">
            <div className="flex items-center justify-center mb-6">
              <div className="bg-gray-200 dark:bg-gray-700 p-2 rounded-lg mr-3 w-10 h-10"></div>
              <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-32"></div>
            </div>
            <div className="w-32 h-1 bg-gray-200 dark:bg-gray-700 mx-auto rounded-full"></div>
          </div>

{/* Social Links Skeleton */}
          <div className="grid grid-cols-2 gap-4 mb-8">
            {[1, 2].map((i) => (
              <div
                key={i}
                className="bg-gray-200 dark:bg-gray-700 rounded-xl p-4 h-24"
                style={{ animationDelay: `${i * 0.1}s` }}
              ></div>
            ))}
          </div>

{/* Events Skeleton */}
          <div className="border-t border-gray-200 dark:border-gray-700 pt-6">
            <div className="flex items-center mb-4">
              <div className="w-5 h-5 bg-gray-200 dark:bg-gray-700 rounded mr-2"></div>
              <div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-40"></div>
            </div>

<div className="mt-4 h-10 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
      <div className="text-center mb-8">
        <div className="flex items-center justify-center mb-6 animate-fadeIn">
          <div className="bg-blue-100 dark:bg-blue-900/30 p-2 rounded-lg mr-3">
            <Users className="h-6 w-6 text-blue-600 dark:text-blue-400" />
          </div>
          <h3 className="text-2xl font-bold text-gray-800 dark:text-gray-200">Społeczność</h3>
        </div>
        <div className="w-32 h-1 bg-gradient-to-r from-yellow-500 to-amber-600 mx-auto rounded-full animate-slideIn"></div>
      </div>

{/* Social Media Links */}
      <div className="grid grid-cols-2 gap-4 mb-8">
        {socialLinks.map((social, index) => (
          <Link
            key={social.name}
            href={social.url}
            target="_blank"
            rel="noopener noreferrer"
            className={`${social.color} text-white p-4 rounded-xl transition-all duration-300 transform hover:scale-105 group animate-slideInUp`}
            style={{ animationDelay: `${index * 0.2}s` }}
          >
            <div className="flex items-center justify-between">
              <div>
                <div className="flex items-center mb-2">
                  {social.icon}
                  <span className="ml-2 font-semibold">{social.name}</span>
                </div>
                <p className="text-sm opacity-90">{social.description}</p>
                <p className="text-xs opacity-75 mt-1">{social.members} członków</p>
              </div>
              <ExternalLink className="h-4 w-4 opacity-75 group-hover:opacity-100 transition-opacity" />
            </div>
          </Link>
        ))}
      </div>

{/* Upcoming Events */}
      <div className="border-t border-gray-200 dark:border-gray-700 pt-6">
        <div className="flex items-center mb-4 animate-fadeIn" style={{ animationDelay: "0.4s" }}>
          <Calendar className="h-5 w-5 text-yellow-500 mr-2" />
          <h4 className="text-lg font-semibold text-gray-800 dark:text-gray-200">Nadchodzące eventy</h4>
        </div>

<div className="space-y-3">
          {events.map((event, index) => (
            <div
              key={index}
              className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600 animate-slideInUp"
              style={{ animationDelay: `${0.6 + index * 0.1}s` }}
            >
              <div className="flex justify-between items-start">
                <div>
                  <h5 className="font-semibold text-gray-800 dark:text-gray-200">{event.title}</h5>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    {event.date} • {event.time}
                  </p>
                </div>
                <div className="text-right">
                  <span className="bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 text-xs font-medium px-2 py-1 rounded-full">
                    {event.prize}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>

<Link
          href="https://discord.gg/dingomc"
          target="_blank"
          rel="noopener noreferrer"
          className="mt-4 w-full bg-yellow-500 hover:bg-yellow-600 text-white font-medium py-2 px-4 rounded-lg transition-colors flex items-center justify-center animate-slideInUp"
          style={{ animationDelay: "0.9s" }}
        >
          <MessageCircle className="h-4 w-4 mr-2" />
          Dołącz na Discord
        </Link>
      </div>

import { useState, useEffect } from "react"
import Link from "next/link"
import Image from "next/image"
import { ArrowRight, Star, Sparkles } from "lucide-react"

interface Package {
  id: string
  amount: number
  popular?: boolean
  bonus?: number
  description: string
  coinImage: string
}

const packages: Package[] = [
  {
    id: "5pln",
    amount: 5,
    description: "Starter",
    coinImage:
      "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile320-110x93.png",
  },
  {
    id: "10pln",
    amount: 10,
    description: "Podstawowy",
    coinImage:
      "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile320-110x93.png",
  },
  {
    id: "20pln",
    amount: 20,
    popular: true,
    description: "Popularny",
    coinImage:
      "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile960-110x93.png",
  },
  {
    id: "50pln",
    amount: 50,
    bonus: 5,
    description: "Premium",
    coinImage:
      "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile1600-110x93.png",
  },
  {
    id: "100pln",
    amount: 100,
    bonus: 15,
    description: "VIP",
    coinImage:
      "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile3200-110x93.png",
  },
  {
    id: "200pln",
    amount: 200,
    bonus: 40,
    description: "Ultimate",
    coinImage:
      "https://www.minecraft.net/content/dam/minecraftnet/franchise/component-library/productHeroA/MinecoinPile8000-110x93.png",
  },
]

export default function PackageCards() {
  const [hoveredPackage, setHoveredPackage] = useState<string | null>(null)
  const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
    // Simulate loading time
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 2000)

return () => clearTimeout(timer)
  }, [])

if (isLoading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {Array.from({ length: 6 }, (_, i) => (
          <div
            key={i}
            className="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-6 animate-pulse"
            style={{ animationDelay: `${i * 0.1}s` }}
          >
            {/* Header Skeleton */}
            <div className="text-center mb-6">
              <div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-20 mx-auto mb-2"></div>
              <div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-16 mx-auto mb-2"></div>
              <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mx-auto"></div>
            </div>

{/* Coin Skeleton */}
            <div className="flex justify-center mb-6">
              <div className="w-20 h-16 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
            </div>

{/* Button Skeleton */}
            <div className="h-12 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
          </div>
        ))}
      </div>
    )
  }

return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {packages.map((pkg, index) => (
        <div
          key={pkg.id}
          className={`relative bg-white dark:bg-gray-800 rounded-xl shadow-lg border-2 transition-all duration-300 transform hover:scale-105 hover:shadow-xl animate-slideInUp ${
            pkg.popular
              ? "border-yellow-400 ring-2 ring-yellow-400 ring-opacity-30"
              : "border-gray-200 dark:border-gray-700 hover:border-yellow-300"
          }`}
          style={{ animationDelay: `${index * 0.15}s` }}
          onMouseEnter={() => setHoveredPackage(pkg.id)}
          onMouseLeave={() => setHoveredPackage(null)}
        >
          {/* Popular Badge */}
          {pkg.popular && (
            <div className="absolute -top-3 left-1/2 transform -translate-x-1/2 z-10 animate-bounce">
              <div className="bg-gradient-to-r from-yellow-400 to-orange-500 text-white text-xs font-bold px-4 py-1 rounded-full shadow-lg flex items-center">
                <Star className="h-3 w-3 mr-1" />
                NAJPOPULARNIEJSZY
              </div>
            </div>
          )}

{/* Bonus Badge */}
          {pkg.bonus && (
            <div className="absolute top-4 right-4 z-10 animate-pulse">
              <div className="bg-gradient-to-r from-green-400 to-green-600 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg flex items-center">
                <Sparkles className="h-3 w-3 mr-1" />+{pkg.bonus} PLN
              </div>
            </div>
          )}

<div className="p-6">
            {/* Header */}
            <div className="text-center mb-6">
              <h3 className="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">{pkg.description}</h3>
              <div className="flex items-baseline justify-center">
                <span className="text-3xl font-bold text-gray-900 dark:text-gray-100">{pkg.amount}</span>
                <span className="text-lg text-gray-600 dark:text-gray-400 ml-1">PLN</span>
              </div>
              {pkg.bonus && (
                <div className="text-sm text-green-600 dark:text-green-400 font-medium mt-1">
                  Łącznie: {pkg.amount + pkg.bonus} PLN
                </div>
              )}
            </div>

{/* Coin visualization */}
            <div className="flex justify-center mb-6">
              <div className="relative">
                <Image
                  src={pkg.coinImage || "/placeholder.svg"}
                  alt="Minecraft Coins"
                  width={90}
                  height={76}
                  className="object-contain drop-shadow-md transition-transform duration-300 hover:scale-110"
                />
                {hoveredPackage === pkg.id && (
                  <div className="absolute inset-0 bg-yellow-400 opacity-20 rounded-lg animate-pulse"></div>
                )}
              </div>
            </div>

{/* Buy Button */}
            <Link
              href={`/sklep?amount=${pkg.amount}`}
              className={`w-full bg-gradient-to-r from-yellow-400 to-orange-500 hover:from-yellow-500 hover:to-orange-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 flex items-center justify-center group shadow-lg ${
                hoveredPackage === pkg.id ? "shadow-xl" : ""
              }`}
            >
              Doładuj teraz
              <ArrowRight
                className={`ml-2 h-4 w-4 transition-transform duration-300 ${
                  hoveredPackage === pkg.id ? "translate-x-1" : ""
                }`}
              />
            </Link>
          </div>
        </div>
      ))}

import { useState, useRef, useEffect } from "react"
import Image from "next/image"
import { ChevronLeft, ChevronRight, ShoppingBag } from "lucide-react"

interface Purchase {
  _id: string
  nickname: string
  amount: number
  createdAt: string
}

export default function RecentPurchases() {
  const scrollRef = useRef<HTMLDivElement>(null)
  const [canScrollLeft, setCanScrollLeft] = useState(false)
  const [canScrollRight, setCanScrollRight] = useState(true)
  const [purchases, setPurchases] = useState<Purchase[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchRecentPurchases = async () => {
      try {
        setIsLoading(true)
        const response = await fetch(`${process.env.NEXT_PUBLIC_API_DOMAIN}/v1/purchases/recent`)

if (!response.ok) {
          throw new Error(`Failed to fetch recent purchases: ${response.status}`)
        }

const data = await response.json()
        setPurchases(data)
      } catch (err) {
        console.error("Error fetching recent purchases:", err)
        setError(err instanceof Error ? err.message : "Failed to load recent purchases")
      } finally {
        setIsLoading(false)
      }
    }

fetchRecentPurchases()
  }, [])

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("pl-PL", {
      hour: "2-digit",
      minute: "2-digit",
    }).format(date)
  }

const checkScrollButtons = () => {
    if (scrollRef.current) {
      setCanScrollLeft(scrollRef.current.scrollLeft > 0)
      setCanScrollRight(
        scrollRef.current.scrollLeft < scrollRef.current.scrollWidth - scrollRef.current.clientWidth - 10,
      )
    }
  }

useEffect(() => {
    const scrollElement = scrollRef.current
    if (scrollElement) {
      const handleScroll = () => checkScrollButtons()
      scrollElement.addEventListener("scroll", handleScroll)
      checkScrollButtons()
      return () => {
        scrollElement.removeEventListener("scroll", handleScroll)
      }
    }
  }, [purchases])

const scroll = (direction: "left" | "right") => {
    if (scrollRef.current) {
      const scrollAmount = 200
      scrollRef.current.scrollBy({
        left: direction === "left" ? -scrollAmount : scrollAmount,
        behavior: "smooth",
      })
    }
  }

return (
    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-700 p-6">
      <div className="text-center mb-8">
        <div className="flex items-center justify-center mb-6 animate-fadeIn">
          <div className="bg-green-100 dark:bg-green-900/30 p-2 rounded-lg mr-3">
            <ShoppingBag className="h-5 w-5 text-green-600 dark:text-green-400" />
          </div>
          <h3 className="text-2xl font-bold text-gray-800 dark:text-gray-200">Ostatnie zakupy</h3>
        </div>
        <div className="w-32 h-1 bg-gradient-to-r from-yellow-500 to-amber-600 mx-auto rounded-full animate-slideIn"></div>
      </div>

{isLoading ? (
        <div className="relative">
          {/* Loading Skeleton */}
          <div className="flex space-x-4 px-8 overflow-hidden">
            {Array.from({ length: 5 }, (_, i) => (
              <div
                key={i}
                className="flex flex-col items-center bg-gray-100 dark:bg-gray-700 p-4 rounded-xl min-w-[140px] animate-pulse"
                style={{ animationDelay: `${i * 0.1}s` }}
              >
                <div className="w-16 h-16 bg-gray-200 dark:bg-gray-600 rounded-lg mb-3"></div>
                <div className="h-4 bg-gray-200 dark:bg-gray-600 rounded w-20 mb-1"></div>
                <div className="h-4 bg-gray-200 dark:bg-gray-600 rounded w-16 mb-1"></div>
                <div className="h-3 bg-gray-200 dark:bg-gray-600 rounded w-12"></div>
              </div>
            ))}
          </div>

{/* Loading Animation */}
          <div className="flex justify-center items-center mt-6">
            <div className="flex space-x-1">
              <div className="w-2 h-2 bg-yellow-500 rounded-full animate-bounce"></div>
              <div
                className="w-2 h-2 bg-yellow-500 rounded-full animate-bounce"
                style={{ animationDelay: "0.1s" }}
              ></div>
              <div
                className="w-2 h-2 bg-yellow-500 rounded-full animate-bounce"
                style={{ animationDelay: "0.2s" }}
              ></div>
            </div>
            <span className="ml-3 text-gray-600 dark:text-gray-400 text-sm animate-pulse">Ładowanie zakupów...</span>
          </div>
        </div>
      ) : error ? (
        <div className="text-center py-8 animate-fadeIn">
          <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-6">
            <div className="text-red-500 dark:text-red-400 mb-2">⚠️</div>
            <p className="text-sm text-red-600 dark:text-red-400 mb-3">{error}</p>
            <button
              onClick={() => window.location.reload()}
              className="px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg text-sm font-medium transition-colors transform hover:scale-105"
            >
              Spróbuj ponownie
            </button>
          </div>
        </div>
      ) : purchases.length === 0 ? (
        <div className="text-center py-8 animate-fadeIn">
          <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-6">
            <div className="text-gray-400 text-4xl mb-2">🛒</div>
            <p className="text-gray-600 dark:text-gray-400">Brak ostatnich zakupów</p>
          </div>
        </div>
      ) : (
        <div className="relative">
          {/* Scroll buttons */}
          <button
            onClick={() => scroll("left")}
            disabled={!canScrollLeft}
            className={`absolute left-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-700 rounded-full p-2 shadow-lg border border-gray-200 dark:border-gray-600 transition-all duration-300 ${
              canScrollLeft ? "opacity-100 hover:bg-gray-50 dark:hover:bg-gray-600 hover:scale-110" : "opacity-0"
            }`}
            aria-label="Scroll left"
          >
            <ChevronLeft className="h-4 w-4 text-gray-600 dark:text-gray-300" />
          </button>

<button
            onClick={() => scroll("right")}
            disabled={!canScrollRight}
            className={`absolute right-0 top-1/2 -translate-y-1/2 z-10 bg-white dark:bg-gray-700 rounded-full p-2 shadow-lg border border-gray-200 dark:border-gray-600 transition-all duration-300 ${
              canScrollRight ? "opacity-100 hover:bg-gray-50 dark:hover:bg-gray-600 hover:scale-110" : "opacity-0"
            }`}
            aria-label="Scroll right"
          >
            <ChevronRight className="h-4 w-4 text-gray-600 dark:text-gray-300" />
          </button>

{/* Scrollable container */}
          <div ref={scrollRef} className="overflow-x-auto pb-2 hide-scrollbar" style={{ scrollbarWidth: "none" }}>
            <div className="flex flex-row space-x-4 min-w-max px-8">
              {purchases.map((purchase, index) => (
                <div
                  key={purchase._id}
                  className="flex flex-col items-center bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 p-4 rounded-xl shadow-sm border border-gray-200 dark:border-gray-600 min-w-[140px] transition-all duration-300 hover:scale-105 hover:shadow-md animate-slideInUp"
                  style={{ animationDelay: `${index * 0.1}s` }}
                >
                  <div className="relative mb-3">
                    <Image
                      src={`https://mc-heads.net/avatar/${purchase.nickname}/64`}
                      alt={purchase.nickname}
                      width={64}
                      height={64}
                      className="rounded-lg shadow-md transition-transform duration-300 hover:scale-110"
                    />
                    <div className="absolute -bottom-2 -right-2 bg-yellow-400 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg animate-bounce">
                      {purchase.amount}
                    </div>
                  </div>
                  <span className="font-semibold text-gray-800 dark:text-gray-200 text-center text-sm truncate w-full mb-1">
                    {purchase.nickname}
                  </span>
                  <span className="text-yellow-600 dark:text-yellow-400 font-bold text-sm">{purchase.amount} PLN</span>
                  <span className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    {formatDate(purchase.createdAt)}
                  </span>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

<div className="text-center text-sm text-gray-600 dark:text-gray-400 mt-8 pt-4 border-t border-gray-200 dark:border-gray-700"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/regulamin-sklepu/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Navbar from "@/components/navbar"
import Footer from "@/components/footer"
import { Scroll, Shield, CreditCard, AlertTriangle, CheckCircle, Info, Users, FileText } from "lucide-react"

export default function RegulaminSklepu() {
  const sections = [
    {
      title: "Definicje",
      icon: FileText,
      color: "blue",
      content: [
        "Użytkownik - Osoba korzystająca z serwisu DingoMC.PL, która może zakupić dodatkowe usługi premium, uzyskując dodatkowe przedmioty oraz rangi w grze.",
        "Kupujący - Osoba, która dokonała płatności za usługę w sklepie DingoMC.PL i automatycznie otrzymuje zakupione przedmioty, rangi lub inne usługi wirtualne.",
        "Usługa - Wirtualne przedmioty, rangi, funkcje lub inne dodatki dostępne wyłącznie w grze na serwerze DingoMC.PL.",
        "Sklep - System płatności i zakupów dostępny na stronie DingoMC.PL umożliwiający nabycie usług premium.",
        "Serwer - Serwer gry Minecraft dostępny pod adresem dingomc.pl, będący własnością operatora serwisu.",
      ],
    },
    {
      title: "Postanowienia ogólne",
      icon: Scroll,
      color: "purple",
      content: [
        "Serwer DingoMC.PL w żaden sposób nie jest powiązany z firmą Mojang AB ani Microsoft Corporation.",
        "Niniejszy regulamin sklepu może ulec zmianie w każdej chwili bez potrzeby wcześniejszego informowania użytkowników.",
        "Usługi oferowane w sklepie są przedmiotami wirtualnymi dostępnymi jedynie w formie elektronicznej na serwerze DingoMC.PL.",
        "Wszystkie produkty mają określony czas trwania - produkty 'na edycję' obowiązują przez jeden sezon danego trybu, produkty 'na zawsze' przez wszystkie edycje trybu do czasu zakończenia jego istnienia.",
        "Korzystanie ze sklepu oznacza pełną akceptację niniejszego regulaminu.",
        "Operator serwisu prowadzi działalność nierejestrowaną zgodnie z obowiązującymi przepisami prawa.",
      ],
    },
    {
      title: "Płatności i zakupy",
      icon: CreditCard,
      color: "green",
      content: [
        "Dostępne formy płatności to: przelewy bankowe, BLIK, PayPal, karty płatnicze (Stripe), płatności SMS (PayByLink).",
        "Wszelkie usługi są własnością serwera DingoMC.PL, a użytkownik otrzymuje jedynie prawo dostępu do nich.",
        "DingoMC.PL nie ponosi odpowiedzialności za błędnie wprowadzone dane przez użytkownika podczas procesu zakupu.",
        "Po zakupie wybranej usługi system automatycznie nadaje ją kupującemu w ciągu maksymalnie 15 minut.",
        "Ceny usług mogą się różnić w zależności od wybranego sposobu płatności ze względu na prowizje operatorów płatności.",
        "Zakupione usługi po dostarczeniu nie podlegają zwrotowi, chyba że przepisy prawa stanowią inaczej.",
        "Wszystkie płatności są przetwarzane przez bezpieczne systemy płatności: Stripe oraz PayByLink.",
        "Użytkownik zobowiązuje się do podania prawdziwych danych podczas procesu zakupu.",
      ],
    },
    {
      title: "Dostarczanie usług",
      icon: Shield,
      color: "yellow",
      content: [
        "Usługi są dostarczane automatycznie po potwierdzeniu płatności przez system płatności.",
        "W przypadku problemów technicznych dostarczenie może zostać opóźnione do maksymalnie 24 godzin.",
        "Użytkownik musi być online na serwerze lub posiadać aktywne konto, aby otrzymać zakupione usługi.",
        "Administracja zastrzega sobie prawo do weryfikacji tożsamości kupującego w przypadku podejrzenia oszustwa.",
        "Zakupione rangi i przedmioty są przypisane do konkretnego nicku gracza i nie podlegają transferowi.",
        "W przypadku zmiany nicku użytkownik może zgłosić się do administracji w celu przeniesienia usług.",
        "Usługi czasowe liczą swój czas od momentu pierwszego zalogowania się na serwer po zakupie.",
      ],
    },
    {
      title: "Reklamacje i zwroty",
      icon: AlertTriangle,
      color: "red",
      content: [
        "Reklamacje można składać wyłącznie na adres email: kontakt@dingomc.pl w terminie 14 dni od zakupu.",
        "Reklamacja musi zawierać: nick gracza, datę zakupu, opis problemu oraz dowód płatności.",
        "Zwroty są możliwe jedynie w przypadku niewykonania usługi z przyczyn technicznych po stronie serwera.",
        "Nie podlegają zwrotowi usługi już wykorzystane lub częściowo wykorzystane przez gracza.",
        "W przypadku płatności SMS reklamacje należy składać zgodnie z regulaminem PayByLink: https://paybylink.pl/customer/complaint/",
        "Czas rozpatrzenia reklamacji wynosi do 14 dni roboczych od daty otrzymania.",
        "Decyzja administracji w sprawie reklamacji jest ostateczna.",
        "Zwroty są realizowane na ten sam sposób płatności, którym dokonano zakupu.",
      ],
    },
    {
      title: "Odpowiedzialność i ograniczenia",
      icon: Info,
      color: "gray",
      content: [
        "Administracja nie ponosi odpowiedzialności za utratę przedmiotów zakupionych za środki z konta w wyniku działań gracza.",
        "Serwer nie gwarantuje ciągłości działania - mogą wystąpić przerwy techniczne, aktualizacje lub restart.",
        "Zabrania się odsprzedaży lub wymiany przedmiotów z gry za realne pieniądze między graczami.",
        "Użytkownik ponosi pełną odpowiedzialność za bezpieczeństwo swojego konta i hasła.",
        "W przypadku naruszenia regulaminu serwera administracja może odebrać zakupione usługi bez zwrotu kosztów.",
        "Administracja zastrzega sobie prawo do zmiany mechaniki gry, co może wpłynąć na działanie zakupionych usług.",
        "Maksymalna odpowiedzialność serwera ogranicza się do wartości zakupionych usług.",
      ],
    },
    {
      title: "Postanowienia końcowe",
      icon: CheckCircle,
      color: "indigo",
      content: [
        "W sprawach nieuregulowanych niniejszym regulaminem zastosowanie mają przepisy Kodeksu Cywilnego.",
        "Wszelkie spory będą rozstrzygane przez sąd właściwy dla siedziby operatora serwisu.",
        "Regulamin wchodzi w życie z dniem publikacji na stronie internetowej serwera.",
        "Kontakt z administracją w sprawach sklepu: kontakt@dingomc.pl",
        "Operator zastrzega sobie prawo do interpretacji postanowień niniejszego regulaminu.",
        "Klauzula o nieważności - w przypadku uznania któregokolwiek postanowienia za nieważne, pozostałe zachowują moc.",
        "Regulamin dostępny jest na stronie internetowej serwera przez całą dobę.",
      ],
    },
  ]

const getColorClasses = (color: string) => {
    const colors = {
      blue: {
        bg: "bg-blue-500",
        text: "text-blue-600",
        lightBg: "bg-blue-50 dark:bg-blue-900/20",
        border: "border-blue-200 dark:border-blue-800",
      },
      green: {
        bg: "bg-green-500",
        text: "text-green-600",
        lightBg: "bg-green-50 dark:bg-green-900/20",
        border: "border-green-200 dark:border-green-800",
      },
      purple: {
        bg: "bg-purple-500",
        text: "text-purple-600",
        lightBg: "bg-purple-50 dark:bg-purple-900/20",
        border: "border-purple-200 dark:border-purple-800",
      },
      yellow: {
        bg: "bg-yellow-500",
        text: "text-yellow-600",
        lightBg: "bg-yellow-50 dark:bg-yellow-900/20",
        border: "border-yellow-200 dark:border-yellow-800",
      },
      red: {
        bg: "bg-red-500",
        text: "text-red-600",
        lightBg: "bg-red-50 dark:bg-red-900/20",
        border: "border-red-200 dark:border-red-800",
      },
      gray: {
        bg: "bg-gray-500",
        text: "text-gray-600",
        lightBg: "bg-gray-50 dark:bg-gray-900/20",
        border: "border-gray-200 dark:border-gray-800",
      },
      indigo: {
        bg: "bg-indigo-500",
        text: "text-indigo-600",
        lightBg: "bg-indigo-50 dark:bg-indigo-900/20",
        border: "border-indigo-200 dark:border-indigo-800",
      },
    }
    return colors[color as keyof typeof colors] || colors.gray
  }

return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200">
      {/* Background texture */}
      <div
        className="fixed inset-0 z-0 opacity-5 dark:opacity-10"
        style={{
          backgroundImage: "url('/stone-pattern.png')",
          backgroundRepeat: "repeat",
          backgroundSize: "100px 100px",
        }}
      />

<main className="relative z-10 container mx-auto py-12 px-4">
        {/* Header */}
        <div className="text-center mb-12">
          <div className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full mb-6 shadow-lg">
            <CreditCard className="h-10 w-10 text-white" />
          </div>
          <h1 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-500 to-amber-600 dark:from-yellow-400 dark:to-amber-500 mb-4">
            Regulamin Sklepu DingoMC.PL
          </h1>
          <p className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
            Zapoznaj się z warunkami zakupu usług premium w naszym sklepie. Regulamin określa zasady płatności,
            dostarczania usług oraz procedury reklamacyjne.
          </p>
        </div>

{/* Important Notice */}
        <div className="mb-8 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-6">
          <div className="flex items-start">
            <div className="bg-yellow-100 dark:bg-yellow-900/30 p-2 rounded-lg mr-4 flex-shrink-0">
              <CheckCircle className="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-yellow-800 dark:text-yellow-300 mb-2">
                Ważne informacje o zakupach
              </h3>
              <p className="text-yellow-700 dark:text-yellow-400 text-sm leading-relaxed">
                Dokonując zakupu w sklepie DingoMC.PL automatycznie akceptujesz niniejszy regulamin. Wszystkie usługi są
                dostarczane automatycznie po potwierdzeniu płatności. Płatności są bezpieczne i szyfrowane.
              </p>
            </div>
          </div>
        </div>

{/* Payment Methods Notice */}
        <div className="mb-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6">
          <div className="flex items-start">
            <div className="bg-blue-100 dark:bg-blue-900/30 p-2 rounded-lg mr-4 flex-shrink-0">
              <CreditCard className="h-6 w-6 text-blue-600 dark:text-blue-400" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-blue-800 dark:text-blue-300 mb-2">Dostępne metody płatności</h3>
              <p className="text-blue-700 dark:text-blue-400 text-sm leading-relaxed mb-3">
                Akceptujemy różne formy płatności dla Twojej wygody:
              </p>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs">
                <span className="bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                  💳 Karty płatnicze
                </span>
                <span className="bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                  🏦 BLIK
                </span>
                <span className="bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                  💰 PayPal
                </span>
                <span className="bg-blue-100 dark:bg-blue-800 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
                  📱 SMS
                </span>
              </div>
            </div>
          </div>
        </div>

{/* Sections */}
        <div className="max-w-4xl mx-auto space-y-8">
          {sections.map((section, index) => {
            const colorClasses = getColorClasses(section.color)
            return (
              <div
                key={index}
                className={`bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border ${colorClasses.border} transition-all duration-300 hover:shadow-xl`}
              >
                {/* Section Header */}
                <div className={`${colorClasses.bg} p-6 text-white`}>
                  <div className="flex items-center">
                    <div className="bg-white bg-opacity-20 p-3 rounded-lg mr-4">
                      <section.icon className="h-6 w-6" />
                    </div>
                    <h2 className="text-2xl font-bold">{section.title}</h2>
                  </div>
                </div>

{/* Section Content */}
                <div className="p-6">
                  <ul className="space-y-3">
                    {section.content.map((item, itemIndex) => (
                      <li key={itemIndex} className="flex items-start text-gray-700 dark:text-gray-300">
                        <div className={`w-2 h-2 ${colorClasses.bg} rounded-full mt-2 mr-4 flex-shrink-0`}></div>
                        <span className="leading-relaxed">{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            )
          })}
        </div>

{/* Contact Section */}
        <div className="mt-12 bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-gray-800 dark:to-gray-900 border border-yellow-200 dark:border-gray-700 rounded-xl p-8 text-center">
          <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-yellow-500 to-orange-600 rounded-full mb-6 shadow-lg">
            <Users className="h-8 w-8 text-white" />
          </div>
          <h3 className="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Potrzebujesz pomocy z zakupami?</h3>
          <p className="text-gray-600 dark:text-gray-400 mb-6 max-w-2xl mx-auto">
            Jeśli masz pytania dotyczące zakupów, płatności lub potrzebujesz pomocy z reklamacją, skontaktuj się z
            naszym zespołem wsparcia.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <a
              href="mailto:kontakt@dingomc.pl"
              className="inline-flex items-center bg-yellow-500 hover:bg-yellow-600 text-white font-medium py-3 px-6 rounded-lg transition-colors shadow-lg"
            >
              <CreditCard className="h-5 w-5 mr-2" />
              kontakt@dingomc.pl
            </a>
            <a
              href="https://discord.gg/dingomc"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center bg-orange-500 hover:bg-orange-600 text-white font-medium py-3 px-6 rounded-lg transition-colors shadow-lg"
            >
              <Users className="h-5 w-5 mr-2" />
              Discord
            </a>
            <a
              href="/"
              className="inline-flex items-center bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-medium py-3 px-6 rounded-lg transition-colors"
            >
              Wróć do sklepu
            </a>
          </div>
        </div>

{/* Legal Notice */}
        <div className="mt-8 bg-gray-100 dark:bg-gray-800 rounded-lg p-6 text-center">
          <h4 className="font-semibold text-gray-800 dark:text-gray-200 mb-2">Informacje prawne</h4>
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
            Operator serwisu prowadzi działalność nierejestrowaną zgodnie z art. 5 ustawy o swobodzie działalności
            gospodarczej.
          </p>
          <p className="text-sm text-gray-600 dark:text-gray-400">
            Płatności SMS obsługuje: PayByLink | Płatności kartą obsługuje: Stripe
          </p>
        </div>

{/* Last Updated */}
        <div className="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
          <p>Ostatnia aktualizacja: {new Date().toLocaleDateString("pl-PL")}</p>
        </div>
      </main>