feat: add organization settings UI

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);