feat(gantt): introduce advanced Gantt chart components and demo page

- Added new components for an advanced Gantt chart, including AdvancedGanttChart, GanttGrid, DraggableTaskBar, and TimelineMarkers.
- Implemented a demo page (GanttDemoPage) to showcase the functionality of the new Gantt chart components.
- Enhanced project roadmap features with ProjectRoadmapGantt and related components for better project management visualization.
- Introduced sample data for testing and demonstration purposes, improving the user experience in the Gantt chart interface.
- Updated main routes to include the new Gantt demo page for easy access.

.claude/settings.local.json

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

.gitignore

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

worklenz-backend/database/pg-migrations/README.md

@@ -1,72 +0,0 @@
-# Node-pg-migrate Migrations
-
-This directory contains database migrations managed by node-pg-migrate.
-
-## Migration Commands
-
-- `npm run migrate:create -- migration-name` - Create a new migration file
-- `npm run migrate:up` - Run all pending migrations
-- `npm run migrate:down` - Rollback the last migration
-- `npm run migrate:redo` - Rollback and re-run the last migration
-
-## Migration File Format
-
-Migrations are JavaScript files with timestamp prefixes (e.g., `20250115000000_performance-indexes.js`).
-
-Each migration file exports two functions:
-- `exports.up` - Contains the forward migration logic
-- `exports.down` - Contains the rollback logic
-
-## Best Practices
-
-1. **Always use IF EXISTS/IF NOT EXISTS checks** to make migrations idempotent
-2. **Test migrations locally** before deploying to production
-3. **Include rollback logic** in the `down` function for all changes
-4. **Use descriptive names** for migration files
-5. **Keep migrations focused** - one logical change per migration
-
-## Example Migration
-
-```javascript
-exports.up = pgm => {
-  // Create table with IF NOT EXISTS
-  pgm.createTable('users', {
-    id: 'id',
-    name: { type: 'varchar(100)', notNull: true },
-    created_at: {
-      type: 'timestamp',
-      notNull: true,
-      default: pgm.func('current_timestamp')
-    }
-  }, { ifNotExists: true });
-
-  // Add index with IF NOT EXISTS
-  pgm.createIndex('users', 'name', {
-    name: 'idx_users_name',
-    ifNotExists: true
-  });
-};
-
-exports.down = pgm => {
-  // Drop in reverse order
-  pgm.dropIndex('users', 'name', { 
-    name: 'idx_users_name', 
-    ifExists: true 
-  });
-  
-  pgm.dropTable('users', { ifExists: true });
-};
-```
-
-## Migration History
-
-The `pgmigrations` table tracks which migrations have been run. Do not modify this table manually.
-
-## Converting from SQL Migrations
-
-When converting SQL migrations to node-pg-migrate format:
-
-1. Wrap SQL statements in `pgm.sql()` calls
-2. Use node-pg-migrate helper methods where possible (createTable, addColumns, etc.)
-3. Always include `IF EXISTS/IF NOT EXISTS` checks
-4. Ensure proper rollback logic in the `down` function

worklenz-backend/database/sql/indexes.sql

@@ -132,139 +132,3 @@ CREATE INDEX IF NOT EXISTS projects_team_id_index
 CREATE INDEX IF NOT EXISTS projects_team_id_name_index
     ON projects (team_id, name);
 
--- Performance indexes for optimized tasks queries
--- From migration: 20250115000000-performance-indexes.sql
-
--- Composite index for main task filtering
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_project_archived_parent 
-ON tasks(project_id, archived, parent_task_id) 
-WHERE archived = FALSE;
-
--- Index for status joins
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_status_project 
-ON tasks(status_id, project_id) 
-WHERE archived = FALSE;
-
--- Index for assignees lookup
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_assignees_task_member 
-ON tasks_assignees(task_id, team_member_id);
-
--- Index for phase lookup
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_phase_task_phase 
-ON task_phase(task_id, phase_id);
-
--- Index for subtask counting
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_parent_archived 
-ON tasks(parent_task_id, archived) 
-WHERE parent_task_id IS NOT NULL AND archived = FALSE;
-
--- Index for labels
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_labels_task_label 
-ON task_labels(task_id, label_id);
-
--- Index for comments count
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_comments_task 
-ON task_comments(task_id);
-
--- Index for attachments count
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_attachments_task 
-ON task_attachments(task_id);
-
--- Index for work log aggregation
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_work_log_task 
-ON task_work_log(task_id);
-
--- Index for subscribers check
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_subscribers_task 
-ON task_subscribers(task_id);
-
--- Index for dependencies check
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_dependencies_task 
-ON task_dependencies(task_id);
-
--- Index for timers lookup
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_timers_task_user 
-ON task_timers(task_id, user_id);
-
--- Index for custom columns
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_cc_column_values_task 
-ON cc_column_values(task_id);
-
--- Index for team member info view optimization
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_team_members_team_user 
-ON team_members(team_id, user_id) 
-WHERE active = TRUE;
-
--- Index for notification settings
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_notification_settings_user_team 
-ON notification_settings(user_id, team_id);
-
--- Index for task status categories
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_statuses_category 
-ON task_statuses(category_id, project_id);
-
--- Index for project phases
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_project_phases_project_sort 
-ON project_phases(project_id, sort_index);
-
--- Index for task priorities
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_priorities_value 
-ON task_priorities(value);
-
--- Index for team labels
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_team_labels_team 
-ON team_labels(team_id);
-
--- Advanced performance indexes for task optimization
-
--- Composite index for task main query optimization (covers most WHERE conditions)
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_performance_main
-ON tasks(project_id, archived, parent_task_id, status_id, priority_id)
-WHERE archived = FALSE;
-
--- Index for sorting by sort_order with project filter
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_project_sort_order
-ON tasks(project_id, sort_order)
-WHERE archived = FALSE;
-
--- Index for email_invitations to optimize team_member_info_view
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_email_invitations_team_member
-ON email_invitations(team_member_id);
-
--- Covering index for task status with category information
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_statuses_covering
-ON task_statuses(id, category_id, project_id);
-
--- Index for task aggregation queries (parent task progress calculation)
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_parent_status_archived
-ON tasks(parent_task_id, status_id, archived)
-WHERE archived = FALSE;
-
--- Index for project team member filtering
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_team_members_project_lookup
-ON team_members(team_id, active, user_id)
-WHERE active = TRUE;
-
--- Covering index for tasks with frequently accessed columns
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_covering_main
-ON tasks(id, project_id, archived, parent_task_id, status_id, priority_id, sort_order, name)
-WHERE archived = FALSE;
-
--- Index for task search functionality
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_name_search
-ON tasks USING gin(to_tsvector('english', name))
-WHERE archived = FALSE;
-
--- Index for date-based filtering (if used)
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_dates
-ON tasks(project_id, start_date, end_date)
-WHERE archived = FALSE;
-
--- Index for task timers with user filtering
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_timers_user_task
-ON task_timers(user_id, task_id);
-
--- Index for sys_task_status_categories lookups
-CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_sys_task_status_categories_covering
-ON sys_task_status_categories(id, color_code, color_code_dark, is_done, is_doing, is_todo);
-

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

@@ -265,8 +265,8 @@ export default class ReportingMembersController extends ReportingControllerBase
                     (SELECT color_code FROM project_phases WHERE id = (SELECT phase_id FROM task_phase WHERE task_id = t.id)) AS phase_color,
 
                     (total_minutes * 60) AS total_minutes,
-                    (SELECT SUM(time_spent) FROM task_work_log twl WHERE twl.task_id = t.id AND twl.user_id = (SELECT user_id FROM team_members WHERE id = $1)) AS time_logged,
-                    ((SELECT SUM(time_spent) FROM task_work_log twl WHERE twl.task_id = t.id AND twl.user_id = (SELECT user_id FROM team_members WHERE id = $1)) - (total_minutes * 60)) AS overlogged_time`;
+                    (SELECT SUM(time_spent) FROM task_work_log WHERE task_id = t.id AND ta.team_member_id = $1) AS time_logged,
+                    ((SELECT SUM(time_spent) FROM task_work_log WHERE task_id = t.id AND ta.team_member_id = $1) - (total_minutes * 60)) AS overlogged_time`;
   }
 
   protected static getActivityLogsOverdue(key: string, dateRange: string[]) {

worklenz-backend/src/controllers/tasks-controller-base.ts

@@ -16,7 +16,6 @@ export interface ITaskGroup {
   start_date?: string;
   end_date?: string;
   color_code: string;
-  color_code_dark: string;
   category_id: string | null;
   old_category_id?: string;
   todo_progress?: number;

worklenz-backend/src/shared/constants.ts

@@ -89,24 +89,24 @@ export const NumbersColorMap: { [x: string]: string } = {
 };
 
 export const PriorityColorCodes: { [x: number]: string; } = {
-  0: "#2E8B57",
-  1: "#DAA520",
-  2: "#CD5C5C"
+  0: "#75c997",
+  1: "#fbc84c",
+  2: "#f37070"
 };
 
 export const PriorityColorCodesDark: { [x: number]: string; } = {
-  0: "#3CB371",
-  1: "#B8860B",
-  2: "#F08080"
+  0: "#46D980",
+  1: "#FFC227",
+  2: "#FF4141"
 };
 
 export const TASK_STATUS_TODO_COLOR = "#a9a9a9";
 export const TASK_STATUS_DOING_COLOR = "#70a6f3";
 export const TASK_STATUS_DONE_COLOR = "#75c997";
 
-export const TASK_PRIORITY_LOW_COLOR = "#2E8B57";
-export const TASK_PRIORITY_MEDIUM_COLOR = "#DAA520";
-export const TASK_PRIORITY_HIGH_COLOR = "#CD5C5C";
+export const TASK_PRIORITY_LOW_COLOR = "#75c997";
+export const TASK_PRIORITY_MEDIUM_COLOR = "#fbc84c";
+export const TASK_PRIORITY_HIGH_COLOR = "#f37070";
 
 export const TASK_DUE_COMPLETED_COLOR = "#75c997";
 export const TASK_DUE_UPCOMING_COLOR = "#70a6f3";

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

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

worklenz-frontend/index.html

@@ -57,15 +57,116 @@
     <!-- Environment configuration -->
     <script src="/env-config.js"></script>
     
-    <!-- Analytics Module -->
-    <script src="/js/analytics.js"></script>
+    <!-- Optimized Google Analytics with reduced blocking -->
+    <script>
+      // Function to initialize Google Analytics asynchronously
+      function initGoogleAnalytics() {
+        // Use requestIdleCallback to defer analytics loading
+        const loadAnalytics = () => {
+          // Determine which tracking ID to use based on the environment
+          const isProduction = window.location.hostname === 'app.worklenz.com';
+
+          const trackingId = isProduction ? 'G-7KSRKQ1397' : 'G-3LM2HGWEXG'; // Open source tracking ID
+
+          // Load the Google Analytics script
+          const script = document.createElement('script');
+          script.async = true;
+          script.src = `https://www.googletagmanager.com/gtag/js?id=${trackingId}`;
+          document.head.appendChild(script);
+
+          // Initialize Google Analytics
+          window.dataLayer = window.dataLayer || [];
+          function gtag() {
+            dataLayer.push(arguments);
+          }
+          gtag('js', new Date());
+          gtag('config', trackingId);
+        };
+
+        // Use requestIdleCallback if available, otherwise setTimeout
+        if ('requestIdleCallback' in window) {
+          requestIdleCallback(loadAnalytics, { timeout: 2000 });
+        } else {
+          setTimeout(loadAnalytics, 1000);
+        }
+      }
+
+      // Initialize analytics after a delay to not block initial render
+      initGoogleAnalytics();
+
+      // Function to show privacy notice
+      function showPrivacyNotice() {
+        const notice = document.createElement('div');
+        notice.style.cssText = `
+          position: fixed;
+          bottom: 16px;
+          right: 16px;
+          background: #222;
+          color: #f5f5f5;
+          padding: 12px 16px 10px 16px;
+          border-radius: 7px;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+          z-index: 1000;
+          max-width: 320px;
+          font-family: Inter, sans-serif;
+          border: 1px solid #333;
+          font-size: 0.95rem;
+        `;
+        notice.innerHTML = `
+          <div style="margin-bottom: 6px; font-weight: 600; color: #fff; font-size: 1rem;">Analytics Notice</div>
+          <div style="margin-bottom: 8px; color: #f5f5f5;">This app uses Google Analytics for anonymous usage stats. No personal data is tracked.</div>
+          <button id="analytics-notice-btn" style="padding: 5px 14px; background: #1890ff; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.95rem;">Got it</button>
+        `;
+        document.body.appendChild(notice);
+        // Add event listener to button
+        const btn = notice.querySelector('#analytics-notice-btn');
+        btn.addEventListener('click', function (e) {
+          e.preventDefault();
+          localStorage.setItem('privacyNoticeShown', 'true');
+          notice.remove();
+        });
+      }
+
+      // Wait for DOM to be ready
+      document.addEventListener('DOMContentLoaded', function () {
+        // Check if we should show the notice
+        const isProduction =
+          window.location.hostname === 'worklenz.com' ||
+          window.location.hostname === 'app.worklenz.com';
+        const noticeShown = localStorage.getItem('privacyNoticeShown') === 'true';
+
+        // Show notice if not in production and not shown before
+        if (!isProduction && !noticeShown) {
+          showPrivacyNotice();
+        }
+      });
+    </script>
   </head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="./src/index.tsx"></script>
-    <!-- HubSpot Integration Module -->
-    <script src="/js/hubspot.js"></script>
+    <script type="text/javascript">
+      // Load HubSpot script asynchronously and only for production
+      if (window.location.hostname === 'app.worklenz.com') {
+        // Use requestIdleCallback to defer HubSpot loading
+        const loadHubSpot = () => {
+          var hs = document.createElement('script');
+          hs.type = 'text/javascript';
+          hs.id = 'hs-script-loader';
+          hs.async = true;
+          hs.defer = true;
+          hs.src = '//js.hs-scripts.com/22348300.js';
+          document.body.appendChild(hs);
+        };
+
+        if ('requestIdleCallback' in window) {
+          requestIdleCallback(loadHubSpot, { timeout: 3000 });
+        } else {
+          setTimeout(loadHubSpot, 2000);
+        }
+      }
+    </script>
   </body>
 </html>

worklenz-frontend/public/js/analytics.js

@@ -1,97 +0,0 @@
-/**
- * Google Analytics initialization module
- * Handles analytics loading and privacy notices
- */
-
-class AnalyticsManager {
-  constructor() {
-    this.isProduction = window.location.hostname === 'app.worklenz.com';
-    this.trackingId = this.isProduction ? 'G-7KSRKQ1397' : 'G-3LM2HGWEXG';
-  }
-
-  /**
-   * Initialize Google Analytics asynchronously
-   */
-  init() {
-    const loadAnalytics = () => {
-      // Load the Google Analytics script
-      const script = document.createElement('script');
-      script.async = true;
-      script.src = `https://www.googletagmanager.com/gtag/js?id=${this.trackingId}`;
-      document.head.appendChild(script);
-
-      // Initialize Google Analytics
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag('js', new Date());
-      gtag('config', this.trackingId);
-    };
-
-    // Use requestIdleCallback if available, otherwise setTimeout
-    if ('requestIdleCallback' in window) {
-      requestIdleCallback(loadAnalytics, { timeout: 2000 });
-    } else {
-      setTimeout(loadAnalytics, 1000);
-    }
-  }
-
-  /**
-   * Show privacy notice for non-production environments
-   */
-  showPrivacyNotice() {
-    const notice = document.createElement('div');
-    notice.style.cssText = `
-      position: fixed;
-      bottom: 16px;
-      right: 16px;
-      background: #222;
-      color: #f5f5f5;
-      padding: 12px 16px 10px 16px;
-      border-radius: 7px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
-      z-index: 1000;
-      max-width: 320px;
-      font-family: Inter, sans-serif;
-      border: 1px solid #333;
-      font-size: 0.95rem;
-    `;
-    notice.innerHTML = `
-      <div style="margin-bottom: 6px; font-weight: 600; color: #fff; font-size: 1rem;">Analytics Notice</div>
-      <div style="margin-bottom: 8px; color: #f5f5f5;">This app uses Google Analytics for anonymous usage stats. No personal data is tracked.</div>
-      <button id="analytics-notice-btn" style="padding: 5px 14px; background: #1890ff; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.95rem;">Got it</button>
-    `;
-    document.body.appendChild(notice);
-
-    // Add event listener to button
-    const btn = notice.querySelector('#analytics-notice-btn');
-    btn.addEventListener('click', (e) => {
-      e.preventDefault();
-      localStorage.setItem('privacyNoticeShown', 'true');
-      notice.remove();
-    });
-  }
-
-  /**
-   * Check if privacy notice should be shown
-   */
-  checkPrivacyNotice() {
-    const isProduction = 
-      window.location.hostname === 'worklenz.com' ||
-      window.location.hostname === 'app.worklenz.com';
-    const noticeShown = localStorage.getItem('privacyNoticeShown') === 'true';
-
-    // Show notice if not in production and not shown before
-    if (!isProduction && !noticeShown) {
-      this.showPrivacyNotice();
-    }
-  }
-}
-
-// Initialize analytics when DOM is ready
-document.addEventListener('DOMContentLoaded', () => {
-  const analytics = new AnalyticsManager();
-  analytics.init();
-  analytics.checkPrivacyNotice();
-});

worklenz-frontend/public/js/hubspot.js

@@ -1,137 +0,0 @@
-/**
- * HubSpot Chat Widget integration module
- * Handles widget loading and dark mode theming
- */
-
-class HubSpotManager {
-  constructor() {
-    this.isProduction = window.location.hostname === 'app.worklenz.com';
-    this.scriptId = 'hs-script-loader';
-    this.scriptSrc = '//js.hs-scripts.com/22348300.js';
-    this.styleId = 'hubspot-dark-mode-override';
-  }
-
-  /**
-   * Load HubSpot script with dark mode support
-   */
-  init() {
-    if (!this.isProduction) return;
-
-    const loadHubSpot = () => {
-      const script = document.createElement('script');
-      script.type = 'text/javascript';
-      script.id = this.scriptId;
-      script.async = true;
-      script.defer = true;
-      script.src = this.scriptSrc;
-      
-      // Configure dark mode after script loads
-      script.onload = () => this.setupDarkModeSupport();
-      
-      document.body.appendChild(script);
-    };
-
-    // Use requestIdleCallback for better performance
-    if ('requestIdleCallback' in window) {
-      requestIdleCallback(loadHubSpot, { timeout: 3000 });
-    } else {
-      setTimeout(loadHubSpot, 2000);
-    }
-  }
-
-  /**
-   * Setup dark mode theme switching for HubSpot widget
-   */
-  setupDarkModeSupport() {
-    const applyTheme = () => {
-      const isDark = document.documentElement.classList.contains('dark');
-      
-      // Remove existing theme styles
-      const existingStyle = document.getElementById(this.styleId);
-      if (existingStyle) {
-        existingStyle.remove();
-      }
-      
-      if (isDark) {
-        this.injectDarkModeCSS();
-      }
-    };
-    
-    // Apply initial theme after delay to ensure widget is loaded
-    setTimeout(applyTheme, 1000);
-    
-    // Watch for theme changes
-    const observer = new MutationObserver(applyTheme);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-  }
-
-  /**
-   * Inject CSS for dark mode styling
-   */
-  injectDarkModeCSS() {
-    const style = document.createElement('style');
-    style.id = this.styleId;
-    style.textContent = `
-      /* HubSpot Chat Widget Dark Mode Override */
-      #hubspot-conversations-inline-parent,
-      #hubspot-conversations-iframe-container,
-      .shadow-2xl.widget-align-right.widget-align-bottom,
-      [data-test-id="chat-widget"],
-      [class*="VizExCollapsedChat"],
-      [class*="VizExExpandedChat"],
-      iframe[src*="hubspot"] {
-        filter: invert(1) hue-rotate(180deg) !important;
-        background: transparent !important;
-      }
-      
-      /* Target HubSpot widget container backgrounds */
-      #hubspot-conversations-inline-parent div,
-      #hubspot-conversations-iframe-container div,
-      [data-test-id="chat-widget"] div {
-        background-color: transparent !important;
-      }
-      
-      /* Prevent double inversion of images, avatars, and icons */
-      #hubspot-conversations-iframe-container img,
-      #hubspot-conversations-iframe-container [style*="background-image"],
-      #hubspot-conversations-iframe-container svg,
-      iframe[src*="hubspot"] img,
-      iframe[src*="hubspot"] svg,
-      [data-test-id="chat-widget"] img,
-      [data-test-id="chat-widget"] svg {
-        filter: invert(1) hue-rotate(180deg) !important;
-      }
-      
-      /* Additional targeting for widget launcher and chat bubble */
-      div[class*="shadow-2xl"],
-      div[class*="widget-align"],
-      div[style*="position: fixed"] {
-        filter: invert(1) hue-rotate(180deg) !important;
-      }
-    `;
-    document.head.appendChild(style);
-  }
-
-  /**
-   * Remove HubSpot widget and associated styles
-   */
-  cleanup() {
-    const script = document.getElementById(this.scriptId);
-    const style = document.getElementById(this.styleId);
-    
-    if (script) script.remove();
-    if (style) style.remove();
-  }
-}
-
-// Initialize HubSpot integration
-document.addEventListener('DOMContentLoaded', () => {
-  const hubspot = new HubSpotManager();
-  hubspot.init();
-  
-  // Make available globally for potential cleanup
-  window.HubSpotManager = hubspot;
-});

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

@@ -7,13 +7,11 @@
   "emailLabel": "Email",
   "emailPlaceholder": "Shkruani email-in tuaj",
   "emailRequired": "Ju lutemi shkruani Email-in tuaj!",
-  "passwordLabel": "Password",
-  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
-  "passwordPlaceholder": "Enter your password",
+  "passwordLabel": "Fjalëkalimi",
+  "passwordPlaceholder": "Krijoni një fjalëkalim",
   "passwordRequired": "Ju lutemi krijoni një Fjalëkalim!",
   "passwordMinCharacterRequired": "Fjalëkalimi duhet të jetë së paku 8 karaktere!",
-  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
-  "passwordPatternRequired": "Fjalëkalimi nuk i plotëson kërkesat!",
+  "passwordPatternRequired": "Fjalëkalimi nuk plotëson kërkesat!",
   "strongPasswordPlaceholder": "Vendosni një fjalëkalim më të fortë",
   "passwordValidationAltText": "Fjalëkalimi duhet të përmbajë së paku 8 karaktere me shkronja të mëdha dhe të vogla, një numër dhe një simbol.",
   "signupSuccessMessage": "Jeni regjistruar me sukses!",

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

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

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

@@ -8,11 +8,9 @@
   "emailPlaceholder": "Enter your email",
   "emailRequired": "Please enter your Email!",
   "passwordLabel": "Password",
-  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
   "passwordPlaceholder": "Enter your password",
   "passwordRequired": "Please enter your Password!",
   "passwordMinCharacterRequired": "Password must be at least 8 characters!",
-  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
   "passwordPatternRequired": "Password does not meet the requirements!",
   "strongPasswordPlaceholder": "Enter a stronger password",
   "passwordValidationAltText": "Password must include at least 8 characters with upper and lower case letters, a number, and a symbol.",

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

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

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

@@ -7,13 +7,11 @@
   "emailLabel": "Email",
   "emailPlaceholder": "Insira seu email",
   "emailRequired": "Por favor, insira seu Email!",
-  "passwordLabel": "Password",
-  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
-  "passwordPlaceholder": "Enter your password",
+  "passwordLabel": "Senha",
+  "passwordPlaceholder": "Insira sua senha",
   "passwordRequired": "Por favor, insira sua Senha!",
   "passwordMinCharacterRequired": "Senha deve ter pelo menos 8 caracteres!",
-  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
-  "passwordPatternRequired": "A senha não atende aos requisitos!",
+  "passwordPatternRequired": "Senha não atende aos requisitos!",
   "strongPasswordPlaceholder": "Insira uma senha mais forte",
   "passwordValidationAltText": "Senha deve incluir pelo menos 8 caracteres com letras maiúsculas e minúsculas, um número e um símbolo.",
   "signupSuccessMessage": "Você se inscreveu com sucesso!",

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

@@ -7,12 +7,10 @@
   "emailLabel": "电子邮件",
   "emailPlaceholder": "输入您的电子邮件",
   "emailRequired": "请输入您的电子邮件！",
-  "passwordLabel": "Password",
-  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
-  "passwordPlaceholder": "Enter your password",
+  "passwordLabel": "密码",
+  "passwordPlaceholder": "输入您的密码",
   "passwordRequired": "请输入您的密码！",
   "passwordMinCharacterRequired": "密码必须至少包含8个字符！",
-  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
   "passwordPatternRequired": "密码不符合要求！",
   "strongPasswordPlaceholder": "输入更强的密码",
   "passwordValidationAltText": "密码必须至少包含8个字符，包括大小写字母、一个数字和一个符号。",

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

@@ -4,12 +4,12 @@ import { Navigate } from 'react-router-dom';
 import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
 
 // Lazy load auth page components for better code splitting
-const LoginPage = lazy(() => import('@/pages/auth/LoginPage'));
-const SignupPage = lazy(() => import('@/pages/auth/SignupPage'));
-const ForgotPasswordPage = lazy(() => import('@/pages/auth/ForgotPasswordPage'));
-const LoggingOutPage = lazy(() => import('@/pages/auth/LoggingOutPage'));
-const AuthenticatingPage = lazy(() => import('@/pages/auth/AuthenticatingPage'));
-const VerifyResetEmailPage = lazy(() => import('@/pages/auth/VerifyResetEmailPage'));
+const LoginPage = lazy(() => import('@/pages/auth/login-page'));
+const SignupPage = lazy(() => import('@/pages/auth/signup-page'));
+const ForgotPasswordPage = lazy(() => import('@/pages/auth/forgot-password-page'));
+const LoggingOutPage = lazy(() => import('@/pages/auth/logging-out'));
+const AuthenticatingPage = lazy(() => import('@/pages/auth/authenticating'));
+const VerifyResetEmailPage = lazy(() => import('@/pages/auth/verify-reset-email'));
 
 const authRoutes = [
   {

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

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { useSelector } from 'react-redux';
-import { PlusOutlined, UserAddOutlined } from '@/shared/antd-imports';
+import { PlusOutlined, UserAddOutlined } from '@ant-design/icons';
 import { RootState } from '@/app/store';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { ITeamMembersViewModel } from '@/types/teamMembers/teamMembersViewModel.types';

worklenz-frontend/src/components/AuthPageHeader.tsx

@@ -1,4 +1,4 @@
-import { Flex, Typography } from '@/shared/antd-imports';
+import { Flex, Typography } from 'antd';
 import logo from '@/assets/images/worklenz-light-mode.png';
 import logoDark from '@/assets/images/worklenz-dark-mode.png';
 import { useAppSelector } from '@/hooks/useAppSelector';

worklenz-frontend/src/components/CustomColordLabel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip } from '@/shared/antd-imports';
+import { Tooltip } from 'antd';
 import { Label } from '@/types/task-management.types';
 import { ITaskLabel } from '@/types/tasks/taskLabel.types';
 

worklenz-frontend/src/components/CustomNumberLabel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip } from '@/shared/antd-imports';
+import { Tooltip } from 'antd';
 import { NumbersColorMap } from '@/shared/constants';
 
 interface CustomNumberLabelProps {

worklenz-frontend/src/components/CustomSearchbar.tsx

@@ -1,5 +1,5 @@
-import { SearchOutlined } from '@/shared/antd-imports';
-import { Input } from '@/shared/antd-imports';
+import { SearchOutlined } from '@ant-design/icons';
+import { Input } from 'antd';
 
 type CustomSearchbarProps = {
   placeholderText: string;

worklenz-frontend/src/components/CustomTableTitle.tsx

@@ -1,6 +1,6 @@
-import { Flex, Tooltip, Typography } from '@/shared/antd-imports';
+import { Flex, Tooltip, Typography } from 'antd';
 import { colors } from '../styles/colors';
-import { ExclamationCircleOutlined } from '@/shared/antd-imports';
+import { ExclamationCircleOutlined } from '@ant-design/icons';
 
 // this custom table title used when the typography font weigh 500 needed
 const CustomTableTitle = ({ title, tooltip }: { title: string; tooltip?: string | null }) => {

worklenz-frontend/src/components/EmptyListPlaceholder.tsx

@@ -1,24 +1,17 @@
-import { Empty, Typography } from '@/shared/antd-imports';
+import { Empty, Typography } from 'antd';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 
 type EmptyListPlaceholderProps = {
   imageSrc?: string;
   imageHeight?: number;
-  text?: string;
-  textKey?: string;
-  i18nNs?: string;
+  text: string;
 };
 
 const EmptyListPlaceholder = ({
   imageSrc = 'https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp',
   imageHeight = 60,
   text,
-  textKey,
-  i18nNs = 'task-list-table',
 }: EmptyListPlaceholderProps) => {
-  const { t } = useTranslation(i18nNs);
-  const description = textKey ? t(textKey) : text;
   return (
     <Empty
       image={imageSrc}
@@ -29,7 +22,7 @@ const EmptyListPlaceholder = ({
         alignItems: 'center',
         marginBlockStart: 24,
       }}
-      description={<Typography.Text type="secondary">{description}</Typography.Text>}
+      description={<Typography.Text type="secondary">{text}</Typography.Text>}
     />
   );
 };

worklenz-frontend/src/components/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Result } from '@/shared/antd-imports';
+import { Button, Result } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import logger from '@/utils/errorLogger';

worklenz-frontend/src/components/LabelsSelector.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { useSelector } from 'react-redux';
-import { PlusOutlined, TagOutlined } from '@/shared/antd-imports';
+import { PlusOutlined, TagOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { RootState } from '@/app/store';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';

worklenz-frontend/src/components/ModuleErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import React, { Component, ErrorInfo, ReactNode } from 'react';
-import { Button, Result } from '@/shared/antd-imports';
+import { Button, Result } from 'antd';
 import CacheCleanup from '@/utils/cache-cleanup';
 
 interface Props {

worklenz-frontend/src/components/PinRouteToNavbarButton.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { getJSONFromLocalStorage, saveJSONToLocalStorage } from '../utils/localStorageFunctions';
-import { Button, ConfigProvider, Tooltip } from '@/shared/antd-imports';
-import { PushpinFilled, PushpinOutlined } from '@/shared/antd-imports';
+import { Button, ConfigProvider, Tooltip } from 'antd';
+import { PushpinFilled, PushpinOutlined } from '@ant-design/icons';
 import { colors } from '../styles/colors';
 import { navRoutes, NavRoutesType } from '../features/navbar/navRoutes';
 

worklenz-frontend/src/components/PreferenceSelector.tsx

@@ -1,5 +1,5 @@
-import { FloatButton, Space, Tooltip } from '@/shared/antd-imports';
-import { FormatPainterOutlined } from '@/shared/antd-imports';
+import { FloatButton, Space, Tooltip } from 'antd';
+import { FormatPainterOutlined } from '@ant-design/icons';
 // import LanguageSelector from '../features/i18n/language-selector';
 // import ThemeSelector from '../features/theme/ThemeSelector';
 

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

@@ -1,8 +1,8 @@
 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 { Form, Input, Button, List, Alert, message, InputRef } from 'antd';
+import { CloseCircleOutlined, MailOutlined, PlusOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
-import { Typography } from '@/shared/antd-imports';
+import { Typography } from 'antd';
 import { setTeamMembers, setTasks } from '@/features/account-setup/account-setup.slice';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '@/app/store';

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Form, Input, InputRef, Typography } from '@/shared/antd-imports';
+import { Form, Input, InputRef, Typography } from 'antd';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { setOrganizationName } from '@/features/account-setup/account-setup.slice';

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, Select, Typography } from 'antd';
 import TemplateDrawer from '../common/template-drawer/template-drawer';
 
 import { RootState } from '@/app/store';

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

@@ -1,6 +1,6 @@
 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 { Form, Input, Button, Typography, List, InputRef } from 'antd';
+import { PlusOutlined, DeleteOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { RootState } from '@/app/store';

worklenz-frontend/src/components/add-members-dropdown-v2/add-members-dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Avatar, Button, Checkbox, Dropdown, Input, Menu, Typography } from '@/shared/antd-imports';
-import { UserAddOutlined, UsergroupAddOutlined } from '@/shared/antd-imports';
+import { Avatar, Button, Checkbox, Dropdown, Input, Menu, Typography } from 'antd';
+import { UserAddOutlined, UsergroupAddOutlined } from '@ant-design/icons';
 import './add-members-dropdown.css';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { AvatarNamesMap } from '@/shared/constants';

worklenz-frontend/src/components/add-members-dropdown/add-members-dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Avatar, Button, Checkbox, Dropdown, Input, Menu, Typography } from '@/shared/antd-imports';
-import { PlusOutlined, UsergroupAddOutlined } from '@/shared/antd-imports';
+import { Avatar, Button, Checkbox, Dropdown, Input, Menu, Typography } from 'antd';
+import { PlusOutlined, UsergroupAddOutlined } from '@ant-design/icons';
 import './add-members-dropdown.css';
 import { AvatarNamesMap } from '../../shared/constants';
 import { useAppDispatch } from '@/hooks/useAppDispatch';

worklenz-frontend/src/components/admin-center/billing/billing-tables/charges-table.tsx

@@ -2,7 +2,7 @@ import { adminCenterApiService } from '@/api/admin-center/admin-center.api.servi
 import { IBillingCharge, IBillingChargesResponse } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
 import { formatDate } from '@/utils/timeUtils';
-import { Table, TableProps, Tag } from '@/shared/antd-imports';
+import { Table, TableProps, Tag } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -27,19 +27,19 @@ const ChargesTable: React.FC = () => {
 
   const columns: TableProps<IBillingCharge>['columns'] = [
     {
-      title: t('description') as string,
+      title: t('description'),
       key: 'name',
       dataIndex: 'name',
     },
     {
-      title: t('billingPeriod') as string,
+      title: t('billingPeriod'),
       key: 'billingPeriod',
       render: record => {
         return `${formatDate(new Date(record.start_date))} - ${formatDate(new Date(record.end_date))}`;
       },
     },
     {
-      title: t('billStatus') as string,
+      title: t('billStatus'),
       key: 'status',
       dataIndex: 'status',
       render: (_, record) => {
@@ -55,7 +55,7 @@ const ChargesTable: React.FC = () => {
       },
     },
     {
-      title: t('perUserValue') as string,
+      title: t('perUserValue'),
       key: 'perUserValue',
       dataIndex: 'perUserValue',
       render: (_, record) => (
@@ -65,12 +65,12 @@ const ChargesTable: React.FC = () => {
       ),
     },
     {
-      title: t('users') as string,
+      title: t('users'),
       key: 'quantity',
       dataIndex: 'quantity',
     },
     {
-      title: t('amount') as string,
+      title: t('amount'),
       key: 'amount',
       dataIndex: 'amount',
       render: (_, record) => (

worklenz-frontend/src/components/admin-center/billing/billing-tables/invoices-table.tsx

@@ -2,8 +2,8 @@ import { adminCenterApiService } from '@/api/admin-center/admin-center.api.servi
 import { IBillingTransaction } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
 import { formatDate } from '@/utils/timeUtils';
-import { ContainerOutlined } from '@/shared/antd-imports';
-import { Button, Table, TableProps, Tag, Tooltip } from '@/shared/antd-imports';
+import { ContainerOutlined } from '@ant-design/icons';
+import { Button, Table, TableProps, Tag, Tooltip } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

worklenz-frontend/src/components/admin-center/billing/current-bill.tsx

@@ -1,7 +1,7 @@
-import { Card, Col, Row, Tooltip } from '@/shared/antd-imports';
-import React, { useEffect, useMemo, useCallback } from 'react';
+import { Card, Col, Row, Tooltip, Typography } from 'antd';
+import React, { useEffect } from 'react';
 import './current-bill.css';
-import { InfoCircleTwoTone } from '@/shared/antd-imports';
+import { InfoCircleTwoTone } from '@ant-design/icons';
 import ChargesTable from './billing-tables/charges-table';
 import InvoicesTable from './billing-tables/invoices-table';
 
@@ -20,7 +20,7 @@ import AccountStorage from './account-storage/account-storage';
 import { useAuthService } from '@/hooks/useAuth';
 import { ISUBSCRIPTION_TYPE } from '@/shared/constants';
 
-const CurrentBill: React.FC = React.memo(() => {
+const CurrentBill: React.FC = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation('admin-center/current-bill');
   const themeMode = useAppSelector(state => state.themeReducer.mode);
@@ -32,90 +32,70 @@ const CurrentBill: React.FC = React.memo(() => {
     dispatch(fetchFreePlanSettings());
   }, [dispatch]);
 
-  const titleStyle = useMemo(
-    () => ({
-      color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
-      fontWeight: 500,
-      fontSize: '16px',
-      display: 'flex',
-      gap: '4px',
-    }),
-    [themeMode]
+  const titleStyle = {
+    color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
+    fontWeight: 500,
+    fontSize: '16px',
+    display: 'flex',
+    gap: '4px',
+  };
+
+  const renderMobileView = () => (
+    <div>
+      <Col span={24}>
+        <CurrentPlanDetails />
+      </Col>
+
+      <Col span={24} style={{ marginTop: '1.5rem' }}>
+        <AccountStorage themeMode={themeMode} />
+      </Col>
+    </div>
   );
 
-  const cardStyle = useMemo(() => ({ marginTop: '16px' }), []);
-  const colStyle = useMemo(() => ({ marginTop: '1.5rem' }), []);
-  const tabletColStyle = useMemo(() => ({ paddingRight: '10px' }), []);
-  const tabletColStyleRight = useMemo(() => ({ paddingLeft: '10px' }), []);
-
-  const renderMobileView = useCallback(
-    () => (
-      <div>
-        <Col span={24}>
-          <CurrentPlanDetails />
-        </Col>
-
-        <Col span={24} style={colStyle}>
-          <AccountStorage themeMode={themeMode} />
-        </Col>
+  const renderChargesAndInvoices = () => (
+    <>
+      <div style={{ marginTop: '1.5rem' }}>
+        <Card
+          title={
+            <span style={titleStyle}>
+              <span>{t('charges')}</span>
+              <Tooltip title={t('tooltip')}>
+                <InfoCircleTwoTone />
+              </Tooltip>
+            </span>
+          }
+          style={{ marginTop: '16px' }}
+        >
+          <ChargesTable />
+        </Card>
       </div>
-    ),
-    [colStyle, themeMode]
-  );
 
-  const renderChargesAndInvoices = useCallback(
-    () => (
-      <>
-        <div style={colStyle}>
-          <Card
-            title={
-              <span style={titleStyle}>
-                <span>{t('charges')}</span>
-                <Tooltip title={t('tooltip')}>
-                  <InfoCircleTwoTone />
-                </Tooltip>
-              </span>
-            }
-            style={cardStyle}
-          >
-            <ChargesTable />
-          </Card>
-        </div>
-
-        <div style={colStyle}>
-          <Card title={<span style={titleStyle}>{t('invoices')}</span>} style={cardStyle}>
-            <InvoicesTable />
-          </Card>
-        </div>
-      </>
-    ),
-    [colStyle, titleStyle, cardStyle, t]
-  );
-
-  const shouldShowChargesAndInvoices = useMemo(
-    () => currentSession?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE,
-    [currentSession?.subscription_type]
+      <div style={{ marginTop: '1.5rem' }}>
+        <Card title={<span style={titleStyle}>{t('invoices')}</span>} style={{ marginTop: '16px' }}>
+          <InvoicesTable />
+        </Card>
+      </div>
+    </>
   );
 
   return (
     <div style={{ width: '100%' }} className="current-billing">
       {isTablet ? (
         <Row>
-          <Col span={16} style={tabletColStyle}>
+          <Col span={16} style={{ paddingRight: '10px' }}>
             <CurrentPlanDetails />
           </Col>
-          <Col span={8} style={tabletColStyleRight}>
+          <Col span={8} style={{ paddingLeft: '10px' }}>
             <AccountStorage themeMode={themeMode} />
           </Col>
         </Row>
       ) : (
         renderMobileView()
       )}
-      {shouldShowChargesAndInvoices && renderChargesAndInvoices()}
+      {currentSession?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
+        renderChargesAndInvoices()}
     </div>
   );
-});
-
-CurrentBill.displayName = 'CurrentBill';
+};
 
 export default CurrentBill;

worklenz-frontend/src/components/admin-center/billing/current-plan-details/current-plan-details.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import React, { useState } from 'react';
 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
 import {
   evt_billing_pause_plan,
@@ -17,9 +17,10 @@ import {
   Typography,
   Statistic,
   Select,
+  Form,
   Row,
   Col,
-} from '@/shared/antd-imports';
+} from 'antd/es';
 import RedeemCodeDrawer from '../drawers/redeem-code-drawer/redeem-code-drawer';
 import {
   fetchBillingInfo,
@@ -29,7 +30,7 @@ import {
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useTranslation } from 'react-i18next';
-import { WarningTwoTone, PlusOutlined } from '@/shared/antd-imports';
+import { WarningTwoTone, PlusOutlined } from '@ant-design/icons';
 import { calculateTimeGap } from '@/utils/calculate-time-gap';
 import { formatDate } from '@/utils/timeUtils';
 import UpgradePlansLKR from '../drawers/upgrade-plans-lkr/upgrade-plans-lkr';
@@ -37,21 +38,6 @@ import UpgradePlans from '../drawers/upgrade-plans/upgrade-plans';
 import { ISUBSCRIPTION_TYPE, SUBSCRIPTION_STATUS } from '@/shared/constants';
 import { billingApiService } from '@/api/admin-center/billing.api.service';
 
-type SubscriptionAction = 'pause' | 'resume';
-type SeatOption = { label: string; value: number | string };
-
-const SEAT_COUNT_LIMIT = '100+';
-const BILLING_DELAY_MS = 8000;
-const LTD_USER_LIMIT = 50;
-const BUTTON_STYLE = {
-  backgroundColor: '#1890ff',
-  borderColor: '#1890ff',
-};
-const STATISTIC_VALUE_STYLE = {
-  fontSize: '24px',
-  fontWeight: 'bold' as const,
-};
-
 const CurrentPlanDetails = () => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation('admin-center/current-bill');
@@ -61,7 +47,7 @@ const CurrentPlanDetails = () => {
   const [cancellingPlan, setCancellingPlan] = useState(false);
   const [addingSeats, setAddingSeats] = useState(false);
   const [isMoreSeatsModalVisible, setIsMoreSeatsModalVisible] = useState(false);
-  const [selectedSeatCount, setSelectedSeatCount] = useState<number | string>(1);
+  const [selectedSeatCount, setSelectedSeatCount] = useState<number | string>(5);
 
   const themeMode = useAppSelector(state => state.themeReducer.mode);
   const { loadingBillingInfo, billingInfo, freePlanSettings, isUpgradeModalOpen } = useAppSelector(
@@ -69,16 +55,14 @@ const CurrentPlanDetails = () => {
   );
 
   const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-  
-  const seatCountOptions: SeatOption[] = useMemo(() => {
-    const options: SeatOption[] = [
-      1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,
-    ].map(value => ({ label: value.toString(), value }));
-    options.push({ label: SEAT_COUNT_LIMIT, value: SEAT_COUNT_LIMIT });
-    return options;
-  }, []);
 
-  const handleSubscriptionAction = useCallback(async (action: SubscriptionAction) => {
+  type SeatOption = { label: string; value: number | string };
+  const seatCountOptions: SeatOption[] = [
+    1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,
+  ].map(value => ({ label: value.toString(), value }));
+  seatCountOptions.push({ label: '100+', value: '100+' });
+
+  const handleSubscriptionAction = async (action: 'pause' | 'resume') => {
     const isResume = action === 'resume';
     const setLoadingState = isResume ? setCancellingPlan : setPausingPlan;
     const apiMethod = isResume
@@ -94,21 +78,21 @@ const CurrentPlanDetails = () => {
           setLoadingState(false);
           dispatch(fetchBillingInfo());
           trackMixpanelEvent(eventType);
-        }, BILLING_DELAY_MS);
-        return;
+        }, 8000);
+        return; // Exit function to prevent finally block from executing
       }
     } catch (error) {
       logger.error(`Error ${action}ing subscription`, error);
-      setLoadingState(false);
+      setLoadingState(false); // Only set to false on error
     }
-  }, [dispatch, trackMixpanelEvent]);
+  };
 
-  const handleAddMoreSeats = useCallback(() => {
+  const handleAddMoreSeats = () => {
     setIsMoreSeatsModalVisible(true);
-  }, []);
+  };
 
-  const handlePurchaseMoreSeats = useCallback(async () => {
-    if (selectedSeatCount.toString() === SEAT_COUNT_LIMIT || !billingInfo?.total_seats) return;
+  const handlePurchaseMoreSeats = async () => {
+    if (selectedSeatCount.toString() === '100+' || !billingInfo?.total_seats) return;
 
     try {
       setAddingSeats(true);
@@ -124,75 +108,51 @@ const CurrentPlanDetails = () => {
     } finally {
       setAddingSeats(false);
     }
-  }, [selectedSeatCount, billingInfo?.total_seats, dispatch, trackMixpanelEvent]);
+  };
 
-  const calculateRemainingSeats = useMemo(() => {
+  const calculateRemainingSeats = () => {
     if (billingInfo?.total_seats && billingInfo?.total_used) {
       return billingInfo.total_seats - billingInfo.total_used;
     }
     return 0;
-  }, [billingInfo?.total_seats, billingInfo?.total_used]);
+  };
 
-  // Calculate intelligent default for seat selection based on current usage
-  const getDefaultSeatCount = useMemo(() => {
-    const currentUsed = billingInfo?.total_used || 0;
-    const availableSeats = calculateRemainingSeats;
-    
-    // If only 1 user and no available seats, suggest 1 additional seat
-    if (currentUsed === 1 && availableSeats === 0) {
-      return 1;
-    }
-    
-    // If they have some users but running low on seats, suggest enough for current users
-    if (availableSeats < currentUsed && currentUsed > 0) {
-      return Math.max(1, currentUsed - availableSeats);
-    }
-    
-    // Default fallback
-    return Math.max(1, Math.min(5, currentUsed || 1));
-  }, [billingInfo?.total_used, calculateRemainingSeats]);
-
-  // Update selected seat count when billing info changes
-  useEffect(() => {
-    setSelectedSeatCount(getDefaultSeatCount);
-  }, [getDefaultSeatCount]);
-
-  const checkSubscriptionStatus = useCallback((allowedStatuses: string[]) => {
+  const checkSubscriptionStatus = (allowedStatuses: any[]) => {
     if (!billingInfo?.status || billingInfo.is_ltd_user) return false;
     return allowedStatuses.includes(billingInfo.status);
-  }, [billingInfo?.status, billingInfo?.is_ltd_user]);
+  };
 
-  const shouldShowRedeemButton = useMemo(() => {
+  const shouldShowRedeemButton = () => {
     if (billingInfo?.trial_in_progress) return true;
-    return billingInfo?.ltd_users ? billingInfo.ltd_users < LTD_USER_LIMIT : false;
-  }, [billingInfo?.trial_in_progress, billingInfo?.ltd_users]);
+    return billingInfo?.ltd_users ? billingInfo.ltd_users < 50 : false;
+  };
 
-  const showChangeButton = useMemo(() => {
+  const showChangeButton = () => {
     return checkSubscriptionStatus([SUBSCRIPTION_STATUS.ACTIVE, SUBSCRIPTION_STATUS.PASTDUE]);
-  }, [checkSubscriptionStatus]);
+  };
 
-  const showPausePlanButton = useMemo(() => {
+  const showPausePlanButton = () => {
     return checkSubscriptionStatus([SUBSCRIPTION_STATUS.ACTIVE, SUBSCRIPTION_STATUS.PASTDUE]);
-  }, [checkSubscriptionStatus]);
+  };
 
-  const showResumePlanButton = useMemo(() => {
+  const showResumePlanButton = () => {
     return checkSubscriptionStatus([SUBSCRIPTION_STATUS.PAUSED]);
-  }, [checkSubscriptionStatus]);
+  };
 
-  const shouldShowAddSeats = useMemo(() => {
+  const shouldShowAddSeats = () => {
     if (!billingInfo) return false;
     return (
       billingInfo.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
       billingInfo.status === SUBSCRIPTION_STATUS.ACTIVE
     );
-  }, [billingInfo]);
+  };
 
-  const renderExtra = useCallback(() => {
+  const renderExtra = () => {
     if (!billingInfo || billingInfo.is_custom) return null;
 
     return (
       <Space>
-        {showPausePlanButton && (
+        {showPausePlanButton() && (
           <Button
             type="link"
             danger
@@ -203,7 +163,7 @@ const CurrentPlanDetails = () => {
           </Button>
         )}
 
-        {showResumePlanButton && (
+        {showResumePlanButton() && (
           <Button
             type="primary"
             loading={cancellingPlan}
@@ -219,7 +179,7 @@ const CurrentPlanDetails = () => {
           </Button>
         )}
 
-        {showChangeButton && (
+        {showChangeButton() && (
           <Button
             type="primary"
             loading={pausingPlan || cancellingPlan}
@@ -230,19 +190,9 @@ const CurrentPlanDetails = () => {
         )}
       </Space>
     );
-  }, [
-    billingInfo,
-    showPausePlanButton,
-    showResumePlanButton,
-    showChangeButton,
-    pausingPlan,
-    cancellingPlan,
-    handleSubscriptionAction,
-    dispatch,
-    t,
-  ]);
+  };
 
-  const renderLtdDetails = useCallback(() => {
+  const renderLtdDetails = () => {
     if (!billingInfo || billingInfo.is_custom) return null;
     return (
       <Flex vertical>
@@ -250,41 +200,41 @@ const CurrentPlanDetails = () => {
         <Typography.Text>{t('ltdUsers', { ltd_users: billingInfo.ltd_users })}</Typography.Text>
       </Flex>
     );
-  }, [billingInfo, t]);
+  };
 
-  const checkIfTrialExpired = useCallback(() => {
-    if (!billingInfo?.trial_expire_date) return false;
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    const trialExpireDate = new Date(billingInfo.trial_expire_date);
-    trialExpireDate.setHours(0, 0, 0, 0);
-    return today > trialExpireDate;
-  }, [billingInfo?.trial_expire_date]);
+  const renderTrialDetails = () => {
+    const checkIfTrialExpired = () => {
+      if (!billingInfo?.trial_expire_date) return false;
+      const today = new Date();
+      today.setHours(0, 0, 0, 0); // Set to start of day for comparison
+      const trialExpireDate = new Date(billingInfo.trial_expire_date);
+      trialExpireDate.setHours(0, 0, 0, 0); // Set to start of day for comparison
+      return today > trialExpireDate;
+    };
 
-  const getExpirationMessage = useCallback((expireDate: string) => {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
+    const getExpirationMessage = (expireDate: string) => {
+      const today = new Date();
+      today.setHours(0, 0, 0, 0); // Set to start of day for comparison
 
-    const tomorrow = new Date(today);
-    tomorrow.setDate(tomorrow.getDate() + 1);
+      const tomorrow = new Date(today);
+      tomorrow.setDate(tomorrow.getDate() + 1);
 
-    const expDate = new Date(expireDate);
-    expDate.setHours(0, 0, 0, 0);
+      const expDate = new Date(expireDate);
+      expDate.setHours(0, 0, 0, 0); // Set to start of day for comparison
 
-    if (expDate.getTime() === today.getTime()) {
-      return t('expirestoday', 'today');
-    } else if (expDate.getTime() === tomorrow.getTime()) {
-      return t('expirestomorrow', 'tomorrow');
-    } else if (expDate < today) {
-      const diffTime = Math.abs(today.getTime() - expDate.getTime());
-      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-      return t('expiredDaysAgo', '{{days}} days ago', { days: diffDays });
-    } else {
-      return calculateTimeGap(expireDate);
-    }
-  }, [t]);
+      if (expDate.getTime() === today.getTime()) {
+        return t('expirestoday', 'today');
+      } else if (expDate.getTime() === tomorrow.getTime()) {
+        return t('expirestomorrow', 'tomorrow');
+      } else if (expDate < today) {
+        const diffTime = Math.abs(today.getTime() - expDate.getTime());
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+        return t('expiredDaysAgo', '{{days}} days ago', { days: diffDays });
+      } else {
+        return calculateTimeGap(expireDate);
+      }
+    };
 
-  const renderTrialDetails = useCallback(() => {
     const isExpired = checkIfTrialExpired();
     const trialExpireDate = billingInfo?.trial_expire_date || '';
 
@@ -307,9 +257,9 @@ const CurrentPlanDetails = () => {
         </Tooltip>
       </Flex>
     );
-  }, [billingInfo?.trial_expire_date, checkIfTrialExpired, getExpirationMessage, t]);
+  };
 
-  const renderFreePlan = useCallback(() => (
+  const renderFreePlan = () => (
     <Flex vertical>
       <Typography.Text strong>{t('freePlan')}</Typography.Text>
       <Typography.Text>
@@ -321,9 +271,9 @@ const CurrentPlanDetails = () => {
         <br />- {freePlanSettings?.free_tier_storage} MB {t('storage')}
       </Typography.Text>
     </Flex>
-  ), [freePlanSettings, t]);
+  );
 
-  const renderPaddleSubscriptionInfo = useCallback(() => {
+  const renderPaddleSubscriptionInfo = () => {
     return (
       <Flex vertical>
         <Typography.Text strong>{billingInfo?.plan_name}</Typography.Text>
@@ -337,14 +287,14 @@ const CurrentPlanDetails = () => {
           </Typography.Text>
         </Flex>
 
-        {shouldShowAddSeats && billingInfo?.total_seats && (
+        {shouldShowAddSeats() && billingInfo?.total_seats && (
           <div style={{ marginTop: '16px' }}>
             <Row gutter={16} align="middle">
               <Col span={6}>
                 <Statistic
-                  title={t('totalSeats') as string}
+                  title={t('totalSeats')}
                   value={billingInfo.total_seats}
-                  valueStyle={STATISTIC_VALUE_STYLE}
+                  valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
                 />
               </Col>
               <Col span={8}>
@@ -352,16 +302,16 @@ const CurrentPlanDetails = () => {
                   type="primary"
                   icon={<PlusOutlined />}
                   onClick={handleAddMoreSeats}
-                  style={BUTTON_STYLE}
+                  style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}
                 >
                   {t('addMoreSeats')}
                 </Button>
               </Col>
               <Col span={6}>
                 <Statistic
-                  title={t('availableSeats') as string}
-                  value={calculateRemainingSeats}
-                  valueStyle={STATISTIC_VALUE_STYLE}
+                  title={t('availableSeats')}
+                  value={calculateRemainingSeats()}
+                  valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
                 />
               </Col>
             </Row>
@@ -369,17 +319,17 @@ const CurrentPlanDetails = () => {
         )}
       </Flex>
     );
-  }, [billingInfo, shouldShowAddSeats, handleAddMoreSeats, calculateRemainingSeats, t]);
+  };
 
-  const renderCreditSubscriptionInfo = useCallback(() => {
+  const renderCreditSubscriptionInfo = () => {
     return (
       <Flex vertical>
         <Typography.Text strong>{t('creditPlan', 'Credit Plan')}</Typography.Text>
       </Flex>
     );
-  }, [t]);
+  };
 
-  const renderCustomSubscriptionInfo = useCallback(() => {
+  const renderCustomSubscriptionInfo = () => {
     return (
       <Flex vertical>
         <Typography.Text strong>{t('customPlan', 'Custom Plan')}</Typography.Text>
@@ -390,36 +340,7 @@ const CurrentPlanDetails = () => {
         </Typography.Text>
       </Flex>
     );
-  }, [billingInfo?.valid_till_date, t]);
-
-  const renderSubscriptionContent = useCallback(() => {
-    if (!billingInfo) return null;
-
-    switch (billingInfo.subscription_type) {
-      case ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL:
-        return renderLtdDetails();
-      case ISUBSCRIPTION_TYPE.TRIAL:
-        return renderTrialDetails();
-      case ISUBSCRIPTION_TYPE.FREE:
-        return renderFreePlan();
-      case ISUBSCRIPTION_TYPE.PADDLE:
-        return renderPaddleSubscriptionInfo();
-      case ISUBSCRIPTION_TYPE.CREDIT:
-        return renderCreditSubscriptionInfo();
-      case ISUBSCRIPTION_TYPE.CUSTOM:
-        return renderCustomSubscriptionInfo();
-      default:
-        return null;
-    }
-  }, [
-    billingInfo,
-    renderLtdDetails,
-    renderTrialDetails,
-    renderFreePlan,
-    renderPaddleSubscriptionInfo,
-    renderCreditSubscriptionInfo,
-    renderCustomSubscriptionInfo,
-  ]);
+  };
 
   return (
     <Card
@@ -440,10 +361,19 @@ const CurrentPlanDetails = () => {
     >
       <Flex vertical>
         <div style={{ marginBottom: '14px' }}>
-          {renderSubscriptionContent()}
+          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL &&
+            renderLtdDetails()}
+          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.TRIAL && renderTrialDetails()}
+          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.FREE && renderFreePlan()}
+          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
+            renderPaddleSubscriptionInfo()}
+          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CREDIT &&
+            renderCreditSubscriptionInfo()}
+          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CUSTOM &&
+            renderCustomSubscriptionInfo()}
         </div>
 
-        {shouldShowRedeemButton && (
+        {shouldShowRedeemButton() && (
           <>
             <Button
               type="link"
@@ -478,28 +408,17 @@ const CurrentPlanDetails = () => {
             <Typography.Paragraph
               style={{ fontSize: '16px', margin: '0 0 16px 0', fontWeight: 500 }}
             >
-              {billingInfo?.total_used === 1 
-                ? t('purchaseSeatsTextSingle', "Add more seats to invite team members to your workspace.")
-                : t('purchaseSeatsText', "To continue, you'll need to purchase additional seats.")
-              }
+              {t('purchaseSeatsText', "To continue, you'll need to purchase additional seats.")}
             </Typography.Paragraph>
 
             <Typography.Paragraph style={{ margin: '0 0 16px 0' }}>
               {t('currentSeatsText', 'You currently have {{seats}} seats available.', {
                 seats: billingInfo?.total_seats,
               })}
-              {billingInfo?.total_used === 1 && (
-                <span style={{ color: '#666', marginLeft: '8px' }}>
-                  ({t('singleUserNote', 'Currently used by 1 team member')})
-                </span>
-              )}
             </Typography.Paragraph>
 
             <Typography.Paragraph style={{ margin: '0 0 24px 0' }}>
-              {billingInfo?.total_used === 1
-                ? t('selectSeatsTextSingle', 'Select how many additional seats you need for new team members.')
-                : t('selectSeatsText', 'Please select the number of additional seats to purchase.')
-              }
+              {t('selectSeatsText', 'Please select the number of additional seats to purchase.')}
             </Typography.Paragraph>
 
             <div style={{ marginBottom: '24px' }}>
@@ -511,18 +430,18 @@ const CurrentPlanDetails = () => {
                 options={seatCountOptions}
                 style={{ width: '300px' }}
               />
-
             </div>
 
             <Flex justify="end">
-              {selectedSeatCount.toString() !== SEAT_COUNT_LIMIT ? (
+              {selectedSeatCount.toString() !== '100+' ? (
                 <Button
                   type="primary"
                   loading={addingSeats}
                   onClick={handlePurchaseMoreSeats}
                   style={{
                     minWidth: '100px',
-                    ...BUTTON_STYLE,
+                    backgroundColor: '#1890ff',
+                    borderColor: '#1890ff',
                     borderRadius: '2px',
                   }}
                 >

worklenz-frontend/src/components/admin-center/billing/drawers/redeem-code-drawer/redeem-code-drawer.tsx

@@ -1,4 +1,4 @@
-import { Button, Drawer, Form, Input, notification, Typography } from '@/shared/antd-imports';
+import { Button, Drawer, Form, Input, notification, Typography } from 'antd';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppSelector } from '@/hooks/useAppSelector';

worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans-lkr/upgrade-plans-lkr.tsx

@@ -1,7 +1,7 @@
-import { Button, Card, Col, Form, Input, notification, Row, Tag, Typography } from '@/shared/antd-imports';
+import { Button, Card, Col, Form, Input, notification, Row, Tag, Typography } from 'antd';
 import React, { useState } from 'react';
 import './upgrade-plans-lkr.css';
-import { CheckCircleFilled } from '@/shared/antd-imports';
+import { CheckCircleFilled } from '@ant-design/icons';
 import { RootState } from '@/app/store';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.css

@@ -1,44 +0,0 @@
-.upgrade-plans-responsive {
-  padding: 24px;
-}
-
-.upgrade-plans-row-responsive {
-  width: 100%;
-  flex-wrap: wrap;
-}
-
-@media (max-width: 900px) {
-  .upgrade-plans-row-responsive .ant-col {
-    flex: 0 0 100%;
-    max-width: 100%;
-    margin-bottom: 16px;
-  }
-  .upgrade-plans-row-responsive .ant-card {
-    width: 100%;
-    min-width: 0;
-  }
-}
-
-@media (max-width: 600px) {
-  .upgrade-plans-responsive {
-    padding: 8px;
-  }
-  .upgrade-plans-row-responsive .ant-col {
-    padding: 0 !important;
-    margin-bottom: 12px;
-  }
-  .upgrade-plans-row-responsive .ant-card {
-    width: 100%;
-    min-width: 0;
-    box-sizing: border-box;
-  }
-  .upgrade-plans-responsive .ant-typography,
-  .upgrade-plans-responsive .ant-btn,
-  .upgrade-plans-responsive .ant-form-item {
-    width: 100%;
-    text-align: center;
-  }
-  .upgrade-plans-responsive .ant-btn {
-    margin-top: 12px;
-  }
-} 

worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.tsx

@@ -11,7 +11,7 @@ import {
   Tooltip,
   Typography,
   message,
-} from '@/shared/antd-imports';
+} from 'antd/es';
 import { useTranslation } from 'react-i18next';
 
 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
@@ -22,7 +22,7 @@ import {
 import logger from '@/utils/errorLogger';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { IPaddlePlans, SUBSCRIPTION_STATUS } from '@/shared/constants';
-import { CheckCircleFilled, InfoCircleOutlined } from '@/shared/antd-imports';
+import { CheckCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
 import { useAuthService } from '@/hooks/useAuth';
 import { fetchBillingInfo, toggleUpgradeModal } from '@/features/admin-center/admin-center.slice';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
@@ -30,7 +30,6 @@ import { billingApiService } from '@/api/admin-center/billing.api.service';
 import { authApiService } from '@/api/auth/auth.api.service';
 import { setUser } from '@/features/user/userSlice';
 import { setSession } from '@/utils/session-helper';
-import './upgrade-plans.css';
 
 // Extend Window interface to include Paddle
 declare global {
@@ -66,24 +65,20 @@ const UpgradePlans = () => {
   const [paddleError, setPaddleError] = useState<string | null>(null);
 
   const populateSeatCountOptions = (currentSeats: number) => {
-    if (typeof currentSeats !== 'number') return [];
+    if (!currentSeats) return [];
 
     const step = 5;
     const maxSeats = 90;
-    const minValue = currentSeats;
-    const options: { value: number; disabled: boolean }[] = [];
+    const minValue = Math.min(currentSeats + 1);
+    const rangeStart = Math.ceil(minValue / step) * step;
+    const range = Array.from(
+      { length: Math.floor((maxSeats - rangeStart) / step) + 1 },
+      (_, i) => rangeStart + i * step
+    );
 
-    // Always show 1-5, but disable if less than minValue
-    for (let i = 1; i <= 5; i++) {
-      options.push({ value: i, disabled: i < minValue });
-    }
-
-    // Show all multiples of 5 from 10 to maxSeats
-    for (let i = 10; i <= maxSeats; i += step) {
-      options.push({ value: i, disabled: i < minValue });
-    }
-
-    return options;
+    return currentSeats < step
+      ? [...Array.from({ length: rangeStart - minValue }, (_, i) => minValue + i), ...range]
+      : range;
   };
 
   const fetchPricingPlans = async () => {
@@ -344,25 +339,24 @@ const UpgradePlans = () => {
   }, []);
 
   return (
-    <div className="upgrade-plans-responsive">
+    <div>
       <Flex justify="center" align="center">
         <Typography.Title level={2}>
           {billingInfo?.status === SUBSCRIPTION_STATUS.TRIALING
-            ? t('selectPlan', 'Select Plan')
-            : t('changeSubscriptionPlan', 'Change Subscription Plan')}
+            ? t('selectPlan')
+            : t('changeSubscriptionPlan')}
         </Typography.Title>
       </Flex>
 
       <Flex justify="center" align="center">
         <Form form={form}>
-          <Form.Item name="seatCount" label={t('noOfSeats', 'Number of Seats')}>
+          <Form.Item name="seatCount" label={t('noOfSeats')}>
             <Select
               style={{ width: 100 }}
               value={selectedSeatCount}
               options={seatCountOptions.map(option => ({
-                value: option.value,
-                label: option.value.toString(),
-                disabled: option.disabled,
+                value: option,
+                text: option.toString(),
               }))}
               onChange={setSelectedSeatCount}
             />
@@ -371,31 +365,31 @@ const UpgradePlans = () => {
       </Flex>
 
       <Flex>
-        <Row className="w-full upgrade-plans-row-responsive">
+        <Row className="w-full">
           {/* Free Plan */}
           <Col span={8} style={{ padding: '0 4px' }}>
             <Card
               style={{ ...isSelected(paddlePlans.FREE), height: '100%' }}
               hoverable
-              title={<span style={cardStyles.title}>{t('freePlan', 'Free Plan')}</span>}
+              title={<span style={cardStyles.title}>{t('freePlan')}</span>}
               onClick={() => setSelectedCard(paddlePlans.FREE)}
             >
               <div style={cardStyles.priceContainer}>
                 <Flex justify="space-between" align="center">
                   <Typography.Title level={1}>$ 0.00</Typography.Title>
-                  <Typography.Text>{t('freeForever', 'Free Forever')}</Typography.Text>
+                  <Typography.Text>{t('freeForever')}</Typography.Text>
                 </Flex>
                 <Flex justify="center" align="center">
                   <Typography.Text strong style={{ fontSize: '16px' }}>
-                    {t('bestForPersonalUse', 'Best for Personal Use')}
+                    {t('bestForPersonalUse')}
                   </Typography.Text>
                 </Flex>
               </div>
 
               <div style={cardStyles.featureList}>
-                {renderFeature(`${plans.free_tier_storage} ${t('storage', 'Storage')}`)}
-                {renderFeature(`${plans.projects_limit} ${t('projects', 'Projects')}`)}
-                {renderFeature(`${plans.team_member_limit} ${t('teamMembers', 'Team Members')}`)}
+                {renderFeature(`${plans.free_tier_storage} ${t('storage')}`)}
+                {renderFeature(`${plans.projects_limit} ${t('projects')}`)}
+                {renderFeature(`${plans.team_member_limit} ${t('teamMembers')}`)}
               </div>
             </Card>
           </Col>
@@ -407,9 +401,9 @@ const UpgradePlans = () => {
               hoverable
               title={
                 <span style={cardStyles.title}>
-                  {t('annualPlan', 'Annual Plan')}{' '}
+                  {t('annualPlan')}{' '}
                   <Tag color="volcano" style={{ lineHeight: '21px' }}>
-                    {t('tag', 'Popular')}
+                    {t('tag')}
                   </Tag>
                 </span>
               }
@@ -435,16 +429,16 @@ const UpgradePlans = () => {
                   </Typography.Text>
                 </Flex>
                 <Flex justify="center" align="center">
-                  <Typography.Text>{t('billedAnnually', 'Billed Annually')}</Typography.Text>
+                  <Typography.Text>{t('billedAnnually')}</Typography.Text>
                 </Flex>
               </div>
 
               <div style={cardStyles.featureList} className="mt-4">
-                {renderFeature(t('startupText01', 'Unlimited Projects'))}
-                {renderFeature(t('startupText02', 'Unlimited Team Members'))}
-                {renderFeature(t('startupText03', 'Unlimited Storage'))}
-                {renderFeature(t('startupText04', 'Priority Support'))}
-                {renderFeature(t('startupText05', 'Advanced Analytics'))}
+                {renderFeature(t('startupText01'))}
+                {renderFeature(t('startupText02'))}
+                {renderFeature(t('startupText03'))}
+                {renderFeature(t('startupText04'))}
+                {renderFeature(t('startupText05'))}
               </div>
             </Card>
           </Col>
@@ -454,7 +448,7 @@ const UpgradePlans = () => {
             <Card
               style={{ ...isSelected(paddlePlans.MONTHLY), height: '100%' }}
               hoverable
-              title={<span style={cardStyles.title}>{t('monthlyPlan', 'Monthly Plan')}</span>}
+              title={<span style={cardStyles.title}>{t('monthlyPlan')}</span>}
               onClick={() => setSelectedCard(paddlePlans.MONTHLY)}
             >
               <div style={cardStyles.priceContainer}>
@@ -475,16 +469,16 @@ const UpgradePlans = () => {
                   </Typography.Text>
                 </Flex>
                 <Flex justify="center" align="center">
-                  <Typography.Text>{t('billedMonthly', 'Billed Monthly')}</Typography.Text>
+                  <Typography.Text>{t('billedMonthly')}</Typography.Text>
                 </Flex>
               </div>
 
               <div style={cardStyles.featureList}>
-                {renderFeature(t('startupText01', 'Unlimited Projects'))}
-                {renderFeature(t('startupText02', 'Unlimited Team Members'))}
-                {renderFeature(t('startupText03', 'Unlimited Storage'))}
-                {renderFeature(t('startupText04', 'Priority Support'))}
-                {renderFeature(t('startupText05', 'Advanced Analytics'))}
+                {renderFeature(t('startupText01'))}
+                {renderFeature(t('startupText02'))}
+                {renderFeature(t('startupText03'))}
+                {renderFeature(t('startupText04'))}
+                {renderFeature(t('startupText05'))}
               </div>
             </Card>
           </Col>
@@ -515,8 +509,8 @@ const UpgradePlans = () => {
             disabled={billingInfo?.plan_id === plans.annual_plan_id}
           >
             {billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE
-              ? t('changeToPlan', 'Change to {{plan}}', { plan: t('annualPlan', 'Annual Plan') })
-              : t('continueWith', 'Continue with {{plan}}', { plan: t('annualPlan', 'Annual Plan') })}
+              ? t('changeToPlan', { plan: t('annualPlan') })
+              : t('continueWith', { plan: t('annualPlan') })}
           </Button>
         )}
         {selectedPlan === paddlePlans.MONTHLY && (
@@ -528,8 +522,8 @@ const UpgradePlans = () => {
             disabled={billingInfo?.plan_id === plans.monthly_plan_id}
           >
             {billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE
-              ? t('changeToPlan', 'Change to {{plan}}', { plan: t('monthlyPlan', 'Monthly Plan') })
-              : t('continueWith', 'Continue with {{plan}}', { plan: t('monthlyPlan', 'Monthly Plan') })}
+              ? t('changeToPlan', { plan: t('monthlyPlan') })
+              : t('continueWith', { plan: t('monthlyPlan') })}
           </Button>
         )}
       </Row>

worklenz-frontend/src/components/admin-center/configuration/configuration.tsx

@@ -1,5 +1,5 @@
-import { Button, Card, Col, Divider, Form, Input, Row, Select } from '@/shared/antd-imports';
-import React, { useEffect, useState, useMemo, useCallback } from 'react';
+import { Button, Card, Col, Divider, Form, Input, notification, Row, Select } from 'antd';
+import React, { useEffect, useState } from 'react';
 import { RootState } from '../../../app/store';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { IBillingConfigurationCountry } from '@/types/admin-center/country.types';
@@ -7,15 +7,14 @@ import { adminCenterApiService } from '@/api/admin-center/admin-center.api.servi
 import { IBillingConfiguration } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
 
-const Configuration: React.FC = React.memo(() => {
+const Configuration: React.FC = () => {
   const themeMode = useAppSelector((state: RootState) => state.themeReducer.mode);
 
   const [countries, setCountries] = useState<IBillingConfigurationCountry[]>([]);
   const [configuration, setConfiguration] = useState<IBillingConfiguration>();
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
-
-  const fetchCountries = useCallback(async () => {
+  const fetchCountries = async () => {
     try {
       const res = await adminCenterApiService.getCountries();
       if (res.done) {
@@ -24,85 +23,61 @@ const Configuration: React.FC = React.memo(() => {
     } catch (error) {
       logger.error('Error fetching countries:', error);
     }
-  }, []);
+  };
 
-  const fetchConfiguration = useCallback(async () => {
+  const fetchConfiguration = async () => {
     const res = await adminCenterApiService.getBillingConfiguration();
     if (res.done) {
       setConfiguration(res.body);
       form.setFieldsValue(res.body);
     }
-  }, [form]);
+  };
 
   useEffect(() => {
     fetchCountries();
     fetchConfiguration();
-  }, [fetchCountries, fetchConfiguration]);
-
-  const handleSave = useCallback(
-    async (values: any) => {
-      try {
-        setLoading(true);
-        const res = await adminCenterApiService.updateBillingConfiguration(values);
-        if (res.done) {
-          fetchConfiguration();
-        }
-      } catch (error) {
-        logger.error('Error updating configuration:', error);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [fetchConfiguration]
-  );
-
-  const countryOptions = useMemo(
-    () =>
-      countries.map(country => ({
-        label: country.name,
-        value: country.id,
-      })),
-    [countries]
-  );
-
-  const titleStyle = useMemo(
-    () => ({
-      color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
-      fontWeight: 500,
-      fontSize: '16px',
-      display: 'flex',
-      gap: '4px',
-    }),
-    [themeMode]
-  );
-
-  const dividerTitleStyle = useMemo(
-    () => ({
-      color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
-      fontWeight: 600,
-      fontSize: '16px',
-      display: 'flex',
-      gap: '4px',
-    }),
-    [themeMode]
-  );
-
-  const cardStyle = useMemo(() => ({ marginTop: '16px' }), []);
-  const colStyle = useMemo(() => ({ padding: '0 12px', height: '86px' }), []);
-  const dividerStyle = useMemo(() => ({ margin: '16px 0' }), []);
-  const buttonColStyle = useMemo(() => ({ paddingLeft: '12px' }), []);
-
-  const handlePhoneInput = useCallback((e: React.FormEvent<HTMLInputElement>) => {
-    const input = e.target as HTMLInputElement;
-    input.value = input.value.replace(/[^0-9]/g, '');
   }, []);
 
+  const handleSave = async (values: any) => {
+    try {
+      setLoading(true);
+      const res = await adminCenterApiService.updateBillingConfiguration(values);
+      if (res.done) {
+        fetchConfiguration();
+      }
+    } catch (error) {
+      logger.error('Error updating configuration:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const countryOptions = countries.map(country => ({
+    label: country.name,
+    value: country.id,
+  }));
+
   return (
     <div>
-      <Card title={<span style={titleStyle}>Billing Details</span>} style={cardStyle}>
+      <Card
+        title={
+          <span
+            style={{
+              color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
+              fontWeight: 500,
+              fontSize: '16px',
+              display: 'flex',
+              gap: '4px',
+            }}
+          >
+            Billing Details
+          </span>
+        }
+        style={{ marginTop: '16px' }}
+      >
         <Form form={form} initialValues={configuration} onFinish={handleSave}>
-          <Row gutter={[0, 0]}>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
+          <Row>
+            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
               <Form.Item
                 name="name"
                 label="Name"
@@ -113,10 +88,10 @@ const Configuration: React.FC = React.memo(() => {
                   },
                 ]}
               >
-                <Input placeholder="Name" disabled />
+                <Input placeholder="Name" />
               </Form.Item>
             </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
+            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
               <Form.Item
                 name="email"
                 label="Email Address"
@@ -127,10 +102,10 @@ const Configuration: React.FC = React.memo(() => {
                   },
                 ]}
               >
-                <Input placeholder="Email Address" disabled />
+                <Input placeholder="Name" disabled />
               </Form.Item>
             </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
+            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
               <Form.Item
                 name="phone"
                 label="Contact Number"
@@ -142,34 +117,58 @@ const Configuration: React.FC = React.memo(() => {
                   },
                 ]}
               >
-                <Input placeholder="Phone Number" maxLength={10} onInput={handlePhoneInput} />
+                <Input
+                  placeholder="Phone Number"
+                  maxLength={10}
+                  onInput={e => {
+                    const input = e.target as HTMLInputElement; // Type assertion to access 'value'
+                    input.value = input.value.replace(/[^0-9]/g, ''); // Restrict non-numeric input
+                  }}
+                />
               </Form.Item>
             </Col>
           </Row>
 
-          <Divider orientation="left" style={{ ...dividerStyle, fontSize: '14px' }}>
-            <span style={dividerTitleStyle}>Company Details</span>
+          <Divider orientation="left" style={{ margin: '16px 0' }}>
+            <span
+              style={{
+                color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
+                fontWeight: 600,
+                fontSize: '16px',
+                display: 'flex',
+                gap: '4px',
+              }}
+            >
+              Company Details
+            </span>
           </Divider>
 
-          <Row gutter={[0, 0]}>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
+          <Row>
+            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
               <Form.Item name="company_name" label="Company Name" layout="vertical">
                 <Input placeholder="Company Name" />
               </Form.Item>
             </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
+            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
               <Form.Item name="address_line_1" label="Address Line 01" layout="vertical">
                 <Input placeholder="Address Line 01" />
               </Form.Item>
             </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
+            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
               <Form.Item name="address_line_2" label="Address Line 02" layout="vertical">
                 <Input placeholder="Address Line 02" />
               </Form.Item>
             </Col>
           </Row>
-          <Row gutter={[0, 0]}>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
+          <Row>
+            <Col
+              span={8}
+              style={{
+                padding: '0 12px',
+                height: '86px',
+                scrollbarColor: 'red',
+              }}
+            >
               <Form.Item name="country" label="Country" layout="vertical">
                 <Select
                   dropdownStyle={{ maxHeight: 256, overflow: 'auto' }}
@@ -182,28 +181,28 @@ const Configuration: React.FC = React.memo(() => {
                 />
               </Form.Item>
             </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
+            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
               <Form.Item name="city" label="City" layout="vertical">
                 <Input placeholder="City" />
               </Form.Item>
             </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
+            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
               <Form.Item name="state" label="State" layout="vertical">
                 <Input placeholder="State" />
               </Form.Item>
             </Col>
           </Row>
-          <Row gutter={[0, 0]}>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
+          <Row>
+            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
               <Form.Item name="postal_code" label="Postal Code" layout="vertical">
                 <Input placeholder="Postal Code" />
               </Form.Item>
             </Col>
           </Row>
           <Row>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={{ ...buttonColStyle, marginTop: 8 }}>
+            <Col style={{ paddingLeft: '12px' }}>
               <Form.Item>
-                <Button type="primary" htmlType="submit" loading={loading} block>
+                <Button type="primary" htmlType="submit">
                   Save
                 </Button>
               </Form.Item>
@@ -213,8 +212,6 @@ const Configuration: React.FC = React.memo(() => {
       </Card>
     </div>
   );
-});
-
-Configuration.displayName = 'Configuration';
+};
 
 export default Configuration;

worklenz-frontend/src/components/admin-center/overview/organization-admins-table/organization-admins-table.tsx

@@ -1,4 +1,4 @@
-import { Table, TableProps, Typography } from '@/shared/antd-imports';
+import { Table, TableProps, Typography } from 'antd';
 import React, { useMemo } from 'react';
 import { IOrganizationAdmin } from '@/types/admin-center/admin-center.types';
 

worklenz-frontend/src/components/admin-center/overview/organization-name/organization-name.tsx

@@ -1,8 +1,9 @@
 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
 import logger from '@/utils/errorLogger';
-import { EnterOutlined, EditOutlined } from '@/shared/antd-imports';
-import { Card, Button, Tooltip, Typography } from '@/shared/antd-imports';
+import { EnterOutlined, EditOutlined } from '@ant-design/icons';
+import { Card, Button, Tooltip, Typography } from 'antd';
 import TextArea from 'antd/es/input/TextArea';
+import Paragraph from 'antd/es/typography/Paragraph';
 import { TFunction } from 'i18next';
 import { useState, useEffect } from 'react';
 

worklenz-frontend/src/components/admin-center/overview/organization-owner/organization-owner.tsx

@@ -1,8 +1,8 @@
 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
 import { IOrganization } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
-import { MailOutlined, PhoneOutlined, EditOutlined } from '@/shared/antd-imports';
-import { Card, Tooltip, Input, Button, Typography, InputRef } from '@/shared/antd-imports';
+import { MailOutlined, PhoneOutlined, EditOutlined } from '@ant-design/icons';
+import { Card, Tooltip, Input, Button, Typography, InputRef } from 'antd';
 import { TFunction } from 'i18next';
 import { useEffect, useRef, useState } from 'react';
 

worklenz-frontend/src/components/admin-center/teams/add-team-drawer/add-team-drawer.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Button, Drawer, Form, Input, InputRef, Typography } from '@/shared/antd-imports';
+import { Button, Drawer, Form, Input, InputRef, Typography } from 'antd';
 import { fetchTeams } from '@features/teams/teamSlice';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/admin-center/teams/settings-drawer/settings-drawer.tsx

@@ -11,7 +11,7 @@ import {
   TableProps,
   Typography,
   Tooltip,
-} from '@/shared/antd-imports';
+} from 'antd';
 import React, { useState } from 'react';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import './settings-drawer.css';

worklenz-frontend/src/components/admin-center/teams/teams-table/teams-table.tsx

@@ -5,8 +5,8 @@ import { toggleSettingDrawer, deleteTeam, fetchTeams } from '@/features/teams/te
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { IOrganizationTeam } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
-import { SettingOutlined, DeleteOutlined } from '@/shared/antd-imports';
-import { Badge, Button, Card, Popconfirm, Table, TableProps, Tooltip, Typography } from '@/shared/antd-imports';
+import { SettingOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Badge, Button, Card, Popconfirm, Table, TableProps, Tooltip, Typography } from 'antd';
 import { TFunction } from 'i18next';
 import { useState } from 'react';
 import { useMediaQuery } from 'react-responsive';

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/avatars/avatars.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Tooltip } from '@/shared/antd-imports';
+import { Avatar, Tooltip } from 'antd';
 import React, { useCallback, useMemo } from 'react';
 import { InlineMember } from '@/types/teamMembers/inlineMember.types';
 

worklenz-frontend/src/components/board/board-assignee-selector/board-assignee-selector.tsx

@@ -15,7 +15,7 @@ import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { toggleProjectMemberDrawer } from '../../../features/projects/singleProject/members/projectMembersSlice';
 import { colors } from '../../../styles/colors';
-import { PlusOutlined, UsergroupAddOutlined } from '@/shared/antd-imports';
+import { PlusOutlined, UsergroupAddOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import SingleAvatar from '@/components/common/single-avatar/single-avatar';
 import { CheckboxChangeEvent } from 'antd/es/checkbox';

worklenz-frontend/src/components/board/changeCategoryDropdown/ChangeCategoryDropdown.tsx

@@ -1,9 +1,9 @@
-import { Badge, Card, Dropdown, Flex, Menu, MenuProps } from '@/shared/antd-imports';
+import { Badge, Card, Dropdown, Flex, Menu, MenuProps } from 'antd';
 import React from 'react';
 import { TaskStatusType } from '../../../types/task.types';
 import { colors } from '../../../styles/colors';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { RetweetOutlined, RightOutlined } from '@/shared/antd-imports';
+import { RetweetOutlined, RightOutlined } from '@ant-design/icons';
 import './ChangeCategoryDropdown.css';
 import { updateStatusCategory } from '../../../features/projects/status/StatusSlice';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/board/common-members-section/common-members-section.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from '@/shared/antd-imports';
+import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from 'antd';
 import {
   DeleteOutlined,
   EditOutlined,
   LoadingOutlined,
   MoreOutlined,
   PlusOutlined,
-} from '@/shared/antd-imports';
+} from '@ant-design/icons';
 import { setTaskCardDisabled, initializeStatus } from '../../../features/board/create-card.slice';
 import { TaskType } from '../../../types/task.types';
 import TaskCreateCard from '../taskCreateCard/TaskCreateCard';

worklenz-frontend/src/components/board/common-phase-section/common-phase-section.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from '@/shared/antd-imports';
+import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from 'antd';
 import {
   DeleteOutlined,
   EditOutlined,
   LoadingOutlined,
   MoreOutlined,
   PlusOutlined,
-} from '@/shared/antd-imports';
+} from '@ant-design/icons';
 import { setTaskCardDisabled, initializeStatus } from '../../../features/board/create-card.slice';
 import { TaskType } from '../../../types/task.types';
 import TaskCreateCard from '../taskCreateCard/TaskCreateCard';

worklenz-frontend/src/components/board/common-priority-section/common-priority-section.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from '@/shared/antd-imports';
+import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from 'antd';
 import {
   DeleteOutlined,
   EditOutlined,
   LoadingOutlined,
   MoreOutlined,
   PlusOutlined,
-} from '@/shared/antd-imports';
+} from '@ant-design/icons';
 import { setTaskCardDisabled, initializeStatus } from '../../../features/board/create-card.slice';
 import { TaskType } from '../../../types/task.types';
 import TaskCreateCard from '../taskCreateCard/TaskCreateCard';

worklenz-frontend/src/components/board/commonStatusSection/CommonStatusSection.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from '@/shared/antd-imports';
+import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from 'antd';
 import {
   DeleteOutlined,
   EditOutlined,
   LoadingOutlined,
   MoreOutlined,
   PlusOutlined,
-} from '@/shared/antd-imports';
+} from '@ant-design/icons';
 import { setTaskCardDisabled, initializeStatus } from '../../../features/board/create-card.slice';
 import { TaskType } from '../../../types/task.types';
 import TaskCreateCard from '../taskCreateCard/TaskCreateCard';

worklenz-frontend/src/components/board/custom-avatar-group.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex } from '@/shared/antd-imports';
+import { Button, Flex } from 'antd';
 import AddMembersDropdown from '@/components/add-members-dropdown/add-members-dropdown';
 import Avatars from '../avatars/avatars';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';

worklenz-frontend/src/components/board/custom-due-date-picker.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
-import { DatePicker, Button, Flex } from '@/shared/antd-imports';
-import { CalendarOutlined } from '@/shared/antd-imports';
+import { DatePicker, Button, Flex } from 'antd';
+import { CalendarOutlined } from '@ant-design/icons';
 import dayjs, { Dayjs } from 'dayjs';
 import { useSocket } from '@/socket/socketContext';
 import { SocketEvents } from '@/shared/socket-events';

worklenz-frontend/src/components/board/kanban-group/kanban-group.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from '@/shared/antd-imports';
+import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from 'antd';
 import {
   DeleteOutlined,
   EditOutlined,
   LoadingOutlined,
   MoreOutlined,
   PlusOutlined,
-} from '@/shared/antd-imports';
+} from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useDroppable } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';

worklenz-frontend/src/components/board/subTaskCard/SubTaskCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Avatar, Col, DatePicker, Divider, Flex, Row, Tooltip, Typography } from '@/shared/antd-imports';
+import { Avatar, Col, DatePicker, Divider, Flex, Row, Tooltip, Typography } from 'antd';
 import StatusDropdown from '../../taskListCommon/statusDropdown/StatusDropdown';
 import dayjs, { Dayjs } from 'dayjs';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/board/taskCard/TaskCard.tsx

@@ -9,7 +9,7 @@ import {
   Dropdown,
   MenuProps,
   Button,
-} from '@/shared/antd-imports';
+} from 'antd';
 import {
   DoubleRightOutlined,
   PauseOutlined,
@@ -20,7 +20,7 @@ import {
   ForkOutlined,
   CaretRightFilled,
   CaretDownFilled,
-} from '@/shared/antd-imports';
+} from '@ant-design/icons';
 import './TaskCard.css';
 import dayjs, { Dayjs } from 'dayjs';
 import AddMembersDropdown from '../../add-members-dropdown/add-members-dropdown';

worklenz-frontend/src/components/board/taskCard/priority-section/priority-section.tsx

@@ -1,10 +1,10 @@
-import { Flex, Typography } from '@/shared/antd-imports';
+import { Flex, Typography } from 'antd';
 import './priority-section.css';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useState, useEffect, useMemo } from 'react';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { ITaskPriority } from '@/types/tasks/taskPriority.types';
-import { DoubleLeftOutlined, MinusOutlined, PauseOutlined } from '@/shared/antd-imports';
+import { DoubleLeftOutlined, MinusOutlined, PauseOutlined } from '@ant-design/icons';
 
 type PrioritySectionProps = {
   task: IProjectTask;

worklenz-frontend/src/components/board/taskCreateCard/TaskCreateCard.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Button, DatePicker, Input, InputRef } from '@/shared/antd-imports';
+import { Avatar, Button, DatePicker, Input, InputRef } from 'antd';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import AddMembersDropdown from '../../add-members-dropdown/add-members-dropdown';
 import dayjs, { Dayjs } from 'dayjs';

worklenz-frontend/src/components/board/taskCreateCard/priority-task-create-card.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Button, DatePicker, Input, InputRef } from '@/shared/antd-imports';
+import { Avatar, Button, DatePicker, Input, InputRef } from 'antd';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import AddMembersDropdown from '../../add-members-dropdown/add-members-dropdown';
 import dayjs, { Dayjs } from 'dayjs';

worklenz-frontend/src/components/calendars/homeCalendar/HomeCalendar.tsx

@@ -1,4 +1,4 @@
-import { Calendar } from '@/shared/antd-imports';
+import { Calendar } from 'antd';
 import React, { useEffect } from 'react';
 import type { Dayjs } from 'dayjs';
 import { useAppDispatch } from '@/hooks/useAppDispatch';

worklenz-frontend/src/components/charts/LazyChartComponents.tsx

@@ -1,5 +1,5 @@
 import { lazy, Suspense } from 'react';
-import { Spin } from '@/shared/antd-imports';
+import { Spin } from 'antd';
 
 // Lazy load Chart.js components
 const LazyBarChart = lazy(() => 

worklenz-frontend/src/components/charts/chart-loader.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import { Spin } from '@/shared/antd-imports';
+import { Spin } from 'antd';
 
 // Lazy load chart components to reduce initial bundle size
 const LazyBar = React.lazy(() =>

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

@@ -1,4 +1,4 @@
-import { AutoComplete, Button, Drawer, Flex, Form, message, Select, Spin, Typography } from '@/shared/antd-imports';
+import { AutoComplete, Button, Drawer, Flex, Form, message, Select, Spin, Typography } from 'antd';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import {

worklenz-frontend/src/components/common/people-dropdown/PeopleDropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { PlusOutlined, UserAddOutlined } from '@/shared/antd-imports';
+import { PlusOutlined, UserAddOutlined } from '@ant-design/icons';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';

worklenz-frontend/src/components/common/project-status-icon/project-status-icon.tsx

@@ -4,7 +4,7 @@ import Icon, {
   ClockCircleOutlined,
   CloseCircleOutlined,
   StopOutlined,
-} from '@/shared/antd-imports';
+} from '@ant-design/icons';
 
 const iconMap = {
   'clock-circle': ClockCircleOutlined,

worklenz-frontend/src/components/common/single-avatar/single-avatar.tsx

@@ -1,5 +1,5 @@
 import { AvatarNamesMap } from '@/shared/constants';
-import { Avatar, Flex, Space } from '@/shared/antd-imports';
+import { Avatar, Flex, Space } from 'antd';
 
 interface SingleAvatarProps {
   avatarUrl?: string;

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

@@ -1,4 +1,4 @@
-import type { MenuProps } from '@/shared/antd-imports';
+import type { MenuProps } from 'antd';
 import {
   Empty,
   List,
@@ -10,7 +10,8 @@ import {
   Image,
   Input,
   Flex,
-} from '@/shared/antd-imports';
+  Button,
+} from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
@@ -22,7 +23,7 @@ import {
   IWorklenzTemplate,
 } from '@/types/project-templates/project-templates.types';
 import './template-drawer.css';
-import { SearchOutlined } from '@/shared/antd-imports';
+import { SearchOutlined } from '@ant-design/icons';
 import logger from '@/utils/errorLogger';
 
 const { Title, Text } = Typography;

worklenz-frontend/src/components/common/tooltip-wrapper/tooltip-wrapper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip, TooltipProps } from '@/shared/antd-imports';
+import { Tooltip, TooltipProps } from 'antd';
 
 interface TooltipWrapperProps extends Omit<TooltipProps, 'children'> {
   children: React.ReactElement;

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Card, Spin, Empty } from '@/shared/antd-imports';
+import { Card, Spin, Empty } from 'antd';
 import {
   DndContext,
   DragOverlay,

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanCreateSection.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef, useEffect, useMemo } from 'react';
-import { Button, Flex } from '@/shared/antd-imports';
-import { PlusOutlined } from '@/shared/antd-imports';
+import { Button, Flex } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { nanoid } from '@reduxjs/toolkit';
-import { DownOutlined } from '@/shared/antd-imports';
+import { DownOutlined } from '@ant-design/icons';
 
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { themeWiseColor } from '@/utils/themeWiseColor';

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanCreateSubtaskCard.tsx

@@ -1,4 +1,4 @@
-import { Flex, Input, InputRef } from '@/shared/antd-imports';
+import { Flex, Input, InputRef } from 'antd';
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanCreateTaskCard.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { Button, Flex, Input, InputRef } from '@/shared/antd-imports';
+import { Button, Flex, Input, InputRef } from 'antd';
 import { useTranslation } from 'react-i18next';
 import { nanoid } from '@reduxjs/toolkit';
 import { useAppDispatch } from '@/hooks/useAppDispatch';

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanGroup.tsx

@@ -12,7 +12,7 @@ import EnhancedKanbanTaskCard from './EnhancedKanbanTaskCard';
 import VirtualizedTaskList from './VirtualizedTaskList';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import './EnhancedKanbanGroup.css';
-import { Badge, Flex, InputRef, MenuProps, Popconfirm } from '@/shared/antd-imports';
+import { Badge, Flex, InputRef, MenuProps, Popconfirm } from 'antd';
 import { themeWiseColor } from '@/utils/themeWiseColor';
 import useIsProjectManager from '@/hooks/useIsProjectManager';
 import { useAuthService } from '@/hooks/useAuth';
@@ -25,11 +25,11 @@ import {
   MoreOutlined,
 } from '@ant-design/icons/lib/icons';
 import { colors } from '@/styles/colors';
-import { Input } from '@/shared/antd-imports';
-import { Tooltip } from '@/shared/antd-imports';
-import { Typography } from '@/shared/antd-imports';
-import { Dropdown } from '@/shared/antd-imports';
-import { Button } from '@/shared/antd-imports';
+import { Input } from 'antd';
+import { Tooltip } from 'antd';
+import { Typography } from 'antd';
+import { Dropdown } from 'antd';
+import { Button } from 'antd';
 import { PlusOutlined } from '@ant-design/icons/lib/icons';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.tsx

@@ -15,18 +15,18 @@ import PrioritySection from '../board/taskCard/priority-section/priority-section
 import Typography from 'antd/es/typography';
 import CustomDueDatePicker from '../board/custom-due-date-picker';
 import { themeWiseColor } from '@/utils/themeWiseColor';
-import { ForkOutlined } from '@/shared/antd-imports';
+import { ForkOutlined } from '@ant-design/icons';
 import { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
-import { CaretDownFilled, CaretRightFilled } from '@/shared/antd-imports';
+import { CaretDownFilled, CaretRightFilled } from '@ant-design/icons';
 import {
   fetchBoardSubTasks,
   toggleTaskExpansion,
 } from '@/features/enhanced-kanban/enhanced-kanban.slice';
-import { Divider } from '@/shared/antd-imports';
-import { List } from '@/shared/antd-imports';
-import { Skeleton } from '@/shared/antd-imports';
-import { PlusOutlined } from '@/shared/antd-imports';
+import { Divider } from 'antd';
+import { List } from 'antd';
+import { Skeleton } from 'antd';
+import { PlusOutlined } from '@ant-design/icons';
 import BoardSubTaskCard from '@/pages/projects/projectView/board/board-section/board-sub-task-card/board-sub-task-card';
 import BoardCreateSubtaskCard from '@/pages/projects/projectView/board/board-section/board-sub-task-card/board-create-sub-task-card';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/home-tasks/statusDropdown/home-tasks-status-dropdown.tsx

@@ -1,4 +1,4 @@
-import { Badge, Flex, Select } from '@/shared/antd-imports';
+import { Badge, Flex, Select } from 'antd';
 import './home-tasks-status-dropdown.css';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/home-tasks/taskDatePicker/home-tasks-date-picker.tsx

@@ -1,6 +1,6 @@
 import { useSocket } from '@/socket/socketContext';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
-import { DatePicker } from '@/shared/antd-imports';
+import { DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import calendar from 'dayjs/plugin/calendar';
 import { SocketEvents } from '@/shared/socket-events';

worklenz-frontend/src/components/kanban-board-management-v2/kanbanGroup.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { useDroppable } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { Button, Typography } from '@/shared/antd-imports';
-import { PlusOutlined, MenuOutlined } from '@/shared/antd-imports';
+import { Button, Typography } from 'antd';
+import { PlusOutlined, MenuOutlined } from '@ant-design/icons';
 import { ITaskListGroup } from '@/types/tasks/taskList.types';
 import { IGroupBy } from '@/features/tasks/tasks.slice';
 import KanbanTaskCard from './kanbanTaskCard';

worklenz-frontend/src/components/kanban-board-management-v2/kanbanTaskCard.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Avatar, Tag, Progress, Typography, Button, Tooltip, Space } from '@/shared/antd-imports';
+import { Avatar, Tag, Progress, Typography, Button, Tooltip, Space } from 'antd';
 import {
   HolderOutlined,
   MessageOutlined,
   PaperClipOutlined,
   ClockCircleOutlined,
-} from '@/shared/antd-imports';
+} from '@ant-design/icons';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { IGroupBy } from '@/features/tasks/tasks.slice';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/kanban-board-management-v2/kanbanTaskListBoard.tsx

@@ -17,13 +17,18 @@ import {
   SortableContext,
   sortableKeyboardCoordinates,
 } from '@dnd-kit/sortable';
-import { Card, Spin, Empty } from '@/shared/antd-imports';
+import { Card, Spin, Empty, Flex } from 'antd';
 import { RootState } from '@/app/store';
-import { fetchTaskGroups, reorderTasks } from '@/features/tasks/tasks.slice';
+import { IGroupBy, setGroup, fetchTaskGroups, reorderTasks } from '@/features/tasks/tasks.slice';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { AppDispatch } from '@/app/store';
-import { useAuthService } from '@/hooks/useAuth'; 
+import BoardSectionCard from '@/pages/projects/projectView/board/board-section/board-section-card/board-section-card';
+import BoardCreateSectionCard from '@/pages/projects/projectView/board/board-section/board-section-card/board-create-section-card';
+import { useAuthService } from '@/hooks/useAuth';
 import useIsProjectManager from '@/hooks/useIsProjectManager';
+import BoardViewTaskCard from '@/pages/projects/projectView/board/board-section/board-task-card/board-view-task-card';
+import TaskGroup from '../task-management/TaskGroup';
+import TaskRow from '../task-management/TaskRow';
 import KanbanGroup from './kanbanGroup';
 import KanbanTaskCard from './kanbanTaskCard';
 import SortableKanbanGroup from './SortableKanbanGroup';

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

@@ -1,4 +1,4 @@
-import { Drawer, Empty, Segmented, Typography, Spin, Button, Flex } from '@/shared/antd-imports';
+import { Drawer, Empty, Segmented, Typography, Spin, Button, Flex } from 'antd';
 import { useEffect, useState } from 'react';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';

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

@@ -1,5 +1,5 @@
-import { BellOutlined } from '@/shared/antd-imports';
-import { Badge, Button, Tooltip } from '@/shared/antd-imports';
+import { BellOutlined } from '@ant-design/icons';
+import { Badge, Button, Tooltip } from 'antd';
 import { toggleDrawer } from '@features/navbar/notificationSlice';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useTranslation } from 'react-i18next';

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

@@ -1,6 +1,6 @@
 import { IWorklenzNotification } from '@/types/notifications/notifications.types';
-import { BankOutlined } from '@/shared/antd-imports';
-import { Button, Tag, Typography, theme } from '@/shared/antd-imports';
+import { BankOutlined } from '@ant-design/icons';
+import { Button, Tag, Typography, theme } from 'antd';
 import DOMPurify from 'dompurify';
 import React, { useState } from 'react';
 import { fromNow } from '@/utils/dateUtils';

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

@@ -1,5 +1,5 @@
-import { Button, Typography, Tag } from '@/shared/antd-imports';
-import { BankOutlined } from '@/shared/antd-imports';
+import { Button, Typography, Tag } from 'antd';
+import { BankOutlined } from '@ant-design/icons';
 import { IWorklenzNotification } from '@/types/notifications/notifications.types';
 import { useNavigate } from 'react-router-dom';
 import { useAppDispatch } from '@/hooks/useAppDispatch';

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

@@ -1,8 +1,8 @@
-import { notification } from '@/shared/antd-imports';
+import { notification } from 'antd';
 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 { BankOutlined } from '@ant-design/icons';
 import './push-notification-template.css';
 
 const PushNotificationTemplate = ({