easc-cli 1.1.30 → 1.1.31

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

@@ -0,0 +1,444 @@
+// Supabase configuration
+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 categories = []
+let currentCharityId = null
+let offset = 0
+const limit = 6
+
+// DOM elements
+const navToggle = document.getElementById("navToggle")
+const navMenu = document.querySelector(".nav-menu")
+const charitiesGrid = document.getElementById("charitiesGrid")
+const categoryFilter = document.getElementById("categoryFilter")
+const sortFilter = document.getElementById("sortFilter")
+const searchInput = document.getElementById("searchInput")
+const loadMoreBtn = document.getElementById("loadMoreBtn")
+const donationModal = document.getElementById("donationModal")
+const donationForm = document.getElementById("donationForm")
+const contactForm = document.getElementById("contactForm")
+
+// Initialize app
+document.addEventListener("DOMContentLoaded", async () => {
+  await initializeApp()
+})
+
+async function initializeApp() {
+  try {
+    await loadCategories()
+    await loadCharities()
+    await loadStats()
+    setupEventListeners()
+  } catch (error) {
+    console.error("Error initializing app:", error)
+    showToast("Error loading application", "error")
+  }
+}
+
+// Event Listeners
+function setupEventListeners() {
+  // Navigation toggle
+  navToggle.addEventListener("click", () => {
+    navMenu.classList.toggle("active")
+  })
+
+  // Smooth scrolling for navigation links
+  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
+    anchor.addEventListener("click", function (e) {
+      e.preventDefault()
+      const target = document.querySelector(this.getAttribute("href"))
+      if (target) {
+        target.scrollIntoView({ behavior: "smooth", block: "start" })
+        navMenu.classList.remove("active")
+      }
+    })
+  })
+
+  // Filters
+  categoryFilter.addEventListener("change", filterCharities)
+  sortFilter.addEventListener("change", filterCharities)
+  searchInput.addEventListener("input", debounce(filterCharities, 300))
+
+  // Donation form
+  donationForm.addEventListener("submit", handleDonation)
+
+  // Contact form
+  contactForm.addEventListener("submit", handleContact)
+
+  // Amount buttons
+  document.querySelectorAll(".amount-btn").forEach((btn) => {
+    btn.addEventListener("click", function () {
+      document.querySelectorAll(".amount-btn").forEach((b) => b.classList.remove("active"))
+      this.classList.add("active")
+      document.getElementById("donationAmount").value = this.dataset.amount
+    })
+  })
+
+  // Modal close on outside click
+  donationModal.addEventListener("click", (e) => {
+    if (e.target === donationModal) {
+      closeDonationModal()
+    }
+  })
+}
+
+// Load categories
+async function loadCategories() {
+  try {
+    const { data, error } = await supabase.from("categories").select("*").order("name")
+
+    if (error) throw error
+    categories = data
+
+    // Populate category filter
+    categories.forEach((category) => {
+      const option = document.createElement("option")
+      option.value = category.name
+      option.textContent = category.name
+      categoryFilter.appendChild(option)
+    })
+
+    // Populate footer categories
+    const footerCategories = document.getElementById("footerCategories")
+    categories.forEach((category) => {
+      const li = document.createElement("li")
+      const a = document.createElement("a")
+      a.href = "#charities"
+      a.textContent = category.name
+      a.addEventListener("click", (e) => {
+        e.preventDefault()
+        categoryFilter.value = category.name
+        filterCharities()
+        scrollToCharities()
+      })
+      li.appendChild(a)
+      footerCategories.appendChild(li)
+    })
+  } catch (error) {
+    console.error("Error loading categories:", error)
+  }
+}
+
+// Load charities
+async function loadCharities(reset = false) {
+  try {
+    if (reset) {
+      offset = 0
+      charities = []
+    }
+
+    let query = supabase
+      .from("charities")
+      .select("*")
+      .eq("is_active", true)
+      .range(offset, offset + limit - 1)
+      .order("created_at", { ascending: false })
+
+    // Apply filters
+    const category = categoryFilter.value
+    if (category) {
+      query = query.eq("category", category)
+    }
+
+    const searchTerm = searchInput.value.trim()
+    if (searchTerm) {
+      query = query.or(`name.ilike.%${searchTerm}%,description.ilike.%${searchTerm}%`)
+    }
+
+    // Apply sorting
+    const sortBy = sortFilter.value
+    if (sortBy === "name") {
+      query = query.order("name", { ascending: true })
+    } else if (sortBy === "goal") {
+      query = query.order("goal_amount", { ascending: false })
+    } else if (sortBy === "progress") {
+      query = query.order("current_amount", { ascending: false })
+    }
+
+    const { data, error } = await query
+
+    if (error) throw error
+
+    if (reset) {
+      charities = data
+    } else {
+      charities = [...charities, ...data]
+    }
+
+    renderCharities()
+    updateLoadMoreButton(data.length)
+  } catch (error) {
+    console.error("Error loading charities:", error)
+    showToast("Error loading charities", "error")
+  }
+}
+
+// Render charities
+function renderCharities() {
+  charitiesGrid.innerHTML = ""
+
+  charities.forEach((charity) => {
+    const card = createCharityCard(charity)
+    charitiesGrid.appendChild(card)
+  })
+}
+
+// Create charity card
+function createCharityCard(charity) {
+  const progress = (charity.current_amount / charity.goal_amount) * 100
+
+  const card = document.createElement("div")
+  card.className = "charity-card"
+  card.onclick = () => openDonationModal(charity)
+
+  card.innerHTML = `
+        <img src="${charity.image_url || "https://images.unsplash.com/photo-1488521787991-ed7bba14b592?w=400"}" 
+             alt="${charity.name}" class="charity-image">
+        <div class="charity-content">
+            <span class="charity-category">${charity.category}</span>
+            <h3 class="charity-title">${charity.name}</h3>
+            <p class="charity-description">${charity.description}</p>
+            <div class="charity-progress">
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: ${Math.min(progress, 100)}%"></div>
+                </div>
+                <div class="charity-stats">
+                    <span class="charity-amount">$${charity.current_amount.toLocaleString()}</span>
+                    <span class="charity-goal">Goal: $${charity.goal_amount.toLocaleString()}</span>
+                </div>
+            </div>
+            <div class="charity-actions">
+                <button class="btn btn-primary" onclick="event.stopPropagation(); openDonationModal(${JSON.stringify(charity).replace(/"/g, "&quot;")})">
+                    Donate Now
+                </button>
+                <button class="btn btn-secondary" onclick="event.stopPropagation(); window.open('${charity.website_url}', '_blank')">
+                    Learn More
+                </button>
+            </div>
+        </div>
+    `
+
+  return card
+}
+
+// Filter charities
+async function filterCharities() {
+  await loadCharities(true)
+}
+
+// Search charities
+async function searchCharities() {
+  await filterCharities()
+}
+
+// Load more charities
+async function loadMoreCharities() {
+  offset += limit
+  await loadCharities()
+}
+
+// Update load more button
+function updateLoadMoreButton(loadedCount) {
+  if (loadedCount < limit) {
+    loadMoreBtn.style.display = "none"
+  } else {
+    loadMoreBtn.style.display = "inline-block"
+  }
+}
+
+// Load statistics
+async function loadStats() {
+  try {
+    // Get total charities
+    const { count: totalCharities, error: charitiesError } = await supabase
+      .from("charities")
+      .select("*", { count: "exact", head: true })
+      .eq("is_active", true)
+
+    // Get total raised
+    const { data: raisedData, error: raisedError } = await supabase
+      .from("charities")
+      .select("current_amount")
+      .eq("is_active", true)
+
+    // Get total donors
+    const { count: totalDonors, error: donorsError } = await supabase
+      .from("donations")
+      .select("*", { count: "exact", head: true })
+      .eq("payment_status", "completed")
+
+    if (charitiesError || raisedError || donorsError) throw new Error("Error loading stats")
+
+    // Update DOM
+    document.getElementById("totalCharities").textContent = totalCharities || 0
+
+    const totalRaised = raisedData?.reduce((sum, charity) => sum + parseFloat(charity.current_amount), 0) || 0
+    document.getElementById("totalRaised").textContent = `$${totalRaised.toLocaleString()}`
+
+    document.getElementById("totalDonors").textContent = totalDonors || 0
+  } catch (error) {
+    console.error("Error loading stats:", error)
+  }
+}
+
+// Open donation modal
+function openDonationModal(charity) {
+  currentCharityId = charity.id
+
+  const modalCharityInfo = document.getElementById("modalCharityInfo")
+  modalCharityInfo.innerHTML = `
+        <h4>${charity.name}</h4>
+        <p>${charity.description}</p>
+        <div class="charity-progress">
+            <div class="progress-bar">
+                <div class="progress-fill" style="width: ${(charity.current_amount / charity.goal_amount) * 100}%"></div>
+            </div>
+            <div class="charity-stats">
+                <span>$${charity.current_amount.toLocaleString()} raised</span>
+                <span>Goal: $${charity.goal_amount.toLocaleString()}</span>
+            </div>
+        </div>
+    `
+
+  donationModal.classList.add("active")
+}
+
+// Close donation modal
+function closeDonationModal() {
+  donationModal.classList.remove("active")
+  donationForm.reset()
+  document.querySelectorAll(".amount-btn").forEach((btn) => btn.classList.remove("active"))
+  currentCharityId = null
+}
+
+// Handle donation
+async function handleDonation(e) {
+  e.preventDefault()
+
+  if (!currentCharityId) {
+    showToast("Please select a charity", "error")
+    return
+  }
+
+  const formData = new FormData(donationForm)
+  const donation = {
+    charity_id: currentCharityId,
+    donor_name: formData.get("donorName") || document.getElementById("donorName").value,
+    donor_email: formData.get("donorEmail") || document.getElementById("donorEmail").value,
+    amount: parseFloat(document.getElementById("donationAmount").value),
+    message: document.getElementById("donationMessage").value,
+    is_anonymous: document.getElementById("anonymousDonation").checked,
+    payment_status: "pending",
+  }
+
+  try {
+    // Insert donation
+    const { data, error } = await supabase.from("donations").insert([donation]).select()
+
+    if (error) throw error
+
+    // Simulate payment processing (in real app, integrate with payment gateway)
+    showToast("Processing payment...", "success")
+
+    setTimeout(async () => {
+      // Update payment status
+      const { error: updateError } = await supabase
+        .from("donations")
+        .update({ payment_status: "completed" })
+        .eq("id", data[0].id)
+
+      if (updateError) throw updateError
+
+      // Update charity amount
+      const { error: charityError } = await supabase
+        .from("charities")
+        .update({
+          current_amount: supabase.raw(`current_amount + ${donation.amount}`),
+          updated_at: new Date().toISOString(),
+        })
+        .eq("id", currentCharityId)
+
+      if (charityError) throw charityError
+
+      showToast("Thank you for your donation!", "success")
+      closeDonationModal()
+      await loadCharities(true)
+      await loadStats()
+    }, 2000)
+  } catch (error) {
+    console.error("Error processing donation:", error)
+    showToast("Error processing donation", "error")
+  }
+}
+
+// Handle contact form
+async function handleContact(e) {
+  e.preventDefault()
+
+  const contact = {
+    name: document.getElementById("contactName").value,
+    email: document.getElementById("contactEmail").value,
+    message: document.getElementById("contactMessage").value,
+    created_at: new Date().toISOString(),
+  }
+
+  try {
+    // In a real app, send this to your backend or email service
+    console.log("Contact form submission:", contact)
+    showToast("Message sent successfully!", "success")
+    contactForm.reset()
+  } catch (error) {
+    console.error("Error sending message:", error)
+    showToast("Error sending message", "error")
+  }
+}
+
+// Utility functions
+function scrollToCharities() {
+  document.getElementById("charities").scrollIntoView({ behavior: "smooth" })
+}
+
+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)
+}
+
+function debounce(func, wait) {
+  let timeout
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout)
+      func(...args)
+    }
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+  }
+}
+
+// Export functions for global access
+window.openDonationModal = openDonationModal
+window.closeDonationModal = closeDonationModal
+window.scrollToCharities = scrollToCharities
+window.searchCharities = searchCharities
+window.loadMoreCharities = loadMoreCharities

package/package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.1.30",
+  "version": "1.1.31",
   "name": "easc-cli",
   "type": "module",
   "license": "MIT",

package/src/cli/cmd/tui/routes/session/index.tsx

@@ -1570,19 +1570,19 @@ function InlineTool(props: {
       }}
       backgroundColor={hover() ? theme.backgroundElement : undefined}
     >
-      <text paddingLeft={3} fg={fg()} attributes={denied() ? TextAttributes.STRIKETHROUGH : undefined}>
-        <Show
-          fallback={
-            <box flexDirection="row" gap={1}>
-              <Spinner />
-              <text fg={fg()}> {props.pending}</text>
-            </box>
-          }
-          when={props.complete}
-        >
+      <Show
+        fallback={
+          <box flexDirection="row" gap={1} paddingLeft={3}>
+            <Spinner fg={fg()} />
+            <text fg={fg()} attributes={denied() ? TextAttributes.STRIKETHROUGH : undefined}> {props.pending}</text>
+          </box>
+        }
+        when={props.complete}
+      >
+        <text paddingLeft={3} fg={fg()} attributes={denied() ? TextAttributes.STRIKETHROUGH : undefined}>
           <span style={{ fg: props.iconColor }}>{props.icon}</span> {props.children}
-        </Show>
-      </text>
+        </text>
+      </Show>
       <Show when={error() && !denied()}>
         <text fg={theme.error}>{error()}</text>
       </Show>