fix(reporting): add table alias parameter to date range clause method

- Modified SQL queries in the ReportingMembersController to correctly reference user IDs from the team_members table, ensuring accurate time logged calculations.
- Added a check in the on_quick_assign_or_remove command to handle cases where no team member is found, improving error handling and logging.

.claude/settings.local.json

@@ -1,13 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(find:*)",
-      "Bash(npm run build:*)",
-      "Bash(npm run type-check:*)",
-      "Bash(npm run:*)",
-      "Bash(grep:*)",
-      "Bash(rm:*)"
-    ],
-    "deny": []
-  }
-}

.cursor/rules/antd-components.mdc

@@ -1,237 +0,0 @@
----
-alwaysApply: true
----
-# Ant Design Import Rules for Worklenz
-
-## 🚨 CRITICAL: Always Use Centralized Imports
-
-**NEVER import Ant Design components directly from 'antd' or '@ant-design/icons'**
-
-### ✅ Correct Import Pattern
-```typescript
-import { Button, Input, Select, EditOutlined, PlusOutlined } from '@antd-imports';
-// or
-import { Button, Input, Select, EditOutlined, PlusOutlined } from '@/shared/antd-imports';
-```
-
-### ❌ Forbidden Import Patterns
-```typescript
-// NEVER do this:
-import { Button, Input, Select } from 'antd';
-import { EditOutlined, PlusOutlined } from '@ant-design/icons';
-```
-
-## Why This Rule Exists
-
-### Benefits of Centralized Imports:
-- **Better Tree-Shaking**: Optimized bundle size through centralized management
-- **Consistent React Context**: Proper context sharing across components
-- **Type Safety**: Centralized TypeScript definitions
-- **Maintainability**: Single source of truth for all Ant Design imports
-- **Performance**: Reduced bundle size and improved loading times
-
-## What's Available in `@antd-imports`
-
-### Core Components
-- **Layout**: Layout, Row, Col, Flex, Divider, Space
-- **Navigation**: Menu, Tabs, Breadcrumb, Pagination
-- **Data Entry**: Input, Select, DatePicker, TimePicker, Form, Checkbox, InputNumber
-- **Data Display**: Table, List, Card, Tag, Avatar, Badge, Progress, Statistic
-- **Feedback**: Modal, Drawer, Alert, Message, Notification, Spin, Skeleton, Result
-- **Other**: Button, Typography, Tooltip, Popconfirm, Dropdown, ConfigProvider
-
-### Icons
-Common icons including: EditOutlined, DeleteOutlined, PlusOutlined, MoreOutlined, CheckOutlined, CloseOutlined, CalendarOutlined, UserOutlined, TeamOutlined, and many more.
-
-### Utilities
-- **appMessage**: Centralized message utility
-- **appNotification**: Centralized notification utility
-- **antdConfig**: Default Ant Design configuration
-- **taskManagementAntdConfig**: Task-specific configuration
-
-## Implementation Guidelines
-
-### When Creating New Components:
-1. **Always** import from `@/shared/antd-imports`
-2. Use `appMessage` and `appNotification` for user feedback
-3. Apply `antdConfig` for consistent styling
-4. Use `taskManagementAntdConfig` for task-related components
-
-### When Refactoring Existing Code:
-1. Replace direct 'antd' imports with `@/shared/antd-imports`
-2. Replace direct '@ant-design/icons' imports with `@/shared/antd-imports`
-3. Update any custom message/notification calls to use the utilities
-
-### File Location
-The centralized import file is located at: `worklenz-frontend/src/shared/antd-imports.ts`
-
-## Examples
-
-### Component Creation
-```typescript
-import React from 'react';
-import { Button, Input, Modal, EditOutlined, appMessage } from '@antd-imports';
-
-const MyComponent = () => {
-  const handleClick = () => {
-    appMessage.success('Operation completed!');
-  };
-
-  return (
-    <Button icon={<EditOutlined />} onClick={handleClick}>
-      Edit Item
-    </Button>
-  );
-};
-```
-
-### Form Implementation
-```typescript
-import { Form, Input, Select, Button, DatePicker } from '@antd-imports';
-
-const MyForm = () => {
-  return (
-    <Form layout="vertical">
-      <Form.Item label="Name" name="name">
-        <Input />
-      </Form.Item>
-      <Form.Item label="Type" name="type">
-        <Select options={options} />
-      </Form.Item>
-      <Form.Item label="Date" name="date">
-        <DatePicker />
-      </Form.Item>
-    </Form>
-  );
-};
-```
-
-## Enforcement
-
-This rule is **MANDATORY** and applies to:
-- All new component development
-- All code refactoring
-- All bug fixes
-- All feature implementations
-
-**Violations will result in code review rejection.**
-
-### File Path:
-The centralized file is located at: `worklenz-frontend/src/shared/antd-imports.ts`
-# Ant Design Import Rules for Worklenz
-
-## 🚨 CRITICAL: Always Use Centralized Imports
-
-**NEVER import Ant Design components directly from 'antd' or '@ant-design/icons'**
-
-### ✅ Correct Import Pattern
-```typescript
-import { Button, Input, Select, EditOutlined, PlusOutlined } from '@antd-imports';
-// or
-import { Button, Input, Select, EditOutlined, PlusOutlined } from '@/shared/antd-imports';
-```
-
-### ❌ Forbidden Import Patterns
-```typescript
-// NEVER do this:
-import { Button, Input, Select } from 'antd';
-import { EditOutlined, PlusOutlined } from '@ant-design/icons';
-```
-
-## Why This Rule Exists
-
-### Benefits of Centralized Imports:
-- **Better Tree-Shaking**: Optimized bundle size through centralized management
-- **Consistent React Context**: Proper context sharing across components
-- **Type Safety**: Centralized TypeScript definitions
-- **Maintainability**: Single source of truth for all Ant Design imports
-- **Performance**: Reduced bundle size and improved loading times
-
-## What's Available in `@antd-imports`
-
-### Core Components
-- **Layout**: Layout, Row, Col, Flex, Divider, Space
-- **Navigation**: Menu, Tabs, Breadcrumb, Pagination
-- **Data Entry**: Input, Select, DatePicker, TimePicker, Form, Checkbox, InputNumber
-- **Data Display**: Table, List, Card, Tag, Avatar, Badge, Progress, Statistic
-- **Feedback**: Modal, Drawer, Alert, Message, Notification, Spin, Skeleton, Result
-- **Other**: Button, Typography, Tooltip, Popconfirm, Dropdown, ConfigProvider
-
-### Icons
-Common icons including: EditOutlined, DeleteOutlined, PlusOutlined, MoreOutlined, CheckOutlined, CloseOutlined, CalendarOutlined, UserOutlined, TeamOutlined, and many more.
-
-### Utilities
-- **appMessage**: Centralized message utility
-- **appNotification**: Centralized notification utility
-- **antdConfig**: Default Ant Design configuration
-- **taskManagementAntdConfig**: Task-specific configuration
-
-## Implementation Guidelines
-
-### When Creating New Components:
-1. **Always** import from `@antd-imports` or `@/shared/antd-imports`
-2. Use `appMessage` and `appNotification` for user feedback
-3. Apply `antdConfig` for consistent styling
-4. Use `taskManagementAntdConfig` for task-related components
-
-### When Refactoring Existing Code:
-1. Replace direct 'antd' imports with `@antd-imports`
-2. Replace direct '@ant-design/icons' imports with `@antd-imports`
-3. Update any custom message/notification calls to use the utilities
-
-### File Location
-The centralized import file is located at: `worklenz-frontend/src/shared/antd-imports.ts`
-
-## Examples
-
-### Component Creation
-```typescript
-import React from 'react';
-import { Button, Input, Modal, EditOutlined, appMessage } from '@antd-imports';
-
-const MyComponent = () => {
-  const handleClick = () => {
-    appMessage.success('Operation completed!');
-  };
-
-  return (
-    <Button icon={<EditOutlined />} onClick={handleClick}>
-      Edit Item
-    </Button>
-  );
-};
-```
-
-### Form Implementation
-```typescript
-import { Form, Input, Select, Button, DatePicker } from '@antd-imports';
-
-const MyForm = () => {
-  return (
-    <Form layout="vertical">
-      <Form.Item label="Name" name="name">
-        <Input />
-      </Form.Item>
-      <Form.Item label="Type" name="type">
-        <Select options={options} />
-      </Form.Item>
-      <Form.Item label="Date" name="date">
-        <DatePicker />
-      </Form.Item>
-    </Form>
-  );
-};
-```
-
-## Enforcement
-
-This rule is **MANDATORY** and applies to:
-- All new component development
-- All code refactoring
-- All bug fixes
-- All feature implementations
-
-**Violations will result in code review rejection.**
-
-### File Path:
-The centralized file is located at: `worklenz-frontend/src/shared/antd-imports.ts`

.gitignore

@@ -36,6 +36,8 @@ lerna-debug.log*
 .vscode/*
 !.vscode/extensions.json
 .idea/
+.cursor/
+.claude/
 .DS_Store
 *.suo
 *.ntvs*

worklenz-backend/database/migrations/release-v2.1.4/20250724000000-add-survey-tables.sql

@@ -0,0 +1,93 @@
+-- Migration: Add survey tables for account setup questionnaire
+-- Date: 2025-07-24
+-- Description: Creates tables to store survey questions and user responses for account setup flow
+
+BEGIN;
+
+-- Create surveys table to define different types of surveys
+CREATE TABLE IF NOT EXISTS surveys (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    description TEXT,
+    survey_type VARCHAR(50) DEFAULT 'account_setup' NOT NULL, -- 'account_setup', 'onboarding', 'feedback'
+    is_active BOOLEAN DEFAULT TRUE NOT NULL,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+-- Create survey_questions table to store individual questions
+CREATE TABLE IF NOT EXISTS survey_questions (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    survey_id UUID REFERENCES surveys(id) ON DELETE CASCADE NOT NULL,
+    question_key VARCHAR(100) NOT NULL, -- Used for localization keys
+    question_type VARCHAR(50) NOT NULL, -- 'single_choice', 'multiple_choice', 'text'
+    is_required BOOLEAN DEFAULT FALSE NOT NULL,
+    sort_order INTEGER DEFAULT 0 NOT NULL,
+    options JSONB, -- For choice questions, store options as JSON array
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+-- Create survey_responses table to track user responses to surveys
+CREATE TABLE IF NOT EXISTS survey_responses (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    survey_id UUID REFERENCES surveys(id) ON DELETE CASCADE NOT NULL,
+    user_id UUID REFERENCES users(id) ON DELETE CASCADE NOT NULL,
+    is_completed BOOLEAN DEFAULT FALSE NOT NULL,
+    started_at TIMESTAMP DEFAULT now() NOT NULL,
+    completed_at TIMESTAMP,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+-- Create survey_answers table to store individual question answers
+CREATE TABLE IF NOT EXISTS survey_answers (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    response_id UUID REFERENCES survey_responses(id) ON DELETE CASCADE NOT NULL,
+    question_id UUID REFERENCES survey_questions(id) ON DELETE CASCADE NOT NULL,
+    answer_text TEXT,
+    answer_json JSONB, -- For multiple choice answers stored as array
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+-- Add performance indexes
+CREATE INDEX IF NOT EXISTS idx_surveys_type_active ON surveys(survey_type, is_active);
+CREATE INDEX IF NOT EXISTS idx_survey_questions_survey_order ON survey_questions(survey_id, sort_order);
+CREATE INDEX IF NOT EXISTS idx_survey_responses_user_survey ON survey_responses(user_id, survey_id);
+CREATE INDEX IF NOT EXISTS idx_survey_responses_completed ON survey_responses(survey_id, is_completed);
+CREATE INDEX IF NOT EXISTS idx_survey_answers_response ON survey_answers(response_id);
+
+-- Add constraints
+ALTER TABLE survey_questions ADD CONSTRAINT survey_questions_sort_order_check CHECK (sort_order >= 0);
+ALTER TABLE survey_questions ADD CONSTRAINT survey_questions_type_check CHECK (question_type IN ('single_choice', 'multiple_choice', 'text'));
+
+-- Add unique constraint to prevent duplicate responses per user per survey
+ALTER TABLE survey_responses ADD CONSTRAINT unique_user_survey_response UNIQUE (user_id, survey_id);
+
+-- Add unique constraint to prevent duplicate answers per question per response
+ALTER TABLE survey_answers ADD CONSTRAINT unique_response_question_answer UNIQUE (response_id, question_id);
+
+-- Insert the default account setup survey
+INSERT INTO surveys (name, description, survey_type, is_active) VALUES 
+('Account Setup Survey', 'Initial questionnaire during account setup to understand user needs', 'account_setup', true)
+ON CONFLICT DO NOTHING;
+
+-- Get the survey ID for inserting questions
+DO $$
+DECLARE
+    survey_uuid UUID;
+BEGIN
+    SELECT id INTO survey_uuid FROM surveys WHERE survey_type = 'account_setup' AND name = 'Account Setup Survey' LIMIT 1;
+    
+    -- Insert survey questions
+    INSERT INTO survey_questions (survey_id, question_key, question_type, is_required, sort_order, options) VALUES
+    (survey_uuid, 'organization_type', 'single_choice', true, 1, '["freelancer", "startup", "small_medium_business", "agency", "enterprise", "other"]'),
+    (survey_uuid, 'user_role', 'single_choice', true, 2, '["founder_ceo", "project_manager", "software_developer", "designer", "operations", "other"]'),
+    (survey_uuid, 'main_use_cases', 'multiple_choice', true, 3, '["task_management", "team_collaboration", "resource_planning", "client_communication", "time_tracking", "other"]'),
+    (survey_uuid, 'previous_tools', 'text', false, 4, null),
+    (survey_uuid, 'how_heard_about', 'single_choice', false, 5, '["google_search", "twitter", "linkedin", "friend_colleague", "blog_article", "other"]')
+    ON CONFLICT DO NOTHING;
+END $$;
+
+COMMIT;

worklenz-backend/database/sql/1_tables.sql

@@ -2297,3 +2297,60 @@ ALTER TABLE organization_working_days
 ALTER TABLE organization_working_days
     ADD CONSTRAINT org_organization_id_fk
         FOREIGN KEY (organization_id) REFERENCES organizations;
+
+-- Survey tables for account setup questionnaire
+CREATE TABLE IF NOT EXISTS surveys (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    name VARCHAR(255) NOT NULL,
+    description TEXT,
+    survey_type VARCHAR(50) DEFAULT 'account_setup' NOT NULL,
+    is_active BOOLEAN DEFAULT TRUE NOT NULL,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS survey_questions (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    survey_id UUID REFERENCES surveys(id) ON DELETE CASCADE NOT NULL,
+    question_key VARCHAR(100) NOT NULL,
+    question_type VARCHAR(50) NOT NULL,
+    is_required BOOLEAN DEFAULT FALSE NOT NULL,
+    sort_order INTEGER DEFAULT 0 NOT NULL,
+    options JSONB,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS survey_responses (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    survey_id UUID REFERENCES surveys(id) ON DELETE CASCADE NOT NULL,
+    user_id UUID REFERENCES users(id) ON DELETE CASCADE NOT NULL,
+    is_completed BOOLEAN DEFAULT FALSE NOT NULL,
+    started_at TIMESTAMP DEFAULT now() NOT NULL,
+    completed_at TIMESTAMP,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+CREATE TABLE IF NOT EXISTS survey_answers (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    response_id UUID REFERENCES survey_responses(id) ON DELETE CASCADE NOT NULL,
+    question_id UUID REFERENCES survey_questions(id) ON DELETE CASCADE NOT NULL,
+    answer_text TEXT,
+    answer_json JSONB,
+    created_at TIMESTAMP DEFAULT now() NOT NULL,
+    updated_at TIMESTAMP DEFAULT now() NOT NULL
+);
+
+-- Survey table indexes
+CREATE INDEX IF NOT EXISTS idx_surveys_type_active ON surveys(survey_type, is_active);
+CREATE INDEX IF NOT EXISTS idx_survey_questions_survey_order ON survey_questions(survey_id, sort_order);
+CREATE INDEX IF NOT EXISTS idx_survey_responses_user_survey ON survey_responses(user_id, survey_id);
+CREATE INDEX IF NOT EXISTS idx_survey_responses_completed ON survey_responses(survey_id, is_completed);
+CREATE INDEX IF NOT EXISTS idx_survey_answers_response ON survey_answers(response_id);
+
+-- Survey table constraints
+ALTER TABLE survey_questions ADD CONSTRAINT survey_questions_sort_order_check CHECK (sort_order >= 0);
+ALTER TABLE survey_questions ADD CONSTRAINT survey_questions_type_check CHECK (question_type IN ('single_choice', 'multiple_choice', 'text'));
+ALTER TABLE survey_responses ADD CONSTRAINT unique_user_survey_response UNIQUE (user_id, survey_id);
+ALTER TABLE survey_answers ADD CONSTRAINT unique_response_question_answer UNIQUE (response_id, question_id);

worklenz-backend/database/sql/2_dml.sql

@@ -142,3 +142,25 @@ DROP FUNCTION sys_insert_license_types();
 INSERT INTO timezones (name, abbrev, utc_offset)
 SELECT name, abbrev, utc_offset
 FROM pg_timezone_names;
+
+-- Insert default account setup survey
+INSERT INTO surveys (name, description, survey_type, is_active) VALUES 
+('Account Setup Survey', 'Initial questionnaire during account setup to understand user needs', 'account_setup', true)
+ON CONFLICT DO NOTHING;
+
+-- Insert survey questions for account setup survey
+DO $$
+DECLARE
+    survey_uuid UUID;
+BEGIN
+    SELECT id INTO survey_uuid FROM surveys WHERE survey_type = 'account_setup' AND name = 'Account Setup Survey' LIMIT 1;
+    
+    -- Insert survey questions
+    INSERT INTO survey_questions (survey_id, question_key, question_type, is_required, sort_order, options) VALUES
+    (survey_uuid, 'organization_type', 'single_choice', true, 1, '["freelancer", "startup", "small_medium_business", "agency", "enterprise", "other"]'),
+    (survey_uuid, 'user_role', 'single_choice', true, 2, '["founder_ceo", "project_manager", "software_developer", "designer", "operations", "other"]'),
+    (survey_uuid, 'main_use_cases', 'multiple_choice', true, 3, '["task_management", "team_collaboration", "resource_planning", "client_communication", "time_tracking", "other"]'),
+    (survey_uuid, 'previous_tools', 'text', false, 4, null),
+    (survey_uuid, 'how_heard_about', 'single_choice', false, 5, '["google_search", "twitter", "linkedin", "friend_colleague", "blog_article", "other"]')
+    ON CONFLICT DO NOTHING;
+END $$;

worklenz-backend/src/controllers/reporting/reporting-controller-base-with-timezone.ts

@@ -25,9 +25,10 @@ export default abstract class ReportingControllerBaseWithTimezone extends Workle
    * @param key - Date range key (e.g., YESTERDAY, LAST_WEEK)
    * @param dateRange - Array of date strings
    * @param userTimezone - User's timezone (e.g., 'America/New_York')
+   * @param tableAlias - Table alias to use (e.g., 'twl', 'task_work_log')
    * @returns SQL clause for date filtering
    */
-  protected static getDateRangeClauseWithTimezone(key: string, dateRange: string[], userTimezone: string) {
+  protected static getDateRangeClauseWithTimezone(key: string, dateRange: string[], userTimezone: string, tableAlias: string = 'task_work_log') {
     // For custom date ranges
     if (dateRange.length === 2) {
       // Convert dates to user's timezone start/end of day
@@ -40,10 +41,10 @@ export default abstract class ReportingControllerBaseWithTimezone extends Workle
       
       if (start.isSame(end, 'day')) {
         // Single day selection
-        return `AND task_work_log.created_at >= '${startUtc}'::TIMESTAMP AND task_work_log.created_at <= '${endUtc}'::TIMESTAMP`;
+        return `AND ${tableAlias}.created_at >= '${startUtc}'::TIMESTAMP AND ${tableAlias}.created_at <= '${endUtc}'::TIMESTAMP`;
       }
       
-      return `AND task_work_log.created_at >= '${startUtc}'::TIMESTAMP AND task_work_log.created_at <= '${endUtc}'::TIMESTAMP`;
+      return `AND ${tableAlias}.created_at >= '${startUtc}'::TIMESTAMP AND ${tableAlias}.created_at <= '${endUtc}'::TIMESTAMP`;
     }
 
     // For predefined ranges, calculate based on user's timezone
@@ -74,7 +75,7 @@ export default abstract class ReportingControllerBaseWithTimezone extends Workle
     if (startDate && endDate) {
       const startUtc = startDate.utc().format("YYYY-MM-DD HH:mm:ss");
       const endUtc = endDate.utc().format("YYYY-MM-DD HH:mm:ss");
-      return `AND task_work_log.created_at >= '${startUtc}'::TIMESTAMP AND task_work_log.created_at <= '${endUtc}'::TIMESTAMP`;
+      return `AND ${tableAlias}.created_at >= '${startUtc}'::TIMESTAMP AND ${tableAlias}.created_at <= '${endUtc}'::TIMESTAMP`;
     }
 
     return "";

worklenz-backend/src/controllers/reporting/reporting-members-controller.ts

@@ -324,8 +324,8 @@ export default class ReportingMembersController extends ReportingControllerBaseW
                     (SELECT color_code FROM project_phases WHERE id = (SELECT phase_id FROM task_phase WHERE task_id = t.id)) AS phase_color,
 
                     (total_minutes * 60) AS total_minutes,
-                    (SELECT SUM(time_spent) FROM task_work_log WHERE task_id = t.id AND ta.team_member_id = $1) AS time_logged,
-                    ((SELECT SUM(time_spent) FROM task_work_log WHERE task_id = t.id AND ta.team_member_id = $1) - (total_minutes * 60)) AS overlogged_time`;
+                    (SELECT SUM(time_spent) FROM task_work_log twl WHERE twl.task_id = t.id AND twl.user_id = (SELECT user_id FROM team_members WHERE id = $1)) AS time_logged,
+                    ((SELECT SUM(time_spent) FROM task_work_log twl WHERE twl.task_id = t.id AND twl.user_id = (SELECT user_id FROM team_members WHERE id = $1)) - (total_minutes * 60)) AS overlogged_time`;
   }
 
   protected static getActivityLogsOverdue(key: string, dateRange: string[]) {
@@ -548,7 +548,7 @@ export default class ReportingMembersController extends ReportingControllerBaseW
 
     // Get user timezone for proper date filtering
     const userTimezone = await this.getUserTimezone(req.user?.id as string);
-    const durationClause = this.getDateRangeClauseWithTimezone(duration as string || DATE_RANGES.LAST_WEEK, dateRange, userTimezone);
+    const durationClause = this.getDateRangeClauseWithTimezone(duration as string || DATE_RANGES.LAST_WEEK, dateRange, userTimezone, 'twl');
     const minMaxDateClause = this.getMinMaxDates(duration as string || DATE_RANGES.LAST_WEEK, dateRange, "task_work_log");
     const memberName = (req.query.member_name as string)?.trim() || null;
 
@@ -1101,7 +1101,7 @@ export default class ReportingMembersController extends ReportingControllerBaseW
 
     // Get user timezone for proper date filtering
     const userTimezone = await this.getUserTimezone(req.user?.id as string);
-    const durationClause = this.getDateRangeClauseWithTimezone(duration || DATE_RANGES.LAST_WEEK, date_range, userTimezone);
+    const durationClause = this.getDateRangeClauseWithTimezone(duration || DATE_RANGES.LAST_WEEK, date_range, userTimezone, 'twl');
     const minMaxDateClause = this.getMinMaxDates(duration || DATE_RANGES.LAST_WEEK, date_range, "task_work_log");
 
     const billableQuery = this.buildBillableQuery(billable);

worklenz-backend/src/controllers/survey-controller.ts

@@ -0,0 +1,201 @@
+import { IWorkLenzRequest } from "../interfaces/worklenz-request";
+import { IWorkLenzResponse } from "../interfaces/worklenz-response";
+import { ServerResponse } from "../models/server-response";
+import WorklenzControllerBase from "./worklenz-controller-base";
+import HandleExceptions from "../decorators/handle-exceptions";
+import { ISurveySubmissionRequest } from "../interfaces/survey";
+import db from "../config/db";
+
+export default class SurveyController extends WorklenzControllerBase {
+  @HandleExceptions()
+  public static async getAccountSetupSurvey(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    const q = `
+      SELECT 
+        s.id,
+        s.name,
+        s.description,
+        s.survey_type,
+        s.is_active,
+        COALESCE(
+          json_agg(
+            json_build_object(
+              'id', sq.id,
+              'survey_id', sq.survey_id,
+              'question_key', sq.question_key,
+              'question_type', sq.question_type,
+              'is_required', sq.is_required,
+              'sort_order', sq.sort_order,
+              'options', sq.options
+            ) ORDER BY sq.sort_order
+          ) FILTER (WHERE sq.id IS NOT NULL), 
+          '[]'
+        ) AS questions
+      FROM surveys s
+      LEFT JOIN survey_questions sq ON s.id = sq.survey_id
+      WHERE s.survey_type = 'account_setup' AND s.is_active = true
+      GROUP BY s.id, s.name, s.description, s.survey_type, s.is_active
+      LIMIT 1;
+    `;
+
+    const result = await db.query(q);
+    const [survey] = result.rows;
+
+    if (!survey) {
+      return res.status(200).send(new ServerResponse(false, null, "Account setup survey not found"));
+    }
+
+    return res.status(200).send(new ServerResponse(true, survey));
+  }
+
+  @HandleExceptions()
+  public static async submitSurveyResponse(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    const userId = req.user?.id;
+    const body = req.body as ISurveySubmissionRequest;
+
+    if (!userId) {
+      return res.status(200).send(new ServerResponse(false, null, "User not authenticated"));
+    }
+
+    if (!body.survey_id || !body.answers || !Array.isArray(body.answers)) {
+      return res.status(200).send(new ServerResponse(false, null, "Invalid survey submission data"));
+    }
+
+    // Check if user has already submitted a response for this survey
+    const existingResponseQuery = `
+      SELECT id FROM survey_responses 
+      WHERE user_id = $1 AND survey_id = $2;
+    `;
+    const existingResult = await db.query(existingResponseQuery, [userId, body.survey_id]);
+
+    let responseId: string;
+
+    if (existingResult.rows.length > 0) {
+      // Update existing response
+      responseId = existingResult.rows[0].id;
+      
+      const updateResponseQuery = `
+        UPDATE survey_responses 
+        SET is_completed = true, completed_at = NOW(), updated_at = NOW()
+        WHERE id = $1;
+      `;
+      await db.query(updateResponseQuery, [responseId]);
+
+      // Delete existing answers
+      const deleteAnswersQuery = `DELETE FROM survey_answers WHERE response_id = $1;`;
+      await db.query(deleteAnswersQuery, [responseId]);
+    } else {
+      // Create new response
+      const createResponseQuery = `
+        INSERT INTO survey_responses (survey_id, user_id, is_completed, completed_at)
+        VALUES ($1, $2, true, NOW())
+        RETURNING id;
+      `;
+      const responseResult = await db.query(createResponseQuery, [body.survey_id, userId]);
+      responseId = responseResult.rows[0].id;
+    }
+
+    // Insert new answers
+    if (body.answers.length > 0) {
+      const answerValues: string[] = [];
+      const params: any[] = [];
+      
+      body.answers.forEach((answer, index) => {
+        const baseIndex = index * 4;
+        answerValues.push(`($${baseIndex + 1}, $${baseIndex + 2}, $${baseIndex + 3}, $${baseIndex + 4})`);
+        
+        params.push(
+          responseId,
+          answer.question_id,
+          answer.answer_text || null,
+          answer.answer_json ? JSON.stringify(answer.answer_json) : null
+        );
+      });
+
+      const insertAnswersQuery = `
+        INSERT INTO survey_answers (response_id, question_id, answer_text, answer_json)
+        VALUES ${answerValues.join(', ')};
+      `;
+
+      await db.query(insertAnswersQuery, params);
+    }
+
+    return res.status(200).send(new ServerResponse(true, { response_id: responseId }));
+  }
+
+  @HandleExceptions()
+  public static async getUserSurveyResponse(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    const userId = req.user?.id;
+    const surveyId = req.params.survey_id;
+
+    if (!userId) {
+      return res.status(200).send(new ServerResponse(false, null, "User not authenticated"));
+    }
+
+    const q = `
+      SELECT 
+        sr.id,
+        sr.survey_id,
+        sr.user_id,
+        sr.is_completed,
+        sr.started_at,
+        sr.completed_at,
+        COALESCE(
+          json_agg(
+            json_build_object(
+              'question_id', sa.question_id,
+              'answer_text', sa.answer_text,
+              'answer_json', sa.answer_json
+            )
+          ) FILTER (WHERE sa.id IS NOT NULL),
+          '[]'
+        ) AS answers
+      FROM survey_responses sr
+      LEFT JOIN survey_answers sa ON sr.id = sa.response_id
+      WHERE sr.user_id = $1 AND sr.survey_id = $2
+      GROUP BY sr.id, sr.survey_id, sr.user_id, sr.is_completed, sr.started_at, sr.completed_at;
+    `;
+
+    const result = await db.query(q, [userId, surveyId]);
+    const [response] = result.rows;
+
+    if (!response) {
+      return res.status(200).send(new ServerResponse(false, null, "Survey response not found"));
+    }
+
+    return res.status(200).send(new ServerResponse(true, response));
+  }
+
+  @HandleExceptions()
+  public static async checkAccountSetupSurveyStatus(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+    const userId = req.user?.id;
+
+    if (!userId) {
+      return res.status(200).send(new ServerResponse(false, null, "User not authenticated"));
+    }
+
+    const q = `
+      SELECT EXISTS(
+        SELECT 1 
+        FROM survey_responses sr
+        INNER JOIN surveys s ON sr.survey_id = s.id
+        WHERE sr.user_id = $1 
+        AND s.survey_type = 'account_setup'
+        AND sr.is_completed = true
+      ) as is_completed,
+      (
+        SELECT sr.completed_at
+        FROM survey_responses sr
+        INNER JOIN surveys s ON sr.survey_id = s.id
+        WHERE sr.user_id = $1 
+        AND s.survey_type = 'account_setup'
+        AND sr.is_completed = true
+        LIMIT 1
+      ) as completed_at;
+    `;
+
+    const result = await db.query(q, [userId]);
+    const status = result.rows[0] || { is_completed: false, completed_at: null };
+
+    return res.status(200).send(new ServerResponse(true, status));
+  }
+}

worklenz-backend/src/interfaces/survey.ts

@@ -0,0 +1,37 @@
+export interface ISurveyQuestion {
+  id: string;
+  survey_id: string;
+  question_key: string;
+  question_type: 'single_choice' | 'multiple_choice' | 'text';
+  is_required: boolean;
+  sort_order: number;
+  options?: string[];
+}
+
+export interface ISurvey {
+  id: string;
+  name: string;
+  description?: string;
+  survey_type: 'account_setup' | 'onboarding' | 'feedback';
+  is_active: boolean;
+  questions?: ISurveyQuestion[];
+}
+
+export interface ISurveyAnswer {
+  question_id: string;
+  answer_text?: string;
+  answer_json?: string[];
+}
+
+export interface ISurveyResponse {
+  id?: string;
+  survey_id: string;
+  user_id?: string;
+  is_completed: boolean;
+  answers: ISurveyAnswer[];
+}
+
+export interface ISurveySubmissionRequest {
+  survey_id: string;
+  answers: ISurveyAnswer[];
+}

worklenz-backend/src/middlewares/validators/survey-submission-validator.ts

@@ -0,0 +1,53 @@
+import { NextFunction } from "express";
+import { IWorkLenzRequest } from "../../interfaces/worklenz-request";
+import { IWorkLenzResponse } from "../../interfaces/worklenz-response";
+import { ServerResponse } from "../../models/server-response";
+import { ISurveySubmissionRequest } from "../../interfaces/survey";
+
+export default function surveySubmissionValidator(req: IWorkLenzRequest, res: IWorkLenzResponse, next: NextFunction): IWorkLenzResponse | void {
+  const body = req.body as ISurveySubmissionRequest;
+
+  if (!body) {
+    return res.status(200).send(new ServerResponse(false, null, "Request body is required"));
+  }
+
+  if (!body.survey_id || typeof body.survey_id !== 'string') {
+    return res.status(200).send(new ServerResponse(false, null, "Survey ID is required and must be a string"));
+  }
+
+  if (!body.answers || !Array.isArray(body.answers)) {
+    return res.status(200).send(new ServerResponse(false, null, "Answers are required and must be an array"));
+  }
+
+  // Validate each answer
+  for (let i = 0; i < body.answers.length; i++) {
+    const answer = body.answers[i];
+    
+    if (!answer.question_id || typeof answer.question_id !== 'string') {
+      return res.status(200).send(new ServerResponse(false, null, `Answer ${i + 1}: Question ID is required and must be a string`));
+    }
+
+    // answer_text and answer_json are both optional - users can submit empty answers
+
+    // Validate answer_text if provided
+    if (answer.answer_text && typeof answer.answer_text !== 'string') {
+      return res.status(200).send(new ServerResponse(false, null, `Answer ${i + 1}: answer_text must be a string`));
+    }
+
+    // Validate answer_json if provided
+    if (answer.answer_json && !Array.isArray(answer.answer_json)) {
+      return res.status(200).send(new ServerResponse(false, null, `Answer ${i + 1}: answer_json must be an array`));
+    }
+
+    // Validate answer_json items are strings
+    if (answer.answer_json) {
+      for (let j = 0; j < answer.answer_json.length; j++) {
+        if (typeof answer.answer_json[j] !== 'string') {
+          return res.status(200).send(new ServerResponse(false, null, `Answer ${i + 1}: answer_json items must be strings`));
+        }
+      }
+    }
+  }
+
+  return next();
+}

worklenz-backend/src/public/locales/alb/task-list-filters.json

@@ -81,5 +81,12 @@
   "delete": "Fshi",
   "enterStatusName": "Shkruani emrin e statusit",
   "selectCategory": "Zgjidh kategorinë",
-  "close": "Mbyll"
+  "close": "Mbyll",
+  "clearSort": "Pastro Renditjen",
+  "sortAscending": "Rendit në Rritje",
+  "sortDescending": "Rendit në Zbritje",
+  "sortByField": "Rendit sipas {{field}}",
+  "ascendingOrder": "Rritës",
+  "descendingOrder": "Zbritës",
+  "currentSort": "Renditja aktuale: {{field}} {{order}}"
 }

worklenz-backend/src/public/locales/de/task-list-filters.json

@@ -81,5 +81,12 @@
   "delete": "Löschen",
   "enterStatusName": "Statusnamen eingeben",
   "selectCategory": "Kategorie auswählen",
-  "close": "Schließen"
+  "close": "Schließen",
+  "clearSort": "Sortierung löschen",
+  "sortAscending": "Aufsteigend sortieren",
+  "sortDescending": "Absteigend sortieren",
+  "sortByField": "Sortieren nach {{field}}",
+  "ascendingOrder": "Aufsteigend",
+  "descendingOrder": "Absteigend",
+  "currentSort": "Aktuelle Sortierung: {{field}} {{order}}"
 }

worklenz-backend/src/public/locales/en/account-setup.json

@@ -1,7 +1,7 @@
 {
   "continue": "Continue",
 
-  "setupYourAccount": "Setup Your Worklenz Account.",
+  "setupYourAccount": "Setup Your Account.",
   "organizationStepTitle": "Name Your Organization",
   "organizationStepLabel": "Pick a name for your Worklenz account.",
 

worklenz-backend/src/public/locales/en/task-list-filters.json

@@ -81,5 +81,12 @@
   "delete": "Delete",
   "enterStatusName": "Enter status name",
   "selectCategory": "Select category",
-  "close": "Close"
+  "close": "Close",
+  "clearSort": "Clear Sort",
+  "sortAscending": "Sort Ascending",
+  "sortDescending": "Sort Descending",
+  "sortByField": "Sort by {{field}}",
+  "ascendingOrder": "Ascending",
+  "descendingOrder": "Descending",
+  "currentSort": "Current sort: {{field}} {{order}}"
 }

worklenz-backend/src/public/locales/es/task-list-filters.json

@@ -77,5 +77,12 @@
   "delete": "Eliminar",
   "enterStatusName": "Introducir nombre del estado",
   "selectCategory": "Seleccionar categoría",
-  "close": "Cerrar"
+  "close": "Cerrar",
+  "clearSort": "Limpiar Ordenamiento",
+  "sortAscending": "Ordenar Ascendente",
+  "sortDescending": "Ordenar Descendente",
+  "sortByField": "Ordenar por {{field}}",
+  "ascendingOrder": "Ascendente",
+  "descendingOrder": "Descendente",
+  "currentSort": "Ordenamiento actual: {{field}} {{order}}"
 }

worklenz-backend/src/public/locales/pt/task-list-filters.json

@@ -78,5 +78,12 @@
   "delete": "Excluir",
   "enterStatusName": "Digite o nome do status",
   "selectCategory": "Selecionar categoria",
-  "close": "Fechar"
+  "close": "Fechar",
+  "clearSort": "Limpar Ordenação",
+  "sortAscending": "Ordenar Crescente",
+  "sortDescending": "Ordenar Decrescente",
+  "sortByField": "Ordenar por {{field}}",
+  "ascendingOrder": "Crescente",
+  "descendingOrder": "Decrescente",
+  "currentSort": "Ordenação atual: {{field}} {{order}}"
 }

worklenz-backend/src/public/locales/zh/task-list-filters.json

@@ -75,5 +75,12 @@
   "delete": "删除",
   "enterStatusName": "输入状态名称",
   "selectCategory": "选择类别",
-  "close": "关闭"
+  "close": "关闭",
+  "clearSort": "清除排序",
+  "sortAscending": "升序排列",
+  "sortDescending": "降序排列",
+  "sortByField": "按{{field}}排序",
+  "ascendingOrder": "升序",
+  "descendingOrder": "降序",
+  "currentSort": "当前排序：{{field}} {{order}}"
 }

worklenz-backend/src/routes/apis/index.ts

@@ -51,13 +51,14 @@ import roadmapApiRouter from "./gannt-apis/roadmap-api-router";
 import scheduleApiRouter from "./gannt-apis/schedule-api-router";
 import scheduleApiV2Router from "./gannt-apis/schedule-api-v2-router";
 import projectManagerApiRouter from "./project-managers-api-router";
+import surveyApiRouter from "./survey-api-router";
 
 import billingApiRouter from "./billing-api-router";
 import taskDependenciesApiRouter from "./task-dependencies-api-router";
 
 import taskRecurringApiRouter from "./task-recurring-api-router";
-
-import customColumnsApiRouter from "./custom-columns-api-router";
+
+import customColumnsApiRouter from "./custom-columns-api-router";
 
 const api = express.Router();
 
@@ -103,6 +104,7 @@ api.use("/roadmap-gannt", roadmapApiRouter);
 api.use("/roadmap-gannt", roadmapApiRouter);
 api.use("/schedule-gannt", scheduleApiRouter);
 api.use("/schedule-gannt-v2", scheduleApiV2Router);
+api.use("/project-managers", projectManagerApiRouter);
 api.use("/surveys", surveyApiRouter);
 
 api.get("/overview/:id", safeControllerFunction(OverviewController.getById));
@@ -115,6 +117,6 @@ api.use("/task-dependencies", taskDependenciesApiRouter);
 api.use("/task-dependencies", taskDependenciesApiRouter);
 
 api.use("/task-recurring", taskRecurringApiRouter);
-
-api.use("/custom-columns", customColumnsApiRouter);
+
+api.use("/custom-columns", customColumnsApiRouter);
 

worklenz-backend/src/routes/apis/survey-api-router.ts

@@ -0,0 +1,20 @@
+import express from "express";
+import SurveyController from "../../controllers/survey-controller";
+import surveySubmissionValidator from "../../middlewares/validators/survey-submission-validator";
+import safeControllerFunction from "../../shared/safe-controller-function";
+
+const surveyApiRouter = express.Router();
+
+// Get account setup survey with questions
+surveyApiRouter.get("/account-setup", safeControllerFunction(SurveyController.getAccountSetupSurvey));
+
+// Check if user has completed account setup survey
+surveyApiRouter.get("/account-setup/status", safeControllerFunction(SurveyController.checkAccountSetupSurveyStatus));
+
+// Submit survey response
+surveyApiRouter.post("/responses", surveySubmissionValidator, safeControllerFunction(SurveyController.submitSurveyResponse));
+
+// Get user's survey response for a specific survey
+surveyApiRouter.get("/responses/:survey_id", safeControllerFunction(SurveyController.getUserSurveyResponse));
+
+export default surveyApiRouter;

worklenz-backend/src/socket.io/commands/on-quick-assign-or-remove.ts

@@ -75,7 +75,7 @@ export async function on_quick_assign_or_remove(_io: Server, socket: Socket, dat
       assign_type: type
     });
 
-    if (userId !== assignment.user_id) {
+    if (assignment && userId !== assignment.user_id) {
       NotificationsService.createTaskUpdate(
         type,
         userId as string,
@@ -109,6 +109,11 @@ export async function assignMemberIfNot(taskId: string, userId: string, teamId:
     const result = await db.query(q, [taskId, userId, teamId]);
     const [data] = result.rows;
 
+    if (!data) {
+      log_error(new Error(`No team member found for userId: ${userId}, teamId: ${teamId}`));
+      return;
+    }
+
     const body = {
       team_member_id: data.team_member_id,
       project_id: data.project_id,

worklenz-frontend/public/js/hubspot.js

@@ -76,40 +76,27 @@ class HubSpotManager {
     style.id = this.styleId;
     style.textContent = `
       /* HubSpot Chat Widget Dark Mode Override */
+      /*
+        Note: We can only style the container backgrounds, not the widget UI inside the iframe.
+        HubSpot does not currently support external dark mode theming for the chat UI itself.
+      */
       #hubspot-conversations-inline-parent,
-      #hubspot-conversations-iframe-container,
-      .shadow-2xl.widget-align-right.widget-align-bottom,
-      [data-test-id="chat-widget"],
-      [class*="VizExCollapsedChat"],
-      [class*="VizExExpandedChat"],
-      iframe[src*="hubspot"] {
-        filter: invert(1) hue-rotate(180deg) !important;
-        background: transparent !important;
+      #hubspot-conversations-iframe-container {
+        background: #141414 !important;
       }
-      
       /* Target HubSpot widget container backgrounds */
       #hubspot-conversations-inline-parent div,
       #hubspot-conversations-iframe-container div,
       [data-test-id="chat-widget"] div {
         background-color: transparent !important;
       }
-      
-      /* Prevent double inversion of images, avatars, and icons */
-      #hubspot-conversations-iframe-container img,
-      #hubspot-conversations-iframe-container [style*="background-image"],
-      #hubspot-conversations-iframe-container svg,
-      iframe[src*="hubspot"] img,
-      iframe[src*="hubspot"] svg,
-      [data-test-id="chat-widget"] img,
-      [data-test-id="chat-widget"] svg {
-        filter: invert(1) hue-rotate(180deg) !important;
-      }
-      
-      /* Additional targeting for widget launcher and chat bubble */
-      div[class*="shadow-2xl"],
-      div[class*="widget-align"],
-      div[style*="position: fixed"] {
-        filter: invert(1) hue-rotate(180deg) !important;
+      /* Ensure Worklenz app elements are not affected by HubSpot styles */
+      .ant-menu,
+      .ant-menu *,
+      [class*="settings"],
+      [class*="sidebar"],
+      .worklenz-app *:not([id*="hubspot"]):not([class*="widget"]) {
+        filter: none !important;
       }
     `;
     document.head.appendChild(style);

worklenz-frontend/public/locales/alb/account-setup.json

@@ -1,31 +1,194 @@
 {
   "continue": "Vazhdo",
 
-  "setupYourAccount": "Konfiguro Llogarinë Tënde në Worklenz.",
-  "organizationStepTitle": "Emërtoni Organizatën Tuaj",
-  "organizationStepLabel": "Zgjidhni një emër për llogarinë tuaj në Worklenz.",
-
-  "projectStepTitle": "Krijoni projektin tuaj të parë",
-  "projectStepLabel": "Në cilin projekt po punoni aktualisht?",
+  "setupYourAccount": "Konfiguro llogarinë tënde.",
+  "organizationStepTitle": "Emërto organizatën tënde",
+  "organizationStepLabel": "Zgjidh një emër për llogarinë tënde në Worklenz.",
+  "organizationStepWelcome": "Konfiguro llogarinë tënde në Worklenz.",
+  "organizationStepDescription": "Le të fillojmë duke konfiguruar organizatën tënde. Kjo do të jetë hapësira kryesore e punës për ekipin tënd.",
+  "organizationStepTooltip": "Ky emër do të shfaqet në hapësirën tënde të punës dhe mund të ndryshohet më vonë në cilësime.",
+  "organizationStepNeedIdeas": "Keni nevojë për ide?",
+  "organizationStepUseDetected": "Përdorimi i zbuluar:",
+  "organizationStepCharacters": "karaktere",
+  "organizationStepGoodLength": "Gjatësi e mirë",
+  "organizationStepTooShort": "Shumë i shkurtër",
+  "organizationStepNamingTips": "Këshilla për emërtimin",
+  "organizationStepTip1": "Mbaje të thjeshtë dhe të lehtë për t'u mbajtur mend",
+  "organizationStepTip2": "Përfaqëso industrinë ose vlerat e tua",
+  "organizationStepTip3": "Mendo për rritjen në të ardhmen",
+  "organizationStepTip4": "Bëje unik dhe të përshtatshëm për markë",
+  "organizationStepSuggestionsTitle": "Sugjerime për emra",
+  "organizationStepCategory1": "Kompani Teknologjie",
+  "organizationStepCategory2": "Agjenci Kreative",
+  "organizationStepCategory3": "Konsulencë",
+  "organizationStepCategory4": "Startupe",
+  "organizationStepSuggestionsNote": "Këto janë vetëm shembuj për të të ndihmuar të fillosh. Zgjidh diçka që përfaqëson organizatën tënde.",
+  "organizationStepPrivacyNote": "Emri i organizatës tënde është privat dhe i dukshëm vetëm për anëtarët e ekipit.",
+  "projectStepTitle": "Krijo projektin tënd të parë",
+  "projectStepLabel": "Në cilin projekt po punon tani?",
   "projectStepPlaceholder": "p.sh. Plani i Marketingut",
-
-  "tasksStepTitle": "Krijoni detyrat tuaja të para",
-  "tasksStepLabel": "Shkruani disa detyra që do të kryeni në",
+  "tasksStepTitle": "Krijo detyrat e tua të para",
+  "tasksStepLabel": "Shkruaj disa detyra që do të kryesh në",
   "tasksStepAddAnother": "Shto një tjetër",
-
-  "emailPlaceholder": "Adresa email",
-  "invalidEmail": "Ju lutemi vendosni një adresë email të vlefshme",
+  "emailPlaceholder": "Adresa e emailit",
+  "invalidEmail": "Ju lutem vendosni një adresë emaili të vlefshme",
   "or": "ose",
   "templateButton": "Importo nga shablloni",
-  "goBack": "Kthehu Mbrapa",
+  "goBack": "Kthehu mbrapa",
   "cancel": "Anulo",
   "create": "Krijo",
   "templateDrawerTitle": "Zgjidh nga shabllonet",
   "step3InputLabel": "Fto me email",
   "addAnother": "Shto një tjetër",
-  "skipForNow": "Kalo tani për tani",
-  "formTitle": "Krijoni detyrën tuaj të parë.",
-  "step3Title": "Fto ekipin tënd të punojë me",
+  "skipForNow": "Kalo për tani",
+  "skipping": "Duke kaluar...",
+  "formTitle": "Krijo detyrën tënde të parë.",
+  "step3Title": "Fto ekipin tënd për të punuar së bashku",
   "maxMembers": " (Mund të ftoni deri në 5 anëtarë)",
-  "maxTasks": " (Mund të krijoni deri në 5 detyra)"
+  "maxTasks": " (Mund të krijoni deri në 5 detyra)",
+  "membersStepTitle": "Fto ekipin tënd",
+  "membersStepDescription": "Shto anëtarë ekipi në \"{{organizationName}}\" dhe filloni bashkëpunimin",
+  "memberPlaceholder": "Anëtari i ekipit {{index}} - Shkruani adresën e emailit",
+  "validEmailAddress": "Adresë emaili e vlefshme",
+  "addAnotherTeamMember": "Shto një anëtar tjetër të ekipit ({{current}}/{{max}})",
+  "canInviteLater": "Gjithmonë mund të ftoni anëtarë të ekipit më vonë",
+  "skipStepDescription": "Nuk i keni adresat e emailit gati? Asnjë problem! Mund ta kaloni këtë hap dhe të ftoni anëtarë nga paneli i projektit më vonë.",
+  "orgCategoryTech": "Kompani Teknologjie",
+  "orgCategoryCreative": "Agjenci Kreative",
+  "orgCategoryConsulting": "Konsulencë",
+  "orgCategoryStartups": "Startupe",
+  "namingTip1": "Mbaje të thjeshtë dhe të lehtë për t'u mbajtur mend",
+  "namingTip2": "Përfaqëso industrinë ose vlerat e tua",
+  "namingTip3": "Mendo për rritjen në të ardhmen",
+  "namingTip4": "Bëje unik dhe të përshtatshëm për markë",
+  "aboutYouTitle": "Na trego për veten tënde",
+  "aboutYouDescription": "Na ndihmo të personalizojmë përvojën tënde",
+  "orgTypeQuestion": "Cila përshkruan më mirë organizatën tënde?",
+  "userRoleQuestion": "Cili është roli yt?",
+  "yourNeedsTitle": "Cilat janë nevojat e tua kryesore?",
+  "yourNeedsDescription": "Zgjidh të gjitha që aplikohen për të na ndihmuar të konfigurojmë hapësirën tënde të punës",
+  "yourNeedsQuestion": "Si do ta përdorësh kryesisht Worklenz?",
+  "useCaseTaskOrg": "Organizo dhe ndiq detyrat",
+  "useCaseTeamCollab": "Puno së bashku pa pengesa",
+  "useCaseResourceMgmt": "Menaxho kohën dhe burimet",
+  "useCaseClientComm": "Qëndro i lidhur me klientët",
+  "useCaseTimeTrack": "Monitoro orët e projektit",
+  "useCaseOther": "Diçka tjetër",
+  "selectedText": "zgjedhur",
+  "previousToolsQuestion": "Çfarë mjetesh ke përdorur më parë? (Opsionale)",
+  "discoveryTitle": "Edhe një gjë e fundit...",
+  "discoveryDescription": "Na ndihmo të kuptojmë si e zbulove Worklenz",
+  "discoveryQuestion": "Si dëgjove për ne?",
+  "allSetTitle": "Çdo gjë gati!",
+  "allSetDescription": "Le të krijojmë projektin tënd të parë dhe të fillojmë me Worklenz",
+  "surveyCompleteTitle": "Faleminderit!",
+  "surveyCompleteDescription": "Përgjigjet tuaja na ndihmojnë të përmirësojmë Worklenz për të gjithë",
+  "aboutYouStepName": "Rreth teje",
+  "yourNeedsStepName": "Nevojat e tua",
+  "discoveryStepName": "Zbulimi",
+  "stepProgress": "Hapi {step} nga 3: {title}",
+  "projectStepHeader": "Le të krijojmë projektin tënd të parë",
+  "projectStepSubheader": "Fillo nga e para ose përdor një shabllon për të filluar më shpejt",
+  "startFromScratch": "Fillo nga e para",
+  "templateSelected": "Shablloni i zgjedhur më poshtë",
+  "quickSuggestions": "Sugjerime të shpejta:",
+  "orText": "OSE",
+  "startWithTemplate": "Fillo me një shabllon",
+  "clearToSelectTemplate": "Pastro emrin e projektit më sipër për të zgjedhur një shabllon",
+  "templateHeadStart": "Fillo më shpejt me struktura të gatshme projekti",
+  "browseAllTemplates": "Shfleto të gjitha shabllonet",
+  "templatesAvailable": "15+ shabllone të specializuara sipas industrisë në dispozicion",
+  "chooseTemplate": "Zgjidh një shabllon që i përshtatet llojit të projektit tënd",
+  "createProject": "Krijo projekt",
+  "templateSoftwareDev": "Zhvillim Softueri",
+  "templateSoftwareDesc": "Sprint-e agile, ndjekje gabimesh, lëshime",
+  "templateMarketing": "Fushatë Marketingu",
+  "templateMarketingDesc": "Planifikim fushate, kalendar përmbajtjesh",
+  "templateConstruction": "Projekt Ndërtimi",
+  "templateConstructionDesc": "Faza, leje, kontraktorë",
+  "templateStartup": "Lansim Startup-i",
+  "templateStartupDesc": "Zhvillim MVP, financim, rritje",
+  "tasksStepDescription": "Ndaji \"{{projectName}}\" në detyra të veprueshme për të filluar",
+  "taskPlaceholder": "Detyra {{index}} - p.sh., Çfarë duhet bërë?",
+  "addAnotherTask": "Shto një detyrë tjetër ({{current}}/{{max}})",
+  "surveyStepTitle": "Na trego për veten tënde",
+  "surveyStepLabel": "Na ndihmo të personalizojmë përvojën tënde në Worklenz duke iu përgjigjur disa pyetjeve.",
+  "organizationType": "Cila përshkruan më mirë organizatën tënde?",
+  "organizationTypeFreelancer": "Freelancer",
+  "organizationTypeStartup": "Startup",
+  "organizationTypeSmallMediumBusiness": "Biznes i Vogël ose i Mesëm",
+  "organizationTypeAgency": "Agjenci",
+  "organizationTypeEnterprise": "Ndërmarrje",
+  "organizationTypeOther": "Tjetër",
+  "userRole": "Cili është roli yt?",
+  "userRoleFounderCeo": "Themelues / CEO",
+  "userRoleProjectManager": "Menaxher Projekti",
+  "userRoleSoftwareDeveloper": "Zhvillues Softueri",
+  "userRoleDesigner": "Dizajner",
+  "userRoleOperations": "Operacionet",
+  "userRoleOther": "Tjetër",
+  "mainUseCases": "Për çfarë do ta përdorësh kryesisht Worklenz?",
+  "mainUseCasesTaskManagement": "Menaxhim detyrash",
+  "mainUseCasesTeamCollaboration": "Bashkëpunim ekipi",
+  "mainUseCasesResourcePlanning": "Planifikim burimesh",
+  "mainUseCasesClientCommunication": "Komunikim & raportim me klientët",
+  "mainUseCasesTimeTracking": "Ndjekje kohe",
+  "mainUseCasesOther": "Tjetër",
+  "previousTools": "Çfarë mjetesh ke përdorur para Worklenz?",
+  "previousToolsPlaceholder": "p.sh. Trello, Asana, Monday.com",
+  "howHeardAbout": "Si dëgjove për Worklenz?",
+  "howHeardAboutGoogleSearch": "Kërkim në Google",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "Një mik ose koleg",
+  "howHeardAboutBlogArticle": "Një blog ose artikull",
+  "howHeardAboutOther": "Tjetër",
+
+  "aboutYouStepTitle": "Na trego për veten",
+  "aboutYouStepDescription": "Na ndihmo të personalizojmë përvojën tënde",
+  "yourNeedsStepTitle": "Cilat janë nevojat e tua kryesore?",
+  "yourNeedsStepDescription": "Zgjidh të gjitha që aplikohen për të na ndihmuar të konfigurojmë hapësirën tënde të punës",
+  "selected": "zgjedhur",
+  "previousToolsLabel": "Çfarë mjetesh ke përdorur më parë? (Opsionale)",
+
+  "roleSuggestions": {
+    "designer": "UI/UX, Grafikë, Kreativ",
+    "developer": "Frontend, Backend, Full-stack",
+    "projectManager": "Planifikim, Koordinim",
+    "marketing": "Përmbajtje, Media Sociale, Rritje",
+    "sales": "Zhvillim Biznesi, Marrëdhënie me Klientë",
+    "operations": "Administratë, HR, Financa"
+  },
+
+  "languages": {
+    "en": "Anglisht",
+    "es": "Spanjisht",
+    "pt": "Portugalisht",
+    "de": "Gjermanisht",
+    "alb": "Shqip",
+    "zh": "Kinezçe"
+  },
+
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+
+  "projectSuggestions": {
+    "freelancer": ["Projekti i Klientit", "Përditësim Portfolio", "Markë Personale"],
+    "startup": ["Zhvillim MVP", "Lansim Produkti", "Kërkim Tregu"],
+    "agency": ["Fushatë Klienti", "Strategji Markë", "Ridizajnim Website"],
+    "enterprise": ["Migrim Sistemi", "Optimizim Procesesh", "Trajnim Ekipi"]
+  },
+
+  "useCaseDescriptions": {
+    "taskManagement": "Organizoj dhe ndjek detyrat",
+    "teamCollaboration": "Punojmë së bashku pa probleme",
+    "resourcePlanning": "Menaxhoj kohën dhe burimet",
+    "clientCommunication": "Qëndroj i lidhur me klientët",
+    "timeTracking": "Monitoroj orët e projektit",
+    "other": "Diçka tjetër"
+  }
 }

worklenz-frontend/public/locales/alb/survey.json

@@ -0,0 +1,14 @@
+{
+  "modalTitle": "Ndihmoni të përmirësojmë përvojën tuaj",
+  "skip": "Kalo për tani",
+  "previous": "Prapa",
+  "next": "Tjetra",
+  "completeSurvey": "Përfundo Anketën",
+  "submitting": "Duke dërguar përgjigjet tuaja...",
+  "submitSuccessTitle": "Faleminderit!",
+  "submitSuccessSubtitle": "Feedback-u juaj na ndihmon të përmirësojmë Worklenz për të gjithë.",
+  "submitSuccessMessage": "Faleminderit që plotësuat anketën!",
+  "submitErrorMessage": "Dështoi dërgimi i anketës. Ju lutemi provoni përsëri.",
+  "submitErrorLog": "Dështoi dërgimi i anketës",
+  "fetchErrorLog": "Dështoi marrja e anketës"
+} 

worklenz-frontend/public/locales/alb/task-list-filters.json

@@ -84,5 +84,12 @@
   "close": "Mbyll",
   "cannotMoveStatus": "Nuk mund të lëvizet statusi",
   "cannotMoveStatusMessage": "Nuk mund të lëvizet ky status sepse do të linte kategorinë '{{categoryName}}' bosh. Çdo kategori duhet të ketë të paktën një status.",
-  "ok": "OK"
+  "ok": "OK",
+  "clearSort": "Pastro Renditjen",
+  "sortAscending": "Rendit në Rritje",
+  "sortDescending": "Rendit në Zbritje",
+  "sortByField": "Rendit sipas {{field}}",
+  "ascendingOrder": "Rritës",
+  "descendingOrder": "Zbritës",
+  "currentSort": "Renditja aktuale: {{field}} {{order}}"
 }

worklenz-frontend/public/locales/de/account-setup.json

@@ -3,7 +3,28 @@
 
   "setupYourAccount": "Richten Sie Ihr Worklenz-Konto ein.",
   "organizationStepTitle": "Organisation benennen",
-  "organizationStepLabel": "Wählen Sie einen Namen für Ihr Worklenz-Konto.",
+  "organizationStepWelcome": "Willkommen bei Worklenz!",
+  "organizationStepDescription": "Beginnen wir mit der Einrichtung Ihrer Organisation. Dies wird der Hauptarbeitsplatz für Ihr Team.",
+  "organizationStepLabel": "Organisationsname",
+  "organizationStepPlaceholder": "z.B. Acme Corporation",
+  "organizationStepTooltip": "Dieser Name wird in Ihrem Arbeitsbereich angezeigt und kann später in den Einstellungen geändert werden.",
+  "organizationStepNeedIdeas": "Brauchen Sie Ideen?",
+  "organizationStepUseDetected": "Erkannt verwenden:",
+  "organizationStepCharacters": "Zeichen",
+  "organizationStepGoodLength": "Gute Länge",
+  "organizationStepTooShort": "Zu kurz",
+  "organizationStepNamingTips": "Namensgebungstipps",
+  "organizationStepTip1": "Halten Sie es einfach und einprägsam",
+  "organizationStepTip2": "Spiegeln Sie Ihre Branche oder Werte wider",
+  "organizationStepTip3": "Denken Sie an zukünftiges Wachstum",
+  "organizationStepTip4": "Machen Sie es einzigartig und markenfähig",
+  "organizationStepSuggestionsTitle": "Namensvorschläge",
+  "organizationStepCategory1": "Tech-Unternehmen",
+  "organizationStepCategory2": "Kreativagenturen",
+  "organizationStepCategory3": "Beratung",
+  "organizationStepCategory4": "Startups",
+  "organizationStepSuggestionsNote": "Dies sind nur Beispiele für den Einstieg. Wählen Sie etwas, das Ihre Organisation repräsentiert.",
+  "organizationStepPrivacyNote": "Ihr Organisationsname ist privat und nur für Ihre Teammitglieder sichtbar.",
 
   "projectStepTitle": "Erstellen Sie Ihr erstes Projekt",
   "projectStepLabel": "An welchem Projekt arbeiten Sie gerade?",
@@ -24,8 +45,170 @@
   "step3InputLabel": "Per E-Mail einladen",
   "addAnother": "Weitere hinzufügen",
   "skipForNow": "Jetzt überspringen",
+  "skipping": "Überspringen...",
   "formTitle": "Erstellen Sie Ihre erste Aufgabe.",
   "step3Title": "Laden Sie Ihr Team zur Zusammenarbeit ein",
   "maxMembers": " (Sie können bis zu 5 Mitglieder einladen)",
-  "maxTasks": " (Sie können bis zu 5 Aufgaben erstellen)"
+  "maxTasks": " (Sie können bis zu 5 Aufgaben erstellen)",
+
+  "membersStepTitle": "Laden Sie Ihr Team ein",
+  "membersStepDescription": "Teammitglieder zu \"{{organizationName}}\" hinzufügen und mit der Zusammenarbeit beginnen",
+  "memberPlaceholder": "Teammitglied {{index}} - E-Mail-Adresse eingeben",
+  "validEmailAddress": "Gültige E-Mail-Adresse",
+  "addAnotherTeamMember": "Weiteres Teammitglied hinzufügen ({{current}}/{{max}})",
+  "canInviteLater": "Sie können Teammitglieder jederzeit später einladen",
+  "skipStepDescription": "Haben Sie keine E-Mail-Adressen bereit? Kein Problem! Sie können diesen Schritt überspringen und Teammitglieder später über Ihr Projekt-Dashboard einladen.",
+
+  "orgCategoryTech": "Technologieunternehmen",
+  "orgCategoryCreative": "Kreativagenturen", 
+  "orgCategoryConsulting": "Beratung",
+  "orgCategoryStartups": "Startups",
+  "namingTip1": "Halten Sie es einfach und einprägsam",
+  "namingTip2": "Spiegeln Sie Ihre Branche oder Werte wider",
+  "namingTip3": "Denken Sie an zukünftiges Wachstum",
+  "namingTip4": "Machen Sie es einzigartig und markenfähig",
+
+  "aboutYouTitle": "Erzählen Sie uns von sich",
+  "aboutYouDescription": "Helfen Sie uns, Ihre Erfahrung zu personalisieren",
+  "orgTypeQuestion": "Was beschreibt Ihre Organisation am besten?",
+  "userRoleQuestion": "Was ist Ihre Rolle?",
+  
+  "yourNeedsTitle": "Was sind Ihre Hauptbedürfnisse?",
+  "yourNeedsDescription": "Wählen Sie alle zutreffenden aus, um uns bei der Einrichtung Ihres Arbeitsbereichs zu helfen",
+  "yourNeedsQuestion": "Wie werden Sie Worklenz hauptsächlich nutzen?",
+  "useCaseTaskOrg": "Aufgaben organisieren und verfolgen",
+  "useCaseTeamCollab": "Nahtlos zusammenarbeiten", 
+  "useCaseResourceMgmt": "Zeit und Ressourcen verwalten",
+  "useCaseClientComm": "Mit Kunden in Verbindung bleiben",
+  "useCaseTimeTrack": "Projektstunden überwachen",
+  "useCaseOther": "Etwas anderes",
+  "selectedText": "ausgewählt",
+  "previousToolsQuestion": "Welche Tools haben Sie zuvor verwendet? (Optional)",
+  "previousToolsPlaceholder": "z.B. Asana, Trello, Jira, Monday.com, etc.",
+  
+  "discoveryTitle": "Eine letzte Sache...",
+  "discoveryDescription": "Helfen Sie uns zu verstehen, wie Sie Worklenz entdeckt haben",
+  "discoveryQuestion": "Wie haben Sie von uns erfahren?",
+  "allSetTitle": "Sie sind bereit!",
+  "allSetDescription": "Lassen Sie uns Ihr erstes Projekt erstellen und mit Worklenz beginnen",
+  "surveyCompleteTitle": "Vielen Dank!",
+  "surveyCompleteDescription": "Ihr Feedback hilft uns, Worklenz für alle zu verbessern",
+  "aboutYouStepName": "Über Sie",
+  "yourNeedsStepName": "Ihre Bedürfnisse", 
+  "discoveryStepName": "Entdeckung",
+  "stepProgress": "Schritt {step} von 3: {title}",
+
+  "projectStepHeader": "Lassen Sie uns Ihr erstes Projekt erstellen",
+  "projectStepSubheader": "Von Grund auf beginnen oder eine Vorlage verwenden, um schneller voranzukommen",
+  "startFromScratch": "Von Grund auf beginnen",
+  "templateSelected": "Vorlage unten ausgewählt",
+  "quickSuggestions": "Schnelle Vorschläge:",
+  "orText": "ODER",
+  "startWithTemplate": "Mit einer Vorlage beginnen",
+  "clearToSelectTemplate": "Projektname oben löschen, um eine Vorlage auszuwählen",
+  "templateHeadStart": "Verschaffen Sie sich einen Vorsprung mit vorgefertigten Projektstrukturen",
+  "browseAllTemplates": "Alle Vorlagen durchsuchen",
+  "templatesAvailable": "15+ branchenspezifische Vorlagen verfügbar",
+  "chooseTemplate": "Wählen Sie eine Vorlage, die zu Ihrem Projekttyp passt",
+  "createProject": "Projekt erstellen",
+
+  "templateSoftwareDev": "Softwareentwicklung",
+  "templateSoftwareDesc": "Agile Sprints, Fehlerverfolgung, Releases",
+  "templateMarketing": "Marketing-Kampagne", 
+  "templateMarketingDesc": "Kampagnenplanung, Content-Kalender",
+  "templateConstruction": "Bauprojekt",
+  "templateConstructionDesc": "Phasen, Genehmigungen, Auftragnehmer",
+  "templateStartup": "Startup-Launch",
+  "templateStartupDesc": "MVP-Entwicklung, Finanzierung, Wachstum",
+
+  "tasksStepTitle": "Fügen Sie Ihre ersten Aufgaben hinzu",
+  "tasksStepDescription": "Unterteilen Sie \"{{projectName}}\" in umsetzbare Aufgaben, um zu beginnen",
+  "taskPlaceholder": "Aufgabe {{index}} - z.B., Was muss getan werden?",
+  "addAnotherTask": "Weitere Aufgabe hinzufügen ({{current}}/{{max}})",
+
+  "surveyStepTitle": "Erzählen Sie uns von sich",
+  "surveyStepLabel": "Helfen Sie uns, Ihre Worklenz-Erfahrung zu personalisieren, indem Sie ein paar Fragen beantworten.",
+  
+  "organizationType": "Was beschreibt Ihre Organisation am besten?",
+  "organizationTypeFreelancer": "Freelancer",
+  "organizationTypeStartup": "Startup",
+  "organizationTypeSmallMediumBusiness": "Kleines oder mittleres Unternehmen",
+  "organizationTypeAgency": "Agentur",
+  "organizationTypeEnterprise": "Unternehmen",
+  "organizationTypeOther": "Andere",
+  
+  "userRole": "Was ist Ihre Rolle?",
+  "userRoleFounderCeo": "Gründer / CEO",
+  "userRoleProjectManager": "Projektmanager",
+  "userRoleSoftwareDeveloper": "Software-Entwickler",
+  "userRoleDesigner": "Designer",
+  "userRoleOperations": "Betrieb",
+  "userRoleOther": "Andere",
+  
+  "mainUseCases": "Wofür werden Sie Worklenz hauptsächlich verwenden?",
+  "mainUseCasesTaskManagement": "Aufgabenverwaltung",
+  "mainUseCasesTeamCollaboration": "Teamzusammenarbeit",
+  "mainUseCasesResourcePlanning": "Ressourcenplanung",
+  "mainUseCasesClientCommunication": "Kundenkommunikation & Berichterstattung",
+  "mainUseCasesTimeTracking": "Zeiterfassung",
+  "mainUseCasesOther": "Andere",
+  
+  "previousTools": "Welche Tools haben Sie vor Worklenz verwendet?",
+  "previousToolsPlaceholder": "z.B. Trello, Asana, Monday.com",
+  
+  "howHeardAbout": "Wie haben Sie von Worklenz erfahren?",
+  "howHeardAboutGoogleSearch": "Google-Suche",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "Ein Freund oder Kollege",
+  "howHeardAboutBlogArticle": "Ein Blog oder Artikel",
+  "howHeardAboutOther": "Andere",
+  
+  "aboutYouStepTitle": "Erzählen Sie uns von sich",
+  "aboutYouStepDescription": "Helfen Sie uns, Ihre Erfahrung zu personalisieren",
+  "yourNeedsStepTitle": "Was sind Ihre Hauptbedürfnisse?",
+  "yourNeedsStepDescription": "Wählen Sie alle zutreffenden aus, um uns bei der Einrichtung Ihres Arbeitsbereichs zu helfen",
+  "selected": "ausgewählt",
+  "previousToolsLabel": "Welche Tools haben Sie zuvor verwendet? (Optional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Grafiken, Kreativ",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planung, Koordination",
+    "marketing": "Inhalt, Social Media, Wachstum",
+    "sales": "Geschäftsentwicklung, Kundenbeziehungen",
+    "operations": "Admin, HR, Finanzen"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Kundenprojekt", "Portfolio-Update", "Persönliche Marke"],
+    "startup": ["MVP-Entwicklung", "Produktlaunch", "Marktforschung"],
+    "agency": ["Kundenkampagne", "Markenstrategie", "Website-Redesign"],
+    "enterprise": ["Systemumstellung", "Prozessoptimierung", "Teamschulung"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Aufgaben organisieren und verfolgen",
+    "teamCollaboration": "Nahtlos zusammenarbeiten",
+    "resourcePlanning": "Zeit und Ressourcen verwalten", 
+    "clientCommunication": "Mit Kunden in Verbindung bleiben",
+    "timeTracking": "Projektstunden überwachen",
+    "other": "Etwas anderes"
+  }
 }

worklenz-frontend/public/locales/de/admin-center/configuration.json

@@ -0,0 +1,26 @@
+{
+  "billingDetails": "Abrechnungsdetails",
+  "name": "Name",
+  "namePlaceholder": "Name",
+  "emailAddress": "E-Mail-Adresse",
+  "emailPlaceholder": "E-Mail-Adresse",
+  "contactNumber": "Telefonnummer",
+  "phoneNumberPlaceholder": "Telefonnummer",
+  "phoneValidationError": "Telefonnummer muss genau 10 Ziffern haben",
+  "companyDetails": "Firmendetails",
+  "companyName": "Firmenname",
+  "companyNamePlaceholder": "Firmenname",
+  "addressLine01": "Adresszeile 01",
+  "addressLine01Placeholder": "Adresszeile 01",
+  "addressLine02": "Adresszeile 02",
+  "addressLine02Placeholder": "Adresszeile 02",
+  "country": "Land",
+  "countryPlaceholder": "Land",
+  "city": "Stadt",
+  "cityPlaceholder": "Stadt",
+  "state": "Bundesland",
+  "statePlaceholder": "Bundesland",
+  "postalCode": "Postleitzahl",
+  "postalCodePlaceholder": "Postleitzahl",
+  "save": "Speichern"
+}

worklenz-frontend/public/locales/de/auth/signup.json

@@ -7,12 +7,12 @@
   "emailLabel": "E-Mail",
   "emailPlaceholder": "Ihre E-Mail-Adresse eingeben",
   "emailRequired": "Bitte geben Sie Ihre E-Mail-Adresse ein!",
-  "passwordLabel": "Password",
-  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
-  "passwordPlaceholder": "Enter your password",
+  "passwordLabel": "Passwort",
+  "passwordGuideline": "Das Passwort muss mindestens 8 Zeichen lang sein und Groß- und Kleinbuchstaben, eine Zahl und ein Sonderzeichen enthalten.",
+  "passwordPlaceholder": "Geben Sie Ihr Passwort ein",
   "passwordRequired": "Bitte geben Sie Ihr Passwort ein!",
   "passwordMinCharacterRequired": "Das Passwort muss mindestens 8 Zeichen lang sein!",
-  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
+  "passwordMaxCharacterRequired": "Das Passwort darf maximal 32 Zeichen lang sein!",
   "passwordPatternRequired": "Das Passwort entspricht nicht den Anforderungen!",
   "strongPasswordPlaceholder": "Ein stärkeres Passwort eingeben",
   "passwordValidationAltText": "Das Passwort muss mindestens 8 Zeichen enthalten, mit Groß- und Kleinbuchstaben, einer Zahl und einem Sonderzeichen.",

worklenz-frontend/public/locales/de/survey.json

@@ -0,0 +1,14 @@
+{
+  "modalTitle": "Helfen Sie uns, Ihre Erfahrung zu verbessern",
+  "skip": "Für jetzt überspringen",
+  "previous": "Zurück",
+  "next": "Weiter",
+  "completeSurvey": "Umfrage abschließen",
+  "submitting": "Ihre Antworten werden übermittelt...",
+  "submitSuccessTitle": "Danke!",
+  "submitSuccessSubtitle": "Ihr Feedback hilft uns, Worklenz für alle zu verbessern.",
+  "submitSuccessMessage": "Danke, dass Sie die Umfrage abgeschlossen haben!",
+  "submitErrorMessage": "Umfrage konnte nicht übermittelt werden. Bitte versuchen Sie es erneut.",
+  "submitErrorLog": "Umfrageübermittlung fehlgeschlagen",
+  "fetchErrorLog": "Umfrageabruf fehlgeschlagen"
+} 

worklenz-frontend/public/locales/de/task-list-filters.json

@@ -84,5 +84,12 @@
   "close": "Schließen",
   "cannotMoveStatus": "Status kann nicht verschoben werden",
   "cannotMoveStatusMessage": "Dieser Status kann nicht verschoben werden, da die Kategorie '{{categoryName}}' leer bleiben würde. Jede Kategorie muss mindestens einen Status haben.",
-  "ok": "OK"
+  "ok": "OK",
+  "clearSort": "Sortierung löschen",
+  "sortAscending": "Aufsteigend sortieren",
+  "sortDescending": "Absteigend sortieren",
+  "sortByField": "Sortieren nach {{field}}",
+  "ascendingOrder": "Aufsteigend",
+  "descendingOrder": "Absteigend",
+  "currentSort": "Aktuelle Sortierung: {{field}} {{order}}"
 }

worklenz-frontend/public/locales/en/account-setup.json

@@ -1,15 +1,35 @@
 {
   "continue": "Continue",
 
-  "setupYourAccount": "Setup Your Worklenz Account.",
+  "setupYourAccount": "Setup Your Account.",
   "organizationStepTitle": "Name Your Organization",
-  "organizationStepLabel": "Pick a name for your Worklenz account.",
+  "organizationStepWelcome": "Welcome to Worklenz!",
+  "organizationStepDescription": "Let's start by setting up your organization. This will be the main workspace for your team.",
+  "organizationStepLabel": "Organization name",
+  "organizationStepPlaceholder": "e.g. Acme Corporation",
+  "organizationStepTooltip": "This name will appear in your workspace and can be changed later in settings.",
+  "organizationStepNeedIdeas": "Need ideas?",
+  "organizationStepUseDetected": "Use detected:",
+  "organizationStepCharacters": "characters",
+  "organizationStepGoodLength": "Good length",
+  "organizationStepTooShort": "Too short",
+  "organizationStepNamingTips": "Naming Tips",
+  "organizationStepTip1": "Keep it simple and memorable",
+  "organizationStepTip2": "Reflect your industry or values", 
+  "organizationStepTip3": "Think about future growth",
+  "organizationStepTip4": "Make it unique and brandable",
+  "organizationStepSuggestionsTitle": "Name Suggestions",
+  "organizationStepCategory1": "Tech Companies",
+  "organizationStepCategory2": "Creative Agencies", 
+  "organizationStepCategory3": "Consulting",
+  "organizationStepCategory4": "Startups",
+  "organizationStepSuggestionsNote": "These are just examples to get you started. Choose something that represents your organization.",
+  "organizationStepPrivacyNote": "Your organization name is private and only visible to your team members.",
 
   "projectStepTitle": "Create your first project",
   "projectStepLabel": "What project are you working on right now?",
   "projectStepPlaceholder": "e.g. Marketing Plan",
 
-  "tasksStepTitle": "Create your first tasks",
   "tasksStepLabel": "Type a few tasks that you are going to do in",
   "tasksStepAddAnother": "Add another",
 
@@ -24,8 +44,169 @@
   "step3InputLabel": "Invite with email",
   "addAnother": "Add another",
   "skipForNow": "Skip for now",
+  "skipping": "Skipping...",
   "formTitle": "Create your first task.",
   "step3Title": "Invite your team to work with",
   "maxMembers": " (You can invite up to 5 members)",
-  "maxTasks": " (You can create up to 5 tasks)"
+  "maxTasks": " (You can create up to 5 tasks)",
+
+  "membersStepTitle": "Invite your team",
+  "membersStepDescription": "Add team members to \"{{organizationName}}\" and start collaborating",
+  "memberPlaceholder": "Team member {{index}} - Enter email address",
+  "validEmailAddress": "Valid email address",
+  "addAnotherTeamMember": "Add another team member ({{current}}/{{max}})",
+  "canInviteLater": "You can always invite team members later",
+  "skipStepDescription": "Don't have email addresses ready? No problem! You can skip this step and invite team members from your project dashboard later.",
+
+  "orgCategoryTech": "Tech Companies",
+  "orgCategoryCreative": "Creative Agencies", 
+  "orgCategoryConsulting": "Consulting",
+  "orgCategoryStartups": "Startups",
+  "namingTip1": "Keep it simple and memorable",
+  "namingTip2": "Reflect your industry or values",
+  "namingTip3": "Think about future growth",
+  "namingTip4": "Make it unique and brandable",
+
+  "aboutYouTitle": "Tell us about yourself",
+  "aboutYouDescription": "Help us personalize your experience",
+  "orgTypeQuestion": "What best describes your organization?",
+  "userRoleQuestion": "What's your role?",
+  
+  "yourNeedsTitle": "What are your main needs?",
+  "yourNeedsDescription": "Select all that apply to help us set up your workspace",
+  "yourNeedsQuestion": "How will you primarily use Worklenz?",
+  "useCaseTaskOrg": "Organize and track tasks",
+  "useCaseTeamCollab": "Work together seamlessly", 
+  "useCaseResourceMgmt": "Manage time and resources",
+  "useCaseClientComm": "Stay connected with clients",
+  "useCaseTimeTrack": "Monitor project hours",
+  "useCaseOther": "Something else",
+  "selectedText": "selected",
+  "previousToolsQuestion": "What tools have you used before? (Optional)",
+  
+  "discoveryTitle": "One last thing...",
+  "discoveryDescription": "Help us understand how you discovered Worklenz",
+  "discoveryQuestion": "How did you hear about us?",
+  "allSetTitle": "You're all set!",
+  "allSetDescription": "Let's create your first project and get started with Worklenz",
+  "surveyCompleteTitle": "Thank you!",
+  "surveyCompleteDescription": "Your feedback helps us improve Worklenz for everyone",
+  "aboutYouStepName": "About You",
+  "yourNeedsStepName": "Your Needs", 
+  "discoveryStepName": "Discovery",
+  "stepProgress": "Step {step} of 3: {title}",
+
+  "projectStepHeader": "Let's create your first project",
+  "projectStepSubheader": "Start from scratch or use a template to get going faster",
+  "startFromScratch": "Start from scratch",
+  "templateSelected": "Template selected below",
+  "quickSuggestions": "Quick suggestions:",
+  "orText": "OR",
+  "startWithTemplate": "Start with a template",
+  "clearToSelectTemplate": "Clear project name above to select a template",
+  "templateHeadStart": "Get a head start with pre-built project structures",
+  "browseAllTemplates": "Browse All Templates",
+  "templatesAvailable": "15+ industry-specific templates available",
+  "chooseTemplate": "Choose a template that matches your project type",
+  "createProject": "Create Project",
+
+  "templateSoftwareDev": "Software Development",
+  "templateSoftwareDesc": "Agile sprints, bug tracking, releases",
+  "templateMarketing": "Marketing Campaign", 
+  "templateMarketingDesc": "Campaign planning, content calendar",
+  "templateConstruction": "Construction Project",
+  "templateConstructionDesc": "Phases, permits, contractors",
+  "templateStartup": "Startup Launch",
+  "templateStartupDesc": "MVP development, funding, growth",
+
+  "tasksStepTitle": "Add your first tasks",
+  "tasksStepDescription": "Break down \"{{projectName}}\" into actionable tasks to get started",
+  "taskPlaceholder": "Task {{index}} - e.g., What needs to be done?",
+  "addAnotherTask": "Add another task ({{current}}/{{max}})",
+
+  "surveyStepTitle": "Tell us about yourself",
+  "surveyStepLabel": "Help us personalize your Worklenz experience by answering a few questions.",
+  
+  "organizationType": "What best describes your organization?",
+  "organizationTypeFreelancer": "Freelancer",
+  "organizationTypeStartup": "Startup",
+  "organizationTypeSmallMediumBusiness": "Small or Medium Business",
+  "organizationTypeAgency": "Agency",
+  "organizationTypeEnterprise": "Enterprise",
+  "organizationTypeOther": "Other",
+  
+  "userRole": "What is your role?",
+  "userRoleFounderCeo": "Founder / CEO",
+  "userRoleProjectManager": "Project Manager",
+  "userRoleSoftwareDeveloper": "Software Developer",
+  "userRoleDesigner": "Designer",
+  "userRoleOperations": "Operations",
+  "userRoleOther": "Other",
+  
+  "mainUseCases": "What will you mainly use Worklenz for?",
+  "mainUseCasesTaskManagement": "Task management",
+  "mainUseCasesTeamCollaboration": "Team collaboration",
+  "mainUseCasesResourcePlanning": "Resource planning",
+  "mainUseCasesClientCommunication": "Client communication & reporting",
+  "mainUseCasesTimeTracking": "Time tracking",
+  "mainUseCasesOther": "Other",
+  
+  "previousTools": "What tool(s) were you using before Worklenz?",
+  "previousToolsPlaceholder": "e.g. Trello, Asana, Monday.com",
+  
+  "howHeardAbout": "How did you hear about Worklenz?",
+  "howHeardAboutGoogleSearch": "Google Search",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "A friend or colleague",
+  "howHeardAboutBlogArticle": "A blog or article",
+  "howHeardAboutOther": "Other",
+  
+  "aboutYouStepTitle": "Tell us about yourself",
+  "aboutYouStepDescription": "Help us personalize your experience",
+  "yourNeedsStepTitle": "What are your main needs?",
+  "yourNeedsStepDescription": "Select all that apply to help us set up your workspace",
+  "selected": "selected",
+  "previousToolsLabel": "What tools have you used before? (Optional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Graphics, Creative",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planning, Coordination",
+    "marketing": "Content, Social Media, Growth",
+    "sales": "Business Development, Client Relations",
+    "operations": "Admin, HR, Finance"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Client Project", "Portfolio Update", "Personal Brand"],
+    "startup": ["MVP Development", "Product Launch", "Market Research"],
+    "agency": ["Client Campaign", "Brand Strategy", "Website Redesign"],
+    "enterprise": ["System Migration", "Process Optimization", "Team Training"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Organize and track tasks",
+    "teamCollaboration": "Work together seamlessly",
+    "resourcePlanning": "Manage time and resources", 
+    "clientCommunication": "Stay connected with clients",
+    "timeTracking": "Monitor project hours",
+    "other": "Something else"
+  }
 }

worklenz-frontend/public/locales/en/admin-center/configuration.json

@@ -0,0 +1,26 @@
+{
+  "billingDetails": "Billing Details",
+  "name": "Name",
+  "namePlaceholder": "Name",
+  "emailAddress": "Email Address",
+  "emailPlaceholder": "Email Address",
+  "contactNumber": "Contact Number",
+  "phoneNumberPlaceholder": "Phone Number",
+  "phoneValidationError": "Phone number must be exactly 10 digits",
+  "companyDetails": "Company Details",
+  "companyName": "Company Name",
+  "companyNamePlaceholder": "Company Name",
+  "addressLine01": "Address Line 01",
+  "addressLine01Placeholder": "Address Line 01",
+  "addressLine02": "Address Line 02",
+  "addressLine02Placeholder": "Address Line 02",
+  "country": "Country",
+  "countryPlaceholder": "Country",
+  "city": "City",
+  "cityPlaceholder": "City",
+  "state": "State",
+  "statePlaceholder": "State",
+  "postalCode": "Postal Code",
+  "postalCodePlaceholder": "Postal Code",
+  "save": "Save"
+}

worklenz-frontend/public/locales/en/admin-center/current-bill.json

@@ -117,5 +117,26 @@
   "currentSeatsText": "You currently have {{seats}} seats available.",
   "selectSeatsText": "Please select the number of additional seats to purchase.",
   "purchase": "Purchase",
-  "contactSales": "Contact sales"
+  "contactSales": "Contact sales",
+  "submitSuccess": "Code redeemed successfully!",
+  "submitSuccessDescription": "Your account has been updated with the new credits.",
+  "percentUsed": "% Used",
+  "sizeUnits": {
+    "bytes": "Bytes",
+    "kb": "KB", 
+    "mb": "MB",
+    "gb": "GB",
+    "tb": "TB"
+  },
+  "seatPerMonth": "seat / month",
+  "totalPrice": "Total $",
+  "tryForFree": "Try for free",
+  "subscriptionUpdateSuccess": "Subscription updated successfully!",
+  "paymentProcessorError": "Failed to load payment processor",
+  "seatsLabel": "Seats:",
+  "requiredField": "*",
+  "purchaseSeatsTextSingle": "To continue, you'll need to purchase an additional seat.",
+  "singleUserNote": "You currently have 1 seat available.",
+  "selectSeatsTextSingle": "Please select the number of additional seats to purchase.",
+  "phoneNumberPattern": "07xxxxxxxx"
 }

worklenz-frontend/public/locales/en/admin-center/overview.json

@@ -4,5 +4,8 @@
   "owner": "Organization Owner",
   "admins": "Organization Admins",
   "contactNumber": "Add Contact Number",
-  "edit": "Edit"
+  "edit": "Edit",
+  "emailAddress": "Email Address",
+  "enterOrganizationName": "Enter organization name",
+  "ownerSuffix": " (Owner)"
 }

worklenz-frontend/public/locales/en/admin-center/users.json

@@ -5,5 +5,6 @@
   "user": "User",
   "email": "Email",
   "lastActivity": "Last Activity",
-  "refresh": "Refresh users"
+  "refresh": "Refresh users",
+  "name": "Name"
 }

worklenz-frontend/public/locales/en/survey.json

@@ -0,0 +1,14 @@
+{
+  "modalTitle": "Help Us Improve Your Experience",
+  "skip": "Skip for now",
+  "previous": "Previous",
+  "next": "Next",
+  "completeSurvey": "Complete Survey",
+  "submitting": "Submitting your responses...",
+  "submitSuccessTitle": "Thank you!",
+  "submitSuccessSubtitle": "Your feedback helps us improve Worklenz for everyone.",
+  "submitSuccessMessage": "Thank you for completing the survey!",
+  "submitErrorMessage": "Failed to submit survey. Please try again.",
+  "submitErrorLog": "Failed to submit survey",
+  "fetchErrorLog": "Failed to fetch survey"
+} 

worklenz-frontend/public/locales/en/task-list-filters.json

@@ -84,5 +84,12 @@
   "close": "Close",
   "cannotMoveStatus": "Cannot Move Status",
   "cannotMoveStatusMessage": "Cannot move this status because it would leave the '{{categoryName}}' category empty. Each category must have at least one status.",
-  "ok": "OK"
+  "ok": "OK",
+  "clearSort": "Clear Sort",
+  "sortAscending": "Sort Ascending",
+  "sortDescending": "Sort Descending",
+  "sortByField": "Sort by {{field}}",
+  "ascendingOrder": "Ascending",
+  "descendingOrder": "Descending",
+  "currentSort": "Current sort: {{field}} {{order}}"
 }

worklenz-frontend/public/locales/es/account-setup.json

@@ -3,7 +3,28 @@
 
   "setupYourAccount": "Configura tu cuenta.",
   "organizationStepTitle": "Nombra tu organización",
-  "organizationStepLabel": "Elige un nombre para tu cuenta de Worklenz.",
+  "organizationStepWelcome": "¡Bienvenido a Worklenz!",
+  "organizationStepDescription": "Comencemos configurando tu organización. Este será el espacio de trabajo principal para tu equipo.",
+  "organizationStepLabel": "Nombre de la organización",
+  "organizationStepPlaceholder": "ej. Corporación Acme",
+  "organizationStepTooltip": "Este nombre aparecerá en tu espacio de trabajo y se puede cambiar más tarde en la configuración.",
+  "organizationStepNeedIdeas": "¿Necesitas ideas?",
+  "organizationStepUseDetected": "Usar detectado:",
+  "organizationStepCharacters": "caracteres",
+  "organizationStepGoodLength": "Buena longitud",
+  "organizationStepTooShort": "Demasiado corto",
+  "organizationStepNamingTips": "Consejos para nombrar",
+  "organizationStepTip1": "Manténlo simple y memorable",
+  "organizationStepTip2": "Refleja tu industria o valores",
+  "organizationStepTip3": "Piensa en el crecimiento futuro",
+  "organizationStepTip4": "Hazlo único y reconocible",
+  "organizationStepSuggestionsTitle": "Sugerencias de nombres",
+  "organizationStepCategory1": "Empresas tecnológicas",
+  "organizationStepCategory2": "Agencias creativas",
+  "organizationStepCategory3": "Consultoría",
+  "organizationStepCategory4": "Startups",
+  "organizationStepSuggestionsNote": "Estos son solo ejemplos para empezar. Elige algo que represente a tu organización.",
+  "organizationStepPrivacyNote": "El nombre de tu organización es privado y solo visible para los miembros de tu equipo.",
 
   "projectStepTitle": "Crea tu primer proyecto",
   "projectStepLabel": "¿En qué proyecto estás trabajando ahora?",
@@ -24,9 +45,171 @@
   "step3InputLabel": "Invitar por correo electrónico",
   "addAnother": "Agregar otro",
   "skipForNow": "Omitir por ahora",
+  "skipping": "Omitiendo...",
   "formTitle": "Crea tu primera tarea.",
   "step3Title": "Invita a tu equipo a trabajar",
 
   "maxMembers": " (Puedes invitar hasta 5 miembros)",
-  "maxTasks": " (Puedes crear hasta 5 tareas)"
+  "maxTasks": " (Puedes crear hasta 5 tareas)",
+
+  "membersStepTitle": "Invita a tu equipo",
+  "membersStepDescription": "Añade miembros del equipo a \"{{organizationName}}\" y comienza a colaborar",
+  "memberPlaceholder": "Miembro del equipo {{index}} - Ingresa dirección de correo",
+  "validEmailAddress": "Dirección de correo válida",
+  "addAnotherTeamMember": "Añadir otro miembro del equipo ({{current}}/{{max}})",
+  "canInviteLater": "Siempre puedes invitar miembros del equipo más tarde",
+  "skipStepDescription": "¿No tienes direcciones de correo listas? ¡No hay problema! Puedes omitir este paso e invitar miembros del equipo desde tu panel de proyecto más tarde.",
+
+  "orgCategoryTech": "Empresas Tecnológicas",
+  "orgCategoryCreative": "Agencias Creativas", 
+  "orgCategoryConsulting": "Consultoría",
+  "orgCategoryStartups": "Startups",
+  "namingTip1": "Manténlo simple y memorable",
+  "namingTip2": "Refleja tu industria o valores",
+  "namingTip3": "Piensa en el crecimiento futuro",
+  "namingTip4": "Hazlo único y reconocible",
+
+  "aboutYouTitle": "Cuéntanos sobre ti",
+  "aboutYouDescription": "Ayúdanos a personalizar tu experiencia",
+  "orgTypeQuestion": "¿Qué describe mejor tu organización?",
+  "userRoleQuestion": "¿Cuál es tu rol?",
+  
+  "yourNeedsTitle": "¿Cuáles son tus principales necesidades?",
+  "yourNeedsDescription": "Selecciona todas las que apliquen para ayudarnos a configurar tu espacio de trabajo",
+  "yourNeedsQuestion": "¿Cómo usarás principalmente Worklenz?",
+  "useCaseTaskOrg": "Organizar y hacer seguimiento de tareas",
+  "useCaseTeamCollab": "Trabajar juntos sin problemas", 
+  "useCaseResourceMgmt": "Gestionar tiempo y recursos",
+  "useCaseClientComm": "Mantenerse conectado con clientes",
+  "useCaseTimeTrack": "Monitorear horas de proyecto",
+  "useCaseOther": "Algo más",
+  "selectedText": "seleccionado",
+  "previousToolsQuestion": "¿Qué herramientas has usado antes? (Opcional)",
+  "previousToolsPlaceholder": "ej., Asana, Trello, Jira, Monday.com, etc.",
+  
+  "discoveryTitle": "Una última cosa...",
+  "discoveryDescription": "Ayúdanos a entender cómo descubriste Worklenz",
+  "discoveryQuestion": "¿Cómo te enteraste de nosotros?",
+  "allSetTitle": "¡Ya estás listo!",
+  "allSetDescription": "Vamos a crear tu primer proyecto y comenzar con Worklenz",
+  "surveyCompleteTitle": "¡Gracias!",
+  "surveyCompleteDescription": "Tu retroalimentación nos ayuda a mejorar Worklenz para todos",
+  "aboutYouStepName": "Sobre ti",
+  "yourNeedsStepName": "Tus necesidades", 
+  "discoveryStepName": "Descubrimiento",
+  "stepProgress": "Paso {step} de 3: {title}",
+
+  "projectStepHeader": "Vamos a crear tu primer proyecto",
+  "projectStepSubheader": "Empieza desde cero o usa una plantilla para ir más rápido",
+  "startFromScratch": "Empezar desde cero",
+  "templateSelected": "Plantilla seleccionada abajo",
+  "quickSuggestions": "Sugerencias rápidas:",
+  "orText": "O",
+  "startWithTemplate": "Comenzar con una plantilla",
+  "clearToSelectTemplate": "Borra el nombre del proyecto arriba para seleccionar una plantilla",
+  "templateHeadStart": "Obtén una ventaja inicial con estructuras de proyecto pre-construidas",
+  "browseAllTemplates": "Explorar todas las plantillas",
+  "templatesAvailable": "15+ plantillas específicas de industria disponibles",
+  "chooseTemplate": "Elige una plantilla que coincida con tu tipo de proyecto",
+  "createProject": "Crear proyecto",
+
+  "templateSoftwareDev": "Desarrollo de Software",
+  "templateSoftwareDesc": "Sprints ágiles, seguimiento de errores, lanzamientos",
+  "templateMarketing": "Campaña de Marketing", 
+  "templateMarketingDesc": "Planificación de campaña, calendario de contenido",
+  "templateConstruction": "Proyecto de Construcción",
+  "templateConstructionDesc": "Fases, permisos, contratistas",
+  "templateStartup": "Lanzamiento de Startup",
+  "templateStartupDesc": "Desarrollo MVP, financiación, crecimiento",
+
+  "tasksStepTitle": "Añade tus primeras tareas",
+  "tasksStepDescription": "Desglosa \"{{projectName}}\" en tareas accionables para comenzar",
+  "taskPlaceholder": "Tarea {{index}} - ej., ¿Qué necesita hacerse?",
+  "addAnotherTask": "Añadir otra tarea ({{current}}/{{max}})",
+
+  "surveyStepTitle": "Cuéntanos sobre ti",
+  "surveyStepLabel": "Ayúdanos a personalizar tu experiencia de Worklenz respondiendo algunas preguntas.",
+  
+  "organizationType": "¿Qué describe mejor tu organización?",
+  "organizationTypeFreelancer": "Freelancer",
+  "organizationTypeStartup": "Startup",
+  "organizationTypeSmallMediumBusiness": "Pequeña o Mediana Empresa",
+  "organizationTypeAgency": "Agencia",
+  "organizationTypeEnterprise": "Empresa",
+  "organizationTypeOther": "Otro",
+  
+  "userRole": "¿Cuál es tu rol?",
+  "userRoleFounderCeo": "Fundador / CEO",
+  "userRoleProjectManager": "Gerente de Proyecto",
+  "userRoleSoftwareDeveloper": "Desarrollador de Software",
+  "userRoleDesigner": "Diseñador",
+  "userRoleOperations": "Operaciones",
+  "userRoleOther": "Otro",
+  
+  "mainUseCases": "¿Para qué usarás principalmente Worklenz?",
+  "mainUseCasesTaskManagement": "Gestión de tareas",
+  "mainUseCasesTeamCollaboration": "Colaboración de equipo",
+  "mainUseCasesResourcePlanning": "Planificación de recursos",
+  "mainUseCasesClientCommunication": "Comunicación con clientes e informes",
+  "mainUseCasesTimeTracking": "Seguimiento de tiempo",
+  "mainUseCasesOther": "Otro",
+  
+  "previousTools": "¿Qué herramienta(s) usabas antes de Worklenz?",
+  "previousToolsPlaceholder": "ej. Trello, Asana, Monday.com",
+  
+  "howHeardAbout": "¿Cómo conociste Worklenz?",
+  "howHeardAboutGoogleSearch": "Búsqueda de Google",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "Un amigo o colega",
+  "howHeardAboutBlogArticle": "Un blog o artículo",
+  "howHeardAboutOther": "Otro",
+  
+  "aboutYouStepTitle": "Cuéntanos sobre ti",
+  "aboutYouStepDescription": "Ayúdanos a personalizar tu experiencia",
+  "yourNeedsStepTitle": "¿Cuáles son tus principales necesidades?",
+  "yourNeedsStepDescription": "Selecciona todas las que apliquen para ayudarnos a configurar tu espacio de trabajo",
+  "selected": "seleccionado",
+  "previousToolsLabel": "¿Qué herramientas has usado antes? (Opcional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Gráficos, Creativo",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planificación, Coordinación",
+    "marketing": "Contenido, Redes Sociales, Crecimiento",
+    "sales": "Desarrollo de Negocios, Relaciones con Clientes",
+    "operations": "Administración, RRHH, Finanzas"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Proyecto Cliente", "Actualización Portfolio", "Marca Personal"],
+    "startup": ["Desarrollo MVP", "Lanzamiento Producto", "Investigación Mercado"],
+    "agency": ["Campaña Cliente", "Estrategia Marca", "Rediseño Website"],
+    "enterprise": ["Migración Sistema", "Optimización Procesos", "Capacitación Equipo"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Organizar y rastrear tareas",
+    "teamCollaboration": "Trabajar juntos sin problemas",
+    "resourcePlanning": "Gestionar tiempo y recursos", 
+    "clientCommunication": "Mantenerse conectado con clientes",
+    "timeTracking": "Monitorear horas de proyecto",
+    "other": "Algo más"
+  }
 }

worklenz-frontend/public/locales/es/auth/signup.json

@@ -7,12 +7,12 @@
   "emailLabel": "Correo electrónico",
   "emailPlaceholder": "Ingresa tu correo electrónico",
   "emailRequired": "¡Por favor ingresa tu correo electrónico!",
-  "passwordLabel": "Password",
-  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
-  "passwordPlaceholder": "Enter your password",
+  "passwordLabel": "Contraseña",
+  "passwordGuideline": "La contraseña debe tener al menos 8 caracteres, incluir letras mayúsculas y minúsculas, un número y un carácter especial.",
+  "passwordPlaceholder": "Ingresa tu contraseña",
   "passwordRequired": "¡Por favor ingresa tu contraseña!",
   "passwordMinCharacterRequired": "¡La contraseña debe tener al menos 8 caracteres!",
-  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
+  "passwordMaxCharacterRequired": "¡La contraseña debe tener como máximo 32 caracteres!",
   "passwordPatternRequired": "¡La contraseña no cumple con los requisitos!",
   "strongPasswordPlaceholder": "Ingresa una contraseña más segura",
   "passwordValidationAltText": "La contraseña debe incluir al menos 8 caracteres con letras mayúsculas y minúsculas, un número y un símbolo.",

worklenz-frontend/public/locales/es/survey.json

@@ -0,0 +1,14 @@
+{
+  "modalTitle": "Ayúdanos a mejorar tu experiencia",
+  "skip": "Omitir por ahora",
+  "previous": "Anterior",
+  "next": "Siguiente",
+  "completeSurvey": "Completar encuesta",
+  "submitting": "Enviando tus respuestas...",
+  "submitSuccessTitle": "¡Gracias!",
+  "submitSuccessSubtitle": "Tus comentarios nos ayudan a mejorar Worklenz para todos.",
+  "submitSuccessMessage": "¡Gracias por completar la encuesta!",
+  "submitErrorMessage": "No se pudo enviar la encuesta. Por favor, inténtalo de nuevo.",
+  "submitErrorLog": "Error al enviar la encuesta",
+  "fetchErrorLog": "Error al obtener la encuesta"
+} 

worklenz-frontend/public/locales/es/task-list-filters.json

@@ -84,5 +84,12 @@
   "close": "Cerrar",
   "cannotMoveStatus": "No se puede mover el estado",
   "cannotMoveStatusMessage": "No se puede mover este estado porque dejaría vacía la categoría '{{categoryName}}'. Cada categoría debe tener al menos un estado.",
-  "ok": "OK"
+  "ok": "OK",
+  "clearSort": "Limpiar Ordenamiento",
+  "sortAscending": "Ordenar Ascendente",
+  "sortDescending": "Ordenar Descendente",
+  "sortByField": "Ordenar por {{field}}",
+  "ascendingOrder": "Ascendente",
+  "descendingOrder": "Descendente",
+  "currentSort": "Ordenamiento actual: {{field}} {{order}}"
 }

worklenz-frontend/public/locales/pt/account-setup.json

@@ -3,7 +3,28 @@
 
   "setupYourAccount": "Configure sua conta.",
   "organizationStepTitle": "Nomeie sua organização",
-  "organizationStepLabel": "Escolha um nome para sua conta Worklenz.",
+  "organizationStepWelcome": "Bem-vindo ao Worklenz!",
+  "organizationStepDescription": "Vamos começar configurando sua organização. Este será o espaço de trabalho principal para sua equipe.",
+  "organizationStepLabel": "Nome da organização",
+  "organizationStepPlaceholder": "ex. Corporação Acme",
+  "organizationStepTooltip": "Este nome aparecerá em seu espaço de trabalho e pode ser alterado posteriormente nas configurações.",
+  "organizationStepNeedIdeas": "Precisa de ideias?",
+  "organizationStepUseDetected": "Usar detectado:",
+  "organizationStepCharacters": "caracteres",
+  "organizationStepGoodLength": "Bom comprimento",
+  "organizationStepTooShort": "Muito curto",
+  "organizationStepNamingTips": "Dicas de nomenclatura",
+  "organizationStepTip1": "Mantenha simples e memorável",
+  "organizationStepTip2": "Reflita sua indústria ou valores",
+  "organizationStepTip3": "Pense no crescimento futuro",
+  "organizationStepTip4": "Torne único e marcante",
+  "organizationStepSuggestionsTitle": "Sugestões de nomes",
+  "organizationStepCategory1": "Empresas de tecnologia",
+  "organizationStepCategory2": "Agências criativas",
+  "organizationStepCategory3": "Consultoria",
+  "organizationStepCategory4": "Startups",
+  "organizationStepSuggestionsNote": "Estes são apenas exemplos para começar. Escolha algo que represente sua organização.",
+  "organizationStepPrivacyNote": "O nome da sua organização é privado e visível apenas para os membros da sua equipe.",
 
   "projectStepTitle": "Crie seu primeiro projeto",
   "projectStepLabel": "Em qual projeto você está trabalhando agora?",
@@ -24,9 +45,171 @@
   "step3InputLabel": "Convidar por email",
   "addAnother": "Adicionar outro",
   "skipForNow": "Pular por enquanto",
+  "skipping": "Pulando...",
   "formTitle": "Crie sua primeira tarefa.",
   "step3Title": "Convide sua equipe para trabalhar",
 
   "maxMembers": " (Você pode convidar até 5 membros)",
-  "maxTasks": " (Você pode criar até 5 tarefas)"
+  "maxTasks": " (Você pode criar até 5 tarefas)",
+
+  "membersStepTitle": "Convide sua equipe",
+  "membersStepDescription": "Adicione membros da equipe ao \"{{organizationName}}\" e comece a colaborar",
+  "memberPlaceholder": "Membro da equipe {{index}} - Digite o endereço de email",
+  "validEmailAddress": "Endereço de email válido",
+  "addAnotherTeamMember": "Adicionar outro membro da equipe ({{current}}/{{max}})",
+  "canInviteLater": "Você sempre pode convidar membros da equipe mais tarde",
+  "skipStepDescription": "Não tem endereços de email prontos? Sem problema! Você pode pular esta etapa e convidar membros da equipe do seu painel de projeto mais tarde.",
+
+  "orgCategoryTech": "Empresas de Tecnologia",
+  "orgCategoryCreative": "Agências Criativas", 
+  "orgCategoryConsulting": "Consultoria",
+  "orgCategoryStartups": "Startups",
+  "namingTip1": "Mantenha simples e memorável",
+  "namingTip2": "Reflita sua indústria ou valores",
+  "namingTip3": "Pense no crescimento futuro",
+  "namingTip4": "Torne único e marcante",
+
+  "aboutYouTitle": "Conte-nos sobre você",
+  "aboutYouDescription": "Ajude-nos a personalizar sua experiência",
+  "orgTypeQuestion": "O que melhor descreve sua organização?",
+  "userRoleQuestion": "Qual é seu papel?",
+  
+  "yourNeedsTitle": "Quais são suas principais necessidades?",
+  "yourNeedsDescription": "Selecione todas que se aplicam para nos ajudar a configurar seu espaço de trabalho",
+  "yourNeedsQuestion": "Como você usará principalmente o Worklenz?",
+  "useCaseTaskOrg": "Organizar e acompanhar tarefas",
+  "useCaseTeamCollab": "Trabalhar juntos perfeitamente", 
+  "useCaseResourceMgmt": "Gerenciar tempo e recursos",
+  "useCaseClientComm": "Manter-se conectado com clientes",
+  "useCaseTimeTrack": "Monitorar horas do projeto",
+  "useCaseOther": "Algo mais",
+  "selectedText": "selecionado",
+  "previousToolsQuestion": "Que ferramentas você usou antes? (Opcional)",
+  "previousToolsPlaceholder": "ex., Asana, Trello, Jira, Monday.com, etc.",
+  
+  "discoveryTitle": "Uma última coisa...",
+  "discoveryDescription": "Ajude-nos a entender como você descobriu o Worklenz",
+  "discoveryQuestion": "Como você soube sobre nós?",
+  "allSetTitle": "Você está pronto!",
+  "allSetDescription": "Vamos criar seu primeiro projeto e começar com o Worklenz",
+  "surveyCompleteTitle": "Obrigado!",
+  "surveyCompleteDescription": "Seu feedback nos ajuda a melhorar o Worklenz para todos",
+  "aboutYouStepName": "Sobre você",
+  "yourNeedsStepName": "Suas necessidades", 
+  "discoveryStepName": "Descoberta",
+  "stepProgress": "Passo {step} de 3: {title}",
+
+  "projectStepHeader": "Vamos criar seu primeiro projeto",
+  "projectStepSubheader": "Comece do zero ou use um modelo para ir mais rápido",
+  "startFromScratch": "Começar do zero",
+  "templateSelected": "Modelo selecionado abaixo",
+  "quickSuggestions": "Sugestões rápidas:",
+  "orText": "OU",
+  "startWithTemplate": "Começar com um modelo",
+  "clearToSelectTemplate": "Limpe o nome do projeto acima para selecionar um modelo",
+  "templateHeadStart": "Obtenha uma vantagem inicial com estruturas de projeto pré-construídas",
+  "browseAllTemplates": "Navegar por todos os modelos",
+  "templatesAvailable": "15+ modelos específicos da indústria disponíveis",
+  "chooseTemplate": "Escolha um modelo que corresponda ao seu tipo de projeto",
+  "createProject": "Criar projeto",
+
+  "templateSoftwareDev": "Desenvolvimento de Software",
+  "templateSoftwareDesc": "Sprints ágeis, rastreamento de bugs, lançamentos",
+  "templateMarketing": "Campanha de Marketing", 
+  "templateMarketingDesc": "Planejamento de campanha, calendário de conteúdo",
+  "templateConstruction": "Projeto de Construção",
+  "templateConstructionDesc": "Fases, licenças, empreiteiros",
+  "templateStartup": "Lançamento de Startup",
+  "templateStartupDesc": "Desenvolvimento MVP, financiamento, crescimento",
+
+  "tasksStepTitle": "Adicione suas primeiras tarefas",
+  "tasksStepDescription": "Divida \"{{projectName}}\" em tarefas acionáveis para começar",
+  "taskPlaceholder": "Tarefa {{index}} - ex., O que precisa ser feito?",
+  "addAnotherTask": "Adicionar outra tarefa ({{current}}/{{max}})",
+
+  "surveyStepTitle": "Conte-nos sobre você",
+  "surveyStepLabel": "Ajude-nos a personalizar sua experiência no Worklenz respondendo algumas perguntas.",
+  
+  "organizationType": "O que melhor descreve sua organização?",
+  "organizationTypeFreelancer": "Freelancer",
+  "organizationTypeStartup": "Startup",
+  "organizationTypeSmallMediumBusiness": "Pequena ou Média Empresa",
+  "organizationTypeAgency": "Agência",
+  "organizationTypeEnterprise": "Empresa",
+  "organizationTypeOther": "Outro",
+  
+  "userRole": "Qual é o seu papel?",
+  "userRoleFounderCeo": "Fundador / CEO",
+  "userRoleProjectManager": "Gerente de Projeto",
+  "userRoleSoftwareDeveloper": "Desenvolvedor de Software",
+  "userRoleDesigner": "Designer",
+  "userRoleOperations": "Operações",
+  "userRoleOther": "Outro",
+  
+  "mainUseCases": "Para que você usará principalmente o Worklenz?",
+  "mainUseCasesTaskManagement": "Gerenciamento de tarefas",
+  "mainUseCasesTeamCollaboration": "Colaboração em equipe",
+  "mainUseCasesResourcePlanning": "Planejamento de recursos",
+  "mainUseCasesClientCommunication": "Comunicação com clientes e relatórios",
+  "mainUseCasesTimeTracking": "Controle de tempo",
+  "mainUseCasesOther": "Outro",
+  
+  "previousTools": "Que ferramenta(s) você usava antes do Worklenz?",
+  "previousToolsPlaceholder": "ex. Trello, Asana, Monday.com",
+  
+  "howHeardAbout": "Como você soube do Worklenz?",
+  "howHeardAboutGoogleSearch": "Busca no Google",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "Um amigo ou colega",
+  "howHeardAboutBlogArticle": "Um blog ou artigo",
+  "howHeardAboutOther": "Outro",
+  
+  "aboutYouStepTitle": "Conte-nos sobre você",
+  "aboutYouStepDescription": "Ajude-nos a personalizar sua experiência",
+  "yourNeedsStepTitle": "Quais são suas principais necessidades?",
+  "yourNeedsStepDescription": "Selecione todas que se aplicam para nos ajudar a configurar seu espaço de trabalho",
+  "selected": "selecionado",
+  "previousToolsLabel": "Que ferramentas você usou antes? (Opcional)",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX, Gráficos, Criativo",
+    "developer": "Frontend, Backend, Full-stack", 
+    "projectManager": "Planejamento, Coordenação",
+    "marketing": "Conteúdo, Mídias Sociais, Crescimento",
+    "sales": "Desenvolvimento de Negócios, Relacionamento com Clientes",
+    "operations": "Administração, RH, Finanças"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["Projeto Cliente", "Atualização Portfolio", "Marca Pessoal"],
+    "startup": ["Desenvolvimento MVP", "Lançamento Produto", "Pesquisa Mercado"],
+    "agency": ["Campanha Cliente", "Estratégia Marca", "Redesign Website"],
+    "enterprise": ["Migração Sistema", "Otimização Processos", "Treinamento Equipe"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "Organizar e rastrear tarefas",
+    "teamCollaboration": "Trabalhar juntos perfeitamente",
+    "resourcePlanning": "Gerenciar tempo e recursos", 
+    "clientCommunication": "Manter-se conectado com clientes",
+    "timeTracking": "Monitorar horas do projeto",
+    "other": "Algo mais"
+  }
 }

worklenz-frontend/public/locales/pt/survey.json

@@ -0,0 +1,14 @@
+{
+  "modalTitle": "Ajude-nos a melhorar sua experiência",
+  "skip": "Pular por enquanto",
+  "previous": "Anterior",
+  "next": "Próximo",
+  "completeSurvey": "Concluir Pesquisa",
+  "submitting": "Enviando suas respostas...",
+  "submitSuccessTitle": "Obrigado!",
+  "submitSuccessSubtitle": "Seu feedback nos ajuda a melhorar o Worklenz para todos.",
+  "submitSuccessMessage": "Obrigado por completar a pesquisa!",
+  "submitErrorMessage": "Falha ao enviar a pesquisa. Por favor, tente novamente.",
+  "submitErrorLog": "Falha ao enviar a pesquisa",
+  "fetchErrorLog": "Falha ao buscar a pesquisa"
+} 

worklenz-frontend/public/locales/pt/task-list-filters.json

@@ -84,5 +84,12 @@
   "close": "Fechar",
   "cannotMoveStatus": "Não é possível mover o status",
   "cannotMoveStatusMessage": "Não é possível mover este status porque deixaria a categoria '{{categoryName}}' vazia. Cada categoria deve ter pelo menos um status.",
-  "ok": "OK"
+  "ok": "OK",
+  "clearSort": "Limpar Ordenação",
+  "sortAscending": "Ordenar Crescente",
+  "sortDescending": "Ordenar Decrescente",
+  "sortByField": "Ordenar por {{field}}",
+  "ascendingOrder": "Crescente",
+  "descendingOrder": "Decrescente",
+  "currentSort": "Ordenação atual: {{field}} {{order}}"
 }

worklenz-frontend/public/locales/zh/account-setup.json

@@ -1,14 +1,38 @@
 {
   "continue": "继续",
-  "setupYourAccount": "设置您的Worklenz账户。",
+  "setupYourAccount": "设置您的 Worklenz 账户。",
   "organizationStepTitle": "命名您的组织",
-  "organizationStepLabel": "为您的Worklenz账户选择一个名称。",
+  "organizationStepWelcome": "欢迎使用 Worklenz！",
+  "organizationStepDescription": "让我们从设置您的组织开始。这将是您团队的主要工作空间。",
+  "organizationStepLabel": "组织名称",
+  "organizationStepPlaceholder": "例如：Acme 公司",
+  "organizationStepTooltip": "此名称将显示在您的工作区，并可在设置中更改。",
+  "organizationStepNeedIdeas": "需要灵感？",
+  "organizationStepUseDetected": "检测到使用：",
+  "organizationStepCharacters": "字符",
+  "organizationStepGoodLength": "长度合适",
+  "organizationStepTooShort": "太短",
+  "organizationStepNamingTips": "命名建议",
+  "organizationStepTip1": "保持简单且易记",
+  "organizationStepTip2": "体现您的行业或价值观",
+  "organizationStepTip3": "考虑未来发展",
+  "organizationStepTip4": "使其独特且有品牌感",
+  "organizationStepSuggestionsTitle": "名称建议",
+  "organizationStepCategory1": "科技公司",
+  "organizationStepCategory2": "创意机构",
+  "organizationStepCategory3": "咨询公司",
+  "organizationStepCategory4": "初创企业",
+  "organizationStepSuggestionsNote": "这些只是帮助您入门的示例。请选择能代表您组织的名称。",
+  "organizationStepPrivacyNote": "您的组织名称是私有的，仅团队成员可见。",
+
   "projectStepTitle": "创建您的第一个项目",
   "projectStepLabel": "您现在正在做什么项目？",
   "projectStepPlaceholder": "例如：营销计划",
+
   "tasksStepTitle": "创建您的第一个任务",
   "tasksStepLabel": "输入您将在其中完成的几个任务",
   "tasksStepAddAnother": "添加另一个",
+
   "emailPlaceholder": "电子邮件地址",
   "invalidEmail": "请输入有效的电子邮件地址",
   "or": "或",
@@ -20,8 +44,170 @@
   "step3InputLabel": "通过电子邮件邀请",
   "addAnother": "添加另一个",
   "skipForNow": "暂时跳过",
+  "skipping": "跳过中...",
   "formTitle": "创建您的第一个任务。",
   "step3Title": "邀请您的团队一起工作",
-  "maxMembers": "（您最多可以邀请5名成员）",
-  "maxTasks": "（您最多可以创建5个任务）"
-}
+  "maxMembers": "（您最多可以邀请 5 名成员）",
+  "maxTasks": "（您最多可以创建 5 个任务）",
+
+  "membersStepTitle": "邀请您的团队",
+  "membersStepDescription": "将团队成员添加到 \"{{organizationName}}\" 并开始协作",
+  "memberPlaceholder": "团队成员 {{index}} - 输入电子邮件地址",
+  "validEmailAddress": "有效的电子邮件地址",
+  "addAnotherTeamMember": "添加另一个团队成员 ({{current}}/{{max}})",
+  "canInviteLater": "您可以稍后邀请团队成员",
+  "skipStepDescription": "没有准备好电子邮件地址？没关系！您可以跳过此步骤，稍后从项目面板邀请团队成员。",
+
+  "orgCategoryTech": "科技公司",
+  "orgCategoryCreative": "创意机构",
+  "orgCategoryConsulting": "咨询公司",
+  "orgCategoryStartups": "初创企业",
+  "namingTip1": "保持简单且易记",
+  "namingTip2": "体现您的行业或价值观",
+  "namingTip3": "考虑未来发展",
+  "namingTip4": "使其独特且有品牌感",
+
+  "aboutYouTitle": "告诉我们关于您的信息",
+  "aboutYouDescription": "帮助我们个性化您的体验",
+  "orgTypeQuestion": "哪项最能描述您的组织？",
+  "userRoleQuestion": "您的角色是什么？",
+
+  "yourNeedsTitle": "您的主要需求是什么？",
+  "yourNeedsDescription": "请选择所有适用项，帮助我们设置您的工作区",
+  "yourNeedsQuestion": "您主要如何使用 Worklenz？",
+  "useCaseTaskOrg": "组织和跟踪任务",
+  "useCaseTeamCollab": "团队协作",
+  "useCaseResourceMgmt": "管理时间和资源",
+  "useCaseClientComm": "与客户保持联系",
+  "useCaseTimeTrack": "监控项目工时",
+  "useCaseOther": "其他",
+  "selectedText": "已选择",
+  "previousToolsQuestion": "您之前用过哪些工具？（可选）",
+  "previousToolsPlaceholder": "例如：Asana、Trello、Jira、Monday.com 等",
+
+  "discoveryTitle": "最后一个问题……",
+  "discoveryDescription": "帮助我们了解您是如何发现 Worklenz 的",
+  "discoveryQuestion": "您是如何听说我们的？",
+  "allSetTitle": "一切就绪！",
+  "allSetDescription": "让我们创建您的第一个项目并开始使用 Worklenz 吧",
+  "surveyCompleteTitle": "谢谢！",
+  "surveyCompleteDescription": "您的反馈有助于我们为所有人改进 Worklenz",
+  "aboutYouStepName": "关于您",
+  "yourNeedsStepName": "您的需求",
+  "discoveryStepName": "发现",
+  "stepProgress": "第 {step} 步，共 3 步：{title}",
+
+  "projectStepHeader": "让我们创建您的第一个项目",
+  "projectStepSubheader": "从头开始或使用模板更快上手",
+  "startFromScratch": "从头开始",
+  "templateSelected": "已选择模板如下",
+  "quickSuggestions": "快速建议：",
+  "orText": "或",
+  "startWithTemplate": "从模板开始",
+  "clearToSelectTemplate": "请先清空上方项目名称以选择模板",
+  "templateHeadStart": "使用预设项目结构快速开始",
+  "browseAllTemplates": "浏览所有模板",
+  "templatesAvailable": "15+ 行业专用模板可用",
+  "chooseTemplate": "选择与您的项目类型匹配的模板",
+  "createProject": "创建项目",
+
+  "templateSoftwareDev": "软件开发",
+  "templateSoftwareDesc": "敏捷冲刺、缺陷跟踪、版本发布",
+  "templateMarketing": "市场营销活动",
+  "templateMarketingDesc": "活动策划、内容日历",
+  "templateConstruction": "建设项目",
+  "templateConstructionDesc": "阶段、许可、承包商",
+  "templateStartup": "初创启动",
+  "templateStartupDesc": "MVP 开发、融资、增长",
+
+  "tasksStepTitle": "添加您的第一个任务",
+  "tasksStepDescription": "将 \"{{projectName}}\" 拆分为可执行任务以开始",
+  "taskPlaceholder": "任务 {{index}} - 例如：需要做什么？",
+  "addAnotherTask": "添加另一个任务 ({{current}}/{{max}})",
+
+  "surveyStepTitle": "告诉我们关于您的信息",
+  "surveyStepLabel": "通过回答几个问题帮助我们个性化您的 Worklenz 体验。",
+
+  "organizationType": "哪项最能描述您的组织？",
+  "organizationTypeFreelancer": "自由职业者",
+  "organizationTypeStartup": "初创公司",
+  "organizationTypeSmallMediumBusiness": "中小企业",
+  "organizationTypeAgency": "代理机构",
+  "organizationTypeEnterprise": "企业",
+  "organizationTypeOther": "其他",
+
+  "userRole": "您的角色是什么？",
+  "userRoleFounderCeo": "创始人 / CEO",
+  "userRoleProjectManager": "项目经理",
+  "userRoleSoftwareDeveloper": "软件开发者",
+  "userRoleDesigner": "设计师",
+  "userRoleOperations": "运营",
+  "userRoleOther": "其他",
+
+  "mainUseCases": "您主要将 Worklenz 用于什么？",
+  "mainUseCasesTaskManagement": "任务管理",
+  "mainUseCasesTeamCollaboration": "团队协作",
+  "mainUseCasesResourcePlanning": "资源规划",
+  "mainUseCasesClientCommunication": "客户沟通与报告",
+  "mainUseCasesTimeTracking": "时间跟踪",
+  "mainUseCasesOther": "其他",
+
+  "previousTools": "在使用 Worklenz 之前您用过哪些工具？",
+  "previousToolsPlaceholder": "例如：Trello、Asana、Monday.com",
+
+  "howHeardAbout": "您是如何了解 Worklenz 的？",
+  "howHeardAboutGoogleSearch": "Google 搜索",
+  "howHeardAboutTwitter": "Twitter",
+  "howHeardAboutLinkedin": "LinkedIn",
+  "howHeardAboutFriendColleague": "朋友或同事",
+  "howHeardAboutBlogArticle": "博客或文章",
+  "howHeardAboutOther": "其他",
+  
+  "aboutYouStepTitle": "告诉我们关于您的信息",
+  "aboutYouStepDescription": "帮助我们个性化您的体验",
+  "yourNeedsStepTitle": "您的主要需求是什么？",
+  "yourNeedsStepDescription": "选择所有适用的选项，帮助我们设置您的工作空间",
+  "selected": "已选择",
+  "previousToolsLabel": "您之前使用过哪些工具？（可选）",
+  
+  "roleSuggestions": {
+    "designer": "UI/UX、图形、创意",
+    "developer": "前端、后端、全栈", 
+    "projectManager": "规划、协调",
+    "marketing": "内容、社交媒体、增长",
+    "sales": "业务发展、客户关系",
+    "operations": "行政、人力资源、财务"
+  },
+  
+  "languages": {
+    "en": "English",
+    "es": "Español", 
+    "pt": "Português",
+    "de": "Deutsch",
+    "alb": "Shqip",
+    "zh": "简体中文"
+  },
+  
+  "orgSuggestions": {
+    "tech": ["TechCorp", "DevStudio", "CodeCraft", "PixelForge"],
+    "creative": ["Creative Hub", "Design Studio", "Brand Works", "Visual Arts"],
+    "consulting": ["Strategy Group", "Business Solutions", "Expert Advisors", "Growth Partners"],
+    "startup": ["Innovation Labs", "Future Works", "Venture Co", "Next Gen"]
+  },
+  
+  "projectSuggestions": {
+    "freelancer": ["客户项目", "作品集更新", "个人品牌"],
+    "startup": ["MVP开发", "产品发布", "市场调研"],
+    "agency": ["客户活动", "品牌策略", "网站重设计"],
+    "enterprise": ["系统迁移", "流程优化", "团队培训"]
+  },
+  
+  "useCaseDescriptions": {
+    "taskManagement": "组织和跟踪任务",
+    "teamCollaboration": "无缝协作",
+    "resourcePlanning": "管理时间和资源", 
+    "clientCommunication": "与客户保持联系",
+    "timeTracking": "监控项目时间",
+    "other": "其他"
+  }
+}

worklenz-frontend/public/locales/zh/survey.json

@@ -0,0 +1,14 @@
+{
+  "modalTitle": "帮助我们提升您的体验",
+  "skip": "暂时跳过",
+  "previous": "上一步",
+  "next": "下一步",
+  "completeSurvey": "完成调查",
+  "submitting": "正在提交您的回答...",
+  "submitSuccessTitle": "谢谢！",
+  "submitSuccessSubtitle": "您的反馈帮助我们改进 Worklenz。",
+  "submitSuccessMessage": "感谢您完成调查！",
+  "submitErrorMessage": "提交调查失败。请重试。",
+  "submitErrorLog": "提交调查失败",
+  "fetchErrorLog": "获取调查失败"
+} 

worklenz-frontend/public/locales/zh/task-list-filters.json

@@ -79,5 +79,12 @@
   "close": "关闭",
   "cannotMoveStatus": "无法移动状态",
   "cannotMoveStatusMessage": "无法移动此状态，因为这会使\"{{categoryName}}\"类别为空。每个类别必须至少有一个状态。",
-  "ok": "确定"
+  "ok": "确定",
+  "clearSort": "清除排序",
+  "sortAscending": "升序排列",
+  "sortDescending": "降序排列",
+  "sortByField": "按{{field}}排序",
+  "ascendingOrder": "升序",
+  "descendingOrder": "降序",
+  "currentSort": "当前排序：{{field}} {{order}}"
 }

worklenz-frontend/src/api/survey/survey.api.service.ts

@@ -0,0 +1,27 @@
+import { IServerResponse } from '@/types/common.types';
+import { ISurvey, ISurveySubmissionRequest, ISurveyResponse } from '@/types/account-setup/survey.types';
+import apiClient from '../api-client';
+
+const API_BASE_URL = '/api/v1';
+
+export const surveyApiService = {
+  async getAccountSetupSurvey(): Promise<IServerResponse<ISurvey>> {
+    const response = await apiClient.get<IServerResponse<ISurvey>>(`${API_BASE_URL}/surveys/account-setup`);
+    return response.data;
+  },
+
+  async submitSurveyResponse(data: ISurveySubmissionRequest): Promise<IServerResponse<{ response_id: string }>> {
+    const response = await apiClient.post<IServerResponse<{ response_id: string }>>(`${API_BASE_URL}/surveys/responses`, data);
+    return response.data;
+  },
+
+  async getUserSurveyResponse(surveyId: string): Promise<IServerResponse<ISurveyResponse>> {
+    const response = await apiClient.get<IServerResponse<ISurveyResponse>>(`${API_BASE_URL}/surveys/responses/${surveyId}`);
+    return response.data;
+  },
+
+  async checkAccountSetupSurveyStatus(): Promise<IServerResponse<{ is_completed: boolean; completed_at?: string }>> {
+    const response = await apiClient.get<IServerResponse<{ is_completed: boolean; completed_at?: string }>>(`${API_BASE_URL}/surveys/account-setup/status`);
+    return response.data;
+  }
+};

worklenz-frontend/src/api/tasks/task-time-logs.api.service.ts

@@ -2,6 +2,7 @@ import { API_BASE_URL } from '@/shared/constants';
 import apiClient from '../api-client';
 import { IServerResponse } from '@/types/common.types';
 import { ITaskLogViewModel } from '@/types/tasks/task-log-view.types';
+import { getUserSession } from '@/utils/session-helper';
 
 const rootUrl = `${API_BASE_URL}/task-time-log`;
 
@@ -17,7 +18,11 @@ export interface IRunningTimer {
 
 export const taskTimeLogsApiService = {
   getByTask: async (id: string): Promise<IServerResponse<ITaskLogViewModel[]>> => {
-    const response = await apiClient.get(`${rootUrl}/task/${id}`);
+    const session = getUserSession();
+    const timezone = session?.timezone_name || 'UTC';
+    const response = await apiClient.get(`${rootUrl}/task/${id}`, {
+      params: { time_zone_name: timezone }
+    });
     return response.data;
   },
 

worklenz-frontend/src/components/account-setup/admin-center-common.css

@@ -1,19 +0,0 @@
-@media (max-width: 1000px) {
-  .step-content,
-  .step-form,
-  .create-first-task-form,
-  .setup-action-buttons,
-  .invite-members-form {
-    width: 400px !important;
-  }
-}
-
-@media (max-width: 500px) {
-  .step-content,
-  .step-form,
-  .create-first-task-form,
-  .setup-action-buttons,
-  .invite-members-form {
-    width: 200px !important;
-  }
-}

worklenz-frontend/src/components/account-setup/members-step.tsx

@@ -1,16 +1,15 @@
-import React, { useEffect, useRef } from 'react';
-import { Form, Input, Button, List, Alert, message, InputRef } from '@/shared/antd-imports';
-import { CloseCircleOutlined, MailOutlined, PlusOutlined } from '@/shared/antd-imports';
+import React, { useEffect, useRef, useState } from 'react';
+import { Form, Input, Button, Typography, Card, Avatar, Tag, Alert, Space, Dropdown, MenuProps } from '@/shared/antd-imports';
+import { CloseCircleOutlined, MailOutlined, PlusOutlined, UserOutlined, CheckCircleOutlined, ExclamationCircleOutlined, GlobalOutlined } from '@/shared/antd-imports';
 import { useTranslation } from 'react-i18next';
-import { Typography } from '@/shared/antd-imports';
-import { setTeamMembers, setTasks } from '@/features/account-setup/account-setup.slice';
+import { setTeamMembers } from '@/features/account-setup/account-setup.slice';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '@/app/store';
 import { validateEmail } from '@/utils/validateEmail';
 import { sanitizeInput } from '@/utils/sanitizeInput';
-import { Rule } from 'antd/es/form';
+import { setLanguage } from '@/features/i18n/localesSlice';
 
-const { Title } = Typography;
+const { Title, Paragraph, Text } = Typography;
 
 interface Email {
   id: number;
@@ -20,163 +19,233 @@ interface Email {
 interface MembersStepProps {
   isDarkMode: boolean;
   styles: any;
+  token?: any;
 }
 
-const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles }) => {
-  const { t } = useTranslation('account-setup');
+const getEmailSuggestions = (orgName?: string) => {
+  if (!orgName) return [];
+  const cleanOrgName = orgName.toLowerCase().replace(/[^a-z0-9]/g, '');
+  return [`info@${cleanOrgName}.com`, `team@${cleanOrgName}.com`, `hello@${cleanOrgName}.com`, `contact@${cleanOrgName}.com`];
+};
+
+const getRoleSuggestions = (t: any) => [
+  { role: 'Designer', icon: '🎨', description: t('roleSuggestions.designer') },
+  { role: 'Developer', icon: '💻', description: t('roleSuggestions.developer') },
+  { role: 'Project Manager', icon: '📊', description: t('roleSuggestions.projectManager') },
+  { role: 'Marketing', icon: '📢', description: t('roleSuggestions.marketing') },
+  { role: 'Sales', icon: '💼', description: t('roleSuggestions.sales') },
+  { role: 'Operations', icon: '⚙️', description: t('roleSuggestions.operations') }
+];
+
+const MembersStep: React.FC<MembersStepProps> = ({ isDarkMode, styles, token }) => {
+  const { t, i18n } = useTranslation('account-setup');
   const { teamMembers, organizationName } = useSelector(
     (state: RootState) => state.accountSetupReducer
   );
-  const inputRefs = useRef<(InputRef | null)[]>([]);
+  const { language } = useSelector((state: RootState) => state.localesReducer);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
   const dispatch = useDispatch();
-  const [form] = Form.useForm();
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [validatedEmails, setValidatedEmails] = useState<Set<number>>(new Set());
+
+  const emailSuggestions = getEmailSuggestions(organizationName);
 
   const addEmail = () => {
-    if (teamMembers.length == 5) return;
-
+    if (teamMembers.length >= 5) return;
     const newId = teamMembers.length > 0 ? Math.max(...teamMembers.map(t => t.id)) + 1 : 0;
     dispatch(setTeamMembers([...teamMembers, { id: newId, value: '' }]));
-    setTimeout(() => {
-      inputRefs.current[newId]?.focus();
-    }, 0);
+    setTimeout(() => inputRefs.current[teamMembers.length]?.focus(), 100);
   };
 
   const removeEmail = (id: number) => {
-    if (teamMembers.length > 1) {
-      dispatch(setTeamMembers(teamMembers.filter(teamMember => teamMember.id !== id)));
-    }
+    if (teamMembers.length > 1) dispatch(setTeamMembers(teamMembers.filter(teamMember => teamMember.id !== id)));
   };
 
   const updateEmail = (id: number, value: string) => {
     const sanitizedValue = sanitizeInput(value);
-    dispatch(
-      setTeamMembers(
-        teamMembers.map(teamMember =>
-          teamMember.id === id ? { ...teamMember, value: sanitizedValue } : teamMember
-        )
-      )
-    );
+    dispatch(setTeamMembers(teamMembers.map(teamMember => teamMember.id === id ? { ...teamMember, value: sanitizedValue } : teamMember)));
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const input = e.currentTarget as HTMLInputElement;
-    if (!input.value.trim()) return;
-    e.preventDefault();
-    addEmail();
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (e.key === 'Enter') {
+      const input = e.currentTarget as HTMLInputElement;
+      if (input.value.trim() && validateEmail(input.value.trim())) {
+        e.preventDefault();
+        if (index === teamMembers.length - 1 && teamMembers.length < 5) addEmail();
+        else if (index < teamMembers.length - 1) inputRefs.current[index + 1]?.focus();
+      }
+    }
   };
 
-  // Function to set ref that doesn't return anything (void)
-  const setInputRef = (index: number) => (el: InputRef | null) => {
-    inputRefs.current[index] = el;
+  const handleSuggestionClick = (suggestion: string) => {
+    const emptyEmailIndex = teamMembers.findIndex(member => !member.value.trim());
+    if (emptyEmailIndex !== -1) {
+      updateEmail(teamMembers[emptyEmailIndex].id, suggestion);
+    } else if (teamMembers.length < 5) {
+      const newId = teamMembers.length > 0 ? Math.max(...teamMembers.map(t => t.id)) + 1 : 0;
+      dispatch(setTeamMembers([...teamMembers, { id: newId, value: suggestion }]));
+    }
+    setShowSuggestions(false);
   };
 
   useEffect(() => {
-    setTimeout(() => {
-      inputRefs.current[teamMembers.length - 1]?.focus();
-      // Set initial form values
-      const initialValues: Record<string, string> = {};
-      teamMembers.forEach(teamMember => {
-        initialValues[`email-${teamMember.id}`] = teamMember.value;
-      });
-      form.setFieldsValue(initialValues);
-    }, 200);
+    setTimeout(() => inputRefs.current[0]?.focus(), 200);
   }, []);
 
-  const formRules = {
-    email: [
-      {
-        validator: async (_: any, value: string) => {
-          if (!value) return;
-          if (!validateEmail(value)) {
-            throw new Error(t('invalidEmail'));
-          }
-        },
-      },
-    ],
+  const getEmailStatus = (email: string, memberId: number) => {
+    if (!email.trim()) return 'empty';
+    if (!validatedEmails.has(memberId)) return 'empty';
+    return validateEmail(email) ? 'valid' : 'invalid';
   };
 
+  const handleBlur = (memberId: number, email: string) => {
+    setFocusedIndex(null);
+    if (email.trim()) setValidatedEmails(prev => new Set(prev).add(memberId));
+  };
+
+  const languages = [
+    { key: 'en', label: t('languages.en'), flag: '🇺🇸' },
+    { key: 'es', label: t('languages.es'), flag: '🇪🇸' },
+    { key: 'pt', label: t('languages.pt'), flag: '🇵🇹' },
+    { key: 'de', label: t('languages.de'), flag: '🇩🇪' },
+    { key: 'alb', label: t('languages.alb'), flag: '🇦🇱' },
+    { key: 'zh', label: t('languages.zh'), flag: '🇨🇳' }
+  ];
+
+  const handleLanguageChange = (languageKey: string) => {
+    dispatch(setLanguage(languageKey));
+    i18n.changeLanguage(languageKey);
+  };
+
+  const currentLanguage = languages.find(lang => lang.key === language) || languages[0];
+  const languageMenuItems: MenuProps['items'] = languages.map(lang => ({ key: lang.key, label: <div className="flex items-center space-x-2"><span>{lang.flag}</span><span>{lang.label}</span></div>, onClick: () => handleLanguageChange(lang.key) }));
+
   return (
-    <Form
-      form={form}
-      className="invite-members-form"
-      style={{
-        minHeight: '300px',
-        width: '600px',
-        paddingBottom: '1rem',
-        marginBottom: '3rem',
-        marginTop: '3rem',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <Form.Item>
-        <Title level={2} style={{ marginBottom: '1rem' }}>
-          {t('step3Title')} "<mark>{organizationName}</mark>".
+    <div className="w-full members-step">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('membersStepTitle')}
         </Title>
-      </Form.Item>
-      <Form.Item
-        layout="vertical"
-        rules={[{ required: true }]}
-        label={
-          <span className="font-medium">
-            {t('step3InputLabel')}&nbsp; <MailOutlined /> {t('maxMembers')}
-          </span>
-        }
-      >
-        <List
-          dataSource={teamMembers}
-          bordered={false}
-          itemLayout="vertical"
-          renderItem={(teamMember, index) => (
-            <List.Item key={teamMember.id}>
-              <div className="invite-members-form" style={{ display: 'flex', width: '600px' }}>
-                <Form.Item
-                  rules={formRules.email as Rule[]}
-                  className="w-full"
-                  validateTrigger={['onChange', 'onBlur']}
-                  name={`email-${teamMember.id}`}
-                >
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('membersStepDescription', { organizationName })}
+        </Paragraph>
+      </div>
+
+      {/* Team Members List */}
+      <div className="mb-6">
+        <div className="space-y-3">
+          {teamMembers.map((teamMember, index) => {
+            const emailStatus = getEmailStatus(teamMember.value, teamMember.id);
+            return (
+              <div 
+                key={teamMember.id}
+                className={`flex items-center space-x-3 p-3 rounded-lg border transition-all duration-200 ${
+                  focusedIndex === index ? 'border-2' : ''
+                }`}
+                style={{ 
+                  borderColor: focusedIndex === index ? token?.colorPrimary : 
+                               emailStatus === 'invalid' ? token?.colorError : token?.colorBorder,
+                  backgroundColor: token?.colorBgContainer 
+                }}
+              >
+                <Avatar 
+                  size={32}
+                  style={{ 
+                    backgroundColor: emailStatus === 'valid' ? token?.colorSuccess : 
+                                    emailStatus === 'invalid' ? token?.colorError : token?.colorBorderSecondary,
+                    color: '#fff'
+                  }}
+                  icon={
+                    emailStatus === 'valid' ? <CheckCircleOutlined /> :
+                    emailStatus === 'invalid' ? <ExclamationCircleOutlined /> :
+                    <UserOutlined />
+                  }
+                />
+                
+                <div className="flex-1">
                   <Input
-                    placeholder={t('emailPlaceholder')}
+                    placeholder={t('memberPlaceholder', { index: index + 1 })}
                     value={teamMember.value}
                     onChange={e => updateEmail(teamMember.id, e.target.value)}
-                    onPressEnter={handleKeyPress}
-                    ref={setInputRef(index)}
-                    status={teamMember.value && !validateEmail(teamMember.value) ? 'error' : ''}
-                    id={`member-${index}`}
+                    onKeyPress={e => handleKeyPress(e, index)}
+                    onFocus={() => setFocusedIndex(index)}
+                    onBlur={() => handleBlur(teamMember.id, teamMember.value)}
+                    ref={el => inputRefs.current[index] = el}
+                    className="border-0 shadow-none"
+                    style={{
+                      backgroundColor: 'transparent',
+                      color: token?.colorText
+                    }}
+                    prefix={<MailOutlined style={{ color: token?.colorTextTertiary }} />}
+                    status={emailStatus === 'invalid' ? 'error' : undefined}
+                    suffix={
+                      emailStatus === 'valid' ? (
+                        <CheckCircleOutlined style={{ color: token?.colorSuccess }} />
+                      ) : emailStatus === 'invalid' ? (
+                        <ExclamationCircleOutlined style={{ color: token?.colorError }} />
+                      ) : null
+                    }
                   />
-                </Form.Item>
-                <Button
-                  className="custom-close-button"
-                  style={{ marginLeft: '48px' }}
-                  type="text"
-                  icon={<CloseCircleOutlined />}
-                  disabled={teamMembers.length === 1}
-                  onClick={() => removeEmail(teamMember.id)}
-                />
+                  {emailStatus === 'invalid' && (
+                    <Text type="danger" className="text-xs mt-1 block">
+                      {t('invalidEmail')}
+                    </Text>
+                  )}
+                  {emailStatus === 'valid' && (
+                    <Text type="success" className="text-xs mt-1 block">
+                      {t('validEmailAddress')}
+                    </Text>
+                  )}
+                </div>
+
+                {teamMembers.length > 1 && (
+                  <Button
+                    type="text"
+                    size="small"
+                    icon={<CloseCircleOutlined />}
+                    onClick={() => removeEmail(teamMember.id)}
+                    style={{ color: token?.colorTextTertiary }}
+                  />
+                )}
               </div>
-            </List.Item>
-          )}
-        />
-        <Button
-          type="dashed"
-          icon={<PlusOutlined />}
-          onClick={addEmail}
-          style={{ marginTop: '16px' }}
-          disabled={teamMembers.length == 5}
-        >
-          {t('tasksStepAddAnother')}
-        </Button>
-        <div
+            );
+          })}
+        </div>
+
+        {/* Add Member Button */}
+        {teamMembers.length < 5 && (
+          <Button
+            type="dashed"
+            icon={<PlusOutlined />}
+            onClick={addEmail}
+            className="w-full mt-4 h-12 text-base"
+            style={{ 
+              borderColor: token?.colorBorder,
+              color: token?.colorTextSecondary 
+            }}
+          >
+            {t('addAnotherTeamMember', { current: teamMembers.length, max: 5 })}
+          </Button>
+        )}
+      </div>
+
+      {/* Skip Option */}
+      <div className="mb-6">
+        <Alert
+          message={t('canInviteLater')}
+          description={t('skipStepDescription')}
+          type="info"
+          showIcon
           style={{
-            marginTop: '24px',
-            display: 'flex',
-            justifyContent: 'space-between',
+            backgroundColor: token?.colorInfoBg,
+            borderColor: token?.colorInfoBorder
           }}
-        ></div>
-      </Form.Item>
-    </Form>
+        />
+      </div>
+    </div>
   );
 };
 
-export default MembersStep;
+export default MembersStep;

worklenz-frontend/src/components/account-setup/organization-step.tsx

@@ -1,31 +1,40 @@
-import React, { useEffect, useRef } from 'react';
-import { Form, Input, InputRef, Typography } from '@/shared/antd-imports';
+import React, { useEffect, useRef, useState } from 'react';
+import { Form, Input, InputRef, Typography, Card, Tooltip } from '@/shared/antd-imports';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { setOrganizationName } from '@/features/account-setup/account-setup.slice';
 import { RootState } from '@/app/store';
 import { sanitizeInput } from '@/utils/sanitizeInput';
-import './admin-center-common.css';
 
-const { Title } = Typography;
+const { Title, Paragraph, Text } = Typography;
 
 interface Props {
   onEnter: () => void;
   styles: any;
   organizationNamePlaceholder: string;
+  organizationNameInitialValue?: string;
+  isDarkMode: boolean;
+  token?: any;
 }
 
 export const OrganizationStep: React.FC<Props> = ({
   onEnter,
   styles,
   organizationNamePlaceholder,
+  organizationNameInitialValue,
+  isDarkMode,
+  token,
 }) => {
   const { t } = useTranslation('account-setup');
   const dispatch = useDispatch();
   const { organizationName } = useSelector((state: RootState) => state.accountSetupReducer);
   const inputRef = useRef<InputRef>(null);
 
+  // Autofill organization name if not already set
   useEffect(() => {
+    if (!organizationName && organizationNameInitialValue) {
+      dispatch(setOrganizationName(organizationNameInitialValue));
+    }
     setTimeout(() => inputRef.current?.focus(), 300);
   }, []);
 
@@ -40,25 +49,85 @@ export const OrganizationStep: React.FC<Props> = ({
   };
 
   return (
-    <Form className="step-form" style={styles.form}>
-      <Form.Item>
-        <Title level={2} style={{ marginBottom: '1rem' }}>
-          {t('organizationStepTitle')}
+    <div className="w-full organization-step">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('organizationStepWelcome')}
         </Title>
-      </Form.Item>
-      <Form.Item
-        layout="vertical"
-        rules={[{ required: true }]}
-        label={<span style={styles.label}>{t('organizationStepLabel')}</span>}
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('organizationStepDescription')}
+        </Paragraph>
+      </div>
+
+      {/* Main Form Card */}
+      <div className="mb-6">
+        <Card 
+          className="border-2 hover:shadow-md transition-all duration-200"
+          style={{ 
+            borderColor: token?.colorPrimary,
+            backgroundColor: token?.colorBgContainer 
+          }}
+        >
+          <Form.Item 
+            className="mb-4"
+            label={
+              <div className="flex items-center space-x-2">
+                <span className="font-medium text-base" style={{ color: token?.colorText }}>
+                  {t('organizationStepLabel')}
+                </span>
+                <Tooltip title={t('organizationStepTooltip')}>
+                  <span 
+                    className="text-sm cursor-help"
+                    style={{ color: token?.colorTextTertiary }}
+                  >
+                    ⓘ
+                  </span>
+                </Tooltip>
+              </div>
+            }
+          >
+            <Input
+              placeholder={organizationNamePlaceholder || t('organizationStepPlaceholder')}
+              value={organizationName}
+              onChange={handleOrgNameChange}
+              onPressEnter={onPressEnter}
+              ref={inputRef}
+              className="text-base"
+            />
+          </Form.Item>
+
+          {/* Character Count and Validation */}
+          <div className="flex justify-between items-center text-sm">
+            <Text type="secondary">
+              {organizationName.length}/50 {t('organizationStepCharacters')}
+            </Text>
+            {organizationName.length > 0 && (
+              <div className="flex items-center space-x-1">
+                {organizationName.length >= 2 ? (
+                  <span style={{ color: token?.colorSuccess }}>✓ {t('organizationStepGoodLength')}</span>
+                ) : (
+                  <span style={{ color: token?.colorWarning }}>⚠ {t('organizationStepTooShort')}</span>
+                )}
+              </div>
+            )}
+          </div>
+        </Card>
+      </div>
+
+      {/* Footer Note */}
+      <div 
+        className="text-center p-4 rounded-lg"
+        style={{ 
+          backgroundColor: token?.colorInfoBg,
+          borderColor: token?.colorInfoBorder,
+          border: '1px solid'
+        }}
       >
-        <Input
-          placeholder={organizationNamePlaceholder}
-          value={organizationName}
-          onChange={handleOrgNameChange}
-          onPressEnter={onPressEnter}
-          ref={inputRef}
-        />
-      </Form.Item>
-    </Form>
+        <Text type="secondary" className="text-sm">
+          🔒 {t('organizationStepPrivacyNote')}
+        </Text>
+      </div>
+    </div>
   );
-};
+};

worklenz-frontend/src/components/account-setup/project-step.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { Button, Drawer, Form, Input, InputRef, Select, Typography } from '@/shared/antd-imports';
+import { Button, Drawer, Form, Input, InputRef, Typography, Card, Row, Col, Tag, Tooltip, Spin, Alert } from '@/shared/antd-imports';
 import TemplateDrawer from '../common/template-drawer/template-drawer';
 
 import { RootState } from '@/app/store';
@@ -13,7 +13,7 @@ import { sanitizeInput } from '@/utils/sanitizeInput';
 import { projectTemplatesApiService } from '@/api/project-templates/project-templates.api.service';
 import logger from '@/utils/errorLogger';
 
-import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';
+import { IAccountSetupRequest, IWorklenzTemplate, IProjectTemplate } from '@/types/project-templates/project-templates.types';
 
 import { evt_account_setup_template_complete } from '@/shared/worklenz-analytics-events';
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
@@ -24,15 +24,43 @@ import { setUser } from '@/features/user/userSlice';
 import { setSession } from '@/utils/session-helper';
 import { IAuthorizeResponse } from '@/types/auth/login.types';
 
-const { Title } = Typography;
+const { Title, Paragraph, Text } = Typography;
 
 interface Props {
   onEnter: () => void;
   styles: any;
   isDarkMode: boolean;
+  token?: any;
 }
 
-export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = false }) => {
+// Default icon mapping for templates (fallback if no image_url)
+const getTemplateIcon = (name?: string) => {
+  if (!name) return '📁';
+  const lowercaseName = name.toLowerCase();
+  if (lowercaseName.includes('software') || lowercaseName.includes('development')) return '💻';
+  if (lowercaseName.includes('marketing') || lowercaseName.includes('campaign')) return '📢';
+  if (lowercaseName.includes('construction') || lowercaseName.includes('building')) return '🏗️';
+  if (lowercaseName.includes('startup') || lowercaseName.includes('launch')) return '🚀';
+  if (lowercaseName.includes('design') || lowercaseName.includes('creative')) return '🎨';
+  if (lowercaseName.includes('education') || lowercaseName.includes('learning')) return '📚';
+  if (lowercaseName.includes('event') || lowercaseName.includes('planning')) return '📅';
+  if (lowercaseName.includes('retail') || lowercaseName.includes('sales')) return '🛍️';
+  return '📁';
+};
+
+const getProjectSuggestions = (orgType?: string) => {
+  const suggestions: Record<string, string[]> = {
+    'freelancer': ['Client Website', 'Logo Design', 'Content Writing', 'App Development'],
+    'startup': ['MVP Development', 'Product Launch', 'Marketing Campaign', 'Investor Pitch'],
+    'small_medium_business': ['Q1 Sales Initiative', 'Website Redesign', 'Process Improvement', 'Team Training'],
+    'agency': ['Client Campaign', 'Brand Strategy', 'Website Project', 'Creative Brief'],
+    'enterprise': ['Digital Transformation', 'System Migration', 'Annual Planning', 'Department Initiative'],
+    'other': ['New Project', 'Team Initiative', 'Q1 Goals', 'Special Project']
+  };
+  return suggestions[orgType || 'other'] || suggestions['other'];
+};
+
+export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = false, token }) => {
   const { t } = useTranslation('account-setup');
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
@@ -42,13 +70,58 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
 
   useEffect(() => {
     setTimeout(() => inputRef.current?.focus(), 200);
+    fetchTemplates();
   }, []);
 
-  const { projectName, templateId, organizationName } = useSelector(
+  const fetchTemplates = async () => {
+    try {
+      setLoadingTemplates(true);
+      setTemplateError(null);
+      
+      // Fetch list of available templates
+      const templatesResponse = await projectTemplatesApiService.getWorklenzTemplates();
+      
+      if (templatesResponse.done && templatesResponse.body) {
+        // Fetch detailed information for first 4 templates for preview
+        const templateDetails = await Promise.all(
+          templatesResponse.body.slice(0, 4).map(async (template) => {
+            if (template.id) {
+              try {
+                const detailResponse = await projectTemplatesApiService.getByTemplateId(template.id);
+                return detailResponse.done ? detailResponse.body : null;
+              } catch (error) {
+                logger.error(`Failed to fetch template details for ${template.id}`, error);
+                return null;
+              }
+            }
+            return null;
+          })
+        );
+        
+        // Filter out null results and set templates
+        const validTemplates = templateDetails.filter((template): template is IProjectTemplate => template !== null);
+        setTemplates(validTemplates);
+      }
+    } catch (error) {
+      logger.error('Failed to fetch templates', error);
+      setTemplateError('Failed to load templates');
+    } finally {
+      setLoadingTemplates(false);
+    }
+  };
+
+
+  const { projectName, templateId, organizationName, surveyData } = useSelector(
     (state: RootState) => state.accountSetupReducer
   );
   const [open, setOpen] = useState(false);
   const [creatingFromTemplate, setCreatingFromTemplate] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] = useState<string | null>(templateId || null);
+  const [templates, setTemplates] = useState<IProjectTemplate[]>([]);
+  const [loadingTemplates, setLoadingTemplates] = useState(true);
+  const [templateError, setTemplateError] = useState<string | null>(null);
+
+  const projectSuggestions = getProjectSuggestions(surveyData.organization_type);
 
   const handleTemplateSelected = (templateId: string) => {
     if (!templateId) return;
@@ -74,8 +147,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
       if (res.done && res.body.id) {
         toggleTemplateSelector(false);
         trackMixpanelEvent(evt_account_setup_template_complete);
-        
-        // Refresh user session to update setup_completed status
         try {
           const authResponse = await dispatch(verifyAuthentication()).unwrap() as IAuthorizeResponse;
           if (authResponse?.authenticated && authResponse?.user) {
@@ -85,7 +156,6 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
         } catch (error) {
           logger.error('Failed to refresh user session after template setup completion', error);
         }
-        
         navigate(`/worklenz/projects/${res.body.id}?tab=tasks-list&pinned_tab=tasks-list`);
       }
     } catch (error) {
@@ -94,8 +164,7 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
   };
 
   const onPressEnter = () => {
-    if (!projectName.trim()) return;
-    onEnter();
+    if (projectName.trim()) onEnter();
   };
 
   const handleProjectNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -103,43 +172,205 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
     dispatch(setProjectName(sanitizedValue));
   };
 
+  const handleProjectNameFocus = () => {
+    if (templateId) {
+      dispatch(setTemplateId(null));
+      setSelectedTemplate(null);
+    }
+  };
+
+  const handleSuggestionClick = (suggestion: string) => {
+    dispatch(setProjectName(suggestion));
+    inputRef.current?.focus();
+  };
+
   return (
-    <div>
-      <Form className="step-form" style={styles.form}>
-        <Form.Item>
-          <Title level={2} style={{ marginBottom: '1rem' }}>
-            {t('projectStepTitle')}
-          </Title>
-        </Form.Item>
-        <Form.Item
-          layout="vertical"
-          rules={[{ required: true }]}
-          label={<span style={styles.label}>{t('projectStepLabel')}</span>}
-        >
-          <Input
-            placeholder={t('projectStepPlaceholder')}
-            value={projectName}
-            onChange={handleProjectNameChange}
-            onPressEnter={onPressEnter}
-            ref={inputRef}
-          />
-        </Form.Item>
-      </Form>
-      <div style={{ position: 'relative' }}>
-        <Title level={4} className={isDarkMode ? 'vert-text-dark' : 'vert-text'}>
-          {t('or')}
+    <div className="w-full project-step">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('projectStepHeader')}
         </Title>
-        <div className={isDarkMode ? 'vert-line-dark' : 'vert-line'} />
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('projectStepSubheader')}
+        </Paragraph>
       </div>
 
-      <div className="flex justify-center">
-        <Button onClick={() => toggleTemplateSelector(true)} type="primary">
-          {t('templateButton')}
-        </Button>
+      {/* Project Name Section */}
+      <div className="mb-8">
+        <Card 
+          className={`border-2 hover:shadow-md transition-all duration-200 ${
+            templateId ? 'opacity-50' : ''
+          }`}
+          style={{ 
+            borderColor: templateId ? token?.colorBorder : token?.colorPrimary,
+            backgroundColor: token?.colorBgContainer 
+          }}
+        >
+          <div className="mb-4">
+            <div className="flex items-center justify-between">
+              <Text strong className="text-lg" style={{ color: token?.colorText }}>
+                {t('startFromScratch')}
+              </Text>
+              {templateId && (
+                <Text type="secondary" className="text-sm">
+                  {t('templateSelected')}
+                </Text>
+              )}
+            </div>
+          </div>
+          
+          <Form.Item 
+            className="mb-4"
+            label={<span className="font-medium" style={{ color: token?.colorText }}>{t('projectStepLabel')}</span>}
+          >
+            <Input
+              size="large"
+              placeholder={projectSuggestions[0] || t('projectStepPlaceholder')}
+              value={projectName}
+              onChange={handleProjectNameChange}
+              onPressEnter={onPressEnter}
+              onFocus={handleProjectNameFocus}
+              ref={inputRef}
+              className="text-base"
+              style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorText }}
+            />
+          </Form.Item>
+
+          <div>
+            <Text type="secondary" className="text-sm">{t('quickSuggestions')}</Text>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {projectSuggestions.map((suggestion, index) => (
+                <button key={index} onClick={() => handleSuggestionClick(suggestion)} className="px-3 py-1 rounded-full text-sm border project-suggestion-button" style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorTextSecondary }}>
+                  {suggestion}
+                </button>
+              ))}
+            </div>
+          </div>
+        </Card>
       </div>
+
+      <div className="relative my-8">
+        <div className="absolute inset-0 flex items-center" style={{ color: token?.colorTextQuaternary }}>
+          <div className="w-full border-t" style={{ borderColor: token?.colorBorder }}></div>
+        </div>
+        <div className="relative flex justify-center">
+          <span className="px-4 text-sm font-medium" style={{ backgroundColor: token?.colorBgLayout, color: token?.colorTextSecondary }}>{t('orText')}</span>
+        </div>
+      </div>
+
+      <div>
+        <div className="text-center mb-6">
+          <Title level={4} className="mb-2" style={{ color: token?.colorText }}>{t('startWithTemplate')}</Title>
+          <Text type="secondary">
+            {t('templateHeadStart')}
+          </Text>
+        </div>
+
+        {/* Template Preview Cards */}
+        <div className="mb-6">
+          {loadingTemplates ? (
+            <div className="text-center py-12">
+              <Spin size="large" />
+              <div className="mt-4">
+                <Text type="secondary">Loading templates...</Text>
+              </div>
+            </div>
+          ) : templateError ? (
+            <Alert
+              message="Failed to load templates"
+              description={templateError}
+              type="error"
+              showIcon
+              action={
+                <Button size="small" onClick={fetchTemplates}>
+                  Retry
+                </Button>
+              }
+            />
+          ) : (
+            <Row gutter={[16, 16]}>
+              {templates.map((template) => (
+                <Col xs={24} sm={12} key={template.id}>
+                  <Card
+                    hoverable
+                    className={`h-full template-preview-card ${
+                      selectedTemplate === template.id ? 'selected border-2' : ''
+                    }`}
+                    style={{ 
+                      borderColor: selectedTemplate === template.id ? token?.colorPrimary : token?.colorBorder,
+                      backgroundColor: token?.colorBgContainer
+                    }}
+                    onClick={() => {
+                      setSelectedTemplate(template.id || null);
+                      dispatch(setTemplateId(template.id || ''));
+                    }}
+                  >
+                    <div className="flex items-start space-x-3">
+                      {template.image_url ? (
+                        <img 
+                          src={template.image_url} 
+                          alt={template.name} 
+                          className="w-12 h-12 object-cover rounded"
+                          onError={(e) => {
+                            // Fallback to icon if image fails to load
+                            e.currentTarget.style.display = 'none';
+                            if (e.currentTarget.nextSibling) {
+                              (e.currentTarget.nextSibling as HTMLElement).style.display = 'block';
+                            }
+                          }}
+                        />
+                      ) : null}
+                      <span 
+                        className="text-3xl" 
+                        style={{ display: template.image_url ? 'none' : 'block' }}
+                      >
+                        {getTemplateIcon(template.name)}
+                      </span>
+                      <div className="flex-1">
+                        <Text strong className="block mb-2" style={{ color: token?.colorText }}>
+                          {template.name || 'Untitled Template'}
+                        </Text>
+                        <div className="flex flex-wrap gap-1">
+                          {template.phases?.slice(0, 3).map((phase, index) => (
+                            <Tag key={index} color={phase.color_code || 'blue'} className="text-xs">
+                              {phase.name}
+                            </Tag>
+                          ))}
+                          {(template.phases?.length || 0) > 3 && (
+                            <Tag className="text-xs">+{(template.phases?.length || 0) - 3} more</Tag>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                </Col>
+              ))}
+            </Row>
+          )}
+        </div>
+
+        <div className="text-center">
+          <Button type="primary" size="large" icon={<span className="mr-2">🎨</span>} onClick={() => toggleTemplateSelector(true)} className="min-w-[200px]">{t('browseAllTemplates')}</Button>
+          <div className="mt-2">
+            <Text type="secondary" className="text-sm">{t('templatesAvailable')}</Text>
+          </div>
+        </div>
+      </div>
+
+      {/* Template Drawer */}
       {createPortal(
         <Drawer
-          title={t('templateDrawerTitle')}
+          title={
+            <div>
+              <Title level={4} style={{ marginBottom: 0 }}>
+                {t('templateDrawerTitle')}
+              </Title>
+              <Text type="secondary">
+                {t('chooseTemplate')}
+              </Text>
+            </div>
+          }
           width={1000}
           onClose={() => toggleTemplateSelector(false)}
           open={open}
@@ -152,11 +383,13 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
                 type="primary"
                 onClick={() => createFromTemplate()}
                 loading={creatingFromTemplate}
+                disabled={!templateId}
               >
-                {t('create')}
+{t('createProject')}
               </Button>
             </div>
           }
+          style={{ backgroundColor: token?.colorBgLayout }}
         >
           <TemplateDrawer
             showBothTabs={false}
@@ -169,4 +402,4 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
       )}
     </div>
   );
-};
+};

worklenz-frontend/src/components/account-setup/survey-step.tsx

@@ -0,0 +1,374 @@
+import React from 'react';
+import { Form, Input, Typography, Button, Progress, Space } from '@/shared/antd-imports';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { setSurveyData, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
+import { RootState } from '@/app/store';
+import { 
+  OrganizationType, 
+  UserRole, 
+  UseCase, 
+  HowHeardAbout,
+  IAccountSetupSurveyData 
+} from '@/types/account-setup/survey.types';
+
+const { Title, Paragraph } = Typography;
+const { TextArea } = Input;
+
+interface Props {
+  onEnter: () => void;
+  styles: any;
+  isDarkMode: boolean;
+  token?: any;
+  isModal?: boolean; // New prop to indicate if used in modal context
+}
+
+interface SurveyPageProps {
+  styles: any;
+  isDarkMode: boolean;
+  token?: any;
+  surveyData: IAccountSetupSurveyData;
+  handleSurveyDataChange: (field: keyof IAccountSetupSurveyData, value: any) => void;
+  handleUseCaseToggle?: (value: UseCase) => void;
+  isModal?: boolean;
+}
+
+// Page 1: About You
+const AboutYouPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange }) => {
+  const { t } = useTranslation('account-setup');
+  
+  const organizationTypeOptions: { value: OrganizationType; label: string; icon?: string }[] = [
+    { value: 'freelancer', label: t('organizationTypeFreelancer'), icon: '👤' },
+    { value: 'startup', label: t('organizationTypeStartup'), icon: '🚀' },
+    { value: 'small_medium_business', label: t('organizationTypeSmallMediumBusiness'), icon: '🏢' },
+    { value: 'agency', label: t('organizationTypeAgency'), icon: '🎯' },
+    { value: 'enterprise', label: t('organizationTypeEnterprise'), icon: '🏛️' },
+    { value: 'other', label: t('organizationTypeOther'), icon: '📋' },
+  ];
+
+  const userRoleOptions: { value: UserRole; label: string; icon?: string }[] = [
+    { value: 'founder_ceo', label: t('userRoleFounderCeo'), icon: '👔' },
+    { value: 'project_manager', label: t('userRoleProjectManager'), icon: '📊' },
+    { value: 'software_developer', label: t('userRoleSoftwareDeveloper'), icon: '💻' },
+    { value: 'designer', label: t('userRoleDesigner'), icon: '🎨' },
+    { value: 'operations', label: t('userRoleOperations'), icon: '⚙️' },
+    { value: 'other', label: t('userRoleOther'), icon: '✋' },
+  ];
+
+  return (
+    <div className="w-full">
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('aboutYouStepTitle')}
+        </Title>
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('aboutYouStepDescription')}
+        </Paragraph>
+      </div>
+
+      {/* Organization Type */}
+      <Form.Item className="mb-8">
+        <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
+          {t('orgTypeQuestion')}
+        </label>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
+          {organizationTypeOptions.map((option) => {
+            const isSelected = surveyData.organization_type === option.value;
+            return (
+              <button
+                key={option.value}
+                onClick={() => handleSurveyDataChange('organization_type', option.value)}
+                className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
+                style={{
+                  backgroundColor: isSelected ? undefined : token?.colorBgContainer,
+                  borderColor: isSelected ? undefined : token?.colorBorder,
+                }}
+              >
+                <div className="flex items-center space-x-2">
+                  <div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
+                    {isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
+                  </div>
+                  <span className="text-base">{option.icon}</span>
+                  <span 
+                    className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
+                    style={{ color: isSelected ? undefined : token?.colorText }}
+                  >
+                    {option.label}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </Form.Item>
+
+      {/* User Role */}
+      <Form.Item className="mb-4">
+        <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
+          {t('userRoleQuestion')}
+        </label>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
+          {userRoleOptions.map((option) => {
+            const isSelected = surveyData.user_role === option.value;
+            return (
+              <button
+                key={option.value}
+                onClick={() => handleSurveyDataChange('user_role', option.value)}
+                className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
+                style={{
+                  backgroundColor: isSelected ? undefined : token?.colorBgContainer,
+                  borderColor: isSelected ? undefined : token?.colorBorder,
+                }}
+              >
+                <div className="flex items-center space-x-2">
+                  <div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
+                    {isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
+                  </div>
+                  <span className="text-base">{option.icon}</span>
+                  <span 
+                    className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`}
+                    style={{ color: isSelected ? undefined : token?.colorText }}
+                  >
+                    {option.label}
+                  </span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </Form.Item>
+    </div>
+  );
+};
+
+// Page 2: Your Needs
+const YourNeedsPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange, handleUseCaseToggle }) => {
+  const { t } = useTranslation('account-setup');
+  
+  const useCaseOptions: { value: UseCase; label: string; description: string }[] = [
+    { value: 'task_management', label: t('mainUseCasesTaskManagement'), description: 'Organize and track tasks' },
+    { value: 'team_collaboration', label: t('mainUseCasesTeamCollaboration'), description: 'Work together seamlessly' },
+    { value: 'resource_planning', label: t('mainUseCasesResourcePlanning'), description: 'Manage time and resources' },
+    { value: 'client_communication', label: t('mainUseCasesClientCommunication'), description: 'Stay connected with clients' },
+    { value: 'time_tracking', label: t('mainUseCasesTimeTracking'), description: 'Monitor project hours' },
+    { value: 'other', label: t('mainUseCasesOther'), description: 'Something else' },
+  ];
+
+  const onUseCaseClick = (value: UseCase) => {
+    if (handleUseCaseToggle) {
+      handleUseCaseToggle(value);
+    } else {
+      const currentUseCases = surveyData.main_use_cases || [];
+      const isSelected = currentUseCases.includes(value);
+      const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
+      handleSurveyDataChange('main_use_cases', newUseCases);
+    }
+  };
+
+  return (
+    <div className="w-full">
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('yourNeedsStepTitle')}
+        </Title>
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('yourNeedsStepDescription')}
+        </Paragraph>
+      </div>
+
+      {/* Main Use Cases */}
+      <Form.Item className="mb-8">
+        <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
+          {t('yourNeedsQuestion')}
+        </label>
+        <div className="grid grid-cols-1 gap-1">
+          {useCaseOptions.map((option) => {
+            const isSelected = (surveyData.main_use_cases || []).includes(option.value);
+            return (
+              <button
+                key={option.value}
+                onClick={() => onUseCaseClick(option.value)}
+                className={`p-2 rounded border transition-all duration-200 text-left hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
+                style={{
+                  backgroundColor: isSelected ? undefined : token?.colorBgContainer,
+                  borderColor: isSelected ? undefined : token?.colorBorder,
+                }}
+              >
+                <div className="flex items-center space-x-2">
+                  <div className={`w-3 h-3 rounded border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
+                    {isSelected && (
+                      <svg width="10" height="10" fill="white" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                      </svg>
+                    )}
+                  </div>
+                  <div className="flex-1">
+                    <span className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} style={{ color: isSelected ? undefined : token?.colorText }}>{option.label}</span>
+                    <span className="text-xs ml-2" style={{ color: token?.colorTextSecondary }}>- {option.description}</span>
+                  </div>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+        {surveyData.main_use_cases && surveyData.main_use_cases.length > 0 && (
+          <p className="mt-3 text-sm" style={{ color: token?.colorTextSecondary }}>
+            {surveyData.main_use_cases.length} {t('selected')}
+          </p>
+        )}
+      </Form.Item>
+
+      {/* Previous Tools */}
+      <Form.Item className="mb-4">
+        <label className="block font-medium text-base mb-2" style={{ color: token?.colorText }}>
+          {t('previousToolsLabel')}
+        </label>
+        <TextArea
+          placeholder="e.g., Asana, Trello, Jira, Monday.com, etc."
+          value={surveyData.previous_tools || ''}
+          onChange={(e) => handleSurveyDataChange('previous_tools', e.target.value)}
+          autoSize={{ minRows: 3, maxRows: 5 }}
+          className="text-base"
+          style={{ backgroundColor: token?.colorBgContainer, borderColor: token?.colorBorder, color: token?.colorText }}
+        />
+      </Form.Item>
+    </div>
+  );
+};
+
+// Page 3: Discovery
+const DiscoveryPage: React.FC<SurveyPageProps> = ({ styles, token, surveyData, handleSurveyDataChange, isModal }) => {
+  const { t } = useTranslation('account-setup');
+  
+  const howHeardAboutOptions: { value: HowHeardAbout; label: string; icon: string }[] = [
+    { value: 'google_search', label: t('howHeardAboutGoogleSearch'), icon: '🔍' },
+    { value: 'twitter', label: t('howHeardAboutTwitter'), icon: '🐦' },
+    { value: 'linkedin', label: t('howHeardAboutLinkedin'), icon: '💼' },
+    { value: 'friend_colleague', label: t('howHeardAboutFriendColleague'), icon: '👥' },
+    { value: 'blog_article', label: t('howHeardAboutBlogArticle'), icon: '📰' },
+    { value: 'other', label: t('howHeardAboutOther'), icon: '💡' },
+  ];
+
+  return (
+    <div className="w-full">
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
+          {t('discoveryTitle')}
+        </Title>
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('discoveryDescription')}
+        </Paragraph>
+      </div>
+
+      {/* How Heard About */}
+      <Form.Item className="mb-8">
+        <label className="block font-medium text-base mb-4" style={{ color: token?.colorText }}>
+          {t('discoveryQuestion')}
+        </label>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-1">
+          {howHeardAboutOptions.map((option) => {
+            const isSelected = surveyData.how_heard_about === option.value;
+            return (
+              <button
+                key={option.value}
+                onClick={() => handleSurveyDataChange('how_heard_about', option.value)}
+                className={`p-2 rounded border transition-all duration-200 hover:shadow-sm ${isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`}
+                style={{
+                  backgroundColor: isSelected ? undefined : token?.colorBgContainer,
+                  borderColor: isSelected ? undefined : token?.colorBorder,
+                }}
+              >
+                <div className="flex items-center space-x-2">
+                  <div className={`w-3 h-3 rounded-full border flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500' : 'border-gray-300 dark:border-gray-600'}`}>
+                    {isSelected && <div className="w-1.5 h-1.5 bg-white rounded-full"></div>}
+                  </div>
+                  <span className="text-base">{option.icon}</span>
+                  <span className={`font-medium text-xs ${isSelected ? 'text-blue-600 dark:text-blue-400' : ''}`} style={{ color: isSelected ? undefined : token?.colorText }}>{option.label}</span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </Form.Item>
+
+      <div className="mt-12 p-1.5 rounded-lg text-center" style={{ backgroundColor: token?.colorSuccessBg, borderColor: token?.colorSuccessBorder, border: '1px solid' }}>
+        <div className="text-4xl mb-3">🎉</div>
+        <Title level={4} style={{ color: token?.colorText, marginBottom: 8 }}>
+          {isModal ? t('surveyCompleteTitle') : t('allSetTitle')}
+        </Title>
+        <Paragraph style={{ color: token?.colorTextSecondary, marginBottom: 0 }}>
+          {isModal ? t('surveyCompleteDescription') : t('allSetDescription')}
+        </Paragraph>
+      </div>
+    </div>
+  );
+};
+
+export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token, isModal = false }) => {
+  const { t } = useTranslation('account-setup');
+  const dispatch = useDispatch();
+  const { surveyData, surveySubStep } = useSelector((state: RootState) => state.accountSetupReducer);
+
+  const handleSurveyDataChange = (field: keyof IAccountSetupSurveyData, value: any) => {
+    dispatch(setSurveyData({ [field]: value }));
+  };
+
+  React.useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        const isValid = (surveySubStep === 0 && surveyData.organization_type && surveyData.user_role) || (surveySubStep === 1 && surveyData.main_use_cases && surveyData.main_use_cases.length > 0) || (surveySubStep === 2 && surveyData.how_heard_about);
+        if (isValid && surveySubStep < 2) {
+          dispatch(setSurveySubStep(surveySubStep + 1));
+        } else if (isValid && surveySubStep === 2) {
+          onEnter();
+        }
+      }
+    };
+    window.addEventListener('keypress', handleKeyPress);
+    return () => window.removeEventListener('keypress', handleKeyPress);
+  }, [surveySubStep, surveyData, dispatch, onEnter]);
+
+  const handleUseCaseToggle = (value: UseCase) => {
+    const currentUseCases = surveyData.main_use_cases || [];
+    const isSelected = currentUseCases.includes(value);
+    const newUseCases = isSelected ? currentUseCases.filter(useCase => useCase !== value) : [...currentUseCases, value];
+    handleSurveyDataChange('main_use_cases', newUseCases);
+  };
+
+  const getSubStepTitle = () => {
+    switch (surveySubStep) {
+      case 0: return t('aboutYouStepName');
+      case 1: return t('yourNeedsStepName');
+      case 2: return t('discoveryStepName');
+      default: return '';
+    }
+  };
+
+  const surveyPages = [
+    <AboutYouPage key="about-you" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} isModal={isModal} />,
+    <YourNeedsPage key="your-needs" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} handleUseCaseToggle={handleUseCaseToggle} isModal={isModal} />,
+    <DiscoveryPage key="discovery" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} isModal={isModal} />
+  ];
+
+  React.useEffect(() => {
+    dispatch(setSurveySubStep(0));
+  }, []);
+
+  return (
+    <div className="w-full">
+      {/* Progress Indicator */}
+      <div className="mb-8">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm font-medium" style={{ color: token?.colorTextSecondary }}>Step {surveySubStep + 1} of 3: {getSubStepTitle()}</span>
+          <span className="text-sm" style={{ color: token?.colorTextSecondary }}>{Math.round(((surveySubStep + 1) / 3) * 100)}%</span>
+        </div>
+        <Progress percent={Math.round(((surveySubStep + 1) / 3) * 100)} showInfo={false} strokeColor={token?.colorPrimary} className="mb-0" />
+      </div>
+
+      {/* Current Page Content */}
+      <div className="min-h-[400px] flex flex-col survey-page-transition" key={surveySubStep}>
+        {surveyPages[surveySubStep]}
+      </div>
+    </div>
+  );
+};

worklenz-frontend/src/components/account-setup/tasks-step.tsx

@@ -1,134 +1,130 @@
-import React, { useEffect, useRef } from 'react';
-import { Form, Input, Button, Typography, List, InputRef } from '@/shared/antd-imports';
-import { PlusOutlined, DeleteOutlined, CloseCircleOutlined } from '@/shared/antd-imports';
+import React, { useEffect, useRef, useState } from 'react';
+import { Input, Button, Typography, Card } from '@/shared/antd-imports';
+import { PlusOutlined, DeleteOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@/shared/antd-imports';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { RootState } from '@/app/store';
 import { setTasks } from '@/features/account-setup/account-setup.slice';
 import { sanitizeInput } from '@/utils/sanitizeInput';
 
-const { Title } = Typography;
+const { Title, Paragraph, Text } = Typography;
 
 interface Props {
   onEnter: () => void;
   styles: any;
   isDarkMode: boolean;
+  token?: any;
 }
 
-export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode }) => {
+
+export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token }) => {
   const { t } = useTranslation('account-setup');
   const dispatch = useDispatch();
-  const { tasks, projectName } = useSelector((state: RootState) => state.accountSetupReducer);
-  const inputRefs = useRef<(InputRef | null)[]>([]);
+  const { tasks, projectName, surveyData } = useSelector((state: RootState) => state.accountSetupReducer);
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
 
   const addTask = () => {
-    if (tasks.length == 5) return;
-
+    if (tasks.length >= 5) return;
     const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 0;
     dispatch(setTasks([...tasks, { id: newId, value: '' }]));
-    setTimeout(() => {
-      inputRefs.current[newId]?.focus();
-    }, 0);
+    setTimeout(() => inputRefs.current[tasks.length]?.focus(), 100);
   };
 
   const removeTask = (id: number) => {
-    if (tasks.length > 1) {
-      dispatch(setTasks(tasks.filter(task => task.id !== id)));
-    }
+    if (tasks.length > 1) dispatch(setTasks(tasks.filter(task => task.id !== id)));
   };
 
   const updateTask = (id: number, value: string) => {
     const sanitizedValue = sanitizeInput(value);
-    dispatch(
-      setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task)))
-    );
+    dispatch(setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task))));
   };
 
-  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    const input = e.currentTarget as HTMLInputElement;
-    if (!input.value.trim()) return;
-    e.preventDefault();
-    addTask();
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+    if (e.key === 'Enter') {
+      const input = e.currentTarget as HTMLInputElement;
+      if (input.value.trim()) {
+        e.preventDefault();
+        if (index === tasks.length - 1 && tasks.length < 5) addTask();
+        else if (index < tasks.length - 1) inputRefs.current[index + 1]?.focus();
+      }
+    }
+  };
+
+  const handleSuggestionClick = (suggestion: string) => {
+    const emptyTaskIndex = tasks.findIndex(task => !task.value.trim());
+    if (emptyTaskIndex !== -1) {
+      updateTask(tasks[emptyTaskIndex].id, suggestion);
+    } else if (tasks.length < 5) {
+      const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 0;
+      dispatch(setTasks([...tasks, { id: newId, value: suggestion }]));
+    }
+    setShowSuggestions(false);
   };
 
   useEffect(() => {
     setTimeout(() => inputRefs.current[0]?.focus(), 200);
   }, []);
 
-  // Function to set ref that doesn't return anything (void)
-  const setInputRef = (index: number) => (el: InputRef | null) => {
-    inputRefs.current[index] = el;
-  };
 
   return (
-    <Form
-      className="create-first-task-form"
-      style={{
-        minHeight: '300px',
-        width: '600px',
-        paddingBottom: '1rem',
-        marginBottom: '3rem',
-        marginTop: '3rem',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-    >
-      <Form.Item>
-        <Title level={2} style={{ marginBottom: '1rem' }}>
+    <div className="w-full tasks-step">
+      {/* Header */}
+      <div className="text-center mb-8">
+        <Title level={3} className="mb-2" style={{ color: token?.colorText }}>
           {t('tasksStepTitle')}
         </Title>
-      </Form.Item>
-      <Form.Item
-        layout="vertical"
-        rules={[{ required: true }]}
-        label={
-          <span className="font-medium">
-            {t('tasksStepLabel')} "<mark>{projectName}</mark>". {t('maxTasks')}
-          </span>
-        }
-      >
-        <List
-          dataSource={tasks}
-          bordered={false}
-          renderItem={(task, index) => (
-            <List.Item key={task.id}>
-              <div style={{ display: 'flex', width: '600px' }}>
-                <Input
-                  placeholder="Your Task"
-                  value={task.value}
-                  onChange={e => updateTask(task.id, e.target.value)}
-                  onPressEnter={handleKeyPress}
-                  ref={setInputRef(index)}
-                />
-                <Button
-                  className="custom-close-button"
-                  style={{ marginLeft: '48px' }}
-                  type="text"
-                  icon={<CloseCircleOutlined />}
-                  disabled={tasks.length === 1}
-                  onClick={() => removeTask(task.id)}
-                />
+        <Paragraph className="text-base" style={{ color: token?.colorTextSecondary }}>
+          {t('tasksStepDescription', { projectName })}
+        </Paragraph>
+      </div>
+
+
+      {/* Tasks List */}
+      <div className="mb-6">
+        <div className="space-y-4">
+          {tasks.map((task, index) => (
+            <Card 
+              key={task.id}
+              className={`task-item-card transition-all duration-200 ${
+                focusedIndex === index ? 'border-2' : ''
+              }`}
+              style={{ 
+                borderColor: focusedIndex === index ? token?.colorPrimary : token?.colorBorder,
+                backgroundColor: token?.colorBgContainer 
+              }}
+            >
+              <div className="flex items-center space-x-3">
+                <div className="flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium" style={{ backgroundColor: task.value.trim() ? token?.colorSuccess : token?.colorBorderSecondary, color: task.value.trim() ? '#fff' : token?.colorTextSecondary }}>
+                  {task.value.trim() ? <CheckCircleOutlined /> : index + 1}
+                </div>
+                
+                <div className="flex-1">
+                  <Input
+                    placeholder={t('taskPlaceholder', { index: index + 1 })}
+                    value={task.value}
+                    onChange={e => updateTask(task.id, e.target.value)}
+                    onKeyPress={e => handleKeyPress(e, index)}
+                    onFocus={() => setFocusedIndex(index)}
+                    onBlur={() => setFocusedIndex(null)}
+                    ref={(el) => { inputRefs.current[index] = el as any; }}
+                    className="text-base border-0 shadow-none task-input"
+                    style={{ backgroundColor: 'transparent', color: token?.colorText }}
+                  />
+                </div>
+
+                {tasks.length > 1 && <Button type="text" icon={<CloseCircleOutlined />} onClick={() => removeTask(task.id)} className="text-gray-400 hover:text-red-500" style={{ color: token?.colorTextTertiary }} />}
               </div>
-            </List.Item>
-          )}
-        />
-        <Button
-          type="dashed"
-          icon={<PlusOutlined />}
-          onClick={addTask}
-          disabled={tasks.length == 5}
-          style={{ marginTop: '16px' }}
-        >
-          {t('tasksStepAddAnother')}
-        </Button>
-        <div
-          style={{
-            marginTop: '24px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        ></div>
-      </Form.Item>
-    </Form>
+            </Card>
+          ))}
+        </div>
+
+        {tasks.length < 5 && (
+          <Button type="dashed" icon={<PlusOutlined />} onClick={addTask} className="w-full mt-4 h-12 text-base" style={{ borderColor: token?.colorBorder, color: token?.colorTextSecondary }}>{t('addAnotherTask', { current: tasks.length, max: 5 })}</Button>
+        )}
+      </div>
+
+    </div>
   );
-};
+};

worklenz-frontend/src/components/common/template-drawer/template-drawer.tsx

@@ -10,6 +10,7 @@ import {
   Image,
   Input,
   Flex,
+  theme,
 } from '@/shared/antd-imports';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -37,13 +38,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   showBothTabs = false,
   templateSelected = (templateId: string) => {
     if (!templateId) return;
-    templateId;
   },
   selectedTemplateType = (type: 'worklenz' | 'custom') => {
-    type;
   },
 }) => {
   const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
+  const { token } = theme.useToken();
   const { t } = useTranslation('template-drawer');
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -149,7 +149,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={phase.name}
                   color={phase.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: phase.color_code ? undefined : token.colorBgContainer,
+                    borderColor: phase.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {phase.name}
                 </Tag>
@@ -171,7 +176,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={status.name}
                   color={status.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: status.color_code ? undefined : token.colorBgContainer,
+                    borderColor: status.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {status.name}
                 </Tag>
@@ -193,7 +203,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={priority.name}
                   color={priority.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: priority.color_code ? undefined : token.colorBgContainer,
+                    borderColor: priority.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {priority.name}
                 </Tag>
@@ -215,7 +230,12 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                 <Tag
                   key={label.name}
                   color={label.color_code}
-                  style={{ color: 'black', marginBottom: '8px' }}
+                  style={{ 
+                    color: token.colorText, 
+                    marginBottom: '8px',
+                    backgroundColor: label.color_code ? undefined : token.colorBgContainer,
+                    borderColor: label.color_code ? undefined : token.colorBorder
+                  }}
                 >
                   {label.name}
                 </Tag>
@@ -251,14 +271,24 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   };
 
   const menuContent = (
-    <div style={{ display: 'flex' }}>
+    <div style={{ display: 'flex', backgroundColor: token.colorBgContainer }}>
       {/* Menu Area */}
-      <div style={{ minWidth: '250px', overflowY: 'auto', height: '100%' }}>
+      <div style={{ 
+        minWidth: '250px', 
+        overflowY: 'auto', 
+        height: '100%',
+        backgroundColor: token.colorBgContainer,
+        borderRight: `1px solid ${token.colorBorder}`
+      }}>
         <Skeleton loading={loadingTemplates} active>
           <Menu
             className="template-menu"
             onClick={({ key }) => handleMenuClick(key)}
-            style={{ width: 256 }}
+            style={{ 
+              width: 256,
+              backgroundColor: token.colorBgContainer,
+              borderColor: token.colorBorder
+            }}
             defaultSelectedKeys={[templates[0]?.id || '']}
             mode="inline"
             items={menuItems}
@@ -272,9 +302,11 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
           flex: 1,
           maxHeight: 'calc(100vh - 200px)',
           padding: '16px',
+          backgroundColor: token.colorBgContainer,
+          color: token.colorText
         }}
       >
-        <Title level={4}>Details</Title>
+        <Title level={4} style={{ color: token.colorText }}>Details</Title>
         <Skeleton loading={loadingSelectedTemplate} active>
           {selectedTemplate?.image_url && (
             <Image preview={false} src={selectedTemplate.image_url} alt={selectedTemplate.name} />
@@ -297,12 +329,17 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   };
 
   const customTemplatesContent = (
-    <div>
+    <div style={{ backgroundColor: token.colorBgContainer, padding: '16px' }}>
       <Flex justify="space-between" align="center">
         <Input
           placeholder={t('searchTemplates')}
-          suffix={<SearchOutlined />}
-          style={{ maxWidth: '300px' }}
+          suffix={<SearchOutlined style={{ color: token.colorTextTertiary }} />}
+          style={{ 
+            maxWidth: '300px',
+            backgroundColor: token.colorBgContainer,
+            borderColor: token.colorBorder,
+            color: token.colorText
+          }}
           onChange={e => setSearchQuery(e.target.value)}
         />
       </Flex>
@@ -312,10 +349,20 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
         bordered
         dataSource={filteredCustomTemplates}
         loading={loadingCustomTemplates}
+        style={{
+          backgroundColor: token.colorBgContainer,
+          borderColor: token.colorBorder
+        }}
         renderItem={item => (
           <List.Item
             key={item.id}
             onClick={() => handleCustomTemplateClick(item.id || '')}
+            style={{
+              backgroundColor: item.selected ? token.colorPrimaryBg : token.colorBgContainer,
+              borderColor: item.selected ? token.colorPrimary : token.colorBorder,
+              color: token.colorText,
+              cursor: 'pointer'
+            }}
             className={
               item.selected && themeMode === 'dark'
                 ? 'selected-custom-template-dark'
@@ -324,7 +371,7 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
                   : ''
             }
           >
-            {item.name}
+            <span style={{ color: token.colorText }}>{item.name}</span>
           </List.Item>
         )}
       />
@@ -355,18 +402,31 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
   };
 
   return (
-    <div style={{ height: '100vh', overflow: 'hidden' }}>
+    <div style={{ 
+      height: '100vh', 
+      overflow: 'hidden',
+      backgroundColor: token.colorBgLayout 
+    }}>
       <div
         style={{
           position: 'sticky',
           top: 0,
           zIndex: 100,
-          backgroundColor: themeMode === 'dark' ? '' : '#fff',
+          backgroundColor: token.colorBgContainer,
           overflow: 'hidden',
+          borderBottom: `1px solid ${token.colorBorder}`
         }}
       >
         {showBothTabs ? (
-          <Tabs type="card" items={tabs} onChange={handleTabChange} destroyInactiveTabPane />
+          <Tabs 
+            type="card" 
+            items={tabs} 
+            onChange={handleTabChange} 
+            destroyInactiveTabPane
+            style={{
+              backgroundColor: token.colorBgContainer
+            }}
+          />
         ) : (
           menuContent
         )}

worklenz-frontend/src/components/survey/SurveyPromptModal.tsx

@@ -0,0 +1,264 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Modal, Button, Result, Spin, Flex } from '@/shared/antd-imports';
+import { SurveyStep } from '@/components/account-setup/survey-step';
+import { useSurveyStatus } from '@/hooks/useSurveyStatus';
+import { useTranslation } from 'react-i18next';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { surveyApiService } from '@/api/survey/survey.api.service';
+import { appMessage } from '@/shared/antd-imports';
+import { ISurveySubmissionRequest } from '@/types/account-setup/survey.types';
+import logger from '@/utils/errorLogger';
+import { resetSurveyData, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
+
+interface SurveyPromptModalProps {
+  forceShow?: boolean;
+  onClose?: () => void;
+}
+
+export const SurveyPromptModal: React.FC<SurveyPromptModalProps> = ({ forceShow = false, onClose }) => {
+  const { t } = useTranslation('survey');
+  const dispatch = useAppDispatch();
+  const [visible, setVisible] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [surveyCompleted, setSurveyCompleted] = useState(false);
+  const [surveyInfo, setSurveyInfo] = useState<{ id: string; questions: any[] } | null>(null);
+  const { hasCompletedSurvey, loading, refetch } = useSurveyStatus();
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const surveyData = useAppSelector(state => state.accountSetupReducer.surveyData);
+  const surveySubStep = useAppSelector(state => state.accountSetupReducer.surveySubStep);
+  const isDarkMode = themeMode === 'dark';
+
+  useEffect(() => {
+    // Check if survey was skipped recently (within 7 days)
+    const skippedAt = localStorage.getItem('survey_skipped_at');
+    if (!forceShow && skippedAt) {
+      const skippedDate = new Date(skippedAt);
+      const now = new Date();
+      const diffDays = (now.getTime() - skippedDate.getTime()) / (1000 * 60 * 60 * 24);
+      if (diffDays < 3) {
+        return; // Don't show modal if skipped within 7 days
+      }
+    }
+
+    if (forceShow) {
+      setVisible(true);
+      dispatch(resetSurveyData());
+      dispatch(setSurveySubStep(0));
+      // Fetch survey info
+      const fetchSurvey = async () => {
+        try {
+          const response = await surveyApiService.getAccountSetupSurvey();
+          if (response.done && response.body) {
+            setSurveyInfo({
+              id: response.body.id,
+              questions: response.body.questions || []
+            });
+          }
+        } catch (error) {
+          logger.error(t('survey:fetchErrorLog'), error);
+        }
+      };
+      fetchSurvey();
+    } else if (!loading && hasCompletedSurvey === false) {
+      dispatch(resetSurveyData());
+      dispatch(setSurveySubStep(0));
+      // Fetch survey info
+      const fetchSurvey = async () => {
+        try {
+          const response = await surveyApiService.getAccountSetupSurvey();
+          if (response.done && response.body) {
+            setSurveyInfo({
+              id: response.body.id,
+              questions: response.body.questions || []
+            });
+          }
+        } catch (error) {
+          logger.error(t('survey:fetchErrorLog'), error);
+        }
+      };
+      fetchSurvey();
+      // Show modal after a 5 second delay to not interrupt user immediately
+      const timer = setTimeout(() => {
+        setVisible(true);
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [loading, hasCompletedSurvey, dispatch, forceShow, t]);
+
+  const handleComplete = async () => {
+    try {
+      setSubmitting(true);
+      
+      if (!surveyData || !surveyInfo) {
+        throw new Error('Survey data not found');
+      }
+
+      // Create a map of question keys to IDs
+      const questionMap = surveyInfo.questions.reduce((acc, q) => {
+        acc[q.question_key] = q.id;
+        return acc;
+      }, {} as Record<string, string>);
+
+      // Prepare submission data with actual question IDs - only include answered questions
+      const answers: any[] = [];
+      
+      if (surveyData.organization_type && questionMap['organization_type']) {
+        answers.push({
+          question_id: questionMap['organization_type'],
+          answer_text: surveyData.organization_type
+        });
+      }
+      
+      if (surveyData.user_role && questionMap['user_role']) {
+        answers.push({
+          question_id: questionMap['user_role'],
+          answer_text: surveyData.user_role
+        });
+      }
+      
+      if (surveyData.main_use_cases && surveyData.main_use_cases.length > 0 && questionMap['main_use_cases']) {
+        answers.push({
+          question_id: questionMap['main_use_cases'],
+          answer_json: surveyData.main_use_cases
+        });
+      }
+      
+      if (surveyData.previous_tools && questionMap['previous_tools']) {
+        answers.push({
+          question_id: questionMap['previous_tools'],
+          answer_text: surveyData.previous_tools
+        });
+      }
+      
+      if (surveyData.how_heard_about && questionMap['how_heard_about']) {
+        answers.push({
+          question_id: questionMap['how_heard_about'],
+          answer_text: surveyData.how_heard_about
+        });
+      }
+
+      const submissionData: ISurveySubmissionRequest = {
+        survey_id: surveyInfo.id,
+        answers
+      };
+
+      const response = await surveyApiService.submitSurveyResponse(submissionData);
+      
+      if (response.done) {
+        setSurveyCompleted(true);
+        appMessage.success(t('survey:submitSuccessMessage'));
+        
+        // Wait a moment before closing
+        setTimeout(() => {
+          setVisible(false);
+          refetch(); // Update the survey status
+        }, 2000);
+      } else {
+        throw new Error(response.message || t('survey:submitErrorMessage'));
+      }
+    } catch (error) {
+      logger.error(t('survey:submitErrorLog'), error);
+      appMessage.error(t('survey:submitErrorMessage'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleSkip = () => {
+    setVisible(false);
+    // Optionally, you can set a flag in localStorage to not show again for some time
+    localStorage.setItem('survey_skipped_at', new Date().toISOString());
+    onClose?.();
+  };
+
+  const isCurrentStepValid = () => {
+    switch (surveySubStep) {
+      case 0:
+        return surveyData.organization_type && surveyData.user_role;
+      case 1:
+        return surveyData.main_use_cases && surveyData.main_use_cases.length > 0;
+      case 2:
+        return surveyData.how_heard_about;
+      default:
+        return false;
+    }
+  };
+
+  const handleNext = () => {
+    if (surveySubStep < 2) {
+      dispatch(setSurveySubStep(surveySubStep + 1));
+    } else {
+      handleComplete();
+    }
+  };
+
+  const handlePrevious = () => {
+    if (surveySubStep > 0) {
+      dispatch(setSurveySubStep(surveySubStep - 1));
+    }
+  };
+
+  if (loading) {
+    return null;
+  }
+
+  return (
+    <Modal
+      open={visible}
+      title={surveyCompleted ? null : t('survey:modalTitle')}
+      onCancel={handleSkip}
+      footer={
+        surveyCompleted ? null : (
+          <Flex justify="space-between" align="center">
+            <div>
+              <Button onClick={handleSkip}>
+                {t('survey:skip')}
+              </Button>
+            </div>
+            <Flex gap={8}>
+              {surveySubStep > 0 && (
+                <Button onClick={handlePrevious}>
+                  {t('survey:previous')}
+                </Button>
+              )}
+              <Button 
+                type="primary" 
+                onClick={handleNext}
+                disabled={!isCurrentStepValid()}
+                loading={submitting && surveySubStep === 2}
+              >
+                {surveySubStep === 2 ? t('survey:completeSurvey') : t('survey:next')}
+              </Button>
+            </Flex>
+          </Flex>
+        )
+      }
+      width={800}
+      maskClosable={false}
+      centered
+    >
+      {submitting ? (
+        <div style={{ textAlign: 'center', padding: '40px' }}>
+          <Spin size="large" />
+          <p style={{ marginTop: 16 }}>{t('survey:submitting')}</p>
+        </div>
+      ) : surveyCompleted ? (
+        <Result
+          status="success"
+          title={t('survey:submitSuccessTitle')}
+          subTitle={t('survey:submitSuccessSubtitle')}
+        />
+      ) : (
+        <div style={{ maxHeight: '70vh', overflowY: 'auto' }}>
+          <SurveyStep 
+            onEnter={() => {}} // Empty function since we handle navigation via buttons
+            styles={{}}
+            isDarkMode={isDarkMode}
+            isModal={true} // Pass true to indicate modal context
+          />
+        </div>
+      )}
+    </Modal>
+  );
+};

worklenz-frontend/src/components/survey/SurveySettingsCard.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { Card, Button, Result, Alert } from '@/shared/antd-imports';
+import { CheckCircleOutlined, FormOutlined } from '@/shared/antd-imports';
+import { useSurveyStatus } from '@/hooks/useSurveyStatus';
+import { SurveyPromptModal } from './SurveyPromptModal';
+import { useTranslation } from 'react-i18next';
+
+export const SurveySettingsCard: React.FC = () => {
+  const { t } = useTranslation('settings');
+  const [showModal, setShowModal] = useState(false);
+  const { hasCompletedSurvey, loading } = useSurveyStatus();
+
+  if (loading) {
+    return (
+      <Card loading={true} />
+    );
+  }
+
+  return (
+    <>
+      <Card
+        title={
+          <span>
+            <FormOutlined style={{ marginRight: 8 }} />
+            Personalization Survey
+          </span>
+        }
+        extra={
+          hasCompletedSurvey && (
+            <Button type="link" onClick={() => setShowModal(true)}>
+              Update Responses
+            </Button>
+          )
+        }
+      >
+        {hasCompletedSurvey ? (
+          <Result
+            icon={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
+            title="Survey Completed"
+            subTitle="Thank you for completing the personalization survey. Your responses help us improve Worklenz."
+            extra={
+              <Button onClick={() => setShowModal(true)}>
+                Update Your Responses
+              </Button>
+            }
+          />
+        ) : (
+          <>
+            <Alert
+              message="Help us personalize your experience"
+              description="Take a quick survey to tell us about your organization and how you use Worklenz."
+              type="info"
+              showIcon
+              style={{ marginBottom: 16 }}
+            />
+            <div style={{ textAlign: 'center' }}>
+              <Button type="primary" size="large" onClick={() => setShowModal(true)}>
+                Take Survey Now
+              </Button>
+            </div>
+          </>
+        )}
+      </Card>
+
+      {showModal && (
+        <SurveyPromptModal 
+          forceShow={true} 
+          onClose={() => setShowModal(false)} 
+        />
+      )}
+    </>
+  );
+};

worklenz-frontend/src/components/survey/index.ts

@@ -0,0 +1,2 @@
+export { SurveyPromptModal } from './SurveyPromptModal';
+export { SurveySettingsCard } from './SurveySettingsCard';

worklenz-frontend/src/components/task-drawer/shared/time-log/time-log-item.tsx

@@ -3,7 +3,7 @@ import { Button, Divider, Flex, Popconfirm, Typography, Space } from '@/shared/a
 import { colors } from '@/styles/colors';
 import { ITaskLogViewModel } from '@/types/tasks/task-log-view.types';
 import SingleAvatar from '@/components/common/single-avatar/single-avatar';
-import { formatDateTimeWithLocale } from '@/utils/format-date-time-with-locale';
+import { formatDateTimeWithUserTimezone } from '@/utils/format-date-time-with-user-timezone';
 import { calculateTimeGap } from '@/utils/calculate-time-gap';
 import './time-log-item.css';
 import { taskTimeLogsApiService } from '@/api/tasks/task-time-logs.api.service';
@@ -101,7 +101,7 @@ const TimeLogItem = ({ log, onDelete }: TimeLogItemProps) => {
                   {renderLoggedByTimer()} {calculateTimeGap(created_at || '')}
                 </Typography.Text>
                 <Typography.Text type="secondary" style={{ fontSize: 12 }}>
-                  {formatDateTimeWithLocale(created_at || '')}
+                  {formatDateTimeWithUserTimezone(created_at || '', currentSession?.timezone_name)}
                 </Typography.Text>
               </Flex>
               {renderActionButtons()}

worklenz-frontend/src/components/task-list-v2/components/TaskRowColumns.tsx

@@ -364,7 +364,7 @@ interface ReporterColumnProps {
 export const ReporterColumn: React.FC<ReporterColumnProps> = memo(({ width, reporter }) => (
   <div className="flex items-center justify-center px-2 border-r border-gray-200 dark:border-gray-700" style={{ width }}>
     {reporter ? (
-      <span className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{reporter}</span>
+      <span className="text-sm text-gray-500 dark:text-gray-400 truncate" title={reporter}>{reporter}</span>
     ) : (
       <span className="text-sm text-gray-400 dark:text-gray-500 whitespace-nowrap">-</span>
     )}

worklenz-frontend/src/components/task-management/improved-task-filters.tsx

@@ -14,6 +14,8 @@ import {
   EyeOutlined,
   InboxOutlined,
   CheckOutlined,
+  SortAscendingOutlined,
+  SortDescendingOutlined,
 } from '@/shared/antd-imports';
 import { RootState } from '@/app/store';
 import { useAppSelector } from '@/hooks/useAppSelector';
@@ -30,6 +32,12 @@ import {
   setArchived as setTaskManagementArchived,
   toggleArchived as toggleTaskManagementArchived,
   selectArchived,
+  setSort,
+  setSortField,
+  setSortOrder,
+  selectSort,
+  selectSortField,
+  selectSortOrder,
 } from '@/features/task-management/task-management.slice';
 import {
   setCurrentGrouping,
@@ -44,11 +52,13 @@ import {
   setLabels,
   setSearch,
   setPriorities,
+  setFields,
 } from '@/features/tasks/tasks.slice';
 import { getTeamMembers } from '@/features/team-members/team-members.slice';
 import { ITaskPriority } from '@/types/tasks/taskPriority.types';
 import { ITaskListColumn } from '@/types/tasks/taskList.types';
 import { IGroupBy } from '@/features/tasks/tasks.slice';
+import { ITaskListSortableColumn } from '@/types/tasks/taskListFilters.types';
 // --- Enhanced Kanban imports ---
 import {
   setGroupBy as setKanbanGroupBy,
@@ -84,6 +94,12 @@ const FILTER_DEBOUNCE_DELAY = 300; // ms
 const SEARCH_DEBOUNCE_DELAY = 500; // ms
 const MAX_FILTER_OPTIONS = 100;
 
+// Sort order enum
+enum SORT_ORDER {
+  ASCEND = 'ascend',
+  DESCEND = 'descend',
+}
+
  // Limit options to prevent UI lag
 
 // Optimized selectors with proper transformation logic
@@ -740,6 +756,192 @@ const SearchFilter: React.FC<{
   );
 };
 
+// Sort Dropdown Component - Simplified version using task-management slice
+const SortDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
+  themeClasses,
+  isDarkMode,
+}) => {
+  const { t } = useTranslation('task-list-filters');
+  const dispatch = useAppDispatch();
+  const { projectId } = useAppSelector(state => state.projectReducer);
+  
+  // Get current sort state from task-management slice
+  const currentSortField = useAppSelector(selectSortField);
+  const currentSortOrder = useAppSelector(selectSortOrder);
+
+  const [open, setOpen] = React.useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown on outside click
+  React.useEffect(() => {
+    if (!open) return;
+    const handleClick = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  const sortFieldsList = [
+    { label: t('taskText'), key: 'name' },
+    { label: t('statusText'), key: 'status' },
+    { label: t('priorityText'), key: 'priority' },
+    { label: t('startDateText'), key: 'start_date' },
+    { label: t('endDateText'), key: 'end_date' },
+    { label: t('completedDateText'), key: 'completed_at' },
+    { label: t('createdDateText'), key: 'created_at' },
+    { label: t('lastUpdatedText'), key: 'updated_at' },
+  ];
+
+  const handleSortFieldChange = (fieldKey: string) => {
+    // If clicking the same field, toggle order, otherwise set new field with ASC
+    if (currentSortField === fieldKey) {
+      const newOrder = currentSortOrder === 'ASC' ? 'DESC' : 'ASC';
+      dispatch(setSort({ field: fieldKey, order: newOrder }));
+    } else {
+      dispatch(setSort({ field: fieldKey, order: 'ASC' }));
+    }
+    
+    // Fetch updated tasks
+    if (projectId) {
+      dispatch(fetchTasksV3(projectId));
+    }
+    
+    setOpen(false);
+  };
+
+  const clearSort = () => {
+    dispatch(setSort({ field: '', order: 'ASC' }));
+    if (projectId) {
+      dispatch(fetchTasksV3(projectId));
+    }
+  };
+
+  const isActive = currentSortField !== '';
+  const currentFieldLabel = sortFieldsList.find(f => f.key === currentSortField)?.label;
+  const orderText = currentSortOrder === 'ASC' ? t('ascendingOrder') : t('descendingOrder');
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      {/* Trigger Button - matching FilterDropdown style */}
+      <button
+        onClick={() => setOpen(!open)}
+        title={
+          isActive
+            ? t('currentSort', { field: currentFieldLabel, order: orderText })
+            : t('sortText')
+        }
+        className={`
+          inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-md
+          border transition-all duration-200 ease-in-out
+          ${
+            isActive
+              ? isDarkMode
+                ? 'bg-gray-600 text-white border-gray-500'
+                : 'bg-gray-200 text-gray-800 border-gray-300 font-semibold'
+              : `${themeClasses.buttonBg} ${themeClasses.buttonBorder} ${themeClasses.buttonText}`
+          }
+          hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2
+          ${isDarkMode ? 'focus:ring-offset-gray-900' : 'focus:ring-offset-white'}
+        `}
+        aria-expanded={open}
+        aria-haspopup="true"
+      >
+        {currentSortOrder === 'ASC' ? (
+          <SortAscendingOutlined className="w-3.5 h-3.5" />
+        ) : (
+          <SortDescendingOutlined className="w-3.5 h-3.5" />
+        )}
+        <span className="hidden sm:inline">{t('sortText')}</span>
+        {isActive && currentFieldLabel && (
+          <span className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-600'} max-w-16 truncate hidden md:inline`}>
+            {currentFieldLabel}
+          </span>
+        )}
+        <DownOutlined
+          className={`w-3.5 h-3.5 transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      {/* Dropdown Panel - matching FilterDropdown style */}
+      {open && (
+        <div
+          className={`absolute top-full left-0 z-50 mt-1 w-64 ${themeClasses.dropdownBg} rounded-md shadow-sm border ${themeClasses.dropdownBorder}`}
+        >
+          {/* Clear Sort Option */}
+          {isActive && (
+            <div className={`p-2 border-b ${themeClasses.dividerBorder}`}>
+              <button
+                onClick={clearSort}
+                className={`w-full text-left px-2 py-1.5 text-xs rounded transition-colors duration-150 ${themeClasses.optionText} ${themeClasses.optionHover}`}
+              >
+                {t('clearSort')}
+              </button>
+            </div>
+          )}
+          
+          {/* Options List */}
+          <div className="max-h-48 overflow-y-auto">
+            <div className="p-0.5">
+              {sortFieldsList.map(sortField => {
+                const isSelected = currentSortField === sortField.key;
+
+                return (
+                  <button
+                    key={sortField.key}
+                    onClick={() => handleSortFieldChange(sortField.key)}
+                    className={`
+                      w-full flex items-center justify-between gap-2 px-2 py-1.5 text-xs rounded
+                      transition-colors duration-150 text-left
+                      ${
+                        isSelected
+                          ? isDarkMode
+                            ? 'bg-gray-600 text-white'
+                            : 'bg-gray-200 text-gray-800 font-semibold'
+                          : `${themeClasses.optionText} ${themeClasses.optionHover}`
+                      }
+                    `}
+                    title={
+                      isSelected 
+                        ? t('currentSort', { 
+                            field: sortField.label, 
+                            order: orderText 
+                          }) + ` - ${t('sortDescending')}`
+                        : t('sortByField', { field: sortField.label }) + ` - ${t('sortAscending')}`
+                    }
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="truncate">{sortField.label}</span>
+                      {isSelected && (
+                        <span className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
+                          ({orderText})
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-1">
+                      {isSelected ? (
+                        currentSortOrder === 'ASC' ? (
+                          <SortAscendingOutlined className="w-3.5 h-3.5" />
+                        ) : (
+                          <SortDescendingOutlined className="w-3.5 h-3.5" />
+                        )
+                      ) : (
+                        <SortAscendingOutlined className="w-3.5 h-3.5 opacity-50" />
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
 const LOCAL_STORAGE_KEY = 'worklenz.taskManagement.fields';
 
 const FieldsDropdown: React.FC<{ themeClasses: any; isDarkMode: boolean }> = ({
@@ -1050,14 +1252,20 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
     };
   }, [dispatch, projectView]);
 
+  // Get sort fields for active count calculation
+  const sortFields = useAppSelector(state => state.taskReducer.fields);
+  const taskManagementSortField = useAppSelector(selectSortField);
+
   // Calculate active filters count - memoized to prevent unnecessary recalculations
   const calculatedActiveFiltersCount = useMemo(() => {
     const count = filterSections.reduce(
       (acc, section) => (section.id === 'groupBy' ? acc : acc + section.selectedValues.length),
       0
     );
-    return count + (searchValue ? 1 : 0);
-  }, [filterSections, searchValue]);
+    const sortFieldsCount = position === 'list' ? sortFields.length : 0;
+    const taskManagementSortCount = position === 'list' && taskManagementSortField ? 1 : 0;
+    return count + (searchValue ? 1 : 0) + sortFieldsCount + taskManagementSortCount;
+  }, [filterSections, searchValue, sortFields, taskManagementSortField, position]);
 
   useEffect(() => {
     if (activeFiltersCount !== calculatedActiveFiltersCount) {
@@ -1231,6 +1439,12 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
         // Clear priority filters
         dispatch(setPriorities([]));
 
+        // Clear sort fields
+        dispatch(setFields([]));
+
+        // Clear sort from task-management slice
+        dispatch(setSort({ field: '', order: 'ASC' }));
+
         // Clear archived state based on position
         if (position === 'list') {
           dispatch(setTaskManagementArchived(false));
@@ -1276,9 +1490,9 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
     <div
       className={`${themeClasses.containerBg} border ${themeClasses.containerBorder} rounded-md p-1.5 shadow-sm ${className}`}
     >
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="flex flex-wrap items-center justify-between gap-2 min-h-[36px]">
         {/* Left Section - Main Filters */}
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="flex flex-wrap items-center gap-2 flex-1 min-w-0">
           {/* Search */}
           <SearchFilter
             value={searchValue}
@@ -1287,6 +1501,11 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
             themeClasses={themeClasses}
           />
 
+          {/* Sort Filter Button (for list view) - appears after search */}
+          {position === 'list' && (
+            <SortDropdown themeClasses={themeClasses} isDarkMode={isDarkMode} />
+          )}
+
           {/* Filter Dropdowns - Only render when data is loaded */}
           {isDataLoaded ? (
             filterSectionsData.map(section => (
@@ -1316,7 +1535,7 @@ const ImprovedTaskFilters: React.FC<ImprovedTaskFiltersProps> = ({ position, cla
         </div>
 
         {/* Right Section - Additional Controls */}
-        <div className="flex items-center gap-2 ml-auto">
+        <div className="flex flex-wrap items-center gap-2 ml-auto min-w-0 shrink-0">
           {/* Active Filters Indicator */}
           {activeFiltersCount > 0 && (
             <div className="flex items-center gap-1.5">

worklenz-frontend/src/features/account-setup/account-setup.slice.ts

@@ -1,4 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { IAccountSetupSurveyData } from '@/types/account-setup/survey.types';
 
 interface Task {
   id: number;
@@ -17,6 +18,8 @@ interface AccountSetupState {
   tasks: Task[];
   teamMembers: Email[];
   currentStep: number;
+  surveyData: IAccountSetupSurveyData;
+  surveySubStep: number;
 }
 
 const initialState: AccountSetupState = {
@@ -26,6 +29,8 @@ const initialState: AccountSetupState = {
   tasks: [{ id: 0, value: '' }],
   teamMembers: [{ id: 0, value: '' }],
   currentStep: 0,
+  surveyData: {},
+  surveySubStep: 0,
 };
 
 const accountSetupSlice = createSlice({
@@ -50,6 +55,16 @@ const accountSetupSlice = createSlice({
     setCurrentStep: (state, action: PayloadAction<number>) => {
       state.currentStep = action.payload;
     },
+    setSurveyData: (state, action: PayloadAction<Partial<IAccountSetupSurveyData>>) => {
+      state.surveyData = { ...state.surveyData, ...action.payload };
+    },
+    setSurveySubStep: (state, action: PayloadAction<number>) => {
+      state.surveySubStep = action.payload;
+    },
+    resetSurveyData: (state) => {
+      state.surveyData = {};
+      state.surveySubStep = 0;
+    },
     resetAccountSetup: () => initialState,
   },
 });
@@ -61,6 +76,9 @@ export const {
   setTasks,
   setTeamMembers,
   setCurrentStep,
+  setSurveyData,
+  setSurveySubStep,
+  resetSurveyData,
   resetAccountSetup,
 } = accountSetupSlice.actions;
 

worklenz-frontend/src/features/task-management/task-management.slice.ts

@@ -64,6 +64,9 @@ const initialState: TaskManagementState = {
   loadingColumns: false,
   columns: [],
   customColumns: [],
+  // Add sort-related state
+  sortField: '',
+  sortOrder: 'ASC',
 };
 
 // Async thunk to fetch tasks from API
@@ -233,12 +236,16 @@ export const fetchTasksV3 = createAsyncThunk(
       // Get archived state from task management slice
       const archivedState = state.taskManagement.archived;
 
+      // Get sort state from task management slice
+      const sortField = state.taskManagement.sortField;
+      const sortOrder = state.taskManagement.sortOrder;
+
       const config: ITaskListConfigV2 = {
         id: projectId,
         archived: archivedState,
         group: currentGrouping || '',
-        field: '',
-        order: '',
+        field: sortField,
+        order: sortOrder,
         search: searchValue,
         statuses: '',
         members: selectedAssignees,
@@ -737,6 +744,16 @@ const taskManagementSlice = createSlice({
     toggleArchived: (state) => {
       state.archived = !state.archived;
     },
+    setSortField: (state, action: PayloadAction<string>) => {
+      state.sortField = action.payload;
+    },
+    setSortOrder: (state, action: PayloadAction<'ASC' | 'DESC'>) => {
+      state.sortOrder = action.payload;
+    },
+    setSort: (state, action: PayloadAction<{ field: string; order: 'ASC' | 'DESC' }>) => {
+      state.sortField = action.payload.field;
+      state.sortOrder = action.payload.order;
+    },
     resetTaskManagement: state => {
       state.loading = false;
       state.error = null;
@@ -745,6 +762,8 @@ const taskManagementSlice = createSlice({
       state.selectedPriorities = [];
       state.search = '';
       state.archived = false;
+      state.sortField = '';
+      state.sortOrder = 'ASC';
       state.ids = [];
       state.entities = {};
     },
@@ -1129,6 +1148,9 @@ export const {
   setSearch,
   setArchived,
   toggleArchived,
+  setSortField,
+  setSortOrder,
+  setSort,
   resetTaskManagement,
   toggleTaskExpansion,
   addSubtaskToParent,
@@ -1160,6 +1182,9 @@ export const selectLoading = (state: RootState) => state.taskManagement.loading;
 export const selectError = (state: RootState) => state.taskManagement.error;
 export const selectSelectedPriorities = (state: RootState) => state.taskManagement.selectedPriorities;
 export const selectSearch = (state: RootState) => state.taskManagement.search;
+export const selectSortField = (state: RootState) => state.taskManagement.sortField;
+export const selectSortOrder = (state: RootState) => state.taskManagement.sortOrder;
+export const selectSort = (state: RootState) => ({ field: state.taskManagement.sortField, order: state.taskManagement.sortOrder });
 export const selectSubtaskLoading = (state: RootState, taskId: string) => state.taskManagement.loadingSubtasks[taskId] || false;
 
 // Memoized selectors to prevent unnecessary re-renders

worklenz-frontend/src/hooks/useSurveyStatus.ts

@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import { surveyApiService } from '@/api/survey/survey.api.service';
+import logger from '@/utils/errorLogger';
+
+export interface UseSurveyStatusResult {
+  hasCompletedSurvey: boolean | null;
+  loading: boolean;
+  error: Error | null;
+  refetch: () => Promise<void>;
+}
+
+export const useSurveyStatus = (): UseSurveyStatusResult => {
+  const [hasCompletedSurvey, setHasCompletedSurvey] = useState<boolean | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const checkSurveyStatus = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      
+      const response = await surveyApiService.checkAccountSetupSurveyStatus();
+      
+      if (response.done) {
+        setHasCompletedSurvey(response.body.is_completed);
+      } else {
+        setHasCompletedSurvey(false);
+      }
+    } catch (err) {
+      logger.error('Failed to check survey status', err);
+      setError(err as Error);
+      // Assume not completed if there's an error
+      setHasCompletedSurvey(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    checkSurveyStatus();
+  }, []);
+
+  return {
+    hasCompletedSurvey,
+    loading,
+    error,
+    refetch: checkSurveyStatus
+  };
+};

worklenz-frontend/src/pages/account-setup/account-setup.css

@@ -1,5 +1,9 @@
+/* Account Setup Page Styles */
+
+/* Steps styling - using Ant Design theme tokens */
 .ant-steps-item-finish .ant-steps-item-icon {
-  border-color: #1890ff !important;
+  border-color: var(--ant-color-primary) !important;
+  background-color: var(--ant-color-primary) !important;
 }
 
 .ant-steps-item-icon {
@@ -9,37 +13,53 @@
   font-size: 16px !important;
   line-height: 32px !important;
   text-align: center !important;
-  border: 1px solid rgba(0, 0, 0, 0.25) !important;
+  border: 1px solid var(--ant-color-border) !important;
   border-radius: 32px !important;
-  transition:
-    background-color 0.3s,
-    border-color 0.3s !important;
+  transition: all 0.3s !important;
+  background-color: var(--ant-color-bg-container) !important;
+  color: var(--ant-color-text) !important;
 }
 
 .ant-steps-item-wait .ant-steps-item-icon {
   cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.dark-mode .ant-steps-item-wait .ant-steps-item-icon {
-  cursor: not-allowed;
+.ant-steps-item-process .ant-steps-item-icon {
+  border-color: var(--ant-color-primary) !important;
+  background-color: var(--ant-color-primary) !important;
+  color: var(--ant-color-white) !important;
 }
 
 .progress-steps .ant-steps-item.ant-steps-item-process .ant-steps-item-title::after {
-  background-color: #1677ff !important;
+  background-color: var(--ant-color-primary) !important;
   width: 60px !important;
 }
 
+.ant-steps-item-title {
+  color: var(--ant-color-text) !important;
+}
+
+.ant-steps-item-description {
+  color: var(--ant-color-text-secondary) !important;
+}
+
+/* Responsive layout */
 @media (max-width: 1000px) {
-  .progress-steps {
-    width: 400px !important;
-  }
-
-  .step {
-    width: 400px !important;
-  }
-
+  .progress-steps,
+  .step,
   .step-content {
-    width: 400px !important;
+    width: 90% !important;
+    max-width: 500px !important;
+  }
+}
+
+@media (max-width: 768px) {
+  .progress-steps,
+  .step,
+  .step-content {
+    width: 95% !important;
+    max-width: 400px !important;
   }
 }
 
@@ -53,98 +73,93 @@
   }
 
   .step-content {
-    width: 200px !important;
+    width: 100% !important;
+    max-width: 300px !important;
+    padding: 0 1rem !important;
   }
 }
 
-@media (max-width: 1000px) {
-  .organization-name-form {
-    width: 400px !important;
+/* Tasks step specific styles */
+.tasks-step .task-item-card {
+  transition: all 0.3s ease;
+}
+
+.tasks-step .task-item-card:hover {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.tasks-step .task-input {
+  font-size: 16px;
+}
+
+.tasks-step .task-input:focus {
+  box-shadow: none !important;
+}
+
+/* Project step specific styles */
+.project-step .ant-input-affix-wrapper {
+  transition: all 0.3s ease;
+}
+
+.project-step .ant-input-affix-wrapper:focus-within {
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+}
+
+.project-suggestion-button {
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.project-suggestion-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.project-suggestion-button:active {
+  transform: translateY(0);
+}
+
+/* Organization step specific styles */
+.organization-step .ant-input-affix-wrapper {
+  transition: all 0.3s ease;
+}
+
+.organization-step .ant-input-affix-wrapper:focus-within {
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
+  border-color: #1890ff;
+}
+
+.organization-suggestion-button {
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.organization-suggestion-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.organization-suggestion-button:active {
+  transform: translateY(0);
+}
+
+/* Survey step animations */
+.survey-page-transition {
+  animation: fadeInUp 0.4s ease-out;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
-@media (max-width: 500px) {
-  .organization-name-form {
-    width: 200px !important;
-  }
-}
-
-.vert-text {
-  max-width: 40px;
-  background-color: #fff;
-  position: relative;
-  z-index: 99;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  justify-content: center;
-  margin-top: 2rem;
-}
-
-.vert-text-dark {
-  max-width: 40px;
-  background-color: #141414;
-  position: relative;
-  z-index: 99;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-  justify-content: center;
-  margin-top: 2rem;
-}
-
-.vert-line {
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
-  content: "";
-  height: 2px;
-  background-color: #00000047;
-  bottom: 0;
-  top: 0;
-  margin-bottom: auto;
-  margin-top: auto;
-}
-
-.vert-line-dark {
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
-  content: "";
-  height: 2px;
-  background-color: white;
-  bottom: 0;
-  top: 0;
-  margin-bottom: auto;
-  margin-top: auto;
-}
-
-@media (max-width: 1000px) {
-  .first-project-form {
-    width: 400px !important;
-  }
-}
-
-@media (max-width: 500px) {
-  .first-project-form {
-    width: 200px !important;
-  }
-}
-
-.custom-close-button:hover {
-  background-color: transparent !important;
-}
-
-@media (max-width: 1000px) {
-  .create-first-task-form {
-    width: 400px !important;
-  }
-}
-
-@media (max-width: 500px) {
-  .create-first-task-form {
-    width: 200px !important;
-  }
-}
+/* Theme transitions */
+* {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}

worklenz-frontend/src/pages/account-setup/account-setup.tsx

@@ -2,13 +2,15 @@ import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Space, Steps, Button, Typography } from 'antd/es';
+import { Space, Steps, Button, Typography, theme, Dropdown, MenuProps } from '@/shared/antd-imports';
+import { GlobalOutlined, MoonOutlined, SunOutlined } from '@/shared/antd-imports';
 
 import logger from '@/utils/errorLogger';
-import { setCurrentStep } from '@/features/account-setup/account-setup.slice';
+import { setCurrentStep, setSurveySubStep } from '@/features/account-setup/account-setup.slice';
 import { OrganizationStep } from '@/components/account-setup/organization-step';
 import { ProjectStep } from '@/components/account-setup/project-step';
 import { TasksStep } from '@/components/account-setup/tasks-step';
+import { SurveyStep } from '@/components/account-setup/survey-step';
 import MembersStep from '@/components/account-setup/members-step';
 import {
   evt_account_setup_complete,
@@ -31,23 +33,110 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
 import './account-setup.css';
 import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';
 import { profileSettingsApiService } from '@/api/settings/profile/profile-settings.api.service';
+import { projectTemplatesApiService } from '@/api/project-templates/project-templates.api.service';
+import { surveyApiService } from '@/api/survey/survey.api.service';
+import { ISurveySubmissionRequest, ISurveyAnswer } from '@/types/account-setup/survey.types';
+import { setLanguage } from '@/features/i18n/localesSlice';
+import { ILanguageType, Language } from '@/features/i18n/localesSlice';
+import { toggleTheme } from '@/features/theme/themeSlice';
 
 const { Title } = Typography;
 
+// Simplified styles for form components using Ant Design theme tokens
+const getAccountSetupStyles = (token: any) => ({
+  form: {
+    width: '100%',
+    maxWidth: '600px',
+  },
+  label: {
+    color: token.colorText,
+    fontWeight: 500,
+  },
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: '1rem',
+  },
+  drawerFooter: {
+    display: 'flex',
+    justifyContent: 'right',
+    padding: '10px 16px',
+  },
+});
+
 const AccountSetup: React.FC = () => {
   const dispatch = useAppDispatch();
-  const { t } = useTranslation('account-setup');
+  const { t, i18n } = useTranslation('account-setup');
   useDocumentTitle(t('setupYourAccount', 'Account Setup'));
   const navigate = useNavigate();
   const { trackMixpanelEvent } = useMixpanelTracking();
+  const { token } = theme.useToken();
 
-  const { currentStep, organizationName, projectName, templateId, tasks, teamMembers } =
+  const { currentStep, organizationName, projectName, templateId, tasks, teamMembers, surveyData, surveySubStep } =
     useSelector((state: RootState) => state.accountSetupReducer);
+  const lng = useSelector((state: RootState) => state.localesReducer.lng);
   const userDetails = getUserSession();
   const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
+  
+  const [surveyId, setSurveyId] = React.useState<string | null>(null);
+  const [isSkipping, setIsSkipping] = React.useState(false);
 
   const isDarkMode = themeMode === 'dark';
-  const organizationNamePlaceholder = userDetails?.name ? `e.g. ${userDetails?.name}'s Team` : '';
+  // Helper to extract organization name from email or fallback to user name
+  function getOrganizationNamePlaceholder(userDetails: { email?: string; name?: string } | null): string {
+    if (!userDetails) return '';
+    const email = userDetails.email || '';
+    const name = userDetails.name || '';
+    if (email) {
+      const match = email.match(/^([^@]+)@([^@]+)$/);
+      if (match) {
+        const domain = match[2].toLowerCase();
+        // List of common public email providers
+        const publicProviders = [
+          'gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'icloud.com', 'aol.com', 'protonmail.com', 'zoho.com', 'gmx.com', 'mail.com', 'yandex.com', 'msn.com', 'live.com', 'me.com', 'comcast.net', 'rediffmail.com', 'ymail.com', 'rocketmail.com', 'inbox.com', 'mail.ru', 'qq.com', 'naver.com', '163.com', '126.com', 'sina.com', 'yeah.net', 'googlemail.com', 'fastmail.com', 'hushmail.com', 'tutanota.com', 'pm.me', 'mailbox.org', 'proton.me'
+        ];
+        if (!publicProviders.includes(domain)) {
+          // Use the first part of the domain (before the first dot)
+          const org = domain.split('.')[0];
+          if (org && org.length > 1) {
+            return `e.g. ${org.charAt(0).toUpperCase() + org.slice(1)} Team`;
+          }
+        }
+      }
+    }
+    // Fallback to user name
+    return name ? `e.g. ${name}'s Team` : '';
+  }
+
+  const organizationNamePlaceholder = getOrganizationNamePlaceholder(userDetails);
+
+  // Helper to extract organization name from email or fallback to user name
+  function getOrganizationNameInitialValue(userDetails: { email?: string; name?: string } | null): string {
+    if (!userDetails) return '';
+    const email = userDetails.email || '';
+    const name = userDetails.name || '';
+    if (email) {
+      const match = email.match(/^([^@]+)@([^@]+)$/);
+      if (match) {
+        const domain = match[2].toLowerCase();
+        const publicProviders = [
+          'gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', 'icloud.com', 'aol.com', 'protonmail.com', 'zoho.com', 'gmx.com', 'mail.com', 'yandex.com', 'msn.com', 'live.com', 'me.com', 'comcast.net', 'rediffmail.com', 'ymail.com', 'rocketmail.com', 'inbox.com', 'mail.ru', 'qq.com', 'naver.com', '163.com', '126.com', 'sina.com', 'yeah.net', 'googlemail.com', 'fastmail.com', 'hushmail.com', 'tutanota.com', 'pm.me', 'mailbox.org', 'proton.me'
+        ];
+        if (!publicProviders.includes(domain)) {
+          const org = domain.split('.')[0];
+          if (org && org.length > 1) {
+            return org.charAt(0).toUpperCase() + org.slice(1);
+          }
+        }
+      }
+    }
+    return name || '';
+  }
+
+  const organizationNameInitialValue = getOrganizationNameInitialValue(userDetails);
+
+  const styles = getAccountSetupStyles(token);
 
   useEffect(() => {
     trackMixpanelEvent(evt_account_setup_visit);
@@ -65,88 +154,25 @@ const AccountSetup: React.FC = () => {
         logger.error('Failed to verify authentication status', error);
       }
     };
+    
+    const loadSurvey = async () => {
+      try {
+        const response = await surveyApiService.getAccountSetupSurvey();
+        if (response.done && response.body) {
+          setSurveyId(response.body.id);
+        } else {
+          logger.error('Survey not found or inactive (warn replaced with error)');
+        }
+      } catch (error) {
+        logger.error('Failed to load survey', error);
+        // Continue without survey - don't block account setup
+      }
+    };
+    
     void verifyAuthStatus();
+    void loadSurvey();
   }, [dispatch, navigate, trackMixpanelEvent]);
 
-  const calculateHeight = () => {
-    if (currentStep === 2) {
-      return tasks.length * 105;
-    }
-
-    if (currentStep === 3) {
-      return teamMembers.length * 105;
-    }
-    return 'min-content';
-  };
-
-  const styles = {
-    form: {
-      width: '600px',
-      paddingBottom: '1rem',
-      marginTop: '3rem',
-      height: '100%',
-      overflow: 'hidden',
-    },
-    label: {
-      color: isDarkMode ? '' : '#00000073',
-      fontWeight: 500,
-    },
-    buttonContainer: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      marginTop: '1rem',
-    },
-    drawerFooter: {
-      display: 'flex',
-      justifyContent: 'right',
-      padding: '10px 16px',
-    },
-    container: {
-      height: '100vh',
-      width: '100vw',
-      display: 'flex',
-      flexDirection: 'column' as const,
-      alignItems: 'center',
-      padding: '3rem 0',
-      backgroundColor: isDarkMode ? 'black' : '#FAFAFA',
-    },
-    contentContainer: {
-      backgroundColor: isDarkMode ? '#141414' : 'white',
-      marginTop: '1.5rem',
-      paddingTop: '3rem',
-      margin: '1.5rem auto 0',
-      width: '100%',
-      maxWidth: '66.66667%',
-      minHeight: 'fit-content',
-      display: 'flex',
-      flexDirection: 'column' as const,
-    },
-    space: {
-      display: 'flex',
-      flexDirection: 'column' as const,
-      alignItems: 'center',
-      gap: '0',
-      flexGrow: 1,
-      width: '100%',
-      minHeight: 'fit-content',
-    },
-    steps: {
-      margin: '1rem 0',
-      width: '600px',
-    },
-    stepContent: {
-      flexGrow: 1,
-      width: '600px',
-      minHeight: calculateHeight(),
-      overflow: 'visible',
-    },
-    actionButtons: {
-      flexGrow: 1,
-      width: '600px',
-      marginBottom: '1rem',
-    },
-  };
 
   const completeAccountSetup = async (skip = false) => {
     try {
@@ -159,6 +185,13 @@ const AccountSetup: React.FC = () => {
           : teamMembers
               .map(teamMember => sanitizeInput(teamMember.value.trim()))
               .filter(email => validateEmail(email)),
+        survey_data: {
+          organization_type: surveyData.organization_type,
+          user_role: surveyData.user_role,
+          main_use_cases: surveyData.main_use_cases,
+          previous_tools: surveyData.previous_tools,
+          how_heard_about: surveyData.how_heard_about,
+        },
       };
       const res = await profileSettingsApiService.setupAccount(model);
       if (res.done && res.body.id) {
@@ -182,6 +215,59 @@ const AccountSetup: React.FC = () => {
     }
   };
 
+  const handleSkipMembers = async () => {
+    try {
+      setIsSkipping(true);
+      // Bypass all validation and complete setup without team members
+      await completeAccountSetup(true);
+    } catch (error) {
+      logger.error('Failed to skip members and complete setup', error);
+    } finally {
+      setIsSkipping(false);
+    }
+  };
+
+  const completeAccountSetupWithTemplate = async () => {
+    try {
+      await saveSurveyData(); // Save survey data first
+      
+      const model: IAccountSetupRequest = {
+        team_name: sanitizeInput(organizationName),
+        project_name: null, // No project name when using template
+        template_id: templateId,
+        tasks: [],
+        team_members: [],
+        survey_data: {
+          organization_type: surveyData.organization_type,
+          user_role: surveyData.user_role,
+          main_use_cases: surveyData.main_use_cases,
+          previous_tools: surveyData.previous_tools,
+          how_heard_about: surveyData.how_heard_about,
+        },
+      };
+      
+      const res = await projectTemplatesApiService.setupAccount(model);
+      if (res.done && res.body.id) {
+        trackMixpanelEvent(evt_account_setup_complete);
+        
+        // Refresh user session to update setup_completed status
+        try {
+          const authResponse = await dispatch(verifyAuthentication()).unwrap() as IAuthorizeResponse;
+          if (authResponse?.authenticated && authResponse?.user) {
+            setSession(authResponse.user);
+            dispatch(setUser(authResponse.user));
+          }
+        } catch (error) {
+          logger.error('Failed to refresh user session after template setup completion', error);
+        }
+        
+        navigate(`/worklenz/projects/${res.body.id}?tab=tasks-list&pinned_tab=tasks-list`);
+      }
+    } catch (error) {
+      logger.error('completeAccountSetupWithTemplate', error);
+    }
+  };
+
   const steps = [
     {
       title: '',
@@ -190,6 +276,20 @@ const AccountSetup: React.FC = () => {
           onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
           styles={styles}
           organizationNamePlaceholder={organizationNamePlaceholder}
+          organizationNameInitialValue={organizationNameInitialValue}
+          isDarkMode={isDarkMode}
+          token={token}
+        />
+      ),
+    },
+    {
+      title: '',
+      content: (
+        <SurveyStep
+          onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
+          styles={styles}
+          isDarkMode={isDarkMode}
+          token={token}
         />
       ),
     },
@@ -200,6 +300,7 @@ const AccountSetup: React.FC = () => {
           onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
           styles={styles}
           isDarkMode={isDarkMode}
+          token={token}
         />
       ),
     },
@@ -210,12 +311,13 @@ const AccountSetup: React.FC = () => {
           onEnter={() => dispatch(setCurrentStep(currentStep + 1))}
           styles={styles}
           isDarkMode={isDarkMode}
+          token={token}
         />
       ),
     },
     {
       title: '',
-      content: <MembersStep isDarkMode={isDarkMode} styles={styles} />,
+      content: <MembersStep isDarkMode={isDarkMode} styles={styles} token={token} />,
     },
   ];
 
@@ -224,10 +326,21 @@ const AccountSetup: React.FC = () => {
       case 0:
         return !organizationName?.trim();
       case 1:
-        return !projectName?.trim() && !templateId;
+        // Survey step - check current sub-step requirements
+        if (surveySubStep === 0) {
+          return !(surveyData.organization_type && surveyData.user_role);
+        } else if (surveySubStep === 1) {
+          return !(surveyData.main_use_cases && surveyData.main_use_cases.length > 0);
+        } else if (surveySubStep === 2) {
+          return !surveyData.how_heard_about;
+        }
+        return false;
       case 2:
-        return tasks.length === 0 || tasks.every(task => !task.value?.trim());
+        // Project step - either project name OR template must be provided
+        return !projectName?.trim() && !templateId;
       case 3:
+        return tasks.length === 0 || tasks.every(task => !task.value?.trim());
+      case 4:
         return (
           teamMembers.length > 0 && !teamMembers.some(member => validateEmail(member.value?.trim()))
         );
@@ -236,58 +349,267 @@ const AccountSetup: React.FC = () => {
     }
   };
 
-  const nextStep = () => {
-    if (currentStep === 3) {
+  const saveSurveyData = async () => {
+    if (!surveyId || !surveyData) {
+      logger.error('Skipping survey save - no survey ID or data (info replaced with error)');
+      return;
+    }
+
+    try {
+      const answers: ISurveyAnswer[] = [];
+      
+      // Get the survey questions to map data properly
+      const surveyResponse = await surveyApiService.getAccountSetupSurvey();
+      if (!surveyResponse.done || !surveyResponse.body?.questions) {
+        logger.error('Could not retrieve survey questions for data mapping (warn replaced with error)');
+        return;
+      }
+
+      const questions = surveyResponse.body.questions;
+
+      // Map survey data to answers based on question keys
+      questions.forEach(question => {
+        switch (question.question_key) {
+          case 'organization_type':
+            if (surveyData.organization_type) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.organization_type
+              });
+            }
+            break;
+          case 'user_role':
+            if (surveyData.user_role) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.user_role
+              });
+            }
+            break;
+          case 'main_use_cases':
+            if (surveyData.main_use_cases && surveyData.main_use_cases.length > 0) {
+              answers.push({
+                question_id: question.id,
+                answer_json: surveyData.main_use_cases
+              });
+            }
+            break;
+          case 'previous_tools':
+            if (surveyData.previous_tools) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.previous_tools
+              });
+            }
+            break;
+          case 'how_heard_about':
+            if (surveyData.how_heard_about) {
+              answers.push({
+                question_id: question.id,
+                answer_text: surveyData.how_heard_about
+              });
+            }
+            break;
+        }
+      });
+
+      if (answers.length > 0) {
+        const submissionData: ISurveySubmissionRequest = {
+          survey_id: surveyId,
+          answers
+        };
+        
+        const result = await surveyApiService.submitSurveyResponse(submissionData);
+        if (result.done) {
+          logger.error('Survey data saved successfully (info replaced with error)');
+        } else {
+          logger.error('Survey submission returned unsuccessful response (warn replaced with error)');
+        }
+      } else {
+        logger.error('No survey answers to save (info replaced with error)');
+      }
+    } catch (error) {
+      logger.error('Failed to save survey data', error);
+      // Don't block account setup flow if survey fails
+    }
+  };
+
+  const nextStep = async () => {
+    if (currentStep === 1) {
+      // Handle survey sub-step navigation
+      if (surveySubStep < 2) {
+        // Move to next survey sub-step
+        dispatch(setSurveySubStep(surveySubStep + 1));
+      } else {
+        // Survey completed, save data and move to next main step
+        await saveSurveyData();
+        dispatch(setCurrentStep(currentStep + 1));
+        dispatch(setSurveySubStep(0)); // Reset for next time
+      }
+    } else if (currentStep === 2) {
+      // Project step - check if template is selected
+      if (templateId) {
+        // Template selected, complete account setup with template
+        await completeAccountSetupWithTemplate();
+      } else {
+        // No template, proceed to tasks step
+        dispatch(setCurrentStep(currentStep + 1));
+      }
+    } else if (currentStep === 4) {
+      // Complete setup after members step
       completeAccountSetup();
     } else {
       dispatch(setCurrentStep(currentStep + 1));
     }
   };
 
+  // Language switcher functionality
+  const languages = [
+    { key: Language.EN, label: 'English', flag: '🇺🇸' },
+    { key: Language.ES, label: 'Español', flag: '🇪🇸' },
+    { key: Language.PT, label: 'Português', flag: '🇵🇹' },
+    { key: Language.DE, label: 'Deutsch', flag: '🇩🇪' },
+    { key: Language.ALB, label: 'Shqip', flag: '🇦🇱' },
+    { key: Language.ZH_CN, label: '简体中文', flag: '🇨🇳' }
+  ];
+
+  const handleLanguageChange = (languageKey: ILanguageType) => {
+    dispatch(setLanguage(languageKey));
+    i18n.changeLanguage(languageKey);
+  };
+
+  const handleThemeToggle = () => {
+    dispatch(toggleTheme());
+  };
+
+  const languageMenuItems: MenuProps['items'] = languages.map(lang => ({
+    key: lang.key,
+    label: (
+      <div className="flex items-center space-x-2">
+        <span>{lang.flag}</span>
+        <span>{lang.label}</span>
+      </div>
+    ),
+    onClick: () => handleLanguageChange(lang.key as ILanguageType)
+  }));
+
+  const currentLanguage = languages.find(lang => lang.key === lng) || languages[0];
+
   return (
-    <div style={styles.container}>
-      <div>
+    <div 
+      className="account-setup-container min-h-screen w-full flex flex-col items-center py-8 px-4 relative"
+      style={{ backgroundColor: token.colorBgLayout }}
+    >
+      {/* Controls - Top Right */}
+      <div className="absolute top-6 right-6 flex items-center space-x-3">
+        {/* Theme Switcher */}
+        <Button
+          type="text"
+          size="small"
+          icon={isDarkMode ? <SunOutlined /> : <MoonOutlined />}
+          onClick={handleThemeToggle}
+          className="flex items-center"
+          style={{ color: token?.colorTextTertiary }}
+          title={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+        />
+        
+        {/* Language Switcher */}
+        <Dropdown
+          menu={{ items: languageMenuItems }}
+          placement="bottomRight"
+          trigger={['click']}
+        >
+          <Button
+            type="text"
+            size="small"
+            icon={<GlobalOutlined />}
+            className="flex items-center space-x-2"
+            style={{ color: token?.colorTextTertiary }}
+          >
+            <span>{currentLanguage.flag}</span>
+            <span>{currentLanguage.label}</span>
+          </Button>
+        </Dropdown>
+      </div>
+
+      {/* Logo */}
+      <div className="mb-4">
         <img src={isDarkMode ? logoDark : logo} alt="Logo" width={235} height={50} />
       </div>
-      <Title level={5} style={{ textAlign: 'center', margin: '4px 0 24px' }}>
+      
+      {/* Title */}
+      <Title 
+        level={3} 
+        className="text-center mb-6 font-semibold"
+        style={{ color: token.colorText }}
+      >
         {t('setupYourAccount')}
       </Title>
-      <div style={styles.contentContainer}>
-        <Space className={isDarkMode ? 'dark-mode' : ''} style={styles.space} direction="vertical">
-          <Steps
-            className={isContinueDisabled() ? 'step' : 'progress-steps'}
-            current={currentStep}
-            items={steps}
-            style={styles.steps}
-          />
-          <div className="step-content" style={styles.stepContent}>
-            {steps[currentStep].content}
+      
+      {/* Content Container */}
+      <div 
+        className="w-full max-w-4xl rounded-lg shadow-lg mt-6 p-8"
+        style={{
+          backgroundColor: token.colorBgContainer,
+          borderColor: token.colorBorder,
+          border: `1px solid ${token.colorBorder}`,
+          boxShadow: token.boxShadowTertiary
+        }}
+      >
+        <div className="flex flex-col items-center space-y-6 w-full">
+          {/* Steps */}
+          <div className="w-full max-w-2xl">
+            <Steps
+              className={`${isContinueDisabled() ? 'step' : 'progress-steps'} ${isDarkMode ? 'dark-mode' : 'light-mode'}`}
+              current={currentStep}
+              items={steps}
+            />
           </div>
-          <div style={styles.actionButtons} className="setup-action-buttons">
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: currentStep !== 0 ? 'space-between' : 'flex-end',
-              }}
-            >
+          
+          {/* Step Content */}
+          <div className="w-full max-w-2xl flex flex-col items-center min-h-fit">
+            <div className="step-content w-full">
+              {steps[currentStep].content}
+            </div>
+          </div>
+          
+          {/* Action Buttons */}
+          <div className="w-full max-w-2xl mt-8">
+            <div className={`flex ${
+              currentStep !== 0 ? 'justify-between' : 'justify-end'
+            } items-center`}>
               {currentStep !== 0 && (
-                <div>
+                <div className="flex flex-col space-y-2">
                   <Button
-                    style={{ padding: 0 }}
                     type="link"
-                    className="my-7"
-                    onClick={() => dispatch(setCurrentStep(currentStep - 1))}
+                    className="p-0 font-medium"
+                    style={{ color: token.colorTextSecondary }}
+                    onClick={() => {
+                      if (currentStep === 1 && surveySubStep > 0) {
+                        // Go back within survey sub-steps
+                        dispatch(setSurveySubStep(surveySubStep - 1));
+                      } else {
+                        // Go back to previous main step
+                        dispatch(setCurrentStep(currentStep - 1));
+                        if (currentStep === 2) {
+                          // When going back to survey from next step, go to last sub-step
+                          dispatch(setSurveySubStep(2));
+                        }
+                      }
+                    }}
                   >
                     {t('goBack')}
                   </Button>
-                  {currentStep === 3 && (
+                  {currentStep === 4 && (
                     <Button
-                      style={{ color: isDarkMode ? '' : '#00000073', fontWeight: 500 }}
                       type="link"
-                      className="my-7"
-                      onClick={() => completeAccountSetup(true)}
+                      className="p-0 font-medium"
+                      style={{ color: token.colorTextTertiary }}
+                      onClick={handleSkipMembers}
+                      loading={isSkipping}
+                      disabled={isSkipping}
                     >
-                      {t('skipForNow')}
+                      {isSkipping ? t('skipping') : t('skipForNow')}
                     </Button>
                   )}
                 </div>
@@ -296,14 +618,13 @@ const AccountSetup: React.FC = () => {
                 type="primary"
                 htmlType="submit"
                 disabled={isContinueDisabled()}
-                className="mt-7 mb-7"
                 onClick={nextStep}
               >
                 {t('continue')}
               </Button>
             </div>
           </div>
-        </Space>
+        </div>
       </div>
     </div>
   );

worklenz-frontend/src/pages/home/home-page.tsx

@@ -27,6 +27,7 @@ const SIDEBAR_MAX_WIDTH = 400;
 
 // Lazy load heavy components
 const TaskDrawer = React.lazy(() => import('@/components/task-drawer/task-drawer'));
+const SurveyPromptModal = React.lazy(() => import('@/components/survey/SurveyPromptModal').then(m => ({ default: m.SurveyPromptModal })));
 
 const HomePage = memo(() => {
   const dispatch = useAppDispatch();
@@ -142,6 +143,11 @@ const HomePage = memo(() => {
         document.body,
         'project-drawer'
       )}
+
+      {/* Survey Modal - only shown to users who haven't completed it */}
+      <Suspense fallback={null}>
+        <SurveyPromptModal />
+      </Suspense>
     </div>
   );
 });

worklenz-frontend/src/shared/antd-imports.ts

@@ -65,6 +65,7 @@ import {
   Timeline,
   Mentions,
   Radio,
+  Steps
 } from 'antd/es';
 
 // Icons - Import commonly used ones
@@ -240,6 +241,7 @@ export {
   Timeline,
   Mentions,
   Radio,
+  Steps
 };
 
 // TypeScript Types - Import commonly used ones

worklenz-frontend/src/styles/customOverrides.css

@@ -179,43 +179,4 @@ body.dark .overview-stat-card .ant-card-body,
 
 .ql-snow .ql-stroke {
   stroke: #6c757d !important;
-}
-
-/* HubSpot Widget Dark Mode Fixes */
-html.dark #hubspot-messages-iframe-container {
-  background-color: transparent !important;
-}
-
-html.dark #hubspot-messages-iframe-container iframe {
-  background-color: transparent !important;
-}
-
-/* Target the HubSpot widget container */
-html.dark .hs-messages-widget-open {
-  background-color: transparent !important;
-}
-
-/* Remove white background from HubSpot elements */
-html.dark #hs-messages-iframe-container,
-html.dark .hs-messages-iframe-container {
-  background: transparent !important;
-  background-color: transparent !important;
-}
-
-/* Ensure the iframe wrapper has no background */
-html.dark iframe#hs-messages-iframe {
-  background: transparent !important;
-}
-
-/* Target the widget launcher button area */
-html.dark .hs-messages-widget,
-html.dark .hs-messages-widget-container {
-  background: transparent !important;
-  background-color: transparent !important;
-}
-
-/* Remove any box shadow that might appear white */
-html.dark #hubspot-messages-iframe-container,
-html.dark .hs-messages-widget {
-  box-shadow: none !important;
-}
+}

worklenz-frontend/src/types/account-setup/survey.types.ts

@@ -0,0 +1,51 @@
+export interface ISurveyQuestion {
+  id: string;
+  survey_id: string;
+  question_key: string;
+  question_type: 'single_choice' | 'multiple_choice' | 'text';
+  is_required: boolean;
+  sort_order: number;
+  options?: string[];
+}
+
+export interface ISurvey {
+  id: string;
+  name: string;
+  description?: string;
+  survey_type: 'account_setup' | 'onboarding' | 'feedback';
+  is_active: boolean;
+  questions?: ISurveyQuestion[];
+}
+
+export interface ISurveyAnswer {
+  question_id: string;
+  answer_text?: string;
+  answer_json?: string[];
+}
+
+export interface ISurveyResponse {
+  id?: string;
+  survey_id: string;
+  user_id?: string;
+  is_completed: boolean;
+  answers: ISurveyAnswer[];
+}
+
+export interface ISurveySubmissionRequest {
+  survey_id: string;
+  answers: ISurveyAnswer[];
+}
+
+// Account setup survey specific types
+export type OrganizationType = 'freelancer' | 'startup' | 'small_medium_business' | 'agency' | 'enterprise' | 'other';
+export type UserRole = 'founder_ceo' | 'project_manager' | 'software_developer' | 'designer' | 'operations' | 'other';
+export type UseCase = 'task_management' | 'team_collaboration' | 'resource_planning' | 'client_communication' | 'time_tracking' | 'other';
+export type HowHeardAbout = 'google_search' | 'twitter' | 'linkedin' | 'friend_colleague' | 'blog_article' | 'other';
+
+export interface IAccountSetupSurveyData {
+  organization_type?: OrganizationType;
+  user_role?: UserRole;
+  main_use_cases?: UseCase[];
+  previous_tools?: string;
+  how_heard_about?: HowHeardAbout;
+}

worklenz-frontend/src/types/project-templates/project-templates.types.ts

@@ -52,6 +52,13 @@ export interface IAccountSetupRequest {
   tasks: string[];
   team_members: string[];
   template_id?: string | null;
+  survey_data?: {
+    organization_type?: string;
+    user_role?: string;
+    main_use_cases?: string[];
+    previous_tools?: string;
+    how_heard_about?: string;
+  };
 }
 
 export interface IAccountSetupResponse {

worklenz-frontend/src/types/task-management.types.ts

@@ -114,6 +114,9 @@ export interface TaskManagementState {
   loadingColumns: boolean;
   columns: ITaskListColumn[];
   customColumns: ITaskListColumn[];
+  // Add sort-related state
+  sortField: string;
+  sortOrder: 'ASC' | 'DESC';
 }
 
 export interface TaskGroupsState {

worklenz-frontend/src/utils/format-date-time-with-user-timezone.ts

@@ -0,0 +1,94 @@
+import { format } from 'date-fns';
+import { enUS, es, pt } from 'date-fns/locale';
+import { getLanguageFromLocalStorage } from './language-utils';
+
+/**
+ * Formats a date/time string using the user's profile timezone
+ * This ensures consistency between time logs display and reporting filters
+ * 
+ * @param dateString - The date string to format (typically in UTC)
+ * @param userTimezone - The user's timezone from their profile (e.g., 'America/New_York')
+ * @returns Formatted date string in user's timezone
+ */
+export const formatDateTimeWithUserTimezone = (
+  dateString: string,
+  userTimezone?: string | null
+): string => {
+  if (!dateString) return '';
+
+  try {
+    const date = new Date(dateString);
+    
+    // If timezone is provided, use it for formatting
+    if (userTimezone && userTimezone !== 'UTC') {
+      // Use the browser's toLocaleString with timezone option
+      const options: Intl.DateTimeFormatOptions = {
+        timeZone: userTimezone,
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: true
+      };
+      
+      // Get the appropriate locale
+      const localeString = getLanguageFromLocalStorage();
+      const localeMap = {
+        'en': 'en-US',
+        'es': 'es-ES',
+        'pt': 'pt-PT'
+      };
+      const locale = localeMap[localeString as keyof typeof localeMap] || 'en-US';
+      
+      return date.toLocaleString(locale, options);
+    }
+    
+    // Fallback to date-fns formatting for UTC or when no timezone
+    const localeString = getLanguageFromLocalStorage();
+    const locale = localeString === 'en' ? enUS : localeString === 'es' ? es : pt;
+    return format(date, 'MMM d, yyyy, h:mm:ss a', { locale });
+  } catch (error) {
+    console.error('Error formatting date with user timezone:', error);
+    // Fallback to original date string if formatting fails
+    return dateString;
+  }
+};
+
+/**
+ * Checks if a date is "yesterday" in the user's timezone
+ * This is used to ensure consistency with reporting filters
+ * 
+ * @param dateString - The date string to check
+ * @param userTimezone - The user's timezone from their profile
+ * @returns true if the date is yesterday in user's timezone
+ */
+export const isYesterdayInUserTimezone = (dateString: string, userTimezone?: string | null): boolean => {
+  if (!dateString || !userTimezone) return false;
+
+  try {
+    const date = new Date(dateString);
+    
+    // Get current date in user's timezone
+    const nowInTimezone = new Date().toLocaleString('en-US', { timeZone: userTimezone });
+    const now = new Date(nowInTimezone);
+    
+    // Get yesterday in user's timezone
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    
+    // Convert the input date to user's timezone
+    const dateInTimezone = new Date(date.toLocaleString('en-US', { timeZone: userTimezone }));
+    
+    // Compare dates (ignoring time)
+    return (
+      dateInTimezone.getFullYear() === yesterday.getFullYear() &&
+      dateInTimezone.getMonth() === yesterday.getMonth() &&
+      dateInTimezone.getDate() === yesterday.getDate()
+    );
+  } catch (error) {
+    console.error('Error checking if date is yesterday:', error);
+    return false;
+  }
+};