fix: resolve remaining sso deletion review comments

Only allow account deletion SSO reauth for providers that return fresh authentication evidence. Decrypt signed SAML responses before extracting AuthnInstant so encrypted assertions remain supported.

.codex/environments/environment.toml

@@ -0,0 +1,9 @@
+# THIS IS AUTOGENERATED. DO NOT EDIT MANUALLY
+version = 1
+name = "formbricks"
+
+[setup]
+script = '''
+pnpm install
+pnpm dev:setup
+'''

.env.example

@@ -94,12 +94,25 @@ EMAIL_VERIFICATION_DISABLED=1
 # Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
 PASSWORD_RESET_DISABLED=1
 
+# Password reset token lifetime in minutes. Must be between 5 and 120 if set.
+# PASSWORD_RESET_TOKEN_LIFETIME_MINUTES=30
+
+# Development-only helper: log the password reset link to the server console instead of sending reset emails.
+# DEBUG_SHOW_RESET_LINK=1
+
 # Email login. Disable the ability for users to login with email.
 # EMAIL_AUTH_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  #
@@ -126,12 +139,39 @@ GITHUB_SECRET=
 # Configure Google Login
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
+# Enable only after Google Auth Platform Security Bundle "Session age claims" is enabled.
+# GOOGLE_ACCOUNT_DELETION_REAUTH_ENABLED=1
 
 # Configure Azure Active Directory Login
 AZUREAD_CLIENT_ID=
 AZUREAD_CLIENT_SECRET=
 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
+# AI_MODEL=gemini-2.5-flash
+
+# Google Vertex AI credentials
+# AI_GCP_PROJECT=
+# AI_GCP_LOCATION=
+# AI_GCP_CREDENTIALS_JSON=
+# AI_GCP_APPLICATION_CREDENTIALS=
+
+# Amazon Bedrock credentials
+# AI_AWS_REGION=
+# AI_AWS_ACCESS_KEY_ID=
+# AI_AWS_SECRET_ACCESS_KEY=
+# AI_AWS_SESSION_TOKEN=
+
+# Azure AI / Microsoft Foundry credentials
+# AI_AZURE_BASE_URL=
+# AI_AZURE_RESOURCE_NAME=
+# AI_AZURE_API_KEY=
+# AI_AZURE_API_VERSION=v1
+
 # OpenID Connect (OIDC) configuration
 # OIDC_CLIENT_ID=
 # OIDC_CLIENT_SECRET=
@@ -150,6 +190,7 @@ NOTION_OAUTH_CLIENT_ID=
 NOTION_OAUTH_CLIENT_SECRET=
 
 # Stripe Billing Variables
+STRIPE_PUBLISHABLE_KEY=
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=
 
@@ -184,6 +225,14 @@ ENTERPRISE_LICENSE_KEY=
 # Ignore Rate Limiting across the Formbricks app
 # RATE_LIMITING_DISABLED=1
 
+# Disable telemetry reporting (usage stats sent to Formbricks). Ignored when an EE license is active.
+# TELEMETRY_DISABLED=1
+
+# Allow webhook URLs to point to internal/private network addresses (e.g. localhost, 192.168.x.x)
+# WARNING: Only enable this if you understand the SSRF risks. Useful for self-hosted instances
+# that need to send webhooks to internal services.
+# DANGEROUSLY_ALLOW_WEBHOOK_INTERNAL_URLS=1
+
 # OpenTelemetry OTLP endpoint (base URL, exporters append /v1/traces and /v1/metrics)
 # OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318
 # OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf
@@ -230,4 +279,4 @@ REDIS_URL=redis://localhost:6379
 
 
 # Lingo.dev API key for translation generation
-LINGODOTDEV_API_KEY=your_api_key_here
+LINGO_API_KEY=your_api_key_here

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

@@ -285,12 +285,14 @@ runs:
           encryption_key=${{ env.DUMMY_ENCRYPTION_KEY }}
           redis_url=${{ env.DUMMY_REDIS_URL }}
           sentry_auth_token=${{ env.SENTRY_AUTH_TOKEN }}
+          posthog_key=${{ env.POSTHOG_KEY }}
       env:
         DEPOT_PROJECT_TOKEN: ${{ env.DEPOT_PROJECT_TOKEN }}
         DUMMY_DATABASE_URL: ${{ env.DUMMY_DATABASE_URL }}
         DUMMY_ENCRYPTION_KEY: ${{ env.DUMMY_ENCRYPTION_KEY }}
         DUMMY_REDIS_URL: ${{ env.DUMMY_REDIS_URL }}
         SENTRY_AUTH_TOKEN: ${{ env.SENTRY_AUTH_TOKEN }}
+        POSTHOG_KEY: ${{ env.POSTHOG_KEY }}
 
     - name: Sign GHCR image (GHCR only)
       if: ${{ inputs.registry_type == 'ghcr' && (github.event_name == 'workflow_call' || github.event_name == 'release' || github.event_name == 'workflow_dispatch') }}

.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,7 +53,7 @@ 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
 

.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

@@ -92,3 +92,4 @@ jobs:
           DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
           DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
           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/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,7 +65,7 @@ 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
@@ -85,65 +85,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 +225,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/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,7 +29,7 @@ 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

.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,7 +33,7 @@ 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

.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,7 +30,7 @@ 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

.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'

.gitignore

@@ -45,7 +45,7 @@ yarn-error.log*
 .direnv
 
 # Playwright
-/test-results/
+**/test-results/
 /playwright-report/
 /blob-report/
 /playwright/.cache/

.husky/post-checkout

@@ -1,2 +0,0 @@
-echo "{\"branchName\": \"$(git rev-parse --abbrev-ref HEAD)\"}" > ./branch.json
-prettier --write ./branch.json

.husky/pre-commit

@@ -1 +1,13 @@
-pnpm lint-staged
+#!/usr/bin/env sh
+
+if command -v pnpm >/dev/null 2>&1; then
+  pnpm lint-staged
+elif command -v npm >/dev/null 2>&1; then
+  npm exec --yes pnpm@10.32.1 lint-staged
+elif command -v corepack >/dev/null 2>&1; then
+  corepack pnpm lint-staged
+else
+  echo "Error: pnpm, npm, and corepack are unavailable in this Git hook PATH."
+  echo "Install Node.js tooling or update your PATH, then retry the commit."
+  exit 127
+fi

AGENTS.md

@@ -52,6 +52,14 @@ We are using SonarQube to identify code smells and security hotspots.
 - Translations are in `apps/web/locales/`. Default is `en-US.json`.
 - Lingo.dev is automatically translating strings from en-US into other languages on commit. Run `pnpm i18n` to generate missing translations and validate keys.
 
+## Date and Time Rendering
+
+- All user-facing dates and times must use shared formatting helpers instead of ad hoc `date-fns`, `Intl`, or `toLocale*` calls in components.
+- Locale for display must come from the app language source of truth (`user.locale`, `getLocale()`, or `i18n.resolvedLanguage`), not browser defaults or implicit `undefined` locale behavior.
+- Locale and time zone are different concerns: locale controls formatting, time zone controls the represented clock/calendar moment.
+- Never infer a time zone from locale. If a product-level time zone source of truth exists, use it explicitly; otherwise preserve the existing semantic meaning of the stored value and avoid introducing browser-dependent conversions.
+- Machine-facing values for storage, APIs, exports, integrations, and logs must remain stable and non-localized (`ISO 8601` / UTC where applicable).
+
 ## Database & Prisma Performance
 
 - Multi-tenancy: All data must be scoped by Organization or Environment.

README.md

@@ -127,34 +127,10 @@ Formbricks has a hosted cloud offering with a generous free plan to get you up a
 
 Formbricks is available Open-Source under AGPLv3 license. You can host Formbricks on your own servers using Docker without a subscription.
 
-If you opt for self-hosting Formbricks, here are a few options to consider:
-
 #### Docker
 
 To get started with self-hosting with Docker, take a look at our [self-hosting docs](https://formbricks.com/docs/self-hosting/deployment).
 
-#### Community-managed One Click Hosting
-
-##### Railway
-
-You can deploy Formbricks on [Railway](https://railway.app) using the button below.
-
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/PPDzCd)
-
-##### RepoCloud
-
-Or you can also deploy Formbricks on [RepoCloud](https://repocloud.io) using the button below.
-
-[![Deploy on RepoCloud](https://d16t0pc4846x52.cloudfront.net/deploy.png)](https://repocloud.io/details/?app_id=254)
-
-##### Zeabur
-
-Or you can also deploy Formbricks on [Zeabur](https://zeabur.com) using the button below.
-
-[![Deploy to Zeabur](https://zeabur.com/button.svg)](https://zeabur.com/templates/G4TUJL)
-
-<a id="development"></a>
-
 ## 👨‍💻 Development
 
 ### Prerequisites
@@ -247,4 +223,4 @@ We currently do not offer Formbricks white-labeled. That means that we don't sel
 
 The Enterprise Edition allows us to fund the development of Formbricks sustainably. It guarantees that the free and open-source surveying infrastructure we're building will be around for decades to come.
 
-<p align="right"><a href="#top">🔼 Back to top</a></p>
+<a id="readme-de"></a>

apps/storybook/package.json

@@ -10,25 +10,20 @@
     "build-storybook": "storybook build",
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
-  "dependencies": {
-    "@formbricks/survey-ui": "workspace:*"
-  },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.0",
-    "@storybook/addon-a11y": "10.1.11",
-    "@storybook/addon-links": "10.1.11",
-    "@storybook/addon-onboarding": "10.1.11",
-    "@storybook/react-vite": "10.1.11",
-    "@typescript-eslint/eslint-plugin": "8.53.0",
-    "@tailwindcss/vite": "4.1.18",
-    "@typescript-eslint/parser": "8.53.0",
-    "@vitejs/plugin-react": "5.1.2",
-    "esbuild": "0.25.12",
+    "@chromatic-com/storybook": "5.0.2",
+    "@storybook/addon-a11y": "10.3.5",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-links": "10.3.5",
+    "@storybook/addon-onboarding": "10.3.5",
+    "@storybook/react-vite": "10.3.5",
+    "@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.1.11",
-    "prop-types": "15.8.1",
-    "storybook": "10.1.11",
-    "vite": "7.3.1",
-    "@storybook/addon-docs": "10.1.11"
+    "eslint-plugin-storybook": "10.3.5",
+    "storybook": "10.3.5",
+    "vite": "7.3.2"
   }
 }

apps/web/.prettierrc.js

@@ -0,0 +1,6 @@
+const baseConfig = require("../../.prettierrc.js");
+
+module.exports = {
+  ...baseConfig,
+  tailwindConfig: "./tailwind.config.js",
+};

apps/web/Dockerfile

@@ -18,7 +18,7 @@ FROM node:24-alpine3.23 AS base
 FROM base AS installer
 
 # Enable corepack and prepare pnpm
-RUN npm install --ignore-scripts -g corepack@latest 
+RUN npm install --ignore-scripts -g corepack@latest
 RUN corepack enable
 RUN corepack prepare pnpm@10.28.2 --activate
 
@@ -67,6 +67,7 @@ RUN --mount=type=secret,id=database_url \
     --mount=type=secret,id=encryption_key \
     --mount=type=secret,id=redis_url \
     --mount=type=secret,id=sentry_auth_token \
+    --mount=type=secret,id=posthog_key \
     /tmp/read-secrets.sh pnpm build --filter=@formbricks/web...
 
 #
@@ -74,9 +75,10 @@ RUN --mount=type=secret,id=database_url \
 #
 FROM base AS runner
 
-# Update npm to latest, then create user
+# Upgrade Alpine system packages to pick up security patches, update npm to latest, then create user
 # Note: npm's bundled tar has a known vulnerability but npm is only used during build, not at runtime
-RUN npm install --ignore-scripts -g npm@latest \
+RUN apk update && apk upgrade --no-cache \
+    && npm install --ignore-scripts -g npm@latest \
     && addgroup -S nextjs \
     && adduser -S -u 1001 -G nextjs nextjs
 
@@ -101,6 +103,9 @@ RUN chown -R nextjs:nextjs ./apps/web/public && chmod -R 755 ./apps/web/public
 # Create packages/database directory structure with proper ownership for runtime migrations
 RUN mkdir -p ./packages/database/migrations && chown -R nextjs:nextjs ./packages/database
 
+COPY --from=installer /app/packages/database/package.json ./packages/database/package.json
+RUN chown nextjs:nextjs ./packages/database/package.json && chmod 644 ./packages/database/package.json
+
 COPY --from=installer /app/packages/database/schema.prisma ./packages/database/schema.prisma
 RUN chown nextjs:nextjs ./packages/database/schema.prisma && chmod 644 ./packages/database/schema.prisma
 
@@ -117,8 +122,11 @@ RUN chown -R nextjs:nextjs ./node_modules/.prisma && chmod -R 755 ./node_modules
 COPY --from=installer /app/node_modules/@paralleldrive/cuid2 ./node_modules/@paralleldrive/cuid2
 RUN chmod -R 755 ./node_modules/@paralleldrive/cuid2
 
-COPY --from=installer /app/node_modules/uuid ./node_modules/uuid
-RUN chmod -R 755 ./node_modules/uuid
+# Runtime migrations import uuid v7 from the database package, so copy the
+# database package's resolved install instead of the repo-root hoisted version.
+COPY --from=installer /app/packages/database/node_modules/uuid ./node_modules/uuid
+RUN chmod -R 755 ./node_modules/uuid \
+    && node --input-type=module -e "import('uuid').then((module) => { if (typeof module.v7 !== 'function') throw new Error('uuid v7 missing in runtime image'); })"
 
 COPY --from=installer /app/node_modules/@noble/hashes ./node_modules/@noble/hashes
 RUN chmod -R 755 ./node_modules/@noble/hashes
@@ -161,4 +169,4 @@ RUN mkdir -p /home/nextjs/apps/web/uploads/ && \
 VOLUME /home/nextjs/apps/web/uploads/
 VOLUME /home/nextjs/apps/web/saml-connection
 
-CMD ["/home/nextjs/start.sh"]
+CMD ["/home/nextjs/start.sh"]

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks.tsx

@@ -69,7 +69,7 @@ export const ConnectWithFormbricks = ({
           ) : (
             <div className="flex animate-pulse flex-col items-center space-y-4">
               <span className="relative flex h-10 w-10">
-                <span className="animate-ping-slow absolute inline-flex h-full w-full rounded-full bg-slate-400 opacity-75"></span>
+                <span className="absolute inline-flex h-full w-full animate-ping-slow rounded-full bg-slate-400 opacity-75"></span>
                 <span className="relative inline-flex h-10 w-10 rounded-full bg-slate-500"></span>
               </span>
               <p className="pt-4 text-sm font-medium text-slate-600">

apps/web/app/(app)/(onboarding)/environments/[environmentId]/connect/page.tsx

@@ -1,5 +1,6 @@
 import { XIcon } from "lucide-react";
 import Link from "next/link";
+import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { ConnectWithFormbricks } from "@/app/(app)/(onboarding)/environments/[environmentId]/connect/components/ConnectWithFormbricks";
 import { getEnvironment } from "@/lib/environment/service";
 import { getPublicDomain } from "@/lib/getPublicUrl";
@@ -20,12 +21,12 @@ const Page = async (props: ConnectPageProps) => {
   const environment = await getEnvironment(params.environmentId);
 
   if (!environment) {
-    throw new Error(t("common.environment_not_found"));
+    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
   }
 
   const project = await getProjectByEnvironmentId(environment.id);
   if (!project) {
-    throw new Error(t("common.workspace_not_found"));
+    throw new ResourceNotFoundError(t("common.workspace"), null);
   }
 
   const channel = project.config.channel || null;
@@ -46,7 +47,7 @@ const Page = async (props: ConnectPageProps) => {
         channel={channel}
       />
       <Button
-        className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
         variant="ghost"
         asChild>
         <Link href={`/environments/${environment.id}`}>

apps/web/app/(app)/(onboarding)/environments/[environmentId]/layout.tsx

@@ -4,7 +4,10 @@ import { AuthorizationError } from "@formbricks/types/errors";
 import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
-const OnboardingLayout = async (props) => {
+const OnboardingLayout = async (props: {
+  params: Promise<{ environmentId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;

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

@@ -2,6 +2,7 @@ import "@testing-library/jest-dom/vitest";
 import { cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, test } from "vitest";
 import { TProject } from "@formbricks/types/project";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/constants";
 import { TXMTemplate } from "@formbricks/types/templates";
 import { replacePresetPlaceholders } from "./utils";
 
@@ -39,13 +40,13 @@ const mockTemplate: TXMTemplate = {
       elements: [
         {
           id: "q1",
-          type: "openText" as const,
+          type: "openText" as TSurveyElementTypeEnum.OpenText,
           inputType: "text" as const,
           headline: { default: "$[projectName] Question" },
           subheader: { default: "" },
           required: false,
           placeholder: { default: "" },
-          charLimit: 1000,
+          charLimit: { enabled: true, max: 1000 },
         },
       ],
     },

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/lib/xm-templates.test.ts

@@ -14,7 +14,7 @@ describe("xm-templates", () => {
   });
 
   test("getXMSurveyDefault returns default survey template", () => {
-    const tMock = vi.fn((key) => key) as TFunction;
+    const tMock = vi.fn((key: string) => key) as unknown as TFunction;
     const result = getXMSurveyDefault(tMock);
 
     expect(result).toEqual({
@@ -29,7 +29,7 @@ describe("xm-templates", () => {
   });
 
   test("getXMTemplates returns all templates", () => {
-    const tMock = vi.fn((key) => key) as TFunction;
+    const tMock = vi.fn((key: string) => key) as unknown as TFunction;
     const result = getXMTemplates(tMock);
 
     expect(result).toHaveLength(6);
@@ -44,7 +44,7 @@ describe("xm-templates", () => {
   test("getXMTemplates handles errors gracefully", async () => {
     const tMock = vi.fn(() => {
       throw new Error("Test error");
-    }) as TFunction;
+    }) as unknown as TFunction;
 
     const result = getXMTemplates(tMock);
 

apps/web/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/page.tsx

@@ -1,6 +1,7 @@
 import { XIcon } from "lucide-react";
 import { getServerSession } from "next-auth";
 import Link from "next/link";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { XMTemplateList } from "@/app/(app)/(onboarding)/environments/[environmentId]/xm-templates/components/XMTemplateList";
 import { getEnvironment } from "@/lib/environment/service";
 import { getProjectByEnvironmentId, getUserProjects } from "@/lib/project/service";
@@ -23,22 +24,22 @@ const Page = async (props: XMTemplatePageProps) => {
   const environment = await getEnvironment(params.environmentId);
   const t = await getTranslate();
   if (!session) {
-    throw new Error(t("common.session_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   const user = await getUser(session.user.id);
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
   if (!environment) {
-    throw new Error(t("common.environment_not_found"));
+    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
   }
 
   const organizationId = await getOrganizationIdFromEnvironmentId(environment.id);
 
   const project = await getProjectByEnvironmentId(environment.id);
   if (!project) {
-    throw new Error(t("common.workspace_not_found"));
+    throw new ResourceNotFoundError(t("common.workspace"), null);
   }
 
   const projects = await getUserProjects(session.user.id, organizationId);
@@ -49,7 +50,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={`/environments/${environment.id}/surveys`}>

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";
@@ -19,8 +19,8 @@ describe("getTeamsByOrganizationId", () => {
 
   test("returns mapped teams", async () => {
     const mockTeams = [
-      { id: "t1", name: "Team 1" },
-      { id: "t2", name: "Team 2" },
+      { id: "t1", name: "Team 1", createdAt: new Date(), updatedAt: new Date(), organizationId: "org1" },
+      { id: "t2", name: "Team 2", createdAt: new Date(), updatedAt: new Date(), organizationId: "org1" },
     ];
     vi.mocked(prisma.team.findMany).mockResolvedValueOnce(mockTeams);
     const result = await getTeamsByOrganizationId("org1");
@@ -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";
@@ -22,14 +22,12 @@ export const getTeamsByOrganizationId = reactCache(
         },
       });
 
-      const projectTeams = teams.map((team) => ({
+      return teams.map((team: TOrganizationTeam) => ({
         id: team.id,
         name: team.name,
       }));
-
-      return projectTeams;
     } 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

@@ -42,7 +42,7 @@ export const LandingSidebar = ({ user, organization }: LandingSidebarProps) => {
   return (
     <aside
       className={cn(
-        "w-sidebar-collapsed z-40 flex flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100"
+        "z-40 flex w-sidebar-collapsed flex-col justify-between rounded-r-xl border-r border-slate-200 bg-white pt-3 shadow-md transition-all duration-100"
       )}>
       <Image src={FBLogo} width={160} height={30} alt={t("environments.formbricks_logo")} />
 

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

@@ -5,7 +5,10 @@ import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getUserProjects } from "@/lib/project/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
-const LandingLayout = async (props) => {
+const LandingLayout = async (props: {
+  params: Promise<{ organizationId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;

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

@@ -10,7 +10,7 @@ import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
 import { getOrganizationAuth } from "@/modules/organization/lib/utils";
 import { Header } from "@/modules/ui/components/header";
 
-const Page = async (props) => {
+const Page = async (props: { params: Promise<{ organizationId: string }> }) => {
   const params = await props.params;
   const t = await getTranslate();
 
@@ -26,7 +26,8 @@ const Page = async (props) => {
   const isMultiOrgEnabled = await getIsMultiOrgEnabled();
 
   const membership = await getMembershipByUserIdOrganizationId(session.user.id, organization.id);
-  const { isMember } = getAccessFlags(membership?.role);
+  const { isMember, isBilling } = getAccessFlags(membership?.role);
+  const isMembershipPending = membership?.role === undefined;
 
   return (
     <div className="flex min-h-full min-w-full flex-row">
@@ -45,6 +46,8 @@ const Page = async (props) => {
               isOwnerOrManager={false}
               isAccessControlAllowed={false}
               isMember={isMember}
+              isBilling={isBilling}
+              isMembershipPending={isMembershipPending}
               environments={[]}
             />
           </div>

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

@@ -1,6 +1,6 @@
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
-import { AuthorizationError } from "@formbricks/types/errors";
+import { AuthenticationError, AuthorizationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { canUserAccessOrganization } from "@/lib/organization/auth";
 import { getOrganization } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
@@ -8,7 +8,10 @@ import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { ToasterClient } from "@/modules/ui/components/toaster-client";
 
-const ProjectOnboardingLayout = async (props) => {
+const ProjectOnboardingLayout = async (props: {
+  params: Promise<{ organizationId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;
@@ -22,7 +25,7 @@ const ProjectOnboardingLayout = async (props) => {
 
   const user = await getUser(session.user.id);
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   const isAuthorized = await canUserAccessOrganization(session.user.id, params.organizationId);
@@ -33,7 +36,7 @@ const ProjectOnboardingLayout = async (props) => {
 
   const organization = await getOrganization(params.organizationId);
   if (!organization) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), params.organizationId);
   }
 
   return (

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

@@ -50,7 +50,7 @@ const Page = async (props: ChannelPageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

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

@@ -1,5 +1,6 @@
 import { getServerSession } from "next-auth";
 import { notFound, redirect } from "next/navigation";
+import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getOrganization } from "@/lib/organization/service";
@@ -8,7 +9,10 @@ import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getOrganizationProjectsLimit } from "@/modules/ee/license-check/lib/utils";
 
-const OnboardingLayout = async (props) => {
+const OnboardingLayout = async (props: {
+  params: Promise<{ organizationId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;
@@ -25,11 +29,13 @@ const OnboardingLayout = async (props) => {
 
   const organization = await getOrganization(params.organizationId);
   if (!organization) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), params.organizationId);
   }
 
-  const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
-  const organizationProjectsCount = await getOrganizationProjectsCount(organization.id);
+  const [organizationProjectsLimit, organizationProjectsCount] = await Promise.all([
+    getOrganizationProjectsLimit(organization.id),
+    getOrganizationProjectsCount(organization.id),
+  ]);
 
   if (organizationProjectsCount >= organizationProjectsLimit) {
     return redirect(`/`);

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

@@ -47,7 +47,7 @@ const Page = async (props: ModePageProps) => {
       <OnboardingOptionsContainer options={channelOptions} />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

apps/web/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/plan/components/select-plan-onboarding.tsx

@@ -0,0 +1,22 @@
+import { getTranslate } from "@/lingodotdev/server";
+import { SelectPlanCard } from "@/modules/ee/billing/components/select-plan-card";
+import { Header } from "@/modules/ui/components/header";
+
+interface SelectPlanOnboardingProps {
+  organizationId: string;
+}
+
+export const SelectPlanOnboarding = async ({ organizationId }: SelectPlanOnboardingProps) => {
+  const t = await getTranslate();
+  const nextUrl = `/organizations/${organizationId}/workspaces/new/mode`;
+
+  return (
+    <div className="flex min-h-full min-w-full flex-col items-center justify-center space-y-8">
+      <Header
+        title={t("environments.settings.billing.select_plan_header_title")}
+        subtitle={t("environments.settings.billing.select_plan_header_subtitle")}
+      />
+      <SelectPlanCard nextUrl={nextUrl} organizationId={organizationId} />
+    </div>
+  );
+};

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

@@ -0,0 +1,42 @@
+import { redirect } from "next/navigation";
+import { TCloudBillingPlan } from "@formbricks/types/organizations";
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getOrganizationBillingWithReadThroughSync } from "@/modules/ee/billing/lib/organization-billing";
+import { getOrganizationAuth } from "@/modules/organization/lib/utils";
+import { SelectPlanOnboarding } from "./components/select-plan-onboarding";
+
+const PAID_PLANS = new Set<TCloudBillingPlan>(["pro", "scale", "custom"]);
+
+interface PlanPageProps {
+  params: Promise<{
+    organizationId: string;
+  }>;
+}
+
+const Page = async (props: PlanPageProps) => {
+  const params = await props.params;
+
+  if (!IS_FORMBRICKS_CLOUD) {
+    return redirect(`/organizations/${params.organizationId}/workspaces/new/mode`);
+  }
+
+  const { session } = await getOrganizationAuth(params.organizationId);
+
+  if (!session?.user) {
+    return redirect(`/auth/login`);
+  }
+
+  // Users with an existing paid/trial subscription should not be shown the trial page.
+  // Redirect them directly to the next onboarding step.
+  const billing = await getOrganizationBillingWithReadThroughSync(params.organizationId);
+  const currentPlan = billing?.stripe?.plan;
+  const hasExistingSubscription = currentPlan !== undefined && PAID_PLANS.has(currentPlan);
+
+  if (hasExistingSubscription) {
+    return redirect(`/organizations/${params.organizationId}/workspaces/new/mode`);
+  }
+
+  return <SelectPlanOnboarding organizationId={params.organizationId} />;
+};
+
+export default Page;

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

@@ -228,7 +228,7 @@ export const ProjectSettings = ({
         </FormProvider>
       </div>
 
-      <div className="relative flex h-[30rem] w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 shadow">
+      <div className="relative flex w-1/2 flex-col items-center justify-center space-y-2 rounded-lg border bg-slate-200 p-6 shadow">
         {logoUrl && (
           <Image
             src={logoUrl}
@@ -239,18 +239,16 @@ export const ProjectSettings = ({
           />
         )}
         <p className="text-sm text-slate-400">{t("common.preview")}</p>
-        <div className="z-0 h-3/4 w-3/4">
-          <SurveyInline
-            appUrl={publicDomain}
-            isPreviewMode={true}
-            survey={previewSurvey(projectName || "my Product", t)}
-            styling={previewStyling}
-            isBrandingEnabled={false}
-            languageCode="default"
-            onFileUpload={async (file) => file.name}
-            autoFocus={false}
-          />
-        </div>
+        <SurveyInline
+          appUrl={publicDomain}
+          isPreviewMode={true}
+          survey={previewSurvey(projectName || t("common.my_product"), t)}
+          styling={previewStyling}
+          isBrandingEnabled={false}
+          languageCode="default"
+          onFileUpload={async (file) => file.name}
+          autoFocus={false}
+        />
       </div>
       <CreateTeamModal
         open={createTeamModalOpen}

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

@@ -1,6 +1,7 @@
 import { XIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
+import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { TProjectConfigChannel, TProjectConfigIndustry, TProjectMode } from "@formbricks/types/project";
 import { getTeamsByOrganizationId } from "@/app/(app)/(onboarding)/lib/onboarding";
 import { ProjectSettings } from "@/app/(app)/(onboarding)/organizations/[organizationId]/workspaces/new/settings/components/ProjectSettings";
@@ -42,10 +43,10 @@ const Page = async (props: ProjectSettingsPageProps) => {
 
   const organizationTeams = await getTeamsByOrganizationId(params.organizationId);
 
-  const isAccessControlAllowed = await getAccessControlPermission(organization.billing.plan);
+  const isAccessControlAllowed = await getAccessControlPermission(organization.id);
 
   if (!organizationTeams) {
-    throw new Error(t("common.organization_teams_not_found"));
+    throw new ResourceNotFoundError(t("common.team"), null);
   }
 
   const publicDomain = getPublicDomain();
@@ -69,7 +70,7 @@ const Page = async (props: ProjectSettingsPageProps) => {
       />
       {projects.length >= 1 && (
         <Button
-          className="absolute top-5 right-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
           variant="ghost"
           asChild>
           <Link href={"/"}>

apps/web/app/(app)/(onboarding)/organizations/components/OnboardingOptionsContainer.tsx

@@ -16,7 +16,7 @@ interface OnboardingOptionsContainerProps {
 }
 
 export const OnboardingOptionsContainer = ({ options }: OnboardingOptionsContainerProps) => {
-  const getOptionCard = (option) => {
+  const getOptionCard = (option: OnboardingOptionsContainerProps["options"][number]) => {
     const Icon = option.icon;
     return (
       <OptionCard

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

@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 export const ZOrganizationTeam = z.object({
-  id: z.string().cuid2(),
+  id: z.cuid2(),
   name: z.string(),
 });
 

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/layout.tsx

@@ -1,8 +1,12 @@
 import { redirect } from "next/navigation";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { getEnvironment } from "@/lib/environment/service";
 import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
 
-const SurveyEditorEnvironmentLayout = async (props) => {
+const SurveyEditorEnvironmentLayout = async (props: {
+  params: Promise<{ environmentId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;
@@ -14,13 +18,13 @@ const SurveyEditorEnvironmentLayout = async (props) => {
   }
 
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   const environment = await getEnvironment(params.environmentId);
 
   if (!environment) {
-    throw new Error(t("common.environment_not_found"));
+    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
   }
 
   return (

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

@@ -6,15 +6,26 @@ import { useTranslation } from "react-i18next";
 import { Button } from "@/modules/ui/components/button";
 import { Confetti } from "@/modules/ui/components/confetti";
 
-interface ConfirmationPageProps {
-  environmentId: string;
-}
+const BILLING_CONFIRMATION_ENVIRONMENT_ID_KEY = "billingConfirmationEnvironmentId";
 
-export const ConfirmationPage = ({ environmentId }: ConfirmationPageProps) => {
+export const ConfirmationPage = () => {
   const { t } = useTranslation();
   const [showConfetti, setShowConfetti] = useState(false);
+  const [resolvedEnvironmentId, setResolvedEnvironmentId] = useState<string | null>(null);
+
   useEffect(() => {
     setShowConfetti(true);
+
+    if (globalThis.window === undefined) {
+      return;
+    }
+
+    const storedEnvironmentId = globalThis.window.sessionStorage.getItem(
+      BILLING_CONFIRMATION_ENVIRONMENT_ID_KEY
+    );
+    if (storedEnvironmentId) {
+      setResolvedEnvironmentId(storedEnvironmentId);
+    }
   }, []);
 
   return (
@@ -30,7 +41,12 @@ export const ConfirmationPage = ({ environmentId }: ConfirmationPageProps) => {
           </p>
         </div>
         <Button asChild className="w-full justify-center">
-          <Link href={`/environments/${environmentId}/settings/billing`}>
+          <Link
+            href={
+              resolvedEnvironmentId
+                ? `/environments/${resolvedEnvironmentId}/settings/billing`
+                : "/environments"
+            }>
             {t("billing_confirmation.back_to_billing_overview")}
           </Link>
         </Button>

apps/web/app/(app)/billing-confirmation/page.tsx

@@ -3,13 +3,10 @@ import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper
 
 export const dynamic = "force-dynamic";
 
-const Page = async (props) => {
-  const searchParams = await props.searchParams;
-  const { environmentId } = searchParams;
-
+const Page = async () => {
   return (
     <PageContentWrapper>
-      <ConfirmationPage environmentId={environmentId?.toString()} />
+      <ConfirmationPage />
     </PageContentWrapper>
   );
 };

apps/web/app/(app)/environments/[environmentId]/actions.ts

@@ -2,7 +2,11 @@
 
 import { z } from "zod";
 import { ZId } from "@formbricks/types/common";
-import { AuthorizationError, OperationNotAllowedError } from "@formbricks/types/errors";
+import {
+  AuthorizationError,
+  OperationNotAllowedError,
+  ResourceNotFoundError,
+} from "@formbricks/types/errors";
 import { ZProjectUpdateInput } from "@formbricks/types/project";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getOrganization } from "@/lib/organization/service";
@@ -10,7 +14,6 @@ import { getOrganizationProjectsCount } from "@/lib/project/service";
 import { updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
-import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
 import {
   getAccessControlPermission,
@@ -25,67 +28,63 @@ const ZCreateProjectAction = z.object({
   data: ZProjectUpdateInput,
 });
 
-export const createProjectAction = authenticatedActionClient.schema(ZCreateProjectAction).action(
-  withAuditLogging(
-    "created",
-    "project",
-    async ({ ctx, parsedInput }: { ctx: AuthenticatedActionClientCtx; parsedInput: Record<string, any> }) => {
-      const { user } = ctx;
+export const createProjectAction = authenticatedActionClient.inputSchema(ZCreateProjectAction).action(
+  withAuditLogging("created", "project", async ({ ctx, parsedInput }) => {
+    const { user } = ctx;
 
-      const organizationId = parsedInput.organizationId;
+    const organizationId = parsedInput.organizationId;
 
-      await checkAuthorizationUpdated({
-        userId: user.id,
-        organizationId: parsedInput.organizationId,
-        access: [
-          {
-            data: parsedInput.data,
-            schema: ZProjectUpdateInput,
-            type: "organization",
-            roles: ["owner", "manager"],
-          },
-        ],
-      });
-
-      const organization = await getOrganization(organizationId);
-
-      if (!organization) {
-        throw new Error("Organization not found");
-      }
-
-      const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
-      const organizationProjectsCount = await getOrganizationProjectsCount(organization.id);
-
-      if (organizationProjectsCount >= organizationProjectsLimit) {
-        throw new OperationNotAllowedError("Organization workspace limit reached");
-      }
-
-      if (parsedInput.data.teamIds && parsedInput.data.teamIds.length > 0) {
-        const isAccessControlAllowed = await getAccessControlPermission(organization.billing.plan);
-
-        if (!isAccessControlAllowed) {
-          throw new OperationNotAllowedError("You do not have permission to manage roles");
-        }
-      }
-
-      const project = await createProject(parsedInput.organizationId, parsedInput.data);
-      const updatedNotificationSettings = {
-        ...user.notificationSettings,
-        alert: {
-          ...user.notificationSettings?.alert,
+    await checkAuthorizationUpdated({
+      userId: user.id,
+      organizationId: parsedInput.organizationId,
+      access: [
+        {
+          data: parsedInput.data,
+          schema: ZProjectUpdateInput,
+          type: "organization",
+          roles: ["owner", "manager"],
         },
-      };
+      ],
+    });
 
-      await updateUser(user.id, {
-        notificationSettings: updatedNotificationSettings,
-      });
+    const organization = await getOrganization(organizationId);
 
-      ctx.auditLoggingCtx.organizationId = organizationId;
-      ctx.auditLoggingCtx.projectId = project.id;
-      ctx.auditLoggingCtx.newObject = project;
-      return project;
+    if (!organization) {
+      throw new ResourceNotFoundError("Organization", organizationId);
     }
-  )
+
+    const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.id);
+    const organizationProjectsCount = await getOrganizationProjectsCount(organization.id);
+
+    if (organizationProjectsCount >= organizationProjectsLimit) {
+      throw new OperationNotAllowedError("Organization workspace limit reached");
+    }
+
+    if (parsedInput.data.teamIds && parsedInput.data.teamIds.length > 0) {
+      const isAccessControlAllowed = await getAccessControlPermission(organization.id);
+
+      if (!isAccessControlAllowed) {
+        throw new OperationNotAllowedError("You do not have permission to manage roles");
+      }
+    }
+
+    const project = await createProject(parsedInput.organizationId, parsedInput.data);
+    const updatedNotificationSettings = {
+      ...user.notificationSettings,
+      alert: {
+        ...user.notificationSettings?.alert,
+      },
+    };
+
+    await updateUser(user.id, {
+      notificationSettings: updatedNotificationSettings,
+    });
+
+    ctx.auditLoggingCtx.organizationId = organizationId;
+    ctx.auditLoggingCtx.projectId = project.id;
+    ctx.auditLoggingCtx.newObject = project;
+    return project;
+  })
 );
 
 const ZGetOrganizationsForSwitcherAction = z.object({
@@ -97,7 +96,7 @@ const ZGetOrganizationsForSwitcherAction = z.object({
  * Called on-demand when user opens the organization switcher.
  */
 export const getOrganizationsForSwitcherAction = authenticatedActionClient
-  .schema(ZGetOrganizationsForSwitcherAction)
+  .inputSchema(ZGetOrganizationsForSwitcherAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -122,7 +121,7 @@ const ZGetProjectsForSwitcherAction = z.object({
  * Called on-demand when user opens the project switcher.
  */
 export const getProjectsForSwitcherAction = authenticatedActionClient
-  .schema(ZGetProjectsForSwitcherAction)
+  .inputSchema(ZGetProjectsForSwitcherAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,

apps/web/app/(app)/environments/[environmentId]/components/EnvironmentLayout.tsx

@@ -1,3 +1,4 @@
+import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { MainNavigation } from "@/app/(app)/environments/[environmentId]/components/MainNavigation";
 import { TopControlBar } from "@/app/(app)/environments/[environmentId]/components/TopControlBar";
 import { IS_DEVELOPMENT, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
@@ -29,7 +30,6 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
     isAccessControlAllowed,
     projectPermission,
     license,
-    peopleCount,
     responseCount,
   } = layoutData;
 
@@ -38,12 +38,12 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
 
   const { features, lastChecked, isPendingDowngrade, active, status } = license;
   const isMultiOrgEnabled = features?.isMultiOrgEnabled ?? false;
-  const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
+  const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.id);
   const isOwnerOrManager = isOwner || isManager;
 
   // Validate that project permission exists for members
   if (isMember && !projectPermission) {
-    throw new Error(t("common.workspace_permission_not_found"));
+    throw new ResourceNotFoundError(t("common.workspace"), null);
   }
 
   return (
@@ -52,7 +52,6 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
         <LimitsReachedBanner
           organization={organization}
           environmentId={environment.id}
-          peopleCount={peopleCount}
           responseCount={responseCount}
         />
       )}
@@ -76,6 +75,10 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
           isDevelopment={IS_DEVELOPMENT}
           membershipRole={membership.role}
           publicDomain={publicDomain}
+          isMultiOrgEnabled={isMultiOrgEnabled}
+          organizationProjectsLimit={organizationProjectsLimit}
+          isLicenseActive={active}
+          isAccessControlAllowed={isAccessControlAllowed}
         />
         <div id="mainContent" className="flex flex-1 flex-col overflow-hidden bg-slate-50">
           <TopControlBar

apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx

@@ -2,40 +2,59 @@
 
 import {
   ArrowUpRightIcon,
+  Building2Icon,
   ChevronRightIcon,
   Cog,
+  FoldersIcon,
+  Loader2,
   LogOutIcon,
   MessageCircle,
   PanelLeftCloseIcon,
   PanelLeftOpenIcon,
+  PlusIcon,
   RocketIcon,
+  SettingsIcon,
   UserCircleIcon,
   UserIcon,
 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TOrganizationRole } from "@formbricks/types/memberships";
 import { TOrganization } from "@formbricks/types/organizations";
 import { TUser } from "@formbricks/types/user";
+import {
+  getOrganizationsForSwitcherAction,
+  getProjectsForSwitcherAction,
+} from "@/app/(app)/environments/[environmentId]/actions";
 import { NavigationLink } from "@/app/(app)/environments/[environmentId]/components/NavigationLink";
 import { isNewerVersion } from "@/app/(app)/environments/[environmentId]/lib/utils";
 import FBLogo from "@/images/formbricks-wordmark.svg";
 import { cn } from "@/lib/cn";
+import { getBillingFallbackPath } from "@/lib/membership/navigation";
 import { getAccessFlags } from "@/lib/membership/utils";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
+import { TrialAlert } from "@/modules/ee/billing/components/trial-alert";
+import { CreateOrganizationModal } from "@/modules/organization/components/CreateOrganizationModal";
+import { CreateProjectModal } from "@/modules/projects/components/create-project-modal";
+import { ProjectLimitModal } from "@/modules/projects/components/project-limit-modal";
 import { getLatestStableFbReleaseAction } from "@/modules/projects/settings/(setup)/app-connection/actions";
 import { ProfileAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
+import { ModalButton } from "@/modules/ui/components/upgrade-prompt";
 import packageJson from "../../../../../package.json";
 
 interface NavigationProps {
@@ -47,8 +66,31 @@ interface NavigationProps {
   isDevelopment: boolean;
   membershipRole?: TOrganizationRole;
   publicDomain: string;
+  isMultiOrgEnabled: boolean;
+  organizationProjectsLimit: number;
+  isLicenseActive: boolean;
+  isAccessControlAllowed: boolean;
 }
 
+const isActiveProjectSetting = (pathname: string, settingId: string): boolean => {
+  if (pathname.includes("/settings/")) {
+    return false;
+  }
+
+  const pattern = new RegExp(`/workspace/${settingId}(?:/|$)`);
+  return pattern.test(pathname);
+};
+
+const isActiveOrganizationSetting = (pathname: string, settingId: string): boolean => {
+  const accountSettingsPattern = /\/settings\/(profile|account|notifications|security|appearance)(?:\/|$)/;
+  if (accountSettingsPattern.test(pathname)) {
+    return false;
+  }
+
+  const pattern = new RegExp(`/settings/${settingId}(?:/|$)`);
+  return pattern.test(pathname);
+};
+
 export const MainNavigation = ({
   environment,
   organization,
@@ -58,6 +100,10 @@ export const MainNavigation = ({
   isFormbricksCloud,
   isDevelopment,
   publicDomain,
+  isMultiOrgEnabled,
+  organizationProjectsLimit,
+  isLicenseActive,
+  isAccessControlAllowed,
 }: NavigationProps) => {
   const router = useRouter();
   const pathname = usePathname();
@@ -67,7 +113,12 @@ export const MainNavigation = ({
   const [latestVersion, setLatestVersion] = useState("");
   const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
 
-  const { isManager, isOwner, isBilling } = getAccessFlags(membershipRole);
+  const [isPending, startTransition] = useTransition();
+  const { isManager, isOwner, isBilling, isMember } = getAccessFlags(membershipRole);
+  const isMembershipPending = membershipRole === undefined;
+  const disabledNavigationMessage = isMembershipPending
+    ? t("common.loading")
+    : t("common.you_are_not_authorized_to_perform_this_action");
 
   const isOwnerOrManager = isManager || isOwner;
 
@@ -104,6 +155,7 @@ export const MainNavigation = ({
         icon: MessageCircle,
         isActive: pathname?.includes("/surveys"),
         isHidden: false,
+        disabled: isMembershipPending || isBilling,
       },
       {
         href: `/environments/${environment.id}/contacts`,
@@ -113,15 +165,17 @@ export const MainNavigation = ({
           pathname?.includes("/contacts") ||
           pathname?.includes("/segments") ||
           pathname?.includes("/attributes"),
+        disabled: isMembershipPending || isBilling,
       },
       {
         name: t("common.configuration"),
         href: `/environments/${environment.id}/workspace/general`,
         icon: Cog,
-        isActive: pathname?.includes("/project"),
+        isActive: pathname?.includes("/workspace"),
+        disabled: isMembershipPending || isBilling,
       },
     ],
-    [t, environment.id, pathname]
+    [t, environment.id, pathname, isMembershipPending, isBilling]
   );
 
   const dropdownNavigation = [
@@ -144,6 +198,183 @@ export const MainNavigation = ({
     },
   ];
 
+  const [isWorkspaceDropdownOpen, setIsWorkspaceDropdownOpen] = useState(false);
+  const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
+  const [projects, setProjects] = useState<{ id: string; name: string }[]>([]);
+  const [organizations, setOrganizations] = useState<{ id: string; name: string }[]>([]);
+  const [isLoadingProjects, setIsLoadingProjects] = useState(false);
+  const [hasInitializedProjects, setHasInitializedProjects] = useState(false);
+  const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
+  const [workspaceLoadError, setWorkspaceLoadError] = useState<string | null>(null);
+  const [organizationLoadError, setOrganizationLoadError] = useState<string | null>(null);
+  const [openCreateProjectModal, setOpenCreateProjectModal] = useState(false);
+  const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
+  const [openProjectLimitModal, setOpenProjectLimitModal] = useState(false);
+
+  const renderSwitcherError = (error: string, onRetry: () => void, retryLabel: string) => (
+    <div className="px-2 py-4">
+      <p className="mb-2 text-sm text-red-600">{error}</p>
+      <button onClick={onRetry} className="text-xs text-slate-600 underline hover:text-slate-800">
+        {retryLabel}
+      </button>
+    </div>
+  );
+
+  const projectSettings = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${environment.id}/workspace/general`,
+    },
+    {
+      id: "look",
+      label: t("common.look_and_feel"),
+      href: `/environments/${environment.id}/workspace/look`,
+    },
+    {
+      id: "app-connection",
+      label: t("common.website_and_app_connection"),
+      href: `/environments/${environment.id}/workspace/app-connection`,
+    },
+    {
+      id: "integrations",
+      label: t("common.integrations"),
+      href: `/environments/${environment.id}/workspace/integrations`,
+    },
+    {
+      id: "teams",
+      label: t("common.team_access"),
+      href: `/environments/${environment.id}/workspace/teams`,
+    },
+    {
+      id: "languages",
+      label: t("common.survey_languages"),
+      href: `/environments/${environment.id}/workspace/languages`,
+    },
+    {
+      id: "tags",
+      label: t("common.tags"),
+      href: `/environments/${environment.id}/workspace/tags`,
+    },
+  ];
+
+  const organizationSettings = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${environment.id}/settings/general`,
+    },
+    {
+      id: "teams",
+      label: t("common.members_and_teams"),
+      href: `/environments/${environment.id}/settings/teams`,
+    },
+    {
+      id: "api-keys",
+      label: t("common.api_keys"),
+      href: `/environments/${environment.id}/settings/api-keys`,
+      hidden: !isOwnerOrManager,
+    },
+    {
+      id: "domain",
+      label: t("common.domain"),
+      href: `/environments/${environment.id}/settings/domain`,
+      hidden: isFormbricksCloud,
+    },
+    {
+      id: "billing",
+      label: t("common.billing"),
+      href: `/environments/${environment.id}/settings/billing`,
+      hidden: !isFormbricksCloud,
+    },
+    {
+      id: "enterprise",
+      label: t("common.enterprise_license"),
+      href: `/environments/${environment.id}/settings/enterprise`,
+      hidden: isFormbricksCloud || isMember,
+    },
+  ];
+
+  const loadProjects = useCallback(async () => {
+    setIsLoadingProjects(true);
+    setWorkspaceLoadError(null);
+
+    try {
+      const result = await getProjectsForSwitcherAction({ organizationId: organization.id });
+      if (result?.data) {
+        const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+        setProjects(sorted);
+      } else {
+        setWorkspaceLoadError(getFormattedErrorMessage(result) || t("common.failed_to_load_workspaces"));
+      }
+    } catch (error) {
+      const formattedError =
+        typeof error === "object" && error !== null
+          ? getFormattedErrorMessage(error as { serverError?: string; validationErrors?: unknown })
+          : "";
+      setWorkspaceLoadError(
+        formattedError || (error instanceof Error ? error.message : t("common.failed_to_load_workspaces"))
+      );
+    } finally {
+      setIsLoadingProjects(false);
+      setHasInitializedProjects(true);
+    }
+  }, [organization.id, t]);
+
+  useEffect(() => {
+    if (!isWorkspaceDropdownOpen || projects.length > 0 || isLoadingProjects || workspaceLoadError) {
+      return;
+    }
+
+    loadProjects();
+  }, [isWorkspaceDropdownOpen, projects.length, isLoadingProjects, workspaceLoadError, loadProjects]);
+
+  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 (error) {
+      const formattedError =
+        typeof error === "object" && error !== null
+          ? getFormattedErrorMessage(error as { serverError?: string; validationErrors?: unknown })
+          : "";
+      setOrganizationLoadError(
+        formattedError || (error instanceof Error ? error.message : t("common.failed_to_load_organizations"))
+      );
+    } finally {
+      setIsLoadingOrganizations(false);
+    }
+  }, [organization.id, t]);
+
+  useEffect(() => {
+    if (
+      !isOrganizationDropdownOpen ||
+      organizations.length > 0 ||
+      isLoadingOrganizations ||
+      organizationLoadError
+    ) {
+      return;
+    }
+
+    loadOrganizations();
+  }, [
+    isOrganizationDropdownOpen,
+    organizations.length,
+    isLoadingOrganizations,
+    organizationLoadError,
+    loadOrganizations,
+  ]);
+
   useEffect(() => {
     async function loadReleases() {
       const res = await getLatestStableFbReleaseAction();
@@ -159,7 +390,99 @@ export const MainNavigation = ({
     if (isOwnerOrManager) loadReleases();
   }, [isOwnerOrManager]);
 
-  const mainNavigationLink = `/environments/${environment.id}/${isBilling ? "settings/billing/" : "surveys/"}`;
+  const trialDaysRemaining = useMemo(() => {
+    if (!isFormbricksCloud || organization.billing?.stripe?.subscriptionStatus !== "trialing") return null;
+    const trialEnd = organization.billing.stripe.trialEnd;
+    if (!trialEnd) return null;
+    const ts = new Date(trialEnd).getTime();
+    if (!Number.isFinite(ts)) return null;
+    const msPerDay = 86_400_000;
+    return Math.ceil((ts - Date.now()) / msPerDay);
+  }, [
+    isFormbricksCloud,
+    organization.billing?.stripe?.subscriptionStatus,
+    organization.billing?.stripe?.trialEnd,
+  ]);
+
+  const mainNavigationLink = isBilling
+    ? getBillingFallbackPath(environment.id, isFormbricksCloud)
+    : `/environments/${environment.id}/surveys/`;
+
+  const handleProjectChange = (projectId: string) => {
+    const targetPath =
+      projectId === project.id ? `/environments/${environment.id}/surveys` : `/workspaces/${projectId}/`;
+    startTransition(() => {
+      setIsWorkspaceDropdownOpen(false);
+      router.push(targetPath);
+    });
+  };
+
+  const handleOrganizationChange = (organizationId: string) => {
+    const targetPath =
+      organizationId === organization.id
+        ? `/environments/${environment.id}/settings/general`
+        : `/organizations/${organizationId}/`;
+    startTransition(() => {
+      setIsOrganizationDropdownOpen(false);
+      router.push(targetPath);
+    });
+  };
+
+  const handleSettingNavigation = (href: string) => {
+    startTransition(() => {
+      router.push(href);
+    });
+  };
+
+  const handleProjectCreate = () => {
+    if (!hasInitializedProjects || isLoadingProjects) {
+      return;
+    }
+
+    if (projects.length >= organizationProjectsLimit) {
+      setOpenProjectLimitModal(true);
+      return;
+    }
+
+    setOpenCreateProjectModal(true);
+  };
+
+  const projectLimitModalButtons = (): [ModalButton, ModalButton] => {
+    if (isFormbricksCloud) {
+      return [
+        {
+          text: t("environments.settings.billing.upgrade"),
+          href: `/environments/${environment.id}/settings/billing`,
+        },
+        {
+          text: t("common.cancel"),
+          onClick: () => setOpenProjectLimitModal(false),
+        },
+      ];
+    }
+
+    return [
+      {
+        text: t("environments.settings.billing.upgrade"),
+        href: isLicenseActive
+          ? `/environments/${environment.id}/settings/enterprise`
+          : "https://formbricks.com/upgrade-self-hosted-license",
+      },
+      {
+        text: t("common.cancel"),
+        onClick: () => setOpenProjectLimitModal(false),
+      },
+    ];
+  };
+
+  const switcherTriggerClasses = cn(
+    "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",
+    isCollapsed ? "flex items-center justify-center" : ""
+  );
+
+  const switcherIconClasses =
+    "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-slate-100 text-slate-600";
+  const isInitialProjectsLoading = isWorkspaceDropdownOpen && !hasInitializedProjects && !workspaceLoadError;
 
   return (
     <>
@@ -188,7 +511,7 @@ export const MainNavigation = ({
                 size="icon"
                 onClick={toggleSidebar}
                 className={cn(
-                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:ring-0 focus:ring-transparent focus:outline-none"
+                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:outline-none focus:ring-0 focus:ring-transparent"
                 )}>
                 {isCollapsed ? (
                   <PanelLeftOpenIcon strokeWidth={1.5} />
@@ -199,24 +522,24 @@ export const MainNavigation = ({
             </div>
 
             {/* Main Nav Switch */}
-            {!isBilling && (
-              <ul>
-                {mainNavigation.map(
-                  (item) =>
-                    !item.isHidden && (
-                      <NavigationLink
-                        key={item.name}
-                        href={item.href}
-                        isActive={item.isActive}
-                        isCollapsed={isCollapsed}
-                        isTextVisible={isTextVisible}
-                        linkText={item.name}>
-                        <item.icon strokeWidth={1.5} />
-                      </NavigationLink>
-                    )
-                )}
-              </ul>
-            )}
+            <ul>
+              {mainNavigation.map(
+                (item) =>
+                  !item.isHidden && (
+                    <NavigationLink
+                      key={item.name}
+                      href={item.href}
+                      isActive={item.isActive}
+                      isCollapsed={isCollapsed}
+                      isTextVisible={isTextVisible}
+                      disabled={item.disabled}
+                      disabledMessage={item.disabled ? disabledNavigationMessage : undefined}
+                      linkText={item.name}>
+                      <item.icon strokeWidth={1.5} />
+                    </NavigationLink>
+                  )
+              )}
+            </ul>
           </div>
 
           <div>
@@ -233,38 +556,217 @@ export const MainNavigation = ({
               </Link>
             )}
 
-            {/* User Switch */}
-            <div className="flex items-center">
+            {/* Trial Days Remaining */}
+            {!isCollapsed && isFormbricksCloud && trialDaysRemaining !== null && (
+              <Link href={`/environments/${environment.id}/settings/billing`} className="m-2 block">
+                <TrialAlert trialDaysRemaining={trialDaysRemaining} size="small" />
+              </Link>
+            )}
+
+            <div className="flex flex-col">
+              <DropdownMenu onOpenChange={setIsWorkspaceDropdownOpen}>
+                <DropdownMenuTrigger asChild id="workspaceDropdownTrigger" className={switcherTriggerClasses}>
+                  <button
+                    type="button"
+                    aria-label={isCollapsed ? t("common.change_workspace") : undefined}
+                    className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
+                    <span className={switcherIconClasses}>
+                      <FoldersIcon className="h-4 w-4" strokeWidth={1.5} />
+                    </span>
+                    {!isCollapsed && !isTextVisible && (
+                      <>
+                        <div className="grow overflow-hidden">
+                          <p className="truncate text-sm font-bold text-slate-700">{project.name}</p>
+                          <p className="text-sm text-slate-500">{t("common.workspace")}</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">
+                    <FoldersIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                    {t("common.change_workspace")}
+                  </div>
+                  {(isLoadingProjects || isInitialProjectsLoading) && (
+                    <div className="flex items-center justify-center py-2">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    </div>
+                  )}
+                  {!isLoadingProjects &&
+                    !isInitialProjectsLoading &&
+                    workspaceLoadError &&
+                    renderSwitcherError(
+                      workspaceLoadError,
+                      () => {
+                        setWorkspaceLoadError(null);
+                        setProjects([]);
+                      },
+                      t("common.try_again")
+                    )}
+                  {!isLoadingProjects && !isInitialProjectsLoading && !workspaceLoadError && (
+                    <>
+                      <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
+                        {projects.map((proj) => (
+                          <DropdownMenuCheckboxItem
+                            key={proj.id}
+                            checked={proj.id === project.id}
+                            onClick={() => handleProjectChange(proj.id)}
+                            className="cursor-pointer">
+                            {proj.name}
+                          </DropdownMenuCheckboxItem>
+                        ))}
+                      </DropdownMenuGroup>
+                      {isOwnerOrManager && (
+                        <DropdownMenuCheckboxItem
+                          onClick={handleProjectCreate}
+                          className="w-full cursor-pointer justify-between">
+                          <span>{t("common.add_new_workspace")}</span>
+                          <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                        </DropdownMenuCheckboxItem>
+                      )}
+                    </>
+                  )}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                      <Cog className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                      {t("common.workspace_configuration")}
+                    </div>
+                    {projectSettings.map((setting) => (
+                      <DropdownMenuCheckboxItem
+                        key={setting.id}
+                        checked={isActiveProjectSetting(pathname, setting.id)}
+                        onClick={() => handleSettingNavigation(setting.href)}
+                        className="cursor-pointer">
+                        {setting.label}
+                      </DropdownMenuCheckboxItem>
+                    ))}
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
+              <DropdownMenu onOpenChange={setIsOrganizationDropdownOpen}>
+                <DropdownMenuTrigger
+                  asChild
+                  id="organizationDropdownTriggerSidebar"
+                  className={switcherTriggerClasses}>
+                  <button
+                    type="button"
+                    aria-label={isCollapsed ? t("common.change_organization") : undefined}
+                    className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
+                    <span className={switcherIconClasses}>
+                      <Building2Icon className="h-4 w-4" strokeWidth={1.5} />
+                    </span>
+                    {!isCollapsed && !isTextVisible && (
+                      <>
+                        <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 &&
+                    renderSwitcherError(
+                      organizationLoadError,
+                      () => {
+                        setOrganizationLoadError(null);
+                        setOrganizations([]);
+                      },
+                      t("common.try_again")
+                    )}
+                  {!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>
+                      )}
+                    </>
+                  )}
+                  <DropdownMenuSeparator />
+                  <DropdownMenuGroup>
+                    <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                      <SettingsIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+                      {t("common.organization_settings")}
+                    </div>
+                    {organizationSettings.map((setting) => {
+                      if (setting.hidden) return null;
+                      return (
+                        <DropdownMenuCheckboxItem
+                          key={setting.id}
+                          checked={isActiveOrganizationSetting(pathname, setting.id)}
+                          onClick={() => handleSettingNavigation(setting.href)}
+                          className="cursor-pointer">
+                          {setting.label}
+                        </DropdownMenuCheckboxItem>
+                      );
+                    })}
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
+
               <DropdownMenu>
                 <DropdownMenuTrigger
                   asChild
                   id="userDropdownTrigger"
-                  className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
-                  <div
-                    className={cn(
-                      "flex cursor-pointer flex-row items-center gap-3",
-                      isCollapsed ? "justify-center px-2" : "px-4"
-                    )}>
-                    <ProfileAvatar userId={user.id} />
+                  className={cn(switcherTriggerClasses, "rounded-br-xl")}>
+                  <button
+                    type="button"
+                    aria-label={isCollapsed ? t("common.account_settings") : undefined}
+                    className={cn("flex w-full items-center gap-3", isCollapsed && "justify-center")}>
+                    <span className={switcherIconClasses}>
+                      <ProfileAvatar userId={user.id} />
+                    </span>
                     {!isCollapsed && !isTextVisible && (
                       <>
-                        <div
-                          className={cn(isTextVisible ? "opacity-0" : "opacity-100", "grow overflow-hidden")}>
+                        <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 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 className="text-sm text-slate-700">{t("common.account")}</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} />
                       </>
                     )}
-                  </div>
+                  </button>
                 </DropdownMenuTrigger>
 
                 <DropdownMenuContent
@@ -273,8 +775,6 @@ export const MainNavigation = ({
                   sideOffset={10}
                   alignOffset={5}
                   align="end">
-                  {/* Dropdown Items */}
-
                   {dropdownNavigation.map((link) => (
                     <Link
                       href={link.href}
@@ -288,7 +788,6 @@ export const MainNavigation = ({
                       </DropdownMenuItem>
                     </Link>
                   ))}
-                  {/* Logout */}
                   <DropdownMenuItem
                     onClick={async () => {
                       const loginUrl = `${publicDomain}/auth/login`;
@@ -311,6 +810,28 @@ export const MainNavigation = ({
           </div>
         </aside>
       )}
+      {openProjectLimitModal && (
+        <ProjectLimitModal
+          open={openProjectLimitModal}
+          setOpen={setOpenProjectLimitModal}
+          buttons={projectLimitModalButtons()}
+          projectLimit={organizationProjectsLimit}
+        />
+      )}
+      {openCreateProjectModal && (
+        <CreateProjectModal
+          open={openCreateProjectModal}
+          setOpen={setOpenCreateProjectModal}
+          organizationId={organization.id}
+          isAccessControlAllowed={isAccessControlAllowed}
+        />
+      )}
+      {openCreateOrganizationModal && (
+        <CreateOrganizationModal
+          open={openCreateOrganizationModal}
+          setOpen={setOpenCreateOrganizationModal}
+        />
+      )}
     </>
   );
 };

apps/web/app/(app)/environments/[environmentId]/components/NavigationLink.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import React from "react";
 import { cn } from "@/lib/cn";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 
 interface NavigationLinkProps {
@@ -10,6 +11,8 @@ interface NavigationLinkProps {
   children: React.ReactNode;
   linkText: string;
   isTextVisible: boolean;
+  disabled?: boolean;
+  disabledMessage?: string;
 }
 
 export const NavigationLink = ({
@@ -19,10 +22,34 @@ export const NavigationLink = ({
   children,
   linkText,
   isTextVisible = true,
+  disabled = false,
+  disabledMessage,
 }: NavigationLinkProps) => {
+  const tooltipText = disabled ? disabledMessage || linkText : linkText;
   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 getColorClass = (baseClass: string) => {
+    if (disabled) {
+      return disabledClass;
+    }
+
+    return cn(baseClass, isActive ? activeClass : inactiveClass);
+  };
+
+  const collapsedColorClass = getColorClass("text-slate-700 hover:text-slate-900");
+  const expandedColorClass = getColorClass("text-slate-600 hover:text-slate-900");
+
+  const label = (
+    <span
+      className={cn(
+        "ml-2 flex transition-opacity duration-100",
+        isTextVisible ? "opacity-0" : "opacity-100"
+      )}>
+      {linkText}
+    </span>
+  );
 
   return (
     <>
@@ -30,35 +57,37 @@ export const NavigationLink = ({
         <TooltipProvider delayDuration={0}>
           <Tooltip>
             <TooltipTrigger asChild>
-              <li
-                className={cn(
-                  "mb-1 ml-2 rounded-l-md py-2 pl-2 text-sm text-slate-700 hover:text-slate-900",
-                  isActive ? activeClass : inactiveClass
-                )}>
-                <Link href={href} className="flex items-center">
-                  {children}
-                </Link>
+              <li className={cn("mb-1 ml-2 rounded-l-md py-2 pl-2 text-sm", collapsedColorClass)}>
+                {disabled ? (
+                  <div className="flex items-center">{children}</div>
+                ) : (
+                  <Link href={href}>{children}</Link>
+                )}
               </li>
             </TooltipTrigger>
-            <TooltipContent side="right">{linkText}</TooltipContent>
+            <TooltipContent side="right">{tooltipText}</TooltipContent>
           </Tooltip>
         </TooltipProvider>
       ) : (
-        <li
-          className={cn(
-            "mb-1 rounded-l-md py-2 pl-5 text-sm text-slate-600 hover:text-slate-900",
-            isActive ? activeClass : inactiveClass
-          )}>
-          <Link href={href} className="flex items-center">
-            {children}
-            <span
-              className={cn(
-                "ml-2 flex transition-opacity duration-100",
-                isTextVisible ? "opacity-0" : "opacity-100"
-              )}>
-              {linkText}
-            </span>
-          </Link>
+        <li className={cn("mb-1 rounded-l-md py-2 pl-5 text-sm", expandedColorClass)}>
+          {disabled ? (
+            <Popover>
+              <PopoverTrigger asChild>
+                <div className="flex items-center">
+                  {children}
+                  {label}
+                </div>
+              </PopoverTrigger>
+              <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+                {disabledMessage || linkText}
+              </PopoverContent>
+            </Popover>
+          ) : (
+            <Link href={href} className="flex items-center">
+              {children}
+              {label}
+            </Link>
+          )}
         </li>
       )}
     </>

apps/web/app/(app)/environments/[environmentId]/components/TopControlBar.tsx

@@ -31,7 +31,8 @@ export const TopControlBar = ({
   isAccessControlAllowed,
   membershipRole,
 }: TopControlBarProps) => {
-  const { isMember } = getAccessFlags(membershipRole);
+  const { isMember, isBilling } = getAccessFlags(membershipRole);
+  const isMembershipPending = membershipRole === undefined;
   const { environment } = useEnvironment();
 
   return (
@@ -49,6 +50,8 @@ export const TopControlBar = ({
         isLicenseActive={isLicenseActive}
         isOwnerOrManager={isOwnerOrManager}
         isMember={isMember}
+        isBilling={isBilling}
+        isMembershipPending={isMembershipPending}
         isAccessControlAllowed={isAccessControlAllowed}
       />
     </div>

apps/web/app/(app)/environments/[environmentId]/components/WidgetStatusIndicator.tsx

@@ -53,7 +53,7 @@ export const WidgetStatusIndicator = ({ environment }: WidgetStatusIndicatorProp
         <currentStatus.icon />
       </div>
       <p className="text-md font-bold text-slate-800 md:text-xl">{currentStatus.title}</p>
-      <p className="w-2/3 text-sm text-balance text-slate-600">{currentStatus.subtitle}</p>
+      <p className="w-2/3 text-balance text-sm text-slate-600">{currentStatus.subtitle}</p>
       {status === "notImplemented" && (
         <Button variant="outline" size="sm" className="bg-white" onClick={() => router.refresh()}>
           <RotateCcwIcon />

apps/web/app/(app)/environments/[environmentId]/components/organization-breadcrumb.tsx

@@ -25,6 +25,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
 import { useOrganization } from "../context/environment-context";
 
 interface OrganizationBreadcrumbProps {
@@ -35,6 +36,7 @@ interface OrganizationBreadcrumbProps {
   isFormbricksCloud: boolean;
   isMember: boolean;
   isOwnerOrManager: boolean;
+  isMembershipPending: boolean;
 }
 
 const isActiveOrganizationSetting = (pathname: string, settingId: string): boolean => {
@@ -56,6 +58,7 @@ export const OrganizationBreadcrumb = ({
   isFormbricksCloud,
   isMember,
   isOwnerOrManager,
+  isMembershipPending,
 }: OrganizationBreadcrumbProps) => {
   const { t } = useTranslation();
   const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
@@ -111,8 +114,12 @@ export const OrganizationBreadcrumb = ({
   }
 
   const handleOrganizationChange = (organizationId: string) => {
-    if (organizationId === currentOrganizationId) return;
     startTransition(() => {
+      setIsOrganizationDropdownOpen(false);
+      if (organizationId === currentOrganizationId && currentEnvironmentId) {
+        router.push(`/environments/${currentEnvironmentId}/settings/general`);
+        return;
+      }
       router.push(`/organizations/${organizationId}/`);
     });
   };
@@ -142,7 +149,10 @@ export const OrganizationBreadcrumb = ({
       id: "api-keys",
       label: t("common.api_keys"),
       href: `/environments/${currentEnvironmentId}/settings/api-keys`,
-      hidden: !isOwnerOrManager,
+      disabled: isMembershipPending || !isOwnerOrManager,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
     },
     {
       id: "domain",
@@ -160,7 +170,11 @@ export const OrganizationBreadcrumb = ({
       id: "enterprise",
       label: t("common.enterprise_license"),
       href: `/environments/${currentEnvironmentId}/settings/enterprise`,
-      hidden: isFormbricksCloud || isMember,
+      hidden: isFormbricksCloud,
+      disabled: isMembershipPending || isMember,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
     },
   ];
 
@@ -242,14 +256,30 @@ export const OrganizationBreadcrumb = ({
 
               {organizationSettings.map((setting) => {
                 return setting.hidden ? null : (
-                  <DropdownMenuCheckboxItem
-                    key={setting.id}
-                    checked={isActiveOrganizationSetting(pathname, setting.id)}
-                    hidden={setting.hidden}
-                    onClick={() => handleSettingChange(setting.href)}
-                    className="cursor-pointer">
-                    {setting.label}
-                  </DropdownMenuCheckboxItem>
+                  <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>

apps/web/app/(app)/environments/[environmentId]/components/project-and-org-switch.tsx

@@ -18,6 +18,8 @@ interface ProjectAndOrgSwitchProps {
   isLicenseActive: boolean;
   isOwnerOrManager: boolean;
   isMember: boolean;
+  isBilling: boolean;
+  isMembershipPending: boolean;
   isAccessControlAllowed: boolean;
 }
 
@@ -35,6 +37,8 @@ export const ProjectAndOrgSwitch = ({
   isOwnerOrManager,
   isAccessControlAllowed,
   isMember,
+  isBilling,
+  isMembershipPending,
 }: ProjectAndOrgSwitchProps) => {
   const currentEnvironment = environments.find((env) => env.id === currentEnvironmentId);
   const showEnvironmentBreadcrumb = currentEnvironment?.type === "development";
@@ -50,6 +54,7 @@ export const ProjectAndOrgSwitch = ({
           isFormbricksCloud={isFormbricksCloud}
           isMember={isMember}
           isOwnerOrManager={isOwnerOrManager}
+          isMembershipPending={isMembershipPending}
         />
         {currentProjectId && currentEnvironmentId && (
           <ProjectBreadcrumb
@@ -63,6 +68,8 @@ export const ProjectAndOrgSwitch = ({
             isLicenseActive={isLicenseActive}
             isAccessControlAllowed={isAccessControlAllowed}
             isEnvironmentBreadcrumbVisible={showEnvironmentBreadcrumb}
+            isBilling={isBilling}
+            isMembershipPending={isMembershipPending}
           />
         )}
         {showEnvironmentBreadcrumb && (

apps/web/app/(app)/environments/[environmentId]/components/project-breadcrumb.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as Sentry from "@sentry/nextjs";
-import { ChevronDownIcon, ChevronRightIcon, CogIcon, HotelIcon, Loader2, PlusIcon } from "lucide-react";
+import { ChevronDownIcon, ChevronRightIcon, CogIcon, FoldersIcon, Loader2, PlusIcon } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
@@ -19,6 +19,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
 import { ModalButton } from "@/modules/ui/components/upgrade-prompt";
 import { useProject } from "../context/environment-context";
 
@@ -33,6 +34,8 @@ interface ProjectBreadcrumbProps {
   currentEnvironmentId: string;
   isAccessControlAllowed: boolean;
   isEnvironmentBreadcrumbVisible: boolean;
+  isBilling: boolean;
+  isMembershipPending: boolean;
 }
 
 const isActiveProjectSetting = (pathname: string, settingId: string): boolean => {
@@ -56,6 +59,8 @@ export const ProjectBreadcrumb = ({
   currentEnvironmentId,
   isAccessControlAllowed,
   isEnvironmentBreadcrumbVisible,
+  isBilling,
+  isMembershipPending,
 }: ProjectBreadcrumbProps) => {
   const { t } = useTranslation();
   const [isProjectDropdownOpen, setIsProjectDropdownOpen] = useState(false);
@@ -134,6 +139,10 @@ export const ProjectBreadcrumb = ({
       href: `/environments/${currentEnvironmentId}/workspace/tags`,
     },
   ];
+  const areProjectSettingsDisabled = isMembershipPending || isBilling;
+  const projectSettingsDisabledMessage = isMembershipPending
+    ? t("common.loading")
+    : t("common.you_are_not_authorized_to_perform_this_action");
 
   if (!currentProject) {
     const errorMessage = `Workspace not found for workspace id: ${currentProjectId}`;
@@ -143,9 +152,13 @@ export const ProjectBreadcrumb = ({
   }
 
   const handleProjectChange = (projectId: string) => {
-    if (projectId === currentProjectId) return;
+    const targetPath =
+      projectId === currentProjectId
+        ? `/environments/${currentEnvironmentId}/surveys`
+        : `/workspaces/${projectId}/`;
     startTransition(() => {
-      router.push(`/workspaces/${projectId}/`);
+      setIsProjectDropdownOpen(false);
+      router.push(targetPath);
     });
   };
 
@@ -198,7 +211,7 @@ export const ProjectBreadcrumb = ({
           id="projectDropdownTrigger"
           asChild>
           <div className="flex items-center gap-1">
-            <HotelIcon className="h-3 w-3" strokeWidth={1.5} />
+            <FoldersIcon className="h-3 w-3" strokeWidth={1.5} />
             <span>{projectName}</span>
             {isPending && <Loader2 className="h-3 w-3 animate-spin" strokeWidth={1.5} />}
             {isEnvironmentBreadcrumbVisible && !isProjectDropdownOpen ? (
@@ -211,7 +224,7 @@ export const ProjectBreadcrumb = ({
 
         <DropdownMenuContent align="start" className="mt-2">
           <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
-            <HotelIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+            <FoldersIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
             {t("common.choose_workspace")}
           </div>
           {isLoadingProjects && (
@@ -247,7 +260,24 @@ export const ProjectBreadcrumb = ({
                   </DropdownMenuCheckboxItem>
                 ))}
               </DropdownMenuGroup>
-              {isOwnerOrManager && (
+              {isMembershipPending || !isOwnerOrManager ? (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      aria-disabled="true"
+                      className="relative flex w-full cursor-not-allowed select-none items-center justify-between rounded-lg py-1.5 pl-8 pr-2 text-sm font-medium text-slate-400">
+                      <span>{t("common.add_new_workspace")}</span>
+                      <PlusIcon className="ml-2 h-4 w-4" strokeWidth={1.5} />
+                    </button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-fit max-w-72 px-3 py-2 text-sm text-slate-700">
+                    {isMembershipPending
+                      ? t("common.loading")
+                      : t("common.you_are_not_authorized_to_perform_this_action")}
+                  </PopoverContent>
+                </Popover>
+              ) : (
                 <DropdownMenuCheckboxItem
                   onClick={handleAddProject}
                   className="w-full cursor-pointer justify-between">
@@ -264,13 +294,30 @@ export const ProjectBreadcrumb = ({
               {t("common.workspace_configuration")}
             </div>
             {projectSettings.map((setting) => (
-              <DropdownMenuCheckboxItem
-                key={setting.id}
-                checked={isActiveProjectSetting(pathname, setting.id)}
-                onClick={() => handleProjectSettingsNavigation(setting.id)}
-                className="cursor-pointer">
-                {setting.label}
-              </DropdownMenuCheckboxItem>
+              <div key={setting.id}>
+                {areProjectSettingsDisabled ? (
+                  <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">
+                      {projectSettingsDisabledMessage}
+                    </PopoverContent>
+                  </Popover>
+                ) : (
+                  <DropdownMenuCheckboxItem
+                    checked={isActiveProjectSetting(pathname, setting.id)}
+                    onClick={() => handleProjectSettingsNavigation(setting.id)}
+                    className="cursor-pointer">
+                    {setting.label}
+                  </DropdownMenuCheckboxItem>
+                )}
+              </div>
             ))}
           </DropdownMenuGroup>
         </DropdownMenuContent>

apps/web/app/(app)/environments/[environmentId]/page.tsx

@@ -1,10 +1,11 @@
 import { redirect } from "next/navigation";
 import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getBillingFallbackPath } from "@/lib/membership/navigation";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getAccessFlags } from "@/lib/membership/utils";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 
-const EnvironmentPage = async (props) => {
+const EnvironmentPage = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
   const { session, organization } = await getEnvironmentAuth(params.environmentId);
 
@@ -12,11 +13,7 @@ const EnvironmentPage = async (props) => {
   const { isBilling } = getAccessFlags(currentUserMembership?.role);
 
   if (isBilling) {
-    if (IS_FORMBRICKS_CLOUD) {
-      return redirect(`/environments/${params.environmentId}/settings/billing`);
-    } else {
-      return redirect(`/environments/${params.environmentId}/settings/enterprise`);
-    }
+    return redirect(getBillingFallbackPath(params.environmentId, IS_FORMBRICKS_CLOUD));
   }
 
   return redirect(`/environments/${params.environmentId}/surveys`);

apps/web/app/(app)/environments/[environmentId]/settings/(account)/layout.tsx

@@ -1,10 +1,14 @@
 import { getServerSession } from "next-auth";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
 import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
-const AccountSettingsLayout = async (props) => {
+const AccountSettingsLayout = async (props: {
+  params: Promise<{ environmentId: string }>;
+  children: React.ReactNode;
+}) => {
   const params = await props.params;
 
   const { children } = props;
@@ -17,15 +21,15 @@ const AccountSettingsLayout = async (props) => {
   ]);
 
   if (!organization) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), null);
   }
 
   if (!project) {
-    throw new Error(t("common.workspace_not_found"));
+    throw new ResourceNotFoundError(t("common.workspace"), null);
   }
 
   if (!session) {
-    throw new Error(t("common.session_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   return <>{children}</>;

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/actions.ts

@@ -4,7 +4,6 @@ import { z } from "zod";
 import { ZUserNotificationSettings } from "@formbricks/types/user";
 import { getUser, updateUser } from "@/lib/user/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
-import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
 
 const ZUpdateNotificationSettingsAction = z.object({
@@ -12,26 +11,16 @@ const ZUpdateNotificationSettingsAction = z.object({
 });
 
 export const updateNotificationSettingsAction = authenticatedActionClient
-  .schema(ZUpdateNotificationSettingsAction)
+  .inputSchema(ZUpdateNotificationSettingsAction)
   .action(
-    withAuditLogging(
-      "updated",
-      "user",
-      async ({
-        ctx,
-        parsedInput,
-      }: {
-        ctx: AuthenticatedActionClientCtx;
-        parsedInput: Record<string, any>;
-      }) => {
-        const oldObject = await getUser(ctx.user.id);
-        const result = await updateUser(ctx.user.id, {
-          notificationSettings: parsedInput.notificationSettings,
-        });
-        ctx.auditLoggingCtx.userId = ctx.user.id;
-        ctx.auditLoggingCtx.oldObject = oldObject;
-        ctx.auditLoggingCtx.newObject = result;
-        return result;
-      }
-    )
+    withAuditLogging("updated", "user", async ({ ctx, parsedInput }) => {
+      const oldObject = await getUser(ctx.user.id);
+      const result = await updateUser(ctx.user.id, {
+        notificationSettings: parsedInput.notificationSettings,
+      });
+      ctx.auditLoggingCtx.userId = ctx.user.id;
+      ctx.auditLoggingCtx.oldObject = oldObject;
+      ctx.auditLoggingCtx.newObject = result;
+      return result;
+    })
   );

apps/web/app/(app)/environments/[environmentId]/settings/(account)/notifications/page.tsx

@@ -1,5 +1,6 @@
 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)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
@@ -16,8 +17,8 @@ const setCompleteNotificationSettings = (
   notificationSettings: TUserNotificationSettings,
   memberships: Membership[]
 ): TUserNotificationSettings => {
-  const newNotificationSettings = {
-    alert: {},
+  const newNotificationSettings: TUserNotificationSettings = {
+    alert: {} as Record<string, boolean>,
     unsubscribedOrganizationIds: notificationSettings.unsubscribedOrganizationIds || [],
   };
   for (const membership of memberships) {
@@ -26,7 +27,8 @@ const setCompleteNotificationSettings = (
       for (const environment of project.environments) {
         for (const survey of environment.surveys) {
           newNotificationSettings.alert[survey.id] =
-            notificationSettings[survey.id]?.responseFinished ||
+            (notificationSettings as unknown as Record<string, Record<string, boolean>>)[survey.id]
+              ?.responseFinished ||
             (notificationSettings.alert && notificationSettings.alert[survey.id]) ||
             false; // check for legacy notification settings w/o "alerts" key
         }
@@ -136,24 +138,27 @@ const getMemberships = async (userId: string): Promise<Membership[]> => {
   return memberships;
 };
 
-const Page = async (props) => {
+const Page = async (props: {
+  params: Promise<{ environmentId: string }>;
+  searchParams: Promise<Record<string, string>>;
+}) => {
   const searchParams = await props.searchParams;
   const params = await props.params;
   const t = await getTranslate();
   const session = await getServerSession(authOptions);
   if (!session) {
-    throw new Error(t("common.session_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
   const autoDisableNotificationType = searchParams["type"];
   const autoDisableNotificationElementId = searchParams["elementId"];
 
   const [user, memberships] = await Promise.all([getUser(session.user.id), getMemberships(session.user.id)]);
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   if (!memberships) {
-    throw new Error(t("common.membership_not_found"));
+    throw new ResourceNotFoundError(t("common.membership"), null);
   }
 
   if (user?.notificationSettings) {

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/actions.ts

@@ -6,21 +6,20 @@ import {
   TUserUpdateInput,
   ZUserPersonalInfoUpdateInput,
 } from "@formbricks/types/user";
-import {
-  getIsEmailUnique,
-  verifyUserPassword,
-} from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user";
-import { EMAIL_VERIFICATION_DISABLED } from "@/lib/constants";
+import { getIsEmailUnique } from "@/app/(app)/environments/[environmentId]/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";
+import { requestPasswordReset } from "@/modules/auth/forgot-password/lib/password-reset-service";
 import { updateBrevoCustomer } from "@/modules/auth/lib/brevo";
 import { applyRateLimit } from "@/modules/core/rate-limit/helpers";
 import { rateLimitConfigs } from "@/modules/core/rate-limit/rate-limit-configs";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
-import { sendForgotPasswordEmail, sendVerificationNewEmail } from "@/modules/email";
+import { sendVerificationNewEmail } from "@/modules/email";
 
-function buildUserUpdatePayload(parsedInput: any): TUserUpdateInput {
+function buildUserUpdatePayload(parsedInput: TUserPersonalInfoUpdateInput): TUserUpdateInput {
   return {
     ...(parsedInput.name && { name: parsedInput.name }),
     ...(parsedInput.locale && { locale: parsedInput.locale }),
@@ -63,50 +62,40 @@ async function handleEmailUpdate({
   return payload;
 }
 
-export const updateUserAction = authenticatedActionClient.schema(ZUserPersonalInfoUpdateInput).action(
-  withAuditLogging(
-    "updated",
-    "user",
-    async ({
-      ctx,
-      parsedInput,
-    }: {
-      ctx: AuthenticatedActionClientCtx;
-      parsedInput: TUserPersonalInfoUpdateInput;
-    }) => {
-      const oldObject = await getUser(ctx.user.id);
-      let payload = buildUserUpdatePayload(parsedInput);
-      payload = await handleEmailUpdate({ ctx, parsedInput, payload });
+export const updateUserAction = authenticatedActionClient.inputSchema(ZUserPersonalInfoUpdateInput).action(
+  withAuditLogging("updated", "user", async ({ ctx, parsedInput }) => {
+    const oldObject = await getUser(ctx.user.id);
+    let payload = buildUserUpdatePayload(parsedInput);
+    payload = await handleEmailUpdate({ ctx, parsedInput, payload });
 
-      // Only proceed with updateUser if we have actual changes to make
-      let newObject = oldObject;
-      if (Object.keys(payload).length > 0) {
-        newObject = await updateUser(ctx.user.id, payload);
-      }
-
-      ctx.auditLoggingCtx.userId = ctx.user.id;
-      ctx.auditLoggingCtx.oldObject = oldObject;
-      ctx.auditLoggingCtx.newObject = newObject;
-
-      return true;
+    // Only proceed with updateUser if we have actual changes to make
+    let newObject = oldObject;
+    if (Object.keys(payload).length > 0) {
+      newObject = await updateUser(ctx.user.id, payload);
     }
-  )
+
+    ctx.auditLoggingCtx.userId = ctx.user.id;
+    ctx.auditLoggingCtx.oldObject = oldObject;
+    ctx.auditLoggingCtx.newObject = newObject;
+
+    return true;
+  })
 );
 
 export const resetPasswordAction = authenticatedActionClient.action(
-  withAuditLogging(
-    "passwordReset",
-    "user",
-    async ({ ctx }: { ctx: AuthenticatedActionClientCtx; parsedInput: undefined }) => {
-      if (ctx.user.identityProvider !== "email") {
-        throw new OperationNotAllowedError("Password reset is not allowed for this user.");
-      }
-
-      await sendForgotPasswordEmail(ctx.user);
-
-      ctx.auditLoggingCtx.userId = ctx.user.id;
-
-      return { success: true };
+  withAuditLogging("passwordReset", "user", async ({ ctx }) => {
+    if (PASSWORD_RESET_DISABLED) {
+      throw new OperationNotAllowedError("Password reset is disabled");
     }
-  )
+
+    if (ctx.user.identityProvider !== "email") {
+      throw new OperationNotAllowedError("Password reset is not allowed for this user.");
+    }
+
+    await requestPasswordReset(ctx.user, "profile");
+
+    ctx.auditLoggingCtx.userId = ctx.user.id;
+
+    return { success: true };
+  })
 );

apps/web/app/(app)/environments/[environmentId]/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";
 
+type TDeleteAccountProps = {
+  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<TDeleteAccountProps>) => {
   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("environments.settings.profile.google_sso_account_deletion_requires_setup"), {
+        id: "account-deletion-sso-reauth-error",
+      });
+    } else {
+      toast.error(t("environments.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)/environments/[environmentId]/settings/(account)/profile/components/EditProfileDetailsForm.tsx

@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 import { z } from "zod";
 import { TUser, TUserUpdateInput, ZUser, ZUserEmail } from "@formbricks/types/user";
 import { PasswordConfirmationModal } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/password-confirmation-modal";
-import { appLanguages } from "@/lib/i18n/utils";
+import { appLanguages, sortedAppLanguages } from "@/lib/i18n/utils";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { useSignOut } from "@/modules/auth/hooks/use-sign-out";
 import { Button } from "@/modules/ui/components/button";
@@ -116,10 +116,14 @@ export const EditProfileDetailsForm = ({
       setShowModal(true);
     } else {
       try {
-        await updateUserAction({
+        const result = await updateUserAction({
           ...data,
           name: data.name.trim(),
         });
+        if (result?.serverError) {
+          toast.error(getFormattedErrorMessage(result));
+          return;
+        }
         toast.success(t("environments.settings.profile.profile_updated_successfully"));
         window.location.reload();
         form.reset(data);
@@ -198,41 +202,54 @@ export const EditProfileDetailsForm = ({
           <FormField
             control={form.control}
             name="locale"
-            render={({ field }) => (
-              <FormItem className="mt-4">
-                <FormLabel>{t("common.language")}</FormLabel>
-                <FormControl>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        className="h-10 w-full border border-slate-300 px-3 text-left">
-                        <div className="flex w-full items-center justify-between">
-                          {appLanguages.find((l) => l.code === field.value)?.label["en-US"] ?? "NA"}
-                          <ChevronDownIcon className="h-4 w-4 text-slate-500" />
-                        </div>
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent
-                      className="min-w-[var(--radix-dropdown-menu-trigger-width)] bg-white text-slate-700"
-                      align="start">
-                      <DropdownMenuRadioGroup value={field.value} onValueChange={field.onChange}>
-                        {appLanguages.map((lang) => (
-                          <DropdownMenuRadioItem
-                            key={lang.code}
-                            value={lang.code}
-                            className="min-h-8 cursor-pointer">
-                            {lang.label["en-US"]}
-                          </DropdownMenuRadioItem>
-                        ))}
-                      </DropdownMenuRadioGroup>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </FormControl>
-                <FormError />
-              </FormItem>
-            )}
+            render={({ field }) => {
+              const selectedLanguage = appLanguages.find((l) => l.code === field.value);
+
+              return (
+                <FormItem className="mt-4">
+                  <FormLabel>{t("common.language")}</FormLabel>
+                  <FormControl>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          className="h-10 w-full border border-slate-300 px-3 text-left">
+                          <div className="flex w-full items-center justify-between">
+                            {selectedLanguage ? (
+                              <>
+                                {selectedLanguage.label["en-US"]}
+                                {selectedLanguage.label.native !== selectedLanguage.label["en-US"] &&
+                                  ` (${selectedLanguage.label.native})`}
+                              </>
+                            ) : (
+                              t("common.select")
+                            )}
+                            <ChevronDownIcon className="h-4 w-4 text-slate-500" />
+                          </div>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent
+                        className="min-w-[var(--radix-dropdown-menu-trigger-width)] bg-white text-slate-700"
+                        align="start">
+                        <DropdownMenuRadioGroup value={field.value} onValueChange={field.onChange}>
+                          {sortedAppLanguages.map((lang) => (
+                            <DropdownMenuRadioItem
+                              key={lang.code}
+                              value={lang.code}
+                              className="min-h-8 cursor-pointer">
+                              {lang.label["en-US"]}
+                              {lang.label.native !== lang.label["en-US"] && ` (${lang.label.native})`}
+                            </DropdownMenuRadioItem>
+                          ))}
+                        </DropdownMenuRadioGroup>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </FormControl>
+                  <FormError />
+                </FormItem>
+              );
+            }}
           />
 
           {isPasswordResetEnabled && (

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/components/password-confirmation-modal.tsx

@@ -98,7 +98,7 @@ export const PasswordConfirmationModal = ({
                             aria-label="password"
                             aria-required="true"
                             required
-                            className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
+                            className="block w-full rounded-md border-slate-300 shadow-sm focus:border-brand-dark focus:ring-brand-dark sm:text-sm"
                             value={field.value}
                             onChange={(password) => field.onChange(password)}
                           />

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

@@ -1,12 +1,6 @@
 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(),
-}));
+import { getIsEmailUnique } from "./user";
 
 vi.mock("@formbricks/database", () => ({
   prisma: {
@@ -17,92 +11,12 @@ vi.mock("@formbricks/database", () => ({
 }));
 
 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";
 

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user.ts

@@ -1,42 +1,5 @@
-import { User } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
-import { InvalidInputError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { verifyPassword } from "@/modules/auth/lib/utils";
-
-export const getUserById = reactCache(
-  async (userId: string): Promise<Pick<User, "password" | "identityProvider">> => {
-    const user = await prisma.user.findUnique({
-      where: {
-        id: userId,
-      },
-      select: {
-        password: true,
-        identityProvider: true,
-      },
-    });
-    if (!user) {
-      throw new ResourceNotFoundError("user", userId);
-    }
-    return user;
-  }
-);
-
-export const verifyUserPassword = async (userId: string, password: string): Promise<boolean> => {
-  const user = await getUserById(userId);
-
-  if (user.identityProvider !== "email" || !user.password) {
-    throw new InvalidInputError("Password is not set for this user");
-  }
-
-  const isCorrectPassword = await verifyPassword(password, user.password);
-
-  if (!isCorrectPassword) {
-    return false;
-  }
-
-  return true;
-};
 
 export const getIsEmailUnique = reactCache(async (email: string): Promise<boolean> => {
   const user = await prisma.user.findUnique({

apps/web/app/(app)/environments/[environmentId]/settings/(account)/profile/page.tsx

@@ -1,9 +1,11 @@
+import { AuthenticationError } from "@formbricks/types/errors";
 import { AccountSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(account)/components/AccountSettingsNavbar";
 import { AccountSecurity } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/AccountSecurity";
 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 { getAccountDeletionAuthRequirements } from "@/modules/account/lib/account-deletion-auth";
 import { getIsMultiOrgEnabled, getIsTwoFactorAuthEnabled } from "@/modules/ee/license-check/lib/utils";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { IdBadge } from "@/modules/ui/components/id-badge";
@@ -14,10 +16,14 @@ import { SettingsCard } from "../../components/SettingsCard";
 import { DeleteAccount } from "./components/DeleteAccount";
 import { EditProfileDetailsForm } from "./components/EditProfileDetailsForm";
 
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+const Page = async (props: {
+  params: Promise<{ environmentId: 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 { environmentId } = params;
 
@@ -28,9 +34,10 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const user = session?.user ? await getUser(session.user.id) : null;
 
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
+  const accountDeletionAuthRequirements = await getAccountDeletionAuthRequirements(user.id);
   const isPasswordResetEnabled = !PASSWORD_RESET_DISABLED && user.identityProvider === "email";
 
   return (
@@ -60,7 +67,7 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
                   buttons={[
                     {
                       text: IS_FORMBRICKS_CLOUD
-                        ? t("common.start_free_trial")
+                        ? t("common.upgrade_plan")
                         : t("common.request_trial_license"),
                       href: IS_FORMBRICKS_CLOUD
                         ? `/environments/${params.environmentId}/settings/billing`
@@ -89,6 +96,8 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
               user={user}
               organizationsWithSingleOwner={organizationsWithSingleOwner}
               isMultiOrgEnabled={isMultiOrgEnabled}
+              accountDeletionError={searchParams.accountDeletionError}
+              requiresPasswordConfirmation={accountDeletionAuthRequirements.requiresPasswordConfirmation}
             />
           </SettingsCard>
           <IdBadge id={user.id} label={t("common.profile_id")} variant="column" />

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar.tsx

@@ -22,8 +22,9 @@ export const OrganizationSettingsNavbar = ({
   loading,
 }: OrganizationSettingsNavbarProps) => {
   const pathname = usePathname();
-  const { isMember, isOwner } = getAccessFlags(membershipRole);
-  const isPricingDisabled = isMember;
+  const { isMember, isOwner, isManager } = getAccessFlags(membershipRole);
+  const isOwnerOrManager = isOwner || isManager;
+  const isMembershipPending = membershipRole === undefined || loading;
   const { t } = useTranslation();
 
   const navigation = [
@@ -45,7 +46,10 @@ export const OrganizationSettingsNavbar = ({
       label: t("common.api_keys"),
       href: `/environments/${environmentId}/settings/api-keys`,
       current: pathname?.includes("/api-keys"),
-      hidden: !isOwner,
+      disabled: isMembershipPending || !isOwnerOrManager,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
     },
     {
       id: "domain",
@@ -58,14 +62,18 @@ export const OrganizationSettingsNavbar = ({
       id: "billing",
       label: t("common.billing"),
       href: `/environments/${environmentId}/settings/billing`,
-      hidden: !isFormbricksCloud || loading,
+      hidden: !isFormbricksCloud,
       current: pathname?.includes("/billing"),
     },
     {
       id: "enterprise",
       label: t("common.enterprise_license"),
       href: `/environments/${environmentId}/settings/enterprise`,
-      hidden: isFormbricksCloud || isPricingDisabled,
+      hidden: isFormbricksCloud,
+      disabled: isMembershipPending || isMember,
+      disabledMessage: isMembershipPending
+        ? t("common.loading")
+        : t("common.you_are_not_authorized_to_perform_this_action"),
       current: pathname?.includes("/enterprise"),
     },
   ];

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/domain/page.tsx

@@ -1,4 +1,5 @@
 import { notFound } from "next/navigation";
+import { AuthenticationError } from "@formbricks/types/errors";
 import { IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED } from "@/lib/constants";
 import { getTranslate } from "@/lingodotdev/server";
 import { getWhiteLabelPermission } from "@/modules/ee/license-check/lib/utils";
@@ -25,10 +26,10 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   );
 
   if (!session) {
-    throw new Error(t("common.session_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
-  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.billing.plan);
+  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.id);
   const isOwnerOrManager = isManager || isOwner;
 
   const surveys = await getSurveysWithSlugsByOrganizationId(organization.id);

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/components/EnterpriseLicenseFeaturesTable.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import type { TFunction } from "i18next";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
+import type { TEnterpriseLicenseFeatures } from "@/modules/ee/license-check/types/enterprise-license";
+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 TFeatureDefinition = {
+  key: TPublicLicenseFeatureKey;
+  labelKey: string;
+  docsUrl: string;
+};
+
+const getFeatureDefinitions = (t: TFunction): TFeatureDefinition[] => {
+  return [
+    {
+      key: "contacts",
+      labelKey: t("environments.settings.enterprise.license_feature_contacts"),
+      docsUrl:
+        "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/contact-management-segments",
+    },
+    {
+      key: "projects",
+      labelKey: t("environments.settings.enterprise.license_feature_projects"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/advanced/license",
+    },
+    {
+      key: "whitelabel",
+      labelKey: t("environments.settings.enterprise.license_feature_whitelabel"),
+      docsUrl:
+        "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/whitelabel-email-follow-ups",
+    },
+    {
+      key: "removeBranding",
+      labelKey: t("environments.settings.enterprise.license_feature_remove_branding"),
+      docsUrl:
+        "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/hide-powered-by-formbricks",
+    },
+    {
+      key: "twoFactorAuth",
+      labelKey: t("environments.settings.enterprise.license_feature_two_factor_auth"),
+      docsUrl: "https://formbricks.com/docs/xm-and-surveys/core-features/user-management/two-factor-auth",
+    },
+    {
+      key: "sso",
+      labelKey: t("environments.settings.enterprise.license_feature_sso"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/oidc-sso",
+    },
+    {
+      key: "saml",
+      labelKey: t("environments.settings.enterprise.license_feature_saml"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/saml-sso",
+    },
+    {
+      key: "spamProtection",
+      labelKey: t("environments.settings.enterprise.license_feature_spam_protection"),
+      docsUrl: "https://formbricks.com/docs/xm-and-surveys/surveys/general-features/spam-protection",
+    },
+    {
+      key: "auditLogs",
+      labelKey: t("environments.settings.enterprise.license_feature_audit_logs"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/audit-logging",
+    },
+    {
+      key: "accessControl",
+      labelKey: t("environments.settings.enterprise.license_feature_access_control"),
+      docsUrl: "https://formbricks.com/docs/self-hosting/advanced/enterprise-features/team-access",
+    },
+    {
+      key: "quotas",
+      labelKey: t("environments.settings.enterprise.license_feature_quotas"),
+      docsUrl: "https://formbricks.com/docs/xm-and-surveys/surveys/general-features/quota-management",
+    },
+  ];
+};
+
+interface EnterpriseLicenseFeaturesTableProps {
+  features: TEnterpriseLicenseFeatures;
+}
+
+export const EnterpriseLicenseFeaturesTable = ({ features }: EnterpriseLicenseFeaturesTableProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <SettingsCard
+      title={t("environments.settings.enterprise.license_features_table_title")}
+      description={t("environments.settings.enterprise.license_features_table_description")}
+      noPadding>
+      <Table>
+        <TableHeader>
+          <TableRow className="hover:bg-white">
+            <TableHead>{t("environments.settings.enterprise.license_features_table_feature")}</TableHead>
+            <TableHead>{t("environments.settings.enterprise.license_features_table_access")}</TableHead>
+            <TableHead>{t("environments.settings.enterprise.license_features_table_value")}</TableHead>
+            <TableHead>{t("common.documentation")}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {getFeatureDefinitions(t).map((feature) => {
+            const value = features[feature.key];
+            const isEnabled = typeof value === "boolean" ? value : value === null || value > 0;
+            let displayValue: number | string = "—";
+
+            if (typeof value === "number") {
+              displayValue = value;
+            } else if (value === null) {
+              displayValue = t("environments.settings.enterprise.license_features_table_unlimited");
+            }
+
+            return (
+              <TableRow key={feature.key} className="hover:bg-white">
+                <TableCell className="font-medium text-slate-900">{t(feature.labelKey)}</TableCell>
+                <TableCell>
+                  <Badge
+                    type={isEnabled ? "success" : "gray"}
+                    size="normal"
+                    text={
+                      isEnabled
+                        ? t("environments.settings.enterprise.license_features_table_enabled")
+                        : t("environments.settings.enterprise.license_features_table_disabled")
+                    }
+                  />
+                </TableCell>
+                <TableCell className="text-slate-600">{displayValue}</TableCell>
+                <TableCell>
+                  <Link
+                    href={feature.docsUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-sm font-medium text-slate-700 underline underline-offset-2 hover:text-slate-900">
+                    {t("common.read_docs")}
+                  </Link>
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+    </SettingsCard>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/components/EnterpriseLicenseStatus.tsx

@@ -6,22 +6,23 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { 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";
 import { Alert, AlertDescription } from "@/modules/ui/components/alert";
 import { Badge } from "@/modules/ui/components/badge";
 import { Button } from "@/modules/ui/components/button";
 import { SettingsCard } from "../../../components/SettingsCard";
 
-type LicenseStatus = "active" | "expired" | "unreachable" | "invalid_license";
-
 interface EnterpriseLicenseStatusProps {
-  status: LicenseStatus;
+  status: TLicenseStatus;
+  lastChecked: Date;
   gracePeriodEnd?: Date;
   environmentId: string;
 }
 
 const getBadgeConfig = (
-  status: LicenseStatus,
+  status: TLicenseStatus,
   t: TFunction
 ): { type: "success" | "error" | "warning" | "gray"; label: string } => {
   switch (status) {
@@ -29,6 +30,11 @@ const getBadgeConfig = (
       return { type: "success", label: t("environments.settings.enterprise.license_status_active") };
     case "expired":
       return { type: "error", label: t("environments.settings.enterprise.license_status_expired") };
+    case "instance_mismatch":
+      return {
+        type: "error",
+        label: t("environments.settings.enterprise.license_status_instance_mismatch"),
+      };
     case "unreachable":
       return { type: "warning", label: t("environments.settings.enterprise.license_status_unreachable") };
     case "invalid_license":
@@ -40,10 +46,12 @@ const getBadgeConfig = (
 
 export const EnterpriseLicenseStatus = ({
   status,
+  lastChecked,
   gracePeriodEnd,
   environmentId,
 }: EnterpriseLicenseStatusProps) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const locale = i18n.resolvedLanguage ?? i18n.language ?? "en-US";
   const router = useRouter();
   const [isRechecking, setIsRechecking] = useState(false);
 
@@ -59,6 +67,8 @@ export const EnterpriseLicenseStatus = ({
       if (result?.data) {
         if (result.data.status === "unreachable") {
           toast.error(t("environments.settings.enterprise.recheck_license_unreachable"));
+        } else if (result.data.status === "instance_mismatch") {
+          toast.error(t("environments.settings.enterprise.recheck_license_instance_mismatch"));
         } else if (result.data.status === "invalid_license") {
           toast.error(t("environments.settings.enterprise.recheck_license_invalid"));
         } else {
@@ -86,7 +96,12 @@ export const EnterpriseLicenseStatus = ({
       <div className="flex flex-col gap-4">
         <div className="flex items-center justify-between gap-3">
           <div className="flex flex-col gap-1.5">
-            <Badge type={badgeConfig.type} text={badgeConfig.label} size="normal" className="w-fit" />
+            <div className="flex flex-wrap items-center gap-3">
+              <Badge type={badgeConfig.type} text={badgeConfig.label} size="normal" className="w-fit" />
+              <span className="text-sm text-slate-500">
+                {t("common.updated_at")} {formatDateTimeForDisplay(new Date(lastChecked), locale)}
+              </span>
+            </div>
           </div>
           <Button
             type="button"
@@ -112,7 +127,7 @@ export const EnterpriseLicenseStatus = ({
           <Alert variant="warning" size="small">
             <AlertDescription className="overflow-visible whitespace-normal">
               {t("environments.settings.enterprise.license_unreachable_grace_period", {
-                gracePeriodEnd: new Date(gracePeriodEnd).toLocaleDateString(undefined, {
+                gracePeriodEnd: formatDateForDisplay(new Date(gracePeriodEnd), locale, {
                   year: "numeric",
                   month: "short",
                   day: "numeric",
@@ -128,6 +143,13 @@ export const EnterpriseLicenseStatus = ({
             </AlertDescription>
           </Alert>
         )}
+        {status === "instance_mismatch" && (
+          <Alert variant="error" size="small">
+            <AlertDescription className="overflow-visible whitespace-normal">
+              {t("environments.settings.enterprise.license_instance_mismatch_description")}
+            </AlertDescription>
+          </Alert>
+        )}
         <p className="border-t border-slate-100 pt-4 text-sm text-slate-500">
           {t("environments.settings.enterprise.questions_please_reach_out_to")}{" "}
           <a

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/page.tsx

@@ -10,8 +10,9 @@ import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
 import { Button } from "@/modules/ui/components/button";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
+import { EnterpriseLicenseFeaturesTable } from "./components/EnterpriseLicenseFeaturesTable";
 
-const Page = async (props) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
   const t = await getTranslate();
   if (IS_FORMBRICKS_CLOUD) {
@@ -93,15 +94,19 @@ const Page = async (props) => {
         />
       </PageHeader>
       {hasLicense ? (
-        <EnterpriseLicenseStatus
-          status={licenseState.status as "active" | "expired" | "unreachable" | "invalid_license"}
-          gracePeriodEnd={
-            licenseState.status === "unreachable"
-              ? new Date(licenseState.lastChecked.getTime() + GRACE_PERIOD_MS)
-              : undefined
-          }
-          environmentId={params.environmentId}
-        />
+        <>
+          <EnterpriseLicenseStatus
+            status={licenseState.status}
+            lastChecked={licenseState.lastChecked}
+            gracePeriodEnd={
+              licenseState.status === "unreachable"
+                ? new Date(licenseState.lastChecked.getTime() + GRACE_PERIOD_MS)
+                : undefined
+            }
+            environmentId={params.environmentId}
+          />
+          {licenseState.features && <EnterpriseLicenseFeaturesTable features={licenseState.features} />}
+        </>
       ) : (
         <div>
           <div className="relative isolate mt-8 overflow-hidden rounded-lg bg-slate-900 px-3 pt-8 shadow-2xl sm:px-8 md:pt-12 lg:flex lg:gap-x-10 lg:px-12 lg:pt-0">

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/actions.test.ts

@@ -0,0 +1,218 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { AuthorizationError, OperationNotAllowedError } from "@formbricks/types/errors";
+import { updateOrganizationAISettingsAction } from "./actions";
+import { ZOrganizationAISettingsInput } from "./schemas";
+
+const mocks = vi.hoisted(() => ({
+  isInstanceAIConfigured: vi.fn(),
+  checkAuthorizationUpdated: vi.fn(),
+  deleteOrganization: vi.fn(),
+  getOrganization: vi.fn(),
+  getIsMultiOrgEnabled: vi.fn(),
+  getTranslate: vi.fn(),
+  updateOrganization: vi.fn(),
+}));
+
+vi.mock("@/lib/utils/action-client", () => ({
+  authenticatedActionClient: {
+    inputSchema: vi.fn(() => ({
+      action: vi.fn((fn) => fn),
+    })),
+  },
+}));
+
+vi.mock("@/lib/utils/action-client/action-client-middleware", () => ({
+  checkAuthorizationUpdated: mocks.checkAuthorizationUpdated,
+}));
+
+vi.mock("@/lib/organization/service", () => ({
+  deleteOrganization: mocks.deleteOrganization,
+  getOrganization: mocks.getOrganization,
+  updateOrganization: mocks.updateOrganization,
+}));
+
+vi.mock("@/lib/ai/service", () => ({
+  isInstanceAIConfigured: mocks.isInstanceAIConfigured,
+}));
+
+vi.mock("@/lingodotdev/server", () => ({
+  getTranslate: mocks.getTranslate,
+}));
+
+vi.mock("@/modules/ee/audit-logs/lib/handler", () => ({
+  withAuditLogging: vi.fn((_eventName, _objectType, fn) => fn),
+}));
+
+vi.mock("@/modules/ee/license-check/lib/utils", () => ({
+  getIsMultiOrgEnabled: mocks.getIsMultiOrgEnabled,
+}));
+
+const organizationId = "cm9gptbhg0000192zceq9ayuc";
+
+describe("organization AI settings actions", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mocks.checkAuthorizationUpdated.mockResolvedValue(undefined);
+    mocks.getOrganization.mockResolvedValue({
+      id: organizationId,
+      isAISmartToolsEnabled: false,
+      isAIDataAnalysisEnabled: false,
+    });
+    mocks.isInstanceAIConfigured.mockReturnValue(true);
+    mocks.getTranslate.mockResolvedValue((key: string, values?: Record<string, string>) =>
+      values ? `${key}:${JSON.stringify(values)}` : key
+    );
+    mocks.updateOrganization.mockResolvedValue({
+      id: organizationId,
+      isAISmartToolsEnabled: true,
+      isAIDataAnalysisEnabled: false,
+    });
+    mocks.getIsMultiOrgEnabled.mockResolvedValue(true);
+  });
+
+  test("accepts AI toggle updates", () => {
+    expect(
+      ZOrganizationAISettingsInput.parse({
+        isAISmartToolsEnabled: true,
+      })
+    ).toEqual({
+      isAISmartToolsEnabled: true,
+    });
+  });
+
+  test("passes owner and manager roles to the authorization check and updates organization settings", async () => {
+    const ctx = {
+      user: { id: "user_1", locale: "en-US" },
+      auditLoggingCtx: {},
+    };
+    const parsedInput = {
+      organizationId,
+      data: {
+        isAISmartToolsEnabled: true,
+      },
+    };
+
+    const result = await updateOrganizationAISettingsAction({ ctx, parsedInput } as any);
+
+    expect(mocks.checkAuthorizationUpdated).toHaveBeenCalledWith({
+      userId: "user_1",
+      organizationId,
+      access: [
+        {
+          type: "organization",
+          schema: ZOrganizationAISettingsInput,
+          data: parsedInput.data,
+          roles: ["owner", "manager"],
+        },
+      ],
+    });
+    expect(mocks.getOrganization).toHaveBeenCalledWith(organizationId);
+    expect(mocks.updateOrganization).toHaveBeenCalledWith(organizationId, parsedInput.data);
+    expect(ctx.auditLoggingCtx).toMatchObject({
+      organizationId,
+      oldObject: {
+        id: organizationId,
+        isAISmartToolsEnabled: false,
+        isAIDataAnalysisEnabled: false,
+      },
+      newObject: {
+        id: organizationId,
+        isAISmartToolsEnabled: true,
+        isAIDataAnalysisEnabled: false,
+      },
+    });
+    expect(result).toEqual({
+      id: organizationId,
+      isAISmartToolsEnabled: true,
+      isAIDataAnalysisEnabled: false,
+    });
+  });
+
+  test("propagates authorization failures so members cannot update AI settings", async () => {
+    mocks.checkAuthorizationUpdated.mockRejectedValueOnce(new AuthorizationError("Not authorized"));
+
+    await expect(
+      updateOrganizationAISettingsAction({
+        ctx: {
+          user: { id: "user_member", locale: "en-US" },
+          auditLoggingCtx: {},
+        },
+        parsedInput: {
+          organizationId,
+          data: {
+            isAISmartToolsEnabled: true,
+          },
+        },
+      } as any)
+    ).rejects.toThrow(AuthorizationError);
+
+    expect(mocks.updateOrganization).not.toHaveBeenCalled();
+  });
+
+  test("rejects enabling AI when the instance AI provider is not configured", async () => {
+    mocks.isInstanceAIConfigured.mockReturnValueOnce(false);
+
+    await expect(
+      updateOrganizationAISettingsAction({
+        ctx: {
+          user: { id: "user_owner", locale: "en-US" },
+          auditLoggingCtx: {},
+        },
+        parsedInput: {
+          organizationId,
+          data: {
+            isAISmartToolsEnabled: true,
+          },
+        },
+      } as any)
+    ).rejects.toThrow(OperationNotAllowedError);
+
+    expect(mocks.updateOrganization).not.toHaveBeenCalled();
+  });
+
+  test("allows enabling AI when the instance configuration is valid", async () => {
+    await updateOrganizationAISettingsAction({
+      ctx: {
+        user: { id: "user_owner", locale: "en-US" },
+        auditLoggingCtx: {},
+      },
+      parsedInput: {
+        organizationId,
+        data: {
+          isAISmartToolsEnabled: true,
+        },
+      },
+    } as any);
+
+    expect(mocks.updateOrganization).toHaveBeenCalledWith(organizationId, {
+      isAISmartToolsEnabled: true,
+    });
+  });
+
+  test("allows disabling AI when the instance configuration later becomes invalid", async () => {
+    mocks.getOrganization.mockResolvedValueOnce({
+      id: organizationId,
+      isAISmartToolsEnabled: true,
+      isAIDataAnalysisEnabled: false,
+    });
+    mocks.isInstanceAIConfigured.mockReturnValueOnce(false);
+
+    await updateOrganizationAISettingsAction({
+      ctx: {
+        user: { id: "user_owner", locale: "en-US" },
+        auditLoggingCtx: {},
+      },
+      parsedInput: {
+        organizationId,
+        data: {
+          isAISmartToolsEnabled: false,
+        },
+      },
+    } as any);
+
+    expect(mocks.updateOrganization).toHaveBeenCalledWith(organizationId, {
+      isAISmartToolsEnabled: false,
+    });
+  });
+});

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/actions.ts

@@ -2,14 +2,44 @@
 
 import { z } from "zod";
 import { ZId } from "@formbricks/types/common";
-import { OperationNotAllowedError } from "@formbricks/types/errors";
+import { OperationNotAllowedError, ResourceNotFoundError } from "@formbricks/types/errors";
+import type { TOrganizationRole } from "@formbricks/types/memberships";
 import { ZOrganizationUpdateInput } from "@formbricks/types/organizations";
+import { isInstanceAIConfigured } from "@/lib/ai/service";
 import { deleteOrganization, getOrganization, updateOrganization } from "@/lib/organization/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
 import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
+import { getTranslate } from "@/lingodotdev/server";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
 import { getIsMultiOrgEnabled } from "@/modules/ee/license-check/lib/utils";
+import { ZOrganizationAISettingsInput, ZUpdateOrganizationAISettingsAction } from "./schemas";
+
+async function updateOrganizationAction<T extends z.ZodRawShape>({
+  ctx,
+  organizationId,
+  schema,
+  data,
+  roles,
+}: {
+  ctx: AuthenticatedActionClientCtx;
+  organizationId: string;
+  schema: z.ZodObject<T>;
+  data: z.infer<z.ZodObject<T>>;
+  roles: TOrganizationRole[];
+}) {
+  await checkAuthorizationUpdated({
+    userId: ctx.user.id,
+    organizationId,
+    access: [{ type: "organization", schema, data, roles }],
+  });
+  ctx.auditLoggingCtx.organizationId = organizationId;
+  const oldObject = await getOrganization(organizationId);
+  const result = await updateOrganization(organizationId, data);
+  ctx.auditLoggingCtx.oldObject = oldObject;
+  ctx.auditLoggingCtx.newObject = result;
+  return result;
+}
 
 const ZUpdateOrganizationNameAction = z.object({
   organizationId: ZId,
@@ -17,7 +47,7 @@ const ZUpdateOrganizationNameAction = z.object({
 });
 
 export const updateOrganizationNameAction = authenticatedActionClient
-  .schema(ZUpdateOrganizationNameAction)
+  .inputSchema(ZUpdateOrganizationNameAction)
   .action(
     withAuditLogging(
       "updated",
@@ -27,26 +57,104 @@ export const updateOrganizationNameAction = authenticatedActionClient
         parsedInput,
       }: {
         ctx: AuthenticatedActionClientCtx;
-        parsedInput: Record<string, any>;
-      }) => {
-        await checkAuthorizationUpdated({
-          userId: ctx.user.id,
+        parsedInput: z.infer<typeof ZUpdateOrganizationNameAction>;
+      }) =>
+        updateOrganizationAction({
+          ctx,
           organizationId: parsedInput.organizationId,
-          access: [
-            {
-              type: "organization",
-              schema: ZOrganizationUpdateInput.pick({ name: true }),
-              data: parsedInput.data,
-              roles: ["owner"],
-            },
-          ],
+          schema: ZOrganizationUpdateInput.pick({ name: true }),
+          data: parsedInput.data,
+          roles: ["owner"],
+        })
+    )
+  );
+
+type TOrganizationAISettings = Pick<
+  NonNullable<Awaited<ReturnType<typeof getOrganization>>>,
+  "isAISmartToolsEnabled" | "isAIDataAnalysisEnabled"
+>;
+
+type TResolvedOrganizationAISettings = {
+  smartToolsEnabled: boolean;
+  dataAnalysisEnabled: boolean;
+  isEnablingAnyAISetting: boolean;
+};
+
+const resolveOrganizationAISettings = ({
+  data,
+  organization,
+}: {
+  data: z.infer<typeof ZOrganizationAISettingsInput>;
+  organization: TOrganizationAISettings;
+}): TResolvedOrganizationAISettings => {
+  const smartToolsEnabled = Object.hasOwn(data, "isAISmartToolsEnabled")
+    ? (data.isAISmartToolsEnabled ?? organization.isAISmartToolsEnabled)
+    : organization.isAISmartToolsEnabled;
+  const dataAnalysisEnabled = Object.hasOwn(data, "isAIDataAnalysisEnabled")
+    ? (data.isAIDataAnalysisEnabled ?? organization.isAIDataAnalysisEnabled)
+    : organization.isAIDataAnalysisEnabled;
+
+  return {
+    smartToolsEnabled,
+    dataAnalysisEnabled,
+    isEnablingAnyAISetting:
+      (smartToolsEnabled && !organization.isAISmartToolsEnabled) ||
+      (dataAnalysisEnabled && !organization.isAIDataAnalysisEnabled),
+  };
+};
+
+const assertOrganizationAISettingsUpdateAllowed = ({
+  isInstanceAIConfigured,
+  resolvedSettings,
+  t,
+}: {
+  isInstanceAIConfigured: boolean;
+  resolvedSettings: TResolvedOrganizationAISettings;
+  t: Awaited<ReturnType<typeof getTranslate>>;
+}) => {
+  if (resolvedSettings.isEnablingAnyAISetting && !isInstanceAIConfigured) {
+    throw new OperationNotAllowedError(t("environments.settings.general.ai_instance_not_configured"));
+  }
+};
+
+export const updateOrganizationAISettingsAction = authenticatedActionClient
+  .inputSchema(ZUpdateOrganizationAISettingsAction)
+  .action(
+    withAuditLogging(
+      "updated",
+      "organization",
+      async ({
+        ctx,
+        parsedInput,
+      }: {
+        ctx: AuthenticatedActionClientCtx;
+        parsedInput: z.infer<typeof ZUpdateOrganizationAISettingsAction>;
+      }) => {
+        const t = await getTranslate(ctx.user.locale);
+        const organization = await getOrganization(parsedInput.organizationId);
+
+        if (!organization) {
+          throw new ResourceNotFoundError("Organization", parsedInput.organizationId);
+        }
+
+        const resolvedSettings = resolveOrganizationAISettings({
+          data: parsedInput.data,
+          organization,
+        });
+
+        assertOrganizationAISettingsUpdateAllowed({
+          isInstanceAIConfigured: isInstanceAIConfigured(),
+          resolvedSettings,
+          t,
+        });
+
+        return updateOrganizationAction({
+          ctx,
+          organizationId: parsedInput.organizationId,
+          schema: ZOrganizationAISettingsInput,
+          data: parsedInput.data,
+          roles: ["owner", "manager"],
         });
-        ctx.auditLoggingCtx.organizationId = parsedInput.organizationId;
-        const oldObject = await getOrganization(parsedInput.organizationId);
-        const result = await updateOrganization(parsedInput.organizationId, parsedInput.data);
-        ctx.auditLoggingCtx.oldObject = oldObject;
-        ctx.auditLoggingCtx.newObject = result;
-        return result;
       }
     )
   );
@@ -55,13 +163,15 @@ const ZDeleteOrganizationAction = z.object({
   organizationId: ZId,
 });
 
-export const deleteOrganizationAction = authenticatedActionClient.schema(ZDeleteOrganizationAction).action(
-  withAuditLogging(
-    "deleted",
-    "organization",
-    async ({ ctx, parsedInput }: { ctx: AuthenticatedActionClientCtx; parsedInput: Record<string, any> }) => {
+export const deleteOrganizationAction = authenticatedActionClient
+  .inputSchema(ZDeleteOrganizationAction)
+  .action(
+    withAuditLogging("deleted", "organization", async ({ ctx, parsedInput }) => {
       const isMultiOrgEnabled = await getIsMultiOrgEnabled();
-      if (!isMultiOrgEnabled) throw new OperationNotAllowedError("Organization deletion disabled");
+      if (!isMultiOrgEnabled) {
+        const t = await getTranslate(ctx.user.locale);
+        throw new OperationNotAllowedError(t("environments.settings.general.organization_deletion_disabled"));
+      }
 
       await checkAuthorizationUpdated({
         userId: ctx.user.id,
@@ -77,6 +187,5 @@ export const deleteOrganizationAction = authenticatedActionClient.schema(ZDelete
       const oldObject = await getOrganization(parsedInput.organizationId);
       ctx.auditLoggingCtx.oldObject = oldObject;
       return await deleteOrganization(parsedInput.organizationId);
-    }
-  )
-);
+    })
+  );

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/components/AISettingsToggle.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+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)/environments/[environmentId]/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";
+
+interface AISettingsToggleProps {
+  organization: TOrganization;
+  membershipRole?: TOrganizationRole;
+  isInstanceAIConfigured: boolean;
+}
+
+export const AISettingsToggle = ({
+  organization,
+  membershipRole,
+  isInstanceAIConfigured,
+}: Readonly<AISettingsToggleProps>) => {
+  const [loadingField, setLoadingField] = useState<string | null>(null);
+  const { t } = useTranslation();
+  const router = useRouter();
+
+  const { isOwner, isManager } = getAccessFlags(membershipRole);
+  const canEdit = isOwner || isManager;
+  const aiEnablementState = getOrganizationAIEnablementState({
+    isInstanceConfigured: isInstanceAIConfigured,
+  });
+  const showInstanceConfigWarning = aiEnablementState.blockReason === "instanceNotConfigured";
+  const isToggleDisabled = loadingField !== null || !canEdit || !aiEnablementState.canEnableFeatures;
+  const aiEnablementBlockedMessage = t("environments.settings.general.ai_instance_not_configured");
+  const displayedSmartToolsValue = getDisplayedOrganizationAISettingValue({
+    currentValue: organization.isAISmartToolsEnabled,
+    isInstanceConfigured: isInstanceAIConfigured,
+  });
+  const displayedDataAnalysisValue = getDisplayedOrganizationAISettingValue({
+    currentValue: organization.isAIDataAnalysisEnabled,
+    isInstanceConfigured: isInstanceAIConfigured,
+  });
+
+  const handleToggle = async (
+    field: "isAISmartToolsEnabled" | "isAIDataAnalysisEnabled",
+    checked: boolean
+  ) => {
+    if (checked && !aiEnablementState.canEnableFeatures) {
+      toast.error(aiEnablementBlockedMessage);
+      return;
+    }
+
+    setLoadingField(field);
+    try {
+      const data =
+        field === "isAISmartToolsEnabled"
+          ? { isAISmartToolsEnabled: checked }
+          : { isAIDataAnalysisEnabled: checked };
+      const response = await updateOrganizationAISettingsAction({
+        organizationId: organization.id,
+        data,
+      });
+
+      if (response?.data) {
+        toast.success(t("environments.settings.general.ai_settings_updated_successfully"));
+        router.refresh();
+      } else {
+        toast.error(getFormattedErrorMessage(response));
+      }
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : t("common.something_went_wrong_please_try_again"));
+    } finally {
+      setLoadingField(null);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      {showInstanceConfigWarning && (
+        <Alert variant="warning">
+          <AlertDescription>{aiEnablementBlockedMessage}</AlertDescription>
+        </Alert>
+      )}
+
+      <AdvancedOptionToggle
+        isChecked={displayedSmartToolsValue}
+        onToggle={(checked) => handleToggle("isAISmartToolsEnabled", checked)}
+        htmlId="ai-smart-tools-toggle"
+        title={t("environments.settings.general.ai_smart_tools_enabled")}
+        description={t("environments.settings.general.ai_smart_tools_enabled_description")}
+        disabled={isToggleDisabled}
+        customContainerClass="px-0"
+      />
+
+      <AdvancedOptionToggle
+        isChecked={displayedDataAnalysisValue}
+        onToggle={(checked) => handleToggle("isAIDataAnalysisEnabled", checked)}
+        htmlId="ai-data-analysis-toggle"
+        title={t("environments.settings.general.ai_data_analysis_enabled")}
+        description={t("environments.settings.general.ai_data_analysis_enabled_description")}
+        disabled={isToggleDisabled}
+        customContainerClass="px-0"
+      />
+
+      {!canEdit && (
+        <Alert variant="warning">
+          <AlertDescription>
+            {t("common.only_owners_managers_and_manage_access_members_can_perform_this_action")}
+          </AlertDescription>
+        </Alert>
+      )}
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/components/DeleteOrganization.tsx

@@ -107,7 +107,7 @@ const DeleteOrganizationModal = ({
 }: DeleteOrganizationModalProps) => {
   const [inputValue, setInputValue] = useState("");
   const { t } = useTranslation();
-  const handleInputChange = (e) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
   };
 

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/components/EditOrganizationNameForm.tsx

@@ -61,7 +61,7 @@ export const EditOrganizationNameForm = ({ organization, membershipRole }: EditO
         toast.error(errorMessage);
       }
     } catch (err) {
-      toast.error(`Error: ${err.message}`);
+      toast.error(`Error: ${err instanceof Error ? err.message : "Unknown error occurred"}`);
     }
   };
 

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/page.tsx

@@ -1,4 +1,5 @@
 import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
+import { isInstanceAIConfigured } from "@/lib/ai/service";
 import { FB_LOGO_URL, IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED } from "@/lib/constants";
 import { getUser } from "@/lib/user/service";
 import { getTranslate } from "@/lingodotdev/server";
@@ -9,7 +10,9 @@ import { Alert, AlertDescription } from "@/modules/ui/components/alert";
 import { IdBadge } from "@/modules/ui/components/id-badge";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
+import packageJson from "@/package.json";
 import { SettingsCard } from "../../components/SettingsCard";
+import { AISettingsToggle } from "./components/AISettingsToggle";
 import { DeleteOrganization } from "./components/DeleteOrganization";
 import { EditOrganizationNameForm } from "./components/EditOrganizationNameForm";
 import { SecurityListTip } from "./components/SecurityListTip";
@@ -25,7 +28,7 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const user = session?.user?.id ? await getUser(session.user.id) : null;
 
   const isMultiOrgEnabled = await getIsMultiOrgEnabled();
-  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.billing.plan);
+  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.id);
 
   const isDeleteDisabled = !isOwner || !isMultiOrgEnabled;
   const currentUserRole = currentUserMembership?.role;
@@ -59,6 +62,15 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
           membershipRole={currentUserMembership?.role}
         />
       </SettingsCard>
+      <SettingsCard
+        title={t("environments.settings.general.ai_enabled")}
+        description={t("environments.settings.general.ai_enabled_description")}>
+        <AISettingsToggle
+          organization={organization}
+          membershipRole={currentUserMembership?.role}
+          isInstanceAIConfigured={isInstanceAIConfigured()}
+        />
+      </SettingsCard>
       <EmailCustomizationSettings
         organization={organization}
         hasWhiteLabelPermission={hasWhiteLabelPermission}
@@ -81,7 +93,10 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
         </SettingsCard>
       )}
 
-      <IdBadge id={organization.id} label={t("common.organization_id")} variant="column" />
+      <div className="space-y-2">
+        <IdBadge id={organization.id} label={t("common.organization_id")} variant="column" />
+        <IdBadge id={packageJson.version} label={t("common.formbricks_version")} variant="column" />
+      </div>
     </PageContentWrapper>
   );
 };

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/general/schemas.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+import { ZId } from "@formbricks/types/common";
+import { ZOrganizationUpdateInput } from "@formbricks/types/organizations";
+
+export const ZOrganizationAISettingsInput = ZOrganizationUpdateInput.pick({
+  isAISmartToolsEnabled: true,
+  isAIDataAnalysisEnabled: true,
+});
+
+export const ZUpdateOrganizationAISettingsAction = z.object({
+  organizationId: ZId,
+  data: ZOrganizationAISettingsInput,
+});

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/layout.tsx

@@ -1,10 +1,11 @@
 import { getServerSession } from "next-auth";
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
 import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
-const Layout = async (props) => {
+const Layout = async (props: { params: Promise<{ environmentId: string }>; children: React.ReactNode }) => {
   const params = await props.params;
 
   const { children } = props;
@@ -17,15 +18,15 @@ const Layout = async (props) => {
   ]);
 
   if (!organization) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), null);
   }
 
   if (!project) {
-    throw new Error(t("common.workspace_not_found"));
+    throw new ResourceNotFoundError(t("common.workspace"), null);
   }
 
   if (!session) {
-    throw new Error(t("common.session_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   return <>{children}</>;

apps/web/app/(app)/environments/[environmentId]/settings/components/SettingsTitle.tsx

@@ -1,3 +1,3 @@
-export const SettingsTitle = ({ title }) => {
+export const SettingsTitle = ({ title }: { title: string }) => {
   return <h2 className="my-4 text-2xl font-medium leading-6 text-slate-800">{title}</h2>;
 };

apps/web/app/(app)/environments/[environmentId]/settings/page.tsx

@@ -1,6 +1,6 @@
 import { redirect } from "next/navigation";
 
-const Page = async (props) => {
+const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
   return redirect(`/environments/${params.environmentId}/settings/profile`);
 };

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions.ts

@@ -23,7 +23,7 @@ const ZGetResponsesAction = z.object({
 });
 
 export const getResponsesAction = authenticatedActionClient
-  .schema(ZGetResponsesAction)
+  .inputSchema(ZGetResponsesAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -57,7 +57,7 @@ const ZGetSurveySummaryAction = z.object({
 });
 
 export const getSurveySummaryAction = authenticatedActionClient
-  .schema(ZGetSurveySummaryAction)
+  .inputSchema(ZGetSurveySummaryAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -85,7 +85,7 @@ const ZGetResponseCountAction = z.object({
 });
 
 export const getResponseCountAction = authenticatedActionClient
-  .schema(ZGetResponseCountAction)
+  .inputSchema(ZGetResponseCountAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -110,12 +110,12 @@ export const getResponseCountAction = authenticatedActionClient
 
 const ZGetDisplaysWithContactAction = z.object({
   surveyId: ZId,
-  limit: z.number().int().min(1).max(100),
-  offset: z.number().int().nonnegative(),
+  limit: z.int().min(1).max(100),
+  offset: z.int().nonnegative(),
 });
 
 export const getDisplaysWithContactAction = authenticatedActionClient
-  .schema(ZGetDisplaysWithContactAction)
+  .inputSchema(ZGetDisplaysWithContactAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyAnalysisNavigation.tsx

@@ -3,25 +3,22 @@
 import { InboxIcon, PresentationIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { useTranslation } from "react-i18next";
-import { TSurvey } from "@formbricks/types/surveys/types";
+import { useEnvironment } from "@/app/(app)/environments/[environmentId]/context/environment-context";
 import { revalidateSurveyIdPath } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
+import { useSurvey } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/context/survey-context";
 import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
 
 interface SurveyAnalysisNavigationProps {
-  environmentId: string;
-  survey: TSurvey;
   activeId: string;
 }
 
-export const SurveyAnalysisNavigation = ({
-  environmentId,
-  survey,
-  activeId,
-}: SurveyAnalysisNavigationProps) => {
+export const SurveyAnalysisNavigation = ({ activeId }: SurveyAnalysisNavigationProps) => {
   const pathname = usePathname();
   const { t } = useTranslation();
+  const { environment } = useEnvironment();
+  const { survey } = useSurvey();
 
-  const url = `/environments/${environmentId}/surveys/${survey.id}`;
+  const url = `/environments/${environment.id}/surveys/${survey.id}`;
 
   const navigation = [
     {
@@ -31,7 +28,7 @@ export const SurveyAnalysisNavigation = ({
       href: `${url}/summary?referer=true`,
       current: pathname?.includes("/summary"),
       onClick: () => {
-        revalidateSurveyIdPath(environmentId, survey.id);
+        revalidateSurveyIdPath(environment.id, survey.id);
       },
     },
     {
@@ -41,7 +38,7 @@ export const SurveyAnalysisNavigation = ({
       href: `${url}/responses?referer=true`,
       current: pathname?.includes("/responses"),
       onClick: () => {
-        revalidateSurveyIdPath(environmentId, survey.id);
+        revalidateSurveyIdPath(environment.id, survey.id);
       },
     },
   ];

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { createContext, useCallback, useContext, useState } from "react";
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 import {
   ElementOption,
   ElementOptions,
@@ -30,7 +30,7 @@ interface SelectedFilterOptions {
 
 export interface DateRange {
   from: Date | undefined;
-  to?: Date | undefined;
+  to?: Date;
 }
 
 interface FilterDateContextProps {
@@ -41,6 +41,8 @@ interface FilterDateContextProps {
   dateRange: DateRange;
   setDateRange: React.Dispatch<React.SetStateAction<DateRange>>;
   resetState: () => void;
+  refreshAnalysisData: () => Promise<void>;
+  registerAnalysisRefreshHandler: (handler: () => Promise<void>) => () => void;
 }
 
 const ResponseFilterContext = createContext<FilterDateContextProps | undefined>(undefined);
@@ -61,6 +63,7 @@ const ResponseFilterProvider = ({ children }: { children: React.ReactNode }) =>
     from: undefined,
     to: getTodayDate(),
   });
+  const refreshHandlerRef = useRef<(() => Promise<void>) | null>(null);
 
   const resetState = useCallback(() => {
     setDateRange({
@@ -73,20 +76,43 @@ const ResponseFilterProvider = ({ children }: { children: React.ReactNode }) =>
     });
   }, []);
 
-  return (
-    <ResponseFilterContext.Provider
-      value={{
-        setSelectedFilter,
-        selectedFilter,
-        selectedOptions,
-        setSelectedOptions,
-        dateRange,
-        setDateRange,
-        resetState,
-      }}>
-      {children}
-    </ResponseFilterContext.Provider>
+  const refreshAnalysisData = useCallback(async () => {
+    await refreshHandlerRef.current?.();
+  }, []);
+
+  const registerAnalysisRefreshHandler = useCallback((handler: () => Promise<void>) => {
+    refreshHandlerRef.current = handler;
+
+    return () => {
+      if (refreshHandlerRef.current === handler) {
+        refreshHandlerRef.current = null;
+      }
+    };
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      setSelectedFilter,
+      selectedFilter,
+      selectedOptions,
+      setSelectedOptions,
+      dateRange,
+      setDateRange,
+      resetState,
+      refreshAnalysisData,
+      registerAnalysisRefreshHandler,
+    }),
+    [
+      dateRange,
+      refreshAnalysisData,
+      registerAnalysisRefreshHandler,
+      resetState,
+      selectedFilter,
+      selectedOptions,
+    ]
   );
+
+  return <ResponseFilterContext.Provider value={contextValue}>{children}</ResponseFilterContext.Provider>;
 };
 
 const useResponseFilter = () => {

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/layout.tsx

@@ -3,6 +3,7 @@ import { getServerSession } from "next-auth";
 import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
 import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
+import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
 type Props = {
@@ -14,10 +15,11 @@ export const generateMetadata = async (props: Props): Promise<Metadata> => {
   const session = await getServerSession(authOptions);
   const survey = await getSurvey(params.surveyId);
   const responseCount = await getResponseCountBySurveyId(params.surveyId);
+  const t = await getTranslate();
 
   if (session) {
     return {
-      title: `${responseCount} Responses | ${survey?.name} Results`,
+      title: `${t("common.count_responses", { count: responseCount })} | ${t("environments.surveys.summary.survey_results", { surveyName: survey?.name })}`,
     };
   }
   return {
@@ -25,7 +27,7 @@ export const generateMetadata = async (props: Props): Promise<Metadata> => {
   };
 };
 
-const SurveyLayout = async ({ children }) => {
+const SurveyLayout = async ({ children }: { children: React.ReactNode }) => {
   return <ResponseFilterProvider>{children}</ResponseFilterProvider>;
 };
 

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/loading.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { SkeletonLoader } from "@/modules/ui/components/skeleton-loader";
+
+const Loading = () => {
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle="" />
+      <div className="flex h-9 animate-pulse gap-2">
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+      </div>
+      <SkeletonLoader type="summary" />
+    </PageContentWrapper>
+  );
+};
+
+export default Loading;

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponsePage.tsx

@@ -2,6 +2,8 @@
 
 import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TSurveyQuota } from "@formbricks/types/quota";
 import { TResponseWithQuotas } from "@formbricks/types/responses";
@@ -13,6 +15,7 @@ import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/surv
 import { ResponseDataView } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseDataView";
 import { CustomFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
 import { getFormattedFilters } from "@/app/lib/surveys/surveys";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { replaceHeadlineRecall } from "@/lib/utils/recall";
 
 interface ResponsePageProps {
@@ -46,8 +49,8 @@ export const ResponsePage = ({
   const [page, setPage] = useState<number | null>(null);
   const [hasMore, setHasMore] = useState<boolean>(initialResponses.length >= responsesPerPage);
   const [isFetchingFirstPage, setIsFetchingFirstPage] = useState<boolean>(false);
-  const { selectedFilter, dateRange, resetState } = useResponseFilter();
-
+  const { selectedFilter, dateRange, resetState, registerAnalysisRefreshHandler } = useResponseFilter();
+  const { t } = useTranslation();
   const filters = useMemo(
     () => getFormattedFilters(survey, selectedFilter, dateRange),
 
@@ -86,6 +89,34 @@ export const ResponsePage = ({
     setResponses((prev) => prev.map((r) => (r.id === responseId ? updatedResponse : r)));
   };
 
+  const refetchResponses = useCallback(async () => {
+    setIsFetchingFirstPage(true);
+
+    try {
+      const getResponsesActionResponse = await getResponsesAction({
+        surveyId,
+        limit: responsesPerPage,
+        offset: 0,
+        filterCriteria: filters,
+      });
+
+      if (getResponsesActionResponse?.serverError) {
+        toast.error(getFormattedErrorMessage(getResponsesActionResponse) ?? t("common.something_went_wrong"));
+      }
+
+      const freshResponses = getResponsesActionResponse?.data ?? [];
+      setResponses(freshResponses);
+      setPage(1);
+      setHasMore(freshResponses.length >= responsesPerPage);
+    } finally {
+      setIsFetchingFirstPage(false);
+    }
+  }, [filters, responsesPerPage, surveyId]);
+
+  useEffect(() => {
+    return registerAnalysisRefreshHandler(refetchResponses);
+  }, [refetchResponses, registerAnalysisRefreshHandler]);
+
   const surveyMemoized = useMemo(() => {
     return replaceHeadlineRecall(survey, "default");
   }, [survey]);
@@ -134,6 +165,8 @@ export const ResponsePage = ({
       }
     };
     fetchFilteredResponses();
+    // page is intentionally omitted to avoid refetching after the initial page setup.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filters, responsesPerPage, selectedFilter, dateRange, surveyId]);
 
   return (

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTable.tsx

@@ -29,6 +29,7 @@ import { ResponseTableCell } from "@/app/(app)/environments/[environmentId]/surv
 import { generateResponseTableColumns } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns";
 import { getResponsesDownloadUrlAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
 import { downloadResponsesFile } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/utils";
+import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { deleteResponseAction } from "@/modules/analysis/components/SingleResponseCard/actions";
 import { Button } from "@/modules/ui/components/button";
 import {
@@ -96,8 +97,8 @@ export const ResponseTable = ({
   const showQuotasColumn = isQuotasAllowed && quotas.length > 0;
   // Generate columns
   const columns = useMemo(
-    () => generateResponseTableColumns(survey, isExpanded ?? false, isReadOnly, t, showQuotasColumn),
-    [survey, isExpanded, isReadOnly, t, showQuotasColumn]
+    () => generateResponseTableColumns(survey, isExpanded ?? false, isReadOnly, locale, t, showQuotasColumn),
+    [survey, isExpanded, isReadOnly, locale, t, showQuotasColumn]
   );
 
   // Save settings to localStorage when they change
@@ -201,15 +202,21 @@ export const ResponseTable = ({
   };
 
   const deleteResponse = async (responseId: string, params?: { decrementQuotas?: boolean }) => {
-    await deleteResponseAction({ responseId, decrementQuotas: params?.decrementQuotas ?? false });
+    const result = await deleteResponseAction({
+      responseId,
+      decrementQuotas: params?.decrementQuotas ?? false,
+    });
+    if (result?.serverError) {
+      throw new Error(getFormattedErrorMessage(result));
+    }
   };
 
   // Handle downloading selected responses
-  const downloadSelectedRows = async (responseIds: string[], format: "csv" | "xlsx") => {
+  const downloadSelectedRows = async (responseIds: string[], format: "xlsx" | "csv") => {
     try {
       const downloadResponse = await getResponsesDownloadUrlAction({
         surveyId: survey.id,
-        format: format,
+        format,
         filterCriteria: { responseIds },
       });
 
@@ -300,7 +307,6 @@ export const ResponseTable = ({
         <DataTableSettingsModal
           open={isTableSettingsModalOpen}
           setOpen={setIsTableSettingsModalOpen}
-          survey={survey}
           table={table}
           columnOrder={columnOrder}
           handleDragEnd={handleDragEnd}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns.tsx

@@ -5,13 +5,14 @@ import { TFunction } from "i18next";
 import { CircleHelpIcon, EyeOffIcon, MailIcon, TagIcon } from "lucide-react";
 import Link from "next/link";
 import { TResponseTableData } from "@formbricks/types/responses";
-import { TSurveyElement } from "@formbricks/types/surveys/elements";
+import { TSurveyElement, TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { getTextContent } from "@formbricks/types/surveys/validation";
+import { TUserLocale } from "@formbricks/types/user";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { extractChoiceIdsFromResponse } from "@/lib/response/utils";
 import { getContactIdentifier } from "@/lib/utils/contact";
-import { getFormattedDateTimeString } from "@/lib/utils/datetime";
+import { formatDateTimeForDisplay } from "@/lib/utils/datetime";
 import { recallToHeadline } from "@/lib/utils/recall";
 import { RenderResponse } from "@/modules/analysis/components/SingleResponseCard/components/RenderResponse";
 import { getElementsFromBlocks } from "@/modules/survey/lib/client-utils";
@@ -34,6 +35,7 @@ const getElementColumnsData = (
   element: TSurveyElement,
   survey: TSurvey,
   isExpanded: boolean,
+  locale: TUserLocale,
   t: TFunction
 ): ColumnDef<TResponseTableData>[] => {
   const ELEMENTS_ICON_MAP = getElementIconMap(t);
@@ -41,7 +43,7 @@ const getElementColumnsData = (
   const contactInfoFields = ["firstName", "lastName", "email", "phone", "company"];
 
   // Helper function to create consistent column headers
-  const createElementHeader = (elementType: string, headline: string, suffix?: string) => {
+  const createElementHeader = (elementType: TSurveyElementTypeEnum, headline: string, suffix?: string) => {
     const title = suffix ? `${headline} - ${suffix}` : headline;
     const ElementHeader = () => (
       <div className="flex items-center justify-between">
@@ -167,6 +169,7 @@ const getElementColumnsData = (
                 survey={survey}
                 responseData={responseValue}
                 language={language}
+                locale={locale}
                 isExpanded={isExpanded}
                 showId={false}
               />
@@ -218,6 +221,7 @@ const getElementColumnsData = (
                 survey={survey}
                 responseData={responseValue}
                 language={language}
+                locale={locale}
                 isExpanded={isExpanded}
                 showId={false}
               />
@@ -232,7 +236,7 @@ const getMetadataColumnsData = (t: TFunction): ColumnDef<TResponseTableData>[] =
   const metadataColumns: ColumnDef<TResponseTableData>[] = [];
 
   METADATA_FIELDS.forEach((label) => {
-    const IconComponent = COLUMNS_ICON_MAP[label];
+    const IconComponent = COLUMNS_ICON_MAP[label as keyof typeof COLUMNS_ICON_MAP];
 
     metadataColumns.push({
       accessorKey: "METADATA_" + label,
@@ -259,11 +263,14 @@ export const generateResponseTableColumns = (
   survey: TSurvey,
   isExpanded: boolean,
   isReadOnly: boolean,
+  locale: TUserLocale,
   t: TFunction,
   showQuotasColumn: boolean
 ): ColumnDef<TResponseTableData>[] => {
   const elements = getElementsFromBlocks(survey.blocks);
-  const elementColumns = elements.flatMap((element) => getElementColumnsData(element, survey, isExpanded, t));
+  const elementColumns = elements.flatMap((element) =>
+    getElementColumnsData(element, survey, isExpanded, locale, t)
+  );
 
   const dateColumn: ColumnDef<TResponseTableData> = {
     accessorKey: "createdAt",
@@ -271,7 +278,7 @@ export const generateResponseTableColumns = (
     size: 200,
     cell: ({ row }) => {
       const date = new Date(row.original.createdAt);
-      return <p className="text-slate-900">{getFormattedDateTimeString(date)}</p>;
+      return <p className="text-slate-900">{formatDateTimeForDisplay(date, locale)}</p>;
     },
   };
 

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/lib/utils.test.ts

@@ -1,4 +1,5 @@
 import "@testing-library/jest-dom/vitest";
+import { TFunction } from "i18next";
 import {
   AirplayIcon,
   ArrowUpFromDotIcon,
@@ -38,7 +39,7 @@ describe("utils", () => {
       "environments.surveys.responses.source": "Source",
     };
     return translations[key] || key;
-  });
+  }) as unknown as TFunction;
 
   describe("getAddressFieldLabel", () => {
     test("returns correct label for addressLine1", () => {

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/lib/utils.ts

@@ -1,5 +1,4 @@
 import { TFunction } from "i18next";
-import { capitalize } from "lodash";
 import {
   AirplayIcon,
   ArrowUpFromDotIcon,
@@ -9,6 +8,7 @@ import {
   SmartphoneIcon,
 } from "lucide-react";
 import { TResponseMeta } from "@formbricks/types/responses";
+import { capitalize } from "@/lib/utils/object";
 
 export const getAddressFieldLabel = (field: string, t: TFunction) => {
   switch (field) {
@@ -80,9 +80,24 @@ export const COLUMNS_ICON_MAP = {
 const userAgentFields = ["browser", "os", "device"];
 export const METADATA_FIELDS = ["action", "country", ...userAgentFields, "source", "url"];
 
-export const getMetadataValue = (meta: TResponseMeta, label: string) => {
-  if (userAgentFields.includes(label)) {
-    return meta.userAgent?.[label];
+export const getMetadataValue = (
+  meta: TResponseMeta,
+  label: (typeof METADATA_FIELDS)[number]
+): string | undefined => {
+  switch (label) {
+    case "browser":
+      return meta.userAgent?.browser;
+    case "os":
+      return meta.userAgent?.os;
+    case "device":
+      return meta.userAgent?.device;
+    case "action":
+      return meta.action;
+    case "country":
+      return meta.country;
+    case "source":
+      return meta.source;
+    case "url":
+      return meta.url;
   }
-  return meta[label];
 };

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/loading.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { SkeletonLoader } from "@/modules/ui/components/skeleton-loader";
+
+const Loading = () => {
+  const { t } = useTranslation();
+
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle={t("common.responses")} />
+      <div className="flex h-9 animate-pulse gap-1.5">
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+        <div className="h-9 w-36 rounded-full bg-slate-200" />
+      </div>
+      <SkeletonLoader type="responseTable" />
+    </PageContentWrapper>
+  );
+};
+
+export default Loading;

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/page.tsx

@@ -1,3 +1,4 @@
+import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { SurveyAnalysisNavigation } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyAnalysisNavigation";
 import { ResponsePage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponsePage";
 import { SurveyAnalysisCTA } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA";
@@ -7,7 +8,6 @@ import { getResponseCountBySurveyId, getResponses } from "@/lib/response/service
 import { getSurvey } from "@/lib/survey/service";
 import { getTagsByEnvironmentId } from "@/lib/tag/service";
 import { getUser } from "@/lib/user/service";
-import { findMatchingLocale } from "@/lib/utils/locale";
 import { getTranslate } from "@/lingodotdev/server";
 import { getSegments } from "@/modules/ee/contacts/segments/lib/segments";
 import { getIsContactsEnabled, getIsQuotasEnabled } from "@/modules/ee/license-check/lib/utils";
@@ -17,31 +17,30 @@ import { getOrganizationBilling } from "@/modules/survey/lib/survey";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
 
-const Page = async (props) => {
+const Page = async (props: { params: Promise<{ environmentId: string; surveyId: string }> }) => {
   const params = await props.params;
   const t = await getTranslate();
 
   const { session, environment, organization, isReadOnly } = await getEnvironmentAuth(params.environmentId);
 
-  const [survey, user, tags, isContactsEnabled, responseCount, locale] = await Promise.all([
+  const [survey, user, tags, isContactsEnabled, responseCount] = await Promise.all([
     getSurvey(params.surveyId),
     getUser(session.user.id),
     getTagsByEnvironmentId(params.environmentId),
-    getIsContactsEnabled(),
+    getIsContactsEnabled(organization.id),
     getResponseCountBySurveyId(params.surveyId),
-    findMatchingLocale(),
   ]);
 
   if (!survey) {
-    throw new Error(t("common.survey_not_found"));
+    throw new ResourceNotFoundError(t("common.survey"), params.surveyId);
   }
 
   if (!user) {
-    throw new Error(t("common.user_not_found"));
+    throw new AuthenticationError(t("common.not_authenticated"));
   }
 
   if (!organization) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), null);
   }
 
   const segments = isContactsEnabled ? await getSegments(params.environmentId) : [];
@@ -50,10 +49,10 @@ const Page = async (props) => {
 
   const organizationBilling = await getOrganizationBilling(organization.id);
   if (!organizationBilling) {
-    throw new Error(t("common.organization_not_found"));
+    throw new ResourceNotFoundError(t("common.organization"), organization.id);
   }
 
-  const isQuotasAllowed = await getIsQuotasEnabled(organizationBilling.plan);
+  const isQuotasAllowed = await getIsQuotasEnabled(organization.id);
   const quotas = isQuotasAllowed ? await getQuotas(survey.id) : [];
 
   // Fetch initial responses on the server to prevent duplicate client-side fetch
@@ -65,8 +64,6 @@ const Page = async (props) => {
         pageTitle={survey.name}
         cta={
           <SurveyAnalysisCTA
-            environment={environment}
-            survey={survey}
             isReadOnly={isReadOnly}
             user={user}
             publicDomain={publicDomain}
@@ -77,7 +74,7 @@ const Page = async (props) => {
             isStorageConfigured={IS_STORAGE_CONFIGURED}
           />
         }>
-        <SurveyAnalysisNavigation environmentId={environment.id} survey={survey} activeId="responses" />
+        <SurveyAnalysisNavigation activeId="responses" />
       </PageHeader>
       <ResponsePage
         environment={environment}
@@ -86,7 +83,7 @@ const Page = async (props) => {
         environmentTags={tags}
         user={user}
         responsesPerPage={RESPONSES_PER_PAGE}
-        locale={locale}
+        locale={user.locale}
         isReadOnly={isReadOnly}
         isQuotasAllowed={isQuotasAllowed}
         quotas={quotas}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions.ts

@@ -7,7 +7,6 @@ import { getEmailTemplateHtml } from "@/app/(app)/environments/[environmentId]/s
 import { getSurvey, updateSurvey } from "@/lib/survey/service";
 import { authenticatedActionClient } from "@/lib/utils/action-client";
 import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
-import { AuthenticatedActionClientCtx } from "@/lib/utils/action-client/types/context";
 import { convertToCsv } from "@/lib/utils/file-conversion";
 import { getOrganizationIdFromSurveyId, getProjectIdFromSurveyId } from "@/lib/utils/helper";
 import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
@@ -22,7 +21,7 @@ const ZSendEmbedSurveyPreviewEmailAction = z.object({
 });
 
 export const sendEmbedSurveyPreviewEmailAction = authenticatedActionClient
-  .schema(ZSendEmbedSurveyPreviewEmailAction)
+  .inputSchema(ZSendEmbedSurveyPreviewEmailAction)
   .action(async ({ ctx, parsedInput }) => {
     const organizationId = await getOrganizationIdFromSurveyId(parsedInput.surveyId);
     const organizationLogoUrl = await getOrganizationLogoUrl(organizationId);
@@ -65,57 +64,49 @@ export const sendEmbedSurveyPreviewEmailAction = authenticatedActionClient
 
 const ZResetSurveyAction = z.object({
   surveyId: ZId,
-  organizationId: ZId,
   projectId: ZId,
 });
 
-export const resetSurveyAction = authenticatedActionClient.schema(ZResetSurveyAction).action(
-  withAuditLogging(
-    "updated",
-    "survey",
-    async ({
-      ctx,
-      parsedInput,
-    }: {
-      ctx: AuthenticatedActionClientCtx;
-      parsedInput: z.infer<typeof ZResetSurveyAction>;
-    }) => {
-      await checkAuthorizationUpdated({
-        userId: ctx.user.id,
-        organizationId: parsedInput.organizationId,
-        access: [
-          {
-            type: "organization",
-            roles: ["owner", "manager"],
-          },
-          {
-            type: "projectTeam",
-            minPermission: "readWrite",
-            projectId: parsedInput.projectId,
-          },
-        ],
-      });
+export const resetSurveyAction = authenticatedActionClient.inputSchema(ZResetSurveyAction).action(
+  withAuditLogging("updated", "survey", async ({ ctx, parsedInput }) => {
+    const organizationId = await getOrganizationIdFromSurveyId(parsedInput.surveyId);
+    const projectId = await getProjectIdFromSurveyId(parsedInput.surveyId);
 
-      ctx.auditLoggingCtx.organizationId = parsedInput.organizationId;
-      ctx.auditLoggingCtx.surveyId = parsedInput.surveyId;
-      ctx.auditLoggingCtx.oldObject = null;
+    await checkAuthorizationUpdated({
+      userId: ctx.user.id,
+      organizationId,
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager"],
+        },
+        {
+          type: "projectTeam",
+          minPermission: "readWrite",
+          projectId,
+        },
+      ],
+    });
 
-      const { deletedResponsesCount, deletedDisplaysCount } = await deleteResponsesAndDisplaysForSurvey(
-        parsedInput.surveyId
-      );
+    ctx.auditLoggingCtx.organizationId = organizationId;
+    ctx.auditLoggingCtx.surveyId = parsedInput.surveyId;
+    ctx.auditLoggingCtx.oldObject = null;
 
-      ctx.auditLoggingCtx.newObject = {
-        deletedResponsesCount: deletedResponsesCount,
-        deletedDisplaysCount: deletedDisplaysCount,
-      };
+    const { deletedResponsesCount, deletedDisplaysCount } = await deleteResponsesAndDisplaysForSurvey(
+      parsedInput.surveyId
+    );
 
-      return {
-        success: true,
-        deletedResponsesCount: deletedResponsesCount,
-        deletedDisplaysCount: deletedDisplaysCount,
-      };
-    }
-  )
+    ctx.auditLoggingCtx.newObject = {
+      deletedResponsesCount: deletedResponsesCount,
+      deletedDisplaysCount: deletedDisplaysCount,
+    };
+
+    return {
+      success: true,
+      deletedResponsesCount: deletedResponsesCount,
+      deletedDisplaysCount: deletedDisplaysCount,
+    };
+  })
 );
 
 const ZGetEmailHtmlAction = z.object({
@@ -123,7 +114,7 @@ const ZGetEmailHtmlAction = z.object({
 });
 
 export const getEmailHtmlAction = authenticatedActionClient
-  .schema(ZGetEmailHtmlAction)
+  .inputSchema(ZGetEmailHtmlAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -152,9 +143,10 @@ const ZGeneratePersonalLinksAction = z.object({
 });
 
 export const generatePersonalLinksAction = authenticatedActionClient
-  .schema(ZGeneratePersonalLinksAction)
+  .inputSchema(ZGeneratePersonalLinksAction)
   .action(async ({ ctx, parsedInput }) => {
-    const isContactsEnabled = await getIsContactsEnabled();
+    const organizationId = await getOrganizationIdFromSurveyId(parsedInput.surveyId);
+    const isContactsEnabled = await getIsContactsEnabled(organizationId);
     if (!isContactsEnabled) {
       throw new OperationNotAllowedError("Contacts are not enabled for this environment");
     }
@@ -231,7 +223,7 @@ const ZUpdateSingleUseLinksAction = z.object({
 });
 
 export const updateSingleUseLinksAction = authenticatedActionClient
-  .schema(ZUpdateSingleUseLinksAction)
+  .inputSchema(ZUpdateSingleUseLinksAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/CalSummary.tsx

@@ -30,8 +30,7 @@ export const CalSummary = ({ elementSummary, survey }: CalSummaryProps) => {
               </div>
             </div>
             <p className="flex w-32 items-end justify-end text-slate-600">
-              {elementSummary.booked.count}{" "}
-              {elementSummary.booked.count === 1 ? t("common.response") : t("common.responses")}
+              {t("common.count_responses", { count: elementSummary.booked.count })}
             </p>
           </div>
           <ProgressBar barColor="bg-brand-dark" progress={elementSummary.booked.percentage / 100} />
@@ -47,8 +46,7 @@ export const CalSummary = ({ elementSummary, survey }: CalSummaryProps) => {
               </div>
             </div>
             <p className="flex w-32 items-end justify-end text-slate-600">
-              {elementSummary.skipped.count}{" "}
-              {elementSummary.skipped.count === 1 ? t("common.response") : t("common.responses")}
+              {t("common.count_responses", { count: elementSummary.skipped.count })}
             </p>
           </div>
           <ProgressBar barColor="bg-brand-dark" progress={elementSummary.skipped.percentage / 100} />

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ConsentSummary.tsx

@@ -64,7 +64,7 @@ export const ConsentSummary = ({ elementSummary, survey, setFilter }: ConsentSum
                   </div>
                 </div>
                 <p className="flex w-32 items-end justify-end text-slate-600">
-                  {summaryItem.count} {summaryItem.count === 1 ? t("common.response") : t("common.responses")}
+                  {t("common.count_responses", { count: summaryItem.count })}
                 </p>
               </div>
               <div className="group-hover:opacity-80">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/DateElementSummary.tsx

@@ -7,7 +7,7 @@ import { TSurvey, TSurveyElementSummaryDate } from "@formbricks/types/surveys/ty
 import { TUserLocale } from "@formbricks/types/user";
 import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
-import { formatDateWithOrdinal } from "@/lib/utils/datetime";
+import { formatStoredDateForDisplay } from "@/lib/utils/date-display";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
 import { EmptyState } from "@/modules/ui/components/empty-state";
@@ -32,13 +32,14 @@ export const DateElementSummary = ({ elementSummary, environmentId, survey, loca
   };
 
   const renderResponseValue = (value: string) => {
-    const parsedDate = new Date(value);
+    const formattedDate = formatStoredDateForDisplay(value, elementSummary.element.format, locale);
 
-    const formattedDate = isNaN(parsedDate.getTime())
-      ? `${t("common.invalid_date")}(${value})`
-      : formatDateWithOrdinal(parsedDate);
-
-    return formattedDate;
+    return (
+      formattedDate ??
+      t("common.invalid_date_with_value", {
+        value,
+      })
+    );
   };
 
   return (
@@ -59,7 +60,7 @@ export const DateElementSummary = ({ elementSummary, environmentId, survey, loca
             elementSummary.samples.slice(0, visibleResponses).map((response) => (
               <div
                 key={response.id}
-                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
+                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent">
                 <div className="pl-4 md:pl-6">
                   {response.contact ? (
                     <Link
@@ -84,7 +85,7 @@ export const DateElementSummary = ({ elementSummary, environmentId, survey, loca
                 <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
                   {renderResponseValue(response.value)}
                 </div>
-                <div className="px-4 text-slate-500 md:px-6">
+                <div className="px-4 md:px-6">
                   {timeSince(new Date(response.updatedAt).toISOString(), locale)}
                 </div>
               </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ElementSummaryHeader.tsx

@@ -48,7 +48,7 @@ export const ElementSummaryHeader = ({
         {showResponses && (
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
             <InboxIcon className="mr-2 h-4 w-4" />
-            {`${elementSummary.responseCount} ${t("common.responses")}`}
+            {t("common.count_responses", { count: elementSummary.responseCount })}
           </div>
         )}
         {additionalInfo}

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/HiddenFieldsSummary.tsx

@@ -41,8 +41,7 @@ export const HiddenFieldsSummary = ({ environment, elementSummary, locale }: Hid
           </div>
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
             <InboxIcon className="mr-2 h-4 w-4" />
-            {elementSummary.responseCount}{" "}
-            {elementSummary.responseCount === 1 ? t("common.response") : t("common.responses")}
+            {t("common.count_responses", { count: elementSummary.responseCount })}
           </div>
         </div>
       </div>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MatrixElementSummary.tsx

@@ -31,7 +31,7 @@ export const MatrixElementSummary = ({ elementSummary, survey, setFilter }: Matr
     if (label) {
       return label;
     } else if (percentage !== undefined && totalResponsesForRow !== undefined) {
-      return `${Math.round((percentage / 100) * totalResponsesForRow)} ${t("common.responses")}`;
+      return t("common.count_responses", { count: Math.round((percentage / 100) * totalResponsesForRow) });
     }
     return "";
   };
@@ -77,7 +77,7 @@ export const MatrixElementSummary = ({ elementSummary, survey, setFilter }: Matr
                       )}>
                       <button
                         style={{ backgroundColor: `rgba(0,196,184,${getOpacityLevel(percentage)})` }}
-                        className="hover:outline-brand-dark m-1 flex h-full w-40 cursor-pointer items-center justify-center rounded p-4 text-sm text-slate-950 hover:outline"
+                        className="m-1 flex h-full w-40 cursor-pointer items-center justify-center rounded p-4 text-sm text-slate-950 hover:outline hover:outline-brand-dark"
                         onClick={() =>
                           setFilter(
                             elementSummary.element.id,

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/MultipleChoiceSummary.tsx

@@ -75,7 +75,7 @@ export const MultipleChoiceSummary = ({
           elementSummary.type === "multipleChoiceMulti" ? (
             <div className="flex items-center rounded-lg bg-slate-100 p-2">
               <InboxIcon className="mr-2 h-4 w-4" />
-              {`${elementSummary.selectionCount} ${t("common.selections")}`}
+              {t("common.count_selections", { count: elementSummary.selectionCount })}
             </div>
           ) : undefined
         }
@@ -110,7 +110,7 @@ export const MultipleChoiceSummary = ({
                     </div>
                     <div className="flex w-full space-x-2">
                       <p className="flex w-full pt-1 text-slate-600 sm:items-end sm:justify-end sm:pt-0">
-                        {result.count} {result.count === 1 ? t("common.selection") : t("common.selections")}
+                        {t("common.count_selections", { count: result.count })}
                       </p>
                       <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
                         {convertFloatToNDecimal(result.percentage, 2)}%

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/NPSSummary.tsx

@@ -60,7 +60,9 @@ export const NPSSummary = ({ elementSummary, survey, setFilter }: NPSSummaryProp
       },
     };
 
-    const filter = filters[group];
+    const filter = (filters as Record<string, { comparison: string; values: string | string[] | undefined }>)[
+      group
+    ];
 
     if (filter) {
       setFilter(
@@ -104,7 +106,7 @@ export const NPSSummary = ({ elementSummary, survey, setFilter }: NPSSummaryProp
         <TabsContent value="aggregated" className="mt-4">
           <div className="px-4 pb-6 pt-4 md:px-6">
             <div className="space-y-5 text-sm md:text-base">
-              {["promoters", "passives", "detractors", "dismissed"].map((group) => (
+              {(["promoters", "passives", "detractors", "dismissed"] as const).map((group) => (
                 <button
                   className="w-full cursor-pointer hover:opacity-80"
                   key={group}
@@ -123,8 +125,7 @@ export const NPSSummary = ({ elementSummary, survey, setFilter }: NPSSummaryProp
                       </div>
                     </div>
                     <p className="flex w-32 items-end justify-end text-slate-600">
-                      {elementSummary[group]?.count}{" "}
-                      {elementSummary[group]?.count === 1 ? t("common.response") : t("common.responses")}
+                      {t("common.count_responses", { count: elementSummary[group]?.count })}
                     </p>
                   </div>
                   <ProgressBar
@@ -158,7 +159,7 @@ export const NPSSummary = ({ elementSummary, survey, setFilter }: NPSSummaryProp
                     }>
                     <div className="flex h-32 w-full flex-col items-center justify-end">
                       <div
-                        className="bg-brand-dark w-full rounded-t-lg border border-slate-200 transition-all group-hover:brightness-110"
+                        className="w-full rounded-t-lg border border-slate-200 bg-brand-dark transition-all group-hover:brightness-110"
                         style={{
                           height: `${Math.max(choice.percentage, 2)}%`,
                           opacity,