LobotomyLabs/coop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Ko-fi donations tab to admin dashboard

Browse Source
This commit is contained in:
Dustin Newkirk
2026-04-23 13:29:15 -04:00
parent ed7f1dd114
commit 70a1925c95
3 changed files with 110 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/admin/page.tsx
+88 -13
View File
@@ -1,19 +1,20 @@
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import {
Users,
Database,
Settings,
TrendingUp,
ShieldAlert,
Search,
RefreshCcw,
ArrowLeft,
Save,
Coffee,
Database,
Gift,
RefreshCcw,
Save,
Search,
Settings,
ShieldAlert,
TrendingUp,
Users,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
@@ -25,7 +26,7 @@ import {
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { api, adminApi } from "@/lib/api";
import { adminApi, api } from "@/lib/api";
import { useStore } from "@/lib/store";
import { formatNumber } from "@/lib/utils";
@@ -61,12 +62,25 @@ interface SystemSettings {
minWatchMinutes: number;
}
interface KofiPayment {
id: string;
kofiTransactionId: string;
email: string;
fromName: string;
amount: number;
creditsGranted: number;
status: string;
createdAt: string;
user?: { plexUsername: string } | null;
}
export default function AdminPage() {
const router = useRouter();
const { user, isAuthenticated } = useStore();
const [analytics, setAnalytics] = useState<Analytics | null>(null);
const [users, setUsers] = useState<User[]>([]);
const [settings, setSettings] = useState<SystemSettings | null>(null);
const [kofiPayments, setKofiPayments] = useState<KofiPayment[]>([]);
const [searchQuery, setSearchQuery] = useState("");
const [isLoading, setIsLoading] = useState(true);
const [isSavingSettings, setIsSavingSettings] = useState(false);
@@ -82,14 +96,16 @@ export default function AdminPage() {
const loadData = async () => {
try {
const [analyticsRes, usersRes, settingsRes] = await Promise.all([
const [analyticsRes, usersRes, settingsRes, kofiRes] = await Promise.all([
adminApi.getAnalytics(),
adminApi.getUsers(),
adminApi.getSettings(),
adminApi.getKofiPayments(),
]);
setAnalytics(analyticsRes.data);
setUsers(usersRes.data.users || []);
setSettings(settingsRes.data);
setKofiPayments(kofiRes.data.payments || []);
} catch (err) {
console.error("Admin load error:", err);
toast.error("Failed to load coop secrets");
@@ -185,7 +201,7 @@ export default function AdminPage() {
</div>
<Tabs defaultValue="flock" className="w-full">
<TabsList className="grid w-full grid-cols-3 gap-2 rounded-full border-4 border-foreground bg-muted/30 p-2 mb-8 h-auto">
<TabsList className="grid w-full grid-cols-4 gap-2 rounded-full border-4 border-foreground bg-muted/30 p-2 mb-8 h-auto">
<TabsTrigger
value="flock"
className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground transition-all"
@@ -198,6 +214,12 @@ export default function AdminPage() {
>
<Settings className="mr-2 h-4 w-4" /> BARN RULES
</TabsTrigger>
<TabsTrigger
value="donations"
className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground transition-all"
>
<Coffee className="mr-2 h-4 w-4" /> DONATIONS
</TabsTrigger>
<TabsTrigger
value="stats"
className="rounded-full py-3 font-black uppercase data-[state=active]:bg-primary data-[state=active]:text-primary-foreground transition-all"
@@ -427,6 +449,59 @@ export default function AdminPage() {
</Card>
</TabsContent>
<TabsContent value="donations" className="focus-visible:outline-none">
<div className="rounded-[2.5rem] border-4 border-foreground bg-card p-6 shadow-[10px_10px_0px_0px_rgba(0,0,0,0.05)]">
<div className="mb-6">
<h2 className="font-display text-3xl uppercase italic">Ko-fi Donations</h2>
<p className="text-sm font-bold text-muted-foreground">Incoming feed purchases</p>
</div>
{kofiPayments.length === 0 ? (
<div className="text-center py-10 opacity-40">
<div className="text-6xl mb-4">☕</div>
<div className="font-black uppercase tracking-widest text-sm">No donations yet. The well is dry.</div>
</div>
) : (
<div className="space-y-3">
{kofiPayments.map((p) => (
<div
key={p.id}
className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 rounded-2xl border-4 border-foreground bg-accent/5 p-4"
>
<div className="flex-1">
<div className="flex items-center gap-2">
<span className="font-black text-lg">{p.fromName || "Anonymous"}</span>
<span className={`rounded-full px-2 py-0.5 text-[10px] font-black uppercase ${p.status === "CREDITED" ? "bg-primary text-white" : "bg-destructive/20 text-destructive"}`}>
{p.status}
</span>
</div>
<div className="text-sm font-bold text-muted-foreground mt-1">
{p.email}
</div>
{p.user && (
<div className="text-xs font-bold text-primary mt-0.5">
Linked: {p.user.plexUsername}
</div>
)}
</div>
<div className="text-right">
<div className="text-2xl font-black text-primary">
${p.amount.toFixed(2)}
</div>
<div className="text-sm font-bold text-muted-foreground">
{formatNumber(p.creditsGranted)} $COOP
</div>
<div className="text-[10px] font-bold text-muted-foreground uppercase">
{new Date(p.createdAt).toLocaleDateString()}
</div>
</div>
</div>
))}
</div>
)}
</div>
</TabsContent>
<TabsContent value="stats" className="focus-visible:outline-none">
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
<div className="rounded-3xl border-4 border-foreground bg-card p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
frontend/src/lib/api.ts
+1
View File
@@ -94,6 +94,7 @@ export const adminApi = {
api.get(`/transactions/admin/all?page=${page}&limit=${limit}`),
getSystemStats: () => api.get("/transactions/admin/stats"),
backfillUser: (userId: string) => api.post(`/admin/users/${userId}/backfill`),
getKofiPayments: () => api.get("/admin/kofi-payments"),
};
// Overseer API