diff --git a/app/Http/Controllers/Api/DashboardController.php b/app/Http/Controllers/Api/DashboardController.php
index d3771c5..2abb2ad 100644
--- a/app/Http/Controllers/Api/DashboardController.php
+++ b/app/Http/Controllers/Api/DashboardController.php
@@ -19,8 +19,7 @@ class DashboardController extends Controller
                 DB::raw('SUM(pbg_task_retributions.nilai_retribusi_bangunan) as total_retribution')
             )
             ->where(function ($query) {
-                $query->where("pbg_task.function_type", "NOT LIKE", "sebagai tempat usaha%")
-                    ->orWhereNull("pbg_task.function_type");
+                $query->where("pbg_task.function_type", "LIKE", "sebagai tempat usaha%");
             })
             ->first();
         $taskCount = $businessData->task_count;
@@ -40,7 +39,8 @@ class DashboardController extends Controller
                 DB::raw('SUM(pbg_task_retributions.nilai_retribusi_bangunan) as total_retribution')
             )
             ->where(function ($query) {
-                $query->where("pbg_task.function_type", "LIKE", "sebagai tempat usaha%");
+                $query->where("pbg_task.function_type", "NOT LIKE", "sebagai tempat usaha%")
+                ->orWhereNull("pbg_task.function_type");
             })
             ->first();
         $taskCount = $businessData->task_count;
diff --git a/package-lock.json b/package-lock.json
index 96d3a4a..6037de1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "dashboard-pupr",
+  "name": "Darkone-Laravel",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
diff --git a/resources/js/dashboards/bigdata.js b/resources/js/dashboards/bigdata.js
index 4ea6c11..89fa7c6 100644
--- a/resources/js/dashboards/bigdata.js
+++ b/resources/js/dashboards/bigdata.js
@@ -1,116 +1,74 @@
 import ApexCharts from "apexcharts";
 
-import "jsvectormap/dist/maps/world-merc.js";
-import "jsvectormap/dist/maps/world.js";
 import GlobalConfig, { addThousandSeparators } from "../global-config.js";
 
 class BigData {
-    init() {
-        this.initChartTargetPAD();
-        this.initChartUsaha();
-        this.initChartNonUsaha();
-        this.initChartStatus1();
-        this.initChartStatus2();
-        this.initChartStatus3();
-        this.initChartStatus4();
-        this.initChartStatus5();
-        this.initChartStatus6();
-        this.initChartStatus7();
-        this.initChartStatus20();
-        this.initChartStatus24();
+    async init() {
+        try{
+            this.resultDataTotal = await this.getTotalAllTask();
+
+            if (!this.resultDataTotal) {
+                console.error("Failed to load chart data");
+                return;
+            }
+
+            this.initChartTargetPAD();
+            this.initChartUsaha();
+            this.initChartNonUsaha();
+            this.initChartStatus1();
+            this.initChartStatus2();
+            this.initChartStatus3();
+            this.initChartStatus4();
+            this.initChartStatus5();
+            this.initChartStatus6();
+            this.initChartStatus7();
+            this.initChartStatus20();
+            this.initChartStatus24();
+        }catch(e){
+            console.error(e);
+        }
+    }
+
+    async getTotalAllTask() {
+        try {
+            const response = await fetch(`${GlobalConfig.apiHost}/api/all-task-documents`, {
+                credentials: "include",
+                headers: {
+                    Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
+                    "Content-Type": "application/json",
+                },
+            });
+    
+            if (!response.ok) {
+                console.error("Network response was not ok", response);
+            }
+    
+            const data = await response.json();
+            return {
+                seriesData: data.data.series,
+                countData: data.data.count,
+                totalData: data.data.total
+            };
+    
+        } catch (error) {
+            console.error("Error fetching chart data:", error);
+            return null; // Mengembalikan null jika terjadi error
+        }
     }
 
     initChartTargetPAD() {
-        fetch(`${GlobalConfig.apiHost}/api/all-task-documents`, {
-            credentials: "include",
-            headers: {
-                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
-                "Content-Type": "application/json",
-            },
-        })
-        .then((response) => {
-            if (!response.ok) {
-                throw new Error("Network response was not ok");
-            }
-            return response.json();
-        })
-        .then((data) => {
-            const seriesData = data.data.series;
-            document.querySelectorAll('.document-count.chart-all-task').forEach((element) => {
-                element.innerText = `${data.data.count}`;
-            });
-            document.querySelectorAll('.document-total.chart-all-task').forEach((element) => {
-                element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            });
-            document.getElementById(
-                "totalTargetPAD"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            document.getElementById(
-                "countTargetPAD"
-            ).innerText = `${data.data.count} Berkas`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
-
-            new ApexCharts(
-                document.querySelector("#chart12"),
-                options1
-            ).render();
-        })
-        .catch((error) => {
-            console.error("error fetching chart dara : ", error);
+        const total = this.resultDataTotal.totalData;
+        const count = this.resultDataTotal.countData;
+        document.querySelectorAll('.document-count.chart-all-task').forEach((element) => {
+            element.innerText = `${count}`;
+        });
+        document.querySelectorAll('.document-total.chart-all-task').forEach((element) => {
+            element.innerText = `Rp.${addThousandSeparators(total)}`;
+        });
+        document.querySelectorAll('.small-percentage.chart-all-task').forEach((element) => {
+            element.innerText = `${100}%`;
         });
     }
-
     initChartUsaha() {
         fetch(`${GlobalConfig.apiHost}/api/business-documents`,{
             credentials: "include",
@@ -126,82 +84,39 @@ class BigData {
             return response.json();
         })
         .then((data) => {
-            const seriesData = data.data.series;
-            document.querySelectorAll('.document-count.chart-non-business').forEach((element) => {
-                element.innerText = `${data.data.count}`;
-            });
-            document.querySelectorAll('.document-total.chart-non-business').forEach((element) => {
-                element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            });
-            document.getElementById(
-                "countBusinessDocuments"
-            ).innerText = `${data.data.count} Berkas`;
-            document.getElementById(
-                "totalBusinessDocuments"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
+            // Pastikan this.resultDataTotal sudah ada
+            if (!this.resultDataTotal) {
+                console.error("Error: resultDataTotal is undefined");
+                return;
+            }
 
-            new ApexCharts(
-                document.querySelector("#chartBusinessDocuments"),
-                options1
-            ).render();
+            const totalAll = this.resultDataTotal.totalData ?? 0;
+            const countAll = this.resultDataTotal.countData ?? 0;
+            const countUsaha = data?.data?.count ?? 0;
+            const totalUsaha = data?.data?.total ?? 0;
+
+            // Perbaikan perhitungan persentase
+            let resultPercentage = 0;
+            if (countUsaha > 0) {
+                resultPercentage = (countUsaha / countAll) * 100;
+                if (resultPercentage > 100) {
+                    resultPercentage = 100; // Batasi maksimum 100%
+                }
+            }
+            document.querySelectorAll('.document-count.chart-business').forEach((element) => {
+                element.innerText = `${countUsaha}`;
+            });
+            document.querySelectorAll('.document-total.chart-business').forEach((element) => {
+                element.innerText = `Rp.${addThousandSeparators(totalUsaha)}`;
+            });
+            document.querySelectorAll('.small-percentage.chart-business').forEach((element) => {
+                element.innerText = `${resultPercentage.toFixed(2)}%`;
+            });
         })
         .catch((error) => {
             console.error("error fetching chart dara : ", error);
         });
     }
-
     initChartNonUsaha() {
         fetch(`${GlobalConfig.apiHost}/api/non-business-documents`, {
             credentials: "include",
@@ -217,82 +132,39 @@ class BigData {
             return response.json();
         })
         .then((data) => {
-            const seriesData = data.data.series;
-            document.querySelectorAll('.document-count.chart-business').forEach((element) => {
+            // Pastikan this.resultDataTotal sudah ada
+            if (!this.resultDataTotal) {
+                console.error("Error: resultDataTotal is undefined");
+                return;
+            }
+
+            const totalAll = this.resultDataTotal.totalData ?? 0;
+            const countAll = this.resultDataTotal.countData ?? 0;
+            const countUsaha = data?.data?.count ?? 0;
+            const totalUsaha = data?.data?.total ?? 0;
+
+            // Perbaikan perhitungan persentase
+            let resultPercentage = 0;
+            if (countUsaha > 0) {
+                resultPercentage = (countUsaha / countAll) * 100;
+                if (resultPercentage > 100) {
+                    resultPercentage = 100; // Batasi maksimum 100%
+                }
+            }
+            document.querySelectorAll('.document-count.chart-non-business').forEach((element) => {
                 element.innerText = `${data.data.count}`;
             });
-            document.querySelectorAll('.document-total.chart-business').forEach((element) => {
+            document.querySelectorAll('.document-total.chart-non-business').forEach((element) => {
                 element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
             });
-            document.getElementById(
-                "countNonUsaha"
-            ).innerText = `${data.data.count} Berkas`;
-            document.getElementById(
-                "totalNonUsaha"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
-
-            new ApexCharts(
-                document.querySelector("#chartNonUsaha"),
-                options1
-            ).render();
+            document.querySelectorAll('.small-percentage.chart-non-business').forEach((element) => {
+                element.innerText = `${resultPercentage.toFixed(2)}%`;
+            });
         })
         .catch((error) => {
             console.error("error fetching chart dara : ", error);
         });
     }
-
     initChartStatus1(){
         fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=1`, {
             credentials: "include",
@@ -309,75 +181,17 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
-            document.getElementById(
-                "countStatus1"
-            ).innerText = `${data.data.count} Berkas`;
-            document.getElementById(
-                "totalStatus1"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
-
-            new ApexCharts(
-                document.querySelector("#char-pbg-status-1"),
-                options1
-            ).render();
+            // document.getElementById(
+            //     "countStatus1"
+            // ).innerText = `${data.data.count} Berkas`;
+            // document.getElementById(
+            //     "totalStatus1"
+            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
         })
         .catch((error) => {
             console.error("error fetching chart dara : ", error);
         });
     }
-
     initChartStatus2(){
         fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=2`, {
             credentials: "include",
@@ -394,75 +208,17 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
-            document.getElementById(
-                "countStatus2"
-            ).innerText = `${data.data.count} Berkas`;
-            document.getElementById(
-                "totalStatus2"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
-
-            new ApexCharts(
-                document.querySelector("#chart-pbg-status-2"),
-                options1
-            ).render();
+            // document.getElementById(
+            //     "countStatus2"
+            // ).innerText = `${data.data.count} Berkas`;
+            // document.getElementById(
+            //     "totalStatus2"
+            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
         })
         .catch((error) => {
             console.error("error fetching chart dara : ", error);
         });
     }
-
     initChartStatus3(){
         fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=3`, {
             credentials: "include",
@@ -479,69 +235,12 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
-            document.getElementById(
-                "countStatus3"
-            ).innerText = `${data.data.count} Berkas`;
-            document.getElementById(
-                "totalStatus3"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
-
-            new ApexCharts(
-                document.querySelector("#chart-pbg-status-3"),
-                options1
-            ).render();
+            // document.getElementById(
+            //     "countStatus3"
+            // ).innerText = `${data.data.count} Berkas`;
+            // document.getElementById(
+            //     "totalStatus3"
+            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
         })
         .catch((error) => {
             console.error("error fetching chart dara : ", error);
@@ -563,69 +262,12 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
-            document.getElementById(
-                "countStatus4"
-            ).innerText = `${data.data.count} Berkas`;
-            document.getElementById(
-                "totalStatus4"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
-
-            new ApexCharts(
-                document.querySelector("#chart-pbg-status-4"),
-                options1
-            ).render();
+            // document.getElementById(
+            //     "countStatus4"
+            // ).innerText = `${data.data.count} Berkas`;
+            // document.getElementById(
+            //     "totalStatus4"
+            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
         })
         .catch((error) => {
             console.error("error fetching chart dara : ", error);
@@ -647,69 +289,12 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
-            document.getElementById(
-                "countStatus5"
-            ).innerText = `${data.data.count} Berkas`;
-            document.getElementById(
-                "totalStatus5"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
-
-            new ApexCharts(
-                document.querySelector("#chart-pbg-status-5"),
-                options1
-            ).render();
+            // document.getElementById(
+            //     "countStatus5"
+            // ).innerText = `${data.data.count} Berkas`;
+            // document.getElementById(
+            //     "totalStatus5"
+            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
         })
         .catch((error) => {
             console.error("error fetching chart dara : ", error);
@@ -731,69 +316,12 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
-            document.getElementById(
-                "countStatus6"
-            ).innerText = `${data.data.count} Berkas`;
-            document.getElementById(
-                "totalStatus6"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
-
-            new ApexCharts(
-                document.querySelector("#chart-pbg-status-6"),
-                options1
-            ).render();
+            // document.getElementById(
+            //     "countStatus6"
+            // ).innerText = `${data.data.count} Berkas`;
+            // document.getElementById(
+            //     "totalStatus6"
+            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
         })
         .catch((error) => {
             console.error("error fetching chart dara : ", error);
@@ -815,69 +343,12 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
-            document.getElementById(
-                "countStatus7"
-            ).innerText = `${data.data.count} Berkas`;
-            document.getElementById(
-                "totalStatus7"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
-
-            new ApexCharts(
-                document.querySelector("#chart-pbg-status-7"),
-                options1
-            ).render();
+            // document.getElementById(
+            //     "countStatus7"
+            // ).innerText = `${data.data.count} Berkas`;
+            // document.getElementById(
+            //     "totalStatus7"
+            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
         })
         .catch((error) => {
             console.error("error fetching chart dara : ", error);
@@ -899,69 +370,12 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
-            document.getElementById(
-                "countStatus20"
-            ).innerText = `${data.data.count} Berkas`;
-            document.getElementById(
-                "totalStatus20"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
-
-            new ApexCharts(
-                document.querySelector("#chart-pbg-status-20"),
-                options1
-            ).render();
+            // document.getElementById(
+            //     "countStatus20"
+            // ).innerText = `${data.data.count} Berkas`;
+            // document.getElementById(
+            //     "totalStatus20"
+            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
         })
         .catch((error) => {
             console.error("error fetching chart dara : ", error);
@@ -983,69 +397,12 @@ class BigData {
         })
         .then((data) => {
             const seriesData = data.data.series;
-            document.getElementById(
-                "countStatus24"
-            ).innerText = `${data.data.count} Berkas`;
-            document.getElementById(
-                "totalStatus24"
-            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
-            var options1 = {
-                chart: {
-                    type: "area",
-                    height: 50,
-                    sparkline: {
-                        enabled: true,
-                    },
-                },
-                series: [
-                    {
-                        data: seriesData,
-                    },
-                ],
-                stroke: {
-                    width: 2,
-                    curve: "smooth",
-                },
-                markers: {
-                    size: 0,
-                },
-                colors: ["#7e67fe"],
-                tooltip: {
-                    fixed: {
-                        enabled: false,
-                    },
-                    x: {
-                        show: false,
-                    },
-                    y: {
-                        title: {
-                            formatter: function (seriesName) {
-                                return "";
-                            },
-                        },
-                    },
-                    marker: {
-                        show: false,
-                    },
-                },
-                fill: {
-                    opacity: [1],
-                    type: ["gradient"],
-                    gradient: {
-                        type: "vertical",
-                        //   shadeIntensity: 1,
-                        inverseColors: false,
-                        opacityFrom: 0.5,
-                        opacityTo: 0,
-                        stops: [0, 100],
-                    },
-                },
-            };
-
-            new ApexCharts(
-                document.querySelector("#chart-pbg-status-24"),
-                options1
-            ).render();
+            // document.getElementById(
+            //     "countStatus24"
+            // ).innerText = `${data.data.count} Berkas`;
+            // document.getElementById(
+            //     "totalStatus24"
+            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
         })
         .catch((error) => {
             console.error("error fetching chart dara : ", error);
@@ -1054,62 +411,28 @@ class BigData {
 }
 
 class ArrowConnectorCircles {
-    // Fungsi untuk membuat garis dengan panah
-    drawArrow(startElement, endElement) {
-    const svg = document.getElementById("arrow-svg");
-    const startRect = startElement.getBoundingClientRect();
-    const endRect = endElement.getBoundingClientRect();
-  
-    // Hitung posisi pusat dari setiap lingkaran
-    const startX = startRect.left + startRect.width / 2;
-    const startY = startRect.top + startRect.height / 2;
-    const endX = endRect.left + endRect.width / 2;
-    const endY = endRect.top + endRect.height / 2;
-  
-    // Bersihkan isi SVG sebelum menggambar ulang
-    svg.innerHTML = "";
-  
-    // Buat elemen garis
-    const arrowLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
-    arrowLine.setAttribute("x1", startX);
-    arrowLine.setAttribute("y1", startY);
-    arrowLine.setAttribute("x2", endX);
-    arrowLine.setAttribute("y2", endY);
-    arrowLine.setAttribute("stroke", "black");
-    arrowLine.setAttribute("stroke-width", "2");
-  
-    // Buat elemen panah
-    const arrowHead = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
-    const arrowSize = 10;
-    const angle = Math.atan2(endY - startY, endX - startX);
-    const arrowPoint1X = endX - arrowSize * Math.cos(angle - Math.PI / 6);
-    const arrowPoint1Y = endY - arrowSize * Math.sin(angle - Math.PI / 6);
-    const arrowPoint2X = endX - arrowSize * Math.cos(angle + Math.PI / 6);
-    const arrowPoint2Y = endY - arrowSize * Math.sin(angle + Math.PI / 6);
-  
-    arrowHead.setAttribute(
-      "points",
-      `${endX},${endY} ${arrowPoint1X},${arrowPoint1Y} ${arrowPoint2X},${arrowPoint2Y}`
-    );
-    arrowHead.setAttribute("fill", "black");
-  
-    // Tambahkan garis dan panah ke SVG
-    svg.appendChild(arrowLine);
-    svg.appendChild(arrowHead);
-  }
-  init(){
-      const circle1 = document.getElementById("chart-not-verified");
-      const circle2 = document.getElementById("chart-all-task");
-      
-      // Gambar panah antara dua lingkaran
-      this.drawArrow(circle1, circle2);
-      
-      // Tambahkan event listener jika ingin garis berubah sesuai posisi dinamis (opsional)
-      document.addEventListener("resize", () => drawArrow(circle1, circle2));
-  }
+    init(){
+        // Memanggil fungsi saat halaman dimuat dan ketika layar diubah ukurannya
+        document.addEventListener("resize", this.updateLine());
+        document.addEventListener("load", this.updateLine());
+    }
+
+    updateLine() {
+        const circle1 = document.getElementById("chart-all-task-1").getBoundingClientRect();
+        const circle2 = document.getElementById("chart-all-task-2").getBoundingClientRect();
+        const line = document.getElementById("connector-line");
+
+        console.log(circle1);
+        console.log(circle2);
+    
+        line.setAttribute("x1", circle1.left + circle1.width / 2);
+        line.setAttribute("y1", circle1.top + circle1.height / 2);
+        line.setAttribute("x2", circle2.left + circle2.width / 2);
+        line.setAttribute("y2", circle2.top + circle2.height / 2);
+    }
 }
 
-document.addEventListener("DOMContentLoaded", function (e) {
-    new BigData().init();
+document.addEventListener("DOMContentLoaded", async function (e) {
+    await new BigData().init();
     // new ArrowConnectorCircles().init();
 });
diff --git a/resources/views/components/circle.blade.php b/resources/views/components/circle.blade.php
index 7453871..4c16d14 100644
--- a/resources/views/components/circle.blade.php
+++ b/resources/views/components/circle.blade.php
@@ -12,7 +12,7 @@
     @if ($visible_small_circle)
     <div class="small-circle-container">
         <div class="small-circle-content">
-            <p class="small-percentage">0%</p>
+            <p class="small-percentage {{$document_id}}">0%</p>
         </div>
     </div>
     @endif
diff --git a/resources/views/dashboards/bigdata.blade.php b/resources/views/dashboards/bigdata.blade.php
index fffdc00..623c125 100644
--- a/resources/views/dashboards/bigdata.blade.php
+++ b/resources/views/dashboards/bigdata.blade.php
@@ -23,6 +23,23 @@
             'visible_small_circle' => true
         ])
         @endcomponent
+
+        <!-- <div id="circle1" class="absolute w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white text-lg font-bold top-40 left-40">
+            1
+        </div>
+
+        <div id="circle2" class="absolute w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-white text-lg font-bold top-80 left-80">
+            2
+        </div>
+
+        <svg id="svg-container" class="absolute inset-0 w-full h-full pointer-events-none">
+            <defs>
+            <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
+                <polygon points="0 0, 10 3.5, 0 7" fill="red"></polygon>
+            </marker>
+            </defs>
+            <line id="connector-line" stroke="red" stroke-width="2" marker-end="url(#arrowhead)" />
+        </svg> -->
     </div>
     <div class="row d-flex justify-content-center">
         @component('components.circle', [
@@ -121,194 +138,6 @@
     </div>
 </div>
 
-<!-- <div class="row">
-
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Total Potensi Berkas</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countStatus1"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalStatus1"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="char-pbg-status-1"></div>
-        </div>
-    </div>
-
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Berkas Terverifikasi</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countStatus2"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalStatus2"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="chart-pbg-status-2"></div>
-        </div>
-    </div>
-
-
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Berkas Belum Terverifikasi</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countStatus3"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalStatus3"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="chart-pbg-status-3"></div>
-        </div>
-    </div>
-
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Non Usaha</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countNonUsaha"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalNonUsaha"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="chartNonUsaha"></div>
-        </div>
-    </div>
-</div>
-
-<div class="row">
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Usaha</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countBusinessDocuments"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalBusinessDocuments"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="chartBusinessDocuments"></div>
-        </div>
-    </div>
-
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Berproses Di Dinas Teknis</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countStatus4"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalStatus4"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="chart-pbg-status-4"></div>
-        </div>
-    </div>
-
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Berproses Di DPMPTSP</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countStatus5"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalStatus5"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="chart-pbg-status-5"></div>
-        </div>
-    </div>
-
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Realisasi Terbit PBG</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countStatus6"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalStatus6"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="chart-pbg-status-6"></div>
-        </div>
-    </div>
-</div>
-
-<div class="row">
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Progres Manual</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countStatus7"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalStatus7"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="chart-pbg-status-7"></div>
-        </div>
-    </div>
-
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Perkiraan Potensi PBG Dari Tata Ruang</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countStatus20"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalStatus20"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="chart-pbg-status-20"></div>
-        </div>
-    </div>
-
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Perkiraan Potensi PBG Dari Tata Ruang</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countStatus24"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalStatus24"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="chart-pbg-status-24"></div>
-        </div>
-    </div>
-
-    <div class="col-md-6 col-xl-3">
-        <div class="card">
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <p class="text-muted mb-0 text-truncate">Target PAD</p>
-                        <h5 class="text-dark mt-2 mb-0" id="countTargetPAD"></h5>
-                        <h3 class="text-dark mt-2 mb-0" id="totalTargetPAD"></h3>
-                    </div>
-                </div>
-            </div>
-            <div id="chart12"></div>
-        </div>
-    </div>
-</div> -->
-
 @endsection
 
 @section('scripts')