diff --git a/src/components/dashboard/RecentCampaigns.jsx b/src/components/dashboard/RecentCampaigns.jsx new file mode 100644 index 0000000..01a4f8c --- /dev/null +++ b/src/components/dashboard/RecentCampaigns.jsx @@ -0,0 +1,185 @@ +import { useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import { ArrowRight, PlusCircle, LayoutGrid } from 'lucide-react'; +import { useAppDispatch, useAppSelector } from '../../store/hooks'; +import { fetchRecentCampaigns } from '../../features/dashboard/dashboardThunks'; +import { + selectRecentCampaigns, + selectDashboardLoading, +} from '../../features/dashboard/dashboardSelectors'; + +// ─── Status badge config ────────────────────────────────────────────────────── +const STATUS_BADGE = { + active: { label: 'Active', className: 'bg-emerald-100 text-emerald-700' }, + completed: { label: 'Completed', className: 'bg-indigo-100 text-indigo-700' }, + pending: { label: 'Pending', className: 'bg-amber-100 text-amber-700' }, + rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' }, + paused: { label: 'Paused', className: 'bg-slate-100 text-slate-600' }, +}; + +function StatusBadge({ status }) { + const cfg = STATUS_BADGE[status?.toLowerCase()] ?? { + label: status ?? 'Unknown', + className: 'bg-slate-100 text-slate-500', + }; + return ( + + {cfg.label} + + ); +} + +// ─── Progress bar ───────────────────────────────────────────────────────────── +function ProgressBar({ raised, goal }) { + const pct = goal > 0 ? Math.min((raised / goal) * 100, 100) : 0; + return ( +
+
+
+ ); +} + +// ─── Skeleton card ──────────────────────────────────────────────────────────── +function CampaignCardSkeleton() { + return ( +
+
+
+
+
+
+
+
+
+
+
+ ); +} + +// ─── Main component ─────────────────────────────────────────────────────────── +export default function RecentCampaigns() { + const dispatch = useAppDispatch(); + const campaigns = useAppSelector(selectRecentCampaigns); + const loading = useAppSelector(selectDashboardLoading); + + useEffect(() => { + dispatch(fetchRecentCampaigns()); + }, [dispatch]); + + const recent = campaigns.slice(0, 4); + + return ( +
+ {/* Header */} +
+

Recent Campaigns

+
+ + + Create New Campaign + + + View All + + +
+
+ + {/* Content */} +
+ {loading ? ( +
+ {Array.from({ length: 4 }).map((_, i) => ( + + ))} +
+ ) : recent.length === 0 ? ( + // Empty state +
+ +

No campaigns yet

+

+ You have not created any campaigns. Launch your first one and start + collecting donations. +

+ + + Create Your First Campaign + +
+ ) : ( + // Campaign cards grid +
+ {recent.map((campaign) => { + const id = campaign._id ?? campaign.id; + const raised = Number(campaign.amountRaised ?? campaign.raised ?? 0); + const goal = Number(campaign.goal ?? campaign.targetAmount ?? 0); + const date = campaign.createdAt + ? new Date(campaign.createdAt).toLocaleDateString(undefined, { + year: 'numeric', + month: 'short', + day: 'numeric', + }) + : '—'; + + return ( + + {/* Title + status */} +
+

+ {campaign.title ?? campaign.name ?? 'Untitled Campaign'} +

+ +
+ + {/* Progress bar */} + + + {/* Raised / goal + date */} +
+ + + {raised.toLocaleString(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })} + + {goal > 0 && ( + <> + {' / '} + {goal.toLocaleString(undefined, { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + })} + + )} + + {date} +
+ + ); + })} +
+ )} +
+
+ ); +} \ No newline at end of file