mirror of
https://github.com/crocofied/CoreControl.git
synced 2025-12-17 15:36:50 +00:00
Notification Settings UI Improvements
This commit is contained in:
headlesdev
parent
22c7ce29e3
commit
90644d8a5f
@ -1,64 +1,171 @@
|
||||
'use client';
|
||||
"use client"
|
||||
|
||||
import { useState } from 'react';
|
||||
import AddNotification from '@/components/dialogues/AddNotification';
|
||||
import DeleteNotification from '@/components/dialogues/DeleteNotification';
|
||||
import TestNotification from '@/components/dialogues/TestNotification';
|
||||
import useNotifications from '@/hooks/useNotifications';
|
||||
import { Plus, Trash2, Play, Bell } from 'lucide-react';
|
||||
import Loading from '@/components/Loading';
|
||||
|
||||
export const NotificationProviderSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
|
||||
const { loadNotifications, notifications, loading, testNotification } = useNotifications();
|
||||
const [deleteNotificationId, setDeleteNotificationId] = useState<number | null>(null);
|
||||
const [notificationTestId, setNotificationTestId] = useState<number | null>(null);
|
||||
import { useState } from "react"
|
||||
import AddNotification from "@/components/dialogues/AddNotification"
|
||||
import DeleteNotification from "@/components/dialogues/DeleteNotification"
|
||||
import TestNotification from "@/components/dialogues/TestNotification"
|
||||
import useNotifications from "@/hooks/useNotifications"
|
||||
import { Plus, Trash2, Play, Bell, Settings, CheckCircle, AlertCircle } from "lucide-react"
|
||||
import Loading from "@/components/Loading"
|
||||
|
||||
export const NotificationProviderSettings = ({
|
||||
onError,
|
||||
onSuccess,
|
||||
}: { onError: (message: string) => void; onSuccess: (message: string) => void }) => {
|
||||
const { loadNotifications, notifications, loading, testNotification } = useNotifications()
|
||||
const [deleteNotificationId, setDeleteNotificationId] = useState<number | null>(null)
|
||||
const [notificationTestId, setNotificationTestId] = useState<number | null>(null)
|
||||
|
||||
const testNotificationHandler = async (notificationProviderId: number) => {
|
||||
(document.getElementById('test_notification') as HTMLDialogElement)?.showModal();
|
||||
const notificationTest = await testNotification(notificationProviderId);
|
||||
setNotificationTestId(notificationTest);
|
||||
;(document.getElementById("test_notification") as HTMLDialogElement)?.showModal()
|
||||
const notificationTest = await testNotification(notificationProviderId)
|
||||
setNotificationTestId(notificationTest)
|
||||
}
|
||||
|
||||
const getTypeIcon = (type: string) => {
|
||||
switch (type.toLowerCase()) {
|
||||
case "email":
|
||||
return "📧"
|
||||
case "slack":
|
||||
return "💬"
|
||||
case "discord":
|
||||
return "🎮"
|
||||
case "webhook":
|
||||
return "🔗"
|
||||
case "telegram":
|
||||
return "✈️"
|
||||
default:
|
||||
return "🔔"
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeBadgeColor = (type: string) => {
|
||||
switch (type.toLowerCase()) {
|
||||
case "email":
|
||||
return "badge-primary"
|
||||
case "slack":
|
||||
return "badge-secondary"
|
||||
case "discord":
|
||||
return "badge-accent"
|
||||
case "webhook":
|
||||
return "badge-info"
|
||||
case "telegram":
|
||||
return "badge-success"
|
||||
default:
|
||||
return "badge-neutral"
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-bold">Notification Provider Settings</h2>
|
||||
<p className="text-sm opacity-70">Manage your notification providers</p>
|
||||
<div className="w-full bg-base-200 p-6 rounded-2xl border border-stone-800">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/10 rounded-lg">
|
||||
<Settings className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<button className="btn btn-primary" onClick={() => (document.getElementById('add_notification') as HTMLDialogElement)?.showModal()}>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">Notification Providers</h2>
|
||||
<p className="text-sm opacity-70">Manage your notification providers and test connections</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary gap-2 shadow-lg hover:shadow-xl transition-shadow"
|
||||
onClick={() => (document.getElementById("add_notification") as HTMLDialogElement)?.showModal()}
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Provider
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-64 w-full">
|
||||
<Loading />
|
||||
</div>
|
||||
) : notifications && notifications.length > 0 ? (
|
||||
<div className="rounded-xl overflow-hidden border border-base-200 mt-4">
|
||||
<div className='overflow-x-auto'>
|
||||
<table className='table table-zebra table-pin-cols'>
|
||||
<div className="card bg-base-100 shadow-lg border border-base-300">
|
||||
<div className="card-body p-0">
|
||||
|
||||
{/* Table Content */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="table table-zebra">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th className='w-24 text-center'>Actions</th>
|
||||
<tr className="border-base-300">
|
||||
<th className="bg-base-200/30">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">ID</span>
|
||||
</th>
|
||||
<th className="bg-base-200/30">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">
|
||||
Provider
|
||||
</span>
|
||||
</th>
|
||||
<th className="bg-base-200/30">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">Type</span>
|
||||
</th>
|
||||
<th className="bg-base-200/30">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">
|
||||
Status
|
||||
</span>
|
||||
</th>
|
||||
<th className="bg-base-200/30 text-center">
|
||||
<span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">
|
||||
Actions
|
||||
</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{notifications.map((notification: any) => (
|
||||
<tr key={notification.id}>
|
||||
<td>{notification.id}</td>
|
||||
<td>{notification.name}</td>
|
||||
<td>{notification.type}</td>
|
||||
{notifications.map((notification: any, index: number) => (
|
||||
<tr key={notification.id} className="hover:bg-base-200/50 transition-colors">
|
||||
<td>
|
||||
<div className='flex items-center gap-2'>
|
||||
<button className='btn btn-sm btn-success' onClick={() => testNotificationHandler(notification.id)}><Play className='w-4 h-4' /></button>
|
||||
<button className='btn btn-sm btn-error' onClick={() => {setDeleteNotificationId(notification.id); (document.getElementById('delete_notification') as HTMLDialogElement)?.showModal()}}><Trash2 className='w-4 h-4' /></button>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-sm font-semibold text-primary">
|
||||
{notification.id}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-2xl">{getTypeIcon(notification.type)}</div>
|
||||
<div>
|
||||
<div className="font-semibold text-base-content">{notification.name}</div>
|
||||
<div className="text-sm text-base-content/60">Provider #{notification.id}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className={`badge badge-outline badge-sm ${getTypeBadgeColor(notification.type)}`}>
|
||||
{notification.type}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="w-4 h-4 text-success" />
|
||||
<span className="text-sm font-medium text-success">Active</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<div className="tooltip tooltip-top" data-tip="Test Provider">
|
||||
<button
|
||||
className="btn btn-sm btn-success hover:btn-success/80 transition-colors shadow-md"
|
||||
onClick={() => testNotificationHandler(notification.id)}
|
||||
>
|
||||
<Play className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="tooltip tooltip-top" data-tip="Delete Provider">
|
||||
<button
|
||||
className="btn btn-sm btn-error hover:btn-error/80 transition-colors shadow-md"
|
||||
onClick={() => {
|
||||
setDeleteNotificationId(notification.id)
|
||||
;(document.getElementById("delete_notification") as HTMLDialogElement)?.showModal()
|
||||
}}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -67,24 +174,47 @@ export const NotificationProviderSettings = ({ onError, onSuccess }: { onError:
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className='pt-4'>
|
||||
<div className="flex flex-col items-center justify-center py-12 bg-base-300 rounded-xl">
|
||||
<div className="bg-base-100 p-4 rounded-full mb-4">
|
||||
<Bell className="h-8 w-8 text-base-content/50" />
|
||||
</div>
|
||||
<p className="text-base-content/70 mb-4">No notification providers have been added yet.</p>
|
||||
) : (
|
||||
<div className="card bg-base-100 shadow-lg border border-base-300">
|
||||
<div className="card-body">
|
||||
<div className="flex flex-col items-center justify-center py-16">
|
||||
<div className="relative mb-6">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full flex items-center justify-center">
|
||||
<Bell className="w-10 h-10 text-primary/60" />
|
||||
</div>
|
||||
<div className="absolute -top-1 -right-1 w-6 h-6 bg-warning rounded-full flex items-center justify-center">
|
||||
<AlertCircle className="w-4 h-4 text-warning-content" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-base-content mb-2">No Providers Configured</h3>
|
||||
<p className="text-base-content/70 text-center mb-6 max-w-md">
|
||||
Get started by adding your first notification provider. You can configure email, Slack, Discord,
|
||||
webhooks, and more.
|
||||
</p>
|
||||
<button
|
||||
className="btn btn-primary gap-2 shadow-lg hover:shadow-xl transition-shadow"
|
||||
onClick={() => (document.getElementById("add_notification") as HTMLDialogElement)?.showModal()}
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
Add Your First Provider
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Dialogs */}
|
||||
<AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
|
||||
{deleteNotificationId && (
|
||||
<DeleteNotification notificationId={deleteNotificationId} onNotificationDeleted={loadNotifications} onError={onError} onSuccess={onSuccess} />
|
||||
)}
|
||||
{notificationTestId && (
|
||||
<TestNotification notificationTestId={notificationTestId} onError={onError} />
|
||||
<DeleteNotification
|
||||
notificationId={deleteNotificationId}
|
||||
onNotificationDeleted={loadNotifications}
|
||||
onError={onError}
|
||||
onSuccess={onSuccess}
|
||||
/>
|
||||
)}
|
||||
{notificationTestId && <TestNotification notificationTestId={notificationTestId} onError={onError} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
@ -202,7 +202,7 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
<p className="text-sm opacity-70">Monitor server resources and performance</p>
|
||||
</div>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium ${
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium w-20 text-center ${
|
||||
serverSettings?.enabled ? "bg-success text-white" : "bg-error text-white"
|
||||
}`}
|
||||
>
|
||||
@ -419,7 +419,7 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
|
||||
<p className="text-sm opacity-70">Configure application monitoring notifications</p>
|
||||
</div>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium ${
|
||||
className={`px-3 py-1 rounded-full text-xs font-medium w-20 text-center ${
|
||||
applicationsSettings?.enabled ? "bg-success text-white" : "bg-error text-white"
|
||||
}`}
|
||||
>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user