feat:add some new future

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>