feat:add some new future

2025-09-15 15:46:14 +03:30
parent a768c64a68
commit 5b63f55fb7
7 changed files with 1157 additions and 297 deletions
--- a/resources/js/pages/dashboards/demo.vue
+++ b/resources/js/pages/dashboards/demo.vue
@@ -1,126 +1,270 @@
 <script setup>
-import { onMounted, nextTick, ref } from 'vue'
+import { onMounted, nextTick, ref, onUnmounted } from 'vue'
 import { GridStack } from 'gridstack'

 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 AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
+import CostOverview from "@/components/CostOverview.vue";
+import TasksTable from "./task.vue";
+import ResourcesTable from "./resource.vue";
+import GanttChart from './gantt.vue'

-const ganttColumns = ref([])

-const generateColumnsFromData = (data) => {
-  if (!data || data.length === 0) return []
-  
-  const firstItem = data[0]
-  const columns = Object.keys(firstItem).map(key => {
-    const column = {
-      field: key,
-      headerName: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
-      sortable: true,
-      filter: true,
-      flex: 1
-    }
+const isEditMode = ref(false)
+let grid = null

-    if (key === 'id') {
-      column.width = 80
-      column.flex = undefined
-    }
-
-    if (key === 'completed' && typeof firstItem[key] === 'boolean') {
-      column.width = 120
-      column.flex = undefined
-      column.cellRenderer = (params) => {
-        return params.value ? '<span style="color: green; font-weight: bold;">✓ Completed</span>' : '<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
+const handleEditModeChange = (event) => {
+  if (event.detail) {
+    isEditMode.value = event.detail.isActive;
+    if (grid) {
+      if (isEditMode.value) {
+        grid.enableMove(true)
+        grid.enableResize(true)
+      } else {
+        grid.enableMove(false)
+        grid.enableResize(false)
      }
    }
-
-    if (key === 'userId') {
-      column.width = 100
-      column.flex = undefined
-    }
-
-    return column
-  })
-  
-  return columns
+  }
 }

-const processAPIData = (response) => {
-  const data = response.todos || response
-  ganttColumns.value = generateColumnsFromData(data)
-  return data
+const handleDeleteCard = (cardId) => {
+  const element = document.querySelector(`[data-card-id="${cardId}"]`)
+  if (element && grid) {
+    grid.removeWidget(element)
+  }
 }

 onMounted(async () => {
-  const grid = GridStack.init({
+  grid = GridStack.init({
    column: 12,
    cellHeight: '105',
    float: true,
    draggable: { handle: '.grid-stack-item-content' },
    resizable: true,
-    maxRow: 20,
+    disableOneColumnMode: true,
+    animate: true,
  })

+  grid.enableMove(false)
+  grid.enableResize(false)
+
+  window.addEventListener("crm-edit-mode-changed", handleEditModeChange)
+
  await nextTick()
 })
+
+onUnmounted(() => {
+  window.removeEventListener("crm-edit-mode-changed", handleEditModeChange)
+  if (grid) {
+    grid.destroy(false)
+  }
+  
+  setTimeout(() => {
+    if (gridContainer.value) {
+      grid = GridStack.init({
+        column: 12,
+        cellHeight: 50,
+        float: true,
+        draggable: { 
+          handle: '.grid-stack-item-content' 
+        },
+        resizable: {
+          handles: 'e, se, s, sw, w'
+        }
+      }, gridContainer.value)
+    }
+  }, 100)
+})
 </script>

 <template>
-  <div class="grid-stack">
-    <div class="grid-stack-item" gs-w="4" gs-min-h="2" gs-max-h="2">
-      <div class="grid-stack-item-content">
-        <GeneratedLeadsCard :progress="32" />
+  <div class="grid-stack-container" :class="{ 'edit-mode-active': isEditMode }">
+    <VCol v-if="isEditMode" cols="12" class="pb-0">
+      <div class="edit-mode-banner">
+        <div class="banner-background">
+          <div class="banner-glow"></div>
+          <div class="banner-particles"></div>
+        </div>
+
+        <div class="banner-content">
+          <div class="banner-header">
+            <div class="banner-icon">
+              <VIcon icon="tabler-edit" size="24" class="edit-icon" />
+              <div class="icon-pulse"></div>
+            </div>
+            <div class="banner-text">
+              <h3 class="banner-title">✨ Edit Mode Enabled</h3>
+              <p class="banner-subtitle">
+                Customize your dashboard with drag & drop, resize, and delete features
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="banner-decorations">
+          <div class="decoration decoration-1"></div>
+          <div class="decoration decoration-2"></div>
+          <div class="decoration decoration-3"></div>
+        </div>
      </div>
-    </div>
-    <div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
-      <div class="grid-stack-item-content">
-        <GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
+    </VCol>
+
+    <div class="grid-stack">
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-min-h="2" gs-max-h="2"
+        data-card-id="leads1">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move leads1">
+            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
+          </div>
+          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
+            title="Delete leads1" @click.stop="handleDeleteCard('leads1')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <GeneratedLeadsCard :progress="32" />
+        </div>
      </div>
-    </div>
-    <div class="grid-stack-item" gs-min-w="4" gs-h="2" gs-max-h="2">
-      <div class="grid-stack-item-content">
-        <GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-h="2" gs-max-h="2"
+        data-card-id="leads2">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move leads2">
+            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
+          </div>
+          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
+            title="Delete leads2" @click.stop="handleDeleteCard('leads2')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <GeneratedLeadsCard :donut-colors="['primary']" :progress="71" />
+        </div>
      </div>
-    </div>
-    <div class="grid-stack-item" gs-w="8" gs-h="7" gs-max-h="7">
-      <div class="grid-stack-item-content">
-        <ProjectActivityBarChart />
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-min-w="3" gs-w="4" gs-h="2" gs-max-h="2"
+        data-card-id="leads3">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move leads3">
+            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
+          </div>
+          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
+            title="Delete leads3" @click.stop="handleDeleteCard('leads3')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <GeneratedLeadsCard :donut-colors="['warning']" :progress="32" />
+        </div>
      </div>
-    </div>
-    <div class="grid-stack-item" gs-w="4" gs-h="7" gs-max-h="7">
-      <div class="grid-stack-item-content">
-        <AnalysisCard />
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="8" gs-h="7" gs-max-h="7"
+        data-card-id="project-activity">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move project-activity">
+            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
+          </div>
+          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
+            title="Delete project-activity" @click.stop="handleDeleteCard('project-activity')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <ProjectActivityBarChart />
+        </div>
      </div>
-    </div>
-    <div class="grid-stack-item" gs-w="12" gs-h="6" gs-max-h="6">
-      <div class="grid-stack-item-content">
-        <AgGridTable :columns="ganttColumns" api-url="https://dummyjson.com/todos"
-          :data-processor="processAPIData" :enable-export="true" :enable-edit="true" :enable-delete="true"
-          :enable-search="true" height="500px" />
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="4" gs-h="7" gs-max-h="7"
+        data-card-id="analysis">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move analysis">
+            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
+          </div>
+          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
+            title="Delete analysis" @click.stop="handleDeleteCard('analysis')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <AnalysisCard />
+        </div>
+      </div>
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
+        data-card-id="tasks">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move tasks">
+            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
+          </div>
+          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
+            title="Delete tasks" @click.stop="handleDeleteCard('tasks')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <TasksTable />
+        </div>
+      </div>
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="4" gs-h="7" gs-max-h="7"
+        data-card-id="analysis">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move analysis">
+            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
+          </div>
+          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
+            title="Delete analysis" @click.stop="handleDeleteCard('analysis')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <AnalysisCard />
+        </div>
+      </div>
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="8" gs-h="7" gs-max-h="7"
+        data-card-id="cost-overview">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move cost-overview">
+            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
+          </div>
+          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
+            title="Delete cost-overview" @click.stop="handleDeleteCard('cost-overview')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <CostOverview />
+        </div>
+      </div>
+
+      <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
+        data-card-id="resources">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move resources">
+            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
+          </div>
+          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
+            title="Delete resources" @click.stop="handleDeleteCard('resources')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <ResourcesTable />
+        </div>
+      </div>
+
+        <div class="grid-stack-item" :class="{ 'edit-mode': isEditMode }" gs-w="12" gs-h="6" gs-max-h="6"
+        data-card-id="gantt-chart">
+        <div class="grid-stack-item-content">
+          <div v-if="isEditMode" class="drag-handle" title="Move gantt-chart">
+            <VIcon size="18">mdi-drag-horizontal-variant</VIcon>
+          </div>
+          <VBtn v-if="isEditMode" variant="text" size="small" color="error" class="delete-btn-chart"
+            title="Delete gantt-chart" @click.stop="handleDeleteCard('gantt-chart')">
+            <VIcon icon="tabler-trash-x" size="16" class="me-1" />
+            Delete
+          </VBtn>
+          <GanttChart />
+        </div>
      </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(AgGridTable) {
-  height: 100vh !important;
-}
-
-.grid-stack-item:has(AgGridTable) .grid-stack-item-content {
-  height: 100vh;
-}
+<style lang="scss">
+@import "../../../styles/overview.scss";
 </style>
--- a/resources/js/pages/dashboards/resource.vue
+++ b/resources/js/pages/dashboards/resource.vue
@@ -0,0 +1,217 @@
+<script setup>
+import { ref } from 'vue'
+import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
+
+const props = defineProps({
+  apiUrl: {
+    type: String,
+    default: 'http://megategra.com:8001/dev/data/resources'
+  },
+  tableId: {
+    type: String,
+    default: 'resources-table'
+  },
+  tableTitle: {
+    type: String,
+    default: 'Resource Management'
+  },
+  height: {
+    type: String,
+    default: '500px'
+  },
+  enableExport: {
+    type: Boolean,
+    default: true
+  },
+  enableEdit: {
+    type: Boolean,
+    default: true
+  },
+  enableDelete: {
+    type: Boolean,
+    default: true
+  },
+  enableSearch: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const ganttColumns = ref([])
+
+const generateColumnsFromData = (data, maxCellTextLength = 30) => {
+  if (!data || data.length === 0) return []
+
+  const firstItem = data[0]
+  const sampleSize = Math.min(10, data.length)
+
+  const columns = Object.keys(firstItem).map(key => {
+    const sampleValues = data.slice(0, sampleSize)
+      .map(item => item[key])
+      .filter(val => val !== undefined && val !== null)
+
+    const column = {
+      field: key,
+      headerName: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
+      sortable: true,
+      filter: true,
+      flex: 1
+    }
+
+    if (key === 'id') {
+      column.hide = true
+      column.width = 0
+      column.flex = 0
+      column.suppressColumnsToolPanel = true
+      column.suppressHeaderMenuButton = true
+      return column
+    }
+
+    if (key === 'completed' && typeof firstItem[key] === 'boolean') {
+      column.width = 120
+      column.flex = undefined
+      column.cellRenderer = (params) => {
+        return params.value ?
+          '<span style="color: green; font-weight: bold;">✓ Completed</span>' :
+          '<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
+      }
+      return column
+    }
+
+    if (key === 'userId') {
+      column.width = 100
+      column.flex = undefined
+      return column
+    }
+
+    const isDateField = (val) => {
+      if (typeof val !== 'string') return false
+      const datePatterns = [
+        /^\d{4}-\d{2}-\d{2}/,
+        /T\d{2}:\d{2}:\d{2}/,
+        /^\d{2}\/\d{2}\/\d{4}/,
+        /^\d{1,2}-\d{1,2}-\d{4}/
+      ]
+      return datePatterns.some(pattern => pattern.test(val)) || !isNaN(Date.parse(val))
+    }
+
+    const hasLongText = sampleValues.some(val =>
+      typeof val === 'string' && val.length > maxCellTextLength
+    )
+
+    const firstValue = sampleValues[0]
+
+    if (isDateField(firstValue)) {
+      column.width = 140
+      column.valueFormatter = (params) => {
+        if (!params.value) return ''
+        try {
+          const date = new Date(params.value)
+          if (isNaN(date.getTime())) return String(params.value)
+          return date.toISOString().split('T')[0]
+        } catch (e) {
+          return String(params.value)
+        }
+      }
+      column.tooltipValueGetter = (params) => {
+        if (!params.value) return ''
+        try {
+          const date = new Date(params.value)
+          return isNaN(date.getTime()) ?
+            String(params.value) :
+            date.toLocaleString('en-US', {
+              weekday: 'long',
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+              hour: '2-digit',
+              minute: '2-digit'
+            })
+        } catch (e) {
+          return String(params.value)
+        }
+      }
+      return column
+    }
+
+    if (hasLongText) {
+      column.flex = 1
+      column.minWidth = 150
+      column.maxWidth = 300
+      column.cellRenderer = 'LongTextCellRenderer'
+      column.cellRendererParams = {
+        maxLength: maxCellTextLength
+      }
+      column.tooltipField = key
+      return column
+    }
+
+    if (typeof firstValue === 'number') {
+      column.filter = 'agNumberColumnFilter'
+      column.width = 120
+      column.valueFormatter = (params) => {
+        if (typeof params.value !== 'number') return params.value || ''
+        return params.value.toLocaleString('en-US')
+      }
+      return column
+    }
+
+    column.flex = 1
+    column.minWidth = 100
+    column.maxWidth = 250
+
+    return column
+  }).filter(col => col.field !== 'action')
+
+  return columns
+}
+
+const processAPIData = (response) => {
+  const rawData = response?.data?.data || response?.data || []
+
+  const data = rawData.map((item, index) => {
+    const source = item._source || item
+    return {
+      id: item._id || item.id || `resource_${Date.now()}_${index}`,
+      name: source.name || 'Unnamed',
+      rate: parseFloat(source.rate) || 0,
+    }
+  })
+
+  ganttColumns.value = generateColumnsFromData(data, 25).map(col => {
+    if (col.field === 'name') {
+      return {
+        ...col,
+        flex: 2,
+        minWidth: 200,
+        maxWidth: 500,
+        wrapText: true,
+        autoHeight: true,
+        cellStyle: {
+          whiteSpace: 'normal',
+          lineHeight: '1.2',
+          wordWrap: 'break-word'
+        },
+        tooltipField: 'name'
+      }
+    }
+    return col
+  })
+  return data
+}
+</script>
+
+<template>
+  <AgGridTable 
+    :columns="ganttColumns" 
+    :api-url="apiUrl"
+    :data-processor="processAPIData" 
+    :enable-export="enableExport" 
+    :enable-edit="enableEdit" 
+    :enable-delete="enableDelete"
+    :enable-search="enableSearch" 
+    :height="height" 
+    :table-id="tableId" 
+    :table-title="tableTitle" 
+  />
+</template>
--- a/resources/js/pages/dashboards/task.vue
+++ b/resources/js/pages/dashboards/task.vue
@@ -0,0 +1,213 @@
+<script setup>
+import { ref } from 'vue'
+import AgGridTable from '@/views/demos/forms/tables/data-table/AgGridTable.vue';
+
+const props = defineProps({
+  apiUrl: {
+    type: String,
+    default: 'http://megategra.com:8001/dev/data/tasks'
+  },
+  tableId: {
+    type: String,
+    default: 'tasks-table'
+  },
+  tableTitle: {
+    type: String,
+    default: 'Tasks Management'
+  },
+  height: {
+    type: String,
+    default: '500px'
+  },
+  enableExport: {
+    type: Boolean,
+    default: true
+  },
+  enableEdit: {
+    type: Boolean,
+    default: true
+  },
+  enableDelete: {
+    type: Boolean,
+    default: true
+  },
+  enableSearch: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const ganttColumns = ref([])
+
+const generateColumnsFromData = (data, maxCellTextLength = 30) => {
+  if (!data || data.length === 0) return []
+
+  const firstItem = data[0]
+  const sampleSize = Math.min(10, data.length)
+
+  const columns = Object.keys(firstItem).map(key => {
+    const sampleValues = data.slice(0, sampleSize)
+      .map(item => item[key])
+      .filter(val => val !== undefined && val !== null)
+
+    const column = {
+      field: key,
+      headerName: key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1'),
+      sortable: true,
+      filter: true,
+      flex: 1
+    }
+
+    if (key === 'id') {
+      column.hide = true
+      column.width = 0
+      column.flex = 0
+      column.suppressColumnsToolPanel = true
+      column.suppressHeaderMenuButton = true
+      return column
+    }
+
+    if (key === 'completed' && typeof firstItem[key] === 'boolean') {
+      column.width = 120
+      column.flex = undefined
+      column.cellRenderer = (params) => {
+        return params.value ?
+          '<span style="color: green; font-weight: bold;">✓ Completed</span>' :
+          '<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
+      }
+      return column
+    }
+
+    if (key === 'userId') {
+      column.width = 100
+      column.flex = undefined
+      return column
+    }
+
+    const isDateField = (val) => {
+      if (typeof val !== 'string') return false
+      const datePatterns = [
+        /^\d{4}-\d{2}-\d{2}/,
+        /T\d{2}:\d{2}:\d{2}/,
+        /^\d{2}\/\d{2}\/\d{4}/,
+        /^\d{1,2}-\d{1,2}-\d{4}/
+      ]
+      return datePatterns.some(pattern => pattern.test(val)) || !isNaN(Date.parse(val))
+    }
+
+    const hasLongText = sampleValues.some(val =>
+      typeof val === 'string' && val.length > maxCellTextLength
+    )
+
+    const firstValue = sampleValues[0]
+
+    if (isDateField(firstValue)) {
+      column.width = 140
+      column.valueFormatter = (params) => {
+        if (!params.value) return ''
+        try {
+          const date = new Date(params.value)
+          if (isNaN(date.getTime())) return String(params.value)
+          return date.toISOString().split('T')[0]
+        } catch (e) {
+          return String(params.value)
+        }
+      }
+      column.tooltipValueGetter = (params) => {
+        if (!params.value) return ''
+        try {
+          const date = new Date(params.value)
+          return isNaN(date.getTime()) ?
+            String(params.value) :
+            date.toLocaleString('en-US', {
+              weekday: 'long',
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+              hour: '2-digit',
+              minute: '2-digit'
+            })
+        } catch (e) {
+          return String(params.value)
+        }
+      }
+      return column
+    }
+
+    if (hasLongText) {
+      column.flex = 1
+      column.minWidth = 150
+      column.maxWidth = 300
+      column.cellRenderer = 'LongTextCellRenderer'
+      column.cellRendererParams = {
+        maxLength: maxCellTextLength
+      }
+      column.tooltipField = key
+      return column
+    }
+
+    if (typeof firstValue === 'number') {
+      column.filter = 'agNumberColumnFilter'
+      column.width = 120
+      column.valueFormatter = (params) => {
+        if (typeof params.value !== 'number') return params.value || ''
+        return params.value.toLocaleString('en-US')
+      }
+      return column
+    }
+
+    column.flex = 1
+    column.minWidth = 100
+    column.maxWidth = 250
+
+    return column
+  }).filter(col => col.field !== 'action')
+
+  return columns
+}
+
+const processAPIData = (response) => {
+  const rawData = response?.data?.data || response?.data || []
+
+  const data = rawData.map((item, index) => {
+    const source = item._source || item
+    return {
+      id: item._id || item.id || `task_${Date.now()}_${index}`,
+      name: source.name || 'Unnamed',
+      complete: source.complete,
+      effort: parseFloat(source.effort) || 0,
+      effortleft: parseFloat(source.effortleft) || 0,
+      start: source.start,
+      end: source.end,
+    }
+  })
+
+  ganttColumns.value = generateColumnsFromData(data, 25).map(col => {
+    if (col.field === 'name') {
+      return {
+        ...col,
+        flex: 2,
+        minWidth: 200,
+        maxWidth: 500,
+        wrapText: true,
+        autoHeight: true,
+        cellStyle: {
+          whiteSpace: 'normal',
+          lineHeight: '1.2',
+          wordWrap: 'break-word'
+        },
+        tooltipField: 'name'
+      }
+    }
+    return col
+  })
+
+  return data
+}
+</script>
+
+<template>
+  <AgGridTable :columns="ganttColumns" :api-url="apiUrl" :data-processor="processAPIData" :enable-export="enableExport"
+    :enable-edit="enableEdit" :enable-delete="enableDelete" :enable-search="enableSearch" :height="height"
+    :table-id="tableId" :table-title="tableTitle" />
+</template>
--- a/resources/js/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue
+++ b/resources/js/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { useDisplay, useTheme } from 'vuetify'
 import { hexToRgb } from '@layouts/utils'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, nextTick } from 'vue'

 const props = defineProps({
  donutColors: {
@@ -17,15 +17,20 @@ const props = defineProps({
 const vuetifyTheme = useTheme()
 const display = useDisplay()
 const cardRef = ref(null)
-const cardWidth = ref(0)
+const cardWidth = ref(300)

 const updateCardWidth = () => {
  if (cardRef.value) {
-    cardWidth.value = cardRef.value.offsetWidth
+    const rect = cardRef.value.getBoundingClientRect()
+    const newWidth = rect.width
+    if (newWidth > 0 && Math.abs(newWidth - cardWidth.value) > 5) {
+      cardWidth.value = newWidth
+    }
  }
 }

-onMounted(() => {
+onMounted(async () => {
+  await nextTick()
  updateCardWidth()
  window.addEventListener('resize', updateCardWidth)
 })
@@ -47,48 +52,50 @@ const processColors = (colors) => {
 }

 const chartSize = computed(() => {
-  const width = cardWidth.value || 300
-  
-  let size
-  if (width < 250) {
-    size = Math.max(120, width * 0.5)
-  } else if (width < 350) {
-    size = Math.max(150, width * 0.5)
-  } else if (width < 450) {
-    size = Math.max(180, width * 0.45)
-  } else if (width < 600) {
-    size = Math.max(200, width * 0.4)
-  } else if (width < 800) {
-    size = Math.max(240, width * 0.35)
-  } else {
-    size = Math.min(300, width * 0.32)
+  const width = cardWidth.value
+  const breakpoints = {
+    xs: display.xs.value,
+    sm: display.sm.value,
+    md: display.md.value
  }
  
-  if (display.xs.value) size = Math.max(size, 120)
-  if (display.sm.value) size = Math.max(size, 160)
-  if (display.md.value) size = Math.max(size, 200)
+  let size = 120
+  
+  if (breakpoints.xs) {
+    size = Math.min(width * 0.35, 120)
+  } else if (breakpoints.sm) {
+    size = Math.min(width * 0.4, 150)
+  } else if (width <= 400) {
+    size = Math.min(width * 0.4, 160)
+  } else if (width <= 600) {
+    size = Math.min(width * 0.35, 200)
+  } else {
+    size = Math.min(width * 0.3, 240)
+  }
+  
+  size = Math.max(size, 100)
  
  return { width: size, height: size }
 })

 const textSizes = computed(() => {
-  const width = cardWidth.value || 300
+  const width = cardWidth.value
  
-  if (width < 250 || display.xs.value) {
+  if (display.xs.value || width < 300) {
    return {
      title: 'text-body-2',
      subtitle: 'text-caption',
      mainNumber: 'text-h6',
-      percentage: 'text-body-2'
+      percentage: 'text-caption'
    }
-  } else if (width < 350 || display.sm.value) {
+  } else if (display.sm.value || width < 450) {
    return {
      title: 'text-body-1',
      subtitle: 'text-body-2', 
      mainNumber: 'text-h5',
      percentage: 'text-body-2'
    }
-  } else if (width < 450) {
+  } else if (width < 600) {
    return {
      title: 'text-h6',
      subtitle: 'text-body-2',
@@ -97,9 +104,9 @@ const textSizes = computed(() => {
    }
  } else {
    return {
-      title: display.md.value ? 'text-h5' : 'text-h4',
+      title: 'text-h5',
      subtitle: 'text-body-1',
-      mainNumber: display.lg.value ? 'text-h2' : 'text-h3',
+      mainNumber: 'text-h3',
      percentage: 'text-body-1'
    }
  }
@@ -108,12 +115,10 @@ const textSizes = computed(() => {
 const chartOptions = computed(() => {
  const currentTheme = vuetifyTheme.current.value.colors
  const variableTheme = vuetifyTheme.current.value.variables
-  const width = cardWidth.value || 300
-
-  const defaultDonutColors = [
-    currentTheme.success,
-  ]
+  const width = cardWidth.value
+  const chartSizeValue = chartSize.value.width

+  const defaultDonutColors = [currentTheme.success]
  const usedDonutColors = props.donutColors.length
    ? processColors(props.donutColors)
    : defaultDonutColors
@@ -121,63 +126,50 @@ const chartOptions = computed(() => {
  const headingColor = `rgba(${hexToRgb(currentTheme['on-background'])},${variableTheme['high-emphasis-opacity']})`
  const backgroundCircleColor = `rgba(${hexToRgb(usedDonutColors[0])}, 0.15)`

-  const chartSizeValue = chartSize.value.width
-  const valueFontSize = width < 250 ? '1.1rem' :
-                       width < 350 ? '1.3rem' :
-                       width < 450 ? '1.5rem' :
-                       chartSizeValue < 160 ? '1.3rem' :
-                       chartSizeValue < 200 ? '1.6rem' :
-                       chartSizeValue < 250 ? '1.8rem' : '2rem'
+  const valueFontSize = chartSizeValue < 120 ? '0.9rem' :
+                       chartSizeValue < 160 ? '1.2rem' :
+                       chartSizeValue < 200 ? '1.4rem' : '1.6rem'
                       
-  const labelFontSize = width < 250 ? '0.8rem' :
-                       width < 350 ? '0.9rem' :
-                       chartSizeValue < 160 ? '0.9rem' :
-                       chartSizeValue < 200 ? '1rem' : '1.1rem'
+  const labelFontSize = chartSizeValue < 120 ? '0.7rem' :
+                       chartSizeValue < 160 ? '0.8rem' :
+                       chartSizeValue < 200 ? '0.9rem' : '1rem'

-  const donutSize = width < 300 ? '65%' :
-                   width < 400 ? '70%' :
-                   chartSizeValue < 180 ? '70%' :
-                   chartSizeValue < 220 ? '75%' : '80%'
+  const donutSize = chartSizeValue < 130 ? '60%' :
+                   chartSizeValue < 180 ? '65%' : '70%'

  return {
    chart: {
      parentHeightOffset: 0,
      type: 'donut',
-      sparkline: {
-        enabled: false
-      },
+      sparkline: { enabled: false },
+      animations: {
+        enabled: true,
+        easing: 'easeinout',
+        speed: 800,
+        dynamicAnimation: {
+          enabled: true,
+          speed: 350
+        }
+      }
    },
    labels: ['Progress', 'Remaining'],
    colors: [...usedDonutColors, backgroundCircleColor],
-    stroke: {
-      width: 0
-    },
-    dataLabels: {
-      enabled: false
-    },
-    legend: {
-      show: false
-    },
+    stroke: { width: 0 },
+    dataLabels: { enabled: false },
+    legend: { show: false },
    tooltip: {
      enabled: true,
-      theme: 'dark',
+      theme: vuetifyTheme.current.value.dark ? 'dark' : 'light',
      style: {
-        fontSize: width < 300 ? '12px' : '14px'
+        fontSize: chartSizeValue < 140 ? '11px' : '13px'
      }
    },
    grid: {
-      padding: {
-        top: 0,
-        bottom: 0,
-        right: 0,
-        left: 0,
-      },
+      padding: { top: 0, bottom: 0, right: 0, left: 0 }
    },
    states: {
      hover: {
-        filter: {
-          type: 'none'
-        }
+        filter: { type: 'none' }
      }
    },
    plotOptions: {
@@ -195,14 +187,12 @@ const chartOptions = computed(() => {
              fontFamily: 'Public Sans',
              color: headingColor,
              fontWeight: 600,
-              offsetY: chartSizeValue < 140 ? -2 : 0,
+              offsetY: chartSizeValue < 130 ? -1 : 0,
              formatter(val) {
                return `${Math.round(val)}%`
              },
            },
-            name: {
-              show: false
-            },
+            name: { show: false },
            total: {
              show: true,
              showAlways: true,
@@ -219,114 +209,12 @@ const chartOptions = computed(() => {
        },
      },
    },
-    responsive: [
-      {
-        breakpoint: 280,
-        options: {
-          chart: {
-            width: 120,
-            height: 120
-          },
-          plotOptions: {
-            pie: {
-              donut: {
-                size: '65%',
-                labels: {
-                  value: {
-                    fontSize: '1.1rem',
-                    offsetY: -2
-                  },
-                  total: {
-                    fontSize: '0.8rem'
-                  }
-                }
-              }
-            }
-          }
-        }
-      },
-      {
-        breakpoint: 400,
-        options: {
-          chart: {
-            width: 150,
-            height: 150
-          },
-          plotOptions: {
-            pie: {
-              donut: {
-                size: '70%',
-                labels: {
-                  value: {
-                    fontSize: '1.3rem',
-                    offsetY: -1
-                  },
-                  total: {
-                    fontSize: '0.9rem'
-                  }
-                }
-              }
-            }
-          }
-        }
-      },
-      {
-        breakpoint: 600,
-        options: {
-          chart: {
-            width: 180,
-            height: 180
-          },
-          plotOptions: {
-            pie: {
-              donut: {
-                size: '75%',
-                labels: {
-                  value: {
-                    fontSize: '1.5rem'
-                  },
-                  total: {
-                    fontSize: '1rem'
-                  }
-                }
-              }
-            }
-          }
-        }
-      },
-      {
-        breakpoint: 1024,
-        options: {
-          chart: {
-            width: 240,
-            height: 240
-          },
-          plotOptions: {
-            pie: {
-              donut: {
-                size: '80%',
-                labels: {
-                  value: {
-                    fontSize: '1.8rem'
-                  },
-                  total: {
-                    fontSize: '1.1rem'
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    ]
+    responsive: []
  }
 })

 const cardBackgroundStyle = computed(() => {
-  const defaultDonutColors = [
-    vuetifyTheme.current.value.colors.success,
-  ]
-
+  const defaultDonutColors = [vuetifyTheme.current.value.colors.success]
  const colors = props.donutColors.length ? processColors(props.donutColors) : defaultDonutColors

  const createGradientColor = (color, opacity = 0.08) => {
@@ -343,33 +231,32 @@ const cardBackgroundStyle = computed(() => {
  }

  const gradientColors = colors.map((color, index) =>
-    createGradientColor(color, index === 0 ? 0.12 : 0.04)
+    createGradientColor(color, index === 0 ? 0.1 : 0.03)
  )

  return {
    background: `linear-gradient(135deg, 
      ${gradientColors[0]} 0%, 
-      ${gradientColors[1] || gradientColors[0]} 50%,
-      ${gradientColors[2] || gradientColors[0]} 100%)`
+      ${gradientColors[1] || createGradientColor(colors[0], 0.05)} 50%,
+      ${gradientColors[2] || createGradientColor(colors[0], 0.02)} 100%)`
  }
 })

 const layoutClasses = computed(() => {
-  const width = cardWidth.value || 300
+  const width = cardWidth.value
  
  return {
-    cardText: width < 250 ? 'pa-2' :
-             width < 350 ? 'pa-3' :
-             width < 500 ? 'pa-4' : 'pa-5',
-    textSection: width < 250 ? 'me-2' :
-                width < 350 ? 'me-3' :
-                width < 500 ? 'me-4' : 'me-5',
-    chartSection: 'flex-shrink-0',
-    iconSize: width < 250 ? 12 :
-             width < 350 ? 14 :
-             width < 500 ? 16 : 18,
-    spacing: width < 300 ? 'mb-2' :
-            width < 450 ? 'mb-3' : 'mb-4'
+    cardPadding: display.xs.value ? 'pa-3' :
+                display.sm.value ? 'pa-4' :
+                width < 400 ? 'pa-4' : 'pa-5',
+    textSpacing: display.xs.value ? 'me-2' :
+                display.sm.value ? 'me-3' :
+                width < 400 ? 'me-3' : 'me-4',
+    iconSize: display.xs.value ? 14 :
+             display.sm.value ? 16 :
+             width < 400 ? 16 : 18,
+    itemSpacing: display.xs.value ? 'mb-2' :
+                width < 400 ? 'mb-3' : 'mb-3'
  }
 })
 </script>
@@ -382,22 +269,23 @@ const layoutClasses = computed(() => {
  >
    <VCardText 
      class="d-flex align-center justify-space-between"
-      :class="layoutClasses.cardText"
+      :class="layoutClasses.cardPadding"
    >
      <div 
-        class="d-flex flex-column flex-grow-1"
-        :class="layoutClasses.textSection"
+        class="d-flex flex-column flex-grow-1 flex-shrink-1"
+        :class="layoutClasses.textSpacing"
+        style="min-width: 0;"
      >
-        <div :class="layoutClasses.spacing">
+        <div :class="layoutClasses.itemSpacing">
          <h5 
-            class="text-no-wrap font-weight-medium" 
+            class="text-no-wrap font-weight-medium text-truncate" 
            :class="textSizes.title"
            style="line-height: 1.2;"
          >
            Generated Leads
          </h5>
          <div 
-            class="text-medium-emphasis" 
+            class="text-medium-emphasis text-truncate" 
            :class="textSizes.subtitle"
            style="line-height: 1.1;"
          >
@@ -408,7 +296,7 @@ const layoutClasses = computed(() => {
        <div>
          <h3 
            class="font-weight-bold" 
-            :class="[textSizes.mainNumber, layoutClasses.spacing]"
+            :class="[textSizes.mainNumber, layoutClasses.itemSpacing]"
            style="line-height: 1.1;"
          >
            4,350
@@ -418,10 +306,10 @@ const layoutClasses = computed(() => {
              icon="tabler-chevron-up"
              :color="(props.donutColors.length ? processColors(props.donutColors) : [vuetifyTheme.current.value.colors.success])[0]"
              :size="layoutClasses.iconSize"
-              class="me-1"
+              class="me-1 flex-shrink-0"
            />
            <span 
-              class="font-weight-medium"
+              class="font-weight-medium text-no-wrap"
              :class="textSizes.percentage"
              :style="{ color: (props.donutColors.length ? processColors(props.donutColors) : [vuetifyTheme.current.value.colors.success])[0] }"
            >
@@ -432,8 +320,7 @@ const layoutClasses = computed(() => {
      </div>
      
      <div 
-        class="d-flex align-center justify-center" 
-        :class="layoutClasses.chartSection"
+        class="d-flex align-center justify-center flex-shrink-0" 
      >
        <VueApexCharts
          :options="chartOptions"
@@ -444,4 +331,4 @@ const layoutClasses = computed(() => {
      </div>
    </VCardText>
  </VCard>
-</template>
+</template>
--- a/resources/styles/gantt-chart.scss
+++ b/resources/styles/gantt-chart.scss
@@ -442,6 +442,11 @@
  margin-right: 6px;
  opacity: 0.6;
  color: rgb(var(--v-theme-on-surface));
+  transition: transform 0.2s ease;
+}
+
+.gantt_tree_icon:hover {
+  transform: scale(1.1);
 }

 .gantt_task_line.completed-task {
@@ -449,6 +454,11 @@
  border: 1px solid rgba(var(--v-theme-success), 0.8);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(var(--v-theme-success), 0.3);
+  transition: transform 0.2s ease;
+}
+
+.gantt_task_line.completed-task:hover {
+  transform: translateY(-1px);
 }

 .gantt_task_line.high-progress-task {
@@ -456,6 +466,11 @@
  border: 1px solid rgba(var(--v-theme-primary), 0.8);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(var(--v-theme-primary), 0.3);
+  transition: transform 0.2s ease;
+}
+
+.gantt_task_line.high-progress-task:hover {
+  transform: translateY(-1px);
 }

 .gantt_task_line.medium-progress-task {
@@ -463,6 +478,11 @@
  border: 1px solid rgba(var(--v-theme-warning), 0.8);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(var(--v-theme-warning), 0.3);
+  transition: transform 0.2s ease;
+}
+
+.gantt_task_line.medium-progress-task:hover {
+  transform: translateY(-1px);
 }

 .gantt_task_line.low-progress-task {
@@ -470,6 +490,11 @@
  border: 1px solid rgba(var(--v-theme-error), 0.8);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(var(--v-theme-error), 0.3);
+  transition: transform 0.2s ease;
+}
+
+.gantt_task_line.low-progress-task:hover {
+  transform: translateY(-1px);
 }

 .summary-row {
@@ -520,6 +545,7 @@

 .gantt_grid_data .gantt_row {
  background: rgb(var(--v-theme-surface));
+  transition: background-color 0.2s ease;
 }

 .gantt_grid_data .gantt_row.gantt_row_odd {
@@ -622,7 +648,7 @@
  padding: 8px 10px;
  cursor: pointer;
  color: rgb(var(--v-theme-on-surface));
-  transition: background-color 0.1s ease;
+  transition: all 0.1s ease;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
@@ -631,6 +657,7 @@

 .context-menu-item:hover {
  background: rgba(var(--v-theme-primary), 0.1);
+  transform: translateX(2px);
 }

 .context-menu-item:active {
@@ -745,7 +772,7 @@
 .gantt_task_scale .gantt_scale_cell {
  background: rgb(var(--v-theme-surface)) !important;
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
-  border-color: rgba(var(--v-border-color), var(--v-border-opacity)) !important;
+  border-color: rgba(var(--v-theme-on-surface), 0.08) !important;
 }

 .gantt_bars_area {
@@ -769,4 +796,80 @@

 .gantt_task_link .gantt_link_arrow:before {
  border-color: rgba(var(--v-theme-on-surface), 0.4) !important;
+}
+
+.gantt_modal_box {
+  background: rgb(var(--v-theme-surface));
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: rgb(var(--v-theme-on-surface));
+  animation: modalSlideIn 0.3s ease;
+  overflow: hidden;
+}
+
+.gantt_popup_text {
+  padding: 24px;
+  font-size: 15px;
+  line-height: 1.5;
+  color: rgb(var(--v-theme-on-surface));
+  background: rgb(var(--v-theme-surface));
+}
+
+.gantt_popup_controls {
+  padding: 16px 24px;
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  background: rgb(var(--v-theme-surface));
+  border-top: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.gantt_popup_button {
+  display: inline-flex;
+  align-items: center;
+  padding: 10px 16px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  user-select: none;
+  outline: none;
+}
+
+.gantt_ok_button {
+  background: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+  box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
+}
+
+.gantt_ok_button:hover {
+  background: rgba(var(--v-theme-primary), 0.8);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(var(--v-theme-primary), 0.4);
+}
+
+.gantt_cancel_button {
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  color: rgb(var(--v-theme-on-surface));
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+}
+
+.gantt_cancel_button:hover {
+  background: rgba(var(--v-theme-on-surface), 0.1);
+  border-color: rgba(var(--v-border-color), 0.5);
+  transform: translateY(-1px);
+}
+
+.gantt-alert {
+  min-width: 400px;
+  max-width: 500px;
+}
+
+.gantt_popup_button:focus {
+  outline: 2px solid rgba(var(--v-theme-primary), 0.3);
+  outline-offset: 2px;
 }
--- a/resources/styles/overview.scss
+++ b/resources/styles/overview.scss
@@ -0,0 +1,294 @@
+.grid-stack-container {
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.grid-stack-container.edit-mode-active {
+  padding: 1rem;
+  background: rgba(var(--v-theme-surface), 0.5);
+  border-radius: 12px;
+}
+
+.grid-stack-item {
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.grid-stack-item.edit-mode {
+  cursor: move;
+}
+
+.grid-stack-item.edit-mode:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.grid-stack-item.edit-mode .grid-stack-item-content {
+  border-radius: 8px;
+}
+
+.grid-stack-item-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+
+.grid-stack-item-content > * {
+  flex: 1;
+  margin-bottom: 3.2rem;
+}
+
+.grid-stack-item:has(AgGridTable) {
+  height: 100vh !important;
+}
+
+.grid-stack-item:has(AgGridTable) .grid-stack-item-content {
+  height: 100vh;
+}
+
+.edit-mode-banner {
+  position: relative;
+  margin: 0 0 2rem 0;
+  border-radius: 20px;
+  overflow: hidden;
+  background: linear-gradient(135deg,
+      rgba(var(--v-theme-primary), 0.9) 0%,
+      rgba(var(--v-theme-secondary), 0.8) 50%,
+      rgba(var(--v-theme-accent), 0.9) 100%);
+  box-shadow: 0 8px 32px rgba(var(--v-theme-primary), 0.3),
+    0 2px 8px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.banner-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.banner-glow {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle,
+      rgba(255, 255, 255, 0.1) 0%,
+      transparent 70%);
+}
+
+.banner-particles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: radial-gradient(2px 2px at 20% 30%,
+      rgba(255, 255, 255, 0.3),
+      transparent),
+    radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.2), transparent),
+    radial-gradient(1px 1px at 90% 40%, rgba(255, 255, 255, 0.3), transparent),
+    radial-gradient(2px 2px at 40% 80%, rgba(255, 255, 255, 0.2), transparent);
+  background-size: 200px 200px, 150px 150px, 100px 100px, 250px 250px;
+}
+
+.banner-content {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem 2rem;
+  gap: 1.5rem;
+}
+
+.banner-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+}
+
+.banner-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.edit-icon {
+  color: white;
+  z-index: 2;
+}
+
+.icon-pulse {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.banner-text {
+  flex: 1;
+}
+
+.banner-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: white;
+  margin: 0 0 0.25rem 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  letter-spacing: -0.5px;
+}
+
+.banner-subtitle {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.85);
+  margin: 0;
+  line-height: 1.4;
+  font-weight: 400;
+}
+
+.banner-decorations {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.decoration {
+  position: absolute;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.decoration-1 {
+  width: 80px;
+  height: 80px;
+  top: -40px;
+  right: 10%;
+}
+
+.decoration-2 {
+  width: 60px;
+  height: 60px;
+  bottom: -30px;
+  left: 15%;
+}
+
+.decoration-3 {
+  width: 40px;
+  height: 40px;
+  top: 50%;
+  right: 5%;
+}
+
+.drag-handle {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 20;
+  cursor: grab;
+  padding: 6px;
+  border-radius: 50%;
+  background: rgba(var(--v-theme-primary), 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  color: white;
+}
+
+.drag-handle:hover {
+  background: rgba(var(--v-theme-primary), 1);
+  transform: scale(1.1);
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+  transform: scale(0.95);
+}
+
+.delete-btn-chart {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 5;
+  opacity: 1 !important;
+  background: #dc2626 !important;
+  color: white !important;
+  border-radius: 6px !important;
+  padding: 4px 8px !important;
+  font-size: 12px !important;
+  min-width: auto !important;
+  height: 28px !important;
+  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
+  transition: all 0.2s ease;
+  backdrop-filter: blur(10px);
+}
+
+.delete-btn-chart:hover {
+  background: #b91c1c !important;
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.4);
+}
+
+.delete-btn-chart:active {
+  transform: scale(0.95);
+}
+
+.edit-mode:hover .drag-handle {
+  opacity: 1;
+}
+
+@media (max-width: 768px) {
+  .banner-content {
+    flex-direction: column;
+    text-align: center;
+    gap: 1rem;
+    padding: 1.25rem 1rem;
+  }
+
+  .banner-header {
+    flex-direction: column;
+    text-align: center;
+    gap: 0.75rem;
+  }
+
+  .banner-title {
+    font-size: 1.2rem;
+  }
+
+  .banner-subtitle {
+    font-size: 0.85rem;
+  }
+
+  .edit-mode .drag-handle {
+    opacity: 0.7;
+  }
+
+  .delete-btn-chart {
+    font-size: 11px !important;
+    padding: 3px 6px !important;
+    height: 24px !important;
+  }
+}