feature: first check point

app/Http/Controllers/Api/PbgTaskController.php

@@ -21,9 +21,35 @@ class PbgTaskController extends Controller
     public function __construct(GoogleSheetService $googleSheetService){
         $this->googleSheetService = $googleSheetService;
     }
-    public function index()
+    public function index(Request $request)
     {
-        //
+        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,6 +106,18 @@ class TourismController extends Controller
         }
     }
 
+    public function getAllLocation()
+    {
+        $locations = Tourism::whereNotNull('longitude')
+                    ->whereNotNull('latitude')
+                    ->select('longitude', 'latitude')
+                    ->get();
+
+        return response()->json([
+            'data' => $locations
+        ]);
+    }
+
     /**
      * Display the specified resource.
      */

app/Http/Controllers/Dashboards/BigDataController.php

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

resources/js/dashboards/pbg.js

@@ -0,0 +1,442 @@
+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 location
+        const allLocation = await getAllLocation();
+        console.log(allLocation);
+
+        // 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/views/dashboards/pbg.blade.php

@@ -0,0 +1,323 @@
+@extends('layouts.vertical', ['subtitle' => 'Dashboard'])
+
+@section('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="world-map-markers" class="mt-3" style="height: 309px">
+                        </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')
+@vite(['resources/js/dashboards/pbg.js'])
+@endsection

routes/api.php

@@ -73,6 +73,7 @@ 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']);