search dropdown

project/database/migrations/2026_03_02_144151_create_pengukuran_balita_table.php

@@ -31,9 +31,6 @@ public function up(): void
             $table->string('hasil');
             $table->decimal('zs_tbu', 5, 2)->nullable();
             $table->decimal('bmi', 5, 2)->nullable();
-            $table->decimal('zs_bmi_u', 5, 2)->nullable();
-
-            $table->string('status_gizi_bmi', 100)->nullable();
 
             $table->timestamps();
         });

project/database/migrations/2026_03_02_144257_create_template_edukasi_table.php

@@ -22,7 +22,7 @@ public function up(): void
                 'Ibu hamil gizi kurang',
                 'Ibu hamil gizi normal',
                 'Ibu hamil gizi lebih',
-                'Ibu hamil obesitas',
+                'Ibu hamil obesitas'
             ])->nullable();
             $table->timestamps();
         });

project/database/migrations/2026_03_02_144304_create_edukasi_table.php

@@ -38,7 +38,7 @@ public function up(): void
                 'Ibu hamil gizi kurang',
                 'Ibu hamil gizi normal',
                 'Ibu hamil gizi lebih',
-                'Ibu hamil obesitas',
+                'Ibu hamil obesitas'
             ])->nullable();
 
             $table->timestamps();

project/database/migrations/2026_04_22_041126_fix_kategori_enum_edukasi.php

@@ -1,33 +0,0 @@
-<?php
-
-use Illuminate\Database\Migrations\Migration;
-use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Support\Facades\DB;
-use Illuminate\Support\Facades\Schema;
-
-return new class extends Migration
-{
-    /**
-     * Run the migrations.
-     */
-    public function up(): void
-    {
-        DB::statement("ALTER TABLE edukasi MODIFY kategori ENUM(
-            'Sangat Pendek',
-            'Pendek',
-            'Normal',
-            'Ibu hamil gizi kurang',
-            'Ibu hamil gizi normal',
-            'Ibu hamil gizi lebih',
-            'Ibu hamil obesitas'
-        ) NULL");
-    }
-
-    /**
-     * Reverse the migrations.
-     */
-    public function down(): void
-    {
-        //
-    }
-};

project/resources/views/layouts/dashboard.blade.php

@@ -19,6 +19,12 @@
 <link href="{{ asset('assets/vendor/simple-datatables/style.css') }}" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
 <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
+<!-- jQuery dulu -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<!-- Baru Select2 -->
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
+<!-- CSS Select2 di head -->
+<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
 
     <style>
     html {

project/resources/views/pengukuran_balita/create.blade.php

@@ -49,18 +49,17 @@
 
                     <div class="col-md-6 mb-3">
                         <label class="form-label fw-semibold">Nama Balita</label>
-                        <div class="input-group">
+                        <select name="balita_id" id="balita_id" class="form-select custom-input" required>
-                            <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
+                            <option value="" selected disabled></option>
-                            <select name="balita_id" id="balita_id" class="form-select border-start-0 custom-input select2" required>
-                                <option value="" selected disabled>Cari nama balita...</option>
                             @foreach($balita as $b)
-                                    <option value="{{ $b->id }}" data-tgl="{{ $b->tgl_lahir }}" data-jk="{{ $b->jenis_kelamin }}">
+                                <option value="{{ $b->id }}"
+                                    data-tgl="{{ $b->tgl_lahir }}"
+                                    data-jk="{{ $b->jenis_kelamin }}">
                                     {{ $b->nama }}
                                 </option>
                             @endforeach
                         </select>
                     </div>
-                    </div>
 
                     <div class="col-md-6 mb-3">
                         <label class="form-label fw-semibold text-muted">Jenis Kelamin</label>
@@ -127,26 +126,46 @@
 </style>
 
 <script>
-// JavaScript kamu tetap sama, logikanya sudah benar
+$(document).ready(function() {
+    // Inisialisasi Select2
+    $('#balita_id').select2({
+        placeholder: 'Cari nama balita...',
+        allowClear: true,
+        width: '100%'
+    });
+
+    // Event change untuk Select2 harus pakai .on('change')
+    $('#balita_id').on('change', function() {
+        updateData();
+    });
+
+    // Event change tanggal tetap sama
+    document.getElementById("tanggal_ukur").addEventListener("change", updateData);
+});
+
 function updateData() {
     let sel = document.getElementById("balita_id");
     let opt = sel.options[sel.selectedIndex];
 
-    if (opt.value) {
+    if (opt && opt.value) {
         let jk = opt.getAttribute("data-jk");
         document.getElementById("jk_display").value = (jk == 1) ? "Laki-laki" : "Perempuan";
         document.getElementById("jk_input").value = jk;
 
         let tglLahir = new Date(opt.getAttribute("data-tgl"));
         let tglUkur = new Date(document.getElementById("tanggal_ukur").value);
-        let totalBulan = (tglUkur.getFullYear() - tglLahir.getFullYear()) * 12 + (tglUkur.getMonth() - tglLahir.getMonth());
+        let totalBulan = (tglUkur.getFullYear() - tglLahir.getFullYear()) * 12
+                        + (tglUkur.getMonth() - tglLahir.getMonth());
         if (tglUkur.getDate() < tglLahir.getDate()) totalBulan--;
 
         document.getElementById("usia_display").value = (totalBulan < 0 ? 0 : totalBulan) + " Bulan";
         document.getElementById("usia_input").value = (totalBulan < 0 ? 0 : totalBulan);
+    } else {
+        document.getElementById("jk_display").value = '';
+        document.getElementById("jk_input").value = '';
+        document.getElementById("usia_display").value = '';
+        document.getElementById("usia_input").value = '';
     }
 }
-document.getElementById("balita_id").addEventListener("change", updateData);
-document.getElementById("tanggal_ukur").addEventListener("change", updateData);
 </script>
 @endsection

project/resources/views/pengukuran_ibuhamil/create.blade.php

@@ -51,18 +51,16 @@
 
                     <div class="col-md-6 mb-3">
                         <label class="form-label fw-semibold">Nama Ibu Hamil</label>
-                        <div class="input-group">
+                        <select name="ibu_hamil_id" id="ibu_id" class="form-select custom-input" required>
-                            <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
+                            <option value="" selected disabled></option>
-                            <select name="ibu_hamil_id" id="ibu_id" class="form-select border-start-0 custom-input select2" required>
-                                <option value="" selected disabled>Cari nama ibu...</option>
                             @foreach($ibu_hamil as $ibu)
-                                    <option value="{{ $ibu->id }}" data-tgl="{{ $ibu->tgl_lahir }}">
+                                <option value="{{ $ibu->id }}"
+                                    data-tgl="{{ $ibu->tgl_lahir }}">
                                     {{ $ibu->nama }}
                                 </option>
                             @endforeach
                         </select>
                     </div>
-                    </div>
 
                     <div class="col-md-6 mb-3">
                         <label class="form-label fw-semibold text-muted">Usia Ibu (Tahun)</label>
@@ -132,9 +130,19 @@
 </style>
 
 <script>
-document.getElementById("ibu_id").addEventListener("change", function() {
+$(document).ready(function() {
-    let selected = this.options[this.selectedIndex];
+    // Inisialisasi Select2
-    let tgl_lahir = selected.getAttribute("data-tgl");
+    $('#ibu_id').select2({
+        placeholder: 'Cari nama ibu hamil...',
+        allowClear: true,
+        width: '100%'
+    });
+
+    // Event change Select2
+    $('#ibu_id').on('change', function() {
+        let selected = document.getElementById("ibu_id");
+        let opt = selected.options[selected.selectedIndex];
+        let tgl_lahir = opt.getAttribute("data-tgl");
 
         if (tgl_lahir) {
             let lahir = new Date(tgl_lahir);
@@ -146,7 +154,10 @@
                 usia--;
             }
             document.getElementById("usia").value = usia + " Tahun";
+        } else {
+            document.getElementById("usia").value = '';
         }
     });
+});
 </script>
 @endsection