templates/backend/dashboard/_card1.html.twig line 1

Open in your IDE?
  2. <style>
  3.     #dashboard-default[style*="display: none"] {
  4.   display: none !important;
  5.   visibility: hidden !important;
  6.   opacity: 0 !important;
  7. }
  8. </style>
  9. <div class="col-xxl-8 d-flex align-items-stretch">
  10.     <div class="card w-100 overflow-hidden rounded-4">
  11.         <div class="card-body position-relative p-4">
  12.             <div class="row">
  13.                 <div class="col-12 col-sm-10">
  14.                     <div class="d-flex align-items-center gap-3 mb-5">
  15.                         <img src="{{ asset('frontend/img/home.png') }}" class="rounded-circle bg-grd-info p-1" width="60" height="60" alt="user">
  16.                         <div class="">
  17.                             <p class="mb-0 fw-semibold">Welcome to</p>
  18.                             <h4 class="fw-semibold mb-0 fs-4 mb-0">Dashboard SGN</h4>
  19.                         </div>
  20.                     </div>
  21.                     <div class="d-flex align-items-center gap-3" id="dashboard-default">
  22.                         <div class="">
  23.                             <h4 class="mb-1 fw-semibold d-flex align-content-center">{{ res_dash['m_plant'][0]['jumlah'] }}<i class="ti ti-arrow-up-right fs-5 lh-base text-success"></i>
  24.                             </h4>
  25.                             <p class="mb-3">PG
  26.                                 <font style="font-size:8px">+
  27.                                     {{ res_dash['m_plant'][1]['jumlah'] }}
  28.                                     MKSO</font>
  29.                             </p>
  30.                             <div
  31.                                 class="progress mb-0" style="height:5px;">{# <div class="progress-bar bg-grd-danger" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> #}
  32.                             </div>
  33.                         </div>
  34.                         <div class="vr"></div>
  35.                         <div class="" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Jumlah PR dari Kolom no_pr Berdasarkan Filter Tahun Anggaran atau Tahun Kalender (tgl_verifikasi_pr)">
  36.                             <h4 class="mb-1 fw-semibold d-flex align-content-center">{{ ungroup[0]['total_pr']  }}<i class="ti ti-arrow-up-right fs-5 lh-base text-success"></i>
  37.                             </h4>
  38.                             <p class="mb-3">Jumlah PR</p>
  39.                             <div
  40.                                 class="progress mb-0" style="height:5px;">{# <div class="progress-bar bg-grd-danger" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> #}
  41.                             </div>
  42.                         </div>
  43.                         <div class="vr"></div>
  44.                         <div class="" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Jumlah PK dari Kolom no_pk Berdasarkan Filter Tahun Anggaran atau Tahun Kalender (tgl_submit_pk_ke_hps)">
  45.                             <h4 class="mb-1 fw-semibold d-flex align-content-center">{{ ungroup[0]['total_pk']  }}<i class="ti ti-arrow-up-right fs-5 lh-base text-success"></i>
  46.                             </h4>
  47.                             <p class="mb-3">Jumlah PK</p>
  48.                             <div
  49.                                 class="progress mb-0" style="height:5px;">{# <div class="progress-bar bg-grd-danger" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> #}
  50.                             </div>
  51.                         </div>
  52.                         <div class="vr"></div>
  53.                         <div class="" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Jumlah PP dari Kolom no_pp Berdasarkan Filter Tahun Anggaran atau Tahun Kalender (tgl_approval_sppbj)">
  54.                             <h4 class="mb-1 fw-semibold d-flex align-content-center">{{ ungroup[0]['total_pp']  }}<i class="ti ti-arrow-up-right fs-5 lh-base text-success"></i>
  55.                             </h4>
  56.                             <p class="mb-3">Jumlah PP</p>
  57.                             <div
  58.                                 class="progress mb-0" style="height:5px;">{# <div class="progress-bar bg-grd-success" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> #}
  59.                             </div>
  60.                         </div>
  61.                         <div class="vr"></div>
  62.                         <div class="" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Nilai Paket Pengadaan diambil dari Kolom Total Nilai Berdasarkan Filter Tahun Anggaran atau Tahun Kalender (tgl_verifikasi_pr)">
  63.                             <h4 class="mb-1 fw-semibold d-flex align-content-center">{{ (ungroup[0]['total_nilai']/1000000000000) |number_format(2, '.', ',')  }}T
  64.                                 <i class="ti ti-arrow-up-right fs-5 lh-base text-success"></i>
  65.                             </h4>
  66.                             <p class="mb-3">Nilai PK</p>
  67.                             <div
  68.                                 class="progress mb-0" style="height:5px;">{# <div class="progress-bar bg-grd-success" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> #}
  69.                             </div>
  70.                         </div>
  71.                         <div class="vr"></div>
  72.                         <div class="" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Jumlah SPPBJ dari Kolom no_sppbj Berdasarkan Filter kategori_tahap Selesai(pemilihan penyedia), Tahun Anggaran atau Tahun Kalender (tgl_approval_sppbj)">
  73.                             <h4 class="mb-1 fw-semibold d-flex align-content-center">{{ ungroup[0]['total_sppbj'] }}
  74.                                 <i class="ti ti-arrow-up-right fs-5 lh-base text-success"></i>
  75.                             </h4>
  76.                             <p class="mb-3">Jumlah SPPBJ</p>
  77.                             <div
  78.                                 class="progress mb-0" style="height:5px;">{# <div class="progress-bar bg-grd-success" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> #}
  79.                             </div>
  80.                         </div>
  81.                         <div class="vr"></div>
  82.                         <div class="" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-theme="dark" title="Jumlah Vendor Pememenang dari Kolom vendor_pememang Berdasarkan Filter kategori_tahap Selesai(pemilihan penyedia), Tahun Anggaran atau Tahun Kalender (tgl_approval_sppbj)">
  83.                             <h4 class="mb-1 fw-semibold d-flex align-content-center">{{ ungroup[0]['total_vendor_pemenang']  }}
  84.                                 <i class="ti ti-arrow-up-right fs-5 lh-base text-success"></i>
  85.                             </h4>
  86.                             <p class="mb-3">Jumlah Vendor Pemenang</p>
  87.                             <div
  88.                                 class="progress mb-0" style="height:5px;">{# <div class="progress-bar bg-grd-success" role="progressbar" style="width: 60%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> #}
  89.                             </div>
  90.                         </div>
  91.                     </div>
  92.                     <div class="d-flex align-items-center gap-3" id="dashboard-ajax" style="display:none;">
  93.                     </div>
  94.                 </div>
  95.                 {# <div class="col-12 col-sm-2">
  96.                     <div class="welcome-back-img pt-4">
  97.                         <img src="{{ asset('frontend/img/logo.png') }}" height="100" alt="">
  98.                     </div>
  99.                 </div> #}
  100.             </div>
  101.             <!--end row-->
  102.         </div>
  103.     </div>
  104. </div>
  105. <script>
  107. $(document).ready(function() {
  109.  // 1️⃣ Saat pertama kali halaman load — langsung isi nilai tahun ke hidden input
  110.   var tahun_awal = $("#tahun").val();
  111.   $("#tahun_anggaran_hidden").val(tahun_awal);
  113.   // 2️⃣ Kalau user ubah tahun — otomatis update hidden input juga
  114.   $("#tahun").on("change", function() {
  115.     $("#tahun_anggaran_hidden").val($(this).val());
  116.   });
  117.   // === tampilkan field sesuai pilihan ===
  118.   function toggleFilter(tipe) {
  119.     if (tipe == 1) {
  120.       $('.mingguan').show();
  121.       $('.bulanan, .tahunan').hide();
  122.     } else if (tipe == 2) {
  123.       $('.bulanan').show();
  124.       $('.mingguan, .tahunan').hide();
  125.     } else {
  126.       $('.tahunan').show();
  127.       $('.mingguan, .bulanan').hide();
  128.     }
  129.   }
  131.   // tampilkan default: mingguan
  132.   toggleFilter(1);
  134.   // saat dropdown periode berubah
  135.   $("#tipe_filter").change(function() {
  136.     toggleFilter($(this).val());
  137.   });
  139. });
  141. // === kirim AJAX saat form disubmit ===
  142.   // === kirim AJAX saat form disubmit ===
  143. $("#form_id").on("submit", function(e) {
  144.   e.preventDefault();
  146.   // Langsung sembunyikan dashboard default dulu
  147.   $("#dashboard-default").css("display", "none");
  148.   
  149.   // Kosongkan dashboard ajax supaya gak dobel
  150.   $("#dashboard-ajax").html("").show();
  152.   $.ajax({
  153.     url: "{{ path('dashboard_card_ungroup') }}",
  154.     type: "POST",
  155.     data: $(this).serialize(),
  156.     beforeSend: function() {
  157.       $("#dashboard-ajax").html(
  158.         `<div class="text-center p-3">
  159.           <div class="spinner-border text-primary" role="status"></div><br/>Loading...
  160.         </div>`
  161.       );
  162.     },
  163.     success: function(result) {
  164.       // pastikan default tetap tersembunyi
  165.       $("#dashboard-default").css("display", "none");
  166.       // tampilkan hasil AJAX
  167.       $("#dashboard-ajax").html(result).show();
  168.     },
  169.     error: function() {
  170.       // kalau error, tampilkan default kembali
  171.       $("#dashboard-default").css("display", "block");
  172.       $("#dashboard-ajax").html(
  173.         `<div class="alert alert-danger p-3 text-center">
  174.           Terjadi kesalahan saat memuat data.
  175.         </div>`
  176.       );
  177.     }
  178.   });
  179. });
  181. </script>