added admin page
This commit is contained in:
512
src/admin.js
Normal file
512
src/admin.js
Normal file
@@ -0,0 +1,512 @@
|
||||
import './admin.css';
|
||||
import { initAuth, onAuthChange, loginWithGoogle, logout } from './auth.js';
|
||||
import { db } from './firebase.js';
|
||||
import { doc, getDoc, setDoc } from 'firebase/firestore';
|
||||
|
||||
// Hardcoded admin allowlist — used to bootstrap the Firestore config/admins document
|
||||
// on first login if it doesn't exist yet.
|
||||
const SEED_ADMINS = ['pcgurudm@gmail.com'];
|
||||
import {
|
||||
getDonors,
|
||||
addDonorWithDate,
|
||||
addDonorsBatch,
|
||||
updateDonor,
|
||||
deleteDonor,
|
||||
calculateTotal,
|
||||
} from './donors.js';
|
||||
|
||||
let allDonors = [];
|
||||
|
||||
// ===== Init =====
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initAuth();
|
||||
initAuthUI();
|
||||
initTabs();
|
||||
initAddForm();
|
||||
initCSVImport();
|
||||
initEditModal();
|
||||
});
|
||||
|
||||
// ===== Auth =====
|
||||
function initAuthUI() {
|
||||
document.getElementById('loginGoogle').addEventListener('click', loginWithGoogle);
|
||||
document.getElementById('logoutBtn').addEventListener('click', logout);
|
||||
document.getElementById('unauthorizedLogout').addEventListener('click', logout);
|
||||
onAuthChange(handleAuth);
|
||||
}
|
||||
|
||||
async function handleAuth(user) {
|
||||
const authSection = document.getElementById('authSection');
|
||||
const unauthorizedSection = document.getElementById('unauthorizedSection');
|
||||
const adminContent = document.getElementById('adminContent');
|
||||
const logoutBtn = document.getElementById('logoutBtn');
|
||||
|
||||
if (!user) {
|
||||
authSection.classList.remove('hidden');
|
||||
unauthorizedSection.classList.add('hidden');
|
||||
adminContent.classList.add('hidden');
|
||||
logoutBtn.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
logoutBtn.style.display = '';
|
||||
|
||||
// Check admin allowlist
|
||||
const isAdmin = await checkAdmin(user.email);
|
||||
if (!isAdmin) {
|
||||
authSection.classList.add('hidden');
|
||||
unauthorizedSection.classList.remove('hidden');
|
||||
adminContent.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
authSection.classList.add('hidden');
|
||||
unauthorizedSection.classList.add('hidden');
|
||||
adminContent.classList.remove('hidden');
|
||||
loadDonors();
|
||||
}
|
||||
|
||||
async function checkAdmin(email) {
|
||||
try {
|
||||
const adminDocRef = doc(db, 'config', 'admins');
|
||||
const adminDoc = await getDoc(adminDocRef);
|
||||
|
||||
if (!adminDoc.exists()) {
|
||||
// No allowlist yet — bootstrap it if this user is in the seed list
|
||||
if (SEED_ADMINS.includes(email)) {
|
||||
await setDoc(adminDocRef, { emails: SEED_ADMINS });
|
||||
console.log('Admin allowlist created with seed admins.');
|
||||
return true;
|
||||
}
|
||||
// No doc and not a seed admin — deny
|
||||
return false;
|
||||
}
|
||||
|
||||
const emails = adminDoc.data()?.emails || [];
|
||||
return emails.includes(email);
|
||||
} catch (err) {
|
||||
console.error('Admin check failed:', err);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Tabs =====
|
||||
function initTabs() {
|
||||
document.querySelectorAll('.admin-tab').forEach((btn) => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('.admin-tab').forEach((b) => b.classList.remove('active'));
|
||||
document.querySelectorAll('.admin-panel').forEach((p) => p.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
document.getElementById(`panel-${btn.dataset.tab}`).classList.add('active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ===== Load Donors =====
|
||||
async function loadDonors() {
|
||||
try {
|
||||
allDonors = await getDonors();
|
||||
updateStats();
|
||||
renderDonorTable();
|
||||
} catch (err) {
|
||||
console.error('Failed to load donors:', err);
|
||||
showToast('Failed to load donors.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
const total = calculateTotal(allDonors);
|
||||
document.getElementById('statTotal').textContent = `$${total.toLocaleString()}`;
|
||||
document.getElementById('statCount').textContent = allDonors.length;
|
||||
}
|
||||
|
||||
// ===== Add Donor Form =====
|
||||
function initAddForm() {
|
||||
const form = document.getElementById('addDonorForm');
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const btn = document.getElementById('addDonorBtn');
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Adding...';
|
||||
|
||||
try {
|
||||
await addDonorWithDate({
|
||||
name: document.getElementById('donorName').value.trim(),
|
||||
amount: document.getElementById('donorAmount').value,
|
||||
classYear: document.getElementById('donorClassYear').value.trim(),
|
||||
message: document.getElementById('donorMessage').value.trim(),
|
||||
anonymous: document.getElementById('donorAnonymous').checked,
|
||||
date: document.getElementById('donorDate').value || null,
|
||||
});
|
||||
showToast('Donor added!', 'success');
|
||||
form.reset();
|
||||
await loadDonors();
|
||||
} catch (err) {
|
||||
console.error('Failed to add donor:', err);
|
||||
showToast('Failed to add donor.', 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Add Donor';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ===== CSV Import =====
|
||||
let csvRows = [];
|
||||
let csvHeaders = [];
|
||||
|
||||
function initCSVImport() {
|
||||
const fileInput = document.getElementById('csvFile');
|
||||
fileInput.addEventListener('change', handleFileSelect);
|
||||
|
||||
document.getElementById('importBtn').addEventListener('click', runImport);
|
||||
document.getElementById('csvCancelBtn').addEventListener('click', resetCSV);
|
||||
|
||||
// Update preview when mappings change
|
||||
document.querySelectorAll('.mapping-grid select').forEach((sel) => {
|
||||
sel.addEventListener('change', updatePreview);
|
||||
});
|
||||
}
|
||||
|
||||
function handleFileSelect(e) {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (evt) => {
|
||||
const text = evt.target.result;
|
||||
const parsed = parseCSV(text);
|
||||
if (parsed.length < 2) {
|
||||
showToast('CSV file appears empty or has no data rows.', 'error');
|
||||
return;
|
||||
}
|
||||
csvHeaders = parsed[0];
|
||||
csvRows = parsed.slice(1);
|
||||
setupMapping();
|
||||
document.getElementById('csvMapping').classList.remove('hidden');
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
function parseCSV(text) {
|
||||
const rows = [];
|
||||
let current = [];
|
||||
let field = '';
|
||||
let inQuotes = false;
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const ch = text[i];
|
||||
const next = text[i + 1];
|
||||
|
||||
if (inQuotes) {
|
||||
if (ch === '"' && next === '"') {
|
||||
field += '"';
|
||||
i++;
|
||||
} else if (ch === '"') {
|
||||
inQuotes = false;
|
||||
} else {
|
||||
field += ch;
|
||||
}
|
||||
} else {
|
||||
if (ch === '"') {
|
||||
inQuotes = true;
|
||||
} else if (ch === ',') {
|
||||
current.push(field.trim());
|
||||
field = '';
|
||||
} else if (ch === '\n' || (ch === '\r' && next === '\n')) {
|
||||
current.push(field.trim());
|
||||
if (current.some((c) => c !== '')) rows.push(current);
|
||||
current = [];
|
||||
field = '';
|
||||
if (ch === '\r') i++;
|
||||
} else {
|
||||
field += ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Last field/row
|
||||
current.push(field.trim());
|
||||
if (current.some((c) => c !== '')) rows.push(current);
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
||||
function setupMapping() {
|
||||
const fields = ['mapName', 'mapAmount', 'mapClassYear', 'mapMessage', 'mapDate', 'mapAnonymous'];
|
||||
const hints = {
|
||||
mapName: ['name', 'donor', 'first', 'full'],
|
||||
mapAmount: ['amount', 'donation', 'gift', 'total', 'sum'],
|
||||
mapClassYear: ['class', 'year', 'grad'],
|
||||
mapMessage: ['message', 'note', 'comment'],
|
||||
mapDate: ['date', 'time', 'when'],
|
||||
mapAnonymous: ['anonymous', 'anon'],
|
||||
};
|
||||
|
||||
for (const fieldId of fields) {
|
||||
const select = document.getElementById(fieldId);
|
||||
select.innerHTML = '<option value="">-- skip --</option>';
|
||||
csvHeaders.forEach((h, i) => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = i;
|
||||
opt.textContent = h;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
// Auto-map by fuzzy match
|
||||
const keywords = hints[fieldId];
|
||||
const match = csvHeaders.findIndex((h) =>
|
||||
keywords.some((k) => h.toLowerCase().includes(k))
|
||||
);
|
||||
if (match !== -1) select.value = match;
|
||||
}
|
||||
|
||||
updatePreview();
|
||||
}
|
||||
|
||||
function getMappedRow(row) {
|
||||
const get = (id) => {
|
||||
const val = document.getElementById(id).value;
|
||||
return val !== '' ? (row[Number(val)] || '') : '';
|
||||
};
|
||||
return {
|
||||
name: get('mapName'),
|
||||
amount: get('mapAmount'),
|
||||
classYear: get('mapClassYear'),
|
||||
message: get('mapMessage'),
|
||||
date: get('mapDate'),
|
||||
anonymous: get('mapAnonymous'),
|
||||
};
|
||||
}
|
||||
|
||||
function updatePreview() {
|
||||
const head = document.getElementById('csvPreviewHead');
|
||||
const body = document.getElementById('csvPreviewBody');
|
||||
|
||||
head.innerHTML = '<tr><th>Name</th><th>Amount</th><th>Class Year</th><th>Date</th><th>Message</th><th>Anon</th></tr>';
|
||||
|
||||
const previewRows = csvRows.slice(0, 5);
|
||||
body.innerHTML = previewRows
|
||||
.map((row) => {
|
||||
const m = getMappedRow(row);
|
||||
return `<tr>
|
||||
<td>${esc(m.name)}</td>
|
||||
<td>${esc(m.amount)}</td>
|
||||
<td>${esc(m.classYear)}</td>
|
||||
<td>${esc(m.date)}</td>
|
||||
<td>${esc(m.message)}</td>
|
||||
<td>${normBool(m.anonymous) ? 'Yes' : 'No'}</td>
|
||||
</tr>`;
|
||||
})
|
||||
.join('');
|
||||
|
||||
document.getElementById('previewCount').textContent = `(${csvRows.length} rows total)`;
|
||||
}
|
||||
|
||||
function normBool(val) {
|
||||
if (!val) return false;
|
||||
const v = val.toString().toLowerCase().trim();
|
||||
return v === 'true' || v === 'yes' || v === '1';
|
||||
}
|
||||
|
||||
async function runImport() {
|
||||
const importBtn = document.getElementById('importBtn');
|
||||
const progressEl = document.getElementById('importProgress');
|
||||
const progressFill = document.getElementById('progressFill');
|
||||
const progressText = document.getElementById('progressText');
|
||||
|
||||
const donors = csvRows
|
||||
.map((row) => {
|
||||
const m = getMappedRow(row);
|
||||
const amount = parseFloat(m.amount.replace(/[^0-9.\-]/g, ''));
|
||||
if (!m.name && !normBool(m.anonymous)) return null;
|
||||
if (isNaN(amount) || amount <= 0) return null;
|
||||
return {
|
||||
name: m.name || 'Anonymous',
|
||||
amount,
|
||||
classYear: m.classYear,
|
||||
message: m.message,
|
||||
date: m.date || null,
|
||||
anonymous: normBool(m.anonymous),
|
||||
};
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
if (donors.length === 0) {
|
||||
showToast('No valid rows to import. Check your column mapping.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm(`Import ${donors.length} donors? (${csvRows.length - donors.length} rows will be skipped due to missing name/amount)`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
importBtn.disabled = true;
|
||||
progressEl.classList.remove('hidden');
|
||||
|
||||
try {
|
||||
// Process in chunks of 500 with progress
|
||||
const chunkSize = 500;
|
||||
let imported = 0;
|
||||
for (let i = 0; i < donors.length; i += chunkSize) {
|
||||
const chunk = donors.slice(i, i + chunkSize);
|
||||
await addDonorsBatch(chunk);
|
||||
imported += chunk.length;
|
||||
const pct = Math.round((imported / donors.length) * 100);
|
||||
progressFill.style.width = pct + '%';
|
||||
progressText.textContent = `Imported ${imported} of ${donors.length}...`;
|
||||
}
|
||||
|
||||
showToast(`Successfully imported ${imported} donors!`, 'success');
|
||||
resetCSV();
|
||||
await loadDonors();
|
||||
} catch (err) {
|
||||
console.error('Import failed:', err);
|
||||
showToast('Import failed. Some rows may have been imported.', 'error');
|
||||
} finally {
|
||||
importBtn.disabled = false;
|
||||
progressEl.classList.add('hidden');
|
||||
progressFill.style.width = '0%';
|
||||
}
|
||||
}
|
||||
|
||||
function resetCSV() {
|
||||
csvRows = [];
|
||||
csvHeaders = [];
|
||||
document.getElementById('csvFile').value = '';
|
||||
document.getElementById('csvMapping').classList.add('hidden');
|
||||
}
|
||||
|
||||
// ===== Donor Table =====
|
||||
function renderDonorTable(filter = '') {
|
||||
const tbody = document.getElementById('donorTableBody');
|
||||
const emptyState = document.getElementById('donorListEmpty');
|
||||
const filtered = filter
|
||||
? allDonors.filter((d) => d.name.toLowerCase().includes(filter.toLowerCase()))
|
||||
: allDonors;
|
||||
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = '';
|
||||
emptyState.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
emptyState.classList.add('hidden');
|
||||
tbody.innerHTML = filtered
|
||||
.map((d) => {
|
||||
const date = d.date?.toDate ? d.date.toDate().toLocaleDateString() : '';
|
||||
return `<tr>
|
||||
<td>${esc(d.name)}${d.anonymous ? ' <span class="anon-badge">Anon</span>' : ''}</td>
|
||||
<td>$${(d.amount || 0).toLocaleString()}</td>
|
||||
<td>${esc(d.classYear)}</td>
|
||||
<td>${date}</td>
|
||||
<td class="msg-cell">${esc(d.message)}</td>
|
||||
<td class="action-cell">
|
||||
<button class="btn-icon btn-edit" data-id="${d.id}" title="Edit">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
|
||||
</button>
|
||||
<button class="btn-icon btn-delete" data-id="${d.id}" title="Delete">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>`;
|
||||
})
|
||||
.join('');
|
||||
|
||||
// Attach handlers
|
||||
tbody.querySelectorAll('.btn-edit').forEach((btn) => {
|
||||
btn.addEventListener('click', () => openEditModal(btn.dataset.id));
|
||||
});
|
||||
tbody.querySelectorAll('.btn-delete').forEach((btn) => {
|
||||
btn.addEventListener('click', () => handleDelete(btn.dataset.id));
|
||||
});
|
||||
|
||||
// Search
|
||||
const searchInput = document.getElementById('donorSearch');
|
||||
searchInput.removeEventListener('input', searchHandler);
|
||||
searchInput.addEventListener('input', searchHandler);
|
||||
}
|
||||
|
||||
function searchHandler(e) {
|
||||
renderDonorTable(e.target.value.trim());
|
||||
}
|
||||
|
||||
async function handleDelete(id) {
|
||||
if (!confirm('Delete this donor? This cannot be undone.')) return;
|
||||
try {
|
||||
await deleteDonor(id);
|
||||
showToast('Donor deleted.', 'success');
|
||||
await loadDonors();
|
||||
} catch (err) {
|
||||
console.error('Delete failed:', err);
|
||||
showToast('Failed to delete donor.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Edit Modal =====
|
||||
function initEditModal() {
|
||||
const modal = document.getElementById('editModal');
|
||||
document.getElementById('editModalClose').addEventListener('click', () => modal.classList.add('hidden'));
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) modal.classList.add('hidden');
|
||||
});
|
||||
|
||||
document.getElementById('editDonorForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const id = document.getElementById('editDonorId').value;
|
||||
const btn = e.target.querySelector('button[type="submit"]');
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Saving...';
|
||||
|
||||
try {
|
||||
await updateDonor(id, {
|
||||
name: document.getElementById('editAnonymous').checked
|
||||
? 'Anonymous'
|
||||
: document.getElementById('editName').value.trim(),
|
||||
amount: Number(document.getElementById('editAmount').value),
|
||||
classYear: document.getElementById('editClassYear').value.trim(),
|
||||
message: document.getElementById('editMessage').value.trim(),
|
||||
anonymous: document.getElementById('editAnonymous').checked,
|
||||
});
|
||||
showToast('Donor updated!', 'success');
|
||||
modal.classList.add('hidden');
|
||||
await loadDonors();
|
||||
} catch (err) {
|
||||
console.error('Update failed:', err);
|
||||
showToast('Failed to update donor.', 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Save Changes';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function openEditModal(id) {
|
||||
const donor = allDonors.find((d) => d.id === id);
|
||||
if (!donor) return;
|
||||
|
||||
document.getElementById('editDonorId').value = id;
|
||||
document.getElementById('editName').value = donor.name || '';
|
||||
document.getElementById('editAmount').value = donor.amount || '';
|
||||
document.getElementById('editClassYear').value = donor.classYear || '';
|
||||
document.getElementById('editMessage').value = donor.message || '';
|
||||
document.getElementById('editAnonymous').checked = !!donor.anonymous;
|
||||
document.getElementById('editModal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
// ===== Utilities =====
|
||||
function esc(str) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str || '';
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function showToast(message, type = 'info') {
|
||||
const existing = document.querySelector('.toast');
|
||||
if (existing) existing.remove();
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast ${type}`;
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
setTimeout(() => toast.remove(), 4000);
|
||||
}
|
||||
Reference in New Issue
Block a user