External/CoreControl
1
0
Fork 0
mirror of https://github.com/crocofied/CoreControl.git synced 2025-12-17 15:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Notification Settings UI Improvements

Browse Source
This commit is contained in:
headlesdev 2025-05-26 15:34:38 +02:00
parent 22c7ce29e3
commit 90644d8a5f
2 changed files with 213 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

234
components/cards/settings/NotificationProviderSettings.tsx
View File

@ -1,64 +1,171 @@
'use client'; "use client"
import { useState } from 'react'; import { useState } from "react"
import AddNotification from '@/components/dialogues/AddNotification'; import AddNotification from "@/components/dialogues/AddNotification"
import DeleteNotification from '@/components/dialogues/DeleteNotification'; import DeleteNotification from "@/components/dialogues/DeleteNotification"
import TestNotification from '@/components/dialogues/TestNotification'; import TestNotification from "@/components/dialogues/TestNotification"
import useNotifications from '@/hooks/useNotifications'; import useNotifications from "@/hooks/useNotifications"
import { Plus, Trash2, Play, Bell } from 'lucide-react'; import { Plus, Trash2, Play, Bell, Settings, CheckCircle, AlertCircle } from "lucide-react"
import Loading from '@/components/Loading'; 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);
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) => { const testNotificationHandler = async (notificationProviderId: number) => {
(document.getElementById('test_notification') as HTMLDialogElement)?.showModal(); ;(document.getElementById("test_notification") as HTMLDialogElement)?.showModal()
const notificationTest = await testNotification(notificationProviderId); const notificationTest = await testNotification(notificationProviderId)
setNotificationTestId(notificationTest); 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 ( return (
<div> <div className="w-full bg-base-200 p-6 rounded-2xl border border-stone-800">
<div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800"> {/* Header */}
<div className="flex items-center justify-between"> <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
<div> <div className="flex items-center gap-3">
<h2 className="text-lg font-bold">Notification Provider Settings</h2> <div className="p-2 bg-primary/10 rounded-lg">
<p className="text-sm opacity-70">Manage your notification providers</p> <Settings className="w-6 h-6 text-primary" />
</div> </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" /> <Plus className="w-5 h-5" />
Add Provider Add Provider
</button> </button>
</div> </div>
{/* Content */}
{loading ? ( {loading ? (
<div className="flex justify-center items-center h-64 w-full"> <div className="flex justify-center items-center h-64 w-full">
<Loading /> <Loading />
</div> </div>
) : notifications && notifications.length > 0 ? ( ) : notifications && notifications.length > 0 ? (
<div className="rounded-xl overflow-hidden border border-base-200 mt-4"> <div className="card bg-base-100 shadow-lg border border-base-300">
<div className='overflow-x-auto'> <div className="card-body p-0">
<table className='table table-zebra table-pin-cols'>
{/* Table Content */}
<div className="overflow-x-auto">
<table className="table table-zebra">
<thead> <thead>
<tr> <tr className="border-base-300">
<th>#</th> <th className="bg-base-200/30">
<th>Name</th> <span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">ID</span>
<th>Type</th> </th>
<th className='w-24 text-center'>Actions</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> </tr>
</thead> </thead>
<tbody> <tbody>
{notifications.map((notification: any) => ( {notifications.map((notification: any, index: number) => (
<tr key={notification.id}> <tr key={notification.id} className="hover:bg-base-200/50 transition-colors">
<td>{notification.id}</td>
<td>{notification.name}</td>
<td>{notification.type}</td>
<td> <td>
<div className='flex items-center gap-2'> <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> <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-sm font-semibold text-primary">
<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> {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> </div>
</td> </td>
</tr> </tr>
@ -67,24 +174,47 @@ export const NotificationProviderSettings = ({ onError, onSuccess }: { onError:
</table> </table>
</div> </div>
</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> </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>
</div> </div>
)} )}
{/* Dialogs */}
<AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} /> <AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
{deleteNotificationId && ( {deleteNotificationId && (
<DeleteNotification notificationId={deleteNotificationId} onNotificationDeleted={loadNotifications} onError={onError} onSuccess={onSuccess} /> <DeleteNotification
)} notificationId={deleteNotificationId}
{notificationTestId && ( onNotificationDeleted={loadNotifications}
<TestNotification notificationTestId={notificationTestId} onError={onError} /> onError={onError}
onSuccess={onSuccess}
/>
)} )}
{notificationTestId && <TestNotification notificationTestId={notificationTestId} onError={onError} />}
</div> </div>
</div> )
); }
};

4
components/cards/settings/NotificationSettings.tsx
View File

@ -202,7 +202,7 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
<p className="text-sm opacity-70">Monitor server resources and performance</p> <p className="text-sm opacity-70">Monitor server resources and performance</p>
</div> </div>
<span <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" 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> <p className="text-sm opacity-70">Configure application monitoring notifications</p>
</div> </div>
<span <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" applicationsSettings?.enabled ? "bg-success text-white" : "bg-error text-white"
}`} }`}
> >