feat: add Apprise notification frontend
- 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>
This commit is contained in:
copilot-swe-agent[bot]
@@ -2,17 +2,225 @@
|
|||||||
|
|
||||||
import { AuthGuard } from '@/components/AuthGuard';
|
import { AuthGuard } from '@/components/AuthGuard';
|
||||||
import { DashboardLayout } from '@/components/DashboardLayout';
|
import { DashboardLayout } from '@/components/DashboardLayout';
|
||||||
import { useQuery } from '@tanstack/react-query';
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
import { adminApi } from '@/lib/api';
|
import {
|
||||||
|
adminApi,
|
||||||
|
adminNotificationsApi,
|
||||||
|
AdminNotificationConfig,
|
||||||
|
AdminNotificationConfigCreate,
|
||||||
|
AdminNotificationConfigUpdate,
|
||||||
|
} from '@/lib/api';
|
||||||
import { useAuthStore } from '@/store/authStore';
|
import { useAuthStore } from '@/store/authStore';
|
||||||
import { useRouter } from 'next/navigation';
|
import { useRouter } from 'next/navigation';
|
||||||
import { useEffect } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { Users, Mail, Activity, Shield } from 'lucide-react';
|
import {
|
||||||
|
Users,
|
||||||
|
Mail,
|
||||||
|
Activity,
|
||||||
|
Shield,
|
||||||
|
Bell,
|
||||||
|
Plus,
|
||||||
|
Edit2,
|
||||||
|
Trash2,
|
||||||
|
Send,
|
||||||
|
CheckCircle,
|
||||||
|
XCircle,
|
||||||
|
Loader2,
|
||||||
|
X,
|
||||||
|
} from 'lucide-react';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
// ── Admin Notification Modal ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface AdminNotificationModalProps {
|
||||||
|
config?: AdminNotificationConfig | null;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function AdminNotificationModal({ config, onClose }: AdminNotificationModalProps) {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const isEdit = !!config;
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState<AdminNotificationConfigCreate>({
|
||||||
|
name: config?.name ?? '',
|
||||||
|
apprise_url: config?.apprise_url ?? '',
|
||||||
|
is_enabled: config?.is_enabled ?? true,
|
||||||
|
notify_on_errors: config?.notify_on_errors ?? true,
|
||||||
|
notify_on_system_events: config?.notify_on_system_events ?? true,
|
||||||
|
description: config?.description ?? '',
|
||||||
|
});
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
const onSuccess = () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['admin-notifications'] });
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const createMutation = useMutation({
|
||||||
|
mutationFn: (data: AdminNotificationConfigCreate) => adminNotificationsApi.create(data),
|
||||||
|
onSuccess,
|
||||||
|
onError: () => setError('Failed to save. Please check the Apprise URL and try again.'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const updateMutation = useMutation({
|
||||||
|
mutationFn: (data: AdminNotificationConfigUpdate) =>
|
||||||
|
adminNotificationsApi.update(config!.id, data),
|
||||||
|
onSuccess,
|
||||||
|
onError: () => setError('Failed to save. Please check the Apprise URL and try again.'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const isPending = createMutation.isPending || updateMutation.isPending;
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setError('');
|
||||||
|
if (!formData.name.trim() || !formData.apprise_url.trim()) {
|
||||||
|
setError('Name and Apprise URL are required.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (isEdit) {
|
||||||
|
updateMutation.mutate(formData);
|
||||||
|
} else {
|
||||||
|
createMutation.mutate(formData);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||||
|
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md mx-4">
|
||||||
|
<div className="flex items-center justify-between p-5 border-b border-gray-200">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900">
|
||||||
|
{isEdit ? 'Edit System Alert Channel' : 'Add System Alert Channel'}
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||||
|
aria-label="Close"
|
||||||
|
>
|
||||||
|
<X className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="p-5 space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData((p) => ({ ...p, name: e.target.value }))}
|
||||||
|
placeholder="e.g. Admin Telegram Alert"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Apprise URL</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.apprise_url}
|
||||||
|
onChange={(e) => setFormData((p) => ({ ...p, apprise_url: e.target.value }))}
|
||||||
|
placeholder="tgram://bot_token/chat_id/"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-gray-500 mt-1">
|
||||||
|
Any valid{' '}
|
||||||
|
<a
|
||||||
|
href="https://apprise.readthedocs.io"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="underline"
|
||||||
|
>
|
||||||
|
Apprise
|
||||||
|
</a>{' '}
|
||||||
|
notification URL.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
Description{' '}
|
||||||
|
<span className="text-gray-400 font-normal">(optional)</span>
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.description ?? ''}
|
||||||
|
onChange={(e) => setFormData((p) => ({ ...p, description: e.target.value || null }))}
|
||||||
|
placeholder="What is this channel used for?"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm font-medium text-gray-700">Triggers</p>
|
||||||
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.is_enabled}
|
||||||
|
onChange={(e) => setFormData((p) => ({ ...p, is_enabled: e.target.checked }))}
|
||||||
|
className="h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-800">Enabled</span>
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.notify_on_errors}
|
||||||
|
onChange={(e) => setFormData((p) => ({ ...p, notify_on_errors: e.target.checked }))}
|
||||||
|
className="h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-800">Notify on errors</span>
|
||||||
|
</label>
|
||||||
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={formData.notify_on_system_events}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData((p) => ({ ...p, notify_on_system_events: e.target.checked }))
|
||||||
|
}
|
||||||
|
className="h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
|
||||||
|
/>
|
||||||
|
<span className="text-sm text-gray-800">Notify on system events</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && <p className="text-xs text-red-600 bg-red-50 border border-red-200 rounded p-2">{error}</p>}
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="flex-1 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isPending}
|
||||||
|
className="flex-1 py-2 bg-purple-600 text-white rounded-md text-sm hover:bg-purple-700 disabled:opacity-50 transition-colors flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
{isPending && <Loader2 className="h-4 w-4 animate-spin" />}
|
||||||
|
{isEdit ? 'Save Changes' : 'Add Channel'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Admin Page ───────────────────────────────────────────────────────────
|
||||||
|
|
||||||
export default function AdminPage() {
|
export default function AdminPage() {
|
||||||
const { user } = useAuthStore();
|
const { user } = useAuthStore();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const [showNotifModal, setShowNotifModal] = useState(false);
|
||||||
|
const [editingNotif, setEditingNotif] = useState<AdminNotificationConfig | null>(null);
|
||||||
|
const [testingNotifId, setTestingNotifId] = useState<number | null>(null);
|
||||||
|
const [notifTestResults, setNotifTestResults] = useState<
|
||||||
|
Record<number, { success: boolean; message: string }>
|
||||||
|
>({});
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (user && !user.is_superuser) {
|
if (user && !user.is_superuser) {
|
||||||
@@ -26,6 +234,60 @@ export default function AdminPage() {
|
|||||||
enabled: !!user?.is_superuser,
|
enabled: !!user?.is_superuser,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const { data: adminNotifications, isLoading: notifLoading } = useQuery({
|
||||||
|
queryKey: ['admin-notifications'],
|
||||||
|
queryFn: adminNotificationsApi.list,
|
||||||
|
enabled: !!user?.is_superuser,
|
||||||
|
});
|
||||||
|
|
||||||
|
const deleteNotifMutation = useMutation({
|
||||||
|
mutationFn: adminNotificationsApi.delete,
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['admin-notifications'] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleEditNotif = (config: AdminNotificationConfig) => {
|
||||||
|
setEditingNotif(config);
|
||||||
|
setShowNotifModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteNotif = async (id: number) => {
|
||||||
|
if (!confirm('Delete this system alert channel?')) return;
|
||||||
|
try {
|
||||||
|
await deleteNotifMutation.mutateAsync(id);
|
||||||
|
} catch {
|
||||||
|
alert('Failed to delete channel');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTestNotif = async (config: AdminNotificationConfig) => {
|
||||||
|
setTestingNotifId(config.id);
|
||||||
|
try {
|
||||||
|
const result = await adminNotificationsApi.test(config.apprise_url);
|
||||||
|
setNotifTestResults((prev) => ({ ...prev, [config.id]: result }));
|
||||||
|
} catch {
|
||||||
|
setNotifTestResults((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[config.id]: { success: false, message: 'Test request failed' },
|
||||||
|
}));
|
||||||
|
} finally {
|
||||||
|
setTestingNotifId(null);
|
||||||
|
setTimeout(() => {
|
||||||
|
setNotifTestResults((prev) => {
|
||||||
|
const next = { ...prev };
|
||||||
|
delete next[config.id];
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCloseNotifModal = () => {
|
||||||
|
setShowNotifModal(false);
|
||||||
|
setEditingNotif(null);
|
||||||
|
};
|
||||||
|
|
||||||
// AuthGuard must always render so it can fetch the current user and handle
|
// AuthGuard must always render so it can fetch the current user and handle
|
||||||
// unauthenticated redirects. The early-return that was here prevented
|
// unauthenticated redirects. The early-return that was here prevented
|
||||||
// AuthGuard from ever mounting on a direct navigation to /admin, leaving a
|
// AuthGuard from ever mounting on a direct navigation to /admin, leaving a
|
||||||
@@ -115,9 +377,165 @@ export default function AdminPage() {
|
|||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* System Alert Channels */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||||
|
<Bell className="h-5 w-5 text-purple-600" />
|
||||||
|
System Alert Channels
|
||||||
|
</h2>
|
||||||
|
<p className="text-sm text-gray-500 mt-0.5">
|
||||||
|
Admin-level channels that receive system-wide error and event notifications.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setEditingNotif(null);
|
||||||
|
setShowNotifModal(true);
|
||||||
|
}}
|
||||||
|
className="flex items-center px-3 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors text-sm font-medium"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-1.5" />
|
||||||
|
Add Channel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{notifLoading ? (
|
||||||
|
<div className="flex items-center justify-center py-8">
|
||||||
|
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-purple-600" />
|
||||||
|
</div>
|
||||||
|
) : adminNotifications && adminNotifications.length > 0 ? (
|
||||||
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{adminNotifications.map((config) => {
|
||||||
|
const testResult = notifTestResults[config.id];
|
||||||
|
const isTesting = testingNotifId === config.id;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={config.id}
|
||||||
|
className={`bg-white rounded-lg shadow border transition-opacity ${
|
||||||
|
config.is_enabled ? 'border-gray-200' : 'border-gray-200 opacity-60'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="p-4">
|
||||||
|
<div className="flex items-start justify-between mb-2">
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm font-semibold text-gray-900 truncate">
|
||||||
|
{config.name}
|
||||||
|
</p>
|
||||||
|
{config.description && (
|
||||||
|
<p className="text-xs text-gray-500 mt-0.5 truncate">
|
||||||
|
{config.description}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className={`ml-2 flex-shrink-0 flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${
|
||||||
|
config.is_enabled
|
||||||
|
? 'bg-green-100 text-green-700'
|
||||||
|
: 'bg-gray-100 text-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{config.is_enabled ? (
|
||||||
|
<CheckCircle className="h-3 w-3" />
|
||||||
|
) : (
|
||||||
|
<XCircle className="h-3 w-3" />
|
||||||
|
)}
|
||||||
|
{config.is_enabled ? 'On' : 'Off'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-1.5 mb-3">
|
||||||
|
{config.notify_on_errors && (
|
||||||
|
<span className="px-1.5 py-0.5 rounded text-xs bg-red-50 text-red-700 border border-red-200">
|
||||||
|
On Errors
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{config.notify_on_system_events && (
|
||||||
|
<span className="px-1.5 py-0.5 rounded text-xs bg-purple-50 text-purple-700 border border-purple-200">
|
||||||
|
System Events
|
||||||
|
</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={() => handleTestNotif(config)}
|
||||||
|
disabled={isTesting}
|
||||||
|
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={() => handleEditNotif(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={() => handleDeleteNotif(config.id)}
|
||||||
|
disabled={deleteNotifMutation.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-10 bg-white rounded-lg shadow border border-dashed border-gray-300">
|
||||||
|
<Bell className="mx-auto h-8 w-8 text-gray-300 mb-2" />
|
||||||
|
<p className="text-sm text-gray-500">No system alert channels configured yet.</p>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setEditingNotif(null);
|
||||||
|
setShowNotifModal(true);
|
||||||
|
}}
|
||||||
|
className="mt-3 inline-flex items-center px-3 py-1.5 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors text-sm font-medium"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-1.5" />
|
||||||
|
Add First Channel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showNotifModal && (
|
||||||
|
<AdminNotificationModal config={editingNotif} onClose={handleCloseNotifModal} />
|
||||||
)}
|
)}
|
||||||
</DashboardLayout>
|
</DashboardLayout>
|
||||||
</AuthGuard>
|
</AuthGuard>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,347 @@
|
|||||||
|
'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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -14,7 +14,8 @@ import {
|
|||||||
User,
|
User,
|
||||||
Shield,
|
Shield,
|
||||||
Users,
|
Users,
|
||||||
CreditCard
|
CreditCard,
|
||||||
|
Bell
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
interface DashboardLayoutProps {
|
interface DashboardLayoutProps {
|
||||||
@@ -35,6 +36,7 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
|
|||||||
const navigation = [
|
const navigation = [
|
||||||
{ name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
|
{ name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
|
||||||
{ name: 'Mail Accounts', href: '/accounts', icon: Mail },
|
{ name: 'Mail Accounts', href: '/accounts', icon: Mail },
|
||||||
|
{ name: 'Notifications', href: '/notifications', icon: Bell },
|
||||||
{ name: 'Settings', href: '/settings', icon: Settings },
|
{ name: 'Settings', href: '/settings', icon: Settings },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,390 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { ArrowLeft, Bell, Check, Eye, EyeOff, Send } from 'lucide-react';
|
||||||
|
|
||||||
|
interface NotificationWizardProps {
|
||||||
|
onComplete: (config: {
|
||||||
|
name: string;
|
||||||
|
channel: string;
|
||||||
|
apprise_url: string;
|
||||||
|
notify_on_errors: boolean;
|
||||||
|
notify_on_success: boolean;
|
||||||
|
}) => void;
|
||||||
|
onCancel: () => void;
|
||||||
|
initialData?: {
|
||||||
|
name: string;
|
||||||
|
channel: string;
|
||||||
|
apprise_url: string | null;
|
||||||
|
notify_on_errors: boolean;
|
||||||
|
notify_on_success: boolean;
|
||||||
|
} | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CHANNEL_OPTIONS = [
|
||||||
|
{ id: 'telegram', icon: '🤖', label: 'Telegram', description: 'Instant messages via Telegram bot' },
|
||||||
|
{ id: 'discord', icon: '💬', label: 'Discord', description: 'Server notifications via Discord webhook' },
|
||||||
|
{ id: 'slack', icon: '💼', label: 'Slack', description: 'Team alerts via Slack webhook' },
|
||||||
|
{ id: 'email', icon: '📧', label: 'Email', description: 'Email notifications via SMTP' },
|
||||||
|
{ id: 'webhook', icon: '🔗', label: 'Webhook', description: 'POST to any HTTP endpoint' },
|
||||||
|
{ id: 'custom', icon: '⚙️', label: 'Custom Apprise URL', description: 'Advanced: any supported Apprise format' },
|
||||||
|
];
|
||||||
|
|
||||||
|
interface ChannelField {
|
||||||
|
key: string;
|
||||||
|
label: string;
|
||||||
|
placeholder: string;
|
||||||
|
type?: 'text' | 'password';
|
||||||
|
hint?: string;
|
||||||
|
optional?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CHANNEL_FIELDS: Record<string, ChannelField[]> = {
|
||||||
|
telegram: [
|
||||||
|
{
|
||||||
|
key: 'bot_token',
|
||||||
|
label: 'Bot Token',
|
||||||
|
placeholder: '110201543:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw',
|
||||||
|
hint: 'Get from @BotFather on Telegram',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'chat_id',
|
||||||
|
label: 'Chat ID',
|
||||||
|
placeholder: '12345678',
|
||||||
|
hint: 'Your Telegram chat or group ID',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
discord: [
|
||||||
|
{
|
||||||
|
key: 'webhook_url',
|
||||||
|
label: 'Discord Webhook URL',
|
||||||
|
placeholder: 'https://discord.com/api/webhooks/123456789/abcdef...',
|
||||||
|
hint: 'Paste the full webhook URL from Discord server settings → Integrations',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
slack: [
|
||||||
|
{
|
||||||
|
key: 'webhook_url',
|
||||||
|
label: 'Slack Webhook URL',
|
||||||
|
placeholder: 'https://hooks.slack.com/services/T00000000/B00000000/XXXX...',
|
||||||
|
hint: 'Create an Incoming Webhook in your Slack app settings',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
email: [
|
||||||
|
{ key: 'username', label: 'Username / Email', placeholder: 'user@example.com' },
|
||||||
|
{ key: 'password', label: 'SMTP Password', placeholder: '••••••••', type: 'password' },
|
||||||
|
{ key: 'host', label: 'SMTP Host', placeholder: 'smtp.example.com' },
|
||||||
|
{ key: 'port', label: 'SMTP Port', placeholder: '587', optional: true },
|
||||||
|
],
|
||||||
|
webhook: [
|
||||||
|
{
|
||||||
|
key: 'url',
|
||||||
|
label: 'Webhook URL',
|
||||||
|
placeholder: 'https://hooks.example.com/...',
|
||||||
|
hint: 'Full HTTP(S) URL — receives a JSON POST with notification data',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
custom: [
|
||||||
|
{
|
||||||
|
key: 'apprise_url',
|
||||||
|
label: 'Apprise URL',
|
||||||
|
placeholder: 'tgram://bot_token/chat_id/',
|
||||||
|
hint: 'Any valid Apprise notification URL — see apprise.readthedocs.io',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
function buildAppriseUrl(channel: string, fields: Record<string, string>): string {
|
||||||
|
switch (channel) {
|
||||||
|
case 'telegram':
|
||||||
|
if (!fields.bot_token || !fields.chat_id) return '';
|
||||||
|
return `tgram://${fields.bot_token}/${fields.chat_id}/`;
|
||||||
|
case 'discord': {
|
||||||
|
const match = (fields.webhook_url ?? '').match(
|
||||||
|
/discord\.com\/api\/webhooks\/(\d+)\/([^/?]+)/
|
||||||
|
);
|
||||||
|
if (match) return `discord://${match[1]}/${match[2]}/`;
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
case 'slack': {
|
||||||
|
const match = (fields.webhook_url ?? '').match(
|
||||||
|
/hooks\.slack\.com\/services\/([^/]+)\/([^/]+)\/([^/?]+)/
|
||||||
|
);
|
||||||
|
if (match) return `slack://${match[1]}/${match[2]}/${match[3]}/`;
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
case 'email':
|
||||||
|
if (!fields.username || !fields.password || !fields.host) return '';
|
||||||
|
return `mailtos://${encodeURIComponent(fields.username)}:${encodeURIComponent(fields.password)}@${fields.host}${
|
||||||
|
fields.port ? `:${fields.port}` : ''
|
||||||
|
}`;
|
||||||
|
case 'webhook':
|
||||||
|
return fields.url || '';
|
||||||
|
case 'custom':
|
||||||
|
return fields.apprise_url || '';
|
||||||
|
default:
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function NotificationWizard({ onComplete, onCancel, initialData }: NotificationWizardProps) {
|
||||||
|
const [step, setStep] = useState<1 | 2 | 3>(initialData ? 3 : 1);
|
||||||
|
const [selectedChannel, setSelectedChannel] = useState<string>(initialData?.channel ?? '');
|
||||||
|
const [fields, setFields] = useState<Record<string, string>>({});
|
||||||
|
const [name, setName] = useState(initialData?.name ?? '');
|
||||||
|
const [notifyOnErrors, setNotifyOnErrors] = useState(initialData?.notify_on_errors ?? true);
|
||||||
|
const [notifyOnSuccess, setNotifyOnSuccess] = useState(initialData?.notify_on_success ?? false);
|
||||||
|
const [showUrl, setShowUrl] = useState(false);
|
||||||
|
|
||||||
|
const builtUrl = buildAppriseUrl(selectedChannel, fields);
|
||||||
|
const effectiveUrl = builtUrl || initialData?.apprise_url || '';
|
||||||
|
|
||||||
|
const handleChannelSelect = (channelId: string) => {
|
||||||
|
setSelectedChannel(channelId);
|
||||||
|
setFields({});
|
||||||
|
setStep(2);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFieldChange = (key: string, value: string) => {
|
||||||
|
setFields((prev) => ({ ...prev, [key]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const canProceedStep2 = () => {
|
||||||
|
const hasAnyField = Object.values(fields).some((v) => v.trim());
|
||||||
|
if (initialData?.apprise_url && !hasAnyField) return true;
|
||||||
|
const channelFields = CHANNEL_FIELDS[selectedChannel] ?? [];
|
||||||
|
return channelFields.every((f) => f.optional || (fields[f.key] ?? '').trim().length > 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = () => {
|
||||||
|
if (!effectiveUrl || !name.trim()) return;
|
||||||
|
onComplete({
|
||||||
|
name: name.trim(),
|
||||||
|
channel: selectedChannel,
|
||||||
|
apprise_url: effectiveUrl,
|
||||||
|
notify_on_errors: notifyOnErrors,
|
||||||
|
notify_on_success: notifyOnSuccess,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Step 1: Choose channel ─────────────────────────────────────────────
|
||||||
|
if (step === 1) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||||
|
<Bell className="h-5 w-5 text-blue-600" />
|
||||||
|
Choose Notification Channel
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-500 mt-1">Select how you want to receive alerts.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
|
||||||
|
{CHANNEL_OPTIONS.map((channel) => (
|
||||||
|
<button
|
||||||
|
key={channel.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleChannelSelect(channel.id)}
|
||||||
|
className="flex flex-col items-start gap-2 p-4 rounded-lg border-2 border-gray-200 hover:border-blue-400 hover:bg-blue-50 transition-colors text-left"
|
||||||
|
>
|
||||||
|
<span className="text-2xl">{channel.icon}</span>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-semibold text-gray-900">{channel.label}</p>
|
||||||
|
<p className="text-xs text-gray-500 mt-0.5 leading-snug">{channel.description}</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onCancel}
|
||||||
|
className="w-full py-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Step 2: Fill in fields ─────────────────────────────────────────────
|
||||||
|
if (step === 2) {
|
||||||
|
const channelOption = CHANNEL_OPTIONS.find((c) => c.id === selectedChannel);
|
||||||
|
const channelFields = CHANNEL_FIELDS[selectedChannel] ?? [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setStep(1);
|
||||||
|
setFields({});
|
||||||
|
}}
|
||||||
|
className="flex items-center text-sm text-blue-600 hover:text-blue-800"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||||
|
Back to channel selection
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3 flex items-center gap-3">
|
||||||
|
<span className="text-2xl">{channelOption?.icon}</span>
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold text-blue-900">{channelOption?.label}</p>
|
||||||
|
<p className="text-xs text-blue-700">{channelOption?.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{initialData?.apprise_url && (
|
||||||
|
<p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2">
|
||||||
|
Leave all fields blank to keep the existing URL unchanged.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{channelFields.map((field) => (
|
||||||
|
<div key={field.key}>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||||
|
{field.label}
|
||||||
|
{field.optional && (
|
||||||
|
<span className="text-gray-400 font-normal ml-1">(optional)</span>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type={field.type === 'password' ? 'password' : 'text'}
|
||||||
|
value={fields[field.key] ?? ''}
|
||||||
|
onChange={(e) => handleFieldChange(field.key, e.target.value)}
|
||||||
|
placeholder={field.placeholder}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
{field.hint && <p className="text-xs text-gray-500 mt-1">{field.hint}</p>}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onCancel}
|
||||||
|
className="flex-1 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setStep(3)}
|
||||||
|
disabled={!canProceedStep2()}
|
||||||
|
className="flex-1 py-2 bg-blue-600 text-white rounded-md text-sm hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
<Send className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Step 3: Preview + preferences ─────────────────────────────────────
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setStep(selectedChannel ? 2 : 1)}
|
||||||
|
className="flex items-center text-sm text-blue-600 hover:text-blue-800"
|
||||||
|
>
|
||||||
|
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||||
|
Back to configuration
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||||
|
<Check className="h-5 w-5 text-green-600" />
|
||||||
|
Final Setup
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-500 mt-1">
|
||||||
|
Name your channel and set notification preferences.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-1">Channel Name</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
placeholder="e.g. My Telegram Alert"
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{effectiveUrl && (
|
||||||
|
<div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<p className="text-xs font-medium text-gray-600">Apprise URL</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowUrl((v) => !v)}
|
||||||
|
className="text-gray-400 hover:text-gray-600"
|
||||||
|
aria-label={showUrl ? 'Hide URL' : 'Show URL'}
|
||||||
|
>
|
||||||
|
{showUrl ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p
|
||||||
|
className={`text-xs font-mono break-all ${
|
||||||
|
showUrl ? 'text-gray-800' : 'text-gray-400 select-none'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{showUrl ? effectiveUrl : '•'.repeat(Math.min(effectiveUrl.length, 48))}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<p className="text-sm font-medium text-gray-700">Notify me when:</p>
|
||||||
|
<label className="flex items-start gap-3 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={notifyOnErrors}
|
||||||
|
onChange={(e) => setNotifyOnErrors(e.target.checked)}
|
||||||
|
className="mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-900">Email processing errors occur</p>
|
||||||
|
<p className="text-xs text-gray-500">Get alerted when emails fail to forward</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<label className="flex items-start gap-3 cursor-pointer">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={notifyOnSuccess}
|
||||||
|
onChange={(e) => setNotifyOnSuccess(e.target.checked)}
|
||||||
|
className="mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-900">Emails are successfully forwarded</p>
|
||||||
|
<p className="text-xs text-gray-500">Get a notification for each successful batch</p>
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3 pt-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onCancel}
|
||||||
|
className="flex-1 py-2 border border-gray-300 rounded-md text-sm text-gray-700 hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleSubmit}
|
||||||
|
disabled={!name.trim() || !effectiveUrl}
|
||||||
|
className="flex-1 py-2 bg-green-600 text-white rounded-md text-sm hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
Save Channel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -485,4 +485,135 @@ export const adminApi = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// ── Notification Types ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export interface NotificationConfig {
|
||||||
|
id: number;
|
||||||
|
user_id: number;
|
||||||
|
name: string;
|
||||||
|
channel: string;
|
||||||
|
apprise_url: string | null;
|
||||||
|
is_enabled: boolean;
|
||||||
|
config: Record<string, unknown>;
|
||||||
|
notify_on_errors: boolean;
|
||||||
|
notify_on_success: boolean;
|
||||||
|
notify_threshold: number;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NotificationConfigCreate {
|
||||||
|
name: string;
|
||||||
|
channel: string;
|
||||||
|
apprise_url?: string | null;
|
||||||
|
is_enabled?: boolean;
|
||||||
|
config?: Record<string, unknown>;
|
||||||
|
notify_on_errors?: boolean;
|
||||||
|
notify_on_success?: boolean;
|
||||||
|
notify_threshold?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NotificationConfigUpdate {
|
||||||
|
name?: string;
|
||||||
|
channel?: string;
|
||||||
|
apprise_url?: string | null;
|
||||||
|
is_enabled?: boolean;
|
||||||
|
config?: Record<string, unknown>;
|
||||||
|
notify_on_errors?: boolean;
|
||||||
|
notify_on_success?: boolean;
|
||||||
|
notify_threshold?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AdminNotificationConfig {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
apprise_url: string;
|
||||||
|
is_enabled: boolean;
|
||||||
|
notify_on_errors: boolean;
|
||||||
|
notify_on_system_events: boolean;
|
||||||
|
description: string | null;
|
||||||
|
created_at: string;
|
||||||
|
updated_at: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AdminNotificationConfigCreate {
|
||||||
|
name: string;
|
||||||
|
apprise_url: string;
|
||||||
|
is_enabled?: boolean;
|
||||||
|
notify_on_errors?: boolean;
|
||||||
|
notify_on_system_events?: boolean;
|
||||||
|
description?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AdminNotificationConfigUpdate {
|
||||||
|
name?: string;
|
||||||
|
apprise_url?: string;
|
||||||
|
is_enabled?: boolean;
|
||||||
|
notify_on_errors?: boolean;
|
||||||
|
notify_on_system_events?: boolean;
|
||||||
|
description?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Notifications API ───────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export const notificationsApi = {
|
||||||
|
async list(): Promise<NotificationConfig[]> {
|
||||||
|
const response = await api.get<NotificationConfig[]>('/notifications');
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async create(data: NotificationConfigCreate): Promise<NotificationConfig> {
|
||||||
|
const response = await api.post<NotificationConfig>('/notifications', data);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async update(id: number, data: NotificationConfigUpdate): Promise<NotificationConfig> {
|
||||||
|
const response = await api.put<NotificationConfig>(`/notifications/${id}`, data);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async delete(id: number): Promise<void> {
|
||||||
|
await api.delete(`/notifications/${id}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
async test(apprise_url: string): Promise<{ success: boolean; message: string }> {
|
||||||
|
const response = await api.post<{ success: boolean; message: string }>(
|
||||||
|
'/notifications/test',
|
||||||
|
{ apprise_url }
|
||||||
|
);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Admin Notifications API ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
export const adminNotificationsApi = {
|
||||||
|
async list(): Promise<AdminNotificationConfig[]> {
|
||||||
|
const response = await api.get<AdminNotificationConfig[]>('/admin/notifications');
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async create(data: AdminNotificationConfigCreate): Promise<AdminNotificationConfig> {
|
||||||
|
const response = await api.post<AdminNotificationConfig>('/admin/notifications', data);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async update(id: number, data: AdminNotificationConfigUpdate): Promise<AdminNotificationConfig> {
|
||||||
|
const response = await api.put<AdminNotificationConfig>(`/admin/notifications/${id}`, data);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
|
async delete(id: number): Promise<void> {
|
||||||
|
await api.delete(`/admin/notifications/${id}`);
|
||||||
|
},
|
||||||
|
|
||||||
|
async test(apprise_url: string): Promise<{ success: boolean; message: string }> {
|
||||||
|
const response = await api.post<{ success: boolean; message: string }>(
|
||||||
|
'/admin/notifications/test',
|
||||||
|
{ apprise_url }
|
||||||
|
);
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
export default api;
|
export default api;
|
||||||
|
|||||||
Reference in New Issue
Block a user