feat: admin index page & charts

src/package.json

@@ -14,8 +14,10 @@
     "dependencies": {
         "@inertiajs/vue3": "^1.0.14",
         "@vitejs/plugin-vue": "^4.5.0",
+        "apexcharts": "^3.45.1",
         "pinia": "^2.1.7",
         "vue": "^3.3.8",
-        "vue-toastification": "^2.0.0-rc.5"
+        "vue-toastification": "^2.0.0-rc.5",
+        "vue3-apexcharts": "^1.4.4"
     }
 }

src/resources/js/app.js

@@ -6,6 +6,7 @@ import ToastPlugin from "vue-toastification";
 import "vue-toastification/dist/index.css";
 import '../vue/scss/global.scss'
 import '../vue/scss/variables.scss'
+import VueApexCharts from "vue3-apexcharts";
 
 createInertiaApp({
   resolve: name => {
@@ -17,6 +18,7 @@ createInertiaApp({
       .use(plugin)
       .use(createPinia())
       .use(ToastPlugin)
+      .use(VueApexCharts)
       .mount(el)
   },
 })

src/resources/vue/pages/admin/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <h1>bob</h1>
+    <div class="charts">
+        <apexchart
+          width="500"
+          type="bar"
+          :options="options"
+          :series="series"
+        ></apexchart>
+        <apexchart
+          width="500"
+          type="bar"
+          :options="options"
+          :series="series"
+        ></apexchart>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Admin",
+  data: function () {
+    return {
+      options: {
+        chart: {
+          id: "vuechart-example",
+        },
+        xaxis: {
+          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
+        },
+      },
+      series: [
+        {
+          name: "series-1",
+          data: [30, 40, 45, 50, 49, 60, 70, 91],
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style>
+.charts {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+</style>