From 9b5e2b5eebe8e3fdceb026bbd78670fc53372025 Mon Sep 17 00:00:00 2001
From: Firliani Fauziah <firlianif@gmail.com>
Date: Wed, 30 Oct 2024 13:17:56 +0700
Subject: [PATCH] statistik penduduk berdasarkan pengaturan menu

---
 app/Helpers/general.php                       |   6 +-
 .../Controllers/Web/PresisiController.php     |  14 +-
 .../views/presisi/kependudukan/head.blade.php |  34 ++
 .../presisi/kependudukan/index.blade.php      | 349 ++----------------
 .../views/presisi/kependudukan/js.blade.php   | 259 +++++++++++++
 .../presisi/kependudukan/kategori.blade.php   |  15 +
 routes/web.php                                |   4 +
 7 files changed, 362 insertions(+), 319 deletions(-)
 create mode 100644 resources/views/presisi/kependudukan/head.blade.php
 create mode 100644 resources/views/presisi/kependudukan/js.blade.php
 create mode 100644 resources/views/presisi/kependudukan/kategori.blade.php

diff --git a/app/Helpers/general.php b/app/Helpers/general.php
index 8d5e2829..1b4231c4 100644
--- a/app/Helpers/general.php
+++ b/app/Helpers/general.php
@@ -293,7 +293,11 @@ function generateMenuPresisi($tree, $parentId = null)
                 if ($parentId) {
                     $result .= "<a class='item-menu dropdown-item' href='{$item->href}'>{$icon}{$item->text}</a>";
                 } else {
-                    $result .= "<a type='button' class='item-menu btn bg-white p-2 text-muted' href='{$item->href}'>{$icon}{$item->text}</a>";
+                    $href = $item->href;
+                    if($href != '/presisi'){
+                        $href = str_contains($item->href, 'module') ? $item->href : '/'.$item->href;
+                    }
+                    $result .= "<a type='button' class='item-menu btn bg-white p-2 text-muted' href='{$href}'>{$icon}{$item->text}</a>";
                 }
             }
         }
diff --git a/app/Http/Controllers/Web/PresisiController.php b/app/Http/Controllers/Web/PresisiController.php
index 7841af75..a03dee06 100644
--- a/app/Http/Controllers/Web/PresisiController.php
+++ b/app/Http/Controllers/Web/PresisiController.php
@@ -35,11 +35,21 @@ public function index()
         return view('presisi.index', compact('categoriesItems', 'listKecamatan', 'listDesa'));
     }
 
-    public function kependudukan()
+    public function kependudukan($id = "")
     {
+        $totalDesa = 0;
+        $pendudukSummary = 0;
+        $configSummary = 0;
+        $keluargaSummary = 0;
+        $categoriesItems = [
+            ['key' => 'kecamatan', 'text' => 'kecamatan', 'value' => $configSummary, 'icon' => 'web/img/kecamatan.jpg'],
+            ['key' => 'desa', 'text' => 'desa/kelurahan', 'value' => $totalDesa, 'icon' => 'web/img/kelurahan.jpg'],
+            ['key' => 'penduduk', 'text' => 'jumlah penduduk', 'value' => $pendudukSummary, 'icon' => 'web/img/penduduk.jpg'],
+            ['key' => 'keluarga', 'text' => 'jumlah keluarga', 'value' => $keluargaSummary, 'icon' => 'web/img/bantuan.jpg'],
+        ];
         $statistik = Penduduk::KATEGORI_STATISTIK;
 
-        return view('presisi.kependudukan.index', compact('statistik'));
+        return view('presisi.kependudukan.index', compact('statistik', 'id', 'categoriesItems'));
     }
 
     public function kesehatan($kuartal = null, $tahun = null, $id = null)
diff --git a/resources/views/presisi/kependudukan/head.blade.php b/resources/views/presisi/kependudukan/head.blade.php
new file mode 100644
index 00000000..af55fbf4
--- /dev/null
+++ b/resources/views/presisi/kependudukan/head.blade.php
@@ -0,0 +1,34 @@
+<div class="card-header">
+    <div class="row">
+        <div class="col-1" style="display: none">
+            <a class="btn btn-sm btn-secondary" data-toggle="collapse"
+                href="#collapse-filter" role="button" aria-expanded="true"
+                aria-controls="collapse-filter">
+                <i class="fas fa-filter"></i>
+            </a>
+        </div>
+        <div class="col-md-2">
+            <button id="btn-tabel" class="btn btn-sm btn-info btn-block btn-sm "
+                data-bs-toggle="collapse" href="#Tabel" role="button"
+                aria-expanded="false" aria-controls="grafik-Tabel" disabled>
+                <i class="fas fa-chart-bar"></i> Tabel
+            </button>
+        </div>
+        <div class="col-md-2">
+            <button id="btn-grafik" class="btn btn-sm btn-success btn-block btn-sm"
+                data-bs-toggle="collapse" href="#grafik-statistik" role="button"
+                aria-expanded="false" aria-controls="grafik-statistik">
+                <i class="fas fa-chart-bar"></i> Grafik
+            </button>
+        </div>
+        <div class="col-md-2">
+            <button id="btn-pie" class="btn btn-sm btn-warning btn-block btn-sm"
+                data-bs-toggle="collapse" href="#pie-statistik" role="button"
+                aria-expanded="false" aria-controls="pie-statistik">
+                <i class="fas fa-chart-pie"></i> Chart
+            </button>
+        </div>
+    </div>
+
+
+</div>
\ No newline at end of file
diff --git a/resources/views/presisi/kependudukan/index.blade.php b/resources/views/presisi/kependudukan/index.blade.php
index 395cece3..6d40eac1 100644
--- a/resources/views/presisi/kependudukan/index.blade.php
+++ b/resources/views/presisi/kependudukan/index.blade.php
@@ -7,70 +7,32 @@
 @include('presisi.partials.head')
 
     <div class="row">
+        <div class="col-md-12">
+            
+            <div class="card rounded-0 border-0 shadow-none">
+                @include('presisi.summary')
+            </div>
+        </div>
+
         <div class="col-12 wow fadeInUp" data-wow-delay="0.3s">
             <div class="info-box shadow-none rounded-0">
                 <div class="info-box-content">
                     <div class="row">
-                        <div class="col-md-3">
+                        <div class="col-md-3 @if($id) d-none @endif" >
                             <div class="card card-primary rounded-0 elevation-0 border">
-                                <div class="card-header rounded-0">
+                                <!-- <div class="card-header rounded-0">
                                     <h3 class="card-title">Statistik Penduduk</h3>
 
-                                </div>
-                                <div class="card-body p-0 ">
-                                    <ul class="nav nav-pills flex-column" id="nav-statistik">
-                                        @foreach ($statistik as $key => $sub)
-                                            <li class="nav-item active">
-                                                <a href="javascript:;" class="nav-link rounded-0"
-                                                    data-key="{{ $key }}" data-name="{{ $sub }}">
-                                                    <i class="fas fa-inbox"></i> {{ $sub }}
-                                                </a>
-                                            </li>
-                                        @endforeach
+                                </div> -->
+                                @include('presisi.kependudukan.kategori')
 
 
-
-                                    </ul>
-                                </div>
-
                             </div>
                         </div>
-                        <div class="col-md-9">
+                        <div class="@if($id) col-md-12 @else col-md-9 @endif">
                             <div class="card card-primary card-outline rounded-0 elevation-0 border">
-                                <div class="card-header">
-                                    <div class="row">
-                                        <div class="col-1" style="display: none">
-                                            <a class="btn btn-sm btn-secondary" data-toggle="collapse"
-                                                href="#collapse-filter" role="button" aria-expanded="true"
-                                                aria-controls="collapse-filter">
-                                                <i class="fas fa-filter"></i>
-                                            </a>
-                                        </div>
-                                        <div class="col-md-2">
-                                            <button id="btn-tabel" class="btn btn-sm btn-info btn-block btn-sm "
-                                                data-bs-toggle="collapse" href="#Tabel" role="button"
-                                                aria-expanded="false" aria-controls="grafik-Tabel" disabled>
-                                                <i class="fas fa-chart-bar"></i> Tabel
-                                            </button>
-                                        </div>
-                                        <div class="col-md-2">
-                                            <button id="btn-grafik" class="btn btn-sm btn-success btn-block btn-sm"
-                                                data-bs-toggle="collapse" href="#grafik-statistik" role="button"
-                                                aria-expanded="false" aria-controls="grafik-statistik">
-                                                <i class="fas fa-chart-bar"></i> Grafik
-                                            </button>
-                                        </div>
-                                        <div class="col-md-2">
-                                            <button id="btn-pie" class="btn btn-sm btn-warning btn-block btn-sm"
-                                                data-bs-toggle="collapse" href="#pie-statistik" role="button"
-                                                aria-expanded="false" aria-controls="pie-statistik">
-                                                <i class="fas fa-chart-pie"></i> Chart
-                                            </button>
-                                        </div>
-                                    </div>
-
-
-                                </div>
+                            
+                                
 
                                 <div class="card-body p-0">
                                     <div class="row">
@@ -103,20 +65,32 @@
                                     </div>
 
 
-                                    <div class="chart" id="grafik" style="height: 500px; display: none">
-
+                                    @if(!$id)
+                                    <div class="row">
+                                        <div class="col-md-12">
+                                            <div class="chart" id="pie" style="height: 500px;"></div><br><br>
+                                        </div>
+                                        <div class="col-md-12">
+                                            <div class="chart" id="grafik" style="height: 500px;"></div>
+                                        </div>
                                     </div>
-
-                                    <div class="chart" id="pie" style="height: 500px; display: none">
-
+                                    @else
+                                    <div class="row">
+                                        <div class="col-md-8">
+                                            <div class="chart" id="grafik" style="height: 500px;"></div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div class="chart" id="pie" style="height: 500px;"></div>
+                                        </div>
                                     </div>
+                                    @endif
 
                                     <div class="table-responsive mailbox-messages">
                                         <table class="table table-hover table-striped" id="statistik">
                                             <thead>
                                                 <tr>
                                                     <th>No</th>
-                                                    <th class="judul">Rentang Umur</th>
+                                                    <th class="judul">Kelompok</th>
                                                     <th class="text-center">Jumlah</th>
                                                     <th class="text-center">Laki - laki</th>
                                                     <th class="text-center">Perempuan</th>
@@ -142,261 +116,4 @@
 
     </div>
 @endsection
-@push('js')
-    <script>
-        $(function() {
-            var statistik = [];
-            var data_grafik = [];
-            let exclude_chart = ['JUMLAH', 'BELUM MENGISI', 'TOTAL']
-
-            $('#nav-statistik li a:first').addClass('active');
-            $('#nav-statistik li').click(function(e) {
-                e.preventDefault();
-                $('#nav-statistik').find('li a.active').removeClass('active');
-                $(this).find('a').addClass('active');
-
-                $('#statistik thead').find('.judul').html($(this).find('a').data('name'))
-                table.ajax.reload()
-            });
-
-            $('#btn-tabel').click(function() {
-                $(this).prop('disabled', true);
-                $('#btn-grafik').prop('disabled', false);
-                $('#btn-pie').prop('disabled', false);
-
-                $('#grafik').hide();
-                $('#pie').hide()
-                $('#statistik').show()
-            })
-
-            $('#btn-grafik').click(function() {
-                $(this).prop('disabled', true);
-                $('#btn-tabel').prop('disabled', false);
-                $('#btn-pie').prop('disabled', false);
-
-                $('#grafik').show();
-                $('#pie').hide()
-                $('#statistik').hide()
-            })
-
-            $('#btn-pie').click(function() {
-                $(this).prop('disabled', true);
-                $('#btn-tabel').prop('disabled', false);
-                $('#btn-grafik').prop('disabled', false);
-
-                $('#grafik').hide();
-                $('#pie').show()
-                $('#statistik').hide()
-            })
-
-
-            var table = $('#statistik').DataTable({
-                "processing": true,
-                "serverSide": true,
-                'pageLength': -1,
-                "ordering": false,
-                paging: false,
-                searching: false,
-                info: false,
-
-                'order': [
-                    [0, 'desc']
-                ],
-
-                "ajax": {
-                    "url": "{{ url('api/v1/statistik-web/penduduk') }}",
-                    "type": "get",
-                    "data": function(d) {
-                        var nav = $('#nav-statistik').find('li a.active')
-                        d['filter[id]'] = nav.data('key');
-                        // d.config_desa = $('#position').val();
-                    },
-                    dataSrc: function(json) {
-                        if (json.data.length > 0) {
-                            data_grafik = [];
-                            json.data.forEach(function(item, index) {
-                                if (!exclude_chart.includes(item.attributes.nama)) {
-                                    data_grafik.push(item.attributes)
-                                }
-
-                            });
-                            grafikPie();
-
-                        }
-                        return json.data
-                    },
-
-                    error: function(xhr, status, error) {
-                        // Handle the error callback here
-                        console.error(error);
-                    }
-                },
-                columns: [{
-                        data: null,
-                        sortable: false,
-                        render: function(data, type, row, meta) {
-                            return meta.row + meta.settings._iDisplayStart + 1;
-                        }
-                    },
-                    {
-                        data: 'attributes.nama',
-                        sortable: false,
-                        searchable: false,
-
-                    },
-
-                    {
-                        data: null,
-                        sortable: false,
-                        searchable: false,
-                        render: function(data, type, row, meta) {
-
-                            return `<td class="text-center"><span class="mr-4">${data.attributes.jumlah}  </span>  ${data.attributes
-                                .persentase_jumlah}</td>`;
-                        }
-                    },
-
-                    {
-                        data: null,
-                        sortable: false,
-                        searchable: false,
-                        render: function(data, type, row, meta) {
-                            return `<td class="text-center"><span class="mr-4">${data.attributes.laki_laki}  </span>  ${data.attributes
-                                .persentase_laki_laki}</td>`;
-                        }
-                    },
-
-                    {
-                        data: null,
-                        sortable: false,
-                        searchable: false,
-                        render: function(data, type, row, meta) {
-                            return `<td class="text-center"><span class="mr-4">${data.attributes?.perempuan}  </span>  ${data.attributes
-                                .persentase_perempuan}</td>`;
-                        }
-                    },
-
-
-                ],
-            });
-
-            function grafikPie() {
-                $('#barChart').remove();
-                $('#donutChart').remove();
-
-                var data = modifikasiData(data_grafik);
-                $('#grafik').append('<canvas id="barChart"></canvas>');
-                $('#pie').append('<canvas id="donutChart"></canvas>');
-                tampilGrafik(data[0]);
-                tampilPie(data[1]);
-            }
-
-            function tampilGrafik(areaChartData) {
-                var barChartCanvas = $('#barChart').get(0).getContext('2d')
-                var barChartData = $.extend(true, {}, areaChartData)
-                var temp0 = areaChartData.datasets[0] ?? []
-                var temp1 = areaChartData.datasets[1] ?? []
-                barChartData.datasets[0] = temp1
-                barChartData.datasets[1] = temp0
-            
-                var barChartOptions = {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    datasetFill: false
-                }
-
-                new Chart(barChartCanvas, {
-                    type: 'bar',
-                    data: barChartData,
-                    options: barChartOptions
-                })
-            }
-
-            function tampilPie(donutData) {
-                var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
-                var donutOptions = {
-                    maintainAspectRatio: false,
-                    responsive: true,
-                }
-                new Chart(donutChartCanvas, {
-                    type: 'doughnut',
-                    data: donutData,
-                    options: donutOptions
-                })
-            }
-
-            function modifikasiData(data) {
-                var dataBaruGrafik = []
-                var labelsPie = [];
-                var dataPie = [];
-                var backgroundColorPie = [];
-
-                data.forEach(function(item, index) {
-                    let color = randColorRGB();
-                    let colorPoint = randColorHex();
-
-                    dataBaruGrafik.push({
-                        label: item.nama,
-                        backgroundColor: color,
-                        borderColor: color,
-                        pointRadius: false,
-                        pointColor: color,
-                        pointStrokeColor: colorPoint,
-                        pointHighlightFill: colorPoint,
-                        pointHighlightStroke: color,
-                        data: [item.jumlah, 1]
-                    })
-
-                    labelsPie.push(item.nama)
-                    dataPie.push(item.jumlah)
-                    backgroundColorPie.push(color)
-                })
-
-                return [{
-                        labels: ['Data'],
-                        datasets: dataBaruGrafik
-                    },
-                    {
-                        labels: labelsPie,
-                        datasets: [{
-                            data: dataPie,
-                            backgroundColor: backgroundColorPie,
-                        }]
-                    }
-                ]
-            }
-        });
-    </script>
-
-    <script nonce="{{ csp_nonce() }}" type="text/javascript">
-        document.addEventListener("DOMContentLoaded", function(event) {
-            "use strict";
-            $.get('{{ url('index.php/api/v1/data-website') }}', {}, function(result) {
-                let category = result.data.categoriesItems
-                let listDesa = result.data.listDesa
-                let listKecamatan = result.data.listKecamatan
-
-                for (let index in category) {
-                    $(`.kategori-item .jumlah-${index}-elm`).text(category[index]['value'])
-                };
-                let _optionKecamatan = []
-                let _optionDesa = []
-                for (let item in listKecamatan) {
-                    _optionKecamatan.push(`<option>${item}</option>`)
-                }
-
-                for (let item in listDesa) {
-                    _optionDesa.push(`<optgroup label='${item}'>`)
-                    for (let desa in listDesa[item]) {
-                        _optionDesa.push(`<option value='${desa}'>${listDesa[item][desa]}</option>`)
-                    }
-                    _optionDesa.push(`</optgroup>`)
-                    _optionKecamatan.push(`<option>${item}</option>`)
-                }
-
-                $('select[name=search_kecamatan]').append(_optionKecamatan.join(''))
-                $('select[name=search_desa]').append(_optionDesa.join(''))
-            }, 'json')
-        });
-    </script>
-@endpush
+@include('presisi.kependudukan.js')
diff --git a/resources/views/presisi/kependudukan/js.blade.php b/resources/views/presisi/kependudukan/js.blade.php
new file mode 100644
index 00000000..255a51c2
--- /dev/null
+++ b/resources/views/presisi/kependudukan/js.blade.php
@@ -0,0 +1,259 @@
+@push('js')
+    <script>
+        $(function() {
+            var statistik = [];
+            var data_grafik = [];
+            let exclude_chart = ['JUMLAH', 'BELUM MENGISI', 'TOTAL']
+
+            $('#nav-statistik li a:first').addClass('active');
+            $('#nav-statistik li').click(function(e) {
+                e.preventDefault();
+                $('#nav-statistik').find('li a.active').removeClass('active');
+                $(this).find('a').addClass('active');
+
+                $('#statistik thead').find('.judul').html($(this).find('a').data('name'))
+                table.ajax.reload()
+            });
+
+            $('#btn-tabel').click(function() {
+                $(this).prop('disabled', true);
+                $('#btn-grafik').prop('disabled', false);
+                $('#btn-pie').prop('disabled', false);
+
+                $('#grafik').hide();
+                $('#pie').hide()
+                $('#statistik').show()
+            })
+
+            $('#btn-grafik').click(function() {
+                $(this).prop('disabled', true);
+                $('#btn-tabel').prop('disabled', false);
+                $('#btn-pie').prop('disabled', false);
+
+                $('#grafik').show();
+                $('#pie').hide()
+                $('#statistik').hide()
+            })
+
+            $('#btn-pie').click(function() {
+                $(this).prop('disabled', true);
+                $('#btn-tabel').prop('disabled', false);
+                $('#btn-grafik').prop('disabled', false);
+
+                $('#grafik').hide();
+                $('#pie').show()
+                $('#statistik').hide()
+            })
+
+
+            var table = $('#statistik').DataTable({
+                "processing": true,
+                "serverSide": true,
+                'pageLength': -1,
+                "ordering": false,
+                paging: false,
+                searching: false,
+                info: false,
+
+                'order': [
+                    [0, 'desc']
+                ],
+
+                "ajax": {
+                    "url": "{{ url('api/v1/statistik-web/penduduk') }}",
+                    "type": "get",
+                    "data": function(d) {
+                        var nav = $('#nav-statistik').find('li a.active')
+                        d['filter[id]'] = nav.data('key');
+                        d['filter[tahun]'] = '';
+                        // d.config_desa = $('#position').val();
+                    },
+                    dataSrc: function(json) {
+                        if (json.data.length > 0) {
+                            data_grafik = [];
+                            json.data.forEach(function(item, index) {
+                                if (!exclude_chart.includes(item.attributes.nama)) {
+                                    data_grafik.push(item.attributes)
+                                }
+
+                            });
+                            grafikPie();
+
+                        }
+                        return json.data
+                    },
+
+                    error: function(xhr, status, error) {
+                        // Handle the error callback here
+                        console.error(error);
+                    }
+                },
+                columns: [{
+                        data: null,
+                        sortable: false,
+                        render: function(data, type, row, meta) {
+                            return meta.row + meta.settings._iDisplayStart + 1;
+                        }
+                    },
+                    {
+                        data: 'attributes.nama',
+                        sortable: false,
+                        searchable: false,
+
+                    },
+
+                    {
+                        data: null,
+                        sortable: false,
+                        searchable: false,
+                        render: function(data, type, row, meta) {
+
+                            return `<td class="text-center"><span class="mr-4">${data.attributes.jumlah}  </span>  ${data.attributes
+                                .persentase_jumlah}</td>`;
+                        }
+                    },
+
+                    {
+                        data: null,
+                        sortable: false,
+                        searchable: false,
+                        render: function(data, type, row, meta) {
+                            return `<td class="text-center"><span class="mr-4">${data.attributes.laki_laki}  </span>  ${data.attributes
+                                .persentase_laki_laki}</td>`;
+                        }
+                    },
+
+                    {
+                        data: null,
+                        sortable: false,
+                        searchable: false,
+                        render: function(data, type, row, meta) {
+                            return `<td class="text-center"><span class="mr-4">${data.attributes?.perempuan}  </span>  ${data.attributes
+                                .persentase_perempuan}</td>`;
+                        }
+                    },
+
+
+                ],
+            });
+
+            function grafikPie() {
+                $('#barChart').remove();
+                $('#donutChart').remove();
+
+                var data = modifikasiData(data_grafik);
+                $('#grafik').append('<canvas id="barChart"></canvas>');
+                $('#pie').append('<canvas id="donutChart"></canvas>');
+                tampilGrafik(data[0]);
+                tampilPie(data[1]);
+            }
+
+            function tampilGrafik(areaChartData) {
+                var barChartCanvas = $('#barChart').get(0).getContext('2d')
+                var barChartData = $.extend(true, {}, areaChartData)
+                var temp0 = areaChartData.datasets[0] ?? []
+                var temp1 = areaChartData.datasets[1] ?? []
+                barChartData.datasets[0] = temp1
+                barChartData.datasets[1] = temp0
+            
+                var barChartOptions = {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    datasetFill: false
+                }
+
+                new Chart(barChartCanvas, {
+                    type: 'bar',
+                    data: barChartData,
+                    options: barChartOptions
+                })
+            }
+
+            function tampilPie(donutData) {
+                var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
+                var donutOptions = {
+                    maintainAspectRatio: false,
+                    responsive: true,
+                }
+                new Chart(donutChartCanvas, {
+                    type: 'doughnut',
+                    data: donutData,
+                    options: donutOptions
+                })
+            }
+
+            function modifikasiData(data) {
+                var dataBaruGrafik = []
+                var labelsPie = [];
+                var dataPie = [];
+                var backgroundColorPie = [];
+
+                data.forEach(function(item, index) {
+                    let color = randColorRGB();
+                    let colorPoint = randColorHex();
+
+                    dataBaruGrafik.push({
+                        label: item.nama,
+                        backgroundColor: color,
+                        borderColor: color,
+                        pointRadius: false,
+                        pointColor: color,
+                        pointStrokeColor: colorPoint,
+                        pointHighlightFill: colorPoint,
+                        pointHighlightStroke: color,
+                        data: [item.jumlah, 1]
+                    })
+
+                    labelsPie.push(item.nama)
+                    dataPie.push(item.jumlah)
+                    backgroundColorPie.push(color)
+                })
+
+                return [{
+                        labels: ['Data'],
+                        datasets: dataBaruGrafik
+                    },
+                    {
+                        labels: labelsPie,
+                        datasets: [{
+                            data: dataPie,
+                            backgroundColor: backgroundColorPie,
+                        }]
+                    }
+                ]
+            }
+        });
+    </script>
+
+    <script nonce="{{ csp_nonce() }}" type="text/javascript">
+        document.addEventListener("DOMContentLoaded", function(event) {
+            "use strict";
+            $.get('{{ url('index.php/api/v1/data-website') }}', {}, function(result) {
+                let category = result.data.categoriesItems
+                let listDesa = result.data.listDesa
+                let listKecamatan = result.data.listKecamatan
+
+                for (let index in category) {
+                    $(`.kategori-item .jumlah-${index}-elm`).text(category[index]['value'])
+                };
+                let _optionKecamatan = []
+                let _optionDesa = []
+                for (let item in listKecamatan) {
+                    _optionKecamatan.push(`<option>${item}</option>`)
+                }
+
+                for (let item in listDesa) {
+                    _optionDesa.push(`<optgroup label='${item}'>`)
+                    for (let desa in listDesa[item]) {
+                        _optionDesa.push(`<option value='${desa}'>${listDesa[item][desa]}</option>`)
+                    }
+                    _optionDesa.push(`</optgroup>`)
+                    _optionKecamatan.push(`<option>${item}</option>`)
+                }
+
+                $('select[name=search_kecamatan]').append(_optionKecamatan.join(''))
+                $('select[name=search_desa]').append(_optionDesa.join(''))
+            }, 'json')
+        });
+    </script>
+@endpush
\ No newline at end of file
diff --git a/resources/views/presisi/kependudukan/kategori.blade.php b/resources/views/presisi/kependudukan/kategori.blade.php
new file mode 100644
index 00000000..7d9f208d
--- /dev/null
+++ b/resources/views/presisi/kependudukan/kategori.blade.php
@@ -0,0 +1,15 @@
+<div class="card-body p-0 ">
+    <ul class="nav nav-pills flex-column" id="nav-statistik">
+        @foreach ($statistik as $key => $sub)
+            <li class="nav-item active">
+                <a href="javascript:;" class="nav-link rounded-0"
+                    data-key="{{ $key }}" data-name="{{ $sub }}">
+                    <i class="fas fa-inbox"></i> {{ $sub }}
+                </a>
+            </li>
+        @endforeach
+
+
+
+    </ul>
+</div>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index b598afdf..6996c6c4 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -161,10 +161,14 @@
     Route::post('download/{download}', DownloadCounterController::class)->name('web.download.counter');
 });
 
+Route::get('/module/penduduk/{id}', [PresisiController::class, 'kependudukan'])->name('presisi.kependudukan');
+Route::get('/statistik-penduduk', [PresisiController::class, 'kependudukan'])->name('presisi.kependudukan');
+
 Route::prefix('presisi')->middleware('check.presisi')->group(function () {
     Route::get('/', [PresisiController::class, 'index'])->name('presisi.index');
     Route::view('/sosial',   'presisi.sosial.index');
     Route::get('/kependudukan', [PresisiController::class, 'kependudukan'])->name('presisi.kependudukan');
+    Route::get('/statistik-penduduk', [PresisiController::class, 'kependudukan'])->name('presisi.kependudukan');
     Route::get('/kesehatan', [PresisiController::class, 'kesehatan'])->name('presisi.kesehatan');
     Route::get('/kesehatan/{kuartal}/{tahun}/{id}', [PresisiController::class, 'kesehatan'])->name('presisi.kesehatan');
     Route::get('/bantuan', [PresisiController::class, 'bantuan'])->name('presisi.bantuan');