easc-cli 1.1.37 → 1.1.41

package/charity-website/src/js/admin.js

@@ -1,743 +0,0 @@
-// Admin Dashboard JavaScript
-const SUPABASE_URL = "https://affhpjwojmovvrwxlnmn.supabase.co"
-const SUPABASE_ANON_KEY =
-  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFmZmhwandvam1vdnZyd3hsbm1uIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjkwMTgyMjMsImV4cCI6MjA4NDU5NDIyM30.fN44OO4Plw-45fL7l-G1sSfliPvveN3t-gP1Pwm0LME"
-
-// Initialize Supabase
-const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
-
-// Global state
-let charities = []
-let donations = []
-let categories = []
-let currentEditCharity = null
-let currentEditCategory = null
-let donationsChart = null
-
-// DOM elements
-const navLinks = document.querySelectorAll(".nav-link")
-const contentSections = document.querySelectorAll(".content-section")
-const pageTitle = document.getElementById("pageTitle")
-
-// Modal elements
-const charityModal = document.getElementById("charityModal")
-const charityForm = document.getElementById("charityForm")
-const categoryModal = document.getElementById("categoryModal")
-const categoryForm = document.getElementById("categoryForm")
-
-// Initialize admin dashboard
-document.addEventListener("DOMContentLoaded", async () => {
-  await initializeAdmin()
-})
-
-async function initializeAdmin() {
-  try {
-    setupEventListeners()
-    await loadDashboardData()
-    showSection("dashboard")
-  } catch (error) {
-    console.error("Error initializing admin:", error)
-    showToast("Error loading admin dashboard", "error")
-  }
-}
-
-// Event Listeners
-function setupEventListeners() {
-  // Navigation
-  navLinks.forEach((link) => {
-    link.addEventListener("click", (e) => {
-      e.preventDefault()
-      const section = link.dataset.section
-      showSection(section)
-    })
-  })
-
-  // Forms
-  charityForm.addEventListener("submit", handleCharitySubmit)
-  categoryForm.addEventListener("submit", handleCategorySubmit)
-
-  // Filters
-  document.getElementById("donationStatusFilter")?.addEventListener("change", loadDonations)
-  document.getElementById("donationDateFilter")?.addEventListener("change", loadDonations)
-}
-
-// Navigation
-function showSection(sectionName) {
-  // Update nav links
-  navLinks.forEach((link) => {
-    link.classList.remove("active")
-    if (link.dataset.section === sectionName) {
-      link.classList.add("active")
-    }
-  })
-
-  // Update content sections
-  contentSections.forEach((section) => {
-    section.classList.remove("active")
-  })
-  document.getElementById(sectionName).classList.add("active")
-
-  // Update page title
-  const titles = {
-    dashboard: "Dashboard",
-    charities: "Charities",
-    donations: "Donations",
-    categories: "Categories",
-    settings: "Settings",
-  }
-  pageTitle.textContent = titles[sectionName] || "Admin"
-
-  // Load section data
-  loadSectionData(sectionName)
-}
-
-// Load section data
-async function loadSectionData(section) {
-  try {
-    switch (section) {
-      case "dashboard":
-        await loadDashboardData()
-        break
-      case "charities":
-        await loadCharities()
-        break
-      case "donations":
-        await loadDonations()
-        break
-      case "categories":
-        await loadCategories()
-        break
-    }
-  } catch (error) {
-    console.error(`Error loading ${section} data:`, error)
-    showToast(`Error loading ${section} data`, "error")
-  }
-}
-
-// Load dashboard data
-async function loadDashboardData() {
-  try {
-    // Load all data
-    const [charitiesData, donationsData, categoriesData] = await Promise.all([
-      loadCharitiesData(),
-      loadDonationsData(),
-      loadCategoriesData(),
-    ])
-
-    // Update stats
-    updateDashboardStats(charitiesData, donationsData)
-
-    // Update charts
-    updateDonationsChart(donationsData)
-    updateTopCharities(charitiesData)
-    updateRecentActivity(donationsData, charitiesData)
-  } catch (error) {
-    console.error("Error loading dashboard data:", error)
-    throw error
-  }
-}
-
-// Update dashboard stats
-function updateDashboardStats(charitiesData, donationsData) {
-  const totalCharities = charitiesData.length
-  const totalDonations = donationsData
-    .filter((d) => d.payment_status === "completed")
-    .reduce((sum, d) => sum + parseFloat(d.amount), 0)
-  const totalDonors = new Set(donationsData.filter((d) => d.payment_status === "completed").map((d) => d.donor_email))
-    .size
-  const avgDonation = totalDonors > 0 ? totalDonations / totalDonors : 0
-
-  document.getElementById("totalCharitiesStat").textContent = totalCharities
-  document.getElementById("totalDonationsStat").textContent = `$${totalDonations.toLocaleString()}`
-  document.getElementById("totalDonorsStat").textContent = totalDonors
-  document.getElementById("avgDonationStat").textContent = `$${avgDonation.toFixed(2)}`
-}
-
-// Update donations chart
-function updateDonationsChart(donationsData) {
-  const ctx = document.getElementById("donationsChart")
-  if (!ctx) return
-
-  // Group donations by date (last 7 days)
-  const last7Days = []
-  const donationAmounts = []
-
-  for (let i = 6; i >= 0; i--) {
-    const date = new Date()
-    date.setDate(date.getDate() - i)
-    const dateStr = date.toISOString().split("T")[0]
-    last7Days.push(date.toLocaleDateString("en-US", { weekday: "short" }))
-
-    const dayTotal = donationsData
-      .filter((d) => d.payment_status === "completed" && d.created_at.startsWith(dateStr))
-      .reduce((sum, d) => sum + parseFloat(d.amount), 0)
-    donationAmounts.push(dayTotal)
-  }
-
-  // Destroy existing chart
-  if (donationsChart) {
-    donationsChart.destroy()
-  }
-
-  // Create new chart
-  donationsChart = new Chart(ctx, {
-    type: "line",
-    data: {
-      labels: last7Days,
-      datasets: [
-        {
-          label: "Daily Donations",
-          data: donationAmounts,
-          borderColor: "#e74c3c",
-          backgroundColor: "rgba(231, 76, 60, 0.1)",
-          tension: 0.4,
-        },
-      ],
-    },
-    options: {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: {
-          display: false,
-        },
-      },
-      scales: {
-        y: {
-          beginAtZero: true,
-          ticks: {
-            callback: function (value) {
-              return "$" + value.toLocaleString()
-            },
-          },
-        },
-      },
-    },
-  })
-}
-
-// Update top charities
-function updateTopCharities(charitiesData) {
-  const topCharities = charitiesData
-    .sort((a, b) => parseFloat(b.current_amount) - parseFloat(a.current_amount))
-    .slice(0, 5)
-
-  const container = document.getElementById("topCharities")
-  container.innerHTML = topCharities
-    .map(
-      (charity) => `
-        <div class="top-charity">
-            <span class="top-charity-name">${charity.name}</span>
-            <span class="top-charity-amount">$${parseFloat(charity.current_amount).toLocaleString()}</span>
-        </div>
-    `,
-    )
-    .join("")
-}
-
-// Update recent activity
-function updateRecentActivity(donationsData, charitiesData) {
-  const recentDonations = donationsData.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)).slice(0, 10)
-
-  const container = document.getElementById("recentActivity")
-  container.innerHTML = recentDonations
-    .map((donation) => {
-      const charity = charitiesData.find((c) => c.id === donation.charity_id)
-      const timeAgo = getTimeAgo(new Date(donation.created_at))
-
-      return `
-            <div class="activity-item">
-                <div class="activity-icon activity-donation">
-                    <i class="fas fa-hand-holding-usd"></i>
-                </div>
-                <div class="activity-details">
-                    <div class="activity-title">
-                        ${donation.is_anonymous ? "Anonymous" : donation.donor_name} donated $${donation.amount} to ${charity?.name || "Unknown"}
-                    </div>
-                    <div class="activity-time">${timeAgo}</div>
-                </div>
-            </div>
-        `
-    })
-    .join("")
-}
-
-// Load charities
-async function loadCharities() {
-  try {
-    const data = await loadCharitiesData()
-    renderCharitiesTable(data)
-  } catch (error) {
-    console.error("Error loading charities:", error)
-    throw error
-  }
-}
-
-// Load charities data
-async function loadCharitiesData() {
-  const { data, error } = await supabase.from("charities").select("*").order("created_at", { ascending: false })
-
-  if (error) throw error
-  charities = data
-  return data
-}
-
-// Render charities table
-function renderCharitiesTable(charitiesData) {
-  const tbody = document.querySelector("#charitiesTable tbody")
-  tbody.innerHTML = charitiesData
-    .map((charity) => {
-      const progress = (parseFloat(charity.current_amount) / parseFloat(charity.goal_amount)) * 100
-
-      return `
-            <tr>
-                <td>${charity.name}</td>
-                <td>${charity.category}</td>
-                <td>$${parseFloat(charity.goal_amount).toLocaleString()}</td>
-                <td>$${parseFloat(charity.current_amount).toLocaleString()}</td>
-                <td>
-                    <div class="progress-bar">
-                        <div class="progress-fill" style="width: ${Math.min(progress, 100)}%"></div>
-                    </div>
-                    ${progress.toFixed(1)}%
-                </td>
-                <td>
-                    <span class="status-badge ${charity.is_active ? "status-active" : "status-inactive"}">
-                        ${charity.is_active ? "Active" : "Inactive"}
-                    </span>
-                </td>
-                <td>
-                    <button class="btn btn-sm btn-secondary" onclick="editCharity('${charity.id}')">
-                        <i class="fas fa-edit"></i>
-                    </button>
-                    <button class="btn btn-sm btn-danger" onclick="deleteCharity('${charity.id}')">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                </td>
-            </tr>
-        `
-    })
-    .join("")
-}
-
-// Load donations
-async function loadDonations() {
-  try {
-    const data = await loadDonationsData()
-    renderDonationsTable(data)
-  } catch (error) {
-    console.error("Error loading donations:", error)
-    throw error
-  }
-}
-
-// Load donations data
-async function loadDonationsData() {
-  let query = supabase.from("donations").select("*, charities(name)").order("created_at", { ascending: false })
-
-  // Apply filters
-  const statusFilter = document.getElementById("donationStatusFilter")?.value
-  if (statusFilter) {
-    query = query.eq("payment_status", statusFilter)
-  }
-
-  const dateFilter = document.getElementById("donationDateFilter")?.value
-  if (dateFilter) {
-    query = query.gte("created_at", dateFilter)
-    query = query.lt("created_at", new Date(dateFilter).getTime() + 24 * 60 * 60 * 1000)
-  }
-
-  const { data, error } = await query
-  if (error) throw error
-  donations = data
-  return data
-}
-
-// Render donations table
-function renderDonationsTable(donationsData) {
-  const tbody = document.querySelector("#donationsTable tbody")
-  tbody.innerHTML = donationsData
-    .map(
-      (donation) => `
-        <tr>
-            <td>${donation.id.substring(0, 8)}...</td>
-            <td>${donation.charities?.name || "Unknown"}</td>
-            <td>${donation.is_anonymous ? "Anonymous" : donation.donor_name}</td>
-            <td>$${parseFloat(donation.amount).toLocaleString()}</td>
-            <td>
-                <span class="status-badge status-${donation.payment_status}">
-                    ${donation.payment_status}
-                </span>
-            </td>
-            <td>${new Date(donation.created_at).toLocaleDateString()}</td>
-            <td>
-                <button class="btn btn-sm btn-secondary" onclick="viewDonation('${donation.id}')">
-                    <i class="fas fa-eye"></i>
-                </button>
-                <button class="btn btn-sm btn-danger" onclick="deleteDonation('${donation.id}')">
-                    <i class="fas fa-trash"></i>
-                </button>
-            </td>
-        </tr>
-    `,
-    )
-    .join("")
-}
-
-// Load categories
-async function loadCategories() {
-  try {
-    const data = await loadCategoriesData()
-    renderCategoriesGrid(data)
-    populateCategorySelect(data)
-  } catch (error) {
-    console.error("Error loading categories:", error)
-    throw error
-  }
-}
-
-// Load categories data
-async function loadCategoriesData() {
-  const { data, error } = await supabase.from("categories").select("*").order("name")
-
-  if (error) throw error
-  categories = data
-  return data
-}
-
-// Render categories grid
-function renderCategoriesGrid(categoriesData) {
-  const container = document.getElementById("categoriesGrid")
-  container.innerHTML = categoriesData
-    .map(
-      (category) => `
-        <div class="category-card">
-            <div class="category-header">
-                <h3 class="category-name">${category.name}</h3>
-                <div>
-                    <button class="btn btn-sm btn-secondary" onclick="editCategory('${category.id}')">
-                        <i class="fas fa-edit"></i>
-                    </button>
-                    <button class="btn btn-sm btn-danger" onclick="deleteCategory('${category.id}')">
-                        <i class="fas fa-trash"></i>
-                    </button>
-                </div>
-            </div>
-            <p class="category-description">${category.description || "No description"}</p>
-            <div class="category-stats">
-                <span>Created: ${new Date(category.created_at).toLocaleDateString()}</span>
-            </div>
-        </div>
-    `,
-    )
-    .join("")
-}
-
-// Populate category select
-function populateCategorySelect(categoriesData) {
-  const select = document.getElementById("charityCategory")
-  if (!select) return
-
-  select.innerHTML =
-    '<option value="">Select Category</option>' +
-    categoriesData
-      .map(
-        (category) => `
-            <option value="${category.name}">${category.name}</option>
-        `,
-      )
-      .join("")
-}
-
-// Charity Modal Functions
-function openCharityModal(charity = null) {
-  currentEditCharity = charity
-  const modalTitle = document.getElementById("charityModalTitle")
-  const form = charityForm
-
-  if (charity) {
-    modalTitle.textContent = "Edit Charity"
-    form.charityName.value = charity.name
-    form.charityDescription.value = charity.description
-    form.charityCategory.value = charity.category
-    form.charityGoal.value = charity.goal_amount
-    form.charityImage.value = charity.image_url || ""
-    form.charityWebsite.value = charity.website_url || ""
-    form.charityActive.checked = charity.is_active
-  } else {
-    modalTitle.textContent = "Add Charity"
-    form.reset()
-    form.charityActive.checked = true
-  }
-
-  charityModal.classList.add("active")
-}
-
-function closeCharityModal() {
-  charityModal.classList.remove("active")
-  charityForm.reset()
-  currentEditCharity = null
-}
-
-async function handleCharitySubmit(e) {
-  e.preventDefault()
-
-  const formData = new FormData(charityForm)
-  const charityData = {
-    name: formData.get("charityName") || document.getElementById("charityName").value,
-    description: formData.get("charityDescription") || document.getElementById("charityDescription").value,
-    category: formData.get("charityCategory") || document.getElementById("charityCategory").value,
-    goal_amount: parseFloat(formData.get("charityGoal") || document.getElementById("charityGoal").value),
-    image_url: formData.get("charityImage") || document.getElementById("charityImage").value,
-    website_url: formData.get("charityWebsite") || document.getElementById("charityWebsite").value,
-    is_active: (formData.get("charityActive") || document.getElementById("charityActive")).checked,
-  }
-
-  try {
-    if (currentEditCharity) {
-      // Update existing charity
-      const { error } = await supabase.from("charities").update(charityData).eq("id", currentEditCharity.id)
-
-      if (error) throw error
-      showToast("Charity updated successfully", "success")
-    } else {
-      // Insert new charity
-      const { error } = await supabase.from("charities").insert([charityData])
-
-      if (error) throw error
-      showToast("Charity added successfully", "success")
-    }
-
-    closeCharityModal()
-    await loadCharities()
-    await loadDashboardData()
-  } catch (error) {
-    console.error("Error saving charity:", error)
-    showToast("Error saving charity", "error")
-  }
-}
-
-// Category Modal Functions
-function openCategoryModal(category = null) {
-  currentEditCategory = category
-  const modalTitle = document.getElementById("categoryModalTitle")
-  const form = categoryForm
-
-  if (category) {
-    modalTitle.textContent = "Edit Category"
-    form.categoryName.value = category.name
-    form.categoryDescription.value = category.description || ""
-  } else {
-    modalTitle.textContent = "Add Category"
-    form.reset()
-  }
-
-  categoryModal.classList.add("active")
-}
-
-function closeCategoryModal() {
-  categoryModal.classList.remove("active")
-  categoryForm.reset()
-  currentEditCategory = null
-}
-
-async function handleCategorySubmit(e) {
-  e.preventDefault()
-
-  const formData = new FormData(categoryForm)
-  const categoryData = {
-    name: formData.get("categoryName") || document.getElementById("categoryName").value,
-    description: formData.get("categoryDescription") || document.getElementById("categoryDescription").value,
-  }
-
-  try {
-    if (currentEditCategory) {
-      // Update existing category
-      const { error } = await supabase.from("categories").update(categoryData).eq("id", currentEditCategory.id)
-
-      if (error) throw error
-      showToast("Category updated successfully", "success")
-    } else {
-      // Insert new category
-      const { error } = await supabase.from("categories").insert([categoryData])
-
-      if (error) throw error
-      showToast("Category added successfully", "success")
-    }
-
-    closeCategoryModal()
-    await loadCategories()
-    await loadDashboardData()
-  } catch (error) {
-    console.error("Error saving category:", error)
-    showToast("Error saving category", "error")
-  }
-}
-
-// Edit functions
-async function editCharity(charityId) {
-  try {
-    const { data, error } = await supabase.from("charities").select("*").eq("id", charityId).single()
-
-    if (error) throw error
-    openCharityModal(data)
-  } catch (error) {
-    console.error("Error loading charity:", error)
-    showToast("Error loading charity", "error")
-  }
-}
-
-async function editCategory(categoryId) {
-  try {
-    const { data, error } = await supabase.from("categories").select("*").eq("id", categoryId).single()
-
-    if (error) throw error
-    openCategoryModal(data)
-  } catch (error) {
-    console.error("Error loading category:", error)
-    showToast("Error loading category", "error")
-  }
-}
-
-// Delete functions
-async function deleteCharity(charityId) {
-  if (!confirm("Are you sure you want to delete this charity?")) return
-
-  try {
-    const { error } = await supabase.from("charities").delete().eq("id", charityId)
-
-    if (error) throw error
-    showToast("Charity deleted successfully", "success")
-    await loadCharities()
-    await loadDashboardData()
-  } catch (error) {
-    console.error("Error deleting charity:", error)
-    showToast("Error deleting charity", "error")
-  }
-}
-
-async function deleteCategory(categoryId) {
-  if (!confirm("Are you sure you want to delete this category?")) return
-
-  try {
-    const { error } = await supabase.from("categories").delete().eq("id", categoryId)
-
-    if (error) throw error
-    showToast("Category deleted successfully", "success")
-    await loadCategories()
-    await loadDashboardData()
-  } catch (error) {
-    console.error("Error deleting category:", error)
-    showToast("Error deleting category", "error")
-  }
-}
-
-async function deleteDonation(donationId) {
-  if (!confirm("Are you sure you want to delete this donation?")) return
-
-  try {
-    const { error } = await supabase.from("donations").delete().eq("id", donationId)
-
-    if (error) throw error
-    showToast("Donation deleted successfully", "success")
-    await loadDonations()
-    await loadDashboardData()
-  } catch (error) {
-    console.error("Error deleting donation:", error)
-    showToast("Error deleting donation", "error")
-  }
-}
-
-// View donation
-async function viewDonation(donationId) {
-  try {
-    const { data, error } = await supabase.from("donations").select("*, charities(*)").eq("id", donationId).single()
-
-    if (error) throw error
-
-    alert(
-      `Donation Details:\n\n` +
-        `ID: ${data.id}\n` +
-        `Charity: ${data.charities?.name}\n` +
-        `Donor: ${data.is_anonymous ? "Anonymous" : data.donor_name}\n` +
-        `Email: ${data.donor_email}\n` +
-        `Amount: $${data.amount}\n` +
-        `Message: ${data.message || "None"}\n` +
-        `Status: ${data.payment_status}\n` +
-        `Date: ${new Date(data.created_at).toLocaleString()}`,
-    )
-  } catch (error) {
-    console.error("Error loading donation:", error)
-    showToast("Error loading donation", "error")
-  }
-}
-
-// Utility functions
-function getTimeAgo(date) {
-  const seconds = Math.floor((new Date() - date) / 1000)
-
-  let interval = seconds / 31536000
-  if (interval > 1) return Math.floor(interval) + " years ago"
-
-  interval = seconds / 2592000
-  if (interval > 1) return Math.floor(interval) + " months ago"
-
-  interval = seconds / 86400
-  if (interval > 1) return Math.floor(interval) + " days ago"
-
-  interval = seconds / 3600
-  if (interval > 1) return Math.floor(interval) + " hours ago"
-
-  interval = seconds / 60
-  if (interval > 1) return Math.floor(interval) + " minutes ago"
-
-  return "Just now"
-}
-
-function showToast(message, type = "success") {
-  const toast = document.createElement("div")
-  toast.className = `toast ${type}`
-  toast.textContent = message
-
-  document.body.appendChild(toast)
-
-  setTimeout(() => {
-    toast.classList.add("show")
-  }, 100)
-
-  setTimeout(() => {
-    toast.classList.remove("show")
-    setTimeout(() => {
-      document.body.removeChild(toast)
-    }, 300)
-  }, 3000)
-}
-
-// Export functions
-function exportData() {
-  // In a real implementation, this would export data to CSV/Excel
-  showToast("Export functionality coming soon", "warning")
-}
-
-async function refreshData() {
-  try {
-    await loadDashboardData()
-    showToast("Data refreshed successfully", "success")
-  } catch (error) {
-    showToast("Error refreshing data", "error")
-  }
-}
-
-// Global functions
-window.openCharityModal = openCharityModal
-window.closeCharityModal = closeCharityModal
-window.openCategoryModal = openCategoryModal
-window.closeCategoryModal = closeCategoryModal
-window.editCharity = editCharity
-window.editCategory = editCategory
-window.deleteCharity = deleteCharity
-window.deleteCategory = deleteCategory
-window.deleteDonation = deleteDonation
-window.viewDonation = viewDonation
-window.exportData = exportData
-window.refreshData = refreshData