add new user and role table in app (in progress)

src/pages/UserSettings.vue

@@ -14,32 +14,25 @@
           <q-tab name="users" no-caps :label="$t('users')" />
           <q-tab name="roles" no-caps :label="$t('roles')" />
         </q-tabs>
-        <q-seperator />
+        <q-separator />
 
         <q-tab-panels v-model="tab" animated>
           <q-tab-panel name="users">
-            <q-table :rows="users" :columns="columns"> </q-table>
+            <UserTable />
           </q-tab-panel>
           <q-tab-panel name="roles">
-            <q-table :rows="users" :columns="columns"> </q-table>
+            <RoleTable />
           </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';
+import { ref } from 'vue';
+import UserTable from 'src/vueLib/tables/users/UserTable.vue';
+import RoleTable from 'src/vueLib/tables/roles/RoleTable.vue';
 
 const tab = ref('users');
-
-const columns = computed(() => [
-  { name: 'name', align: 'center' as const, label: 'Name', field: 'name' },
-]);
-
-const users = ref<Users>([]);
 </script>