panel/resources/js/pages/dashboards/demo.vue

<script setup>
import { onMounted, nextTick, ref } 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';

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 processAPIData = (response) => {
  return response.todos || response
}

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

  await nextTick()
})
</script>

<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-content">
        <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-content">
        <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-content">
        <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-content">
        <ProjectActivityBarChart />
      </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>
    </div>
    <div class="grid-stack-item" gs-w="12" gs-h="4" gs-max-h="8">
      <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>
</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>