first commit

2025-10-12 14:56:18 +02:00
parent a9f2e11fe6
commit a908db4f38
92 changed files with 13273 additions and 0 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,7 @@
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+//
+</script>
--- a/src/assets/LOGO_CF-BERN_high_color.svg
+++ b/src/assets/LOGO_CF-BERN_high_color.svg
--- a/src/assets/LOGO_CF-ICON_color.svg
+++ b/src/assets/LOGO_CF-ICON_color.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="246px" height="246px" viewBox="0 0 246 246" style="enable-background:new 0 0 246 246;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#113A68;}
+	.st1{fill:#9E2D29;}
+	.st2{fill:#9B1515;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M166.6,210.9c-11.6,5-24.4,7.8-37.8,7.8c-52.8,0-95.6-42.8-95.6-95.6c0-2.3,0.1-4.6,0.2-6.8
+		c2.4-1.8,10.8-5.2,31.7-5.2s46.4,3.4,71.6,9.4c-13,22.2-15.9,44.7-7.8,62.2C133.6,192.6,143.9,205.2,166.6,210.9"/>
+	<path class="st0" d="M146.9,103.8C102.4,90.7,61.4,88.5,39.7,88.4c0-0.1,0.1-0.2,0.1-0.2c2.5-1.4,8.9-3.3,22.1-3.3
+		c23.7,0,55.7,5.9,86.9,15.8C148.2,101.7,147.5,102.7,146.9,103.8"/>
+	<path class="st0" d="M168.4,49.9c0.7,7.9-2.7,18.9-10.6,34.4C117.3,69.2,78.9,63.7,55.4,61.7c17.5-21,43.9-34.3,73.4-34.3
+		c7.8,0,15.5,0.9,22.8,2.7l3.8,2.5C164.2,38.3,167.8,43.1,168.4,49.9"/>
+	<path class="st0" d="M209.6,71.8c8.7,13.7,14,29.8,14.7,47c-3.9-2.6-8.2-5.3-13.1-8.3C214,95.5,212.6,82.5,209.6,71.8"/>
+	<path class="st0" d="M206.8,144.8c4.5,2.1,9,4.5,13.2,6.7c-2.2,6.9-5.1,13.5-8.7,19.6c-0.6-4-2.2-7.4-3.5-10.3
+		c-2.5-5.6-4.2-9.3-1.2-15.7C206.8,145,206.8,144.9,206.8,144.8"/>
+	<path class="st0" d="M207.2,125.1c5.4,2.9,11.3,6.2,16.6,9.2c-0.1,1.2-0.3,2.4-0.5,3.7c-5.7-3.5-11.8-7-17.2-9.9
+		C206.4,127.1,206.8,126.1,207.2,125.1"/>
+	<path class="st1" d="M185.2,205.6c41.5-36.8,4.9-39.5,15.9-63.1c-14,12.6-44,47.2-18,64.1C164.7,168.9,207.4,157.8,185.2,205.6"/>
+	<path class="st2" d="M198.1,130.8c9.6,5,24.5,13.5,33.5,20c-9.4-5.4-24.7-13-34.9-17.4c-2,3.9-4.3,7.8-7,11.8
+		c-10.3,15-36.7,44.6-12.5,61.4c-51.2-7.1-57.1-49.2-33.1-86.7c0.8-1.2,1.5-2.4,2.3-3.6c-62.2-16.2-119.6-14.7-119.8,0.3
+		c-14.3-6.8-26.2-20.1-2.1-21.8c9.6-0.7,65.2-2.4,125.1,16.2c3-4.9,5.8-9.6,8.2-13.9c-63.3-21.6-124.4-24-125.5-8.6
+		C18.4,81,7.4,67,31.6,66.7c9.9-0.1,68.5,1.5,129.1,25.3c21.2-39.5,16.4-52.7-2-64.6c21.6,1.5,57.2,37,45.6,86.1
+		c8.8,5.4,22.8,14.1,31,20.7c-8.4-5.5-22.6-13.3-31.7-17.9C202.2,121.1,200.4,125.9,198.1,130.8"/>
+	<path class="st2" d="M185.2,205.6c41.5-36.8,4.9-39.5,15.9-63.1c-14,12.6-44,47.2-18,64.1C164.7,168.9,207.4,157.8,185.2,205.6"/>
+</g>
+</svg>
--- a/src/assets/lang/de-CH.yaml
+++ b/src/assets/lang/de-CH.yaml
@@ -0,0 +1,48 @@
+language: Sprach
+prename: Vorname
+lastname: Nachname
+birthday: Geburtstag
+email: Email
+group: Gruppe
+age: Auter
+address: Adresse
+town: Ort
+zipCode: Postleitzau
+phone: Telefon
+responsible: Verantwortlech
+firstVisit: Erste Bsuech
+lastVisit: Letscht Bsuech
+search: Suechi
+noDataAvailable: Keni Date
+importCSV: importier CSV
+selectMemberOptions: Wähle Mitglieder Optione
+addNewMember: Neues Mitglied
+csvOptions: CSV Optionen
+delete: Lösche
+edit: Editiere
+confirm: Bestätige
+cancel: Abbreche
+doYouWantToDelete: Wosch dä Iitrag lösche
+close: Zu tue
+loading: lade
+recordsPerPage: 'Iiträg pro Site:'
+recordSelected: Iiträg usgwäut
+selected: Usgwäut
+settings: Iistellige
+databaseName: Datebank Name
+token: Schlüssu
+login: Amäude
+user: Benutzer
+password: Passwort
+isRequired: isch erforderlich
+colors: Farbe
+primaryColor: Primär Farb
+secondaryColor: Sekondär Farb
+database: Datebank
+general: Augemein
+setColors: Setz Farbe
+icon: Ikon
+resetColors: Farbe zrügsetze
+save: Spichere
+users: Benutzer
+roles: Rollen
--- a/src/assets/lang/de-DE.yaml
+++ b/src/assets/lang/de-DE.yaml
@@ -0,0 +1,48 @@
+language: Sprache
+prename: Vorname
+lastname: Nachname
+birthday: Geburtstag
+email: Email
+group: Gruppe
+age: Alter
+address: Adresse
+town: Ort
+zipCode: Postleitzahl
+phone: Telefon
+responsible: Verantwortlich
+firstVisit: Erster Besuch
+lastVisit: Letzter Besuch
+search: Suche
+noDataAvailable: Keine Daten
+importCSV: importiere CSV
+selectMemberOptions: Wähle Mitglieder Optionen
+addNewMember: Neues Mitglied
+csvOptions: CSV Optionen
+delete: Löschen
+edit: Editieren
+confirm: Bestätigen
+cancel: Abbrechen
+doYouWantToDelete: Willst du folgenden Eintrag löschen
+close: Schliessen
+loading: laden
+recordsPerPage: 'Einträge pro Seite:'
+recordSelected: Eintrag ausgewählt
+selected: Ausgewählt
+settings: Einstellungen
+databaseName: Datenbank Name
+token: Schlüssel
+login: Anmelden
+user: Benutzer
+password: Passwort
+isRequired: ist erforderlich
+colors: Farben
+primaryColor: Primär Farbe
+secondaryColor: Sekondär Farbe
+database: Datenbank
+general: Allgemein
+setColors: Setze Farben
+icon: Ikon
+resetColors: Farben zurücksetzen
+save: Speichern
+users: Benutzer
+roles: Rollen
--- a/src/assets/lang/en-US.yaml
+++ b/src/assets/lang/en-US.yaml
@@ -0,0 +1,48 @@
+language: Language
+prename: Prename
+lastname: Name
+birthday: Birthday
+email: Email
+group: Group
+age: Age
+address: Address
+town: Town
+zipCode: Zip Code
+phone: Phone
+responsible: Responsible
+firstVisit: First Visit
+lastVisit: Last Visit
+search: search
+noDataAvailable: No data available
+importCSV: Import CSV
+selectMemberOptions: Select Member Options
+addNewMember: Add new Member
+csvOptions: CSV Options
+delete: Delete
+edit: Edit
+confirm: Confirm
+cancel: Cancel
+doYouWantToDelete: Do you want to delete
+close: Close
+loading: loading
+recordsPerPage: 'Records per page:'
+recordSelected: record selected
+selected: Selected
+settings: Settings
+databaseName: Database Name
+token: Token
+login: Login
+user: User
+password: Password
+isRequired: is required
+colors: Colors
+primaryColor: Primary Color
+secondaryColor: Secondary Color
+database: Database
+general: General
+setColors: Set Colors
+icon: Icon
+resetColors: Reset Colors
+save: Save
+users: Users
+roles: Roles
--- a/src/assets/lang/es-ES.yaml
+++ b/src/assets/lang/es-ES.yaml
@@ -0,0 +1,3 @@
+hello: hola
+goodbye: adios
+language: Lengua
--- a/src/assets/pottershouse.svg
+++ b/src/assets/pottershouse.svg
--- a/src/assets/quasar-logo-vertical.svg
+++ b/src/assets/quasar-logo-vertical.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 360">
+	<path
+		d="M43.4 303.4c0 3.8-2.3 6.3-7.1 6.3h-15v-22h14.4c4.3 0 6.2 2.2 6.2 5.2 0 2.6-1.5 4.4-3.4 5 2.8.4 4.9 2.5 4.9 5.5zm-8-13H24.1v6.9H35c2.1 0 4-1.3 4-3.8 0-2.2-1.3-3.1-3.7-3.1zm5.1 12.6c0-2.3-1.8-3.7-4-3.7H24.2v7.7h11.7c3.4 0 4.6-1.8 4.6-4zm36.3 4v2.7H56v-22h20.6v2.7H58.9v6.8h14.6v2.3H58.9v7.5h17.9zm23-5.8v8.5H97v-8.5l-11-13.4h3.4l8.9 11 8.8-11h3.4l-10.8 13.4zm19.1-1.8V298c0-7.9 5.2-10.7 12.7-10.7 7.5 0 13 2.8 13 10.7v1.4c0 7.9-5.5 10.8-13 10.8s-12.7-3-12.7-10.8zm22.7 0V298c0-5.7-3.9-8-10-8-6 0-9.8 2.3-9.8 8v1.4c0 5.8 3.8 8.1 9.8 8.1 6 0 10-2.3 10-8.1zm37.2-11.6v21.9h-2.9l-15.8-17.9v17.9h-2.8v-22h3l15.6 18v-18h2.9zm37.9 10.2v1.3c0 7.8-5.2 10.4-12.4 10.4H193v-22h11.2c7.2 0 12.4 2.8 12.4 10.3zm-3 0c0-5.3-3.3-7.6-9.4-7.6h-8.4V307h8.4c6 0 9.5-2 9.5-7.7V298zm50.8-7.6h-9.7v19.3h-3v-19.3h-9.7v-2.6h22.4v2.6zm34.4-2.6v21.9h-3v-10.1h-16.8v10h-2.8v-21.8h2.8v9.2H296v-9.2h2.9zm34.9 19.2v2.7h-20.7v-22h20.6v2.7H316v6.8h14.5v2.3H316v7.5h17.8zM24 340.2v7.3h13.9v2.4h-14v9.6H21v-22h20v2.7H24zm41.5 11.4h-9.8v7.9H53v-22h13.3c5.1 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6H66c3.1 0 5.3-1.5 5.3-4.7 0-3.3-2.2-4.1-5.3-4.1H55.7v8.8zm47.9 6.2H89l-2 4.3h-3.2l10.7-22.2H98l10.7 22.2h-3.2l-2-4.3zm-1-2.3l-6.3-13-6 13h12.2zm46.3-15.3v21.9H146v-17.2L135.7 358h-2.1l-10.2-15.6v17h-2.8v-21.8h3l11 16.9 11.3-17h3zm35 19.3v2.6h-20.7v-22h20.6v2.7H166v6.8h14.5v2.3H166v7.6h17.8zm47-19.3l-8.3 22h-3l-7.1-18.6-7 18.6h-3l-8.2-22h3.3L204 356l6.8-18.5h3.4L221 356l6.6-18.5h3.3zm10 11.6v-1.4c0-7.8 5.2-10.7 12.7-10.7 7.6 0 13 2.9 13 10.7v1.4c0 7.9-5.4 10.8-13 10.8-7.5 0-12.7-3-12.7-10.8zm22.8 0v-1.4c0-5.7-4-8-10-8s-9.9 2.3-9.9 8v1.4c0 5.8 3.8 8.2 9.8 8.2 6.1 0 10-2.4 10-8.2zm28.3 2.4h-9.8v7.9h-2.8v-22h13.2c5.2 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6h10.2c3 0 5.2-1.5 5.2-4.7 0-3.3-2.1-4.1-5.2-4.1h-10.2v8.8zm40.3-1.5l-6.8 5.6v6.4h-2.9v-22h2.9v12.3l15.2-12.2h3.7l-9.9 8.1 10.3 13.8h-3.6l-8.9-12z" />
+	<path fill="#050A14"
+		d="M188.4 71.7a10.4 10.4 0 01-20.8 0 10.4 10.4 0 1120.8 0zM224.2 45c-2.2-3.9-5-7.5-8.2-10.7l-12 7c-3.7-3.2-8-5.7-12.6-7.3a49.4 49.4 0 00-9.7 13.9 59 59 0 0140.1 14l7.6-4.4a57 57 0 00-5.2-12.5zM178 125.1c4.5 0 9-.6 13.4-1.7v-14a40 40 0 0012.5-7.2 47.7 47.7 0 00-7.1-15.3 59 59 0 01-32.2 27.7v8.7c4.4 1.2 8.9 1.8 13.4 1.8zM131.8 45c-2.3 4-4 8.1-5.2 12.5l12 7a40 40 0 000 14.4c5.7 1.5 11.3 2 16.9 1.5a59 59 0 01-8-41.7l-7.5-4.3c-3.2 3.2-6 6.7-8.2 10.6z" />
+	<path fill="#00B4FF"
+		d="M224.2 98.4c2.3-3.9 4-8 5.2-12.4l-12-7a40 40 0 000-14.5c-5.7-1.5-11.3-2-16.9-1.5a59 59 0 018 41.7l7.5 4.4c3.2-3.2 6-6.8 8.2-10.7zm-92.4 0c2.2 4 5 7.5 8.2 10.7l12-7a40 40 0 0012.6 7.3c4-4.1 7.3-8.8 9.7-13.8a59 59 0 01-40-14l-7.7 4.4c1.2 4.3 3 8.5 5.2 12.4zm46.2-80c-4.5 0-9 .5-13.4 1.7V34a40 40 0 00-12.5 7.2c1.5 5.7 4 10.8 7.1 15.4a59 59 0 0132.2-27.7V20a53.3 53.3 0 00-13.4-1.8z" />
+	<path fill="#00B4FF"
+		d="M178 9.2a62.6 62.6 0 11-.1 125.2A62.6 62.6 0 01178 9.2m0-9.2a71.7 71.7 0 100 143.5A71.7 71.7 0 00178 0z" />
+	<path fill="#050A14"
+		d="M96.6 212v4.3c-9.2-.8-15.4-5.8-15.4-17.8V180h4.6v18.4c0 8.6 4 12.6 10.8 13.5zm16-31.9v18.4c0 8.9-4.3 12.8-10.9 13.5v4.4c9.2-.7 15.5-5.6 15.5-18v-18.3h-4.7zM62.2 199v-2.2c0-12.7-8.8-17.4-21-17.4-12.1 0-20.7 4.7-20.7 17.4v2.2c0 12.8 8.6 17.6 20.7 17.6 1.5 0 3-.1 4.4-.3l11.8 6.2 2-3.3-8.2-4-6.4-3.1a32 32 0 01-3.6.2c-9.8 0-16-3.9-16-13.3v-2.2c0-9.3 6.2-13.1 16-13.1 9.9 0 16.3 3.8 16.3 13.1v2.2c0 5.3-2.1 8.7-5.6 10.8l4.8 2.4c3.4-2.8 5.5-7 5.5-13.2zM168 215.6h5.1L156 179.7h-4.8l17 36zM143 205l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.8-3.7H143zm133.7 10.7h5.2l-17.3-35.9h-4.8l17 36zm-25-10.7l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.7-3.7h-14.8zm73.8-2.5c6-1.2 9-5.4 9-11.4 0-8-4.5-10.9-12.9-10.9h-21.4v35.5h4.6v-31.3h16.5c5 0 8.5 1.4 8.5 6.7 0 5.2-3.5 7.7-8.5 7.7h-11.4v4.1h10.7l9.3 12.8h5.5l-9.9-13.2zm-117.4 9.9c-9.7 0-14.7-2.5-18.6-6.3l-2.2 3.8c5.1 5 11 6.7 21 6.7 1.6 0 3.1-.1 4.6-.3l-1.9-4h-3zm18.4-7c0-6.4-4.7-8.6-13.8-9.4l-10.1-1c-6.7-.7-9.3-2.2-9.3-5.6 0-2.5 1.4-4 4.6-5l-1.8-3.8c-4.7 1.4-7.5 4.2-7.5 8.9 0 5.2 3.4 8.7 13 9.6l11.3 1.2c6.4.6 8.9 2 8.9 5.4 0 2.7-2.1 4.7-6 5.8l1.8 3.9c5.3-1.6 8.9-4.7 8.9-10zm-20.3-21.9c7.9 0 13.3 1.8 18.1 5.7l1.8-3.9a30 30 0 00-19.6-5.9c-2 0-4 .1-5.7.3l1.9 4 3.5-.2z" />
+	<path fill="#00B4FF"
+		d="M.5 251.9c29.6-.5 59.2-.8 88.8-1l88.7-.3 88.7.3 44.4.4 44.4.6-44.4.6-44.4.4-88.7.3-88.7-.3a7981 7981 0 01-88.8-1z" />
+	<path fill="none" d="M-565.2 324H-252v15.8h-313.2z" />
+</svg>
--- a/src/boot/.gitkeep
+++ b/src/boot/.gitkeep
--- a/src/boot/auth.ts
+++ b/src/boot/auth.ts
@@ -0,0 +1,23 @@
+import { boot } from 'quasar/wrappers';
+import { appApi } from './axios';
+import { createPinia } from 'pinia';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { useLogin } from 'src/vueLib/login/useLogin';
+
+const pinia = createPinia();
+
+export default boot(async ({ app }) => {
+  app.use(pinia);
+  const useStore = useUserStore();
+  const login = useLogin();
+
+  await appApi
+    .get('/login/me')
+    .then((resp) => {
+      useStore.setUser({ username: resp.data.username, role: resp.data.role });
+      login.refresh().catch((err) => console.error(err));
+    })
+    .catch(() => {
+      login.logout().catch((err) => console.error(err));
+    });
+});
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -0,0 +1,125 @@
+import { boot } from 'quasar/wrappers';
+import type { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import axios from 'axios';
+import { useLogin } from 'src/vueLib/login/useLogin';
+
+const host = window.location.hostname;
+export const portApp = 9500;
+
+// Create axios instance
+export const appApi: AxiosInstance = axios.create({
+  baseURL: `http://${host}:${portApp}/api`,
+  timeout: 10000,
+  withCredentials: true,
+});
+
+interface RetryRequestConfig extends AxiosRequestConfig {
+  _retry?: boolean;
+}
+
+const noRefreshEndpoints = ['/login', '/secure/login/refresh', '/logout'];
+
+// ========= Refresh Queue Handling ========= //
+let isRefreshing = false;
+
+interface FailedRequest {
+  resolve: (value?: unknown) => void;
+  reject: (reason?: Error) => void;
+}
+
+let failedQueue: FailedRequest[] = [];
+
+const processQueue = (error: Error | null): void => {
+  failedQueue.forEach((prom) => {
+    if (error) prom.reject(error);
+    else prom.resolve();
+  });
+  failedQueue = [];
+};
+// ========================================= //
+
+appApi.interceptors.response.use(
+  (response: AxiosResponse) => response,
+
+  async (error: AxiosError<unknown, RetryRequestConfig>): Promise<AxiosResponse> => {
+    const { refresh, logout } = useLogin();
+    const originalRequest = error.config as RetryRequestConfig | undefined;
+
+    // Skip refresh for login/logout endpoints
+    if (
+      !originalRequest ||
+      noRefreshEndpoints.some((url) => originalRequest.url?.includes(url ?? ''))
+    ) {
+      const message = error instanceof Error ? error.message : JSON.stringify(error);
+      throw new Error(message);
+    }
+
+    // Handle unauthorized responses
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        // Wait until refresh completes
+        return new Promise<AxiosResponse>((resolve, reject) => {
+          failedQueue.push({
+            resolve: () => {
+              void appApi(originalRequest).then(resolve).catch(reject);
+            },
+            reject,
+          });
+        });
+      }
+
+      originalRequest._retry = true;
+      isRefreshing = true;
+
+      try {
+        const refreshed = await refresh().catch(() => false);
+        processQueue(null);
+
+        if (refreshed) {
+          // Token refreshed successfully → retry request
+          return appApi(originalRequest);
+        }
+
+        // Refresh returned false → logout
+        console.warn('[Axios] Refresh returned false, logging out');
+        await logout();
+        throw new Error('Token refresh failed');
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        console.error('[Axios] Token refresh failed:', e.message);
+
+        // Always logout, even if refresh throws
+        try {
+          await logout();
+        } catch (logoutErr) {
+          console.error('[Axios] Logout failed after token refresh error:', logoutErr);
+        }
+
+        processQueue(e);
+        throw e;
+      } finally {
+        isRefreshing = false;
+      }
+    }
+
+    // Not a 401 — rethrow as Error
+
+    let msg = '';
+    if (error && (error as AxiosError).isAxiosError) {
+      const axiosError = error as AxiosError<{ message?: string }>;
+      msg = axiosError.response?.data?.message ?? axiosError.message;
+    } else {
+      msg = error instanceof Error ? error.message : JSON.stringify(error);
+    }
+
+    throw new Error(msg);
+  },
+);
+
+// ======== Boot registration for Quasar ======== //
+export default boot(({ app }) => {
+  app.config.globalProperties.$axios = axios;
+  app.config.globalProperties.$appApi = appApi;
+});
+
+export { axios };
--- a/src/boot/lang.js
+++ b/src/boot/lang.js
@@ -0,0 +1,38 @@
+import { createI18n } from 'vue-i18n';
+import yaml from 'js-yaml';
+
+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', {
+  eager: true,
+  import: 'default',
+  query: '?raw',
+});
+
+for (const path in modules) {
+  const raw = modules[path];
+  const parsed = yaml.load(raw);
+
+  // Extract the file name (e.g., "en.yaml" → "en")
+  const locale = path.split('/').pop().replace('.yaml', '');
+
+  lang.push(locale);
+  messages[locale] = parsed;
+}
+
+const i18n = createI18n({
+  legacy: false, // Composition API mode
+  locale: savedLang || systemLocale,
+  fallbackLocale: systemLocale,
+  messages,
+});
+
+export default ({ app }) => {
+  app.use(i18n);
+};
+
+export { i18n };
--- a/src/boot/quasar-global.ts
+++ b/src/boot/quasar-global.ts
@@ -0,0 +1,19 @@
+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';
+
+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') ?? '';
+  databaseName.value = localStorage.getItem('databaseName') ?? '';
+  document.documentElement.style.setProperty('--q-primary', localStorage.getItem('primaryColor'));
+  document.documentElement.style.setProperty(
+    '--q-secondary',
+    localStorage.getItem('secondaryColor'),
+  );
+});
--- a/src/components/EditAllDialog.vue
+++ b/src/components/EditAllDialog.vue
@@ -0,0 +1,139 @@
+<template>
+  <DialogFrame
+    ref="dialog"
+    :header-title="
+      newMember ? 'Add new Member' : 'Edit ' + localMember.firstName + ' ' + localMember.lastName
+    "
+    :height="600"
+    :width="500"
+  >
+    <div class="row justify-center q-gutter-md">
+      <q-input
+        class="q-ml-md col-5"
+        label="First Name"
+        filled
+        v-model="localMember.firstName"
+        autofocus
+      ></q-input>
+      <q-input
+        class="q-ml-md col-5"
+        label="Last Name"
+        filled
+        v-model="localMember.lastName"
+      ></q-input>
+      <q-input
+        class="q-ml-md col-5"
+        label="Birthday"
+        filled
+        v-model="localMember.birthday"
+      ></q-input>
+      <q-input class="q-ml-md col-5" label="Address" filled v-model="localMember.address"></q-input>
+      <q-input class="q-ml-md col-5" label="Town" filled v-model="localMember.town"></q-input>
+      <q-input class="q-ml-md col-5" label="Zip Code" filled v-model="localMember.zip"></q-input>
+      <q-input class="q-ml-md col-5" label="Phone" filled v-model="localMember.phone"></q-input>
+      <q-input class="q-ml-md col-5" label="E-Mail" filled v-model="localMember.email"></q-input>
+      <q-input class="q-ml-md col-5" label="Group" filled v-model="localMember.group"></q-input>
+      <q-input
+        class="q-ml-md col-5"
+        label="Responsible"
+        filled
+        v-model="localMember.responsiblePerson"
+      ></q-input>
+      <q-input
+        v-if="!newMember"
+        class="q-ml-md col-11"
+        label="First Visit"
+        filled
+        v-model="localMember.firstVisit"
+      ></q-input>
+      <q-input
+        v-if="!newMember"
+        class="q-ml-md col-11"
+        label="Last Visit"
+        filled
+        v-model="localMember.lastVisit"
+      ></q-input>
+    </div>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">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 { Member } from 'src/vueLib/models/member';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const { NotifyResponse } = useNotify();
+const dialog = ref();
+const newMember = ref(false);
+const localMember = ref<Member>({
+  id: 0,
+  firstName: '',
+  lastName: '',
+  birthday: '',
+  age: '',
+  address: '',
+  town: '',
+  zip: '',
+  phone: '',
+  email: '',
+  group: '',
+  responsiblePerson: '',
+  firstVisit: '',
+  lastVisit: '',
+});
+
+const emit = defineEmits(['update-member']);
+
+function open(member: Member | null) {
+  if (member === undefined) {
+    return;
+  }
+
+  if (member !== null) {
+    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;
+  }
+
+  dialog.value?.open();
+}
+
+function save() {
+  let query = 'secure/members/edit?id=' + localMember.value.id;
+  if (newMember.value) {
+    query = 'ecure/members/add';
+  }
+
+  appApi
+    .post(query, JSON.stringify(localMember.value))
+    .then(() => {
+      emit('update-member', '');
+      dialog.value.close();
+    })
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+
+defineExpose({ open });
+</script>
--- a/src/components/EditOneDialog.vue
+++ b/src/components/EditOneDialog.vue
@@ -0,0 +1,207 @@
+<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>
+    </div>
+    <div class="row justify-center">
+      <q-btn class="q-ma-md" color="primary" no-caps @click="save">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 { Member } from 'src/vueLib/models/member';
+import { useNotify } from 'src/vueLib/general/useNotify';
+
+const dialog = ref();
+const localMember = ref();
+const localTitle = ref('');
+const localField = ref('');
+const value = ref();
+
+const emit = defineEmits(['update-member']);
+const { NotifyResponse } = useNotify();
+
+function open(label: string, field: string, member: Member) {
+  localTitle.value = label;
+  localField.value = field;
+  localMember.value = member;
+
+  switch (field) {
+    case 'firstName':
+      value.value = member.firstName;
+      break;
+    case 'lastName':
+      value.value = member.lastName;
+      break;
+    case 'birthday':
+      value.value = member.birthday;
+      break;
+    case 'address':
+      value.value = member.address;
+      break;
+    case 'town':
+      value.value = member.town;
+      break;
+    case 'zip':
+      value.value = member.zip;
+      break;
+    case 'phone':
+      value.value = member.phone;
+      break;
+    case 'email':
+      value.value = member.email;
+      break;
+    case 'group':
+      value.value = member.group;
+      break;
+    case 'responsiblePerson':
+      value.value = member.responsiblePerson;
+      break;
+    case 'firstVisit':
+      value.value = member.firstVisit;
+      break;
+    case 'lastVisit':
+      value.value = member.lastVisit;
+      break;
+  }
+  dialog.value?.open();
+}
+
+function save() {
+  const query = 'secure/members/edit?id=' + localMember.value.id;
+  let payload = {};
+
+  switch (localField.value) {
+    case 'firstName':
+      if (value.value === localMember.value.firstName) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        firstName: value.value,
+      };
+      break;
+    case 'lastName':
+      if (value.value === localMember.value.lastName) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        lastName: value.value,
+      };
+      break;
+    case 'birthday':
+      if (value.value === localMember.value.birthday) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        birthday: value.value,
+      };
+      break;
+    case 'address':
+      if (value.value === localMember.value.address) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        address: value.value,
+      };
+      break;
+    case 'town':
+      if (value.value === localMember.value.town) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        town: value.value,
+      };
+      break;
+    case 'zip':
+      if (value.value === localMember.value.zip) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        zip: value.value,
+      };
+      break;
+    case 'phone':
+      if (value.value === localMember.value.phone) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        phone: value.value,
+      };
+      break;
+    case 'email':
+      if (value.value === localMember.value.email) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        email: value.value,
+      };
+      break;
+    case 'group':
+      if (value.value === localMember.value.group) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        group: value.value,
+      };
+      break;
+    case 'responsiblePerson':
+      if (value.value === localMember.value.responsiblePerson) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        responsiblePerson: value.value,
+      };
+      break;
+    case 'firstVisit':
+      if (value.value === localMember.value.firstVisit) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        firstVisit: value.value,
+      };
+      break;
+    case 'lastVisit':
+      if (value.value === localMember.value.lastVisit) {
+        dialog.value.close();
+        return;
+      }
+      payload = {
+        lastVisit: value.value,
+      };
+      break;
+  }
+  appApi
+    .post(query, payload)
+    .then(() => {
+      emit('update-member', '');
+      dialog.value.close();
+    })
+    .catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+}
+
+defineExpose({ open });
+</script>
--- a/src/components/UploadDialog.vue
+++ b/src/components/UploadDialog.vue
@@ -0,0 +1,218 @@
+<template>
+  <DialogFrame ref="dialog" header-title="Import CSV" :height="dialogHeight" :width="dialogWidth">
+    <div class="column q-gutter-xs">
+      <div class="row">
+        <q-uploader
+          style="max-width: 300px"
+          :url="`http://localhost:` + portApp + `/api/members/import/csv`"
+          label="Import CSV"
+          multiple
+          accept=".csv"
+          field-name="file"
+          method="POST"
+          :form-fields="metaData"
+          v-on:failed="onImportFail"
+          :headers="[{ name: 'Accept', value: 'application/json' }]"
+          @uploaded="onUploaded"
+        />
+      </div>
+      <q-card :flat="!showOptions">
+        <div class="row q-ma-sm">
+          <div class="text-bold q-ma-sm">
+            <q-btn
+              dense
+              flat
+              size="sm"
+              :icon="showOptions ? 'remove' : 'add'"
+              @click="showOptions = !showOptions"
+            ></q-btn>
+            CSV options
+          </div>
+          <div class="row justify-center q-gutter-md">
+            <q-input
+              v-if="showOptions"
+              class="col-4"
+              label="Row Index of Column titles"
+              dense
+              borderless
+              type="number"
+              v-model.number="data.rowIndex"
+            ></q-input>
+            <q-input
+              v-if="showOptions"
+              class="col-4"
+              label="Seperator"
+              dense
+              borderless
+              v-model="data.seperator"
+            ></q-input>
+            <q-space class="col-1"></q-space>
+            <q-input
+              v-if="showOptions"
+              class="col-2"
+              label="First Name"
+              dense
+              borderless
+              v-model="data.firstName"
+              autofocus
+            ></q-input>
+            <q-input
+              v-if="showOptions"
+              class="col-2"
+              label="Last Name"
+              dense
+              borderless
+              v-model="data.lastName"
+            ></q-input>
+            <q-input
+              v-if="showOptions"
+              class="col-2"
+              label="Birthday"
+              dense
+              borderless
+              v-model="data.birthday"
+            ></q-input>
+            <q-input
+              v-if="showOptions"
+              class="col-2"
+              label="Address"
+              dense
+              borderless
+              v-model="data.address"
+            ></q-input>
+            <q-input
+              v-if="showOptions"
+              class="col-2"
+              label="Town"
+              dense
+              borderless
+              v-model="data.town"
+            ></q-input>
+            <q-input
+              v-if="showOptions"
+              class="col-2"
+              label="Zip Code"
+              dense
+              borderless
+              v-model="data.zip"
+            ></q-input>
+            <q-input
+              v-if="showOptions"
+              class="col-2"
+              label="Phone"
+              dense
+              borderless
+              v-model="data.phone"
+            ></q-input>
+            <q-input
+              v-if="showOptions"
+              class="col-2"
+              label="E-Mail"
+              dense
+              borderless
+              v-model="data.email"
+            ></q-input>
+          </div>
+        </div>
+      </q-card>
+      <div class="row justify-end q-ma-sm">
+        <q-btn no-caps color="primary" class="col-3" v-close-popup>{{ $t('close') }}</q-btn>
+      </div>
+    </div>
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+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);
+
+const { NotifyResponse } = useNotify();
+
+const emit = defineEmits(['update-upload']);
+
+const dialog = ref();
+const showOptions = ref(true);
+const data = ref<MetaData>({
+  rowIndex: 0,
+  seperator: ';',
+  firstName: 'firstName',
+  lastName: 'lastName',
+  birthday: 'birthday',
+  address: 'address',
+  town: 'town',
+  zip: 'zip',
+  phone: 'phone',
+  email: 'email',
+});
+
+const metaData = ref([
+  { name: 'rowIndex', value: String(data.value.rowIndex) },
+  { name: 'seperator', value: data.value.seperator },
+  { name: 'firstName', value: data.value.firstName },
+  { name: 'lastName', value: data.value.lastName },
+  { name: 'birthday', value: data.value.birthday },
+  { name: 'address', value: data.value.address },
+  { name: 'town', value: data.value.town },
+  { name: 'zip', value: data.value.zip },
+  { name: 'phone', value: data.value.phone },
+  { name: 'email', value: data.value.email },
+]);
+
+function open() {
+  showOptions.value = false;
+  dialog.value?.open();
+}
+
+watch(showOptions, () => {
+  if (dialogWidth.value === 500) {
+    dialogWidth.value = 325;
+    dialogHeight.value = 325;
+    return;
+  }
+  dialogHeight.value = 500;
+  dialogWidth.value = 500;
+});
+
+watch(
+  data,
+  () => {
+    metaData.value = [
+      { name: 'rowIndex', value: String(data.value.rowIndex) },
+      { name: 'seperator', value: data.value.seperator },
+      { name: 'firstName', value: data.value.firstName },
+      { name: 'lastName', value: data.value.lastName },
+      { name: 'birthday', value: data.value.birthday },
+      { name: 'address', value: data.value.address },
+      { name: 'town', value: data.value.town },
+      { name: 'zip', value: data.value.zip },
+      { name: 'phone', value: data.value.phone },
+      { name: 'email', value: data.value.email },
+    ];
+  },
+  { deep: true },
+);
+
+function onImportFail(info: { files: readonly File[]; xhr: XMLHttpRequest }) {
+  const response = JSON.parse(info.xhr.responseText);
+  if (response.message) {
+    NotifyResponse(response.message, 'error', 15000);
+  }
+  emit('update-upload');
+}
+
+function onUploaded(info: { files: readonly File[]; xhr: XMLHttpRequest }) {
+  const response = JSON.parse(info.xhr.responseText);
+  if (response.message) {
+    NotifyResponse(response.message);
+  }
+  emit('update-upload');
+}
+
+defineExpose({ open });
+</script>
--- a/src/components/dialog/OkDialog.vue
+++ b/src/components/dialog/OkDialog.vue
@@ -0,0 +1,92 @@
+<template>
+  <q-dialog ref="dialog">
+    <q-card :style="'width:' + props.width">
+      <q-card-section
+        v-if="props.dialogLabel"
+        class="text-h6 text-center"
+        :class="'text-' + props.labelColor"
+        >{{ props.dialogLabel }}</q-card-section
+      >
+      <q-card-section v-if="props.text" class="text-center" style="white-space: pre-line">{{
+        props.text
+      }}</q-card-section>
+      <q-card-actions align="right" class="text-primary">
+        <q-btn
+          v-if="props.buttonCancelLabel"
+          :flat="props.buttonCancelFlat"
+          :label="props.buttonCancelLabel"
+          v-close-popup
+        >
+        </q-btn>
+        <q-btn
+          v-if="props.buttonOkLabel"
+          :flat="props.buttonOkFlat"
+          :label="props.buttonOkLabel"
+          :color="props.buttonOkColor"
+          v-close-popup
+          @click="confirm"
+        >
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  buttonOkLabel: {
+    type: String,
+    default: 'OK',
+  },
+  buttonOkColor: {
+    type: String,
+    default: '',
+  },
+  buttonOkFlat: {
+    type: Boolean,
+    default: true,
+  },
+  labelColor: {
+    type: String,
+    default: 'primary',
+  },
+  dialogLabel: {
+    type: String,
+    default: '',
+  },
+  text: {
+    type: String,
+    default: '',
+  },
+  buttonCancelLabel: {
+    type: String,
+    default: '',
+  },
+  buttonCancelFlat: {
+    type: Boolean,
+    default: true,
+  },
+  width: {
+    type: String,
+    default: '300px',
+  },
+});
+
+const emit = defineEmits(['update-confirm']);
+
+const dialog = ref();
+const localInput = ref();
+
+const open = (input?: unknown) => {
+  localInput.value = input;
+  dialog.value?.show();
+};
+
+const confirm = () => {
+  emit('update-confirm', localInput.value);
+};
+
+defineExpose({ open });
+</script>
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -0,0 +1 @@
+// app global css in SCSS form
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -0,0 +1,25 @@
+// Quasar SCSS (& Sass) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+$primary: #1976d2;
+$secondary: #26a69a;
+$accent: #9c27b0;
+
+$dark: #1d1d1d;
+$dark-page: #121212;
+
+$positive: #21ba45;
+$negative: #c10015;
+$info: #31ccec;
+$warning: #f2c037;
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -0,0 +1,7 @@
+declare namespace NodeJS {
+  interface ProcessEnv {
+    NODE_ENV: string;
+    VUE_ROUTER_MODE: 'hash' | 'history' | 'abstract' | undefined;
+    VUE_ROUTER_BASE: string | undefined;
+  }
+}
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -0,0 +1,61 @@
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-header elevated>
+      <q-toolbar>
+        <q-img
+          :src="localLogo"
+          alt="Logo"
+          style="width: 40px; height: 40px; background-color: var(--q-primary)"
+          class="q-mr-sm"
+        />
+        <q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
+
+        <q-toolbar-title> {{ productName }} </q-toolbar-title>
+
+        <div>Version {{ version }}</div>
+        <q-btn dense icon="refresh" square class="q-px-md q-ml-md" @click="refresh" />
+        <LoginMenu />
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer v-model="leftDrawerOpen" bordered>
+      <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>
+      </q-list>
+    </q-drawer>
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { version, productName } 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';
+
+const localLogo = ref(Logo);
+
+const leftDrawerOpen = ref(false);
+const user = useUserStore();
+const autorized = computed(() => !!user.isAuthorizedAs(['admin']));
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+
+function closeDrawer() {
+  leftDrawerOpen.value = false;
+}
+
+function refresh() {
+  window.location.reload();
+}
+</script>
--- a/src/pages/ErrorNotFound.vue
+++ b/src/pages/ErrorNotFound.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">
+        404
+      </div>
+
+      <div class="text-h2" style="opacity:.4">
+        Oops. Nothing here...
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+//
+</script>
--- a/src/pages/LoginPage.vue
+++ b/src/pages/LoginPage.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-center">
+    <LoginForm v-on:update-close="forwardToPage" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import LoginForm from 'src/vueLib/login/LoginForm.vue';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const userStore = useUserStore();
+
+onMounted(() => {
+  const user = userStore.getUser();
+  if (user?.username !== '' && user?.role !== '') {
+    forwardToPage().catch((err) => console.error(err));
+  }
+});
+
+const forwardToPage = () => router.push('/members');
+</script>
--- a/src/pages/MembersTable.vue
+++ b/src/pages/MembersTable.vue
@@ -0,0 +1,34 @@
+<template>
+  <q-page>
+    <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 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/SettingsPage.vue
+++ b/src/pages/SettingsPage.vue
@@ -0,0 +1,121 @@
+<template>
+  <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
+              :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('icon')"
+              v-model="settings.icon"
+            ></q-input>
+          </div>
+        </q-card>
+        <q-card class="q-ma-lg">
+          <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('database') }}</p>
+          <div class="row">
+            <q-input
+              :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('databaseName')"
+              v-model="settings.databaseName"
+            ></q-input>
+          </div>
+        </q-card>
+        <q-card class="q-ma-lg">
+          <q-btn
+            class="q-pa-md"
+            :icon="colorGroup ? 'remove' : 'add'"
+            size="md"
+            dense
+            no-caps
+            color="primary"
+            flat
+            @click="colorGroup = !colorGroup"
+            >{{ $t('colors') }}</q-btn
+          >
+          <div v-if="colorGroup" class="colum">
+            <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>
+              </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>
+              </div>
+            </div>
+            <q-btn 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">
+          <div class="q-my-lg q-mr-xl">
+            <q-btn no-caps color="primary" @click="save">{{ $t('save') }}</q-btn>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { databaseName } from 'src/vueLib/tables/members/MembersTable';
+import { Logo } from 'src/vueLib/models/logo';
+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';
+
+const { NotifyResponse } = useNotify();
+const colorGroup = ref(false);
+
+const settings = reactive<Settings>({
+  icon: Logo.value,
+  databaseName: databaseName.value,
+  primaryColor: document.documentElement.style.getPropertyValue('--q-primary'),
+  secondaryColor: document.documentElement.style.getPropertyValue('--q-secondary'),
+});
+
+watch(settings, (newSettings) => {
+  Logo.value = newSettings.icon;
+  databaseName.value = newSettings.databaseName;
+});
+
+function resetColors() {
+  document.documentElement.style.setProperty('--q-primary', '#1976d2');
+  document.documentElement.style.setProperty('--q-secondary', '#26a69a');
+}
+
+function save() {
+  document.documentElement.style.setProperty('--q-primary', settings.primaryColor);
+  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);
+
+  appApi
+    .post('secure/settings/update', { user: 'admin', settings })
+    .then((resp) => NotifyResponse(resp.data.message))
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+</script>
--- a/src/pages/UserSettings.vue
+++ b/src/pages/UserSettings.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-y-md">
+      <q-card>
+        <q-tabs
+          v-model="tab"
+          dense
+          class="taxt-grey"
+          active-color="primary"
+          indicator-color="primary"
+          align="justify"
+          narrow-indicator
+        >
+          <q-tab name="users" no-caps :label="$t('users')" />
+          <q-tab name="roles" no-caps :label="$t('roles')" />
+        </q-tabs>
+        <q-seperator />
+
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel name="users">
+            <q-table :rows="users" :columns="columns"> </q-table>
+          </q-tab-panel>
+          <q-tab-panel name="roles">
+            <q-table :rows="users" :columns="columns"> </q-table>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card>
+    </div>
+  </div>
+
+  <q-btn no-caps color="primary" @click="console.log('save')">{{ $t('save') }}</q-btn>
+</template>
+
+<script setup lang="ts">
+import type { Users } from 'src/vueLib/models/users';
+import { computed, ref } from 'vue';
+
+const tab = ref('users');
+
+const columns = computed(() => [
+  { name: 'name', align: 'center' as const, label: 'Name', field: 'name' },
+]);
+
+const users = ref<Users>([]);
+</script>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -0,0 +1,53 @@
+import { defineRouter } from '#q-app/wrappers';
+import {
+  createMemoryHistory,
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';
+import routes from './routes';
+import { useUserStore } from 'src/vueLib/login/userStore';
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default defineRouter(function (/* { store, ssrContext } */) {
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : process.env.VUE_ROUTER_MODE === 'history'
+      ? createWebHistory
+      : createWebHashHistory;
+
+  const Router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
+    routes,
+
+    // Leave this as is and make changes in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    history: createHistory(process.env.VUE_ROUTER_BASE),
+  });
+
+  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) {
+      next('/');
+    } else {
+      next();
+    }
+  });
+
+  return Router;
+});
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -0,0 +1,42 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      {
+        path: '',
+        component: () => import('pages/LoginPage.vue'),
+      },
+      {
+        path: '/login',
+        component: () => import('pages/LoginPage.vue'),
+      },
+      {
+        path: '/members',
+        component: () => import('pages/MembersTable.vue'),
+        meta: { requiresAuth: true, requiresAdmin: true },
+      },
+      {
+        path: '/settings',
+        component: () => import('pages/SettingsPage.vue'),
+        meta: { requiresAuth: true, requiresAdmin: true },
+      },
+      {
+        path: '/usersSettings',
+        component: () => import('pages/UserSettings.vue'),
+        meta: { requiresAuth: true, requiresAdmin: true },
+      },
+    ],
+  },
+
+  // Always leave this as last one,
+  // but you can also remove it
+  {
+    path: '/:catchAll(.*)*',
+    component: () => import('pages/ErrorNotFound.vue'),
+  },
+];
+
+export default routes;
--- a/src/utils/globalQ.ts
+++ b/src/utils/globalQ.ts
@@ -0,0 +1,11 @@
+import type { QVueGlobals } from 'quasar';
+
+let qInstance: QVueGlobals | null = null;
+
+export function setQuasarInstance($q: QVueGlobals) {
+  qInstance = $q;
+}
+
+export function useGlobalQ(): QVueGlobals | null {
+  return qInstance;
+}
--- a/src/utils/globalRouter.ts
+++ b/src/utils/globalRouter.ts
@@ -0,0 +1,12 @@
+import type { Router } from 'vue-router';
+
+let globalRouter: Router | null = null;
+
+export function setRouterInstance(router: Router) {
+  globalRouter = router;
+}
+
+export function useGlobalRouter(): Router {
+  if (!globalRouter) throw new Error('Router not initialized yet!');
+  return globalRouter;
+}
--- a/src/utils/number-helpers.ts
+++ b/src/utils/number-helpers.ts
@@ -0,0 +1,50 @@
+import type { Ref } from 'vue';
+
+export function separate16BitUint(value: number): { highByte: number; lowByte: number } {
+  // Ensure the value is treated as a 16-bit unsigned integer
+  // (optional, but good for clarity and safety if 'value' might be outside 0-65535)
+  const normalizedValue = value & 0xffff; // Mask to ensure it's within 16 bits
+
+  // Extract the low byte (least significant 8 bits)
+  // This is simply the value modulo 256, or bitwise AND with 0xFF
+  const lowByte = normalizedValue & 0xff;
+
+  // Extract the high byte (most significant 8 bits)
+  // Right shift by 8 bits to move the high byte into the low byte's position,
+  // then mask with 0xFF to get just those 8 bits.
+  const highByte = (normalizedValue >> 8) & 0xff;
+
+  return { highByte, lowByte };
+}
+
+export function combineBytesTo16BitUint(highByte: number, lowByte: number): number {
+  // Ensure both bytes are within the 0-255 range for safety
+  const safeHighByte = highByte & 0xff;
+  const safeLowByte = lowByte & 0xff;
+
+  // Shift the high byte 8 bits to the left to place it in the higher position.
+  // Example: if highByte is 0xA4 (10100100), after shifting it becomes 0xA400 (1010010000000000).
+  const shiftedHighByte = safeHighByte << 8;
+
+  // Combine the shifted high byte with the low byte using a bitwise OR.
+  // Example: if shiftedHighByte is 0xA400 and lowByte is 0x78 (01111000),
+  // the result is 0xA478 (1010010001111000).
+  const combinedValue = shiftedHighByte | safeLowByte;
+
+  // Optional: Mask the result to ensure it's strictly within the 16-bit unsigned range (0 to 65535).
+  // This is good practice as JavaScript numbers are 64-bit floats, and this ensures
+  // the value wraps correctly if intermediate operations somehow exceeded 16 bits.
+  return combinedValue & 0xffff;
+}
+
+export function addOne(val: Ref<number>, limit: number) {
+  if (val.value < limit) {
+    val.value++;
+  }
+}
+
+export function substractOne(val: Ref<number>, limit: number) {
+  if (val.value > limit) {
+    val.value--;
+  }
+}
--- a/src/vueLib/db/db.ts
+++ b/src/vueLib/db/db.ts
@@ -0,0 +1,49 @@
+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
@@ -0,0 +1,172 @@
+<template>
+  <q-dialog
+    ref="dialogRef"
+    :maximized="minMaxState"
+    :full-width="minMaxState"
+    :no-focus="!minMaxState"
+    :no-refocus="!minMaxState"
+    :seamless="!minMaxState"
+  >
+    <q-card class="layout" :style="cardStyle">
+      <!-- Draggable Header -->
+      <div
+        class="dialog-header row items-center justify-between bg-grey-1"
+        v-touch-pan.mouse.prevent.stop="handlePan"
+      >
+        <div v-if="headerTitle" class="text-left text-bold text-caption q-mx-sm">
+          {{ headerTitle }}
+        </div>
+        <div class="row justify-end q-mx-sm">
+          <q-btn dense flat :icon="minMaxIcon" size="md" @click="minMax" />
+          <q-btn dense flat icon="close" size="md" v-close-popup />
+        </div>
+      </div>
+
+      <q-separator color="black" />
+
+      <!-- Content Slot -->
+      <div class="scrollArea">
+        <slot />
+      </div>
+
+      <!-- Resize Handle -->
+      <div v-if="!minMaxState" class="resize-handle" @mousedown.prevent="startResizing" />
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import type { TouchPanValue } from 'quasar';
+
+const dialogRef = ref();
+const open = () => dialogRef.value?.show();
+const close = () => dialogRef.value?.hide();
+defineExpose({ open, close });
+
+const props = defineProps({
+  headerTitle: { type: String, default: '' },
+  width: { type: Number, default: 400 },
+  height: { type: Number, default: 250 },
+});
+
+// Fullscreen toggle
+const minMaxIcon = ref('fullscreen');
+const minMaxState = ref(false);
+function minMax() {
+  minMaxState.value = !minMaxState.value;
+  minMaxIcon.value = minMaxState.value ? 'fullscreen_exit' : 'fullscreen';
+}
+
+// Position and Size
+const position = ref({ x: 0, y: 0 });
+const width = ref(props.width || 400);
+const height = ref(props.height || 250);
+
+// Watch prop changes and sync local ref
+watch(
+  () => props.width,
+  (newWidth) => {
+    if (newWidth !== undefined && newWidth !== width.value) {
+      width.value = newWidth;
+    }
+  },
+);
+watch(
+  () => props.height,
+  (newHeight) => {
+    if (newHeight !== undefined && newHeight !== height.value) {
+      height.value = newHeight;
+    }
+  },
+);
+
+// Dragging (only from header)
+const handlePan: TouchPanValue = (details) => {
+  if (!minMaxState.value && details.delta) {
+    position.value.x += details.delta.x || 0;
+    position.value.y += details.delta.y || 0;
+  }
+};
+
+// Resizing
+const isResizing = ref(false);
+function startResizing(e: MouseEvent) {
+  isResizing.value = true;
+  const startX = e.clientX;
+  const startY = e.clientY;
+  const startWidth = width.value;
+  const startHeight = height.value;
+
+  function onMouseMove(e: MouseEvent) {
+    width.value = Math.max(200, startWidth + e.clientX - startX);
+    height.value = Math.max(200, startHeight + e.clientY - startY);
+  }
+
+  function onMouseUp() {
+    isResizing.value = false;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+  }
+
+  window.addEventListener('mousemove', onMouseMove);
+  window.addEventListener('mouseup', onMouseUp);
+}
+
+// Styles
+const cardStyle = computed(() => {
+  if (minMaxState.value) {
+    return {};
+  }
+
+  return {
+    width:
+      typeof width.value === 'number' || /^\d+$/.test(width.value)
+        ? `${width.value}px`
+        : width.value,
+    height:
+      typeof height.value === 'number' || /^\d+$/.test(height.value)
+        ? `${height.value}px`
+        : height.value,
+    transform: `translate(${position.value.x}px, ${position.value.y}px)`,
+  };
+});
+</script>
+
+<style scoped>
+.layout {
+  position: relative;
+  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;
+}
+
+/* Scrollable content */
+.scrollArea {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+/* Resize handle in bottom right */
+.resize-handle {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.1);
+  cursor: nwse-resize;
+  z-index: 10;
+}
+</style>
--- a/src/vueLib/general/useNotify.ts
+++ b/src/vueLib/general/useNotify.ts
@@ -0,0 +1,83 @@
+import { getCurrentInstance } from 'vue';
+import type { Response } from '../models/Response';
+import { AxiosError } from 'axios';
+
+export function useNotify() {
+  const instance = getCurrentInstance();
+  const $q = instance?.appContext.config.globalProperties.$q;
+
+  function NotifyResponse(
+    response: Response | string | AxiosError | undefined,
+    type?: 'warning' | 'error',
+    timeout: number = 5000,
+  ) {
+    let color = 'green';
+    let icon = 'check_circle';
+
+    switch (type) {
+      case 'warning':
+        color = 'orange';
+        icon = 'warning';
+        break;
+      case 'error':
+        color = 'red';
+        icon = 'error';
+        break;
+    }
+
+    if (response) {
+      let message = '';
+      if (response instanceof AxiosError && response.response) {
+        if (response.response.data) {
+          const data = response.response.data as Response;
+          message = data.message;
+        }
+      } else {
+        message = typeof response === 'string' ? response : (response.message ?? '');
+      }
+      if (message === '') {
+        return;
+      }
+
+      color = typeof response === 'string' ? color : type === 'error' ? 'red' : color;
+      icon = typeof response === 'string' ? icon : type === 'error' ? 'error' : icon;
+      if (!$q) {
+        console.error(message);
+        return;
+      }
+      $q?.notify({
+        message: message,
+        color: color,
+        position: 'bottom-right',
+        icon: icon,
+        timeout: timeout,
+      });
+    }
+  }
+
+  function NotifyDialog(title: string, text: string, okText?: string, cancelText?: string) {
+    return new Promise((resolve) => {
+      $q
+        ?.dialog({
+          title: title,
+          message: text,
+          persistent: true,
+          ok: okText ?? 'OK',
+          cancel: cancelText ?? 'CANCEL',
+        })
+        .onOk(() => {
+          resolve(true);
+        })
+        .onCancel(() => {
+          resolve(false);
+        })
+        .onDismiss(() => {
+          resolve(false);
+        });
+    });
+  }
+  return {
+    NotifyDialog,
+    NotifyResponse,
+  };
+}
--- a/src/vueLib/login/LoginDialog.vue
+++ b/src/vueLib/login/LoginDialog.vue
@@ -0,0 +1,57 @@
+<template>
+  <DialogFrame ref="Dialog" :width="300" :height="380" header-title="Login">
+    <LoginForm v-on:update-close="close" />
+  </DialogFrame>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue';
+import DialogFrame from '../dialog/DialogFrame.vue';
+import { useNotify } from '../general/useNotify';
+import LoginForm from './LoginForm.vue';
+
+const { NotifyResponse } = useNotify();
+const Dialog = ref();
+const refUserInput = ref();
+
+const open = () => {
+  Dialog.value?.open();
+  nextTick(() => {
+    refUserInput.value?.focus();
+  }).catch((err) => NotifyResponse(err, 'error'));
+};
+
+const close = () => {
+  Dialog.value.close();
+};
+
+defineExpose({ open });
+</script>
+
+<style scoped>
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-8px);
+  }
+  40% {
+    transform: translateX(8px);
+  }
+  60% {
+    transform: translateX(-6px);
+  }
+  80% {
+    transform: translateX(6px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.shake {
+  animation: shake 0.4s ease;
+  border: 2px solid #f44336;
+}
+</style>
--- a/src/vueLib/login/LoginForm.vue
+++ b/src/vueLib/login/LoginForm.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="text-black"></div>
+  <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>
+        <q-input
+          ref="refUserInput"
+          dense
+          filled
+          type="text"
+          :label="$t('user')"
+          v-model="user"
+          :rules="[(val) => !!val || $t('user') + ' ' + $t('isRequired')]"
+        ></q-input>
+        <q-input
+          dense
+          filled
+          :type="showPassword ? 'text' : 'password'"
+          :label="$t('password')"
+          v-model="password"
+          @keyup.enter="onSubmit"
+          :rules="[(val) => !!val || $t('password') + ' ' + $t('isRequired')]"
+        >
+          <template #append>
+            <q-btn
+              flat
+              dense
+              :icon="showPassword ? 'visibility_off' : 'visibility'"
+              @mousedown.left="showPassword = true"
+              @mouseup.left="showPassword = false"
+              @mouseleave="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>
+        </div>
+      </q-card>
+    </q-item-section>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { productName } from '../../../package.json';
+import { ref } from 'vue';
+import { useNotify } from '../general/useNotify';
+import { useLogin } from './useLogin';
+
+const refForm = ref();
+const refUserInput = ref();
+const user = ref('');
+const password = ref('');
+const showPassword = ref(false);
+const shake = ref(false);
+
+const { NotifyResponse } = useNotify();
+const { login } = useLogin();
+
+const emit = defineEmits(['update-close']);
+
+const onSubmit = () => {
+  refForm.value?.validate().then((success: boolean) => {
+    if (success) {
+      login(user.value, password.value)
+        .then(() => {
+          NotifyResponse("logged in as '" + user.value + "'");
+          emit('update-close');
+        })
+        .catch((err) => {
+          NotifyResponse(err, 'error');
+          shake.value = true;
+          setTimeout(() => {
+            shake.value = false;
+          }, 500);
+        });
+    } else {
+      NotifyResponse('error submitting login form', 'error');
+    }
+  });
+};
+</script>
+
+<style scoped>
+@keyframes shake {
+  0% {
+    transform: translateX(0);
+  }
+  20% {
+    transform: translateX(-8px);
+  }
+  40% {
+    transform: translateX(8px);
+  }
+  60% {
+    transform: translateX(-6px);
+  }
+  80% {
+    transform: translateX(6px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.shake {
+  animation: shake 0.4s ease;
+  border: 2px solid #f44336;
+}
+</style>
--- a/src/vueLib/login/LoginMenu.vue
+++ b/src/vueLib/login/LoginMenu.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="q-gutter-md">
+    <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="showLogin" clickable v-close-popup @click="openLogin">
+            <q-item-section class="text-primary">{{ loginText }}</q-item-section>
+          </q-item>
+          <q-item>
+            <q-select
+              :label="$t('language')"
+              borderless
+              color="primary"
+              dense
+              v-model="langSelected"
+              :options="langSelection"
+            ></q-select>
+          </q-item>
+          <q-item v-if="autorized">
+            <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>
+        </q-list>
+      </q-menu>
+    </q-btn>
+  </div>
+  <LoginDialog ref="refLoginDialog"></LoginDialog>
+</template>
+
+<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';
+
+const route = useRoute();
+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());
+
+const loginText = computed(() => {
+  return currentUser.value ? 'Logout' : 'Login';
+});
+
+const refLoginDialog = ref();
+
+function openLogin() {
+  if (currentUser.value) {
+    userLogin.logout().catch((err) => NotifyResponse(err, 'error'));
+    return;
+  }
+  refLoginDialog.value?.open();
+}
+
+const langSelected = ref(i18n.global.locale);
+const langSelection = ref(lang);
+
+// Watch for changes and update i18n locale
+watch(langSelected, (newLang) => {
+  i18n.global.locale = newLang;
+  localStorage.setItem('lang', newLang);
+});
+</script>
--- a/src/vueLib/login/useLogin.ts
+++ b/src/vueLib/login/useLogin.ts
@@ -0,0 +1,86 @@
+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';
+
+const refreshTime = 10000;
+let intervalId: ReturnType<typeof setInterval> | null = null;
+
+export function useLogin() {
+  const userStore = useUserStore();
+  const { NotifyResponse } = useNotify();
+
+  async function login(user: string, password: string) {
+    try {
+      await appApi.post('/login', { user, password }).then((resp) => {
+        const sets = resp.data.settings as Settings;
+
+        Logo.value = sets.icon;
+        document.documentElement.style.setProperty('--q-primary', sets.primaryColor);
+        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);
+      });
+
+      const resp = await appApi.get('/login/me');
+      userStore.setUser({ username: resp.data.user, role: resp.data.role });
+
+      startRefreshInterval();
+      return true;
+    } catch (err) {
+      console.error('Login error:', err);
+      throw err;
+    }
+  }
+
+  async function logout() {
+    await appApi.get('/logout').catch((err) => {
+      NotifyResponse(err, 'error');
+    });
+
+    userStore.clearUser();
+    stopRefreshInterval();
+  }
+
+  async function refresh() {
+    await appApi
+      .post('secure/login/refresh', {}, { withCredentials: true })
+      .then(() => {
+        appApi
+          .get('/login/me')
+          .then((resp) => {
+            userStore.setUser({ username: resp.data.user, role: resp.data.role });
+            if (!intervalId) {
+              startRefreshInterval();
+            }
+            return true;
+          })
+          .catch(() => {});
+      })
+      .catch(() => {
+        userStore.clearUser();
+      });
+    stopRefreshInterval();
+    return false;
+  }
+  function getUser() {
+    return userStore.getUser();
+  }
+
+  function startRefreshInterval() {
+    intervalId = setInterval(() => {
+      refresh().catch((err) => NotifyResponse(err, 'error'));
+    }, refreshTime);
+  }
+  function stopRefreshInterval() {
+    if (intervalId) {
+      clearInterval(intervalId);
+      intervalId = null;
+    }
+  }
+
+  return { login, logout, refresh, getUser };
+}
--- a/src/vueLib/login/userStore.ts
+++ b/src/vueLib/login/userStore.ts
@@ -0,0 +1,67 @@
+import { defineStore } from 'pinia';
+import { useGlobalRouter } from 'src/utils/globalRouter';
+import { useGlobalQ } from 'src/utils/globalQ';
+
+interface User {
+  username: string;
+  role: string;
+}
+
+interface UserState {
+  user: User | null;
+}
+
+export const useUserStore = defineStore('user', {
+  state: (): UserState => ({
+    user: null,
+  }),
+  getters: {
+    isAuthenticated: (state): boolean => !!state.user,
+  },
+  actions: {
+    setUser(user: User) {
+      this.user = user;
+    },
+    getUser() {
+      return this.user;
+    },
+    clearUser() {
+      const $q = useGlobalQ();
+
+      if (!this.user) return;
+      if ($q) {
+        $q?.notify({
+          message: "user '" + this.user?.username + "' logged out",
+          color: 'orange',
+          position: 'bottom-right',
+          icon: 'warning',
+          timeout: 5000,
+        });
+      } else {
+        console.error("user '" + this.user?.username + "' logged out");
+      }
+
+      this.user = null;
+
+      const router = useGlobalRouter();
+
+      router?.push('/').catch((err) => {
+        if ($q) {
+          $q?.notify({
+            message: err,
+            color: 'orange',
+            position: 'bottom-right',
+            icon: 'warning',
+            timeout: 5000,
+          });
+        } 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/Response.ts
+++ b/src/vueLib/models/Response.ts
@@ -0,0 +1,3 @@
+export interface Response {
+  message: string;
+}
--- a/src/vueLib/models/logo.ts
+++ b/src/vueLib/models/logo.ts
@@ -0,0 +1,3 @@
+import { ref } from 'vue';
+
+export const Logo = ref('');
--- a/src/vueLib/models/member.ts
+++ b/src/vueLib/models/member.ts
@@ -0,0 +1,18 @@
+export interface Member {
+  id: number;
+  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;
+}
+
+export type Members = Member[];
--- a/src/vueLib/models/metaData.ts
+++ b/src/vueLib/models/metaData.ts
@@ -0,0 +1,12 @@
+export interface MetaData {
+  rowIndex: number;
+  seperator: string;
+  firstName: string;
+  lastName: string;
+  birthday: string;
+  address: string;
+  town: string;
+  zip: string;
+  phone: string;
+  email: string;
+}
--- a/src/vueLib/models/settings.ts
+++ b/src/vueLib/models/settings.ts
@@ -0,0 +1,6 @@
+export type Settings = {
+  icon: string;
+  databaseName: string;
+  primaryColor: string;
+  secondaryColor: string;
+};
--- a/src/vueLib/models/users.ts
+++ b/src/vueLib/models/users.ts
@@ -0,0 +1,8 @@
+export interface User {
+  id: number;
+  name: string;
+  role: string;
+  expires: string;
+}
+
+export type Users = User[];
--- a/src/vueLib/tables/members/MembersTable.ts
+++ b/src/vueLib/tables/members/MembersTable.ts
@@ -0,0 +1,208 @@
+import { appApi } from 'src/boot/axios';
+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');
+
+export function useMemberTable() {
+  const members = ref<Members>([]);
+
+  const pagination = ref({
+    sortBy: 'firstName',
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+  });
+
+  const columns = computed(() => [
+    { name: 'cake', align: 'center' as const, label: '', field: 'cake', icon: 'cake' },
+    {
+      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: 'birthday',
+      align: 'left' as const,
+      label: i18n.global.t('birthday'),
+      field: 'birthday',
+      sortable: true,
+    },
+    {
+      name: 'age',
+      align: 'left' as const,
+      label: i18n.global.t('age'),
+      field: 'age',
+      sortable: true,
+    },
+    {
+      name: 'address',
+      align: 'left' as const,
+      label: i18n.global.t('address'),
+      field: 'address',
+      sortable: true,
+    },
+    {
+      name: 'town',
+      align: 'left' as const,
+      label: i18n.global.t('town'),
+      field: 'town',
+      sortable: true,
+    },
+    {
+      name: 'zip',
+      align: 'left' as const,
+      label: i18n.global.t('zipCode'),
+      field: 'zip',
+      sortable: true,
+    },
+    {
+      name: 'phone',
+      align: 'left' as const,
+      label: i18n.global.t('phone'),
+      field: 'phone',
+      sortable: true,
+    },
+    {
+      name: 'email',
+      align: 'left' as const,
+      label: i18n.global.t('email'),
+      field: 'email',
+      sortable: true,
+    },
+    {
+      name: 'group',
+      align: 'left' as const,
+      label: i18n.global.t('group'),
+      field: 'group',
+      sortable: true,
+    },
+    {
+      name: 'responsiblePerson',
+      align: 'left' as const,
+      label: i18n.global.t('responsible'),
+      field: 'responsiblePerson',
+      sortable: true,
+    },
+    {
+      name: 'firstVisit',
+      align: 'left' as const,
+      label: i18n.global.t('firstVisit'),
+      field: 'firstVisit',
+      sortable: true,
+    },
+    {
+      name: 'lastVisit',
+      align: 'left' as const,
+      label: i18n.global.t('lastVisit'),
+      field: 'lastVisit',
+      sortable: true,
+    },
+    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
+  ]);
+
+  const { NotifyResponse } = useNotify();
+
+  const loading = ref(false);
+
+  function calculateAge(birthDateString: string) {
+    if (birthDateString === undefined) return 0;
+    const [day, month, year] = birthDateString.split('.').map(Number); // for format "1.2.2000"
+    if (year === undefined || month === undefined || day === undefined) return 0;
+    const birthDate = new Date(year, month - 1, day); // month is 0-based
+
+    const today = new Date();
+
+    let age = today.getFullYear() - birthDate.getFullYear();
+
+    // Check if birthday has occurred yet this year
+    const hasBirthdayPassed =
+      today.getMonth() > birthDate.getMonth() ||
+      (today.getMonth() === birthDate.getMonth() && today.getDate() >= birthDate.getDate());
+
+    if (!hasBirthdayPassed) {
+      age--;
+    }
+
+    return age;
+  }
+
+  //isThreeDaysBeforeAnnualDate check if upcoming date is less than 3 days from now
+  function isXDaysBeforeAnnualDate(dateString: string, before: number) {
+    if (dateString === undefined) return;
+    const [day, month] = dateString.split('.').map(Number);
+
+    const today = new Date();
+    today.setHours(0, 0, 0);
+
+    const annualDate = new Date(today.getFullYear(), month ? month - 1 : 0, day);
+    annualDate.setHours(0, 0, 1);
+
+    const xDaysBefore = new Date(annualDate);
+    xDaysBefore.setDate(annualDate.getDate() - before);
+
+    return today >= xDaysBefore && today <= annualDate;
+  }
+
+  function getRowClass(row: Member) {
+    if (isXDaysBeforeAnnualDate(row.birthday, 1)) {
+      return 'bg-red-2 text-red-10';
+    } else if (isXDaysBeforeAnnualDate(row.birthday, 4)) {
+      return 'bg-green-2 text-green-10';
+    } else if (isXDaysBeforeAnnualDate(row.birthday, 8)) {
+      return 'bg-amber-2 text-amber-10';
+    }
+    return '';
+  }
+
+  //updates member list from database
+  function updateMembers() {
+    loading.value = true;
+
+    appApi
+      .get('secure/members')
+      .then((resp) => {
+        if (resp.data === null) {
+          members.value = [];
+          return;
+        }
+        members.value = resp.data as Members;
+        if (members.value === null) {
+          members.value = [];
+          return;
+        }
+        members.value.forEach((member) => {
+          if (member.birthday !== undefined) {
+            member.age = String(calculateAge(member.birthday));
+          }
+        });
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+  return {
+    members,
+    pagination,
+    columns,
+    loading,
+    getRowClass,
+    updateMembers,
+    isXDaysBeforeAnnualDate,
+  };
+}
--- a/src/vueLib/tables/members/MembersTable.vue
+++ b/src/vueLib/tables/members/MembersTable.vue
@@ -0,0 +1,272 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      title="Members"
+      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="members"
+      :columns="columns"
+      row-key="id"
+      v-model:pagination="pagination"
+      :loading="loading"
+      :filter="filter"
+      :selection="selectOption ? 'multiple' : 'none'"
+      v-model:selected="selected"
+      binary-state-sort
+      class="bigger-table-text"
+    >
+      <template v-slot:top-left>
+        <q-btn-group push flat style="color: grey">
+          <q-btn dense flat icon="add" @click="openAllValueDialog(null)">
+            <q-tooltip>{{ $t('addNewMember') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            dense
+            flat
+            style="color: grey"
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectMemberOptions') }}</q-tooltip>
+          </q-btn>
+          <q-btn dense flat icon="upload" @click="openUploadDialog">
+            <q-tooltip>{{ $t('importCSV') }}</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>
+      <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>
+      <template v-slot:body-cell="props">
+        <q-td
+          :props="props"
+          :class="getRowClass(props.row)"
+          @click="openSingleValueDialog(props.col.label, props.col.name, props.row)"
+        >
+          {{ props.value }}
+        </q-td>
+      </template>
+      <template v-slot:body-cell-cake="props">
+        <q-td :props="props" :class="getRowClass(props.row)">
+          <q-icon
+            :name="isXDaysBeforeAnnualDate(props.row.birthday, 1) ? 'cake' : ''"
+            :color="'red'"
+            size="md"
+          />
+        </q-td>
+      </template>
+      <template v-slot:body-cell-option="props">
+        <q-td :props="props">
+          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
+            <q-item
+              clickable
+              v-close-popup
+              @click="openAllValueDialog(props.row)"
+              class="text-primary"
+              >{{ $t('edit') }}</q-item
+            >
+            <q-item
+              clickable
+              v-close-popup
+              @click="openRemoveDialog(props.row)"
+              class="text-negative"
+              title="zu"
+              >{{ $t('delete') }}</q-item
+            >
+          </q-menu>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+  <EditOneDialog ref="editOneDialog" v-on:update-member="updateMembers"></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:update-member="updateMembers"></EditAllDialog>
+  <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) => removeMember(...val)"
+  ></OkDialog>
+  <UploadDialog ref="uploadDialog" @update-upload="updateMembers"> </UploadDialog>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { ref, onMounted } from 'vue';
+import type { Member, Members } from 'src/vueLib/models/member';
+import EditOneDialog from 'src/components/EditOneDialog.vue';
+import EditAllDialog from 'src/components/EditAllDialog.vue';
+import OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { useMemberTable } from './MembersTable';
+import UploadDialog from 'src/components/UploadDialog.vue';
+import { databaseName } from './MembersTable';
+
+export interface MemberDialog {
+  getSelected: () => Members;
+}
+
+const { NotifyResponse } = useNotify();
+const editOneDialog = ref();
+const editAllDialog = ref();
+const uploadDialog = ref();
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Members>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+
+const {
+  members,
+  pagination,
+  loading,
+  columns,
+  getRowClass,
+  updateMembers,
+  isXDaysBeforeAnnualDate,
+} = useMemberTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+
+  appApi
+    .post('secure/database/open', { dbPath: databaseName.value, create: true })
+    .then(() => {
+      updateMembers();
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+
+    .finally(() => {
+      loading.value = false;
+    });
+});
+
+// opens dialog for all member values
+function openSingleValueDialog(label: string, field: string, member: Member) {
+  editOneDialog.value?.open(label, field, member);
+}
+
+//opens dialog for one value
+function openAllValueDialog(member: Member | null) {
+  editAllDialog.value?.open(member);
+}
+
+//opens remove dialog
+function openRemoveDialog(...members: Members) {
+  if (members.length === 1) {
+    deleteText.value = "'";
+    if (members[0]?.firstName !== undefined) {
+      deleteText.value += members[0]?.firstName + ' ';
+    }
+    if (members[0]?.lastName !== undefined) {
+      deleteText.value += members[0]?.lastName;
+    }
+    deleteText.value += "'";
+  } else {
+    deleteText.value = String(members.length) + ' members';
+  }
+  okDialog.value?.open(members);
+}
+
+//opens uploader dialog
+function openUploadDialog() {
+  uploadDialog.value?.open();
+}
+
+//remove member from database
+function removeMember(...removeMembers: Members) {
+  const memberIds: number[] = [];
+
+  removeMembers.forEach((member: Member) => {
+    memberIds.push(member.id);
+  });
+
+  appApi
+    .post('secure/members/delete', { ids: memberIds })
+    .then(() => {
+      updateMembers();
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+//const blinkingId = ref<number | null>(null);
+
+// function triggerBlink(id: number) {
+//   blinkingId.value = id;
+
+//   // Optional: stop blinking after 3 seconds
+//   setTimeout(() => {
+//     blinkingId.value = null;
+//   }, 3000);
+// }
+
+function getSelected(): Members {
+  if (selected.value.length === 0) return [];
+  return selected.value;
+}
+defineExpose({
+  getSelected,
+});
+</script>
+
+<style>
+@keyframes blink-yellow {
+  0%,
+  100% {
+    background-color: yellow;
+  }
+  50% {
+    background-color: transparent;
+  }
+}
+
+.blink-yellow {
+  animation: blink-yellow 1.5s step-start 6 !important;
+}
+
+.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/users/UserTable.ts
+++ b/src/vueLib/tables/users/UserTable.ts
@@ -0,0 +1,149 @@
+import { appApi } from 'src/boot/axios';
+import { ref, computed } from 'vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { i18n } from 'boot/lang';
+import type { Users } from 'src/vueLib/models/users';
+
+export function useUserTable() {
+  const users = ref<Users>([]);
+
+  const pagination = ref({
+    sortBy: 'firstName',
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+  });
+
+  const columns = computed(() => [
+    { name: 'cake', align: 'center' as const, label: '', field: 'cake', icon: 'cake' },
+    {
+      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: 'birthday',
+      align: 'left' as const,
+      label: i18n.global.t('birthday'),
+      field: 'birthday',
+      sortable: true,
+    },
+    {
+      name: 'age',
+      align: 'left' as const,
+      label: i18n.global.t('age'),
+      field: 'age',
+      sortable: true,
+    },
+    {
+      name: 'address',
+      align: 'left' as const,
+      label: i18n.global.t('address'),
+      field: 'address',
+      sortable: true,
+    },
+    {
+      name: 'town',
+      align: 'left' as const,
+      label: i18n.global.t('town'),
+      field: 'town',
+      sortable: true,
+    },
+    {
+      name: 'zip',
+      align: 'left' as const,
+      label: i18n.global.t('zipCode'),
+      field: 'zip',
+      sortable: true,
+    },
+    {
+      name: 'phone',
+      align: 'left' as const,
+      label: i18n.global.t('phone'),
+      field: 'phone',
+      sortable: true,
+    },
+    {
+      name: 'email',
+      align: 'left' as const,
+      label: i18n.global.t('email'),
+      field: 'email',
+      sortable: true,
+    },
+    {
+      name: 'group',
+      align: 'left' as const,
+      label: i18n.global.t('group'),
+      field: 'group',
+      sortable: true,
+    },
+    {
+      name: 'responsiblePerson',
+      align: 'left' as const,
+      label: i18n.global.t('responsible'),
+      field: 'responsiblePerson',
+      sortable: true,
+    },
+    {
+      name: 'firstVisit',
+      align: 'left' as const,
+      label: i18n.global.t('firstVisit'),
+      field: 'firstVisit',
+      sortable: true,
+    },
+    {
+      name: 'lastVisit',
+      align: 'left' as const,
+      label: i18n.global.t('lastVisit'),
+      field: 'lastVisit',
+      sortable: true,
+    },
+    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
+  ]);
+
+  const { NotifyResponse } = useNotify();
+
+  const loading = ref(false);
+
+  //updates user list from database
+  function updateUsers() {
+    loading.value = true;
+
+    appApi
+      .get('users')
+      .then((resp) => {
+        if (resp.data === null) {
+          users.value = [];
+          return;
+        }
+        users.value = resp.data as Users;
+        if (users.value === null) {
+          users.value = [];
+          return;
+        }
+      })
+
+      .catch((err) => {
+        NotifyResponse(err, 'error');
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  }
+  return {
+    users,
+    pagination,
+    columns,
+    loading,
+    updateUsers,
+  };
+}
--- a/src/vueLib/tables/users/VueTable.vue
+++ b/src/vueLib/tables/users/VueTable.vue
@@ -0,0 +1,243 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      flat
+      bordered
+      ref="tableRef"
+      title="Users"
+      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="users"
+      :columns="columns"
+      row-key="id"
+      v-model:pagination="pagination"
+      :loading="loading"
+      :filter="filter"
+      :selection="selectOption ? 'multiple' : 'none'"
+      v-model:selected="selected"
+      binary-state-sort
+      class="bigger-table-text"
+    >
+      <template v-slot:top-left>
+        <q-btn-group push flat style="color: grey">
+          <q-btn dense flat icon="add" @click="openAllValueDialog(null)">
+            <q-tooltip>{{ $t('addNewUser') }}</q-tooltip>
+          </q-btn>
+          <q-btn
+            dense
+            flat
+            style="color: grey"
+            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+            @click="selectOption = !selectOption"
+          >
+            <q-tooltip>{{ $t('selectUserOptions') }}</q-tooltip>
+          </q-btn>
+          <q-btn dense flat icon="upload" @click="openUploadDialog">
+            <q-tooltip>{{ $t('importCSV') }}</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>
+      <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>
+      <template v-slot:body-cell="props">
+        <q-td
+          :props="props"
+          @click="openSingleValueDialog(props.col.label, props.col.name, props.row)"
+        >
+          {{ props.value }}
+        </q-td>
+      </template>
+      <template v-slot:body-cell-option="props">
+        <q-td :props="props">
+          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
+            <q-item
+              clickable
+              v-close-popup
+              @click="openAllValueDialog(props.row)"
+              class="text-primary"
+              >{{ $t('edit') }}</q-item
+            >
+            <q-item
+              clickable
+              v-close-popup
+              @click="openRemoveDialog(props.row)"
+              class="text-negative"
+              title="zu"
+              >{{ $t('delete') }}</q-item
+            >
+          </q-menu>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+  <EditOneDialog ref="editOneDialog" v-on:update-member="updateUsers"></EditOneDialog>
+  <EditAllDialog ref="editAllDialog" v-on:update-member="updateUsers"></EditAllDialog>
+  <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) => removeUser(...val)"
+  ></OkDialog>
+  <UploadDialog ref="uploadDialog" @update-upload="updateUsers"> </UploadDialog>
+</template>
+
+<script setup lang="ts">
+import { appApi } from 'src/boot/axios';
+import { ref, onMounted } from 'vue';
+import type { Users, User } from 'src/vueLib/models/users';
+import EditOneDialog from 'src/components/EditOneDialog.vue';
+import EditAllDialog from 'src/components/EditAllDialog.vue';
+import OkDialog from 'src/components/dialog/OkDialog.vue';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import UploadDialog from 'src/components/UploadDialog.vue';
+import { databaseName } from '../members/MembersTable';
+import { useUserTable } from './UserTable';
+
+const { NotifyResponse } = useNotify();
+const editOneDialog = ref();
+const editAllDialog = ref();
+const uploadDialog = ref();
+const okDialog = ref();
+const deleteText = ref('');
+const selectOption = ref(false);
+const selected = ref<Users>([]);
+const openSubmenu = ref(false);
+const filter = ref('');
+
+const { users, pagination, loading, columns, updateUsers } = useUserTable();
+
+//load on mounting page
+onMounted(() => {
+  loading.value = true;
+
+  appApi
+    .post('secure/database/open', { dbPath: databaseName.value, create: true })
+    .then(() => {
+      updateUsers();
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+
+    .finally(() => {
+      loading.value = false;
+    });
+});
+
+// opens dialog for all user values
+function openSingleValueDialog(label: string, field: string, user: User) {
+  editOneDialog.value?.open(label, field, user);
+}
+
+//opens dialog for one value
+function openAllValueDialog(user: User | null) {
+  editAllDialog.value?.open(user);
+}
+
+//opens remove dialog
+function openRemoveDialog(...users: Users) {
+  if (users.length === 1) {
+    deleteText.value = "'" + users[0]?.name + "'";
+  } else {
+    deleteText.value = String(users.length) + ' users';
+  }
+  okDialog.value?.open(users);
+}
+
+//opens uploader dialog
+function openUploadDialog() {
+  uploadDialog.value?.open();
+}
+
+//remove user from database
+function removeUser(...removeUsers: Users) {
+  const userIds: number[] = [];
+
+  removeUsers.forEach((user: User) => {
+    userIds.push(user.id);
+  });
+
+  appApi
+    .post('users/delete', { ids: userIds })
+    .then(() => {
+      updateUsers();
+      selected.value = [];
+    })
+    .catch((err) => NotifyResponse(err, 'error'))
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+//const blinkingId = ref<number | null>(null);
+
+// function triggerBlink(id: number) {
+//   blinkingId.value = id;
+
+//   // Optional: stop blinking after 3 seconds
+//   setTimeout(() => {
+//     blinkingId.value = null;
+//   }, 3000);
+// }
+
+function getSelected(): Users {
+  if (selected.value.length === 0) return [];
+  return selected.value;
+}
+defineExpose({
+  getSelected,
+});
+</script>
+
+<style>
+@keyframes blink-yellow {
+  0%,
+  100% {
+    background-color: yellow;
+  }
+  50% {
+    background-color: transparent;
+  }
+}
+
+.blink-yellow {
+  animation: blink-yellow 1.5s step-start 6 !important;
+}
+
+.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>