partial update circle chart can click

app/Http/Controllers/Dashboards/BigDataController.php

@@ -4,6 +4,7 @@ namespace App\Http\Controllers\Dashboards;
 
 use App\Http\Controllers\Controller;
 use App\Models\ImportDatasource;
+use App\Models\Menu;
 use Illuminate\Http\Request;
 
 class BigDataController extends Controller
@@ -12,7 +13,8 @@ class BigDataController extends Controller
         $latest_import_datasource = ImportDatasource::latest()->first();
         $latest_created = $latest_import_datasource ? 
         $latest_import_datasource->created_at->format("j F Y H:i:s") : null;
-        return view('dashboards.bigdata', compact('latest_created'));
+        $menus = Menu::all();
+        return view('dashboards.bigdata', compact('latest_created', 'menus'));
     }
 
     public function pbg()

app/View/Components/Circle.php

@@ -13,13 +13,15 @@ class Circle extends Component
     public $document_type;
     public $document_id;
     public $visible_small_circle;
-    public function __construct($document_id = "",$document_title = "", $document_type = "", $document_color = "#020c5c", $visible_small_circle = true)
+    public $document_url;
+    public function __construct($document_id = "",$document_title = "", $document_type = "", $document_color = "#020c5c", $visible_small_circle = true, $document_url = "#")
     {
         $this->document_title = $document_title;
         $this->document_color = $document_color;
         $this->document_type = $document_type;
         $this->document_id = $document_id;
         $this->visible_small_circle = $visible_small_circle;
+        $this->document_url = $document_url;
     }
 
     /**

resources/views/components/circle.blade.php

@@ -1,8 +1,11 @@
+@props(['document_url' => '#'])
+
 @section('css')
 @vite(['resources/scss/components/_circle.scss'])
 @endsection
 
-<div class="circle-container"  id="{{$document_id}}" style="--circle-color: {{$document_color}};{{$style}}">
+<div class="circle-container"  id="{{$document_id}}" style="--circle-color: {{$document_color}};{{$style}}" data-url="{{ $document_url }}"
+     onclick="handleCircleClick(this)">
     <div class="circle-content">
         <p class="document-title {{$document_id}}" >{{$document_title}}</p>
         <p class="document-total {{$document_id}}" >Rp.0</p>
@@ -17,3 +20,12 @@
     </div>
     @endif
 </div>
+
+<script>
+    function handleCircleClick(element) {
+        const url = element.getAttribute('data-url') || '#';
+        if (url !== '#') {
+            window.location.href = url;
+        }
+    }
+</script>

resources/views/dashboards/bigdata.blade.php

@@ -9,22 +9,6 @@
 @include('layouts.partials/page-title', ['title' => 'Dashboards', 'subtitle' => 'Dashboard Pimpinan'])
 
 <div id="dashboard-fixed-wrapper" class="row">
-    <!-- <div class="col-12">
-        <h2 class="mt-3 ms-2 text-danger">
-            <span class="float-end fs-6 me-3 text-black d-block d-sm-inline text-end">Terakhir di update - {{$latest_created}}</span>
-            ANALISA BIG DATA PROSES PBG <br> 
-            MELALUI APLIKASI SIBEDAS PBG
-    
-        </h2>
-    </div>
-
-    <div class="row d-flex justify-content-end">
-        <div class="col-12 col-sm-6 col-md-3">
-            <div class="d-flex flex-sm-nowrap flex-wrap justify-content-end">
-                <input type="text" class="form-control" style="max-width: 125px;" id="datepicker-dashboard-bigdata" placeholder="Filter Date" />
-            </div>
-        </div>
-    </div> -->
     <div class="col-12">
         <div class="d-flex justify-content-between align-items-center mt-3 ms-2">
             <h2 class="text-danger m-0">