chore: remove build time env vars passing

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
Co-authored-by: Matti Nannt <mail@matthiasnannt.com>

.env.example

@@ -56,11 +56,14 @@ SMTP_PASSWORD=smtpPassword
 
 # Uncomment the variables you would like to use and customize the values.
 
+# Custom local storage path for file uploads
+#UPLOADS_DIR=
+
 ##############
 # S3 STORAGE #
 ##############
 
-# S3 Storage is required for the file uplaod in serverless environments like Vercel
+# S3 Storage is required for the file upload in serverless environments like Vercel
 S3_ACCESS_KEY=
 S3_SECRET_KEY=
 S3_REGION=

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

@@ -6,6 +6,8 @@ runs:
     - name: Checkout repo
       uses: actions/checkout@v3
 
+    - uses: ./.github/actions/dangerous-git-checkout
+
     - name: Cache Build
       uses: actions/cache@v3
       id: cache-build

.github/workflows/ecs-deployment.yml

@@ -78,9 +78,6 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
           build-args: |
-            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
-            DATABASE_URL=${{ env.DATABASE_URL }}
-            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}
             NEXT_PUBLIC_SENTRY_DSN=${{ env.NEXT_PUBLIC_SENTRY_DSN }}
 
       - name: Sign the images with GitHub OIDC Token

.github/workflows/kamal.yml

@@ -0,0 +1,118 @@
+name: Kamal Deploy
+concurrency:
+  group: deploy-to-kamal
+  cancel-in-progress: false
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  Deploy:
+    runs-on: ubuntu-latest
+    environment: production
+    env:
+      DOCKER_BUILDKIT: 1
+      IS_FORMBRICKS_CLOUD: ${{ vars.IS_FORMBRICKS_CLOUD }}
+      WEBAPP_URL: ${{ vars.WEBAPP_URL }}
+      DATABASE_URL: ${{ secrets.DATABASE_URL }}
+      NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
+      ENCRYPTION_KEY: ${{ secrets.ENCRYPTION_KEY }}
+      SHORT_URL_BASE: ${{ vars.SHORT_URL_BASE }}
+      MAIL_FROM: ${{ secrets.MAIL_FROM }}
+      SMTP_HOST: ${{ secrets.SMTP_HOST }}
+      SMTP_PORT: ${{ secrets.SMTP_PORT }}
+      SMTP_USER: ${{ secrets.SMTP_USER }}
+      SMTP_PASSWORD: ${{ secrets.SMTP_PASSWORD }}
+      PRIVACY_URL: ${{ vars.PRIVACY_URL }}
+      TERMS_URL: ${{ vars.TERMS_URL }}
+      IMPRINT_URL: ${{ vars.IMPRINT_URL }}
+      GITHUB_ID: ${{ secrets.GITHUB_ID }}
+      GITHUB_SECRET: ${{ secrets.GITHUB_SECRET }}
+      GOOGLE_CLIENT_ID: ${{ secrets.GOOGLE_CLIENT_ID }}
+      GOOGLE_CLIENT_SECRET: ${{ secrets.GOOGLE_CLIENT_SECRET }}
+      AZUREAD_CLIENT_ID: ${{ secrets.AZUREAD_CLIENT_ID }}
+      AZUREAD_CLIENT_SECRET: ${{ secrets.AZUREAD_CLIENT_SECRET }}
+      AZUREAD_TENANT_ID: ${{ secrets.AZUREAD_TENANT_ID }}
+      OIDC_CLIENT_ID: ${{ secrets.OIDC_CLIENT_ID }}
+      OIDC_CLIENT_SECRET: ${{ secrets.OIDC_CLIENT_SECRET }}
+      OIDC_ISSUER: ${{ secrets.OIDC_ISSUER }}
+      OIDC_DISPLAY_NAME: ${{ secrets.OIDC_DISPLAY_NAME }}
+      OIDC_SIGNING_ALGORITHM: ${{ secrets.OIDC_SIGNING_ALGORITHM }}
+      CRON_SECRET: ${{ secrets.CRON_SECRET }}
+      ASSET_PREFIX_URL: ${{ vars.ASSET_PREFIX_URL }}
+      NOTION_OAUTH_CLIENT_ID: ${{ secrets.NOTION_OAUTH_CLIENT_ID }}
+      NOTION_OAUTH_CLIENT_SECRET: ${{ secrets.NOTION_OAUTH_CLIENT_SECRET }}
+      STRIPE_SECRET_KEY: ${{ secrets.STRIPE_SECRET_KEY }}
+      STRIPE_WEBHOOK_SECRET: ${{ secrets.STRIPE_WEBHOOK_SECRET }}
+      GOOGLE_SHEETS_CLIENT_ID: ${{ secrets.GOOGLE_SHEETS_CLIENT_ID }}
+      GOOGLE_SHEETS_CLIENT_SECRET: ${{ secrets.GOOGLE_SHEETS_CLIENT_SECRET }}
+      GOOGLE_SHEETS_REDIRECT_URL: ${{ secrets.GOOGLE_SHEETS_REDIRECT_URL }}
+      AIRTABLE_CLIENT_ID: ${{ secrets.AIRTABLE_CLIENT_ID }}
+      ENTERPRISE_LICENSE_KEY: ${{ secrets.ENTERPRISE_LICENSE_KEY }}
+      DEFAULT_TEAM_ID: ${{ vars.DEFAULT_TEAM_ID }}
+      ONBOARDING_DISABLED: ${{ vars.ONBOARDING_DISABLED }}
+      CUSTOMER_IO_API_KEY: ${{ secrets.CUSTOMER_IO_API_KEY }}
+      CUSTOMER_IO_SITE_ID: ${{ secrets.CUSTOMER_IO_SITE_ID }}
+      NEXT_PUBLIC_POSTHOG_API_KEY: ${{ vars.NEXT_PUBLIC_POSTHOG_API_KEY }}
+      NEXT_PUBLIC_POSTHOG_API_HOST: ${{ vars.NEXT_PUBLIC_POSTHOG_API_HOST }}
+      NEXT_PUBLIC_FORMBRICKS_API_HOST: ${{ vars.NEXT_PUBLIC_FORMBRICKS_API_HOST }}
+      NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID: ${{ vars.NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID }}
+      NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID: ${{ vars.NEXT_PUBLIC_FORMBRICKS_ONBOARDING_SURVEY_ID }}
+      NEXT_PUBLIC_SENTRY_DSN: ${{ vars.NEXT_PUBLIC_SENTRY_DSN }}
+      NODE_ENV: production
+      CLOUDFLARE_EMAIL: ${{ secrets.CLOUDFLARE_EMAIL }}
+      CLOUDFLARE_DNS_API_TOKEN: ${{ secrets.CLOUDFLARE_DNS_API_TOKEN }}
+      S3_ACCESS_KEY: ${{ secrets.S3_ACCESS_KEY }}
+      S3_SECRET_KEY: ${{ secrets.S3_SECRET_KEY }}
+      S3_REGION: ${{ vars.S3_REGION }}
+      S3_BUCKET_NAME: ${{ vars.S3_BUCKET_NAME }}
+      KAMAL_REGISTRY_PASSWORD: ${{ secrets.KAMAL_REGISTRY_PASSWORD }}
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 3.3.0
+          bundler-cache: true
+
+      - name: Install dependencies
+        run: |
+          gem install kamal
+
+      - uses: webfactory/ssh-agent@v0.9.0
+        with:
+          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Create builder
+        run: docker buildx create --use --name formbricks-gh-actions-builder
+        if: steps.buildx.outputs.should_create_builder == 'true'
+
+      - name: Push env variables to Kamal
+        run: |
+          kamal() { command kamal "$@" -c kamal/deploy.yml; }
+          kamal env push
+
+      - name: Run deploy command
+        run: |
+          kamal() { command kamal "$@" -c kamal/deploy.yml; }
+          set +e
+          DEPLOY_OUTPUT=$(kamal setup 2>&1)
+          DEPLOY_EXIT_CODE=$?
+          echo "$DEPLOY_OUTPUT"
+          if [[ "$DEPLOY_OUTPUT" == *"container not unhealthy (healthy)"* ]]; then
+            echo "Deployment reported healthy container. Considering as success."
+            kamal lock release
+            exit 0
+          else
+            exit $DEPLOY_EXIT_CODE
+          fi
+        shell: bash

.github/workflows/pr.yml

@@ -1,7 +1,7 @@
 name: PR Update
 
 on:
-  pull_request_target:
+  pull_request:
     branches:
       - main
   merge_group:

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

@@ -89,10 +89,6 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
-          build-args: |
-            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
-            DATABASE_URL=${{ env.DATABASE_URL }}
-            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}
 
       # Sign the resulting Docker image digest except on PRs.
       # This will only write to the public Rekor transparency log when the Docker

.github/workflows/release-docker.yml

@@ -52,7 +52,3 @@ jobs:
           tags: |
             ${{ secrets.DOCKER_USERNAME }}/formbricks:${{ env.RELEASE_TAG }}
             ${{ secrets.DOCKER_USERNAME }}/formbricks:latest
-          build-args: |
-            NEXTAUTH_SECRET=${{ env.NEXTAUTH_SECRET }}
-            DATABASE_URL=${{ env.DATABASE_URL }}
-            ENCRYPTION_KEY=${{ env.ENCRYPTION_KEY }}

.kamal/hooks/post-deploy.sample

@@ -0,0 +1,14 @@
+#!/bin/sh
+
+# A sample post-deploy hook
+#
+# These environment variables are available:
+# KAMAL_RECORDED_AT
+# KAMAL_PERFORMER
+# KAMAL_VERSION
+# KAMAL_HOSTS
+# KAMAL_ROLE (if set)
+# KAMAL_DESTINATION (if set)
+# KAMAL_RUNTIME
+
+echo "$KAMAL_PERFORMER deployed $KAMAL_VERSION to $KAMAL_DESTINATION in $KAMAL_RUNTIME seconds"

.kamal/hooks/post-traefik-reboot.sample

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+echo "Rebooted Traefik on $KAMAL_HOSTS"

.kamal/hooks/pre-build.sample

@@ -0,0 +1,51 @@
+#!/bin/sh
+
+# A sample pre-build hook
+#
+# Checks:
+# 1. We have a clean checkout
+# 2. A remote is configured
+# 3. The branch has been pushed to the remote
+# 4. The version we are deploying matches the remote
+#
+# These environment variables are available:
+# KAMAL_RECORDED_AT
+# KAMAL_PERFORMER
+# KAMAL_VERSION
+# KAMAL_HOSTS
+# KAMAL_ROLE (if set)
+# KAMAL_DESTINATION (if set)
+
+if [ -n "$(git status --porcelain)" ]; then
+  echo "Git checkout is not clean, aborting..." >&2
+  git status --porcelain >&2
+  exit 1
+fi
+
+first_remote=$(git remote)
+
+if [ -z "$first_remote" ]; then
+  echo "No git remote set, aborting..." >&2
+  exit 1
+fi
+
+current_branch=$(git branch --show-current)
+
+if [ -z "$current_branch" ]; then
+  echo "Not on a git branch, aborting..." >&2
+  exit 1
+fi
+
+remote_head=$(git ls-remote $first_remote --tags $current_branch | cut -f1)
+
+if [ -z "$remote_head" ]; then
+  echo "Branch not pushed to remote, aborting..." >&2
+  exit 1
+fi
+
+if [ "$KAMAL_VERSION" != "$remote_head" ]; then
+  echo "Version ($KAMAL_VERSION) does not match remote HEAD ($remote_head), aborting..." >&2
+  exit 1
+fi
+
+exit 0

.kamal/hooks/pre-connect.sample

@@ -0,0 +1,47 @@
+#!/usr/bin/env ruby
+
+# A sample pre-connect check
+#
+# Warms DNS before connecting to hosts in parallel
+#
+# These environment variables are available:
+# KAMAL_RECORDED_AT
+# KAMAL_PERFORMER
+# KAMAL_VERSION
+# KAMAL_HOSTS
+# KAMAL_ROLE (if set)
+# KAMAL_DESTINATION (if set)
+# KAMAL_RUNTIME
+
+hosts = ENV["KAMAL_HOSTS"].split(",")
+results = nil
+max = 3
+
+elapsed = Benchmark.realtime do
+  results = hosts.map do |host|
+    Thread.new do
+      tries = 1
+
+      begin
+        Socket.getaddrinfo(host, 0, Socket::AF_UNSPEC, Socket::SOCK_STREAM, nil, Socket::AI_CANONNAME)
+      rescue SocketError
+        if tries < max
+          puts "Retrying DNS warmup: #{host}"
+          tries += 1
+          sleep rand
+          retry
+        else
+          puts "DNS warmup failed: #{host}"
+          host
+        end
+      end
+
+      tries
+    end
+  end.map(&:value)
+end
+
+retries = results.sum - hosts.size
+nopes = results.count { |r| r == max }
+
+puts "Prewarmed %d DNS lookups in %.2f sec: %d retries, %d failures" % [ hosts.size, elapsed, retries, nopes ]

.kamal/hooks/pre-deploy.sample

@@ -0,0 +1,109 @@
+#!/usr/bin/env ruby
+
+# A sample pre-deploy hook
+#
+# Checks the Github status of the build, waiting for a pending build to complete for up to 720 seconds.
+#
+# Fails unless the combined status is "success"
+#
+# These environment variables are available:
+# KAMAL_RECORDED_AT
+# KAMAL_PERFORMER
+# KAMAL_VERSION
+# KAMAL_HOSTS
+# KAMAL_COMMAND
+# KAMAL_SUBCOMMAND
+# KAMAL_ROLE (if set)
+# KAMAL_DESTINATION (if set)
+
+# Only check the build status for production deployments
+if ENV["KAMAL_COMMAND"] == "rollback" || ENV["KAMAL_DESTINATION"] != "production"
+  exit 0
+end
+
+require "bundler/inline"
+
+# true = install gems so this is fast on repeat invocations
+gemfile(true, quiet: true) do
+  source "https://rubygems.org"
+
+  gem "octokit"
+  gem "faraday-retry"
+end
+
+MAX_ATTEMPTS = 72
+ATTEMPTS_GAP = 10
+
+def exit_with_error(message)
+  $stderr.puts message
+  exit 1
+end
+
+class GithubStatusChecks
+  attr_reader :remote_url, :git_sha, :github_client, :combined_status
+
+  def initialize
+    @remote_url = `git config --get remote.origin.url`.strip.delete_prefix("https://github.com/")
+    @git_sha = `git rev-parse HEAD`.strip
+    @github_client = Octokit::Client.new(access_token: ENV["GITHUB_TOKEN"])
+    refresh!
+  end
+
+  def refresh!
+    @combined_status = github_client.combined_status(remote_url, git_sha)
+  end
+
+  def state
+    combined_status[:state]
+  end
+
+  def first_status_url
+    first_status = combined_status[:statuses].find { |status| status[:state] == state }
+    first_status && first_status[:target_url]
+  end
+
+  def complete_count
+    combined_status[:statuses].count { |status| status[:state] != "pending"}
+  end
+
+  def total_count
+    combined_status[:statuses].count
+  end
+
+  def current_status
+    if total_count > 0
+      "Completed #{complete_count}/#{total_count} checks, see #{first_status_url} ..."
+    else
+      "Build not started..."
+    end
+  end
+end
+
+
+$stdout.sync = true
+
+puts "Checking build status..."
+attempts = 0
+checks = GithubStatusChecks.new
+
+begin
+  loop do
+    case checks.state
+    when "success"
+      puts "Checks passed, see #{checks.first_status_url}"
+      exit 0
+    when "failure"
+      exit_with_error "Checks failed, see #{checks.first_status_url}"
+    when "pending"
+      attempts += 1
+    end
+
+    exit_with_error "Checks are still pending, gave up after #{MAX_ATTEMPTS * ATTEMPTS_GAP} seconds" if attempts == MAX_ATTEMPTS
+
+    puts checks.current_status
+    sleep(ATTEMPTS_GAP)
+    checks.refresh!
+  end
+rescue Octokit::NotFound
+  exit_with_error "Build status could not be found"
+end

.kamal/hooks/pre-traefik-reboot.sample

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+echo "Rebooting Traefik on $KAMAL_HOSTS..."

apps/demo/components/Sidebar.tsx

@@ -3,25 +3,25 @@ import {
   ClockIcon,
   CogIcon,
   CreditCardIcon,
-  DocumentChartBarIcon,
+  FileBarChartIcon,
+  HelpCircleIcon,
   HomeIcon,
-  QuestionMarkCircleIcon,
   ScaleIcon,
   ShieldCheckIcon,
-  UserGroupIcon,
-} from "@heroicons/react/24/outline";
+  UsersIcon,
+} from "lucide-react";
 
 const navigation = [
   { name: "Home", href: "#", icon: HomeIcon, current: true },
   { name: "History", href: "#", icon: ClockIcon, current: false },
   { name: "Balances", href: "#", icon: ScaleIcon, current: false },
   { name: "Cards", href: "#", icon: CreditCardIcon, current: false },
-  { name: "Recipients", href: "#", icon: UserGroupIcon, current: false },
-  { name: "Reports", href: "#", icon: DocumentChartBarIcon, current: false },
+  { name: "Recipients", href: "#", icon: UsersIcon, current: false },
+  { name: "Reports", href: "#", icon: FileBarChartIcon, current: false },
 ];
 const secondaryNavigation = [
   { name: "Settings", href: "#", icon: CogIcon },
-  { name: "Help", href: "#", icon: QuestionMarkCircleIcon },
+  { name: "Help", href: "#", icon: HelpCircleIcon },
   { name: "Privacy", href: "#", icon: ShieldCheckIcon },
 ];
 

apps/demo/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@formbricks/js": "workspace:*",
-    "@heroicons/react": "^2.1.1",
-    "next": "14.1.1",
+    "lucide-react": "^0.356.0",
+    "next": "14.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },

apps/formbricks-com/app/docs/getting-started/framework-guides/page.mdx

@@ -99,7 +99,6 @@ if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    debug: true, // remove when in production
   });
 }
 
@@ -182,7 +181,6 @@ useEffect(() => {
 formbricks.init({
 environmentId: "<environment-id>",
 apiHost: "<api-host>",
-debug: true, // remove when in production
 });
 }, []);
 
@@ -232,7 +230,6 @@ if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "<environment-id>",
     apiHost: "<api-host>",
-    debug: true, // remove when in production
   });
 }
 
@@ -269,14 +266,6 @@ Refer to our [Example NextJS Pages Directory project](https://github.com/formbri
   </Property>
 </Properties>
 
-### Optional Customizations to be Made
-
-<Properties>
-  <Property name="debug" type="boolean">
-    Whether you want to see debug messages from Formbricks on your client-side console.
-  </Property>
-</Properties>
-
 ### What are we doing here?
 
 First we need to initialize the Formbricks SDK, making sure it only runs on the client side.
@@ -358,14 +347,6 @@ router.afterEach((to, from) => {
   </Property>
 </Properties>
 
-### Optional Customizations to be Made
-
-<Properties>
-  <Property name="debug" type="boolean">
-    Whether you want to see debug messages from Formbricks on your client-side console.
-  </Property>
-</Properties>
-
 Refer to our [Example VueJs project](https://github.com/formbricks/examples/tree/main/vuejs) for more help! Now visit the [Validate your Setup](#validate-your-setup) section to verify your setup!
 
 ## Validate your setup

apps/formbricks-com/app/docs/self-hosting/external-auth-providers/page.mdx

@@ -76,6 +76,27 @@ GOOGLE_CLIENT_SECRET=your-client-secret-here
    - Navigate to your Docker setup directory where your `docker-compose.yml` file is located.
    - Run the following command to bring down your current Docker containers and then bring them back up with the updated environment configuration:
 
+## Azure SSO Integration
+
+Have an Azure Active Directory (AAD) instance? Integrate it with your Formbricks instance to allow users to log in using their existing AAD credentials. This guide will walk you through the process of setting up Azure SSO for your Formbricks instance.
+
+### Requirements
+
+- An Azure Active Directory (AAD) instance.
+- A Formbricks instance running and accessible.
+
+### Steps
+
+1. Create a new Tenant in Azure Active Directory as per their [official documentation](https://learn.microsoft.com/en-us/entra/fundamentals/create-new-tenant).
+2. Add Users & Groups to your AAD instance.
+3. Now we need to fill the below environment variables in our Formbricks instance so get them from your AD configuration:
+   - `AZUREAD_CLIENT_ID`
+   - `AZUREAD_CLIENT_SECRET`
+   - `AZUREAD_TENANT_ID`
+4. Update these environment variables in your `docker-compose.yml` or pass it like your other environment variables to the Formbricks container.
+5. Restart your Formbricks instance.
+6. You're all set! Users can now signup & log in using their AAD credentials.
+
 ## OpenID Integration
 
 Integrating your own OIDC (OpenID Connect) instance with your Formbricks instance allows users to log in using their OIDC credentials, ensuring a secure and streamlined user experience. Please follow the steps below to set up OIDC for your Formbricks instance.
@@ -115,52 +136,53 @@ OIDC_SIGNING_ALGORITHM=HS256
 
 These variables can be provided at the runtime i.e. in your docker-compose file.
 
-| Variable                    | Description                                                                                  | Required                                                | Default                 |
-| --------------------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------------------- |
-| WEBAPP_URL                  | Base URL of the site.                                                                        | required                                                | `http://localhost:3000` |
-| DATABASE_URL                | Database URL with credentials.                                                               | required                                                |                         |
-| NEXTAUTH_SECRET             | Secret for NextAuth, used for session signing and encryption.                                | required                                                | (Generated by the user) |
-| ENCRYPTION_KEY              | Secret for used by Formbricks for data encryption                                            | required                                                | (Generated by the user) |
-| NEXTAUTH_URL                | Location of the auth server. By default, this is the Formbricks docker instance itself.      | required                                                | `http://localhost:3000` |
-| S3_ACCESS_KEY               | Access key for S3.                                                                           | optional (required if S3 is enabled)                    |                         |
-| S3_SECRET_KEY               | Secret key for S3.                                                                           | optional (required if S3 is enabled)                    |                         |
-| S3_REGION                   | Region for S3.                                                                               | optional (required if S3 is enabled)                    |                         |
-| S3_BUCKET                   | Bucket name for S3.                                                                          | optional (required if S3 is enabled)                    |                         |
-| S3_ENDPOINT                 | Endpoint for S3.                                                                             | optional (required if S3 is enabled)                    |                         |
-| PRIVACY_URL                 | URL for privacy policy.                                                                      | optional                                                |                         |
-| TERMS_URL                   | URL for terms of service.                                                                    | optional                                                |                         |
-| IMPRINT_URL                 | URL for imprint.                                                                             | optional                                                |                         |
-| SIGNUP_DISABLED             | Disables the ability for new users to create an account if set to `1`.                       | optional                                                |                         |
-| EMAIL_AUTH_DISABLED         | Disables the ability for users to signup or login via email and password if set to `1`.      | optional                                                |                         |
-| PASSWORD_RESET_DISABLED     | Disables password reset functionality if set to `1`.                                         | optional                                                |                         |
-| EMAIL_VERIFICATION_DISABLED | Disables email verification if set to `1`.                                                   | optional                                                |                         |
-| RATE_LIMITING_DISABLED      | Disables rate limiting if set to `1`.                                                        | optional                                                |                         |
-| INVITE_DISABLED             | Disables the ability for invited users to create an account if set to `1`.                   | optional                                                |                         |
-| MAIL_FROM                   | Email address to send emails from.                                                           | optional (required if email services are to be enabled) |                         |
-| SMTP_HOST                   | Host URL of your SMTP server.                                                                | optional (required if email services are to be enabled) |                         |
-| SMTP_PORT                   | Host Port of your SMTP server.                                                               | optional (required if email services are to be enabled) |                         |
-| SMTP_USER                   | Username for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                         |
-| SMTP_PASSWORD               | Password for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                         |
-| SMTP_SECURE_ENABLED         | SMTP secure connection. For using TLS, set to `1` else to `0`.                               | optional (required if email services are to be enabled) |                         |
-| GITHUB_ID                   | Client ID for GitHub.                                                                        | optional (required if GitHub auth is enabled)           |                         |
-| GITHUB_SECRET               | Secret for GitHub.                                                                           | optional (required if GitHub auth is enabled)           |                         |
-| GOOGLE_CLIENT_ID            | Client ID for Google.                                                                        | optional (required if Google auth is enabled)           |                         |
-| GOOGLE_CLIENT_SECRET        | Secret for Google.                                                                           | optional (required if Google auth is enabled)           |                         |
-| CRON_SECRET                 | API Secret for running cron jobs.                                                            | optional                                                |                         |
-| STRIPE_SECRET_KEY           | Secret key for Stripe integration.                                                           | optional                                                |                         |
-| STRIPE_WEBHOOK_SECRET       | Webhook secret for Stripe integration.                                                       | optional                                                |                         |
-| TELEMETRY_DISABLED          | Disables telemetry if set to `1`.                                                            | optional                                                |                         |
-| INSTANCE_ID                 | Instance ID for Formbricks Cloud to be sent to Telemetry.                                    | optional                                                |                         |
-| INTERNAL_SECRET             | Internal Secret (Currently we overwrite the value with a random value).                      | optional                                                |                         |
-| DEFAULT_BRAND_COLOR         | Default brand color for your app (Can be overwritten from the UI as well).                   | optional                                                | `#64748b`               |
-| DEFAULT_TEAM_ID             | Automatically assign new users to a specific team when joining                               | optional                                                |                         |
-| DEFAULT_TEAM_ROLE           | Role of the user in the default team.                                                        | optional                                                | `admin`                 |
-| ONBOARDING_DISABLED         | Disables onboarding for new users if set to `1`                                              | optional                                                |                         |
-| OIDC_DISPLAY_NAME           | Display name for Custom OpenID Connect Provider                                              | optional                                                |                         |
-| OIDC_CLIENT_ID              | Client ID for Custom OpenID Connect Provider                                                 | optional (required if OIDC auth is enabled)             |                         |
-| OIDC_CLIENT_SECRET          | Secret for Custom OpenID Connect Provider                                                    | optional (required if OIDC auth is enabled)             |                         |
-| OIDC_ISSUER                 | Issuer URL for Custom OpenID Connect Provider (should have `.well-known` configured at this) | optional (required if OIDC auth is enabled)             |                         |
-| OIDC_SIGNING_ALGORITHM      | Signing Algorithm for Custom OpenID Connect Provider                                         | optional                                                | `RS256`                 | 
+| Variable                    | Description                                                                                  | Required                                                | Default                   |
+|-----------------------------|----------------------------------------------------------------------------------------------|---------------------------------------------------------|---------------------------|
+| WEBAPP_URL                  | Base URL of the site.                                                                        | required                                                | `http://localhost:3000`   |
+| DATABASE_URL                | Database URL with credentials.                                                               | required                                                |                           |
+| NEXTAUTH_SECRET             | Secret for NextAuth, used for session signing and encryption.                                | required                                                | (Generated by the user)   |
+| ENCRYPTION_KEY              | Secret for used by Formbricks for data encryption                                            | required                                                | (Generated by the user)   |
+| NEXTAUTH_URL                | Location of the auth server. By default, this is the Formbricks docker instance itself.      | required                                                | `http://localhost:3000`   |
+| UPLOADS_DIR                 | Local directory for storing uploads.                                                         | optional                                                | `./uploads`               |
+| S3_ACCESS_KEY               | Access key for S3.                                                                           | optional                                                | (resolved by the AWS SDK) |
+| S3_SECRET_KEY               | Secret key for S3.                                                                           | optional                                                | (resolved by the AWS SDK) |
+| S3_REGION                   | Region for S3.                                                                               | optional                                                | (resolved by the AWS SDK) |
+| S3_BUCKET                   | Bucket name for S3.                                                                          | optional (required if S3 is enabled)                    |                           |
+| S3_ENDPOINT                 | Endpoint for S3.                                                                             | optional                                                | (resolved by the AWS SDK) |
+| PRIVACY_URL                 | URL for privacy policy.                                                                      | optional                                                |                           |
+| TERMS_URL                   | URL for terms of service.                                                                    | optional                                                |                           |
+| IMPRINT_URL                 | URL for imprint.                                                                             | optional                                                |                           |
+| SIGNUP_DISABLED             | Disables the ability for new users to create an account if set to `1`.                       | optional                                                |                           |
+| EMAIL_AUTH_DISABLED         | Disables the ability for users to signup or login via email and password if set to `1`.      | optional                                                |                           |
+| PASSWORD_RESET_DISABLED     | Disables password reset functionality if set to `1`.                                         | optional                                                |                           |
+| EMAIL_VERIFICATION_DISABLED | Disables email verification if set to `1`.                                                   | optional                                                |                           |
+| RATE_LIMITING_DISABLED      | Disables rate limiting if set to `1`.                                                        | optional                                                |                           |
+| INVITE_DISABLED             | Disables the ability for invited users to create an account if set to `1`.                   | optional                                                |                           |
+| MAIL_FROM                   | Email address to send emails from.                                                           | optional (required if email services are to be enabled) |                           |
+| SMTP_HOST                   | Host URL of your SMTP server.                                                                | optional (required if email services are to be enabled) |                           |
+| SMTP_PORT                   | Host Port of your SMTP server.                                                               | optional (required if email services are to be enabled) |                           |
+| SMTP_USER                   | Username for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                           |
+| SMTP_PASSWORD               | Password for your SMTP Server.                                                               | optional (required if email services are to be enabled) |                           |
+| SMTP_SECURE_ENABLED         | SMTP secure connection. For using TLS, set to `1` else to `0`.                               | optional (required if email services are to be enabled) |                           |
+| GITHUB_ID                   | Client ID for GitHub.                                                                        | optional (required if GitHub auth is enabled)           |                           |
+| GITHUB_SECRET               | Secret for GitHub.                                                                           | optional (required if GitHub auth is enabled)           |                           |
+| GOOGLE_CLIENT_ID            | Client ID for Google.                                                                        | optional (required if Google auth is enabled)           |                           |
+| GOOGLE_CLIENT_SECRET        | Secret for Google.                                                                           | optional (required if Google auth is enabled)           |                           |
+| CRON_SECRET                 | API Secret for running cron jobs.                                                            | optional                                                |                           |
+| STRIPE_SECRET_KEY           | Secret key for Stripe integration.                                                           | optional                                                |                           |
+| STRIPE_WEBHOOK_SECRET       | Webhook secret for Stripe integration.                                                       | optional                                                |                           |
+| TELEMETRY_DISABLED          | Disables telemetry if set to `1`.                                                            | optional                                                |                           |
+| INSTANCE_ID                 | Instance ID for Formbricks Cloud to be sent to Telemetry.                                    | optional                                                |                           |
+| INTERNAL_SECRET             | Internal Secret (Currently we overwrite the value with a random value).                      | optional                                                |                           |
+| DEFAULT_BRAND_COLOR         | Default brand color for your app (Can be overwritten from the UI as well).                   | optional                                                | `#64748b`                 |
+| DEFAULT_TEAM_ID             | Automatically assign new users to a specific team when joining                               | optional                                                |                           |
+| DEFAULT_TEAM_ROLE           | Role of the user in the default team.                                                        | optional                                                | `admin`                   |
+| ONBOARDING_DISABLED         | Disables onboarding for new users if set to `1`                                              | optional                                                |                           |
+| OIDC_DISPLAY_NAME           | Display name for Custom OpenID Connect Provider                                              | optional                                                |                           |
+| OIDC_CLIENT_ID              | Client ID for Custom OpenID Connect Provider                                                 | optional (required if OIDC auth is enabled)             |                           |
+| OIDC_CLIENT_SECRET          | Secret for Custom OpenID Connect Provider                                                    | optional (required if OIDC auth is enabled)             |                           |
+| OIDC_ISSUER                 | Issuer URL for Custom OpenID Connect Provider (should have `.well-known` configured at this) | optional (required if OIDC auth is enabled)             |                           |
+| OIDC_SIGNING_ALGORITHM      | Signing Algorithm for Custom OpenID Connect Provider                                         | optional                                                | `RS256`                   |
 
 ## Build-time Variables
 

apps/formbricks-com/components/dummyUI/AddEventDummy.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon, TrashIcon } from "@heroicons/react/24/solid";
+import { PlusIcon, TrashIcon } from "lucide-react";
 import { useState } from "react";
 
 import { Button } from "@formbricks/ui/Button";

apps/formbricks-com/components/dummyUI/AddNoCodeEventModalDummy.tsx

@@ -1,4 +1,4 @@
-import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon } from "lucide-react";
 
 import { Button } from "@formbricks/ui/Button";
 import { Input } from "@formbricks/ui/Input";
@@ -20,7 +20,7 @@ export const AddNoCodeEventModalDummy: React.FC<EventDetailModalProps> = ({ open
           <div className="p-4 sm:p-6">
             <div className="flex items-center space-x-2">
               <div className="h-6 w-6 text-slate-500">
-                <CursorArrowRaysIcon />
+                <MousePointerClickIcon className="h-5 w-5" />
               </div>
               <div>
                 <div className="text-lg font-medium text-slate-700 dark:text-slate-300">Add Action</div>

apps/formbricks-com/components/home/Hero.tsx

@@ -8,7 +8,7 @@ import NILogoLight from "@/images/clients/niLogoWhite.svg";
 import OptimoleLogo from "@/images/clients/optimole-logo.svg";
 import ThemeisleLogo from "@/images/clients/themeisle-logo.webp";
 import AnimationFallback from "@/public/animations/opensource-xm-platform-formbricks-fallback.png";
-import { ShieldCheckIcon, StarIcon } from "@heroicons/react/24/outline";
+import { ShieldCheckIcon, StarIcon } from "lucide-react";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
 import { useRouter } from "next/router";

apps/formbricks-com/components/home/ScrollToTop.tsx

@@ -1,5 +1,5 @@
-import { ArrowUpIcon } from "@heroicons/react/24/solid";
 import throttle from "lodash/throttle";
+import { ArrowUpIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
 import { Button } from "@formbricks/ui/Button";

apps/formbricks-com/components/home/Steps.tsx

@@ -1,7 +1,7 @@
 import DemoPreview from "@/components/dummyUI/DemoPreview";
 import DashboardMockupDark from "@/images/dashboard-mockup-dark.png";
 import DashboardMockup from "@/images/dashboard-mockup.png";
-import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon } from "lucide-react";
 import Image from "next/image";
 import { useState } from "react";
 
@@ -48,7 +48,7 @@ export const Steps: React.FC = () => {
             <div className="order-last w-full rounded-lg bg-slate-100 p-4 sm:py-8 md:order-first dark:bg-slate-800">
               <div className="flex h-40 items-center justify-center">
                 <Button variant="primary">
-                  <CursorArrowRaysIcon className="mr-2 h-5 w-5 text-white" />
+                  <MousePointerClickIcon className="mr-2 h-5 w-5 text-white" />
                   Add Action
                 </Button>
               </div>

apps/formbricks-com/components/shared/APILayout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { useState } from "react";
 
 interface APICallProps {

apps/formbricks-com/components/shared/Header.tsx

@@ -1,8 +1,8 @@
 import GitHubMarkWhite from "@/images/github-mark-white.svg";
 import GitHubMarkDark from "@/images/github-mark.svg";
 import { Popover, Transition } from "@headlessui/react";
-import { Bars3Icon, ChevronDownIcon, ChevronRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
+import { ChevronDownIcon, ChevronRightIcon, MenuIcon, XIcon } from "lucide-react";
 import { usePlausible } from "next-plausible";
 import Image from "next/image";
 import Link from "next/link";
@@ -136,7 +136,7 @@ export default function Header() {
         <div className="-my-2 -mr-2 md:hidden">
           <Popover.Button className="inline-flex items-center justify-center rounded-md bg-slate-100 p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
             <span className="sr-only">Open menu</span>
-            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+            <MenuIcon className="h-6 w-6" aria-hidden="true" />
           </Popover.Button>
         </div>
         <Popover.Group as="nav" className="hidden space-x-6 md:flex lg:space-x-10">
@@ -356,7 +356,7 @@ export default function Header() {
                 <div className="-mr-2">
                   <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
                     <span className="sr-only">Close menu</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                    <XIcon className="h-6 w-6" aria-hidden="true" />
                   </Popover.Button>
                 </div>
               </div>

apps/formbricks-com/components/shared/MdxTryItCTA.tsx

@@ -1,4 +1,4 @@
-import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { CopyIcon } from "lucide-react";
 import { useRouter } from "next/router";
 
 import { Button } from "@formbricks/ui/Button";
@@ -28,7 +28,7 @@ export default function HeadingCentered() {
         <div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-300 px-8 text-slate-700 dark:bg-slate-800 dark:text-slate-200 ">
           <p>npm install @formbricks/react</p>
           <button onClick={() => navigator.clipboard.writeText("npm install @formbricks/react")}>
-            <DocumentDuplicateIcon className="h-8 w-8" />
+            <CopyIcon className="h-8 w-8" />
           </button>
         </div>
       </div>

apps/formbricks-com/components/shared/PricingTable.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { CheckIcon, XIcon } from "lucide-react";
 
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 
@@ -54,13 +54,9 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
                   </Tooltip>
                 </TooltipProvider>
               ) : feature.free ? (
-                <div className="h-6 w-6 rounded-full border border-green-300 bg-green-100 p-0.5 dark:border-green-600 dark:bg-green-900">
-                  <CheckIcon className=" text-green-500 dark:text-green-300" />
-                </div>
+                <CheckIcon className=" rounded-full border border-green-300 bg-green-100 p-0.5 text-green-500 dark:border-green-600 dark:bg-green-900 dark:text-green-300" />
               ) : (
-                <div className="h-6 w-6 rounded-full border border-red-300 bg-red-100 p-0.5 dark:border-red-500 dark:bg-red-300">
-                  <XMarkIcon className="text-red-500 dark:text-red-600" />
-                </div>
+                <XIcon className="rounded-full border border-red-300 bg-red-100 p-0.5 text-red-500 dark:border-red-500 dark:bg-red-300 dark:text-red-600" />
               )}
             </div>
             <div className="flex w-1/3 items-center justify-center text-center text-sm text-slate-800 dark:text-slate-100">
@@ -78,13 +74,9 @@ export const PricingTable = ({ leadRow, pricing, endRow }) => {
                   </Tooltip>
                 </TooltipProvider>
               ) : feature.paid ? (
-                <div className="h-6 w-6 rounded-full border border-green-300 bg-green-100 p-0.5 dark:border-green-600 dark:bg-green-900">
-                  <CheckIcon className="text-green-500 dark:text-green-300" />
-                </div>
+                <CheckIcon className=" rounded-full border border-green-300 bg-green-100 p-0.5 text-green-500 dark:border-green-600 dark:bg-green-900 dark:text-green-300" />
               ) : (
-                <div className="h-6 w-6 rounded-full border border-red-300 bg-red-100 p-0.5 dark:border-red-600 dark:bg-red-900">
-                  <XMarkIcon className="text-red-500 dark:text-red-600" />
-                </div>
+                <XIcon className="rounded-full border border-red-300 bg-red-100 p-0.5 text-red-500 dark:border-red-500 dark:bg-red-300 dark:text-red-600" />
               )}
             </div>
           </div>

apps/formbricks-com/components/shared/SlideInBanner.tsx

@@ -1,5 +1,5 @@
 import LFGLuigi from "@/images/blog/lfg-luigi-200px.webp";
-import { XMarkIcon } from "@heroicons/react/24/solid";
+import { XIcon } from "lucide-react";
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
 
@@ -70,7 +70,7 @@ const SlideInBanner: React.FC<Props> = ({ delay = 5000, scrollPercentage = 10, U
             setTimeout(() => setIsDismissed(true), 500);
           }}
           className="rounded-full p-2 hover:bg-slate-600 hover:bg-opacity-30">
-          <XMarkIcon className="h-6 w-6" />
+          <XIcon className="h-6 w-6" />
         </button>
       </div>
     </div>

apps/formbricks-com/components/shared/TryItCTA.tsx

@@ -1,4 +1,4 @@
-import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { CopyIcon } from "lucide-react";
 import { useRouter } from "next/router";
 
 import { Button } from "@formbricks/ui/Button";
@@ -30,7 +30,7 @@ export default function HeadingCentered() {
         <div className="flex h-20 w-full items-center justify-between rounded-lg bg-slate-800 px-8 text-slate-100 ">
           <p>npm install @formbricks/react</p>
           <button onClick={() => navigator.clipboard.writeText("npm install @formbricks/react")}>
-            <DocumentDuplicateIcon className="h-8 w-8" />
+            <CopyIcon className="h-8 w-8" />
           </button>
         </div>
       </div>

apps/formbricks-com/components/shared/WhyFormbricks.tsx

@@ -1,42 +1,35 @@
-import {
-  CommandLineIcon,
-  CubeTransparentIcon,
-  SquaresPlusIcon,
-  SwatchIcon,
-  UserGroupIcon,
-  UsersIcon,
-} from "@heroicons/react/24/outline";
+import { BlocksIcon, BoxIcon, LockIcon, SwatchBookIcon, TerminalIcon, UsersIcon } from "lucide-react";
 
 const features = [
   {
     name: "Futureproof",
     description: "Form needs change. With Formbricks you’ll avoid island solutions right from the start.",
-    icon: CubeTransparentIcon,
+    icon: BoxIcon,
   },
   {
     name: "Privacy by design",
     description: "Self-host the entire product and fly through privacy compliance reviews.",
-    icon: UsersIcon,
+    icon: LockIcon,
   },
   {
     name: "Community driven",
     description: "We're building for you. If you need something specific, we’re happy to build it!",
-    icon: UserGroupIcon,
+    icon: UsersIcon,
   },
   {
     name: "Great DX",
     description: "We love a solid developer experience. We felt your pain and do our best to avoid it.",
-    icon: CommandLineIcon,
+    icon: TerminalIcon,
   },
   {
     name: "Customizable",
     description: "We have to build opinionated. If it doesn't suit your need, just change it up.",
-    icon: SwatchIcon,
+    icon: SwatchBookIcon,
   },
   {
     name: "Extendable",
     description: "Even though we try, we cannot build every single integration. With Formbricks, you can.",
-    icon: SquaresPlusIcon,
+    icon: BlocksIcon,
   },
 ];
 

apps/formbricks-com/package.json

@@ -13,14 +13,14 @@
   "browserslist": "defaults, not ie <= 11",
   "dependencies": {
     "@algolia/autocomplete-core": "^1.13.0",
-    "@calcom/embed-react": "^1.3.0",
+    "@calcom/embed-react": "^1.3.2",
     "@docsearch/react": "^3.5.2",
     "@formbricks/lib": "workspace:*",
     "@formbricks/types": "workspace:*",
     "@formbricks/ui": "workspace:*",
     "@headlessui/react": "^1.7.17",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@heroicons/react": "^2.1.1",
+    "lucide-react": "^0.344.0",
     "@mapbox/rehype-prism": "^0.9.0",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",

apps/formbricks-com/pages/community/HeaderTribe.tsx

@@ -1,5 +1,5 @@
 import footerLogoDark from "@/images/logo/footerlogo-dark.svg";
-import { Bars3Icon } from "@heroicons/react/24/solid";
+import { MenuIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
@@ -50,7 +50,7 @@ export default function HeaderLight() {
         <Popover open={mobileNavMenuOpen} onOpenChange={setMobileNavMenuOpen}>
           <PopoverTrigger onClick={() => setMobileNavMenuOpen(!mobileNavMenuOpen)}>
             <span>
-              <Bars3Icon className="h-8 w-8 rounded-md bg-slate-700 p-1 text-slate-200" />
+              <MenuIcon className="h-8 w-8 rounded-md bg-slate-700 p-1 text-slate-200" />
             </span>
           </PopoverTrigger>
           <PopoverContent className="border-slate-600 bg-slate-700 shadow">

apps/formbricks-com/pages/community/Roadmap.tsx

@@ -1,4 +1,4 @@
-import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { ChevronDownIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { FaGithub } from "react-icons/fa6";

apps/storybook/package.json

@@ -17,19 +17,19 @@
   },
   "devDependencies": {
     "@formbricks/tsconfig": "workspace:*",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-vite": "^7.6.7",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-onboarding": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/react": "^8.0.0",
+    "@storybook/react-vite": "^8.0.0",
     "@storybook/testing-library": "^0.2.2",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "esbuild": "^0.19.11",
-    "tsup": "^8.0.1",
-    "vite": "^5.0.12"
+    "esbuild": "^0.20.1",
+    "tsup": "^8.0.2",
+    "vite": "^5.1.6"
   }
 }

apps/web/.gitignore

@@ -42,4 +42,5 @@ next-env.d.ts
 token.json
 
 # Local Uploads
-uploads/
+uploads/
+certificates

apps/web/Dockerfile

@@ -23,21 +23,11 @@ RUN corepack enable && corepack prepare pnpm@latest --activate
 # Install necessary build tools and compilers
 RUN apk update && apk add --no-cache g++ cmake make gcc python3 openssl-dev jq
 
-# Install Supercronic (cron for containers without super user privileges)
-RUN apk add --no-cache curl \
-    && curl -fsSLo /tmp/supercronic \
-       "https://github.com/aptible/supercronic/releases/download/v0.2.27/supercronic-linux-amd64" \
-    && chmod +x /tmp/supercronic
 
-# Set environment variables
-ARG DATABASE_URL
-ENV DATABASE_URL=$DATABASE_URL
-
-ARG NEXTAUTH_SECRET
-ENV NEXTAUTH_SECRET=$NEXTAUTH_SECRET
-
-ARG ENCRYPTION_KEY
-ENV ENCRYPTION_KEY=$ENCRYPTION_KEY
+# Set hardcoded environment variables
+ENV DATABASE_URL="postgresql://placeholder:for@build:5432/gets_overwritten_at_runtime?schema=public"
+ENV NEXTAUTH_SECRET="placeholder_for_next_auth_of_64_chars_get_overwritten_at_runtime"
+ENV ENCRYPTION_KEY="placeholder_for_build_key_of_64_chars_get_overwritten_at_runtime"
 
 ARG NEXT_PUBLIC_SENTRY_DSN
 
@@ -71,12 +61,12 @@ FROM base AS runner
 RUN corepack enable && corepack prepare pnpm@latest --activate
 
 RUN apk add --no-cache curl \
+    && apk add --no-cache supercronic \
     # && addgroup --system --gid 1001 nodejs \
     && adduser --system --uid 1001 nextjs
 
 WORKDIR /home/nextjs
 
-COPY --from=installer /tmp/supercronic /usr/local/bin/supercronic
 COPY --from=installer /app/apps/web/next.config.mjs .
 COPY --from=installer /app/apps/web/package.json .
 # Leverage output traces to reduce image size
@@ -84,10 +74,14 @@ COPY --from=installer --chown=nextjs:nextjs /app/apps/web/.next/standalone ./
 COPY --from=installer --chown=nextjs:nextjs /app/apps/web/.next/static ./apps/web/.next/static
 COPY --from=installer --chown=nextjs:nextjs /app/apps/web/public ./apps/web/public
 COPY --from=installer --chown=nextjs:nextjs /app/packages/database/schema.prisma ./packages/database/schema.prisma
+COPY --from=installer --chown=nextjs:nextjs /app/packages/database/package.json ./packages/database/package.json
 COPY --from=installer --chown=nextjs:nextjs /app/packages/database/migrations ./packages/database/migrations
 COPY --from=installer --chown=nextjs:nextjs /prisma_version.txt .
 COPY /docker/cronjobs /app/docker/cronjobs
 
+# Install Prisma globally
+RUN PRISMA_VERSION=$(cat prisma_version.txt) && npm install -g prisma@$PRISMA_VERSION
+
 EXPOSE 3000
 ENV HOSTNAME "0.0.0.0"
 USER nextjs
@@ -96,12 +90,6 @@ USER nextjs
 RUN mkdir -p /home/nextjs/apps/web/uploads/
 VOLUME /home/nextjs/apps/web/uploads/
 
-CMD PRISMA_VERSION=$(cat prisma_version.txt) && \
-    supercronic -quiet /app/docker/cronjobs & \
-    if [ "$NEXTAUTH_SECRET" != "RANDOM_STRING" ]; then \
-        pnpm dlx prisma@$PRISMA_VERSION migrate deploy && \
-        exec node apps/web/server.js; \
-    else \
-        echo "ERROR: Please set a value for NEXTAUTH_SECRET in your docker compose variables!" >&2; \
-        exit 1; \
-    fi
+CMD supercronic -quiet /app/docker/cronjobs & \
+    (cd packages/database && pnpm db:migrate:deploy) && \
+    exec node apps/web/server.js

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionActivityTab.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
+import { Code2Icon, MousePointerClickIcon, SparklesIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { capitalizeFirstLetter } from "@formbricks/lib/strings";
@@ -125,11 +125,11 @@ export default function EventActivityTab({ actionClass, environmentId }: Activit
           <div className="mt-1 flex items-center">
             <div className="mr-1.5  h-4 w-4 text-slate-600">
               {actionClass.type === "code" ? (
-                <CodeBracketIcon />
+                <Code2Icon className="h-5 w-5" />
               ) : actionClass.type === "noCode" ? (
-                <CursorArrowRaysIcon />
+                <MousePointerClickIcon className="h-5 w-5" />
               ) : actionClass.type === "automatic" ? (
-                <SparklesIcon />
+                <SparklesIcon className="h-5 w-5" />
               ) : null}
             </div>
             <p className="text-sm text-slate-700 ">{capitalizeFirstLetter(actionClass.type)}</p>

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionClassesTable.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon } from "lucide-react";
 import { useState } from "react";
 
 import { useMembershipRole } from "@formbricks/lib/membership/hooks/useMembershipRole";
@@ -53,7 +53,7 @@ export default function ActionClassesTable({
               onClick={() => {
                 setAddActionModalOpen(true);
               }}>
-              <CursorArrowRaysIcon className="mr-2 h-5 w-5 text-white" />
+              <MousePointerClickIcon className="mr-2 h-5 w-5 text-white" />
               Add Action
             </Button>
           </div>

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionDetailModal.tsx

@@ -1,4 +1,4 @@
-import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
+import { Code2Icon, MousePointerClickIcon, SparklesIcon } from "lucide-react";
 
 import { TActionClass } from "@formbricks/types/actionClasses";
 import { TMembershipRole } from "@formbricks/types/memberships";
@@ -48,11 +48,11 @@ export default function ActionDetailModal({
         tabs={tabs}
         icon={
           actionClass.type === "code" ? (
-            <CodeBracketIcon />
+            <Code2Icon className="h-5 w-5" />
           ) : actionClass.type === "noCode" ? (
-            <CursorArrowRaysIcon />
+            <MousePointerClickIcon className="h-5 w-5" />
           ) : actionClass.type === "automatic" ? (
-            <SparklesIcon />
+            <SparklesIcon className="h-5 w-5" />
           ) : null
         }
         label={actionClass.name}

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionRowData.tsx

@@ -1,4 +1,4 @@
-import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
+import { Code2Icon, MousePointerClickIcon, SparklesIcon } from "lucide-react";
 
 import { timeSinceConditionally } from "@formbricks/lib/time";
 import { TActionClass } from "@formbricks/types/actionClasses";
@@ -10,11 +10,11 @@ export default function ActionClassDataRow({ actionClass }: { actionClass: TActi
         <div className="flex items-center">
           <div className="h-5 w-5 flex-shrink-0 text-slate-500">
             {actionClass.type === "code" ? (
-              <CodeBracketIcon />
+              <Code2Icon className="h-5 w-5" />
             ) : actionClass.type === "noCode" ? (
-              <CursorArrowRaysIcon />
+              <MousePointerClickIcon className="h-5 w-5" />
             ) : actionClass.type === "automatic" ? (
-              <SparklesIcon />
+              <SparklesIcon className="h-5 w-5" />
             ) : null}
           </div>
           <div className="ml-4 text-left">

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/ActionSettingsTab.tsx

@@ -4,7 +4,7 @@ import {
   deleteActionClassAction,
   updateActionClassAction,
 } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/actions";
-import { TrashIcon } from "@heroicons/react/24/outline";
+import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/components/AddActionModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { createActionClassAction } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/actions";
-import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon } from "lucide-react";
 import { Terminal } from "lucide-react";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -155,7 +155,7 @@ export default function AddNoCodeActionModal({
           <div className="flex w-full items-center justify-between p-6">
             <div className="flex items-center space-x-2">
               <div className="mr-1.5 h-6 w-6 text-slate-500">
-                <CursorArrowRaysIcon />
+                <MousePointerClickIcon className="h-5 w-5" />
               </div>
               <div>
                 <div className="text-xl font-medium text-slate-700">Track New User Action</div>
@@ -224,7 +224,7 @@ export default function AddNoCodeActionModal({
                   Cancel
                 </Button>
                 <Button variant="darkCTA" type="submit" loading={isCreatingAction}>
-                  Track Action
+                  Create Action
                 </Button>
               </div>
             </div>
@@ -275,7 +275,7 @@ export default function AddNoCodeActionModal({
                   Cancel
                 </Button>
                 <Button variant="darkCTA" type="submit" loading={isCreatingAction}>
-                  Track Action
+                  Create Action
                 </Button>
               </div>
             </div>

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/actions/loading.tsx

@@ -1,4 +1,4 @@
-import { CursorArrowRaysIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon } from "lucide-react";
 
 import { Button } from "@formbricks/ui/Button";
 
@@ -9,7 +9,7 @@ export default function Loading() {
         <Button
           variant="darkCTA"
           className="pointer-events-none animate-pulse cursor-not-allowed select-none bg-slate-200">
-          <CursorArrowRaysIcon className="mr-2 h-5 w-5 text-white" />
+          <MousePointerClickIcon className="mr-2 h-5 w-5 text-white" />
           Loading
         </Button>
       </div>

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/ActionsAttributesTabs.tsx

@@ -1,5 +1,5 @@
 import SecondNavbar from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/SecondNavbar";
-import { CursorArrowRaysIcon, TagIcon } from "@heroicons/react/24/solid";
+import { MousePointerClickIcon, TagIcon } from "lucide-react";
 
 interface ActionsAttributesTabsProps {
   activeId: string;
@@ -11,13 +11,13 @@ export default function ActionsAttributesTabs({ activeId, environmentId }: Actio
     {
       id: "actions",
       label: "Actions",
-      icon: <CursorArrowRaysIcon />,
+      icon: <MousePointerClickIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/actions`,
     },
     {
       id: "attributes",
       label: "Attributes",
-      icon: <TagIcon />,
+      icon: <TagIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/attributes`,
     },
   ];

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeActivityTab.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { getSegmentsByAttributeClassAction } from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/actions";
-import { TagIcon } from "@heroicons/react/24/solid";
+import { TagIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { capitalizeFirstLetter } from "@formbricks/lib/strings";
@@ -86,7 +86,7 @@ export default function AttributeActivityTab({ attributeClass }: EventActivityTa
           <Label className="block text-xs font-normal text-slate-500">Type</Label>
           <div className="mt-1 flex items-center">
             <div className="mr-1.5  h-4 w-4 text-slate-600">
-              <TagIcon />
+              <TagIcon className="h-4 w-4" />
             </div>
             <p className="text-sm text-slate-700 ">{capitalizeFirstLetter(attributeClass.type)}</p>
           </div>

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeDetailModal.tsx

@@ -1,4 +1,4 @@
-import { TagIcon } from "@heroicons/react/24/solid";
+import { TagIcon } from "lucide-react";
 
 import { TAttributeClass } from "@formbricks/types/attributeClasses";
 import ModalWithTabs from "@formbricks/ui/ModalWithTabs";
@@ -30,7 +30,7 @@ export default function AttributeDetailModal({ open, setOpen, attributeClass }:
         open={open}
         setOpen={setOpen}
         tabs={tabs}
-        icon={<TagIcon />}
+        icon={<TagIcon className="h-5 w-5" />}
         label={attributeClass.name}
         description={attributeClass.description || ""}
       />

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeRowData.tsx

@@ -1,4 +1,4 @@
-import { TagIcon } from "@heroicons/react/24/solid";
+import { TagIcon } from "lucide-react";
 
 import { timeSinceConditionally } from "@formbricks/lib/time";
 import { Badge } from "@formbricks/ui/Badge";

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/AttributeSettingsTab.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ArchiveBoxArrowDownIcon, ArchiveBoxXMarkIcon } from "@heroicons/react/24/solid";
 import type { AttributeClass } from "@prisma/client";
+import { ArchiveIcon, ArchiveXIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -86,13 +86,13 @@ export default function AttributeSettingsTab({ attributeClass, setOpen }: Attrib
                 {attributeClass.archived ? (
                   <>
                     {" "}
-                    <ArchiveBoxXMarkIcon className="mr-2 h-4 text-slate-600" />
+                    <ArchiveXIcon className="mr-2 h-4 text-slate-600" />
                     <span>Unarchive</span>
                   </>
                 ) : (
                   <>
                     {" "}
-                    <ArchiveBoxArrowDownIcon className="mr-2 h-4  text-slate-600" />
+                    <ArchiveIcon className="mr-2 h-4  text-slate-600" />
                     <span>Archive</span>
                   </>
                 )}

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/HowToAddAttributesButton.tsx

@@ -1,4 +1,4 @@
-import { QuestionMarkCircleIcon } from "@heroicons/react/24/solid";
+import { HelpCircleIcon } from "lucide-react";
 
 import { Button } from "@formbricks/ui/Button";
 
@@ -8,7 +8,7 @@ export default function HowToAddAttributesButton() {
       variant="secondary"
       href="https://formbricks.com/docs/attributes/custom-attributes"
       target="_blank">
-      <QuestionMarkCircleIcon className="mr-2 h-4 w-4" />
+      <HelpCircleIcon className="mr-2 h-4 w-4" />
       How to add attributes
     </Button>
   );

apps/web/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/loading.tsx

@@ -1,4 +1,4 @@
-import { QuestionMarkCircleIcon, TagIcon } from "@heroicons/react/24/solid";
+import { HelpCircleIcon, TagIcon } from "lucide-react";
 
 import { Button } from "@formbricks/ui/Button";
 
@@ -10,7 +10,7 @@ export default function Loading() {
           <Button
             variant="secondary"
             className="pointer-events-none animate-pulse cursor-not-allowed select-none">
-            <QuestionMarkCircleIcon className="mr-2 h-4 w-4" />
+            <HelpCircleIcon className="mr-2 h-4 w-4" />
             Loading Attributes
           </Button>
         </div>

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/PeopleSegmentsTabs.tsx

@@ -1,5 +1,5 @@
 import SecondNavbar from "@/app/(app)/environments/[environmentId]/(actionsAndAttributes)/attributes/components/SecondNavbar";
-import { UserGroupIcon, UserIcon } from "@heroicons/react/24/solid";
+import { UserIcon, UsersIcon } from "lucide-react";
 
 interface PeopleSegmentsTabsProps {
   activeId: string;
@@ -12,13 +12,13 @@ export default function PeopleSegmentsTabs({ activeId, environmentId }: PeopleSe
     {
       id: "people",
       label: "People",
-      icon: <UserIcon />,
+      icon: <UserIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/people`,
     },
     {
       id: "segments",
       label: "Segments",
-      icon: <UserGroupIcon />,
+      icon: <UsersIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/segments`,
     },
   ];

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/components/ActivityItemComponents.tsx

@@ -1,5 +1,5 @@
-import { CodeBracketIcon, CursorArrowRaysIcon, SparklesIcon } from "@heroicons/react/24/solid";
 import { formatDistance } from "date-fns";
+import { CodeIcon, MousePointerClickIcon, SparklesIcon } from "lucide-react";
 
 import { TAction } from "@formbricks/types/actions";
 import { Label } from "@formbricks/ui/Label";
@@ -8,9 +8,9 @@ import { Popover, PopoverContent, PopoverTrigger } from "@formbricks/ui/Popover"
 export const ActivityItemIcon = ({ actionItem }: { actionItem: TAction }) => (
   <div className="h-12 w-12 rounded-full bg-white p-3 text-slate-500  duration-100 ease-in-out group-hover:scale-110 group-hover:text-slate-600">
     <div>
-      {actionItem.actionClass?.type === "code" && <CodeBracketIcon />}
-      {actionItem.actionClass?.type === "noCode" && <CursorArrowRaysIcon />}
-      {actionItem.actionClass?.type === "automatic" && <SparklesIcon />}
+      {actionItem.actionClass?.type === "code" && <CodeIcon className="h-5 w-5" />}
+      {actionItem.actionClass?.type === "noCode" && <MousePointerClickIcon className="h-5 w-5" />}
+      {actionItem.actionClass?.type === "automatic" && <SparklesIcon className="h-5 w-5" />}
     </div>
   </div>
 );

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/components/ResponseTimeline.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import ResponseFeed from "@/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/components/ResponsesFeed";
-import { ArrowsUpDownIcon } from "@heroicons/react/24/outline";
+import { ArrowDownUpIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { TEnvironment } from "@formbricks/types/environment";
@@ -41,7 +41,7 @@ export default function ResponseTimeline({
             type="button"
             onClick={toggleSortResponses}
             className="hover:text-brand-dark flex items-center px-1 text-slate-800">
-            <ArrowsUpDownIcon className="inline h-4 w-4" />
+            <ArrowDownUpIcon className="inline h-4 w-4" />
           </button>
         </div>
       </div>

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/components/ResponsesFeed.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect, useState } from "react";
 
+import { useMembershipRole } from "@formbricks/lib/membership/hooks/useMembershipRole";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TResponse } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys";
@@ -44,28 +46,62 @@ export default function ResponseFeed({
       {fetchedResponses.length === 0 ? (
         <EmptySpaceFiller type="response" environment={environment} />
       ) : (
-        fetchedResponses.map((response) => {
-          const survey = surveys.find((survey) => {
-            return survey.id === response.surveyId;
-          });
-          return (
-            <div key={response.id}>
-              {survey && (
-                <SingleResponseCard
-                  response={response}
-                  survey={survey}
-                  user={user}
-                  pageType="people"
-                  environmentTags={environmentTags}
-                  environment={environment}
-                  deleteResponse={deleteResponse}
-                  updateResponse={updateResponse}
-                />
-              )}
-            </div>
-          );
-        })
+        fetchedResponses.map((response) => (
+          <ResponseSurveyCard
+            key={response.id}
+            response={response}
+            surveys={surveys}
+            user={user}
+            environmentTags={environmentTags}
+            environment={environment}
+            deleteResponse={deleteResponse}
+            updateResponse={updateResponse}
+          />
+        ))
       )}
     </>
   );
 }
+
+const ResponseSurveyCard = ({
+  response,
+  surveys,
+  user,
+  environmentTags,
+  environment,
+  deleteResponse,
+  updateResponse,
+}: {
+  response: TResponse;
+  surveys: TSurvey[];
+  user: TUser;
+  environmentTags: TTag[];
+  environment: TEnvironment;
+  deleteResponse: (responseId: string) => void;
+  updateResponse: (responseId: string, response: TResponse) => void;
+}) => {
+  const survey = surveys.find((survey) => {
+    return survey.id === response.surveyId;
+  });
+
+  const { membershipRole } = useMembershipRole(survey?.environmentId || "");
+  const { isViewer } = getAccessFlags(membershipRole);
+
+  return (
+    <div key={response.id}>
+      {survey && (
+        <SingleResponseCard
+          response={response}
+          survey={survey}
+          user={user}
+          pageType="people"
+          environmentTags={environmentTags}
+          environment={environment}
+          deleteResponse={deleteResponse}
+          updateResponse={updateResponse}
+          isViewer={isViewer}
+        />
+      )}
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/loading.tsx

@@ -2,7 +2,7 @@ import {
   ActivityItemIcon,
   ActivityItemPopover,
 } from "@/app/(app)/environments/[environmentId]/(peopleAndSegments)/people/[personId]/components/ActivityItemComponents";
-import { ArrowsUpDownIcon } from "@heroicons/react/24/outline";
+import { ArrowDownUpIcon } from "lucide-react";
 import { TrashIcon } from "lucide-react";
 
 import { TAction } from "@formbricks/types/actions";
@@ -100,7 +100,7 @@ export default function Loading() {
                 <h2 className="text-lg font-bold text-slate-700">Responses</h2>
                 <div className="text-right">
                   <button className="hover:text-brand-dark pointer-events-none flex animate-pulse cursor-not-allowed select-none items-center px-1 text-slate-800">
-                    <ArrowsUpDownIcon className="inline h-4 w-4" />
+                    <ArrowDownUpIcon className="inline h-4 w-4" />
                   </button>
                 </div>
               </div>

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/segments/components/BasicCreateSegmentModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { UserGroupIcon } from "@heroicons/react/20/solid";
+import { UsersIcon } from "lucide-react";
 import { FilterIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useMemo, useState } from "react";
@@ -136,7 +136,7 @@ const BasicCreateSegmentModal = ({
             <div className="flex w-full items-center gap-4 p-6">
               <div className="flex items-center space-x-2">
                 <div className="mr-1.5 h-6 w-6 text-slate-500">
-                  <UserGroupIcon />
+                  <UsersIcon className="h-5 w-5" />
                 </div>
                 <div>
                   <h3 className="text-base font-medium">Create Segment</h3>

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/segments/components/EditSegmentModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { UserGroupIcon } from "@heroicons/react/24/solid";
+import { UsersIcon } from "lucide-react";
 
 import SegmentSettings from "@formbricks/ee/advancedTargeting/components/SegmentSettings";
 import { TActionClass } from "@formbricks/types/actionClasses";
@@ -76,7 +76,7 @@ export default function EditSegmentModal({
         open={open}
         setOpen={setOpen}
         tabs={tabs}
-        icon={<UserGroupIcon />}
+        icon={<UsersIcon className="h-5 w-5" />}
         label={currentSegment.title}
         description={currentSegment.description || ""}
         closeOnOutsideClick={false}

apps/web/app/(app)/environments/[environmentId]/(peopleAndSegments)/segments/components/SegmentTableDataRow.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { UserGroupIcon } from "@heroicons/react/24/solid";
 import { format, formatDistanceToNow } from "date-fns";
+import { UsersIcon } from "lucide-react";
 import { useState } from "react";
 
 import { TActionClass } from "@formbricks/types/actionClasses";
@@ -39,7 +39,7 @@ const SegmentTableDataRow = ({
         <div className="col-span-4 flex items-center pl-6 text-sm">
           <div className="flex items-center gap-4">
             <div className="ph-no-capture h-8 w-8 flex-shrink-0 text-slate-700">
-              <UserGroupIcon />
+              <UsersIcon className="h-5 w-5" />
             </div>
             <div className="flex flex-col">
               <div className="ph-no-capture font-medium text-slate-900">{title}</div>

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { createProductAction } from "@/app/(app)/environments/[environmentId]/actions";
-import { PlusCircleIcon } from "@heroicons/react/24/outline";
+import { PlusCircleIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -51,7 +51,7 @@ export default function AddProductModal({ environmentId, open, setOpen }: AddPro
           <div className="flex items-center justify-between p-6">
             <div className="flex items-center space-x-2">
               <div className="mr-1.5 h-10 w-10 text-slate-500">
-                <PlusCircleIcon />
+                <PlusCircleIcon className="h-5 w-5" />
               </div>
               <div>
                 <div className="text-xl font-medium text-slate-700">Add Product</div>

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

@@ -1,11 +1,11 @@
-import { QuestionMarkCircleIcon } from "@heroicons/react/24/solid";
+import { HelpCircleIcon } from "lucide-react";
 
 import { Button } from "@formbricks/ui/Button";
 
 export default function HowToAddPeopleButton() {
   return (
     <Button variant="secondary" href="https://formbricks.com/docs/attributes/identify-users" target="_blank">
-      <QuestionMarkCircleIcon className="mr-2 h-4 w-4" />
+      <HelpCircleIcon className="mr-2 h-4 w-4" />
       How to add people
     </Button>
   );

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

@@ -2,23 +2,23 @@
 
 import FaveIcon from "@/app/favicon.ico";
 import { formbricksLogout } from "@/app/lib/formbricks";
+import clsx from "clsx";
 import {
-  AdjustmentsVerticalIcon,
-  ArrowRightOnRectangleIcon,
-  ChatBubbleBottomCenterTextIcon,
+  BrushIcon,
   ChevronDownIcon,
-  CodeBracketIcon,
+  CodeIcon,
   CreditCardIcon,
-  DocumentCheckIcon,
-  EnvelopeIcon,
+  FileCheckIcon,
   HeartIcon,
   LinkIcon,
-  PaintBrushIcon,
+  LogOutIcon,
+  MailIcon,
+  MessageSquareTextIcon,
   PlusIcon,
+  SlidersIcon,
   UserCircleIcon,
   UsersIcon,
-} from "@heroicons/react/24/solid";
-import clsx from "clsx";
+} from "lucide-react";
 import { MenuIcon } from "lucide-react";
 import type { Session } from "next-auth";
 import { signOut } from "next-auth/react";
@@ -155,13 +155,13 @@ export default function Navigation({
       title: "Survey",
       links: [
         {
-          icon: AdjustmentsVerticalIcon,
+          icon: SlidersIcon,
           label: "Product Settings",
           href: `/environments/${environment.id}/settings/product`,
           hidden: false,
         },
         {
-          icon: PaintBrushIcon,
+          icon: BrushIcon,
           label: "Look & Feel",
           href: `/environments/${environment.id}/settings/lookandfeel`,
           hidden: isViewer,
@@ -189,7 +189,7 @@ export default function Navigation({
       title: "Setup",
       links: [
         {
-          icon: DocumentCheckIcon,
+          icon: FileCheckIcon,
           label: "Setup checklist",
           href: `/environments/${environment.id}/settings/setup`,
           hidden: widgetSetupCompleted,
@@ -203,7 +203,7 @@ export default function Navigation({
           },
         },
         {
-          icon: CodeBracketIcon,
+          icon: CodeIcon,
           label: "Developer Docs",
           href: "https://formbricks.com/docs",
           target: "_blank",
@@ -483,7 +483,7 @@ export default function Navigation({
                           <DropdownMenuItem>
                             <a href="mailto:johannes@formbricks.com">
                               <div className="flex items-center">
-                                <EnvelopeIcon className="mr-2 h-4 w-4" />
+                                <MailIcon className="mr-2 h-4 w-4" />
                                 <span>Email us!</span>
                               </div>
                             </a>
@@ -494,7 +494,7 @@ export default function Navigation({
                                 formbricks.track("Top Menu: Product Feedback");
                               }}>
                               <div className="flex items-center">
-                                <ChatBubbleBottomCenterTextIcon className="mr-2 h-4 w-4" />
+                                <MessageSquareTextIcon className="mr-2 h-4 w-4" />
                                 <span>Product Feedback</span>
                               </div>
                             </button>
@@ -507,7 +507,7 @@ export default function Navigation({
                           await formbricksLogout();
                         }}>
                         <div className="flex h-full w-full items-center">
-                          <ArrowRightOnRectangleIcon className="mr-2 h-4 w-4" />
+                          <LogOutIcon className="mr-2 h-4 w-4" />
                           Logout
                         </div>
                       </DropdownMenuItem>

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

@@ -1,4 +1,4 @@
-import { LinkIcon } from "@heroicons/react/24/outline";
+import { LinkIcon } from "lucide-react";
 
 import { Modal } from "@formbricks/ui/Modal";
 
@@ -18,7 +18,7 @@ export default function UrlShortenerModal({ open, setOpen, webAppUrl }: UrlShort
           <div className="flex items-center justify-between p-6">
             <div className="flex items-center space-x-2">
               <div className="mr-1.5 h-10 w-10 text-slate-500">
-                <LinkIcon />
+                <LinkIcon className="h-5 w-5" />
               </div>
               <div>
                 <div className="text-xl font-medium text-slate-700">URL shortener</div>

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

@@ -1,5 +1,5 @@
-import { CheckIcon, ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
+import { AlertTriangleIcon, CheckIcon } from "lucide-react";
 import Link from "next/link";
 
 import { getEnvironment } from "@formbricks/lib/environment/service";
@@ -18,7 +18,7 @@ export default async function WidgetStatusIndicator({ environmentId, type }: Wid
 
   const stati = {
     notImplemented: {
-      icon: ExclamationTriangleIcon,
+      icon: AlertTriangleIcon,
       title: "Connect Formbricks to your app or website.",
       subtitle:
         "Your app or website is not yet connected with Formbricks. To run in-app surveys follow the setup guide.",

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

@@ -1,6 +1,6 @@
 import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/integrations/actions";
-import { ChevronDownIcon } from "@heroicons/react/24/solid";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { ChevronDownIcon } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";

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

@@ -6,8 +6,8 @@ import {
 } from "@/app/(app)/environments/[environmentId]/integrations/notion/constants";
 import { questionTypes } from "@/app/lib/questions";
 import NotionLogo from "@/images/notion.png";
-import { ArrowPathIcon, ChevronDownIcon, PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { ChevronDownIcon, PlusIcon, RefreshCcwIcon, XIcon } from "lucide-react";
 import Image from "next/image";
 import React, { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -402,7 +402,7 @@ export default function AddIntegrationModal({
               mapping.length > 1 ? "visible" : "invisible"
             }`}
             onClick={deleteRow}>
-            <XMarkIcon className="h-5 w-5 text-red-500" />
+            <XIcon className="h-5 w-5 text-red-500" />
           </button>
         </div>
       </div>
@@ -582,7 +582,7 @@ const DropdownSelector = ({
             onClick={() => {
               refetch();
             }}>
-            <ArrowPathIcon className="h-5 w-5 font-bold text-slate-500" />
+            <RefreshCcwIcon className="h-5 w-5 font-bold text-slate-500" />
           </button>
         )}
       </div>

apps/web/app/(app)/environments/[environmentId]/integrations/webhooks/components/WebhookSettingsTab.tsx

@@ -4,8 +4,8 @@ import { triggers } from "@/app/(app)/environments/[environmentId]/integrations/
 import SurveyCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/SurveyCheckboxGroup";
 import TriggerCheckboxGroup from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/TriggerCheckboxGroup";
 import { testEndpoint } from "@/app/(app)/environments/[environmentId]/integrations/webhooks/components/testEndpoint";
-import { TrashIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
+import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
+import { AlertTriangleIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
 
 import { Button } from "@formbricks/ui/Button";
@@ -46,7 +46,7 @@ export default function AddMemberModal({ open, setOpen, onSubmit }: MemberModalP
               </div>
 
               <div className="flex items-center rounded-lg border border-slate-200 bg-slate-100 p-2 text-sm text-slate-700">
-                <ExclamationTriangleIcon className="mx-3 h-12 w-12 text-amber-500" />
+                <AlertTriangleIcon className="mx-3 h-12 w-12 text-amber-500" />
                 <p>
                   For security reasons, the API key will only be <strong>shown once</strong> after creation.
                   Please copy it to your destination right away.

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

@@ -1,7 +1,6 @@
 "use client";
 
-import { TrashIcon } from "@heroicons/react/24/outline";
-import { FilesIcon } from "lucide-react";
+import { FilesIcon, TrashIcon } from "lucide-react";
 import { useState } from "react";
 import toast from "react-hot-toast";
 

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

@@ -1,21 +1,21 @@
 "use client";
 
-import { ChevronDownIcon } from "@heroicons/react/20/solid";
+import clsx from "clsx";
 import {
-  AdjustmentsVerticalIcon,
-  BellAlertIcon,
+  BellRingIcon,
   BoltIcon,
+  BrushIcon,
+  ChevronDownIcon,
   CreditCardIcon,
-  DocumentCheckIcon,
-  DocumentMagnifyingGlassIcon,
-  HashtagIcon,
+  FileCheckIcon,
+  FileSearch2Icon,
+  HashIcon,
   KeyIcon,
   LinkIcon,
-  PaintBrushIcon,
+  SlidersIcon,
   UserCircleIcon,
   UsersIcon,
-} from "@heroicons/react/24/solid";
-import clsx from "clsx";
+} from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useMemo, useState } from "react";
@@ -76,7 +76,7 @@ export default function SettingsNavbar({
           {
             name: "Notifications",
             href: `/environments/${environmentId}/settings/notifications`,
-            icon: BellAlertIcon,
+            icon: BellRingIcon,
             current: pathname?.includes("/notifications"),
             hidden: false,
           },
@@ -89,14 +89,14 @@ export default function SettingsNavbar({
           {
             name: "Settings",
             href: `/environments/${environmentId}/settings/product`,
-            icon: AdjustmentsVerticalIcon,
+            icon: SlidersIcon,
             current: pathname?.includes("/product"),
             hidden: false,
           },
           {
             name: "Look & Feel",
             href: `/environments/${environmentId}/settings/lookandfeel`,
-            icon: PaintBrushIcon,
+            icon: BrushIcon,
             current: pathname?.includes("/lookandfeel"),
             hidden: isViewer,
           },
@@ -110,7 +110,7 @@ export default function SettingsNavbar({
           {
             name: "Tags",
             href: `/environments/${environmentId}/settings/tags`,
-            icon: HashtagIcon,
+            icon: HashIcon,
             current: pathname?.includes("/tags"),
             hidden: isViewer,
           },
@@ -150,14 +150,14 @@ export default function SettingsNavbar({
           {
             name: "Setup Checklist",
             href: `/environments/${environmentId}/settings/setup`,
-            icon: DocumentCheckIcon,
+            icon: FileCheckIcon,
             current: pathname?.includes("/setup"),
             hidden: false,
           },
           {
             name: "Documentation",
             href: "https://formbricks.com/docs",
-            icon: DocumentMagnifyingGlassIcon,
+            icon: FileSearch2Icon,
             target: "_blank",
             hidden: false,
           },

apps/web/app/(app)/environments/[environmentId]/settings/members/components/EditMemberships/MemberActions.tsx

@@ -7,7 +7,7 @@ import {
   resendInviteAction,
 } from "@/app/(app)/environments/[environmentId]/settings/members/actions";
 import ShareInviteModal from "@/app/(app)/environments/[environmentId]/settings/members/components/ShareInviteModal";
-import { PaperAirplaneIcon, ShareIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { SendHorizonalIcon, ShareIcon, TrashIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import React, { useMemo, useState } from "react";
 import toast from "react-hot-toast";
@@ -127,7 +127,7 @@ export default function MemberActions({ team, member, invite, showDeleteButton }
                   handleResendInvite();
                 }}
                 id="resendInviteButton">
-                <PaperAirplaneIcon className="h-5 w-5 text-slate-700 hover:text-slate-500" />
+                <SendHorizonalIcon className="h-5 w-5 text-slate-700 hover:text-slate-500" />
               </button>
             </TooltipTrigger>
             <TooltipContent className="TooltipContent" sideOffset={5}>

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

@@ -1,7 +1,6 @@
 "use client";
 
-import { CheckIcon } from "@heroicons/react/24/outline";
-import { DocumentDuplicateIcon } from "@heroicons/react/24/solid";
+import { CheckIcon, CopyIcon } from "lucide-react";
 import { useRef } from "react";
 import toast from "react-hot-toast";
 
@@ -59,7 +58,7 @@ export default function ShareInviteModal({ inviteToken, open, setOpen }: ShareIn
               }}
               title="Copy invite link to clipboard"
               aria-label="Copy invite link to clipboard"
-              EndIcon={DocumentDuplicateIcon}>
+              EndIcon={CopyIcon}>
               Copy URL
             </Button>
           </div>

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

@@ -1,4 +1,4 @@
-import { QuestionMarkCircleIcon, UsersIcon } from "@heroicons/react/24/solid";
+import { HelpCircleIcon, UsersIcon } from "lucide-react";
 import Link from "next/link";
 
 import { TUser } from "@formbricks/types/user";
@@ -51,9 +51,9 @@ export default function EditAlerts({
               <TooltipProvider delayDuration={50}>
                 <Tooltip>
                   <TooltipTrigger>
-                    <div className="col-span-1 flex cursor-default items-center justify-center">
+                    <div className="col-span-1 flex cursor-default items-center justify-center space-x-2">
                       <span className="">Every Response</span>
-                      <QuestionMarkCircleIcon className="h-4 w-4 flex-shrink-0 text-slate-500" />
+                      <HelpCircleIcon className="h-4 w-4 flex-shrink-0 text-slate-500" />
                     </div>
                   </TooltipTrigger>
                   <TooltipContent>Sends complete responses, no partials.</TooltipContent>

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

@@ -1,4 +1,4 @@
-import { UsersIcon } from "@heroicons/react/24/solid";
+import { UsersIcon } from "lucide-react";
 import Link from "next/link";
 
 import { TUser } from "@formbricks/types/user";

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

@@ -40,6 +40,23 @@ export const updateProductAction = async (
     throw new AuthorizationError("Not authorized");
   }
 
+  const team = await getTeamByEnvironmentId(environmentId);
+  const membership = team ? await getMembershipByUserIdTeamId(session.user.id, team.id) : null;
+
+  if (!membership) {
+    throw new AuthorizationError("Not authorized");
+  }
+
+  if (membership.role === "viewer") {
+    throw new AuthorizationError("Not authorized");
+  }
+
+  if (membership.role === "developer") {
+    if (!!data.name || !!data.brandColor || !!data.teamId || !!data.environments) {
+      throw new AuthorizationError("Not authorized");
+    }
+  }
+
   const updatedProduct = await updateProduct(productId, data);
   return updatedProduct;
 };

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

@@ -42,7 +42,6 @@ if (typeof window !== "undefined") {
   formbricks.init({
     environmentId: "${environmentId}",
     apiHost: "${webAppUrl}",
-    debug: true, // remove when in production 
   });
 }`}</CodeBlock>
 

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

@@ -6,7 +6,7 @@ import {
   updateTagNameAction,
 } from "@/app/(app)/environments/[environmentId]/settings/tags/actions";
 import MergeTagsCombobox from "@/app/(app)/environments/[environmentId]/settings/tags/components/MergeTagsCombobox";
-import { ExclamationCircleIcon } from "@heroicons/react/24/solid";
+import { AlertCircleIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
 import React, { useState } from "react";
 import { toast } from "react-hot-toast";
@@ -69,7 +69,7 @@ const SingleTag: React.FC<{
                     if (error?.message.includes("Unique constraint failed on the fields")) {
                       toast.error("Tag already exists", {
                         duration: 2000,
-                        icon: <ExclamationCircleIcon className="h-5 w-5 text-orange-500" />,
+                        icon: <AlertCircleIcon className="h-5 w-5 text-orange-500" />,
                       });
                     } else {
                       toast.error(error?.message ?? "Something went wrong", {

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

@@ -4,10 +4,10 @@ import { getServerSession } from "next-auth";
 import { revalidatePath } from "next/cache";
 
 import { authOptions } from "@formbricks/lib/authOptions";
-import { getResponses } from "@formbricks/lib/response/service";
+import { getResponseCountBySurveyId, getResponses, getSurveySummary } from "@formbricks/lib/response/service";
 import { canUserAccessSurvey } from "@formbricks/lib/survey/auth";
 import { AuthorizationError } from "@formbricks/types/errors";
-import { TResponse, TResponseFilterCriteria } from "@formbricks/types/responses";
+import { TResponse, TResponseFilterCriteria, TSurveySummary } from "@formbricks/types/responses";
 
 export default async function revalidateSurveyIdPath(environmentId: string, surveyId: string) {
   revalidatePath(`/environments/${environmentId}/surveys/${surveyId}`);
@@ -45,3 +45,29 @@ export async function getResponsesAction(
   const responses = await getResponses(surveyId, page, batchSize, filterCriteria);
   return responses;
 }
+
+export const getSurveySummaryAction = async (
+  surveyId: string,
+  filterCriteria?: TResponseFilterCriteria
+): Promise<TSurveySummary> => {
+  const session = await getServerSession(authOptions);
+  if (!session) throw new AuthorizationError("Not authorized");
+
+  const isAuthorized = await canUserAccessSurvey(session.user.id, surveyId);
+  if (!isAuthorized) throw new AuthorizationError("Not authorized");
+
+  return await getSurveySummary(surveyId, filterCriteria);
+};
+
+export const getResponseCountAction = async (
+  surveyId: string,
+  filters?: TResponseFilterCriteria
+): Promise<number> => {
+  const session = await getServerSession(authOptions);
+  if (!session) throw new AuthorizationError("Not authorized");
+
+  const isAuthorized = await canUserAccessSurvey(session.user.id, surveyId);
+  if (!isAuthorized) throw new AuthorizationError("Not authorized");
+
+  return await getResponseCountBySurveyId(surveyId, filters);
+};

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

@@ -1,5 +1,5 @@
 import revalidateSurveyIdPath from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
-import { InboxStackIcon, PresentationChartLineIcon } from "@heroicons/react/24/solid";
+import { InboxIcon, PresentationIcon } from "lucide-react";
 import Link from "next/link";
 
 import { cn } from "@formbricks/lib/cn";
@@ -8,20 +8,26 @@ interface SurveyResultsTabProps {
   activeId: string;
   environmentId: string;
   surveyId: string;
+  responseCount: number | null;
 }
 
-export default function SurveyResultsTab({ activeId, environmentId, surveyId }: SurveyResultsTabProps) {
+export default function SurveyResultsTab({
+  activeId,
+  environmentId,
+  surveyId,
+  responseCount,
+}: SurveyResultsTabProps) {
   const tabs = [
     {
       id: "summary",
       label: "Summary",
-      icon: <PresentationChartLineIcon />,
+      icon: <PresentationIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/surveys/${surveyId}/summary?referer=true`,
     },
     {
       id: "responses",
-      label: "Responses",
-      icon: <InboxStackIcon />,
+      label: `Responses ${responseCount !== null ? `(${responseCount})` : ""}`,
+      icon: <InboxIcon className="h-5 w-5" />,
       href: `/environments/${environmentId}/surveys/${surveyId}/responses?referer=true`,
     },
   ];

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

@@ -1,19 +0,0 @@
-import { getDisplayCountBySurveyId } from "@formbricks/lib/display/service";
-import { getResponses } from "@formbricks/lib/response/service";
-import { getSurvey } from "@formbricks/lib/survey/service";
-import { getTeamByEnvironmentId } from "@formbricks/lib/team/service";
-
-export const getAnalysisData = async (surveyId: string, environmentId: string) => {
-  const [survey, team, responses, displayCount] = await Promise.all([
-    getSurvey(surveyId),
-    getTeamByEnvironmentId(environmentId),
-    getResponses(surveyId),
-    getDisplayCountBySurveyId(surveyId),
-  ]);
-  if (!survey) throw new Error(`Survey not found: ${surveyId}`);
-  if (!team) throw new Error(`Team not found for environment: ${environmentId}`);
-  if (survey.environmentId !== environmentId) throw new Error(`Survey not found: ${surveyId}`);
-  const responseCount = responses.length;
-
-  return { responses, responseCount, survey, displayCount };
-};

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

@@ -1,7 +1,10 @@
 "use client";
 
 import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
-import { getResponsesAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
+import {
+  getResponseCountAction,
+  getResponsesAction,
+} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
 import SurveyResultsTabs from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyResultsTabs";
 import ResponseTimeline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTimeline";
 import CustomFilter from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
@@ -47,6 +50,7 @@ const ResponsePage = ({
   responsesPerPage,
   membershipRole,
 }: ResponsePageProps) => {
+  const [responseCount, setResponseCount] = useState<number | null>(null);
   const [responses, setResponses] = useState<TResponse[]>([]);
   const [page, setPage] = useState<number>(1);
   const [hasMore, setHasMore] = useState<boolean>(true);
@@ -64,23 +68,6 @@ const ResponsePage = ({
     return checkForRecallInHeadline(survey);
   }, [survey]);
 
-  useEffect(() => {
-    if (!searchParams?.get("referer")) {
-      resetState();
-    }
-  }, [searchParams, resetState]);
-
-  useEffect(() => {
-    const fetchInitialResponses = async () => {
-      const responses = await getResponsesAction(surveyId, 1, responsesPerPage, filters);
-      if (responses.length < responsesPerPage) {
-        setHasMore(false);
-      }
-      setResponses(responses);
-    };
-    fetchInitialResponses();
-  }, [surveyId, filters, responsesPerPage]);
-
   const fetchNextPage = useCallback(async () => {
     const newPage = page + 1;
     const newResponses = await getResponsesAction(surveyId, newPage, responsesPerPage, filters);
@@ -99,9 +86,35 @@ const ResponsePage = ({
     setResponses(responses.map((response) => (response.id === responseId ? updatedResponse : response)));
   };
 
+  useEffect(() => {
+    if (!searchParams?.get("referer")) {
+      resetState();
+    }
+  }, [searchParams, resetState]);
+
+  useEffect(() => {
+    const fetchInitialResponses = async () => {
+      const responses = await getResponsesAction(surveyId, 1, responsesPerPage, filters);
+      if (responses.length < responsesPerPage) {
+        setHasMore(false);
+      }
+      setResponses(responses);
+    };
+    fetchInitialResponses();
+  }, [surveyId, filters, responsesPerPage]);
+
+  useEffect(() => {
+    const handleResponsesCount = async () => {
+      const responseCount = await getResponseCountAction(surveyId, filters);
+      setResponseCount(responseCount);
+    };
+    handleResponsesCount();
+  }, [filters, surveyId]);
+
   useEffect(() => {
     setPage(1);
     setHasMore(true);
+    setResponses([]);
   }, [filters]);
 
   return (
@@ -119,7 +132,12 @@ const ResponsePage = ({
         <CustomFilter environmentTags={environmentTags} attributes={attributes} survey={survey} />
         <ResultsShareButton survey={survey} webAppUrl={webAppUrl} product={product} user={user} />
       </div>
-      <SurveyResultsTabs activeId="responses" environmentId={environment.id} surveyId={surveyId} />
+      <SurveyResultsTabs
+        activeId="responses"
+        environmentId={environment.id}
+        surveyId={surveyId}
+        responseCount={responseCount}
+      />
       <ResponseTimeline
         environment={environment}
         surveyId={surveyId}

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

@@ -3,6 +3,8 @@
 import EmptyInAppSurveys from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/EmptyInAppSurveys";
 import React, { useEffect, useRef } from "react";
 
+import { useMembershipRole } from "@formbricks/lib/membership/hooks/useMembershipRole";
+import { getAccessFlags } from "@formbricks/lib/membership/utils";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TResponse } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys";
@@ -60,6 +62,9 @@ export default function ResponseTimeline({
     };
   }, [fetchNextPage, hasMore]);
 
+  const { membershipRole } = useMembershipRole(survey.environmentId);
+  const { isViewer } = getAccessFlags(membershipRole);
+
   return (
     <div className="space-y-4">
       {survey.type === "web" && responses.length === 0 && !environment.widgetSetupCompleted ? (
@@ -84,6 +89,7 @@ export default function ResponseTimeline({
                   environment={environment}
                   updateResponse={updateResponse}
                   deleteResponse={deleteResponse}
+                  isViewer={isViewer}
                 />
               </div>
             );

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

@@ -9,6 +9,7 @@ import { authOptions } from "@formbricks/lib/authOptions";
 import { sendEmbedSurveyPreviewEmail } from "@formbricks/lib/emails/emails";
 import { canUserAccessSurvey } from "@formbricks/lib/survey/auth";
 import { getSurvey, updateSurvey } from "@formbricks/lib/survey/service";
+import { formatSurveyDateFields } from "@formbricks/lib/survey/util";
 import { AuthenticationError, AuthorizationError, ResourceNotFoundError } from "@formbricks/types/errors";
 
 type TSendEmailActionArgs = {
@@ -54,7 +55,7 @@ export async function generateResultShareUrlAction(surveyId: string): Promise<st
     20
   )();
 
-  await updateSurvey({ ...survey, resultShareKey });
+  await updateSurvey({ ...formatSurveyDateFields(survey), resultShareKey });
 
   return resultShareKey;
 }
@@ -86,7 +87,7 @@ export async function deleteResultShareUrlAction(surveyId: string): Promise<void
     throw new ResourceNotFoundError("Survey", surveyId);
   }
 
-  await updateSurvey({ ...survey, resultShareKey: null });
+  await updateSurvey({ ...formatSurveyDateFields(survey), resultShareKey: null });
 }
 
 export const getEmailHtmlAction = async (surveyId: string) => {

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

@@ -1,34 +1,17 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
-import { useMemo } from "react";
+import { InboxIcon } from "lucide-react";
 
-import type { TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import { TSurveyCTAQuestion } from "@formbricks/types/surveys";
+import { TSurveySummaryCta } from "@formbricks/types/responses";
 import { ProgressBar } from "@formbricks/ui/ProgressBar";
 
 interface CTASummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyCTAQuestion>;
-}
-
-interface ChoiceResult {
-  count: number;
-  percentage: number;
+  questionSummary: TSurveySummaryCta;
 }
 
 export default function CTASummary({ questionSummary }: CTASummaryProps) {
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
 
-  const ctr: ChoiceResult = useMemo(() => {
-    const clickedAbs = questionSummary.responses.filter((response) => response.value === "clicked").length;
-    const count = questionSummary.responses.length;
-    if (count === 0) return { count: 0, percentage: 0 };
-    return {
-      count: count,
-      percentage: clickedAbs / count,
-    };
-  }, [questionSummary]);
-
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
@@ -40,8 +23,8 @@ export default function CTASummary({ questionSummary }: CTASummaryProps) {
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"}
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4 " />
-            {ctr.count} responses
+            <InboxIcon className="mr-2 h-4 w-4 " />
+            {questionSummary.responseCount} responses
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -54,15 +37,15 @@ export default function CTASummary({ questionSummary }: CTASummaryProps) {
             <p className="font-semibold text-slate-700">Clickthrough Rate (CTR)</p>
             <div>
               <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                {Math.round(ctr.percentage * 100)}%
+                {Math.round(questionSummary.ctr.percentage)}%
               </p>
             </div>
           </div>
           <p className="flex w-32 items-end justify-end text-slate-600">
-            {ctr.count} {ctr.count === 1 ? "response" : "responses"}
+            {questionSummary.ctr.count} {questionSummary.ctr.count === 1 ? "response" : "responses"}
           </p>
         </div>
-        <ProgressBar barColor="bg-brand" progress={ctr.percentage} />
+        <ProgressBar barColor="bg-brand" progress={questionSummary.ctr.percentage / 100} />
       </div>
     </div>
   );

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

@@ -1,19 +1,16 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
-import Link from "next/link";
+import { InboxIcon } from "lucide-react";
 
-import { getPersonIdentifier } from "@formbricks/lib/person/util";
-import { timeSince } from "@formbricks/lib/time";
-import { TSurveyCalQuestion, TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import { PersonAvatar } from "@formbricks/ui/Avatars";
+import { TSurveySummaryCal } from "@formbricks/types/responses";
+import { ProgressBar } from "@formbricks/ui/ProgressBar";
 
 interface CalSummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyCalQuestion>;
+  questionSummary: TSurveySummaryCal;
   environmentId: string;
 }
 
-export default function CalSummary({ questionSummary, environmentId }: CalSummaryProps) {
+export default function CalSummary({ questionSummary }: CalSummaryProps) {
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
 
   return (
@@ -27,51 +24,47 @@ export default function CalSummary({ questionSummary, environmentId }: CalSummar
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4" />
-            {questionSummary.responses.length} Responses
+            <InboxIcon className="mr-2 h-4 w-4" />
+            {questionSummary.responseCount} Responses
           </div>
+          {!questionSummary.question.required && (
+            <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
+          )}
         </div>
       </div>
-      <div className="rounded-b-lg bg-white ">
-        <div className="grid h-10 grid-cols-4 items-center border-y border-slate-200 bg-slate-100 text-sm font-bold text-slate-600">
-          <div className="pl-4 md:pl-6">User</div>
-          <div className="col-span-2 pl-4 md:pl-6">Response</div>
-          <div className="px-4 md:px-6">Time</div>
-        </div>
-        {questionSummary.responses.map((response) => {
-          const displayIdentifier = response.person ? getPersonIdentifier(response.person) : null;
-          return (
-            <div
-              key={response.id}
-              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.person ? (
-                  <Link
-                    className="ph-no-capture group flex items-center"
-                    href={`/environments/${environmentId}/people/${response.person.id}`}>
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId={response.person.id} />
-                    </div>
-                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                      {displayIdentifier}
-                    </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">Anonymous</p>
-                  </div>
-                )}
+      <div className="space-y-5 rounded-b-lg bg-white px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
+        <div>
+          <div className="text flex justify-between px-2 pb-2">
+            <div className="mr-8 flex space-x-1">
+              <p className="font-semibold text-slate-700">Booked</p>
+              <div>
+                <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
+                  {Math.round(questionSummary.booked.percentage)}%
+                </p>
               </div>
-              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold capitalize">
-                {response.value}
-              </div>
-              <div className="px-4 text-slate-500 md:px-6">{timeSince(response.updatedAt.toISOString())}</div>
             </div>
-          );
-        })}
+            <p className="flex w-32 items-end justify-end text-slate-600">
+              {questionSummary.booked.count} {questionSummary.booked.count === 1 ? "response" : "responses"}
+            </p>
+          </div>
+          <ProgressBar barColor="bg-brand" progress={questionSummary.booked.percentage / 100} />
+        </div>
+        <div>
+          <div className="text flex justify-between px-2 pb-2">
+            <div className="mr-8 flex space-x-1">
+              <p className="font-semibold text-slate-700">Dismissed</p>
+              <div>
+                <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
+                  {Math.round(questionSummary.skipped.percentage)}%
+                </p>
+              </div>
+            </div>
+            <p className="flex w-32 items-end justify-end text-slate-600">
+              {questionSummary.skipped.count} {questionSummary.skipped.count === 1 ? "response" : "responses"}
+            </p>
+          </div>
+          <ProgressBar barColor="bg-brand" progress={questionSummary.skipped.percentage / 100} />
+        </div>
       </div>
     </div>
   );

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

@@ -1,54 +1,30 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
-import { useMemo } from "react";
+import { InboxIcon } from "lucide-react";
 
-import type { TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import { TSurveyConsentQuestion } from "@formbricks/types/surveys";
+import { TSurveySummaryConsent } from "@formbricks/types/responses";
 import { ProgressBar } from "@formbricks/ui/ProgressBar";
 
 interface ConsentSummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyConsentQuestion>;
-}
-
-interface ChoiceResult {
-  count: number;
-  acceptedCount: number;
-  acceptedPercentage: number;
-  dismissedCount: number;
-  dismissedPercentage: number;
+  questionSummary: TSurveySummaryConsent;
 }
 
 export default function ConsentSummary({ questionSummary }: ConsentSummaryProps) {
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
 
-  const ctr: ChoiceResult = useMemo(() => {
-    const total = questionSummary.responses.length;
-    const clickedAbs = questionSummary.responses.filter((response) => response.value !== "dismissed").length;
-    if (total === 0) {
-      return { count: 0, acceptedCount: 0, acceptedPercentage: 0, dismissedCount: 0, dismissedPercentage: 0 };
-    }
-    return {
-      count: total,
-      acceptedCount: clickedAbs,
-      acceptedPercentage: clickedAbs / total,
-      dismissedCount: total - clickedAbs,
-      dismissedPercentage: 1 - clickedAbs / total,
-    };
-  }, [questionSummary]);
-
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
         <Headline headline={questionSummary.question.headline} />
+
         <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
             {questionTypeInfo && <questionTypeInfo.icon className="mr-2 h-4 w-4 " />}
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"}
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4 " />
-            {ctr.count} responses
+            <InboxIcon className="mr-2 h-4 w-4 " />
+            {questionSummary.responseCount} responses
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -62,15 +38,16 @@ export default function ConsentSummary({ questionSummary }: ConsentSummaryProps)
               <p className="font-semibold text-slate-700">Accepted</p>
               <div>
                 <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                  {Math.round(ctr.acceptedPercentage * 100)}%
+                  {Math.round(questionSummary.accepted.percentage)}%
                 </p>
               </div>
             </div>
             <p className="flex w-32 items-end justify-end text-slate-600">
-              {ctr.acceptedCount} {ctr.acceptedCount === 1 ? "response" : "responses"}
+              {questionSummary.accepted.count}{" "}
+              {questionSummary.accepted.count === 1 ? "response" : "responses"}
             </p>
           </div>
-          <ProgressBar barColor="bg-brand" progress={ctr.acceptedPercentage} />
+          <ProgressBar barColor="bg-brand" progress={questionSummary.accepted.percentage / 100} />
         </div>
         <div>
           <div className="text flex justify-between px-2 pb-2">
@@ -78,15 +55,16 @@ export default function ConsentSummary({ questionSummary }: ConsentSummaryProps)
               <p className="font-semibold text-slate-700">Dismissed</p>
               <div>
                 <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                  {Math.round(ctr.dismissedPercentage * 100)}%
+                  {Math.round(questionSummary.dismissed.percentage)}%
                 </p>
               </div>
             </div>
             <p className="flex w-32 items-end justify-end text-slate-600">
-              {ctr.dismissedCount} {ctr.dismissedCount === 1 ? "response" : "responses"}
+              {questionSummary.dismissed.count}{" "}
+              {questionSummary.dismissed.count === 1 ? "response" : "responses"}
             </p>
           </div>
-          <ProgressBar barColor="bg-brand" progress={ctr.dismissedPercentage} />
+          <ProgressBar barColor="bg-brand" progress={questionSummary.dismissed.percentage / 100} />
         </div>
       </div>
     </div>

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

@@ -1,28 +1,21 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
+import { InboxIcon } from "lucide-react";
 import Link from "next/link";
-import { useState } from "react";
 
 import { getPersonIdentifier } from "@formbricks/lib/person/util";
 import { timeSince } from "@formbricks/lib/time";
 import { formatDateWithOrdinal } from "@formbricks/lib/utils/datetime";
-import type { TSurveyDateQuestion, TSurveyQuestionSummary } from "@formbricks/types/surveys";
+import { TSurveySummaryDate } from "@formbricks/types/responses";
 import { PersonAvatar } from "@formbricks/ui/Avatars";
 
 interface DateQuestionSummary {
-  questionSummary: TSurveyQuestionSummary<TSurveyDateQuestion>;
+  questionSummary: TSurveySummaryDate;
   environmentId: string;
-  responsesPerPage: number;
 }
 
-export default function DateQuestionSummary({
-  questionSummary,
-  environmentId,
-  responsesPerPage,
-}: DateQuestionSummary) {
+export default function DateQuestionSummary({ questionSummary, environmentId }: DateQuestionSummary) {
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
-  const [displayCount, setDisplayCount] = useState(responsesPerPage);
 
   return (
     <div className="rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
@@ -35,8 +28,8 @@ export default function DateQuestionSummary({
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4" />
-            {questionSummary.responses.length} Responses
+            <InboxIcon className="mr-2 h-4 w-4" />
+            {questionSummary.responseCount} Responses
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -49,51 +42,39 @@ export default function DateQuestionSummary({
           <div className="col-span-2 pl-4 md:pl-6">Response</div>
           <div className="px-4 md:px-6">Time</div>
         </div>
-        {questionSummary.responses.slice(0, displayCount).map((response) => {
-          const displayIdentifier = getPersonIdentifier(response.person!);
-          return (
-            <div
-              key={response.id}
-              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.person ? (
-                  <Link
-                    className="ph-no-capture group flex items-center"
-                    href={`/environments/${environmentId}/people/${response.person.id}`}>
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId={response.person.id} />
-                    </div>
-                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                      {displayIdentifier}
-                    </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">Anonymous</p>
+        {questionSummary.samples.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 md:text-base">
+            <div className="pl-4 md:pl-6">
+              {response.person ? (
+                <Link
+                  className="ph-no-capture group flex items-center"
+                  href={`/environments/${environmentId}/people/${response.person.id}`}>
+                  <div className="hidden md:flex">
+                    <PersonAvatar personId={response.person.id} />
                   </div>
-                )}
-              </div>
-              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
-                {formatDateWithOrdinal(new Date(response.value as string))}
-              </div>
-              <div className="px-4 text-slate-500 md:px-6">{timeSince(response.updatedAt.toISOString())}</div>
+                  <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                    {getPersonIdentifier(response.person)}
+                  </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">Anonymous</p>
+                </div>
+              )}
+            </div>
+            <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
+              {formatDateWithOrdinal(new Date(response.value as string))}
+            </div>
+            <div className="px-4 text-slate-500 md:px-6">
+              {timeSince(new Date(response.updatedAt).toISOString())}
             </div>
-          );
-        })}
-
-        {displayCount < questionSummary.responses.length && (
-          <div className="my-1 flex justify-center">
-            <button
-              type="button"
-              onClick={() => setDisplayCount((prevCount) => prevCount + responsesPerPage)}
-              className="my-2 flex h-8 items-center justify-center rounded-lg border border-slate-300 bg-white px-3 text-sm text-slate-500 hover:bg-slate-100 hover:text-slate-700">
-              Show more
-            </button>
           </div>
-        )}
+        ))}
       </div>
     </div>
   );

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

@@ -1,18 +1,16 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
-import { DownloadIcon, FileIcon } from "lucide-react";
+import { DownloadIcon, FileIcon, InboxIcon } from "lucide-react";
 import Link from "next/link";
 
 import { getPersonIdentifier } from "@formbricks/lib/person/util";
 import { getOriginalFileNameFromUrl } from "@formbricks/lib/storage/utils";
 import { timeSince } from "@formbricks/lib/time";
-import type { TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import { TSurveyFileUploadQuestion } from "@formbricks/types/surveys";
+import { TSurveySummaryFileUpload } from "@formbricks/types/responses";
 import { PersonAvatar } from "@formbricks/ui/Avatars";
 
 interface FileUploadSummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyFileUploadQuestion>;
+  questionSummary: TSurveySummaryFileUpload;
   environmentId: string;
 }
 
@@ -30,8 +28,8 @@ export default function FileUploadSummary({ questionSummary, environmentId }: Fi
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4" />
-            {questionSummary.responses.length} Responses
+            <InboxIcon className="mr-2 h-4 w-4" />
+            {questionSummary.responseCount} Responses
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -44,80 +42,72 @@ export default function FileUploadSummary({ questionSummary, environmentId }: Fi
           <div className="col-span-2 pl-4 md:pl-6">Response</div>
           <div className="px-4 md:px-6">Time</div>
         </div>
-        {questionSummary.responses.map((response) => {
-          const displayIdentifier = response.person ? getPersonIdentifier(response.person) : null;
-
-          return (
-            <div
-              key={response.id}
-              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.person ? (
-                  <Link
-                    className="ph-no-capture group flex items-center"
-                    href={`/environments/${environmentId}/people/${response.person.id}`}>
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId={response.person.id} />
-                    </div>
-                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                      {displayIdentifier}
-                    </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">Anonymous</p>
+        {questionSummary.files.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 md:text-base">
+            <div className="pl-4 md:pl-6">
+              {response.person ? (
+                <Link
+                  className="ph-no-capture group flex items-center"
+                  href={`/environments/${environmentId}/people/${response.person.id}`}>
+                  <div className="hidden md:flex">
+                    <PersonAvatar personId={response.person.id} />
                   </div>
-                )}
-              </div>
+                  <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                    {getPersonIdentifier(response.person)}
+                  </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">Anonymous</p>
+                </div>
+              )}
+            </div>
 
-              <div className="col-span-2 grid">
-                {response.value === "skipped" && (
+            <div className="col-span-2 grid">
+              {Array.isArray(response.value) &&
+                (response.value.length > 0 ? (
+                  response.value.map((fileUrl, index) => {
+                    const fileName = getOriginalFileNameFromUrl(fileUrl);
+
+                    return (
+                      <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
+                        <a
+                          href={fileUrl as string}
+                          key={index}
+                          download={fileName}
+                          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">skipped</p>
                   </div>
-                )}
-
-                {Array.isArray(response.value) &&
-                  (response.value.length > 0 ? (
-                    response.value.map((fileUrl, index) => {
-                      const fileName = getOriginalFileNameFromUrl(fileUrl);
-
-                      return (
-                        <div className="relative m-2 rounded-lg bg-slate-200" key={fileUrl}>
-                          <a
-                            href={fileUrl as string}
-                            key={index}
-                            download={fileName}
-                            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">skipped</p>
-                    </div>
-                  ))}
-              </div>
-
-              <div className="px-4 text-slate-500 md:px-6">{timeSince(response.updatedAt.toISOString())}</div>
+                ))}
             </div>
-          );
-        })}
+
+            <div className="px-4 text-slate-500 md:px-6">
+              {timeSince(new Date(response.updatedAt).toISOString())}
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   );

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

@@ -1,55 +1,32 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
-import { ChatBubbleBottomCenterTextIcon, InboxStackIcon } from "@heroicons/react/24/solid";
-import { Link } from "lucide-react";
-import { FC, useMemo } from "react";
+import { InboxIcon, Link, MessageSquareTextIcon } from "lucide-react";
+import { FC } from "react";
 
 import { getPersonIdentifier } from "@formbricks/lib/person/util";
 import { timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/environment";
-import { TResponse } from "@formbricks/types/responses";
-import { TSurvey } from "@formbricks/types/surveys";
+import { TSurveySummaryHiddenField } from "@formbricks/types/responses";
 import { PersonAvatar } from "@formbricks/ui/Avatars";
 
 interface HiddenFieldsSummaryProps {
-  question: string;
-  survey: TSurvey;
-  responses: TResponse[];
   environment: TEnvironment;
+  questionSummary: TSurveySummaryHiddenField;
 }
 
-const HiddenFieldsSummary: FC<HiddenFieldsSummaryProps> = ({ environment, responses, survey, question }) => {
-  const hiddenFieldResponses = useMemo(
-    () =>
-      survey.hiddenFields?.fieldIds?.map((question) => {
-        const questionResponses = responses
-          .filter((response) => question in response.data)
-          .map((r) => ({
-            id: r.id,
-            value: r.data[question],
-            updatedAt: r.updatedAt,
-            person: r.person,
-          }));
-        return {
-          question,
-          responses: questionResponses,
-        };
-      }),
-    [responses, survey.hiddenFields?.fieldIds]
-  );
-
+const HiddenFieldsSummary: FC<HiddenFieldsSummaryProps> = ({ environment, questionSummary }) => {
   return (
     <div className="rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
-        <Headline headline={question} />
+        <Headline headline={questionSummary.question} />
 
         <div className="flex space-x-2 text-xs font-semibold text-slate-600 md:text-sm">
           <div className="flex items-center rounded-lg bg-slate-100 p-2 ">
-            <ChatBubbleBottomCenterTextIcon className="mr-2 h-4 w-4" />
+            <MessageSquareTextIcon className="mr-2 h-4 w-4" />
             Hidden Field
           </div>
           <div className="flex items-center rounded-lg bg-slate-100 p-2 ">
-            <InboxStackIcon className="mr-2 h-4 w-4" />
-            {hiddenFieldResponses?.find((q) => q.question === question)?.responses?.length} Responses
+            <InboxIcon className="mr-2 h-4 w-4" />
+            {questionSummary.responseCount} {questionSummary.responseCount === 1 ? "Response" : "Responses"}
           </div>
         </div>
       </div>
@@ -59,44 +36,39 @@ const HiddenFieldsSummary: FC<HiddenFieldsSummaryProps> = ({ environment, respon
           <div className="col-span-2 pl-4 md:pl-6">Response</div>
           <div className="px-4 md:px-6">Time</div>
         </div>
-        {hiddenFieldResponses
-          ?.find((q) => q.question === question)
-          ?.responses.map((response) => {
-            const displayIdentifier = getPersonIdentifier(response.person!);
-            return (
-              <div
-                key={response.id}
-                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.person ? (
-                    <Link
-                      className="ph-no-capture group flex items-center"
-                      href={`/environments/${environment.id}/people/${response.person.id}`}>
-                      <div className="hidden md:flex">
-                        <PersonAvatar personId={response.person.id} />
-                      </div>
-                      <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                        {displayIdentifier}
-                      </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">Anonymous</p>
-                    </div>
-                  )}
+        {questionSummary.samples.map((response) => (
+          <div
+            key={response.value}
+            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.person ? (
+                <Link
+                  className="ph-no-capture group flex items-center"
+                  href={`/environments/${environment.id}/people/${response.person.id}`}>
+                  <div className="hidden md:flex">
+                    <PersonAvatar personId={response.person.id} />
+                  </div>
+                  <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                    {getPersonIdentifier(response.person)}
+                  </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">Anonymous</p>
                 </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(response.updatedAt.toISOString())}
-                </div>
-              </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())}
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   );

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

@@ -1,131 +1,34 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
+import { InboxIcon } from "lucide-react";
 import Link from "next/link";
-import { useMemo, useState } from "react";
 
 import { getPersonIdentifier } from "@formbricks/lib/person/util";
-import type { TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import {
-  TSurveyMultipleChoiceMultiQuestion,
-  TSurveyMultipleChoiceSingleQuestion,
-  TSurveyQuestionType,
-} from "@formbricks/types/surveys";
+import { TSurveySummaryMultipleChoice } from "@formbricks/types/responses";
 import { PersonAvatar } from "@formbricks/ui/Avatars";
 import { ProgressBar } from "@formbricks/ui/ProgressBar";
 
 interface MultipleChoiceSummaryProps {
-  questionSummary: TSurveyQuestionSummary<
-    TSurveyMultipleChoiceMultiQuestion | TSurveyMultipleChoiceSingleQuestion
-  >;
+  questionSummary: TSurveySummaryMultipleChoice;
   environmentId: string;
   surveyType: string;
-  responsesPerPage: number;
-}
-
-interface ChoiceResult {
-  id: string;
-  label: string;
-  count: number;
-  percentage?: number;
-  otherValues?: {
-    value: string;
-    person: {
-      id: string;
-      name?: string;
-      email?: string;
-    };
-  }[];
 }
 
 export default function MultipleChoiceSummary({
   questionSummary,
   environmentId,
   surveyType,
-  responsesPerPage,
 }: MultipleChoiceSummaryProps) {
-  const isSingleChoice = questionSummary.question.type === TSurveyQuestionType.MultipleChoiceSingle;
-  const [otherDisplayCount, setOtherDisplayCount] = useState(responsesPerPage);
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
 
-  const results: ChoiceResult[] = useMemo(() => {
-    if (!("choices" in questionSummary.question)) return [];
+  // sort by count and transform to array
+  const results = Object.values(questionSummary.choices).sort((a, b) => {
+    if (a.others) return 1; // Always put a after b if a has 'others'
+    if (b.others) return -1; // Always put b after a if b has 'others'
 
-    // build a dictionary of choices
-    const resultsDict: { [key: string]: ChoiceResult } = {};
-    for (const choice of questionSummary.question.choices) {
-      resultsDict[choice.label] = {
-        id: choice.id,
-        label: choice.label,
-        count: 0,
-        percentage: 0,
-        otherValues: [],
-      };
-    }
-
-    const addOtherChoice = (response, value) => {
-      for (const key in resultsDict) {
-        if (resultsDict[key].id === "other" && value !== "") {
-          const displayIdentifier = getPersonIdentifier(response.person);
-          resultsDict[key].otherValues?.push({
-            value,
-            person: {
-              id: response.personId,
-              email: typeof displayIdentifier === "string" ? displayIdentifier : undefined,
-            },
-          });
-          resultsDict[key].count += 1;
-          break;
-        }
-      }
-    };
-
-    // count the responses
-    for (const response of questionSummary.responses) {
-      // if single choice, only add responses that are in the choices
-      if (isSingleChoice && response.value.toString() in resultsDict) {
-        resultsDict[response.value.toString()].count += 1;
-      } else if (isSingleChoice) {
-        // if single choice and not in choices, add to other
-        addOtherChoice(response, response.value);
-      } else if (Array.isArray(response.value)) {
-        // if multi choice add all responses
-        for (const choice of response.value) {
-          if (choice in resultsDict) {
-            resultsDict[choice].count += 1;
-          } else {
-            // if multi choice and not in choices, add to other
-            addOtherChoice(response, choice);
-          }
-        }
-      }
-    }
-    // add the percentage
-    const total = questionSummary.responses.length;
-    for (const key of Object.keys(resultsDict)) {
-      if (resultsDict[key].count) {
-        resultsDict[key].percentage = resultsDict[key].count / total;
-      }
-    }
-
-    // sort by count and transform to array
-    const results = Object.values(resultsDict).sort((a: any, b: any) => {
-      if (a.id === "other") return 1; // Always put a after b if a's id is 'other'
-      if (b.id === "other") return -1; // Always put b after a if b's id is 'other'
-
-      // If neither id is 'other', compare counts
-      return b.count - a.count;
-    });
-    return results;
-  }, [questionSummary, isSingleChoice]);
-
-  const totalResponses = useMemo(() => {
-    let total = 0;
-    for (const result of results) {
-      total += result.count;
-    }
-    return total;
-  }, [results]);
+    // Sort by count
+    return b.count - a.count;
+  });
 
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
@@ -138,8 +41,8 @@ export default function MultipleChoiceSummary({
             Multiple-Choice {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
           </div>
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4 " />
-            {totalResponses} responses
+            <InboxIcon className="mr-2 h-4 w-4 " />
+            {questionSummary.responseCount} responses
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -151,16 +54,16 @@ export default function MultipleChoiceSummary({
         </div>
       </div>
       <div className="space-y-5 rounded-b-lg bg-white px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
-        {results.map((result: any, resultsIdx) => (
-          <div key={result.label}>
+        {results.map((result, resultsIdx) => (
+          <div key={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-1 sm:justify-normal">
                 <p className="font-semibold text-slate-700">
-                  {results.length - resultsIdx} - {result.label}
+                  {results.length - resultsIdx} - {result.value}
                 </p>
                 <div>
                   <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                    {Math.round(result.percentage * 100)}%
+                    {Math.round(result.percentage)}%
                   </p>
                 </div>
               </div>
@@ -168,16 +71,15 @@ export default function MultipleChoiceSummary({
                 {result.count} {result.count === 1 ? "response" : "responses"}
               </p>
             </div>
-            <ProgressBar barColor="bg-brand" progress={result.percentage} />
-            {result.otherValues.length > 0 && (
+            <ProgressBar barColor="bg-brand" progress={result.percentage / 100} />
+            {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 ">Specified &quot;Other&quot; answers</div>
                   <div className="col-span-1 pl-6 ">{surveyType === "web" && "User"}</div>
                 </div>
-                {result.otherValues
-                  .filter((otherValue) => otherValue !== "")
-                  .slice(0, otherDisplayCount)
+                {result.others
+                  .filter((otherValue) => otherValue.value !== "")
                   .map((otherValue, idx) => (
                     <div key={idx}>
                       {surveyType === "link" && (
@@ -187,7 +89,7 @@ export default function MultipleChoiceSummary({
                           <span>{otherValue.value}</span>
                         </div>
                       )}
-                      {surveyType === "web" && (
+                      {surveyType === "web" && otherValue.person && (
                         <Link
                           href={
                             otherValue.person.id
@@ -207,16 +109,6 @@ export default function MultipleChoiceSummary({
                       )}
                     </div>
                   ))}
-                {otherDisplayCount < result.otherValues.length && (
-                  <div className="flex w-full items-center justify-center">
-                    <button
-                      type="button"
-                      onClick={() => setOtherDisplayCount(otherDisplayCount + responsesPerPage)}
-                      className="my-2 flex h-8 items-center justify-center rounded-lg border border-slate-300 bg-white px-3 text-sm text-slate-500 hover:bg-slate-100 hover:text-slate-700">
-                      Show more
-                    </button>
-                  </div>
-                )}
               </div>
             )}
           </div>

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

@@ -1,82 +1,17 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
-import { useMemo } from "react";
+import { InboxIcon } from "lucide-react";
 
-import type { TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import { TSurveyNPSQuestion } from "@formbricks/types/surveys";
+import { TSurveySummaryNps } from "@formbricks/types/responses";
 import { HalfCircle, ProgressBar } from "@formbricks/ui/ProgressBar";
 
 interface NPSSummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyNPSQuestion>;
-}
-
-interface Result {
-  promoters: number;
-  passives: number;
-  detractors: number;
-  total: number;
-  score: number;
-}
-
-interface ChoiceResult {
-  label: string;
-  count: number;
-  percentage: number;
+  questionSummary: TSurveySummaryNps;
 }
 
 export default function NPSSummary({ questionSummary }: NPSSummaryProps) {
-  const percentage = (count, total) => {
-    const result = count / total;
-    return result || 0;
-  };
-
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
 
-  const result: Result = useMemo(() => {
-    let data = {
-      promoters: 0,
-      passives: 0,
-      detractors: 0,
-      total: 0,
-      score: 0,
-    };
-
-    for (let response of questionSummary.responses) {
-      const value = response.value;
-      if (typeof value !== "number") continue;
-
-      data.total++;
-      if (value >= 9) {
-        data.promoters++;
-      } else if (value >= 7) {
-        data.passives++;
-      } else {
-        data.detractors++;
-      }
-    }
-
-    data.score = (percentage(data.promoters, data.total) - percentage(data.detractors, data.total)) * 100;
-    return data;
-  }, [questionSummary]);
-
-  const dismissed: ChoiceResult = useMemo(() => {
-    if (questionSummary.question.required) return { count: 0, label: "Dismissed", percentage: 0 };
-
-    const total = questionSummary.responses.length;
-    let count = 0;
-    for (const response of questionSummary.responses) {
-      if (!response.value) {
-        count += 1;
-      }
-    }
-    return {
-      count,
-      label: "Dismissed",
-      percentage: count / total,
-    };
-  }, [questionSummary]);
-
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="space-y-2 px-4 pb-5 pt-6 md:px-6">
@@ -88,8 +23,8 @@ export default function NPSSummary({ questionSummary }: NPSSummaryProps) {
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"}
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4 " />
-            {result.total} responses
+            <InboxIcon className="mr-2 h-4 w-4 " />
+            {questionSummary.responseCount} responses
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -104,40 +39,41 @@ export default function NPSSummary({ questionSummary }: NPSSummaryProps) {
                 <p className="font-semibold capitalize text-slate-700">{group}</p>
                 <div>
                   <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                    {Math.round(percentage(result[group], result.total) * 100)}%
+                    {Math.round(questionSummary[group].percentage)}%
                   </p>
                 </div>
               </div>
               <p className="flex w-32 items-end justify-end text-slate-600">
-                {result[group]} {result[group] === 1 ? "response" : "responses"}
+                {questionSummary[group].count} {questionSummary[group].count === 1 ? "response" : "responses"}
               </p>
             </div>
-            <ProgressBar barColor="bg-brand" progress={percentage(result[group], result.total)} />
+            <ProgressBar barColor="bg-brand" progress={questionSummary[group].percentage / 100} />
           </div>
         ))}
       </div>
-      {dismissed.count > 0 && (
+      {questionSummary.dismissed?.count > 0 && (
         <div className="border-t bg-white px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
-          <div key={dismissed.label}>
+          <div key={"dismissed"}>
             <div className="text flex justify-between px-2 pb-2">
               <div className="mr-8 flex space-x-1">
-                <p className="font-semibold text-slate-700">{dismissed.label}</p>
+                <p className="font-semibold text-slate-700">dismissed</p>
                 <div>
                   <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                    {Math.round(dismissed.percentage * 100)}%
+                    {Math.round(questionSummary.dismissed.percentage)}%
                   </p>
                 </div>
               </div>
               <p className="flex w-32 items-end justify-end text-slate-600">
-                {dismissed.count} {dismissed.count === 1 ? "response" : "responses"}
+                {questionSummary.dismissed.count}{" "}
+                {questionSummary.dismissed.count === 1 ? "response" : "responses"}
               </p>
             </div>
-            <ProgressBar barColor="bg-slate-600" progress={dismissed.percentage} />
+            <ProgressBar barColor="bg-slate-600" progress={questionSummary.dismissed.percentage / 100} />
           </div>
         </div>
       )}
       <div className="flex justify-center rounded-b-lg bg-white pb-4 pt-4">
-        <HalfCircle value={result.score} />
+        <HalfCircle value={questionSummary.score} />
       </div>
     </div>
   );

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

@@ -1,28 +1,20 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
+import { InboxIcon } from "lucide-react";
 import Link from "next/link";
-import { useState } from "react";
 
 import { getPersonIdentifier } from "@formbricks/lib/person/util";
 import { timeSince } from "@formbricks/lib/time";
-import type { TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import { TSurveyOpenTextQuestion } from "@formbricks/types/surveys";
+import { TSurveySummaryOpenText } from "@formbricks/types/responses";
 import { PersonAvatar } from "@formbricks/ui/Avatars";
 
 interface OpenTextSummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyOpenTextQuestion>;
+  questionSummary: TSurveySummaryOpenText;
   environmentId: string;
-  responsesPerPage: number;
 }
 
-export default function OpenTextSummary({
-  questionSummary,
-  environmentId,
-  responsesPerPage,
-}: OpenTextSummaryProps) {
+export default function OpenTextSummary({ questionSummary, environmentId }: OpenTextSummaryProps) {
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
-  const [displayCount, setDisplayCount] = useState(responsesPerPage);
 
   return (
     <div className="rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
@@ -34,8 +26,8 @@ export default function OpenTextSummary({
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
           </div>
           <div className=" flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4" />
-            {questionSummary.responses.length} Responses
+            <InboxIcon className="mr-2 h-4 w-4" />
+            {questionSummary.responseCount} Responses
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -48,51 +40,39 @@ export default function OpenTextSummary({
           <div className="col-span-2 pl-4 md:pl-6">Response</div>
           <div className="px-4 md:px-6">Time</div>
         </div>
-        {questionSummary.responses.slice(0, displayCount).map((response) => {
-          const displayIdentifier = getPersonIdentifier(response.person!);
-          return (
-            <div
-              key={response.id}
-              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.person ? (
-                  <Link
-                    className="ph-no-capture group flex items-center"
-                    href={`/environments/${environmentId}/people/${response.person.id}`}>
-                    <div className="hidden md:flex">
-                      <PersonAvatar personId={response.person.id} />
-                    </div>
-                    <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
-                      {displayIdentifier}
-                    </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">Anonymous</p>
+        {questionSummary.samples.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 md:text-base">
+            <div className="pl-4 md:pl-6">
+              {response.person ? (
+                <Link
+                  className="ph-no-capture group flex items-center"
+                  href={`/environments/${environmentId}/people/${response.person.id}`}>
+                  <div className="hidden md:flex">
+                    <PersonAvatar personId={response.person.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(response.updatedAt.toISOString())}</div>
+                  <p className="ph-no-capture break-all text-slate-600 group-hover:underline md:ml-2">
+                    {getPersonIdentifier(response.person)}
+                  </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">Anonymous</p>
+                </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())}
             </div>
-          );
-        })}
-
-        {displayCount < questionSummary.responses.length && (
-          <div className="flex justify-center py-1">
-            <button
-              type="button"
-              onClick={() => setDisplayCount((prevCount) => prevCount + responsesPerPage)}
-              className="my-2 flex h-8 items-center justify-center rounded-lg border border-slate-300 bg-white px-3 text-sm text-slate-500 hover:bg-slate-100 hover:text-slate-700">
-              Show more
-            </button>
           </div>
-        )}
+        ))}
       </div>
     </div>
   );

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

@@ -1,75 +1,20 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
+import { InboxIcon } from "lucide-react";
 import Image from "next/image";
-import { useMemo } from "react";
 
-import type { TSurveyPictureSelectionQuestion, TSurveyQuestionSummary } from "@formbricks/types/surveys";
+import { TSurveySummaryPictureSelection } from "@formbricks/types/responses";
 import { ProgressBar } from "@formbricks/ui/ProgressBar";
 
 interface PictureChoiceSummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyPictureSelectionQuestion>;
-}
-
-interface ChoiceResult {
-  id: string;
-  imageUrl: string;
-  count: number;
-  percentage?: number;
+  questionSummary: TSurveySummaryPictureSelection;
 }
 
 export default function PictureChoiceSummary({ questionSummary }: PictureChoiceSummaryProps) {
   const isMulti = questionSummary.question.allowMulti;
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
 
-  const results: ChoiceResult[] = useMemo(() => {
-    if (!("choices" in questionSummary.question)) return [];
-
-    // build a dictionary of choices
-    const resultsDict: { [key: string]: ChoiceResult } = {};
-    for (const choice of questionSummary.question.choices) {
-      resultsDict[choice.id] = {
-        id: choice.id,
-        imageUrl: choice.imageUrl,
-        count: 0,
-        percentage: 0,
-      };
-    }
-
-    // count the responses
-    for (const response of questionSummary.responses) {
-      if (Array.isArray(response.value)) {
-        for (const choice of response.value) {
-          if (choice in resultsDict) {
-            resultsDict[choice].count += 1;
-          }
-        }
-      }
-    }
-
-    // add the percentage
-    const total = questionSummary.responses.length;
-    for (const key of Object.keys(resultsDict)) {
-      if (resultsDict[key].count) {
-        resultsDict[key].percentage = resultsDict[key].count / total;
-      }
-    }
-
-    // sort by count and transform to array
-    const results = Object.values(resultsDict).sort((a, b) => {
-      return b.count - a.count;
-    });
-
-    return results;
-  }, [questionSummary]);
-
-  const totalResponses = useMemo(() => {
-    let total = 0;
-    for (const result of results) {
-      total += result.count;
-    }
-    return total;
-  }, [results]);
+  const results = questionSummary.choices.sort((a, b) => b.count - a.count);
 
   return (
     <div className=" rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
@@ -82,8 +27,8 @@ export default function PictureChoiceSummary({ questionSummary }: PictureChoiceS
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
           </div>
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4 " />
-            {totalResponses} responses
+            <InboxIcon className="mr-2 h-4 w-4 " />
+            {questionSummary.responseCount} responses
           </div>
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
             {isMulti ? "Multi" : "Single"} Select
@@ -109,7 +54,7 @@ export default function PictureChoiceSummary({ questionSummary }: PictureChoiceS
                 </div>
                 <div className="self-end">
                   <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                    {Math.round((result.percentage || 0) * 100)}%
+                    {Math.round(result.percentage)}%
                   </p>
                 </div>
               </div>
@@ -117,7 +62,7 @@ export default function PictureChoiceSummary({ questionSummary }: PictureChoiceS
                 {result.count} {result.count === 1 ? "response" : "responses"}
               </p>
             </div>
-            <ProgressBar barColor="bg-brand" progress={result.percentage || 0} />
+            <ProgressBar barColor="bg-brand" progress={result.percentage / 100 || 0} />
           </div>
         ))}
       </div>

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

@@ -1,98 +1,19 @@
 import Headline from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/Headline";
 import { questionTypes } from "@/app/lib/questions";
-import { InboxStackIcon } from "@heroicons/react/24/solid";
-import { CircleSlash2, SmileIcon, StarIcon } from "lucide-react";
+import { CircleSlash2, InboxIcon, SmileIcon, StarIcon } from "lucide-react";
 import { useMemo } from "react";
 
-import type { TSurveyQuestionSummary } from "@formbricks/types/surveys";
-import { TSurveyQuestionType } from "@formbricks/types/surveys";
-import { TSurveyRatingQuestion } from "@formbricks/types/surveys";
+import { TSurveySummaryRating } from "@formbricks/types/responses";
 import { ProgressBar } from "@formbricks/ui/ProgressBar";
 import { RatingResponse } from "@formbricks/ui/RatingResponse";
 
 interface RatingSummaryProps {
-  questionSummary: TSurveyQuestionSummary<TSurveyRatingQuestion>;
-}
-
-interface ChoiceResult {
-  label: number | string;
-  count: number;
-  percentage: number;
+  questionSummary: TSurveySummaryRating;
 }
 
 export default function RatingSummary({ questionSummary }: RatingSummaryProps) {
   const questionTypeInfo = questionTypes.find((type) => type.id === questionSummary.question.type);
 
-  const results: ChoiceResult[] = useMemo(() => {
-    if (questionSummary.question.type !== TSurveyQuestionType.Rating) return [];
-    // build a dictionary of choices
-    const resultsDict: { [key: string]: ChoiceResult } = {};
-    for (let i = 1; i <= questionSummary.question.range; i++) {
-      resultsDict[i.toString()] = {
-        count: 0,
-        label: i,
-        percentage: 0,
-      };
-    }
-    // count the responses
-    for (const response of questionSummary.responses) {
-      // if single choice, only add responses that are in the choices
-      if (!Array.isArray(response.value) && response.value in resultsDict) {
-        resultsDict[response.value].count += 1;
-      }
-    }
-    // add the percentage
-    const total = questionSummary.responses.length;
-    for (const key of Object.keys(resultsDict)) {
-      if (resultsDict[key].count) {
-        resultsDict[key].percentage = resultsDict[key].count / total;
-      }
-    }
-
-    // sort by count and transform to array
-    const results = Object.values(resultsDict).sort((a: any, b: any) => a.label - b.label);
-
-    return results;
-  }, [questionSummary]);
-
-  const dismissed: ChoiceResult = useMemo(() => {
-    if (questionSummary.question.required) return { count: 0, label: "Dismissed", percentage: 0 };
-
-    const total = questionSummary.responses.length;
-    let count = 0;
-    for (const response of questionSummary.responses) {
-      if (!response.value) {
-        count += 1;
-      }
-    }
-    return {
-      count,
-      label: "Dismissed",
-      percentage: count / total,
-    };
-  }, [questionSummary]);
-
-  const totalResponses = useMemo(() => {
-    let total = 0;
-    for (const result of results) {
-      total += result.count;
-    }
-    return total;
-  }, [results]);
-
-  const averageRating = useMemo(() => {
-    let total = 0;
-    let count = 0;
-    questionSummary.responses.forEach((response) => {
-      if (response.value && typeof response.value === "number") {
-        total += response.value;
-        count += 1;
-      }
-    });
-    const average = count > 0 ? total / count : 0;
-    return parseFloat(average.toFixed(2));
-  }, [questionSummary]);
-
   const getIconBasedOnScale = useMemo(() => {
     const scale = questionSummary.question.scale;
     if (scale === "number") return <CircleSlash2 className="h-4 w-4" />;
@@ -111,12 +32,12 @@ export default function RatingSummary({ questionSummary }: RatingSummaryProps) {
             {questionTypeInfo ? questionTypeInfo.label : "Unknown Question Type"} Question
           </div>
           <div className="flex items-center rounded-lg bg-slate-100 p-2">
-            <InboxStackIcon className="mr-2 h-4 w-4 " />
-            {totalResponses} responses
+            <InboxIcon className="mr-2 h-4 w-4 " />
+            {questionSummary.responseCount} responses
           </div>
           <div className="flex items-center space-x-2 rounded-lg bg-slate-100 p-2">
             {getIconBasedOnScale}
-            <div>Overall: {averageRating}</div>
+            <div>Overall: {questionSummary.average.toFixed(2)}</div>
           </div>
           {!questionSummary.question.required && (
             <div className="flex items-center  rounded-lg bg-slate-100 p-2">Optional</div>
@@ -124,20 +45,20 @@ export default function RatingSummary({ questionSummary }: RatingSummaryProps) {
         </div>
       </div>
       <div className="space-y-5 rounded-b-lg bg-white px-4 pb-6 pt-4 text-sm md:px-6 md:text-base">
-        {results.map((result: any) => (
-          <div key={result.label}>
+        {questionSummary.choices.map((result) => (
+          <div key={result.rating}>
             <div className="text flex justify-between px-2 pb-2">
-              <div className="mr-8 flex space-x-1">
+              <div className="mr-8 flex items-center space-x-1">
                 <div className="font-semibold text-slate-700">
                   <RatingResponse
                     scale={questionSummary.question.scale}
-                    answer={result.label}
+                    answer={result.rating}
                     range={questionSummary.question.range}
                   />
                 </div>
                 <div>
                   <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                    {Math.round(result.percentage * 100)}%
+                    {Math.round(result.percentage)}%
                   </p>
                 </div>
               </div>
@@ -145,27 +66,28 @@ export default function RatingSummary({ questionSummary }: RatingSummaryProps) {
                 {result.count} {result.count === 1 ? "response" : "responses"}
               </p>
             </div>
-            <ProgressBar barColor="bg-brand" progress={result.percentage} />
+            <ProgressBar barColor="bg-brand" progress={result.percentage / 100} />
           </div>
         ))}
       </div>
-      {dismissed.count > 0 && (
+      {questionSummary.dismissed && questionSummary.dismissed.count > 0 && (
         <div className="rounded-b-lg border-t bg-white px-6 pb-6 pt-4">
-          <div key={dismissed.label}>
+          <div key="dismissed">
             <div className="text flex justify-between px-2 pb-2">
               <div className="mr-8 flex space-x-1">
-                <p className="font-semibold text-slate-700">{dismissed.label}</p>
+                <p className="font-semibold text-slate-700">dismissed</p>
                 <div>
                   <p className="rounded-lg bg-slate-100 px-2 text-slate-700">
-                    {Math.round(dismissed.percentage * 100)}%
+                    {Math.round(questionSummary.dismissed.percentage)}%
                   </p>
                 </div>
               </div>
               <p className="flex w-32 items-end justify-end text-slate-600">
-                {dismissed.count} {dismissed.count === 1 ? "response" : "responses"}
+                {questionSummary.dismissed.count}{" "}
+                {questionSummary.dismissed.count === 1 ? "response" : "responses"}
               </p>
             </div>
-            <ProgressBar barColor="bg-slate-600" progress={dismissed.percentage} />
+            <ProgressBar barColor="bg-slate-600" progress={questionSummary.dismissed.percentage / 100} />
           </div>
         </div>
       )}

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

@@ -1,10 +1,18 @@
 "use client";
 
 import { generateSingleUseIdAction } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions";
-import { ArrowLeftIcon, CodeBracketIcon, EnvelopeIcon, LinkIcon } from "@heroicons/react/24/outline";
-import { DocumentDuplicateIcon } from "@heroicons/react/24/solid";
-import { BellRing, BlocksIcon, Code2Icon, RefreshCcw } from "lucide-react";
+import {
+  ArrowLeftIcon,
+  BellRing,
+  BlocksIcon,
+  Code2Icon,
+  CopyIcon,
+  LinkIcon,
+  MailIcon,
+  RefreshCcw,
+} from "lucide-react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 
@@ -28,13 +36,14 @@ interface ShareEmbedSurveyProps {
   user: TUser;
 }
 export default function ShareEmbedSurvey({ survey, open, setOpen, webAppUrl, user }: ShareEmbedSurveyProps) {
+  const router = useRouter();
   const environmentId = survey.environmentId;
   const isSingleUseLinkSurvey = survey.singleUse?.enabled ?? false;
   const { email } = user;
 
   const tabs = [
-    { id: "email", label: "Embed in an Email", icon: EnvelopeIcon },
-    { id: "webpage", label: "Embed in a Web Page", icon: CodeBracketIcon },
+    { id: "email", label: "Embed in an Email", icon: MailIcon },
+    { id: "webpage", label: "Embed in a Web Page", icon: Code2Icon },
     { id: "link", label: `${isSingleUseLinkSurvey ? "Single Use Links" : "Share the Link"}`, icon: LinkIcon },
   ];
 
@@ -73,6 +82,9 @@ export default function ShareEmbedSurvey({ survey, open, setOpen, webAppUrl, use
     setActiveId(tabs[0].id);
     setOpen(open);
     setShowInitialPage(open); // Reset to initial page when modal opens
+
+    // fetch latest responses
+    router.refresh();
   };
 
   const handleInitialPageButton = () => {
@@ -109,7 +121,7 @@ export default function ShareEmbedSurvey({ survey, open, setOpen, webAppUrl, use
                       navigator.clipboard.writeText(surveyUrl);
                       toast.success("URL copied to clipboard!");
                     }}
-                    EndIcon={DocumentDuplicateIcon}>
+                    EndIcon={CopyIcon}>
                     Copy Link
                   </Button>
                   {survey.singleUse?.enabled && (

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { CheckCircleIcon, ExclamationCircleIcon } from "@heroicons/react/24/solid";
+import { AlertCircleIcon, CheckCircle2Icon } from "lucide-react";
 import { Clipboard } from "lucide-react";
 import { toast } from "react-hot-toast";
 
@@ -32,7 +32,7 @@ export default function ShareSurveyResults({
       {showPublishModal && surveyUrl ? (
         <DialogContent className="flex flex-col rounded-2xl bg-white px-12 py-6">
           <div className="flex flex-col items-center gap-y-6 text-center">
-            <CheckCircleIcon className="h-20 w-20 text-slate-300" />
+            <CheckCircle2Icon className="h-20 w-20 text-slate-300" />
             <div>
               <p className="text-lg font-medium text-slate-600">Your survey results are public!</p>
               <p className="text-balanced mt-2 text-sm text-slate-500">
@@ -77,7 +77,7 @@ export default function ShareSurveyResults({
       ) : (
         <DialogContent className="flex flex-col rounded-2xl bg-white p-8">
           <div className="flex flex-col items-center gap-y-6 text-center">
-            <ExclamationCircleIcon className="h-20 w-20 text-slate-300" />
+            <AlertCircleIcon className="h-20 w-20 text-slate-300" />
             <div>
               <p className="text-lg font-medium text-slate-600">
                 You are about to release these survey results to the public.

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

@@ -1,164 +1,13 @@
-import { evaluateCondition } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/evaluateLogic";
 import { TimerIcon } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
 
-import { TResponse } from "@formbricks/types/responses";
-import { TSurvey } from "@formbricks/types/surveys";
+import { TSurveySummary } from "@formbricks/types/responses";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 
 interface SummaryDropOffsProps {
-  survey: TSurvey;
-  responses: TResponse[];
-  displayCount: number;
+  dropOff: TSurveySummary["dropOff"];
 }
 
-export default function SummaryDropOffs({ responses, survey, displayCount }: SummaryDropOffsProps) {
-  const initialAvgTtc = useMemo(
-    () =>
-      survey.questions.reduce((acc, question) => {
-        acc[question.id] = 0;
-        return acc;
-      }, {}),
-    [survey.questions]
-  );
-
-  const [avgTtc, setAvgTtc] = useState(initialAvgTtc);
-
-  interface DropoffMetricsType {
-    dropoffCount: number[];
-    viewsCount: number[];
-    dropoffPercentage: number[];
-  }
-  const [dropoffMetrics, setDropoffMetrics] = useState<DropoffMetricsType>({
-    dropoffCount: [],
-    viewsCount: [],
-    dropoffPercentage: [],
-  });
-
-  const calculateMetrics = useCallback(() => {
-    let totalTtc = { ...initialAvgTtc };
-    let responseCounts = { ...initialAvgTtc };
-
-    let dropoffArr = new Array(survey.questions.length).fill(0);
-    let viewsArr = new Array(survey.questions.length).fill(0);
-    let dropoffPercentageArr = new Array(survey.questions.length).fill(0);
-
-    responses.forEach((response) => {
-      // Calculate total time-to-completion
-      Object.keys(avgTtc).forEach((questionId) => {
-        if (response.ttc && response.ttc[questionId]) {
-          totalTtc[questionId] += response.ttc[questionId];
-          responseCounts[questionId]++;
-        }
-      });
-
-      let currQuesIdx = 0;
-
-      while (currQuesIdx < survey.questions.length) {
-        const currQues = survey.questions[currQuesIdx];
-        if (!currQues) break;
-
-        if (!currQues.required) {
-          if (!response.data[currQues.id]) {
-            viewsArr[currQuesIdx]++;
-
-            if (currQuesIdx === survey.questions.length - 1 && !response.finished) {
-              dropoffArr[currQuesIdx]++;
-              break;
-            }
-
-            const questionHasCustomLogic = currQues.logic;
-            if (questionHasCustomLogic) {
-              let didLogicPass = false;
-              for (let logic of questionHasCustomLogic) {
-                if (!logic.destination) continue;
-                if (evaluateCondition(logic, response.data[currQues.id] ?? null)) {
-                  didLogicPass = true;
-                  currQuesIdx = survey.questions.findIndex((q) => q.id === logic.destination);
-                  break;
-                }
-              }
-              if (!didLogicPass) currQuesIdx++;
-            } else {
-              currQuesIdx++;
-            }
-            continue;
-          }
-        }
-
-        if (
-          (response.data[currQues.id] === undefined && !response.finished) ||
-          (currQues.required && !response.data[currQues.id])
-        ) {
-          dropoffArr[currQuesIdx]++;
-          viewsArr[currQuesIdx]++;
-          break;
-        }
-
-        viewsArr[currQuesIdx]++;
-
-        let nextQuesIdx = currQuesIdx + 1;
-        const questionHasCustomLogic = currQues.logic;
-
-        if (questionHasCustomLogic) {
-          for (let logic of questionHasCustomLogic) {
-            if (!logic.destination) continue;
-            if (evaluateCondition(logic, response.data[currQues.id])) {
-              nextQuesIdx = survey.questions.findIndex((q) => q.id === logic.destination);
-              break;
-            }
-          }
-        }
-
-        if (!response.data[survey.questions[nextQuesIdx]?.id] && !response.finished) {
-          dropoffArr[nextQuesIdx]++;
-          viewsArr[nextQuesIdx]++;
-          break;
-        }
-
-        currQuesIdx = nextQuesIdx;
-      }
-    });
-
-    // Calculate the average time for each question
-    Object.keys(totalTtc).forEach((questionId) => {
-      totalTtc[questionId] =
-        responseCounts[questionId] > 0 ? totalTtc[questionId] / responseCounts[questionId] : 0;
-    });
-
-    if (!survey.welcomeCard.enabled) {
-      dropoffArr[0] = displayCount - viewsArr[0];
-      if (viewsArr[0] > displayCount) dropoffPercentageArr[0] = 0;
-
-      dropoffPercentageArr[0] =
-        viewsArr[0] - displayCount >= 0 ? 0 : ((displayCount - viewsArr[0]) / displayCount) * 100 || 0;
-
-      viewsArr[0] = displayCount;
-    } else {
-      dropoffPercentageArr[0] = (dropoffArr[0] / viewsArr[0]) * 100;
-    }
-
-    for (let i = 1; i < survey.questions.length; i++) {
-      if (viewsArr[i] !== 0) {
-        dropoffPercentageArr[i] = (dropoffArr[i] / viewsArr[i]) * 100;
-      }
-    }
-
-    return {
-      newAvgTtc: totalTtc,
-      dropoffCount: dropoffArr,
-      viewsCount: viewsArr,
-      dropoffPercentage: dropoffPercentageArr,
-    };
-  }, [responses, survey.questions, displayCount, initialAvgTtc, avgTtc, survey.welcomeCard.enabled]);
-
-  useEffect(() => {
-    const { newAvgTtc, dropoffCount, viewsCount, dropoffPercentage } = calculateMetrics();
-    setAvgTtc(newAvgTtc);
-    setDropoffMetrics({ dropoffCount, viewsCount, dropoffPercentage });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [responses]);
-
+export default function SummaryDropOffs({ dropOff }: SummaryDropOffsProps) {
   return (
     <div className="rounded-lg border border-slate-200 bg-slate-50 shadow-sm">
       <div className="rounded-b-lg bg-white ">
@@ -179,20 +28,18 @@ export default function SummaryDropOffs({ responses, survey, displayCount }: Sum
           <div className="px-4 text-center md:px-6">Views</div>
           <div className="pr-6 text-center md:pl-6">Drop Offs</div>
         </div>
-        {survey.questions.map((question, i) => (
+        {dropOff.map((quesDropOff) => (
           <div
-            key={question.id}
+            key={quesDropOff.questionId}
             className="grid grid-cols-6 items-center border-b border-slate-100 py-2 text-sm text-slate-800 md:text-base">
-            <div className="col-span-3 pl-4 md:pl-6">{question.headline}</div>
+            <div className="col-span-3 pl-4 md:pl-6">{quesDropOff.headline}</div>
             <div className="whitespace-pre-wrap text-center font-semibold">
-              {avgTtc[question.id] !== undefined ? (avgTtc[question.id] / 1000).toFixed(2) + "s" : "N/A"}
-            </div>
-            <div className="whitespace-pre-wrap text-center font-semibold">
-              {dropoffMetrics.viewsCount[i]}
+              {quesDropOff.ttc > 0 ? (quesDropOff.ttc / 1000).toFixed(2) + "s" : "N/A"}
             </div>
+            <div className="whitespace-pre-wrap text-center font-semibold">{quesDropOff.views}</div>
             <div className=" pl-6 text-center md:px-6">
-              <span className="font-semibold">{dropoffMetrics.dropoffCount[i]} </span>
-              <span>({Math.round(dropoffMetrics.dropoffPercentage[i])}%)</span>
+              <span className="font-semibold">{quesDropOff.dropOffCount}</span>
+              <span>({Math.round(quesDropOff.dropOffPercentage)}%)</span>
             </div>
           </div>
         ))}

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

@@ -4,26 +4,9 @@ import ConsentSummary from "@/app/(app)/environments/[environmentId]/surveys/[su
 import HiddenFieldsSummary from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/HiddenFieldsSummary";
 
 import { TEnvironment } from "@formbricks/types/environment";
-import { TResponse } from "@formbricks/types/responses";
+import { TSurveySummary } from "@formbricks/types/responses";
 import { TSurveyQuestionType } from "@formbricks/types/surveys";
-import type {
-  TSurveyCalQuestion,
-  TSurveyDateQuestion,
-  TSurveyFileUploadQuestion,
-  TSurveyPictureSelectionQuestion,
-  TSurveyQuestionSummary,
-} from "@formbricks/types/surveys";
-import {
-  TSurvey,
-  TSurveyCTAQuestion,
-  TSurveyConsentQuestion,
-  TSurveyMultipleChoiceMultiQuestion,
-  TSurveyMultipleChoiceSingleQuestion,
-  TSurveyNPSQuestion,
-  TSurveyOpenTextQuestion,
-  TSurveyQuestion,
-  TSurveyRatingQuestion,
-} from "@formbricks/types/surveys";
+import { TSurvey } from "@formbricks/types/surveys";
 import EmptySpaceFiller from "@formbricks/ui/EmptySpaceFiller";
 
 import CTASummary from "./CTASummary";
@@ -36,157 +19,105 @@ import PictureChoiceSummary from "./PictureChoiceSummary";
 import RatingSummary from "./RatingSummary";
 
 interface SummaryListProps {
+  summary: TSurveySummary["summary"];
+  responseCount: number | null;
   environment: TEnvironment;
   survey: TSurvey;
-  responses: TResponse[];
-  responsesPerPage: number;
 }
 
-export default function SummaryList({ environment, survey, responses, responsesPerPage }: SummaryListProps) {
-  const getSummaryData = (): TSurveyQuestionSummary<TSurveyQuestion>[] =>
-    survey.questions.map((question) => {
-      const questionResponses = responses
-        .filter((response) => question.id in response.data)
-        .map((r) => ({
-          id: r.id,
-          value: r.data[question.id],
-          updatedAt: r.updatedAt,
-          person: r.person,
-        }));
-
-      return {
-        question,
-        responses: questionResponses,
-      };
-    });
-
+export default function SummaryList({ summary, environment, responseCount, survey }: SummaryListProps) {
   return (
     <div className="mt-10 space-y-8">
-      {survey.type === "web" && responses.length === 0 && !environment.widgetSetupCompleted ? (
+      {survey.type === "web" && responseCount === 0 && !environment.widgetSetupCompleted ? (
         <EmptyInAppSurveys environment={environment} />
-      ) : responses.length === 0 ? (
+      ) : !responseCount ? (
         <EmptySpaceFiller
           type="response"
           environment={environment}
           noWidgetRequired={survey.type === "link"}
         />
+      ) : !summary.length ? (
+        <EmptySpaceFiller type="summary" environment={environment} />
       ) : (
-        <>
-          {getSummaryData().map((questionSummary) => {
-            if (questionSummary.question.type === TSurveyQuestionType.OpenText) {
-              return (
-                <OpenTextSummary
-                  key={questionSummary.question.id}
-                  questionSummary={questionSummary as TSurveyQuestionSummary<TSurveyOpenTextQuestion>}
-                  environmentId={environment.id}
-                  responsesPerPage={responsesPerPage}
-                />
-              );
-            }
-            if (
-              questionSummary.question.type === TSurveyQuestionType.MultipleChoiceSingle ||
-              questionSummary.question.type === TSurveyQuestionType.MultipleChoiceMulti
-            ) {
-              return (
-                <MultipleChoiceSummary
-                  key={questionSummary.question.id}
-                  questionSummary={
-                    questionSummary as TSurveyQuestionSummary<
-                      TSurveyMultipleChoiceMultiQuestion | TSurveyMultipleChoiceSingleQuestion
-                    >
-                  }
-                  environmentId={environment.id}
-                  surveyType={survey.type}
-                  responsesPerPage={responsesPerPage}
-                />
-              );
-            }
-            if (questionSummary.question.type === TSurveyQuestionType.NPS) {
-              return (
-                <NPSSummary
-                  key={questionSummary.question.id}
-                  questionSummary={questionSummary as TSurveyQuestionSummary<TSurveyNPSQuestion>}
-                />
-              );
-            }
-            if (questionSummary.question.type === TSurveyQuestionType.CTA) {
-              return (
-                <CTASummary
-                  key={questionSummary.question.id}
-                  questionSummary={questionSummary as TSurveyQuestionSummary<TSurveyCTAQuestion>}
-                />
-              );
-            }
-            if (questionSummary.question.type === TSurveyQuestionType.Rating) {
-              return (
-                <RatingSummary
-                  key={questionSummary.question.id}
-                  questionSummary={questionSummary as TSurveyQuestionSummary<TSurveyRatingQuestion>}
-                />
-              );
-            }
-            if (questionSummary.question.type === TSurveyQuestionType.Consent) {
-              return (
-                <ConsentSummary
-                  key={questionSummary.question.id}
-                  questionSummary={questionSummary as TSurveyQuestionSummary<TSurveyConsentQuestion>}
-                />
-              );
-            }
-            if (questionSummary.question.type === TSurveyQuestionType.PictureSelection) {
-              return (
-                <PictureChoiceSummary
-                  key={questionSummary.question.id}
-                  questionSummary={questionSummary as TSurveyQuestionSummary<TSurveyPictureSelectionQuestion>}
-                />
-              );
-            }
-            if (questionSummary.question.type === TSurveyQuestionType.Date) {
-              return (
-                <DateQuestionSummary
-                  key={questionSummary.question.id}
-                  questionSummary={questionSummary as TSurveyQuestionSummary<TSurveyDateQuestion>}
-                  environmentId={environment.id}
-                  responsesPerPage={responsesPerPage}
-                />
-              );
-            }
-            if (questionSummary.question.type === TSurveyQuestionType.FileUpload) {
-              return (
-                <FileUploadSummary
-                  key={questionSummary.question.id}
-                  questionSummary={questionSummary as TSurveyQuestionSummary<TSurveyFileUploadQuestion>}
-                  environmentId={environment.id}
-                />
-              );
-            }
+        summary.map((questionSummary) => {
+          if (questionSummary.type === TSurveyQuestionType.OpenText) {
+            return (
+              <OpenTextSummary
+                key={questionSummary.question.id}
+                questionSummary={questionSummary}
+                environmentId={environment.id}
+              />
+            );
+          }
+          if (
+            questionSummary.type === TSurveyQuestionType.MultipleChoiceSingle ||
+            questionSummary.type === TSurveyQuestionType.MultipleChoiceMulti
+          ) {
+            return (
+              <MultipleChoiceSummary
+                key={questionSummary.question.id}
+                questionSummary={questionSummary}
+                environmentId={environment.id}
+                surveyType={survey.type}
+              />
+            );
+          }
+          if (questionSummary.type === TSurveyQuestionType.NPS) {
+            return <NPSSummary key={questionSummary.question.id} questionSummary={questionSummary} />;
+          }
+          if (questionSummary.type === TSurveyQuestionType.CTA) {
+            return <CTASummary key={questionSummary.question.id} questionSummary={questionSummary} />;
+          }
+          if (questionSummary.type === TSurveyQuestionType.Rating) {
+            return <RatingSummary key={questionSummary.question.id} questionSummary={questionSummary} />;
+          }
+          if (questionSummary.type === TSurveyQuestionType.Consent) {
+            return <ConsentSummary key={questionSummary.question.id} questionSummary={questionSummary} />;
+          }
+          if (questionSummary.type === TSurveyQuestionType.PictureSelection) {
+            return (
+              <PictureChoiceSummary key={questionSummary.question.id} questionSummary={questionSummary} />
+            );
+          }
+          if (questionSummary.type === TSurveyQuestionType.Date) {
+            return (
+              <DateQuestionSummary
+                key={questionSummary.question.id}
+                questionSummary={questionSummary}
+                environmentId={environment.id}
+              />
+            );
+          }
+          if (questionSummary.type === TSurveyQuestionType.FileUpload) {
+            return (
+              <FileUploadSummary
+                key={questionSummary.question.id}
+                questionSummary={questionSummary}
+                environmentId={environment.id}
+              />
+            );
+          }
+          if (questionSummary.type === TSurveyQuestionType.Cal) {
+            return (
+              <CalSummary
+                key={questionSummary.question.id}
+                questionSummary={questionSummary}
+                environmentId={environment.id}
+              />
+            );
+          }
+          if (questionSummary.type === "hiddenField") {
+            return (
+              <HiddenFieldsSummary
+                key={questionSummary.question}
+                questionSummary={questionSummary}
+                environment={environment}
+              />
+            );
+          }
 
-            if (questionSummary.question.type === TSurveyQuestionType.Cal) {
-              return (
-                <CalSummary
-                  key={questionSummary.question.id}
-                  questionSummary={questionSummary as TSurveyQuestionSummary<TSurveyCalQuestion>}
-                  environmentId={environment.id}
-                />
-              );
-            }
-
-            return null;
-          })}
-
-          {survey.hiddenFields?.enabled &&
-            survey.hiddenFields.fieldIds?.map((question) => {
-              return (
-                <HiddenFieldsSummary
-                  environment={environment}
-                  question={question}
-                  responses={responses}
-                  survey={survey}
-                  key={question}
-                />
-              );
-            })}
-        </>
+          return null;
+        })
       )}
     </div>
   );

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

@@ -1,18 +1,16 @@
-import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/solid";
-import { useMemo, useState } from "react";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
 import { timeSinceConditionally } from "@formbricks/lib/time";
-import { TResponse } from "@formbricks/types/responses";
+import { TSurveySummary } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys";
 import { Button } from "@formbricks/ui/Button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 
 interface SummaryMetadataProps {
-  responses: TResponse[];
-  showDropOffs: boolean;
-  setShowDropOffs: React.Dispatch<React.SetStateAction<boolean>>;
   survey: TSurvey;
-  displayCount: number;
+  setShowDropOffs: React.Dispatch<React.SetStateAction<boolean>>;
+  showDropOffs: boolean;
+  surveySummary: TSurveySummary["meta"];
 }
 
 const StatCard = ({ label, percentage, value, tooltipText }) => (
@@ -36,8 +34,8 @@ const StatCard = ({ label, percentage, value, tooltipText }) => (
   </TooltipProvider>
 );
 
-function formatTime(ttc, totalResponses) {
-  const seconds = ttc / (1000 * totalResponses);
+function formatTime(ttc) {
+  const seconds = ttc / 1000;
   let formattedValue;
 
   if (seconds >= 60) {
@@ -52,29 +50,21 @@ function formatTime(ttc, totalResponses) {
 }
 
 export default function SummaryMetadata({
-  responses,
   survey,
-  displayCount,
   setShowDropOffs,
   showDropOffs,
+  surveySummary,
 }: SummaryMetadataProps) {
-  const completedResponsesCount = useMemo(() => responses.filter((r) => r.finished).length, [responses]);
-  const [validTtcResponsesCount, setValidResponsesCount] = useState(0);
-
-  const ttc = useMemo(() => {
-    let validTtcResponsesCountAcc = 0; //stores the count of responses that contains a _total value
-    const ttc = responses.reduce((acc, response) => {
-      if (response.ttc?._total) {
-        validTtcResponsesCountAcc++;
-        return acc + response.ttc._total;
-      }
-      return acc;
-    }, 0);
-    setValidResponsesCount(validTtcResponsesCountAcc);
-    return ttc;
-  }, [responses]);
-
-  const totalResponses = responses.length;
+  const {
+    completedPercentage,
+    completedResponses,
+    displayCount,
+    dropOffPercentage,
+    dropOffCount,
+    startsPercentage,
+    totalResponses,
+    ttcAverage,
+  } = surveySummary;
 
   return (
     <div className="mb-4">
@@ -88,28 +78,26 @@ export default function SummaryMetadata({
           />
           <StatCard
             label="Starts"
-            percentage={`${Math.round((totalResponses / displayCount) * 100)}%`}
+            percentage={`${Math.round(startsPercentage)}%`}
             value={totalResponses === 0 ? <span>-</span> : totalResponses}
             tooltipText="Number of times the survey has been started."
           />
           <StatCard
             label="Responses"
-            percentage={`${Math.round((completedResponsesCount / displayCount) * 100)}%`}
-            value={responses.length === 0 ? <span>-</span> : completedResponsesCount}
+            percentage={`${Math.round(completedPercentage)}%`}
+            value={completedResponses === 0 ? <span>-</span> : completedResponses}
             tooltipText="Number of times the survey has been completed."
           />
           <StatCard
             label="Drop Offs"
-            percentage={`${Math.round(((totalResponses - completedResponsesCount) / totalResponses) * 100)}%`}
-            value={responses.length === 0 ? <span>-</span> : totalResponses - completedResponsesCount}
+            percentage={`${Math.round(dropOffPercentage)}%`}
+            value={dropOffCount === 0 ? <span>-</span> : dropOffCount}
             tooltipText="Number of times the survey has been started but not completed."
           />
           <StatCard
             label="Time to Complete"
             percentage={null}
-            value={
-              validTtcResponsesCount === 0 ? <span>-</span> : `${formatTime(ttc, validTtcResponsesCount)}`
-            }
+            value={ttcAverage === 0 ? <span>-</span> : `${formatTime(ttcAverage)}`}
             tooltipText="Average time to complete the survey."
           />
         </div>

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

@@ -1,13 +1,17 @@
 "use client";
 
 import { useResponseFilter } from "@/app/(app)/environments/[environmentId]/components/ResponseFilterContext";
+import {
+  getResponseCountAction,
+  getSurveySummaryAction,
+} from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/actions";
 import SurveyResultsTabs from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/SurveyResultsTabs";
 import SummaryDropOffs from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryDropOffs";
 import SummaryList from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryList";
 import SummaryMetadata from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SummaryMetadata";
 import CustomFilter from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/CustomFilter";
 import SummaryHeader from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/components/SummaryHeader";
-import { getFilterResponses } from "@/app/lib/surveys/surveys";
+import { getFormattedFilters } from "@/app/lib/surveys/surveys";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 
@@ -15,7 +19,7 @@ import { checkForRecallInHeadline } from "@formbricks/lib/utils/recall";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TMembershipRole } from "@formbricks/types/memberships";
 import { TProduct } from "@formbricks/types/product";
-import { TResponse, TSurveyPersonAttributes } from "@formbricks/types/responses";
+import { TSurveyPersonAttributes, TSurveySummary } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys";
 import { TTag } from "@formbricks/types/tags";
 import { TUser } from "@formbricks/types/user";
@@ -23,18 +27,30 @@ import ContentWrapper from "@formbricks/ui/ContentWrapper";
 
 import ResultsShareButton from "../../../components/ResultsShareButton";
 
+const initialSurveySummary: TSurveySummary = {
+  meta: {
+    completedPercentage: 0,
+    completedResponses: 0,
+    displayCount: 0,
+    dropOffPercentage: 0,
+    dropOffCount: 0,
+    startsPercentage: 0,
+    totalResponses: 0,
+    ttcAverage: 0,
+  },
+  dropOff: [],
+  summary: [],
+};
+
 interface SummaryPageProps {
   environment: TEnvironment;
   survey: TSurvey;
   surveyId: string;
-  responses: TResponse[];
   webAppUrl: string;
   product: TProduct;
   user: TUser;
   environmentTags: TTag[];
   attributes: TSurveyPersonAttributes;
-  displayCount: number;
-  responsesPerPage: number;
   membershipRole?: TMembershipRole;
 }
 
@@ -42,33 +58,49 @@ const SummaryPage = ({
   environment,
   survey,
   surveyId,
-  responses,
   webAppUrl,
   product,
   user,
   environmentTags,
   attributes,
-  displayCount,
-  responsesPerPage,
   membershipRole,
 }: SummaryPageProps) => {
+  const [responseCount, setResponseCount] = useState<number | null>(null);
   const { selectedFilter, dateRange, resetState } = useResponseFilter();
+  const [surveySummary, setSurveySummary] = useState<TSurveySummary>(initialSurveySummary);
   const [showDropOffs, setShowDropOffs] = useState<boolean>(false);
+
+  const filters = useMemo(
+    () => getFormattedFilters(survey, selectedFilter, dateRange),
+    [survey, selectedFilter, dateRange]
+  );
+
+  useEffect(() => {
+    const handleInitialData = async () => {
+      const responseCount = await getResponseCountAction(surveyId, filters);
+      setResponseCount(responseCount);
+      if (responseCount === 0) {
+        setSurveySummary(initialSurveySummary);
+        return;
+      }
+      const response = await getSurveySummaryAction(surveyId, filters);
+      setSurveySummary(response);
+    };
+
+    handleInitialData();
+  }, [filters, surveyId]);
+
   const searchParams = useSearchParams();
   survey = useMemo(() => {
     return checkForRecallInHeadline(survey);
   }, [survey]);
+
   useEffect(() => {
     if (!searchParams?.get("referer")) {
       resetState();
     }
   }, [searchParams, resetState]);
 
-  // get the filtered array when the selected filter value changes
-  const filterResponses: TResponse[] = useMemo(() => {
-    return getFilterResponses(responses, selectedFilter, survey, dateRange);
-  }, [selectedFilter, responses, survey, dateRange]);
-
   return (
     <ContentWrapper>
       <SummaryHeader
@@ -84,20 +116,24 @@ const SummaryPage = ({
         <CustomFilter environmentTags={environmentTags} attributes={attributes} survey={survey} />
         <ResultsShareButton survey={survey} webAppUrl={webAppUrl} product={product} user={user} />
       </div>
-      <SurveyResultsTabs activeId="summary" environmentId={environment.id} surveyId={surveyId} />
+      <SurveyResultsTabs
+        activeId="summary"
+        environmentId={environment.id}
+        surveyId={surveyId}
+        responseCount={responseCount}
+      />
       <SummaryMetadata
-        responses={filterResponses}
         survey={survey}
-        displayCount={displayCount}
+        surveySummary={surveySummary.meta}
         showDropOffs={showDropOffs}
         setShowDropOffs={setShowDropOffs}
       />
-      {showDropOffs && <SummaryDropOffs survey={survey} responses={responses} displayCount={displayCount} />}
+      {showDropOffs && <SummaryDropOffs dropOff={surveySummary.dropOff} />}
       <SummaryList
-        responses={filterResponses}
+        summary={surveySummary.summary}
+        responseCount={responseCount}
         survey={survey}
         environment={environment}
-        responsesPerPage={responsesPerPage}
       />
     </ContentWrapper>
   );

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { CodeBracketIcon, DocumentDuplicateIcon, EnvelopeIcon } from "@heroicons/react/24/solid";
+import { Code2Icon, CopyIcon, MailIcon } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
 
@@ -69,7 +69,7 @@ export default function EmailTab({ surveyId, email }: EmailTabProps) {
               navigator.clipboard.writeText(emailHtml);
             }}
             className="shrink-0"
-            EndIcon={DocumentDuplicateIcon}>
+            EndIcon={CopyIcon}>
             Copy code
           </Button>
         ) : (
@@ -79,7 +79,7 @@ export default function EmailTab({ surveyId, email }: EmailTabProps) {
               title="send preview email"
               aria-label="send preview email"
               onClick={() => sendPreviewEmail(emailHtmlPreview)}
-              EndIcon={EnvelopeIcon}
+              EndIcon={MailIcon}
               className="shrink-0">
               Send Preview
             </Button>
@@ -92,7 +92,7 @@ export default function EmailTab({ surveyId, email }: EmailTabProps) {
           onClick={() => {
             setShowEmbed(!showEmbed);
           }}
-          EndIcon={CodeBracketIcon}
+          EndIcon={Code2Icon}
           className="shrink-0">
           {showEmbed ? "Hide Embed Code" : "View Embed Code"}
         </Button>

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

@@ -1,5 +1,5 @@
 import UrlShortenerForm from "@/app/(app)/environments/[environmentId]/components/UrlShortenerForm";
-import { DocumentDuplicateIcon } from "@heroicons/react/24/solid";
+import { CopyIcon } from "lucide-react";
 import { RefreshCcw } from "lucide-react";
 import Link from "next/link";
 import { useRef } from "react";
@@ -80,7 +80,7 @@ export default function LinkTab({
                 navigator.clipboard.writeText(surveyUrl);
                 toast.success("URL copied to clipboard!");
               }}
-              EndIcon={DocumentDuplicateIcon}>
+              EndIcon={CopyIcon}>
               Copy Link
             </Button>
             {isSingleUseLinkSurvey && (