Merge pull request #35 from fossyy/staging

Staging

.air.toml

@@ -4,7 +4,7 @@ tmp_dir = "tmp"
 
 [build]
   args_bin = []
-  bin = "tmp\\main.exe"
+  bin = "tmp\\main.exe --log true"
   cmd = "go build -o ./tmp/main.exe ."
   delay = 1000
   exclude_dir = ["assets", "tmp", "vendor", "testdata", "uploads"]

app/app.go

@@ -8,22 +8,36 @@ import (
 )
 
 var Server App
+var Admin App
 
 type App struct {
 	http.Server
-	DB     *db.Database
+	Database db.Database
 	Logger   *logger.AggregatedLogger
 	Mail     *email.SmtpServer
 }
 
-func NewServer(addr string, handler http.Handler, logger logger.AggregatedLogger, database db.Database, mail email.SmtpServer) App {
+func NewClientServer(addr string, handler http.Handler, logger logger.AggregatedLogger, database db.Database, mail email.SmtpServer) App {
 	return App{
 		Server: http.Server{
 			Addr:    addr,
 			Handler: handler,
 		},
 		Logger:   &logger,
-		DB:     &database,
+		Database: database,
 		Mail:     &mail,
 	}
 }
+
+func NewAdminServer(addr string, handler http.Handler, database db.Database) App {
+	return App{
+		Server: http.Server{
+			Addr:    addr,
+			Handler: handler,
+		},
+		// TODO: Remove the dummy struct
+		Logger:   &logger.AggregatedLogger{},
+		Database: database,
+		Mail:     &email.SmtpServer{},
+	}
+}

cache/cache.go

@@ -3,7 +3,6 @@ package cache
 import (
 	"fmt"
 	"github.com/fossyy/filekeeper/app"
-	"github.com/fossyy/filekeeper/db"
 	"github.com/fossyy/filekeeper/utils"
 	"github.com/google/uuid"
 	"sync"
@@ -74,8 +73,8 @@ func init() {
 			for _, file := range fileCache {
 				file.mu.Lock()
 				if currentTime.Sub(file.AccessAt) > time.Minute*1 {
-					db.DB.UpdateUploadedByte(file.UploadedByte, file.ID.String())
+					app.Server.Database.UpdateUploadedByte(file.UploadedByte, file.ID.String())
-					db.DB.UpdateUploadedChunk(file.UploadedChunk, file.ID.String())
+					app.Server.Database.UpdateUploadedChunk(file.UploadedChunk, file.ID.String())
 					delete(fileCache, file.ID.String())
 					cacheClean++
 				}
@@ -92,7 +91,7 @@ func GetUser(email string) (*UserWithExpired, error) {
 		return user, nil
 	}
 
-	userData, err := db.DB.GetUser(email)
+	userData, err := app.Server.Database.GetUser(email)
 	if err != nil {
 		return nil, err
 	}
@@ -122,7 +121,7 @@ func GetFile(id string) (*FileWithExpired, error) {
 		return file, nil
 	}
 
-	uploadData, err := db.DB.GetFile(id)
+	uploadData, err := app.Server.Database.GetFile(id)
 	if err != nil {
 		return nil, err
 	}
@@ -149,7 +148,7 @@ func (file *FileWithExpired) UpdateProgress(index int64, size int64) {
 }
 
 func GetUserFile(name, ownerID string) (*FileWithExpired, error) {
-	fileData, err := db.DB.GetUserFile(name, ownerID)
+	fileData, err := app.Server.Database.GetUserFile(name, ownerID)
 	if err != nil {
 		return nil, err
 	}
@@ -163,9 +162,9 @@ func GetUserFile(name, ownerID string) (*FileWithExpired, error) {
 }
 
 func (file *FileWithExpired) FinalizeFileUpload() {
-	db.DB.UpdateUploadedByte(file.UploadedByte, file.ID.String())
+	app.Server.Database.UpdateUploadedByte(file.UploadedByte, file.ID.String())
-	db.DB.UpdateUploadedChunk(file.UploadedChunk, file.ID.String())
+	app.Server.Database.UpdateUploadedChunk(file.UploadedChunk, file.ID.String())
-	db.DB.FinalizeFileUpload(file.ID.String())
+	app.Server.Database.FinalizeFileUpload(file.ID.String())
 	delete(fileCache, file.ID.String())
 	return
 }

db/database.go

@@ -12,8 +12,6 @@ import (
 	"strings"
 )
 
-var DB Database
-
 type mySQLdb struct {
 	*gorm.DB
 }
@@ -35,6 +33,7 @@ type Database interface {
 
 	CreateUser(user *models.User) error
 	GetUser(email string) (*models.User, error)
+	GetAllUsers() ([]models.User, error)
 	UpdateUserPassword(email string, password string) error
 
 	CreateFile(file *models.File) error
@@ -197,6 +196,15 @@ func (db *mySQLdb) GetUser(email string) (*models.User, error) {
 	return &user, nil
 }
 
+func (db *mySQLdb) GetAllUsers() ([]models.User, error) {
+	var users []models.User
+	err := db.DB.Table("users").Select("user_id, Username, Email").Find(&users).Error
+	if err != nil {
+		return nil, err
+	}
+	return users, nil
+}
+
 func (db *mySQLdb) UpdateUserPassword(email string, password string) error {
 	var user models.User
 	err := db.DB.Table("users").Where("email = ?", email).First(&user).Error
@@ -320,6 +328,16 @@ func (db *postgresDB) GetUser(email string) (*models.User, error) {
 	return &user, nil
 }
 
+func (db *postgresDB) GetAllUsers() ([]models.User, error) {
+	var users []models.User
+	err := db.DB.Table("users").Select("user_id, username, email").Find(&users).Error
+	if err != nil {
+		fmt.Println(err)
+		return nil, err
+	}
+	return users, nil
+}
+
 func (db *postgresDB) UpdateUserPassword(email string, password string) error {
 	var user models.User
 	err := db.DB.Table("users").Where("email = $1", email).First(&user).Error

handler/auth/google/callback/callback.go

@@ -7,7 +7,6 @@ import (
 	"fmt"
 	"github.com/fossyy/filekeeper/app"
 	"github.com/fossyy/filekeeper/cache"
-	"github.com/fossyy/filekeeper/db"
 	googleOauthSetupHandler "github.com/fossyy/filekeeper/handler/auth/google/setup"
 	signinHandler "github.com/fossyy/filekeeper/handler/signin"
 	"github.com/fossyy/filekeeper/session"
@@ -145,7 +144,7 @@ func GET(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	if !db.DB.IsEmailRegistered(oauthUser.Email) {
+	if !app.Server.Database.IsEmailRegistered(oauthUser.Email) {
 		code := utils.GenerateRandomString(64)
 		googleOauthSetupHandler.SetupUser[code] = &googleOauthSetupHandler.UnregisteredUser{
 			Code:       code,

handler/auth/google/setup/setup.go

@@ -3,7 +3,6 @@ package googleOauthSetupHandler
 import (
 	"fmt"
 	"github.com/fossyy/filekeeper/app"
-	"github.com/fossyy/filekeeper/db"
 	signinHandler "github.com/fossyy/filekeeper/handler/signin"
 	"github.com/fossyy/filekeeper/session"
 	"github.com/fossyy/filekeeper/types"
@@ -112,7 +111,7 @@ func POST(w http.ResponseWriter, r *http.Request) {
 		Password: hashedPassword,
 	}
 
-	err = db.DB.CreateUser(&newUser)
+	err = app.Server.Database.CreateUser(&newUser)
 	if err != nil {
 		component := signupView.Main("Filekeeper - Sign up Page", types.Message{
 			Code:    0,

handler/download/download.go

@@ -5,14 +5,13 @@ import (
 	"github.com/fossyy/filekeeper/view/client/download"
 	"net/http"
 
-	"github.com/fossyy/filekeeper/db"
 	"github.com/fossyy/filekeeper/types"
 	"github.com/fossyy/filekeeper/utils"
 )
 
 func GET(w http.ResponseWriter, r *http.Request) {
 	userSession := r.Context().Value("user").(types.User)
-	files, err := db.DB.GetFiles(userSession.UserID.String())
+	files, err := app.Server.Database.GetFiles(userSession.UserID.String())
 	if err != nil {
 		w.WriteHeader(http.StatusInternalServerError)
 		return

handler/download/file/file.go

@@ -5,13 +5,11 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
-
-	"github.com/fossyy/filekeeper/db"
 )
 
 func GET(w http.ResponseWriter, r *http.Request) {
 	fileID := r.PathValue("id")
-	file, err := db.DB.GetFile(fileID)
+	file, err := app.Server.Database.GetFile(fileID)
 	if err != nil {
 		w.WriteHeader(http.StatusInternalServerError)
 		app.Server.Logger.Error(err.Error())

handler/forgotPassword/verify/verify.go

@@ -3,7 +3,6 @@ package forgotPasswordVerifyHandler
 import (
 	"github.com/fossyy/filekeeper/app"
 	"github.com/fossyy/filekeeper/cache"
-	"github.com/fossyy/filekeeper/db"
 	forgotPasswordHandler "github.com/fossyy/filekeeper/handler/forgotPassword"
 	"github.com/fossyy/filekeeper/session"
 	"github.com/fossyy/filekeeper/types"
@@ -83,7 +82,7 @@ func POST(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	err = db.DB.UpdateUserPassword(data.User.Email, hashedPassword)
+	err = app.Server.Database.UpdateUserPassword(data.User.Email, hashedPassword)
 	if err != nil {
 		w.WriteHeader(http.StatusInternalServerError)
 		app.Server.Logger.Error(err.Error())

handler/signup/signup.go

@@ -11,7 +11,6 @@ import (
 	"sync"
 	"time"
 
-	"github.com/fossyy/filekeeper/db"
 	"github.com/fossyy/filekeeper/types"
 	"github.com/fossyy/filekeeper/types/models"
 	"github.com/fossyy/filekeeper/utils"
@@ -102,7 +101,7 @@ func POST(w http.ResponseWriter, r *http.Request) {
 		Password: hashedPassword,
 	}
 
-	if registered := db.DB.IsUserRegistered(userEmail, username); registered {
+	if registered := app.Server.Database.IsUserRegistered(userEmail, username); registered {
 		component := signupView.Main("Filekeeper - Sign up Page", types.Message{
 			Code:    0,
 			Message: "Email or Username has been registered",

handler/signup/verify/verify.go

@@ -5,7 +5,6 @@ import (
 	signupView "github.com/fossyy/filekeeper/view/client/signup"
 	"net/http"
 
-	"github.com/fossyy/filekeeper/db"
 	signupHandler "github.com/fossyy/filekeeper/handler/signup"
 	"github.com/fossyy/filekeeper/types"
 )
@@ -19,7 +18,7 @@ func GET(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	err := db.DB.CreateUser(data.User)
+	err := app.Server.Database.CreateUser(data.User)
 	if err != nil {
 		component := signupView.Main("Filekeeper - Sign up Page", types.Message{
 			Code:    0,

handler/upload/initialisation/initialisation.go

@@ -10,7 +10,6 @@ import (
 	"os"
 	"path/filepath"
 
-	"github.com/fossyy/filekeeper/db"
 	"github.com/fossyy/filekeeper/types"
 	"github.com/fossyy/filekeeper/types/models"
 	"github.com/google/uuid"
@@ -93,7 +92,7 @@ func handleNewUpload(user types.User, file types.FileInfo) (models.File, error)
 		Done:          false,
 	}
 
-	err = db.DB.CreateFile(&newFile)
+	err = app.Server.Database.CreateFile(&newFile)
 	if err != nil {
 		app.Server.Logger.Error(err.Error())
 		return models.File{}, err

handler/user/ResetPassword/ResetPassword.go

@@ -1,8 +1,8 @@
 package userHandlerResetPassword
 
 import (
+	"github.com/fossyy/filekeeper/app"
 	"github.com/fossyy/filekeeper/cache"
-	"github.com/fossyy/filekeeper/db"
 	"github.com/fossyy/filekeeper/session"
 	"github.com/fossyy/filekeeper/types"
 	"github.com/fossyy/filekeeper/utils"
@@ -31,7 +31,7 @@ func POST(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	err = db.DB.UpdateUserPassword(user.Email, hashPassword)
+	err = app.Server.Database.UpdateUserPassword(user.Email, hashPassword)
 	if err != nil {
 		w.WriteHeader(http.StatusInternalServerError)
 		return

handler/user/totp/setup.go

@@ -4,13 +4,13 @@ import (
 	"bytes"
 	"encoding/base64"
 	"fmt"
+	"github.com/fossyy/filekeeper/app"
 	"github.com/fossyy/filekeeper/cache"
 	"github.com/fossyy/filekeeper/view/client/user/totp"
 	"image/png"
 	"net/http"
 	"time"
 
-	"github.com/fossyy/filekeeper/db"
 	"github.com/fossyy/filekeeper/types"
 	"github.com/skip2/go-qrcode"
 	"github.com/xlzd/gotp"
@@ -71,7 +71,7 @@ func POST(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	if totp.Verify(code, time.Now().Unix()) {
-		if err := db.DB.InitializeTotp(userSession.Email, secret); err != nil {
+		if err := app.Server.Database.InitializeTotp(userSession.Email, secret); err != nil {
 			w.WriteHeader(http.StatusInternalServerError)
 			return
 		}

logger/logger.go

@@ -1,6 +1,7 @@
 package logger
 
 import (
+	"flag"
 	"fmt"
 	"io"
 	"log"
@@ -8,6 +9,9 @@ import (
 	"time"
 )
 
+var logFlag *bool
+var infoLoggerWriter io.Writer
+
 type AggregatedLogger struct {
 	infoLogger  *log.Logger
 	warnLogger  *log.Logger
@@ -16,6 +20,9 @@ type AggregatedLogger struct {
 }
 
 func init() {
+	logFlag = flag.Bool("log", false, "Enable logging")
+	flag.Parse()
+
 	if _, err := os.Stat("log"); os.IsNotExist(err) {
 		os.Mkdir("log", os.ModePerm)
 	}
@@ -25,15 +32,23 @@ func Logger() *AggregatedLogger {
 	currentTime := time.Now()
 	formattedTime := currentTime.Format("2006-01-02-15-04")
 	file, err := os.OpenFile(fmt.Sprintf("log/log-%s.log", formattedTime), os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0644)
+	multiLogger := io.MultiWriter(os.Stdout, file)
+
 	if err != nil {
 		return &AggregatedLogger{}
 	}
-	flag := log.Ldate | log.Ltime
+
-	multiLogger := io.MultiWriter(os.Stdout, file)
+	if *logFlag {
-	infoLogger := log.New(file, "INFO: ", flag)
+		infoLoggerWriter = multiLogger
-	warnLogger := log.New(multiLogger, "WARN: ", flag)
+	} else {
-	errorLogger := log.New(multiLogger, "ERROR: ", flag)
+		infoLoggerWriter = file
-	panicLogger := log.New(multiLogger, "PANIC: ", flag)
+	}
+
+	slug := log.Ldate | log.Ltime
+	infoLogger := log.New(infoLoggerWriter, "INFO: ", slug)
+	warnLogger := log.New(multiLogger, "WARN: ", slug)
+	errorLogger := log.New(multiLogger, "ERROR: ", slug)
+	panicLogger := log.New(multiLogger, "PANIC: ", slug)
 
 	return &AggregatedLogger{
 		infoLogger:  infoLogger,

main.go

@@ -7,13 +7,15 @@ import (
 	"github.com/fossyy/filekeeper/email"
 	"github.com/fossyy/filekeeper/logger"
 	"github.com/fossyy/filekeeper/middleware"
-	"github.com/fossyy/filekeeper/routes"
+	"github.com/fossyy/filekeeper/routes/admin"
+	"github.com/fossyy/filekeeper/routes/client"
 	"github.com/fossyy/filekeeper/utils"
 	"strconv"
 )
 
 func main() {
-	serverAddr := fmt.Sprintf("%s:%s", utils.Getenv("SERVER_HOST"), utils.Getenv("SERVER_PORT"))
+	clientAddr := fmt.Sprintf("%s:%s", utils.Getenv("SERVER_HOST"), utils.Getenv("SERVER_PORT"))
+	adminAddr := fmt.Sprintf("%s:%s", utils.Getenv("SERVER_HOST"), "27000")
 
 	dbUser := utils.Getenv("DB_USERNAME")
 	dbPass := utils.Getenv("DB_PASSWORD")
@@ -22,13 +24,23 @@ func main() {
 	dbName := utils.Getenv("DB_NAME")
 
 	database := db.NewPostgresDB(dbUser, dbPass, dbHost, dbPort, dbName, db.DisableSSL)
-	db.DB = database
 
 	smtpPort, _ := strconv.Atoi(utils.Getenv("SMTP_PORT"))
 	mailServer := email.NewSmtpServer(utils.Getenv("SMTP_HOST"), smtpPort, utils.Getenv("SMTP_USER"), utils.Getenv("SMTP_PASSWORD"))
 
-	app.Server = app.NewServer(serverAddr, middleware.Handler(routes.SetupRoutes()), *logger.Logger(), database, mailServer)
+	app.Server = app.NewClientServer(clientAddr, middleware.Handler(client.SetupRoutes()), *logger.Logger(), database, mailServer)
-	fmt.Printf("Listening on http://%s\n", app.Server.Addr)
+	app.Admin = app.NewAdminServer(adminAddr, middleware.Handler(admin.SetupRoutes()), database)
+
+	go func() {
+		fmt.Printf("Admin Web App Listening on http://%s\n", app.Admin.Addr)
+		err := app.Admin.ListenAndServe()
+		if err != nil {
+			panic(err)
+			return
+		}
+	}()
+
+	fmt.Printf("Client Web App Listening on http://%s\n", app.Server.Addr)
 	err := app.Server.ListenAndServe()
 	if err != nil {
 		panic(err)

routes/admin/routes.go

@@ -0,0 +1,44 @@
+package admin
+
+import (
+	"github.com/fossyy/filekeeper/app"
+	adminIndex "github.com/fossyy/filekeeper/view/admin/index"
+	"net/http"
+	"os"
+	"path/filepath"
+)
+
+func SetupRoutes() *http.ServeMux {
+	handler := http.NewServeMux()
+	handler.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
+		//users, err := app.Admin.Database.GetAllUsers()
+		//if err != nil {
+		//	http.Error(w, "Unable to retrieve users", http.StatusInternalServerError)
+		//	return
+		//}
+		//w.Header().Set("Content-Type", "application/json")
+		//if err := json.NewEncoder(w).Encode(users); err != nil {
+		//	http.Error(w, "Failed to encode response", http.StatusInternalServerError)
+		//	return
+		//}
+		adminIndex.Main().Render(r.Context(), w)
+		return
+	})
+	handler.HandleFunc("/public/output.css", func(w http.ResponseWriter, r *http.Request) {
+		openFile, err := os.OpenFile(filepath.Join("public", "output.css"), os.O_RDONLY, 0)
+		if err != nil {
+			w.WriteHeader(http.StatusInternalServerError)
+			app.Server.Logger.Error(err.Error())
+			return
+		}
+		defer openFile.Close()
+		stat, err := openFile.Stat()
+		if err != nil {
+			w.WriteHeader(http.StatusInternalServerError)
+			app.Server.Logger.Error(err.Error())
+			return
+		}
+		http.ServeContent(w, r, openFile.Name(), stat.ModTime(), openFile)
+	})
+	return handler
+}

routes/client/routes.go

@@ -1,4 +1,4 @@
-package routes
+package client
 
 import (
 	googleOauthHandler "github.com/fossyy/filekeeper/handler/auth/google"

staging.bat

@@ -7,4 +7,4 @@ REM Watch for changes in Tailwind CSS
 start "" npx tailwindcss -i ./public/input.css -o ./public/output.css --watch
 
 REM Watch for changes in templates and proxy to Go server
-start "" cmd /k "templ generate -watch -proxy=http://localhost:8000"
+start "" cmd /k "templ generate -watch"

view/admin/index/index.templ

@@ -0,0 +1,429 @@
+package adminIndex
+
+import "github.com/fossyy/filekeeper/view/admin/layout"
+
+templ Main() {
+	@layout.Base() {
+		<div class="flex min-h-screen w-full flex-col bg-muted/40 py-10">
+			<main class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
+				<div class="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
+					<div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
+						<div class="flex flex-col space-y-1.5 p-6">
+							<h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">System Usage</h3>
+							<p class="text-sm text-muted-foreground">Real-time metrics for your server.</p>
+						</div>
+						<div class="p-6">
+							<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+								<div class="flex flex-col items-center justify-center gap-2 rounded-lg bg-background p-4">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="24"
+										height="24"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										class="h-8 w-8"
+									>
+										<rect width="16" height="16" x="4" y="4" rx="2"></rect>
+										<rect width="6" height="6" x="9" y="9" rx="1"></rect>
+										<path d="M15 2v2"></path>
+										<path d="M15 20v2"></path>
+										<path d="M2 15h2"></path>
+										<path d="M2 9h2"></path>
+										<path d="M20 15h2"></path>
+										<path d="M20 9h2"></path>
+										<path d="M9 2v2"></path>
+										<path d="M9 20v2"></path>
+									</svg>
+									<div class="text-2xl font-bold">75%</div>
+									<div class="text-sm text-muted-foreground">CPU Usage</div>
+								</div>
+								<div class="flex flex-col items-center justify-center gap-2 rounded-lg bg-background p-4">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="24"
+										height="24"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										class="h-8 w-8"
+									>
+										<path d="M6 19v-3"></path>
+										<path d="M10 19v-3"></path>
+										<path d="M14 19v-3"></path>
+										<path d="M18 19v-3"></path>
+										<path d="M8 11V9"></path>
+										<path d="M16 11V9"></path>
+										<path d="M12 11V9"></path>
+										<path d="M2 15h20"></path>
+										<path d="M2 7a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v1.1a2 2 0 0 0 0 3.837V17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5.1a2 2 0 0 0 0-3.837Z"></path>
+									</svg>
+									<div class="text-2xl font-bold">8GB</div>
+									<div class="text-sm text-muted-foreground">Memory Usage</div>
+								</div>
+								<div class="flex flex-col items-center justify-center gap-2 rounded-lg bg-background p-4">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="24"
+										height="24"
+										viewBox="0 0 24 24"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										class="h-8 w-8"
+									>
+										<rect x="16" y="16" width="6" height="6" rx="1"></rect>
+										<rect x="2" y="16" width="6" height="6" rx="1"></rect>
+										<rect x="9" y="2" width="6" height="6" rx="1"></rect>
+										<path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"></path>
+										<path d="M12 12V8"></path>
+									</svg>
+									<div class="text-2xl font-bold">100Mbps</div>
+									<div class="text-sm text-muted-foreground">Network Usage</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
+						<div class="flex flex-col space-y-1.5 p-6">
+							<h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">User List</h3>
+							<p class="text-sm text-muted-foreground">Manage your registered users.</p>
+						</div>
+						<div class="p-6">
+							<div class="relative w-full overflow-auto">
+								<table class="w-full caption-bottom text-sm">
+									<thead class="[&_tr]:border-b">
+										<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+											<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
+												Name
+											</th>
+											<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
+												Email
+											</th>
+											<th class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0">
+												Role
+											</th>
+											<th class="h-12 px-4 align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 text-right">
+												Actions
+											</th>
+										</tr>
+									</thead>
+									<tbody class="[&_tr:last-child]:border-0">
+										<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
+												<div class="font-medium">John Doe</div>
+											</td>
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
+												<div>john@example.com</div>
+											</td>
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
+												<div
+													class="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs"
+													data-v0-t="badge"
+												>
+													Admin
+												</div>
+											</td>
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right"></td>
+										</tr>
+										<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
+												<div class="font-medium">Jane Smith</div>
+											</td>
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
+												<div>jane@example.com</div>
+											</td>
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
+												<div
+													class="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 text-xs"
+													data-v0-t="badge"
+												>
+													Editor
+												</div>
+											</td>
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right"></td>
+										</tr>
+										<tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted">
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
+												<div class="font-medium">Bob Johnson</div>
+											</td>
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
+												<div>bob@example.com</div>
+											</td>
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0">
+												<div
+													class="inline-flex w-fit items-center whitespace-nowrap rounded-full border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs"
+													data-v0-t="badge"
+												>
+													User
+												</div>
+											</td>
+											<td class="p-4 align-middle [&:has([role=checkbox])]:pr-0 text-right"></td>
+										</tr>
+									</tbody>
+								</table>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="grid auto-rows-max items-start gap-4 md:gap-8">
+					<div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
+						<div class="flex flex-col space-y-1.5 p-6">
+							<h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">Server Control</h3>
+							<p class="text-sm text-muted-foreground">Manage your server instances.</p>
+						</div>
+						<div class="p-6">
+							<div class="grid gap-4">
+								<div class="flex items-center justify-between">
+									<div>
+										<div class="font-medium">Server 1</div>
+										<div class="text-sm text-muted-foreground">192.168.1.100</div>
+									</div>
+									<div class="flex gap-2">
+										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="24"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												class="h-4 w-4"
+											>
+												<polygon points="6 3 20 12 6 21 6 3"></polygon>
+											</svg>
+											Start
+										</button>
+										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="24"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												class="h-4 w-4"
+											>
+												<circle cx="12" cy="12" r="10"></circle>
+												<rect width="6" height="6" x="9" y="9"></rect>
+											</svg>
+											Stop
+										</button>
+										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="24"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												class="h-4 w-4"
+											>
+												<path d="M21 6H3"></path>
+												<path d="M7 12H3"></path>
+												<path d="M7 18H3"></path>
+												<path d="M12 18a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L11 14"></path>
+												<path d="M11 10v4h4"></path>
+											</svg>
+											Restart
+										</button>
+									</div>
+								</div>
+								<div data-orientation="horizontal" role="none" class="shrink-0 bg-border h-[1px] w-full"></div>
+								<div class="flex items-center justify-between">
+									<div>
+										<div class="font-medium">Server 2</div>
+										<div class="text-sm text-muted-foreground">192.168.1.101</div>
+									</div>
+									<div class="flex gap-2">
+										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="24"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												class="h-4 w-4"
+											>
+												<polygon points="6 3 20 12 6 21 6 3"></polygon>
+											</svg>
+											Start
+										</button>
+										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="24"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												class="h-4 w-4"
+											>
+												<circle cx="12" cy="12" r="10"></circle>
+												<rect width="6" height="6" x="9" y="9"></rect>
+											</svg>
+											Stop
+										</button>
+										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="24"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												class="h-4 w-4"
+											>
+												<path d="M21 6H3"></path>
+												<path d="M7 12H3"></path>
+												<path d="M7 18H3"></path>
+												<path d="M12 18a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L11 14"></path>
+												<path d="M11 10v4h4"></path>
+											</svg>
+											Restart
+										</button>
+									</div>
+								</div>
+								<div data-orientation="horizontal" role="none" class="shrink-0 bg-border h-[1px] w-full"></div>
+								<div class="flex items-center justify-between">
+									<div>
+										<div class="font-medium">Server 3</div>
+										<div class="text-sm text-muted-foreground">192.168.1.102</div>
+									</div>
+									<div class="flex gap-2">
+										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="24"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												class="h-4 w-4"
+											>
+												<polygon points="6 3 20 12 6 21 6 3"></polygon>
+											</svg>
+											Start
+										</button>
+										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="24"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												class="h-4 w-4"
+											>
+												<circle cx="12" cy="12" r="10"></circle>
+												<rect width="6" height="6" x="9" y="9"></rect>
+											</svg>
+											Stop
+										</button>
+										<button class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												width="24"
+												height="24"
+												viewBox="0 0 24 24"
+												fill="none"
+												stroke="currentColor"
+												stroke-width="2"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												class="h-4 w-4"
+											>
+												<path d="M21 6H3"></path>
+												<path d="M7 12H3"></path>
+												<path d="M7 18H3"></path>
+												<path d="M12 18a5 5 0 0 0 9-3 4.5 4.5 0 0 0-4.5-4.5c-1.33 0-2.54.54-3.41 1.41L11 14"></path>
+												<path d="M11 10v4h4"></path>
+											</svg>
+											Restart
+										</button>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="rounded-lg border bg-card text-card-foreground shadow-sm" data-v0-t="card">
+						<div class="flex flex-col space-y-1.5 p-6">
+							<h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">Server Environment</h3>
+							<p class="text-sm text-muted-foreground">Manage your server environment variables.</p>
+						</div>
+						<div class="p-6">
+							<div class="grid gap-4">
+								<div class="flex items-center justify-between">
+									<div>
+										<div class="font-medium">NODE_ENV</div>
+										<div class="text-sm text-muted-foreground">Environment mode</div>
+									</div>
+									<button
+										type="button"
+										role="combobox"
+										aria-controls="radix-:r2s:"
+										aria-expanded="false"
+										aria-autocomplete="none"
+										dir="ltr"
+										data-state="closed"
+										class="flex h-10 items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 w-32"
+									>
+										<span style="pointer-events: none;"></span>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="24"
+											height="24"
+											viewBox="0 0 24 24"
+											fill="none"
+											stroke="currentColor"
+											stroke-width="2"
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											class="lucide lucide-chevron-down h-4 w-4 opacity-50"
+											aria-hidden="true"
+										>
+											<path d="m6 9 6 6 6-6"></path>
+										</svg>
+									</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</main>
+		</div>
+	}
+}

view/admin/layout/base.templ

@@ -0,0 +1,19 @@
+package layout
+
+templ Base(){
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link href="/public/output.css" rel="stylesheet"/>
+        <title>Admin Page</title>
+        <script src="https://unpkg.com/htmx.org@1.9.12"></script>
+    </head>
+    <body>
+        <div id="content">
+            { children... }
+        </div>
+    </body>
+    </html>
+}