{
+ if (layer.layerType === 'SYSTEM') return;
+ setColorPickerLayerId(isOpen ? null : layer.id);
+ }}
+ style={{
+ width: 14,
+ height: 14,
+ borderRadius: '50%',
+ background: layer.color,
+ cursor: layer.layerType === 'SYSTEM' ? 'default' : 'pointer',
+ flexShrink: 0,
+ border: '2px solid rgba(255,255,255,0.15)',
+ transition: 'transform 0.15s',
+ }}
+ />
+ {isOpen && (
+
+ );
+ };
+
+ const renderLayerRow = (layer: CalendarLayer) => {
+ const isEditing = editingId === layer.id;
+ const vis = layer.visibility;
+
+ return (
+
+
+ Layers
+
+
+ {loading && (
+
+ Loading layers...
+
+ )}
+
+ {grouped.map((group) => (
+
+
+
+ {GROUP_ICONS[group.type]}
+
+
+ {GROUP_LABELS[group.type]}
+
+
+ {group.layers.map(renderLayerRow)}
+ {group.layers.length === 0 && (
+
+ No layers
+
+ )}
+
+
+ ))}
+
+ {showAddForm ? (
+
+
setNewName(e.target.value)}
+ onPressEnter={handleCreate}
+ autoFocus
+ />
+
+
+ {PRESET_COLORS.map((c) => (
+
setNewColor(c)}
+ style={{
+ width: 20,
+ height: 20,
+ borderRadius: '50%',
+ background: c,
+ cursor: 'pointer',
+ border: c === newColor ? '2px solid #fff' : '2px solid transparent',
+ }}
+ />
+ ))}
+
+
+
+ }
+ onClick={handleCreate}
+ disabled={!newName.trim()}
+ >
+ Add
+
+ }
+ onClick={() => setShowAddForm(false)}
+ >
+ Cancel
+
+
+
+ ) : (
+
}
+ onClick={() => setShowAddForm(true)}
+ block
+ style={{ marginTop: 4 }}
+ >
+ Add Layer
+
+ )}
+
+ );
+}
diff --git a/admin/src/components/calendar/MobileDayView.tsx b/admin/src/components/calendar/MobileDayView.tsx
new file mode 100644
index 0000000..d25b657
--- /dev/null
+++ b/admin/src/components/calendar/MobileDayView.tsx
@@ -0,0 +1,424 @@
+import { useMemo } from 'react';
+import { Button, Typography, Empty, theme } from 'antd';
+import {
+ LeftOutlined,
+ RightOutlined,
+ PlusOutlined,
+ BellOutlined,
+ EnvironmentOutlined,
+ LockOutlined,
+} from '@ant-design/icons';
+import dayjs from 'dayjs';
+import type { Dayjs } from 'dayjs';
+import type { PersonalCalendarItem, CalendarLayer } from '@/types/api';
+
+const { Text } = Typography;
+const { useToken } = theme;
+
+interface MobileDayViewProps {
+ items: PersonalCalendarItem[];
+ layers?: CalendarLayer[];
+ currentMonth: Dayjs;
+ selectedDate: string | null;
+ onDateSelect: (date: string) => void;
+ onMonthChange: (month: Dayjs) => void;
+ onItemClick: (item: PersonalCalendarItem) => void;
+ onAddItem: (date: string) => void;
+}
+
+// Time slots from 6am to 10pm
+const START_HOUR = 6;
+const END_HOUR = 22;
+const SLOT_HEIGHT = 60; // px per hour
+
+export default function MobileDayView({
+ items,
+ selectedDate,
+ onDateSelect,
+ onItemClick,
+ onAddItem,
+}: MobileDayViewProps) {
+ const { token } = useToken();
+
+ const currentDate = selectedDate ? dayjs(selectedDate) : dayjs();
+ const dateKey = currentDate.format('YYYY-MM-DD');
+ const isToday = dateKey === dayjs().format('YYYY-MM-DD');
+
+ // Filter items for the selected date
+ const dayItems = useMemo(() => {
+ return items
+ .filter((item) => item.date === dateKey)
+ .sort((a, b) => a.startTime.localeCompare(b.startTime));
+ }, [items, dateKey]);
+
+ const allDayItems = dayItems.filter((item) => item.isAllDay);
+ const timedItems = dayItems.filter((item) => !item.isAllDay);
+
+ // Calculate position and height of timed items
+ const positionedItems = useMemo(() => {
+ return timedItems.map((item) => {
+ const parts = item.startTime.split(':');
+ const sh = parseInt(parts[0] ?? '0', 10);
+ const sm = parseInt(parts[1] ?? '0', 10);
+ const endParts = item.endTime.split(':');
+ const eh = parseInt(endParts[0] ?? '0', 10);
+ const em = parseInt(endParts[1] ?? '0', 10);
+ const startMinutes = sh * 60 + sm;
+ const endMinutes = eh * 60 + em;
+ const topMinutes = startMinutes - START_HOUR * 60;
+ const durationMinutes = Math.max(endMinutes - startMinutes, 15); // min 15min display
+
+ return {
+ item,
+ top: Math.max(0, (topMinutes / 60) * SLOT_HEIGHT),
+ height: Math.max(20, (durationMinutes / 60) * SLOT_HEIGHT),
+ };
+ });
+ }, [timedItems]);
+
+ const totalHeight = (END_HOUR - START_HOUR) * SLOT_HEIGHT;
+
+ // Current time indicator position
+ const nowIndicatorTop = useMemo(() => {
+ if (!isToday) return null;
+ const now = dayjs();
+ const minutes = now.hour() * 60 + now.minute();
+ const top = ((minutes - START_HOUR * 60) / 60) * SLOT_HEIGHT;
+ if (top < 0 || top > totalHeight) return null;
+ return top;
+ }, [isToday, totalHeight]);
+
+ const handlePrev = () => {
+ onDateSelect(currentDate.subtract(1, 'day').format('YYYY-MM-DD'));
+ };
+
+ const handleNext = () => {
+ onDateSelect(currentDate.add(1, 'day').format('YYYY-MM-DD'));
+ };
+
+ return (
+
+ {/* Date header with navigation */}
+
+
}
+ onClick={handlePrev}
+ style={{ color: 'rgba(255,255,255,0.65)' }}
+ />
+
+
+ {currentDate.format('dddd')}
+
+
+ {currentDate.format('MMMM D, YYYY')}
+
+
+
}
+ onClick={handleNext}
+ style={{ color: 'rgba(255,255,255,0.65)' }}
+ />
+
+
+ {/* Today button */}
+ {!isToday && (
+
+
+
+ )}
+
+ {/* All-day items section */}
+ {allDayItems.length > 0 && (
+
+
+ All Day
+
+ {allDayItems.map((item) => (
+ onItemClick(item)}
+ />
+ ))}
+
+ )}
+
+ {/* Scrollable time grid */}
+
+ {dayItems.length === 0 && (
+
+
+
+ )}
+
+ {(timedItems.length > 0 || allDayItems.length > 0) && (
+
+ {/* Hour lines */}
+ {Array.from({ length: END_HOUR - START_HOUR + 1 }, (_, i) => {
+ const hour = START_HOUR + i;
+ const top = i * SLOT_HEIGHT;
+ return (
+
+
+ {hour === 0 ? '12 AM' : hour < 12 ? `${hour} AM` : hour === 12 ? '12 PM' : `${hour - 12} PM`}
+
+
+
+ );
+ })}
+
+ {/* Current time indicator */}
+ {nowIndicatorTop !== null && (
+
+ )}
+
+ {/* Positioned items */}
+ {positionedItems.map(({ item, top, height }) => {
+ const isTimeBlock = item.itemType === 'TIME_BLOCK';
+ const isReminder = item.itemType === 'REMINDER';
+ const color = item.color || token.colorPrimary;
+ const isBusyHidden = isTimeBlock && item.showDetailsTo === 'NOBODY';
+
+ return (
+
onItemClick(item)}
+ style={{
+ position: 'absolute',
+ top: top + 1,
+ left: 50,
+ right: 4,
+ height: height - 2,
+ background: isTimeBlock
+ ? hexToRgba(color, 0.1)
+ : hexToRgba(color, 0.2),
+ border: isTimeBlock
+ ? `1px dashed ${hexToRgba(color, 0.35)}`
+ : `1px solid ${hexToRgba(color, 0.4)}`,
+ borderLeft: `3px solid ${color}`,
+ borderRadius: 6,
+ padding: '4px 8px',
+ cursor: 'pointer',
+ overflow: 'hidden',
+ zIndex: 2,
+ transition: 'background 0.15s',
+ }}
+ >
+ {isBusyHidden ? (
+
+
+ Busy
+
+ ) : (
+ <>
+
+ {isReminder && }
+ {item.title}
+
+
+ {item.startTime} - {item.endTime}
+
+ {item.location && height > 45 && (
+
+
+ {item.location}
+
+ )}
+
+ )}
+
+ );
+ })}
+
+ )}
+
+
+ {/* Floating add button */}
+
}
+ size="large"
+ onClick={() => onAddItem(dateKey)}
+ style={{
+ position: 'absolute',
+ bottom: 20,
+ right: 20,
+ width: 48,
+ height: 48,
+ boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
+ zIndex: 10,
+ }}
+ />
+
+ );
+}
+
+/** Compact item pill for all-day items */
+function ItemPill({
+ item,
+ onClick,
+}: {
+ item: PersonalCalendarItem;
+ onClick: () => void;
+}) {
+ const isTimeBlock = item.itemType === 'TIME_BLOCK';
+ const isReminder = item.itemType === 'REMINDER';
+ const color = item.color;
+
+ return (
+
+ {isReminder && }
+ {item.title}
+
+ );
+}
+
+/** Convert a hex color to rgba string */
+function hexToRgba(hex: string, alpha: number): string {
+ const cleaned = hex.replace('#', '');
+ if (cleaned.length !== 6) return `rgba(24, 144, 255, ${alpha})`;
+ const r = parseInt(cleaned.slice(0, 2), 16);
+ const g = parseInt(cleaned.slice(2, 4), 16);
+ const b = parseInt(cleaned.slice(4, 6), 16);
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
diff --git a/admin/src/components/calendar/PersonalCalendarView.tsx b/admin/src/components/calendar/PersonalCalendarView.tsx
new file mode 100644
index 0000000..77e27bc
--- /dev/null
+++ b/admin/src/components/calendar/PersonalCalendarView.tsx
@@ -0,0 +1,173 @@
+import { useMemo } from 'react';
+import { Calendar, Spin, Empty, theme } from 'antd';
+import { BellOutlined } from '@ant-design/icons';
+import type { Dayjs } from 'dayjs';
+import type { PersonalCalendarItem, CalendarLayer } from '@/types/api';
+
+const { useToken } = theme;
+
+interface PersonalCalendarViewProps {
+ items: PersonalCalendarItem[];
+ layers?: CalendarLayer[];
+ loading?: boolean;
+ currentMonth: Dayjs;
+ selectedDate: string | null;
+ onDateSelect: (date: string) => void;
+ onItemClick: (item: PersonalCalendarItem) => void;
+ onMonthChange: (month: Dayjs) => void;
+}
+
+const MAX_CELL_ITEMS = 3;
+
+export default function PersonalCalendarView({
+ items,
+ loading,
+ onDateSelect,
+ onItemClick,
+ onMonthChange,
+}: PersonalCalendarViewProps) {
+ useToken();
+
+ // Group items by date
+ const itemsByDate = useMemo(() => {
+ const map: Record
= {};
+ for (const item of items) {
+ const arr = map[item.date];
+ if (arr) {
+ arr.push(item);
+ } else {
+ map[item.date] = [item];
+ }
+ }
+ // Sort items within each date by startTime
+ for (const key of Object.keys(map)) {
+ map[key]!.sort((a, b) => a.startTime.localeCompare(b.startTime));
+ }
+ return map;
+ }, [items]);
+
+ const handleSelect = (date: Dayjs) => {
+ onDateSelect(date.format('YYYY-MM-DD'));
+ };
+
+ const handlePanelChange = (date: Dayjs) => {
+ onMonthChange(date);
+ };
+
+ const cellRender = (date: Dayjs) => {
+ const dateKey = date.format('YYYY-MM-DD');
+ const dayItems = itemsByDate[dateKey];
+ if (!dayItems || dayItems.length === 0) return null;
+
+ const visible = dayItems.slice(0, MAX_CELL_ITEMS);
+ const overflow = dayItems.length - MAX_CELL_ITEMS;
+
+ return (
+
+ {visible.map((item) => {
+ const isTimeBlock = item.itemType === 'TIME_BLOCK';
+ const isReminder = item.itemType === 'REMINDER';
+ const color = item.color || '#1890ff';
+ const bgAlpha = isTimeBlock ? 0.1 : 0.2;
+ const borderAlpha = isTimeBlock ? 0.3 : 0.5;
+
+ return (
+
{
+ e.stopPropagation();
+ onItemClick(item);
+ }}
+ style={{
+ background: hexToRgba(color, bgAlpha),
+ border: isTimeBlock
+ ? `1px dashed ${hexToRgba(color, borderAlpha)}`
+ : `1px solid ${hexToRgba(color, borderAlpha)}`,
+ borderLeft: `3px solid ${color}`,
+ borderRadius: 4,
+ padding: '2px 5px',
+ fontSize: 11,
+ lineHeight: '15px',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ color: 'rgba(255,255,255,0.85)',
+ cursor: 'pointer',
+ opacity: isTimeBlock ? 0.75 : 1,
+ }}
+ >
+ {!item.isAllDay && (
+
+ {item.startTime}
+
+ )}
+ {isReminder && (
+
+ )}
+ {item.title}
+
+ );
+ })}
+ {overflow > 0 && (
+
+ +{overflow} more
+
+ )}
+
+
+
+ );
+ }
+
+ return (
+
+ {loading && (
+
+
+
+ )}
+
cellRender(date)}
+ onSelect={handleSelect}
+ onPanelChange={handlePanelChange}
+ />
+ {items.length === 0 && (
+
+
+
+ )}
+
+
+
+ Repeats
+
+
+
+
+ {frequency && frequency !== 'BIWEEKLY' && (
+
+
+ Every
+
+
+
+
+ {frequency === 'DAILY' ? 'day(s)' : frequency === 'MONTHLY' ? 'month(s)' : 'week(s)'}
+
+
+
+ )}
+
+ {(frequency === 'WEEKLY' || frequency === 'BIWEEKLY') && (
+
+
+ On days
+
+
+ {DAY_VALUES.map((day, idx) => {
+ const selected = daysOfWeek.includes(day);
+ return (
+
handleDaysOfWeekToggle(day)}
+ style={{
+ width: 38,
+ height: 30,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ borderRadius: 15,
+ fontSize: 12,
+ fontWeight: selected ? 600 : 400,
+ cursor: 'pointer',
+ userSelect: 'none',
+ background: selected ? 'rgba(24, 144, 255, 0.3)' : 'rgba(255,255,255,0.06)',
+ border: selected ? '1px solid rgba(24, 144, 255, 0.6)' : '1px solid rgba(255,255,255,0.12)',
+ color: selected ? '#1890ff' : 'rgba(255,255,255,0.65)',
+ transition: 'all 0.2s',
+ }}
+ >
+ {DAY_LABELS[idx]}
+
+ );
+ })}
+
+
+ )}
+
+ {frequency === 'MONTHLY' && (
+
+
+ Day of month
+
+
+
+ )}
+
+ {frequency && (
+
+
+ Ends
+
+
+
+
+ )}
+
+ {frequency && previewText && (
+
+ {previewText}
+ {endDate ? `, until ${dayjs(endDate).format('MMM D, YYYY')}` : ''}
+
+ )}
+
{item.startTime}
- {item.tags?.includes('video-meeting') && (
+ {(item.tags?.includes('video-meeting') || item.eventFormat === 'ONLINE' || item.eventFormat === 'HYBRID') && (
)}
{item.title}
@@ -197,6 +198,7 @@ export default function UnifiedCalendar({ onShiftSignup, gancioUrl, onEventSubmi
const renderItemCard = (item: UnifiedCalendarItem) => {
const isShift = item.type === 'shift';
const isPoll = item.type === 'poll';
+ const isTicketed = item.type === 'ticketed_event';
const spotsLeft = isShift && item.maxVolunteers
? item.maxVolunteers - (item.currentVolunteers || 0)
: null;
@@ -204,9 +206,9 @@ export default function UnifiedCalendar({ onShiftSignup, gancioUrl, onEventSubmi
const pct = isShift && item.maxVolunteers && item.maxVolunteers > 0
? Math.round(((item.currentVolunteers || 0) / item.maxVolunteers) * 100)
: 0;
- const borderColor = isPoll ? '#fa8c16' : isShift ? '#1890ff' : '#52c41a';
- const tagColor = isPoll ? 'orange' : isShift ? 'blue' : 'green';
- const tagLabel = isPoll ? 'Poll' : isShift ? 'Shift' : 'Event';
+ const borderColor = isTicketed ? '#722ed1' : isPoll ? '#fa8c16' : isShift ? '#1890ff' : '#52c41a';
+ const tagColor = isTicketed ? 'purple' : isPoll ? 'orange' : isShift ? 'blue' : 'green';
+ const tagLabel = isTicketed ? 'Ticketed' : isPoll ? 'Poll' : isShift ? 'Shift' : 'Event';
return (
{item.title}
- {item.tags?.includes('video-meeting') && (
-
-
+ {(item.tags?.includes('video-meeting') || item.eventFormat === 'ONLINE' || item.eventFormat === 'HYBRID') && (
+
+
)}
@@ -252,6 +254,27 @@ export default function UnifiedCalendar({ onShiftSignup, gancioUrl, onEventSubmi
+
+
+
+ Attendees
+
+
+ {item.currentAttendees || 0}/{item.maxAttendees}
+
+
+
+
@@ -316,6 +339,16 @@ export default function UnifiedCalendar({ onShiftSignup, gancioUrl, onEventSubmi
Vote ({item.pollVoteCount ?? 0})
)}
+
+ {isTicketed && item.eventSlug && (
+
+ )}
);
diff --git a/admin/src/components/social/CampaignCelebration.tsx b/admin/src/components/social/CampaignCelebration.tsx
new file mode 100644
index 0000000..04f8133
--- /dev/null
+++ b/admin/src/components/social/CampaignCelebration.tsx
@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react';
+import { Card, Typography, Tag, Space } from 'antd';
+import { TrophyOutlined } from '@ant-design/icons';
+import axios from 'axios';
+
+const { Text } = Typography;
+
+interface Story {
+ id: string;
+ title: string;
+ type: string;
+ milestoneValue: number | null;
+ publishedAt: string | null;
+}
+
+interface CampaignCelebrationProps {
+ campaignId: string;
+}
+
+export default function CampaignCelebration({ campaignId }: CampaignCelebrationProps) {
+ const [stories, setStories] = useState
([]);
+
+ useEffect(() => {
+ if (!campaignId) return;
+ axios.get(`/api/social/stories/campaign/${campaignId}`, { params: { limit: 5 } })
+ .then(({ data }) => {
+ const published = (data.stories || []).filter(
+ (s: Story) => s.type === 'MILESTONE' || s.type === 'VICTORY',
+ );
+ setStories(published);
+ })
+ .catch(() => {});
+ }, [campaignId]);
+
+ if (stories.length === 0) return null;
+
+ return (
+
+
+
+
+ Campaign Milestones
+
+
+ {stories.map((s) => (
+
+ {s.milestoneValue
+ ? `${s.milestoneValue.toLocaleString()} emails`
+ : s.title}
+
+ ))}
+
+
+
+ );
+}
diff --git a/admin/src/components/social/ChallengeCard.tsx b/admin/src/components/social/ChallengeCard.tsx
new file mode 100644
index 0000000..f2f0eeb
--- /dev/null
+++ b/admin/src/components/social/ChallengeCard.tsx
@@ -0,0 +1,114 @@
+import { Card, Tag, Typography, Space, Badge } from 'antd';
+import {
+ HomeOutlined,
+ MailOutlined,
+ ScheduleOutlined,
+ MessageOutlined,
+ UserAddOutlined,
+ ClockCircleOutlined,
+ TeamOutlined,
+} from '@ant-design/icons';
+import dayjs from 'dayjs';
+import { useNavigate } from 'react-router-dom';
+
+export interface ChallengeMetricInfo {
+ icon: React.ReactNode;
+ label: string;
+ color: string;
+}
+
+export const METRIC_MAP: Record = {
+ DOORS_KNOCKED: { icon: , label: 'Doors Knocked', color: '#52c41a' },
+ EMAILS_SENT: { icon: , label: 'Emails Sent', color: '#1890ff' },
+ SHIFTS_ATTENDED: { icon: , label: 'Shifts Attended', color: '#fa8c16' },
+ RESPONSES_SUBMITTED: { icon: , label: 'Responses', color: '#722ed1' },
+ REFERRALS_MADE: { icon: , label: 'Referrals', color: '#eb2f96' },
+};
+
+export const STATUS_COLORS: Record = {
+ DRAFT: 'default',
+ UPCOMING: 'blue',
+ ACTIVE: 'green',
+ COMPLETED: 'gold',
+ CANCELLED: 'red',
+};
+
+interface ChallengeCardProps {
+ challenge: {
+ id: string;
+ title: string;
+ metric: string;
+ status: string;
+ startsAt: string;
+ endsAt: string;
+ _count?: { teams: number };
+ teams?: unknown[];
+ };
+ myTeam?: { id: string; name: string } | null;
+}
+
+function CountdownTimer({ target, label }: { target: string; label: string }) {
+ const diff = dayjs(target).diff(dayjs(), 'second');
+ if (diff <= 0) return null;
+
+ const days = Math.floor(diff / 86400);
+ const hours = Math.floor((diff % 86400) / 3600);
+
+ return (
+
+
+ {label}: {days > 0 ? `${days}d ` : ''}{hours}h
+
+ );
+}
+
+export default function ChallengeCard({ challenge, myTeam }: ChallengeCardProps) {
+ const navigate = useNavigate();
+ const metric = (METRIC_MAP[challenge.metric] || METRIC_MAP.DOORS_KNOCKED)!;
+ const teamCount = challenge._count?.teams ?? challenge.teams?.length ?? 0;
+
+ const isActive = challenge.status === 'ACTIVE';
+ const isUpcoming = challenge.status === 'UPCOMING';
+
+ return (
+ navigate(`/volunteer/challenges/${challenge.id}`)}
+ style={{ cursor: 'pointer' }}
+ >
+
+
+
+ {challenge.title}
+
+ {challenge.status}
+
+
+
+
+ {metric.label}
+
+
+
+ {teamCount} team{teamCount !== 1 ? 's' : ''}
+
+
+
+
+ {dayjs(challenge.startsAt).format('MMM D')} - {dayjs(challenge.endsAt).format('MMM D, YYYY')}
+
+
+ {isUpcoming && }
+ {isActive && }
+
+ {myTeam && (
+
+ )}
+
+
+ );
+}
diff --git a/admin/src/components/social/ChallengeLeaderboard.tsx b/admin/src/components/social/ChallengeLeaderboard.tsx
new file mode 100644
index 0000000..e77ec50
--- /dev/null
+++ b/admin/src/components/social/ChallengeLeaderboard.tsx
@@ -0,0 +1,82 @@
+import { List, Typography, Tag, Space, Collapse } from 'antd';
+import { TrophyOutlined, UserOutlined, CrownOutlined } from '@ant-design/icons';
+
+interface TeamMember {
+ id: number;
+ score: number;
+ user: { id: string; name: string | null; email: string };
+}
+
+interface LeaderboardTeam {
+ id: string;
+ name: string;
+ score: number;
+ captainUserId: string;
+ members: TeamMember[];
+}
+
+interface ChallengeLeaderboardProps {
+ teams: LeaderboardTeam[];
+ myTeamId?: string | null;
+}
+
+const MEDAL_COLORS = ['#ffd700', '#c0c0c0', '#cd7f32'];
+
+export default function ChallengeLeaderboard({ teams, myTeamId }: ChallengeLeaderboardProps) {
+ if (teams.length === 0) {
+ return No teams yet;
+ }
+
+ const items = teams.map((team, idx) => ({
+ key: team.id,
+ label: (
+
+
+ {idx < 3 ? (
+
+ ) : (
+
+ {idx + 1}
+
+ )}
+ {team.name}
+ {team.id === myTeamId && You}
+
+
+
+ {team.members.length}
+
+ {team.score}
+
+
+ ),
+ children: (
+ (
+
+
+ {m.user.id === team.captainUserId && (
+
+ )}
+ {m.user.name || m.user.email}
+
+ {m.score}
+
+ )}
+ />
+ ),
+ }));
+
+ return ;
+}
diff --git a/admin/src/components/social/FeedCard.tsx b/admin/src/components/social/FeedCard.tsx
index 930012b..165cb48 100644
--- a/admin/src/components/social/FeedCard.tsx
+++ b/admin/src/components/social/FeedCard.tsx
@@ -1,6 +1,6 @@
import { useNavigate } from 'react-router-dom';
import { Card, Typography, theme } from 'antd';
-import { ScheduleOutlined, MailOutlined, EnvironmentOutlined, MessageOutlined } from '@ant-design/icons';
+import { ScheduleOutlined, MailOutlined, EnvironmentOutlined, MessageOutlined, TrophyOutlined, StarOutlined, UserAddOutlined, FlagOutlined } from '@ant-design/icons';
import UserAvatar from './UserAvatar';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
@@ -27,6 +27,24 @@ const TYPE_CONFIG: Record `/campaigns/${meta.campaignId as string}`,
},
+ impact_story: {
+ icon: ,
+ color: '#faad14',
+ getLink: (meta) => `/campaign/${meta.campaignSlug as string}`,
+ },
+ volunteer_featured: {
+ icon: ,
+ color: '#eb2f96',
+ getLink: () => `/wall-of-fame`,
+ },
+ referral_completed: {
+ icon: ,
+ color: '#13c2c2',
+ },
+ challenge_completed: {
+ icon: ,
+ color: '#52c41a',
+ },
};
interface FeedItem {
diff --git a/admin/src/components/social/ImpactStoryCard.tsx b/admin/src/components/social/ImpactStoryCard.tsx
new file mode 100644
index 0000000..17eea59
--- /dev/null
+++ b/admin/src/components/social/ImpactStoryCard.tsx
@@ -0,0 +1,74 @@
+import { Card, Tag, Typography } from 'antd';
+import { TrophyOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+
+const { Text, Paragraph } = Typography;
+
+interface ImpactStoryCardProps {
+ story: {
+ id: string;
+ title: string;
+ body: string;
+ type: 'MILESTONE' | 'VICTORY' | 'RESPONSE' | 'CUSTOM';
+ campaignTitle?: string;
+ milestoneValue?: number | null;
+ milestoneMetric?: string | null;
+ publishedAt?: string | null;
+ };
+}
+
+const typeLabels: Record = {
+ MILESTONE: 'Milestone',
+ VICTORY: 'Victory',
+ RESPONSE: 'Response',
+ CUSTOM: 'Story',
+};
+
+export default function ImpactStoryCard({ story }: ImpactStoryCardProps) {
+ const isMilestone = story.type === 'MILESTONE';
+
+ return (
+
+
+
+ {story.campaignTitle && (
+ {story.campaignTitle}
+ )}
+
+ {isMilestone && }
+ {typeLabels[story.type]}
+
+
+ {story.milestoneValue && (
+
+ {story.milestoneValue.toLocaleString()}
+
+ )}
+
+
+ {code.code}
+
+ {statusTag}
+
+
+ {code.note && (
+
+ {code.note}
+
+ )}
+
+
+
+ Used: {code.usedCount}{code.maxUses > 0 ? ` / ${code.maxUses}` : ' (unlimited)'}
+
+ {code.expiresAt && (
+
+ {isExpired ? 'Expired' : `Expires ${dayjs(code.expiresAt).format('MMM D, YYYY')}`}
+
+ )}
+
+ Created {dayjs(code.createdAt).format('MMM D, YYYY')}
+
+
+
+ {code.maxUses > 0 && (
+
+ )}
+
+
+
+ } onClick={handleCopyCode}>
+ Copy Code
+
+
+
+ } onClick={handleCopyLink}>
+ Share Link
+
+
+ {code.isActive && (
+ }
+ onClick={() => onDeactivate(code.id)}
+ loading={deactivating}
+ >
+ Deactivate
+
+ )}
+
+
+
+ );
+}
diff --git a/admin/src/components/social/PublicLeaderboard.tsx b/admin/src/components/social/PublicLeaderboard.tsx
new file mode 100644
index 0000000..f9115a1
--- /dev/null
+++ b/admin/src/components/social/PublicLeaderboard.tsx
@@ -0,0 +1,118 @@
+import { useState, useEffect, useCallback } from 'react';
+import { List, Typography, Switch, Space, Spin, Empty } from 'antd';
+import { TrophyOutlined, CrownOutlined } from '@ant-design/icons';
+import { api } from '@/lib/api';
+import UserAvatar from '@/components/social/UserAvatar';
+
+const { Text } = Typography;
+
+interface LeaderboardEntry {
+ rank: number;
+ userId: string;
+ name: string | null;
+ email: string;
+ score: number;
+}
+
+interface PublicLeaderboardProps {
+ type: 'canvass' | 'shifts' | 'campaigns';
+ showOptIn?: boolean;
+ optedIn?: boolean;
+ onOptInChange?: (value: boolean) => void;
+}
+
+const SCORE_LABELS: Record = {
+ canvass: 'doors',
+ shifts: 'shifts',
+ campaigns: 'campaigns',
+};
+
+function getMedalColor(rank: number): string | undefined {
+ if (rank === 1) return '#FFD700';
+ if (rank === 2) return '#C0C0C0';
+ if (rank === 3) return '#CD7F32';
+ return undefined;
+}
+
+export default function PublicLeaderboard({ type, showOptIn, optedIn, onOptInChange }: PublicLeaderboardProps) {
+ const [entries, setEntries] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ const fetchLeaderboard = useCallback(async () => {
+ try {
+ setLoading(true);
+ const { data } = await api.get('/social/spotlight/leaderboard', {
+ params: { type, limit: 10 },
+ });
+ setEntries(data.leaderboard || []);
+ } catch {
+ // Silently fail for unauthenticated users
+ setEntries([]);
+ } finally {
+ setLoading(false);
+ }
+ }, [type]);
+
+ useEffect(() => {
+ fetchLeaderboard();
+ }, [fetchLeaderboard]);
+
+ if (loading) return ;
+
+ if (entries.length === 0) {
+ return ;
+ }
+
+ return (
+
+
{
+ const medalColor = getMedalColor(entry.rank);
+ return (
+
+
+
+ {medalColor ? (
+
+ ) : (
+ #{entry.rank}
+ )}
+
+
+
+
+ {entry.name || entry.email.split('@')[0]}
+
+
+
+ {entry.score}{' '}
+ {SCORE_LABELS[type]}
+
+
+
+
+ Show me on leaderboard
+
+
+
+ )}
+
+
+
+
+
+ {spotlight.userName || 'Anonymous Volunteer'}
+
+ }>Featured
+
+
+ {monthLabel && (
+
{monthLabel}
+ )}
+
+ {spotlight.headline && (
+
+ {spotlight.headline}
+
+ )}
+
+ {spotlight.story && (
+
+ {spotlight.story}
+
+ )}
+
+ {spotlight.stats && (
+
+ {spotlight.stats.canvassVisits != null && spotlight.stats.canvassVisits > 0 && (
+
+ {spotlight.stats.canvassVisits} doors knocked
+
+ )}
+ {spotlight.stats.shiftSignups != null && spotlight.stats.shiftSignups > 0 && (
+
+ {spotlight.stats.shiftSignups} shifts
+
+ )}
+ {spotlight.stats.campaignEmails != null && spotlight.stats.campaignEmails > 0 && (
+
+ {spotlight.stats.campaignEmails} emails sent
+
+ )}
+
+ )}
+
+
{
+ const isFull = team.members.length >= maxTeamSize;
+ return (
+ Full
+ ) : (
+ }
+ loading={joiningId === team.id}
+ onClick={() => handleJoin(team.id)}
+ >
+ Join
+
+ ),
+ ]}
+ >
+ }
+ title={team.name}
+ description={
+
+ {team.members.length}/{maxTeamSize} members
+
+
+ {team.captain.name || team.captain.email}
+
+
+ }
+ />
+
+ );
+ }}
+ locale={{ emptyText: No teams yet }}
+ />
+
+ )}
+
+ );
+}
diff --git a/admin/src/pages/CampaignsPage.tsx b/admin/src/pages/CampaignsPage.tsx
index 535ea4c..9e76f35 100644
--- a/admin/src/pages/CampaignsPage.tsx
+++ b/admin/src/pages/CampaignsPage.tsx
@@ -29,11 +29,14 @@ import {
QuestionCircleOutlined,
ExportOutlined,
QrcodeOutlined,
+ DatabaseOutlined,
} from '@ant-design/icons';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import dayjs from 'dayjs';
import { useOutletContext, useNavigate } from 'react-router-dom';
import { api } from '@/lib/api';
+import { buildServiceUrl } from '@/lib/service-url';
+import { useAuthStore } from '@/stores/auth.store';
import type { AppOutletContext } from '@/components/AppLayout';
import type {
Campaign,
@@ -44,6 +47,7 @@ import type {
CreateCampaignPayload,
UpdateCampaignPayload,
Cut,
+ ServicesConfig,
} from '@/types/api';
import CampaignEmailsDrawer from '@/pages/CampaignEmailsDrawer';
import ExportContactsModal from '@/components/canvass/ExportContactsModal';
@@ -123,6 +127,9 @@ export default function CampaignsPage() {
const [createSelectedVideo, setCreateSelectedVideo] = useState
- - Log in to your Pangolin dashboard at {config?.pangolinApiUrl?.replace('/v1', '') || 'https://api.bnkserve.org'}
- - Navigate to Sites → Create New Site
- - Choose site type: Newt
- - Enter a site name (e.g., changemaker-{config?.domain || 'cmlite.org'})
- - Choose a subnet (suggested: {suggestedSubnet})
- - Select an exit node (if using multi-node setup)
- - Click Create Site
- - Copy the generated Newt ID and Newt Secret credentials
-
-
- Step 2: Update Your .env File
- Add these variables to your .env file with the credentials from Step 1:
-
- PANGOLIN_SITE_ID=your_site_id_here{'\n'}
- PANGOLIN_NEWT_ID=your_newt_id_here{'\n'}
- PANGOLIN_NEWT_SECRET=your_newt_secret_here{'\n'}
- PANGOLIN_ENDPOINT={config?.pangolinEndpoint || 'https://api.bnkserve.org'}
-
-
- Step 3: Start the Newt Container
-
- docker compose up -d newt
-
-
- Step 4: Create Public HTTP Resources
-
- In your Pangolin dashboard, navigate to Resources → Public → Add Resource.
- Create an HTTP resource for each service below:
-
-
- (
-
- {name}
- {record.required && Required}
-
- ),
- },
- {
- title: 'Domain',
- dataIndex: 'fullDomain',
- key: 'fullDomain',
- render: (domain: string) => {domain},
- },
- {
- title: 'Target',
- key: 'target',
- render: () => nginx:80,
- },
- {
- title: 'Container',
- dataIndex: 'container',
- key: 'container',
- render: (container: string) => {container},
- },
- ]}
- />
-
-
- For each resource:
-
- - Protocol: HTTPS (SSL enabled)
- - Target: nginx (all services route through nginx on port 80)
- - Authentication: None (set as "Not Protected" for public access)
-
-
- }
- style={{ marginTop: 12 }}
- />
-
- }
- style={{ marginBottom: 16 }}
- />
-
- )}
-
- {isConfigured && (
-
-
- You can also use the form below to create a site and resources via the API.
- This still requires manually updating your .env file with the credentials.
-
-
-
- }
- style={{ marginTop: 16 }}
- />
- )}
-
- {setupResult && (
- {
- setSetupResult(null);
- setShowCredentials(false);
- }}
- message="Setup Complete"
- description={
-
-
- Step 1: Add these to your .env file:
-
-
- : }
- onClick={() => setShowCredentials(!showCredentials)}
- >
- {showCredentials ? 'Hide' : 'Show'} Credentials
-
- }
- onClick={() => {
- const text = ((setupResult as Record).instructions as string[] || []).slice(1, -1).join('\n');
- navigator.clipboard.writeText(text);
- message.success('Copied to clipboard');
- }}
- >
- Copy to Clipboard
-
-
-
-
- {showCredentials && (
-
- {((setupResult as Record).instructions as string[] || []).slice(1, -1).join('\n')}
-
- )}
-
-
- Step 2: After updating .env, restart the Newt container:
-
-
- }
- loading={restartLoading}
- >
- Restart Newt Container
-
-
- {newtStatus?.ready && (
-
- )}
-
(
@@ -656,41 +425,332 @@ export default function PangolinPage() {
title: 'Domain',
dataIndex: 'fullDomain',
key: 'fullDomain',
- render: (domain: string) => {domain},
+ render: (domain: string) => {domain},
},
{
title: 'Target',
key: 'target',
- render: () => nginx:80,
- },
- {
- title: 'Container',
- dataIndex: 'container',
- key: 'container',
- render: (container: string) => {container},
+ render: (_: unknown, record) => (
+ {record.target_ip}:{record.target_port}
+ ),
},
]}
/>
+
+ )}
+ {/* Step 1 Instructions — shown when NOT configured at all */}
+ {!isConfigured && (
+ Setup Required}>
- For each resource:
-
- - Protocol: HTTPS (SSL enabled)
- - Target: nginx (all services route through nginx on port 80)
- - Authentication: None (set as "Not Protected" for public access)
-
+ Add these variables to your .env file:
+
+ PANGOLIN_API_URL=https://api.bnkserve.org/v1{'\n'}
+ PANGOLIN_API_KEY=your_api_key_here{'\n'}
+ PANGOLIN_ORG_ID=your_org_id
+
+ Then restart the API container:
+
+ docker compose restart api
+
+
+ Once configured, return here to run the automated setup.
+
}
- style={{ marginTop: 16 }}
/>
)}
+ {/* Setup Result */}
+ {setupResult && (
+
+ {setupResult.newt?.credentialsAutoWritten ? (
+
+
+ Site {setupResult.site?.siteId} created with{' '}
+ {setupResult.resources?.created || 0} resources and targets.
+
+
+ Credentials have been automatically written to .env and
+ the Newt container has been restarted.
+
+ {setupResult.resources?.items && setupResult.resources.items.length > 0 && (
+ {s} },
+ {
+ title: 'Target',
+ key: 'target',
+ render: (_: unknown, record) => (
+ record.targetCreated
+ ? } color="success">Created
+ : } color="error">Failed
+ ),
+ },
+ ]}
+ />
+ )}
+ {setupResult.resources?.errors && setupResult.resources.errors.length > 0 && (
+
+ )}
+
+ }
+ />
+ ) : setupResult.manualInstructions ? (
+
+
+ Site and resources were created, but credentials could not be auto-written to .env.
+
+
+ {setupResult.manualInstructions.slice(1).join('\n')}
+
+ After updating .env:
+
+ } loading={restartLoading}>
+ Restart Newt Container
+
+
+
+ }
+ />
+ ) : (
+
+ )}
+
+ )}
+
+ {/* Tunnel Management — shown when fully configured */}
+ {isConfigured && config?.siteId && (
+
+ }
+ loading={statusLoading}
+ onClick={fetchResourceStatus}
+ >
+ Refresh
+
+ }
+ loading={actionLoading}
+ onClick={handleSync}
+ >
+ Sync Resources
+
+
+ }
+ loading={restartLoading}
+ >
+ Restart Newt
+
+
+
+ }
+ >
+ {/* Summary badges */}
+ {resourceStatus && (
+
+
+ {resourceStatus.summary.healthy} Healthy
+
+ {resourceStatus.summary.misconfigured > 0 && (
+
+ {resourceStatus.summary.misconfigured} Issues
+
+ )}
+ {resourceStatus.summary.missing > 0 && (
+
+ {resourceStatus.summary.missing} Missing
+
+ )}
+ {resourceStatus.summary.extras > 0 && (
+
+ {resourceStatus.summary.extras} Unmanaged
+
+ )}
+
+ )}
+
+ {/* Sync result alert */}
+ {syncResult && (
+ 0 ? 'warning' : 'success'}
+ showIcon
+ closable
+ onClose={() => setSyncResult(null)}
+ message={`Sync: ${syncResult.created} created, ${syncResult.targetFixed} targets fixed, ${syncResult.skipped} unchanged`}
+ description={syncResult.details.errors.length > 0 ? (
+
+ {syncResult.details.errors.map((e, i) => - {e}
)}
+
+ ) : undefined}
+ style={{ marginBottom: 16 }}
+ />
+ )}
+
+ {/* Live resources table */}
+ {statusLoading && !resourceStatus ? (
+
+ ) : (
+
+ dataSource={resourceStatus?.resources || []}
+ rowKey="fullDomain"
+ size="small"
+ pagination={false}
+ loading={statusLoading}
+ columns={[
+ {
+ title: 'Service',
+ dataIndex: 'name',
+ key: 'name',
+ render: (name: string, record) => (
+
+ {name}
+ {record.required && Required}
+
+ ),
+ },
+ {
+ title: 'Domain',
+ dataIndex: 'fullDomain',
+ key: 'fullDomain',
+ ellipsis: true,
+ render: (domain: string) => {domain},
+ },
+ {
+ title: 'Status',
+ key: 'status',
+ width: 120,
+ render: (_: unknown, record) => {
+ if (!record.exists) {
+ return Missing;
+ }
+ if (!record.hasTarget) {
+ return No Target;
+ }
+ if (!record.targetCorrect) {
+ return (
+
+ Mismatch
+
+ );
+ }
+ return OK;
+ },
+ },
+ {
+ title: 'Target',
+ key: 'target',
+ render: (_: unknown, record) => {
+ if (!record.exists || !record.hasTarget) return —;
+ const actual = `${record.actualTargetIp}:${record.actualTargetPort}`;
+ if (!record.targetCorrect) {
+ return (
+
+ {actual}
+
+ );
+ }
+ return {actual};
+ },
+ },
+ ...(!isMobile ? [{
+ title: 'Auth',
+ key: 'auth',
+ width: 80,
+ render: (_: unknown, record: ResourceStatusItem) => {
+ if (!record.exists) return null;
+ return record.blockAccess
+ ? SSO
+ : Public;
+ },
+ }] : []),
+ ]}
+ />
+ )}
+
+ {/* Unmanaged resources (extras in Pangolin not in YAML) */}
+ {resourceStatus && resourceStatus.extras.length > 0 && (
+ 1 ? 's' : ''} (not in YAML)`,
+ children: (
+
+ dataSource={resourceStatus.extras}
+ rowKey="fullDomain"
+ size="small"
+ pagination={false}
+ columns={[
+ { title: 'Name', dataIndex: 'name', key: 'name' },
+ {
+ title: 'Domain',
+ dataIndex: 'fullDomain',
+ key: 'fullDomain',
+ render: (d: string) => {d},
+ },
+ {
+ title: 'Target',
+ key: 'target',
+ render: (_: unknown, r) => r.hasTarget
+ ? {r.actualTargetIp}:{r.actualTargetPort}
+ : —,
+ },
+ ]}
+ />
+ ),
+ }]}
+ />
+ )}
+
+ )}
+
{/* Edit Resource Drawer */}
void) | null>(null);
+
+ const handleShiftClick = (item: UnifiedCalendarItem) => {
+ if (item.shiftId) {
+ navigate('/app/map/shifts');
+ }
+ };
+
+ return (
+
+
+
+ <CalendarOutlined style={{ marginRight: 8 }} />
+ Scheduling Calendar
+
+
+ {/* Legend */}
+
+
+
+ Shifts
+
+
+
+ Polls
+
+
+
+ Ticketed Events
+
+
+
+ Community Events
+
+
+
+
+
+
+
+
+ } onClick={() => navigate(`/app/events/${id}`)}>Back
+
+ {(event as Record<string, unknown>)?.title as string || 'Check-in Scanner'}
+
+
+
+ {/* Live stats */}
+ {stats && (
+
+
+
+ Checked In} value={stats.checkedIn} valueStyle={{ color: '#58a6ff' }} />
+
+
+
+
+ Remaining} value={stats.remaining} valueStyle={{ color: '#f0883e' }} />
+
+
+
+
+ Total} value={stats.totalTickets} valueStyle={{ color: '#8b949e' }} />
+
+
+
+ )}
+
+ {/* Scan result */}
+ {scanResult && (
+
+ :
+ scanResult.type === 'warning' ? :
+
+ }
+ title={{scanResult.title}}
+ subTitle={{scanResult.subtitle}}
+ />
+
+ )}
+
+ {/* Mode toggle */}
+
+ }
+ onClick={() => setMode('camera')}
+ >
+ Camera
+
+ }
+ onClick={() => setMode('manual')}
+ >
+ Manual
+
+
+
+ {mode === 'camera' && (
+
+
+ {processing &&
}
+
+ )}
+
+ {mode === 'manual' && (
+
+ Enter Ticket Code
+
+ setManualCode(e.target.value)}
+ onPressEnter={() => manualCode && handleManualCheckin('code')}
+ style={{ textTransform: 'uppercase' }}
+ />
+
+
+
+
+ or
+
+
+ Look up by Email
+
+ setManualEmail(e.target.value)}
+ onPressEnter={() => manualEmail && handleManualCheckin('email')}
+ />
+
+
+
+ )}
+
+
+
+ } onClick={() => navigate('/app/events')}>Back
+ {e.title as string}
+ {(e.status as string).replace('_', ' ')}
+
+
+
+ {dayjs(e.date as string).format('MMMM D, YYYY')}
+ {e.startTime as string} – {e.endTime as string}
+ {
+ e.eventFormat === 'ONLINE' ? } color="purple">Online
+ : e.eventFormat === 'HYBRID' ? + Hybrid
+ : }>In-Person
+ }
+ {(e.venueName as string) || '—'}
+ {e.visibility as string}
+ {e.slug as string}
+
+
+ } onClick={() => {
+ navigator.clipboard.writeText(`${window.location.origin}/event/${e.slug}`);
+ message.success('Link copied');
+ }}>Copy Link
+ {e.status === 'PUBLISHED' && (
+ }
+ onClick={() => navigate(`/app/events/${id}/checkin`)}>
+ Check-in Scanner
+
+ )}
+
+
+
+
+ {/* Meeting Room card for ONLINE/HYBRID events */}
+ {(e.eventFormat === 'ONLINE' || e.eventFormat === 'HYBRID') && !!e.meeting && (
+
Meeting Room} style={{ marginBottom: 24 }}>
+
+
+ ).isActive ? 'success' : 'default'}
+ text={(e.meeting as Record).isActive ? 'Active' : 'Inactive'} />
+
+
+ }
+ loading={joiningMeeting} onClick={handleJoinAsModerator}>
+ Join as Moderator
+
+ } onClick={() => {
+ navigator.clipboard.writeText(`${window.location.origin}/event/${e.slug}#meeting`);
+ message.success('Guest link copied');
+ }}>
+ Copy Guest Link
+
+
+
+
+ )}
+
+ {s && (
+
+
+ } />
+
+
+ } precision={2} />
+
+
+ } />
+
+
+ } />
+
+
+ )}
+
+ {s && (s.tierStats as unknown[])?.length > 0 && (
+
+ []}
+ rowKey="id"
+ pagination={false}
+ size="small"
+ columns={[
+ { title: 'Tier', dataIndex: 'name', key: 'name' },
+ { title: 'Type', dataIndex: 'tierType', key: 'type', render: (v: string) => {v} },
+ { title: 'Price', dataIndex: 'priceCAD', key: 'price', render: (v: number) => v > 0 ? `$${(v / 100).toFixed(2)}` : 'Free' },
+ { title: 'Sold', key: 'sold', render: (_: unknown, r: Record) => {
+ const max = r.maxQuantity as number | null;
+ return max ? `${r.soldCount}/${max}` : String(r.soldCount);
+ }},
+ { title: 'Active', dataIndex: 'isActive', key: 'active', render: (v: boolean) => v ? : },
+ ]}
+ />
+
+ )}
+
+
+ }
+ value={ticketSearch}
+ onChange={e => setTicketSearch(e.target.value)}
+ style={{ width: 300, marginBottom: 16 }}
+ allowClear
+ />
+ setTicketPagination(p => ({ ...p, page, limit: pageSize })),
+ }}
+ />
+
+ ),
+ },
+ {
+ key: 'checkins',
+ label: `Check-ins (${checkIns.length})`,
+ children: (
+
+ ),
+ },
+ ]} />
+
+ );
+}
diff --git a/admin/src/pages/events/TicketedEventsPage.tsx b/admin/src/pages/events/TicketedEventsPage.tsx
new file mode 100644
index 0000000..3c493d3
--- /dev/null
+++ b/admin/src/pages/events/TicketedEventsPage.tsx
@@ -0,0 +1,513 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+ Typography, Table, Button, Space, Tag, Input, Select, message, Drawer, Form,
+ DatePicker, TimePicker, InputNumber, Divider, Card, Row, Col, Popconfirm,
+ Tooltip, Radio, Alert,
+} from 'antd';
+import {
+ PlusOutlined, SearchOutlined, EditOutlined, EyeOutlined, DeleteOutlined,
+ CheckCircleOutlined, CloseCircleOutlined, CopyOutlined, ScanOutlined,
+ TagOutlined, VideoCameraOutlined, EnvironmentOutlined,
+} from '@ant-design/icons';
+import { api } from '@/lib/api';
+import dayjs from 'dayjs';
+import { useNavigate } from 'react-router-dom';
+
+const { Title } = Typography;
+
+interface TicketTier {
+ id: string;
+ name: string;
+ tierType: 'PAID' | 'FREE' | 'DONATION';
+ priceCAD: number;
+ maxQuantity: number | null;
+ soldCount: number;
+ maxPerOrder: number;
+ sortOrder: number;
+ isActive: boolean;
+}
+
+interface TicketedEvent {
+ id: string;
+ slug: string;
+ title: string;
+ description: string | null;
+ date: string;
+ startTime: string;
+ endTime: string;
+ doorsOpenTime: string | null;
+ eventFormat: 'IN_PERSON' | 'ONLINE' | 'HYBRID';
+ venueName: string | null;
+ venueAddress: string | null;
+ status: string;
+ visibility: string;
+ maxAttendees: number | null;
+ currentAttendees: number;
+ coverImageUrl: string | null;
+ organizerName: string | null;
+ ticketTiers: TicketTier[];
+ _count: { tickets: number; checkIns: number };
+ createdAt: string;
+}
+
+const STATUS_COLORS: Record = {
+ DRAFT: 'default',
+ PENDING_APPROVAL: 'warning',
+ PUBLISHED: 'success',
+ CANCELLED: 'error',
+ COMPLETED: 'blue',
+};
+
+const VISIBILITY_COLORS: Record = {
+ PUBLIC: 'green',
+ UNLISTED: 'orange',
+ PRIVATE: 'red',
+};
+
+export default function TicketedEventsPage() {
+ const navigate = useNavigate();
+ const [events, setEvents] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [pagination, setPagination] = useState({ page: 1, limit: 20, total: 0 });
+ const [search, setSearch] = useState('');
+ const [statusFilter, setStatusFilter] = useState();
+ const [drawerOpen, setDrawerOpen] = useState(false);
+ const [editingEvent, setEditingEvent] = useState(null);
+ const [form] = Form.useForm();
+ const [saving, setSaving] = useState(false);
+ const [enableMeet, setEnableMeet] = useState(false);
+ const watchedFormat = Form.useWatch('eventFormat', form);
+
+ const fetchEvents = useCallback(async () => {
+ setLoading(true);
+ try {
+ const params: Record = {
+ page: pagination.page,
+ limit: pagination.limit,
+ };
+ if (search) params.search = search;
+ if (statusFilter) params.status = statusFilter;
+
+ const { data } = await api.get('/api/ticketed-events/admin', { params });
+ setEvents(data.events);
+ setPagination(p => ({ ...p, total: data.pagination.total }));
+ } catch {
+ message.error('Failed to load events');
+ } finally {
+ setLoading(false);
+ }
+ }, [pagination.page, pagination.limit, search, statusFilter]);
+
+ useEffect(() => { fetchEvents(); }, [fetchEvents]);
+ useEffect(() => {
+ api.get('/api/settings').then(({ data }) => setEnableMeet(!!data.enableMeet)).catch(() => {});
+ }, []);
+
+ const handleCreate = () => {
+ setEditingEvent(null);
+ form.resetFields();
+ form.setFieldsValue({
+ eventFormat: 'IN_PERSON',
+ visibility: 'PUBLIC',
+ tiers: [{ name: 'General Admission', tierType: 'FREE', priceCAD: 0, maxPerOrder: 10, sortOrder: 0 }],
+ });
+ setDrawerOpen(true);
+ };
+
+ const handleEdit = (event: TicketedEvent) => {
+ setEditingEvent(event);
+ form.setFieldsValue({
+ ...event,
+ date: dayjs(event.date),
+ startTime: dayjs(event.startTime, 'HH:mm'),
+ endTime: dayjs(event.endTime, 'HH:mm'),
+ doorsOpenTime: event.doorsOpenTime ? dayjs(event.doorsOpenTime, 'HH:mm') : undefined,
+ });
+ setDrawerOpen(true);
+ };
+
+ const handleSave = async () => {
+ try {
+ const values = await form.validateFields();
+ setSaving(true);
+
+ const payload = {
+ ...values,
+ date: values.date.format('YYYY-MM-DD'),
+ startTime: values.startTime.format('HH:mm'),
+ endTime: values.endTime.format('HH:mm'),
+ doorsOpenTime: values.doorsOpenTime?.format('HH:mm') || undefined,
+ };
+
+ if (editingEvent) {
+ const { tiers, ...eventData } = payload;
+ await api.put(`/api/ticketed-events/admin/${editingEvent.id}`, eventData);
+ } else {
+ await api.post('/api/ticketed-events/admin', payload);
+ }
+
+ message.success(editingEvent ? 'Event updated' : 'Event created');
+ setDrawerOpen(false);
+ fetchEvents();
+ } catch {
+ message.error('Failed to save event');
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const handlePublish = async (id: string) => {
+ try {
+ await api.post(`/api/ticketed-events/admin/${id}/publish`);
+ message.success('Event published');
+ fetchEvents();
+ } catch (err: unknown) {
+ const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message || 'Failed to publish';
+ message.error(msg);
+ }
+ };
+
+ const handleCancel = async (id: string) => {
+ try {
+ await api.post(`/api/ticketed-events/admin/${id}/cancel`);
+ message.success('Event cancelled');
+ fetchEvents();
+ } catch {
+ message.error('Failed to cancel event');
+ }
+ };
+
+ const handleDelete = async (id: string) => {
+ try {
+ await api.delete(`/api/ticketed-events/admin/${id}`);
+ message.success('Event deleted');
+ fetchEvents();
+ } catch (err: unknown) {
+ const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message || 'Failed to delete';
+ message.error(msg);
+ }
+ };
+
+ const handleApprove = async (id: string) => {
+ try {
+ await api.post(`/api/ticketed-events/admin/${id}/approve`);
+ message.success('Event approved and published');
+ fetchEvents();
+ } catch {
+ message.error('Failed to approve event');
+ }
+ };
+
+ const copyLink = (slug: string) => {
+ navigator.clipboard.writeText(`${window.location.origin}/event/${slug}`);
+ message.success('Link copied');
+ };
+
+ const columns = [
+ {
+ title: 'Title',
+ dataIndex: 'title',
+ key: 'title',
+ render: (text: string, record: TicketedEvent) => (
+ navigate(`/app/events/${record.id}`)}>{text}
+ ),
+ },
+ {
+ title: 'Date',
+ dataIndex: 'date',
+ key: 'date',
+ render: (d: string, r: TicketedEvent) => (
+ {dayjs(d).format('MMM D, YYYY')} {r.startTime}
+ ),
+ sorter: true,
+ },
+ {
+ title: 'Format',
+ dataIndex: 'eventFormat',
+ key: 'format',
+ responsive: ['md' as const],
+ render: (f: string) => {
+ if (f === 'ONLINE') return } color="purple">Online;
+ if (f === 'HYBRID') return + ;
+ return }>In-Person;
+ },
+ },
+ {
+ title: 'Venue',
+ dataIndex: 'venueName',
+ key: 'venue',
+ responsive: ['lg' as const],
+ },
+ {
+ title: 'Status',
+ dataIndex: 'status',
+ key: 'status',
+ render: (s: string) => {s.replace('_', ' ')},
+ },
+ {
+ title: 'Visibility',
+ dataIndex: 'visibility',
+ key: 'visibility',
+ responsive: ['md' as const],
+ render: (v: string) => {v},
+ },
+ {
+ title: 'Tickets',
+ key: 'tickets',
+ render: (_: unknown, r: TicketedEvent) => {
+ const sold = r._count.tickets;
+ const max = r.maxAttendees;
+ return max ? `${sold} / ${max}` : `${sold}`;
+ },
+ },
+ {
+ title: 'Actions',
+ key: 'actions',
+ render: (_: unknown, record: TicketedEvent) => (
+
+ } onClick={() => handleEdit(record)} />
+ } onClick={() => navigate(`/app/events/${record.id}`)} />
+ {record.status === 'DRAFT' && (
+ } onClick={() => handlePublish(record.id)} />
+ )}
+ {record.status === 'PENDING_APPROVAL' && (
+ } onClick={() => handleApprove(record.id)} />
+ )}
+ {record.status === 'PUBLISHED' && (
+ <>
+ } onClick={() => copyLink(record.slug)} />
+ } onClick={() => navigate(`/app/events/${record.id}/checkin`)} />
+ handleCancel(record.id)}>
+ } />
+
+
+ )}
+ {record.status === 'DRAFT' && (
+ handleDelete(record.id)}>
+ } />
+
+ )}
+
+ ),
+ },
+ ];
+
+ return (
+
+
+
+ <TagOutlined style={{ marginRight: 8 }} />
+ Ticketed Events
+
+ } onClick={handleCreate}>
+ Create Event
+
+
+
+
+ }
+ value={search}
+ onChange={e => setSearch(e.target.value)}
+ style={{ width: 240 }}
+ allowClear
+ />
+
+
+
+
setPagination(p => ({ ...p, page, limit: pageSize })),
+ }}
+ />
+
+ setDrawerOpen(false)}
+ width={640}
+ extra={
+
+ }
+ >
+
+
+
+ );
+}
diff --git a/admin/src/pages/influence/ImpactStoriesPage.tsx b/admin/src/pages/influence/ImpactStoriesPage.tsx
new file mode 100644
index 0000000..aa55e6a
--- /dev/null
+++ b/admin/src/pages/influence/ImpactStoriesPage.tsx
@@ -0,0 +1,347 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+ Table,
+ Button,
+ Modal,
+ Form,
+ Input,
+ Select,
+ Tag,
+ Space,
+ Tabs,
+ message,
+ Popconfirm,
+ InputNumber,
+} from 'antd';
+import {
+ PlusOutlined,
+ EditOutlined,
+ DeleteOutlined,
+ CheckCircleOutlined,
+ StopOutlined,
+} from '@ant-design/icons';
+import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
+import dayjs from 'dayjs';
+import { api } from '@/lib/api';
+
+const { TextArea } = Input;
+
+interface Campaign {
+ id: string;
+ title: string;
+}
+
+interface ImpactStory {
+ id: string;
+ campaignId: string;
+ type: 'MILESTONE' | 'VICTORY' | 'RESPONSE' | 'CUSTOM';
+ status: 'DRAFT' | 'PUBLISHED' | 'ARCHIVED';
+ title: string;
+ body: string;
+ coverImageUrl: string | null;
+ milestoneValue: number | null;
+ milestoneMetric: string | null;
+ publishedAt: string | null;
+ createdAt: string;
+ campaign: { title: string };
+ createdBy: { name: string | null; email: string } | null;
+}
+
+const typeColors: Record = {
+ MILESTONE: 'gold',
+ VICTORY: 'green',
+ RESPONSE: 'blue',
+ CUSTOM: 'default',
+};
+
+const statusColors: Record = {
+ DRAFT: 'default',
+ PUBLISHED: 'green',
+ ARCHIVED: 'red',
+};
+
+export default function ImpactStoriesPage() {
+ const [stories, setStories] = useState([]);
+ const [campaigns, setCampaigns] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [pagination, setPagination] = useState({ current: 1, pageSize: 20, total: 0 });
+ const [selectedCampaignId, setSelectedCampaignId] = useState();
+ const [statusFilter, setStatusFilter] = useState();
+ const [modalOpen, setModalOpen] = useState(false);
+ const [editingStory, setEditingStory] = useState(null);
+ const [form] = Form.useForm();
+
+ const fetchCampaigns = useCallback(async () => {
+ try {
+ const { data } = await api.get('/influence/campaigns', { params: { limit: 100 } });
+ setCampaigns(data.campaigns || []);
+ } catch {
+ // ignore
+ }
+ }, []);
+
+ const fetchStories = useCallback(async (page = 1, limit = 20) => {
+ setLoading(true);
+ try {
+ const params: Record = { page, limit };
+ if (selectedCampaignId) params.campaignId = selectedCampaignId;
+ if (statusFilter) params.status = statusFilter;
+ const { data } = await api.get('/social/stories', { params });
+ setStories(data.stories || []);
+ setPagination({
+ current: data.pagination?.page || 1,
+ pageSize: data.pagination?.limit || 20,
+ total: data.pagination?.total || 0,
+ });
+ } catch {
+ message.error('Failed to load stories');
+ } finally {
+ setLoading(false);
+ }
+ }, [selectedCampaignId, statusFilter]);
+
+ useEffect(() => {
+ fetchCampaigns();
+ }, [fetchCampaigns]);
+
+ useEffect(() => {
+ fetchStories();
+ }, [fetchStories]);
+
+ const handleTableChange = (pag: TablePaginationConfig) => {
+ fetchStories(pag.current, pag.pageSize);
+ };
+
+ const openCreate = () => {
+ setEditingStory(null);
+ form.resetFields();
+ if (selectedCampaignId) {
+ form.setFieldsValue({ campaignId: selectedCampaignId });
+ }
+ setModalOpen(true);
+ };
+
+ const openEdit = (story: ImpactStory) => {
+ setEditingStory(story);
+ form.setFieldsValue({
+ campaignId: story.campaignId,
+ type: story.type,
+ title: story.title,
+ body: story.body,
+ coverImageUrl: story.coverImageUrl || undefined,
+ milestoneValue: story.milestoneValue,
+ milestoneMetric: story.milestoneMetric,
+ });
+ setModalOpen(true);
+ };
+
+ const handleSave = async () => {
+ try {
+ const values = await form.validateFields();
+ if (editingStory) {
+ await api.put(`/social/stories/${editingStory.id}`, values);
+ message.success('Story updated');
+ } else {
+ await api.post('/social/stories', values);
+ message.success('Story created');
+ }
+ setModalOpen(false);
+ fetchStories(pagination.current, pagination.pageSize);
+ } catch (err: any) {
+ if (err?.response?.data?.error?.message) {
+ message.error(err.response.data.error.message);
+ }
+ }
+ };
+
+ const handlePublish = async (id: string) => {
+ try {
+ await api.post(`/social/stories/${id}/publish`);
+ message.success('Story published and participants notified');
+ fetchStories(pagination.current, pagination.pageSize);
+ } catch {
+ message.error('Failed to publish story');
+ }
+ };
+
+ const handleArchive = async (id: string) => {
+ try {
+ await api.post(`/social/stories/${id}/archive`);
+ message.success('Story archived');
+ fetchStories(pagination.current, pagination.pageSize);
+ } catch {
+ message.error('Failed to archive story');
+ }
+ };
+
+ const handleDelete = async (id: string) => {
+ try {
+ await api.delete(`/social/stories/${id}`);
+ message.success('Story deleted');
+ fetchStories(pagination.current, pagination.pageSize);
+ } catch {
+ message.error('Failed to delete story');
+ }
+ };
+
+ const storyType = Form.useWatch('type', form);
+
+ const columns: ColumnsType = [
+ {
+ title: 'Title',
+ dataIndex: 'title',
+ ellipsis: true,
+ },
+ {
+ title: 'Campaign',
+ dataIndex: ['campaign', 'title'],
+ ellipsis: true,
+ },
+ {
+ title: 'Type',
+ dataIndex: 'type',
+ width: 120,
+ render: (type: string) => {type},
+ },
+ {
+ title: 'Status',
+ dataIndex: 'status',
+ width: 110,
+ render: (status: string) => {status},
+ },
+ {
+ title: 'Milestone',
+ dataIndex: 'milestoneValue',
+ width: 100,
+ render: (val: number | null) => val ? {val} : '-',
+ },
+ {
+ title: 'Published',
+ dataIndex: 'publishedAt',
+ width: 140,
+ render: (date: string | null) => date ? dayjs(date).format('MMM D, YYYY') : '-',
+ },
+ {
+ title: 'Actions',
+ width: 200,
+ render: (_: unknown, record: ImpactStory) => (
+
+ } onClick={() => openEdit(record)} />
+ {record.status === 'DRAFT' && (
+ handlePublish(record.id)}
+ >
+ } />
+
+ )}
+ {record.status === 'PUBLISHED' && (
+ handleArchive(record.id)}>
+ } />
+
+ )}
+ handleDelete(record.id)}>
+ } />
+
+
+ ),
+ },
+ ];
+
+ const tabItems = [
+ { key: 'all', label: 'All' },
+ { key: 'DRAFT', label: 'Draft' },
+ { key: 'PUBLISHED', label: 'Published' },
+ { key: 'ARCHIVED', label: 'Archived' },
+ ];
+
+ return (
+
+
+
+
+ } onClick={openCreate}>
+ New Story
+
+
+
+
setStatusFilter(key === 'all' ? undefined : key)}
+ items={tabItems}
+ />
+
+ `${total} stories`,
+ }}
+ onChange={handleTableChange}
+ size="small"
+ />
+
+ setModalOpen(false)}
+ onOk={handleSave}
+ width={640}
+ destroyOnHidden
+ >
+
+
+
+ );
+}
diff --git a/admin/src/pages/public/CampaignPage.tsx b/admin/src/pages/public/CampaignPage.tsx
index ecf9dd8..26405c6 100644
--- a/admin/src/pages/public/CampaignPage.tsx
+++ b/admin/src/pages/public/CampaignPage.tsx
@@ -45,6 +45,7 @@ import { usePostalCode } from '@/hooks/usePostalCode';
import RelatedContent from '@/components/public/RelatedContent';
import { VideoPlayer } from '@/components/media/VideoPlayer';
import FriendsCampaignBadge from '@/components/social/FriendsCampaignBadge';
+import CampaignCelebration from '@/components/social/CampaignCelebration';
const { Title, Text, Paragraph } = Typography;
@@ -283,6 +284,9 @@ export default function CampaignPage() {
{campaign?.id && }
+ {/* Campaign Milestones / Impact Stories */}
+ {campaign?.id && }
+
{/* Cover Video */}
{campaign.coverVideoId && siteSettings?.enableMediaFeatures !== false && (
diff --git a/admin/src/pages/public/EventsPage.tsx b/admin/src/pages/public/EventsPage.tsx
index ab06b9e..7987d48 100644
--- a/admin/src/pages/public/EventsPage.tsx
+++ b/admin/src/pages/public/EventsPage.tsx
@@ -88,6 +88,10 @@ export default function EventsPage() {
Events
+
+
+ Ticketed
+
{/* Submit button — opens side panel with form for tomorrow */}
diff --git a/admin/src/pages/public/TicketConfirmationPage.tsx b/admin/src/pages/public/TicketConfirmationPage.tsx
new file mode 100644
index 0000000..3e7033a
--- /dev/null
+++ b/admin/src/pages/public/TicketConfirmationPage.tsx
@@ -0,0 +1,199 @@
+import { useState, useEffect } from 'react';
+import {
+ Typography, Card, Button, Spin, Result, Space, Tag, Grid, Divider,
+} from 'antd';
+import {
+ CalendarOutlined, ClockCircleOutlined, EnvironmentOutlined,
+ QrcodeOutlined, CheckCircleOutlined,
+} from '@ant-design/icons';
+import axios from 'axios';
+import dayjs from 'dayjs';
+import { useParams, useNavigate } from 'react-router-dom';
+
+const { Title, Text } = Typography;
+const apiBase = '/api';
+
+interface TicketDetail {
+ id: string;
+ ticketCode: string;
+ holderEmail: string;
+ holderName: string | null;
+ status: string;
+ tier: { name: string; tierType: string; priceCAD: number };
+ event: {
+ title: string;
+ slug: string;
+ date: string;
+ startTime: string;
+ endTime: string;
+ doorsOpenTime: string | null;
+ venueName: string | null;
+ venueAddress: string | null;
+ };
+ qrUrl: string;
+}
+
+export default function TicketConfirmationPage() {
+ const { slug, ticketCode } = useParams<{ slug: string; ticketCode: string }>();
+ const navigate = useNavigate();
+ const screens = Grid.useBreakpoint();
+ const isMobile = !screens.md;
+
+ const [ticket, setTicket] = useState
(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ if (!slug || !ticketCode) return;
+ fetchTicket();
+ }, [slug, ticketCode]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const fetchTicket = async () => {
+ setLoading(true);
+ try {
+ const { data } = await axios.get(`${apiBase}/ticketed-events/${slug}/ticket/${ticketCode}`);
+ setTicket(data);
+ } catch (err: unknown) {
+ const status = (err as { response?: { status?: number } })?.response?.status;
+ setError(status === 404 ? 'Ticket not found' : 'Failed to load ticket');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const generateIcsUrl = () => {
+ if (!ticket) return '';
+ const e = ticket.event;
+ const dateStr = dayjs(e.date).format('YYYYMMDD');
+ const start = `${dateStr}T${e.startTime.replace(':', '')}00`;
+ const end = `${dateStr}T${e.endTime.replace(':', '')}00`;
+ const ics = [
+ 'BEGIN:VCALENDAR',
+ 'VERSION:2.0',
+ 'BEGIN:VEVENT',
+ `DTSTART:${start}`,
+ `DTEND:${end}`,
+ `SUMMARY:${e.title}`,
+ e.venueName ? `LOCATION:${e.venueName}${e.venueAddress ? ' - ' + e.venueAddress : ''}` : '',
+ `DESCRIPTION:Ticket: ${ticket.ticketCode}`,
+ 'END:VEVENT',
+ 'END:VCALENDAR',
+ ].filter(Boolean).join('\r\n');
+
+ return `data:text/calendar;charset=utf-8,${encodeURIComponent(ics)}`;
+ };
+
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+
+ if (error || !ticket) {
+ return (
+ navigate(`/event/${slug}`)}>View Event}
+ />
+ );
+ }
+
+ const statusColors: Record = {
+ VALID: 'green',
+ CHECKED_IN: 'blue',
+ CANCELLED: 'red',
+ REFUNDED: 'orange',
+ };
+
+ return (
+
+
+
+ Your Ticket
+ {ticket.event.title}
+
+
+
+ {/* QR Code */}
+
+
+
+
+ {dayjs(ticket.event.date).format('MMMM D, YYYY')}
+
+
+
+
+ {ticket.event.startTime} – {ticket.event.endTime}
+ {ticket.event.doorsOpenTime && ` (Doors: ${ticket.event.doorsOpenTime})`}
+
+
+ {ticket.event.venueName && (
+
+
+ {ticket.event.venueName}
+ {ticket.event.venueAddress && (
+
+ {ticket.event.venueAddress}
+
+ )}
+
+ )}
+
+
+ {ticket.tier.name}
+ {ticket.tier.tierType === 'PAID' && (
+ — ${(ticket.tier.priceCAD / 100).toFixed(2)}
+ )}
+
+
+
+
+
+ {/* Holder info */}
+
+ {ticket.holderName || ticket.holderEmail}
+
+
+ {/* Actions */}
+
+ }
+ >
+ Add to Calendar
+
+
+
+
+
+
+
+ );
+ }
+
+ if (needsInviteCode) {
+ return (
+
+ }
+ title="Private Event"
+ subTitle="This event requires an invite code to view."
+ />
+
+ setInviteCode(e.target.value)}
+ onPressEnter={fetchEvent}
+ />
+
+
+
+ );
+ }
+
+ if (!event) {
+ return (
+ navigate('/events')}>Browse Events}
+ />
+ );
+ }
+
+ return (
+
+ {/* Cover image */}
+ {event.coverImageUrl && (
+
+
+
+ )}
+
+ {/* Title + date */}
+
{event.title}
+
+
+ } color="blue">
+ {dayjs(event.date).format('MMMM D, YYYY')}
+
+ }>
+ {event.startTime} – {event.endTime}
+ {event.doorsOpenTime && ` (Doors: ${event.doorsOpenTime})`}
+
+ {event.eventFormat === 'ONLINE' ? (
+ } color="purple">Online Event
+ ) : event.eventFormat === 'HYBRID' ? (
+ <>
+ {event.venueName && } color="green">{event.venueName}}
+ } color="purple">Also Online
+
+ ) : (
+ event.venueName && } color="green">{event.venueName}
+ )}
+ {event.maxAttendees && (
+ }>
+ {event.currentAttendees}/{event.maxAttendees} attendees
+
+ )}
+
+
+ {/* Description */}
+ {event.richDescription ? (
+
+
+
+ ) : event.description ? (
+
+ {event.description}
+
+ ) : null}
+
+ {/* Venue details */}
+ {event.venueAddress && (
+
+
+
+
+ {event.venueName}
+
+ {event.venueAddress}
+
+
+
+ )}
+
+ {/* Organizer */}
+ {event.organizerName && (
+
+ Organized by {event.organizerName}
+
+ )}
+
+
+
+ {/* Ticket tiers */}
+
+ <TagOutlined /> Tickets
+
+
+ {isSoldOut && (
+
+ )}
+
+ {/* Guest info form for non-authenticated users */}
+ {!isAuthenticated && !isSoldOut && (
+
+
+ Enter your details to get tickets:
+
+
+
+ setGuestEmail(e.target.value)}
+ />
+
+
+ setGuestName(e.target.value)}
+ />
+
+
+
+ )}
+
+
+ {event.ticketTiers.map(tier => {
+ const available = isTierAvailable(tier) && !isSoldOut;
+ const remaining = tier.maxQuantity ? tier.maxQuantity - tier.soldCount : null;
+
+ return (
+
+
+ {tier.name}
+ {tier.description && (
+ {tier.description}
+ )}
+
+
+ {tier.tierType === 'FREE' ? (
+ Free
+ ) : tier.tierType === 'DONATION' ? (
+
+ Donation {tier.minDonationCAD ? `(min $${(tier.minDonationCAD / 100).toFixed(2)})` : ''}
+
+ ) : (
+
+ ${(tier.priceCAD / 100).toFixed(2)}
+
+ )}
+
+
+ {remaining !== null && (
+
+ {remaining > 0 ? `${remaining} remaining` : 'Sold out'}
+
+ )}
+
+
+
+
+ );
+ })}
+
+
+ {/* Online Access card for ONLINE/HYBRID events */}
+ {event.eventFormat !== 'IN_PERSON' && event.hasMeeting && (
+ <>
+
+
Online Access}
+ style={{ marginBottom: 24 }}
+ >
+
+ Enter your ticket code to get your meeting link.
+
+
+ setMeetingTicketCode(e.target.value)}
+ onPressEnter={handleGetMeetingLink}
+ />
+
+
+ {meetingError && (
+ {meetingError}
+ )}
+ {meetingAccess && (
+ }
+ onClick={() => window.open(`https://${meetingAccess.domain}/${meetingAccess.jitsiRoom}`, '_blank')}
+ >
+ Join Meeting
+
+ )}
+
+
+ )}
+
+ {/* Featured Volunteers Section */}
+
+
+
Volunteer Spotlight
+ Recognizing the outstanding volunteers making a difference
+
+
+ {loadingFeatured ? (
+
+ ) : featured.length > 0 ? (
+
+
+ <StarFilled style={{ color: '#d4a017', marginRight: 8 }} />
+ This Month's Featured Volunteers
+
+
+ {featured.map((s) => (
+
+
+
+ ))}
+
+
+ ) : (
+
+ )}
+
+ {/* Leaderboard Section */}
+
+
+ <TrophyOutlined style={{ color: '#d4a017', marginRight: 8 }} />
+ Leaderboard
+
+
+
+
+ {/* Wall of Fame Section */}
+ {wallTotal > 0 && (
+
+
+ <StarFilled style={{ color: '#d4a017', marginRight: 8 }} />
+ Wall of Fame
+
+ {loadingWall ? (
+
+ ) : (
+ <>
+
+ {wallOfFame.map((s) => (
+
+
+
+ ))}
+
+ {wallTotal > 12 && (
+
+ )}
+
+ )}
+
+ )}
+
+
+ { setStatusFilter(key); setPage(1); }}
+ items={STATUS_TABS.map((s) => ({ key: s, label: s === 'ALL' ? 'All' : s }))}
+ style={{ marginBottom: 0 }}
+ />
+ } onClick={openCreate}>
+ New Challenge
+
+
+
+
+
+
setModalOpen(false)}
+ onOk={handleSave}
+ confirmLoading={saving}
+ destroyOnHidden
+ width={600}
+ >
+
+
+
;
+ }
+
+ return (
+
+
+ Referral Management
+
+
+
+
+
+
+
+
+ Top Referrers}
+ size="small"
+ >
+
+
+
+
+
+
+ {r.user.name || r.user.email}
+ {r.user.name &&
}
+ {r.user.name && {r.user.email}}
+
+ ),
+ },
+ {
+ title: 'Status',
+ dataIndex: 'status',
+ key: 'status',
+ width: 120,
+ render: (status: string) => (
+ {status}
+ ),
+ },
+ {
+ title: 'Headline',
+ dataIndex: 'headline',
+ key: 'headline',
+ ellipsis: true,
+ render: (v: string | null) => v || --,
+ },
+ {
+ title: 'Month',
+ dataIndex: 'featuredMonth',
+ key: 'featuredMonth',
+ width: 110,
+ render: (v: string | null) =>
+ v ? dayjs(v + '-01').format('MMM YYYY') : --,
+ },
+ {
+ title: 'Created',
+ dataIndex: 'createdAt',
+ key: 'createdAt',
+ width: 110,
+ render: (v: string) => dayjs(v).format('MMM D, YYYY'),
+ },
+ {
+ title: 'Actions',
+ key: 'actions',
+ width: 200,
+ render: (_, record) => (
+
+ {record.status === 'NOMINATED' && (
+ }
+ onClick={() => handleApprove(record.id)}
+ >
+ Approve
+
+ )}
+ {record.status === 'APPROVED' && (
+ }
+ style={{ color: '#d4a017', borderColor: '#d4a017' }}
+ onClick={() => openFeature(record)}
+ >
+ Feature
+
+ )}
+ {record.status !== 'ARCHIVED' && (
+ }
+ onClick={() => handleArchive(record.id)}
+ >
+ Archive
+
+ )}
+ } onClick={() => openEdit(record)} />
+ handleDelete(record.id)}
+ >
+ } />
+
+
+ ),
+ },
+ ];
+
+ return (
+
+
+ Volunteer Spotlight
+ } onClick={() => setNominateOpen(true)}>
+ Nominate
+
+
+
+
setStatusFilter(key)}
+ items={[
+ { key: 'all', label: 'All' },
+ { key: 'NOMINATED', label: 'Nominated' },
+ { key: 'APPROVED', label: 'Approved' },
+ { key: 'FEATURED', label: 'Featured' },
+ { key: 'ARCHIVED', label: 'Archived' },
+ ]}
+ style={{ marginBottom: 16 }}
+ />
+
+ fetchSpotlights(page),
+ showTotal: (total) => `${total} spotlights`,
+ }}
+ scroll={{ x: 800 }}
+ />
+
+ {/* Nominate Modal */}
+ { setNominateOpen(false); nominateForm.resetFields(); }}
+ onOk={() => nominateForm.submit()}
+ okText="Nominate"
+ >
+
+
+
+ {/* Edit Modal */}
+ setEditOpen(false)}
+ onOk={() => editForm.submit()}
+ okText="Save"
+ >
+
+
+
+ {/* Feature Modal */}
+ setFeatureOpen(false)}
+ onOk={handleFeature}
+ okText="Feature"
+ okButtonProps={{ disabled: !featureMonth }}
+ >
+ Select the month to feature this volunteer:
+
+
+
+
+
+ );
+}
diff --git a/admin/src/pages/volunteer/AchievementsPage.tsx b/admin/src/pages/volunteer/AchievementsPage.tsx
index d63d4f3..a66cc67 100644
--- a/admin/src/pages/volunteer/AchievementsPage.tsx
+++ b/admin/src/pages/volunteer/AchievementsPage.tsx
@@ -1,9 +1,9 @@
import { useEffect, useState } from 'react';
-import { Card, Typography, Progress, Tag, Skeleton, Empty, Tabs, List, Statistic, Row, Col } from 'antd';
+import { Card, Typography, Progress, Tag, Skeleton, Empty, Tabs, List, Statistic, Row, Col, Switch, message } from 'antd';
import {
TrophyOutlined, ScheduleOutlined, EnvironmentOutlined, MailOutlined,
TeamOutlined, FireOutlined, StarOutlined, HomeOutlined, UserAddOutlined,
- CrownOutlined,
+ CrownOutlined, EyeOutlined,
} from '@ant-design/icons';
import { api } from '@/lib/api';
import UserAvatar from '@/components/social/UserAvatar';
@@ -37,9 +37,12 @@ export default function AchievementsPage() {
const [leaderboardType, setLeaderboardType] = useState('canvass');
const [myRank, setMyRank] = useState(null);
const [loading, setLoading] = useState(true);
+ const [leaderboardOptIn, setLeaderboardOptIn] = useState(true);
+ const [optInLoading, setOptInLoading] = useState(false);
useEffect(() => {
fetchData();
+ fetchOptInStatus();
}, []);
useEffect(() => {
@@ -59,6 +62,26 @@ export default function AchievementsPage() {
setLoading(false);
};
+ const fetchOptInStatus = async () => {
+ try {
+ const { data } = await api.get('/social/spotlight/opt-in-status');
+ setLeaderboardOptIn(data.showOnLeaderboard ?? true);
+ } catch {}
+ };
+
+ const handleOptInToggle = async (checked: boolean) => {
+ setOptInLoading(true);
+ try {
+ await api.post(checked ? '/social/spotlight/opt-in' : '/social/spotlight/opt-out');
+ setLeaderboardOptIn(checked);
+ message.success(checked ? 'You are now visible on public leaderboards' : 'You are now hidden from public leaderboards');
+ } catch {
+ message.error('Failed to update preference');
+ } finally {
+ setOptInLoading(false);
+ }
+ };
+
const fetchLeaderboard = async (type: string) => {
try {
const { data } = await api.get('/social/achievements/leaderboard', { params: { type, limit: 10 } });
@@ -148,7 +171,24 @@ export default function AchievementsPage() {
{/* Leaderboard */}
-
+
+
+
+
+ {leaderboardOptIn ? 'Visible' : 'Hidden'}
+
+
+ }
+ >
;
+ }>;
+}
+
+export default function ChallengeDetailPage() {
+ const { id } = useParams<{ id: string }>();
+ const navigate = useNavigate();
+ const { message } = App.useApp();
+ const { user } = useAuthStore();
+
+ const [challenge, setChallenge] = useState(null);
+ const [myTeam, setMyTeam] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [leaving, setLeaving] = useState(false);
+
+ const load = useCallback(async () => {
+ if (!id) return;
+ setLoading(true);
+ try {
+ const [challengeRes, myTeamRes] = await Promise.all([
+ api.get(`/social/challenges/${id}`),
+ api.get(`/social/challenges/${id}/my-team`),
+ ]);
+ setChallenge(challengeRes.data);
+ setMyTeam(myTeamRes.data.team);
+ } catch {
+ message.error('Failed to load challenge');
+ } finally {
+ setLoading(false);
+ }
+ }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ useEffect(() => { load(); }, [load]);
+
+ const handleLeave = async () => {
+ if (!myTeam || !id) return;
+ setLeaving(true);
+ try {
+ await api.post(`/social/challenges/${id}/teams/${myTeam.id}/leave`);
+ message.success('Left team');
+ load();
+ } catch (err: any) {
+ message.error(err.response?.data?.error?.message || 'Failed to leave team');
+ } finally {
+ setLeaving(false);
+ }
+ };
+
+ if (loading || !challenge) {
+ return
;
+ }
+
+ const metric = (METRIC_MAP[challenge.metric] || METRIC_MAP.DOORS_KNOCKED)!;
+ const isJoinable = challenge.status === 'UPCOMING' || challenge.status === 'ACTIVE';
+ const isActive = challenge.status === 'ACTIVE';
+ const isUpcoming = challenge.status === 'UPCOMING';
+
+ const endsIn = dayjs(challenge.endsAt).diff(dayjs(), 'second');
+ const startsIn = dayjs(challenge.startsAt).diff(dayjs(), 'second');
+
+ const countdownLabel =
+ isActive && endsIn > 0
+ ? `Ends in ${Math.floor(endsIn / 86400)}d ${Math.floor((endsIn % 86400) / 3600)}h`
+ : isUpcoming && startsIn > 0
+ ? `Starts in ${Math.floor(startsIn / 86400)}d ${Math.floor((startsIn % 86400) / 3600)}h`
+ : null;
+
+ return (
+
+
}
+ onClick={() => navigate('/volunteer/challenges')}
+ style={{ marginBottom: 8, padding: 0 }}
+ >
+ Back
+
+
+
+
+
+ {challenge.title}
+
+ {challenge.description && (
+
+ {challenge.description}
+
+ )}
+
+
{challenge.status}
+
+
+
+
+ {metric.label}
+
+
+ {dayjs(challenge.startsAt).format('MMM D')} - {dayjs(challenge.endsAt).format('MMM D, YYYY')}
+
+
+ {challenge.minTeamSize} - {challenge.maxTeamSize}
+
+
+
+ {countdownLabel && (
+
} color="processing" style={{ marginBottom: 16 }}>
+ {countdownLabel}
+
+ )}
+
+
Leaderboard
+
+
+
+
My Team
+
+ {myTeam ? (
+
+
+ {myTeam.name}
+ {isJoinable && (
+ }
+ loading={leaving}
+ onClick={handleLeave}
+ >
+ Leave
+
+ )}
+
+
+ {myTeam.members.map((m) => (
+
+
+ {m.userId === myTeam.captainUserId ? '(C) ' : ''}
+ {m.user.name || m.user.email}
+ {m.userId === user?.id ? ' (you)' : ''}
+
+ {m.score}
+
+ ))}
+
+
+ ) : isJoinable ? (
+
+ ) : (
+
+ This challenge is not accepting new teams.
+
+ )}
+
;
+ }
+
+ const active = challenges.filter((c) => c.status === 'ACTIVE');
+ const upcoming = challenges.filter((c) => c.status === 'UPCOMING');
+ const past = challenges.filter((c) => c.status === 'COMPLETED');
+
+ return (
+
+
+ Team Challenges
+
+
+ {active.length > 0 && (
+
+ Active Challenges
+
+ {active.map((c) => (
+
+
+
+ ))}
+
+
+ )}
+
+ {upcoming.length > 0 && (
+
+ Upcoming
+
+ {upcoming.map((c) => (
+
+
+
+ ))}
+
+
+ )}
+
+ {past.length > 0 && (
+
Past Challenges ({past.length}),
+ children: (
+
+ {past.map((c) => (
+
+
+
+ ))}
+
+ ),
+ },
+ ]}
+ />
+ )}
+
+ {challenges.length === 0 && (
+
+ )}
+
+
+
+ );
+ }
+
+ // Date detail panel (right side on desktop, or inline on mobile)
+ const dateDetailPanel = selectedDate && (
+
+
+
+ {dayjs(selectedDate).format('ddd, MMM D')}
+
+ }
+ onClick={() => handleAddItem(selectedDate)}
+ >
+ Add
+
+
+
+ {selectedDateItems.length === 0 ? (
+
+ ) : (
+
(
+ handleEditItem(item)}
+ actions={
+ item.type === 'personal'
+ ? [
+ }
+ onClick={(e) => {
+ e.stopPropagation();
+ handleEditItem(item);
+ }}
+ />,
+ }
+ onClick={(e) => {
+ e.stopPropagation();
+ confirmDeleteItem(item);
+ }}
+ />,
+ ]
+ : undefined
+ }
+ >
+
+ }
+ title={
+
+ {item.title}
+
+ }
+ description={
+
+ {!item.isAllDay && (
+ }
+ style={{ fontSize: 11, margin: 0 }}
+ >
+ {item.startTime?.slice(0, 5)} - {item.endTime?.slice(0, 5)}
+
+ )}
+ {item.isAllDay && All day}
+ {item.location && (
+ }
+ style={{ fontSize: 11, margin: 0 }}
+ >
+ {item.location}
+
+ )}
+ {item.type !== 'personal' && (
+
+ {item.type}
+
+ )}
+
+ }
+ />
+
+ )}
+ />
+ )}
+
+ {/* Header */}
+
+
+ <CalendarOutlined style={{ marginRight: 8 }} />
+ My Calendar
+
+ }
+ onClick={() => handleAddItem(selectedDate ?? dayjs().format('YYYY-MM-DD'))}
+ >
+ {!isMobile && 'Add Event'}
+
+
+
+ {isMobile ? (
+ /* Mobile layout: MobileDayView with layer toggles at top */
+
+ handleUpdateLayer(id, { isEnabled: enabled })}
+ onCreate={handleCreateLayer}
+ onUpdate={handleUpdateLayer}
+ onDelete={handleDeleteLayer}
+ />
+
+ {dateDetailPanel}
+
+ ) : (
+ /* Desktop layout: layer panel | calendar | date detail */
+
+
+ handleUpdateLayer(id, { isEnabled: enabled })}
+ onCreate={handleCreateLayer}
+ onUpdate={handleUpdateLayer}
+ onDelete={handleDeleteLayer}
+ />
+
+
+ {dateDetailPanel}
+
+ )}
+
+ {/* Item create/edit modal */}
+
l.layerType === 'USER')}
+ defaultDate={selectedDate ?? dayjs().format('YYYY-MM-DD')}
+ onSave={handleSaveItem}
+ onDelete={editingItem ? () => confirmDeleteItem(editingItem) : undefined}
+ onCancel={() => {
+ setItemModalOpen(false);
+ setEditingItem(null);
+ }}
+ />
+
+
+
+ );
+ }
+
+ if (tickets.length === 0) {
+ return (
+
+
<TagOutlined /> My Tickets
+
+
+
+
+ );
+ }
+
+ // Group tickets by event
+ const grouped = tickets.reduce>((acc, t) => {
+ const key = t.event.id;
+ if (!acc[key]) acc[key] = [];
+ acc[key].push(t);
+ return acc;
+ }, {});
+
+ const statusColors: Record = {
+ VALID: 'green',
+ CHECKED_IN: 'blue',
+ CANCELLED: 'red',
+ REFUNDED: 'orange',
+ };
+
+ return (
+
+
<TagOutlined /> My Tickets
+
+ {Object.entries(grouped).map(([eventId, eventTickets]) => {
+ const ev = eventTickets[0]!.event;
+ const isPast = dayjs(ev.date).isBefore(dayjs(), 'day');
+
+ return (
+
+ {ev.title}
+ {isPast && Past}
+
+ }
+ extra={
+
+ }
+ >
+
+ }>{dayjs(ev.date).format('MMM D, YYYY')}
+ }>{ev.startTime} – {ev.endTime}
+ {ev.venueName && }>{ev.venueName}}
+
+
+
+ {eventTickets.map(ticket => (
+
+ navigate(`/event/${ev.slug}/ticket/${ticket.ticketCode}`)}
+ style={{ textAlign: 'center' }}
+ >
+
+
+ {ticket.ticketCode}
+
+
+
+ {ticket.status}
+
+
+ {ticket.tier.name}
+
+
+ ))}
+
+
+ );
+ })}
+
;
+ }
+
+ return (
+
+
+
+ My Referrals
+ } onClick={() => setCreateOpen(true)}>
+ Create Invite Code
+
+
+
+ {/* Stats */}
+
+
+
+ }
+ />
+
+
+
+
+ }
+ />
+
+
+
+
+ c.isActive).length} />
+
+
+
+
+ {/* Invite Codes */}
+
+ {codes.length === 0 ? (
+
+ ) : (
+
+ {codes.map((code) => (
+
+ ))}
+
+ )}
+
+
+ {/* My Referrals */}
+
+
+
+
+
+ {/* Create Code Modal */}
+
{ setCreateOpen(false); form.resetFields(); }}
+ onOk={() => form.submit()}
+ confirmLoading={creating}
+ destroyOnHidden
+ >
+
+
+
📍 ${vars.VENUE_NAME}${vars.VENUE_ADDRESS ? `, ${vars.VENUE_ADDRESS}` : ''}
`
+ : '';
+ const onlineAccessHtml = vars.ONLINE_ACCESS
+ ? ``
+ : '';
+
+ return `
+
+
+
+
+
+
+
${vars.EVENT_TITLE}
+
${vars.EVENT_DATE} at ${vars.EVENT_TIME}
+ ${venue}
+
+
+
Hi ${vars.RECIPIENT_NAME},
+
Your ticket is confirmed! Here are your details:
+ ${onlineAccessHtml}
+
+
Ticket Code
+
${vars.TICKET_CODE}
+
${vars.TICKET_TIER}
+
+
+
Show this QR code at the door:
+
+
+
+
+
${vars.ORGANIZATION_NAME}
+
+