feat(navbar): implement new notification and invitation components

- Added NotificationDrawer and InvitationItem components to enhance the notification system.
- Refactored existing notification handling to improve user experience and maintainability.
- Introduced new styles and structure for notifications using Tailwind CSS for better visual consistency.
- Updated Navbar to include new components and improve overall layout.
- Created a centralized navRoutes file for better route management within the navbar.

.claude/settings.local.json

@@ -4,7 +4,11 @@
       "Bash(find:*)",
       "Bash(npm run build:*)",
       "Bash(npm run type-check:*)",
-      "Bash(npm run:*)"
+      "Bash(npm run:*)",
+      "Bash(move:*)",
+      "Bash(mv:*)",
+      "Bash(grep:*)",
+      "Bash(rm:*)"
     ],
     "deny": []
   }

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/src/controllers/projects-controller.ts

@@ -71,7 +71,7 @@ export default class ProjectsController extends WorklenzControllerBase {
         return res.status(200).send(new ServerResponse(false, [], `Sorry, the free plan cannot have more than ${projectsLimit} projects.`));
       }
     }
-    
+
     const q = `SELECT create_project($1) AS project`;
 
     req.body.team_id = req.user?.team_id || null;
@@ -317,65 +317,58 @@ export default class ProjectsController extends WorklenzControllerBase {
   @HandleExceptions()
   public static async getMembersByProjectId(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
     const {sortField, sortOrder, size, offset} = this.toPaginationOptions(req.query, "name");
+    const search = (req.query.search || "").toString().trim();
+
+    let searchFilter = "";
+    const params = [req.params.id, req.user?.team_id ?? null, size, offset];
+    if (search) {
+      searchFilter = `
+        AND (
+          (SELECT name FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) ILIKE '%' || $5 || '%'
+          OR (SELECT email FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) ILIKE '%' || $5 || '%'
+        )
+      `;
+      params.push(search);
+    }
 
     const q = `
-      SELECT ROW_TO_JSON(rec) AS members
-      FROM (SELECT COUNT(*) AS total,
-                   (SELECT COALESCE(ARRAY_TO_JSON(ARRAY_AGG(ROW_TO_JSON(t))), '[]'::JSON)
-                    FROM (SELECT project_members.id,
-                                 team_member_id,
-                                 (SELECT name
-                                  FROM team_member_info_view
-                                  WHERE team_member_info_view.team_member_id = tm.id),
-                                 (SELECT email
-                                  FROM team_member_info_view
-                                  WHERE team_member_info_view.team_member_id = tm.id) AS email,
-                                 u.avatar_url,
-                                 (SELECT COUNT(*)
-                                  FROM tasks
-                                  WHERE archived IS FALSE
-                                    AND project_id = project_members.project_id
-                                    AND id IN (SELECT task_id
-                                               FROM tasks_assignees
-                                               WHERE tasks_assignees.project_member_id = project_members.id)) AS all_tasks_count,
-                                 (SELECT COUNT(*)
-                                  FROM tasks
-                                  WHERE archived IS FALSE
-                                    AND project_id = project_members.project_id
-                                    AND id IN (SELECT task_id
-                                               FROM tasks_assignees
-                                               WHERE tasks_assignees.project_member_id = project_members.id)
-                                    AND status_id IN (SELECT id
-                                                      FROM task_statuses
-                                                      WHERE category_id = (SELECT id
-                                                                           FROM sys_task_status_categories
-                                                                           WHERE is_done IS TRUE))) AS completed_tasks_count,
-                                 EXISTS(SELECT email
-                                        FROM email_invitations
-                                        WHERE team_member_id = project_members.team_member_id
-                                          AND email_invitations.team_id = $2) AS pending_invitation,
-                                 (SELECT project_access_levels.name
-                                  FROM project_access_levels
-                                  WHERE project_access_levels.id = project_members.project_access_level_id) AS access,
-                                 (SELECT name FROM job_titles WHERE id = tm.job_title_id) AS job_title
-                          FROM project_members
-                                 INNER JOIN team_members tm ON project_members.team_member_id = tm.id
-                                 LEFT JOIN users u ON tm.user_id = u.id
-                          WHERE project_id = $1
-                          ORDER BY ${sortField} ${sortOrder}
-                          LIMIT $3 OFFSET $4) t) AS data
-            FROM project_members
-            WHERE project_id = $1) rec;
+      WITH filtered_members AS (
+        SELECT project_members.id,
+               team_member_id,
+               (SELECT name FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) AS name,
+               (SELECT email FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) AS email,
+               u.avatar_url,
+               (SELECT COUNT(*) FROM tasks WHERE archived IS FALSE AND project_id = project_members.project_id AND id IN (SELECT task_id FROM tasks_assignees WHERE tasks_assignees.project_member_id = project_members.id)) AS all_tasks_count,
+               (SELECT COUNT(*) FROM tasks WHERE archived IS FALSE AND project_id = project_members.project_id AND id IN (SELECT task_id FROM tasks_assignees WHERE tasks_assignees.project_member_id = project_members.id) AND status_id IN (SELECT id FROM task_statuses WHERE category_id = (SELECT id FROM sys_task_status_categories WHERE is_done IS TRUE))) AS completed_tasks_count,
+               EXISTS(SELECT email FROM email_invitations WHERE team_member_id = project_members.team_member_id AND email_invitations.team_id = $2) AS pending_invitation,
+               (SELECT project_access_levels.name FROM project_access_levels WHERE project_access_levels.id = project_members.project_access_level_id) AS access,
+               (SELECT name FROM job_titles WHERE id = tm.job_title_id) AS job_title
+        FROM project_members
+        INNER JOIN team_members tm ON project_members.team_member_id = tm.id
+        LEFT JOIN users u ON tm.user_id = u.id
+        WHERE project_id = $1
+        ${search ? searchFilter : ""}
+      )
+      SELECT
+        (SELECT COUNT(*) FROM filtered_members) AS total,
+        (SELECT COALESCE(ARRAY_TO_JSON(ARRAY_AGG(ROW_TO_JSON(t))), '[]'::JSON)
+           FROM (
+             SELECT * FROM filtered_members
+             ORDER BY ${sortField} ${sortOrder}
+             LIMIT $3 OFFSET $4
+           ) t
+        ) AS data
     `;
-    const result = await db.query(q, [req.params.id, req.user?.team_id ?? null, size, offset]);
+
+    const result = await db.query(q, params);
     const [data] = result.rows;
 
-    for (const member of data?.members.data || []) {
+    for (const member of data?.data || []) {
       member.progress = member.all_tasks_count > 0
         ? ((member.completed_tasks_count / member.all_tasks_count) * 100).toFixed(0) : 0;
     }
 
-    return res.status(200).send(new ServerResponse(true, data?.members || this.paginatedDatasetDefaultStruct));
+    return res.status(200).send(new ServerResponse(true, data || this.paginatedDatasetDefaultStruct));
   }
 
   @HandleExceptions()
@@ -779,7 +772,7 @@ export default class ProjectsController extends WorklenzControllerBase {
     let groupJoin = "";
     let groupByFields = "";
     let groupOrderBy = "";
-    
+
     switch (groupBy) {
       case "client":
         groupField = "COALESCE(projects.client_id::text, 'no-client')";
@@ -888,13 +881,13 @@ export default class ProjectsController extends WorklenzControllerBase {
                                              ELSE p2.updated_at END) AS updated_at
                             FROM projects p2
                             ${groupJoin.replace("projects.", "p2.")}
-                            WHERE p2.team_id = $1 
+                            WHERE p2.team_id = $1
                               AND ${groupField.replace("projects.", "p2.")} = ${groupField}
-                              ${categories.replace("projects.", "p2.")} 
-                              ${statuses.replace("projects.", "p2.")} 
-                              ${isArchived.replace("projects.", "p2.")} 
-                              ${isFavorites.replace("projects.", "p2.")} 
-                              ${filterByMember.replace("projects.", "p2.")} 
+                              ${categories.replace("projects.", "p2.")}
+                              ${statuses.replace("projects.", "p2.")}
+                              ${isArchived.replace("projects.", "p2.")}
+                              ${isFavorites.replace("projects.", "p2.")}
+                              ${filterByMember.replace("projects.", "p2.")}
                               ${searchQuery.replace("projects.", "p2.")}
                             ORDER BY ${innerSortField} ${sortOrder}
                           ) project_data

worklenz-backend/src/controllers/reporting/reporting-allocation-controller-updated.ts

@@ -0,0 +1,179 @@
+// Example of updated getMemberTimeSheets method with timezone support
+// This shows the key changes needed to handle timezones properly
+
+import moment from "moment-timezone";
+import db from "../../config/db";
+import { IWorkLenzRequest } from "../../interfaces/worklenz-request";
+import { IWorkLenzResponse } from "../../interfaces/worklenz-response";
+import { ServerResponse } from "../../models/server-response";
+import { DATE_RANGES } from "../../shared/constants";
+
+export async function getMemberTimeSheets(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+  const archived = req.query.archived === "true";
+  const teams = (req.body.teams || []) as string[];
+  const teamIds = teams.map(id => `'${id}'`).join(",");
+  const projects = (req.body.projects || []) as string[];
+  const projectIds = projects.map(p => `'${p}'`).join(",");
+  const {billable} = req.body;
+  
+  // Get user timezone from request or database
+  const userTimezone = req.body.timezone || await getUserTimezone(req.user?.id || "");
+  
+  if (!teamIds || !projectIds.length)
+    return res.status(200).send(new ServerResponse(true, { users: [], projects: [] }));
+    
+  const { duration, date_range } = req.body;
+  
+  // Calculate date range with timezone support
+  let startDate: moment.Moment;
+  let endDate: moment.Moment;
+  
+  if (date_range && date_range.length === 2) {
+    // Convert user's local dates to their timezone's start/end of day
+    startDate = moment.tz(date_range[0], userTimezone).startOf("day");
+    endDate = moment.tz(date_range[1], userTimezone).endOf("day");
+  } else if (duration === DATE_RANGES.ALL_TIME) {
+    const minDateQuery = `SELECT MIN(COALESCE(start_date, created_at)) as min_date FROM projects WHERE id IN (${projectIds})`;
+    const minDateResult = await db.query(minDateQuery, []);
+    const minDate = minDateResult.rows[0]?.min_date;
+    startDate = minDate ? moment.tz(minDate, userTimezone) : moment.tz("2000-01-01", userTimezone);
+    endDate = moment.tz(userTimezone);
+  } else {
+    // Calculate ranges based on user's timezone
+    const now = moment.tz(userTimezone);
+    
+    switch (duration) {
+      case DATE_RANGES.YESTERDAY:
+        startDate = now.clone().subtract(1, "day").startOf("day");
+        endDate = now.clone().subtract(1, "day").endOf("day");
+        break;
+      case DATE_RANGES.LAST_WEEK:
+        startDate = now.clone().subtract(1, "week").startOf("isoWeek");
+        endDate = now.clone().subtract(1, "week").endOf("isoWeek");
+        break;
+      case DATE_RANGES.LAST_MONTH:
+        startDate = now.clone().subtract(1, "month").startOf("month");
+        endDate = now.clone().subtract(1, "month").endOf("month");
+        break;
+      case DATE_RANGES.LAST_QUARTER:
+        startDate = now.clone().subtract(3, "months").startOf("day");
+        endDate = now.clone().endOf("day");
+        break;
+      default:
+        startDate = now.clone().startOf("day");
+        endDate = now.clone().endOf("day");
+    }
+  }
+  
+  // Convert to UTC for database queries
+  const startUtc = startDate.utc().format("YYYY-MM-DD HH:mm:ss");
+  const endUtc = endDate.utc().format("YYYY-MM-DD HH:mm:ss");
+  
+  // Calculate working days in user's timezone
+  const totalDays = endDate.diff(startDate, "days") + 1;
+  let workingDays = 0;
+  
+  const current = startDate.clone();
+  while (current.isSameOrBefore(endDate, "day")) {
+    if (current.isoWeekday() >= 1 && current.isoWeekday() <= 5) {
+      workingDays++;
+    }
+    current.add(1, "day");
+  }
+  
+  // Updated SQL query with proper timezone handling
+  const billableQuery = buildBillableQuery(billable);
+  const archivedClause = archived ? "" : `AND projects.id NOT IN (SELECT project_id FROM archived_projects WHERE project_id = projects.id AND user_id = '${req.user?.id}')`;
+  
+  const q = `
+    WITH project_hours AS (
+      SELECT 
+        id,
+        COALESCE(hours_per_day, 8) as hours_per_day
+      FROM projects
+      WHERE id IN (${projectIds})
+    ),
+    total_working_hours AS (
+      SELECT 
+        SUM(hours_per_day) * ${workingDays} as total_hours
+      FROM project_hours
+    )
+    SELECT 
+      u.id,
+      u.email,
+      tm.name,
+      tm.color_code,
+      COALESCE(SUM(twl.time_spent), 0) as logged_time,
+      COALESCE(SUM(twl.time_spent), 0) / 3600.0 as value,
+      (SELECT total_hours FROM total_working_hours) as total_working_hours,
+      CASE 
+        WHEN (SELECT total_hours FROM total_working_hours) > 0 
+        THEN ROUND((COALESCE(SUM(twl.time_spent), 0) / 3600.0) / (SELECT total_hours FROM total_working_hours) * 100, 2)
+        ELSE 0 
+      END as utilization_percent,
+      ROUND(COALESCE(SUM(twl.time_spent), 0) / 3600.0, 2) as utilized_hours,
+      ROUND(COALESCE(SUM(twl.time_spent), 0) / 3600.0 - (SELECT total_hours FROM total_working_hours), 2) as over_under_utilized_hours,
+      '${userTimezone}' as user_timezone,
+      '${startDate.format("YYYY-MM-DD")}' as report_start_date,
+      '${endDate.format("YYYY-MM-DD")}' as report_end_date
+    FROM team_members tm
+      LEFT JOIN users u ON tm.user_id = u.id
+      LEFT JOIN task_work_log twl ON twl.user_id = u.id
+      LEFT JOIN tasks t ON twl.task_id = t.id ${billableQuery}
+      LEFT JOIN projects p ON t.project_id = p.id
+    WHERE tm.team_id IN (${teamIds})
+      AND (
+        twl.id IS NULL 
+        OR (
+          p.id IN (${projectIds})
+          AND twl.created_at >= '${startUtc}'::TIMESTAMP 
+          AND twl.created_at <= '${endUtc}'::TIMESTAMP
+          ${archivedClause}
+        )
+      )
+    GROUP BY u.id, u.email, tm.name, tm.color_code
+    ORDER BY logged_time DESC`;
+    
+  const result = await db.query(q, []);
+  
+  // Add timezone context to response
+  const response = {
+    data: result.rows,
+    timezone_info: {
+      user_timezone: userTimezone,
+      report_period: {
+        start: startDate.format("YYYY-MM-DD HH:mm:ss z"),
+        end: endDate.format("YYYY-MM-DD HH:mm:ss z"),
+        working_days: workingDays,
+        total_days: totalDays
+      }
+    }
+  };
+  
+  return res.status(200).send(new ServerResponse(true, response));
+}
+
+async function getUserTimezone(userId: string): Promise<string> {
+  const q = `SELECT tz.name as timezone 
+             FROM users u 
+             JOIN timezones tz ON u.timezone_id = tz.id 
+             WHERE u.id = $1`;
+  const result = await db.query(q, [userId]);
+  return result.rows[0]?.timezone || "UTC";
+}
+
+function buildBillableQuery(billable: { billable: boolean; nonBillable: boolean }): string {
+  if (!billable) return "";
+  
+  const { billable: isBillable, nonBillable } = billable;
+  
+  if (isBillable && nonBillable) {
+    return "";
+  } else if (isBillable) {
+    return " AND tasks.billable IS TRUE";
+  } else if (nonBillable) {
+    return " AND tasks.billable IS FALSE";
+  }
+  
+  return "";
+}

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

@@ -0,0 +1,117 @@
+import WorklenzControllerBase from "../worklenz-controller-base";
+import { IWorkLenzRequest } from "../../interfaces/worklenz-request";
+import db from "../../config/db";
+import moment from "moment-timezone";
+import { DATE_RANGES } from "../../shared/constants";
+
+export default abstract class ReportingControllerBaseWithTimezone extends WorklenzControllerBase {
+  
+  /**
+   * Get the user's timezone from the database or request
+   * @param userId - The user ID
+   * @returns The user's timezone or 'UTC' as default
+   */
+  protected static async getUserTimezone(userId: string): Promise<string> {
+    const q = `SELECT tz.name as timezone 
+               FROM users u 
+               JOIN timezones tz ON u.timezone_id = tz.id 
+               WHERE u.id = $1`;
+    const result = await db.query(q, [userId]);
+    return result.rows[0]?.timezone || 'UTC';
+  }
+
+  /**
+   * Generate date range clause with timezone support
+   * @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')
+   * @returns SQL clause for date filtering
+   */
+  protected static getDateRangeClauseWithTimezone(key: string, dateRange: string[], userTimezone: string) {
+    // For custom date ranges
+    if (dateRange.length === 2) {
+      // Convert dates to user's timezone start/end of day
+      const start = moment.tz(dateRange[0], userTimezone).startOf('day');
+      const end = moment.tz(dateRange[1], userTimezone).endOf('day');
+      
+      // Convert to UTC for database comparison
+      const startUtc = start.utc().format("YYYY-MM-DD HH:mm:ss");
+      const endUtc = end.utc().format("YYYY-MM-DD HH:mm:ss");
+      
+      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 task_work_log.created_at >= '${startUtc}'::TIMESTAMP AND task_work_log.created_at <= '${endUtc}'::TIMESTAMP`;
+    }
+
+    // For predefined ranges, calculate based on user's timezone
+    const now = moment.tz(userTimezone);
+    let startDate, endDate;
+
+    switch (key) {
+      case DATE_RANGES.YESTERDAY:
+        startDate = now.clone().subtract(1, 'day').startOf('day');
+        endDate = now.clone().subtract(1, 'day').endOf('day');
+        break;
+      case DATE_RANGES.LAST_WEEK:
+        startDate = now.clone().subtract(1, 'week').startOf('week');
+        endDate = now.clone().subtract(1, 'week').endOf('week');
+        break;
+      case DATE_RANGES.LAST_MONTH:
+        startDate = now.clone().subtract(1, 'month').startOf('month');
+        endDate = now.clone().subtract(1, 'month').endOf('month');
+        break;
+      case DATE_RANGES.LAST_QUARTER:
+        startDate = now.clone().subtract(3, 'months').startOf('day');
+        endDate = now.clone().endOf('day');
+        break;
+      default:
+        return "";
+    }
+
+    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 "";
+  }
+
+  /**
+   * Format dates for display in user's timezone
+   * @param date - Date to format
+   * @param userTimezone - User's timezone
+   * @param format - Moment format string
+   * @returns Formatted date string
+   */
+  protected static formatDateInTimezone(date: string | Date, userTimezone: string, format: string = "YYYY-MM-DD HH:mm:ss") {
+    return moment.tz(date, userTimezone).format(format);
+  }
+
+  /**
+   * Get working days count between two dates in user's timezone
+   * @param startDate - Start date
+   * @param endDate - End date
+   * @param userTimezone - User's timezone
+   * @returns Number of working days
+   */
+  protected static getWorkingDaysInTimezone(startDate: string, endDate: string, userTimezone: string): number {
+    const start = moment.tz(startDate, userTimezone);
+    const end = moment.tz(endDate, userTimezone);
+    let workingDays = 0;
+    
+    const current = start.clone();
+    while (current.isSameOrBefore(end, 'day')) {
+      // Monday = 1, Friday = 5
+      if (current.isoWeekday() >= 1 && current.isoWeekday() <= 5) {
+        workingDays++;
+      }
+      current.add(1, 'day');
+    }
+    
+    return workingDays;
+  }
+}

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

@@ -6,10 +6,69 @@ import { IWorkLenzResponse } from "../../interfaces/worklenz-response";
 import { ServerResponse } from "../../models/server-response";
 import { DATE_RANGES, TASK_PRIORITY_COLOR_ALPHA } from "../../shared/constants";
 import { formatDuration, getColor, int } from "../../shared/utils";
-import ReportingControllerBase from "./reporting-controller-base";
+import ReportingControllerBaseWithTimezone from "./reporting-controller-base-with-timezone";
 import Excel from "exceljs";
 
-export default class ReportingMembersController extends ReportingControllerBase {
+export default class ReportingMembersController extends ReportingControllerBaseWithTimezone {
+
+  protected static getPercentage(n: number, total: number) {
+    return +(n ? (n / total) * 100 : 0).toFixed();
+  }
+
+  protected static getCurrentTeamId(req: IWorkLenzRequest): string | null {
+    return req.user?.team_id ?? null;
+  }
+
+  public static convertMinutesToHoursAndMinutes(totalMinutes: number) {
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    return `${hours}h ${minutes}m`;
+  }
+
+  public static convertSecondsToHoursAndMinutes(seconds: number) {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    return `${hours}h ${minutes}m`;
+  }
+
+  protected static formatEndDate(endDate: string) {
+    const end = moment(endDate).format("YYYY-MM-DD");
+    const fEndDate = moment(end);
+    return fEndDate;
+  }
+
+  protected static formatCurrentDate() {
+    const current = moment().format("YYYY-MM-DD");
+    const fCurrentDate = moment(current);
+    return fCurrentDate;
+  }
+
+  protected static getDaysLeft(endDate: string): number | null {
+    if (!endDate) return null;
+
+    const fCurrentDate = this.formatCurrentDate();
+    const fEndDate = this.formatEndDate(endDate);
+
+    return fEndDate.diff(fCurrentDate, "days");
+  }
+
+  protected static isOverdue(endDate: string): boolean {
+    if (!endDate) return false;
+
+    const fCurrentDate = this.formatCurrentDate();
+    const fEndDate = this.formatEndDate(endDate);
+
+    return fEndDate.isBefore(fCurrentDate);
+  }
+
+  protected static isToday(endDate: string): boolean {
+    if (!endDate) return false;
+
+    const fCurrentDate = this.formatCurrentDate();
+    const fEndDate = this.formatEndDate(endDate);
+
+    return fEndDate.isSame(fCurrentDate);
+  }
 
   private static async getMembers(
     teamId: string, searchQuery = "",
@@ -487,7 +546,9 @@ export default class ReportingMembersController extends ReportingControllerBase
       dateRange = date_range.split(",");
     }
 
-    const durationClause = ReportingMembersController.getDateRangeClauseMembers(duration as string || DATE_RANGES.LAST_WEEK, dateRange, "twl");
+    // 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 minMaxDateClause = this.getMinMaxDates(duration as string || DATE_RANGES.LAST_WEEK, dateRange, "task_work_log");
     const memberName = (req.query.member_name as string)?.trim() || null;
 
@@ -1038,7 +1099,9 @@ export default class ReportingMembersController extends ReportingControllerBase
   public static async getMemberTimelogs(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
     const { team_member_id, team_id, duration, date_range, archived, billable } = req.body;
 
-    const durationClause = ReportingMembersController.getDateRangeClauseMembers(duration || DATE_RANGES.LAST_WEEK, date_range, "twl");
+    // 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 minMaxDateClause = this.getMinMaxDates(duration || DATE_RANGES.LAST_WEEK, date_range, "task_work_log");
 
     const billableQuery = this.buildBillableQuery(billable);
@@ -1230,8 +1293,8 @@ public static async getSingleMemberProjects(req: IWorkLenzRequest, res: IWorkLen
     row.actual_time = int(row.actual_time);
     row.estimated_time_string = this.convertMinutesToHoursAndMinutes(int(row.estimated_time));
     row.actual_time_string = this.convertSecondsToHoursAndMinutes(int(row.actual_time));
-    row.days_left = ReportingControllerBase.getDaysLeft(row.end_date);
-    row.is_overdue = ReportingControllerBase.isOverdue(row.end_date);
+    row.days_left = this.getDaysLeft(row.end_date);
+    row.is_overdue = this.isOverdue(row.end_date);
     if (row.days_left && row.is_overdue) {
       row.days_left = row.days_left.toString().replace(/-/g, "");
     }

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

@@ -0,0 +1,167 @@
+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));
+  }
+}

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,56 @@
+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`));
+    }
+
+    // At least one of answer_text or answer_json should be provided
+    if (!answer.answer_text && !answer.answer_json) {
+      return res.status(200).send(new ServerResponse(false, null, `Answer ${i + 1}: Either answer_text or answer_json is required`));
+    }
+
+    // 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/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/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,17 @@
+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));
+
+// 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-frontend/public/locales/alb/account-setup.json

@@ -1,31 +1,191 @@
 {
   "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",
+  "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",
+  "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/kanban-board.json

@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Po",
   "deleteConfirmationCancel": "Anulo",
 
+  "deleteTaskTitle": "Fshi Detyrën",
+  "deleteTaskContent": "Jeni i sigurt që doni të fshini këtë detyrë? Kjo veprim nuk mund të zhbëhet.",
+  "deleteTaskConfirm": "Fshi",
+  "deleteTaskCancel": "Anulo",
+
+  "deleteStatusTitle": "Fshi Statusin",
+  "deleteStatusContent": "Jeni i sigurt që doni të fshini këtë status? Kjo veprim nuk mund të zhbëhet.",
+
+  "deletePhaseTitle": "Fshi Fazen",
+  "deletePhaseContent": "Jeni i sigurt që doni të fshini këtë fazë? Kjo veprim nuk mund të zhbëhet.",
+
   "dueDate": "Data e përfundimit",
   "cancel": "Anulo",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Pa datë përfundimi",
   "save": "Ruaj",
   "clear": "Pastro",
-  "nextWeek": "Javën e ardhshme"
+  "nextWeek": "Javën e ardhshme",
+  "noSubtasks": "Pa nëndetyra",
+  "showSubtasks": "Shfaq nëndetyrat",
+  "hideSubtasks": "Fshih nëndetyrat",
+  
+  "errorLoadingTasks": "Gabim gjatë ngarkimit të detyrave",
+  "noTasksFound": "Nuk u gjetën detyra",
+  "loadingFilters": "Duke ngarkuar filtra...",
+  "failedToUpdateColumnOrder": "Dështoi përditësimi i rendit të kolonave",
+  "failedToUpdatePhaseOrder": "Dështoi përditësimi i rendit të fazave",
+  "pleaseTryAgain": "Ju lutemi provoni përsëri",
+  "taskNotCompleted": "Detyra nuk është përfunduar",
+  "completeTaskDependencies": "Ju lutemi përfundoni varësitë e detyrës para se të vazhdoni"
 }

worklenz-frontend/public/locales/alb/project-view-members.json

@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Hiq nga projekti",
   "memberCount": "Anëtar",
   "membersCountPlural": "Anëtarë",
-  "emptyText": "Nuk ka bashkëngjitje në projekt."
+  "emptyText": "Nuk ka bashkëngjitje në projekt.",
+  "searchPlaceholder": "Kërko anëtarë"
 }

worklenz-frontend/public/locales/alb/project-view/project-member-drawer.json

@@ -3,5 +3,9 @@
   "searchLabel": "Shtoni anëtarë duke shkruar emrin ose email-in e tyre",
   "searchPlaceholder": "Shkruani emrin ose email-in",
   "inviteAsAMember": "Fto si anëtar",
-  "inviteNewMemberByEmail": "Fto anëtar të ri me email"
+  "inviteNewMemberByEmail": "Fto anëtar të ri me email",
+  "members": "Anëtarë",
+  "copyProjectLink": "Kopjo lidhjen e projektit",
+  "inviteMember": "Fto anëtar",
+  "alsoInviteToProject": "Fto edhe në projekt"
 }

worklenz-frontend/public/locales/alb/settings/team-members.json

@@ -28,7 +28,7 @@
   "jobTitleLabel": "Titulli i Punës",
   "jobTitlePlaceholder": "Zgjidh ose kërko titull pune (Opsionale)",
   "memberAccessLabel": "Niveli i Qasjes",
-  "addToTeamButton": "Shto Anëtar në Ekip",
+  "addToTeamButton": "Dërgo ftesën",
   "updateButton": "Ruaj Ndryshimet",
   "resendInvitationButton": "Dërgo Përsëri Email-in e Ftesës",
   "invitationSentSuccessMessage": "Ftesa për ekip u dërgua me sukses!",
@@ -43,5 +43,6 @@
   "updatedText": "Përditësuar",
   "noResultFound": "Shkruani një adresë email dhe shtypni Enter...",
   "jobTitlesFetchError": "Dështoi marrja e titujve të punës",
-  "invitationResent": "Ftesa u dërgua sërish me sukses!"
+  "invitationResent": "Ftesa u dërgua sërish me sukses!",
+  "copyTeamLink": "Kopjo lidhjen e ekipit"
 }

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?",
@@ -27,5 +48,164 @@
   "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",
+  "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/kanban-board.json

@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Ja",
   "deleteConfirmationCancel": "Abbrechen",
 
+  "deleteTaskTitle": "Aufgabe löschen",
+  "deleteTaskContent": "Sind Sie sicher, dass Sie diese Aufgabe löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+  "deleteTaskConfirm": "Löschen",
+  "deleteTaskCancel": "Abbrechen",
+
+  "deleteStatusTitle": "Status löschen",
+  "deleteStatusContent": "Sind Sie sicher, dass Sie diesen Status löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+
+  "deletePhaseTitle": "Phase löschen",
+  "deletePhaseContent": "Sind Sie sicher, dass Sie diese Phase löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+
   "dueDate": "Fälligkeitsdatum",
   "cancel": "Abbrechen",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Kein Fälligkeitsdatum",
   "save": "Speichern",
   "clear": "Löschen",
-  "nextWeek": "Nächste Woche"
+  "nextWeek": "Nächste Woche",
+  "noSubtasks": "Keine Unteraufgaben",
+  "showSubtasks": "Unteraufgaben anzeigen",
+  "hideSubtasks": "Unteraufgaben ausblenden",
+  
+  "errorLoadingTasks": "Fehler beim Laden der Aufgaben",
+  "noTasksFound": "Keine Aufgaben gefunden",
+  "loadingFilters": "Filter werden geladen...",
+  "failedToUpdateColumnOrder": "Fehler beim Aktualisieren der Spaltenreihenfolge",
+  "failedToUpdatePhaseOrder": "Fehler beim Aktualisieren der Phasenreihenfolge",
+  "pleaseTryAgain": "Bitte versuchen Sie es erneut",
+  "taskNotCompleted": "Aufgabe ist nicht abgeschlossen",
+  "completeTaskDependencies": "Bitte schließen Sie die Aufgabenabhängigkeiten ab, bevor Sie fortfahren"
 }

worklenz-frontend/public/locales/de/project-view-members.json

@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Aus Projekt entfernen",
   "memberCount": "Mitglied",
   "membersCountPlural": "Mitglieder",
-  "emptyText": "Es gibt keine Anhänge in diesem Projekt."
+  "emptyText": "Es gibt keine Anhänge in diesem Projekt.",
+  "searchPlaceholder": "Mitglieder suchen"
 }

worklenz-frontend/public/locales/de/project-view/project-member-drawer.json

@@ -3,5 +3,9 @@
   "searchLabel": "Mitglieder hinzufügen durch Eingabe von Name oder E-Mail",
   "searchPlaceholder": "Name oder E-Mail eingeben",
   "inviteAsAMember": "Als Mitglied einladen",
-  "inviteNewMemberByEmail": "Neues Mitglied per E-Mail einladen"
+  "inviteNewMemberByEmail": "Neues Mitglied per E-Mail einladen",
+  "members": "Mitglieder",
+  "copyProjectLink": "Projektlink kopieren",
+  "inviteMember": "Mitglied einladen",
+  "alsoInviteToProject": "Auch zum Projekt einladen"
 }

worklenz-frontend/public/locales/de/settings/team-members.json

@@ -28,7 +28,7 @@
   "jobTitleLabel": "Jobtitel",
   "jobTitlePlaceholder": "Jobtitel auswählen oder suchen (optional)",
   "memberAccessLabel": "Zugriffslevel",
-  "addToTeamButton": "Mitglied zum Team hinzufügen",
+  "addToTeamButton": "Einladung senden",
   "updateButton": "Änderungen speichern",
   "resendInvitationButton": "Einladungs-E-Mail erneut senden",
   "invitationSentSuccessMessage": "Team-Einladung erfolgreich versendet!",
@@ -43,5 +43,6 @@
   "updatedText": "Aktualisiert",
   "noResultFound": "Geben Sie eine E-Mail-Adresse ein und drücken Sie Enter...",
   "jobTitlesFetchError": "Fehler beim Abrufen der Jobtitel",
-  "invitationResent": "Einladung erfolgreich erneut gesendet!"
+  "invitationResent": "Einladung erfolgreich erneut gesendet!",
+  "copyTeamLink": "Team-Link kopieren"
 }

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",
 
@@ -27,5 +47,163 @@
   "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",
+  "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/kanban-board.json

@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Yes",
   "deleteConfirmationCancel": "Cancel",
 
+  "deleteTaskTitle": "Delete Task",
+  "deleteTaskContent": "Are you sure you want to delete this task? This action cannot be undone.",
+  "deleteTaskConfirm": "Delete",
+  "deleteTaskCancel": "Cancel",
+
+  "deleteStatusTitle": "Delete Status",
+  "deleteStatusContent": "Are you sure you want to delete this status? This action cannot be undone.",
+
+  "deletePhaseTitle": "Delete Phase",
+  "deletePhaseContent": "Are you sure you want to delete this phase? This action cannot be undone.",
+
   "dueDate": "Due date",
   "cancel": "Cancel",
 
@@ -29,5 +40,14 @@
   "nextWeek": "Next week",
   "noSubtasks": "No subtasks",
   "showSubtasks": "Show subtasks",
-  "hideSubtasks": "Hide subtasks"
+  "hideSubtasks": "Hide subtasks",
+  
+  "errorLoadingTasks": "Error loading tasks",
+  "noTasksFound": "No tasks found",
+  "loadingFilters": "Loading filters...",
+  "failedToUpdateColumnOrder": "Failed to update column order",
+  "failedToUpdatePhaseOrder": "Failed to update phase order",
+  "pleaseTryAgain": "Please try again",
+  "taskNotCompleted": "Task is not completed",
+  "completeTaskDependencies": "Please complete the task dependencies before proceeding"
 }

worklenz-frontend/public/locales/en/project-view-members.json

@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Remove from project",
   "memberCount": "Member",
   "membersCountPlural": "Members",
-  "emptyText": "There are no attachments in the project."
+  "emptyText": "There are no attachments in the project.",
+  "searchPlaceholder": "Search members"
 }

worklenz-frontend/public/locales/en/project-view/project-member-drawer.json

@@ -1,7 +1,11 @@
 {
-  "title": "Project Members",
+  "title": "Share Project",
   "searchLabel": "Add members by adding their name or email",
   "searchPlaceholder": "Type name or email",
   "inviteAsAMember": "Invite as a member",
-  "inviteNewMemberByEmail": "Invite new member by email"
+  "inviteNewMemberByEmail": "Invite new member by email",
+  "members": "Members",
+  "copyProjectLink": "Copy project link",
+  "inviteMember": "Invite Member",
+  "alsoInviteToProject": "Also invite to project"
 }

worklenz-frontend/public/locales/en/settings/team-members.json

@@ -19,7 +19,7 @@
   "cancelText": "No, cancel",
   "deactivatedText": "(Currently deactivated)",
   "pendingInvitationText": "(Invitation pending)",
-  "addMemberDrawerTitle": "Add New Team Member",
+  "addMemberDrawerTitle": "Invite Team Members",
   "updateMemberDrawerTitle": "Update Team Member",
   "addMemberEmailHint": "Members will be added to the team regardless of invitation acceptance status",
   "memberEmailLabel": "Email(s)",
@@ -28,7 +28,7 @@
   "jobTitleLabel": "Job Title",
   "jobTitlePlaceholder": "Select or search job title (Optional)",
   "memberAccessLabel": "Access Level",
-  "addToTeamButton": "Add Member to Team",
+  "addToTeamButton": "Send Invitation",
   "updateButton": "Save Changes",
   "resendInvitationButton": "Resend Invitation Email",
   "invitationSentSuccessMessage": "Team invitation sent successfully!",
@@ -43,5 +43,6 @@
   "updatedText": "Updated",
   "noResultFound": "Type an email address and hit enter...",
   "jobTitlesFetchError": "Failed to fetch job titles",
-  "invitationResent": "Invitation resent successfully!"
+  "invitationResent": "Invitation resent successfully!",
+  "copyTeamLink": "Copy team link"
 }

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?",
@@ -28,5 +49,164 @@
   "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",
+  "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/kanban-board.json

@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Sí",
   "deleteConfirmationCancel": "Cancelar",
 
+  "deleteTaskTitle": "Eliminar tarea",
+  "deleteTaskContent": "¿Estás seguro de que deseas eliminar esta tarea? Esta acción no se puede deshacer.",
+  "deleteTaskConfirm": "Eliminar",
+  "deleteTaskCancel": "Cancelar",
+
+  "deleteStatusTitle": "Eliminar estado",
+  "deleteStatusContent": "¿Estás seguro de que deseas eliminar este estado? Esta acción no se puede deshacer.",
+
+  "deletePhaseTitle": "Eliminar fase",
+  "deletePhaseContent": "¿Estás seguro de que deseas eliminar esta fase? Esta acción no se puede deshacer.",
+
   "dueDate": "Fecha de vencimiento",
   "cancel": "Cancelar",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Sin fecha de vencimiento",
   "save": "Guardar",
   "clear": "Limpiar",
-  "nextWeek": "Próxima semana"
+  "nextWeek": "Próxima semana",
+  "noSubtasks": "Sin subtareas",
+  "showSubtasks": "Mostrar subtareas",
+  "hideSubtasks": "Ocultar subtareas",
+  
+  "errorLoadingTasks": "Error al cargar tareas",
+  "noTasksFound": "No se encontraron tareas",
+  "loadingFilters": "Cargando filtros...",
+  "failedToUpdateColumnOrder": "Error al actualizar el orden de las columnas",
+  "failedToUpdatePhaseOrder": "Error al actualizar el orden de las fases",
+  "pleaseTryAgain": "Por favor, inténtalo de nuevo",
+  "taskNotCompleted": "La tarea no está completada",
+  "completeTaskDependencies": "Por favor, completa las dependencias de la tarea antes de continuar"
 }

worklenz-frontend/public/locales/es/project-view-members.json

@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Eliminar del proyecto",
   "memberCount": "Miembro",
   "membersCountPlural": "Miembros",
-  "emptyText": "No hay archivos adjuntos en el proyecto."
+  "emptyText": "No hay archivos adjuntos en el proyecto.",
+  "searchPlaceholder": "Buscar miembros"
 }

worklenz-frontend/public/locales/es/project-view/project-member-drawer.json

@@ -3,5 +3,9 @@
   "searchLabel": "Agregar miembros ingresando su nombre o correo electrónico",
   "searchPlaceholder": "Escriba nombre o correo electrónico",
   "inviteAsAMember": "Invitar como miembro",
-  "inviteNewMemberByEmail": "Invitar nuevo miembro por correo electrónico"
+  "inviteNewMemberByEmail": "Invitar nuevo miembro por correo electrónico",
+  "members": "Miembros",
+  "copyProjectLink": "Copiar enlace del proyecto",
+  "inviteMember": "Invitar miembro",
+  "alsoInviteToProject": "También invitar al proyecto"
 }

worklenz-frontend/public/locales/es/settings/team-members.json

@@ -28,7 +28,7 @@
   "jobTitleLabel": "Cargo",
   "jobTitlePlaceholder": "Seleccione o busque cargo (Opcional)",
   "memberAccessLabel": "Nivel de acceso",
-  "addToTeamButton": "Agregar miembro al equipo",
+  "addToTeamButton": "Enviar invitación",
   "updateButton": "Guardar cambios",
   "resendInvitationButton": "Reenviar correo de invitación",
   "invitationSentSuccessMessage": "¡Invitación al equipo enviada exitosamente!",
@@ -43,5 +43,6 @@
   "updatedText": "Actualizado",
   "noResultFound": "Escriba una dirección de correo electrónico y presione enter...",
   "jobTitlesFetchError": "Error al obtener los cargos",
-  "invitationResent": "¡Invitación reenviada exitosamente!"
+  "invitationResent": "¡Invitación reenviada exitosamente!",
+  "copyTeamLink": "Copiar enlace del equipo"
 }

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?",
@@ -28,5 +49,164 @@
   "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",
+  "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/kanban-board.json

@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Sim",
   "deleteConfirmationCancel": "Cancelar",
 
+  "deleteTaskTitle": "Excluir Tarefa",
+  "deleteTaskContent": "Tem certeza de que deseja excluir esta tarefa? Esta ação não pode ser desfeita.",
+  "deleteTaskConfirm": "Excluir",
+  "deleteTaskCancel": "Cancelar",
+
+  "deleteStatusTitle": "Excluir Status",
+  "deleteStatusContent": "Tem certeza de que deseja excluir este status? Esta ação não pode ser desfeita.",
+
+  "deletePhaseTitle": "Excluir Fase",
+  "deletePhaseContent": "Tem certeza de que deseja excluir esta fase? Esta ação não pode ser desfeita.",
+
   "dueDate": "Data de vencimento",
   "cancel": "Cancelar",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Sem data de vencimento",
   "save": "Salvar",
   "clear": "Limpar",
-  "nextWeek": "Próxima semana"
+  "nextWeek": "Próxima semana",
+  "noSubtasks": "Sem subtarefas",
+  "showSubtasks": "Mostrar subtarefas",
+  "hideSubtasks": "Ocultar subtarefas",
+  
+  "errorLoadingTasks": "Erro ao carregar tarefas",
+  "noTasksFound": "Nenhuma tarefa encontrada",
+  "loadingFilters": "Carregando filtros...",
+  "failedToUpdateColumnOrder": "Falha ao atualizar a ordem das colunas",
+  "failedToUpdatePhaseOrder": "Falha ao atualizar a ordem das fases",
+  "pleaseTryAgain": "Por favor, tente novamente",
+  "taskNotCompleted": "Tarefa não está concluída",
+  "completeTaskDependencies": "Por favor, complete as dependências da tarefa antes de prosseguir"
 }

worklenz-frontend/public/locales/pt/project-view-members.json

@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Remover do projeto",
   "memberCount": "Membro",
   "membersCountPlural": "Membros",
-  "emptyText": "Não há anexos no projeto."
+  "emptyText": "Não há anexos no projeto.",
+  "searchPlaceholder": "Pesquisar membros"
 }

worklenz-frontend/public/locales/pt/project-view/project-member-drawer.json

@@ -3,5 +3,9 @@
   "searchLabel": "Adicionar membros inserindo nome ou e-mail",
   "searchPlaceholder": "Digite nome ou e-mail",
   "inviteAsAMember": "Convidar como membro",
-  "inviteNewMemberByEmail": "Convidar novo membro por e-mail"
+  "inviteNewMemberByEmail": "Convidar novo membro por e-mail",
+  "members": "Membros",
+  "copyProjectLink": "Copiar link do projeto",
+  "inviteMember": "Convidar membro",
+  "alsoInviteToProject": "Convidar também para o projeto"
 }

worklenz-frontend/public/locales/pt/settings/team-members.json

@@ -28,7 +28,7 @@
   "jobTitleLabel": "Título do Emprego",
   "jobTitlePlaceholder": "Selecione ou pesquise o título do emprego (Opcional)",
   "memberAccessLabel": "Nível de Acesso",
-  "addToTeamButton": "Adicionar Membro à Equipe",
+  "addToTeamButton": "Enviar convite",
   "updateButton": "Salvar Alterações",
   "resendInvitationButton": "Redirecionar Email de Convite",
   "invitationSentSuccessMessage": "Convite para a equipe enviado com sucesso!",
@@ -43,5 +43,6 @@
   "updatedText": "Atualizado",
   "noResultFound": "Digite um endereço de email e pressione enter...",
   "jobTitlesFetchError": "Falha ao buscar cargos",
-  "invitationResent": "Convite reenviado com sucesso!"
+  "invitationResent": "Convite reenviado com sucesso!",
+  "copyTeamLink": "Copiar link da equipe"
 }

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": "或",
@@ -22,6 +46,165 @@
   "skipForNow": "暂时跳过",
   "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 吧",
+  "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/kanban-board.json

@@ -15,5 +15,32 @@
   "assignToMe": "分配给我",
   "archive": "归档",
   "newTaskNamePlaceholder": "写一个任务名称",
-  "newSubtaskNamePlaceholder": "写一个子任务名称"
+  "newSubtaskNamePlaceholder": "写一个子任务名称",
+  "deleteTaskTitle": "删除任务",
+  "deleteTaskContent": "您确定要删除此任务吗？此操作无法撤销。",
+  "deleteTaskConfirm": "删除",
+  "deleteTaskCancel": "取消",
+  "deleteStatusTitle": "删除状态",
+  "deleteStatusContent": "您确定要删除此状态吗？此操作无法撤销。",
+  "deletePhaseTitle": "删除阶段",
+  "deletePhaseContent": "您确定要删除此阶段吗？此操作无法撤销。",
+  "untitledSection": "未命名部分",
+  "unmapped": "未映射",
+  "clickToChangeDate": "点击更改日期",
+  "noDueDate": "无截止日期",
+  "save": "保存",
+  "clear": "清除",
+  "nextWeek": "下周",
+  "noSubtasks": "无子任务",
+  "showSubtasks": "显示子任务",
+  "hideSubtasks": "隐藏子任务",
+  
+  "errorLoadingTasks": "加载任务时出错",
+  "noTasksFound": "未找到任务",
+  "loadingFilters": "正在加载过滤器...",
+  "failedToUpdateColumnOrder": "更新列顺序失败",
+  "failedToUpdatePhaseOrder": "更新阶段顺序失败",
+  "pleaseTryAgain": "请重试",
+  "taskNotCompleted": "任务未完成",
+  "completeTaskDependencies": "请先完成任务依赖项，然后再继续"
 }

worklenz-frontend/public/locales/zh/project-view/project-member-drawer.json

@@ -3,5 +3,9 @@
     "searchLabel": "通过添加名称或电子邮件添加成员",
     "searchPlaceholder": "输入名称或电子邮件",
     "inviteAsAMember": "邀请为成员",
-    "inviteNewMemberByEmail": "通过电子邮件邀请新成员"
+    "inviteNewMemberByEmail": "通过电子邮件邀请新成员",
+    "members": "成员",
+    "copyProjectLink": "复制项目链接",
+    "inviteMember": "邀请成员",
+    "alsoInviteToProject": "也邀请到项目"
 }

worklenz-frontend/public/locales/zh/settings/team-members.json

@@ -28,7 +28,7 @@
   "jobTitleLabel": "职位",
   "jobTitlePlaceholder": "选择或搜索职位（可选）",
   "memberAccessLabel": "访问级别",
-  "addToTeamButton": "将成员添加到团队",
+  "addToTeamButton": "发送邀请",
   "updateButton": "保存更改",
   "resendInvitationButton": "重新发送邀请邮件",
   "invitationSentSuccessMessage": "团队邀请已成功发送！",
@@ -43,5 +43,6 @@
   "updatedText": "已更新",
   "noResultFound": "输入电子邮件地址并按回车键...",
   "jobTitlesFetchError": "获取职位失败",
-  "invitationResent": "邀请重新发送成功！"
+  "invitationResent": "邀请重新发送成功！",
+  "copyTeamLink": "复制团队链接"
 }

worklenz-frontend/sonar-project.properties

@@ -0,0 +1,55 @@
+# SonarQube Configuration for Worklenz Frontend
+sonar.projectKey=worklenz-frontend
+sonar.projectName=Worklenz Frontend
+sonar.projectVersion=1.0.0
+
+# Source code configuration
+sonar.sources=src
+sonar.tests=src
+sonar.test.inclusions=**/*.test.ts,**/*.test.tsx,**/*.spec.ts,**/*.spec.tsx
+
+# Language-specific configurations
+sonar.typescript.node=node
+sonar.typescript.lcov.reportPaths=coverage/lcov.info
+sonar.javascript.lcov.reportPaths=coverage/lcov.info
+
+# Exclusions
+sonar.exclusions=**/node_modules/**,\
+  **/build/**,\
+  **/dist/**,\
+  **/public/**,\
+  **/*.d.ts,\
+  src/react-app-env.d.ts,\
+  src/vite-env.d.ts,\
+  **/*.config.js,\
+  **/*.config.ts,\
+  **/*.config.mts,\
+  scripts/**
+
+# Test exclusions from coverage
+sonar.coverage.exclusions=**/*.test.ts,\
+  **/*.test.tsx,\
+  **/*.spec.ts,\
+  **/*.spec.tsx,\
+  **/*.config.*,\
+  src/index.tsx,\
+  src/reportWebVitals.ts,\
+  src/serviceWorkerRegistration.ts,\
+  src/setupTests.ts
+
+# Code quality rules
+sonar.qualitygate.wait=true
+
+# File encoding
+sonar.sourceEncoding=UTF-8
+
+# JavaScript/TypeScript specific settings
+sonar.javascript.environments=browser,node,jest
+sonar.typescript.tsconfigPath=tsconfig.json
+
+# ESLint configuration (if available)
+# sonar.eslint.reportPaths=eslint-report.json
+
+# Additional settings for React projects
+sonar.javascript.file.suffixes=.js,.jsx
+sonar.typescript.file.suffixes=.ts,.tsx

worklenz-frontend/src/api/reporting/reporting.timesheet.api.service.updated.ts

@@ -0,0 +1,92 @@
+import { API_BASE_URL } from '@/shared/constants';
+import { toQueryString } from '@/utils/toQueryString';
+import apiClient from '../api-client';
+import { IServerResponse } from '@/types/common.types';
+import { IAllocationViewModel } from '@/types/reporting/reporting-allocation.types';
+import {
+  IProjectLogsBreakdown,
+  IRPTTimeMember,
+  IRPTTimeProject,
+  ITimeLogBreakdownReq,
+} from '@/types/reporting/reporting.types';
+
+const rootUrl = `${API_BASE_URL}/reporting`;
+
+// Helper function to get user's timezone
+const getUserTimezone = () => {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+};
+
+export const reportingTimesheetApiService = {
+  getTimeSheetData: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IAllocationViewModel>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/allocation/${q}`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getAllocationProjects: async (body = {}) => {
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/allocation/allocation-projects`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getProjectTimeSheets: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeProject[]>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/time-reports/projects/${q}`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getMemberTimeSheets: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeMember[]>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/time-reports/members/${q}`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getProjectTimeLogs: async (
+    body: ITimeLogBreakdownReq
+  ): Promise<IServerResponse<IProjectLogsBreakdown[]>> => {
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/project-timelogs`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getProjectEstimatedVsActual: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeProject[]>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/time-reports/estimated-vs-actual${q}`, bodyWithTimezone);
+    return response.data;
+  },
+};

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

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

worklenz-frontend/src/app/routes/main-routes.tsx

@@ -17,6 +17,7 @@ const ProjectTemplateEditView = lazy(
 const LicenseExpired = lazy(() => import('@/pages/license-expired/license-expired'));
 const ProjectView = lazy(() => import('@/pages/projects/projectView/project-view'));
 const Unauthorized = lazy(() => import('@/pages/unauthorized/unauthorized'));
+const GanttDemoPage = lazy(() => import('@/pages/GanttDemoPage'));
 
 // Define AdminGuard component with defensive programming
 const AdminGuard = ({ children }: { children: React.ReactNode }) => {
@@ -106,6 +107,14 @@ const mainRoutes: RouteObject[] = [
           </Suspense>
         ),
       },
+      {
+        path: 'gantt-demo',
+        element: (
+          <Suspense fallback={<SuspenseFallback />}>
+            <GanttDemoPage />
+          </Suspense>
+        ),
+      },
       ...settingsRoutes,
       ...adminCenterRoutes,
     ],

worklenz-frontend/src/components/AssigneeSelector.tsx

@@ -11,8 +11,10 @@ import { useAuthService } from '@/hooks/useAuth';
 import { Avatar, Button, Checkbox } from '@/components';
 import { sortTeamMembers } from '@/utils/sort-team-members';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
+import { setIsFromAssigner, toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
 import { updateEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import useIsProjectManager from '@/hooks/useIsProjectManager';
+import { useAuthStatus } from '@/hooks/useAuthStatus';
 
 interface AssigneeSelectorProps {
   task: IProjectTask;
@@ -21,9 +23,9 @@ interface AssigneeSelectorProps {
   kanbanMode?: boolean;
 }
 
-const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({ 
-  task, 
-  groupId = null, 
+const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
+  task,
+  groupId = null,
   isDarkMode = false,
   kanbanMode = false
 }) => {
@@ -42,6 +44,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const currentSession = useAuthService().getCurrentSession();
   const { socket } = useSocket();
   const dispatch = useAppDispatch();
+  const { isAdmin } = useAuthStatus();
+  const isProjectManager = useIsProjectManager();
 
   const filteredMembers = useMemo(() => {
     return teamMembers?.data?.filter(member =>
@@ -64,7 +68,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
-          buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
+        buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
         setIsOpen(false);
       }
     };
@@ -74,10 +78,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         // Check if the button is still visible in the viewport
         if (buttonRef.current) {
           const rect = buttonRef.current.getBoundingClientRect();
-          const isVisible = rect.top >= 0 && rect.left >= 0 && 
-                           rect.bottom <= window.innerHeight && 
-                           rect.right <= window.innerWidth;
-          
+          const isVisible = rect.top >= 0 && rect.left >= 0 &&
+            rect.bottom <= window.innerHeight &&
+            rect.right <= window.innerWidth;
+
           if (isVisible) {
             updateDropdownPosition();
           } else {
@@ -98,7 +102,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
       document.addEventListener('mousedown', handleClickOutside);
       window.addEventListener('scroll', handleScroll, true);
       window.addEventListener('resize', handleResize);
-      
+
       return () => {
         document.removeEventListener('mousedown', handleClickOutside);
         window.removeEventListener('scroll', handleScroll, true);
@@ -113,10 +117,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const handleDropdownToggle = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    
+
     if (!isOpen) {
       updateDropdownPosition();
-      
+
       // Prepare team members data when opening
       const assignees = task?.assignees?.map(assignee => assignee.team_member_id);
       const membersData = (members?.data || []).map(member => ({
@@ -125,7 +129,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
       }));
       const sortedMembers = sortTeamMembers(membersData);
       setTeamMembers({ data: sortedMembers });
-      
+
       setIsOpen(true);
       // Focus search input after opening
       setTimeout(() => {
@@ -160,8 +164,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
     // Update local team members state for dropdown UI
     setTeamMembers(prev => ({
       ...prev,
-      data: (prev.data || []).map(member => 
-        member.id === memberId 
+      data: (prev.data || []).map(member =>
+        member.id === memberId
           ? { ...member, selected: checked }
           : member
       )
@@ -198,14 +202,15 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const checkMemberSelected = (memberId: string) => {
     if (!memberId) return false;
     // Use optimistic assignees if available, otherwise fall back to task assignees
-    const assignees = optimisticAssignees.length > 0 
-      ? optimisticAssignees 
+    const assignees = optimisticAssignees.length > 0
+      ? optimisticAssignees
       : task?.assignees?.map(assignee => assignee.team_member_id) || [];
     return assignees.includes(memberId);
   };
 
   const handleInviteProjectMemberDrawer = () => {
     setIsOpen(false); // Close the assignee dropdown first
+    dispatch(setIsFromAssigner(true));
     dispatch(toggleProjectMemberDrawer()); // Then open the invite drawer
   };
 
@@ -217,12 +222,12 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         className={`
           w-5 h-5 rounded-full border border-dashed flex items-center justify-center
           transition-colors duration-200
-          ${isOpen 
-            ? isDarkMode 
-              ? 'border-blue-500 bg-blue-900/20 text-blue-400' 
+          ${isOpen
+            ? isDarkMode
+              ? 'border-blue-500 bg-blue-900/20 text-blue-400'
               : 'border-blue-500 bg-blue-50 text-blue-600'
-            : isDarkMode 
-              ? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400' 
+            : isDarkMode
+              ? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400'
               : 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
           }
         `}
@@ -236,8 +241,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
           onClick={e => e.stopPropagation()}
           className={`
             fixed z-[99999] w-72 rounded-md shadow-lg border
-            ${isDarkMode 
-              ? 'bg-gray-800 border-gray-600' 
+            ${isDarkMode
+              ? 'bg-gray-800 border-gray-600'
               : 'bg-white border-gray-200'
             }
           `}
@@ -273,10 +278,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                   key={member.id}
                   className={`
                     flex items-center gap-2 p-2 cursor-pointer transition-colors
-                    ${member.pending_invitation 
-                      ? 'opacity-50 cursor-not-allowed' 
-                      : isDarkMode 
-                        ? 'hover:bg-gray-700' 
+                    ${member.pending_invitation
+                      ? 'opacity-50 cursor-not-allowed'
+                      : isDarkMode
+                        ? 'hover:bg-gray-700'
                         : 'hover:bg-gray-50'
                     }
                   `}
@@ -301,23 +306,21 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                       />
                     </span>
                     {pendingChanges.has(member.id || '') && (
-                      <div className={`absolute inset-0 flex items-center justify-center ${
-                        isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
-                      }`}>
-                        <div className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${
-                          isDarkMode ? 'border-blue-400' : 'border-blue-600'
-                        }`} />
+                      <div className={`absolute inset-0 flex items-center justify-center ${isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
+                        }`}>
+                        <div className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${isDarkMode ? 'border-blue-400' : 'border-blue-600'
+                          }`} />
                       </div>
                     )}
                   </div>
-                  
+
                   <Avatar
                     src={member.avatar_url}
                     name={member.name || ''}
                     size={24}
                     isDarkMode={isDarkMode}
                   />
-                  
+
                   <div className="flex-1 min-w-0">
                     <div className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>
                       {member.name}
@@ -339,22 +342,26 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
           </div>
 
           {/* Footer */}
-          <div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-200'}`}>
-            <button
-              className={`
-                w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
-                transition-colors
-                ${isDarkMode
-                  ? 'text-blue-400 hover:bg-gray-700'
-                  : 'text-blue-600 hover:bg-blue-50'
-                }
-              `}
-              onClick={handleInviteProjectMemberDrawer}
-            >
-              <UserAddOutlined />
-              Invite member
-            </button>
-          </div>
+
+          {(isAdmin || isProjectManager) && (
+            <div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-200'}`}>
+              <button
+                className={`
+                  w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
+                  transition-colors
+                  ${isDarkMode
+                    ? 'text-blue-400 hover:bg-gray-700'
+                    : 'text-blue-600 hover:bg-blue-50'
+                  }
+                `}
+                onClick={handleInviteProjectMemberDrawer}
+              >
+                <UserAddOutlined />
+                Invite member
+              </button>
+            </div>
+          )}
+
         </div>,
         document.body
       )}

worklenz-frontend/src/components/PinRouteToNavbarButton.tsx

@@ -3,7 +3,7 @@ import { getJSONFromLocalStorage, saveJSONToLocalStorage } from '../utils/localS
 import { Button, ConfigProvider, Tooltip } from '@/shared/antd-imports';
 import { PushpinFilled, PushpinOutlined } from '@/shared/antd-imports';
 import { colors } from '../styles/colors';
-import { navRoutes, NavRoutesType } from '../features/navbar/navRoutes';
+import { navRoutes, NavRoutesType } from '../lib/navbar/navRoutes';
 
 // Props type for the component
 type PinRouteToNavbarButtonProps = {

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,368 @@
+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;
+}
+
+interface SurveyPageProps {
+  styles: any;
+  isDarkMode: boolean;
+  token?: any;
+  surveyData: IAccountSetupSurveyData;
+  handleSurveyDataChange: (field: keyof IAccountSetupSurveyData, value: any) => void;
+  handleUseCaseToggle?: (value: UseCase) => void;
+}
+
+// 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 }) => {
+  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 }}>{t('allSetTitle')}</Title>
+        <Paragraph style={{ color: token?.colorTextSecondary, marginBottom: 0 }}>{t('allSetDescription')}</Paragraph>
+      </div>
+    </div>
+  );
+};
+
+export const SurveyStep: React.FC<Props> = ({ onEnter, styles, isDarkMode, token }) => {
+  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} />,
+    <YourNeedsPage key="your-needs" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} handleUseCaseToggle={handleUseCaseToggle} />,
+    <DiscoveryPage key="discovery" styles={styles} isDarkMode={isDarkMode} token={token} surveyData={surveyData} handleSurveyDataChange={handleSurveyDataChange} />
+  ];
+
+  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/advanced-gantt/AdvancedGanttChart.tsx

@@ -0,0 +1,612 @@
+import React, { useReducer, useMemo, useCallback, useRef, useEffect, useState } from 'react';
+import { 
+  GanttTask, 
+  ColumnConfig, 
+  TimelineConfig, 
+  VirtualScrollConfig,
+  ZoomLevel,
+  GanttState,
+  GanttAction,
+  AdvancedGanttProps,
+  SelectionState,
+  GanttViewState,
+  DragState
+} from '../../types/advanced-gantt.types';
+import GanttGrid from './GanttGrid';
+import DraggableTaskBar from './DraggableTaskBar';
+import TimelineMarkers, { holidayPresets, workingDayPresets } from './TimelineMarkers';
+import VirtualScrollContainer, { VirtualTimeline } from './VirtualScrollContainer';
+import { 
+  usePerformanceMonitoring, 
+  useTaskCalculations, 
+  useDateCalculations,
+  useDebounce,
+  useThrottle
+} from '../../utils/gantt-performance';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+
+// Default configurations
+const defaultColumns: ColumnConfig[] = [
+  { 
+    field: 'name', 
+    title: 'Task Name', 
+    width: 250, 
+    minWidth: 150, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'text'
+  },
+  { 
+    field: 'startDate', 
+    title: 'Start Date', 
+    width: 120, 
+    minWidth: 100, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'date'
+  },
+  { 
+    field: 'endDate', 
+    title: 'End Date', 
+    width: 120, 
+    minWidth: 100, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'date'
+  },
+  { 
+    field: 'duration', 
+    title: 'Duration', 
+    width: 80, 
+    minWidth: 60, 
+    resizable: true, 
+    sortable: false, 
+    fixed: true 
+  },
+  { 
+    field: 'progress', 
+    title: 'Progress', 
+    width: 100, 
+    minWidth: 80, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'number'
+  },
+];
+
+const defaultTimelineConfig: TimelineConfig = {
+  topTier: { unit: 'month', format: 'MMM yyyy', height: 30 },
+  bottomTier: { unit: 'day', format: 'dd', height: 25 },
+  showWeekends: true,
+  showNonWorkingDays: true,
+  holidays: holidayPresets.US,
+  workingDays: workingDayPresets.standard,
+  workingHours: { start: 9, end: 17 },
+  dayWidth: 30,
+};
+
+const defaultVirtualScrollConfig: VirtualScrollConfig = {
+  enableRowVirtualization: true,
+  enableTimelineVirtualization: true,
+  bufferSize: 10,
+  itemHeight: 40,
+  overscan: 5,
+};
+
+const defaultZoomLevels: ZoomLevel[] = [
+  { 
+    name: 'Year', 
+    dayWidth: 2, 
+    scale: 0.1,
+    topTier: { unit: 'year', format: 'yyyy' },
+    bottomTier: { unit: 'month', format: 'MMM' }
+  },
+  { 
+    name: 'Month', 
+    dayWidth: 8, 
+    scale: 0.5,
+    topTier: { unit: 'month', format: 'MMM yyyy' },
+    bottomTier: { unit: 'week', format: 'w' }
+  },
+  { 
+    name: 'Week', 
+    dayWidth: 25, 
+    scale: 1,
+    topTier: { unit: 'week', format: 'MMM dd' },
+    bottomTier: { unit: 'day', format: 'dd' }
+  },
+  { 
+    name: 'Day', 
+    dayWidth: 50, 
+    scale: 2,
+    topTier: { unit: 'day', format: 'MMM dd' },
+    bottomTier: { unit: 'hour', format: 'HH' }
+  },
+];
+
+// Gantt state reducer
+function ganttReducer(state: GanttState, action: GanttAction): GanttState {
+  switch (action.type) {
+    case 'SET_TASKS':
+      return { ...state, tasks: action.payload };
+    
+    case 'UPDATE_TASK':
+      return {
+        ...state,
+        tasks: state.tasks.map(task =>
+          task.id === action.payload.id
+            ? { ...task, ...action.payload.updates }
+            : task
+        ),
+      };
+    
+    case 'ADD_TASK':
+      return { ...state, tasks: [...state.tasks, action.payload] };
+    
+    case 'DELETE_TASK':
+      return {
+        ...state,
+        tasks: state.tasks.filter(task => task.id !== action.payload),
+      };
+    
+    case 'SET_SELECTION':
+      return {
+        ...state,
+        selectionState: { ...state.selectionState, selectedTasks: action.payload },
+      };
+    
+    case 'SET_DRAG_STATE':
+      return { ...state, dragState: action.payload };
+    
+    case 'SET_ZOOM_LEVEL':
+      const newZoomLevel = Math.max(0, Math.min(state.zoomLevels.length - 1, action.payload));
+      return {
+        ...state,
+        viewState: { ...state.viewState, zoomLevel: newZoomLevel },
+        timelineConfig: {
+          ...state.timelineConfig,
+          dayWidth: state.zoomLevels[newZoomLevel].dayWidth,
+          topTier: state.zoomLevels[newZoomLevel].topTier,
+          bottomTier: state.zoomLevels[newZoomLevel].bottomTier,
+        },
+      };
+    
+    case 'SET_SCROLL_POSITION':
+      return {
+        ...state,
+        viewState: { ...state.viewState, scrollPosition: action.payload },
+      };
+    
+    case 'SET_SPLITTER_POSITION':
+      return {
+        ...state,
+        viewState: { ...state.viewState, splitterPosition: action.payload },
+      };
+    
+    case 'TOGGLE_TASK_EXPANSION':
+      return {
+        ...state,
+        tasks: state.tasks.map(task =>
+          task.id === action.payload
+            ? { ...task, isExpanded: !task.isExpanded }
+            : task
+        ),
+      };
+    
+    case 'SET_VIEW_STATE':
+      return {
+        ...state,
+        viewState: { ...state.viewState, ...action.payload },
+      };
+    
+    case 'UPDATE_COLUMN_WIDTH':
+      return {
+        ...state,
+        columns: state.columns.map(col =>
+          col.field === action.payload.field
+            ? { ...col, width: action.payload.width }
+            : col
+        ),
+      };
+    
+    default:
+      return state;
+  }
+}
+
+const AdvancedGanttChart: React.FC<AdvancedGanttProps> = ({
+  tasks: initialTasks,
+  columns = defaultColumns,
+  timelineConfig = {},
+  virtualScrollConfig = {},
+  zoomLevels = defaultZoomLevels,
+  initialViewState = {},
+  initialSelection = [],
+  onTaskUpdate,
+  onTaskCreate,
+  onTaskDelete,
+  onTaskMove,
+  onTaskResize,
+  onProgressChange,
+  onSelectionChange,
+  onColumnResize,
+  onDependencyCreate,
+  onDependencyDelete,
+  className = '',
+  style = {},
+  theme = 'auto',
+  enableDragDrop = true,
+  enableResize = true,
+  enableProgressEdit = true,
+  enableInlineEdit = true,
+  enableVirtualScrolling = true,
+  enableDebouncing = true,
+  debounceDelay = 300,
+  maxVisibleTasks = 1000,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const { startMeasure, endMeasure, metrics } = usePerformanceMonitoring();
+  const { getDaysBetween } = useDateCalculations();
+
+  // Initialize state
+  const initialState: GanttState = {
+    tasks: initialTasks,
+    columns,
+    timelineConfig: { ...defaultTimelineConfig, ...timelineConfig },
+    virtualScrollConfig: { ...defaultVirtualScrollConfig, ...virtualScrollConfig },
+    dragState: null,
+    selectionState: {
+      selectedTasks: initialSelection,
+      selectedRows: [],
+      focusedTask: undefined,
+    },
+    viewState: {
+      zoomLevel: 2, // Week view by default
+      scrollPosition: { x: 0, y: 0 },
+      viewportSize: { width: 0, height: 0 },
+      splitterPosition: 40, // 40% for grid, 60% for timeline
+      showCriticalPath: false,
+      showBaseline: false,
+      showProgress: true,
+      showDependencies: true,
+      autoSchedule: false,
+      readOnly: false,
+      ...initialViewState,
+    },
+    zoomLevels,
+    performanceMetrics: {
+      renderTime: 0,
+      taskCount: initialTasks.length,
+      visibleTaskCount: 0,
+    },
+  };
+
+  const [state, dispatch] = useReducer(ganttReducer, initialState);
+  const { taskMap, parentChildMap, totalTasks } = useTaskCalculations(state.tasks);
+
+  // Calculate project timeline bounds
+  const projectBounds = useMemo(() => {
+    if (state.tasks.length === 0) {
+      const today = new Date();
+      return {
+        start: new Date(today.getFullYear(), today.getMonth(), 1),
+        end: new Date(today.getFullYear(), today.getMonth() + 3, 0),
+      };
+    }
+
+    const startDates = state.tasks.map(task => task.startDate);
+    const endDates = state.tasks.map(task => task.endDate);
+    const minStart = new Date(Math.min(...startDates.map(d => d.getTime())));
+    const maxEnd = new Date(Math.max(...endDates.map(d => d.getTime())));
+
+    // Add some padding
+    minStart.setDate(minStart.getDate() - 7);
+    maxEnd.setDate(maxEnd.getDate() + 7);
+
+    return { start: minStart, end: maxEnd };
+  }, [state.tasks]);
+
+  // Debounced event handlers
+  const debouncedTaskUpdate = useDebounce(
+    useCallback((taskId: string, updates: Partial<GanttTask>) => {
+      dispatch({ type: 'UPDATE_TASK', payload: { id: taskId, updates } });
+      onTaskUpdate?.(taskId, updates);
+    }, [onTaskUpdate]),
+    enableDebouncing ? debounceDelay : 0
+  );
+
+  const debouncedTaskMove = useDebounce(
+    useCallback((taskId: string, newDates: { start: Date; end: Date }) => {
+      dispatch({ type: 'UPDATE_TASK', payload: { 
+        id: taskId, 
+        updates: { startDate: newDates.start, endDate: newDates.end } 
+      }});
+      onTaskMove?.(taskId, newDates);
+    }, [onTaskMove]),
+    enableDebouncing ? debounceDelay : 0
+  );
+
+  const debouncedProgressChange = useDebounce(
+    useCallback((taskId: string, progress: number) => {
+      dispatch({ type: 'UPDATE_TASK', payload: { id: taskId, updates: { progress } }});
+      onProgressChange?.(taskId, progress);
+    }, [onProgressChange]),
+    enableDebouncing ? debounceDelay : 0
+  );
+
+  // Throttled scroll handler
+  const throttledScrollHandler = useThrottle(
+    useCallback((scrollLeft: number, scrollTop: number) => {
+      dispatch({ type: 'SET_SCROLL_POSITION', payload: { x: scrollLeft, y: scrollTop } });
+    }, []),
+    16 // 60fps
+  );
+
+  // Container size observer
+  useEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        setContainerSize({ width, height });
+        dispatch({ 
+          type: 'SET_VIEW_STATE', 
+          payload: { viewportSize: { width, height } } 
+        });
+      }
+    });
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  // Calculate grid and timeline dimensions
+  const gridWidth = useMemo(() => {
+    return Math.floor(containerSize.width * (state.viewState.splitterPosition / 100));
+  }, [containerSize.width, state.viewState.splitterPosition]);
+
+  const timelineWidth = useMemo(() => {
+    return containerSize.width - gridWidth;
+  }, [containerSize.width, gridWidth]);
+
+  // Handle zoom changes
+  const handleZoomChange = useCallback((direction: 'in' | 'out') => {
+    const currentZoom = state.viewState.zoomLevel;
+    const newZoom = direction === 'in' 
+      ? Math.min(state.zoomLevels.length - 1, currentZoom + 1)
+      : Math.max(0, currentZoom - 1);
+    
+    dispatch({ type: 'SET_ZOOM_LEVEL', payload: newZoom });
+  }, [state.viewState.zoomLevel, state.zoomLevels.length]);
+
+  // Theme-aware colors
+  const colors = useMemo(() => ({
+    background: themeWiseColor('#ffffff', '#1f2937', themeMode),
+    border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
+    timelineBackground: themeWiseColor('#f8f9fa', '#374151', themeMode),
+  }), [themeMode]);
+
+  // Render timeline header
+  const renderTimelineHeader = () => {
+    const currentZoom = state.zoomLevels[state.viewState.zoomLevel];
+    const totalDays = getDaysBetween(projectBounds.start, projectBounds.end);
+    const totalWidth = totalDays * state.timelineConfig.dayWidth;
+
+    return (
+      <div className="timeline-header border-b" style={{ 
+        height: (currentZoom.topTier.height || 30) + (currentZoom.bottomTier.height || 25),
+        backgroundColor: colors.timelineBackground,
+        borderColor: colors.border,
+      }}>
+        <VirtualTimeline
+          startDate={projectBounds.start}
+          endDate={projectBounds.end}
+          dayWidth={state.timelineConfig.dayWidth}
+          containerWidth={timelineWidth}
+          containerHeight={(currentZoom.topTier.height || 30) + (currentZoom.bottomTier.height || 25)}
+          onScroll={throttledScrollHandler}
+        >
+          {(date, index, style) => (
+            <div className="timeline-cell flex flex-col border-r text-xs text-center" style={{
+              ...style,
+              borderColor: colors.border,
+            }}>
+              <div className="top-tier border-b px-1 py-1" style={{
+                height: currentZoom.topTier.height || 30,
+                borderColor: colors.border,
+              }}>
+                {formatDateForUnit(date, currentZoom.topTier.unit)}
+              </div>
+              <div className="bottom-tier px-1 py-1" style={{
+                height: currentZoom.bottomTier.height || 25,
+              }}>
+                {formatDateForUnit(date, currentZoom.bottomTier.unit)}
+              </div>
+            </div>
+          )}
+        </VirtualTimeline>
+      </div>
+    );
+  };
+
+  // Render timeline content
+  const renderTimelineContent = () => {
+    const headerHeight = (state.zoomLevels[state.viewState.zoomLevel].topTier.height || 30) + 
+                        (state.zoomLevels[state.viewState.zoomLevel].bottomTier.height || 25);
+    const contentHeight = containerSize.height - headerHeight;
+
+    return (
+      <div className="timeline-content relative" style={{ height: contentHeight }}>
+        {/* Timeline markers (weekends, holidays, etc.) */}
+        <TimelineMarkers
+          startDate={projectBounds.start}
+          endDate={projectBounds.end}
+          dayWidth={state.timelineConfig.dayWidth}
+          containerHeight={contentHeight}
+          timelineConfig={state.timelineConfig}
+          holidays={state.timelineConfig.holidays}
+          showWeekends={state.timelineConfig.showWeekends}
+          showHolidays={true}
+          showToday={true}
+        />
+
+        {/* Task bars */}
+        <VirtualScrollContainer
+          items={state.tasks}
+          itemHeight={state.virtualScrollConfig.itemHeight}
+          containerHeight={contentHeight}
+          containerWidth={timelineWidth}
+          overscan={state.virtualScrollConfig.overscan}
+          onScroll={throttledScrollHandler}
+        >
+          {(task, index, style) => (
+            <DraggableTaskBar
+              key={task.id}
+              task={task}
+              timelineStart={projectBounds.start}
+              dayWidth={state.timelineConfig.dayWidth}
+              rowHeight={state.virtualScrollConfig.itemHeight}
+              index={index}
+              onTaskMove={debouncedTaskMove}
+              onTaskResize={debouncedTaskMove}
+              onProgressChange={debouncedProgressChange}
+              enableDragDrop={enableDragDrop}
+              enableResize={enableResize}
+              enableProgressEdit={enableProgressEdit}
+              readOnly={state.viewState.readOnly}
+            />
+          )}
+        </VirtualScrollContainer>
+      </div>
+    );
+  };
+
+  // Render toolbar
+  const renderToolbar = () => (
+    <div className="gantt-toolbar flex items-center justify-between p-2 border-b bg-gray-50 dark:bg-gray-800" style={{
+      borderColor: colors.border,
+    }}>
+      <div className="toolbar-left flex items-center space-x-2">
+        <button
+          onClick={() => handleZoomChange('out')}
+          disabled={state.viewState.zoomLevel === 0}
+          className="px-2 py-1 text-sm border rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+        >
+          Zoom Out
+        </button>
+        <span className="text-sm text-gray-600 dark:text-gray-400">
+          {state.zoomLevels[state.viewState.zoomLevel].name}
+        </span>
+        <button
+          onClick={() => handleZoomChange('in')}
+          disabled={state.viewState.zoomLevel === state.zoomLevels.length - 1}
+          className="px-2 py-1 text-sm border rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
+        >
+          Zoom In
+        </button>
+      </div>
+      
+      <div className="toolbar-right flex items-center space-x-2 text-xs text-gray-500">
+        <span>Tasks: {state.tasks.length}</span>
+        <span>•</span>
+        <span>Render: {Math.round(metrics.renderTime)}ms</span>
+      </div>
+    </div>
+  );
+
+  // Performance monitoring
+  useEffect(() => {
+    startMeasure('render');
+    return () => endMeasure('render');
+  });
+
+  return (
+    <div
+      ref={containerRef}
+      className={`advanced-gantt-chart flex flex-col ${className}`}
+      style={{
+        height: '100%',
+        backgroundColor: colors.background,
+        ...style,
+      }}
+    >
+      {/* Toolbar */}
+      {renderToolbar()}
+
+      {/* Main content */}
+      <div className="gantt-content flex flex-1 overflow-hidden">
+        {/* Grid */}
+        <div className="gantt-grid-container" style={{ width: gridWidth }}>
+          <GanttGrid
+            tasks={state.tasks}
+            columns={state.columns}
+            rowHeight={state.virtualScrollConfig.itemHeight}
+            containerHeight={containerSize.height - 50} // Subtract toolbar height
+            selection={state.selectionState}
+            enableInlineEdit={enableInlineEdit}
+            onTaskClick={(task) => {
+              // Handle task selection
+              const newSelection = { ...state.selectionState, selectedTasks: [task.id] };
+              dispatch({ type: 'SET_SELECTION', payload: [task.id] });
+              onSelectionChange?.(newSelection);
+            }}
+            onTaskExpand={(taskId) => {
+              dispatch({ type: 'TOGGLE_TASK_EXPANSION', payload: taskId });
+            }}
+            onColumnResize={(field, width) => {
+              dispatch({ type: 'UPDATE_COLUMN_WIDTH', payload: { field, width } });
+              onColumnResize?.(field, width);
+            }}
+            onTaskUpdate={debouncedTaskUpdate}
+          />
+        </div>
+
+        {/* Timeline */}
+        <div className="gantt-timeline-container border-l" style={{ 
+          width: timelineWidth,
+          borderColor: colors.border,
+        }}>
+          {renderTimelineHeader()}
+          {renderTimelineContent()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Helper function to format dates based on unit
+function formatDateForUnit(date: Date, unit: string): string {
+  switch (unit) {
+    case 'year':
+      return date.getFullYear().toString();
+    case 'month':
+      return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+    case 'week':
+      return `W${getWeekNumber(date)}`;
+    case 'day':
+      return date.getDate().toString();
+    case 'hour':
+      return date.getHours().toString().padStart(2, '0');
+    default:
+      return '';
+  }
+}
+
+function getWeekNumber(date: Date): number {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+  const dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+}
+
+export default AdvancedGanttChart;

worklenz-frontend/src/components/advanced-gantt/AdvancedGanttDemo.tsx

@@ -0,0 +1,668 @@
+import React, { useState, useMemo } from 'react';
+import { Button, Space, message, Card } from 'antd';
+import AdvancedGanttChart from './AdvancedGanttChart';
+import { GanttTask, ColumnConfig } from '../../types/advanced-gantt.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { holidayPresets, workingDayPresets } from './TimelineMarkers';
+
+// Enhanced sample data with more realistic project structure
+const generateSampleTasks = (): GanttTask[] => {
+  const baseDate = new Date(2024, 11, 1); // December 1, 2024
+  
+  return [
+    // Project Phase 1: Planning & Design
+    {
+      id: 'project-1',
+      name: '🚀 Web Platform Development',
+      startDate: new Date(2024, 11, 1),
+      endDate: new Date(2025, 2, 31),
+      progress: 45,
+      type: 'project',
+      status: 'in-progress',
+      priority: 'high',
+      color: '#1890ff',
+      hasChildren: true,
+      isExpanded: true,
+      level: 0,
+    },
+    {
+      id: 'planning-phase',
+      name: '📋 Planning & Analysis Phase',
+      startDate: new Date(2024, 11, 1),
+      endDate: new Date(2024, 11, 20),
+      progress: 85,
+      type: 'project',
+      status: 'in-progress',
+      priority: 'high',
+      parent: 'project-1',
+      color: '#52c41a',
+      hasChildren: true,
+      isExpanded: true,
+      level: 1,
+    },
+    {
+      id: 'requirements-analysis',
+      name: 'Requirements Gathering & Analysis',
+      startDate: new Date(2024, 11, 1),
+      endDate: new Date(2024, 11, 8),
+      progress: 100,
+      type: 'task',
+      status: 'completed',
+      priority: 'high',
+      parent: 'planning-phase',
+      assignee: {
+        id: 'user-1',
+        name: 'Alice Johnson',
+        avatar: 'https://ui-avatars.com/api/?name=Alice+Johnson&background=1890ff&color=fff',
+      },
+      tags: ['research', 'documentation'],
+      level: 2,
+    },
+    {
+      id: 'technical-architecture',
+      name: 'Technical Architecture Design',
+      startDate: new Date(2024, 11, 8),
+      endDate: new Date(2024, 11, 18),
+      progress: 75,
+      type: 'task',
+      status: 'in-progress',
+      priority: 'high',
+      parent: 'planning-phase',
+      assignee: {
+        id: 'user-2',
+        name: 'Bob Smith',
+        avatar: 'https://ui-avatars.com/api/?name=Bob+Smith&background=52c41a&color=fff',
+      },
+      dependencies: ['requirements-analysis'],
+      tags: ['architecture', 'design'],
+      level: 2,
+    },
+    {
+      id: 'ui-ux-design',
+      name: 'UI/UX Design & Prototyping',
+      startDate: new Date(2024, 11, 10),
+      endDate: new Date(2024, 11, 20),
+      progress: 60,
+      type: 'task',
+      status: 'in-progress',
+      priority: 'medium',
+      parent: 'planning-phase',
+      assignee: {
+        id: 'user-3',
+        name: 'Carol Davis',
+        avatar: 'https://ui-avatars.com/api/?name=Carol+Davis&background=faad14&color=fff',
+      },
+      dependencies: ['requirements-analysis'],
+      tags: ['design', 'prototype'],
+      level: 2,
+    },
+    {
+      id: 'milestone-planning-complete',
+      name: '🎯 Planning Phase Complete',
+      startDate: new Date(2024, 11, 20),
+      endDate: new Date(2024, 11, 20),
+      progress: 0,
+      type: 'milestone',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'planning-phase',
+      dependencies: ['technical-architecture', 'ui-ux-design'],
+      level: 2,
+    },
+
+    // Development Phase
+    {
+      id: 'development-phase',
+      name: '⚡ Development Phase',
+      startDate: new Date(2024, 11, 21),
+      endDate: new Date(2025, 1, 28),
+      progress: 35,
+      type: 'project',
+      status: 'in-progress',
+      priority: 'high',
+      parent: 'project-1',
+      color: '#722ed1',
+      hasChildren: true,
+      isExpanded: true,
+      level: 1,
+    },
+    {
+      id: 'backend-development',
+      name: 'Backend API Development',
+      startDate: new Date(2024, 11, 21),
+      endDate: new Date(2025, 1, 15),
+      progress: 45,
+      type: 'task',
+      status: 'in-progress',
+      priority: 'high',
+      parent: 'development-phase',
+      assignee: {
+        id: 'user-4',
+        name: 'David Wilson',
+        avatar: 'https://ui-avatars.com/api/?name=David+Wilson&background=722ed1&color=fff',
+      },
+      dependencies: ['milestone-planning-complete'],
+      tags: ['backend', 'api'],
+      level: 2,
+    },
+    {
+      id: 'frontend-development',
+      name: 'Frontend React Application',
+      startDate: new Date(2025, 0, 5),
+      endDate: new Date(2025, 1, 25),
+      progress: 25,
+      type: 'task',
+      status: 'in-progress',
+      priority: 'high',
+      parent: 'development-phase',
+      assignee: {
+        id: 'user-5',
+        name: 'Eva Brown',
+        avatar: 'https://ui-avatars.com/api/?name=Eva+Brown&background=ff7a45&color=fff',
+      },
+      dependencies: ['backend-development'],
+      tags: ['frontend', 'react'],
+      level: 2,
+    },
+    {
+      id: 'database-setup',
+      name: 'Database Schema & Migration',
+      startDate: new Date(2024, 11, 21),
+      endDate: new Date(2025, 0, 10),
+      progress: 80,
+      type: 'task',
+      status: 'in-progress',
+      priority: 'medium',
+      parent: 'development-phase',
+      assignee: {
+        id: 'user-6',
+        name: 'Frank Miller',
+        avatar: 'https://ui-avatars.com/api/?name=Frank+Miller&background=13c2c2&color=fff',
+      },
+      dependencies: ['milestone-planning-complete'],
+      tags: ['database', 'migration'],
+      level: 2,
+    },
+
+    // Testing Phase
+    {
+      id: 'testing-phase',
+      name: '🧪 Testing & QA Phase',
+      startDate: new Date(2025, 2, 1),
+      endDate: new Date(2025, 2, 20),
+      progress: 0,
+      type: 'project',
+      status: 'not-started',
+      priority: 'high',
+      parent: 'project-1',
+      color: '#fa8c16',
+      hasChildren: true,
+      isExpanded: false,
+      level: 1,
+    },
+    {
+      id: 'unit-testing',
+      name: 'Unit Testing Implementation',
+      startDate: new Date(2025, 2, 1),
+      endDate: new Date(2025, 2, 10),
+      progress: 0,
+      type: 'task',
+      status: 'not-started',
+      priority: 'high',
+      parent: 'testing-phase',
+      assignee: {
+        id: 'user-7',
+        name: 'Grace Lee',
+        avatar: 'https://ui-avatars.com/api/?name=Grace+Lee&background=fa8c16&color=fff',
+      },
+      dependencies: ['frontend-development'],
+      tags: ['testing', 'unit'],
+      level: 2,
+    },
+    {
+      id: 'integration-testing',
+      name: 'Integration & E2E Testing',
+      startDate: new Date(2025, 2, 8),
+      endDate: new Date(2025, 2, 18),
+      progress: 0,
+      type: 'task',
+      status: 'not-started',
+      priority: 'high',
+      parent: 'testing-phase',
+      assignee: {
+        id: 'user-8',
+        name: 'Henry Clark',
+        avatar: 'https://ui-avatars.com/api/?name=Henry+Clark&background=eb2f96&color=fff',
+      },
+      dependencies: ['unit-testing'],
+      tags: ['testing', 'integration'],
+      level: 2,
+    },
+    {
+      id: 'milestone-beta-ready',
+      name: '🎯 Beta Release Ready',
+      startDate: new Date(2025, 2, 20),
+      endDate: new Date(2025, 2, 20),
+      progress: 0,
+      type: 'milestone',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'testing-phase',
+      dependencies: ['integration-testing'],
+      level: 2,
+    },
+
+    // Deployment Phase
+    {
+      id: 'deployment-phase',
+      name: '🚀 Deployment & Launch',
+      startDate: new Date(2025, 2, 21),
+      endDate: new Date(2025, 2, 31),
+      progress: 0,
+      type: 'project',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'project-1',
+      color: '#f5222d',
+      hasChildren: true,
+      isExpanded: false,
+      level: 1,
+    },
+    {
+      id: 'production-deployment',
+      name: 'Production Environment Setup',
+      startDate: new Date(2025, 2, 21),
+      endDate: new Date(2025, 2, 25),
+      progress: 0,
+      type: 'task',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'deployment-phase',
+      assignee: {
+        id: 'user-9',
+        name: 'Ivy Taylor',
+        avatar: 'https://ui-avatars.com/api/?name=Ivy+Taylor&background=f5222d&color=fff',
+      },
+      dependencies: ['milestone-beta-ready'],
+      tags: ['deployment', 'production'],
+      level: 2,
+    },
+    {
+      id: 'go-live',
+      name: 'Go Live & Monitoring',
+      startDate: new Date(2025, 2, 26),
+      endDate: new Date(2025, 2, 31),
+      progress: 0,
+      type: 'task',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'deployment-phase',
+      assignee: {
+        id: 'user-10',
+        name: 'Jack Anderson',
+        avatar: 'https://ui-avatars.com/api/?name=Jack+Anderson&background=2f54eb&color=fff',
+      },
+      dependencies: ['production-deployment'],
+      tags: ['launch', 'monitoring'],
+      level: 2,
+    },
+    {
+      id: 'milestone-project-complete',
+      name: '🎉 Project Launch Complete',
+      startDate: new Date(2025, 2, 31),
+      endDate: new Date(2025, 2, 31),
+      progress: 0,
+      type: 'milestone',
+      status: 'not-started',
+      priority: 'critical',
+      parent: 'deployment-phase',
+      dependencies: ['go-live'],
+      level: 2,
+    },
+  ];
+};
+
+// Enhanced column configuration
+const sampleColumns: ColumnConfig[] = [
+  { 
+    field: 'name', 
+    title: 'Task / Phase Name', 
+    width: 300, 
+    minWidth: 200, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'text'
+  },
+  { 
+    field: 'assignee', 
+    title: 'Assignee', 
+    width: 150, 
+    minWidth: 120, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true 
+  },
+  { 
+    field: 'startDate', 
+    title: 'Start Date', 
+    width: 120, 
+    minWidth: 100, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'date'
+  },
+  { 
+    field: 'endDate', 
+    title: 'End Date', 
+    width: 120, 
+    minWidth: 100, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'date'
+  },
+  { 
+    field: 'duration', 
+    title: 'Duration', 
+    width: 80, 
+    minWidth: 60, 
+    resizable: true, 
+    sortable: false, 
+    fixed: true,
+    align: 'center'
+  },
+  { 
+    field: 'progress', 
+    title: 'Progress', 
+    width: 120, 
+    minWidth: 100, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'number'
+  },
+  { 
+    field: 'status', 
+    title: 'Status', 
+    width: 100, 
+    minWidth: 80, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'select',
+    editorOptions: [
+      { value: 'not-started', label: 'Not Started' },
+      { value: 'in-progress', label: 'In Progress' },
+      { value: 'completed', label: 'Completed' },
+      { value: 'on-hold', label: 'On Hold' },
+      { value: 'overdue', label: 'Overdue' },
+    ]
+  },
+  { 
+    field: 'priority', 
+    title: 'Priority', 
+    width: 100, 
+    minWidth: 80, 
+    resizable: true, 
+    sortable: true, 
+    fixed: true,
+    editor: 'select',
+    editorOptions: [
+      { value: 'low', label: 'Low' },
+      { value: 'medium', label: 'Medium' },
+      { value: 'high', label: 'High' },
+      { value: 'critical', label: 'Critical' },
+    ]
+  },
+];
+
+const AdvancedGanttDemo: React.FC = () => {
+  const [tasks, setTasks] = useState<GanttTask[]>(generateSampleTasks());
+  const [selectedTasks, setSelectedTasks] = useState<string[]>([]);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+
+  const handleTaskUpdate = (taskId: string, updates: Partial<GanttTask>) => {
+    setTasks(prevTasks => 
+      prevTasks.map(task => 
+        task.id === taskId ? { ...task, ...updates } : task
+      )
+    );
+    message.success(`Task "${tasks.find(t => t.id === taskId)?.name}" updated`);
+  };
+
+  const handleTaskMove = (taskId: string, newDates: { start: Date; end: Date }) => {
+    setTasks(prevTasks => 
+      prevTasks.map(task => 
+        task.id === taskId 
+          ? { ...task, startDate: newDates.start, endDate: newDates.end }
+          : task
+      )
+    );
+    message.info(`Task moved: ${newDates.start.toLocaleDateString()} - ${newDates.end.toLocaleDateString()}`);
+  };
+
+  const handleProgressChange = (taskId: string, progress: number) => {
+    setTasks(prevTasks => 
+      prevTasks.map(task => 
+        task.id === taskId ? { ...task, progress } : task
+      )
+    );
+    message.info(`Progress updated: ${Math.round(progress)}%`);
+  };
+
+  const handleSelectionChange = (selection: any) => {
+    setSelectedTasks(selection.selectedTasks);
+  };
+
+  const resetToSampleData = () => {
+    setTasks(generateSampleTasks());
+    setSelectedTasks([]);
+    message.info('Gantt chart reset to sample data');
+  };
+
+  const addSampleTask = () => {
+    const newTask: GanttTask = {
+      id: `task-${Date.now()}`,
+      name: `New Task ${tasks.length + 1}`,
+      startDate: new Date(),
+      endDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // +7 days
+      progress: 0,
+      type: 'task',
+      status: 'not-started',
+      priority: 'medium',
+      level: 0,
+    };
+    setTasks(prev => [...prev, newTask]);
+    message.success('New task added');
+  };
+
+  const deleteSelectedTasks = () => {
+    if (selectedTasks.length === 0) {
+      message.warning('No tasks selected');
+      return;
+    }
+    
+    setTasks(prev => prev.filter(task => !selectedTasks.includes(task.id)));
+    setSelectedTasks([]);
+    message.success(`${selectedTasks.length} task(s) deleted`);
+  };
+
+  const taskStats = useMemo(() => {
+    const total = tasks.length;
+    const completed = tasks.filter(t => t.status === 'completed').length;
+    const inProgress = tasks.filter(t => t.status === 'in-progress').length;
+    const overdue = tasks.filter(t => t.status === 'overdue').length;
+    const avgProgress = tasks.reduce((sum, t) => sum + t.progress, 0) / total;
+
+    return { total, completed, inProgress, overdue, avgProgress };
+  }, [tasks]);
+
+  return (
+    <div className="advanced-gantt-demo p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
+        <div className="p-6">
+          <div className="flex justify-between items-start mb-4">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+                🚀 Advanced Gantt Chart Demo
+              </h1>
+              <p className="text-gray-600 dark:text-gray-400 mb-4">
+                Professional Gantt chart with draggable tasks, virtual scrolling, holiday markers, 
+                and performance optimizations for modern project management.
+              </p>
+            </div>
+            
+            <div className="flex flex-col items-end space-y-2">
+              <Space>
+                <Button 
+                  onClick={addSampleTask}
+                  type="primary"
+                  className="dark:border-gray-600"
+                >
+                  Add Task
+                </Button>
+                <Button 
+                  onClick={deleteSelectedTasks}
+                  danger
+                  disabled={selectedTasks.length === 0}
+                  className="dark:border-gray-600"
+                >
+                  Delete Selected ({selectedTasks.length})
+                </Button>
+                <Button 
+                  onClick={resetToSampleData}
+                  className="dark:border-gray-600 dark:text-gray-300"
+                >
+                  Reset Data
+                </Button>
+              </Space>
+            </div>
+          </div>
+
+          {/* Project Statistics */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="bg-blue-50 dark:bg-blue-900 dark:bg-opacity-20 rounded-lg p-3">
+              <div className="text-blue-600 dark:text-blue-400 text-sm font-medium">Total Tasks</div>
+              <div className="text-2xl font-bold text-blue-700 dark:text-blue-300">{taskStats.total}</div>
+            </div>
+            <div className="bg-green-50 dark:bg-green-900 dark:bg-opacity-20 rounded-lg p-3">
+              <div className="text-green-600 dark:text-green-400 text-sm font-medium">Completed</div>
+              <div className="text-2xl font-bold text-green-700 dark:text-green-300">{taskStats.completed}</div>
+            </div>
+            <div className="bg-yellow-50 dark:bg-yellow-900 dark:bg-opacity-20 rounded-lg p-3">
+              <div className="text-yellow-600 dark:text-yellow-400 text-sm font-medium">In Progress</div>
+              <div className="text-2xl font-bold text-yellow-700 dark:text-yellow-300">{taskStats.inProgress}</div>
+            </div>
+            <div className="bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 rounded-lg p-3">
+              <div className="text-purple-600 dark:text-purple-400 text-sm font-medium">Avg Progress</div>
+              <div className="text-2xl font-bold text-purple-700 dark:text-purple-300">
+                {Math.round(taskStats.avgProgress)}%
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Gantt Chart */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm" style={{ height: '70vh' }}>
+        <AdvancedGanttChart
+          tasks={tasks}
+          columns={sampleColumns}
+          timelineConfig={{
+            showWeekends: true,
+            showNonWorkingDays: true,
+            holidays: holidayPresets.US,
+            workingDays: workingDayPresets.standard,
+            dayWidth: 30,
+          }}
+          onTaskUpdate={handleTaskUpdate}
+          onTaskMove={handleTaskMove}
+          onProgressChange={handleProgressChange}
+          onSelectionChange={handleSelectionChange}
+          enableDragDrop={true}
+          enableResize={true}
+          enableProgressEdit={true}
+          enableInlineEdit={true}
+          enableVirtualScrolling={true}
+          className="h-full"
+        />
+      </div>
+
+      {/* Feature List */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mt-4">
+        <div className="p-6">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
+            ✨ Advanced Features Demonstrated
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">Performance & UX</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Virtual scrolling for 1000+ tasks</li>
+                <li>• Smooth 60fps drag & drop</li>
+                <li>• Debounced updates</li>
+                <li>• Memory-optimized rendering</li>
+                <li>• Responsive design</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">Gantt Features</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Draggable task bars</li>
+                <li>• Resizable task duration</li>
+                <li>• Progress editing</li>
+                <li>• Multi-level hierarchy</li>
+                <li>• Task dependencies</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">Timeline & Markers</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Weekend & holiday markers</li>
+                <li>• Working day indicators</li>
+                <li>• Today line</li>
+                <li>• Multi-tier timeline</li>
+                <li>• Zoom levels (Year/Month/Week/Day)</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">Grid Features</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Fixed columns layout</li>
+                <li>• Inline editing</li>
+                <li>• Column resizing</li>
+                <li>• Multi-select</li>
+                <li>• Hierarchical tree view</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">UI/UX</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Dark/Light theme support</li>
+                <li>• Tailwind CSS styling</li>
+                <li>• Consistent with Worklenz</li>
+                <li>• Accessibility features</li>
+                <li>• Mobile responsive</li>
+              </ul>
+            </div>
+            <div className="space-y-2">
+              <h4 className="font-medium text-gray-900 dark:text-gray-100">Architecture</h4>
+              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
+                <li>• Modern React patterns</li>
+                <li>• TypeScript safety</li>
+                <li>• Optimized performance</li>
+                <li>• Enterprise features</li>
+                <li>• Best practices 2025</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdvancedGanttDemo;

worklenz-frontend/src/components/advanced-gantt/DraggableTaskBar.tsx

@@ -0,0 +1,304 @@
+import React, { useState, useRef, useCallback, useMemo } from 'react';
+import { GanttTask, DragState } from '../../types/advanced-gantt.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+import { useDateCalculations } from '../../utils/gantt-performance';
+
+interface DraggableTaskBarProps {
+  task: GanttTask;
+  timelineStart: Date;
+  dayWidth: number;
+  rowHeight: number;
+  index: number;
+  onTaskMove?: (taskId: string, newDates: { start: Date; end: Date }) => void;
+  onTaskResize?: (taskId: string, newDates: { start: Date; end: Date }) => void;
+  onProgressChange?: (taskId: string, progress: number) => void;
+  onTaskClick?: (task: GanttTask) => void;
+  onTaskDoubleClick?: (task: GanttTask) => void;
+  enableDragDrop?: boolean;
+  enableResize?: boolean;
+  enableProgressEdit?: boolean;
+  readOnly?: boolean;
+}
+
+const DraggableTaskBar: React.FC<DraggableTaskBarProps> = ({
+  task,
+  timelineStart,
+  dayWidth,
+  rowHeight,
+  index,
+  onTaskMove,
+  onTaskResize,
+  onProgressChange,
+  onTaskClick,
+  onTaskDoubleClick,
+  enableDragDrop = true,
+  enableResize = true,
+  enableProgressEdit = true,
+  readOnly = false,
+}) => {
+  const [dragState, setDragState] = useState<DragState | null>(null);
+  const [hoverState, setHoverState] = useState<string | null>(null);
+  const taskBarRef = useRef<HTMLDivElement>(null);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const { getDaysBetween, addDays } = useDateCalculations();
+
+  // Calculate task position and dimensions
+  const taskPosition = useMemo(() => {
+    const startDays = getDaysBetween(timelineStart, task.startDate);
+    const duration = getDaysBetween(task.startDate, task.endDate);
+    
+    return {
+      x: startDays * dayWidth,
+      width: Math.max(dayWidth * 0.5, duration * dayWidth),
+      y: index * rowHeight + 8, // 8px padding
+      height: rowHeight - 16, // 16px total padding
+    };
+  }, [task.startDate, task.endDate, timelineStart, dayWidth, rowHeight, index, getDaysBetween]);
+
+  // Theme-aware colors
+  const colors = useMemo(() => {
+    const baseColor = task.color || getDefaultTaskColor(task.status);
+    return {
+      background: themeWiseColor(baseColor, adjustColorForDarkMode(baseColor), themeMode),
+      border: themeWiseColor(darkenColor(baseColor, 0.2), lightenColor(baseColor, 0.2), themeMode),
+      progress: themeWiseColor('#52c41a', '#34d399', themeMode),
+      text: themeWiseColor('#ffffff', '#f9fafb', themeMode),
+      hover: themeWiseColor(lightenColor(baseColor, 0.1), darkenColor(baseColor, 0.1), themeMode),
+    };
+  }, [task.color, task.status, themeMode]);
+
+  // Mouse event handlers
+  const handleMouseDown = useCallback((e: React.MouseEvent, dragType: DragState['dragType']) => {
+    if (readOnly || !enableDragDrop) return;
+    
+    e.preventDefault();
+    e.stopPropagation();
+
+    const rect = taskBarRef.current?.getBoundingClientRect();
+    if (!rect) return;
+
+    setDragState({
+      isDragging: true,
+      dragType,
+      taskId: task.id,
+      initialPosition: { x: e.clientX, y: e.clientY },
+      currentPosition: { x: e.clientX, y: e.clientY },
+      initialDates: { start: task.startDate, end: task.endDate },
+      initialProgress: task.progress,
+      snapToGrid: true,
+    });
+
+    // Add global mouse event listeners
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      handleMouseMove_Internal(moveEvent, dragType);
+    };
+
+    const handleMouseUp = () => {
+      handleMouseUp_Internal();
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [readOnly, enableDragDrop, task]);
+
+  const handleMouseMove_Internal = useCallback((e: MouseEvent, dragType: DragState['dragType']) => {
+    if (!dragState) return;
+
+    const deltaX = e.clientX - dragState.initialPosition.x;
+    const deltaDays = Math.round(deltaX / dayWidth);
+
+    let newStartDate = task.startDate;
+    let newEndDate = task.endDate;
+
+    switch (dragType) {
+      case 'move':
+        newStartDate = addDays(dragState.initialDates.start, deltaDays);
+        newEndDate = addDays(dragState.initialDates.end, deltaDays);
+        break;
+      
+      case 'resize-start':
+        newStartDate = addDays(dragState.initialDates.start, deltaDays);
+        // Ensure minimum duration
+        if (newStartDate >= newEndDate) {
+          newStartDate = addDays(newEndDate, -1);
+        }
+        break;
+      
+      case 'resize-end':
+        newEndDate = addDays(dragState.initialDates.end, deltaDays);
+        // Ensure minimum duration
+        if (newEndDate <= newStartDate) {
+          newEndDate = addDays(newStartDate, 1);
+        }
+        break;
+      
+      case 'progress':
+        if (enableProgressEdit) {
+          const progressDelta = deltaX / taskPosition.width;
+          const newProgress = Math.max(0, Math.min(100, (dragState.initialProgress || 0) + progressDelta * 100));
+          onProgressChange?.(task.id, newProgress);
+        }
+        return;
+    }
+
+    // Update drag state
+    setDragState(prev => prev ? {
+      ...prev,
+      currentPosition: { x: e.clientX, y: e.clientY },
+    } : null);
+
+    // Call appropriate handler
+    if (dragType === 'move') {
+      onTaskMove?.(task.id, { start: newStartDate, end: newEndDate });
+    } else if (dragType.startsWith('resize')) {
+      onTaskResize?.(task.id, { start: newStartDate, end: newEndDate });
+    }
+  }, [dragState, dayWidth, task, taskPosition.width, enableProgressEdit, onTaskMove, onTaskResize, onProgressChange, addDays]);
+
+  const handleMouseUp_Internal = useCallback(() => {
+    setDragState(null);
+  }, []);
+
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onTaskClick?.(task);
+  }, [task, onTaskClick]);
+
+  const handleDoubleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onTaskDoubleClick?.(task);
+  }, [task, onTaskDoubleClick]);
+
+  // Render task bar with handles
+  const renderTaskBar = () => {
+    const isSelected = false; // TODO: Get from selection state
+    const isDragging = dragState?.isDragging || false;
+
+    return (
+      <div
+        ref={taskBarRef}
+        className={`task-bar relative cursor-pointer select-none transition-all duration-200 ${
+          isDragging ? 'z-10 shadow-lg' : ''
+        } ${isSelected ? 'ring-2 ring-blue-500 ring-opacity-50' : ''}`}
+        style={{
+          position: 'absolute',
+          left: taskPosition.x,
+          top: taskPosition.y,
+          width: taskPosition.width,
+          height: taskPosition.height,
+          backgroundColor: dragState?.isDragging ? colors.hover : colors.background,
+          border: `1px solid ${colors.border}`,
+          borderRadius: '4px',
+          transform: isDragging ? 'translateY(-2px)' : 'none',
+          boxShadow: isDragging ? '0 4px 12px rgba(0,0,0,0.15)' : '0 1px 3px rgba(0,0,0,0.1)',
+        }}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+        onMouseEnter={() => setHoverState('task')}
+        onMouseLeave={() => setHoverState(null)}
+        onMouseDown={(e) => handleMouseDown(e, 'move')}
+      >
+        {/* Progress bar */}
+        <div
+          className="progress-bar absolute inset-0 rounded-l"
+          style={{
+            width: `${task.progress}%`,
+            backgroundColor: colors.progress,
+            opacity: 0.7,
+            borderRadius: '3px 0 0 3px',
+          }}
+        />
+
+        {/* Task content */}
+        <div className="task-content relative z-10 h-full flex items-center px-2">
+          <span
+            className="task-name text-xs font-medium truncate"
+            style={{ color: colors.text }}
+          >
+            {task.name}
+          </span>
+          
+          {/* Duration display for smaller tasks */}
+          {taskPosition.width < 100 && (
+            <span
+              className="task-duration text-xs ml-auto"
+              style={{ color: colors.text, opacity: 0.8 }}
+            >
+              {getDaysBetween(task.startDate, task.endDate)}d
+            </span>
+          )}
+        </div>
+
+        {/* Resize handles */}
+        {enableResize && !readOnly && hoverState === 'task' && (
+          <>
+            {/* Left resize handle */}
+            <div
+              className="resize-handle-left absolute left-0 top-0 w-1 h-full cursor-ew-resize bg-white bg-opacity-50 hover:bg-opacity-80"
+              onMouseDown={(e) => handleMouseDown(e, 'resize-start')}
+              onMouseEnter={() => setHoverState('resize-start')}
+            />
+            
+            {/* Right resize handle */}
+            <div
+              className="resize-handle-right absolute right-0 top-0 w-1 h-full cursor-ew-resize bg-white bg-opacity-50 hover:bg-opacity-80"
+              onMouseDown={(e) => handleMouseDown(e, 'resize-end')}
+              onMouseEnter={() => setHoverState('resize-end')}
+            />
+          </>
+        )}
+
+        {/* Progress handle */}
+        {enableProgressEdit && !readOnly && hoverState === 'task' && (
+          <div
+            className="progress-handle absolute top-0 h-full w-1 cursor-ew-resize bg-blue-500 opacity-75"
+            style={{ left: `${task.progress}%` }}
+            onMouseDown={(e) => handleMouseDown(e, 'progress')}
+            onMouseEnter={() => setHoverState('progress')}
+          />
+        )}
+
+        {/* Task type indicator */}
+        {task.type === 'milestone' && (
+          <div
+            className="milestone-indicator absolute -top-1 -right-1 w-3 h-3 transform rotate-45"
+            style={{ backgroundColor: colors.border }}
+          />
+        )}
+      </div>
+    );
+  };
+
+  return renderTaskBar();
+};
+
+// Helper functions
+function getDefaultTaskColor(status: GanttTask['status']): string {
+  switch (status) {
+    case 'completed': return '#52c41a';
+    case 'in-progress': return '#1890ff';
+    case 'overdue': return '#ff4d4f';
+    case 'on-hold': return '#faad14';
+    default: return '#d9d9d9';
+  }
+}
+
+function darkenColor(color: string, amount: number): string {
+  // Simple color darkening - in a real app, use a proper color manipulation library
+  return color;
+}
+
+function lightenColor(color: string, amount: number): string {
+  // Simple color lightening - in a real app, use a proper color manipulation library
+  return color;
+}
+
+function adjustColorForDarkMode(color: string): string {
+  // Adjust color for dark mode - in a real app, use a proper color manipulation library
+  return color;
+}
+
+export default DraggableTaskBar;

worklenz-frontend/src/components/advanced-gantt/GanttGrid.tsx

@@ -0,0 +1,492 @@
+import React, { useMemo, useRef, useState, useCallback } from 'react';
+import { GanttTask, ColumnConfig, SelectionState } from '../../types/advanced-gantt.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+import { CalendarIcon, UserIcon, FlagIcon } from '@heroicons/react/24/solid';
+
+interface GanttGridProps {
+  tasks: GanttTask[];
+  columns: ColumnConfig[];
+  rowHeight: number;
+  containerHeight: number;
+  selection: SelectionState;
+  enableInlineEdit?: boolean;
+  enableMultiSelect?: boolean;
+  onTaskClick?: (task: GanttTask, event: React.MouseEvent) => void;
+  onTaskDoubleClick?: (task: GanttTask) => void;
+  onTaskExpand?: (taskId: string) => void;
+  onSelectionChange?: (selection: SelectionState) => void;
+  onColumnResize?: (columnField: string, newWidth: number) => void;
+  onTaskUpdate?: (taskId: string, field: string, value: any) => void;
+  className?: string;
+}
+
+const GanttGrid: React.FC<GanttGridProps> = ({
+  tasks,
+  columns,
+  rowHeight,
+  containerHeight,
+  selection,
+  enableInlineEdit = true,
+  enableMultiSelect = true,
+  onTaskClick,
+  onTaskDoubleClick,
+  onTaskExpand,
+  onSelectionChange,
+  onColumnResize,
+  onTaskUpdate,
+  className = '',
+}) => {
+  const [editingCell, setEditingCell] = useState<{ taskId: string; field: string } | null>(null);
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>(
+    columns.reduce((acc, col) => ({ ...acc, [col.field]: col.width }), {})
+  );
+  const gridRef = useRef<HTMLDivElement>(null);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+
+  // Theme-aware colors
+  const colors = useMemo(() => ({
+    background: themeWiseColor('#ffffff', '#1f2937', themeMode),
+    alternateRow: themeWiseColor('#f9fafb', '#374151', themeMode),
+    border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
+    text: themeWiseColor('#111827', '#f9fafb', themeMode),
+    textSecondary: themeWiseColor('#6b7280', '#d1d5db', themeMode),
+    selected: themeWiseColor('#eff6ff', '#1e3a8a', themeMode),
+    hover: themeWiseColor('#f3f4f6', '#4b5563', themeMode),
+    headerBg: themeWiseColor('#f8f9fa', '#374151', themeMode),
+  }), [themeMode]);
+
+  // Calculate total grid width
+  const totalWidth = useMemo(() => {
+    return columns.reduce((sum, col) => sum + columnWidths[col.field], 0);
+  }, [columns, columnWidths]);
+
+  // Handle column resize
+  const handleColumnResize = useCallback((columnField: string, deltaX: number) => {
+    const column = columns.find(col => col.field === columnField);
+    if (!column) return;
+
+    const currentWidth = columnWidths[columnField];
+    const newWidth = Math.max(column.minWidth || 60, Math.min(column.maxWidth || 400, currentWidth + deltaX));
+    
+    setColumnWidths(prev => ({ ...prev, [columnField]: newWidth }));
+    onColumnResize?.(columnField, newWidth);
+  }, [columns, columnWidths, onColumnResize]);
+
+  // Handle task selection
+  const handleTaskSelection = useCallback((task: GanttTask, event: React.MouseEvent) => {
+    const { ctrlKey, shiftKey } = event;
+    let newSelectedTasks = [...selection.selectedTasks];
+
+    if (shiftKey && enableMultiSelect && selection.selectedTasks.length > 0) {
+      // Range selection
+      const lastSelectedIndex = tasks.findIndex(t => t.id === selection.selectedTasks[selection.selectedTasks.length - 1]);
+      const currentIndex = tasks.findIndex(t => t.id === task.id);
+      const [start, end] = [Math.min(lastSelectedIndex, currentIndex), Math.max(lastSelectedIndex, currentIndex)];
+      
+      newSelectedTasks = tasks.slice(start, end + 1).map(t => t.id);
+    } else if (ctrlKey && enableMultiSelect) {
+      // Multi selection
+      if (newSelectedTasks.includes(task.id)) {
+        newSelectedTasks = newSelectedTasks.filter(id => id !== task.id);
+      } else {
+        newSelectedTasks.push(task.id);
+      }
+    } else {
+      // Single selection
+      newSelectedTasks = [task.id];
+    }
+
+    onSelectionChange?.({
+      ...selection,
+      selectedTasks: newSelectedTasks,
+      focusedTask: task.id,
+    });
+
+    onTaskClick?.(task, event);
+  }, [tasks, selection, enableMultiSelect, onSelectionChange, onTaskClick]);
+
+  // Handle cell editing
+  const handleCellDoubleClick = useCallback((task: GanttTask, column: ColumnConfig) => {
+    if (!enableInlineEdit || !column.editor) return;
+    
+    setEditingCell({ taskId: task.id, field: column.field });
+  }, [enableInlineEdit]);
+
+  const handleCellEditComplete = useCallback((value: any) => {
+    if (!editingCell) return;
+    
+    onTaskUpdate?.(editingCell.taskId, editingCell.field, value);
+    setEditingCell(null);
+  }, [editingCell, onTaskUpdate]);
+
+  // Render cell content
+  const renderCellContent = useCallback((task: GanttTask, column: ColumnConfig) => {
+    const value = task[column.field as keyof GanttTask];
+    const isEditing = editingCell?.taskId === task.id && editingCell?.field === column.field;
+
+    if (isEditing) {
+      return renderCellEditor(value, column, handleCellEditComplete);
+    }
+
+    if (column.renderer) {
+      return column.renderer(value, task);
+    }
+
+    // Default renderers
+    switch (column.field) {
+      case 'name':
+        return (
+          <div className="flex items-center space-x-2">
+            {task.hasChildren && (
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onTaskExpand?.(task.id);
+                }}
+                className="p-0.5 hover:bg-gray-200 dark:hover:bg-gray-600 rounded"
+              >
+                {task.isExpanded ? (
+                  <ChevronDownIcon className="w-3 h-3" />
+                ) : (
+                  <ChevronRightIcon className="w-3 h-3" />
+                )}
+              </button>
+            )}
+            <div 
+              className="flex items-center space-x-2"
+              style={{ paddingLeft: `${(task.level || 0) * 16}px` }}
+            >
+              {getTaskTypeIcon(task.type)}
+              <span className="truncate font-medium">{task.name}</span>
+            </div>
+          </div>
+        );
+      
+      case 'startDate':
+      case 'endDate':
+        return (
+          <div className="flex items-center space-x-1">
+            <CalendarIcon className="w-3 h-3 text-gray-400" />
+            <span>{(value as Date)?.toLocaleDateString() || '-'}</span>
+          </div>
+        );
+      
+      case 'assignee':
+        return task.assignee ? (
+          <div className="flex items-center space-x-2">
+            {task.assignee.avatar ? (
+              <img 
+                src={task.assignee.avatar} 
+                alt={task.assignee.name}
+                className="w-6 h-6 rounded-full"
+              />
+            ) : (
+              <UserIcon className="w-6 h-6 text-gray-400" />
+            )}
+            <span className="truncate">{task.assignee.name}</span>
+          </div>
+        ) : (
+          <span className="text-gray-400">Unassigned</span>
+        );
+      
+      case 'progress':
+        return (
+          <div className="flex items-center space-x-2">
+            <div className="flex-1 bg-gray-200 dark:bg-gray-600 rounded-full h-2">
+              <div
+                className="bg-blue-500 h-2 rounded-full transition-all duration-300"
+                style={{ width: `${task.progress}%` }}
+              />
+            </div>
+            <span className="text-xs w-8 text-right">{task.progress}%</span>
+          </div>
+        );
+      
+      case 'status':
+        return (
+          <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
+            {task.status.replace('-', ' ')}
+          </span>
+        );
+      
+      case 'priority':
+        return (
+          <div className="flex items-center space-x-1">
+            <FlagIcon className={`w-3 h-3 ${getPriorityColor(task.priority)}`} />
+            <span className="capitalize">{task.priority}</span>
+          </div>
+        );
+      
+      case 'duration':
+        const duration = task.duration || Math.ceil((task.endDate.getTime() - task.startDate.getTime()) / (1000 * 60 * 60 * 24));
+        return <span>{duration}d</span>;
+      
+      default:
+        return <span>{String(value || '')}</span>;
+    }
+  }, [editingCell, onTaskExpand, handleCellEditComplete]);
+
+  // Render header
+  const renderHeader = () => (
+    <div 
+      className="grid-header flex border-b sticky top-0 z-10"
+      style={{ 
+        backgroundColor: colors.headerBg,
+        borderColor: colors.border,
+        height: rowHeight,
+      }}
+    >
+      {columns.map((column, index) => (
+        <div
+          key={column.field}
+          className="column-header flex items-center px-3 py-2 font-medium text-sm border-r relative group"
+          style={{
+            width: columnWidths[column.field],
+            borderColor: colors.border,
+            color: colors.text,
+          }}
+        >
+          <span className="truncate" title={column.title}>
+            {column.title}
+          </span>
+          
+          {/* Resize handle */}
+          {column.resizable && (
+            <ResizeHandle
+              onResize={(deltaX) => handleColumnResize(column.field, deltaX)}
+              className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-blue-500 opacity-0 group-hover:opacity-100"
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+
+  // Render task rows
+  const renderRows = () => (
+    <div className="grid-body">
+      {tasks.map((task, rowIndex) => {
+        const isSelected = selection.selectedTasks.includes(task.id);
+        const isFocused = selection.focusedTask === task.id;
+        
+        return (
+          <div
+            key={task.id}
+            className={`grid-row flex border-b cursor-pointer hover:bg-opacity-75 ${
+              isSelected ? 'bg-blue-50 dark:bg-blue-900 bg-opacity-50' : 
+              rowIndex % 2 === 0 ? '' : 'bg-gray-50 dark:bg-gray-800 bg-opacity-30'
+            }`}
+            style={{
+              height: rowHeight,
+              borderColor: colors.border,
+              backgroundColor: isSelected ? colors.selected : 
+                              rowIndex % 2 === 0 ? 'transparent' : colors.alternateRow,
+            }}
+            onClick={(e) => handleTaskSelection(task, e)}
+            onDoubleClick={() => onTaskDoubleClick?.(task)}
+          >
+            {columns.map((column) => (
+              <div
+                key={`${task.id}-${column.field}`}
+                className="grid-cell flex items-center px-3 py-1 border-r overflow-hidden"
+                style={{
+                  width: columnWidths[column.field],
+                  borderColor: colors.border,
+                  textAlign: column.align || 'left',
+                }}
+                onDoubleClick={() => handleCellDoubleClick(task, column)}
+              >
+                {renderCellContent(task, column)}
+              </div>
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <div
+      ref={gridRef}
+      className={`gantt-grid border-r ${className}`}
+      style={{
+        width: totalWidth,
+        height: containerHeight,
+        backgroundColor: colors.background,
+        borderColor: colors.border,
+      }}
+    >
+      {renderHeader()}
+      <div 
+        className="grid-content overflow-auto"
+        style={{ height: containerHeight - rowHeight }}
+      >
+        {renderRows()}
+      </div>
+    </div>
+  );
+};
+
+// Resize handle component
+interface ResizeHandleProps {
+  onResize: (deltaX: number) => void;
+  className?: string;
+}
+
+const ResizeHandle: React.FC<ResizeHandleProps> = ({ onResize, className }) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const startXRef = useRef<number>(0);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    setIsDragging(true);
+    startXRef.current = e.clientX;
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      const deltaX = moveEvent.clientX - startXRef.current;
+      onResize(deltaX);
+      startXRef.current = moveEvent.clientX;
+    };
+
+    const handleMouseUp = () => {
+      setIsDragging(false);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [onResize]);
+
+  return (
+    <div
+      className={`resize-handle ${className} ${isDragging ? 'bg-blue-500' : ''}`}
+      onMouseDown={handleMouseDown}
+    />
+  );
+};
+
+// Cell editor component
+const renderCellEditor = (value: any, column: ColumnConfig, onComplete: (value: any) => void) => {
+  const [editValue, setEditValue] = useState(value);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      onComplete(editValue);
+    } else if (e.key === 'Escape') {
+      onComplete(value); // Cancel editing
+    }
+  };
+
+  const handleBlur = () => {
+    onComplete(editValue);
+  };
+
+  switch (column.editor) {
+    case 'text':
+      return (
+        <input
+          type="text"
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className="w-full px-1 py-0.5 border rounded text-sm"
+          autoFocus
+        />
+      );
+    
+    case 'date':
+      return (
+        <input
+          type="date"
+          value={editValue instanceof Date ? editValue.toISOString().split('T')[0] : editValue}
+          onChange={(e) => setEditValue(new Date(e.target.value))}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className="w-full px-1 py-0.5 border rounded text-sm"
+          autoFocus
+        />
+      );
+    
+    case 'number':
+      return (
+        <input
+          type="number"
+          value={editValue}
+          onChange={(e) => setEditValue(parseFloat(e.target.value))}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className="w-full px-1 py-0.5 border rounded text-sm"
+          autoFocus
+        />
+      );
+    
+    case 'select':
+      return (
+        <select
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={handleBlur}
+          className="w-full px-1 py-0.5 border rounded text-sm"
+          autoFocus
+        >
+          {column.editorOptions?.map((option: any) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+      );
+    
+    default:
+      return <span>{String(value)}</span>;
+  }
+};
+
+// Helper functions
+const getTaskTypeIcon = (type: GanttTask['type']) => {
+  switch (type) {
+    case 'project':
+      return <div className="w-3 h-3 bg-blue-500 rounded-sm" />;
+    case 'milestone':
+      return <div className="w-3 h-3 bg-yellow-500 rotate-45" />;
+    default:
+      return <div className="w-3 h-3 bg-gray-400 rounded-full" />;
+  }
+};
+
+const getStatusColor = (status: GanttTask['status']) => {
+  switch (status) {
+    case 'completed':
+      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+    case 'in-progress':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+    case 'overdue':
+      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+    case 'on-hold':
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
+  }
+};
+
+const getPriorityColor = (priority: GanttTask['priority']) => {
+  switch (priority) {
+    case 'critical':
+      return 'text-red-600';
+    case 'high':
+      return 'text-orange-500';
+    case 'medium':
+      return 'text-yellow-500';
+    case 'low':
+      return 'text-green-500';
+    default:
+      return 'text-gray-400';
+  }
+};
+
+export default GanttGrid;

worklenz-frontend/src/components/advanced-gantt/TimelineMarkers.tsx

@@ -0,0 +1,295 @@
+import React, { useMemo } from 'react';
+import { Holiday, TimelineConfig } from '../../types/advanced-gantt.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+import { useDateCalculations } from '../../utils/gantt-performance';
+
+interface TimelineMarkersProps {
+  startDate: Date;
+  endDate: Date;
+  dayWidth: number;
+  containerHeight: number;
+  timelineConfig: TimelineConfig;
+  holidays?: Holiday[];
+  showWeekends?: boolean;
+  showHolidays?: boolean;
+  showToday?: boolean;
+  className?: string;
+}
+
+const TimelineMarkers: React.FC<TimelineMarkersProps> = ({
+  startDate,
+  endDate,
+  dayWidth,
+  containerHeight,
+  timelineConfig,
+  holidays = [],
+  showWeekends = true,
+  showHolidays = true,
+  showToday = true,
+  className = '',
+}) => {
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const { getDaysBetween, isWeekend, isWorkingDay } = useDateCalculations();
+
+  // Generate all dates in the timeline
+  const timelineDates = useMemo(() => {
+    const dates: Date[] = [];
+    const totalDays = getDaysBetween(startDate, endDate);
+    
+    for (let i = 0; i <= totalDays; i++) {
+      const date = new Date(startDate);
+      date.setDate(date.getDate() + i);
+      dates.push(date);
+    }
+    
+    return dates;
+  }, [startDate, endDate, getDaysBetween]);
+
+  // Theme-aware colors
+  const colors = useMemo(() => ({
+    weekend: themeWiseColor('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)', themeMode),
+    nonWorkingDay: themeWiseColor('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)', themeMode),
+    holiday: themeWiseColor('rgba(255, 107, 107, 0.1)', 'rgba(255, 107, 107, 0.15)', themeMode),
+    today: themeWiseColor('rgba(24, 144, 255, 0.15)', 'rgba(64, 169, 255, 0.2)', themeMode),
+    todayLine: themeWiseColor('#1890ff', '#40a9ff', themeMode),
+    holidayBorder: themeWiseColor('#ff6b6b', '#ff8787', themeMode),
+  }), [themeMode]);
+
+  // Check if a date is a holiday
+  const isHoliday = (date: Date): Holiday | undefined => {
+    return holidays.find(holiday => {
+      if (holiday.recurring) {
+        return holiday.date.getMonth() === date.getMonth() && 
+               holiday.date.getDate() === date.getDate();
+      }
+      return holiday.date.toDateString() === date.toDateString();
+    });
+  };
+
+  // Check if date is today
+  const isToday = (date: Date): boolean => {
+    const today = new Date();
+    return date.toDateString() === today.toDateString();
+  };
+
+  // Render weekend markers
+  const renderWeekendMarkers = () => {
+    if (!showWeekends) return null;
+
+    return timelineDates.map((date, index) => {
+      if (!isWeekend(date)) return null;
+
+      return (
+        <div
+          key={`weekend-${index}`}
+          className="weekend-marker absolute top-0 pointer-events-none"
+          style={{
+            left: index * dayWidth,
+            width: dayWidth,
+            height: containerHeight,
+            backgroundColor: colors.weekend,
+            zIndex: 1,
+          }}
+        />
+      );
+    });
+  };
+
+  // Render non-working day markers
+  const renderNonWorkingDayMarkers = () => {
+    return timelineDates.map((date, index) => {
+      if (isWorkingDay(date, timelineConfig.workingDays)) return null;
+
+      return (
+        <div
+          key={`non-working-${index}`}
+          className="non-working-day-marker absolute top-0 pointer-events-none"
+          style={{
+            left: index * dayWidth,
+            width: dayWidth,
+            height: containerHeight,
+            backgroundColor: colors.nonWorkingDay,
+            zIndex: 1,
+          }}
+        />
+      );
+    });
+  };
+
+  // Render holiday markers
+  const renderHolidayMarkers = () => {
+    if (!showHolidays) return null;
+
+    return timelineDates.map((date, index) => {
+      const holiday = isHoliday(date);
+      if (!holiday) return null;
+
+      const holidayColor = holiday.color || colors.holiday;
+
+      return (
+        <div
+          key={`holiday-${index}`}
+          className="holiday-marker absolute top-0 pointer-events-none group"
+          style={{
+            left: index * dayWidth,
+            width: dayWidth,
+            height: containerHeight,
+            backgroundColor: holidayColor,
+            borderLeft: `2px solid ${colors.holidayBorder}`,
+            zIndex: 2,
+          }}
+        >
+          {/* Holiday tooltip */}
+          <div className="holiday-tooltip absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-50">
+            <div className="font-medium">{holiday.name}</div>
+            <div className="text-xs opacity-75">{date.toLocaleDateString()}</div>
+            <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
+          </div>
+
+          {/* Holiday icon */}
+          <div className="holiday-icon absolute top-1 left-1 w-3 h-3 rounded-full bg-red-500 opacity-75">
+            <div className="w-full h-full rounded-full animate-pulse"></div>
+          </div>
+        </div>
+      );
+    });
+  };
+
+  // Render today marker
+  const renderTodayMarker = () => {
+    if (!showToday) return null;
+
+    const todayIndex = timelineDates.findIndex(date => isToday(date));
+    if (todayIndex === -1) return null;
+
+    return (
+      <div
+        className="today-marker absolute top-0 pointer-events-none"
+        style={{
+          left: todayIndex * dayWidth,
+          width: dayWidth,
+          height: containerHeight,
+          backgroundColor: colors.today,
+          zIndex: 3,
+        }}
+      >
+        {/* Today line */}
+        <div
+          className="today-line absolute top-0 left-1/2 transform -translate-x-1/2"
+          style={{
+            width: '2px',
+            height: containerHeight,
+            backgroundColor: colors.todayLine,
+            zIndex: 4,
+          }}
+        />
+
+        {/* Today label */}
+        <div className="today-label absolute top-2 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white text-xs px-2 py-1 rounded shadow-sm">
+          Today
+        </div>
+      </div>
+    );
+  };
+
+  // Render time period markers (quarters, months, etc.)
+  const renderTimePeriodMarkers = () => {
+    const markers: React.ReactNode[] = [];
+    const currentDate = new Date(startDate);
+    currentDate.setDate(1); // Start of month
+
+    while (currentDate <= endDate) {
+      const daysSinceStart = getDaysBetween(startDate, currentDate);
+      const isQuarterStart = currentDate.getMonth() % 3 === 0 && currentDate.getDate() === 1;
+      const isYearStart = currentDate.getMonth() === 0 && currentDate.getDate() === 1;
+
+      if (isYearStart) {
+        markers.push(
+          <div
+            key={`year-${currentDate.getTime()}`}
+            className="year-marker absolute top-0 border-l-2 border-blue-600 dark:border-blue-400"
+            style={{
+              left: daysSinceStart * dayWidth,
+              height: containerHeight,
+              zIndex: 5,
+            }}
+          >
+            <div className="year-label absolute top-2 left-1 bg-blue-600 dark:bg-blue-400 text-white text-xs px-1 py-0.5 rounded">
+              {currentDate.getFullYear()}
+            </div>
+          </div>
+        );
+      } else if (isQuarterStart) {
+        markers.push(
+          <div
+            key={`quarter-${currentDate.getTime()}`}
+            className="quarter-marker absolute top-0 border-l border-green-500 dark:border-green-400 opacity-60"
+            style={{
+              left: daysSinceStart * dayWidth,
+              height: containerHeight,
+              zIndex: 4,
+            }}
+          >
+            <div className="quarter-label absolute top-2 left-1 bg-green-500 dark:bg-green-400 text-white text-xs px-1 py-0.5 rounded">
+              Q{Math.floor(currentDate.getMonth() / 3) + 1}
+            </div>
+          </div>
+        );
+      }
+
+      // Move to next month
+      currentDate.setMonth(currentDate.getMonth() + 1);
+    }
+
+    return markers;
+  };
+
+  return (
+    <div className={`timeline-markers absolute inset-0 ${className}`}>
+      {renderNonWorkingDayMarkers()}
+      {renderWeekendMarkers()}
+      {renderHolidayMarkers()}
+      {renderTodayMarker()}
+      {renderTimePeriodMarkers()}
+    </div>
+  );
+};
+
+// Holiday presets for common countries
+export const holidayPresets = {
+  US: [
+    { date: new Date(2024, 0, 1), name: "New Year's Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 0, 15), name: "Martin Luther King Jr. Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 1, 19), name: "Presidents' Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 4, 27), name: "Memorial Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 5, 19), name: "Juneteenth", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 6, 4), name: "Independence Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 8, 2), name: "Labor Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 9, 14), name: "Columbus Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 10, 11), name: "Veterans Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 10, 28), name: "Thanksgiving", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 11, 25), name: "Christmas Day", type: 'national' as const, recurring: true },
+  ],
+  
+  UK: [
+    { date: new Date(2024, 0, 1), name: "New Year's Day", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 2, 29), name: "Good Friday", type: 'religious' as const, recurring: false },
+    { date: new Date(2024, 3, 1), name: "Easter Monday", type: 'religious' as const, recurring: false },
+    { date: new Date(2024, 4, 6), name: "Early May Bank Holiday", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 4, 27), name: "Spring Bank Holiday", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 7, 26), name: "Summer Bank Holiday", type: 'national' as const, recurring: true },
+    { date: new Date(2024, 11, 25), name: "Christmas Day", type: 'religious' as const, recurring: true },
+    { date: new Date(2024, 11, 26), name: "Boxing Day", type: 'national' as const, recurring: true },
+  ],
+};
+
+// Working day presets
+export const workingDayPresets = {
+  standard: [1, 2, 3, 4, 5], // Monday to Friday
+  middle_east: [0, 1, 2, 3, 4], // Sunday to Thursday
+  six_day: [1, 2, 3, 4, 5, 6], // Monday to Saturday
+  four_day: [1, 2, 3, 4], // Monday to Thursday
+};
+
+export default TimelineMarkers;

worklenz-frontend/src/components/advanced-gantt/VirtualScrollContainer.tsx

@@ -0,0 +1,372 @@
+import React, { useRef, useEffect, useState, useCallback, ReactNode } from 'react';
+import { useThrottle, usePerformanceMonitoring } from '../../utils/gantt-performance';
+import { useAppSelector } from '../../hooks/useAppSelector';
+
+interface VirtualScrollContainerProps {
+  items: any[];
+  itemHeight: number;
+  containerHeight: number;
+  containerWidth?: number;
+  overscan?: number;
+  horizontal?: boolean;
+  children: (item: any, index: number, style: React.CSSProperties) => ReactNode;
+  onScroll?: (scrollLeft: number, scrollTop: number) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const VirtualScrollContainer: React.FC<VirtualScrollContainerProps> = ({
+  items,
+  itemHeight,
+  containerHeight,
+  containerWidth = 0,
+  overscan = 5,
+  horizontal = false,
+  children,
+  onScroll,
+  className = '',
+  style = {},
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const { startMeasure, endMeasure, recordMetric } = usePerformanceMonitoring();
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+
+  // Calculate visible range
+  const totalHeight = items.length * itemHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const endIndex = Math.min(
+    items.length - 1,
+    Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
+  );
+  const visibleItems = items.slice(startIndex, endIndex + 1);
+  const offsetY = startIndex * itemHeight;
+
+  // Throttled scroll handler
+  const throttledScrollHandler = useThrottle(
+    useCallback((event: Event) => {
+      const target = event.target as HTMLDivElement;
+      const newScrollTop = target.scrollTop;
+      const newScrollLeft = target.scrollLeft;
+      
+      setScrollTop(newScrollTop);
+      setScrollLeft(newScrollLeft);
+      onScroll?.(newScrollLeft, newScrollTop);
+    }, [onScroll]),
+    16 // ~60fps
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('scroll', throttledScrollHandler, { passive: true });
+    
+    return () => {
+      container.removeEventListener('scroll', throttledScrollHandler);
+    };
+  }, [throttledScrollHandler]);
+
+  // Performance monitoring
+  useEffect(() => {
+    startMeasure('virtualScroll');
+    recordMetric('visibleTaskCount', visibleItems.length);
+    recordMetric('taskCount', items.length);
+    endMeasure('virtualScroll');
+  }, [visibleItems.length, items.length, startMeasure, endMeasure, recordMetric]);
+
+  const renderVisibleItems = () => {
+    return visibleItems.map((item, virtualIndex) => {
+      const actualIndex = startIndex + virtualIndex;
+      const itemStyle: React.CSSProperties = {
+        position: 'absolute',
+        top: horizontal ? 0 : actualIndex * itemHeight,
+        left: horizontal ? actualIndex * itemHeight : 0,
+        height: horizontal ? '100%' : itemHeight,
+        width: horizontal ? itemHeight : '100%',
+        transform: horizontal ? 'none' : `translateY(${offsetY}px)`,
+      };
+
+      return (
+        <div key={item.id || actualIndex} style={itemStyle}>
+          {children(item, actualIndex, itemStyle)}
+        </div>
+      );
+    });
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`virtual-scroll-container overflow-auto ${className}`}
+      style={{
+        height: containerHeight,
+        width: containerWidth || '100%',
+        position: 'relative',
+        ...style,
+      }}
+    >
+      {/* Spacer to maintain scroll height */}
+      <div
+        className="virtual-scroll-spacer"
+        style={{
+          height: horizontal ? '100%' : totalHeight,
+          width: horizontal ? totalHeight : '100%',
+          position: 'relative',
+          pointerEvents: 'none',
+        }}
+      >
+        {/* Visible items container */}
+        <div
+          className="virtual-scroll-content"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            height: '100%',
+            width: '100%',
+            pointerEvents: 'auto',
+          }}
+        >
+          {renderVisibleItems()}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Grid virtual scrolling component for both rows and columns
+interface VirtualGridProps {
+  data: any[][];
+  rowHeight: number;
+  columnWidth: number | number[];
+  containerHeight: number;
+  containerWidth: number;
+  overscan?: number;
+  children: (item: any, rowIndex: number, colIndex: number, style: React.CSSProperties) => ReactNode;
+  onScroll?: (scrollLeft: number, scrollTop: number) => void;
+  className?: string;
+}
+
+export const VirtualGrid: React.FC<VirtualGridProps> = ({
+  data,
+  rowHeight,
+  columnWidth,
+  containerHeight,
+  containerWidth,
+  overscan = 3,
+  children,
+  onScroll,
+  className = '',
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+
+  const rowCount = data.length;
+  const colCount = data[0]?.length || 0;
+
+  // Calculate column positions for variable width columns
+  const columnWidths = Array.isArray(columnWidth) ? columnWidth : new Array(colCount).fill(columnWidth);
+  const columnPositions = columnWidths.reduce((acc, width, index) => {
+    acc[index] = index === 0 ? 0 : acc[index - 1] + columnWidths[index - 1];
+    return acc;
+  }, {} as Record<number, number>);
+
+  const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0);
+  const totalHeight = rowCount * rowHeight;
+
+  // Calculate visible ranges
+  const startRowIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const endRowIndex = Math.min(rowCount - 1, Math.ceil((scrollTop + containerHeight) / rowHeight) + overscan);
+
+  const startColIndex = Math.max(0, findColumnIndex(scrollLeft) - overscan);
+  const endColIndex = Math.min(colCount - 1, findColumnIndex(scrollLeft + containerWidth) + overscan);
+
+  function findColumnIndex(position: number): number {
+    for (let i = 0; i < colCount; i++) {
+      if (columnPositions[i] <= position && position < columnPositions[i] + columnWidths[i]) {
+        return i;
+      }
+    }
+    return colCount - 1;
+  }
+
+  const throttledScrollHandler = useThrottle(
+    useCallback((event: Event) => {
+      const target = event.target as HTMLDivElement;
+      const newScrollTop = target.scrollTop;
+      const newScrollLeft = target.scrollLeft;
+      
+      setScrollTop(newScrollTop);
+      setScrollLeft(newScrollLeft);
+      onScroll?.(newScrollLeft, newScrollTop);
+    }, [onScroll]),
+    16
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('scroll', throttledScrollHandler, { passive: true });
+    
+    return () => {
+      container.removeEventListener('scroll', throttledScrollHandler);
+    };
+  }, [throttledScrollHandler]);
+
+  const renderVisibleCells = () => {
+    const cells: ReactNode[] = [];
+
+    for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
+      for (let colIndex = startColIndex; colIndex <= endColIndex; colIndex++) {
+        const item = data[rowIndex]?.[colIndex];
+        if (!item) continue;
+
+        const cellStyle: React.CSSProperties = {
+          position: 'absolute',
+          top: rowIndex * rowHeight,
+          left: columnPositions[colIndex],
+          height: rowHeight,
+          width: columnWidths[colIndex],
+        };
+
+        cells.push(
+          <div key={`${rowIndex}-${colIndex}`} style={cellStyle}>
+            {children(item, rowIndex, colIndex, cellStyle)}
+          </div>
+        );
+      }
+    }
+
+    return cells;
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`virtual-grid overflow-auto ${className}`}
+      style={{
+        height: containerHeight,
+        width: containerWidth,
+        position: 'relative',
+      }}
+    >
+      <div
+        style={{
+          height: totalHeight,
+          width: totalWidth,
+          position: 'relative',
+        }}
+      >
+        {renderVisibleCells()}
+      </div>
+    </div>
+  );
+};
+
+// Timeline virtual scrolling component
+interface VirtualTimelineProps {
+  startDate: Date;
+  endDate: Date;
+  dayWidth: number;
+  containerWidth: number;
+  containerHeight: number;
+  overscan?: number;
+  children: (date: Date, index: number, style: React.CSSProperties) => ReactNode;
+  onScroll?: (scrollLeft: number) => void;
+  className?: string;
+}
+
+export const VirtualTimeline: React.FC<VirtualTimelineProps> = ({
+  startDate,
+  endDate,
+  dayWidth,
+  containerWidth,
+  containerHeight,
+  overscan = 10,
+  children,
+  onScroll,
+  className = '',
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [scrollLeft, setScrollLeft] = useState(0);
+
+  const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
+  const totalWidth = totalDays * dayWidth;
+
+  const startDayIndex = Math.max(0, Math.floor(scrollLeft / dayWidth) - overscan);
+  const endDayIndex = Math.min(totalDays - 1, Math.ceil((scrollLeft + containerWidth) / dayWidth) + overscan);
+
+  const throttledScrollHandler = useThrottle(
+    useCallback((event: Event) => {
+      const target = event.target as HTMLDivElement;
+      const newScrollLeft = target.scrollLeft;
+      setScrollLeft(newScrollLeft);
+      onScroll?.(newScrollLeft);
+    }, [onScroll]),
+    16
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('scroll', throttledScrollHandler, { passive: true });
+    
+    return () => {
+      container.removeEventListener('scroll', throttledScrollHandler);
+    };
+  }, [throttledScrollHandler]);
+
+  const renderVisibleDays = () => {
+    const days: ReactNode[] = [];
+
+    for (let dayIndex = startDayIndex; dayIndex <= endDayIndex; dayIndex++) {
+      const date = new Date(startDate);
+      date.setDate(date.getDate() + dayIndex);
+
+      const dayStyle: React.CSSProperties = {
+        position: 'absolute',
+        left: dayIndex * dayWidth,
+        top: 0,
+        width: dayWidth,
+        height: '100%',
+      };
+
+      days.push(
+        <div key={dayIndex} style={dayStyle}>
+          {children(date, dayIndex, dayStyle)}
+        </div>
+      );
+    }
+
+    return days;
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`virtual-timeline overflow-x-auto ${className}`}
+      style={{
+        height: containerHeight,
+        width: containerWidth,
+        position: 'relative',
+      }}
+    >
+      <div
+        style={{
+          height: '100%',
+          width: totalWidth,
+          position: 'relative',
+        }}
+      >
+        {renderVisibleDays()}
+      </div>
+    </div>
+  );
+};
+
+export default VirtualScrollContainer;

worklenz-frontend/src/components/advanced-gantt/index.ts

@@ -0,0 +1,17 @@
+// Main Components
+export { default as AdvancedGanttChart } from './AdvancedGanttChart';
+export { default as AdvancedGanttDemo } from './AdvancedGanttDemo';
+
+// Core Components
+export { default as GanttGrid } from './GanttGrid';
+export { default as DraggableTaskBar } from './DraggableTaskBar';
+export { default as TimelineMarkers, holidayPresets, workingDayPresets } from './TimelineMarkers';
+
+// Utility Components
+export { default as VirtualScrollContainer, VirtualGrid, VirtualTimeline } from './VirtualScrollContainer';
+
+// Types
+export * from '../../types/advanced-gantt.types';
+
+// Performance Utilities
+export * from '../../utils/gantt-performance';

worklenz-frontend/src/components/common/invite-team-members/invite-team-members.tsx

@@ -1,4 +1,14 @@
-import { AutoComplete, Button, Drawer, Flex, Form, message, Select, Spin, Typography } from '@/shared/antd-imports';
+import {
+  AutoComplete,
+  Button,
+  Flex,
+  Form,
+  message,
+  Modal,
+  Select,
+  Spin,
+  Typography,
+} from '@/shared/antd-imports';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import {
@@ -87,23 +97,33 @@ const InviteTeamMembers = () => {
   };
 
   return (
-    <Drawer
+    <Modal
       title={
         <Typography.Text strong style={{ fontSize: 16 }}>
           {t('addMemberDrawerTitle')}
         </Typography.Text>
       }
       open={isDrawerOpen}
-      onClose={handleClose}
+      onCancel={handleClose}
       destroyOnClose
       afterOpenChange={visible => visible && handleSearch('')}
       width={400}
       loading={loading}
       footer={
-        <Flex justify="end">
-          <Button type="primary" onClick={form.submit}>
-            {t('addToTeamButton')}
-          </Button>
+        <Flex justify="space-between">
+          {/* <Button
+            style={{ width: 140, fontSize: 12 }}
+            block
+            icon={<LinkOutlined />}
+            disabled
+          >
+            {t('copyTeamLink')}
+          </Button> */}
+          <Flex justify="end">
+            <Button onClick={form.submit} style={{ fontSize: 12 }}>
+              {t('addToTeamButton')}
+            </Button>
+          </Flex>
         </Flex>
       }
     >
@@ -176,7 +196,7 @@ const InviteTeamMembers = () => {
           />
         </Form.Item>
       </Form>
-    </Drawer>
+    </Modal>
   );
 };
 

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/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx

@@ -8,7 +8,7 @@ import ImprovedTaskFilters from '../../task-management/improved-task-filters';
 import Card from 'antd/es/card';
 import Spin from 'antd/es/spin';
 import Empty from 'antd/es/empty';
-import { reorderGroups, reorderEnhancedKanbanGroups, reorderTasks, reorderEnhancedKanbanTasks, fetchEnhancedKanbanLabels, fetchEnhancedKanbanGroups, fetchEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import { reorderGroups, reorderEnhancedKanbanGroups, reorderTasks, reorderEnhancedKanbanTasks, fetchEnhancedKanbanLabels, fetchEnhancedKanbanGroups, fetchEnhancedKanbanTaskAssignees, updateEnhancedKanbanTaskPriority } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import KanbanGroup from './KanbanGroup';
@@ -21,8 +21,14 @@ import alertService from '@/services/alerts/alertService';
 import logger from '@/utils/errorLogger';
 import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
+import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service';
+import { ITaskListGroup } from '@/types/tasks/taskList.types';
+import { fetchPhasesByProjectId, updatePhaseListOrder } from '@/features/projects/singleProject/phase/phases.slice';
+import { useTranslation } from 'react-i18next';
+import { ITaskListPriorityChangeResponse } from '@/types/tasks/task-list-priority.types';
 
 const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
+  const { t } = useTranslation('kanban-board');
   const dispatch = useDispatch();
   const authService = useAuthService();
   const { socket } = useSocket();
@@ -34,6 +40,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     loadingGroups,
     error,
   } = useSelector((state: RootState) => state.enhancedKanbanReducer);
+  const { phaseList, loadingPhases } = useAppSelector(state => state.phaseReducer);
   const [draggedGroupId, setDraggedGroupId] = useState<string | null>(null);
   const [draggedTaskId, setDraggedTaskId] = useState<string | null>(null);
   const [draggedTaskGroupId, setDraggedTaskGroupId] = useState<string | null>(null);
@@ -56,6 +63,9 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     if (!statusCategories.length) {
       dispatch(fetchStatusesCategories() as any);
     }
+    if (groupBy === 'phase' && !phaseList.length) {
+      dispatch(fetchPhasesByProjectId(projectId) as any);
+    }
   }, [dispatch, projectId]);
   // Reset drag state if taskGroups changes (e.g., real-time update)
   useEffect(() => {
@@ -72,6 +82,9 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     setDraggedGroupId(groupId);
     setDragType('group');
     e.dataTransfer.effectAllowed = 'move';
+    try {
+      e.dataTransfer.setData('text/plain', groupId);
+    } catch {}
   };
   const handleGroupDragOver = (e: React.DragEvent) => {
     if (dragType !== 'group') return;
@@ -90,19 +103,35 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     reorderedGroups.splice(toIdx, 0, moved);
     dispatch(reorderGroups({ fromIndex: fromIdx, toIndex: toIdx, reorderedGroups }));
     dispatch(reorderEnhancedKanbanGroups({ fromIndex: fromIdx, toIndex: toIdx, reorderedGroups }) as any);
-
     // API call for group order
     try {
-      const columnOrder = reorderedGroups.map(group => group.id);
-      const requestBody = { status_order: columnOrder };
-      const response = await statusApiService.updateStatusOrder(requestBody, projectId);
-      if (!response.done) {
-        // Revert the change if API call fails
-        const revertedGroups = [...reorderedGroups];
-        const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
-        revertedGroups.splice(fromIdx, 0, movedBackGroup);
-        dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
-        alertService.error('Failed to update column order', 'Please try again');
+      if (groupBy === 'status') {
+        const columnOrder = reorderedGroups.map(group => group.id);
+        const requestBody = { status_order: columnOrder };
+        const response = await statusApiService.updateStatusOrder(requestBody, projectId);
+        if (!response.done) {
+          // Revert the change if API call fails
+          const revertedGroups = [...reorderedGroups];
+          const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
+          revertedGroups.splice(fromIdx, 0, movedBackGroup);
+          dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
+          alertService.error(t('failedToUpdateColumnOrder'), t('pleaseTryAgain'));
+        }
+      } else if (groupBy === 'phase') {
+        const newPhaseList = [...phaseList];
+        const [movedItem] = newPhaseList.splice(fromIdx, 1);
+        newPhaseList.splice(toIdx, 0, movedItem);
+        dispatch(updatePhaseListOrder(newPhaseList));
+        const requestBody = {
+          from_index: fromIdx,
+          to_index: toIdx,
+          phases: newPhaseList,
+          project_id: projectId,
+        };
+        const response = await phasesApiService.updatePhaseOrder(projectId, requestBody);
+        if (!response.done) {
+          alertService.error(t('failedToUpdatePhaseOrder'), t('pleaseTryAgain'));
+        }
       }
     } catch (error) {
       // Revert the change if API call fails
@@ -110,7 +139,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
       const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
       revertedGroups.splice(fromIdx, 0, movedBackGroup);
       dispatch(reorderGroups({ fromIndex: toIdx, toIndex: fromIdx, reorderedGroups: revertedGroups }));
-      alertService.error('Failed to update column order', 'Please try again');
+      alertService.error(t('failedToUpdateColumnOrder'), t('pleaseTryAgain'));
       logger.error('Failed to update column order', error);
     }
 
@@ -118,12 +147,47 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     setDragType(null);
   };
 
+  // Utility to recalculate all task orders for all groups
+  function getAllTaskUpdates(allGroups: ITaskListGroup[], groupBy: string) {
+    const taskUpdates: Array<{
+      task_id: string | undefined;
+      sort_order: number;
+      status_id?: string;
+      priority_id?: string;
+      phase_id?: string;
+    }> = [];
+    let currentSortOrder = 0;
+    for (const group of allGroups) {
+      for (const task of group.tasks) {
+        const update: {
+          task_id: string | undefined;
+          sort_order: number;
+          status_id?: string;
+          priority_id?: string;
+          phase_id?: string;
+        } = {
+          task_id: task.id,
+          sort_order: currentSortOrder,
+        };
+        if (groupBy === 'status') update.status_id = group.id;
+        else if (groupBy === 'priority') update.priority_id = group.id;
+        else if (groupBy === 'phase' && group.name !== 'Unmapped') update.phase_id = group.id;
+        taskUpdates.push(update);
+        currentSortOrder++;
+      }
+    }
+    return taskUpdates;
+  }
+
   // Task drag handlers
   const handleTaskDragStart = (e: React.DragEvent, taskId: string, groupId: string) => {
     setDraggedTaskId(taskId);
     setDraggedTaskGroupId(groupId);
     setDragType('task');
     e.dataTransfer.effectAllowed = 'move';
+    try {
+      e.dataTransfer.setData('text/plain', taskId);
+    } catch {}
   };
   const handleTaskDragOver = (e: React.DragEvent, groupId: string, taskIdx: number | null) => {
     if (dragType !== 'task') return;
@@ -157,8 +221,8 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
         const canContinue = await checkTaskDependencyStatus(movedTask.id, targetGroupId);
         if (!canContinue) {
           alertService.error(
-            'Task is not completed',
-            'Please complete the task dependencies before proceeding'
+            t('taskNotCompleted'),
+            t('completeTaskDependencies')
           );
           return;
         }
@@ -168,6 +232,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     let insertIdx = hoveredTaskIdx;
 
     // Handle same group reordering
+    let newTaskGroups = [...taskGroups];
     if (sourceGroup.id === targetGroup.id) {
       // Create a single updated array for the same group
       const updatedTasks = [...sourceGroup.tasks];
@@ -182,7 +247,6 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
       if (insertIdx > updatedTasks.length) insertIdx = updatedTasks.length;
 
       updatedTasks.splice(insertIdx, 0, movedTask); // Insert at new position
-
       dispatch(reorderTasks({
         activeGroupId: sourceGroup.id,
         overGroupId: targetGroup.id,
@@ -201,6 +265,8 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
         updatedSourceTasks: updatedTasks,
         updatedTargetTasks: updatedTasks,
       }) as any);
+      // Update newTaskGroups for socket emit
+      newTaskGroups = newTaskGroups.map(g => g.id === sourceGroup.id ? { ...g, tasks: updatedTasks } : g);
     } else {
       // Handle cross-group reordering
       const updatedSourceTasks = [...sourceGroup.tasks];
@@ -229,34 +295,33 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
         updatedSourceTasks,
         updatedTargetTasks,
       }) as any);
+      // Update newTaskGroups for socket emit
+      newTaskGroups = newTaskGroups.map(g => {
+        if (g.id === sourceGroup.id) return { ...g, tasks: updatedSourceTasks };
+        if (g.id === targetGroup.id) return { ...g, tasks: updatedTargetTasks };
+        return g;
+      });
     }
 
-    // Socket emit for task order
+    // Socket emit for full task order
     if (socket && projectId && teamId && movedTask) {
-      let toSortOrder = -1;
-      let toLastIndex = false;
-      if (insertIdx === targetGroup.tasks.length) {
-        toSortOrder = -1;
-        toLastIndex = true;
-      } else if (targetGroup.tasks[insertIdx]) {
-        const sortOrder = targetGroup.tasks[insertIdx].sort_order;
-        toSortOrder = typeof sortOrder === 'number' ? sortOrder : 0;
-        toLastIndex = false;
-      } else if (targetGroup.tasks.length > 0) {
-        const lastSortOrder = targetGroup.tasks[targetGroup.tasks.length - 1].sort_order;
-        toSortOrder = typeof lastSortOrder === 'number' ? lastSortOrder : 0;
-        toLastIndex = false;
-      }
+      const taskUpdates = getAllTaskUpdates(newTaskGroups, groupBy);
       socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), {
         project_id: projectId,
-        from_index: movedTask.sort_order ?? 0,
-        to_index: toSortOrder,
-        to_last_index: toLastIndex,
+        group_by: groupBy || 'status',
+        task_updates: taskUpdates,
         from_group: sourceGroup.id,
         to_group: targetGroup.id,
-        group_by: groupBy || 'status',
-        task: movedTask,
         team_id: teamId,
+        from_index: taskIdx,
+        to_index: insertIdx,
+        to_last_index: insertIdx === (targetGroup.id === sourceGroup.id ? (newTaskGroups.find(g => g.id === targetGroup.id)?.tasks.length || 0) - 1 : targetGroup.tasks.length),
+        task: {
+          id: movedTask.id,
+          project_id: movedTask.project_id || projectId,
+          status: movedTask.status || '',
+          priority: movedTask.priority || '',
+        }
       });
 
       // Emit progress update if status changed
@@ -271,6 +336,22 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
           })
         );
       }
+      if (groupBy === 'priority' && movedTask.id) {
+        socket?.emit(
+          SocketEvents.TASK_PRIORITY_CHANGE.toString(),
+          JSON.stringify({
+            task_id: movedTask.id,
+            priority_id: targetGroupId,
+            team_id: teamId,
+          })
+        );
+        socket?.once(
+          SocketEvents.TASK_PRIORITY_CHANGE.toString(),
+          (data: ITaskListPriorityChangeResponse) => {
+            dispatch(updateEnhancedKanbanTaskPriority(data));
+          }
+        );
+      }
     }
 
     setDraggedTaskId(null);
@@ -291,7 +372,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
   if (error) {
     return (
       <Card>
-        <Empty description={`Error loading tasks: ${error}`} image={Empty.PRESENTED_IMAGE_SIMPLE} />
+        <Empty description={`${t('errorLoadingTasks')}: ${error}`} image={Empty.PRESENTED_IMAGE_SIMPLE} />
       </Card>
     );
   }
@@ -299,21 +380,21 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
   return (
     <>
       <div className="mb-4">
-        <React.Suspense fallback={<div>Loading filters...</div>}>
+        <React.Suspense fallback={<div>{t('loadingFilters')}</div>}>
           <ImprovedTaskFilters position="board" />
         </React.Suspense>
       </div>
       <div className="enhanced-kanban-board">
         {loadingGroups ? (
-            <div className="flex flex-row gap-2 h-[600px]">
-              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '60%' }} />
-              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '100%' }} />
-              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '80%' }} />
-              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '40%' }} />
-            </div>
+          <div className="flex flex-row gap-2 h-[600px]">
+            <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '60%' }} />
+            <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '100%' }} />
+            <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '80%' }} />
+            <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '40%' }} />
+          </div>
         ) : taskGroups.length === 0 ? (
           <Card>
-            <Empty description="No tasks found" image={Empty.PRESENTED_IMAGE_SIMPLE} />
+            <Empty description={t('noTasksFound')} image={Empty.PRESENTED_IMAGE_SIMPLE} />
           </Card>
         ) : (
           <div className="kanban-groups-container">

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/KanbanGroup.tsx

@@ -25,6 +25,7 @@ import {
     IGroupBy,
 } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import { createPortal } from 'react-dom';
+import { Modal } from 'antd';
 
 // Simple Portal component
 const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -218,7 +219,42 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
     };
 
     const handleDelete = () => {
-        setShowDeleteConfirm(true);
+        if (groupBy === IGroupBy.STATUS) {
+            Modal.confirm({
+                title: t('deleteStatusTitle'),
+                content: t('deleteStatusContent'),
+                okText: t('deleteTaskConfirm'),
+                okType: 'danger',
+                cancelText: t('deleteTaskCancel'),
+                centered: true,
+                onOk: async () => {
+                    await handleDeleteSection();
+                },
+            });
+        } else if (groupBy === IGroupBy.PHASE) {
+            Modal.confirm({
+                title: t('deletePhaseTitle'),
+                content: t('deletePhaseContent'),
+                okText: t('deleteTaskConfirm'),
+                okType: 'danger',
+                cancelText: t('deleteTaskCancel'),
+                centered: true,
+                onOk: async () => {
+                    await handleDeleteSection();
+                },
+            });
+        } else {
+            Modal.confirm({
+                title: t('deleteConfirmationTitle'),
+                okText: t('deleteTaskConfirm'),
+                okType: 'danger',
+                cancelText: t('deleteTaskCancel'),
+                centered: true,
+                onOk: async () => {
+                    await handleDeleteSection();
+                },
+            });
+        }
         setShowDropdown(false);
     };
 
@@ -419,56 +455,7 @@ const KanbanGroup: React.FC<KanbanGroupProps> = memo(({
                 </div>
 
                 {/* Simple Delete Confirmation */}
-                {showDeleteConfirm && (
-                    <Portal>
-                        <div 
-                            className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center z-[99999]"
-                            onClick={() => setShowDeleteConfirm(false)}
-                        >
-                            <div 
-                                className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-w-sm w-full mx-4"
-                                onClick={e => e.stopPropagation()}
-                            >
-                                <div className="p-4">
-                                    <div className="flex items-center gap-3 mb-3">
-                                        <div className="flex-shrink-0">
-                                            <svg className="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
-                                            </svg>
-                                        </div>
-                                        <div>
-                                            <h3 className={`text-base font-medium ${themeMode === 'dark' ? 'text-white' : 'text-gray-900'}`}>
-                                                {t('deleteConfirmationTitle')}
-                                            </h3>
-                                        </div>
-                                    </div>
-                                    <div className="flex justify-end gap-2">
-                                        <button
-                                            type="button"
-                                            className={`px-3 py-1.5 text-sm font-medium rounded border transition-colors ${themeMode === 'dark'
-                                                ? 'border-gray-600 text-gray-300 hover:bg-gray-600'
-                                                : 'border-gray-300 text-gray-700 hover:bg-gray-50'
-                                                }`}
-                                            onClick={() => setShowDeleteConfirm(false)}
-                                        >
-                                            {t('deleteConfirmationCancel')}
-                                        </button>
-                                        <button
-                                            type="button"
-                                            className="px-3 py-1.5 text-sm font-medium text-white bg-red-600 border border-transparent rounded hover:bg-red-700 transition-colors"
-                                            onClick={() => {
-                                                handleDeleteSection();
-                                                setShowDeleteConfirm(false);
-                                            }}
-                                        >
-                                            {t('deleteConfirmationOk')}
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </Portal>
-                )}
+                {/* Portal-based confirmation removed, now handled by Modal.confirm */}
                 <div className="enhanced-kanban-group-tasks">
                     {/* Create card at top */}
                     {showNewCardTop && (

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/TaskCard.tsx

@@ -14,8 +14,11 @@ import { useSocket } from '@/socket/socketContext';
 import { SocketEvents } from '@/shared/socket-events';
 import { getUserSession } from '@/utils/session-helper';
 import { themeWiseColor } from '@/utils/themeWiseColor';
-import { toggleTaskExpansion, fetchBoardSubTasks } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import { toggleTaskExpansion, fetchBoardSubTasks, deleteTask as deleteKanbanTask, updateEnhancedKanbanSubtask } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import TaskProgressCircle from './TaskProgressCircle';
+import { Button, Modal } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import { tasksApiService } from '@/api/tasks/tasks.api.service';
 
 // Simple Portal component
 const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -70,6 +73,9 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
         const d = selectedDate || new Date();
         return new Date(d.getFullYear(), d.getMonth(), 1);
     });
+    const [contextMenu, setContextMenu] = useState<{ visible: boolean; x: number; y: number }>({ visible: false, x: 0, y: 0 });
+    const contextMenuRef = useRef<HTMLDivElement>(null);
+    const [selectedTask, setSelectedTask] = useState<IProjectTask | null>(null);
 
     useEffect(() => {
         setSelectedDate(task.end_date ? new Date(task.end_date) : null);
@@ -102,6 +108,21 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
         }
     }, [showDatePicker]);
 
+    // Hide context menu on click elsewhere
+    useEffect(() => {
+        const handleClick = (e: MouseEvent) => {
+            if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
+                setContextMenu({ ...contextMenu, visible: false });
+            }
+        };
+        if (contextMenu.visible) {
+            document.addEventListener('mousedown', handleClick);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, [contextMenu]);
+
     const handleCardClick = useCallback((e: React.MouseEvent, id: string) => {
         e.stopPropagation();
         dispatch(setSelectedTaskId(id));
@@ -178,6 +199,48 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
         handleSubTaskExpand();
     }, [handleSubTaskExpand]);
 
+    // Delete logic (similar to task-drawer-header)
+    const handleDeleteTask = async (task: IProjectTask | null) => {
+        if (!task || !task.id) return;
+        Modal.confirm({
+            title: t('deleteTaskTitle'),
+            content: t('deleteTaskContent'),
+            okText: t('deleteTaskConfirm'),
+            okType: 'danger',
+            cancelText: t('deleteTaskCancel'),
+            centered: true,
+            onOk: async () => {
+                if (!task.id) return;
+                const res = await tasksApiService.deleteTask(task.id);
+                if (res.done) {
+                    dispatch(setSelectedTaskId(null));
+                    if (task.is_sub_task) {
+                        dispatch(updateEnhancedKanbanSubtask({
+                            sectionId: '',
+                            subtask: { id: task.id , parent_task_id: task.parent_task_id || '', manual_progress: false },
+                            mode: 'delete',
+                        }));
+                    } else {
+                        dispatch(deleteKanbanTask(task.id));
+                    }
+                    dispatch(setShowTaskDrawer(false));
+                    if (task.parent_task_id) {
+                        socket?.emit(
+                            SocketEvents.GET_TASK_PROGRESS.toString(),
+                            task.parent_task_id
+                        );
+                    }
+                }
+                setContextMenu({ visible: false, x: 0, y: 0 });
+                setSelectedTask(null);
+            },
+            onCancel: () => {
+                setContextMenu({ visible: false, x: 0, y: 0 });
+                setSelectedTask(null);
+            },
+        });
+    };
+
     // Calendar rendering helpers
     const year = calendarMonth.getFullYear();
     const month = calendarMonth.getMonth();
@@ -202,7 +265,37 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
 
     return (
         <>
-            <div className="enhanced-kanban-task-card" style={{ background, color, display: 'block', position: 'relative' }} >
+            {/* Context menu for delete */}
+            {contextMenu.visible && (
+                <div
+                    ref={contextMenuRef}
+                    style={{
+                        position: 'fixed',
+                        top: contextMenu.y,
+                        left: contextMenu.x,
+                        zIndex: 9999,
+                        background: themeMode === 'dark' ? '#23272f' : '#fff',
+                        borderRadius: 8,
+                        boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
+                        padding: 0,
+                        minWidth: 120,
+                        transition: 'translateY(0)',
+                    }}
+                >
+                    <Button
+                        type="text"
+                        icon={<DeleteOutlined style={{ color: '#ef4444', fontSize: 16 }} />}
+                        style={{ color: '#ef4444', width: '100%', textAlign: 'left', padding: '8px 16px', fontWeight: 500 }}
+                        onClick={() => handleDeleteTask(selectedTask || null)}
+                    >
+                        {t('delete')}
+                    </Button>
+                </div>
+            )}
+            <div
+                className="enhanced-kanban-task-card"
+                style={{ background, color, display: 'block', position: 'relative' }}
+            >
                 {/* Progress circle at top right */}
                 <div style={{ position: 'absolute', top: 6, right: 6, zIndex: 2 }}>
                     <TaskProgressCircle task={task} size={20} />
@@ -221,6 +314,11 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                     onDrop={e => onTaskDrop(e, groupId, idx)}
                     onDragEnd={onDragEnd} // <-- add this
                     onClick={e => handleCardClick(e, task.id!)}
+                    onContextMenu={e => {
+                        e.preventDefault();
+                        setContextMenu({ visible: true, x: e.clientX, y: e.clientY });
+                        setSelectedTask(task);
+                    }}
                 >
                     <div className="task-content">
                         <div className="task_labels" style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
@@ -447,7 +545,14 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                         {!task.sub_tasks_loading && Array.isArray(task.sub_tasks) && task.sub_tasks.length > 0 && (
                             <ul className="space-y-1">
                                 {task.sub_tasks.map(sub => (
-                                    <li key={sub.id} onClick={e => handleCardClick(e, sub.id!)} className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-50 dark:hover:bg-gray-800">
+                                    <li key={sub.id} 
+                                    onClick={e => handleCardClick(e, sub.id!)} 
+                                    className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-50 dark:hover:bg-gray-800"
+                                    onContextMenu={e => {
+                                        e.preventDefault();
+                                        setContextMenu({ visible: true, x: e.clientX, y: e.clientY });
+                                        setSelectedTask(sub);
+                                    }}>
                                         {sub.priority_color || sub.priority_color_dark ? (
                                             <span
                                                 className="w-2 h-2 rounded-full inline-block"

worklenz-frontend/src/components/navbar/InvitationItem.tsx

@@ -17,7 +17,7 @@ interface InvitationItemProps {
   t: TFunction;
 }
 
-const InvitationItem: React.FC<InvitationItemProps> = ({ item, isUnreadNotifications, t }) => {
+const InvitationItem = ({ item, isUnreadNotifications, t }: InvitationItemProps) => {
   const [accepting, setAccepting] = useState(false);
   const [joining, setJoining] = useState(false);
   const dispatch = useAppDispatch();

worklenz-frontend/src/components/navbar/Navbar.tsx

@@ -1,55 +1,60 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState, useMemo, memo } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Col, ConfigProvider, Flex, Menu, MenuProps, Alert } from '@/shared/antd-imports';
+import { Col, ConfigProvider, Flex, Menu } from '@/shared/antd-imports';
 import { createPortal } from 'react-dom';
 
-import InviteTeamMembers from '../../components/common/invite-team-members/invite-team-members';
+import InviteTeamMembers from '../common/invite-team-members/invite-team-members';
 import InviteButton from './invite/InviteButton';
 import MobileMenuButton from './mobileMenu/MobileMenuButton';
-import NavbarLogo from './navbar-logo';
-import NotificationButton from '../../components/navbar/notifications/notifications-drawer/notification/notification-button';
-import ProfileButton from './user-profile/profile-button';
+import NavbarLogo from './NavbarLogo';
+import NotificationButton from './NotificationButton';
+import ProfileButton from './user-profile/ProfileButton';
 import SwitchTeamButton from './switchTeam/SwitchTeamButton';
 import UpgradePlanButton from './upgradePlan/UpgradePlanButton';
-import NotificationDrawer from '../../components/navbar/notifications/notifications-drawer/notification/notfication-drawer';
+import NotificationDrawer from './notifications/notifications-drawer/notfication-drawer';
 
 import { useResponsive } from '@/hooks/useResponsive';
 import { getJSONFromLocalStorage } from '@/utils/localStorageFunctions';
-import { navRoutes, NavRoutesType } from './navRoutes';
+import { navRoutes, NavRoutesType } from '@/lib/navbar/navRoutes';
 import { useAuthService } from '@/hooks/useAuth';
 import { authApiService } from '@/api/auth/auth.api.service';
 import { ISUBSCRIPTION_TYPE } from '@/shared/constants';
 import logger from '@/utils/errorLogger';
-import TimerButton from './timers/timer-button';
 import HelpButton from './help/HelpButton';
 
-const Navbar = () => {
+const Navbar = memo(() => {
   const [current, setCurrent] = useState<string>('home');
-  const currentSession = useAuthService().getCurrentSession();
+  const authService = useAuthService();
+  const currentSession = authService.getCurrentSession();
   const [daysUntilExpiry, setDaysUntilExpiry] = useState<number | null>(null);
 
   const location = useLocation();
   const { isDesktop, isMobile, isTablet } = useResponsive();
   const { t } = useTranslation('navbar');
-  const authService = useAuthService();
   const [navRoutesList, setNavRoutesList] = useState<NavRoutesType[]>(navRoutes);
   const [isOwnerOrAdmin, setIsOwnerOrAdmin] = useState<boolean>(authService.isOwnerOrAdmin());
-  const showUpgradeTypes = [ISUBSCRIPTION_TYPE.TRIAL];
+  const showUpgradeTypes = useMemo(() => [ISUBSCRIPTION_TYPE.TRIAL], []);
 
   useEffect(() => {
+    let mounted = true;
     authApiService
       .verify()
       .then(authorizeResponse => {
-        if (authorizeResponse.authenticated) {
+        if (mounted && authorizeResponse.authenticated) {
           authService.setCurrentSession(authorizeResponse.user);
           setIsOwnerOrAdmin(!!(authorizeResponse.user.is_admin || authorizeResponse.user.owner));
         }
       })
       .catch(error => {
-        logger.error('Error during authorization', error);
+        if (mounted) {
+          logger.error('Error during authorization', error);
+        }
       });
-  }, []);
+    return () => {
+      mounted = false;
+    };
+  }, [authService]);
 
   useEffect(() => {
     const storedNavRoutesList: NavRoutesType[] = getJSONFromLocalStorage('navRoutes') || navRoutes;
@@ -183,6 +188,8 @@ const Navbar = () => {
       {createPortal(<NotificationDrawer />, document.body, 'notification-drawer')}
     </Col>
   );
-};
+});
+
+Navbar.displayName = 'Navbar';
 
 export default Navbar;

worklenz-frontend/src/components/navbar/NavbarLogo.tsx

@@ -1,14 +1,14 @@
+import { memo } from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import logo from '@/assets/images/worklenz-light-mode.png';
 import logoDark from '@/assets/images/worklenz-dark-mode.png';
 
-import { useAppSelector } from '@/hooks/useAppSelector';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/app/store';
 
-const NavbarLogo = () => {
+const NavbarLogo = memo(() => {
   const { t } = useTranslation('navbar');
   const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
 
@@ -23,6 +23,8 @@ const NavbarLogo = () => {
       </div>
     </Link>
   );
-};
+});
+
+NavbarLogo.displayName = 'NavbarLogo';
 
 export default NavbarLogo;

worklenz-frontend/src/components/navbar/help/HelpButton.tsx

@@ -1,10 +1,10 @@
 import { QuestionCircleOutlined } from '@/shared/antd-imports';
 import { Button, Tooltip } from '@/shared/antd-imports';
-import React from 'react';
+import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import './HelpButton.css';
 
-const HelpButton = () => {
+const HelpButton = memo(() => {
   // localization
   const { t } = useTranslation('navbar');
 
@@ -18,6 +18,8 @@ const HelpButton = () => {
       />
     </Tooltip>
   );
-};
+});
+
+HelpButton.displayName = 'HelpButton';
 
 export default HelpButton;

worklenz-frontend/src/components/navbar/invite/InviteButton.tsx

@@ -1,12 +1,12 @@
 import { UsergroupAddOutlined } from '@/shared/antd-imports';
 import { Button, Tooltip } from '@/shared/antd-imports';
-import React from 'react';
+import React, { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { colors } from '../../../styles/colors';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { toggleInviteMemberDrawer } from '../../settings/member/memberSlice';
+import { toggleInviteMemberDrawer } from '../../../features/settings/member/memberSlice';
 
-const InviteButton = () => {
+const InviteButton = memo(() => {
   const dispatch = useAppDispatch();
 
   // localization
@@ -21,12 +21,14 @@ const InviteButton = () => {
           color: colors.skyBlue,
           borderColor: colors.skyBlue,
         }}
-        onClick={() => dispatch(toggleInviteMemberDrawer())}
+        onClick={useCallback(() => dispatch(toggleInviteMemberDrawer()), [dispatch])}
       >
         {t('invite')}
       </Button>
     </Tooltip>
   );
-};
+});
+
+InviteButton.displayName = 'InviteButton';
 
 export default InviteButton;

worklenz-frontend/src/components/navbar/mobileMenu/MobileMenuButton.tsx

@@ -0,0 +1,112 @@
+import {
+  Button,
+  Card,
+  Dropdown,
+  Flex,
+  MenuProps,
+  Space,
+  Typography,
+  HomeOutlined,
+  MenuOutlined,
+  ProjectOutlined,
+  QuestionCircleOutlined,
+  ReadOutlined,
+} from '@/shared/antd-imports';
+import React, { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { colors } from '@/styles/colors';
+import { NavLink } from 'react-router-dom';
+import InviteButton from '@/components/navbar/invite/InviteButton';
+import SwitchTeamButton from '@/components/navbar/switchTeam/SwitchTeamButton';
+// custom css
+import './MobileMenuButton.css';
+
+const MobileMenuButton = memo(() => {
+  // localization
+  const { t } = useTranslation('navbar');
+
+  const navLinks = useMemo(
+    () => [
+      {
+        name: 'home',
+        icon: React.createElement(HomeOutlined),
+      },
+      {
+        name: 'projects',
+        icon: React.createElement(ProjectOutlined),
+      },
+      // {
+      //   name: 'schedule',
+      //   icon: React.createElement(ClockCircleOutlined),
+      // },
+      {
+        name: 'reporting',
+        icon: React.createElement(ReadOutlined),
+      },
+      {
+        name: 'help',
+        icon: React.createElement(QuestionCircleOutlined),
+      },
+    ],
+    []
+  );
+
+  const mobileMenu: MenuProps['items'] = useMemo(
+    () => [
+      {
+        key: '1',
+        label: (
+          <Card className="mobile-menu-card" bordered={false} style={{ width: 230 }}>
+            {navLinks.map((navEl, index) => (
+              <NavLink key={index} to={`/worklenz/${navEl.name}`}>
+                <Typography.Text strong>
+                  <Space>
+                    {navEl.icon}
+                    {t(navEl.name)}
+                  </Space>
+                </Typography.Text>
+              </NavLink>
+            ))}
+
+            <Flex
+              vertical
+              gap={12}
+              style={{
+                width: '90%',
+                marginInlineStart: 12,
+                marginBlock: 6,
+              }}
+            >
+              <Button
+                style={{
+                  backgroundColor: colors.lightBeige,
+                  color: 'black',
+                }}
+              >
+                {t('upgradePlan')}
+              </Button>
+              <InviteButton />
+              <SwitchTeamButton />
+            </Flex>
+          </Card>
+        ),
+      },
+    ],
+    [navLinks, t]
+  );
+
+  return (
+    <Dropdown
+      overlayClassName="mobile-menu-dropdown"
+      menu={{ items: mobileMenu }}
+      placement="bottomRight"
+      trigger={['click']}
+    >
+      <Button className="borderless-icon-btn" icon={<MenuOutlined style={{ fontSize: 20 }} />} />
+    </Dropdown>
+  );
+});
+
+MobileMenuButton.displayName = 'MobileMenuButton';
+
+export default MobileMenuButton;

worklenz-frontend/src/components/navbar/notifications/STYLING_FIXES.md

@@ -0,0 +1,128 @@
+# Notification Components Styling Fixes
+
+## Issue Resolved
+Fixed missing spacing and borders in notification templates that occurred during performance optimization.
+
+## Root Cause
+During the performance optimization, the CSS class references and styling approach were changed, which resulted in:
+- Missing borders around notification items
+- No spacing between notifications
+- Improper padding and margins
+
+## Solutions Applied
+
+### 1. Updated CSS Class Usage
+- **Before**: Used generic `ant-notification-notice` classes
+- **After**: Implemented proper Tailwind CSS classes with fallback styling
+
+### 2. Tailwind CSS Classes Implementation
+
+#### NotificationItem.tsx
+```jsx
+// Container classes with proper spacing and borders
+const containerClasses = [
+  'w-auto p-3 mb-3 rounded border border-gray-200 bg-white shadow-sm transition-all duration-300',
+  'hover:shadow-md hover:bg-gray-50',
+  notification.url ? 'cursor-pointer' : 'cursor-default',
+  'dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700'
+].join(' ');
+
+// Updated content structure
+<div className="notification-content">
+  <div className="notification-description">
+    <Text type="secondary" className="mb-2 flex items-center gap-2">
+      <BankOutlined /> {notification.team}
+    </Text>
+    <div className="mb-2" dangerouslySetInnerHTML={safeMessageHtml} />
+    {shouldShowProject && (
+      <div className="mb-2">
+        <Tag style={tagStyle}>{notification.project}</Tag>
+      </div>
+    )}
+  </div>
+  <div className="flex items-baseline justify-between mt-2">
+    {/* Footer content */}
+  </div>
+</div>
+```
+
+#### NotificationTemplate.tsx
+Applied similar Tailwind classes for consistency:
+- `p-3` for padding
+- `mb-3` for bottom margin
+- `rounded` for border radius
+- `border border-gray-200` for borders
+- `shadow-sm` for subtle shadows
+- `transition-all duration-300` for smooth animations
+
+#### NotificationDrawer.tsx
+Updated container classes:
+```jsx
+<div className="notification-list mt-4 px-2">
+  {/* Notification items */}
+</div>
+```
+
+### 3. Responsive Design Support
+
+#### Light Mode
+- Background: `bg-white`
+- Border: `border-gray-200`
+- Hover: `hover:bg-gray-50`
+- Shadow: `shadow-sm` → `hover:shadow-md`
+
+#### Dark Mode
+- Background: `dark:bg-gray-800`
+- Border: `dark:border-gray-600`
+- Hover: `dark:hover:bg-gray-700`
+- Maintains proper contrast
+
+### 4. CSS Imports Fixed
+- **NotificationItem.tsx**: Updated import from `PushNotificationTemplate.css` to `NotificationItem.css`
+- **NotificationTemplate.tsx**: Added proper CSS import for styling
+
+### 5. Spacing Improvements
+
+#### Margins and Padding
+- **Container**: `p-3` (12px padding)
+- **Bottom margin**: `mb-3` (12px between items)
+- **Internal spacing**: `mb-2` (8px between content sections)
+- **Text**: `text-xs` for timestamp
+
+#### Layout Classes
+- **Flexbox**: `flex items-center gap-2` for inline elements
+- **Alignment**: `flex items-baseline justify-between` for footer
+- **Cursor**: `cursor-pointer` or `cursor-default` based on interactivity
+
+## Visual Improvements
+
+### Before Fix
+- No visible borders
+- Items touching each other
+- Poor visual hierarchy
+- Inconsistent spacing
+
+### After Fix
+- ✅ Clear borders around each notification
+- ✅ Proper spacing between items
+- ✅ Good visual hierarchy
+- ✅ Consistent padding and margins
+- ✅ Smooth hover effects
+- ✅ Dark mode support
+- ✅ Responsive design
+
+## Performance Maintained
+All performance optimizations (React.memo, useCallback, useMemo) remain intact while fixing the visual issues.
+
+## Build Verification
+✅ Production build successful
+✅ No styling conflicts
+✅ Proper Tailwind CSS compilation
+✅ Cross-browser compatibility maintained
+
+## Key Benefits
+1. **Consistent Design**: Unified styling across all notification components
+2. **Better UX**: Clear visual separation and proper interactive states
+3. **Maintainable**: Using Tailwind CSS classes reduces custom CSS
+4. **Accessible**: Proper contrast ratios and hover states
+5. **Performance**: No impact on optimized component performance

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notfication-drawer.tsx

@@ -1,3 +1,4 @@
+import React, { memo, useCallback, useMemo } from 'react';
 import { Drawer, Empty, Segmented, Typography, Spin, Button, Flex } from '@/shared/antd-imports';
 import { useEffect, useState } from 'react';
 import { useAppSelector } from '@/hooks/useAppSelector';
@@ -7,7 +8,7 @@ import {
   fetchNotifications,
   setNotificationType,
   toggleDrawer,
-} from '../../../../../features/navbar/notificationSlice';
+} from '../../../../features/navbar/notificationSlice';
 import { NOTIFICATION_OPTION_READ, NOTIFICATION_OPTION_UNREAD } from '@/shared/constants';
 import { useTranslation } from 'react-i18next';
 import { SocketEvents } from '@/shared/socket-events';
@@ -15,13 +16,13 @@ import { IWorklenzNotification } from '@/types/notifications/notifications.types
 import { useSocket } from '@/socket/socketContext';
 import { ITeamInvitationViewModel } from '@/types/notifications/notifications.types';
 import logger from '@/utils/errorLogger';
-import NotificationItem from './notification-item';
-import InvitationItem from './invitation-item';
+import NotificationItem from './notification/NotificationItem';
+import InvitationItem from '../../InvitationItem';
 import { notificationsApiService } from '@/api/notifications/notifications.api.service';
 import { profileSettingsApiService } from '@/api/settings/profile/profile-settings.api.service';
 import { INotificationSettings } from '@/types/settings/notifications.types';
 import { toQueryString } from '@/utils/toQueryString';
-import { showNotification } from './push-notification-template';
+import { showNotification } from './notification/PushNotificationTemplate';
 import { teamsApiService } from '@/api/teams/teams.api.service';
 import { verifyAuthentication } from '@/features/auth/authSlice';
 import { getUserSession } from '@/utils/session-helper';
@@ -30,7 +31,7 @@ import { useNavigate } from 'react-router-dom';
 import { createAuthService } from '@/services/auth/auth.service';
 const HTML_TAG_REGEXP = /<[^>]*>/g;
 
-const NotificationDrawer = () => {
+const NotificationDrawer = memo(() => {
   const { isDrawerOpen, notificationType, notifications, invitations } = useAppSelector(
     state => state.notificationReducer
   );
@@ -50,72 +51,88 @@ const NotificationDrawer = () => {
   const navigate = useNavigate();
   const authService = createAuthService(navigate);
 
-  const createPush = (message: string, title: string, teamId: string | null, url?: string) => {
-    if (Notification.permission === 'granted' && showBrowserPush) {
-      const img = 'https://worklenz.com/assets/icons/icon-128x128.png';
-      const notification = new Notification(title, {
-        body: message.replace(HTML_TAG_REGEXP, ''),
-        icon: img,
-        badge: img,
-      });
+  const createPush = useCallback(
+    (message: string, title: string, teamId: string | null, url?: string) => {
+      if (Notification.permission === 'granted' && showBrowserPush) {
+        const img = 'https://worklenz.com/assets/icons/icon-128x128.png';
+        const notification = new Notification(title, {
+          body: message.replace(HTML_TAG_REGEXP, ''),
+          icon: img,
+          badge: img,
+        });
 
-      notification.onclick = async event => {
-        if (url) {
-          window.focus();
+        notification.onclick = async event => {
+          if (url) {
+            window.focus();
 
-          if (teamId) {
-            await teamsApiService.setActiveTeam(teamId);
+            if (teamId) {
+              try {
+                await teamsApiService.setActiveTeam(teamId);
+              } catch (error) {
+                logger.error('Error setting active team from notification', error);
+              }
+            }
+
+            window.location.href = url;
           }
+        };
+      }
+    },
+    [showBrowserPush]
+  );
 
-          window.location.href = url;
+  const handleInvitationsUpdate = useCallback(
+    (data: ITeamInvitationViewModel[]) => {
+      dispatch(fetchInvitations());
+    },
+    [dispatch]
+  );
+
+  const handleNotificationsUpdate = useCallback(
+    async (notification: IWorklenzNotification) => {
+      dispatch(fetchNotifications(notificationType));
+      dispatch(fetchInvitations());
+
+      if (isPushEnabled()) {
+        const title = notification.team ? `${notification.team} | Worklenz` : 'Worklenz';
+        let url = notification.url;
+        if (url && notification.params && Object.keys(notification.params).length) {
+          const q = toQueryString(notification.params);
+          url += q;
         }
-      };
-    }
-  };
 
-  const handleInvitationsUpdate = (data: ITeamInvitationViewModel[]) => {
-    dispatch(fetchInvitations());
-  };
-
-  const handleNotificationsUpdate = async (notification: IWorklenzNotification) => {
-    dispatch(fetchNotifications(notificationType));
-    dispatch(fetchInvitations());
-
-    if (isPushEnabled()) {
-      const title = notification.team ? `${notification.team} | Worklenz` : 'Worklenz';
-      let url = notification.url;
-      if (url && notification.params && Object.keys(notification.params).length) {
-        const q = toQueryString(notification.params);
-        url += q;
+        createPush(notification.message, title, notification.team_id, url);
       }
 
-      createPush(notification.message, title, notification.team_id, url);
-    }
+      // Show notification using the template
+      showNotification(notification);
+    },
+    [dispatch, notificationType, isPushEnabled, createPush]
+  );
 
-    // Show notification using the template
-    showNotification(notification);
-  };
+  const handleTeamInvitationsUpdate = useCallback(
+    async (data: ITeamInvitationViewModel) => {
+      const notification: IWorklenzNotification = {
+        id: data.id || '',
+        team: data.team_name || '',
+        team_id: data.team_id || '',
+        message: `You have been invited to join ${data.team_name || 'a team'}`,
+      };
 
-  const handleTeamInvitationsUpdate = async (data: ITeamInvitationViewModel) => {
-    const notification: IWorklenzNotification = {
-      id: data.id || '',
-      team: data.team_name || '',
-      team_id: data.team_id || '',
-      message: `You have been invited to join ${data.team_name || 'a team'}`,
-    };
+      if (isPushEnabled()) {
+        createPush(
+          notification.message,
+          notification.team || 'Worklenz',
+          notification.team_id || null
+        );
+      }
 
-    if (isPushEnabled()) {
-      createPush(
-        notification.message,
-        notification.team || 'Worklenz',
-        notification.team_id || null
-      );
-    }
-
-    // Show notification using the template
-    showNotification(notification);
-    dispatch(fetchInvitations());
-  };
+      // Show notification using the template
+      showNotification(notification);
+      dispatch(fetchInvitations());
+    },
+    [isPushEnabled, createPush, dispatch]
+  );
 
   const askPushPermission = () => {
     if ('Notification' in window && 'serviceWorker' in navigator && 'PushManager' in window) {
@@ -135,27 +152,40 @@ const NotificationDrawer = () => {
     }
   };
 
-  const markNotificationAsRead = async (id: string) => {
-    if (!id) return;
+  const markNotificationAsRead = useCallback(
+    async (id: string) => {
+      if (!id) return;
 
-    const res = await notificationsApiService.updateNotification(id);
-    if (res.done) {
-      dispatch(fetchNotifications(notificationType));
-      dispatch(fetchInvitations());
+      try {
+        const res = await notificationsApiService.updateNotification(id);
+        if (res.done) {
+          dispatch(fetchNotifications(notificationType));
+          dispatch(fetchInvitations());
+        }
+      } catch (error) {
+        logger.error('Error marking notification as read', error);
+      }
+    },
+    [dispatch, notificationType]
+  );
+  const handleVerifyAuth = useCallback(async () => {
+    try {
+      const result = await dispatch(verifyAuthentication()).unwrap();
+      if (result.authenticated) {
+        dispatch(setUser(result.user));
+        authService.setCurrentSession(result.user);
+      }
+    } catch (error) {
+      logger.error('Error verifying authentication', error);
     }
-  };
-  const handleVerifyAuth = async () => {
-    const result = await dispatch(verifyAuthentication()).unwrap();
-    if (result.authenticated) {
-      dispatch(setUser(result.user));
-      authService.setCurrentSession(result.user);
-    }
-  };
+  }, [dispatch, authService]);
+
+  const goToUrl = useCallback(
+    async (event: React.MouseEvent, notification: IWorklenzNotification) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!notification.url) return;
 
-  const goToUrl = async (event: React.MouseEvent, notification: IWorklenzNotification) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (notification.url) {
       dispatch(toggleDrawer());
       setIsLoading(true);
       try {
@@ -169,12 +199,13 @@ const NotificationDrawer = () => {
           );
         }
       } catch (error) {
-        console.error('Error navigating to URL:', error);
+        logger.error('Error navigating to URL:', error);
       } finally {
         setIsLoading(false);
       }
-    }
-  };
+    },
+    [dispatch, navigate, handleVerifyAuth]
+  );
 
   const fetchNotificationsSettings = async () => {
     try {
@@ -190,11 +221,15 @@ const NotificationDrawer = () => {
     }
   };
 
-  const handleMarkAllAsRead = async () => {
-    await notificationsApiService.readAllNotifications();
-    dispatch(fetchNotifications(notificationType));
-    dispatch(fetchInvitations());
-  };
+  const handleMarkAllAsRead = useCallback(async () => {
+    try {
+      await notificationsApiService.readAllNotifications();
+      dispatch(fetchNotifications(notificationType));
+      dispatch(fetchInvitations());
+    } catch (error) {
+      logger.error('Error marking all notifications as read', error);
+    }
+  }, [dispatch, notificationType]);
 
   useEffect(() => {
     socket?.on(SocketEvents.INVITATIONS_UPDATE.toString(), handleInvitationsUpdate);
@@ -242,12 +277,15 @@ const NotificationDrawer = () => {
         <Segmented<string>
           options={['Unread', 'Read']}
           defaultValue={NOTIFICATION_OPTION_UNREAD}
-          onChange={(value: string) => {
-            if (value === NOTIFICATION_OPTION_UNREAD)
-              dispatch(setNotificationType(NOTIFICATION_OPTION_UNREAD));
-            if (value === NOTIFICATION_OPTION_READ)
-              dispatch(setNotificationType(NOTIFICATION_OPTION_READ));
-          }}
+          onChange={useCallback(
+            (value: string) => {
+              if (value === NOTIFICATION_OPTION_UNREAD)
+                dispatch(setNotificationType(NOTIFICATION_OPTION_UNREAD));
+              if (value === NOTIFICATION_OPTION_READ)
+                dispatch(setNotificationType(NOTIFICATION_OPTION_READ));
+            },
+            [dispatch]
+          )}
         />
 
         <Button type="link" onClick={handleMarkAllAsRead}>
@@ -261,7 +299,7 @@ const NotificationDrawer = () => {
         </div>
       )}
       {invitations && invitations.length > 0 && notificationType === NOTIFICATION_OPTION_UNREAD ? (
-        <div className="notification-list mt-3">
+        <div className="notification-list mt-4 px-2">
           {invitations.map(invitation => (
             <InvitationItem
               key={invitation.id}
@@ -273,13 +311,13 @@ const NotificationDrawer = () => {
         </div>
       ) : null}
       {notifications && notifications.length > 0 ? (
-        <div className="notification-list mt-3">
+        <div className="notification-list mt-4 px-2">
           {notifications.map(notification => (
             <NotificationItem
               key={notification.id}
               notification={notification}
               isUnreadNotifications={notificationType === NOTIFICATION_OPTION_UNREAD}
-              markNotificationAsRead={id => Promise.resolve(markNotificationAsRead(id))}
+              markNotificationAsRead={markNotificationAsRead}
               goToUrl={goToUrl}
             />
           ))}
@@ -288,16 +326,13 @@ const NotificationDrawer = () => {
         <Empty
           image={Empty.PRESENTED_IMAGE_SIMPLE}
           description={t('notificationsDrawer.noNotifications')}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            marginBlockStart: 32,
-          }}
+          className="flex flex-col items-center mt-8"
         />
       )}
     </Drawer>
   );
-};
+});
+
+NotificationDrawer.displayName = 'NotificationDrawer';
 
 export default NotificationDrawer;

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notification/NotificationItem.tsx

@@ -0,0 +1,165 @@
+import React, { memo, useState, useCallback, useMemo } from 'react';
+import { IWorklenzNotification } from '@/types/notifications/notifications.types';
+import { BankOutlined } from '@/shared/antd-imports';
+import { Button, Tag, Typography, theme } from '@/shared/antd-imports';
+import DOMPurify from 'dompurify';
+import { fromNow } from '@/utils/dateUtils';
+import './NotificationItem.css';
+
+const { Text } = Typography;
+
+interface NotificationItemProps {
+  notification: IWorklenzNotification;
+  isUnreadNotifications?: boolean;
+  markNotificationAsRead?: (id: string) => Promise<void>;
+  goToUrl?: (e: React.MouseEvent, notification: IWorklenzNotification) => Promise<void>;
+}
+
+const NotificationItem = memo<NotificationItemProps>(({
+  notification,
+  isUnreadNotifications = true,
+  markNotificationAsRead,
+  goToUrl,
+}) => {
+  const { token } = theme.useToken();
+  const [loading, setLoading] = useState(false);
+  
+  const isDarkMode = useMemo(
+    () =>
+      token.colorBgContainer === '#141414' ||
+      token.colorBgContainer.includes('dark') ||
+      document.documentElement.getAttribute('data-theme') === 'dark',
+    [token.colorBgContainer]
+  );
+
+  const handleNotificationClick = useCallback(
+    async (e: React.MouseEvent) => {
+      await goToUrl?.(e, notification);
+      await markNotificationAsRead?.(notification.id);
+    },
+    [goToUrl, markNotificationAsRead, notification]
+  );
+
+  const handleMarkAsRead = useCallback(
+    async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (!notification.id) return;
+
+      setLoading(true);
+      try {
+        await markNotificationAsRead?.(notification.id);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [markNotificationAsRead, notification.id]
+  );
+
+  const safeMessageHtml = useMemo(
+    () => ({ __html: DOMPurify.sanitize(notification.message) }),
+    [notification.message]
+  );
+
+  const tagStyle = useMemo(() => {
+    if (!notification.color) return {};
+
+    const bgColor = `${notification.color}4d`;
+
+    if (isDarkMode) {
+      return {
+        backgroundColor: bgColor,
+        color: '#ffffff',
+        borderColor: 'transparent',
+      };
+    }
+
+    return {
+      backgroundColor: bgColor,
+      borderColor: 'transparent',
+    };
+  }, [notification.color, isDarkMode]);
+
+  const containerStyle = useMemo(
+    () => ({
+      border: notification.color ? `2px solid ${notification.color}4d` : undefined,
+    }),
+    [notification.color]
+  );
+
+  const containerClasses = useMemo(
+    () => [
+      'w-auto p-3 mb-3 rounded border border-gray-200 bg-white shadow-sm transition-all duration-300',
+      'hover:shadow-md hover:bg-gray-50',
+      notification.url ? 'cursor-pointer' : 'cursor-default',
+      'dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700'
+    ].join(' '),
+    [notification.url]
+  );
+
+  const formattedDate = useMemo(
+    () => (notification.created_at ? fromNow(notification.created_at) : ''),
+    [notification.created_at]
+  );
+
+  const shouldShowProject = useMemo(
+    () => Boolean(notification.project),
+    [notification.project]
+  );
+
+  const shouldShowMarkAsRead = useMemo(
+    () => Boolean(isUnreadNotifications && markNotificationAsRead),
+    [isUnreadNotifications, markNotificationAsRead]
+  );
+
+  return (
+    <div
+      style={containerStyle}
+      onClick={handleNotificationClick}
+      className={containerClasses}
+    >
+      <div className="notification-content">
+        <div className="notification-description">
+          {/* Team name */}
+          <div className="mb-2">
+            <Text type="secondary" className="flex items-center gap-2">
+              <BankOutlined /> {notification.team}
+            </Text>
+          </div>
+
+          {/* Message with HTML content */}
+          <div className="mb-2" dangerouslySetInnerHTML={safeMessageHtml} />
+
+          {/* Project tag */}
+          {shouldShowProject && (
+            <div className="mb-2">
+              <Tag style={tagStyle}>{notification.project}</Tag>
+            </div>
+          )}
+        </div>
+
+        {/* Footer with mark as read button and timestamp */}
+        <div className="flex items-baseline justify-between mt-2">
+          {shouldShowMarkAsRead && (
+            <Button
+              loading={loading}
+              type="link"
+              size="small"
+              shape="round"
+              className="p-0"
+              onClick={handleMarkAsRead}
+            >
+              <u>Mark as read</u>
+            </Button>
+          )}
+          <Text type="secondary" className="text-xs">
+            {formattedDate}
+          </Text>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+NotificationItem.displayName = 'NotificationItem';
+
+export default NotificationItem;

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notification/NotificationTemplate.tsx

@@ -0,0 +1,152 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { Button, Typography, Tag } from '@/shared/antd-imports';
+import { BankOutlined } from '@/shared/antd-imports';
+import { IWorklenzNotification } from '@/types/notifications/notifications.types';
+import { useNavigate } from 'react-router-dom';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { toggleDrawer } from '@features/navbar/notificationSlice';
+import { teamsApiService } from '@/api/teams/teams.api.service';
+import { formatDistanceToNow } from 'date-fns';
+import { tagBackground } from '@/utils/colorUtils';
+import logger from '@/utils/errorLogger';
+import './NotificationItem.css';
+
+interface NotificationTemplateProps {
+  item: IWorklenzNotification;
+  isUnreadNotifications: boolean;
+  markNotificationAsRead: (id: string) => Promise<void>;
+  loadersMap: Record<string, boolean>;
+}
+
+const NotificationTemplate = memo<NotificationTemplateProps>(({
+  item,
+  isUnreadNotifications,
+  markNotificationAsRead,
+  loadersMap,
+}) => {
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
+
+  const goToUrl = useCallback(
+    async (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (!item.url) return;
+
+      try {
+        dispatch(toggleDrawer());
+
+        if (item.team_id) {
+          await teamsApiService.setActiveTeam(item.team_id);
+        }
+
+        navigate(item.url, {
+          state: item.params || null,
+        });
+      } catch (error) {
+        logger.error('Error navigating to notification URL', error);
+      }
+    },
+    [item.url, item.team_id, item.params, dispatch, navigate]
+  );
+
+  const formattedDate = useMemo(() => {
+    if (!item.created_at) return '';
+    try {
+      return formatDistanceToNow(new Date(item.created_at), { addSuffix: true });
+    } catch (error) {
+      logger.error('Error formatting date', error);
+      return '';
+    }
+  }, [item.created_at]);
+
+  const handleMarkAsRead = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      markNotificationAsRead(item.id);
+    },
+    [markNotificationAsRead, item.id]
+  );
+
+  const containerStyle = useMemo(
+    () => ({
+      border: item.color ? `2px solid ${item.color}4d` : undefined,
+    }),
+    [item.color]
+  );
+
+  const containerClassName = useMemo(
+    () => [
+      'w-auto p-3 mb-3 rounded border border-gray-200 bg-white shadow-sm transition-all duration-300',
+      'hover:shadow-md hover:bg-gray-50',
+      item.url ? 'cursor-pointer' : 'cursor-default',
+      'dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700'
+    ].join(' '),
+    [item.url]
+  );
+
+  const messageHtml = useMemo(
+    () => ({ __html: item.message }),
+    [item.message]
+  );
+
+  const tagStyle = useMemo(
+    () => (item.color ? { backgroundColor: tagBackground(item.color) } : {}),
+    [item.color]
+  );
+
+  const shouldShowProject = useMemo(
+    () => Boolean(item.project && item.color),
+    [item.project, item.color]
+  );
+
+  const isLoading = useMemo(
+    () => Boolean(loadersMap[item.id]),
+    [loadersMap, item.id]
+  );
+
+  return (
+    <div
+      style={containerStyle}
+      onClick={goToUrl}
+      className={containerClassName}
+    >
+      <div className="notification-content">
+        <div className="notification-description">
+          <Typography.Text type="secondary" className="mb-2 flex items-center gap-2">
+            <BankOutlined /> {item.team}
+          </Typography.Text>
+          <div className="mb-2" dangerouslySetInnerHTML={messageHtml} />
+          {shouldShowProject && (
+            <div className="mb-2">
+              <Tag style={tagStyle}>{item.project}</Tag>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-baseline justify-between mt-2">
+          {isUnreadNotifications && (
+            <Button
+              type="link"
+              shape="round"
+              size="small"
+              loading={isLoading}
+              onClick={handleMarkAsRead}
+            >
+              <u>Mark as read</u>
+            </Button>
+          )}
+          <Typography.Text type="secondary" className="text-xs">
+            {formattedDate}
+          </Typography.Text>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+NotificationTemplate.displayName = 'NotificationTemplate';
+
+export default NotificationTemplate;

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notification/PushNotificationTemplate.tsx

@@ -0,0 +1,176 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import { notification } from '@/shared/antd-imports';
+import { IWorklenzNotification } from '@/types/notifications/notifications.types';
+import { teamsApiService } from '@/api/teams/teams.api.service';
+import { toQueryString } from '@/utils/toQueryString';
+import { BankOutlined } from '@/shared/antd-imports';
+import './PushNotificationTemplate.css';
+
+interface PushNotificationTemplateProps {
+  notification: IWorklenzNotification;
+}
+
+const PushNotificationTemplate = memo(({
+  notification: notificationData,
+}: PushNotificationTemplateProps) => {
+  const handleClick = useCallback(async () => {
+    if (!notificationData.url) return;
+    
+    try {
+      let url = notificationData.url;
+      if (notificationData.params && Object.keys(notificationData.params).length) {
+        const q = toQueryString(notificationData.params);
+        url += q;
+      }
+
+      if (notificationData.team_id) {
+        await teamsApiService.setActiveTeam(notificationData.team_id);
+      }
+
+      window.location.href = url;
+    } catch (error) {
+      console.error('Error handling notification click:', error);
+    }
+  }, [notificationData.url, notificationData.params, notificationData.team_id]);
+
+  const containerStyle = useMemo(
+    () => ({
+      cursor: notificationData.url ? 'pointer' : 'default',
+      padding: '8px 0',
+      borderRadius: '8px',
+    }),
+    [notificationData.url]
+  );
+
+  const headerStyle = useMemo(
+    () => ({
+      display: 'flex',
+      alignItems: 'center',
+      marginBottom: '8px',
+      color: '#262626',
+      fontSize: '14px',
+      fontWeight: 500,
+    }),
+    []
+  );
+
+  const iconStyle = useMemo(
+    () => ({ marginRight: '8px', color: '#1890ff' }),
+    []
+  );
+
+  const messageStyle = useMemo(
+    () => ({
+      color: '#595959',
+      fontSize: '13px',
+      lineHeight: '1.5',
+      marginTop: '4px',
+    }),
+    []
+  );
+
+  const className = useMemo(
+    () => `notification-content ${notificationData.url ? 'clickable' : ''}`,
+    [notificationData.url]
+  );
+
+  const messageHtml = useMemo(
+    () => ({ __html: notificationData.message }),
+    [notificationData.message]
+  );
+
+  return (
+    <div
+      onClick={handleClick}
+      className={className}
+      style={containerStyle}
+    >
+      <div style={headerStyle}>
+        {notificationData.team ? (
+          <>
+            <BankOutlined style={iconStyle} />
+            {notificationData.team}
+          </>
+        ) : (
+          'Worklenz'
+        )}
+      </div>
+      <div
+        style={messageStyle}
+        dangerouslySetInnerHTML={messageHtml}
+      />
+    </div>
+  );
+});
+
+PushNotificationTemplate.displayName = 'PushNotificationTemplate';
+
+// Notification queue management
+class NotificationQueueManager {
+  private queue: IWorklenzNotification[] = [];
+  private isProcessing = false;
+  private readonly maxQueueSize = 10;
+  private readonly notificationStyle = {
+    borderRadius: '8px',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+    padding: '12px 16px',
+    minWidth: '300px',
+    maxWidth: '400px',
+  };
+
+  private processQueue = () => {
+    if (this.isProcessing || this.queue.length === 0) return;
+
+    this.isProcessing = true;
+    const notificationData = this.queue.shift();
+
+    if (notificationData) {
+      notification.info({
+        message: null,
+        description: <PushNotificationTemplate notification={notificationData} />,
+        placement: 'topRight',
+        duration: 5,
+        style: this.notificationStyle,
+        onClose: () => {
+          this.isProcessing = false;
+          // Use setTimeout to prevent stack overflow with rapid notifications
+          setTimeout(() => this.processQueue(), 0);
+        },
+      });
+    } else {
+      this.isProcessing = false;
+    }
+  };
+
+  public addNotification = (notificationData: IWorklenzNotification) => {
+    // Prevent queue overflow
+    if (this.queue.length >= this.maxQueueSize) {
+      console.warn('Notification queue is full, dropping oldest notification');
+      this.queue.shift();
+    }
+    
+    this.queue.push(notificationData);
+    this.processQueue();
+  };
+
+  public clearQueue = () => {
+    this.queue.length = 0;
+    this.isProcessing = false;
+  };
+
+  public getQueueLength = () => this.queue.length;
+}
+
+const notificationManager = new NotificationQueueManager();
+
+export const showNotification = (notificationData: IWorklenzNotification) => {
+  notificationManager.addNotification(notificationData);
+};
+
+export const clearNotificationQueue = () => {
+  notificationManager.clearQueue();
+};
+
+export const getNotificationQueueLength = () => {
+  return notificationManager.getQueueLength();
+};

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notification/notification-item.tsx

@@ -1,127 +0,0 @@
-import { IWorklenzNotification } from '@/types/notifications/notifications.types';
-import { BankOutlined } from '@/shared/antd-imports';
-import { Button, Tag, Typography, theme } from '@/shared/antd-imports';
-import DOMPurify from 'dompurify';
-import React, { useState } from 'react';
-import { fromNow } from '@/utils/dateUtils';
-import './notification-item.css';
-
-const { Text } = Typography;
-
-interface NotificationItemProps {
-  notification: IWorklenzNotification;
-  isUnreadNotifications?: boolean;
-  markNotificationAsRead?: (id: string) => Promise<void>;
-  goToUrl?: (e: React.MouseEvent, notification: IWorklenzNotification) => Promise<void>;
-}
-
-const NotificationItem = ({
-  notification,
-  isUnreadNotifications = true,
-  markNotificationAsRead,
-  goToUrl,
-}: NotificationItemProps) => {
-  const { token } = theme.useToken();
-  const [loading, setLoading] = useState(false);
-  const isDarkMode =
-    token.colorBgContainer === '#141414' ||
-    token.colorBgContainer.includes('dark') ||
-    document.documentElement.getAttribute('data-theme') === 'dark';
-
-  const handleNotificationClick = async (e: React.MouseEvent) => {
-    await goToUrl?.(e, notification);
-    await markNotificationAsRead?.(notification.id);
-  };
-
-  const handleMarkAsRead = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (!notification.id) return;
-
-    setLoading(true);
-    try {
-      await markNotificationAsRead?.(notification.id);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const createSafeHtml = (html: string) => {
-    return { __html: DOMPurify.sanitize(html) };
-  };
-
-  const getTagBackground = (color?: string) => {
-    if (!color) return {};
-
-    // Create a more transparent version of the color for the background
-    // This is equivalent to the color + '4d' in the Angular template
-    const bgColor = `${color}4d`;
-
-    // For dark mode, we might need to adjust the text color for better contrast
-    if (isDarkMode) {
-      return {
-        backgroundColor: bgColor,
-        color: '#ffffff',
-        borderColor: 'transparent',
-      };
-    }
-
-    return {
-      backgroundColor: bgColor,
-      borderColor: 'transparent',
-    };
-  };
-
-  return (
-    <div
-      style={{
-        width: 'auto',
-        border: notification.color ? `2px solid ${notification.color}4d` : undefined,
-        cursor: notification.url ? 'pointer' : 'default',
-      }}
-      onClick={handleNotificationClick}
-      className="ant-notification-notice worklenz-notification rounded-4"
-    >
-      <div className="ant-notification-notice-content">
-        <div className="ant-notification-notice-description">
-          {/* Team name */}
-          <div className="mb-1">
-            <Text type="secondary">
-              <BankOutlined /> {notification.team}
-            </Text>
-          </div>
-
-          {/* Message with HTML content */}
-          <div className="mb-1" dangerouslySetInnerHTML={createSafeHtml(notification.message)} />
-
-          {/* Project tag */}
-          {notification.project && (
-            <div>
-              <Tag style={getTagBackground(notification.color)}>{notification.project}</Tag>
-            </div>
-          )}
-        </div>
-
-        {/* Footer with mark as read button and timestamp */}
-        <div className="d-flex align-items-baseline justify-content-between mt-1">
-          {isUnreadNotifications && markNotificationAsRead && (
-            <Button
-              loading={loading}
-              type="link"
-              size="small"
-              shape="round"
-              className="p-0"
-              onClick={e => handleMarkAsRead(e)}
-            >
-              <u>Mark as read</u>
-            </Button>
-          )}
-          <Text type="secondary" className="small">
-            {notification.created_at ? fromNow(notification.created_at) : ''}
-          </Text>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default NotificationItem;

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notification/notification-template.tsx

@@ -1,95 +0,0 @@
-import { Button, Typography, Tag } from '@/shared/antd-imports';
-import { BankOutlined } from '@/shared/antd-imports';
-import { IWorklenzNotification } from '@/types/notifications/notifications.types';
-import { useNavigate } from 'react-router-dom';
-import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { toggleDrawer } from '../../../../../features/navbar/notificationSlice';
-import { teamsApiService } from '@/api/teams/teams.api.service';
-import { formatDistanceToNow } from 'date-fns';
-import { tagBackground } from '@/utils/colorUtils';
-
-interface NotificationTemplateProps {
-  item: IWorklenzNotification;
-  isUnreadNotifications: boolean;
-  markNotificationAsRead: (id: string) => Promise<void>;
-  loadersMap: Record<string, boolean>;
-}
-
-const NotificationTemplate: React.FC<NotificationTemplateProps> = ({
-  item,
-  isUnreadNotifications,
-  markNotificationAsRead,
-  loadersMap,
-}) => {
-  const navigate = useNavigate();
-  const dispatch = useAppDispatch();
-
-  const goToUrl = async (event: React.MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    console.log('goToUrl triggered', { url: item.url, teamId: item.team_id });
-
-    if (item.url) {
-      dispatch(toggleDrawer());
-
-      if (item.team_id) {
-        await teamsApiService.setActiveTeam(item.team_id);
-      }
-
-      navigate(item.url, {
-        state: item.params || null,
-      });
-    }
-  };
-
-  const formatDate = (dateString?: string) => {
-    if (!dateString) return '';
-    return formatDistanceToNow(new Date(dateString), { addSuffix: true });
-  };
-
-  const handleMarkAsRead = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    markNotificationAsRead(item.id);
-  };
-
-  return (
-    <div
-      style={{ width: 'auto', border: `2px solid ${item.color}4d` }}
-      onClick={goToUrl}
-      className={`ant-notification-notice worklenz-notification rounded-4 ${item.url ? 'cursor-pointer' : ''}`}
-    >
-      <div className="ant-notification-notice-content">
-        <div className="ant-notification-notice-description">
-          <Typography.Text type="secondary" className="mb-1">
-            <BankOutlined /> {item.team}
-          </Typography.Text>
-          <div className="mb-1" dangerouslySetInnerHTML={{ __html: item.message }} />
-          {item.project && item.color && (
-            <Tag style={{ backgroundColor: tagBackground(item.color) }}>{item.project}</Tag>
-          )}
-        </div>
-
-        <div className="d-flex align-items-baseline justify-content-between mt-1">
-          {isUnreadNotifications && (
-            <Button
-              type="link"
-              shape="round"
-              size="small"
-              loading={loadersMap[item.id]}
-              onClick={handleMarkAsRead}
-            >
-              <u>Mark as read</u>
-            </Button>
-          )}
-          <Typography.Text type="secondary" className="small">
-            {formatDate(item.created_at)}
-          </Typography.Text>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default NotificationTemplate;

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notification/push-notification-template.tsx

@@ -1,105 +0,0 @@
-import { notification } from '@/shared/antd-imports';
-import { IWorklenzNotification } from '@/types/notifications/notifications.types';
-import { teamsApiService } from '@/api/teams/teams.api.service';
-import { toQueryString } from '@/utils/toQueryString';
-import { BankOutlined } from '@/shared/antd-imports';
-import './push-notification-template.css';
-
-const PushNotificationTemplate = ({
-  notification: notificationData,
-}: {
-  notification: IWorklenzNotification;
-}) => {
-  const handleClick = async () => {
-    if (notificationData.url) {
-      let url = notificationData.url;
-      if (notificationData.params && Object.keys(notificationData.params).length) {
-        const q = toQueryString(notificationData.params);
-        url += q;
-      }
-
-      if (notificationData.team_id) {
-        await teamsApiService.setActiveTeam(notificationData.team_id);
-      }
-
-      window.location.href = url;
-    }
-  };
-
-  return (
-    <div
-      onClick={handleClick}
-      className={`notification-content ${notificationData.url ? 'clickable' : ''}`}
-      style={{
-        cursor: notificationData.url ? 'pointer' : 'default',
-        padding: '8px 0',
-        borderRadius: '8px',
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          marginBottom: '8px',
-          color: '#262626',
-          fontSize: '14px',
-          fontWeight: 500,
-        }}
-      >
-        {notificationData.team && (
-          <>
-            <BankOutlined style={{ marginRight: '8px', color: '#1890ff' }} />
-            {notificationData.team}
-          </>
-        )}
-        {!notificationData.team && 'Worklenz'}
-      </div>
-      <div
-        style={{
-          color: '#595959',
-          fontSize: '13px',
-          lineHeight: '1.5',
-          marginTop: '4px',
-        }}
-        dangerouslySetInnerHTML={{ __html: notificationData.message }}
-      />
-    </div>
-  );
-};
-
-let notificationQueue: IWorklenzNotification[] = [];
-let isProcessing = false;
-
-const processNotificationQueue = () => {
-  if (isProcessing || notificationQueue.length === 0) return;
-
-  isProcessing = true;
-  const notificationData = notificationQueue.shift();
-
-  if (notificationData) {
-    notification.info({
-      message: null,
-      description: <PushNotificationTemplate notification={notificationData} />,
-      placement: 'topRight',
-      duration: 5,
-      style: {
-        borderRadius: '8px',
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-        padding: '12px 16px',
-        minWidth: '300px',
-        maxWidth: '400px',
-      },
-      onClose: () => {
-        isProcessing = false;
-        processNotificationQueue();
-      },
-    });
-  } else {
-    isProcessing = false;
-  }
-};
-
-export const showNotification = (notificationData: IWorklenzNotification) => {
-  notificationQueue.push(notificationData);
-  processNotificationQueue();
-};

worklenz-frontend/src/components/navbar/switchTeam/SwitchTeamButton.tsx

@@ -1,33 +1,20 @@
-// Ant Design Icons
 import { BankOutlined, CaretDownFilled, CheckCircleFilled } from '@/shared/antd-imports';
-
-// Ant Design Components
 import { Card, Divider, Dropdown, Flex, Tooltip, Typography } from '@/shared/antd-imports';
-
-// Redux Hooks
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useAppSelector } from '@/hooks/useAppSelector';
-
-// Redux Actions
 import { fetchTeams, setActiveTeam } from '@/features/teams/teamSlice';
 import { verifyAuthentication } from '@/features/auth/authSlice';
 import { setUser } from '@/features/user/userSlice';
-
-// Hooks & Services
 import { useAuthService } from '@/hooks/useAuth';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { createAuthService } from '@/services/auth/auth.service';
-
-// Components
 import CustomAvatar from '@/components/CustomAvatar';
-
-// Styles
 import { colors } from '@/styles/colors';
-import './switchTeam.css';
-import { useEffect } from 'react';
+import './SwitchTeamButton.css';
+import { useEffect, memo, useCallback, useMemo } from 'react';
 
-const SwitchTeamButton = () => {
+const SwitchTeamButton = memo(() => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const authService = createAuthService(navigate);
@@ -43,32 +30,39 @@ const SwitchTeamButton = () => {
     dispatch(fetchTeams());
   }, [dispatch]);
 
-  const isActiveTeam = (teamId: string): boolean => {
-    if (!teamId || !session?.team_id) return false;
-    return teamId === session.team_id;
-  };
+  const isActiveTeam = useCallback(
+    (teamId: string): boolean => {
+      if (!teamId || !session?.team_id) return false;
+      return teamId === session.team_id;
+    },
+    [session?.team_id]
+  );
 
-  const handleVerifyAuth = async () => {
+  const handleVerifyAuth = useCallback(async () => {
     const result = await dispatch(verifyAuthentication()).unwrap();
     if (result.authenticated) {
       dispatch(setUser(result.user));
       authService.setCurrentSession(result.user);
     }
-  };
+  }, [dispatch, authService]);
 
-  const handleTeamSelect = async (id: string) => {
-    if (!id) return;
+  const handleTeamSelect = useCallback(
+    async (id: string) => {
+      if (!id) return;
 
-    await dispatch(setActiveTeam(id));
-    await handleVerifyAuth();
-    window.location.reload();
-  };
+      await dispatch(setActiveTeam(id));
+      await handleVerifyAuth();
+      window.location.reload();
+    },
+    [dispatch, handleVerifyAuth]
+  );
 
-  const renderTeamCard = (team: any, index: number) => (
+  const renderTeamCard = useCallback(
+    (team: any, index: number) => (
     <Card
       className="switch-team-card"
       onClick={() => handleTeamSelect(team.id)}
-      bordered={false}
+      variant='borderless'
       style={{ width: 230 }}
     >
       <Flex vertical>
@@ -92,14 +86,19 @@ const SwitchTeamButton = () => {
         {index < teamsList.length - 1 && <Divider style={{ margin: 0 }} />}
       </Flex>
     </Card>
+  ),
+  [handleTeamSelect, isActiveTeam, teamsList.length]
   );
 
-  const dropdownItems =
-    teamsList?.map((team, index) => ({
-      key: team.id || '',
-      label: renderTeamCard(team, index),
-      type: 'item' as const,
-    })) || [];
+  const dropdownItems = useMemo(
+    () =>
+      teamsList?.map((team, index) => ({
+        key: team.id || '',
+        label: renderTeamCard(team, index),
+        type: 'item' as const,
+      })) || [],
+    [teamsList, renderTeamCard]
+  );
 
   return (
     <Dropdown
@@ -132,6 +131,8 @@ const SwitchTeamButton = () => {
       </Tooltip>
     </Dropdown>
   );
-};
+});
+
+SwitchTeamButton.displayName = 'SwitchTeamButton';
 
 export default SwitchTeamButton;

worklenz-frontend/src/components/navbar/timers/TimerButton.tsx

@@ -1,6 +1,16 @@
 import { ClockCircleOutlined, StopOutlined } from '@/shared/antd-imports';
-import { Badge, Button, Dropdown, List, Tooltip, Typography, Space, Divider, theme } from '@/shared/antd-imports';
-import React, { useEffect, useState, useCallback } from 'react';
+import {
+  Badge,
+  Button,
+  Dropdown,
+  List,
+  Tooltip,
+  Typography,
+  Space,
+  Divider,
+  theme,
+} from '@/shared/antd-imports';
+import { useEffect, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { taskTimeLogsApiService, IRunningTimer } from '@/api/tasks/task-time-logs.api.service';
 import { useAppDispatch } from '@/hooks/useAppDispatch';

worklenz-frontend/src/components/navbar/upgradePlan/UpgradePlanButton.tsx

@@ -1,11 +1,11 @@
 import { Button, Tooltip } from '@/shared/antd-imports';
-import React from 'react';
+import React, { memo, useCallback } from 'react';
 import { colors } from '../../../styles/colors';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useAppSelector } from '@/hooks/useAppSelector';
 
-const UpgradePlanButton = () => {
+const UpgradePlanButton = memo(() => {
   // localization
   const { t } = useTranslation('navbar');
   const navigate = useNavigate();
@@ -22,12 +22,14 @@ const UpgradePlanButton = () => {
         }}
         size="small"
         type="text"
-        onClick={() => navigate('/worklenz/admin-center/billing')}
+        onClick={useCallback(() => navigate('/worklenz/admin-center/billing'), [navigate])}
       >
         {t('upgradePlan')}
       </Button>
     </Tooltip>
   );
-};
+});
+
+UpgradePlanButton.displayName = 'UpgradePlanButton';
 
 export default UpgradePlanButton;

worklenz-frontend/src/components/navbar/user-profile/ProfileButton.tsx

@@ -9,17 +9,17 @@ import { RootState } from '@/app/store';
 
 import { getRole } from '@/utils/session-helper';
 
-import './profile-dropdown.css';
-import './profile-button.css';
+import './ProfileDropdown.css';
+import './ProfileButton.css';
 import SingleAvatar from '@/components/common/single-avatar/single-avatar';
 import { useAuthService } from '@/hooks/useAuth';
-import { useEffect, useState } from 'react';
+import { memo, useMemo } from 'react';
 
 interface ProfileButtonProps {
   isOwnerOrAdmin: boolean;
 }
 
-const ProfileButton = ({ isOwnerOrAdmin }: ProfileButtonProps) => {
+const ProfileButton = memo(({ isOwnerOrAdmin }: ProfileButtonProps) => {
   const { t } = useTranslation('navbar');
   const authService = useAuthService();
   const currentSession = useAppSelector((state: RootState) => state.userReducer);
@@ -27,11 +27,15 @@ const ProfileButton = ({ isOwnerOrAdmin }: ProfileButtonProps) => {
   const role = getRole();
   const themeMode = useAppSelector((state: RootState) => state.themeReducer.mode);
 
-  const getLinkStyle = () => ({
-    color: themeMode === 'dark' ? '#ffffffd9' : '#181818',
-  });
+  const getLinkStyle = useMemo(
+    () => ({
+      color: themeMode === 'dark' ? '#ffffffd9' : '#181818',
+    }),
+    [themeMode]
+  );
 
-  const profile: MenuProps['items'] = [
+  const profile: MenuProps['items'] = useMemo(
+    () => [
     {
       key: '1',
       label: (
@@ -81,20 +85,22 @@ const ProfileButton = ({ isOwnerOrAdmin }: ProfileButtonProps) => {
           style={{ width: 230 }}
         >
           {isOwnerOrAdmin && (
-            <Link to="/worklenz/admin-center/overview" style={getLinkStyle()}>
+            <Link to="/worklenz/admin-center/overview" style={getLinkStyle}>
               {t('adminCenter')}
             </Link>
           )}
-          <Link to="/worklenz/settings/profile" style={getLinkStyle()}>
+          <Link to="/worklenz/settings/profile" style={getLinkStyle}>
             {t('settings')}
           </Link>
-          <Link to="/auth/logging-out" style={getLinkStyle()}>
+          <Link to="/auth/logging-out" style={getLinkStyle}>
             {t('logOut')}
           </Link>
         </Card>
       ),
     },
-  ];
+  ],
+  [currentSession, role, themeMode, getLinkStyle, isOwnerOrAdmin, t]
+  );
 
   return (
     <Dropdown
@@ -123,6 +129,8 @@ const ProfileButton = ({ isOwnerOrAdmin }: ProfileButtonProps) => {
       </Tooltip>
     </Dropdown>
   );
-};
+});
+
+ProfileButton.displayName = 'ProfileButton';
 
 export default ProfileButton;

worklenz-frontend/src/components/project-roadmap-gantt/PhaseModal.tsx

@@ -0,0 +1,406 @@
+import React, { useState } from 'react';
+import { 
+  Modal, 
+  Tabs, 
+  Progress, 
+  Tag, 
+  List, 
+  Avatar, 
+  Badge, 
+  Space, 
+  Button,
+  Statistic,
+  Row,
+  Col,
+  Timeline,
+  Input,
+  Form,
+  DatePicker,
+  Select
+} from 'antd';
+import { 
+  CalendarOutlined, 
+  TeamOutlined, 
+  CheckCircleOutlined, 
+  ClockCircleOutlined,
+  FlagOutlined,
+  ExclamationCircleOutlined,
+  EditOutlined,
+  SaveOutlined,
+  CloseOutlined
+} from '@ant-design/icons';
+import { PhaseModalData, ProjectPhase, PhaseTask, PhaseMilestone } from '../../types/project-roadmap.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+import dayjs from 'dayjs';
+
+const { TabPane } = Tabs;
+const { TextArea } = Input;
+
+interface PhaseModalProps {
+  visible: boolean;
+  phase: PhaseModalData | null;
+  onClose: () => void;
+  onUpdate?: (updates: Partial<ProjectPhase>) => void;
+}
+
+const PhaseModal: React.FC<PhaseModalProps> = ({
+  visible,
+  phase,
+  onClose,
+  onUpdate,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [form] = Form.useForm();
+  
+  // Theme support
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const isDarkMode = themeMode === 'dark';
+
+  if (!phase) return null;
+
+  const handleEdit = () => {
+    setIsEditing(true);
+    form.setFieldsValue({
+      name: phase.name,
+      description: phase.description,
+      startDate: dayjs(phase.startDate),
+      endDate: dayjs(phase.endDate),
+      status: phase.status,
+    });
+  };
+
+  const handleSave = async () => {
+    try {
+      const values = await form.validateFields();
+      const updates: Partial<ProjectPhase> = {
+        name: values.name,
+        description: values.description,
+        startDate: values.startDate.toDate(),
+        endDate: values.endDate.toDate(),
+        status: values.status,
+      };
+      
+      onUpdate?.(updates);
+      setIsEditing(false);
+    } catch (error) {
+      console.error('Validation failed:', error);
+    }
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    form.resetFields();
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed': return 'success';
+      case 'in-progress': return 'processing';
+      case 'on-hold': return 'warning';
+      default: return 'default';
+    }
+  };
+
+  const getPriorityColor = (priority: string) => {
+    switch (priority) {
+      case 'high': return 'red';
+      case 'medium': return 'orange';
+      case 'low': return 'green';
+      default: return 'default';
+    }
+  };
+
+  const getTaskStatusIcon = (status: string) => {
+    switch (status) {
+      case 'done': return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
+      case 'in-progress': return <ClockCircleOutlined style={{ color: '#1890ff' }} />;
+      default: return <ExclamationCircleOutlined style={{ color: '#d9d9d9' }} />;
+    }
+  };
+
+  return (
+    <Modal
+      title={
+        <div className="flex justify-between items-center">
+          <Space>
+            <Badge status={getStatusColor(phase.status)} />
+            {isEditing ? (
+              <Form.Item name="name" className="mb-0">
+                <Input className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100" />
+              </Form.Item>
+            ) : (
+              <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-0">
+                {phase.name}
+              </h4>
+            )}
+          </Space>
+          <Space>
+            {isEditing ? (
+              <>
+                <Button 
+                  type="primary" 
+                  icon={<SaveOutlined />} 
+                  onClick={handleSave}
+                  size="small"
+                >
+                  Save
+                </Button>
+                <Button 
+                  icon={<CloseOutlined />} 
+                  onClick={handleCancel}
+                  size="small"
+                  className="dark:border-gray-600 dark:text-gray-300"
+                >
+                  Cancel
+                </Button>
+              </>
+            ) : (
+              <Button 
+                type="text" 
+                icon={<EditOutlined />} 
+                onClick={handleEdit}
+                size="small"
+                className="dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Edit
+              </Button>
+            )}
+          </Space>
+        </div>
+      }
+      open={visible}
+      onCancel={onClose}
+      width={800}
+      footer={null}
+      className="dark:bg-gray-800"
+    >
+      <Form form={form} layout="vertical">
+        <div className="mb-4">
+          {isEditing ? (
+            <Form.Item name="description" label={<span className="text-gray-700 dark:text-gray-300">Description</span>}>
+              <TextArea 
+                rows={2} 
+                className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100" 
+              />
+            </Form.Item>
+          ) : (
+            <p className="text-gray-600 dark:text-gray-400">{phase.description}</p>
+          )}
+        </div>
+
+        {/* Phase Statistics */}
+        <Row gutter={16} className="mb-6">
+          <Col span={6}>
+            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+              <Statistic 
+                title={<span className="text-gray-600 dark:text-gray-400">Progress</span>}
+                value={phase.progress} 
+                suffix="%" 
+                valueStyle={{ color: themeWiseColor('#1890ff', '#40a9ff', themeMode) }}
+              />
+              <Progress 
+                percent={phase.progress} 
+                showInfo={false} 
+                size="small" 
+                strokeColor={themeWiseColor('#1890ff', '#40a9ff', themeMode)}
+                trailColor={themeWiseColor('#f0f0f0', '#4b5563', themeMode)}
+              />
+            </div>
+          </Col>
+          <Col span={6}>
+            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+              <Statistic 
+                title={<span className="text-gray-600 dark:text-gray-400">Tasks</span>}
+                value={phase.completedTaskCount} 
+                suffix={`/ ${phase.taskCount}`}
+                valueStyle={{ color: themeWiseColor('#52c41a', '#34d399', themeMode) }}
+              />
+            </div>
+          </Col>
+          <Col span={6}>
+            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+              <Statistic 
+                title={<span className="text-gray-600 dark:text-gray-400">Milestones</span>}
+                value={phase.completedMilestoneCount} 
+                suffix={`/ ${phase.milestoneCount}`}
+                valueStyle={{ color: themeWiseColor('#722ed1', '#9f7aea', themeMode) }}
+              />
+            </div>
+          </Col>
+          <Col span={6}>
+            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+              <Statistic 
+                title={<span className="text-gray-600 dark:text-gray-400">Team</span>}
+                value={phase.teamMembers.length} 
+                suffix="members"
+                valueStyle={{ color: themeWiseColor('#fa8c16', '#fbbf24', themeMode) }}
+              />
+            </div>
+          </Col>
+        </Row>
+
+        {/* Timeline */}
+        <Row gutter={16} className="mb-6">
+          <Col span={12}>
+            {isEditing ? (
+              <Form.Item name="startDate" label={<span className="text-gray-700 dark:text-gray-300">Start Date</span>}>
+                <DatePicker className="w-full dark:bg-gray-700 dark:border-gray-600" />
+              </Form.Item>
+            ) : (
+              <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+                <div className="flex items-center gap-2">
+                  <CalendarOutlined className="text-gray-600 dark:text-gray-400" />
+                  <span className="font-medium text-gray-900 dark:text-gray-100">Start:</span>
+                  <span className="text-gray-600 dark:text-gray-400">{phase.startDate.toLocaleDateString()}</span>
+                </div>
+              </div>
+            )}
+          </Col>
+          <Col span={12}>
+            {isEditing ? (
+              <Form.Item name="endDate" label={<span className="text-gray-700 dark:text-gray-300">End Date</span>}>
+                <DatePicker className="w-full dark:bg-gray-700 dark:border-gray-600" />
+              </Form.Item>
+            ) : (
+              <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
+                <div className="flex items-center gap-2">
+                  <CalendarOutlined className="text-gray-600 dark:text-gray-400" />
+                  <span className="font-medium text-gray-900 dark:text-gray-100">End:</span>
+                  <span className="text-gray-600 dark:text-gray-400">{phase.endDate.toLocaleDateString()}</span>
+                </div>
+              </div>
+            )}
+          </Col>
+        </Row>
+
+        {isEditing && (
+          <Row gutter={16} className="mb-6">
+            <Col span={12}>
+              <Form.Item name="status" label={<span className="text-gray-700 dark:text-gray-300">Status</span>}>
+                <Select className="dark:bg-gray-700 dark:border-gray-600">
+                  <Select.Option value="not-started">Not Started</Select.Option>
+                  <Select.Option value="in-progress">In Progress</Select.Option>
+                  <Select.Option value="completed">Completed</Select.Option>
+                  <Select.Option value="on-hold">On Hold</Select.Option>
+                </Select>
+              </Form.Item>
+            </Col>
+          </Row>
+        )}
+
+        <Tabs 
+          defaultActiveKey="tasks"
+          className="dark:bg-gray-800"
+          tabBarStyle={{ 
+            borderBottom: `1px solid ${themeWiseColor('#f0f0f0', '#4b5563', themeMode)}`
+          }}
+        >
+          <TabPane tab={`Tasks (${phase.taskCount})`} key="tasks">
+            <List
+              dataSource={phase.tasks}
+              renderItem={(task: PhaseTask) => (
+                <List.Item>
+                  <List.Item.Meta
+                    avatar={getTaskStatusIcon(task.status)}
+                    title={
+                      <div className="flex justify-between items-center">
+                        <Text strong>{task.name}</Text>
+                        <Space>
+                          <Tag color={getPriorityColor(task.priority)}>
+                            {task.priority}
+                          </Tag>
+                          <Progress 
+                            percent={task.progress} 
+                            size="small" 
+                            style={{ width: 100 }}
+                          />
+                        </Space>
+                      </div>
+                    }
+                    description={
+                      <div>
+                        <Text type="secondary">{task.description}</Text>
+                        <div className="mt-2 flex justify-between items-center">
+                          <Space>
+                            <CalendarOutlined />
+                            <Text type="secondary">
+                              {task.startDate.toLocaleDateString()} - {task.endDate.toLocaleDateString()}
+                            </Text>
+                          </Space>
+                          {task.assigneeName && (
+                            <Space>
+                              <TeamOutlined />
+                              <Text type="secondary">{task.assigneeName}</Text>
+                            </Space>
+                          )}
+                        </div>
+                      </div>
+                    }
+                  />
+                </List.Item>
+              )}
+            />
+          </TabPane>
+
+          <TabPane tab={`Milestones (${phase.milestoneCount})`} key="milestones">
+            <Timeline>
+              {phase.milestones.map((milestone: PhaseMilestone) => (
+                <Timeline.Item
+                  key={milestone.id}
+                  color={milestone.isCompleted ? 'green' : milestone.criticalPath ? 'red' : 'blue'}
+                  dot={milestone.isCompleted ? <CheckCircleOutlined /> : <FlagOutlined />}
+                >
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <Text strong>{milestone.name}</Text>
+                      {milestone.criticalPath && (
+                        <Tag color="red" className="ml-2">Critical Path</Tag>
+                      )}
+                      {milestone.description && (
+                        <div className="mt-1">
+                          <Text type="secondary">{milestone.description}</Text>
+                        </div>
+                      )}
+                    </div>
+                    <div className="text-right">
+                      <div>
+                        <CalendarOutlined />
+                        <span className="ml-1">{milestone.dueDate.toLocaleDateString()}</span>
+                      </div>
+                      <Badge 
+                        status={milestone.isCompleted ? 'success' : 'processing'} 
+                        text={milestone.isCompleted ? 'Completed' : 'Pending'}
+                      />
+                    </div>
+                  </div>
+                </Timeline.Item>
+              ))}
+            </Timeline>
+          </TabPane>
+
+          <TabPane tab={`Team (${phase.teamMembers.length})`} key="team">
+            <List
+              dataSource={phase.teamMembers}
+              renderItem={(member: string) => (
+                <List.Item>
+                  <List.Item.Meta
+                    avatar={<Avatar>{member.charAt(0).toUpperCase()}</Avatar>}
+                    title={member}
+                    description={
+                      <Text type="secondary">
+                        {phase.tasks.filter(task => task.assigneeName === member).length} tasks assigned
+                      </Text>
+                    }
+                  />
+                </List.Item>
+              )}
+            />
+          </TabPane>
+        </Tabs>
+      </Form>
+    </Modal>
+  );
+};
+
+export default PhaseModal;

worklenz-frontend/src/components/project-roadmap-gantt/ProjectRoadmapGantt.tsx

@@ -0,0 +1,333 @@
+import React, { useState, useMemo } from 'react';
+import { Gantt, Task, ViewMode } from 'gantt-task-react';
+import { Button, Space, Badge } from 'antd';
+import { CalendarOutlined, TeamOutlined, CheckCircleOutlined } from '@ant-design/icons';
+import { ProjectPhase, ProjectRoadmap, GanttViewOptions, PhaseModalData } from '../../types/project-roadmap.types';
+import PhaseModal from './PhaseModal';
+import { useAppSelector } from '../../hooks/useAppSelector';
+import { themeWiseColor } from '../../utils/themeWiseColor';
+import 'gantt-task-react/dist/index.css';
+import './gantt-theme.css';
+
+interface ProjectRoadmapGanttProps {
+  roadmap: ProjectRoadmap;
+  viewOptions?: Partial<GanttViewOptions>;
+  onPhaseUpdate?: (phaseId: string, updates: Partial<ProjectPhase>) => void;
+  onTaskUpdate?: (phaseId: string, taskId: string, updates: any) => void;
+}
+
+const ProjectRoadmapGantt: React.FC<ProjectRoadmapGanttProps> = ({
+  roadmap,
+  viewOptions = {},
+  onPhaseUpdate,
+  onTaskUpdate,
+}) => {
+  const [selectedPhase, setSelectedPhase] = useState<PhaseModalData | null>(null);
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.Month);
+  
+  // Theme support
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const isDarkMode = themeMode === 'dark';
+
+  const defaultViewOptions: GanttViewOptions = {
+    viewMode: 'month',
+    showTasks: true,
+    showMilestones: true,
+    groupByPhase: true,
+    ...viewOptions,
+  };
+
+  // Theme-aware colors
+  const ganttColors = useMemo(() => {
+    return {
+      background: themeWiseColor('#ffffff', '#1f2937', themeMode),
+      surface: themeWiseColor('#f8f9fa', '#374151', themeMode),
+      border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
+      taskBar: themeWiseColor('#3b82f6', '#60a5fa', themeMode),
+      taskBarHover: themeWiseColor('#2563eb', '#93c5fd', themeMode),
+      progressBar: themeWiseColor('#10b981', '#34d399', themeMode),
+      milestone: themeWiseColor('#f59e0b', '#fbbf24', themeMode),
+      criticalPath: themeWiseColor('#ef4444', '#f87171', themeMode),
+      text: {
+        primary: themeWiseColor('#111827', '#f9fafb', themeMode),
+        secondary: themeWiseColor('#6b7280', '#d1d5db', themeMode),
+      },
+      grid: themeWiseColor('#f3f4f6', '#4b5563', themeMode),
+      today: themeWiseColor('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.2)', themeMode),
+    };
+  }, [themeMode]);
+
+  // Convert phases to Gantt tasks
+  const ganttTasks = useMemo(() => {
+    const tasks: Task[] = [];
+
+    roadmap.phases.forEach((phase, phaseIndex) => {
+      // Add phase as main task with theme-aware colors
+      const phaseTask: Task = {
+        id: phase.id,
+        name: phase.name,
+        start: phase.startDate,
+        end: phase.endDate,
+        progress: phase.progress,
+        type: 'project',
+        styles: {
+          progressColor: themeWiseColor(phase.color, phase.color, themeMode),
+          progressSelectedColor: themeWiseColor(phase.color, phase.color, themeMode),
+          backgroundColor: themeWiseColor(`${phase.color}20`, `${phase.color}30`, themeMode),
+        },
+      };
+      tasks.push(phaseTask);
+
+      // Add phase tasks if enabled
+      if (defaultViewOptions.showTasks) {
+        phase.tasks.forEach((task) => {
+          const ganttTask: Task = {
+            id: task.id,
+            name: task.name,
+            start: task.startDate,
+            end: task.endDate,
+            progress: task.progress,
+            type: 'task',
+            project: phase.id,
+            dependencies: task.dependencies,
+            styles: {
+              progressColor: ganttColors.taskBar,
+              progressSelectedColor: ganttColors.taskBarHover,
+              backgroundColor: themeWiseColor('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.2)', themeMode),
+            },
+          };
+          tasks.push(ganttTask);
+        });
+      }
+
+      // Add milestones if enabled
+      if (defaultViewOptions.showMilestones) {
+        phase.milestones.forEach((milestone) => {
+          const milestoneTask: Task = {
+            id: milestone.id,
+            name: milestone.name,
+            start: milestone.dueDate,
+            end: milestone.dueDate,
+            progress: milestone.isCompleted ? 100 : 0,
+            type: 'milestone',
+            project: phase.id,
+            styles: {
+              progressColor: milestone.criticalPath ? ganttColors.criticalPath : ganttColors.progressBar,
+              progressSelectedColor: milestone.criticalPath ? ganttColors.criticalPath : ganttColors.progressBar,
+              backgroundColor: milestone.criticalPath ? 
+                themeWiseColor('rgba(239, 68, 68, 0.1)', 'rgba(248, 113, 113, 0.2)', themeMode) :
+                themeWiseColor('rgba(16, 185, 129, 0.1)', 'rgba(52, 211, 153, 0.2)', themeMode),
+            },
+          };
+          tasks.push(milestoneTask);
+        });
+      }
+    });
+
+    return tasks;
+  }, [roadmap.phases, defaultViewOptions, ganttColors, themeMode]);
+
+  const handlePhaseClick = (phase: ProjectPhase) => {
+    const taskCount = phase.tasks.length;
+    const completedTaskCount = phase.tasks.filter(task => task.status === 'done').length;
+    const milestoneCount = phase.milestones.length;
+    const completedMilestoneCount = phase.milestones.filter(m => m.isCompleted).length;
+    const teamMembers = [...new Set(phase.tasks.map(task => task.assigneeName).filter(Boolean))];
+
+    const phaseModalData: PhaseModalData = {
+      ...phase,
+      taskCount,
+      completedTaskCount,
+      milestoneCount,
+      completedMilestoneCount,
+      teamMembers,
+    };
+
+    setSelectedPhase(phaseModalData);
+    setIsModalVisible(true);
+  };
+
+  const handleTaskClick = (task: Task) => {
+    // Find the phase this task belongs to
+    const phase = roadmap.phases.find(p => 
+      p.tasks.some(t => t.id === task.id) || p.milestones.some(m => m.id === task.id)
+    );
+    
+    if (phase) {
+      handlePhaseClick(phase);
+    }
+  };
+
+  const handleDateChange = (task: Task) => {
+    const phase = roadmap.phases.find(p => p.id === task.id);
+    if (phase && onPhaseUpdate) {
+      onPhaseUpdate(phase.id, {
+        startDate: task.start,
+        endDate: task.end,
+      });
+    } else if (onTaskUpdate) {
+      const parentPhase = roadmap.phases.find(p => 
+        p.tasks.some(t => t.id === task.id)
+      );
+      if (parentPhase) {
+        onTaskUpdate(parentPhase.id, task.id, {
+          startDate: task.start,
+          endDate: task.end,
+        });
+      }
+    }
+  };
+
+  const handleProgressChange = (task: Task) => {
+    const phase = roadmap.phases.find(p => p.id === task.id);
+    if (phase && onPhaseUpdate) {
+      onPhaseUpdate(phase.id, { progress: task.progress });
+    } else if (onTaskUpdate) {
+      const parentPhase = roadmap.phases.find(p => 
+        p.tasks.some(t => t.id === task.id)
+      );
+      if (parentPhase) {
+        onTaskUpdate(parentPhase.id, task.id, { progress: task.progress });
+      }
+    }
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed': return '#52c41a';
+      case 'in-progress': return '#1890ff';
+      case 'on-hold': return '#faad14';
+      default: return '#d9d9d9';
+    }
+  };
+
+  const columnWidth = viewMode === ViewMode.Year ? 350 : 
+                    viewMode === ViewMode.Month ? 300 : 
+                    viewMode === ViewMode.Week ? 250 : 60;
+
+  return (
+    <div className="project-roadmap-gantt w-full">
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
+        <div className="p-6">
+          <div className="flex justify-between items-center mb-4">
+            <div>
+              <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
+                {roadmap.name}
+              </h3>
+              {roadmap.description && (
+                <p className="text-gray-600 dark:text-gray-400 mb-0">
+                  {roadmap.description}
+                </p>
+              )}
+            </div>
+            <Space>
+              <Button 
+                type={viewMode === ViewMode.Week ? 'primary' : 'default'}
+                onClick={() => setViewMode(ViewMode.Week)}
+                className="dark:border-gray-600 dark:text-gray-300"
+              >
+                Week
+              </Button>
+              <Button 
+                type={viewMode === ViewMode.Month ? 'primary' : 'default'}
+                onClick={() => setViewMode(ViewMode.Month)}
+                className="dark:border-gray-600 dark:text-gray-300"
+              >
+                Month
+              </Button>
+              <Button 
+                type={viewMode === ViewMode.Year ? 'primary' : 'default'}
+                onClick={() => setViewMode(ViewMode.Year)}
+                className="dark:border-gray-600 dark:text-gray-300"
+              >
+                Year
+              </Button>
+            </Space>
+          </div>
+
+          {/* Phase Overview */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
+            {roadmap.phases.map((phase) => (
+              <div 
+                key={phase.id}
+                className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4 cursor-pointer hover:shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-all duration-200"
+                onClick={() => handlePhaseClick(phase)}
+              >
+                <div className="flex items-center justify-between mb-3">
+                  <Badge 
+                    color={getStatusColor(phase.status)} 
+                    text={
+                      <span className="font-medium text-gray-900 dark:text-gray-100">
+                        {phase.name}
+                      </span>
+                    }
+                  />
+                </div>
+                <div className="space-y-2 text-sm">
+                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                    <CalendarOutlined className="w-4 h-4" />
+                    <span>{phase.startDate.toLocaleDateString()} - {phase.endDate.toLocaleDateString()}</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                    <TeamOutlined className="w-4 h-4" />
+                    <span>{phase.tasks.length} tasks</span>
+                  </div>
+                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                    <CheckCircleOutlined className="w-4 h-4" />
+                    <span>{phase.progress}% complete</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Gantt Chart */}
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+        <div className="p-4">
+          <div className="w-full overflow-x-auto">
+            <div 
+              className="gantt-container"
+              style={{ 
+                '--gantt-background': ganttColors.background,
+                '--gantt-grid': ganttColors.grid,
+                '--gantt-text': ganttColors.text.primary,
+                '--gantt-border': ganttColors.border,
+              } as React.CSSProperties}
+            >
+              <Gantt
+                tasks={ganttTasks}
+                viewMode={viewMode}
+                onDateChange={handleDateChange}
+                onProgressChange={handleProgressChange}
+                onDoubleClick={handleTaskClick}
+                listCellWidth=""
+                columnWidth={columnWidth}
+                todayColor={ganttColors.today}
+                projectProgressColor={ganttColors.progressBar}
+                projectBackgroundColor={themeWiseColor('rgba(82, 196, 26, 0.1)', 'rgba(52, 211, 153, 0.2)', themeMode)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Phase Modal */}
+      <PhaseModal
+        visible={isModalVisible}
+        phase={selectedPhase}
+        onClose={() => setIsModalVisible(false)}
+        onUpdate={(updates) => {
+          if (selectedPhase && onPhaseUpdate) {
+            onPhaseUpdate(selectedPhase.id, updates);
+          }
+        }}
+      />
+    </div>
+  );
+};
+
+export default ProjectRoadmapGantt;

worklenz-frontend/src/components/project-roadmap-gantt/RoadmapDemo.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { Button, Space, message } from 'antd';
+import ProjectRoadmapGantt from './ProjectRoadmapGantt';
+import { sampleProjectRoadmap } from './sample-data';
+import { ProjectPhase, ProjectRoadmap } from '../../types/project-roadmap.types';
+import { useAppSelector } from '../../hooks/useAppSelector';
+
+const RoadmapDemo: React.FC = () => {
+  const [roadmap, setRoadmap] = useState<ProjectRoadmap>(sampleProjectRoadmap);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+
+  const handlePhaseUpdate = (phaseId: string, updates: Partial<ProjectPhase>) => {
+    setRoadmap(prevRoadmap => ({
+      ...prevRoadmap,
+      phases: prevRoadmap.phases.map(phase => 
+        phase.id === phaseId 
+          ? { ...phase, ...updates }
+          : phase
+      )
+    }));
+    
+    message.success('Phase updated successfully!');
+  };
+
+  const handleTaskUpdate = (phaseId: string, taskId: string, updates: any) => {
+    setRoadmap(prevRoadmap => ({
+      ...prevRoadmap,
+      phases: prevRoadmap.phases.map(phase => 
+        phase.id === phaseId 
+          ? {
+              ...phase,
+              tasks: phase.tasks.map(task => 
+                task.id === taskId 
+                  ? { ...task, ...updates }
+                  : task
+              )
+            }
+          : phase
+      )
+    }));
+    
+    message.success('Task updated successfully!');
+  };
+
+  const resetToSampleData = () => {
+    setRoadmap(sampleProjectRoadmap);
+    message.info('Roadmap reset to sample data');
+  };
+
+  return (
+    <div className="roadmap-demo p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
+        <div className="p-6">
+          <div className="flex justify-between items-center">
+            <div>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+                Project Roadmap Gantt Chart Demo
+              </h2>
+              <p className="text-gray-600 dark:text-gray-400 mb-0">
+                Interactive Gantt chart showing project phases as milestones/epics. 
+                Click on any phase card or Gantt bar to view detailed information in a modal.
+              </p>
+            </div>
+            <Space>
+              <Button 
+                onClick={resetToSampleData}
+                className="dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+              >
+                Reset to Sample Data
+              </Button>
+            </Space>
+          </div>
+        </div>
+      </div>
+
+      <ProjectRoadmapGantt
+        roadmap={roadmap}
+        viewOptions={{
+          viewMode: 'month',
+          showTasks: true,
+          showMilestones: true,
+          groupByPhase: true,
+        }}
+        onPhaseUpdate={handlePhaseUpdate}
+        onTaskUpdate={handleTaskUpdate}
+      />
+
+      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mt-4">
+        <div className="p-6">
+          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
+            Features Demonstrated:
+          </h3>
+          <ul className="space-y-2 text-gray-700 dark:text-gray-300">
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Phase-based Grouping:</strong> Projects organized by phases (Planning, Development, Testing, Deployment)</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Interactive Phase Cards:</strong> Click on phase cards for detailed view</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Gantt Chart Visualization:</strong> Timeline view with tasks, milestones, and dependencies</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Modal Details:</strong> Comprehensive phase information with tasks, milestones, and team members</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Progress Tracking:</strong> Visual progress indicators and completion statistics</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Multiple View Modes:</strong> Week, Month, and Year timeline views</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Task Management:</strong> Task assignments, priorities, and status tracking</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Milestone Tracking:</strong> Critical path milestones and completion status</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Team Overview:</strong> Team member assignments and workload distribution</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Editable Fields:</strong> In-modal editing for phase attributes (name, description, dates, status)</li>
+            <li>• <strong className="text-gray-900 dark:text-gray-100">Theme Support:</strong> Automatic light/dark theme adaptation with consistent styling</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RoadmapDemo;

worklenz-frontend/src/components/project-roadmap-gantt/gantt-theme.css

@@ -0,0 +1,221 @@
+/* Custom Gantt Chart Theme Overrides */
+
+/* Light theme styles */
+.gantt-container {
+  font-family: inherit;
+}
+
+.gantt-container .gantt-header {
+  background-color: var(--gantt-background, #ffffff);
+  border-bottom: 1px solid var(--gantt-border, #e5e7eb);
+  color: var(--gantt-text, #111827);
+}
+
+.gantt-container .gantt-task-list-wrapper {
+  background-color: var(--gantt-background, #ffffff);
+  border-right: 1px solid var(--gantt-border, #e5e7eb);
+}
+
+.gantt-container .gantt-task-list-table {
+  background-color: var(--gantt-background, #ffffff);
+}
+
+.gantt-container .gantt-task-list-table-row {
+  color: var(--gantt-text, #111827);
+  border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
+}
+
+.gantt-container .gantt-task-list-table-row:hover {
+  background-color: var(--gantt-grid, #f3f4f6);
+}
+
+.gantt-container .gantt-gantt {
+  background-color: var(--gantt-background, #ffffff);
+}
+
+.gantt-container .gantt-vertical-container {
+  background-color: var(--gantt-background, #ffffff);
+}
+
+.gantt-container .gantt-horizontal-container {
+  background-color: var(--gantt-background, #ffffff);
+}
+
+.gantt-container .gantt-calendar {
+  background-color: var(--gantt-background, #ffffff);
+  border-bottom: 1px solid var(--gantt-border, #e5e7eb);
+}
+
+.gantt-container .gantt-calendar-row {
+  color: var(--gantt-text, #111827);
+  background-color: var(--gantt-background, #ffffff);
+  border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
+}
+
+.gantt-container .gantt-grid-body {
+  background-color: var(--gantt-background, #ffffff);
+}
+
+.gantt-container .gantt-grid-row {
+  border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
+}
+
+.gantt-container .gantt-grid-row-line {
+  border-left: 1px solid var(--gantt-grid, #f3f4f6);
+}
+
+/* Dark theme overrides */
+html.dark .gantt-container .gantt-header {
+  background-color: #1f2937;
+  border-bottom-color: #4b5563;
+  color: #f9fafb;
+}
+
+html.dark .gantt-container .gantt-task-list-wrapper {
+  background-color: #1f2937;
+  border-right-color: #4b5563;
+}
+
+html.dark .gantt-container .gantt-task-list-table {
+  background-color: #1f2937;
+}
+
+html.dark .gantt-container .gantt-task-list-table-row {
+  color: #f9fafb;
+  border-bottom-color: #4b5563;
+}
+
+html.dark .gantt-container .gantt-task-list-table-row:hover {
+  background-color: #374151;
+}
+
+html.dark .gantt-container .gantt-gantt {
+  background-color: #1f2937;
+}
+
+html.dark .gantt-container .gantt-vertical-container {
+  background-color: #1f2937;
+}
+
+html.dark .gantt-container .gantt-horizontal-container {
+  background-color: #1f2937;
+}
+
+html.dark .gantt-container .gantt-calendar {
+  background-color: #1f2937;
+  border-bottom-color: #4b5563;
+}
+
+html.dark .gantt-container .gantt-calendar-row {
+  color: #f9fafb;
+  background-color: #1f2937;
+  border-bottom-color: #4b5563;
+}
+
+html.dark .gantt-container .gantt-grid-body {
+  background-color: #1f2937;
+}
+
+html.dark .gantt-container .gantt-grid-row {
+  border-bottom-color: #4b5563;
+}
+
+html.dark .gantt-container .gantt-grid-row-line {
+  border-left-color: #4b5563;
+}
+
+/* Tooltip theming */
+.gantt-container .gantt-tooltip {
+  background-color: var(--gantt-background, #ffffff);
+  border: 1px solid var(--gantt-border, #e5e7eb);
+  color: var(--gantt-text, #111827);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+html.dark .gantt-container .gantt-tooltip {
+  background-color: #374151;
+  border-color: #4b5563;
+  color: #f9fafb;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
+}
+
+/* Task bar styling improvements */
+.gantt-container .gantt-task-progress {
+  border-radius: 2px;
+}
+
+.gantt-container .gantt-task-background {
+  border-radius: 4px;
+  border: 1px solid var(--gantt-border, #e5e7eb);
+}
+
+html.dark .gantt-container .gantt-task-background {
+  border-color: #4b5563;
+}
+
+/* Milestone styling */
+.gantt-container .gantt-milestone {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+}
+
+html.dark .gantt-container .gantt-milestone {
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
+}
+
+/* Selection and hover states */
+.gantt-container .gantt-task:hover .gantt-task-background {
+  opacity: 0.9;
+  transform: translateY(-1px);
+  transition: all 0.2s ease;
+}
+
+.gantt-container .gantt-task-selected .gantt-task-background {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+}
+
+html.dark .gantt-container .gantt-task-selected .gantt-task-background {
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
+}
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+  .gantt-container {
+    font-size: 14px;
+  }
+  
+  .gantt-container .gantt-task-list-wrapper {
+    min-width: 200px;
+  }
+}
+
+/* Scrollbar theming */
+.gantt-container ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.gantt-container ::-webkit-scrollbar-track {
+  background: var(--gantt-grid, #f3f4f6);
+  border-radius: 4px;
+}
+
+.gantt-container ::-webkit-scrollbar-thumb {
+  background: var(--gantt-border, #e5e7eb);
+  border-radius: 4px;
+}
+
+.gantt-container ::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+html.dark .gantt-container ::-webkit-scrollbar-track {
+  background: #4b5563;
+}
+
+html.dark .gantt-container ::-webkit-scrollbar-thumb {
+  background: #6b7280;
+}
+
+html.dark .gantt-container ::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}