fix: transaltions

.codex/environments/environment.toml

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

.env.example

@@ -94,12 +94,6 @@ 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
 
@@ -138,31 +132,6 @@ 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=
@@ -181,7 +150,6 @@ NOTION_OAUTH_CLIENT_ID=
 NOTION_OAUTH_CLIENT_SECRET=
 
 # Stripe Billing Variables
-STRIPE_PUBLISHABLE_KEY=
 STRIPE_SECRET_KEY=
 STRIPE_WEBHOOK_SECRET=
 
@@ -216,21 +184,8 @@ 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
-# OTEL_SERVICE_NAME=formbricks
-# OTEL_RESOURCE_ATTRIBUTES=deployment.environment=development
-# OTEL_TRACES_SAMPLER=parentbased_traceidratio
-# OTEL_TRACES_SAMPLER_ARG=1
+# OpenTelemetry URL for tracing
+# OPENTELEMETRY_LISTENER_URL=http://localhost:4318/v1/traces
 
 # Unsplash API Key
 UNSPLASH_ACCESS_KEY=
@@ -270,4 +225,4 @@ REDIS_URL=redis://localhost:6379
 
 
 # Lingo.dev API key for translation generation
-LINGO_API_KEY=your_api_key_here
+LINGODOTDEV_API_KEY=your_api_key_here

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

@@ -285,14 +285,12 @@ 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/workflows/build-and-push-ecr.yml

@@ -92,4 +92,3 @@ 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/release-helm-chart.yml

@@ -65,8 +65,8 @@ jobs:
           set -euo pipefail
 
           echo "Updating Chart.yaml with version: ${VERSION}"
-          yq -i ".version = \"${VERSION}\"" charts/formbricks/Chart.yaml
-          yq -i ".appVersion = \"${VERSION}\"" charts/formbricks/Chart.yaml
+          yq -i ".version = \"${VERSION}\"" helm-chart/Chart.yaml
+          yq -i ".appVersion = \"${VERSION}\"" helm-chart/Chart.yaml
 
           echo "✅ Successfully updated Chart.yaml"
 
@@ -77,7 +77,7 @@ jobs:
           set -euo pipefail
 
           echo "Packaging Helm chart version: ${VERSION}"
-          helm package ./charts/formbricks
+          helm package ./helm-chart
 
           echo "✅ Successfully packaged formbricks-${VERSION}.tgz"
 

.github/workflows/sonarqube.yml

@@ -9,7 +9,6 @@ on:
   merge_group:
 permissions:
   contents: read
-  pull-requests: read
 jobs:
   sonarqube:
     name: SonarQube
@@ -51,9 +50,6 @@ jobs:
           pnpm test:coverage
       - name: SonarQube Scan
         uses: SonarSource/sonarqube-scan-action@2500896589ef8f7247069a56136f8dc177c27ccf
-        with:
-          args: >
-            -Dsonar.verbose=true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
           SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

.github/workflows/translation-check.yml

@@ -6,9 +6,19 @@ permissions:
 on:
   pull_request:
     types: [opened, synchronize, reopened]
+    paths:
+      - "apps/web/**/*.ts"
+      - "apps/web/**/*.tsx"
+      - "apps/web/locales/**/*.json"
+      - "scan-translations.ts"
   push:
     branches:
       - main
+    paths:
+      - "apps/web/**/*.ts"
+      - "apps/web/**/*.tsx"
+      - "apps/web/locales/**/*.json"
+      - "scan-translations.ts"
 
 jobs:
   validate-translations:
@@ -22,39 +32,32 @@ jobs:
         with:
           egress-policy: audit
 
-      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+      - name: Checkout repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
 
-      - name: Check for relevant changes
-        id: changes
-        uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+      - name: Setup Node.js
+        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
         with:
-          filters: |
-            translations:
-              - 'apps/web/**/*.ts'
-              - 'apps/web/**/*.tsx'
-              - 'apps/web/locales/**/*.json'
-              - 'packages/surveys/src/**/*.{ts,tsx}'
-              - 'packages/surveys/locales/**/*.json'
-              - 'packages/email/**/*.{ts,tsx}'
+          node-version: 18
 
-      - name: Setup Node.js 22.x
-        if: steps.changes.outputs.translations == 'true'
-        uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af
+      - name: Setup pnpm
+        uses: pnpm/action-setup@a3252b78c470c02df07e9d59298aecedc3ccdd6d # v3.0.0
         with:
-          node-version: 22.x
-
-      - name: Install pnpm
-        if: steps.changes.outputs.translations == 'true'
-        uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+          version: 9.15.9
 
       - name: Install dependencies
-        if: steps.changes.outputs.translations == 'true'
-        run: pnpm install --config.platform=linux --config.architecture=x64
+        run: pnpm install --frozen-lockfile
 
       - name: Validate translation keys
-        if: steps.changes.outputs.translations == 'true'
-        run: pnpm run scan-translations
+        run: |
+          echo ""
+          echo "🔍 Validating translation keys..."
+          echo ""
+          pnpm run scan-translations
 
-      - name: Skip (no translation-related changes)
-        if: steps.changes.outputs.translations != 'true'
-        run: echo "No translation-related files changed — skipping validation."
+      - name: Summary
+        if: success()
+        run: |
+          echo ""
+          echo "✅ Translation validation completed successfully!"
+          echo ""

.gitignore

@@ -13,7 +13,6 @@
 **/.next/
 **/out/
 **/build
-**/next-env.d.ts
 
 # node
 **/dist/
@@ -45,7 +44,7 @@ yarn-error.log*
 .direnv
 
 # Playwright
-**/test-results/
+/test-results/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
@@ -64,5 +63,3 @@ packages/ios/FormbricksSDK/FormbricksSDK.xcodeproj/project.xcworkspace/xcuserdat
 .cursorrules
 i18n.cache
 stats.html
-# next-agents-md
-.next-docs/

.husky/post-checkout

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

.husky/pre-commit

@@ -1 +1,40 @@
-pnpm lint-staged
+# Load environment variables from .env files
+if [ -f .env ]; then
+  set -a
+  . .env
+  set +a
+fi
+
+pnpm lint-staged
+
+# Run Lingo.dev i18n workflow if LINGODOTDEV_API_KEY is set
+if [ -n "$LINGODOTDEV_API_KEY" ]; then
+  echo ""
+  echo "🌍 Running Lingo.dev translation workflow..."
+  echo ""
+  
+  # Run translation generation and validation
+  if pnpm run i18n; then
+    echo ""
+    echo "✅ Translation validation passed"
+    echo ""
+    # Add updated locale files to git
+    git add apps/web/locales/*.json
+  else
+    echo ""
+    echo "❌ Translation validation failed!"
+    echo ""
+    echo "Please fix the translation issues above before committing:"
+    echo "  • Add missing translation keys to your locale files"
+    echo "  • Remove unused translation keys"
+    echo ""
+    echo "Or run 'pnpm i18n' to see the detailed report"
+    echo ""
+    exit 1
+  fi
+else
+  echo ""
+  echo "⚠️  Skipping translation validation: LINGODOTDEV_API_KEY is not set"
+  echo "   (This is expected for community contributors)"
+  echo ""
+fi

README.md

@@ -127,10 +127,34 @@ 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
@@ -223,4 +247,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.
 
-<a id="readme-de"></a>
+<p align="right"><a href="#top">🔼 Back to top</a></p>

apps/storybook/package.json

@@ -10,20 +10,25 @@
     "build-storybook": "storybook build",
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
+  "dependencies": {
+    "@formbricks/survey-ui": "workspace:*"
+  },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.1",
-    "@storybook/addon-a11y": "10.2.17",
-    "@storybook/addon-links": "10.2.17",
-    "@storybook/addon-onboarding": "10.2.17",
-    "@storybook/react-vite": "10.2.17",
-    "@typescript-eslint/eslint-plugin": "8.57.0",
-    "@tailwindcss/vite": "4.2.1",
-    "@typescript-eslint/parser": "8.57.0",
-    "@vitejs/plugin-react": "5.1.4",
+    "@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",
     "eslint-plugin-react-refresh": "0.4.26",
-    "eslint-plugin-storybook": "10.2.17",
-    "storybook": "10.2.17",
+    "eslint-plugin-storybook": "10.1.11",
+    "prop-types": "15.8.1",
+    "storybook": "10.1.11",
     "vite": "7.3.1",
-    "@storybook/addon-docs": "10.2.17"
+    "@storybook/addon-docs": "10.1.11"
   }
 }

apps/web/.eslintrc.js

@@ -1,4 +1,20 @@
 module.exports = {
   extends: ["@formbricks/eslint-config/legacy-next.js"],
   ignorePatterns: ["**/package.json", "**/tsconfig.json"],
+  overrides: [
+    {
+      files: ["locales/*.json"],
+      plugins: ["i18n-json"],
+      rules: {
+        "i18n-json/identical-keys": [
+          "error",
+          {
+            filePath: require("path").join(__dirname, "locales", "en-US.json"),
+            checkExtraKeys: false,
+            checkMissingKeys: true,
+          },
+        ],
+      },
+    },
+  ],
 };

apps/web/.prettierrc.js

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

apps/web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24-alpine3.23 AS base
+FROM node:22-alpine3.22 AS base
 
 #
 ## step 1: Prune monorepo
@@ -18,9 +18,9 @@ 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
+RUN corepack prepare pnpm@9.15.9 --activate
 
 # Install necessary build tools and compilers
 RUN apk update && apk add --no-cache cmake g++ gcc jq make openssl-dev python3
@@ -67,18 +67,22 @@ 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...
 
+# Extract Prisma version
+RUN jq -r '.devDependencies.prisma' packages/database/package.json > /prisma_version.txt
+
 #
 ## step 3: setup production runner
 #
 FROM base AS runner
 
-# 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 apk update && apk upgrade --no-cache \
-    && npm install --ignore-scripts -g npm@latest \
+RUN npm install --ignore-scripts -g corepack@latest && \
+    corepack enable
+
+RUN apk add --no-cache curl \
+    && apk add --no-cache supercronic \
+    # && addgroup --system --gid 1001 nodejs \
     && addgroup -S nextjs \
     && adduser -S -u 1001 -G nextjs nextjs
 
@@ -103,30 +107,26 @@ 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
 
 COPY --from=installer /app/packages/database/dist ./packages/database/dist
 RUN chown -R nextjs:nextjs ./packages/database/dist && chmod -R 755 ./packages/database/dist
 
-# Copy prisma client packages
 COPY --from=installer /app/node_modules/@prisma/client ./node_modules/@prisma/client
 RUN chown -R nextjs:nextjs ./node_modules/@prisma/client && chmod -R 755 ./node_modules/@prisma/client
 
 COPY --from=installer /app/node_modules/.prisma ./node_modules/.prisma
 RUN chown -R nextjs:nextjs ./node_modules/.prisma && chmod -R 755 ./node_modules/.prisma
 
+COPY --from=installer /prisma_version.txt .
+RUN chown nextjs:nextjs ./prisma_version.txt && chmod 644 ./prisma_version.txt
+
 COPY --from=installer /app/node_modules/@paralleldrive/cuid2 ./node_modules/@paralleldrive/cuid2
 RUN chmod -R 755 ./node_modules/@paralleldrive/cuid2
 
-# 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/uuid ./node_modules/uuid
+RUN chmod -R 755 ./node_modules/uuid
 
 COPY --from=installer /app/node_modules/@noble/hashes ./node_modules/@noble/hashes
 RUN chmod -R 755 ./node_modules/@noble/hashes
@@ -134,25 +134,7 @@ RUN chmod -R 755 ./node_modules/@noble/hashes
 COPY --from=installer /app/node_modules/zod ./node_modules/zod
 RUN chmod -R 755 ./node_modules/zod
 
-# Pino loads transport code in worker threads via dynamic require().
-# Next.js file tracing only traces static imports, missing runtime-loaded files
-# (e.g. pino/lib/transport-stream.js, transport targets).
-# Copy the full packages to ensure all runtime files are available.
-COPY --from=installer /app/node_modules/pino ./node_modules/pino
-RUN chmod -R 755 ./node_modules/pino
-
-COPY --from=installer /app/node_modules/pino-opentelemetry-transport ./node_modules/pino-opentelemetry-transport
-RUN chmod -R 755 ./node_modules/pino-opentelemetry-transport
-
-COPY --from=installer /app/node_modules/pino-abstract-transport ./node_modules/pino-abstract-transport
-RUN chmod -R 755 ./node_modules/pino-abstract-transport
-
-COPY --from=installer /app/node_modules/otlp-logger ./node_modules/otlp-logger
-RUN chmod -R 755 ./node_modules/otlp-logger
-
-# Install prisma CLI globally for database migrations and fix permissions for nextjs user
-RUN npm install --ignore-scripts -g prisma@6 \
-    && chown -R nextjs:nextjs /usr/local/lib/node_modules/prisma
+RUN npm install -g prisma@6
 
 # Create a startup script to handle the conditional logic
 COPY --from=installer /app/apps/web/scripts/docker/next-start.sh /home/nextjs/start.sh
@@ -162,11 +144,13 @@ EXPOSE 3000
 ENV HOSTNAME="0.0.0.0"
 USER nextjs
 
+# Prepare pnpm as the nextjs user to ensure it's available at runtime
 # Prepare volumes for uploads and SAML connections
-RUN mkdir -p /home/nextjs/apps/web/uploads/ && \
+RUN corepack prepare pnpm@9.15.9 --activate && \
+    mkdir -p /home/nextjs/apps/web/uploads/ && \
     mkdir -p /home/nextjs/apps/web/saml-connection
 
 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="absolute inline-flex h-full w-full animate-ping-slow rounded-full bg-slate-400 opacity-75"></span>
+                <span className="animate-ping-slow absolute inline-flex h-full w-full 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,6 +1,5 @@
 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";
@@ -21,12 +20,12 @@ const Page = async (props: ConnectPageProps) => {
   const environment = await getEnvironment(params.environmentId);
 
   if (!environment) {
-    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
+    throw new Error(t("common.environment_not_found"));
   }
 
   const project = await getProjectByEnvironmentId(environment.id);
   if (!project) {
-    throw new ResourceNotFoundError(t("common.workspace"), null);
+    throw new Error(t("common.workspace_not_found"));
   }
 
   const channel = project.config.channel || null;
@@ -47,7 +46,7 @@ const Page = async (props: ConnectPageProps) => {
         channel={channel}
       />
       <Button
-        className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+        className="absolute top-5 right-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,10 +4,7 @@ import { AuthorizationError } from "@formbricks/types/errors";
 import { hasUserEnvironmentAccess } from "@/lib/environment/auth";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
-const OnboardingLayout = async (props: {
-  params: Promise<{ environmentId: string }>;
-  children: React.ReactNode;
-}) => {
+const OnboardingLayout = async (props) => {
   const params = await props.params;
 
   const { children } = props;

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

@@ -2,7 +2,6 @@ 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";
 
@@ -26,7 +25,7 @@ const mockProject: TProject = {
   },
   placement: "bottomRight",
   clickOutsideClose: true,
-  overlay: "none",
+  darkOverlay: false,
   environments: [],
   languages: [],
   logo: null,
@@ -40,13 +39,13 @@ const mockTemplate: TXMTemplate = {
       elements: [
         {
           id: "q1",
-          type: "openText" as TSurveyElementTypeEnum.OpenText,
+          type: "openText" as const,
           inputType: "text" as const,
           headline: { default: "$[projectName] Question" },
           subheader: { default: "" },
           required: false,
           placeholder: { default: "" },
-          charLimit: { enabled: true, max: 1000 },
+          charLimit: 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: string) => key) as unknown as TFunction;
+    const tMock = vi.fn((key) => key) 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: string) => key) as unknown as TFunction;
+    const tMock = vi.fn((key) => key) 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 unknown as TFunction;
+    }) as TFunction;
 
     const result = getXMTemplates(tMock);
 

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

@@ -1,7 +1,6 @@
 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";
@@ -24,22 +23,22 @@ const Page = async (props: XMTemplatePageProps) => {
   const environment = await getEnvironment(params.environmentId);
   const t = await getTranslate();
   if (!session) {
-    throw new AuthenticationError(t("common.not_authenticated"));
+    throw new Error(t("common.session_not_found"));
   }
 
   const user = await getUser(session.user.id);
   if (!user) {
-    throw new AuthenticationError(t("common.not_authenticated"));
+    throw new Error(t("common.user_not_found"));
   }
   if (!environment) {
-    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
+    throw new Error(t("common.environment_not_found"));
   }
 
   const organizationId = await getOrganizationIdFromEnvironmentId(environment.id);
 
   const project = await getProjectByEnvironmentId(environment.id);
   if (!project) {
-    throw new ResourceNotFoundError(t("common.workspace"), null);
+    throw new Error(t("common.workspace_not_found"));
   }
 
   const projects = await getUserProjects(session.user.id, organizationId);
@@ -50,7 +49,7 @@ const Page = async (props: XMTemplatePageProps) => {
       <XMTemplateList project={project} user={user} environmentId={environment.id} />
       {projects.length >= 2 && (
         <Button
-          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-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

@@ -19,8 +19,8 @@ describe("getTeamsByOrganizationId", () => {
 
   test("returns mapped teams", async () => {
     const mockTeams = [
-      { 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" },
+      { id: "t1", name: "Team 1" },
+      { id: "t2", name: "Team 2" },
     ];
     vi.mocked(prisma.team.findMany).mockResolvedValueOnce(mockTeams);
     const result = await getTeamsByOrganizationId("org1");

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

@@ -22,10 +22,12 @@ export const getTeamsByOrganizationId = reactCache(
         },
       });
 
-      return teams.map((team: TOrganizationTeam) => ({
+      const projectTeams = teams.map((team) => ({
         id: team.id,
         name: team.name,
       }));
+
+      return projectTeams;
     } catch (error) {
       if (error instanceof Prisma.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(
-        "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"
+        "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"
       )}>
       <Image src={FBLogo} width={160} height={30} alt={t("environments.formbricks_logo")} />
 

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

@@ -5,10 +5,7 @@ import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getUserProjects } from "@/lib/project/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 
-const LandingLayout = async (props: {
-  params: Promise<{ organizationId: string }>;
-  children: React.ReactNode;
-}) => {
+const LandingLayout = async (props) => {
   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: { params: Promise<{ organizationId: string }> }) => {
+const Page = async (props) => {
   const params = await props.params;
   const t = await getTranslate();
 
@@ -26,8 +26,7 @@ const Page = async (props: { params: Promise<{ organizationId: string }> }) => {
   const isMultiOrgEnabled = await getIsMultiOrgEnabled();
 
   const membership = await getMembershipByUserIdOrganizationId(session.user.id, organization.id);
-  const { isBilling } = getAccessFlags(membership?.role);
-  const isMembershipPending = membership?.role === undefined;
+  const { isMember } = getAccessFlags(membership?.role);
 
   return (
     <div className="flex min-h-full min-w-full flex-row">
@@ -45,8 +44,7 @@ const Page = async (props: { params: Promise<{ organizationId: string }> }) => {
               isLicenseActive={false}
               isOwnerOrManager={false}
               isAccessControlAllowed={false}
-              isBilling={isBilling}
-              isMembershipPending={isMembershipPending}
+              isMember={isMember}
               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 { AuthenticationError, AuthorizationError, ResourceNotFoundError } from "@formbricks/types/errors";
+import { AuthorizationError } from "@formbricks/types/errors";
 import { canUserAccessOrganization } from "@/lib/organization/auth";
 import { getOrganization } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
@@ -8,10 +8,7 @@ import { getTranslate } from "@/lingodotdev/server";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { ToasterClient } from "@/modules/ui/components/toaster-client";
 
-const ProjectOnboardingLayout = async (props: {
-  params: Promise<{ organizationId: string }>;
-  children: React.ReactNode;
-}) => {
+const ProjectOnboardingLayout = async (props) => {
   const params = await props.params;
 
   const { children } = props;
@@ -25,7 +22,7 @@ const ProjectOnboardingLayout = async (props: {
 
   const user = await getUser(session.user.id);
   if (!user) {
-    throw new AuthenticationError(t("common.not_authenticated"));
+    throw new Error(t("common.user_not_found"));
   }
 
   const isAuthorized = await canUserAccessOrganization(session.user.id, params.organizationId);
@@ -36,7 +33,7 @@ const ProjectOnboardingLayout = async (props: {
 
   const organization = await getOrganization(params.organizationId);
   if (!organization) {
-    throw new ResourceNotFoundError(t("common.organization"), params.organizationId);
+    throw new Error(t("common.organization_not_found"));
   }
 
   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 right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-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,6 +1,5 @@
 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";
@@ -9,10 +8,7 @@ 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: {
-  params: Promise<{ organizationId: string }>;
-  children: React.ReactNode;
-}) => {
+const OnboardingLayout = async (props) => {
   const params = await props.params;
 
   const { children } = props;
@@ -29,13 +25,11 @@ const OnboardingLayout = async (props: {
 
   const organization = await getOrganization(params.organizationId);
   if (!organization) {
-    throw new ResourceNotFoundError(t("common.organization"), params.organizationId);
+    throw new Error(t("common.organization_not_found"));
   }
 
-  const [organizationProjectsLimit, organizationProjectsCount] = await Promise.all([
-    getOrganizationProjectsLimit(organization.id),
-    getOrganizationProjectsCount(organization.id),
-  ]);
+  const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
+  const organizationProjectsCount = await 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 right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-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

@@ -1,22 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -3,7 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
@@ -17,7 +17,6 @@ import {
 import { createProjectAction } from "@/app/(app)/environments/[environmentId]/actions";
 import { previewSurvey } from "@/app/lib/templates";
 import { FORMBRICKS_SURVEYS_FILTERS_KEY_LS } from "@/lib/localStorage";
-import { buildStylingFromBrandColor } from "@/lib/styling/constants";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { TOrganizationTeam } from "@/modules/ee/teams/project-teams/types/team";
 import { CreateTeamModal } from "@/modules/ee/teams/team-list/components/create-team-modal";
@@ -65,17 +64,10 @@ export const ProjectSettings = ({
   const { t } = useTranslation();
   const addProject = async (data: TProjectUpdateInput) => {
     try {
-      // Build the full styling from the chosen brand color so all derived
-      // colours (question, button, input, option, progress, etc.) are persisted.
-      // Without this, only brandColor is saved and the look-and-feel page falls
-      // back to STYLE_DEFAULTS computed from the default brand (#64748b).
-      const fullStyling = buildStylingFromBrandColor(data.styling?.brandColor?.light);
-
       const createProjectResponse = await createProjectAction({
         organizationId,
         data: {
           ...data,
-          styling: fullStyling,
           config: { channel, industry },
           teamIds: data.teamIds,
         },
@@ -120,7 +112,6 @@ export const ProjectSettings = ({
   const projectName = form.watch("name");
   const logoUrl = form.watch("logo.url");
   const brandColor = form.watch("styling.brandColor.light") ?? defaultBrandColor;
-  const previewStyling = useMemo(() => buildStylingFromBrandColor(brandColor), [brandColor]);
   const { isSubmitting } = form.formState;
 
   const organizationTeamsOptions = organizationTeams.map((team) => ({
@@ -228,27 +219,29 @@ export const ProjectSettings = ({
         </FormProvider>
       </div>
 
-      <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">
+      <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">
         {logoUrl && (
           <Image
             src={logoUrl}
             alt="Logo"
             width={256}
             height={56}
-            className="absolute left-2 top-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
+            className="absolute top-2 left-2 -mb-6 h-20 w-auto max-w-64 rounded-lg border object-contain p-1"
           />
         )}
         <p className="text-sm text-slate-400">{t("common.preview")}</p>
-        <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 className="z-0 h-3/4 w-3/4">
+          <SurveyInline
+            appUrl={publicDomain}
+            isPreviewMode={true}
+            survey={previewSurvey(projectName || "my Product", t)}
+            styling={{ brandColor: { light: brandColor } }}
+            isBrandingEnabled={false}
+            languageCode="default"
+            onFileUpload={async (file) => file.name}
+            autoFocus={false}
+          />
+        </div>
       </div>
       <CreateTeamModal
         open={createTeamModalOpen}

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

@@ -1,7 +1,6 @@
 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";
@@ -43,10 +42,10 @@ const Page = async (props: ProjectSettingsPageProps) => {
 
   const organizationTeams = await getTeamsByOrganizationId(params.organizationId);
 
-  const isAccessControlAllowed = await getAccessControlPermission(organization.id);
+  const isAccessControlAllowed = await getAccessControlPermission(organization.billing.plan);
 
   if (!organizationTeams) {
-    throw new ResourceNotFoundError(t("common.team"), null);
+    throw new Error(t("common.organization_teams_not_found"));
   }
 
   const publicDomain = getPublicDomain();
@@ -70,7 +69,7 @@ const Page = async (props: ProjectSettingsPageProps) => {
       />
       {projects.length >= 1 && (
         <Button
-          className="absolute right-5 top-5 !mt-0 text-slate-500 hover:text-slate-700"
+          className="absolute top-5 right-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: OnboardingOptionsContainerProps["options"][number]) => {
+  const getOptionCard = (option) => {
     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.cuid2(),
+  id: z.string().cuid2(),
   name: z.string(),
 });
 

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

@@ -1,12 +1,8 @@
 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: {
-  params: Promise<{ environmentId: string }>;
-  children: React.ReactNode;
-}) => {
+const SurveyEditorEnvironmentLayout = async (props) => {
   const params = await props.params;
 
   const { children } = props;
@@ -18,13 +14,13 @@ const SurveyEditorEnvironmentLayout = async (props: {
   }
 
   if (!user) {
-    throw new AuthenticationError(t("common.not_authenticated"));
+    throw new Error(t("common.user_not_found"));
   }
 
   const environment = await getEnvironment(params.environmentId);
 
   if (!environment) {
-    throw new ResourceNotFoundError(t("common.environment"), params.environmentId);
+    throw new Error(t("common.environment_not_found"));
   }
 
   return (

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

@@ -6,26 +6,15 @@ import { useTranslation } from "react-i18next";
 import { Button } from "@/modules/ui/components/button";
 import { Confetti } from "@/modules/ui/components/confetti";
 
-const BILLING_CONFIRMATION_ENVIRONMENT_ID_KEY = "billingConfirmationEnvironmentId";
+interface ConfirmationPageProps {
+  environmentId: string;
+}
 
-export const ConfirmationPage = () => {
+export const ConfirmationPage = ({ environmentId }: ConfirmationPageProps) => {
   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 (
@@ -41,12 +30,7 @@ export const ConfirmationPage = () => {
           </p>
         </div>
         <Button asChild className="w-full justify-center">
-          <Link
-            href={
-              resolvedEnvironmentId
-                ? `/environments/${resolvedEnvironmentId}/settings/billing`
-                : "/environments"
-            }>
+          <Link href={`/environments/${environmentId}/settings/billing`}>
             {t("billing_confirmation.back_to_billing_overview")}
           </Link>
         </Button>

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

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

apps/web/app/(app)/environments/[environmentId]/(main-nav)/layout.tsx

@@ -1,24 +0,0 @@
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
-import { EnvironmentLayout } from "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout";
-import { authOptions } from "@/modules/auth/lib/authOptions";
-import { getEnvironmentLayoutData } from "@/modules/environments/lib/utils";
-
-const MainNavLayout = async (props: {
-  params: Promise<{ environmentId: string }>;
-  children: React.ReactNode;
-}) => {
-  const params = await props.params;
-  const { children } = props;
-
-  const session = await getServerSession(authOptions);
-  if (!session?.user) {
-    return redirect("/auth/login");
-  }
-
-  const layoutData = await getEnvironmentLayoutData(params.environmentId, session.user.id);
-
-  return <EnvironmentLayout layoutData={layoutData}>{children}</EnvironmentLayout>;
-};
-
-export default MainNavLayout;

apps/web/app/(app)/environments/[environmentId]/(main-nav)/surveys/[surveyId]/(analysis)/summary/components/SummaryImpressions.tsx

@@ -1,125 +0,0 @@
-"use client";
-
-import { AlertCircleIcon, InfoIcon } from "lucide-react";
-import Link from "next/link";
-import { useTranslation } from "react-i18next";
-import { TDisplayWithContact } from "@formbricks/types/displays";
-import { TUserLocale } from "@formbricks/types/user";
-import { timeSince } from "@/lib/time";
-import { Button } from "@/modules/ui/components/button";
-
-interface SummaryImpressionsProps {
-  displays: TDisplayWithContact[];
-  isLoading: boolean;
-  hasMore: boolean;
-  displaysError: string | null;
-  environmentId: string;
-  locale: TUserLocale;
-  onLoadMore: () => void;
-  onRetry: () => void;
-}
-
-const getDisplayContactIdentifier = (display: TDisplayWithContact): string => {
-  if (!display.contact) return "";
-  return display.contact.attributes?.email || display.contact.attributes?.userId || display.contact.id;
-};
-
-export const SummaryImpressions = ({
-  displays,
-  isLoading,
-  hasMore,
-  displaysError,
-  environmentId,
-  locale,
-  onLoadMore,
-  onRetry,
-}: SummaryImpressionsProps) => {
-  const { t } = useTranslation();
-
-  const renderContent = () => {
-    if (displaysError) {
-      return (
-        <div className="p-8">
-          <div className="flex flex-col items-center gap-4 text-center">
-            <div className="flex items-center gap-2 text-red-600">
-              <AlertCircleIcon className="h-5 w-5" />
-              <span className="text-sm font-medium">{t("common.error_loading_data")}</span>
-            </div>
-            <p className="text-sm text-slate-500">{displaysError}</p>
-            <Button onClick={onRetry} variant="secondary" size="sm">
-              {t("common.try_again")}
-            </Button>
-          </div>
-        </div>
-      );
-    }
-
-    if (displays.length === 0) {
-      return (
-        <div className="p-8 text-center text-sm text-slate-500">
-          {t("environments.surveys.summary.no_identified_impressions")}
-        </div>
-      );
-    }
-
-    return (
-      <>
-        <div className="grid min-h-10 grid-cols-4 items-center border-b border-slate-200 bg-slate-100 text-sm font-semibold text-slate-600">
-          <div className="col-span-2 px-4 md:px-6">{t("common.user")}</div>
-          <div className="col-span-2 px-4 md:px-6">{t("environments.contacts.survey_viewed_at")}</div>
-        </div>
-
-        <div className="max-h-[62vh] overflow-y-auto">
-          {displays.map((display) => (
-            <div
-              key={display.id}
-              className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-xs text-slate-800 last:border-transparent md:text-sm">
-              <div className="col-span-2 pl-4 md:pl-6">
-                {display.contact ? (
-                  <Link
-                    className="ph-no-capture break-all text-slate-600 hover:underline"
-                    href={`/environments/${environmentId}/contacts/${display.contact.id}`}>
-                    {getDisplayContactIdentifier(display)}
-                  </Link>
-                ) : (
-                  <span className="break-all text-slate-600">{t("common.anonymous")}</span>
-                )}
-              </div>
-              <div className="col-span-2 px-4 text-slate-500 md:px-6">
-                {timeSince(display.createdAt.toString(), locale)}
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {hasMore && (
-          <div className="flex justify-center border-t border-slate-100 py-4">
-            <Button onClick={onLoadMore} variant="secondary" size="sm">
-              {t("common.load_more")}
-            </Button>
-          </div>
-        )}
-      </>
-    );
-  };
-
-  if (isLoading) {
-    return (
-      <div className="rounded-xl border border-slate-200 bg-white p-8 shadow-sm">
-        <div className="flex items-center justify-center">
-          <div className="h-6 w-32 animate-pulse rounded-full bg-slate-200"></div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <div className="flex items-center gap-2 rounded-t-xl border-b border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
-        <InfoIcon className="h-4 w-4 shrink-0" />
-        <span>{t("environments.surveys.summary.impressions_identified_only")}</span>
-      </div>
-      {renderContent()}
-    </div>
-  );
-};

apps/web/app/(app)/environments/[environmentId]/(main-nav)/surveys/[surveyId]/actions.ts

@@ -1,106 +0,0 @@
-"use server";
-
-import { z } from "zod";
-import { ZId } from "@formbricks/types/common";
-import { ResourceNotFoundError } from "@formbricks/types/errors";
-import { ZResponseFilterCriteria } from "@formbricks/types/responses";
-import { capturePostHogEvent } from "@/lib/posthog";
-import { getResponseDownloadFile, getResponseFilteringValues } from "@/lib/response/service";
-import { getSurvey } from "@/lib/survey/service";
-import { getTagsByEnvironmentId } from "@/lib/tag/service";
-import { authenticatedActionClient } from "@/lib/utils/action-client";
-import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
-import { getOrganizationIdFromSurveyId, getProjectIdFromSurveyId } from "@/lib/utils/helper";
-import { getIsQuotasEnabled } from "@/modules/ee/license-check/lib/utils";
-import { getQuotas } from "@/modules/ee/quotas/lib/quotas";
-import { getOrganizationBilling } from "@/modules/survey/lib/survey";
-
-const ZGetResponsesDownloadUrlAction = z.object({
-  surveyId: ZId,
-  format: z.union([z.literal("csv"), z.literal("xlsx")]),
-  filterCriteria: ZResponseFilterCriteria,
-});
-
-export const getResponsesDownloadUrlAction = authenticatedActionClient
-  .inputSchema(ZGetResponsesDownloadUrlAction)
-  .action(async ({ ctx, parsedInput }) => {
-    const organizationId = await getOrganizationIdFromSurveyId(parsedInput.surveyId);
-
-    await checkAuthorizationUpdated({
-      userId: ctx.user.id,
-      organizationId,
-      access: [
-        {
-          type: "organization",
-          roles: ["owner", "manager"],
-        },
-        {
-          type: "projectTeam",
-          minPermission: "read",
-          projectId: await getProjectIdFromSurveyId(parsedInput.surveyId),
-        },
-      ],
-    });
-
-    const result = await getResponseDownloadFile(
-      parsedInput.surveyId,
-      parsedInput.format,
-      parsedInput.filterCriteria
-    );
-
-    capturePostHogEvent(ctx.user.id, "responses_exported", {
-      survey_id: parsedInput.surveyId,
-      format: parsedInput.format,
-      filter_applied: Object.keys(parsedInput.filterCriteria ?? {}).length > 0,
-      organization_id: organizationId,
-    });
-
-    return result;
-  });
-
-const ZGetSurveyFilterDataAction = z.object({
-  surveyId: ZId,
-});
-
-export const getSurveyFilterDataAction = authenticatedActionClient
-  .inputSchema(ZGetSurveyFilterDataAction)
-  .action(async ({ ctx, parsedInput }) => {
-    const survey = await getSurvey(parsedInput.surveyId);
-
-    if (!survey) {
-      throw new ResourceNotFoundError("Survey", parsedInput.surveyId);
-    }
-
-    const organizationId = await getOrganizationIdFromSurveyId(parsedInput.surveyId);
-
-    await checkAuthorizationUpdated({
-      userId: ctx.user.id,
-      organizationId: organizationId,
-      access: [
-        {
-          type: "organization",
-          roles: ["owner", "manager"],
-        },
-        {
-          type: "projectTeam",
-          minPermission: "read",
-          projectId: await getProjectIdFromSurveyId(parsedInput.surveyId),
-        },
-      ],
-    });
-
-    const organizationBilling = await getOrganizationBilling(organizationId);
-    if (!organizationBilling) {
-      throw new ResourceNotFoundError("Organization", organizationId);
-    }
-
-    const isQuotasAllowed = await getIsQuotasEnabled(organizationId);
-
-    const [tags, { contactAttributes: attributes, meta, hiddenFields }, quotas = []] = await Promise.all([
-      getTagsByEnvironmentId(survey.environmentId),
-      getResponseFilteringValues(parsedInput.surveyId),
-      isQuotasAllowed ? getQuotas(parsedInput.surveyId) : [],
-    ]);
-
-    return { environmentTags: tags, attributes, meta, hiddenFields, quotas };
-  });

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

@@ -1,28 +0,0 @@
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { SettingsSidebar } from "@/modules/settings/components/settings-sidebar";
-
-const SettingsLayout = async (props: {
-  params: Promise<{ environmentId: string }>;
-  children: React.ReactNode;
-}) => {
-  const params = await props.params;
-  const { children } = props;
-
-  const { project, organization, currentUserMembership } = await getEnvironmentAuth(params.environmentId);
-
-  return (
-    <div className="flex h-screen min-h-screen overflow-hidden">
-      <SettingsSidebar
-        environmentId={params.environmentId}
-        projectName={project.name}
-        organizationName={organization.name}
-        isFormbricksCloud={IS_FORMBRICKS_CLOUD}
-        membershipRole={currentUserMembership?.role}
-      />
-      <div className="flex flex-1 flex-col overflow-y-auto bg-slate-50">{children}</div>
-    </div>
-  );
-};
-
-export default SettingsLayout;

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

@@ -1,139 +0,0 @@
-import { getServerSession } from "next-auth";
-import { prisma } from "@formbricks/database";
-import { AuthenticationError, ResourceNotFoundError } from "@formbricks/types/errors";
-import { TUserNotificationSettings } from "@formbricks/types/user";
-import { EditAlerts } from "@/app/(app)/environments/[environmentId]/settings/(account)/notifications/components/EditAlerts";
-import { IntegrationsTip } from "@/app/(app)/environments/[environmentId]/settings/(account)/notifications/components/IntegrationsTip";
-import type { Membership } from "@/app/(app)/environments/[environmentId]/settings/(account)/notifications/types";
-import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
-import { getUser } from "@/lib/user/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { authOptions } from "@/modules/auth/lib/authOptions";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const setCompleteNotificationSettings = (
-  notificationSettings: TUserNotificationSettings,
-  memberships: Membership[]
-): TUserNotificationSettings => {
-  const newNotificationSettings: TUserNotificationSettings = {
-    alert: {} as Record<string, boolean>,
-    unsubscribedOrganizationIds: notificationSettings.unsubscribedOrganizationIds || [],
-  };
-  for (const membership of memberships) {
-    for (const project of membership.organization.projects) {
-      for (const environment of project.environments) {
-        for (const survey of environment.surveys) {
-          newNotificationSettings.alert[survey.id] =
-            (notificationSettings as unknown as Record<string, Record<string, boolean>>)[survey.id]
-              ?.responseFinished ||
-            (notificationSettings.alert && notificationSettings.alert[survey.id]) ||
-            false;
-        }
-      }
-    }
-  }
-  return newNotificationSettings;
-};
-
-const getMemberships = async (userId: string): Promise<Membership[]> => {
-  const memberships = await prisma.membership.findMany({
-    where: {
-      userId,
-      role: { not: "billing" },
-      OR: [
-        { role: { in: ["owner", "manager"] } },
-        {
-          organization: {
-            projects: {
-              some: {
-                projectTeams: { some: { team: { teamUsers: { some: { userId } } } } },
-              },
-            },
-          },
-        },
-      ],
-    },
-    select: {
-      organization: {
-        select: {
-          id: true,
-          name: true,
-          projects: {
-            where: {
-              OR: [
-                {
-                  organization: {
-                    memberships: { some: { userId, role: { in: ["owner", "manager"] } } },
-                  },
-                },
-                { projectTeams: { some: { team: { teamUsers: { some: { userId } } } } } },
-              ],
-            },
-            select: {
-              id: true,
-              name: true,
-              environments: {
-                where: { type: "production" },
-                select: {
-                  id: true,
-                  surveys: { select: { id: true, name: true } },
-                },
-              },
-            },
-          },
-        },
-      },
-    },
-  });
-  return memberships;
-};
-
-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 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 AuthenticationError(t("common.not_authenticated"));
-  }
-
-  if (!memberships) {
-    throw new ResourceNotFoundError(t("common.membership"), null);
-  }
-
-  if (user?.notificationSettings) {
-    user.notificationSettings = setCompleteNotificationSettings(user.notificationSettings, memberships);
-  }
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle={t("common.account_settings")} />
-      <SettingsCard
-        title={t("environments.settings.notifications.email_alerts_surveys")}
-        description={t(
-          "environments.settings.notifications.set_up_an_alert_to_get_an_email_on_new_responses"
-        )}>
-        <EditAlerts
-          memberships={memberships}
-          user={user}
-          environmentId={params.environmentId}
-          autoDisableNotificationType={autoDisableNotificationType}
-          autoDisableNotificationElementId={autoDisableNotificationElementId}
-        />
-      </SettingsCard>
-      <IntegrationsTip environmentId={params.environmentId} />
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

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

@@ -1,99 +0,0 @@
-import { AuthenticationError } from "@formbricks/types/errors";
-import { AccountSecurity } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/AccountSecurity";
-import { DeleteAccount } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/DeleteAccount";
-import { EditProfileDetailsForm } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/components/EditProfileDetailsForm";
-import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
-import { EMAIL_VERIFICATION_DISABLED, IS_FORMBRICKS_CLOUD, PASSWORD_RESET_DISABLED } from "@/lib/constants";
-import { getOrganizationsWhereUserIsSingleOwner } from "@/lib/organization/service";
-import { getUser } from "@/lib/user/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { getIsMultiOrgEnabled, getIsTwoFactorAuthEnabled } from "@/modules/ee/license-check/lib/utils";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-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 { UpgradePrompt } from "@/modules/ui/components/upgrade-prompt";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const isTwoFactorAuthEnabled = await getIsTwoFactorAuthEnabled();
-  const isMultiOrgEnabled = await getIsMultiOrgEnabled();
-  const params = await props.params;
-  const t = await getTranslate();
-  const { environmentId } = params;
-
-  const { session } = await getEnvironmentAuth(params.environmentId);
-
-  const organizationsWithSingleOwner = await getOrganizationsWhereUserIsSingleOwner(session.user.id);
-
-  const user = session?.user ? await getUser(session.user.id) : null;
-
-  if (!user) {
-    throw new AuthenticationError(t("common.not_authenticated"));
-  }
-
-  const isPasswordResetEnabled = !PASSWORD_RESET_DISABLED && user.identityProvider === "email";
-
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle={t("common.account_settings")} />
-      {user && (
-        <div>
-          <SettingsCard
-            title={t("environments.settings.profile.personal_information")}
-            description={t("environments.settings.profile.update_personal_info")}>
-            <EditProfileDetailsForm
-              user={user}
-              emailVerificationDisabled={EMAIL_VERIFICATION_DISABLED}
-              isPasswordResetEnabled={isPasswordResetEnabled}
-            />
-          </SettingsCard>
-          {user.identityProvider === "email" && (
-            <SettingsCard
-              title={t("common.security")}
-              description={t("environments.settings.profile.security_description")}>
-              {!isTwoFactorAuthEnabled && !user.twoFactorEnabled ? (
-                <UpgradePrompt
-                  title={t("environments.settings.profile.unlock_two_factor_authentication")}
-                  description={t("environments.settings.profile.two_factor_authentication_description")}
-                  buttons={[
-                    {
-                      text: IS_FORMBRICKS_CLOUD
-                        ? t("common.upgrade_plan")
-                        : t("common.request_trial_license"),
-                      href: IS_FORMBRICKS_CLOUD
-                        ? `/environments/${environmentId}/settings/organization/billing`
-                        : "https://formbricks.com/upgrade-self-hosting-license",
-                    },
-                    {
-                      text: t("common.learn_more"),
-                      href: IS_FORMBRICKS_CLOUD
-                        ? `/environments/${environmentId}/settings/organization/billing`
-                        : "https://formbricks.com/learn-more-self-hosting-license",
-                    },
-                  ]}
-                />
-              ) : (
-                <AccountSecurity user={user} />
-              )}
-            </SettingsCard>
-          )}
-
-          <SettingsCard
-            title={t("environments.settings.profile.delete_account")}
-            description={t("environments.settings.profile.confirm_delete_account")}>
-            <DeleteAccount
-              session={session}
-              IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
-              user={user}
-              organizationsWithSingleOwner={organizationsWithSingleOwner}
-              isMultiOrgEnabled={isMultiOrgEnabled}
-            />
-          </SettingsCard>
-          <IdBadge id={user.id} label={t("common.profile_id")} variant="column" />
-        </div>
-      )}
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

apps/web/app/(app)/environments/[environmentId]/(settings)/settings/organization/api-keys/page.tsx

@@ -1,43 +0,0 @@
-import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
-import { DEFAULT_LOCALE, IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getUserLocale } from "@/lib/user/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { ApiKeyList } from "@/modules/organization/settings/api-keys/components/api-key-list";
-import { getProjectsByOrganizationId } from "@/modules/organization/settings/api-keys/lib/projects";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const t = await getTranslate();
-
-  const { currentUserMembership, organization, session } = await getEnvironmentAuth(params.environmentId);
-
-  const [projects, locale] = await Promise.all([
-    getProjectsByOrganizationId(organization.id),
-    getUserLocale(session.user.id),
-  ]);
-
-  const canAccessApiKeys = currentUserMembership.role === "owner" || currentUserMembership.role === "manager";
-
-  if (!canAccessApiKeys) throw new Error(t("common.not_authorized"));
-
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle={t("environments.settings.general.organization_settings")} />
-      <SettingsCard
-        title={t("common.api_keys")}
-        description={t("environments.settings.api_keys.api_keys_description")}>
-        <ApiKeyList
-          organizationId={organization.id}
-          locale={locale ?? DEFAULT_LOCALE}
-          isReadOnly={!canAccessApiKeys}
-          projects={projects}
-        />
-      </SettingsCard>
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

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

@@ -1,64 +0,0 @@
-import { notFound } from "next/navigation";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getMonthlyOrganizationResponseCount } from "@/lib/organization/service";
-import { getOrganizationProjectsCount } from "@/lib/project/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { PricingTable } from "@/modules/ee/billing/components/pricing-table";
-import { getCloudBillingDisplayContext } from "@/modules/ee/billing/lib/cloud-billing-display";
-import { getStripeBillingCatalogDisplay } from "@/modules/ee/billing/lib/stripe-billing-catalog";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const t = await getTranslate();
-
-  const { organization, isMember, currentUserMembership } = await getEnvironmentAuth(params.environmentId);
-
-  if (!IS_FORMBRICKS_CLOUD) {
-    notFound();
-  }
-
-  const [cloudBillingDisplayContext, billingCatalog] = await Promise.all([
-    getCloudBillingDisplayContext(organization.id),
-    getStripeBillingCatalogDisplay(),
-  ]);
-
-  const organizationWithSyncedBilling = {
-    ...organization,
-    billing: cloudBillingDisplayContext.billing,
-  };
-
-  const [responseCount, projectCount] = await Promise.all([
-    getMonthlyOrganizationResponseCount(organization.id),
-    getOrganizationProjectsCount(organization.id),
-  ]);
-
-  const hasBillingRights = !isMember;
-
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle={t("environments.settings.general.organization_settings")} />
-
-      <PricingTable
-        organization={organizationWithSyncedBilling}
-        environmentId={params.environmentId}
-        responseCount={responseCount}
-        projectCount={projectCount}
-        hasBillingRights={hasBillingRights}
-        currentCloudPlan={cloudBillingDisplayContext.currentCloudPlan}
-        currentBillingInterval={cloudBillingDisplayContext.currentBillingInterval}
-        currentSubscriptionStatus={cloudBillingDisplayContext.currentSubscriptionStatus}
-        pendingChange={cloudBillingDisplayContext.pendingChange}
-        usageCycleStart={cloudBillingDisplayContext.usageCycleStart}
-        usageCycleEnd={cloudBillingDisplayContext.usageCycleEnd}
-        isStripeSetupIncomplete={!organizationWithSyncedBilling.billing.stripeCustomerId}
-        trialDaysRemaining={cloudBillingDisplayContext.trialDaysRemaining}
-        billingCatalog={billingCatalog}
-      />
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

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

@@ -1,65 +0,0 @@
-import { notFound } from "next/navigation";
-import { AuthenticationError } from "@formbricks/types/errors";
-import { PrettyUrlsTable } from "@/app/(app)/environments/[environmentId]/settings/(organization)/domain/components/pretty-urls-table";
-import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
-import { IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED } from "@/lib/constants";
-import { getTranslate } from "@/lingodotdev/server";
-import { getWhiteLabelPermission } from "@/modules/ee/license-check/lib/utils";
-import { FaviconCustomizationSettings } from "@/modules/ee/whitelabel/favicon-customization/components/favicon-customization-settings";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { getSurveysWithSlugsByOrganizationId } from "@/modules/survey/lib/slug";
-import { Alert, AlertDescription } from "@/modules/ui/components/alert";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const t = await getTranslate();
-
-  if (IS_FORMBRICKS_CLOUD) {
-    return notFound();
-  }
-
-  const { session, currentUserMembership, organization, isOwner, isManager } = await getEnvironmentAuth(
-    params.environmentId
-  );
-
-  if (!session) {
-    throw new AuthenticationError(t("common.not_authenticated"));
-  }
-
-  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.id);
-  const isOwnerOrManager = isManager || isOwner;
-
-  const surveys = await getSurveysWithSlugsByOrganizationId(organization.id);
-
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle={t("environments.settings.general.organization_settings")} />
-
-      {!IS_STORAGE_CONFIGURED && (
-        <div className="max-w-4xl">
-          <Alert variant="warning">
-            <AlertDescription>{t("common.storage_not_configured")}</AlertDescription>
-          </Alert>
-        </div>
-      )}
-
-      <FaviconCustomizationSettings
-        organization={organization}
-        hasWhiteLabelPermission={hasWhiteLabelPermission}
-        environmentId={params.environmentId}
-        isReadOnly={!isOwnerOrManager}
-        isStorageConfigured={IS_STORAGE_CONFIGURED}
-      />
-
-      <SettingsCard
-        title={t("environments.settings.domain.title")}
-        description={t("environments.settings.domain.description")}>
-        <PrettyUrlsTable surveys={surveys} />
-      </SettingsCard>
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

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

@@ -1,166 +0,0 @@
-import { CheckIcon } from "lucide-react";
-import Link from "next/link";
-import { notFound } from "next/navigation";
-import { EnterpriseLicenseFeaturesTable } from "@/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/components/EnterpriseLicenseFeaturesTable";
-import { EnterpriseLicenseStatus } from "@/app/(app)/environments/[environmentId]/settings/(organization)/enterprise/components/EnterpriseLicenseStatus";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getTranslate } from "@/lingodotdev/server";
-import { GRACE_PERIOD_MS, getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
-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";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const t = await getTranslate();
-  if (IS_FORMBRICKS_CLOUD) {
-    return notFound();
-  }
-
-  const { isMember, currentUserMembership } = await getEnvironmentAuth(params.environmentId);
-
-  const isPricingDisabled = isMember;
-
-  if (isPricingDisabled) {
-    return notFound();
-  }
-
-  const licenseState = await getEnterpriseLicense();
-  const hasLicense = licenseState.status !== "no-license";
-
-  const paidFeatures = [
-    { title: t("environments.settings.billing.remove_branding"), comingSoon: false, onRequest: false },
-    { title: t("environments.settings.enterprise.sso"), comingSoon: false, onRequest: false },
-    {
-      title: t("environments.workspace.languages.multi_language_surveys"),
-      comingSoon: false,
-      onRequest: false,
-    },
-    {
-      title: t("environments.settings.enterprise.organization_roles"),
-      comingSoon: false,
-      onRequest: false,
-    },
-    { title: t("environments.settings.enterprise.teams"), comingSoon: false, onRequest: false },
-    {
-      title: t("environments.settings.enterprise.contacts_and_segments"),
-      comingSoon: false,
-      onRequest: false,
-    },
-    { title: t("environments.settings.enterprise.audit_logs"), comingSoon: false, onRequest: true },
-    { title: t("environments.settings.enterprise.saml_sso"), comingSoon: false, onRequest: true },
-    {
-      title: t("environments.settings.enterprise.service_level_agreement"),
-      comingSoon: false,
-      onRequest: true,
-    },
-    {
-      title: t("environments.settings.enterprise.soc2_hipaa_iso_27001_compliance_check"),
-      comingSoon: false,
-      onRequest: true,
-    },
-  ];
-
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle={t("environments.settings.general.organization_settings")} />
-      {hasLicense ? (
-        <>
-          <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">
-            <svg
-              viewBox="0 0 1024 1024"
-              className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
-              aria-hidden="true">
-              <circle
-                cx={512}
-                cy={512}
-                r={512}
-                fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
-                fillOpacity="0.7"
-              />
-              <defs>
-                <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
-                  <stop stopColor="#00E6CA" />
-                  <stop offset={0} stopColor="#00C4B8" />
-                </radialGradient>
-              </defs>
-            </svg>
-            <div className="mx-auto text-center lg:mx-0 lg:flex-auto lg:py-16 lg:text-left">
-              <h2 className="text-2xl font-bold text-white sm:text-3xl">
-                {t("environments.settings.enterprise.unlock_the_full_power_of_formbricks_free_for_30_days")}
-              </h2>
-              <p className="text-md mt-6 leading-8 text-slate-300">
-                {t("environments.settings.enterprise.keep_full_control_over_your_data_privacy_and_security")}
-                <br />
-                {t(
-                  "environments.settings.enterprise.get_an_enterprise_license_to_get_access_to_all_features"
-                )}
-              </p>
-            </div>
-          </div>
-          <div className="mt-8 rounded-lg border border-slate-300 bg-slate-100 shadow-sm">
-            <div className="p-8">
-              <h2 className="mr-2 inline-flex text-2xl font-bold text-slate-700">
-                {t("environments.settings.enterprise.enterprise_features")}
-              </h2>
-              <ul className="my-4 space-y-4">
-                {paidFeatures.map((feature) => (
-                  <li key={feature.title} className="flex items-center">
-                    <div className="rounded-full border border-green-300 bg-green-100 p-0.5 dark:bg-green-800">
-                      <CheckIcon className="h-5 w-5 p-0.5 text-green-500 dark:text-green-400" />
-                    </div>
-                    <span className="ml-2 text-sm text-slate-500 dark:text-slate-400">{feature.title}</span>
-                    {feature.comingSoon && (
-                      <span className="mx-2 rounded-full bg-blue-100 px-3 py-1 text-xs text-blue-700 dark:bg-slate-700 dark:text-teal-500">
-                        {t("environments.settings.enterprise.coming_soon")}
-                      </span>
-                    )}
-                    {feature.onRequest && (
-                      <span className="mx-2 rounded-full bg-violet-100 px-3 py-1 text-xs text-violet-700 dark:bg-slate-700 dark:text-teal-500">
-                        {t("environments.settings.enterprise.on_request")}
-                      </span>
-                    )}
-                  </li>
-                ))}
-              </ul>
-              <p className="my-6 text-sm text-slate-700">
-                {t(
-                  "environments.settings.enterprise.no_call_needed_no_strings_attached_request_a_free_30_day_trial_license_to_test_all_features_by_filling_out_this_form"
-                )}
-              </p>
-              <Button asChild>
-                <Link
-                  href="https://app.formbricks.com/s/clvupq3y205i5yrm3sm9v1xt5"
-                  target="_blank"
-                  rel="noopener noreferrer nofollow"
-                  referrerPolicy="no-referrer">
-                  {t("environments.settings.enterprise.request_30_day_trial_license")}
-                </Link>
-              </Button>
-              <p className="mt-2 text-xs text-slate-500">
-                {t("environments.settings.enterprise.no_credit_card_no_sales_call_just_test_it")}
-              </p>
-            </div>
-          </div>
-        </div>
-      )}
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

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

@@ -1,96 +0,0 @@
-import { AISettingsToggle } from "@/app/(app)/environments/[environmentId]/settings/(organization)/general/components/AISettingsToggle";
-import { DeleteOrganization } from "@/app/(app)/environments/[environmentId]/settings/(organization)/general/components/DeleteOrganization";
-import { EditOrganizationNameForm } from "@/app/(app)/environments/[environmentId]/settings/(organization)/general/components/EditOrganizationNameForm";
-import { SecurityListTip } from "@/app/(app)/environments/[environmentId]/settings/(organization)/general/components/SecurityListTip";
-import { SettingsCard } from "@/app/(app)/environments/[environmentId]/settings/components/SettingsCard";
-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";
-import { getIsMultiOrgEnabled, getWhiteLabelPermission } from "@/modules/ee/license-check/lib/utils";
-import { EmailCustomizationSettings } from "@/modules/ee/whitelabel/email-customization/components/email-customization-settings";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-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";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const t = await getTranslate();
-
-  const { session, currentUserMembership, organization, isOwner, isManager } = await getEnvironmentAuth(
-    params.environmentId
-  );
-
-  const user = session?.user?.id ? await getUser(session.user.id) : null;
-
-  const isMultiOrgEnabled = await getIsMultiOrgEnabled();
-  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.id);
-
-  const isDeleteDisabled = !isOwner || !isMultiOrgEnabled;
-  const currentUserRole = currentUserMembership?.role;
-
-  const isOwnerOrManager = isManager || isOwner;
-
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle={t("environments.settings.general.organization_settings")} />
-      {!IS_STORAGE_CONFIGURED && (
-        <div className="max-w-4xl">
-          <Alert variant="warning">
-            <AlertDescription>{t("common.storage_not_configured")}</AlertDescription>
-          </Alert>
-        </div>
-      )}
-      {!IS_FORMBRICKS_CLOUD && <SecurityListTip />}
-      <SettingsCard
-        title={t("environments.settings.general.organization_name")}
-        description={t("environments.settings.general.organization_name_description")}>
-        <EditOrganizationNameForm
-          organization={organization}
-          environmentId={params.environmentId}
-          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}
-        environmentId={params.environmentId}
-        isReadOnly={!isOwnerOrManager}
-        isFormbricksCloud={IS_FORMBRICKS_CLOUD}
-        fbLogoUrl={FB_LOGO_URL}
-        user={user}
-        isStorageConfigured={IS_STORAGE_CONFIGURED}
-      />
-      {isMultiOrgEnabled && (
-        <SettingsCard
-          title={t("environments.settings.general.delete_organization")}
-          description={t("environments.settings.general.delete_organization_description")}>
-          <DeleteOrganization
-            organization={organization}
-            isDeleteDisabled={isDeleteDisabled}
-            isUserOwner={currentUserRole === "owner"}
-          />
-        </SettingsCard>
-      )}
-
-      <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>
-  );
-};
-
-export default Page;

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

@@ -1,53 +0,0 @@
-import { IS_FORMBRICKS_CLOUD, USER_MANAGEMENT_MINIMUM_ROLE } from "@/lib/constants";
-import { getUserManagementAccess } from "@/lib/membership/utils";
-import { getTranslate } from "@/lingodotdev/server";
-import { getAccessControlPermission } from "@/modules/ee/license-check/lib/utils";
-import { getTeamsWhereUserIsAdmin } from "@/modules/ee/teams/lib/roles";
-import { TeamsView } from "@/modules/ee/teams/team-list/components/teams-view";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { MembersView } from "@/modules/organization/settings/teams/components/members-view";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const t = await getTranslate();
-
-  const { session, currentUserMembership, organization } = await getEnvironmentAuth(params.environmentId);
-
-  const isAccessControlAllowed = await getAccessControlPermission(organization.id);
-
-  const hasStandardUserManagementAccess = getUserManagementAccess(
-    currentUserMembership?.role,
-    USER_MANAGEMENT_MINIMUM_ROLE
-  );
-
-  const userAdminTeamIds = await getTeamsWhereUserIsAdmin(session.user.id, organization.id);
-  const isTeamAdminUser = userAdminTeamIds.length > 0;
-
-  const hasUserManagementAccess =
-    hasStandardUserManagementAccess || (isAccessControlAllowed && isTeamAdminUser);
-
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle={t("environments.settings.general.organization_settings")} />
-      <MembersView
-        membershipRole={currentUserMembership?.role}
-        organization={organization}
-        currentUserId={session.user.id}
-        environmentId={params.environmentId}
-        isAccessControlAllowed={isAccessControlAllowed}
-        isUserManagementDisabledFromUi={!hasUserManagementAccess}
-      />
-      <TeamsView
-        organizationId={organization.id}
-        membershipRole={currentUserMembership?.role}
-        currentUserId={session.user.id}
-        isAccessControlAllowed={isAccessControlAllowed}
-        environmentId={params.environmentId}
-      />
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

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

@@ -1,3 +0,0 @@
-import { ProjectLookSettingsPage } from "@/modules/projects/settings/look/page";
-
-export default ProjectLookSettingsPage;

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

@@ -1,3 +0,0 @@
-import { AppConnectionPage } from "@/modules/projects/settings/(setup)/app-connection/page";
-
-export default AppConnectionPage;

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

@@ -1,3 +0,0 @@
-import { GeneralSettingsPage } from "@/modules/projects/settings/general/page";
-
-export default GeneralSettingsPage;

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

@@ -1,62 +0,0 @@
-import { redirect } from "next/navigation";
-import { TIntegrationItem } from "@formbricks/types/integration";
-import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
-import { AirtableWrapper } from "@/app/(app)/environments/[environmentId]/workspace/integrations/airtable/components/AirtableWrapper";
-import { getSurveys } from "@/app/(app)/environments/[environmentId]/workspace/integrations/lib/surveys";
-import { getAirtableTables } from "@/lib/airtable/service";
-import { AIRTABLE_CLIENT_ID, DEFAULT_LOCALE, WEBAPP_URL } from "@/lib/constants";
-import { getIntegrations } from "@/lib/integration/service";
-import { getUserLocale } from "@/lib/user/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { GoBackButton } from "@/modules/ui/components/go-back-button";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const t = await getTranslate();
-  const isEnabled = !!AIRTABLE_CLIENT_ID;
-
-  const { isReadOnly, environment, session } = await getEnvironmentAuth(params.environmentId);
-
-  const [surveys, integrations, locale] = await Promise.all([
-    getSurveys(params.environmentId),
-    getIntegrations(params.environmentId),
-    getUserLocale(session.user.id),
-  ]);
-
-  const airtableIntegration: TIntegrationAirtable | undefined = integrations?.find(
-    (integration): integration is TIntegrationAirtable => integration.type === "airtable"
-  );
-
-  let airtableArray: TIntegrationItem[] = [];
-  if (airtableIntegration?.config.key) {
-    airtableArray = await getAirtableTables(params.environmentId);
-  }
-  if (isReadOnly) {
-    return redirect("./");
-  }
-
-  return (
-    <PageContentWrapper>
-      <GoBackButton
-        url={`${WEBAPP_URL}/environments/${params.environmentId}/settings/workspace/integrations`}
-      />
-      <PageHeader pageTitle={t("environments.integrations.airtable.airtable_integration")} />
-      <div className="h-[75vh] w-full">
-        <AirtableWrapper
-          isEnabled={isEnabled}
-          airtableIntegration={airtableIntegration}
-          airtableArray={airtableArray}
-          environmentId={environment.id}
-          surveys={surveys}
-          webAppUrl={WEBAPP_URL}
-          locale={locale ?? DEFAULT_LOCALE}
-        />
-      </div>
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

apps/web/app/(app)/environments/[environmentId]/(settings)/settings/workspace/integrations/google-sheets/page.tsx

@@ -1,60 +0,0 @@
-import { redirect } from "next/navigation";
-import { TIntegrationGoogleSheets } from "@formbricks/types/integration/google-sheet";
-import { GoogleSheetWrapper } from "@/app/(app)/environments/[environmentId]/workspace/integrations/google-sheets/components/GoogleSheetWrapper";
-import { getSurveys } from "@/app/(app)/environments/[environmentId]/workspace/integrations/lib/surveys";
-import {
-  DEFAULT_LOCALE,
-  GOOGLE_SHEETS_CLIENT_ID,
-  GOOGLE_SHEETS_CLIENT_SECRET,
-  GOOGLE_SHEETS_REDIRECT_URL,
-  WEBAPP_URL,
-} from "@/lib/constants";
-import { getIntegrations } from "@/lib/integration/service";
-import { getUserLocale } from "@/lib/user/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { GoBackButton } from "@/modules/ui/components/go-back-button";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const t = await getTranslate();
-  const isEnabled = !!(GOOGLE_SHEETS_CLIENT_ID && GOOGLE_SHEETS_CLIENT_SECRET && GOOGLE_SHEETS_REDIRECT_URL);
-
-  const { isReadOnly, environment, session } = await getEnvironmentAuth(params.environmentId);
-
-  const [surveys, integrations, locale] = await Promise.all([
-    getSurveys(params.environmentId),
-    getIntegrations(params.environmentId),
-    getUserLocale(session.user.id),
-  ]);
-
-  const googleSheetIntegration: TIntegrationGoogleSheets | undefined = integrations?.find(
-    (integration): integration is TIntegrationGoogleSheets => integration.type === "googleSheets"
-  );
-  if (isReadOnly) {
-    return redirect("./");
-  }
-
-  return (
-    <PageContentWrapper>
-      <GoBackButton
-        url={`${WEBAPP_URL}/environments/${params.environmentId}/settings/workspace/integrations`}
-      />
-      <PageHeader pageTitle={t("environments.integrations.google_sheets.google_sheets_integration")} />
-      <div className="h-[75vh] w-full">
-        <GoogleSheetWrapper
-          isEnabled={isEnabled}
-          environment={environment}
-          surveys={surveys}
-          googleSheetIntegration={googleSheetIntegration}
-          webAppUrl={WEBAPP_URL}
-          locale={locale ?? DEFAULT_LOCALE}
-        />
-      </div>
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

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

@@ -1,68 +0,0 @@
-import { redirect } from "next/navigation";
-import { TIntegrationNotion, TIntegrationNotionDatabase } from "@formbricks/types/integration/notion";
-import { getSurveys } from "@/app/(app)/environments/[environmentId]/workspace/integrations/lib/surveys";
-import { NotionWrapper } from "@/app/(app)/environments/[environmentId]/workspace/integrations/notion/components/NotionWrapper";
-import {
-  DEFAULT_LOCALE,
-  NOTION_AUTH_URL,
-  NOTION_OAUTH_CLIENT_ID,
-  NOTION_OAUTH_CLIENT_SECRET,
-  NOTION_REDIRECT_URI,
-  WEBAPP_URL,
-} from "@/lib/constants";
-import { getIntegrationByType } from "@/lib/integration/service";
-import { getNotionDatabases } from "@/lib/notion/service";
-import { getUserLocale } from "@/lib/user/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { GoBackButton } from "@/modules/ui/components/go-back-button";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const t = await getTranslate();
-  const enabled = !!(
-    NOTION_OAUTH_CLIENT_ID &&
-    NOTION_OAUTH_CLIENT_SECRET &&
-    NOTION_AUTH_URL &&
-    NOTION_REDIRECT_URI
-  );
-
-  const { isReadOnly, environment, session } = await getEnvironmentAuth(params.environmentId);
-
-  const [surveys, notionIntegration, locale] = await Promise.all([
-    getSurveys(params.environmentId),
-    getIntegrationByType(params.environmentId, "notion"),
-    getUserLocale(session.user.id),
-  ]);
-
-  let databasesArray: TIntegrationNotionDatabase[] = [];
-  if (notionIntegration && (notionIntegration as TIntegrationNotion).config.key?.bot_id) {
-    databasesArray = (await getNotionDatabases(environment.id)) ?? [];
-  }
-
-  if (isReadOnly) {
-    return redirect("./");
-  }
-
-  return (
-    <PageContentWrapper>
-      <GoBackButton
-        url={`${WEBAPP_URL}/environments/${params.environmentId}/settings/workspace/integrations`}
-      />
-      <PageHeader pageTitle={t("environments.integrations.notion.notion_integration")} />
-      <NotionWrapper
-        enabled={enabled}
-        surveys={surveys}
-        environment={environment}
-        notionIntegration={notionIntegration as TIntegrationNotion}
-        webAppUrl={WEBAPP_URL}
-        databasesArray={databasesArray}
-        locale={locale ?? DEFAULT_LOCALE}
-      />
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

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

@@ -1,237 +0,0 @@
-import { TFunction } from "i18next";
-import Image from "next/image";
-import { redirect } from "next/navigation";
-import { TIntegrationType } from "@formbricks/types/integration";
-import { getWebhookCountBySource } from "@/app/(app)/environments/[environmentId]/workspace/integrations/lib/webhook";
-import ActivePiecesLogo from "@/images/activepieces.webp";
-import AirtableLogo from "@/images/airtableLogo.svg";
-import GoogleSheetsLogo from "@/images/googleSheetsLogo.png";
-import JsLogo from "@/images/jslogo.png";
-import MakeLogo from "@/images/make-small.png";
-import n8nLogo from "@/images/n8n.png";
-import notionLogo from "@/images/notion.png";
-import SlackLogo from "@/images/slacklogo.png";
-import WebhookLogo from "@/images/webhook.png";
-import ZapierLogo from "@/images/zapier-small.png";
-import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
-import { getIntegrations } from "@/lib/integration/service";
-import { getBillingFallbackPath } from "@/lib/membership/navigation";
-import { getTranslate } from "@/lingodotdev/server";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { Card } from "@/modules/ui/components/integration-card";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const getStatusText = (count: number, t: TFunction, type: string) => {
-  if (count === 1) return `1 ${type}`;
-  if (count === 0) return t("common.not_connected");
-  return `${count} ${type}s`;
-};
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const t = await getTranslate();
-
-  const { isReadOnly, environment, isBilling } = await getEnvironmentAuth(params.environmentId);
-
-  const [
-    integrations,
-    userWebhookCount,
-    zapierWebhookCount,
-    makeWebhookCount,
-    n8nwebhookCount,
-    activePiecesWebhookCount,
-  ] = await Promise.all([
-    getIntegrations(params.environmentId),
-    getWebhookCountBySource(params.environmentId, "user"),
-    getWebhookCountBySource(params.environmentId, "zapier"),
-    getWebhookCountBySource(params.environmentId, "make"),
-    getWebhookCountBySource(params.environmentId, "n8n"),
-    getWebhookCountBySource(params.environmentId, "activepieces"),
-  ]);
-
-  const isIntegrationConnected = (type: TIntegrationType) =>
-    integrations.some((integration) => integration.type === type);
-
-  if (isBilling) {
-    return redirect(getBillingFallbackPath(params.environmentId, IS_FORMBRICKS_CLOUD));
-  }
-
-  const isGoogleSheetsIntegrationConnected = isIntegrationConnected("googleSheets");
-  const isNotionIntegrationConnected = isIntegrationConnected("notion");
-  const isAirtableIntegrationConnected = isIntegrationConnected("airtable");
-  const isN8nIntegrationConnected = isIntegrationConnected("n8n");
-  const isSlackIntegrationConnected = isIntegrationConnected("slack");
-
-  const appSetupCompleted = !!environment?.appSetupCompleted;
-  const integrationCards = [
-    {
-      docsHref: "https://formbricks.com/docs/xm-and-surveys/core-features/integrations/zapier",
-      docsText: t("common.docs"),
-      docsNewTab: true,
-      connectHref: "https://zapier.com/apps/formbricks/integrations",
-      connectText: t("common.connect"),
-      connectNewTab: true,
-      label: "Zapier",
-      description: t("environments.integrations.zapier_integration_description"),
-      icon: <Image src={ZapierLogo} alt="Zapier Logo" />,
-      connected: zapierWebhookCount > 0,
-      statusText: getStatusText(zapierWebhookCount, t, "zap"),
-      disabled: isReadOnly,
-    },
-    {
-      connectHref: `/environments/${params.environmentId}/settings/workspace/integrations/webhooks`,
-      connectText: t("environments.integrations.manage_webhooks"),
-      connectNewTab: false,
-      docsHref: "https://formbricks.com/docs/xm-and-surveys/core-features/integrations/webhooks",
-      docsText: t("common.docs"),
-      docsNewTab: true,
-      label: "Webhooks",
-      description: t("environments.integrations.webhook_integration_description"),
-      icon: <Image src={WebhookLogo} alt="Webhook Logo" />,
-      connected: userWebhookCount > 0,
-      statusText: getStatusText(userWebhookCount, t, "webhook"),
-      disabled: false,
-    },
-    {
-      connectHref: `/environments/${params.environmentId}/settings/workspace/integrations/google-sheets`,
-      connectText: `${isGoogleSheetsIntegrationConnected ? t("common.manage") : t("common.connect")}`,
-      connectNewTab: false,
-      docsHref: "https://formbricks.com/docs/xm-and-surveys/core-features/integrations/google-sheets",
-      docsText: t("common.docs"),
-      docsNewTab: true,
-      label: "Google Sheets",
-      description: t("environments.integrations.google_sheet_integration_description"),
-      icon: <Image src={GoogleSheetsLogo} alt="Google sheets Logo" />,
-      connected: isGoogleSheetsIntegrationConnected,
-      statusText: isGoogleSheetsIntegrationConnected ? t("common.connected") : t("common.not_connected"),
-      disabled: isReadOnly,
-    },
-    {
-      connectHref: `/environments/${params.environmentId}/settings/workspace/integrations/airtable`,
-      connectText: `${isAirtableIntegrationConnected ? t("common.manage") : t("common.connect")}`,
-      connectNewTab: false,
-      docsHref: "https://formbricks.com/docs/xm-and-surveys/core-features/integrations/airtable",
-      docsText: t("common.docs"),
-      docsNewTab: true,
-      label: "Airtable",
-      description: t("environments.integrations.airtable_integration_description"),
-      icon: <Image src={AirtableLogo} alt="Airtable Logo" />,
-      connected: isAirtableIntegrationConnected,
-      statusText: isAirtableIntegrationConnected ? t("common.connected") : t("common.not_connected"),
-      disabled: isReadOnly,
-    },
-    {
-      connectHref: `/environments/${params.environmentId}/settings/workspace/integrations/slack`,
-      connectText: `${isSlackIntegrationConnected ? t("common.manage") : t("common.connect")}`,
-      connectNewTab: false,
-      docsHref: "https://formbricks.com/docs/xm-and-surveys/core-features/integrations/slack",
-      docsText: t("common.docs"),
-      docsNewTab: true,
-      label: "Slack",
-      description: t("environments.integrations.slack_integration_description"),
-      icon: <Image src={SlackLogo} alt="Slack Logo" />,
-      connected: isSlackIntegrationConnected,
-      statusText: isSlackIntegrationConnected ? t("common.connected") : t("common.not_connected"),
-      disabled: isReadOnly,
-    },
-    {
-      docsHref: "https://formbricks.com/docs/xm-and-surveys/core-features/integrations/n8n",
-      connectText: `${isN8nIntegrationConnected ? t("common.manage") : t("common.connect")}`,
-      docsText: t("common.docs"),
-      docsNewTab: true,
-      connectHref: "https://n8n.io",
-      connectNewTab: true,
-      label: "n8n",
-      description: t("environments.integrations.n8n_integration_description"),
-      icon: <Image src={n8nLogo} alt="n8n Logo" />,
-      connected: n8nwebhookCount > 0,
-      statusText: getStatusText(n8nwebhookCount, t, t("common.integration")),
-      disabled: isReadOnly,
-    },
-    {
-      docsHref: "https://formbricks.com/docs/xm-and-surveys/core-features/integrations/make",
-      docsText: t("common.docs"),
-      docsNewTab: true,
-      connectHref: "https://www.make.com/en/integrations/formbricks",
-      connectText: t("common.connect"),
-      connectNewTab: true,
-      label: "Make.com",
-      description: t("environments.integrations.make_integration_description"),
-      icon: <Image src={MakeLogo} alt="Make Logo" />,
-      connected: makeWebhookCount > 0,
-      statusText: getStatusText(makeWebhookCount, t, t("common.integration")),
-      disabled: isReadOnly,
-    },
-    {
-      connectHref: `/environments/${params.environmentId}/settings/workspace/integrations/notion`,
-      connectText: `${isNotionIntegrationConnected ? t("common.manage") : t("common.connect")}`,
-      connectNewTab: false,
-      docsHref: "https://formbricks.com/docs/xm-and-surveys/core-features/integrations/notion",
-      docsText: t("common.docs"),
-      docsNewTab: true,
-      label: "Notion",
-      description: t("environments.integrations.notion_integration_description"),
-      icon: <Image src={notionLogo} alt="Notion Logo" />,
-      connected: isNotionIntegrationConnected,
-      statusText: isNotionIntegrationConnected ? t("common.connected") : t("common.not_connected"),
-      disabled: isReadOnly,
-    },
-    {
-      docsHref: "https://formbricks.com/docs/xm-and-surveys/core-features/integrations/activepieces",
-      docsText: t("common.docs"),
-      docsNewTab: true,
-      connectHref: "https://www.activepieces.com/pieces/formbricks",
-      connectText: t("common.connect"),
-      connectNewTab: true,
-      label: "Activepieces",
-      description: t("environments.integrations.activepieces_integration_description"),
-      icon: <Image src={ActivePiecesLogo} alt="ActivePieces Logo" />,
-      connected: activePiecesWebhookCount > 0,
-      statusText: getStatusText(activePiecesWebhookCount, t, t("common.integration")),
-      disabled: isReadOnly,
-    },
-  ];
-
-  integrationCards.unshift({
-    docsHref: "https://formbricks.com/docs/app-surveys/quickstart",
-    docsText: t("common.docs"),
-    docsNewTab: true,
-    connectHref: `/environments/${params.environmentId}/settings/workspace/connect`,
-    connectText: t("common.connect"),
-    connectNewTab: false,
-    label: "Javascript SDK",
-    description: t("environments.integrations.website_or_app_integration_description"),
-    icon: <Image src={JsLogo} alt="Javascript Logo" />,
-    connected: appSetupCompleted,
-    statusText: appSetupCompleted ? t("common.connected") : t("common.not_connected"),
-    disabled: false,
-  });
-
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle={t("common.integrations")} />
-      <div className="grid grid-cols-3 place-content-stretch gap-4 lg:grid-cols-3">
-        {integrationCards.map((card) => (
-          <Card
-            key={card.label}
-            docsHref={card.docsHref}
-            docsText={card.docsText}
-            docsNewTab={card.docsNewTab}
-            connectHref={card.connectHref}
-            connectText={card.connectText}
-            connectNewTab={card.connectNewTab}
-            label={card.label}
-            description={card.description}
-            icon={card.icon}
-            connected={card.connected}
-            statusText={card.statusText}
-            disabled={card.disabled}
-          />
-        ))}
-      </div>
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

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

@@ -1,52 +0,0 @@
-import { redirect } from "next/navigation";
-import { TIntegrationSlack } from "@formbricks/types/integration/slack";
-import { getSurveys } from "@/app/(app)/environments/[environmentId]/workspace/integrations/lib/surveys";
-import { SlackWrapper } from "@/app/(app)/environments/[environmentId]/workspace/integrations/slack/components/SlackWrapper";
-import { DEFAULT_LOCALE, SLACK_CLIENT_ID, SLACK_CLIENT_SECRET, WEBAPP_URL } from "@/lib/constants";
-import { getIntegrationByType } from "@/lib/integration/service";
-import { getUserLocale } from "@/lib/user/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { GoBackButton } from "@/modules/ui/components/go-back-button";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const isEnabled = !!(SLACK_CLIENT_ID && SLACK_CLIENT_SECRET);
-
-  const t = await getTranslate();
-
-  const { isReadOnly, environment, session } = await getEnvironmentAuth(params.environmentId);
-
-  const [surveys, slackIntegration, locale] = await Promise.all([
-    getSurveys(params.environmentId),
-    getIntegrationByType(params.environmentId, "slack"),
-    getUserLocale(session.user.id),
-  ]);
-
-  if (isReadOnly) {
-    return redirect("./");
-  }
-
-  return (
-    <PageContentWrapper>
-      <GoBackButton
-        url={`${WEBAPP_URL}/environments/${params.environmentId}/settings/workspace/integrations`}
-      />
-      <PageHeader pageTitle={t("environments.integrations.slack.slack_integration")} />
-      <div className="h-[75vh] w-full">
-        <SlackWrapper
-          isEnabled={isEnabled}
-          environment={environment}
-          surveys={surveys}
-          slackIntegration={slackIntegration as TIntegrationSlack}
-          webAppUrl={WEBAPP_URL}
-          locale={locale ?? DEFAULT_LOCALE}
-        />
-      </div>
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

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

@@ -1,3 +0,0 @@
-import { WebhooksPage } from "@/modules/integrations/webhooks/page";
-
-export default WebhooksPage;

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

@@ -1,3 +0,0 @@
-import { LanguagesPage } from "@/modules/projects/settings/languages/page";
-
-export default LanguagesPage;

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

@@ -1,3 +0,0 @@
-import { TagsPage } from "@/modules/projects/settings/tags/page";
-
-export default TagsPage;

apps/web/app/(app)/environments/[environmentId]/(settings)/settings/workspace/team-access/page.tsx

@@ -1,3 +0,0 @@
-import { ProjectTeams } from "@/modules/ee/teams/project-teams/page";
-
-export default ProjectTeams;

apps/web/app/(app)/environments/[environmentId]/(settings)/settings/workspace/user-actions/page.tsx

@@ -1,44 +0,0 @@
-"use server";
-
-import { getActionClasses } from "@/lib/actionClass/service";
-import { DEFAULT_LOCALE } from "@/lib/constants";
-import { getEnvironments } from "@/lib/environment/service";
-import { getUserLocale } from "@/lib/user/service";
-import { getTranslate } from "@/lingodotdev/server";
-import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
-import { ActionSettingsCard } from "@/modules/projects/settings/(setup)/components/action-settings-card";
-import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
-import { PageHeader } from "@/modules/ui/components/page-header";
-
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  const t = await getTranslate();
-  const { environmentId } = params;
-
-  const { environment, isReadOnly, session } = await getEnvironmentAuth(environmentId);
-
-  const [environments, actionClasses, locale] = await Promise.all([
-    getEnvironments(environment.projectId),
-    getActionClasses(environmentId),
-    getUserLocale(session.user.id),
-  ]);
-  const otherEnvironment = environments.filter((env) => env.id !== environmentId)[0];
-  const otherEnvActionClasses = otherEnvironment ? await getActionClasses(otherEnvironment.id) : [];
-
-  return (
-    <PageContentWrapper>
-      <PageHeader pageTitle={t("common.actions")} />
-      <ActionSettingsCard
-        environment={environment}
-        otherEnvironment={otherEnvironment}
-        otherEnvActionClasses={otherEnvActionClasses}
-        environmentId={environmentId}
-        actionClasses={actionClasses}
-        isReadOnly={isReadOnly}
-        locale={locale ?? DEFAULT_LOCALE}
-      />
-    </PageContentWrapper>
-  );
-};
-
-export default Page;

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

@@ -2,11 +2,7 @@
 
 import { z } from "zod";
 import { ZId } from "@formbricks/types/common";
-import {
-  AuthorizationError,
-  OperationNotAllowedError,
-  ResourceNotFoundError,
-} from "@formbricks/types/errors";
+import { OperationNotAllowedError } from "@formbricks/types/errors";
 import { ZProjectUpdateInput } from "@formbricks/types/project";
 import { getMembershipByUserIdOrganizationId } from "@/lib/membership/service";
 import { getOrganization } from "@/lib/organization/service";
@@ -14,6 +10,7 @@ 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,
@@ -28,63 +25,67 @@ const ZCreateProjectAction = z.object({
   data: ZProjectUpdateInput,
 });
 
-export const createProjectAction = authenticatedActionClient.inputSchema(ZCreateProjectAction).action(
-  withAuditLogging("created", "project", async ({ ctx, parsedInput }) => {
-    const { user } = ctx;
+export const createProjectAction = authenticatedActionClient.schema(ZCreateProjectAction).action(
+  withAuditLogging(
+    "created",
+    "project",
+    async ({ ctx, parsedInput }: { ctx: AuthenticatedActionClientCtx; parsedInput: Record<string, any> }) => {
+      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"],
-        },
-      ],
-    });
+      await checkAuthorizationUpdated({
+        userId: user.id,
+        organizationId: parsedInput.organizationId,
+        access: [
+          {
+            data: parsedInput.data,
+            schema: ZProjectUpdateInput,
+            type: "organization",
+            roles: ["owner", "manager"],
+          },
+        ],
+      });
 
-    const organization = await getOrganization(organizationId);
+      const organization = await getOrganization(organizationId);
 
-    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");
+      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 updateUser(user.id, {
+        notificationSettings: updatedNotificationSettings,
+      });
+
+      ctx.auditLoggingCtx.organizationId = organizationId;
+      ctx.auditLoggingCtx.projectId = project.id;
+      ctx.auditLoggingCtx.newObject = project;
+      return project;
     }
-
-    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({
@@ -96,7 +97,7 @@ const ZGetOrganizationsForSwitcherAction = z.object({
  * Called on-demand when user opens the organization switcher.
  */
 export const getOrganizationsForSwitcherAction = authenticatedActionClient
-  .inputSchema(ZGetOrganizationsForSwitcherAction)
+  .schema(ZGetOrganizationsForSwitcherAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -121,7 +122,7 @@ const ZGetProjectsForSwitcherAction = z.object({
  * Called on-demand when user opens the project switcher.
  */
 export const getProjectsForSwitcherAction = authenticatedActionClient
-  .inputSchema(ZGetProjectsForSwitcherAction)
+  .schema(ZGetProjectsForSwitcherAction)
   .action(async ({ ctx, parsedInput }) => {
     await checkAuthorizationUpdated({
       userId: ctx.user.id,
@@ -137,7 +138,7 @@ export const getProjectsForSwitcherAction = authenticatedActionClient
     // Need membership for getProjectsByUserId (1 DB query)
     const membership = await getMembershipByUserIdOrganizationId(ctx.user.id, parsedInput.organizationId);
     if (!membership) {
-      throw new AuthorizationError("Membership not found");
+      throw new Error("Membership not found");
     }
 
     return await getProjectsByUserId(ctx.user.id, membership);

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

@@ -1,4 +1,3 @@
-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";
@@ -30,6 +29,7 @@ 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.id);
+  const organizationProjectsLimit = await getOrganizationProjectsLimit(organization.billing.limits);
   const isOwnerOrManager = isOwner || isManager;
 
   // Validate that project permission exists for members
   if (isMember && !projectPermission) {
-    throw new ResourceNotFoundError(t("common.workspace"), null);
+    throw new Error(t("common.workspace_permission_not_found"));
   }
 
   return (
@@ -52,6 +52,7 @@ export const EnvironmentLayout = async ({ layoutData, children }: EnvironmentLay
         <LimitsReachedBanner
           organization={organization}
           environmentId={environment.id}
+          peopleCount={peopleCount}
           responseCount={responseCount}
         />
       )}
@@ -75,10 +76,6 @@ 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,59 +2,40 @@
 
 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 { useCallback, useEffect, useMemo, useState, useTransition } from "react";
+import { useEffect, useMemo, useState } 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 {
@@ -66,10 +47,6 @@ interface NavigationProps {
   isDevelopment: boolean;
   membershipRole?: TOrganizationRole;
   publicDomain: string;
-  isMultiOrgEnabled: boolean;
-  organizationProjectsLimit: number;
-  isLicenseActive: boolean;
-  isAccessControlAllowed: boolean;
 }
 
 export const MainNavigation = ({
@@ -81,10 +58,6 @@ export const MainNavigation = ({
   isFormbricksCloud,
   isDevelopment,
   publicDomain,
-  isMultiOrgEnabled,
-  organizationProjectsLimit,
-  isLicenseActive,
-  isAccessControlAllowed,
 }: NavigationProps) => {
   const router = useRouter();
   const pathname = usePathname();
@@ -94,12 +67,7 @@ export const MainNavigation = ({
   const [latestVersion, setLatestVersion] = useState("");
   const { signOut: signOutWithAudit } = useSignOut({ id: user.id, email: user.email });
 
-  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 { isManager, isOwner, isBilling } = getAccessFlags(membershipRole);
 
   const isOwnerOrManager = isManager || isOwner;
 
@@ -136,34 +104,28 @@ export const MainNavigation = ({
         icon: MessageCircle,
         isActive: pathname?.includes("/surveys"),
         isHidden: false,
-        disabled: isMembershipPending || isBilling,
       },
       {
         href: `/environments/${environment.id}/contacts`,
         name: t("common.contacts"),
         icon: UserIcon,
-        isActive:
-          pathname?.includes("/contacts") ||
-          pathname?.includes("/segments") ||
-          pathname?.includes("/attributes"),
-        disabled: isMembershipPending || isBilling,
+        isActive: pathname?.includes("/contacts") || pathname?.includes("/segments"),
       },
       {
-        name: t("common.settings"),
-        href: `/environments/${environment.id}/settings/workspace/general`,
+        name: t("common.configuration"),
+        href: `/environments/${environment.id}/workspace/general`,
         icon: Cog,
-        isActive: pathname?.includes("/settings/"),
-        disabled: isMembershipPending || isBilling,
+        isActive: pathname?.includes("/project"),
       },
     ],
-    [t, environment.id, pathname, isMembershipPending, isBilling]
+    [t, environment.id, pathname]
   );
 
   const dropdownNavigation = [
     {
-      label: t("common.settings"),
-      href: `/environments/${environment.id}/settings/account/profile`,
-      icon: SettingsIcon,
+      label: t("common.account"),
+      href: `/environments/${environment.id}/settings/profile`,
+      icon: UserCircleIcon,
     },
     {
       label: t("common.documentation"),
@@ -179,111 +141,6 @@ 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 workspaceSettingsHref = `/environments/${environment.id}/settings/workspace/general`;
-  const organizationSettingsHref = `/environments/${environment.id}/settings/organization/general`;
-
-  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();
@@ -299,93 +156,7 @@ export const MainNavigation = ({
     if (isOwnerOrManager) loadReleases();
   }, [isOwnerOrManager]);
 
-  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) => {
-    if (projectId === project.id) return;
-    startTransition(() => {
-      router.push(`/workspaces/${projectId}/`);
-    });
-  };
-
-  const handleOrganizationChange = (organizationId: string) => {
-    if (organizationId === organization.id) return;
-    startTransition(() => {
-      router.push(`/organizations/${organizationId}/`);
-    });
-  };
-
-  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 items-center justify-center rounded-full bg-slate-100 text-slate-600";
-  const isInitialProjectsLoading = isWorkspaceDropdownOpen && !hasInitializedProjects && !workspaceLoadError;
+  const mainNavigationLink = `/environments/${environment.id}/${isBilling ? "settings/billing/" : "surveys/"}`;
 
   return (
     <>
@@ -414,7 +185,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:outline-none focus:ring-0 focus:ring-transparent"
+                  "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"
                 )}>
                 {isCollapsed ? (
                   <PanelLeftOpenIcon strokeWidth={1.5} />
@@ -425,24 +196,24 @@ export const MainNavigation = ({
             </div>
 
             {/* Main Nav Switch */}
-            <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>
+            {!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>
+            )}
           </div>
 
           <div>
@@ -459,200 +230,38 @@ export const MainNavigation = ({
               </Link>
             )}
 
-            {/* 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>
-                    <DropdownMenuItem
-                      onClick={() => handleSettingNavigation(workspaceSettingsHref)}
-                      className="cursor-pointer">
-                      <SettingsIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />
-                      {t("common.settings")}
-                    </DropdownMenuItem>
-                  </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>
-                    <DropdownMenuItem
-                      onClick={() => handleSettingNavigation(organizationSettingsHref)}
-                      className="cursor-pointer">
-                      <SettingsIcon className="mr-2 h-4 w-4" strokeWidth={1.5} />
-                      {t("common.settings")}
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-
+            {/* User Switch */}
+            <div className="flex items-center">
               <DropdownMenu>
                 <DropdownMenuTrigger
                   asChild
                   id="userDropdownTrigger"
-                  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>
+                  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} />
                     {!isCollapsed && !isTextVisible && (
                       <>
-                        <div className="grow overflow-hidden">
+                        <div
+                          className={cn(isTextVisible ? "opacity-0" : "opacity-100", "grow overflow-hidden")}>
                           <p
                             title={user?.email}
-                            className="ph-no-capture ph-no-capture -mb-0.5 truncate text-sm font-bold text-slate-700">
+                            className={cn(
+                              "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-500">{t("common.account")}</p>
+                          <p className="text-sm text-slate-700">{t("common.account")}</p>
                         </div>
-                        <ChevronRightIcon className="h-4 w-4 shrink-0 text-slate-600" strokeWidth={1.5} />
+                        <ChevronRightIcon
+                          className={cn("h-5 w-5 shrink-0 text-slate-700 hover:text-slate-500")}
+                        />
                       </>
                     )}
-                  </button>
+                  </div>
                 </DropdownMenuTrigger>
 
                 <DropdownMenuContent
@@ -661,6 +270,8 @@ export const MainNavigation = ({
                   sideOffset={10}
                   alignOffset={5}
                   align="end">
+                  {/* Dropdown Items */}
+
                   {dropdownNavigation.map((link) => (
                     <Link
                       href={link.href}
@@ -674,6 +285,7 @@ export const MainNavigation = ({
                       </DropdownMenuItem>
                     </Link>
                   ))}
+                  {/* Logout */}
                   <DropdownMenuItem
                     onClick={async () => {
                       const loginUrl = `${publicDomain}/auth/login`;
@@ -696,28 +308,6 @@ 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,7 +1,6 @@
 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 {
@@ -11,8 +10,6 @@ interface NavigationLinkProps {
   children: React.ReactNode;
   linkText: string;
   isTextVisible: boolean;
-  disabled?: boolean;
-  disabledMessage?: string;
 }
 
 export const NavigationLink = ({
@@ -22,34 +19,10 @@ 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 (
     <>
@@ -57,37 +30,35 @@ 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", collapsedColorClass)}>
-                {disabled ? (
-                  <div className="flex items-center">{children}</div>
-                ) : (
-                  <Link href={href}>{children}</Link>
-                )}
+              <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>
             </TooltipTrigger>
-            <TooltipContent side="right">{tooltipText}</TooltipContent>
+            <TooltipContent side="right">{linkText}</TooltipContent>
           </Tooltip>
         </TooltipProvider>
       ) : (
-        <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
+          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>
       )}
     </>

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

@@ -31,8 +31,7 @@ export const TopControlBar = ({
   isAccessControlAllowed,
   membershipRole,
 }: TopControlBarProps) => {
-  const { isBilling } = getAccessFlags(membershipRole);
-  const isMembershipPending = membershipRole === undefined;
+  const { isMember } = getAccessFlags(membershipRole);
   const { environment } = useEnvironment();
 
   return (
@@ -49,8 +48,7 @@ export const TopControlBar = ({
         isFormbricksCloud={isFormbricksCloud}
         isLicenseActive={isLicenseActive}
         isOwnerOrManager={isOwnerOrManager}
-        isBilling={isBilling}
-        isMembershipPending={isMembershipPending}
+        isMember={isMember}
         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-balance text-sm text-slate-600">{currentStatus.subtitle}</p>
+      <p className="w-2/3 text-sm text-balance 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

@@ -1,8 +1,15 @@
 "use client";
 
 import * as Sentry from "@sentry/nextjs";
-import { Building2Icon, ChevronDownIcon, ChevronRightIcon, Loader2, PlusIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
+import {
+  Building2Icon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  Loader2,
+  PlusIcon,
+  SettingsIcon,
+} from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { logger } from "@formbricks/logger";
@@ -15,46 +22,69 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/modules/ui/components/dropdown-menu";
 import { useOrganization } from "../context/environment-context";
 
 interface OrganizationBreadcrumbProps {
   currentOrganizationId: string;
-  currentOrganizationName?: string;
+  currentOrganizationName?: string; // Optional: pass directly if context not available
   isMultiOrgEnabled: boolean;
   currentEnvironmentId?: string;
-  isMembershipPending: boolean;
+  isFormbricksCloud: boolean;
+  isMember: boolean;
+  isOwnerOrManager: boolean;
 }
 
+const isActiveOrganizationSetting = (pathname: string, settingId: string): boolean => {
+  // Match /settings/{settingId} or /settings/{settingId}/... but exclude account settings
+  // Exclude paths with /(account)/
+  if (pathname.includes("/(account)/")) {
+    return false;
+  }
+  // Check if path matches /settings/{settingId} (with optional trailing path)
+  const pattern = new RegExp(`/settings/${settingId}(?:/|$)`);
+  return pattern.test(pathname);
+};
+
 export const OrganizationBreadcrumb = ({
   currentOrganizationId,
   currentOrganizationName,
   isMultiOrgEnabled,
   currentEnvironmentId,
-  isMembershipPending,
+  isFormbricksCloud,
+  isMember,
+  isOwnerOrManager,
 }: OrganizationBreadcrumbProps) => {
   const { t } = useTranslation();
   const [isOrganizationDropdownOpen, setIsOrganizationDropdownOpen] = useState(false);
   const [openCreateOrganizationModal, setOpenCreateOrganizationModal] = useState(false);
+  const pathname = usePathname();
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const [isLoadingOrganizations, setIsLoadingOrganizations] = useState(false);
   const [organizations, setOrganizations] = useState<{ id: string; name: string }[]>([]);
   const [loadError, setLoadError] = useState<string | null>(null);
 
+  // Get current organization name from context OR prop
+  // Context is preferred, but prop is fallback for pages without EnvironmentContextWrapper
   const { organization: currentOrganization } = useOrganization();
   const organizationName = currentOrganization?.name || currentOrganizationName || "";
 
+  // Lazy-load organizations when dropdown opens
   useEffect(() => {
+    // Only fetch when dropdown opened for first time (and no error state)
     if (isOrganizationDropdownOpen && organizations.length === 0 && !isLoadingOrganizations && !loadError) {
       setIsLoadingOrganizations(true);
-      setLoadError(null);
+      setLoadError(null); // Clear any previous errors
       getOrganizationsForSwitcherAction({ organizationId: currentOrganizationId }).then((result) => {
         if (result?.data) {
-          const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+          // Sort organizations by name
+          const sorted = result.data.toSorted((a, b) => a.name.localeCompare(b.name));
           setOrganizations(sorted);
         } else {
+          // Handle server errors or validation errors
           const errorMessage = getFormattedErrorMessage(result);
           const error = new Error(errorMessage);
           logger.error(error, "Failed to load organizations");
@@ -87,8 +117,53 @@ export const OrganizationBreadcrumb = ({
     });
   };
 
+  // Hide organization dropdown for single org setups (on-premise)
   const showOrganizationDropdown = isMultiOrgEnabled || organizations.length > 1;
 
+  const handleSettingChange = (href: string) => {
+    startTransition(() => {
+      setIsOrganizationDropdownOpen(false);
+      router.push(href);
+    });
+  };
+
+  const organizationSettings = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${currentEnvironmentId}/settings/general`,
+    },
+    {
+      id: "teams",
+      label: t("common.members_and_teams"),
+      href: `/environments/${currentEnvironmentId}/settings/teams`,
+    },
+    {
+      id: "api-keys",
+      label: t("common.api_keys"),
+      href: `/environments/${currentEnvironmentId}/settings/api-keys`,
+      hidden: !isOwnerOrManager,
+    },
+    {
+      id: "domain",
+      label: t("common.domain"),
+      href: `/environments/${currentEnvironmentId}/settings/domain`,
+      hidden: isFormbricksCloud,
+    },
+    {
+      id: "billing",
+      label: t("common.billing"),
+      href: `/environments/${currentEnvironmentId}/settings/billing`,
+      hidden: !isFormbricksCloud,
+    },
+    {
+      id: "enterprise",
+      label: t("common.enterprise_license"),
+      href: `/environments/${currentEnvironmentId}/settings/enterprise`,
+      hidden: isFormbricksCloud || isMember,
+    },
+  ];
+
   return (
     <BreadcrumbItem isActive={isOrganizationDropdownOpen}>
       <DropdownMenu onOpenChange={setIsOrganizationDropdownOpen}>
@@ -157,6 +232,28 @@ export const OrganizationBreadcrumb = ({
               )}
             </>
           )}
+          {currentEnvironmentId && (
+            <div>
+              {showOrganizationDropdown && <DropdownMenuSeparator />}
+              <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+                <SettingsIcon className="mr-2 inline h-4 w-4" />
+                {t("common.organization_settings")}
+              </div>
+
+              {organizationSettings.map((setting) => {
+                return setting.hidden ? null : (
+                  <DropdownMenuCheckboxItem
+                    key={setting.id}
+                    checked={isActiveOrganizationSetting(pathname, setting.id)}
+                    hidden={setting.hidden}
+                    onClick={() => handleSettingChange(setting.href)}
+                    className="cursor-pointer">
+                    {setting.label}
+                  </DropdownMenuCheckboxItem>
+                );
+              })}
+            </div>
+          )}
         </DropdownMenuContent>
       </DropdownMenu>
       {openCreateOrganizationModal && (

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

@@ -17,8 +17,7 @@ interface ProjectAndOrgSwitchProps {
   isFormbricksCloud: boolean;
   isLicenseActive: boolean;
   isOwnerOrManager: boolean;
-  isBilling: boolean;
-  isMembershipPending: boolean;
+  isMember: boolean;
   isAccessControlAllowed: boolean;
 }
 
@@ -35,8 +34,7 @@ export const ProjectAndOrgSwitch = ({
   isLicenseActive,
   isOwnerOrManager,
   isAccessControlAllowed,
-  isBilling,
-  isMembershipPending,
+  isMember,
 }: ProjectAndOrgSwitchProps) => {
   const currentEnvironment = environments.find((env) => env.id === currentEnvironmentId);
   const showEnvironmentBreadcrumb = currentEnvironment?.type === "development";
@@ -49,7 +47,9 @@ export const ProjectAndOrgSwitch = ({
           currentOrganizationName={currentOrganizationName}
           currentEnvironmentId={currentEnvironmentId}
           isMultiOrgEnabled={isMultiOrgEnabled}
-          isMembershipPending={isMembershipPending}
+          isFormbricksCloud={isFormbricksCloud}
+          isMember={isMember}
+          isOwnerOrManager={isOwnerOrManager}
         />
         {currentProjectId && currentEnvironmentId && (
           <ProjectBreadcrumb
@@ -63,8 +63,6 @@ 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,8 +1,8 @@
 "use client";
 
 import * as Sentry from "@sentry/nextjs";
-import { ChevronDownIcon, ChevronRightIcon, FoldersIcon, Loader2, PlusIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { ChevronDownIcon, ChevronRightIcon, CogIcon, HotelIcon, Loader2, PlusIcon } from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState, useTransition } from "react";
 import { useTranslation } from "react-i18next";
 import { logger } from "@formbricks/logger";
@@ -16,15 +16,15 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
+  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";
 
 interface ProjectBreadcrumbProps {
   currentProjectId: string;
-  currentProjectName?: string;
+  currentProjectName?: string; // Optional: pass directly if context not available
   isOwnerOrManager: boolean;
   organizationProjectsLimit: number;
   isFormbricksCloud: boolean;
@@ -33,10 +33,18 @@ interface ProjectBreadcrumbProps {
   currentEnvironmentId: string;
   isAccessControlAllowed: boolean;
   isEnvironmentBreadcrumbVisible: boolean;
-  isBilling: boolean;
-  isMembershipPending: boolean;
 }
 
+const isActiveProjectSetting = (pathname: string, settingId: string): boolean => {
+  // Match /workspace/{settingId} or /workspace/{settingId}/... but exclude settings paths
+  if (pathname.includes("/settings/")) {
+    return false;
+  }
+  // Check if path matches /workspace/{settingId} (with optional trailing path)
+  const pattern = new RegExp(`/workspace/${settingId}(?:/|$)`);
+  return pattern.test(pathname);
+};
+
 export const ProjectBreadcrumb = ({
   currentProjectId,
   currentProjectName,
@@ -48,7 +56,6 @@ export const ProjectBreadcrumb = ({
   currentEnvironmentId,
   isAccessControlAllowed,
   isEnvironmentBreadcrumbVisible,
-  isMembershipPending,
 }: ProjectBreadcrumbProps) => {
   const { t } = useTranslation();
   const [isProjectDropdownOpen, setIsProjectDropdownOpen] = useState(false);
@@ -59,19 +66,26 @@ export const ProjectBreadcrumb = ({
   const [projects, setProjects] = useState<{ id: string; name: string }[]>([]);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [isPending, startTransition] = useTransition();
+  const pathname = usePathname();
 
+  // Get current project name from context OR prop
+  // Context is preferred, but prop is fallback for pages without EnvironmentContextWrapper
   const { project: currentProject } = useProject();
   const projectName = currentProject?.name || currentProjectName || "";
 
+  // Lazy-load projects when dropdown opens
   useEffect(() => {
+    // Only fetch when dropdown opened for first time (and no error state)
     if (isProjectDropdownOpen && projects.length === 0 && !isLoadingProjects && !loadError) {
       setIsLoadingProjects(true);
-      setLoadError(null);
+      setLoadError(null); // Clear any previous errors
       getProjectsForSwitcherAction({ organizationId: currentOrganizationId }).then((result) => {
         if (result?.data) {
-          const sorted = [...result.data].sort((a, b) => a.name.localeCompare(b.name));
+          // Sort projects by name
+          const sorted = result.data.toSorted((a, b) => a.name.localeCompare(b.name));
           setProjects(sorted);
         } else {
+          // Handle server errors or validation errors
           const errorMessage = getFormattedErrorMessage(result);
           const error = new Error(errorMessage);
           logger.error(error, "Failed to load projects");
@@ -83,6 +97,44 @@ export const ProjectBreadcrumb = ({
     }
   }, [isProjectDropdownOpen, currentOrganizationId, projects.length, isLoadingProjects, loadError, t]);
 
+  const projectSettings = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${currentEnvironmentId}/workspace/general`,
+    },
+    {
+      id: "look",
+      label: t("common.look_and_feel"),
+      href: `/environments/${currentEnvironmentId}/workspace/look`,
+    },
+    {
+      id: "app-connection",
+      label: t("common.website_and_app_connection"),
+      href: `/environments/${currentEnvironmentId}/workspace/app-connection`,
+    },
+    {
+      id: "integrations",
+      label: t("common.integrations"),
+      href: `/environments/${currentEnvironmentId}/workspace/integrations`,
+    },
+    {
+      id: "teams",
+      label: t("common.team_access"),
+      href: `/environments/${currentEnvironmentId}/workspace/teams`,
+    },
+    {
+      id: "languages",
+      label: t("common.survey_languages"),
+      href: `/environments/${currentEnvironmentId}/workspace/languages`,
+    },
+    {
+      id: "tags",
+      label: t("common.tags"),
+      href: `/environments/${currentEnvironmentId}/workspace/tags`,
+    },
+  ];
+
   if (!currentProject) {
     const errorMessage = `Workspace not found for workspace id: ${currentProjectId}`;
     logger.error(errorMessage);
@@ -105,12 +157,18 @@ export const ProjectBreadcrumb = ({
     setOpenCreateProjectModal(true);
   };
 
+  const handleProjectSettingsNavigation = (settingId: string) => {
+    startTransition(() => {
+      router.push(`/environments/${currentEnvironmentId}/workspace/${settingId}`);
+    });
+  };
+
   const LimitModalButtons = (): [ModalButton, ModalButton] => {
     if (isFormbricksCloud) {
       return [
         {
           text: t("environments.settings.billing.upgrade"),
-          href: `/environments/${currentEnvironmentId}/settings/organization/billing`,
+          href: `/environments/${currentEnvironmentId}/settings/billing`,
         },
         {
           text: t("common.cancel"),
@@ -123,7 +181,7 @@ export const ProjectBreadcrumb = ({
       {
         text: t("environments.settings.billing.upgrade"),
         href: isLicenseActive
-          ? `/environments/${currentEnvironmentId}/settings/organization/enterprise`
+          ? `/environments/${currentEnvironmentId}/settings/enterprise`
           : "https://formbricks.com/upgrade-self-hosted-license",
       },
       {
@@ -132,7 +190,6 @@ export const ProjectBreadcrumb = ({
       },
     ];
   };
-
   return (
     <BreadcrumbItem isActive={isProjectDropdownOpen}>
       <DropdownMenu onOpenChange={setIsProjectDropdownOpen}>
@@ -141,7 +198,7 @@ export const ProjectBreadcrumb = ({
           id="projectDropdownTrigger"
           asChild>
           <div className="flex items-center gap-1">
-            <FoldersIcon className="h-3 w-3" strokeWidth={1.5} />
+            <HotelIcon 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 ? (
@@ -154,7 +211,7 @@ export const ProjectBreadcrumb = ({
 
         <DropdownMenuContent align="start" className="mt-2">
           <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} />
+            <HotelIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
             {t("common.choose_workspace")}
           </div>
           {isLoadingProjects && (
@@ -190,24 +247,7 @@ export const ProjectBreadcrumb = ({
                   </DropdownMenuCheckboxItem>
                 ))}
               </DropdownMenuGroup>
-              {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>
-              ) : (
+              {isOwnerOrManager && (
                 <DropdownMenuCheckboxItem
                   onClick={handleAddProject}
                   className="w-full cursor-pointer justify-between">
@@ -217,8 +257,25 @@ export const ProjectBreadcrumb = ({
               )}
             </>
           )}
+          <DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <div className="px-2 py-1.5 text-sm font-medium text-slate-500">
+              <CogIcon className="mr-2 inline h-4 w-4" strokeWidth={1.5} />
+              {t("common.workspace_configuration")}
+            </div>
+            {projectSettings.map((setting) => (
+              <DropdownMenuCheckboxItem
+                key={setting.id}
+                checked={isActiveProjectSetting(pathname, setting.id)}
+                onClick={() => handleProjectSettingsNavigation(setting.id)}
+                className="cursor-pointer">
+                {setting.label}
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuGroup>
         </DropdownMenuContent>
       </DropdownMenu>
+      {/* Modals */}
       {openLimitModal && (
         <ProjectLimitModal
           open={openLimitModal}

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

@@ -1,5 +1,6 @@
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
+import { EnvironmentLayout } from "@/app/(app)/environments/[environmentId]/components/EnvironmentLayout";
 import { EnvironmentContextWrapper } from "@/app/(app)/environments/[environmentId]/context/environment-context";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getEnvironmentLayoutData } from "@/modules/environments/lib/utils";
@@ -12,11 +13,13 @@ const EnvLayout = async (props: {
   const params = await props.params;
   const { children } = props;
 
+  // Check session first (required for userId)
   const session = await getServerSession(authOptions);
   if (!session?.user) {
     return redirect(`/auth/login`);
   }
 
+  // Single consolidated data fetch (replaces ~12 individual fetches)
   const layoutData = await getEnvironmentLayoutData(params.environmentId, session.user.id);
 
   return (
@@ -26,7 +29,7 @@ const EnvLayout = async (props: {
         environment={layoutData.environment}
         project={layoutData.project}
         organization={layoutData.organization}>
-        {children}
+        <EnvironmentLayout layoutData={layoutData}>{children}</EnvironmentLayout>
       </EnvironmentContextWrapper>
     </>
   );

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

@@ -1,11 +1,10 @@
 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: { params: Promise<{ environmentId: string }> }) => {
+const EnvironmentPage = async (props) => {
   const params = await props.params;
   const { session, organization } = await getEnvironmentAuth(params.environmentId);
 
@@ -13,7 +12,11 @@ const EnvironmentPage = async (props: { params: Promise<{ environmentId: string
   const { isBilling } = getAccessFlags(currentUserMembership?.role);
 
   if (isBilling) {
-    return redirect(getBillingFallbackPath(params.environmentId, IS_FORMBRICKS_CLOUD));
+    if (IS_FORMBRICKS_CLOUD) {
+      return redirect(`/environments/${params.environmentId}/settings/billing`);
+    } else {
+      return redirect(`/environments/${params.environmentId}/settings/enterprise`);
+    }
   }
 
   return redirect(`/environments/${params.environmentId}/surveys`);

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

@@ -0,0 +1,32 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useTranslation } from "react-i18next";
+import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
+
+interface AccountSettingsNavbarProps {
+  environmentId?: string;
+  activeId: string;
+  loading?: boolean;
+}
+
+export const AccountSettingsNavbar = ({ environmentId, activeId, loading }: AccountSettingsNavbarProps) => {
+  const pathname = usePathname();
+  const { t } = useTranslation();
+  const navigation = [
+    {
+      id: "profile",
+      label: t("common.profile"),
+      href: `/environments/${environmentId}/settings/profile`,
+      current: pathname?.includes("/profile"),
+    },
+    {
+      id: "notifications",
+      label: t("common.notifications"),
+      href: `/environments/${environmentId}/settings/notifications`,
+      current: pathname?.includes("/notifications"),
+    },
+  ];
+
+  return <SecondaryNavigation navigation={navigation} activeId={activeId} loading={loading} />;
+};

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

@@ -1,14 +1,10 @@
 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: {
-  params: Promise<{ environmentId: string }>;
-  children: React.ReactNode;
-}) => {
+const AccountSettingsLayout = async (props) => {
   const params = await props.params;
 
   const { children } = props;
@@ -21,15 +17,15 @@ const AccountSettingsLayout = async (props: {
   ]);
 
   if (!organization) {
-    throw new ResourceNotFoundError(t("common.organization"), null);
+    throw new Error(t("common.organization_not_found"));
   }
 
   if (!project) {
-    throw new ResourceNotFoundError(t("common.workspace"), null);
+    throw new Error(t("common.workspace_not_found"));
   }
 
   if (!session) {
-    throw new AuthenticationError(t("common.not_authenticated"));
+    throw new Error(t("common.session_not_found"));
   }
 
   return <>{children}</>;

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

@@ -4,6 +4,7 @@ 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({
@@ -11,16 +12,26 @@ const ZUpdateNotificationSettingsAction = z.object({
 });
 
 export const updateNotificationSettingsAction = authenticatedActionClient
-  .inputSchema(ZUpdateNotificationSettingsAction)
+  .schema(ZUpdateNotificationSettingsAction)
   .action(
-    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;
-    })
+    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;
+      }
+    )
   );

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

@@ -30,7 +30,7 @@ export const NotificationSwitch = ({
   const isChecked =
     notificationType === "unsubscribedOrganizationIds"
       ? !notificationSettings.unsubscribedOrganizationIds?.includes(surveyOrProjectOrOrganizationId)
-      : notificationSettings[notificationType]?.[surveyOrProjectOrOrganizationId] === true;
+      : notificationSettings[notificationType][surveyOrProjectOrOrganizationId] === true;
 
   const handleSwitchChange = async () => {
     setIsLoading(true);
@@ -49,11 +49,8 @@ export const NotificationSwitch = ({
         ];
       }
     } else {
-      updatedNotificationSettings[notificationType] = {
-        ...updatedNotificationSettings[notificationType],
-        [surveyOrProjectOrOrganizationId]:
-          !updatedNotificationSettings[notificationType]?.[surveyOrProjectOrOrganizationId],
-      };
+      updatedNotificationSettings[notificationType][surveyOrProjectOrOrganizationId] =
+        !updatedNotificationSettings[notificationType][surveyOrProjectOrOrganizationId];
     }
 
     const updatedNotificationSettingsActionResponse = await updateNotificationSettingsAction({
@@ -81,7 +78,7 @@ export const NotificationSwitch = ({
     ) {
       switch (notificationType) {
         case "alert":
-          if (notificationSettings[notificationType]?.[surveyOrProjectOrOrganizationId] === true) {
+          if (notificationSettings[notificationType][surveyOrProjectOrOrganizationId] === true) {
             handleSwitchChange();
             toast.success(
               t(

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

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

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

@@ -1,8 +1,185 @@
-import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { prisma } from "@formbricks/database";
+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";
+import { getUser } from "@/lib/user/service";
+import { getTranslate } from "@/lingodotdev/server";
+import { authOptions } from "@/modules/auth/lib/authOptions";
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { EditAlerts } from "./components/EditAlerts";
+import { IntegrationsTip } from "./components/IntegrationsTip";
+import type { Membership } from "./types";
 
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+const setCompleteNotificationSettings = (
+  notificationSettings: TUserNotificationSettings,
+  memberships: Membership[]
+): TUserNotificationSettings => {
+  const newNotificationSettings = {
+    alert: {},
+    unsubscribedOrganizationIds: notificationSettings.unsubscribedOrganizationIds || [],
+  };
+  for (const membership of memberships) {
+    for (const project of membership.organization.projects) {
+      // set default values for alerts
+      for (const environment of project.environments) {
+        for (const survey of environment.surveys) {
+          newNotificationSettings.alert[survey.id] =
+            notificationSettings[survey.id]?.responseFinished ||
+            (notificationSettings.alert && notificationSettings.alert[survey.id]) ||
+            false; // check for legacy notification settings w/o "alerts" key
+        }
+      }
+    }
+  }
+  return newNotificationSettings;
+};
+
+const getMemberships = async (userId: string): Promise<Membership[]> => {
+  const memberships = await prisma.membership.findMany({
+    where: {
+      userId,
+      role: {
+        not: "billing",
+      },
+      OR: [
+        {
+          // Fetch all projects if user role is owner or manager
+          role: {
+            in: ["owner", "manager"],
+          },
+        },
+        {
+          // Filter projects based on team membership if user is not owner or manager
+          organization: {
+            projects: {
+              some: {
+                projectTeams: {
+                  some: {
+                    team: {
+                      teamUsers: {
+                        some: {
+                          userId,
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      ],
+    },
+    select: {
+      organization: {
+        select: {
+          id: true,
+          name: true,
+          projects: {
+            // Apply conditional filtering based on user's role
+            where: {
+              OR: [
+                {
+                  // Fetch all projects if user is owner or manager
+                  organization: {
+                    memberships: {
+                      some: {
+                        userId,
+                        role: {
+                          in: ["owner", "manager"],
+                        },
+                      },
+                    },
+                  },
+                },
+                {
+                  // Only include projects accessible through teams if user is not owner or manager
+                  projectTeams: {
+                    some: {
+                      team: {
+                        teamUsers: {
+                          some: {
+                            userId,
+                          },
+                        },
+                      },
+                    },
+                  },
+                },
+              ],
+            },
+            select: {
+              id: true,
+              name: true,
+              environments: {
+                where: {
+                  type: "production",
+                },
+                select: {
+                  id: true,
+                  surveys: {
+                    select: {
+                      id: true,
+                      name: true,
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+  return memberships;
+};
+
+const Page = async (props) => {
+  const searchParams = await props.searchParams;
   const params = await props.params;
-  return redirect(`/environments/${params.environmentId}/settings/account/notifications`);
+  const t = await getTranslate();
+  const session = await getServerSession(authOptions);
+  if (!session) {
+    throw new Error(t("common.session_not_found"));
+  }
+  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"));
+  }
+
+  if (!memberships) {
+    throw new Error(t("common.membership_not_found"));
+  }
+
+  if (user?.notificationSettings) {
+    user.notificationSettings = setCompleteNotificationSettings(user.notificationSettings, memberships);
+  }
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle={t("common.account_settings")}>
+        <AccountSettingsNavbar environmentId={params.environmentId} activeId="notifications" />
+      </PageHeader>
+      <SettingsCard
+        title={t("environments.settings.notifications.email_alerts_surveys")}
+        description={t(
+          "environments.settings.notifications.set_up_an_alert_to_get_an_email_on_new_responses"
+        )}>
+        <EditAlerts
+          memberships={memberships}
+          user={user}
+          environmentId={params.environmentId}
+          autoDisableNotificationType={autoDisableNotificationType}
+          autoDisableNotificationElementId={autoDisableNotificationElementId}
+        />
+      </SettingsCard>
+      <IntegrationsTip environmentId={params.environmentId} />
+    </PageContentWrapper>
+  );
 };
 
 export default Page;

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

@@ -10,18 +10,17 @@ import {
   getIsEmailUnique,
   verifyUserPassword,
 } from "@/app/(app)/environments/[environmentId]/settings/(account)/profile/lib/user";
-import { EMAIL_VERIFICATION_DISABLED, PASSWORD_RESET_DISABLED } from "@/lib/constants";
+import { EMAIL_VERIFICATION_DISABLED } from "@/lib/constants";
 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 { sendVerificationNewEmail } from "@/modules/email";
+import { sendForgotPasswordEmail, sendVerificationNewEmail } from "@/modules/email";
 
-function buildUserUpdatePayload(parsedInput: TUserPersonalInfoUpdateInput): TUserUpdateInput {
+function buildUserUpdatePayload(parsedInput: any): TUserUpdateInput {
   return {
     ...(parsedInput.name && { name: parsedInput.name }),
     ...(parsedInput.locale && { locale: parsedInput.locale }),
@@ -64,40 +63,50 @@ async function handleEmailUpdate({
   return 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 });
+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 });
 
-    // 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);
+      // 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;
     }
-
-    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 }) => {
-    if (PASSWORD_RESET_DISABLED) {
-      throw new OperationNotAllowedError("Password reset is disabled");
+  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 };
     }
-
-    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/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, sortedAppLanguages } from "@/lib/i18n/utils";
+import { appLanguages } 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,14 +116,10 @@ export const EditProfileDetailsForm = ({
       setShowModal(true);
     } else {
       try {
-        const result = await updateUserAction({
+        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);
@@ -202,54 +198,41 @@ export const EditProfileDetailsForm = ({
           <FormField
             control={form.control}
             name="locale"
-            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>
-              );
-            }}
+            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>
+            )}
           />
 
           {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="block w-full rounded-md border-slate-300 shadow-sm focus:border-brand-dark focus:ring-brand-dark sm:text-sm"
+                            className="focus:border-brand-dark focus:ring-brand-dark block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
                             value={field.value}
                             onChange={(password) => field.onChange(password)}
                           />

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

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

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

@@ -1,8 +1,101 @@
-import { redirect } from "next/navigation";
+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 { getIsMultiOrgEnabled, getIsTwoFactorAuthEnabled } from "@/modules/ee/license-check/lib/utils";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+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 { UpgradePrompt } from "@/modules/ui/components/upgrade-prompt";
+import { SettingsCard } from "../../components/SettingsCard";
+import { DeleteAccount } from "./components/DeleteAccount";
+import { EditProfileDetailsForm } from "./components/EditProfileDetailsForm";
 
 const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+  const isTwoFactorAuthEnabled = await getIsTwoFactorAuthEnabled();
+  const isMultiOrgEnabled = await getIsMultiOrgEnabled();
   const params = await props.params;
-  return redirect(`/environments/${params.environmentId}/settings/account/profile`);
+  const t = await getTranslate();
+  const { environmentId } = params;
+
+  const { session } = await getEnvironmentAuth(params.environmentId);
+
+  const organizationsWithSingleOwner = await getOrganizationsWhereUserIsSingleOwner(session.user.id);
+
+  const user = session?.user ? await getUser(session.user.id) : null;
+
+  if (!user) {
+    throw new Error(t("common.user_not_found"));
+  }
+
+  const isPasswordResetEnabled = !PASSWORD_RESET_DISABLED && user.identityProvider === "email";
+
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle={t("common.account_settings")}>
+        <AccountSettingsNavbar environmentId={environmentId} activeId="profile" />
+      </PageHeader>
+      {user && (
+        <div>
+          <SettingsCard
+            title={t("environments.settings.profile.personal_information")}
+            description={t("environments.settings.profile.update_personal_info")}>
+            <EditProfileDetailsForm
+              user={user}
+              emailVerificationDisabled={EMAIL_VERIFICATION_DISABLED}
+              isPasswordResetEnabled={isPasswordResetEnabled}
+            />
+          </SettingsCard>
+          {user.identityProvider === "email" && (
+            <SettingsCard
+              title={t("common.security")}
+              description={t("environments.settings.profile.security_description")}>
+              {!isTwoFactorAuthEnabled && !user.twoFactorEnabled ? (
+                <UpgradePrompt
+                  title={t("environments.settings.profile.unlock_two_factor_authentication")}
+                  description={t("environments.settings.profile.two_factor_authentication_description")}
+                  buttons={[
+                    {
+                      text: IS_FORMBRICKS_CLOUD
+                        ? t("common.start_free_trial")
+                        : t("common.request_trial_license"),
+                      href: IS_FORMBRICKS_CLOUD
+                        ? `/environments/${params.environmentId}/settings/billing`
+                        : "https://formbricks.com/upgrade-self-hosting-license",
+                    },
+                    {
+                      text: t("common.learn_more"),
+                      href: IS_FORMBRICKS_CLOUD
+                        ? `/environments/${params.environmentId}/settings/billing`
+                        : "https://formbricks.com/learn-more-self-hosting-license",
+                    },
+                  ]}
+                />
+              ) : (
+                <AccountSecurity user={user} />
+              )}
+            </SettingsCard>
+          )}
+
+          <SettingsCard
+            title={t("environments.settings.profile.delete_account")}
+            description={t("environments.settings.profile.confirm_delete_account")}>
+            <DeleteAccount
+              session={session}
+              IS_FORMBRICKS_CLOUD={IS_FORMBRICKS_CLOUD}
+              user={user}
+              organizationsWithSingleOwner={organizationsWithSingleOwner}
+              isMultiOrgEnabled={isMultiOrgEnabled}
+            />
+          </SettingsCard>
+          <IdBadge id={user.id} label={t("common.profile_id")} variant="column" />
+        </div>
+      )}
+    </PageContentWrapper>
+  );
 };
 
 export default Page;

apps/web/app/(app)/environments/[environmentId]/settings/(organization)/api-keys/page.tsx

@@ -1,8 +1,3 @@
-import { redirect } from "next/navigation";
+import { APIKeysPage } from "@/modules/organization/settings/api-keys/page";
 
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  return redirect(`/environments/${params.environmentId}/settings/organization/api-keys`);
-};
-
-export default Page;
+export default APIKeysPage;

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

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

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

@@ -1,8 +1,3 @@
-import { redirect } from "next/navigation";
+import { PricingPage } from "@/modules/ee/billing/page";
 
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
-  const params = await props.params;
-  return redirect(`/environments/${params.environmentId}/settings/organization/billing`);
-};
-
-export default Page;
+export default PricingPage;

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

@@ -0,0 +1,74 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useTranslation } from "react-i18next";
+import { TOrganizationRole } from "@formbricks/types/memberships";
+import { getAccessFlags } from "@/lib/membership/utils";
+import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
+
+interface OrganizationSettingsNavbarProps {
+  environmentId?: string;
+  isFormbricksCloud: boolean;
+  membershipRole?: TOrganizationRole;
+  activeId: string;
+  loading?: boolean;
+}
+
+export const OrganizationSettingsNavbar = ({
+  environmentId,
+  isFormbricksCloud,
+  membershipRole,
+  activeId,
+  loading,
+}: OrganizationSettingsNavbarProps) => {
+  const pathname = usePathname();
+  const { isMember, isOwner } = getAccessFlags(membershipRole);
+  const isPricingDisabled = isMember;
+  const { t } = useTranslation();
+
+  const navigation = [
+    {
+      id: "general",
+      label: t("common.general"),
+      href: `/environments/${environmentId}/settings/general`,
+      current: pathname?.includes("/general"),
+      hidden: false,
+    },
+    {
+      id: "teams",
+      label: t("common.members_and_teams"),
+      href: `/environments/${environmentId}/settings/teams`,
+      current: pathname?.includes("/teams"),
+    },
+    {
+      id: "api-keys",
+      label: t("common.api_keys"),
+      href: `/environments/${environmentId}/settings/api-keys`,
+      current: pathname?.includes("/api-keys"),
+      hidden: !isOwner,
+    },
+    {
+      id: "domain",
+      label: t("common.domain"),
+      href: `/environments/${environmentId}/settings/domain`,
+      current: pathname?.includes("/domain"),
+      hidden: isFormbricksCloud,
+    },
+    {
+      id: "billing",
+      label: t("common.billing"),
+      href: `/environments/${environmentId}/settings/billing`,
+      hidden: !isFormbricksCloud || loading,
+      current: pathname?.includes("/billing"),
+    },
+    {
+      id: "enterprise",
+      label: t("common.enterprise_license"),
+      href: `/environments/${environmentId}/settings/enterprise`,
+      hidden: isFormbricksCloud || isPricingDisabled,
+      current: pathname?.includes("/enterprise"),
+    },
+  ];
+
+  return <SecondaryNavigation navigation={navigation} activeId={activeId} loading={loading} />;
+};

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

@@ -1,8 +1,72 @@
-import { redirect } from "next/navigation";
+import { notFound } from "next/navigation";
+import { IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED } from "@/lib/constants";
+import { getTranslate } from "@/lingodotdev/server";
+import { getWhiteLabelPermission } from "@/modules/ee/license-check/lib/utils";
+import { FaviconCustomizationSettings } from "@/modules/ee/whitelabel/favicon-customization/components/favicon-customization-settings";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+import { getSurveysWithSlugsByOrganizationId } from "@/modules/survey/lib/slug";
+import { Alert, AlertDescription } from "@/modules/ui/components/alert";
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { SettingsCard } from "../../components/SettingsCard";
+import { OrganizationSettingsNavbar } from "../components/OrganizationSettingsNavbar";
+import { PrettyUrlsTable } from "./components/pretty-urls-table";
 
 const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
-  return redirect(`/environments/${params.environmentId}/settings/organization/domain`);
+  const t = await getTranslate();
+
+  if (IS_FORMBRICKS_CLOUD) {
+    return notFound();
+  }
+
+  const { session, currentUserMembership, organization, isOwner, isManager } = await getEnvironmentAuth(
+    params.environmentId
+  );
+
+  if (!session) {
+    throw new Error(t("common.session_not_found"));
+  }
+
+  const hasWhiteLabelPermission = await getWhiteLabelPermission(organization.billing.plan);
+  const isOwnerOrManager = isManager || isOwner;
+
+  const surveys = await getSurveysWithSlugsByOrganizationId(organization.id);
+
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle={t("environments.settings.general.organization_settings")}>
+        <OrganizationSettingsNavbar
+          environmentId={params.environmentId}
+          isFormbricksCloud={IS_FORMBRICKS_CLOUD}
+          membershipRole={currentUserMembership?.role}
+          activeId="domain"
+        />
+      </PageHeader>
+
+      {!IS_STORAGE_CONFIGURED && (
+        <div className="max-w-4xl">
+          <Alert variant="warning">
+            <AlertDescription>{t("common.storage_not_configured")}</AlertDescription>
+          </Alert>
+        </div>
+      )}
+
+      <FaviconCustomizationSettings
+        organization={organization}
+        hasWhiteLabelPermission={hasWhiteLabelPermission}
+        environmentId={params.environmentId}
+        isReadOnly={!isOwnerOrManager}
+        isStorageConfigured={IS_STORAGE_CONFIGURED}
+      />
+
+      <SettingsCard
+        title={t("environments.settings.domain.title")}
+        description={t("environments.settings.domain.description")}>
+        <PrettyUrlsTable surveys={surveys} />
+      </SettingsCard>
+    </PageContentWrapper>
+  );
 };
 
 export default Page;

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

@@ -1,146 +0,0 @@
-"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

@@ -1,164 +0,0 @@
-"use client";
-
-import { TFunction } from "i18next";
-import { RotateCcwIcon } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import toast from "react-hot-toast";
-import { useTranslation } from "react-i18next";
-import { 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";
-
-interface EnterpriseLicenseStatusProps {
-  status: TLicenseStatus;
-  lastChecked: Date;
-  gracePeriodEnd?: Date;
-  environmentId: string;
-}
-
-const getBadgeConfig = (
-  status: TLicenseStatus,
-  t: TFunction
-): { type: "success" | "error" | "warning" | "gray"; label: string } => {
-  switch (status) {
-    case "active":
-      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":
-      return { type: "error", label: t("environments.settings.enterprise.license_status_invalid") };
-    default:
-      return { type: "gray", label: t("environments.settings.enterprise.license_status") };
-  }
-};
-
-export const EnterpriseLicenseStatus = ({
-  status,
-  lastChecked,
-  gracePeriodEnd,
-  environmentId,
-}: EnterpriseLicenseStatusProps) => {
-  const { t, i18n } = useTranslation();
-  const locale = i18n.resolvedLanguage ?? i18n.language ?? "en-US";
-  const router = useRouter();
-  const [isRechecking, setIsRechecking] = useState(false);
-
-  const handleRecheck = async () => {
-    setIsRechecking(true);
-    try {
-      const result = await recheckLicenseAction({ environmentId });
-      if (result?.serverError) {
-        toast.error(result.serverError || t("environments.settings.enterprise.recheck_license_failed"));
-        return;
-      }
-
-      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 {
-          toast.success(t("environments.settings.enterprise.recheck_license_success"));
-        }
-        router.refresh();
-      } else {
-        toast.error(t("environments.settings.enterprise.recheck_license_failed"));
-      }
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : t("environments.settings.enterprise.recheck_license_failed")
-      );
-    } finally {
-      setIsRechecking(false);
-    }
-  };
-
-  const badgeConfig = getBadgeConfig(status, t);
-
-  return (
-    <SettingsCard
-      title={t("environments.settings.enterprise.license_status")}
-      description={t("environments.settings.enterprise.license_status_description")}>
-      <div className="flex flex-col gap-4">
-        <div className="flex items-center justify-between gap-3">
-          <div className="flex flex-col gap-1.5">
-            <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"
-            variant="outline"
-            size="sm"
-            onClick={handleRecheck}
-            disabled={isRechecking}
-            className="shrink-0">
-            {isRechecking ? (
-              <>
-                <RotateCcwIcon className="mr-2 h-4 w-4 animate-spin" />
-                {t("environments.settings.enterprise.rechecking")}
-              </>
-            ) : (
-              <>
-                <RotateCcwIcon className="mr-2 h-4 w-4" />
-                {t("environments.settings.enterprise.recheck_license")}
-              </>
-            )}
-          </Button>
-        </div>
-        {status === "unreachable" && gracePeriodEnd && (
-          <Alert variant="warning" size="small">
-            <AlertDescription className="overflow-visible whitespace-normal">
-              {t("environments.settings.enterprise.license_unreachable_grace_period", {
-                gracePeriodEnd: formatDateForDisplay(new Date(gracePeriodEnd), locale, {
-                  year: "numeric",
-                  month: "short",
-                  day: "numeric",
-                }),
-              })}
-            </AlertDescription>
-          </Alert>
-        )}
-        {status === "invalid_license" && (
-          <Alert variant="error" size="small">
-            <AlertDescription className="overflow-visible whitespace-normal">
-              {t("environments.settings.enterprise.license_invalid_description")}
-            </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
-            className="font-medium text-slate-700 underline hover:text-slate-900"
-            href="mailto:hola@formbricks.com">
-            hola@formbricks.com
-          </a>
-        </p>
-      </div>
-    </SettingsCard>
-  );
-};

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

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

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

@@ -1,8 +1,200 @@
-import { redirect } from "next/navigation";
+import { CheckIcon } from "lucide-react";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { OrganizationSettingsNavbar } from "@/app/(app)/environments/[environmentId]/settings/(organization)/components/OrganizationSettingsNavbar";
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getTranslate } from "@/lingodotdev/server";
+import { getEnterpriseLicense } from "@/modules/ee/license-check/lib/license";
+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";
 
-const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
+const Page = async (props) => {
   const params = await props.params;
-  return redirect(`/environments/${params.environmentId}/settings/organization/enterprise`);
+  const t = await getTranslate();
+  if (IS_FORMBRICKS_CLOUD) {
+    return notFound();
+  }
+
+  const { isMember, currentUserMembership } = await getEnvironmentAuth(params.environmentId);
+
+  const isPricingDisabled = isMember;
+
+  if (isPricingDisabled) {
+    return notFound();
+  }
+
+  const { active: isEnterpriseEdition } = await getEnterpriseLicense();
+
+  const paidFeatures = [
+    {
+      title: t("environments.settings.billing.remove_branding"),
+      comingSoon: false,
+      onRequest: false,
+    },
+    {
+      title: t("environments.settings.enterprise.sso"),
+      comingSoon: false,
+      onRequest: false,
+    },
+    {
+      title: t("environments.workspace.languages.multi_language_surveys"),
+      comingSoon: false,
+      onRequest: false,
+    },
+    {
+      title: t("environments.settings.enterprise.organization_roles"),
+      comingSoon: false,
+      onRequest: false,
+    },
+    {
+      title: t("environments.settings.enterprise.teams"),
+      comingSoon: false,
+      onRequest: false,
+    },
+    {
+      title: t("environments.settings.enterprise.contacts_and_segments"),
+      comingSoon: false,
+      onRequest: false,
+    },
+    {
+      title: t("environments.settings.enterprise.audit_logs"),
+      comingSoon: false,
+      onRequest: true,
+    },
+    {
+      title: t("environments.settings.enterprise.saml_sso"),
+      comingSoon: false,
+      onRequest: true,
+    },
+    {
+      title: t("environments.settings.enterprise.service_level_agreement"),
+      comingSoon: false,
+      onRequest: true,
+    },
+    {
+      title: t("environments.settings.enterprise.soc2_hipaa_iso_27001_compliance_check"),
+      comingSoon: false,
+      onRequest: true,
+    },
+  ];
+
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle={t("environments.settings.general.organization_settings")}>
+        <OrganizationSettingsNavbar
+          environmentId={params.environmentId}
+          isFormbricksCloud={IS_FORMBRICKS_CLOUD}
+          membershipRole={currentUserMembership?.role}
+          activeId="enterprise"
+        />
+      </PageHeader>
+      {isEnterpriseEdition ? (
+        <div>
+          <div className="mt-8 max-w-4xl rounded-lg border border-slate-300 bg-slate-100 shadow-sm">
+            <div className="space-y-4 p-8">
+              <div className="flex items-center gap-x-2">
+                <div className="rounded-full border border-green-300 bg-green-100 p-0.5 dark:bg-green-800">
+                  <CheckIcon className="h-5 w-5 p-0.5 text-green-500 dark:text-green-400" />
+                </div>
+                <p className="text-slate-800">
+                  {t(
+                    "environments.settings.enterprise.your_enterprise_license_is_active_all_features_unlocked"
+                  )}
+                </p>
+              </div>
+              <p className="text-sm text-slate-500">
+                {t("environments.settings.enterprise.questions_please_reach_out_to")}{" "}
+                <a className="font-semibold underline" href="mailto:hola@formbricks.com">
+                  hola@formbricks.com
+                </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <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">
+            <svg
+              viewBox="0 0 1024 1024"
+              className="absolute top-1/2 left-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
+              aria-hidden="true">
+              <circle
+                cx={512}
+                cy={512}
+                r={512}
+                fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
+                fillOpacity="0.7"
+              />
+              <defs>
+                <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
+                  <stop stopColor="#00E6CA" />
+                  <stop offset={0} stopColor="#00C4B8" />
+                </radialGradient>
+              </defs>
+            </svg>
+            <div className="mx-auto text-center lg:mx-0 lg:flex-auto lg:py-16 lg:text-left">
+              <h2 className="text-2xl font-bold text-white sm:text-3xl">
+                {t("environments.settings.enterprise.unlock_the_full_power_of_formbricks_free_for_30_days")}
+              </h2>
+              <p className="text-md mt-6 leading-8 text-slate-300">
+                {t("environments.settings.enterprise.keep_full_control_over_your_data_privacy_and_security")}
+                <br />
+                {t(
+                  "environments.settings.enterprise.get_an_enterprise_license_to_get_access_to_all_features"
+                )}
+              </p>
+            </div>
+          </div>
+          <div className="mt-8 rounded-lg border border-slate-300 bg-slate-100 shadow-sm">
+            <div className="p-8">
+              <h2 className="mr-2 inline-flex text-2xl font-bold text-slate-700">
+                {t("environments.settings.enterprise.enterprise_features")}
+              </h2>
+              <ul className="my-4 space-y-4">
+                {paidFeatures.map((feature, index) => (
+                  <li key={index} className="flex items-center">
+                    <div className="rounded-full border border-green-300 bg-green-100 p-0.5 dark:bg-green-800">
+                      <CheckIcon className="h-5 w-5 p-0.5 text-green-500 dark:text-green-400" />
+                    </div>
+                    <span className="ml-2 text-sm text-slate-500 dark:text-slate-400">{feature.title}</span>
+                    {feature.comingSoon && (
+                      <span className="mx-2 rounded-full bg-blue-100 px-3 py-1 text-xs text-blue-700 dark:bg-slate-700 dark:text-teal-500">
+                        {t("environments.settings.enterprise.coming_soon")}
+                      </span>
+                    )}
+                    {feature.onRequest && (
+                      <span className="mx-2 rounded-full bg-violet-100 px-3 py-1 text-xs text-violet-700 dark:bg-slate-700 dark:text-teal-500">
+                        {t("environments.settings.enterprise.on_request")}
+                      </span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+              <p className="my-6 text-sm text-slate-700">
+                {t(
+                  "environments.settings.enterprise.no_call_needed_no_strings_attached_request_a_free_30_day_trial_license_to_test_all_features_by_filling_out_this_form"
+                )}
+              </p>
+              <Button asChild>
+                <Link
+                  href="https://app.formbricks.com/s/clvupq3y205i5yrm3sm9v1xt5"
+                  target="_blank"
+                  rel="noopener noreferrer nofollow"
+                  referrerPolicy="no-referrer">
+                  {t("environments.settings.enterprise.request_30_day_trial_license")}
+                </Link>
+              </Button>
+              <p className="mt-2 text-xs text-slate-500">
+                {t("environments.settings.enterprise.no_credit_card_no_sales_call_just_test_it")}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </PageContentWrapper>
+  );
 };
 
 export default Page;