implement ui feedback

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Matti Nannt <matti@formbricks.com>

.cursor/rules/build-and-deployment.mdc

@@ -1,61 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: false
----
-# Build & Deployment Best Practices
-
-## Build Process
-
-### Running Builds
-- Use `pnpm build` from project root for full build
-- Monitor for React hooks warnings and fix them immediately
-- Ensure all TypeScript errors are resolved before deployment
-
-### Common Build Issues & Fixes
-
-#### React Hooks Warnings
-- Capture ref values in variables within useEffect cleanup
-- Avoid accessing `.current` directly in cleanup functions
-- Pattern for fixing ref cleanup warnings:
-```typescript
-useEffect(() => {
-  const currentRef = myRef.current;
-  return () => {
-    if (currentRef) {
-      currentRef.cleanup();
-    }
-  };
-}, []);
-```
-
-#### Test Failures During Build
-- Ensure all test mocks include required constants like `SESSION_MAX_AGE`
-- Mock Next.js navigation hooks properly: `useParams`, `useRouter`, `useSearchParams`
-- Remove unused imports and constants from test files
-- Use literal values instead of imported constants when the constant isn't actually needed
-
-### Test Execution
-- Run `pnpm test` to execute all tests
-- Use `pnpm test -- --run filename.test.tsx` for specific test files
-- Fix test failures before merging code
-- Ensure 100% test coverage for new components
-
-### Performance Monitoring
-- Monitor build times and optimize if necessary
-- Watch for memory usage during builds
-- Use proper caching strategies for faster rebuilds
-
-### Deployment Checklist
-1. All tests passing
-2. Build completes without warnings
-3. TypeScript compilation successful
-4. No linter errors
-5. Database migrations applied (if any)
-6. Environment variables configured
-
-### EKS Deployment Considerations
-- Ensure latest code is deployed to all pods
-- Monitor AWS RDS Performance Insights for database issues
-- Verify environment-specific configurations
-- Check pod health and resource usage

.cursor/rules/cache-optimization.mdc

@@ -1,415 +0,0 @@
----
-description: Caching rules for performance improvements
-globs: 
-alwaysApply: false
----
-# Cache Optimization Patterns for Formbricks
-
-## Cache Strategy Overview
-
-Formbricks uses a **hybrid caching approach** optimized for enterprise scale:
-
-- **Redis** for persistent cross-request caching  
-- **React `cache()`** for request-level deduplication
-- **NO Next.js `unstable_cache()`** - avoid for reliability
-
-## Key Files
-
-### Core Cache Infrastructure
-- [packages/cache/src/service.ts](mdc:packages/cache/src/service.ts) - Redis cache service
-- [packages/cache/src/client.ts](mdc:packages/cache/src/client.ts) - Cache client initialization and singleton management  
-- [apps/web/lib/cache/index.ts](mdc:apps/web/lib/cache/index.ts) - Cache service proxy for web app
-- [packages/cache/src/index.ts](mdc:packages/cache/src/index.ts) - Cache package exports and utilities
-
-### Environment State Caching (Critical Endpoint)
-- [apps/web/app/api/v1/client/[environmentId]/environment/route.ts](mdc:apps/web/app/api/v1/client/[environmentId]/environment/route.ts) - Main endpoint serving hundreds of thousands of SDK clients
-- [apps/web/app/api/v1/client/[environmentId]/environment/lib/data.ts](mdc:apps/web/app/api/v1/client/[environmentId]/environment/lib/data.ts) - Optimized data layer with caching
-
-## Enterprise-Grade Cache Key Patterns
-
-**Always use** the `createCacheKey` utilities from the cache package:
-
-```typescript
-// ✅ Correct patterns
-createCacheKey.environment.state(environmentId)     // "fb:env:abc123:state"
-createCacheKey.organization.billing(organizationId) // "fb:org:xyz789:billing"
-createCacheKey.license.status(organizationId)       // "fb:license:org123:status"
-createCacheKey.user.permissions(userId, orgId)      // "fb:user:456:org:123:permissions"
-
-// ❌ Never use flat keys - collision-prone
-"environment_abc123"
-"user_data_456"
-```
-
-## When to Use Each Cache Type
-
-### Use React `cache()` for Request Deduplication
-```typescript
-// ✅ Prevents multiple calls within same request
-export const getEnterpriseLicense = reactCache(async () => {
-  // Complex license validation logic
-});
-```
-
-### Use `cache.withCache()` for Simple Database Queries
-```typescript
-// ✅ Simple caching with automatic fallback (TTL in milliseconds)
-export const getActionClasses = (environmentId: string) => {
-  return cache.withCache(() => fetchActionClassesFromDB(environmentId), 
-    createCacheKey.environment.actionClasses(environmentId),
-    60 * 30 * 1000 // 30 minutes in milliseconds
-  );
-};
-```
-
-### Use Explicit Redis Cache for Complex Business Logic
-```typescript
-// ✅ Full control for high-stakes endpoints
-export const getEnvironmentState = async (environmentId: string) => {
-  const cached = await environmentStateCache.getEnvironmentState(environmentId);
-  if (cached) return cached;
-  
-  const fresh = await buildComplexState(environmentId);
-  await environmentStateCache.setEnvironmentState(environmentId, fresh);
-  return fresh;
-};
-```
-
-## Caching Decision Framework
-
-### When TO Add Caching
-
-```typescript
-// ✅ Expensive operations that benefit from caching
-- Database queries (>10ms typical)
-- External API calls (>50ms typical)  
-- Complex computations (>5ms)
-- File system operations
-- Heavy data transformations
-
-// Example: Database query with complex joins (TTL in milliseconds)
-export const getEnvironmentWithDetails = withCache(
-  async (environmentId: string) => {
-    return prisma.environment.findUnique({
-      where: { id: environmentId },
-      include: { /* complex joins */ }
-    });
-  },
-  { key: createCacheKey.environment.details(environmentId), ttl: 60 * 30 * 1000 } // 30 minutes
-)();
-```
-
-### When NOT to Add Caching
-
-```typescript
-// ❌ Don't cache these operations - minimal overhead
-- Simple property access (<0.1ms)
-- Basic transformations (<1ms)
-- Functions that just call already-cached functions
-- Pure computation without I/O
-
-// ❌ Bad example: Redundant caching
-const getCachedLicenseFeatures = withCache(
-  async () => {
-    const license = await getEnterpriseLicense(); // Already cached!
-    return license.active ? license.features : null; // Just property access
-  },
-  { key: "license-features", ttl: 1800 * 1000 } // 30 minutes in milliseconds
-);
-
-// ✅ Good example: Simple and efficient
-const getLicenseFeatures = async () => {
-  const license = await getEnterpriseLicense(); // Already cached
-  return license.active ? license.features : null; // 0.1ms overhead
-};
-```
-
-### Computational Overhead Analysis
-
-Before adding caching, analyze the overhead:
-
-```typescript
-// ✅ High overhead - CACHE IT
-- Database queries: ~10-100ms
-- External APIs: ~50-500ms  
-- File I/O: ~5-50ms
-- Complex algorithms: >5ms
-
-// ❌ Low overhead - DON'T CACHE
-- Property access: ~0.001ms
-- Simple lookups: ~0.1ms
-- Basic validation: ~1ms
-- Type checks: ~0.01ms
-
-// Example decision tree:
-const expensiveOperation = async () => {
-  return prisma.query(); // 50ms - CACHE IT
-};
-
-const cheapOperation = (data: any) => {
-  return data.property; // 0.001ms - DON'T CACHE
-};
-```
-
-### Avoid Cache Wrapper Anti-Pattern
-
-```typescript
-// ❌ Don't create wrapper functions just for caching
-const getCachedUserPermissions = withCache(
-  async (userId: string) => getUserPermissions(userId),
-  { key: createCacheKey.user.permissions(userId), ttl: 3600 * 1000 } // 1 hour in milliseconds
-);
-
-// ✅ Add caching directly to the original function
-export const getUserPermissions = withCache(
-  async (userId: string) => {
-    return prisma.user.findUnique({
-      where: { id: userId },
-      include: { permissions: true }
-    });
-  },
-  { key: createCacheKey.user.permissions(userId), ttl: 3600 * 1000 } // 1 hour in milliseconds
-);
-```
-
-## TTL Coordination Strategy
-
-### Multi-Layer Cache Coordination
-For endpoints serving client SDKs, coordinate TTLs across layers:
-
-```typescript
-// Client SDK cache (expiresAt) - longest TTL for fewer requests
-const CLIENT_TTL = 60;           // 1 minute (seconds for client)
-
-// Server Redis cache - shorter TTL ensures fresh data for clients  
-const SERVER_TTL = 60 * 1000;   // 1 minutes in milliseconds
-
-// HTTP cache headers (seconds)
-const BROWSER_TTL = 60;         // 1 minute (max-age)
-const CDN_TTL = 60;             // 1 minute (s-maxage)
-const CORS_TTL = 60 * 60;            // 1 hour (balanced approach)
-```
-
-### Standard TTL Guidelines (in milliseconds for cache-manager + Keyv)
-```typescript
-// Configuration data - rarely changes
-const CONFIG_TTL = 60 * 60 * 24 * 1000;     // 24 hours
-
-// User data - moderate frequency  
-const USER_TTL = 60 * 60 * 2 * 1000;        // 2 hours
-
-// Survey data - changes moderately
-const SURVEY_TTL = 60 * 15 * 1000;          // 15 minutes
-
-// Billing data - expensive to compute
-const BILLING_TTL = 60 * 30 * 1000;         // 30 minutes
-
-// Action classes - infrequent changes
-const ACTION_CLASS_TTL = 60 * 30 * 1000;    // 30 minutes
-```
-
-## High-Frequency Endpoint Optimization
-
-### Performance Patterns for High-Volume Endpoints
-
-```typescript
-// ✅ Optimized high-frequency endpoint pattern
-export const GET = async (request: NextRequest, props: { params: Promise<{ id: string }> }) => {
-  const params = await props.params;
-
-  try {
-    // Simple validation (avoid Zod for high-frequency)
-    if (!params.id || typeof params.id !== 'string') {
-      return responses.badRequestResponse("ID is required", undefined, true);
-    }
-
-    // Single optimized query with caching
-    const data = await getOptimizedData(params.id);
-
-    return responses.successResponse(
-      {
-        data,
-        expiresAt: new Date(Date.now() + CLIENT_TTL * 1000), // SDK cache duration
-      },
-      true,
-      "public, s-maxage=1800, max-age=3600, stale-while-revalidate=1800, stale-if-error=3600"
-    );
-  } catch (err) {
-    // Simplified error handling for performance
-    if (err instanceof ResourceNotFoundError) {
-      return responses.notFoundResponse(err.resourceType, err.resourceId);
-    }
-    logger.error({ error: err, url: request.url }, "Error in high-frequency endpoint");
-    return responses.internalServerErrorResponse(err.message, true);
-  }
-};
-```
-
-### Avoid These Performance Anti-Patterns
-
-```typescript
-// ❌ Avoid for high-frequency endpoints
-const inputValidation = ZodSchema.safeParse(input);     // Too slow
-const startTime = Date.now(); logger.debug(...);       // Logging overhead
-const { data, revalidateEnvironment } = await get();   // Complex return types
-```
-
-### CORS Optimization
-```typescript
-// ✅ Balanced CORS caching (not too aggressive)
-export const OPTIONS = async (): Promise<Response> => {
-  return responses.successResponse(
-    {},
-    true,
-    "public, s-maxage=3600, max-age=3600" // 1 hour balanced approach
-  );
-};
-```
-
-## Redis Cache Migration from Next.js
-
-### Avoid Legacy Next.js Patterns
-```typescript
-// ❌ Old Next.js unstable_cache pattern (avoid)
-const getCachedData = unstable_cache(
-  async (id) => fetchData(id),
-  ['cache-key'],
-  { tags: ['environment'], revalidate: 900 }
-);
-
-// ❌ Don't use revalidateEnvironment flags with Redis
-return { data, revalidateEnvironment: true }; // This gets cached incorrectly!
-
-// ✅ New Redis pattern with withCache (TTL in milliseconds)
-export const getCachedData = (id: string) => 
-  withCache(
-    () => fetchData(id),
-    {
-      key: createCacheKey.environment.data(id),
-      ttl: 60 * 15 * 1000, // 15 minutes in milliseconds
-    }
-  )();
-```
-
-### Remove Revalidation Logic
-When migrating from Next.js `unstable_cache`:
-- Remove `revalidateEnvironment` or similar flags
-- Remove tag-based invalidation logic  
-- Use TTL-based expiration instead
-- Handle one-time updates (like `appSetupCompleted`) directly in cache
-
-## Data Layer Optimization
-
-### Single Query Pattern
-```typescript
-// ✅ Optimize with single database query
-export const getOptimizedEnvironmentData = async (environmentId: string) => {
-  return prisma.environment.findUniqueOrThrow({
-    where: { id: environmentId },
-    include: {
-      project: { 
-        select: { id: true, recontactDays: true, /* ... */ }
-      },
-      organization: {
-        select: { id: true, billing: true }
-      },
-      surveys: {
-        where: { status: "inProgress" },
-        select: { id: true, name: true, /* ... */ }
-      },
-      actionClasses: {
-        select: { id: true, name: true, /* ... */ }
-      }
-    }
-  });
-};
-
-// ❌ Avoid multiple separate queries
-const environment = await getEnvironment(id);
-const organization = await getOrganization(environment.organizationId);  
-const surveys = await getSurveys(id);
-const actionClasses = await getActionClasses(id);
-```
-
-## Invalidation Best Practices
-
-**Always use explicit key-based invalidation:**
-
-```typescript
-// ✅ Clear and debuggable
-await invalidateCache(createCacheKey.environment.state(environmentId));
-await invalidateCache([
-  createCacheKey.environment.surveys(environmentId),
-  createCacheKey.environment.actionClasses(environmentId)
-]);
-
-// ❌ Avoid complex tag systems
-await invalidateByTags(["environment", "survey"]); // Don't do this
-```
-
-## Critical Performance Targets
-
-### High-Frequency Endpoint Goals
-- **Cache hit ratio**: >85%
-- **Response time P95**: <200ms  
-- **Database load reduction**: >60%
-- **HTTP cache duration**: 1hr browser, 30min Cloudflare
-- **SDK refresh interval**: 1 hour with 30min server cache
-
-### Performance Monitoring
-- Use **existing elastic cache analytics** for metrics
-- Log cache errors and warnings (not debug info)
-- Track database query reduction
-- Monitor response times for cached endpoints
-- **Avoid performance logging** in high-frequency endpoints
-
-## Error Handling Pattern
-
-Always provide fallback to fresh data on cache errors:
-
-```typescript
-try {
-  const cached = await cache.get(key);
-  if (cached) return cached;
-  
-  const fresh = await fetchFresh();
-  await cache.set(key, fresh, ttl); // ttl in milliseconds
-  return fresh;
-} catch (error) {
-  // ✅ Always fallback to fresh data
-  logger.warn("Cache error, fetching fresh", { key, error });
-  return fetchFresh();
-}
-```
-
-## Common Pitfalls to Avoid
-
-1. **Never use Next.js `unstable_cache()`** - unreliable in production
-2. **Don't use revalidation flags with Redis** - they get cached incorrectly
-3. **Avoid Zod validation** for simple parameters in high-frequency endpoints
-4. **Don't add performance logging** to high-frequency endpoints
-5. **Coordinate TTLs** between client and server caches
-6. **Don't over-engineer** with complex tag systems  
-7. **Avoid caching rapidly changing data** (real-time metrics)
-8. **Always validate cache keys** to prevent collisions
-9. **Don't add redundant caching layers** - analyze computational overhead first
-10. **Avoid cache wrapper functions** - add caching directly to expensive operations
-11. **Don't cache property access or simple transformations** - overhead is negligible
-12. **Analyze the full call chain** before adding caching to avoid double-caching
-13. **Remember TTL is in milliseconds** for cache-manager + Keyv stack (not seconds)
-
-## Monitoring Strategy
-
-- Use **existing elastic cache analytics** for metrics
-- Log cache errors and warnings  
-- Track database query reduction
-- Monitor response times for cached endpoints
-- **Don't add custom metrics** that duplicate existing monitoring
-
-## Important Notes
-
-### TTL Units
-- **cache-manager + Keyv**: TTL in **milliseconds**
-- **Direct Redis commands**: TTL in **seconds** (EXPIRE, SETEX) or **milliseconds** (PEXPIRE, PSETEX)
-- **HTTP cache headers**: TTL in **seconds** (max-age, s-maxage)
-- **Client SDK**: TTL in **seconds** (expiresAt calculation)

.cursor/rules/database-performance.mdc

@@ -1,41 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: false
----
-# Database Performance & Prisma Best Practices
-
-## Critical Performance Rules
-
-### Response Count Queries
-- **NEVER** use `skip`/`offset` with `prisma.response.count()` - this causes expensive subqueries with OFFSET
-- Always use only `where` clauses for count operations: `prisma.response.count({ where: { ... } })`
-- For pagination, separate count queries from data queries
-- Reference: [apps/web/lib/response/service.ts](mdc:apps/web/lib/response/service.ts) line 654-686
-
-### Prisma Query Optimization
-- Use proper indexes defined in [packages/database/schema.prisma](mdc:packages/database/schema.prisma)
-- Leverage existing indexes: `@@index([surveyId, createdAt])`, `@@index([createdAt])`
-- Use cursor-based pagination for large datasets instead of offset-based
-- Cache frequently accessed data using React Cache and custom cache tags
-
-### Date Range Filtering
-- When filtering by `createdAt`, always use indexed queries
-- Combine with `surveyId` for optimal performance: `{ surveyId, createdAt: { gte: start, lt: end } }`
-- Avoid complex WHERE clauses that can't utilize indexes
-
-### Count vs Data Separation
-- Always separate count queries from data fetching queries
-- Use `Promise.all()` to run count and data queries in parallel
-- Example pattern from [apps/web/modules/api/v2/management/responses/lib/response.ts](mdc:apps/web/modules/api/v2/management/responses/lib/response.ts):
-```typescript
-const [responses, totalCount] = await Promise.all([
-  prisma.response.findMany(query),
-  prisma.response.count({ where: whereClause }),
-]);
-```
-
-### Monitoring & Debugging
-- Monitor AWS RDS Performance Insights for problematic queries
-- Look for queries with OFFSET in count operations - these indicate performance issues
-- Use proper error handling with `DatabaseError` for Prisma exceptions

.cursor/rules/database.mdc

@@ -1,105 +0,0 @@
----
-description: >
-globs: schema.prisma
-alwaysApply: false
----
-# Formbricks Database Schema Reference
-
-This rule provides a reference to the Formbricks database structure. For the most up-to-date and complete schema definitions, please refer to the schema.prisma file directly.
-
-## Database Overview
-
-Formbricks uses PostgreSQL with Prisma ORM. The schema is designed for multi-tenancy with strong data isolation between organizations.
-
-### Core Hierarchy
-
-```
-Organization
-└── Project
-    └── Environment (production/development)
-        ├── Survey
-        ├── Contact
-        ├── ActionClass
-        └── Integration
-```
-
-## Schema Reference
-
-For the complete and up-to-date database schema, please refer to:
-
-- Main schema: `packages/database/schema.prisma`
-- JSON type definitions: `packages/database/json-types.ts`
-
-The schema.prisma file contains all model definitions, relationships, enums, and field types. The json-types.ts file contains TypeScript type definitions for JSON fields.
-
-## Data Access Patterns
-
-### Multi-tenancy
-
-- All data is scoped by Organization
-- Environment-level isolation for surveys and contacts
-- Project-level grouping for related surveys
-
-### Soft Deletion
-
-Some models use soft deletion patterns:
-
-- Check `isActive` fields where present
-- Use proper filtering in queries
-
-### Cascading Deletes
-
-Configured cascade relationships:
-
-- Organization deletion cascades to all child entities
-- Survey deletion removes responses, displays, triggers
-- Contact deletion removes attributes and responses
-
-## Common Query Patterns
-
-### Survey with Responses
-
-```typescript
-// Include response count and latest responses
-const survey = await prisma.survey.findUnique({
-  where: { id: surveyId },
-  include: {
-    responses: {
-      take: 10,
-      orderBy: { createdAt: "desc" },
-    },
-    _count: {
-      select: { responses: true },
-    },
-  },
-});
-```
-
-### Environment Scoping
-
-```typescript
-// Always scope by environment
-const surveys = await prisma.survey.findMany({
-  where: {
-    environmentId: environmentId,
-    // Additional filters...
-  },
-});
-```
-
-### Contact with Attributes
-
-```typescript
-const contact = await prisma.contact.findUnique({
-  where: { id: contactId },
-  include: {
-    attributes: {
-      include: {
-        attributeKey: true,
-      },
-    },
-  },
-});
-```
-
-This schema supports Formbricks' core functionality: multi-tenant survey management, user targeting, response collection, and analysis, all while maintaining strict data isolation and security.

.cursor/rules/documentations.mdc

@@ -1,28 +0,0 @@
----
-description: Guideline for writing end-user facing documentation in the apps/docs folder
-globs:
-alwaysApply: false
----
-
-Follow these instructions and guidelines when asked to write documentation in the apps/docs folder
-
-Follow this structure to write the title, describtion and pick a matching icon and insert it at the top of the MDX file:
-
----
-
-title: "FEATURE NAME"
-description: "1 concise sentence to describe WHEN the feature is being used and FOR WHAT BENEFIT."
-icon: "link"
-
----
-
-- Description: 1 concise sentence to describe WHEN the feature is being used and FOR WHAT BENEFIT.
-- Make ample use of the Mintlify components you can find here https://mintlify.com/docs/llms.txt - e.g. if docs describe consecutive steps, always use Mintlify Step component.
-- In all Headlines, only capitalize the current feature and nothing else, to Camel Case.
-- The page should never start with H1 headline, because it's already part of the template.
-- Tonality: Keep it concise and to the point. Avoid Jargon where possible.
-- If a feature is part of the Enterprise Edition, use this note:
-
-<Note>
-  FEATURE NAME is part of the [Enterprise Edition](/self-hosting/advanced/license) 
-</Note>

.cursor/rules/formbricks-architecture.mdc

@@ -1,332 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: false
----
-# Formbricks Architecture & Patterns
-
-## Monorepo Structure
-
-### Apps Directory
-- `apps/web/` - Main Next.js web application
-- `packages/` - Shared packages and utilities
-
-### Key Directories in Web App
-```
-apps/web/
-├── app/                    # Next.js 13+ app directory
-│   ├── (app)/             # Main application routes
-│   ├── (auth)/            # Authentication routes
-│   ├── api/               # API routes
-├── components/            # Shared components
-├── lib/                   # Utility functions and services
-└── modules/               # Feature-specific modules
-```
-
-## Routing Patterns
-
-### App Router Structure
-The application uses Next.js 13+ app router with route groups:
-
-```
-(app)/environments/[environmentId]/
-├── surveys/[surveyId]/
-│   ├── (analysis)/        # Analysis views
-│   │   ├── responses/     # Response management
-│   │   ├── summary/       # Survey summary
-│   │   └── hooks/         # Analysis-specific hooks
-│   ├── edit/              # Survey editing
-│   └── settings/          # Survey settings
-```
-
-### Dynamic Routes
-- `[environmentId]` - Environment-specific routes
-- `[surveyId]` - Survey-specific routes
-
-## Service Layer Pattern
-
-### Service Organization
-Services are organized by domain in `apps/web/lib/`:
-
-```typescript
-// Example: Response service
-// apps/web/lib/response/service.ts
-export const getResponseCountAction = async ({
-  surveyId,
-  filterCriteria,
-}: {
-  surveyId: string;
-  filterCriteria: any;
-}) => {
-  // Service implementation
-};
-```
-
-### Action Pattern
-Server actions follow a consistent pattern:
-
-```typescript
-// Action wrapper for service calls
-export const getResponseCountAction = async (params) => {
-  try {
-    const result = await responseService.getCount(params);
-    return { data: result };
-  } catch (error) {
-    return { error: error.message };
-  }
-};
-```
-
-## Context Patterns
-
-### Provider Structure
-Context providers follow a consistent pattern:
-
-```typescript
-// Provider component
-export const ResponseFilterProvider = ({ children }: { children: React.ReactNode }) => {
-  const [selectedFilter, setSelectedFilter] = useState(defaultFilter);
-  
-  const value = {
-    selectedFilter,
-    setSelectedFilter,
-    // ... other state and methods
-  };
-
-  return (
-    <ResponseFilterContext.Provider value={value}>
-      {children}
-    </ResponseFilterContext.Provider>
-  );
-};
-
-// Hook for consuming context
-export const useResponseFilter = () => {
-  const context = useContext(ResponseFilterContext);
-  if (!context) {
-    throw new Error('useResponseFilter must be used within ResponseFilterProvider');
-  }
-  return context;
-};
-```
-
-### Context Composition
-Multiple contexts are often composed together:
-
-```typescript
-// Layout component with multiple providers
-export default function AnalysisLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <ResponseFilterProvider>
-      <ResponseCountProvider>
-        {children}
-      </ResponseCountProvider>
-    </ResponseFilterProvider>
-  );
-}
-```
-
-## Component Patterns
-
-### Page Components
-Page components are located in the app directory and follow this pattern:
-
-```typescript
-// apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/page.tsx
-export default function ResponsesPage() {
-  return (
-    <div>
-      <ResponsesTable />
-      <ResponsesPagination />
-    </div>
-  );
-}
-```
-
-### Component Organization
-- **Pages** - Route components in app directory
-- **Components** - Reusable UI components
-- **Modules** - Feature-specific components and logic
-
-### Shared Components
-Common components are in `apps/web/components/`:
-- UI components (buttons, inputs, modals)
-- Layout components (headers, sidebars)
-- Data display components (tables, charts)
-
-## Hook Patterns
-
-### Custom Hook Structure
-Custom hooks follow consistent patterns:
-
-```typescript
-export const useResponseCount = ({ 
-  survey, 
-  initialCount 
-}: {
-  survey: TSurvey;
-  initialCount?: number;
-}) => {
-  const [responseCount, setResponseCount] = useState(initialCount ?? 0);
-  const [isLoading, setIsLoading] = useState(false);
-  
-  // Hook logic...
-  
-  return {
-    responseCount,
-    isLoading,
-    refetch,
-  };
-};
-```
-
-### Hook Dependencies
-- Use context hooks for shared state
-- Implement proper cleanup with AbortController
-- Optimize dependency arrays to prevent unnecessary re-renders
-
-## Data Fetching Patterns
-
-### Server Actions
-The app uses Next.js server actions for data fetching:
-
-```typescript
-// Server action
-export async function getResponsesAction(params: GetResponsesParams) {
-  const responses = await getResponses(params);
-  return { data: responses };
-}
-
-// Client usage
-const { data } = await getResponsesAction(params);
-```
-
-### Error Handling
-Consistent error handling across the application:
-
-```typescript
-try {
-  const result = await apiCall();
-  return { data: result };
-} catch (error) {
-  console.error("Operation failed:", error);
-  return { error: error.message };
-}
-```
-
-## Type Safety
-
-### Type Organization
-Types are organized in packages:
-- `@formbricks/types` - Shared type definitions
-- Local types in component/hook files
-
-### Common Types
-```typescript
-import { TSurvey } from "@formbricks/types/surveys/types";
-import { TResponse } from "@formbricks/types/responses";
-import { TEnvironment } from "@formbricks/types/environment";
-```
-
-## State Management
-
-### Local State
-- Use `useState` for component-specific state
-- Use `useReducer` for complex state logic
-- Use refs for mutable values that don't trigger re-renders
-
-### Global State
-- React Context for feature-specific shared state
-- URL state for filters and pagination
-- Server state through server actions
-
-## Performance Considerations
-
-### Code Splitting
-- Dynamic imports for heavy components
-- Route-based code splitting with app router
-- Lazy loading for non-critical features
-
-### Caching Strategy
-- Server-side caching for database queries
-- Client-side caching with React Query (where applicable)
-- Static generation for public pages
-
-## Testing Strategy
-
-### Test Organization
-```
-component/
-├── Component.tsx
-├── Component.test.tsx
-└── hooks/
-    ├── useHook.ts
-    └── useHook.test.tsx
-```
-
-### Test Patterns
-- Unit tests for utilities and services
-- Integration tests for components with context
-- Hook tests with proper mocking
-
-## Build & Deployment
-
-### Build Process
-- TypeScript compilation
-- Next.js build optimization
-- Asset optimization and bundling
-
-### Environment Configuration
-- Environment-specific configurations
-- Feature flags for gradual rollouts
-- Database connection management
-
-## Security Patterns
-
-### Authentication
-- Session-based authentication
-- Environment-based access control
-- API route protection
-
-### Data Validation
-- Input validation on both client and server
-- Type-safe API contracts
-- Sanitization of user inputs
-
-## Monitoring & Observability
-
-### Error Tracking
-- Client-side error boundaries
-- Server-side error logging
-- Performance monitoring
-
-### Analytics
-- User interaction tracking
-- Performance metrics
-- Database query monitoring
-
-## Best Practices Summary
-
-### Code Organization
-- ✅ Follow the established directory structure
-- ✅ Use consistent naming conventions
-- ✅ Separate concerns (UI, logic, data)
-- ✅ Keep components focused and small
-
-### Performance
-- ✅ Implement proper loading states
-- ✅ Use AbortController for async operations
-- ✅ Optimize database queries
-- ✅ Implement proper caching strategies
-
-### Type Safety
-- ✅ Use TypeScript throughout
-- ✅ Define proper interfaces for props
-- ✅ Use type guards for runtime validation
-- ✅ Leverage shared type packages
-
-### Testing
-- ✅ Write tests for critical functionality
-- ✅ Mock external dependencies properly
-- ✅ Test error scenarios and edge cases
-- ✅ Maintain good test coverage

.cursor/rules/github-actions-security.mdc

@@ -1,232 +0,0 @@
----
-description: Security best practices and guidelines for writing GitHub Actions and workflows
-globs: .github/workflows/*.yml,.github/workflows/*.yaml,.github/actions/*/action.yml,.github/actions/*/action.yaml
----
-
-# GitHub Actions Security Best Practices
-
-## Required Security Measures
-
-### 1. Set Minimum GITHUB_TOKEN Permissions
-
-Always explicitly set the minimum required permissions for GITHUB_TOKEN:
-
-```yaml
-permissions:
-  contents: read
-  # Only add additional permissions if absolutely necessary:
-  # pull-requests: write  # for commenting on PRs
-  # issues: write         # for creating/updating issues
-  # checks: write         # for publishing check results
-```
-
-### 2. Add Harden-Runner as First Step
-
-For **every job** on `ubuntu-latest`, add Harden-Runner as the first step:
-
-```yaml
-- name: Harden the runner
-  uses: step-security/harden-runner@ec9f2d5744a09debf3a187a3f4f675c53b671911 # v2.13.0
-  with:
-    egress-policy: audit # or 'block' for stricter security
-```
-
-### 3. Pin Actions to Full Commit SHA
-
-**Always** pin third-party actions to their full commit SHA, not tags:
-
-```yaml
-# ❌ BAD - uses mutable tag
-- uses: actions/checkout@v4
-
-# ✅ GOOD - pinned to immutable commit SHA
-- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-```
-
-### 4. Secure Variable Handling
-
-Prevent command injection by properly quoting variables:
-
-```yaml
-# ❌ BAD - potential command injection
-run: echo "Processing ${{ inputs.user_input }}"
-
-# ✅ GOOD - properly quoted
-env:
-  USER_INPUT: ${{ inputs.user_input }}
-run: echo "Processing ${USER_INPUT}"
-```
-
-Use `${VARIABLE}` syntax in shell scripts instead of `$VARIABLE`.
-
-### 5. Environment Variables for Secrets
-
-Store sensitive data in environment variables, not inline:
-
-```yaml
-# ❌ BAD
-run: curl -H "Authorization: Bearer ${{ secrets.TOKEN }}" api.example.com
-
-# ✅ GOOD
-env:
-  API_TOKEN: ${{ secrets.TOKEN }}
-run: curl -H "Authorization: Bearer ${API_TOKEN}" api.example.com
-```
-
-## Workflow Structure Best Practices
-
-### Required Workflow Elements
-
-```yaml
-name: "Descriptive Workflow Name"
-
-on:
-  # Define specific triggers
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
-# Always set explicit permissions
-permissions:
-  contents: read
-
-jobs:
-  job-name:
-    name: "Descriptive Job Name"
-    runs-on: ubuntu-latest
-    timeout-minutes: 30 # tune per job; standardize repo-wide
-
-    # Set job-level permissions if different from workflow level
-    permissions:
-      contents: read
-
-    steps:
-      # Always start with Harden-Runner on ubuntu-latest
-      - name: Harden the runner
-        uses: step-security/harden-runner@v2
-        with:
-          egress-policy: audit
-
-      # Pin all actions to commit SHA
-      - name: Checkout code
-        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
-```
-
-### Input Validation for Actions
-
-For composite actions, always validate inputs:
-
-```yaml
-inputs:
-  user_input:
-    description: "User provided input"
-    required: true
-
-runs:
-  using: "composite"
-  steps:
-    - name: Validate input
-      shell: bash
-      run: |
-        # Harden shell and validate input format/content before use
-        set -euo pipefail
-
-        USER_INPUT="${{ inputs.user_input }}"
-
-        if [[ ! "${USER_INPUT}" =~ ^[A-Za-z0-9._-]+$ ]]; then
-          echo "❌ Invalid input format"
-          exit 1
-        fi
-```
-
-## Docker Security in Actions
-
-### Pin Docker Images to Digests
-
-```yaml
-# ❌ BAD - mutable tag
-container: node:18
-
-# ✅ GOOD - pinned to digest
-container: node:18@sha256:a1ba21bf0c92931d02a8416f0a54daad66cb36a85d6a37b82dfe1604c4c09cad
-```
-
-## Common Patterns
-
-### Secure File Operations
-
-```yaml
-- name: Process files securely
-  shell: bash
-  env:
-    FILE_PATH: ${{ inputs.file_path }}
-  run: |
-    set -euo pipefail  # Fail on errors, undefined vars, pipe failures
-
-    # Use absolute paths and validate
-    SAFE_PATH=$(realpath "${FILE_PATH}")
-    if [[ "$SAFE_PATH" != "${GITHUB_WORKSPACE}"/* ]]; then
-      echo "❌ Path outside workspace"
-      exit 1
-    fi
-```
-
-### Artifact Handling
-
-```yaml
-- name: Upload artifacts securely
-  uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4.4.0
-  with:
-    name: build-artifacts
-    path: |
-      dist/
-      !dist/**/*.log  # Exclude sensitive files
-    retention-days: 30
-```
-
-### GHCR authentication for pulls/scans
-
-```yaml
-# Minimal permissions required for GHCR pulls/scans
-permissions:
-  contents: read
-  packages: read
-
-steps:
-  - name: Log in to GitHub Container Registry
-    uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3.5.0
-    with:
-      registry: ghcr.io
-      username: ${{ github.actor }}
-      password: ${{ secrets.GITHUB_TOKEN }}
-```
-
-## Security Checklist
-
-- [ ] Minimum GITHUB_TOKEN permissions set
-- [ ] Harden-Runner added to all ubuntu-latest jobs
-- [ ] All third-party actions pinned to commit SHA
-- [ ] Input validation implemented for custom actions
-- [ ] Variables properly quoted in shell scripts
-- [ ] Secrets stored in environment variables
-- [ ] Docker images pinned to digests (if used)
-- [ ] Error handling with `set -euo pipefail`
-- [ ] File paths validated and sanitized
-- [ ] No sensitive data in logs or outputs
-- [ ] GHCR login performed before pulls/scans (packages: read)
-- [ ] Job timeouts configured (`timeout-minutes`)
-
-## Recommended Additional Workflows
-
-Consider adding these security-focused workflows to your repository:
-
-1. **CodeQL Analysis** - Static Application Security Testing (SAST)
-2. **Dependency Review** - Scan for vulnerable dependencies in PRs
-3. **Dependabot Configuration** - Automated dependency updates
-
-## Resources
-
-- [GitHub Security Hardening Guide](https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions)
-- [Step Security Harden-Runner](https://github.com/step-security/harden-runner)
-- [Secure-Repo Best Practices](https://github.com/step-security/secure-repo)

.cursor/rules/i18n-management.mdc

@@ -1,457 +0,0 @@
----
-title: i18n Management with Lingo.dev
-description: Guidelines for managing internationalization (i18n) with Lingo.dev, including translation workflow, key validation, and best practices
----
-
-# i18n Management with Lingo.dev
-
-This rule defines the workflow and best practices for managing internationalization (i18n) in the Formbricks project using Lingo.dev.
-
-## Overview
-
-Formbricks uses [Lingo.dev](https://lingo.dev) for managing translations across multiple languages. The translation workflow includes:
-
-1. **Translation Keys**: Defined in code using the `t()` function from `react-i18next`
-2. **Translation Files**: JSON files stored in `apps/web/locales/` for each supported language
-3. **Validation**: Automated scanning to detect missing and unused translation keys
-4. **CI/CD**: Pre-commit hooks and GitHub Actions to enforce translation quality
-
-## Translation Workflow
-
-### 1. Using Translations in Code
-
-When adding translatable text in the web app, use the `t()` function or `<Trans>` component:
-
-**Using the `t()` function:**
-```tsx
-import { useTranslate } from "@/lib/i18n/translate";
-
-const MyComponent = () => {
-  const { t } = useTranslate();
-  
-  return (
-    <div>
-      <h1>{t("common.welcome")}</h1>
-      <p>{t("pages.dashboard.description")}</p>
-    </div>
-  );
-};
-```
-
-**Using the `<Trans>` component (for text with HTML elements):**
-```tsx
-import { Trans } from "react-i18next";
-
-const MyComponent = () => {
-  return (
-    <div>
-      <p>
-        <Trans
-          i18nKey="auth.terms_agreement"
-          components={{ 
-            link: <a href="/terms" />,
-            b: <b />
-          }}
-        />
-      </p>
-    </div>
-  );
-};
-```
-
-**Key Naming Conventions:**
-- Use dot notation for nested keys: `section.subsection.key`
-- Use descriptive names: `auth.login.success_message` not `auth.msg1`
-- Group related keys together: `auth.*`, `errors.*`, `common.*`
-- Use lowercase with underscores: `user_profile_settings` not `UserProfileSettings`
-
-### 2. Translation File Structure
-
-Translation files are located in `apps/web/locales/` and use the following naming convention:
-- `en-US.json` (English - United States, default)
-- `de-DE.json` (German)
-- `fr-FR.json` (French)
-- `pt-BR.json` (Portuguese - Brazil)
-- etc.
-
-**File Structure:**
-```json
-{
-  "common": {
-    "welcome": "Welcome",
-    "save": "Save",
-    "cancel": "Cancel"
-  },
-  "auth": {
-    "login": {
-      "title": "Login",
-      "email_placeholder": "Enter your email",
-      "password_placeholder": "Enter your password"
-    }
-  }
-}
-```
-
-### 3. Adding New Translation Keys
-
-When adding new translation keys:
-
-1. **Add the key in your code** using `t("your.new.key")`
-2. **Add translation for that key in en-US.json file**
-3. **Run the translation workflow:**
-   ```bash
-   pnpm i18n
-   ```
-   This will:
-   - Generate translations for all languages using Lingo.dev
-   - Validate that all keys are present and used
-
-4. **Review and commit** the generated translation files
-
-### 4. Available Scripts
-
-```bash
-# Generate translations using Lingo.dev
-pnpm generate-translations
-
-# Scan and validate translation keys
-pnpm scan-translations
-
-# Full workflow: generate + validate
-pnpm i18n
-
-# Validate only (without generation)
-pnpm i18n:validate
-```
-
-## Translation Key Validation
-
-### Automated Validation
-
-The project includes automated validation that runs:
-- **Pre-commit hook**: Validates translations before allowing commits (when `LINGODOTDEV_API_KEY` is set)
-- **GitHub Actions**: Validates translations on every PR and push to main
-
-### Validation Rules
-
-The validation script (`scan-translations.ts`) checks for:
-
-1. **Missing Keys**: Translation keys used in code but not present in translation files
-2. **Unused Keys**: Translation keys present in translation files but not used in code
-3. **Incomplete Translations**: Keys that exist in the default language (`en-US`) but are missing in target languages
-
-**What gets scanned:**
-- All `.ts` and `.tsx` files in `apps/web/`
-- Both `t()` function calls and `<Trans i18nKey="">` components
-- All locale files (`de-DE.json`, `fr-FR.json`, `ja-JP.json`, etc.)
-
-**What gets excluded:**
-- Test files (`*.test.ts`, `*.test.tsx`, `*.spec.ts`, `*.spec.tsx`)
-- Build directories (`node_modules`, `dist`, `build`, `.next`, `coverage`)
-- Locale files themselves (from code scanning)
-
-**Note:** Test files are excluded because they often use mock or example translation keys for testing purposes that don't need to exist in production translation files.
-
-### Fixing Validation Errors
-
-#### Missing Keys
-
-If you encounter missing key errors:
-
-```
-❌ MISSING KEYS (2):
-
-   These keys are used in code but not found in translation files:
-
-   • auth.signup.email_required
-   • settings.profile.update_success
-```
-
-**Resolution:**
-1. Ensure that translations for those keys are present in en-US.json .  
-2. Run `pnpm generate-translations` to have Lingo.dev generate the missing translations
-3. OR manually add the keys to `apps/web/locales/en-US.json`:
-   ```json
-   {
-     "auth": {
-       "signup": {
-         "email_required": "Email is required"
-       }
-     },
-     "settings": {
-       "profile": {
-         "update_success": "Profile updated successfully"
-       }
-     }
-   }
-   ```
-3. Run `pnpm scan-translations` to verify
-4. Commit the changes
-
-#### Unused Keys
-
-If you encounter unused key errors:
-
-```
-⚠️  UNUSED KEYS (1):
-
-   These keys exist in translation files but are not used in code:
-
-   • old.deprecated.key
-```
-
-**Resolution:**
-1. If the key is truly unused, remove it from all translation files
-2. If the key should be used, add it to your code using `t("old.deprecated.key")`
-3. Run `pnpm scan-translations` to verify
-4. Commit the changes
-
-#### Incomplete Translations
-
-If you encounter incomplete translation errors:
-
-```
-⚠️  INCOMPLETE TRANSLATIONS:
-
-   Some keys from en-US are missing in target languages:
-
-   📝 de-DE (5 missing keys):
-      • auth.new_feature.title
-      • auth.new_feature.description
-      • settings.advanced.option
-      ... and 2 more
-```
-
-**Resolution:**
-1. **Recommended:** Run `pnpm generate-translations` to have Lingo.dev automatically translate the missing keys
-2. **Manual:** Add the missing keys to the target language files:
-   ```bash
-   # Copy the structure from en-US.json and translate the values
-   # For example, in de-DE.json:
-   {
-     "auth": {
-       "new_feature": {
-         "title": "Neues Feature",
-         "description": "Beschreibung des neuen Features"
-       }
-     }
-   }
-   ```
-3. Run `pnpm scan-translations` to verify all translations are complete
-4. Commit the changes
-
-## Pre-commit Hook Behavior
-
-The pre-commit hook will:
-
-1. Run `lint-staged` for code formatting
-2. If `LINGODOTDEV_API_KEY` is set:
-   - Generate translations using Lingo.dev
-   - Validate translation keys
-   - Auto-add updated locale files to the commit
-   - **Block the commit** if validation fails
-3. If `LINGODOTDEV_API_KEY` is not set:
-   - Skip translation validation (for community contributors)
-   - Show a warning message
-
-## Environment Variables
-
-### LINGODOTDEV_API_KEY
-
-This is the API key for Lingo.dev integration.
-
-**For Core Team:**
-- Add to your local `.env` file
-- Required for running translation generation
-
-**For Community Contributors:**
-- Not required for local development
-- Translation validation will be skipped
-- The CI will still validate translations
-
-## Best Practices
-
-### 1. Keep Keys Organized
-
-Group related keys together:
-```json
-{
-  "auth": {
-    "login": { ... },
-    "signup": { ... },
-    "forgot_password": { ... }
-  },
-  "dashboard": {
-    "header": { ... },
-    "sidebar": { ... }
-  }
-}
-```
-
-### 2. Avoid Hardcoded Strings
-
-**❌ Bad:**
-```tsx
-<button>Click here</button>
-```
-
-**✅ Good:**
-```tsx
-<button>{t("common.click_here")}</button>
-```
-
-### 3. Use Interpolation for Dynamic Content
-
-**❌ Bad:**
-```tsx
-{t("welcome")} {userName}!
-```
-
-**✅ Good:**
-```tsx
-{t("auth.welcome_message", { userName })}
-```
-
-With translation:
-```json
-{
-  "auth": {
-    "welcome_message": "Welcome, {userName}!"
-  }
-}
-```
-
-### 4. Avoid Dynamic Key Construction
-
-**❌ Bad:**
-```tsx
-const key = `errors.${errorCode}`;
-t(key);
-```
-
-**✅ Good:**
-```tsx
-switch (errorCode) {
-  case "401":
-    return t("errors.unauthorized");
-  case "404":
-    return t("errors.not_found");
-  default:
-    return t("errors.unknown");
-}
-```
-
-### 5. Test Translation Keys
-
-When adding new features:
-1. Add translation keys
-2. Test in multiple languages using the language switcher
-3. Ensure text doesn't overflow in longer translations (German, French)
-4. Run `pnpm scan-translations` before committing
-
-## Troubleshooting
-
-### Issue: Pre-commit hook fails with validation errors
-
-**Solution:**
-```bash
-# Run the full i18n workflow
-pnpm i18n
-
-# Fix any missing or unused keys
-# Then commit again
-git add .
-git commit -m "your message"
-```
-
-### Issue: Translation validation passes locally but fails in CI
-
-**Solution:**
-- Ensure all translation files are committed
-- Check that `scan-translations.ts` hasn't been modified
-- Verify that locale files are properly formatted JSON
-
-### Issue: Cannot commit because of missing translations
-
-**Solution:**
-```bash
-# If you have LINGODOTDEV_API_KEY:
-pnpm generate-translations
-
-# If you don't have the API key (community contributor):
-# Manually add the missing keys to en-US.json
-# Then run validation:
-pnpm scan-translations
-```
-
-### Issue: Getting "unused keys" for keys that are used
-
-**Solution:**
-- The script scans `.ts` and `.tsx` files only
-- If keys are used in other file types, they may be flagged
-- Verify the key is actually used with `grep -r "your.key" apps/web/`
-- If it's a false positive, consider updating the scanning patterns in `scan-translations.ts`
-
-## AI Assistant Guidelines
-
-When assisting with i18n-related tasks, always:
-
-1. **Use the `t()` function** for all user-facing text
-2. **Follow key naming conventions** (lowercase, dots for nesting)
-3. **Run validation** after making changes: `pnpm scan-translations`
-4. **Fix missing keys** by adding them to `en-US.json`
-5. **Remove unused keys** from all translation files
-6. **Test the pre-commit hook** if making changes to translation workflow
-7. **Update this rule file** if translation workflow changes
-
-### Fixing Missing Translation Keys
-
-When the AI encounters missing translation key errors:
-
-1. Identify the missing keys from the error output
-2. Determine the appropriate section and naming for each key
-3. Add the keys to `apps/web/locales/en-US.json` with meaningful English text
-4. Ensure proper JSON structure and nesting
-5. Run `pnpm scan-translations` to verify
-6. Inform the user that other language files will be updated via Lingo.dev
-
-**Example:**
-```typescript
-// Error: Missing key "settings.api.rate_limit_exceeded"
-
-// Add to en-US.json:
-{
-  "settings": {
-    "api": {
-      "rate_limit_exceeded": "API rate limit exceeded. Please try again later."
-    }
-  }
-}
-```
-
-### Removing Unused Translation Keys
-
-When the AI encounters unused translation key errors:
-
-1. Verify the keys are truly unused by searching the codebase
-2. Remove the keys from `apps/web/locales/en-US.json`
-3. Note that removal from other language files can be handled via Lingo.dev
-4. Run `pnpm scan-translations` to verify
-
-## Migration Notes
-
-This project previously used Tolgee for translations. As of this migration:
-
-- **Old scripts**: `tolgee-pull` is deprecated (kept for reference)
-- **New scripts**: Use `pnpm i18n` or `pnpm generate-translations`
-- **Old workflows**: `tolgee.yml` and `tolgee-missing-key-check.yml` removed
-- **New workflow**: `translation-check.yml` handles all validation
-
----
-
-**Last Updated:** October 14, 2025
-**Related Files:**
-- `scan-translations.ts` - Translation validation script
-- `.husky/pre-commit` - Pre-commit hook with i18n validation
-- `.github/workflows/translation-check.yml` - CI workflow for translation validation
-- `apps/web/locales/*.json` - Translation files

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

@@ -1,52 +0,0 @@
----
-description: 
-globs: 
-alwaysApply: false
----
-# React Context & Provider Patterns
-
-## Context Provider Best Practices
-
-### Provider Implementation
-- Use TypeScript interfaces for provider props with optional `initialCount` for testing
-- Implement proper cleanup in `useEffect` to avoid React hooks warnings
-- Reference: [apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/ResponseCountProvider.tsx](mdc:apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/components/ResponseCountProvider.tsx)
-
-### Cleanup Pattern for Refs
-```typescript
-useEffect(() => {
-  const currentPendingRequests = pendingRequests.current;
-  const currentAbortController = abortController.current;
-  
-  return () => {
-    if (currentAbortController) {
-      currentAbortController.abort();
-    }
-    currentPendingRequests.clear();
-  };
-}, []);
-```
-
-### Testing Context Providers
-- Always wrap components using context in the provider during tests
-- Use `initialCount` prop for predictable test scenarios
-- Mock context dependencies like `useParams`, `useResponseFilter`
-- Example from [apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.test.tsx](mdc:apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/SurveyAnalysisCTA.test.tsx):
-
-```typescript
-render(
-  <ResponseCountProvider survey={dummySurvey} initialCount={5}>
-    <ComponentUnderTest />
-  </ResponseCountProvider>
-);
-```
-
-### Required Mocks for Context Testing
-- Mock `next/navigation` with `useParams` returning environment and survey IDs
-- Mock response filter context and actions
-- Mock API actions that the provider depends on
-
-### Context Hook Usage
-- Create custom hooks like `useResponseCountContext()` for consuming context
-- Provide meaningful error messages when context is used outside provider
-- Use context for shared state that multiple components need to access

.cursor/rules/review-and-refine.mdc

@@ -1,179 +0,0 @@
----
-description: Apply these quality standards before finalizing code changes to ensure DRY principles, React best practices, TypeScript conventions, and maintainable code.
-globs:
-alwaysApply: false
----
-
-# Review & Refine
-
-Before finalizing any code changes, review your implementation against these quality standards:
-
-## Core Principles
-
-### DRY (Don't Repeat Yourself)
-
-- Extract duplicated logic into reusable functions or hooks
-- If the same code appears in multiple places, consolidate it
-- Create helper functions at appropriate scope (component-level, module-level, or utility files)
-- Avoid copy-pasting code blocks
-
-### Code Reduction
-
-- Remove unnecessary code, comments, and abstractions
-- Prefer built-in solutions over custom implementations
-- Consolidate similar logic
-- Remove dead code and unused imports
-- Question if every line of code is truly needed
-
-## React Best Practices
-
-### Component Design
-
-- Keep components focused on a single responsibility
-- Extract complex logic into custom hooks
-- Prefer composition over prop drilling
-- Use children props and render props when appropriate
-- Keep component files under 300 lines when possible
-
-### Hooks Usage
-
-- Follow Rules of Hooks (only call at top level, only in React functions)
-- Extract complex `useEffect` logic into custom hooks
-- Use `useMemo` and `useCallback` only when you have a measured performance issue
-- Declare dependencies arrays correctly - don't ignore exhaustive-deps warnings
-- Keep `useEffect` focused on a single concern
-
-### State Management
-
-- Colocate state as close as possible to where it's used
-- Lift state only when necessary
-- Use `useReducer` for complex state logic with multiple sub-values
-- Avoid derived state - compute values during render instead
-- Don't store values in state that can be computed from props
-
-### Event Handlers
-
-- Name event handlers with `handle` prefix (e.g., `handleClick`, `handleSubmit`)
-- Extract complex event handler logic into separate functions
-- Avoid inline arrow functions in JSX when they contain complex logic
-
-## TypeScript Best Practices
-
-### Type Safety
-
-- Prefer type inference over explicit types when possible
-- Use `const` assertions for literal types
-- Avoid `any` - use `unknown` if type is truly unknown
-- Use discriminated unions for complex conditional logic
-- Leverage type guards and narrowing
-
-### Interface & Type Usage
-
-- Use existing types from `@formbricks/types` - don't recreate them
-- Prefer `interface` for object shapes that might be extended
-- Prefer `type` for unions, intersections, and mapped types
-- Define types close to where they're used unless they're shared
-- Export types from index files for shared types
-
-### Type Assertions
-
-- Avoid type assertions (`as`) when possible
-- Use type guards instead of assertions
-- Only assert when you have more information than TypeScript
-
-## Code Organization
-
-### Separation of Concerns
-
-- Separate business logic from UI rendering
-- Extract API calls into separate functions or modules
-- Keep data transformation separate from component logic
-- Use custom hooks for stateful logic that doesn't render UI
-
-### Function Clarity
-
-- Functions should do one thing well
-- Name functions clearly and descriptively
-- Keep functions small (aim for under 20 lines)
-- Extract complex conditionals into named boolean variables or functions
-- Avoid deep nesting (max 3 levels)
-
-### File Structure
-
-- Group related functions together
-- Order declarations logically (types → hooks → helpers → component)
-- Keep imports organized (external → internal → relative)
-- Consider splitting large files by concern
-
-## Additional Quality Checks
-
-### Performance
-
-- Don't optimize prematurely - measure first
-- Avoid creating new objects/arrays/functions in render unnecessarily
-- Use keys properly in lists (stable, unique identifiers)
-- Lazy load heavy components when appropriate
-
-### Accessibility
-
-- Use semantic HTML elements
-- Include ARIA labels where needed
-- Ensure keyboard navigation works
-- Check color contrast and focus states
-
-### Error Handling
-
-- Handle error states in components
-- Provide user feedback for failed operations
-- Use error boundaries for component errors
-- Log errors appropriately (avoid swallowing errors silently)
-
-### Naming Conventions
-
-- Use descriptive names (avoid abbreviations unless very common)
-- Boolean variables/props should sound like yes/no questions (`isLoading`, `hasError`, `canEdit`)
-- Arrays should be plural (`users`, `choices`, `items`)
-- Event handlers: `handleX` in components, `onX` for props
-- Constants in UPPER_SNAKE_CASE only for true constants
-
-### Code Readability
-
-- Prefer early returns to reduce nesting
-- Use destructuring to make code clearer
-- Break complex expressions into named variables
-- Add comments only when code can't be made self-explanatory
-- Use whitespace to group related code
-
-### Testing Considerations
-
-- Write code that's easy to test (pure functions, clear inputs/outputs)
-- Avoid hard-to-mock dependencies when possible
-- Keep side effects at the edges of your code
-
-## Review Checklist
-
-Before submitting your changes, ask yourself:
-
-1. **DRY**: Is there any duplicated logic I can extract?
-2. **Clarity**: Would another developer understand this code easily?
-3. **Simplicity**: Is this the simplest solution that works?
-4. **Types**: Am I using TypeScript effectively?
-5. **React**: Am I following React idioms and best practices?
-6. **Performance**: Are there obvious performance issues?
-7. **Separation**: Are concerns properly separated?
-8. **Testing**: Is this code testable?
-9. **Maintenance**: Will this be easy to change in 6 months?
-10. **Deletion**: Can I remove any code and still accomplish the goal?
-
-## When to Apply This Rule
-
-Apply this rule:
-
-- After implementing a feature but before marking it complete
-- When you notice your code feels "messy" or complex
-- Before requesting code review
-- When you see yourself copy-pasting code
-- After receiving feedback about code quality
-
-Don't let perfect be the enemy of good, but always strive for:
-**Simple, readable, maintainable code that does one thing well.**

.cursor/rules/storybook-component-migration.mdc

@@ -1,216 +0,0 @@
----
-description: Migrate deprecated UI components to a unified component
-globs: 
-alwaysApply: false
----
-# Component Migration Automation Rule
-
-## Overview
-This rule automates the migration of deprecated components to new component systems in React/TypeScript codebases.
-
-## Trigger
-When the user requests component migration (e.g., "migrate [DeprecatedComponent] to [NewComponent]" or "component migration").
-
-## Process
-
-### Step 1: Discovery and Planning
-1. **Identify migration parameters:**
-   - Ask user for deprecated component name (e.g., "Modal")
-   - Ask user for new component name(s) (e.g., "Dialog")
-   - Ask for any components to exclude (e.g., "ModalWithTabs")
-   - Ask for specific import paths if needed
-
-2. **Scan codebase** for deprecated components:
-   - Search for `import.*[DeprecatedComponent]` patterns
-   - Exclude specified components that should not be migrated
-   - List all found components with file paths
-   - Present numbered list to user for confirmation
-
-### Step 2: Component-by-Component Migration
-For each component, follow this exact sequence:
-
-#### 2.1 Component Migration
-- **Import changes:**
-  - Ask user to provide the new import structure
-  - Example transformation pattern:
-  ```typescript
-  // FROM:
-  import { [DeprecatedComponent] } from "@/components/ui/[DeprecatedComponent]"
-  
-  // TO:
-  import {
-    [NewComponent],
-    [NewComponentPart1],
-    [NewComponentPart2],
-    // ... other parts
-  } from "@/components/ui/[NewComponent]"
-  ```
-
-- **Props transformation:**
-  - Ask user for prop mapping rules (e.g., `open` → `open`, `setOpen` → `onOpenChange`)
-  - Ask for props to remove (e.g., `noPadding`, `closeOnOutsideClick`, `size`)
-  - Apply transformations based on user specifications
-
-- **Structure transformation:**
-  - Ask user for the new component structure pattern
-  - Apply the transformation maintaining all functionality
-  - Preserve all existing logic, state management, and event handlers
-
-#### 2.2 Wait for User Approval
-- Present the migration changes
-- Wait for explicit user approval before proceeding
-- If rejected, ask for specific feedback and iterate
-#### 2.3 Re-read and Apply Additional Changes
-- Re-read the component file to capture any user modifications
-- Apply any additional improvements the user made
-- Ensure all changes are incorporated
-
-#### 2.4 Test File Updates
-- **Find corresponding test file** (same name with `.test.tsx` or `.test.ts`)
-- **Update test mocks:**
-  - Ask user for new component mock structure
-  - Replace old component mocks with new ones
-  - Example pattern:
-  ```typescript
-  // Add to test setup:
-  jest.mock("@/components/ui/[NewComponent]", () => ({
-    [NewComponent]: ({ children, [props] }: any) => ([mock implementation]),
-    [NewComponentPart1]: ({ children }: any) => <div data-testid="[new-component-part1]">{children}</div>,
-    [NewComponentPart2]: ({ children }: any) => <div data-testid="[new-component-part2]">{children}</div>,
-    // ... other parts
-  }));
-  ```
-- **Update test expectations:**
-  - Change test IDs from old component to new component
-  - Update any component-specific assertions
-  - Ensure all new component parts used in the component are mocked
-
-#### 2.5 Run Tests and Optimize
-- Execute `Node package manager test -- ComponentName.test.tsx`
-- Fix any failing tests
-- Optimize code quality (imports, formatting, etc.)
-- Re-run tests until all pass
-- **Maximum 3 iterations** - if still failing, ask user for guidance
-
-#### 2.6 Wait for Final Approval
-- Present test results and any optimizations made
-- Wait for user approval of the complete migration
-- If rejected, iterate based on feedback
-
-#### 2.7 Git Commit
-- Run: `git add .`
-- Run: `git commit -m "migrate [ComponentName] from [DeprecatedComponent] to [NewComponent]"`
-- Confirm commit was successful
-
-### Step 3: Final Report Generation
-After all components are migrated, generate a comprehensive GitHub PR report:
-
-#### PR Title
-```
-feat: migrate [DeprecatedComponent] components to [NewComponent] system
-```
-
-#### PR Description Template
-```markdown
-## 🔄 [DeprecatedComponent] to [NewComponent] Migration
-
-### Overview
-Migrated [X] [DeprecatedComponent] components to the new [NewComponent] component system to modernize the UI architecture and improve consistency.
-
-### Components Migrated
-[List each component with file path]
-
-### Technical Changes
-- **Imports:** Replaced `[DeprecatedComponent]` with `[NewComponent], [NewComponentParts...]`
-- **Props:** [List prop transformations]
-- **Structure:** Implemented proper [NewComponent] component hierarchy
-- **Styling:** [Describe styling changes]
-- **Tests:** Updated all test mocks and expectations
-
-### Migration Pattern
-```typescript
-// Before
-<[DeprecatedComponent] [oldProps]>
-  [oldStructure]
-</[DeprecatedComponent]>
-
-// After
-<[NewComponent] [newProps]>
-  [newStructure]
-</[NewComponent]>
-```
-
-### Testing
-- ✅ All existing tests updated and passing
-- ✅ Component functionality preserved
-- ✅ UI/UX behavior maintained
-
-### How to Test This PR
-1. **Functional Testing:**
-   - Navigate to each migrated component's usage
-   - Verify [component] opens and closes correctly
-   - Test all interactive elements within [components]
-   - Confirm styling and layout are preserved
-
-2. **Automated Testing:**
-   ```bash
-   Node package manager test
-   ```
-
-3. **Visual Testing:**
-   - Check that all [components] maintain proper styling
-   - Verify responsive behavior
-   - Test keyboard navigation and accessibility
-
-### Breaking Changes
-[List any breaking changes or state "None - this is a drop-in replacement maintaining all existing functionality."]
-
-### Notes
-- [Any excluded components] were preserved as they already use [NewComponent] internally
-- All form validation and complex state management preserved
-- Enhanced code quality with better imports and formatting
-```
-
-## Special Considerations
-
-### Excluded Components
-- **DO NOT MIGRATE** components specified by user as exclusions
-- They may already use the new component internally or have other reasons
-- Inform user these are skipped and why
-
-### Complex Components
-- Preserve all existing functionality (forms, validation, state management)
-- Maintain prop interfaces
-- Keep all event handlers and callbacks
-- Preserve accessibility features
-
-### Test Coverage
-- Ensure all new component parts are mocked when used
-- Mock all new component parts that appear in the component
-- Update test IDs from old component to new component
-- Maintain all existing test scenarios
-
-### Error Handling
-- If tests fail after 3 iterations, stop and ask user for guidance
-- If component is too complex, ask user for specific guidance
-- If unsure about functionality preservation, ask for clarification
-
-### Migration Patterns
-- Always ask user for specific migration patterns before starting
-- Confirm import structures, prop mappings, and component hierarchies
-- Adapt to different component architectures (simple replacements, complex restructuring, etc.)
-
-## Success Criteria
-- All deprecated components successfully migrated to new components
-- All tests passing
-- No functionality lost
-- Code quality maintained or improved
-- User approval on each component
-- Successful git commits for each migration
-- Comprehensive PR report generated
-
-## Usage Examples
-- "migrate Modal to Dialog"
-- "migrate Button to NewButton" 
-- "migrate Card to ModernCard"
-- "component migration" (will prompt for details) 

.cursor/rules/storybook-create-new-story.mdc

@@ -1,177 +0,0 @@
----
-description: Create a story in Storybook for a given component
-globs:
-alwaysApply: false
----
-
-# Formbricks Storybook Stories
-
-## When generating Storybook stories for Formbricks components:
-
-### 1. **File Structure**
-- Create `stories.tsx` (not `.stories.tsx`) in component directory
-- Use exact import: `import { Meta, StoryObj } from "@storybook/react-vite";`
-- Import component from `"./index"`
-
-### 2. **Story Structure Template**
-```tsx
-import { Meta, StoryObj } from "@storybook/react-vite";
-import { ComponentName } from "./index";
-
-// For complex components with configurable options
-// consider this as an example the options need to reflect the props types
-interface StoryOptions {
-  showIcon: boolean;
-  numberOfElements: number;
-  customLabels: string[];
-}
-
-type StoryProps = React.ComponentProps<typeof ComponentName> & StoryOptions;
-
-const meta: Meta<StoryProps> = {
-  title: "UI/ComponentName",
-  component: ComponentName,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    controls: { sort: "alpha", exclude: [] },
-    docs: {
-      description: {
-        component: "The **ComponentName** component provides [description].",
-      },
-    },
-  },
-  argTypes: {
-    // Organize in exactly these categories: Behavior, Appearance, Content
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ComponentName> & { args: StoryOptions };
-```
-
-### 3. **ArgTypes Organization**
-Organize ALL argTypes into exactly three categories:
-- **Behavior**: disabled, variant, onChange, etc.
-- **Appearance**: size, color, layout, styling, etc.  
-- **Content**: text, icons, numberOfElements, etc.
-
-Format:
-```tsx
-argTypes: {
-  propName: {
-    control: "select" | "boolean" | "text" | "number",
-    options: ["option1", "option2"], // for select
-    description: "Clear description",
-    table: {
-      category: "Behavior" | "Appearance" | "Content",
-      type: { summary: "string" },
-      defaultValue: { summary: "default" },
-    },
-    order: 1,
-  },
-}
-```
-
-### 4. **Required Stories**
-Every component must include:
-- `Default`: Most common use case
-- `Disabled`: If component supports disabled state
-- `WithIcon`: If component supports icons
-- Variant stories for each variant (Primary, Secondary, Error, etc.)
-- Edge case stories (ManyElements, LongText, CustomStyling)
-
-### 5. **Story Format**
-```tsx
-export const Default: Story = {
-  args: {
-    // Props with realistic values
-  },
-};
-
-export const EdgeCase: Story = {
-  args: { /* ... */ },
-  parameters: {
-    docs: {
-      description: {
-        story: "Use this when [specific scenario].",
-      },
-    },
-  },
-};
-```
-
-### 6. **Dynamic Content Pattern**
-For components with dynamic content, create render function:
-```tsx
-const renderComponent = (args: StoryProps) => {
-  const { numberOfElements, showIcon, customLabels } = args;
-  
-  // Generate dynamic content
-  const elements = Array.from({ length: numberOfElements }, (_, i) => ({
-    id: `element-${i}`,
-    label: customLabels[i] || `Element ${i + 1}`,
-    icon: showIcon ? <IconComponent /> : undefined,
-  }));
-  
-  return <ComponentName {...args} elements={elements} />;
-};
-
-export const Dynamic: Story = {
-  render: renderComponent,
-  args: {
-    numberOfElements: 3,
-    showIcon: true,
-    customLabels: ["First", "Second", "Third"],
-  },
-};
-```
-
-### 7. **State Management**
-For interactive components:
-```tsx
-import { useState } from "react";
-
-const ComponentWithState = (args: any) => {
-  const [value, setValue] = useState(args.defaultValue);
-  
-  return (
-    <ComponentName
-      {...args}
-      value={value}
-      onChange={(newValue) => {
-        setValue(newValue);
-        args.onChange?.(newValue);
-      }}
-    />
-  );
-};
-
-export const Interactive: Story = {
-  render: ComponentWithState,
-  args: { defaultValue: "initial" },
-};
-```
-
-### 8. **Quality Requirements**
-- Include component description in parameters.docs
-- Add story documentation for non-obvious use cases
-- Test edge cases (overflow, empty states, many elements)
-- Ensure no TypeScript errors
-- Use realistic prop values
-- Include at least 3-5 story variants
-- Example values need to be in the context of survey application
-
-### 9. **Naming Conventions**
-- **Story titles**: "UI/ComponentName"
-- **Story exports**: PascalCase (Default, WithIcon, ManyElements)
-- **Categories**: "Behavior", "Appearance", "Content" (exact spelling)
-- **Props**: camelCase matching component props
-
-### 10. **Special Cases**
-- **Generic components**: Remove `component` from meta if type conflicts
-- **Form components**: Include Invalid, WithValue stories
-- **Navigation**: Include ManyItems stories
-- **Modals, Dropdowns and Popups **: Include trigger and content structure
-
-## Generate stories that are comprehensive, well-documented, and reflect all component states and edge cases. 

.env.example

@@ -168,6 +168,9 @@ SLACK_CLIENT_SECRET=
 # Enterprise License Key
 ENTERPRISE_LICENSE_KEY=
 
+# Internal Environment (production, staging) - used for internal staging environment
+# ENVIRONMENT=production
+
 # Automatically assign new users to a specific organization and role within that organization
 # Insert an existing organization id or generate a valid CUID for a new one at https://www.getuniqueid.com/cuid (e.g. cjld2cjxh0000qzrmn831i7rn)
 # (Role Management is an Enterprise feature)

.github/workflows/pr-size-check.yml

@@ -111,27 +111,21 @@ jobs:
             const additions = ${{ steps.check-size.outputs.total_additions }};
             const deletions = ${{ steps.check-size.outputs.total_deletions }};
             
-            const body = `## 🚨 PR Size Warning
-            
-This PR has approximately **${totalChanges} lines** of changes (${additions} additions, ${deletions} deletions across ${countedFiles} files).
-
-Large PRs (>800 lines) are significantly harder to review and increase the chance of merge conflicts. Consider splitting this into smaller, self-contained PRs.
-
-### 💡 Suggestions:
-- **Split by feature or module** - Break down into logical, independent pieces
-- **Create a sequence of PRs** - Each building on the previous one
-- **Branch off PR branches** - Don't wait for reviews to continue dependent work
-
-### 📊 What was counted:
-- ✅ Source files, stylesheets, configuration files
-- ❌ Excluded ${excludedFiles} files (tests, locales, locks, generated files)
-
-### 📚 Guidelines:
-- **Ideal:** 300-500 lines per PR
-- **Warning:** 500-800 lines
-- **Critical:** 800+ lines ⚠️
-
-If this large PR is unavoidable (e.g., migration, dependency update, major refactor), please explain in the PR description why it couldn't be split.`;
+            const body = '## 🚨 PR Size Warning\n\n' +
+              'This PR has approximately **' + totalChanges + ' lines** of changes (' + additions + ' additions, ' + deletions + ' deletions across ' + countedFiles + ' files).\n\n' +
+              'Large PRs (>800 lines) are significantly harder to review and increase the chance of merge conflicts. Consider splitting this into smaller, self-contained PRs.\n\n' +
+              '### 💡 Suggestions:\n' +
+              '- **Split by feature or module** - Break down into logical, independent pieces\n' +
+              '- **Create a sequence of PRs** - Each building on the previous one\n' +
+              '- **Branch off PR branches** - Don\'t wait for reviews to continue dependent work\n\n' +
+              '### 📊 What was counted:\n' +
+              '- ✅ Source files, stylesheets, configuration files\n' +
+              '- ❌ Excluded ' + excludedFiles + ' files (tests, locales, locks, generated files)\n\n' +
+              '### 📚 Guidelines:\n' +
+              '- **Ideal:** 300-500 lines per PR\n' +
+              '- **Warning:** 500-800 lines\n' +
+              '- **Critical:** 800+ lines ⚠️\n\n' +
+              'If this large PR is unavoidable (e.g., migration, dependency update, major refactor), please explain in the PR description why it couldn\'t be split.';
             
             // Check if we already commented
             const { data: comments } = await github.rest.issues.listComments({

.gitignore

@@ -62,3 +62,4 @@ branch.json
 packages/ios/FormbricksSDK/FormbricksSDK.xcodeproj/project.xcworkspace/xcuserdata
 .cursorrules
 i18n.cache
+stats.html

.husky/pre-commit

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 # Load environment variables from .env files
 if [ -f .env ]; then
   set -a

AGENTS.md

@@ -18,11 +18,65 @@ Formbricks runs as a pnpm/turbo monorepo. `apps/web` is the Next.js product surf
 ## Coding Style & Naming Conventions
 
 TypeScript, React, and Prisma are the primary languages. Use the shared ESLint presets (`@formbricks/eslint-config`) and Prettier preset (110-char width, semicolons, double quotes, sorted import groups). Two-space indentation is standard; prefer `PascalCase` for React components and folders under `modules/`, `camelCase` for functions/variables, and `SCREAMING_SNAKE_CASE` only for constants. When adding mocks, place them inside `__mocks__` so import ordering stays stable.
+We are using SonarQube to identify code smells and security hotspots.
+
+## Architecture & Patterns
+
+- Next.js app router lives in `apps/web/app` with route groups like `(app)` and `(auth)`. Services live in `apps/web/lib`, feature modules in `apps/web/modules`.
+- Server actions wrap service calls and return `{ data }` or `{ error }` consistently.
+- Context providers should guard against missing provider usage and use cleanup patterns that snapshot refs inside `useEffect` to avoid React hooks warnings
+
+## Caching
+
+- Use React `cache()` for request-level dedupe and `cache.withCache()` or explicit Redis for expensive data.
+- Do not use Next.js `unstable_cache()`.
+- Always use `createCacheKey.*` utilities for cache keys.
+
+## i18n (Internationalization)
+
+- All user-facing text must use the `t()` function from `react-i18next`.
+- Key naming: use lowercase with dots for nesting (e.g., `common.welcome`).
+- Translations are in `apps/web/locales/`. Default is `en-US.json`.
+- Lingo.dev is automatically translating strings from en-US into other languages on commit. Run `pnpm i18n` to generate missing translations and validate keys.
+
+## Database & Prisma Performance
+
+- Multi-tenancy: All data must be scoped by Organization or Environment.
+- Soft Deletion: Check for `isActive` or `deletedAt` fields; use proper filtering.
+- Never use `skip`/`offset` with `prisma.response.count()`; only use `where`.
+- Separate count and data queries and run in parallel (`Promise.all`).
+- Prefer cursor pagination for large datasets.
+- When filtering by `createdAt`, include indexed fields (e.g., `surveyId` + `createdAt`).
 
 ## Testing Guidelines
 
 Prefer Vitest with Testing Library for logic in `.ts` files, keeping specs colocated with the code they exercise (`utility.test.ts`). Do not write tests for `.tsx` files—React components are covered by Playwright E2E tests instead. Mock network and storage boundaries through helpers from `@formbricks/*`. Run `pnpm test` before opening a PR and `pnpm test:coverage` when touching critical flows; keep coverage from regressing. End-to-end scenarios belong in `apps/web/playwright`, using descriptive filenames (`billing.spec.ts`) and tagging slow suites with `@slow` when necessary.
 
+## Documentation (apps/docs)
+
+- Add frontmatter with `title`, `description`, and `icon` at the top of the MDX file.
+- Do not start with an H1; use Camel Case headings (only capitalize the feature name).
+- Use Mintlify components for steps and callouts.
+- If Enterprise-only, add the Enterprise note block described in docs.
+
+## Storybook
+
+- Stories live in `stories.tsx` in the component folder and import from `"./index"`.
+- Use `@storybook/react-vite` and organize argTypes into `Behavior`, `Appearance`, `Content`.
+- Include Default, Disabled (if supported), WithIcon (if supported), all variants, and edge cases.
+
+## GitHub Actions
+
+- Always set minimal `permissions` for `GITHUB_TOKEN`.
+- On `ubuntu-latest`, add `step-security/harden-runner` as the first step.
+
+## Quality Checklist
+
+- Keep code DRY and small; remove dead code and unused imports.
+- Follow React hooks rules, keep effects focused, and avoid unnecessary `useMemo`/`useCallback`.
+- Prefer type inference, avoid `any`, and use shared types from `@formbricks/types`.
+- Keep components focused, avoid deep nesting, and ensure basic accessibility.
+
 ## Commit & Pull Request Guidelines
 
 Commits follow a lightweight Conventional Commit format (`fix:`, `chore:`, `feat:`) and usually append the PR number, e.g. `fix: update OpenAPI schema (#6617)`. Keep commits scoped and lint-clean. Pull requests should outline the problem, summarize the solution, and link to issues or product specs. Attach screenshots or gifs for UI-facing work, list any migrations or env changes, and paste the output of relevant commands (`pnpm test`, `pnpm lint`, `pnpm db:migrate:dev`) so reviewers can verify readiness.

apps/storybook/package.json

@@ -11,24 +11,24 @@
     "clean": "rimraf .turbo node_modules dist storybook-static"
   },
   "dependencies": {
-    "@formbricks/survey-ui": "workspace:*",
-    "eslint-plugin-react-refresh": "0.4.24"
+    "@formbricks/survey-ui": "workspace:*"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.1.3",
-    "@storybook/addon-a11y": "10.0.8",
-    "@storybook/addon-links": "10.0.8",
-    "@storybook/addon-onboarding": "10.0.8",
-    "@storybook/react-vite": "10.0.8",
-    "@typescript-eslint/eslint-plugin": "8.48.0",
-    "@tailwindcss/vite": "4.1.17",
-    "@typescript-eslint/parser": "8.48.0",
-    "@vitejs/plugin-react": "5.1.1",
-    "esbuild": "0.27.0",
-    "eslint-plugin-storybook": "10.0.8",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@storybook/addon-a11y": "10.1.11",
+    "@storybook/addon-links": "10.1.11",
+    "@storybook/addon-onboarding": "10.1.11",
+    "@storybook/react-vite": "10.1.11",
+    "@typescript-eslint/eslint-plugin": "8.53.0",
+    "@tailwindcss/vite": "4.1.18",
+    "@typescript-eslint/parser": "8.53.0",
+    "@vitejs/plugin-react": "5.1.2",
+    "esbuild": "0.25.12",
+    "eslint-plugin-react-refresh": "0.4.26",
+    "eslint-plugin-storybook": "10.1.11",
     "prop-types": "15.8.1",
-    "storybook": "10.0.8",
-    "vite": "7.2.4",
-    "@storybook/addon-docs": "10.0.8"
+    "storybook": "10.1.11",
+    "vite": "7.3.1",
+    "@storybook/addon-docs": "10.1.11"
   }
 }

apps/web/.eslintignore

@@ -0,0 +1,7 @@
+node_modules/
+.next/
+public/
+playwright/
+dist/
+coverage/
+vendor/

apps/web/Dockerfile

@@ -104,6 +104,9 @@ RUN chown -R nextjs:nextjs ./apps/web/.next/static && chmod -R 755 ./apps/web/.n
 COPY --from=installer /app/apps/web/public ./apps/web/public
 RUN chown -R nextjs:nextjs ./apps/web/public && chmod -R 755 ./apps/web/public
 
+# Create packages/database directory structure with proper ownership for runtime migrations
+RUN mkdir -p ./packages/database/migrations && chown -R nextjs:nextjs ./packages/database
+
 COPY --from=installer /app/packages/database/schema.prisma ./packages/database/schema.prisma
 RUN chown nextjs:nextjs ./packages/database/schema.prisma && chmod 644 ./packages/database/schema.prisma
 
@@ -122,6 +125,9 @@ RUN chown nextjs:nextjs ./prisma_version.txt && chmod 644 ./prisma_version.txt
 COPY --from=installer /app/node_modules/@paralleldrive/cuid2 ./node_modules/@paralleldrive/cuid2
 RUN chmod -R 755 ./node_modules/@paralleldrive/cuid2
 
+COPY --from=installer /app/node_modules/uuid ./node_modules/uuid
+RUN chmod -R 755 ./node_modules/uuid
+
 COPY --from=installer /app/node_modules/@noble/hashes ./node_modules/@noble/hashes
 RUN chmod -R 755 ./node_modules/@noble/hashes
 

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

@@ -0,0 +1,520 @@
+"use server";
+
+import { ChartType } from "@prisma/client";
+import { z } from "zod";
+import { prisma } from "@formbricks/database";
+import { ZId } from "@formbricks/types/common";
+import { executeQuery } from "@/app/api/analytics/_lib/cube-client";
+import { authenticatedActionClient } from "@/lib/utils/action-client";
+import { checkAuthorizationUpdated } from "@/lib/utils/action-client/action-client-middleware";
+import { getOrganizationIdFromEnvironmentId, getProjectIdFromEnvironmentId } from "@/lib/utils/helper";
+import { withAuditLogging } from "@/modules/ee/audit-logs/lib/handler";
+
+const ZCreateChartAction = z.object({
+  environmentId: ZId,
+  name: z.string().min(1),
+  type: z.enum(["area", "bar", "line", "pie", "big_number", "big_number_total", "table", "funnel", "map"]),
+  query: z.record(z.any()),
+  config: z.record(z.any()).optional().default({}),
+});
+
+export const createChartAction = authenticatedActionClient.schema(ZCreateChartAction).action(
+  withAuditLogging(
+    "created",
+    "chart",
+    async ({ ctx, parsedInput }: { ctx: any; parsedInput: z.infer<typeof ZCreateChartAction> }) => {
+      const organizationId = await getOrganizationIdFromEnvironmentId(parsedInput.environmentId);
+      const projectId = await getProjectIdFromEnvironmentId(parsedInput.environmentId);
+
+      await checkAuthorizationUpdated({
+        userId: ctx.user.id,
+        organizationId,
+        access: [
+          {
+            type: "organization",
+            roles: ["owner", "manager"],
+          },
+          {
+            type: "projectTeam",
+            minPermission: "readWrite",
+            projectId,
+          },
+        ],
+      });
+
+      const chart = await prisma.chart.create({
+        data: {
+          name: parsedInput.name,
+          type: parsedInput.type as ChartType,
+          projectId,
+          query: parsedInput.query,
+          config: parsedInput.config || {},
+          createdBy: ctx.user.id,
+        },
+      });
+
+      ctx.auditLoggingCtx.organizationId = organizationId;
+      ctx.auditLoggingCtx.projectId = projectId;
+      ctx.auditLoggingCtx.newObject = chart;
+      return chart;
+    }
+  )
+);
+
+const ZUpdateChartAction = z.object({
+  environmentId: ZId,
+  chartId: ZId,
+  name: z.string().min(1).optional(),
+  type: z
+    .enum(["area", "bar", "line", "pie", "big_number", "big_number_total", "table", "funnel", "map"])
+    .optional(),
+  query: z.record(z.any()).optional(),
+  config: z.record(z.any()).optional(),
+});
+
+export const updateChartAction = authenticatedActionClient.schema(ZUpdateChartAction).action(
+  withAuditLogging(
+    "updated",
+    "chart",
+    async ({ ctx, parsedInput }: { ctx: any; parsedInput: z.infer<typeof ZUpdateChartAction> }) => {
+      const organizationId = await getOrganizationIdFromEnvironmentId(parsedInput.environmentId);
+      const projectId = await getProjectIdFromEnvironmentId(parsedInput.environmentId);
+
+      await checkAuthorizationUpdated({
+        userId: ctx.user.id,
+        organizationId,
+        access: [
+          {
+            type: "organization",
+            roles: ["owner", "manager"],
+          },
+          {
+            type: "projectTeam",
+            minPermission: "readWrite",
+            projectId,
+          },
+        ],
+      });
+
+      // Verify chart belongs to the project
+      const chart = await prisma.chart.findFirst({
+        where: { id: parsedInput.chartId, projectId },
+      });
+
+      if (!chart) {
+        throw new Error("Chart not found");
+      }
+
+      const updateData: any = {};
+      if (parsedInput.name !== undefined) updateData.name = parsedInput.name;
+      if (parsedInput.type !== undefined) updateData.type = parsedInput.type as ChartType;
+      if (parsedInput.query !== undefined) updateData.query = parsedInput.query;
+      if (parsedInput.config !== undefined) updateData.config = parsedInput.config;
+
+      const updatedChart = await prisma.chart.update({
+        where: { id: parsedInput.chartId },
+        data: updateData,
+      });
+
+      ctx.auditLoggingCtx.organizationId = organizationId;
+      ctx.auditLoggingCtx.projectId = projectId;
+      ctx.auditLoggingCtx.oldObject = chart;
+      ctx.auditLoggingCtx.newObject = updatedChart;
+      return updatedChart;
+    }
+  )
+);
+
+const ZAddChartToDashboardAction = z.object({
+  environmentId: ZId,
+  chartId: ZId,
+  dashboardId: ZId,
+  title: z.string().optional(),
+  layout: z
+    .object({
+      x: z.number(),
+      y: z.number(),
+      w: z.number(),
+      h: z.number(),
+    })
+    .optional()
+    .default({ x: 0, y: 0, w: 4, h: 3 }),
+});
+
+export const addChartToDashboardAction = authenticatedActionClient.schema(ZAddChartToDashboardAction).action(
+  withAuditLogging(
+    "created",
+    "dashboardWidget",
+    async ({ ctx, parsedInput }: { ctx: any; parsedInput: z.infer<typeof ZAddChartToDashboardAction> }) => {
+      const organizationId = await getOrganizationIdFromEnvironmentId(parsedInput.environmentId);
+      const projectId = await getProjectIdFromEnvironmentId(parsedInput.environmentId);
+
+      await checkAuthorizationUpdated({
+        userId: ctx.user.id,
+        organizationId,
+        access: [
+          {
+            type: "organization",
+            roles: ["owner", "manager"],
+          },
+          {
+            type: "projectTeam",
+            minPermission: "readWrite",
+            projectId,
+          },
+        ],
+      });
+
+      // Verify chart and dashboard belong to the same project
+      const [chart, dashboard] = await Promise.all([
+        prisma.chart.findFirst({
+          where: { id: parsedInput.chartId, projectId },
+        }),
+        prisma.dashboard.findFirst({
+          where: { id: parsedInput.dashboardId, projectId },
+        }),
+      ]);
+
+      if (!chart) {
+        throw new Error("Chart not found");
+      }
+      if (!dashboard) {
+        throw new Error("Dashboard not found");
+      }
+
+      // Get the max order for widgets in this dashboard
+      const maxOrder = await prisma.dashboardWidget.aggregate({
+        where: { dashboardId: parsedInput.dashboardId },
+        _max: { order: true },
+      });
+
+      const widget = await prisma.dashboardWidget.create({
+        data: {
+          dashboardId: parsedInput.dashboardId,
+          chartId: parsedInput.chartId,
+          type: "chart",
+          title: parsedInput.title,
+          layout: parsedInput.layout,
+          order: (maxOrder._max.order ?? -1) + 1,
+        },
+      });
+
+      ctx.auditLoggingCtx.organizationId = organizationId;
+      ctx.auditLoggingCtx.projectId = projectId;
+      ctx.auditLoggingCtx.newObject = widget;
+      return widget;
+    }
+  )
+);
+
+const ZCreateDashboardAction = z.object({
+  environmentId: ZId,
+  name: z.string().min(1),
+  description: z.string().optional(),
+});
+
+export const createDashboardAction = authenticatedActionClient.schema(ZCreateDashboardAction).action(
+  withAuditLogging(
+    "created",
+    "dashboard",
+    async ({ ctx, parsedInput }: { ctx: any; parsedInput: z.infer<typeof ZCreateDashboardAction> }) => {
+      const organizationId = await getOrganizationIdFromEnvironmentId(parsedInput.environmentId);
+      const projectId = await getProjectIdFromEnvironmentId(parsedInput.environmentId);
+
+      await checkAuthorizationUpdated({
+        userId: ctx.user.id,
+        organizationId,
+        access: [
+          {
+            type: "organization",
+            roles: ["owner", "manager"],
+          },
+          {
+            type: "projectTeam",
+            minPermission: "readWrite",
+            projectId,
+          },
+        ],
+      });
+
+      const dashboard = await prisma.dashboard.create({
+        data: {
+          name: parsedInput.name,
+          description: parsedInput.description,
+          projectId,
+          status: "draft",
+          createdBy: ctx.user.id,
+        },
+      });
+
+      ctx.auditLoggingCtx.organizationId = organizationId;
+      ctx.auditLoggingCtx.projectId = projectId;
+      ctx.auditLoggingCtx.newObject = dashboard;
+      return dashboard;
+    }
+  )
+);
+
+const ZUpdateDashboardAction = z.object({
+  environmentId: ZId,
+  dashboardId: ZId,
+  name: z.string().min(1).optional(),
+  description: z.string().optional().nullable(),
+  status: z.enum(["draft", "published"]).optional(),
+});
+
+export const updateDashboardAction = authenticatedActionClient.schema(ZUpdateDashboardAction).action(
+  withAuditLogging(
+    "updated",
+    "dashboard",
+    async ({ ctx, parsedInput }: { ctx: any; parsedInput: z.infer<typeof ZUpdateDashboardAction> }) => {
+      const organizationId = await getOrganizationIdFromEnvironmentId(parsedInput.environmentId);
+      const projectId = await getProjectIdFromEnvironmentId(parsedInput.environmentId);
+
+      await checkAuthorizationUpdated({
+        userId: ctx.user.id,
+        organizationId,
+        access: [
+          {
+            type: "organization",
+            roles: ["owner", "manager"],
+          },
+          {
+            type: "projectTeam",
+            minPermission: "readWrite",
+            projectId,
+          },
+        ],
+      });
+
+      // Verify dashboard belongs to the project
+      const dashboard = await prisma.dashboard.findFirst({
+        where: { id: parsedInput.dashboardId, projectId },
+      });
+
+      if (!dashboard) {
+        throw new Error("Dashboard not found");
+      }
+
+      const updateData: any = {};
+      if (parsedInput.name !== undefined) updateData.name = parsedInput.name;
+      if (parsedInput.description !== undefined) updateData.description = parsedInput.description;
+      if (parsedInput.status !== undefined) updateData.status = parsedInput.status;
+
+      const updatedDashboard = await prisma.dashboard.update({
+        where: { id: parsedInput.dashboardId },
+        data: updateData,
+      });
+
+      ctx.auditLoggingCtx.organizationId = organizationId;
+      ctx.auditLoggingCtx.projectId = projectId;
+      ctx.auditLoggingCtx.oldObject = dashboard;
+      ctx.auditLoggingCtx.newObject = updatedDashboard;
+      return updatedDashboard;
+    }
+  )
+);
+
+const ZGetDashboardsAction = z.object({
+  environmentId: ZId,
+});
+
+export const getDashboardsAction = authenticatedActionClient
+  .schema(ZGetDashboardsAction)
+  .action(async ({ ctx, parsedInput }: { ctx: any; parsedInput: z.infer<typeof ZGetDashboardsAction> }) => {
+    const organizationId = await getOrganizationIdFromEnvironmentId(parsedInput.environmentId);
+    const projectId = await getProjectIdFromEnvironmentId(parsedInput.environmentId);
+
+    await checkAuthorizationUpdated({
+      userId: ctx.user.id,
+      organizationId,
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager"],
+        },
+        {
+          type: "projectTeam",
+          minPermission: "read",
+          projectId,
+        },
+      ],
+    });
+
+    const dashboards = await prisma.dashboard.findMany({
+      where: { projectId },
+      orderBy: { createdAt: "desc" },
+      select: {
+        id: true,
+        name: true,
+        description: true,
+        status: true,
+        createdAt: true,
+        updatedAt: true,
+      },
+    });
+
+    return dashboards;
+  });
+
+const ZGetChartAction = z.object({
+  environmentId: ZId,
+  chartId: ZId,
+});
+
+export const getChartAction = authenticatedActionClient
+  .schema(ZGetChartAction)
+  .action(async ({ ctx, parsedInput }: { ctx: any; parsedInput: z.infer<typeof ZGetChartAction> }) => {
+    const organizationId = await getOrganizationIdFromEnvironmentId(parsedInput.environmentId);
+    const projectId = await getProjectIdFromEnvironmentId(parsedInput.environmentId);
+
+    await checkAuthorizationUpdated({
+      userId: ctx.user.id,
+      organizationId,
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager"],
+        },
+        {
+          type: "projectTeam",
+          minPermission: "read",
+          projectId,
+        },
+      ],
+    });
+
+    const chart = await prisma.chart.findFirst({
+      where: { id: parsedInput.chartId, projectId },
+      select: {
+        id: true,
+        name: true,
+        type: true,
+        query: true,
+        config: true,
+        createdAt: true,
+        updatedAt: true,
+      },
+    });
+
+    if (!chart) {
+      throw new Error("Chart not found");
+    }
+
+    return chart;
+  });
+
+const ZGetChartsAction = z.object({
+  environmentId: ZId,
+});
+
+export const getChartsAction = authenticatedActionClient
+  .schema(ZGetChartsAction)
+  .action(async ({ ctx, parsedInput }: { ctx: any; parsedInput: z.infer<typeof ZGetChartsAction> }) => {
+    const organizationId = await getOrganizationIdFromEnvironmentId(parsedInput.environmentId);
+    const projectId = await getProjectIdFromEnvironmentId(parsedInput.environmentId);
+
+    await checkAuthorizationUpdated({
+      userId: ctx.user.id,
+      organizationId,
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager"],
+        },
+        {
+          type: "projectTeam",
+          minPermission: "read",
+          projectId,
+        },
+      ],
+    });
+
+    const charts = await prisma.chart.findMany({
+      where: { projectId },
+      orderBy: { createdAt: "desc" },
+      select: {
+        id: true,
+        name: true,
+        type: true,
+        createdAt: true,
+        updatedAt: true,
+        query: true,
+        config: true,
+        widgets: {
+          select: {
+            dashboardId: true,
+          },
+        },
+      },
+    });
+
+    return charts;
+  });
+
+const ZExecuteQueryAction = z.object({
+  environmentId: ZId,
+  query: z.object({
+    measures: z.array(z.string()),
+    dimensions: z.array(z.string()).optional(),
+    timeDimensions: z
+      .array(
+        z.object({
+          dimension: z.string(),
+          granularity: z.enum(["hour", "day", "week", "month", "quarter", "year"]).optional(),
+          dateRange: z.union([z.string(), z.array(z.string())]).optional(),
+        })
+      )
+      .optional(),
+    filters: z
+      .array(
+        z.object({
+          member: z.string(),
+          operator: z.enum([
+            "equals",
+            "notEquals",
+            "contains",
+            "notContains",
+            "set",
+            "notSet",
+            "gt",
+            "gte",
+            "lt",
+            "lte",
+          ]),
+          values: z.array(z.string()).optional().nullable(),
+        })
+      )
+      .optional(),
+  }),
+});
+
+export const executeQueryAction = authenticatedActionClient
+  .schema(ZExecuteQueryAction)
+  .action(async ({ ctx, parsedInput }: { ctx: any; parsedInput: z.infer<typeof ZExecuteQueryAction> }) => {
+    const organizationId = await getOrganizationIdFromEnvironmentId(parsedInput.environmentId);
+    const projectId = await getProjectIdFromEnvironmentId(parsedInput.environmentId);
+
+    await checkAuthorizationUpdated({
+      userId: ctx.user.id,
+      organizationId,
+      access: [
+        {
+          type: "organization",
+          roles: ["owner", "manager"],
+        },
+        {
+          type: "projectTeam",
+          minPermission: "read",
+          projectId,
+        },
+      ],
+    });
+
+    try {
+      const data = await executeQuery(parsedInput.query);
+      return { data };
+    } catch (error: any) {
+      return { error: error.message || "Failed to execute query" };
+    }
+  });

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/AIQuerySection.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { ActivityIcon } from "lucide-react";
+import { useState } from "react";
+import { toast } from "react-hot-toast";
+import { AnalyticsResponse } from "@/app/api/analytics/_lib/types";
+import { Button } from "@/modules/ui/components/button";
+import { Input } from "@/modules/ui/components/input";
+import { LoadingSpinner } from "@/modules/ui/components/loading-spinner";
+
+interface AIQuerySectionProps {
+  onChartGenerated: (data: AnalyticsResponse) => void;
+}
+
+export function AIQuerySection({ onChartGenerated }: AIQuerySectionProps) {
+  const [userQuery, setUserQuery] = useState("");
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  const handleGenerate = async () => {
+    if (!userQuery.trim()) return;
+
+    setIsGenerating(true);
+
+    try {
+      const response = await fetch("/api/analytics/query", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt: userQuery }),
+      });
+
+      const data = await response.json();
+
+      if (data.error) {
+        toast.error(data.error);
+        return;
+      }
+
+      if (data.data) {
+        onChartGenerated(data);
+      } else {
+        toast.error("No data returned from query");
+      }
+    } catch (error: any) {
+      toast.error(error.message || "Failed to generate chart");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+      <div className="mb-4 flex items-center gap-2">
+        <div className="bg-brand-dark/10 flex h-8 w-8 items-center justify-center rounded-full">
+          <ActivityIcon className="text-brand-dark h-5 w-5" />
+        </div>
+        <div>
+          <h2 className="font-semibold text-gray-900">Ask your data</h2>
+          <p className="text-sm text-gray-500">Describe what you want to see and let AI build the chart.</p>
+        </div>
+      </div>
+
+      <div className="flex gap-4">
+        <Input
+          placeholder="e.g. How many users signed up last week?"
+          value={userQuery}
+          onChange={(e) => setUserQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && userQuery.trim() && !isGenerating) {
+              handleGenerate();
+            }
+          }}
+          className="flex-1"
+          disabled={isGenerating}
+        />
+        <Button
+          disabled={!userQuery.trim() || isGenerating}
+          loading={isGenerating}
+          className="bg-brand-dark hover:bg-brand-dark/90"
+          onClick={handleGenerate}>
+          Generate
+        </Button>
+      </div>
+
+      {isGenerating && (
+        <div className="flex items-center justify-center py-12">
+          <LoadingSpinner className="h-8 w-8" />
+          <span className="ml-3 text-sm text-gray-500">Generating chart...</span>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/AddToDashboardDialog.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { Button } from "@/modules/ui/components/button";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
+import { Input } from "@/modules/ui/components/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/modules/ui/components/select";
+
+interface Dashboard {
+  id: string;
+  name: string;
+}
+
+interface AddToDashboardDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  chartName: string;
+  onChartNameChange: (name: string) => void;
+  dashboards: Dashboard[];
+  selectedDashboardId: string;
+  onDashboardSelect: (id: string) => void;
+  onAdd: () => void;
+  isSaving: boolean;
+}
+
+export function AddToDashboardDialog({
+  open,
+  onOpenChange,
+  chartName,
+  onChartNameChange,
+  dashboards,
+  selectedDashboardId,
+  onDashboardSelect,
+  onAdd,
+  isSaving,
+}: AddToDashboardDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Add Chart to Dashboard</DialogTitle>
+          <DialogDescription>
+            Select a dashboard to add this chart to. The chart will be saved automatically.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="chart-name" className="mb-2 block text-sm font-medium text-gray-700">
+                Chart Name
+              </label>
+              <Input
+                id="chart-name"
+                placeholder="Chart name"
+                value={chartName}
+                onChange={(e) => onChartNameChange(e.target.value)}
+              />
+            </div>
+            <div>
+              <label htmlFor="dashboard-select" className="mb-2 block text-sm font-medium text-gray-700">
+                Dashboard
+              </label>
+              <Select value={selectedDashboardId} onValueChange={onDashboardSelect}>
+                <SelectTrigger id="dashboard-select" className="w-full bg-white">
+                  <SelectValue
+                    placeholder={dashboards.length === 0 ? "No dashboards available" : "Select a dashboard"}
+                  />
+                </SelectTrigger>
+                <SelectContent position="popper" className="z-[100] max-h-[200px]">
+                  {dashboards.length === 0 ? (
+                    <div className="px-2 py-1.5 text-sm text-gray-500">No dashboards available</div>
+                  ) : (
+                    dashboards.map((dashboard) => (
+                      <SelectItem key={dashboard.id} value={dashboard.id}>
+                        {dashboard.name}
+                      </SelectItem>
+                    ))
+                  )}
+                </SelectContent>
+              </Select>
+              {dashboards.length === 0 && (
+                <p className="mt-1 text-xs text-gray-500">Create a dashboard first to add charts to it.</p>
+              )}
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
+            Cancel
+          </Button>
+          <Button onClick={onAdd} loading={isSaving} disabled={!selectedDashboardId}>
+            Add to Dashboard
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/AdvancedChartBuilder.tsx

@@ -0,0 +1,617 @@
+"use client";
+
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { CodeIcon, DatabaseIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import React, { useEffect, useReducer, useState } from "react";
+import { toast } from "react-hot-toast";
+import { AnalyticsResponse } from "@/app/api/analytics/_lib/types";
+import { Button } from "@/modules/ui/components/button";
+import { LoadingSpinner } from "@/modules/ui/components/loading-spinner";
+import {
+  addChartToDashboardAction,
+  createChartAction,
+  executeQueryAction,
+  getDashboardsAction,
+} from "../../actions";
+import { CHART_TYPES } from "../lib/chart-types";
+
+// Filter out table, map, and scatter charts
+const AVAILABLE_CHART_TYPES = CHART_TYPES.filter(
+  (type) => !["table", "map", "scatter"].includes(type.id)
+);
+import { mapChartType } from "../lib/chart-utils";
+import {
+  ChartBuilderState,
+  CustomMeasure,
+  FilterRow,
+  TimeDimensionConfig,
+  buildCubeQuery,
+  parseQueryToState,
+} from "../lib/query-builder";
+import { AddToDashboardDialog } from "./AddToDashboardDialog";
+import { ChartRenderer } from "./ChartRenderer";
+import { DimensionsPanel } from "./DimensionsPanel";
+import { FiltersPanel } from "./FiltersPanel";
+import { MeasuresPanel } from "./MeasuresPanel";
+import { SaveChartDialog } from "./SaveChartDialog";
+import { TimeDimensionPanel } from "./TimeDimensionPanel";
+
+interface AdvancedChartBuilderProps {
+  environmentId: string;
+  initialChartType?: string;
+  initialQuery?: any; // Prefill with AI-generated query
+  hidePreview?: boolean; // Hide internal preview when using unified preview
+  onChartGenerated?: (data: AnalyticsResponse) => void;
+  onSave?: (chartId: string) => void;
+  onAddToDashboard?: (chartId: string, dashboardId: string) => void;
+}
+
+type Action =
+  | { type: "SET_CHART_TYPE"; payload: string }
+  | { type: "ADD_MEASURE"; payload: string }
+  | { type: "REMOVE_MEASURE"; payload: string }
+  | { type: "SET_MEASURES"; payload: string[] }
+  | { type: "ADD_CUSTOM_MEASURE"; payload: CustomMeasure }
+  | { type: "UPDATE_CUSTOM_MEASURE"; payload: { index: number; measure: CustomMeasure } }
+  | { type: "REMOVE_CUSTOM_MEASURE"; payload: number }
+  | { type: "SET_CUSTOM_MEASURES"; payload: CustomMeasure[] }
+  | { type: "SET_DIMENSIONS"; payload: string[] }
+  | { type: "ADD_FILTER"; payload: FilterRow }
+  | { type: "UPDATE_FILTER"; payload: { index: number; filter: FilterRow } }
+  | { type: "REMOVE_FILTER"; payload: number }
+  | { type: "SET_FILTERS"; payload: FilterRow[] }
+  | { type: "SET_FILTER_LOGIC"; payload: "and" | "or" }
+  | { type: "SET_TIME_DIMENSION"; payload: TimeDimensionConfig | null };
+
+const initialState: ChartBuilderState = {
+  chartType: "",
+  selectedMeasures: [],
+  customMeasures: [],
+  selectedDimensions: [],
+  filters: [],
+  filterLogic: "and",
+  timeDimension: null,
+};
+
+function chartBuilderReducer(state: ChartBuilderState, action: Action): ChartBuilderState {
+  switch (action.type) {
+    case "SET_CHART_TYPE":
+      return { ...state, chartType: action.payload };
+    case "SET_MEASURES":
+      return { ...state, selectedMeasures: action.payload };
+    case "SET_CUSTOM_MEASURES":
+      return { ...state, customMeasures: action.payload };
+    case "SET_DIMENSIONS":
+      return { ...state, selectedDimensions: action.payload };
+    case "SET_FILTERS":
+      return { ...state, filters: action.payload };
+    case "SET_FILTER_LOGIC":
+      return { ...state, filterLogic: action.payload };
+    case "SET_TIME_DIMENSION":
+      return { ...state, timeDimension: action.payload };
+    default:
+      return state;
+  }
+}
+
+export function AdvancedChartBuilder({
+  environmentId,
+  initialChartType,
+  initialQuery,
+  hidePreview = false,
+  onChartGenerated,
+  onSave,
+  onAddToDashboard,
+}: AdvancedChartBuilderProps) {
+  const router = useRouter();
+
+  // Initialize state from initialQuery if provided
+  const getInitialState = (): ChartBuilderState => {
+    if (initialQuery) {
+      const parsedState = parseQueryToState(initialQuery, initialChartType);
+      return {
+        ...initialState,
+        ...parsedState,
+        chartType: parsedState.chartType || initialChartType || "",
+      };
+    }
+    return {
+      ...initialState,
+      chartType: initialChartType || "",
+    };
+  };
+
+  const [state, dispatch] = useReducer(chartBuilderReducer, getInitialState());
+  const [chartData, setChartData] = useState<Record<string, any>[] | null>(null);
+  const [query, setQuery] = useState<any>(initialQuery || null);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const lastStateRef = React.useRef<string>("");
+
+  // Sync initialChartType prop changes to state
+  useEffect(() => {
+    if (initialChartType && initialChartType !== state.chartType) {
+      dispatch({ type: "SET_CHART_TYPE", payload: initialChartType });
+      // If there's no initialQuery, mark as initialized so reactive updates can work
+      if (!initialQuery && !isInitialized) {
+        setIsInitialized(true);
+      }
+    }
+  }, [initialChartType, state.chartType, initialQuery, isInitialized]);
+
+  // Initialize: If initialQuery is provided (from AI), execute it and set chart data
+  useEffect(() => {
+    if (initialQuery && !isInitialized) {
+      setIsInitialized(true);
+      executeQueryAction({
+        environmentId,
+        query: initialQuery,
+      }).then((result) => {
+        if (result?.data?.data) {
+          const data = Array.isArray(result.data.data) ? result.data.data : [];
+          setChartData(data);
+          setQuery(initialQuery);
+          // Set initial state hash to prevent reactive update on initial load
+          lastStateRef.current = JSON.stringify({
+            chartType: state.chartType,
+            measures: state.selectedMeasures,
+            dimensions: state.selectedDimensions,
+            filters: state.filters,
+            timeDimension: state.timeDimension,
+          });
+          // Call onChartGenerated if provided
+          if (onChartGenerated) {
+            const analyticsResponse: AnalyticsResponse = {
+              query: initialQuery,
+              chartType: state.chartType as any,
+              data,
+            };
+            onChartGenerated(analyticsResponse);
+          }
+        }
+      });
+    }
+  }, [initialQuery, environmentId, isInitialized, state.chartType, state.selectedMeasures, state.selectedDimensions, state.filters, state.timeDimension, onChartGenerated]);
+
+  // Update preview reactively when state changes (after initialization)
+  useEffect(() => {
+    // Skip if not initialized or no chart type selected
+    if (!isInitialized || !state.chartType) return;
+
+    // Create a hash of relevant state to detect changes
+    const stateHash = JSON.stringify({
+      chartType: state.chartType,
+      measures: state.selectedMeasures,
+      dimensions: state.selectedDimensions,
+      filters: state.filters,
+      timeDimension: state.timeDimension,
+    });
+
+    // Only update if state actually changed
+    if (stateHash === lastStateRef.current) return;
+    lastStateRef.current = stateHash;
+
+    // If chart type changed but we have existing data, update the chart type in preview immediately
+    // This handles the case where user changes chart type from ManualChartBuilder
+    if (chartData && Array.isArray(chartData) && chartData.length > 0 && query) {
+      if (onChartGenerated) {
+        const analyticsResponse: AnalyticsResponse = {
+          query: query, // Keep existing query
+          chartType: state.chartType as any, // Update chart type
+          data: chartData, // Keep existing data
+        };
+        onChartGenerated(analyticsResponse);
+      }
+    }
+
+    // Only execute query if we have measures configured
+    if (state.selectedMeasures.length === 0 && state.customMeasures.length === 0) {
+      return; // Don't execute query without measures
+    }
+
+    // Build and execute query with current state
+    const updatedQuery = buildCubeQuery(state);
+    setIsLoading(true);
+    setError(null);
+
+    executeQueryAction({
+      environmentId,
+      query: updatedQuery,
+    })
+      .then((result) => {
+        if (result?.data?.data) {
+          const data = Array.isArray(result.data.data) ? result.data.data : [];
+          setChartData(data);
+          setQuery(updatedQuery);
+          // Call onChartGenerated to update parent preview
+          if (onChartGenerated) {
+            const analyticsResponse: AnalyticsResponse = {
+              query: updatedQuery,
+              chartType: state.chartType as any,
+              data,
+            };
+            onChartGenerated(analyticsResponse);
+          }
+        } else if (result?.serverError) {
+          setError(result.serverError);
+        }
+      })
+      .catch((err: any) => {
+        setError(err.message || "Failed to execute query");
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, [state.chartType, state.selectedMeasures, state.selectedDimensions, state.filters, state.timeDimension, isInitialized, environmentId, onChartGenerated, chartData, query]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
+  const [isAddToDashboardDialogOpen, setIsAddToDashboardDialogOpen] = useState(false);
+  const [chartName, setChartName] = useState("");
+  const [dashboards, setDashboards] = useState<Array<{ id: string; name: string }>>([]);
+  const [selectedDashboardId, setSelectedDashboardId] = useState<string>("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [showQuery, setShowQuery] = useState(false);
+  const [showData, setShowData] = useState(false);
+
+  useEffect(() => {
+    if (isAddToDashboardDialogOpen) {
+      getDashboardsAction({ environmentId }).then((result) => {
+        if (result?.data) {
+          setDashboards(result.data);
+        } else if (result?.serverError) {
+          toast.error(result.serverError);
+        }
+      });
+    }
+  }, [isAddToDashboardDialogOpen, environmentId]);
+
+  const handleRunQuery = async () => {
+    if (!state.chartType) {
+      toast.error("Please select a chart type");
+      return;
+    }
+    if (state.selectedMeasures.length === 0 && state.customMeasures.length === 0) {
+      toast.error("Please select at least one measure");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const cubeQuery = buildCubeQuery(state);
+      setQuery(cubeQuery);
+
+      const result = await executeQueryAction({
+        environmentId,
+        query: cubeQuery,
+      });
+
+      if (result?.serverError) {
+        setError(result.serverError);
+        toast.error(result.serverError);
+        setChartData(null);
+      } else if (result?.data?.data) {
+        // Ensure data is always an array - result.data.data contains the actual array
+        const data = Array.isArray(result.data.data) ? result.data.data : [];
+        setChartData(data);
+        setError(null);
+        toast.success("Query executed successfully");
+
+        // Call onChartGenerated callback if provided
+        if (onChartGenerated) {
+          const analyticsResponse: AnalyticsResponse = {
+            query: cubeQuery,
+            chartType: state.chartType as any,
+            data,
+          };
+          onChartGenerated(analyticsResponse);
+        }
+      } else {
+        throw new Error("No data returned");
+      }
+    } catch (err: any) {
+      const errorMessage = err.message || "Failed to execute query";
+      setError(errorMessage);
+      toast.error(errorMessage);
+      setChartData(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSaveChart = async () => {
+    if (!chartData || !chartName.trim()) {
+      toast.error("Please enter a chart name");
+      return;
+    }
+    if (!query) {
+      toast.error("Please run a query first");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const result = await createChartAction({
+        environmentId,
+        name: chartName,
+        type: mapChartType(state.chartType),
+        query,
+        config: {},
+      });
+
+      if (!result?.data) {
+        toast.error(result?.serverError || "Failed to save chart");
+        return;
+      }
+
+      toast.success("Chart saved successfully!");
+      setIsSaveDialogOpen(false);
+      if (onSave) {
+        onSave(result.data.id);
+      } else {
+        router.push(`/environments/${environmentId}/analysis/charts`);
+      }
+    } catch (error: any) {
+      toast.error(error.message || "Failed to save chart");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleAddToDashboard = async () => {
+    if (!chartData || !selectedDashboardId) {
+      toast.error("Please select a dashboard");
+      return;
+    }
+    if (!query) {
+      toast.error("Please run a query first");
+      return;
+    }
+
+    setIsSaving(true);
+    console.log(query);
+    try {
+      const chartResult = await createChartAction({
+        environmentId,
+        name: chartName || `Chart ${new Date().toLocaleString()}`,
+        type: mapChartType(state.chartType),
+        query,
+        config: {},
+      });
+
+      if (!chartResult?.data) {
+        toast.error(chartResult?.serverError || "Failed to save chart");
+        return;
+      }
+
+      const widgetResult = await addChartToDashboardAction({
+        environmentId,
+        chartId: chartResult.data.id,
+        dashboardId: selectedDashboardId,
+      });
+
+      if (!widgetResult?.data) {
+        toast.error(widgetResult?.serverError || "Failed to add chart to dashboard");
+        return;
+      }
+
+      toast.success("Chart added to dashboard!");
+      setIsAddToDashboardDialogOpen(false);
+      if (onAddToDashboard) {
+        onAddToDashboard(chartResult.data.id, selectedDashboardId);
+      } else {
+        router.push(`/environments/${environmentId}/analysis/dashboard/${selectedDashboardId}`);
+      }
+    } catch (error: any) {
+      toast.error(error.message || "Failed to add chart to dashboard");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className={hidePreview ? "space-y-4" : "grid gap-4 lg:grid-cols-2"}>
+      {/* Left Column: Configuration */}
+      <div className="space-y-4">
+        {/* Chart Type Selection - Hidden when hidePreview is true (unified flow) */}
+        {!hidePreview && (
+          <div className="space-y-4">
+            <h2 className="font-medium text-gray-900">Choose chart type</h2>
+            <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">
+              {AVAILABLE_CHART_TYPES.map((chart) => {
+                const isSelected = state.chartType === chart.id;
+                return (
+                  <button
+                    key={chart.id}
+                    type="button"
+                    onClick={() => dispatch({ type: "SET_CHART_TYPE", payload: chart.id })}
+                    className={`rounded-md border p-4 text-center transition-all hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 ${isSelected
+                      ? "border-brand-dark ring-brand-dark bg-brand-dark/5 ring-1"
+                      : "border-gray-200 hover:border-gray-300"
+                      }`}>
+                    <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded bg-gray-100">
+                      <chart.icon className="h-6 w-6 text-gray-600" strokeWidth={1.5} />
+                    </div>
+                    <span className="text-xs font-medium text-gray-700">{chart.name}</span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Measures Panel */}
+        <MeasuresPanel
+          selectedMeasures={state.selectedMeasures}
+          customMeasures={state.customMeasures}
+          onMeasuresChange={(measures) => dispatch({ type: "SET_MEASURES", payload: measures })}
+          onCustomMeasuresChange={(measures) => dispatch({ type: "SET_CUSTOM_MEASURES", payload: measures })}
+        />
+
+        {/* Dimensions Panel */}
+        <DimensionsPanel
+          selectedDimensions={state.selectedDimensions}
+          onDimensionsChange={(dimensions) => dispatch({ type: "SET_DIMENSIONS", payload: dimensions })}
+        />
+
+        {/* Time Dimension Panel */}
+        <TimeDimensionPanel
+          timeDimension={state.timeDimension}
+          onTimeDimensionChange={(config) => dispatch({ type: "SET_TIME_DIMENSION", payload: config })}
+        />
+
+        {/* Filters Panel */}
+        <FiltersPanel
+          filters={state.filters}
+          filterLogic={state.filterLogic}
+          onFiltersChange={(filters) => dispatch({ type: "SET_FILTERS", payload: filters })}
+          onFilterLogicChange={(logic) => dispatch({ type: "SET_FILTER_LOGIC", payload: logic })}
+        />
+
+        {/* Action Buttons */}
+        <div className="flex gap-2">
+          <Button onClick={handleRunQuery} disabled={isLoading || !state.chartType}>
+            {isLoading ? <LoadingSpinner /> : "Run Query"}
+          </Button>
+          {chartData && !onSave && !onAddToDashboard && (
+            <>
+              <Button variant="outline" onClick={() => setIsSaveDialogOpen(true)}>
+                Save Chart
+              </Button>
+              <Button variant="outline" onClick={() => setIsAddToDashboardDialogOpen(true)}>
+                Add to Dashboard
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Right Column: Preview - Hidden when hidePreview is true */}
+      {!hidePreview && (
+        <div className="space-y-4">
+          <h3 className="font-medium text-gray-900">Chart Preview</h3>
+
+          {error && (
+            <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800">{error}</div>
+          )}
+
+          {isLoading && (
+            <div className="flex h-64 items-center justify-center">
+              <LoadingSpinner />
+            </div>
+          )}
+
+          {chartData && Array.isArray(chartData) && chartData.length > 0 && !isLoading && (
+            <div className="space-y-4">
+              <div className="rounded-lg border border-gray-200 bg-white p-4">
+                <ChartRenderer chartType={state.chartType} data={chartData} />
+              </div>
+
+              {/* Query Viewer */}
+              <Collapsible.Root open={showQuery} onOpenChange={setShowQuery}>
+                <Collapsible.CollapsibleTrigger asChild>
+                  <Button variant="outline" className="w-full justify-start">
+                    <CodeIcon className="mr-2 h-4 w-4" />
+                    {showQuery ? "Hide" : "View"} Query
+                  </Button>
+                </Collapsible.CollapsibleTrigger>
+                <Collapsible.CollapsibleContent className="mt-2">
+                  <pre className="max-h-64 overflow-auto rounded-lg border border-gray-200 bg-gray-50 p-4 text-xs">
+                    {JSON.stringify(query, null, 2)}
+                  </pre>
+                </Collapsible.CollapsibleContent>
+              </Collapsible.Root>
+
+              {/* Data Viewer */}
+              <Collapsible.Root open={showData} onOpenChange={setShowData}>
+                <Collapsible.CollapsibleTrigger asChild>
+                  <Button variant="outline" className="w-full justify-start">
+                    <DatabaseIcon className="mr-2 h-4 w-4" />
+                    {showData ? "Hide" : "View"} Data
+                  </Button>
+                </Collapsible.CollapsibleTrigger>
+                <Collapsible.CollapsibleContent className="mt-2">
+                  <div className="max-h-64 overflow-auto rounded-lg border border-gray-200">
+                    <table className="w-full text-xs">
+                      <thead className="bg-gray-50">
+                        <tr>
+                          {Array.isArray(chartData) &&
+                            chartData.length > 0 &&
+                            Object.keys(chartData[0]).map((key) => (
+                              <th
+                                key={key}
+                                className="border-b border-gray-200 px-3 py-2 text-left font-medium">
+                                {key}
+                              </th>
+                            ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {Array.isArray(chartData) &&
+                          chartData.slice(0, 10).map((row, idx) => {
+                            // Create a unique key from row data
+                            const rowKey = Object.values(row)
+                              .slice(0, 3)
+                              .map((v) => String(v || ""))
+                              .join("-");
+                            return (
+                              <tr key={`row-${idx}-${rowKey}`} className="border-b border-gray-100">
+                                {Object.entries(row).map(([key, value]) => (
+                                  <td key={`${rowKey}-${key}`} className="px-3 py-2">
+                                    {value?.toString() || "-"}
+                                  </td>
+                                ))}
+                              </tr>
+                            );
+                          })}
+                      </tbody>
+                    </table>
+                    {Array.isArray(chartData) && chartData.length > 10 && (
+                      <div className="bg-gray-50 px-3 py-2 text-xs text-gray-500">
+                        Showing first 10 of {chartData.length} rows
+                      </div>
+                    )}
+                  </div>
+                </Collapsible.CollapsibleContent>
+              </Collapsible.Root>
+            </div>
+          )}
+
+          {!chartData && !isLoading && !error && (
+            <div className="flex h-64 items-center justify-center rounded-lg border border-gray-200 bg-gray-50 text-gray-500">
+              Configure your chart and click "Run Query" to preview
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Dialogs - Only render when callbacks are not provided (standalone mode) */}
+      {!onSave && (
+        <SaveChartDialog
+          open={isSaveDialogOpen}
+          onOpenChange={setIsSaveDialogOpen}
+          chartName={chartName}
+          onChartNameChange={setChartName}
+          onSave={handleSaveChart}
+          isSaving={isSaving}
+        />
+      )}
+
+      {!onAddToDashboard && (
+        <AddToDashboardDialog
+          open={isAddToDashboardDialogOpen}
+          onOpenChange={setIsAddToDashboardDialogOpen}
+          chartName={chartName}
+          onChartNameChange={setChartName}
+          dashboards={dashboards}
+          selectedDashboardId={selectedDashboardId}
+          onDashboardSelect={setSelectedDashboardId}
+          onAdd={handleAddToDashboard}
+          isSaving={isSaving}
+        />
+      )}
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/ChartBuilderClient.tsx

@@ -0,0 +1,353 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
+import { AnalyticsResponse } from "@/app/api/analytics/_lib/types";
+import { LoadingSpinner } from "@/modules/ui/components/loading-spinner";
+import {
+  addChartToDashboardAction,
+  createChartAction,
+  executeQueryAction,
+  getChartAction,
+  getDashboardsAction,
+  updateChartAction,
+} from "../../actions";
+import { mapChartType, mapDatabaseChartTypeToApi } from "../lib/chart-utils";
+import { AIQuerySection } from "./AIQuerySection";
+import { AddToDashboardDialog } from "./AddToDashboardDialog";
+import { AdvancedChartBuilder } from "./AdvancedChartBuilder";
+import { ChartPreview } from "./ChartPreview";
+import { ConfigureChartDialog } from "./ConfigureChartDialog";
+import { ManualChartBuilder } from "./ManualChartBuilder";
+import { SaveChartDialog } from "./SaveChartDialog";
+
+interface ChartBuilderClientProps {
+  environmentId: string;
+  chartId?: string;
+}
+
+export function ChartBuilderClient({ environmentId, chartId }: ChartBuilderClientProps) {
+  const router = useRouter();
+  const [selectedChartType, setSelectedChartType] = useState<string>("");
+  const [chartData, setChartData] = useState<AnalyticsResponse | null>(null);
+  const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
+  const [isAddToDashboardDialogOpen, setIsAddToDashboardDialogOpen] = useState(false);
+  const [isConfigureDialogOpen, setIsConfigureDialogOpen] = useState(false);
+  const [chartName, setChartName] = useState("");
+  const [dashboards, setDashboards] = useState<Array<{ id: string; name: string }>>([]);
+  const [selectedDashboardId, setSelectedDashboardId] = useState<string>("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [showData, setShowData] = useState(false);
+  const [configuredChartType, setConfiguredChartType] = useState<string | null>(null);
+  const [showAdvancedBuilder, setShowAdvancedBuilder] = useState(false);
+  const [isLoadingChart, setIsLoadingChart] = useState(false);
+  const [currentChartId, setCurrentChartId] = useState<string | undefined>(chartId);
+
+  useEffect(() => {
+    if (isAddToDashboardDialogOpen) {
+      getDashboardsAction({ environmentId }).then((result) => {
+        if (result?.data) {
+          setDashboards(result.data);
+        } else if (result?.serverError) {
+          toast.error(result.serverError);
+        }
+      });
+    }
+  }, [isAddToDashboardDialogOpen, environmentId]);
+
+  useEffect(() => {
+    if (chartId) {
+      setIsLoadingChart(true);
+      getChartAction({ environmentId, chartId })
+        .then(async (result) => {
+          if (result?.data) {
+            const chart = result.data;
+            setChartName(chart.name);
+
+            // Execute the chart's query to get the data
+            const queryResult = await executeQueryAction({
+              environmentId,
+              query: chart.query as any,
+            });
+
+            if (queryResult?.error || queryResult?.serverError) {
+              toast.error(queryResult.error || queryResult.serverError || "Failed to load chart data");
+              setIsLoadingChart(false);
+              return;
+            }
+
+            if (queryResult?.data?.data) {
+              // Format as AnalyticsResponse
+              const chartData: AnalyticsResponse = {
+                query: chart.query as any,
+                chartType: mapDatabaseChartTypeToApi(chart.type),
+                data: Array.isArray(queryResult.data.data) ? queryResult.data.data : [],
+              };
+
+              setChartData(chartData);
+              setConfiguredChartType(mapDatabaseChartTypeToApi(chart.type));
+              setCurrentChartId(chart.id);
+            } else {
+              toast.error("No data returned for chart");
+            }
+          } else if (result?.serverError) {
+            toast.error(result.serverError);
+          }
+          setIsLoadingChart(false);
+        })
+        .catch((error: any) => {
+          toast.error(error.message || "Failed to load chart");
+          setIsLoadingChart(false);
+        });
+    }
+  }, [chartId, environmentId]);
+
+  const handleChartGenerated = (data: AnalyticsResponse) => {
+    setChartData(data);
+    setChartName(data.chartType ? `Chart ${new Date().toLocaleString()}` : "");
+  };
+
+  const handleSaveChart = async () => {
+    if (!chartData || !chartName.trim()) {
+      toast.error("Please enter a chart name");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      // If we have a currentChartId, update the existing chart; otherwise create a new one
+      if (currentChartId) {
+        const result = await updateChartAction({
+          environmentId,
+          chartId: currentChartId,
+          name: chartName.trim(),
+          type: mapChartType(chartData.chartType),
+          query: chartData.query,
+          config: {},
+        });
+
+        if (!result?.data) {
+          toast.error(result?.serverError || "Failed to update chart");
+          return;
+        }
+
+        toast.success("Chart updated successfully!");
+        setIsSaveDialogOpen(false);
+        router.push(`/environments/${environmentId}/analysis/charts`);
+      } else {
+        const result = await createChartAction({
+          environmentId,
+          name: chartName.trim(),
+          type: mapChartType(chartData.chartType),
+          query: chartData.query,
+          config: {},
+        });
+
+        if (!result?.data) {
+          toast.error(result?.serverError || "Failed to save chart");
+          return;
+        }
+
+        setCurrentChartId(result.data.id);
+        toast.success("Chart saved successfully!");
+        setIsSaveDialogOpen(false);
+        router.push(`/environments/${environmentId}/analysis/charts`);
+      }
+    } catch (error: any) {
+      toast.error(error.message || "Failed to save chart");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleAddToDashboard = async () => {
+    if (!chartData || !selectedDashboardId) {
+      toast.error("Please select a dashboard");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      let chartIdToUse = currentChartId;
+
+      // If we don't have a chartId (creating new chart), create it first
+      if (!chartIdToUse) {
+        if (!chartName.trim()) {
+          toast.error("Please enter a chart name");
+          setIsSaving(false);
+          return;
+        }
+
+        const chartResult = await createChartAction({
+          environmentId,
+          name: chartName.trim(),
+          type: mapChartType(chartData.chartType),
+          query: chartData.query,
+          config: {},
+        });
+
+        if (!chartResult?.data) {
+          toast.error(chartResult?.serverError || "Failed to save chart");
+          setIsSaving(false);
+          return;
+        }
+
+        chartIdToUse = chartResult.data.id;
+        setCurrentChartId(chartIdToUse);
+      }
+
+      // Add the chart (existing or newly created) to the dashboard
+      const widgetResult = await addChartToDashboardAction({
+        environmentId,
+        chartId: chartIdToUse,
+        dashboardId: selectedDashboardId,
+      });
+
+      if (!widgetResult?.data) {
+        toast.error(widgetResult?.serverError || "Failed to add chart to dashboard");
+        return;
+      }
+
+      toast.success("Chart added to dashboard!");
+      setIsAddToDashboardDialogOpen(false);
+      router.push(`/environments/${environmentId}/analysis/dashboard/${selectedDashboardId}`);
+    } catch (error: any) {
+      toast.error(error.message || "Failed to add chart to dashboard");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleManualCreate = () => {
+    if (!selectedChartType) {
+      toast.error("Please select a chart type first");
+      return;
+    }
+    setShowAdvancedBuilder(true);
+  };
+
+  // If loading an existing chart, show loading state
+  if (chartId && isLoadingChart) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  // If viewing an existing chart, show only the chart preview
+  if (chartId && chartData) {
+    return (
+      <div className="grid gap-8">
+        <ChartPreview
+          chartData={chartData}
+          configuredChartType={configuredChartType}
+          showData={showData}
+          onToggleData={() => setShowData(!showData)}
+          onConfigure={() => setIsConfigureDialogOpen(true)}
+        />
+
+        {/* Dialogs */}
+        <SaveChartDialog
+          open={isSaveDialogOpen}
+          onOpenChange={setIsSaveDialogOpen}
+          chartName={chartName}
+          onChartNameChange={setChartName}
+          onSave={handleSaveChart}
+          isSaving={isSaving}
+        />
+
+        <AddToDashboardDialog
+          open={isAddToDashboardDialogOpen}
+          onOpenChange={setIsAddToDashboardDialogOpen}
+          chartName={chartName}
+          onChartNameChange={setChartName}
+          dashboards={dashboards}
+          selectedDashboardId={selectedDashboardId}
+          onDashboardSelect={setSelectedDashboardId}
+          onAdd={handleAddToDashboard}
+          isSaving={isSaving}
+        />
+
+        <ConfigureChartDialog
+          open={isConfigureDialogOpen}
+          onOpenChange={setIsConfigureDialogOpen}
+          currentChartType={chartData?.chartType || "bar"}
+          configuredChartType={configuredChartType}
+          onChartTypeSelect={setConfiguredChartType}
+          onReset={() => setConfiguredChartType(null)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid gap-8">
+      {/* Option 1: Ask AI */}
+      <AIQuerySection onChartGenerated={handleChartGenerated} />
+
+      {/* Chart Preview */}
+      {chartData && (
+        <ChartPreview
+          chartData={chartData}
+          configuredChartType={configuredChartType}
+          showData={showData}
+          onToggleData={() => setShowData(!showData)}
+          onConfigure={() => setIsConfigureDialogOpen(true)}
+        />
+      )}
+
+      <div className="relative">
+        <div className="absolute inset-0 flex items-center" aria-hidden="true">
+          <div className="w-full border-t border-gray-200" />
+        </div>
+        <div className="relative flex justify-center">
+          <span className="bg-gray-50 px-2 text-sm text-gray-500">OR</span>
+        </div>
+      </div>
+
+      {/* Option 2: Build Manually */}
+      {showAdvancedBuilder ? (
+        <AdvancedChartBuilder environmentId={environmentId} initialChartType={selectedChartType} />
+      ) : (
+        <ManualChartBuilder
+          selectedChartType={selectedChartType}
+          onChartTypeSelect={setSelectedChartType}
+          onCreate={handleManualCreate}
+        />
+      )}
+
+      {/* Dialogs */}
+      <SaveChartDialog
+        open={isSaveDialogOpen}
+        onOpenChange={setIsSaveDialogOpen}
+        chartName={chartName}
+        onChartNameChange={setChartName}
+        onSave={handleSaveChart}
+        isSaving={isSaving}
+      />
+
+      <AddToDashboardDialog
+        open={isAddToDashboardDialogOpen}
+        onOpenChange={setIsAddToDashboardDialogOpen}
+        chartName={chartName}
+        onChartNameChange={setChartName}
+        dashboards={dashboards}
+        selectedDashboardId={selectedDashboardId}
+        onDashboardSelect={setSelectedDashboardId}
+        onAdd={handleAddToDashboard}
+        isSaving={isSaving}
+      />
+
+      <ConfigureChartDialog
+        open={isConfigureDialogOpen}
+        onOpenChange={setIsConfigureDialogOpen}
+        currentChartType={chartData?.chartType || "bar"}
+        configuredChartType={configuredChartType}
+        onChartTypeSelect={setConfiguredChartType}
+        onReset={() => setConfiguredChartType(null)}
+      />
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/ChartPreview.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import { BarChart, DatabaseIcon } from "lucide-react";
+import { AnalyticsResponse } from "@/app/api/analytics/_lib/types";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/modules/ui/components/tabs";
+import { ChartRenderer } from "./ChartRenderer";
+import { DataViewer } from "./DataViewer";
+
+interface ChartPreviewProps {
+  chartData: AnalyticsResponse;
+}
+
+export function ChartPreview({ chartData }: ChartPreviewProps) {
+  const [activeTab, setActiveTab] = useState<"chart" | "data">("chart");
+
+  return (
+    <div className="mt-6 space-y-4">
+      <div className="rounded-lg border border-gray-200 bg-white p-6">
+        <div className="mb-4 flex items-center justify-between">
+          <h3 className="font-semibold text-gray-900">Chart Preview</h3>
+        </div>
+
+        <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as "chart" | "data")}>
+          <div className="flex justify-end mb-4">
+            <TabsList>
+              <TabsTrigger value="chart" icon={<BarChart className="h-4 w-4" />}>
+                Chart
+              </TabsTrigger>
+              <TabsTrigger value="data" icon={<DatabaseIcon className="h-4 w-4" />}>
+                Data
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          <TabsContent value="chart" className="mt-0">
+            <ChartRenderer chartType={chartData.chartType} data={chartData.data || []} />
+          </TabsContent>
+
+          <TabsContent value="data" className="mt-0">
+            <DataViewer data={chartData.data || []} />
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/ChartRenderer.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/modules/ui/components/chart";
+
+// Formbricks brand colors
+const BRAND_DARK = "#00C4B8";
+const BRAND_LIGHT = "#00E6CA";
+
+interface ChartRendererProps {
+  chartType: string;
+  data: Record<string, any>[];
+}
+
+export function ChartRenderer({ chartType, data }: ChartRendererProps) {
+  if (!data || data.length === 0) {
+    return <div className="flex h-64 items-center justify-center text-gray-500">No data available</div>;
+  }
+
+  // Get the first data point to determine keys
+  const firstRow = data[0];
+  const allKeys = Object.keys(firstRow);
+  const keys = allKeys.filter((key) => key !== "date" && key !== "time");
+
+  // For pie charts, we need to identify dimension (nameKey) and measure (dataKey)
+  let xAxisKey = "key";
+  let dataKey = "value";
+
+  if (chartType === "pie" || chartType === "donut") {
+    // Find first numeric key (measure)
+    const numericKey = keys.find((key) => {
+      const firstValue = firstRow[key];
+      if (firstValue === null || firstValue === undefined || firstValue === "") return false;
+      const numValue = Number(firstValue);
+      return !Number.isNaN(numValue) && Number.isFinite(numValue);
+    });
+    // Find first non-numeric key (dimension)
+    const nonNumericKey = keys.find((key) => {
+      if (key === numericKey) return false;
+      const firstValue = firstRow[key];
+      return firstValue !== undefined;
+    });
+
+    xAxisKey = nonNumericKey || (numericKey ? keys.find((k) => k !== numericKey) : null) || keys[0] || "key";
+    dataKey = numericKey || keys[1] || keys[0] || "value";
+  } else {
+    // For other chart types, use existing logic
+    if (firstRow.date) {
+      xAxisKey = "date";
+    } else if (firstRow.time) {
+      xAxisKey = "time";
+    } else if (keys[0]) {
+      xAxisKey = keys[0];
+    }
+    dataKey = keys.find((k) => k !== xAxisKey) || keys[0] || "value";
+  }
+
+  switch (chartType) {
+    case "bar":
+      return (
+        <div className="h-64 min-h-[256px] w-full">
+          <ChartContainer
+            config={{ [dataKey]: { label: dataKey, color: BRAND_DARK } }}
+            className="h-full w-full">
+            <BarChart data={data}>
+              <CartesianGrid strokeDasharray="3 3" vertical={false} />
+              <XAxis dataKey={xAxisKey} tickLine={false} tickMargin={10} axisLine={false} />
+              <YAxis tickLine={false} axisLine={false} />
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <Bar dataKey={dataKey} fill={BRAND_DARK} radius={4} />
+            </BarChart>
+          </ChartContainer>
+        </div>
+      );
+    case "line":
+      return (
+        <div className="h-64 min-h-[256px] w-full">
+          <ChartContainer
+            config={{ [dataKey]: { label: dataKey, color: BRAND_DARK } }}
+            className="h-full w-full">
+            <LineChart data={data}>
+              <CartesianGrid strokeDasharray="3 3" vertical={false} />
+              <XAxis dataKey={xAxisKey} tickLine={false} tickMargin={10} axisLine={false} />
+              <YAxis tickLine={false} axisLine={false} />
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <Line
+                type="monotone"
+                dataKey={dataKey}
+                stroke={BRAND_DARK}
+                strokeWidth={3}
+                dot={{ fill: BRAND_DARK, r: 4 }}
+                activeDot={{ r: 6 }}
+              />
+            </LineChart>
+          </ChartContainer>
+        </div>
+      );
+    case "area":
+      return (
+        <div className="h-64 min-h-[256px] w-full">
+          <ChartContainer
+            config={{ [dataKey]: { label: dataKey, color: BRAND_DARK } }}
+            className="h-full w-full">
+            <AreaChart data={data}>
+              <CartesianGrid strokeDasharray="3 3" vertical={false} />
+              <XAxis dataKey={xAxisKey} tickLine={false} tickMargin={10} axisLine={false} />
+              <YAxis tickLine={false} axisLine={false} />
+              <ChartTooltip content={<ChartTooltipContent />} />
+              <Area
+                type="monotone"
+                dataKey={dataKey}
+                stroke={BRAND_DARK}
+                fill={BRAND_LIGHT}
+                fillOpacity={0.4}
+                strokeWidth={2}
+              />
+            </AreaChart>
+          </ChartContainer>
+        </div>
+      );
+    case "pie":
+    case "donut": {
+      if (!dataKey || !xAxisKey) {
+        return (
+          <div className="flex h-64 items-center justify-center text-gray-500">
+            Unable to determine chart data structure
+          </div>
+        );
+      }
+
+      // Filter out rows where the dataKey value is null, undefined, or empty
+      const validData = data.filter((row) => {
+        const value = row[dataKey];
+        if (value === null || value === undefined || value === "") return false;
+        const numValue = Number(value);
+        return !Number.isNaN(numValue) && Number.isFinite(numValue);
+      });
+
+      // Convert dataKey values to numbers for proper rendering
+      const processedData = validData.map((row) => ({
+        ...row,
+        [dataKey]: Number(row[dataKey]),
+      }));
+
+      if (processedData.length === 0) {
+        return (
+          <div className="flex h-64 items-center justify-center text-gray-500">No valid data to display</div>
+        );
+      }
+
+      // Generate colors using Formbricks brand palette
+      const colors = processedData.map((_, index) => {
+        const hue = 180; // Teal base hue
+        const saturation = 70 + (index % 3) * 10; // Vary saturation
+        const lightness = 45 + (index % 2) * 15; // Vary lightness
+        return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+      });
+      // Use brand colors for first two slices
+      if (colors.length > 0) colors[0] = BRAND_DARK;
+      if (colors.length > 1) colors[1] = BRAND_LIGHT;
+
+      return (
+        <div className="h-64 min-h-[256px] w-full min-w-0">
+          <ChartContainer
+            config={{ [dataKey]: { label: dataKey, color: BRAND_DARK } }}
+            className="h-full w-full min-w-0">
+            <PieChart width={400} height={256}>
+              <Pie
+                data={processedData}
+                dataKey={dataKey}
+                nameKey={xAxisKey}
+                cx="50%"
+                cy="50%"
+                outerRadius={80}
+                label={({ name, percent }) => {
+                  if (!percent) return "";
+                  return `${name}: ${(percent * 100).toFixed(0)}%`;
+                }}>
+                {processedData.map((row, index) => {
+                  const rowKey = row[xAxisKey] ?? `row-${index}`;
+                  const uniqueKey = `${xAxisKey}-${String(rowKey)}-${index}`;
+                  return <Cell key={uniqueKey} fill={colors[index] || BRAND_DARK} />;
+                })}
+              </Pie>
+              <ChartTooltip
+                content={<ChartTooltipContent />}
+                formatter={(value: any, name: string) => {
+                  const numValue = Number(value);
+                  return [numValue.toLocaleString(), name];
+                }}
+              />
+            </PieChart>
+          </ChartContainer>
+        </div>
+      );
+    }
+    case "kpi":
+    case "big_number": {
+      const total = data.reduce((sum, row) => sum + (Number(row[dataKey]) || 0), 0);
+      return (
+        <div className="flex h-64 items-center justify-center">
+          <div className="text-center">
+            <div className="text-4xl font-bold text-gray-900">{total.toLocaleString()}</div>
+            <div className="mt-2 text-sm text-gray-500">{dataKey}</div>
+          </div>
+        </div>
+      );
+    }
+    default:
+      return (
+        <div className="flex h-64 items-center justify-center text-gray-500">
+          Chart type "{chartType}" not yet supported
+        </div>
+      );
+  }
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/ConfigureChartDialog.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import { Button } from "@/modules/ui/components/button";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
+import { CHART_TYPES } from "../lib/chart-types";
+
+interface ConfigureChartDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentChartType: string;
+  configuredChartType: string | null;
+  onChartTypeSelect: (type: string) => void;
+  onReset: () => void;
+}
+
+export function ConfigureChartDialog({
+  open,
+  onOpenChange,
+  currentChartType,
+  configuredChartType,
+  onChartTypeSelect,
+  onReset,
+}: ConfigureChartDialogProps) {
+  const availableTypes = CHART_TYPES.filter((type) =>
+    ["bar", "line", "area", "pie", "big_number"].includes(type.id)
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Configure Chart</DialogTitle>
+          <DialogDescription>
+            Modify the chart type and other settings for this visualization.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <div className="space-y-6">
+            <div>
+              <h4 className="mb-3 text-sm font-medium text-gray-900">Chart Type</h4>
+              <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
+                {availableTypes.map((chart) => {
+                  const isSelected = (configuredChartType || currentChartType) === chart.id;
+                  return (
+                    <button
+                      key={chart.id}
+                      type="button"
+                      onClick={() => onChartTypeSelect(chart.id)}
+                      className={cn(
+                        "flex flex-col items-center gap-2 rounded-lg border p-4 transition-all hover:bg-gray-50",
+                        isSelected
+                          ? "border-brand-dark bg-brand-dark/5 ring-brand-dark ring-2"
+                          : "border-gray-200"
+                      )}>
+                      <div className="flex h-10 w-10 items-center justify-center rounded bg-gray-100">
+                        <chart.icon className="h-5 w-5 text-gray-600" strokeWidth={1.5} />
+                      </div>
+                      <span className="text-xs font-medium text-gray-700">{chart.name}</span>
+                    </button>
+                  );
+                })}
+              </div>
+              <div className="mt-3 flex items-center gap-2">
+                <Button variant="ghost" size="sm" onClick={onReset} className="text-xs">
+                  Reset to AI suggestion
+                </Button>
+                {configuredChartType && (
+                  <span className="text-xs text-gray-500">
+                    Original: {CHART_TYPES.find((t) => t.id === currentChartType)?.name || currentChartType}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Close
+          </Button>
+          <Button onClick={() => onOpenChange(false)}>Apply Changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/DataViewer.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { DatabaseIcon } from "lucide-react";
+
+interface DataViewerProps {
+  data: Record<string, any>[];
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function DataViewer({ data }: Omit<DataViewerProps, "isOpen" | "onOpenChange">) {
+  if (!data || data.length === 0) {
+    return (
+      <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+        <p className="text-sm text-gray-500">No data available</p>
+      </div>
+    );
+  }
+
+  const columns = Object.keys(data[0]);
+  const displayData = data.slice(0, 50);
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+      <div className="mb-2 flex items-center gap-2">
+        <DatabaseIcon className="h-4 w-4 text-gray-600" />
+        <h4 className="text-sm font-semibold text-gray-900">Chart Data</h4>
+      </div>
+      <div className="max-h-64 overflow-auto rounded bg-white">
+        <table className="w-full text-xs">
+          <thead className="bg-gray-100">
+            <tr>
+              {columns.map((key) => (
+                <th key={key} className="border-b border-gray-200 px-3 py-2 text-left font-semibold">
+                  {key}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {displayData.map((row, index) => {
+              const rowKey = Object.values(row)[0] ? String(Object.values(row)[0]) : `row-${index}`;
+              return (
+                <tr
+                  key={`data-row-${rowKey}-${index}`}
+                  className="border-b border-gray-100 hover:bg-gray-50">
+                  {Object.entries(row).map(([key, value]) => (
+                    <td key={`cell-${key}-${rowKey}`} className="px-3 py-2">
+                      {typeof value === "object" ? JSON.stringify(value) : String(value)}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+        {data.length > 50 && (
+          <div className="px-3 py-2 text-xs text-gray-500">Showing first 50 of {data.length} rows</div>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/DimensionsPanel.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { MultiSelect } from "@/modules/ui/components/multi-select";
+import { FEEDBACK_FIELDS } from "../lib/schema-definition";
+
+interface DimensionsPanelProps {
+  selectedDimensions: string[];
+  onDimensionsChange: (dimensions: string[]) => void;
+}
+
+export function DimensionsPanel({ selectedDimensions, onDimensionsChange }: DimensionsPanelProps) {
+  const dimensionOptions = FEEDBACK_FIELDS.dimensions.map((d) => ({
+    value: d.id,
+    label: `${d.label}${d.description ? ` - ${d.description}` : ""}`,
+  }));
+
+  return (
+    <div className="space-y-4">
+      <h3 className="font-medium text-gray-900">Dimensions</h3>
+
+      <div className="space-y-2">
+        <label className="text-sm font-medium text-gray-700">Group By</label>
+        <MultiSelect
+          options={dimensionOptions}
+          value={selectedDimensions}
+          onChange={onDimensionsChange}
+          placeholder="Select dimensions to group by..."
+        />
+        <p className="text-xs text-gray-500">
+          Select dimensions to break down your data. The order matters for multi-dimensional charts.
+        </p>
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/FiltersPanel.tsx

@@ -0,0 +1,248 @@
+"use client";
+
+import { Plus, TrashIcon } from "lucide-react";
+import { Button } from "@/modules/ui/components/button";
+import { Input } from "@/modules/ui/components/input";
+import { MultiSelect } from "@/modules/ui/components/multi-select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/modules/ui/components/select";
+import { FilterRow } from "../lib/query-builder";
+import { FEEDBACK_FIELDS, getFieldById, getFilterOperatorsForType } from "../lib/schema-definition";
+
+interface FiltersPanelProps {
+  filters: FilterRow[];
+  filterLogic: "and" | "or";
+  onFiltersChange: (filters: FilterRow[]) => void;
+  onFilterLogicChange: (logic: "and" | "or") => void;
+}
+
+export function FiltersPanel({
+  filters,
+  filterLogic,
+  onFiltersChange,
+  onFilterLogicChange,
+}: FiltersPanelProps) {
+  const fieldOptions = [
+    ...FEEDBACK_FIELDS.dimensions.map((d) => ({
+      value: d.id,
+      label: d.label,
+      type: d.type,
+    })),
+    ...FEEDBACK_FIELDS.measures.map((m) => ({
+      value: m.id,
+      label: m.label,
+      type: m.type === "count" ? "number" : "number",
+    })),
+  ];
+
+  const handleAddFilter = () => {
+    const firstField = fieldOptions[0];
+    onFiltersChange([
+      ...filters,
+      {
+        field: firstField?.value || "",
+        operator: "equals",
+        values: null,
+      },
+    ]);
+  };
+
+  const handleRemoveFilter = (index: number) => {
+    onFiltersChange(filters.filter((_, i) => i !== index));
+  };
+
+  const handleUpdateFilter = (index: number, updates: Partial<FilterRow>) => {
+    const updated = [...filters];
+    updated[index] = { ...updated[index], ...updates };
+    // Reset values if operator changed to set/notSet
+    if (updates.operator && (updates.operator === "set" || updates.operator === "notSet")) {
+      updated[index].values = null;
+    }
+    onFiltersChange(updated);
+  };
+
+  const getValueInput = (filter: FilterRow, index: number) => {
+    const field = getFieldById(filter.field);
+    const fieldType = field?.type || "string";
+    const operators = getFilterOperatorsForType(fieldType as "string" | "number" | "time");
+
+    // For set/notSet operators, no value input needed
+    if (filter.operator === "set" || filter.operator === "notSet") {
+      return null;
+    }
+
+    // For number fields with comparison operators, use number input
+    if (
+      fieldType === "number" &&
+      (filter.operator === "gt" ||
+        filter.operator === "gte" ||
+        filter.operator === "lt" ||
+        filter.operator === "lte")
+    ) {
+      return (
+        <Input
+          type="number"
+          placeholder="Enter value"
+          value={filter.values?.[0] || ""}
+          onChange={(e) =>
+            handleUpdateFilter(index, {
+              values: e.target.value ? [Number(e.target.value)] : null,
+            })
+          }
+          className="w-[150px]"
+        />
+      );
+    }
+
+    // For equals/notEquals with string fields, allow single value
+    if ((filter.operator === "equals" || filter.operator === "notEquals") && fieldType === "string") {
+      return (
+        <Input
+          placeholder="Enter value"
+          value={filter.values?.[0] || ""}
+          onChange={(e) =>
+            handleUpdateFilter(index, {
+              values: e.target.value ? [e.target.value] : null,
+            })
+          }
+          className="w-[200px]"
+        />
+      );
+    }
+
+    // For contains/notContains, allow multiple values (multi-select)
+    if (filter.operator === "contains" || filter.operator === "notContains") {
+      // For now, use a simple input - could be enhanced with multi-select
+      return (
+        <Input
+          placeholder="Enter value"
+          value={filter.values?.[0] || ""}
+          onChange={(e) =>
+            handleUpdateFilter(index, {
+              values: e.target.value ? [e.target.value] : null,
+            })
+          }
+          className="w-[200px]"
+        />
+      );
+    }
+
+    // Default: single value input
+    return (
+      <Input
+        placeholder="Enter value"
+        value={filter.values?.[0] || ""}
+        onChange={(e) =>
+          handleUpdateFilter(index, {
+            values: e.target.value ? [e.target.value] : null,
+          })
+        }
+        className="w-[200px]"
+      />
+    );
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium text-gray-900">Filters</h3>
+        <Select value={filterLogic} onValueChange={(value) => onFilterLogicChange(value as "and" | "or")}>
+          <SelectTrigger className="w-[100px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="and">AND</SelectItem>
+            <SelectItem value="or">OR</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="space-y-3">
+        {filters.map((filter, index) => {
+          const field = getFieldById(filter.field);
+          const fieldType = field?.type || "string";
+          const operators = getFilterOperatorsForType(fieldType as "string" | "number" | "time");
+
+          return (
+            <div
+              key={index}
+              className="flex items-center gap-2 rounded-lg border border-gray-200 bg-white p-3">
+              <Select
+                value={filter.field}
+                onValueChange={(value) => {
+                  const newField = getFieldById(value);
+                  const newType = newField?.type || "string";
+                  const newOperators = getFilterOperatorsForType(newType as "string" | "number" | "time");
+                  handleUpdateFilter(index, {
+                    field: value,
+                    operator: newOperators[0] || "equals",
+                    values: null,
+                  });
+                }}>
+                <SelectTrigger className="w-[200px]">
+                  <SelectValue placeholder="Select field" />
+                </SelectTrigger>
+                <SelectContent>
+                  {fieldOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              <Select
+                value={filter.operator}
+                onValueChange={(value) =>
+                  handleUpdateFilter(index, {
+                    operator: value as FilterRow["operator"],
+                  })
+                }>
+                <SelectTrigger className="w-[150px]">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {operators.map((op) => (
+                    <SelectItem key={op} value={op}>
+                      {op === "equals" && "equals"}
+                      {op === "notEquals" && "not equals"}
+                      {op === "contains" && "contains"}
+                      {op === "notContains" && "not contains"}
+                      {op === "set" && "is set"}
+                      {op === "notSet" && "is not set"}
+                      {op === "gt" && "greater than"}
+                      {op === "gte" && "greater than or equal"}
+                      {op === "lt" && "less than"}
+                      {op === "lte" && "less than or equal"}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              {getValueInput(filter, index)}
+
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                onClick={() => handleRemoveFilter(index)}
+                className="h-8 w-8">
+                <TrashIcon className="h-4 w-4" />
+              </Button>
+            </div>
+          );
+        })}
+
+        <Button type="button" variant="outline" size="sm" onClick={handleAddFilter} className="h-8">
+          <Plus className="h-4 w-4" />
+          Add Filter
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/ManualChartBuilder.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "@/lib/cn";
+import { CHART_TYPES } from "../lib/chart-types";
+
+interface ManualChartBuilderProps {
+  selectedChartType: string;
+  onChartTypeSelect: (type: string) => void;
+}
+
+// Filter out table, map, and scatter charts
+const AVAILABLE_CHART_TYPES = CHART_TYPES.filter(
+  (type) => !["table", "map", "scatter"].includes(type.id)
+);
+
+export function ManualChartBuilder({
+  selectedChartType,
+  onChartTypeSelect,
+}: Omit<ManualChartBuilderProps, "onCreate">) {
+  return (
+    <div className="space-y-4">
+      <h2 className="font-medium text-gray-900">Choose chart type</h2>
+
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+          {AVAILABLE_CHART_TYPES.map((chart) => {
+            const isSelected = selectedChartType === chart.id;
+            return (
+              <button
+                key={chart.id}
+                type="button"
+                onClick={() => onChartTypeSelect(chart.id)}
+                className={cn(
+                  "focus:ring-brand-dark rounded-md border p-4 text-center transition-all hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2",
+                  isSelected
+                    ? "border-brand-dark ring-brand-dark bg-brand-dark/5 ring-1"
+                    : "border-gray-200 hover:border-gray-300"
+                )}>
+                <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded bg-gray-100">
+                  <chart.icon className="h-6 w-6 text-gray-600" strokeWidth={1.5} />
+                </div>
+                <span className="text-xs font-medium text-gray-700">{chart.name}</span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/MeasuresPanel.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { Plus, TrashIcon } from "lucide-react";
+import { Button } from "@/modules/ui/components/button";
+import { MultiSelect } from "@/modules/ui/components/multi-select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/modules/ui/components/select";
+import { Input } from "@/modules/ui/components/input";
+import { FEEDBACK_FIELDS } from "../lib/schema-definition";
+import { CustomMeasure } from "../lib/query-builder";
+
+interface MeasuresPanelProps {
+  selectedMeasures: string[];
+  customMeasures: CustomMeasure[];
+  onMeasuresChange: (measures: string[]) => void;
+  onCustomMeasuresChange: (measures: CustomMeasure[]) => void;
+}
+
+export function MeasuresPanel({
+  selectedMeasures,
+  customMeasures,
+  onMeasuresChange,
+  onCustomMeasuresChange,
+}: MeasuresPanelProps) {
+  const measureOptions = FEEDBACK_FIELDS.measures.map((m) => ({
+    value: m.id,
+    label: `${m.label}${m.description ? ` - ${m.description}` : ""}`,
+  }));
+
+  const dimensionOptions = FEEDBACK_FIELDS.dimensions
+    .filter((d) => d.type === "number")
+    .map((d) => ({
+      value: d.id,
+      label: d.label,
+    }));
+
+  const aggregationOptions = FEEDBACK_FIELDS.customAggregations.map((agg) => ({
+    value: agg,
+    label: agg.charAt(0).toUpperCase() + agg.slice(1),
+  }));
+
+  const handleAddCustomMeasure = () => {
+    onCustomMeasuresChange([
+      ...customMeasures,
+      {
+        field: dimensionOptions[0]?.value || "",
+        aggregation: "avg",
+      },
+    ]);
+  };
+
+  const handleRemoveCustomMeasure = (index: number) => {
+    onCustomMeasuresChange(customMeasures.filter((_, i) => i !== index));
+  };
+
+  const handleUpdateCustomMeasure = (index: number, updates: Partial<CustomMeasure>) => {
+    const updated = [...customMeasures];
+    updated[index] = { ...updated[index], ...updates };
+    onCustomMeasuresChange(updated);
+  };
+
+  return (
+    <div className="space-y-4">
+      <h3 className="font-medium text-gray-900">Measures</h3>
+
+      <div className="space-y-4">
+        {/* Predefined Measures */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700">Predefined Measures</label>
+          <MultiSelect
+            options={measureOptions}
+            value={selectedMeasures}
+            onChange={(selected) => onMeasuresChange(selected)}
+            placeholder="Select measures..."
+          />
+        </div>
+
+        {/* Custom Measures */}
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <label className="text-sm font-medium text-gray-700">Custom Aggregations</label>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={handleAddCustomMeasure}
+              className="h-8">
+              <Plus className="h-4 w-4" />
+              Add Custom Measure
+            </Button>
+          </div>
+
+          {customMeasures.length > 0 && (
+            <div className="space-y-2">
+              {customMeasures.map((measure, index) => (
+                <div key={index} className="flex items-center gap-2 rounded-lg border border-gray-200 bg-white p-3">
+                  <Select
+                    value={measure.field}
+                    onValueChange={(value) => handleUpdateCustomMeasure(index, { field: value })}>
+                    <SelectTrigger className="w-[200px]">
+                      <SelectValue placeholder="Select field" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {dimensionOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+
+                  <Select
+                    value={measure.aggregation}
+                    onValueChange={(value) => handleUpdateCustomMeasure(index, { aggregation: value })}>
+                    <SelectTrigger className="w-[150px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {aggregationOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+
+                  <Input
+                    placeholder="Alias (optional)"
+                    value={measure.alias || ""}
+                    onChange={(e) => handleUpdateCustomMeasure(index, { alias: e.target.value })}
+                    className="flex-1"
+                  />
+
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => handleRemoveCustomMeasure(index)}
+                    className="h-8 w-8">
+                    <TrashIcon className="h-4 w-4" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/QueryViewer.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { CodeIcon } from "lucide-react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+
+interface QueryViewerProps {
+  query: Record<string, any>;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function QueryViewer({ query, isOpen, onOpenChange }: QueryViewerProps) {
+  return (
+    <Collapsible.Root open={isOpen} onOpenChange={onOpenChange}>
+      <Collapsible.CollapsibleContent className="mt-4">
+        <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+          <div className="mb-2 flex items-center gap-2">
+            <CodeIcon className="h-4 w-4 text-gray-600" />
+            <h4 className="text-sm font-semibold text-gray-900">Cube.js Query</h4>
+          </div>
+          <pre className="max-h-64 overflow-auto rounded bg-white p-3 text-xs">
+            {JSON.stringify(query, null, 2)}
+          </pre>
+        </div>
+      </Collapsible.CollapsibleContent>
+    </Collapsible.Root>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/SaveChartDialog.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/modules/ui/components/dialog";
+import { Button } from "@/modules/ui/components/button";
+import { Input } from "@/modules/ui/components/input";
+
+interface SaveChartDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  chartName: string;
+  onChartNameChange: (name: string) => void;
+  onSave: () => void;
+  isSaving: boolean;
+}
+
+export function SaveChartDialog({
+  open,
+  onOpenChange,
+  chartName,
+  onChartNameChange,
+  onSave,
+  isSaving,
+}: SaveChartDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Save Chart</DialogTitle>
+          <DialogDescription>Enter a name for your chart to save it.</DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <Input
+            placeholder="Chart name"
+            value={chartName}
+            onChange={(e) => onChartNameChange(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && chartName.trim() && !isSaving) {
+                onSave();
+              }
+            }}
+          />
+        </DialogBody>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
+            Cancel
+          </Button>
+          <Button onClick={onSave} loading={isSaving} disabled={!chartName.trim()}>
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/TimeDimensionPanel.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { CalendarIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/modules/ui/components/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/modules/ui/components/select";
+import { Input } from "@/modules/ui/components/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/modules/ui/components/popover";
+import Calendar from "react-calendar";
+import { format } from "date-fns";
+import { FEEDBACK_FIELDS, TIME_GRANULARITIES, DATE_PRESETS } from "../lib/schema-definition";
+import { TimeDimensionConfig, getDateRangeFromPreset } from "../lib/query-builder";
+import "@/modules/ui/components/date-picker/styles.css";
+
+interface TimeDimensionPanelProps {
+  timeDimension: TimeDimensionConfig | null;
+  onTimeDimensionChange: (config: TimeDimensionConfig | null) => void;
+}
+
+export function TimeDimensionPanel({
+  timeDimension,
+  onTimeDimensionChange,
+}: TimeDimensionPanelProps) {
+  const [dateRangeType, setDateRangeType] = useState<"preset" | "custom">(
+    timeDimension && typeof timeDimension.dateRange === "string" ? "preset" : "custom"
+  );
+  const [customStartDate, setCustomStartDate] = useState<Date | null>(
+    timeDimension && Array.isArray(timeDimension.dateRange) ? timeDimension.dateRange[0] : null
+  );
+  const [customEndDate, setCustomEndDate] = useState<Date | null>(
+    timeDimension && Array.isArray(timeDimension.dateRange) ? timeDimension.dateRange[1] : null
+  );
+  const [presetValue, setPresetValue] = useState<string>(
+    timeDimension && typeof timeDimension.dateRange === "string" ? timeDimension.dateRange : ""
+  );
+
+  const timeFieldOptions = FEEDBACK_FIELDS.dimensions.filter((d) => d.type === "time");
+
+  const handleEnableTimeDimension = () => {
+    if (!timeDimension) {
+      onTimeDimensionChange({
+        dimension: "FeedbackRecords.collectedAt",
+        granularity: "day",
+        dateRange: "last 30 days",
+      });
+      setPresetValue("last 30 days");
+      setDateRangeType("preset");
+    }
+  };
+
+  const handleDisableTimeDimension = () => {
+    onTimeDimensionChange(null);
+  };
+
+  const handleDimensionChange = (dimension: string) => {
+    if (timeDimension) {
+      onTimeDimensionChange({ ...timeDimension, dimension });
+    }
+  };
+
+  const handleGranularityChange = (granularity: TimeDimensionConfig["granularity"]) => {
+    if (timeDimension) {
+      onTimeDimensionChange({ ...timeDimension, granularity });
+    }
+  };
+
+  const handlePresetChange = (preset: string) => {
+    setPresetValue(preset);
+    if (timeDimension) {
+      onTimeDimensionChange({ ...timeDimension, dateRange: preset });
+    }
+  };
+
+  const handleCustomDateChange = () => {
+    if (customStartDate && customEndDate && timeDimension) {
+      onTimeDimensionChange({
+        ...timeDimension,
+        dateRange: [customStartDate, customEndDate],
+      });
+    }
+  };
+
+  if (!timeDimension) {
+    return (
+      <div className="space-y-4">
+        <h3 className="font-medium text-gray-900">Time Dimension</h3>
+        <div>
+          <Button type="button" variant="outline" onClick={handleEnableTimeDimension}>
+            Enable Time Dimension
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium text-gray-900">Time Dimension</h3>
+        <Button type="button" variant="ghost" size="sm" onClick={handleDisableTimeDimension}>
+          Disable
+        </Button>
+      </div>
+
+      <div className="space-y-3">
+        {/* Field Selector */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700">Field</label>
+          <Select value={timeDimension.dimension} onValueChange={handleDimensionChange}>
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {timeFieldOptions.map((field) => (
+                <SelectItem key={field.id} value={field.id}>
+                  {field.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Granularity Selector */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700">Granularity</label>
+          <Select
+            value={timeDimension.granularity}
+            onValueChange={(value) => handleGranularityChange(value as TimeDimensionConfig["granularity"])}>
+            <SelectTrigger className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {TIME_GRANULARITIES.map((gran) => (
+                <SelectItem key={gran} value={gran}>
+                  {gran.charAt(0).toUpperCase() + gran.slice(1)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Date Range */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium text-gray-700">Date Range</label>
+          <div className="space-y-2">
+            <Select value={dateRangeType} onValueChange={(value) => setDateRangeType(value as "preset" | "custom")}>
+              <SelectTrigger className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="preset">Preset</SelectItem>
+                <SelectItem value="custom">Custom Range</SelectItem>
+              </SelectContent>
+            </Select>
+
+            {dateRangeType === "preset" ? (
+              <Select value={presetValue} onValueChange={handlePresetChange}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select preset" />
+                </SelectTrigger>
+                <SelectContent>
+                  {DATE_PRESETS.map((preset) => (
+                    <SelectItem key={preset.value} value={preset.value}>
+                      {preset.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            ) : (
+              <div className="grid grid-cols-2 gap-2">
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" className="w-full justify-start text-left font-normal">
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {customStartDate ? format(customStartDate, "MMM dd, yyyy") : "Start date"}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      onChange={(date: Date) => {
+                        setCustomStartDate(date);
+                        if (date && customEndDate) {
+                          handleCustomDateChange();
+                        }
+                      }}
+                      value={customStartDate || undefined}
+                    />
+                  </PopoverContent>
+                </Popover>
+
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" className="w-full justify-start text-left font-normal">
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {customEndDate ? format(customEndDate, "MMM dd, yyyy") : "End date"}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      onChange={(date: Date) => {
+                        setCustomEndDate(date);
+                        if (customStartDate && date) {
+                          handleCustomDateChange();
+                        }
+                      }}
+                      value={customEndDate || undefined}
+                      minDate={customStartDate || undefined}
+                    />
+                  </PopoverContent>
+                </Popover>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/components/index.ts

@@ -0,0 +1,10 @@
+export { ChartRenderer } from "./ChartRenderer";
+export { QueryViewer } from "./QueryViewer";
+export { DataViewer } from "./DataViewer";
+export { AIQuerySection } from "./AIQuerySection";
+export { ManualChartBuilder } from "./ManualChartBuilder";
+export { ChartPreview } from "./ChartPreview";
+export { SaveChartDialog } from "./SaveChartDialog";
+export { AddToDashboardDialog } from "./AddToDashboardDialog";
+export { ConfigureChartDialog } from "./ConfigureChartDialog";
+export { ChartBuilderClient } from "./ChartBuilderClient";

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/lib/chart-types.ts

@@ -0,0 +1,21 @@
+import {
+  ActivityIcon,
+  AreaChartIcon,
+  BarChart3Icon,
+  LineChartIcon,
+  MapIcon,
+  PieChartIcon,
+  ScatterChart,
+  TableIcon,
+} from "lucide-react";
+
+export const CHART_TYPES = [
+  { id: "area", name: "Area Chart", icon: AreaChartIcon },
+  { id: "bar", name: "Bar Chart", icon: BarChart3Icon },
+  { id: "line", name: "Line Chart", icon: LineChartIcon },
+  { id: "pie", name: "Pie Chart", icon: PieChartIcon },
+  { id: "table", name: "Table", icon: TableIcon },
+  { id: "big_number", name: "Big Number", icon: ActivityIcon },
+  { id: "scatter", name: "Scatter Plot", icon: ScatterChart },
+  { id: "map", name: "World Map", icon: MapIcon },
+] as const;

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/lib/chart-utils.ts

@@ -0,0 +1,35 @@
+// Chart type mapping from API to database
+export const mapChartType = (
+  apiType: string
+): "area" | "bar" | "line" | "pie" | "big_number" | "big_number_total" | "table" | "funnel" | "map" => {
+  const mapping: Record<
+    string,
+    "area" | "bar" | "line" | "pie" | "big_number" | "big_number_total" | "table" | "funnel" | "map"
+  > = {
+    bar: "bar",
+    line: "line",
+    area: "area",
+    pie: "pie",
+    donut: "pie",
+    kpi: "big_number",
+  };
+  return mapping[apiType] || "bar";
+};
+
+// Reverse mapping from database chart type to API chart type
+export const mapDatabaseChartTypeToApi = (
+  dbType: string
+): "bar" | "line" | "donut" | "kpi" | "area" | "pie" => {
+  const mapping: Record<string, "bar" | "line" | "donut" | "kpi" | "area" | "pie"> = {
+    bar: "bar",
+    line: "line",
+    area: "area",
+    pie: "pie",
+    big_number: "kpi",
+    big_number_total: "kpi",
+    table: "bar", // Default fallback
+    funnel: "bar", // Default fallback
+    map: "bar", // Default fallback
+  };
+  return mapping[dbType] || "bar";
+};

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/lib/query-builder.ts

@@ -0,0 +1,185 @@
+/**
+ * Query builder utility to construct Cube.js queries from chart builder state
+ */
+
+import { CubeQuery, TimeDimension, Filter } from "@/app/api/analytics/_lib/types";
+
+export interface CustomMeasure {
+  field: string; // e.g., "FeedbackRecords.npsValue"
+  aggregation: string; // e.g., "avg", "sum", "countDistinct"
+  alias?: string; // optional display name
+}
+
+export interface FilterRow {
+  field: string;
+  operator: Filter["operator"];
+  values: string[] | number[] | null;
+}
+
+export interface TimeDimensionConfig {
+  dimension: string;
+  granularity: "hour" | "day" | "week" | "month" | "quarter" | "year";
+  dateRange: string | [Date, Date]; // "last 7 days" or [startDate, endDate]
+}
+
+export interface ChartBuilderState {
+  chartType: string;
+  selectedMeasures: string[];
+  customMeasures: CustomMeasure[];
+  selectedDimensions: string[];
+  filters: FilterRow[];
+  filterLogic: "and" | "or";
+  timeDimension: TimeDimensionConfig | null;
+  limit?: number;
+  orderBy?: { field: string; direction: "asc" | "desc" };
+}
+
+/**
+ * Build a Cube.js query from chart builder state
+ */
+export function buildCubeQuery(config: ChartBuilderState): CubeQuery {
+  const query: CubeQuery = {
+    measures: [
+      ...config.selectedMeasures,
+      // Custom measures would need to be handled differently in Cube.js
+      // For now, we'll just include the predefined measures
+    ],
+  };
+
+  if (config.selectedDimensions.length > 0) {
+    query.dimensions = config.selectedDimensions;
+  }
+
+  if (config.timeDimension) {
+    const timeDim: TimeDimension = {
+      dimension: config.timeDimension.dimension,
+      granularity: config.timeDimension.granularity,
+    };
+
+    // Handle date range
+    if (typeof config.timeDimension.dateRange === "string") {
+      timeDim.dateRange = config.timeDimension.dateRange;
+    } else if (Array.isArray(config.timeDimension.dateRange)) {
+      // Convert Date objects to ISO strings (Cube.js expects YYYY-MM-DD format or ISO strings)
+      const [startDate, endDate] = config.timeDimension.dateRange;
+      // Format as YYYY-MM-DD for better compatibility
+      const formatDate = (date: Date) => {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, "0");
+        const day = String(date.getDate()).padStart(2, "0");
+        return `${year}-${month}-${day}`;
+      };
+      timeDim.dateRange = [formatDate(startDate), formatDate(endDate)];
+    }
+
+    query.timeDimensions = [timeDim];
+  }
+
+  if (config.filters.length > 0) {
+    query.filters = config.filters.map((f) => {
+      const filter: Filter = {
+        member: f.field,
+        operator: f.operator,
+      };
+
+      // Only include values if operator requires them
+      if (f.operator !== "set" && f.operator !== "notSet" && f.values) {
+        filter.values = f.values.map((v) => String(v));
+      }
+
+      return filter;
+    });
+  }
+
+  return query;
+}
+
+/**
+ * Parse a Cube.js query back into ChartBuilderState
+ */
+export function parseQueryToState(query: CubeQuery, chartType?: string): Partial<ChartBuilderState> {
+  const state: Partial<ChartBuilderState> = {
+    chartType: chartType || "",
+    selectedMeasures: query.measures || [],
+    customMeasures: [],
+    selectedDimensions: query.dimensions || [],
+    filters: [],
+    filterLogic: "and",
+    timeDimension: null,
+  };
+
+  // Parse filters
+  if (query.filters && query.filters.length > 0) {
+    state.filters = query.filters.map((f) => ({
+      field: f.member,
+      operator: f.operator,
+      values: f.values || null,
+    }));
+  }
+
+  // Parse time dimensions
+  if (query.timeDimensions && query.timeDimensions.length > 0) {
+    const timeDim = query.timeDimensions[0];
+    state.timeDimension = {
+      dimension: timeDim.dimension,
+      granularity: (timeDim.granularity || "day") as TimeDimensionConfig["granularity"],
+      dateRange: timeDim.dateRange || "last 30 days",
+    };
+  }
+
+  return state;
+}
+
+/**
+ * Convert date preset string to date range
+ */
+export function getDateRangeFromPreset(preset: string): [Date, Date] | null {
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+
+  switch (preset) {
+    case "today": {
+      const tomorrow = new Date(today);
+      tomorrow.setDate(tomorrow.getDate() + 1);
+      return [today, tomorrow];
+    }
+    case "yesterday": {
+      const yesterday = new Date(today);
+      yesterday.setDate(yesterday.getDate() - 1);
+      return [yesterday, today];
+    }
+    case "last 7 days": {
+      const sevenDaysAgo = new Date(today);
+      sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+      return [sevenDaysAgo, today];
+    }
+    case "last 30 days": {
+      const thirtyDaysAgo = new Date(today);
+      thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
+      return [thirtyDaysAgo, today];
+    }
+    case "this month": {
+      const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
+      const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 1);
+      return [firstDay, lastDay];
+    }
+    case "last month": {
+      const firstDayLastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+      const firstDayThisMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+      return [firstDayLastMonth, firstDayThisMonth];
+    }
+    case "this quarter": {
+      const quarter = Math.floor(now.getMonth() / 3);
+      const firstDay = new Date(now.getFullYear(), quarter * 3, 1);
+      const lastDay = new Date(now.getFullYear(), (quarter + 1) * 3, 1);
+      return [firstDay, lastDay];
+    }
+    case "this year": {
+      const firstDay = new Date(now.getFullYear(), 0, 1);
+      const lastDay = new Date(now.getFullYear() + 1, 0, 1);
+      return [firstDay, lastDay];
+    }
+    default:
+      return null;
+  }
+}

apps/web/app/(app)/environments/[environmentId]/analysis/chart-builder/lib/schema-definition.ts

@@ -0,0 +1,171 @@
+/**
+ * Schema definitions for FeedbackRecords fields
+ * Used by the advanced chart builder to provide field metadata and operators
+ */
+
+export interface FieldDefinition {
+  id: string;
+  label: string;
+  type: "string" | "number" | "time";
+  description?: string;
+}
+
+export interface MeasureDefinition {
+  id: string;
+  label: string;
+  type: "count" | "number";
+  description?: string;
+}
+
+export const FEEDBACK_FIELDS = {
+  dimensions: [
+    {
+      id: "FeedbackRecords.sentiment",
+      label: "Sentiment",
+      type: "string",
+      description: "Sentiment extracted from feedback",
+    },
+    {
+      id: "FeedbackRecords.sourceType",
+      label: "Source Type",
+      type: "string",
+      description: "Source type of the feedback (e.g., nps_campaign, survey)",
+    },
+    {
+      id: "FeedbackRecords.sourceName",
+      label: "Source Name",
+      type: "string",
+      description: "Human-readable name of the source",
+    },
+    {
+      id: "FeedbackRecords.fieldType",
+      label: "Field Type",
+      type: "string",
+      description: "Type of feedback field (e.g., nps, text, rating)",
+    },
+    {
+      id: "FeedbackRecords.emotion",
+      label: "Emotion",
+      type: "string",
+      description: "Emotion extracted from metadata JSONB field",
+    },
+    {
+      id: "FeedbackRecords.userIdentifier",
+      label: "User Identifier",
+      type: "string",
+      description: "Identifier of the user who provided feedback",
+    },
+    {
+      id: "FeedbackRecords.responseId",
+      label: "Response ID",
+      type: "string",
+      description: "Unique identifier linking related feedback records",
+    },
+    {
+      id: "FeedbackRecords.npsValue",
+      label: "NPS Value",
+      type: "number",
+      description: "Raw NPS score value (0-10)",
+    },
+    {
+      id: "FeedbackRecords.collectedAt",
+      label: "Collected At",
+      type: "time",
+      description: "Timestamp when the feedback was collected",
+    },
+    {
+      id: "TopicsUnnested.topic",
+      label: "Topic",
+      type: "string",
+      description: "Individual topic from the topics array",
+    },
+  ] as FieldDefinition[],
+  measures: [
+    {
+      id: "FeedbackRecords.count",
+      label: "Count",
+      type: "count",
+      description: "Total number of feedback responses",
+    },
+    {
+      id: "FeedbackRecords.promoterCount",
+      label: "Promoter Count",
+      type: "count",
+      description: "Number of promoters (NPS score 9-10)",
+    },
+    {
+      id: "FeedbackRecords.detractorCount",
+      label: "Detractor Count",
+      type: "count",
+      description: "Number of detractors (NPS score 0-6)",
+    },
+    {
+      id: "FeedbackRecords.passiveCount",
+      label: "Passive Count",
+      type: "count",
+      description: "Number of passives (NPS score 7-8)",
+    },
+    {
+      id: "FeedbackRecords.npsScore",
+      label: "NPS Score",
+      type: "number",
+      description: "Net Promoter Score: ((Promoters - Detractors) / Total) * 100",
+    },
+    {
+      id: "FeedbackRecords.averageScore",
+      label: "Average Score",
+      type: "number",
+      description: "Average NPS score",
+    },
+  ] as MeasureDefinition[],
+  customAggregations: ["count", "countDistinct", "sum", "avg", "min", "max"],
+};
+
+export type FilterOperator =
+  | "equals"
+  | "notEquals"
+  | "contains"
+  | "notContains"
+  | "set"
+  | "notSet"
+  | "gt"
+  | "gte"
+  | "lt"
+  | "lte";
+
+export const FILTER_OPERATORS: Record<string, FilterOperator[]> = {
+  string: ["equals", "notEquals", "contains", "notContains", "set", "notSet"],
+  number: ["equals", "notEquals", "gt", "gte", "lt", "lte", "set", "notSet"],
+  time: ["equals", "notEquals", "gt", "gte", "lt", "lte", "set", "notSet"],
+};
+
+export const TIME_GRANULARITIES = ["hour", "day", "week", "month", "quarter", "year"] as const;
+
+export type TimeGranularity = (typeof TIME_GRANULARITIES)[number];
+
+export const DATE_PRESETS = [
+  { label: "Today", value: "today" },
+  { label: "Yesterday", value: "yesterday" },
+  { label: "Last 7 days", value: "last 7 days" },
+  { label: "Last 30 days", value: "last 30 days" },
+  { label: "This month", value: "this month" },
+  { label: "Last month", value: "last month" },
+  { label: "This quarter", value: "this quarter" },
+  { label: "This year", value: "this year" },
+] as const;
+
+/**
+ * Get filter operators for a given field type
+ */
+export function getFilterOperatorsForType(type: "string" | "number" | "time"): FilterOperator[] {
+  return FILTER_OPERATORS[type] || FILTER_OPERATORS.string;
+}
+
+/**
+ * Get field definition by ID
+ */
+export function getFieldById(id: string): FieldDefinition | MeasureDefinition | undefined {
+  const dimension = FEEDBACK_FIELDS.dimensions.find((d) => d.id === id);
+  if (dimension) return dimension;
+  return FEEDBACK_FIELDS.measures.find((m) => m.id === id);
+}

apps/web/app/(app)/environments/[environmentId]/analysis/charts/components/ChartDropdownMenu.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { CopyIcon, MoreVertical, SquarePenIcon, TrashIcon } from "lucide-react";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/cn";
+import { TChart } from "../../types/analysis";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
+import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
+
+interface ChartDropdownMenuProps {
+  environmentId: string;
+  chart: TChart;
+  disabled?: boolean;
+  deleteChart: (chartId: string) => void;
+  onEdit?: () => void;
+}
+
+export const ChartDropdownMenu = ({
+  environmentId,
+  chart,
+  disabled,
+  deleteChart,
+  onEdit,
+}: ChartDropdownMenuProps) => {
+  const { t } = useTranslation();
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [isDropDownOpen, setIsDropDownOpen] = useState(false);
+
+  const handleDeleteChart = async (chartId: string) => {
+    setLoading(true);
+    try {
+      // TODO: Implement deleteChartAction
+      // await deleteChartAction({ chartId });
+      deleteChart(chartId);
+      toast.success("Chart deleted successfully");
+    } catch (error) {
+      toast.error("Error deleting chart");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      id={`${chart.name.toLowerCase().split(" ").join("-")}-chart-actions`}
+      data-testid="chart-dropdown-menu">
+      <DropdownMenu open={isDropDownOpen} onOpenChange={setIsDropDownOpen}>
+        <DropdownMenuTrigger className="z-10" asChild disabled={disabled}>
+          <div
+            className={cn(
+              "rounded-lg border bg-white p-2",
+              disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-slate-50"
+            )}
+            onClick={(e) => e.stopPropagation()}>
+            <span className="sr-only">Open options</span>
+            <MoreVertical className="h-4 w-4" aria-hidden="true" />
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="inline-block w-auto min-w-max">
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <button
+                type="button"
+                className="flex w-full items-center"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setIsDropDownOpen(false);
+                  onEdit?.();
+                }}>
+                <SquarePenIcon className="mr-2 size-4" />
+                {t("common.edit")}
+              </button>
+            </DropdownMenuItem>
+
+            <DropdownMenuItem>
+              <button
+                type="button"
+                className="flex w-full items-center"
+                onClick={async (e) => {
+                  e.preventDefault();
+                  setIsDropDownOpen(false);
+                  // TODO: Implement duplicate functionality
+                  toast.success("Duplicate functionality coming soon");
+                }}>
+                <CopyIcon className="mr-2 h-4 w-4" />
+                {t("common.duplicate")}
+              </button>
+            </DropdownMenuItem>
+
+            <DropdownMenuItem>
+              <button
+                type="button"
+                className="flex w-full items-center"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setIsDropDownOpen(false);
+                  setDeleteDialogOpen(true);
+                }}>
+                <TrashIcon className="mr-2 h-4 w-4" />
+                {t("common.delete")}
+              </button>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DeleteDialog
+        deleteWhat="Chart"
+        open={isDeleteDialogOpen}
+        setOpen={setDeleteDialogOpen}
+        onDelete={() => handleDeleteChart(chart.id)}
+        text="Are you sure you want to delete this chart? This action cannot be undone."
+        isDeleting={loading}
+      />
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/analysis/charts/components/ChartsListClient.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { format, formatDistanceToNow } from "date-fns";
+import { useState } from "react";
+import {
+  ActivityIcon,
+  AreaChartIcon,
+  BarChart3Icon,
+  LineChartIcon,
+  MapIcon,
+  PieChartIcon,
+  ScatterChart,
+  TableIcon,
+} from "lucide-react";
+import { TChart } from "../../types/analysis";
+import { ChartDropdownMenu } from "./ChartDropdownMenu";
+import { CreateChartDialog } from "./CreateChartDialog";
+
+interface ChartsListClientProps {
+  charts: TChart[];
+  dashboards: any[];
+  environmentId: string;
+}
+
+const CHART_TYPE_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  area: AreaChartIcon,
+  bar: BarChart3Icon,
+  line: LineChartIcon,
+  pie: PieChartIcon,
+  table: TableIcon,
+  big_number: ActivityIcon,
+  big_number_total: ActivityIcon,
+  scatter: ScatterChart,
+  map: MapIcon,
+};
+
+export function ChartsListClient({ charts: initialCharts, dashboards, environmentId }: ChartsListClientProps) {
+  const [charts, setCharts] = useState(initialCharts);
+  const [editingChartId, setEditingChartId] = useState<string | undefined>(undefined);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+
+  const filteredCharts = charts;
+
+  const deleteChart = (chartId: string) => {
+    setCharts(charts.filter((c) => c.id !== chartId));
+  };
+
+  const getChartIcon = (type: string) => {
+    const IconComponent = CHART_TYPE_ICONS[type] || BarChart3Icon;
+    return <IconComponent className="h-5 w-5" />;
+  };
+
+  const handleChartClick = (chartId: string) => {
+    setEditingChartId(chartId);
+    setIsEditDialogOpen(true);
+  };
+
+  const handleEditSuccess = () => {
+    // Refresh charts list if needed
+    setIsEditDialogOpen(false);
+    setEditingChartId(undefined);
+  };
+
+  return (
+    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+      <div className="grid h-12 grid-cols-7 content-center border-b text-left text-sm font-semibold text-slate-900">
+        <div className="col-span-3 pl-6">Title</div>
+        <div className="col-span-1 hidden text-center sm:block">Created By</div>
+        <div className="col-span-1 hidden text-center sm:block">Created</div>
+        <div className="col-span-1 hidden text-center sm:block">Updated</div>
+        <div className="col-span-1"></div>
+      </div>
+      {filteredCharts.length === 0 ? (
+        <p className="py-6 text-center text-sm text-slate-400">No charts found.</p>
+      ) : (
+        <>
+          {filteredCharts.map((chart) => (
+            <div
+              key={chart.id}
+              onClick={() => handleChartClick(chart.id)}
+              className="grid h-12 w-full cursor-pointer grid-cols-7 content-center p-2 text-left transition-colors ease-in-out hover:bg-slate-100">
+              <div className="col-span-3 flex items-center pl-6 text-sm">
+                <div className="flex items-center gap-4">
+                  <div className="ph-no-capture w-8 flex-shrink-0 text-slate-500">
+                    {getChartIcon(chart.type)}
+                  </div>
+                  <div className="flex flex-col">
+                    <div className="ph-no-capture font-medium text-slate-900">{chart.name}</div>
+                  </div>
+                </div>
+              </div>
+              <div className="col-span-1 my-auto hidden text-center text-sm whitespace-nowrap text-slate-500 sm:block">
+                <div className="ph-no-capture text-slate-900">{chart.createdByName || "-"}</div>
+              </div>
+              <div className="col-span-1 my-auto hidden text-center text-sm whitespace-normal text-slate-500 sm:block">
+                <div className="ph-no-capture text-slate-900">
+                  {format(new Date(chart.createdAt), "do 'of' MMMM, yyyy")}
+                </div>
+              </div>
+              <div className="col-span-1 my-auto hidden text-center text-sm text-slate-500 sm:block">
+                <div className="ph-no-capture text-slate-900">
+                  {formatDistanceToNow(new Date(chart.updatedAt), {
+                    addSuffix: true,
+                  }).replace("about", "")}
+                </div>
+              </div>
+              <div
+                className="col-span-1 my-auto flex items-center justify-end pr-6"
+                onClick={(e) => e.stopPropagation()}>
+                <ChartDropdownMenu
+                  environmentId={environmentId}
+                  chart={chart}
+                  deleteChart={deleteChart}
+                  onEdit={() => {
+                    setEditingChartId(chart.id);
+                    setIsEditDialogOpen(true);
+                  }}
+                />
+              </div>
+            </div>
+          ))}
+        </>
+      )}
+      <CreateChartDialog
+        open={isEditDialogOpen}
+        onOpenChange={setIsEditDialogOpen}
+        environmentId={environmentId}
+        chartId={editingChartId}
+        onSuccess={handleEditSuccess}
+      />
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/charts/components/CreateChartButton.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { PlusIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/modules/ui/components/button";
+import { CreateChartDialog } from "./CreateChartDialog";
+
+interface CreateChartButtonProps {
+  environmentId: string;
+}
+
+export function CreateChartButton({ environmentId }: CreateChartButtonProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setIsDialogOpen(true)}>
+        <PlusIcon className="mr-2 h-4 w-4" />
+        Chart
+      </Button>
+      <CreateChartDialog
+        open={isDialogOpen}
+        onOpenChange={setIsDialogOpen}
+        environmentId={environmentId}
+      />
+    </>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/charts/components/CreateChartDialog.tsx

@@ -0,0 +1,431 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { toast } from "react-hot-toast";
+import { AnalyticsResponse } from "@/app/api/analytics/_lib/types";
+import { LoadingSpinner } from "@/modules/ui/components/loading-spinner";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
+import {
+  addChartToDashboardAction,
+  createChartAction,
+  executeQueryAction,
+  getChartAction,
+  getDashboardsAction,
+  updateChartAction,
+} from "../../actions";
+import { PlusIcon, SaveIcon } from "lucide-react";
+import { Button } from "@/modules/ui/components/button";
+import { mapChartType, mapDatabaseChartTypeToApi } from "../../chart-builder/lib/chart-utils";
+import { AIQuerySection } from "../../chart-builder/components/AIQuerySection";
+import { AddToDashboardDialog } from "../../chart-builder/components/AddToDashboardDialog";
+import { AdvancedChartBuilder } from "../../chart-builder/components/AdvancedChartBuilder";
+import { ChartPreview } from "../../chart-builder/components/ChartPreview";
+import { ManualChartBuilder } from "../../chart-builder/components/ManualChartBuilder";
+import { SaveChartDialog } from "../../chart-builder/components/SaveChartDialog";
+
+interface CreateChartDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  environmentId: string;
+  chartId?: string;
+  onSuccess?: () => void;
+}
+
+export function CreateChartDialog({
+  open,
+  onOpenChange,
+  environmentId,
+  chartId,
+  onSuccess,
+}: CreateChartDialogProps) {
+  const [selectedChartType, setSelectedChartType] = useState<string>("");
+  const [chartData, setChartData] = useState<AnalyticsResponse | null>(null);
+  const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
+  const [isAddToDashboardDialogOpen, setIsAddToDashboardDialogOpen] = useState(false);
+  const [chartName, setChartName] = useState("");
+  const [dashboards, setDashboards] = useState<Array<{ id: string; name: string }>>([]);
+  const [selectedDashboardId, setSelectedDashboardId] = useState<string>("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [isLoadingChart, setIsLoadingChart] = useState(false);
+  const [currentChartId, setCurrentChartId] = useState<string | undefined>(chartId);
+
+  // Determine if we should show AdvancedChartBuilder
+  const shouldShowAdvancedBuilder = !!selectedChartType || !!chartData;
+
+  useEffect(() => {
+    if (isAddToDashboardDialogOpen) {
+      getDashboardsAction({ environmentId }).then((result) => {
+        if (result?.data) {
+          setDashboards(result.data);
+        } else if (result?.serverError) {
+          toast.error(result.serverError);
+        }
+      });
+    }
+  }, [isAddToDashboardDialogOpen, environmentId]);
+
+  useEffect(() => {
+    if (open && chartId) {
+      setIsLoadingChart(true);
+      getChartAction({ environmentId, chartId })
+        .then(async (result) => {
+          if (result?.data) {
+            const chart = result.data;
+            setChartName(chart.name);
+
+            // Execute the chart's query to get the data
+            const queryResult = await executeQueryAction({
+              environmentId,
+              query: chart.query as any,
+            });
+
+            if (queryResult?.error || queryResult?.serverError) {
+              toast.error(queryResult.error || queryResult.serverError || "Failed to load chart data");
+              setIsLoadingChart(false);
+              return;
+            }
+
+            if (queryResult?.data?.data) {
+              // Format as AnalyticsResponse
+              const chartData: AnalyticsResponse = {
+                query: chart.query as any,
+                chartType: mapDatabaseChartTypeToApi(chart.type),
+                data: Array.isArray(queryResult.data.data) ? queryResult.data.data : [],
+              };
+
+              setChartData(chartData);
+              setCurrentChartId(chart.id);
+            } else {
+              toast.error("No data returned for chart");
+            }
+          } else if (result?.serverError) {
+            toast.error(result.serverError);
+          }
+          setIsLoadingChart(false);
+        })
+        .catch((error: any) => {
+          toast.error(error.message || "Failed to load chart");
+          setIsLoadingChart(false);
+        });
+    } else if (open && !chartId) {
+      // Reset state for new chart
+      setChartData(null);
+      setChartName("");
+      setSelectedChartType("");
+      setCurrentChartId(undefined);
+    }
+  }, [open, chartId, environmentId]);
+
+  const handleChartGenerated = (data: AnalyticsResponse) => {
+    setChartData(data);
+    setChartName(data.chartType ? `Chart ${new Date().toLocaleString()}` : "");
+    // Set chart type so AdvancedChartBuilder shows with the AI-generated chart type
+    if (data.chartType) {
+      setSelectedChartType(data.chartType);
+    }
+  };
+
+  const handleSaveChart = async () => {
+    if (!chartData || !chartName.trim()) {
+      toast.error("Please enter a chart name");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      // If we have a currentChartId, update the existing chart; otherwise create a new one
+      if (currentChartId) {
+        const result = await updateChartAction({
+          environmentId,
+          chartId: currentChartId,
+          name: chartName.trim(),
+          type: mapChartType(chartData.chartType),
+          query: chartData.query,
+          config: {},
+        });
+
+        if (!result?.data) {
+          toast.error(result?.serverError || "Failed to update chart");
+          return;
+        }
+
+        toast.success("Chart updated successfully!");
+        setIsSaveDialogOpen(false);
+        onOpenChange(false);
+        onSuccess?.();
+      } else {
+        const result = await createChartAction({
+          environmentId,
+          name: chartName.trim(),
+          type: mapChartType(chartData.chartType),
+          query: chartData.query,
+          config: {},
+        });
+
+        if (!result?.data) {
+          toast.error(result?.serverError || "Failed to save chart");
+          return;
+        }
+
+        setCurrentChartId(result.data.id);
+        toast.success("Chart saved successfully!");
+        setIsSaveDialogOpen(false);
+        onOpenChange(false);
+        onSuccess?.();
+      }
+    } catch (error: any) {
+      toast.error(error.message || "Failed to save chart");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleAddToDashboard = async () => {
+    if (!chartData || !selectedDashboardId) {
+      toast.error("Please select a dashboard");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      let chartIdToUse = currentChartId;
+
+      // If we don't have a chartId (creating new chart), create it first
+      if (!chartIdToUse) {
+        if (!chartName.trim()) {
+          toast.error("Please enter a chart name");
+          setIsSaving(false);
+          return;
+        }
+
+        const chartResult = await createChartAction({
+          environmentId,
+          name: chartName.trim(),
+          type: mapChartType(chartData.chartType),
+          query: chartData.query,
+          config: {},
+        });
+
+        if (!chartResult?.data) {
+          toast.error(chartResult?.serverError || "Failed to save chart");
+          setIsSaving(false);
+          return;
+        }
+
+        chartIdToUse = chartResult.data.id;
+        setCurrentChartId(chartIdToUse);
+      }
+
+      // Add the chart (existing or newly created) to the dashboard
+      const widgetResult = await addChartToDashboardAction({
+        environmentId,
+        chartId: chartIdToUse,
+        dashboardId: selectedDashboardId,
+        title: chartName.trim(),
+        layout: { x: 0, y: 0, w: 4, h: 3 },
+      });
+
+      if (!widgetResult?.data) {
+        toast.error(widgetResult?.serverError || "Failed to add chart to dashboard");
+        return;
+      }
+
+      toast.success("Chart added to dashboard!");
+      setIsAddToDashboardDialogOpen(false);
+      onOpenChange(false);
+      onSuccess?.();
+    } catch (error: any) {
+      toast.error(error.message || "Failed to add chart to dashboard");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleClose = () => {
+    if (!isSaving) {
+      setChartData(null);
+      setChartName("");
+      setSelectedChartType("");
+      setCurrentChartId(undefined);
+      onOpenChange(false);
+    }
+  };
+
+  // If loading an existing chart, show loading state
+  if (chartId && isLoadingChart) {
+    return (
+      <Dialog open={open} onOpenChange={handleClose}>
+        <DialogContent className="max-[90vw] max-h-[90vh] overflow-y-auto">
+          <div className="flex h-64 items-center justify-center">
+            <LoadingSpinner />
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  // If viewing an existing chart, show only the chart preview
+  if (chartId && chartData) {
+    return (
+      <Dialog open={open} onOpenChange={handleClose}>
+        <DialogContent className="sm:max-w-7xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Edit Chart</DialogTitle>
+            <DialogDescription>View and edit your chart configuration.</DialogDescription>
+          </DialogHeader>
+          <DialogBody>
+            <ChartPreview chartData={chartData} />
+          </DialogBody>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsAddToDashboardDialogOpen(true)} disabled={isSaving}>
+              <PlusIcon className="mr-2 h-4 w-4" />
+              Add to Dashboard
+            </Button>
+            <Button onClick={() => setIsSaveDialogOpen(true)} disabled={isSaving}>
+              <SaveIcon className="mr-2 h-4 w-4" />
+              Save Chart
+            </Button>
+          </DialogFooter>
+
+          {/* Dialogs */}
+          <SaveChartDialog
+            open={isSaveDialogOpen}
+            onOpenChange={setIsSaveDialogOpen}
+            chartName={chartName}
+            onChartNameChange={setChartName}
+            onSave={handleSaveChart}
+            isSaving={isSaving}
+          />
+
+          <AddToDashboardDialog
+            open={isAddToDashboardDialogOpen}
+            onOpenChange={setIsAddToDashboardDialogOpen}
+            chartName={chartName}
+            onChartNameChange={setChartName}
+            dashboards={dashboards}
+            selectedDashboardId={selectedDashboardId}
+            onDashboardSelect={setSelectedDashboardId}
+            onAdd={handleAddToDashboard}
+            isSaving={isSaving}
+          />
+
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-h-[90vh] overflow-y-auto" width="wide">
+        <DialogHeader>
+          <DialogTitle>{chartId ? "Edit Chart" : "Create Chart"}</DialogTitle>
+          <DialogDescription>
+            {chartId
+              ? "View and edit your chart configuration."
+              : "Use AI to generate a chart or build one manually."}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <div className="grid gap-4">
+            {/* AI Query Section */}
+            <AIQuerySection onChartGenerated={handleChartGenerated} />
+
+            {/* OR Separator */}
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center" aria-hidden="true">
+                <div className="w-full border-t border-gray-200" />
+              </div>
+              <div className="relative flex justify-center">
+                <span className="bg-gray-50 px-2 text-sm text-gray-500">OR</span>
+              </div>
+            </div>
+
+            {/* Chart Type Selection */}
+            <ManualChartBuilder
+              selectedChartType={selectedChartType}
+              onChartTypeSelect={setSelectedChartType}
+            />
+
+            {/* Advanced Builder - shown when chart type selected OR AI chart generated */}
+            {shouldShowAdvancedBuilder && (
+              <AdvancedChartBuilder
+                environmentId={environmentId}
+                initialChartType={selectedChartType || chartData?.chartType || ""}
+                initialQuery={chartData?.query}
+                hidePreview={true}
+                onChartGenerated={(data) => {
+                  setChartData(data);
+                  setChartName(data.chartType ? `Chart ${new Date().toLocaleString()}` : "");
+                  // Update selectedChartType when chart type changes in AdvancedChartBuilder
+                  if (data.chartType) {
+                    setSelectedChartType(data.chartType);
+                  }
+                }}
+                onSave={(chartId) => {
+                  setCurrentChartId(chartId);
+                  setIsSaveDialogOpen(false);
+                  onOpenChange(false);
+                  onSuccess?.();
+                }}
+                onAddToDashboard={(chartId, dashboardId) => {
+                  setCurrentChartId(chartId);
+                  setIsAddToDashboardDialogOpen(false);
+                  onOpenChange(false);
+                  onSuccess?.();
+                }}
+              />
+            )}
+
+            {/* Single Chart Preview - shown when chartData exists */}
+            {chartData && <ChartPreview chartData={chartData} />}
+          </div>
+        </DialogBody>
+
+        {chartData && (
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsAddToDashboardDialogOpen(true)} disabled={isSaving}>
+              <PlusIcon className="mr-2 h-4 w-4" />
+              Add to Dashboard
+            </Button>
+            <Button onClick={() => setIsSaveDialogOpen(true)} disabled={isSaving}>
+              <SaveIcon className="mr-2 h-4 w-4" />
+              Save Chart
+            </Button>
+          </DialogFooter>
+        )}
+
+        {/* Dialogs */}
+        <SaveChartDialog
+          open={isSaveDialogOpen}
+          onOpenChange={setIsSaveDialogOpen}
+          chartName={chartName}
+          onChartNameChange={setChartName}
+          onSave={handleSaveChart}
+          isSaving={isSaving}
+        />
+
+        <AddToDashboardDialog
+          open={isAddToDashboardDialogOpen}
+          onOpenChange={setIsAddToDashboardDialogOpen}
+          chartName={chartName}
+          onChartNameChange={setChartName}
+          dashboards={dashboards}
+          selectedDashboardId={selectedDashboardId}
+          onDashboardSelect={setSelectedDashboardId}
+          onAdd={handleAddToDashboard}
+          isSaving={isSaving}
+        />
+
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { getCharts, getDashboards } from "../lib/data";
+import { ChartsListClient } from "./components/ChartsListClient";
+
+export default async function ChartsListPage({
+  params,
+}: {
+  params: Promise<{ environmentId: string }>;
+}) {
+  const { environmentId } = await params;
+  const [charts, dashboards] = await Promise.all([getCharts(environmentId), getDashboards(environmentId)]);
+
+  return <ChartsListClient charts={charts} dashboards={dashboards} environmentId={environmentId} />;
+}

apps/web/app/(app)/environments/[environmentId]/analysis/components/analysis-layout-client.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { use } from "react";
+import { CreateChartButton } from "../charts/components/CreateChartButton";
+import { CreateDashboardButton } from "../dashboards/components/CreateDashboardButton";
+import { AnalysisPageLayout } from "./analysis-page-layout";
+
+interface AnalysisLayoutClientProps {
+  children: React.ReactNode;
+  params: Promise<{ environmentId: string }>;
+}
+
+export function AnalysisLayoutClient({ children, params }: AnalysisLayoutClientProps) {
+  const pathname = usePathname();
+  const { environmentId } = use(params);
+
+  // Determine active tab based on pathname
+  let activeId = "dashboards"; // default
+  if (pathname?.includes("/charts")) {
+    activeId = "charts";
+  } else if (pathname?.includes("/dashboards") || pathname?.includes("/dashboard/")) {
+    activeId = "dashboards";
+  }
+
+  // Show CTA button based on current page
+  const isDashboardsPage = pathname?.includes("/dashboards") && !pathname?.includes("/dashboard/");
+  const isChartsPage = pathname?.includes("/charts");
+
+  let cta;
+  if (isDashboardsPage) {
+    cta = <CreateDashboardButton environmentId={environmentId} />;
+  } else if (isChartsPage) {
+    cta = <CreateChartButton environmentId={environmentId} />;
+  }
+
+  return (
+    <AnalysisPageLayout pageTitle="Analysis" activeId={activeId} environmentId={environmentId} cta={cta}>
+      {children}
+    </AnalysisPageLayout>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/components/analysis-page-layout.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { AnalysisSecondaryNavigation } from "./analysis-secondary-navigation";
+
+interface AnalysisPageLayoutProps {
+  pageTitle: string;
+  activeId: string;
+  environmentId: string;
+  cta?: ReactNode;
+  children: ReactNode;
+}
+
+export function AnalysisPageLayout({
+  pageTitle,
+  activeId,
+  environmentId,
+  cta,
+  children,
+}: AnalysisPageLayoutProps) {
+  return (
+    <PageContentWrapper>
+      <PageHeader pageTitle={pageTitle} cta={cta}>
+        <AnalysisSecondaryNavigation activeId={activeId} environmentId={environmentId} />
+      </PageHeader>
+      {children}
+    </PageContentWrapper>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/components/analysis-secondary-navigation.tsx

@@ -0,0 +1,26 @@
+import { SecondaryNavigation } from "@/modules/ui/components/secondary-navigation";
+
+interface AnalysisSecondaryNavigationProps {
+  activeId: string;
+  environmentId: string;
+}
+
+export function AnalysisSecondaryNavigation({
+  activeId,
+  environmentId,
+}: AnalysisSecondaryNavigationProps) {
+  const navigation = [
+    {
+      id: "dashboards",
+      label: "Dashboards",
+      href: `/environments/${environmentId}/analysis/dashboards`,
+    },
+    {
+      id: "charts",
+      label: "Charts",
+      href: `/environments/${environmentId}/analysis/charts`,
+    },
+  ];
+
+  return <SecondaryNavigation navigation={navigation} activeId={activeId} />;
+}

apps/web/app/(app)/environments/[environmentId]/analysis/dashboard/[dashboardId]/components/DashboardControlBar.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { CopyIcon, PencilIcon, TrashIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { TDashboard } from "../../../types/analysis";
+import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
+import { IconBar } from "@/modules/ui/components/iconbar";
+import { EditDashboardDialog } from "./EditDashboardDialog";
+
+interface DashboardControlBarProps {
+  environmentId: string;
+  dashboard: TDashboard;
+  onDashboardUpdate?: () => void;
+}
+
+export const DashboardControlBar = ({
+  environmentId,
+  dashboard,
+  onDashboardUpdate,
+}: DashboardControlBarProps) => {
+  const router = useRouter();
+  const { t } = useTranslation();
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+
+  const handleDeleteDashboard = async () => {
+    setIsDeleting(true);
+    try {
+      // TODO: Implement deleteDashboardAction when available
+      // const result = await deleteDashboardAction({ environmentId, dashboardId: dashboard.id });
+      // if (result?.data) {
+      //   router.push(`/environments/${environmentId}/analysis/dashboards`);
+      //   toast.success("Dashboard deleted successfully");
+      // } else {
+      //   toast.error(result?.serverError || "Failed to delete dashboard");
+      // }
+      toast.error("Delete functionality coming soon");
+    } catch (error: any) {
+      toast.error(error.message || "Failed to delete dashboard");
+    } finally {
+      setIsDeleting(false);
+      setDeleteDialogOpen(false);
+    }
+  };
+
+  const handleDuplicate = async () => {
+    // TODO: Implement duplicate functionality
+    toast.success("Duplicate functionality coming soon");
+  };
+
+  const iconActions = [
+    {
+      icon: PencilIcon,
+      tooltip: t("common.edit"),
+      onClick: () => {
+        setIsEditDialogOpen(true);
+      },
+      isVisible: true,
+    },
+    {
+      icon: CopyIcon,
+      tooltip: t("common.duplicate"),
+      onClick: handleDuplicate,
+      isVisible: true,
+    },
+    {
+      icon: TrashIcon,
+      tooltip: t("common.delete"),
+      onClick: () => {
+        setDeleteDialogOpen(true);
+      },
+      isVisible: true,
+    },
+  ];
+
+  return (
+    <>
+      <IconBar actions={iconActions} />
+      <DeleteDialog
+        deleteWhat="Dashboard"
+        open={isDeleteDialogOpen}
+        setOpen={setDeleteDialogOpen}
+        onDelete={handleDeleteDashboard}
+        text="Are you sure you want to delete this dashboard? This action cannot be undone."
+        isDeleting={isDeleting}
+      />
+      <EditDashboardDialog
+        open={isEditDialogOpen}
+        onOpenChange={setIsEditDialogOpen}
+        dashboardId={dashboard.id}
+        environmentId={environmentId}
+        initialName={dashboard.name}
+        initialDescription={dashboard.description}
+        onSuccess={() => {
+          setIsEditDialogOpen(false);
+          onDashboardUpdate?.();
+          router.refresh();
+        }}
+      />
+    </>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/analysis/dashboard/[dashboardId]/components/DashboardDetailClient.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { PageContentWrapper } from "@/modules/ui/components/page-content-wrapper";
+import { PageHeader } from "@/modules/ui/components/page-header";
+import { GoBackButton } from "@/modules/ui/components/go-back-button";
+import { TDashboard } from "../../../types/analysis";
+import { CreateChartButton } from "../../../charts/components/CreateChartButton";
+import { DashboardWidget } from "./DashboardWidget";
+import { DashboardControlBar } from "./DashboardControlBar";
+
+interface DashboardDetailClientProps {
+  dashboard: TDashboard;
+  environmentId: string;
+}
+
+export function DashboardDetailClient({ dashboard: initialDashboard, environmentId }: DashboardDetailClientProps) {
+  const router = useRouter();
+  const [dashboard] = useState(initialDashboard);
+  const isEmpty = dashboard.widgets.length === 0;
+
+  const handleDashboardUpdate = () => {
+    router.refresh();
+  };
+
+  // Calculate grid column span based on widget layout width
+  const getColSpan = (w: number) => {
+    // Assuming w is in a 12-column grid system
+    // Map widget width to Tailwind col-span classes
+    if (w <= 2) return "col-span-12 md:col-span-2";
+    if (w <= 3) return "col-span-12 md:col-span-3";
+    if (w <= 4) return "col-span-12 md:col-span-4";
+    if (w <= 6) return "col-span-12 md:col-span-6";
+    if (w <= 8) return "col-span-12 md:col-span-8";
+    if (w <= 9) return "col-span-12 md:col-span-9";
+    return "col-span-12";
+  };
+
+  return (
+    <PageContentWrapper>
+      <GoBackButton url={`/environments/${environmentId}/analysis/dashboards`} />
+      <PageHeader
+        pageTitle={dashboard.name}
+        cta={
+          <DashboardControlBar
+            environmentId={environmentId}
+            dashboard={dashboard}
+            onDashboardUpdate={handleDashboardUpdate}
+          />
+        }>
+        {dashboard.description && (
+          <p className="mt-2 text-sm text-gray-500">{dashboard.description}</p>
+        )}
+      </PageHeader>
+      <section className="pt-6 pb-24">
+        {isEmpty ? (
+          // Empty State
+          <div className="flex h-[400px] flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-white/50">
+            <div className="mb-4 rounded-full bg-gray-100 p-4">
+              <div className="h-12 w-12 rounded-md bg-gray-300 opacity-20" />
+            </div>
+            <h3 className="text-lg font-medium text-gray-900">No Data</h3>
+            <p className="mt-2 max-w-sm text-center text-gray-500">
+              There is currently no information to display. Add charts to build your dashboard.
+            </p>
+            <CreateChartButton environmentId={environmentId} />
+          </div>
+        ) : (
+          // Grid Layout - Render widgets dynamically
+          <div className="grid grid-cols-12 gap-6">
+            {dashboard.widgets.map((widget) => (
+              <div key={widget.id} className={getColSpan(widget.layout.w)}>
+                <DashboardWidget widget={widget} environmentId={environmentId} />
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </PageContentWrapper>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/dashboard/[dashboardId]/components/DashboardWidget.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { MoreHorizontalIcon } from "lucide-react";
+import { Button } from "@/modules/ui/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
+import { LoadingSpinner } from "@/modules/ui/components/loading-spinner";
+import { executeQueryAction } from "../../../actions";
+import { ChartRenderer } from "../../../chart-builder/components/ChartRenderer";
+import { TDashboardWidget } from "../../../types/analysis";
+
+interface DashboardWidgetProps {
+  widget: TDashboardWidget;
+  environmentId: string;
+}
+
+export function DashboardWidget({ widget, environmentId }: DashboardWidgetProps) {
+  const [chartData, setChartData] = useState<Record<string, any>[] | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (widget.type === "chart" && widget.chart) {
+      setIsLoading(true);
+      setError(null);
+      executeQueryAction({
+        environmentId,
+        query: widget.chart.query,
+      })
+        .then((result) => {
+          if (result?.serverError || result?.error) {
+            setError(result.serverError || result.error || "Failed to load chart data");
+            setChartData(null);
+          } else if (result?.data?.data) {
+            const data = Array.isArray(result.data.data) ? result.data.data : [];
+            setChartData(data);
+            setError(null);
+          } else {
+            setError("No data returned");
+            setChartData(null);
+          }
+        })
+        .catch((err: any) => {
+          setError(err.message || "Failed to load chart data");
+          setChartData(null);
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
+  }, [widget, environmentId]);
+
+  const renderContent = () => {
+    if (widget.type === "chart") {
+      if (!widget.chart) {
+        return (
+          <div className="flex h-full items-center justify-center text-gray-500">
+            Chart not found
+          </div>
+        );
+      }
+
+      if (isLoading) {
+        return (
+          <div className="flex h-full items-center justify-center">
+            <LoadingSpinner />
+          </div>
+        );
+      }
+
+      if (error) {
+        return (
+          <div className="flex h-full w-full flex-col items-start justify-center rounded-md border border-red-100 bg-red-50 p-4">
+            <div className="mb-1 flex items-center gap-2 font-semibold text-red-700">
+              <div className="rounded-full bg-red-600 p-0.5">
+                <span className="block h-3 w-3 text-center text-[10px] leading-3 text-white">✕</span>
+              </div>
+              Data error
+            </div>
+            <p className="text-xs text-red-600">{error}</p>
+          </div>
+        );
+      }
+
+      if (!chartData || chartData.length === 0) {
+        return (
+          <div className="flex h-full items-center justify-center text-gray-500">
+            No data available
+          </div>
+        );
+      }
+
+      return <ChartRenderer chartType={widget.chart.type} data={chartData} />;
+    }
+
+    if (widget.type === "markdown") {
+      return (
+        <div className="prose prose-sm max-w-none">
+          {/* TODO: Render markdown content */}
+          <p className="text-gray-500">Markdown content not yet implemented</p>
+        </div>
+      );
+    }
+
+    if (widget.type === "header") {
+      return (
+        <div className="flex h-full items-center">
+          <h2 className="text-2xl font-semibold text-gray-900">{widget.title || "Header"}</h2>
+        </div>
+      );
+    }
+
+    if (widget.type === "divider") {
+      return <div className="h-full w-full border-t border-gray-200" />;
+    }
+
+    return null;
+  };
+
+  return (
+    <div className="flex h-full flex-col rounded-sm border border-gray-200 bg-white shadow-sm ring-1 ring-black/5">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-gray-100 px-4 py-2">
+        <h3 className="text-sm font-semibold text-gray-800">
+          {widget.title || widget.chart?.name || "Widget"}
+        </h3>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-6 w-6 text-gray-400 hover:text-gray-600">
+              <MoreHorizontalIcon className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Force refresh</DropdownMenuItem>
+            <DropdownMenuItem>View as table</DropdownMenuItem>
+            <DropdownMenuItem>Maximize</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Body */}
+      <div className="relative min-h-[300px] flex-1 p-4">{renderContent()}</div>
+    </div>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/dashboard/[dashboardId]/components/EditDashboardDialog.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { toast } from "react-hot-toast";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
+import { Button } from "@/modules/ui/components/button";
+import { Input } from "@/modules/ui/components/input";
+import { updateDashboardAction } from "../../../actions";
+
+interface EditDashboardDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dashboardId: string;
+  environmentId: string;
+  initialName: string;
+  initialDescription?: string;
+  onSuccess: () => void;
+}
+
+export function EditDashboardDialog({
+  open,
+  onOpenChange,
+  dashboardId,
+  environmentId,
+  initialName,
+  initialDescription,
+  onSuccess,
+}: EditDashboardDialogProps) {
+  const [dashboardName, setDashboardName] = useState(initialName);
+  const [dashboardDescription, setDashboardDescription] = useState(initialDescription || "");
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setDashboardName(initialName);
+      setDashboardDescription(initialDescription || "");
+    }
+  }, [open, initialName, initialDescription]);
+
+  const handleSave = async () => {
+    if (!dashboardName.trim()) {
+      toast.error("Please enter a dashboard name");
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      const result = await updateDashboardAction({
+        environmentId,
+        dashboardId,
+        name: dashboardName.trim(),
+        description: dashboardDescription.trim() || null,
+      });
+
+      if (!result?.data) {
+        toast.error(result?.serverError || "Failed to update dashboard");
+        return;
+      }
+
+      toast.success("Dashboard updated successfully!");
+      onSuccess();
+      onOpenChange(false);
+    } catch (error: any) {
+      toast.error(error.message || "Failed to update dashboard");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Dashboard</DialogTitle>
+          <DialogDescription>Update dashboard name and description.</DialogDescription>
+        </DialogHeader>
+        <DialogBody className="space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="edit-dashboard-name" className="text-sm font-medium text-gray-900">
+              Dashboard Name
+            </label>
+            <Input
+              id="edit-dashboard-name"
+              placeholder="Dashboard name"
+              value={dashboardName}
+              onChange={(e) => setDashboardName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && dashboardName.trim() && !isSaving) {
+                  handleSave();
+                }
+              }}
+              autoFocus
+            />
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="edit-dashboard-description" className="text-sm font-medium text-gray-900">
+              Description (Optional)
+            </label>
+            <Input
+              id="edit-dashboard-description"
+              placeholder="Dashboard description"
+              value={dashboardDescription}
+              onChange={(e) => setDashboardDescription(e.target.value)}
+            />
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} loading={isSaving} disabled={!dashboardName.trim()}>
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,8 @@
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // This layout bypasses the analysis layout, allowing the dashboard page to have its own layout
+  return children;
+}

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

@@ -0,0 +1,18 @@
+import { notFound } from "next/navigation";
+import { getDashboard } from "../../lib/data";
+import { DashboardDetailClient } from "./components/DashboardDetailClient";
+
+export default async function DashboardPage({
+  params,
+}: {
+  params: Promise<{ environmentId: string; dashboardId: string }>;
+}) {
+  const { environmentId, dashboardId } = await params;
+  const dashboard = await getDashboard(environmentId, dashboardId);
+
+  if (!dashboard) {
+    return notFound();
+  }
+
+  return <DashboardDetailClient dashboard={dashboard} environmentId={environmentId} />;
+}

apps/web/app/(app)/environments/[environmentId]/analysis/dashboards/components/CreateDashboardButton.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { PlusIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "react-hot-toast";
+import { Button } from "@/modules/ui/components/button";
+import { createDashboardAction } from "../../actions";
+import { CreateDashboardDialog } from "./CreateDashboardDialog";
+
+interface CreateDashboardButtonProps {
+  environmentId: string;
+}
+
+export function CreateDashboardButton({ environmentId }: CreateDashboardButtonProps) {
+  const router = useRouter();
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [dashboardName, setDashboardName] = useState("");
+  const [dashboardDescription, setDashboardDescription] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+
+  const handleCreateDashboard = () => {
+    setIsCreateDialogOpen(true);
+  };
+
+  const handleCreate = async () => {
+    if (!dashboardName.trim()) {
+      toast.error("Please enter a dashboard name");
+      return;
+    }
+
+    setIsCreating(true);
+    try {
+      const result = await createDashboardAction({
+        environmentId,
+        name: dashboardName.trim(),
+        description: dashboardDescription.trim() || undefined,
+      });
+
+      if (!result?.data) {
+        toast.error(result?.serverError || "Failed to create dashboard");
+        return;
+      }
+
+      toast.success("Dashboard created successfully!");
+      setIsCreateDialogOpen(false);
+      setDashboardName("");
+      setDashboardDescription("");
+      // Navigate to the new dashboard
+      router.push(`/environments/${environmentId}/analysis/dashboard/${result.data.id}`);
+    } catch (error: any) {
+      toast.error(error.message || "Failed to create dashboard");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={handleCreateDashboard}>
+        <PlusIcon className="mr-2 h-4 w-4" />
+        Create Dashboard
+      </Button>
+      <CreateDashboardDialog
+        open={isCreateDialogOpen}
+        onOpenChange={setIsCreateDialogOpen}
+        dashboardName={dashboardName}
+        onDashboardNameChange={setDashboardName}
+        dashboardDescription={dashboardDescription}
+        onDashboardDescriptionChange={setDashboardDescription}
+        onCreate={handleCreate}
+        isCreating={isCreating}
+      />
+    </>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/dashboards/components/CreateDashboardDialog.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Button } from "@/modules/ui/components/button";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/modules/ui/components/dialog";
+import { Input } from "@/modules/ui/components/input";
+
+interface CreateDashboardDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  dashboardName: string;
+  onDashboardNameChange: (name: string) => void;
+  dashboardDescription: string;
+  onDashboardDescriptionChange: (description: string) => void;
+  onCreate: () => void;
+  isCreating: boolean;
+}
+
+export function CreateDashboardDialog({
+  open,
+  onOpenChange,
+  dashboardName,
+  onDashboardNameChange,
+  dashboardDescription,
+  onDashboardDescriptionChange,
+  onCreate,
+  isCreating,
+}: CreateDashboardDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Create Dashboard</DialogTitle>
+          <DialogDescription>Enter a name for your dashboard to create it.</DialogDescription>
+        </DialogHeader>
+        <DialogBody className="space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="dashboard-name" className="text-sm font-medium text-gray-900">
+              Dashboard Name
+            </label>
+            <Input
+              id="dashboard-name"
+              placeholder="Dashboard name"
+              value={dashboardName}
+              onChange={(e) => onDashboardNameChange(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && dashboardName.trim() && !isCreating) {
+                  onCreate();
+                }
+              }}
+              autoFocus
+            />
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="dashboard-description" className="text-sm font-medium text-gray-900">
+              Description (Optional)
+            </label>
+            <Input
+              id="dashboard-description"
+              placeholder="Dashboard description"
+              value={dashboardDescription}
+              onChange={(e) => onDashboardDescriptionChange(e.target.value)}
+            />
+          </div>
+        </DialogBody>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isCreating}>
+            Cancel
+          </Button>
+          <Button onClick={onCreate} loading={isCreating} disabled={!dashboardName.trim()}>
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/app/(app)/environments/[environmentId]/analysis/dashboards/components/DashboardDropdownMenu.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { CopyIcon, MoreVertical, SquarePenIcon, TrashIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { cn } from "@/lib/cn";
+import { TDashboard } from "../../types/analysis";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/modules/ui/components/dropdown-menu";
+import { DeleteDialog } from "@/modules/ui/components/delete-dialog";
+
+interface DashboardDropdownMenuProps {
+  environmentId: string;
+  dashboard: TDashboard;
+  disabled?: boolean;
+  deleteDashboard: (dashboardId: string) => void;
+}
+
+export const DashboardDropdownMenu = ({
+  environmentId,
+  dashboard,
+  disabled,
+  deleteDashboard,
+}: DashboardDropdownMenuProps) => {
+  const { t } = useTranslation();
+  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [isDropDownOpen, setIsDropDownOpen] = useState(false);
+
+  const handleDeleteDashboard = async (dashboardId: string) => {
+    setLoading(true);
+    try {
+      // TODO: Implement deleteDashboardAction
+      // await deleteDashboardAction({ dashboardId });
+      deleteDashboard(dashboardId);
+      toast.success("Dashboard deleted successfully");
+    } catch (error) {
+      toast.error("Error deleting dashboard");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      id={`${dashboard.name.toLowerCase().split(" ").join("-")}-dashboard-actions`}
+      data-testid="dashboard-dropdown-menu">
+      <DropdownMenu open={isDropDownOpen} onOpenChange={setIsDropDownOpen}>
+        <DropdownMenuTrigger className="z-10" asChild disabled={disabled}>
+          <div
+            className={cn(
+              "rounded-lg border bg-white p-2",
+              disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-slate-50"
+            )}
+            onClick={(e) => e.stopPropagation()}>
+            <span className="sr-only">Open options</span>
+            <MoreVertical className="h-4 w-4" aria-hidden="true" />
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="inline-block w-auto min-w-max">
+          <DropdownMenuGroup>
+            <DropdownMenuItem>
+              <Link
+                className="flex w-full items-center"
+                href={`/environments/${environmentId}/analysis/dashboard/${dashboard.id}`}>
+                <SquarePenIcon className="mr-2 size-4" />
+                {t("common.edit")}
+              </Link>
+            </DropdownMenuItem>
+
+            <DropdownMenuItem>
+              <button
+                type="button"
+                className="flex w-full items-center"
+                onClick={async (e) => {
+                  e.preventDefault();
+                  setIsDropDownOpen(false);
+                  // TODO: Implement duplicate functionality
+                  toast.success("Duplicate functionality coming soon");
+                }}>
+                <CopyIcon className="mr-2 h-4 w-4" />
+                {t("common.duplicate")}
+              </button>
+            </DropdownMenuItem>
+
+            <DropdownMenuItem>
+              <button
+                type="button"
+                className="flex w-full items-center"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setIsDropDownOpen(false);
+                  setDeleteDialogOpen(true);
+                }}>
+                <TrashIcon className="mr-2 h-4 w-4" />
+                {t("common.delete")}
+              </button>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <DeleteDialog
+        deleteWhat="Dashboard"
+        open={isDeleteDialogOpen}
+        setOpen={setDeleteDialogOpen}
+        onDelete={() => handleDeleteDashboard(dashboard.id)}
+        text="Are you sure you want to delete this dashboard? This action cannot be undone."
+        isDeleting={loading}
+      />
+    </div>
+  );
+};

apps/web/app/(app)/environments/[environmentId]/analysis/dashboards/components/DashboardsListClient.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { format, formatDistanceToNow } from "date-fns";
+import { BarChart3Icon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { TDashboard } from "../../types/analysis";
+import { DashboardDropdownMenu } from "./DashboardDropdownMenu";
+
+interface DashboardsListClientProps {
+  dashboards: TDashboard[];
+  environmentId: string;
+}
+
+export function DashboardsListClient({
+  dashboards: initialDashboards,
+  environmentId,
+}: DashboardsListClientProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [dashboards, setDashboards] = useState(initialDashboards);
+
+  const filteredDashboards = dashboards.filter((dashboard) =>
+    dashboard.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const deleteDashboard = (dashboardId: string) => {
+    setDashboards(dashboards.filter((d) => d.id !== dashboardId));
+  };
+
+  return (
+    <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+      <div className="grid h-12 grid-cols-8 content-center border-b text-left text-sm font-semibold text-slate-900">
+        <div className="col-span-3 pl-6">Title</div>
+        <div className="col-span-1 hidden text-center sm:block">Charts</div>
+        <div className="col-span-1 hidden text-center sm:block">Created By</div>
+        <div className="col-span-1 hidden text-center sm:block">Created</div>
+        <div className="col-span-1 hidden text-center sm:block">Updated</div>
+        <div className="col-span-1"></div>
+      </div>
+      {filteredDashboards.length === 0 ? (
+        <p className="py-6 text-center text-sm text-slate-400">No dashboards found.</p>
+      ) : (
+        <>
+          {filteredDashboards.map((dashboard) => (
+            <Link
+              key={dashboard.id}
+              href={`dashboard/${dashboard.id}`}
+              className="grid h-12 w-full cursor-pointer grid-cols-8 content-center p-2 text-left transition-colors ease-in-out hover:bg-slate-100">
+              <div className="col-span-3 flex items-center pl-6 text-sm">
+                <div className="flex items-center gap-4">
+                  <div className="ph-no-capture w-8 flex-shrink-0 text-slate-500">
+                    <BarChart3Icon className="h-5 w-5" />
+                  </div>
+                  <div className="flex flex-col">
+                    <div className="ph-no-capture font-medium text-slate-900">{dashboard.name}</div>
+                    {dashboard.description && (
+                      <div className="ph-no-capture text-xs font-medium text-slate-500">
+                        {dashboard.description}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="col-span-1 my-auto hidden text-center text-sm whitespace-nowrap text-slate-500 sm:block">
+                <div className="ph-no-capture text-slate-900">{dashboard.chartCount}</div>
+              </div>
+              <div className="col-span-1 my-auto hidden text-center text-sm whitespace-nowrap text-slate-500 sm:block">
+                <div className="ph-no-capture text-slate-900">{dashboard.createdByName || "-"}</div>
+              </div>
+              <div className="col-span-1 my-auto hidden text-center text-sm whitespace-normal text-slate-500 sm:block">
+                <div className="ph-no-capture text-slate-900">
+                  {format(new Date(dashboard.createdAt), "do 'of' MMMM, yyyy")}
+                </div>
+              </div>
+              <div className="col-span-1 my-auto hidden text-center text-sm text-slate-500 sm:block">
+                <div className="ph-no-capture text-slate-900">
+                  {formatDistanceToNow(new Date(dashboard.updatedAt), {
+                    addSuffix: true,
+                  }).replace("about", "")}
+                </div>
+              </div>
+              <div
+                className="col-span-1 my-auto flex items-center justify-end pr-6"
+                onClick={(e) => e.stopPropagation()}>
+                <DashboardDropdownMenu
+                  environmentId={environmentId}
+                  dashboard={dashboard}
+                  deleteDashboard={deleteDashboard}
+                />
+              </div>
+            </Link>
+          ))}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { getDashboards } from "../lib/data";
+import { DashboardsListClient } from "./components/DashboardsListClient";
+
+export default async function DashboardsListPage({
+  params,
+}: {
+  params: Promise<{ environmentId: string }>;
+}) {
+  const { environmentId } = await params;
+  const dashboards = await getDashboards(environmentId);
+
+  return <DashboardsListClient dashboards={dashboards} environmentId={environmentId} />;
+}

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

@@ -0,0 +1,11 @@
+import { AnalysisLayoutClient } from "./components/analysis-layout-client";
+
+export default function AnalysisLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ environmentId: string }>;
+}) {
+  return <AnalysisLayoutClient params={params}>{children}</AnalysisLayoutClient>;
+}

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

@@ -0,0 +1,178 @@
+"use server";
+
+import { cache as reactCache } from "react";
+import { prisma } from "@formbricks/database";
+import { getEnvironmentAuth } from "@/modules/environments/lib/utils";
+import { getUser } from "@/lib/user/service";
+import { TDashboard, TChart } from "../types/analysis";
+
+/**
+ * Fetches all dashboards for the given environment
+ */
+export const getDashboards = reactCache(async (environmentId: string): Promise<TDashboard[]> => {
+  const { project } = await getEnvironmentAuth(environmentId);
+
+  const dashboards = await prisma.dashboard.findMany({
+    where: { projectId: project.id },
+    orderBy: { createdAt: "desc" },
+    include: {
+      widgets: {
+        select: {
+          id: true,
+          type: true,
+          title: true,
+          chartId: true,
+          layout: true,
+        },
+      },
+    },
+  });
+
+  // Fetch user names for createdBy fields
+  const userIds = [...new Set(dashboards.map((d) => d.createdBy).filter(Boolean) as string[])];
+  const users = await Promise.all(userIds.map((id) => getUser(id)));
+  const userMap = new Map(users.filter(Boolean).map((u) => [u!.id, u!.name]));
+
+  // Transform to match TDashboard type
+  return dashboards.map((dashboard) => {
+    const chartCount = dashboard.widgets.filter((widget) => widget.type === "chart").length;
+    const createdByName = dashboard.createdBy ? userMap.get(dashboard.createdBy) : undefined;
+
+    return {
+      id: dashboard.id,
+      name: dashboard.name,
+      description: dashboard.description || undefined,
+      status: dashboard.status,
+      owners: [], // TODO: Fetch owners if needed
+      lastModified: dashboard.updatedAt.toISOString(),
+      createdAt: dashboard.createdAt.toISOString(),
+      updatedAt: dashboard.updatedAt.toISOString(),
+      createdBy: dashboard.createdBy || undefined,
+      createdByName,
+      chartCount,
+      isFavorite: false, // TODO: Add favorite functionality if needed
+      widgets: dashboard.widgets.map((widget) => ({
+        id: widget.id,
+        type: widget.type as "chart" | "markdown" | "header" | "divider",
+        title: widget.title || undefined,
+        chartId: widget.chartId || undefined,
+        layout: widget.layout as { x: number; y: number; w: number; h: number },
+      })),
+    };
+  });
+});
+
+/**
+ * Fetches all charts for the given environment
+ */
+export const getCharts = reactCache(async (environmentId: string): Promise<TChart[]> => {
+  const { project } = await getEnvironmentAuth(environmentId);
+
+  const charts = await prisma.chart.findMany({
+    where: { projectId: project.id },
+    orderBy: { createdAt: "desc" },
+    include: {
+      widgets: {
+        select: {
+          dashboardId: true,
+        },
+      },
+    },
+  });
+
+  // Fetch user names for createdBy fields
+  const userIds = [...new Set(charts.map((c) => c.createdBy).filter(Boolean) as string[])];
+  const users = await Promise.all(userIds.map((id) => getUser(id)));
+  const userMap = new Map(users.filter(Boolean).map((u) => [u!.id, u!.name]));
+
+  // Transform to match TChart type
+  return charts.map((chart) => {
+    const createdByName = chart.createdBy ? userMap.get(chart.createdBy) : undefined;
+
+    return {
+      id: chart.id,
+      name: chart.name,
+      type: chart.type as TChart["type"],
+      dataset: "FeedbackRecords", // TODO: Make this dynamic if needed
+      owners: [], // TODO: Fetch owners if needed
+      lastModified: chart.updatedAt.toISOString(),
+      createdAt: chart.createdAt.toISOString(),
+      updatedAt: chart.updatedAt.toISOString(),
+      createdBy: chart.createdBy || undefined,
+      createdByName,
+      dashboardIds: chart.widgets.map((widget) => widget.dashboardId),
+      config: (chart.config as Record<string, any>) || {},
+    };
+  });
+});
+
+/**
+ * Fetches a single dashboard by ID
+ */
+export const getDashboard = reactCache(
+  async (environmentId: string, dashboardId: string): Promise<TDashboard | null> => {
+    const { project } = await getEnvironmentAuth(environmentId);
+
+    const dashboard = await prisma.dashboard.findFirst({
+      where: {
+        id: dashboardId,
+        projectId: project.id,
+      },
+      include: {
+        widgets: {
+          include: {
+            chart: {
+              select: {
+                id: true,
+                name: true,
+                type: true,
+                query: true,
+                config: true,
+              },
+            },
+          },
+          orderBy: {
+            order: "asc",
+          },
+        },
+      },
+    });
+
+    if (!dashboard) {
+      return null;
+    }
+
+    const chartCount = dashboard.widgets.filter((widget) => widget.type === "chart").length;
+
+    return {
+      id: dashboard.id,
+      name: dashboard.name,
+      description: dashboard.description || undefined,
+      status: dashboard.status,
+      owners: [], // TODO: Fetch owners if needed
+      lastModified: dashboard.updatedAt.toISOString(),
+      createdAt: dashboard.createdAt.toISOString(),
+      updatedAt: dashboard.updatedAt.toISOString(),
+      createdBy: dashboard.createdBy || undefined,
+      createdByName: undefined, // Will be fetched if needed
+      chartCount,
+      isFavorite: false, // TODO: Add favorite functionality if needed
+      widgets: dashboard.widgets.map((widget) => ({
+        id: widget.id,
+        type: widget.type as "chart" | "markdown" | "header" | "divider",
+        title: widget.title || undefined,
+        chartId: widget.chartId || undefined,
+        layout: widget.layout as { x: number; y: number; w: number; h: number },
+        chart: widget.chart
+          ? {
+            id: widget.chart.id,
+            name: widget.chart.name,
+            type: widget.chart.type as TChart["type"],
+            query: widget.chart.query as Record<string, any>,
+            config: (widget.chart.config as Record<string, any>) || {},
+          }
+          : undefined,
+      })),
+    };
+  }
+);

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

@@ -0,0 +1,9 @@
+import { redirect } from "next/navigation";
+
+export default async function AnalysisPage({ params }: { params: Promise<{ environmentId: string }> }) {
+  const { environmentId } = await params;
+  if (!environmentId || environmentId === "undefined") {
+    redirect("/");
+  }
+  redirect(`/environments/${environmentId}/analysis/dashboards`);
+}

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

@@ -0,0 +1,84 @@
+export type TDashboardStatus = "published" | "draft";
+
+export interface TAnalysisUser {
+  id: string;
+  name: string;
+}
+
+export interface TDashboard {
+  id: string;
+  name: string;
+  description?: string;
+  status: TDashboardStatus;
+  owners: TAnalysisUser[];
+  lastModified: string; // ISO Date string
+  createdAt: string; // ISO Date string
+  updatedAt: string; // ISO Date string
+  createdBy?: string; // User ID
+  createdByName?: string; // User name for display
+  chartCount: number;
+  isFavorite: boolean;
+  widgets: TDashboardWidget[];
+}
+
+export interface TDashboardWidget {
+  id: string;
+  type: "chart" | "markdown" | "header" | "divider";
+  title?: string;
+  chartId?: string; // If type is chart
+  layout: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  };
+  chart?: {
+    id: string;
+    name: string;
+    type: TChartType;
+    query: Record<string, any>;
+    config: Record<string, any>;
+  };
+}
+
+export type TChartType =
+  | "area"
+  | "bar"
+  | "line"
+  | "pie"
+  | "big_number"
+  | "big_number_total"
+  | "table"
+  | "funnel"
+  | "map";
+
+export interface TChart {
+  id: string;
+  name: string;
+  type: TChartType;
+  dataset: string;
+  owners: TAnalysisUser[];
+  lastModified: string;
+  createdAt: string; // ISO Date string
+  updatedAt: string; // ISO Date string
+  createdBy?: string; // User ID
+  createdByName?: string; // User name for display
+  dashboardIds: string[];
+  config: Record<string, any>; // Flexible config for specific chart props
+}
+
+export interface TAnalysisState {
+  dashboards: TDashboard[];
+  charts: TChart[];
+  activeDashboard: TDashboard | null;
+  layoutMode: "view" | "edit";
+  isLoading: boolean;
+
+  // Actions
+  setDashboards: (dashboards: TDashboard[]) => void;
+  setCharts: (charts: TChart[]) => void;
+  setActiveDashboard: (dashboard: TDashboard | null) => void;
+  setLayoutMode: (mode: "view" | "edit") => void;
+  addDashboard: (dashboard: TDashboard) => void;
+  updateDashboard: (id: string, updates: Partial<TDashboard>) => void;
+}

apps/web/app/(app)/environments/[environmentId]/analysis/types/index.ts

@@ -0,0 +1 @@
+export * from "./analysis";

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

@@ -8,6 +8,7 @@ import {
   MessageCircle,
   PanelLeftCloseIcon,
   PanelLeftOpenIcon,
+  PieChart,
   RocketIcon,
   UserCircleIcon,
   UserIcon,
@@ -105,6 +106,13 @@ export const MainNavigation = ({
         isActive: pathname?.includes("/surveys"),
         isHidden: false,
       },
+      {
+        name: t("common.analysis"),
+        href: `/environments/${environment.id}/analysis`,
+        icon: PieChart,
+        isActive: pathname?.includes("/analysis"),
+        isHidden: false,
+      },
       {
         href: `/environments/${environment.id}/contacts`,
         name: t("common.contacts"),
@@ -185,7 +193,7 @@ export const MainNavigation = ({
                 size="icon"
                 onClick={toggleSidebar}
                 className={cn(
-                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:ring-0 focus:ring-transparent focus:outline-none"
+                  "rounded-xl bg-slate-50 p-1 text-slate-600 transition-all hover:bg-slate-100 focus:outline-none focus:ring-0 focus:ring-transparent"
                 )}>
                 {isCollapsed ? (
                   <PanelLeftOpenIcon strokeWidth={1.5} />

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

@@ -209,7 +209,7 @@ export const OrganizationBreadcrumb = ({
               )}
               {!isLoadingOrganizations && !loadError && (
                 <>
-                  <DropdownMenuGroup>
+                  <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
                     {organizations.map((org) => (
                       <DropdownMenuCheckboxItem
                         key={org.id}

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

@@ -234,7 +234,7 @@ export const ProjectBreadcrumb = ({
           )}
           {!isLoadingProjects && !loadError && (
             <>
-              <DropdownMenuGroup>
+              <DropdownMenuGroup className="max-h-[300px] overflow-y-auto">
                 {projects.map((proj) => (
                   <DropdownMenuCheckboxItem
                     key={proj.id}

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

@@ -11,6 +11,12 @@ const EnvLayout = async (props: {
   children: React.ReactNode;
 }) => {
   const params = await props.params;
+  const { environmentId } = params;
+
+  if (environmentId === "undefined") {
+    return redirect("/");
+  }
+
   const { children } = props;
 
   // Check session first (required for userId)

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

@@ -58,7 +58,7 @@ async function handleEmailUpdate({
     payload.email = inputEmail;
     await updateBrevoCustomer({ id: ctx.user.id, email: inputEmail });
   } else {
-    await sendVerificationNewEmail(ctx.user.id, inputEmail);
+    await sendVerificationNewEmail(ctx.user.id, inputEmail, ctx.user.locale);
   }
   return payload;
 }

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { ShieldCheckIcon } from "lucide-react";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+
+export const SecurityListTip = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="max-w-4xl">
+      <div className="flex items-center space-x-3 rounded-lg border border-blue-100 bg-blue-50 p-4 text-sm text-blue-900 shadow-sm">
+        <ShieldCheckIcon className="h-5 w-5 flex-shrink-0 text-blue-400" />
+        <p className="text-sm">
+          {t("environments.settings.general.security_list_tip")}{" "}
+          <Link
+            href="https://formbricks.com/security#stay-informed-with-formbricks-security-updates"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="underline hover:text-blue-700">
+            {t("environments.settings.general.security_list_tip_link")}
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+};

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

@@ -12,6 +12,7 @@ import { PageHeader } from "@/modules/ui/components/page-header";
 import { SettingsCard } from "../../components/SettingsCard";
 import { DeleteOrganization } from "./components/DeleteOrganization";
 import { EditOrganizationNameForm } from "./components/EditOrganizationNameForm";
+import { SecurityListTip } from "./components/SecurityListTip";
 
 const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
   const params = await props.params;
@@ -48,6 +49,7 @@ const Page = async (props: { params: Promise<{ environmentId: string }> }) => {
           </Alert>
         </div>
       )}
+      {!IS_FORMBRICKS_CLOUD && <SecurityListTip />}
       <SettingsCard
         title={t("environments.settings.general.organization_name")}
         description={t("environments.settings.general.organization_name_description")}>

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

@@ -58,6 +58,7 @@ export const sendEmbedSurveyPreviewEmailAction = authenticatedActionClient
       ctx.user.email,
       emailHtml,
       survey.environmentId,
+      ctx.user.locale,
       organizationLogoUrl || ""
     );
   });

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

@@ -213,6 +213,7 @@ export const SurveyAnalysisCTA = ({
           isFormbricksCloud={isFormbricksCloud}
           isReadOnly={isReadOnly}
           isStorageConfigured={isStorageConfigured}
+          projectCustomScripts={project.customHeadScripts}
         />
       )}
       <SuccessMessage environment={environment} survey={survey} />

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/share-survey-modal.tsx

@@ -3,6 +3,7 @@
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import {
   Code2Icon,
+  CodeIcon,
   Link2Icon,
   MailIcon,
   QrCodeIcon,
@@ -18,6 +19,7 @@ import { TSurvey } from "@formbricks/types/surveys/types";
 import { TUser } from "@formbricks/types/user";
 import { AnonymousLinksTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/anonymous-links-tab";
 import { AppTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/app-tab";
+import { CustomHtmlTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/custom-html-tab";
 import { DynamicPopupTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/dynamic-popup-tab";
 import { EmailTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/email-tab";
 import { LinkSettingsTab } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/link-settings-tab";
@@ -51,6 +53,7 @@ interface ShareSurveyModalProps {
   isFormbricksCloud: boolean;
   isReadOnly: boolean;
   isStorageConfigured: boolean;
+  projectCustomScripts?: string | null;
 }
 
 export const ShareSurveyModal = ({
@@ -65,6 +68,7 @@ export const ShareSurveyModal = ({
   isFormbricksCloud,
   isReadOnly,
   isStorageConfigured,
+  projectCustomScripts,
 }: ShareSurveyModalProps) => {
   const environmentId = survey.environmentId;
   const [surveyUrl, setSurveyUrl] = useState<string>(getSurveyUrl(survey, publicDomain, "default"));
@@ -191,9 +195,24 @@ export const ShareSurveyModal = ({
         componentType: PrettyUrlTab,
         componentProps: { publicDomain, isReadOnly },
       },
+      {
+        id: ShareSettingsType.CUSTOM_HTML,
+        type: LinkTabsType.SHARE_SETTING,
+        label: t("environments.surveys.share.custom_html.nav_title"),
+        icon: CodeIcon,
+        title: t("environments.surveys.share.custom_html.nav_title"),
+        description: t("environments.surveys.share.custom_html.description"),
+        componentType: CustomHtmlTab,
+        componentProps: { projectCustomScripts, isReadOnly },
+      },
     ];
 
-    return isFormbricksCloud ? tabs.filter((tab) => tab.id !== ShareSettingsType.PRETTY_URL) : tabs;
+    // Filter out tabs that should not be shown on Formbricks Cloud
+    return isFormbricksCloud
+      ? tabs.filter(
+          (tab) => tab.id !== ShareSettingsType.PRETTY_URL && tab.id !== ShareSettingsType.CUSTOM_HTML
+        )
+      : tabs;
   }, [
     t,
     survey,
@@ -207,6 +226,7 @@ export const ShareSurveyModal = ({
     isFormbricksCloud,
     email,
     isStorageConfigured,
+    projectCustomScripts,
   ]);
 
   const getDefaultActiveId = useCallback(() => {

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedModal/custom-html-tab.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { AlertTriangleIcon } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { TSurvey } from "@formbricks/types/surveys/types";
+import { useSurvey } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/context/survey-context";
+import { cn } from "@/lib/cn";
+import { updateSurveyAction } from "@/modules/survey/editor/actions";
+import { Alert, AlertDescription } from "@/modules/ui/components/alert";
+import { Button } from "@/modules/ui/components/button";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormProvider,
+} from "@/modules/ui/components/form";
+import { TabToggle } from "@/modules/ui/components/tab-toggle";
+
+interface CustomHtmlTabProps {
+  projectCustomScripts: string | null | undefined;
+  isReadOnly: boolean;
+}
+
+interface CustomHtmlFormData {
+  customHeadScripts: string;
+  customHeadScriptsMode: TSurvey["customHeadScriptsMode"];
+}
+
+export const CustomHtmlTab = ({ projectCustomScripts, isReadOnly }: CustomHtmlTabProps) => {
+  const { t } = useTranslation();
+  const { survey } = useSurvey();
+  const [isSaving, setIsSaving] = useState(false);
+
+  const form = useForm<CustomHtmlFormData>({
+    defaultValues: {
+      customHeadScripts: survey.customHeadScripts ?? "",
+      customHeadScriptsMode: survey.customHeadScriptsMode ?? "add",
+    },
+  });
+
+  const {
+    handleSubmit,
+    watch,
+    setValue,
+    reset,
+    formState: { isDirty },
+  } = form;
+
+  const scriptsMode = watch("customHeadScriptsMode");
+
+  const onSubmit = async (data: CustomHtmlFormData) => {
+    if (isSaving || isReadOnly) return;
+
+    setIsSaving(true);
+
+    const updatedSurvey: TSurvey = {
+      ...survey,
+      customHeadScripts: data.customHeadScripts || null,
+      customHeadScriptsMode: data.customHeadScriptsMode,
+    };
+
+    const result = await updateSurveyAction(updatedSurvey);
+
+    if (result?.data) {
+      toast.success(t("environments.surveys.share.custom_html.saved_successfully"));
+      reset(data);
+    } else {
+      toast.error(t("common.something_went_wrong_please_try_again"));
+    }
+
+    setIsSaving(false);
+  };
+
+  return (
+    <div className="px-1">
+      <FormProvider {...form}>
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          {/* Mode Toggle */}
+          <div className="space-y-2">
+            <FormLabel>{t("environments.surveys.share.custom_html.script_mode")}</FormLabel>
+            <TabToggle
+              id="custom-scripts-mode"
+              options={[
+                { value: "add", label: t("environments.surveys.share.custom_html.add_to_workspace") },
+                { value: "replace", label: t("environments.surveys.share.custom_html.replace_workspace") },
+              ]}
+              defaultSelected={scriptsMode ?? "add"}
+              onChange={(value) => setValue("customHeadScriptsMode", value, { shouldDirty: true })}
+              disabled={isReadOnly}
+            />
+            <p className="text-sm text-slate-500">
+              {scriptsMode === "add"
+                ? t("environments.surveys.share.custom_html.add_mode_description")
+                : t("environments.surveys.share.custom_html.replace_mode_description")}
+            </p>
+          </div>
+
+          {/* Workspace Scripts Preview */}
+          {projectCustomScripts && (
+            <div className={scriptsMode === "replace" ? "opacity-50" : ""}>
+              <FormLabel>{t("environments.surveys.share.custom_html.workspace_scripts_label")}</FormLabel>
+              <div className="mt-2 max-h-32 overflow-auto rounded-md border border-slate-200 bg-slate-50 p-3">
+                <pre className="font-mono text-xs whitespace-pre-wrap text-slate-600">
+                  {projectCustomScripts}
+                </pre>
+              </div>
+            </div>
+          )}
+
+          {!projectCustomScripts && (
+            <div className="rounded-md border border-slate-200 bg-slate-50 p-3">
+              <p className="text-sm text-slate-500">
+                {t("environments.surveys.share.custom_html.no_workspace_scripts")}
+              </p>
+            </div>
+          )}
+
+          {/* Survey Scripts */}
+          <FormField
+            control={form.control}
+            name="customHeadScripts"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("environments.surveys.share.custom_html.survey_scripts_label")}</FormLabel>
+                <FormDescription>
+                  {t("environments.surveys.share.custom_html.survey_scripts_description")}
+                </FormDescription>
+                <FormControl>
+                  <textarea
+                    rows={8}
+                    placeholder={t("environments.surveys.share.custom_html.placeholder")}
+                    className={cn(
+                      "focus:border-brand-dark flex w-full rounded-md border border-slate-300 bg-white px-3 py-2 font-mono text-xs text-slate-800 placeholder:text-slate-400 focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                    )}
+                    {...field}
+                    disabled={isReadOnly}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          {/* Save Button */}
+          <Button type="submit" disabled={isSaving || isReadOnly || !isDirty}>
+            {isSaving ? t("common.saving") : t("common.save")}
+          </Button>
+          {/* Security Warning */}
+          <Alert variant="warning" className="flex items-start gap-2">
+            <AlertTriangleIcon className="mt-0.5 h-4 w-4 shrink-0" />
+            <AlertDescription>
+              {t("environments.surveys.share.custom_html.security_warning")}
+            </AlertDescription>
+          </Alert>
+        </form>
+      </FormProvider>
+    </div>
+  );
+};

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

@@ -13,6 +13,7 @@ export enum ShareViaType {
 export enum ShareSettingsType {
   LINK_SETTINGS = "link-settings",
   PRETTY_URL = "pretty-url",
+  CUSTOM_HTML = "custom-html",
 }
 
 export enum LinkTabsType {

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

@@ -21,6 +21,7 @@ import {
   ListOrderedIcon,
   MessageSquareTextIcon,
   MousePointerClickIcon,
+  NetworkIcon,
   PieChartIcon,
   Rows3Icon,
   SmartphoneIcon,
@@ -99,6 +100,7 @@ const elementIcons = {
   action: MousePointerClickIcon,
   country: FlagIcon,
   url: LinkIcon,
+  ipAddress: NetworkIcon,
 
   // others
   Language: LanguagesIcon,
@@ -190,7 +192,7 @@ export const ElementsComboBox = ({ options, selected, onChangeValue }: ElementCo
             value={inputValue}
             onValueChange={setInputValue}
             placeholder={open ? `${t("common.search")}...` : t("common.select_filter")}
-            className="max-w-full grow border-none p-0 pl-2 text-sm shadow-none outline-none ring-offset-transparent focus:border-none focus:shadow-none focus:outline-none focus:ring-offset-0"
+            className="max-w-full grow border-none p-0 pl-2 text-sm shadow-none ring-offset-transparent outline-none focus:border-none focus:shadow-none focus:ring-offset-0 focus:outline-none"
           />
         )}
         <Button

apps/web/app/api/(internal)/pipeline/lib/handleIntegrations.test.ts

@@ -82,6 +82,7 @@ const mockPipelineInput = {
       },
       country: "USA",
       action: "Action Name",
+      ipAddress: "203.0.113.7",
     } as TResponseMeta,
     personAttributes: {},
     singleUseId: null,
@@ -346,7 +347,7 @@ describe("handleIntegrations", () => {
       expect(airtableWriteData).toHaveBeenCalledTimes(1);
       // Adjust expectations for metadata and recalled question
       const expectedMetadataString =
-        "Source: web\nURL: http://example.com\nBrowser: Chrome\nOS: Mac OS\nDevice: Desktop\nCountry: USA\nAction: Action Name";
+        "Source: web\nURL: http://example.com\nBrowser: Chrome\nOS: Mac OS\nDevice: Desktop\nCountry: USA\nAction: Action Name\nIP Address: 203.0.113.7";
       expect(airtableWriteData).toHaveBeenCalledWith(
         mockAirtableIntegration.config.key,
         mockAirtableIntegration.config.data[0],

apps/web/app/api/(internal)/pipeline/lib/handleIntegrations.ts

@@ -31,6 +31,7 @@ const convertMetaObjectToString = (metadata: TResponseMeta): string => {
   if (metadata.userAgent?.device) result.push(`Device: ${metadata.userAgent.device}`);
   if (metadata.country) result.push(`Country: ${metadata.country}`);
   if (metadata.action) result.push(`Action: ${metadata.action}`);
+  if (metadata.ipAddress) result.push(`IP Address: ${metadata.ipAddress}`);
 
   // Join all the elements in the result array with a newline for formatting
   return result.join("\n");

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

@@ -1,5 +1,6 @@
 import { PipelineTriggers, Webhook } from "@prisma/client";
 import { headers } from "next/headers";
+import { v7 as uuidv7 } from "uuid";
 import { prisma } from "@formbricks/database";
 import { logger } from "@formbricks/logger";
 import { ResourceNotFoundError } from "@formbricks/types/errors";
@@ -8,6 +9,7 @@ import { ZPipelineInput } from "@/app/api/(internal)/pipeline/types/pipelines";
 import { responses } from "@/app/lib/api/response";
 import { transformErrorToDetails } from "@/app/lib/api/validator";
 import { CRON_SECRET } from "@/lib/constants";
+import { generateStandardWebhookSignature } from "@/lib/crypto";
 import { getIntegrations } from "@/lib/integration/service";
 import { getOrganizationByEnvironmentId } from "@/lib/organization/service";
 import { getResponseCountBySurveyId } from "@/lib/response/service";
@@ -90,28 +92,50 @@ export const POST = async (request: Request) => {
     ]);
   };
 
-  const webhookPromises = webhooks.map((webhook) =>
-    fetchWithTimeout(webhook.url, {
-      method: "POST",
-      headers: { "content-type": "application/json" },
-      body: JSON.stringify({
-        webhookId: webhook.id,
-        event,
-        data: {
-          ...response,
-          survey: {
-            title: survey.name,
-            type: survey.type,
-            status: survey.status,
-            createdAt: survey.createdAt,
-            updatedAt: survey.updatedAt,
-          },
+  const webhookPromises = webhooks.map((webhook) => {
+    const body = JSON.stringify({
+      webhookId: webhook.id,
+      event,
+      data: {
+        ...response,
+        survey: {
+          title: survey.name,
+          type: survey.type,
+          status: survey.status,
+          createdAt: survey.createdAt,
+          updatedAt: survey.updatedAt,
         },
-      }),
+      },
+    });
+
+    // Generate Standard Webhooks headers
+    const webhookMessageId = uuidv7();
+    const webhookTimestamp = Math.floor(Date.now() / 1000);
+
+    const requestHeaders: Record<string, string> = {
+      "content-type": "application/json",
+      "webhook-id": webhookMessageId,
+      "webhook-timestamp": webhookTimestamp.toString(),
+    };
+
+    // Add signature if webhook has a secret configured
+    if (webhook.secret) {
+      requestHeaders["webhook-signature"] = generateStandardWebhookSignature(
+        webhookMessageId,
+        webhookTimestamp,
+        body,
+        webhook.secret
+      );
+    }
+
+    return fetchWithTimeout(webhook.url, {
+      method: "POST",
+      headers: requestHeaders,
+      body,
     }).catch((error) => {
       logger.error({ error, url: request.url }, `Webhook call to ${webhook.url} failed`);
-    })
-  );
+    });
+  });
 
   if (event === "responseFinished") {
     // Fetch integrations and responseCount in parallel
@@ -191,7 +215,14 @@ export const POST = async (request: Request) => {
     }
 
     const emailPromises = usersWithNotifications.map((user) =>
-      sendResponseFinishedEmail(user.email, environmentId, survey, response, responseCount).catch((error) => {
+      sendResponseFinishedEmail(
+        user.email,
+        user.locale,
+        environmentId,
+        survey,
+        response,
+        responseCount
+      ).catch((error) => {
         logger.error(
           { error, url: request.url, userEmail: user.email },
           `Failed to send email to ${user.email}`

apps/web/app/api/analytics/_lib/cube-client.ts

@@ -0,0 +1,51 @@
+import cubejs from "@cubejs-client/core";
+
+/**
+ * Cube.js client for executing queries
+ * No authentication - for POC purposes only
+ */
+
+// Cube API configuration - defaults to localhost:4000, can be overridden via env var
+// Automatically append /cubejs-api/v1 if not present
+const getApiUrl = () => {
+  const baseUrl = process.env.CUBEJS_API_URL || "http://localhost:4000";
+  // If the URL already contains /cubejs-api/v1, use it as-is
+  if (baseUrl.includes("/cubejs-api/v1")) {
+    return baseUrl;
+  }
+  // Otherwise, append the path
+  return `${baseUrl.replace(/\/$/, "")}/cubejs-api/v1`;
+};
+
+const API_URL = getApiUrl();
+
+/**
+ * Create a Cube.js client instance without authentication
+ * For POC - Cube.js must be configured to allow unauthenticated requests
+ */
+export function createCubeClient() {
+  // Empty string = no authentication token
+  return cubejs("", {
+    apiUrl: API_URL,
+  });
+}
+
+/**
+ * Execute a Cube.js query and return the table pivot data
+ * @param query - The Cube.js query object
+ * @returns Array of row objects with measure/dimension values
+ */
+export async function executeQuery(query: any) {
+  try {
+    const client = createCubeClient();
+    console.log("Executing Cube.js query:", JSON.stringify(query, null, 2));
+    console.log("Cube.js API URL:", API_URL);
+    const resultSet = await client.load(query);
+    return resultSet.tablePivot();
+  } catch (error: any) {
+    console.error("Cube.js query error:", error);
+    console.error("Query that failed:", JSON.stringify(query, null, 2));
+    console.error("API URL used:", API_URL);
+    throw error;
+  }
+}

apps/web/app/api/analytics/_lib/schema-parser.ts

@@ -0,0 +1,286 @@
+import fs from "fs";
+import path from "path";
+
+/**
+ * Parses the Cube.js schema file to extract measures and dimensions
+ * This keeps the schema as the single source of truth for AI query generation
+ */
+
+interface MeasureInfo {
+  name: string;
+  description: string;
+}
+
+interface DimensionInfo {
+  name: string;
+  description: string;
+  type: "string" | "number" | "time";
+}
+
+// Path to schema file - self-contained within the analytics folder
+const SCHEMA_FILE_PATH = path.join(process.cwd(), "app", "api", "analytics", "_schema", "FeedbackRecords.js");
+
+/**
+ * Extract description from a schema property object
+ */
+function extractDescription(objStr: string): string {
+  const descMatch = objStr.match(/description:\s*`([^`]+)`/);
+  return descMatch ? descMatch[1] : "";
+}
+
+/**
+ * Extract type from a dimension object
+ */
+function extractType(objStr: string): "string" | "number" | "time" {
+  const typeMatch = objStr.match(/type:\s*`(string|number|time)`/);
+  return (typeMatch?.[1] as "string" | "number" | "time") || "string";
+}
+
+/**
+ * Helper to extract content inside the first matching brace block
+ */
+function extractInnerBlockContent(content: string, startRegex: RegExp): string | null {
+  const match = content.match(startRegex);
+  if (!match) return null;
+
+  // Backtrack to find the opening brace in the match
+  const braceIndex = match[0].lastIndexOf("{");
+  if (braceIndex === -1) return null; // Should not happen given regex usage
+
+  // Actually we can just start scanning from the end of the match if the regex ends with {
+  // But let's be safer: start counting from the opening brace.
+  const absoluteStartIndex = match.index! + braceIndex;
+
+  let braceCount = 1;
+  let i = absoluteStartIndex + 1;
+
+  while (braceCount > 0 && i < content.length) {
+    if (content[i] === "{") braceCount++;
+    else if (content[i] === "}") braceCount--;
+    i++;
+  }
+
+  if (braceCount === 0) {
+    return content.substring(absoluteStartIndex + 1, i - 1);
+  }
+
+  return null;
+}
+
+/**
+ * Parse measures from the schema file
+ */
+function parseMeasures(schemaContent: string): MeasureInfo[] {
+  const measures: MeasureInfo[] = [];
+
+  const measuresBlock = extractInnerBlockContent(schemaContent, /measures:\s*\{/);
+  if (!measuresBlock) return measures;
+
+  // Match each measure: measureName: { ... }
+  const measureRegex = /(\w+):\s*\{/g;
+  let match;
+
+  while ((match = measureRegex.exec(measuresBlock)) !== null) {
+    const name = match[1];
+    const startIndex = match.index + match[0].length;
+
+    // Find the matching closing brace
+    let braceCount = 1;
+    let endIndex = startIndex;
+
+    while (braceCount > 0 && endIndex < measuresBlock.length) {
+      if (measuresBlock[endIndex] === "{") braceCount++;
+      if (measuresBlock[endIndex] === "}") braceCount--;
+      endIndex++;
+    }
+
+    const body = measuresBlock.substring(startIndex, endIndex - 1);
+    const description = extractDescription(body);
+
+    if (description) {
+      measures.push({ name, description });
+    }
+  }
+
+  return measures;
+}
+
+/**
+ * Parse dimensions from a specific cube
+ */
+function parseDimensionsFromCube(cubeContent: string, cubeName: string): DimensionInfo[] {
+  const dimensions: DimensionInfo[] = [];
+
+  const dimensionsBlock = extractInnerBlockContent(cubeContent, /dimensions:\s*\{/);
+  if (!dimensionsBlock) return dimensions;
+
+  // Match each dimension: dimensionName: { ... }
+  const dimensionRegex = /(\w+):\s*\{/g;
+  let match;
+
+  while ((match = dimensionRegex.exec(dimensionsBlock)) !== null) {
+    const name = match[1];
+    const startIndex = match.index + match[0].length;
+
+    // Find the matching closing brace
+    let braceCount = 1;
+    let endIndex = startIndex;
+
+    while (braceCount > 0 && endIndex < dimensionsBlock.length) {
+      if (dimensionsBlock[endIndex] === "{") braceCount++;
+      if (dimensionsBlock[endIndex] === "}") braceCount--;
+      endIndex++;
+    }
+
+    const body = dimensionsBlock.substring(startIndex, endIndex - 1);
+    const description = extractDescription(body);
+    const type = extractType(body);
+
+    // Skip primaryKey dimensions (like 'id') and internal dimensions
+    if (body.includes("primaryKey: true") || name === "feedbackRecordId") {
+      continue;
+    }
+
+    if (description) {
+      dimensions.push({
+        name: cubeName === "FeedbackRecords" ? name : `${cubeName}.${name}`,
+        description,
+        type,
+      });
+    }
+  }
+
+  return dimensions;
+}
+
+/**
+ * Parse dimensions from the schema file
+ */
+function parseDimensions(schemaContent: string): DimensionInfo[] {
+  const dimensions: DimensionInfo[] = [];
+
+  // Extract dimensions from FeedbackRecords cube
+  const feedbackRecordsMatch = schemaContent.match(/cube\(`FeedbackRecords`,\s*\{([\s\S]*?)\n\}\);/);
+  if (feedbackRecordsMatch) {
+    const feedbackRecordsDimensions = parseDimensionsFromCube(feedbackRecordsMatch[1], "FeedbackRecords");
+    dimensions.push(...feedbackRecordsDimensions);
+  }
+
+  // Extract dimensions from TopicsUnnested cube
+  const topicsUnnestedMatch = schemaContent.match(/cube\(`TopicsUnnested`,\s*\{([\s\S]*?)\n\}\);/);
+  if (topicsUnnestedMatch) {
+    const topicsDimensions = parseDimensionsFromCube(topicsUnnestedMatch[1], "TopicsUnnested");
+    dimensions.push(...topicsDimensions);
+  }
+
+  return dimensions;
+}
+
+/**
+ * Read and parse the schema file
+ */
+export function parseSchemaFile(): {
+  measures: MeasureInfo[];
+  dimensions: DimensionInfo[];
+} {
+  try {
+    const schemaContent = fs.readFileSync(SCHEMA_FILE_PATH, "utf-8");
+    const measures = parseMeasures(schemaContent);
+    const dimensions = parseDimensions(schemaContent);
+
+    return { measures, dimensions };
+  } catch (error) {
+    console.error("Error parsing schema file:", error);
+    // Fallback to empty arrays if parsing fails
+    return { measures: [], dimensions: [] };
+  }
+}
+
+/**
+ * Generate the schema context string for AI query generation
+ */
+export function generateSchemaContext(): string {
+  const { measures, dimensions } = parseSchemaFile();
+  const CUBE_NAME = "FeedbackRecords";
+
+  const measuresList = measures.map((m) => `- ${CUBE_NAME}.${m.name} - ${m.description}`).join("\n");
+
+  const dimensionsList = dimensions
+    .map((d) => {
+      const typeLabel = d.type === "time" ? " (time dimension)" : ` (${d.type})`;
+      // Dimensions from TopicsUnnested already have the cube prefix
+      const fullName = d.name.includes(".") ? d.name : `${CUBE_NAME}.${d.name}`;
+      return `- ${fullName} - ${d.description}${typeLabel}`;
+    })
+    .join("\n");
+
+  const categoricalDimensions = dimensions
+    .filter(
+      (d) =>
+        d.type === "string" &&
+        !d.name.includes("responseId") &&
+        !d.name.includes("userIdentifier") &&
+        !d.name.includes("feedbackRecordId")
+    )
+    .map((d) => (d.name.includes(".") ? d.name : `${CUBE_NAME}.${d.name}`))
+    .join(", ");
+
+  return `
+You are a CubeJS query generator. Your task is to convert natural language requests into valid CubeJS query JSON objects.
+
+Available Cubes: ${CUBE_NAME}, TopicsUnnested
+
+MEASURES (use these in the "measures" array):
+${measuresList}
+
+DIMENSIONS (use these in the "dimensions" array):
+${dimensionsList}
+
+TIME DIMENSIONS:
+- ${CUBE_NAME}.collectedAt can be used with granularity: 'day', 'week', 'month', 'year'
+- Use "timeDimensions" array for time-based queries with dateRange like "last 7 days", "last 30 days", "this month", etc.
+
+CHART TYPE SUGGESTIONS:
+- If query has timeDimensions → suggest "bar" or "line"
+- If query has categorical dimensions (${categoricalDimensions}) → suggest "donut" or "bar"
+- If query has only measures → suggest "kpi"
+- If query compares multiple measures → suggest "bar"
+
+FILTERS:
+- Use "filters" array to include/exclude records based on dimension values
+- Filter format: { "member": "CubeName.dimensionName", "operator": "operator" } OR { "member": "CubeName.dimensionName", "operator": "operator", "values": [...] }
+- Common operators:
+  * "set" - dimension is not null/empty (Set "values" to null)
+    Example: { "member": "${CUBE_NAME}.emotion", "operator": "set", "values": null }
+  * "notSet" - dimension is null/empty (Set "values" to null)
+    Example: { "member": "${CUBE_NAME}.emotion", "operator": "notSet", "values": null }
+  * "equals" - exact match (REQUIRES "values" field)
+    Example: { "member": "${CUBE_NAME}.emotion", "operator": "equals", "values": ["happy"] }
+  * "notEquals" - not equal (REQUIRES "values" field)
+    Example: { "member": "${CUBE_NAME}.emotion", "operator": "notEquals", "values": ["sad"] }
+  * "contains" - contains text (REQUIRES "values" field)
+    Example: { "member": "${CUBE_NAME}.emotion", "operator": "contains", "values": ["happy"] }
+- Examples for common user requests:
+  * "only records with emotion" or "for records that have emotion" → { "member": "${CUBE_NAME}.emotion", "operator": "set", "values": null }
+  * "exclude records without emotion" or "do not include records without emotion" → { "member": "${CUBE_NAME}.emotion", "operator": "set", "values": null }
+  * "exclude records with emotion" or "do not include records with emotion" → { "member": "${CUBE_NAME}.emotion", "operator": "notSet", "values": null }
+  * "only happy emotions" → { "member": "${CUBE_NAME}.emotion", "operator": "equals", "values": ["happy"] }
+
+IMPORTANT RULES:
+1. Always return valid JSON only, no markdown or code blocks
+2. Use exact measure/dimension names as listed above
+3. Include "chartType" field: "bar", "line", "donut", "kpi", or "area"
+4. For time queries, use timeDimensions array with granularity and dateRange
+5. Return format: { "measures": [...], "dimensions": [...], "timeDimensions": [...], "filters": [...], "chartType": "..." }
+6. If user asks about trends over time, use timeDimensions
+7. If user asks "by X", add X as a dimension
+8. If user asks for counts or totals, use ${CUBE_NAME}.count
+9. If user asks for NPS, use ${CUBE_NAME}.npsScore
+10. If user asks about topics, use TopicsUnnested.topic (NOT ${CUBE_NAME}.topic)
+11. CRITICAL: If user says "only records with X", "exclude records without X", or "for records that have X", add a filter with operator "set" for that dimension
+12. CRITICAL: If user says "exclude records with X", "do not include records with X", or "without X", add a filter with operator "notSet" for that dimension
+13. Always include filters when user explicitly mentions including/excluding records based on dimension values
+`.trim();
+}
+
+export const CUBE_NAME = "FeedbackRecords";

apps/web/app/api/analytics/_lib/types.ts

@@ -0,0 +1,39 @@
+/**
+ * TypeScript types for the Analytics API
+ */
+
+export interface TimeDimension {
+  dimension: string;
+  granularity?: "hour" | "day" | "week" | "month" | "quarter" | "year";
+  dateRange?: string | string[];
+}
+
+export interface Filter {
+  member: string;
+  operator:
+    | "equals"
+    | "notEquals"
+    | "contains"
+    | "notContains"
+    | "set"
+    | "notSet"
+    | "gt"
+    | "gte"
+    | "lt"
+    | "lte";
+  values?: string[] | null;
+}
+
+export interface CubeQuery {
+  measures: string[];
+  dimensions?: string[];
+  timeDimensions?: TimeDimension[];
+  filters?: Filter[];
+}
+
+export interface AnalyticsResponse {
+  query: CubeQuery;
+  chartType: "bar" | "line" | "donut" | "kpi" | "area" | "pie";
+  data?: Record<string, any>[];
+  error?: string;
+}

apps/web/app/api/analytics/_schema/FeedbackRecords.js

@@ -0,0 +1,156 @@
+cube(`FeedbackRecords`, {
+  sql: `SELECT * FROM feedback_records`,
+
+  measures: {
+    count: {
+      type: `count`,
+      description: `Total number of feedback responses`,
+    },
+
+    promoterCount: {
+      type: `count`,
+      filters: [{ sql: `${CUBE}.value_number >= 9` }],
+      description: `Number of promoters (NPS score 9-10)`,
+    },
+
+    detractorCount: {
+      type: `count`,
+      filters: [{ sql: `${CUBE}.value_number <= 6` }],
+      description: `Number of detractors (NPS score 0-6)`,
+    },
+
+    passiveCount: {
+      type: `count`,
+      filters: [{ sql: `${CUBE}.value_number >= 7 AND ${CUBE}.value_number <= 8` }],
+      description: `Number of passives (NPS score 7-8)`,
+    },
+
+    npsScore: {
+      type: `number`,
+      sql: `
+        CASE 
+          WHEN COUNT(*) = 0 THEN 0
+          ELSE ROUND(
+            (
+              (COUNT(CASE WHEN ${CUBE}.value_number >= 9 THEN 1 END)::numeric - 
+               COUNT(CASE WHEN ${CUBE}.value_number <= 6 THEN 1 END)::numeric) 
+              / COUNT(*)::numeric
+            ) * 100,
+            2
+          )
+        END
+      `,
+      description: `Net Promoter Score: ((Promoters - Detractors) / Total) * 100`,
+    },
+
+    averageScore: {
+      type: `avg`,
+      sql: `${CUBE}.value_number`,
+      description: `Average NPS score`,
+    },
+  },
+
+  dimensions: {
+    id: {
+      sql: `id`,
+      type: `string`,
+      primaryKey: true,
+    },
+
+    sentiment: {
+      sql: `sentiment`,
+      type: `string`,
+      description: `Sentiment extracted from metadata JSONB field`,
+    },
+
+    sourceType: {
+      sql: `source_type`,
+      type: `string`,
+      description: `Source type of the feedback (e.g., nps_campaign, survey)`,
+    },
+
+    sourceName: {
+      sql: `source_name`,
+      type: `string`,
+      description: `Human-readable name of the source`,
+    },
+
+    fieldType: {
+      sql: `field_type`,
+      type: `string`,
+      description: `Type of feedback field (e.g., nps, text, rating)`,
+    },
+
+    collectedAt: {
+      sql: `collected_at`,
+      type: `time`,
+      description: `Timestamp when the feedback was collected`,
+    },
+
+    npsValue: {
+      sql: `value_number`,
+      type: `number`,
+      description: `Raw NPS score value (0-10)`,
+    },
+
+    responseId: {
+      sql: `response_id`,
+      type: `string`,
+      description: `Unique identifier linking related feedback records`,
+    },
+
+    userIdentifier: {
+      sql: `user_identifier`,
+      type: `string`,
+      description: `Identifier of the user who provided feedback`,
+    },
+
+    emotion: {
+      sql: `emotion`,
+      type: `string`,
+      description: `Emotion extracted from metadata JSONB field`,
+    },
+  },
+
+  joins: {
+    TopicsUnnested: {
+      sql: `${CUBE}.id = ${TopicsUnnested}.feedback_record_id`,
+      relationship: `hasMany`,
+    },
+  },
+});
+
+cube(`TopicsUnnested`, {
+  sql: `
+    SELECT 
+      fr.id as feedback_record_id,
+      topic_elem.topic
+    FROM feedback_records fr
+    CROSS JOIN LATERAL jsonb_array_elements_text(COALESCE(fr.metadata->'topics', '[]'::jsonb)) AS topic_elem(topic)
+  `,
+
+  measures: {
+    count: {
+      type: `count`,
+    },
+  },
+
+  dimensions: {
+    id: {
+      sql: `feedback_record_id || '-' || topic`,
+      type: `string`,
+      primaryKey: true,
+    },
+
+    feedbackRecordId: {
+      sql: `feedback_record_id`,
+      type: `string`,
+    },
+
+    topic: {
+      sql: `topic`,
+      type: `string`,
+      description: `Individual topic from the topics array`,
+    },
+  },
+});

apps/web/app/api/analytics/query/route.ts

@@ -0,0 +1,246 @@
+import { NextRequest, NextResponse } from "next/server";
+import OpenAI from "openai";
+import { z } from "zod";
+import { executeQuery } from "../_lib/cube-client";
+import { CUBE_NAME, generateSchemaContext } from "../_lib/schema-parser";
+
+const schema = z.object({
+  measures: z.array(z.string()).describe("List of measures to query"),
+  dimensions: z.array(z.string()).nullable().describe("List of dimensions to query"),
+  timeDimensions: z
+    .array(
+      z.object({
+        dimension: z.string(),
+        granularity: z.enum(["day", "week", "month", "year"]).nullable(),
+        dateRange: z.string().nullable(),
+      })
+    )
+    .nullable()
+    .describe("Time dimensions with granularity and date range"),
+  chartType: z
+    .enum(["bar", "line", "donut", "kpi", "area", "pie"])
+    .describe("Suggested chart type for visualization"),
+  filters: z
+    .array(
+      z.object({
+        member: z.string(),
+        operator: z.enum([
+          "equals",
+          "notEquals",
+          "contains",
+          "notContains",
+          "set",
+          "notSet",
+          "gt",
+          "gte",
+          "lt",
+          "lte",
+        ]),
+        values: z.array(z.string()).nullable(),
+      })
+    )
+    .nullable()
+    .describe("Filters to apply to the query"),
+});
+
+// Generate schema context dynamically from the schema file
+const SCHEMA_CONTEXT = generateSchemaContext();
+
+// JSON Schema for OpenAI structured outputs (manually created to avoid zod-to-json-schema dependency)
+const jsonSchema = {
+  type: "object",
+  additionalProperties: false,
+  properties: {
+    measures: {
+      type: "array",
+      items: { type: "string" },
+      description: "List of measures to query",
+    },
+    dimensions: {
+      anyOf: [{ type: "array", items: { type: "string" } }, { type: "null" }],
+      description: "List of dimensions to query",
+    },
+    timeDimensions: {
+      anyOf: [
+        {
+          type: "array",
+          items: {
+            type: "object",
+            additionalProperties: false,
+            properties: {
+              dimension: { type: "string" },
+              granularity: {
+                anyOf: [{ type: "string", enum: ["day", "week", "month", "year"] }, { type: "null" }],
+              },
+              dateRange: {
+                anyOf: [{ type: "string" }, { type: "null" }],
+              },
+            },
+            required: ["dimension", "granularity", "dateRange"],
+          },
+        },
+        { type: "null" },
+      ],
+      description: "Time dimensions with granularity and date range",
+    },
+    chartType: {
+      type: "string",
+      enum: ["bar", "line", "donut", "kpi", "area", "pie"],
+      description: "Suggested chart type for visualization",
+    },
+    filters: {
+      anyOf: [
+        {
+          type: "array",
+          items: {
+            type: "object",
+            additionalProperties: false,
+            properties: {
+              member: { type: "string" },
+              operator: {
+                type: "string",
+                enum: [
+                  "equals",
+                  "notEquals",
+                  "contains",
+                  "notContains",
+                  "set",
+                  "notSet",
+                  "gt",
+                  "gte",
+                  "lt",
+                  "lte",
+                ],
+              },
+              values: {
+                anyOf: [{ type: "array", items: { type: "string" } }, { type: "null" }],
+              },
+            },
+            required: ["member", "operator", "values"],
+          },
+        },
+        { type: "null" },
+      ],
+      description: "Filters to apply to the query",
+    },
+  },
+  required: ["measures", "dimensions", "timeDimensions", "chartType", "filters"],
+} as const;
+
+// Initialize OpenAI client
+const getOpenAIClient = () => {
+  if (!process.env.OPENAI_API_KEY) {
+    throw new Error("OPENAI_API_KEY is not configured");
+  }
+  return new OpenAI({
+    apiKey: process.env.OPENAI_API_KEY,
+  });
+};
+
+export async function POST(request: NextRequest) {
+  try {
+    const { prompt, executeQuery: shouldExecuteQuery = true } = await request.json();
+
+    if (!prompt || typeof prompt !== "string") {
+      return NextResponse.json({ error: "Prompt is required and must be a string" }, { status: 400 });
+    }
+
+    const openai = getOpenAIClient();
+
+    // Generate Cube.js query using OpenAI structured outputs
+    const completion = await openai.chat.completions.create({
+      model: "gpt-4o-mini",
+      messages: [
+        { role: "system", content: SCHEMA_CONTEXT },
+        { role: "user", content: `User request: "${prompt}"` },
+      ],
+      tools: [
+        {
+          type: "function",
+          function: {
+            name: "generate_cube_query",
+            description: "Generate a Cube.js query based on the user request",
+            parameters: jsonSchema,
+            strict: true, // Enable structured outputs
+          },
+        },
+      ],
+      tool_choice: { type: "function", function: { name: "generate_cube_query" } },
+    });
+
+    const toolCall = completion.choices[0]?.message?.tool_calls?.[0];
+    if (toolCall?.function.name !== "generate_cube_query") {
+      throw new Error("Failed to generate structured output from OpenAI");
+    }
+
+    const query = JSON.parse(toolCall.function.arguments);
+
+    // Validate with zod schema (for type safety)
+    const validatedQuery = schema.parse(query);
+
+    // Validate required fields (measures should minimally be present if not specified, default to count)
+    if (!validatedQuery.measures || validatedQuery.measures.length === 0) {
+      validatedQuery.measures = [`${CUBE_NAME}.count`];
+    }
+
+    // Extract chartType (for UI purposes only, not part of CubeJS query)
+    const { chartType, ...cubeQuery } = validatedQuery;
+
+    // Clean up null/empty values to conform to CubeJS expectations
+    if (
+      cubeQuery.dimensions === null ||
+      (Array.isArray(cubeQuery.dimensions) && cubeQuery.dimensions.length === 0)
+    ) {
+      delete (cubeQuery as any).dimensions;
+    }
+    if (!cubeQuery.filters || cubeQuery.filters.length === 0) {
+      delete (cubeQuery as any).filters;
+    } else {
+      // Clean up null values in filters
+      cubeQuery.filters = cubeQuery.filters.map((f: any) => {
+        const newFilter: any = { ...f };
+        if (newFilter.values === null) delete newFilter.values;
+        return newFilter;
+      });
+    }
+    if (cubeQuery.timeDimensions === null) {
+      delete (cubeQuery as any).timeDimensions;
+    } else if (Array.isArray(cubeQuery.timeDimensions)) {
+      // Filter out null properties in timeDimensions objects
+      cubeQuery.timeDimensions = cubeQuery.timeDimensions.map((td: any) => {
+        const newTd: any = { ...td };
+        if (newTd.granularity === null) delete newTd.granularity;
+        if (newTd.dateRange === null) delete newTd.dateRange;
+        return newTd;
+      });
+    }
+
+    // Execute query if requested (default: true)
+    let data: Record<string, any>[] | undefined;
+    if (shouldExecuteQuery) {
+      try {
+        data = await executeQuery(cubeQuery);
+      } catch (queryError: any) {
+        console.error("Error executing Cube.js query:", queryError);
+        // Return the query even if execution fails, so client can retry
+        return NextResponse.json(
+          {
+            query: cubeQuery,
+            chartType,
+            error: `Failed to execute query: ${queryError.message || "Unknown error"}`,
+          },
+          { status: 500 }
+        );
+      }
+    }
+
+    return NextResponse.json({
+      query: cubeQuery,
+      chartType,
+      data,
+    });
+  } catch (error: any) {
+    console.error("Error generating query:", error);
+    return NextResponse.json({ error: error.message || "Failed to generate query" }, { status: 500 });
+  }
+}

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

@@ -11,6 +11,7 @@ import { transformErrorToDetails } from "@/app/lib/api/validator";
 import { withV1ApiWrapper } from "@/app/lib/api/with-api-logging";
 import { sendToPipeline } from "@/app/lib/pipelines";
 import { getSurvey } from "@/lib/survey/service";
+import { getClientIpFromHeaders } from "@/lib/utils/client-ip";
 import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { createQuotaFullObject } from "@/modules/ee/quotas/lib/helpers";
 import { validateFileUploads } from "@/modules/storage/utils";
@@ -136,6 +137,13 @@ export const POST = withV1ApiWrapper({
         action: responseInputData?.meta?.action,
       };
 
+      // Capture IP address if the survey has IP capture enabled
+      // Server-derived IP always overwrites any client-provided value
+      if (survey.isCaptureIpEnabled) {
+        const ipAddress = await getClientIpFromHeaders();
+        meta.ipAddress = ipAddress;
+      }
+
       response = await createResponseWithQuotaEvaluation({
         ...responseInputData,
         meta,

apps/web/app/api/v1/management/responses/[responseId]/route.ts

@@ -8,6 +8,10 @@ import { TApiAuditLog, TApiKeyAuthentication, withV1ApiWrapper } from "@/app/lib
 import { sendToPipeline } from "@/app/lib/pipelines";
 import { deleteResponse, getResponse } from "@/lib/response/service";
 import { getSurvey } from "@/lib/survey/service";
+import {
+  formatValidationErrorsForV1Api,
+  validateResponseData,
+} from "@/modules/api/v2/management/responses/lib/validation";
 import { hasPermission } from "@/modules/organization/settings/api-keys/lib/utils";
 import { validateFileUploads } from "@/modules/storage/utils";
 import { updateResponseWithQuotaEvaluation } from "./lib/response";
@@ -140,6 +144,24 @@ export const PUT = withV1ApiWrapper({
         };
       }
 
+      // Validate response data against validation rules
+      const validationErrors = validateResponseData(
+        result.survey.blocks,
+        responseUpdate.data,
+        responseUpdate.language ?? "en",
+        result.survey.questions
+      );
+
+      if (validationErrors) {
+        return {
+          response: responses.badRequestResponse(
+            "Validation failed",
+            formatValidationErrorsForV1Api(validationErrors),
+            true
+          ),
+        };
+      }
+
       const inputValidation = ZResponseUpdateInput.safeParse(responseUpdate);
       if (!inputValidation.success) {
         return {

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

@@ -7,6 +7,10 @@ import { transformErrorToDetails } from "@/app/lib/api/validator";
 import { TApiAuditLog, TApiKeyAuthentication, withV1ApiWrapper } from "@/app/lib/api/with-api-logging";
 import { sendToPipeline } from "@/app/lib/pipelines";
 import { getSurvey } from "@/lib/survey/service";
+import {
+  formatValidationErrorsForV1Api,
+  validateResponseData,
+} from "@/modules/api/v2/management/responses/lib/validation";
 import { hasPermission } from "@/modules/organization/settings/api-keys/lib/utils";
 import { validateFileUploads } from "@/modules/storage/utils";
 import {
@@ -149,6 +153,24 @@ export const POST = withV1ApiWrapper({
         };
       }
 
+      // Validate response data against validation rules
+      const validationErrors = validateResponseData(
+        surveyResult.survey.blocks,
+        responseInput.data,
+        responseInput.language ?? "en",
+        surveyResult.survey.questions
+      );
+
+      if (validationErrors) {
+        return {
+          response: responses.badRequestResponse(
+            "Validation failed",
+            formatValidationErrorsForV1Api(validationErrors),
+            true
+          ),
+        };
+      }
+
       if (responseInput.createdAt && !responseInput.updatedAt) {
         responseInput.updatedAt = responseInput.createdAt;
       }

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

@@ -19,6 +19,10 @@ vi.mock("@/lib/utils/validate", () => ({
   validateInputs: vi.fn(),
 }));
 
+vi.mock("@/lib/crypto", () => ({
+  generateWebhookSecret: vi.fn(() => "whsec_test_secret_1234567890"),
+}));
+
 describe("createWebhook", () => {
   afterEach(() => {
     cleanup();
@@ -59,6 +63,7 @@ describe("createWebhook", () => {
         source: webhookInput.source,
         surveyIds: webhookInput.surveyIds,
         triggers: webhookInput.triggers,
+        secret: "whsec_test_secret_1234567890",
         environment: {
           connect: {
             id: webhookInput.environmentId,
@@ -144,6 +149,7 @@ describe("createWebhook", () => {
         source: webhookInput.source,
         surveyIds: webhookInput.surveyIds,
         triggers: webhookInput.triggers,
+        secret: "whsec_test_secret_1234567890",
         environment: {
           connect: {
             id: webhookInput.environmentId,

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

@@ -4,12 +4,15 @@ import { ZId, ZOptionalNumber } from "@formbricks/types/common";
 import { DatabaseError, InvalidInputError } from "@formbricks/types/errors";
 import { TWebhookInput, ZWebhookInput } from "@/app/api/v1/webhooks/types/webhooks";
 import { ITEMS_PER_PAGE } from "@/lib/constants";
+import { generateWebhookSecret } from "@/lib/crypto";
 import { validateInputs } from "@/lib/utils/validate";
 
 export const createWebhook = async (webhookInput: TWebhookInput): Promise<Webhook> => {
   validateInputs([webhookInput, ZWebhookInput]);
 
   try {
+    const secret = generateWebhookSecret();
+
     const createdWebhook = await prisma.webhook.create({
       data: {
         url: webhookInput.url,
@@ -17,6 +20,7 @@ export const createWebhook = async (webhookInput: TWebhookInput): Promise<Webhoo
         source: webhookInput.source,
         surveyIds: webhookInput.surveyIds || [],
         triggers: webhookInput.triggers || [],
+        secret,
         environment: {
           connect: {
             id: webhookInput.environmentId,

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

@@ -10,6 +10,7 @@ import { transformErrorToDetails } from "@/app/lib/api/validator";
 import { sendToPipeline } from "@/app/lib/pipelines";
 import { getSurvey } from "@/lib/survey/service";
 import { getElementsFromBlocks } from "@/lib/survey/utils";
+import { getClientIpFromHeaders } from "@/lib/utils/client-ip";
 import { validateOtherOptionLengthForMultipleChoice } from "@/modules/api/v2/lib/element";
 import { getIsContactsEnabled } from "@/modules/ee/license-check/lib/utils";
 import { createQuotaFullObject } from "@/modules/ee/quotas/lib/helpers";
@@ -119,6 +120,13 @@ export const POST = async (request: Request, context: Context): Promise<Response
       action: responseInputData?.meta?.action,
     };
 
+    // Capture IP address if the survey has IP capture enabled
+    // Server-derived IP always overwrites any client-provided value
+    if (survey.isCaptureIpEnabled) {
+      const ipAddress = await getClientIpFromHeaders();
+      meta.ipAddress = ipAddress;
+    }
+
     response = await createResponseWithQuotaEvaluation({
       ...responseInputData,
       meta,

apps/web/app/lib/survey-block-builder.test.ts

@@ -0,0 +1,80 @@
+import type { TFunction } from "i18next";
+import { describe, expect, test, vi } from "vitest";
+import { TSurveyElementTypeEnum } from "@formbricks/types/surveys/elements";
+import { createI18nString } from "@/lib/i18n/utils";
+import { buildBlock } from "./survey-block-builder";
+
+const mockT = vi.fn((key: string) => {
+  const translations: Record<string, string> = {
+    "common.next": "Next",
+    "common.back": "Back",
+    "": "",
+  };
+  return translations[key] || key;
+}) as unknown as TFunction;
+
+describe("survey-block-builder", () => {
+  describe("buildBlock", () => {
+    const mockElements = [
+      {
+        id: "element-1",
+        type: TSurveyElementTypeEnum.OpenText,
+        headline: createI18nString("Test Question", []),
+        required: false,
+        inputType: "text",
+        longAnswer: false,
+        charLimit: { enabled: false },
+      },
+    ];
+
+    test("should use getDefaultButtonLabel when buttonLabel is provided", () => {
+      const result = buildBlock({
+        name: "Test Block",
+        elements: mockElements,
+        buttonLabel: "Custom Next",
+        t: mockT,
+      });
+
+      expect(result.buttonLabel).toEqual({
+        default: "Custom Next",
+      });
+    });
+
+    test("should use createI18nString with empty translation when buttonLabel is not provided", () => {
+      const result = buildBlock({
+        name: "Test Block",
+        elements: mockElements,
+        t: mockT,
+      });
+
+      expect(result.buttonLabel).toEqual({
+        default: "",
+      });
+    });
+
+    test("should use getDefaultBackButtonLabel when backButtonLabel is provided", () => {
+      const result = buildBlock({
+        name: "Test Block",
+        elements: mockElements,
+        backButtonLabel: "Custom Back",
+        t: mockT,
+      });
+
+      expect(result.backButtonLabel).toEqual({
+        default: "Custom Back",
+      });
+    });
+
+    test("should use createI18nString with empty translation when backButtonLabel is not provided", () => {
+      const result = buildBlock({
+        name: "Test Block",
+        elements: mockElements,
+        t: mockT,
+      });
+
+      expect(result.backButtonLabel).toEqual({
+        default: "",
+      });
+    });
+  });
+});

apps/web/app/lib/survey-block-builder.ts

@@ -302,7 +302,9 @@ export const buildBlock = ({
     elements,
     logic,
     logicFallback,
-    buttonLabel: buttonLabel ? getDefaultButtonLabel(buttonLabel, t) : undefined,
-    backButtonLabel: backButtonLabel ? getDefaultBackButtonLabel(backButtonLabel, t) : undefined,
+    buttonLabel: buttonLabel ? getDefaultButtonLabel(buttonLabel, t) : createI18nString(t(""), []),
+    backButtonLabel: backButtonLabel
+      ? getDefaultBackButtonLabel(backButtonLabel, t)
+      : createI18nString(t(""), []),
   };
 };

apps/web/app/lib/templates.ts

@@ -4835,7 +4835,7 @@ export const previewSurvey = (projectName: string, t: TFunction): TSurvey => {
     segment: null,
     blocks: [
       {
-        id: createId(),
+        id: "cltxxaa6x0000g8hacxdxeje1",
         name: "Block 1",
         elements: [
           {
@@ -4857,7 +4857,7 @@ export const previewSurvey = (projectName: string, t: TFunction): TSurvey => {
         backButtonLabel: createI18nString(t("templates.preview_survey_question_2_back_button_label"), []),
       },
       {
-        id: createId(),
+        id: "cltxxaa6x0000g8hacxdxeje2",
         name: "Block 2",
         elements: [
           {
@@ -4913,6 +4913,7 @@ export const previewSurvey = (projectName: string, t: TFunction): TSurvey => {
     showLanguageSwitch: false,
     followUps: [],
     isBackButtonHidden: false,
+    isCaptureIpEnabled: false,
     metadata: {},
     questions: [], // Required for build-time type checking (Zod defaults to [] at runtime)
     slug: null,

apps/web/i18n.lock

@@ -61,6 +61,10 @@ checksums:
     auth/signup/password_validation_uppercase_and_lowercase: ae98b485024dbff1022f6048e22443cd
     auth/signup/please_verify_captcha: 12938ca7ca13e3f933737dd5436fa1c0
     auth/signup/privacy_policy: 7459744a63ef8af4e517a09024bd7c08
+    auth/signup/product_updates_description: f20eedb2cf42d2235b1fe0294086695b
+    auth/signup/product_updates_title: 31e099ba18abb0a49f8a75fece1f1791
+    auth/signup/security_updates_description: 4643df07f13cec619e7fd91c8f14d93b
+    auth/signup/security_updates_title: de5127f5847cdd412906607e1402f48d
     auth/signup/terms_of_service: 5add91f519e39025708e54a7eb7a9fc5
     auth/signup/title: 96addc349f834eaa5d14c786d5478b1c
     auth/signup_without_verification_success/user_successfully_created: ff849ebedc5dacb36493d7894f16edc7
@@ -102,6 +106,7 @@ checksums:
     common/allow: 3e39cc5940255e6bff0fea95c817dd43
     common/allow_users_to_exit_by_clicking_outside_the_survey: 1c09db6e85214f1b1c3d4774c4c5cd56
     common/an_unknown_error_occurred_while_deleting_table_items: 06be3fd128aeb51eed4fba9a079ecee2
+    common/analysis: 409bac6215382c47e59f5039cc4cdcdd
     common/and: dc75b95c804b16dc617a5f16f7393bca
     common/and_response_limit_of: 05be41a1d7e8dafa4aa012dcba77f5d4
     common/anonymous: 77b5222e710cc1dae073dae32309f8ed
@@ -170,6 +175,7 @@ checksums:
     common/docs: 1563fcb5ddb5037b0709ccd3dd384a92
     common/documentation: 1563fcb5ddb5037b0709ccd3dd384a92
     common/domain: 402d46965eacc3af4c5df92e53e95712
+    common/done: ffd408fa29d5bc9039ef8ea1b9b699bb
     common/download: 56b7d0834952b39ee394b44bd8179178
     common/draft: e8a92958ad300aacfe46c2bf6644927e
     common/duplicate: 27756566785c2b8463e21582c4bb619b
@@ -211,7 +217,6 @@ checksums:
     common/imprint: c4e5f2a1994d3cc5896b200709cc499c
     common/in_progress: 3de9afebcb9d4ce8ac42e14995f79ffd
     common/inactive_surveys: 324b8e1844739cdc2a3bc71aef143a76
-    common/input_type: df4865b5d0a598a8d7f563dcec104df5
     common/integration: 40d02f65c4356003e0e90ffb944907d2
     common/integrations: 0ccce343287704cd90150c32e2fcad36
     common/invalid_date: 4c18c82f7317d4a02f8d5fef611e82b7
@@ -235,13 +240,11 @@ checksums:
     common/look_and_feel: 9125503712626d495cedec7a79f1418c
     common/manage: a3d40c0267b81ae53c9598eaeb05087d
     common/marketing: fcf0f06f8b64b458c7ca6d95541a3cc8
-    common/maximum: 4c07541dd1f093775bdc61b559cca6c8
     common/member: 1606dc30b369856b9dba1fe9aec425d2
     common/members: 0932e80cba1e3e0a7f52bb67ff31da32
     common/members_and_teams: bf5c3fadcb9fc23533ec1532b805ac08
     common/membership_not_found: 7ac63584af23396aace9992ad919ffd4
     common/metadata: 695d4f7da261ba76e3be4de495491028
-    common/minimum: d9759235086d0169928b3c1401115e22
     common/mobile_overlay_app_works_best_on_desktop: 4509f7bfbb4edbd42e534042d6cb7e72
     common/mobile_overlay_surveys_look_good: 6d73b635018b4a5a89cce58e1d2497f5
     common/mobile_overlay_title: 42f52259b7527989fb3a3240f5352a8b
@@ -294,7 +297,7 @@ checksums:
     common/placeholder: 88c2c168aff12ca70148fcb5f6b4c7b1
     common/please_select_at_least_one_survey: fb1cbeb670480115305e23444c347e50
     common/please_select_at_least_one_trigger: e88e64a1010a039745e80ed2e30951fe
-    common/please_upgrade_your_plan: bfe98d41cd7383ad42169785d8c818fc
+    common/please_upgrade_your_plan: 03d54a21ecd27723c72a13644837e5ed
     common/preview: 3173ee1f0f1d4e50665ca4a84c38e15d
     common/preview_survey: 7409e9c118e3e5d5f2a86201c2b354f2
     common/privacy: 7459744a63ef8af4e517a09024bd7c08
@@ -736,20 +739,26 @@ checksums:
     environments/integrations/webhooks/add_webhook: 20ba6e981d4237490d9da86dade7f7d2
     environments/integrations/webhooks/add_webhook_description: 85466a73d6a55476319c0c980b6f2aff
     environments/integrations/webhooks/all_current_and_new_surveys: 4c0e0e94bf2dea0cf58568d11cfbb71d
+    environments/integrations/webhooks/copy_secret_now: 23d6da66a541e7c22eb06729b6eac376
     environments/integrations/webhooks/created_by_third_party: b40197eabbbce500b80b44268b8b1ee9
     environments/integrations/webhooks/discord_webhook_not_supported: 23432534f908b2ba63a517fb1f9bbe0e
     environments/integrations/webhooks/empty_webhook_message: 4c4d8709576a38cb8eb59866331d2405
     environments/integrations/webhooks/endpoint_pinged: 3b1fce00e61d4b9d2bdca390649c58b6
     environments/integrations/webhooks/endpoint_pinged_error: 96c312fe8214757c4a934cdfbe177027
+    environments/integrations/webhooks/learn_to_verify: 25b2a035e2109170b28f4e16db76ad39
     environments/integrations/webhooks/please_check_console: 7b1787e82a0d762df02c011ebb1650ea
     environments/integrations/webhooks/please_enter_a_url: c24c74d0ce7ed3a6b858aadbc82108fe
     environments/integrations/webhooks/response_created: 8c43b1b6d748f6096f6f8d9232a3c469
     environments/integrations/webhooks/response_finished: 71764de45369a08aacc290af629fa298
     environments/integrations/webhooks/response_updated: 0b178ffeb39b615db0db036a685f118b
+    environments/integrations/webhooks/secret_copy_warning: 55ac31fc9ee192a66093ba4b6ccd0a91
+    environments/integrations/webhooks/secret_description: e9ab6e0fd78d49c3e25ee649c62061bd
+    environments/integrations/webhooks/signing_secret: 91594fa8588e4232e155a65d07419bf7
     environments/integrations/webhooks/source: 6e87903ef260da661b2bf6d858ba68ca
     environments/integrations/webhooks/test_endpoint: 9ce47af3f982224071e16d5a17190a60
     environments/integrations/webhooks/triggers: 66488f38662a4199fb8a18967239c992
     environments/integrations/webhooks/webhook_added_successfully: 2d8e8d7a158ea8e4b65e67900363527b
+    environments/integrations/webhooks/webhook_created: ffb4449a8d50bb83097485ddabb73562
     environments/integrations/webhooks/webhook_delete_confirmation: b5bae9856effd32053669c0e0a22479f
     environments/integrations/webhooks/webhook_deleted_successfully: fcefd247ec76a372002d2cffac3c5b0f
     environments/integrations/webhooks/webhook_name_placeholder: ffa3274cf83d8dc05c882fbf61c48f8f
@@ -947,6 +956,8 @@ checksums:
     environments/settings/general/remove_logo: f60f1803e6fc8017b1eae7c30089107f
     environments/settings/general/replace_logo: e3c8bec7574a670607e88771164e272f
     environments/settings/general/resend_invitation_email: 6305d1ffa015c377ef59fe9c2661cf02
+    environments/settings/general/security_list_tip: 0bbed89fa5265da7e07767087f87c736
+    environments/settings/general/security_list_tip_link: ccdb1a21610ebf5a626d813b155be4ba
     environments/settings/general/share_invite_link: b40b7ffbcf02d7464be52fb562df5e3a
     environments/settings/general/share_this_link_to_let_your_organization_member_join_your_organization: 6eb43d5b1c855572b7ab35f527ba953c
     environments/settings/general/test_email_sent_successfully: aa68214f5e0707c9615e01343640ab32
@@ -1088,7 +1099,6 @@ checksums:
     environments/surveys/edit/adjust_survey_closed_message_description: e906aebd9af6451a2a39c73287927299
     environments/surveys/edit/adjust_the_theme_in_the: bccdafda8af5871513266f668b55d690
     environments/surveys/edit/all_other_answers_will_continue_to: 9a5d09eea42ff5fd1c18cc58a14dcabd
-    environments/surveys/edit/allow_file_type: ec4f1e0c5b764990c3b1560d0d8dc2af
     environments/surveys/edit/allow_multi_select: 7b4b83f7a0205e2a0a8971671a69a174
     environments/surveys/edit/allow_multiple_files: dbd99f9d1026e4f7c5a5d03f71ba379d
     environments/surveys/edit/allow_users_to_select_more_than_one_image: d683e0b538d1366400292a771f3fbd08
@@ -1098,6 +1108,9 @@ checksums:
     environments/surveys/edit/assign: e80715ab64bf7cf463abb3a9fd1ad516
     environments/surveys/edit/audience: a4d9fab4214a641e2d358fbb28f010e0
     environments/surveys/edit/auto_close_on_inactivity: 093db516799315ccd4242a3675693012
+    environments/surveys/edit/auto_save_disabled: f7411fb0dcfb8f7b19b85f0be54f2231
+    environments/surveys/edit/auto_save_disabled_tooltip: 77322e1e866b7d29f7641a88bbd3b681
+    environments/surveys/edit/auto_save_on: 1524d466830b00c5d727c701db404963
     environments/surveys/edit/automatically_close_survey_after: 3e1c400a4b226c875dc8337e3b204d85
     environments/surveys/edit/automatically_close_the_survey_after_a_certain_number_of_responses: 2beee129dca506f041e5d1e6a1688310
     environments/surveys/edit/automatically_close_the_survey_if_the_user_does_not_respond_after_certain_number_of_seconds: 1be3819ffa1db67385357ae933d69a7b
@@ -1119,6 +1132,8 @@ checksums:
     environments/surveys/edit/cal_username: a4a9c739af909d975beb1bc4998feae9
     environments/surveys/edit/calculate: c5fcf8d3a38706ae2071b6f78339ec68
     environments/surveys/edit/capture_a_new_action_to_trigger_a_survey_on: 73410e9665a37bc4a9747db5d683d36c
+    environments/surveys/edit/capture_ip_address: e950f924f1c0b52f8c5b06ca118e049f
+    environments/surveys/edit/capture_ip_address_description: 932d1b4ad68594d06d4eaf0212f9570c
     environments/surveys/edit/capture_new_action: 0aa2a3c399b62b1a52307deedf4922e8
     environments/surveys/edit/card_arrangement_for_survey_type_derived: c06b9aaebcc11bc16e57a445b62361fc
     environments/surveys/edit/card_background_color: acd5d023e1d1a4471b053dce504c7a83
@@ -1149,8 +1164,6 @@ checksums:
     environments/surveys/edit/change_the_question_color_of_the_survey: ab6942138a8c5fc6c8c3b9f8dd95e980
     environments/surveys/edit/changes_saved: 90aab363c9e96eaa1295a997c48f97f6
     environments/surveys/edit/changing_survey_type_will_remove_existing_distribution_channels: 9ce817be04f13f2f0db981145ec48df4
-    environments/surveys/edit/character_limit_toggle_description: d15a6895eaaf4d4c7212d9240c6bf45d
-    environments/surveys/edit/character_limit_toggle_title: fdc45bcc6335e5116aec895fecda0d87
     environments/surveys/edit/checkbox_label: 12a07d6bdf38e283a2e95892ec49b7f8
     environments/surveys/edit/choose_the_actions_which_trigger_the_survey: 773b311a148a112243f3b139506b9987
     environments/surveys/edit/choose_the_first_question_on_your_block: bdece06ca04f89d0c445ba1554dd5b80
@@ -1170,7 +1183,6 @@ checksums:
     environments/surveys/edit/contact_fields: 0d4e3f4d2eb3481aabe3ac60a692fa74
     environments/surveys/edit/contains: 41c8c25407527a5336404313f4c8d650
     environments/surveys/edit/continue_to_settings: b9853a7eedb3ae295088268fe5a44824
-    environments/surveys/edit/control_which_file_types_can_be_uploaded: 97144e65d91e2ca0114af923ba5924f4
     environments/surveys/edit/convert_to_multiple_choice: e5396019ae897f6ec4c4295394c115e3
     environments/surveys/edit/convert_to_single_choice: 8ecabfcb9276f29e6ac962ffcbc1ba64
     environments/surveys/edit/country: 73581fc33a1e83e6a56db73558e7b5c6
@@ -1183,6 +1195,7 @@ checksums:
     environments/surveys/edit/darken_or_lighten_background_of_your_choice: 304a64a8050ebf501d195e948cd25b6f
     environments/surveys/edit/date_format: e95dfc41ac944874868487457ddc057a
     environments/surveys/edit/days_before_showing_this_survey_again: 9ee757e5c3a07844b12ceb406dc65b04
+    environments/surveys/edit/delete_anyways: cc8683ab625280eefc9776bd381dc2e8
     environments/surveys/edit/delete_block: c00617cb0724557e486304276063807a
     environments/surveys/edit/delete_choice: fd750208d414b9ad8c980c161a0199e1
     environments/surveys/edit/disable_the_visibility_of_survey_progress: 2af631010114307ac2a91612559c9618
@@ -1324,8 +1337,7 @@ checksums:
     environments/surveys/edit/key: 3d1065ab98a1c2f1210507fd5c7bf515
     environments/surveys/edit/last_name: 2c9a7de7738ca007ba9023c385149c26
     environments/surveys/edit/let_people_upload_up_to_25_files_at_the_same_time: 44110eeba2b63049a84d69927846ea3c
-    environments/surveys/edit/limit_file_types: 2ee563bc98c65f565014945d6fef389c
-    environments/surveys/edit/limit_the_maximum_file_size: f3f8682de34eaae30351d570805ba172
+    environments/surveys/edit/limit_the_maximum_file_size: 6ae5944fe490b9acdaaee92b30381ec0
     environments/surveys/edit/limit_upload_file_size_to: 949c48d25ae45259cc19464e95752d29
     environments/surveys/edit/link_survey_description: f45569b5e6b78be6bc02bc6a46da948b
     environments/surveys/edit/load_segment: 5341d3de37ff10f7526152e38e25e3c5
@@ -1371,12 +1383,12 @@ checksums:
     environments/surveys/edit/picture_idx: 55e053ad1ade5d17c582406706036028
     environments/surveys/edit/pin_can_only_contain_numbers: 417c854d44620a7229ebd9ab8cbb3613
     environments/surveys/edit/pin_must_be_a_four_digit_number: 9f9c8c55d99f7b24fbcf6e7e377b726f
-    environments/surveys/edit/please_enter_a_file_extension: 60ad12bce720593482809c002a542a97
     environments/surveys/edit/please_enter_a_valid_url: 25d43dfb802c31cb59dc88453ea72fc4
     environments/surveys/edit/please_set_a_survey_trigger: 0358142df37dd1724f629008a1db453a
     environments/surveys/edit/please_specify: e1faa6cd085144f7339c7e74dc6fb366
     environments/surveys/edit/prevent_double_submission: afc502baa2da81d9c9618da1c3b5a57a
     environments/surveys/edit/prevent_double_submission_description: ef7d2aa22d43bdc6ccebb076c6aa9ce5
+    environments/surveys/edit/progress_saved: d7bfc189571f08bbb4d0240cb9363ffa
     environments/surveys/edit/protect_survey_with_pin: 16d1925b6a5770f7423772d6d9a8291a
     environments/surveys/edit/protect_survey_with_pin_description: 0e55d19b6f3578b1024e03606172a5d2
     environments/surveys/edit/publish: 4aa95ba4793bb293e771bd73b4f87c0f
@@ -1385,7 +1397,8 @@ checksums:
     environments/surveys/edit/question_deleted: ecdeb22b81ae2d732656a7742c1eec7b
     environments/surveys/edit/question_duplicated: 3f02439fd0a8b818bc84c1b1b473898c
     environments/surveys/edit/question_id_updated: e8d94dbefcbad00c7464b3d1fb0ee81a
-    environments/surveys/edit/question_used_in_logic: cd1fab1a4ccdea83c6d630a59cdc9931
+    environments/surveys/edit/question_used_in_logic_warning_text: ec78767a7cf335222d41b98cb5baa6be
+    environments/surveys/edit/question_used_in_logic_warning_title: 4bb8528cdc3b8649c194487067737f6d
     environments/surveys/edit/question_used_in_quota: 311b93fcecd68a65fdefbea13bec7350
     environments/surveys/edit/question_used_in_recall: 00d74a1ede4e75e32d50fe87b85d5a8b
     environments/surveys/edit/question_used_in_recall_ending_card: ab5b0dc296cecd160a6406cbfab42695
@@ -1447,6 +1460,7 @@ checksums:
     environments/surveys/edit/search_for_images: 8b1bc3561d126cc49a1ee185c07e7aaf
     environments/surveys/edit/seconds_after_trigger_the_survey_will_be_closed_if_no_response: 3584be059fe152e93895ef9885f8e8a7
     environments/surveys/edit/seconds_before_showing_the_survey: 4b03756dd5f06df732bf62b2c7968b82
+    environments/surveys/edit/select_field: 45665a44f7d5707506364f17f28db3bf
     environments/surveys/edit/select_or_type_value: a99c307b2cc3f9f6f893babd546d7296
     environments/surveys/edit/select_ordering: c8f632a17fe78d8b7f87e82df9351ff9
     environments/surveys/edit/select_saved_action: de31ab9cbb2bb67a050df717de7cdde4
@@ -1494,8 +1508,6 @@ checksums:
     environments/surveys/edit/the_survey_will_be_shown_once_even_if_person_doesnt_respond: 6062aaa5cf8e58e79b75b6b588ae9598
     environments/surveys/edit/then: 5e941fb7dd51a18651fcfb865edd5ba6
     environments/surveys/edit/this_action_will_remove_all_the_translations_from_this_survey: 3340c89696f10bdc01b9a1047ff0b987
-    environments/surveys/edit/this_extension_is_already_added: 201d636539836c95958e28cecd8f3240
-    environments/surveys/edit/this_file_type_is_not_supported: f365b9a2e05aa062ab0bc1af61f642e2
     environments/surveys/edit/three_points: d7f299aec752d7d690ef0ab6373327ae
     environments/surveys/edit/times: 5ab156c13df6bfd75c0b17ad0a92c78a
     environments/surveys/edit/to_keep_the_placement_over_all_surveys_consistent_you_can: 7a078e6a39d4c30b465137d2b6ef3e67
@@ -1516,8 +1528,49 @@ checksums:
     environments/surveys/edit/upper_label: 1fa48bce3fade6ffc1a52d9fdddf9e17
     environments/surveys/edit/url_filters: e524879d2eb74463d7fd06a7e0f53421
     environments/surveys/edit/url_not_supported: af8a753467c617b596aadef1aaaed664
+    environments/surveys/edit/validation/add_validation_rule: e0c3208977140e5475df3e9b08927dbf
+    environments/surveys/edit/validation/answer_all_rows: 5ca73b038ac41922a09802fef4b5afc0
+    environments/surveys/edit/validation/characters: e26d6bb531181ec1ed551e264bc86259
+    environments/surveys/edit/validation/contains: 41c8c25407527a5336404313f4c8d650
+    environments/surveys/edit/validation/delete_validation_rule: cc92081eda4dcffd9f746c5628fa2636
+    environments/surveys/edit/validation/does_not_contain: d618eb0f854f7efa0d7c644e6628fa42
+    environments/surveys/edit/validation/email: a481cd9fba3e145252458ee1eaa9bd3b
+    environments/surveys/edit/validation/end_date: acbea5a9fd7a6fadf5aa1b4f47188203
+    environments/surveys/edit/validation/file_extension_is: c102e4962dd7b8b17faec31ecda6c9bd
+    environments/surveys/edit/validation/file_extension_is_not: e5067a8ad6b89cd979651c9d8ee7c614
+    environments/surveys/edit/validation/is: 1940eeb4f6f0189788fde5403c6e9e9a
+    environments/surveys/edit/validation/is_between: 5721c877c60f0005dc4ce78d4c0d3fdc
+    environments/surveys/edit/validation/is_earlier_than: 3829d0a060cfc2c7f5f0281a55759612
+    environments/surveys/edit/validation/is_greater_than: b9542ab0e0ea0ee18e82931b160b1385
+    environments/surveys/edit/validation/is_later_than: 315eba60c6b8ca4cb3dd95c564ada456
+    environments/surveys/edit/validation/is_less_than: 6109d595ba21497c59b1c91d7fd09a13
+    environments/surveys/edit/validation/is_not: 8c7817ecdb08e6fa92fdf3487e0c8c9d
+    environments/surveys/edit/validation/is_not_between: 4579a41b4e74d940eb036e13b3c63258
+    environments/surveys/edit/validation/kb: 476c6cddd277e93a1bb7af4a763e95dc
+    environments/surveys/edit/validation/max_length: 6edf9e1149c3893da102d9464138da22
+    environments/surveys/edit/validation/max_selections: 6edf9e1149c3893da102d9464138da22
+    environments/surveys/edit/validation/max_value: 6edf9e1149c3893da102d9464138da22
+    environments/surveys/edit/validation/mb: dbcf612f2d898197a764a442747b5c06
+    environments/surveys/edit/validation/min_length: 204dbf1f1b3aa34c8b981642b1694262
+    environments/surveys/edit/validation/min_selections: 204dbf1f1b3aa34c8b981642b1694262
+    environments/surveys/edit/validation/min_value: 204dbf1f1b3aa34c8b981642b1694262
+    environments/surveys/edit/validation/minimum_options_ranked: 2dca1fb216c977a044987c65a0ca95c9
+    environments/surveys/edit/validation/minimum_rows_answered: a8766a986cd73db0bb9daff49b271ed6
+    environments/surveys/edit/validation/options_selected: a7f72a7059a49a2a6d5b90f7a2a8aa44
+    environments/surveys/edit/validation/pattern: c6f01d7bc9baa21a40ea38fa986bd5a0
+    environments/surveys/edit/validation/phone: bcd7bd37a475ab1f80ea4c5b4d4d0bb5
+    environments/surveys/edit/validation/rank_all_options: a885523e9d7820c9b0529bca37e48ccc
+    environments/surveys/edit/validation/select_file_extensions: 208ccb7bd4dde20b0d79bdd1fa763076
+    environments/surveys/edit/validation/select_option: 53ba37697cca1f6c7d57ecca53ea063e
+    environments/surveys/edit/validation/start_date: 881de78c79b56f5ceb9b7103bf23cb2c
+    environments/surveys/edit/validation/url: 4006a4d8dfac013758f0053f6aa67cdd
+    environments/surveys/edit/validation_logic_and: 83bb027b15e28b3dc1d6e16c7fc86056
+    environments/surveys/edit/validation_logic_or: 32c9f3998984fd32a2b5bc53f2d97429
+    environments/surveys/edit/validation_rules: 0cd99f02684d633196c8b249e857d207
+    environments/surveys/edit/validation_rules_description: a0a7cee05e18efd462148698e3a93399
     environments/surveys/edit/variable_is_used_in_logic_of_question_please_remove_it_from_logic_first: bd9d9c7cf0be671c4e8cf67e2ae6659e
     environments/surveys/edit/variable_is_used_in_quota_please_remove_it_from_quota_first: 0d36e5b2713f5450fe346e0af0aaa29c
+    environments/surveys/edit/variable_name_conflicts_with_hidden_field: fe2f6a711d5b663790bdd5780ad77bf2
     environments/surveys/edit/variable_name_is_already_taken_please_choose_another: 6da42fe8733c6379158bce9a176f76d7
     environments/surveys/edit/variable_name_must_start_with_a_letter: f7abbdecf1ba7b822ccabb16981ebcb5
     environments/surveys/edit/variable_used_in_recall: 1c9c354a1233408cc42922eefaa8ce23
@@ -1569,6 +1622,7 @@ checksums:
     environments/surveys/responses/error_downloading_responses: 97a79108cfc854834d09cf14c300a291
     environments/surveys/responses/first_name: cf040a5d6a9fd696be400380cc99f54b
     environments/surveys/responses/how_to_identify_users: c886035d9d9a0cfc3fa9703972001044
+    environments/surveys/responses/ip_address: 8f2b4d42a165a4c165eca4d7639ce57e
     environments/surveys/responses/last_name: 2c9a7de7738ca007ba9023c385149c26
     environments/surveys/responses/not_completed: df34eab65a6291f2c5e15a0e349c4eba
     environments/surveys/responses/os: a4c753bb2c004a58d02faeed6b4da476
@@ -1609,6 +1663,20 @@ checksums:
     environments/surveys/share/anonymous_links/source_tracking: dcf85834f1ba490347a301ab55d32402
     environments/surveys/share/anonymous_links/url_encryption_description: 1509056fdae7b42fc85f1ee3c49de4c3
     environments/surveys/share/anonymous_links/url_encryption_label: 9c70fd3f64cf8cc5039b198d3af79d14
+    environments/surveys/share/custom_html/add_mode_description: f48dcf53bce27cc40c3546547e8395cb
+    environments/surveys/share/custom_html/add_to_workspace: af9cd24872f25cfc4231b926acc76d7c
+    environments/surveys/share/custom_html/description: 0634048655de8b4b17b41d496e1ea457
+    environments/surveys/share/custom_html/nav_title: 01f993f027ab277058eacb8a48ea7c01
+    environments/surveys/share/custom_html/no_workspace_scripts: 7fc57f576c98e96ee73e7b489345d51a
+    environments/surveys/share/custom_html/placeholder: 229eb1676a69311ff1dcc19c1a52c080
+    environments/surveys/share/custom_html/replace_mode_description: 6eaf17275c02b0d5ac21255747f36271
+    environments/surveys/share/custom_html/replace_workspace: b80e698cc8790246fea42453bfa4b09d
+    environments/surveys/share/custom_html/saved_successfully: 14e7d2d646803ac1dd24cfa45c22606c
+    environments/surveys/share/custom_html/script_mode: 60ed1102dd42ad14e272df5f6921b423
+    environments/surveys/share/custom_html/security_warning: 5faa0f284d48110918a5e8a467e2bcb8
+    environments/surveys/share/custom_html/survey_scripts_description: 948746d51db23b348164105c175391b3
+    environments/surveys/share/custom_html/survey_scripts_label: 095d9fe768abe2bb32428184ee1c9b5a
+    environments/surveys/share/custom_html/workspace_scripts_label: 3d9b6c09eae10a2bacb3ac96b4db4a19
     environments/surveys/share/dynamic_popup/alert_button: 8932096e3eee837beeb21dd4afd8b662
     environments/surveys/share/dynamic_popup/alert_description: 53d2ba39984a059a5eca4cb6cf9ba00d
     environments/surveys/share/dynamic_popup/alert_title: 813a9160940894da26ec2a09bbb1a7bf
@@ -1820,6 +1888,13 @@ checksums:
     environments/workspace/app-connection/setup_alert_title: 9561cca2b391e0df81e8a982921ff2bb
     environments/workspace/app-connection/webapp_url: d64d8cc3c4c4ecce780d94755f7e4de9
     environments/workspace/general/cannot_delete_only_workspace: 853f32a75d92b06eaccc0d43d767c183
+    environments/workspace/general/custom_scripts: a6a06a2e20764d76d3e22e5e17d98dbb
+    environments/workspace/general/custom_scripts_card_description: 1585c47126e4b68f9f79f232631c67a1
+    environments/workspace/general/custom_scripts_description: 1c477e711fc08850b2ab70d98ffe18d6
+    environments/workspace/general/custom_scripts_label: 3b189dd62ae0cc35d616e04af90f0b38
+    environments/workspace/general/custom_scripts_placeholder: 229eb1676a69311ff1dcc19c1a52c080
+    environments/workspace/general/custom_scripts_updated_successfully: eabe8e6ededa86342d59093fe308c681
+    environments/workspace/general/custom_scripts_warning: 5faa0f284d48110918a5e8a467e2bcb8
     environments/workspace/general/delete_workspace: 3badbc0f4b49644986fc19d8b2d8f317
     environments/workspace/general/delete_workspace_confirmation: 54a4ee78867537e0244c7170453cdb3f
     environments/workspace/general/delete_workspace_name_includes_surveys_responses_people_and_more: 11e9ac5a799fbec22495f92f42c40d98

apps/web/lib/crypto.test.ts

@@ -1,8 +1,11 @@
-import * as crypto from "crypto";
+import * as crypto from "node:crypto";
 import { beforeEach, describe, expect, test, vi } from "vitest";
 import { logger } from "@formbricks/logger";
 // Import after unmocking
 import {
+  generateStandardWebhookSignature,
+  generateWebhookSecret,
+  getWebhookSecretBytes,
   hashSecret,
   hashSha256,
   parseApiKeyV2,
@@ -283,6 +286,133 @@ describe("Crypto Utils", () => {
     });
   });
 
+  describe("Webhook Signature Functions", () => {
+    describe("generateWebhookSecret", () => {
+      test("should generate a secret with whsec_ prefix", () => {
+        const secret = generateWebhookSecret();
+        expect(secret.startsWith("whsec_")).toBe(true);
+      });
+
+      test("should generate base64-encoded content after prefix", () => {
+        const secret = generateWebhookSecret();
+        const base64Part = secret.slice(6); // Remove "whsec_"
+
+        // Should be valid base64
+        expect(() => Buffer.from(base64Part, "base64")).not.toThrow();
+
+        // Should decode to 32 bytes (256 bits)
+        const decoded = Buffer.from(base64Part, "base64");
+        expect(decoded.length).toBe(32);
+      });
+
+      test("should generate unique secrets each time", () => {
+        const secret1 = generateWebhookSecret();
+        const secret2 = generateWebhookSecret();
+        expect(secret1).not.toBe(secret2);
+      });
+    });
+
+    describe("getWebhookSecretBytes", () => {
+      test("should decode whsec_ prefixed secret to bytes", () => {
+        const secret = generateWebhookSecret();
+        const bytes = getWebhookSecretBytes(secret);
+
+        expect(Buffer.isBuffer(bytes)).toBe(true);
+        expect(bytes.length).toBe(32);
+      });
+
+      test("should handle secret without whsec_ prefix", () => {
+        const base64Secret = Buffer.from("test-secret-bytes-32-characters!").toString("base64");
+        const bytes = getWebhookSecretBytes(base64Secret);
+
+        expect(Buffer.isBuffer(bytes)).toBe(true);
+        expect(bytes.toString()).toBe("test-secret-bytes-32-characters!");
+      });
+
+      test("should correctly decode a known secret", () => {
+        // Create a known secret
+        const knownBytes = Buffer.from("known-test-secret-for-testing!!");
+        const secret = `whsec_${knownBytes.toString("base64")}`;
+
+        const decoded = getWebhookSecretBytes(secret);
+        expect(decoded.toString()).toBe("known-test-secret-for-testing!!");
+      });
+    });
+
+    describe("generateStandardWebhookSignature", () => {
+      test("should generate signature in v1,{base64} format", () => {
+        const secret = generateWebhookSecret();
+        const signature = generateStandardWebhookSignature("msg_123", 1704547200, '{"test":"data"}', secret);
+
+        expect(signature.startsWith("v1,")).toBe(true);
+        const base64Part = signature.slice(3);
+        expect(() => Buffer.from(base64Part, "base64")).not.toThrow();
+      });
+
+      test("should generate deterministic signatures for same inputs", () => {
+        const secret = "whsec_" + Buffer.from("test-secret-32-bytes-exactly!!!").toString("base64");
+        const webhookId = "msg_test123";
+        const timestamp = 1704547200;
+        const payload = '{"event":"test"}';
+
+        const sig1 = generateStandardWebhookSignature(webhookId, timestamp, payload, secret);
+        const sig2 = generateStandardWebhookSignature(webhookId, timestamp, payload, secret);
+
+        expect(sig1).toBe(sig2);
+      });
+
+      test("should generate different signatures for different payloads", () => {
+        const secret = "whsec_" + Buffer.from("test-secret-32-bytes-exactly!!!").toString("base64");
+        const webhookId = "msg_test123";
+        const timestamp = 1704547200;
+
+        const sig1 = generateStandardWebhookSignature(webhookId, timestamp, '{"event":"a"}', secret);
+        const sig2 = generateStandardWebhookSignature(webhookId, timestamp, '{"event":"b"}', secret);
+
+        expect(sig1).not.toBe(sig2);
+      });
+
+      test("should generate different signatures for different timestamps", () => {
+        const secret = "whsec_" + Buffer.from("test-secret-32-bytes-exactly!!!").toString("base64");
+        const webhookId = "msg_test123";
+        const payload = '{"event":"test"}';
+
+        const sig1 = generateStandardWebhookSignature(webhookId, 1704547200, payload, secret);
+        const sig2 = generateStandardWebhookSignature(webhookId, 1704547201, payload, secret);
+
+        expect(sig1).not.toBe(sig2);
+      });
+
+      test("should generate different signatures for different webhook IDs", () => {
+        const secret = "whsec_" + Buffer.from("test-secret-32-bytes-exactly!!!").toString("base64");
+        const timestamp = 1704547200;
+        const payload = '{"event":"test"}';
+
+        const sig1 = generateStandardWebhookSignature("msg_1", timestamp, payload, secret);
+        const sig2 = generateStandardWebhookSignature("msg_2", timestamp, payload, secret);
+
+        expect(sig1).not.toBe(sig2);
+      });
+
+      test("should produce verifiable signatures", () => {
+        // This test verifies the signature can be verified using the same algorithm
+        const secretBytes = Buffer.from("test-secret-32-bytes-exactly!!!");
+        const secret = `whsec_${secretBytes.toString("base64")}`;
+        const webhookId = "msg_verify";
+        const timestamp = 1704547200;
+        const payload = '{"event":"verify"}';
+
+        const signature = generateStandardWebhookSignature(webhookId, timestamp, payload, secret);
+
+        // Manually compute the expected signature
+        const signedContent = `${webhookId}.${timestamp}.${payload}`;
+        const expectedSig = crypto.createHmac("sha256", secretBytes).update(signedContent).digest("base64");
+
+        expect(signature).toBe(`v1,${expectedSig}`);
+      });
+    });
+  });
+
   describe("GCM decryption failure logging", () => {
     // Test key - 32 bytes for AES-256
     const testKey = "0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef";
@@ -314,11 +444,11 @@ describe("Crypto Utils", () => {
       expect(() => symmetricDecrypt(corruptedPayload, testKey)).toThrow();
 
       // Verify logger.warn was called with the correct format (object first, message second)
-      expect(logger.warn).toHaveBeenCalledWith(
-        { err: expect.any(Error) },
-        "AES-GCM decryption failed; refusing to fall back to insecure CBC"
-      );
       expect(logger.warn).toHaveBeenCalledTimes(1);
+      const [firstArg, secondArg] = vi.mocked(logger.warn).mock.calls[0];
+      expect(firstArg).toHaveProperty("err");
+      expect(firstArg.err).toHaveProperty("message");
+      expect(secondArg).toBe("AES-GCM decryption failed; refusing to fall back to insecure CBC");
     });
 
     test("logs warning and throws when GCM decryption fails with corrupted encrypted data", () => {
@@ -342,11 +472,11 @@ describe("Crypto Utils", () => {
       expect(() => symmetricDecrypt(corruptedPayload, testKey)).toThrow();
 
       // Verify logger.warn was called
-      expect(logger.warn).toHaveBeenCalledWith(
-        { err: expect.any(Error) },
-        "AES-GCM decryption failed; refusing to fall back to insecure CBC"
-      );
       expect(logger.warn).toHaveBeenCalledTimes(1);
+      const [firstArg, secondArg] = vi.mocked(logger.warn).mock.calls[0];
+      expect(firstArg).toHaveProperty("err");
+      expect(firstArg.err).toHaveProperty("message");
+      expect(secondArg).toBe("AES-GCM decryption failed; refusing to fall back to insecure CBC");
     });
 
     test("logs warning and throws when GCM decryption fails with wrong key", () => {
@@ -366,11 +496,11 @@ describe("Crypto Utils", () => {
       expect(() => symmetricDecrypt(payload, wrongKey)).toThrow();
 
       // Verify logger.warn was called
-      expect(logger.warn).toHaveBeenCalledWith(
-        { err: expect.any(Error) },
-        "AES-GCM decryption failed; refusing to fall back to insecure CBC"
-      );
       expect(logger.warn).toHaveBeenCalledTimes(1);
+      const [firstArg, secondArg] = vi.mocked(logger.warn).mock.calls[0];
+      expect(firstArg).toHaveProperty("err");
+      expect(firstArg.err).toHaveProperty("message");
+      expect(secondArg).toBe("AES-GCM decryption failed; refusing to fall back to insecure CBC");
     });
   });
 });

apps/web/lib/crypto.ts

@@ -1,5 +1,5 @@
 import { compare, hash } from "bcryptjs";
-import { createCipheriv, createDecipheriv, createHash, randomBytes } from "crypto";
+import { createCipheriv, createDecipheriv, createHash, createHmac, randomBytes } from "node:crypto";
 import { logger } from "@formbricks/logger";
 import { ENCRYPTION_KEY } from "@/lib/constants";
 
@@ -141,3 +141,54 @@ export const parseApiKeyV2 = (key: string): { secret: string } | null => {
 
   return { secret };
 };
+
+// Standard Webhooks secret prefix
+const WEBHOOK_SECRET_PREFIX = "whsec_";
+
+/**
+ * Generate a Standard Webhooks compliant secret
+ * Following: https://github.com/standard-webhooks/standard-webhooks/blob/main/spec/standard-webhooks.md
+ *
+ * Format: whsec_ + base64(32 random bytes)
+ * @returns A webhook secret in format "whsec_{base64_encoded_random_bytes}"
+ */
+export const generateWebhookSecret = (): string => {
+  const secretBytes = randomBytes(32); // 256 bits of entropy
+  return `${WEBHOOK_SECRET_PREFIX}${secretBytes.toString("base64")}`;
+};
+
+/**
+ * Decode a Standard Webhooks secret to get the raw bytes
+ * Strips the whsec_ prefix and base64 decodes the rest
+ *
+ * @param secret The webhook secret (with or without whsec_ prefix)
+ * @returns Buffer containing the raw secret bytes
+ */
+export const getWebhookSecretBytes = (secret: string): Buffer => {
+  const base64Part = secret.startsWith(WEBHOOK_SECRET_PREFIX)
+    ? secret.slice(WEBHOOK_SECRET_PREFIX.length)
+    : secret;
+  return Buffer.from(base64Part, "base64");
+};
+
+/**
+ * Generate Standard Webhooks compliant signature
+ * Following: https://github.com/standard-webhooks/standard-webhooks/blob/main/spec/standard-webhooks.md
+ *
+ * @param webhookId Unique message identifier
+ * @param timestamp Unix timestamp in seconds
+ * @param payload The request body as a string
+ * @param secret The shared secret (whsec_ prefixed)
+ * @returns The signature in format "v1,{base64_signature}"
+ */
+export const generateStandardWebhookSignature = (
+  webhookId: string,
+  timestamp: number,
+  payload: string,
+  secret: string
+): string => {
+  const signedContent = `${webhookId}.${timestamp}.${payload}`;
+  const secretBytes = getWebhookSecretBytes(secret);
+  const signature = createHmac("sha256", secretBytes).update(signedContent).digest("base64");
+  return `v1,${signature}`;
+};

apps/web/lib/env.ts

@@ -23,6 +23,7 @@ export const env = createEnv({
     EMAIL_VERIFICATION_DISABLED: z.enum(["1", "0"]).optional(),
     ENCRYPTION_KEY: z.string(),
     ENTERPRISE_LICENSE_KEY: z.string().optional(),
+    ENVIRONMENT: z.enum(["production", "staging"]).default("production"),
     GITHUB_ID: z.string().optional(),
     GITHUB_SECRET: z.string().optional(),
     GOOGLE_CLIENT_ID: z.string().optional(),
@@ -151,6 +152,7 @@ export const env = createEnv({
     EMAIL_VERIFICATION_DISABLED: process.env.EMAIL_VERIFICATION_DISABLED,
     ENCRYPTION_KEY: process.env.ENCRYPTION_KEY,
     ENTERPRISE_LICENSE_KEY: process.env.ENTERPRISE_LICENSE_KEY,
+    ENVIRONMENT: process.env.ENVIRONMENT,
     GITHUB_ID: process.env.GITHUB_ID,
     GITHUB_SECRET: process.env.GITHUB_SECRET,
     GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,

apps/web/lib/i18n/utils.ts

@@ -88,7 +88,7 @@ export const getLanguageCode = (surveyLanguages: TSurveyLanguage[], languageCode
   return language?.default ? "default" : language?.language.code || "default";
 };
 
-export const iso639Identifiers = iso639Languages.map((language) => language.alpha2);
+export const iso639Identifiers = iso639Languages.map((language) => language.code);
 
 // Helper function to add language keys to a multi-language object (e.g. survey or question)
 // Iterates over the object recursively and adds empty strings for new language keys
@@ -130,217 +130,78 @@ export const appLanguages = [
     code: "en-US",
     label: {
       "en-US": "English (US)",
-      "de-DE": "Englisch (US)",
-      "pt-BR": "Inglês (EUA)",
-      "fr-FR": "Anglais (États-Unis)",
-      "zh-Hant-TW": "英文 (美國)",
-      "pt-PT": "Inglês (EUA)",
-      "ro-RO": "Engleză (SUA)",
-      "ja-JP": "英語（米国）",
-      "zh-Hans-CN": "英语（美国）",
-      "nl-NL": "Engels (VS)",
-      "es-ES": "Inglés (EE.UU.)",
-      "sv-SE": "Engelska (USA)",
-      "ru-RU": "Английский (США)",
     },
   },
   {
     code: "de-DE",
     label: {
       "en-US": "German",
-      "de-DE": "Deutsch",
-      "pt-BR": "Alemão",
-      "fr-FR": "Allemand",
-      "zh-Hant-TW": "德語",
-      "pt-PT": "Alemão",
-      "ro-RO": "Germană",
-      "ja-JP": "ドイツ語",
-      "zh-Hans-CN": "德语",
-      "nl-NL": "Duits",
-      "es-ES": "Alemán",
-      "sv-SE": "Tyska",
-      "ru-RU": "Немецкий",
     },
   },
   {
     code: "pt-BR",
     label: {
       "en-US": "Portuguese (Brazil)",
-      "de-DE": "Portugiesisch (Brasilien)",
-      "pt-BR": "Português (Brasil)",
-      "fr-FR": "Portugais (Brésil)",
-      "zh-Hant-TW": "葡萄牙語 (巴西)",
-      "pt-PT": "Português (Brasil)",
-      "ro-RO": "Portugheză (Brazilia)",
-      "ja-JP": "ポルトガル語（ブラジル）",
-      "zh-Hans-CN": "葡萄牙语（巴西）",
-      "nl-NL": "Portugees (Brazilië)",
-      "es-ES": "Portugués (Brasil)",
-      "sv-SE": "Portugisiska (Brasilien)",
-      "ru-RU": "Португальский (Бразилия)",
     },
   },
   {
     code: "fr-FR",
     label: {
       "en-US": "French",
-      "de-DE": "Französisch",
-      "pt-BR": "Francês",
-      "fr-FR": "Français",
-      "zh-Hant-TW": "法語",
-      "pt-PT": "Francês",
-      "ro-RO": "Franceză",
-      "ja-JP": "フランス語",
-      "zh-Hans-CN": "法语",
-      "nl-NL": "Frans",
-      "es-ES": "Francés",
-      "sv-SE": "Franska",
-      "ru-RU": "Французский",
     },
   },
   {
     code: "zh-Hant-TW",
     label: {
       "en-US": "Chinese (Traditional)",
-      "de-DE": "Chinesisch (Traditionell)",
-      "pt-BR": "Chinês (Tradicional)",
-      "fr-FR": "Chinois (Traditionnel)",
-      "zh-Hant-TW": "繁體中文",
-      "pt-PT": "Chinês (Tradicional)",
-      "ro-RO": "Chineza (Tradițională)",
-      "ja-JP": "中国語（繁体字）",
-      "zh-Hans-CN": "繁体中文",
-      "nl-NL": "Chinees (Traditioneel)",
-      "es-ES": "Chino (Tradicional)",
-      "sv-SE": "Kinesiska (traditionell)",
-      "ru-RU": "Китайский (традиционный)",
     },
   },
   {
     code: "pt-PT",
     label: {
       "en-US": "Portuguese (Portugal)",
-      "de-DE": "Portugiesisch (Portugal)",
-      "pt-BR": "Português (Portugal)",
-      "fr-FR": "Portugais (Portugal)",
-      "zh-Hant-TW": "葡萄牙語 (葡萄牙)",
-      "pt-PT": "Português (Portugal)",
-      "ro-RO": "Portugheză (Portugalia)",
-      "ja-JP": "ポルトガル語（ポルトガル）",
-      "zh-Hans-CN": "葡萄牙语（葡萄牙）",
-      "nl-NL": "Portugees (Portugal)",
-      "es-ES": "Portugués (Portugal)",
-      "sv-SE": "Portugisiska (Portugal)",
-      "ru-RU": "Португальский (Португалия)",
     },
   },
   {
     code: "ro-RO",
     label: {
       "en-US": "Romanian",
-      "de-DE": "Rumänisch",
-      "pt-BR": "Romeno",
-      "fr-FR": "Roumain",
-      "zh-Hant-TW": "羅馬尼亞語",
-      "pt-PT": "Romeno",
-      "ro-RO": "Română",
-      "ja-JP": "ルーマニア語",
-      "zh-Hans-CN": "罗马尼亚语",
-      "nl-NL": "Roemeens",
-      "es-ES": "Rumano",
-      "sv-SE": "Rumänska",
-      "ru-RU": "Румынский",
     },
   },
   {
     code: "ja-JP",
     label: {
       "en-US": "Japanese",
-      "de-DE": "Japanisch",
-      "pt-BR": "Japonês",
-      "fr-FR": "Japonais",
-      "zh-Hant-TW": "日語",
-      "pt-PT": "Japonês",
-      "ro-RO": "Japoneză",
-      "ja-JP": "日本語",
-      "zh-Hans-CN": "日语",
-      "nl-NL": "Japans",
-      "es-ES": "Japonés",
-      "sv-SE": "Japanska",
-      "ru-RU": "Японский",
     },
   },
   {
     code: "zh-Hans-CN",
     label: {
       "en-US": "Chinese (Simplified)",
-      "de-DE": "Chinesisch (Vereinfacht)",
-      "pt-BR": "Chinês (Simplificado)",
-      "fr-FR": "Chinois (Simplifié)",
-      "zh-Hant-TW": "簡體中文",
-      "pt-PT": "Chinês (Simplificado)",
-      "ro-RO": "Chineza (Simplificată)",
-      "ja-JP": "中国語（簡体字）",
-      "zh-Hans-CN": "简体中文",
-      "nl-NL": "Chinees (Vereenvoudigd)",
-      "es-ES": "Chino (Simplificado)",
-      "sv-SE": "Kinesiska (förenklad)",
-      "ru-RU": "Китайский (упрощенный)",
     },
   },
   {
     code: "nl-NL",
     label: {
       "en-US": "Dutch",
-      "de-DE": "Niederländisch",
-      "pt-BR": "Holandês",
-      "fr-FR": "Néerlandais",
-      "zh-Hant-TW": "荷蘭語",
-      "pt-PT": "Holandês",
-      "ro-RO": "Olandeza",
-      "ja-JP": "オランダ語",
-      "zh-Hans-CN": "荷兰语",
-      "nl-NL": "Nederlands",
-      "es-ES": "Neerlandés",
-      "sv-SE": "Nederländska",
-      "ru-RU": "Голландский",
     },
   },
   {
     code: "es-ES",
     label: {
       "en-US": "Spanish",
-      "de-DE": "Spanisch",
-      "pt-BR": "Espanhol",
-      "fr-FR": "Espagnol",
-      "zh-Hant-TW": "西班牙語",
-      "pt-PT": "Espanhol",
-      "ro-RO": "Spaniol",
-      "ja-JP": "スペイン語",
-      "zh-Hans-CN": "西班牙语",
-      "nl-NL": "Spaans",
-      "es-ES": "Español",
-      "sv-SE": "Spanska",
-      "ru-RU": "Испанский",
     },
   },
   {
     code: "sv-SE",
     label: {
       "en-US": "Swedish",
-      "de-DE": "Schwedisch",
-      "pt-BR": "Sueco",
-      "fr-FR": "Suédois",
-      "zh-Hant-TW": "瑞典語",
-      "pt-PT": "Sueco",
-      "ro-RO": "Suedeză",
-      "ja-JP": "スウェーデン語",
-      "zh-Hans-CN": "瑞典语",
-      "nl-NL": "Zweeds",
-      "es-ES": "Sueco",
-      "sv-SE": "Svenska",
-      "ru-RU": "Шведский",
+    },
+  },
+  {
+    code: "ru-RU",
+    label: {
+      "en-US": "Russian",
     },
   },
 ];
-export { iso639Languages };