fix: adjust component sizes on demo page

package-lock.json

@@ -39,6 +39,8 @@
         "eslint-plugin-regexp": "2.7.0",
         "file-saver": "^2.0.5",
         "gridstack": "^12.2.1",
+        "highcharts": "^12.3.0",
+        "highcharts-vue": "^2.0.1",
         "jspdf": "^3.0.1",
         "jspdf-autotable": "^5.0.2",
         "jwt-decode": "4.0.0",
@@ -9065,6 +9067,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/highcharts": {
+      "version": "12.3.0",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-12.3.0.tgz",
+      "integrity": "sha512-QIKmaemgheRa1K2Ia9MLj1KLtBU1Tu/VQ6KAMqtMBMsAC4NzcFq6g96LF03ZO3IFFiSifmZx8ItEyRcz4w75cg==",
+      "license": "https://www.highcharts.com/license"
+    },
+    "node_modules/highcharts-vue": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/highcharts-vue/-/highcharts-vue-2.0.1.tgz",
+      "integrity": "sha512-7yVaKvsWlx7OgmKFXE2D99fi/0tr2A85H4KUz3jL7CRQhAwvEvXgtDIyTBGLHJsOC5L9VlppAI7k6KfIi0j0hg==",
+      "license": "SEE LICENSE IN LICENSE",
+      "peerDependencies": {
+        "highcharts": ">=5.0.0",
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",

package.json

@@ -42,6 +42,8 @@
     "eslint-plugin-regexp": "2.7.0",
     "file-saver": "^2.0.5",
     "gridstack": "^12.2.1",
+    "highcharts": "^12.3.0",
+    "highcharts-vue": "^2.0.1",
     "jspdf": "^3.0.1",
     "jspdf-autotable": "^5.0.2",
     "jwt-decode": "4.0.0",

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 ProjectActivityBarChart from "@/components/ProjectActivityBarChart.vue";
-import EcommerceEarningReports from '@/views/dashboards/ecommerce/EcommerceEarningReports.vue'
+import AnalysisCard from "@/components/AnalysisCard.vue";
-import EcommerceExpensesRadialBarCharts from '@/views/dashboards/ecommerce/EcommerceExpensesRadialBarCharts.vue'
+import CostOverview from "@/components/CostOverview.vue";
-import EcommerceGeneratedLeads from '@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue'
+import GeneratedLeadsCard from "@/views/dashboards/ecommerce/EcommerceGeneratedLeads.vue";
-import EcommerceInvoiceTable from '@/views/dashboards/ecommerce/EcommerceInvoiceTable.vue'
+import GanttChart from './gantt.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'
 
 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-min-w="4" gs-h="2" gs-max-h="2">
-    <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-content">
-        <EcommerceStatistics />
+        <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" gs-w="7" gs-h="3" gs-max-h="3" gs-x="0" gs-y="4">
       <div class="grid-stack-item-content">
-        <EcommerceTotalProfitLineCharts />
+        <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" gs-w="5" gs-h="3" gs-max-h="3" gs-x="7" gs-y="4">
       <div class="grid-stack-item-content">
-        <EcommerceExpensesRadialBarCharts />
+        <ProjectActivityBarChart />
       </div>
     </div>
-
+    <div class="grid-stack-item" gs-w="4" gs-h="7" gs-max-h="7">
-    <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-content">
-        <EcommerceGeneratedLeads />
+        <AnalysisCard />
       </div>
     </div>
-
+    <div class="grid-stack-item" gs-w="12" gs-h="8" gs-max-h="8">
-    <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-content">
-        <EcommerceRevenueReport />
+        <GanttChart />
-      </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 />
       </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>