fix get menu id and height auto chart growth

app/Enums/PbgTaskFilterData.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App\Enums;
+
+enum PbgTaskFilterData : string
+{
+    case non_business = 'non-business';
+    case business = 'business';
+    case verified = 'verified';
+    case non_verified = 'non-verified';
+    case all = 'all';
+
+    public static function getAllOptions() : array  {
+        return [
+            self::all->value => 'Potensi Berkas',
+            self::business->value => 'Usaha',
+            self::non_business->value => 'Bukan Usaha',
+            self::verified->value => 'Terverifikasi',
+            self::non_verified->value => 'Belum Terverifikasi',
+        ];
+    }
+}

app/Http/Controllers/Api/GrowthReportAPIController.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Models\BigdataResume;
+use Carbon\Carbon;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+
+class GrowthReportAPIController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index(Request $request)
+    {
+        // Get current date
+        $today = Carbon::today();
+    
+        // Define default range: 1 month back from today
+        $defaultStart = $today->copy()->subMonth();
+        $defaultEnd = $today;
+    
+        // Use request values if provided, else use defaults
+        $startDate = $request->input('start_date', $defaultStart->toDateString());
+        $endDate = $request->input('end_date', $defaultEnd->toDateString());
+    
+        // Optional year filter (used if specified)
+        $year = $request->input('year', now()->year);
+    
+        $query = BigdataResume::selectRaw("
+            DATE(created_at) as date,
+            SUM(potention_sum) as potention_sum,
+            SUM(verified_sum) as verified_sum,
+            SUM(non_verified_sum) as non_verified_sum
+        ")
+        ->whereBetween('created_at', [$startDate, $endDate]);
+    
+        $query->whereNotNull('year')
+        ->where('year', '!=', 'all');
+    
+        $data = $query->groupBy(DB::raw('DATE(created_at)'))
+            ->orderBy(DB::raw('DATE(created_at)'))
+            ->get()
+            ->map(function ($item) {
+                $item->date = Carbon::parse($item->date)->format('d M Y');
+                return $item;
+            });
+    
+        return response()->json($data);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+}

app/Http/Controllers/Api/RequestAssignmentController.php

@@ -8,7 +8,7 @@ use App\Http\Resources\RequestAssignmentResouce;
 use App\Models\PbgTask;
 use App\Models\PbgTaskGoogleSheet;
 use Barryvdh\DomPDF\Facade\Pdf;
-use DB;
+use Illuminate\Support\Facades\DB;
 use Exception;
 use Illuminate\Http\Request;
 use Log;
@@ -21,15 +21,48 @@ class RequestAssignmentController extends Controller
      */
     public function index(Request $request)
     {
-        $query = PbgTask::with(['attachments' => function ($q) {
-            $q->whereIn('pbg_type', ['berita_acara', 'bukti_bayar']);
-        }])->orderBy('id', 'desc');
+        $query = PbgTask::with([
+            'attachments' => function ($q) {
+                $q->whereIn('pbg_type', ['berita_acara', 'bukti_bayar']);
+            },
+            'googleSheet'
+        ])->orderBy('id', 'desc');
+    
+        if ($request->has('filter') && !empty($request->get('filter'))) {
+            $filter = strtolower($request->get('filter'));
+    
+            switch ($filter) {
+                case 'non-business':
+                    $query->whereRaw("LOWER(function_type) != ?", ['sebagai tempat usaha'])->orWhereNull('function_type');
+                    break;
+    
+                case 'business':
+                    $query->whereRaw("LOWER(function_type) = ?", ['sebagai tempat usaha']);
+                    break;
+    
+                case 'verified':
+                    $query->whereHas('googleSheet', function ($q) {
+                        $q->whereRaw("LOWER(status_verifikasi) = ?", ['selesai verifikasi']);
+                    });
+                    break;
+    
+                case 'non-verified':
+                    $query->where(function ($q) {
+                        $q->whereDoesntHave('googleSheet')
+                          ->orWhereHas('googleSheet', function ($q2) {
+                              $q2->whereRaw("LOWER(status_verifikasi) != ?", ['selesai verifikasi'])->orWhereNull('status_verifikasi');
+                          });
+                    });
+                    break;
+            }
+        }
     
         if ($request->has('search') && !empty($request->get("search"))) {
-            $query->where(function ($q) use ($request) {
-                $q->where('name', 'LIKE', '%' . $request->get('search') . '%')
-                ->orWhere('registration_number', 'LIKE', '%' . $request->get('search') . '%')
-                ->orWhere('document_number', 'LIKE', '%' . $request->get('search') . '%');
+            $search = $request->get('search');
+            $query->where(function ($q) use ($search) {
+                $q->where('name', 'LIKE', "%$search%")
+                  ->orWhere('registration_number', 'LIKE', "%$search%")
+                  ->orWhere('document_number', 'LIKE', "%$search%");
             });
         }
     

app/Http/Controllers/Dashboards/PotentialsController.php

@@ -3,12 +3,14 @@
 namespace App\Http\Controllers\Dashboards;
 
 use App\Http\Controllers\Controller;
+use App\Models\Menu;
 use Illuminate\Http\Request;
 
 class PotentialsController extends Controller
 {
     public function inside_system(){
-        return view('dashboards.potentials.inside_system');
+        $menus = Menu::all();
+        return view('dashboards.potentials.inside_system', compact('menus'));
     }
     public function outside_system(){
         return view('dashboards.potentials.outside_system');

app/Http/Controllers/Report/GrowthReportsController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers\Report;
+
+use App\Http\Controllers\Controller;
+use App\Models\Menu;
+use Illuminate\Http\Request;
+
+class GrowthReportsController extends Controller
+{
+    public function index(){
+        return view('report.growth-report.index');
+    }
+}

app/Http/Controllers/RequestAssignment/PbgTaskController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\RequestAssignment;
 
 use App\Enums\PbgTaskApplicationTypes;
+use App\Enums\PbgTaskFilterData;
 use App\Http\Controllers\Controller;
 use App\Models\PbgTask;
 use Illuminate\Http\Request;
@@ -17,27 +18,21 @@ class PbgTaskController extends Controller
      */
     public function index(Request $request)
     {
-        $menuId = $request->query('menu_id');
-        $user = Auth::user();
-        $userId = $user->id;
+        $menuId = $request->query('menu_id') ?? $request->input('menu_id');
+        $filter = $request->query('filter');
 
-        // Ambil role_id yang dimiliki user
-        $roleIds = DB::table('user_role')
-            ->where('user_id', $userId)
-            ->pluck('role_id');
+        $permissions = $this->permissions[$menuId]?? []; // Avoid undefined index error
+        $creator = $permissions['allow_create'] ?? 0;
+        $updater = $permissions['allow_update'] ?? 0;
+        $destroyer = $permissions['allow_destroy'] ?? 0;
         
-        // Ambil data akses berdasarkan role_id dan menu_id
-        $roleAccess = DB::table('role_menu')
-            ->whereIn('role_id', $roleIds)
-            ->where('menu_id', $menuId)
-            ->first();
-
-        // Pastikan roleAccess tidak null sebelum mengakses properti
-        $creator = $roleAccess->allow_create ?? 0;
-        $updater = $roleAccess->allow_update ?? 0;
-        $destroyer = $roleAccess->allow_destroy ?? 0;
-
-        return view('pbg_task.index', compact('creator', 'updater', 'destroyer'));
+        return view('pbg_task.index', [
+            'creator' => $creator,
+            'updater' => $updater,
+            'destroyer' => $destroyer,
+            'filter' => $filter,
+            'filterOptions' => PbgTaskFilterData::getAllOptions(),
+        ]);        
     }
 
     /**

database/seeders/MenuSeeder.php

@@ -208,23 +208,29 @@ class MenuSeeder extends Seeder
                         "icon" => null,
                         "sort_order" => 2,
                     ],
+                    [
+                        "name" => "Lap Pertumbuhan",
+                        "url" => "growths",
+                        "icon" => null,
+                        "sort_order" => 3,
+                    ],
                     [
                         "name" => "Rekap Pembayaran",
                         "url" => "payment-recaps",
                         "icon" => null,
-                        "sort_order" => 3,
+                        "sort_order" => 4,
                     ],
                     [
                         "name" => "Lap Rekap Data Pembayaran",
                         "url" => "report-payment-recaps",
                         "icon" => null,
-                        "sort_order" => 4,
+                        "sort_order" => 5,
                     ],
                     [
                         "name" => "Lap PBG (PTSP)",
                         "url" => "report-pbg-ptsp",
                         "icon" => null,
-                        "sort_order" => 5,
+                        "sort_order" => 6,
                     ],
                 ]
             ],

database/seeders/UsersRoleMenuSeeder.php

@@ -25,7 +25,7 @@ class UsersRoleMenuSeeder extends Seeder
             'Menu', 'Role', 'Setting Dashboard', 'PBG', 'Reklame', 'Usaha atau Industri', 'Pariwisata', 
             'Lap Pariwisata', 'UMKM', 'Dashboard Potensi', 'Tata Ruang', 'PDAM', 'PETA', 
             'Lap Pimpinan', 'Dalam Sistem', 'Luar Sistem', 'Google Sheets', 'TPA TPT', 
-            'Approval Pejabat', 'Undangan', 'Rekap Pembayaran', 'Lap Rekap Data Pembayaran', 'Lap PBG (PTSP)'
+            'Approval Pejabat', 'Undangan', 'Rekap Pembayaran', 'Lap Rekap Data Pembayaran', 'Lap PBG (PTSP)', 'Lap Pertumbuhan'
         ])->get()->keyBy('name');
 
         // Define access levels for each role
@@ -36,7 +36,7 @@ class UsersRoleMenuSeeder extends Seeder
                 'Menu', 'Role', 'Setting Dashboard', 'PBG', 'Reklame', 'Usaha atau Industri', 'Pariwisata', 
                 'Lap Pariwisata', 'UMKM', 'Dashboard Potensi', 'Tata Ruang', 'PDAM', 'Dalam Sistem', 
                 'Luar Sistem', 'Lap Pimpinan', 'Google Sheets', 'TPA TPT', 'Approval Pejabat', 
-                'Undangan', 'Rekap Pembayaran', 'Lap Rekap Data Pembayaran', 'Lap PBG (PTSP)'
+                'Undangan', 'Rekap Pembayaran', 'Lap Rekap Data Pembayaran', 'Lap PBG (PTSP)', 'Lap Pertumbuhan'
             ],
             'user' => ['Dashboard', 'Data', 'Laporan', 'Neng Bedas', 
                 'Approval', 'Tools', 'Dashboard Pimpinan', 'Dashboard PBG', 'Users', 'Syncronize', 

resources/js/dashboards/potentials/inside_system.js

@@ -168,6 +168,13 @@ document.addEventListener("DOMContentLoaded", async function (e) {
     await new DashboardPotentialInsideSystem().init();
 });
 
+function handleCircleClick(element) {
+    const url = element.getAttribute("data-url") || "#";
+    if (url !== "#") {
+        window.location.href = url;
+    }
+}
+
 function resizeDashboard() {
     let targetElement = document.getElementById("lack-of-potential-wrapper");
     let dashboardElement = document.getElementById(

resources/js/pbg-task/index.js

@@ -34,11 +34,42 @@ class PbgTasks {
             pbgType: "berita_acara",
             bindFlag: "uploadHandlerBoundBeritaAcara",
         });
-        this.initTableRequestAssignment();
+        this.handleFilterDatatable();
         this.handleSendNotification();
     }
 
-    initTableRequestAssignment() {
+    handleFilterDatatable() {
+        const form = document.getElementById("filter-form");
+        const filterSelect = document.getElementById("filter-select");
+
+        const urlParams = new URLSearchParams(window.location.search);
+        const initialFilter = urlParams.get("filter") || "";
+
+        this.initTableRequestAssignment(initialFilter); // Initial load with query param
+
+        form.addEventListener("submit", (e) => {
+            e.preventDefault();
+
+            const selectedFilter = filterSelect.value;
+
+            const params = new URLSearchParams(window.location.search);
+            params.set("filter", selectedFilter);
+
+            // Update the URL without reloading
+            window.history.replaceState(
+                {},
+                "",
+                `${location.pathname}?${params}`
+            );
+
+            // Call the method again with the selected filter
+            this.initTableRequestAssignment(selectedFilter);
+        });
+    }
+
+    initTableRequestAssignment(filterValue = "") {
+        const urlBase = `${GlobalConfig.apiHost}/api/request-assignments`;
+
         // Ambil token
         const token = document
             .querySelector('meta[name="api-token"]')
@@ -124,7 +155,10 @@ class PbgTasks {
             ],
             search: {
                 server: {
-                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                    url: (prev, keyword) =>
+                        `${prev}${
+                            prev.includes("?") ? "&" : "?"
+                        }search=${keyword}`,
                 },
                 debounceTimeout: 1000,
             },
@@ -139,7 +173,7 @@ class PbgTasks {
             },
             sort: true,
             server: {
-                url: `${GlobalConfig.apiHost}/api/request-assignments`,
+                url: `${urlBase}?filter=${filterValue}`,
                 credentials: "include",
                 headers: {
                     Authorization: `Bearer ${token}`,

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: "auto",
+                },
+                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/components/custom-circle.blade.php

@@ -1,11 +1,11 @@
 @props(['title' => 'title component', 'visible_data' => false, 'data_count' => '', 'visible_data_type' => false, 
-'data_type' => '','style' => '', 'size' => '', 'line' => [], 'data_id' => ''])
+'data_type' => '','style' => '', 'size' => '', 'data_id' => '', 'document_url' => '#'])
 
 @section('css')
 @vite(['resources/scss/components/_custom_circle.scss'])
 @endsection
 
-<div class="custom-circle-wrapper {{ $size }}" style="{{ $style }}">
+<div class="custom-circle-wrapper {{ $size }}" style="{{ $style }}" data-url="{{ $document_url }}" onclick="handleCircleClick(this)">
     <div class="custom-circle-content">
         <p class="custom-circle-text">{{ $title }}</p>
         @if ($visible_data === "true")
@@ -14,17 +14,5 @@
         @if ($visible_data_type === "true")
             <div class="custom-circle-data-type">{{ $data_type }}</div>
         @endif
-        @if (!empty($lines))
-            <svg class="absolute w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
-                @foreach ($lines as $line)
-                    <line 
-                        x1="{{ $line['x1'] }}" y1="{{ $line['y1'] }}" 
-                        x2="{{ $line['x2'] }}" y2="{{ $line['y2'] }}" 
-                        stroke="{{ $line['color'] ?? 'black' }}" 
-                        stroke-width="{{ $line['width'] ?? 2 }}"
-                    />
-                @endforeach
-            </svg>
-        @endif
     </div>
 </div>

resources/views/dashboards/bigdata.blade.php

@@ -38,7 +38,8 @@
             'document_type' => '',
             'document_id' => 'chart-target-pad',
             'visible_small_circle' => true,
-            'style' => 'left:200px;'
+            'style' => 'left:200px;',
+            'document_url' => route('data-settings.index', ['menu_id' => $menus->where('url','data-settings.index')->first()->id])
         ])
         @endcomponent
 
@@ -56,7 +57,8 @@
             'document_type' => 'Pemohon',
             'document_id' => 'chart-total-potensi',
             'visible_small_circle' => true,
-            'style' => 'left:400px;top:150px;'
+            'style' => 'left:400px;top:150px;',
+            'document_url' => route('pbg-task.index', ['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'all'])
         ])
         @endcomponent
 
@@ -72,7 +74,8 @@
             'document_type' => '',
             'document_id' => 'chart-potensi-tata-ruang',
             'visible_small_circle' => true,
-            'style' => 'left:600px;'
+            'style' => 'left:600px;',
+            'document_url' => route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id])
         ])
         @endcomponent
 
@@ -85,7 +88,8 @@
             'document_type' => 'Berkas',
             'document_id' => 'chart-non-business',
             'visible_small_circle' => true,
-            'style' => 'left:900px;top:150px;'
+            'style' => 'left:900px;top:150px;',
+            'document_url' => route('pbg-task.index', ['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'non-business'])
         ])
         @endcomponent
 
@@ -95,7 +99,8 @@
             'document_type' => 'Berkas',
             'document_id' => 'chart-business',
             'visible_small_circle' => true,
-            'style' => 'left:900px;top:400px;'
+            'style' => 'left:900px;top:400px;',
+            'document_url' => route('pbg-task.index', ['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'business'])
         ])
         @endcomponent
 
@@ -105,7 +110,8 @@
             'document_type' => 'Berkas',
             'document_id' => 'chart-berkas-terverifikasi',
             'visible_small_circle' => true,
-            'style' => 'top:300px;left:200px;'
+            'style' => 'top:300px;left:200px;',
+            'document_url' => route('pbg-task.index', ['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'verified'])
         ])
         @endcomponent
 
@@ -121,7 +127,8 @@
             'document_type' => 'Berkas',
             'document_id' => 'chart-berkas-belum-terverifikasi',
             'visible_small_circle' => true,
-            'style' => 'top:300px;left:600px;'
+            'style' => 'top:300px;left:600px;',
+            'document_url' => route('pbg-task.index', ['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'non-verified'])
         ])
         @endcomponent
 
@@ -138,7 +145,8 @@
             'document_type' => 'Berkas',
             'document_id' => 'chart-realisasi-tebit-pbg',
             'visible_small_circle' => true,
-            'style' => 'top:550px;left:100px;'
+            'style' => 'top:550px;left:100px;',
+            'document_url' => 'https://docs.google.com/spreadsheets/d/1QoXzuLdEX3MK70Yrfigz0Qj5rAt4T819jX85vubBNdY/edit?gid=1514195399#gid=1514195399'
             ])
         @endcomponent
 
@@ -151,7 +159,8 @@
             'document_type' => 'Berkas',
             'document_id' => 'chart-menunggu-klik-dpmptsp',
             'visible_small_circle' => true,
-            'style' => 'top:550px;left:400px'
+            'style' => 'top:550px;left:400px',
+            'document_url' => 'https://docs.google.com/spreadsheets/d/1QoXzuLdEX3MK70Yrfigz0Qj5rAt4T819jX85vubBNdY/edit?gid=1514195399#gid=1514195399'
             ])
         @endcomponent
 
@@ -164,7 +173,8 @@
             'document_type' => 'Berkas',
             'document_id' => 'chart-proses-dinas-teknis',
             'visible_small_circle' => true,
-            'style' => 'top:550px;left:700px'
+            'style' => 'top:550px;left:700px',
+            'document_url' => 'https://docs.google.com/spreadsheets/d/1QoXzuLdEX3MK70Yrfigz0Qj5rAt4T819jX85vubBNdY/edit?gid=1514195399#gid=1514195399'
             ])
         @endcomponent
     </div>

resources/views/dashboards/potentials/inside_system.blade.php

@@ -21,11 +21,20 @@
     <div class="wrapper">
         <div id="lack-of-potential-fixed-container" class="" style="width:1400px;height:770px;position:relative;margin:auto;z-index:1;">
             <div style="position: absolute; top: 200px; left: 50px;">
-                <x-custom-circle title="Restoran" size="small" style="background-color: #0e4753;" visible_data="true" data_id="restoran-count" data_count="0" />
+                <x-custom-circle title="Restoran" size="small" style="background-color: #0e4753;" 
+                    visible_data="true" data_id="restoran-count" data_count="0" 
+                    document_url="{{ route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) }}"
+                />
                 <div class="square dia-top-left-bottom-right" style="top:30px;left:50px;width:150px;height:120px;"></div>
-                <x-custom-circle title="PBB Bangunan" visible_data="true" data_id="pbb-bangunan-count" data_count="0" size="small" style="background-color: #0e4753;" />
+                <x-custom-circle title="PBB Bangunan" visible_data="true" data_id="pbb-bangunan-count" 
+                    data_count="0" size="small" style="background-color: #0e4753;" 
+                    document_url="{{ route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) }}"
+                />
                 <div class="square" style="width:150px;height:2px;background-color:black;left:50px;top:150px;"></div>
-                <x-custom-circle title="Reklame" visible_data="true" data_id="reklame-count" data_count="0" size="small" style="background-color: #0e4753;" />
+                <x-custom-circle title="Reklame" visible_data="true" data_id="reklame-count" 
+                    data_count="0" size="small" style="background-color: #0e4753;" 
+                    document_url="{{ route('web-advertisements.index', ['menu_id' => $menus->where('url','web-advertisements.index')->first()->id]) }}"
+                />
                 <div class="square dia-top-right-bottom-left" style="top:140px;left:50px;width:150px;height:120px;"></div>
             </div>
             
@@ -33,30 +42,39 @@
                 <div class="square dia-top-right-bottom-left" style="top:-100px;left:30px;width:150px;height:120px;"></div>
                 <div class="square dia-top-left-bottom-right" style="top:-100px;left:120px;width:120px;height:120px;"></div>
                 <x-custom-circle title="BAPENDA" size="small" style="float:left;background-color: #234f6c;" />
-                <x-custom-circle title="PDAM" visible_data="true" data_id="pdam-count" data_count="0" visible_data_type="true" data_type="Pelanggan" size="small" style="float:left;background-color: #234f6c;" />
-                <x-custom-circle title="KECAMATAN" size="small" style="float:left;background-color: #234f6c;" />
-                
+                <x-custom-circle title="PDAM" visible_data="true" data_id="pdam-count" 
+                    visible_data_type="true" data_type="Pelanggan"
+                    size="small" style="float:left;background-color: #234f6c;position: absolute;margin-left: 99px;" 
+                    document_url="{{ route('customers', ['menu_id' => $menus->where('url','customers')->first()->id]) }}"
+                />
+                <x-custom-circle title="KECAMATAN" size="small" style="float:left;background-color: #234f6c;position: absolute;margin-left: 198px;" />
             </div>
             
-            <div  style="position: absolute; top: 0px; left: 270px;">
+            <div style="position: absolute; top: 0px; left: 270px;">
                 <div class="square" style="width:5px;height:600px;background-color:black;left:70px;top:50px;"></div>
                 <div class="square dia-top-left-bottom-right" style="top:350px;left:-50px;width:120px;height:120px;"></div>
                 <div class="square dia-top-right-bottom-left" style="top:350px;left:70px;width:120px;height:120px;"></div>
                 <x-custom-circle title="Rumah Tinggal" size="small" style="background-color: #234f6c;margin:auto;" />
                 <x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
-                <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:150px;" />
+                <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:150px;position: absolute;" />
             </div>
             
-            <div  style="position: absolute; top: 650px; left: 110px;">
+            <div style="position: absolute; top: 650px; left: 110px;">
                 <div class="square dia-top-right-bottom-left" style="top:-110px;left:40px;width:200px;height:120px;"></div>
                 <div class="square dia-top-right-bottom-left" style="top:-110px;left:90px;width:150px;height:170px;"></div>
                 <div class="square dia-top-left-bottom-right" style="top:-110px;left:230px;width:150px;height:170px;"></div>
                 <div class="square dia-top-left-bottom-right" style="top:-110px;left:260px;width:200px;height:180px;"></div>
-                <x-custom-circle title="Villa" size="small" style="float:left;background-color: #234f6c;" visible_data="true" data_id="villa-count" data_count="0" />
+                <x-custom-circle title="Villa" size="small" style="float:left;background-color: #234f6c;" 
+                    visible_data="true" data_id="villa-count" data_count="0" 
+                    document_url="{{ route('web-tourisms.index', ['menu_id' => $menus->where('url','web-tourisms.index')->first()->id]) }}"
+                />
                 <x-custom-circle title="Pabrik" size="small" style="float:left;background-color: #234f6c;" />
                 <x-custom-circle title="Jalan Protocol" size="small" style="float:left;background-color: #234f6c;" />
                 <x-custom-circle title="Ruko" size="small" style="float:left;background-color: #234f6c;" />
-                <x-custom-circle title="Pariwisata" size="small" style="float:left;background-color: #234f6c; margin-right: 20px;" visible_data="true" data_id="pariwisata-count" data_count="0" />
+                <x-custom-circle title="Pariwisata" size="small" style="float:left;background-color: #234f6c; margin-right: 20px;" 
+                    visible_data="true" data_id="pariwisata-count" data_count="0"
+                    document_url="{{ route('web-tourisms.index', ['menu_id' => $menus->where('url','web-tourisms.index')->first()->id]) }}"
+                />
                 <div class="square" style="width:150px;height:2px;background-color:black;left:350px;top:50px;"></div>
                 <x-custom-circle title="DISBUDPAR" size="small" style="background-color: #3a968b;" />
             </div>
@@ -75,7 +93,10 @@
                     'style' => 'margin-left:180px;top:-20px;'
                     ])
                 @endcomponent
-                <x-custom-circle title="Tata Ruang" size="large" style="background-color: #da6635;float:left;margin-left:250px;" visible_data="true" data_id="tata-ruang-count" data_count="0" />
+                <x-custom-circle title="Tata Ruang" size="large" style="background-color: #da6635;float:left;margin-left:250px;" 
+                    visible_data="true" data_id="tata-ruang-count" data_count="0" 
+                    document_url="{{ route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) }}"
+                />
             </div>
                 
             <div style="position: absolute; top: 310px; left: 1150px;">
@@ -102,7 +123,10 @@
 
             <div  style="position: absolute; top: 50px; left: 1100px;">
                 <x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
-                <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:260px;" visible_data="true" data_id="tata-ruang-usaha-count" data_count="0" />
+                <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:260px;" 
+                    visible_data="true" data_id="tata-ruang-usaha-count" data_count="0" 
+                    document_url="{!! route('pbg-task.index', ['filter' => 'business', 'menu_id' => $menus->where('url','pbg-task.index')->first()->id]) !!}"
+                />
             </div>
         </div>
     </div>

resources/views/dashboards/potentials/outside_system.blade.php

@@ -27,7 +27,8 @@
                 'document_type' => 'Berkas',
                 'document_id' => 'outside-system-non-business',
                 'visible_small_circle' => true,
-                'style' => 'top:10px;'
+                'style' => 'top:10px;',
+                'document_url' => route('pbg-task.index', ['menu_id' => 13, 'filter' => 'non-business'])
             ])
             @endcomponent
             <div class="square dia-top-right-bottom-left" style="top:10px;left:180px;width:230px;height:120px;"></div>
@@ -37,7 +38,8 @@
                 'document_type' => 'Berkas',
                 'document_id' => 'outside-system-business',
                 'visible_small_circle' => true,
-                'style' => 'top:300px;'
+                'style' => 'top:300px;',
+                'document_url' => route('pbg-task.index', ['menu_id' => 13, 'filter' => 'business'])
                 ])
             @endcomponent
             <div class="square dia-top-right-bottom-left" style="top:320px;left:170px;width:200px;height:100px;"></div>

resources/views/pbg_task/index.blade.php

@@ -42,9 +42,29 @@
             <a href="{{ route('pbg-task.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Create</a>
           @endif
         </div>
+
+        <form id="filter-form">
+          <div class="row pb-3">
+            <div class="col-md-4">
+              <select name="filter" id="filter-select" class="form-select">
+                @foreach ($filterOptions as $key => $label)
+                  <option value="{{ $key }}" {{ request('filter') == $key ? 'selected' : '' }}>
+                    {{ $label }}
+                  </option>
+                @endforeach
+              </select>
+              <input name="menu_id" value="13" type="hidden" />
+            </div>
+            <div class="col-md-2">
+              <button type="submit" class="btn btn-primary w-100">Apply</button>
+            </div>
+          </div>
+        </form>
+
+        <!-- Table or Data Display Area -->
         <div id="table-pbg-tasks"
-					data-updater="{{ $updater }}"
-					data-destroyer="{{ $destroyer }}">
+          data-updater="{{ $updater }}"
+          data-destroyer="{{ $destroyer }}">
         </div>
       </div>
     </div>

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

routes/api.php

@@ -7,6 +7,7 @@ use App\Http\Controllers\Api\DashboardController;
 use App\Http\Controllers\Api\DataSettingController;
 use App\Http\Controllers\Api\GlobalSettingsController;
 use App\Http\Controllers\Api\GoogleSheetController;
+use App\Http\Controllers\Api\GrowthReportAPIController;
 use App\Http\Controllers\Api\ImportDatasourceController;
 use App\Http\Controllers\Api\LackOfPotentialController;
 use App\Http\Controllers\Api\MenusController;
@@ -187,4 +188,8 @@ Route::group(['middleware' => 'auth:sanctum'], function (){
         Route::post('/pbg-task-attachment/{pbg_task_id}', 'store')->name('api.pbg-task.upload');
         Route::get('/pbg-task-attachment/{attachment_id}/download', 'download')->name('api.pbg-task.download');
     });
+
+    Route::controller(GrowthReportAPIController::class)->group(function(){
+        Route::get('/growth','index')->name('api.growth');
+    });
 });

routes/web.php

@@ -16,6 +16,7 @@ use App\Http\Controllers\MenusController;
 use App\Http\Controllers\PaymentRecapsController;
 use App\Http\Controllers\PbgTaskAttachmentsController;
 use App\Http\Controllers\QuickSearchController;
+use App\Http\Controllers\Report\GrowthReportsController;
 use App\Http\Controllers\ReportPaymentRecapsController;
 use App\Http\Controllers\ReportPbgPTSPController;
 use App\Http\Controllers\RequestAssignment\PbgTaskController;
@@ -163,6 +164,10 @@ Route::group(['middleware' => 'auth'], function(){
         Route::controller(ReportPbgPTSPController::class)->group(function (){
             Route::get('/report-pbg-ptsp', 'index')->name('report-pbg-ptsp');
         });
+
+        Route::controller(GrowthReportsController::class)->group(function (){
+            Route::get('/growths','index')->name('growths');
+        });
     });
 
     // approval

vite.config.js

@@ -116,6 +116,8 @@ export default defineConfig({
                 "resources/js/quick-search/index.js",
                 "resources/js/quick-search/result.js",
                 "resources/js/quick-search/detail.js",
+                // growth-report
+                "resources/js/report/growth-report/index.js",
                 // dummy
                 "resources/js/approval/index.js",
                 "resources/js/invitations/index.js",