{"id":5474,"date":"2025-11-30T19:49:14","date_gmt":"2025-11-30T18:49:14","guid":{"rendered":"https:\/\/www.aviglianabasket.it\/?page_id=5474"},"modified":"2025-12-02T21:01:17","modified_gmt":"2025-12-02T20:01:17","slug":"impianti","status":"publish","type":"page","link":"https:\/\/www.aviglianabasket.it\/?page_id=5474","title":{"rendered":"IMPIANTI"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n \n \n \n SportSpace Manager<\/title>\n \n <!-- Tailwind CSS -->\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <!-- Fonts -->\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap\" rel=\"stylesheet\">\n \n <!-- React & Babel -->\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n \n <!-- Import Maps -->\n <script type=\"importmap\">\n{\n \"imports\": {\n \"react\": \"https:\/\/esm.sh\/react@18.2.0\",\n \"react-dom\/client\": \"https:\/\/esm.sh\/react-dom@18.2.0\/client\",\n \"firebase\/app\": \"https:\/\/www.gstatic.com\/firebasejs\/10.8.0\/firebase-app.js\",\n \"firebase\/firestore\": \"https:\/\/www.gstatic.com\/firebasejs\/10.8.0\/firebase-firestore.js\",\n \"react-dom\/\": \"https:\/\/aistudiocdn.com\/react-dom@^19.2.0\/\",\n \"react\/\": \"https:\/\/aistudiocdn.com\/react@^19.2.0\/\",\n \"firebase\/\": \"https:\/\/aistudiocdn.com\/firebase@^12.6.0\/\"\n }\n}\n<\/script>\n\n <script>\n tailwind.config = {\n theme: {\n extend: {\n fontFamily: {\n sans: ['Urbanist', 'sans-serif'],\n },\n colors: {\n sport: {\n green: '#00D16B',\n dark: '#050505',\n card: '#121212',\n border: '#27272a',\n text: '#e4e4e7',\n muted: '#a1a1aa'\n }\n },\n animation: {\n 'fade-in': 'fadeIn 0.3s ease-out',\n 'slide-up': 'slideUp 0.4s ease-out',\n },\n keyframes: {\n fadeIn: {\n '0%': { opacity: '0' },\n '100%': { opacity: '1' },\n },\n slideUp: {\n '0%': { transform: 'translateY(20px)', opacity: '0' },\n '100%': { transform: 'translateY(0)', opacity: '1' },\n }\n }\n }\n }\n }\n <\/script>\n \n <style>\n body {\n background-color: #050505;\n background-image: radial-gradient(circle at 50% 0%, #1a1a1a 0%, #050505 70%);\n color: #e4e4e7;\n font-family: 'Urbanist', sans-serif;\n \/* Allow body scroll for WordPress integration *\/\n }\n \n .glass-panel {\n background: rgba(18, 18, 18, 0.6);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.05);\n }\n\n .glass-card {\n background: rgba(24, 24, 27, 0.4);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border: 1px solid rgba(255, 255, 255, 0.03);\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);\n }\n\n \/* Custom scrollbar *\/\n ::-webkit-scrollbar { width: 6px; height: 6px; }\n ::-webkit-scrollbar-track { background: transparent; }\n ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 10px; }\n ::-webkit-scrollbar-thumb:hover { background: #00D16B; }\n \n input:-webkit-autofill,\n input:-webkit-autofill:hover, \n input:-webkit-autofill:focus, \n input:-webkit-autofill:active{\n -webkit-box-shadow: 0 0 0 30px #18181b inset !important;\n -webkit-text-fill-color: white !important;\n }\n <\/style>\n <\/head>\n <body>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\" data-presets=\"react,typescript\" data-type=\"module\">\n import React, { useState, useEffect, useMemo } from 'react';\n import ReactDOM from 'react-dom\/client';\n import { initializeApp } from \"firebase\/app\";\n import { \n getFirestore, collection, getDocs, addDoc, query, where, \n deleteDoc, doc, updateDoc, writeBatch \n } from \"firebase\/firestore\";\n\n \/\/ --- CONFIGURATION ---\n\n const firebaseConfig = {\n apiKey: \"AIzaSyD4S4BqT-D7e9-OQLg34GG4dSAoa4wbIdM\",\n authDomain: \"gestionale-6b228.firebaseapp.com\",\n projectId: \"gestionale-6b228\",\n storageBucket: \"gestionale-6b228.firebasestorage.app\",\n messagingSenderId: \"147433083022\",\n appId: \"1:147433083022:web:8a5ba01722e5cf138679df\",\n measurementId: \"G-QCNH36H4YW\"\n };\n\n const BookingType = {\n INTERNAL: 'internal',\n EXTERNAL: 'external'\n };\n\n \/\/ --- FIREBASE SERVICE ---\n\n const app = initializeApp(firebaseConfig);\n const db = getFirestore(app);\n\n \/\/ Helper for batching\n const commitBatchChunks = async (items, operation) => {\n if (items.length === 0) return;\n for (let i = 0; i < items.length; i += 500) {\n const chunk = items.slice(i, i + 500);\n const batch = writeBatch(db);\n chunk.forEach(item => operation(batch, item));\n await batch.commit();\n }\n };\n\n const getFacilities = async () => {\n const q = query(collection(db, \"facilities\"));\n const snap = await getDocs(q);\n return snap.docs.map(d => {\n const data = d.data();\n return { \n id: d.id, \n ...data,\n sports: data.sports || (data.sport ? [data.sport] : []) \n };\n });\n };\n\n const addFacility = async (facility) => {\n await addDoc(collection(db, \"facilities\"), facility);\n };\n\n const updateFacility = async (id, facility) => {\n const ref = doc(db, \"facilities\", id);\n await updateDoc(ref, facility);\n };\n\n const deleteFacility = async (id) => {\n await deleteDoc(doc(db, \"facilities\", id));\n };\n\n const getBookings = async (startDate, endDate) => {\n const q = query(\n collection(db, \"bookings\"),\n where(\"start\", \">=\", startDate),\n where(\"start\", \"<=\", endDate)\n );\n const snap = await getDocs(q);\n return snap.docs.map(d => ({ id: d.id, ...d.data() }));\n };\n\n const createBooking = async (booking) => {\n const docRef = await addDoc(collection(db, \"bookings\"), booking);\n return docRef.id;\n };\n\n const updateBooking = async (id, booking) => {\n const ref = doc(db, \"bookings\", id);\n await updateDoc(ref, booking);\n };\n\n const createRecurringBooking = async (baseBooking, recurrenceEnd, daysOfWeek) => {\n const groupId = crypto.randomUUID();\n let currentStart = new Date(baseBooking.start);\n let currentEnd = new Date(baseBooking.end);\n const endLimit = new Date(recurrenceEnd);\n const duration = currentEnd.getTime() - currentStart.getTime();\n\n const newBookings = [];\n while (currentStart <= endLimit) {\n if (daysOfWeek.includes(currentStart.getDay())) {\n newBookings.push({\n ...baseBooking,\n start: currentStart.getTime(),\n end: currentStart.getTime() + duration,\n recurringGroupId: groupId\n });\n }\n currentStart.setDate(currentStart.getDate() + 1);\n }\n \n await commitBatchChunks(newBookings, (batch, bk) => {\n const newRef = doc(collection(db, \"bookings\"));\n batch.set(newRef, bk);\n });\n };\n\n const deleteBooking = async (id) => {\n await deleteDoc(doc(db, \"bookings\", id));\n };\n\n const deleteRecurringSeries = async (groupId) => {\n const q = query(collection(db, \"bookings\"), where(\"recurringGroupId\", \"==\", groupId));\n const snapshot = await getDocs(q);\n const docs = snapshot.docs;\n await commitBatchChunks(docs, (batch, d) => {\n batch.delete(d.ref);\n });\n };\n\n \/\/ --- ICONS ---\n\n const CalendarIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\"\/><line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\"\/><line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\"\/><\/svg>;\n const LayoutGridIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\"\/><rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\"\/><rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\"\/><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\"\/><\/svg>;\n const SettingsIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.1a2 2 0 0 1-1-1.72v-.51a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>;\n const PlusIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M5 12h14\"\/><path d=\"M12 5v14\"\/><\/svg>;\n const TrashIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M3 6h18\"\/><path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\"\/><path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\"\/><\/svg>;\n const RefreshIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><path d=\"M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16\"\/><path d=\"M16 21h5v-5\"\/><\/svg>;\n const ChevronLeft = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"m15 18-6-6 6-6\"\/><\/svg>;\n const ChevronRight = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"m9 18 6-6-6-6\"\/><\/svg>;\n const EditIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z\"\/><path d=\"m15 5 4 4\"\/><\/svg>;\n const CheckIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><polyline points=\"20 6 9 17 4 12\"\/><\/svg>;\n const MapPinIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>;\n const ListIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><line x1=\"8\" x2=\"21\" y1=\"6\" y2=\"6\"\/><line x1=\"8\" x2=\"21\" y1=\"12\" y2=\"12\"\/><line x1=\"8\" x2=\"21\" y1=\"18\" y2=\"18\"\/><line x1=\"3\" x2=\"3.01\" y1=\"6\" y2=\"6\"\/><line x1=\"3\" x2=\"3.01\" y1=\"12\" y2=\"12\"\/><line x1=\"3\" x2=\"3.01\" y1=\"18\" y2=\"18\"\/><\/svg>;\n const TableIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M12 3v18\"\/><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\/><path d=\"M3 9h18\"\/><path d=\"M3 15h18\"\/><\/svg>;\n const LogoutIcon = ({ className }) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"\/><polyline points=\"16 17 21 12 16 7\"\/><line x1=\"21\" x2=\"9\" y1=\"12\" y2=\"12\"\/><\/svg>;\n\n \/\/ --- UI COMPONENTS ---\n\n const Button = ({ children, variant = 'primary', className = '', ...props }) => {\n const baseStyle = \"px-5 py-2.5 rounded-xl font-bold tracking-wide transition-all duration-300 flex items-center justify-center gap-2 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed\";\n \n const variants = {\n primary: \"bg-sport-green text-black hover:bg-[#34e38e] shadow-[0_0_20px_rgba(0,209,107,0.2)] hover:shadow-[0_0_30px_rgba(0,209,107,0.4)] border border-transparent\",\n secondary: \"bg-white\/5 text-white hover:bg-white\/10 border border-white\/5 backdrop-blur-sm\",\n danger: \"bg-red-500\/10 text-red-400 hover:bg-red-500\/20 border border-red-500\/10 hover:border-red-500\/30\",\n ghost: \"text-sport-muted hover:text-white hover:bg-white\/5\"\n };\n\n return (\n <button className={`${baseStyle} ${variants[variant]} ${className}`} {...props}>\n {children}\n <\/button>\n );\n };\n\n const Card = ({ children, className = '' }) => (\n <div className={`glass-card rounded-3xl p-6 ${className}`}>\n {children}\n <\/div>\n );\n\n const Input = ({ label, className = '', ...props }) => (\n <div className=\"flex flex-col gap-2 group\">\n {label && <label className=\"text-xs font-semibold text-sport-muted uppercase tracking-wider ml-1 group-focus-within:text-sport-green transition-colors\">{label}<\/label>}\n <input \n className={`bg-zinc-900\/50 border border-white\/5 rounded-xl px-4 py-3.5 text-white placeholder-zinc-600 focus:outline-none focus:border-sport-green\/50 focus:bg-zinc-900 focus:ring-1 focus:ring-sport-green\/20 transition-all ${className}`}\n {...props}\n \/>\n <\/div>\n );\n\n const Select = ({ label, children, className = '', ...props }) => (\n <div className=\"flex flex-col gap-2 group\">\n {label && <label className=\"text-xs font-semibold text-sport-muted uppercase tracking-wider ml-1 group-focus-within:text-sport-green transition-colors\">{label}<\/label>}\n <div className=\"relative\">\n <select \n className={`w-full bg-zinc-900\/50 border border-white\/5 rounded-xl px-4 py-3.5 text-white focus:outline-none focus:border-sport-green\/50 focus:bg-zinc-900 focus:ring-1 focus:ring-sport-green\/20 transition-all appearance-none cursor-pointer ${className}`}\n {...props}\n >\n {children}\n <\/select>\n <div className=\"absolute right-4 top-1\/2 -translate-y-1\/2 pointer-events-none text-zinc-500\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\n <\/div>\n <\/div>\n <\/div>\n );\n\n \/\/ --- FEATURE COMPONENTS ---\n\n const CompactCalendar = ({ currentDate, onDateSelect, bookings, onMonthChange }) => {\n const [viewDate, setViewDate] = useState(new Date(currentDate));\n\n useEffect(() => {\n onMonthChange(viewDate);\n }, [viewDate.getMonth(), viewDate.getFullYear()]);\n\n useEffect(() => {\n if (currentDate.getMonth() !== viewDate.getMonth() || currentDate.getFullYear() !== viewDate.getFullYear()) {\n setViewDate(new Date(currentDate));\n }\n }, [currentDate]);\n\n const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();\n const getFirstDayOfMonth = (year, month) => {\n const day = new Date(year, month, 1).getDay();\n return day === 0 ? 6 : day - 1;\n };\n\n const daysInMonth = getDaysInMonth(viewDate.getFullYear(), viewDate.getMonth());\n const firstDay = getFirstDayOfMonth(viewDate.getFullYear(), viewDate.getMonth());\n\n const changeMonth = (offset) => {\n const newDate = new Date(viewDate);\n newDate.setMonth(newDate.getMonth() + offset);\n setViewDate(newDate);\n };\n\n const days = [];\n for (let i = 0; i < firstDay; i++) {\n days.push(<div key={`empty-${i}`} className=\"w-9 h-9\" \/>);\n }\n \n for (let d = 1; d <= daysInMonth; d++) {\n const isSelected = currentDate.getDate() === d && \n currentDate.getMonth() === viewDate.getMonth() && \n currentDate.getFullYear() === viewDate.getFullYear();\n \n const isToday = new Date().getDate() === d && \n new Date().getMonth() === viewDate.getMonth() && \n new Date().getFullYear() === viewDate.getFullYear();\n\n const dayStart = new Date(viewDate.getFullYear(), viewDate.getMonth(), d, 0, 0, 0);\n const dayEnd = new Date(viewDate.getFullYear(), viewDate.getMonth(), d, 23, 59, 59);\n const hasBookings = bookings.some(b => b.start >= dayStart.getTime() && b.start <= dayEnd.getTime());\n const dateToSelect = new Date(viewDate.getFullYear(), viewDate.getMonth(), d);\n\n days.push(\n <div key={d} className=\"flex flex-col items-center justify-center relative\">\n <button\n onClick={() => onDateSelect(dateToSelect)}\n className={`w-9 h-9 rounded-xl flex items-center justify-center text-sm font-medium transition-all duration-200\n ${isSelected \n ? 'bg-sport-green text-black font-bold shadow-[0_0_15px_rgba(0,209,107,0.3)] scale-110 z-10' \n : isToday \n ? 'bg-white\/10 text-white border border-white\/20' \n : 'text-zinc-400 hover:text-white hover:bg-white\/5'\n }`}\n >\n {d}\n <\/button>\n {hasBookings && !isSelected && (\n <div className=\"w-1 h-1 rounded-full bg-sport-green absolute bottom-0.5\"><\/div>\n )}\n <\/div>\n );\n }\n\n return (\n <div className=\"glass-panel p-5 rounded-3xl\">\n <div className=\"flex items-center justify-between mb-6\">\n <span className=\"font-bold text-white capitalize text-base tracking-wide\">\n {viewDate.toLocaleString('it-IT', { month: 'long', year: 'numeric' })}\n <\/span>\n <div className=\"flex gap-2\">\n <button onClick={() => changeMonth(-1)} className=\"p-1.5 hover:bg-white\/10 rounded-lg text-sport-muted hover:text-white transition-colors\">\n <ChevronLeft className=\"w-4 h-4\" \/>\n <\/button>\n <button onClick={() => changeMonth(1)} className=\"p-1.5 hover:bg-white\/10 rounded-lg text-sport-muted hover:text-white transition-colors\">\n <ChevronRight className=\"w-4 h-4\" \/>\n <\/button>\n <\/div>\n <\/div>\n \n <div className=\"grid grid-cols-7 gap-1 mb-3\">\n {['L', 'M', 'M', 'G', 'V', 'S', 'D'].map((d, i) => (\n <div key={i} className=\"w-9 text-center text-[10px] font-bold text-sport-muted opacity-50\">{d}<\/div>\n ))}\n <\/div>\n\n <div className=\"grid grid-cols-7 gap-y-2 gap-x-1 place-items-center\">\n {days}\n <\/div>\n <\/div>\n );\n };\n\n const Calendar = ({ date, facilities, bookings, onSlotClick, onBookingClick }) => {\n const hours = Array.from({ length: 17 }, (_, i) => i + 7); \n\n const getBookingHeight = (booking) => {\n const start = new Date(booking.start);\n const end = new Date(booking.end);\n const diffHrs = (end.getTime() - start.getTime()) \/ (1000 * 60 * 60);\n return diffHrs;\n };\n\n return (\n <div className=\"overflow-x-auto pb-4 select-none\">\n <div className=\"min-w-[900px]\">\n <div className=\"grid grid-cols-[80px_1fr] mb-6 sticky top-0 z-30\">\n <div className=\"text-right pr-6 text-xs text-sport-muted font-mono pt-4 self-end\">GMT+1<\/div>\n <div className={`grid gap-4`} style={{ gridTemplateColumns: `repeat(${facilities.length}, minmax(220px, 1fr))` }}>\n {facilities.map(f => (\n <div key={f.id} className=\"glass-card p-4 flex flex-col gap-1 border-t-2 border-t-transparent hover:border-t-sport-green transition-colors\">\n <h3 className=\"font-bold text-white text-lg truncate\">{f.name}<\/h3>\n <span className=\"text-[10px] font-bold text-sport-muted uppercase tracking-widest truncate\">\n {f.sports && f.sports.length > 0 ? f.sports.join(', ') : 'Multisport'}\n <\/span>\n <\/div>\n ))}\n <\/div>\n <\/div>\n\n <div className=\"grid grid-cols-[80px_1fr] relative\">\n <div className=\"flex flex-col relative top-[-10px]\">\n {hours.map(h => (\n <div key={h} className=\"h-28 text-right pr-6 text-xs text-zinc-600 font-mono font-medium\">\n {h.toString().padStart(2, '0')}:00\n <\/div>\n ))}\n <\/div>\n\n <div className={`grid gap-4`} style={{ gridTemplateColumns: `repeat(${facilities.length}, minmax(220px, 1fr))` }}>\n {facilities.map(f => (\n <div key={f.id} className=\"relative\">\n {hours.map(h => {\n return (\n <div \n key={h} \n onClick={() => onSlotClick(f.id, h)}\n className=\"h-28 border-t border-dashed border-white\/5 hover:bg-white\/5 transition-all cursor-pointer group flex items-start justify-center pt-2 rounded-lg\"\n >\n <span className=\"opacity-0 group-hover:opacity-100 text-sport-green text-xl font-light transform transition-transform group-hover:translate-y-1\">+<\/span>\n <\/div>\n );\n })}\n \n {bookings\n .filter(b => b.facilityId === f.id)\n .map(b => {\n const startHour = new Date(b.start).getHours();\n const startMin = new Date(b.start).getMinutes();\n const slotHeightRem = 7;\n const topOffset = ((startHour - 7) * slotHeightRem) + ((startMin\/60) * slotHeightRem);\n const height = getBookingHeight(b) * slotHeightRem;\n \n if (startHour < 7) return null; \n\n const isInternal = b.type === BookingType.INTERNAL;\n\n return (\n <div\n key={b.id}\n onClick={(e) => { e.stopPropagation(); onBookingClick(b); }}\n className={`absolute w-full px-1 py-1 z-10 transition-all duration-300 hover:z-20`}\n style={{ \n top: `${topOffset}rem`, \n height: `${height}rem`,\n }}\n >\n <div className={`w-full h-full rounded-2xl p-3 shadow-lg cursor-pointer flex flex-col overflow-hidden relative group border\n ${isInternal \n ? 'bg-gradient-to-br from-emerald-900\/60 to-emerald-950\/40 border-emerald-500\/50 text-emerald-100' \n : 'bg-gradient-to-br from-sky-500\/20 to-sky-600\/10 border-sky-500\/30 text-sky-100'\n } hover:scale-[1.02] hover:shadow-xl`}>\n \n <div className={`absolute left-0 top-0 bottom-0 w-1 ${isInternal ? 'bg-emerald-500' : 'bg-sky-500'}`} \/>\n\n <div className=\"pl-2\">\n <div className=\"font-bold text-sm truncate leading-tight mb-0.5\">{b.customerName}<\/div>\n <div className={`text-xs font-mono opacity-80 mb-1 ${isInternal ? 'text-emerald-300' : 'text-sky-300'}`}>\n {new Date(b.start).toLocaleTimeString('it-IT', {hour:'2-digit', minute:'2-digit'})} - {new Date(b.end).toLocaleTimeString('it-IT', {hour:'2-digit', minute:'2-digit'})}\n <\/div>\n \n {b.recurringGroupId && (\n <div className=\"absolute top-2 right-2\">\n <svg className=\"w-3 h-3 opacity-50\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><path d=\"M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><path d=\"M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16\"\/><path d=\"M16 21h5v-5\"\/><\/svg>\n <\/div>\n )}\n <\/div>\n <\/div>\n <\/div>\n )\n })\n }\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const BookingModal = ({ \n isOpen, onClose, facilities, onSubmit, initialDate, initialFacilityId, initialHour, existingBooking\n }) => {\n const [facilityId, setFacilityId] = useState(initialFacilityId || (facilities[0]?.id || ''));\n const [date, setDate] = useState(initialDate ? initialDate.toLocaleDateString('en-CA') : new Date().toLocaleDateString('en-CA'));\n const [startTime, setStartTime] = useState(initialHour ? `${initialHour.toString().padStart(2,'0')}:00` : '09:00');\n const [duration, setDuration] = useState(1);\n const [customer, setCustomer] = useState('');\n const [email, setEmail] = useState('');\n const [phone, setPhone] = useState('');\n const [notes, setNotes] = useState('');\n const [type, setType] = useState(BookingType.EXTERNAL);\n const [selectedServices, setSelectedServices] = useState([]);\n const [isRecurring, setIsRecurring] = useState(false);\n const [recurrenceEnd, setRecurrenceEnd] = useState('');\n \n useEffect(() => {\n if (existingBooking) {\n setFacilityId(existingBooking.facilityId);\n const startObj = new Date(existingBooking.start);\n const endObj = new Date(existingBooking.end);\n setDate(startObj.toLocaleDateString('en-CA'));\n setStartTime(startObj.toLocaleTimeString('it-IT', {hour: '2-digit', minute:'2-digit'}));\n const diffHrs = (endObj.getTime() - startObj.getTime()) \/ (1000 * 60 * 60);\n setDuration(Math.round(diffHrs * 10) \/ 10);\n setCustomer(existingBooking.customerName);\n setEmail(existingBooking.email || '');\n setPhone(existingBooking.phone || '');\n setNotes(existingBooking.notes || '');\n setType(existingBooking.type);\n setSelectedServices(existingBooking.selectedServices || []);\n setIsRecurring(false);\n } else {\n if(initialFacilityId) setFacilityId(initialFacilityId);\n else setFacilityId(facilities[0]?.id || '');\n if(initialDate) setDate(initialDate.toLocaleDateString('en-CA'));\n if(initialHour) setStartTime(`${initialHour.toString().padStart(2,'0')}:00`);\n else setStartTime('09:00');\n setDuration(1);\n setCustomer('');\n setEmail('');\n setPhone('');\n setNotes('');\n setType(BookingType.EXTERNAL);\n setSelectedServices([]);\n setIsRecurring(false);\n setRecurrenceEnd('');\n }\n }, [existingBooking, initialDate, initialFacilityId, initialHour, isOpen, facilities]);\n\n const selectedFacility = facilities.find(f => f.id === facilityId);\n const effectiveHourlyRate = type === BookingType.INTERNAL ? 0 : (selectedFacility?.hourlyRate || 0);\n const facilityCost = effectiveHourlyRate * duration;\n const selectedServiceObjects = selectedFacility?.availableServices.filter(s => selectedServices.includes(s.id)) || [];\n const servicesCost = selectedServiceObjects.reduce((acc, curr) => acc + curr.price, 0);\n const totalCost = facilityCost + servicesCost;\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n if (!facilityId || !date || !startTime) return;\n await onSubmit({\n id: existingBooking?.id,\n facilityId,\n date,\n startTime,\n duration,\n customer,\n email: type === BookingType.EXTERNAL ? email : undefined,\n phone: type === BookingType.EXTERNAL ? phone : undefined,\n notes,\n type,\n selectedServices,\n totalCost,\n isRecurring,\n recurrenceEnd\n });\n onClose();\n };\n\n const toggleService = (sId) => {\n setSelectedServices(prev => prev.includes(sId) ? prev.filter(id => id !== sId) : [...prev, sId]);\n };\n\n if (!isOpen) return null;\n\n return (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black\/80 backdrop-blur-md p-4 animate-in fade-in duration-200\">\n <div className=\"bg-[#121212] border border-white\/10 rounded-3xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl animate-in zoom-in-95 duration-200\">\n <div className=\"p-6 border-b border-white\/5 bg-white\/[0.02]\">\n <h2 className=\"text-2xl font-bold text-white tracking-tight\">\n {existingBooking ? 'Modifica Prenotazione' : 'Nuova Prenotazione'}\n <\/h2>\n <p className=\"text-sport-muted text-sm mt-1\">Inserisci i dettagli dell'occupazione impianto<\/p>\n <\/div>\n \n <form onSubmit={handleSubmit} className=\"p-6 space-y-8\">\n \n <div className=\"space-y-3\">\n <label className=\"text-xs font-semibold text-sport-muted uppercase tracking-wider ml-1\">Tipo Prenotazione<\/label>\n <div className=\"flex gap-4 p-1.5 bg-zinc-900 rounded-2xl border border-white\/5\">\n <button \n type=\"button\"\n onClick={() => setType(BookingType.EXTERNAL)}\n className={`flex-1 py-3 rounded-xl transition-all duration-300 font-bold tracking-wide ${type === BookingType.EXTERNAL ? 'bg-sky-500 text-white shadow-lg shadow-sky-500\/20' : 'text-zinc-500 hover:text-white hover:bg-white\/5'}`}\n >\n Esterna \/ Affitto\n <\/button>\n <button \n type=\"button\"\n onClick={() => setType(BookingType.INTERNAL)}\n className={`flex-1 py-3 rounded-xl transition-all duration-300 font-bold tracking-wide ${type === BookingType.INTERNAL ? 'bg-sport-green text-black shadow-lg shadow-sport-green\/20' : 'text-zinc-500 hover:text-white hover:bg-white\/5'}`}\n >\n Interna (Societ\u00e0)\n <\/button>\n <\/div>\n {type === BookingType.INTERNAL && (\n <p className=\"text-xs text-sport-green ml-2 animate-in slide-in-from-top-1\">* Costo orario azzerato per uso interno.<\/p>\n )}\n <\/div>\n\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <Select label=\"Impianto\" value={facilityId} onChange={e => setFacilityId(e.target.value)}>\n {facilities.map(f => (\n <option key={f.id} value={f.id}>{f.name} ({type === BookingType.INTERNAL ? 0 : f.hourlyRate}\u20ac\/h)<\/option>\n ))}\n <\/Select>\n\n <Input \n label={type === BookingType.INTERNAL ? \"Nome Squadra\" : \"Cliente \/ Societ\u00e0\"}\n value={customer} \n onChange={e => setCustomer(e.target.value)}\n placeholder=\"Inserisci nome...\"\n required\n \/>\n <\/div>\n\n {type === BookingType.EXTERNAL && (\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 animate-in fade-in slide-in-from-top-2\">\n <Input type=\"email\" label=\"Email\" value={email} onChange={e => setEmail(e.target.value)} placeholder=\"email@example.com\" \/>\n <Input type=\"tel\" label=\"Telefono\" value={phone} onChange={e => setPhone(e.target.value)} placeholder=\"+39 ...\" \/>\n <\/div>\n )}\n\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n <Input type=\"date\" label=\"Data\" value={date} onChange={e => setDate(e.target.value)} required \/>\n <Input type=\"time\" label=\"Ora Inizio\" value={startTime} onChange={e => setStartTime(e.target.value)} required \/>\n <Input type=\"number\" label=\"Durata (h)\" min=\"0.5\" max=\"12\" step=\"0.5\" value={duration} onChange={e => setDuration(Number(e.target.value))} required \/>\n <\/div>\n\n <div className=\"flex flex-col gap-2 group\">\n <label className=\"text-xs font-semibold text-sport-muted uppercase tracking-wider ml-1\">Note \/ Descrizione<\/label>\n <textarea \n className=\"bg-zinc-900\/50 border border-white\/5 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-sport-green\/50 focus:bg-zinc-900 focus:ring-1 focus:ring-sport-green\/20 transition-all min-h-[80px]\"\n value={notes}\n onChange={e => setNotes(e.target.value)}\n placeholder=\"Dettagli aggiuntivi...\"\n \/>\n <\/div>\n\n {selectedFacility && selectedFacility.availableServices.length > 0 && (\n <div className=\"space-y-3\">\n <label className=\"text-xs font-semibold text-sport-muted uppercase tracking-wider ml-1\">Servizi Extra<\/label>\n <div className=\"grid grid-cols-2 gap-3\">\n {selectedFacility.availableServices.map(s => (\n <div \n key={s.id}\n onClick={() => toggleService(s.id)}\n className={`cursor-pointer rounded-xl p-4 flex justify-between items-center transition-all duration-200 border ${selectedServices.includes(s.id) ? 'bg-sport-green\/10 border-sport-green text-sport-green shadow-[inset_0_0_10px_rgba(0,209,107,0.1)]' : 'bg-zinc-900\/50 border-white\/5 text-zinc-400 hover:bg-white\/5 hover:border-white\/10'}`}\n >\n <span className=\"font-medium\">{s.name}<\/span>\n <span className=\"font-mono text-xs opacity-70\">+{s.price}\u20ac<\/span>\n <\/div>\n ))}\n <\/div>\n <\/div>\n )}\n\n {!existingBooking && (\n <div className=\"p-5 bg-white\/[0.02] rounded-2xl border border-white\/5\">\n <div className=\"flex items-center gap-3 mb-4\">\n <input \n type=\"checkbox\" \n id=\"recurring\"\n checked={isRecurring}\n onChange={e => setIsRecurring(e.target.checked)}\n className=\"w-5 h-5 accent-sport-green rounded cursor-pointer\"\n \/>\n <label htmlFor=\"recurring\" className=\"font-medium cursor-pointer select-none text-white\">Ripeti prenotazione (Ricorrenza)<\/label>\n <\/div>\n \n {isRecurring && (\n <div className=\"animate-in slide-in-from-top-2 pl-8\">\n <Input \n type=\"date\" \n label=\"Fino alla data\" \n value={recurrenceEnd} \n onChange={e => setRecurrenceEnd(e.target.value)}\n min={date}\n required={isRecurring}\n \/>\n <p className=\"text-xs text-sport-muted mt-2\">\n Verr\u00e0 creata una copia ogni settimana fino alla data selezionata.\n <\/p>\n <\/div>\n )}\n <\/div>\n )}\n\n <div className=\"bg-zinc-950 rounded-2xl p-6 border border-zinc-800 shadow-inner\">\n <div className=\"flex justify-between items-end pb-4 border-b border-zinc-800 mb-4\">\n <h3 className=\"text-zinc-400 font-medium text-sm uppercase tracking-widest\">Totale Stimato<\/h3>\n <p className=\"text-4xl font-bold text-white tracking-tight\">{totalCost}<span className=\"text-2xl text-zinc-500\">\u20ac<\/span><\/p>\n <\/div>\n \n <div className=\"space-y-2 text-xs text-zinc-500 font-mono\">\n <div className=\"flex justify-between\">\n <span>BASE ({duration}h x {effectiveHourlyRate}\u20ac)<\/span>\n <span>{facilityCost}\u20ac<\/span>\n <\/div>\n {selectedServiceObjects.map(s => (\n <div key={s.id} className=\"flex justify-between text-zinc-400\">\n <span>+ {s.name.toUpperCase()}<\/span>\n <span>{s.price}\u20ac<\/span>\n <\/div>\n ))}\n <\/div>\n\n <div className=\"flex justify-end gap-3 mt-6\">\n <Button type=\"button\" variant=\"ghost\" onClick={onClose}>Annulla<\/Button>\n <Button type=\"submit\" className=\"px-8\">\n {existingBooking ? 'Salva Modifiche' : 'Conferma Prenotazione'}\n <\/Button>\n <\/div>\n <\/div>\n\n <\/form>\n <\/div>\n <\/div>\n );\n };\n\n const DeleteModal = ({ isOpen, onClose, onConfirm, isRecurring }) => {\n if (!isOpen) return null;\n return (\n <div className=\"fixed inset-0 z-[60] flex items-center justify-center bg-black\/80 backdrop-blur-md animate-in fade-in\">\n <div className=\"bg-[#121212] border border-white\/10 rounded-3xl p-6 max-w-md w-full shadow-2xl\">\n <h3 className=\"text-xl font-bold text-white mb-2\">Elimina Prenotazione<\/h3>\n <p className=\"text-zinc-400 mb-6\">Sei sicuro di voler eliminare questa prenotazione?<\/p>\n \n {isRecurring ? (\n <div className=\"flex flex-col gap-3\">\n <Button variant=\"danger\" onClick={() => onConfirm(true)} className=\"w-full justify-between\">\n <span>Elimina Tutte le Future<\/span>\n <span className=\"text-xs bg-black\/20 px-2 py-0.5 rounded\">Serie<\/span>\n <\/Button>\n <Button variant=\"secondary\" onClick={() => onConfirm(false)} className=\"w-full justify-between\">\n <span>Elimina Solo Questa<\/span>\n <span className=\"text-xs bg-white\/10 px-2 py-0.5 rounded\">Singola<\/span>\n <\/Button>\n <\/div>\n ) : (\n <Button variant=\"danger\" onClick={() => onConfirm(false)} className=\"w-full\">Conferma Eliminazione<\/Button>\n )}\n \n <Button variant=\"ghost\" onClick={onClose} className=\"w-full mt-2\">Annulla<\/Button>\n <\/div>\n <\/div>\n );\n };\n\n const FacilitiesManager = ({ facilities, onAdd, onUpdate, onDelete }) => {\n const [editingId, setEditingId] = useState(null);\n \n const [formData, setFormData] = useState({\n code: '', name: '', sports: [], hourlyRate: 0, description: '', availableServices: []\n });\n\n const resetForm = () => {\n setFormData({ code: '', name: '', sports: [], hourlyRate: 0, description: '', availableServices: [] });\n setEditingId(null);\n };\n\n const handleEdit = (f) => {\n setEditingId(f.id);\n setFormData({ ...f });\n };\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n try {\n if (editingId) {\n await onUpdate(editingId, formData);\n } else {\n if(!formData.name || !formData.code) return; \n await onAdd(formData);\n }\n resetForm();\n } catch (err) {\n console.error(err);\n }\n };\n\n const toggleSport = (sport) => {\n setFormData(prev => {\n const currentSports = prev.sports || [];\n if (currentSports.includes(sport)) {\n return { ...prev, sports: currentSports.filter(s => s !== sport) };\n } else {\n return { ...prev, sports: [...currentSports, sport] };\n }\n });\n };\n\n const addService = () => {\n const newService = { id: crypto.randomUUID(), name: 'Nuovo Servizio', price: 0 };\n setFormData(prev => ({\n ...prev,\n availableServices: [...(prev.availableServices || []), newService]\n }));\n };\n\n const updateService = (index, key, value) => {\n const updated = [...(formData.availableServices || [])];\n updated[index] = { ...updated[index], [key]: value };\n setFormData(prev => ({ ...prev, availableServices: updated }));\n };\n\n const removeService = (index) => {\n const updated = [...(formData.availableServices || [])];\n updated.splice(index, 1);\n setFormData(prev => ({ ...prev, availableServices: updated }));\n };\n\n const AVAILABLE_SPORTS = [\n \"Calcio\", \"Calcetto\", \"Tennis\", \"Padel\", \"Basket\", \"Volley\", \n \"Ginnastica Dolce\", \"Preparazione Atletica\", \"Pesistica\", \n \"Nuoto\", \"Rugby\", \"Danza\", \"Arti Marziali\", \"Yoga\/Pilates\", \"Altro\"\n ];\n\n return (\n <div className=\"grid grid-cols-1 xl:grid-cols-3 gap-8 h-full\">\n <div className=\"xl:col-span-1 space-y-4 overflow-y-auto pr-2 max-h-[calc(100vh-140px)]\">\n <div className=\"flex items-center justify-between mb-2\">\n <h2 className=\"text-xl font-bold text-white\">Impianti Gestiti<\/h2>\n <Button onClick={resetForm} variant=\"secondary\" className=\"!py-1 !px-3 text-sm\">\n <PlusIcon className=\"w-4 h-4\" \/> Nuovo\n <\/Button>\n <\/div>\n \n {facilities.map(f => (\n <div \n key={f.id} \n onClick={() => handleEdit(f)}\n className={`p-4 rounded-2xl border cursor-pointer transition-all group relative overflow-hidden\n ${editingId === f.id \n ? 'bg-sport-green\/10 border-sport-green shadow-[0_0_15px_rgba(0,209,107,0.1)]' \n : 'bg-zinc-900\/40 border-sport-border hover:bg-zinc-900'\n }`}\n >\n <div className=\"flex justify-between items-start mb-2\">\n <div>\n <h3 className=\"font-bold text-white text-lg\">{f.name}<\/h3>\n <span className=\"text-xs font-mono text-sport-muted bg-zinc-800 px-2 py-0.5 rounded\">{f.code}<\/span>\n <\/div>\n <div className=\"text-right\">\n <div className=\"text-sport-green font-bold text-xl\">{f.hourlyRate}\u20ac<span className=\"text-xs text-sport-muted font-normal\">\/h<\/span><\/div>\n <\/div>\n <\/div>\n <div className=\"flex items-center gap-2 text-sm text-sport-muted mb-2\">\n <MapPinIcon className=\"w-4 h-4\" \/>\n <span className=\"truncate max-w-[200px]\">{f.sports?.join(', ') || 'Nessuno sport'}<\/span>\n <\/div>\n {f.availableServices.length > 0 && (\n <div className=\"mt-2 flex flex-wrap gap-2\">\n {f.availableServices.map(s => (\n <span key={s.id} className=\"text-[10px] px-2 py-1 rounded bg-zinc-800 text-zinc-400 border border-zinc-700\">\n {s.name} (+{s.price}\u20ac)\n <\/span>\n ))}\n <\/div>\n )}\n <\/div>\n ))}\n <\/div>\n\n <Card className=\"xl:col-span-2 bg-zinc-900\/60 backdrop-blur-md h-fit border-white\/5\">\n <div className=\"flex items-center justify-between mb-6 pb-4 border-b border-white\/5\">\n <h2 className=\"text-2xl font-bold text-white\">\n {editingId ? 'Modifica Impianto' : 'Nuovo Impianto'}\n <\/h2>\n {editingId && (\n <Button variant=\"danger\" onClick={() => onDelete(editingId)} className=\"!py-1.5 !px-3 text-sm\">\n <TrashIcon className=\"w-4 h-4\" \/> Elimina\n <\/Button>\n )}\n <\/div>\n\n <form onSubmit={handleSubmit} className=\"space-y-6\">\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <Input \n label=\"Codice Impianto\" \n value={formData.code} \n onChange={e => setFormData({...formData, code: e.target.value})}\n placeholder=\"Es: IMP-01\"\n required\n \/>\n <Input \n label=\"Nome Impianto\" \n value={formData.name} \n onChange={e => setFormData({...formData, name: e.target.value})}\n placeholder=\"Es: Campo Centrale\"\n required\n \/>\n <\/div>\n\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <Input \n type=\"number\"\n label=\"Tariffa Oraria (\u20ac)\" \n value={formData.hourlyRate} \n onChange={e => setFormData({...formData, hourlyRate: Number(e.target.value)})}\n required\n \/>\n <Input \n label=\"Descrizione\" \n value={formData.description} \n onChange={e => setFormData({...formData, description: e.target.value})}\n placeholder=\"Dettagli aggiuntivi...\"\n \/>\n <\/div>\n\n <div>\n <label className=\"text-sm text-sport-muted ml-1 mb-2 block\">Sport Praticabili (Seleziona multipli)<\/label>\n <div className=\"flex flex-wrap gap-2\">\n {AVAILABLE_SPORTS.map(sport => {\n const isSelected = formData.sports?.includes(sport);\n return (\n <button\n key={sport}\n type=\"button\"\n onClick={() => toggleSport(sport)}\n className={`px-3 py-1.5 rounded-lg text-sm transition-all border\n ${isSelected \n ? 'bg-sport-green text-black border-sport-green font-semibold shadow-[0_0_10px_rgba(0,209,107,0.3)]' \n : 'bg-zinc-800 text-zinc-400 border-zinc-700 hover:bg-zinc-700 hover:text-white'\n }`}\n >\n {sport}\n <\/button>\n );\n })}\n <\/div>\n <\/div>\n\n <div className=\"bg-zinc-950\/50 rounded-2xl p-6 border border-white\/5\">\n <div className=\"flex items-center justify-between mb-4\">\n <h3 className=\"font-bold text-white\">Servizi & Extra<\/h3>\n <Button type=\"button\" variant=\"secondary\" onClick={addService} className=\"!py-1 !px-2 text-xs\">\n <PlusIcon className=\"w-3 h-3\" \/> Aggiungi Servizio\n <\/Button>\n <\/div>\n\n {(!formData.availableServices || formData.availableServices.length === 0) && (\n <p className=\"text-sm text-sport-muted italic\">Nessun servizio extra configurato (es. Luci, Spogliatoi).<\/p>\n )}\n\n <div className=\"grid grid-cols-1 gap-3\">\n {formData.availableServices?.map((service, idx) => (\n <div key={service.id || idx} className=\"flex gap-4 items-end animate-in fade-in slide-in-from-left-2\">\n <div className=\"flex-1\">\n <label className=\"text-xs text-sport-muted mb-1 block\">Nome Servizio<\/label>\n <input \n className=\"w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-white text-sm focus:border-sport-green focus:outline-none\"\n value={service.name}\n onChange={e => updateService(idx, 'name', e.target.value)}\n placeholder=\"Es: Illuminazione\"\n \/>\n <\/div>\n <div className=\"w-32\">\n <label className=\"text-xs text-sport-muted mb-1 block\">Costo Extra (\u20ac)<\/label>\n <input \n type=\"number\"\n className=\"w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-white text-sm focus:border-sport-green focus:outline-none\"\n value={service.price}\n onChange={e => updateService(idx, 'price', Number(e.target.value))}\n \/>\n <\/div>\n <button \n type=\"button\"\n onClick={() => removeService(idx)}\n className=\"h-9 w-9 flex items-center justify-center rounded-lg bg-red-500\/10 text-red-500 hover:bg-red-500\/20 transition-colors\"\n >\n <TrashIcon className=\"w-4 h-4\" \/>\n <\/button>\n <\/div>\n ))}\n <\/div>\n <\/div>\n\n <div className=\"flex justify-end gap-3 pt-4 border-t border-white\/5\">\n <Button type=\"button\" variant=\"ghost\" onClick={resetForm}>Annulla<\/Button>\n <Button type=\"submit\">\n <CheckIcon className=\"w-4 h-4\" \/>\n {editingId ? 'Salva Modifiche' : 'Crea Impianto'}\n <\/Button>\n <\/div>\n <\/form>\n <\/Card>\n <\/div>\n );\n };\n\n const LoginScreen = ({ onLogin }) => {\n const [user, setUser] = useState('');\n const [pass, setPass] = useState('');\n const [error, setError] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n \/\/ Fixed: Case insensitive check\n if (user.toLowerCase() === 'admin' && pass === 'Midiunga04!') {\n onLogin(user);\n } else {\n setError('Credenziali non valide');\n }\n };\n\n return (\n <div className=\"h-full flex items-center justify-center p-4\">\n <div className=\"absolute inset-0 z-0 opacity-20 bg-[url('https:\/\/images.unsplash.com\/photo-1534438327276-14e5300c3a48?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center\"><\/div>\n <Card className=\"w-full max-w-md relative z-10 backdrop-blur-xl bg-black\/50 border-white\/10\">\n <div className=\"text-center mb-8\">\n <div className=\"w-16 h-16 bg-gradient-to-tr from-sport-green to-emerald-600 rounded-2xl flex items-center justify-center text-black font-bold text-3xl shadow-[0_0_30px_rgba(0,209,107,0.4)] mx-auto mb-4\">S<\/div>\n <h1 className=\"text-3xl font-bold text-white tracking-tight\">SportSpace<\/h1>\n <p className=\"text-sport-muted\">Accesso Gestionale<\/p>\n <\/div>\n <form onSubmit={handleSubmit} className=\"space-y-6\">\n <Input label=\"Utente\" value={user} onChange={e => setUser(e.target.value)} placeholder=\"Username\" \/>\n <Input type=\"password\" label=\"Password\" value={pass} onChange={e => setPass(e.target.value)} placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" \/>\n {error && <p className=\"text-red-400 text-sm text-center bg-red-500\/10 py-2 rounded-lg\">{error}<\/p>}\n <Button type=\"submit\" className=\"w-full py-4 text-lg\">Accedi<\/Button>\n <\/form>\n <\/Card>\n <\/div>\n );\n }\n\n \/\/ --- MAIN APP ---\n\n const View = {\n DASHBOARD: 'dashboard',\n CALENDAR: 'calendar',\n AGENDA: 'agenda',\n LIST: 'list',\n FACILITIES: 'facilities',\n };\n\n const App = () => {\n const [isAuthenticated, setIsAuthenticated] = useState(false);\n const [view, setView] = useState(View.CALENDAR);\n const [facilities, setFacilities] = useState([]);\n const [bookings, setBookings] = useState([]);\n const [currentDate, setCurrentDate] = useState(new Date());\n const [viewMonth, setViewMonth] = useState(new Date());\n \n \/\/ Modals\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [modalInitialData, setModalInitialData] = useState(undefined);\n const [editingBooking, setEditingBooking] = useState(undefined);\n \n \/\/ Delete Modal\n const [deleteModalOpen, setDeleteModalOpen] = useState(false);\n const [bookingToDelete, setBookingToDelete] = useState(null);\n\n const [loading, setLoading] = useState(true);\n const [isSaving, setIsSaving] = useState(false);\n\n useEffect(() => {\n if(isAuthenticated) loadData();\n }, [viewMonth, isAuthenticated]); \n\n const loadData = async () => {\n setLoading(true);\n try {\n const facilitiesData = await getFacilities();\n const startOfMonth = new Date(viewMonth.getFullYear(), viewMonth.getMonth(), 1);\n const endOfMonth = new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 0, 23, 59, 59);\n const bookingsData = await getBookings(startOfMonth.getTime(), endOfMonth.getTime());\n setFacilities(facilitiesData.sort((a,b) => a.code.localeCompare(b.code)));\n setBookings(bookingsData);\n } catch (error) {\n console.error(\"Error loading data\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const dailyBookings = useMemo(() => {\n const startOfDay = new Date(currentDate);\n startOfDay.setHours(0,0,0,0);\n const endOfDay = new Date(currentDate);\n endOfDay.setHours(23,59,59,999);\n return bookings.filter(b => b.start >= startOfDay.getTime() && b.start <= endOfDay.getTime()).sort((a,b) => a.start - b.start);\n }, [bookings, currentDate]);\n\n const monthlyBookings = useMemo(() => {\n return [...bookings].sort((a, b) => a.start - b.start);\n }, [bookings]);\n\n const handleDateChange = (date) => setCurrentDate(date);\n const handleMonthChange = (date) => setViewMonth(date);\n\n const handleSlotClick = (facilityId, hour) => {\n setEditingBooking(undefined);\n setModalInitialData({ facilityId, hour });\n setIsModalOpen(true);\n };\n\n const handleOpenNewBooking = () => {\n setEditingBooking(undefined);\n setModalInitialData(undefined);\n setIsModalOpen(true);\n };\n\n const handleEditBooking = (b) => {\n setEditingBooking(b);\n setModalInitialData(undefined);\n setIsModalOpen(true);\n };\n\n const handleSaveBooking = async (data) => {\n setIsSaving(true);\n try {\n const dateParts = data.date.split('-');\n const timeParts = data.startTime.split(':');\n const start = new Date(parseInt(dateParts[0]), parseInt(dateParts[1]) - 1, parseInt(dateParts[2]), parseInt(timeParts[0]), parseInt(timeParts[1]));\n const end = new Date(start);\n end.setTime(start.getTime() + (data.duration * 60 * 60 * 1000));\n\n const baseBooking = {\n facilityId: data.facilityId,\n facilityName: facilities.find(f => f.id === data.facilityId)?.name || 'Unknown',\n start: start.getTime(),\n end: end.getTime(),\n type: data.type,\n customerName: data.customer,\n selectedServices: data.selectedServices,\n totalCost: data.totalCost\n };\n if (data.notes) baseBooking.notes = data.notes;\n if (data.email) baseBooking.email = data.email;\n if (data.phone) baseBooking.phone = data.phone;\n\n if (data.id) {\n await updateBooking(data.id, baseBooking);\n } else {\n if (data.isRecurring && data.recurrenceEnd) {\n const endParts = data.recurrenceEnd.split('-');\n const endDate = new Date(parseInt(endParts[0]), parseInt(endParts[1]) - 1, parseInt(endParts[2]), 23, 59, 59);\n await createRecurringBooking(baseBooking, endDate.getTime(), [start.getDay()]);\n } else {\n await createBooking(baseBooking);\n }\n }\n \n const bookingMonth = start.getMonth();\n const bookingYear = start.getFullYear();\n if (bookingMonth !== viewMonth.getMonth() || bookingYear !== viewMonth.getFullYear()) {\n setViewMonth(start);\n } else {\n await loadData();\n }\n setCurrentDate(start);\n } catch (e) {\n console.error(e);\n alert(\"Errore salvataggio.\");\n } finally {\n setIsSaving(false);\n }\n };\n\n const initiateDelete = (booking) => {\n if (booking.recurringGroupId) {\n setBookingToDelete(booking);\n setDeleteModalOpen(true);\n } else {\n if(window.confirm(\"Eliminare questa prenotazione?\")) {\n performDelete(booking.id);\n }\n }\n };\n\n const confirmDelete = async (deleteAllFuture) => {\n setDeleteModalOpen(false);\n if (!bookingToDelete) return;\n \n setIsSaving(true);\n try {\n if (deleteAllFuture && bookingToDelete.recurringGroupId) {\n await deleteRecurringSeries(bookingToDelete.recurringGroupId);\n } else {\n await deleteBooking(bookingToDelete.id);\n }\n await loadData();\n } catch (error) {\n console.error(\"Delete failed\", error);\n } finally {\n setIsSaving(false);\n setBookingToDelete(null);\n }\n };\n \n const performDelete = async (id) => {\n setIsSaving(true);\n try {\n await deleteBooking(id);\n await loadData();\n } finally {\n setIsSaving(false);\n }\n };\n\n const SidebarBtn = ({ viewName, icon: Icon, label }) => (\n <button \n onClick={() => setView(viewName)}\n className={`w-full flex items-center gap-4 px-5 py-3.5 rounded-2xl transition-all duration-300 group relative overflow-hidden\n ${view === viewName ? 'bg-white\/10 text-white shadow-[0_0_20px_rgba(255,255,255,0.05)]' : 'text-zinc-500 hover:text-white hover:bg-white\/5'}`}\n >\n {view === viewName && <div className=\"absolute left-0 top-2 bottom-2 w-1 bg-sport-green rounded-r-full\"><\/div>}\n <Icon className={`w-5 h-5 transition-colors ${view === viewName ? 'text-sport-green' : 'group-hover:text-white'}`} \/>\n <span className=\"font-medium tracking-wide\">{label}<\/span>\n <\/button>\n );\n\n if (!isAuthenticated) {\n return <LoginScreen onLogin={() => setIsAuthenticated(true)} \/>;\n }\n\n \/\/ --- UPDATED LAYOUT CONTAINER FOR EMBEDDING ---\n return (\n \/\/ Changed h-screen to h-[85vh] to accommodate WordPress header\n <div className=\"h-[85vh] text-sport-text font-sans flex overflow-hidden selection:bg-sport-green\/30\">\n \n <nav className=\"w-80 glass-panel border-r-0 flex flex-col justify-between shrink-0 h-full z-20 m-4 rounded-[2.5rem] relative\">\n <div className=\"flex flex-col h-full p-4\">\n <div className=\"p-4 mb-6\">\n <div className=\"flex items-center gap-3 text-white mb-1\">\n <div className=\"w-10 h-10 bg-gradient-to-tr from-sport-green to-emerald-600 rounded-xl flex items-center justify-center text-black font-bold text-xl shadow-[0_0_20px_rgba(0,209,107,0.4)]\">S<\/div>\n <div>\n <span className=\"font-bold text-2xl tracking-tight block leading-none\">SportSpace<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"space-y-1 mb-6 flex-1\">\n <SidebarBtn viewName={View.CALENDAR} icon={CalendarIcon} label=\"Calendario\" \/>\n <SidebarBtn viewName={View.AGENDA} icon={ListIcon} label=\"Agenda Giornaliera\" \/>\n <SidebarBtn viewName={View.LIST} icon={TableIcon} label=\"Riepilogo Mese\" \/>\n <div className=\"h-px bg-white\/5 my-4 mx-4\"><\/div>\n <SidebarBtn viewName={View.FACILITIES} icon={SettingsIcon} label=\"Impianti\" \/>\n <SidebarBtn viewName={View.DASHBOARD} icon={LayoutGridIcon} label=\"Statistiche\" \/>\n <\/div>\n\n <div className=\"mt-auto\">\n <CompactCalendar \n currentDate={currentDate} \n onDateSelect={handleDateChange} \n bookings={bookings}\n onMonthChange={handleMonthChange}\n \/>\n <button onClick={() => setIsAuthenticated(false)} className=\"mt-4 flex items-center gap-2 text-red-400 text-sm pl-4 hover:text-white transition-colors\">\n <LogoutIcon className=\"w-4 h-4\"\/> Logout\n <\/button>\n <\/div>\n <\/div>\n <\/nav>\n\n <main className=\"flex-1 flex flex-col h-full overflow-hidden relative mr-4 my-4 rounded-[2.5rem] border border-white\/5 bg-[#09090b]\/40 backdrop-blur-3xl shadow-2xl\">\n \n <header className=\"h-24 flex items-center justify-between px-10 shrink-0 border-b border-white\/5\">\n <div>\n <h1 className=\"text-3xl font-bold text-white capitalize tracking-tight mb-1\">\n {view === View.CALENDAR && \"Calendario\"}\n {view === View.AGENDA && \"Agenda\"}\n {view === View.LIST && \"Riepilogo\"}\n {view === View.FACILITIES && \"Impianti\"}\n {view === View.DASHBOARD && \"Dashboard\"}\n <\/h1>\n <p className=\"text-sm font-medium text-sport-muted uppercase tracking-widest opacity-70\">\n {view === View.LIST \n ? viewMonth.toLocaleDateString('it-IT', { month: 'long', year: 'numeric' })\n : currentDate.toLocaleDateString('it-IT', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })\n }\n <\/p>\n <\/div>\n\n <div className=\"flex items-center gap-3\">\n <Button variant=\"ghost\" onClick={loadData} disabled={loading} title=\"Ricarica Dati\">\n <RefreshIcon className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`} \/>\n <\/Button>\n \n {view !== View.FACILITIES && (\n <Button onClick={handleOpenNewBooking} className=\"shadow-lg shadow-sport-green\/20\">\n <PlusIcon className=\"w-5 h-5\" \/> Nuova Prenotazione\n <\/Button>\n )}\n <\/div>\n <\/header>\n\n <div className=\"flex-1 overflow-auto p-8 relative scroll-smooth\">\n \n <div className=\"animate-fade-in\">\n {view === View.CALENDAR && (\n <Calendar \n date={currentDate} \n facilities={facilities} \n bookings={dailyBookings} \n onSlotClick={handleSlotClick}\n onBookingClick={handleEditBooking}\n \/>\n )}\n\n {view === View.AGENDA && (\n <div className=\"max-w-4xl mx-auto space-y-4\">\n {dailyBookings.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center py-32 text-zinc-600\">\n <ListIcon className=\"w-20 h-20 mb-6 opacity-20\" \/>\n <p className=\"text-2xl font-semibold mb-2\">Nessun impegno oggi<\/p>\n <p className=\"text-zinc-500 mb-8\">L'agenda \u00e8 libera per questa data.<\/p>\n <Button variant=\"secondary\" onClick={handleOpenNewBooking}>Crea Prenotazione<\/Button>\n <\/div>\n ) : (\n dailyBookings.map((b, idx) => (\n <div key={b.id} className=\"glass-card !p-0 flex items-stretch overflow-hidden group hover:border-sport-green\/30 transition-all animate-slide-up\" style={{ animationDelay: `${idx * 0.05}s` }}>\n <div className={`w-2 ${b.type === BookingType.INTERNAL ? 'bg-emerald-600' : 'bg-sky-500'}`}><\/div>\n <div className=\"flex flex-col items-center justify-center w-24 shrink-0 border-r border-white\/5 bg-white\/[0.02]\">\n <span className=\"text-xl font-bold text-white\">{new Date(b.start).getHours()}:00<\/span>\n <span className=\"text-xs text-zinc-500 font-mono mt-1\">{new Date(b.end).getHours()}:00<\/span>\n <\/div>\n <div className=\"flex-1 p-5 flex items-center justify-between\">\n <div>\n <div className=\"flex items-center gap-3 mb-1\">\n <span className={`text-[10px] px-2 py-0.5 rounded-full font-bold uppercase tracking-widest border\n ${b.type === BookingType.INTERNAL \n ? 'bg-emerald-900\/40 border-emerald-800 text-emerald-400' \n : 'bg-sky-900\/40 border-sky-800 text-sky-400'}`}>\n {b.type === BookingType.INTERNAL ? 'Interna' : 'Esterna'}\n <\/span>\n <span className=\"text-xs font-semibold text-zinc-500 uppercase tracking-wider\">{b.facilityName}<\/span>\n <\/div>\n <h3 className=\"text-lg font-bold text-white\">{b.customerName}<\/h3>\n <\/div>\n <div className=\"flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity translate-x-4 group-hover:translate-x-0 duration-300\">\n <Button variant=\"secondary\" className=\"!p-2.5 rounded-lg\" onClick={() => handleEditBooking(b)}><EditIcon className=\"w-4 h-4\" \/><\/Button>\n <Button variant=\"danger\" className=\"!p-2.5 rounded-lg\" onClick={() => initiateDelete(b)}><TrashIcon className=\"w-4 h-4\" \/><\/Button>\n <\/div>\n <\/div>\n <\/div>\n ))\n )}\n <\/div>\n )}\n\n {view === View.LIST && (\n <Card className=\"max-w-7xl mx-auto !p-0 overflow-hidden border border-white\/5\">\n <table className=\"w-full text-left text-sm text-zinc-400\">\n <thead className=\"bg-white\/[0.03] text-zinc-300 uppercase font-bold text-xs tracking-wider border-b border-white\/5\">\n <tr>\n <th className=\"px-6 py-5\">Data<\/th>\n <th className=\"px-6 py-5\">Orario<\/th>\n <th className=\"px-6 py-5\">Impianto<\/th>\n <th className=\"px-6 py-5\">Info<\/th>\n <th className=\"px-6 py-5 text-right\">Costo<\/th>\n <th className=\"px-6 py-5 text-center\">Azioni<\/th>\n <\/tr>\n <\/thead>\n <tbody className=\"divide-y divide-white\/5\">\n {monthlyBookings.map(b => (\n <tr key={b.id} className=\"hover:bg-white\/[0.02] transition-colors group\">\n <td className=\"px-6 py-4 font-medium text-white\">{new Date(b.start).toLocaleDateString()}<\/td>\n <td className=\"px-6 py-4 font-mono text-xs\">{new Date(b.start).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})} - {new Date(b.end).toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'})}<\/td>\n <td className=\"px-6 py-4\">{b.facilityName}<\/td>\n <td className=\"px-6 py-4\">\n <div className=\"text-white font-semibold\">{b.customerName}<\/div>\n <div className=\"mt-1\">\n <span className={`text-[10px] px-2 py-0.5 rounded font-bold uppercase tracking-widest\n ${b.type === BookingType.INTERNAL \n ? 'text-emerald-400 bg-emerald-900\/30' \n : 'text-sky-400 bg-sky-900\/30'}`}>\n {b.type === BookingType.INTERNAL ? 'Interna' : 'Esterna'}\n <\/span>\n <\/div>\n <\/td>\n <td className=\"px-6 py-4 text-right font-mono text-white\">{b.totalCost}\u20ac<\/td>\n <td className=\"px-6 py-4 text-center\">\n <div className=\"flex justify-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity\">\n <button onClick={() => handleEditBooking(b)} className=\"text-zinc-400 hover:text-white\"><EditIcon className=\"w-4 h-4\" \/><\/button>\n <button onClick={() => initiateDelete(b)} className=\"text-zinc-400 hover:text-red-500\"><TrashIcon className=\"w-4 h-4\" \/><\/button>\n <\/div>\n <\/td>\n <\/tr>\n ))}\n <\/tbody>\n <\/table>\n <\/Card>\n )}\n\n {view === View.FACILITIES && (\n <FacilitiesManager \n facilities={facilities} \n onAdd={async (f) => { await addFacility(f); await loadData(); }} \n onUpdate={async (id, f) => { await updateFacility(id, f); await loadData(); }}\n onDelete={async (id) => { await deleteFacility(id); await loadData(); }}\n \/>\n )}\n\n {view === View.DASHBOARD && (\n <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n <Card className=\"relative overflow-hidden group\">\n <div className=\"absolute top-0 right-0 w-32 h-32 bg-sport-green\/10 rounded-full blur-3xl group-hover:bg-sport-green\/20 transition-all\"><\/div>\n <h3 className=\"text-sm font-bold uppercase tracking-widest text-sport-muted mb-2\">Ricavi Stimati (Mese)<\/h3>\n <div className=\"text-5xl font-bold text-white tracking-tight\">\n {bookings.reduce((acc, b) => acc + (b.totalCost || 0), 0)}<span className=\"text-2xl text-zinc-500\">\u20ac<\/span>\n <\/div>\n <\/Card>\n <Card>\n <h3 className=\"text-sm font-bold uppercase tracking-widest text-sport-muted mb-2\">Ore Occupate<\/h3>\n <div className=\"text-5xl font-bold text-white tracking-tight\">\n {bookings.reduce((acc, b) => acc + ((b.end - b.start) \/ 3600000), 0)}<span className=\"text-2xl text-zinc-500\">h<\/span>\n <\/div>\n <\/Card>\n <Card>\n <h3 className=\"text-sm font-bold uppercase tracking-widest text-sport-muted mb-2\">Totale Prenotazioni<\/h3>\n <div className=\"text-5xl font-bold text-white tracking-tight\">\n {bookings.length}\n <\/div>\n <\/Card>\n <\/div>\n )}\n <\/div>\n <\/div>\n\n <BookingModal \n isOpen={isModalOpen} \n onClose={() => setIsModalOpen(false)} \n facilities={facilities} \n onSubmit={handleSaveBooking}\n initialDate={currentDate}\n initialFacilityId={modalInitialData?.facilityId}\n initialHour={modalInitialData?.hour}\n existingBooking={editingBooking}\n \/>\n\n <DeleteModal \n isOpen={deleteModalOpen}\n onClose={() => setDeleteModalOpen(false)}\n onConfirm={confirmDelete}\n isRecurring={!!bookingToDelete?.recurringGroupId}\n \/>\n \n {isSaving && (\n <div className=\"absolute inset-0 z-[60] flex items-center justify-center bg-black\/60 backdrop-blur-sm\">\n <div className=\"bg-black\/80 px-8 py-4 rounded-full border border-sport-green\/30 flex items-center gap-4 shadow-[0_0_30px_rgba(0,209,107,0.2)]\">\n <div className=\"w-5 h-5 border-2 border-sport-green border-t-transparent rounded-full animate-spin\"><\/div>\n <span className=\"text-white font-medium tracking-wide\">Operazione in corso...<\/span>\n <\/div>\n <\/div>\n )}\n\n <\/main>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n <\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SportSpace Manager<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-5474","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5474"}],"version-history":[{"count":44,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5474\/revisions"}],"predecessor-version":[{"id":5551,"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=\/wp\/v2\/pages\/5474\/revisions\/5551"}],"wp:attachment":[{"href":"https:\/\/www.aviglianabasket.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}