Notification Settings Loading

This commit is contained in:
headlesdev 2025-05-25 01:10:21 +02:00
parent cfc9bc5951
commit 2203daa2c3
2 changed files with 38 additions and 33 deletions

View File

@ -5,9 +5,10 @@ import AddNotification from '@/components/dialogues/AddNotification';
import DeleteNotification from '@/components/dialogues/DeleteNotification';
import useNotifications from '@/hooks/useNotifications';
import { Plus, Trash2, Play, Bell } from 'lucide-react';
import Loading from '@/components/Loading';
export const NotificationSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
const { loadNotifications, notifications } = useNotifications();
const { loadNotifications, notifications, loading } = useNotifications();
const [deleteNotificationId, setDeleteNotificationId] = useState<number | null>(null);
return (
@ -23,43 +24,47 @@ export const NotificationSettings = ({ onError, onSuccess }: { onError: (message
Add Provider
</button>
</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'>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Type</th>
<th className='w-24 text-center'>Actions</th>
</tr>
</thead>
<tbody>
{notifications.map((notification: any) => (
<tr key={notification.id}>
<td>{notification.id}</td>
<td>{notification.name}</td>
<td>{notification.type}</td>
<td>
<div className='flex items-center gap-2'>
<button className='btn btn-sm btn-success'><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>
</td>
{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'>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Type</th>
<th className='w-24 text-center'>Actions</th>
</tr>
))}
</tbody>
</table>
</thead>
<tbody>
{notifications.map((notification: any) => (
<tr key={notification.id}>
<td>{notification.id}</td>
<td>{notification.name}</td>
<td>{notification.type}</td>
<td>
<div className='flex items-center gap-2'>
<button className='btn btn-sm btn-success'><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>
</td>
</tr>
))}
</tbody>
</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="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>
</div>
)}