first commit

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>