From 22c7ce29e3c4dcff5009ca4033ff465a2f3549ed Mon Sep 17 00:00:00 2001
From: headlesdev <damian.bergemann@outlook.com>
Date: Mon, 26 May 2025 15:29:20 +0200
Subject: [PATCH] Finisch Notification Settings System

---
 .../cards/settings/NotificationSettings.tsx   | 431 ++++++++++++------
 hooks/useNotifications.ts                     |   4 +-
 2 files changed, 292 insertions(+), 143 deletions(-)

diff --git a/components/cards/settings/NotificationSettings.tsx b/components/cards/settings/NotificationSettings.tsx
index 6fb7abd..ad0990a 100644
--- a/components/cards/settings/NotificationSettings.tsx
+++ b/components/cards/settings/NotificationSettings.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import useNotifications from "@/hooks/useNotifications"
-import { CircleHelp, Server, Smartphone } from "lucide-react"
+import { Check, CircleHelp, Copy, Server, Smartphone } from "lucide-react"
 
 interface NotificationSettingsProps {
   onError: (message: string) => void
@@ -18,6 +18,9 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
   } = useNotifications()
   const [applicationsSettings, setApplicationsSettings] = useState<any>(null)
   const [serverSettings, setServerSettings] = useState<any>(null)
+  const [copiedVariable, setCopiedVariable] = useState<string | null>(null)
+  const [serverCollapsed, setServerCollapsed] = useState(true)
+  const [applicationCollapsed, setApplicationCollapsed] = useState(true)
 
   const fetchNotificationSettings = async () => {
     const applicationsSettings = await getNotificationApplicationsSettings()
@@ -26,23 +29,23 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
     setServerSettings(
       serverSettings || {
         enabled: false,
-        statusChange: false,
-        cpuLimit: 0,
-        gpuLimit: 0,
-        memoryLimit: 0,
-        diskLimit: 0,
-        temperatureLimit: 0,
-        notificationTextStatus: "",
-        notificationTextCpu: "",
-        notificationTextGpu: "",
-        notificationTextMemory: "",
-        notificationTextDisk: "",
-        notificationTextTemperature: "",
-        notificationCpu: false,
-        notificationGpu: false,
-        notificationMemory: false,
-        notificationDisk: false,
-        notificationTemperature: false,
+        statusChange: true,
+        cpuLimit: 80,
+        gpuLimit: 80,
+        memoryLimit: 80,
+        diskLimit: 80,
+        temperatureLimit: 80,
+        notificationTextStatus: "{servername} went {status}",
+        notificationTextCpu: "{servername} CPU usage is high at {cpu}%",
+        notificationTextGpu: "{servername} GPU usage is high at {gpu}%",
+        notificationTextMemory: "{servername} Memory usage is high at {memory}%",
+        notificationTextDisk: "{servername} Disk usage is high at {disk}%",
+        notificationTextTemperature: "{servername} Temperature is high at {temperature}°C",
+        notificationCpu: true,
+        notificationGpu: true,
+        notificationMemory: true,
+        notificationDisk: true,
+        notificationTemperature: true,
       },
     )
 
@@ -50,10 +53,10 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
       applicationsSettings || {
         enabled: false,
         statusChange: false,
-        latencyLimit: 0,
-        notificationTextStatus: "",
-        notificationTextLatency: "",
-        notificationLatency: false,
+        latencyLimit: 1000,
+        notificationTextStatus: "{appname} went {status}",
+        notificationTextLatency: "{appname} latency is high at {latency}ms",
+        notificationLatency: true,
       },
     )
   }
@@ -63,8 +66,37 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
   }, [])
 
   const saveNotificationSettings = async () => {
-    await editNotificationServerSettings(serverSettings)
-    await editNotificationApplicationsSettings(applicationsSettings)
+    const response = editNotificationServerSettings(serverSettings)
+    if (typeof response === "string") {
+      onError && onError(response)
+      return
+    }
+
+    const response2 = editNotificationApplicationsSettings(applicationsSettings)
+    if (typeof response2 === "string") {
+      onError && onError(response2)
+      return
+    }
+    try {
+      const successMessage = await response
+      const successMessage2 = await response2
+      console.log(successMessage, successMessage2)
+      if (onSuccess && successMessage && successMessage2) {
+        onSuccess("Notification settings saved successfully")
+      }
+    } catch (apiError: any) {
+      onError && onError(apiError)
+    }
+  }
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopiedVariable(text)
+      setTimeout(() => setCopiedVariable(null), 2000)
+    } catch (err) {
+      console.error("Failed to copy text: ", err)
+    }
   }
 
   const ResourceThresholdRow = ({
@@ -88,43 +120,58 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
     onMessageChange: (value: string) => void
     disabled: boolean
   }) => (
-    <div className="card bg-base-100 shadow-sm border border-base-300">
+    <div className="card bg-base-100 shadow-sm border border-base-300 mb-3">
       <div className="card-body p-4">
-        <div className="flex flex-col lg:flex-row lg:items-center gap-4">
-          <div className="flex items-center gap-3 lg:w-48">
-            <input
-              type="checkbox"
-              className="checkbox checkbox-primary checkbox-sm"
-              checked={checked}
-              onChange={onCheckedChange}
-              disabled={disabled}
-            />
-            <span className="font-medium text-sm">{label}</span>
+        <div className="space-y-4">
+          {/* Header Row - Checkbox and Threshold */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <input
+                type="checkbox"
+                className="checkbox checkbox-primary"
+                checked={checked}
+                onChange={onCheckedChange}
+                disabled={disabled}
+              />
+              <span className="font-medium">{label}</span>
+            </div>
+
+            <div className="flex items-center gap-2">
+              <span className="text-sm text-base-content/70">Threshold:</span>
+              <div className="flex items-center gap-1">
+                <input
+                  type="number"
+                  className="input input-bordered input-sm w-20 text-center"
+                  value={value}
+                  onChange={(e) => onValueChange(e.target.value)}
+                  disabled={disabled}
+                  min="0"
+                  max={unit === "°C" ? "200" : "100"}
+                />
+                <span className="text-sm font-medium text-base-content/80">{unit}</span>
+              </div>
+            </div>
           </div>
 
-          <div className="flex items-center gap-2 lg:w-32">
-            <input
-              type="number"
-              className="input input-bordered input-sm w-20"
-              value={value}
-              onChange={(e) => onValueChange(e.target.value)}
-              disabled={disabled}
-            />
-            <span className="text-sm text-base-content/70">{unit}</span>
-          </div>
-
-          <div className="flex items-center gap-2 flex-1">
+          {/* Message Template Row */}
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-medium text-base-content/80">Notification Message:</span>
+              <div
+                className="tooltip tooltip-right"
+                data-tip="Use template variables like {servername}, {status}, etc."
+              >
+                <CircleHelp className="w-4 h-4 text-base-content/50" />
+              </div>
+            </div>
             <input
               type="text"
-              className="input input-bordered input-sm flex-1"
-              placeholder={`${label} alert message...`}
+              className="input input-bordered input-sm w-full"
+              placeholder={`Enter ${label.toLowerCase()} notification message...`}
               value={message}
               onChange={(e) => onMessageChange(e.target.value)}
               disabled={disabled}
             />
-            <div className="tooltip" data-tip="Notification message template">
-              <CircleHelp className="w-4 h-4 text-base-content/50" />
-            </div>
           </div>
         </div>
       </div>
@@ -132,54 +179,66 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
   )
 
   return (
-    <div>
-      <div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
-        {/* Header */}
-        <div className="text-center lg:text-left">
-          <h2 className="text-lg font-bold">Notification Settings</h2>
-          <p className="text-sm opacity-70">Configure monitoring alerts for your servers and applications</p>
-        </div>
+    <div className="w-full bg-base-200 p-6 rounded-2xl border border-stone-800">
+      {/* Header */}
+      <div className="text-center lg:text-left mb-6">
+        <h2 className="text-xl font-bold">Notification Settings</h2>
+        <p className="text-sm opacity-70 mt-1">Configure monitoring alerts for your servers and applications</p>
+      </div>
 
-        {/* Main Content */}
-        <div className="grid gap-6 mt-4">
-          {/* Server Monitoring Section */}
-          <div className="card bg-base-100 shadow-lg border border-base-300">
-            <div className="card-body">
-              <div className="flex items-center gap-3 mb-6">
-                <div className="p-2 bg-primary/10 rounded-lg">
-                  <Server className="w-6 h-6 text-primary" />
-                </div>
-                <div>
-                  <h3 className="text-lg font-bold">Server Monitoring</h3>
-                  <p className="text-sm opacity-70">Monitor server resources and performance</p>
-                </div>
+      <div className="space-y-8">
+        {/* Server Monitoring Section */}
+        <div className="card bg-base-100 shadow-lg border border-base-300">
+          <div className={`card-body p-6 ${serverCollapsed ? "pb-2" : ""}`}>
+            <div
+              className={`flex items-center gap-3 ${serverCollapsed ? "mb-2" : "mb-6"} cursor-pointer hover:bg-base-200 -m-2 p-2 rounded-lg transition-colors`}
+              onClick={() => setServerCollapsed(!serverCollapsed)}
+            >
+              <div className="p-2 bg-primary/10 rounded-lg">
+                <Server className="w-6 h-6 text-primary" />
               </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-bold">Server Monitoring</h3>
+                <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 ${
+                  serverSettings?.enabled ? "bg-success text-white" : "bg-error text-white"
+                }`}
+              >
+                {serverSettings?.enabled ? "Active" : "Inactive"}
+              </span>
+              <div className={`transition-transform duration-200 ${serverCollapsed ? "" : "rotate-180"}`}>
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+            </div>
 
+            <div
+              className={`transition-all duration-300 overflow-hidden ${serverCollapsed ? "max-h-0 opacity-0" : "max-h-none opacity-100"}`}
+            >
               {/* Master Toggle */}
               <div className="card bg-base-200 mb-6">
                 <div className="card-body p-4">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <input
-                        type="checkbox"
-                        className="toggle toggle-primary toggle-lg"
-                        checked={serverSettings?.enabled}
-                        onChange={() => setServerSettings({ ...serverSettings, enabled: !serverSettings.enabled })}
-                      />
-                      <div>
-                        <h3 className="font-semibold">Enable Server Monitoring</h3>
-                        <p className="text-sm text-base-content/70">Turn on global server monitoring</p>
-                      </div>
-                    </div>
-                    <div className={`badge ${serverSettings?.enabled ? "badge-success" : "badge-neutral"}`}>
-                      {serverSettings?.enabled ? "Active" : "Inactive"}
+                  <div className="flex items-center gap-3">
+                    <input
+                      type="checkbox"
+                      className="toggle toggle-primary"
+                      checked={serverSettings?.enabled}
+                      onChange={() => setServerSettings({ ...serverSettings, enabled: !serverSettings.enabled })}
+                    />
+                    <div>
+                      <h4 className="font-semibold">Enable Server Monitoring</h4>
+                      <p className="text-sm text-base-content/70">Turn on global server monitoring notifications</p>
                     </div>
                   </div>
                 </div>
               </div>
 
-              {/* Status Change Alerts */}
-              <div className={`space-y-4 ${!serverSettings?.enabled ? "opacity-50" : ""}`}>
+              {/* Settings Content */}
+              <div className={`space-y-6 ${!serverSettings?.enabled ? "opacity-50" : ""}`}>
+                {/* Status Change Alerts */}
                 <div className="card bg-base-200">
                   <div className="card-body p-4">
                     <div className="flex flex-col lg:flex-row lg:items-center gap-4">
@@ -209,7 +268,7 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
                           }
                           disabled={!serverSettings?.enabled}
                         />
-                        <div className="tooltip" data-tip="Notification message template">
+                        <div className="tooltip tooltip-left" data-tip="Notification message template">
                           <CircleHelp className="w-4 h-4 text-base-content/50" />
                         </div>
                       </div>
@@ -218,13 +277,9 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
                 </div>
 
                 {/* Resource Thresholds */}
-                <div className="space-y-4">
-                  <div className="flex items-center gap-2 mb-4">
-                    <h4 className="text-base font-semibold">Resource Thresholds</h4>
-                    <div className="badge badge-outline badge-sm">Configure limits</div>
-                  </div>
-
-                  <div className="space-y-3">
+                <div>
+                  <h4 className="text-base font-semibold mb-4">Resource Thresholds</h4>
+                  <div className="space-y-0">
                     <ResourceThresholdRow
                       label="CPU Usage"
                       checked={serverSettings?.notificationCpu}
@@ -261,9 +316,11 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
                       }
                       value={serverSettings?.memoryLimit}
                       onValueChange={(value) => setServerSettings({ ...serverSettings, memoryLimit: value })}
-                      unit="GB"
+                      unit="%"
                       message={serverSettings?.notificationTextMemory}
-                      onMessageChange={(value) => setServerSettings({ ...serverSettings, notificationTextMemory: value })}
+                      onMessageChange={(value) =>
+                        setServerSettings({ ...serverSettings, notificationTextMemory: value })
+                      }
                       disabled={!serverSettings?.enabled}
                     />
 
@@ -301,50 +358,105 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
                     />
                   </div>
                 </div>
+
+                {/* Server Variables Reference */}
+                <div className="card bg-gradient-to-br from-base-200 to-base-300 border border-base-300 mt-6">
+                  <div className="card-body p-4">
+                    <div className="flex items-center gap-2 mb-3">
+                      <CircleHelp className="w-4 h-4 text-primary" />
+                      <h5 className="text-sm font-semibold">Available Server Variables</h5>
+                    </div>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+                      {[
+                        { var: "{servername}", desc: "Server name or hostname" },
+                        { var: "{status}", desc: "Current server status" },
+                        { var: "{cpu}", desc: "CPU usage percentage" },
+                        { var: "{gpu}", desc: "GPU usage percentage" },
+                        { var: "{memory}", desc: "Memory usage percentage" },
+                        { var: "{disk}", desc: "Disk usage percentage" },
+                        { var: "{temperature}", desc: "Temperature in Celsius" },
+                      ].map((item) => (
+                        <div
+                          key={item.var}
+                          className="group bg-base-100 border border-base-300 rounded-lg p-2 hover:border-primary hover:shadow-sm transition-all duration-200 cursor-pointer"
+                          onClick={() => copyToClipboard(item.var)}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex-1">
+                              <div className="font-mono text-xs font-semibold text-primary">{item.var}</div>
+                              <div className="text-xs text-base-content/70">{item.desc}</div>
+                            </div>
+                            <div className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                              {copiedVariable === item.var ? (
+                                <Check className="w-3 h-3 text-success" />
+                              ) : (
+                                <Copy className="w-3 h-3 text-base-content/50" />
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
+        </div>
 
-          {/* Application Monitoring Section */}
-          <div className="card bg-base-100 shadow-lg border border-base-300">
-            <div className="card-body">
-              <div className="flex items-center gap-3 mb-6">
-                <div className="p-2 bg-secondary/10 rounded-lg">
-                  <Smartphone className="w-6 h-6 text-secondary" />
-                </div>
-                <div>
-                  <h3 className="text-lg font-bold">Application Monitoring</h3>
-                  <p className="text-sm opacity-70">Monitor application performance and availability</p>
-                </div>
+        {/* Application Monitoring Section */}
+        <div className="card bg-base-100 shadow-lg border border-base-300">
+          <div className={`card-body p-6 ${applicationCollapsed ? "pb-2" : ""}`}>
+            <div
+              className={`flex items-center gap-3 ${applicationCollapsed ? "mb-2" : "mb-6"} cursor-pointer hover:bg-base-200 -m-2 p-2 rounded-lg transition-colors`}
+              onClick={() => setApplicationCollapsed(!applicationCollapsed)}
+            >
+              <div className="p-2 bg-secondary/10 rounded-lg">
+                <Smartphone className="w-6 h-6 text-secondary" />
               </div>
+              <div className="flex-1">
+                <h3 className="text-lg font-bold">Application Monitoring</h3>
+                <p className="text-sm opacity-70">Configure application monitoring notifications</p>
+              </div>
+              <span
+                className={`px-3 py-1 rounded-full text-xs font-medium ${
+                  applicationsSettings?.enabled ? "bg-success text-white" : "bg-error text-white"
+                }`}
+              >
+                {applicationsSettings?.enabled ? "Active" : "Inactive"}
+              </span>
+              <div className={`transition-transform duration-200 ${applicationCollapsed ? "" : "rotate-180"}`}>
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </div>
+            </div>
 
+            <div
+              className={`transition-all duration-300 overflow-hidden ${applicationCollapsed ? "max-h-0 opacity-0" : "max-h-none opacity-100"}`}
+            >
               {/* Master Toggle */}
               <div className="card bg-base-200 mb-6">
                 <div className="card-body p-4">
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <input
-                        type="checkbox"
-                        className="toggle toggle-secondary toggle-lg"
-                        checked={applicationsSettings?.enabled}
-                        onChange={() =>
-                          setApplicationsSettings({ ...applicationsSettings, enabled: !applicationsSettings.enabled })
-                        }
-                      />
-                      <div>
-                        <h3 className="font-semibold">Enable Application Monitoring</h3>
-                        <p className="text-sm text-base-content/70">Turn on global application monitoring</p>
-                      </div>
-                    </div>
-                    <div className={`badge ${applicationsSettings?.enabled ? "badge-success" : "badge-neutral"}`}>
-                      {applicationsSettings?.enabled ? "Active" : "Inactive"}
+                  <div className="flex items-center gap-3">
+                    <input
+                      type="checkbox"
+                      className="toggle toggle-secondary"
+                      checked={applicationsSettings?.enabled}
+                      onChange={() =>
+                        setApplicationsSettings({ ...applicationsSettings, enabled: !applicationsSettings.enabled })
+                      }
+                    />
+                    <div>
+                      <h4 className="font-semibold">Enable Application Monitoring</h4>
+                      <p className="text-sm text-base-content/70">Turn on global application monitoring</p>
                     </div>
                   </div>
                 </div>
               </div>
 
               {/* Application Settings */}
-              <div className={`space-y-4 ${!applicationsSettings?.enabled ? "opacity-50" : ""}`}>
+              <div className={`space-y-6 ${!applicationsSettings?.enabled ? "opacity-50" : ""}`}>
                 {/* Status Change Alerts */}
                 <div className="card bg-base-200">
                   <div className="card-body p-4">
@@ -378,7 +490,7 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
                           }
                           disabled={!applicationsSettings?.enabled}
                         />
-                        <div className="tooltip" data-tip="Notification message template">
+                        <div className="tooltip tooltip-left" data-tip="Notification message template">
                           <CircleHelp className="w-4 h-4 text-base-content/50" />
                         </div>
                       </div>
@@ -386,13 +498,9 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
                   </div>
                 </div>
 
-                {/* Latency Threshold */}
-                <div className="space-y-4">
-                  <div className="flex items-center gap-2 mb-4">
-                    <h4 className="text-base font-semibold">Performance Thresholds</h4>
-                    <div className="badge badge-outline badge-sm">Configure limits</div>
-                  </div>
-
+                {/* Performance Thresholds */}
+                <div>
+                  <h4 className="text-base font-semibold mb-4">Performance Thresholds</h4>
                   <ResourceThresholdRow
                     label="Latency Threshold"
                     checked={applicationsSettings?.notificationLatency}
@@ -403,7 +511,9 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
                       })
                     }
                     value={applicationsSettings?.latencyLimit}
-                    onValueChange={(value) => setApplicationsSettings({ ...applicationsSettings, latencyLimit: Number(value) })}
+                    onValueChange={(value) =>
+                      setApplicationsSettings({ ...applicationsSettings, latencyLimit: Number(value) })
+                    }
                     unit="ms"
                     message={applicationsSettings?.notificationTextLatency}
                     onMessageChange={(value) =>
@@ -412,14 +522,53 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
                     disabled={!applicationsSettings?.enabled}
                   />
                 </div>
+
+                {/* Application Variables Reference */}
+                <div className="card bg-gradient-to-br from-base-200 to-base-300 border border-base-300 mt-6">
+                  <div className="card-body p-4">
+                    <div className="flex items-center gap-2 mb-3">
+                      <CircleHelp className="w-4 h-4 text-secondary" />
+                      <h5 className="text-sm font-semibold">Available Application Variables</h5>
+                    </div>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                      {[
+                        { var: "{appname}", desc: "Application name" },
+                        { var: "{status}", desc: "Application status" },
+                        { var: "{latency}", desc: "Application latency in ms" },
+                      ].map((item) => (
+                        <div
+                          key={item.var}
+                          className="group bg-base-100 border border-base-300 rounded-lg p-2 hover:border-primary hover:shadow-sm transition-all duration-200 cursor-pointer"
+                          onClick={() => copyToClipboard(item.var)}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex-1">
+                              <div className="font-mono text-xs font-semibold text-secondary">{item.var}</div>
+                              <div className="text-xs text-base-content/70">{item.desc}</div>
+                            </div>
+                            <div className="ml-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                              {copiedVariable === item.var ? (
+                                <Check className="w-3 h-3 text-success" />
+                              ) : (
+                                <Copy className="w-3 h-3 text-base-content/50" />
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
+        </div>
 
-          {/* Action Buttons */}
-          <div className="flex flex-col sm:flex-row gap-3 justify-end">
-            <button className="btn btn-primary" onClick={saveNotificationSettings}>Save Settings</button>
-          </div>
+        {/* Action Buttons */}
+        <div className="flex justify-end">
+          <button className="btn btn-primary" onClick={saveNotificationSettings}>
+            Save Settings
+          </button>
         </div>
       </div>
     </div>
diff --git a/hooks/useNotifications.ts b/hooks/useNotifications.ts
index d47eaa9..ddddae9 100644
--- a/hooks/useNotifications.ts
+++ b/hooks/useNotifications.ts
@@ -97,7 +97,7 @@ const useNotifications = () => {
     const editNotificationApplicationsSettings = (settings: any): Promise<string> | string => {
         return axios.post('/api/notifications/settings_applications_edit', settings)
         .then((response) => {
-            return response.data.notificationSettings;
+            return response.data.notification;
         })
         .catch(err => {
             throw err.response?.data?.error || 'An error occurred';
@@ -107,7 +107,7 @@ const useNotifications = () => {
     const editNotificationServerSettings = (settings: any): Promise<string> | string => {
         return axios.post('/api/notifications/settings_server_edit', settings)
         .then((response) => {
-            return response.data.notificationSettings;
+            return response.data.notification;
         })
         .catch(err => {
             throw err.response?.data?.error || 'An error occurred';