fix: #101

web/src/components/features/organizations/parts/OrgDetailModal.vue

@@ -34,6 +34,7 @@
         </template>
 
         <UTabs
+          v-model="activeTab"
           :items="tabs"
           class="w-full"
           :ui="{ list: 'rounded-2xl', indicator: 'rounded-xl' }"
@@ -106,6 +107,7 @@
 import { ref, watch, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { Organization } from 'taskview-api'
+import type { OrgDetailTab } from '../types'
 import { useOrganizationStore } from '@/stores/organization.store'
 import { useTaskView } from '@/composables/useTaskView'
 import { useOrgPermissions } from '@/composables/useOrgPermissions'
@@ -115,6 +117,7 @@ import OrgSsoSettings from './OrgSsoSettings.vue'
 const open = defineModel<boolean>({ default: false })
 const props = defineProps<{
   organization: Organization | null
+  initialTab?: OrgDetailTab
 }>()
 
 const { t } = useI18n()
@@ -127,17 +130,26 @@ const editName = ref('')
 const editSlug = ref('')
 const saving = ref(false)
 
+const activeTab = ref<OrgDetailTab>('general')
+
 const tabs = computed(() => {
   const items = [
-    { label: t('organizations.general'), slot: 'general' },
+    { label: t('organizations.general'), slot: 'general', value: 'general' },
   ]
   if (isAdmin.value) {
-    items.push({ label: t('organizations.members'), slot: 'members' })
-    items.push({ label: 'SSO', slot: 'sso' })
+    items.push({ label: t('organizations.members'), slot: 'members', value: 'members' })
+    items.push({ label: 'SSO', slot: 'sso', value: 'sso' })
   }
   return items
 })
 
+watch(open, (isOpen) => {
+  if (isOpen) {
+    const requested = props.initialTab ?? 'general'
+    activeTab.value = tabs.value.some(tab => tab.value === requested) ? requested : 'general'
+  }
+})
+
 watch(() => props.organization, (org) => {
   if (org) {
     editName.value = org.name

web/src/components/features/organizations/types.ts

@@ -0,0 +1 @@
+export type OrgDetailTab = 'general' | 'members' | 'sso'

web/src/components/sidebars/dashboard-second/SidebarOrgSelect.vue

@@ -54,12 +54,13 @@
       class="flex items-center justify-center gap-2 mb-3"
     >
       <UButton
+        v-if="isAdmin"
         icon="i-lucide-user-plus"
         color="neutral"
         variant="soft"
         size="sm"
         :ui="{ base: 'rounded-lg' }"
-        @click="isDetailOpen = true"
+        @click="openDetail('members')"
       />
       <UButton
         icon="i-lucide-pencil"
@@ -67,15 +68,16 @@
         variant="soft"
         size="sm"
         :ui="{ base: 'rounded-lg' }"
-        @click="isDetailOpen = true"
+        @click="openDetail('general')"
       />
       <UButton
+        v-if="isAdmin"
         icon="i-lucide-shield"
         color="neutral"
         variant="soft"
         size="sm"
         :ui="{ base: 'rounded-lg' }"
-        @click="isDetailOpen = true"
+        @click="openDetail('sso')"
       />
     </div>
 
@@ -86,6 +88,7 @@
     <OrgDetailModal
       v-model="isDetailOpen"
       :organization="currentOrg"
+      :initial-tab="detailTab"
     />
   </div>
 </template>
@@ -95,8 +98,10 @@ import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { storeToRefs } from 'pinia'
 import type { Organization } from 'taskview-api'
+import type { OrgDetailTab } from '@/components/features/organizations/types'
 import { useOrganizationStore } from '@/stores/organization.store'
 import { useOrgSwitcher } from '@/composables/useOrgSwitcher'
+import { useOrgPermissions } from '@/composables/useOrgPermissions'
 import OrgCreateModal from '@/components/features/organizations/parts/OrgCreateModal.vue'
 import OrgDetailModal from '@/components/features/organizations/parts/OrgDetailModal.vue'
 
@@ -105,9 +110,17 @@ const orgStore = useOrganizationStore()
 const { organizations, currentOrg } = storeToRefs(orgStore)
 const { switchOrg } = useOrgSwitcher()
 
+const { isAdmin } = useOrgPermissions(() => currentOrg.value)
+
 const open = ref(false)
 const isCreateOpen = ref(false)
 const isDetailOpen = ref(false)
+const detailTab = ref<OrgDetailTab>('general')
+
+function openDetail(tab: OrgDetailTab) {
+  detailTab.value = tab
+  isDetailOpen.value = true
+}
 
 function selectOrg(org: Organization) {
   open.value = false