partial update circle chart can click

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>