docs: add survey-ui CSS class reference table

Co-authored-by: Johannes <jobenjada@users.noreply.github.com>

.claude/scheduled_tasks.lock

@@ -1 +0,0 @@
-{"sessionId":"f77248e2-8840-41c6-968b-c3b7d8a9e913","pid":49125,"acquiredAt":1776168010367}

.env.example

@@ -32,6 +32,24 @@ CRON_SECRET=
 # Set the minimum log level(debug, info, warn, error, fatal)
 LOG_LEVEL=info
 
+# BullMQ workers require REDIS_URL (for example `redis://localhost:6379`) to be set.
+# BullMQ worker startup is enabled by default outside tests. Set to 0 to disable.
+# BULLMQ_WORKER_ENABLED=1
+# Set to 1 on web/API pods that only enqueue jobs while a separate BullMQ worker deployment consumes them.
+# BULLMQ_EXTERNAL_WORKER_ENABLED=0
+
+# Number of BullMQ worker instances started per Formbricks server process.
+# BULLMQ_WORKER_COUNT=1
+
+# Number of concurrent jobs each BullMQ worker can process.
+# BULLMQ_WORKER_CONCURRENCY=1
+
+# Survey publish/close scheduling is configured with public build-time env vars because the editor UI
+# also needs to render the selected execution time and timezone.
+# NEXT_PUBLIC_SURVEY_SCHEDULING_TIME_ZONE=Europe/Berlin
+# NEXT_PUBLIC_SURVEY_SCHEDULING_LOCAL_HOUR=0
+# NEXT_PUBLIC_SURVEY_SCHEDULING_LOCAL_MINUTE=0
+
 ##############
 #  DATABASE  #
 ##############
@@ -45,7 +63,30 @@ DATABASE_URL='postgresql://postgres:postgres@localhost:5432/formbricks?schema=pu
 # Set explicitly to avoid confusion; override as needed when using docker-compose.dev.yml.
 HUB_API_KEY=dev-api-key
 HUB_API_URL=http://localhost:8080
-HUB_DATABASE_URL=postgresql://postgres:postgres@postgres:5432/postgres?sslmode=disable
+HUB_DATABASE_URL=postgresql://postgres:postgres@postgres:5432/hub?sslmode=disable
+# Hub image tag used by docker-compose.dev.yml (hub + hub-migrate). Leave unset to use the
+# pinned default in the compose file; override here when testing a specific Hub release.
+# HUB_IMAGE_TAG=0.3.0
+
+# Hub embeddings are optional. Set a provider and model to enable semantic search embeddings in
+# the Hub API and hub-worker. For provider-specific settings, see:
+# https://hub.formbricks.com/reference/environment-variables/#embeddings
+# Example with Google AI Studio:
+# EMBEDDING_PROVIDER=google
+# EMBEDDING_MODEL=gemini-embedding-001
+# EMBEDDING_PROVIDER_API_KEY=
+
+###########################
+#  CUBE ANALYTICS (XM V5) #
+###########################
+# XM Suite v5 analysis features require Cube.js. The optional xm dev profile exposes Cube on port 4000.
+# Uncomment COMPOSE_PROFILES=xm to run the optional Cube analytics service.
+# COMPOSE_PROFILES=xm
+CUBEJS_API_URL=http://localhost:4000
+# Generate with: openssl rand -hex 32. `pnpm dev:setup` will create/preserve this automatically.
+CUBEJS_API_SECRET=
+CUBEJS_JWT_ISSUER=formbricks-web
+CUBEJS_JWT_AUDIENCE=formbricks-cube
 
 ################
 #  MAIL SETUP  #
@@ -79,7 +120,7 @@ SMTP_PASSWORD=smtpPassword
 # S3 STORAGE #
 ##############
 
-# S3 Storage is required for the file upload in serverless environments like Vercel
+# S3 Storage is required for the file upload in serverless environments
 S3_ACCESS_KEY=
 S3_SECRET_KEY=
 S3_REGION=
@@ -115,6 +156,13 @@ PASSWORD_RESET_DISABLED=1
 # Organization Invite. Disable the ability for invited users to create an account.
 # INVITE_DISABLED=1
 
+###########################################
+# Account deletion reauthentication       #
+###########################################
+
+# Danger: disables fresh SSO reauthentication for passwordless account deletion. Keep unset unless you accept the risk.
+# DISABLE_ACCOUNT_DELETION_SSO_REAUTH=1
+
 
 ##########
 # Other  #
@@ -141,6 +189,9 @@ GITHUB_SECRET=
 # Configure Google Login
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
+# Google only returns the auth_time proof after Auth Platform Security Bundle "Session age claims" is enabled.
+# Keep this unset until that setting is active for the OAuth app.
+# GOOGLE_ACCOUNT_DELETION_REAUTH_ENABLED=1
 
 # Configure Azure Active Directory Login
 AZUREAD_CLIENT_ID=
@@ -149,16 +200,17 @@ AZUREAD_TENANT_ID=
 
 # Configure Formbricks AI at the instance level
 # Set the provider used for AI features on this instance.
-# Accepted values for AI_PROVIDER: aws, gcp, azure
-# Set AI_MODEL to the provider-specific model or deployment name and configure the matching credentials below.
-# AI_PROVIDER=gcp
+# Accepted values for AI_PROVIDER: aws, google, azure
+# Set AI_MODEL to the provider-specific model or deployment name and configure the matching provider settings below.
+# AI_PROVIDER=google
 # AI_MODEL=gemini-2.5-flash
 
-# Google Vertex AI credentials
-# AI_GCP_PROJECT=
-# AI_GCP_LOCATION=
-# AI_GCP_CREDENTIALS_JSON=
-# AI_GCP_APPLICATION_CREDENTIALS=
+# Google Cloud settings for Gemini models
+# Credentials are optional when Application Default Credentials are available.
+# AI_GOOGLE_CLOUD_PROJECT=
+# AI_GOOGLE_CLOUD_LOCATION=
+# AI_GOOGLE_CLOUD_CREDENTIALS_JSON=
+# AI_GOOGLE_CLOUD_APPLICATION_CREDENTIALS=
 
 # Amazon Bedrock credentials
 # AI_AWS_REGION=
@@ -277,24 +329,13 @@ REDIS_URL=redis://localhost:6379
 # If the ip should be added in the log or not. Default 0
 # AUDIT_LOG_GET_USER_IP=0
 
-
-# Cube.js Analytics (optional — only needed for the analytics/dashboard feature)
-# Required when running the Cube service (docker-compose.dev.yml). Generate with: openssl rand -hex 32
-# Use the same value for CUBEJS_API_TOKEN so the client can authenticate.
-# CUBEJS_API_SECRET=
-# URL where the Cube.js instance is running
-# CUBEJS_API_URL=http://localhost:4000
-# API token sent with each Cube.js request; must match CUBEJS_API_SECRET when CUBEJS_DEV_MODE is off
-# CUBEJS_API_TOKEN=
-#
-# Cube connects to the Hub DB. With docker-compose.dev.yml defaults, use the local postgres service.
+# Optional Cube.js database overrides. The official local docker-compose.dev.yml stack points Cube at the
+# local `postgres` service automatically; set these only when running Cube yourself or changing bundled defaults.
 # CUBEJS_DB_HOST=postgres
 # CUBEJS_DB_PORT=5432
 # CUBEJS_DB_NAME=postgres
 # CUBEJS_DB_USER=postgres
 # CUBEJS_DB_PASS=postgres
-#
-# Alternative (external Hub/Postgres on the hub network): formbricks_hub_postgres, db: hub, user/pass: formbricks/formbricks_dev
 
 # Lingo.dev API key for translation generation
 LINGO_API_KEY=your_api_key_here

.github/ISSUE_TEMPLATE/accessibility.yml

@@ -0,0 +1,78 @@
+name: Accessibility issue
+description: "Report an accessibility barrier in Formbricks (WCAG, screen reader, keyboard, contrast, etc.)"
+type: bug
+labels: ["accessibility", "bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for helping make Formbricks accessible to everyone. Please fill in as much as you can — see [ACCESSIBILITY.md](https://github.com/formbricks/formbricks/blob/main/ACCESSIBILITY.md) for context.
+  - type: textarea
+    id: summary
+    attributes:
+      label: Summary
+      description: What part of Formbricks is affected and what's wrong?
+      placeholder: "e.g. The language switcher in survey runtime can't be reached with Tab."
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+    validations:
+      required: true
+  - type: textarea
+    id: actual
+    attributes:
+      label: Actual behavior
+    validations:
+      required: true
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to reproduce
+      placeholder: |
+        1. Open a survey with multiple languages
+        2. Press Tab repeatedly
+        3. Focus never lands on the language switcher
+    validations:
+      required: true
+  - type: input
+    id: wcag
+    attributes:
+      label: Related WCAG criterion (if known)
+      placeholder: "e.g. 2.1.1 Keyboard"
+  - type: dropdown
+    id: severity
+    attributes:
+      label: Severity
+      options:
+        - "Critical — blocks a user from completing a core task"
+        - "High — significant barrier with no easy workaround"
+        - "Medium — barrier with a workaround"
+        - "Low — minor friction"
+    validations:
+      required: true
+  - type: input
+    id: at
+    attributes:
+      label: Assistive technology
+      placeholder: "e.g. NVDA 2026.1, VoiceOver on macOS 15, keyboard only"
+  - type: input
+    id: browser
+    attributes:
+      label: Browser and OS
+      placeholder: "e.g. Firefox 138 on Windows 11"
+  - type: dropdown
+    id: environment
+    attributes:
+      label: Your Environment
+      options:
+        - Formbricks Cloud (app.formbricks.com)
+        - Self-hosted Formbricks
+    validations:
+      required: true
+  - type: textarea
+    id: other
+    attributes:
+      label: Other information (screenshots, recordings, axe output)

.github/actions/build-and-push-docker/action.yml

@@ -284,6 +284,10 @@ runs:
           database_url=${{ env.DUMMY_DATABASE_URL }}
           encryption_key=${{ env.DUMMY_ENCRYPTION_KEY }}
           redis_url=${{ env.DUMMY_REDIS_URL }}
+          hub_api_url=${{ env.DUMMY_HUB_API_URL }}
+          hub_api_key=${{ env.DUMMY_HUB_API_KEY }}
+          cubejs_api_url=${{ env.DUMMY_CUBEJS_API_URL }}
+          cubejs_api_secret=${{ env.DUMMY_CUBEJS_API_SECRET }}
           sentry_auth_token=${{ env.SENTRY_AUTH_TOKEN }}
           posthog_key=${{ env.POSTHOG_KEY }}
       env:
@@ -291,6 +295,10 @@ runs:
         DUMMY_DATABASE_URL: ${{ env.DUMMY_DATABASE_URL }}
         DUMMY_ENCRYPTION_KEY: ${{ env.DUMMY_ENCRYPTION_KEY }}
         DUMMY_REDIS_URL: ${{ env.DUMMY_REDIS_URL }}
+        DUMMY_HUB_API_URL: ${{ env.DUMMY_HUB_API_URL }}
+        DUMMY_HUB_API_KEY: ${{ env.DUMMY_HUB_API_KEY }}
+        DUMMY_CUBEJS_API_URL: ${{ env.DUMMY_CUBEJS_API_URL }}
+        DUMMY_CUBEJS_API_SECRET: ${{ env.DUMMY_CUBEJS_API_SECRET }}
         SENTRY_AUTH_TOKEN: ${{ env.SENTRY_AUTH_TOKEN }}
         POSTHOG_KEY: ${{ env.POSTHOG_KEY }}
 

.github/actions/cache-build-web/action.yml

@@ -20,12 +20,12 @@ runs:
   using: "composite"
   steps:
     - name: Checkout repo
-      uses: actions/checkout@v3
+      uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
     - uses: ./.github/actions/dangerous-git-checkout
 
     - name: Cache Build
-      uses: actions/cache@v3
+      uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4.2.3
       id: cache-build
       env:
         cache-name: prod-build
@@ -43,7 +43,7 @@ runs:
       shell: bash
 
     - name: Setup Node.js 20.x
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
       with:
         node-version: 20.x
       if: steps.cache-build.outputs.cache-hit != 'true'
@@ -53,20 +53,18 @@ runs:
       if: steps.cache-build.outputs.cache-hit != 'true'
 
     - name: Install dependencies
-      run: pnpm install --config.platform=linux --config.architecture=x64
+      run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
       if: steps.cache-build.outputs.cache-hit != 'true'
       shell: bash
 
-    - name: create .env
-      run: cp .env.example .env
+    - name: Create .env
+      run: pnpm dev:setup
       shell: bash
 
-    - name: Fill ENCRYPTION_KEY, ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
+    - name: Fill E2E_TESTING in .env
       env:
         E2E_TESTING_MODE: ${{ inputs.e2e_testing_mode }}
       run: |
-        RANDOM_KEY=$(openssl rand -hex 32)
-        sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
         echo "E2E_TESTING=$E2E_TESTING_MODE" >> .env
       shell: bash
 

.github/actions/dangerous-git-checkout/action.yml

@@ -4,7 +4,7 @@ runs:
   using: "composite"
   steps:
     - name: Checkout repo
-      uses: actions/checkout@v3
+      uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       with:
         ref: ${{ github.event.pull_request.head.sha }}
         fetch-depth: 2

.github/workflows/build-and-push-ecr.yml

@@ -91,5 +91,9 @@ jobs:
           DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
           DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
           DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
+          DUMMY_HUB_API_URL: ${{ secrets.DUMMY_HUB_API_URL }}
+          DUMMY_HUB_API_KEY: ${{ secrets.DUMMY_HUB_API_KEY }}
+          DUMMY_CUBEJS_API_URL: ${{ secrets.DUMMY_CUBEJS_API_URL }}
+          DUMMY_CUBEJS_API_SECRET: ${{ secrets.DUMMY_CUBEJS_API_SECRET }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           POSTHOG_KEY: ${{ secrets.POSTHOG_KEY }}

.github/workflows/chromatic.yml

@@ -49,7 +49,7 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
       - name: Run Chromatic
         uses: chromaui/action@4c20b95e9d3209ecfdf9cd6aace6bbde71ba1694 # v13.3.4

.github/workflows/docker-build-validation.yml

@@ -73,6 +73,10 @@ jobs:
             database_url=${{ secrets.DUMMY_DATABASE_URL }}
             encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
             redis_url=redis://localhost:6379
+            hub_api_url=http://localhost:4000
+            hub_api_key=build-time-placeholder
+            cubejs_api_url=http://localhost:4000
+            cubejs_api_secret=build-time-placeholder
 
       - name: Verify and Initialize PostgreSQL
         run: |
@@ -143,6 +147,10 @@ jobs:
             -e DATABASE_URL="postgresql://test:test@host.docker.internal:5432/formbricks" \
             -e ENCRYPTION_KEY="$DUMMY_ENCRYPTION_KEY" \
             -e REDIS_URL="redis://host.docker.internal:6379" \
+            -e HUB_API_URL="http://localhost:4000" \
+            -e HUB_API_KEY="build-time-placeholder" \
+            -e CUBEJS_API_URL="http://localhost:4000" \
+            -e CUBEJS_API_SECRET="build-time-placeholder" \
             -d "formbricks-test:$GITHUB_SHA"
 
           # Start health check polling immediately (every 5 seconds for up to 5 minutes)

.github/workflows/e2e.yml

@@ -57,7 +57,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 22.x
-        uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 22.x
 
@@ -65,19 +65,15 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
         shell: bash
 
-      - name: create .env
-        run: cp .env.example .env
+      - name: Create .env
+        run: pnpm dev:setup
         shell: bash
 
-      - name: Fill ENCRYPTION_KEY, ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
+      - name: Fill ENTERPRISE_LICENSE_KEY and E2E_TESTING in .env
         run: |
-          RANDOM_KEY=$(openssl rand -hex 32)
-          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s/ENTERPRISE_LICENSE_KEY=.*/ENTERPRISE_LICENSE_KEY=${{ secrets.ENTERPRISE_LICENSE_KEY }}/" .env
           sed -i "s|REDIS_URL=.*|REDIS_URL=redis://localhost:6379|" .env
           echo "" >> .env
@@ -85,65 +81,48 @@ jobs:
           echo "S3_REGION=us-east-1" >> .env
           echo "S3_BUCKET_NAME=formbricks-e2e" >> .env
           echo "S3_ENDPOINT_URL=http://localhost:9000" >> .env
-          echo "S3_ACCESS_KEY=devminio" >> .env
-          echo "S3_SECRET_KEY=devminio123" >> .env
+          echo "S3_ACCESS_KEY=devrustfs-service" >> .env
+          echo "S3_SECRET_KEY=devrustfs-service123" >> .env
           echo "S3_FORCE_PATH_STYLE=1" >> .env
         shell: bash
 
-      - name: Install MinIO client (mc)
-        run: |
-          set -euo pipefail
-          MC_VERSION="RELEASE.2025-08-13T08-35-41Z"
-          MC_BASE="https://dl.min.io/client/mc/release/linux-amd64/archive"
-          MC_BIN="mc.${MC_VERSION}"
-          MC_SUM="${MC_BIN}.sha256sum"
-
-          curl -fsSL "${MC_BASE}/${MC_BIN}" -o "${MC_BIN}"
-          curl -fsSL "${MC_BASE}/${MC_SUM}" -o "${MC_SUM}"
-
-          sha256sum -c "${MC_SUM}"
-
-          chmod +x "${MC_BIN}"
-          sudo mv "${MC_BIN}" /usr/local/bin/mc
-
-      - name: Start MinIO Server
+      - name: Start RustFS Server
         run: |
           set -euo pipefail
 
-          # Start MinIO server in background
+          # Start RustFS server in background
           docker run -d \
-            --name minio-server \
+            --name rustfs-server \
             -p 9000:9000 \
             -p 9001:9001 \
-            -e MINIO_ROOT_USER=devminio \
-            -e MINIO_ROOT_PASSWORD=devminio123 \
-            minio/minio:RELEASE.2025-09-07T16-13-09Z \
-            server /data --console-address :9001
+            -e RUSTFS_ACCESS_KEY=devrustfs \
+            -e RUSTFS_SECRET_KEY=devrustfs123 \
+            -e RUSTFS_ADDRESS=:9000 \
+            -e RUSTFS_CONSOLE_ENABLE=true \
+            -e RUSTFS_CONSOLE_ADDRESS=:9001 \
+            rustfs/rustfs:1.0.0-alpha.93 \
+            /data
 
-          echo "MinIO server started"
+          echo "RustFS server started"
 
-      - name: Wait for MinIO and create S3 bucket
+      - name: Bootstrap RustFS bucket and browser upload CORS
         run: |
           set -euo pipefail
 
-          echo "Waiting for MinIO to be ready..."
-          ready=0
-          for i in {1..60}; do
-            if curl -fsS http://localhost:9000/minio/health/live >/dev/null; then
-              echo "MinIO is up after ${i} seconds"
-              ready=1
-              break
-            fi
-            sleep 1
-          done
-
-          if [ "$ready" -ne 1 ]; then
-            echo "::error::MinIO did not become ready within 60 seconds"
-            exit 1
-          fi
-
-          mc alias set local http://localhost:9000 devminio devminio123
-          mc mb --ignore-existing local/formbricks-e2e
+          docker run --rm \
+            --network host \
+            --entrypoint /bin/sh \
+            -e RUSTFS_ENDPOINT_URL=http://127.0.0.1:9000 \
+            -e RUSTFS_ADMIN_USER=devrustfs \
+            -e RUSTFS_ADMIN_PASSWORD=devrustfs123 \
+            -e RUSTFS_SERVICE_USER=devrustfs-service \
+            -e RUSTFS_SERVICE_PASSWORD=devrustfs-service123 \
+            -e RUSTFS_BUCKET_NAME=formbricks-e2e \
+            -e RUSTFS_POLICY_NAME=formbricks-e2e-policy \
+            -e RUSTFS_CORS_ALLOWED_ORIGINS=http://localhost:3000,http://127.0.0.1:3000 \
+            -v "$PWD/docker/rustfs-init.sh:/tmp/rustfs-init.sh:ro" \
+            minio/mc@sha256:95b5f3f7969a5c5a9f3a700ba72d5c84172819e13385aaf916e237cf111ab868 \
+            /tmp/rustfs-init.sh
 
       - name: Build App
         run: |
@@ -242,8 +221,14 @@ jobs:
         if: failure()
         with:
           name: app-logs
+          if-no-files-found: ignore
           path: app.log
 
       - name: Output App Logs
         if: failure()
-        run: cat app.log
+        run: |
+          if [ -f app.log ]; then
+            cat app.log
+          else
+            echo "app.log not found because the Run App step did not execute or failed before log creation."
+          fi

.github/workflows/formbricks-release.yml

@@ -155,3 +155,31 @@ jobs:
       commit_sha: ${{ github.sha }}
       is_prerelease: ${{ github.event.release.prerelease }}
       make_latest: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}
+
+  linear-release-complete:
+    name: Mark Linear release as complete
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    needs:
+      - docker-build-community
+      - docker-build-cloud
+      - helm-chart-release
+      - move-stable-tag
+    if: ${{ !github.event.release.prerelease }}
+    steps:
+      - name: Harden the runner
+        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        with:
+          egress-policy: audit
+
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          fetch-depth: 0
+
+      - name: Complete Linear release
+        uses: linear/linear-release-action@0353b5fa8c00326913966f00557d68f8f30b8b6b # v0.7.0
+        with:
+          access_key: ${{ secrets.LINEAR_ACCESS_KEY }}
+          command: complete
+          version: ${{ github.event.release.tag_name }}

.github/workflows/linear-release.yml

@@ -0,0 +1,30 @@
+name: Linear Release Sync
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  linear-release:
+    name: Sync release to Linear
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - name: Harden the runner
+        uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
+        with:
+          egress-policy: audit
+
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          fetch-depth: 0
+
+      - name: Sync Linear release
+        uses: linear/linear-release-action@0353b5fa8c00326913966f00557d68f8f30b8b6b # v0.7.0
+        with:
+          access_key: ${{ secrets.LINEAR_ACCESS_KEY }}

.github/workflows/lint.yml

@@ -21,7 +21,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 20.x
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20.x
 
@@ -29,17 +29,10 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
-      - name: create .env
-        run: cp .env.example .env
-
-      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
-        run: |
-          RANDOM_KEY=$(openssl rand -hex 32)
-          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
+      - name: Create .env
+        run: pnpm dev:setup
 
       - name: Lint
         run: pnpm lint

.github/workflows/release-docker-github-experimental.yml

@@ -47,4 +47,8 @@ jobs:
           DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
           DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
           DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
+          DUMMY_HUB_API_URL: ${{ secrets.DUMMY_HUB_API_URL }}
+          DUMMY_HUB_API_KEY: ${{ secrets.DUMMY_HUB_API_KEY }}
+          DUMMY_CUBEJS_API_URL: ${{ secrets.DUMMY_CUBEJS_API_URL }}
+          DUMMY_CUBEJS_API_SECRET: ${{ secrets.DUMMY_CUBEJS_API_SECRET }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

.github/workflows/release-docker-github.yml

@@ -105,4 +105,8 @@ jobs:
           DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
           DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
           DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
+          DUMMY_HUB_API_URL: ${{ secrets.DUMMY_HUB_API_URL }}
+          DUMMY_HUB_API_KEY: ${{ secrets.DUMMY_HUB_API_KEY }}
+          DUMMY_CUBEJS_API_URL: ${{ secrets.DUMMY_CUBEJS_API_URL }}
+          DUMMY_CUBEJS_API_SECRET: ${{ secrets.DUMMY_CUBEJS_API_SECRET }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

.github/workflows/sonarqube.yml

@@ -25,7 +25,7 @@ jobs:
           fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
 
       - name: Setup Node.js 22.x
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 22.x
 
@@ -33,17 +33,13 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
-      - name: create .env
-        run: cp .env.example .env
+      - name: Create .env
+        run: pnpm dev:setup
 
-      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
+      - name: Adjust CI-specific env values
         run: |
-          RANDOM_KEY=$(openssl rand -hex 32)
-          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s|REDIS_URL=.*|REDIS_URL=|" .env
 
       - name: Run tests with coverage

.github/workflows/test.yml

@@ -22,7 +22,7 @@ jobs:
       - uses: ./.github/actions/dangerous-git-checkout
 
       - name: Setup Node.js 20.x
-        uses: actions/setup-node@1a4442cacd436585916779262731d5b162bc6ec7 # v3.8.2
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20.x
 
@@ -30,17 +30,13 @@ jobs:
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
 
       - name: Install dependencies
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
-      - name: create .env
-        run: cp .env.example .env
+      - name: Create .env
+        run: pnpm dev:setup
 
-      - name: Generate Random ENCRYPTION_KEY, CRON_SECRET & NEXTAUTH_SECRET and fill in .env
+      - name: Adjust CI-specific env values
         run: |
-          RANDOM_KEY=$(openssl rand -hex 32)
-          sed -i "s/ENCRYPTION_KEY=.*/ENCRYPTION_KEY=${RANDOM_KEY}/" .env
-          sed -i "s/CRON_SECRET=.*/CRON_SECRET=${RANDOM_KEY}/" .env
-          sed -i "s/NEXTAUTH_SECRET=.*/NEXTAUTH_SECRET=${RANDOM_KEY}/" .env
           sed -i "s|REDIS_URL=.*|REDIS_URL=|" .env
 
       - name: Test

.github/workflows/translation-check.yml

@@ -2,6 +2,7 @@ name: Translation Validation
 
 permissions:
   contents: read
+  pull-requests: read
 
 on:
   pull_request:
@@ -39,7 +40,7 @@ jobs:
 
       - name: Setup Node.js 22.x
         if: steps.changes.outputs.translations == 'true'
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 22.x
 
@@ -49,7 +50,7 @@ jobs:
 
       - name: Install dependencies
         if: steps.changes.outputs.translations == 'true'
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile --config.platform=linux --config.architecture=x64
 
       - name: Validate translation keys
         if: steps.changes.outputs.translations == 'true'

.vercelignore

@@ -1 +0,0 @@
-apps/web/.env

ACCESSIBILITY.md

@@ -0,0 +1,48 @@
+# Accessibility
+
+Formbricks is committed to making our platform usable by everyone, including people who rely on assistive technologies.
+
+## Standards
+
+We aim to conform to:
+
+- **[WCAG 2.1 Level AA](https://www.w3.org/TR/WCAG21/)** — the web content baseline.
+- **[EN 301 549](https://www.etsi.org/deliver/etsi_en/301500_301599/301549/)** — the European harmonised standard referenced by the **European Accessibility Act (EAA)**, applicable to us as a Germany-based company.
+- **Section 508** — for users in US public-sector contexts.
+
+## Priorities
+
+1. **End-user surveys** (`packages/surveys`) — everything respondents see and interact with. This is our highest priority because survey takers don't choose Formbricks; the organisations running surveys choose for them.
+2. **Admin app** (`apps/web`) — survey creation, response analysis, and team management used by Formbricks customers.
+
+In both areas we focus on:
+
+- Keyboard navigation with a clearly visible focus indicator
+- Screen reader support through semantic HTML and correctly scoped ARIA
+- Sufficient color and contrast
+- Programmatically associated labels and announced status messages
+
+## Supported Environments
+
+- Latest two versions of Chrome, Firefox, Safari, and Edge
+- VoiceOver (macOS/iOS), NVDA (Windows), and TalkBack (Android)
+
+## Contributing
+
+When contributing UI changes:
+
+- Prefer semantic HTML over ARIA.
+- Tab through your change end-to-end and confirm focus is visible at every stop.
+- Label every control. Don't convey meaning by color alone.
+- Run [axe DevTools](https://www.deque.com/axe/devtools/) or Lighthouse on the page you changed.
+
+## Reporting Accessibility Issues
+
+If you encounter an accessibility barrier, please [open an issue](https://github.com/formbricks/formbricks/issues/new?labels=accessibility&template=accessibility.yml) using the accessibility template. For blocking issues in a procurement or compliance context, email **[hola@formbricks.com](mailto:hola@formbricks.com)**.
+
+## Resources
+
+- [WCAG 2.1 Quick Reference](https://www.w3.org/WAI/WCAG21/quickref/)
+- [EN 301 549](https://www.etsi.org/deliver/etsi_en/301500_301599/301549/)
+- [European Accessibility Act overview](https://ec.europa.eu/social/main.jsp?catId=1202)
+- [MDN Accessibility Reference](https://developer.mozilla.org/en-US/docs/Web/Accessibility)

apps/storybook/package.json

@@ -11,19 +11,19 @@
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
-    "@storybook/addon-a11y": "10.2.17",
-    "@storybook/addon-links": "10.2.17",
-    "@storybook/addon-onboarding": "10.2.17",
-    "@storybook/react-vite": "10.2.17",
-    "@typescript-eslint/eslint-plugin": "8.57.0",
-    "@tailwindcss/vite": "4.2.1",
-    "@typescript-eslint/parser": "8.57.0",
+    "@chromatic-com/storybook": "5.0.2",
+    "@storybook/addon-a11y": "10.3.6",
+    "@storybook/addon-docs": "10.3.6",
+    "@storybook/addon-links": "10.3.6",
+    "@storybook/addon-onboarding": "10.3.6",
+    "@storybook/react-vite": "10.3.6",
+    "@tailwindcss/vite": "4.2.4",
+    "@typescript-eslint/eslint-plugin": "8.57.2",
+    "@typescript-eslint/parser": "8.57.2",
     "@vitejs/plugin-react": "5.1.4",
     "eslint-plugin-react-refresh": "0.4.26",
-    "eslint-plugin-storybook": "10.2.17",
-    "storybook": "10.2.17",
-    "vite": "7.3.1",
-    "@storybook/addon-docs": "10.2.17"
+    "eslint-plugin-storybook": "10.3.6",
+    "storybook": "10.3.6",
+    "vite": "7.3.3"
   }
 }

apps/web/Dockerfile

@@ -66,6 +66,10 @@ RUN pnpm build --filter=@formbricks/database
 RUN --mount=type=secret,id=database_url \
     --mount=type=secret,id=encryption_key \
     --mount=type=secret,id=redis_url \
+    --mount=type=secret,id=hub_api_url \
+    --mount=type=secret,id=hub_api_key \
+    --mount=type=secret,id=cubejs_api_url \
+    --mount=type=secret,id=cubejs_api_secret \
     --mount=type=secret,id=sentry_auth_token \
     --mount=type=secret,id=posthog_key \
     /tmp/read-secrets.sh pnpm build --filter=@formbricks/web...

apps/web/app/(app)/(onboarding)/lib/onboarding.test.ts

@@ -1,4 +1,4 @@
-import { Prisma } from "@prisma/client";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
 import { DatabaseError } from "@formbricks/types/errors";
@@ -32,7 +32,7 @@ describe("getTeamsByOrganizationId", () => {
 
   test("throws DatabaseError on Prisma error", async () => {
     vi.mocked(prisma.team.findMany).mockRejectedValueOnce(
-      new Prisma.PrismaClientKnownRequestError("fail", { code: "P2002", clientVersion: "1.0.0" })
+      new PrismaClientKnownRequestError("fail", { code: "P2002", clientVersion: "1.0.0" })
     );
     await expect(getTeamsByOrganizationId("org1")).rejects.toThrow(DatabaseError);
   });

apps/web/app/(app)/(onboarding)/lib/onboarding.ts

@@ -1,6 +1,6 @@
 "use server";
 
-import { Prisma } from "@prisma/client";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
 import { ZId } from "@formbricks/types/common";
@@ -27,7 +27,7 @@ export const getTeamsByOrganizationId = reactCache(
         name: team.name,
       }));
     } catch (error) {
-      if (error instanceof Prisma.PrismaClientKnownRequestError) {
+      if (error instanceof PrismaClientKnownRequestError) {
         throw new DatabaseError(error.message);
       }
 

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/components/landing-sidebar.tsx

@@ -1,20 +1,32 @@
 "use client";
 
-import { ArrowUpRightIcon, ChevronRightIcon, LogOutIcon } from "lucide-react";
+import {
+  ArrowUpRightIcon,
+  Building2Icon,
+  ChevronRightIcon,
+  Loader2,
+  LogOutIcon,
+  PlusIcon,
+} from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
-import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useCallback, useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
+import { getOrganizationsForSwitcherAction } from "@/app/(app)/workspaces/[workspaceId]/actions";
 import FBLogo from "@/images/formbricks-wordmark.svg";
 import { cn } from "@/lib/cn";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
 import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
@@ -22,14 +34,65 @@ import {
 interface LandingSidebarProps {
   user: TUser;
   organization: TOrganization;
+  isMultiOrgEnabled: boolean;
 }
 
-export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
-  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState<boolean>(false);
+export const LandingSidebar = ({ user, organization, isMultiOrgEnabled }: LandingSidebarProps) => {
+  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
+  const [organizations, setOrganizations] = useState<{ id: string; name: string }[]>([]);
+  const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
+  const [organizationLoadError, setOrganizationLoadError] = useState<string | null>(null);
+  const [isOrgDropdownOpen, setIsOrgDropdownOpen] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
 
   const { t } = useTranslation();
   const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
 
+  const loadOrganizations = useCallback(async () => {
+    setIsLoadingOrganizations(true);
+    setOrganizationLoadError(null);
+    try {
+      const result = await getOrganizationsForSwitcherAction({ organizationId: organization.id });
+      if (result?.data) {
+        const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+        setOrganizations(sorted);
+      } else {
+        setOrganizationLoadError(
+          getFormattedErrorMessage(result) || t("common.failed_to_load_organizations")
+        );
+      }
+    } catch {
+      setOrganizationLoadError(t("common.failed_to_load_organizations"));
+    } finally {
+      setIsLoadingOrganizations(false);
+    }
+  }, [organization.id, t]);
+
+  useEffect(() => {
+    if (
+      isOrgDropdownOpen &&
+      organizations.length === 0 &&
+      !isLoadingOrganizations &&
+      !organizationLoadError
+    ) {
+      loadOrganizations();
+    }
+  }, [
+    isOrgDropdownOpen,
+    organizations.length,
+    isLoadingOrganizations,
+    organizationLoadError,
+    loadOrganizations,
+  ]);
+
+  const handleOrganizationChange = (orgId: string) => {
+    startTransition(() => {
+      setIsOrgDropdownOpen(false);
+      router.push(`/organizations/${orgId}/`);
+    });
+  };
+
   const dropdownNavigation = [
     {
       label: t("common.documentation"),
@@ -39,6 +102,11 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
     },
   ];
 
+  const switcherTriggerClasses =
+    "w-full border-t px-3 py-3 text-left transition-colors duration-200 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500 focus-visible:ring-inset";
+  const switcherIconClasses =
+    "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-600";
+
   return (
     <aside
       className={cn(
@@ -46,45 +114,97 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
       )}>
       <Image src={FBLogo} width={160} height={30} alt={t("workspace.formbricks_logo")} />
 
-      <div className="flex items-center">
+      <div className="flex flex-col">
+        {/* Organization Switcher */}
+        <DropdownMenu onOpenChange={setIsOrgDropdownOpen}>
+          <DropdownMenuTrigger asChild className={switcherTriggerClasses}>
+            <button type="button" className="flex w-full items-center gap-3">
+              <span className={switcherIconClasses}>
+                <Building2Icon className="h-4 w-4" strokeWidth={1.5} />
+              </span>
+              <div className="grow overflow-hidden">
+                <p className="truncate text-sm font-bold text-slate-700">{organization.name}</p>
+                <p className="text-sm text-slate-500">{t("common.organization")}</p>
+              </div>
+              {isPending && <Loader2 className="h-4 w-4 animate-spin text-slate-600" strokeWidth={1.5} />}
+              <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
+            <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+              <Building2Icon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+              {t("common.change_organization")}
+            </div>
+            {isLoadingOrganizations && (
+              <div className="flex items-center justify-center py-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+              </div>
+            )}
+            {!isLoadingOrganizations && organizationLoadError && (
+              <div className="px-2 py-4">
+                <p className="mb-2 text-sm text-red-600">{organizationLoadError}</p>
+                <button
+                  onClick={() => {
+                    setOrganizationLoadError(null);
+                    setOrganizations([]);
+                  }}
+                  className="text-xs text-slate-600 underline hover:text-slate-800">
+                  {t("common.try_again")}
+                </button>
+              </div>
+            )}
+            {!isLoadingOrganizations && !organizationLoadError && (
+              <>
+                <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+                  {organizations.map((org) => (
+                    <DropdownMenuCheckboxItem
+                      key={org.id}
+                      checked={org.id === organization.id}
+                      onClick={() => handleOrganizationChange(org.id)}
+                      className="cursor-pointer">
+                      {org.name}
+                    </DropdownMenuCheckboxItem>
+                  ))}
+                </DropdownMenuGroup>
+                {isMultiOrgEnabled && (
+                  <DropdownMenuCheckboxItem
+                    onClick={() => setOpenCreateOrganizationModal(true)}
+                    className="w-full cursor-pointer justify-between">
+                    <span>{t("common.create_new_organization")}</span>
+                    <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                  </DropdownMenuCheckboxItem>
+                )}
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        {/* User Dropdown */}
         <DropdownMenu>
           <DropdownMenuTrigger
             asChild
             id="userDropdownTrigger"
-            className="w-full rounded-br-xl border-t p-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
-            <button
-              type="button"
-              className={cn("flex w-full cursor-pointer flex-row items-center gap-3 text-left")}
-              aria-haspopup="menu">
-              <ProfileAvatar userId={user.id} />
+            className={cn(switcherTriggerClasses, "rounded-br-xl")}>
+            <button type="button" className="flex w-full items-center gap-3">
+              <span className={switcherIconClasses}>
+                <ProfileAvatar userId={user.id} />
+              </span>
               <div className="grow overflow-hidden">
                 <p
                   title={user?.email}
-                  className={cn(
-                    "ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700"
-                  )}>
+                  className="ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700">
                   {user?.name ? <span>{user?.name}</span> : <span>{user?.email}</span>}
                 </p>
-                <p title={organization?.name} className="truncate text-sm text-slate-500">
-                  {organization?.name}
-                </p>
+                <p className="text-sm text-slate-500">{t("common.account")}</p>
               </div>
-              <ChevronRightIcon className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")} />
+              <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
             </button>
           </DropdownMenuTrigger>
 
-          <DropdownMenuContent
-            id="userDropdownInnerContentWrapper"
-            side="right"
-            sideOffset={10}
-            alignOffset={5}
-            align="end">
-            {/* Dropdown Items */}
-
+          <DropdownMenuContent side="right" sideOffset={10} alignOffset={5} align="end">
             {dropdownNavigation.map((link) => (
               <Link
                 key={link.href}
-                id={link.href}
                 href={link.href}
                 target={link.target}
                 rel={link.target === "_blank" ? "noopener noreferrer" : undefined}
@@ -95,8 +215,6 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
                 </DropdownMenuItem>
               </Link>
             ))}
-
-            {/* Logout */}
             <DropdownMenuItem
               onClick={async () => {
                 await signOutWithAudit({
@@ -113,6 +231,7 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
+
       <CreateOrganizationModal open={openCreateOrganizationModal} setOpen={setOpenCreateOrganizationModal} />
     </aside>
   );

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/landing/page.tsx

@@ -3,7 +3,6 @@ import { LandingSidebar } from "@/app/(app)/(onboarding)/organizations/[organiza
 import { WorkspaceAndOrgSwitch } from "@/app/(app)/workspaces/[workspaceId]/components/workspace-and-org-switch";
 import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
-import { getAccessFlags } from "@/lib/membership/utils";
 import { getUser } from "@/lib/user/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
@@ -26,12 +25,11 @@ const Page = async (props: { params: Promise<{ organizationId: string }> }) => {
   const isMultiOrgEnabled = await getIsMultiOrgEnabled();
 
   const membership = await getMembershipByUserIdOrganizationId(session.user.id, organization.id);
-  const { isMember, isBilling } = getAccessFlags(membership?.role);
   const isMembershipPending = membership?.role === undefined;
 
   return (
     <div className="flex min-h-full min-w-full flex-row">
-      <LandingSidebar user={user} organization={organization} />
+      <LandingSidebar user={user} organization={organization} isMultiOrgEnabled={isMultiOrgEnabled} />
       <div className="flex-1">
         <div className="flex h-full flex-col">
           <div className="p-6">
@@ -45,8 +43,6 @@ const Page = async (props: { params: Promise<{ organizationId: string }> }) => {
               isLicenseActive={false}
               isOwnerOrManager={false}
               isAccessControlAllowed={false}
-              isMember={isMember}
-              isBilling={isBilling}
               isMembershipPending={isMembershipPending}
             />
           </div>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/channel/page.tsx

@@ -2,6 +2,7 @@ import { PictureInPicture2Icon, SendIcon, XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { OnboardingOptionsContainer } from "@/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer";
+import { capturePostHogEvent } from "@/lib/posthog";
 import { getUserWorkspaces } from "@/lib/workspace/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
@@ -41,6 +42,16 @@ const Page = async (props: ChannelPageProps) => {
 
   const workspaces = await getUserWorkspaces(session.user.id, params.organizationId);
 
+  capturePostHogEvent(
+    session.user.id,
+    "organization_mode_selected",
+    {
+      organization_id: params.organizationId,
+      mode: "surveys",
+    },
+    { organizationId: params.organizationId }
+  );
+
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
       <Header

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/WorkspaceSettings.tsx

@@ -18,6 +18,7 @@ import { createWorkspaceAction } from "@/app/(app)/workspaces/[workspaceId]/acti
 import { previewSurvey } from "@/app/lib/templates";
 import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
 import { buildStylingFromBrandColor } from "@/lib/styling/constants";
+import { toJsWorkspaceStateSurvey } from "@/lib/survey/client-utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { CreateTeamModal } from "@/modules/ee/teams/team-list/components/create-team-modal";
 import { TOrganizationTeam } from "@/modules/ee/teams/workspace-teams/types/team";
@@ -237,7 +238,7 @@ export const WorkspaceSettings = ({
         <SurveyInline
           appUrl={publicDomain}
           isPreviewMode={true}
-          survey={previewSurvey(workspaceName || t("common.my_product"), t)}
+          survey={toJsWorkspaceStateSurvey(previewSurvey(workspaceName || t("common.my_product"), t))}
           styling={previewStyling}
           isBrandingEnabled={false}
           languageCode="default"

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/page.tsx

@@ -11,6 +11,7 @@ import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboardin
 import { WorkspaceSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/WorkspaceSettings";
 import { DEFAULT_BRAND_COLOR } from "@/lib/constants";
 import { getPublicDomain } from "@/lib/getPublicUrl";
+import { capturePostHogEvent } from "@/lib/posthog";
 import { getUserWorkspaces } from "@/lib/workspace/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { getAccessControlPermission } from "@/modules/ee/license-check/lib/utils";
@@ -55,6 +56,18 @@ const Page = async (props: WorkspaceSettingsPageProps) => {
 
   const publicDomain = getPublicDomain();
 
+  if (searchParams.mode === "cx") {
+    capturePostHogEvent(
+      session.user.id,
+      "organization_mode_selected",
+      {
+        organization_id: params.organizationId,
+        mode: "cx",
+      },
+      { organizationId: params.organizationId }
+    );
+  }
+
   return (
     <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-12">
       <Header

apps/web/app/(app)/(onboarding)/workspaces/[workspaceId]/xm-templates/lib/utils.test.ts

@@ -60,8 +60,8 @@ const mockTemplate: TXMTemplate = {
   ],
   styling: {
     brandColor: { light: "#0000FF" },
-    questionColor: { light: "#00FF00" },
-    inputColor: { light: "#FF0000" },
+    elementHeadlineColor: { light: "#00FF00" },
+    inputBgColor: { light: "#FF0000" },
   },
 };
 

apps/web/app/(app)/billing-confirmation/components/ConfirmationPage.tsx

@@ -39,7 +39,10 @@ export const ConfirmationPage = () => {
           </p>
         </div>
         <Button asChild className="w-full justify-center">
-          <Link href={resolvedWorkspaceId ? `/workspaces/${resolvedWorkspaceId}/settings/billing` : "/"}>
+          <Link
+            href={
+              resolvedWorkspaceId ? `/workspaces/${resolvedWorkspaceId}/settings/organization/billing` : "/"
+            }>
             {t("billing_confirmation.back_to_billing_overview")}
           </Link>
         </Button>

apps/web/app/(app)/workspaces/[workspaceId]/(workspace)/feedback-sources/page.tsx

@@ -1 +1,8 @@
-export { WorkspaceSourcesPage as default } from "@/modules/workspaces/settings/sources/page";
+import { redirect } from "next/navigation";
+
+export default async function FeedbackSourcesRedirect(
+  props: Readonly<{ params: Promise<{ workspaceId: string }> }>
+) {
+  const { workspaceId } = await props.params;
+  redirect(`/workspaces/${workspaceId}/settings/workspace/feedback-sources`);
+}

apps/web/app/(app)/workspaces/[workspaceId]/actions.ts

@@ -10,6 +10,7 @@ import {
 import { ZWorkspaceUpdateInput } from "@formbricks/types/workspace";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getOrganization } from "@/lib/organization/service";
+import { capturePostHogEvent, groupIdentifyPostHog } from "@/lib/posthog";
 import { updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
@@ -23,13 +24,9 @@ import { createWorkspace } from "@/modules/workspaces/settings/lib/workspace";
 import { getOrganizationsByUserId } from "./lib/organization";
 import { getWorkspacesByUserId } from "./lib/workspace";
 
-const ZCreateWorkspaceInput = ZWorkspaceUpdateInput.extend({
-  feedbackRecordDirectoryId: ZId.optional(),
-});
-
 const ZCreateWorkspaceAction = z.object({
   organizationId: ZId,
-  data: ZCreateWorkspaceInput,
+  data: ZWorkspaceUpdateInput,
 });
 
 export const createWorkspaceAction = authenticatedActionClient.inputSchema(ZCreateWorkspaceAction).action(
@@ -44,7 +41,7 @@ export const createWorkspaceAction = authenticatedActionClient.inputSchema(ZCrea
       access: [
         {
           data: parsedInput.data,
-          schema: ZCreateWorkspaceInput,
+          schema: ZWorkspaceUpdateInput,
           type: "organization",
           roles: ["owner", "manager"],
         },
@@ -84,6 +81,19 @@ export const createWorkspaceAction = authenticatedActionClient.inputSchema(ZCrea
       notificationSettings: updatedNotificationSettings,
     });
 
+    groupIdentifyPostHog("workspace", workspace.id, { name: workspace.name });
+
+    capturePostHogEvent(
+      user.id,
+      "workspace_created",
+      {
+        organization_id: organizationId,
+        workspace_id: workspace.id,
+        name: workspace.name,
+      },
+      { organizationId, workspaceId: workspace.id }
+    );
+
     ctx.auditLoggingCtx.organizationId = organizationId;
     ctx.auditLoggingCtx.workspaceId = workspace.id;
     ctx.auditLoggingCtx.newObject = workspace;
@@ -121,7 +131,7 @@ const ZGetWorkspacesForSwitcherAction = z.object({
 });
 
 /**
- * Fetches projects list for switcher dropdown.
+ * Fetches workspaces list for switcher dropdown.
  * Called on-demand when user opens the workspace switcher.
  */
 export const getWorkspacesForSwitcherAction = authenticatedActionClient

apps/web/app/(app)/workspaces/[workspaceId]/components/SettingsSidebarContent.tsx

@@ -0,0 +1,450 @@
+"use client";
+
+import {
+  BellIcon,
+  BlocksIcon,
+  BrushIcon,
+  Building2Icon,
+  ChevronDownIcon,
+  CreditCardIcon,
+  FoldersIcon,
+  GlobeIcon,
+  KeyIcon,
+  LanguagesIcon,
+  ListChecksIcon,
+  Loader2,
+  ShapesIcon,
+  ShieldIcon,
+  TagIcon,
+  UnplugIcon,
+  UserCircleIcon,
+  UsersIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useTranslation } from "react-i18next";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+import { cn } from "@/lib/cn";
+import { getAccessFlags } from "@/lib/membership/utils";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
+
+interface SettingsSidebarContentProps {
+  workspaceId: string;
+  workspaceName: string;
+  organizationId: string;
+  organizationName: string;
+  membershipRole?: TOrganizationRole;
+  isFormbricksCloud: boolean;
+  isCollapsed: boolean;
+  isTextVisible: boolean;
+  // Workspace switcher
+  workspaces: { id: string; name: string }[];
+  isLoadingWorkspaces: boolean;
+  onWorkspaceChange: (id: string) => void;
+  onWorkspaceDropdownOpen: () => void;
+  // Organization switcher
+  organizations: { id: string; name: string }[];
+  isLoadingOrganizations: boolean;
+  onOrganizationChange: (id: string) => void;
+  onOrganizationDropdownOpen: () => void;
+}
+
+interface NavItem {
+  id: string;
+  label: string;
+  href: string;
+  icon: React.ReactNode;
+  hidden?: boolean;
+  disabled?: boolean;
+}
+
+const SettingsNavLink = ({
+  item,
+  isActive,
+  isCollapsed,
+  isTextVisible,
+  disabledMessage,
+}: {
+  item: NavItem;
+  isActive: boolean;
+  isCollapsed: boolean;
+  isTextVisible: boolean;
+  disabledMessage?: string;
+}) => {
+  const activeClass = "bg-slate-50 border-r-4 border-brand-dark font-semibold text-slate-900";
+  const inactiveClass =
+    "hover:bg-slate-50 border-r-4 border-transparent hover:border-slate-300 transition-all duration-150 ease-in-out";
+  const disabledClass = "cursor-not-allowed border-r-4 border-transparent text-slate-400";
+
+  const isDisabled = item.disabled;
+
+  const getStateClass = () => {
+    if (isDisabled) return disabledClass;
+    return isActive ? activeClass : inactiveClass;
+  };
+
+  if (isCollapsed) {
+    return (
+      <TooltipProvider delayDuration={0}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <li className={cn("rounded-l-md py-1.5 pl-2 text-sm", getStateClass())}>
+              {isDisabled ? (
+                <div className="flex items-center">{item.icon}</div>
+              ) : (
+                <Link href={item.href} className="flex items-center text-slate-600 hover:text-slate-900">
+                  {item.icon}
+                </Link>
+              )}
+            </li>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            {isDisabled ? disabledMessage || item.label : item.label}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  if (isDisabled) {
+    return (
+      <li className={cn("rounded-l-md py-1.5 pl-8 text-sm", disabledClass)}>
+        <Popover>
+          <PopoverTrigger asChild>
+            <div className="flex items-center">
+              {item.icon}
+              <span
+                className={cn(
+                  "ml-2 transition-opacity duration-100",
+                  isTextVisible ? "opacity-0" : "opacity-100"
+                )}>
+                {item.label}
+              </span>
+            </div>
+          </PopoverTrigger>
+          <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+            {disabledMessage || item.label}
+          </PopoverContent>
+        </Popover>
+      </li>
+    );
+  }
+
+  return (
+    <li
+      className={cn(
+        "rounded-l-md py-1.5 pl-8 text-sm",
+        isActive ? activeClass : inactiveClass,
+        "text-slate-600 hover:text-slate-900"
+      )}>
+      <Link href={item.href} className="flex items-center">
+        {item.icon}
+        <span
+          className={cn("ml-2 transition-opacity duration-100", isTextVisible ? "opacity-0" : "opacity-100")}>
+          {item.label}
+        </span>
+      </Link>
+    </li>
+  );
+};
+
+const SectionHeader = ({
+  icon,
+  label,
+  isCollapsed,
+  isTextVisible,
+  switcherName,
+  switcherItems,
+  isLoadingSwitcher,
+  currentId,
+  onSwitcherChange,
+  onSwitcherOpen,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  isCollapsed: boolean;
+  isTextVisible: boolean;
+  switcherName?: string;
+  switcherItems?: { id: string; name: string }[];
+  isLoadingSwitcher?: boolean;
+  currentId?: string;
+  onSwitcherChange?: (id: string) => void;
+  onSwitcherOpen?: () => void;
+}) => {
+  if (isCollapsed) {
+    return <div className="mb-1 mt-3 flex justify-center px-2 text-slate-400">{icon}</div>;
+  }
+
+  return (
+    <div
+      className={cn(
+        "mb-1 mt-4 flex min-w-0 items-center gap-2 px-3",
+        isTextVisible ? "opacity-0" : "opacity-100"
+      )}>
+      <span className="text-slate-500">{icon}</span>
+      <span className="shrink-0 text-xs font-semibold uppercase tracking-wider text-slate-500">{label}</span>
+      {switcherName && switcherItems && onSwitcherChange && (
+        <DropdownMenu onOpenChange={(open) => open && onSwitcherOpen?.()}>
+          <DropdownMenuTrigger className="ml-auto flex min-w-0 max-w-[50%] items-center gap-1 rounded-md border border-slate-200 px-2 py-0.5 text-xs text-slate-600 hover:bg-slate-50">
+            <span className="truncate">{switcherName}</span>
+            <ChevronDownIcon className="h-3 w-3" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="max-h-[300px]">
+            {isLoadingSwitcher ? (
+              <div className="flex items-center justify-center py-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+              </div>
+            ) : (
+              <DropdownMenuGroup className="overflow-y-auto">
+                {switcherItems.map((item) => (
+                  <DropdownMenuCheckboxItem
+                    key={item.id}
+                    checked={item.id === currentId}
+                    onClick={() => onSwitcherChange(item.id)}
+                    className="cursor-pointer text-sm">
+                    {item.name}
+                  </DropdownMenuCheckboxItem>
+                ))}
+              </DropdownMenuGroup>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  );
+};
+
+export const SettingsSidebarContent = ({
+  workspaceId,
+  workspaceName,
+  organizationId,
+  organizationName,
+  membershipRole,
+  isFormbricksCloud,
+  isCollapsed,
+  isTextVisible,
+  workspaces,
+  isLoadingWorkspaces,
+  onWorkspaceChange,
+  onWorkspaceDropdownOpen,
+  organizations,
+  isLoadingOrganizations,
+  onOrganizationChange,
+  onOrganizationDropdownOpen,
+}: SettingsSidebarContentProps) => {
+  const pathname = usePathname();
+  const { t } = useTranslation();
+  const { isMember, isBilling, isOwner, isManager } = getAccessFlags(membershipRole);
+  const isOwnerOrManager = isOwner || isManager;
+  const iconClassName = "h-4 w-4 shrink-0";
+
+  const basePath = `/workspaces/${workspaceId}/settings`;
+
+  const workspaceItems: NavItem[] = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `${basePath}/workspace/general`,
+      icon: <FoldersIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "teams",
+      label: t("common.team_access"),
+      href: `${basePath}/workspace/teams`,
+      icon: <UsersIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "languages",
+      label: t("common.survey_languages"),
+      href: `${basePath}/workspace/languages`,
+      icon: <LanguagesIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "app-connection",
+      label: t("common.connect_your_app"),
+      href: `${basePath}/workspace/app-connection`,
+      icon: <UnplugIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "feedback-sources",
+      label: t("workspace.unify.feedback_sources"),
+      href: `${basePath}/workspace/feedback-sources`,
+      icon: <ShapesIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "integrations",
+      label: t("common.integrations"),
+      href: `${basePath}/workspace/integrations`,
+      icon: <BlocksIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "look",
+      label: t("common.appearance"),
+      href: `${basePath}/workspace/look`,
+      icon: <BrushIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "user-actions",
+      label: t("common.user_actions"),
+      href: `${basePath}/workspace/user-actions`,
+      icon: <ListChecksIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "tags",
+      label: t("common.tags"),
+      href: `${basePath}/workspace/tags`,
+      icon: <TagIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+  ];
+
+  const organizationItems: NavItem[] = [
+    {
+      id: "org-general",
+      label: t("common.general"),
+      href: `${basePath}/organization/general`,
+      icon: <Building2Icon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "org-teams",
+      label: t("common.teams"),
+      href: `${basePath}/organization/teams`,
+      icon: <UsersIcon className={iconClassName} />,
+      disabled: isBilling,
+    },
+    {
+      id: "org-feedback-directories",
+      label: t("workspace.settings.feedback_directories.nav_label"),
+      href: `${basePath}/organization/feedback-directories`,
+      icon: <FoldersIcon className={iconClassName} />,
+      hidden: isMember,
+    },
+    {
+      id: "org-api-keys",
+      label: t("common.api_keys"),
+      href: `${basePath}/organization/api-keys`,
+      icon: <KeyIcon className={iconClassName} />,
+      hidden: !isOwnerOrManager,
+    },
+    {
+      id: "org-domain",
+      label: t("common.domain"),
+      href: `${basePath}/organization/domain`,
+      icon: <GlobeIcon className={iconClassName} />,
+      hidden: isFormbricksCloud,
+    },
+    {
+      id: "org-billing",
+      label: t("common.billing"),
+      href: `${basePath}/organization/billing`,
+      icon: <CreditCardIcon className={iconClassName} />,
+      hidden: !isFormbricksCloud,
+    },
+    {
+      id: "org-enterprise",
+      label: t("common.enterprise_license"),
+      href: `${basePath}/organization/enterprise`,
+      icon: <ShieldIcon className={iconClassName} />,
+      hidden: isFormbricksCloud,
+      disabled: isMember || isBilling,
+    },
+  ];
+
+  const accountItems: NavItem[] = [
+    {
+      id: "profile",
+      label: t("common.your_profile"),
+      href: `${basePath}/account/profile`,
+      icon: <UserCircleIcon className={iconClassName} />,
+    },
+    {
+      id: "notifications",
+      label: t("common.notifications"),
+      href: `${basePath}/account/notifications`,
+      icon: <BellIcon className={iconClassName} />,
+    },
+  ];
+
+  const disabledMessage = t("common.you_are_not_authorized_to_perform_this_action");
+
+  const renderSection = (items: NavItem[]) => {
+    const visibleItems = items.filter((item) => !item.hidden);
+    return (
+      <ul className="space-y-0.5">
+        {visibleItems.map((item) => (
+          <SettingsNavLink
+            key={item.id}
+            item={item}
+            isActive={pathname.includes(item.href)}
+            isCollapsed={isCollapsed}
+            isTextVisible={isTextVisible}
+            disabledMessage={item.disabled ? disabledMessage : undefined}
+          />
+        ))}
+      </ul>
+    );
+  };
+
+  return (
+    <div className="flex flex-col overflow-y-auto">
+      <div>
+        <SectionHeader
+          icon={<FoldersIcon className="h-4 w-4" />}
+          label={t("common.workspace")}
+          isCollapsed={isCollapsed}
+          isTextVisible={isTextVisible}
+          switcherName={workspaceName}
+          switcherItems={workspaces}
+          isLoadingSwitcher={isLoadingWorkspaces}
+          currentId={workspaceId}
+          onSwitcherChange={onWorkspaceChange}
+          onSwitcherOpen={onWorkspaceDropdownOpen}
+        />
+        {renderSection(workspaceItems)}
+      </div>
+
+      <div>
+        <SectionHeader
+          icon={<Building2Icon className="h-4 w-4" />}
+          label={t("common.organization")}
+          isCollapsed={isCollapsed}
+          isTextVisible={isTextVisible}
+          switcherName={organizationName}
+          switcherItems={organizations}
+          isLoadingSwitcher={isLoadingOrganizations}
+          currentId={organizationId}
+          onSwitcherChange={onOrganizationChange}
+          onSwitcherOpen={onOrganizationDropdownOpen}
+        />
+        {renderSection(organizationItems)}
+      </div>
+
+      <div>
+        <SectionHeader
+          icon={<UserCircleIcon className="h-4 w-4" />}
+          label={t("common.account")}
+          isCollapsed={isCollapsed}
+          isTextVisible={isTextVisible}
+        />
+        {renderSection(accountItems)}
+      </div>
+    </div>
+  );
+};

apps/web/app/(app)/workspaces/[workspaceId]/components/TopControlBar.tsx

@@ -3,7 +3,6 @@
 import { TOrganizationRole } from "@formbricks/types/memberships";
 import { WorkspaceAndOrgSwitch } from "@/app/(app)/workspaces/[workspaceId]/components/workspace-and-org-switch";
 import { useWorkspaceContext } from "@/app/(app)/workspaces/[workspaceId]/context/workspace-context";
-import { getAccessFlags } from "@/lib/membership/utils";
 
 interface TopControlBarProps {
   currentOrganizationId: string;
@@ -26,7 +25,6 @@ export const TopControlBar = ({
   isAccessControlAllowed,
   membershipRole,
 }: TopControlBarProps) => {
-  const { isMember, isBilling } = getAccessFlags(membershipRole);
   const { workspace } = useWorkspaceContext();
   const isMembershipPending = membershipRole === undefined;
 
@@ -42,8 +40,6 @@ export const TopControlBar = ({
         isFormbricksCloud={isFormbricksCloud}
         isLicenseActive={isLicenseActive}
         isOwnerOrManager={isOwnerOrManager}
-        isMember={isMember}
-        isBilling={isBilling}
         isMembershipPending={isMembershipPending}
         isAccessControlAllowed={isAccessControlAllowed}
       />

apps/web/app/(app)/workspaces/[workspaceId]/components/organization-breadcrumb.tsx

@@ -9,7 +9,7 @@ import {
   PlusIcon,
   SettingsIcon,
 } from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { logger } from "@formbricks/logger";
@@ -25,7 +25,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
-import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
 import { useOrganization, useWorkspace } from "../context/workspace-context";
 
 interface OrganizationBreadcrumbProps {
@@ -33,37 +32,17 @@ interface OrganizationBreadcrumbProps {
   currentOrganizationName?: string; // Optional: pass directly if context not available
   isMultiOrgEnabled: boolean;
   currentWorkspaceId?: string;
-  isFormbricksCloud: boolean;
-  isMember: boolean;
-  isOwnerOrManager: boolean;
-  isMembershipPending: boolean;
 }
 
-const isActiveOrganizationSetting = (pathname: string, settingId: string): boolean => {
-  // Match /settings/{settingId} or /settings/{settingId}/... but exclude account settings
-  // Exclude paths with /(account)/
-  if (pathname.includes("/(account)/")) {
-    return false;
-  }
-  // Check if path matches /settings/{settingId} (with optional trailing path)
-  const pattern = new RegExp(`/settings/${settingId}(?:/|$)`);
-  return pattern.test(pathname);
-};
-
 export const OrganizationBreadcrumb = ({
   currentOrganizationId,
   currentOrganizationName,
   isMultiOrgEnabled,
   currentWorkspaceId,
-  isFormbricksCloud,
-  isMember,
-  isOwnerOrManager,
-  isMembershipPending,
 }: OrganizationBreadcrumbProps) => {
   const { t } = useTranslation();
   const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
   const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
-  const pathname = usePathname();
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
@@ -117,8 +96,12 @@ export const OrganizationBreadcrumb = ({
   const workspaceBasePath = `/workspaces/${workspace?.id}`;
 
   const handleOrganizationChange = (organizationId: string) => {
-    if (organizationId === currentOrganizationId) return;
     startTransition(() => {
+      setIsOrganizationDropdownOpen(false);
+      if (organizationId === currentOrganizationId && currentWorkspaceId) {
+        router.push(`/workspaces/${currentWorkspaceId}/settings/organization/general`);
+        return;
+      }
       router.push(`/organizations/${organizationId}/`);
     });
   };
@@ -133,56 +116,6 @@ export const OrganizationBreadcrumb = ({
     });
   };
 
-  const organizationSettings = [
-    {
-      id: "general",
-      label: t("common.general"),
-      href: `${workspaceBasePath}/settings/general`,
-    },
-    {
-      id: "teams",
-      label: t("common.members_and_teams"),
-      href: `${workspaceBasePath}/settings/teams`,
-    },
-    {
-      id: "feedback-record-directories",
-      label: t("workspace.settings.feedback_record_directories.nav_label"),
-      href: `${workspaceBasePath}/settings/feedback-record-directories`,
-      hidden: isMember,
-    },
-    {
-      id: "api-keys",
-      label: t("common.api_keys"),
-      href: `${workspaceBasePath}/settings/api-keys`,
-      disabled: isMembershipPending || !isOwnerOrManager,
-      disabledMessage: isMembershipPending
-        ? t("common.loading")
-        : t("common.you_are_not_authorized_to_perform_this_action"),
-    },
-    {
-      id: "domain",
-      label: t("common.domain"),
-      href: `${workspaceBasePath}/settings/domain`,
-      hidden: isFormbricksCloud,
-    },
-    {
-      id: "billing",
-      label: t("common.billing"),
-      href: `${workspaceBasePath}/settings/billing`,
-      hidden: !isFormbricksCloud,
-    },
-    {
-      id: "enterprise",
-      label: t("common.enterprise_license"),
-      href: `${workspaceBasePath}/settings/enterprise`,
-      hidden: isFormbricksCloud || isMember,
-      disabled: isMembershipPending || isMember,
-      disabledMessage: isMembershipPending
-        ? t("common.loading")
-        : t("common.you_are_not_authorized_to_perform_this_action"),
-    },
-  ];
-
   return (
     <BreadcrumbItem isActive={isOrganizationDropdownOpen}>
       <DropdownMenu onOpenChange={setIsOrganizationDropdownOpen}>
@@ -252,42 +185,15 @@ export const OrganizationBreadcrumb = ({
             </>
           )}
           {currentWorkspaceId && (
-            <div>
+            <>
               {showOrganizationDropdown && <DropdownMenuSeparator />}
-              <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-                <SettingsIcon className="mr-2 inline h-4 w-4" />
-                {t("common.organization_settings")}
-              </div>
-
-              {organizationSettings.map((setting) => {
-                return setting.hidden ? null : (
-                  <div key={setting.id}>
-                    {setting.disabled ? (
-                      <Popover>
-                        <PopoverTrigger asChild>
-                          <button
-                            type="button"
-                            aria-disabled="true"
-                            className="relative flex w-full cursor-not-allowed select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium text-slate-400">
-                            {setting.label}
-                          </button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
-                          {setting.disabledMessage}
-                        </PopoverContent>
-                      </Popover>
-                    ) : (
-                      <DropdownMenuCheckboxItem
-                        checked={isActiveOrganizationSetting(pathname, setting.id)}
-                        onClick={() => handleSettingChange(setting.href)}
-                        className="cursor-pointer">
-                        {setting.label}
-                      </DropdownMenuCheckboxItem>
-                    )}
-                  </div>
-                );
-              })}
-            </div>
+              <DropdownMenuCheckboxItem
+                onClick={() => handleSettingChange(`${workspaceBasePath}/settings/organization/general`)}
+                className="cursor-pointer">
+                <SettingsIcon className="mr-2 h-4 w-4" />
+                {t("common.settings")}
+              </DropdownMenuCheckboxItem>
+            </>
           )}
         </DropdownMenuContent>
       </DropdownMenu>

apps/web/app/(app)/workspaces/[workspaceId]/components/workspace-and-org-switch.tsx

@@ -14,9 +14,7 @@ interface WorkspaceAndOrgSwitchProps {
   isFormbricksCloud: boolean;
   isLicenseActive: boolean;
   isOwnerOrManager: boolean;
-  isMember: boolean;
   isAccessControlAllowed: boolean;
-  isBilling: boolean;
   isMembershipPending: boolean;
 }
 
@@ -31,8 +29,6 @@ export const WorkspaceAndOrgSwitch = ({
   isLicenseActive,
   isOwnerOrManager,
   isAccessControlAllowed,
-  isMember,
-  isBilling,
   isMembershipPending,
 }: WorkspaceAndOrgSwitchProps) => {
   return (
@@ -43,10 +39,6 @@ export const WorkspaceAndOrgSwitch = ({
           currentOrganizationName={currentOrganizationName}
           currentWorkspaceId={currentWorkspaceId}
           isMultiOrgEnabled={isMultiOrgEnabled}
-          isFormbricksCloud={isFormbricksCloud}
-          isMember={isMember}
-          isOwnerOrManager={isOwnerOrManager}
-          isMembershipPending={isMembershipPending}
         />
         {currentWorkspaceId && (
           <WorkspaceBreadcrumb
@@ -59,7 +51,6 @@ export const WorkspaceAndOrgSwitch = ({
             isLicenseActive={isLicenseActive}
             isAccessControlAllowed={isAccessControlAllowed}
             isEnvironmentBreadcrumbVisible={false}
-            isBilling={isBilling}
             isMembershipPending={isMembershipPending}
           />
         )}

apps/web/app/(app)/workspaces/[workspaceId]/components/workspace-breadcrumb.tsx

@@ -2,7 +2,7 @@
 
 import * as Sentry from "@sentry/nextjs";
 import { ChevronDownIcon, ChevronRightIcon, CogIcon, FoldersIcon, Loader2, PlusIcon } from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { logger } from "@formbricks/logger";
@@ -33,20 +33,9 @@ interface WorkspaceBreadcrumbProps {
   currentOrganizationId: string;
   isAccessControlAllowed: boolean;
   isEnvironmentBreadcrumbVisible: boolean;
-  isBilling: boolean;
   isMembershipPending: boolean;
 }
 
-const isActiveWorkspaceSetting = (pathname: string, settingId: string): boolean => {
-  // Match /{settingId} or /{settingId}/... but exclude settings paths
-  if (pathname.includes("/settings/")) {
-    return false;
-  }
-  // Check if path matches /workspaces/{id}/{settingId} (with optional trailing path)
-  const pattern = new RegExp(`/workspaces/[^/]+/${settingId}(?:/|$)`);
-  return pattern.test(pathname);
-};
-
 export const WorkspaceBreadcrumb = ({
   currentWorkspaceId,
   currentWorkspaceName,
@@ -57,7 +46,6 @@ export const WorkspaceBreadcrumb = ({
   currentOrganizationId,
   isAccessControlAllowed,
   isEnvironmentBreadcrumbVisible,
-  isBilling,
   isMembershipPending,
 }: WorkspaceBreadcrumbProps) => {
   const { t } = useTranslation();
@@ -69,7 +57,6 @@ export const WorkspaceBreadcrumb = ({
   const [workspaces, setWorkspaces] = useState<{ id: string; name: string }[]>([]);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [isPending, startTransition] = useTransition();
-  const pathname = usePathname();
 
   // Get current workspace name from context OR prop
   // Context is preferred, but prop is fallback for pages without EnvironmentContextWrapper
@@ -102,59 +89,6 @@ export const WorkspaceBreadcrumb = ({
     }
   }, [isWorkspaceDropdownOpen, currentOrganizationId, workspaces.length, isLoadingWorkspaces, loadError, t]);
 
-  const workspaceSettings = [
-    {
-      id: "general",
-      label: t("common.general"),
-      href: `${workspaceBasePath}/general`,
-    },
-    {
-      id: "look",
-      label: t("common.look_and_feel"),
-      href: `${workspaceBasePath}/look`,
-    },
-    {
-      id: "app-connection",
-      label: t("common.website_and_app_connection"),
-      href: `${workspaceBasePath}/app-connection`,
-    },
-    {
-      id: "feedback-sources",
-      label: t("workspace.unify.feedback_sources"),
-      href: `${workspaceBasePath}/feedback-sources`,
-    },
-    {
-      id: "integrations",
-      label: t("common.integrations"),
-      href: `${workspaceBasePath}/integrations`,
-    },
-    {
-      id: "teams",
-      label: t("common.team_access"),
-      href: `${workspaceBasePath}/teams`,
-    },
-    {
-      id: "languages",
-      label: t("common.survey_languages"),
-      href: `${workspaceBasePath}/languages`,
-    },
-    {
-      id: "tags",
-      label: t("common.tags"),
-      href: `${workspaceBasePath}/tags`,
-    },
-    {
-      id: "unify",
-      label: t("common.unify"),
-      href: `${workspaceBasePath}/workspace/unify`,
-    },
-  ];
-
-  const areWorkspaceSettingsDisabled = isMembershipPending || isBilling;
-  const workspaceSettingsDisabledMessage = isMembershipPending
-    ? t("common.loading")
-    : t("common.you_are_not_authorized_to_perform_this_action");
-
   if (!currentWorkspace) {
     const errorMessage = `Workspace not found for workspace id: ${currentWorkspaceId}`;
     logger.error(errorMessage);
@@ -163,9 +97,13 @@ export const WorkspaceBreadcrumb = ({
   }
 
   const handleWorkspaceChange = (workspaceId: string) => {
-    if (workspaceId === currentWorkspaceId) return;
+    const targetPath =
+      workspaceId === currentWorkspaceId
+        ? `/workspaces/${currentWorkspaceId}/surveys`
+        : `/workspaces/${workspaceId}/`;
     startTransition(() => {
-      router.push(`/workspaces/${workspaceId}/`);
+      setIsWorkspaceDropdownOpen(false);
+      router.push(targetPath);
     });
   };
 
@@ -177,9 +115,9 @@ export const WorkspaceBreadcrumb = ({
     setOpenCreateWorkspaceModal(true);
   };
 
-  const handleWorkspaceSettingsNavigation = (settingId: string) => {
+  const handleWorkspaceSettingsNavigation = (href: string) => {
     startTransition(() => {
-      router.push(`${workspaceBasePath}/${settingId}`);
+      router.push(href);
     });
   };
 
@@ -188,7 +126,7 @@ export const WorkspaceBreadcrumb = ({
       return [
         {
           text: t("workspace.settings.billing.upgrade"),
-          href: `${workspaceBasePath}/settings/billing`,
+          href: `${workspaceBasePath}/settings/organization/billing`,
         },
         {
           text: t("common.cancel"),
@@ -201,7 +139,7 @@ export const WorkspaceBreadcrumb = ({
       {
         text: t("workspace.settings.billing.upgrade"),
         href: isLicenseActive
-          ? `${workspaceBasePath}/settings/enterprise`
+          ? `${workspaceBasePath}/settings/organization/enterprise`
           : "https://formbricks.com/upgrade-self-hosted-license",
       },
       {
@@ -292,39 +230,15 @@ export const WorkspaceBreadcrumb = ({
               )}
             </>
           )}
-          <DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-              <CogIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
-              {t("common.workspace_configuration")}
-            </div>
-            {workspaceSettings.map((setting) => (
-              <div key={setting.id}>
-                {areWorkspaceSettingsDisabled ? (
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <button
-                        type="button"
-                        aria-disabled="true"
-                        className="relative flex w-full cursor-not-allowed select-none items-center rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium text-slate-400">
-                        {setting.label}
-                      </button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
-                      {workspaceSettingsDisabledMessage}
-                    </PopoverContent>
-                  </Popover>
-                ) : (
-                  <DropdownMenuCheckboxItem
-                    checked={isActiveWorkspaceSetting(pathname, setting.id)}
-                    onClick={() => handleWorkspaceSettingsNavigation(setting.id)}
-                    className="cursor-pointer">
-                    {setting.label}
-                  </DropdownMenuCheckboxItem>
-                )}
-              </div>
-            ))}
-          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuCheckboxItem
+            onClick={() =>
+              handleWorkspaceSettingsNavigation(`${workspaceBasePath}/settings/workspace/general`)
+            }
+            className="cursor-pointer">
+            <CogIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />
+            {t("common.settings")}
+          </DropdownMenuCheckboxItem>
         </DropdownMenuContent>
       </DropdownMenu>
       {/* Modals */}

apps/web/app/(app)/workspaces/[workspaceId]/layout.tsx

@@ -2,6 +2,8 @@ import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { WorkspaceLayout as WorkspaceLayoutComponent } from "@/app/(app)/workspaces/[workspaceId]/components/WorkspaceLayout";
 import { WorkspaceContextWrapper } from "@/app/(app)/workspaces/[workspaceId]/context/workspace-context";
+import { PostHogGroupIdentify } from "@/app/posthog/PostHogGroupIdentify";
+import { POSTHOG_KEY } from "@/lib/constants";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getWorkspaceLayoutData } from "@/modules/workspaces/lib/utils";
 import WorkspaceStorageHandler from "./components/WorkspaceStorageHandler";
@@ -23,6 +25,14 @@ const WorkspaceLayout = async (props: {
   return (
     <>
       <WorkspaceStorageHandler workspaceId={params.workspaceId} />
+      {POSTHOG_KEY && (
+        <PostHogGroupIdentify
+          organizationId={layoutData.organization.id}
+          organizationName={layoutData.organization.name}
+          workspaceId={layoutData.workspace.id}
+          workspaceName={layoutData.workspace.name}
+        />
+      )}
       <WorkspaceContextWrapper workspace={layoutData.workspace} organization={layoutData.organization}>
         <WorkspaceLayoutComponent layoutData={layoutData}>{children}</WorkspaceLayoutComponent>
       </WorkspaceContextWrapper>

apps/web/app/(app)/workspaces/[workspaceId]/settings/(account)/layout.tsx

@@ -1,39 +0,0 @@
-import { getServerSession } from "next-auth";
-import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { getOrganization } from "@/lib/organization/service";
-import { getWorkspace } from "@/lib/workspace/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { authOptions } from "@/modules/auth/lib/authOptions";
-
-const AccountSettingsLayout = async (props: {
-  params: Promise<{ workspaceId: string }>;
-  children: React.ReactNode;
-}) => {
-  const params = await props.params;
-
-  const { children } = props;
-
-  const t = await getTranslate();
-  const [workspace, session] = await Promise.all([
-    getWorkspace(params.workspaceId),
-    getServerSession(authOptions),
-  ]);
-
-  if (!workspace) {
-    throw new ResourceNotFoundError(t("common.workspace"), null);
-  }
-
-  const organization = await getOrganization(workspace.organizationId);
-
-  if (!organization) {
-    throw new ResourceNotFoundError(t("common.organization"), null);
-  }
-
-  if (!session) {
-    throw new AuthenticationError(t("common.not_authenticated"));
-  }
-
-  return <>{children}</>;
-};
-
-export default AccountSettingsLayout;

apps/web/app/(app)/workspaces/[workspaceId]/settings/(account)/profile/lib/user.test.ts

@@ -1,133 +0,0 @@
-import { beforeEach, describe, expect, test, vi } from "vitest";
-import { prisma } from "@formbricks/database";
-import { InvalidInputError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { verifyPassword as mockVerifyPasswordImported } from "@/modules/auth/lib/utils";
-import { getIsEmailUnique, verifyUserPassword } from "./user";
-
-vi.mock("@/modules/auth/lib/utils", () => ({
-  verifyPassword: vi.fn(),
-}));
-
-vi.mock("@formbricks/database", () => ({
-  prisma: {
-    user: {
-      findUnique: vi.fn(),
-    },
-  },
-}));
-
-const mockPrismaUserFindUnique = vi.mocked(prisma.user.findUnique);
-const mockVerifyPasswordUtil = vi.mocked(mockVerifyPasswordImported);
-
-describe("User Library Tests", () => {
-  beforeEach(() => {
-    vi.resetAllMocks();
-  });
-
-  describe("verifyUserPassword", () => {
-    const userId = "test-user-id";
-    const password = "test-password";
-
-    test("should return true for correct password", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue({
-        password: "hashed-password",
-        identityProvider: "email",
-      } as any);
-      mockVerifyPasswordUtil.mockResolvedValue(true);
-
-      const result = await verifyUserPassword(userId, password);
-      expect(result).toBe(true);
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { id: userId },
-        select: { password: true, identityProvider: true },
-      });
-      expect(mockVerifyPasswordUtil).toHaveBeenCalledWith(password, "hashed-password");
-    });
-
-    test("should return false for incorrect password", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue({
-        password: "hashed-password",
-        identityProvider: "email",
-      } as any);
-      mockVerifyPasswordUtil.mockResolvedValue(false);
-
-      const result = await verifyUserPassword(userId, password);
-      expect(result).toBe(false);
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { id: userId },
-        select: { password: true, identityProvider: true },
-      });
-      expect(mockVerifyPasswordUtil).toHaveBeenCalledWith(password, "hashed-password");
-    });
-
-    test("should throw ResourceNotFoundError if user not found", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue(null);
-
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow(ResourceNotFoundError);
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow(`user with ID ${userId} not found`);
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { id: userId },
-        select: { password: true, identityProvider: true },
-      });
-      expect(mockVerifyPasswordUtil).not.toHaveBeenCalled();
-    });
-
-    test("should throw InvalidInputError if identityProvider is not email", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue({
-        password: "hashed-password",
-        identityProvider: "google", // Not 'email'
-      } as any);
-
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow(InvalidInputError);
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow("Password is not set for this user");
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { id: userId },
-        select: { password: true, identityProvider: true },
-      });
-      expect(mockVerifyPasswordUtil).not.toHaveBeenCalled();
-    });
-
-    test("should throw InvalidInputError if password is not set for email provider", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue({
-        password: null, // Password not set
-        identityProvider: "email",
-      } as any);
-
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow(InvalidInputError);
-      await expect(verifyUserPassword(userId, password)).rejects.toThrow("Password is not set for this user");
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { id: userId },
-        select: { password: true, identityProvider: true },
-      });
-      expect(mockVerifyPasswordUtil).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("getIsEmailUnique", () => {
-    const email = "test@example.com";
-
-    test("should return false if user exists", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue({
-        id: "some-user-id",
-      } as any);
-
-      const result = await getIsEmailUnique(email);
-      expect(result).toBe(false);
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { email },
-        select: { id: true },
-      });
-    });
-
-    test("should return true if user does not exist", async () => {
-      mockPrismaUserFindUnique.mockResolvedValue(null);
-
-      const result = await getIsEmailUnique(email);
-      expect(result).toBe(true);
-      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
-        where: { email },
-        select: { id: true },
-      });
-    });
-  });
-});

apps/web/app/(app)/workspaces/[workspaceId]/settings/(organization)/api-keys/loading.tsx

@@ -1,6 +0,0 @@
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import Loading from "@/modules/organization/settings/api-keys/loading";
-
-export default function LoadingPage() {
-  return <Loading isFormbricksCloud={IS_FORMBRICKS_CLOUD} />;
-}

apps/web/app/(app)/workspaces/[workspaceId]/settings/(organization)/components/OrganizationSettingsNavbar.tsx

@@ -1,90 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-import { useTranslation } from "react-i18next";
-import { TOrganizationRole } from "@formbricks/types/memberships";
-import { useWorkspace } from "@/app/(app)/workspaces/[workspaceId]/context/workspace-context";
-import { getAccessFlags } from "@/lib/membership/utils";
-import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
-
-interface OrganizationSettingsNavbarProps {
-  isFormbricksCloud: boolean;
-  membershipRole?: TOrganizationRole;
-  activeId: string;
-  loading?: boolean;
-}
-
-export const OrganizationSettingsNavbar = ({
-  isFormbricksCloud,
-  membershipRole,
-  activeId,
-  loading,
-}: OrganizationSettingsNavbarProps) => {
-  const pathname = usePathname();
-  const { isMember, isOwner, isManager } = getAccessFlags(membershipRole);
-  const isOwnerOrManager = isOwner || isManager;
-  const isMembershipPending = membershipRole === undefined || loading;
-  const { t } = useTranslation();
-  const { workspace } = useWorkspace();
-  const workspaceBasePath = `/workspaces/${workspace?.id}`;
-
-  const navigation = [
-    {
-      id: "general",
-      label: t("common.general"),
-      href: `${workspaceBasePath}/settings/general`,
-      current: pathname?.includes("/general"),
-      hidden: false,
-    },
-    {
-      id: "teams",
-      label: t("common.members_and_teams"),
-      href: `${workspaceBasePath}/settings/teams`,
-      current: pathname?.includes("/teams"),
-    },
-    {
-      id: "feedback-record-directories",
-      label: t("workspace.settings.feedback_record_directories.nav_label"),
-      href: `${workspaceBasePath}/settings/feedback-record-directories`,
-      current: pathname?.includes("/feedback-record-directories"),
-      hidden: isMember,
-    },
-    {
-      id: "api-keys",
-      label: t("common.api_keys"),
-      href: `${workspaceBasePath}/settings/api-keys`,
-      current: pathname?.includes("/api-keys"),
-      disabled: isMembershipPending || !isOwnerOrManager,
-      disabledMessage: isMembershipPending
-        ? t("common.loading")
-        : t("common.you_are_not_authorized_to_perform_this_action"),
-    },
-    {
-      id: "domain",
-      label: t("common.domain"),
-      href: `${workspaceBasePath}/settings/domain`,
-      current: pathname?.includes("/domain"),
-      hidden: isFormbricksCloud,
-    },
-    {
-      id: "billing",
-      label: t("common.billing"),
-      href: `${workspaceBasePath}/settings/billing`,
-      hidden: !isFormbricksCloud,
-      current: pathname?.includes("/billing"),
-    },
-    {
-      id: "enterprise",
-      label: t("common.enterprise_license"),
-      href: `${workspaceBasePath}/settings/enterprise`,
-      hidden: isFormbricksCloud,
-      disabled: isMembershipPending || isMember,
-      disabledMessage: isMembershipPending
-        ? t("common.loading")
-        : t("common.you_are_not_authorized_to_perform_this_action"),
-      current: pathname?.includes("/enterprise"),
-    },
-  ];
-
-  return <SecondaryNavigation navigation={navigation} activeId={activeId} loading={loading} />;
-};

apps/web/app/(app)/workspaces/[workspaceId]/settings/(organization)/feedback-record-directories/page.tsx

@@ -1 +0,0 @@
-export { FeedbackRecordDirectoriesPage as default } from "@/modules/ee/feedback-record-directory/page";

apps/web/app/(app)/workspaces/[workspaceId]/settings/(organization)/layout.tsx

@@ -1,36 +0,0 @@
-import { getServerSession } from "next-auth";
-import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { getOrganization } from "@/lib/organization/service";
-import { getWorkspace } from "@/lib/workspace/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { authOptions } from "@/modules/auth/lib/authOptions";
-
-const Layout = async (props: { params: Promise<{ workspaceId: string }>; children: React.ReactNode }) => {
-  const params = await props.params;
-
-  const { children } = props;
-
-  const t = await getTranslate();
-  const [workspace, session] = await Promise.all([
-    getWorkspace(params.workspaceId),
-    getServerSession(authOptions),
-  ]);
-
-  if (!workspace) {
-    throw new ResourceNotFoundError(t("common.workspace"), null);
-  }
-
-  const organization = await getOrganization(workspace.organizationId);
-
-  if (!organization) {
-    throw new ResourceNotFoundError(t("common.organization"), null);
-  }
-
-  if (!session) {
-    throw new AuthenticationError(t("common.not_authenticated"));
-  }
-
-  return <>{children}</>;
-};
-
-export default Layout;

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/components/AccountSettingsNavbar.tsx

@@ -19,13 +19,13 @@ export const AccountSettingsNavbar = ({ activeId, loading }: AccountSettingsNavb
     {
       id: "profile",
       label: t("common.profile"),
-      href: `${workspaceBasePath}/settings/profile`,
+      href: `${workspaceBasePath}/settings/account/profile`,
       current: pathname?.includes("/profile"),
     },
     {
       id: "notifications",
       label: t("common.notifications"),
-      href: `${workspaceBasePath}/settings/notifications`,
+      href: `${workspaceBasePath}/settings/account/notifications`,
       current: pathname?.includes("/notifications"),
     },
   ];

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/layout.tsx

@@ -0,0 +1,5 @@
+const AccountSettingsLayout = (props: { children: React.ReactNode }) => {
+  return <>{props.children}</>;
+};
+
+export default AccountSettingsLayout;

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/notifications/components/EditAlerts.tsx

@@ -99,7 +99,9 @@ export const EditAlerts = ({
             )}
             <p className="pb-3 pl-4 text-xs text-slate-400">
               {t("workspace.settings.notifications.want_to_loop_in_organization_mates")}{" "}
-              <Link className="font-semibold" href={`/workspaces/${currentWorkspace?.id}/settings/general`}>
+              <Link
+                className="font-semibold"
+                href={`/workspaces/${currentWorkspace?.id}/settings/organization/general`}>
                 {t("common.invite_them")}
               </Link>
             </p>

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/notifications/components/IntegrationsTip.tsx

@@ -14,7 +14,7 @@ export const IntegrationsTip = () => {
         <p className="text-sm">
           {t("workspace.settings.notifications.need_slack_or_discord_notifications")}?
           <a
-            href={`/workspaces/${workspace?.id}/integrations`}
+            href={`/workspaces/${workspace?.id}/settings/workspace/integrations`}
             className="ml-1 cursor-pointer text-sm underline">
             {t("workspace.settings.notifications.use_the_integration")}
           </a>

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/notifications/loading.tsx

@@ -2,7 +2,6 @@
 
 import { useTranslation } from "react-i18next";
 import { LoadingCard } from "@/app/(app)/components/LoadingCard";
-import { AccountSettingsNavbar } from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/components/AccountSettingsNavbar";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 
@@ -18,9 +17,7 @@ const Loading = () => {
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.account_settings")}>
-        <AccountSettingsNavbar activeId="notifications" loading />
-      </PageHeader>
+      <PageHeader pageTitle={t("common.notifications")} />
       {cards.map((card, index) => (
         <LoadingCard key={index} {...card} />
       ))}

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/notifications/page.tsx

@@ -2,10 +2,9 @@ import { getServerSession } from "next-auth";
 import { prisma } from "@formbricks/database";
 import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TUserNotificationSettings } from "@formbricks/types/user";
-import { AccountSettingsNavbar } from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/components/AccountSettingsNavbar";
-import { EditAlerts } from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/notifications/components/EditAlerts";
-import { IntegrationsTip } from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/notifications/components/IntegrationsTip";
-import type { Membership } from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/notifications/types";
+import { EditAlerts } from "@/app/(app)/workspaces/[workspaceId]/settings/account/notifications/components/EditAlerts";
+import { IntegrationsTip } from "@/app/(app)/workspaces/[workspaceId]/settings/account/notifications/components/IntegrationsTip";
+import type { Membership } from "@/app/(app)/workspaces/[workspaceId]/settings/account/notifications/types";
 import { SettingsCard } from "@/app/(app)/workspaces/[workspaceId]/settings/components/SettingsCard";
 import { getUser } from "@/lib/user/service";
 import { getTranslate } from "@/lingodotdev/server";
@@ -128,10 +127,7 @@ const getMemberships = async (userId: string): Promise<Membership[]> => {
   return memberships;
 };
 
-const Page = async (props: {
-  params: Promise<{ workspaceId: string }>;
-  searchParams: Promise<Record<string, string>>;
-}) => {
+const Page = async (props: { searchParams: Promise<Record<string, string>> }) => {
   const searchParams = await props.searchParams;
   const t = await getTranslate();
   const session = await getServerSession(authOptions);
@@ -155,9 +151,7 @@ const Page = async (props: {
   }
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.account_settings")}>
-        <AccountSettingsNavbar activeId="notifications" />
-      </PageHeader>
+      <PageHeader pageTitle={t("common.notifications")} />
       <SettingsCard
         title={t("workspace.settings.notifications.email_alerts_surveys")}
         description={t("workspace.settings.notifications.set_up_an_alert_to_get_an_email_on_new_responses")}>

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/profile/actions.ts

@@ -6,11 +6,9 @@ import {
   TUserUpdateInput,
   ZUserPersonalInfoUpdateInput,
 } from "@formbricks/types/user";
-import {
-  getIsEmailUnique,
-  verifyUserPassword,
-} from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/profile/lib/user";
+import { getIsEmailUnique } from "@/app/(app)/workspaces/[workspaceId]/settings/account/profile/lib/user";
 import { EMAIL_VERIFICATION_DISABLED, PASSWORD_RESET_DISABLED } from "@/lib/constants";
+import { verifyUserPassword } from "@/lib/user/password";
 import { getUser, updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/profile/components/DeleteAccount.tsx

@@ -1,30 +1,68 @@
 "use client";
 
 import type { Session } from "next-auth";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
 import { DeleteAccountModal } from "@/modules/account/components/DeleteAccountModal";
+import {
+  ACCOUNT_DELETION_GOOGLE_REAUTH_NOT_CONFIGURED_ERROR_CODE,
+  ACCOUNT_DELETION_SSO_REAUTH_ERROR_QUERY_PARAM,
+} from "@/modules/account/constants";
 import { Button } from "@/modules/ui/components/button";
 import { TooltipRenderer } from "@/modules/ui/components/tooltip";
 
+interface DeleteAccountProps {
+  session: Session | null;
+  IS_FORMBRICKS_CLOUD: boolean;
+  user: TUser;
+  organizationsWithSingleOwner: TOrganization[];
+  accountDeletionError?: string | string[];
+  isMultiOrgEnabled: boolean;
+  requiresPasswordConfirmation: boolean;
+}
+
 export const DeleteAccount = ({
   session,
   IS_FORMBRICKS_CLOUD,
   user,
   organizationsWithSingleOwner,
+  accountDeletionError,
   isMultiOrgEnabled,
-}: {
-  session: Session | null;
-  IS_FORMBRICKS_CLOUD: boolean;
-  user: TUser;
-  organizationsWithSingleOwner: TOrganization[];
-  isMultiOrgEnabled: boolean;
-}) => {
+  requiresPasswordConfirmation,
+}: Readonly<DeleteAccountProps>) => {
   const [isModalOpen, setModalOpen] = useState(false);
   const isDeleteDisabled = !isMultiOrgEnabled && organizationsWithSingleOwner.length > 0;
   const { t } = useTranslation();
+  const accountDeletionErrorCode = Array.isArray(accountDeletionError)
+    ? accountDeletionError[0]
+    : accountDeletionError;
+  const hasShownAccountDeletionError = useRef(false);
+
+  useEffect(() => {
+    if (!accountDeletionErrorCode || hasShownAccountDeletionError.current) {
+      return;
+    }
+
+    hasShownAccountDeletionError.current = true;
+
+    if (accountDeletionErrorCode === ACCOUNT_DELETION_GOOGLE_REAUTH_NOT_CONFIGURED_ERROR_CODE) {
+      toast.error(t("workspace.settings.profile.google_sso_account_deletion_requires_setup"), {
+        id: "account-deletion-sso-reauth-error",
+      });
+    } else {
+      toast.error(t("workspace.settings.profile.sso_reauthentication_failed"), {
+        id: "account-deletion-sso-reauth-error",
+      });
+    }
+
+    const url = new URL(globalThis.location.href);
+    url.searchParams.delete(ACCOUNT_DELETION_SSO_REAUTH_ERROR_QUERY_PARAM);
+    globalThis.history.replaceState(null, "", url.toString());
+  }, [accountDeletionErrorCode, t]);
+
   if (!session) {
     return null;
   }
@@ -32,6 +70,7 @@ export const DeleteAccount = ({
   return (
     <div>
       <DeleteAccountModal
+        requiresPasswordConfirmation={requiresPasswordConfirmation}
         open={isModalOpen}
         setOpen={setModalOpen}
         user={user}

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/profile/components/EditProfileDetailsForm.tsx

@@ -8,7 +8,7 @@ import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { TUser, TUserUpdateInput, ZUser, ZUserEmail } from "@formbricks/types/user";
-import { PasswordConfirmationModal } from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/profile/components/password-confirmation-modal";
+import { PasswordConfirmationModal } from "@/app/(app)/workspaces/[workspaceId]/settings/account/profile/components/password-confirmation-modal";
 import { appLanguages, sortedAppLanguages } from "@/lib/i18n/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/profile/lib/user.test.ts

@@ -0,0 +1,47 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { prisma } from "@formbricks/database";
+import { getIsEmailUnique } from "./user";
+
+vi.mock("@formbricks/database", () => ({
+  prisma: {
+    user: {
+      findUnique: vi.fn(),
+    },
+  },
+}));
+
+const mockPrismaUserFindUnique = vi.mocked(prisma.user.findUnique);
+
+describe("User Library Tests", () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe("getIsEmailUnique", () => {
+    const email = "test@example.com";
+
+    test("should return false if user exists", async () => {
+      mockPrismaUserFindUnique.mockResolvedValue({
+        id: "some-user-id",
+      } as any);
+
+      const result = await getIsEmailUnique(email);
+      expect(result).toBe(false);
+      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
+        where: { email },
+        select: { id: true },
+      });
+    });
+
+    test("should return true if user does not exist", async () => {
+      mockPrismaUserFindUnique.mockResolvedValue(null);
+
+      const result = await getIsEmailUnique(email);
+      expect(result).toBe(true);
+      expect(mockPrismaUserFindUnique).toHaveBeenCalledWith({
+        where: { email },
+        select: { id: true },
+      });
+    });
+  });
+});

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/profile/lib/user.ts

@@ -0,0 +1,15 @@
+import { cache as reactCache } from "react";
+import { prisma } from "@formbricks/database";
+
+export const getIsEmailUnique = reactCache(async (email: string): Promise<boolean> => {
+  const user = await prisma.user.findUnique({
+    where: {
+      email: email.toLowerCase(),
+    },
+    select: {
+      id: true,
+    },
+  });
+
+  return !user;
+});

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/profile/loading.tsx

@@ -2,7 +2,6 @@
 
 import { useTranslation } from "react-i18next";
 import { LoadingCard } from "@/app/(app)/components/LoadingCard";
-import { AccountSettingsNavbar } from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/components/AccountSettingsNavbar";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 
@@ -28,9 +27,7 @@ const Loading = () => {
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.account_settings")}>
-        <AccountSettingsNavbar activeId="profile" loading />
-      </PageHeader>
+      <PageHeader pageTitle={t("common.profile")} />
       {cards.map((card, index) => (
         <LoadingCard key={index} {...card} />
       ))}

apps/web/app/(app)/workspaces/[workspaceId]/settings/account/profile/page.tsx

@@ -1,13 +1,13 @@
 import { AuthenticationError } from "@formbricks/types/errors";
-import { AccountSettingsNavbar } from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/components/AccountSettingsNavbar";
-import { AccountSecurity } from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/profile/components/AccountSecurity";
-import { DeleteAccount } from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/profile/components/DeleteAccount";
-import { EditProfileDetailsForm } from "@/app/(app)/workspaces/[workspaceId]/settings/(account)/profile/components/EditProfileDetailsForm";
+import { AccountSecurity } from "@/app/(app)/workspaces/[workspaceId]/settings/account/profile/components/AccountSecurity";
+import { DeleteAccount } from "@/app/(app)/workspaces/[workspaceId]/settings/account/profile/components/DeleteAccount";
+import { EditProfileDetailsForm } from "@/app/(app)/workspaces/[workspaceId]/settings/account/profile/components/EditProfileDetailsForm";
 import { SettingsCard } from "@/app/(app)/workspaces/[workspaceId]/settings/components/SettingsCard";
 import { EMAIL_VERIFICATION_DISABLED, IS_FORMBRICKS_CLOUD, PASSWORD_RESET_DISABLED } from "@/lib/constants";
 import { getOrganizationsWhereUserIsSingleOwner } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
 import { getTranslate } from "@/lingodotdev/server";
+import { requiresPasswordConfirmationForAccountDeletion } from "@/modules/account/lib/account-deletion-auth";
 import { getIsMultiOrgEnabled, getIsTwoFactorAuthEnabled } from "@/modules/ee/license-check/lib/utils";
 import { IdBadge } from "@/modules/ui/components/id-badge";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
@@ -15,10 +15,14 @@ import { PageHeader } from "@/modules/ui/components/page-header";
 import { UpgradePrompt } from "@/modules/ui/components/upgrade-prompt";
 import { getWorkspaceAuth } from "@/modules/workspaces/lib/utils";
 
-const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
+const Page = async (props: {
+  params: Promise<{ workspaceId: string }>;
+  searchParams: Promise<{ accountDeletionError?: string | string[] }>;
+}) => {
   const isTwoFactorAuthEnabled = await getIsTwoFactorAuthEnabled();
   const isMultiOrgEnabled = await getIsMultiOrgEnabled();
   const params = await props.params;
+  const searchParams = await props.searchParams;
   const t = await getTranslate();
   const { session } = await getWorkspaceAuth(params.workspaceId);
 
@@ -31,12 +35,11 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
   }
 
   const isPasswordResetEnabled = !PASSWORD_RESET_DISABLED && user.identityProvider === "email";
+  const requiresPasswordConfirmation = requiresPasswordConfirmationForAccountDeletion(user);
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("common.account_settings")}>
-        <AccountSettingsNavbar activeId="profile" />
-      </PageHeader>
+      <PageHeader pageTitle={t("common.profile")} />
       {user && (
         <div>
           <SettingsCard
@@ -62,13 +65,13 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
                         ? t("common.upgrade_plan")
                         : t("common.request_trial_license"),
                       href: IS_FORMBRICKS_CLOUD
-                        ? `/workspaces/${params.workspaceId}/settings/billing`
+                        ? `/workspaces/${params.workspaceId}/settings/organization/billing`
                         : "https://formbricks.com/upgrade-self-hosting-license",
                     },
                     {
                       text: t("common.learn_more"),
                       href: IS_FORMBRICKS_CLOUD
-                        ? `/workspaces/${params.workspaceId}/settings/billing`
+                        ? `/workspaces/${params.workspaceId}/settings/organization/billing`
                         : "https://formbricks.com/learn-more-self-hosting-license",
                     },
                   ]}
@@ -88,6 +91,8 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
               user={user}
               organizationsWithSingleOwner={organizationsWithSingleOwner}
               isMultiOrgEnabled={isMultiOrgEnabled}
+              accountDeletionError={searchParams.accountDeletionError}
+              requiresPasswordConfirmation={requiresPasswordConfirmation}
             />
           </SettingsCard>
           <IdBadge id={user.id} label={t("common.profile_id")} variant="column" />

apps/web/app/(app)/workspaces/[workspaceId]/settings/layout.tsx

@@ -0,0 +1,5 @@
+const SettingsLayout = (props: { children: React.ReactNode }) => {
+  return <>{props.children}</>;
+};
+
+export default SettingsLayout;

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/api-keys/loading.tsx

@@ -0,0 +1,5 @@
+import Loading from "@/modules/organization/settings/api-keys/loading";
+
+export default function LoadingPage() {
+  return <Loading />;
+}

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/billing/loading.tsx

@@ -1,5 +1,3 @@
-import { OrganizationSettingsNavbar } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
@@ -8,9 +6,7 @@ const Loading = async () => {
   const t = await getTranslate();
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("workspace.settings.general.organization_settings")}>
-        <OrganizationSettingsNavbar isFormbricksCloud={IS_FORMBRICKS_CLOUD} activeId="billing" loading />
-      </PageHeader>
+      <PageHeader pageTitle={t("common.billing")} />
       <div className="my-8 h-64 animate-pulse rounded-xl bg-slate-200"></div>
       <div className="my-8 h-96 animate-pulse rounded-md bg-slate-200"></div>
     </PageContentWrapper>

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/domain/page.tsx

@@ -1,8 +1,7 @@
 import { notFound } from "next/navigation";
 import { AuthenticationError } from "@formbricks/types/errors";
-import { OrganizationSettingsNavbar } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { PrettyUrlsTable } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/domain/components/pretty-urls-table";
 import { SettingsCard } from "@/app/(app)/workspaces/[workspaceId]/settings/components/SettingsCard";
+import { PrettyUrlsTable } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/domain/components/pretty-urls-table";
 import { IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { getWhiteLabelPermission } from "@/modules/ee/license-check/lib/utils";
@@ -21,9 +20,7 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
     return notFound();
   }
 
-  const { session, currentUserMembership, organization, isOwner, isManager } = await getWorkspaceAuth(
-    params.workspaceId
-  );
+  const { session, organization, isOwner, isManager } = await getWorkspaceAuth(params.workspaceId);
 
   if (!session) {
     throw new AuthenticationError(t("common.not_authenticated"));
@@ -36,13 +33,7 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("workspace.settings.general.organization_settings")}>
-        <OrganizationSettingsNavbar
-          isFormbricksCloud={IS_FORMBRICKS_CLOUD}
-          membershipRole={currentUserMembership?.role}
-          activeId="domain"
-        />
-      </PageHeader>
+      <PageHeader pageTitle={t("common.domain")} />
 
       {!IS_STORAGE_CONFIGURED && (
         <div className="max-w-4xl">

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/enterprise/components/EnterpriseLicenseFeaturesTable.tsx

@@ -8,7 +8,7 @@ import type { TEnterpriseLicenseFeatures } from "@/modules/ee/license-check/type
 import { Badge } from "@/modules/ui/components/badge";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/modules/ui/components/table";
 
-type TPublicLicenseFeatureKey = Exclude<keyof TEnterpriseLicenseFeatures, "isMultiOrgEnabled" | "ai">;
+type TPublicLicenseFeatureKey = Exclude<keyof TEnterpriseLicenseFeatures, "isMultiOrgEnabled">;
 
 type TFeatureDefinition = {
   key: TPublicLicenseFeatureKey;
@@ -61,6 +61,16 @@ const getFeatureDefinitions = (t: TFunction): TFeatureDefinition[] => {
       labelKey: t("workspace.settings.enterprise.license_feature_spam_protection"),
       docsUrl: "https://formbricks.com/docs/xm-and-surveys/surveys/general-features/spam-protection",
     },
+    {
+      key: "aiSmartTools",
+      labelKey: t("workspace.settings.general.ai_smart_tools_enabled"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/configuration/ai",
+    },
+    {
+      key: "aiDataAnalysis",
+      labelKey: t("workspace.settings.general.ai_data_analysis_enabled"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/configuration/ai",
+    },
     {
       key: "auditLogs",
       labelKey: t("workspace.settings.enterprise.license_feature_audit_logs"),

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/enterprise/components/EnterpriseLicenseStatus.tsx

@@ -5,7 +5,7 @@ import { RotateCcwIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { formatDateForDisplay, formatDateTimeForDisplay } from "@/lib/utils/datetime";
 import { recheckLicenseAction } from "@/modules/ee/license-check/actions";
 import type { TLicenseStatus } from "@/modules/ee/license-check/types/enterprise-license";
@@ -151,12 +151,17 @@ export const EnterpriseLicenseStatus = ({
           </Alert>
         )}
         <p className="border-t border-slate-100 pt-4 text-sm text-slate-500">
-          {t("workspace.settings.enterprise.questions_please_reach_out_to")}{" "}
-          <a
-            className="font-medium text-slate-700 underline hover:text-slate-900"
-            href="mailto:hola@formbricks.com">
-            hola@formbricks.com
-          </a>
+          <Trans
+            i18nKey="workspace.settings.enterprise.questions_please_reach_out_to_email"
+            components={{
+              contactLink: (
+                <a
+                  className="font-medium text-slate-700 underline hover:text-slate-900"
+                  href="mailto:hola@formbricks.com"
+                />
+              ),
+            }}
+          />
         </p>
       </div>
     </SettingsCard>

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/enterprise/loading.tsx

@@ -1,5 +1,3 @@
-import { OrganizationSettingsNavbar } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
@@ -8,9 +6,7 @@ const Loading = async () => {
   const t = await getTranslate();
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("workspace.settings.general.organization_settings")}>
-        <OrganizationSettingsNavbar isFormbricksCloud={IS_FORMBRICKS_CLOUD} activeId="enterprise" loading />
-      </PageHeader>
+      <PageHeader pageTitle={t("common.enterprise_license")} />
       <div className="my-8 h-64 animate-pulse rounded-xl bg-slate-200"></div>
       <div className="my-8 h-96 animate-pulse rounded-md bg-slate-200"></div>
     </PageContentWrapper>

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/enterprise/page.tsx

@@ -1,10 +1,9 @@
 import { CheckIcon } from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import { OrganizationSettingsNavbar } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { EnterpriseLicenseFeaturesTable } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/enterprise/components/EnterpriseLicenseFeaturesTable";
-import { EnterpriseLicenseStatus } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/enterprise/components/EnterpriseLicenseStatus";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { EnterpriseLicenseFeaturesTable } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/enterprise/components/EnterpriseLicenseFeaturesTable";
+import { EnterpriseLicenseStatus } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/enterprise/components/EnterpriseLicenseStatus";
+import { ENTERPRISE_LICENSE_REQUEST_FORM_URL, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { GRACE_PERIOD_MS, getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
 import { Button } from "@/modules/ui/components/button";
@@ -19,7 +18,7 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
     return notFound();
   }
 
-  const { isMember, currentUserMembership } = await getWorkspaceAuth(params.workspaceId);
+  const { isMember } = await getWorkspaceAuth(params.workspaceId);
 
   const isPricingDisabled = isMember;
 
@@ -85,13 +84,7 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("workspace.settings.general.organization_settings")}>
-        <OrganizationSettingsNavbar
-          isFormbricksCloud={IS_FORMBRICKS_CLOUD}
-          membershipRole={currentUserMembership?.role}
-          activeId="enterprise"
-        />
-      </PageHeader>
+      <PageHeader pageTitle={t("common.enterprise_license")} />
       {hasLicense ? (
         <>
           <EnterpriseLicenseStatus
@@ -170,7 +163,7 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
               </p>
               <Button asChild>
                 <Link
-                  href="https://app.formbricks.com/s/clvupq3y205i5yrm3sm9v1xt5"
+                  href={ENTERPRISE_LICENSE_REQUEST_FORM_URL}
                   target="_blank"
                   rel="noopener noreferrer nofollow"
                   referrerPolicy="no-referrer">

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/feedback-directories/page.tsx

@@ -0,0 +1 @@
+export { FeedbackDirectoriesPage as default } from "@/modules/ee/feedback-directory/page";

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/general/components/AISettingsToggle.tsx

@@ -6,24 +6,32 @@ import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
-import { updateOrganizationAISettingsAction } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/general/actions";
+import { useWorkspace } from "@/app/(app)/workspaces/[workspaceId]/context/workspace-context";
+import { updateOrganizationAISettingsAction } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/general/actions";
 import { getDisplayedOrganizationAISettingValue, getOrganizationAIEnablementState } from "@/lib/ai/utils";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { AdvancedOptionToggle } from "@/modules/ui/components/advanced-option-toggle";
 import { Alert, AlertDescription } from "@/modules/ui/components/alert";
+import { type ModalButton, UpgradePrompt } from "@/modules/ui/components/upgrade-prompt";
 
 interface AISettingsToggleProps {
   organization: TOrganization;
   membershipRole?: TOrganizationRole;
   isInstanceAIConfigured: boolean;
+  hasAIPermission: boolean;
+  isFormbricksCloud: boolean;
 }
 
 export const AISettingsToggle = ({
   organization,
   membershipRole,
   isInstanceAIConfigured,
+  hasAIPermission,
+  isFormbricksCloud,
 }: Readonly<AISettingsToggleProps>) => {
+  const { workspace } = useWorkspace();
+  const workspaceBasePath = `/workspaces/${workspace?.id}`;
   const [loadingField, setLoadingField] = useState<string | null>(null);
   const { t } = useTranslation();
   const router = useRouter();
@@ -78,6 +86,30 @@ export const AISettingsToggle = ({
     }
   };
 
+  const upgradeButtons: [ModalButton, ModalButton] = [
+    {
+      text: isFormbricksCloud ? t("common.upgrade_plan") : t("common.request_trial_license"),
+      href: isFormbricksCloud
+        ? `${workspaceBasePath}/settings/organization/billing`
+        : "https://formbricks.com/upgrade-self-hosting-license",
+    },
+    {
+      text: t("common.learn_more"),
+      href: "https://formbricks.com/docs/platform/features/ai-features",
+    },
+  ];
+
+  if (!hasAIPermission) {
+    return (
+      <UpgradePrompt
+        title={t("workspace.settings.general.unlock_ai_features_with_a_higher_plan")}
+        description={t("workspace.settings.general.unlock_ai_features_description")}
+        buttons={upgradeButtons}
+        feature="ai_features"
+      />
+    );
+  }
+
   return (
     <div className="space-y-4">
       {showInstanceConfigWarning && (

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/general/components/DeleteOrganization.tsx

@@ -5,7 +5,7 @@ import { Dispatch, SetStateAction, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { TOrganization } from "@formbricks/types/organizations";
-import { deleteOrganizationAction } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/general/actions";
+import { deleteOrganizationAction } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/general/actions";
 import { FORMBRICKS_ENVIRONMENT_ID_LS } from "@/lib/localStorage";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Alert, AlertDescription } from "@/modules/ui/components/alert";

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/general/components/EditOrganizationNameForm.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 import { TOrganization, ZOrganization } from "@formbricks/types/organizations";
-import { updateOrganizationNameAction } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/general/actions";
+import { updateOrganizationNameAction } from "@/app/(app)/workspaces/[workspaceId]/settings/organization/general/actions";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Alert, AlertDescription } from "@/modules/ui/components/alert";

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/general/loading.tsx

@@ -1,6 +1,4 @@
 import { LoadingCard } from "@/app/(app)/components/LoadingCard";
-import { OrganizationSettingsNavbar } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/components/OrganizationSettingsNavbar";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
@@ -23,9 +21,7 @@ const Loading = async () => {
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("workspace.settings.general.organization_settings")}>
-        <OrganizationSettingsNavbar isFormbricksCloud={IS_FORMBRICKS_CLOUD} activeId="general" loading />
-      </PageHeader>
+      <PageHeader pageTitle={t("workspace.settings.general.organization_settings")} />
       {cards.map((card, index) => (
         <LoadingCard key={index} {...card} />
       ))}

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/general/page.tsx

@@ -1,9 +1,18 @@
-import { OrganizationSettingsNavbar } from "@/app/(app)/workspaces/[workspaceId]/settings/(organization)/components/OrganizationSettingsNavbar";
 import { isInstanceAIConfigured } from "@/lib/ai/service";
-import { FB_LOGO_URL, IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED } from "@/lib/constants";
+import {
+  ENTERPRISE_LICENSE_REQUEST_FORM_URL,
+  FB_LOGO_URL,
+  IS_FORMBRICKS_CLOUD,
+  IS_STORAGE_CONFIGURED,
+} from "@/lib/constants";
 import { getUser } from "@/lib/user/service";
 import { getTranslate } from "@/lingodotdev/server";
-import { getIsMultiOrgEnabled, getWhiteLabelPermission } from "@/modules/ee/license-check/lib/utils";
+import {
+  getIsAIDataAnalysisEnabled,
+  getIsAISmartToolsEnabled,
+  getIsMultiOrgEnabled,
+  getWhiteLabelPermission,
+} from "@/modules/ee/license-check/lib/utils";
 import { EmailCustomizationSettings } from "@/modules/ee/whitelabel/email-customization/components/email-customization-settings";
 import { Alert, AlertDescription } from "@/modules/ui/components/alert";
 import { IdBadge } from "@/modules/ui/components/id-badge";
@@ -27,8 +36,14 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
 
   const user = session?.user?.id ? await getUser(session.user.id) : null;
 
-  const isMultiOrgEnabled = await getIsMultiOrgEnabled();
-  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.id);
+  const [isMultiOrgEnabled, hasWhiteLabelPermission, hasAISmartToolsPermission, hasAIDataAnalysisPermission] =
+    await Promise.all([
+      getIsMultiOrgEnabled(),
+      getWhiteLabelPermission(organization.id),
+      getIsAISmartToolsEnabled(organization.id),
+      getIsAIDataAnalysisEnabled(organization.id),
+    ]);
+  const hasAIPermission = hasAISmartToolsPermission || hasAIDataAnalysisPermission;
 
   const isDeleteDisabled = !isOwner || !isMultiOrgEnabled;
   const currentUserRole = currentUserMembership?.role;
@@ -37,13 +52,7 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
 
   return (
     <PageContentWrapper>
-      <PageHeader pageTitle={t("workspace.settings.general.organization_settings")}>
-        <OrganizationSettingsNavbar
-          isFormbricksCloud={IS_FORMBRICKS_CLOUD}
-          membershipRole={currentUserMembership?.role}
-          activeId="general"
-        />
-      </PageHeader>
+      <PageHeader pageTitle={t("workspace.settings.general.organization_settings")} />
       {!IS_STORAGE_CONFIGURED && (
         <div className="max-w-4xl">
           <Alert variant="warning">
@@ -64,6 +73,8 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
           organization={organization}
           membershipRole={currentUserMembership?.role}
           isInstanceAIConfigured={isInstanceAIConfigured()}
+          hasAIPermission={hasAIPermission}
+          isFormbricksCloud={IS_FORMBRICKS_CLOUD}
         />
       </SettingsCard>
       <EmailCustomizationSettings
@@ -75,6 +86,7 @@ const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
         fbLogoUrl={FB_LOGO_URL}
         user={user}
         isStorageConfigured={IS_STORAGE_CONFIGURED}
+        enterpriseLicenseRequestFormUrl={ENTERPRISE_LICENSE_REQUEST_FORM_URL}
       />
       {isMultiOrgEnabled && (
         <SettingsCard

apps/web/app/(app)/workspaces/[workspaceId]/settings/organization/layout.tsx

@@ -0,0 +1,5 @@
+const OrganizationSettingsLayout = (props: { children: React.ReactNode }) => {
+  return <>{props.children}</>;
+};
+
+export default OrganizationSettingsLayout;

apps/web/app/(app)/workspaces/[workspaceId]/settings/page.tsx

@@ -2,7 +2,7 @@ import { redirect } from "next/navigation";
 
 const Page = async (props: { params: Promise<{ workspaceId: string }> }) => {
   const params = await props.params;
-  return redirect(`/workspaces/${params.workspaceId}/settings/profile`);
+  return redirect(`/workspaces/${params.workspaceId}/settings/workspace/general`);
 };
 
 export default Page;

apps/web/app/(app)/workspaces/[workspaceId]/settings/workspace/(setup)/user-actions/loading.tsx

@@ -0,0 +1 @@
+export { UserActionsLoading as default } from "@/modules/workspaces/settings/(setup)/user-actions/loading";

apps/web/app/(app)/workspaces/[workspaceId]/settings/workspace/(setup)/user-actions/page.tsx

@@ -0,0 +1 @@
+export { UserActionsPage as default } from "@/modules/workspaces/settings/(setup)/user-actions/page";

apps/web/app/(app)/workspaces/[workspaceId]/settings/workspace/feedback-sources/page.tsx

@@ -0,0 +1 @@
+export { WorkspaceFeedbackSourcesPage as default } from "@/modules/ee/unify-feedback/sources/page";

apps/web/app/(app)/workspaces/[workspaceId]/settings/workspace/integrations/actions.ts

@@ -46,10 +46,16 @@ export const createOrUpdateIntegrationAction = authenticatedActionClient
       ctx.auditLoggingCtx.integrationId = result.id;
       ctx.auditLoggingCtx.newObject = result;
 
-      capturePostHogEvent(ctx.user.id, "integration_connected", {
-        integration_type: parsedInput.integrationData.type,
-        organization_id: organizationId,
-      });
+      capturePostHogEvent(
+        ctx.user.id,
+        "integration_connected",
+        {
+          integration_type: parsedInput.integrationData.type,
+          organization_id: organizationId,
+          workspace_id: parsedInput.workspaceId,
+        },
+        { organizationId, workspaceId: parsedInput.workspaceId }
+      );
 
       return result;
     })

apps/web/app/(app)/workspaces/[workspaceId]/settings/workspace/integrations/airtable/components/AddIntegrationModal.tsx

@@ -17,9 +17,9 @@ import {
 import { TSurveyElement } from "@formbricks/types/surveys/elements";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
-import { createOrUpdateIntegrationAction } from "@/app/(app)/workspaces/[workspaceId]/(workspace)/integrations/actions";
-import { BaseSelectDropdown } from "@/app/(app)/workspaces/[workspaceId]/(workspace)/integrations/airtable/components/BaseSelectDropdown";
-import { fetchTables } from "@/app/(app)/workspaces/[workspaceId]/(workspace)/integrations/airtable/lib/airtable";
+import { createOrUpdateIntegrationAction } from "@/app/(app)/workspaces/[workspaceId]/settings/workspace/integrations/actions";
+import { BaseSelectDropdown } from "@/app/(app)/workspaces/[workspaceId]/settings/workspace/integrations/airtable/components/BaseSelectDropdown";
+import { fetchTables } from "@/app/(app)/workspaces/[workspaceId]/settings/workspace/integrations/airtable/lib/airtable";
 import AirtableLogo from "@/images/airtableLogo.svg";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { recallToHeadline } from "@/lib/utils/recall";

apps/web/app/(app)/workspaces/[workspaceId]/settings/workspace/integrations/airtable/components/AirtableWrapper.tsx

@@ -5,8 +5,8 @@ import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
-import { ManageIntegration } from "@/app/(app)/workspaces/[workspaceId]/(workspace)/integrations/airtable/components/ManageIntegration";
-import { authorize } from "@/app/(app)/workspaces/[workspaceId]/(workspace)/integrations/airtable/lib/airtable";
+import { ManageIntegration } from "@/app/(app)/workspaces/[workspaceId]/settings/workspace/integrations/airtable/components/ManageIntegration";
+import { authorize } from "@/app/(app)/workspaces/[workspaceId]/settings/workspace/integrations/airtable/lib/airtable";
 import airtableLogo from "@/images/airtableLogo.svg";
 import { ConnectIntegration } from "@/modules/ui/components/connect-integration";
 
@@ -18,6 +18,7 @@ interface AirtableWrapperProps {
   isEnabled: boolean;
   webAppUrl: string;
   locale: TUserLocale;
+  showReconnectButton?: boolean;
 }
 
 export const AirtableWrapper = ({
@@ -28,6 +29,7 @@ export const AirtableWrapper = ({
   isEnabled,
   webAppUrl,
   locale,
+  showReconnectButton = false,
 }: AirtableWrapperProps) => {
   const [isConnected, setIsConnected] = useState(
     airtableIntegration ? airtableIntegration.config?.key : false
@@ -49,6 +51,8 @@ export const AirtableWrapper = ({
       setIsConnected={setIsConnected}
       surveys={surveys}
       locale={locale}
+      showReconnectButton={showReconnectButton}
+      handleAirtableAuthorization={handleAirtableAuthorization}
     />
   ) : (
     <ConnectIntegration

apps/web/app/(app)/workspaces/[workspaceId]/settings/workspace/integrations/airtable/components/ManageIntegration.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Trash2Icon } from "lucide-react";
+import { RefreshCcwIcon, Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
@@ -8,13 +8,15 @@ import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
-import { deleteIntegrationAction } from "@/app/(app)/workspaces/[workspaceId]/(workspace)/integrations/actions";
-import { AddIntegrationModal } from "@/app/(app)/workspaces/[workspaceId]/(workspace)/integrations/airtable/components/AddIntegrationModal";
+import { deleteIntegrationAction } from "@/app/(app)/workspaces/[workspaceId]/settings/workspace/integrations/actions";
+import { AddIntegrationModal } from "@/app/(app)/workspaces/[workspaceId]/settings/workspace/integrations/airtable/components/AddIntegrationModal";
 import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
+import { Alert, AlertButton, AlertDescription } from "@/modules/ui/components/alert";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
 import { EmptyState } from "@/modules/ui/components/empty-state";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 import { IntegrationModalInputs } from "../lib/types";
 
 interface ManageIntegrationProps {
@@ -24,10 +26,20 @@ interface ManageIntegrationProps {
   surveys: TSurvey[];
   airtableArray: TIntegrationItem[];
   locale: TUserLocale;
+  showReconnectButton: boolean;
+  handleAirtableAuthorization: () => Promise<void>;
 }
 
-export const ManageIntegration = (props: ManageIntegrationProps) => {
-  const { airtableIntegration, workspaceId, setIsConnected, surveys, airtableArray } = props;
+export const ManageIntegration = ({
+  airtableIntegration,
+  workspaceId,
+  setIsConnected,
+  surveys,
+  airtableArray,
+  showReconnectButton,
+  handleAirtableAuthorization,
+  locale,
+}: ManageIntegrationProps) => {
   const { t } = useTranslation();
 
   const tableHeaders = [
@@ -73,15 +85,34 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
     : { isEditMode: false as const };
   return (
     <div className="mt-6 flex w-full flex-col items-center justify-center p-6">
-      <div className="flex w-full justify-end gap-x-6">
-        <div className="flex items-center">
+      {showReconnectButton && (
+        <Alert variant="warning" size="small" className="mb-4 w-full">
+          <AlertDescription>{t("workspace.integrations.reconnect_button_description")}</AlertDescription>
+          <AlertButton onClick={handleAirtableAuthorization}>
+            {t("workspace.integrations.reconnect_button")}
+          </AlertButton>
+        </Alert>
+      )}
+      <div className="flex w-full justify-end space-x-2">
+        <div className="mr-6 flex items-center">
           <span className="mr-4 h-4 w-4 rounded-full bg-green-600"></span>
-          <span className="cursor-pointer text-slate-500">
+          <span className="text-slate-500">
             {t("workspace.integrations.connected_with_email", {
               email: airtableIntegration.config.email,
             })}
           </span>
         </div>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline" onClick={handleAirtableAuthorization}>
+                <RefreshCcwIcon className="mr-2 h-4 w-4" />
+                {t("workspace.integrations.reconnect_button")}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>{t("workspace.integrations.reconnect_button_tooltip")}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
         <Button
           onClick={() => {
             setDefaultValues(null);
@@ -122,9 +153,7 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
               <div className="col-span-2 text-center">{data.surveyName}</div>
               <div className="col-span-2 text-center">{data.tableName}</div>
               <div className="col-span-2 text-center">{data.elements}</div>
-              <div className="col-span-2 text-center">
-                {timeSince(data.createdAt.toString(), props.locale)}
-              </div>
+              <div className="col-span-2 text-center">{timeSince(data.createdAt.toString(), locale)}</div>
             </button>
           ))}
         </div>