Initial commit

resources/js/pages/dashboards/demo.vue

@@ -0,0 +1,97 @@
+<script setup>
+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'
+
+onMounted(async () => {
+  const grid = GridStack.init({
+    column: 12,
+    cellHeight: 50,
+    float: true,
+    draggable: { handle: '.grid-stack-item-content' },
+    resizable: true
+  })
+
+  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-content">
+        <EcommerceCongratulationsJohn />
+      </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-content">
+        <EcommerceStatistics />
+      </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-content">
+        <EcommerceTotalProfitLineCharts />
+      </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-content">
+        <EcommerceExpensesRadialBarCharts />
+      </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-content">
+        <EcommerceGeneratedLeads />
+      </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-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 />
+      </div>
+    </div>
+  </div>
+</template>