fix: build

.cursor/rules/cache-optimization.mdc

@@ -179,14 +179,14 @@ For endpoints serving client SDKs, coordinate TTLs across layers:
 
 ```typescript
 // Client SDK cache (expiresAt) - longest TTL for fewer requests
-const CLIENT_TTL = 60;           // 1 minute (seconds for client)
+const CLIENT_TTL = 60 * 60;           // 1 hour (seconds for client)
 
 // Server Redis cache - shorter TTL ensures fresh data for clients  
-const SERVER_TTL = 60 * 1000;   // 1 minutes in milliseconds
+const SERVER_TTL = 60 * 30 * 1000;   // 30 minutes in milliseconds
 
 // HTTP cache headers (seconds)
-const BROWSER_TTL = 60;         // 1 minute (max-age)
-const CDN_TTL = 60;             // 1 minute (s-maxage)
+const BROWSER_TTL = 60 * 60;         // 1 hour (max-age)
+const CDN_TTL = 60 * 30;             // 30 minutes (s-maxage)
 const CORS_TTL = 60 * 60;            // 1 hour (balanced approach)
 ```
 

.cursor/rules/database.mdc

@@ -1,8 +1,13 @@
 ---
 description: >
-globs: schema.prisma
-alwaysApply: false
+  This rule provides comprehensive knowledge about the Formbricks database structure, relationships, 
+  and data patterns. It should be used **only when the agent explicitly requests database schema-level 
+  details** to support tasks such as: writing/debugging Prisma queries, designing/reviewing data models, 
+  investigating multi-tenancy behavior, creating API endpoints, or understanding data relationships.
+globs: []
+alwaysApply: agent-requested
 ---
+
 # Formbricks Database Schema Reference
 
 This rule provides a reference to the Formbricks database structure. For the most up-to-date and complete schema definitions, please refer to the schema.prisma file directly.

.cursor/rules/performance-optimization.mdc

@@ -0,0 +1,5 @@
+---
+description:
+globs:
+alwaysApply: false
+---

.cursor/rules/react-context-providers.mdc

@@ -0,0 +1,5 @@
+---
+description:
+globs:
+alwaysApply: false
+---

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

@@ -281,9 +281,15 @@ runs:
         tags: ${{ inputs.registry_type == 'ecr' && steps.ecr-tags.outputs.tags || (inputs.registry_type == 'ghcr' && inputs.experimental_mode == 'true' && steps.ghcr-meta-experimental.outputs.tags) || (inputs.registry_type == 'ghcr' && inputs.experimental_mode == 'false' && steps.ghcr-extra-tags.outputs.tags) || (inputs.registry_type == 'ghcr' && format('ghcr.io/{0}:{1}', inputs.ghcr_image_name, steps.version.outputs.version)) || (inputs.registry_type == 'ecr' && format('{0}/{1}:{2}', inputs.ecr_registry, inputs.ecr_repository, steps.version.outputs.version)) }}
         labels: ${{ inputs.registry_type == 'ghcr' && inputs.experimental_mode == 'true' && steps.ghcr-meta-experimental.outputs.labels || '' }}
         secrets: |
+          database_url=${{ env.DUMMY_DATABASE_URL }}
+          encryption_key=${{ env.DUMMY_ENCRYPTION_KEY }}
+          redis_url=${{ env.DUMMY_REDIS_URL }}
           sentry_auth_token=${{ env.SENTRY_AUTH_TOKEN }}
       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 }}
 
     - name: Sign GHCR image (GHCR only)

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

@@ -88,4 +88,7 @@ jobs:
           make_latest: ${{ inputs.MAKE_LATEST }}
         env:
           DEPOT_PROJECT_TOKEN: ${{ secrets.DEPOT_PROJECT_TOKEN }}
+          DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
+          DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
+          DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

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

@@ -70,7 +70,9 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
           secrets: |
-            sentry_auth_token=
+            database_url=${{ secrets.DUMMY_DATABASE_URL }}
+            encryption_key=${{ secrets.DUMMY_ENCRYPTION_KEY }}
+            redis_url=redis://localhost:6379
 
       - name: Verify and Initialize PostgreSQL
         run: |
@@ -127,6 +129,7 @@ jobs:
         shell: bash
         env:
           GITHUB_SHA: ${{ github.sha }}
+          DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
         run: |
           echo "🧪 Testing if the Docker image starts correctly..."
 
@@ -138,7 +141,7 @@ jobs:
             $DOCKER_RUN_ARGS \
             -p 3000:3000 \
             -e DATABASE_URL="postgresql://test:test@host.docker.internal:5432/formbricks" \
-            -e ENCRYPTION_KEY="test-key-00000000000000000000000000000000000000000000000000" \
+            -e ENCRYPTION_KEY="$DUMMY_ENCRYPTION_KEY" \
             -e REDIS_URL="redis://host.docker.internal:6379" \
             -d "formbricks-test:$GITHUB_SHA"
 

.github/workflows/e2e.yml

@@ -17,6 +17,7 @@ on:
   workflow_dispatch:
 
 env:
+  TELEMETRY_DISABLED: 1
   TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
   TURBO_TEAM: ${{ vars.TURBO_TEAM }}
 

.github/workflows/formbricks-release.yml

@@ -89,7 +89,7 @@ jobs:
       - check-latest-release
     with:
       IS_PRERELEASE: ${{ github.event.release.prerelease }}
-      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}
+      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest }}
 
   docker-build-cloud:
     name: Build & push Formbricks Cloud to ECR
@@ -101,7 +101,7 @@ jobs:
     with:
       image_tag: ${{ needs.docker-build-community.outputs.VERSION }}
       IS_PRERELEASE: ${{ github.event.release.prerelease }}
-      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}
+      MAKE_LATEST: ${{ needs.check-latest-release.outputs.is_latest }}
     needs:
       - check-latest-release
       - docker-build-community
@@ -154,4 +154,4 @@ jobs:
       release_tag: ${{ github.event.release.tag_name }}
       commit_sha: ${{ github.sha }}
       is_prerelease: ${{ github.event.release.prerelease }}
-      make_latest: ${{ needs.check-latest-release.outputs.is_latest == 'true' }}
+      make_latest: ${{ needs.check-latest-release.outputs.is_latest }}

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

@@ -44,4 +44,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           DEPOT_PROJECT_TOKEN: ${{ secrets.DEPOT_PROJECT_TOKEN }}
+          DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
+          DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
+          DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

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

@@ -102,4 +102,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           DEPOT_PROJECT_TOKEN: ${{ secrets.DEPOT_PROJECT_TOKEN }}
+          DUMMY_DATABASE_URL: ${{ secrets.DUMMY_DATABASE_URL }}
+          DUMMY_ENCRYPTION_KEY: ${{ secrets.DUMMY_ENCRYPTION_KEY }}
+          DUMMY_REDIS_URL: ${{ secrets.DUMMY_REDIS_URL }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}

apps/web/Dockerfile

@@ -25,6 +25,10 @@ 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
 
+# Copy the secrets handling script
+COPY apps/web/scripts/docker/read-secrets.sh /tmp/read-secrets.sh
+RUN chmod +x /tmp/read-secrets.sh
+
 # Increase Node.js memory limit as a regular build argument
 ARG NODE_OPTIONS="--max_old_space_size=8192"
 ENV NODE_OPTIONS=${NODE_OPTIONS}
@@ -33,10 +37,6 @@ ENV NODE_OPTIONS=${NODE_OPTIONS}
 # but needs explicit declaration for some build systems (like Depot)
 ARG TARGETARCH
 
-# Base path for the application (optional)
-ARG BASE_PATH=""
-ENV BASE_PATH=${BASE_PATH}
-
 # Set the working directory
 WORKDIR /app
 
@@ -57,11 +57,13 @@ RUN pnpm install --ignore-scripts
 # Build the database package first
 RUN pnpm build --filter=@formbricks/database
 
-# Build the project - only mount Sentry token for optional sourcemap uploads
-# DATABASE_URL, REDIS_URL, ENCRYPTION_KEY defaults are provided by env.ts during build
-RUN --mount=type=secret,id=sentry_auth_token \
-    SENTRY_AUTH_TOKEN=$(cat /run/secrets/sentry_auth_token 2>/dev/null || echo "") \
-    pnpm build --filter=@formbricks/web...
+# Build the project using our secret reader script
+# This mounts the secrets only during this build step without storing them in layers
+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 \
+    /tmp/read-secrets.sh pnpm build --filter=@formbricks/web...
 
 # Extract Prisma version
 RUN jq -r '.devDependencies.prisma' packages/database/package.json > /prisma_version.txt
@@ -122,7 +124,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
 
-RUN npm install -g prisma@6
+RUN npm install -g prisma
 
 # Create a startup script to handle the conditional logic
 COPY --from=installer /app/apps/web/scripts/docker/next-start.sh /home/nextjs/start.sh

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

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { DatabaseError } from "@formbricks/types/errors";
 import { getTeamsByOrganizationId } from "./onboarding";
 

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

@@ -1,8 +1,8 @@
 "use server";
 
-import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";
 import { TOrganizationTeam } from "@/app/(app)/(onboarding)/types/onboarding";

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

@@ -1,6 +1,8 @@
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { AuthorizationError } from "@formbricks/types/errors";
+import { PosthogIdentify } from "@/app/(app)/environments/[environmentId]/components/PosthogIdentify";
+import { IS_POSTHOG_CONFIGURED } from "@/lib/constants";
 import { canUserAccessOrganization } from "@/lib/organization/auth";
 import { getOrganization } from "@/lib/organization/service";
 import { getUser } from "@/lib/user/service";
@@ -38,6 +40,14 @@ const ProjectOnboardingLayout = async (props) => {
 
   return (
     <div className="flex-1 bg-slate-50">
+      <PosthogIdentify
+        session={session}
+        user={user}
+        organizationId={organization.id}
+        organizationName={organization.name}
+        organizationBilling={organization.billing}
+        isPosthogEnabled={IS_POSTHOG_CONFIGURED}
+      />
       <ToasterClient />
       {children}
     </div>

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

@@ -1,13 +1,14 @@
 import { redirect } from "next/navigation";
 import { getEnvironment } from "@/lib/environment/service";
 import { environmentIdLayoutChecks } from "@/modules/environments/lib/utils";
+import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 
 const SurveyEditorEnvironmentLayout = async (props) => {
   const params = await props.params;
 
   const { children } = props;
 
-  const { t, session, user } = await environmentIdLayoutChecks(params.environmentId);
+  const { t, session, user, organization } = await environmentIdLayoutChecks(params.environmentId);
 
   if (!session) {
     return redirect(`/auth/login`);
@@ -24,9 +25,15 @@ const SurveyEditorEnvironmentLayout = async (props) => {
   }
 
   return (
-    <div className="flex h-screen flex-col">
-      <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
-    </div>
+    <EnvironmentIdBaseLayout
+      environmentId={params.environmentId}
+      session={session}
+      user={user}
+      organization={organization}>
+      <div className="flex h-screen flex-col">
+        <div className="h-full overflow-y-auto bg-slate-50">{children}</div>
+      </div>
+    </EnvironmentIdBaseLayout>
   );
 };
 

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

@@ -0,0 +1,61 @@
+"use client";
+
+import type { Session } from "next-auth";
+import { usePostHog } from "posthog-js/react";
+import { useEffect } from "react";
+import { TOrganizationBilling } from "@formbricks/types/organizations";
+import { TUser } from "@formbricks/types/user";
+
+interface PosthogIdentifyProps {
+  session: Session;
+  user: TUser;
+  environmentId?: string;
+  organizationId?: string;
+  organizationName?: string;
+  organizationBilling?: TOrganizationBilling;
+  isPosthogEnabled: boolean;
+}
+
+export const PosthogIdentify = ({
+  session,
+  user,
+  environmentId,
+  organizationId,
+  organizationName,
+  organizationBilling,
+  isPosthogEnabled,
+}: PosthogIdentifyProps) => {
+  const posthog = usePostHog();
+
+  useEffect(() => {
+    if (isPosthogEnabled && session.user && posthog) {
+      posthog.identify(session.user.id, {
+        name: user.name,
+        email: user.email,
+      });
+      if (environmentId) {
+        posthog.group("environment", environmentId, { name: environmentId });
+      }
+      if (organizationId) {
+        posthog.group("organization", organizationId, {
+          name: organizationName,
+          plan: organizationBilling?.plan,
+          responseLimit: organizationBilling?.limits.monthly.responses,
+          miuLimit: organizationBilling?.limits.monthly.miu,
+        });
+      }
+    }
+  }, [
+    posthog,
+    session.user,
+    environmentId,
+    organizationId,
+    organizationName,
+    organizationBilling,
+    user.name,
+    user.email,
+    isPosthogEnabled,
+  ]);
+
+  return null;
+};

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

@@ -4,6 +4,7 @@ import { EnvironmentLayout } from "@/app/(app)/environments/[environmentId]/comp
 import { EnvironmentContextWrapper } from "@/app/(app)/environments/[environmentId]/context/environment-context";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { getEnvironmentLayoutData } from "@/modules/environments/lib/utils";
+import { EnvironmentIdBaseLayout } from "@/modules/ui/components/environmentId-base-layout";
 import EnvironmentStorageHandler from "./components/EnvironmentStorageHandler";
 
 const EnvLayout = async (props: {
@@ -23,7 +24,11 @@ const EnvLayout = async (props: {
   const layoutData = await getEnvironmentLayoutData(params.environmentId, session.user.id);
 
   return (
-    <>
+    <EnvironmentIdBaseLayout
+      environmentId={params.environmentId}
+      session={layoutData.session}
+      user={layoutData.user}
+      organization={layoutData.organization}>
       <EnvironmentStorageHandler environmentId={params.environmentId} />
       <EnvironmentContextWrapper
         environment={layoutData.environment}
@@ -31,7 +36,7 @@ const EnvLayout = async (props: {
         organization={layoutData.organization}>
         <EnvironmentLayout layoutData={layoutData}>{children}</EnvironmentLayout>
       </EnvironmentContextWrapper>
-    </>
+    </EnvironmentIdBaseLayout>
   );
 };
 

apps/web/app/(app)/environments/[environmentId]/lib/organization.test.ts

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { getOrganizationsByUserId } from "./organization";
 

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

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { ZString } from "@formbricks/types/common";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { validateInputs } from "@/lib/utils/validate";

apps/web/app/(app)/environments/[environmentId]/lib/project.test.ts

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { DatabaseError } from "@formbricks/types/errors";
 import { TMembership } from "@formbricks/types/memberships";
 import { getProjectsByUserId } from "./project";

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

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { ZString } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";
 import { TMembership, ZMembership } from "@formbricks/types/memberships";

apps/web/app/(app)/environments/[environmentId]/project/integrations/airtable/components/AirtableWrapper.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
 import { TSurvey } from "@formbricks/types/surveys/types";
@@ -15,6 +16,7 @@ interface AirtableWrapperProps {
   airtableArray: TIntegrationItem[];
   airtableIntegration?: TIntegrationAirtable;
   surveys: TSurvey[];
+  environment: TEnvironment;
   isEnabled: boolean;
   webAppUrl: string;
   locale: TUserLocale;
@@ -25,6 +27,7 @@ export const AirtableWrapper = ({
   airtableArray,
   airtableIntegration,
   surveys,
+  environment,
   isEnabled,
   webAppUrl,
   locale,
@@ -45,6 +48,7 @@ export const AirtableWrapper = ({
     <ManageIntegration
       airtableArray={airtableArray}
       environmentId={environmentId}
+      environment={environment}
       airtableIntegration={airtableIntegration}
       setIsConnected={setIsConnected}
       surveys={surveys}

apps/web/app/(app)/environments/[environmentId]/project/integrations/airtable/components/ManageIntegration.tsx

@@ -4,6 +4,7 @@ import { Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationItem } from "@formbricks/types/integration";
 import { TIntegrationAirtable } from "@formbricks/types/integration/airtable";
 import { TSurvey } from "@formbricks/types/surveys/types";
@@ -14,11 +15,12 @@ import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
-import { EmptyState } from "@/modules/ui/components/empty-state";
+import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
 import { IntegrationModalInputs } from "../lib/types";
 
 interface ManageIntegrationProps {
   airtableIntegration: TIntegrationAirtable;
+  environment: TEnvironment;
   environmentId: string;
   setIsConnected: (data: boolean) => void;
   surveys: TSurvey[];
@@ -27,7 +29,7 @@ interface ManageIntegrationProps {
 }
 
 export const ManageIntegration = (props: ManageIntegrationProps) => {
-  const { airtableIntegration, environmentId, setIsConnected, surveys, airtableArray } = props;
+  const { airtableIntegration, environment, environmentId, setIsConnected, surveys, airtableArray } = props;
   const { t } = useTranslation();
 
   const tableHeaders = [
@@ -130,7 +132,12 @@ export const ManageIntegration = (props: ManageIntegrationProps) => {
         </div>
       ) : (
         <div className="mt-4 w-full">
-          <EmptyState text={t("environments.integrations.airtable.no_integrations_yet")} />
+          <EmptySpaceFiller
+            type="table"
+            environment={environment}
+            noWidgetRequired={true}
+            emptyMessage={t("environments.integrations.airtable.no_integrations_yet")}
+          />
         </div>
       )}
 

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

@@ -51,6 +51,7 @@ const Page = async (props) => {
           airtableArray={airtableArray}
           environmentId={environment.id}
           surveys={surveys}
+          environment={environment}
           webAppUrl={WEBAPP_URL}
           locale={locale}
         />

apps/web/app/(app)/environments/[environmentId]/project/integrations/google-sheets/components/GoogleSheetWrapper.tsx

@@ -60,6 +60,7 @@ export const GoogleSheetWrapper = ({
             selectedIntegration={selectedIntegration}
           />
           <ManageIntegration
+            environment={environment}
             googleSheetIntegration={googleSheetIntegration}
             setOpenAddIntegrationModal={setIsModalOpen}
             setIsConnected={setIsConnected}

apps/web/app/(app)/environments/[environmentId]/project/integrations/google-sheets/components/ManageIntegration.tsx

@@ -4,6 +4,7 @@ import { Trash2Icon } from "lucide-react";
 import { useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { TEnvironment } from "@formbricks/types/environment";
 import {
   TIntegrationGoogleSheets,
   TIntegrationGoogleSheetsConfigData,
@@ -14,9 +15,10 @@ import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
-import { EmptyState } from "@/modules/ui/components/empty-state";
+import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
 
 interface ManageIntegrationProps {
+  environment: TEnvironment;
   googleSheetIntegration: TIntegrationGoogleSheets;
   setOpenAddIntegrationModal: (v: boolean) => void;
   setIsConnected: (v: boolean) => void;
@@ -25,6 +27,7 @@ interface ManageIntegrationProps {
 }
 
 export const ManageIntegration = ({
+  environment,
   googleSheetIntegration,
   setOpenAddIntegrationModal,
   setIsConnected,
@@ -87,7 +90,12 @@ export const ManageIntegration = ({
       </div>
       {!integrationArray || integrationArray.length === 0 ? (
         <div className="mt-4 w-full">
-          <EmptyState text={t("environments.integrations.google_sheets.no_integrations_yet")} />
+          <EmptySpaceFiller
+            type="table"
+            environment={environment}
+            noWidgetRequired={true}
+            emptyMessage={t("environments.integrations.google_sheets.no_integrations_yet")}
+          />
         </div>
       ) : (
         <div className="mt-4 flex w-full flex-col items-center justify-center">

apps/web/app/(app)/environments/[environmentId]/project/integrations/lib/surveys.test.ts

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { logger } from "@formbricks/logger";
 import { DatabaseError } from "@formbricks/types/errors";
 import { TSurvey } from "@formbricks/types/surveys/types";

apps/web/app/(app)/environments/[environmentId]/project/integrations/lib/surveys.ts

@@ -1,7 +1,7 @@
 import "server-only";
-import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { logger } from "@formbricks/logger";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";

apps/web/app/(app)/environments/[environmentId]/project/integrations/lib/webhook.test.ts

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { DatabaseError } from "@formbricks/types/errors";
 import { validateInputs } from "@/lib/utils/validate";
 import { getWebhookCountBySource } from "./webhook";

apps/web/app/(app)/environments/[environmentId]/project/integrations/lib/webhook.ts

@@ -1,6 +1,6 @@
-import { Prisma, Webhook } from "@prisma/client";
 import { z } from "zod";
 import { prisma } from "@formbricks/database";
+import { Prisma, Webhook } from "@formbricks/database/generated/client";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";
 import { validateInputs } from "@/lib/utils/validate";

apps/web/app/(app)/environments/[environmentId]/project/integrations/notion/components/AddIntegrationModal.tsx

@@ -13,7 +13,6 @@ import {
   TIntegrationNotionDatabase,
 } from "@formbricks/types/integration/notion";
 import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { getTextContent } from "@formbricks/types/surveys/validation";
 import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
 import {
   ERRORS,
@@ -123,7 +122,7 @@ export const AddIntegrationModal = ({
     const questions = selectedSurvey
       ? replaceHeadlineRecall(selectedSurvey, "default")?.questions.map((q) => ({
           id: q.id,
-          name: getTextContent(getLocalizedValue(q.headline, "default")),
+          name: getLocalizedValue(q.headline, "default"),
           type: q.type,
         }))
       : [];

apps/web/app/(app)/environments/[environmentId]/project/integrations/notion/components/ManageIntegration.tsx

@@ -4,6 +4,7 @@ import { RefreshCcwIcon, Trash2Icon } from "lucide-react";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationNotion, TIntegrationNotionConfigData } from "@formbricks/types/integration/notion";
 import { TUserLocale } from "@formbricks/types/user";
 import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
@@ -11,10 +12,11 @@ import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
-import { EmptyState } from "@/modules/ui/components/empty-state";
+import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/modules/ui/components/tooltip";
 
 interface ManageIntegrationProps {
+  environment: TEnvironment;
   notionIntegration: TIntegrationNotion;
   setOpenAddIntegrationModal: React.Dispatch<React.SetStateAction<boolean>>;
   setIsConnected: React.Dispatch<React.SetStateAction<boolean>>;
@@ -26,6 +28,7 @@ interface ManageIntegrationProps {
 }
 
 export const ManageIntegration = ({
+  environment,
   notionIntegration,
   setOpenAddIntegrationModal,
   setIsConnected,
@@ -98,7 +101,12 @@ export const ManageIntegration = ({
       </div>
       {!integrationArray || integrationArray.length === 0 ? (
         <div className="mt-4 w-full">
-          <EmptyState text={t("environments.integrations.notion.no_databases_found")} />
+          <EmptySpaceFiller
+            type="table"
+            environment={environment}
+            noWidgetRequired={true}
+            emptyMessage={t("environments.integrations.notion.no_databases_found")}
+          />
         </div>
       ) : (
         <div className="mt-4 flex w-full flex-col items-center justify-center">

apps/web/app/(app)/environments/[environmentId]/project/integrations/notion/components/NotionWrapper.tsx

@@ -64,6 +64,7 @@ export const NotionWrapper = ({
             selectedIntegration={selectedIntegration}
           />
           <ManageIntegration
+            environment={environment}
             notionIntegration={notionIntegration}
             setOpenAddIntegrationModal={setIsModalOpen}
             setIsConnected={setIsConnected}

apps/web/app/(app)/environments/[environmentId]/project/integrations/slack/components/ManageIntegration.tsx

@@ -4,6 +4,7 @@ import { Trash2Icon } from "lucide-react";
 import React, { useState } from "react";
 import toast from "react-hot-toast";
 import { Trans, useTranslation } from "react-i18next";
+import { TEnvironment } from "@formbricks/types/environment";
 import { TIntegrationSlack, TIntegrationSlackConfigData } from "@formbricks/types/integration/slack";
 import { TUserLocale } from "@formbricks/types/user";
 import { deleteIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
@@ -11,9 +12,10 @@ import { timeSince } from "@/lib/time";
 import { getFormattedErrorMessage } from "@/lib/utils/helper";
 import { Button } from "@/modules/ui/components/button";
 import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
-import { EmptyState } from "@/modules/ui/components/empty-state";
+import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
 
 interface ManageIntegrationProps {
+  environment: TEnvironment;
   slackIntegration: TIntegrationSlack;
   setOpenAddIntegrationModal: React.Dispatch<React.SetStateAction<boolean>>;
   setIsConnected: React.Dispatch<React.SetStateAction<boolean>>;
@@ -27,6 +29,7 @@ interface ManageIntegrationProps {
 }
 
 export const ManageIntegration = ({
+  environment,
   slackIntegration,
   setOpenAddIntegrationModal,
   setIsConnected,
@@ -103,7 +106,12 @@ export const ManageIntegration = ({
       </div>
       {!integrationArray || integrationArray.length === 0 ? (
         <div className="mt-4 w-full">
-          <EmptyState text={t("environments.integrations.slack.connect_your_first_slack_channel")} />
+          <EmptySpaceFiller
+            type="table"
+            environment={environment}
+            noWidgetRequired={true}
+            emptyMessage={t("environments.integrations.slack.connect_your_first_slack_channel")}
+          />
         </div>
       ) : (
         <div className="mt-4 flex w-full flex-col items-center justify-center">

apps/web/app/(app)/environments/[environmentId]/project/integrations/slack/components/SlackWrapper.tsx

@@ -78,6 +78,7 @@ export const SlackWrapper = ({
         selectedIntegration={selectedIntegration}
       />
       <ManageIntegration
+        environment={environment}
         slackIntegration={slackIntegration}
         setOpenAddIntegrationModal={setIsModalOpen}
         setIsConnected={setIsConnected}

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

@@ -215,7 +215,7 @@ export const EditProfileDetailsForm = ({
                       </Button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
-                      className="min-w-[var(--radix-dropdown-menu-trigger-width)] bg-white text-slate-700"
+                      className="min-w-[var(--radix-dropdown-menu-trigger-width)] bg-slate-50 text-slate-700"
                       align="start">
                       <DropdownMenuRadioGroup value={field.value} onValueChange={field.onChange}>
                         {appLanguages.map((lang) => (

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

@@ -1,6 +1,6 @@
-import { User } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { User } from "@formbricks/database/generated/client";
 import { InvalidInputError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { verifyPassword } from "@/modules/auth/lib/utils";
 

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

@@ -1,6 +1,5 @@
 import { Metadata } from "next";
 import { getServerSession } from "next-auth";
-import { ResponseFilterProvider } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
 import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
@@ -26,7 +25,7 @@ export const generateMetadata = async (props: Props): Promise<Metadata> => {
 };
 
 const SurveyLayout = async ({ children }) => {
-  return <ResponseFilterProvider>{children}</ResponseFilterProvider>;
+  return <>{children}</>;
 };
 
 export default SurveyLayout;

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

@@ -8,8 +8,8 @@ import { TResponseWithQuotas } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TTag } from "@formbricks/types/tags";
 import { TUser, TUserLocale } from "@formbricks/types/user";
+import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { getResponsesAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
-import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
 import { ResponseDataView } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseDataView";
 import { CustomFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
 import { getFormattedFilters } from "@/app/lib/surveys/surveys";
@@ -26,7 +26,6 @@ interface ResponsePageProps {
   isReadOnly: boolean;
   isQuotasAllowed: boolean;
   quotas: TSurveyQuota[];
-  initialResponses?: TResponseWithQuotas[];
 }
 
 export const ResponsePage = ({
@@ -40,12 +39,11 @@ export const ResponsePage = ({
   isReadOnly,
   isQuotasAllowed,
   quotas,
-  initialResponses = [],
 }: ResponsePageProps) => {
-  const [responses, setResponses] = useState<TResponseWithQuotas[]>(initialResponses);
-  const [page, setPage] = useState<number | null>(null);
-  const [hasMore, setHasMore] = useState<boolean>(initialResponses.length >= responsesPerPage);
-  const [isFetchingFirstPage, setIsFetchingFirstPage] = useState<boolean>(false);
+  const [responses, setResponses] = useState<TResponseWithQuotas[]>([]);
+  const [page, setPage] = useState<number>(1);
+  const [hasMore, setHasMore] = useState<boolean>(true);
+  const [isFetchingFirstPage, setFetchingFirstPage] = useState<boolean>(true);
   const { selectedFilter, dateRange, resetState } = useResponseFilter();
 
   const filters = useMemo(
@@ -58,7 +56,6 @@ export const ResponsePage = ({
   const searchParams = useSearchParams();
 
   const fetchNextPage = useCallback(async () => {
-    if (page === null) return;
     const newPage = page + 1;
 
     let newResponses: TResponseWithQuotas[] = [];
@@ -96,22 +93,10 @@ export const ResponsePage = ({
     }
   }, [searchParams, resetState]);
 
-  // Only fetch if filters are applied (not on initial mount with no filters)
-  const hasFilters =
-    selectedFilter?.responseStatus !== "all" ||
-    (selectedFilter?.filter && selectedFilter.filter.length > 0) ||
-    (dateRange.from && dateRange.to);
-
   useEffect(() => {
-    const fetchFilteredResponses = async () => {
+    const fetchInitialResponses = async () => {
       try {
-        // skip call for initial mount
-        if (page === null && !hasFilters) {
-          setPage(1);
-          return;
-        }
-        setPage(1);
-        setIsFetchingFirstPage(true);
+        setFetchingFirstPage(true);
         let responses: TResponseWithQuotas[] = [];
 
         const getResponsesActionResponse = await getResponsesAction({
@@ -125,16 +110,19 @@ export const ResponsePage = ({
 
         if (responses.length < responsesPerPage) {
           setHasMore(false);
-        } else {
-          setHasMore(true);
         }
         setResponses(responses);
       } finally {
-        setIsFetchingFirstPage(false);
+        setFetchingFirstPage(false);
       }
     };
-    fetchFilteredResponses();
-  }, [filters, responsesPerPage, selectedFilter, dateRange, surveyId]);
+    fetchInitialResponses();
+  }, [surveyId, filters, responsesPerPage]);
+
+  useEffect(() => {
+    setPage(1);
+    setHasMore(true);
+  }, [filters]);
 
   return (
     <>

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

@@ -2,8 +2,9 @@ import { SurveyAnalysisNavigation } from "@/app/(app)/environments/[environmentI
 import { ResponsePage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponsePage";
 import { SurveyAnalysisCTA } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA";
 import { IS_FORMBRICKS_CLOUD, IS_STORAGE_CONFIGURED, RESPONSES_PER_PAGE } from "@/lib/constants";
+import { getDisplayCountBySurveyId } from "@/lib/display/service";
 import { getPublicDomain } from "@/lib/getPublicUrl";
-import { getResponseCountBySurveyId, getResponses } from "@/lib/response/service";
+import { getResponseCountBySurveyId } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
 import { getTagsByEnvironmentId } from "@/lib/tag/service";
 import { getUser } from "@/lib/user/service";
@@ -13,6 +14,7 @@ import { getSegments } from "@/modules/ee/contacts/segments/lib/segments";
 import { getIsContactsEnabled, getIsQuotasEnabled } from "@/modules/ee/license-check/lib/utils";
 import { getQuotas } from "@/modules/ee/quotas/lib/quotas";
 import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+import { getOrganizationIdFromEnvironmentId } from "@/modules/survey/lib/organization";
 import { getOrganizationBilling } from "@/modules/survey/lib/survey";
 import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
 import { PageHeader } from "@/modules/ui/components/page-header";
@@ -21,43 +23,44 @@ const Page = async (props) => {
   const params = await props.params;
   const t = await getTranslate();
 
-  const { session, environment, organization, isReadOnly } = await getEnvironmentAuth(params.environmentId);
+  const { session, environment, isReadOnly } = await getEnvironmentAuth(params.environmentId);
 
-  const [survey, user, tags, isContactsEnabled, responseCount, locale] = await Promise.all([
-    getSurvey(params.surveyId),
-    getUser(session.user.id),
-    getTagsByEnvironmentId(params.environmentId),
-    getIsContactsEnabled(),
-    getResponseCountBySurveyId(params.surveyId),
-    findMatchingLocale(),
-  ]);
+  const survey = await getSurvey(params.surveyId);
 
   if (!survey) {
     throw new Error(t("common.survey_not_found"));
   }
 
+  const user = await getUser(session.user.id);
+
   if (!user) {
     throw new Error(t("common.user_not_found"));
   }
 
-  if (!organization) {
-    throw new Error(t("common.organization_not_found"));
-  }
+  const tags = await getTagsByEnvironmentId(params.environmentId);
 
+  const isContactsEnabled = await getIsContactsEnabled();
   const segments = isContactsEnabled ? await getSegments(params.environmentId) : [];
 
+  // Get response count for the CTA component
+  const responseCount = await getResponseCountBySurveyId(params.surveyId);
+  const displayCount = await getDisplayCountBySurveyId(params.surveyId);
+
+  const locale = await findMatchingLocale();
   const publicDomain = getPublicDomain();
 
-  const organizationBilling = await getOrganizationBilling(organization.id);
+  const organizationId = await getOrganizationIdFromEnvironmentId(environment.id);
+  if (!organizationId) {
+    throw new Error(t("common.organization_not_found"));
+  }
+  const organizationBilling = await getOrganizationBilling(organizationId);
   if (!organizationBilling) {
     throw new Error(t("common.organization_not_found"));
   }
 
   const isQuotasAllowed = await getIsQuotasEnabled(organizationBilling.plan);
-  const quotas = isQuotasAllowed ? await getQuotas(survey.id) : [];
 
-  // Fetch initial responses on the server to prevent duplicate client-side fetch
-  const initialResponses = await getResponses(params.surveyId, RESPONSES_PER_PAGE, 0);
+  const quotas = isQuotasAllowed ? await getQuotas(survey.id) : [];
 
   return (
     <PageContentWrapper>
@@ -71,6 +74,7 @@ const Page = async (props) => {
             user={user}
             publicDomain={publicDomain}
             responseCount={responseCount}
+            displayCount={displayCount}
             segments={segments}
             isContactsEnabled={isContactsEnabled}
             isFormbricksCloud={IS_FORMBRICKS_CLOUD}
@@ -90,7 +94,6 @@ const Page = async (props) => {
         isReadOnly={isReadOnly}
         isQuotasAllowed={isQuotasAllowed}
         quotas={quotas}
-        initialResponses={initialResponses}
       />
     </PageContentWrapper>
   );

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

@@ -8,7 +8,6 @@ import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
 import { ArrayResponse } from "@/modules/ui/components/array-response";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
-import { EmptyState } from "@/modules/ui/components/empty-state";
 import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
 interface AddressSummaryProps {
@@ -30,48 +29,42 @@ export const AddressSummary = ({ questionSummary, environmentId, survey, locale
           <div className="px-4 md:px-6">{t("common.time")}</div>
         </div>
         <div className="max-h-[62vh] w-full overflow-y-auto">
-          {questionSummary.samples.length === 0 ? (
-            <div className="p-8">
-              <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
-            </div>
-          ) : (
-            questionSummary.samples.map((response) => {
-              return (
-                <div
-                  key={response.id}
-                  className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
-                  <div className="pl-4 md:pl-6">
-                    {response.contact ? (
-                      <Link
-                        className="ph-no-capture group flex items-center"
-                        href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId={response.contact.id} />
-                        </div>
-                        <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                          {getContactIdentifier(response.contact, response.contactAttributes)}
-                        </p>
-                      </Link>
-                    ) : (
-                      <div className="group flex items-center">
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId="anonymous" />
-                        </div>
-                        <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+          {questionSummary.samples.map((response) => {
+            return (
+              <div
+                key={response.id}
+                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
+                <div className="pl-4 md:pl-6">
+                  {response.contact ? (
+                    <Link
+                      className="ph-no-capture group flex items-center"
+                      href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
+                      <div className="hidden md:flex">
+                        <PersonAvatar personId={response.contact.id} />
                       </div>
-                    )}
-                  </div>
-                  <div className="ph-no-capture col-span-2 pl-6 font-semibold">
-                    <ArrayResponse value={response.value} />
-                  </div>
-
-                  <div className="px-4 text-slate-500 md:px-6">
-                    {timeSince(new Date(response.updatedAt).toISOString(), locale)}
-                  </div>
+                      <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                        {getContactIdentifier(response.contact, response.contactAttributes)}
+                      </p>
+                    </Link>
+                  ) : (
+                    <div className="group flex items-center">
+                      <div className="hidden md:flex">
+                        <PersonAvatar personId="anonymous" />
+                      </div>
+                      <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+                    </div>
+                  )}
                 </div>
-              );
-            })
-          )}
+                <div className="ph-no-capture col-span-2 pl-6 font-semibold">
+                  <ArrayResponse value={response.value} />
+                </div>
+
+                <div className="px-4 text-slate-500 md:px-6">
+                  {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+                </div>
+              </div>
+            );
+          })}
         </div>
       </div>
     </div>

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

@@ -1,32 +0,0 @@
-"use client";
-
-import { CSSProperties, ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/modules/ui/components/tooltip";
-
-interface ClickableBarSegmentProps {
-  children: ReactNode;
-  onClick: () => void;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export const ClickableBarSegment = ({
-  children,
-  onClick,
-  className = "",
-  style,
-}: ClickableBarSegmentProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <button className={className} style={style} onClick={onClick}>
-          {children}
-        </button>
-      </TooltipTrigger>
-      <TooltipContent>{t("common.click_to_filter")}</TooltipContent>
-    </Tooltip>
-  );
-};

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

@@ -8,7 +8,6 @@ import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
 import { ArrayResponse } from "@/modules/ui/components/array-response";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
-import { EmptyState } from "@/modules/ui/components/empty-state";
 import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
 interface ContactInfoSummaryProps {
@@ -35,48 +34,42 @@ export const ContactInfoSummary = ({
           <div className="px-4 md:px-6">{t("common.time")}</div>
         </div>
         <div className="max-h-[62vh] w-full overflow-y-auto">
-          {questionSummary.samples.length === 0 ? (
-            <div className="p-8">
-              <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
-            </div>
-          ) : (
-            questionSummary.samples.map((response) => {
-              return (
-                <div
-                  key={response.id}
-                  className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
-                  <div className="pl-4 md:pl-6">
-                    {response.contact ? (
-                      <Link
-                        className="ph-no-capture group flex items-center"
-                        href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId={response.contact.id} />
-                        </div>
-                        <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                          {getContactIdentifier(response.contact, response.contactAttributes)}
-                        </p>
-                      </Link>
-                    ) : (
-                      <div className="group flex items-center">
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId="anonymous" />
-                        </div>
-                        <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+          {questionSummary.samples.map((response) => {
+            return (
+              <div
+                key={response.id}
+                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
+                <div className="pl-4 md:pl-6">
+                  {response.contact ? (
+                    <Link
+                      className="ph-no-capture group flex items-center"
+                      href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
+                      <div className="hidden md:flex">
+                        <PersonAvatar personId={response.contact.id} />
                       </div>
-                    )}
-                  </div>
-                  <div className="ph-no-capture col-span-2 pl-6 font-semibold">
-                    <ArrayResponse value={response.value} />
-                  </div>
-
-                  <div className="px-4 text-slate-500 md:px-6">
-                    {timeSince(new Date(response.updatedAt).toISOString(), locale)}
-                  </div>
+                      <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                        {getContactIdentifier(response.contact, response.contactAttributes)}
+                      </p>
+                    </Link>
+                  ) : (
+                    <div className="group flex items-center">
+                      <div className="hidden md:flex">
+                        <PersonAvatar personId="anonymous" />
+                      </div>
+                      <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+                    </div>
+                  )}
                 </div>
-              );
-            })
-          )}
+                <div className="ph-no-capture col-span-2 pl-6 font-semibold">
+                  <ArrayResponse value={response.value} />
+                </div>
+
+                <div className="px-4 text-slate-500 md:px-6">
+                  {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+                </div>
+              </div>
+            );
+          })}
         </div>
       </div>
     </div>

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

@@ -10,7 +10,6 @@ import { getContactIdentifier } from "@/lib/utils/contact";
 import { formatDateWithOrdinal } from "@/lib/utils/datetime";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
-import { EmptyState } from "@/modules/ui/components/empty-state";
 import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
 interface DateQuestionSummary {
@@ -56,47 +55,41 @@ export const DateQuestionSummary = ({
           <div className="px-4 md:px-6">{t("common.time")}</div>
         </div>
         <div className="max-h-[62vh] w-full overflow-y-auto">
-          {questionSummary.samples.length === 0 ? (
-            <div className="p-8">
-              <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
-            </div>
-          ) : (
-            questionSummary.samples.slice(0, visibleResponses).map((response) => (
-              <div
-                key={response.id}
-                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
-                <div className="pl-4 md:pl-6">
-                  {response.contact ? (
-                    <Link
-                      className="ph-no-capture group flex items-center"
-                      href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                      <div className="hidden md:flex">
-                        <PersonAvatar personId={response.contact.id} />
-                      </div>
-                      <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                        {getContactIdentifier(response.contact, response.contactAttributes)}
-                      </p>
-                    </Link>
-                  ) : (
-                    <div className="group flex items-center">
-                      <div className="hidden md:flex">
-                        <PersonAvatar personId="anonymous" />
-                      </div>
-                      <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+          {questionSummary.samples.slice(0, visibleResponses).map((response) => (
+            <div
+              key={response.id}
+              className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
+              <div className="pl-4 md:pl-6">
+                {response.contact ? (
+                  <Link
+                    className="ph-no-capture group flex items-center"
+                    href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
+                    <div className="hidden md:flex">
+                      <PersonAvatar personId={response.contact.id} />
                     </div>
-                  )}
-                </div>
-                <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
-                  {renderResponseValue(response.value)}
-                </div>
-                <div className="px-4 text-slate-500 md:px-6">
-                  {timeSince(new Date(response.updatedAt).toISOString(), locale)}
-                </div>
+                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                      {getContactIdentifier(response.contact, response.contactAttributes)}
+                    </p>
+                  </Link>
+                ) : (
+                  <div className="group flex items-center">
+                    <div className="hidden md:flex">
+                      <PersonAvatar personId="anonymous" />
+                    </div>
+                    <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+                  </div>
+                )}
               </div>
-            ))
-          )}
+              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
+                {renderResponseValue(response.value)}
+              </div>
+              <div className="px-4 text-slate-500 md:px-6">
+                {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+              </div>
+            </div>
+          ))}
         </div>
-        {questionSummary.samples.length > 0 && visibleResponses < questionSummary.samples.length && (
+        {visibleResponses < questionSummary.samples.length && (
           <div className="flex justify-center py-4">
             <Button onClick={handleLoadMore} variant="secondary" size="sm">
               {t("common.load_more")}

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

@@ -11,7 +11,6 @@ import { getContactIdentifier } from "@/lib/utils/contact";
 import { getOriginalFileNameFromUrl } from "@/modules/storage/utils";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
-import { EmptyState } from "@/modules/ui/components/empty-state";
 import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
 interface FileUploadSummaryProps {
@@ -46,77 +45,71 @@ export const FileUploadSummary = ({
           <div className="px-4 md:px-6">{t("common.time")}</div>
         </div>
         <div className="max-h-[62vh] w-full overflow-y-auto">
-          {questionSummary.files.length === 0 ? (
-            <div className="p-8">
-              <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
-            </div>
-          ) : (
-            questionSummary.files.slice(0, visibleResponses).map((response) => (
-              <div
-                key={response.id}
-                className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
-                <div className="pl-4 md:pl-6">
-                  {response.contact ? (
-                    <Link
-                      className="ph-no-capture group flex items-center"
-                      href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                      <div className="hidden md:flex">
-                        <PersonAvatar personId={response.contact.id} />
-                      </div>
-                      <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                        {getContactIdentifier(response.contact, response.contactAttributes)}
-                      </p>
-                    </Link>
-                  ) : (
-                    <div className="group flex items-center">
-                      <div className="hidden md:flex">
-                        <PersonAvatar personId="anonymous" />
-                      </div>
-                      <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+          {questionSummary.files.slice(0, visibleResponses).map((response) => (
+            <div
+              key={response.id}
+              className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 last:border-transparent md:text-base">
+              <div className="pl-4 md:pl-6">
+                {response.contact ? (
+                  <Link
+                    className="ph-no-capture group flex items-center"
+                    href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
+                    <div className="hidden md:flex">
+                      <PersonAvatar personId={response.contact.id} />
                     </div>
-                  )}
-                </div>
-
-                <div className="col-span-2 grid">
-                  {Array.isArray(response.value) &&
-                    (response.value.length > 0 ? (
-                      response.value.map((fileUrl) => {
-                        const fileName = getOriginalFileNameFromUrl(fileUrl);
-
-                        return (
-                          <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
-                            <a href={fileUrl} key={fileUrl} target="_blank" rel="noopener noreferrer">
-                              <div className="absolute right-0 top-0 m-2">
-                                <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 hover:bg-white">
-                                  <DownloadIcon className="h-6 text-slate-500" />
-                                </div>
-                              </div>
-                            </a>
-
-                            <div className="flex flex-col items-center justify-center p-2">
-                              <FileIcon className="h-6 text-slate-500" />
-                              <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">{fileName}</p>
-                            </div>
-                          </div>
-                        );
-                      })
-                    ) : (
-                      <div className="flex w-full flex-col items-center justify-center p-2">
-                        <p className="mt-2 text-sm font-semibold text-slate-500 dark:text-slate-400">
-                          {t("common.skipped")}
-                        </p>
-                      </div>
-                    ))}
-                </div>
-
-                <div className="px-4 text-slate-500 md:px-6">
-                  {timeSince(new Date(response.updatedAt).toISOString(), locale)}
-                </div>
+                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                      {getContactIdentifier(response.contact, response.contactAttributes)}
+                    </p>
+                  </Link>
+                ) : (
+                  <div className="group flex items-center">
+                    <div className="hidden md:flex">
+                      <PersonAvatar personId="anonymous" />
+                    </div>
+                    <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+                  </div>
+                )}
               </div>
-            ))
-          )}
+
+              <div className="col-span-2 grid">
+                {Array.isArray(response.value) &&
+                  (response.value.length > 0 ? (
+                    response.value.map((fileUrl) => {
+                      const fileName = getOriginalFileNameFromUrl(fileUrl);
+
+                      return (
+                        <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
+                          <a href={fileUrl} key={fileUrl} target="_blank" rel="noopener noreferrer">
+                            <div className="absolute right-0 top-0 m-2">
+                              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-50 hover:bg-white">
+                                <DownloadIcon className="h-6 text-slate-500" />
+                              </div>
+                            </div>
+                          </a>
+
+                          <div className="flex flex-col items-center justify-center p-2">
+                            <FileIcon className="h-6 text-slate-500" />
+                            <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">{fileName}</p>
+                          </div>
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <div className="flex w-full flex-col items-center justify-center p-2">
+                      <p className="mt-2 text-sm font-semibold text-slate-500 dark:text-slate-400">
+                        {t("common.skipped")}
+                      </p>
+                    </div>
+                  ))}
+              </div>
+
+              <div className="px-4 text-slate-500 md:px-6">
+                {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+              </div>
+            </div>
+          ))}
         </div>
-        {questionSummary.files.length > 0 && visibleResponses < questionSummary.files.length && (
+        {visibleResponses < questionSummary.files.length && (
           <div className="flex justify-center py-4">
             <Button onClick={handleLoadMore} variant="secondary" size="sm">
               {t("common.load_more")}

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

@@ -10,7 +10,6 @@ import { timeSince } from "@/lib/time";
 import { getContactIdentifier } from "@/lib/utils/contact";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
-import { EmptyState } from "@/modules/ui/components/empty-state";
 
 interface HiddenFieldsSummaryProps {
   environment: TEnvironment;
@@ -52,46 +51,40 @@ export const HiddenFieldsSummary = ({ environment, questionSummary, locale }: Hi
           <div className="col-span-2 pl-4 md:pl-6">{t("common.response")}</div>
           <div className="px-4 md:px-6">{t("common.time")}</div>
         </div>
-        {questionSummary.samples.length === 0 ? (
-          <div className="p-8">
-            <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
-          </div>
-        ) : (
-          questionSummary.samples.slice(0, visibleResponses).map((response, idx) => (
-            <div
-              key={`${response.value}-${idx}`}
-              className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
-              <div className="pl-4 md:pl-6">
-                {response.contact ? (
-                  <Link
-                    className="ph-no-capture group flex items-center"
-                    href={`/environments/${environment.id}/contacts/${response.contact.id}`}>
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId={response.contact.id} />
-                    </div>
-                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                      {getContactIdentifier(response.contact, response.contactAttributes)}
-                    </p>
-                  </Link>
-                ) : (
-                  <div className="group flex items-center">
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId="anonymous" />
-                    </div>
-                    <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+        {questionSummary.samples.slice(0, visibleResponses).map((response, idx) => (
+          <div
+            key={`${response.value}-${idx}`}
+            className="grid grid-cols-4 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
+            <div className="pl-4 md:pl-6">
+              {response.contact ? (
+                <Link
+                  className="ph-no-capture group flex items-center"
+                  href={`/environments/${environment.id}/contacts/${response.contact.id}`}>
+                  <div className="hidden md:flex">
+                    <PersonAvatar personId={response.contact.id} />
                   </div>
-                )}
-              </div>
-              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
-                {response.value}
-              </div>
-              <div className="px-4 text-slate-500 md:px-6">
-                {timeSince(new Date(response.updatedAt).toISOString(), locale)}
-              </div>
+                  <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                    {getContactIdentifier(response.contact, response.contactAttributes)}
+                  </p>
+                </Link>
+              ) : (
+                <div className="group flex items-center">
+                  <div className="hidden md:flex">
+                    <PersonAvatar personId="anonymous" />
+                  </div>
+                  <p className="break-all text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+                </div>
+              )}
             </div>
-          ))
-        )}
-        {questionSummary.samples.length > 0 && visibleResponses < questionSummary.samples.length && (
+            <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
+              {response.value}
+            </div>
+            <div className="px-4 text-slate-500 md:px-6">
+              {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+            </div>
+          </div>
+        ))}
+        {visibleResponses < questionSummary.samples.length && (
           <div className="flex justify-center py-4">
             <Button onClick={handleLoadMore} variant="secondary" size="sm">
               {t("common.load_more")}

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

@@ -85,98 +85,96 @@ export const MultipleChoiceSummary = ({
           ) : undefined
         }
       />
-      <div className="px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
-        <div className="space-y-5">
-          {results.map((result) => {
-            const choiceId = getChoiceIdByValue(result.value, questionSummary.question);
-            return (
-              <Fragment key={result.value}>
-                <button
-                  type="button"
-                  className="group w-full cursor-pointer"
-                  onClick={() =>
-                    setFilter(
-                      questionSummary.question.id,
-                      questionSummary.question.headline,
-                      questionSummary.question.type,
-                      questionSummary.type === "multipleChoiceSingle" || otherValue === result.value
-                        ? t("environments.surveys.summary.includes_either")
-                        : t("environments.surveys.summary.includes_all"),
-                      [result.value]
-                    )
-                  }>
-                  <div className="text flex flex-col justify-between px-2 pb-2 sm:flex-row">
-                    <div className="mr-8 flex w-full justify-between space-x-2 sm:justify-normal">
-                      <p className="font-semibold text-slate-700 underline-offset-4 group-hover:underline">
-                        {result.value}
-                      </p>
-                      {choiceId && <IdBadge id={choiceId} />}
-                    </div>
-                    <div className="flex w-full space-x-2">
-                      <p className="flex w-full pt-1 text-slate-600 sm:items-end sm:justify-end sm:pt-0">
-                        {result.count} {result.count === 1 ? t("common.selection") : t("common.selections")}
-                      </p>
-                      <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                        {convertFloatToNDecimal(result.percentage, 2)}%
-                      </p>
-                    </div>
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+        {results.map((result) => {
+          const choiceId = getChoiceIdByValue(result.value, questionSummary.question);
+          return (
+            <Fragment key={result.value}>
+              <button
+                type="button"
+                className="group w-full cursor-pointer"
+                onClick={() =>
+                  setFilter(
+                    questionSummary.question.id,
+                    questionSummary.question.headline,
+                    questionSummary.question.type,
+                    questionSummary.type === "multipleChoiceSingle" || otherValue === result.value
+                      ? t("environments.surveys.summary.includes_either")
+                      : t("environments.surveys.summary.includes_all"),
+                    [result.value]
+                  )
+                }>
+                <div className="text flex flex-col justify-between px-2 pb-2 sm:flex-row">
+                  <div className="mr-8 flex w-full justify-between space-x-2 sm:justify-normal">
+                    <p className="font-semibold text-slate-700 underline-offset-4 group-hover:underline">
+                      {result.value}
+                    </p>
+                    {choiceId && <IdBadge id={choiceId} />}
                   </div>
-                  <div className="group-hover:opacity-80">
-                    <ProgressBar barColor="bg-brand-dark" progress={result.percentage / 100} />
+                  <div className="flex w-full space-x-2">
+                    <p className="flex w-full pt-1 text-slate-600 sm:items-end sm:justify-end sm:pt-0">
+                      {result.count} {result.count === 1 ? t("common.selection") : t("common.selections")}
+                    </p>
+                    <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
+                      {convertFloatToNDecimal(result.percentage, 2)}%
+                    </p>
                   </div>
-                </button>
-                {result.others && result.others.length > 0 && (
-                  <div className="mt-4 rounded-lg border border-slate-200">
-                    <div className="grid h-12 grid-cols-2 content-center rounded-t-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
-                      <div className="col-span-1 pl-6">
-                        {t("environments.surveys.summary.other_values_found")}
-                      </div>
-                      <div className="col-span-1 pl-6">{surveyType === "app" && t("common.user")}</div>
+                </div>
+                <div className="group-hover:opacity-80">
+                  <ProgressBar barColor="bg-brand-dark" progress={result.percentage / 100} />
+                </div>
+              </button>
+              {result.others && result.others.length > 0 && (
+                <div className="mt-4 rounded-lg border border-slate-200">
+                  <div className="grid h-12 grid-cols-2 content-center rounded-t-lg bg-slate-100 text-left text-sm font-semibold text-slate-900">
+                    <div className="col-span-1 pl-6">
+                      {t("environments.surveys.summary.other_values_found")}
                     </div>
-                    {result.others
-                      .filter((otherValue) => otherValue.value !== "")
-                      .slice(0, visibleOtherResponses)
-                      .map((otherValue, idx) => (
-                        <div key={`${idx}-${otherValue}`} dir="auto">
-                          {surveyType === "link" && (
-                            <div className="ph-no-capture col-span-1 m-2 flex h-10 items-center rounded-lg pl-4 text-sm font-medium text-slate-900">
+                    <div className="col-span-1 pl-6">{surveyType === "app" && t("common.user")}</div>
+                  </div>
+                  {result.others
+                    .filter((otherValue) => otherValue.value !== "")
+                    .slice(0, visibleOtherResponses)
+                    .map((otherValue, idx) => (
+                      <div key={`${idx}-${otherValue}`} dir="auto">
+                        {surveyType === "link" && (
+                          <div className="ph-no-capture col-span-1 m-2 flex h-10 items-center rounded-lg pl-4 text-sm font-medium text-slate-900">
+                            <span>{otherValue.value}</span>
+                          </div>
+                        )}
+                        {surveyType === "app" && otherValue.contact && (
+                          <Link
+                            href={
+                              otherValue.contact.id
+                                ? `/environments/${environmentId}/contacts/${otherValue.contact.id}`
+                                : { pathname: null }
+                            }
+                            className="m-2 grid h-16 grid-cols-2 items-center rounded-lg text-sm hover:bg-slate-100">
+                            <div className="ph-no-capture col-span-1 pl-4 font-medium text-slate-900">
                               <span>{otherValue.value}</span>
                             </div>
-                          )}
-                          {surveyType === "app" && otherValue.contact && (
-                            <Link
-                              href={
-                                otherValue.contact.id
-                                  ? `/environments/${environmentId}/contacts/${otherValue.contact.id}`
-                                  : { pathname: null }
-                              }
-                              className="m-2 grid h-16 grid-cols-2 items-center rounded-lg text-sm hover:bg-slate-100">
-                              <div className="ph-no-capture col-span-1 pl-4 font-medium text-slate-900">
-                                <span>{otherValue.value}</span>
-                              </div>
-                              <div className="ph-no-capture col-span-1 flex items-center space-x-4 pl-6 font-medium text-slate-900">
-                                {otherValue.contact.id && <PersonAvatar personId={otherValue.contact.id} />}
-                                <span>
-                                  {getContactIdentifier(otherValue.contact, otherValue.contactAttributes)}
-                                </span>
-                              </div>
-                            </Link>
-                          )}
-                        </div>
-                      ))}
-                    {visibleOtherResponses < result.others.length && (
-                      <div className="flex justify-center py-4">
-                        <Button onClick={handleLoadMore} variant="secondary" size="sm">
-                          {t("common.load_more")}
-                        </Button>
+                            <div className="ph-no-capture col-span-1 flex items-center space-x-4 pl-6 font-medium text-slate-900">
+                              {otherValue.contact.id && <PersonAvatar personId={otherValue.contact.id} />}
+                              <span>
+                                {getContactIdentifier(otherValue.contact, otherValue.contactAttributes)}
+                              </span>
+                            </div>
+                          </Link>
+                        )}
                       </div>
-                    )}
-                  </div>
-                )}
-              </Fragment>
-            );
-          })}
-        </div>
+                    ))}
+                  {visibleOtherResponses < result.others.length && (
+                    <div className="flex justify-center py-4">
+                      <Button onClick={handleLoadMore} variant="secondary" size="sm">
+                        {t("common.load_more")}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </Fragment>
+          );
+        })}
       </div>
     </div>
   );

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

@@ -1,7 +1,5 @@
 "use client";
 
-import { BarChart, BarChartHorizontal } from "lucide-react";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   TI18nString,
@@ -11,12 +9,8 @@ import {
   TSurveyQuestionTypeEnum,
 } from "@formbricks/types/surveys/types";
 import { HalfCircle, ProgressBar } from "@/modules/ui/components/progress-bar";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/modules/ui/components/tabs";
-import { TooltipProvider } from "@/modules/ui/components/tooltip";
 import { convertFloatToNDecimal } from "../lib/utils";
-import { ClickableBarSegment } from "./ClickableBarSegment";
 import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
-import { SatisfactionIndicator } from "./SatisfactionIndicator";
 
 interface NPSSummaryProps {
   questionSummary: TSurveyQuestionSummaryNps;
@@ -30,20 +24,8 @@ interface NPSSummaryProps {
   ) => void;
 }
 
-const calculateNPSOpacity = (rating: number): number => {
-  if (rating <= 6) {
-    return 0.3 + (rating / 6) * 0.3;
-  }
-  if (rating <= 8) {
-    return 0.6 + ((rating - 6) / 2) * 0.2;
-  }
-  return 0.8 + ((rating - 8) / 2) * 0.2;
-};
-
 export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryProps) => {
   const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState<"aggregated" | "individual">("aggregated");
-
   const applyFilter = (group: string) => {
     const filters = {
       promoters: {
@@ -79,112 +61,38 @@ export const NPSSummary = ({ questionSummary, survey, setFilter }: NPSSummaryPro
 
   return (
     <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
-      <QuestionSummaryHeader
-        questionSummary={questionSummary}
-        survey={survey}
-        additionalInfo={
-          <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
-            <SatisfactionIndicator percentage={questionSummary.promoters.percentage} />
-            <div>
-              {t("environments.surveys.summary.promoters")}:{" "}
-              {convertFloatToNDecimal(questionSummary.promoters.percentage, 2)}%
+      <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+        {["promoters", "passives", "detractors", "dismissed"].map((group) => (
+          <button
+            className="w-full cursor-pointer hover:opacity-80"
+            key={group}
+            onClick={() => applyFilter(group)}>
+            <div
+              className={`mb-2 flex justify-between ${group === "dismissed" ? "mb-2 border-t bg-white pt-4 text-sm md:text-base" : ""}`}>
+              <div className="mr-8 flex space-x-1">
+                <p
+                  className={`font-semibold capitalize text-slate-700 ${group === "dismissed" ? "" : "text-slate-700"}`}>
+                  {group}
+                </p>
+                <div>
+                  <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
+                    {convertFloatToNDecimal(questionSummary[group]?.percentage, 2)}%
+                  </p>
+                </div>
+              </div>
+              <p className="flex w-32 items-end justify-end text-slate-600">
+                {questionSummary[group]?.count}{" "}
+                {questionSummary[group]?.count === 1 ? t("common.response") : t("common.responses")}
+              </p>
             </div>
-          </div>
-        }
-      />
-
-      <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as "aggregated" | "individual")}>
-        <div className="flex justify-end px-4 md:px-6">
-          <TabsList>
-            <TabsTrigger value="aggregated" icon={<BarChartHorizontal className="h-4 w-4" />}>
-              {t("environments.surveys.summary.aggregated")}
-            </TabsTrigger>
-            <TabsTrigger value="individual" icon={<BarChart className="h-4 w-4" />}>
-              {t("environments.surveys.summary.individual")}
-            </TabsTrigger>
-          </TabsList>
-        </div>
-
-        <TabsContent value="aggregated" className="mt-4">
-          <div className="px-4 pb-6 pt-4 md:px-6">
-            <div className="space-y-5 text-sm md:text-base">
-              {["promoters", "passives", "detractors", "dismissed"].map((group) => (
-                <button
-                  className="w-full cursor-pointer hover:opacity-80"
-                  key={group}
-                  onClick={() => applyFilter(group)}>
-                  <div
-                    className={`mb-2 flex justify-between ${group === "dismissed" ? "mb-2 border-t bg-white pt-4 text-sm md:text-base" : ""}`}>
-                    <div className="mr-8 flex space-x-1">
-                      <p
-                        className={`font-semibold capitalize text-slate-700 ${group === "dismissed" ? "" : "text-slate-700"}`}>
-                        {group}
-                      </p>
-                      <div>
-                        <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                          {convertFloatToNDecimal(questionSummary[group]?.percentage, 2)}%
-                        </p>
-                      </div>
-                    </div>
-                    <p className="flex w-32 items-end justify-end text-slate-600">
-                      {questionSummary[group]?.count}{" "}
-                      {questionSummary[group]?.count === 1 ? t("common.response") : t("common.responses")}
-                    </p>
-                  </div>
-                  <ProgressBar
-                    barColor={group === "dismissed" ? "bg-slate-600" : "bg-brand-dark"}
-                    progress={questionSummary[group]?.percentage / 100}
-                  />
-                </button>
-              ))}
-            </div>
-          </div>
-        </TabsContent>
-
-        <TabsContent value="individual" className="mt-4">
-          <TooltipProvider delayDuration={200}>
-            <div className="grid grid-cols-11 gap-2 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
-              {questionSummary.choices.map((choice) => {
-                const opacity = calculateNPSOpacity(choice.rating);
-
-                return (
-                  <ClickableBarSegment
-                    key={choice.rating}
-                    className="group flex cursor-pointer flex-col items-center"
-                    onClick={() =>
-                      setFilter(
-                        questionSummary.question.id,
-                        questionSummary.question.headline,
-                        questionSummary.question.type,
-                        t("environments.surveys.summary.is_equal_to"),
-                        choice.rating.toString()
-                      )
-                    }>
-                    <div className="flex h-32 w-full flex-col items-center justify-end">
-                      <div
-                        className="bg-brand-dark w-full rounded-t-lg border border-slate-200 transition-all group-hover:brightness-110"
-                        style={{
-                          height: `${Math.max(choice.percentage, 2)}%`,
-                          opacity,
-                        }}
-                      />
-                    </div>
-                    <div className="flex w-full flex-col items-center rounded-b-lg border border-t-0 border-slate-200 bg-slate-50 px-1 py-2">
-                      <div className="mb-1.5 text-xs font-medium text-slate-500">{choice.rating}</div>
-                      <div className="mb-1 flex items-center space-x-1">
-                        <div className="text-base font-semibold text-slate-700">{choice.count}</div>
-                        <div className="rounded bg-slate-100 px-1.5 py-0.5 text-xs text-slate-600">
-                          {convertFloatToNDecimal(choice.percentage, 1)}%
-                        </div>
-                      </div>
-                    </div>
-                  </ClickableBarSegment>
-                );
-              })}
-            </div>
-          </TooltipProvider>
-        </TabsContent>
-      </Tabs>
+            <ProgressBar
+              barColor={group === "dismissed" ? "bg-slate-600" : "bg-brand-dark"}
+              progress={questionSummary[group]?.percentage / 100}
+            />
+          </button>
+        ))}
+      </div>
 
       <div className="flex justify-center pb-4 pt-4">
         <HalfCircle value={questionSummary.score} />

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

@@ -10,7 +10,6 @@ import { getContactIdentifier } from "@/lib/utils/contact";
 import { renderHyperlinkedContent } from "@/modules/analysis/utils";
 import { PersonAvatar } from "@/modules/ui/components/avatars";
 import { Button } from "@/modules/ui/components/button";
-import { EmptyState } from "@/modules/ui/components/empty-state";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/modules/ui/components/table";
 import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
 
@@ -36,65 +35,59 @@ export const OpenTextSummary = ({ questionSummary, environmentId, survey, locale
     <div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
       <QuestionSummaryHeader questionSummary={questionSummary} survey={survey} />
       <div className="border-t border-slate-200"></div>
-      {questionSummary.samples.length === 0 ? (
-        <div className="p-8">
-          <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
-        </div>
-      ) : (
-        <div className="max-h-[40vh] overflow-y-auto">
-          <Table>
-            <TableHeader className="bg-slate-100">
-              <TableRow>
-                <TableHead className="w-1/4">{t("common.user")}</TableHead>
-                <TableHead className="w-2/4">{t("common.response")}</TableHead>
-                <TableHead className="w-1/4">{t("common.time")}</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {questionSummary.samples.slice(0, visibleResponses).map((response) => (
-                <TableRow key={response.id}>
-                  <TableCell className="w-1/4">
-                    {response.contact ? (
-                      <Link
-                        className="ph-no-capture group flex items-center"
-                        href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId={response.contact.id} />
-                        </div>
-                        <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                          {getContactIdentifier(response.contact, response.contactAttributes)}
-                        </p>
-                      </Link>
-                    ) : (
-                      <div className="group flex items-center">
-                        <div className="hidden md:flex">
-                          <PersonAvatar personId="anonymous" />
-                        </div>
-                        <p className="break-normal text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+      <div className="max-h-[40vh] overflow-y-auto">
+        <Table>
+          <TableHeader className="bg-slate-100">
+            <TableRow>
+              <TableHead>{t("common.user")}</TableHead>
+              <TableHead>{t("common.response")}</TableHead>
+              <TableHead>{t("common.time")}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {questionSummary.samples.slice(0, visibleResponses).map((response) => (
+              <TableRow key={response.id}>
+                <TableCell>
+                  {response.contact ? (
+                    <Link
+                      className="ph-no-capture group flex items-center"
+                      href={`/environments/${environmentId}/contacts/${response.contact.id}`}>
+                      <div className="hidden md:flex">
+                        <PersonAvatar personId={response.contact.id} />
                       </div>
-                    )}
-                  </TableCell>
-                  <TableCell className="w-2/4 font-medium">
-                    {typeof response.value === "string"
-                      ? renderHyperlinkedContent(response.value)
-                      : response.value}
-                  </TableCell>
-                  <TableCell className="w-1/4">
-                    {timeSince(new Date(response.updatedAt).toISOString(), locale)}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-          {visibleResponses < questionSummary.samples.length && (
-            <div className="flex justify-center py-4">
-              <Button onClick={handleLoadMore} variant="secondary" size="sm">
-                {t("common.load_more")}
-              </Button>
-            </div>
-          )}
-        </div>
-      )}
+                      <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                        {getContactIdentifier(response.contact, response.contactAttributes)}
+                      </p>
+                    </Link>
+                  ) : (
+                    <div className="group flex items-center">
+                      <div className="hidden md:flex">
+                        <PersonAvatar personId="anonymous" />
+                      </div>
+                      <p className="break-normal text-slate-600 md:ml-2">{t("common.anonymous")}</p>
+                    </div>
+                  )}
+                </TableCell>
+                <TableCell className="font-medium">
+                  {typeof response.value === "string"
+                    ? renderHyperlinkedContent(response.value)
+                    : response.value}
+                </TableCell>
+                <TableCell width={120}>
+                  {timeSince(new Date(response.updatedAt).toISOString(), locale)}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        {visibleResponses < questionSummary.samples.length && (
+          <div className="flex justify-center py-4">
+            <Button onClick={handleLoadMore} variant="secondary" size="sm">
+              {t("common.load_more")}
+            </Button>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

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

@@ -57,8 +57,8 @@ export const QuestionSummaryHeader = ({
             {t("environments.surveys.edit.optional")}
           </div>
         )}
-        <IdBadge id={questionSummary.question.id} />
       </div>
+      <IdBadge id={questionSummary.question.id} label={t("common.question_id")} />
     </div>
   );
 };

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

@@ -1,24 +0,0 @@
-"use client";
-
-import { TSurveyRatingQuestion } from "@formbricks/types/surveys/types";
-import { RatingResponse } from "@/modules/ui/components/rating-response";
-
-interface RatingScaleLegendProps {
-  scale: TSurveyRatingQuestion["scale"];
-  range: number;
-}
-
-export const RatingScaleLegend = ({ scale, range }: RatingScaleLegendProps) => {
-  return (
-    <div className="mt-3 flex w-full items-start justify-between px-1">
-      <div className="flex items-center space-x-1">
-        <RatingResponse scale={scale} answer={1} range={range} addColors={false} variant="scale" />
-        <span className="text-xs text-slate-500">1</span>
-      </div>
-      <div className="flex items-center space-x-1">
-        <span className="text-xs text-slate-500">{range}</span>
-        <RatingResponse scale={scale} answer={range} range={range} addColors={false} variant="scale" />
-      </div>
-    </div>
-  );
-};

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

@@ -1,7 +1,7 @@
 "use client";
 
-import { BarChart, BarChartHorizontal, CircleSlash2, SmileIcon, StarIcon } from "lucide-react";
-import { useMemo, useState } from "react";
+import { CircleSlash2, SmileIcon, StarIcon } from "lucide-react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import {
   TI18nString,
@@ -11,15 +11,9 @@ import {
   TSurveyQuestionTypeEnum,
 } from "@formbricks/types/surveys/types";
 import { convertFloatToNDecimal } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/utils";
-import { EmptyState } from "@/modules/ui/components/empty-state";
 import { ProgressBar } from "@/modules/ui/components/progress-bar";
 import { RatingResponse } from "@/modules/ui/components/rating-response";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/modules/ui/components/tabs";
-import { TooltipProvider } from "@/modules/ui/components/tooltip";
-import { ClickableBarSegment } from "./ClickableBarSegment";
 import { QuestionSummaryHeader } from "./QuestionSummaryHeader";
-import { RatingScaleLegend } from "./RatingScaleLegend";
-import { SatisfactionIndicator } from "./SatisfactionIndicator";
 
 interface RatingSummaryProps {
   questionSummary: TSurveyQuestionSummaryRating;
@@ -35,8 +29,6 @@ interface RatingSummaryProps {
 
 export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSummaryProps) => {
   const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState<"aggregated" | "individual">("aggregated");
-
   const getIconBasedOnScale = useMemo(() => {
     const scale = questionSummary.question.scale;
     if (scale === "number") return <CircleSlash2 className="h-4 w-4" />;
@@ -50,170 +42,52 @@ export const RatingSummary = ({ questionSummary, survey, setFilter }: RatingSumm
         questionSummary={questionSummary}
         survey={survey}
         additionalInfo={
-          <div className="flex items-center space-x-2">
-            <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
-              {getIconBasedOnScale}
-              <div>
-                {t("environments.surveys.summary.overall")}: {questionSummary.average.toFixed(2)}
-              </div>
-            </div>
-
-            <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
-              <SatisfactionIndicator percentage={questionSummary.csat.satisfiedPercentage} />
-              <div>
-                CSAT: {questionSummary.csat.satisfiedPercentage}%{" "}
-                {t("environments.surveys.summary.satisfied")}
-              </div>
+          <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
+            {getIconBasedOnScale}
+            <div>
+              {t("environments.surveys.summary.overall")}: {questionSummary.average.toFixed(2)}
             </div>
           </div>
         }
       />
-
-      <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as "aggregated" | "individual")}>
-        <div className="flex justify-end px-4 md:px-6">
-          <TabsList>
-            <TabsTrigger value="aggregated" icon={<BarChartHorizontal className="h-4 w-4" />}>
-              {t("environments.surveys.summary.aggregated")}
-            </TabsTrigger>
-            <TabsTrigger value="individual" icon={<BarChart className="h-4 w-4" />}>
-              {t("environments.surveys.summary.individual")}
-            </TabsTrigger>
-          </TabsList>
-        </div>
-
-        <TabsContent value="aggregated" className="mt-4">
-          <div className="px-4 pb-6 pt-4 md:px-6">
-            {questionSummary.responseCount === 0 ? (
-              <>
-                <EmptyState text={t("environments.surveys.summary.no_responses_found")} variant="simple" />
-                <RatingScaleLegend
-                  scale={questionSummary.question.scale}
-                  range={questionSummary.question.range}
-                />
-              </>
-            ) : (
-              <>
-                <TooltipProvider delayDuration={200}>
-                  <div className="flex h-12 w-full overflow-hidden rounded-t-lg border border-slate-200">
-                    {questionSummary.choices.map((result, index) => {
-                      if (result.percentage === 0) return null;
-
-                      const range = questionSummary.question.range;
-                      const opacity = 0.3 + (result.rating / range) * 0.8;
-                      const isFirst = index === 0;
-                      const isLast = index === questionSummary.choices.length - 1;
-
-                      return (
-                        <ClickableBarSegment
-                          key={result.rating}
-                          className="relative h-full cursor-pointer transition-opacity hover:brightness-110"
-                          style={{
-                            width: `${result.percentage}%`,
-                            borderRight: isLast ? "none" : "1px solid rgb(226, 232, 240)",
-                          }}
-                          onClick={() =>
-                            setFilter(
-                              questionSummary.question.id,
-                              questionSummary.question.headline,
-                              questionSummary.question.type,
-                              t("environments.surveys.summary.is_equal_to"),
-                              result.rating.toString()
-                            )
-                          }>
-                          <div
-                            className={`bg-brand-dark h-full ${isFirst ? "rounded-tl-lg" : ""} ${isLast ? "rounded-tr-lg" : ""}`}
-                            style={{ opacity }}
-                          />
-                        </ClickableBarSegment>
-                      );
-                    })}
-                  </div>
-                </TooltipProvider>
-                <div className="flex w-full overflow-hidden rounded-b-lg border border-t-0 border-slate-200 bg-slate-50">
-                  {questionSummary.choices.map((result, index) => {
-                    if (result.percentage === 0) return null;
-
-                    return (
-                      <div
-                        key={result.rating}
-                        className="flex flex-col items-center justify-center py-2"
-                        style={{
-                          width: `${result.percentage}%`,
-                          borderRight:
-                            index < questionSummary.choices.length - 1
-                              ? "1px solid rgb(226, 232, 240)"
-                              : "none",
-                        }}>
-                        <div className="mb-1 flex items-center justify-center">
-                          <RatingResponse
-                            scale={questionSummary.question.scale}
-                            answer={result.rating}
-                            range={questionSummary.question.range}
-                            addColors={false}
-                            variant="aggregated"
-                          />
-                        </div>
-                        <div className="text-xs font-medium text-slate-600">
-                          {convertFloatToNDecimal(result.percentage, 1)}%
-                        </div>
-                      </div>
-                    );
-                  })}
+      <div className="space-y-5 px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+        {questionSummary.choices.map((result) => (
+          <button
+            className="w-full cursor-pointer hover:opacity-80"
+            key={result.rating}
+            onClick={() =>
+              setFilter(
+                questionSummary.question.id,
+                questionSummary.question.headline,
+                questionSummary.question.type,
+                t("environments.surveys.summary.is_equal_to"),
+                result.rating.toString()
+              )
+            }>
+            <div className="text flex justify-between px-2 pb-2">
+              <div className="mr-8 flex items-center space-x-1">
+                <div className="font-semibold text-slate-700">
+                  <RatingResponse
+                    scale={questionSummary.question.scale}
+                    answer={result.rating}
+                    range={questionSummary.question.range}
+                    addColors={questionSummary.question.isColorCodingEnabled}
+                  />
                 </div>
-                <RatingScaleLegend
-                  scale={questionSummary.question.scale}
-                  range={questionSummary.question.range}
-                />
-              </>
-            )}
-          </div>
-        </TabsContent>
-
-        <TabsContent value="individual" className="mt-4">
-          <div className="px-4 pb-6 pt-4 md:px-6">
-            <div className="space-y-5 text-sm md:text-base">
-              {questionSummary.choices.map((result) => (
-                <div key={result.rating}>
-                  <button
-                    className="w-full cursor-pointer hover:opacity-80"
-                    onClick={() =>
-                      setFilter(
-                        questionSummary.question.id,
-                        questionSummary.question.headline,
-                        questionSummary.question.type,
-                        t("environments.surveys.summary.is_equal_to"),
-                        result.rating.toString()
-                      )
-                    }>
-                    <div className="text flex justify-between px-2 pb-2">
-                      <div className="mr-8 flex items-center space-x-1">
-                        <div className="font-semibold text-slate-700">
-                          <RatingResponse
-                            scale={questionSummary.question.scale}
-                            answer={result.rating}
-                            range={questionSummary.question.range}
-                            addColors={questionSummary.question.isColorCodingEnabled}
-                            variant="individual"
-                          />
-                        </div>
-                        <div>
-                          <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                            {convertFloatToNDecimal(result.percentage, 2)}%
-                          </p>
-                        </div>
-                      </div>
-                      <p className="flex w-32 items-end justify-end text-slate-600">
-                        {result.count} {result.count === 1 ? t("common.response") : t("common.responses")}
-                      </p>
-                    </div>
-                    <ProgressBar barColor="bg-brand-dark" progress={result.percentage / 100} />
-                  </button>
+                <div>
+                  <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
+                    {convertFloatToNDecimal(result.percentage, 2)}%
+                  </p>
                 </div>
-              ))}
+              </div>
+              <p className="flex w-32 items-end justify-end text-slate-600">
+                {result.count} {result.count === 1 ? t("common.response") : t("common.responses")}
+              </p>
             </div>
-          </div>
-        </TabsContent>
-      </Tabs>
+            <ProgressBar barColor="bg-brand-dark" progress={result.percentage / 100} />
+          </button>
+        ))}
+      </div>
       {questionSummary.dismissed && questionSummary.dismissed.count > 0 && (
         <div className="rounded-b-lg border-t bg-white px-6 py-4">
           <div key="dismissed">

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

@@ -1,17 +0,0 @@
-interface SatisfactionIndicatorProps {
-  percentage: number;
-}
-
-export const SatisfactionIndicator = ({ percentage }: SatisfactionIndicatorProps) => {
-  let colorClass = "";
-
-  if (percentage > 80) {
-    colorClass = "bg-emerald-500";
-  } else if (percentage >= 55) {
-    colorClass = "bg-orange-500";
-  } else {
-    colorClass = "bg-rose-500";
-  }
-
-  return <div className={`h-3 w-3 rounded-full ${colorClass}`} />;
-};

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

@@ -3,20 +3,15 @@
 import { toast } from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { TEnvironment } from "@formbricks/types/environment";
-import {
-  TI18nString,
-  TSurvey,
-  TSurveyQuestionId,
-  TSurveyQuestionTypeEnum,
-  TSurveySummary,
-} from "@formbricks/types/surveys/types";
-import { getTextContent } from "@formbricks/types/surveys/validation";
+import { TI18nString, TSurveyQuestionId, TSurveySummary } from "@formbricks/types/surveys/types";
+import { TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
-import { EmptyAppSurveys } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys";
 import {
   SelectedFilterValue,
   useResponseFilter,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
+} from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
+import { EmptyAppSurveys } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys";
 import { CTASummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/CTASummary";
 import { CalSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/CalSummary";
 import { ConsentSummary } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ConsentSummary";
@@ -34,7 +29,7 @@ import { RatingSummary } from "@/app/(app)/environments/[environmentId]/surveys/
 import { constructToastMessage } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/utils";
 import { OptionsType } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
 import { getLocalizedValue } from "@/lib/i18n/utils";
-import { EmptyState } from "@/modules/ui/components/empty-state";
+import { EmptySpaceFiller } from "@/modules/ui/components/empty-space-filler";
 import { SkeletonLoader } from "@/modules/ui/components/skeleton-loader";
 import { AddressSummary } from "./AddressSummary";
 
@@ -59,7 +54,7 @@ export const SummaryList = ({ summary, environment, responseCount, survey, local
     const filterObject: SelectedFilterValue = { ...selectedFilter };
     const value = {
       id: questionId,
-      label: getTextContent(getLocalizedValue(label, "default")),
+      label: getLocalizedValue(label, "default"),
       questionType: questionType,
       type: OptionsType.QUESTIONS,
     };
@@ -108,7 +103,12 @@ export const SummaryList = ({ summary, environment, responseCount, survey, local
       ) : summary.length === 0 ? (
         <SkeletonLoader type="summary" />
       ) : responseCount === 0 ? (
-        <EmptyState text={t("environments.surveys.summary.no_responses_found")} />
+        <EmptySpaceFiller
+          type="response"
+          environment={environment}
+          noWidgetRequired={survey.type === "link"}
+          emptyMessage={t("environments.surveys.summary.no_responses_found")}
+        />
       ) : (
         summary.map((questionSummary) => {
           if (questionSummary.type === TSurveyQuestionTypeEnum.OpenText) {

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

@@ -8,7 +8,6 @@ import { cn } from "@/modules/ui/lib/utils";
 
 interface SummaryMetadataProps {
   surveySummary: TSurveySummary["meta"];
-  quotasCount: number;
   isLoading: boolean;
   tab: "dropOffs" | "quotas" | undefined;
   setTab: React.Dispatch<React.SetStateAction<"dropOffs" | "quotas" | undefined>>;
@@ -32,7 +31,6 @@ const formatTime = (ttc) => {
 
 export const SummaryMetadata = ({
   surveySummary,
-  quotasCount,
   isLoading,
   tab,
   setTab,
@@ -63,7 +61,7 @@ export const SummaryMetadata = ({
       <div
         className={cn(
           `grid gap-4 sm:grid-cols-2 md:grid-cols-3 md:gap-x-2 lg:grid-cols-3 2xl:grid-cols-5`,
-          isQuotasAllowed && quotasCount > 0 && "2xl:grid-cols-6"
+          isQuotasAllowed && "2xl:grid-cols-6"
         )}>
         <StatCard
           label={t("environments.surveys.summary.impressions")}
@@ -107,7 +105,7 @@ export const SummaryMetadata = ({
           isLoading={isLoading}
         />
 
-        {isQuotasAllowed && quotasCount > 0 && (
+        {isQuotasAllowed && (
           <InteractiveCard
             key="quotas"
             tab="quotas"

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

@@ -5,8 +5,8 @@ import { useEffect, useMemo, useState } from "react";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TSurvey, TSurveySummary } from "@formbricks/types/surveys/types";
 import { TUserLocale } from "@formbricks/types/user";
+import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { getSurveySummaryAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
-import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
 import ScrollToTop from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/ScrollToTop";
 import { SummaryDropOffs } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs";
 import { CustomFilter } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
@@ -115,7 +115,6 @@ export const SummaryPage = ({
     <>
       <SummaryMetadata
         surveySummary={surveySummary.meta}
-        quotasCount={surveySummary.quotas?.length ?? 0}
         isLoading={isLoading}
         tab={tab}
         setTab={setTab}

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

@@ -29,6 +29,7 @@ interface SurveyAnalysisCTAProps {
   user: TUser;
   publicDomain: string;
   responseCount: number;
+  displayCount: number;
   segments: TSegment[];
   isContactsEnabled: boolean;
   isFormbricksCloud: boolean;
@@ -47,6 +48,7 @@ export const SurveyAnalysisCTA = ({
   user,
   publicDomain,
   responseCount,
+  displayCount,
   segments,
   isContactsEnabled,
   isFormbricksCloud,
@@ -167,7 +169,7 @@ export const SurveyAnalysisCTA = ({
       icon: ListRestart,
       tooltip: t("environments.surveys.summary.reset_survey"),
       onClick: () => setIsResetModalOpen(true),
-      isVisible: !isReadOnly,
+      isVisible: !isReadOnly && (responseCount > 0 || displayCount > 0),
     },
     {
       icon: SquarePenIcon,

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

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { PrismaErrorType } from "@formbricks/database/types/error";
 import { DatabaseError } from "@formbricks/types/errors";
 import { deleteResponsesAndDisplaysForSurvey, getQuotasSummary } from "./survey";

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

@@ -1,6 +1,6 @@
 import "server-only";
-import { Prisma } from "@prisma/client";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { DatabaseError } from "@formbricks/types/errors";
 import { convertFloatTo2Decimal } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/lib/utils";
 

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

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TLanguage } from "@formbricks/types/project";
 import { TResponseFilterCriteria } from "@formbricks/types/responses";
@@ -2334,147 +2334,6 @@ describe("NPS question type tests", () => {
     // Score should be -100 since all valid responses are detractors
     expect(summary[0].score).toBe(-100);
   });
-
-  test("getQuestionSummary includes individual score breakdown in choices array for NPS", async () => {
-    const question = {
-      id: "nps-q1",
-      type: TSurveyQuestionTypeEnum.NPS,
-      headline: { default: "How likely are you to recommend us?" },
-      required: true,
-      lowerLabel: { default: "Not likely" },
-      upperLabel: { default: "Very likely" },
-    };
-
-    const survey = {
-      id: "survey-1",
-      questions: [question],
-      languages: [],
-      welcomeCard: { enabled: false },
-    } as unknown as TSurvey;
-
-    const responses = [
-      {
-        id: "r1",
-        data: { "nps-q1": 0 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r2",
-        data: { "nps-q1": 5 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r3",
-        data: { "nps-q1": 7 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r4",
-        data: { "nps-q1": 9 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r5",
-        data: { "nps-q1": 10 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-    ];
-
-    const dropOff = [
-      { questionId: "nps-q1", impressions: 5, dropOffCount: 0, dropOffPercentage: 0 },
-    ] as unknown as TSurveySummary["dropOff"];
-
-    const summary: any = await getQuestionSummary(survey, responses, dropOff);
-
-    expect(summary[0].choices).toBeDefined();
-    expect(summary[0].choices).toHaveLength(11); // Scores 0-10
-
-    // Verify specific scores
-    const score0 = summary[0].choices.find((c: any) => c.rating === 0);
-    expect(score0.count).toBe(1);
-    expect(score0.percentage).toBe(20); // 1/5 * 100
-
-    const score5 = summary[0].choices.find((c: any) => c.rating === 5);
-    expect(score5.count).toBe(1);
-    expect(score5.percentage).toBe(20);
-
-    const score7 = summary[0].choices.find((c: any) => c.rating === 7);
-    expect(score7.count).toBe(1);
-    expect(score7.percentage).toBe(20);
-
-    const score9 = summary[0].choices.find((c: any) => c.rating === 9);
-    expect(score9.count).toBe(1);
-    expect(score9.percentage).toBe(20);
-
-    const score10 = summary[0].choices.find((c: any) => c.rating === 10);
-    expect(score10.count).toBe(1);
-    expect(score10.percentage).toBe(20);
-
-    // Verify scores with no responses have 0 count
-    const score1 = summary[0].choices.find((c: any) => c.rating === 1);
-    expect(score1.count).toBe(0);
-    expect(score1.percentage).toBe(0);
-  });
-
-  test("getQuestionSummary handles NPS individual score breakdown with no responses", async () => {
-    const question = {
-      id: "nps-q1",
-      type: TSurveyQuestionTypeEnum.NPS,
-      headline: { default: "How likely are you to recommend us?" },
-      required: true,
-      lowerLabel: { default: "Not likely" },
-      upperLabel: { default: "Very likely" },
-    };
-
-    const survey = {
-      id: "survey-1",
-      questions: [question],
-      languages: [],
-      welcomeCard: { enabled: false },
-    } as unknown as TSurvey;
-
-    const responses: any[] = [];
-
-    const dropOff = [
-      { questionId: "nps-q1", impressions: 0, dropOffCount: 0, dropOffPercentage: 0 },
-    ] as unknown as TSurveySummary["dropOff"];
-
-    const summary: any = await getQuestionSummary(survey, responses, dropOff);
-
-    expect(summary[0].choices).toBeDefined();
-    expect(summary[0].choices).toHaveLength(11); // Scores 0-10
-
-    // All scores should have 0 count and percentage
-    summary[0].choices.forEach((choice: any) => {
-      expect(choice.count).toBe(0);
-      expect(choice.percentage).toBe(0);
-    });
-  });
 });
 
 describe("Rating question type tests", () => {
@@ -2698,549 +2557,6 @@ describe("Rating question type tests", () => {
     // Verify dismissed is 0
     expect(summary[0].dismissed.count).toBe(0);
   });
-
-  test("getQuestionSummary calculates CSAT for Rating question with range 3", async () => {
-    const question = {
-      id: "rating-q1",
-      type: TSurveyQuestionTypeEnum.Rating,
-      headline: { default: "Rate our service" },
-      required: true,
-      scale: "number",
-      range: 3,
-      lowerLabel: { default: "Poor" },
-      upperLabel: { default: "Excellent" },
-    };
-
-    const survey = {
-      id: "survey-1",
-      questions: [question],
-      languages: [],
-      welcomeCard: { enabled: false },
-    } as unknown as TSurvey;
-
-    const responses = [
-      {
-        id: "r1",
-        data: { "rating-q1": 3 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r2",
-        data: { "rating-q1": 2 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r3",
-        data: { "rating-q1": 3 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-    ];
-
-    const dropOff = [
-      { questionId: "rating-q1", impressions: 3, dropOffCount: 0, dropOffPercentage: 0 },
-    ] as unknown as TSurveySummary["dropOff"];
-
-    const summary: any = await getQuestionSummary(survey, responses, dropOff);
-
-    // Range 3: satisfied = score 3
-    // 2 out of 3 responses are satisfied (score 3)
-    expect(summary[0].csat.satisfiedCount).toBe(2);
-    expect(summary[0].csat.satisfiedPercentage).toBe(67); // Math.round((2/3) * 100)
-  });
-
-  test("getQuestionSummary calculates CSAT for Rating question with range 4", async () => {
-    const question = {
-      id: "rating-q1",
-      type: TSurveyQuestionTypeEnum.Rating,
-      headline: { default: "Rate our service" },
-      required: true,
-      scale: "number",
-      range: 4,
-      lowerLabel: { default: "Poor" },
-      upperLabel: { default: "Excellent" },
-    };
-
-    const survey = {
-      id: "survey-1",
-      questions: [question],
-      languages: [],
-      welcomeCard: { enabled: false },
-    } as unknown as TSurvey;
-
-    const responses = [
-      {
-        id: "r1",
-        data: { "rating-q1": 3 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r2",
-        data: { "rating-q1": 4 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r3",
-        data: { "rating-q1": 2 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-    ];
-
-    const dropOff = [
-      { questionId: "rating-q1", impressions: 3, dropOffCount: 0, dropOffPercentage: 0 },
-    ] as unknown as TSurveySummary["dropOff"];
-
-    const summary: any = await getQuestionSummary(survey, responses, dropOff);
-
-    // Range 4: satisfied = scores 3-4
-    // 2 out of 3 responses are satisfied (scores 3 and 4)
-    expect(summary[0].csat.satisfiedCount).toBe(2);
-    expect(summary[0].csat.satisfiedPercentage).toBe(67);
-  });
-
-  test("getQuestionSummary calculates CSAT for Rating question with range 5", async () => {
-    const question = {
-      id: "rating-q1",
-      type: TSurveyQuestionTypeEnum.Rating,
-      headline: { default: "Rate our service" },
-      required: true,
-      scale: "number",
-      range: 5,
-      lowerLabel: { default: "Poor" },
-      upperLabel: { default: "Excellent" },
-    };
-
-    const survey = {
-      id: "survey-1",
-      questions: [question],
-      languages: [],
-      welcomeCard: { enabled: false },
-    } as unknown as TSurvey;
-
-    const responses = [
-      {
-        id: "r1",
-        data: { "rating-q1": 4 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r2",
-        data: { "rating-q1": 5 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r3",
-        data: { "rating-q1": 3 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-    ];
-
-    const dropOff = [
-      { questionId: "rating-q1", impressions: 3, dropOffCount: 0, dropOffPercentage: 0 },
-    ] as unknown as TSurveySummary["dropOff"];
-
-    const summary: any = await getQuestionSummary(survey, responses, dropOff);
-
-    // Range 5: satisfied = scores 4-5
-    // 2 out of 3 responses are satisfied (scores 4 and 5)
-    expect(summary[0].csat.satisfiedCount).toBe(2);
-    expect(summary[0].csat.satisfiedPercentage).toBe(67);
-  });
-
-  test("getQuestionSummary calculates CSAT for Rating question with range 6", async () => {
-    const question = {
-      id: "rating-q1",
-      type: TSurveyQuestionTypeEnum.Rating,
-      headline: { default: "Rate our service" },
-      required: true,
-      scale: "number",
-      range: 6,
-      lowerLabel: { default: "Poor" },
-      upperLabel: { default: "Excellent" },
-    };
-
-    const survey = {
-      id: "survey-1",
-      questions: [question],
-      languages: [],
-      welcomeCard: { enabled: false },
-    } as unknown as TSurvey;
-
-    const responses = [
-      {
-        id: "r1",
-        data: { "rating-q1": 5 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r2",
-        data: { "rating-q1": 6 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r3",
-        data: { "rating-q1": 4 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-    ];
-
-    const dropOff = [
-      { questionId: "rating-q1", impressions: 3, dropOffCount: 0, dropOffPercentage: 0 },
-    ] as unknown as TSurveySummary["dropOff"];
-
-    const summary: any = await getQuestionSummary(survey, responses, dropOff);
-
-    // Range 6: satisfied = scores 5-6
-    // 2 out of 3 responses are satisfied (scores 5 and 6)
-    expect(summary[0].csat.satisfiedCount).toBe(2);
-    expect(summary[0].csat.satisfiedPercentage).toBe(67);
-  });
-
-  test("getQuestionSummary calculates CSAT for Rating question with range 7", async () => {
-    const question = {
-      id: "rating-q1",
-      type: TSurveyQuestionTypeEnum.Rating,
-      headline: { default: "Rate our service" },
-      required: true,
-      scale: "number",
-      range: 7,
-      lowerLabel: { default: "Poor" },
-      upperLabel: { default: "Excellent" },
-    };
-
-    const survey = {
-      id: "survey-1",
-      questions: [question],
-      languages: [],
-      welcomeCard: { enabled: false },
-    } as unknown as TSurvey;
-
-    const responses = [
-      {
-        id: "r1",
-        data: { "rating-q1": 6 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r2",
-        data: { "rating-q1": 7 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r3",
-        data: { "rating-q1": 5 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-    ];
-
-    const dropOff = [
-      { questionId: "rating-q1", impressions: 3, dropOffCount: 0, dropOffPercentage: 0 },
-    ] as unknown as TSurveySummary["dropOff"];
-
-    const summary: any = await getQuestionSummary(survey, responses, dropOff);
-
-    // Range 7: satisfied = scores 6-7
-    // 2 out of 3 responses are satisfied (scores 6 and 7)
-    expect(summary[0].csat.satisfiedCount).toBe(2);
-    expect(summary[0].csat.satisfiedPercentage).toBe(67);
-  });
-
-  test("getQuestionSummary calculates CSAT for Rating question with range 10", async () => {
-    const question = {
-      id: "rating-q1",
-      type: TSurveyQuestionTypeEnum.Rating,
-      headline: { default: "Rate our service" },
-      required: true,
-      scale: "number",
-      range: 10,
-      lowerLabel: { default: "Poor" },
-      upperLabel: { default: "Excellent" },
-    };
-
-    const survey = {
-      id: "survey-1",
-      questions: [question],
-      languages: [],
-      welcomeCard: { enabled: false },
-    } as unknown as TSurvey;
-
-    const responses = [
-      {
-        id: "r1",
-        data: { "rating-q1": 8 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r2",
-        data: { "rating-q1": 9 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r3",
-        data: { "rating-q1": 10 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r4",
-        data: { "rating-q1": 7 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-    ];
-
-    const dropOff = [
-      { questionId: "rating-q1", impressions: 4, dropOffCount: 0, dropOffPercentage: 0 },
-    ] as unknown as TSurveySummary["dropOff"];
-
-    const summary: any = await getQuestionSummary(survey, responses, dropOff);
-
-    // Range 10: satisfied = scores 8-10
-    // 3 out of 4 responses are satisfied (scores 8, 9, 10)
-    expect(summary[0].csat.satisfiedCount).toBe(3);
-    expect(summary[0].csat.satisfiedPercentage).toBe(75);
-  });
-
-  test("getQuestionSummary calculates CSAT for Rating question with all satisfied", async () => {
-    const question = {
-      id: "rating-q1",
-      type: TSurveyQuestionTypeEnum.Rating,
-      headline: { default: "Rate our service" },
-      required: true,
-      scale: "number",
-      range: 5,
-      lowerLabel: { default: "Poor" },
-      upperLabel: { default: "Excellent" },
-    };
-
-    const survey = {
-      id: "survey-1",
-      questions: [question],
-      languages: [],
-      welcomeCard: { enabled: false },
-    } as unknown as TSurvey;
-
-    const responses = [
-      {
-        id: "r1",
-        data: { "rating-q1": 4 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r2",
-        data: { "rating-q1": 5 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-    ];
-
-    const dropOff = [
-      { questionId: "rating-q1", impressions: 2, dropOffCount: 0, dropOffPercentage: 0 },
-    ] as unknown as TSurveySummary["dropOff"];
-
-    const summary: any = await getQuestionSummary(survey, responses, dropOff);
-
-    // Range 5: satisfied = scores 4-5
-    // All 2 responses are satisfied
-    expect(summary[0].csat.satisfiedCount).toBe(2);
-    expect(summary[0].csat.satisfiedPercentage).toBe(100);
-  });
-
-  test("getQuestionSummary calculates CSAT for Rating question with none satisfied", async () => {
-    const question = {
-      id: "rating-q1",
-      type: TSurveyQuestionTypeEnum.Rating,
-      headline: { default: "Rate our service" },
-      required: true,
-      scale: "number",
-      range: 5,
-      lowerLabel: { default: "Poor" },
-      upperLabel: { default: "Excellent" },
-    };
-
-    const survey = {
-      id: "survey-1",
-      questions: [question],
-      languages: [],
-      welcomeCard: { enabled: false },
-    } as unknown as TSurvey;
-
-    const responses = [
-      {
-        id: "r1",
-        data: { "rating-q1": 1 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r2",
-        data: { "rating-q1": 2 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-      {
-        id: "r3",
-        data: { "rating-q1": 3 },
-        updatedAt: new Date(),
-        contact: null,
-        contactAttributes: {},
-        language: null,
-        ttc: {},
-        finished: true,
-      },
-    ];
-
-    const dropOff = [
-      { questionId: "rating-q1", impressions: 3, dropOffCount: 0, dropOffPercentage: 0 },
-    ] as unknown as TSurveySummary["dropOff"];
-
-    const summary: any = await getQuestionSummary(survey, responses, dropOff);
-
-    // Range 5: satisfied = scores 4-5
-    // None of the responses are satisfied (all are 1, 2, or 3)
-    expect(summary[0].csat.satisfiedCount).toBe(0);
-    expect(summary[0].csat.satisfiedPercentage).toBe(0);
-  });
-
-  test("getQuestionSummary calculates CSAT for Rating question with no responses", async () => {
-    const question = {
-      id: "rating-q1",
-      type: TSurveyQuestionTypeEnum.Rating,
-      headline: { default: "Rate our service" },
-      required: true,
-      scale: "number",
-      range: 5,
-      lowerLabel: { default: "Poor" },
-      upperLabel: { default: "Excellent" },
-    };
-
-    const survey = {
-      id: "survey-1",
-      questions: [question],
-      languages: [],
-      welcomeCard: { enabled: false },
-    } as unknown as TSurvey;
-
-    const responses: any[] = [];
-
-    const dropOff = [
-      { questionId: "rating-q1", impressions: 0, dropOffCount: 0, dropOffPercentage: 0 },
-    ] as unknown as TSurveySummary["dropOff"];
-
-    const summary: any = await getQuestionSummary(survey, responses, dropOff);
-
-    expect(summary[0].csat.satisfiedCount).toBe(0);
-    expect(summary[0].csat.satisfiedPercentage).toBe(0);
-  });
 });
 
 describe("PictureSelection question type tests", () => {

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

@@ -1,8 +1,8 @@
 import "server-only";
-import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { z } from "zod";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { ZId, ZOptionalNumber } from "@formbricks/types/common";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import {
@@ -532,31 +532,13 @@ export const getQuestionSummary = async (
 
         Object.entries(choiceCountMap).forEach(([label, count]) => {
           values.push({
-            rating: Number.parseInt(label),
+            rating: parseInt(label),
             count,
             percentage:
               totalResponseCount > 0 ? convertFloatTo2Decimal((count / totalResponseCount) * 100) : 0,
           });
         });
 
-        // Calculate CSAT based on range
-        let satisfiedCount = 0;
-        if (range === 3) {
-          satisfiedCount = choiceCountMap[3] || 0;
-        } else if (range === 4) {
-          satisfiedCount = (choiceCountMap[3] || 0) + (choiceCountMap[4] || 0);
-        } else if (range === 5) {
-          satisfiedCount = (choiceCountMap[4] || 0) + (choiceCountMap[5] || 0);
-        } else if (range === 6) {
-          satisfiedCount = (choiceCountMap[5] || 0) + (choiceCountMap[6] || 0);
-        } else if (range === 7) {
-          satisfiedCount = (choiceCountMap[6] || 0) + (choiceCountMap[7] || 0);
-        } else if (range === 10) {
-          satisfiedCount = (choiceCountMap[8] || 0) + (choiceCountMap[9] || 0) + (choiceCountMap[10] || 0);
-        }
-        const satisfiedPercentage =
-          totalResponseCount > 0 ? Math.round((satisfiedCount / totalResponseCount) * 100) : 0;
-
         summary.push({
           type: question.type,
           question,
@@ -566,10 +548,6 @@ export const getQuestionSummary = async (
           dismissed: {
             count: dismissed,
           },
-          csat: {
-            satisfiedCount,
-            satisfiedPercentage,
-          },
         });
 
         values = [];
@@ -585,17 +563,10 @@ export const getQuestionSummary = async (
           score: 0,
         };
 
-        // Track individual score counts (0-10)
-        const scoreCountMap: Record<number, number> = {};
-        for (let i = 0; i <= 10; i++) {
-          scoreCountMap[i] = 0;
-        }
-
         responses.forEach((response) => {
           const value = response.data[question.id];
           if (typeof value === "number") {
             data.total++;
-            scoreCountMap[value]++;
             if (value >= 9) {
               data.promoters++;
             } else if (value >= 7) {
@@ -614,13 +585,6 @@ export const getQuestionSummary = async (
             ? convertFloatTo2Decimal(((data.promoters - data.detractors) / data.total) * 100)
             : 0;
 
-        // Build choices array with individual score breakdown
-        const choices = Object.entries(scoreCountMap).map(([rating, count]) => ({
-          rating: Number.parseInt(rating),
-          count,
-          percentage: data.total > 0 ? convertFloatTo2Decimal((count / data.total) * 100) : 0,
-        }));
-
         summary.push({
           type: question.type,
           question,
@@ -643,7 +607,6 @@ export const getQuestionSummary = async (
             count: data.dismissed,
             percentage: data.total > 0 ? convertFloatTo2Decimal((data.dismissed / data.total) * 100) : 0,
           },
-          choices,
         });
         break;
       }

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

@@ -70,6 +70,7 @@ const SurveyPage = async (props: { params: Promise<{ environmentId: string; surv
             user={user}
             publicDomain={publicDomain}
             responseCount={initialSurveySummary?.meta.totalResponses ?? 0}
+            displayCount={initialSurveySummary?.meta.displayCount ?? 0}
             segments={segments}
             isContactsEnabled={isContactsEnabled}
             isFormbricksCloud={IS_FORMBRICKS_CLOUD}

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

@@ -25,7 +25,7 @@ import { TSurvey } from "@formbricks/types/surveys/types";
 import {
   DateRange,
   useResponseFilter,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
+} from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { getResponsesDownloadUrlAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
 import { downloadResponsesFile } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/utils";
 import { getFormattedFilters, getTodayDate } from "@/app/lib/surveys/surveys";

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

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { ChevronDown, ChevronUp, X } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TI18nString, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import { OptionsType } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionsComboBox";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { useClickOutside } from "@/lib/utils/hooks/useClickOutside";
@@ -26,8 +26,8 @@ import {
 import { Input } from "@/modules/ui/components/input";
 
 type QuestionFilterComboBoxProps = {
-  filterOptions: (string | TI18nString)[] | undefined;
-  filterComboBoxOptions: (string | TI18nString)[] | undefined;
+  filterOptions: string[] | undefined;
+  filterComboBoxOptions: string[] | undefined;
   filterValue: string | undefined;
   filterComboBoxValue: string | string[] | undefined;
   onChangeFilterValue: (o: string) => void;
@@ -74,7 +74,7 @@ export const QuestionFilterComboBox = ({
     if (!isMultiple) return filterComboBoxOptions;
 
     return filterComboBoxOptions?.filter((o) => {
-      const optionValue = typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
+      const optionValue = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
       return !filterComboBoxValue?.includes(optionValue);
     });
   }, [isMultiple, filterComboBoxOptions, filterComboBoxValue, defaultLanguageCode]);
@@ -91,15 +91,14 @@ export const QuestionFilterComboBox = ({
   const filteredOptions = useMemo(
     () =>
       options?.filter((o) => {
-        const optionValue =
-          typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
+        const optionValue = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
         return optionValue.toLowerCase().includes(searchQuery.toLowerCase());
       }),
     [options, searchQuery, defaultLanguageCode]
   );
 
-  const handleCommandItemSelect = (o: string | TI18nString) => {
-    const value = typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
+  const handleCommandItemSelect = (o: string) => {
+    const value = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
 
     if (isMultiple) {
       const newValue = Array.isArray(filterComboBoxValue) ? [...filterComboBoxValue, value] : [value];
@@ -201,18 +200,14 @@ export const QuestionFilterComboBox = ({
             )}
           </DropdownMenuTrigger>
           <DropdownMenuContent className="bg-white">
-            {filterOptions?.map((o, index) => {
-              const optionValue =
-                typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
-              return (
-                <DropdownMenuItem
-                  key={`${optionValue}-${index}`}
-                  className="cursor-pointer"
-                  onClick={() => onChangeFilterValue(optionValue)}>
-                  {optionValue}
-                </DropdownMenuItem>
-              );
-            })}
+            {filterOptions?.map((o, index) => (
+              <DropdownMenuItem
+                key={`${o}-${index}`}
+                className="cursor-pointer"
+                onClick={() => onChangeFilterValue(o)}>
+                {o}
+              </DropdownMenuItem>
+            ))}
           </DropdownMenuContent>
         </DropdownMenu>
       )}
@@ -274,8 +269,7 @@ export const QuestionFilterComboBox = ({
                 <CommandEmpty>{t("common.no_result_found")}</CommandEmpty>
                 <CommandGroup>
                   {filteredOptions?.map((o) => {
-                    const optionValue =
-                      typeof o === "object" && o !== null ? getLocalizedValue(o, defaultLanguageCode) : o;
+                    const optionValue = typeof o === "object" ? getLocalizedValue(o, defaultLanguageCode) : o;
                     return (
                       <CommandItem
                         key={optionValue}

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

@@ -209,7 +209,7 @@ export const QuestionsComboBox = ({ options, selected, onChangeValue }: Question
 
       {open && (
         <div className="animate-in absolute top-full z-10 mt-1 w-full overflow-auto rounded-md shadow-md outline-none">
-          <CommandList className="max-h-[600px]">
+          <CommandList>
             <CommandEmpty>{t("common.no_result_found")}</CommandEmpty>
             {options?.map((data) => (
               <Fragment key={data.header}>

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

@@ -4,16 +4,15 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { ChevronDown, ChevronUp, Plus, TrashIcon } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { TI18nString, TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import {
   SelectedFilterValue,
   TResponseStatus,
   useResponseFilter,
-} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/response-filter-context";
+} from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
 import { getSurveyFilterDataAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/actions";
 import { QuestionFilterComboBox } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/QuestionFilterComboBox";
 import { generateQuestionAndFilterOptions } from "@/app/lib/surveys/surveys";
-import { getLocalizedValue } from "@/lib/i18n/utils";
 import { Button } from "@/modules/ui/components/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
 import {
@@ -26,17 +25,9 @@ import {
 import { OptionsType, QuestionOption, QuestionsComboBox } from "./QuestionsComboBox";
 
 export type QuestionFilterOptions = {
-  type:
-    | TSurveyQuestionTypeEnum
-    | "Attributes"
-    | "Tags"
-    | "Languages"
-    | "Quotas"
-    | "Hidden Fields"
-    | "Meta"
-    | OptionsType.OTHERS;
-  filterOptions: (string | TI18nString)[];
-  filterComboBoxOptions: (string | TI18nString)[];
+  type: TSurveyQuestionTypeEnum | "Attributes" | "Tags" | "Languages" | "Quotas";
+  filterOptions: string[];
+  filterComboBoxOptions: string[];
   id: string;
 };
 
@@ -78,12 +69,6 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [filterValue, setFilterValue] = useState<SelectedFilterValue>(selectedFilter);
 
-  const getDefaultFilterValue = (option?: QuestionFilterOptions): string | undefined => {
-    if (!option || option.filterOptions.length === 0) return undefined;
-    const firstOption = option.filterOptions[0];
-    return typeof firstOption === "object" ? getLocalizedValue(firstOption, "default") : firstOption;
-  };
-
   useEffect(() => {
     // Fetch the initial data for the filter and load it into the state
     const handleInitialData = async () => {
@@ -109,18 +94,15 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
   }, [isOpen, setSelectedOptions, survey]);
 
   const handleOnChangeQuestionComboBoxValue = (value: QuestionOption, index: number) => {
-    const matchingFilterOption = selectedOptions.questionFilterOptions.find(
-      (q) => q.type === value.type || q.type === value.questionType
-    );
-    const defaultFilterValue = getDefaultFilterValue(matchingFilterOption);
-
     if (filterValue.filter[index].questionType) {
       // Create a new array and copy existing values from SelectedFilter
       filterValue.filter[index] = {
         questionType: value,
         filterType: {
           filterComboBoxValue: undefined,
-          filterValue: defaultFilterValue,
+          filterValue: selectedOptions.questionFilterOptions.find(
+            (q) => q.type === value.type || q.type === value.questionType
+          )?.filterOptions[0],
         },
       };
       setFilterValue({ filter: [...filterValue.filter], responseStatus: filterValue.responseStatus });
@@ -129,7 +111,9 @@ export const ResponseFilter = ({ survey }: ResponseFilterProps) => {
       filterValue.filter[index].questionType = value;
       filterValue.filter[index].filterType = {
         filterComboBoxValue: undefined,
-        filterValue: defaultFilterValue,
+        filterValue: selectedOptions.questionFilterOptions.find(
+          (q) => q.type === value.type || q.type === value.questionType
+        )?.filterOptions[0],
       };
       setFilterValue({ ...filterValue });
     }

apps/web/app/(app)/layout.tsx

@@ -1,9 +1,12 @@
 import { getServerSession } from "next-auth";
+import { Suspense } from "react";
 import { IntercomClientWrapper } from "@/app/intercom/IntercomClientWrapper";
+import { IS_POSTHOG_CONFIGURED, POSTHOG_API_HOST, POSTHOG_API_KEY } from "@/lib/constants";
 import { getUser } from "@/lib/user/service";
 import { authOptions } from "@/modules/auth/lib/authOptions";
 import { ClientLogout } from "@/modules/ui/components/client-logout";
 import { NoMobileOverlay } from "@/modules/ui/components/no-mobile-overlay";
+import { PHProvider, PostHogPageview } from "@/modules/ui/components/post-hog-client";
 import { ToasterClient } from "@/modules/ui/components/toaster-client";
 
 const AppLayout = async ({ children }) => {
@@ -18,9 +21,20 @@ const AppLayout = async ({ children }) => {
   return (
     <>
       <NoMobileOverlay />
-      <IntercomClientWrapper user={user} />
-      <ToasterClient />
-      {children}
+      <Suspense>
+        <PostHogPageview
+          posthogEnabled={IS_POSTHOG_CONFIGURED}
+          postHogApiHost={POSTHOG_API_HOST}
+          postHogApiKey={POSTHOG_API_KEY}
+        />
+      </Suspense>
+      <PHProvider posthogEnabled={IS_POSTHOG_CONFIGURED}>
+        <>
+          <IntercomClientWrapper user={user} />
+          <ToasterClient />
+          {children}
+        </>
+      </PHProvider>
     </>
   );
 };

apps/web/app/api/(internal)/pipeline/route.ts

@@ -1,6 +1,6 @@
-import { PipelineTriggers, Webhook } from "@prisma/client";
 import { headers } from "next/headers";
 import { prisma } from "@formbricks/database";
+import { PipelineTriggers, Webhook } from "@formbricks/database/generated/client";
 import { logger } from "@formbricks/logger";
 import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { ZPipelineInput } from "@/app/api/(internal)/pipeline/types/pipelines";

apps/web/app/api/lib/utils.ts

@@ -0,0 +1,34 @@
+import { Organization } from "@formbricks/database/generated/client";
+import { logger } from "@formbricks/logger";
+import { IS_FORMBRICKS_CLOUD } from "@/lib/constants";
+import { getMonthlyOrganizationResponseCount } from "@/lib/organization/service";
+import { sendPlanLimitsReachedEventToPosthogWeekly } from "@/lib/posthogServer";
+
+export const handleBillingLimitsCheck = async (
+  environmentId: string,
+  organizationId: string,
+  organizationBilling: Organization["billing"]
+): Promise<void> => {
+  if (!IS_FORMBRICKS_CLOUD) return;
+
+  const responsesCount = await getMonthlyOrganizationResponseCount(organizationId);
+  const responsesLimit = organizationBilling.limits.monthly.responses;
+
+  if (responsesLimit && responsesCount >= responsesLimit) {
+    try {
+      await sendPlanLimitsReachedEventToPosthogWeekly(environmentId, {
+        plan: organizationBilling.plan,
+        limits: {
+          projects: null,
+          monthly: {
+            responses: responsesLimit,
+            miu: null,
+          },
+        },
+      });
+    } catch (err) {
+      // Log error but do not throw
+      logger.error(err, "Error sending plan limits reached event to Posthog");
+    }
+  }
+};

apps/web/app/api/v1/client/[environmentId]/app/sync/[userId]/route.ts

@@ -18,6 +18,10 @@ import {
   getMonthlyOrganizationResponseCount,
   getOrganizationByEnvironmentId,
 } from "@/lib/organization/service";
+import {
+  capturePosthogEnvironmentEvent,
+  sendPlanLimitsReachedEventToPosthogWeekly,
+} from "@/lib/posthogServer";
 import { getProjectByEnvironmentId } from "@/lib/project/service";
 import { COLOR_DEFAULTS } from "@/lib/styling/constants";
 
@@ -54,6 +58,20 @@ const checkResponseLimit = async (environmentId: string): Promise<boolean> => {
   const monthlyResponseLimit = organization.billing.limits.monthly.responses;
   const isLimitReached = monthlyResponseLimit !== null && currentResponseCount >= monthlyResponseLimit;
 
+  if (isLimitReached) {
+    try {
+      await sendPlanLimitsReachedEventToPosthogWeekly(environmentId, {
+        plan: organization.billing.plan,
+        limits: {
+          projects: null,
+          monthly: { responses: monthlyResponseLimit, miu: null },
+        },
+      });
+    } catch (error) {
+      logger.error({ error }, `Error sending plan limits reached event to Posthog`);
+    }
+  }
+
   return isLimitReached;
 };
 
@@ -93,7 +111,10 @@ export const GET = withV1ApiWrapper({
       }
 
       if (!environment.appSetupCompleted) {
-        await updateEnvironment(environment.id, { appSetupCompleted: true });
+        await Promise.all([
+          updateEnvironment(environment.id, { appSetupCompleted: true }),
+          capturePosthogEnvironmentEvent(environmentId, "app setup completed"),
+        ]);
       }
 
       // check organization subscriptions and response limits

apps/web/app/api/v1/client/[environmentId]/app/sync/lib/survey.test.ts

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { logger } from "@formbricks/logger";
 import { DatabaseError } from "@formbricks/types/errors";
 import { TProject } from "@formbricks/types/project";

apps/web/app/api/v1/client/[environmentId]/app/sync/lib/survey.ts

@@ -1,7 +1,7 @@
 import "server-only";
-import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { logger } from "@formbricks/logger";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";

apps/web/app/api/v1/client/[environmentId]/displays/lib/display.test.ts

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { TDisplayCreateInput } from "@formbricks/types/displays";
 import { DatabaseError, ResourceNotFoundError, ValidationError } from "@formbricks/types/errors";
 import { validateInputs } from "@/lib/utils/validate";

apps/web/app/api/v1/client/[environmentId]/displays/lib/display.ts

@@ -1,5 +1,5 @@
-import { Prisma } from "@prisma/client";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { TDisplayCreateInput, ZDisplayCreateInput } from "@formbricks/types/displays";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { validateInputs } from "@/lib/utils/validate";

apps/web/app/api/v1/client/[environmentId]/displays/route.ts

@@ -5,6 +5,7 @@ import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { responses } from "@/app/lib/api/response";
 import { transformErrorToDetails } from "@/app/lib/api/validator";
 import { withV1ApiWrapper } from "@/app/lib/api/with-api-logging";
+import { capturePosthogEnvironmentEvent } from "@/lib/posthogServer";
 import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { createDisplay } from "./lib/display";
 
@@ -58,6 +59,7 @@ export const POST = withV1ApiWrapper({
     try {
       const response = await createDisplay(inputValidation.data);
 
+      await capturePosthogEnvironmentEvent(inputValidation.data.environmentId, "display created");
       return {
         response: responses.successResponse(response, true),
       };

apps/web/app/api/v1/client/[environmentId]/environment/lib/data.ts

@@ -1,6 +1,6 @@
 import "server-only";
-import { Prisma } from "@prisma/client";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { logger } from "@formbricks/logger";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";

apps/web/app/api/v1/client/[environmentId]/environment/lib/environmentState.test.ts

@@ -8,11 +8,16 @@ import { TOrganization } from "@formbricks/types/organizations";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { cache } from "@/lib/cache";
 import { getMonthlyOrganizationResponseCount } from "@/lib/organization/service";
+import {
+  capturePosthogEnvironmentEvent,
+  sendPlanLimitsReachedEventToPosthogWeekly,
+} from "@/lib/posthogServer";
 import { EnvironmentStateData, getEnvironmentStateData } from "./data";
 import { getEnvironmentState } from "./environmentState";
 
 // Mock dependencies
 vi.mock("@/lib/organization/service");
+vi.mock("@/lib/posthogServer");
 vi.mock("@/lib/cache", () => ({
   cache: {
     withCache: vi.fn(),
@@ -38,6 +43,7 @@ vi.mock("@/lib/constants", () => ({
   RECAPTCHA_SECRET_KEY: "mock_recaptcha_secret_key",
   IS_RECAPTCHA_CONFIGURED: true,
   IS_PRODUCTION: true,
+  IS_POSTHOG_CONFIGURED: false,
   ENTERPRISE_LICENSE_KEY: "mock_enterprise_license_key",
 }));
 
@@ -182,7 +188,9 @@ describe("getEnvironmentState", () => {
     expect(result.data).toEqual(expectedData);
     expect(getEnvironmentStateData).toHaveBeenCalledWith(environmentId);
     expect(prisma.environment.update).not.toHaveBeenCalled();
+    expect(capturePosthogEnvironmentEvent).not.toHaveBeenCalled();
     expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(mockOrganization.id);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).not.toHaveBeenCalled();
   });
 
   test("should throw ResourceNotFoundError if environment not found", async () => {
@@ -218,6 +226,7 @@ describe("getEnvironmentState", () => {
       where: { id: environmentId },
       data: { appSetupCompleted: true },
     });
+    expect(capturePosthogEnvironmentEvent).toHaveBeenCalledWith(environmentId, "app setup completed");
     expect(result.data).toBeDefined();
   });
 
@@ -228,6 +237,16 @@ describe("getEnvironmentState", () => {
 
     expect(result.data.surveys).toEqual([]);
     expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(mockOrganization.id);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).toHaveBeenCalledWith(environmentId, {
+      plan: mockOrganization.billing.plan,
+      limits: {
+        projects: null,
+        monthly: {
+          miu: null,
+          responses: mockOrganization.billing.limits.monthly.responses,
+        },
+      },
+    });
   });
 
   test("should return surveys if monthly response limit not reached (Cloud)", async () => {
@@ -237,6 +256,21 @@ describe("getEnvironmentState", () => {
 
     expect(result.data.surveys).toEqual(mockSurveys);
     expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(mockOrganization.id);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).not.toHaveBeenCalled();
+  });
+
+  test("should handle error when sending Posthog limit reached event", async () => {
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(100);
+    const posthogError = new Error("Posthog failed");
+    vi.mocked(sendPlanLimitsReachedEventToPosthogWeekly).mockRejectedValue(posthogError);
+
+    const result = await getEnvironmentState(environmentId);
+
+    expect(result.data.surveys).toEqual([]);
+    expect(logger.error).toHaveBeenCalledWith(
+      posthogError,
+      "Error sending plan limits reached event to Posthog"
+    );
   });
 
   test("should include recaptchaSiteKey if recaptcha variables are set", async () => {
@@ -279,6 +313,7 @@ describe("getEnvironmentState", () => {
 
     // Should return surveys even with high count since limit is null (unlimited)
     expect(result.data.surveys).toEqual(mockSurveys);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).not.toHaveBeenCalled();
   });
 
   test("should propagate database update errors", async () => {
@@ -296,6 +331,21 @@ describe("getEnvironmentState", () => {
     await expect(getEnvironmentState(environmentId)).rejects.toThrow("Database error");
   });
 
+  test("should propagate PostHog event capture errors", async () => {
+    const incompleteEnvironmentData = {
+      ...mockEnvironmentStateData,
+      environment: {
+        ...mockEnvironmentStateData.environment,
+        appSetupCompleted: false,
+      },
+    };
+    vi.mocked(getEnvironmentStateData).mockResolvedValue(incompleteEnvironmentData);
+    vi.mocked(capturePosthogEnvironmentEvent).mockRejectedValue(new Error("PostHog error"));
+
+    // Should throw error since Promise.all will fail if PostHog event capture fails
+    await expect(getEnvironmentState(environmentId)).rejects.toThrow("PostHog error");
+  });
+
   test("should include recaptchaSiteKey when IS_RECAPTCHA_CONFIGURED is true", async () => {
     const result = await getEnvironmentState(environmentId);
 

apps/web/app/api/v1/client/[environmentId]/environment/lib/environmentState.ts

@@ -1,10 +1,15 @@
 import "server-only";
 import { createCacheKey } from "@formbricks/cache";
 import { prisma } from "@formbricks/database";
+import { logger } from "@formbricks/logger";
 import { TJsEnvironmentState } from "@formbricks/types/js";
 import { cache } from "@/lib/cache";
 import { IS_FORMBRICKS_CLOUD, IS_RECAPTCHA_CONFIGURED, RECAPTCHA_SITE_KEY } from "@/lib/constants";
 import { getMonthlyOrganizationResponseCount } from "@/lib/organization/service";
+import {
+  capturePosthogEnvironmentEvent,
+  sendPlanLimitsReachedEventToPosthogWeekly,
+} from "@/lib/posthogServer";
 import { getEnvironmentStateData } from "./data";
 
 /**
@@ -28,10 +33,13 @@ export const getEnvironmentState = async (
       // Handle app setup completion update if needed
       // This is a one-time setup flag that can tolerate TTL-based cache expiration
       if (!environment.appSetupCompleted) {
-        await prisma.environment.update({
-          where: { id: environmentId },
-          data: { appSetupCompleted: true },
-        });
+        await Promise.all([
+          prisma.environment.update({
+            where: { id: environmentId },
+            data: { appSetupCompleted: true },
+          }),
+          capturePosthogEnvironmentEvent(environmentId, "app setup completed"),
+        ]);
       }
 
       // Check monthly response limits for Formbricks Cloud
@@ -41,6 +49,24 @@ export const getEnvironmentState = async (
         const currentResponseCount = await getMonthlyOrganizationResponseCount(organization.id);
         isMonthlyResponsesLimitReached =
           monthlyResponseLimit !== null && currentResponseCount >= monthlyResponseLimit;
+
+        // Send plan limits event if needed
+        if (isMonthlyResponsesLimitReached) {
+          try {
+            await sendPlanLimitsReachedEventToPosthogWeekly(environmentId, {
+              plan: organization.billing.plan,
+              limits: {
+                projects: null,
+                monthly: {
+                  miu: null,
+                  responses: organization.billing.limits.monthly.responses,
+                },
+              },
+            });
+          } catch (err) {
+            logger.error(err, "Error sending plan limits reached event to Posthog");
+          }
+        }
       }
 
       // Build the response data

apps/web/app/api/v1/client/[environmentId]/environment/route.ts

@@ -1,6 +1,5 @@
 import { NextRequest } from "next/server";
 import { logger } from "@formbricks/logger";
-import { ZEnvironmentId } from "@formbricks/types/environment";
 import { ResourceNotFoundError } from "@formbricks/types/errors";
 import { getEnvironmentState } from "@/app/api/v1/client/[environmentId]/environment/lib/environmentState";
 import { responses } from "@/app/lib/api/response";
@@ -29,38 +28,15 @@ export const GET = withV1ApiWrapper({
     const params = await props.params;
 
     try {
-      // Basic type check for environmentId
+      // Simple validation for environmentId (faster than Zod for high-frequency endpoint)
       if (typeof params.environmentId !== "string") {
         return {
           response: responses.badRequestResponse("Environment ID is required", undefined, true),
         };
       }
 
-      const environmentId = params.environmentId.trim();
-
-      // Validate CUID v1 format using Zod (matches Prisma schema @default(cuid()))
-      // This catches all invalid formats including:
-      // - null/undefined passed as string "null" or "undefined"
-      // - HTML-encoded placeholders like <environmentId> or %3C...%3E
-      // - Empty or whitespace-only IDs
-      // - Any other invalid CUID v1 format
-      const cuidValidation = ZEnvironmentId.safeParse(environmentId);
-      if (!cuidValidation.success) {
-        logger.warn(
-          {
-            environmentId: params.environmentId,
-            url: req.url,
-            validationError: cuidValidation.error.errors[0]?.message,
-          },
-          "Invalid CUID v1 format detected"
-        );
-        return {
-          response: responses.badRequestResponse("Invalid environment ID format", undefined, true),
-        };
-      }
-
       // Use optimized environment state fetcher with new caching approach
-      const environmentState = await getEnvironmentState(environmentId);
+      const environmentState = await getEnvironmentState(params.environmentId);
       const { data } = environmentState;
 
       return {
@@ -70,12 +46,12 @@ export const GET = withV1ApiWrapper({
             expiresAt: new Date(Date.now() + 1000 * 60 * 60), // 1 hour for SDK to recheck
           },
           true,
-          // Cache headers aligned with Redis cache TTL (1 minute)
-          // max-age=60: 1min browser cache
-          // s-maxage=60: 1min Cloudflare CDN cache
-          // stale-while-revalidate=60: 1min stale serving during revalidation
-          // stale-if-error=60: 1min stale serving on origin errors
-          "public, s-maxage=60, max-age=60, stale-while-revalidate=60, stale-if-error=60"
+          // Optimized cache headers for Cloudflare CDN and browser caching
+          // max-age=3600: 1hr browser cache (per guidelines)
+          // s-maxage=1800: 30min Cloudflare cache (per guidelines)
+          // stale-while-revalidate=1800: 30min stale serving during revalidation
+          // stale-if-error=3600: 1hr stale serving on origin errors
+          "public, s-maxage=1800, max-age=3600, stale-while-revalidate=1800, stale-if-error=3600"
         ),
       };
     } catch (err) {

apps/web/app/api/v1/client/[environmentId]/responses/lib/contact.test.ts

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { DatabaseError } from "@formbricks/types/errors";
 import { getContact, getContactByUserId } from "./contact";
 

apps/web/app/api/v1/client/[environmentId]/responses/lib/contact.ts

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { TContactAttributes } from "@formbricks/types/contact-attribute";
 import { DatabaseError } from "@formbricks/types/errors";
 

apps/web/app/api/v1/client/[environmentId]/responses/lib/response.test.ts

@@ -1,10 +1,15 @@
-import { Prisma } from "@prisma/client";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
+import { logger } from "@formbricks/logger";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TSurveyQuota } from "@formbricks/types/quota";
 import { TResponseInput } from "@formbricks/types/responses";
-import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
+import {
+  getMonthlyOrganizationResponseCount,
+  getOrganizationByEnvironmentId,
+} from "@/lib/organization/service";
+import { sendPlanLimitsReachedEventToPosthogWeekly } from "@/lib/posthogServer";
 import { calculateTtcTotal } from "@/lib/response/utils";
 import { evaluateResponseQuotas } from "@/modules/ee/quotas/lib/evaluation-service";
 import { createResponse, createResponseWithQuotaEvaluation } from "./response";
@@ -19,13 +24,22 @@ vi.mock("@/lib/constants", () => ({
 }));
 
 vi.mock("@/lib/organization/service", () => ({
+  getMonthlyOrganizationResponseCount: vi.fn(),
   getOrganizationByEnvironmentId: vi.fn(),
 }));
 
+vi.mock("@/lib/posthogServer", () => ({
+  sendPlanLimitsReachedEventToPosthogWeekly: vi.fn(),
+}));
+
 vi.mock("@/lib/response/utils", () => ({
   calculateTtcTotal: vi.fn((ttc) => ttc),
 }));
 
+vi.mock("@/lib/telemetry", () => ({
+  captureTelemetry: vi.fn(),
+}));
+
 vi.mock("@/lib/utils/validate", () => ({
   validateInputs: vi.fn(),
 }));
@@ -124,6 +138,35 @@ describe("createResponse", () => {
     );
   });
 
+  test("should check response limits if IS_FORMBRICKS_CLOUD is true", async () => {
+    mockIsFormbricksCloud = true;
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(50);
+
+    await createResponse(mockResponseInput, prisma);
+
+    expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).not.toHaveBeenCalled();
+  });
+
+  test("should send limit reached event if IS_FORMBRICKS_CLOUD is true and limit reached", async () => {
+    mockIsFormbricksCloud = true;
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(100);
+
+    await createResponse(mockResponseInput, prisma);
+
+    expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+    expect(sendPlanLimitsReachedEventToPosthogWeekly).toHaveBeenCalledWith(environmentId, {
+      plan: "free",
+      limits: {
+        projects: null,
+        monthly: {
+          responses: 100,
+          miu: null,
+        },
+      },
+    });
+  });
+
   test("should throw ResourceNotFoundError if organization not found", async () => {
     vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(null);
     await expect(createResponse(mockResponseInput, prisma)).rejects.toThrow(ResourceNotFoundError);
@@ -143,6 +186,20 @@ describe("createResponse", () => {
     vi.mocked(prisma.response.create).mockRejectedValue(genericError);
     await expect(createResponse(mockResponseInput)).rejects.toThrow(genericError);
   });
+
+  test("should log error but not throw if sendPlanLimitsReachedEventToPosthogWeekly fails", async () => {
+    mockIsFormbricksCloud = true;
+    vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(100);
+    const posthogError = new Error("PostHog error");
+    vi.mocked(sendPlanLimitsReachedEventToPosthogWeekly).mockRejectedValue(posthogError);
+
+    await createResponse(mockResponseInput);
+
+    expect(logger.error).toHaveBeenCalledWith(
+      posthogError,
+      "Error sending plan limits reached event to Posthog"
+    );
+  });
 });
 
 describe("createResponseWithQuotaEvaluation", () => {

apps/web/app/api/v1/client/[environmentId]/responses/lib/response.ts

@@ -1,14 +1,16 @@
 import "server-only";
-import { Prisma } from "@prisma/client";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { TContactAttributes } from "@formbricks/types/contact-attribute";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TResponseWithQuotaFull } from "@formbricks/types/quota";
 import { TResponse, TResponseInput, ZResponseInput } from "@formbricks/types/responses";
 import { TTag } from "@formbricks/types/tags";
+import { handleBillingLimitsCheck } from "@/app/api/lib/utils";
 import { buildPrismaResponseData } from "@/app/api/v1/lib/utils";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
 import { calculateTtcTotal } from "@/lib/response/utils";
+import { captureTelemetry } from "@/lib/telemetry";
 import { validateInputs } from "@/lib/utils/validate";
 import { evaluateResponseQuotas } from "@/modules/ee/quotas/lib/evaluation-service";
 import { getContactByUserId } from "./contact";
@@ -76,11 +78,9 @@ export const createResponseWithQuotaEvaluation = async (
   return txResponse;
 };
 
-export const createResponse = async (
-  responseInput: TResponseInput,
-  tx: Prisma.TransactionClient
-): Promise<TResponse> => {
+export const createResponse = async (responseInput: TResponseInput, tx: any): Promise<TResponse> => {
   validateInputs([responseInput, ZResponseInput]);
+  captureTelemetry("response created");
 
   const { environmentId, userId, finished, ttc: initialTtc } = responseInput;
 
@@ -118,6 +118,8 @@ export const createResponse = async (
       tags: responsePrisma.tags.map((tagPrisma: { tag: TTag }) => tagPrisma.tag),
     };
 
+    await handleBillingLimitsCheck(environmentId, organization.id, organization.billing);
+
     return response;
   } catch (error) {
     if (error instanceof Prisma.PrismaClientKnownRequestError) {

apps/web/app/api/v1/client/[environmentId]/responses/route.ts

@@ -2,7 +2,7 @@ import { headers } from "next/headers";
 import { NextRequest } from "next/server";
 import { UAParser } from "ua-parser-js";
 import { logger } from "@formbricks/logger";
-import { ZEnvironmentId } from "@formbricks/types/environment";
+import { ZId } from "@formbricks/types/common";
 import { InvalidInputError } from "@formbricks/types/errors";
 import { TResponseWithQuotaFull } from "@formbricks/types/quota";
 import { TResponseInput, ZResponseInput } from "@formbricks/types/responses";
@@ -10,6 +10,7 @@ import { responses } from "@/app/lib/api/response";
 import { transformErrorToDetails } from "@/app/lib/api/validator";
 import { withV1ApiWrapper } from "@/app/lib/api/with-api-logging";
 import { sendToPipeline } from "@/app/lib/pipelines";
+import { capturePosthogEnvironmentEvent } from "@/lib/posthogServer";
 import { getSurvey } from "@/lib/survey/service";
 import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { createQuotaFullObject } from "@/modules/ee/quotas/lib/helpers";
@@ -50,7 +51,7 @@ export const POST = withV1ApiWrapper({
     }
 
     const { environmentId } = params;
-    const environmentIdValidation = ZEnvironmentId.safeParse(environmentId);
+    const environmentIdValidation = ZId.safeParse(environmentId);
     const responseInputValidation = ZResponseInput.safeParse({ ...responseInput, environmentId });
 
     if (!environmentIdValidation.success) {
@@ -171,6 +172,11 @@ export const POST = withV1ApiWrapper({
       });
     }
 
+    await capturePosthogEnvironmentEvent(survey.environmentId, "response created", {
+      surveyId: responseData.surveyId,
+      surveyType: survey.type,
+    });
+
     const quotaObj = createQuotaFullObject(quotaFull);
 
     const responseDataWithQuota = {

apps/web/app/api/v1/lib/utils.ts

@@ -1,4 +1,4 @@
-import { Prisma } from "@prisma/client";
+import { Prisma } from "@formbricks/database/generated/client";
 import { TContactAttributes } from "@formbricks/types/contact-attribute";
 import { TResponseInput } from "@formbricks/types/responses";
 

apps/web/app/api/v1/management/action-classes/lib/action-classes.ts

@@ -1,9 +1,9 @@
 "use server";
 
 import "server-only";
-import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { TActionClass } from "@formbricks/types/action-classes";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";

apps/web/app/api/v1/management/action-classes/route.ts

@@ -16,7 +16,7 @@ export const GET = withV1ApiWrapper({
         (permission) => permission.environmentId
       );
 
-      const actionClasses = await getActionClasses(environmentIds);
+      const actionClasses = await getActionClasses(environmentIds as string[]);
 
       return {
         response: responses.successResponse(actionClasses),

apps/web/app/api/v1/management/responses/lib/response.test.ts

@@ -1,10 +1,14 @@
-import { Organization, Prisma, Response as ResponsePrisma } from "@prisma/client";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Organization, Prisma, Response as ResponsePrisma } from "@formbricks/database/generated/client";
 import { logger } from "@formbricks/logger";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TResponse, TResponseInput } from "@formbricks/types/responses";
-import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
+import {
+  getMonthlyOrganizationResponseCount,
+  getOrganizationByEnvironmentId,
+} from "@/lib/organization/service";
+import { sendPlanLimitsReachedEventToPosthogWeekly } from "@/lib/posthogServer";
 import { getResponseContact } from "@/lib/response/service";
 import { calculateTtcTotal } from "@/lib/response/utils";
 import { validateInputs } from "@/lib/utils/validate";
@@ -92,6 +96,9 @@ const mockTransformedResponses = [mockResponse, { ...mockResponse, id: "response
 // Mock dependencies
 vi.mock("@/lib/constants", () => ({
   IS_FORMBRICKS_CLOUD: true,
+  POSTHOG_API_KEY: "mock-posthog-api-key",
+  POSTHOG_HOST: "mock-posthog-host",
+  IS_POSTHOG_CONFIGURED: true,
   ENCRYPTION_KEY: "mock-encryption-key",
   ENTERPRISE_LICENSE_KEY: "mock-enterprise-license-key",
   GITHUB_ID: "mock-github-id",
@@ -111,8 +118,10 @@ vi.mock("@/lib/constants", () => ({
   SENTRY_DSN: "mock-sentry-dsn",
 }));
 vi.mock("@/lib/organization/service");
+vi.mock("@/lib/posthogServer");
 vi.mock("@/lib/response/service");
 vi.mock("@/lib/response/utils");
+vi.mock("@/lib/telemetry");
 vi.mock("@/lib/utils/validate");
 vi.mock("@formbricks/database", () => ({
   prisma: {
@@ -153,6 +162,7 @@ describe("Response Lib Tests", () => {
       vi.mocked(mockTx.response.create).mockResolvedValue({
         ...mockResponsePrisma,
       });
+      vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(50);
 
       const response = await createResponse(mockResponseInputWithUserId, mockTx);
 
@@ -207,6 +217,68 @@ describe("Response Lib Tests", () => {
 
       await expect(createResponse(mockResponseInput, mockTx)).rejects.toThrow(genericError);
     });
+
+    describe("Cloud specific tests", () => {
+      test("should check response limit and send event if limit reached", async () => {
+        // IS_FORMBRICKS_CLOUD is true by default from the top-level mock
+        const limit = 100;
+        const mockOrgWithBilling = {
+          ...mockOrganization,
+          billing: { limits: { monthly: { responses: limit } } },
+        } as any;
+        vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrgWithBilling);
+        vi.mocked(calculateTtcTotal).mockReturnValue({ total: 10 });
+        vi.mocked(mockTx.response.create).mockResolvedValue(mockResponsePrisma);
+        vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(limit); // Limit reached
+
+        await createResponse(mockResponseInput, mockTx);
+
+        expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+        expect(sendPlanLimitsReachedEventToPosthogWeekly).toHaveBeenCalled();
+      });
+
+      test("should check response limit and not send event if limit not reached", async () => {
+        const limit = 100;
+        const mockOrgWithBilling = {
+          ...mockOrganization,
+          billing: { limits: { monthly: { responses: limit } } },
+        } as any;
+        vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrgWithBilling);
+        vi.mocked(calculateTtcTotal).mockReturnValue({ total: 10 });
+        vi.mocked(mockTx.response.create).mockResolvedValue(mockResponsePrisma);
+        vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(limit - 1); // Limit not reached
+
+        await createResponse(mockResponseInput, mockTx);
+
+        expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+        expect(sendPlanLimitsReachedEventToPosthogWeekly).not.toHaveBeenCalled();
+      });
+
+      test("should log error if sendPlanLimitsReachedEventToPosthogWeekly fails", async () => {
+        const limit = 100;
+        const mockOrgWithBilling = {
+          ...mockOrganization,
+          billing: { limits: { monthly: { responses: limit } } },
+        } as any;
+        const posthogError = new Error("Posthog error");
+        vi.mocked(getOrganizationByEnvironmentId).mockResolvedValue(mockOrgWithBilling);
+        vi.mocked(calculateTtcTotal).mockReturnValue({ total: 10 });
+        vi.mocked(mockTx.response.create).mockResolvedValue(mockResponsePrisma);
+        vi.mocked(getMonthlyOrganizationResponseCount).mockResolvedValue(limit); // Limit reached
+        vi.mocked(sendPlanLimitsReachedEventToPosthogWeekly).mockRejectedValue(posthogError);
+
+        // Expecting successful response creation despite PostHog error
+        const response = await createResponse(mockResponseInput, mockTx);
+
+        expect(getMonthlyOrganizationResponseCount).toHaveBeenCalledWith(organizationId);
+        expect(sendPlanLimitsReachedEventToPosthogWeekly).toHaveBeenCalled();
+        expect(logger.error).toHaveBeenCalledWith(
+          posthogError,
+          "Error sending plan limits reached event to Posthog"
+        );
+        expect(response).toEqual(mockResponse); // Should still return the created response
+      });
+    });
   });
 
   describe("getResponsesByEnvironmentIds", () => {

apps/web/app/api/v1/management/responses/lib/response.ts

@@ -1,19 +1,21 @@
 import "server-only";
-import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { PrismaErrorType } from "@formbricks/database/types/error";
 import { ZId, ZOptionalNumber } from "@formbricks/types/common";
 import { TContactAttributes } from "@formbricks/types/contact-attribute";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";
 import { TResponse, TResponseInput, ZResponseInput } from "@formbricks/types/responses";
 import { TTag } from "@formbricks/types/tags";
+import { handleBillingLimitsCheck } from "@/app/api/lib/utils";
 import { buildPrismaResponseData } from "@/app/api/v1/lib/utils";
 import { RESPONSES_PER_PAGE } from "@/lib/constants";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
 import { getResponseContact } from "@/lib/response/service";
 import { calculateTtcTotal } from "@/lib/response/utils";
 import { getSurvey } from "@/lib/survey/service";
+import { captureTelemetry } from "@/lib/telemetry";
 import { validateInputs } from "@/lib/utils/validate";
 import { evaluateResponseQuotas } from "@/modules/ee/quotas/lib/evaluation-service";
 import { getContactByUserId } from "./contact";
@@ -86,11 +88,11 @@ export const createResponseWithQuotaEvaluation = async (
   return txResponse;
 };
 
-export const createResponse = async (
-  responseInput: TResponseInput,
-  tx?: Prisma.TransactionClient
-): Promise<TResponse> => {
+// Use any for transaction client to avoid dist/src type mismatch in TypeScript
+// Runtime behavior is correct, this is purely a type resolution issue
+export const createResponse = async (responseInput: TResponseInput, tx?: any): Promise<TResponse> => {
   validateInputs([responseInput, ZResponseInput]);
+  captureTelemetry("response created");
 
   const { environmentId, userId, finished, ttc: initialTtc } = responseInput;
 
@@ -128,6 +130,8 @@ export const createResponse = async (
       tags: responsePrisma.tags.map((tagPrisma: { tag: TTag }) => tagPrisma.tag),
     };
 
+    await handleBillingLimitsCheck(environmentId, organization.id, organization.billing);
+
     return response;
   } catch (error) {
     if (error instanceof Prisma.PrismaClientKnownRequestError) {

apps/web/app/api/v1/management/responses/route.ts

@@ -49,7 +49,11 @@ export const GET = withV1ApiWrapper({
         const environmentIds = authentication.environmentPermissions.map(
           (permission) => permission.environmentId
         );
-        const environmentResponses = await getResponsesByEnvironmentIds(environmentIds, limit, offset);
+        const environmentResponses = await getResponsesByEnvironmentIds(
+          environmentIds as string[],
+          limit,
+          offset
+        );
         allResponses.push(...environmentResponses);
       }
       return {

apps/web/app/api/v1/management/surveys/[surveyId]/lib/surveys.test.ts

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { logger } from "@formbricks/logger";
 import { DatabaseError } from "@formbricks/types/errors";
 import { validateInputs } from "@/lib/utils/validate";

apps/web/app/api/v1/management/surveys/[surveyId]/lib/surveys.ts

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { z } from "zod";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { logger } from "@formbricks/logger";
 import { DatabaseError } from "@formbricks/types/errors";
 import { validateInputs } from "@/lib/utils/validate";

apps/web/app/api/v1/management/surveys/lib/surveys.test.ts

@@ -1,6 +1,6 @@
-import { Prisma } from "@prisma/client";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { logger } from "@formbricks/logger";
 import { DatabaseError } from "@formbricks/types/errors";
 import { TSurvey } from "@formbricks/types/surveys/types";

apps/web/app/api/v1/management/surveys/lib/surveys.ts

@@ -1,7 +1,7 @@
 import "server-only";
-import { Prisma } from "@prisma/client";
 import { cache as reactCache } from "react";
 import { prisma } from "@formbricks/database";
+import { Prisma } from "@formbricks/database/generated/client";
 import { logger } from "@formbricks/logger";
 import { ZId, ZOptionalNumber } from "@formbricks/types/common";
 import { DatabaseError } from "@formbricks/types/errors";

apps/web/app/api/v1/management/surveys/route.ts

@@ -27,7 +27,7 @@ export const GET = withV1ApiWrapper({
       const environmentIds = authentication.environmentPermissions.map(
         (permission) => permission.environmentId
       );
-      const surveys = await getSurveys(environmentIds, limit, offset);
+      const surveys = await getSurveys(environmentIds as string[], limit, offset);
 
       return {
         response: responses.successResponse(surveys),

apps/web/app/api/v1/webhooks/[webhookId]/lib/webhook.test.ts

@@ -1,7 +1,7 @@
-import { Prisma, Webhook } from "@prisma/client";
 import { cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma, Webhook } from "@formbricks/database/generated/client";
 import { DatabaseError, ResourceNotFoundError, ValidationError } from "@formbricks/types/errors";
 import { deleteWebhook, getWebhook } from "./webhook";
 

apps/web/app/api/v1/webhooks/[webhookId]/lib/webhook.ts

@@ -1,5 +1,5 @@
-import { Prisma, Webhook } from "@prisma/client";
 import { prisma } from "@formbricks/database";
+import { Prisma, Webhook } from "@formbricks/database/generated/client";
 import { PrismaErrorType } from "@formbricks/database/types/error";
 import { ZId } from "@formbricks/types/common";
 import { DatabaseError, ResourceNotFoundError } from "@formbricks/types/errors";

apps/web/app/api/v1/webhooks/lib/webhook.test.ts

@@ -1,7 +1,7 @@
-import { Prisma, WebhookSource } from "@prisma/client";
 import { cleanup } from "@testing-library/react";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { prisma } from "@formbricks/database";
+import { Prisma, WebhookSource } from "@formbricks/database/generated/client";
 import { DatabaseError, ValidationError } from "@formbricks/types/errors";
 import { createWebhook } from "@/app/api/v1/webhooks/lib/webhook";
 import { TWebhookInput } from "@/app/api/v1/webhooks/types/webhooks";