feat: add organization settings UI

backend/src/Socialize.Api/Infrastructure/Development/DevelopmentSeedExtensions.cs

@@ -122,6 +122,7 @@ public static class DevelopmentSeedExtensions
 
         await EnsureOrganizationDataAsync(
             manager.Id,
+            dev.Id,
             dbContext,
             cancellationToken);
 
@@ -234,6 +235,7 @@ public static class DevelopmentSeedExtensions
 
     private static async Task EnsureOrganizationDataAsync(
         Guid managerUserId,
+        Guid developerUserId,
         AppDbContext dbContext,
         CancellationToken cancellationToken)
     {
@@ -255,25 +257,51 @@ public static class DevelopmentSeedExtensions
         organization.Slug = "northstar-collective";
         organization.OwnerUserId = managerUserId;
 
+        await UpsertOrganizationMembershipAsync(
+            dbContext,
+            Guid.Parse("99999999-9999-9999-9999-000000000001"),
+            OrganizationId,
+            managerUserId,
+            OrganizationRoles.Owner,
+            cancellationToken);
+
+        await UpsertOrganizationMembershipAsync(
+            dbContext,
+            Guid.Parse("99999999-9999-9999-9999-000000000002"),
+            OrganizationId,
+            developerUserId,
+            OrganizationRoles.Admin,
+            cancellationToken);
+
+        await dbContext.SaveChangesAsync(cancellationToken);
+    }
+
+    private static async Task UpsertOrganizationMembershipAsync(
+        AppDbContext dbContext,
+        Guid membershipId,
+        Guid organizationId,
+        Guid userId,
+        string role,
+        CancellationToken cancellationToken)
+    {
         OrganizationMembership? membership = await dbContext.OrganizationMemberships
             .SingleOrDefaultAsync(
-                candidate => candidate.OrganizationId == OrganizationId && candidate.UserId == managerUserId,
+                candidate => candidate.OrganizationId == organizationId && candidate.UserId == userId,
                 cancellationToken);
         if (membership is null)
         {
             membership = new OrganizationMembership
             {
-                Id = Guid.Parse("99999999-9999-9999-9999-000000000001"),
-                OrganizationId = OrganizationId,
-                UserId = managerUserId,
-                Role = OrganizationRoles.Owner,
+                Id = membershipId,
+                OrganizationId = organizationId,
+                UserId = userId,
+                Role = role,
                 CreatedAt = DateTimeOffset.UtcNow,
             };
             dbContext.OrganizationMemberships.Add(membership);
         }
 
-        membership.Role = OrganizationRoles.Owner;
-        await dbContext.SaveChangesAsync(cancellationToken);
+        membership.Role = role;
     }
 
     private static async Task EnsureWorkspaceDataAsync(

frontend/src/features/organizations/stores/organizationStore.js

@@ -0,0 +1,142 @@
+import { computed, ref, watch } from 'vue';
+import { defineStore } from 'pinia';
+import { useAuthStore } from '@/features/auth/stores/authStore.js';
+import { useClient } from '@/plugins/api.js';
+
+export const organizationPermissions = {
+    manageOrganizationSettings: 'ManageOrganizationSettings',
+    manageOrganizationMembers: 'ManageOrganizationMembers',
+    createWorkspaces: 'CreateWorkspaces',
+    manageWorkspaces: 'ManageWorkspaces',
+    manageBilling: 'ManageBilling',
+    manageConnectors: 'ManageConnectors',
+    accessOwnedWorkspaces: 'AccessOwnedWorkspaces',
+};
+
+export const useOrganizationStore = defineStore('organization', () => {
+    const authStore = useAuthStore();
+    const client = useClient();
+
+    const organizations = ref([]);
+    const selectedOrganizationId = ref(null);
+    const detailsById = ref({});
+    const isLoading = ref(false);
+    const isLoadingDetails = ref(false);
+    const error = ref(null);
+
+    const activeOrganization = computed(() =>
+        organizations.value.find(organization => organization.id === selectedOrganizationId.value) ?? null
+    );
+
+    function userCan(organization, permission) {
+        return Boolean(organization?.currentUserPermissions?.includes(permission));
+    }
+
+    function setSelectedOrganization(organizationId) {
+        if (organizations.value.some(organization => organization.id === organizationId)) {
+            selectedOrganizationId.value = organizationId;
+        }
+    }
+
+    function setSelectedOrganizationFromWorkspace(workspace) {
+        if (workspace?.organizationId) {
+            if (
+                organizations.value.length === 0 ||
+                organizations.value.some(organization => organization.id === workspace.organizationId)
+            ) {
+                selectedOrganizationId.value = workspace.organizationId;
+            }
+        }
+    }
+
+    async function fetchOrganizations() {
+        if (!authStore.isAuthenticated) {
+            organizations.value = [];
+            selectedOrganizationId.value = null;
+            detailsById.value = {};
+            error.value = null;
+            return [];
+        }
+
+        isLoading.value = true;
+        error.value = null;
+
+        try {
+            const response = await client.get('/api/organizations');
+            organizations.value = response.data ?? [];
+
+            if (!organizations.value.some(organization => organization.id === selectedOrganizationId.value)) {
+                selectedOrganizationId.value = organizations.value[0]?.id ?? null;
+            }
+
+            return organizations.value;
+        } catch (fetchError) {
+            console.error('Failed to fetch organizations:', fetchError);
+            organizations.value = [];
+            selectedOrganizationId.value = null;
+            error.value = 'Failed to load organizations.';
+            return [];
+        } finally {
+            isLoading.value = false;
+        }
+    }
+
+    async function fetchOrganization(organizationId) {
+        if (!authStore.isAuthenticated || !organizationId) {
+            return null;
+        }
+
+        isLoadingDetails.value = true;
+        error.value = null;
+
+        try {
+            const response = await client.get(`/api/organizations/${organizationId}`);
+            if (response.data) {
+                detailsById.value = {
+                    ...detailsById.value,
+                    [organizationId]: response.data,
+                };
+                selectedOrganizationId.value = organizationId;
+            }
+
+            return response.data ?? null;
+        } catch (fetchError) {
+            console.error('Failed to fetch organization:', fetchError);
+            error.value = 'Failed to load organization.';
+            return null;
+        } finally {
+            isLoadingDetails.value = false;
+        }
+    }
+
+    watch(
+        () => authStore.isAuthenticated,
+        async isAuthenticated => {
+            if (!isAuthenticated) {
+                organizations.value = [];
+                selectedOrganizationId.value = null;
+                detailsById.value = {};
+                error.value = null;
+                return;
+            }
+
+            await fetchOrganizations();
+        },
+        { immediate: true }
+    );
+
+    return {
+        organizations,
+        selectedOrganizationId,
+        activeOrganization,
+        detailsById,
+        isLoading,
+        isLoadingDetails,
+        error,
+        userCan,
+        setSelectedOrganization,
+        setSelectedOrganizationFromWorkspace,
+        fetchOrganizations,
+        fetchOrganization,
+    };
+});

frontend/src/features/organizations/views/OrganizationSettingsView.vue

@@ -0,0 +1,365 @@
+<script setup>
+    import { computed, onMounted, watch } from 'vue';
+    import { useRoute, useRouter } from 'vue-router';
+    import { useI18n } from 'vue-i18n';
+    import {
+        mdiAccountGroupOutline,
+        mdiBriefcaseOutline,
+        mdiCogOutline,
+        mdiCreditCardOutline,
+        mdiLanConnect,
+    } from '@mdi/js';
+    import {
+        organizationPermissions,
+        useOrganizationStore,
+    } from '@/features/organizations/stores/organizationStore.js';
+    import { useWorkspaceStore } from '@/features/workspaces/stores/workspaceStore.js';
+
+    const route = useRoute();
+    const router = useRouter();
+    const { t } = useI18n();
+    const organizationStore = useOrganizationStore();
+    const workspaceStore = useWorkspaceStore();
+
+    const organizationId = computed(() => route.params.organizationId);
+    const organization = computed(() =>
+        organizationStore.detailsById[organizationId.value] ??
+        organizationStore.organizations.find(candidate => candidate.id === organizationId.value) ??
+        null
+    );
+    const permissions = computed(() => organization.value?.currentUserPermissions ?? []);
+    const canViewMembers = computed(() =>
+        permissions.value.includes(organizationPermissions.manageOrganizationMembers)
+    );
+    const canViewBilling = computed(() =>
+        permissions.value.includes(organizationPermissions.manageBilling)
+    );
+    const canViewConnections = computed(() =>
+        permissions.value.includes(organizationPermissions.manageConnectors)
+    );
+    const canViewWorkspaces = computed(() =>
+        permissions.value.includes(organizationPermissions.manageWorkspaces) ||
+        permissions.value.includes(organizationPermissions.createWorkspaces)
+    );
+    const visibleSections = computed(() => [
+        { key: 'profile', icon: mdiCogOutline, visible: true },
+        { key: 'members', icon: mdiAccountGroupOutline, visible: canViewMembers.value },
+        { key: 'billing', icon: mdiCreditCardOutline, visible: canViewBilling.value },
+        { key: 'connections', icon: mdiLanConnect, visible: canViewConnections.value },
+        { key: 'workspaces', icon: mdiBriefcaseOutline, visible: canViewWorkspaces.value },
+    ].filter(section => section.visible));
+
+    function hasPermission(permission) {
+        return permissions.value.includes(permission);
+    }
+
+    async function loadOrganization() {
+        if (!organizationId.value) {
+            return;
+        }
+
+        await organizationStore.fetchOrganization(organizationId.value);
+    }
+
+    async function openWorkspace(workspaceId) {
+        const workspace = organization.value?.workspaces?.find(candidate => candidate.id === workspaceId);
+        if (workspace) {
+            workspaceStore.setActiveWorkspace(workspace.id);
+            await router.push({ name: 'workspace-dashboard' });
+        }
+    }
+
+    onMounted(loadOrganization);
+
+    watch(organizationId, loadOrganization);
+</script>
+
+<template>
+    <section class="organization-settings-shell">
+        <div class="settings-hero">
+            <div>
+                <div class="eyebrow">{{ t('organizationSettings.eyebrow') }}</div>
+                <h1>{{ organization?.name ?? t('organizationSettings.title') }}</h1>
+                <p>{{ t('organizationSettings.description') }}</p>
+            </div>
+            <div class="settings-summary">
+                <span>{{ t('organizationSettings.slugLabel') }}</span>
+                <strong>{{ organization?.slug ?? '-' }}</strong>
+            </div>
+        </div>
+
+        <div
+            v-if="organizationStore.isLoadingDetails && !organization"
+            class="page-message"
+        >
+            {{ t('organizationSettings.loading') }}
+        </div>
+
+        <div
+            v-else-if="organizationStore.error"
+            class="page-message error"
+        >
+            {{ organizationStore.error }}
+        </div>
+
+        <div
+            v-else-if="organization"
+            class="settings-grid"
+        >
+            <article
+                v-for="section in visibleSections"
+                :key="section.key"
+                class="settings-section"
+            >
+                <div class="section-heading">
+                    <span class="section-icon">
+                        <v-icon :icon="section.icon" />
+                    </span>
+                    <div>
+                        <h2>{{ t(`organizationSettings.sections.${section.key}.title`) }}</h2>
+                        <p>{{ t(`organizationSettings.sections.${section.key}.description`) }}</p>
+                    </div>
+                </div>
+
+                <div
+                    v-if="section.key === 'profile'"
+                    class="detail-list"
+                >
+                    <div>
+                        <span>{{ t('organizationSettings.fields.name') }}</span>
+                        <strong>{{ organization.name }}</strong>
+                    </div>
+                    <div>
+                        <span>{{ t('organizationSettings.fields.slug') }}</span>
+                        <strong>{{ organization.slug }}</strong>
+                    </div>
+                    <div>
+                        <span>{{ t('organizationSettings.fields.createdAt') }}</span>
+                        <strong>{{ new Date(organization.createdAt).toLocaleDateString() }}</strong>
+                    </div>
+                </div>
+
+                <div
+                    v-else-if="section.key === 'members'"
+                    class="table-list"
+                >
+                    <div
+                        v-for="member in organization.members"
+                        :key="member.userId"
+                        class="table-row"
+                    >
+                        <div>
+                            <strong>{{ member.displayName }}</strong>
+                            <span>{{ member.email }}</span>
+                        </div>
+                        <small>{{ t(`organizationSettings.roles.${member.role}`, member.role) }}</small>
+                    </div>
+                    <div
+                        v-if="!organization.members?.length"
+                        class="empty-state"
+                    >
+                        {{ t('organizationSettings.sections.members.empty') }}
+                    </div>
+                </div>
+
+                <div
+                    v-else-if="section.key === 'billing'"
+                    class="placeholder-panel"
+                >
+                    <strong>{{ t('organizationSettings.sections.billing.placeholderTitle') }}</strong>
+                    <span>{{ t('organizationSettings.sections.billing.placeholderText') }}</span>
+                </div>
+
+                <div
+                    v-else-if="section.key === 'connections'"
+                    class="placeholder-panel"
+                >
+                    <strong>{{ t('organizationSettings.sections.connections.placeholderTitle') }}</strong>
+                    <span>{{ t('organizationSettings.sections.connections.placeholderText') }}</span>
+                </div>
+
+                <div
+                    v-else-if="section.key === 'workspaces'"
+                    class="table-list"
+                >
+                    <button
+                        v-for="workspace in organization.workspaces"
+                        :key="workspace.id"
+                        class="table-row table-row-button"
+                        type="button"
+                        @click="openWorkspace(workspace.id)"
+                    >
+                        <div>
+                            <strong>{{ workspace.name }}</strong>
+                            <span>{{ workspace.timeZone }}</span>
+                        </div>
+                        <small>{{ workspace.slug }}</small>
+                    </button>
+                    <div
+                        v-if="!organization.workspaces?.length"
+                        class="empty-state"
+                    >
+                        {{ t('organizationSettings.sections.workspaces.empty') }}
+                    </div>
+                </div>
+            </article>
+
+            <article class="settings-section permissions-section">
+                <div class="section-heading">
+                    <span class="section-icon">
+                        <v-icon :icon="mdiCogOutline" />
+                    </span>
+                    <div>
+                        <h2>{{ t('organizationSettings.permissions.title') }}</h2>
+                        <p>{{ t('organizationSettings.permissions.description') }}</p>
+                    </div>
+                </div>
+                <div class="permission-grid">
+                    <span
+                        v-for="permission in Object.values(organizationPermissions)"
+                        :key="permission"
+                        :class="{ enabled: hasPermission(permission) }"
+                    >
+                        {{ t(`organizationSettings.permissions.items.${permission}`) }}
+                    </span>
+                </div>
+            </article>
+        </div>
+    </section>
+</template>
+
+<style scoped>
+    .organization-settings-shell {
+        @apply mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 py-8 md:px-8;
+    }
+
+    .settings-hero {
+        @apply grid gap-4 rounded-[1.25rem] border p-6 md:grid-cols-[minmax(0,1fr)_auto] md:items-end md:p-8;
+        background: rgba(255, 255, 255, 0.94);
+        border-color: rgba(23, 32, 51, 0.08);
+    }
+
+    .eyebrow {
+        @apply text-xs font-bold uppercase tracking-[0.2em];
+        color: #c2410c;
+    }
+
+    .settings-hero h1 {
+        @apply mt-3 text-3xl font-black md:text-4xl;
+        color: #172033;
+    }
+
+    .settings-hero p,
+    .settings-summary span,
+    .section-heading p,
+    .detail-list span,
+    .table-row span,
+    .placeholder-panel span,
+    .empty-state {
+        @apply text-sm leading-6;
+        color: #526178;
+    }
+
+    .settings-summary {
+        @apply flex flex-col gap-1 rounded-[1rem] px-4 py-3;
+        background: rgba(23, 32, 51, 0.05);
+    }
+
+    .settings-summary strong {
+        @apply text-sm;
+        color: #172033;
+    }
+
+    .settings-grid {
+        @apply grid gap-4 lg:grid-cols-2;
+    }
+
+    .settings-section {
+        @apply flex flex-col gap-5 rounded-[1.25rem] border p-5;
+        background: rgba(255, 255, 255, 0.94);
+        border-color: rgba(23, 32, 51, 0.08);
+    }
+
+    .permissions-section {
+        @apply lg:col-span-2;
+    }
+
+    .section-heading {
+        @apply flex gap-4;
+    }
+
+    .section-icon {
+        @apply flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-[1rem];
+        background: rgba(23, 32, 51, 0.06);
+        color: #172033;
+    }
+
+    .section-heading h2 {
+        @apply text-xl font-black;
+        color: #172033;
+    }
+
+    .detail-list,
+    .table-list {
+        @apply flex flex-col gap-2;
+    }
+
+    .detail-list div,
+    .table-row {
+        @apply flex items-center justify-between gap-4 rounded-[1rem] px-4 py-3;
+        background: rgba(23, 32, 51, 0.04);
+    }
+
+    .table-row {
+        @apply text-left;
+    }
+
+    .table-row-button {
+        @apply w-full transition-colors;
+    }
+
+    .table-row-button:hover {
+        background: rgba(23, 32, 51, 0.08);
+    }
+
+    .table-row div {
+        @apply flex min-w-0 flex-col;
+    }
+
+    .detail-list strong,
+    .table-row strong,
+    .placeholder-panel strong {
+        @apply font-semibold;
+        color: #172033;
+    }
+
+    .table-row small {
+        @apply flex-shrink-0 text-xs font-bold uppercase;
+        color: #c2410c;
+    }
+
+    .placeholder-panel,
+    .empty-state {
+        @apply rounded-[1rem] px-4 py-4;
+        background: rgba(23, 32, 51, 0.04);
+    }
+
+    .placeholder-panel {
+        @apply flex flex-col gap-1;
+    }
+
+    .permission-grid {
+        @apply flex flex-wrap gap-2;
+    }
+
+    .permission-grid span {
+        @apply rounded-full px-3 py-2 text-xs font-bold;
+        background: rgba(23, 32, 51, 0.06);
+        color: #526178;
+    }
+
+    .permission-grid span.enabled {
+        background: rgba(15, 118, 110, 0.12);
+        color: #0f766e;
+    }
+</style>

frontend/src/features/workspaces/stores/workspaceStore.js

@@ -1,10 +1,12 @@
 import { computed, ref, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { useAuthStore } from '@/features/auth/stores/authStore.js';
+import { useOrganizationStore } from '@/features/organizations/stores/organizationStore.js';
 import { useClient } from '@/plugins/api.js';
 
 export const useWorkspaceStore = defineStore('workspace', () => {
     const authStore = useAuthStore();
+    const organizationStore = useOrganizationStore();
     const client = useClient();
 
     const workspaces = ref([]);
@@ -42,6 +44,8 @@ export const useWorkspaceStore = defineStore('workspace', () => {
             if (!workspaces.value.some(workspace => workspace.id === activeWorkspaceId.value)) {
                 activeWorkspaceId.value = workspaces.value[0]?.id ?? null;
             }
+
+            organizationStore.setSelectedOrganizationFromWorkspace(activeWorkspace.value);
         } catch (fetchError) {
             console.error('Failed to fetch workspaces:', fetchError);
             workspaces.value = [];
@@ -161,8 +165,14 @@ export const useWorkspaceStore = defineStore('workspace', () => {
     }
 
     function setActiveWorkspace(workspaceId) {
+        if (!workspaceId) {
+            activeWorkspaceId.value = null;
+            return;
+        }
+
         if (workspaces.value.some(workspace => workspace.id === workspaceId)) {
             activeWorkspaceId.value = workspaceId;
+            organizationStore.setSelectedOrganizationFromWorkspace(activeWorkspace.value);
         }
     }
 

frontend/src/features/workspaces/views/WorkspaceCreateView.vue

@@ -2,11 +2,13 @@
     import { computed, reactive, ref } from 'vue';
     import { useRouter } from 'vue-router';
     import { useI18n } from 'vue-i18n';
+    import { useOrganizationStore } from '@/features/organizations/stores/organizationStore.js';
     import TimeZoneSelect from '@/features/workspaces/components/TimeZoneSelect.vue';
     import { useWorkspaceStore } from '@/features/workspaces/stores/workspaceStore.js';
 
     const router = useRouter();
     const { t } = useI18n();
+    const organizationStore = useOrganizationStore();
     const workspaceStore = useWorkspaceStore();
 
     const form = reactive({
@@ -23,6 +25,10 @@
 
         return slugify(form.name);
     });
+    const selectedOrganizationId = computed({
+        get: () => organizationStore.selectedOrganizationId,
+        set: value => organizationStore.setSelectedOrganization(value),
+    });
 
     function computedDefaultTimeZone() {
         return workspaceStore.activeWorkspace?.timeZone || 'America/Montreal';
@@ -48,13 +54,14 @@
         const slug = slugify(form.slug || form.name);
         const timeZone = form.timeZone.trim();
 
-        if (!name || !slug || !timeZone) {
+        if (!name || !slug || !timeZone || !selectedOrganizationId.value) {
             formError.value = t('workspaceCreate.errors.required');
             return;
         }
 
         try {
             await workspaceStore.createWorkspace({
+                organizationId: selectedOrganizationId.value,
                 name,
                 slug,
                 timeZone,
@@ -114,6 +121,22 @@
                     />
                 </label>
 
+                <label class="field">
+                    <span>{{ t('workspaceCreate.fields.organization') }}</span>
+                    <select
+                        v-model="selectedOrganizationId"
+                        :disabled="workspaceStore.isCreating || organizationStore.organizations.length <= 1"
+                    >
+                        <option
+                            v-for="organization in organizationStore.organizations"
+                            :key="organization.id"
+                            :value="organization.id"
+                        >
+                            {{ organization.name }}
+                        </option>
+                    </select>
+                </label>
+
                 <label class="field">
                     <span>{{ t('workspaceCreate.fields.slug') }}</span>
                     <input
@@ -242,7 +265,8 @@
         color: #172033;
     }
 
-    .field input {
+    .field input,
+    .field select {
         @apply rounded-[1rem] border px-4 py-3 text-sm;
         background: #fffdf8;
         border-color: rgba(23, 32, 51, 0.1);

frontend/src/layouts/main/WorkspaceSelector.vue

@@ -4,26 +4,52 @@
     import { useI18n } from 'vue-i18n';
     import AppAvatar from '@/components/AppAvatar.vue';
     import { useAuthStore } from '@/features/auth/stores/authStore.js';
+    import {
+        organizationPermissions,
+        useOrganizationStore,
+    } from '@/features/organizations/stores/organizationStore.js';
     import { useWorkspaceStore } from '@/features/workspaces/stores/workspaceStore.js';
     import {
         mdiChevronDown,
+        mdiCogOutline,
         mdiPlus,
     } from '@mdi/js';
 
     const router = useRouter();
     const { t } = useI18n();
     const workspaceStore = useWorkspaceStore();
+    const organizationStore = useOrganizationStore();
     const authStore = useAuthStore();
 
     const isWorkspaceMenuOpen = ref(false);
     const workspaceMenuRef = ref(null);
 
-    const canSwitchWorkspaces = computed(() => workspaceStore.workspaces.length > 1);
-    const canManageWorkspaces = computed(() => authStore.isManager);
-    const canOpenWorkspaceMenu = computed(() => canSwitchWorkspaces.value || canManageWorkspaces.value);
+    const activeOrganization = computed(() => organizationStore.activeOrganization);
+    const visibleWorkspaces = computed(() => {
+        if (!organizationStore.selectedOrganizationId) {
+            return workspaceStore.workspaces;
+        }
+
+        return workspaceStore.workspaces.filter(
+            workspace => workspace.organizationId === organizationStore.selectedOrganizationId
+        );
+    });
+    const canSwitchWorkspaces = computed(() => visibleWorkspaces.value.length > 1);
+    const canSwitchOrganizations = computed(() => organizationStore.organizations.length > 1);
+    const canManageWorkspaces = computed(() =>
+        activeOrganization.value?.currentUserPermissions?.includes(organizationPermissions.createWorkspaces) ||
+        activeOrganization.value?.currentUserPermissions?.includes(organizationPermissions.manageWorkspaces) ||
+        authStore.isManager
+    );
+    const canOpenWorkspaceMenu = computed(() =>
+        canSwitchWorkspaces.value || canSwitchOrganizations.value || canManageWorkspaces.value || Boolean(activeOrganization.value)
+    );
     const activeWorkspaceName = computed(() =>
         workspaceStore.activeWorkspace?.name || t('nav.noWorkspace')
     );
+    const activeOrganizationName = computed(() =>
+        activeOrganization.value?.name || t('workspaceSelector.noOrganization')
+    );
 
     function toggleWorkspaceMenu() {
         if (!canOpenWorkspaceMenu.value) {
@@ -38,11 +64,25 @@
         isWorkspaceMenuOpen.value = false;
     }
 
+    function chooseOrganization(organizationId) {
+        organizationStore.setSelectedOrganization(organizationId);
+
+        const nextWorkspace = workspaceStore.workspaces.find(
+            workspace => workspace.organizationId === organizationId
+        );
+        workspaceStore.setActiveWorkspace(nextWorkspace?.id ?? null);
+    }
+
     async function openCreateWorkspace() {
         isWorkspaceMenuOpen.value = false;
         await router.push({ name: 'workspace-create' });
     }
 
+    async function openOrganizationSettings(organizationId) {
+        isWorkspaceMenuOpen.value = false;
+        await router.push({ name: 'organization-settings', params: { organizationId } });
+    }
+
     function handleDocumentClick(event) {
         if (workspaceMenuRef.value && !workspaceMenuRef.value.contains(event.target)) {
             isWorkspaceMenuOpen.value = false;
@@ -87,7 +127,7 @@
             class="user-menu"
         >
             <button
-                v-for="workspace in workspaceStore.workspaces"
+                v-for="workspace in visibleWorkspaces"
                 :key="workspace.id"
                 class="user-menu-item"
                 :class="{ 'user-menu-item-active': workspace.id === workspaceStore.activeWorkspaceId }"
@@ -113,6 +153,38 @@
                 <span>{{ t('workspaceSelector.createAction') }}</span>
                 <v-icon :icon="mdiPlus" />
             </button>
+
+            <div class="organization-switcher">
+                <div class="organization-switcher-label">
+                    <span>{{ t('workspaceSelector.organizationLabel') }}</span>
+                    <strong>{{ activeOrganizationName }}</strong>
+                </div>
+
+                <button
+                    v-for="organization in organizationStore.organizations"
+                    :key="organization.id"
+                    class="user-menu-item organization-option"
+                    :class="{ 'user-menu-item-active': organization.id === organizationStore.selectedOrganizationId }"
+                    type="button"
+                    @click="chooseOrganization(organization.id)"
+                >
+                    <span class="organization-mark">{{ organization.name.slice(0, 1).toUpperCase() }}</span>
+                    <span class="user-menu-item-copy">
+                        <span>{{ organization.name }}</span>
+                        <small>{{ organization.slug }}</small>
+                    </span>
+                </button>
+
+                <button
+                    v-if="activeOrganization"
+                    class="user-menu-item organization-settings-link"
+                    type="button"
+                    @click="openOrganizationSettings(activeOrganization.id)"
+                >
+                    <span>{{ t('workspaceSelector.organizationSettings') }}</span>
+                    <v-icon :icon="mdiCogOutline" />
+                </button>
+            </div>
         </div>
     </div>
 </template>
@@ -160,8 +232,10 @@
     }
 
     .user-menu {
-        @apply absolute right-0 top-[calc(100%+0.75rem)] flex min-w-[14rem] flex-col gap-1 rounded-[1.25rem] border p-2;
-        background: rgba(255, 255, 255, 0.96);
+        @apply absolute right-0 top-[calc(100%+0.75rem)] flex max-h-[80vh] min-w-[17rem] flex-col gap-1 overflow-y-auto rounded-[1.25rem] border p-2;
+        isolation: isolate;
+        background: #fffdf8;
+        background-clip: padding-box;
         border-color: rgba(23, 32, 51, 0.08);
         box-shadow: 0 18px 40px rgba(23, 32, 51, 0.12);
         z-index: 40;
@@ -199,4 +273,33 @@
         @apply justify-between border border-dashed;
         border-color: rgba(23, 32, 51, 0.12);
     }
+
+    .organization-switcher {
+        @apply mt-2 flex flex-col gap-1 border-t pt-2;
+        border-color: rgba(23, 32, 51, 0.08);
+    }
+
+    .organization-switcher-label {
+        @apply flex flex-col gap-0.5 px-3 py-2;
+    }
+
+    .organization-switcher-label span {
+        @apply text-xs font-bold uppercase tracking-[0.18em];
+        color: #7a8799;
+    }
+
+    .organization-switcher-label strong {
+        @apply truncate text-sm;
+        color: #172033;
+    }
+
+    .organization-mark {
+        @apply flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-[0.8rem] text-xs font-black;
+        background: rgba(23, 32, 51, 0.08);
+        color: #172033;
+    }
+
+    .organization-settings-link {
+        @apply justify-between;
+    }
 </style>

frontend/src/locales/en.json

@@ -39,7 +39,10 @@
     "saving": "Saving..."
   },
   "workspaceSelector": {
-    "createAction": "Add workspace"
+    "createAction": "Add workspace",
+    "organizationLabel": "Organization",
+    "organizationSettings": "Organization settings",
+    "noOrganization": "No organization"
   },
   "workspaceCreate": {
     "eyebrow": "Workspace",
@@ -54,6 +57,7 @@
     "fields": {
       "name": "Workspace name",
       "namePlaceholder": "Northwind Studio",
+      "organization": "Organization",
       "slug": "Workspace slug",
       "slugPlaceholder": "northwind-studio",
       "timeZone": "Time zone"
@@ -63,6 +67,66 @@
       "createFailed": "The workspace could not be created."
     }
   },
+  "organizationSettings": {
+    "eyebrow": "Organization",
+    "title": "Organization settings",
+    "description": "Manage the SaaS account boundary for members, billing access, connections, and owned workspaces.",
+    "loading": "Loading organization settings...",
+    "slugLabel": "Account slug",
+    "fields": {
+      "name": "Name",
+      "slug": "Slug",
+      "createdAt": "Created"
+    },
+    "sections": {
+      "profile": {
+        "title": "Profile",
+        "description": "The account identity used across organization-owned workspaces."
+      },
+      "members": {
+        "title": "Members",
+        "description": "Organization-level users and their inherited account permissions.",
+        "empty": "No organization members found."
+      },
+      "billing": {
+        "title": "Billing",
+        "description": "Subscription and billing access for this organization.",
+        "placeholderTitle": "Billing provider is not connected yet",
+        "placeholderText": "Plan, payment, and invoice management will live here after billing integration is added."
+      },
+      "connections": {
+        "title": "Connections",
+        "description": "Organization-level connectors and data mappings.",
+        "placeholderTitle": "No organization connections configured",
+        "placeholderText": "Connector authorization flows are intentionally out of scope for this UI shell."
+      },
+      "workspaces": {
+        "title": "Workspaces",
+        "description": "Brand and client workspaces owned by this organization.",
+        "empty": "No workspaces belong to this organization yet."
+      }
+    },
+    "roles": {
+      "Owner": "Owner",
+      "Admin": "Admin",
+      "BillingManager": "Billing manager",
+      "ConnectorManager": "Connector manager",
+      "Member": "Member"
+    },
+    "permissions": {
+      "title": "Your permissions",
+      "description": "Current organization permissions returned by the API.",
+      "items": {
+        "ManageOrganizationSettings": "Manage settings",
+        "ManageOrganizationMembers": "Manage members",
+        "CreateWorkspaces": "Create workspaces",
+        "ManageWorkspaces": "Manage workspaces",
+        "ManageBilling": "Manage billing",
+        "ManageConnectors": "Manage connectors",
+        "AccessOwnedWorkspaces": "Access owned workspaces"
+      }
+    }
+  },
   "nav": {
     "brandCaption": "Approval workflow",
     "workspace": "Workspace",

frontend/src/locales/fr.json

@@ -39,7 +39,10 @@
     "saving": "Enregistrement..."
   },
   "workspaceSelector": {
-    "createAction": "Ajouter un espace"
+    "createAction": "Ajouter un espace",
+    "organizationLabel": "Organisation",
+    "organizationSettings": "Parametres de l'organisation",
+    "noOrganization": "Aucune organisation"
   },
   "workspaceCreate": {
     "eyebrow": "Espace",
@@ -54,6 +57,7 @@
     "fields": {
       "name": "Nom de l'espace",
       "namePlaceholder": "Northwind Studio",
+      "organization": "Organisation",
       "slug": "Slug de l'espace",
       "slugPlaceholder": "northwind-studio",
       "timeZone": "Fuseau horaire"
@@ -63,6 +67,66 @@
       "createFailed": "L'espace n'a pas pu etre cree."
     }
   },
+  "organizationSettings": {
+    "eyebrow": "Organisation",
+    "title": "Parametres de l'organisation",
+    "description": "Gerez le compte SaaS pour les membres, la facturation, les connexions et les espaces detenus.",
+    "loading": "Chargement des parametres de l'organisation...",
+    "slugLabel": "Slug du compte",
+    "fields": {
+      "name": "Nom",
+      "slug": "Slug",
+      "createdAt": "Cree"
+    },
+    "sections": {
+      "profile": {
+        "title": "Profil",
+        "description": "L'identite du compte utilisee dans les espaces detenus par l'organisation."
+      },
+      "members": {
+        "title": "Membres",
+        "description": "Utilisateurs de l'organisation et leurs permissions heritees.",
+        "empty": "Aucun membre d'organisation trouve."
+      },
+      "billing": {
+        "title": "Facturation",
+        "description": "Acces a l'abonnement et a la facturation de cette organisation.",
+        "placeholderTitle": "Le fournisseur de facturation n'est pas encore connecte",
+        "placeholderText": "La gestion du forfait, des paiements et des factures sera ajoutee ici apres l'integration de facturation."
+      },
+      "connections": {
+        "title": "Connexions",
+        "description": "Connecteurs et regles de donnees au niveau de l'organisation.",
+        "placeholderTitle": "Aucune connexion d'organisation configuree",
+        "placeholderText": "Les flux d'autorisation des connecteurs sont volontairement hors portee de cette interface."
+      },
+      "workspaces": {
+        "title": "Espaces",
+        "description": "Espaces de marque et de client detenus par cette organisation.",
+        "empty": "Aucun espace n'appartient encore a cette organisation."
+      }
+    },
+    "roles": {
+      "Owner": "Proprietaire",
+      "Admin": "Administrateur",
+      "BillingManager": "Gestionnaire facturation",
+      "ConnectorManager": "Gestionnaire connecteurs",
+      "Member": "Membre"
+    },
+    "permissions": {
+      "title": "Vos permissions",
+      "description": "Permissions d'organisation retournees par l'API.",
+      "items": {
+        "ManageOrganizationSettings": "Gerer les parametres",
+        "ManageOrganizationMembers": "Gerer les membres",
+        "CreateWorkspaces": "Creer des espaces",
+        "ManageWorkspaces": "Gerer les espaces",
+        "ManageBilling": "Gerer la facturation",
+        "ManageConnectors": "Gerer les connecteurs",
+        "AccessOwnedWorkspaces": "Acceder aux espaces detenus"
+      }
+    }
+  },
   "nav": {
     "brandCaption": "Flux d'approbation",
     "workspace": "Espace de travail",

frontend/src/router/router.js

@@ -18,6 +18,7 @@ const CampaignsView = () => import('@/features/campaigns/views/CampaignsView.vue
 const CampaignDetailView = () => import('@/features/campaigns/views/CampaignDetailView.vue');
 const MediaLibraryView = () => import('@/features/content/views/MediaLibraryView.vue');
 const WorkspaceCreateView = () => import('@/features/workspaces/views/WorkspaceCreateView.vue');
+const OrganizationSettingsView = () => import('@/features/organizations/views/OrganizationSettingsView.vue');
 const SettingsLayoutView = () => import('@/features/settings/views/SettingsLayoutView.vue');
 const UserSettingsView = () => import('@/features/user-profile/views/UserSettingsView.vue');
 const IntegrationsSettingsView = () => import('@/features/settings/views/IntegrationsSettingsView.vue');
@@ -126,6 +127,12 @@ const routes = [
     component: DeveloperFeedbackDetailView,
     meta: { requiresAuth: true, roles: ['developer'] },
   },
+  {
+    path: '/app/organizations/:organizationId/settings',
+    name: 'organization-settings',
+    component: OrganizationSettingsView,
+    meta: { requiresAuth: true },
+  },
   {
     path: '/app/workspace-settings',
     name: 'workspace-settings',