Add page and user monitoring in admin. Add permission editing in administration.

components/base/Collapsible.vue

@@ -1,5 +1,5 @@
 <template>
-    <CollapsibleRoot v-model:open="model" :disabled="disabled">
+    <CollapsibleRoot v-model:open="model" :disabled="disabled" :defaultOpen="defaultOpen">
         <div class="flex flex-row justify-center items-center">
             <span v-if="!!label">{{ label }}</span>
             <CollapsibleTrigger class="ms-4" asChild>
@@ -18,9 +18,10 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
-const { label, disabled = false } = defineProps<{
+const { label, disabled = false, defaultOpen = false } = defineProps<{
     label?: string
     disabled?: boolean
+    defaultOpen?: boolean
 }>();
 const model = defineModel<boolean>();
 </script>

components/base/TagsInput.vue

@@ -0,0 +1,21 @@
+<template>
+    <TagsInputRoot v-model="model" addOnPaste class="flex gap-2 items-center border p-2 w-full flex-wrap border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10" >
+        <TagsInputItem v-for="item in model" :key="item" :value="item" class="text-light-100 dark:text-dark-100 flex items-center justify-center gap-2 bg-light-20 dark:bg-dark-20 hover:bg-light-35 dark:hover:bg-dark-35 p-1 border border-light-35 dark:border-dark-35">
+            <TagsInputItemText class="text-sm pl-1" />
+            <TagsInputItemDelete asChild>
+                <Icon icon="radix-icons:cross-2" class="w-4 h-4 cursor-pointer" />
+            </TagsInputItemDelete>
+        </TagsInputItem>
+
+        <TagsInputInput :placeholder="placeholder" class="text-sm focus:outline-none flex-1 rounded text-green9 bg-transparent placeholder:text-mauve9 px-1" />
+    </TagsInputRoot>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
+const { placeholder } = defineProps<{
+    placeholder?: string
+}>();
+const model = defineModel<string[]>();
+</script>