easc-cli 1.1.30 → 1.1.33

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

@@ -0,0 +1,743 @@
+// 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