Add Notification Provider

app/api/notifications/add/route.ts

@@ -14,8 +14,10 @@ export async function POST(request: NextRequest) {
     const body = await request.json();
     const { name, type, config } = schema.parse(body);
 
+    const parsedConfig = JSON.parse(config);
+
     const notification = await prisma.notificationProvider.create({
-        data: { name, type: type as NotificationType, config, tests: {} },
+        data: { name, type: type as NotificationType, config: parsedConfig},
     });
 
     return NextResponse.json({ notification }, { status: 201 });

app/dashboard/settings/SettingsPage.tsx

@@ -2,8 +2,10 @@
 
 import Sidebar from '@/components/Sidebar';
 import ErrorToast from '@/components/Error';
+import SuccessToast from '@/components/Success';
 import { ProfileSettings } from '@/components/cards/settings/ProfileSettings';
 import { PasswordSettings } from '@/components/cards/settings/PasswordSettings';
+import { NotificationSettings } from '@/components/cards/settings/NotificationSettings';
 import { useState } from 'react';
 
 interface SettingsPageProps {
@@ -14,7 +16,7 @@ interface SettingsPageProps {
 
 export default function SettingsPage({ username, name, email }: SettingsPageProps) {
   const [error, setError] = useState('');
-
+  const [success, setSuccess] = useState('');
 
   return (
     <div>
@@ -57,13 +59,14 @@ export default function SettingsPage({ username, name, email }: SettingsPageProp
             <div className="tab-content relative bg-base-100 pl-4 pt-4">
               <div className="absolute -top-[3px] left-6 right-0 h-[2px] bg-stone-800"></div>
               <div className="flex flex-col gap-4">
-                test
+                <NotificationSettings onError={setError} onSuccess={setSuccess} />
               </div>
             </div>
           </div>
         </main>
       </Sidebar>
       <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
+      <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
     </div>
   );
 }

components/cards/settings/NotificationSettings.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+import AddNotification from '@/components/dialogues/AddNotification';
+import useNotifications from '@/hooks/useNotifications';
+import { Plus } from 'lucide-react';
+
+export const NotificationSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
+    const { loadNotifications } = useNotifications();
+
+  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 Settings</h2>
+                    <p className="text-sm opacity-70">Manage your notification settings</p>
+                </div>
+                <button className="btn btn-primary" onClick={() => (document.getElementById('add_notification') as HTMLDialogElement)?.showModal()}>
+                    <Plus className="w-5 h-5" />
+                    Add Provider
+                </button>
+            </div>
+            <AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
+        </div>
+    </div>
+  );
+};

components/dialogues/AddNotification.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import { useState } from "react";
+import useNotification from "@/hooks/useNotifications";
+import { Bell, Text, BellRing, Braces } from "lucide-react";
+
+interface AddNotificationProps {
+    onNotificationAdded?: () => void;
+    onError?: (message: string) => void;
+    onSuccess?: (message: string) => void;
+}
+
+export default function AddNotification({ onNotificationAdded, onError, onSuccess }: AddNotificationProps) {
+    const [name, setName] = useState("");
+    const [type, setType] = useState("Select a type");
+    const [telegramBotToken, setTelegramBotToken] = useState("");
+    const [telegramChatId, setTelegramChatId] = useState("");
+
+    const { addNotification } = useNotification();
+
+    const addNotificationHandler = async () => {
+        const config = type === "TELEGRAM" ? `{ "token": "${telegramBotToken}", "chat_id": "${telegramChatId}" }` : "";
+        const response = addNotification(name, type, config);
+        if (typeof response === "string") {
+            onError && onError(response)
+            return
+        }
+        try {
+            const successMessage = await response
+            if (onSuccess && successMessage) {
+                onSuccess('Notification Provider added successfully')
+                onNotificationAdded && onNotificationAdded()
+            }
+        } catch (apiError: any) {
+            onError && onError(apiError)
+        } finally {
+            setName("")
+            setType("Select a type")
+            setTelegramBotToken("")
+            setTelegramChatId("")
+        }
+    }
+
+    return (
+        <div>
+            <dialog id="add_notification" className="modal">
+                <div className="modal-box w-11/12 max-w-3xl border-l-4 border-success">
+                    <div className="flex items-center gap-3 mb-3">
+                        <div className="bg-success text-success-content rounded-full p-2 flex items-center justify-center">
+                            <Bell className="h-6 w-6" />
+                        </div>
+                        <h2 className="text-xl font-bold">Add Notification</h2>
+                    </div>
+
+                    <div className="bg-base-200 p-4 rounded-lg mb-4">
+                        <div className="space-y-4">
+                            <div className="form-control">
+                                <div className="flex items-center gap-2">
+                                    <label className="label">
+                                        <Text className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">Name</span>
+                                    </label>
+                                </div>
+                                <input type="text" className="input input-bordered w-full" placeholder="e.g. Telegram" value={name} onChange={(e) => setName(e.target.value)} />
+                            </div>
+                            <div className="form-control">
+                                <div className="flex items-center gap-2">
+                                    <label className="label">
+                                        <BellRing className="h-4 w-4 opacity-70" />
+                                        <span className="label-text font-medium">Type</span>
+                                    </label>
+                                </div>
+                                <select className="select select-bordered w-full" value={type} onChange={(e) => setType(e.target.value)}>
+                                    <option disabled>Select a type</option>
+                                    <option value="TELEGRAM">Telegram</option>
+                                </select>
+                            </div>
+                            {type === "TELEGRAM" && (
+                                <div className="form-control">
+                                    <div className="flex items-center gap-2">
+                                        <label className="label">
+                                            <Braces className="h-4 w-4 opacity-70" />
+                                            <span className="label-text font-medium">Config</span>
+                                        </label>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <input type="text" className="input input-bordered w-full" placeholder="Telegram Bot Token" value={telegramBotToken} onChange={(e) => setTelegramBotToken(e.target.value)} />
+                                        <input type="text" className="input input-bordered w-full" placeholder="Telegram Chat ID" value={telegramChatId} onChange={(e) => setTelegramChatId(e.target.value)} />
+                                    </div>
+                                </div>
+                            )}
+                        </div>  
+                    </div>
+                    <div className="modal-action">
+                        <form method="dialog" className="flex gap-3 w-full justify-end">
+                            <button className="btn btn-outline">Cancel</button>
+                            <button className="btn btn-success text-success-content" onClick={addNotificationHandler}>Add</button>
+                        </form>
+                    </div>
+                </div>
+            </dialog>
+        </div>
+    )
+}

components/dialogues/AddSite.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import axios from "axios";
 import ErrorToast from "@/components/Error";
 import SuccessToast from "@/components/Success";
 import { Building2, MapPin, FileText } from "lucide-react";

hooks/useNotifications.ts

@@ -25,6 +25,9 @@ const useNotifications = () => {
         return axios.post('/api/notifications/add', { name, type, config })
         .then((response) => {
             return response.data.notification;
+        })
+        .catch(err => {
+            throw err.response?.data?.error || 'An error occurred';
         });
     };
 
@@ -38,5 +41,13 @@ const useNotifications = () => {
         });
     }
 
-    return { notifications, loading, addNotification, deleteNotification };
+    return {
-}
+        notifications,
+        loading,
+        addNotification,
+        deleteNotification,
+        loadNotifications
+    };
+}
+
+export default useNotifications;