add new menu peta in dashboard

app/Http/Controllers/Api/PbgTaskController.php

@@ -21,35 +21,9 @@ class PbgTaskController extends Controller
     public function __construct(GoogleSheetService $googleSheetService){
         $this->googleSheetService = $googleSheetService;
     }
-    public function index(Request $request)
+    public function index()
     {
-        info($request);
-        
-        $isLastUpdated = filter_var($request->query('isLastUpdated', false), FILTER_VALIDATE_BOOLEAN);
-
-        $query = PbgTask::query();
-
-        if ($isLastUpdated) {
-            $query->orderBy('updated_at', 'desc');
-        } else {
-            $query->where('status', 20);
-        }
-
-        // Ambil maksimal 10 data
-        $pbg_task = $query->limit(10)->get();
-        $totalData = $pbg_task->count();
-
-        // Tambahkan nomor urut
-        $data = $pbg_task->map(function ($item, $index) {
-            return array_merge($item->toArray(), ['no' => $index + 1]);
-        });
-
-        return response()->json([
-            'data' => $data,
-            'meta' => [
-                'total' => $totalData
-            ]
-        ]);
+        //
     }
 
     /**

app/Http/Controllers/Api/TourismController.php

@@ -106,18 +106,6 @@ class TourismController extends Controller
         }
     }
 
-    public function getAllLocation()
-    {
-        $locations = Tourism::whereNotNull('longitude')
-                    ->whereNotNull('latitude')
-                    ->select('project_name', 'longitude', 'latitude')
-                    ->get();
-
-        return response()->json([
-            'data' => $locations
-        ]);
-    }
-
     /**
      * Display the specified resource.
      */

app/Http/Controllers/Dashboards/BigDataController.php

@@ -15,8 +15,7 @@ class BigDataController extends Controller
         return view('dashboards.bigdata', compact('latest_created'));
     }
 
-    public function pbg()
-    {
-        return view('dashboards.pbg');
+    public function pbg(){
+        return view('index');
     }
 }

app/Http/Controllers/GoogleApisController.php

@@ -0,0 +1,12 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class GoogleApisController extends Controller
+{
+    public function index(){
+        return view('maps.google-api');
+    }
+}

database/seeders/UsersRoleMenuSeeder.php

@@ -116,6 +116,13 @@ class UsersRoleMenuSeeder extends Seeder
                 "parent_id" => $dashboard->id,
                 "sort_order" => 3,
             ],
+            [
+                "name" => "PETA",
+                "url" => "dashboard.maps",
+                "icon" => null,
+                "parent_id" => $dashboard->id,
+                "sort_order" => 4,
+            ],
             [
                 "name" => "Users",
                 "url" => "users.index",
@@ -229,6 +236,7 @@ class UsersRoleMenuSeeder extends Seeder
         $lack_of_potentials = Menu::where('name', 'Dashboard Potensi')->first();
         $spatial_plannings = Menu::where('name', 'Tata Ruang')->first();
         $pdam = Menu::where('name', 'PDAM')->first();
+        $peta = Menu::where('name', 'PETA')->first();
 
         // Superadmin gets all menus
         $superadmin->menus()->sync([
@@ -256,6 +264,7 @@ class UsersRoleMenuSeeder extends Seeder
             $lack_of_potentials->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
             $spatial_plannings->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
             $pdam->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
+            $peta->id => ["allow_show" => true, "allow_create" => true, "allow_update" => true, "allow_destroy" => true],
         ]);
 
         // Admin gets limited menus

resources/js/dashboards/pbg.js

@@ -1,470 +0,0 @@
-import Big from "big.js";
-import GlobalConfig, { addThousandSeparators } from "../global-config.js";
-import ApexCharts from "apexcharts";
-import "gridjs/dist/gridjs.umd.js";
-import GeneralTable from "../table-generator.js";
-
-var chart;
-document.addEventListener("DOMContentLoaded", async function () {
-    await initChart();
-    const yearPicker = document.getElementById("yearPicker");
-
-    async function updateDataByYear(selectedYear) {
-        // Target PAD Element
-        const targetPadElement = document.getElementById("target-pad");
-        if (!targetPadElement) return;
-        const targetPadValue = await getDataSettings("TARGET_PAD");
-        targetPadElement.textContent = formatCurrency(targetPadValue);
-
-        // Total Potensi Berkas
-        const totalPotensiBerkas = document.getElementById("total-potensi-berkas");
-        if (!totalPotensiBerkas) return;
-        const totalPotensiBerkasValue = await getDataTotalPotensi(selectedYear);
-        totalPotensiBerkas.textContent = formatCurrency(totalPotensiBerkasValue.totalData);
-
-        // Total Berkas Terverifikasi
-        const totalBerkasTerverifikasi = document.getElementById("total-berkas-terverifikasi");
-        if (!totalBerkasTerverifikasi) return;
-        const totalBerkasTerverifikasiValue = await getDataVerification(selectedYear);
-        totalBerkasTerverifikasi.textContent = formatCurrency(totalBerkasTerverifikasiValue.totalData);
-
-        // Total Kekurangan potensi
-        const totalKekuranganPotensi = document.getElementById("total-kekurangan-potensi");
-        if (!totalKekuranganPotensi) return;
-        const totalKekuranganPotensiValue = new Big(targetPadValue) - new Big(totalPotensiBerkasValue.totalData);
-        totalKekuranganPotensi.textContent = formatCurrency(totalKekuranganPotensiValue)
-
-        // Total Potensi PBG dari tata ruang
-        const totalPotensiPBGTataRuang = document.getElementById("total-potensi-pbd-tata-ruang");
-        if (!totalPotensiPBGTataRuang) return;
-        const totalPotensiPBGTataRuangValue = await getDataSettings("TATA_RUANG");
-        totalPotensiPBGTataRuang.textContent = formatCurrency(totalPotensiPBGTataRuangValue);
-
-        // Total Berkas Belum terverifikasi
-        const totalBerkasBelumTerverifikasi = document.getElementById("total-berkas-belum-terverifikasi");
-        if (!totalBerkasBelumTerverifikasi) return;
-        const totalBerkasBelumTerverifikasiValue = await getDataNonVerification(selectedYear);
-        const totalBerkasBelumTerverifikasiCount = totalBerkasBelumTerverifikasiValue.countData;
-        totalBerkasBelumTerverifikasi.textContent = formatCurrency(totalBerkasBelumTerverifikasiValue.totalData);
-
-        // Total Berkas Usaha
-        const totalBerkasUsahaValue = await getDataBusiness(selectedYear);
-        const totalBerkasUsahaCount = totalBerkasUsahaValue.countData;
-        const totalBerkasUsahaTotalData = totalBerkasUsahaValue.totalData;
-
-        // Total Berkas Non Usaha
-        const totalBerkasNonUsahaValue = await getDataNonBusiness(selectedYear);
-        const totalBerkasNonUsahaCount = totalBerkasNonUsahaValue.countData;
-        const totalBerkasNonUsahaTotalData = totalBerkasNonUsahaValue.totalData;
-
-        // Pie Chart Section
-        let persenUsaha = totalBerkasBelumTerverifikasiCount > 0 
-            ? ((totalBerkasUsahaCount / totalBerkasBelumTerverifikasiCount) * 100).toFixed(2)
-            : "0";
-
-        let persenNonUsaha = totalBerkasBelumTerverifikasiCount > 0 
-            ? ((totalBerkasNonUsahaCount / totalBerkasBelumTerverifikasiCount) * 100).toFixed(2)
-            : "0";
-
-        const dataSeriesPieChart = [Number(persenUsaha), Number(persenNonUsaha)]
-        const labelsPieChart = ["Berkas Usaha", "Berkas Non Usaha"];
-        document.querySelector("td[data-category='non-usaha']").textContent = formatCurrency(totalBerkasNonUsahaTotalData).toLocaleString();
-        document.querySelector("td[data-category='non-usaha-percentage']").textContent = persenNonUsaha + "%";
-
-        document.querySelector("td[data-category='usaha']").textContent = formatCurrency(totalBerkasUsahaTotalData).toLocaleString();
-        document.querySelector("td[data-category='usaha-percentage']").textContent = persenUsaha + "%";
-
-        updatePieChart(dataSeriesPieChart, labelsPieChart);
-
-        // Load all Tourism location
-        const allLocation = await getAllLocation();
-        console.log(allLocation);
-
-        // Filter hanya data yang memiliki angka valid
-        let validLocations = allLocation.dataLocation.filter(loc => {
-            return !isNaN(parseFloat(loc.longitude)) && !isNaN(parseFloat(loc.latitude));
-        });
-
-        // Ubah string ke float
-        validLocations = validLocations.map(loc => ({
-            name: loc.project_name,
-            longitude: parseFloat(loc.longitude),
-            latitude: parseFloat(loc.latitude)
-        }));
-
-        console.log(validLocations.name)
-
-        // Inisialisasi peta
-        var map = L.map('map').setView([-7.0230, 107.5275], 10);
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '© OpenStreetMap contributors'
-        }).addTo(map);
-
-        // Tambahkan marker ke peta
-        validLocations.forEach(function(loc) {
-            L.marker([loc.latitude, loc.longitude])
-                .addTo(map)
-                .bindPopup(`<b>${loc.name}</b>`) // Popup saat diklik
-                .bindTooltip(loc.name, { permanent: false, direction: "top" }); // Tooltip saat di-hover
-        });
-
-        // Realisasi terbit PBG
-        const totalRealisasiTerbitPBG = document.getElementById("realisasi-terbit-pbg");
-        if (!totalRealisasiTerbitPBG) return;
-        const totalRealisasiTerbitPBGValue = await getDataSettings("REALISASI_TERBIT_PBG_SUM");
-        totalRealisasiTerbitPBG.textContent = formatCurrency(totalRealisasiTerbitPBGValue);
-
-        // Menunggu Klik DPMPTSP
-        const totalMenungguKlikDpmptsp = document.getElementById("waiting-click-dpmptsp");
-        if (!totalMenungguKlikDpmptsp) return;
-        const totalMenungguKlikDpmptspValue = await getDataSettings("MENUNGGU_KLIK_DPMPTSP_SUM");
-        totalMenungguKlikDpmptsp.textContent = formatCurrency(totalMenungguKlikDpmptspValue);
-
-        // Proses Dinas Teknis
-        const totalProsesDinasTeknis = document.getElementById("processing-technical-services");
-        if (!totalProsesDinasTeknis) return;
-        const totalProsesDinasTeknisValue = await getDataSettings("PROSES_DINAS_TEKNIS_SUM");
-        totalProsesDinasTeknis.textContent = formatCurrency(totalProsesDinasTeknisValue);
-
-        // Load Tabel Baru di Update
-        const tableLastUpdated = new GeneralTable(
-            "pbg-filter-by-updated-at",
-            `${GlobalConfig.apiHost}/api/api-pbg-task?isLastUpdated=true`,
-            `${GlobalConfig.apiHost}`,
-            pbgTaskColumns
-        );
-
-        tableLastUpdated.processData = function (data) {
-            console.log("Response Data:", data);
-            return data.data.map((item) => {
-                return [
-                    item.no,
-                    item.name,
-                    item.registration_number,
-                    item.document_number,
-                    item.address,
-                ];
-            });
-        };
-
-        tableLastUpdated.init();
-
-        // Load Tabel Status SK Terbit
-        const tableSKPBGTerbit = new GeneralTable(
-            "pbg-filter-by-status",
-            `${GlobalConfig.apiHost}/api/api-pbg-task?isLastUpdated=false`,
-            `${GlobalConfig.apiHost}`,
-            pbgTaskColumns
-        );
-
-        tableSKPBGTerbit.processData = function (data) {
-            console.log("Response Data:", data);
-            return data.data.map((item) => {
-                return [
-                    item.no,
-                    item.name,
-                    item.registration_number,
-                    item.document_number,
-                    item.address,
-                ];
-            });
-        };
-
-        tableSKPBGTerbit.init();
-
-        document.querySelector("#pbg-filter-by-updated-at .gridjs-search").hidden = true;
-        document.querySelector("#pbg-filter-by-updated-at .gridjs-footer").hidden = true;
-        document.querySelector("#pbg-filter-by-status .gridjs-search").hidden = true;
-        document.querySelector("#pbg-filter-by-status .gridjs-footer").hidden = true;
-    }
-
-    await updateDataByYear(yearPicker.value);
-
-    yearPicker.addEventListener("change", async function () {
-        console.log("event change dropdown")
-        await updateDataByYear(yearPicker.value);
-    });
-
-});
-
-async function getDataSettings(string_key) {
-    try {
-        const response = await fetch(
-            `${GlobalConfig.apiHost}/api/api-data-settings?search=${string_key}`,
-            {
-                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 data.data?.[0]?.value ?? 0; // Pastikan tidak error jika data kosong
-    } catch (error) {
-        console.error("Error fetching data:", error);
-        return 0;
-    }
-}
-
-async function getDataTotalPotensi(year) {
-    try {
-        const response = await fetch(
-            `${GlobalConfig.apiHost}/api/all-task-documents?year=${year}`,
-            {
-                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 {
-            totalData: data.data.total,
-        };
-    } catch (error) {
-        console.error("Error fetching chart data:", error);
-        return null;
-    }
-}
-
-async function getDataVerification(year) {
-    try {
-        const response = await fetch(
-            `${GlobalConfig.apiHost}/api/verification-documents?year=${year}`,
-            {
-                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 {
-            totalData: data.data.total,
-        };
-    } catch (error) {
-        console.error("Error fetching chart data:", error);
-        return 0
-    }
-}
-
-async function getDataNonVerification(year) {
-    try {
-        const response = await fetch (
-            `${GlobalConfig.apiHost}/api/non-verification-documents?year=${year}`,
-            {
-                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 {
-            countData: data.data.count,
-            totalData: data.data.total,
-        }
-    } catch (error) {
-        console.error("Error fetching chart data:", error);
-        return 0;
-    }
-}
-
-async function getDataBusiness(year) {
-    try {
-        const response = await fetch(
-            `${GlobalConfig.apiHost}/api/business-documents?year=${year}`,
-            {
-                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 {
-            countData: data.data.count,
-            totalData: data.data.total,
-        };
-    } catch (error) {
-        console.error("Error fetching chart data:", error);
-        return 0;
-    }
-}
-
-async function getDataNonBusiness(year) {
-    try {
-        const response = await fetch(
-            `${GlobalConfig.apiHost}/api/non-business-documents?year=${year}`,
-            {
-                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 {
-            countData: data.data.count,
-            totalData: data.data.total
-        }
-    } catch (error) {
-        console.error("Error fetching chart data:", error);
-        return 0;
-    }
-}
-
-async function getAllLocation() {
-    try {
-        const response = await fetch(
-            `${GlobalConfig.apiHost}/api/get-all-location`,
-            {
-                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 {
-            dataLocation: data.data,
-        }
-    } catch (error) {
-        console.error("Error fetching chart data:", error);
-        return 0;
-    }
-}
-
-async function initChart() {
-    var options = {
-        chart: {
-            height: 180,
-            type: 'donut',
-        },
-        series: [0, 0], // Inisialisasi dengan nilai awal
-        labels: ["Berkas Usaha", "Berkas Non Usaha"],
-        legend: {
-            show: false
-        },
-        stroke: {
-            width: 0
-        },
-        plotOptions: {
-            pie: {
-                donut: {
-                    size: '60%',
-                }
-            }
-        },
-        colors: ["#7e67fe", "#17c553"],
-        dataLabels: {
-            enabled: false
-        },
-        responsive: [{
-            breakpoint: 480,
-            options: {
-                chart: {
-                    width: 200
-                }
-            }
-        }],
-        fill: {
-            type: 'gradient'
-        }
-    };
-
-    chart = new ApexCharts(document.querySelector("#conversions"), options);
-    chart.render();
-}
-
-async function updatePieChart(dataSeries, labels) {
-    if (!Array.isArray(dataSeries) || dataSeries.length === 0) {
-        console.error("Data series tidak valid:", dataSeries);
-        return;
-    }
-
-    // Perbarui data series chart
-    chart.updateSeries(dataSeries);
-
-    // Perbarui label jika diperlukan
-    if (Array.isArray(labels) && labels.length === dataSeries.length) {
-        chart.updateOptions({
-            labels: labels
-        });
-    }
-}
-
-// Fungsi untuk format angka ke Rupiah
-function formatCurrency(number) {
-    return new Intl.NumberFormat("id-ID", {
-        style: "currency",
-        currency: "IDR",
-        minimumFractionDigits: 0
-    }).format(number);
-}
-
-const pbgTaskColumns = [
-    "No",
-    "Name",
-    "Nomor Registrasi",
-    "Nomor Dokumen",
-    "Alamat",
-]

resources/js/data/tourisms/data-tourisms.js

@@ -20,9 +20,9 @@ const dataTourismsColumns = [
         name: "Actions",
         widht: "120px",
         formatter: function (cell, row) {
-            const id = row.cells[11].data;
-            const long = row.cells[9].data;
-            const lat = row.cells[10].data;
+            const id = row.cells[10].data;
+            const long = row.cells[8].data;
+            const lat = row.cells[9].data;
             const model = "data/tourisms";
             return gridjs.html(`
                 <div class="d-flex justify-items-end gap-10">

resources/js/data/umkm/data-umkm.js

@@ -27,7 +27,7 @@ const dataUMKMColumns = [
         name: "Actions",
         widht: "120px",
         formatter: function(cell, row) {
-            const id = row.cells[19].data;
+            const id = row.cells[18].data;
             const model = "data/umkm";
             return gridjs.html(`
                 <div class="d-flex justify-items-end gap-10">

resources/views/dashboards/pbg.blade.php

@@ -1,324 +0,0 @@
-@extends('layouts.vertical', ['subtitle' => 'Dashboard'])
-
-@section('css')
-<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
-@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
-@endsection
-@section('content')
-
-@include('layouts.partials/page-title', ['title' => 'Dasboard', 'subtitle' => 'Dashboard PBG'])
-
-
-<div class="card mb-3 mb-xl-0">
-    <div class="card-title mt-3">
-        <div class="d-flex flex-sm-nowrap flex-wrap justify-content-end gap-2 me-3">
-            <select class="form-select w-25 w-sm-auto" id="yearPicker" name="year" style="min-width: 100px;">
-            @for ($i = date('Y'); $i > date('Y') - 5; $i--)
-                <option value="{{ $i }}" {{ $i == date('Y') ? 'selected' : '' }}>{{ $i }}</option>
-            @endfor
-            </select>
-        </div>
-    </div>
-    
-    <div class="card-body">
-        <div class="row">
-            <!-- Card 1 -->
-            <div class="col-md-12 col-lg-6 col-xl-3">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-6">
-                                <p class="text-muted mb-0 text-truncate">Kekurangan Potensi</p>
-                                <h4 class="text-dark mt-2 mb-0" id="total-kekurangan-potensi">Loading...</h4>
-                            </div>
-        
-                            <div class="col-6">
-                                <div class="ms-auto avatar-md bg-soft-primary rounded">
-                                    <iconify-icon icon="solar:pie-chart-2-broken"
-                                        class="fs-32 avatar-title text-primary"></iconify-icon>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="chart04"></div>
-                </div>
-            </div>
-
-            <!-- Card 2 -->
-            <div class="col-md-12 col-lg-6 col-xl-3">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-6">
-                                <p class="text-muted mb-0 text-truncate">Target PAD</p>
-                                <h4 class="text-dark mt-2 mb-0" id="target-pad">Loading...</h4>
-                            </div>
-                            <div class="col-6">
-                                <div class="ms-auto avatar-md bg-soft-primary rounded">
-                                    <iconify-icon icon="solar:globus-outline"
-                                        class="fs-32 avatar-title text-primary"></iconify-icon>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="chart01"></div>
-                </div>
-            </div>
-        
-            <!-- Card 3 -->
-            <div class="col-md-12 col-lg-6 col-xl-3">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-6">
-                                <p class="text-muted mb-0 text-truncate">Total Potensi Berkas</p>
-                                <h4 class="text-dark mt-2 mb-0" id="total-potensi-berkas">Loading...</h4>
-                            </div>
-        
-                            <div class="col-6">
-                                <div class="ms-auto avatar-md bg-soft-primary rounded">
-                                    <iconify-icon icon="solar:users-group-two-rounded-broken"
-                                        class="fs-32 avatar-title text-primary"></iconify-icon>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="chart02"></div>
-                </div>
-            </div>
-
-            <!-- Card 4 -->
-            <div class="col-md-12 col-lg-6 col-xl-3">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-6">
-                                <p class="text-muted mb-0 text-truncate">Perkiraan Potensi PBG dari Tata Ruang</p>
-                                <h4 class="text-dark mt-2 mb-0" id="total-potensi-pbd-tata-ruang">Loading...</h4>
-                            </div>
-        
-                            <div class="col-6">
-                                <div class="ms-auto avatar-md bg-soft-primary rounded">
-                                    <iconify-icon icon="solar:globus-outline"
-                                        class="fs-32 avatar-title text-primary"></iconify-icon>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="chart01"></div>
-                </div>
-            </div>
-        
-        </div>
-
-        <div class="row">
-            <!-- Card 1 -->
-            <div class="col-md-12 col-xl-6">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-6">
-                                <p class="text-muted mb-0 text-truncate">Total Berkas Belum Terverifikasi</p>
-                                <h4 class="text-dark mt-2 mb-0" id="total-berkas-belum-terverifikasi">Loading...</h4>
-                            </div>
-        
-                            <div class="col-6">
-                                <div class="ms-auto avatar-md bg-soft-primary rounded">
-                                    <iconify-icon icon="solar:users-group-two-rounded-broken"
-                                        class="fs-32 avatar-title text-primary"></iconify-icon>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="chart02"></div>
-                </div>
-            </div>
-            
-            <!-- Card 2 -->
-            <div class="col-md-12 col-xl-6">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-6">
-                                <p class="text-muted mb-0 text-truncate">Total Berkas Terverifikasi</p>
-                                <h4 class="text-dark mt-2 mb-0" id="total-berkas-terverifikasi">Loading...</h4>
-                            </div>
-        
-                            <div class="col-6">
-                                <div class="ms-auto avatar-md bg-soft-primary rounded">
-                                    <iconify-icon icon="solar:cart-5-broken"
-                                        class="fs-32 avatar-title text-primary"></iconify-icon>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="chart03"></div>
-                </div>
-            </div>
-        </div>
-
-        <div class="row">
-
-            <div class="col-lg-6">
-                <div class="card card-height-100">
-                    <div class="card-header d-flex align-items-center justify-content-between gap-2">
-                        <h4 class="card-title flex-grow-1 mb-0">Berkas Belum Terverifikasi</h4>
-                    </div>
-        
-                    <div class="card-body">
-                        <div dir="ltr">
-                            <div id="conversions" class="apex-charts"></div>
-                        </div>
-                        <div class="table-responsive mb-n1 mt-2">
-                            <table class="table table-nowrap table-borderless table-sm table-centered mb-0">
-                                <thead class="bg-light bg-opacity-50 thead-sm">
-                                    <tr>
-                                        <th class="py-1">
-                                            KETEGORI
-                                        </th>
-                                        <th class="py-1">NILAI</th>
-                                        <th class="py-1">PERSENTASE</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>NON USAHA</td>
-                                        <td data-category="non-usaha">-</td>
-                                        <td data-category="non-usaha-percentage">-</td>
-                                    </tr>
-                                    <tr>
-                                        <td>USAHA</td>
-                                        <td data-category="usaha">-</td>
-                                        <td data-category="usaha-percentage">-</td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                        <!-- end table-responsive-->
-                    </div>
-        
-                </div> <!-- end card-->
-            </div> <!-- end col -->
-        
-            <div class="col-lg-6">
-                <div class="card">
-                    <div
-                        class="d-flex card-header justify-content-between align-items-center border-bottom border-dashed">
-                        <h4 class="card-title flex-grow-1 mb-0">SEBARAN DATA</h4>
-                    </div>
-        
-                    <div class="card-body pt-0">
-                        <div id="map" style="height: 400px; width: 100%;"></div>
-                    </div> <!-- end card-body-->
-        
-        
-                </div> <!-- end card-->
-            </div> <!-- end col-->
-        </div>
-
-        <div class="row">
-            <!-- Card 1 -->
-            <div class="col-md-12 col-lg-12 col-xl-4">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-6">
-                                <p class="text-muted mb-0 text-truncate">Realisasi Terbit PBG</p>
-                                <h4 class="text-dark mt-2 mb-0" id="realisasi-terbit-pbg">Loading...</h4>
-                            </div>
-        
-                            <div class="col-6">
-                                <div class="ms-auto avatar-md bg-soft-primary rounded">
-                                    <iconify-icon icon="solar:users-group-two-rounded-broken"
-                                        class="fs-32 avatar-title text-primary"></iconify-icon>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="chart02"></div>
-                </div>
-            </div>
-            
-            <!-- Card 2 -->
-            <div class="col-md-12 col-lg-12 col-xl-4">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-6">
-                                <p class="text-muted mb-0 text-truncate">Menunggu Klik DPMPTSP</p>
-                                <h4 class="text-dark mt-2 mb-0" id="waiting-click-dpmptsp">Loading...</h4>
-                            </div>
-        
-                            <div class="col-6">
-                                <div class="ms-auto avatar-md bg-soft-primary rounded">
-                                    <iconify-icon icon="solar:cart-5-broken"
-                                        class="fs-32 avatar-title text-primary"></iconify-icon>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="chart03"></div>
-                </div>
-            </div>
-
-            <!-- Card 3 -->
-            <div class="col-md-12 col-lg-12 col-xl-4">
-                <div class="card">
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-6">
-                                <p class="text-muted mb-0 text-truncate">Berproses Di Dinas Teknis</p>
-                                <h4 class="text-dark mt-2 mb-0" id="processing-technical-services">Loading...</h4>
-                            </div>
-        
-                            <div class="col-6">
-                                <div class="ms-auto avatar-md bg-soft-primary rounded">
-                                    <iconify-icon icon="solar:cart-5-broken"
-                                        class="fs-32 avatar-title text-primary"></iconify-icon>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="chart03"></div>
-                </div>
-            </div>
-        </div>
-
-        <div class="row">
-            <div class="col-md-12 col-lg-12 col-xl-6 mb-3">
-                <div class="card">
-                    <div class="card-header d-flex justify-content-between align-items-center">
-                        <h4 class="card-title mb-0">Baru Di Update</h4>
-                        <a href="{{ route('pbg-task.index') }}" class="btn btn-sm btn-info">
-                            View All
-                        </a>
-                    </div>
-                    <div class="card-body h-100">
-                        <div id="pbg-filter-by-updated-at" class="h-100"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-md-12 col-lg-12 col-xl-6">
-                <div class="card">
-                    <div class="card-header d-flex justify-content-between align-items-center">
-                        <h4 class="card-title mb-0">Daftar SK PBG Terbit</h4>
-                        <a href="{{ route('pbg-task.index') }}" class="btn btn-sm btn-info">
-                            View All
-                        </a>
-                    </div>
-                    <div class="card-body h-100">
-                        <div id="pbg-filter-by-status" class="h-100"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div> <!-- end card body -->
-</div> <!-- end card -->
-
-@endsection
-
-@section('scripts')
-<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
-@vite(['resources/js/dashboards/pbg.js'])
-@endsection

resources/views/maps/google-api.blade.php

@@ -0,0 +1,45 @@
+@extends('layouts.vertical', ['subtitle' => 'Google Maps'])
+@section('css')
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+@endsection
+
+@section('content')
+@include('layouts.partials/page-title', ['title' => 'Maps', 'subtitle' => 'Google Maps'])
+<div id="map" style="width: 100%; height: 90vh;"></div>
+@endsection
+
+@section('scripts')
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script src="https://unpkg.com/togeojson@0.16.0"></script>
+<script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script>
+<script src="https://unpkg.com/leaflet-kml/L.KML.js"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function () {
+        var map = L.map('map').setView([-6.9175, 107.6191], 10); // Jakarta
+
+        // Tambahkan peta dasar dari OpenStreetMap
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Muat file KMZ
+        omnivore.kml("{{ asset('storage/maps/rencanapolaruang_rtrw_2024_2044__rencana_pola_ruang.kml') }}")
+            .on('ready', function () {
+                try {
+                    var bounds = this.getBounds();
+                    if (bounds.isValid()) {
+                        map.fitBounds(bounds);
+                    } else {
+                        console.warn("Bounds tidak valid, gunakan fallback.");
+                        map.setView([-6.9175, 107.6191], 10); // Default ke Jakarta
+                    }
+                } catch (error) {
+                    console.error("Error setting bounds:", error);
+                    map.setView([-6.1751, 106.8650], 10);
+                }
+            })
+            .addTo(map);
+
+    });
+</script>
+@endsection

routes/api.php

@@ -73,7 +73,6 @@ Route::group(['middleware' => 'auth:sanctum'], function (){
     Route::apiResource('tourisms', TourismController::class);
     Route::post('/tourisms/import', [TourismController::class, 'importFromFile']);
     Route::get('/download-template-tourism', [TourismController::class, 'downloadExcelTourism']);
-    Route::get('/get-all-location', [TourismController::class, 'getAllLocation']);
 
     Route::apiResource('spatial-plannings', SpatialPlanningController::class);
     Route::post('/spatial-plannings/import', [SpatialPlanningController::class, 'importFromFile']);

routes/web.php

@@ -5,6 +5,7 @@ use App\Http\Controllers\CustomersController;
 use App\Http\Controllers\Dashboards\LackOfPotentialController;
 use App\Http\Controllers\DataSettingController;
 use App\Http\Controllers\Dashboards\BigDataController;
+use App\Http\Controllers\GoogleApisController;
 use App\Http\Controllers\Home\HomeController;
 use App\Http\Controllers\Master\UsersController;
 use App\Http\Controllers\MenusController;
@@ -32,6 +33,7 @@ Route::group(['middleware' => 'auth'], function(){
         Route::get('/bigdata', [BigDataController::class, 'index'])->name('dashboard.home');
         Route::get('/dashboard-pbg', [BigDataController::class, 'pbg'])->name('dashboard.pbg');
         Route::get('/lack-of-potential', [LackOfPotentialController::class, 'lack_of_potential'])->name('dashboard.lack_of_potential');
+        Route::get('/maps', [GoogleApisController::class, 'index'])->name('dashboard.maps');
     });
     
     // settings