426 lines
17 KiB
JavaScript
426 lines
17 KiB
JavaScript
import donationServer from "/donations/@server/donations.js"
|
|
|
|
css(`
|
|
donations- {
|
|
font-family: 'Arial';
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
donations- input::placeholder {
|
|
color: var(--headertext);
|
|
opacity: 0.35;
|
|
}
|
|
`)
|
|
|
|
class Donations extends Shadow {
|
|
donations = []
|
|
subscriptions = []
|
|
typeFilter = "all"
|
|
searchText = ""
|
|
sortKey = "created"
|
|
sortDir = "desc"
|
|
|
|
get allTransactions() {
|
|
const d = this.donations.map(don => ({
|
|
id: `d-${don.id}`,
|
|
created: don.created,
|
|
name: don.name || "—",
|
|
email: don.email || "—",
|
|
amount: Number(don.amount),
|
|
type: "donation",
|
|
product: "Donation",
|
|
status: "complete"
|
|
}))
|
|
const s = this.subscriptions.map(sub => ({
|
|
id: `s-${sub.id}`,
|
|
created: sub.created,
|
|
name: [sub.first_name, sub.last_name].filter(Boolean).join(" ") || sub.email || "—",
|
|
email: sub.email || "—",
|
|
amount: Number(sub.plan_price),
|
|
type: "subscription",
|
|
product: sub.plan_name || "Subscription",
|
|
status: sub.active ? "active" : "inactive"
|
|
}))
|
|
return [...d, ...s]
|
|
}
|
|
|
|
get transactions() {
|
|
let all = this.allTransactions
|
|
|
|
if (this.typeFilter === "donations") all = all.filter(t => t.type === "donation")
|
|
else if (this.typeFilter === "subscriptions") all = all.filter(t => t.type === "subscription")
|
|
|
|
if (this.searchText) {
|
|
const q = this.searchText.toLowerCase()
|
|
all = all.filter(t =>
|
|
t.name.toLowerCase().includes(q) ||
|
|
t.email.toLowerCase().includes(q) ||
|
|
t.product.toLowerCase().includes(q)
|
|
)
|
|
}
|
|
|
|
all.sort((a, b) => {
|
|
let av = a[this.sortKey], bv = b[this.sortKey]
|
|
if (this.sortKey === "created") { av = new Date(av); bv = new Date(bv) }
|
|
else if (this.sortKey === "amount") { av = Number(av); bv = Number(bv) }
|
|
else { av = String(av).toLowerCase(); bv = String(bv).toLowerCase() }
|
|
if (av < bv) return this.sortDir === "asc" ? -1 : 1
|
|
if (av > bv) return this.sortDir === "asc" ? 1 : -1
|
|
return 0
|
|
})
|
|
|
|
return all
|
|
}
|
|
|
|
get stats() {
|
|
const all = this.allTransactions
|
|
const totalRevenue = all.reduce((s, t) => s + t.amount, 0)
|
|
const now = new Date()
|
|
const thisMonth = all.filter(t => {
|
|
const d = new Date(t.created)
|
|
return d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()
|
|
})
|
|
const monthRevenue = thisMonth.reduce((s, t) => s + t.amount, 0)
|
|
const activeSubs = this.subscriptions.filter(s => s.active).length
|
|
const mrr = this.subscriptions.filter(s => s.active).reduce((s, sub) => s + Number(sub.plan_price), 0)
|
|
const donorCount = new Set(this.donations.filter(d => d.email).map(d => d.email)).size
|
|
return { totalRevenue, monthRevenue, activeSubs, mrr, donorCount }
|
|
}
|
|
|
|
get monthlyData() {
|
|
const now = new Date()
|
|
const months = []
|
|
for (let i = 5; i >= 0; i--) {
|
|
const d = new Date(now.getFullYear(), now.getMonth() - i, 1)
|
|
months.push({ label: d.toLocaleString("en-US", { month: "short" }), year: d.getFullYear(), month: d.getMonth(), donations: 0, subscriptions: 0 })
|
|
}
|
|
this.donations.forEach(t => {
|
|
const d = new Date(t.created)
|
|
const m = months.find(m => m.year === d.getFullYear() && m.month === d.getMonth())
|
|
if (m) m.donations += Number(t.amount)
|
|
})
|
|
this.subscriptions.forEach(t => {
|
|
const d = new Date(t.created)
|
|
const m = months.find(m => m.year === d.getFullYear() && m.month === d.getMonth())
|
|
if (m) m.subscriptions += Number(t.plan_price)
|
|
})
|
|
return months
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
this.renderToolbar()
|
|
|
|
HStack(() => {
|
|
this.renderStats()
|
|
this.renderChart()
|
|
})
|
|
.paddingHorizontal(1.25, em)
|
|
.paddingBottom(1, em)
|
|
.gap(1, em)
|
|
.alignItems("stretch")
|
|
.flexShrink(0)
|
|
|
|
VStack(() => {}).height(1, px).background("var(--divider)").marginHorizontal(1.25, em).flexShrink(0)
|
|
|
|
this.renderTable()
|
|
})
|
|
.height(100, pct)
|
|
.width(100, pct)
|
|
.boxSizing("border-box")
|
|
.overflow("hidden")
|
|
.onAppear(async () => {
|
|
const data = await donationServer.getMoneyData(global.currentNetwork.id)
|
|
if(this.donations.length !== data.purchases.length || this.subscriptions.length !== data.subscriptions.length) {
|
|
this.donations = data.purchases || []
|
|
this.subscriptions = data.subscriptions || []
|
|
console.log(this.donations, this.subscriptions)
|
|
this.rerender()
|
|
}
|
|
})
|
|
}
|
|
|
|
renderToolbar() {
|
|
HStack(() => {
|
|
HStack(() => {
|
|
this.filterTab("All", "all")
|
|
this.filterTab("Donations", "donations")
|
|
this.filterTab("Subscriptions", "subscriptions")
|
|
})
|
|
.background("var(--darkaccent)")
|
|
.border("1px solid var(--divider)")
|
|
.borderRadius(0.5, em)
|
|
.padding(0.2, em)
|
|
.gap(0.15, em)
|
|
.flexShrink(0)
|
|
|
|
input("", "180px")
|
|
.paddingHorizontal(0.65, em)
|
|
.paddingVertical(0.42, em)
|
|
.background("var(--darkaccent)")
|
|
.border("1px solid var(--divider)")
|
|
.borderRadius(0.45, em)
|
|
.fontSize(0.85, em)
|
|
.color("var(--headertext)")
|
|
.outline("none")
|
|
.onInput(v => { this.searchText = v; this.rerender() })
|
|
})
|
|
.marginTop(20, px)
|
|
.paddingHorizontal(1.25, em)
|
|
.paddingTop(1.1, em)
|
|
.paddingBottom(0.85, em)
|
|
.alignItems("center")
|
|
.gap(0.75, em)
|
|
.flexShrink(0)
|
|
}
|
|
|
|
filterTab(label, value) {
|
|
const isActive = this.typeFilter === value
|
|
p(label)
|
|
.margin(0)
|
|
.fontSize(0.8, em)
|
|
.fontWeight(isActive ? "600" : "400")
|
|
.color("var(--headertext)")
|
|
.opacity(isActive ? 1 : 0.5)
|
|
.paddingHorizontal(0.7, em)
|
|
.paddingVertical(0.32, em)
|
|
.borderRadius(0.35, em)
|
|
.background(isActive ? "var(--app)" : "transparent")
|
|
.cursor("pointer")
|
|
.onClick((done) => { if(!done) return; this.typeFilter = value; this.rerender() })
|
|
}
|
|
|
|
renderStats() {
|
|
const s = this.stats
|
|
HStack(() => {
|
|
this.statCard("Total Revenue", this.fmt(s.totalRevenue), "📊")
|
|
this.statCard("This Month", this.fmt(s.monthRevenue), "📅")
|
|
this.statCard("Active Subs", String(s.activeSubs), "🔄")
|
|
this.statCard("MRR", this.fmt(s.mrr), "💰")
|
|
this.statCard("Donors", String(s.donorCount), "👥")
|
|
})
|
|
.gap(0.65, em)
|
|
.flexShrink(0)
|
|
.alignSelf("stretch")
|
|
}
|
|
|
|
statCard(label, value, icon) {
|
|
VStack(() => {
|
|
p(icon).margin(0).fontSize(1.05, em).lineHeight("1")
|
|
p(value)
|
|
.margin(0).marginTop(0.5, em)
|
|
.fontSize(1.2, em).fontWeight("700")
|
|
.color("var(--headertext)").lineHeight("1")
|
|
p(label)
|
|
.margin(0).marginTop(0.28, em)
|
|
.fontSize(0.68, em)
|
|
.color("var(--headertext)").opacity(0.42)
|
|
})
|
|
.padding(0.9, em)
|
|
.background("var(--darkaccent)")
|
|
.border("1px solid var(--divider)")
|
|
.borderRadius(0.6, em)
|
|
.minWidth(0)
|
|
.flex(1)
|
|
}
|
|
|
|
renderChart() {
|
|
const months = this.monthlyData
|
|
const max = Math.max(...months.map(m => m.donations + m.subscriptions), 1)
|
|
|
|
VStack(() => {
|
|
p("Monthly Revenue")
|
|
.margin(0).marginBottom(0.6, em)
|
|
.fontSize(0.68, em).fontWeight("700").letterSpacing("0.06em")
|
|
.color("var(--headertext)").opacity(0.4)
|
|
|
|
HStack(() => {
|
|
months.forEach(m => {
|
|
const total = m.donations + m.subscriptions
|
|
const barPct = Math.max((total / max) * 100, total > 0 ? 3 : 0)
|
|
|
|
VStack(() => {
|
|
VStack(() => {
|
|
if (m.subscriptions > 0) {
|
|
VStack(() => {}).flex(m.subscriptions).background("#3b82f6")
|
|
}
|
|
if (m.donations > 0) {
|
|
VStack(() => {}).flex(m.donations).background("var(--quillred)")
|
|
}
|
|
if (total === 0) {
|
|
VStack(() => {}).flex(1).background("var(--divider)")
|
|
}
|
|
})
|
|
.height(barPct, pct)
|
|
.width(60, pct)
|
|
.borderRadius(3, px)
|
|
.overflow("hidden")
|
|
.alignSelf("center")
|
|
.minHeight(total === 0 ? 2 : barPct < 3 ? 3 : barPct, px)
|
|
|
|
p(m.label)
|
|
.margin(0).marginTop(0.4, em)
|
|
.fontSize(0.65, em)
|
|
.color("var(--headertext)").opacity(0.4)
|
|
.textAlign("center")
|
|
})
|
|
.flex(1)
|
|
.height(100, pct)
|
|
.alignItems("stretch")
|
|
.justifyContent("flex-end")
|
|
.boxSizing("border-box")
|
|
})
|
|
})
|
|
.flex(1)
|
|
.alignItems("flex-end")
|
|
.gap(0.3, em)
|
|
|
|
HStack(() => {
|
|
HStack(() => {
|
|
VStack(() => {}).width(8, px).height(8, px).borderRadius(50, pct).background("var(--quillred)").flexShrink(0)
|
|
p("Donations").margin(0).fontSize(0.65, em).color("var(--headertext)").opacity(0.45)
|
|
}).gap(0.3, em).alignItems("center")
|
|
|
|
HStack(() => {
|
|
VStack(() => {}).width(8, px).height(8, px).borderRadius(50, pct).background("#3b82f6").flexShrink(0)
|
|
p("Subscriptions").margin(0).fontSize(0.65, em).color("var(--headertext)").opacity(0.45)
|
|
}).gap(0.3, em).alignItems("center")
|
|
})
|
|
.gap(0.85, em)
|
|
.marginTop(0.55, em)
|
|
.flexShrink(0)
|
|
})
|
|
.padding(1, em)
|
|
.background("var(--darkaccent)")
|
|
.border("1px solid var(--divider)")
|
|
.borderRadius(0.6, em)
|
|
.flex(1)
|
|
.minWidth(0)
|
|
.height(160, px)
|
|
.boxSizing("border-box")
|
|
.flexShrink(0)
|
|
}
|
|
|
|
renderTable() {
|
|
const txs = this.transactions
|
|
const COLS = [
|
|
{ label: "Date", key: "created", width: "140px" },
|
|
{ label: "Name", key: "name", width: "1fr" },
|
|
{ label: "Email", key: "email", width: "220px" },
|
|
{ label: "Type", key: "type", width: "130px" },
|
|
{ label: "Product", key: "product", width: "160px" },
|
|
{ label: "Amount", key: "amount", width: "110px" },
|
|
{ label: "Status", key: "status", width: "100px" },
|
|
]
|
|
const gridCols = COLS.map(c => c.width).join(" ")
|
|
|
|
VStack(() => {
|
|
// Header row
|
|
HStack(() => {
|
|
COLS.forEach(col => {
|
|
const isSort = this.sortKey === col.key
|
|
HStack(() => {
|
|
p(col.label)
|
|
.margin(0).fontSize(0.7, em).fontWeight("700").letterSpacing("0.05em")
|
|
.color("var(--headertext)").opacity(isSort ? 0.9 : 0.38)
|
|
if (isSort) {
|
|
p(this.sortDir === "asc" ? "↑" : "↓")
|
|
.margin(0).marginLeft(0.2, em).fontSize(0.65, em)
|
|
.color("var(--headertext)").opacity(0.5)
|
|
}
|
|
})
|
|
.alignItems("center")
|
|
.cursor("pointer")
|
|
.onClick((done) => {
|
|
if(!done) return
|
|
if (this.sortKey === col.key) this.sortDir = this.sortDir === "asc" ? "desc" : "asc"
|
|
else { this.sortKey = col.key; this.sortDir = "desc" }
|
|
this.rerender()
|
|
})
|
|
})
|
|
})
|
|
.attr({ style: `display: grid; grid-template-columns: ${gridCols};` })
|
|
.paddingHorizontal(1.25, em)
|
|
.paddingVertical(0.65, em)
|
|
.borderBottom("1px solid var(--divider)")
|
|
.flexShrink(0)
|
|
|
|
// Body
|
|
VStack(() => {
|
|
if (txs.length === 0) {
|
|
VStack(() => {
|
|
p("No transactions match your filters")
|
|
.margin(0).fontSize(0.9, em)
|
|
.color("var(--headertext)").opacity(0.4)
|
|
.textAlign("center")
|
|
})
|
|
.flex(1).justifyContent("center").alignItems("center")
|
|
} else {
|
|
txs.forEach((tx, i) => {
|
|
HStack(() => {
|
|
p(this.formatDate(tx.created))
|
|
.margin(0).fontSize(0.78, em)
|
|
.color("var(--headertext)").opacity(0.65)
|
|
|
|
p(tx.name)
|
|
.margin(0).fontSize(0.82, em).color("var(--headertext)")
|
|
.overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
|
|
.minWidth(0)
|
|
|
|
p(tx.email)
|
|
.margin(0).fontSize(0.75, em)
|
|
.color("var(--headertext)").opacity(0.5)
|
|
.overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
|
|
.minWidth(0)
|
|
|
|
HStack(() => {
|
|
p(tx.type === "donation" ? "Donation" : "Subscription")
|
|
.margin(0).fontSize(0.7, em).fontWeight("600")
|
|
.color(tx.type === "donation" ? "var(--quillred)" : "#3b82f6")
|
|
.background(tx.type === "donation" ? "rgba(159,28,41,0.12)" : "rgba(59,130,246,0.12)")
|
|
.paddingHorizontal(0.55, em).paddingVertical(0.18, em)
|
|
.borderRadius(100, px).whiteSpace("nowrap")
|
|
})
|
|
|
|
p(tx.product)
|
|
.margin(0).fontSize(0.78, em)
|
|
.color("var(--headertext)").opacity(0.65)
|
|
.overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
|
|
.minWidth(0)
|
|
|
|
p(this.fmt(tx.amount))
|
|
.margin(0).fontSize(0.85, em).fontWeight("600")
|
|
.color("var(--headertext)")
|
|
|
|
p(tx.status === "active" ? "Active" : tx.status === "complete" ? "Complete" : "Inactive")
|
|
.margin(0).fontSize(0.72, em).fontWeight("500")
|
|
.color(tx.status === "inactive" ? "var(--headertext)" : "#10b981")
|
|
.opacity(tx.status === "inactive" ? 0.35 : 1)
|
|
})
|
|
.attr({ style: `display: grid; grid-template-columns: ${gridCols}; align-items: center;` })
|
|
.paddingHorizontal(1.25, em)
|
|
.paddingVertical(0.65, em)
|
|
.background(i % 2 === 1 ? "var(--darkaccent)" : "transparent")
|
|
.borderBottom("1px solid var(--divider)")
|
|
})
|
|
}
|
|
})
|
|
.flex(1)
|
|
.overflowY("auto")
|
|
})
|
|
.flex(1)
|
|
.minHeight(0)
|
|
.overflow("hidden")
|
|
}
|
|
|
|
formatDate(time) {
|
|
return new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" }).format(new Date(time))
|
|
}
|
|
|
|
fmt(amount) {
|
|
return "$" + Number(amount).toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 })
|
|
}
|
|
}
|
|
|
|
register(Donations)
|