Delete & View Notification Providers

components/cards/settings/NotificationSettings.tsx

@@ -2,11 +2,13 @@
 
 import { useState } from 'react';
 import AddNotification from '@/components/dialogues/AddNotification';
+import DeleteNotification from '@/components/dialogues/DeleteNotification';
 import useNotifications from '@/hooks/useNotifications';
-import { Plus } from 'lucide-react';
+import { Plus, Trash2, Play } from 'lucide-react';
 
 export const NotificationSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
-    const { loadNotifications } = useNotifications();
+    const { loadNotifications, notifications } = useNotifications();
+    const [deleteNotificationId, setDeleteNotificationId] = useState<number | null>(null);
 
   return (
     <div>
@@ -21,7 +23,37 @@ export const NotificationSettings = ({ onError, onSuccess }: { onError: (message
                     Add Provider
                 </button>
             </div>
+            <div className='overflow-x-auto pt-4'>
+                <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>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
             <AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
+            {deleteNotificationId && (
+                <DeleteNotification notificationId={deleteNotificationId} onNotificationDeleted={loadNotifications} onError={onError} onSuccess={onSuccess} />
+            )}
         </div>
     </div>
   );

components/dialogues/DeleteNotification.tsx

@@ -0,0 +1,73 @@
+"use client";
+import useNotifications from "@/hooks/useNotifications";
+import { Trash2, AlertTriangle } from "lucide-react";
+import { useState } from "react";
+
+interface DeleteNotificationProps {
+    notificationId: number;
+    onNotificationDeleted?: () => void;
+    onError?: (message: string) => void;
+    onSuccess?: (message: string) => void;
+}
+
+export default function DeleteNotification({ notificationId, onNotificationDeleted, onError, onSuccess }: DeleteNotificationProps) {
+    const { deleteNotification } = useNotifications();
+
+    const handleDelete = async () => {
+        const response = deleteNotification(notificationId);
+        if (typeof response === "string") {
+            onError && onError(response)
+            return
+        }
+
+        try {
+            const successMessage = await response
+            if (onNotificationDeleted && successMessage) {
+                onNotificationDeleted()
+                onSuccess && onSuccess(successMessage)
+            }
+        } catch (apiError: any) {
+            onError && onError(apiError)
+        }
+    }
+
+    return (
+        <div>
+            <dialog id="delete_notification" className="modal">
+                <div className="modal-box w-11/12 max-w-md border-l-4 border-error">
+                    <div className="flex items-center gap-3 mb-3">
+                        <div className="bg-error text-error-content rounded-full p-2 flex items-center justify-center">
+                            <Trash2 className="h-6 w-6" />
+                        </div>
+                        <h3 className="font-bold text-xl">Delete Notification Provider</h3>
+                    </div>
+                    
+                    <div className="bg-base-200 p-4 rounded-lg mb-4">
+                        <p className="text-sm">
+                            <span className="font-medium">Are you sure you want to delete this Notification Provider?</span>
+                        </p>
+                        <p className="text-sm mt-2">
+                            You will no longer receive notifications from this provider.
+                        </p>
+                        <div className="mt-2 flex items-center gap-2 text-error">
+                            <AlertTriangle className="h-5 w-5" />
+                            <span className="font-bold">This action cannot be undone.</span>
+                        </div>
+                    </div>
+                    
+                    <div className="modal-action">
+                        <form method="dialog" className="flex gap-2">
+                            <button className="btn btn-outline">Cancel</button>
+                            <button 
+                                className="btn btn-error text-error-content" 
+                                onClick={handleDelete}
+                            >
+                                Delete Notification Provider
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </dialog>
+        </div>
+    )
+}