"use client"; import Image from "next/image"; import { useCallback, useEffect, useMemo, useState } from "react"; import toast, { Toaster } from "react-hot-toast"; import { RichTextEditor } from "./RichTextEditor"; const API = process.env.NEXT_PUBLIC_API_URL || "http://localhost:5000/api"; type Campaign = { id: number; title: string; slug: string; short_description: string; description: string; cover_image_url: string | null; images: string[]; goal_amount: number; raised_amount: number; category: string; status: string; start_date: string | null; end_date: string | null; beneficiaries_count: number; location: string | null; featured: number; created_at: string; }; type ModalState = | { type: "none" } | { type: "create" } | { type: "edit"; row: Campaign } | { type: "delete"; row: Campaign }; const categoryLabels: Record = { education: "Education", healthcare: "Healthcare", water: "Water", food: "Food", community: "Community", environment: "Environment", disaster: "Disaster Relief", other: "Other", }; const categoryColors: Record = { education: "var(--color-primary-deep)", healthcare: "#ea580c", water: "var(--color-ink)", food: "var(--color-ink)", community: "var(--color-primary-deep)", environment: "var(--color-primary-deep)", disaster: "var(--color-ink)", other: "var(--color-ink-mute)", }; export function AdminCrowdfunding() { const [campaigns, setCampaigns] = useState([]); const [loading, setLoading] = useState(true); const [message, setMessage] = useState(""); const [query, setQuery] = useState(""); const [filter, setFilter] = useState("all"); const [modal, setModal] = useState({ type: "none" }); const token = useMemo(() => { if (typeof window === "undefined") return ""; return localStorage.getItem("ngo_admin_token") || ""; }, []); const loadCampaigns = useCallback(async () => { setLoading(true); const res = await fetch(`${API}/admin/crowdfunding`, { headers: { Authorization: `Bearer ${token}` }, }); if (!res.ok) throw new Error("Failed to load"); setCampaigns(await res.json()); setLoading(false); }, [token]); useEffect(() => { const timer = window.setTimeout(() => { loadCampaigns().catch(() => { setMessage("Could not load campaigns."); setLoading(false); }); }, 0); return () => window.clearTimeout(timer); }, [loadCampaigns]); const filtered = campaigns.filter((c) => { const matchesQuery = [c.title, c.category, c.location, c.short_description] .some((v) => String(v ?? "").toLowerCase().includes(query.toLowerCase())); const matchesFilter = filter === "all" || c.status === filter; return matchesQuery && matchesFilter; }); const stats = useMemo(() => ({ total: campaigns.length, active: campaigns.filter((c) => c.status === "active").length, totalRaised: campaigns.reduce((sum, c) => sum + Number(c.raised_amount), 0), totalGoal: campaigns.reduce((sum, c) => sum + Number(c.goal_amount), 0), }), [campaigns]); const saveCampaign = async (event: React.FormEvent) => { event.preventDefault(); setMessage(""); const fd = new FormData(event.currentTarget); const hasFile = [...fd.values()].some((v) => v instanceof File && (v as File).size > 0); const editing = modal.type === "edit"; const id = editing ? modal.row.id : ""; if (hasFile) { const res = await fetch(`${API}/admin/crowdfunding${editing ? `/${id}` : ""}`, { method: editing ? "PUT" : "POST", headers: { Authorization: `Bearer ${token}` }, body: fd, }); if (!res.ok) { setMessage("Save failed."); return; } } else { const body: Record = {}; fd.forEach((val, key) => { body[key] = val === "" ? null : val; }); const res = await fetch(`${API}/admin/crowdfunding${editing ? `/${id}` : ""}`, { method: editing ? "PUT" : "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` }, body: JSON.stringify(body), }); if (!res.ok) { setMessage("Save failed."); return; } } setModal({ type: "none" }); setMessage(editing ? "Campaign updated." : "Campaign created."); toast.success(editing ? "Campaign updated!" : "Campaign created!"); await loadCampaigns(); }; const deleteCampaign = async () => { if (modal.type !== "delete") return; const res = await fetch(`${API}/admin/crowdfunding/${modal.row.id}`, { method: "DELETE", headers: { Authorization: `Bearer ${token}` }, }); if (!res.ok) { setMessage("Delete failed."); return; } setModal({ type: "none" }); setMessage("Campaign deleted."); toast.success("Campaign deleted!"); await loadCampaigns(); }; return (

Fundraising

Crowdfunding Campaigns

Manage campaign goals, progress, images and public display.

{message &&

{message}

} {/* Stats */}
{[ { label: "Total Campaigns", value: stats.total, color: "var(--color-primary)", bg: "var(--color-canvas-soft)" }, { label: "Active", value: stats.active, color: "var(--color-primary-deep)", bg: "var(--color-canvas-soft)" }, { label: "Total Raised", value: `Rs. ${stats.totalRaised.toLocaleString("en-IN")}`, color: "#ea580c", bg: "var(--color-canvas-soft)" }, { label: "Total Goal", value: `Rs. ${stats.totalGoal.toLocaleString("en-IN")}`, color: "var(--color-ink)", bg: "var(--color-canvas-soft)" }, ].map((s) => (

{s.label}

{s.value}

))}
{/* Filter bar */}
Q setQuery(e.target.value)} placeholder="Search campaigns..." className="min-w-0 flex-1 bg-transparent outline-none" />
{["all", "active", "draft", "completed", "cancelled"].map((s) => ( ))}
{/* Campaign cards */} {loading ? (
Loading campaigns...
) : filtered.length === 0 ? (
No campaigns found.
) : (
{filtered.map((c) => { const pct = Number(c.goal_amount) > 0 ? Math.min(100, Math.round((Number(c.raised_amount) / Number(c.goal_amount)) * 100)) : 0; return (
{c.cover_image_url ? ( {c.title} ) : (
{c.title.charAt(0)}
)}
{categoryLabels[c.category] || c.category} {c.featured ? Featured : null}
{c.status}

{c.title}

{c.short_description}

Rs. {Number(c.raised_amount).toLocaleString("en-IN")} {pct}%
Goal: Rs. {Number(c.goal_amount).toLocaleString("en-IN")} {c.end_date && Ends {new Date(c.end_date).toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" })}}
{c.beneficiaries_count > 0 && {c.beneficiaries_count.toLocaleString("en-IN")} beneficiaries} {c.location && {c.location}}
); })}
)} {/* Create/Edit Modal */} {(modal.type === "create" || modal.type === "edit") && ( setModal({ type: "none" })} onSubmit={saveCampaign} /> )} {/* Delete Modal */} {modal.type === "delete" && (

Confirm delete

Delete Campaign

This will permanently delete "{modal.row.title}". This action cannot be undone.

)}
); } function CampaignModal({ campaign, onClose, onSubmit, }: { campaign: Campaign | null; onClose: () => void; onSubmit: (event: React.FormEvent) => void; }) { const [html, setHtml] = useState(campaign?.description || ""); const [coverPreview, setCoverPreview] = useState(campaign?.cover_image_url || ""); const [existingImages, setExistingImages] = useState(campaign?.images || []); const [newImagePreviews, setNewImagePreviews] = useState([]); const handleCoverChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) setCoverPreview(URL.createObjectURL(file)); }; const handleImagesChange = (e: React.ChangeEvent) => { const files = e.target.files; if (!files) return; setNewImagePreviews((prev) => [...prev, ...Array.from(files).map((f) => URL.createObjectURL(f))]); }; const removeExistingImage = (index: number) => setExistingImages((prev) => prev.filter((_, i) => i !== index)); const removeNewImage = (index: number) => setNewImagePreviews((prev) => prev.filter((_, i) => i !== index)); return (

Campaign form

{campaign ? "Edit Campaign" : "New Campaign"}