create page growth report

resources/js/report/growth-report/index.js

@@ -0,0 +1,94 @@
+import ApexCharts from "apexcharts";
+
+class GrowthReport {
+    init() {
+        this.loadChart();
+    }
+
+    async loadChart() {
+        try {
+            const chartElement = document.getElementById("chart-growth-report");
+            const apiUrl = chartElement.dataset.url;
+
+            const token = document
+                .querySelector('meta[name="api-token"]')
+                .getAttribute("content");
+
+            const response = await fetch(apiUrl, {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    Accept: "application/json",
+                },
+            });
+
+            const data = await response.json();
+
+            console.log("data", data);
+
+            const categories = data.map((item) => item.date);
+
+            const potentionSeries = {
+                name: "Potensi Berkas",
+                data: data.map((item) => item.potention_sum),
+            };
+
+            const verifiedSeries = {
+                name: "Terverifikasi",
+                data: data.map((item) => item.verified_sum),
+            };
+
+            const nonVerifiedSeries = {
+                name: "Belum Terverifikasi",
+                data: data.map((item) => item.non_verified_sum),
+            };
+
+            const options = {
+                chart: {
+                    type: "bar",
+                    height: 350,
+                },
+                title: {
+                    text: "Grafik Pertumbuhan",
+                },
+                dataLabels: {
+                    enabled: false,
+                },
+                legend: {
+                    show: true,
+                },
+                xaxis: {
+                    categories: categories,
+                },
+                yaxis: {
+                    title: {
+                        text: "Total SUM Per Date",
+                    },
+                    labels: {
+                        formatter: function (value) {
+                            return "Rp. " + value.toLocaleString("id-ID");
+                        },
+                    },
+                },
+                noData: {
+                    text: "Data tidak tersedia",
+                    align: "center",
+                    verticalAlign: "middle",
+                    style: {
+                        color: "#999",
+                        fontSize: "16px",
+                    },
+                },
+                series: [potentionSeries, verifiedSeries, nonVerifiedSeries],
+            };
+
+            const chart = new ApexCharts(chartElement, options);
+            chart.render();
+        } catch (error) {
+            console.error("Failed to load growth report data:", error);
+        }
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    new GrowthReport().init();
+});

resources/views/report/growth-report/index.blade.php

@@ -0,0 +1,21 @@
+@extends('layouts.vertical', ['subtitle' => 'Laporan Pertumbuhan'])
+
+@section('css')
+@endsection
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Laporan', 'subtitle' => 'Laporan Pertumbuhan'])
+
+<div class="card">
+    <div class="card-body">
+        <div class="row">
+            <div id="chart-growth-report" data-url="{{ route('api.growth') }}"></div>
+        </div>
+    </div>
+</div>
+
+@endsection
+
+@section('scripts')
+@vite(['resources/js/report/growth-report/index.js'])
+@endsection