v0.0.7->main

v0.0.7

Dockerfile

@@ -6,9 +6,13 @@ WORKDIR /app
 COPY package.json package-lock.json* ./
 COPY ./prisma ./prisma
 
+# Install all dependencies (including devDependencies)
 RUN npm install
+
+# Generate Prisma client
 RUN npx prisma generate
 
+# Build the application
 COPY . .
 RUN npm run build
 
@@ -19,13 +23,16 @@ WORKDIR /app
 
 ENV NODE_ENV production
 
-# Install production dependencies INCLUDING prisma
+# Copy package files
 COPY package.json package-lock.json* ./
-RUN npm install --production --ignore-scripts
 
-# Copy needed Prisma files
+# Copy node_modules from builder
-COPY --from=builder /app/node_modules/.prisma /app/node_modules/.prisma
+COPY --from=builder /app/node_modules ./node_modules
-COPY --from=builder /app/node_modules/@prisma /app/node_modules/@prisma
+
+# Remove dev dependencies
+RUN npm prune --production
+
+# Copy Prisma files
 COPY --from=builder /app/prisma ./prisma
 
 # Copy built application
@@ -36,5 +43,5 @@ COPY --from=builder /app/next.config.js* ./
 
 EXPOSE 3000
 
-# Run migrations first, then start app
+# Run migrations and start
 CMD ["sh", "-c", "npx prisma migrate deploy && npm start"]

README.md

@@ -17,25 +17,33 @@ The only dashboard you'll ever need to manage your entire server infrastructure.
 
 ## Screenshots
 Login Page:
-![Login Page](https://i.ibb.co/QvvJvHxY/image.png)
+![Login Page](https://i.ibb.co/DfS7BJdX/image.png)
 
 Dashboard Page:
-![Dashboard Page](https://i.ibb.co/G3FW5mVX/image.png)
+![Dashboard Page](https://i.ibb.co/wFMb7StT/image.png)
 
 Servers Page:
-![Servers Page](https://i.ibb.co/v6Z79wJY/image.png)
+![Servers Page](https://i.ibb.co/HLMD9HPZ/image.png)
+
+VM Display:
+![VM Display](https://i.ibb.co/My45mv8k/image.png)
 
 Applications Page:
-![Applications Page](https://i.ibb.co/zC1f6s9/image.png)
+![Applications Page](https://i.ibb.co/qMwrKwn3/image.png)
+
+Uptime Page:
+![Uptime Page](https://i.ibb.co/jvGcL9Y6/image.png)
 
 Network Page:
-![Network Page](https://i.ibb.co/XkKYrGQX/image.png)
+![Network Page](https://i.ibb.co/qYcL2Fws/image.png)
+
+Settings Page:
+![Settings Page](https://i.ibb.co/rRQB9Hcz/image.png)
 
 ## Roadmap
-- [ ] Edit Applications, Applications searchbar
+- [X] Edit Applications, Applications searchbar
-- [ ] Customizable Dashboard
+- [X] Uptime History
-- [ ] Notifications
+- [X] Notifications
-- [ ] Uptime History
 - [ ] Simple Server Monitoring
 - [ ] Improved Network Flowchart with custom elements (like Network switches)
 - [ ] Advanced Settings (Disable Uptime Tracking & more)
@@ -50,10 +58,7 @@ services:
     ports:
       - "3000:3000"
     environment:
-      LOGIN_EMAIL: "mail@example.com"
+      JWT_SECRET: RANDOM_SECRET # Replace with a secure random string
-      LOGIN_PASSWORD: "SecretPassword"
-      JWT_SECRET: RANDOM_SECRET
-      ACCOUNT_SECRET: RANDOM_SECRET
       DATABASE_URL: "postgresql://postgres:postgres@db:5432/postgres"
     depends_on:
       - db
@@ -63,6 +68,9 @@ services:
     image: haedlessdev/corecontrol-agent:latest
     environment:
       DATABASE_URL: "postgresql://postgres:postgres@db:5432/postgres"
+    depends_on:
+      db:
+        condition: service_healthy
 
   db:
     image: postgres:17
@@ -73,11 +81,20 @@ services:
       POSTGRES_DB: postgres
     volumes:
       - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 2s
+      timeout: 2s
+      retries: 10
 
 volumes:
   postgres_data:
 ```
 
+#### Default Login
+__E-Mail:__ admin@example.com\
+__Password:__ admin
+
 ## Tech Stack & Credits
 
 The application is build with:
@@ -87,6 +104,7 @@ The application is build with:
 - PostgreSQL with [Prisma ORM](https://www.prisma.io/)
 - Icons by [Lucide](https://lucide.dev/)
 - Flowcharts by [React Flow](https://reactflow.dev/)
+- Application icons by [selfh.st/icons](selfh.st/icons)
 - and a lot of love ❤️
 
 ## Star History

agent/.dockerignore

@@ -1 +1 @@
-.env.local
+.env

agent/go.mod

@@ -17,4 +17,6 @@ require (
 	github.com/jackc/pgtype v1.14.0 // indirect
 	golang.org/x/crypto v0.20.0 // indirect
 	golang.org/x/text v0.14.0 // indirect
+	gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc // indirect
+	gopkg.in/gomail.v2 v2.0.0-20160411212932-81ebce5c23df // indirect
 )

agent/go.sum

@@ -171,9 +171,13 @@ golang.org/x/xerrors v0.0.0-20190513163551-3ee3066db522/go.mod h1:I/5z698sn9Ka8T
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc h1:2gGKlE2+asNV9m7xrywl36YYNnBG5ZQ0r/BOOxqPpmk=
+gopkg.in/alexcesaro/quotedprintable.v3 v3.0.0-20150716171945-2caba252f4dc/go.mod h1:m7x9LTH6d71AHyAX77c9yqWCCa3UKHcVEj9y7hAtKDk=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/errgo.v2 v2.1.0/go.mod h1:hNsd1EY+bozCKY1Ytp96fpM3vjJbqLJn88ws8XvfDNI=
+gopkg.in/gomail.v2 v2.0.0-20160411212932-81ebce5c23df h1:n7WqCuqOuCbNr617RXOY0AWRXxgwEyPp2z+p0+hgMuE=
+gopkg.in/gomail.v2 v2.0.0-20160411212932-81ebce5c23df/go.mod h1:LRQQ+SO6ZHR7tOkpBDuZnXENFzX8qRjMDMyPD6BRkCw=
 gopkg.in/inconshreveable/log15.v2 v2.0.0-20180818164646-67afb5ed74ec/go.mod h1:aPpfJ7XW+gOuirDoZ8gHhLh3kZ1B08FtV2bbmy7Jv3s=
 gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

agent/main.go

@@ -1,23 +1,58 @@
 package main
 
 import (
+	"bytes"
 	"context"
+	"crypto/x509"
 	"database/sql"
+	"encoding/json"
+	"errors"
 	"fmt"
+	"net"
 	"net/http"
+	"net/url"
 	"os"
+	"strings"
+	"sync"
 	"time"
 
 	_ "github.com/jackc/pgx/v4/stdlib"
 	"github.com/joho/godotenv"
+	"gopkg.in/gomail.v2"
 )
 
 type Application struct {
 	ID        int
+	Name      string
 	PublicURL string
 	Online    bool
 }
 
+type Notification struct {
+	ID             int
+	Enabled        bool
+	Type           string
+	SMTPHost       sql.NullString
+	SMTPPort       sql.NullInt64
+	SMTPFrom       sql.NullString
+	SMTPUser       sql.NullString
+	SMTPPass       sql.NullString
+	SMTPSecure     sql.NullBool
+	SMTPTo         sql.NullString
+	TelegramChatID sql.NullString
+	TelegramToken  sql.NullString
+	DiscordWebhook sql.NullString
+	GotifyUrl      sql.NullString
+	GotifyToken    sql.NullString
+	NtfyUrl        sql.NullString
+	NtfyToken      sql.NullString
+}
+
+var (
+	notifications []Notification
+	notifMutex    sync.RWMutex
+)
+
 func main() {
 	if err := godotenv.Load(); err != nil {
 		fmt.Println("No env vars found")
@@ -34,25 +69,121 @@ func main() {
 	}
 	defer db.Close()
 
-	ticker := time.NewTicker(5 * time.Second)
+	// initial load
+	notifs, err := loadNotifications(db)
+	if err != nil {
+		panic(fmt.Sprintf("Failed to load notifications: %v", err))
+	}
+	notifMutex.Lock()
+	notifications = notifMutexCopy(notifs)
+	notifMutex.Unlock()
+
+	// reload notification configs every minute
+	go func() {
+		reloadTicker := time.NewTicker(time.Minute)
+		defer reloadTicker.Stop()
+
+		for range reloadTicker.C {
+			newNotifs, err := loadNotifications(db)
+			if err != nil {
+				fmt.Printf("Failed to reload notifications: %v\n", err)
+				continue
+			}
+			notifMutex.Lock()
+			notifications = notifMutexCopy(newNotifs)
+			notifMutex.Unlock()
+			fmt.Println("Reloaded notification configurations")
+		}
+	}()
+
+	// clean up old entries hourly
+	go func() {
+		deletionTicker := time.NewTicker(time.Hour)
+		defer deletionTicker.Stop()
+
+		for range deletionTicker.C {
+			if err := deleteOldEntries(db); err != nil {
+				fmt.Printf("Error deleting old entries: %v\n", err)
+			}
+		}
+	}()
+
+	ticker := time.NewTicker(time.Second)
 	defer ticker.Stop()
 
 	client := &http.Client{
 		Timeout: 4 * time.Second,
 	}
 
-	for range ticker.C {
+	for now := range ticker.C {
+		if now.Second()%10 != 0 {
+			continue
+		}
+
 		apps := getApplications(db)
 		checkAndUpdateStatus(db, client, apps)
 	}
 }
 
+// helper to safely copy slice
+func notifMutexCopy(src []Notification) []Notification {
+	copyDst := make([]Notification, len(src))
+	copy(copyDst, src)
+	return copyDst
+}
+
+func isIPAddress(host string) bool {
+	ip := net.ParseIP(host)
+	return ip != nil
+}
+
+func loadNotifications(db *sql.DB) ([]Notification, error) {
+	rows, err := db.Query(
+		`SELECT id, enabled, type, "smtpHost", "smtpPort", "smtpFrom", "smtpUser", "smtpPass", "smtpSecure", "smtpTo",
+		       "telegramChatId", "telegramToken", "discordWebhook", "gotifyUrl", "gotifyToken", "ntfyUrl", "ntfyToken"
+		FROM notification
+		WHERE enabled = true`,
+	)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+
+	var configs []Notification
+	for rows.Next() {
+		var n Notification
+		if err := rows.Scan(
+			&n.ID, &n.Enabled, &n.Type,
+			&n.SMTPHost, &n.SMTPPort, &n.SMTPFrom, &n.SMTPUser, &n.SMTPPass, &n.SMTPSecure, &n.SMTPTo,
+			&n.TelegramChatID, &n.TelegramToken, &n.DiscordWebhook, &n.GotifyUrl, &n.GotifyToken, &n.NtfyUrl, &n.NtfyToken,
+		); err != nil {
+			fmt.Printf("Error scanning notification: %v\n", err)
+			continue
+		}
+		configs = append(configs, n)
+	}
+	return configs, nil
+}
+
+func deleteOldEntries(db *sql.DB) error {
+	ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
+	defer cancel()
+
+	res, err := db.ExecContext(ctx,
+		`DELETE FROM uptime_history WHERE "createdAt" < now() - interval '30 days'`,
+	)
+	if err != nil {
+		return err
+	}
+	affected, _ := res.RowsAffected()
+	fmt.Printf("Deleted %d old entries from uptime_history\n", affected)
+	return nil
+}
+
 func getApplications(db *sql.DB) []Application {
-	rows, err := db.Query(`
+	rows, err := db.Query(
-        SELECT id, "publicURL", online 
+		`SELECT id, name, "publicURL", online FROM application WHERE "publicURL" IS NOT NULL`,
-        FROM application 
+	)
-        WHERE "publicURL" IS NOT NULL
-    `)
 	if err != nil {
 		fmt.Printf("Error fetching applications: %v\n", err)
 		return nil
@@ -62,8 +193,7 @@ func getApplications(db *sql.DB) []Application {
 	var apps []Application
 	for rows.Next() {
 		var app Application
-		err := rows.Scan(&app.ID, &app.PublicURL, &app.Online)
+		if err := rows.Scan(&app.ID, &app.Name, &app.PublicURL, &app.Online); err != nil {
-		if err != nil {
 			fmt.Printf("Error scanning row: %v\n", err)
 			continue
 		}
@@ -73,29 +203,251 @@ func getApplications(db *sql.DB) []Application {
 }
 
 func checkAndUpdateStatus(db *sql.DB, client *http.Client, apps []Application) {
-	for _, app := range apps {
+	var notificationTemplate string
-		ctx, cancel := context.WithTimeout(context.Background(), 4*time.Second)
+	err := db.QueryRow("SELECT notification_text FROM settings LIMIT 1").Scan(&notificationTemplate)
-		defer cancel()
+	if err != nil || notificationTemplate == "" {
+		notificationTemplate = "The application !name (!url) went !status!"
+	}
 
-		req, err := http.NewRequestWithContext(ctx, "HEAD", app.PublicURL, nil)
+	for _, app := range apps {
+		logPrefix := fmt.Sprintf("[App %s (%s)]", app.Name, app.PublicURL)
+		fmt.Printf("%s Checking...\n", logPrefix)
+
+		parsedURL, parseErr := url.Parse(app.PublicURL)
+		if parseErr != nil {
+			fmt.Printf("%s Invalid URL: %v\n", logPrefix, parseErr)
+			continue
+		}
+
+		hostIsIP := isIPAddress(parsedURL.Hostname())
+
+		httpCtx, httpCancel := context.WithTimeout(context.Background(), 4*time.Second)
+		req, err := http.NewRequestWithContext(httpCtx, "HEAD", app.PublicURL, nil)
 		if err != nil {
-			fmt.Printf("Error creating request: %v\n", err)
+			fmt.Printf("%s Request creation failed: %v\n", logPrefix, err)
+			httpCancel()
 			continue
 		}
 
 		resp, err := client.Do(req)
-		isOnline := false
+
-		if err == nil && resp.StatusCode >= 200 && resp.StatusCode < 300 {
+		if err != nil || (resp != nil && (resp.StatusCode == http.StatusMethodNotAllowed || resp.StatusCode == http.StatusNotImplemented)) {
-			isOnline = true
+			if resp != nil && resp.Body != nil {
+				resp.Body.Close()
+			}
+			fmt.Printf("%s HEAD failed, trying GET...\n", logPrefix)
+
+			req.Method = "GET"
+			resp, err = client.Do(req)
 		}
 
-		_, err = db.ExecContext(ctx,
+		var isOnline bool
-			"UPDATE application SET online = $1 WHERE id = $2",
+		if err == nil && resp != nil {
-			isOnline,
+			isOnline = (resp.StatusCode >= 200 && resp.StatusCode < 300) || resp.StatusCode == 405
-			app.ID,
+			resp.Body.Close()
+		} else {
+			if err != nil {
+				fmt.Printf("%s HTTP error: %v\n", logPrefix, err)
+
+				// Sonderbehandlung für IP-Adressen + TLS-Zertifikatfehler
+				if hostIsIP {
+					var urlErr *url.Error
+					if errors.As(err, &urlErr) {
+						var certErr x509.HostnameError
+						var unknownAuthErr x509.UnknownAuthorityError
+						if errors.As(urlErr.Err, &certErr) || errors.As(urlErr.Err, &unknownAuthErr) {
+							fmt.Printf("%s Ignoring TLS error for IP, marking as online.\n", logPrefix)
+							isOnline = true
+						}
+					}
+				}
+			}
+		}
+
+		httpCancel()
+
+		if isOnline != app.Online {
+			status := "offline"
+			if isOnline {
+				status = "online"
+			}
+
+			message := notificationTemplate
+			message = strings.ReplaceAll(message, "!name", app.Name)
+			message = strings.ReplaceAll(message, "!url", app.PublicURL)
+			message = strings.ReplaceAll(message, "!status", status)
+
+			sendNotifications(message)
+		}
+
+		dbCtx, dbCancel := context.WithTimeout(context.Background(), 5*time.Second)
+		_, err = db.ExecContext(dbCtx,
+			`UPDATE application SET online = $1 WHERE id = $2`,
+			isOnline, app.ID,
 		)
 		if err != nil {
-			fmt.Printf("Update failed for app %d: %v\n", app.ID, err)
+			fmt.Printf("%s DB update failed: %v\n", logPrefix, err)
+		}
+		dbCancel()
+
+		dbCtx2, dbCancel2 := context.WithTimeout(context.Background(), 5*time.Second)
+		_, err = db.ExecContext(dbCtx2,
+			`INSERT INTO uptime_history("applicationId", online, "createdAt") VALUES ($1, $2, now())`,
+			app.ID, isOnline,
+		)
+		if err != nil {
+			fmt.Printf("%s Insert into history failed: %v\n", logPrefix, err)
+		}
+		dbCancel2()
+	}
+}
+func sendNotifications(message string) {
+	notifMutex.RLock()
+	notifs := notifMutexCopy(notifications)
+	notifMutex.RUnlock()
+
+	for _, n := range notifs {
+		switch n.Type {
+		case "email":
+			if n.SMTPHost.Valid && n.SMTPTo.Valid {
+				sendEmail(n, message)
+			}
+		case "telegram":
+			if n.TelegramToken.Valid && n.TelegramChatID.Valid {
+				sendTelegram(n, message)
+			}
+		case "discord":
+			if n.DiscordWebhook.Valid {
+				sendDiscord(n, message)
+			}
+		case "gotify":
+			if n.GotifyUrl.Valid && n.GotifyToken.Valid {
+				sendGotify(n, message)
+			}
+		case "ntfy":
+			if n.NtfyUrl.Valid && n.NtfyToken.Valid {
+				sendNtfy(n, message)
+			}
 		}
 	}
 }
+
+func sendEmail(n Notification, body string) {
+	// Initialize SMTP dialer with host, port, user, pass
+	d := gomail.NewDialer(
+		n.SMTPHost.String,
+		int(n.SMTPPort.Int64),
+		n.SMTPUser.String,
+		n.SMTPPass.String,
+	)
+	if n.SMTPSecure.Valid && n.SMTPSecure.Bool {
+		d.SSL = true
+	}
+
+	m := gomail.NewMessage()
+	m.SetHeader("From", n.SMTPFrom.String)
+	m.SetHeader("To", n.SMTPTo.String)
+	m.SetHeader("Subject", "Uptime Notification")
+	m.SetBody("text/plain", body)
+
+	if err := d.DialAndSend(m); err != nil {
+		fmt.Printf("Email send failed: %v\n", err)
+	}
+}
+
+func sendTelegram(n Notification, message string) {
+	url := fmt.Sprintf("https://api.telegram.org/bot%s/sendMessage?chat_id=%s&text=%s",
+		n.TelegramToken.String,
+		n.TelegramChatID.String,
+		message,
+	)
+	resp, err := http.Get(url)
+	if err != nil {
+		fmt.Printf("Telegram send failed: %v\n", err)
+		return
+	}
+	resp.Body.Close()
+}
+
+func sendDiscord(n Notification, message string) {
+	payload := fmt.Sprintf(`{"content": "%s"}`, message)
+	req, err := http.NewRequest("POST", n.DiscordWebhook.String, strings.NewReader(payload))
+	if err != nil {
+		fmt.Printf("Discord request creation failed: %v\n", err)
+		return
+	}
+	req.Header.Set("Content-Type", "application/json")
+	client := &http.Client{Timeout: 5 * time.Second}
+	resp, err := client.Do(req)
+	if err != nil {
+		fmt.Printf("Discord send failed: %v\n", err)
+		return
+	}
+	resp.Body.Close()
+}
+
+func sendGotify(n Notification, message string) {
+	baseURL := strings.TrimSuffix(n.GotifyUrl.String, "/")
+	targetURL := fmt.Sprintf("%s/message", baseURL)
+
+	form := url.Values{}
+	form.Add("message", message)
+	form.Add("priority", "5")
+
+	req, err := http.NewRequest("POST", targetURL, strings.NewReader(form.Encode()))
+	if err != nil {
+		fmt.Printf("Gotify: ERROR creating request: %v\n", err)
+		return
+	}
+
+	req.Header.Set("X-Gotify-Key", n.GotifyToken.String)
+	req.Header.Set("Content-Type", "application/x-www-form-urlencoded")
+
+	client := &http.Client{Timeout: 5 * time.Second}
+	resp, err := client.Do(req)
+	if err != nil {
+		fmt.Printf("Gotify: ERROR sending request: %v\n", err)
+		return
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		fmt.Printf("Gotify: ERROR status code: %d\n", resp.StatusCode)
+	}
+}
+
+func sendNtfy(n Notification, message string) {
+	baseURL := strings.TrimSuffix(n.NtfyUrl.String, "/")
+	topic := "corecontrol"
+	requestURL := fmt.Sprintf("%s/%s", baseURL, topic)
+
+	payload := map[string]string{"message": message}
+	jsonData, err := json.Marshal(payload)
+	if err != nil {
+		fmt.Printf("Ntfy: ERROR marshaling JSON: %v\n", err)
+		return
+	}
+
+	req, err := http.NewRequest("POST", requestURL, bytes.NewBuffer(jsonData))
+	if err != nil {
+		fmt.Printf("Ntfy: ERROR creating request: %v\n", err)
+		return
+	}
+
+	if n.NtfyToken.Valid {
+		req.Header.Set("Authorization", "Bearer "+n.NtfyToken.String)
+	}
+	req.Header.Set("Content-Type", "application/json")
+
+	client := &http.Client{Timeout: 5 * time.Second}
+	resp, err := client.Do(req)
+	if err != nil {
+		fmt.Printf("Ntfy: ERROR sending request: %v\n", err)
+		return
+	}
+	defer resp.Body.Close()
+
+	if resp.StatusCode != http.StatusOK {
+		fmt.Printf("Ntfy: ERROR status code: %d\n", resp.StatusCode)
+	}
+}

app/api/applications/delete/route.ts

@@ -14,6 +14,10 @@ export async function POST(request: NextRequest) {
       where: { id: id }
     });
 
+    await prisma.uptime_history.deleteMany({
+      where: { applicationId: id }
+    });
+
     return NextResponse.json({ success: true });
   } catch (error: any) {
     return NextResponse.json({ error: error.message }, { status: 500 });

app/api/applications/uptime/route.ts

@@ -0,0 +1,162 @@
+import { NextResponse, NextRequest } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+interface RequestBody {
+    timespan?: number;
+    page?: number;
+  }
+  
+
+const getTimeRange = (timespan: number) => {
+  const now = new Date();
+  switch (timespan) {
+    case 1:
+      return { 
+        start: new Date(now.getTime() - 30 * 60 * 1000),
+        interval: 'minute' 
+      };
+    case 2:
+      return { 
+        start: new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000),
+        interval: '3hour' 
+      };
+    case 3:
+      return { 
+        start: new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000),
+        interval: 'day' 
+      };
+    default:
+      return { 
+        start: new Date(now.getTime() - 30 * 60 * 1000),
+        interval: 'minute' 
+      };
+  }
+};
+
+const generateIntervals = (timespan: number) => {
+  const now = new Date();
+  now.setSeconds(0, 0);
+  
+  switch (timespan) {
+    case 1:
+      return Array.from({ length: 30 }, (_, i) => {
+        const d = new Date(now);
+        d.setMinutes(d.getMinutes() - i);
+        d.setSeconds(0, 0);
+        return d;
+      });
+      
+    case 2:
+      return Array.from({ length: 56 }, (_, i) => {
+        const d = new Date(now);
+        d.setHours(d.getHours() - (i * 3));
+        d.setMinutes(0, 0, 0);
+        return d;
+      });
+
+    case 3:
+      return Array.from({ length: 30 }, (_, i) => {
+        const d = new Date(now);
+        d.setDate(d.getDate() - i);
+        d.setHours(0, 0, 0, 0);
+        return d;
+      });
+
+    default:
+      return [];
+  }
+};
+
+const getIntervalKey = (date: Date, timespan: number) => {
+  const d = new Date(date);
+  switch (timespan) {
+    case 1:
+      d.setSeconds(0, 0);
+      return d.toISOString();
+    case 2:
+      d.setHours(Math.floor(d.getHours() / 3) * 3);
+      d.setMinutes(0, 0, 0);
+      return d.toISOString();
+    case 3:
+      d.setHours(0, 0, 0, 0);
+      return d.toISOString();
+    default:
+      return d.toISOString();
+  }
+};
+
+export async function POST(request: NextRequest) {
+    try {
+      const { timespan = 1, page = 1 }: RequestBody = await request.json();
+      const itemsPerPage = 5;
+      const skip = (page - 1) * itemsPerPage;
+  
+      // Get paginated and sorted applications
+      const [applications, totalCount] = await Promise.all([
+        prisma.application.findMany({
+          skip,
+          take: itemsPerPage,
+          orderBy: { name: 'asc' }
+        }),
+        prisma.application.count()
+      ]);
+  
+      const applicationIds = applications.map(app => app.id);
+      
+      // Get time range and intervals
+      const { start } = getTimeRange(timespan);
+      const intervals = generateIntervals(timespan);
+  
+      // Get uptime history for the filtered applications
+      const uptimeHistory = await prisma.uptime_history.findMany({
+        where: {
+          applicationId: { in: applicationIds },
+          createdAt: { gte: start }
+        },
+        orderBy: { createdAt: "desc" }
+      });
+  
+      // Process data for each application
+      const result = applications.map(app => {
+        const appChecks = uptimeHistory.filter(check => check.applicationId === app.id);
+        const checksMap = new Map<string, { failed: number; total: number }>();
+  
+        for (const check of appChecks) {
+          const intervalKey = getIntervalKey(check.createdAt, timespan);
+          const current = checksMap.get(intervalKey) || { failed: 0, total: 0 };
+          current.total++;
+          if (!check.online) current.failed++;
+          checksMap.set(intervalKey, current);
+        }
+  
+        const uptimeSummary = intervals.map(interval => {
+          const intervalKey = getIntervalKey(interval, timespan);
+          const stats = checksMap.get(intervalKey);
+          
+          return {
+            timestamp: intervalKey,
+            missing: !stats,
+            online: stats ? (stats.failed / stats.total) <= 0.5 : null
+          };
+        });
+  
+        return {
+          appName: app.name,
+          appId: app.id,
+          uptimeSummary
+        };
+      });
+  
+      return NextResponse.json({
+        data: result,
+        pagination: {
+          currentPage: page,
+          totalPages: Math.ceil(totalCount / itemsPerPage),
+          totalItems: totalCount
+        }
+      });
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : "Unknown error";
+      return NextResponse.json({ error: message }, { status: 500 });
+    }
+  }

app/api/auth/edit_email/route.ts

@@ -0,0 +1,56 @@
+import { NextResponse, NextRequest } from "next/server";
+import jwt from 'jsonwebtoken';
+import { prisma } from "@/lib/prisma";
+
+interface EditEmailRequest {
+    newEmail: string;
+    jwtToken: string;
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        const body: EditEmailRequest = await request.json();
+        const { newEmail, jwtToken } = body;
+
+        // Ensure JWT_SECRET is defined
+        if (!process.env.JWT_SECRET) {
+            throw new Error('JWT_SECRET is not defined');
+        }
+
+        // Verify JWT
+        const decoded = jwt.verify(jwtToken, process.env.JWT_SECRET) as { account_secret: string };
+        if (!decoded.account_secret) {
+            return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
+        }
+
+        // Get the user by account id
+        const user = await prisma.user.findUnique({
+            where: { id: decoded.account_secret },
+        });
+
+        if (!user) {
+            return NextResponse.json({ error: 'User not found' }, { status: 404 });
+        }
+
+
+        // Check if the new email is already in use
+        const existingUser = await prisma.user.findUnique({
+            where: { email: newEmail },
+        });
+
+        if (existingUser) {
+            return NextResponse.json({ error: 'Email already in use' }, { status: 400 });
+        }
+
+        // Update the user's email
+        await prisma.user.update({
+            where: { id: user.id },
+            data: { email: newEmail },
+        });
+
+    
+        return NextResponse.json({ message: 'Email updated successfully' });	
+    } catch (error: any) {
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/api/auth/edit_password/route.ts

@@ -0,0 +1,55 @@
+import { NextResponse, NextRequest } from "next/server";
+import jwt from 'jsonwebtoken';
+import { prisma } from "@/lib/prisma";
+import bcrypt from 'bcrypt';
+
+interface EditEmailRequest {
+    oldPassword: string;
+    newPassword: string;
+    jwtToken: string;
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        const body: EditEmailRequest = await request.json();
+        const { oldPassword, newPassword, jwtToken } = body;
+
+        // Ensure JWT_SECRET is defined
+        if (!process.env.JWT_SECRET) {
+            throw new Error('JWT_SECRET is not defined');
+        }
+
+        // Verify JWT
+        const decoded = jwt.verify(jwtToken, process.env.JWT_SECRET) as { account_secret: string };
+        if (!decoded.account_secret) {
+            return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
+        }
+
+        // Get the user by account id
+        const user = await prisma.user.findUnique({
+            where: { id: decoded.account_secret },
+        });
+
+        if (!user) {
+            return NextResponse.json({ error: 'User not found' }, { status: 404 });
+        }
+
+        // Check if the old password is correct
+        const isOldPasswordValid = await bcrypt.compare(oldPassword, user.password);
+        if (!isOldPasswordValid) {
+            return NextResponse.json({ error: 'Old password is incorrect' }, { status: 401 });
+        }
+
+        // Hash the new password
+        const hashedNewPassword = await bcrypt.hash(newPassword, 10);
+        // Update the user's password
+        await prisma.user.update({
+            where: { id: user.id },
+            data: { password: hashedNewPassword },
+        });
+    
+        return NextResponse.json({ message: 'Password updated successfully' });	
+    } catch (error: any) {
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/api/auth/login/route.ts

@@ -1,5 +1,7 @@
 import { NextResponse, NextRequest } from "next/server";
 import jwt from 'jsonwebtoken';
+import { prisma } from "@/lib/prisma";
+import bcrypt from 'bcrypt';
 
 interface LoginRequest {
     username: string;
@@ -11,17 +13,50 @@ export async function POST(request: NextRequest) {
         const body: LoginRequest = await request.json();
         const { username, password } = body;
         
-        if(username !== process.env.LOGIN_EMAIL || password !== process.env.LOGIN_PASSWORD) {
-            throw new Error('Invalid credentials');
-        }
-        
         // Ensure JWT_SECRET is defined
         if (!process.env.JWT_SECRET) {
             throw new Error('JWT_SECRET is not defined');
         }
 
+        let accountId: string = '';
+        // Check if there are any entries in user
+        const userCount = await prisma.user.count();
+        if (userCount === 0) {
+            if(username=== "admin@example.com" && password === "admin") {
+                // Hash the password
+                const hashedPassword = await bcrypt.hash(password, 10);
+                // Create the first user with hashed password
+                const user = await prisma.user.create({
+                    data: {
+                        email: username,
+                        password: hashedPassword,
+                    },
+                });
+
+                // Get the account id
+                accountId = user.id;            
+            } else {
+                return NextResponse.json({ error: "Wrong credentials" }, { status: 401 });
+            }
+        } else {
+            // Get the user by username
+            const user = await prisma.user.findUnique({
+                where: { email: username },
+            });
+            if (!user) {
+                return NextResponse.json({ error: "Wrong credentials" }, { status: 401 });
+            }
+            // Check if the password is correct
+            const isPasswordValid = await bcrypt.compare(password, user.password);
+            if (!isPasswordValid) {
+                return NextResponse.json({ error: "Wrong credentials" }, { status: 401 });
+            }
+            // Get the account id
+            accountId = user.id;
+        }
+
         // Create JWT
-        const token = jwt.sign({ account_secret: process.env.ACCOUNT_SECRET }, process.env.JWT_SECRET, { expiresIn: '7d' });
+        const token = jwt.sign({ account_secret: accountId }, process.env.JWT_SECRET, { expiresIn: '7d' });
 
         return NextResponse.json({ token });
     } catch (error: any) {

app/api/auth/validate/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import jwt, { JwtPayload } from 'jsonwebtoken';
-
+import { prisma } from "@/lib/prisma";
 
 interface ValidateRequest {
     token: string;
@@ -16,6 +16,14 @@ export async function POST(request: NextRequest) {
             throw new Error('JWT_SECRET is not defined');
         }
 
+        // Get the account id
+        const user = await prisma.user.findFirst({
+            where: {},
+        });
+        if (!user) {
+            return NextResponse.json({ error: 'User not found' }, { status: 404 });
+        }
+
         // Verify JWT
         const decoded = jwt.verify(token, process.env.JWT_SECRET) as JwtPayload & { id: string };
 
@@ -23,7 +31,7 @@ export async function POST(request: NextRequest) {
             return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
         }
 
-        if(decoded.account_secret !== process.env.ACCOUNT_SECRET) {
+        if(decoded.account_secret !== user.id) {
             return NextResponse.json({ error: 'Invalid token' }, { status: 400 });
         }
 

app/api/dashboard/get/route.ts

@@ -3,7 +3,19 @@ import { prisma } from "@/lib/prisma";
 
 export async function POST(request: NextRequest) {
     try {
-        const serverCount = await prisma.server.count();
+        const serverCountNoVMs = await prisma.server.count({
+            where: {
+                hostServer: 0
+            }
+        });
+
+        const serverCountOnlyVMs = await prisma.server.count({
+            where: {
+                hostServer: {
+                    not: 0
+                }
+            }
+        });
 
         const applicationCount = await prisma.application.count();
 
@@ -12,7 +24,8 @@ export async function POST(request: NextRequest) {
         });
 
         return NextResponse.json({
-            serverCount,
+            serverCountNoVMs,
+            serverCountOnlyVMs,
             applicationCount,
             onlineApplicationsCount
         });

app/api/flowchart/route.ts

@@ -10,6 +10,9 @@ interface Node {
   };
   position: { x: number; y: number };
   style: React.CSSProperties;
+  draggable?: boolean;
+  selectable?: boolean;
+  zIndex?: number;
 }
 
 interface Edge {
@@ -27,6 +30,8 @@ interface Server {
   id: number;
   name: string;
   ip: string;
+  host: boolean;
+  hostServer: number | null;
 }
 
 interface Application {
@@ -38,10 +43,17 @@ interface Application {
 
 const NODE_WIDTH = 220;
 const NODE_HEIGHT = 60;
-const HORIZONTAL_SPACING = 280;
+const APP_NODE_WIDTH = 160;
+const APP_NODE_HEIGHT = 40;
+const HORIZONTAL_SPACING = 700;
 const VERTICAL_SPACING = 80;
 const START_Y = 120;
 const ROOT_NODE_WIDTH = 300;
+const CONTAINER_PADDING = 40;
+const COLUMN_SPACING = 220;
+const VM_APP_SPACING = 220;
+const MIN_VM_SPACING = 10;
+const APP_ROW_SPACING = 15;
 
 export async function GET() {
   try {
@@ -54,11 +66,181 @@ export async function GET() {
       }) as Promise<Application[]>,
     ]);
 
+    // Level 2: Physical Servers
+    const serverNodes: Node[] = servers
+      .filter(server => !server.hostServer)
+      .map((server, index, filteredServers) => {
+        const xPos = 
+          index * HORIZONTAL_SPACING - 
+          ((filteredServers.length - 1) * HORIZONTAL_SPACING) / 2;
+
+        return {
+          id: `server-${server.id}`,
+          type: "server",
+          data: {
+            label: `${server.name}\n${server.ip}`,
+            ...server,
+          },
+          position: { x: xPos, y: START_Y },
+          style: {
+            background: "#ffffff",
+            color: "#0f0f0f",
+            border: "2px solid #e6e4e1",
+            borderRadius: "4px",
+            padding: "8px",
+            width: NODE_WIDTH,
+            height: NODE_HEIGHT,
+            fontSize: "0.9rem",
+            lineHeight: "1.2",
+            whiteSpace: "pre-wrap",
+          },
+        };
+      });
+
+    // Level 3: Services and VMs
+    const serviceNodes: Node[] = [];
+    const vmNodes: Node[] = [];
+    
+    servers.forEach((server) => {
+      const serverNode = serverNodes.find((n) => n.id === `server-${server.id}`);
+      if (serverNode) {
+        const serverX = serverNode.position.x;
+        
+        // Services (left column)
+        applications
+          .filter(app => app.serverId === server.id)
+          .forEach((app, appIndex) => {
+            serviceNodes.push({
+              id: `service-${app.id}`,
+              type: "service",
+              data: {
+                label: `${app.name}\n${app.localURL}`,
+                ...app,
+              },
+              position: {
+                x: serverX - COLUMN_SPACING,
+                y: START_Y + NODE_HEIGHT + VERTICAL_SPACING + appIndex * (APP_NODE_HEIGHT + 20),
+              },
+              style: {
+                background: "#f0f9ff",
+                color: "#0f0f0f",
+                border: "2px solid #60a5fa",
+                borderRadius: "4px",
+                padding: "6px",
+                width: APP_NODE_WIDTH,
+                height: APP_NODE_HEIGHT,
+                fontSize: "0.8rem",
+                lineHeight: "1.1",
+                whiteSpace: "pre-wrap",
+              },
+            });
+          });
+
+        // VMs (middle column) mit dynamischem Abstand
+        const hostVMs = servers.filter(vm => vm.hostServer === server.id);
+        let currentY = START_Y + NODE_HEIGHT + VERTICAL_SPACING;
+        
+        hostVMs.forEach(vm => {
+          const appCount = applications.filter(app => app.serverId === vm.id).length;
+          
+          vmNodes.push({
+            id: `vm-${vm.id}`,
+            type: "vm",
+            data: {
+              label: `${vm.name}\n${vm.ip}`,
+              ...vm,
+            },
+            position: {
+              x: serverX,
+              y: currentY,
+            },
+            style: {
+              background: "#fef2f2",
+              color: "#0f0f0f",
+              border: "2px solid #fecaca",
+              borderRadius: "4px",
+              padding: "6px",
+              width: APP_NODE_WIDTH,
+              height: APP_NODE_HEIGHT,
+              fontSize: "0.8rem",
+              lineHeight: "1.1",
+              whiteSpace: "pre-wrap",
+            },
+          });
+
+          // Dynamischer Abstand basierend auf Anzahl Apps
+          const requiredSpace = appCount > 0 
+            ? (appCount * (APP_NODE_HEIGHT + APP_ROW_SPACING))
+            : 0;
+            
+          currentY += Math.max(
+            requiredSpace + MIN_VM_SPACING,
+            MIN_VM_SPACING + APP_NODE_HEIGHT
+          );
+        });
+      }
+    });
+
+    // Level 4: VM Applications (right column)
+    const vmAppNodes: Node[] = [];
+    vmNodes.forEach((vm) => {
+      const vmX = vm.position.x;
+      applications
+        .filter(app => app.serverId === vm.data.id)
+        .forEach((app, appIndex) => {
+          vmAppNodes.push({
+            id: `vm-app-${app.id}`,
+            type: "application",
+            data: {
+              label: `${app.name}\n${app.localURL}`,
+              ...app,
+            },
+            position: {
+              x: vmX + VM_APP_SPACING,
+              y: vm.position.y + appIndex * (APP_NODE_HEIGHT + 20),
+            },
+            style: {
+              background: "#f5f5f5",
+              color: "#0f0f0f",
+              border: "2px solid #e6e4e1",
+              borderRadius: "4px",
+              padding: "6px",
+              width: APP_NODE_WIDTH,
+              height: APP_NODE_HEIGHT,
+              fontSize: "0.8rem",
+              lineHeight: "1.1",
+              whiteSpace: "pre-wrap",
+            },
+          });
+        });
+    });
+
+    // Calculate dimensions for root node positioning
+    const tempNodes = [...serverNodes, ...serviceNodes, ...vmNodes, ...vmAppNodes];
+    let minX = Infinity;
+    let maxX = -Infinity;
+    let minY = Infinity;
+    let maxY = -Infinity;
+
+    tempNodes.forEach((node) => {
+      const width = parseInt(node.style.width?.toString() || "0", 10);
+      const height = parseInt(node.style.height?.toString() || "0", 10);
+      
+      minX = Math.min(minX, node.position.x);
+      maxX = Math.max(maxX, node.position.x + width);
+      minY = Math.min(minY, node.position.y);
+      maxY = Math.max(maxY, node.position.y + height);
+    });
+
+    const centerX = (minX + maxX) / 2;
+    const rootX = centerX - ROOT_NODE_WIDTH / 2;
+
+    // Level 1: Root Node (centered at top)
     const rootNode: Node = {
       id: "root",
       type: "infrastructure",
       data: { label: "My Infrastructure" },
-      position: { x: 0, y: 20 },
+      position: { x: rootX, y: 0 },
       style: {
         background: "#ffffff",
         color: "#0f0f0f",
@@ -72,95 +254,147 @@ export async function GET() {
       },
     };
 
-    const serverNodes: Node[] = servers.map((server, index) => {
+    // Update dimensions with root node
-      const xPos =
+    const allNodes = [rootNode, ...tempNodes];
-        index * HORIZONTAL_SPACING -
+    let newMinX = Math.min(minX, rootNode.position.x);
-        ((servers.length - 1) * HORIZONTAL_SPACING) / 2;
+    let newMaxX = Math.max(maxX, rootNode.position.x + ROOT_NODE_WIDTH);
+    let newMinY = Math.min(minY, rootNode.position.y);
+    let newMaxY = Math.max(maxY, rootNode.position.y + NODE_HEIGHT);
 
-      return {
+    // Container Node
-        id: `server-${server.id}`,
+    const containerNode: Node = {
-        type: "server",
+      id: 'container',
-        data: {
+      type: 'container',
-          label: `${server.name}\n${server.ip}`,
+      data: { label: '' },
-          ...server,
+      position: {
-        },
+        x: newMinX - CONTAINER_PADDING,
-        position: { x: xPos, y: START_Y },
+        y: newMinY - CONTAINER_PADDING
-        style: {
+      },
-          background: "#ffffff",
+      style: {
-          color: "#0f0f0f",
+        width: newMaxX - newMinX + 2 * CONTAINER_PADDING,
-          border: "2px solid #e6e4e1",
+        height: newMaxY - newMinY + 2 * CONTAINER_PADDING,
-          borderRadius: "4px",
+        background: 'transparent',
-          padding: "8px",
+        border: '2px dashed #e2e8f0',
-          width: NODE_WIDTH,
+        borderRadius: '8px',
-          height: NODE_HEIGHT,
+        zIndex: 0,
-          fontSize: "0.9rem",
+      },
-          lineHeight: "1.2",
+      draggable: false,
-          whiteSpace: "pre-wrap",
+      selectable: false,
-        },
+      zIndex: -1,
-      };
+    };
-    });
 
-    const appNodes: Node[] = [];
+    // Connections with hierarchical chaining
-    servers.forEach((server) => {
+    const connections: Edge[] = [];
-      const serverX =
-        serverNodes.find((n) => n.id === `server-${server.id}`)?.position.x || 0;
-      const serverY = START_Y;
 
-      applications
+    // Root to Servers
-        .filter((app) => app.serverId === server.id)
+    serverNodes.forEach((server) => {
-        .forEach((app, appIndex) => {
+      connections.push({
-          appNodes.push({
-            id: `app-${app.id}`,
-            type: "application",
-            data: {
-              label: `${app.name}\n${app.localURL}`,
-              ...app,
-            },
-            position: {
-              x: serverX,
-              y: serverY + NODE_HEIGHT + 40 + appIndex * VERTICAL_SPACING,
-            },
-            style: {
-              background: "#ffffff",
-              color: "#0f0f0f",
-              border: "2px solid #e6e4e1",
-              borderRadius: "4px",
-              padding: "8px",
-              width: NODE_WIDTH,
-              height: NODE_HEIGHT,
-              fontSize: "0.9rem",
-              lineHeight: "1.2",
-              whiteSpace: "pre-wrap",
-            },
-          });
-        });
-    });
-
-    const connections: Edge[] = [
-      ...servers.map((server) => ({
         id: `conn-root-${server.id}`,
         source: "root",
-        target: `server-${server.id}`,
+        target: server.id,
         type: "straight",
         style: {
           stroke: "#94a3b8",
           strokeWidth: 2,
         },
-      })),
+      });
-      ...applications.map((app) => ({
+    });
-        id: `conn-${app.serverId}-${app.id}`,
+
-        source: `server-${app.serverId}`,
+    // Services chaining
-        target: `app-${app.id}`,
+    const servicesByServer = new Map<number, Node[]>();
-        type: "straight",
+    serviceNodes.forEach(service => {
-        style: {
+      const serverId = service.data.serverId;
-          stroke: "#60a5fa",
+      if (!servicesByServer.has(serverId)) servicesByServer.set(serverId, []);
-          strokeWidth: 2,
+      servicesByServer.get(serverId)!.push(service);
-        },
+    });
-      })),
+    servicesByServer.forEach((services, serverId) => {
-    ];
+      services.sort((a, b) => a.position.y - b.position.y);
+      services.forEach((service, index) => {
+        if (index === 0) {
+          connections.push({
+            id: `conn-service-${service.id}`,
+            source: `server-${serverId}`,
+            target: service.id,
+            type: "straight",
+            style: { stroke: "#60a5fa", strokeWidth: 2 },
+          });
+        } else {
+          const prevService = services[index - 1];
+          connections.push({
+            id: `conn-service-${service.id}-${prevService.id}`,
+            source: prevService.id,
+            target: service.id,
+            type: "straight",
+            style: { stroke: "#60a5fa", strokeWidth: 2 },
+          });
+        }
+      });
+    });
+
+    // VMs chaining
+    const vmsByHost = new Map<number, Node[]>();
+    vmNodes.forEach(vm => {
+      const hostId = vm.data.hostServer;
+      if (!vmsByHost.has(hostId)) vmsByHost.set(hostId, []);
+      vmsByHost.get(hostId)!.push(vm);
+    });
+    vmsByHost.forEach((vms, hostId) => {
+      vms.sort((a, b) => a.position.y - b.position.y);
+      vms.forEach((vm, index) => {
+        if (index === 0) {
+          connections.push({
+            id: `conn-vm-${vm.id}`,
+            source: `server-${hostId}`,
+            target: vm.id,
+            type: "straight",
+            style: { stroke: "#f87171", strokeWidth: 2 },
+          });
+        } else {
+          const prevVm = vms[index - 1];
+          connections.push({
+            id: `conn-vm-${vm.id}-${prevVm.id}`,
+            source: prevVm.id,
+            target: vm.id,
+            type: "straight",
+            style: { stroke: "#f87171", strokeWidth: 2 },
+          });
+        }
+      });
+    });
+
+    // VM Applications chaining
+    const appsByVM = new Map<number, Node[]>();
+    vmAppNodes.forEach(app => {
+      const vmId = app.data.serverId;
+      if (!appsByVM.has(vmId)) appsByVM.set(vmId, []);
+      appsByVM.get(vmId)!.push(app);
+    });
+    appsByVM.forEach((apps, vmId) => {
+      apps.sort((a, b) => a.position.y - b.position.y);
+      apps.forEach((app, index) => {
+        if (index === 0) {
+          connections.push({
+            id: `conn-vm-app-${app.id}`,
+            source: `vm-${vmId}`,
+            target: app.id,
+            type: "straight",
+            style: { stroke: "#f87171", strokeWidth: 2 },
+          });
+        } else {
+          const prevApp = apps[index - 1];
+          connections.push({
+            id: `conn-vm-app-${app.id}-${prevApp.id}`,
+            source: prevApp.id,
+            target: app.id,
+            type: "straight",
+            style: { stroke: "#f87171", strokeWidth: 2 },
+          });
+        }
+      });
+    });
 
     return NextResponse.json({
-      nodes: [rootNode, ...serverNodes, ...appNodes],
+      nodes: [containerNode, ...allNodes],
       edges: connections,
     });
   } catch (error: unknown) {

app/api/notifications/add/route.ts

@@ -0,0 +1,51 @@
+import { NextResponse, NextRequest } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+interface AddRequest {
+    type: string;
+    smtpHost?: string;
+    smtpPort?: number;
+    smtpSecure?: boolean;
+    smtpUsername?: string;
+    smtpPassword?: string;
+    smtpFrom?: string;
+    smtpTo?: string;
+    telegramToken?: string;
+    telegramChatId?: string;
+    discordWebhook?: string;
+    gotifyUrl?: string;
+    gotifyToken?: string;
+    ntfyUrl?: string;
+    ntfyToken?: string;
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        const body: AddRequest = await request.json();
+        const { type, smtpHost, smtpPort, smtpSecure, smtpUsername, smtpPassword, smtpFrom, smtpTo, telegramToken, telegramChatId, discordWebhook, gotifyUrl, gotifyToken, ntfyUrl, ntfyToken } = body; 
+        
+        const notification = await prisma.notification.create({
+            data: {
+                type: type,
+                smtpHost: smtpHost,
+                smtpPort: smtpPort,
+                smtpFrom: smtpFrom,
+                smtpUser: smtpUsername,
+                smtpPass: smtpPassword,
+                smtpSecure: smtpSecure,
+                smtpTo: smtpTo,
+                telegramChatId: telegramChatId,
+                telegramToken: telegramToken,
+                discordWebhook: discordWebhook,
+                gotifyUrl: gotifyUrl,
+                gotifyToken: gotifyToken,
+                ntfyUrl: ntfyUrl,
+                ntfyToken: ntfyToken,
+            }
+        });
+
+        return NextResponse.json({ message: "Success", notification });
+    } catch (error: any) {
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/api/notifications/delete/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse, NextRequest } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const id = Number(body.id);
+
+    if (!id) {
+      return NextResponse.json({ error: "Missing ID" }, { status: 400 });
+    }
+
+    await prisma.notification.delete({
+      where: { id: id }
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}

app/api/notifications/get/route.ts

@@ -0,0 +1,16 @@
+import { NextResponse, NextRequest } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+
+export async function POST(request: NextRequest) {
+    try {
+        
+        const notifications = await prisma.notification.findMany();
+
+        return NextResponse.json({ 
+            notifications
+        });
+    } catch (error: any) {
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/api/servers/add/route.ts

@@ -2,7 +2,10 @@ import { NextResponse, NextRequest } from "next/server";
 import { prisma } from "@/lib/prisma";
 
 interface AddRequest {
+    host: boolean;
+    hostServer: number;
     name: string;
+    icon: string;
     os: string;
     ip: string;
     url: string;
@@ -16,11 +19,14 @@ interface AddRequest {
 export async function POST(request: NextRequest) {
     try {
         const body: AddRequest = await request.json();
-        const { name, os, ip, url, cpu, gpu, ram, disk } = body;  
+        const { host, hostServer, name, icon, os, ip, url, cpu, gpu, ram, disk } = body;  
         
         const server = await prisma.server.create({
             data: {
+                host,
+                hostServer,
                 name,
+                icon,
                 os,
                 ip,
                 url,

app/api/servers/delete/route.ts

@@ -10,6 +10,14 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: "Missing ID" }, { status: 400 });
     }
     
+    // Check if there are any applications associated with the server
+    const applications = await prisma.application.findMany({
+      where: { serverId: id }
+    });
+    if (applications.length > 0) {
+      return NextResponse.json({ error: "Cannot delete server with associated applications" }, { status: 400 });
+    }
+
     await prisma.server.delete({
       where: { id: id }
     });

app/api/servers/edit/route.ts

@@ -2,8 +2,11 @@ import { NextResponse, NextRequest } from "next/server";
 import { prisma } from "@/lib/prisma";
 
 interface EditRequest {
+    host: boolean;
+    hostServer: number;
     id: number;
     name: string;
+    icon: string;
     os: string;
     ip: string;
     url: string;
@@ -16,17 +19,27 @@ interface EditRequest {
 export async function PUT(request: NextRequest) {
     try {
         const body: EditRequest = await request.json();
-        const { id, name, os, ip, url, cpu, gpu, ram, disk } = body;
+        const { host, hostServer, id, name, icon, os, ip, url, cpu, gpu, ram, disk } = body;
 
         const existingServer = await prisma.server.findUnique({ where: { id } });
         if (!existingServer) {
             return NextResponse.json({ error: "Server not found" }, { status: 404 });
         }
 
+        let newHostServer = hostServer;
+        if (hostServer === null) {
+            newHostServer = 0;
+        } else {
+            newHostServer = hostServer;
+        }
+
         const updatedServer = await prisma.server.update({
             where: { id },
             data: { 
+                host,
+                hostServer: newHostServer,
                 name, 
+                icon,
                 os, 
                 ip, 
                 url,

app/api/servers/get/route.ts

@@ -2,27 +2,53 @@ import { NextResponse, NextRequest } from "next/server";
 import { prisma } from "@/lib/prisma";
 
 interface GetRequest {
-    page: number;
+    page?: number;
+    ITEMS_PER_PAGE?: number;
 }
 
-const ITEMS_PER_PAGE = 5; 
-
 export async function POST(request: NextRequest) {
     try {
         const body: GetRequest = await request.json();
         const page = Math.max(1, body.page || 1);
+        const ITEMS_PER_PAGE = body.ITEMS_PER_PAGE || 4;
 
-        const servers = await prisma.server.findMany({
+        const hosts = await prisma.server.findMany({
+            where: { hostServer: 0 },
             skip: (page - 1) * ITEMS_PER_PAGE,
             take: ITEMS_PER_PAGE,
             orderBy: { name: 'asc' }
         });
 
-        const totalCount = await prisma.server.count();
+        const hostsWithVms = await Promise.all(
-        const maxPage = Math.ceil(totalCount / ITEMS_PER_PAGE);
+            hosts.map(async (host) => {
+                const vms = await prisma.server.findMany({
+                    where: { hostServer: host.id },
+                    orderBy: { name: 'asc' }
+                });
+                
+                // Add isVM flag to VMs
+                const vmsWithFlag = vms.map(vm => ({
+                    ...vm,
+                    isVM: true,
+                    hostedVMs: [] // Initialize empty hostedVMs array for VMs
+                }));
+                
+                return {
+                    ...host,
+                    isVM: false, // Mark as physical server/not a VM
+                    hostedVMs: vmsWithFlag
+                };
+            })
+        );
+
+        const totalHosts = await prisma.server.count({
+            where: { OR: [{ hostServer: 0 }, { hostServer: null }] }
+        });
+
+        const maxPage = Math.ceil(totalHosts / ITEMS_PER_PAGE);
 
         return NextResponse.json({ 
-            servers,
+            servers: hostsWithVms,
             maxPage
         });
     } catch (error: any) {

app/api/servers/hosts/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse, NextRequest } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+export async function GET(request: NextRequest) {
+    try {
+        const servers = await prisma.server.findMany({
+            where: { host: true },
+        });
+        
+        // Add required properties to ensure consistency
+        const serversWithProps = servers.map(server => ({
+            ...server,
+            isVM: false,
+            hostedVMs: [] // Initialize empty hostedVMs array
+        }));
+        
+        return NextResponse.json({ servers: serversWithProps });
+    } catch (error: any) {
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/api/servers/search/route.ts

@@ -11,15 +11,51 @@ export async function POST(request: NextRequest) {
         const body: SearchRequest = await request.json();
         const { searchterm } = body;  
         
+        // Fetch all servers
         const servers = await prisma.server.findMany({});
         
+        // Create a map of host servers with their hosted VMs
+        const serverMap = new Map();
+        servers.forEach(server => {
+            if (server.host) {
+                serverMap.set(server.id, {
+                    ...server,
+                    isVM: false,
+                    hostedVMs: []
+                });
+            }
+        });
+        
+        // Add VMs to their host servers and mark them as VMs
+        const serversWithType = servers.map(server => {
+            // If not a host and has a hostServer, it's a VM
+            if (!server.host && server.hostServer) {
+                const hostServer = serverMap.get(server.hostServer);
+                if (hostServer) {
+                    hostServer.hostedVMs.push({
+                        ...server,
+                        isVM: true
+                    });
+                }
+                return {
+                    ...server,
+                    isVM: true
+                };
+            }
+            return {
+                ...server,
+                isVM: false,
+                hostedVMs: serverMap.get(server.id)?.hostedVMs || []
+            };
+        });
+
         const fuseOptions = {
-            keys: ['name', 'description', 'cpu', 'gpu', 'ram', 'disk'],
+            keys: ['name', 'description', 'cpu', 'gpu', 'ram', 'disk', 'os'],
             threshold: 0.3,
             includeScore: true,
         };
 
-        const fuse = new Fuse(servers, fuseOptions);
+        const fuse = new Fuse(serversWithType, fuseOptions);
         
         const searchResults = fuse.search(searchterm);
 

app/api/settings/get_notification_text/route.ts

@@ -0,0 +1,25 @@
+import { NextResponse, NextRequest } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+
+export async function POST(request: NextRequest) {
+    try {
+        // Check if there are any settings entries
+        const existingSettings = await prisma.settings.findFirst();
+        if (!existingSettings) {
+            return NextResponse.json({ "notification_text": "" });
+        }
+
+        // If settings entry exists, fetch it
+        const settings = await prisma.settings.findFirst({
+            where: { id: existingSettings.id },
+        });
+        if (!settings) {
+            return NextResponse.json({ "notification_text": "" });
+        }
+        // Return the settings entry
+        return NextResponse.json({ "notification_text": settings.notification_text });
+    } catch (error: any) {
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/api/settings/notification_text/route.ts

@@ -0,0 +1,34 @@
+import { NextResponse, NextRequest } from "next/server";
+import { prisma } from "@/lib/prisma";
+
+interface AddRequest {
+    text: string;
+}
+
+export async function POST(request: NextRequest) {
+    try {
+        const body: AddRequest = await request.json();
+        const { text } = body;  
+        
+        // Check if there is already a settings entry
+        const existingSettings = await prisma.settings.findFirst();
+        if (existingSettings) {
+            // Update the existing settings entry
+            const updatedSettings = await prisma.settings.update({
+                where: { id: existingSettings.id },
+                data: { notification_text: text },
+            });
+            return NextResponse.json({ message: "Success", updatedSettings });
+        }
+        // If no settings entry exists, create a new one
+        const settings = await prisma.settings.create({
+            data: {
+                notification_text: text,
+            }
+        });
+
+        return NextResponse.json({ message: "Success", settings });
+    } catch (error: any) {
+        return NextResponse.json({ error: error.message }, { status: 500 });
+    }
+}

app/dashboard/Dashboard.tsx

@@ -1,62 +1,64 @@
-import { AppSidebar } from "@/components/app-sidebar";
+"use client"
+
+import { useEffect, useState } from "react"
+import axios from "axios"
+import Link from "next/link"
+import { Activity, Layers, Network, Server } from "lucide-react"
+
+import { AppSidebar } from "@/components/app-sidebar"
 import {
   Breadcrumb,
   BreadcrumbItem,
-  BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
+} from "@/components/ui/breadcrumb"
-import { Separator } from "@/components/ui/separator";
+import { Separator } from "@/components/ui/separator"
-import {
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
-  SidebarInset,
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-  SidebarProvider,
+import { Button } from "@/components/ui/button"
-  SidebarTrigger,
-} from "@/components/ui/sidebar";
-import { useEffect, useState } from "react";
-import axios from "axios"; // Korrekter Import
-import { Card, CardHeader } from "@/components/ui/card";
 
 interface StatsResponse {
-  serverCount: number;
+  serverCountNoVMs: number
-  applicationCount: number;
+  serverCountOnlyVMs: number
-  onlineApplicationsCount: number;
+  applicationCount: number
+  onlineApplicationsCount: number
 }
 
 export default function Dashboard() {
-  const [serverCount, setServerCount] = useState<number>(0);
+  const [serverCountNoVMs, setServerCountNoVMs] = useState<number>(0)
-  const [applicationCount, setApplicationCount] = useState<number>(0);
+  const [serverCountOnlyVMs, setServerCountOnlyVMs] = useState<number>(0)
-  const [onlineApplicationsCount, setOnlineApplicationsCount] = useState<number>(0);
+  const [applicationCount, setApplicationCount] = useState<number>(0)
+  const [onlineApplicationsCount, setOnlineApplicationsCount] = useState<number>(0)
 
   const getStats = async () => {
     try {
-      const response = await axios.post<StatsResponse>('/api/dashboard/get', {});
+      const response = await axios.post<StatsResponse>("/api/dashboard/get", {})
-      setServerCount(response.data.serverCount);
+      setServerCountNoVMs(response.data.serverCountNoVMs)
-      setApplicationCount(response.data.applicationCount);
+      setServerCountOnlyVMs(response.data.serverCountOnlyVMs)
-      setOnlineApplicationsCount(response.data.onlineApplicationsCount);
+      setApplicationCount(response.data.applicationCount)
+      setOnlineApplicationsCount(response.data.onlineApplicationsCount)
     } catch (error: any) {
-      console.log("Axios error:", error.response?.data);
+      console.log("Axios error:", error.response?.data)
     }
-  };
+  }
 
   useEffect(() => {
-    getStats();
+    getStats()
-  }, []);
+  }, [])
 
   return (
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
           <div className="flex items-center gap-2 px-4">
             <SidebarTrigger className="-ml-1" />
             <Separator orientation="vertical" className="mr-2 h-4" />
             <Breadcrumb>
               <BreadcrumbList>
                 <BreadcrumbItem className="hidden md:block">
-                  <BreadcrumbPage>
+                  <BreadcrumbPage>/</BreadcrumbPage>
-                    /
-                  </BreadcrumbPage>
                 </BreadcrumbItem>
                 <BreadcrumbSeparator className="hidden md:block" />
                 <BreadcrumbItem>
@@ -66,51 +68,135 @@ export default function Dashboard() {
             </Breadcrumb>
           </div>
         </header>
-        <div className="pl-4 pr-4">
+        <div className="p-6">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <h1 className="text-3xl font-bold tracking-tight mb-6">Dashboard</h1>
-            <Card className="w-full mb-4 relative">
+
-              <CardHeader>
+          <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2">
-                <div className="flex items-center justify-center w-full">
+          <Card className="overflow-hidden border-t-4 border-t-rose-500 shadow-lg transition-all hover:shadow-xl hover:border-t-rose-600">
-                  <div className="flex flex-col items-center justify-center">
+            <CardHeader className="pb-2">
-                    <span className="text-2xl font-bold">{serverCount}</span>
+              <div className="flex items-center justify-between">
-                    <span className="text-md">Servers</span>
+                <div>
+                  <CardTitle className="text-2xl font-semibold">Servers</CardTitle>
+                  <CardDescription className="mt-1">Physical and virtual servers overview</CardDescription>
+                </div>
+                <Server className="h-8 w-8 text-rose-500 p-1.5 rounded-lg" />
+              </div>
+            </CardHeader>
+            <CardContent className="pt-2 pb-4">
+              <div className="grid grid-cols-2 gap-4">
+                {/* Physical Servers */}
+                <div className="flex items-center space-x-4 border border-gray-background p-4 rounded-lg">
+                  <div className="bg-rose-100 p-2 rounded-full">
+                    <Server className="h-6 w-6 text-rose-600" />
+                  </div>
+                  <div>
+                    <div className="text-3xl font-bold">{serverCountNoVMs}</div>
+                    <p className="text-sm text-muted-foreground">Physical Servers</p>
                   </div>
                 </div>
-              </CardHeader>
+
-            </Card>
+                {/* Virtual Machines */}
-            <Card className="w-full mb-4 relative">
+                <div className="flex items-center space-x-4 border border-gray-background p-4 rounded-lg">
-              <CardHeader>
+                  <div className="bg-violet-100 p-2 rounded-full">
-                <div className="flex items-center justify-center w-full">
+                    <Network className="h-6 w-6 text-violet-600" />
-                  <div className="flex flex-col items-center justify-center">
+                  </div>
-                    <span className="text-2xl font-bold">{applicationCount}</span>
+                  <div>
-                    <span className="text-md">Applications</span>
+                    <div className="text-3xl font-bold">{serverCountOnlyVMs}</div>
+                    <p className="text-sm text-muted-foreground">Virtual Servers</p>
                   </div>
                 </div>
+              </div>
+            </CardContent>
+            <CardFooter className="border-t bg-muted/10 p-4">
+              <Button 
+                variant="ghost" 
+                size="lg"
+                className="w-full hover:bg-rose-50font-semibold transition-colors"
+                asChild
+              >
+                <Link href="/dashboard/servers" className="flex items-center justify-between">
+                  <span>Manage Servers</span>
+                </Link>
+              </Button>
+            </CardFooter>
+          </Card>
+
+            <Card className="overflow-hidden border-t-4 border-t-amber-500 shadow-sm transition-all hover:shadow-md">
+              <CardHeader className="pb-2">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-xl font-medium">Applications</CardTitle>
+                  <Layers className="h-6 w-6 text-amber-500" />
+                </div>
+                <CardDescription>Manage your deployed applications</CardDescription>
               </CardHeader>
+              <CardContent className="pt-2 pb-4">
+                <div className="text-4xl font-bold">{applicationCount}</div>
+                <p className="text-sm text-muted-foreground mt-2">Running applications</p>
+              </CardContent>
+              <CardFooter className="border-t bg-muted/20 p-4">
+                <Button variant="ghost" size="default" className="w-full hover:bg-background font-medium" asChild>
+                  <Link href="/dashboard/applications">View all applications</Link>
+                </Button>
+              </CardFooter>
             </Card>
-            <Card className="w-full mb-4 relative">
+
-              <CardHeader>
+            <Card className="overflow-hidden border-t-4 border-t-emerald-500 shadow-sm transition-all hover:shadow-md">
-                <div className="flex items-center justify-center w-full">
+              <CardHeader className="pb-2">
-                  <div className="flex flex-col items-center justify-center">
+                <div className="flex items-center justify-between">
-                    <span className="text-2xl font-bold">
+                  <CardTitle className="text-xl font-medium">Uptime</CardTitle>
+                  <Activity className="h-6 w-6 text-emerald-500" />
+                </div>
+                <CardDescription>Monitor your service availability</CardDescription>
+              </CardHeader>
+              <CardContent className="pt-2 pb-4">
+                <div className="flex flex-col">
+                  <div className="text-4xl font-bold flex items-center justify-between">
+                    <span>
                       {onlineApplicationsCount}/{applicationCount}
                     </span>
-                    <span className="text-md">Applications are online</span>
+                    <div className="flex items-center bg-emerald-100 text-emerald-700 px-2 py-1 rounded-md text-lg font-semibold">
+                      {applicationCount > 0 ? Math.round((onlineApplicationsCount / applicationCount) * 100) : 0}%
+                    </div>
                   </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5 mt-3">
+                    <div
+                      className="bg-emerald-500 h-2.5 rounded-full"
+                      style={{
+                        width: `${applicationCount > 0 ? Math.round((onlineApplicationsCount / applicationCount) * 100) : 0}%`,
+                      }}
+                    ></div>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-2">Online applications</p>
                 </div>
-              </CardHeader>
+              </CardContent>
+              <CardFooter className="border-t bg-muted/20 p-4">
+                <Button variant="ghost" size="default" className="w-full hover:bg-background font-medium" asChild>
+                  <Link href="/dashboard/uptime">View uptime metrics</Link>
+                </Button>
+              </CardFooter>
+            </Card>
+
+            <Card className="overflow-hidden border-t-4 border-t-sky-500 shadow-sm transition-all hover:shadow-md">
+              <CardHeader className="pb-2">
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-xl font-medium">Network</CardTitle>
+                  <Network className="h-6 w-6 text-sky-500" />
+                </div>
+                <CardDescription>Manage network configuration</CardDescription>
+              </CardHeader>
+              <CardContent className="pt-2 pb-4">
+                <div className="text-4xl font-bold">{serverCountNoVMs + serverCountOnlyVMs + applicationCount}</div>
+                <p className="text-sm text-muted-foreground mt-2">Active connections</p>
+              </CardContent>
+              <CardFooter className="border-t bg-muted/20 p-4">
+                <Button variant="ghost" size="default" className="w-full hover:bg-background font-medium" asChild>
+                  <Link href="/dashboard/network">View network details</Link>
+                </Button>
+              </CardFooter>
             </Card>
-          </div>
-          <div className="h-72 w-full rounded-xl flex items-center justify-center bg-muted">
-            <span className="text-gray-400 text-2xl">COMING SOON</span>
-          </div>
-          <div className="pt-4">
-            <div className="h-72 w-full rounded-xl flex items-center justify-center bg-muted">
-              <span className="text-gray-400 text-2xl">COMING SOON</span>
-            </div>
           </div>
         </div>
       </SidebarInset>
     </SidebarProvider>
-  );
+  )
 }

app/dashboard/applications/Applications.tsx

@@ -67,6 +67,12 @@ import {
 import Cookies from "js-cookie";
 import { useState, useEffect } from "react";
 import axios from "axios";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
 
 interface Application {
   id: number;
@@ -254,7 +260,7 @@ export default function Dashboard() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+      <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
           <div className="flex items-center gap-2 px-4">
             <SidebarTrigger className="-ml-1" />
             <Separator orientation="vertical" className="mr-2 h-4" />
@@ -275,9 +281,9 @@ export default function Dashboard() {
             </Breadcrumb>
           </div>
         </header>
-        <div className="pl-4 pr-4">
+        <div className="p-6">
           <div className="flex justify-between items-center">
-            <span className="text-2xl font-semibold">Your Applications</span>
+            <span className="text-3xl font-bold">Your Applications</span>
             <div className="flex gap-2">
               <Button
                 variant="outline"
@@ -358,9 +364,18 @@ export default function Dashboard() {
                                 placeholder="https://example.com/icon.png"
                                 onChange={(e) => setIcon(e.target.value)}
                               />
-                              <Button variant="outline" size="icon" onClick={generateIconURL}>
+                              <TooltipProvider>
-                                <Zap />
+                                <Tooltip>
-                              </Button>
+                                  <TooltipTrigger>
+                                    <Button variant="outline" size="icon" onClick={generateIconURL}>
+                                      <Zap />
+                                    </Button>
+                                  </TooltipTrigger>
+                                  <TooltipContent>
+                                    Generate Icon URL
+                                  </TooltipContent>
+                                </Tooltip>
+                              </TooltipProvider>
                             </div>
                           </div>
                           <div className="grid w-full items-center gap-1.5">
@@ -457,12 +472,14 @@ export default function Dashboard() {
                           </CardTitle>
                           <CardDescription className="text-md">
                             {app.description}
-                            <br />
+                            {app.description && (
+                              <br className="hidden md:block" />
+                            )}
                             Server: {app.server || "No server"}
                           </CardDescription>
                         </div>
                       </div>
-                      <div className="flex flex-col items-end justify-start space-y-2 w-[270px]">
+                      <div className="flex flex-col items-end justify-start space-y-2 w-[190px]">
                         <div className="flex items-center gap-2 w-full">
                           <div className="flex flex-col space-y-2 flex-grow">
                             <Button
@@ -473,7 +490,7 @@ export default function Dashboard() {
                               }
                             >
                               <Link className="h-4 w-4" />
-                              Open Public URL
+                              Public URL
                             </Button>
                             {app.localURL && (
                               <Button
@@ -484,7 +501,7 @@ export default function Dashboard() {
                                 }
                               >
                                 <Home className="h-4 w-4" />
-                                Open Local URL
+                                Local URL
                               </Button>
                             )}
                           </div>
@@ -664,14 +681,14 @@ export default function Dashboard() {
               </div>
             </div>
           )}
-          <div className="pt-4">
+          <div className="pt-4 pb-4">
             <Pagination>
               <PaginationContent>
                 <PaginationItem>
                   <PaginationPrevious
-                    href="#"
                     onClick={handlePrevious}
                     isActive={currentPage > 1}
+                    style={{ cursor: currentPage === 1 ? 'not-allowed' : 'pointer' }}
                   />
                 </PaginationItem>
                 <PaginationItem>
@@ -679,9 +696,9 @@ export default function Dashboard() {
                 </PaginationItem>
                 <PaginationItem>
                   <PaginationNext
-                    href="#"
                     onClick={handleNext}
                     isActive={currentPage < maxPage}
+                    style={{ cursor: currentPage === maxPage ? 'not-allowed' : 'pointer' }}
                   />
                 </PaginationItem>
               </PaginationContent>

app/dashboard/network/Networks.tsx

@@ -41,7 +41,7 @@ export default function Dashboard() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset className="flex flex-col h-screen">
-        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
           <div className="flex items-center gap-2 px-4">
             <SidebarTrigger className="-ml-1 dark:text-white" />
             <Separator

app/dashboard/settings/Settings.tsx

@@ -1,35 +1,250 @@
-import { AppSidebar } from "@/components/app-sidebar";
+"use client"
+
+import { AppSidebar } from "@/components/app-sidebar"
 import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
+} from "@/components/ui/breadcrumb"
-import { Separator } from "@/components/ui/separator";
+import { Separator } from "@/components/ui/separator"
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { useTheme } from "next-themes"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Input } from "@/components/ui/input"
+import { useEffect, useState } from "react"
+import axios from "axios"
+import Cookies from "js-cookie"
+import { Button } from "@/components/ui/button"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { AlertCircle, Check, Palette, User, Bell, AtSign, Send, MessageSquare, Trash2 } from "lucide-react"
+
 import {
-  SidebarInset,
+  AlertDialog,
-  SidebarProvider,
+  AlertDialogAction,
-  SidebarTrigger,
+  AlertDialogCancel,
-} from "@/components/ui/sidebar";
+  AlertDialogContent,
-import { Card, CardHeader } from "@/components/ui/card";
+  AlertDialogDescription,
-import { useTheme } from "next-themes";
+  AlertDialogFooter,
-import {
+  AlertDialogTitle,
-  Select,
+  AlertDialogTrigger,
-  SelectContent,
+} from "@/components/ui/alert-dialog"
-  SelectItem,
+import { Label } from "@/components/ui/label"
-  SelectTrigger,
+import { Checkbox } from "@/components/ui/checkbox"
-  SelectValue,
+import { Textarea } from "@/components/ui/textarea"
-} from "@/components/ui/select";
+
+interface NotificationsResponse {
+  notifications: any[]
+}
+interface NotificationResponse {
+  notification_text?: string
+}
 
 export default function Settings() {
-  const { theme, setTheme } = useTheme();
+  const { theme, setTheme } = useTheme()
+
+  const [email, setEmail] = useState<string>("")
+  const [password, setPassword] = useState<string>("")
+  const [confirmPassword, setConfirmPassword] = useState<string>("")
+  const [oldPassword, setOldPassword] = useState<string>("")
+
+  const [emailError, setEmailError] = useState<string>("")
+  const [passwordError, setPasswordError] = useState<string>("")
+  const [emailErrorVisible, setEmailErrorVisible] = useState<boolean>(false)
+  const [passwordErrorVisible, setPasswordErrorVisible] = useState<boolean>(false)
+
+  const [passwordSuccess, setPasswordSuccess] = useState<boolean>(false)
+  const [emailSuccess, setEmailSuccess] = useState<boolean>(false)
+
+  const [notificationType, setNotificationType] = useState<string>("")
+  const [smtpHost, setSmtpHost] = useState<string>("")
+  const [smtpPort, setSmtpPort] = useState<number>(0)
+  const [smtpSecure, setSmtpSecure] = useState<boolean>(false)
+  const [smtpUsername, setSmtpUsername] = useState<string>("")
+  const [smtpPassword, setSmtpPassword] = useState<string>("")
+  const [smtpFrom, setSmtpFrom] = useState<string>("")
+  const [smtpTo, setSmtpTo] = useState<string>("")
+  const [telegramToken, setTelegramToken] = useState<string>("")
+  const [telegramChatId, setTelegramChatId] = useState<string>("")
+  const [discordWebhook, setDiscordWebhook] = useState<string>("")
+  const [gotifyUrl, setGotifyUrl] = useState<string>("")
+  const [gotifyToken, setGotifyToken] = useState<string>("")
+  const [ntfyUrl, setNtfyUrl] = useState<string>("")
+  const [ntfyToken, setNtfyToken] = useState<string>("")
+
+  const [notifications, setNotifications] = useState<any[]>([])
+
+  const [notificationText, setNotificationText] = useState<string>("")
+
+  const changeEmail = async () => {
+    setEmailErrorVisible(false)
+    setEmailSuccess(false)
+    setEmailError("")
+
+    if (!email) {
+      setEmailError("Email is required")
+      setEmailErrorVisible(true)
+      setTimeout(() => {
+        setEmailErrorVisible(false)
+        setEmailError("")
+      }, 3000)
+      return
+    }
+    try {
+      await axios.post("/api/auth/edit_email", {
+        newEmail: email,
+        jwtToken: Cookies.get("token"),
+      })
+      setEmailSuccess(true)
+      setEmail("")
+      setTimeout(() => {
+        setEmailSuccess(false)
+      }, 3000)
+    } catch (error: any) {
+      setEmailError(error.response.data.error)
+      setEmailErrorVisible(true)
+      setTimeout(() => {
+        setEmailErrorVisible(false)
+        setEmailError("")
+      }, 3000)
+    }
+  }
+
+  const changePassword = async () => {
+    try {
+      if (password !== confirmPassword) {
+        setPasswordError("Passwords do not match")
+        setPasswordErrorVisible(true)
+        setTimeout(() => {
+          setPasswordErrorVisible(false)
+          setPasswordError("")
+        }, 3000)
+        return
+      }
+      if (!oldPassword || !password || !confirmPassword) {
+        setPasswordError("All fields are required")
+        setPasswordErrorVisible(true)
+        setTimeout(() => {
+          setPasswordErrorVisible(false)
+          setPasswordError("")
+        }, 3000)
+        return
+      }
+
+      const response = await axios.post("/api/auth/edit_password", {
+        oldPassword: oldPassword,
+        newPassword: password,
+        jwtToken: Cookies.get("token"),
+      })
+
+      if (response.status === 200) {
+        setPasswordSuccess(true)
+        setPassword("")
+        setOldPassword("")
+        setConfirmPassword("")
+        setTimeout(() => {
+          setPasswordSuccess(false)
+        }, 3000)
+      }
+    } catch (error: any) {
+      setPasswordErrorVisible(true)
+      setPasswordError(error.response.data.error)
+      setTimeout(() => {
+        setPasswordErrorVisible(false)
+        setPasswordError("")
+      }, 3000)
+    }
+  }
+
+  const addNotification = async () => {
+    try {
+      const response = await axios.post("/api/notifications/add", {
+        type: notificationType,
+        smtpHost: smtpHost,
+        smtpPort: smtpPort,
+        smtpSecure: smtpSecure,
+        smtpUsername: smtpUsername,
+        smtpPassword: smtpPassword,
+        smtpFrom: smtpFrom,
+        smtpTo: smtpTo,
+        telegramToken: telegramToken,
+        telegramChatId: telegramChatId,
+        discordWebhook: discordWebhook,
+        gotifyUrl: gotifyUrl,
+        gotifyToken: gotifyToken,
+        ntfyUrl: ntfyUrl,
+        ntfyToken: ntfyToken,
+      })
+      getNotifications()
+    } catch (error: any) {
+      alert(error.response.data.error)
+    }
+  }
+
+  const deleteNotification = async (id: number) => {
+    try {
+      const response = await axios.post("/api/notifications/delete", {
+        id: id,
+      })
+      if (response.status === 200) {
+        getNotifications()
+      }
+    } catch (error: any) {
+      alert(error.response.data.error)
+    }
+  }
+
+  const getNotifications = async () => {
+    try {
+      const response = await axios.post<NotificationsResponse>("/api/notifications/get", {})
+      if (response.status === 200 && response.data) {
+        setNotifications(response.data.notifications)
+      }
+    } catch (error: any) {
+      alert(error.response.data.error)
+    }
+  }
+
+  useEffect(() => {
+    getNotifications()
+  }, [])
+
+  const getNotificationText = async () => {
+    try {
+      const response = await axios.post<NotificationResponse>("/api/settings/get_notification_text", {})
+      if (response.status === 200) {
+        if (response.data.notification_text) {
+          setNotificationText(response.data.notification_text)
+        } else {
+          setNotificationText("The application !name (!url) is now !status.")
+        }
+      }
+    } catch (error: any) {
+      alert(error.response.data.error)
+    }
+  }
+
+  const editNotificationText = async () => {
+    try {
+      const response = await axios.post("/api/settings/notification_text", {
+        text: notificationText,
+      })
+    } catch (error: any) {
+      alert(error.response.data.error)
+    }
+  }
+
+  useEffect(() => {
+    getNotificationText()
+  }, [])
 
   return (
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
           <div className="flex items-center gap-2 px-4">
             <SidebarTrigger className="-ml-1" />
             <Separator orientation="vertical" className="mr-2 h-4" />
@@ -50,32 +265,464 @@ export default function Settings() {
             </Breadcrumb>
           </div>
         </header>
-        <div className="pl-4 pr-4">
+        <div className="p-6">
-          <span className="text-2xl font-semibold">Settings</span>
+          <div className="pb-4">
-          <div className="pt-4">
+            <span className="text-3xl font-bold">Settings</span>
-            <Card className="w-full mb-4 relative">
+          </div>
-              <CardHeader>
+          <div className="grid gap-6">
-                <span className="text-xl font-bold">Theme</span>
+            <Card className="overflow-hidden border-2 border-muted/20 shadow-sm">
-                <Select 
+              <CardHeader className="bg-muted/10 px-6 py-4 border-b">
-                  value={theme} 
+                <div className="flex items-center gap-2">
-                  onValueChange={(value: string) => setTheme(value)}
+                  <User className="h-5 w-5 text-primary" />
-                >
+                  <h2 className="text-xl font-semibold">User Settings</h2>
-                  <SelectTrigger className="w-full [&_svg]:hidden">
+                </div>
-                    <SelectValue>
-                      {(theme ?? 'system').charAt(0).toUpperCase() + (theme ?? 'system').slice(1)}
-                    </SelectValue>
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="light">Light</SelectItem>
-                    <SelectItem value="dark">Dark</SelectItem>
-                    <SelectItem value="system">System</SelectItem>
-                  </SelectContent>
-                </Select>
               </CardHeader>
+              <CardContent className="pb-6">
+                <div className="text-sm text-muted-foreground mb-6">
+                  Manage your user settings here. You can change your email, password, and other account settings.
+                </div>
+
+                <div className="grid md:grid-cols-2 gap-8">
+                  <div className="space-y-4">
+                    <div className="border-b pb-2">
+                      <h3 className="font-semibold text-lg">Change Email</h3>
+                    </div>
+
+                    {emailErrorVisible && (
+                      <Alert variant="destructive" className="animate-in fade-in-50">
+                        <AlertCircle className="h-4 w-4" />
+                        <AlertTitle>Error</AlertTitle>
+                        <AlertDescription>{emailError}</AlertDescription>
+                      </Alert>
+                    )}
+
+                    {emailSuccess && (
+                      <Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-300 animate-in fade-in-50">
+                        <Check className="h-4 w-4" />
+                        <AlertTitle>Success</AlertTitle>
+                        <AlertDescription>Email changed successfully.</AlertDescription>
+                      </Alert>
+                    )}
+
+                    <div className="space-y-3">
+                      <Input
+                        type="email"
+                        placeholder="Enter new email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        className="h-11"
+                      />
+                      <Button onClick={changeEmail} className="w-full h-11">
+                        Change Email
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="space-y-4">
+                    <div className="border-b pb-2">
+                      <h3 className="font-semibold text-lg">Change Password</h3>
+                    </div>
+
+                    {passwordErrorVisible && (
+                      <Alert variant="destructive" className="animate-in fade-in-50">
+                        <AlertCircle className="h-4 w-4" />
+                        <AlertTitle>Error</AlertTitle>
+                        <AlertDescription>{passwordError}</AlertDescription>
+                      </Alert>
+                    )}
+
+                    {passwordSuccess && (
+                      <Alert className="border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950 dark:text-green-300 animate-in fade-in-50">
+                        <Check className="h-4 w-4" />
+                        <AlertTitle>Success</AlertTitle>
+                        <AlertDescription>Password changed successfully.</AlertDescription>
+                      </Alert>
+                    )}
+
+                    <div className="space-y-3">
+                      <Input
+                        type="password"
+                        placeholder="Enter old password"
+                        value={oldPassword}
+                        onChange={(e) => setOldPassword(e.target.value)}
+                        className="h-11"
+                      />
+                      <Input
+                        type="password"
+                        placeholder="Enter new password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        className="h-11"
+                      />
+                      <Input
+                        type="password"
+                        placeholder="Confirm new password"
+                        value={confirmPassword}
+                        onChange={(e) => setConfirmPassword(e.target.value)}
+                        className="h-11"
+                      />
+                      <Button onClick={changePassword} className="w-full h-11">
+                        Change Password
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="overflow-hidden border-2 border-muted/20 shadow-sm">
+              <CardHeader className="bg-muted/10 px-6 py-4 border-b">
+                <div className="flex items-center gap-2">
+                  <Palette className="h-5 w-5 text-primary" />
+                  <h2 className="text-xl font-semibold">Theme Settings</h2>
+                </div>
+              </CardHeader>
+              <CardContent className="pb-6">
+                <div className="text-sm text-muted-foreground mb-6">
+                  Select a theme for the application. You can choose between light, dark, or system theme.
+                </div>
+
+                <div className="max-w-md">
+                  <Select value={theme} onValueChange={(value: string) => setTheme(value)}>
+                    <SelectTrigger className="w-full h-11">
+                      <SelectValue>
+                        {(theme ?? "system").charAt(0).toUpperCase() + (theme ?? "system").slice(1)}
+                      </SelectValue>
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="light">Light</SelectItem>
+                      <SelectItem value="dark">Dark</SelectItem>
+                      <SelectItem value="system">System</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="overflow-hidden border-2 border-muted/20 shadow-sm">
+              <CardHeader className="bg-muted/10 px-6 py-4 border-b">
+                <div className="flex items-center gap-3">
+                  <div className="bg-muted/20 p-2 rounded-full">
+                    <Bell className="h-5 w-5 text-primary" />
+                  </div>
+                  <h2 className="text-xl font-semibold">Notifications</h2>
+                </div>
+              </CardHeader>
+              <CardContent className="p-6">
+                <div className="text-sm text-muted-foreground mb-6">
+                  Set up notifications to get instantly alerted when an application changes status.
+                </div>
+
+                <div className="grid gap-4 md:grid-cols-2">
+                  <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                      <Button className="w-full h-11 flex items-center gap-2">
+                        Add Notification Channel
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogTitle>Add Notification</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        <Select value={notificationType} onValueChange={(value: string) => setNotificationType(value)}>
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder="Notification Type" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="smtp">SMTP</SelectItem>
+                            <SelectItem value="telegram">Telegram</SelectItem>
+                            <SelectItem value="discord">Discord</SelectItem>
+                            <SelectItem value="gotify">Gotify</SelectItem>
+                            <SelectItem value="ntfy">Ntfy</SelectItem>
+                          </SelectContent>
+
+                          {notificationType === "smtp" && (
+                            <div className="mt-4 space-y-4">
+                              <div className="grid md:grid-cols-2 gap-4">
+                                <div className="space-y-1.5">
+                                  <Label htmlFor="smtpHost">SMTP Host</Label>
+                                  <Input
+                                    type="text"
+                                    id="smtpHost"
+                                    placeholder="smtp.example.com"
+                                    onChange={(e) => setSmtpHost(e.target.value)}
+                                  />
+                                </div>
+                                <div className="space-y-1.5">
+                                  <Label htmlFor="smtpPort">SMTP Port</Label>
+                                  <Input
+                                    type="number"
+                                    id="smtpPort"
+                                    placeholder="587"
+                                    onChange={(e) => setSmtpPort(Number(e.target.value))}
+                                  />
+                                </div>
+                              </div>
+
+                              <div className="flex items-center space-x-2 pt-2 pb-4">
+                                <Checkbox id="smtpSecure" onCheckedChange={(checked: any) => setSmtpSecure(checked)} />
+                                <Label htmlFor="smtpSecure" className="text-sm font-medium leading-none">
+                                  Secure Connection (TLS/SSL)
+                                </Label>
+                              </div>
+
+                              <div className="grid gap-4">
+                                <div className="space-y-1.5">
+                                  <Label htmlFor="smtpUser">SMTP Username</Label>
+                                  <Input
+                                    type="text"
+                                    id="smtpUser"
+                                    placeholder="user@example.com"
+                                    onChange={(e) => setSmtpUsername(e.target.value)}
+                                  />
+                                </div>
+
+                                <div className="space-y-1.5">
+                                  <Label htmlFor="smtpPass">SMTP Password</Label>
+                                  <Input
+                                    type="password"
+                                    id="smtpPass"
+                                    placeholder="••••••••"
+                                    onChange={(e) => setSmtpPassword(e.target.value)}
+                                  />
+                                </div>
+
+                                <div className="grid md:grid-cols-2 gap-4">
+                                  <div className="space-y-1.5">
+                                    <Label htmlFor="smtpFrom">From Address</Label>
+                                    <Input
+                                      type="email"
+                                      id="smtpFrom"
+                                      placeholder="noreply@example.com"
+                                      onChange={(e) => setSmtpFrom(e.target.value)}
+                                    />
+                                  </div>
+
+                                  <div className="space-y-1.5">
+                                    <Label htmlFor="smtpTo">To Address</Label>
+                                    <Input
+                                      type="email"
+                                      id="smtpTo"
+                                      placeholder="admin@example.com"
+                                      onChange={(e) => setSmtpTo(e.target.value)}
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          )}
+
+                          {notificationType === "telegram" && (
+                            <div className="mt-4 space-y-2">
+                              <div className="grid w-full items-center gap-1.5">
+                                <Label htmlFor="telegramToken">Bot Token</Label>
+                                <Input
+                                  type="text"
+                                  id="telegramToken"
+                                  placeholder=""
+                                  onChange={(e) => setTelegramToken(e.target.value)}
+                                />
+                              </div>
+                              <div className="grid w-full items-center gap-1.5">
+                                <Label htmlFor="telegramChatId">Chat ID</Label>
+                                <Input
+                                  type="text"
+                                  id="telegramChatId"
+                                  placeholder=""
+                                  onChange={(e) => setTelegramChatId(e.target.value)}
+                                />
+                              </div>
+                            </div>
+                          )}
+
+                          {notificationType === "discord" && (
+                            <div className="mt-4">
+                              <div className="grid w-full items-center gap-1.5">
+                                <Label htmlFor="discordWebhook">Webhook URL</Label>
+                                <Input
+                                  type="text"
+                                  id="discordWebhook"
+                                  placeholder=""
+                                  onChange={(e) => setDiscordWebhook(e.target.value)}
+                                />
+                              </div>
+                            </div>
+                          )}
+
+                          {notificationType === "gotify" && (
+                            <div className="mt-4">
+                              <div className="grid w-full items-center gap-1.5">
+                                <Label htmlFor="gotifyUrl">Gotify URL</Label>
+                                <Input
+                                  type="text"
+                                  id="gotifyUrl"
+                                  placeholder=""
+                                  onChange={(e) => setGotifyUrl(e.target.value)}
+                                />
+                                <div className="grid w-full items-center gap-1.5">
+                                  <Label htmlFor="gotifyToken">Gotify Token</Label>
+                                  <Input
+                                    type="text"
+                                    id="gotifyToken"
+                                    placeholder=""
+                                    onChange={(e) => setGotifyToken(e.target.value)}
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          )}
+
+                          {notificationType === "ntfy" && (
+                            <div className="mt-4">
+                              <div className="grid w-full items-center gap-1.5">
+                                <Label htmlFor="ntfyUrl">Ntfy URL</Label>
+                                <Input
+                                  type="text"
+                                  id="ntfyUrl"
+                                  placeholder=""
+                                  onChange={(e) => setNtfyUrl(e.target.value)}
+                                />
+                                <div className="grid w-full items-center gap-1.5">
+                                  <Label htmlFor="ntfyToken">Ntfy Token</Label>
+                                  <Input
+                                    type="text"
+                                    id="ntfyToken"
+                                    placeholder=""
+                                    onChange={(e) => setNtfyToken(e.target.value)}
+                                  />
+                                </div>                                
+                              </div>  
+                            </div>
+                          )}
+                        </Select>
+                      </AlertDialogDescription>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction onClick={addNotification}>Add</AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+
+                  <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                      <Button className="w-full h-11" variant="outline">
+                        Customize Notification Text
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogTitle>Customize Notification Text</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        <div className="space-y-4">
+                          <div className="space-y-1.5">
+                            <Label htmlFor="text">Notification Text</Label>
+                            <Textarea
+                              id="text"
+                              placeholder="Type here..."
+                              value={notificationText}
+                              onChange={(e) => setNotificationText(e.target.value)}
+                              rows={4}
+                            />
+                          </div>
+                        </div>
+                        <div className="pt-4 text-sm text-muted-foreground">
+                          You can use the following placeholders in the text:
+                          <ul className="list-disc list-inside space-y-1 pt-2">
+                            <li>
+                              <strong>!name</strong> - Application name
+                            </li>
+                            <li>
+                              <strong>!url</strong> - Application URL
+                            </li>
+                            <li>
+                              <strong>!status</strong> - Application status (online/offline)
+                            </li>
+                          </ul>
+                        </div>
+                      </AlertDialogDescription>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction onClick={editNotificationText}>Save</AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                </div>
+
+                <div className="mt-8">
+                  <h3 className="text-lg font-medium mb-4">Active Notification Channels</h3>
+                  <div className="space-y-3">
+                    {notifications.length > 0 ? (
+                      notifications.map((notification) => (
+                        <div
+                          key={notification.id}
+                          className="flex items-center justify-between p-4 rounded-lg border bg-card transition-all hover:shadow-sm"
+                        >
+                          <div className="flex items-center gap-3">
+                            {notification.type === "smtp" && (
+                              <div className="bg-muted/20 p-2 rounded-full">
+                                <AtSign className="h-5 w-5 text-primary" />
+                              </div>
+                            )}
+                            {notification.type === "telegram" && (
+                              <div className="bg-muted/20 p-2 rounded-full">
+                                <Send className="h-5 w-5 text-primary" />
+                              </div>
+                            )}
+                            {notification.type === "discord" && (
+                              <div className="bg-muted/20 p-2 rounded-full">
+                                <MessageSquare className="h-5 w-5 text-primary" />
+                              </div>
+                            )}
+                            {notification.type === "gotify" && (
+                              <div className="bg-muted/20 p-2 rounded-full">
+                                <Bell className="h-5 w-5 text-primary" />
+                              </div>
+                            )}
+                            {notification.type === "ntfy" && (
+                              <div className="bg-muted/20 p-2 rounded-full">
+                                <Bell className="h-5 w-5 text-primary" />
+                              </div>
+                            )}
+                            <div className="space-y-1">
+                              <h3 className="font-medium capitalize">{notification.type}</h3>
+                              <p className="text-xs text-muted-foreground">
+                                {notification.type === "smtp" && "Email notifications"}
+                                {notification.type === "telegram" && "Telegram bot alerts"}
+                                {notification.type === "discord" && "Discord webhook alerts"}
+                                {notification.type === "gotify" && "Gotify notifications"}
+                                {notification.type === "ntfy" && "Ntfy notifications"}
+                              </p>
+                            </div>
+                          </div>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="hover:bg-muted/20"
+                            onClick={() => deleteNotification(notification.id)}
+                          >
+                            <Trash2 className="h-4 w-4 mr-1" />
+                            Remove
+                          </Button>
+                        </div>
+                      ))
+                    ) : (
+                      <div className="text-center py-12 border rounded-lg bg-muted/5">
+                        <div className="flex justify-center mb-3">
+                          <div className="bg-muted/20 p-3 rounded-full">
+                            <Bell className="h-6 w-6 text-muted-foreground" />
+                          </div>
+                        </div>
+                        <h3 className="text-lg font-medium mb-1">No notifications configured</h3>
+                        <p className="text-sm text-muted-foreground max-w-md mx-auto">
+                          Add a notification channel to get alerted when your applications change status.
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </CardContent>
             </Card>
           </div>
         </div>
       </SidebarInset>
     </SidebarProvider>
-  );
+  )
 }

app/dashboard/uptime/Uptime.tsx

@@ -0,0 +1,296 @@
+import { AppSidebar } from "@/components/app-sidebar";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { Card, CardHeader } from "@/components/ui/card";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationLink,
+} from "@/components/ui/pagination";
+
+const timeFormats = {
+  1: (timestamp: string) => 
+    new Date(timestamp).toLocaleTimeString([], { 
+      hour: '2-digit', 
+      minute: '2-digit',
+      hour12: false 
+    }),
+  2: (timestamp: string) => {
+    const start = new Date(timestamp);
+    const end = new Date(start.getTime() + 3 * 60 * 60 * 1000);
+    return `${start.toLocaleDateString([], { day: '2-digit', month: 'short' })} 
+      ${start.getHours().toString().padStart(2, '0')}:00 - 
+      ${end.getHours().toString().padStart(2, '0')}:00`;
+  },
+  3: (timestamp: string) => 
+    new Date(timestamp).toLocaleDateString([], { 
+      day: '2-digit', 
+      month: 'short' 
+    })
+};
+
+const minBoxWidths = {
+  1: 24,
+  2: 24,
+  3: 24
+};
+
+interface UptimeData {
+  appName: string;
+  appId: number;
+  uptimeSummary: {
+    timestamp: string;
+    missing: boolean;
+    online: boolean | null;
+  }[];
+}
+
+interface PaginationData {
+  currentPage: number;
+  totalPages: number;
+  totalItems: number;
+}
+
+export default function Uptime() {
+  const [data, setData] = useState<UptimeData[]>([]);
+  const [timespan, setTimespan] = useState<1 | 2 | 3>(1);
+  const [pagination, setPagination] = useState<PaginationData>({
+    currentPage: 1,
+    totalPages: 1,
+    totalItems: 0
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const getData = async (selectedTimespan: number, page: number) => {
+    setIsLoading(true);
+    try {
+      const response = await axios.post<{
+        data: UptimeData[];
+        pagination: PaginationData;
+      }>("/api/applications/uptime", { 
+        timespan: selectedTimespan,
+        page
+      });
+      
+      setData(response.data.data);
+      setPagination(response.data.pagination);
+    } catch (error) {
+      console.error("Error:", error);
+      setData([]);
+      setPagination({
+        currentPage: 1,
+        totalPages: 1,
+        totalItems: 0
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handlePrevious = () => {
+    const newPage = Math.max(1, pagination.currentPage - 1);
+    setPagination(prev => ({...prev, currentPage: newPage}));
+    getData(timespan, newPage);
+  };
+
+  const handleNext = () => {
+    const newPage = Math.min(pagination.totalPages, pagination.currentPage + 1);
+    setPagination(prev => ({...prev, currentPage: newPage}));
+    getData(timespan, newPage);
+  };
+
+  useEffect(() => {
+    getData(timespan, 1);
+  }, [timespan]);
+
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbPage>/</BreadcrumbPage>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>My Infrastructure</BreadcrumbPage>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Uptime</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="p-6">
+          <div className="flex justify-between items-center">
+            <span className="text-3xl font-bold">Uptime</span>
+            <Select 
+              value={String(timespan)} 
+              onValueChange={(v) => {
+                setTimespan(Number(v) as 1 | 2 | 3);
+                setPagination(prev => ({...prev, currentPage: 1}));
+              }}
+              disabled={isLoading}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Select timespan" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="1">Last 30 minutes</SelectItem>
+                <SelectItem value="2">Last 7 days</SelectItem>
+                <SelectItem value="3">Last 30 days</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="pt-4 space-y-4">
+            {isLoading ? (
+              <div className="text-center py-8">Loading...</div>
+            ) : (
+              data.map((app) => {
+                const reversedSummary = [...app.uptimeSummary].reverse();
+                const startTime = reversedSummary[0]?.timestamp;
+                const endTime = reversedSummary[reversedSummary.length - 1]?.timestamp;
+
+                return (
+                  <Card key={app.appId}>
+                    <CardHeader>
+                      <div className="flex flex-col gap-4">
+                        <div className="flex justify-between items-center">
+                          <span className="text-lg font-semibold">{app.appName}</span>
+                        </div>
+                        
+                        <div className="flex flex-col gap-2">
+                          <div className="flex justify-between text-sm text-muted-foreground">
+                            <span>{startTime ? timeFormats[timespan](startTime) : ""}</span>
+                            <span>{endTime ? timeFormats[timespan](endTime) : ""}</span>
+                          </div>
+                          
+                          <Tooltip.Provider>
+                            <div 
+                              className="grid gap-0.5 w-full pb-2"
+                              style={{ 
+                                gridTemplateColumns: `repeat(auto-fit, minmax(${minBoxWidths[timespan]}px, 1fr))`
+                              }}
+                            >
+                              {reversedSummary.map((entry) => (
+                                <Tooltip.Root key={entry.timestamp}>
+                                  <Tooltip.Trigger asChild>
+                                    <div
+                                      className={`h-8 w-full rounded-sm border transition-colors ${
+                                        entry.missing
+                                          ? "bg-gray-300 border-gray-400"
+                                          : entry.online
+                                          ? "bg-green-500 border-green-600"
+                                          : "bg-red-500 border-red-600"
+                                      }`}
+                                    />
+                                  </Tooltip.Trigger>
+                                  <Tooltip.Portal>
+                                    <Tooltip.Content
+                                      className="rounded bg-gray-900 px-2 py-1 text-white text-xs shadow-lg"
+                                      side="top"
+                                    >
+                                      <div className="flex flex-col gap-1">
+                                        <p className="font-medium">
+                                          {timespan === 2 ? (
+                                            timeFormats[2](entry.timestamp)
+                                          ) : (
+                                            new Date(entry.timestamp).toLocaleString([], {
+                                              year: 'numeric',
+                                              month: 'short',
+                                              day: 'numeric',
+                                              hour: '2-digit',
+                                              minute: timespan === 3 ? undefined : '2-digit',
+                                              hour12: false
+                                            })
+                                          )}
+                                        </p>
+                                        <p>
+                                          {entry.missing
+                                            ? "No data"
+                                            : entry.online
+                                            ? "Online"
+                                            : "Offline"}
+                                        </p>
+                                      </div>
+                                      <Tooltip.Arrow className="fill-gray-900" />
+                                    </Tooltip.Content>
+                                  </Tooltip.Portal>
+                                </Tooltip.Root>
+                              ))}
+                            </div>
+                          </Tooltip.Provider>
+                        </div>
+                      </div>
+                    </CardHeader>
+                  </Card>
+                );
+              })
+            )}
+          </div>
+
+          {pagination.totalItems > 0 && !isLoading && (
+            <div className="pt-4 pb-4">
+              <Pagination>
+                <PaginationContent>
+                  <PaginationItem>
+                    <PaginationPrevious
+                      onClick={handlePrevious}
+                      aria-disabled={pagination.currentPage === 1 || isLoading}
+                      className={
+                        pagination.currentPage === 1 || isLoading 
+                          ? "opacity-50 cursor-not-allowed" 
+                          : "hover:cursor-pointer"
+                      }
+                    />
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationLink isActive>{pagination.currentPage}</PaginationLink>
+                  </PaginationItem>
+                  <PaginationItem>
+                    <PaginationNext
+                      onClick={handleNext}
+                      aria-disabled={pagination.currentPage === pagination.totalPages || isLoading}
+                      className={
+                        pagination.currentPage === pagination.totalPages || isLoading 
+                          ? "opacity-50 cursor-not-allowed" 
+                          : "hover:cursor-pointer"
+                      }
+                    />
+                  </PaginationItem>
+                </PaginationContent>
+              </Pagination>
+            </div>
+          )}
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

app/dashboard/uptime/page.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+import Uptime from "./Uptime";
+import axios from "axios";
+
+export default function DashboardPage() {
+    const router = useRouter();
+    const [isAuthChecked, setIsAuthChecked] = useState(false);
+    const [isValid, setIsValid] = useState(false);
+
+    useEffect(() => {
+        const token = Cookies.get("token");
+        if (!token) {
+            router.push("/");
+        } else {
+            const checkToken = async () => {
+                try {
+                    const response = await axios.post("/api/auth/validate", {
+                        token: token,
+                    });
+
+                    if (response.status === 200) {
+                        setIsValid(true);
+                    }
+                } catch (error: any) {
+                    Cookies.remove("token");
+                    router.push("/");
+                }
+            }
+            checkToken();
+        }
+        setIsAuthChecked(true);
+    }, [router]);
+
+    if (!isAuthChecked) {
+        return (
+            <div className="flex items-center justify-center h-screen">
+                <div className='inline-block' role='status' aria-label='loading'>
+                <svg className='w-6 h-6 stroke-white animate-spin ' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+                <g clip-path='url(#clip0_9023_61563)'>
+                    <path d='M14.6437 2.05426C11.9803 1.2966 9.01686 1.64245 6.50315 3.25548C1.85499 6.23817 0.504864 12.4242 3.48756 17.0724C6.47025 21.7205 12.6563 23.0706 17.3044 20.088C20.4971 18.0393 22.1338 14.4793 21.8792 10.9444' stroke='stroke-current' stroke-width='1.4' stroke-linecap='round' className='my-path'></path>
+                </g>
+                <defs>
+                    <clipPath id='clip0_9023_61563'>
+                    <rect width='24' height='24' fill='white'></rect>
+                    </clipPath>
+                </defs>
+                </svg>
+                <span className='sr-only'>Loading...</span>
+                </div>
+            </div>
+        )
+    }
+
+    return isValid ? <Uptime /> : null;
+}

app/page.tsx

@@ -1,108 +1,148 @@
-"use client";
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import Cookies from "js-cookie"
+import { useRouter } from "next/navigation"
+import axios from "axios"
+import { AlertCircle, KeyRound, Mail, User } from "lucide-react"
+import Link from "next/link"
 
 import { Button } from "@/components/ui/button"
-import {
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { AlertCircle } from "lucide-react"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
- 
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-} from "@/components/ui/alert"
-
-import { useState, useEffect } from "react";
-import Cookies from "js-cookie";
-import { useRouter } from "next/navigation";
-import axios from "axios";
-
 
 export default function Home() {
-  const [username, setUsername] = useState('');
+  const [username, setUsername] = useState("")
-  const [password, setPassword] = useState('');
+  const [password, setPassword] = useState("")
-  const router = useRouter();
+  const [rememberMe, setRememberMe] = useState(false)
-  const [error, setError] = useState('');
+  const router = useRouter()
-  const [errorVisible, setErrorVisible] = useState(false);
+  const [error, setError] = useState("")
+  const [errorVisible, setErrorVisible] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
-    const token = Cookies.get('token');
+    const token = Cookies.get("token")
     if (token) {
-      router.push('/dashboard');
+      router.push("/dashboard")
     }
-  }, [router]);
+  }, [router])
 
   interface LoginResponse {
-    token: string;
+    token: string
   }
 
   const login = async () => {
-    try {
+    if (!username || !password) {
-      const response = await axios.post('/api/auth/login', { username, password });
+      setError("Please enter both email and password")
-      const { token } = response.data as LoginResponse;
-      Cookies.set('token', token);
-      router.push('/dashboard');
-    } catch (error: any) {
-      setError(error.response.data.error);
       setErrorVisible(true)
+      return
+    }
+
+    try {
+      setIsLoading(true)
+      const response = await axios.post("/api/auth/login", { username, password })
+      const { token } = response.data as LoginResponse
+
+      const cookieOptions = rememberMe ? { expires: 7 } : {}
+      Cookies.set("token", token, cookieOptions)
+
+      router.push("/dashboard")
+    } catch (error: any) {
+      setError(error.response?.data?.error || "Login failed. Please try again.")
+      setErrorVisible(true)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      login()
     }
   }
 
   return (
-    <div className="flex flex-col min-h-screen items-center justify-center gap-6 ">
+    <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-background to-muted/30 p-4">
-      <Card className="w-1/3">
+      <div className="w-full max-w-md space-y-8">
-        <CardHeader>
+        <div className="text-center space-y-2">
-          <CardTitle className="text-2xl">Login</CardTitle>
+          <div className="flex justify-center">
-          <CardDescription>
+            <div className="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center">
-            Enter your Login data of the compose.yml file below to access
+              <KeyRound className="h-8 w-8 text-primary" />
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-        {errorVisible && (
-          <>
-            <div className="pb-4">
-              <Alert variant="destructive">
-                <AlertCircle className="h-4 w-4" />
-                <AlertTitle>Error</AlertTitle>
-                <AlertDescription>
-                  {error}
-                </AlertDescription>
-              </Alert>
-            </div>
-          </>
-        )}
-
-          <div>
-            <div className="flex flex-col gap-6">
-              <div className="grid gap-2">
-                <Label htmlFor="email">Email</Label>
-                <Input
-                  id="email"
-                  type="email"
-                  placeholder="mail@example.com"
-                  required
-                  onChange={(e) => setUsername(e.target.value)} 
-                />
-              </div>
-              <div className="grid gap-2">
-                <div className="flex items-center">
-                  <Label htmlFor="password">Password</Label>
-                </div>
-                <Input id="password" type="password" required placeholder="* * * * * * *" onChange={(e) => setPassword(e.target.value)}/>
-              </div>
-              <Button className="w-full" onClick={login}>
-                Login
-              </Button>
             </div>
           </div>
-        </CardContent>
+          <h1 className="text-4xl font-bold tracking-tight text-foreground">CoreControl</h1>
-      </Card>
+          <p className="text-muted-foreground">Sign in to access your dashboard</p>
+        </div>
+
+        <Card className="border-muted/40 shadow-lg">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl font-semibold">Login</CardTitle>
+            <CardDescription>Enter your credentials to continue</CardDescription>
+          </CardHeader>
+
+          <CardContent className="space-y-4">
+            {errorVisible && (
+              <Alert variant="destructive" className="animate-in fade-in-50 slide-in-from-top-5">
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>Authentication Error</AlertTitle>
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email" className="text-sm font-medium">
+                  Email
+                </Label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-2.5 h-5 w-5 text-muted-foreground" />
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="mail@example.com"
+                    className="pl-10"
+                    value={username}
+                    onChange={(e) => setUsername(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    required
+                  />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="password" className="text-sm font-medium">
+                    Password
+                  </Label>
+                </div>
+                <div className="relative">
+                  <User className="absolute left-3 top-2.5 h-5 w-5 text-muted-foreground" />
+                  <Input
+                    id="password"
+                    type="password"
+                    placeholder="••••••••"
+                    className="pl-10"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    required
+                  />
+                </div>
+              </div>
+            </div>
+          </CardContent>
+
+          <CardFooter className="flex flex-col space-y-4">
+            <Button className="w-full" onClick={login} disabled={isLoading}>
+              {isLoading ? "Signing in..." : "Sign in"}
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
     </div>
   )
 }

components/app-sidebar.tsx

@@ -1,10 +1,25 @@
-import * as React from "react"
+"use client"
+
+import type * as React from "react"
 import Image from "next/image"
-import { AppWindow, Settings, LayoutDashboardIcon, Briefcase, Server, Network } from "lucide-react"
+import { usePathname } from "next/navigation"
+import {
+  AppWindow,
+  Settings,
+  LayoutDashboardIcon,
+  Briefcase,
+  Server,
+  Network,
+  Activity,
+  LogOut,
+  ChevronDown,
+} from "lucide-react"
 import {
   Sidebar,
   SidebarContent,
   SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
   SidebarHeader,
   SidebarMenu,
   SidebarMenuButton,
@@ -13,12 +28,15 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
   SidebarRail,
+  SidebarFooter,
 } from "@/components/ui/sidebar"
 import { Button } from "@/components/ui/button"
 import Link from "next/link"
 import Cookies from "js-cookie"
 import { useRouter } from "next/navigation"
 import packageJson from "@/package.json"
+import { cn } from "@/lib/utils"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
 
 interface NavItem {
   title: string
@@ -33,7 +51,7 @@ const data: { navMain: NavItem[] } = {
     {
       title: "Dashboard",
       icon: LayoutDashboardIcon,
-      url: "/dashboard"
+      url: "/dashboard",
     },
     {
       title: "My Infrastructure",
@@ -50,6 +68,11 @@ const data: { navMain: NavItem[] } = {
           icon: AppWindow,
           url: "/dashboard/applications",
         },
+        {
+          title: "Uptime",
+          icon: Activity,
+          url: "/dashboard/uptime",
+        },
         {
           title: "Network",
           icon: Network,
@@ -67,23 +90,38 @@ const data: { navMain: NavItem[] } = {
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const router = useRouter()
+  const pathname = usePathname()
 
   const logout = async () => {
-    Cookies.remove('token')
+    Cookies.remove("token")
     router.push("/")
   }
 
+  // Check if a path is active (exact match or starts with path for parent items)
+  const isActive = (path: string) => {
+    if (path === "#") return false
+    return pathname === path || (path !== "/dashboard" && pathname?.startsWith(path))
+  }
+
+  // Check if any child item is active
+  const hasActiveChild = (items?: NavItem[]) => {
+    if (!items) return false
+    return items.some((item) => isActive(item.url))
+  }
+
   return (
     <Sidebar {...props}>
-      <SidebarHeader>
+      <SidebarHeader className="border-b border-sidebar-border/30 pb-2">
         <SidebarMenu>
           <SidebarMenuItem>
-            <SidebarMenuButton size="lg" asChild>
+            <SidebarMenuButton size="lg" asChild className="gap-3">
-              <a href="https://github.com/crocofied/corecontrol">
+              <a href="https://github.com/crocofied/corecontrol" className="transition-all hover:opacity-80">
-                <Image src="/logo.png" width={48} height={48} alt="Logo"/>
+                <div className="flex items-center justify-center rounded-lg overflow-hidden bg-gradient-to-br from-teal-500 to-emerald-600 shadow-sm">
+                  <Image src="/logo.png" width={48} height={48} alt="CoreControl Logo" className="object-cover" />
+                </div>
                 <div className="flex flex-col gap-0.5 leading-none">
-                  <span className="font-semibold">CoreControl</span>
+                  <span className="font-semibold text-base">CoreControl</span>
-                  <span className="">v{packageJson.version}</span>
+                  <span className="text-xs text-sidebar-foreground/70">v{packageJson.version}</span>
                 </div>
               </a>
             </SidebarMenuButton>
@@ -91,44 +129,77 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         </SidebarMenu>
       </SidebarHeader>
 
-      <SidebarContent className="flex flex-col h-full">
+      <SidebarContent className="flex flex-col h-full py-4">
         <SidebarGroup className="flex-grow">
-          <SidebarMenu>
+          <SidebarGroupLabel className="text-xs font-medium text-sidebar-foreground/60 uppercase tracking-wider px-4 mb-2">
-            {data.navMain.map((item) => (
+            Main Navigation
-              <SidebarMenuItem key={item.title}>
+          </SidebarGroupLabel>
-                <SidebarMenuButton asChild>
+          <SidebarGroupContent>
-                  <Link href={item.url} className="font-medium">
+            <SidebarMenu>
-                    {item.icon && <item.icon className="mr-2" />}
+              {data.navMain.map((item) =>
-                    {item.title}
+                item.items?.length ? (
-                  </Link>
+                  <Collapsible key={item.title} defaultOpen={hasActiveChild(item.items)} className="group/collapsible">
-                </SidebarMenuButton>
+                    <SidebarMenuItem>
-                {item.items?.length && (
+                      <CollapsibleTrigger asChild>
-                  <SidebarMenuSub>
+                        <SidebarMenuButton
-                    {item.items.map((subItem) => (
+                          className={cn(
-                      <SidebarMenuSubItem key={subItem.title}>
+                            "font-medium transition-all",
-                        <SidebarMenuSubButton 
+                            (hasActiveChild(item.items) || isActive(item.url)) &&
-                          asChild 
+                              "text-sidebar-accent-foreground bg-sidebar-accent/50",
-                          isActive={subItem.isActive ?? false}
+                          )}
                         >
-                          <Link href={subItem.url}>
+                          {item.icon && <item.icon className="h-4 w-4" />}
-                            {subItem.icon && <subItem.icon className="mr-2" />}
+                          <span>{item.title}</span>
-                            {subItem.title}
+                          <ChevronDown className="ml-auto h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" />
-                          </Link>
+                        </SidebarMenuButton>
-                        </SidebarMenuSubButton>
+                      </CollapsibleTrigger>
-                      </SidebarMenuSubItem>
+                      <CollapsibleContent>
-                    ))}
+                        <SidebarMenuSub>
-                  </SidebarMenuSub>
+                          {item.items.map((subItem) => (
-                )}
+                            <SidebarMenuSubItem key={subItem.title}>
-              </SidebarMenuItem>
+                              <SidebarMenuSubButton asChild isActive={isActive(subItem.url)} className="transition-all">
-            ))}
+                                <Link href={subItem.url} className="flex items-center">
-          </SidebarMenu>
+                                  {subItem.icon && <subItem.icon className="h-3.5 w-3.5 mr-2" />}
+                                  <span>{subItem.title}</span>
+                                </Link>
+                              </SidebarMenuSubButton>
+                            </SidebarMenuSubItem>
+                          ))}
+                        </SidebarMenuSub>
+                      </CollapsibleContent>
+                    </SidebarMenuItem>
+                  </Collapsible>
+                ) : (
+                  <SidebarMenuItem key={item.title}>
+                    <SidebarMenuButton
+                      asChild
+                      className={cn(
+                        "font-medium transition-all",
+                        isActive(item.url) && "text-sidebar-accent-foreground bg-sidebar-accent/50",
+                      )}
+                    >
+                      <Link href={item.url}>
+                        {item.icon && <item.icon className="h-4 w-4" />}
+                        <span>{item.title}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ),
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
         </SidebarGroup>
 
-        <div className="p-4">
+        <SidebarFooter className="border-t border-sidebar-border/30 pt-4 mt-auto">
-          <Button variant="destructive" className="w-full" onClick={logout}>
+          <Button
+            variant="outline"
+            className="w-full justify-start text-destructive hover:text-destructive hover:bg-destructive/10 border-none shadow-none"
+            onClick={logout}
+          >
+            <LogOut className="h-4 w-4 mr-2" />
             Logout
           </Button>
-        </div>
+        </SidebarFooter>
       </SidebarContent>
 
       <SidebarRail />

components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

components/ui/scroll-area.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

compose.yml

@@ -4,10 +4,7 @@ services:
     ports:
       - "3000:3000"
     environment:
-      LOGIN_EMAIL: "mail@example.com"
+      JWT_SECRET: RANDOM_SECRET # Replace with a secure random string
-      LOGIN_PASSWORD: "SecretPassword"
-      JWT_SECRET: RANDOM_SECRET
-      ACCOUNT_SECRET: RANDOM_SECRET
       DATABASE_URL: "postgresql://postgres:postgres@db:5432/postgres"
     depends_on:
       - db
@@ -17,6 +14,9 @@ services:
     image: haedlessdev/corecontrol-agent:latest
     environment:
       DATABASE_URL: "postgresql://postgres:postgres@db:5432/postgres"
+    depends_on:
+      db:
+        condition: service_healthy
 
   db:
     image: postgres:17
@@ -27,6 +27,11 @@ services:
       POSTGRES_DB: postgres
     volumes:
       - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 2s
+      timeout: 2s
+      retries: 10
 
 volumes:
   postgres_data:

docs/README.md

@@ -0,0 +1,27 @@
+---
+icon: gear
+layout:
+  title:
+    visible: true
+  description:
+    visible: true
+  tableOfContents:
+    visible: true
+  outline:
+    visible: false
+  pagination:
+    visible: true
+---
+
+# CoreControl
+
+<figure><img src=".gitbook/assets/image.png" alt=""><figcaption></figcaption></figure>
+
+CoreControl is the only dashboard you'll ever need to manage your entire server infrastructure. Keep all your server data organized in one central place, easily add your self-hosted applications with quick access links, and monitor their availability in real-time with built-in uptime tracking. Designed for simplicity and control, it gives you a clear overview of your entire self-hosted setup at a glance.
+
+## Features
+
+* Dashboard: A clear screen with all the important information about your servers (WIP)
+* Servers: This allows you to add all your servers (including Hardware Information), with Quicklinks to their Management Panels
+* Applications: Add all your self-hosted services to a clear list and track their up and down time
+* Networks: Generate visually stunning network flowcharts with ease.

docs/SUMMARY.md

@@ -0,0 +1,4 @@
+# Table of contents
+
+* [CoreControl](README.md)
+* [Installation](installation.md)

docs/installation.md

@@ -0,0 +1,56 @@
+---
+icon: down
+---
+
+# Installation
+
+To install the application using Docker Compose, first, ensure that Docker and Docker Compose are installed on your system. 
+
+You can then simply install and start the following Docker compose. Remember that you have to generate a JWT\_SECRET beforehand.
+
+```yaml
+services:
+  web:
+    image: haedlessdev/corecontrol:latest
+    ports:
+      - "3000:3000"
+    environment:
+      JWT_SECRET: RANDOM_SECRET # Replace with a secure random string
+      DATABASE_URL: "postgresql://postgres:postgres@db:5432/postgres"
+    depends_on:
+      - db
+      - agent
+
+  agent:
+    image: haedlessdev/corecontrol-agent:latest
+    environment:
+      DATABASE_URL: "postgresql://postgres:postgres@db:5432/postgres"
+
+  db:
+    image: postgres:17
+    restart: always
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: postgres
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+
+volumes:
+  postgres_data:
+```
+
+Now start the application:
+
+```sh
+docker compose up -d
+```
+
+
+
+**The default login is:**
+
+E-Mail: [admin@example.com](mailto:admin@example.com)\
+Password: admin
+
+_Be sure to set your own password and customize the e-mail, otherwise this poses a security risk!_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "corecontrol",
-  "version": "0.0.3",
+  "version": "0.0.7",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -11,20 +11,27 @@
   "dependencies": {
     "@prisma/client": "^6.6.0",
     "@prisma/extension-accelerate": "^1.3.0",
+    "@radix-ui/react-accordion": "^1.2.4",
     "@radix-ui/react-alert-dialog": "^1.1.7",
+    "@radix-ui/react-checkbox": "^1.1.5",
+    "@radix-ui/react-collapsible": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.7",
     "@radix-ui/react-dropdown-menu": "^2.1.7",
     "@radix-ui/react-label": "^2.1.3",
+    "@radix-ui/react-progress": "^1.1.4",
+    "@radix-ui/react-scroll-area": "^1.2.4",
     "@radix-ui/react-select": "^2.1.7",
     "@radix-ui/react-separator": "^1.1.3",
     "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.2.0",
     "@types/axios": "^0.9.36",
+    "@types/bcrypt": "^5.0.2",
     "@types/js-cookie": "^3.0.6",
     "@types/jsonwebtoken": "^9.0.9",
     "@xyflow/react": "^12.5.5",
     "axios": "^1.8.4",
+    "bcrypt": "^5.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "fuse.js": "^7.1.0",

prisma/migrations/20250414173201_user_model/migration.sql

@@ -0,0 +1,11 @@
+-- CreateTable
+CREATE TABLE "user" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "password" TEXT NOT NULL,
+
+    CONSTRAINT "user_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "user_email_key" ON "user"("email");

prisma/migrations/20250414201604_uptime_history/migration.sql

@@ -0,0 +1,9 @@
+-- CreateTable
+CREATE TABLE "uptime_history" (
+    "id" SERIAL NOT NULL,
+    "applicationId" INTEGER NOT NULL DEFAULT 1,
+    "online" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "uptime_history_pkey" PRIMARY KEY ("id")
+);

prisma/migrations/20250417110704_notification_model/migration.sql

@@ -0,0 +1,18 @@
+-- CreateTable
+CREATE TABLE "notification" (
+    "id" SERIAL NOT NULL,
+    "enabled" BOOLEAN NOT NULL DEFAULT true,
+    "type" TEXT NOT NULL,
+    "smtpHost" TEXT,
+    "smtpPort" INTEGER,
+    "smtpFrom" TEXT,
+    "smtpUser" TEXT,
+    "smtpPass" TEXT,
+    "smtpSecure" BOOLEAN,
+    "smtpTo" TEXT,
+    "telegramChatId" TEXT,
+    "telegramToken" TEXT,
+    "discordWebhook" TEXT,
+
+    CONSTRAINT "notification_pkey" PRIMARY KEY ("id")
+);

prisma/migrations/20250417145101_settings_notification_text/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "settings" ADD COLUMN     "notification_text" TEXT;

prisma/migrations/20250418093116_host_columns/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "server" ADD COLUMN     "host" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "hostServer" TEXT;

prisma/migrations/20250418101029_host_server_string_int/migration.sql

@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - The `hostServer` column on the `server` table would be dropped and recreated. This will lead to data loss if there is data in the column.
+
+*/
+-- AlterTable
+ALTER TABLE "server" DROP COLUMN "hostServer",
+ADD COLUMN     "hostServer" INTEGER;

prisma/migrations/20250419110503_gotify_and_ntfy_notification_column/migration.sql

@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "notification" ADD COLUMN     "gotifyToken" TEXT,
+ADD COLUMN     "gotifyUrl" TEXT,
+ADD COLUMN     "ntfyToken" TEXT,
+ADD COLUMN     "ntfyUrl" TEXT;

prisma/migrations/20250419131018_icon_in_server_model/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "server" ADD COLUMN     "icon" TEXT;

prisma/schema.prisma

@@ -25,9 +25,19 @@ model application {
   online         Boolean  @default(true)
 }
 
+model uptime_history {
+  id            Int       @id @default(autoincrement())
+  applicationId Int       @default(1)
+  online        Boolean   @default(true)
+  createdAt     DateTime  @default(now())
+}
+
 model server {
   id            Int       @id @default(autoincrement())
+  host          Boolean   @default(false)
+  hostServer    Int?
   name          String
+  icon          String?
   os            String?
   ip            String?
   url           String?
@@ -38,6 +48,33 @@ model server {
 }
 
 model settings {
-    id            Int       @id @default(autoincrement())
+  id            Int       @id @default(autoincrement())
-    uptime_checks          Boolean       @default(true)
+  uptime_checks          Boolean       @default(true)
+  notification_text       String?
+}
+
+model user {
+  id            String    @id @default(uuid())
+  email         String    @unique
+  password      String
+}
+
+model notification {
+  id            Int       @id @default(autoincrement())
+  enabled       Boolean   @default(true)
+  type          String
+  smtpHost     String?
+  smtpPort     Int?
+  smtpFrom     String?
+  smtpUser     String?
+  smtpPass     String?
+  smtpSecure   Boolean?
+  smtpTo       String?
+  telegramChatId String?
+  telegramToken String?
+  discordWebhook String?
+  gotifyUrl     String?
+  gotifyToken   String?
+  ntfyUrl       String?
+  ntfyToken     String?
 }