diff --git a/admin/guru.html b/admin/guru.html
index 5cec7bf..bacc0c2 100644
--- a/admin/guru.html
+++ b/admin/guru.html
@@ -41,7 +41,7 @@
     <a href="index.html" class="logo">Koperasi Guru</a>
     <button type="button" class="button-close fa fa-times js__menu_close"></button>
     <div class="user">
-      <a href="#" class="avatar"><img src="http://placehold.it/80x80" alt=""><span class="status online"></span></a>
+      <a href="#" class="avatar"><img src="../assets/images/admin.png" alt=""><span class="status online"></span></a>
       <h5 class="name"></h5>
       <h5 class="position"></h5>
       <!-- /.name -->
@@ -109,34 +109,56 @@
 </div>
 <!-- /.fixed-navbar -->
 
+<div class="modal fade" id="sini_modalnya" role="dialog">
+  <div class="modal-dialog ">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal">&times;</button>
+        <h4 class="modal-title">Modal Header</h4>
+      </div>
+      <div class="modal-body row">
+        <p>This is a small modal.</p>
+      </div>
+      <div class="modal-footer">
+        
+      </div>
+    </div>
+  </div>
+</div>
+
 
 <div id="wrapper">
   <div class="main-content">
     <div class="row small-spacing">
       <div class="col-lg-6 col-xs-12">
         <div class="box-content card">
-          <h4 class="box-title" style="background: #0055FF">Form Penambahan Guru</h4>
+          <h4 class="box-title" style="background: #0055FF ;cursor: pointer;" onclick="myFunction('div_tambah_user')">Form Penambahan Guru</h4>
           <!-- /.box-title -->
-          <div class="card-content">
-            <form>
+          <div class="card-content" style="overflow-x: auto; display: none;" id="div_tambah_user">
+            <form id="sini_form">
               <div class="form-group">
                 <label for="exampleInputEmail1">NIK Guru</label>
-                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Masukkan NIK Guru">
+                <input type="text" class="form-control"  id="nik_user" name="nik_user" placeholder="Masukkan NIK Guru" maxlength="16" onkeypress="return isNumberKey(event)" >
               </div>
               <div class="form-group">
                 <label for="exampleInputPassword1">Nama Guru</label>
-                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Masukkan Nama">
+                <input type="text" class="form-control" id="nama" name="nama" placeholder="Masukkan Nama">
               </div>
+              <div class="form-group">
+                <label for="exampleInputPassword1">Alamat</label>
+                <textarea name="alamat" id="alamat" class="form-control" style="resize: none;" placeholder="Masukkan Alamat"></textarea>
+              </div>
+
               <div class="form-group">
                 <label for="exampleInputEmail1">Simpanan Pokok</label>
-                <select class="form-control" id="simpanan_pokok">
+                <select class="form-control" id="simpanan_pokok" name="simpanan_pokok">
                   <option disabled="" selected="" value="">-Pilih Simpanan Pokok</option>
                   <option value="10000000">Rp. 10,000,000</option>
                   <option value="15000000">Rp. 15,000,000</option>
                   <option value="20000000">Rp. 20,000,000</option>
                 </select>
               </div>
-              <center><button type="button" class="btn btn-primary btn-sm waves-effect waves-light">Tambah Guru</button></center>
+              <center><button type="button" class="btn btn-primary btn-sm waves-effect waves-light" onclick="tambah_user()">Tambah Guru</button></center>
             </form>
           </div>
           <!-- /.card-content -->
@@ -147,9 +169,9 @@
 
       <div class="col-lg-6 col-xs-12">
         <div class="box-content card">
-          <h4 class="box-title" style="background: #0055FF">List Guru</h4>
+          <h4 class="box-title" style="background: #0055FF ;cursor: pointer;" onclick="myFunction('div_table_user')">List Guru</h4>
           <!-- /.box-title -->
-          <div class="card-content" style="overflow-x: auto;">
+          <div class="card-content" style="overflow-x: auto; display: none;" id="div_table_user">
             <table id="table_list_guru" class="table table-striped table-bordered display" style="width:100%">
               <thead>
                 <tr>
@@ -158,29 +180,11 @@
                   <th>Nama</th>
                   <th>Tanggal Daftar</th>
                   <th>Simpanan Pokok</th>
+                  <th>Status</th>
                   <th>Aksi</th>
                 </tr>
               </thead>
               
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>1234567890123456</td>
-                  <td>Guru 1</td>
-                  <td>30-08-2001</td>
-                  <td>Rp. 15,000,000</td>
-                  <td><button type="button" class="btn btn-primary btn-xs waves-effect waves-light">Detail</button></td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>1234567890123456</td>
-                  <td>Guru 2</td>
-                  <td>27-05-2009</td>
-                  <td>Rp. 15,000,000</td>
-                  <td><button type="button" class="btn btn-primary btn-xs waves-effect waves-light">Detail</button></td>
-                </tr>
-                
-              </tbody>
             </table>
             <hr>
             <center><button type="button" class="btn btn-primary btn-sm waves-effect waves-light">Cetak Laporan</button></center>
@@ -232,12 +236,292 @@
   <script src="../assets/sweet-alert/block/jquery.blockUI.js"></script>
   <script type="text/javascript">
     var table;
-    $(document).ready(function() {
- 
-      //datatables
-      table = $('#table_list_guru').DataTable();
+    function datatables() {
+      table = $('#table_list_guru').DataTable({ 
+        // "searching": false,
+        "lengthMenu": [ [5, 10, 15, -1], [5, 10, 15, "All"] ],
+        "pageLength": 15,
+        "ordering": true,
+        "processing": true, 
+        "serverSide": true, 
+        "order": [[ 4, 'desc' ]], 
+         
+        "ajax": {
+          "url": url,
+          "type": "POST",
+          data : {proses : 'table_user'}
+        },
 
-    });
+        "columnDefs": [
+          { 
+            "targets": [ 0 ,6], 
+            "orderable": false, 
+          },
+        ],
+      });
+    }
+    datatables()
+
+    async function tambah_user(){
+      // console.log('sini tambah user');
+      const nik_user = $("#nik_user").val();
+      const nama = $("#nama").val();
+      const alamat = $("#alamat").val();
+      const simpanan_pokok = $("#simpanan_pokok").val();
+      // console.log(nik_user)
+      // console.log(nama)
+      // console.log(simpanan_pokok)
+      if(nik_user == ''){
+        toastnya('NIK User Harus Terisi');
+        $("#nik_user").focus();
+      }
+      else if(nik_user.length != 16){
+        toastnya('NIK User Harus Panjang 16 Karakter');
+        $("#nik_user").focus();
+      }
+      else if(nama == ''){
+        toastnya('Nama User Harus Terisi');
+        $("#nama").focus();
+      }
+      else if(alamat == ''){
+        toastnya('Alamat Harus Terisi');
+        $("#alamat").focus();
+      }
+      else if(simpanan_pokok == null){
+        toastnya('Simpanan Pokok Harus Terpilih');
+        $("#simpanan_pokok").focus();
+      }else{
+        // console.log('jalankan')
+        let data = $("#sini_form").serializeArray();
+        data = objectifyForm(data)
+        // console.log(objectifyForm(data))
+        $.ajax({
+          url: url+"api/user/",
+          type: 'post',
+          data: {data : data },
+          beforeSend: function(res) {
+                               
+            $.blockUI({ 
+              message: "Sedang Diproses", 
+              css: { 
+              border: 'none', 
+              padding: '15px', 
+              backgroundColor: '#000', 
+              '-webkit-border-radius': '10px', 
+              '-moz-border-radius': '10px', 
+              opacity: .5, 
+              color: '#fff' 
+            } });
+          },
+          success:  function  (response) {
+            $('#sini_form')[0].reset();
+            $.unblockUI();
+            $('#table_list_guru').dataTable().fnDestroy();
+            datatables()
+            console.log(response)
+            swal({
+              title : "Success",
+              text:  "User Baru Berhasil Ditambah,\nUsername dan Password adalah NIK User yang dimasukkan",
+              icon: "success",
+              buttons: {
+                cancel: false,
+                confirm: false,
+              },
+              timer : 1500
+              // dangerMode: true,
+            })
+            
+          },
+          error: function(XMLHttpRequest, textStatus, errorThrown) { 
+            console.log(errorThrown)
+            $.unblockUI();
+            switch (errorThrown) {
+              case "Bad Request":
+                toastnya(`NIK ${nik_user} telah terdaftar dalam sistem sebelumnya`)
+                $("#nik_user").focus()
+                break;
+              case "Internal Server Error":
+                toastnya(errorThrown)
+                break;
+              default:
+                swal({
+                  text: "Koneksi Gagal, Sila Pastikan Perangkat Terhubung Jaringan Internet",
+                  icon: "warning",
+                  buttons: {
+                      cancel: false,
+                      confirm: true,
+                    },
+                  // dangerMode: true,
+                })
+                .then((hehe) =>{
+                  location.reload();
+                });
+                break;
+            }
+           
+          } 
+        });
+
+      }
+    }
+
+    async function detail_user(nik_user){
+      // console.log(nik_user)
+      let data = await JSON.parse( $.ajax({
+        url: url+"api/user",
+        type: 'get',
+        data: {where : {nik_user : nik_user} },
+        async : false
+      }).responseText).data[0];
+
+      // console.log(data)
+
+      let html =  `<div class="row small-spacing">
+        <div class="col-lg-12 col-xs-12">
+          <form class="card-content" id="sini_form_detail" >
+            <div class="form-group">
+              <label for="exampleInputEmail1">NIK User</label>
+              <input type="text" class="form-control" id="nik_user_deyail" name="nik_user" value="${data.nik_user}" disabled>
+            </div>
+            <div class="form-group">
+              <label for="exampleInputEmail1">Nama</label>
+              <input type="text" class="form-control" id="nama_detail" name="nama" value="${data.nama}" disabled>
+            </div>
+            <div class="form-group">
+              <label for="exampleInputEmail1">Tanggal Daftar</label>
+              <input type="text" class="form-control" id="tanggal_daftar_detail" name="tanggal_daftar" value="${data.tanggal_daftar}" disabled>
+            </div>
+            <div class="form-group">
+              <label for="exampleInputEmail1">Simpanan Pokok</label>
+              <input type="text" class="form-control" id="simpanan_pokok_detail" name="simpanan_pokok" value="${data.simpanan_pokok}" disabled>
+            </div>
+            <div class="form-group">
+              <label for="exampleInputEmail1">Alamat</label>
+              <textarea class="form-control" style="disabled:none" disabled>${data.alamat}</textarea>
+            </div>
+            <div class="form-group">
+              
+            </div>
+                
+          </form>
+          <!-- /.card-content -->
+        </div>
+      </div>`
+
+      let footer = `<a href="user_detail.html?nik_user=${data.nik_user}"><button type="button" class="btn btn-primary btn-xs">Lihat Detail</button></a> <button type="button" onclick="diaktivasi_user(${data.nik_user},'${data.nama}')" class="btn btn-danger btn-xs">Diaktivasi User</button>`
+
+      await $("#sini_modalnya .modal-body").html(html)
+      await $("#sini_modalnya .modal-footer").html(footer)
+      await $("#sini_modalnya .modal-header .modal-title").html("Detail User")
+      await $("#sini_modalnya .modal-dialog").attr('class','modal-dialog')
+      await $('#sini_modalnya').modal('show');
+    }
+
+
+    async function diaktivasi_user(nik_user,nama){
+      // console.log(nik_user)
+      swal({
+        text: `Diaktivasi User atas \n NIK : '${nik_user}'\nNama : ${nama}`,
+        icon: "warning",
+        buttons: {
+            cancel: true,
+            confirm: true,
+          },
+        // dangerMode: true,
+      })
+      .then((hehe) =>{
+        // location.reload();
+        let today = new Date();
+        let dd = String(today.getDate()).padStart(2, '0');
+        let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+        let yyyy = today.getFullYear();
+        let h = addZero(today.getHours());
+        let m = addZero(today.getMinutes());
+        let s = addZero(today.getSeconds());
+        today = yyyy+'-'+mm+'-'+dd+' '+h + ":" + m + ":" + s
+        if(hehe){
+          
+          // console.log('jalanakan diaktivasi');
+          let where = { nik_user : nik_user};
+          let detail = {status : 'Tidak Aktif' , tanggal_berhenti : today}
+
+          $.ajax({
+            url: url+"api/user/",
+            type: 'put',
+            data: {where : where, detail : detail },
+            beforeSend: function(res) {
+                                
+              $.blockUI({ 
+                message: "Sedang Diproses", 
+                css: { 
+                border: 'none', 
+                padding: '15px', 
+                backgroundColor: '#000', 
+                '-webkit-border-radius': '10px', 
+                '-moz-border-radius': '10px', 
+                opacity: .5, 
+                color: '#fff' 
+              } });
+            },
+            success:  function  (response) {
+              // $('#sini_form')[0].reset();
+              $.unblockUI();
+              $('#table_list_guru').dataTable().fnDestroy();
+              datatables()
+              $('#sini_modalnya').modal('hide');
+              console.log(response)
+              swal({
+                title : "Success",
+                text:  "User Berhasil Diaktivasi",
+                icon: "success",
+                buttons: {
+                  cancel: false,
+                  confirm: false,
+                },
+                timer : 3000
+                // dangerMode: true,
+              })
+              
+            },
+            error: function(XMLHttpRequest, textStatus, errorThrown) { 
+              console.log(errorThrown)
+              $.unblockUI();
+              switch (errorThrown) {
+                case "Bad Request":
+                  toastnya(`Request Yang Dilakukan Gagal`)
+                  // $("#nik_user").focus()
+                  break;
+                case "Internal Server Error":
+                  toastnya(errorThrown)
+                  break;
+                default:
+                  swal({
+                    text: "Koneksi Gagal, Sila Pastikan Perangkat Terhubung Jaringan Internet",
+                    icon: "warning",
+                    buttons: {
+                        cancel: false,
+                        confirm: true,
+                      },
+                    // dangerMode: true,
+                  })
+                  .then((hehe) =>{
+                    location.reload();
+                  });
+                  break;
+              }
+            
+            } 
+          });
+
+        }
+      });
+    
+    
+    }
+
+    
+
+    
   </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/admin/index.html b/admin/index.html
index bf804c9..4c18787 100644
--- a/admin/index.html
+++ b/admin/index.html
@@ -39,7 +39,7 @@
     <a href="index.html" class="logo">Koperasi Guru</a>
     <button type="button" class="button-close fa fa-times js__menu_close"></button>
     <div class="user">
-      <a href="#" class="avatar"><img src="http://placehold.it/80x80" alt=""><span class="status online"></span></a>
+      <a href="#" class="avatar"><img src="../assets/images/admin.png" alt=""><span class="status online"></span></a>
       <h5 class="name"></h5>
       <h5 class="position"></h5>
       <!-- /.name -->
diff --git a/admin/laporan_koperasi.html b/admin/laporan_koperasi.html
index 6334ab7..9ebc073 100644
--- a/admin/laporan_koperasi.html
+++ b/admin/laporan_koperasi.html
@@ -41,7 +41,7 @@
     <a href="index.html" class="logo">Koperasi Guru</a>
     <button type="button" class="button-close fa fa-times js__menu_close"></button>
     <div class="user">
-      <a href="#" class="avatar"><img src="http://placehold.it/80x80" alt=""><span class="status online"></span></a>
+      <a href="#" class="avatar"><img src="../assets/images/admin.png" alt=""><span class="status online"></span></a>
       <h5 class="name"></h5>
       <h5 class="position"></h5>
       <!-- /.name -->
diff --git a/admin/list_barang.html b/admin/list_barang.html
index 46821c9..f532167 100644
--- a/admin/list_barang.html
+++ b/admin/list_barang.html
@@ -41,7 +41,7 @@
     <a href="index.html" class="logo">Koperasi Guru</a>
     <button type="button" class="button-close fa fa-times js__menu_close"></button>
     <div class="user">
-      <a href="#" class="avatar"><img src="http://placehold.it/80x80" alt=""><span class="status online"></span></a>
+      <a href="#" class="avatar"><img src="../assets/images/admin.png" alt=""><span class="status online"></span></a>
       <h5 class="name"></h5>
       <h5 class="position"></h5>
       <!-- /.name -->
diff --git a/admin/pinjaman.html b/admin/pinjaman.html
index 351e1c5..6514ef4 100644
--- a/admin/pinjaman.html
+++ b/admin/pinjaman.html
@@ -41,7 +41,7 @@
     <a href="index.html" class="logo">Koperasi Guru</a>
     <button type="button" class="button-close fa fa-times js__menu_close"></button>
     <div class="user">
-      <a href="#" class="avatar"><img src="http://placehold.it/80x80" alt=""><span class="status online"></span></a>
+      <a href="#" class="avatar"><img src="../assets/images/admin.png" alt=""><span class="status online"></span></a>
       <h5 class="name"></h5>
       <h5 class="position"></h5>
       <!-- /.name -->
diff --git a/admin/simpanan_pokok.html b/admin/simpanan_pokok.html
index d85d534..7be236a 100644
--- a/admin/simpanan_pokok.html
+++ b/admin/simpanan_pokok.html
@@ -41,7 +41,7 @@
     <a href="index.html" class="logo">Koperasi Guru</a>
     <button type="button" class="button-close fa fa-times js__menu_close"></button>
     <div class="user">
-      <a href="#" class="avatar"><img src="http://placehold.it/80x80" alt=""><span class="status online"></span></a>
+      <a href="#" class="avatar"><img src="../assets/images/admin.png" alt=""><span class="status online"></span></a>
       <h5 class="name"></h5>
       <h5 class="position"></h5>
       <!-- /.name -->
@@ -116,9 +116,9 @@
       
       <div class="col-lg-12 col-xs-12">
         <div class="box-content card">
-          <h4 class="box-title" style="background: #0055FF">List Simpnan Pokok Guru</h4>
+          <h4 class="box-title" style="background: #0055FF ;cursor: pointer;" onclick="myFunction('div_list_simpanan')">List Simpnan Pokok Guru</h4>
           <!-- /.box-title -->
-          <div class="card-content" style="overflow-x: auto;">
+          <div class="card-content" style="overflow-x: auto; display: none;" id="div_list_simpanan">
             <table id="table_list_guru" class="table table-striped table-bordered display" style="width:100%">
               <thead>
                 <tr>
@@ -127,29 +127,12 @@
                   <th>Nama</th>
                   <th>Tanggal Daftar</th>
                   <th>Simpanan Pokok</th>
-                  <th>Aksi</th>
+                  <th>Status</th>
+                  <!-- <th>Aksi</th> -->
                 </tr>
               </thead>
               
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>1234567890123456</td>
-                  <td>Guru 1</td>
-                  <td>30-08-2001</td>
-                  <td>Rp. 15,000,000</td>
-                  <td><button type="button" class="btn btn-primary btn-xs waves-effect waves-light">Detail</button></td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>1234567890123456</td>
-                  <td>Guru 2</td>
-                  <td>27-05-2009</td>
-                  <td>Rp. 15,000,000</td>
-                  <td><button type="button" class="btn btn-primary btn-xs waves-effect waves-light">Detail</button></td>
-                </tr>
-                
-              </tbody>
+              
             </table>
             <hr>
             <center><button type="button" class="btn btn-primary btn-sm waves-effect waves-light">Cetak Laporan</button></center>
@@ -201,12 +184,31 @@
   <script src="../assets/sweet-alert/block/jquery.blockUI.js"></script>
   <script type="text/javascript">
     var table;
-    $(document).ready(function() {
- 
-      //datatables
-      table = $('#table_list_guru').DataTable();
+    function datatables() {
+      table = $('#table_list_guru').DataTable({ 
+        // "searching": false,
+        "lengthMenu": [ [5, 10, 15, -1], [5, 10, 15, "All"] ],
+        "pageLength": 15,
+        "ordering": true,
+        "processing": true, 
+        "serverSide": true, 
+        "order": [[ 4, 'desc' ]], 
+         
+        "ajax": {
+          "url": url,
+          "type": "POST",
+          data : {proses : 'table_simpanan_pokok'}
+        },
 
-    });
+        "columnDefs": [
+          { 
+            "targets": [ 0 ], 
+            "orderable": false, 
+          },
+        ],
+      });
+    }
+    datatables()
   </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/admin/simpanan_sukarela.html b/admin/simpanan_sukarela.html
index 4857923..7582bff 100644
--- a/admin/simpanan_sukarela.html
+++ b/admin/simpanan_sukarela.html
@@ -27,6 +27,7 @@
   <!-- <link rel="stylesheet" href="../assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css"> -->
   <link rel="stylesheet" href="../assets/fonts/material-design/css/materialdesignicons.css">
   <link rel="stylesheet" href="../assets/sweet-alert/sweetalert.css">
+  <link rel="stylesheet" href="../assets/plugin/select2/css/select2.min.css">
   <style type="text/css">
     .swal-modal .swal-text {
       text-align: center;
@@ -41,7 +42,7 @@
     <a href="index.html" class="logo">Koperasi Guru</a>
     <button type="button" class="button-close fa fa-times js__menu_close"></button>
     <div class="user">
-      <a href="#" class="avatar"><img src="http://placehold.it/80x80" alt=""><span class="status online"></span></a>
+      <a href="#" class="avatar"><img src="../assets/images/admin.png" alt=""><span class="status online"></span></a>
       <h5 class="name"></h5>
       <h5 class="position"></h5>
       <!-- /.name -->
@@ -109,29 +110,44 @@
 </div>
 <!-- /.fixed-navbar -->
 
+<div class="modal fade" id="sini_modalnya" role="dialog">
+  <div class="modal-dialog ">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal">&times;</button>
+        <h4 class="modal-title">Modal Header</h4>
+      </div>
+      <div class="modal-body row">
+        <p>This is a small modal.</p>
+      </div>
+      <div class="modal-footer">
+        
+      </div>
+    </div>
+  </div>
+</div>
+
 
 <div id="wrapper">
   <div class="main-content">
     <div class="row small-spacing">
       <div class="col-lg-6 col-xs-12">
         <div class="box-content card">
-          <h4 class="box-title" style="background: #0055FF">Form Update Simpanan Sukarela</h4>
+          <h4 class="box-title" style="background: #0055FF ;cursor: pointer;" onclick="myFunction('div_update_simpanan_sukarela')">Form Update Simpanan Sukarela</h4>
           <!-- /.box-title -->
-          <div class="card-content">
+          <div class="card-content" style="overflow-x: auto; display: none;" id="div_update_simpanan_sukarela">
             <form>
               <div class="form-group">
                 <label for="exampleInputEmail1">NIK Guru</label>
-                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Masukkan NIK Guru">
+                <select id='input_nik_pembeli' name="nik_user" id="nik_user" class="form-control" style="width: 100%" >
+                  <option value='0'>- Cari User -</option>
+                </select>
               </div>
-              <!-- <div class="form-group">
-                <label for="exampleInputPassword1">Nama Guru</label>
-                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Masukkan Nama">
-              </div> -->
               <div class="form-group">
                 <label for="exampleInputEmail1">Simpanan Sukarela (<i>Rp.</i>)</label>
-                <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Masukkan Jumlah Simpanan Sukarela (Rp.)">
+                <input type="text" class="form-control" id="simpanan_sukarela" maxlength="10" placeholder="Masukkan Jumlah Simpanan Sukarela (Rp.)">
               </div>
-              <center><button type="button" class="btn btn-primary btn-sm waves-effect waves-light">Update Simpanan Sukarela</button></center>
+              <center><button type="button" class="btn btn-primary btn-sm waves-effect waves-light" onclick="update_simpanan_sukarela()">Update Simpanan Sukarela</button></center>
             </form>
           </div>
           <!-- /.card-content -->
@@ -142,9 +158,9 @@
 
       <div class="col-lg-6 col-xs-12">
         <div class="box-content card">
-          <h4 class="box-title" style="background: #0055FF">List Simpanan Sukrela Guru</h4>
+          <h4 class="box-title" style="background: #0055FF ;cursor: pointer;" onclick="myFunction('div_list_simpanan')">List Simpanan Sukrela Guru</h4>
           <!-- /.box-title -->
-          <div class="card-content" style="overflow-x: auto;">
+          <div class="card-content" style="overflow-x: auto; display: none;" id="div_list_simpanan">
             <table id="table_list_guru" class="table table-striped table-bordered display" style="width:100%">
               <thead>
                 <tr>
@@ -152,27 +168,10 @@
                   <th>NIK</th>
                   <th>Nama</th>
                   <th>Tanggal Simpanan Sukarela Terakhir</th>
+                  <th>Simpanan Sukarela Terakhir</th>
                   <th>Aksi</th>
                 </tr>
               </thead>
-              
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>1234567890123456</td>
-                  <td>Guru 1</td>
-                  <td>30-08-2001</td>
-                  <td><button type="button" class="btn btn-primary btn-xs waves-effect waves-light">Detail</button></td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>1234567890123456</td>
-                  <td>Guru 2</td>
-                  <td>27-05-2009</td>
-                  <td><button type="button" class="btn btn-primary btn-xs waves-effect waves-light">Detail</button></td>
-                </tr>
-                
-              </tbody>
             </table>
             <hr>
             <center><button type="button" class="btn btn-primary btn-sm waves-effect waves-light">Cetak Laporan</button></center>
@@ -222,13 +221,354 @@
   <script src="../assets/sweet-alert/toastr/toastr.min.js"></script>
   <link rel="stylesheet" type="text/css" href="../assets/sweet-alert/toastr/toastr.min.css">
   <script src="../assets/sweet-alert/block/jquery.blockUI.js"></script>
+  <script src="../assets/plugin/select2/js/select2.min.js"></script>
+  <script src="../assets/scripts/form.demo.min.js"></script>
   <script type="text/javascript">
     var table;
-    $(document).ready(function() {
- 
-      //datatables
-      table = $('#table_list_guru').DataTable();
+    function datatables() {
+      table = $('#table_list_guru').DataTable({ 
+        // "searching": false,
+        "lengthMenu": [ [5, 10, 15, -1], [5, 10, 15, "All"] ],
+        "pageLength": 15,
+        "ordering": true,
+        "processing": true, 
+        "serverSide": true, 
+        "order": [[ 1, 'desc' ]], 
+         
+        "ajax": {
+          "url": url,
+          "type": "POST",
+          data : {proses : 'table_list_guru_simpanan_sukarela'}
+        },
 
+        "columnDefs": [
+          { 
+            "targets": [ 0 ,3,4,5], 
+            "orderable": false, 
+          },
+        ],
+      });
+    }
+    datatables()  
+
+
+    let today = new Date();
+    let dd = String(today.getDate()).padStart(2, '0');
+    let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+    let yyyy = today.getFullYear();
+
+    $("#input_nik_pembeli").select2({
+      ajax: {
+        url: url,
+        type: "post",
+        dataType: 'json',
+        delay: 250,
+        data: function (params) {
+          return {
+            searchTerm: params.term,
+            proses : 'cari_usernya' // search term
+          };
+        },
+        processResults: function (response) {
+          // console.log(response)
+          return {
+            results: response
+          };
+        },
+        cache: true
+      }
+    });
+
+
+    async function update_simpanan_sukarela(){
+      // console.log('jalankan update')
+      const nik_user = $("#input_nik_pembeli").val()
+      let simpanan_sukarela = $("#simpanan_sukarela").val()
+
+      if(nik_user == 0){
+        toastnya('NIK User Harus Terisi / Dicari');
+        $("#input_nik_pembeli").focus()
+      }else if(simpanan_sukarela == ''){
+        toastnya('Simpanan Sukarela Harus Terisi');
+        $("#simpanan_sukarela").focus()
+      }else{
+        // console.log('jalankan')
+        // console.log(nik_user)
+        // console.log(simpanan_wajib)
+        // console.log(tanggal_simpanan_wajib)
+
+        swal({
+          text: `Update Simpanan Sukarela User dengan\nNIK : ${nik_user}`,
+          icon: "info",
+          buttons: {
+              cancel: true,
+              confirm: true,
+            },
+          // dangerMode: true,
+        })
+        .then((hehe) =>{
+          
+          if(hehe){
+            
+            // console.log('jalanakan diaktivasi');
+            let h = addZero(today.getHours());
+            let m = addZero(today.getMinutes());
+            let s = addZero(today.getSeconds());
+            today1 = yyyy+'-'+mm+'-'+dd+' '+h + ":" + m + ":" + s
+            // console.log(today1)
+            let where = { nik_user : nik_user};
+            simpanan_sukarela = [{tanggal_simpanan : today1+' '+h + ":" + m + ":" + s,simpanan : simpanan_sukarela.replace(/\,/g,'')}];
+            let detail = {simpanan_sukarela : simpanan_sukarela};
+
+            // console.log(where)
+            // console.log(detail)
+
+            $.ajax({
+              url: url+"api/user/",
+              type: 'put',
+              data: {where : where, detail : detail },
+              beforeSend: function(res) {
+                                  
+                $.blockUI({ 
+                  message: "Sedang Diproses", 
+                  css: { 
+                  border: 'none', 
+                  padding: '15px', 
+                  backgroundColor: '#000', 
+                  '-webkit-border-radius': '10px', 
+                  '-moz-border-radius': '10px', 
+                  opacity: .5, 
+                  color: '#fff' 
+                } });
+              },
+              success:  function  (response) {
+                // $('#sini_form')[0].reset();
+                $.unblockUI();
+                $('#table_list_guru').dataTable().fnDestroy();
+                datatables()
+                // $('#sini_modalnya').modal('hide');
+                console.log(response)
+                swal({
+                  title : "Success",
+                  text:  "Simpanan Wajib User Berhasil Diupdate",
+                  icon: "success",
+                  buttons: {
+                    cancel: false,
+                    confirm: false,
+                  },
+                  timer : 3000
+                  // dangerMode: true,
+                })
+                
+              },
+              error: function(XMLHttpRequest, textStatus, errorThrown) { 
+                console.log(errorThrown)
+                $.unblockUI();
+                switch (errorThrown) {
+                  case "Bad Request":
+                    toastnya(`Request Yang Dilakukan Gagal`)
+                    // $("#nik_user").focus()
+                    break;
+                  case "Internal Server Error":
+                    toastnya(errorThrown)
+                    break;
+                  default:
+                    swal({
+                      text: "Koneksi Gagal, Sila Pastikan Perangkat Terhubung Jaringan Internet",
+                      icon: "warning",
+                      buttons: {
+                          cancel: false,
+                          confirm: true,
+                        },
+                      // dangerMode: true,
+                    })
+                    .then((hehe) =>{
+                      location.reload();
+                    });
+                    break;
+                }
+              
+              } 
+            });
+
+            
+          }
+        });
+      
+      
+
+      }
+
+    
+    } 
+
+
+    async function detail_user(nik_user){
+      // console.log(nik_user)
+      let data = await JSON.parse( $.ajax({
+        url: url+"api/user",
+        type: 'get',
+        data: {where : {nik_user : nik_user} },
+        async : false
+      }).responseText).data[0];
+
+      // console.log(data.simpanan_wajib)
+      let simpanan_sukarela = JSON.parse(data?.simpanan_sukarela) ?? null
+      // console.log(simpanan_sukarela)
+      if(simpanan_sukarela != null){
+        simpanan_sukarela.sort(function (a, b) {
+          var tanggal_simpananA = a.tanggal_simpanan; // ignore upper and lowercase
+          var tanggal_simpananB = b.tanggal_simpanan; // ignore upper and lowercase
+          if (tanggal_simpananA < tanggal_simpananB) {
+            return -1;
+          }
+          if (tanggal_simpananA > tanggal_simpananB) {
+            return 1;
+          }
+
+          // names must be equal
+          return 0;
+        });
+        //// sorting array simpanan wajib berdasarkan tanggal
+        // console.log(simpanan_sukarela.length)
+      }
+
+      let html =  `<div class="row small-spacing">
+        <div class="col-lg-12 col-xs-12">
+          <form class="card-content" id="sini_form_detail" >
+            <div class="form-group">
+              <label for="exampleInputEmail1">NIK User</label>
+              <input type="text" class="form-control" id="nik_user_deyail" name="nik_user" value="${data.nik_user}" disabled>
+            </div>
+            <div class="form-group">
+              <label for="exampleInputEmail1">Nama</label>
+              <input type="text" class="form-control" id="nama_detail" name="nama" value="${data.nama}" disabled>
+            </div>
+            <div class="form-group">
+              <label for="exampleInputEmail1">Tanggal Daftar</label>
+              <input type="text" class="form-control" id="tanggal_daftar_detail" name="tanggal_daftar" value="${data.tanggal_pendaftaran}" disabled>
+            </div>
+            <div class="form-group">
+              <label for="exampleInputEmail1">Simpanan Pokok</label>
+              <input type="text" class="form-control" id="simpanan_pokok_detail" name="simpanan_pokok" value="Rp. ${numberWithCommas(data.simpanan_pokok)}" disabled>
+            </div>
+
+            <div class="form-group">
+              <label for="exampleInputEmail1">Simpanan Sukarela Terakhir</label>
+              <input type="text" class="form-control" id="simpanan_sukarela_detail" name="simpanan_sukarela_terakhir" value="${(simpanan_sukarela != null) ? `Rp. ${numberWithCommas(simpanan_sukarela[simpanan_sukarela.length - 1]?.simpanan)}` : 'Belum Pernah Melakukan Simpanan Sukarela'} " disabled>
+            </div>
+
+            <div class="form-group">
+              <label for="exampleInputEmail1">Tanggal Simpanan Sukarela Terakhir</label>
+              <input type="text" class="form-control" id="tanggal_simpanan_sukarela_detail" name="tanggal_simpanan_sukarela_terakhir" value="${(simpanan_sukarela != null) ? `${simpanan_sukarela[simpanan_sukarela.length - 1]?.simpanan}` : '-'}" disabled>
+            </div>
+          
+            <div class="form-group">
+              
+            </div>
+                
+          </form>
+
+          ${(simpanan_sukarela != null) ?
+            `<div class="box-content card">
+              <h4 class="box-title" style="background: #0055FF">List Simpanan Sukarela ${data?.nama}</h4>
+              <!-- /.box-title -->
+              <div class="card-content" style="overflow-x: auto;">
+                <table id="table_simpanan_sukarela_users" class="table table-striped table-bordered display" style="width:100%">
+                  
+                </table>
+              </div>
+              <!-- /.card-content -->
+            </div>`
+          
+          
+          
+          : ''}
+          
+
+        </div>
+      </div>`
+
+      let footer = `<a href="user_detail.html?nik_user=${data.nik_user}"><button type="button" class="btn btn-primary btn-xs">Lihat Detail</button></a>`
+
+      await $("#sini_modalnya .modal-body").html(html)
+      await $("#sini_modalnya .modal-footer").html(footer)
+      await $("#sini_modalnya .modal-header .modal-title").html("Detail User")
+      await $("#sini_modalnya .modal-dialog").attr('class','modal-dialog modal-lg')
+
+      if (simpanan_sukarela != null ){
+        $('#table_simpanan_sukarela_users').DataTable({
+          responsive: true,
+          "ajax": {
+            "type": "POST",
+            "url": url,
+            "data" :{'proses' : 'table_simpanan_user_sukarela', nik_user : data.nik_user},
+            "timeout": 120000,
+            "dataSrc": function (json) {
+              // console.log(json);
+              if(json != null){
+                return json
+              } else {
+                return "";
+              }
+            }
+          },
+          "sAjaxDataProp": "",
+          "width": "100%",
+          "order": [[ 0, "asc" ]],
+          "aoColumns": [
+            {
+                "mData": null,
+                "title": "No",
+                render: function (data, type, row, meta) {
+                    return meta.row + meta.settings._iDisplayStart + 1;
+                }
+            },
+            
+            {
+                "mData": null,
+                "title": "Tanggal",
+                "render": function (data, row, type, meta) {
+                    return data.waktu;
+                }
+            },
+            {
+                "mData": null,
+                "title": "Jumlah",
+                "render": function (data, row, type, meta) {
+                    return data.ket;
+                }
+            },
+          ]
+        });
+
+      }
+      
+      await $('#sini_modalnya').modal('show');
+    }
+
+
+
+
+    const elem = document.getElementById("simpanan_sukarela");
+
+    elem.addEventListener("keydown",function(event){
+        var key = event.which;
+        if((key<48 || key>57) && key != 8) event.preventDefault();
+    });
+
+    elem.addEventListener("keyup",function(event){
+        var value = this.value.replace(/,/g,"");
+        this.dataset.currentValue=parseInt(value);
+        var caret = value.length-1;
+        while((caret-3)>-1)
+        {
+            caret -= 3;
+            value = value.split('');
+            value.splice(caret+1,0,",");
+            value = value.join('');
+        }
+        this.value = value;
     });
   </script>
 </body>
diff --git a/admin/simpanan_wajib.html b/admin/simpanan_wajib.html
index c288769..2f4073c 100644
--- a/admin/simpanan_wajib.html
+++ b/admin/simpanan_wajib.html
@@ -27,6 +27,7 @@
   <!-- <link rel="stylesheet" href="../assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css"> -->
   <link rel="stylesheet" href="../assets/fonts/material-design/css/materialdesignicons.css">
   <link rel="stylesheet" href="../assets/sweet-alert/sweetalert.css">
+  <link rel="stylesheet" href="../assets/plugin/select2/css/select2.min.css">
   <style type="text/css">
     .swal-modal .swal-text {
       text-align: center;
@@ -41,7 +42,7 @@
     <a href="index.html" class="logo">Koperasi Guru</a>
     <button type="button" class="button-close fa fa-times js__menu_close"></button>
     <div class="user">
-      <a href="#" class="avatar"><img src="http://placehold.it/80x80" alt=""><span class="status online"></span></a>
+      <a href="#" class="avatar"><img src="../assets/images/admin.png" alt=""><span class="status online"></span></a>
       <h5 class="name"></h5>
       <h5 class="position"></h5>
       <!-- /.name -->
@@ -109,34 +110,55 @@
 </div>
 <!-- /.fixed-navbar -->
 
+<div class="modal fade" id="sini_modalnya" role="dialog">
+  <div class="modal-dialog ">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal">&times;</button>
+        <h4 class="modal-title">Modal Header</h4>
+      </div>
+      <div class="modal-body row">
+        <p>This is a small modal.</p>
+      </div>
+      <div class="modal-footer">
+        
+      </div>
+    </div>
+  </div>
+</div>
+
 
 <div id="wrapper">
   <div class="main-content">
     <div class="row small-spacing">
       <div class="col-lg-6 col-xs-12">
         <div class="box-content card">
-          <h4 class="box-title" style="background: #0055FF">Form Update Simpanan Wajib</h4>
+          <h4 class="box-title" style="background: #0055FF ;cursor: pointer;" onclick="myFunction('div_update_wimpanan_wajib')">Form Update Simpanan Wajib</h4>
           <!-- /.box-title -->
-          <div class="card-content">
-            <form>
+          <div class="card-content" style="overflow-x: auto; display: none;" id="div_update_wimpanan_wajib">
+            <form id="sini_form">
               <div class="form-group">
-                <label for="exampleInputEmail1">NIK Guru</label>
-                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Masukkan NIK Guru">
+                <label for="exampleInputEmail1">NIK / Nama Guru</label>
+                <!-- <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Masukkan NIK Guru"> -->
+                <select id='input_nik_pembeli' name="nik_user" class="form-control" style="width: 100%" >
+                  <option value='0'>- Cari User -</option>
+                </select>
               </div>
-              <!-- <div class="form-group">
-                <label for="exampleInputPassword1">Nama Guru</label>
-                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Masukkan Nama">
-              </div> -->
               <div class="form-group">
                 <label for="exampleInputEmail1">Simpanan Wajib</label>
-                <select class="form-control" id="simpanan_pokok">
-                  <option disabled="" selected="" value="">-Pilih Simpanan Pokok</option>
+                <select class="form-control" id="simpanan_wajib">
+                  <option disabled="" selected="" value="">-Pilih Simpanan Wajib</option>
                   <option value="500000">Rp. 500,000</option>
                   <option value="1000000">Rp. 1,000,000</option>
                   <option value="1500000">Rp. 1,500,000</option>
                 </select>
               </div>
-              <center><button type="button" class="btn btn-primary btn-sm waves-effect waves-light">Update Simpanan Wajib</button></center>
+
+              <div class="form-group">
+                <label for="exampleInputEmail1">Tanggal Simpanan Wajib</label>
+                <input type="date" class="form-control" id="tanggal_simpanan_wajib" name="tanggal_simpanan_wajib">
+              </div>
+              <center><button type="button" onclick="update_simpanan_wajib()" class="btn btn-primary btn-sm waves-effect waves-light">Update Simpanan Wajib</button></center>
             </form>
           </div>
           <!-- /.card-content -->
@@ -147,9 +169,9 @@
 
       <div class="col-lg-6 col-xs-12">
         <div class="box-content card">
-          <h4 class="box-title" style="background: #0055FF">List Simpanan Wajib Guru</h4>
+          <h4 class="box-title" style="background: #0055FF ;cursor: pointer;" onclick="myFunction('div_list_simpanan')">List Simpanan Wajib Guru</h4>
           <!-- /.box-title -->
-          <div class="card-content" style="overflow-x: auto;">
+          <div class="card-content" style="overflow-x: auto; display: none;" id="div_list_simpanan">
             <table id="table_list_guru" class="table table-striped table-bordered display" style="width:100%">
               <thead>
                 <tr>
@@ -157,27 +179,11 @@
                   <th>NIK</th>
                   <th>Nama</th>
                   <th>Tanggal Simpanan Wajib Terakhir</th>
+                  <th>Jumlah Simpanan Wajib Terakhir</th>
                   <th>Aksi</th>
                 </tr>
               </thead>
               
-              <tbody>
-                <tr>
-                  <td>1</td>
-                  <td>1234567890123456</td>
-                  <td>Guru 1</td>
-                  <td>30-08-2001</td>
-                  <td><button type="button" class="btn btn-primary btn-xs waves-effect waves-light">Detail</button></td>
-                </tr>
-                <tr>
-                  <td>2</td>
-                  <td>1234567890123456</td>
-                  <td>Guru 2</td>
-                  <td>27-05-2009</td>
-                  <td><button type="button" class="btn btn-primary btn-xs waves-effect waves-light">Detail</button></td>
-                </tr>
-                
-              </tbody>
             </table>
             <hr>
             <center><button type="button" class="btn btn-primary btn-sm waves-effect waves-light">Cetak Laporan</button></center>
@@ -227,14 +233,344 @@
   <script src="../assets/sweet-alert/toastr/toastr.min.js"></script>
   <link rel="stylesheet" type="text/css" href="../assets/sweet-alert/toastr/toastr.min.css">
   <script src="../assets/sweet-alert/block/jquery.blockUI.js"></script>
+  <script src="../assets/plugin/select2/js/select2.min.js"></script>
+  <script src="../assets/scripts/form.demo.min.js"></script>
   <script type="text/javascript">
+  
     var table;
-    $(document).ready(function() {
- 
-      //datatables
-      table = $('#table_list_guru').DataTable();
+    function datatables() {
+      table = $('#table_list_guru').DataTable({ 
+        // "searching": false,
+        "lengthMenu": [ [5, 10, 15, -1], [5, 10, 15, "All"] ],
+        "pageLength": 15,
+        "ordering": true,
+        "processing": true, 
+        "serverSide": true, 
+        "order": [[ 1, 'desc' ]], 
+         
+        "ajax": {
+          "url": url,
+          "type": "POST",
+          data : {proses : 'table_list_guru_simpanan_wajib'}
+        },
 
+        "columnDefs": [
+          { 
+            "targets": [ 0 ,3,4,5], 
+            "orderable": false, 
+          },
+        ],
+      });
+    }
+    datatables()  
+
+
+    let today = new Date();
+    let dd = String(today.getDate()).padStart(2, '0');
+    let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+    let yyyy = today.getFullYear();
+    $("#tanggal_simpanan_wajib").attr({
+      'min':'2020-01-01',
+      'max': yyyy+'-'+mm+'-'+dd,
+      // 'value' : yyyy+'-'+mm+'-'+dd,
+    })
+
+    $("#input_nik_pembeli").select2({
+      ajax: {
+        url: url,
+        type: "post",
+        dataType: 'json',
+        delay: 250,
+        data: function (params) {
+          return {
+            searchTerm: params.term,
+            proses : 'cari_usernya' // search term
+          };
+        },
+        processResults: function (response) {
+          // console.log(response)
+          return {
+            results: response
+          };
+        },
+        cache: true
+      }
     });
+
+    async function update_simpanan_wajib(){
+      // console.log($("#input_nik_pembeli").val())
+      const nik_user = $("#input_nik_pembeli").val()
+      let simpanan_wajib = $("#simpanan_wajib").val()
+      const tanggal_simpanan_wajib = $("#tanggal_simpanan_wajib").val()
+
+      // console.log(nik_user)
+      // console.log(simpanan_wajib)
+      // console.log(tanggal_simpanan_wajib)
+      if(nik_user == 0){
+        toastnya('NIK User Harus Terisi / Dicari');
+        $("#input_nik_pembeli").focus()
+      }else if(simpanan_wajib == null){
+        toastnya('Simpanan Wajib Harus Terpilih');
+        $("#simpanan_wajib").focus()
+      }else if(tanggal_simpanan_wajib == ''){
+        toastnya('Tanggal Simpanan Wajib Harus Terpilih');
+        $("#tanggal_simpanan_wajib").focus()
+      }else{
+        // console.log('jalankan')
+        // console.log(nik_user)
+        // console.log(simpanan_wajib)
+        // console.log(tanggal_simpanan_wajib)
+
+        swal({
+          text: `Update Simpanan User dengan\nNIK : ${nik_user}`,
+          icon: "info",
+          buttons: {
+              cancel: true,
+              confirm: true,
+            },
+          // dangerMode: true,
+        })
+        .then((hehe) =>{
+          
+          if(hehe){
+            
+            // console.log('jalanakan diaktivasi');
+            let h = addZero(today.getHours());
+            let m = addZero(today.getMinutes());
+            let s = addZero(today.getSeconds());
+            // today1 = yyyy+'-'+mm+'-'+dd+' '+h + ":" + m + ":" + s
+            // console.log(today1)
+            let where = { nik_user : nik_user};
+            simpanan_wajib = [{tanggal_simpanan : tanggal_simpanan_wajib+' '+h + ":" + m + ":" + s,simpanan : simpanan_wajib}];
+            let detail = {simpanan_wajib : simpanan_wajib};
+
+            $.ajax({
+              url: url+"api/user/",
+              type: 'put',
+              data: {where : where, detail : detail },
+              beforeSend: function(res) {
+                                  
+                $.blockUI({ 
+                  message: "Sedang Diproses", 
+                  css: { 
+                  border: 'none', 
+                  padding: '15px', 
+                  backgroundColor: '#000', 
+                  '-webkit-border-radius': '10px', 
+                  '-moz-border-radius': '10px', 
+                  opacity: .5, 
+                  color: '#fff' 
+                } });
+              },
+              success:  function  (response) {
+                // $('#sini_form')[0].reset();
+                $.unblockUI();
+                $('#table_list_guru').dataTable().fnDestroy();
+                datatables()
+                $('#sini_modalnya').modal('hide');
+                // console.log(response)
+                swal({
+                  title : "Success",
+                  text:  "Simpanan Wajib User Berhasil Diupdate",
+                  icon: "success",
+                  buttons: {
+                    cancel: false,
+                    confirm: false,
+                  },
+                  timer : 3000
+                  // dangerMode: true,
+                })
+                
+              },
+              error: function(XMLHttpRequest, textStatus, errorThrown) { 
+                console.log(errorThrown)
+                $.unblockUI();
+                switch (errorThrown) {
+                  case "Bad Request":
+                    toastnya(`Request Yang Dilakukan Gagal`)
+                    // $("#nik_user").focus()
+                    break;
+                  case "Internal Server Error":
+                    toastnya(errorThrown)
+                    break;
+                  default:
+                    swal({
+                      text: "Koneksi Gagal, Sila Pastikan Perangkat Terhubung Jaringan Internet",
+                      icon: "warning",
+                      buttons: {
+                          cancel: false,
+                          confirm: true,
+                        },
+                      // dangerMode: true,
+                    })
+                    .then((hehe) =>{
+                      location.reload();
+                    });
+                    break;
+                }
+              
+              } 
+            });
+
+            // $('#sini_modalnya').modal('hide');
+            // $('#table_list_guru').dataTable().fnDestroy();
+            // datatables()
+          }
+        });
+      
+      
+
+      }
+
+    
+    }
+
+  
+    async function detail_user(nik_user){
+      // console.log(nik_user)
+      let data = await JSON.parse( $.ajax({
+        url: url+"api/user",
+        type: 'get',
+        data: {where : {nik_user : nik_user} },
+        async : false
+      }).responseText).data[0];
+
+      // console.log(data.simpanan_wajib)
+      let simpanan_wajib = JSON.parse(data?.simpanan_wajib) ?? null
+      // console.log(simpanan_wajib)
+      if(simpanan_wajib != null){
+        simpanan_wajib.sort(function (a, b) {
+          var tanggal_simpananA = a.tanggal_simpanan; // ignore upper and lowercase
+          var tanggal_simpananB = b.tanggal_simpanan; // ignore upper and lowercase
+          if (tanggal_simpananA < tanggal_simpananB) {
+            return -1;
+          }
+          if (tanggal_simpananA > tanggal_simpananB) {
+            return 1;
+          }
+
+          // names must be equal
+          return 0;
+        });
+        //// sorting array simpanan wajib berdasarkan tanggal
+        // console.log(simpanan_wajib.length)
+      }
+
+      let html =  `<div class="row small-spacing">
+        <div class="col-lg-12 col-xs-12">
+          <form class="card-content" id="sini_form_detail" >
+            <div class="form-group">
+              <label for="exampleInputEmail1">NIK User</label>
+              <input type="text" class="form-control" id="nik_user_deyail" name="nik_user" value="${data.nik_user}" disabled>
+            </div>
+            <div class="form-group">
+              <label for="exampleInputEmail1">Nama</label>
+              <input type="text" class="form-control" id="nama_detail" name="nama" value="${data.nama}" disabled>
+            </div>
+            <div class="form-group">
+              <label for="exampleInputEmail1">Tanggal Daftar</label>
+              <input type="text" class="form-control" id="tanggal_daftar_detail" name="tanggal_daftar" value="${data.tanggal_pendaftaran}" disabled>
+            </div>
+            <div class="form-group">
+              <label for="exampleInputEmail1">Simpanan Pokok</label>
+              <input type="text" class="form-control" id="simpanan_pokok_detail" name="simpanan_pokok" value="Rp. ${numberWithCommas(data.simpanan_pokok)}" disabled>
+            </div>
+
+            <div class="form-group">
+              <label for="exampleInputEmail1">Simpanan Wajib Terakhir</label>
+              <input type="text" class="form-control" id="simpanan_wajib_detail" name="simpanan_wajib_terakhir" value="${(simpanan_wajib != null) ? `Rp. ${numberWithCommas(simpanan_wajib[simpanan_wajib.length - 1]?.simpanan)}` : 'Belum Pernah Melakukan Simpanan Wajib'} " disabled>
+            </div>
+
+            <div class="form-group">
+              <label for="exampleInputEmail1">Tanggal Simpanan Wajib Terakhir</label>
+              <input type="text" class="form-control" id="tanggal_simpanan_wajib_detail" name="tanggal_simpanan_wajib_terakhir" value="${(simpanan_wajib != null) ? `${simpanan_wajib[simpanan_wajib.length - 1]?.simpanan}` : '-'}" disabled>
+            </div>
+          
+            <div class="form-group">
+              
+            </div>
+                
+          </form>
+
+          ${(simpanan_wajib != null) ?
+            `<div class="box-content card">
+              <h4 class="box-title" style="background: #0055FF">List Simpanan Wajib ${data?.nama}</h4>
+              <!-- /.box-title -->
+              <div class="card-content" style="overflow-x: auto;">
+                <table id="table_simpanan_wajib_user" class="table table-striped table-bordered display" style="width:100%">
+                  
+                </table>
+              </div>
+              <!-- /.card-content -->
+            </div>`
+          
+          
+          
+          : ''}
+          
+
+        </div>
+      </div>`
+
+      let footer = `<a href="user_detail.html?nik_user=${data.nik_user}"><button type="button" class="btn btn-primary btn-xs">Lihat Detail</button></a>`
+
+      await $("#sini_modalnya .modal-body").html(html)
+      await $("#sini_modalnya .modal-footer").html(footer)
+      await $("#sini_modalnya .modal-header .modal-title").html("Detail User")
+      await $("#sini_modalnya .modal-dialog").attr('class','modal-dialog modal-lg')
+
+      if (simpanan_wajib != null ){
+        $('#table_simpanan_wajib_user').DataTable({
+          responsive: true,
+          "ajax": {
+            "type": "POST",
+            "url": url,
+            "data" :{'proses' : 'table_simpanan_user_wajib', nik_user : data.nik_user},
+            "timeout": 120000,
+            "dataSrc": function (json) {
+              // console.log(json);
+              if(json != null){
+                return json
+              } else {
+                return "";
+              }
+            }
+          },
+          "sAjaxDataProp": "",
+          "width": "100%",
+          "order": [[ 0, "asc" ]],
+          "aoColumns": [
+            {
+                "mData": null,
+                "title": "No",
+                render: function (data, type, row, meta) {
+                    return meta.row + meta.settings._iDisplayStart + 1;
+                }
+            },
+            
+            {
+                "mData": null,
+                "title": "Tanggal",
+                "render": function (data, row, type, meta) {
+                    return data.waktu;
+                }
+            },
+            {
+                "mData": null,
+                "title": "Jumlah",
+                "render": function (data, row, type, meta) {
+                    return data.ket;
+                }
+            },
+          ]
+        });
+
+      }
+      
+      await $('#sini_modalnya').modal('show');
+    }
+
+
   </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/assets/images/admin.png b/assets/images/admin.png
new file mode 100644
index 0000000..9768cbc
Binary files /dev/null and b/assets/images/admin.png differ
diff --git a/assets/images/icon-email.png b/assets/images/icon-email.png
deleted file mode 100644
index 3405fd9..0000000
Binary files a/assets/images/icon-email.png and /dev/null differ
diff --git a/js/login.js b/js/login.js
index 8e42c73..f8ed8b1 100644
--- a/js/login.js
+++ b/js/login.js
@@ -1,15 +1,18 @@
-let level = localStorage.getItem("level");
-let nik = localStorage.getItem("nik");
+let level = localStorage.getItem("level") ?? null;
+let nik = localStorage.getItem("nik") ?? null;
 
-if (level != '' && level != null) {
+// console.log(level)
+// console.log(nik)
+
+if (level != null && nik != null) {
   let res = JSON.parse($.ajax({
-    url: url,
-    type: 'post',
-    data: {nik : nik,level : level,proses : 'cek_data'},
+    url: url+'api/login',
+    type: 'get',
+    data: {where:{nik : nik,level : level}},
     async : false,
   }).responseText);
 
-  // console.log(res)
+  console.log(res)
   switch (res.res) {
     case 'ok':
       window.location.href = res.url
@@ -36,9 +39,9 @@ function login () {
   }else{
     // console.log('jalankan')
     $.ajax({
-      url: url,
-      type: 'post',
-      data: {username : username, password : password, proses : 'login'},
+      url: url+'api/login',
+      type: 'get',
+      data: {where : {username : username , password : password}},
       
       beforeSend: function(res) {
                            
@@ -56,7 +59,7 @@ function login () {
       },
       success:  function  (response) {
         $.unblockUI();
-        console.log(response)
+        // console.log(response)
         localStorage.setItem("level", response.level);
         localStorage.setItem('nik', response.nik)
         swal({
@@ -71,6 +74,8 @@ function login () {
           // dangerMode: true,
         })
         .then((hehe) =>{
+          // console.log(localStorage.getItem("level"));
+          // console.log(localStorage.getItem("nik"));
           location.reload();
         });
         
diff --git a/js/main.js b/js/main.js
index 18abe32..faf1c25 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,30 +1,43 @@
-let level = localStorage.getItem("level");
-let nik = localStorage.getItem("nik");
-let nama;
+let level = localStorage.getItem("level") ?? null;
+let nik = localStorage.getItem("nik") ?? null;
+var nama;
+
+// console.log(level)
+// console.log(nik)
+// console.log(nama)
 
 if (level != '' || level != null) {
-  let res = JSON.parse($.ajax({
-    url: url,
-    type: 'post',
-    data: {nik : nik,level : level,proses : 'cek_data_detail'},
+  let res = JSON.parse( $.ajax({
+    url: url+'api/admin',
+    type: 'get',
+    data: {where : {nik_admin : nik}},
     async : false,
   }).responseText);
 
-  console.log(res)
-  switch (res.res) {
-    case 'ok':
+  // console.log(level)
+  // console.log(nik)
+  // console.log(res)
+
+  if(res.res == 'ok'){
+    // case 'ok':
       // window.location.href = res.url
-      nama = res.nama
-      break;
-    case 'ko':
+      nama = 'Admin';
+      // console.log(nama)
+      // nama = res.nama
+      // break;
+  }else{
       localStorage.removeItem("level");
       localStorage.removeItem("nik");
       window.location.href = '../'
-      break;
+      // break;
   }
+}else{
+  localStorage.removeItem("level");
+  localStorage.removeItem("nik");
+  window.location.href = '../'
 }
 
-
+// console.log(nama)
 $(".name").html('<a href="#">'+nama+'</a>')
 $(".position").html(level)
 
@@ -45,4 +58,64 @@ function logout(){
       swal("Terima kasih kerana masih di sistem");
     }
   });
+}
+
+function toastnya(mesej){
+  toastr.options = {
+    "closeButton": true,
+    "debug": false,
+    "progressBar": true,
+    "positionClass": "toast-top-right",
+    "showDuration": "300",
+    "hideDuration": "1000",
+    "timeOut": "5000",
+    "extendedTimeOut": "1000",
+    "showEasing": "swing",
+    "hideEasing": "linear",
+    "showMethod": "fadeIn",
+    "hideMethod": "fadeOut"
+  };
+
+  toastr.error("<center>"+mesej+"</center>");
+  // $("#"+id).focus();
+}
+
+function isNumberKey(evt){
+  var charCode = (evt.which) ? evt.which : evt.keyCode
+  if (charCode > 31 && (charCode < 48 || charCode > 57 ))
+      return false;
+  return true;
+  // console.log(evt.key)
+}
+
+function myFunction(a) {
+  var x = $("#"+a);
+  var xx = document.getElementById(a);
+
+  
+  if (xx.style.display === "none") {
+    x.slideToggle();
+  } else {
+    x.slideToggle();
+  }
+}
+
+function objectifyForm(formArray) {
+  //serialize data function
+  var returnArray = {};
+  for (var i = 0; i < formArray.length; i++){
+    returnArray[formArray[i]['name']] = formArray[i]['value'];
+  }
+  return returnArray;
+}
+
+function addZero(i) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  return i;
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
\ No newline at end of file