fix:gantt chart styles

resources/js/pages/dashboards/demo.vue

@@ -8,25 +8,55 @@ 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';
 
-const ganttColumns = ref([
-  { field: 'id', headerName: 'ID', sortable: true, filter: true, width: 80 },
-  { field: 'todo', headerName: 'Task', sortable: true, filter: true, flex: 1 },
-  { field: 'userId', headerName: 'User ID', sortable: true, filter: true, width: 100 },
-  {
-    field: 'completed', headerName: 'Status', sortable: true, filter: true, width: 120, cellRenderer: (params) => {
-      return params.value ? '<span style="color: green; font-weight: bold;">✓ Completed</span>' : '<span style="color: orange; font-weight: bold;">⏳ Pending</span>'
+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
     }
-  }
-])
+
+    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>'
+      }
+    }
+
+    if (key === 'userId') {
+      column.width = 100
+      column.flex = undefined
+    }
+
+    return column
+  })
+  
+  return columns
+}
 
 const processAPIData = (response) => {
-  return response.todos || response
+  const data = response.todos || response
+  ganttColumns.value = generateColumnsFromData(data)
+  return data
 }
 
 onMounted(async () => {
   const grid = GridStack.init({
     column: 12,
-    cellHeight: '110',
+    cellHeight: '105',
     float: true,
     draggable: { handle: '.grid-stack-item-content' },
     resizable: true,
@@ -39,7 +69,7 @@ onMounted(async () => {
 
 <template>
   <div class="grid-stack">
-    <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-min-h="2" gs-max-h="2">
       <div class="grid-stack-item-content">
         <GeneratedLeadsCard :progress="32" />
       </div>
@@ -64,12 +94,11 @@ onMounted(async () => {
         <AnalysisCard />
       </div>
     </div>
-    <div class="grid-stack-item" gs-w="12" gs-h="4" gs-max-h="8">
+    <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>
     </div>
   </div>