fix: adjust component sizes on demo page

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",

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",

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: {} },

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 ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
-import EcommerceEarningReports from '@/views/dashboards/ecommerce/EcommerceEarningReports.vue'
+import AnalysisCard from "@/components/AnalysisCard.vue";
-import EcommerceExpensesRadialBarCharts from '@/views/dashboards/ecommerce/EcommerceExpensesRadialBarCharts.vue'
+import CostOverview from "@/components/CostOverview.vue";
-import EcommerceGeneratedLeads from '@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue'
+import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
-import EcommerceInvoiceTable from '@/views/dashboards/ecommerce/EcommerceInvoiceTable.vue'
+import GanttChart from './gantt.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'
 
 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-min-w="4" gs-h="2" gs-max-h="2">
-    <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-content">
-        <EcommerceStatistics />
+        <GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
       </div>
     </div>
-
+    <div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
-    <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-content">
-        <EcommerceTotalProfitLineCharts />
+        <GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
       </div>
     </div>
-
+    <div class="grid-stack-item" gs-w="8" gs-h="7" gs-max-h="7">
-    <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-content">
-        <EcommerceExpensesRadialBarCharts />
+        <ProjectActivityBarChart />
       </div>
     </div>
-
+    <div class="grid-stack-item" gs-w="4" gs-h="7" gs-max-h="7">
-    <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-content">
-        <EcommerceGeneratedLeads />
+        <AnalysisCard />
       </div>
     </div>
-
+    <div class="grid-stack-item" gs-w="12" gs-h="8" gs-max-h="8">
-    <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-content">
-        <EcommerceRevenueReport />
+        <GanttChart />
-      </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 />
       </div>
     </div>
   </div>
 </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>

resources/js/pages/dashboards/gantt.vue

@@ -1,23 +1,36 @@
-<script>
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { gantt } from 'dhtmlx-gantt'
 import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
 
-export default {
+const props = defineProps({
-  name: 'GanttChart',
+  initialTasks: {
-  data() {
+    type: Object,
-    return {
+    default: () => ({
-      showDeleteModal: false,
+      data: [],
-      showEditModal: false,
+      links: []
-      showAddModal: false,
+    })
-      currentTaskId: null,
+  },
-      currentTask: null,
+  config: {
-      taskForm: {
+    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
-      },
+})
-      tasks: {
+
+const tasks = props.initialTasks.data.length > 0 ? props.initialTasks : {
   data: [
     {
       id: 1,
@@ -205,18 +218,8 @@ export default {
     { id: 11, source: 241, target: 242, type: "0" }
   ]
 }
-    }
+
-  },
+const initGantt = () => {
-  mounted() {
-    this.initGantt()
-  },
-  beforeUnmount() {
-    if (gantt.$container) {
-      gantt.clearAll()
-    }
-  },
-  methods: {
-    initGantt() {
   gantt.config.date_format = "%d-%m-%Y"
   gantt.config.fit_tasks = true
   gantt.config.start_date = null
@@ -310,17 +313,18 @@ export default {
 
   gantt.attachEvent("onContextMenu", function(taskId, linkId, e) {
     if (taskId) {
-          this.showContextMenu(e, taskId)
+      showContextMenu(e, taskId)
       return false
     }
     return true
-      }.bind(this))
+  })
 
-      gantt.init(this.$refs.ganttContainer)
+  gantt.init(ganttContainer.value)
-      gantt.parse(this.tasks)
+  gantt.parse(tasks)
-    },
+}
-    showContextMenu(e, taskId) {
+
-      this.hideContextMenu()
+const showContextMenu = (e, taskId) => {
+  hideContextMenu()
   
   const contextMenu = document.createElement('div')
   contextMenu.id = 'gantt-context-menu'
@@ -364,139 +368,156 @@ export default {
   
   document.body.appendChild(contextMenu)
   
-      document.addEventListener('click', this.hideContextMenu)
+  document.addEventListener('click', hideContextMenu)
-      window.ganttComponent = this
+  window.ganttComponent = {
-    },
+    addSubTask,
-    hideContextMenu() {
+    editTask,
+    deleteTaskFromContext,
+    markTaskComplete
+  }
+}
+
+const hideContextMenu = () => {
   const existingMenu = document.getElementById('gantt-context-menu')
   if (existingMenu) {
     existingMenu.remove()
   }
-      document.removeEventListener('click', this.hideContextMenu)
+  document.removeEventListener('click', hideContextMenu)
-    },
+}
-    addSubTask(parentId) {
+
-      this.currentTaskId = parentId
+const addSubTask = (parentId) => {
-      this.taskForm = {
+  currentTaskId.value = parentId
+  taskForm.value = {
     text: 'New Sub Task',
     start_date: new Date().toISOString().split('T')[0],
     duration: 3,
     progress: 0
   }
-      this.showAddModal = true
+  showAddModal.value = true
-      this.hideContextMenu()
+  hideContextMenu()
-    },
+}
-    editTask(taskId) {
+
-      this.currentTaskId = taskId
+const editTask = (taskId) => {
+  currentTaskId.value = taskId
   const task = gantt.getTask(taskId)
-      this.currentTask = task
+  currentTask.value = task
-      this.taskForm = {
+  taskForm.value = {
     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
+  showEditModal.value = true
-      this.hideContextMenu()
+  hideContextMenu()
-    },
+}
-    deleteTaskFromContext(taskId) {
+
-      this.currentTaskId = taskId
+const deleteTaskFromContext = (taskId) => {
-      this.currentTask = gantt.getTask(taskId)
+  currentTaskId.value = taskId
-      this.showDeleteModal = true
+  currentTask.value = gantt.getTask(taskId)
-      this.hideContextMenu()
+  showDeleteModal.value = true
-    },
+  hideContextMenu()
-    markTaskComplete(taskId) {
+}
+
+const markTaskComplete = (taskId) => {
   let task = gantt.getTask(taskId)
   task.progress = task.progress === 1 ? 0 : 1
   gantt.updateTask(taskId)
   gantt.render()
-      this.hideContextMenu()
+  hideContextMenu()
-    },
+}
-    addTask() {
+
-      this.currentTaskId = null
+const addTask = () => {
-      this.taskForm = {
+  currentTaskId.value = null
+  taskForm.value = {
     text: 'New Task',
     start_date: new Date().toISOString().split('T')[0],
     duration: 3,
     progress: 0
   }
-      this.showAddModal = true
+  showAddModal.value = true
-    },
+}
-    deleteTask() {
+
+const deleteTask = () => {
   const selectedTask = gantt.getSelectedId()
   if (selectedTask) {
-        this.currentTaskId = selectedTask
+    currentTaskId.value = selectedTask
-        this.currentTask = gantt.getTask(selectedTask)
+    currentTask.value = gantt.getTask(selectedTask)
-        this.showDeleteModal = true
+    showDeleteModal.value = true
   } else {
-        this.showNotification('Please select a task to delete', 'warning')
+    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() {
+const confirmDelete = () => {
-      if (!this.taskForm.text.trim()) {
+  if (currentTaskId.value) {
-        this.showNotification('Task name is required', 'error')
+    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: this.taskForm.text,
+    text: taskForm.value.text,
-        start_date: gantt.date.str_to_date("%Y-%m-%d")(this.taskForm.start_date),
+    start_date: gantt.date.str_to_date("%Y-%m-%d")(taskForm.value.start_date),
-        duration: parseInt(this.taskForm.duration),
+    duration: parseInt(taskForm.value.duration),
-        progress: parseFloat(this.taskForm.progress)
+    progress: parseFloat(taskForm.value.progress)
   }
 
-      if (this.showEditModal) {
+  if (showEditModal.value) {
-        Object.assign(this.currentTask, taskData)
+    Object.assign(currentTask.value, taskData)
-        gantt.updateTask(this.currentTaskId)
+    gantt.updateTask(currentTaskId.value)
     gantt.render()
-        this.showEditModal = false
+    showEditModal.value = false
-        this.showNotification('Task updated successfully', 'success')
+    showNotification('Task updated successfully', 'success')
-      } else if (this.showAddModal) {
+  } else if (showAddModal.value) {
     const newTaskId = gantt.uid()
     const newTask = {
       id: newTaskId,
       ...taskData
     }
 
-        if (this.currentTaskId) {
+    if (currentTaskId.value) {
-          newTask.parent = this.currentTaskId
+      newTask.parent = currentTaskId.value
     }
 
     gantt.addTask(newTask)
     gantt.refreshData()
     gantt.selectTask(newTaskId)
     gantt.showTask(newTaskId)
-        this.showAddModal = false
+    showAddModal.value = false
-        this.showNotification('Task added successfully', 'success')
+    showNotification('Task added successfully', 'success')
   }
 
-      this.resetForm()
+  resetForm()
-    },
+}
-    resetForm() {
+
-      this.currentTaskId = null
+const resetForm = () => {
-      this.currentTask = null
+  currentTaskId.value = null
-      this.taskForm = {
+  currentTask.value = null
+  taskForm.value = {
     text: '',
     start_date: '',
     duration: 3,
     progress: 0
   }
-    },
+}
-    closeModal() {
+
-      this.showDeleteModal = false
+const closeModal = () => {
-      this.showEditModal = false
+  showDeleteModal.value = false
-      this.showAddModal = false
+  showEditModal.value = false
-      this.resetForm()
+  showAddModal.value = false
-    },
+  resetForm()
-    showNotification(message, type = 'info') {
+}
+
+const showNotification = (message, type = 'info') => {
   const notification = document.createElement('div')
   notification.className = `notification notification-${type}`
   notification.innerHTML = `
@@ -512,28 +533,53 @@ export default {
       notification.remove()
     }
   }, 4000)
-    },
+}
-    markCompleted() {
+
+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()
-        this.showNotification(
+    showNotification(
       `Task marked as ${task.progress === 1 ? 'completed' : 'incomplete'}`, 
       'success'
     )
   } else {
-        this.showNotification('Please select a task to mark as completed', 'warning')
+    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);