tetstes

Baca Juga

import React, { useState, useEffect, useMemo, useRef } from 'react'; import { initializeApp } from 'firebase/app'; import { getFirestore, collection, doc, setDoc, getDoc, onSnapshot, query, updateDoc, addDoc, deleteDoc } from 'firebase/firestore'; import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth'; import { Ticket, Clock, MapPin, Smartphone, CheckCircle2, X, ChevronRight, ChevronLeft, Banknote, Check, Plus, Trash2, Printer, Download, Film, Calendar, Building2, Settings as SettingsIcon, QrCode, Phone, Info, Loader2, Save, Edit3 } from 'lucide-react'; // --- FIREBASE SETUP --- const firebaseConfig = JSON.parse(__firebase_config); const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); const appId = typeof __app_id !== 'undefined' ? __app_id : 'bioskop-etam-v3'; // --- CONFIG --- const ADMIN_PASSWORD = "etamadmin123"; const App = () => { const [user, setUser] = useState(null); const [view, setView] = useState('user'); const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false); const [loading, setLoading] = useState(true); // App Data const [locations, setLocations] = useState([]); const [days, setDays] = useState([]); const [movies, setMovies] = useState([]); const [bookings, setBookings] = useState([]); const [config, setConfig] = useState({ price: 35000, totalSeats: 100, qrisLink: "" }); // User Selection const [selectedLocation, setSelectedLocation] = useState(null); const [selectedDay, setSelectedDay] = useState(null); const [activeMovie, setActiveMovie] = useState(null); const [selectedSeats, setSelectedSeats] = useState([]); const [paymentMethod, setPaymentMethod] = useState("QRIS"); const [orderStep, setOrderStep] = useState(0); const [myBookingId, setMyBookingId] = useState(null); const [showTicketModal, setShowTicketModal] = useState(null); // --- INITIALIZATION --- useEffect(() => { const initAuth = async () => { try { if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) { await signInWithCustomToken(auth, __initial_auth_token); } else { await signInAnonymously(auth); } } catch (err) { console.error("Auth error", err); } }; initAuth(); const unsubAuth = onAuthStateChanged(auth, (u) => { setUser(u); setLoading(false); }); return () => unsubAuth(); }, []); // --- DATA FETCHING (FIRESTORE) --- useEffect(() => { if (!user) return; const paths = { locs: collection(db, 'artifacts', appId, 'public', 'data', 'locations'), days: collection(db, 'artifacts', appId, 'public', 'data', 'days'), movies: collection(db, 'artifacts', appId, 'public', 'data', 'movies'), bookings: collection(db, 'artifacts', appId, 'public', 'data', 'bookings') }; const unsubLocs = onSnapshot(paths.locs, (s) => setLocations(s.docs.map(d => ({id: d.id, ...d.data()}))), (e) => console.error(e)); const unsubDays = onSnapshot(paths.days, (s) => setDays(s.docs.map(d => ({id: d.id, ...d.data()}))), (e) => console.error(e)); const unsubMovies = onSnapshot(paths.movies, (s) => setMovies(s.docs.map(d => ({id: d.id, ...d.data()}))), (e) => console.error(e)); const unsubConfig = onSnapshot(doc(db, 'artifacts', appId, 'public', 'data', 'config', 'main'), (s) => { if(s.exists()) setConfig(s.data()); }, (e) => console.error(e)); const unsubBookings = onSnapshot(paths.bookings, (s) => setBookings(s.docs.map(d => ({id: d.id, ...d.data()}))), (e) => console.error(e)); return () => { unsubLocs(); unsubDays(); unsubMovies(); unsubConfig(); unsubBookings(); }; }, [user]); // --- ACTIONS --- const handleBookingSubmit = async (name, phone, refCode) => { if (!user) return; const bookingData = { bookingCode: 'ETM-' + Math.random().toString(36).substr(2, 6).toUpperCase(), customerName: name, customerPhone: phone, paymentRef: refCode || 'CASH_WAITING', locationName: selectedLocation.name, day: selectedDay, movieTitle: activeMovie.title, movieTime: activeMovie.time, seats: selectedSeats, total: selectedSeats.length * config.price, method: paymentMethod, status: 'Pending', createdAt: new Date().toISOString() }; try { const docRef = await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'bookings'), bookingData); setMyBookingId(docRef.id); setOrderStep(5); } catch (e) { console.error(e); } }; const updateStatus = async (id, status) => { const d = doc(db, 'artifacts', appId, 'public', 'data', 'bookings', id); await updateDoc(d, { status }); }; const deleteItem = async (col, id) => { if(!window.confirm("Hapus item ini?")) return; try { await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', col, id)); } catch (err) { console.error("Delete error:", err); } }; const saveItemEdit = async (col, id, data) => { try { const d = doc(db, 'artifacts', appId, 'public', 'data', col, id); await updateDoc(d, data); // Feedback visual bisa ditambahkan di sini jika perlu } catch (err) { console.error("Update error:", err); } }; // --- COMPONENTS --- const TicketModal = ({ booking }) => (

E-TICKET RESMI

Booking Code

{booking.bookingCode}

Lokasi

{booking.locationName}

Nama

{booking.customerName}

Hari

{booking.day}

Film

{booking.movieTitle}

Kursi

{booking.seats.join(', ')}

Lunas & Sah

); const UserInterface = () => { const occupied = useMemo(() => activeMovie && selectedLocation && selectedDay ? bookings.filter(b => b.movieTitle === activeMovie.title && b.locationName === selectedLocation.name && b.day === selectedDay && b.status !== 'Cancelled').flatMap(b => b.seats) : [] , [bookings, activeMovie, selectedLocation, selectedDay]); useEffect(() => { if (myBookingId) { const unsub = onSnapshot(doc(db, 'artifacts', appId, 'public', 'data', 'bookings', myBookingId), (s) => { if (s.exists() && s.data().status === 'Paid') { setShowTicketModal({id: s.id, ...s.data()}); } }, (e) => console.error(e)); return () => unsub(); } }, [myBookingId]); if (loading) return

; return (

{orderStep > 0 && orderStep < 5 && }

{orderStep === 0 ? "Pilih Bioskop" : orderStep === 1 ? "Pilih Jadwal" : orderStep === 2 ? "Pilih Film" : orderStep === 3 ? "Pilih Kursi" : "Pembayaran"}

{orderStep === 0 && (

{locations.length === 0 &&

Belum ada lokasi tersedia

} {locations.map(loc => (

{ setSelectedLocation(loc); setOrderStep(1); }} className="bg-white rounded-[2rem] overflow-hidden shadow-sm hover:ring-4 ring-orange-500/20 cursor-pointer transition-all active:scale-95"> e.target.src='https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?w=400'}/>

{loc.name}

))}

)} {orderStep === 1 && (

Lokasi Dipilih

{selectedLocation?.name}

{days.length === 0 &&

Jadwal belum diatur

} {days.map(d => ( ))}

)} {orderStep === 2 && (

{movies.length === 0 &&

Film belum tersedia

} {movies.map(m => (

{ setActiveMovie(m); setOrderStep(3); setSelectedSeats([]); }} className="bg-white rounded-[2rem] overflow-hidden shadow-sm cursor-pointer hover:scale-105 transition-all border active:scale-95"> e.target.src='https://images.unsplash.com/photo-1485846234645-a62644f84728?w=400'}/>

{m.title}

{m.time} WITA

))}

)} {orderStep === 3 && activeMovie && (

{Array.from({ length: config.totalSeats || 100 }).map((_, i) => { const sid = `S${i+1}`; const isOcc = occupied.includes(sid); const isSel = selectedSeats.includes(sid); return ( ); })}

{selectedSeats.length > 0 && ( )}

)} {orderStep === 4 && (

Konfirmasi Pembayaran

Nama & No. WhatsApp

{paymentMethod === 'QRIS' && config.qrisLink && (

Scan QRIS Berikut

)}

)} {orderStep === 5 && (

Menunggu Validasi

Sistem sedang memproses pembayaran Anda.
Jangan tutup halaman ini
Tiket Digital akan otomatis muncul di sini.

Jika lebih dari 10 menit tiket belum muncul, segera hubungi Admin melalui tombol bantuan di bawah.

)}

); }; const AdminInterface = () => { const [pwd, setPwd] = useState(""); const [tab, setTab] = useState('orders'); if (!isAdminLoggedIn) { return (

Etam Admin Panel

setPwd(e.target.value)} className="w-full bg-slate-800 border-none p-4 rounded-2xl text-white outline-none mb-4 font-bold text-center tracking-[0.5em]" placeholder="••••••" />

); } return (

{[ {id: 'orders', label: 'Pesanan'}, {id: 'locations', label: 'Lokasi'}, {id: 'movies', label: 'Film'}, {id: 'schedule', label: 'Jadwal'}, {id: 'settings', label: 'Sistem'} ].map(t => ( ))}

{tab === 'orders' && (

Live Transactions

{bookings.length === 0 && } {bookings.slice().sort((a,b) => new Date(b.createdAt) - new Date(a.createdAt)).map(b => ( ))}

Customer	Show Info	Status	Aksi
Belum ada transaksi
{b.customerName} {b.customerPhone} Ref: {b.paymentRef}	{b.movieTitle} {b.locationName} | {b.seats?.join(', ')}	{b.status}	{b.status === 'Pending' && ( )}

)} {tab === 'locations' && (

{locations.map(loc => (

Nama Bioskop saveItemEdit('locations', loc.id, { name: e.target.value.toUpperCase() })} />

URL Gambar Header saveItemEdit('locations', loc.id, { image: e.target.value })} />

Perubahan otomatis tersimpan saat berpindah input

))}

)} {tab === 'movies' && (

{movies.map(m => (

Judul Film saveItemEdit('movies', m.id, { title: e.target.value.toUpperCase() })} />

Jam Tayang (e.g 19:30) saveItemEdit('movies', m.id, { time: e.target.value })} />

URL Poster (3:4) saveItemEdit('movies', m.id, { poster: e.target.value })} />

))}

)} {tab === 'schedule' && (

Manage Schedule

{days.map((d) => (

saveItemEdit('days', d.id, { name: e.target.value.toUpperCase() })} />

))}

Tekan Luar Kotak Setelah Edit Untuk Menyimpan

)} {tab === 'settings' && (

System Master

Harga Tiket Satuan (Rp)

Rp setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'config', 'main'), { ...config, price: parseInt(e.target.value) || 0 })} />

Total Kursi Studio setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'config', 'main'), { ...config, totalSeats: parseInt(e.target.value) || 0 })} />

Link QRIS (IMG URL) setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'config', 'main'), { ...config, qrisLink: e.target.value })} />

Sistem Realtime

Firestore Database v2.1

)}

); }; return (

BIOSKOP ETAM

PRO MAX EDITION

{view === 'user' ? : } {showTicketModal && }

); }; export default App;