feat: move tags and crowd types to sidebar from org settings tabs

Made-with: Cursor

apps/app/src/navigation/vertical/index.ts

@@ -22,6 +22,16 @@ export const orgNavItems = [
     to: { name: 'organisation-companies' },
     icon: { icon: 'tabler-building' },
   },
+  {
+    title: 'Tags & Vaardigheden',
+    to: { name: 'organisation-tags' },
+    icon: { icon: 'tabler-tag' },
+  },
+  {
+    title: 'Crowd types',
+    to: { name: 'organisation-crowd-types' },
+    icon: { icon: 'tabler-users-group' },
+  },
   {
     title: 'Instellingen',
     to: { name: 'organisation-settings' },

apps/app/src/pages/organisation/crowd-types.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useOrganisationStore } from '@/stores/useOrganisationStore'
+import CrowdTypesManager from '@/components/organisations/CrowdTypesManager.vue'
+
+const orgStore = useOrganisationStore()
+
+const orgId = computed(() => orgStore.activeOrganisationId ?? '')
+</script>
+
+<template>
+  <div>
+    <div class="d-flex align-center mb-6">
+      <div>
+        <h4 class="text-h4">
+          Crowd types
+        </h4>
+        <p class="text-body-1 text-disabled mb-0">
+          Configureer crowd types voor je organisatie
+        </p>
+      </div>
+    </div>
+
+    <CrowdTypesManager :org-id="orgId" />
+  </div>
+</template>

apps/app/src/pages/organisation/settings.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { useOrganisationStore } from '@/stores/useOrganisationStore'
-import PersonTagsTab from '@/components/organisation/PersonTagsTab.vue'
 import RegistrationFieldTemplatesTab from '@/components/organisation/RegistrationFieldTemplatesTab.vue'
-import CrowdTypesManager from '@/components/organisations/CrowdTypesManager.vue'
 import EmailBrandingTab from '@/components/organisation/EmailBrandingTab.vue'
 import EmailTemplatesTab from '@/components/organisation/EmailTemplatesTab.vue'
 import EmailLogTab from '@/components/organisation/EmailLogTab.vue'
@@ -14,9 +12,7 @@ const orgStore = useOrganisationStore()
 const orgId = computed(() => orgStore.activeOrganisationId ?? '')
 
 const tabs = [
-  { value: 'tags', label: 'Tags & Vaardigheden', icon: 'tabler-tag' },
   { value: 'templates', label: 'Registratieveld-templates', icon: 'tabler-forms' },
-  { value: 'crowd-types', label: 'Crowd types', icon: 'tabler-users-group' },
   { value: 'email-branding', label: 'E-mail opmaak', icon: 'tabler-mail-cog' },
   { value: 'email-templates', label: 'E-mail templates', icon: 'tabler-template' },
   { value: 'email-log', label: 'E-mail log', icon: 'tabler-mail-search' },
@@ -25,7 +21,7 @@ const tabs = [
 const activeTab = computed({
   get: () => {
     const tab = route.query.tab as string
-    return tabs.some(t => t.value === tab) ? tab : 'tags'
+    return tabs.some(t => t.value === tab) ? tab : 'templates'
   },
   set: (value: string) => {
     router.replace({ query: { ...route.query, tab: value } })
@@ -64,15 +60,9 @@ const activeTab = computed({
       v-model="activeTab"
       class="disable-tab-transition"
     >
-      <VWindowItem value="tags">
-        <PersonTagsTab :org-id="orgId" />
-      </VWindowItem>
       <VWindowItem value="templates">
         <RegistrationFieldTemplatesTab :org-id="orgId" />
       </VWindowItem>
-      <VWindowItem value="crowd-types">
-        <CrowdTypesManager :org-id="orgId" />
-      </VWindowItem>
       <VWindowItem value="email-branding">
         <EmailBrandingTab :org-id="orgId" />
       </VWindowItem>

apps/app/src/pages/organisation/tags.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useOrganisationStore } from '@/stores/useOrganisationStore'
+import PersonTagsTab from '@/components/organisation/PersonTagsTab.vue'
+
+const orgStore = useOrganisationStore()
+
+const orgId = computed(() => orgStore.activeOrganisationId ?? '')
+</script>
+
+<template>
+  <div>
+    <div class="d-flex align-center mb-6">
+      <div>
+        <h4 class="text-h4">
+          Tags & Vaardigheden
+        </h4>
+        <p class="text-body-1 text-disabled mb-0">
+          Beheer tags en vaardigheden voor personen in je organisatie
+        </p>
+      </div>
+    </div>
+
+    <PersonTagsTab :org-id="orgId" />
+  </div>
+</template>

apps/app/typed-router.d.ts

@@ -38,8 +38,10 @@ declare module 'vue-router/auto-routes' {
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
     'organisation': RouteRecordInfo<'organisation', '/organisation', Record<never, never>, Record<never, never>>,
     'organisation-companies': RouteRecordInfo<'organisation-companies', '/organisation/companies', Record<never, never>, Record<never, never>>,
+    'organisation-crowd-types': RouteRecordInfo<'organisation-crowd-types', '/organisation/crowd-types', Record<never, never>, Record<never, never>>,
     'organisation-members': RouteRecordInfo<'organisation-members', '/organisation/members', Record<never, never>, Record<never, never>>,
     'organisation-settings': RouteRecordInfo<'organisation-settings', '/organisation/settings', Record<never, never>, Record<never, never>>,
+    'organisation-tags': RouteRecordInfo<'organisation-tags', '/organisation/tags', Record<never, never>, Record<never, never>>,
     'platform': RouteRecordInfo<'platform', '/platform', Record<never, never>, Record<never, never>>,
     'platform-activity-log': RouteRecordInfo<'platform-activity-log', '/platform/activity-log', Record<never, never>, Record<never, never>>,
     'platform-organisations': RouteRecordInfo<'platform-organisations', '/platform/organisations', Record<never, never>, Record<never, never>>,