// admin-panel.jsx — Admin settings modal (ADMIN role only) function AdminPanel({ currentUser, onClose }) { const [users, setUsers] = React.useState([]); const [loading, setLoading] = React.useState(true); const [saving, setSaving] = React.useState({}); // uid → bool const [error, setError] = React.useState(null); const [needsRules, setNeedsRules] = React.useState(false); const overlayRef = React.useRef(null); const RULES_URL = 'https://console.firebase.google.com/project/kcgmatch-228f2/firestore/rules'; const RULES_TEXT = `rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { function isAdmin() { return request.auth != null && exists(/databases/$(database)/documents/users/$(request.auth.uid)) && get(/databases/$(database)/documents/users/$(request.auth.uid)).data.role == 'ADMIN'; } match /users/{userId} { allow read, write: if request.auth != null && request.auth.uid == userId; allow read, write: if isAdmin(); } match /users/{userId}/{rest=**} { allow read, write: if request.auth != null && request.auth.uid == userId; allow read, write: if isAdmin(); } } }`; // Load all registered users from Firestore React.useEffect(() => { fbDb.collection('users').get() .then((snap) => { const docs = snap.docs.map((d) => ({ uid: d.id, ...d.data() })); // Sort: current user first, then alphabetically by name/email docs.sort((a, b) => { if (a.uid === currentUser.uid) return -1; if (b.uid === currentUser.uid) return 1; const na = a.displayName || a.email || a.uid; const nb = b.displayName || b.email || b.uid; return na.localeCompare(nb); }); setUsers(docs); setLoading(false); }) .catch(() => { setNeedsRules(true); setLoading(false); }); }, [currentUser.uid]); const handleRoleChange = async (uid, role) => { setSaving((p) => ({ ...p, [uid]: true })); setError(null); try { await fbDb.collection('users').doc(uid).set({ role: role || null }, { merge: true }); setUsers((prev) => prev.map((u) => u.uid === uid ? { ...u, role: role || null } : u)); } catch (e) { setError('Failed to save role: ' + e.message); } finally { setSaving((p) => ({ ...p, [uid]: false })); } }; // Close on overlay click const handleOverlayClick = (e) => { if (e.target === overlayRef.current) onClose(); }; // Close on Escape React.useEffect(() => { const handler = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', handler); return () => document.removeEventListener('keydown', handler); }, [onClose]); const initials = (u) => { const name = u.displayName || u.email || '?'; return name.slice(0, 2).toUpperCase(); }; return (
{/* Header */}
ADMIN

Settings

{/* User Management */}
User Management
Assign roles to control what each user can approve and access. Changes take effect immediately on the user's next action.
{error && (
{error}
)} {needsRules ? (
Firestore rules update required

Your current rules only let users read their own document. To let the admin list all users, paste the rules below into the Firebase console, then reload this panel.

2 Replace the rules editor content with the block below and click Publish
3 Close and reopen this panel — users will load 
{RULES_TEXT}
) : loading ? (
Loading users…
) : users.length === 0 ? (
No users found in Firestore.
) : (
{/* Column headers */}
User Role
{users.map((u) => { const isSelf = u.uid === currentUser.uid; const displayName = u.displayName || u.email?.split('@')[0] || 'Unknown'; const email = u.email || u.uid; return (
{initials(u)}
{displayName} {isSelf && You}
{email}
{saving[u.uid] ? (
) : null}
); })}
)}
{/* Role reference */}
Role Permissions
{[ { role: 'ESTIMATOR', desc: 'View jobs and upload quotes/invoices' }, { role: 'PROJECT_MANAGER', desc: 'All above + approve invoices up to $5,000' }, { role: 'ACCOUNTING', desc: 'All above + approve invoices up to $25,000' }, { role: 'EXECUTIVE', desc: 'All above + approve any invoice amount' }, { role: 'ADMIN', desc: 'Full access including user management' }, ].map(({ role, desc }) => (
{ROLE_LABEL[role] || role} {desc}
))}
); } const AdminPanelStyles = () => ( ); Object.assign(window, { AdminPanel });