diff --git a/package-lock.json b/package-lock.json
index b9ad104..795287a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,8 @@
         "eslint-plugin-regexp": "2.7.0",
         "file-saver": "^2.0.5",
         "gridstack": "^12.2.1",
+        "highcharts": "^12.3.0",
+        "highcharts-vue": "^2.0.1",
         "jspdf": "^3.0.1",
         "jspdf-autotable": "^5.0.2",
         "jwt-decode": "4.0.0",
@@ -9065,6 +9067,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/highcharts": {
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-12.3.0.tgz",
+      "integrity": "sha512-QIKmaemgheRa1K2Ia9MLj1KLtBU1Tu/VQ6KAMqtMBMsAC4NzcFq6g96LF03ZO3IFFiSifmZx8ItEyRcz4w75cg==",
+      "license": "https://www.highcharts.com/license"
+    },
+    "node_modules/highcharts-vue": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/highcharts-vue/-/highcharts-vue-2.0.1.tgz",
+      "integrity": "sha512-7yVaKvsWlx7OgmKFXE2D99fi/0tr2A85H4KUz3jL7CRQhAwvEvXgtDIyTBGLHJsOC5L9VlppAI7k6KfIi0j0hg==",
+      "license": "SEE LICENSE IN LICENSE",
+      "peerDependencies": {
+        "highcharts": ">=5.0.0",
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
diff --git a/package.json b/package.json
index 82509df..a976166 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,8 @@
     "eslint-plugin-regexp": "2.7.0",
     "file-saver": "^2.0.5",
     "gridstack": "^12.2.1",
+    "highcharts": "^12.3.0",
+    "highcharts-vue": "^2.0.1",
     "jspdf": "^3.0.1",
     "jspdf-autotable": "^5.0.2",
     "jwt-decode": "4.0.0",
diff --git a/resources/js/pages/dashboards/crm.vue b/resources/js/pages/dashboards/crm.vue
index 5d6b808..21220ef 100644
--- a/resources/js/pages/dashboards/crm.vue
+++ b/resources/js/pages/dashboards/crm.vue
@@ -102,7 +102,6 @@ const cardOrder = ref([
   "leads2",
   "leads3",
   "project-activity",
-  "gantt-chart", // اضافه کردن gantt chart
   "analysis1",
   "analysis2",
   "cost-overview",
@@ -120,7 +119,6 @@ const defaultWidgetIds = [
   "leads2",
   "leads3",
   "project-activity",
-  "gantt-chart", // اضافه کردن
   "analysis1",
   "analysis2",
   "cost-overview",
@@ -147,7 +145,6 @@ const cardSizes = ref({
   "project-status": { cols: 4, height: 33.33 },
   "active-project": { cols: 4, height: 33.33 },
   "recent-transactions": { cols: 6, height: 33.33 },
-  "gantt-chart": { cols: 12, height: 50 },
   "activity-timeline": { cols: 6, height: 33.33 },
   "ecommerce-congratulations": { cols: 6, height: 33.33 },
   "ecommerce-earning-reports": { cols: 8, height: 33.33 },
@@ -186,7 +183,6 @@ const cardComponents = {
   "project-status": { component: CrmProjectStatus, props: {} },
   "active-project": { component: CrmActiveProject, props: {} },
   "recent-transactions": { component: CrmRecentTransactions, props: {} },
-  "gantt-chart": { component: GanttChart, props: {} },
   "activity-timeline": { component: CrmActivityTimeline, props: {} },
   "ecommerce-congratulations": { component: EcommerceCongratulationsJohn, props: {} },
   "ecommerce-earning-reports": { component: EcommerceEarningReports, props: {} },
diff --git a/resources/js/pages/dashboards/demo.vue b/resources/js/pages/dashboards/demo.vue
index 0bd49da..6ffe279 100644
--- a/resources/js/pages/dashboards/demo.vue
+++ b/resources/js/pages/dashboards/demo.vue
@@ -2,96 +2,78 @@
 import { onMounted, nextTick } from 'vue'
 import { GridStack } from 'gridstack'
 
-import EcommerceCongratulationsJohn from '@/views/dashboards/ecommerce/EcommerceCongratulationsJohn.vue'
-import EcommerceEarningReports from '@/views/dashboards/ecommerce/EcommerceEarningReports.vue'
-import EcommerceExpensesRadialBarCharts from '@/views/dashboards/ecommerce/EcommerceExpensesRadialBarCharts.vue'
-import EcommerceGeneratedLeads from '@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue'
-import EcommerceInvoiceTable from '@/views/dashboards/ecommerce/EcommerceInvoiceTable.vue'
-import EcommerceOrder from '@/views/dashboards/ecommerce/EcommerceOrder.vue'
-import EcommercePopularProducts from '@/views/dashboards/ecommerce/EcommercePopularProducts.vue'
-import EcommerceRevenueReport from '@/views/dashboards/ecommerce/EcommerceRevenueReport.vue'
-import EcommerceStatistics from '@/views/dashboards/ecommerce/EcommerceStatistics.vue'
-import EcommerceTotalProfitLineCharts from '@/views/dashboards/ecommerce/EcommerceTotalProfitLineCharts.vue'
-import EcommerceTransactions from '@/views/dashboards/ecommerce/EcommerceTransactions.vue'
+import ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
+import AnalysisCard from "@/components/AnalysisCard.vue";
+import CostOverview from "@/components/CostOverview.vue";
+import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
+import GanttChart from './gantt.vue'
 
 onMounted(async () => {
   const grid = GridStack.init({
     column: 12,
-    cellHeight: 50,
+    cellHeight: '110',
     float: true,
     draggable: { handle: '.grid-stack-item-content' },
-    resizable: true
+    resizable: true,
+    maxRow: 20,
   })
 
   await nextTick()
 })
 </script>
+
 <template>
   <div class="grid-stack">
-    <div class="grid-stack-item" gs-w="8" gs-h="4" gs-max-h="4" gs-x="0" gs-y="0">
+    <div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
       <div class="grid-stack-item-content">
-        <EcommerceCongratulationsJohn />
+        <GeneratedLeadsCard :progress="32" />
       </div>
     </div>
-
-    <div class="grid-stack-item" gs-w="4" gs-h="4" gs-max-h="4" gs-x="8" gs-y="0">
+    <div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
       <div class="grid-stack-item-content">
-        <EcommerceStatistics />
+        <GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
       </div>
     </div>
-
-    <div class="grid-stack-item" gs-w="7" gs-h="3" gs-max-h="3" gs-x="0" gs-y="4">
+    <div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
       <div class="grid-stack-item-content">
-        <EcommerceTotalProfitLineCharts />
+        <GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
       </div>
     </div>
-
-    <div class="grid-stack-item" gs-w="5" gs-h="3" gs-max-h="3" gs-x="7" gs-y="4">
+    <div class="grid-stack-item" gs-w="8" gs-h="7" gs-max-h="7">
       <div class="grid-stack-item-content">
-        <EcommerceExpensesRadialBarCharts />
+        <ProjectActivityBarChart />
       </div>
     </div>
-
-    <div class="grid-stack-item" gs-w="3" gs-h="5" gs-max-h="5" gs-x="0" gs-y="7">
+    <div class="grid-stack-item" gs-w="4" gs-h="7" gs-max-h="7">
       <div class="grid-stack-item-content">
-        <EcommerceGeneratedLeads />
+        <AnalysisCard />
       </div>
     </div>
-
-    <div class="grid-stack-item" gs-w="6" gs-h="5" gs-max-h="5" gs-x="3" gs-y="7">
+    <div class="grid-stack-item" gs-w="12" gs-h="8" gs-max-h="8">
       <div class="grid-stack-item-content">
-        <EcommerceRevenueReport />
-      </div>
-    </div>
-
-    <div class="grid-stack-item" gs-w="3" gs-h="3" gs-max-h="3" gs-x="9" gs-y="7">
-      <div class="grid-stack-item-content">
-        <EcommerceOrder />
-      </div>
-    </div>
-
-    <div class="grid-stack-item" gs-w="4" gs-h="10" gs-max-h="10" gs-x="0" gs-y="12">
-      <div class="grid-stack-item-content">
-        <EcommerceEarningReports />
-      </div>
-    </div>
-
-    <div class="grid-stack-item" gs-w="4" gs-h="10" gs-max-h="10" gs-x="4" gs-y="12">
-      <div class="grid-stack-item-content">
-        <EcommercePopularProducts />
-      </div>
-    </div>
-
-    <div class="grid-stack-item" gs-w="4" gs-h="4" gs-max-h="4" gs-x="8" gs-y="12">
-      <div class="grid-stack-item-content">
-        <EcommerceTransactions />
-      </div>
-    </div>
-
-    <div class="grid-stack-item" gs-w="12" gs-h="6" gs-max-h="6" gs-x="0" gs-y="16">
-      <div class="grid-stack-item-content">
-        <EcommerceInvoiceTable />
+        <GanttChart />
       </div>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style>
+.grid-stack-item-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.grid-stack-item-content>* {
+  flex: 1;
+  margin-bottom: 3.2rem;
+}
+
+.grid-stack-item:has(GanttChart) {
+  height: 100vh !important;
+}
+
+.grid-stack-item:has(GanttChart) .grid-stack-item-content {
+  height: 100vh;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/pages/dashboards/gantt.vue b/resources/js/pages/dashboards/gantt.vue
index 4b48c37..619f8b7 100644
--- a/resources/js/pages/dashboards/gantt.vue
+++ b/resources/js/pages/dashboards/gantt.vue
@@ -1,539 +1,585 @@
-<script>
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { gantt } from 'dhtmlx-gantt'
 import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
 
-export default {
-  name: 'GanttChart',
-  data() {
-    return {
-      showDeleteModal: false,
-      showEditModal: false,
-      showAddModal: false,
-      currentTaskId: null,
-      currentTask: null,
-      taskForm: {
-        text: '',
-        start_date: '',
-        duration: 3,
-        progress: 0
-      },
-      tasks: {
-        data: [
-          {
-            id: 1,
-            text: "Office Itinerary",
-            start_date: "01-08-2025",
-            duration: 17,
-            progress: 0.95,
-            open: true
-          },
-          {
-            id: 11,
-            text: "Office facing",
-            start_date: "01-08-2025",
-            duration: 5,
-            parent: 1,
-            progress: 1
-          },
-          {
-            id: 111,
-            text: "Interior office",
-            start_date: "01-08-2025",
-            duration: 3,
-            parent: 11,
-            progress: 1
-          },
-          {
-            id: 112,
-            text: "Air conditioner check",
-            start_date: "05-08-2025",
-            duration: 2,
-            parent: 11,
-            progress: 1
-          },
-          {
-            id: 12,
-            text: "Furniture installation",
-            start_date: "08-08-2025",
-            duration: 2,
-            parent: 1,
-            progress: 1
-          },
-          {
-            id: 13,
-            text: "Employee relocation",
-            start_date: "10-08-2025",
-            duration: 8,
-            parent: 1,
-            progress: 0.67,
-            open: true
-          },
-          {
-            id: 131,
-            text: "Preparing workplaces",
-            start_date: "10-08-2025",
-            duration: 3,
-            parent: 13,
-            progress: 1
-          },
-          {
-            id: 132,
-            text: "Workplaces importation",
-            start_date: "13-08-2025",
-            duration: 3,
-            parent: 13,
-            progress: 1
-          },
-          {
-            id: 133,
-            text: "Workplaces exportation",
-            start_date: "16-08-2025",
-            duration: 2,
-            parent: 13,
-            progress: 0
-          },
-          {
-            id: 2,
-            text: "Product launch",
-            start_date: "01-08-2025",
-            duration: 18,
-            progress: 0.73,
-            open: true
-          },
-          {
-            id: 21,
-            text: "Perform initial testing",
-            start_date: "01-08-2025",
-            duration: 5,
-            parent: 2,
-            progress: 1
-          },
-          {
-            id: 22,
-            text: "Development",
-            start_date: "03-08-2025",
-            duration: 16,
-            parent: 2,
-            progress: 0.68,
-            open: true
-          },
-          {
-            id: 221,
-            text: "Develop System",
-            start_date: "03-08-2025",
-            duration: 5,
-            parent: 22,
-            progress: 1
-          },
-          {
-            id: 222,
-            text: "Beta Release",
-            start_date: "08-08-2025",
-            duration: 1,
-            parent: 22,
-            progress: 1
-          },
-          {
-            id: 223,
-            text: "Integrate System",
-            start_date: "09-08-2025",
-            duration: 4,
-            parent: 22,
-            progress: 1
-          },
-          {
-            id: 224,
-            text: "Test",
-            start_date: "13-08-2025",
-            duration: 3,
-            parent: 22,
-            progress: 0.67
-          },
-          {
-            id: 225,
-            text: "Marketing",
-            start_date: "16-08-2025",
-            duration: 3,
-            parent: 22,
-            progress: 0
-          },
-          {
-            id: 23,
-            text: "Analysis",
-            start_date: "01-08-2025",
-            duration: 4,
-            parent: 2,
-            progress: 1
-          },
-          {
-            id: 24,
-            text: "Design",
-            start_date: "06-08-2025",
-            duration: 6,
-            parent: 2,
-            progress: 0.75,
-            open: true
-          },
-          {
-            id: 241,
-            text: "Design database",
-            start_date: "06-08-2025",
-            duration: 4,
-            parent: 24,
-            progress: 1
-          },
-          {
-            id: 242,
-            text: "Software design",
-            start_date: "10-08-2025",
-            duration: 2,
-            parent: 24,
-            progress: 0.5
-          }
-        ],
-        links: [
-          { id: 1, source: 111, target: 112, type: "0" },
-          { id: 2, source: 112, target: 12, type: "0" },
-          { id: 3, source: 12, target: 13, type: "0" },
-          { id: 4, source: 131, target: 132, type: "0" },
-          { id: 5, source: 132, target: 133, type: "0" },
-          { id: 6, source: 221, target: 222, type: "0" },
-          { id: 7, source: 222, target: 223, type: "0" },
-          { id: 8, source: 223, target: 224, type: "0" },
-          { id: 9, source: 224, target: 225, type: "0" },
-          { id: 10, source: 23, target: 24, type: "0" },
-          { id: 11, source: 241, target: 242, type: "0" }
-        ]
+const props = defineProps({
+  initialTasks: {
+    type: Object,
+    default: () => ({
+      data: [],
+      links: []
+    })
+  },
+  config: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const ganttContainer = ref(null)
+const showDeleteModal = ref(false)
+const showEditModal = ref(false)
+const showAddModal = ref(false)
+const currentTaskId = ref(null)
+const currentTask = ref(null)
+const taskForm = ref({
+  text: '',
+  start_date: '',
+  duration: 3,
+  progress: 0
+})
+
+const tasks = props.initialTasks.data.length > 0 ? props.initialTasks : {
+  data: [
+    {
+      id: 1,
+      text: "Office Itinerary",
+      start_date: "01-08-2025",
+      duration: 17,
+      progress: 0.95,
+      open: true
+    },
+    {
+      id: 11,
+      text: "Office facing",
+      start_date: "01-08-2025",
+      duration: 5,
+      parent: 1,
+      progress: 1
+    },
+    {
+      id: 111,
+      text: "Interior office",
+      start_date: "01-08-2025",
+      duration: 3,
+      parent: 11,
+      progress: 1
+    },
+    {
+      id: 112,
+      text: "Air conditioner check",
+      start_date: "05-08-2025",
+      duration: 2,
+      parent: 11,
+      progress: 1
+    },
+    {
+      id: 12,
+      text: "Furniture installation",
+      start_date: "08-08-2025",
+      duration: 2,
+      parent: 1,
+      progress: 1
+    },
+    {
+      id: 13,
+      text: "Employee relocation",
+      start_date: "10-08-2025",
+      duration: 8,
+      parent: 1,
+      progress: 0.67,
+      open: true
+    },
+    {
+      id: 131,
+      text: "Preparing workplaces",
+      start_date: "10-08-2025",
+      duration: 3,
+      parent: 13,
+      progress: 1
+    },
+    {
+      id: 132,
+      text: "Workplaces importation",
+      start_date: "13-08-2025",
+      duration: 3,
+      parent: 13,
+      progress: 1
+    },
+    {
+      id: 133,
+      text: "Workplaces exportation",
+      start_date: "16-08-2025",
+      duration: 2,
+      parent: 13,
+      progress: 0
+    },
+    {
+      id: 2,
+      text: "Product launch",
+      start_date: "01-08-2025",
+      duration: 18,
+      progress: 0.73,
+      open: true
+    },
+    {
+      id: 21,
+      text: "Perform initial testing",
+      start_date: "01-08-2025",
+      duration: 5,
+      parent: 2,
+      progress: 1
+    },
+    {
+      id: 22,
+      text: "Development",
+      start_date: "03-08-2025",
+      duration: 16,
+      parent: 2,
+      progress: 0.68,
+      open: true
+    },
+    {
+      id: 221,
+      text: "Develop System",
+      start_date: "03-08-2025",
+      duration: 5,
+      parent: 22,
+      progress: 1
+    },
+    {
+      id: 222,
+      text: "Beta Release",
+      start_date: "08-08-2025",
+      duration: 1,
+      parent: 22,
+      progress: 1
+    },
+    {
+      id: 223,
+      text: "Integrate System",
+      start_date: "09-08-2025",
+      duration: 4,
+      parent: 22,
+      progress: 1
+    },
+    {
+      id: 224,
+      text: "Test",
+      start_date: "13-08-2025",
+      duration: 3,
+      parent: 22,
+      progress: 0.67
+    },
+    {
+      id: 225,
+      text: "Marketing",
+      start_date: "16-08-2025",
+      duration: 3,
+      parent: 22,
+      progress: 0
+    },
+    {
+      id: 23,
+      text: "Analysis",
+      start_date: "01-08-2025",
+      duration: 4,
+      parent: 2,
+      progress: 1
+    },
+    {
+      id: 24,
+      text: "Design",
+      start_date: "06-08-2025",
+      duration: 6,
+      parent: 2,
+      progress: 0.75,
+      open: true
+    },
+    {
+      id: 241,
+      text: "Design database",
+      start_date: "06-08-2025",
+      duration: 4,
+      parent: 24,
+      progress: 1
+    },
+    {
+      id: 242,
+      text: "Software design",
+      start_date: "10-08-2025",
+      duration: 2,
+      parent: 24,
+      progress: 0.5
+    }
+  ],
+  links: [
+    { id: 1, source: 111, target: 112, type: "0" },
+    { id: 2, source: 112, target: 12, type: "0" },
+    { id: 3, source: 12, target: 13, type: "0" },
+    { id: 4, source: 131, target: 132, type: "0" },
+    { id: 5, source: 132, target: 133, type: "0" },
+    { id: 6, source: 221, target: 222, type: "0" },
+    { id: 7, source: 222, target: 223, type: "0" },
+    { id: 8, source: 223, target: 224, type: "0" },
+    { id: 9, source: 224, target: 225, type: "0" },
+    { id: 10, source: 23, target: 24, type: "0" },
+    { id: 11, source: 241, target: 242, type: "0" }
+  ]
+}
+
+const initGantt = () => {
+  gantt.config.date_format = "%d-%m-%Y"
+  gantt.config.fit_tasks = true
+  gantt.config.start_date = null
+  gantt.config.end_date = null
+
+  gantt.config.columns = [
+    { name: "wbs", label: "WBS", width: 50, align: "center" },
+    { name: "text", label: "TASK NAME", width: 250, tree: true },
+    { name: "start_date", label: "START TIME", width: 100, align: "center" },
+    { name: "duration", label: "DURATION", width: 80, align: "center" }
+  ]
+
+  gantt.config.scale_unit = "day"
+  gantt.config.date_scale = "%d %M"
+  gantt.config.scale_height = 50
+  gantt.config.row_height = 40
+  gantt.config.bar_height = 24
+  gantt.config.grid_width = 450
+
+  gantt.config.subscales = [
+    { unit: "month", step: 1, date: "%M %Y" },
+    { unit: "day", step: 1, date: "%j" }
+  ]
+
+  gantt.config.drag_move = true
+  gantt.config.drag_resize = true
+  gantt.config.drag_progress = true
+  gantt.config.drag_links = true
+  gantt.config.details_on_create = true
+  gantt.config.details_on_dblclick = true
+
+  gantt.templates.task_class = function (start, end, task) {
+    if (task.progress === 1) return "completed-task"
+    if (task.progress >= 0.75) return "high-progress-task"
+    if (task.progress >= 0.25) return "medium-progress-task"
+    return "low-progress-task"
+  }
+
+  gantt.templates.grid_row_class = function (start, end, task) {
+    if (task.$level === 0) return "summary-row"
+    return ""
+  }
+
+  gantt.templates.rightside_text = function (start, end, task) {
+    if (task.progress === 1) {
+      return "<span class='completed-mark'>✓</span>"
+    }
+    return Math.round(task.progress * 100) + "%"
+  }
+
+  let taskCounter = 1
+  gantt.templates.grid_cell_value = function (item, column) {
+    if (column === "wbs") {
+      if (item.$level === 0) {
+        return taskCounter++
+      } else if (item.$level === 1) {
+        let parentIndex = gantt.getParent(item.id)
+        let parent = gantt.getTask(parentIndex)
+        let siblings = gantt.getChildren(parentIndex)
+        let childIndex = siblings.indexOf(item.id) + 1
+        return parent.$wbs + "." + childIndex
+      } else if (item.$level === 2) {
+        let parentIndex = gantt.getParent(item.id)
+        let parent = gantt.getTask(parentIndex)
+        let siblings = gantt.getChildren(parentIndex)
+        let childIndex = siblings.indexOf(item.id) + 1
+        return parent.$wbs + "." + childIndex
       }
     }
-  },
-  mounted() {
-    this.initGantt()
-  },
-  beforeUnmount() {
-    if (gantt.$container) {
-      gantt.clearAll()
+    return gantt.templates.grid_cell_value_default(item, column)
+  }
+
+  gantt.attachEvent("onTaskLoading", function (task) {
+    if (task.$level === 0) {
+      task.$wbs = taskCounter
+      taskCounter++
+    } else if (task.$level === 1) {
+      let parent = gantt.getTask(gantt.getParent(task.id))
+      let siblings = gantt.getChildren(gantt.getParent(task.id))
+      let index = siblings.indexOf(task.id) + 1
+      task.$wbs = parent.$wbs + "." + index
+    } else if (task.$level === 2) {
+      let parentId = gantt.getParent(task.id)
+      let parent = gantt.getTask(parentId)
+      let siblings = gantt.getChildren(parentId)
+      let index = siblings.indexOf(task.id) + 1
+      task.$wbs = parent.$wbs + "." + index
     }
-  },
-  methods: {
-    initGantt() {
-      gantt.config.date_format = "%d-%m-%Y"
-      gantt.config.fit_tasks = true
-      gantt.config.start_date = null
-      gantt.config.end_date = null
+    return true
+  })
 
-      gantt.config.columns = [
-        { name: "wbs", label: "WBS", width: 50, align: "center" },
-        { name: "text", label: "TASK NAME", width: 250, tree: true },
-        { name: "start_date", label: "START TIME", width: 100, align: "center" },
-        { name: "duration", label: "DURATION", width: 80, align: "center" }
-      ]
-
-      gantt.config.scale_unit = "day"
-      gantt.config.date_scale = "%d %M"
-      gantt.config.scale_height = 50
-      gantt.config.row_height = 40
-      gantt.config.bar_height = 24
-      gantt.config.grid_width = 450
-
-      gantt.config.subscales = [
-        { unit: "month", step: 1, date: "%M %Y" },
-        { unit: "day", step: 1, date: "%j" }
-      ]
-
-      gantt.config.drag_move = true
-      gantt.config.drag_resize = true
-      gantt.config.drag_progress = true
-      gantt.config.drag_links = true
-      gantt.config.details_on_create = true
-      gantt.config.details_on_dblclick = true
-
-      gantt.templates.task_class = function (start, end, task) {
-        if (task.progress === 1) return "completed-task"
-        if (task.progress >= 0.75) return "high-progress-task"
-        if (task.progress >= 0.25) return "medium-progress-task"
-        return "low-progress-task"
-      }
-
-      gantt.templates.grid_row_class = function (start, end, task) {
-        if (task.$level === 0) return "summary-row"
-        return ""
-      }
-
-      gantt.templates.rightside_text = function (start, end, task) {
-        if (task.progress === 1) {
-          return "<span class='completed-mark'>✓</span>"
-        }
-        return Math.round(task.progress * 100) + "%"
-      }
-
-      let taskCounter = 1
-      gantt.templates.grid_cell_value = function (item, column) {
-        if (column === "wbs") {
-          if (item.$level === 0) {
-            return taskCounter++
-          } else if (item.$level === 1) {
-            let parentIndex = gantt.getParent(item.id)
-            let parent = gantt.getTask(parentIndex)
-            let siblings = gantt.getChildren(parentIndex)
-            let childIndex = siblings.indexOf(item.id) + 1
-            return parent.$wbs + "." + childIndex
-          } else if (item.$level === 2) {
-            let parentIndex = gantt.getParent(item.id)
-            let parent = gantt.getTask(parentIndex)
-            let siblings = gantt.getChildren(parentIndex)
-            let childIndex = siblings.indexOf(item.id) + 1
-            return parent.$wbs + "." + childIndex
-          }
-        }
-        return gantt.templates.grid_cell_value_default(item, column)
-      }
-
-      gantt.attachEvent("onTaskLoading", function (task) {
-        if (task.$level === 0) {
-          task.$wbs = taskCounter
-          taskCounter++
-        } else if (task.$level === 1) {
-          let parent = gantt.getTask(gantt.getParent(task.id))
-          let siblings = gantt.getChildren(gantt.getParent(task.id))
-          let index = siblings.indexOf(task.id) + 1
-          task.$wbs = parent.$wbs + "." + index
-        } else if (task.$level === 2) {
-          let parentId = gantt.getParent(task.id)
-          let parent = gantt.getTask(parentId)
-          let siblings = gantt.getChildren(parentId)
-          let index = siblings.indexOf(task.id) + 1
-          task.$wbs = parent.$wbs + "." + index
-        }
-        return true
-      })
-
-      gantt.attachEvent("onContextMenu", function(taskId, linkId, e) {
-        if (taskId) {
-          this.showContextMenu(e, taskId)
-          return false
-        }
-        return true
-      }.bind(this))
-
-      gantt.init(this.$refs.ganttContainer)
-      gantt.parse(this.tasks)
-    },
-    showContextMenu(e, taskId) {
-      this.hideContextMenu()
-      
-      const contextMenu = document.createElement('div')
-      contextMenu.id = 'gantt-context-menu'
-      contextMenu.className = 'gantt-context-menu'
-      contextMenu.innerHTML = `
-        <div class="context-menu-item" onclick="window.ganttComponent.addSubTask('${taskId}')">
-          <svg class="menu-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <path d="M12 5v14m-7-7h14"/>
-          </svg>
-          Add Sub Task
-        </div>
-        <div class="context-menu-item" onclick="window.ganttComponent.editTask('${taskId}')">
-          <svg class="menu-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5"/>
-            <path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
-          </svg>
-          Edit Task
-        </div>
-        <div class="context-menu-item" onclick="window.ganttComponent.deleteTaskFromContext('${taskId}')">
-          <svg class="menu-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <path d="M3 6h18"/>
-            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
-            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
-          </svg>
-          Delete Task
-        </div>
-        <div class="context-menu-separator"></div>
-        <div class="context-menu-item" onclick="window.ganttComponent.markTaskComplete('${taskId}')">
-          <svg class="menu-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-            <polyline points="9,11 12,14 22,4"/>
-            <path d="M21,12v7a2,2 0 0,1 -2,2H5a2,2 0 0,1 -2,-2V5a2,2 0 0,1 2,-2h11"/>
-          </svg>
-          Toggle Complete
-        </div>
-      `
-      
-      contextMenu.style.position = 'fixed'
-      contextMenu.style.left = e.clientX + 'px'
-      contextMenu.style.top = e.clientY + 'px'
-      contextMenu.style.zIndex = '9999'
-      
-      document.body.appendChild(contextMenu)
-      
-      document.addEventListener('click', this.hideContextMenu)
-      window.ganttComponent = this
-    },
-    hideContextMenu() {
-      const existingMenu = document.getElementById('gantt-context-menu')
-      if (existingMenu) {
-        existingMenu.remove()
-      }
-      document.removeEventListener('click', this.hideContextMenu)
-    },
-    addSubTask(parentId) {
-      this.currentTaskId = parentId
-      this.taskForm = {
-        text: 'New Sub Task',
-        start_date: new Date().toISOString().split('T')[0],
-        duration: 3,
-        progress: 0
-      }
-      this.showAddModal = true
-      this.hideContextMenu()
-    },
-    editTask(taskId) {
-      this.currentTaskId = taskId
-      const task = gantt.getTask(taskId)
-      this.currentTask = task
-      this.taskForm = {
-        text: task.text,
-        start_date: gantt.date.date_to_str("%Y-%m-%d")(task.start_date),
-        duration: task.duration,
-        progress: task.progress
-      }
-      this.showEditModal = true
-      this.hideContextMenu()
-    },
-    deleteTaskFromContext(taskId) {
-      this.currentTaskId = taskId
-      this.currentTask = gantt.getTask(taskId)
-      this.showDeleteModal = true
-      this.hideContextMenu()
-    },
-    markTaskComplete(taskId) {
-      let task = gantt.getTask(taskId)
-      task.progress = task.progress === 1 ? 0 : 1
-      gantt.updateTask(taskId)
-      gantt.render()
-      this.hideContextMenu()
-    },
-    addTask() {
-      this.currentTaskId = null
-      this.taskForm = {
-        text: 'New Task',
-        start_date: new Date().toISOString().split('T')[0],
-        duration: 3,
-        progress: 0
-      }
-      this.showAddModal = true
-    },
-    deleteTask() {
-      const selectedTask = gantt.getSelectedId()
-      if (selectedTask) {
-        this.currentTaskId = selectedTask
-        this.currentTask = gantt.getTask(selectedTask)
-        this.showDeleteModal = true
-      } else {
-        this.showNotification('Please select a task to delete', 'warning')
-      }
-    },
-    confirmDelete() {
-      if (this.currentTaskId) {
-        gantt.deleteTask(this.currentTaskId)
-        this.showDeleteModal = false
-        this.currentTaskId = null
-        this.currentTask = null
-        this.showNotification('Task deleted successfully', 'success')
-      }
-    },
-    saveTask() {
-      if (!this.taskForm.text.trim()) {
-        this.showNotification('Task name is required', 'error')
-        return
-      }
-
-      const taskData = {
-        text: this.taskForm.text,
-        start_date: gantt.date.str_to_date("%Y-%m-%d")(this.taskForm.start_date),
-        duration: parseInt(this.taskForm.duration),
-        progress: parseFloat(this.taskForm.progress)
-      }
-
-      if (this.showEditModal) {
-        Object.assign(this.currentTask, taskData)
-        gantt.updateTask(this.currentTaskId)
-        gantt.render()
-        this.showEditModal = false
-        this.showNotification('Task updated successfully', 'success')
-      } else if (this.showAddModal) {
-        const newTaskId = gantt.uid()
-        const newTask = {
-          id: newTaskId,
-          ...taskData
-        }
-
-        if (this.currentTaskId) {
-          newTask.parent = this.currentTaskId
-        }
-
-        gantt.addTask(newTask)
-        gantt.refreshData()
-        gantt.selectTask(newTaskId)
-        gantt.showTask(newTaskId)
-        this.showAddModal = false
-        this.showNotification('Task added successfully', 'success')
-      }
-
-      this.resetForm()
-    },
-    resetForm() {
-      this.currentTaskId = null
-      this.currentTask = null
-      this.taskForm = {
-        text: '',
-        start_date: '',
-        duration: 3,
-        progress: 0
-      }
-    },
-    closeModal() {
-      this.showDeleteModal = false
-      this.showEditModal = false
-      this.showAddModal = false
-      this.resetForm()
-    },
-    showNotification(message, type = 'info') {
-      const notification = document.createElement('div')
-      notification.className = `notification notification-${type}`
-      notification.innerHTML = `
-        <div class="notification-content">
-          <span class="notification-message">${message}</span>
-          <button class="notification-close" onclick="this.parentElement.parentElement.remove()">×</button>
-        </div>
-      `
-      document.body.appendChild(notification)
-      
-      setTimeout(() => {
-        if (notification.parentElement) {
-          notification.remove()
-        }
-      }, 4000)
-    },
-    markCompleted() {
-      const selectedTask = gantt.getSelectedId()
-      if (selectedTask) {
-        let task = gantt.getTask(selectedTask)
-        task.progress = task.progress === 1 ? 0 : 1
-        gantt.updateTask(selectedTask)
-        gantt.render()
-        this.showNotification(
-          `Task marked as ${task.progress === 1 ? 'completed' : 'incomplete'}`, 
-          'success'
-        )
-      } else {
-        this.showNotification('Please select a task to mark as completed', 'warning')
-      }
+  gantt.attachEvent("onContextMenu", function(taskId, linkId, e) {
+    if (taskId) {
+      showContextMenu(e, taskId)
+      return false
     }
+    return true
+  })
+
+  gantt.init(ganttContainer.value)
+  gantt.parse(tasks)
+}
+
+const showContextMenu = (e, taskId) => {
+  hideContextMenu()
+  
+  const contextMenu = document.createElement('div')
+  contextMenu.id = 'gantt-context-menu'
+  contextMenu.className = 'gantt-context-menu'
+  contextMenu.innerHTML = `
+    <div class="context-menu-item" onclick="window.ganttComponent.addSubTask('${taskId}')">
+      <svg class="menu-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M12 5v14m-7-7h14"/>
+      </svg>
+      Add Sub Task
+    </div>
+    <div class="context-menu-item" onclick="window.ganttComponent.editTask('${taskId}')">
+      <svg class="menu-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5"/>
+        <path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+      </svg>
+      Edit Task
+    </div>
+    <div class="context-menu-item" onclick="window.ganttComponent.deleteTaskFromContext('${taskId}')">
+      <svg class="menu-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M3 6h18"/>
+        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
+        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
+      </svg>
+      Delete Task
+    </div>
+    <div class="context-menu-separator"></div>
+    <div class="context-menu-item" onclick="window.ganttComponent.markTaskComplete('${taskId}')">
+      <svg class="menu-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+        <polyline points="9,11 12,14 22,4"/>
+        <path d="M21,12v7a2,2 0 0,1 -2,2H5a2,2 0 0,1 -2,-2V5a2,2 0 0,1 2,-2h11"/>
+      </svg>
+      Toggle Complete
+    </div>
+  `
+  
+  contextMenu.style.position = 'fixed'
+  contextMenu.style.left = e.clientX + 'px'
+  contextMenu.style.top = e.clientY + 'px'
+  contextMenu.style.zIndex = '9999'
+  
+  document.body.appendChild(contextMenu)
+  
+  document.addEventListener('click', hideContextMenu)
+  window.ganttComponent = {
+    addSubTask,
+    editTask,
+    deleteTaskFromContext,
+    markTaskComplete
   }
 }
+
+const hideContextMenu = () => {
+  const existingMenu = document.getElementById('gantt-context-menu')
+  if (existingMenu) {
+    existingMenu.remove()
+  }
+  document.removeEventListener('click', hideContextMenu)
+}
+
+const addSubTask = (parentId) => {
+  currentTaskId.value = parentId
+  taskForm.value = {
+    text: 'New Sub Task',
+    start_date: new Date().toISOString().split('T')[0],
+    duration: 3,
+    progress: 0
+  }
+  showAddModal.value = true
+  hideContextMenu()
+}
+
+const editTask = (taskId) => {
+  currentTaskId.value = taskId
+  const task = gantt.getTask(taskId)
+  currentTask.value = task
+  taskForm.value = {
+    text: task.text,
+    start_date: gantt.date.date_to_str("%Y-%m-%d")(task.start_date),
+    duration: task.duration,
+    progress: task.progress
+  }
+  showEditModal.value = true
+  hideContextMenu()
+}
+
+const deleteTaskFromContext = (taskId) => {
+  currentTaskId.value = taskId
+  currentTask.value = gantt.getTask(taskId)
+  showDeleteModal.value = true
+  hideContextMenu()
+}
+
+const markTaskComplete = (taskId) => {
+  let task = gantt.getTask(taskId)
+  task.progress = task.progress === 1 ? 0 : 1
+  gantt.updateTask(taskId)
+  gantt.render()
+  hideContextMenu()
+}
+
+const addTask = () => {
+  currentTaskId.value = null
+  taskForm.value = {
+    text: 'New Task',
+    start_date: new Date().toISOString().split('T')[0],
+    duration: 3,
+    progress: 0
+  }
+  showAddModal.value = true
+}
+
+const deleteTask = () => {
+  const selectedTask = gantt.getSelectedId()
+  if (selectedTask) {
+    currentTaskId.value = selectedTask
+    currentTask.value = gantt.getTask(selectedTask)
+    showDeleteModal.value = true
+  } else {
+    showNotification('Please select a task to delete', 'warning')
+  }
+}
+
+const confirmDelete = () => {
+  if (currentTaskId.value) {
+    gantt.deleteTask(currentTaskId.value)
+    showDeleteModal.value = false
+    currentTaskId.value = null
+    currentTask.value = null
+    showNotification('Task deleted successfully', 'success')
+  }
+}
+
+const saveTask = () => {
+  if (!taskForm.value.text.trim()) {
+    showNotification('Task name is required', 'error')
+    return
+  }
+
+  const taskData = {
+    text: taskForm.value.text,
+    start_date: gantt.date.str_to_date("%Y-%m-%d")(taskForm.value.start_date),
+    duration: parseInt(taskForm.value.duration),
+    progress: parseFloat(taskForm.value.progress)
+  }
+
+  if (showEditModal.value) {
+    Object.assign(currentTask.value, taskData)
+    gantt.updateTask(currentTaskId.value)
+    gantt.render()
+    showEditModal.value = false
+    showNotification('Task updated successfully', 'success')
+  } else if (showAddModal.value) {
+    const newTaskId = gantt.uid()
+    const newTask = {
+      id: newTaskId,
+      ...taskData
+    }
+
+    if (currentTaskId.value) {
+      newTask.parent = currentTaskId.value
+    }
+
+    gantt.addTask(newTask)
+    gantt.refreshData()
+    gantt.selectTask(newTaskId)
+    gantt.showTask(newTaskId)
+    showAddModal.value = false
+    showNotification('Task added successfully', 'success')
+  }
+
+  resetForm()
+}
+
+const resetForm = () => {
+  currentTaskId.value = null
+  currentTask.value = null
+  taskForm.value = {
+    text: '',
+    start_date: '',
+    duration: 3,
+    progress: 0
+  }
+}
+
+const closeModal = () => {
+  showDeleteModal.value = false
+  showEditModal.value = false
+  showAddModal.value = false
+  resetForm()
+}
+
+const showNotification = (message, type = 'info') => {
+  const notification = document.createElement('div')
+  notification.className = `notification notification-${type}`
+  notification.innerHTML = `
+    <div class="notification-content">
+      <span class="notification-message">${message}</span>
+      <button class="notification-close" onclick="this.parentElement.parentElement.remove()">×</button>
+    </div>
+  `
+  document.body.appendChild(notification)
+  
+  setTimeout(() => {
+    if (notification.parentElement) {
+      notification.remove()
+    }
+  }, 4000)
+}
+
+const markCompleted = () => {
+  const selectedTask = gantt.getSelectedId()
+  if (selectedTask) {
+    let task = gantt.getTask(selectedTask)
+    task.progress = task.progress === 1 ? 0 : 1
+    gantt.updateTask(selectedTask)
+    gantt.render()
+    showNotification(
+      `Task marked as ${task.progress === 1 ? 'completed' : 'incomplete'}`, 
+      'success'
+    )
+  } else {
+    showNotification('Please select a task to mark as completed', 'warning')
+  }
+}
+
+onMounted(() => {
+  initGantt()
+  
+  // Prevent GridStack drag when interacting with Gantt chart
+  const ganttElement = ganttContainer.value
+  if (ganttElement) {
+    ganttElement.addEventListener('mousedown', (e) => {
+      e.stopPropagation()
+    })
+    
+    ganttElement.addEventListener('dragstart', (e) => {
+      e.stopPropagation()
+    })
+    
+    ganttElement.addEventListener('drag', (e) => {
+      e.stopPropagation()
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (gantt.$container) {
+    gantt.clearAll()
+  }
+})
 </script>
 
 <template>
-  <div class="gantt-container">
+  <div class="gantt-container no-grid-drag">
     <div class="gantt-toolbar">
       <button @click="addTask" class="btn btn-primary">
         <svg class="btn-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -557,9 +603,8 @@ export default {
         Toggle Complete
       </button>
     </div>
-    <div ref="ganttContainer" class="gantt-chart"></div>
+    <div ref="ganttContainer" class="gantt-chart no-grid-drag"></div>
 
-    <!-- Delete Modal -->
     <div v-if="showDeleteModal" class="modal-overlay" @click="closeModal">
       <div class="modal-container" @click.stop>
         <div class="modal-header">
@@ -586,7 +631,6 @@ export default {
       </div>
     </div>
 
-    <!-- Edit Modal -->
     <div v-if="showEditModal" class="modal-overlay" @click="closeModal">
       <div class="modal-container" @click.stop>
         <div class="modal-header">
@@ -659,7 +703,6 @@ export default {
       </div>
     </div>
 
-    <!-- Add Modal -->
     <div v-if="showAddModal" class="modal-overlay" @click="closeModal">
       <div class="modal-container" @click.stop>
         <div class="modal-header">
@@ -965,6 +1008,7 @@ export default {
     opacity: 0;
     transform: scale(0.95);
   }
+
   to {
     opacity: 1;
     transform: scale(1);
@@ -1024,6 +1068,7 @@ export default {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -1046,6 +1091,7 @@ export default {
     opacity: 0;
     transform: translateY(-16px) scale(0.98);
   }
+
   to {
     opacity: 1;
     transform: translateY(0) scale(1);
@@ -1234,6 +1280,7 @@ export default {
     opacity: 0;
     transform: translateX(100%);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);