import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import {
getAuth,
signInAnonymously,
signInWithCustomToken,
onAuthStateChanged
} from 'firebase/auth';
import {
getFirestore,
collection,
doc,
onSnapshot,
addDoc,
deleteDoc,
query,
updateDoc
} from 'firebase/firestore';
import {
Camera,
Plus,
Trash2,
Shield,
Search,
X,
Calendar,
MapPin,
DollarSign,
Edit2,
LogOut,
User,
ExternalLink,
ChevronRight
} from 'lucide-react';
// --- Configuration ---
const firebaseConfig = typeof __firebase_config !== 'undefined'
? JSON.parse(__firebase_config)
: {
apiKey: "AIzaSyBHgahV5XvJjDBJzsAWYr66IZue6--F0E4",
authDomain: "cpass-media-hub.firebaseapp.com",
projectId: "cpass-media-hub",
storageBucket: "cpass-media-hub.firebasestorage.app",
messagingSenderId: "532297121651",
appId: "1:532297121651:web:658c1f964a387be88544f8"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'cpass-media-hub';
const EVENT_TYPES = [
"Weddings", "Award Ceremonies", "Networking Events", "Birthday Celebrations",
"Lifestyle Shoots", "Content Creation Sessions", "Podcast / YouTube Recording",
"Gala", "Workshops / Classes", "Community Events", "Nonprofit Fundraisers",
"Other / Custom Event"
];
export default function App() {
const [user, setUser] = useState(null);
const [isAuthenticated, setIsAuthenticated] = useState(false);
const [isAdmin, setIsAdmin] = useState(false);
const [opportunities, setOpportunities] = useState([]);
const [searchTerm, setSearchTerm] = useState("");
const [filter, setFilter] = useState("all");
const [isModalOpen, setIsModalOpen] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const [editingId, setEditingId] = useState(null);
const [passInput, setPassInput] = useState("");
const [loginError, setLoginError] = useState(false);
// Form State
const [formData, setFormData] = useState({
title: '',
type: 'Weddings',
price: '',
startDate: '',
endDate: '',
city: '',
state: '',
contactName: '',
contactPhone: '',
contactEmail: '',
description: ''
});
// 1. Auth Logic
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 (error) {
console.error("Auth error:", error);
}
};
initAuth();
const unsubscribe = onAuthStateChanged(auth, (u) => {
setUser(u);
});
return () => unsubscribe();
}, []);
// 2. Data Logic
useEffect(() => {
if (!user) return;
const opportunitiesCollection = collection(db, 'artifacts', appId, 'public', 'data', 'opportunities');
setIsLoading(true);
const unsubscribe = onSnapshot(opportunitiesCollection, (snapshot) => {
const items = snapshot.docs.map(doc => ({
id: doc.id,
...doc.data()
}));
setOpportunities(items);
setIsLoading(false);
}, (err) => {
console.error("Firestore error:", err);
setIsLoading(false);
});
return () => unsubscribe();
}, [user]);
const filteredOpportunities = useMemo(() => {
return opportunities.filter(item => {
const searchStr = `${item.title} ${item.description} ${item.city} ${item.state}`.toLowerCase();
const matchesSearch = searchStr.includes(searchTerm.toLowerCase());
const matchesType = filter === 'all' || item.type === filter;
return matchesSearch && matchesType;
});
}, [opportunities, searchTerm, filter]);
const handlePortalLogin = (e) => {
e.preventDefault();
if (passInput === 'cpassmedia23') {
setIsAuthenticated(true);
setLoginError(false);
} else {
setLoginError(true);
}
};
const handleAdminAuth = () => {
if (isAdmin) {
setIsAdmin(false);
return;
}
const pass = window.prompt('Enter Management Access Key:');
if (pass === 'ShaShi04!') {
setIsAdmin(true);
} else if (pass !== null) {
alert("Unauthorized: Management Key is incorrect.");
}
};
const handleSaveLead = async (e) => {
e.preventDefault();
if (!user) return;
try {
const opportunitiesCollection = collection(db, 'artifacts', appId, 'public', 'data', 'opportunities');
if (editingId) {
const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'opportunities', editingId);
await updateDoc(docRef, { ...formData, updatedAt: new Date().toISOString() });
} else {
await addDoc(opportunitiesCollection, {
...formData,
createdAt: new Date().toISOString(),
owner: user.uid
});
}
closeModal();
} catch (err) {
console.error("Error saving lead:", err);
}
};
const handleDelete = async (id) => {
if (!isAdmin) return;
if (!window.confirm("Archive this opportunity? It will be removed from the public list.")) return;
try {
const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'opportunities', id);
await deleteDoc(docRef);
} catch (err) {
console.error("Error deleting lead:", err);
}
};
const openModal = (item = null) => {
if (item) {
setFormData(item);
setEditingId(item.id);
} else {
setFormData({
title: '', type: 'Weddings', price: '', startDate: '', endDate: '',
city: '', state: '', contactName: '', contactPhone: '', contactEmail: '', description: ''
});
setEditingId(null);
}
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false);
setEditingId(null);
};
// Login Screen
if (!isAuthenticated) {
return (
CPASS Media Opportunity Hub
{/* Camera Icon Logo inside the box and above Portal Access */}
Portal Access
Please enter the media password to continue.
© 2026 CPASS Consulting Services • Internal Use Only
);
}
return (
{/* Navigation */}
{/* Main Content */}
Active Opportunities
Available assignments for the media network.
{isAdmin && (
)}
{/* Filters */}
{isLoading ? (
) : (
{filteredOpportunities.map((item) => (
{item.type}
{isAdmin && (
)}
{item.title}
{Number(item.price).toLocaleString()}
{item.city}, {item.state}
{item.startDate} {item.endDate ? `— ${item.endDate}` : ''}
{item.description}
{item.contactName}
Point of Contact
))}
No matching opportunities
Try changing your filters or searching for different keywords.
)}
{/* Modal Overlay */}
{isModalOpen && (
{editingId ? 'Edit Assignment' : 'Create New Assignment'}
)}
{/* Footer */}
);
}
