feat: add Reports tab to site settings with schedule CRUD
This commit is contained in:
Usman Baig
@@ -4,6 +4,7 @@ import { useEffect, useState, useRef } from 'react'
|
||||
import { useParams, useRouter } from 'next/navigation'
|
||||
import { getSite, updateSite, resetSiteData, deleteSite, type Site, type GeoDataLevel } from '@/lib/api/sites'
|
||||
import { listGoals, createGoal, updateGoal, deleteGoal, type Goal } from '@/lib/api/goals'
|
||||
import { listReportSchedules, createReportSchedule, updateReportSchedule, deleteReportSchedule, testReportSchedule, type ReportSchedule, type CreateReportScheduleRequest, type EmailConfig, type WebhookConfig } from '@/lib/api/report-schedules'
|
||||
import { toast } from '@ciphera-net/ui'
|
||||
import { getAuthErrorMessage } from '@ciphera-net/ui'
|
||||
import { SettingsFormSkeleton, GoalsListSkeleton, useMinimumLoading } from '@/components/skeletons'
|
||||
@@ -25,6 +26,7 @@ import {
|
||||
AlertTriangleIcon,
|
||||
ZapIcon,
|
||||
} from '@ciphera-net/ui'
|
||||
import { PaperPlaneTilt, Envelope, WebhooksLogo, SpinnerGap, Trash, PencilSimple, Play } from '@phosphor-icons/react'
|
||||
|
||||
const TIMEZONES = [
|
||||
'UTC',
|
||||
@@ -54,7 +56,7 @@ export default function SiteSettingsPage() {
|
||||
const [site, setSite] = useState<Site | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'goals'>('general')
|
||||
const [activeTab, setActiveTab] = useState<'general' | 'visibility' | 'data' | 'goals' | 'reports'>('general')
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
@@ -91,6 +93,22 @@ export default function SiteSettingsPage() {
|
||||
const [goalSaving, setGoalSaving] = useState(false)
|
||||
const initialFormRef = useRef<string>('')
|
||||
|
||||
// Report schedules state
|
||||
const [reportSchedules, setReportSchedules] = useState<ReportSchedule[]>([])
|
||||
const [reportLoading, setReportLoading] = useState(false)
|
||||
const [reportModalOpen, setReportModalOpen] = useState(false)
|
||||
const [editingSchedule, setEditingSchedule] = useState<ReportSchedule | null>(null)
|
||||
const [reportSaving, setReportSaving] = useState(false)
|
||||
const [reportTesting, setReportTesting] = useState<string | null>(null)
|
||||
const [reportForm, setReportForm] = useState({
|
||||
channel: 'email' as string,
|
||||
recipients: '',
|
||||
webhookUrl: '',
|
||||
frequency: 'weekly' as string,
|
||||
reportType: 'summary' as string,
|
||||
timezone: '',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
loadSite()
|
||||
loadSubscription()
|
||||
@@ -102,6 +120,12 @@ export default function SiteSettingsPage() {
|
||||
}
|
||||
}, [activeTab, siteId])
|
||||
|
||||
useEffect(() => {
|
||||
if (activeTab === 'reports' && siteId) {
|
||||
loadReportSchedules()
|
||||
}
|
||||
}, [activeTab, siteId])
|
||||
|
||||
const loadSubscription = async () => {
|
||||
try {
|
||||
setSubscriptionLoadFailed(false)
|
||||
@@ -191,6 +215,150 @@ export default function SiteSettingsPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const loadReportSchedules = async () => {
|
||||
try {
|
||||
setReportLoading(true)
|
||||
const data = await listReportSchedules(siteId)
|
||||
setReportSchedules(data)
|
||||
} catch (error: unknown) {
|
||||
toast.error(getAuthErrorMessage(error) || 'Failed to load report schedules')
|
||||
} finally {
|
||||
setReportLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const resetReportForm = () => {
|
||||
setReportForm({
|
||||
channel: 'email',
|
||||
recipients: '',
|
||||
webhookUrl: '',
|
||||
frequency: 'weekly',
|
||||
reportType: 'summary',
|
||||
timezone: site?.timezone || '',
|
||||
})
|
||||
}
|
||||
|
||||
const openEditSchedule = (schedule: ReportSchedule) => {
|
||||
setEditingSchedule(schedule)
|
||||
const isEmail = schedule.channel === 'email'
|
||||
setReportForm({
|
||||
channel: schedule.channel,
|
||||
recipients: isEmail ? (schedule.channel_config as EmailConfig).recipients.join(', ') : '',
|
||||
webhookUrl: !isEmail ? (schedule.channel_config as WebhookConfig).url : '',
|
||||
frequency: schedule.frequency,
|
||||
reportType: schedule.report_type,
|
||||
timezone: schedule.timezone || site?.timezone || '',
|
||||
})
|
||||
setReportModalOpen(true)
|
||||
}
|
||||
|
||||
const handleReportSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
|
||||
let channelConfig: EmailConfig | WebhookConfig
|
||||
if (reportForm.channel === 'email') {
|
||||
const recipients = reportForm.recipients.split(',').map(r => r.trim()).filter(r => r.length > 0)
|
||||
if (recipients.length === 0) {
|
||||
toast.error('At least one recipient email is required')
|
||||
return
|
||||
}
|
||||
channelConfig = { recipients }
|
||||
} else {
|
||||
if (!reportForm.webhookUrl.trim()) {
|
||||
toast.error('Webhook URL is required')
|
||||
return
|
||||
}
|
||||
channelConfig = { url: reportForm.webhookUrl.trim() }
|
||||
}
|
||||
|
||||
const payload: CreateReportScheduleRequest = {
|
||||
channel: reportForm.channel,
|
||||
channel_config: channelConfig,
|
||||
frequency: reportForm.frequency,
|
||||
timezone: reportForm.timezone || undefined,
|
||||
report_type: reportForm.reportType,
|
||||
}
|
||||
|
||||
setReportSaving(true)
|
||||
try {
|
||||
if (editingSchedule) {
|
||||
await updateReportSchedule(siteId, editingSchedule.id, payload)
|
||||
toast.success('Report schedule updated')
|
||||
} else {
|
||||
await createReportSchedule(siteId, payload)
|
||||
toast.success('Report schedule created')
|
||||
}
|
||||
setReportModalOpen(false)
|
||||
loadReportSchedules()
|
||||
} catch (error: unknown) {
|
||||
toast.error(getAuthErrorMessage(error) || 'Failed to save report schedule')
|
||||
} finally {
|
||||
setReportSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleReportDelete = async (schedule: ReportSchedule) => {
|
||||
if (!confirm('Delete this report schedule?')) return
|
||||
try {
|
||||
await deleteReportSchedule(siteId, schedule.id)
|
||||
toast.success('Report schedule deleted')
|
||||
loadReportSchedules()
|
||||
} catch (error: unknown) {
|
||||
toast.error(getAuthErrorMessage(error) || 'Failed to delete report schedule')
|
||||
}
|
||||
}
|
||||
|
||||
const handleReportToggle = async (schedule: ReportSchedule) => {
|
||||
try {
|
||||
await updateReportSchedule(siteId, schedule.id, { enabled: !schedule.enabled })
|
||||
toast.success(schedule.enabled ? 'Report paused' : 'Report enabled')
|
||||
loadReportSchedules()
|
||||
} catch (error: unknown) {
|
||||
toast.error(getAuthErrorMessage(error) || 'Failed to update report schedule')
|
||||
}
|
||||
}
|
||||
|
||||
const handleReportTest = async (schedule: ReportSchedule) => {
|
||||
setReportTesting(schedule.id)
|
||||
try {
|
||||
await testReportSchedule(siteId, schedule.id)
|
||||
toast.success('Test report sent successfully')
|
||||
} catch (error: unknown) {
|
||||
toast.error(getAuthErrorMessage(error) || 'Failed to send test report')
|
||||
} finally {
|
||||
setReportTesting(null)
|
||||
}
|
||||
}
|
||||
|
||||
const getChannelLabel = (channel: string) => {
|
||||
switch (channel) {
|
||||
case 'email': return 'Email'
|
||||
case 'slack': return 'Slack'
|
||||
case 'discord': return 'Discord'
|
||||
case 'webhook': return 'Webhook'
|
||||
default: return channel
|
||||
}
|
||||
}
|
||||
|
||||
const getFrequencyLabel = (frequency: string) => {
|
||||
switch (frequency) {
|
||||
case 'daily': return 'Daily'
|
||||
case 'weekly': return 'Weekly'
|
||||
case 'monthly': return 'Monthly'
|
||||
default: return frequency
|
||||
}
|
||||
}
|
||||
|
||||
const getReportTypeLabel = (type: string) => {
|
||||
switch (type) {
|
||||
case 'summary': return 'Summary'
|
||||
case 'pages': return 'Pages'
|
||||
case 'sources': return 'Sources'
|
||||
case 'goals': return 'Goals'
|
||||
default: return type
|
||||
}
|
||||
}
|
||||
|
||||
const openAddGoal = () => {
|
||||
setEditingGoal(null)
|
||||
setGoalForm({ name: '', event_name: '' })
|
||||
@@ -389,7 +557,7 @@ export default function SiteSettingsPage() {
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row gap-8">
|
||||
<nav className="w-full md:w-64 flex-shrink-0 space-y-1">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="h-12 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
|
||||
))}
|
||||
</nav>
|
||||
@@ -476,6 +644,19 @@ export default function SiteSettingsPage() {
|
||||
<ZapIcon className="w-5 h-5" />
|
||||
Goals & Events
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('reports')}
|
||||
role="tab"
|
||||
aria-selected={activeTab === 'reports'}
|
||||
className={`w-full flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-xl transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2 ${
|
||||
activeTab === 'reports'
|
||||
? 'bg-brand-orange/10 text-brand-orange'
|
||||
: 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'
|
||||
}`}
|
||||
>
|
||||
<PaperPlaneTilt className="w-5 h-5" />
|
||||
Reports
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Content Area */}
|
||||
@@ -1124,6 +1305,132 @@ export default function SiteSettingsPage() {
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'reports' && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">Scheduled Reports</h2>
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400">Automatically deliver analytics reports via email or webhooks.</p>
|
||||
</div>
|
||||
{canEdit && (
|
||||
<Button onClick={() => { setEditingSchedule(null); resetReportForm(); setReportModalOpen(true) }}>
|
||||
Add Report
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{reportLoading ? (
|
||||
<div className="space-y-2">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="h-20 animate-pulse rounded-xl bg-neutral-100 dark:bg-neutral-800" />
|
||||
))}
|
||||
</div>
|
||||
) : reportSchedules.length === 0 ? (
|
||||
<div className="p-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 text-center text-neutral-500 dark:text-neutral-400 text-sm">
|
||||
No scheduled reports yet. Add a report to automatically receive analytics summaries.
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{reportSchedules.map((schedule) => (
|
||||
<div
|
||||
key={schedule.id}
|
||||
className={`rounded-xl border p-4 transition-colors ${
|
||||
schedule.enabled
|
||||
? 'border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/50'
|
||||
: 'border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/30 opacity-60'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3 min-w-0">
|
||||
<div className="p-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg mt-0.5">
|
||||
{schedule.channel === 'email' ? (
|
||||
<Envelope className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
|
||||
) : (
|
||||
<WebhooksLogo className="w-5 h-5 text-neutral-600 dark:text-neutral-400" />
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="font-medium text-neutral-900 dark:text-white">
|
||||
{getChannelLabel(schedule.channel)}
|
||||
</span>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-brand-orange/10 text-brand-orange">
|
||||
{getFrequencyLabel(schedule.frequency)}
|
||||
</span>
|
||||
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400">
|
||||
{getReportTypeLabel(schedule.report_type)}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1 truncate">
|
||||
{schedule.channel === 'email'
|
||||
? (schedule.channel_config as EmailConfig).recipients.join(', ')
|
||||
: (schedule.channel_config as WebhookConfig).url}
|
||||
</p>
|
||||
<div className="flex items-center gap-3 mt-1.5 text-xs text-neutral-400 dark:text-neutral-500">
|
||||
<span>
|
||||
Last sent: {schedule.last_sent_at
|
||||
? new Date(schedule.last_sent_at).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' })
|
||||
: 'Never'}
|
||||
</span>
|
||||
</div>
|
||||
{schedule.last_error && (
|
||||
<p className="text-xs text-red-500 dark:text-red-400 mt-1">
|
||||
Error: {schedule.last_error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canEdit && (
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleReportTest(schedule)}
|
||||
disabled={reportTesting === schedule.id}
|
||||
className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors disabled:opacity-50"
|
||||
title="Send test report"
|
||||
>
|
||||
{reportTesting === schedule.id ? (
|
||||
<SpinnerGap className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<Play className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openEditSchedule(schedule)}
|
||||
className="p-2 text-neutral-500 hover:text-brand-orange hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
|
||||
title="Edit schedule"
|
||||
>
|
||||
<PencilSimple className="w-4 h-4" />
|
||||
</button>
|
||||
<label className="relative inline-flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={schedule.enabled}
|
||||
onChange={() => handleReportToggle(schedule)}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-9 h-5 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-neutral-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-neutral-600 peer-checked:bg-brand-orange"></div>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleReportDelete(schedule)}
|
||||
className="p-2 text-neutral-500 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
|
||||
title="Delete schedule"
|
||||
>
|
||||
<Trash className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1177,6 +1484,106 @@ export default function SiteSettingsPage() {
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
isOpen={reportModalOpen}
|
||||
onClose={() => setReportModalOpen(false)}
|
||||
title={editingSchedule ? 'Edit report schedule' : 'Add report schedule'}
|
||||
>
|
||||
<form onSubmit={handleReportSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Channel</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{(['email', 'slack', 'discord', 'webhook'] as const).map((ch) => (
|
||||
<button
|
||||
key={ch}
|
||||
type="button"
|
||||
onClick={() => setReportForm({ ...reportForm, channel: ch })}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-colors ${
|
||||
reportForm.channel === ch
|
||||
? 'border-brand-orange bg-brand-orange/10 text-brand-orange'
|
||||
: 'border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800'
|
||||
}`}
|
||||
>
|
||||
{ch === 'email' ? <Envelope className="w-4 h-4" /> : <WebhooksLogo className="w-4 h-4" />}
|
||||
{getChannelLabel(ch)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{reportForm.channel === 'email' ? (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Recipients</label>
|
||||
<input
|
||||
type="text"
|
||||
value={reportForm.recipients}
|
||||
onChange={(e) => setReportForm({ ...reportForm, recipients: e.target.value })}
|
||||
placeholder="email1@example.com, email2@example.com"
|
||||
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
|
||||
required
|
||||
/>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">Comma-separated email addresses.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
||||
{reportForm.channel === 'slack' ? 'Slack Webhook URL' : reportForm.channel === 'discord' ? 'Discord Webhook URL' : 'Webhook URL'}
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={reportForm.webhookUrl}
|
||||
onChange={(e) => setReportForm({ ...reportForm, webhookUrl: e.target.value })}
|
||||
placeholder="https://hooks.example.com/..."
|
||||
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-lg bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Frequency</label>
|
||||
<Select
|
||||
value={reportForm.frequency}
|
||||
onChange={(v) => setReportForm({ ...reportForm, frequency: v })}
|
||||
options={[
|
||||
{ value: 'daily', label: 'Daily' },
|
||||
{ value: 'weekly', label: 'Weekly' },
|
||||
{ value: 'monthly', label: 'Monthly' },
|
||||
]}
|
||||
variant="input"
|
||||
fullWidth
|
||||
align="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">Report Type</label>
|
||||
<Select
|
||||
value={reportForm.reportType}
|
||||
onChange={(v) => setReportForm({ ...reportForm, reportType: v })}
|
||||
options={[
|
||||
{ value: 'summary', label: 'Summary' },
|
||||
{ value: 'pages', label: 'Pages' },
|
||||
{ value: 'sources', label: 'Sources' },
|
||||
{ value: 'goals', label: 'Goals' },
|
||||
]}
|
||||
variant="input"
|
||||
fullWidth
|
||||
align="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 pt-2">
|
||||
<Button type="button" variant="secondary" onClick={() => setReportModalOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" disabled={reportSaving}>
|
||||
{reportSaving ? 'Saving...' : editingSchedule ? 'Update' : 'Create'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
<VerificationModal
|
||||
isOpen={showVerificationModal}
|
||||
onClose={() => setShowVerificationModal(false)}
|
||||
|
||||
Reference in New Issue
Block a user