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

Open in your IDE?
  1. {% extends "backend/base/base.html.twig" %}
  2. {% block body %}
  3.     <div class="row">
  4.         {{ include('backend/dashboard/_filter.html.twig', {last_update: last_update, tipe_tahun: tipe_tahun, tahun: tahun, tanggal_awal: tanggal_awal, tanggal_akhir: tanggal_akhir, full:0,module:module}) }}
  5.         <div class="row">
  6.             <div class="col-6 col-xl-6">
  7.                 <div class="card w-100 rounded-4">
  8.                     <div class="card-body">
  9.                         <div class="d-flex flex-column gap-3">
  10.                             <div class="card-header p-3 bg-transparent">
  11.                                 <div class="d-flex align-items-center justify-content-between">
  12.                                     <div class="">
  13.                                         <h5 class="mb-0">Progres Pemilihan Penyedia</h5>
  14.                                     </div>
  15.                                 </div>
  16.                             </div>
  17.                             <div class="position-relative">
  18.                                 <div class="piechart-legend">
  19.                                     <h2 class="mb-1">{{res.tahap_dalam_proses[0].count + res.tahap_selesai[0].count}}</h2>
  20.                                     <h6 class="mb-0">Total</h6>
  21.                                 </div>
  22.                                 <div id="container-proses"></div>
  23.                             </div>
  24.                             {% set total = res.tahap_dalam_proses[0].count + res.tahap_selesai[0].count %}
  25.                             {% set proses_percent = total > 0 ? (res.tahap_dalam_proses[0].count / total * 100)|round(2) : 0 %}
  26.                             {% set selesai_percent = total > 0 ? (res.tahap_selesai[0].count / total * 100)|round(2) : 0 %}
  27.                             <div class="d-flex flex-column gap-3">
  28.                                 <div>
  29.                                     <div class="d-flex align-items-center justify-content-between">
  30.                                         <p class="mb-0 d-flex align-items-center gap-2 w-25">
  31.                                             <span class="material-icons-outlined fs-6 text-primary">fiber_manual_record</span>Dalam Proses
  32.                                         </p>
  33.                                         <div>
  34.                                             <p class="mb-0">{{ res.tahap_dalam_proses[0].count}}
  35.                                                 ({{ proses_percent }}%)</p>
  36.                                         </div>
  37.                                     </div>
  38.                                     <div class="progress" style="height: 6px;">
  39.                                         <div class="progress-bar bg-primary" role="progressbar" style="width: {{ proses_percent }}%;" aria-valuenow="{{ proses_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
  40.                                     </div>
  41.                                 </div>
  43.                                 <div>
  44.                                     <div class="d-flex align-items-center justify-content-between">
  45.                                         <p class="mb-0 d-flex align-items-center gap-2 w-25">
  46.                                             <span class="material-icons-outlined fs-6 text-danger">fiber_manual_record</span>Selesai
  47.                                         </p>
  48.                                         <div>
  49.                                             <p class="mb-0">{{ res.tahap_selesai[0].count }}
  50.                                                 ({{ selesai_percent }}%)</p>
  51.                                         </div>
  52.                                     </div>
  53.                                     <div class="progress" style="height: 6px;">
  54.                                         <div class="progress-bar bg-danger" role="progressbar" style="width: {{ selesai_percent }}%;" aria-valuenow="{{selesai_percent }}" aria-valuemin="0" aria-valuemax="100"></div>
  55.                                     </div>
  56.                                 </div>
  57.                             </div>
  58.                         </div>
  59.                     </div>
  60.                 </div>
  61.             </div>
  62.             <div class="col-12 col-lg-6 col-xxl-4 d-flex">
  63.                 <div class="card w-100 rounded-4">
  64.                     <div class="card-body">
  65.                         <div class="card-header p-3 bg-transparent">
  66.                             <div class="d-flex align-items-center justify-content-between">
  67.                                 <div class="">
  68.                                     <h5 class="mb-0">Waktu Proses</h5>
  69.                                 </div>
  70.                             </div>
  71.                         </div>
  72.                         <ul class="list-group list-group-flush">
  73.                             <li class="list-group-item px-0 bg-transparent">
  74.                                 <div class="d-flex align-items-center gap-3">
  75.                                     <div class="wh-42 d-flex align-items-center justify-content-center rounded-3 bg-grd-primary">
  76.                                         <span class="material-icons-outlined text-white">calendar_today</span>
  77.                                     </div>
  78.                                     <div class="flex-grow-1">
  79.                                         <h6 class="mb-0">Tahap Pembuatan Paket</h6>
  80.                                     </div>
  81.                                     <div class="d-flex align-items-center gap-3">
  82.                                         <p class="mb-0">{{ res.tahap_pembuatan_paket[0].count  }}</p>
  83.                                         {# <p class="mb-0 fw-bold text-success">28%</p> #}
  84.                                     </div>
  85.                                 </div>
  86.                             </li>
  87.                             <li class="list-group-item px-0 bg-transparent">
  88.                                 <div class="d-flex align-items-center gap-3">
  89.                                     <div class="wh-42 d-flex align-items-center justify-content-center rounded-3 bg-grd-success">
  90.                                         <span class="material-icons-outlined text-white">calendar_today</span>
  91.                                     </div>
  92.                                     <div class="flex-grow-1">
  93.                                         <h6 class="mb-0">Penyusunan HPS</h6>
  94.                                     </div>
  95.                                     <div class="d-flex align-items-center gap-3">
  96.                                         <p class="mb-0">{{ res.tahap_penyusunan_hps[0].count  }}</p>
  97.                                         {# <p class="mb-0 fw-bold text-danger">15%</p> #}
  98.                                     </div>
  99.                                 </div>
  100.                             </li>
  101.                             <li class="list-group-item px-0 bg-transparent">
  102.                                 <div class="d-flex align-items-center gap-3">
  103.                                     <div class="wh-42 d-flex align-items-center justify-content-center rounded-3 bg-grd-branding">
  104.                                         <span class="material-icons-outlined text-white">calendar_today</span>
  105.                                     </div>
  106.                                     <div class="flex-grow-1">
  107.                                         <h6 class="mb-0">Pemilihan Penyedia</h6>
  108.                                     </div>
  109.                                     <div class="d-flex align-items-center gap-3">
  110.                                         <p class="mb-0">{{ res.tahap_pemilihan_penyedia[0].count  }}</p>
  111.                                         {# <p class="mb-0 fw-bold text-success">30.5%</p> #}
  112.                                     </div>
  113.                                 </div>
  114.                             </li>
  115.                         </ul>
  116.                     </div>
  117.                 </div>
  118.             </div>
  119.             
  120.             <div class="col-12 col-xxl-6 d-flex">
  121.                 <div class="card rounded-4 w-100">
  122.                     <div class="card-body">
  123.                     <div class="d-flex align-items-start justify-content-between mb-3">
  124.                         {# <div class="card-header p-3 bg-transparent">
  125.                             <div class="d-flex align-items-center justify-content-between">
  126.                                 <div class="">
  127.                                     <h5 class="mb-0">REKAPITULASI JUMLAH PAKET BERDASARKAN TAHAPAN, SUMBER DANA, DAN PLANT</h5>
  128.                                 </div>
  129.                             </div>
  130.                         </div> #}
  131.                     </div>
  132.                     <div class="table-responsive">
  133.                         {{ include('backend/laporan/_table1.html.twig', {result:result,group:'kategori_plant',page_name:'laporan'}) }}
  134.                     </div>
  135.                     </div>
  136.                 </div>
  137.             </div>
  138.             <div class="col-12 col-xxl-6 d-flex">
  139.                 <div class="card rounded-4 w-100">
  140.                     <div class="card-body">
  141.                     <div class="d-flex align-items-start justify-content-between mb-3">
  142.                         {# <div class="card-header p-3 bg-transparent">
  143.                             <div class="d-flex align-items-center justify-content-between">
  144.                                 <div class="">
  145.                                     <h5 class="mb-0">REKAPITULASI JUMLAH PAKET BERDASARKAN TAHAPAN, SUMBER DANA, DAN PLANT</h5>
  146.                                 </div>
  147.                             </div>
  148.                         </div> #}
  149.                     </div>
  150.                     <div class="table-responsive">
  151.                          {{ include('backend/laporan/_table2.html.twig', {result:result,group:'kategori_plant',page_name:'laporan'}) }}
  152.                     </div>
  153.                     </div>
  154.                 </div>
  155.             </div>
  156.         </div>
  157.     </div>
  161. <script>
  162.     $(document).ready(function () {
  163.          var options = {
  164.     series: [{{res.tahap_dalam_proses[0].count}}, {{res.tahap_selesai[0].count}}],  // angka sesuai urutan labels
  165.     chart: {
  166.         height: 290,
  167.         type: 'donut',
  168.     },
  169.     labels: ["Dalam Proses", "Selesai"],   // <<<<< nama kategori
  170.     legend: {
  171.         position: 'bottom',
  172.         show: false // karena legend kamu bikin manual
  173.     },
  174.     fill: {
  175.         type: 'gradient',
  176.         gradient: {
  177.             shade: 'dark',
  178.             gradientToColors: ['#17ad37', '#ee0979'], // warna gradasi
  179.             shadeIntensity: 1,
  180.             type: 'vertical',
  181.             opacityFrom: 1,
  182.             opacityTo: 1,
  183.         },
  184.     },
  185.     colors: ["#0d6efd", "#dc3545"], // <<<<< sesuaikan dengan warna ikon di bawah
  186.     dataLabels: {
  187.         enabled: false
  188.     },
  189.     plotOptions: {
  190.         pie: {
  191.             donut: {
  192.                 size: "85%"
  193.             }
  194.         }
  195.     },
  196.     responsive: [{
  197.         breakpoint: 480,
  198.         options: {
  199.             chart: {
  200.                 height: 270
  201.             },
  202.             legend: {
  203.                 position: 'bottom',
  204.                 show: false
  205.             }
  206.         }
  207.     }]
  208. };
  210. var chart = new ApexCharts(document.querySelector("#container-proses"), options);
  211. chart.render();
  213. });
  214. </script>{% endblock %}