change version name to 1.2.0

fix at initial start undefined app name
change whole backend and tables for gorm table references
2025-11-29 16:00:37 +01:00 · 2025-11-29 15:59:45 +01:00 · 2025-11-29 15:59:18 +01:00 · 2025-11-29 15:55:44 +01:00 · 2025-11-29 15:53:44 +01:00 · 2025-11-29 15:51:38 +01:00
112 changed files with 4924 additions and 1849 deletions
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_URL= https://localhost:9500/api
--- a/.env.production
+++ b/.env.production
@@ -0,0 +1 @@
+VITE_API_URL= https://members.tecamino.com/api
--- a/.gitea/workflows/build.yml
+++ b/.gitea/workflows/build.yml
@@ -117,4 +117,4 @@ jobs:
          name: memberApp-${{ matrix.goos }}-${{ matrix.arch }}
          path: |
            ./dist/spa
-            server-${{ matrix.goos }}-${{ matrix.arch }}${{ matrix.ext }}
+            memberApp-${{ matrix.goos }}-${{ matrix.arch }}${{ matrix.ext }}
--- a/.gitignore
+++ b/.gitignore
@@ -36,6 +36,10 @@ yarn-error.log*

 # local .db files
 *.db
+*.dba
+
+# local personal backup files
+*.back

 # local .log files
 *.log
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -0,0 +1 @@
+.env
--- a/backend/bin/memberApp.exe
+++ b/backend/bin/memberApp.exe
--- a/backend/bin/server-arm64
+++ b/backend/bin/server-arm64
--- a/backend/dbRequest/dbRequest.go
+++ b/backend/dbRequest/dbRequest.go
@@ -1,45 +0,0 @@
-package dbRequest
-
-import (
-	"backend/models"
-	"fmt"
-	"net/http"
-
-	"github.com/gin-gonic/gin"
-)
-
-var CreateUserTable string = `CREATE TABLE IF NOT EXISTS users (
-						id INTEGER PRIMARY KEY AUTOINCREMENT,
-						username TEXT NOT NULL,
-						email TEXT NOT NULL,
-						role TEXT NOT NULL,
-						password TEXT NOT NULL,
-						settings TEXT NOT NULL
-						);`
-
-var CreateRoleTable string = `CREATE TABLE IF NOT EXISTS roles (
-						id INTEGER PRIMARY KEY AUTOINCREMENT,
-						role TEXT NOT NULL,
-						rights TEXT NOT NULL
-						);`
-
-var NewUser string = `INSERT INTO users (username, email, role, password, settings) VALUES (?, ?, ?, ?, ?)`
-var NewRole = `INSERT INTO roles (role, rights) VALUES (?, ?)`
-var DBQueryPassword string = `SELECT id, role, password, settings FROM users WHERE username = ?`
-var DBUserLookup string = `SELECT EXISTS(SELECT 1 FROM users WHERE username = ?)`
-var DBRoleLookup string = `SELECT EXISTS(SELECT 1 FROM roles WHERE role = ?)`
-var DBRemoveUser string = `DELETE FROM users WHERE username = $1`
-var DBUpdateSettings string = `UPDATE users SET settings = ? WHERE username = ?`
-var DBUpdateRole string = `UPDATE roles SET rights = ? WHERE role = ?`
-
-func CheckDBError(c *gin.Context, username string, err error) bool {
-	if err != nil {
-		if err.Error() == "sql: no rows in result set" {
-			c.JSON(http.StatusBadRequest, models.NewJsonErrorMessageResponse(fmt.Sprintf("no user '%s' found", username)))
-			return true
-		}
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return true
-	}
-	return false
-}
--- a/backend/env/env.go
+++ b/backend/env/env.go
@@ -0,0 +1,63 @@
+package env
+
+import (
+	"os"
+	"strconv"
+	"strings"
+
+	"github.com/joho/godotenv"
+)
+
+type EnvKey string
+
+const (
+	Env           EnvKey = "ENV"
+	GinMode       EnvKey = "GIN_MODE"
+	Debug         EnvKey = "DEBUG"
+	PrivKey       EnvKey = "PRIVKEY"
+	Fullchain     EnvKey = "FULLCHAIN"
+	Https         EnvKey = "HTTPS"
+	HostUrl       EnvKey = "HOST_URL"
+	HostPort      EnvKey = "HOST_PORT"
+	WorkingDir    EnvKey = "WORKING_DIR"
+	Spa           EnvKey = "SPA"
+	AccessSecret  EnvKey = "ACCESS_SECRET"
+	RefreshSecret EnvKey = "REFRESH_SECRET"
+	Organization  EnvKey = "ORGANIZATION"
+	DOMAIN        EnvKey = "DOMAIN"
+	AllowOrigin   EnvKey = "ALLOWORIGIN"
+	TimeZone      EnvKey = "TMEZONE"
+)
+
+const (
+	EnvDevelopment = "development"
+	EnvProduction  = "Prodction"
+)
+
+func (key EnvKey) GetValue() string {
+	return os.Getenv(string(key))
+}
+
+func (key EnvKey) GetBoolValue() bool {
+	return strings.ToLower(os.Getenv(string(key))) == "true"
+}
+
+func (key EnvKey) GetUIntValue() uint {
+	value, err := strconv.ParseUint(os.Getenv(string(key)), 10, 32)
+	if err != nil {
+		return 0
+	}
+	return uint(value)
+}
+
+func Load(file string) error {
+	return godotenv.Load(file)
+}
+
+func InDevelopmentMode() bool {
+	return Env.GetValue() == EnvDevelopment
+}
+
+func InDebugMode() bool {
+	return strings.ToLower(Debug.GetValue()) == "true"
+}
--- a/backend/example/example.env
+++ b/backend/example/example.env
@@ -0,0 +1,15 @@
+ENV=development
+GIN_MODE=release
+DEBUG=false
+SPA=directory_of_spa_files
+WORKING_DIR=.
+HOST_URL=your_local_url
+HOST_PORT=your_local_port
+HTTPS=true
+PRIVKEY=your_certificate_key_file
+FULLCHAIN=your_certificate_fullchain_file
+ACCESS_SECRET=your_32bit_long_access_secret
+REFRESH_SECRET=your_32bit_long_referesh_secret
+ALLOWORIGIN=all_allowed_urls
+DOMAIN=your_domain
+TIMEZONE=your_timezone in IANA format
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -3,29 +3,35 @@ module backend
 go 1.24.5

 require (
-	gitea.tecamino.com/paadi/memberDB v1.0.1
+	gitea.tecamino.com/paadi/access-handler v1.0.29
+	gitea.tecamino.com/paadi/memberDB v1.1.13
 	gitea.tecamino.com/paadi/tecamino-dbm v0.1.1
 	gitea.tecamino.com/paadi/tecamino-logger v0.2.1
 	github.com/gin-contrib/cors v1.7.6
 	github.com/gin-gonic/gin v1.11.0
-	github.com/golang-jwt/jwt/v5 v5.2.2
-	golang.org/x/crypto v0.40.0
-	modernc.org/sqlite v1.39.0
+	github.com/joho/godotenv v1.5.1
+	golang.org/x/crypto v0.43.0
 )

 require (
+	gitea.tecamino.com/paadi/dbHandler v1.1.7 // indirect
 	github.com/bytedance/sonic v1.14.0 // indirect
 	github.com/bytedance/sonic/loader v0.3.0 // indirect
 	github.com/cloudwego/base64x v0.1.6 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/gabriel-vasile/mimetype v1.4.9 // indirect
 	github.com/gin-contrib/sse v1.1.0 // indirect
+	github.com/glebarez/go-sqlite v1.21.2 // indirect
+	github.com/glebarez/sqlite v1.11.0 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
 	github.com/go-playground/validator/v10 v10.27.0 // indirect
 	github.com/goccy/go-json v0.10.5 // indirect
 	github.com/goccy/go-yaml v1.18.0 // indirect
+	github.com/golang-jwt/jwt/v5 v5.3.0 // indirect
 	github.com/google/uuid v1.6.0 // indirect
+	github.com/jinzhu/inflection v1.0.0 // indirect
+	github.com/jinzhu/now v1.1.5 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
 	github.com/klauspost/cpuid/v2 v2.3.0 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
@@ -45,15 +51,17 @@ require (
 	go.uber.org/zap v1.27.0 // indirect
 	golang.org/x/arch v0.20.0 // indirect
 	golang.org/x/exp v0.0.0-20250620022241-b7579e27df2b // indirect
-	golang.org/x/mod v0.25.0 // indirect
-	golang.org/x/net v0.42.0 // indirect
-	golang.org/x/sync v0.16.0 // indirect
-	golang.org/x/sys v0.35.0 // indirect
-	golang.org/x/text v0.27.0 // indirect
-	golang.org/x/tools v0.34.0 // indirect
+	golang.org/x/mod v0.28.0 // indirect
+	golang.org/x/net v0.45.0 // indirect
+	golang.org/x/sync v0.17.0 // indirect
+	golang.org/x/sys v0.37.0 // indirect
+	golang.org/x/text v0.30.0 // indirect
+	golang.org/x/tools v0.37.0 // indirect
 	google.golang.org/protobuf v1.36.9 // indirect
 	gopkg.in/natefinch/lumberjack.v2 v2.2.1 // indirect
+	gorm.io/gorm v1.31.0 // indirect
 	modernc.org/libc v1.66.3 // indirect
 	modernc.org/mathutil v1.7.1 // indirect
 	modernc.org/memory v1.11.0 // indirect
+	modernc.org/sqlite v1.39.0 // indirect
 )
--- a/backend/go.sum
+++ b/backend/go.sum
@@ -1,5 +1,9 @@
-gitea.tecamino.com/paadi/memberDB v1.0.1 h1:hNnnoCeFRBEOQ+QmizF9nzvrQ8bNed8YrDln5jeRy2Y=
-gitea.tecamino.com/paadi/memberDB v1.0.1/go.mod h1:4tgbjrSZ2FZeJL68R2TFHPH34+aGxx5wtZxRmu6nZv4=
+gitea.tecamino.com/paadi/access-handler v1.0.29 h1:FZ67co/rfJffftT6xOp6psZKFtdEReaAR7PnEZi7ltI=
+gitea.tecamino.com/paadi/access-handler v1.0.29/go.mod h1:Dmme8URu3lENPhlkZcdEeIKm8VMlAgT/jNLECLLS7Vs=
+gitea.tecamino.com/paadi/dbHandler v1.1.7 h1:NqVbxbUwd7EZX6HYntyLYwwPbyTPevOhIBTFqoCVqOU=
+gitea.tecamino.com/paadi/dbHandler v1.1.7/go.mod h1:y/xn/POJg1DO++67uKvnO23lJQgh+XFQq7HZCS9Getw=
+gitea.tecamino.com/paadi/memberDB v1.1.13 h1:P5UsTt3d8829H9d3vfMAWpDN7ONqwhr8ndIuL9lBuvQ=
+gitea.tecamino.com/paadi/memberDB v1.1.13/go.mod h1:FRbhFgXq4jDpfCrCfHCVr7VcA44fR8J3XXQFeO6QSBk=
 gitea.tecamino.com/paadi/tecamino-dbm v0.1.1 h1:vAq7mwUxlxJuLzCQSDMrZCwo8ky5usWi9Qz+UP+WnkI=
 gitea.tecamino.com/paadi/tecamino-dbm v0.1.1/go.mod h1:+tmf1rjPaKEoNeUcr1vdtoFIFweNG3aUGevDAl3NMBk=
 gitea.tecamino.com/paadi/tecamino-logger v0.2.1 h1:sQTBKYPdzn9mmWX2JXZBtGBvNQH7cuXIwsl4TD0aMgE=
@@ -23,6 +27,10 @@ github.com/gin-contrib/sse v1.1.0 h1:n0w2GMuUpWDVp7qSpvze6fAu9iRxJY4Hmj6AmBOU05w
 github.com/gin-contrib/sse v1.1.0/go.mod h1:hxRZ5gVpWMT7Z0B0gSNYqqsSCNIJMjzvm6fqCz9vjwM=
 github.com/gin-gonic/gin v1.11.0 h1:OW/6PLjyusp2PPXtyxKHU0RbX6I/l28FTdDlae5ueWk=
 github.com/gin-gonic/gin v1.11.0/go.mod h1:+iq/FyxlGzII0KHiBGjuNn4UNENUlKbGlNmc+W50Dls=
+github.com/glebarez/go-sqlite v1.21.2 h1:3a6LFC4sKahUunAmynQKLZceZCOzUthkRkEAl9gAXWo=
+github.com/glebarez/go-sqlite v1.21.2/go.mod h1:sfxdZyhQjTM2Wry3gVYWaW072Ri1WMdWJi0k6+3382k=
+github.com/glebarez/sqlite v1.11.0 h1:wSG0irqzP6VurnMEpFGer5Li19RpIRi2qvQz++w0GMw=
+github.com/glebarez/sqlite v1.11.0/go.mod h1:h8/o8j5wiAsqSPoWELDUdJXhjAhsVliSn7bWZjOhrgQ=
 github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
 github.com/go-playground/assert/v2 v2.2.0/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
 github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
@@ -35,8 +43,8 @@ github.com/goccy/go-json v0.10.5 h1:Fq85nIqj+gXn/S5ahsiTlK3TmC85qgirsdTP/+DeaC4=
 github.com/goccy/go-json v0.10.5/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
 github.com/goccy/go-yaml v1.18.0 h1:8W7wMFS12Pcas7KU+VVkaiCng+kG8QiFeFwzFb+rwuw=
 github.com/goccy/go-yaml v1.18.0/go.mod h1:XBurs7gK8ATbW4ZPGKgcbrY1Br56PdM69F7LkFRi1kA=
-github.com/golang-jwt/jwt/v5 v5.2.2 h1:Rl4B7itRWVtYIHFrSNd7vhTiz9UpLdi6gZhZ3wEeDy8=
-github.com/golang-jwt/jwt/v5 v5.2.2/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
+github.com/golang-jwt/jwt/v5 v5.3.0 h1:pv4AsKCKKZuqlgs5sUmn4x8UlGa0kEVt/puTpKx9vvo=
+github.com/golang-jwt/jwt/v5 v5.3.0/go.mod h1:fxCRLWMO43lRc8nhHWY6LGqRcf+1gQWArsqaEUEa5bE=
 github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
 github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
@@ -44,6 +52,12 @@ github.com/google/pprof v0.0.0-20250317173921-a4b03ec1a45e h1:ijClszYn+mADRFY17k
 github.com/google/pprof v0.0.0-20250317173921-a4b03ec1a45e/go.mod h1:boTsfXsheKC2y+lKOCMpSfarhxDeIzfZG1jqGcPl3cA=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
+github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
+github.com/jinzhu/now v1.1.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
+github.com/jinzhu/now v1.1.5/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
+github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
+github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
 github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
 github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
 github.com/klauspost/cpuid/v2 v2.3.0 h1:S4CRMLnYUhGeDFDqkGriYKdfoFlDnMtqTiI/sFzhA9Y=
@@ -94,23 +108,23 @@ go.uber.org/zap v1.27.0 h1:aJMhYGrd5QSmlpLMr2MftRKl7t8J8PTZPA732ud/XR8=
 go.uber.org/zap v1.27.0/go.mod h1:GB2qFLM7cTU87MWRP2mPIjqfIDnGu+VIO4V/SdhGo2E=
 golang.org/x/arch v0.20.0 h1:dx1zTU0MAE98U+TQ8BLl7XsJbgze2WnNKF/8tGp/Q6c=
 golang.org/x/arch v0.20.0/go.mod h1:bdwinDaKcfZUGpH09BB7ZmOfhalA8lQdzl62l8gGWsk=
-golang.org/x/crypto v0.40.0 h1:r4x+VvoG5Fm+eJcxMaY8CQM7Lb0l1lsmjGBQ6s8BfKM=
-golang.org/x/crypto v0.40.0/go.mod h1:Qr1vMER5WyS2dfPHAlsOj01wgLbsyWtFn/aY+5+ZdxY=
+golang.org/x/crypto v0.43.0 h1:dduJYIi3A3KOfdGOHX8AVZ/jGiyPa3IbBozJ5kNuE04=
+golang.org/x/crypto v0.43.0/go.mod h1:BFbav4mRNlXJL4wNeejLpWxB7wMbc79PdRGhWKncxR0=
 golang.org/x/exp v0.0.0-20250620022241-b7579e27df2b h1:M2rDM6z3Fhozi9O7NWsxAkg/yqS/lQJ6PmkyIV3YP+o=
 golang.org/x/exp v0.0.0-20250620022241-b7579e27df2b/go.mod h1:3//PLf8L/X+8b4vuAfHzxeRUl04Adcb341+IGKfnqS8=
-golang.org/x/mod v0.25.0 h1:n7a+ZbQKQA/Ysbyb0/6IbB1H/X41mKgbhfv7AfG/44w=
-golang.org/x/mod v0.25.0/go.mod h1:IXM97Txy2VM4PJ3gI61r1YEk/gAj6zAHN3AdZt6S9Ww=
-golang.org/x/net v0.42.0 h1:jzkYrhi3YQWD6MLBJcsklgQsoAcw89EcZbJw8Z614hs=
-golang.org/x/net v0.42.0/go.mod h1:FF1RA5d3u7nAYA4z2TkclSCKh68eSXtiFwcWQpPXdt8=
-golang.org/x/sync v0.16.0 h1:ycBJEhp9p4vXvUZNszeOq0kGTPghopOL8q0fq3vstxw=
-golang.org/x/sync v0.16.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
+golang.org/x/mod v0.28.0 h1:gQBtGhjxykdjY9YhZpSlZIsbnaE2+PgjfLWUQTnoZ1U=
+golang.org/x/mod v0.28.0/go.mod h1:yfB/L0NOf/kmEbXjzCPOx1iK1fRutOydrCMsqRhEBxI=
+golang.org/x/net v0.45.0 h1:RLBg5JKixCy82FtLJpeNlVM0nrSqpCRYzVU1n8kj0tM=
+golang.org/x/net v0.45.0/go.mod h1:ECOoLqd5U3Lhyeyo/QDCEVQ4sNgYsqvCZ722XogGieY=
+golang.org/x/sync v0.17.0 h1:l60nONMj9l5drqw6jlhIELNv9I0A4OFgRsG9k2oT9Ug=
+golang.org/x/sync v0.17.0/go.mod h1:9KTHXmSnoGruLpwFjVSX0lNNA75CykiMECbovNTZqGI=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.35.0 h1:vz1N37gP5bs89s7He8XuIYXpyY0+QlsKmzipCbUtyxI=
-golang.org/x/sys v0.35.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
-golang.org/x/text v0.27.0 h1:4fGWRpyh641NLlecmyl4LOe6yDdfaYNrGb2zdfo4JV4=
-golang.org/x/text v0.27.0/go.mod h1:1D28KMCvyooCX9hBiosv5Tz/+YLxj0j7XhWjpSUF7CU=
-golang.org/x/tools v0.34.0 h1:qIpSLOxeCYGg9TrcJokLBG4KFA6d795g0xkBkiESGlo=
-golang.org/x/tools v0.34.0/go.mod h1:pAP9OwEaY1CAW3HOmg3hLZC5Z0CCmzjAF2UQMSqNARg=
+golang.org/x/sys v0.37.0 h1:fdNQudmxPjkdUTPnLn5mdQv7Zwvbvpaxqs831goi9kQ=
+golang.org/x/sys v0.37.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
+golang.org/x/text v0.30.0 h1:yznKA/E9zq54KzlzBEAWn1NXSQ8DIp/NYMy88xJjl4k=
+golang.org/x/text v0.30.0/go.mod h1:yDdHFIX9t+tORqspjENWgzaCVXgk0yYnYuSZ8UzzBVM=
+golang.org/x/tools v0.37.0 h1:DVSRzp7FwePZW356yEAChSdNcQo6Nsp+fex1SUW09lE=
+golang.org/x/tools v0.37.0/go.mod h1:MBN5QPQtLMHVdvsbtarmTNukZDdgwdwlO5qGacAzF0w=
 google.golang.org/protobuf v1.36.9 h1:w2gp2mA27hUeUzj9Ex9FBjsBm40zfaDtEWow293U7Iw=
 google.golang.org/protobuf v1.36.9/go.mod h1:fuxRtAxBytpl4zzqUh6/eyUujkJdNiuEkXntxiD/uRU=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
@@ -119,6 +133,8 @@ gopkg.in/natefinch/lumberjack.v2 v2.2.1/go.mod h1:YD8tP3GAjkrDg1eZH7EGmyESg/lsYs
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gorm.io/gorm v1.31.0 h1:0VlycGreVhK7RF/Bwt51Fk8v0xLiiiFdbGDPIZQ7mJY=
+gorm.io/gorm v1.31.0/go.mod h1:XyQVbO2k6YkOis7C2437jSit3SsDK72s7n7rsSHd+Gs=
 modernc.org/cc/v4 v4.26.2 h1:991HMkLjJzYBIfha6ECZdjrIYz2/1ayr+FL8GN+CNzM=
 modernc.org/cc/v4 v4.26.2/go.mod h1:uVtb5OGqUKpoLWhqwNQo/8LwvoiEBLvZXIQ/SmO6mL0=
 modernc.org/ccgo/v4 v4.28.0 h1:rjznn6WWehKq7dG4JtLRKxb52Ecv8OUGah8+Z/SfpNU=
--- a/backend/main.go
+++ b/backend/main.go
@@ -1,9 +1,9 @@
 package main

 import (
+	"backend/env"
 	"backend/models"
 	"backend/server"
-	"backend/user"
 	"backend/utils"
 	"flag"
 	"fmt"
@@ -14,33 +14,47 @@ import (
 	"strings"
 	"time"

+	AccessHandler "gitea.tecamino.com/paadi/access-handler"
+	dbApi "gitea.tecamino.com/paadi/memberDB/api"
 	"gitea.tecamino.com/paadi/tecamino-dbm/cert"

-	dbApi "gitea.tecamino.com/paadi/memberDB/api"
 	"gitea.tecamino.com/paadi/tecamino-logger/logging"
 	"github.com/gin-contrib/cors"
 	"github.com/gin-gonic/gin"
 )

 func main() {
-	var allowOrigins models.StringSlice
-
-	flag.Var(&allowOrigins, "allowOrigin", "Allowed origin (can repeat this flag)")
-
-	spa := flag.String("spa", "./dist/spa", "quasar spa files")
-	workingDir := flag.String("workingDirectory", ".", "quasar spa files")
-	ip := flag.String("ip", "0.0.0.0", "server listening ip")
-	organization := flag.String("organization", "", "self signed ciertificate organization")
-	port := flag.Uint("port", 9500, "server listening port")
-	https := flag.Bool("https", false, "serves as https needs flag -cert and -chain")
-	sslCert := flag.String("cert", "", "ssl certificate path")
-	sslChain := flag.String("chain", "", "ssl chain path")
-	debug := flag.Bool("debug", false, "log debug")
+	// set cli flage
+	envFile := flag.String("env", ".env", "enviroment file")
 	flag.Parse()

+	// load enviroment file if exists
+	if err := env.Load(*envFile); err != nil {
+		fmt.Println("no .env found path: ", *envFile)
+	}
+
+	devMode := env.InDevelopmentMode()
+	// set gin mode
+	if !devMode {
+		gin.SetMode(env.GinMode.GetValue())
+	}
+
+	workingDir := env.WorkingDir.GetValue()
+	spa := env.Spa.GetValue()
+
 	//change working directory only if value is given
-	if *workingDir != "." && *workingDir != "" {
-		os.Chdir(*workingDir)
+	if workingDir != "." && workingDir != "" {
+		os.Chdir(workingDir)
+	}
+
+	//set allowed origins
+	var allowOrigins models.StringSlice
+
+	if strings.Contains(env.DOMAIN.GetValue(), "http") {
+		allowOrigins.Set(env.DOMAIN.GetValue())
+	}
+	if env.AllowOrigin.GetValue() != "" {
+		allowOrigins.Set(env.AllowOrigin.GetValue())
 	}

 	wd, err := os.Getwd()
@@ -55,18 +69,18 @@ func main() {
 		MaxSize:     1,
 		MaxBackup:   3,
 		MaxAge:      28,
-		Debug:       *debug,
+		Debug:       env.InDebugMode(),
 		TerminalOut: true,
 	})
 	if err != nil {
-		logger.Error("main new logger", err.Error())
+		logger.Error("main new logger", err)
 		panic(err)
 	}

 	//new login manager
-	userManager, err := user.NewUserManager(".")
+	accessHandler, err := AccessHandler.NewAccessHandler(".", logger)
 	if err != nil {
-		logger.Error("main login manager", err.Error())
+		logger.Error("main login manager", err)
 		panic(err)
 	}

@@ -74,25 +88,32 @@ func main() {
 	s := server.NewServer()

 	// initiate Database handler
-	dbHandler := dbApi.NewAPIHandler()
+	dbHandler, err := dbApi.NewAPIHandler(logger)
+	if err != nil {
+		logger.Error("main login manager", err)
+		panic(err)
+	}

 	//get local ip
 	httpString := "http://"
-	if *https {
+	if env.Https.GetBoolValue() {
 		httpString = "https://"

 	}
-	allowOrigins = append(allowOrigins, httpString+"localhost:9000", httpString+"localhost:9500", httpString+"127.0.0.1:9500")
+	allowOrigins = append(allowOrigins, httpString+"localhost:9000", httpString+"localhost:9500", httpString+"127.0.0.1:9000", httpString+"0.0.0.0:9500")

 	localIP, err := utils.GetLocalIP()
 	if err != nil {
-		logger.Error("main", fmt.Sprintf("get local ip : %s", err.Error()))
+		logger.Error("main", fmt.Sprintf("get local ip : %s", err))
 	} else {
 		allowOrigins = append(allowOrigins, fmt.Sprintf("%s%s:9000", httpString, localIP), fmt.Sprintf("%s%s:9500", httpString, localIP))
 	}

+	fmt.Println(100, allowOrigins)
+
 	s.Routes.Use(cors.New(cors.Config{
 		AllowOrigins: allowOrigins,
+		//AllowOrigins:     []string{"*"},
 		AllowMethods:     []string{"POST", "GET", "DELETE", "OPTIONS"},
 		AllowHeaders:     []string{"Origin", "Content-Type"},
 		ExposeHeaders:    []string{"Content-Length"},
@@ -100,86 +121,106 @@ func main() {
 		MaxAge:           12 * time.Hour,
 	}))

+	//set logger for AuthMiddleware
+	accessHandler.SetMiddlewareLogger(s.Routes)
 	api := s.Routes.Group("/api")
 	//set routes

 	//public
-	api.GET("/logout", userManager.Logout)
-	api.GET("/login/me", userManager.Me)
+	api.GET("/logout", accessHandler.Logout)
+	api.GET("/login/me", accessHandler.Me)

-	api.POST("/login", userManager.Login)
+	api.POST("/login", accessHandler.Login)

 	//private
-	auth := api.Group("/secure", user.AuthMiddleware())
+	auth := api.Group("", accessHandler.AuthMiddleware())

-	auth.GET("/users", userManager.GetUserById)
-	auth.GET("/members", dbHandler.GetMemberById)
-	auth.GET("/roles", userManager.GetRoleById)
+	role := auth.Group("", accessHandler.AuthorizeRole("/api"))
+	role.GET("/members", dbHandler.GetMember)
+	auth.GET("/events", dbHandler.GetEvent)
+	auth.GET("/groups", dbHandler.GetGroup)
+
+	auth.GET("/users", accessHandler.GetUser)
+	auth.GET("/roles", accessHandler.GetRole)

 	auth.POST("database/open", dbHandler.OpenDatabase)
 	auth.POST("/members/add", dbHandler.AddNewMember)
-	auth.POST("/members/edit", dbHandler.EditMember)
+	auth.POST("/members/edit", dbHandler.UpdateMember)
 	auth.POST("/members/delete", dbHandler.DeleteMember)
 	auth.POST("/members/import/csv", dbHandler.ImportCSV)

-	auth.POST("/settings/update", userManager.UpdateSettings)
+	auth.POST("/events/add", dbHandler.StartNewEvent)
+	auth.POST("/events/edit", dbHandler.UpdateEvent)
+	auth.POST("/events/add/attendees", dbHandler.AddNewAttendees)
+	auth.POST("/events/delete/attendees", dbHandler.DeleteAttendee)
+	auth.POST("/events/delete", dbHandler.DeleteEvent)

-	auth.POST("/roles/add", userManager.AddRole)
-	auth.POST("/roles/update", userManager.UpdateRole)
-	auth.POST("/roles/delete", userManager.DeleteRole)
+	auth.POST("/groups/add", dbHandler.NewGroup)
+	auth.POST("/groups/edit", dbHandler.UpdateGroup)
+	auth.POST("/groups/delete", dbHandler.DeleteGroup)

-	auth.POST("/users/add", userManager.AddUser)
-	auth.POST("/users/delete", userManager.DeleteUser)
+	auth.GET("/responsible", dbHandler.GetResponsible)
+	auth.POST("/responsible/add", dbHandler.AddNewResponsible)
+	auth.POST("/responsible/delete", dbHandler.DeleteResponsible)

-	auth.POST("/login/refresh", userManager.Refresh)
+	auth.POST("/roles/add", accessHandler.AddRole)
+	auth.POST("/roles/update", accessHandler.UpdateRole)
+	auth.POST("/roles/delete", accessHandler.DeleteRole)
+
+	auth.POST("/users/add", accessHandler.AddUser)
+	auth.POST("/users/update", accessHandler.UpdateUser)
+	auth.POST("/users/new/password", accessHandler.ChangePassword)
+	auth.POST("/users/delete", accessHandler.DeleteUser)
+
+	api.POST("/login/refresh", accessHandler.Refresh)

 	// Serve static files
-	s.Routes.StaticFS("/assets", gin.Dir(filepath.Join(*spa, "assets"), true))
+	s.Routes.StaticFS("/assets", gin.Dir(filepath.Join(spa, "assets"), true))
 	s.Routes.NoRoute(func(c *gin.Context) {
 		// Disallow fallback for /api paths
 		if strings.HasPrefix(c.Request.URL.Path, "/api") {
-			c.JSON(http.StatusNotFound, models.NewJsonErrorMessageResponse("API endpoint not found"))
+			c.JSON(http.StatusNotFound, models.NewJsonMessageResponse("API endpoint not found"))
 			return
 		}
 		// Try to serve file from SPA directory
-		filePath := filepath.Join(*spa, c.Request.URL.Path)
+		filePath := filepath.Join(spa, c.Request.URL.Path)
 		if _, err := os.Stat(filePath); err == nil {
 			c.File(filePath)
 			return
 		}
 		// Fallback to index.html for SPA routing
-		c.File(filepath.Join(*spa, "index.html"))
+		c.File(filepath.Join(spa, "index.html"))

 	})

 	go func() {
 		time.Sleep(500 * time.Millisecond)
-		if err := utils.OpenBrowser(fmt.Sprintf("%slocalhost:%d", httpString, *port), logger); err != nil {
-			logger.Error("main", fmt.Sprintf("starting browser error : %s", err.Error()))
+		if err := utils.OpenBrowser(fmt.Sprintf("%slocalhost:%s", httpString, env.HostPort.GetValue()), logger); err != nil {
+			logger.Error("main", fmt.Sprintf("starting browser error : %s", err))
 		}
 	}()

-	if *https {
-		if *sslCert == "" {
+	if env.Https.GetBoolValue() {
+		if env.Fullchain.GetValue() == "" {
 			logger.Error("ssl certificate", "-cert flag not given for https server")
 			log.Fatal("-cert flag not given for https server")
 		}
-		if *sslChain == "" {
+		if env.PrivKey.GetValue() == "" {
 			logger.Error("ssl key", "-chain flag not given for https server")
 			log.Fatal("-chain flag not given for https server")
 		}

 		// start https server
-		logger.Info("main", fmt.Sprintf("https listen on ip: %s port: %d", *ip, *port))
-		if err := s.ServeHttps(*ip, *port, cert.Cert{Organization: *organization, CertFile: *sslCert, KeyFile: *sslChain}); err != nil {
+		logger.Info("main", fmt.Sprintf("https listen on ip: %s port: %s", env.HostUrl.GetValue(), env.HostPort.GetValue()))
+		if err := s.ServeHttps(env.HostUrl.GetValue(), env.HostPort.GetUIntValue(), cert.Cert{Organization: env.Organization.GetValue(), CertFile: env.Fullchain.GetValue(), KeyFile: env.PrivKey.GetValue()}); err != nil {
 			logger.Error("main", "error https server "+err.Error())
 		}
 		return
 	}

 	// start http server
-	logger.Info("main", fmt.Sprintf("http listen on ip: %s port: %d", *ip, *port))
-	if err := s.ServeHttp(*ip, *port); err != nil {
+	logger.Info("main", fmt.Sprintf("http listen on ip: %s port: %s", env.HostUrl.GetValue(), env.HostPort.GetValue()))
+	if err := s.ServeHttp(env.HostUrl.GetValue(), env.HostPort.GetUIntValue()); err != nil {
 		logger.Error("main", "error http server "+err.Error())
 	}
 }
--- a/backend/members.dba
+++ b/backend/members.dba
--- a/backend/models/jsonResponse.go
+++ b/backend/models/jsonResponse.go
@@ -5,16 +5,14 @@ type JsonResponse struct {
 	Message string `json:"message,omitempty"`
 }

-func NewJsonErrorMessageResponse(msg string) JsonResponse {
+func NewJsonMessageResponse(msg string) JsonResponse {
 	return JsonResponse{
-		Error:   true,
 		Message: msg,
 	}
 }

 func NewJsonErrorResponse(err error) JsonResponse {
 	return JsonResponse{
-		Error:   true,
 		Message: err.Error(),
 	}
 }
--- a/backend/models/rights.go
+++ b/backend/models/rights.go
@@ -1,8 +0,0 @@
-package models
-
-type Rights struct {
-	Name   string `json:"name,omitempty"`
-	Read   bool   `json:"read,omitempty"`
-	Write  bool   `json:"write,omitempty"`
-	Delete bool   `json:"delete,omitempty"`
-}
--- a/backend/models/role.go
+++ b/backend/models/role.go
@@ -1,11 +0,0 @@
-package models
-
-type Role struct {
-	Id     int      `json:"id"`
-	Role   string   `json:"role"`
-	Rights []Rights `json:"rights"`
-}
-
-func (r *Role) IsValid() bool {
-	return r.Role != ""
-}
--- a/backend/models/settings.go
+++ b/backend/models/settings.go
@@ -1,9 +0,0 @@
-package models
-
-type Settings struct {
-	PrimaryColor   string `json:"primaryColor,omitempty"`
-	SecondaryColor string `json:"secondaryColor,omitempty"`
-	Icon           string `json:"icon,omitempty"`
-	DatabaseName   string `json:"databaseName,omitempty"`
-	DatabaseToken  string `json:"databaseToken,omitempty"`
-}
--- a/backend/models/stringSlice.go
+++ b/backend/models/stringSlice.go
@@ -4,11 +4,10 @@ import "strings"

 type StringSlice []string

-func (s *StringSlice) String() string {
-	return strings.Join(*s, ",")
-}
-
-func (s *StringSlice) Set(value string) error {
+func (s *StringSlice) Set(value string) {
+	if strings.Contains(value, ",") {
+		*s = append(*s, strings.Split(value, ",")...)
+		return
+	}
 	*s = append(*s, value)
-	return nil
 }
--- a/backend/models/user.go
+++ b/backend/models/user.go
@@ -1,14 +0,0 @@
-package models
-
-type User struct {
-	Id       int      `json:"id"`
-	Name     string   `json:"user"`
-	Email    string   `json:"email"`
-	Role     string   `json:"role"`
-	Password string   `json:"password,omitempty"`
-	Settings Settings `json:"settings"`
-}
-
-func (u *User) IsValid() bool {
-	return u.Name != ""
-}
--- a/backend/user/Middleware.go
+++ b/backend/user/Middleware.go
@@ -1,41 +0,0 @@
-package user
-
-import (
-	"net/http"
-
-	"github.com/gin-gonic/gin"
-	"github.com/golang-jwt/jwt/v5"
-)
-
-func AuthMiddleware() gin.HandlerFunc {
-	return func(c *gin.Context) {
-		// Read access token from cookie
-		cookie, err := c.Cookie("access_token")
-		if err != nil {
-			c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"message": "not logged in"})
-			return
-		}
-
-		token, err := jwt.Parse(cookie, func(t *jwt.Token) (any, error) {
-			return JWT_SECRET, nil
-		})
-		if err != nil || !token.Valid {
-			c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"message": "invalid token"})
-			return
-		}
-		c.Next()
-	}
-}
-
-func AuthorizeRole(roles ...string) gin.HandlerFunc {
-	return func(c *gin.Context) {
-		userRole := c.GetString("role")
-		for _, role := range roles {
-			if userRole == role {
-				c.Next()
-				return
-			}
-			c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"message": "Forbidden"})
-		}
-	}
-}
--- a/backend/user/login.go
+++ b/backend/user/login.go
@@ -1,181 +0,0 @@
-package user
-
-import (
-	"backend/dbRequest"
-	"backend/models"
-	"backend/utils"
-	"encoding/json"
-	"io"
-	"net/http"
-	"time"
-
-	"github.com/gin-gonic/gin"
-	"github.com/golang-jwt/jwt/v5"
-	_ "modernc.org/sqlite"
-)
-
-var JWT_SECRET = []byte("4h5Jza1Fn_zuzu&417%8nH*UH100+55-")
-var DOMAIN = "localhost"
-var ACCESS_TOKEN_TIME = 15 * time.Minute
-var REFRESH_TOKEN_TIME = 72 * time.Hour
-
-func (um *UserManager) Login(c *gin.Context) {
-	if !um.databaseOpened(c) {
-		return
-	}
-
-	body, err := io.ReadAll(c.Request.Body)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	user := models.User{}
-	err = json.Unmarshal(body, &user)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	if !user.IsValid() {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorMessageResponse("user empty"))
-		return
-	}
-
-	var storedPassword, settingsJsonString string
-	if err := um.database.QueryRow(dbRequest.DBQueryPassword, user.Name).Scan(&user.Id, &user.Role, &storedPassword, &settingsJsonString); dbRequest.CheckDBError(c, user.Name, err) {
-		return
-	}
-
-	err = json.Unmarshal([]byte(settingsJsonString), &user.Settings)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorMessageResponse(err.Error()))
-		return
-	}
-
-	if !utils.CheckPassword(user.Password, storedPassword) {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorMessageResponse("wrong password"))
-		return
-	}
-
-	// ---- Create JWT tokens ----
-	accessTokenExp := time.Now().Add(ACCESS_TOKEN_TIME)
-	refreshTokenExp := time.Now().Add(REFRESH_TOKEN_TIME)
-
-	// Create token
-	accessToken := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
-		"id":       user.Id,
-		"username": user.Name,
-		"role":     user.Role,
-		"type":     "access",
-		"exp":      accessTokenExp.Unix(),
-	})
-
-	refreshToken := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
-		"id":       user.Id,
-		"username": user.Name,
-		"role":     user.Role,
-		"type":     "refresh",
-		"exp":      refreshTokenExp.Unix(),
-	})
-
-	accessString, err := accessToken.SignedString(JWT_SECRET)
-	if err != nil {
-		c.JSON(http.StatusInternalServerError, models.NewJsonErrorMessageResponse("could not create access token"))
-		return
-	}
-
-	refreshString, err := refreshToken.SignedString(JWT_SECRET)
-	if err != nil {
-		c.JSON(http.StatusInternalServerError, models.NewJsonErrorMessageResponse("could not create refresh token"))
-		return
-	}
-
-	// ---- Set secure cookies ----
-	secure := gin.Mode() == gin.ReleaseMode
-	c.SetCookie("access_token", accessString, int(time.Until(accessTokenExp).Seconds()),
-		"/", "", secure, true) // Path=/, Secure=true (only HTTPS), HttpOnly=true
-	c.SetCookie("refresh_token", refreshString, int(time.Until(refreshTokenExp).Seconds()),
-		"/", "", secure, true)
-
-	c.JSON(http.StatusOK, gin.H{
-		"message":  "login successful",
-		"id":       user.Id,
-		"user":     user.Name,
-		"role":     user.Role,
-		"settings": user.Settings,
-	})
-}
-
-func (um *UserManager) Refresh(c *gin.Context) {
-	refreshCookie, err := c.Cookie("refresh_token")
-	if err != nil {
-		c.JSON(http.StatusUnauthorized, gin.H{"message": "no refresh token"})
-		return
-	}
-
-	token, err := jwt.Parse(refreshCookie, func(token *jwt.Token) (any, error) {
-		return JWT_SECRET, nil
-	})
-	if err != nil || !token.Valid {
-		c.JSON(http.StatusUnauthorized, gin.H{"message": "invalid refresh token"})
-		return
-	}
-
-	claims, ok := token.Claims.(jwt.MapClaims)
-	if !ok || claims["type"] != "refresh" {
-		c.JSON(http.StatusUnauthorized, gin.H{"message": "invalid token type"})
-		return
-	}
-
-	username := claims["username"].(string)
-	id := claims["id"].(float64)
-	role := claims["role"].(string)
-
-	// new access token
-	accessExp := time.Now().Add(ACCESS_TOKEN_TIME)
-	newAccess := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
-		"id":       id,
-		"username": username,
-		"role":     role,
-		"exp":      accessExp.Unix(),
-	})
-	accessString, _ := newAccess.SignedString(JWT_SECRET)
-
-	c.SetCookie("access_token", accessString, int(time.Until(accessExp).Seconds()), "/", DOMAIN, gin.Mode() == gin.ReleaseMode, true)
-	c.JSON(http.StatusOK, gin.H{"message": "token refreshed"})
-}
-
-func (um *UserManager) Me(c *gin.Context) {
-	// Read access token from cookie
-	cookie, err := c.Cookie("access_token")
-	if err != nil {
-		c.JSON(http.StatusUnauthorized, gin.H{"message": "not logged in"})
-		return
-	}
-
-	// Verify token
-	token, err := jwt.Parse(cookie, func(t *jwt.Token) (any, error) {
-		return JWT_SECRET, nil
-	})
-	if err != nil || !token.Valid {
-		c.JSON(http.StatusUnauthorized, gin.H{"message": "invalid token"})
-		return
-	}
-
-	claims := token.Claims.(jwt.MapClaims)
-	c.JSON(http.StatusOK, gin.H{
-		"id":   claims["id"],
-		"user": claims["username"],
-		"role": claims["role"],
-	})
-}
-
-func (um *UserManager) Logout(c *gin.Context) {
-	secure := gin.Mode() == gin.ReleaseMode
-
-	c.SetCookie("access_token", "", -1, "/", DOMAIN, secure, true)
-	c.SetCookie("refresh_token", "", -1, "/", DOMAIN, secure, true)
-
-	c.JSON(http.StatusOK, gin.H{"message": "logged out"})
-}
--- a/backend/user/manager.go
+++ b/backend/user/manager.go
@@ -1,261 +0,0 @@
-package user
-
-import (
-	"backend/dbRequest"
-	"backend/models"
-	"backend/utils"
-	"database/sql"
-	"encoding/json"
-	"errors"
-	"fmt"
-	"io"
-	"net/http"
-	"os"
-	"strconv"
-	"strings"
-
-	"github.com/gin-gonic/gin"
-)
-
-type UserManager struct {
-	database *sql.DB
-}
-
-func NewUserManager(dir string) (*UserManager, error) {
-	if dir == "" {
-		dir = "."
-	}
-
-	var err error
-	var um UserManager
-	file := fmt.Sprintf("%s/user.db", dir)
-
-	um.database, err = sql.Open("sqlite", file)
-	if err != nil {
-		return nil, err
-	}
-
-	if _, err := os.Stat(file); err != nil {
-		_, err = um.database.Exec(dbRequest.CreateUserTable)
-		if err != nil {
-			return nil, err
-		}
-
-		hash, err := utils.HashPassword("tecamino@2025")
-		if err != nil {
-			return nil, err
-		}
-		_, err = um.database.Exec(dbRequest.NewUser, "admin", "", "admin", hash, `{"databaseName":"members.dba","primaryColor":"#1976d2", "secondaryColor":"#26a69a"}`)
-		if err != nil {
-			return nil, err
-		}
-	}
-	return &um, nil
-}
-
-func (um *UserManager) databaseOpened(c *gin.Context) bool {
-	if um.database == nil {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": "no database opened",
-		})
-		return false
-	}
-	return true
-}
-
-func (um *UserManager) AddUser(c *gin.Context) {
-	if !um.databaseOpened(c) {
-		return
-	}
-
-	body, err := io.ReadAll(c.Request.Body)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	user := models.User{}
-	err = json.Unmarshal(body, &user)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	if !user.IsValid() {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorMessageResponse("user empty"))
-		return
-	}
-
-	var exists bool
-
-	if err := um.database.QueryRow(dbRequest.DBUserLookup, user.Name).Scan(&exists); dbRequest.CheckDBError(c, user.Name, err) {
-		return
-	}
-
-	if exists {
-		c.JSON(http.StatusOK, models.NewJsonErrorMessageResponse(fmt.Sprintf("user '%s' exists already", user.Name)))
-		return
-	}
-
-	hash, err := utils.HashPassword(user.Password)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	if !utils.IsValidEmail(user.Email) {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(errors.New("not valid email address")))
-		return
-	}
-
-	if _, err := um.database.Exec(dbRequest.NewUser, user.Name, user.Email, user.Role, hash, "{}"); dbRequest.CheckDBError(c, user.Name, err) {
-		return
-	}
-
-	c.JSON(http.StatusOK, gin.H{
-		"message": fmt.Sprintf("user '%s' successfully added", user.Name),
-	})
-}
-
-func (um *UserManager) GetUserById(c *gin.Context) {
-	if !um.databaseOpened(c) {
-		return
-	}
-
-	var i int
-	var err error
-
-	id := c.Query("id")
-	if id != "" {
-		i, err = strconv.Atoi(id)
-		if err != nil {
-			c.JSON(http.StatusBadRequest, gin.H{
-				"message": err.Error(),
-			})
-			return
-		}
-	}
-
-	query := `SELECT id, username, email, role, settings FROM users`
-	var args any
-	if i > 0 {
-		query = `
-		SELECT  id, username, email, role, settings FROM users
-		WHERE id = ? 
-	`
-		args = i
-	}
-
-	rows, err := um.database.Query(query, args)
-	if err != nil {
-		return
-	}
-	defer rows.Close()
-
-	var users []models.User
-
-	for rows.Next() {
-		var id int
-		var name, email, role, settingsString string
-		if err = rows.Scan(&id, &name, &email, &role, &settingsString); err != nil {
-			c.JSON(http.StatusBadRequest, gin.H{
-				"message": err.Error(),
-			})
-			return
-		}
-
-		var settings models.Settings
-		err := json.Unmarshal([]byte(settingsString), &settings)
-		if err != nil {
-			c.JSON(http.StatusBadRequest, gin.H{
-				"message": err.Error(),
-			})
-			return
-		}
-
-		users = append(users, models.User{
-			Id:       id,
-			Name:     name,
-			Email:    email,
-			Role:     role,
-			Settings: settings,
-		})
-	}
-
-	if err != nil {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": err.Error(),
-		})
-		return
-	}
-	c.JSON(http.StatusOK, users)
-}
-
-func (um *UserManager) DeleteUser(c *gin.Context) {
-	if !um.databaseOpened(c) {
-		return
-	}
-
-	queryId := c.Query("id")
-
-	if queryId == "" || queryId == "null" || queryId == "undefined" {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": "id query missing or wrong value: " + queryId,
-		})
-		return
-	}
-
-	var request struct {
-		Ids []int `json:"ids"`
-	}
-
-	err := c.BindJSON(&request)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": err.Error(),
-		})
-		return
-	}
-
-	if len(request.Ids) == 0 {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": "no ids given to be deleted",
-		})
-		return
-	}
-
-	var ownId string
-	placeholders := make([]string, len(request.Ids))
-	args := make([]any, len(request.Ids))
-	for i, id := range request.Ids {
-		if queryId == fmt.Sprint(id) {
-			ownId = queryId
-			continue
-		}
-
-		placeholders[i] = "?"
-		args[i] = id
-	}
-
-	query := fmt.Sprintf("DELETE FROM users WHERE id IN (%s)", strings.Join(placeholders, ","))
-
-	_, err = um.database.Exec(query, args...)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": err.Error(),
-		})
-		return
-	}
-
-	if ownId != "" {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": "can not delete logged in member id: " + queryId,
-			"id":      queryId,
-		})
-		return
-	}
-
-	c.JSON(http.StatusOK, gin.H{
-		"message": "member(s) deleted",
-	})
-}
--- a/backend/user/roles.go
+++ b/backend/user/roles.go
@@ -1,245 +0,0 @@
-package user
-
-import (
-	"backend/dbRequest"
-	"backend/models"
-	"encoding/json"
-	"fmt"
-	"io"
-	"net/http"
-	"strconv"
-	"strings"
-
-	"github.com/gin-gonic/gin"
-)
-
-func (um *UserManager) AddRole(c *gin.Context) {
-	if !um.databaseOpened(c) {
-		return
-	}
-
-	body, err := io.ReadAll(c.Request.Body)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	role := models.Role{}
-	err = json.Unmarshal(body, &role)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	if !role.IsValid() {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorMessageResponse("user empty"))
-		return
-	}
-
-	var exists bool
-
-	if err := um.database.QueryRow(dbRequest.DBRoleLookup, role.Role).Scan(&exists); dbRequest.CheckDBError(c, role.Role, err) {
-		return
-	}
-
-	if exists {
-		c.JSON(http.StatusOK, models.NewJsonErrorMessageResponse(fmt.Sprintf("role '%s' exists already", role.Role)))
-		return
-	}
-
-	jsonBytes, err := json.Marshal(role.Rights)
-	if err != nil {
-		c.JSON(http.StatusOK, models.NewJsonErrorMessageResponse(err.Error()))
-		return
-	}
-
-	if _, err := um.database.Exec(dbRequest.NewRole, role.Role, string(jsonBytes)); dbRequest.CheckDBError(c, role.Role, err) {
-		return
-	}
-
-	c.JSON(http.StatusOK, gin.H{
-		"message": fmt.Sprintf("role '%s' successfully added", role.Role),
-	})
-}
-
-func (um *UserManager) GetRoleById(c *gin.Context) {
-	if !um.databaseOpened(c) {
-		return
-	}
-
-	if _, err := um.database.Exec(dbRequest.CreateRoleTable); err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	var i int
-	var err error
-
-	id := c.Query("id")
-	if id != "" {
-		i, err = strconv.Atoi(id)
-		if err != nil {
-			c.JSON(http.StatusBadRequest, gin.H{
-				"message": err.Error(),
-			})
-			return
-		}
-	}
-
-	query := `SELECT id, role, rights FROM roles`
-	var args any
-	if i > 0 {
-		query = `
-		SELECT  id, role, rights  FROM users
-		WHERE id = ? 
-	`
-		args = i
-	}
-
-	rows, err := um.database.Query(query, args)
-	if err != nil {
-		return
-	}
-	defer rows.Close()
-
-	var roles []models.Role
-
-	for rows.Next() {
-		var id int
-		var role, rightsString string
-		if err = rows.Scan(&id, &role, &rightsString); err != nil {
-			c.JSON(http.StatusBadRequest, gin.H{
-				"message": err.Error(),
-			})
-			return
-		}
-
-		var data struct {
-			Rights []models.Rights `json:"rights"`
-		}
-		err := json.Unmarshal([]byte(rightsString), &data)
-		if err != nil {
-			c.JSON(http.StatusBadRequest, gin.H{
-				"message": err.Error(),
-			})
-			return
-		}
-
-		roles = append(roles, models.Role{
-			Id:     id,
-			Role:   role,
-			Rights: data.Rights,
-		})
-	}
-
-	if err != nil {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": err.Error(),
-		})
-		return
-	}
-	c.JSON(http.StatusOK, roles)
-}
-
-func (um *UserManager) UpdateRole(c *gin.Context) {
-	if !um.databaseOpened(c) {
-		return
-	}
-
-	body, err := io.ReadAll(c.Request.Body)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	role := models.Role{}
-	err = json.Unmarshal(body, &role)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	jsonBytes, err := json.Marshal(role)
-	if err != nil {
-		c.JSON(http.StatusOK, models.NewJsonErrorMessageResponse(err.Error()))
-		return
-	}
-
-	if _, err := um.database.Exec(dbRequest.DBUpdateRole, string(jsonBytes), role.Role); err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	c.JSON(http.StatusOK, gin.H{
-		"message": fmt.Sprintf("role rights '%s' successfully updated", role.Role),
-	})
-}
-
-func (um *UserManager) DeleteRole(c *gin.Context) {
-	if !um.databaseOpened(c) {
-		return
-	}
-
-	queryRole := c.Query("role")
-
-	if queryRole == "" || queryRole == "null" || queryRole == "undefined" {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": "role query missing or wrong value: " + queryRole,
-		})
-		return
-	}
-
-	var request struct {
-		Roles []string `json:"roles"`
-	}
-
-	err := c.BindJSON(&request)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": err.Error(),
-		})
-		return
-	}
-
-	if len(request.Roles) == 0 {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": "no roles given to be deleted",
-		})
-		return
-	}
-
-	var ownRole string
-	placeholders := make([]string, len(request.Roles))
-	args := make([]any, len(request.Roles))
-	for i, role := range request.Roles {
-		if ownRole == role {
-			ownRole = queryRole
-			continue
-		}
-
-		placeholders[i] = "?"
-		args[i] = role
-	}
-
-	query := fmt.Sprintf("DELETE FROM roles WHERE role IN (%s)", strings.Join(placeholders, ","))
-
-	_, err = um.database.Exec(query, args...)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": err.Error(),
-		})
-		return
-	}
-
-	if ownRole != "" {
-		c.JSON(http.StatusBadRequest, gin.H{
-			"message": "can not delete logged in role id: " + ownRole,
-			"role":    ownRole,
-		})
-		return
-	}
-
-	c.JSON(http.StatusOK, gin.H{
-		"message": "role(s) deleted",
-	})
-}
--- a/backend/user/settings.go
+++ b/backend/user/settings.go
@@ -1,46 +0,0 @@
-package user
-
-import (
-	"backend/dbRequest"
-	"backend/models"
-	"encoding/json"
-	"fmt"
-	"io"
-	"net/http"
-
-	"github.com/gin-gonic/gin"
-)
-
-func (um *UserManager) UpdateSettings(c *gin.Context) {
-	if !um.databaseOpened(c) {
-		return
-	}
-
-	body, err := io.ReadAll(c.Request.Body)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	user := models.User{}
-	err = json.Unmarshal(body, &user)
-	if err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	jsonBytes, err := json.Marshal(user.Settings)
-	if err != nil {
-		c.JSON(http.StatusOK, models.NewJsonErrorMessageResponse(err.Error()))
-		return
-	}
-
-	if _, err := um.database.Exec(dbRequest.DBUpdateSettings, string(jsonBytes), user.Name); err != nil {
-		c.JSON(http.StatusBadRequest, models.NewJsonErrorResponse(err))
-		return
-	}
-
-	c.JSON(http.StatusOK, gin.H{
-		"message": fmt.Sprintf("user settings '%s' successfully updated", user.Name),
-	})
-}
--- a/backend/utils/utils.go
+++ b/backend/utils/utils.go
@@ -6,7 +6,6 @@ import (
 	"os"
 	"os/exec"
 	"path/filepath"
-	"regexp"
 	"runtime"

 	"gitea.tecamino.com/paadi/tecamino-logger/logging"
@@ -64,8 +63,3 @@ func FindAllFiles(rootDir, fileExtention string) (files []string, err error) {
 	})
 	return
 }
-
-func IsValidEmail(email string) bool {
-	re := regexp.MustCompile(`^[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}$`)
-	return re.MatchString(email)
-}
--- a/index.html
+++ b/index.html
@@ -1,19 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
  <head>
    <title><%= productName %></title>

-    <meta charset="utf-8">
-    <meta name="description" content="<%= productDescription %>">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="msapplication-tap-highlight" content="no">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+    <meta charset="utf-8" />
+    <meta name="description" content="<%= productDescription %>" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+    <meta
+      name="viewport"
+      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
+    />

-    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
-    <link rel="icon" type="image/ico" href="favicon.ico">
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
+    <link rel="icon" type="image/ico" href="favicon.ico" />
  </head>
  <body>
    <!-- quasar:entry-point -->
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "lightcontrol",
-  "version": "1.0.0",
+  "version": "1.0.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "lightcontrol",
-      "version": "1.0.0",
+      "version": "1.0.1",
      "hasInstallScript": true,
      "dependencies": {
        "@capacitor-community/sqlite": "^7.0.1",
@@ -19,12 +19,15 @@
        "vue": "^3.4.18",
        "vue-i18n": "^11.1.12",
        "vue-router": "^4.0.12",
-        "vuedraggable": "^4.1.0"
+        "vue3-touch-events": "^5.0.13",
+        "vuedraggable": "^4.1.0",
+        "zxcvbn": "^4.4.2"
      },
      "devDependencies": {
        "@eslint/js": "^9.14.0",
        "@quasar/app-vite": "^2.1.0",
        "@types/node": "^20.5.9",
+        "@types/zxcvbn": "^4.4.5",
        "@vue/eslint-config-prettier": "^10.1.0",
        "@vue/eslint-config-typescript": "^14.4.0",
        "autoprefixer": "^10.4.2",
@@ -1883,6 +1886,13 @@
        "@types/send": "*"
      }
    },
+    "node_modules/@types/zxcvbn": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/zxcvbn/-/zxcvbn-4.4.5.tgz",
+      "integrity": "sha512-FZJgC5Bxuqg7Rhsm/bx6gAruHHhDQ55r+s0JhDh8CQ16fD7NsJJ+p8YMMQDhSQoIrSmjpqqYWA96oQVMNkjRyA==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/@typescript-eslint/eslint-plugin": {
      "version": "8.31.1",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.31.1.tgz",
@@ -8222,6 +8232,15 @@
        "typescript": ">=5.0.0"
      }
    },
+    "node_modules/vue3-touch-events": {
+      "version": "5.0.13",
+      "resolved": "https://registry.npmjs.org/vue3-touch-events/-/vue3-touch-events-5.0.13.tgz",
+      "integrity": "sha512-VOprVhKsL5DaistDFU0+oLJz/LaFzVENeUzs4Hp3PeD0TVx1vNEgNgS/9WehUHlUIUuCdnmLm0TkmITjwVmUBQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/vuedraggable": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
@@ -8415,6 +8434,12 @@
      "engines": {
        "node": ">= 14"
      }
+    },
+    "node_modules/zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ==",
+      "license": "MIT"
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
  "name": "lightcontrol",
-  "version": "1.0.1",
+  "version": "1.2.0",
  "description": "A Tecamino App",
-  "productName": "Member Database",
+  "productName": "Attendence Records",
  "author": "A. Zuercher",
  "type": "module",
  "private": true,
@@ -25,12 +25,15 @@
    "vue": "^3.4.18",
    "vue-i18n": "^11.1.12",
    "vue-router": "^4.0.12",
-    "vuedraggable": "^4.1.0"
+    "vue3-touch-events": "^5.0.13",
+    "vuedraggable": "^4.1.0",
+    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@eslint/js": "^9.14.0",
    "@quasar/app-vite": "^2.1.0",
    "@types/node": "^20.5.9",
+    "@types/zxcvbn": "^4.4.5",
    "@vue/eslint-config-prettier": "^10.1.0",
    "@vue/eslint-config-typescript": "^14.4.0",
    "autoprefixer": "^10.4.2",
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icons/favicon-128x128.png
+++ b/public/icons/favicon-128x128.png
--- a/public/icons/favicon-16x16.png
+++ b/public/icons/favicon-16x16.png
--- a/public/icons/favicon-32x32.png
+++ b/public/icons/favicon-32x32.png
--- a/public/icons/favicon-96x96.png
+++ b/public/icons/favicon-96x96.png
--- a/quasar.config.ts
+++ b/quasar.config.ts
@@ -11,7 +11,7 @@ export default defineConfig((/* ctx */) => {
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ['auth', 'axios', 'lang', 'quasar-global'],
+    boot: ['auth', 'axios', 'lang', 'quasar-global', 'restore-route'],

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
    css: ['app.scss'],
@@ -109,7 +109,7 @@ export default defineConfig((/* ctx */) => {
      // you can manually specify Quasar components/directives to be available everywhere:
      //
      // components: [],
-      // directives: [],
+      //directives: [],

      // Quasar plugins
      plugins: ['Notify', 'Dialog'],
--- a/src/assets/lang/de-CH.yaml
+++ b/src/assets/lang/de-CH.yaml
@@ -4,6 +4,7 @@ lastName: Nachname
 birthday: Geburtstag
 email: Email
 group: Gruppe
+groups: Gruppen
 age: Auter
 address: Adresse
 town: Ort
@@ -15,6 +16,7 @@ lastVisit: Letscht Bsuech
 search: Suechi
 noDataAvailable: Keni Date
 importCSV: importier CSV
+exportCSV: exportier CSV
 selectMemberOptions: Wähle Mitglieder Optione
 addNewMember: Neues Mitglied
 csvOptions: CSV Optionen
@@ -32,12 +34,15 @@ settings: Iistellige
 databaseName: Datebank Name
 token: Schlüssu
 login: Amäude
+logout: Abmäude
 user: Benutzer
 password: Passwort
 isRequired: isch erforderlich
 colors: Farbe
 primaryColor: Primär Farb
+primaryColorText: Primär Text Farb
 secondaryColor: Sekondär Farb
+secondaryColorText: Sekondär Text Farb
 database: Datebank
 general: Augemein
 setColors: Setz Farbe
@@ -51,12 +56,87 @@ role: Rolle
 addNewUser: Füeg neue Benutzer hinzue
 expires: Ablouf
 selectUserOptions: Wähle Benutzer Optione
-prenameIsRequired: Vorname ist erforderlich
-lastNameIsRequired: Nachname ist erforderlich
-birthdayIsRequired: Geburtstag ist erforderlich
-userIsRequired: Benutzer ist erforderlich
-emailIsRequired: Email ist erforderlich
-roleIsRequired: Rolle ist erforderlich
-rights: Recht
+prenameIsRequired: Vorname isch erforderlich
+lastNameIsRequired: Nachname isch erforderlich
+birthdayIsRequired: Geburtstag isch erforderlich
+userIsRequired: Benutzer isch erforderlich
+emailIsRequired: Email isch erforderlich
+roleIsRequired: Rolle isch erforderlich
+permissions: Recht
 selectRoleOptions: Wähle Roue Optione
+selectEventOptions: Wähle Verastautigs Optione
 addNewRole: Füeg neui Roue hinzue
+addNewEvent: Füeg neui Verastautig hinzue
+veryWeak: sehr Schwach
+weak: Schwach
+fair: So so
+good: Guet
+strong: Stark
+passwordIsRequired: Password isch erforderlich
+passwordTooShort: Ds Passwort mues mindestens 8 Zeiche läng si
+passwordNeedsUppercase: Ds Passwort mues mindestens ei Grossbuechstabe enthaute
+passwordNeedsLowercase: Ds Passwort mues mindestens ei Chlibuechstabe enthaute
+passwordNeedsNumber: Ds Passwort mues mindestens ei Zau enthaute
+passwordNeedsSpecial: Ds Passwort mues mindestens eis Sonderzeiche enthaute
+passwordDoNotMatch: Passwörter stimme nid überei
+read: Lese
+write: Schribe
+userSettings: Benutzer Istellige
+members: Mitglider
+attendanceTable: Anweseheits Tabelle
+excursionTable: Usflugs Tabelle
+updated: aktualisiert
+events: Verastautige
+eventNameIsRequired: Verastautigssname isch erforderlich
+eventName: Verastautigssname
+attendees: Teilnähmer
+now: Jetzt
+addToEvent: Füge zu Veranstautig
+add: Hinzuefüege
+event: Verastautig
+dateAndTime: Datum und Zyt
+count: Anzau
+selectAttendeesOptions: Wähle Teilnehmer Optionen
+addNewAttendees: Füeg neue Teilnehmer hinzue
+notAllRequiredFieldsFilled: Nid aui erforderliche Felder usgfüet
+memberUpdated: Mitglied aktualisiert
+membersUpdated: Mitglieder aktualisiert
+deleteAttendee: Teilnehmer entfernt
+deleteAttendees: Teilnehmer entfernt
+deleteRoles: Rolen entfernt
+attendeeAdded: Teilnämer hinzuegfüegt
+attendeesAdded: Teilnämer hinzuegfüegt
+eventAdded: Verastautig hinzuegfüegt
+userUpdated: Benutzer aktualisiert
+selectResponsibleOptions: Wähle Verantwortliche Optionen
+addNewResponsible: Füeg neue Verantwortliche hinzue
+responsibleAdded: Veratwortläche hinzuegfüegt
+responsiblesAdded: Veratwortläche hinzuegfüegt
+deleteResponsible: Veratwortläche entfernt
+deleteResponsibles: Veratwortläche entfernt
+expiration: Ablauf
+never: Nie
+responsibles: Verantwortliche
+comment: Bemerkung
+dark_mode: Dunkel-Modus
+light_mode: Hell-Modus
+import: Import
+export: Export
+changePassword: Passwort ändere
+noneAttendees: Fählendi Telnähmer
+addNewgroup: Neui Gruppe
+selectgroupOptions: Wähle Gruppe Optionen
+groupNameIsRequired: Gruppename isch erforderlich
+groupName: Gruppename
+filterByColumn: Spaltenfilter
+filterByColumnValue: Spaltenwerte
+saveAsDefault: Aus Standard spichere
+day: Tag
+Monday: Mäntig
+Tuesday: Zistig
+Wednesday: Mittwuch
+Thursday: Donstig
+Friday: Fritig
+Saturday: Samstig
+Sunday: Suntig
+currentPassword: Aktuelles Passwort
--- a/src/assets/lang/de-DE.yaml
+++ b/src/assets/lang/de-DE.yaml
@@ -4,6 +4,7 @@ lastName: Nachname
 birthday: Geburtstag
 email: Email
 group: Gruppe
+groups: Gruppen
 age: Alter
 address: Adresse
 town: Ort
@@ -15,6 +16,7 @@ lastVisit: Letzter Besuch
 search: Suche
 noDataAvailable: Keine Daten
 importCSV: importiere CSV
+exportCSV: exportiere CSV
 selectMemberOptions: Wähle Mitglieder Optionen
 addNewMember: Neues Mitglied
 csvOptions: CSV Optionen
@@ -32,12 +34,15 @@ settings: Einstellungen
 databaseName: Datenbank Name
 token: Schlüssel
 login: Anmelden
+logout: Abmelden
 user: Benutzer
 password: Passwort
 isRequired: ist erforderlich
 colors: Farben
 primaryColor: Primär Farbe
+primaryColorText: Primär Text Farbe
 secondaryColor: Sekondär Farbe
+secondaryColorText: Sekondär Text Farbe
 database: Datenbank
 general: Allgemein
 setColors: Setze Farben
@@ -57,6 +62,81 @@ birthdayIsRequired: Geburtstag ist erforderlich
 userIsRequired: Benutzer ist erforderlich
 emailIsRequired: Email ist erforderlich
 roleIsRequired: Rolle ist erforderlich
-rights: Rechte
-selectRoleOptions: Wähle Rollen Option
+permissions: Rechte
+selectRoleOptions: Wähle Rollen Optionen
+selectEventOptions: Wähle Veranstaltungs Optionen
 addNewRole: Füge neue Rolle hinzu
+addNewEvent: Füeg neue Veranstaltung hinzu
+veryWeak: sehr Schwach
+weak: Schwach
+fair: Ausreichend
+good: Gut
+strong: Stark
+passwordIsRequired: Password ist erforderlich
+passwordTooShort: Das Passwort muss mindestens 8 Zeichen lang sein
+passwordNeedsUppercase: Das Passwort muss mindestens einen Großbuchstaben enthalten
+passwordNeedsLowercase: Das Passwort muss mindestens einen Kleinbuchstaben enthalten
+passwordNeedsNumber: Das Passwort muss mindestens eine Zahl enthalten
+passwordNeedsSpecial: Das Passwort muss mindestens ein Sonderzeichen enthalten
+passwordDoNotMatch: Passwörter stimmen nicht überein
+read: Lesen
+write: Schreiben
+userSettings: Benutzer Einstellungen
+members: Mitglieder
+attendanceTable: Anwesenheits Tabelle
+excursionTable: Ausflugs Tabelle
+updated: aktualisiert
+events: Veranstaltungen
+eventNameIsRequired: Veranstaltungsname ist erforderlich
+eventName: Veranstaltungsname
+attendees: Teilnehmer
+now: Jetzt
+addToEvent: Füge zu Veranstaltung
+add: Hinzufügen
+event: Veranstaltung
+dateAndTime: Datum und Zeit
+count: Anzahl
+selectAttendeesOptions: Wähle Teilnehmer Optionen
+addNewAttendees: Füge neuen Teilnehmer hinzu
+notAllRequiredFieldsFilled: Nicht alle erforderlichen Felder ausgefüllt
+memberUpdated: Mitglied aktualisiert
+membersUpdated: Mitglieder aktualisiert
+deleteAttendee: Teilnehmer entfernt
+deleteAttendees: Teilnehmer entfernt
+deleteRoles: Rolen entfernt
+attendeeAdded: Teilnehmer hinzugefügt
+attendeesAdded: Teilnehmer hinzugefügt
+eventAdded: Veranstaltung hinzugefügt
+userUpdated: Benutzer aktualisiert
+selectResponsibleOptions: Wähle Verantwortliche Optionen
+addNewResponsible: Füge neuen Verantwortlichen hinzu
+responsibleAdded: Veratwortläche hinzuegfüegt
+responsiblesAdded: Verantwortliche hinzuegfüegt
+deleteResponsible: Verantwortliche entfernt
+deleteResponsibles: Verantwortliche entfernt
+expiration: Ablauf
+never: Nie
+responsibles: Verantwortliche
+comment: Bemerkung
+dark_mode: Dunkel-Modus
+light_mode: Hell-Modus
+import: Import
+export: Export
+changePassword: Passwort ändern
+noneAttendees: Fehlende Teilnehmer
+addNewgroup: Neue Gruppe
+selectgroupOptions: Wähle Gruppen Optionen
+groupNameIsRequired: Gruppenname ist erforderlich
+groupName: Gruppenname
+filterByColumn: Spaltenfilter
+filterByColumnValue: Spaltenwerte
+saveAsDefault: Als Standard speichern
+day: Tag
+Monday: Montag
+Tuesday: Dienstag
+Wednesday: Mittwoch
+Thursday: Donnerstag
+Friday: Freitag
+Saturday: Samstag
+Sunday: Sonntag
+currentPassword: Aktuelles Passwort
--- a/src/assets/lang/en-US.yaml
+++ b/src/assets/lang/en-US.yaml
@@ -4,6 +4,7 @@ lastName: Name
 birthday: Birthday
 email: Email
 group: Group
+groups: Groups
 age: Age
 address: Address
 town: Town
@@ -12,9 +13,10 @@ phone: Phone
 responsible: Responsible
 firstVisit: First Visit
 lastVisit: Last Visit
-search: search
+search: Search
 noDataAvailable: No data available
 importCSV: Import CSV
+exportCSV: Export CSV
 selectMemberOptions: Select Member Options
 addNewMember: Add new Member
 csvOptions: CSV Options
@@ -32,12 +34,15 @@ settings: Settings
 databaseName: Database Name
 token: Token
 login: Login
+logout: Logout
 user: User
 password: Password
 isRequired: is required
 colors: Colors
 primaryColor: Primary Color
+primaryColorText: Primary Text Color
 secondaryColor: Secondary Color
+secondaryColorText: Secondary Text Color
 database: Database
 general: General
 setColors: Set Colors
@@ -57,6 +62,81 @@ birthdayIsRequired: Birthday is required
 userIsRequired: User is required
 emailIsRequired: Email is required
 roleIsRequired: Role is required
-rights: Rights
+permissions: Permissions
 selectRoleOptions: Select Role Options
+selectEventOptions: Select Event Options
 addNewRole: Add new Role
+addNewEvent: Add new Event
+veryWeak: very Weak
+weak: Weak
+fair: Fair
+good: Good
+strong: Strong
+passwordIsRequired: Password is required
+passwordTooShort: Password must be at least 8 characters long
+passwordNeedsUppercase: Password must contain at least one uppercase letter
+passwordNeedsLowercase: Password must contain at least one lowercase letter
+passwordNeedsNumber: Password must contain at least one number
+passwordNeedsSpecial: Password must contain at least one special character
+passwordDoNotMatch: Password do not match
+read: Read
+write: Write
+userSettings: User Settings
+members: Members
+attendanceTable: Attendance Table
+excursionTable: Excursion Table
+updated: updated
+events: Events
+eventNameIsRequired: Eventname is required
+eventName: Eventname
+attendees: Attendees
+now: Now
+addToEvent: Add to event
+add: Add
+event: Event
+dateAndTime: Date and Time
+count: Count
+selectAttendeesOptions: Select Attendees Options
+addNewAttendees: Add new Attendee
+notAllRequiredFieldsFilled: Not all required fields are filled in
+memberUpdated: Member updated
+membersUpdated: Members updated
+deleteAttendee: Attendee deleted
+deleteAttendees: Attendees deleted
+deleteRoles: Roles deleted
+attendeeAdded: Attendee added
+attendeesAdded: Attendees added
+eventAdded: Event added
+userUpdated: User updated
+selectResponsibleOptions: Select Responsible Options
+addNewResponsible: Add Responsible
+responsibleAdded: Responsible hinzuegfüegt
+responsiblesAdded: Responsibles hinzuegfüegt
+deleteResponsible: Responsible deleted
+deleteResponsibles: Responsibles deleted
+expiration: Expiration
+never: Never
+responsibles: Responsibles
+comment: Comment
+dark_mode: Dark-Mode
+light_mode: Light-Mode
+import: Import
+export: Export
+changePassword: change Password
+noneAttendees: Missing Attendees
+addNewgroup: New Group
+selectgroupOptions: Select Group Options
+groupNameIsRequired: Groupname is required
+groupName: Groupname
+filterByColumn: Columnfilter
+filterByColumnValue: Columnvalues
+saveAsDefault: Save a Default
+day: Day
+Monday: Monday
+Tuesday: Tuesday
+Wednesday: Wednesday
+Thursday: Thursday
+Friday: Friday
+Saturday: Saturday
+Sunday: Sunday
+currentPassword: Current Password
--- a/src/boot/auth.ts
+++ b/src/boot/auth.ts
@@ -14,7 +14,13 @@ export default boot(async ({ app }) => {
  await appApi
    .get('/login/me')
    .then((resp) => {
-      useStore.setUser({ id: resp.data.id, username: resp.data.username, role: resp.data.role });
+      useStore
+        .setUser({
+          id: resp.data.id,
+          username: resp.data.username,
+          role: { role: resp.data.role, permissions: [] },
+        })
+        .catch((err) => console.error(err));
      login.refresh().catch((err) => console.error(err));
    })
    .catch(() => {
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -3,12 +3,11 @@ import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } fro
 import axios from 'axios';
 import { useLogin } from 'src/vueLib/login/useLogin';

-const host = window.location.hostname;
-export const portApp = 9500;
+const host = import.meta.env.VITE_API_URL;

 // Create axios instance
 export const appApi: AxiosInstance = axios.create({
-  baseURL: `https://${host}:${portApp}/api`,
+  baseURL: host,
  timeout: 10000,
  withCredentials: true,
 });
@@ -17,7 +16,7 @@ interface RetryRequestConfig extends AxiosRequestConfig {
  _retry?: boolean;
 }

-const noRefreshEndpoints = ['/login', '/secure/login/refresh', '/logout'];
+const noRefreshEndpoints = ['/login', '/login/refresh', '/logout'];

 // ========= Refresh Queue Handling ========= //
 let isRefreshing = false;
@@ -56,6 +55,21 @@ appApi.interceptors.response.use(

    // Handle unauthorized responses
    if (error.response?.status === 401 && !originalRequest._retry) {
+      const data = error.response?.data;
+      const serverMessage =
+        typeof data === 'object' && data !== null && 'message' in data
+          ? (data as { message: string }).message
+          : undefined;
+
+      if (['no refresh token', 'is expired'].some((msg) => serverMessage?.includes(msg))) {
+        console.warn('[Axios] No refresh token — logging out');
+        try {
+          await logout();
+        } catch (logoutErr) {
+          console.error('[Axios] Logout failed:', logoutErr);
+        }
+        throw new Error('Session expired: no refresh token');
+      }
      if (isRefreshing) {
        // Wait until refresh completes
        return new Promise<AxiosResponse>((resolve, reject) => {
--- a/src/boot/lang.js
+++ b/src/boot/lang.js
@@ -1,10 +1,10 @@
 import { createI18n } from 'vue-i18n';
 import yaml from 'js-yaml';
+import { getLocalLanguage } from 'src/localstorage/localStorage';

 export const lang = [];

 const systemLocale = navigator.language || 'en-US';
-const savedLang = localStorage.getItem('lang');

 const messages = {};
 const modules = import.meta.glob('src/assets/lang/*.yaml', {
@@ -24,10 +24,27 @@ for (const path in modules) {
  messages[locale] = parsed;
 }

+function resolveLocale(desiredLocale) {
+  if (messages[desiredLocale]) return desiredLocale;
+
+  const baseLang = desiredLocale.split('-')[0];
+  // exact base match (e.g. en)
+  if (messages[baseLang]) return baseLang;
+
+  // first locale starting with that base (e.g. en-US, en-GB)
+  const partialMatch = Object.keys(messages).find((l) => l.startsWith(baseLang));
+  if (partialMatch) return partialMatch;
+
+  // fallback to English or the first available
+  return messages['en'] ? 'en' : Object.keys(messages)[0];
+}
+
+const selectedLocale = resolveLocale(getLocalLanguage() || systemLocale);
+
 const i18n = createI18n({
  legacy: false, // Composition API mode
-  locale: savedLang || systemLocale,
-  fallbackLocale: systemLocale,
+  locale: selectedLocale,
+  fallbackLocale: resolveLocale(selectedLocale),
  messages,
 });

--- a/src/boot/quasar-global.ts
+++ b/src/boot/quasar-global.ts
@@ -1,25 +1,35 @@
 import { boot } from 'quasar/wrappers';
-import { setQuasarInstance } from 'src/utils/globalQ';
-import { setRouterInstance } from 'src/utils/globalRouter';
-import { databaseName } from 'src/vueLib/tables/members/MembersTable';
-import { Logo } from 'src/vueLib/models/logo';
+import { setQuasarInstance } from 'src/vueLib/utils/globalQ';
+import { setRouterInstance } from 'src/vueLib/utils/globalRouter';
+import { databaseName, logo, appName } from 'src/vueLib/models/settings';
+import { Dark } from 'quasar';
+import { getLocalDarkMode, getLocalSettings } from 'src/localstorage/localStorage';

 export default boot(({ app, router }) => {
  setRouterInstance(router); // store router for global access
  const $q = app.config.globalProperties.$q;
  setQuasarInstance($q);

-  Logo.value = localStorage.getItem('icon') ?? Logo.value;
-  databaseName.value = localStorage.getItem('databaseName') ?? databaseName.value;
-  let primaryColor = localStorage.getItem('primaryColor');
-  if (primaryColor == null || primaryColor === 'undefined' || primaryColor.trim() === '') {
-    primaryColor = null;
-  }
-  let secondaryColor = localStorage.getItem('secondaryColor');
-  if (secondaryColor == null || secondaryColor === 'undefined' || secondaryColor.trim() === '') {
-    secondaryColor = null;
-  }
+  Dark.set(getLocalDarkMode());

-  document.documentElement.style.setProperty('--q-primary', primaryColor ?? '#1976d2');
-  document.documentElement.style.setProperty('--q-secondary', secondaryColor ?? '#26a69a');
+  const settings = getLocalSettings();
+
+  if (settings.icon) {
+    logo.value = settings.icon;
+  }
+  if (settings.appName) {
+    appName.value = settings.appName;
+  }
+  databaseName.value = settings.databaseName ?? databaseName.value;
+
+  document.documentElement.style.setProperty('--q-primary', settings.primaryColor ?? '#1976d2');
+  document.documentElement.style.setProperty(
+    '--q-primary-text',
+    settings.primaryColorText ?? '#ffffff',
+  );
+  document.documentElement.style.setProperty('--q-secondary', settings.secondaryColor ?? '#26a69a');
+  document.documentElement.style.setProperty(
+    '--q-secondary-text',
+    settings.secondaryColorText ?? '#ffffff',
+  );
 });
--- a/src/boot/restore-route.js
+++ b/src/boot/restore-route.js
@@ -0,0 +1,43 @@
+import { boot } from 'quasar/wrappers';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { appApi } from './axios';
+import { getLocalLastRoute, setLocalLastRoute } from 'src/localstorage/localStorage';
+
+export default boot(async ({ router }) => {
+  const userStore = useUserStore();
+  // load user
+  try {
+    const { data } = await appApi.get('/login/me');
+
+    data.role.role = data.role;
+    await userStore.setUser(data);
+  } catch {
+    /* ignore error */
+  }
+
+  // Restore logic after router is ready but before navigation
+  router.isReady().then(() => {
+    const lastRoute = getLocalLastRoute();
+    const currentPath = router.currentRoute.value.fullPath;
+
+    // Restore only if:
+    // - we’re on root ("/" or "/#/"), and
+    // - a last route exists, and
+    // - the user is authenticated
+    if (
+      lastRoute &&
+      ['/', '/#/', '/#/index.html'].includes(currentPath) &&
+      userStore.isAuthenticated
+    ) {
+      router.replace(lastRoute).catch(() => {});
+    }
+  });
+
+  // Save the route after every successful navigation
+  router.afterEach((to) => {
+    // Don't save login page as "last route"
+    if (to.path !== '/login' && to.path !== '/') {
+      setLocalLastRoute(to.fullPath);
+    }
+  });
+});
--- a/src/components/AddToEvent.vue
+++ b/src/components/AddToEvent.vue
@@ -0,0 +1,124 @@
+<template>
+  <DialogFrame ref="dialog" :header-title="localTitle">
+    <div class="row justify-center">
+      <SearchableSelect
+        class="q-mx-xl"
+        dense
+        autofocus
+        :label="$t('event')"
+        filled
+        :options="events"
+        option-label="name"
+        option-value="id"
+        v-model="selected"
+        @keyup.enter="addAttendees"
+        map-options
+        emit-value
+      ></SearchableSelect>
+    </div>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="addAttendees">{{ localTitle }}</q-btn>
+    </div>
+  </DialogFrame>
+  <EditAllDialog
+    ref="newEventRef"
+    v-on:update="
+      (val) => {
+        resolveNewEvent(val);
+        NotifyResponse($t('memberUpdated'));
+      }
+    "
+  ></EditAllDialog>
+</template>
+
+<script setup lang="ts">
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import { appApi } from 'src/boot/axios';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'src/boot/lang';
+import type { Event, Events } from 'src/vueLib/models/event';
+import type { Members } from 'src/vueLib/models/member';
+import EditAllDialog from 'src/components/EventEditAllDialog.vue';
+import { useAttendeesTable } from 'src/vueLib/tables/attendees/AttendeesTable';
+import { useEventTable } from 'src/vueLib/tables/events/EventsTable';
+import SearchableSelect from 'src/vueLib/general/SearchableSelect .vue';
+
+const dialog = ref();
+const newEventRef = ref();
+const localTitle = ref('');
+const events = ref<Events>([{ id: -1, name: i18n.global.t('addNewEvent'), attendees: [] }]);
+const selected = ref<Event>({ id: -1, name: i18n.global.t('addNewEvent'), attendees: [] });
+const localMembers = ref<Members>([]);
+const { updateAttendees } = useAttendeesTable();
+const { updateEvents } = useEventTable();
+
+const props = defineProps({
+  endpoint: {
+    type: String,
+    required: true,
+  },
+  queryId: {
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update-event']);
+const { NotifyResponse } = useNotify();
+
+function open(title: string, members: Members) {
+  localTitle.value = title;
+  localMembers.value = members;
+
+  events.value = [{ id: -1, name: i18n.global.t('addNewEvent'), attendees: [] }];
+  appApi
+    .get('events')
+    .then((resp) => {
+      events.value.push(...resp.data);
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+  dialog.value?.open();
+}
+
+async function addAttendees() {
+  const payload = {
+    id: Number(selected.value),
+    attendees: localMembers.value,
+  };
+  if (selected.value.id == -1) {
+    const event = await addNewEvent();
+    NotifyResponse(i18n.global.t('eventAdded') + ': ' + event.name);
+    payload.id = event.id;
+  }
+
+  await appApi
+    .post(props.endpoint, payload)
+    .then(() => {
+      emit('update-event', localMembers.value);
+      if (localMembers.value.length > 1) {
+        NotifyResponse(i18n.global.t('attendeesAdded'));
+      } else {
+        NotifyResponse(i18n.global.t('attendeeAdded'));
+      }
+      dialog.value.close();
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+
+  await updateAttendees(0);
+  updateEvents();
+}
+
+let resolveNewEvent!: (value: Event) => void;
+function addNewEvent(): Promise<Event> {
+  newEventRef.value?.open(null);
+  return new Promise((resolve) => {
+    resolveNewEvent = resolve;
+  });
+}
+
+defineExpose({ open });
+</script>
--- a/src/components/EditOneDialog.vue
+++ b/src/components/EditOneDialog.vue
@@ -1,17 +1,57 @@
 <template>
  <DialogFrame ref="dialog" :header-title="'Edit ' + localTitle">
    <div class="row justify-center">
-      <q-input
-        autofocus
-        class="q-ml-md col-6"
-        :label="localTitle"
-        filled
-        v-model="value"
-        @keyup.enter="save"
-      ></q-input>
+      <q-input autofocus :label="localTitle" filled v-model="value" @keyup.enter="save">
+        <template
+          v-if="['firstVisit', 'lastVisit', 'date', 'expiration'].includes(localField)"
+          v-slot:prepend
+        >
+          <q-icon name="event" class="cursor-pointer">
+            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+              <q-date v-model="value" mask="YYYY-MM-DD HH:mm:ss">
+                <div class="row items-center justify-end">
+                  <q-btn :label="$t('now')" color="primary" no-caps flat @click="setTimeNow" />
+                  <q-btn
+                    v-if="localField"
+                    :label="$t('never')"
+                    color="primary"
+                    no-caps
+                    flat
+                    @click="value = 'never'"
+                  />
+                  <q-btn no-caps v-close-popup :label="$t('close')" color="primary" flat />
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+        <template
+          v-if="['firstVisit', 'lastVisit', 'date', 'expiration'].includes(localField)"
+          v-slot:append
+        >
+          <q-icon name="access_time" class="cursor-pointer">
+            <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+              <q-time with-seconds v-model="value" mask="YYYY-MM-DD HH:mm:ss" format24h>
+                <div class="row items-center justify-end">
+                  <q-btn :label="$t('now')" color="primary" no-caps flat @click="setTimeNow" />
+                  <q-btn
+                    v-if="localField"
+                    :label="$t('never')"
+                    color="primary"
+                    no-caps
+                    flat
+                    @click="value = 'never'"
+                  />
+                  <q-btn no-caps v-close-popup :label="$t('close')" color="primary" flat />
+                </div>
+              </q-time>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
    </div>
    <div class="row justify-center">
-      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
    </div>
  </DialogFrame>
 </template>
@@ -29,6 +69,12 @@ const localTitle = ref('');
 const localField = ref('');
 const value = ref('');

+const props = defineProps({
+  endpoint: {
+    type: String,
+  },
+});
+
 const emit = defineEmits(['update']);
 const { NotifyResponse } = useNotify();

@@ -42,21 +88,29 @@ function open(label: string, field: string, member: Member) {
 }

 function save() {
-  const query = 'secure/members/edit?id=' + localMember.value.id;
  let payload = {};

  if (value.value === localMember.value[localField.value]) {
    dialog.value.close();
    return;
  }
-  payload = {
+
+  if (!props.endpoint) {
+    localMember.value[localField.value] = value.value;
+    emit('update', localMember.value);
+    return;
+  }
+  payload = [
+    {
+      id: localMember.value.id,
      [localField.value]: value.value,
-  };
+    },
+  ];

  appApi
-    .post(query, payload)
+    .post(props.endpoint, payload)
    .then(() => {
-      emit('update', '');
+      emit('update');
      dialog.value.close();
    })
    .catch((err) => {
@@ -64,5 +118,18 @@ function save() {
    });
 }

+function setTimeNow() {
+  const now = new Date();
+
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0'); // Months are 0-based
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const seconds = String(now.getSeconds()).padStart(2, '0');
+
+  value.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+
 defineExpose({ open });
 </script>
--- a/src/components/EventEditAllDialog.vue
+++ b/src/components/EventEditAllDialog.vue
@@ -0,0 +1,95 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="newEvent ? $t('addNewEvent') : 'Edit ' + localEvent.name"
+    :height="250"
+    :width="500"
+  >
+    <q-form ref="form">
+      <div class="row justify-center q-gutter-md">
+        <q-input
+          class="q-ml-md col-5 required"
+          :label="$t('eventName')"
+          filled
+          :rules="[(val) => !!val || $t('eventNameIsRequired')]"
+          v-model="localEvent.name"
+          autofocus
+          @keyup.enter="save"
+        ></q-input>
+      </div>
+    </q-form>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import { appApi } from 'src/boot/axios';
+import type { Event } from 'src/vueLib/models/event';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const form = ref();
+const newEvent = ref(false);
+const localEvent = ref<Event>({
+  id: 0,
+  name: '',
+  attendees: [],
+});
+
+const emit = defineEmits(['update']);
+
+function open(Event: Event | null) {
+  if (Event === undefined) {
+    return;
+  }
+
+  if (Event !== null) {
+    localEvent.value = { ...Event };
+    newEvent.value = Event.id === 0;
+  } else {
+    localEvent.value = {
+      id: 0,
+      name: '',
+      attendees: [],
+    };
+    newEvent.value = true;
+  }
+
+  dialog.value?.open();
+}
+
+async function save() {
+  const valid = await form.value.validate();
+
+  if (!valid) return;
+
+  let query = 'events/edit';
+  let payload = JSON.stringify([localEvent.value]);
+  if (newEvent.value) {
+    query = 'events/add?name=' + localEvent.value.name;
+    payload = JSON.stringify(localEvent.value);
+  }
+
+  appApi
+    .post(query, payload)
+    .then((resp) => {
+      emit('update', resp.data.data);
+      dialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
+defineExpose({ open });
+</script>
+
+<style>
+.required .q-field__label::after {
+  content: ' *';
+  color: red;
+}
+</style>
--- a/src/components/MemberEditAllDialog.vue
+++ b/src/components/MemberEditAllDialog.vue
@@ -25,9 +25,8 @@
          v-model="localMember.lastName"
        ></q-input>
        <q-input
-          class="q-ml-md col-5 required"
+          class="q-ml-md col-5"
          :label="$t('birthday')"
-          :rules="[(val) => !!val || $t('birthdayIsRequired')]"
          filled
          v-model="localMember.birthday"
        ></q-input>
@@ -61,18 +60,25 @@
          filled
          v-model="localMember.email"
        ></q-input>
-        <q-input
+        <q-select
          class="q-ml-md col-5"
          :label="$t('group')"
+          :options="props.group"
          filled
+          emit-value
+          map-options
+          option-value="name"
+          option-label="name"
          v-model="localMember.group"
-        ></q-input>
-        <q-input
+        ></q-select>
+        <q-select
          class="q-ml-md col-5"
          :label="$t('responsible')"
          filled
-          v-model="localMember.responsiblePerson"
-        ></q-input>
+          :options="props.responsibles"
+          :option-label="(opt) => opt.firstName + ' ' + opt.lastName"
+          v-model="localMember.responsible"
+        ></q-select>
        <q-input
          v-if="!newMember"
          class="q-ml-md col-11"
@@ -90,17 +96,19 @@
      </div>
    </q-form>
    <div class="row justify-center">
-      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
    </div>
  </DialogFrame>
 </template>

 <script setup lang="ts">
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
-import { ref } from 'vue';
+import { type PropType, ref } from 'vue';
 import { appApi } from 'src/boot/axios';
 import type { Member } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'src/boot/lang';
+import type { Responsibles } from 'src/vueLib/models/responsible';

 const { NotifyResponse } = useNotify();
 const dialog = ref();
@@ -110,20 +118,18 @@ const localMember = ref<Member>({
  id: 0,
  firstName: '',
  lastName: '',
-  birthday: '',
-  age: '',
-  address: '',
-  town: '',
-  zip: '',
-  phone: '',
-  email: '',
-  group: '',
-  responsiblePerson: '',
-  firstVisit: '',
-  lastVisit: '',
 });

-const emit = defineEmits(['update-member']);
+const props = defineProps({
+  responsibles: {
+    type: Object as PropType<Responsibles>,
+  },
+  group: {
+    type: Array,
+  },
+});
+
+const emit = defineEmits(['update']);

 function open(member: Member | null) {
  if (member === undefined) {
@@ -131,24 +137,13 @@ function open(member: Member | null) {
  }

  if (member !== null) {
-    localMember.value = member;
+    localMember.value = { ...member };
    newMember.value = false;
  } else {
    localMember.value = {
      id: 0,
      firstName: '',
      lastName: '',
-      birthday: '',
-      age: '',
-      address: '',
-      town: '',
-      zip: '',
-      phone: '',
-      email: '',
-      group: '',
-      responsiblePerson: '',
-      firstVisit: '',
-      lastVisit: '',
    };
    newMember.value = true;
  }
@@ -158,18 +153,23 @@ function open(member: Member | null) {

 async function save() {
  const valid = await form.value.validate();
-
-  if (!valid) return;
-
-  let query = 'secure/members/edit?id=' + localMember.value.id;
-  if (newMember.value) {
-    query = 'secure/members/add';
+  if (!valid) {
+    NotifyResponse(i18n.global.t('notAllRequiredFieldsFilled'), 'error');
+    return;
  }

-  appApi
-    .post(query, JSON.stringify(localMember.value))
+  let query = 'members/edit';
+  let payload = JSON.stringify([localMember.value]);
+  if (newMember.value) {
+    query = 'members/add';
+    payload = JSON.stringify(localMember.value);
+  }
+
+  await appApi
+    .post(query, payload)
    .then(() => {
-      emit('update-member');
+      emit('update');
+      NotifyResponse(i18n.global.t('memberUpdated'));
      dialog.value.close();
    })
    .catch((err) => NotifyResponse(err, 'error'));
--- a/src/components/RoleEditAllDialog.vue
+++ b/src/components/RoleEditAllDialog.vue
@@ -2,21 +2,32 @@
  <DialogFrame
    ref="dialog"
    :header-title="newRole ? $t('addNewRole') : 'Edit ' + localRole.role"
-    :height="600"
-    :width="500"
+    :height="700"
+    :width="700"
  >
-    <div class="row justify-center q-gutter-md">
+    <div class="row justify-center">
      <q-input
-        class="q-ml-md col-5 required"
+        v-if="showRoleField"
+        class="q-my-lg col-5 required"
        :label="$t('role')"
        filled
        :rules="[(val) => !!val || $t('roleIsRequired')]"
        v-model="localRole.role"
        autofocus
      ></q-input>
+      <q-card>
+        <q-card-section class="text-h5 text-bold text-primary flex justify-center">{{
+          $t('permissions')
+        }}</q-card-section>
+        <q-separator color="black" />
+        <PermissionsCheckBoxGroup
+          :permissions="localRole.permissions || []"
+          v-on:update="(val) => (localRole.permissions = val)"
+        />
+      </q-card>
    </div>
    <div class="row justify-center">
-      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
    </div>
  </DialogFrame>
 </template>
@@ -27,29 +38,35 @@ import { ref } from 'vue';
 import { appApi } from 'src/boot/axios';
 import type { Role } from 'src/vueLib/models/roles';
 import { useNotify } from 'src/vueLib/general/useNotify';
+import PermissionsCheckBoxGroup from 'src/vueLib/checkboxes/CheckBoxGroupPermissions.vue';
+import { defaultPermissions } from 'src/vueLib/checkboxes/permissions';
+import { i18n } from 'src/boot/lang';

 const { NotifyResponse } = useNotify();
 const dialog = ref();
 const newRole = ref(false);
+const showRoleField = ref(true);
 const localRole = ref<Role>({
  role: '',
-  rights: null,
+  permissions: [],
 });

-const emit = defineEmits(['update-role']);
+const emit = defineEmits(['update']);

-function open(role: Role | null) {
+function open(role: Role | null, typ?: 'permissions') {
  if (role === undefined) {
    return;
  }

+  showRoleField.value = typ !== 'permissions';
  if (role !== null) {
-    localRole.value = role;
+    localRole.value = { ...role };
+    localRole.value.permissions = role.permissions || defaultPermissions;
    newRole.value = false;
  } else {
    localRole.value = {
      role: '',
-      rights: null,
+      permissions: defaultPermissions,
    };
    newRole.value = true;
  }
@@ -58,15 +75,23 @@ function open(role: Role | null) {
 }

 function save() {
-  let query = 'secure/roles/edit?id=' + localRole.value.id;
+  let query = 'roles/update?id=' + localRole.value.id;
+  let update = true;
  if (newRole.value) {
-    query = 'secure/roles/add';
+    query = 'roles/add';
+    update = false;
+    localRole.value.permissions = localRole.value.permissions ?? defaultPermissions;
  }

  appApi
    .post(query, JSON.stringify(localRole.value))
    .then(() => {
-      emit('update-role');
+      if (update) {
+        NotifyResponse(
+          i18n.global.t('role') + " '" + localRole.value.role + "' " + i18n.global.t('updated'),
+        );
+      }
+      emit('update');
      dialog.value.close();
    })
    .catch((err) => NotifyResponse(err, 'error'));
--- a/src/components/UploadDialog.vue
+++ b/src/components/UploadDialog.vue
@@ -4,9 +4,10 @@
      <div class="row">
        <q-uploader
          style="max-width: 300px"
-          :url="`https://0.0.0.0:` + portApp + `/api/members/import/csv`"
+          url="/api/members/import/csv"
          label="Import CSV"
          multiple
+          :with-credentials="true"
          accept=".csv"
          field-name="file"
          method="POST"
@@ -127,7 +128,6 @@ import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
 import { ref, watch } from 'vue';
 import type { MetaData } from 'src/vueLib/models/metaData';
 import { useNotify } from 'src/vueLib/general/useNotify';
-import { portApp } from 'src/boot/axios';

 const dialogHeight = ref(300);
 const dialogWidth = ref(500);
--- a/src/components/UserEditAllDialog.vue
+++ b/src/components/UserEditAllDialog.vue
@@ -5,38 +5,47 @@
    :height="600"
    :width="500"
  >
+    <q-form ref="form">
      <div class="row justify-center q-gutter-md">
        <q-input
-        class="q-ml-md col-5 required"
+          class="col-5 required"
          :label="$t('user')"
          filled
+          :lazy-rules="false"
          :rules="[(val) => !!val || $t('userIsRequired')]"
          v-model="localUser.user"
          autofocus
        ></q-input>
        <q-input
-        class="q-ml-md col-5 required"
+          class="col-5 required"
          :label="$t('email')"
          filled
+          :lazy-rules="false"
          :rules="[(val) => !!val || $t('emailIsRequired')]"
          v-model="localUser.email"
        ></q-input>
-      <q-input
-        class="q-ml-md col-5 required"
+        <EnterNewPassword class="col-5 required" v-model:password="localUser.password!" />
+        <div class="col-5">
+          <q-select
+            class="col-5 required"
            :label="$t('role')"
            filled
+            :options="props.roles"
            :rules="[(val) => !!val || $t('roleIsRequired')]"
-        v-model="localUser.role"
-      ></q-input>
+            v-model="role"
+          ></q-select>
          <q-input
-        class="q-ml-md col-5"
+            class="col-5 q-mt-xl"
            :label="$t('expires')"
            filled
-        v-model="localUser.expires"
+            type="datetime-local"
+            v-model="localUser.expiration"
          ></q-input>
        </div>
+      </div>
+    </q-form>
    <div class="row justify-center">
-      <q-btn class="q-ma-md" color="primary" no-caps @click="save">Save</q-btn>
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
    </div>
  </DialogFrame>
 </template>
@@ -47,50 +56,66 @@ import { ref } from 'vue';
 import { appApi } from 'src/boot/axios';
 import type { User } from 'src/vueLib/models/users';
 import { useNotify } from 'src/vueLib/general/useNotify';
+import { validateQForm } from 'src/vueLib/utils/validation';
+import { i18n } from 'src/boot/lang';
+import { DefaultSettings } from 'src/vueLib/models/settings';
+import EnterNewPassword from 'src/vueLib/login/EnterNewPassword.vue';

 const { NotifyResponse } = useNotify();
 const dialog = ref();
+const form = ref();
 const newUser = ref(false);
+const role = ref('');
 const localUser = ref<User>({
  user: '',
  email: '',
-  role: '',
-  expires: '',
 });

-const emit = defineEmits(['update-user']);
+const props = defineProps({
+  roles: {
+    type: Array,
+    required: true,
+  },
+});

-function open(user: User | null) {
+const emit = defineEmits(['update']);
+
+async function open(user: User | null) {
  if (user === undefined) {
    return;
  }

  if (user !== null) {
-    localUser.value = user;
+    localUser.value = { ...user };
    newUser.value = false;
  } else {
    localUser.value = {
      user: '',
      email: '',
-      role: '',
-      expires: '',
    };
    newUser.value = true;
  }

-  dialog.value?.open();
+  await dialog.value?.open();
+  await validateQForm(form.value);
 }

-function save() {
-  let query = 'secure/users/edit?id=' + localUser.value.id;
+async function save() {
+  if (!(await validateQForm(form.value))) {
+    NotifyResponse(i18n.global.t('notAllRequiredFieldsFilled'), 'error');
+    return;
+  }
+  let query = 'users/edit?id=' + localUser.value.id;
  if (newUser.value) {
-    query = 'secure/users/add';
+    query = 'users/add';
+    localUser.value.settings = DefaultSettings();
  }

+  localUser.value.role = { role: role.value || '', permissions: [] };
  appApi
    .post(query, JSON.stringify(localUser.value))
    .then(() => {
-      emit('update-user');
+      emit('update');
      dialog.value.close();
    })
    .catch((err) => NotifyResponse(err, 'error'));
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -13,7 +13,9 @@
 // Tip: Use the "Theme Builder" on Quasar's documentation website.

 $primary: #1976d2;
+$primary-text: #ffffff;
 $secondary: #26a69a;
+$secondary-text: #ffffff;
 $accent: #9c27b0;

 $dark: #1d1d1d;
@@ -23,3 +25,16 @@ $positive: #21ba45;
 $negative: #c10015;
 $info: #31ccec;
 $warning: #f2c037;
+
+:root {
+  --q-primary-text: #ffffff;
+  --q-secondary-text: #ffffff;
+}
+
+.text-primary-text {
+  color: var(--q-primary-text) !important;
+}
+
+.text-secondary-text {
+  color: var(--q-secondary-text) !important;
+}
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -10,7 +10,7 @@
        />
        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />

-        <q-toolbar-title> {{ productName }} </q-toolbar-title>
+        <q-toolbar-title class="text-primary-text"> {{ $t(appName) }} </q-toolbar-title>

        <div>Version {{ version }}</div>
        <q-btn dense icon="refresh" square class="q-px-md q-ml-md" @click="refresh" />
@@ -18,13 +18,50 @@
      </q-toolbar>
    </q-header>

-    <q-drawer v-model="leftDrawerOpen" bordered>
+    <q-drawer v-model="leftDrawerOpen" bordered :width="drawerWidth" :overlay="$q.screen.lt.sm">
      <q-list>
        <q-item v-if="!autorized" to="/login" exact clickable v-ripple @click="closeDrawer">
          <q-item-section>{{ $t('login') }}</q-item-section>
        </q-item>
-        <q-item v-if="autorized" to="/members" exact clickable v-ripple @click="closeDrawer">
-          <q-item-section>Members</q-item-section>
+        <q-item
+          v-if="autorized || user.isPermittedTo('members', 'read')"
+          to="/members"
+          exact
+          clickable
+          v-ripple
+          @click="closeDrawer"
+        >
+          <q-item-section> {{ $t('members') }}</q-item-section>
+        </q-item>
+        <q-item
+          v-if="autorized || user.isPermittedTo('events', 'read')"
+          to="/events"
+          exact
+          clickable
+          v-ripple
+          @click="closeDrawer"
+        >
+          <q-item-section>{{ $t('events') }}</q-item-section>
+        </q-item>
+        <q-item
+          v-if="autorized || user.isPermittedTo('responsible', 'read')"
+          to="/responsible"
+          exact
+          clickable
+          v-ripple
+          @click="closeDrawer"
+        >
+          <q-item-section>{{ $t('responsible') }}</q-item-section>
+        </q-item>
+        <q-item
+          v-if="autorized || user.isPermittedTo('group', 'read')"
+          to="/group"
+          exact
+          clickable
+          v-ripple
+          @click="closeDrawer"
+        >
+          <q-item-section>{{ $t('groups') }}</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>
@@ -36,16 +73,19 @@

 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { version, productName } from '../../package.json';
+import { version } from '../../package.json';
 import LoginMenu from 'src/vueLib/login/LoginMenu.vue';
 import { useUserStore } from 'src/vueLib/login/userStore';
-import { Logo } from 'src/vueLib/models/logo';
+import { logo, appName } from 'src/vueLib/models/settings';
+import { useQuasar } from 'quasar';

-const localLogo = ref(Logo);
+const localLogo = ref(logo);

 const leftDrawerOpen = ref(false);
 const user = useUserStore();
-const autorized = computed(() => !!user.isAuthorizedAs(['admin']));
+const autorized = computed(
+  () => user.isAuthorizedAs(['admin']) || user.isPermittedTo('settings', 'read'),
+);

 function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
@@ -58,4 +98,10 @@ function closeDrawer() {
 function refresh() {
  window.location.reload();
 }
+
+// Change width based on screen size
+const drawerWidth = computed(() => {
+  const $q = useQuasar();
+  return $q.screen.lt.sm ? 220 : 300; // phone: 220px, desktop: 300px
+});
 </script>
--- a/src/localstorage/localStorage.ts
+++ b/src/localstorage/localStorage.ts
@@ -0,0 +1,93 @@
+import { Dark } from 'quasar';
+import { appName, databaseName, type Settings } from 'src/vueLib/models/settings';
+import { updateOrAddObject } from 'src/vueLib/utils/utils';
+import { ref } from 'vue';
+
+export function setLocalSettings(settings: Settings) {
+  localStorage.setItem('icon', settings.icon);
+  localStorage.setItem('appName', settings.appName);
+  localStorage.setItem('databaseName', settings.databaseName);
+  localStorage.setItem('primaryColor', settings.primaryColor);
+  localStorage.setItem('primaryColorText', settings.primaryColorText);
+  localStorage.setItem('secondaryColor', settings.secondaryColor);
+  localStorage.setItem('secondaryColorText', settings.secondaryColorText);
+}
+
+export function getLocalSettings(): Settings {
+  return <Settings>{
+    icon: localStorage.getItem('icon'),
+    appName: localStorage.getItem('appName') || appName.value,
+    databaseName: localStorage.getItem('databaseName') || databaseName.value,
+    primaryColor: localStorage.getItem('primaryColor'),
+    primaryColorText: localStorage.getItem('primaryColorText'),
+    secondaryColor: localStorage.getItem('secondaryColor'),
+    secondaryColorText: localStorage.getItem('secondaryColorText'),
+  };
+}
+
+export function clearLocalStorage() {
+  localStorage.removeItem('icon');
+  localStorage.removeItem('appName');
+  localStorage.removeItem('databaseName');
+  localStorage.removeItem('primaryColor');
+  localStorage.removeItem('primaryColorText');
+  localStorage.removeItem('secondaryColor');
+  localStorage.removeItem('secondaryColorText');
+  localStorage.removeItem('lastRoute');
+  localStorage.removeItem('mode');
+  localStorage.removeItem('lang');
+}
+
+export function setLocalDarkMode() {
+  localStorage.setItem('mode', String(Dark.mode));
+}
+
+export function getLocalDarkMode(): boolean {
+  return localStorage.getItem('mode') === 'true';
+}
+
+export function setLocalLastRoute(route: string) {
+  localStorage.setItem('lastRoute', route);
+}
+
+export function getLocalLastRoute(): string {
+  return localStorage.getItem('lastRoute') || '/members';
+}
+
+export function setLocalLanguage(language: string) {
+  localStorage.setItem('lang', language);
+}
+
+export function getLocalLanguage(): string | null {
+  return localStorage.getItem('lang');
+}
+
+type pageDefault = {
+  page: string;
+  filteredColumn: string;
+  filteredValue: string[];
+};
+
+type pageDefaults = pageDefault[];
+
+const pageDefaults = ref<pageDefaults>([]);
+
+export function setLocalPageDefaults(
+  page: string,
+  filteredColumn?: string,
+  filteredValue?: string[],
+) {
+  updateOrAddObject(
+    pageDefaults.value,
+    { page: page, filteredColumn: filteredColumn, filteredValue: filteredValue },
+    'page',
+  );
+  localStorage.setItem('pageDefaults', JSON.stringify(pageDefaults.value));
+}
+
+export function getLocalPageDefaults(page: string): pageDefault | null {
+  const defaults = localStorage.getItem('pageDefaults');
+  if (!defaults) return null;
+  pageDefaults.value = JSON.parse(defaults);
+  return pageDefaults.value.find((e) => e.page === page) || null;
+}
--- a/src/pages/EventsTable.vue
+++ b/src/pages/EventsTable.vue
@@ -0,0 +1,11 @@
+<template>
+  <q-page>
+    <SiteTitle :title="$t('events')" />
+    <EventsTable />
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
+import EventsTable from 'src/vueLib/tables/events/EventsTable.vue';
+</script>
--- a/src/pages/GroupTable.vue
+++ b/src/pages/GroupTable.vue
@@ -0,0 +1,11 @@
+<template>
+  <q-page>
+    <SiteTitle :title="$t('groups')" />
+    <GroupTable />
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
+import GroupTable from 'src/vueLib/tables/group/GroupTable.vue';
+</script>
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -5,20 +5,23 @@
 </template>

 <script setup lang="ts">
+import { getLocalLastRoute } from 'src/localstorage/localStorage';
 import LoginForm from 'src/vueLib/login/LoginForm.vue';
 import { useUserStore } from 'src/vueLib/login/userStore';
-import { onMounted } from 'vue';
+import { nextTick, onMounted } from 'vue';
 import { useRouter } from 'vue-router';

 const router = useRouter();
 const userStore = useUserStore();

 onMounted(() => {
-  const user = userStore.getUser();
-  if (user?.username !== '' && user?.role !== '') {
+  if (userStore.user?.username !== '' && userStore.user?.role.role !== '') {
    forwardToPage().catch((err) => console.error(err));
  }
 });

-const forwardToPage = () => router.push('/members');
+const forwardToPage = async () => {
+  await nextTick();
+  await router.push(getLocalLastRoute());
+};
 </script>
--- a/src/pages/MembersTable.vue
+++ b/src/pages/MembersTable.vue
@@ -1,34 +1,13 @@
 <template>
  <q-page>
+    <SiteTitle :title="$t('members')" />
+    <div class="q-pa-md">
      <MembersTable />
-    <DialogFrame ref="dialog" header-title="Test Frame">
-      <MembersTable ref="memberDialog" />
-      <q-btn @click="getSelection">Get Selected</q-btn>
-    </DialogFrame>
-    <DialogFrame ref="uploadDialog" header-title="Test Frame">
-      <MembersTable ref="memberDialog" />
-      <q-btn @click="getSelection">Get Selected</q-btn>
-    </DialogFrame>
-    <div class="row">
-      <q-btn @click="open">Click Me</q-btn>
    </div>
  </q-page>
 </template>

 <script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
 import MembersTable from 'src/vueLib/tables/members/MembersTable.vue';
-import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
-import { ref } from 'vue';
-import type { MemberDialog } from 'src/vueLib/tables/members/MembersTable.vue';
-
-const dialog = ref();
-const memberDialog = ref<MemberDialog>();
-
-const open = () => dialog.value?.open();
-
-function getSelection() {
-  const selected = memberDialog.value?.getSelected();
-  if (selected === undefined) return;
-  console.log(65, selected[0]?.id);
-}
 </script>
--- a/src/pages/ResponsibleTable.vue
+++ b/src/pages/ResponsibleTable.vue
@@ -0,0 +1,11 @@
+<template>
+  <q-page>
+    <SiteTitle :title="$t('responsibles')" />
+    <ResponsibleTable />
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
+import ResponsibleTable from 'src/vueLib/tables/responsible/ResponsibleTable.vue';
+</script>
--- a/src/pages/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -1,13 +1,25 @@
 <template>
+  <SiteTitle :title="$t('userSettings')" />
  <div class="text-h2 flex flex-center">
    <q-card class="q-gutter-md">
-      <p class="text-center text-bold text-h3 text-primary q-pt-md">{{ $t('settings') }}</p>
-
      <div>
        <q-card class="q-ma-lg">
          <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('general') }}</p>
          <div class="row">
            <q-input
+              :readonly="!user.isPermittedTo('settings', 'write')"
+              :class="[
+                colorGroup ? 'col-md-4' : 'col-md-3',
+                colorGroup ? 'col-md-6' : 'col-md-6',
+                colorGroup ? 'col-md-4' : 'col-md-12',
+                'q-pa-md',
+              ]"
+              filled
+              :label="$t('appName')"
+              v-model="settings.appName"
+            ></q-input>
+            <q-input
+              :readonly="!user.isPermittedTo('settings', 'write')"
              :class="[
                colorGroup ? 'col-md-4' : 'col-md-3',
                colorGroup ? 'col-md-6' : 'col-md-6',
@@ -24,6 +36,7 @@
          <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('database') }}</p>
          <div class="row">
            <q-input
+              :readonly="!user.isPermittedTo('settings', 'write')"
              :class="[
                colorGroup ? 'col-md-4' : 'col-md-3',
                colorGroup ? 'col-md-6' : 'col-md-6',
@@ -52,18 +65,72 @@
            <div class="row">
              <div class="col-12 col-sm-6 col-md-3 q-px-md">
                <p class="text-center text-bold text-h6 text-primary">{{ $t('primaryColor') }}</p>
-                <q-color bordered class="q-mx-md" v-model="settings.primaryColor"></q-color>
+                <q-color
+                  :disable="!user.isPermittedTo('settings', 'write')"
+                  bordered
+                  class="q-mx-md"
+                  v-model="settings.primaryColor"
+                ></q-color>
+              </div>
+              <div class="col-12 col-sm-6 col-md-3 q-px-md">
+                <p
+                  :class="[
+                    'text-center',
+                    'text-bold',
+                    'text-h6',
+                    'text-primary-text',
+                    settings.primaryColorText === '#ffffff' ? 'bg-black' : '',
+                  ]"
+                  :style="settings.primaryColorText === '#ffffff' ? 'opacity: 0.2;' : ''"
+                >
+                  {{ $t('primaryColorText') }}
+                </p>
+                <q-color
+                  :disable="!user.isPermittedTo('settings', 'write')"
+                  bordered
+                  class="q-mx-md"
+                  v-model="settings.primaryColorText"
+                ></q-color>
              </div>
              <div class="col-12 col-sm-6 col-md-3 q-px-md">
                <p class="text-center text-bold text-h6 text-secondary">
                  {{ $t('secondaryColor') }}
                </p>
-                <q-color class="q-mx-md" v-model="settings.secondaryColor"></q-color>
+                <q-color
+                  :disable="!user.isPermittedTo('settings', 'write')"
+                  class="q-mx-md"
+                  v-model="settings.secondaryColor"
+                ></q-color>
+              </div>
+              <div class="col-12 col-sm-6 col-md-3 q-px-md">
+                <p
+                  :class="[
+                    'text-center',
+                    'text-bold',
+                    'text-h6',
+                    'text-secondary-text',
+                    settings.secondaryColorText === '#ffffff' ? 'bg-black' : '',
+                  ]"
+                  :style="settings.secondaryColorText === '#ffffff' ? 'opacity: 0.2;' : ''"
+                >
+                  {{ $t('secondaryColorText') }}
+                </p>
+                <q-color
+                  :disable="!user.isPermittedTo('settings', 'write')"
+                  class="q-mx-md"
+                  v-model="settings.secondaryColorText"
+                ></q-color>
              </div>
            </div>
-            <q-btn class="q-my-md q-mx-md" color="secondary" dense no-caps @click="resetColors">{{
-              $t('resetColors')
-            }}</q-btn>
+            <q-btn
+              :disable="!user.isPermittedTo('settings', 'write')"
+              class="q-my-md q-mx-md"
+              color="secondary"
+              dense
+              no-caps
+              @click="resetColors"
+              >{{ $t('resetColors') }}</q-btn
+            >
          </div>
        </q-card>
        <div class="row justify-end">
@@ -77,44 +144,62 @@
 </template>

 <script setup lang="ts">
-import { databaseName } from 'src/vueLib/tables/members/MembersTable';
-import { Logo } from 'src/vueLib/models/logo';
+import { logo, appName, databaseName } from 'src/vueLib/models/settings';
 import { reactive, ref, watch } from 'vue';
 import { appApi } from 'src/boot/axios';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { type Settings } from 'src/vueLib/models/settings';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { setLocalSettings } from 'src/localstorage/localStorage';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';

 const { NotifyResponse } = useNotify();
 const colorGroup = ref(false);
+const user = useUserStore();

 const settings = reactive<Settings>({
-  icon: Logo.value,
+  appName: appName.value,
+  icon: logo.value,
  databaseName: databaseName.value,
  primaryColor: document.documentElement.style.getPropertyValue('--q-primary'),
+  primaryColorText: document.documentElement.style.getPropertyValue('--q-primary-text'),
  secondaryColor: document.documentElement.style.getPropertyValue('--q-secondary'),
+  secondaryColorText: document.documentElement.style.getPropertyValue('--q-secondary-text'),
 });

 watch(settings, (newSettings) => {
-  Logo.value = newSettings.icon;
+  logo.value = newSettings.icon;
+  appName.value = newSettings.appName;
  databaseName.value = newSettings.databaseName;
 });

 function resetColors() {
  document.documentElement.style.setProperty('--q-primary', '#1976d2');
+  settings.primaryColor = '#1976d2';
+  document.documentElement.style.setProperty('--q-primary-text', '#ffffff');
+  settings.primaryColorText = '#ffffff';
  document.documentElement.style.setProperty('--q-secondary', '#26a69a');
+  settings.secondaryColor = '#26a69a';
+  document.documentElement.style.setProperty('--q-secondary-text', '#ffffff');
+  settings.secondaryColorText = '#ffffff';
 }

 function save() {
  document.documentElement.style.setProperty('--q-primary', settings.primaryColor);
+  document.documentElement.style.setProperty('--q-primary-text', settings.primaryColorText);
  document.documentElement.style.setProperty('--q-secondary', settings.secondaryColor);
-  Logo.value = settings.icon;
-  localStorage.setItem('icon', settings.icon);
-  localStorage.setItem('databaseName', settings.databaseName);
-  localStorage.setItem('primaryColor', settings.primaryColor);
-  localStorage.setItem('secondaryColor', settings.secondaryColor);
+  document.documentElement.style.setProperty('--q-secondary-text', settings.secondaryColorText);
+  appName.value = settings.appName;
+  logo.value = settings.icon;
+  setLocalSettings(settings);

+  const tempuser = user.user;
+
+  if (tempuser) {
+    tempuser.settings = settings;
+  }
  appApi
-    .post('secure/settings/update', { user: 'admin', settings })
+    .post('users/update', tempuser)
    .then((resp) => NotifyResponse(resp.data.message))
    .catch((err) => NotifyResponse(err, 'error'));
 }
--- a/src/pages/UserSettings.vue
+++ b/src/pages/UserSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-md">
+  <SiteTitle :title="$t('userSettings')" />
  <div class="q-gutter-y-md">
    <q-card>
      <q-tabs
@@ -17,22 +17,22 @@
      <q-separator />

      <q-tab-panels v-model="tab" animated>
-          <q-tab-panel name="users">
+        <q-tab-panel name="users" style="padding: 0px">
          <UserTable />
        </q-tab-panel>
-          <q-tab-panel name="roles">
+        <q-tab-panel name="roles" style="padding: 0px">
          <RoleTable />
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </div>
-  </div>
 </template>

 <script setup lang="ts">
 import { ref } from 'vue';
 import UserTable from 'src/vueLib/tables/users/UserTable.vue';
 import RoleTable from 'src/vueLib/tables/roles/RoleTable.vue';
+import SiteTitle from 'src/vueLib/general/SiteTitle.vue';

 const tab = ref('users');
 </script>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -36,13 +36,13 @@ export default defineRouter(function (/* { store, ssrContext } */) {

  Router.beforeEach((to, from, next) => {
    const userStore = useUserStore();
-
    const isLoggedIn = userStore.isAuthenticated;
-    const isAdmin = userStore.user?.role === 'admin';
-
    if (to.meta.requiresAuth && !isLoggedIn) {
      next('/login');
-    } else if (to.meta.requiresAdmin && !isAdmin) {
+    } else if (
+      to.meta.requiresAdmin &&
+      !userStore.isPermittedTo(to.path.replace('/', ''), 'read')
+    ) {
      next('/');
    } else {
      next();
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -10,21 +10,36 @@ const routes: RouteRecordRaw[] = [
        component: () => import('pages/LoginPage.vue'),
      },
      {
-        path: '/login',
+        path: 'login',
        component: () => import('pages/LoginPage.vue'),
      },
      {
-        path: '/members',
+        path: 'members',
        component: () => import('pages/MembersTable.vue'),
        meta: { requiresAuth: true, requiresAdmin: true },
      },
      {
-        path: '/settings',
+        path: 'events',
+        component: () => import('pages/EventsTable.vue'),
+        meta: { requiresAuth: true, requiresAdmin: true },
+      },
+      {
+        path: 'responsible',
+        component: () => import('src/pages/ResponsibleTable.vue'),
+        meta: { requiresAuth: true, requiresAdmin: true },
+      },
+      {
+        path: 'group',
+        component: () => import('src/pages/GroupTable.vue'),
+        meta: { requiresAuth: true, requiresAdmin: true },
+      },
+      {
+        path: 'settings',
        component: () => import('pages/SettingsPage.vue'),
        meta: { requiresAuth: true, requiresAdmin: true },
      },
      {
-        path: '/usersSettings',
+        path: 'userSettings',
        component: () => import('pages/UserSettings.vue'),
        meta: { requiresAuth: true, requiresAdmin: true },
      },
--- a/src/vueLib/checkboxes/CheckBoxGroupPermissions.vue
+++ b/src/vueLib/checkboxes/CheckBoxGroupPermissions.vue
@@ -0,0 +1,82 @@
+<template>
+  <q-card>
+    <q-card bordered v-for="(permission, index) in localPermission" v-bind:key="index">
+      <q-card-section class="text-center">
+        <div class="text-h7 text-bold text-primary">{{ $t(permission.name) }}</div>
+      </q-card-section>
+      <q-separator></q-separator>
+      <div class="flex justify-center">
+        <q-checkbox
+          class="q-mx-md"
+          :model-value="isFlagSet(permission.permission, 1 << 0)"
+          @update:model-value="(val) => toggleBit(index, 0, val)"
+          >{{ i18n.global.t('read') }}</q-checkbox
+        >
+        <q-checkbox
+          class="q-mx-md"
+          :model-value="isFlagSet(permission.permission, 1 << 1)"
+          @update:model-value="(val) => toggleBit(index, 1, val)"
+          >{{ i18n.global.t('write') }}</q-checkbox
+        >
+        <q-checkbox
+          class="q-mx-md"
+          :model-value="isFlagSet(permission.permission, 1 << 2)"
+          @update:model-value="(val) => toggleBit(index, 2, val)"
+          >{{ i18n.global.t('delete') }}</q-checkbox
+        >
+        <q-checkbox
+          v-if="permission.permissionNumber > 3"
+          class="q-mx-md"
+          :model-value="isFlagSet(permission.permission, 1 << 3)"
+          @update:model-value="(val) => toggleBit(index, 3, val)"
+          >{{ i18n.global.t('import') }}</q-checkbox
+        >
+        <q-checkbox
+          v-if="permission.permissionNumber > 4"
+          class="q-mx-md"
+          :model-value="isFlagSet(permission.permission, 1 << 4)"
+          @update:model-value="(val) => toggleBit(index, 4, val)"
+          >{{ i18n.global.t('export') }}</q-checkbox
+        >
+      </div>
+    </q-card>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { ref, type PropType } from 'vue';
+import type { Permissions } from './permissions';
+import { i18n } from 'src/boot/lang';
+
+const props = defineProps({
+  permissions: {
+    type: Object as PropType<Permissions>,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update']);
+
+const localPermission = ref(
+  props.permissions.map((e) => ({
+    name: e.name,
+    permission: e.permission ?? 0,
+    permissionNumber: e.name === 'members' ? 5 : 3,
+  })),
+);
+
+function isFlagSet(mask: number, flag: number) {
+  return (mask & flag) !== 0;
+}
+
+function toggleBit(index: number, bit: number, value: boolean) {
+  const item = localPermission.value[index];
+  if (!item) return; // guard against undefined index
+
+  const mask = 1 << bit;
+  const current = item.permission ?? 0;
+
+  item.permission = value ? current | mask : current & ~mask;
+  emit('update', localPermission.value);
+}
+</script>
--- a/src/vueLib/checkboxes/permissions.ts
+++ b/src/vueLib/checkboxes/permissions.ts
@@ -0,0 +1,50 @@
+import { i18n } from 'src/boot/lang';
+import { ref } from 'vue';
+
+export interface Permission {
+  name: string;
+  label: string;
+  permission: number;
+}
+
+export type Permissions = Permission[];
+
+export const defaultPermissions = [
+  {
+    name: 'settings',
+    label: i18n.global.t('settings'),
+    permission: 0,
+  },
+  {
+    name: 'userSettings',
+    label: i18n.global.t('userSettings'),
+    permission: 0,
+  },
+  {
+    name: 'members',
+    label: i18n.global.t('members'),
+    permission: 0,
+  },
+  {
+    name: 'events',
+    label: i18n.global.t('events'),
+    permission: 0,
+  },
+  {
+    name: 'responsible',
+    label: i18n.global.t('responsible'),
+    permission: 0,
+  },
+  {
+    name: 'group',
+    label: i18n.global.t('group'),
+    permission: 0,
+  },
+  {
+    name: 'excursionTable',
+    label: i18n.global.t('excursionTable'),
+    permission: 0,
+  },
+];
+
+export const permissions = ref<Permissions>(defaultPermissions);
--- a/src/vueLib/db/db.ts
+++ b/src/vueLib/db/db.ts
@@ -1,49 +0,0 @@
-import { CapacitorSQLite, SQLiteConnection } from '@capacitor-community/sqlite';
-import type { Settings } from '../models/settings';
-
-const sqlite = new SQLiteConnection(CapacitorSQLite);
-
-export async function initDB() {
-  const db = await sqlite.createConnection('membersDB', true, 'secreto_passwordo', 1, false);
-  await db.open();
-  await db.execute(`CREATE TABLE IF NOT EXISTS users (
-						id INTEGER PRIMARY KEY AUTOINCREMENT,
-						username TEXT NOT NULL,
-						role TEXT NOT NULL,
-						password TEXT NOT NULL,
-						settings TEXT NOT NULL
-						);`);
-
-  const result = await db.query(`SELECT * FROM users WHERE username = ?`, ['admin']);
-  if (result.values?.length === 0) {
-    await db.run(`INSERT INTO users (username, role, password, settings) VALUES (?, ?, ?, ?)`, [
-      'admin',
-      'admin',
-      'tecamino@2023',
-      {},
-    ]);
-  }
-  return db;
-}
-
-export async function addUser(user: string, role: string, password: string, settings: Settings) {
-  const db = await initDB();
-  await db.run(`INSERT INTO users (username, role, password, settings) VALUES (?, ?, ?, ?)`, [
-    user,
-    role,
-    password,
-    settings,
-  ]);
-}
-
-export async function getUsers() {
-  const db = await initDB();
-  const resp = await db.query(`SELECT * FROM users`);
-  return resp.values;
-}
-
-export async function getUser(user: string) {
-  const db = await initDB();
-  const resp = await db.query(`SELECT EXISTS(SELECT 1 FROM users WHERE username = ?)`, [user]);
-  return resp.values;
-}
--- a/src/vueLib/dialog/DialogFrame.vue
+++ b/src/vueLib/dialog/DialogFrame.vue
@@ -7,10 +7,10 @@
    :no-refocus="!minMaxState"
    :seamless="!minMaxState"
  >
-    <q-card class="layout" :style="cardStyle">
+    <q-card class="layout bg-surface text-on-surface" :style="cardStyle">
      <!-- Draggable Header -->
      <div
-        class="dialog-header row items-center justify-between bg-grey-1"
+        class="dialog-header row items-center justify-between bg-transparent"
        v-touch-pan.mouse.prevent.stop="handlePan"
      >
        <div v-if="headerTitle" class="text-left text-bold text-caption q-mx-sm">
@@ -25,7 +25,7 @@
      <q-separator color="black" />

      <!-- Content Slot -->
-      <div class="scrollArea">
+      <div class="scrollArea" :style="'padding: ' + props.innerPadding + 'px'">
        <slot />
      </div>

@@ -48,6 +48,7 @@ const props = defineProps({
  headerTitle: { type: String, default: '' },
  width: { type: Number, default: 400 },
  height: { type: Number, default: 250 },
+  innerPadding: { type: Number, default: 16 },
 });

 // Fullscreen toggle
@@ -139,13 +140,11 @@ const cardStyle = computed(() => {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
-  background-color: white;
 }

 /* Draggable header */
 .dialog-header {
  padding: 8px 0;
-  background: #f5f5f5;
  cursor: move;
  user-select: none;
 }
@@ -155,7 +154,6 @@ const cardStyle = computed(() => {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
-  padding: 16px;
 }

 /* Resize handle in bottom right */
--- a/src/vueLib/general/SearchableSelect
+++ b/src/vueLib/general/SearchableSelect
@@ -0,0 +1,115 @@
+<template>
+  <q-select
+    ref="selectRef"
+    v-model="modelValueLocal"
+    :options="filteredOptions"
+    :option-label="optionLabel"
+    :option-value="optionValue"
+    :use-input="search"
+    input-debounce="200"
+    @filter="filterFn"
+    @update:model-value="emitValue"
+    v-bind="$attrs"
+    ><template v-slot:append
+      ><q-btn
+        size="xs"
+        flat
+        dense
+        round
+        icon="search"
+        :color="search ? 'primary' : 'grey'"
+        @click="searchBox"
+      >
+      </q-btn
+    ></template>
+  </q-select>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, string | number | object>">
+import type { PropType } from 'vue';
+import { ref, watch } from 'vue';
+
+const search = ref(false);
+const selectRef = ref();
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number, Object] as PropType<string | number | object | null>,
+    default: null,
+  },
+  options: {
+    type: Array as PropType<T[]>,
+    required: true,
+  },
+  optionLabel: {
+    type: [Function, String] as PropType<((option: T) => string) | string | undefined>,
+    required: true,
+  },
+  optionValue: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | null): void;
+}>();
+
+const optionLabel = props.optionLabel;
+const optionValue = props.optionValue;
+
+const modelValueLocal = ref<string | number | object | null | undefined>(props.modelValue);
+const filteredOptions = ref<T[]>([...(props.options || [])]);
+
+function searchBox() {
+  if (search.value) {
+    selectRef.value.updateInputValue('');
+  }
+  search.value = !search.value;
+}
+
+watch(
+  () => props.modelValue,
+  (v) => (modelValueLocal.value = v),
+);
+watch(
+  () => props.options,
+  (o) => (filteredOptions.value = [...o]),
+);
+
+function filterFn(val: string, update: (fn: () => void) => void) {
+  update(() => {
+    if (!val) {
+      filteredOptions.value = [...props.options];
+      return;
+    }
+    const needle = val.toLowerCase();
+    filteredOptions.value = props.options.filter((opt) => {
+      let field = null;
+      if (typeof optionLabel === 'function') {
+        field = optionLabel(opt);
+      } else {
+        field = opt[String(optionLabel)];
+      }
+
+      if (typeof field !== 'string' && typeof field !== 'number') return false;
+      return String(field).toLowerCase().includes(needle);
+    });
+
+    // Remove duplicates by optionValue
+    const seen = new Set();
+    filteredOptions.value = filteredOptions.value.filter((opt) => {
+      const value = opt[optionValue];
+      if (seen.has(value)) return false;
+      seen.add(value);
+      return true;
+    });
+  });
+}
+
+function emitValue(val: string | number | null) {
+  emit('update:modelValue', val);
+}
+</script>
--- a/src/vueLib/general/SiteTitle.vue
+++ b/src/vueLib/general/SiteTitle.vue
@@ -0,0 +1,12 @@
+<template>
+  <h4 class="text-primary text-bold text-center" :style="{ margin: props.marging + 'px' }">
+    {{ props.title }}
+  </h4>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  title: { type: String },
+  marging: { type: Number, default: 28 },
+});
+</script>
--- a/src/vueLib/general/useNotify.ts
+++ b/src/vueLib/general/useNotify.ts
@@ -48,9 +48,20 @@ export function useNotify() {
      $q?.notify({
        message: message,
        color: color,
-        position: 'bottom-right',
+        position: 'top',
        icon: icon,
        timeout: timeout,
+        actions: [
+          {
+            icon: 'close',
+            color: 'white',
+            dense: true,
+            round: true,
+            handler: () => {
+              /* just closes */
+            },
+          },
+        ],
      });
    }
  }
--- a/src/vueLib/login/ChangePassword.vue
+++ b/src/vueLib/login/ChangePassword.vue
@@ -0,0 +1,85 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="$t('changePassword') + ' ' + $t('user') + ' ' + localUser.user"
+    :height="510"
+    :width="500"
+    :inner-padding="48"
+  >
+    <q-form ref="form">
+      <div class="row justify-center q-gutter-md">
+        <q-input
+          class="col-6 required"
+          filled
+          autocomplete="current-password"
+          :type="showPassword ? 'text' : 'password'"
+          :label="$t('currentPassword')"
+          v-model="localUser.password"
+          :rules="[(val) => !!val || $t('currentPassword') + ' ' + $t('isRequired')]"
+        >
+          <template #append>
+            <q-btn
+              flat
+              dense
+              :icon="showPassword ? 'visibility_off' : 'visibility'"
+              @mousedown.prevent="showPassword = true"
+              @mouseup.prevent="showPassword = false"
+              @mouseleave.prevent="showPassword = false"
+              @touchstart.prevent="showPassword = true"
+              @touchend.prevent="showPassword = false"
+              @touchcancel.prevent="showPassword = false"
+            ></q-btn>
+          </template>
+        </q-input>
+        <div class="col-6">
+          <EnterNewPassword v-model:password="localUser.newPassword!" />
+        </div>
+      </div>
+    </q-form>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">{{ $t('save') }}</q-btn>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DialogFrame from '../dialog/DialogFrame.vue';
+import type { User } from 'src/vueLib/models/users';
+import { i18n } from 'src/boot/lang';
+import { useNotify } from '../general/useNotify';
+import { validateQForm } from '../utils/validation';
+import EnterNewPassword from './EnterNewPassword.vue';
+
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const showPassword = ref(false);
+const form = ref();
+const localUser = ref<User>({
+  user: '',
+  email: '',
+});
+
+const open = (user: User) => {
+  localUser.value = user;
+  localUser.value.password = '';
+  localUser.value.newPassword = '';
+  dialog.value?.open();
+};
+
+const close = () => {
+  dialog.value?.close();
+};
+
+const emit = defineEmits(['update:password']);
+
+async function save() {
+  if (!(await validateQForm(form.value))) {
+    NotifyResponse(i18n.global.t('notAllRequiredFieldsFilled'), 'error');
+    return;
+  }
+  emit('update:password', localUser.value);
+}
+
+defineExpose({ open, close });
+</script>
--- a/src/vueLib/login/EnterNewPassword.vue
+++ b/src/vueLib/login/EnterNewPassword.vue
@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <q-input
+      class="col-5 required"
+      :label="$t('password')"
+      autocomplete="new-password"
+      filled
+      :lazy-rules="false"
+      :rules="[validatePassword]"
+      v-model="password"
+      @update:model-value="checkStrength"
+      :type="showPassword1 ? 'text' : 'password'"
+    >
+      <template v-slot:append>
+        <q-btn
+          flat
+          dense
+          :icon="showPassword1 ? 'visibility_off' : 'visibility'"
+          @mousedown.prevent="showPassword1 = true"
+          @mouseup.prevent="showPassword1 = false"
+          @mouseleave.prevent="showPassword1 = false"
+          @touchstart.prevent="showPassword1 = true"
+          @touchend.prevent="showPassword1 = false"
+          @touchcancel.prevent="showPassword1 = false"
+        ></q-btn>
+        <q-icon :name="strengthIcon" :color="strengthColor"></q-icon>
+      </template>
+    </q-input>
+
+    <div class="q-mt-md q-px-xl">
+      <q-linear-progress :value="strengthValue" :color="strengthColor" size="8px" rounded />
+      <div class="text-caption text-center q-mt-xs">
+        {{ strengthLabel }}
+      </div>
+    </div>
+    <q-input
+      ref="pwdForm2"
+      class="col-5 required"
+      :label="$t('password')"
+      autocomplete="new-password"
+      filled
+      :type="showPassword2 ? 'text' : 'password'"
+      :rules="[checkSamePassword]"
+      v-model="passwordCheck"
+    >
+      <template v-slot:append>
+        <q-btn
+          flat
+          dense
+          :icon="showPassword2 ? 'visibility_off' : 'visibility'"
+          @mousedown.prevent="showPassword2 = true"
+          @mouseup.prevent="showPassword2 = false"
+          @mouseleave.prevent="showPassword2 = false"
+          @touchstart.prevent="showPassword2 = true"
+          @touchend.prevent="showPassword2 = false"
+          @touchcancel.prevent="showPassword2 = false"
+        ></q-btn>
+      </template>
+    </q-input>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import zxcvbn from 'zxcvbn';
+import { i18n } from 'src/boot/lang';
+
+const props = defineProps({
+  password: { type: String },
+});
+
+const emit = defineEmits(['update:password']);
+
+const pwdForm2 = ref();
+const showPassword1 = ref(false);
+const showPassword2 = ref(false);
+const passwordCheck = ref('');
+const strengthValue = ref(0);
+const strengthLabel = ref('Enter a password');
+const strengthColor = ref('grey');
+const strengthIcon = ref('lock');
+
+function checkStrength() {
+  const result = zxcvbn(password.value || '');
+  strengthValue.value = (result.score + 1) / 5;
+  const levels = [
+    i18n.global.t('veryWeak'),
+    i18n.global.t('weak'),
+    i18n.global.t('fair'),
+    i18n.global.t('good'),
+    i18n.global.t('strong'),
+  ];
+  const colors = ['red', 'orange', 'yellow', 'light-green', 'green'];
+  const icon = ['lock', 'warning', 'error_outline', 'check_circle_outline', 'verified_user'];
+
+  strengthLabel.value = levels[result.score] || i18n.global.t('veryWeak');
+  strengthColor.value = colors[result.score] || 'grey';
+  strengthIcon.value = icon[result.score] || 'lock';
+}
+
+function validatePassword(): string | boolean {
+  pwdForm2.value?.validate();
+
+  if (!password.value) return i18n.global.t('passwordIsRequired');
+
+  if (password.value.length < 8) {
+    return i18n.global.t('passwordTooShort');
+  } else if (!/[A-Z]/.test(password.value)) {
+    return i18n.global.t('passwordNeedsUppercase');
+  } else if (!/[a-z]/.test(password.value)) {
+    return i18n.global.t('passwordNeedsLowercase');
+  } else if (!/[0-9]/.test(password.value)) {
+    return i18n.global.t('passwordNeedsNumber');
+  } else if (!/[!@#$%^&*(),.?":{}|<>]/.test(password.value)) {
+    return i18n.global.t('passwordNeedsSpecial');
+  }
+
+  return true;
+}
+
+function checkSamePassword(): string | boolean {
+  if (password.value === passwordCheck.value) return true;
+  return i18n.global.t('passwordDoNotMatch');
+}
+
+const password = computed({
+  get: () => props.password,
+  set: (v) => emit('update:password', v),
+});
+</script>
--- a/src/vueLib/login/LoginForm.vue
+++ b/src/vueLib/login/LoginForm.vue
@@ -3,11 +3,12 @@
  <q-form ref="refForm">
    <q-item-section class="q-gutter-md q-pa-md">
      <q-card :class="['q-gutter-xs q-items-center q-pa-lg', { shake: shake }]">
-        <div class="text-h5 text-primary text-center">{{ productName }}</div>
+        <div class="text-h5 text-primary text-center">{{ $t(appName) }}</div>
        <q-input
          ref="refUserInput"
          dense
          filled
+          autocomplete="username"
          type="text"
          :label="$t('user')"
          v-model="user"
@@ -16,6 +17,7 @@
        <q-input
          dense
          filled
+          autocomplete="current-password"
          :type="showPassword ? 'text' : 'password'"
          :label="$t('password')"
          v-model="password"
@@ -27,14 +29,17 @@
              flat
              dense
              :icon="showPassword ? 'visibility_off' : 'visibility'"
-              @mousedown.left="showPassword = true"
-              @mouseup.left="showPassword = false"
-              @mouseleave="showPassword = false"
+              @mousedown.prevent="showPassword = true"
+              @mouseup.prevent="showPassword = false"
+              @mouseleave.prevent="showPassword = false"
+              @touchstart.prevent="showPassword = true"
+              @touchend.prevent="showPassword = false"
+              @touchcancel.prevent="showPassword = false"
            ></q-btn>
          </template>
        </q-input>
        <div class="q-pt-sm q-mr-md row justify-end">
-          <q-btn color="primary" :label="$t('login')" @click="onSubmit"></q-btn>
+          <q-btn no-caps color="primary" :label="$t('login')" @click="onSubmit"></q-btn>
        </div>
      </q-card>
    </q-item-section>
@@ -42,7 +47,7 @@
 </template>

 <script setup lang="ts">
-import { productName } from '../../../package.json';
+import { appName } from '../models/settings';
 import { ref } from 'vue';
 import { useNotify } from '../general/useNotify';
 import { useLogin } from './useLogin';
@@ -59,13 +64,15 @@ const { login } = useLogin();

 const emit = defineEmits(['update-close']);

-const onSubmit = () => {
-  refForm.value?.validate().then((success: boolean) => {
-    if (success) {
-      login(user.value, password.value)
+const onSubmit = async () => {
+  const valid = refForm.value?.validate();
+  if (!valid) {
+    NotifyResponse('error submitting login form', 'error');
+    return;
+  }
+  await login(user.value, password.value)
    .then(() => {
      NotifyResponse("logged in as '" + user.value + "'");
-          emit('update-close');
    })
    .catch((err) => {
      NotifyResponse(err, 'error');
@@ -74,10 +81,7 @@ const onSubmit = () => {
        shake.value = false;
      }, 500);
    });
-    } else {
-      NotifyResponse('error submitting login form', 'error');
-    }
-  });
+  emit('update-close');
 };
 </script>

--- a/src/vueLib/login/LoginMenu.vue
+++ b/src/vueLib/login/LoginMenu.vue
@@ -3,12 +3,15 @@
    <q-btn dense flat round icon="person" :color="currentUser ? 'green' : ''">
      <q-menu ref="refLoginMenu">
        <q-list style="min-width: 120px">
-          <q-item v-if="userLogin.getUser()" class="text-primary">{{
-            currentUser?.username
-          }}</q-item>
+          <q-item v-if="user.user" class="text-primary">{{ currentUser?.username }}</q-item>
          <q-item v-if="showLogin" clickable v-close-popup @click="openLogin">
            <q-item-section class="text-primary">{{ loginText }}</q-item-section>
          </q-item>
+          <q-item>
+            <q-btn flat :icon="darkMode" @click="toggleDarkMode"
+              ><q-tooltip>{{ $t(darkMode) }}</q-tooltip></q-btn
+            >
+          </q-item>
          <q-item>
            <q-select
              :label="$t('language')"
@@ -17,13 +20,23 @@
              dense
              v-model="langSelected"
              :options="langSelection"
-            ></q-select>
+              ><q-tooltip>{{ $t('language') }}</q-tooltip></q-select
+            >
          </q-item>
-          <q-item v-if="autorized">
+          <q-item
+            v-if="
+              (autorized || user.isPermittedTo('settings', 'read')) && route.path !== '/settings'
+            "
+          >
            <q-btn flat color="secondary" icon="settings" to="/settings"></q-btn>
          </q-item>
-          <q-item v-if="autorized">
-            <q-btn flat color="secondary" icon="group" to="/usersSettings"></q-btn>
+          <q-item
+            v-if="
+              (autorized || user.isPermittedTo('userSettings', 'read')) &&
+              route.path !== '/userSettings'
+            "
+          >
+            <q-btn flat color="secondary" icon="group" to="/userSettings"></q-btn>
          </q-item>
        </q-list>
      </q-menu>
@@ -35,29 +48,44 @@
 <script setup lang="ts">
 import LoginDialog from './LoginDialog.vue';
 import { computed, ref, watch } from 'vue';
-import { useLogin } from './useLogin';
 import { useNotify } from '../general/useNotify';
 import { lang, i18n } from 'src/boot/lang';
 import { useUserStore } from './userStore';
 import { useRoute } from 'vue-router';
+import { Dark } from 'quasar';
+import { useLogin } from './useLogin';
+import { setLocalDarkMode, setLocalLanguage } from 'src/localstorage/localStorage';

+const userLogin = useLogin();
 const route = useRoute();
+const refLoginDialog = ref();
+const user = useUserStore();
+const { NotifyResponse } = useNotify();
+const currentUser = computed(() => user.user);
+const darkMode = computed(() => {
+  if (Dark.mode) {
+    return 'light_mode';
+  }
+  return 'dark_mode';
+});
 const showLogin = computed(
  () => (route.path !== '/' && route.path !== '/login') || currentUser.value?.username === '',
 );

-const userLogin = useLogin();
-const user = useUserStore();
 const autorized = computed(() => !!user.isAuthorizedAs(['admin']));
-const { NotifyResponse } = useNotify();
-const currentUser = computed(() => userLogin.getUser());

+// switch between logged in or logged out text
 const loginText = computed(() => {
-  return currentUser.value ? 'Logout' : 'Login';
+  return currentUser.value ? i18n.global.t('logout') : i18n.global.t('login');
 });

-const refLoginDialog = ref();
+//switch between dark and light mode and save it in localStorage
+function toggleDarkMode() {
+  Dark.toggle();
+  setLocalDarkMode();
+}

+// opens login page if no user is logged in otherwise it serves as logout
 function openLogin() {
  if (currentUser.value) {
    userLogin.logout().catch((err) => NotifyResponse(err, 'error'));
@@ -72,6 +100,7 @@ const langSelection = ref(lang);
 // Watch for changes and update i18n locale
 watch(langSelected, (newLang) => {
  i18n.global.locale = newLang;
-  localStorage.setItem('lang', newLang);
+
+  setLocalLanguage(newLang);
 });
 </script>
--- a/src/vueLib/login/useLogin.ts
+++ b/src/vueLib/login/useLogin.ts
@@ -2,7 +2,8 @@ import { appApi } from 'src/boot/axios';
 import { useUserStore } from './userStore';
 import { useNotify } from '../general/useNotify';
 import type { Settings } from '../models/settings';
-import { Logo } from '../models/logo';
+import { appName, logo } from '../models/settings';
+import { clearLocalStorage, setLocalSettings } from 'src/localstorage/localStorage';

 const refreshTime = 10000;
 let intervalId: ReturnType<typeof setInterval> | null = null;
@@ -16,17 +17,27 @@ export function useLogin() {
      await appApi.post('/login', { user, password }).then((resp) => {
        const sets = resp.data.settings as Settings;

-        Logo.value = sets.icon;
+        if (sets.icon) {
+          logo.value = sets.icon;
+        }
+        if (sets.appName) {
+          appName.value = sets.appName;
+        }
        document.documentElement.style.setProperty('--q-primary', sets.primaryColor);
+        document.documentElement.style.setProperty('--q-primary-text', sets.primaryColorText);
        document.documentElement.style.setProperty('--q-secondary', sets.secondaryColor);
-        localStorage.setItem('icon', sets.icon);
-        localStorage.setItem('databaseName', sets.databaseName);
-        localStorage.setItem('primaryColor', sets.primaryColor);
-        localStorage.setItem('secondaryColor', sets.secondaryColor);
+        document.documentElement.style.setProperty('--q-secondary-text', sets.secondaryColorText);
+        setLocalSettings(sets);
      });

      const resp = await appApi.get('/login/me');
-      userStore.setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role });
+      await userStore
+        .setUser({
+          id: resp.data.id,
+          username: resp.data.user,
+          role: { role: resp.data.role, permissions: [] },
+        })
+        .catch((err) => NotifyResponse(err, 'error'));

      startRefreshInterval();
      return true;
@@ -42,17 +53,24 @@ export function useLogin() {
    });

    userStore.clearUser();
+    clearLocalStorage();
    stopRefreshInterval();
  }

  async function refresh() {
    await appApi
-      .post('secure/login/refresh', {}, { withCredentials: true })
+      .post('login/refresh', {}, { withCredentials: true })
      .then(() => {
        appApi
          .get('/login/me')
          .then((resp) => {
-            userStore.setUser({ id: resp.data.id, username: resp.data.user, role: resp.data.role });
+            userStore
+              .setUser({
+                id: resp.data.id,
+                username: resp.data.user,
+                role: { role: resp.data.role, permissions: [] },
+              })
+              .catch((err) => NotifyResponse(err, 'error'));
            if (!intervalId) {
              startRefreshInterval();
            }
@@ -66,9 +84,6 @@ export function useLogin() {
    stopRefreshInterval();
    return false;
  }
-  function getUser() {
-    return userStore.getUser();
-  }

  function startRefreshInterval() {
    intervalId = setInterval(() => {
@@ -82,5 +97,5 @@ export function useLogin() {
    }
  }

-  return { login, logout, refresh, getUser };
+  return { login, logout, refresh };
 }
--- a/src/vueLib/login/userStore.ts
+++ b/src/vueLib/login/userStore.ts
@@ -1,30 +1,56 @@
 import { defineStore } from 'pinia';
-import { useGlobalRouter } from 'src/utils/globalRouter';
-import { useGlobalQ } from 'src/utils/globalQ';
+import { useGlobalRouter } from 'src/vueLib/utils/globalRouter';
+import { useGlobalQ } from 'src/vueLib/utils/globalQ';
+import { appApi } from 'src/boot/axios';
+import { useNotify } from '../general/useNotify';
+import type { Role } from '../models/roles';
+import type { UserState, User } from '../models/user';
+import type { Permission } from '../checkboxes/permissions';

-interface User {
-  id: number;
-  username: string;
-  role: string;
-}
-
-interface UserState {
-  user: User | null;
-}
+const { NotifyResponse } = useNotify();

 export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    user: null,
  }),
  getters: {
-    isAuthenticated: (state): boolean => !!state.user,
+    isAuthenticated: (state: UserState): boolean => {
+      return !!state.user;
+    },
+
+    isAuthorizedAs: (state: UserState) => {
+      return (roles: string[]) => {
+        return state.user !== null && roles.includes(state.user.role?.role);
+      };
+    },
+    isPermittedTo: (state: UserState) => {
+      return (name: string, type: 'read' | 'write' | 'delete' | 'import' | 'export'): boolean => {
+        const permission = state.user?.permissions?.find((r: Permission) => r.name === name);
+        switch (type) {
+          case 'read':
+            return permission?.permission ? (permission.permission & (1 << 0)) === 1 : false;
+          case 'write':
+            return permission?.permission ? (permission.permission & (1 << 1)) === 2 : false;
+          case 'delete':
+            return permission?.permission ? (permission.permission & (1 << 2)) === 4 : false;
+          case 'import':
+            return permission?.permission ? (permission.permission & (1 << 3)) === 8 : false;
+          case 'export':
+            return permission?.permission ? (permission.permission & (1 << 4)) === 16 : false;
+        }
+      };
+    },
  },
  actions: {
-    setUser(user: User) {
+    async setUser(user: User) {
+      await appApi
+        .get('roles?role=' + user.role?.role)
+        .then((resp) => {
+          const roleData = resp.data.find((role: Role) => role.role === user.role?.role);
+          user.permissions = roleData?.permissions || [];
          this.user = user;
-    },
-    getUser() {
-      return this.user;
+        })
+        .catch((err) => NotifyResponse(err, 'error'));
    },
    clearUser() {
      const $q = useGlobalQ();
@@ -34,9 +60,20 @@ export const useUserStore = defineStore('user', {
        $q?.notify({
          message: "user '" + this.user?.username + "' logged out",
          color: 'orange',
-          position: 'bottom-right',
+          position: 'top',
          icon: 'warning',
          timeout: 5000,
+          actions: [
+            {
+              icon: 'close',
+              color: 'white',
+              dense: true,
+              round: true,
+              handler: () => {
+                /* just closes */
+              },
+            },
+          ],
        });
      } else {
        console.error("user '" + this.user?.username + "' logged out");
@@ -51,18 +88,25 @@ export const useUserStore = defineStore('user', {
          $q?.notify({
            message: err,
            color: 'orange',
-            position: 'bottom-right',
+            position: 'top',
            icon: 'warning',
            timeout: 5000,
+            actions: [
+              {
+                icon: 'close',
+                color: 'white',
+                dense: true,
+                round: true,
+                handler: () => {
+                  /* just closes */
+                },
+              },
+            ],
          });
        } else {
          console.error("user '" + this.user?.username + "' logged out");
        }
      });
    },
-
-    isAuthorizedAs(roles: string[]) {
-      return this.user !== null && roles.includes(this.user.role);
-    },
  },
 });
--- a/src/vueLib/models/event.ts
+++ b/src/vueLib/models/event.ts
@@ -0,0 +1,11 @@
+import type { Members } from './member';
+
+export interface Event {
+  id: number;
+  name: string;
+  date?: string;
+  day?: string;
+  attendees: Members;
+}
+
+export type Events = Event[];
--- a/src/vueLib/models/group.ts
+++ b/src/vueLib/models/group.ts
@@ -0,0 +1,6 @@
+export interface Group {
+  id: number;
+  name: string;
+}
+
+export type Groups = Group[];
--- a/src/vueLib/models/logo.ts
+++ b/src/vueLib/models/logo.ts
@@ -1,3 +0,0 @@
-import { ref } from 'vue';
-
-export const Logo = ref('');
--- a/src/vueLib/models/member.ts
+++ b/src/vueLib/models/member.ts
@@ -1,18 +1,24 @@
+import type { Group } from './group';
+import type { Responsible } from './responsible';
+
 export interface Member {
  id: number;
+  memberId?: number;
+  responsibleId?: number | undefined;
  firstName: string;
  lastName: string;
-  birthday: string;
-  age: string;
-  address: string;
-  town: string;
-  zip: string;
-  phone: string;
-  email: string;
-  group: string;
-  responsiblePerson: string;
-  firstVisit: string;
-  lastVisit: string;
+  birthday?: string;
+  age?: string;
+  comment?: string;
+  address?: string;
+  town?: string;
+  zip?: string;
+  phone?: string;
+  email?: string;
+  group?: Group;
+  responsible?: Responsible;
+  firstVisit?: string;
+  lastVisit?: string;
 }

 export type Members = Member[];
--- a/src/vueLib/models/responsible.ts
+++ b/src/vueLib/models/responsible.ts
@@ -0,0 +1,9 @@
+import type { Member } from './member';
+
+export interface Responsible {
+  id: number;
+  memberId: number;
+  member: Member;
+}
+
+export type Responsibles = Responsible[];
--- a/src/vueLib/models/rights.ts
+++ b/src/vueLib/models/rights.ts
@@ -1,8 +0,0 @@
-export interface Right {
-  name: string;
-  read: boolean;
-  write: boolean;
-  delete: boolean;
-}
-
-export type Rights = Right[];
--- a/src/vueLib/models/roles.ts
+++ b/src/vueLib/models/roles.ts
@@ -1,9 +1,9 @@
-import type { Rights } from './rights';
+import type { Permissions } from '../checkboxes/permissions';

 export interface Role {
  id?: number;
  role: string;
-  rights: Rights | null;
+  permissions: Permissions;
 }

 export type Roles = Role[];
--- a/src/vueLib/models/settings.ts
+++ b/src/vueLib/models/settings.ts
@@ -1,6 +1,27 @@
+import { ref } from 'vue';
+
+export const logo = ref('');
+export const appName = ref('Attendance Records');
+export const databaseName = ref('members.dba');
+
 export type Settings = {
+  appName: string;
  icon: string;
  databaseName: string;
  primaryColor: string;
+  primaryColorText: string;
  secondaryColor: string;
+  secondaryColorText: string;
 };
+
+export function DefaultSettings(): Settings {
+  return {
+    appName: 'Attendance Records',
+    icon: '',
+    databaseName: 'members.dba',
+    primaryColor: document.documentElement.style.getPropertyValue('--q-primary-text'),
+    primaryColorText: document.documentElement.style.getPropertyValue('--q-primary'),
+    secondaryColor: document.documentElement.style.getPropertyValue('--q-secondary'),
+    secondaryColorText: document.documentElement.style.getPropertyValue('--q-secondary-text'),
+  };
+}
--- a/src/vueLib/models/user.ts
+++ b/src/vueLib/models/user.ts
@@ -0,0 +1,15 @@
+import type { Permissions } from '../checkboxes/permissions';
+import type { Role } from './roles';
+import type { Settings } from './settings';
+
+export interface User {
+  id: number;
+  username: string;
+  role: Role;
+  permissions?: Permissions;
+  settings?: Settings;
+}
+
+export interface UserState {
+  user: User | null;
+}
--- a/src/vueLib/models/users.ts
+++ b/src/vueLib/models/users.ts
@@ -1,9 +1,15 @@
+import type { Role } from './roles';
+import type { Settings } from './settings';
+
 export interface User {
  id?: number;
  user: string;
  email: string;
-  role: string;
-  expires: string;
+  role?: Role;
+  expiration?: string;
+  password?: string;
+  newPassword?: string;
+  settings?: Settings;
 }

 export type Users = User[];
--- a/src/vueLib/tables/attendees/AttendeesTable.ts
+++ b/src/vueLib/tables/attendees/AttendeesTable.ts
@@ -0,0 +1,82 @@
+import { appApi } from 'src/boot/axios';
+import { ref, computed } from 'vue';
+import type { Members } from 'src/vueLib/models/member';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'boot/lang';
+import type { Events } from 'src/vueLib/models/event';
+
+export function useAttendeesTable() {
+  const attendees = ref<Members>([]);
+
+  const pagination = ref({
+    sortBy: 'firstName',
+    descending: false,
+    page: 1,
+    rowsPerPage: 20,
+  });
+
+  const columns = computed(() => [
+    {
+      name: 'firstName',
+      align: 'left' as const,
+      label: i18n.global.t('prename'),
+      field: 'firstName',
+      sortable: true,
+    },
+    {
+      name: 'lastName',
+      align: 'left' as const,
+      label: i18n.global.t('lastName'),
+      field: 'lastName',
+      sortable: true,
+    },
+    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
+  ]);
+
+  const { NotifyResponse } = useNotify();
+
+  const loading = ref(false);
+
+  //updates Attendees list from database
+  async function updateAttendees(eventArray: number) {
+    loading.value = true;
+
+    let events: Events | undefined;
+
+    await appApi
+      .get('events')
+      .then((resp) => {
+        if (resp.data === null) {
+          attendees.value = [];
+          return;
+        }
+        events = resp.data as Events;
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+
+    if (
+      !events ||
+      events.length === 0 ||
+      !events[eventArray]?.attendees ||
+      events[eventArray].attendees === null
+    ) {
+      attendees.value = [];
+      return;
+    }
+    attendees.value = events[eventArray].attendees ?? [];
+  }
+
+  return {
+    attendees,
+    pagination,
+    columns,
+    loading,
+    updateAttendees,
+  };
+}
--- a/src/vueLib/tables/attendees/AttendeesTable.vue
+++ b/src/vueLib/tables/attendees/AttendeesTable.vue
@@ -0,0 +1,229 @@
+<template>
+  <q-table
+    flat
+    bordered
+    ref="tableRef"
+    :title="$t('attendees')"
+    title-class="text-bold text-blue-9"
+    :no-data-label="$t('noDataAvailable')"
+    :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recordsPerPage')"
+    :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+    :rows="attendees"
+    :columns="columns"
+    row-key="id"
+    v-model:pagination="pagination"
+    :loading="loading"
+    :filter="filter"
+    :selection="selectOption ? 'multiple' : 'none'"
+    v-model:selected="selected"
+    binary-state-sort
+    dense
+    class="bigger-table-text"
+  >
+    <!--top left of event table-->
+    <template v-slot:top-left>
+      <q-btn-group push flat style="color: grey">
+        <q-btn
+          v-if="user.isPermittedTo('events', 'write')"
+          dense
+          flat
+          icon="person"
+          @click="openAttendanceDialog"
+          ><q-badge floating transparent color="primary" text-color="primary-text">+</q-badge>
+          <q-tooltip>{{ $t('addNewAttendees') }}</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="user.isPermittedTo('events', 'write')"
+          dense
+          flat
+          style="color: grey"
+          :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+          @click="selectOption = !selectOption"
+        >
+          <q-tooltip>{{ $t('selectAttendeesOptions') }}</q-tooltip>
+        </q-btn>
+      </q-btn-group>
+      <div v-if="selectOption && selected.length > 0">
+        <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+        <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+          <q-item
+            clickable
+            v-close-popup
+            @click="openRemoveDialog(...selected)"
+            class="text-negative"
+            >{{ $t('delete') }}</q-item
+          >
+        </q-menu>
+      </div>
+      <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+        {{ $t('selected') }}: {{ selected.length }}
+      </div>
+    </template>
+    <!--top right of event table-->
+    <template v-slot:top-right>
+      <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+    </template>
+    <!--body of event table-->
+    <template v-slot:body-cell="props">
+      <q-td v-if="props.col.field === 'attendees'" :props="props">
+        <q-btn v-if="props.value !== null && props.value.length > 0" dense flat icon="people"
+          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+            props.row.attendees.length
+          }}</q-badge></q-btn
+        >
+      </q-td>
+      <q-td v-else :props="props">
+        {{ props.value }}
+      </q-td>
+    </template>
+    <template v-slot:body-cell-option="props">
+      <q-td :props="props">
+        <q-btn
+          v-if="user.isPermittedTo('events', 'delete')"
+          flat
+          dense
+          @click="openRemoveDialog(props.row)"
+          color="negative"
+          icon="delete"
+        />
+      </q-td>
+    </template>
+  </q-table>
+  <DialogFrame ref="attendanceDialog" :header-title="$t('members')" :width="700" :height="500">
+    <MembersTable
+      add-attendees
+      :compare-members="attendees"
+      v-on:update-event="(val) => updateTable(val)"
+      :event-id="localEvent?.id ?? 0"
+    />
+  </DialogFrame>
+
+  <OkDialog
+    ref="okDialog"
+    :dialog-label="$t('delete')"
+    :text="$t('doYouWantToDelete') + ' ' + deleteText"
+    label-color="red"
+    :button-cancel-label="$t('cancel')"
+    :button-ok-label="$t('confirm')"
+    :button-ok-flat="false"
+    button-ok-color="red"
+    v-on:update-confirm="(val) => removeAttendees(...val)"
+  ></OkDialog>
+</template>
+
+<script setup lang="ts">
+//imports
+import { appApi } from 'src/boot/axios';
+import { onMounted, type PropType, ref } from 'vue';
+import type { Members } from 'src/vueLib/models/member';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { useAttendeesTable } from '../attendees/AttendeesTable';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import type { Event } from 'src/vueLib/models/event';
+import MembersTable from '../members/MembersTable.vue';
+import { i18n } from 'src/boot/lang';
+
+//use constants and function of imports
+const { attendees, pagination, loading, columns, updateAttendees } = useAttendeesTable();
+
+//define given properties
+const props = defineProps({
+  event: {
+    type: Object as PropType<Event>,
+    required: true,
+  },
+  eventArray: { type: Number, default: 0, required: true },
+});
+
+// define emits
+const emit = defineEmits(['update']);
+
+// definitions
+const { NotifyResponse } = useNotify();
+const attendanceDialog = ref();
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const localEvent = ref<Event>();
+const selected = ref<Members>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+const user = useUserStore();
+
+// load at page mount
+onMounted(() => {
+  localEvent.value = props.event;
+  attendees.value = props.event.attendees ?? [];
+});
+
+//opens attendance dialog
+function openAttendanceDialog() {
+  attendanceDialog.value?.open();
+}
+
+//opens remove dialog
+function openRemoveDialog(...attendees: Members) {
+  if (attendees.length === 1) {
+    deleteText.value = "'";
+    if (attendees[0]?.firstName && attendees[0]?.lastName) {
+      deleteText.value += attendees[0]?.firstName + ' ' + attendees[0]?.lastName;
+    }
+    deleteText.value += "'";
+  } else {
+    deleteText.value = String(attendees.length) + ' ' + i18n.global.t('attendees');
+  }
+
+  okDialog.value?.open(attendees);
+}
+
+//remove attendees from database
+async function removeAttendees(...removeAttendees: Members) {
+  if (!localEvent.value) {
+    NotifyResponse('event is empty', 'error');
+    return;
+  }
+
+  localEvent.value.attendees = removeAttendees;
+
+  await appApi
+    .post('events/delete/attendees', localEvent.value)
+    .then(() => {
+      selected.value = [];
+      if (localEvent.value?.attendees !== undefined && localEvent.value?.attendees.length > 1) {
+        NotifyResponse(i18n.global.t('deleteAttendees'), 'warning');
+      } else {
+        NotifyResponse(i18n.global.t('deleteAttendee'), 'warning');
+      }
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+  await updateAttendees(props.eventArray);
+  emit('update', -removeAttendees.length);
+}
+
+async function updateTable(amount: number) {
+  await updateAttendees(props.eventArray);
+  emit('update', amount);
+}
+</script>
+
+<style>
+.bigger-table-text .q-table__middle td {
+  font-size: 14px;
+}
+
+.bigger-table-text .q-table__top,
+.bigger-table-text .q-table__bottom,
+.bigger-table-text th {
+  font-size: 14px;
+}
+</style>
--- a/src/vueLib/tables/attendees/AttendeesTableDialog.vue
+++ b/src/vueLib/tables/attendees/AttendeesTableDialog.vue
@@ -0,0 +1,126 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="$t('attendees')"
+    :width="700"
+    :height="600"
+    :inner-padding="0"
+  >
+    <q-card>
+      <!-- tabs declaration in header-->
+      <q-tabs
+        v-model="tab"
+        dense
+        class="text-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+      >
+        <q-tab no-caps name="attendance" :label="$t('attendees')"
+          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+            attendees.length
+          }}</q-badge></q-tab
+        >
+
+        <q-tab no-caps name="noneAttendees" :label="$t('noneAttendees')"
+          ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+            missingAttendanceAmount
+          }}</q-badge></q-tab
+        >
+      </q-tabs>
+
+      <q-separator />
+
+      <!--tab of attenting members-->
+
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="attendance" style="padding: 0px">
+          <AttendeesTable
+            :event="localEvent!"
+            :event-array="eA"
+            v-on:update="(val) => updateTable(val)"
+          />
+        </q-tab-panel>
+        <!--tab of missing attenting members-->
+        <q-tab-panel name="noneAttendees" style="padding: 0px">
+          <MembersTable
+            add-attendees
+            :compare-members="attendees"
+            v-on:update-event="(val) => updateTable(val)"
+            :event-id="localEvent?.id ?? 0"
+          />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+// imports
+import AttendeesTable from './AttendeesTable.vue';
+import MembersTable from '../members/MembersTable.vue';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import type { Event } from 'src/vueLib/models/event';
+import { ref } from 'vue';
+import { useAttendeesTable } from './AttendeesTable';
+import { useMemberTable } from '../members/MembersTable';
+import { getLocalPageDefaults } from 'src/localstorage/localStorage';
+
+//use constants and function of imports
+const { attendees, updateAttendees } = useAttendeesTable();
+const { setNewFilter, filteredMembers, updateMembers } = useMemberTable();
+
+// declare emits
+const emit = defineEmits(['update']);
+
+// declarations
+const dialog = ref();
+const localEvent = ref<Event>();
+const missingAttendanceAmount = ref(0);
+const attendanceAmount = ref(0);
+const eA = ref(0);
+const tab = ref('attendance');
+
+// opens attendace dialog of event
+const open = async (eventArray: number, event: Event) => {
+  // local declarations
+  localEvent.value = event;
+  attendanceAmount.value = event.attendees.length ?? [];
+  eA.value = eventArray;
+
+  // get attendance
+  await updateAttendees(eventArray);
+  //get missing attendance from memer updateTable
+  await updateMembers(event.attendees);
+
+  // set custom filter
+  const defaults = getLocalPageDefaults('attendance');
+  setNewFilter(defaults?.filteredColumn || '', ...(defaults?.filteredValue ?? []));
+
+  // set amount of missing attendace
+  missingAttendanceAmount.value = filteredMembers.value.length;
+
+  //open atttendance dialog
+  dialog.value.open();
+};
+
+//updates amount of table display and both tables
+async function updateTable(amount?: number) {
+  // check wether amount is given and if it adds or substracts amount
+  if (amount && amount < 0) {
+    missingAttendanceAmount.value -= amount;
+  } else if (amount) {
+    missingAttendanceAmount.value = amount;
+  }
+
+  // update attendace table
+  await updateAttendees(eA.value);
+  // update for amoutn display in tab
+  if (localEvent.value) localEvent.value.attendees = attendees.value;
+  //emit to update event table
+  emit('update');
+}
+
+defineExpose({ open });
+</script>
--- a/src/vueLib/tables/components/ClickableComponent.vue
+++ b/src/vueLib/tables/components/ClickableComponent.vue
@@ -0,0 +1,31 @@
+<template>
+  <q-td
+    :props="props.tdProps"
+    v-bind="$attrs"
+    :class="props.inClass"
+    :style="props.permitted ? 'cursor: pointer' : ''"
+    @click="props.permitted && emit('onClick')"
+  >
+    {{ props.value ?? '' }}
+  </q-td>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const emit = defineEmits(['onClick']);
+
+const props = defineProps({
+  tdProps: { type: Object },
+  inClass: String,
+  style: String,
+  permitted: { type: Boolean, default: false },
+  value: {
+    type: null as unknown as PropType<unknown>,
+  },
+});
+</script>
--- a/src/vueLib/tables/components/FilterSelect.vue
+++ b/src/vueLib/tables/components/FilterSelect.vue
@@ -0,0 +1,49 @@
+<template>
+  <q-card flat class="q-pa-sm">
+    <q-select
+      :label="$t('filterByColumn')"
+      dense
+      v-model="columnFilter"
+      option-label="label"
+      option-value="name"
+      map-options
+      emit-value
+      clearable
+      :options="props.filterOptions"
+      v-on:clear="emit('clear')"
+      class="q-mt-xs"
+    />
+    <q-select
+      v-if="columnFilter"
+      :label="$t('filterByColumnValue')"
+      dense
+      v-model="columnOption"
+      :options="props.columnOptions"
+      class="q-mt-xs"
+      multiple
+      clearable
+    />
+  </q-card>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  columnFilter: String,
+  columnOption: Array,
+  filterOptions: Array,
+  columnOptions: Array,
+});
+
+const emit = defineEmits(['update:columnFilter', 'update:columnOption', 'clear']);
+
+const columnFilter = computed({
+  get: () => props.columnFilter,
+  set: (v) => emit('update:columnFilter', v),
+});
+
+const columnOption = computed({
+  get: () => props.columnOption,
+  set: (v) => emit('update:columnOption', v),
+});
+</script>
--- a/src/vueLib/tables/components/IconComponent.vue
+++ b/src/vueLib/tables/components/IconComponent.vue
@@ -0,0 +1,18 @@
+<template>
+  <q-td :props="props.tdProps" :class="props.inClass">
+    <q-icon :name="props.name" :color="props.color" :size="props.size" />
+  </q-td>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  tdProps: { type: Object },
+  name: { type: String, required: true },
+  color: String,
+  inClass: String,
+  size: {
+    type: String,
+    validator: (v: string) => ['xs', 'sm', 'md', 'lg', 'xl'].includes(v),
+  },
+});
+</script>
--- a/src/vueLib/tables/components/MenuComponent.vue
+++ b/src/vueLib/tables/components/MenuComponent.vue
@@ -0,0 +1,45 @@
+<template>
+  <q-td :props="props.tdProps">
+    <q-btn v-if="props.permitEdit || props.permitDelete" flat dense icon="more_vert">
+      <q-menu anchor="top right" self="top left">
+        <q-item
+          dense
+          v-if="props.permitEdit"
+          clickable
+          v-close-popup
+          @click="editFunction?.()"
+          class="text-primary"
+          >{{ $t('edit') }}</q-item
+        >
+        <q-item
+          v-if="props.permitDelete"
+          dense
+          clickable
+          v-close-popup
+          @click="removeFunction?.()"
+          class="text-negative"
+          title="zu"
+          >{{ $t('delete') }}</q-item
+        >
+      </q-menu>
+    </q-btn>
+  </q-td>
+</template>
+
+<script setup lang="ts">
+import { QTd } from 'quasar';
+
+const props = defineProps({
+  tdProps: { type: Object },
+  permitEdit: { type: Boolean, default: false },
+  permitDelete: { type: Boolean, default: false },
+  editFunction: {
+    type: Function,
+    required: false,
+  },
+  removeFunction: {
+    type: Function,
+    required: false,
+  },
+});
+</script>
--- a/src/vueLib/tables/components/SearchableInput.vue
+++ b/src/vueLib/tables/components/SearchableInput.vue
@@ -0,0 +1,26 @@
+<template>
+  <q-td :props="props.tdProps"></q-td>
+  <q-input filled dense :debounce="debounce" v-model="model" :placeholder="placeholder">
+    <template #append>
+      <q-icon name="search" />
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  tdProps: { type: Object },
+  modelValue: String,
+  placeholder: { type: String, default: 'Search' },
+  debounce: { type: Number, default: 300 },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const model = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v),
+});
+</script>
--- a/src/vueLib/tables/components/SearchableSelect.vue
+++ b/src/vueLib/tables/components/SearchableSelect.vue
@@ -0,0 +1,53 @@
+<template>
+  <q-td :props="props.tdProps" :class="props.inClass">
+    <SearchableSelect
+      v-if="props.options && props.options.length > 0"
+      :dense="props.dense"
+      :readonly="props.readOnly"
+      :options="props.options"
+      :option-label="props.optionLabel"
+      :option-value="props.optionValue!"
+      :model-value="modelValueLocal"
+      @update:model-value="emitValue"
+    />
+  </q-td>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, string | number | object>">
+import { ref, type PropType, watch } from 'vue';
+import SearchableSelect from 'src/vueLib/general/SearchableSelect .vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  tdProps: { type: Object },
+  dense: Boolean,
+  readOnly: Boolean,
+  inClass: String,
+  options: { type: Array as PropType<T[]> },
+  optionLabel: { type: [Function, String] as PropType<((opt: T) => string) | string> },
+  optionValue: { type: String },
+  modelValue: {
+    type: [String, Number, Object] as PropType<string | number | object | null>,
+    default: null,
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number | object | null): void;
+}>();
+
+const modelValueLocal = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (v) => (modelValueLocal.value = v),
+);
+
+function emitValue(val: string | number | object | null) {
+  modelValueLocal.value = val;
+  emit('update:modelValue', val);
+}
+</script>
--- a/src/vueLib/tables/components/TopButtonGroup.vue
+++ b/src/vueLib/tables/components/TopButtonGroup.vue
@@ -0,0 +1,48 @@
+<template>
+  <q-btn-group push flat style="color: grey">
+    <q-btn v-if="props.permitAdd" dense flat icon="add" @click="emit('add')">
+      <q-tooltip v-if="props.toolTipAdd">{{ props.toolTipAdd }}</q-tooltip>
+    </q-btn>
+    <q-btn
+      v-if="props.permitSelect"
+      dense
+      flat
+      style="color: grey"
+      :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+      @click="selectOption = !selectOption"
+    >
+      <q-tooltip v-if="props.toolTipSelect">{{ props.toolTipSelect }}</q-tooltip>
+    </q-btn>
+    <q-btn v-if="props.permitImport" dense flat icon="upload" @click="emit('import')">
+      <q-tooltip v-if="props.toolTipImport">{{ props.toolTipImport }}</q-tooltip>
+    </q-btn>
+    <q-btn v-if="props.permitExport" dense flat icon="download" @click="emit('export')">
+      <q-tooltip v-if="props.toolTipExport">{{ props.toolTipExport }}</q-tooltip>
+    </q-btn>
+  </q-btn-group>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps({
+  permitAdd: Boolean,
+  toolTipAdd: String,
+  toolTipSelect: String,
+  toolTipImport: String,
+  toolTipExport: String,
+  permitSelect: Boolean,
+  permitImport: Boolean,
+  permitExport: Boolean,
+  selectOption: Boolean,
+});
+
+const emit = defineEmits(['add', 'update:selectOption', 'import', 'export']);
+
+const selectOption = computed({
+  get: () => props.selectOption,
+  set: (v) => {
+    emit('update:selectOption', v);
+  },
+});
+</script>
--- a/src/vueLib/tables/events/EventsTable.ts
+++ b/src/vueLib/tables/events/EventsTable.ts
@@ -0,0 +1,98 @@
+import { appApi } from 'src/boot/axios';
+import { ref, computed } from 'vue';
+import type { Events } from 'src/vueLib/models/event';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'boot/lang';
+import MenuComponent from '../components/MenuComponent.vue';
+import ClickableComponent from '../components/ClickableComponent.vue';
+
+export function useEventTable() {
+  const Events = ref<Events>([]);
+
+  const pagination = ref({
+    sortBy: 'firstName',
+    descending: false,
+    page: 1,
+    rowsPerPage: 20,
+  });
+
+  const columns = computed(() => [
+    {
+      name: 'name',
+      align: 'left' as const,
+      label: i18n.global.t('name'),
+      field: 'name',
+      sortable: true,
+      component: ClickableComponent,
+    },
+    {
+      name: 'attendees',
+      align: 'center' as const,
+      label: i18n.global.t('attendees'),
+      field: 'attendees',
+      sortable: true,
+    },
+    {
+      name: 'day',
+      align: 'left' as const,
+      label: i18n.global.t('day'),
+      field: 'day',
+      sortable: true,
+      component: ClickableComponent,
+    },
+    {
+      name: 'date',
+      align: 'left' as const,
+      label: i18n.global.t('dateAndTime'),
+      field: 'date',
+      sortable: true,
+      component: ClickableComponent,
+    },
+    {
+      name: 'option',
+      align: 'center' as const,
+      label: '',
+      field: 'option',
+      icon: 'option',
+      component: MenuComponent,
+    },
+  ]);
+
+  const { NotifyResponse } = useNotify();
+
+  const loading = ref(false);
+
+  //updates Event list from database
+  function updateEvents() {
+    loading.value = true;
+
+    appApi
+      .get('events')
+      .then((resp) => {
+        if (resp.data === null) {
+          Events.value = [];
+          return;
+        }
+        Events.value = resp.data as Events;
+        if (Events.value === null) {
+          Events.value = [];
+          return;
+        }
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  return {
+    Events,
+    pagination,
+    columns,
+    loading,
+    updateEvents,
+  };
+}
--- a/src/vueLib/tables/events/EventsTable.vue
+++ b/src/vueLib/tables/events/EventsTable.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      title="Events"
+      title-class="text-bold text-blue-9"
+      :no-data-label="$t('noDataAvailable')"
+      :loading-label="$t('loading')"
+      :rows-per-page-label="$t('recordsPerPage')"
+      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+      :rows="Events"
+      :columns="columns"
+      row-key="id"
+      v-model:pagination="pagination"
+      :loading="loading"
+      :filter="filter"
+      :selection="selectOption ? 'multiple' : 'none'"
+      v-model:selected="selected"
+      binary-state-sort
+      dense
+      class="bigger-table-text"
+    >
+      <template v-slot:top-left>
+        <TopButtonGroup
+          :permit-add="user.isPermittedTo('events', 'write')"
+          v-on:add="openAllValueDialog(null)"
+          :tool-tip-add="$t('addNewEvent')"
+          :permit-select="user.isPermittedTo('events', 'write')"
+          :tool-tip-select="$t('selectEventOptions')"
+          v-model:select-option="selectOption"
+        />
+        <div v-if="selectOption && selected.length > 0">
+          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item
+              clickable
+              v-close-popup
+              @click="openRemoveDialog(...selected)"
+              class="text-negative"
+              >{{ $t('delete') }}</q-item
+            >
+          </q-menu>
+        </div>
+        <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+          {{ $t('selected') }}: {{ selected.length }}
+        </div>
+      </template>
+
+      <!-- top right of table-->
+
+      <template v-slot:top-right>
+        <SearchableInput v-model="filter" :placeholder="$t('search')" />
+      </template>
+
+      <!-- table body content-->
+
+      <template v-slot:body-cell="props">
+        <q-td v-if="props.col.field === 'attendees'" :props="props">
+          <q-btn dense flat icon="people" @click="openAttendees(props.rowIndex, props.row)"
+            ><q-badge color="primary" text-color="primary-text" floating transparent>{{
+              props.row.attendees.length
+            }}</q-badge></q-btn
+          >
+        </q-td>
+        <component
+          v-else
+          :td-props="props"
+          :is="props.col.component"
+          :permitted="user.isPermittedTo('events', 'write') && props.col.field !== 'count'"
+          v-on:onClick="openSingleValueDialog(props.col.label, props.col.name, props.row)"
+          :value="props.value"
+        />
+      </template>
+      <template v-slot:body-cell-day="props">
+        <component
+          :td-props="props"
+          :is="props.col.component"
+          :value="props.value ? $t(props.value) : ''"
+        />
+      </template>
+      <template v-slot:body-cell-option="props">
+        <component
+          :is="props.col.component"
+          :td-props="props"
+          :permitEdit="user.isPermittedTo('events', 'write')"
+          :permitDelete="user.isPermittedTo('events', 'delete')"
+          :editFunction="() => openAllValueDialog(props.row)"
+          :removeFunction="() => openRemoveDialog(props.row)"
+        >
+        </component>
+      </template>
+    </q-table>
+  </div>
+  <EditOneDialog
+    ref="editOneDialog"
+    endpoint="events/edit"
+    query-id
+    v-on:update="updateEvents"
+  ></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:update="updateEvents"></EditAllDialog>
+  <AttendeesTableDialog ref="attendeesDialog" v-on:update="updateEvents" />
+  <OkDialog
+    ref="okDialog"
+    :dialog-label="$t('delete')"
+    :text="$t('doYouWantToDelete') + ' ' + deleteText"
+    label-color="red"
+    :button-cancel-label="$t('cancel')"
+    :button-ok-label="$t('confirm')"
+    :button-ok-flat="false"
+    button-ok-color="red"
+    v-on:update-confirm="(val) => removeEvent(...val)"
+  ></OkDialog>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { ref, onMounted } from 'vue';
+import type { Event, Events } from 'src/vueLib/models/event';
+import EditOneDialog from 'src/components/EditOneDialog.vue';
+import EditAllDialog from 'src/components/EventEditAllDialog.vue';
+import OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { useEventTable } from './EventsTable';
+import { databaseName } from 'src/vueLib/models/settings';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import AttendeesTableDialog from '../attendees/AttendeesTableDialog.vue';
+import type { Members } from 'src/vueLib/models/member';
+import { i18n } from 'src/boot/lang';
+import SearchableInput from '../components/SearchableInput.vue';
+import TopButtonGroup from '../components/TopButtonGroup.vue';
+
+export interface EventDialog {
+  getSelected: () => Events;
+}
+
+const { NotifyResponse } = useNotify();
+const editOneDialog = ref();
+const editAllDialog = ref();
+const attendeesDialog = ref();
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Events>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+const user = useUserStore();
+
+const { Events, pagination, loading, columns, updateEvents } = useEventTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+
+  appApi
+    .post('database/open', { dbPath: databaseName.value, create: true })
+    .then(() => {
+      updateEvents();
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+
+    .finally(() => {
+      loading.value = false;
+    });
+});
+
+// opens dialog for all Event values
+function openSingleValueDialog(label: string, field: string, Event: Event) {
+  editOneDialog.value?.open(label, field, Event);
+}
+
+//opens dialog for one value
+function openAllValueDialog(Event: Event | null) {
+  editAllDialog.value?.open(Event);
+}
+
+//opens remove dialog
+function openRemoveDialog(...Events: Events) {
+  if (Events.length === 1) {
+    deleteText.value = "'";
+    if (Events[0]?.name !== undefined) {
+      deleteText.value += Events[0]?.name + ' ';
+    }
+    deleteText.value += "'";
+  } else {
+    deleteText.value = String(Events.length) + ' ' + i18n.global.t('events');
+  }
+  okDialog.value?.open(Events);
+}
+
+function openAttendees(eventArray: number, attendees: Members | null) {
+  attendeesDialog.value.open(eventArray, attendees);
+}
+
+//remove Event from database
+function removeEvent(...removeEvents: Events) {
+  const EventIds: number[] = [];
+
+  removeEvents.forEach((Event: Event) => {
+    EventIds.push(Event.id);
+  });
+
+  appApi
+    .post('events/delete', { ids: EventIds })
+    .then(() => {
+      updateEvents();
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+}
+</script>
+
+<style>
+.bigger-table-text .q-table__middle td {
+  font-size: 14px;
+}
+
+.bigger-table-text .q-table__top,
+.bigger-table-text .q-table__bottom,
+.bigger-table-text th {
+  font-size: 14px;
+}
+</style>
--- a/src/vueLib/tables/group/GroupTable.ts
+++ b/src/vueLib/tables/group/GroupTable.ts
@@ -0,0 +1,71 @@
+import { appApi } from 'src/boot/axios';
+import { ref, computed } from 'vue';
+import type { Members } from 'src/vueLib/models/member';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'boot/lang';
+import ClickableComponent from '../components/ClickableComponent.vue';
+import MenuComponent from '../components/MenuComponent.vue';
+
+export function useGroupTable() {
+  const groups = ref<Members>([]);
+
+  const pagination = ref({
+    sortBy: 'firstName',
+    descending: false,
+    page: 1,
+    rowsPerPage: 20,
+  });
+
+  const columns = computed(() => [
+    {
+      name: 'name',
+      align: 'left' as const,
+      label: i18n.global.t('name'),
+      field: 'name',
+      sortable: true,
+      component: ClickableComponent,
+    },
+    {
+      name: 'option',
+      align: 'center' as const,
+      label: '',
+      field: 'option',
+      icon: 'option',
+      component: MenuComponent,
+    },
+  ]);
+
+  const { NotifyResponse } = useNotify();
+
+  const loading = ref(false);
+
+  //updates group list from database
+  async function updateGroups() {
+    loading.value = true;
+
+    await appApi
+      .get('groups')
+      .then((resp) => {
+        if (resp.data === null) {
+          groups.value = [];
+          return;
+        }
+        groups.value = resp.data as Members;
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+
+  return {
+    groups,
+    pagination,
+    columns,
+    loading,
+    updateGroups,
+  };
+}
--- a/src/vueLib/tables/group/GroupTable.vue
+++ b/src/vueLib/tables/group/GroupTable.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      title="groups"
+      title-class="text-bold text-blue-9"
+      :no-data-label="$t('noDataAvailable')"
+      :loading-label="$t('loading')"
+      :rows-per-page-label="$t('recordsPerPage')"
+      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+      :rows="groups"
+      :columns="columns"
+      row-key="id"
+      v-model:pagination="pagination"
+      :loading="loading"
+      :filter="filter"
+      :selection="selectOption ? 'multiple' : 'none'"
+      v-model:selected="selected"
+      binary-state-sort
+      dense
+      class="bigger-table-text"
+    >
+      <template v-slot:top-left>
+        <TopButtonGroup
+          :permit-add="user.isPermittedTo('group', 'write')"
+          v-on:add="openGroupDialog"
+          :tool-tip-add="$t('addNewgroup')"
+          :permit-select="
+            user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')
+          "
+          v-model:select-option="selectOption"
+          :tool-tip-select="$t('selectgroupOptions')"
+        />
+        <div v-if="selectOption && selected.length > 0">
+          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+            <q-item
+              v-if="user.isPermittedTo('group', 'delete')"
+              clickable
+              v-close-popup
+              @click="openRemoveDialog(...selected)"
+              class="text-negative"
+              >{{ $t('delete') }}</q-item
+            >
+          </q-menu>
+        </div>
+        <div v-if="selectOption && selected.length > 0" class="text-weight-bold">
+          {{ $t('selected') }}: {{ selected.length }}
+        </div>
+      </template>
+
+      <!-- top right of table-->
+
+      <template v-slot:top-right>
+        <SearchableInput v-model="filter" :placeholder="$t('search')" />
+      </template>
+
+      <!-- table body content-->
+      <template v-slot:body-cell="props">
+        <component
+          :is="props.col.component"
+          :td-props="props"
+          :permitted="user.isPermittedTo('group', 'write')"
+          v-on:onClick="openGroupDialog(props.col.label, props.row)"
+          :value="props.value"
+        />
+      </template>
+      <template v-slot:body-cell-option="props">
+        <component
+          :td-props="props"
+          :is="props.col.component"
+          :permitDelete="user.isPermittedTo('group', 'delete')"
+          :removeFunction="() => openRemoveDialog(props.row)"
+        >
+        </component>
+      </template>
+    </q-table>
+  </div>
+  <DialogFrame ref="groupDialog" :header-title="$t('addNewgroup')" :height="250" :width="350">
+    <q-form ref="form">
+      <div class="row justify-center q-gutter-md">
+        <q-input
+          class="q-ml-md col-5 required"
+          :label="$t('groupName')"
+          filled
+          :rules="[(val) => !!val || $t('groupNameIsRequired')]"
+          v-model="localGroup.name"
+          autofocus
+          @keyup.enter="save()"
+        ></q-input>
+      </div>
+    </q-form>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save()">{{ $t('save') }}</q-btn>
+    </div>
+  </DialogFrame>
+  <OkDialog
+    ref="okDialog"
+    :dialog-label="$t('delete')"
+    :text="$t('doYouWantToDelete') + ' ' + deleteText"
+    label-color="red"
+    :button-cancel-label="$t('cancel')"
+    :button-ok-label="$t('confirm')"
+    :button-ok-flat="false"
+    button-ok-color="red"
+    v-on:update-confirm="(val) => removegroup(...val)"
+  ></OkDialog>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { ref, onMounted } from 'vue';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { useGroupTable } from './GroupTable';
+import { databaseName } from 'src/vueLib/models/settings';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { i18n } from 'src/boot/lang';
+import type { Group, Groups } from 'src/vueLib/models/group';
+import SearchableInput from '../components/SearchableInput.vue';
+import TopButtonGroup from '../components/TopButtonGroup.vue';
+
+const { NotifyResponse } = useNotify();
+const groupDialog = ref();
+const form = ref();
+const localGroup = ref<Group>({} as Group);
+const localLabel = ref('');
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Groups>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+const user = useUserStore();
+
+const { groups, pagination, loading, columns, updateGroups } = useGroupTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+
+  appApi
+    .post('database/open', { dbPath: databaseName.value, create: true })
+    .then(() => {
+      updateGroups().catch((err) => {
+        NotifyResponse(err, 'error');
+      });
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+
+    .finally(() => {
+      loading.value = false;
+    });
+});
+
+//opens dialog for one value
+function openGroupDialog(label?: string, group?: Group) {
+  localLabel.value = label!;
+  localGroup.value = group ? group : <Group>{ name: '' };
+  groupDialog.value?.open();
+}
+
+//opens remove dialog
+function openRemoveDialog(...groups: Groups) {
+  if (groups.length === 1) {
+    deleteText.value = "'" + localGroup.value.name + "''";
+  } else {
+    deleteText.value = String(groups.length) + ' ' + i18n.global.t('groups');
+  }
+  okDialog.value?.open(groups);
+}
+
+//remove group from database
+function removegroup(...removegroups: Groups) {
+  const groupIds: number[] = [];
+
+  removegroups.forEach((group: Group) => {
+    groupIds.push(group.id);
+  });
+
+  appApi
+    .post('groups/delete', { ids: groupIds })
+    .then(() => {
+      updateGroups().catch((err) => {
+        NotifyResponse(err, 'error');
+      });
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+async function save() {
+  const valid = await form.value.validate();
+
+  if (!valid) return;
+
+  let query = 'groups/edit';
+  let payload = JSON.stringify([localGroup.value]);
+
+  if (!localGroup.value.id) {
+    query = 'groups/add';
+    payload = JSON.stringify(localGroup.value);
+  }
+
+  appApi
+    .post(query, payload)
+    .then(() => {
+      updateGroups().catch((err) => NotifyResponse(err, 'error'));
+      groupDialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+</script>
+
+<style>
+.bigger-table-text .q-table__middle td {
+  font-size: 14px;
+}
+
+.bigger-table-text .q-table__top,
+.bigger-table-text .q-table__bottom,
+.bigger-table-text th {
+  font-size: 14px;
+}
+</style>
--- a/src/vueLib/tables/members/MembersTable.ts
+++ b/src/vueLib/tables/members/MembersTable.ts
@@ -3,27 +3,71 @@ import { ref, computed } from 'vue';
 import type { Member, Members } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'boot/lang';
-
-export const databaseName = ref('members.dba');
+import { useResponsibleTable } from '../responsible/ResponsibleTable';
+import { appName } from 'src/vueLib/models/settings';
+import { useGroupTable } from '../group/GroupTable';
+import IconComponent from '../components/IconComponent.vue';
+import SearchableSelectComponent from '../components/SearchableSelect.vue';
+import ClickableComponent from '../components/ClickableComponent.vue';
+import MenuComponent from '../components/MenuComponent.vue';

 export function useMemberTable() {
-  const members = ref<Members>([]);
+  const allMembers = ref<Members>([]);
+  const filteredMembers = ref<Members>([]);
+  const filterList = ref<
+    {
+      field: keyof Member;
+      keys: string[];
+    }[]
+  >();
+  const { responsibles, responsibleMember, updateResponsibles } = useResponsibleTable();
+  const { groups, updateGroups } = useGroupTable();

  const pagination = ref({
    sortBy: 'firstName',
    descending: false,
    page: 1,
-    rowsPerPage: 10,
+    rowsPerPage: 20,
  });

-  const columns = computed(() => [
-    { name: 'cake', align: 'center' as const, label: '', field: 'cake', icon: 'cake' },
+  //add enabling of each columns
+  const enabledColumns = ref<Record<string, boolean>>({
+    cake: true,
+    firstName: true,
+    lastName: true,
+    birthday: true,
+    age: true,
+    address: true,
+    comment: true,
+    town: true,
+    zip: true,
+    phone: true,
+    email: true,
+    group: true,
+    responsible: true,
+    firstVisit: true,
+    lastVisit: true,
+    option: true,
+    test: true,
+  });
+
+  const columns = computed(() =>
+    [
+      {
+        name: 'cake',
+        align: 'center' as const,
+        label: '',
+        field: 'cake',
+        icon: 'cake',
+        component: IconComponent,
+      },
      {
        name: 'firstName',
        align: 'left' as const,
        label: i18n.global.t('prename'),
        field: 'firstName',
        sortable: true,
+        component: ClickableComponent,
      },
      {
        name: 'lastName',
@@ -31,6 +75,7 @@ export function useMemberTable() {
        label: i18n.global.t('lastName'),
        field: 'lastName',
        sortable: true,
+        component: ClickableComponent,
      },
      {
        name: 'birthday',
@@ -38,6 +83,7 @@ export function useMemberTable() {
        label: i18n.global.t('birthday'),
        field: 'birthday',
        sortable: true,
+        component: ClickableComponent,
      },
      {
        name: 'age',
@@ -45,6 +91,15 @@ export function useMemberTable() {
        label: i18n.global.t('age'),
        field: 'age',
        sortable: true,
+        component: ClickableComponent,
+      },
+      {
+        name: 'comment',
+        align: 'left' as const,
+        label: i18n.global.t('comment'),
+        field: 'comment',
+        sortable: true,
+        component: ClickableComponent,
      },
      {
        name: 'address',
@@ -52,6 +107,7 @@ export function useMemberTable() {
        label: i18n.global.t('address'),
        field: 'address',
        sortable: true,
+        component: ClickableComponent,
      },
      {
        name: 'town',
@@ -59,6 +115,7 @@ export function useMemberTable() {
        label: i18n.global.t('town'),
        field: 'town',
        sortable: true,
+        component: ClickableComponent,
      },
      {
        name: 'zip',
@@ -66,6 +123,7 @@ export function useMemberTable() {
        label: i18n.global.t('zipCode'),
        field: 'zip',
        sortable: true,
+        component: ClickableComponent,
      },
      {
        name: 'phone',
@@ -73,6 +131,7 @@ export function useMemberTable() {
        label: i18n.global.t('phone'),
        field: 'phone',
        sortable: true,
+        component: ClickableComponent,
      },
      {
        name: 'email',
@@ -80,6 +139,7 @@ export function useMemberTable() {
        label: i18n.global.t('email'),
        field: 'email',
        sortable: true,
+        component: ClickableComponent,
      },
      {
        name: 'group',
@@ -87,13 +147,15 @@ export function useMemberTable() {
        label: i18n.global.t('group'),
        field: 'group',
        sortable: true,
+        component: SearchableSelectComponent,
      },
      {
-      name: 'responsiblePerson',
+        name: 'responsible',
        align: 'left' as const,
        label: i18n.global.t('responsible'),
-      field: 'responsiblePerson',
+        field: 'responsible',
        sortable: true,
+        component: SearchableSelectComponent,
      },
      {
        name: 'firstVisit',
@@ -101,6 +163,7 @@ export function useMemberTable() {
        label: i18n.global.t('firstVisit'),
        field: 'firstVisit',
        sortable: true,
+        component: ClickableComponent,
      },
      {
        name: 'lastVisit',
@@ -108,9 +171,18 @@ export function useMemberTable() {
        label: i18n.global.t('lastVisit'),
        field: 'lastVisit',
        sortable: true,
+        component: ClickableComponent,
      },
-    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
-  ]);
+      {
+        name: 'option',
+        align: 'center' as const,
+        label: '',
+        field: 'option',
+        icon: 'option',
+        component: MenuComponent,
+      },
+    ].filter((c) => enabledColumns.value[c.name]),
+  );

  const { NotifyResponse } = useNotify();

@@ -156,6 +228,7 @@ export function useMemberTable() {
  }

  function getRowClass(row: Member) {
+    if (!row.birthday) return '';
    if (isXDaysBeforeAnnualDate(row.birthday, 1)) {
      return 'bg-red-2 text-red-10';
    } else if (isXDaysBeforeAnnualDate(row.birthday, 4)) {
@@ -167,23 +240,31 @@ export function useMemberTable() {
  }

  //updates member list from database
-  function updateMembers() {
+  async function updateMembers(filter?: Members, filterbyName?: boolean) {
    loading.value = true;

-    appApi
-      .get('secure/members')
+    await updateResponsibles().catch((err) => NotifyResponse(err, 'error'));
+    await updateGroups().catch((err) => NotifyResponse(err, 'error'));
+    await appApi
+      .get('members')
      .then((resp) => {
        if (resp.data === null) {
-          members.value = [];
+          allMembers.value = [];
          return;
        }
-        members.value = resp.data as Members;
-        if (members.value === null) {
-          members.value = [];
+        allMembers.value = resp.data as Members;
+        if (allMembers.value === null) {
+          allMembers.value = [];
          return;
        }
-        members.value.forEach((member) => {
-          if (member.birthday !== undefined) {
+        allMembers.value.forEach((member) => {
+          // remove responsible of member if it does not exist in responsible list any longer
+          if (!responsibles.value.some((r) => r.id === member.responsible?.id)) {
+            delete member.responsible;
+          }
+
+          //calculte years if a birth date is entered
+          if (member.birthday) {
            member.age = String(calculateAge(member.birthday));
          }
        });
@@ -194,16 +275,125 @@ export function useMemberTable() {
      })
      .finally(() => {
        loading.value = false;
+        //filter same members out so list is shorter
+        filteredMembers.value = allMembers.value;
+        if (filter) {
+          filteredMembers.value = filteredMembers.value.filter(
+            (m1) =>
+              !filter.some((m2) => {
+                if (filterbyName) {
+                  return m1.firstName === m2.firstName && m1.lastName === m2.lastName;
+                }
+                return m1.id === m2.id;
+              }),
+          );
+        }
+
+        //second filter
+        const list = filterList.value ?? [];
+        if (filterList.value && filterList.value.length > 0) {
+          filteredMembers.value = filteredMembers.value.filter((member) =>
+            list.every((filterItem) => {
+              const keys = filterItem.keys ?? [];
+              if (keys.includes('null')) return true;
+              if (keys.length === 0) return true;
+
+              const value = member[filterItem.field];
+
+              if (value === undefined || value === null) {
+                return keys.includes('None');
+              }
+              if (typeof value === 'number') {
+                return keys.includes(value.toString());
+              }
+              if (typeof value === 'string') {
+                return keys.includes(value);
+              }
+              return false;
+            }),
+          );
+          return;
+        }
      });
  }

+  function setNewFilter(field: string, ...keys: string[]) {
+    filterList.value = [
+      {
+        field: field as keyof Member,
+        keys: keys.flat().map((k) => String(k)),
+      },
+    ];
+  }
+
+  function disableColumns(...columns: string[]) {
+    columns.forEach((col) => {
+      if (col in enabledColumns.value) {
+        enabledColumns.value[col] = false;
+      }
+    });
+  }
+
+  function exportCsv() {
+    const comma = ';';
+    // Extract only columns that have a field (not icons/options)
+    const exportableColumns = columns.value.filter(
+      (col) => typeof col.field === 'string' && col.field !== 'cake' && col.field !== 'option',
+    ) as { field: keyof Member; label: string }[];
+
+    // Build CSV header row
+    const header = exportableColumns.map((col) => col.field).join(comma);
+
+    // Build CSV rows
+    const data = allMembers.value.map((member) =>
+      exportableColumns
+        .map((col) => {
+          const value = member[col.field];
+          // handle nested objects (e.g. responsible)
+          if (typeof value === 'object' && value !== null) {
+            if (
+              'firstName' in value &&
+              'lastName' in value &&
+              typeof value.firstName === 'string' &&
+              typeof value.lastName === 'string'
+            )
+              return `"${value.firstName} ${value.lastName}"`;
+            return `"${JSON.stringify(value)}"`;
+          }
+          return `"${value ?? ''}"`;
+        })
+        .join(comma),
+    );
+
+    // Combine into CSV string
+    const csv = [header, ...data].join('\n');
+
+    // Create blob and trigger download
+    const BOM = '\uFEFF';
+    const blob = new Blob([BOM + csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', i18n.global.t(appName.value) + '.csv');
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+
  return {
-    members,
+    allMembers,
+    filteredMembers,
+    responsibles,
+    responsibleMember,
+    groups,
    pagination,
    columns,
    loading,
    getRowClass,
    updateMembers,
+    setNewFilter,
    isXDaysBeforeAnnualDate,
+    disableColumns,
+    exportCsv,
  };
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Adrian Zürcher	714ca0219a	change version name to 1.2.0 All checks were successful Build Quasar SPA and Go Backend for memberApp / build-spa (push) Successful in 2m41s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, , linux) (push) Successful in 5m49s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, .exe, windows) (push) Successful in 5m50s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm, 6, , linux) (push) Successful in 5m25s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm64, , linux) (push) Successful in 5m33s Details	2025-11-29 16:00:37 +01:00
Adrian Zürcher	dae921528e	fix at initial start undefined app name	2025-11-29 15:59:45 +01:00
Adrian Zürcher	bdcceb53e0	change whole backend and tables for gorm table references simplify tables with table components close #31	2025-11-29 15:59:18 +01:00
Adrian Zürcher	62549c9039	add new day column to event table	2025-11-29 15:55:44 +01:00
Adrian Zürcher	5ecf1eca18	add posibility user can change own password close #16	2025-11-29 15:53:44 +01:00
Adrian Zürcher	a81e9f8349	add country timezone settings to env file close #27	2025-11-29 15:51:38 +01:00
Adrian Zürcher	256b968509	add ignore .back files	2025-11-29 15:49:30 +01:00
Adrian Zürcher	26300e27c3	remove unneccessary padding close #32	2025-11-18 10:03:25 +01:00
Adrian Zürcher	afff7c123a	fix not updating member table close #30	2025-11-17 16:59:23 +01:00
Adrian Zürcher	94dc125a1b	add bage to show attendance amount close #29	2025-11-17 16:58:58 +01:00
Adrian Zürcher	f070a4b0df	fix filter output	2025-11-17 16:57:52 +01:00
Adrian Zürcher	260767680b	remove unused code	2025-11-17 16:57:37 +01:00
Adrian Zürcher	09299c65de	add new component searchable select close #28	2025-11-17 16:57:13 +01:00
Adrian Zürcher	39e5479947	fix wrong filter parameter	2025-11-16 08:42:54 +01:00
Adrian Zürcher	5c15fb5599	change padding to userfriendlier size on phone close #23	2025-11-16 08:42:28 +01:00
Adrian Zürcher	dce451bfc2	add new page header and decrease marging	2025-11-16 08:40:42 +01:00
Adrian Zürcher	bba4486136	fix translation	2025-11-16 08:39:31 +01:00
Adrian Zürcher	a18b01450d	fix wrong input field to select clos #25	2025-11-16 08:39:17 +01:00
Adrian Zürcher	a6f4b47d92	release new version with new group table and member filter function All checks were successful Build Quasar SPA and Go Backend for memberApp / build-spa (push) Successful in 2m28s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, .exe, windows) (push) Successful in 5m50s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, , linux) (push) Successful in 5m51s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm, 6, , linux) (push) Successful in 5m26s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm64, , linux) (push) Successful in 5m28s Details	2025-11-15 14:21:27 +01:00
Adrian Zürcher	8d9220ae2c	add title to every page	2025-11-15 14:20:03 +01:00
Adrian Zürcher	7b17cd99fe	make new localstorage function file	2025-11-15 14:19:45 +01:00
Adrian Zürcher	44f355a5ea	add new group table and filter for member table	2025-11-15 14:17:30 +01:00
Adrian Zürcher	fb27e9c026	add new export option with permissions close #13	2025-11-12 17:17:43 +01:00
Adrian Zürcher	14d2270260	add new enviroment variables and remove cli flags	2025-11-12 16:07:10 +01:00
Adrian Zürcher	7d4d2e4c54	new relase with enviroment variable All checks were successful Build Quasar SPA and Go Backend for memberApp / build-spa (push) Successful in 2m25s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, .exe, windows) (push) Successful in 5m29s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, , linux) (push) Successful in 5m37s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm64, , linux) (push) Successful in 5m29s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm, 6, , linux) (push) Successful in 5m35s Details	2025-11-12 12:18:24 +01:00
Adrian Zürcher	352d0aa4c6	add translation to appName name	2025-11-12 12:16:47 +01:00
Adrian Zürcher	76269e7358	add enviroment variable for golang beckend close #6	2025-11-12 12:16:27 +01:00
Adrian Zürcher	87297a3b97	add tooltip	2025-11-12 10:22:22 +01:00
Adrian Zürcher	b12574994c	make drawer size change for smaller screens	2025-11-12 10:22:12 +01:00
Adrian Zürcher	66bb7c1942	fix darkmode for dialog and add tooltip translation close #20	2025-11-12 10:21:42 +01:00
Adrian Zürcher	f8b79de6a2	make app name changable and move settings parameter to settings close #19	2025-11-12 10:20:44 +01:00
Adrian Zürcher	c7fe7490f1	change to new logo with icongenie form quasar close #17	2025-11-12 10:18:29 +01:00
Adrian Zürcher	334c14a307	add login logout translation	2025-11-11 16:05:25 +01:00
Adrian Zürcher	b9f009162d	remove console logs	2025-11-11 16:05:07 +01:00
Adrian Zürcher	b844f487bc	make darkmode persistent close #15	2025-11-11 16:04:55 +01:00
Adrian Zürcher	829dc074e2	change to personal favicon (could be improved) close #14	2025-11-11 16:04:22 +01:00
Adrian Zürcher	63c7e89dd4	new release All checks were successful Build Quasar SPA and Go Backend for memberApp / build-spa (push) Successful in 2m22s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, .exe, windows) (push) Successful in 5m26s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, , linux) (push) Successful in 5m40s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm, 6, , linux) (push) Successful in 5m22s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm64, , linux) (push) Successful in 5m15s Details	2025-11-11 08:13:54 +01:00
Adrian Zürcher	53a6408466	change birthay as non required	2025-11-11 08:13:01 +01:00
Adrian Zürcher	0793bb5e31	fix missing translation	2025-11-11 08:12:44 +01:00
Adrian Zürcher	8d243302f0	add filter function to exclude existing records	2025-11-11 08:12:23 +01:00
Adrian Zürcher	2cce310fc4	add fallback language to first match if language not avaiable	2025-11-11 08:10:52 +01:00
Adrian Zürcher	a9707dc799	change notification from top left to top center	2025-11-11 08:10:24 +01:00
Adrian Zürcher	67dee7a746	add new column comment close #13	2025-11-11 08:09:41 +01:00
Adrian Zürcher	c7c1b6c7c6	move notification with new marging and close button close #7	2025-11-10 08:09:09 +01:00
Adrian Zürcher	f7d5d9d019	fix localstorage not working on phone close #8	2025-11-09 22:32:22 +01:00
Adrian Zürcher	f1d7d3617d	fix column address missing close #10	2025-11-09 22:31:49 +01:00
Adrian Zürcher	df580d98c0	new release All checks were successful Build Quasar SPA and Go Backend for memberApp / build-spa (push) Successful in 2m19s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, .exe, windows) (push) Successful in 5m32s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, , linux) (push) Successful in 5m34s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm, 6, , linux) (push) Successful in 5m31s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm64, , linux) (push) Successful in 5m33s Details	2025-11-08 12:14:05 +01:00
Adrian Zürcher	06afdf4349	add feature to set user defined expiration on every user close #4	2025-11-08 12:09:56 +01:00
Adrian Zürcher	db96732a62	fix functions existing and delete	2025-11-07 08:34:53 +01:00
Adrian Zürcher	aba4bafb65	add new table feature for responsible person and assignment close #2 All checks were successful Build Quasar SPA and Go Backend for memberApp / build-spa (push) Successful in 2m23s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, .exe, windows) (push) Successful in 5m37s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, , linux) (push) Successful in 5m49s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm, 6, , linux) (push) Successful in 5m37s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm64, , linux) (push) Successful in 5m34s Details	2025-11-06 17:43:20 +01:00
Adrian Zürcher	d57ee4c1e7	fix event not working issue close #1	2025-11-06 09:08:01 +01:00
Adrian Zürcher	9866cc3ffd	fix event edit not working closes #3	2025-11-05 11:30:56 +01:00
paadi	6ec42c6c75	database removed	2025-11-05 11:26:51 +01:00
Adrian Zürcher	7b760afeb3	remove permission object	2025-11-04 15:32:02 +01:00
Adrian Zürcher	21dcf1a476	remove id from table	2025-11-04 15:31:36 +01:00
Adrian Zürcher	35d1a0f734	change wrong permissions	2025-11-04 15:31:21 +01:00
Adrian Zürcher	effbb61707	fix reference problem so value changes only after saving	2025-11-04 15:30:58 +01:00
Adrian Zürcher	7eb5ab9ab2	add env files for dev and production	2025-11-04 15:30:17 +01:00
Adrian Zürcher	aec741f094	add new event and attendance table with automatic now timestamp All checks were successful Build Quasar SPA and Go Backend for memberApp / build-spa (push) Successful in 2m34s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, .exe, windows) (push) Successful in 5m39s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, , linux) (push) Successful in 5m46s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm, 6, , linux) (push) Successful in 5m32s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm64, , linux) (push) Successful in 5m35s Details	2025-11-04 10:59:56 +01:00
Adrian Zürcher	632163d751	fix csv import endpoint and cert flags	2025-10-31 15:27:05 +01:00
Adrian Zürcher	a93f063009	Merge branch 'main' of https://gitea.tecamino.com/paadi/memberApp	2025-10-31 14:54:30 +01:00
Adrian Zürcher	cc3a547961	new package dbHandler accesscontrol memeberdb and login with rights All checks were successful Build Quasar SPA and Go Backend for memberApp / build-spa (push) Successful in 2m20s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, .exe, windows) (push) Successful in 5m27s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, , linux) (push) Successful in 5m32s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm, 6, , linux) (push) Successful in 5m28s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm64, , linux) (push) Successful in 5m29s Details	2025-10-31 14:54:05 +01:00
paadi	fdc8525abe	backend/main.go aktualisiert fix wrong order and description of ssl certificate	2025-10-14 21:29:42 +02:00
paadi	8075d1fe1f	src/components/UploadDialog.vue aktualisiert	2025-10-14 21:23:31 +02:00
paadi	8709989fbe	src/components/UploadDialog.vue aktualisiert Fix absolute url to relative url	2025-10-14 21:22:16 +02:00
Adrian Zürcher	b0d6bb5512	fix binary name All checks were successful Build Quasar SPA and Go Backend for memberApp / build-spa (push) Successful in 2m18s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, .exe, windows) (push) Successful in 5m15s Details Build Quasar SPA and Go Backend for memberApp / build-backend (amd64, , linux) (push) Successful in 5m18s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm64, , linux) (push) Successful in 5m18s Details Build Quasar SPA and Go Backend for memberApp / build-backend (arm, 6, , linux) (push) Successful in 5m20s Details	2025-10-14 16:52:04 +02:00
				`@@ -0,0 +1 @@`
				`VITE_API_URL= https://members.tecamino.com/api`