copilot-swe-agent[bot]
5f24e7f1b6
- Add NotificationConfig, AdminNotificationConfig types and notificationsApi / adminNotificationsApi namespaces to api.ts - Create NotificationWizard component with 3-step flow: channel selection, field entry (Telegram/Discord/Slack/Email/ Webhook/Custom), URL preview + preferences - Create /notifications page with full CRUD: list, add, edit, delete, enable/disable toggle, test per channel - Add Notifications nav item (Bell icon) to DashboardLayout - Add System Alert Channels section to admin/page.tsx with inline AdminNotificationModal for add/edit/delete/test Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
348 lines
14 KiB
TypeScript
348 lines
14 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { AuthGuard } from '@/components/AuthGuard';
|
|
import { DashboardLayout } from '@/components/DashboardLayout';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { notificationsApi, NotificationConfig, NotificationConfigCreate, NotificationConfigUpdate } from '@/lib/api';
|
|
import { NotificationWizard } from '@/components/NotificationWizard';
|
|
import { Plus, Edit2, Trash2, Bell, Send, CheckCircle, XCircle, Loader2 } from 'lucide-react';
|
|
|
|
const CHANNEL_DISPLAY: Record<string, { icon: string; label: string; color: string }> = {
|
|
telegram: { icon: '🤖', label: 'Telegram', color: 'bg-blue-100 text-blue-800' },
|
|
discord: { icon: '💬', label: 'Discord', color: 'bg-indigo-100 text-indigo-800' },
|
|
slack: { icon: '💼', label: 'Slack', color: 'bg-yellow-100 text-yellow-800' },
|
|
email: { icon: '📧', label: 'Email', color: 'bg-green-100 text-green-800' },
|
|
webhook: { icon: '🔗', label: 'Webhook', color: 'bg-purple-100 text-purple-800' },
|
|
custom: { icon: '⚙️', label: 'Custom', color: 'bg-gray-100 text-gray-800' },
|
|
};
|
|
|
|
export default function NotificationsPage() {
|
|
const [showWizard, setShowWizard] = useState(false);
|
|
const [editingConfig, setEditingConfig] = useState<NotificationConfig | null>(null);
|
|
const [testingId, setTestingId] = useState<number | null>(null);
|
|
const [testResults, setTestResults] = useState<Record<number, { success: boolean; message: string }>>({});
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data: notifications, isLoading } = useQuery({
|
|
queryKey: ['notifications'],
|
|
queryFn: notificationsApi.list,
|
|
});
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: (data: NotificationConfigCreate) => notificationsApi.create(data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['notifications'] });
|
|
setShowWizard(false);
|
|
setEditingConfig(null);
|
|
},
|
|
});
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: ({ id, data }: { id: number; data: NotificationConfigUpdate }) =>
|
|
notificationsApi.update(id, data),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['notifications'] });
|
|
setShowWizard(false);
|
|
setEditingConfig(null);
|
|
},
|
|
});
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: notificationsApi.delete,
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['notifications'] });
|
|
},
|
|
});
|
|
|
|
const toggleMutation = useMutation({
|
|
mutationFn: ({ id, is_enabled }: { id: number; is_enabled: boolean }) =>
|
|
notificationsApi.update(id, { is_enabled }),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['notifications'] });
|
|
},
|
|
});
|
|
|
|
const handleWizardComplete = (config: {
|
|
name: string;
|
|
channel: string;
|
|
apprise_url: string;
|
|
notify_on_errors: boolean;
|
|
notify_on_success: boolean;
|
|
}) => {
|
|
if (editingConfig) {
|
|
updateMutation.mutate({ id: editingConfig.id, data: config });
|
|
} else {
|
|
createMutation.mutate(config);
|
|
}
|
|
};
|
|
|
|
const handleEdit = (config: NotificationConfig) => {
|
|
setEditingConfig(config);
|
|
setShowWizard(true);
|
|
};
|
|
|
|
const handleDelete = async (id: number) => {
|
|
if (!confirm('Delete this notification channel?')) return;
|
|
try {
|
|
await deleteMutation.mutateAsync(id);
|
|
} catch {
|
|
alert('Failed to delete notification channel');
|
|
}
|
|
};
|
|
|
|
const handleTest = async (config: NotificationConfig) => {
|
|
if (!config.apprise_url) return;
|
|
setTestingId(config.id);
|
|
try {
|
|
const result = await notificationsApi.test(config.apprise_url);
|
|
setTestResults((prev) => ({ ...prev, [config.id]: result }));
|
|
} catch {
|
|
setTestResults((prev) => ({
|
|
...prev,
|
|
[config.id]: { success: false, message: 'Test request failed' },
|
|
}));
|
|
} finally {
|
|
setTestingId(null);
|
|
setTimeout(() => {
|
|
setTestResults((prev) => {
|
|
const next = { ...prev };
|
|
delete next[config.id];
|
|
return next;
|
|
});
|
|
}, 5000);
|
|
}
|
|
};
|
|
|
|
const handleOpenWizard = () => {
|
|
setEditingConfig(null);
|
|
setShowWizard(true);
|
|
};
|
|
|
|
const handleCancelWizard = () => {
|
|
setShowWizard(false);
|
|
setEditingConfig(null);
|
|
};
|
|
|
|
if (showWizard) {
|
|
return (
|
|
<AuthGuard>
|
|
<DashboardLayout>
|
|
<div className="max-w-xl mx-auto">
|
|
<div className="bg-white rounded-xl shadow-lg p-6">
|
|
<NotificationWizard
|
|
onComplete={handleWizardComplete}
|
|
onCancel={handleCancelWizard}
|
|
initialData={
|
|
editingConfig
|
|
? {
|
|
name: editingConfig.name,
|
|
channel: editingConfig.channel,
|
|
apprise_url: editingConfig.apprise_url,
|
|
notify_on_errors: editingConfig.notify_on_errors,
|
|
notify_on_success: editingConfig.notify_on_success,
|
|
}
|
|
: null
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
</AuthGuard>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<AuthGuard>
|
|
<DashboardLayout>
|
|
<div className="space-y-6">
|
|
{/* Header */}
|
|
<div className="flex justify-between items-start">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
|
|
<Bell className="h-6 w-6 text-blue-600" />
|
|
Notification Channels
|
|
</h1>
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
Get alerts when emails are processed or errors occur.
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={handleOpenWizard}
|
|
className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm font-medium"
|
|
>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Channel
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
|
|
</div>
|
|
) : notifications && notifications.length > 0 ? (
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
{notifications.map((config) => {
|
|
const channel = CHANNEL_DISPLAY[config.channel] ?? CHANNEL_DISPLAY.custom;
|
|
const testResult = testResults[config.id];
|
|
const isTesting = testingId === config.id;
|
|
|
|
return (
|
|
<div
|
|
key={config.id}
|
|
className={`bg-white rounded-lg shadow border overflow-hidden transition-opacity ${
|
|
config.is_enabled ? 'border-gray-200' : 'border-gray-200 opacity-60'
|
|
}`}
|
|
>
|
|
<div className="p-5">
|
|
<div className="flex items-start justify-between mb-3">
|
|
<div className="flex items-center gap-2 flex-1 min-w-0">
|
|
<span className="text-2xl flex-shrink-0">{channel.icon}</span>
|
|
<div className="min-w-0">
|
|
<h3 className="text-sm font-semibold text-gray-900 truncate">
|
|
{config.name}
|
|
</h3>
|
|
<span
|
|
className={`inline-block mt-0.5 px-2 py-0.5 rounded-full text-xs font-medium ${channel.color}`}
|
|
>
|
|
{channel.label}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() =>
|
|
toggleMutation.mutate({
|
|
id: config.id,
|
|
is_enabled: !config.is_enabled,
|
|
})
|
|
}
|
|
disabled={toggleMutation.isPending}
|
|
title={config.is_enabled ? 'Disable' : 'Enable'}
|
|
className={`ml-2 flex-shrink-0 flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors ${
|
|
config.is_enabled
|
|
? 'bg-green-100 text-green-700 hover:bg-green-200'
|
|
: 'bg-gray-100 text-gray-500 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{config.is_enabled ? (
|
|
<CheckCircle className="h-3 w-3" />
|
|
) : (
|
|
<XCircle className="h-3 w-3" />
|
|
)}
|
|
{config.is_enabled ? 'On' : 'Off'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-1.5 mb-3">
|
|
{config.notify_on_errors && (
|
|
<span className="px-2 py-0.5 rounded text-xs bg-red-50 text-red-700 border border-red-200">
|
|
On Errors
|
|
</span>
|
|
)}
|
|
{config.notify_on_success && (
|
|
<span className="px-2 py-0.5 rounded text-xs bg-green-50 text-green-700 border border-green-200">
|
|
On Success
|
|
</span>
|
|
)}
|
|
{!config.notify_on_errors && !config.notify_on_success && (
|
|
<span className="px-2 py-0.5 rounded text-xs bg-gray-50 text-gray-500 border border-gray-200">
|
|
No triggers set
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{testResult && (
|
|
<div
|
|
className={`mb-3 p-2 rounded text-xs flex items-center gap-1.5 ${
|
|
testResult.success
|
|
? 'bg-green-50 text-green-700 border border-green-200'
|
|
: 'bg-red-50 text-red-700 border border-red-200'
|
|
}`}
|
|
>
|
|
{testResult.success ? (
|
|
<CheckCircle className="h-3.5 w-3.5 flex-shrink-0" />
|
|
) : (
|
|
<XCircle className="h-3.5 w-3.5 flex-shrink-0" />
|
|
)}
|
|
{testResult.message}
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-2 pt-3 border-t border-gray-100">
|
|
<button
|
|
onClick={() => handleTest(config)}
|
|
disabled={isTesting || !config.apprise_url}
|
|
title="Send test notification"
|
|
className="flex items-center justify-center px-2.5 py-1.5 text-xs font-medium text-purple-600 bg-purple-50 rounded-md hover:bg-purple-100 disabled:opacity-50 transition-colors"
|
|
>
|
|
{isTesting ? (
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
) : (
|
|
<Send className="h-3.5 w-3.5 mr-1" />
|
|
)}
|
|
{isTesting ? '…' : 'Test'}
|
|
</button>
|
|
<button
|
|
onClick={() => handleEdit(config)}
|
|
className="flex-1 flex items-center justify-center px-2.5 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors"
|
|
>
|
|
<Edit2 className="h-3.5 w-3.5 mr-1" />
|
|
Edit
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(config.id)}
|
|
disabled={deleteMutation.isPending}
|
|
className="flex-1 flex items-center justify-center px-2.5 py-1.5 text-xs font-medium text-red-600 bg-red-50 rounded-md hover:bg-red-100 disabled:opacity-50 transition-colors"
|
|
>
|
|
<Trash2 className="h-3.5 w-3.5 mr-1" />
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-16 bg-white rounded-lg shadow border border-dashed border-gray-300">
|
|
<Bell className="mx-auto h-12 w-12 text-gray-300 mb-3" />
|
|
<h3 className="text-base font-semibold text-gray-700 mb-1">
|
|
No notification channels yet
|
|
</h3>
|
|
<p className="text-sm text-gray-500 mb-4 max-w-xs mx-auto">
|
|
Add a channel to receive alerts when emails are processed or errors occur.
|
|
</p>
|
|
<button
|
|
onClick={handleOpenWizard}
|
|
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors text-sm font-medium"
|
|
>
|
|
<Plus className="h-4 w-4 mr-2" />
|
|
Add Your First Channel
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Info box */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<h4 className="text-sm font-semibold text-blue-900 mb-1">About Notifications</h4>
|
|
<p className="text-xs text-blue-700 leading-relaxed">
|
|
Notifications are powered by{' '}
|
|
<a
|
|
href="https://github.com/caronc/apprise"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="underline hover:text-blue-900"
|
|
>
|
|
Apprise
|
|
</a>
|
|
, which supports 80+ notification services including Telegram, Discord, Slack, email,
|
|
and many more. Each channel can be configured independently with different triggers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
</AuthGuard>
|
|
);
|
|
}
|