fix: adjust component sizes on demo page

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