admin/changemaker.lite
1
0
Fork 0
Code Issues Packages Projects Releases 35 Wiki Activity

More control panel updates

Browse Source
This commit is contained in:
bunker-admin 2026-02-21 11:46:55 -07:00
parent 435fb8150c
commit 7352815e57
79 changed files with 1318 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Changemaker Lite - Admin</title>
</head>
<body style="margin:0;background:#1a1025">

20
admin/src/components/GrapesJSEditor.tsx
View File

@ -348,6 +348,26 @@ function generateBlockHtml(type: string, defaults: Record<string, unknown>): str
</div>
</section>`;
}
case 'campaign-form': {
const campaignSlug = (defaults.campaignSlug as string) || '';
const compact = defaults.compact === true;
return `
<section class="campaign-form-block"
data-campaign-slug="${campaignSlug}"
data-compact="${compact}"
style="padding: 60px 40px;">
<div style="max-width: 600px; margin: 0 auto; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
<div style="padding: 32px; text-align: center; color: #fff;">
<svg style="width: 64px; height: 64px; margin-bottom: 16px; opacity: 0.9;" fill="currentColor" viewBox="0 0 1024 1024">
<path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 356.9 277.7c11.7 9.1 28.4 9.1 40.1 0L889.7 270.8l27.6-21.5-39.3-50.5-44.4 33.2z"/>
</svg>
<p style="margin: 0; font-size: 1.2rem; font-weight: 600;">Campaign Email Form</p>
<p style="margin: 8px 0 0; font-size: 0.9rem; opacity: 0.8;">${campaignSlug || 'Set campaign slug in block properties'}</p>
<p style="margin: 12px 0 0; font-size: 0.75rem; opacity: 0.6; font-style: italic;">Interactive form will render on published page</p>
</div>
</div>
</section>`;
}
case 'gancio-events': {
const maxlength = defaults.maxlength || 10;
const evTheme = (defaults.theme as string) || 'dark';

4
admin/src/components/MediaPublicLayout.tsx
View File

@ -88,7 +88,7 @@ export default function MediaPublicLayout() {
marginLeft: mainContentMarginLeft,
minHeight: '100vh',
overflowY: 'auto',
paddingBottom: 48, // Space for bottom search bar
paddingBottom: 'calc(48px + env(safe-area-inset-bottom, 0px))', // Space for bottom search bar + iOS safe area
transition: 'margin-left 0.3s ease',
background: colorBgBase,
}}
@ -97,7 +97,7 @@ export default function MediaPublicLayout() {
style={{
width: '100%',
margin: '0 auto',
padding: isMobile ? '8px 8px' : '12px 12px',
padding: isMobile ? '8px 12px' : '12px 12px',
}}
>
<Outlet />

89
admin/src/components/QrCodeModal.tsx Normal file
View File

@ -0,0 +1,89 @@
import { useState, useRef } from 'react';
import { Modal, Button, Space, Input, message, Spin } from 'antd';
import { DownloadOutlined, CopyOutlined, CheckOutlined } from '@ant-design/icons';
interface QrCodeModalProps {
open: boolean;
onClose: () => void;
url: string;
title: string;
}
export default function QrCodeModal({ open, onClose, url, title }: QrCodeModalProps) {
const [copied, setCopied] = useState(false);
const [loading, setLoading] = useState(true);
const imgRef = useRef<HTMLImageElement>(null);
const qrSrc = `/api/qr?text=${encodeURIComponent(url)}&size=300`;
const handleDownload = () => {
const img = imgRef.current;
if (!img) return;
const canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext('2d');
if (!ctx) return;
ctx.drawImage(img, 0, 0);
const link = document.createElement('a');
link.download = `qr-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}.png`;
link.href = canvas.toDataURL('image/png');
link.click();
};
const handleCopyUrl = () => {
navigator.clipboard.writeText(url);
setCopied(true);
message.success('URL copied');
setTimeout(() => setCopied(false), 2000);
};
return (
<Modal
title={`QR Code: ${title}`}
open={open}
onCancel={onClose}
footer={null}
width={400}
destroyOnHidden
>
<div style={{ textAlign: 'center', padding: '16px 0' }}>
{loading && <Spin style={{ display: 'block', marginBottom: 16 }} />}
<img
ref={imgRef}
src={qrSrc}
alt={`QR code for ${title}`}
crossOrigin="anonymous"
style={{ width: 300, height: 300, display: loading ? 'none' : 'block', margin: '0 auto' }}
onLoad={() => setLoading(false)}
onError={() => { setLoading(false); message.error('Failed to generate QR code'); }}
/>
<div style={{ marginTop: 16 }}>
<Input
value={url}
readOnly
style={{ marginBottom: 12, textAlign: 'center' }}
addonAfter={
<Button
type="text"
size="small"
icon={copied ? <CheckOutlined /> : <CopyOutlined />}
onClick={handleCopyUrl}
/>
}
/>
<Space>
<Button icon={<DownloadOutlined />} type="primary" onClick={handleDownload}>
Download PNG
</Button>
<Button icon={copied ? <CheckOutlined /> : <CopyOutlined />} onClick={handleCopyUrl}>
Copy URL
</Button>
</Space>
</div>
</div>
</Modal>
);
}

6
admin/src/components/canvass/ExportContactsModal.tsx
View File

@ -1,7 +1,7 @@
import { useState, useEffect, useCallback } from 'react';
import {
Modal, Form, Select, Checkbox, Slider, DatePicker, Switch,
Button, Statistic, Row, Col, Descriptions, Alert, Spin, App,
Button, Statistic, Row, Col, Descriptions, Alert, Spin, App, Grid,
} from 'antd';
import { ExportOutlined, EyeOutlined } from '@ant-design/icons';
import { api } from '@/lib/api';
@ -42,6 +42,8 @@ export default function ExportContactsModal({
const { message } = App.useApp();
const [form] = Form.useForm();
const [campaigns, setCampaigns] = useState<Campaign[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [preview, setPreview] = useState<ExportContactsPreviewResult | null>(null);
const [previewing, setPreviewing] = useState(false);
const [exporting, setExporting] = useState(false);
@ -154,7 +156,7 @@ export default function ExportContactsModal({
title="Export Canvass Contacts to Campaign"
open={open}
onCancel={onClose}
width={640}
width={isMobile ? '95vw' : 640}
footer={[
<Button key="cancel" onClick={onClose}>Cancel</Button>,
<Button

6
admin/src/components/canvass/HistoricalRoutesDrawer.tsx
View File

@ -1,5 +1,5 @@
import { useState, useCallback, useEffect } from 'react';
import { Drawer, Table, DatePicker, Select, Button, Space, Typography, Tag } from 'antd';
import { Drawer, Table, DatePicker, Select, Button, Space, Typography, Tag, Grid } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { HistoryOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
@ -24,6 +24,8 @@ export default function HistoricalRoutesDrawer({
volunteers,
}: HistoricalRoutesDrawerProps) {
const [sessions, setSessions] = useState<TrackingSessionSummary[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [pagination, setPagination] = useState<PaginationMeta | null>(null);
const [loading, setLoading] = useState(false);
const [routeLoading, setRouteLoading] = useState<string | null>(null);
@ -142,7 +144,7 @@ export default function HistoricalRoutesDrawer({
<Drawer
title={<><HistoryOutlined /> Route History</>}
placement="right"
width={600}
width={isMobile ? '100%' : 600}
open={open}
onClose={() => {
onClose();

6
admin/src/components/email-templates/TestEmailModal.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Tabs, Space, message, Table, Tag, Typography } from 'antd';
import { Modal, Form, Input, Button, Tabs, Space, message, Table, Tag, Typography, Grid } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
@ -22,6 +22,8 @@ export default function TestEmailModal({ open, template, onClose, onSuccess }: T
const { user } = useAuthStore();
const [form] = Form.useForm();
const [sending, setSending] = useState(false);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [testData, setTestData] = useState<Record<string, string>>({});
const [testLogs, setTestLogs] = useState<EmailTemplateTestLog[]>([]);
const [loadingLogs, setLoadingLogs] = useState(false);
@ -120,7 +122,7 @@ export default function TestEmailModal({ open, template, onClose, onSuccess }: T
title={`Send Test Email: ${template.name}`}
open={open}
onCancel={onClose}
width={900}
width={isMobile ? '95vw' : 900}
footer={[
<Button key="cancel" onClick={onClose}>
Cancel

6
admin/src/components/email-templates/VersionHistoryDrawer.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { Drawer, Timeline, Space, Tag, Typography, Button, Popconfirm, Input, message, Spin } from 'antd';
import { Drawer, Timeline, Space, Tag, Typography, Button, Popconfirm, Input, message, Spin, Grid } from 'antd';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { api } from '@/lib/api';
@ -26,6 +26,8 @@ export default function VersionHistoryDrawer({
onRollbackSuccess,
}: VersionHistoryDrawerProps) {
const [versions, setVersions] = useState<EmailTemplateVersion[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [loading, setLoading] = useState(false);
const [rollbackNotes, setRollbackNotes] = useState('');
const [rollingBack, setRollingBack] = useState<number | null>(null);
@ -73,7 +75,7 @@ export default function VersionHistoryDrawer({
title={`Version History: ${templateName}`}
open={open}
onClose={onClose}
width={600}
width={isMobile ? '100%' : 600}
>
{loading ? (
<div style={{ textAlign: 'center', padding: 40 }}>

6
admin/src/components/email-templates/VideoVariableEditor.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Modal, Form, Input, Button, Alert } from 'antd';
import { Modal, Form, Input, Button, Alert, Grid } from 'antd';
import { VideoPickerModal } from '../media/VideoPickerModal';
import type { Video } from '../media/VideoPickerModal';
@ -23,6 +23,8 @@ export const VideoVariableEditor: React.FC<VideoVariableEditorProps> = ({
existingKeys,
}) => {
const [form] = Form.useForm();
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
const [showVideoPicker, setShowVideoPicker] = useState(false);
@ -77,7 +79,7 @@ export const VideoVariableEditor: React.FC<VideoVariableEditorProps> = ({
open={open}
onCancel={onClose}
title="Add Video Variable"
width={600}
width={isMobile ? '95vw' : 600}
footer={[
<Button key="cancel" onClick={onClose}>
Cancel

330
admin/src/components/influence/CampaignFormWidget.tsx Normal file
View File

@ -0,0 +1,330 @@
/**
* Self-contained campaign email form widget for GrapesJS landing pages.
* Rendered via createRoot() outside the App's ConfigProvider — uses inline styles only, no Ant Design.
* Follows the same pattern as DonationWidget, PricingWidget, ProductWidget.
*/
import { useState, useEffect } from 'react';
import axios from 'axios';
const apiBase = '/api';
// Theme colors matching the dark public pages
const COLORS = {
bg: '#0d1b2a',
card: '#1b2838',
primary: '#3498db',
primaryHover: '#2980b9',
text: '#fff',
textMuted: 'rgba(255,255,255,0.65)',
border: 'rgba(255,255,255,0.15)',
success: '#52c41a',
error: '#ff4d4f',
};
const inputStyle: React.CSSProperties = {
width: '100%',
padding: '10px 14px',
border: `1px solid ${COLORS.border}`,
borderRadius: 6,
background: 'rgba(255,255,255,0.05)',
color: COLORS.text,
fontSize: 14,
outline: 'none',
boxSizing: 'border-box',
};
const buttonStyle: React.CSSProperties = {
padding: '10px 24px',
background: COLORS.primary,
color: '#fff',
border: 'none',
borderRadius: 6,
fontWeight: 600,
fontSize: 14,
cursor: 'pointer',
};
interface Campaign {
title: string;
description: string | null;
emailSubject: string;
emailBody: string;
targetGovernmentLevels: string[];
allowSmtpEmail: boolean;
allowMailtoLink: boolean;
collectUserInfo: boolean;
}
interface Representative {
name: string;
email: string | null;
representativeSetName: string;
}
interface CampaignFormWidgetProps {
campaignSlug: string;
compact?: boolean;
}
export function CampaignFormWidget({ campaignSlug, compact = false }: CampaignFormWidgetProps) {
const [campaign, setCampaign] = useState<Campaign | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
// Step 1: postal code + user info
const [postalCode, setPostalCode] = useState('');
const [userName, setUserName] = useState('');
const [userEmail, setUserEmail] = useState('');
const [lookupLoading, setLookupLoading] = useState(false);
// Step 2: representatives
const [representatives, setRepresentatives] = useState<Representative[]>([]);
const [step, setStep] = useState<'lookup' | 'reps' | 'done'>('lookup');
// Step 3: sending
const [sendingTo, setSendingTo] = useState<string | null>(null);
const [sentTo, setSentTo] = useState<Set<string>>(new Set());
useEffect(() => {
if (!campaignSlug) {
setError('No campaign slug configured');
setLoading(false);
return;
}
axios.get<Campaign>(`${apiBase}/campaigns/${campaignSlug}/details`)
.then(({ data }) => setCampaign(data))
.catch(() => setError('Campaign not found'))
.finally(() => setLoading(false));
}, [campaignSlug]);
const handleLookup = async () => {
if (!postalCode.trim()) return;
setLookupLoading(true);
try {
const code = postalCode.replace(/\s/g, '').toUpperCase();
const { data } = await axios.get<{ representatives: Representative[] }>(
`${apiBase}/representatives/by-postal/${code}`
);
let reps = data.representatives;
if (campaign?.targetGovernmentLevels?.length) {
const targets = new Set(campaign.targetGovernmentLevels);
reps = reps.filter(r => {
const setName = r.representativeSetName?.toLowerCase() || '';
if (targets.has('FEDERAL') && setName.includes('house of commons')) return true;
if (targets.has('PROVINCIAL') && (setName.includes('legislative') || setName.includes('national'))) return true;
if (targets.has('MUNICIPAL') && setName.includes('city')) return true;
if (targets.has('SCHOOL_BOARD') && setName.includes('school')) return true;
return false;
});
}
setRepresentatives(reps);
setStep('reps');
} catch {
setError('Could not look up representatives for this postal code');
} finally {
setLookupLoading(false);
}
};
const handleSend = async (rep: Representative) => {
if (!campaign || !rep.email) return;
setSendingTo(rep.email);
try {
await axios.post(`${apiBase}/campaigns/${campaignSlug}/send-email`, {
userEmail: userEmail || 'anonymous@cmlite.org',
userName: userName || 'Anonymous',
postalCode: postalCode.replace(/\s/g, '').toUpperCase(),
recipientEmail: rep.email,
recipientName: rep.name,
});
setSentTo(prev => new Set(prev).add(rep.email!));
} catch {
// Silently fail — user sees button unchanged
} finally {
setSendingTo(null);
}
};
const handleMailto = (rep: Representative) => {
if (!campaign || !rep.email) return;
const subject = encodeURIComponent(campaign.emailSubject);
const body = encodeURIComponent(campaign.emailBody);
window.open(`mailto:${rep.email}?subject=${subject}&body=${body}`, '_blank');
};
const allSent = representatives.length > 0 && representatives.every(r => !r.email || sentTo.has(r.email));
if (loading) {
return (
<div style={{ textAlign: 'center', padding: 32, color: COLORS.textMuted }}>
Loading campaign...
</div>
);
}
if (error || !campaign) {
return (
<div style={{ textAlign: 'center', padding: 32, color: COLORS.error }}>
{error || 'Campaign unavailable'}
</div>
);
}
return (
<div style={{
maxWidth: compact ? 480 : 600,
margin: '0 auto',
background: COLORS.card,
borderRadius: 12,
padding: compact ? 20 : 32,
color: COLORS.text,
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
}}>
{/* Title */}
<h3 style={{ margin: '0 0 8px', fontSize: compact ? 18 : 22, fontWeight: 700 }}>
{campaign.title}
</h3>
{campaign.description && !compact && (
<p style={{ margin: '0 0 20px', color: COLORS.textMuted, fontSize: 14, lineHeight: 1.5 }}>
{campaign.description}
</p>
)}
{/* Step: Lookup */}
{step === 'lookup' && (
<div>
{campaign.collectUserInfo && (
<div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
<input
type="text"
placeholder="Your name"
value={userName}
onChange={e => setUserName(e.target.value)}
style={{ ...inputStyle, flex: 1 }}
/>
<input
type="email"
placeholder="Your email"
value={userEmail}
onChange={e => setUserEmail(e.target.value)}
style={{ ...inputStyle, flex: 1 }}
/>
</div>
)}
<div style={{ display: 'flex', gap: 8 }}>
<input
type="text"
placeholder="Postal code (e.g. K1A 0A6)"
value={postalCode}
onChange={e => setPostalCode(e.target.value)}
onKeyDown={e => e.key === 'Enter' && handleLookup()}
style={{ ...inputStyle, flex: 1 }}
/>
<button
onClick={handleLookup}
disabled={lookupLoading || !postalCode.trim()}
style={{
...buttonStyle,
opacity: lookupLoading || !postalCode.trim() ? 0.6 : 1,
}}
>
{lookupLoading ? 'Looking up...' : 'Find Reps'}
</button>
</div>
</div>
)}
{/* Step: Representatives */}
{step === 'reps' && (
<div>
{allSent ? (
<div style={{ textAlign: 'center', padding: 20 }}>
<div style={{ fontSize: 48, marginBottom: 8 }}>&#x2705;</div>
<p style={{ fontSize: 16, fontWeight: 600, color: COLORS.success }}>
All messages sent! Thank you.
</p>
<button
onClick={() => { setStep('lookup'); setSentTo(new Set()); setRepresentatives([]); }}
style={{ ...buttonStyle, background: 'rgba(255,255,255,0.1)', marginTop: 12, fontSize: 13 }}
>
Send again with different postal code
</button>
</div>
) : (
<>
<p style={{ margin: '0 0 12px', fontSize: 13, color: COLORS.textMuted }}>
{representatives.length} representative{representatives.length !== 1 ? 's' : ''} found for {postalCode.toUpperCase()}
</p>
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
{representatives.map((rep, i) => (
<div key={i} style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '10px 14px',
background: 'rgba(255,255,255,0.04)',
borderRadius: 8,
border: `1px solid ${sentTo.has(rep.email || '') ? COLORS.success + '40' : COLORS.border}`,
}}>
<div>
<div style={{ fontWeight: 600, fontSize: 14 }}>{rep.name}</div>
<div style={{ fontSize: 12, color: COLORS.textMuted }}>{rep.representativeSetName}</div>
</div>
<div style={{ display: 'flex', gap: 6 }}>
{sentTo.has(rep.email || '') ? (
<span style={{ color: COLORS.success, fontSize: 13, fontWeight: 600 }}>Sent &#x2713;</span>
) : (
<>
{campaign.allowSmtpEmail && rep.email && (
<button
onClick={() => handleSend(rep)}
disabled={sendingTo === rep.email}
style={{
...buttonStyle,
padding: '6px 14px',
fontSize: 12,
opacity: sendingTo === rep.email ? 0.6 : 1,
}}
>
{sendingTo === rep.email ? 'Sending...' : 'Send'}
</button>
)}
{campaign.allowMailtoLink && rep.email && (
<button
onClick={() => handleMailto(rep)}
style={{
...buttonStyle,
padding: '6px 14px',
fontSize: 12,
background: 'rgba(255,255,255,0.1)',
}}
>
Email App
</button>
)}
</>
)}
</div>
</div>
))}
</div>
<button
onClick={() => setStep('lookup')}
style={{
...buttonStyle,
background: 'transparent',
border: `1px solid ${COLORS.border}`,
marginTop: 12,
fontSize: 13,
width: '100%',
}}
>
Change postal code
</button>
</>
)}
</div>
)}
</div>
);
}

8
admin/src/components/map/CutOverlayControls.tsx
View File

@ -1,4 +1,4 @@
import { Checkbox, Button, Space } from 'antd';
import { Checkbox, Button, Space, Grid } from 'antd';
import type { Cut, PublicCut } from '@/types/api';
const VARIANT_BG = {
@ -15,6 +15,8 @@ interface Props {
}
export default function CutOverlayControls({ cuts, visibleCutIds, onToggleCut, variant = 'admin', style }: Props) {
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const allVisible = cuts.every((c) => visibleCutIds.has(c.id));
const noneVisible = cuts.every((c) => !visibleCutIds.has(c.id));
@ -22,7 +24,7 @@ export default function CutOverlayControls({ cuts, visibleCutIds, onToggleCut, v
<div
style={{
position: 'absolute',
bottom: 24,
bottom: 'max(24px, calc(24px + env(safe-area-inset-bottom, 0px)))',
left: 12,
zIndex: 1000,
background: VARIANT_BG[variant],
@ -31,7 +33,7 @@ export default function CutOverlayControls({ cuts, visibleCutIds, onToggleCut, v
backdropFilter: 'blur(8px)',
border: '1px solid rgba(255,255,255,0.12)',
minWidth: 140,
maxHeight: 280,
maxHeight: isMobile ? 120 : 280,
overflowY: 'auto',
...style,
}}

2
admin/src/components/map/MapLegend.tsx
View File

@ -24,7 +24,7 @@ export default function MapLegend({ variant = 'public' }: Props) {
<div
style={{
position: 'absolute',
bottom: 24,
bottom: 'max(24px, calc(24px + env(safe-area-inset-bottom, 0px)))',
right: 12,
zIndex: 1000,
background: VARIANT_BG[variant],

6
admin/src/components/media/AlbumDetailDrawer.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { Drawer, Button, Input, List, Image, message, Tag, Popconfirm, Space, Empty } from 'antd';
import { Drawer, Button, Input, List, Image, message, Tag, Popconfirm, Space, Empty, Grid } from 'antd';
import {
DeleteOutlined,
PictureOutlined,
@ -28,6 +28,8 @@ interface AlbumDetailDrawerProps {
export default function AlbumDetailDrawer({ albumId, open, onClose, onRefresh }: AlbumDetailDrawerProps) {
const [album, setAlbum] = useState<PhotoAlbum | null>(null);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [loading, setLoading] = useState(false);
const [editing, setEditing] = useState(false);
const [title, setTitle] = useState('');
@ -122,7 +124,7 @@ export default function AlbumDetailDrawer({ albumId, open, onClose, onRefresh }:
title={album?.title || 'Album Detail'}
open={open}
onClose={onClose}
width={600}
width={isMobile ? '100%' : 600}
loading={loading}
footer={
<div style={{ display: 'flex', justifyContent: 'space-between' }}>

6
admin/src/components/media/EditPlaylistModal.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { Drawer, Form, Input, Switch, Tabs, List, Button, Typography, Space, message, theme } from 'antd';
import { Drawer, Form, Input, Switch, Tabs, List, Button, Typography, Space, message, theme, Grid } from 'antd';
import { DeleteOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { mediaApi } from '@/lib/media-api';
import { mediaPublicApi } from '@/lib/media-public-api';
@ -29,6 +29,8 @@ export default function EditPlaylistModal({
}: EditPlaylistModalProps) {
const [form] = Form.useForm();
const { token } = theme.useToken();
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [loading, setLoading] = useState(false);
const [saving, setSaving] = useState(false);
const [videos, setVideos] = useState<PlaylistVideoItem[]>([]);
@ -126,7 +128,7 @@ export default function EditPlaylistModal({
onClose();
}}
placement="right"
width={520}
width={isMobile ? '100%' : 520}
style={{ top: 64 }}
loading={loading}
>

5
admin/src/components/media/FetchVideosDrawer.tsx
View File

@ -13,6 +13,7 @@ import {
Collapse,
List,
Tooltip,
Grid,
} from 'antd';
import {
CloudDownloadOutlined,
@ -76,6 +77,8 @@ const STATE_ICONS: Record<string, React.ReactNode> = {
export default function FetchVideosDrawer({ open, onClose, onSuccess }: FetchVideosDrawerProps) {
const [urls, setUrls] = useState('');
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [submitting, setSubmitting] = useState(false);
const [jobs, setJobs] = useState<FetchJob[]>([]);
const [expandedJobId, setExpandedJobId] = useState<string | null>(null);
@ -292,7 +295,7 @@ export default function FetchVideosDrawer({ open, onClose, onSuccess }: FetchVid
}
open={open}
onClose={onClose}
width={560}
width={isMobile ? '100%' : 560}
destroyOnClose
>
{/* URL Input Section */}

3
admin/src/components/media/MediaBottomNav.tsx
View File

@ -66,7 +66,8 @@ export default function MediaBottomNav() {
bottom: 0,
left: 0,
right: 0,
height: 48,
height: `calc(48px + env(safe-area-inset-bottom, 0px))`,
paddingBottom: 'env(safe-area-inset-bottom, 0px)',
background: isShorts ? 'rgba(0, 0, 0, 0.75)' : token.colorBgContainer,
backdropFilter: isShorts ? 'blur(12px)' : undefined,
borderTop: isShorts ? '1px solid rgba(255,255,255,0.08)' : `1px solid ${token.colorBorderSecondary}`,

7
admin/src/components/media/PhotoViewerModal.tsx
View File

@ -1,4 +1,4 @@
import { Modal, Descriptions, Tag } from 'antd';
import { Modal, Descriptions, Tag, Grid } from 'antd';
import { CameraOutlined } from '@ant-design/icons';
import { getAuthCallbacks } from '@/lib/api';
import type { Photo } from '@/types/media';
@ -19,6 +19,9 @@ interface PhotoViewerModalProps {
}
export default function PhotoViewerModal({ photo, open, onClose }: PhotoViewerModalProps) {
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
if (!photo) return null;
const adminImageUrl = `/media/photos/${photo.id}/image?size=large`;
@ -28,7 +31,7 @@ export default function PhotoViewerModal({ photo, open, onClose }: PhotoViewerMo
open={open}
onCancel={onClose}
footer={null}
width={900}
width={isMobile ? '95vw' : 900}
centered
styles={{ body: { padding: 0 } }}
>

24
admin/src/components/media/PublicVideoCard.tsx
View File

@ -1,5 +1,5 @@
import { useState, useRef, useEffect } from 'react';
import { Card, Tag, Space, Typography, theme, Modal } from 'antd';
import { Card, Tag, Space, Typography, theme, Modal, Grid } from 'antd';
import { PlayCircleOutlined, LikeOutlined, EyeOutlined, CommentOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useExpandedVideo } from '@/contexts/ExpandedVideoContext';
@ -27,6 +27,8 @@ export default function PublicVideoCard({ video }: PublicVideoCardProps) {
const { token } = theme.useToken();
const navigate = useNavigate();
const { expandVideo } = useExpandedVideo();
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
// Hover video preview state
const [hovering, setHovering] = useState(false);
@ -210,7 +212,7 @@ export default function PublicVideoCard({ video }: PublicVideoCardProps) {
</div>
)}
{/* Play button overlay */}
{/* Play button overlay — always visible on mobile, hover-only on desktop */}
{!video.isLocked && (
<div
style={{
@ -219,21 +221,21 @@ export default function PublicVideoCard({ video }: PublicVideoCardProps) {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: 'rgba(0, 0, 0, 0.3)',
opacity: 0,
background: isMobile ? 'rgba(0, 0, 0, 0.2)' : 'rgba(0, 0, 0, 0.3)',
opacity: isMobile ? 1 : 0,
transition: 'opacity 0.2s ease',
}}
onMouseEnter={(e) => {
e.currentTarget.style.opacity = '1';
if (!isMobile) e.currentTarget.style.opacity = '1';
}}
onMouseLeave={(e) => {
e.currentTarget.style.opacity = '0';
if (!isMobile) e.currentTarget.style.opacity = '0';
}}
>
<div
style={{
width: 64,
height: 64,
width: isMobile ? 48 : 64,
height: isMobile ? 48 : 64,
borderRadius: '50%',
background: hexToRgba(token.colorPrimary, 0.9),
display: 'flex',
@ -242,13 +244,13 @@ export default function PublicVideoCard({ video }: PublicVideoCardProps) {
transition: 'transform 0.2s ease',
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform = 'scale(1.1)';
if (!isMobile) e.currentTarget.style.transform = 'scale(1.1)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'scale(1)';
if (!isMobile) e.currentTarget.style.transform = 'scale(1)';
}}
>
<PlayCircleOutlined style={{ fontSize: 32, color: '#fff' }} />
<PlayCircleOutlined style={{ fontSize: isMobile ? 24 : 32, color: '#fff' }} />
</div>
</div>
)}

6
admin/src/components/media/QuickAnalyticsModal.tsx
View File

@ -1,4 +1,4 @@
import { Modal, Statistic, Row, Col, Empty, Tag, Button, Alert, Skeleton } from 'antd';
import { Modal, Statistic, Row, Col, Empty, Tag, Button, Alert, Skeleton, Grid } from 'antd';
import {
EyeOutlined,
UserOutlined,
@ -24,6 +24,8 @@ export default function QuickAnalyticsModal({
onClose,
}: QuickAnalyticsModalProps) {
const [loading, setLoading] = useState(false);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [error, setError] = useState<string | null>(null);
const [analytics, setAnalytics] = useState<VideoAnalytics | null>(null);
@ -66,7 +68,7 @@ export default function QuickAnalyticsModal({
open={open}
onCancel={onClose}
footer={null}
width={800}
width={isMobile ? '95vw' : 800}
aria-label="Video analytics modal"
>
{error ? (

6
admin/src/components/media/ScheduleCalendarDrawer.tsx
View File

@ -1,4 +1,4 @@
import { Drawer, Calendar, Badge, List, Tag, Button, Space, message, Empty, Alert, Skeleton } from 'antd';
import { Drawer, Calendar, Badge, List, Tag, Button, Space, message, Empty, Alert, Skeleton, Grid } from 'antd';
import type { CalendarProps } from 'antd';
import { CalendarOutlined, ClockCircleOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
@ -26,6 +26,8 @@ export default function ScheduleCalendarDrawer({
onRefresh,
}: ScheduleCalendarDrawerProps) {
const [schedules, setSchedules] = useState<ScheduleEvent[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [selectedDate, setSelectedDate] = useState<Dayjs>(dayjs());
@ -117,7 +119,7 @@ export default function ScheduleCalendarDrawer({
open={open}
onClose={onClose}
placement="right"
width={700}
width={isMobile ? '100%' : 700}
mask={false}
destroyOnClose={false}
styles={{

6
admin/src/components/media/SchedulePublishModal.tsx
View File

@ -1,4 +1,4 @@
import { Modal, DatePicker, Select, Space, Alert, Switch, message } from 'antd';
import { Modal, DatePicker, Select, Space, Alert, Switch, message, Grid } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import dayjs, { Dayjs } from 'dayjs';
@ -39,6 +39,8 @@ export default function SchedulePublishModal({
onSuccess,
}: SchedulePublishModalProps) {
const [publishNow, setPublishNow] = useState(false);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [publishAt, setPublishAt] = useState<Dayjs | null>(null);
const [selectedTimezone, setSelectedTimezone] = useState<string>('UTC');
const [unpublishEnabled, setUnpublishEnabled] = useState(false);
@ -161,7 +163,7 @@ export default function SchedulePublishModal({
onOk={handleSchedule}
okText={publishNow ? 'Publish Now' : 'Schedule'}
confirmLoading={loading}
width={600}
width={isMobile ? '95vw' : 600}
style={{ top: 20 }}
styles={{
body: { maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }

5
admin/src/components/media/UploadVideoDrawer.tsx
View File

@ -11,6 +11,7 @@ import {
List,
Tag,
Button,
Grid,
} from 'antd';
import { InboxOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import type { UploadFile } from 'antd/es/upload/interface';
@ -33,6 +34,8 @@ interface UploadResult {
export default function UploadVideoDrawer({ open, onClose, onSuccess }: UploadVideoDrawerProps) {
const [form] = Form.useForm();
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [fileList, setFileList] = useState<UploadFile[]>([]);
const [uploading, setUploading] = useState(false);
const [uploadProgress, setUploadProgress] = useState(0);
@ -149,7 +152,7 @@ export default function UploadVideoDrawer({ open, onClose, onSuccess }: UploadVi
open={open}
onClose={handleClose}
placement="right"
width={520}
width={isMobile ? '100%' : 520}
mask={false}
destroyOnClose
closable={!uploading}

6
admin/src/components/media/VideoAnalyticsModal.tsx
View File

@ -1,4 +1,4 @@
import { Modal, Tabs, Statistic, Row, Col, Empty, Card, Table, Alert, Button, Skeleton } from 'antd';
import { Modal, Tabs, Statistic, Row, Col, Empty, Card, Table, Alert, Button, Skeleton, Grid } from 'antd';
import {
EyeOutlined,
UserOutlined,
@ -27,6 +27,8 @@ export default function VideoAnalyticsModal({
onClose,
}: VideoAnalyticsModalProps) {
const [loading, setLoading] = useState(false);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [error, setError] = useState<string | null>(null);
const [analytics, setAnalytics] = useState<VideoAnalytics | null>(null);
@ -224,7 +226,7 @@ export default function VideoAnalyticsModal({
open={open}
onCancel={onClose}
footer={null}
width={1000}
width={isMobile ? '95vw' : 1000}
style={{ top: 20 }}
styles={{
body: { maxHeight: 'calc(100vh - 200px)', overflowY: 'auto' }

5
admin/src/components/media/VideoPickerModal.tsx
View File

@ -13,6 +13,7 @@ import {
Button,
Tag,
message,
Grid,
} from 'antd';
import {
SearchOutlined,
@ -60,6 +61,8 @@ export const VideoPickerModal: React.FC<VideoPickerModalProps> = ({
title = 'Select Video',
}) => {
const [activeTab, setActiveTab] = useState('library');
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [loading, setLoading] = useState(false);
const [videos, setVideos] = useState<Video[]>([]);
const [total, setTotal] = useState(0);
@ -172,7 +175,7 @@ export const VideoPickerModal: React.FC<VideoPickerModalProps> = ({
open={open}
onCancel={onClose}
title={title}
width={900}
width={isMobile ? '95vw' : 900}
footer={
mode === 'multiple' && activeTab === 'library' ? (
<div>

6
admin/src/components/payments/DonateInsertModal.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { Modal, Radio, InputNumber, Spin, Typography, Space, theme } from 'antd';
import { Modal, Radio, InputNumber, Spin, Typography, Space, theme, Grid } from 'antd';
import { HeartOutlined, DollarOutlined, AppstoreOutlined } from '@ant-design/icons';
import axios from 'axios';
@ -29,6 +29,8 @@ interface DonateInsertModalProps {
export function DonateInsertModal({ open, onClose, onInsert }: DonateInsertModalProps) {
const [variant, setVariant] = useState<DonateVariant>('simple');
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [amount, setAmount] = useState<number | null>(25);
const [config, setConfig] = useState<PaymentConfig | null>(null);
const [configLoading, setConfigLoading] = useState(false);
@ -85,7 +87,7 @@ export function DonateInsertModal({ open, onClose, onInsert }: DonateInsertModal
onOk={handleOk}
okText="Insert"
okButtonProps={{ disabled: variant === 'set-amount' && (!amount || amount <= 0) }}
width={520}
width={isMobile ? '95vw' : 520}
>
<Paragraph type="secondary" style={{ marginBottom: 16 }}>
Choose a donation block style to insert into your document.

6
admin/src/components/payments/ProductInsertModal.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
import { Modal, Card, Row, Col, Typography, Tag, Spin, Empty, Input } from 'antd';
import { Modal, Card, Row, Col, Typography, Tag, Spin, Empty, Input, Grid } from 'antd';
import { ShoppingCartOutlined, SearchOutlined, CheckCircleOutlined } from '@ant-design/icons';
import axios from 'axios';
import type { Product, ProductType } from '@/types/api';
@ -24,6 +24,8 @@ const typeColors: Record<ProductType, string> = {
export function ProductInsertModal({ open, onClose, onInsert }: ProductInsertModalProps) {
const [products, setProducts] = useState<Product[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [selectedId, setSelectedId] = useState<string | null>(null);
@ -65,7 +67,7 @@ export function ProductInsertModal({ open, onClose, onInsert }: ProductInsertMod
onOk={handleOk}
okText="Insert"
okButtonProps={{ disabled: !selectedId }}
width={640}
width={isMobile ? '95vw' : 640}
>
<Paragraph type="secondary" style={{ marginBottom: 12 }}>
Select a product to embed as an inline purchase card.

6
admin/src/components/shifts/EditModeModal.tsx
View File

@ -1,4 +1,4 @@
import { Modal, Radio, Space, Typography } from 'antd';
import { Modal, Radio, Space, Typography, Grid } from 'antd';
import { useState } from 'react';
import type { EditMode } from '@/types/api';
import dayjs from 'dayjs';
@ -21,6 +21,8 @@ export default function EditModeModal({
shiftsCount,
}: Props) {
const [mode, setMode] = useState<'THIS' | 'FUTURE' | 'ALL'>('THIS');
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const handleOk = () => {
onConfirm({
@ -36,7 +38,7 @@ export default function EditModeModal({
title="Edit Shift Series"
okText="Continue"
onOk={handleOk}
width={500}
width={isMobile ? '95vw' : 500}
>
<Text>
This shift is part of a repeating series. What would you like to edit?

7
admin/src/pages/CampaignEmailsDrawer.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect, useCallback } from 'react';
import { Drawer, Table, Tag, Select, Statistic, Row, Col, Card, message } from 'antd';
import { Drawer, Table, Tag, Select, Statistic, Row, Col, Card, message, Grid } from 'antd';
import type { TablePaginationConfig } from 'antd/es/table';
import dayjs from 'dayjs';
import { api } from '@/lib/api';
@ -36,6 +36,8 @@ const statusOptions: { value: CampaignEmailStatus; label: string }[] = [
export default function CampaignEmailsDrawer({ campaign, open, onClose }: Props) {
const [emails, setEmails] = useState<CampaignEmail[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [pagination, setPagination] = useState({ page: 1, limit: 20, total: 0, totalPages: 0 });
const [loading, setLoading] = useState(false);
const [statusFilter, setStatusFilter] = useState<CampaignEmailStatus | undefined>();
@ -123,7 +125,7 @@ export default function CampaignEmailsDrawer({ campaign, open, onClose }: Props)
title={`Emails — ${campaign?.title || ''}`}
open={open}
onClose={onClose}
width={720}
width={isMobile ? '100%' : 720}
destroyOnClose
>
{stats && (
@ -166,6 +168,7 @@ export default function CampaignEmailsDrawer({ campaign, open, onClose }: Props)
rowKey="id"
loading={loading}
size="small"
scroll={{ x: 'max-content' }}
pagination={{
current: pagination.page,
pageSize: pagination.limit,

93
admin/src/pages/CampaignsPage.tsx
View File

@ -15,6 +15,7 @@ import {
Col,
Divider,
Tooltip,
Grid,
} from 'antd';
import {
PlusOutlined,
@ -27,6 +28,7 @@ import {
EyeOutlined,
QuestionCircleOutlined,
ExportOutlined,
QrcodeOutlined,
} from '@ant-design/icons';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import dayjs from 'dayjs';
@ -45,9 +47,30 @@ import type {
} from '@/types/api';
import CampaignEmailsDrawer from '@/pages/CampaignEmailsDrawer';
import ExportContactsModal from '@/components/canvass/ExportContactsModal';
import QrCodeModal from '@/components/QrCodeModal';
import { VideoPickerModal } from '@/components/media/VideoPickerModal';
import type { Video } from '@/components/media/VideoPickerModal';
import { useSettingsStore } from '@/stores/settings.store';
const { TextArea } = Input;
function CoverVideoField({ video, onChoose, onRemove, target }: {
video: Video | null;
onChoose: (target: 'create' | 'edit') => void;
onRemove: (target: 'create' | 'edit') => void;
target: 'create' | 'edit';
}) {
if (video) {
return (
<Space>
<Tag color="blue">Video #{video.id}: {video.title}</Tag>
<Button size="small" danger onClick={() => onRemove(target)}>Remove</Button>
</Space>
);
}
return <Button size="small" onClick={() => onChoose(target)}>Choose Cover Video</Button>;
}
const statusColors: Record<CampaignStatus, string> = {
DRAFT: 'default',
ACTIVE: 'green',
@ -92,8 +115,16 @@ export default function CampaignsPage() {
const [exportOpen, setExportOpen] = useState(false);
const [exportCampaignId, setExportCampaignId] = useState<string | undefined>();
const [cuts, setCuts] = useState<Cut[]>([]);
const [qrCampaign, setQrCampaign] = useState<Campaign | null>(null);
const [createForm] = Form.useForm();
const [editForm] = Form.useForm();
const [videoPickerOpen, setVideoPickerOpen] = useState(false);
const [videoPickerTarget, setVideoPickerTarget] = useState<'create' | 'edit'>('create');
const [createSelectedVideo, setCreateSelectedVideo] = useState<Video | null>(null);
const [editSelectedVideo, setEditSelectedVideo] = useState<Video | null>(null);
const { settings: siteSettings } = useSettingsStore();
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const handleSearchChange = (value: string) => {
setSearch(value);
@ -135,10 +166,11 @@ export default function CampaignsPage() {
const handleCreate = async (values: CreateCampaignPayload) => {
try {
await api.post('/campaigns', values);
await api.post('/campaigns', { ...values, coverVideoId: createSelectedVideo?.id ?? null });
message.success('Campaign created');
setCreateModalOpen(false);
createForm.resetFields();
setCreateSelectedVideo(null);
fetchCampaigns({ page: 1 });
} catch (err: unknown) {
const msg =
@ -151,11 +183,12 @@ export default function CampaignsPage() {
const handleEdit = async (values: UpdateCampaignPayload) => {
if (!editingCampaign) return;
try {
await api.put(`/campaigns/${editingCampaign.id}`, values);
await api.put(`/campaigns/${editingCampaign.id}`, { ...values, coverVideoId: editSelectedVideo?.id ?? null });
message.success('Campaign updated');
setEditModalOpen(false);
setEditingCampaign(null);
editForm.resetFields();
setEditSelectedVideo(null);
fetchCampaigns();
} catch (err: unknown) {
const msg =
@ -205,7 +238,9 @@ export default function CampaignsPage() {
showResponseWall: campaign.showResponseWall,
highlightCampaign: campaign.highlightCampaign,
coverPhoto: campaign.coverPhoto,
coverVideoId: campaign.coverVideoId,
});
setEditSelectedVideo(campaign.coverVideoId ? { id: campaign.coverVideoId, title: `Video #${campaign.coverVideoId}` } as Video : null);
setEditModalOpen(true);
};
@ -303,6 +338,14 @@ export default function CampaignsPage() {
}}
/>
</Tooltip>
<Tooltip title="QR code">
<Button
type="link"
size="small"
icon={<QrcodeOutlined />}
onClick={() => setQrCampaign(record)}
/>
</Tooltip>
<Tooltip title="Target from canvass">
<Button
type="link"
@ -378,6 +421,20 @@ export default function CampaignsPage() {
<Input placeholder="https://..." />
</Form.Item>
{siteSettings?.enableMediaFeatures !== false && (
<Form.Item label="Cover Video">
<CoverVideoField
video={videoPickerTarget === 'create' ? createSelectedVideo : editSelectedVideo}
onChoose={(target) => { setVideoPickerTarget(target); setVideoPickerOpen(true); }}
onRemove={(target) => {
if (target === 'create') { setCreateSelectedVideo(null); createForm.setFieldsValue({ coverVideoId: null }); }
else { setEditSelectedVideo(null); editForm.setFieldsValue({ coverVideoId: null }); }
}}
target={editModalOpen ? 'edit' : 'create'}
/>
</Form.Item>
)}
<Divider orientation="left" plain>
Campaign Options
</Divider>
@ -494,6 +551,7 @@ export default function CampaignsPage() {
showTotal: (total) => `${total} campaigns`,
}}
onChange={handleTableChange}
scroll={{ x: 'max-content' }}
locale={{ emptyText: 'No campaigns yet. Create your first campaign to get started.' }}
/>
@ -502,7 +560,7 @@ export default function CampaignsPage() {
title="Create Campaign"
open={createModalOpen}
destroyOnHidden
width={640}
width={isMobile ? '95vw' : 640}
onCancel={() => {
setCreateModalOpen(false);
createForm.resetFields();
@ -520,7 +578,7 @@ export default function CampaignsPage() {
title="Edit Campaign"
open={editModalOpen}
destroyOnHidden
width={640}
width={isMobile ? '95vw' : 640}
onCancel={() => {
setEditModalOpen(false);
setEditingCampaign(null);
@ -544,6 +602,16 @@ export default function CampaignsPage() {
}}
/>
{/* QR Code Modal */}
{qrCampaign && (
<QrCodeModal
open={!!qrCampaign}
onClose={() => setQrCampaign(null)}
url={`${window.location.origin}/campaign/${qrCampaign.slug}`}
title={qrCampaign.title}
/>
)}
{/* Export Canvass Contacts Modal */}
<ExportContactsModal
open={exportOpen}
@ -551,6 +619,23 @@ export default function CampaignsPage() {
cuts={cuts}
preselectedCampaignId={exportCampaignId}
/>
{/* Video Picker Modal */}
<VideoPickerModal
open={videoPickerOpen}
onClose={() => setVideoPickerOpen(false)}
onSelect={(video: Video) => {
if (videoPickerTarget === 'create') {
setCreateSelectedVideo(video);
createForm.setFieldsValue({ coverVideoId: video.id });
} else {
setEditSelectedVideo(video);
editForm.setFieldsValue({ coverVideoId: video.id });
}
setVideoPickerOpen(false);
}}
title="Select Cover Video"
/>
</>
);
}

22
admin/src/pages/CutsPage.tsx
View File

@ -18,6 +18,8 @@ import {
Drawer,
Upload,
Typography,
Result,
Grid,
} from 'antd';
import {
PlusOutlined,
@ -54,6 +56,8 @@ const categoryOptions = Object.entries(CUT_CATEGORY_LABELS).map(([value, label])
export default function CutsPage() {
const navigate = useNavigate();
const [cuts, setCuts] = useState<Cut[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [pagination, setPagination] = useState({ page: 1, limit: 20, total: 0, totalPages: 0 });
const [loading, setLoading] = useState(false);
const [search, setSearch] = useState('');
@ -465,6 +469,7 @@ export default function CutsPage() {
dataSource={cuts}
rowKey="id"
loading={loading}
scroll={{ x: 'max-content' }}
pagination={{
current: pagination.page,
pageSize: pagination.limit,
@ -479,6 +484,17 @@ export default function CutsPage() {
})}
/>
</>
) : isMobile ? (
<Result
status="warning"
title="Desktop Required"
subTitle="Cut drawing requires a mouse for precise polygon editing. Please use a desktop browser for the map editor. The table view above is fully usable on mobile."
extra={
<Button type="primary" onClick={() => setActiveTab('table')}>
Switch to Table
</Button>
}
/>
) : (
<CutEditorMap
cuts={cuts}
@ -491,7 +507,7 @@ export default function CutsPage() {
title="Create Cut"
open={createModalOpen}
destroyOnHidden
width={500}
width={isMobile ? '95vw' : 500}
onCancel={() => {
setCreateModalOpen(false);
createForm.resetFields();
@ -516,7 +532,7 @@ export default function CutsPage() {
title="Import GeoJSON"
open={importModalOpen}
destroyOnHidden
width={500}
width={isMobile ? '95vw' : 500}
onCancel={() => setImportModalOpen(false)}
footer={null}
>
@ -543,7 +559,7 @@ export default function CutsPage() {
<Drawer
title="Edit Cut"
open={editDrawerOpen}
width={480}
width={isMobile ? '100%' : 480}
onClose={() => {
setEditDrawerOpen(false);
setEditingCut(null);

5
admin/src/pages/EmailTemplatesPage.tsx
View File

@ -10,6 +10,7 @@ import {
message,
Typography,
Badge,
Grid,
} from 'antd';
import {
EditOutlined,
@ -54,6 +55,8 @@ const activeOptions = [
export default function EmailTemplatesPage() {
const { setPageHeader } = useOutletContext<AppOutletContext>();
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [templates, setTemplates] = useState<EmailTemplate[]>([]);
const [pagination, setPagination] = useState<PaginationMeta>({ page: 1, limit: 20, total: 0, totalPages: 0 });
const [loading, setLoading] = useState(false);
@ -273,7 +276,7 @@ export default function EmailTemplatesPage() {
prefix={<SearchOutlined />}
value={search}
onChange={(e) => handleSearchChange(e.target.value)}
style={{ width: 200 }}
style={{ width: isMobile ? '100%' : 200 }}
allowClear
size="small"
/>

54
admin/src/pages/LandingPagesPage.tsx
View File

@ -15,6 +15,7 @@ import {
Radio,
Checkbox,
Divider,
Grid,
} from 'antd';
import {
PlusOutlined,
@ -26,6 +27,7 @@ import {
SyncOutlined,
BuildOutlined,
ExclamationCircleOutlined,
QrcodeOutlined,
} from '@ant-design/icons';
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import dayjs from 'dayjs';
@ -33,6 +35,7 @@ import { useOutletContext } from 'react-router-dom';
import { api } from '@/lib/api';
import { useMkDocsBuild } from '@/hooks/useMkDocsBuild';
import LandingPageEditor from '@/components/landing-pages/LandingPageEditor';
import QrCodeModal from '@/components/QrCodeModal';
import type { LandingPage, EditorMode, LandingPagesListResponse, LandingPagesListParams, AppOutletContext } from '@/types/api';
const { TextArea } = Input;
@ -48,6 +51,8 @@ export default function LandingPagesPage() {
const [pages, setPages] = useState<LandingPage[]>([]);
const [pagination, setPagination] = useState({ page: 1, limit: 20, total: 0, totalPages: 0 });
const [loading, setLoading] = useState(false);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [syncing, setSyncing] = useState(false);
const [validating, setValidating] = useState(false);
const [search, setSearch] = useState('');
@ -58,6 +63,8 @@ export default function LandingPagesPage() {
const [settingsModalOpen, setSettingsModalOpen] = useState(false);
const [editingPage, setEditingPage] = useState<LandingPage | null>(null);
const [editingPageId, setEditingPageId] = useState<string | null>(null);
const [qrPage, setQrPage] = useState<LandingPage | null>(null);
const [viewCounts, setViewCounts] = useState<Record<string, number>>({});
const [createForm] = Form.useForm();
const [settingsForm] = Form.useForm();
@ -95,6 +102,12 @@ export default function LandingPagesPage() {
fetchPages({ page: 1 });
}, [debouncedSearch, publishedFilter]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
api.get<Record<string, number>>('/pages/view-counts')
.then(({ data }) => setViewCounts(data))
.catch(() => {});
}, []);
const handleTableChange = (pag: TablePaginationConfig) => {
fetchPages({ page: pag.current ?? 1, limit: pag.pageSize ?? 20 });
};
@ -289,6 +302,12 @@ export default function LandingPagesPage() {
render: (date: string) => dayjs(date).format('YYYY-MM-DD'),
responsive: ['md'],
},
{
title: 'Views (30d)',
key: 'views',
render: (_: unknown, record: LandingPage) => viewCounts[record.slug] ?? 0,
responsive: ['md'],
},
{
title: 'Actions',
key: 'actions',
@ -309,13 +328,22 @@ export default function LandingPagesPage() {
title="Page settings"
/>
{record.published && (
<Button
type="link"
size="small"
icon={<EyeOutlined />}
onClick={() => window.open(`/p/${record.slug}`, '_blank')}
title="View page"
/>
<>
<Button
type="link"
size="small"
icon={<EyeOutlined />}
onClick={() => window.open(`/p/${record.slug}`, '_blank')}
title="View page"
/>
<Button
type="link"
size="small"
icon={<QrcodeOutlined />}
onClick={() => setQrPage(record)}
title="QR code"
/>
</>
)}
{record.published ? (
<Popconfirm
@ -481,12 +509,22 @@ export default function LandingPagesPage() {
</Form>
</Modal>
{/* QR Code Modal */}
{qrPage && (
<QrCodeModal
open={!!qrPage}
onClose={() => setQrPage(null)}
url={`${window.location.origin}/p/${qrPage.slug}`}
title={qrPage.title}
/>
)}
{/* Settings Modal */}
<Modal
title="Page Settings"
open={settingsModalOpen}
destroyOnHidden
width={560}
width={isMobile ? '95vw' : 560}
onCancel={() => {
setSettingsModalOpen(false);
setEditingPage(null);

1
admin/src/pages/ListmonkPage.tsx
View File

@ -346,6 +346,7 @@ export default function ListmonkPage() {
size="small"
loading={loading}
pagination={false}
scroll={{ x: 'max-content' }}
columns={[
{ title: 'List Name', dataIndex: 'name', key: 'name' },
{

14
admin/src/pages/LocationsPage.tsx
View File

@ -22,6 +22,7 @@ import {
Drawer,
InputNumber,
Tabs,
Grid,
} from 'antd';
import {
PlusOutlined,
@ -101,6 +102,8 @@ function formatNarSize(bytes: number): string {
export default function LocationsPage() {
const navigate = useNavigate();
const [locations, setLocations] = useState<Location[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [pagination, setPagination] = useState({ page: 1, limit: 20, total: 0, totalPages: 0 });
const [loading, setLoading] = useState(false);
const [stats, setStats] = useState<LocationStats | null>(null);
@ -1195,6 +1198,7 @@ export default function LocationsPage() {
dataSource={locations}
rowKey="id"
loading={loading}
scroll={{ x: 'max-content' }}
rowSelection={{
selectedRowKeys,
onChange: (keys) => setSelectedRowKeys(keys as string[]),
@ -1230,8 +1234,8 @@ export default function LocationsPage() {
locations={allLocations}
loading={mapLoading}
onEditLocation={openEdit}
onAddLocationAtPoint={handleAddFromMap}
onMoveLocation={handleMoveLocation}
onAddLocationAtPoint={isMobile ? undefined : handleAddFromMap}
onMoveLocation={isMobile ? undefined : handleMoveLocation}
onRefresh={handleRefresh}
onMapMove={handleMapMove}
visible={activeTab === 'map'}
@ -1246,7 +1250,7 @@ export default function LocationsPage() {
title="Add Location"
open={createModalOpen}
destroyOnHidden
width={600}
width={isMobile ? '95vw' : 600}
onCancel={() => {
setCreateModalOpen(false);
createForm.resetFields();
@ -1263,7 +1267,7 @@ export default function LocationsPage() {
<Drawer
title="Edit Location"
open={editDrawerOpen}
width={700}
width={isMobile ? '100%' : 700}
onClose={() => {
setEditDrawerOpen(false);
setEditingLocation(null);
@ -1850,7 +1854,7 @@ export default function LocationsPage() {
bulkGeocodeForm.resetFields();
}}
footer={null}
width={600}
width={isMobile ? '95vw' : 600}
>
{!bulkGeocoding && !bulkGeocodeStatus ? (
<Form

6
admin/src/pages/PangolinPage.tsx
View File

@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
import { useOutletContext } from 'react-router-dom';
import {
Card, Button, Form, Input, Space, Table, Tag, Typography, Spin, Alert, Descriptions, App,
Modal, Checkbox, Select, Popconfirm,
Modal, Checkbox, Select, Popconfirm, Grid,
} from 'antd';
import {
CloudServerOutlined, SyncOutlined, CheckCircleOutlined, CloseCircleOutlined,
@ -69,6 +69,8 @@ const suggestNextSubnet = (sites: PangolinSite[]): string => {
export default function PangolinPage() {
const { setPageHeader } = useOutletContext<AppOutletContext>();
const { message } = App.useApp();
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [status, setStatus] = useState<PangolinStatus | null>(null);
const [config, setConfig] = useState<PangolinConfig | null>(null);
@ -697,7 +699,7 @@ export default function PangolinPage() {
editForm.resetFields();
}}
footer={null}
width={600}
width={isMobile ? '95vw' : 600}
>
<Form form={editForm} layout="vertical" onFinish={handleUpdateResource}>
<Form.Item label="Name" name="name" rules={[{ required: true }]}>

6
admin/src/pages/RepresentativesPage.tsx
View File

@ -13,6 +13,7 @@ import {
Card,
Statistic,
Descriptions,
Grid,
} from 'antd';
import {
SearchOutlined,
@ -50,6 +51,8 @@ export default function RepresentativesPage() {
const [stats, setStats] = useState<CacheStats | null>(null);
const [detailModalOpen, setDetailModalOpen] = useState(false);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [selectedRep, setSelectedRep] = useState<Representative | null>(null);
const handleSearchChange = (value: string) => {
@ -320,6 +323,7 @@ export default function RepresentativesPage() {
showTotal: (total) => `${total} representatives`,
}}
onChange={handleTableChange}
scroll={{ x: 'max-content' }}
locale={{ emptyText: 'No cached representatives. Use the lookup above to fetch and cache results.' }}
/>
@ -350,7 +354,7 @@ export default function RepresentativesPage() {
</Space>
) : null
}
width={640}
width={isMobile ? '95vw' : 640}
>
{selectedRep && (
<Descriptions column={1} bordered size="small">

5
admin/src/pages/ResponsesPage.tsx
View File

@ -12,6 +12,7 @@ import {
Descriptions,
Row,
Col,
Grid,
} from 'antd';
import {
CheckCircleOutlined,
@ -53,6 +54,8 @@ export default function ResponsesPage() {
const [campaigns, setCampaigns] = useState<Campaign[]>([]);
const [detailResponse, setDetailResponse] = useState<RepresentativeResponse | null>(null);
const searchTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const fetchResponses = useCallback(async (page = 1) => {
setLoading(true);
@ -347,7 +350,7 @@ export default function ResponsesPage() {
title="Response Details"
open={!!detailResponse}
onClose={() => setDetailResponse(null)}
width={520}
width={isMobile ? '100%' : 520}
destroyOnClose
>
{detailResponse && (

24
admin/src/pages/ShiftsPage.tsx
View File

@ -25,6 +25,7 @@ import {
Checkbox,
Alert,
Tooltip,
Grid,
} from 'antd';
import {
PlusOutlined,
@ -118,6 +119,8 @@ export default function ShiftsPage() {
const [calendarData, setCalendarData] = useState<CalendarData['dates']>({});
const [calendarLoading, setCalendarLoading] = useState(false);
const [currentMonth] = useState(dayjs());
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const handleSearchChange = (value: string) => {
setSearch(value);
@ -811,7 +814,7 @@ export default function ShiftsPage() {
{/* Main Content Container - shifts when drawer opens */}
<div
style={{
marginRight: activeDrawerWidth,
marginRight: isMobile ? 0 : activeDrawerWidth,
transition: 'margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
}}
>
@ -902,6 +905,7 @@ export default function ShiftsPage() {
onClick: () => openSignups(record),
style: { cursor: 'pointer' },
})}
scroll={{ x: 'max-content' }}
locale={{ emptyText: (debouncedSearch || statusFilter)
? 'No shifts match your filters.'
: <div style={{ padding: 16 }}>
@ -952,13 +956,13 @@ export default function ShiftsPage() {
{/* Create Drawer */}
<Drawer
mask={false}
mask={isMobile}
title={createMode === 'single' ? 'Create Shift' : 'Create Shift Series'}
open={createDrawerOpen}
placement="right"
width={createMode === 'series' ? 700 : 600}
width={isMobile ? '100%' : (createMode === 'series' ? 700 : 600)}
destroyOnClose
rootStyle={{ top: 64, height: 'calc(100vh - 64px)' }}
{...(!isMobile && { rootStyle: { top: 64, height: 'calc(100vh - 64px)' } })}
onClose={() => {
setCreateDrawerOpen(false);
createForm.resetFields();
@ -992,9 +996,9 @@ export default function ShiftsPage() {
<Drawer
title="Edit Shift"
open={editDrawerOpen}
width={520}
mask={false}
rootStyle={{ top: 64, height: 'calc(100vh - 64px)' }}
width={isMobile ? '100%' : 520}
mask={isMobile}
{...(!isMobile && { rootStyle: { top: 64, height: 'calc(100vh - 64px)' } })}
onClose={() => {
setEditDrawerOpen(false);
setEditingShift(null);
@ -1020,9 +1024,9 @@ export default function ShiftsPage() {
</Space>
}
open={signupsDrawerOpen}
width={640}
mask={false}
rootStyle={{ top: 64, height: 'calc(100vh - 64px)' }}
width={isMobile ? '100%' : 640}
mask={isMobile}
{...(!isMobile && { rootStyle: { top: 64, height: 'calc(100vh - 64px)' } })}
onClose={() => {
setSignupsDrawerOpen(false);
setSignupsShift(null);

19
admin/src/pages/UsersPage.tsx
View File

@ -17,6 +17,7 @@ import {
DatePicker,
Modal,
Badge,
Grid,
} from 'antd';
import {
PlusOutlined,
@ -94,6 +95,8 @@ export default function UsersPage() {
const [rejectModalOpen, setRejectModalOpen] = useState(false);
const [rejectingUser, setRejectingUser] = useState<User | null>(null);
const [rejectReason, setRejectReason] = useState('');
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
useEffect(() => {
setPageHeader({ title: 'Users' });
@ -263,6 +266,7 @@ export default function UsersPage() {
{
title: 'Roles',
key: 'roles',
responsive: ['md'] as any,
render: (_: unknown, record: User) => {
const roles = getUserRoles(record);
return (
@ -349,7 +353,7 @@ export default function UsersPage() {
{/* Main Content Container - shifts when drawer opens */}
<div
style={{
marginRight: activeDrawerWidth,
marginRight: isMobile ? 0 : activeDrawerWidth,
transition: 'margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
}}
>
@ -415,6 +419,7 @@ export default function UsersPage() {
showTotal: (total) => `${total} users`,
}}
onChange={handleTableChange}
scroll={{ x: 'max-content' }}
locale={{ emptyText: 'No users found' }}
/>
</div>
@ -424,10 +429,10 @@ export default function UsersPage() {
title="Create User"
open={createDrawerOpen}
placement="right"
width={520}
mask={false}
width={isMobile ? '100%' : 520}
mask={isMobile}
destroyOnClose
rootStyle={{ top: 64, height: 'calc(100vh - 64px)' }}
{...(!isMobile && { rootStyle: { top: 64, height: 'calc(100vh - 64px)' } })}
onClose={() => {
setCreateDrawerOpen(false);
createForm.resetFields();
@ -514,10 +519,10 @@ export default function UsersPage() {
title="Edit User"
open={editDrawerOpen}
placement="right"
width={520}
mask={false}
width={isMobile ? '100%' : 520}
mask={isMobile}
destroyOnClose
rootStyle={{ top: 64, height: 'calc(100vh - 64px)' }}
{...(!isMobile && { rootStyle: { top: 64, height: 'calc(100vh - 64px)' } })}
onClose={() => {
setEditDrawerOpen(false);
setEditingUser(null);

5
admin/src/pages/influence/CampaignModerationPage.tsx
View File

@ -14,6 +14,7 @@ import {
Row,
Col,
Modal,
Grid,
} from 'antd';
import {
CheckCircleOutlined,
@ -44,6 +45,8 @@ const { TextArea } = Input;
export default function CampaignModerationPage() {
const [campaigns, setCampaigns] = useState<Campaign[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [loading, setLoading] = useState(false);
const [total, setTotal] = useState(0);
const [page, setPage] = useState(1);
@ -283,7 +286,7 @@ export default function CampaignModerationPage() {
title="Campaign Details"
open={drawerOpen}
onClose={() => { setDrawerOpen(false); setSelectedCampaign(null); }}
width={600}
width={isMobile ? '100%' : 600}
>
{selectedCampaign && (
<div>

5
admin/src/pages/media/CommentModerationPage.tsx
View File

@ -19,6 +19,7 @@ import {
Tabs,
Form,
Descriptions,
Grid,
} from 'antd';
import {
CheckCircleOutlined,
@ -87,6 +88,8 @@ export default function CommentModerationPage() {
// Comments state
const [comments, setComments] = useState<CommentRecord[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [stats, setStats] = useState<CommentStats>({ total: 0, pending: 0, flagged: 0, hidden: 0, safe: 0 });
const [loading, setLoading] = useState(false);
const [page, setPage] = useState(1);
@ -504,7 +507,7 @@ export default function CommentModerationPage() {
title="Comment Details"
open={!!selectedComment}
onClose={() => setSelectedComment(null)}
width={480}
width={isMobile ? '100%' : 480}
>
{selectedComment && (
<Space direction="vertical" size="large" style={{ width: '100%' }}>

9
admin/src/pages/media/GalleryAdsPage.tsx
View File

@ -24,6 +24,7 @@ import {
Spin,
ConfigProvider,
theme as antTheme,
Grid,
} from 'antd';
import {
PlusOutlined,
@ -68,6 +69,8 @@ export default function GalleryAdsPage() {
const { setPageHeader } = useOutletContext<AppOutletContext>();
const navigate = useNavigate();
const [ads, setAds] = useState<GalleryAd[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [loading, setLoading] = useState(true);
const [drawerOpen, setDrawerOpen] = useState(false);
const [editingAd, setEditingAd] = useState<GalleryAd | null>(null);
@ -373,7 +376,7 @@ export default function GalleryAdsPage() {
title={editingAd ? 'Edit Ad' : 'Create Ad'}
open={drawerOpen}
onClose={() => setDrawerOpen(false)}
width={520}
width={isMobile ? '100%' : 520}
extra={
<Button type="primary" onClick={handleSave} loading={saving}>
Save
@ -485,7 +488,7 @@ export default function GalleryAdsPage() {
open={!!previewAd}
onCancel={() => setPreviewAd(null)}
footer={null}
width={360}
width={isMobile ? '95vw' : 360}
styles={{ content: { background: '#0d1b2a', padding: 24 } }}
>
{previewAd && (
@ -508,7 +511,7 @@ export default function GalleryAdsPage() {
title={analyticsAd ? `Analytics: ${analyticsAd.title}` : 'Ad Analytics'}
open={!!analyticsAd}
onClose={() => { setAnalyticsAd(null); setAnalytics(null); }}
width={520}
width={isMobile ? '100%' : 520}
>
{analyticsLoading ? (
<div style={{ textAlign: 'center', padding: 48 }}><Spin /></div>

6
admin/src/pages/media/LibraryPage.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect, useCallback } from 'react';
import { Row, Col, Input, Select, Button, Pagination, message, Empty, Spin, Tooltip, Modal, Segmented } from 'antd';
import { Row, Col, Input, Select, Button, Pagination, message, Empty, Spin, Tooltip, Modal, Segmented, Grid } from 'antd';
import {
SearchOutlined,
GlobalOutlined,
@ -49,6 +49,8 @@ type MediaTab = 'Videos' | 'Photos' | 'Albums';
export default function LibraryPage() {
const { setPageHeader } = useOutletContext<AppOutletContext>();
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [mediaTab, setMediaTab] = useLocalStorage<MediaTab>('libraryMediaTab', 'Videos');
// === Video state ===
@ -372,7 +374,7 @@ export default function LibraryPage() {
value={search}
onChange={(e) => setSearch(e.target.value)}
allowClear
style={{ width: 200 }}
style={{ width: isMobile ? '100%' : 200 }}
/>
{/* Orientation filter (Videos + Photos) */}

6
admin/src/pages/payments/ProductsPage.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect, useCallback } from 'react';
import { Table, Button, Space, App, Modal, Form, Input, InputNumber, Select, Switch, Tag, Popconfirm } from 'antd';
import { Table, Button, Space, App, Modal, Form, Input, InputNumber, Select, Switch, Tag, Popconfirm, Grid } from 'antd';
import { PlusOutlined, SyncOutlined, EditOutlined, DeleteOutlined, PictureOutlined } from '@ant-design/icons';
import { useNavigate, useOutletContext } from 'react-router-dom';
import { api } from '@/lib/api';
@ -10,6 +10,8 @@ export default function ProductsPage() {
const navigate = useNavigate();
const { setPageHeader } = useOutletContext<AppOutletContext>();
const [products, setProducts] = useState<Product[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [pagination, setPagination] = useState<PaginationMeta>({ page: 1, limit: 20, total: 0, totalPages: 0 });
const [loading, setLoading] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
@ -176,7 +178,7 @@ export default function ProductsPage() {
open={modalOpen}
onOk={handleSubmit}
onCancel={() => { setModalOpen(false); setEditingProduct(null); form.resetFields(); }}
width={600}
width={isMobile ? '95vw' : 600}
>
<Form form={form} layout="vertical" initialValues={{ type: 'DIGITAL', isActive: true }}>
<Form.Item name="title" label="Title" rules={[{ required: true }]}>

6
admin/src/pages/payments/SubscribersPage.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect, useCallback } from 'react';
import { Table, Card, Input, Select, Button, Tag, Space, Typography, App, Popconfirm, Drawer } from 'antd';
import { Table, Card, Input, Select, Button, Tag, Space, Typography, App, Popconfirm, Drawer, Grid } from 'antd';
import { SearchOutlined, StopOutlined, DownloadOutlined } from '@ant-design/icons';
import { useOutletContext } from 'react-router-dom';
import { api } from '@/lib/api';
@ -10,6 +10,8 @@ const { Text } = Typography;
export default function SubscribersPage() {
const { setPageHeader } = useOutletContext<AppOutletContext>();
const [subscriptions, setSubscriptions] = useState<UserSubscription[]>([]);
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const [pagination, setPagination] = useState<PaginationMeta>({ page: 1, limit: 20, total: 0, totalPages: 0 });
const [loading, setLoading] = useState(false);
const [search, setSearch] = useState('');
@ -175,7 +177,7 @@ export default function SubscribersPage() {
title="Subscription Details"
open={!!selectedSub}
onClose={() => setSelectedSub(null)}
width={400}
width={isMobile ? '100%' : 400}
>
{selectedSub && (
<div>

13
admin/src/pages/public/CampaignPage.tsx
View File

@ -39,6 +39,7 @@ import type {
} from '@/types/api';
import { GOVERNMENT_LEVEL_COLORS, GOVERNMENT_LEVEL_LABELS } from '@/types/api';
import { mapRepSetToLevel } from '@/utils/representatives';
import { VideoPlayer } from '@/components/media/VideoPlayer';
const { Title, Text, Paragraph } = Typography;
@ -261,6 +262,18 @@ export default function CampaignPage() {
</div>
</div>
{/* Cover Video */}
{campaign.coverVideoId && siteSettings?.enableMediaFeatures !== false && (
<div style={{ marginBottom: 24, borderRadius: 12, overflow: 'hidden' }}>
<VideoPlayer
videoId={campaign.coverVideoId}
width="100%"
height="auto"
controls
/>
</div>
)}
{/* Call to Action */}
{campaign.callToAction && (
<Card

53
admin/src/pages/public/LandingPage.tsx
View File

@ -9,6 +9,7 @@ import { AdvancedVideoPlayer } from '@/components/media/AdvancedVideoPlayer';
import { DonationWidget } from '@/components/payments/DonationWidget';
import { PricingWidget } from '@/components/payments/PricingWidget';
import { ProductWidget } from '@/components/payments/ProductWidget';
import { CampaignFormWidget } from '@/components/influence/CampaignFormWidget';
export default function PublicLandingPage() {
const { slug } = useParams<{ slug: string }>();
@ -18,6 +19,21 @@ export default function PublicLandingPage() {
const contentRef = useRef<HTMLDivElement>(null);
const videoRootsRef = useRef<Array<ReturnType<typeof createRoot>>>([]);
const paymentRootsRef = useRef<Array<ReturnType<typeof createRoot>>>([]);
const campaignFormRootsRef = useRef<Array<ReturnType<typeof createRoot>>>([]);
// Track page view
useEffect(() => {
if (!slug) return;
const sessionHash = sessionStorage.getItem('cm_session') ||
Math.random().toString(36).slice(2) + Date.now().toString(36);
sessionStorage.setItem('cm_session', sessionHash);
axios.post('/api/docs-analytics/track', {
path: `/p/${slug}`,
referrer: document.referrer || null,
sessionHash,
}).catch(() => {}); // fire-and-forget
}, [slug]);
useEffect(() => {
const fetchPage = async () => {
@ -207,10 +223,42 @@ export default function PublicLandingPage() {
});
};
// Hydrate campaign form blocks
const hydrateCampaignFormBlocks = () => {
const formBlocks = contentRef.current?.querySelectorAll('.campaign-form-block');
if (!formBlocks) return;
// Clean up previous roots
campaignFormRootsRef.current.forEach((root) => {
try { root.unmount(); } catch (err) { console.error('Failed to unmount campaign form root:', err); }
});
campaignFormRootsRef.current = [];
formBlocks.forEach((blockEl) => {
const campaignSlug = blockEl.getAttribute('data-campaign-slug');
if (!campaignSlug) return;
const compact = blockEl.getAttribute('data-compact') === 'true';
const container = document.createElement('div');
blockEl.innerHTML = '';
blockEl.appendChild(container);
try {
const root = createRoot(container);
campaignFormRootsRef.current.push(root);
root.render(<CampaignFormWidget campaignSlug={campaignSlug} compact={compact} />);
} catch (err) {
console.error('Failed to render campaign form widget:', err);
}
});
};
// Hydrate after DOM is ready
setTimeout(hydrateVideoBlocks, 100);
setTimeout(hydrateVideoCards, 200);
setTimeout(hydratePaymentBlocks, 150);
setTimeout(hydrateCampaignFormBlocks, 175);
// Cleanup on unmount
return () => {
@ -223,6 +271,11 @@ export default function PublicLandingPage() {
try { root.unmount(); } catch (err) { console.error('Failed to unmount payment root on cleanup:', err); }
});
paymentRootsRef.current = [];
campaignFormRootsRef.current.forEach((root) => {
try { root.unmount(); } catch (err) { console.error('Failed to unmount campaign form root on cleanup:', err); }
});
campaignFormRootsRef.current = [];
};
}, [page]);

6
admin/src/pages/public/MapPage.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
import { ConfigProvider, Spin, Typography, theme, Button, Tooltip, message, Result } from 'antd';
import { ConfigProvider, Spin, Typography, theme, Button, Tooltip, message, Result, Grid } from 'antd';
import { Link, useNavigate } from 'react-router-dom';
import { ArrowLeftOutlined, AimOutlined, FullscreenOutlined, FullscreenExitOutlined, CalendarOutlined, SendOutlined } from '@ant-design/icons';
import { MapContainer, TileLayer, CircleMarker, Popup, useMap, useMapEvents } from 'react-leaflet';
@ -105,6 +105,8 @@ export default function MapPage() {
const fetchTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
const abortControllerRef = useRef<AbortController | null>(null);
const { settings: siteSettings } = useSettingsStore();
const screens = Grid.useBreakpoint();
const isMobile = !screens.md;
const navigate = useNavigate();
useEffect(() => {
@ -374,6 +376,7 @@ export default function MapPage() {
<Button
type="primary"
shape="circle"
size={isMobile ? 'large' : 'middle'}
icon={<AimOutlined />}
onClick={handleGeolocate}
style={{ background: 'rgba(27, 40, 56, 0.9)', borderColor: 'rgba(255,255,255,0.2)' }}
@ -383,6 +386,7 @@ export default function MapPage() {
<Button
type="primary"
shape="circle"
size={isMobile ? 'large' : 'middle'}
icon={isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
onClick={handleFullscreen}
style={{ background: 'rgba(27, 40, 56, 0.9)', borderColor: 'rgba(255,255,255,0.2)' }}

3
admin/src/types/api.ts
View File

@ -116,6 +116,7 @@ export interface Campaign {
emailBody: string;
callToAction: string | null;
coverPhoto: string | null;
coverVideoId: number | null;
status: CampaignStatus;
allowSmtpEmail: boolean;
allowMailtoLink: boolean;
@ -167,6 +168,7 @@ export interface CreateCampaignPayload {
showResponseWall?: boolean;
highlightCampaign?: boolean;
coverPhoto?: string;
coverVideoId?: number | null;
}
export interface UpdateCampaignPayload {
@ -187,6 +189,7 @@ export interface UpdateCampaignPayload {
showResponseWall?: boolean;
highlightCampaign?: boolean;
coverPhoto?: string | null;
coverVideoId?: number | null;
}
export interface CampaignsListParams {

5
api/Dockerfile
View File

@ -30,6 +30,9 @@ COPY --from=build /app/node_modules ./node_modules
COPY --from=build /app/package.json ./
COPY --from=build /app/prisma ./prisma
COPY --from=build /app/docker-entrypoint.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/docker-entrypoint.sh
RUN chmod +x /usr/local/bin/docker-entrypoint.sh \
&& mkdir -p /app/uploads && chown -R node:node /app/uploads
USER node
ENTRYPOINT ["docker-entrypoint.sh"]
CMD ["npm", "start"]

24
api/docker-entrypoint.sh
View File

@ -1,13 +1,31 @@
#!/bin/sh
set -e
echo "Running Prisma schema sync..."
npx prisma db push --skip-generate 2>&1
echo "Schema sync complete."
# Block NODE_TLS_REJECT_UNAUTHORIZED=0 in production
if [ "$NODE_ENV" = "production" ] && [ "$NODE_TLS_REJECT_UNAUTHORIZED" = "0" ]; then
echo "FATAL: NODE_TLS_REJECT_UNAUTHORIZED=0 is not allowed in production"
exit 1
fi
echo "Running Prisma migrations..."
npx prisma migrate deploy 2>&1 || {
echo "Migration failed, falling back to schema push..."
npx prisma db push --skip-generate 2>&1
}
echo "Database sync complete."
echo "Running database seed..."
npx prisma db seed 2>&1
echo "Seed complete."
# If running production mode (node dist/server.js) and dist is stale, recompile
if [ -f "src/server.ts" ] && echo "$@" | grep -q "npm.*start\|node.*dist"; then
if [ ! -f "dist/server.js" ] || [ "src/server.ts" -nt "dist/server.js" ]; then
echo "Compiling TypeScript (dist/ is missing or stale)..."
npx tsc 2>&1 || echo "WARNING: TypeScript compilation had errors"
echo "Compilation complete."
fi
fi
echo "Starting server..."
exec "$@"

1
api/prisma/schema.prisma
View File

@ -189,6 +189,7 @@ model Campaign {
emailBody String @db.Text
callToAction String? @db.Text
coverPhoto String?
coverVideoId Int?
status CampaignStatus @default(DRAFT)
// Feature flags

17
api/prisma/seed.ts
View File

@ -28,7 +28,7 @@ async function main() {
console.warn('⚠️ INITIAL_ADMIN_PASSWORD contains placeholder value');
console.warn('⚠️ Skipping admin user creation. Please set a real password in .env');
} else {
const hashedPassword = await bcrypt.hash(initialAdminPassword, 10);
const hashedPassword = await bcrypt.hash(initialAdminPassword, 12);
admin = await prisma.user.upsert({
where: { email: initialAdminEmail },
@ -311,6 +311,21 @@ async function main() {
buttonText: 'Buy Now',
},
},
{
id: 'default-campaign-form',
type: 'campaign-form',
label: 'Campaign Email Form',
category: 'Influence',
sortOrder: 13,
schema: {
campaignSlug: { type: 'string', label: 'Campaign Slug', required: true },
compact: { type: 'boolean', label: 'Compact Mode', default: false },
},
defaults: {
campaignSlug: '',
compact: false,
},
},
{
id: 'default-gancio-events',
type: 'gancio-events',

2
api/src/config/env.ts
View File

@ -29,7 +29,7 @@ const envSchema = z.object({
JWT_REFRESH_EXPIRY: z.string().default('7d'),
// Encryption (for DB-stored secrets like SMTP password; falls back to JWT_ACCESS_SECRET)
ENCRYPTION_KEY: z.string().optional(),
ENCRYPTION_KEY: z.string().min(32, 'ENCRYPTION_KEY must be at least 32 characters').optional(),
// Initial Super Admin (auto-created during database seeding)
INITIAL_ADMIN_EMAIL: z.string().email().default('admin@cmlite.org'),

8
api/src/modules/auth/auth.routes.ts
View File

@ -196,17 +196,19 @@ router.post(
const hashedPassword = await bcrypt.hash(password, 12);
// Update password, mark token used, invalidate all refresh tokens
// Update password, mark token used, invalidate all refresh tokens — all in one transaction
await prisma.$transaction(async (tx) => {
await tx.user.update({
where: { id: result.userId },
data: { password: hashedPassword },
});
await tx.refreshToken.deleteMany({ where: { userId: result.userId } });
await tx.passwordResetToken.update({
where: { token },
data: { usedAt: new Date() },
});
});
await passwordResetTokenService.markTokenUsed(token);
res.json({ message: 'Password has been reset. You can now log in with your new password.' });
} catch (err) {
next(err);

5
api/src/modules/docs-analytics/docs-analytics.routes.ts
View File

@ -13,8 +13,11 @@ const ADMIN_ROLES: UserRole[] = [UserRole.SUPER_ADMIN, UserRole.INFLUENCE_ADMIN,
export const docsAnalyticsPublicRouter = Router();
// Per-route CORS override: MkDocs runs on a different origin (root domain vs API subdomain)
import { env } from '../../config/env';
const DOCS_ORIGIN = env.ADMIN_URL || `https://docs.${env.DOMAIN}`;
docsAnalyticsPublicRouter.use((_req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Origin', DOCS_ORIGIN);
res.setHeader('Vary', 'Origin');
res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
next();

9
api/src/modules/docs/docs.routes.ts
View File

@ -1,7 +1,7 @@
import { Router, Request, Response, NextFunction } from 'express';
import multer from 'multer';
import { rm } from 'fs/promises';
import { extname } from 'path';
import { extname, basename } from 'path';
import { authenticate } from '../../middleware/auth.middleware';
import { requireNonTemp, requireRole } from '../../middleware/rbac.middleware';
import { env } from '../../config/env';
@ -172,6 +172,7 @@ const upload = multer({
// POST /api/docs/upload — upload binary file (image, pdf, etc.)
router.post(
'/upload',
requireRole('SUPER_ADMIN'),
upload.single('file'),
async (req: Request, res: Response, next: NextFunction) => {
const tempPath = req.file?.path;
@ -183,7 +184,7 @@ router.post(
}
const targetDir = (req.body as { path?: string }).path || '';
const fileName = req.file.originalname;
const fileName = basename(req.file.originalname).replace(/[^a-zA-Z0-9._-]/g, '_');
const relativePath = targetDir ? `${targetDir}/${fileName}` : fileName;
await docsFilesService.uploadFile(relativePath, req.file.path);
@ -223,6 +224,7 @@ router.get(
// POST /api/docs/files/rename — rename/move file
router.post(
'/files/rename',
requireRole('SUPER_ADMIN'),
async (req: Request, res: Response, next: NextFunction) => {
try {
cm_docs_operations.inc({ operation: 'rename' });
@ -261,6 +263,7 @@ router.get(
// PUT /api/docs/files/* — write/update file content
router.put(
'/files/*',
requireRole('SUPER_ADMIN'),
async (req: Request, res: Response, next: NextFunction) => {
try {
cm_docs_operations.inc({ operation: 'write' });
@ -285,6 +288,7 @@ router.put(
// POST /api/docs/files/* — create new file or folder
router.post(
'/files/*',
requireRole('SUPER_ADMIN'),
async (req: Request, res: Response, next: NextFunction) => {
try {
cm_docs_operations.inc({ operation: 'create' });
@ -305,6 +309,7 @@ router.post(
// DELETE /api/docs/files/* — delete file or empty folder
router.delete(
'/files/*',
requireRole('SUPER_ADMIN'),
async (req: Request, res: Response, next: NextFunction) => {
try {
cm_docs_operations.inc({ operation: 'delete' });

22
api/src/modules/email-templates/email-templates-admin.routes.ts
View File

@ -315,16 +315,26 @@ router.post(
try {
// This is a placeholder - the actual seeding is done via the script
// But we keep this endpoint for manual triggering if needed
const { exec } = require('child_process');
const { promisify } = require('util');
const execAsync = promisify(exec);
const result = await execAsync('npx tsx src/scripts/seed-email-templates.ts', {
const { spawn } = require('child_process');
const child = spawn('npx', ['tsx', 'src/scripts/seed-email-templates.ts'], {
cwd: '/app',
shell: false,
});
let exitCode = 0;
await new Promise<void>((resolve) => {
child.on('close', (code: number) => {
exitCode = code;
resolve();
});
});
if (exitCode !== 0) {
throw new Error(`Seed script exited with code ${exitCode}`);
}
logger.info('Email templates seeded via API');
res.json({ success: true, output: result.stdout });
res.json({ success: true, message: 'Templates seeded successfully' });
} catch (error) {
logger.error('Error seeding templates:', error);
res.status(500).json({ error: 'Failed to seed templates' });

26
api/src/modules/influence/campaigns/campaigns.schemas.ts
View File

@ -2,11 +2,11 @@ import { z } from 'zod';
import { CampaignStatus, CampaignModerationStatus, GovernmentLevel } from '@prisma/client';
export const createCampaignSchema = z.object({
title: z.string().min(1, 'Title is required'),
description: z.string().optional(),
emailSubject: z.string().min(1, 'Email subject is required'),
emailBody: z.string().min(1, 'Email body is required'),
callToAction: z.string().optional(),
title: z.string().min(1, 'Title is required').max(200),
description: z.string().max(2000).optional(),
emailSubject: z.string().min(1, 'Email subject is required').max(200),
emailBody: z.string().min(1, 'Email body is required').max(10000),
callToAction: z.string().max(500).optional(),
status: z.nativeEnum(CampaignStatus).optional().default(CampaignStatus.DRAFT),
targetGovernmentLevels: z.array(z.nativeEnum(GovernmentLevel)).optional().default([]),
allowSmtpEmail: z.boolean().optional().default(true),
@ -18,15 +18,16 @@ export const createCampaignSchema = z.object({
allowCustomRecipients: z.boolean().optional().default(false),
showResponseWall: z.boolean().optional().default(false),
highlightCampaign: z.boolean().optional().default(false),
coverPhoto: z.string().optional(),
coverPhoto: z.string().url().max(500).optional(),
coverVideoId: z.number().int().positive().nullable().optional(),
});
export const updateCampaignSchema = z.object({
title: z.string().min(1).optional(),
description: z.string().nullable().optional(),
emailSubject: z.string().min(1).optional(),
emailBody: z.string().min(1).optional(),
callToAction: z.string().nullable().optional(),
title: z.string().min(1).max(200).optional(),
description: z.string().max(2000).nullable().optional(),
emailSubject: z.string().min(1).max(200).optional(),
emailBody: z.string().min(1).max(10000).optional(),
callToAction: z.string().max(500).nullable().optional(),
status: z.nativeEnum(CampaignStatus).optional(),
targetGovernmentLevels: z.array(z.nativeEnum(GovernmentLevel)).optional(),
allowSmtpEmail: z.boolean().optional(),
@ -38,7 +39,8 @@ export const updateCampaignSchema = z.object({
allowCustomRecipients: z.boolean().optional(),
showResponseWall: z.boolean().optional(),
highlightCampaign: z.boolean().optional(),
coverPhoto: z.string().nullable().optional(),
coverPhoto: z.string().url().max(500).nullable().optional(),
coverVideoId: z.number().int().positive().nullable().optional(),
});
export const listCampaignsSchema = z.object({

1
api/src/modules/influence/campaigns/campaigns.service.ts
View File

@ -25,6 +25,7 @@ const campaignSelect = {
emailBody: true,
callToAction: true,
coverPhoto: true,
coverVideoId: true,
status: true,
allowSmtpEmail: true,
allowMailtoLink: true,

2
api/src/modules/influence/effectiveness/effectiveness.schemas.ts
View File

@ -1,7 +1,7 @@
import { z } from 'zod';
export const effectivenessQuerySchema = z.object({
campaignId: z.string().optional(),
campaignId: z.string().uuid().optional(),
dateFrom: z.string().datetime({ offset: true }).optional(),
dateTo: z.string().datetime({ offset: true }).optional(),
});

113
api/src/modules/influence/effectiveness/effectiveness.service.ts
View File

@ -286,27 +286,30 @@ export const effectivenessService = {
}
// For city/province grouping, we need to join with postal_code_cache
const groupCol = query.groupBy === 'province' ? 'pcc.province' : 'pcc.city';
const dateClause = dateFilter
? `AND ce."sentAt" ${dateFilter.gte ? `>= '${dateFilter.gte.toISOString()}'` : ''} ${dateFilter.lte ? `AND ce."sentAt" <= '${dateFilter.lte.toISOString()}'` : ''}`
: '';
const campaignClause = query.campaignId
? `AND ce."campaignId" = '${query.campaignId}'`
: '';
const groupCol = query.groupBy === 'province' ? Prisma.raw('pcc.province') : Prisma.raw('pcc.city');
const campaignFilter = query.campaignId
? Prisma.sql`AND ce."campaignId" = ${query.campaignId}`
: Prisma.sql``;
const dateGteFilter = dateFilter?.gte
? Prisma.sql`AND ce."sentAt" >= ${dateFilter.gte}`
: Prisma.sql``;
const dateLteFilter = dateFilter?.lte
? Prisma.sql`AND ce."sentAt" <= ${dateFilter.lte}`
: Prisma.sql``;
const rawResults = await prisma.$queryRawUnsafe<Array<{ key: string; email_count: bigint }>>(
`SELECT ${groupCol} as key, COUNT(*) as email_count
FROM campaign_emails ce
LEFT JOIN postal_code_cache pcc ON ce."userPostalCode" = pcc."postalCode"
WHERE ce."userPostalCode" IS NOT NULL
AND ${groupCol} IS NOT NULL
${campaignClause}
${dateClause}
GROUP BY ${groupCol}
ORDER BY email_count DESC
LIMIT $1`,
query.limit,
);
const rawResults = await prisma.$queryRaw<Array<{ key: string; email_count: bigint }>>`
SELECT ${groupCol} as key, COUNT(*) as email_count
FROM campaign_emails ce
LEFT JOIN postal_code_cache pcc ON ce."userPostalCode" = pcc."postalCode"
WHERE ce."userPostalCode" IS NOT NULL
AND ${groupCol} IS NOT NULL
${campaignFilter}
${dateGteFilter}
${dateLteFilter}
GROUP BY ${groupCol}
ORDER BY email_count DESC
LIMIT ${query.limit}
`;
return {
groupBy: query.groupBy,
@ -337,20 +340,23 @@ export const effectivenessService = {
if (query.campaignId) callWhere.campaignId = query.campaignId;
if (dateFilter) callWhere.calledAt = dateFilter;
// Build date clause for raw SQL
const dateClauseParts: string[] = [];
if (query.campaignId) dateClauseParts.push(`"campaignId" = '${query.campaignId}'`);
if (dateFilter?.gte) dateClauseParts.push(`"sentAt" >= '${dateFilter.gte.toISOString()}'`);
if (dateFilter?.lte) dateClauseParts.push(`"sentAt" <= '${dateFilter.lte.toISOString()}'`);
const rawWhereClause = dateClauseParts.length > 0
? `WHERE ${dateClauseParts.join(' AND ')}`
: '';
// Build parameterized conditions for unique participant count
const campaignFilter = query.campaignId
? Prisma.sql`AND "campaignId" = ${query.campaignId}`
: Prisma.sql``;
const dateGteFilter = dateFilter?.gte
? Prisma.sql`AND "sentAt" >= ${dateFilter.gte}`
: Prisma.sql``;
const dateLteFilter = dateFilter?.lte
? Prisma.sql`AND "sentAt" <= ${dateFilter.lte}`
: Prisma.sql``;
const [emailsSent, uniqueParticipants, approvedResponses, verifiedResponses, callsMade] = await Promise.all([
prisma.campaignEmail.count({ where: emailWhere }),
prisma.$queryRawUnsafe<[{ count: bigint }]>(
`SELECT COUNT(DISTINCT "userEmail") as count FROM campaign_emails ${rawWhereClause}`,
),
prisma.$queryRaw<[{ count: bigint }]>`
SELECT COUNT(DISTINCT "userEmail") as count FROM campaign_emails
WHERE 1=1 ${campaignFilter} ${dateGteFilter} ${dateLteFilter}
`,
prisma.representativeResponse.count({
where: { ...responseWhere, status: ResponseStatus.APPROVED },
}),
@ -397,32 +403,29 @@ export const effectivenessService = {
const from = dateFilter?.gte || defaultFrom;
const to = dateFilter?.lte || new Date();
const campaignClause = query.campaignId
? `AND "campaignId" = '${query.campaignId}'`
: '';
const truncFnSql = Prisma.raw(`'${truncFn}'`);
const campaignFilter = query.campaignId
? Prisma.sql`AND "campaignId" = ${query.campaignId}`
: Prisma.sql``;
const [emailTrends, responseTrends] = await Promise.all([
prisma.$queryRawUnsafe<Array<{ period: Date; count: bigint }>>(
`SELECT DATE_TRUNC('${truncFn}', "sentAt") as period, COUNT(*) as count
FROM campaign_emails
WHERE "sentAt" >= $1 AND "sentAt" <= $2
${campaignClause}
GROUP BY period
ORDER BY period ASC`,
from,
to,
),
prisma.$queryRawUnsafe<Array<{ period: Date; count: bigint }>>(
`SELECT DATE_TRUNC('${truncFn}', "createdAt") as period, COUNT(*) as count
FROM representative_responses
WHERE "createdAt" >= $1 AND "createdAt" <= $2
AND status = 'APPROVED'
${campaignClause}
GROUP BY period
ORDER BY period ASC`,
from,
to,
),
prisma.$queryRaw<Array<{ period: Date; count: bigint }>>`
SELECT DATE_TRUNC(${truncFnSql}, "sentAt") as period, COUNT(*) as count
FROM campaign_emails
WHERE "sentAt" >= ${from} AND "sentAt" <= ${to}
${campaignFilter}
GROUP BY period
ORDER BY period ASC
`,
prisma.$queryRaw<Array<{ period: Date; count: bigint }>>`
SELECT DATE_TRUNC(${truncFnSql}, "createdAt") as period, COUNT(*) as count
FROM representative_responses
WHERE "createdAt" >= ${from} AND "createdAt" <= ${to}
AND status = 'APPROVED'
${campaignFilter}
GROUP BY period
ORDER BY period ASC
`,
]);
// Merge into a single series with both email and response counts

10
api/src/modules/influence/responses/responses.schemas.ts
View File

@ -2,14 +2,14 @@ import { z } from 'zod';
import { GovernmentLevel, ResponseType, ResponseStatus } from '@prisma/client';
export const submitResponseSchema = z.object({
representativeName: z.string().min(1, 'Representative name is required'),
representativeName: z.string().min(1, 'Representative name is required').max(200),
representativeLevel: z.nativeEnum(GovernmentLevel),
responseType: z.nativeEnum(ResponseType),
responseText: z.string().min(1, 'Response text is required'),
representativeTitle: z.string().optional(),
responseText: z.string().min(1, 'Response text is required').max(5000),
representativeTitle: z.string().max(200).optional(),
representativeEmail: z.string().email().optional(),
userComment: z.string().optional(),
submittedByName: z.string().optional(),
userComment: z.string().max(1000).optional(),
submittedByName: z.string().max(200).optional(),
submittedByEmail: z.string().email().optional(),
isAnonymous: z.boolean().optional().default(false),
sendVerification: z.boolean().optional().default(false),

4
api/src/modules/media/routes/comments.routes.ts
View File

@ -152,8 +152,8 @@ export async function commentsRoutes(fastify: FastifyInstance) {
},
});
// Rate limiting check
const rateLimitKey = userId || sessionId;
// Rate limiting check — use IP for anonymous users to prevent header-based bypass
const rateLimitKey = userId || `ip:${request.ip}`;
const now = Date.now();
const timestamps = commentRateLimitMap.get(rateLimitKey) || [];
const recentTimestamps = timestamps.filter(

13
api/src/modules/media/routes/user-profile.routes.ts
View File

@ -380,12 +380,15 @@ export async function userProfileRoutes(fastify: FastifyInstance) {
return reply.code(401).send({ message: 'Current password is incorrect' });
}
// Hash and save new password
// Hash and save new password, invalidate all sessions
const hashedPassword = await bcrypt.hash(newPassword, 12);
await prisma.user.update({
where: { id: userId },
data: { password: hashedPassword },
});
await prisma.$transaction([
prisma.user.update({
where: { id: userId },
data: { password: hashedPassword },
}),
prisma.refreshToken.deleteMany({ where: { userId } }),
]);
return reply.send({ message: 'Password updated successfully' });
}

42
api/src/modules/media/routes/video-actions.routes.ts
View File

@ -6,7 +6,7 @@ import { logger } from '../../../utils/logger';
import { sign } from 'jsonwebtoken';
import { env } from '../../../config/env';
import { copyFile } from 'fs/promises';
import { join, dirname, basename, extname } from 'path';
import { join, dirname, basename, extname, normalize } from 'path';
import { z } from 'zod';
const UpdateVideoSchema = z.object({
@ -149,16 +149,18 @@ export async function videoActionsRoutes(fastify: FastifyInstance) {
* Replace video file while keeping metadata and URL
* Note: This endpoint accepts a new file path - actual file upload should go through upload routes
*/
const ReplaceVideoSchema = z.object({
newPath: z.string().min(1).max(500),
newFilename: z.string().min(1).max(255),
durationSeconds: z.number().optional(),
width: z.number().int().optional(),
height: z.number().int().optional(),
fileSize: z.number().optional(),
});
fastify.post<{
Params: { id: string };
Body: {
newPath: string;
newFilename: string;
durationSeconds?: number;
width?: number;
height?: number;
fileSize?: number;
};
Body: z.infer<typeof ReplaceVideoSchema>;
}>(
'/:id/replace',
{
@ -166,7 +168,23 @@ export async function videoActionsRoutes(fastify: FastifyInstance) {
},
async (request, reply) => {
const videoId = parseInt(request.params.id);
const { newPath, newFilename, durationSeconds, width, height, fileSize } = request.body;
// Validate input with Zod
const parseResult = ReplaceVideoSchema.safeParse(request.body);
if (!parseResult.success) {
return reply.code(400).send({ message: 'Invalid input' });
}
const { newPath, newFilename, durationSeconds, width, height, fileSize } = parseResult.data;
// Path traversal protection
if (newPath.includes('\0') || newFilename.includes('\0')) {
return reply.code(400).send({ message: 'Invalid file path' });
}
const normalizedPath = normalize(newPath);
if (normalizedPath.includes('..') || normalizedPath.startsWith('/') || normalizedPath.startsWith('\\')) {
return reply.code(400).send({ message: 'Invalid file path: must be relative with no traversal' });
}
const sanitizedFilename = basename(newFilename);
try {
const existingVideo = await prisma.video.findUnique({
@ -181,8 +199,8 @@ export async function videoActionsRoutes(fastify: FastifyInstance) {
const updatedVideo = await prisma.video.update({
where: { id: videoId },
data: {
path: newPath,
filename: newFilename,
path: normalizedPath,
filename: sanitizedFilename,
originalPath: existingVideo.path, // Save old path for reference
originalFilename: existingVideo.filename,
durationSeconds: durationSeconds || existingVideo.durationSeconds,

29
api/src/modules/pages/pages-admin.routes.ts
View File

@ -5,6 +5,7 @@ import { createLandingPageSchema, updateLandingPageSchema, listLandingPagesSchem
import { validate } from '../../middleware/validate';
import { authenticate } from '../../middleware/auth.middleware';
import { requireRole } from '../../middleware/rbac.middleware';
import { prisma } from '../../config/database';
const ADMIN_ROLES: UserRole[] = [UserRole.SUPER_ADMIN, UserRole.INFLUENCE_ADMIN, UserRole.MAP_ADMIN];
@ -13,6 +14,34 @@ const router = Router();
router.use(authenticate);
router.use(requireRole(...ADMIN_ROLES));
// GET /api/pages/view-counts — landing page view counts (last 30d)
router.get(
'/view-counts',
async (_req: Request, res: Response, next: NextFunction) => {
try {
const since = new Date();
since.setDate(since.getDate() - 30);
const rows = await prisma.docsPageView.groupBy({
by: ['path'],
where: {
path: { startsWith: '/p/' },
createdAt: { gte: since },
},
_count: { id: true },
});
const counts: Record<string, number> = {};
for (const row of rows) {
// Extract slug from /p/:slug
const slug = row.path.replace(/^\/p\//, '');
counts[slug] = row._count.id;
}
res.json(counts);
} catch (err) {
next(err);
}
}
);
// POST /api/pages/sync — sync MkDocs overrides (must be before /:id routes)
router.post(
'/sync',

25
api/src/modules/pangolin/pangolin.routes.ts
View File

@ -1,4 +1,5 @@
import { Router, type Request, type Response } from 'express';
import { z } from 'zod';
import rateLimit from 'express-rate-limit';
import RedisStore from 'rate-limit-redis';
import { readFileSync } from 'fs';
@ -954,10 +955,24 @@ router.post('/test-2step', pangolinSetupLimiter, async (req: Request, res: Respo
});
// PUT /api/pangolin/resource/:id — Update a resource
const updateResourceSchema = z.object({
name: z.string().max(200).optional(),
subdomain: z.string().max(200).optional(),
ssl: z.boolean().optional(),
blockAccess: z.boolean().optional(),
proxyPort: z.number().int().optional(),
protocol: z.string().max(20).optional(),
domainId: z.string().max(200).optional(),
isBaseDomain: z.boolean().optional(),
http: z.boolean().optional(),
https: z.boolean().optional(),
}).passthrough();
router.put('/resource/:id', async (req: Request, res: Response) => {
try {
const resourceId = req.params.id as string;
const resource = await pangolinClient.updateResource(resourceId, req.body);
const body = updateResourceSchema.parse(req.body);
const resource = await pangolinClient.updateResource(resourceId, body);
res.json({ success: true, resource });
} catch (err) {
const msg = err instanceof Error ? err.message : 'Unknown error';
@ -979,10 +994,16 @@ router.get('/certificate/:domainId/:domain', async (req: Request, res: Response)
});
// POST /api/pangolin/certificate/:certId — Update certificate
const updateCertificateSchema = z.object({
autoRenew: z.boolean().optional(),
isWildcard: z.boolean().optional(),
}).passthrough();
router.post('/certificate/:certId', async (req: Request, res: Response) => {
try {
const certId = req.params.certId as string;
const certificate = await pangolinClient.updateCertificate(certId, req.body);
const body = updateCertificateSchema.parse(req.body);
const certificate = await pangolinClient.updateCertificate(certId, body);
res.json({ success: true, certificate });
} catch (err) {
const msg = err instanceof Error ? err.message : 'Unknown error';

34
api/src/modules/payments/webhook.service.ts
View File

@ -3,6 +3,7 @@ import { prisma } from '../../config/database';
import { getStripe, getWebhookSecret } from '../../services/stripe.client';
import { logger } from '../../utils/logger';
import { paymentEmailService } from './payment-email.service';
import { listmonkEventSyncService } from '../../services/listmonk-event-sync.service';
// Helper to extract subscription ID from invoice (may be string, object, or missing in newer types)
function getSubscriptionId(invoice: Stripe.Invoice): string | null {
@ -130,6 +131,18 @@ export const webhookService = {
stripeSubscriptionId: subscriptionId,
currentPeriodEnd,
});
// Sync to Listmonk Subscribers list (fire-and-forget)
const subUser = await prisma.user.findUnique({ where: { id: userId }, select: { email: true, name: true } });
const plan = await prisma.subscriptionPlan.findUnique({ where: { id: parseInt(planId, 10) }, select: { name: true } });
if (subUser) {
listmonkEventSyncService.onSubscriptionActivated({
email: subUser.email,
name: subUser.name || '',
planName: plan?.name || `Plan ${planId}`,
subscriptionId,
}).catch(() => {});
}
},
async handleProductCheckout(session: Stripe.Checkout.Session) {
@ -185,6 +198,17 @@ export const webhookService = {
completedAt: updatedOrder.completedAt,
product: updatedOrder.product,
});
// Sync to Listmonk Donors list (fire-and-forget)
if (updatedOrder.buyerEmail) {
listmonkEventSyncService.onProductPurchased({
email: updatedOrder.buyerEmail,
name: updatedOrder.buyerName || '',
productTitle: updatedOrder.product?.title || 'Product',
amountCents: updatedOrder.amountCAD,
orderId: updatedOrder.id,
}).catch(() => {});
}
}
},
@ -228,6 +252,16 @@ export const webhookService = {
isAnonymous: order.isAnonymous,
completedAt: new Date(),
});
// Sync to Listmonk Donors list (fire-and-forget)
if (order.buyerEmail) {
listmonkEventSyncService.onDonationCompleted({
email: order.buyerEmail,
name: order.buyerName || '',
amountCents: order.amountCAD,
orderId: order.id,
}).catch(() => {});
}
},
async handleInvoicePaid(invoice: Stripe.Invoice) {

6
api/src/modules/users/users.service.ts
View File

@ -145,6 +145,12 @@ export const usersService = {
select: userSelect,
});
// Invalidate sessions when user is deactivated
const deactivatedStatuses = ['INACTIVE', 'PENDING_APPROVAL', 'PENDING_VERIFICATION'];
if (data.status && deactivatedStatuses.includes(data.status)) {
await prisma.refreshToken.deleteMany({ where: { userId: id } });
}
return user;
},

2
api/src/modules/volunteer-invite/volunteer-invite.service.ts
View File

@ -84,7 +84,7 @@ export const volunteerInviteService = {
// 4. Create new TEMP user with random password (never shown to user)
const randomPassword = crypto.randomBytes(16).toString('hex');
const hashedPassword = await bcrypt.hash(randomPassword, 10);
const hashedPassword = await bcrypt.hash(randomPassword, 12);
const newUser = await prisma.user.create({
data: {

14
api/src/server.ts
View File

@ -8,6 +8,8 @@ import { prisma } from './config/database';
import { redis } from './config/redis';
import { register, httpRequestDuration, httpRequestsTotal } from './utils/metrics';
import { errorHandler } from './middleware/error-handler';
import { authenticate } from './middleware/auth.middleware';
import { requireRole } from './middleware/rbac.middleware';
import { globalRateLimit, healthMetricsRateLimit } from './middleware/rate-limit';
import { authRouter } from './modules/auth/auth.routes';
import { usersRouter } from './modules/users/users.routes';
@ -139,8 +141,8 @@ app.get('/api/health', healthMetricsRateLimit, async (_req, res) => {
res.status(healthy ? 200 : 503).json({ status: healthy ? 'healthy' : 'degraded', checks });
});
// --- Metrics Endpoint ---
app.get('/api/metrics', healthMetricsRateLimit, async (_req, res) => {
// --- Metrics Endpoint (authenticated - SUPER_ADMIN only) ---
app.get('/api/metrics', authenticate, requireRole('SUPER_ADMIN'), healthMetricsRateLimit, async (_req, res) => {
res.set('Content-Type', register.contentType);
res.end(await register.metrics());
});
@ -214,8 +216,16 @@ async function start() {
if (env.NODE_ENV === 'production' && !env.ENCRYPTION_KEY) {
throw new Error('ENCRYPTION_KEY must be set in production (do not reuse JWT_ACCESS_SECRET)');
}
if (!env.ENCRYPTION_KEY) {
logger.warn('ENCRYPTION_KEY not set — falling back to JWT_ACCESS_SECRET for encryption. Set ENCRYPTION_KEY in production.');
}
initEncryption(env.ENCRYPTION_KEY || env.JWT_ACCESS_SECRET);
// Warn if Listmonk sync is enabled but webhook secret is not configured
if (env.LISTMONK_SYNC_ENABLED === 'true' && !env.LISTMONK_WEBHOOK_SECRET) {
logger.warn('LISTMONK_SYNC_ENABLED is true but LISTMONK_WEBHOOK_SECRET is not set. Unsubscribe events from Listmonk will not be processed.');
}
// Rebuild SMTP transporter from DB settings (env fallback for empty fields)
await emailService.rebuildTransporter();

107
api/src/services/listmonk-event-sync.service.ts
View File

@ -137,6 +137,113 @@ class ListmonkEventSyncService {
}
}
/**
* Sync an activated subscription to Listmonk "All Contacts" + "Subscribers" lists.
*/
async onSubscriptionActivated(data: {
email: string;
name: string;
planName: string;
subscriptionId: string;
}): Promise<void> {
if (!this.enabled) return;
try {
await listmonkSyncService.ensureInitialized();
const allContactsId = listmonkSyncService.getListId('All Contacts');
const subscribersId = listmonkSyncService.getListId('Subscribers');
if (!allContactsId || !subscribersId) return;
await listmonkClient.upsertSubscriber(
data.email,
data.name,
[allContactsId, subscribersId],
{
source: 'subscription',
plan_name: data.planName,
subscription_id: data.subscriptionId,
last_synced: new Date().toISOString(),
},
);
this.incrementCounter();
logger.debug(`Listmonk event sync: subscription activated for ${data.email}`);
} catch (err) {
logger.debug('Listmonk event sync failed (onSubscriptionActivated):', err);
}
}
/**
* Sync a completed donation to Listmonk "All Contacts" + "Donors" lists.
*/
async onDonationCompleted(data: {
email: string;
name: string;
amountCents: number;
orderId: string;
}): Promise<void> {
if (!this.enabled) return;
try {
await listmonkSyncService.ensureInitialized();
const allContactsId = listmonkSyncService.getListId('All Contacts');
const donorsId = listmonkSyncService.getListId('Donors');
if (!allContactsId || !donorsId) return;
await listmonkClient.upsertSubscriber(
data.email,
data.name,
[allContactsId, donorsId],
{
source: 'donation',
last_donation_amount: data.amountCents,
last_order_id: data.orderId,
last_synced: new Date().toISOString(),
},
);
this.incrementCounter();
logger.debug(`Listmonk event sync: donation completed for ${data.email}`);
} catch (err) {
logger.debug('Listmonk event sync failed (onDonationCompleted):', err);
}
}
/**
* Sync a product purchase to Listmonk "All Contacts" + "Donors" lists.
*/
async onProductPurchased(data: {
email: string;
name: string;
productTitle: string;
amountCents: number;
orderId: string;
}): Promise<void> {
if (!this.enabled) return;
try {
await listmonkSyncService.ensureInitialized();
const allContactsId = listmonkSyncService.getListId('All Contacts');
const donorsId = listmonkSyncService.getListId('Donors');
if (!allContactsId || !donorsId) return;
await listmonkClient.upsertSubscriber(
data.email,
data.name,
[allContactsId, donorsId],
{
source: 'product_purchase',
last_product: data.productTitle,
last_purchase_amount: data.amountCents,
last_order_id: data.orderId,
last_synced: new Date().toISOString(),
},
);
this.incrementCounter();
logger.debug(`Listmonk event sync: product purchased for ${data.email}`);
} catch (err) {
logger.debug('Listmonk event sync failed (onProductPurchased):', err);
}
}
getStats(): {
enabled: boolean;
lastSyncAt: string | null;

2
api/src/services/listmonk-sync.service.ts
View File

@ -17,6 +17,8 @@ const LIST_DEFINITIONS: Array<{ name: string; tags: string[] }> = [
{ name: 'Users', tags: ['v2', 'users'] },
{ name: 'Volunteers', tags: ['v2', 'map', 'shifts'] },
{ name: 'Canvassers', tags: ['v2', 'map', 'canvass'] },
{ name: 'Subscribers', tags: ['v2', 'payments'] },
{ name: 'Donors', tags: ['v2', 'payments'] },
];
const SUPPORT_LEVEL_LIST_MAP: Record<string, string> = {

3
api/src/services/listmonk.client.ts
View File

@ -131,7 +131,8 @@ class ListmonkClient {
async findSubscriberByEmail(email: string): Promise<ListmonkSubscriber | null> {
this.assertEnabled();
try {
const query = encodeURIComponent(`subscribers.email='${email}'`);
const safeEmail = email.replace(/'/g, "''");
const query = encodeURIComponent(`subscribers.email='${safeEmail}'`);
const res = await this.request<{ data: { results: ListmonkSubscriber[] } }>(
'GET',
`/api/subscribers?query=${query}&per_page=1`,

1
changemaker-control-panel Submodule

@ -0,0 +1 @@
Subproject commit d4cd2d2cd5d2dd33d49c7d6feaed975741e0925a

68
docker-compose.yml
View File

@ -11,7 +11,7 @@ services:
api:
build:
context: ./api
target: development
target: ${BUILD_TARGET:-development}
container_name: changemaker-v2-api
restart: unless-stopped
ports:
@ -59,7 +59,7 @@ services:
- PANGOLIN_ENDPOINT=${PANGOLIN_ENDPOINT:-}
- PANGOLIN_NEWT_ID=${PANGOLIN_NEWT_ID:-}
- PANGOLIN_NEWT_SECRET=${PANGOLIN_NEWT_SECRET:-}
- NODE_TLS_REJECT_UNAUTHORIZED=${NODE_TLS_REJECT_UNAUTHORIZED:-}
# NODE_TLS_REJECT_UNAUTHORIZED removed — never disable TLS validation globally
- EXCALIDRAW_URL=${EXCALIDRAW_URL:-http://excalidraw-changemaker:80}
- EXCALIDRAW_PORT=${EXCALIDRAW_PORT:-8090}
- EXCALIDRAW_EMBED_PORT=${EXCALIDRAW_EMBED_PORT:-8886}
@ -84,7 +84,15 @@ services:
- ./mkdocs:/mkdocs:rw
- ./data:/data:ro
- ./configs:/app/configs:ro
- /var/run/docker.sock:/var/run/docker.sock
# Docker socket access removed for security — use docker-socket-proxy if container info needed
deploy:
resources:
limits:
cpus: '2'
memory: 1G
reservations:
cpus: '0.25'
memory: 256M
depends_on:
v2-postgres:
condition: service_healthy
@ -98,7 +106,7 @@ services:
build:
context: ./api
dockerfile: Dockerfile.media
target: development
target: ${BUILD_TARGET:-development}
container_name: changemaker-media-api
restart: unless-stopped
ports:
@ -129,6 +137,14 @@ services:
- ${MEDIA_ROOT:-./media}/local/thumbnails:/media/local/thumbnails:rw
- ${MEDIA_ROOT:-./media}/local/photos:/media/local/photos:rw
- ${MEDIA_ROOT:-./media}/public:/media/public:rw
deploy:
resources:
limits:
cpus: '2'
memory: 1G
reservations:
cpus: '0.25'
memory: 256M
depends_on:
v2-postgres:
condition: service_healthy
@ -139,7 +155,7 @@ services:
admin:
build:
context: ./admin
target: development
target: ${BUILD_TARGET:-development}
container_name: changemaker-v2-admin
restart: unless-stopped
ports:
@ -240,7 +256,7 @@ services:
environment:
NC_DB: "pg://changemaker-v2-postgres:5432?u=${V2_POSTGRES_USER:-changemaker}&p=${V2_POSTGRES_PASSWORD:-changemaker}&d=nocodb_meta"
NC_ADMIN_EMAIL: ${NC_ADMIN_EMAIL:-admin@cmlite.org}
NC_ADMIN_PASSWORD: ${NC_ADMIN_PASSWORD:-admin123}
NC_ADMIN_PASSWORD: ${NC_ADMIN_PASSWORD:?NC_ADMIN_PASSWORD must be set in .env}
NC_PUBLIC_URL: ${NC_PUBLIC_URL:-http://localhost:8091}
volumes:
- nocodb-v2-data:/usr/app/data
@ -260,7 +276,7 @@ services:
container_name: redis-changemaker
command: redis-server --appendonly yes --maxmemory 512mb --maxmemory-policy allkeys-lru --requirepass "${REDIS_PASSWORD}"
ports:
- "6379:6379"
- "127.0.0.1:6379:6379"
volumes:
- redis-data:/data
restart: always
@ -492,10 +508,10 @@ services:
- NODE_ENV=production
- WEBHOOK_URL=https://${N8N_HOST:-n8n.cmlite.org}/
- GENERIC_TIMEZONE=${GENERIC_TIMEZONE:-UTC}
- N8N_ENCRYPTION_KEY=${N8N_ENCRYPTION_KEY:-changeMe}
- N8N_ENCRYPTION_KEY=${N8N_ENCRYPTION_KEY:?N8N_ENCRYPTION_KEY must be set in .env}
- N8N_USER_MANAGEMENT_DISABLED=false
- N8N_DEFAULT_USER_EMAIL=${N8N_USER_EMAIL:-admin@example.com}
- N8N_DEFAULT_USER_PASSWORD=${N8N_USER_PASSWORD:-changeMe}
- N8N_DEFAULT_USER_PASSWORD=${N8N_USER_PASSWORD:?N8N_USER_PASSWORD must be set in .env}
volumes:
- n8n-data:/home/node/.n8n
- ./local-files:/files
@ -512,7 +528,7 @@ services:
- ./configs/homepage:/app/config
- ./assets/icons:/app/public/icons
- ./assets/images:/app/public/images
- /var/run/docker.sock:/var/run/docker.sock
# Docker socket access removed for security — configure homepage widgets via config files instead
environment:
- PUID=${USER_ID:-1000}
- PGID=${DOCKER_GROUP_ID:-984}
@ -728,7 +744,7 @@ services:
- ADMIN_USERNAME=${ROCKETCHAT_ADMIN_USER:-rcadmin}
- ADMIN_NAME=Admin
- ADMIN_EMAIL=${INITIAL_ADMIN_EMAIL:-admin@cmlite.org}
- ADMIN_PASS=${ROCKETCHAT_ADMIN_PASSWORD:-changeme}
- ADMIN_PASS=${ROCKETCHAT_ADMIN_PASSWORD:?ROCKETCHAT_ADMIN_PASSWORD must be set in .env}
- CREATE_TOKENS_FOR_USERS=true
- OVERWRITE_SETTING_Iframe_Integration_send_enable=true
- OVERWRITE_SETTING_Iframe_Integration_receive_enable=true
@ -801,6 +817,32 @@ services:
networks:
- changemaker-lite
# Gancio Init — Seeds default theme settings after Gancio creates its tables
# Runs once after Gancio is healthy, then exits. Idempotent (ON CONFLICT DO NOTHING).
gancio-init:
image: postgres:16-alpine
container_name: gancio-init
depends_on:
gancio:
condition: service_healthy
environment:
- PGHOST=changemaker-v2-postgres
- PGUSER=${V2_POSTGRES_USER:-changemaker}
- PGPASSWORD=${V2_POSTGRES_PASSWORD:-changemaker}
- PGDATABASE=gancio
entrypoint: ["sh", "-c"]
command:
- |
echo "Seeding Gancio default theme settings..."
psql -c "INSERT INTO settings (key, value, is_secret, \"createdAt\", \"updatedAt\") VALUES
('dark_colors', '{\"primary\": \"#FF6E40\", \"error\": \"#FF5252\", \"info\": \"#2196F3\", \"success\": \"#4CAF50\", \"warning\": \"#FB8C00\"}', false, NOW(), NOW()),
('light_colors', '{\"primary\": \"#FF4500\", \"error\": \"#FF5252\", \"info\": \"#2196F3\", \"success\": \"#4CAF50\", \"warning\": \"#FB8C00\"}', false, NOW(), NOW())
ON CONFLICT (key) DO NOTHING;"
echo "Gancio theme settings seeded."
restart: "no"
networks:
- changemaker-lite
# MailHog — Email testing (dev)
mailhog:
image: mailhog/mailhog:latest
@ -863,7 +905,7 @@ services:
ports:
- "${GRAFANA_PORT:-3001}:3000"
environment:
- GF_SECURITY_ADMIN_PASSWORD=${GRAFANA_ADMIN_PASSWORD:-admin}
- GF_SECURITY_ADMIN_PASSWORD=${GRAFANA_ADMIN_PASSWORD:?GRAFANA_ADMIN_PASSWORD must be set in .env}
- GF_USERS_ALLOW_SIGN_UP=false
- GF_SERVER_ROOT_URL=${GRAFANA_ROOT_URL:-http://localhost:3001}
- GF_SECURITY_ALLOW_EMBEDDING=true
@ -958,7 +1000,7 @@ services:
- "${GOTIFY_PORT:-8889}:80"
environment:
- GOTIFY_DEFAULTUSER_NAME=${GOTIFY_ADMIN_USER:-admin}
- GOTIFY_DEFAULTUSER_PASS=${GOTIFY_ADMIN_PASSWORD:-admin}
- GOTIFY_DEFAULTUSER_PASS=${GOTIFY_ADMIN_PASSWORD:?GOTIFY_ADMIN_PASSWORD must be set in .env}
- TZ=Etc/UTC
volumes:
- gotify-data:/app/data

5
mkdocs/docs/overrides/lander.html
View File

@ -1430,8 +1430,8 @@
.hero { min-height: auto; padding-top: calc(var(--header-height) + 2rem); padding-bottom: 3rem; }
.hero h1 { font-size: 2rem; }
.hero-root-glow { width: 300px; height: 300px; top: auto; bottom: 0; }
.hero-root-svg { top: auto; bottom: 0; transform: translate(-50%, 20%); }
.hero-root-glow { width: 250px; height: 250px; top: 50%; bottom: auto; }
.hero-root-svg { top: 50%; bottom: auto; transform: translate(-50%, -50%); width: 250px; height: 250px; }
.hero-stats {
grid-template-columns: repeat(2, 1fr);
@ -1449,7 +1449,6 @@
.branch { padding-left: 0; }
.root-network-svg { display: none; }
.floating-elements { display: none; }
.hero-root-svg { width: 300px; height: 300px; }
.sites-grid {
grid-template-columns: 1fr;

2
nginx/nginx.conf
View File

@ -16,6 +16,8 @@ http {
access_log /var/log/nginx/access.log main;
server_tokens off;
sendfile on;
tcp_nopush on;
tcp_nodelay on;