diff --git a/admin/guru.html b/admin/guru.html
index 913c640..5570047 100644
--- a/admin/guru.html
+++ b/admin/guru.html
@@ -81,10 +81,12 @@
          -->
       </ul>
       <!-- /.menu js__accordion -->
-      <h5 class="title">Komponen Lain</h5>
+      <!-- <h5 class="title">Komponen Lain</h5> -->
       <!-- /.title -->
       <ul class="menu js__accordion">
-       
+        <li>
+          <a class="waves-effect" href="laporan.html"><i class="menu-icon fa fa-wpforms"></i><span>Laporan</span></a>
+        </li>
         <li>
           <a class="waves-effect" onclick="logout()"><i class="menu-icon icon icon-logout"></i><span>Logout</span></a>
         </li>
@@ -150,22 +152,24 @@
 
               <div class="form-group">
                 <label for="exampleInputEmail1">Simpanan Pokok</label>
-                <select class="form-control" id="simpanan_pokok" name="simpanan_pokok">
+                <!-- <select class="form-control" id="simpanan_pokok" name="simpanan_pokok">
                   <option disabled="" selected="" value="">-Pilih Simpanan Pokok</option>
                   <option value="5000000">Rp. 5,000,000</option>
                   <option value="7500000">Rp. 7,500,000</option>
                   <option value="10000000">Rp. 10,000,000</option>
-                </select>
+                </select> -->
+                <input type="text" class="form-control" id="simpanan_pokok" name="simpanan_pokok" placeholder="Masukkan Jumlah Simpanan Pokok" maxlength="11">
               </div>
 
               <div class="form-group">
                 <label for="exampleInputEmail1">Simpanan Wajib</label>
-                <select class="form-control" id="simpanan_wajib" name="simpanan_wajib">
+                <!-- <select class="form-control" id="simpanan_wajib" name="simpanan_wajib">
                   <option disabled="" selected="" value="">-Pilih Simpanan Wajib</option>
                   <option value="500000">Rp. 200,000</option>
                   <option value="1000000">Rp. 500,000</option>
                   <option value="1500000">Rp. 1,000,000</option>
-                </select>
+                </select> -->
+                <input type="text" class="form-control" id="simpanan_wajib" name="simpanan_wajib" placeholder="Masukkan Jumlah Simpanan Wajib" maxlength="9">
               </div>
 
 
@@ -296,17 +300,17 @@
       const nik_user = $("#nik_user").val();
       const nama = $("#nama").val();
       const alamat = $("#alamat").val();
-      const simpanan_pokok = $("#simpanan_pokok").val();
-      const simpanan_wajib = $("#simpanan_wajib").val();
+      let simpanan_pokok = $("#simpanan_pokok").val();
+      let simpanan_wajib = $("#simpanan_wajib").val();
       // console.log(nik_user)
       // console.log(nama)
       // console.log(simpanan_pokok)
       if(nik_user == ''){
-        toastnya('NIK User Harus Terisi');
+        toastnya('NIP User Harus Terisi');
         $("#nik_user").focus();
       }
       else if(nik_user.length != 18){
-        toastnya('NIK User Harus Panjang 18 Karakter');
+        toastnya('NIP User Harus Panjang 18 Karakter');
         $("#nik_user").focus();
       }
       else if(nama == ''){
@@ -317,17 +321,30 @@
         toastnya('Alamat Harus Terisi');
         $("#alamat").focus();
       }
-      else if(simpanan_pokok == null){
-        toastnya('Simpanan Pokok Harus Terpilih');
+      // else if(simpanan_pokok == null){
+      else if(simpanan_pokok == ''){
+        // toastnya('Simpanan Pokok Harus Terpilih');
+        toastnya('Simpanan Pokok Harus Terisi');
         $("#simpanan_pokok").focus();
       }
-      else if(simpanan_wajib == null){
-        toastnya('Simpanan Wajib Harus Terpilih');
+      // else if(simpanan_wajib == null){
+      else if(simpanan_wajib == ''){
+        // toastnya('Simpanan Wajib Harus Terpilih');
+        toastnya('Simpanan Wajib Harus Terisi');
         $("#simpanan_wajib").focus();
       }else{
         // console.log('jalankan')
         let data = $("#sini_form").serializeArray();
+        simpanan_pokok=simpanan_pokok.replace(/\,/g,'');
+        simpanan_wajib=simpanan_wajib.replace(/\,/g,'');
+        console.log(simpanan_pokok)
+        console.log(simpanan_wajib)
         data = objectifyForm(data)
+
+        // console.log(data);
+        data.simpanan_pokok = simpanan_pokok
+        data.simpanan_wajib = simpanan_wajib
+        // console.log(data)
         // console.log(objectifyForm(data))
         $.ajax({
           url: url+"api/user/",
@@ -587,8 +604,20 @@
             
           }
         }
-        
-        let total_all_simpanan = parseInt(data.simpanan_pokok) + parseInt(total_simpanan_wajib) + parseInt(simpanan_sukarela);
+
+        let pinjaman = 0
+        let array_pinjaman = await JSON.parse(data.pinjaman)
+
+        if (array_pinjaman != null) {
+          for (let i = 0; i < array_pinjaman.length; i++) {
+            // console.log(array_pinjaman[i]);
+            pinjaman = pinjaman + parseInt(array_pinjaman[i].pinjaman);
+            
+          }
+        }
+        console.log(pinjaman);
+
+        let total_all_simpanan = parseInt(data.simpanan_pokok) + parseInt(total_simpanan_wajib) + parseInt(simpanan_sukarela) - parseInt(pinjaman);
         
 
         let table = await `
@@ -619,6 +648,7 @@
                 <th style="text-align: center;">Simpanan Pokok</th>
                 <th style="text-align: center;">Simpanan Wajib</th>
                 <th style="text-align: center;">Simpanan Sukarela</th>
+                <th style="text-align: center;">Pinjaman</th>
               </tr>
             </thead>
             <tbody>
@@ -626,6 +656,7 @@
                 <td>Rp. ${numberWithCommas(data.simpanan_pokok)}</td>
                 <td>Rp. ${numberWithCommas(total_simpanan_wajib)}</td>
                 <td>${(simpanan_sukarela == 0) ? `-` : 'Rp.'+ numberWithCommas(simpanan_sukarela)}</td>
+                <td>${(pinjaman == 0) ? `-` : 'Rp.'+ numberWithCommas(pinjaman)}</td>
               </tr>
             </tbody>
           </table>
@@ -757,14 +788,44 @@
       
       html_table_history_simpanan_sukarela += `</tbody></table>`
 
+      let html_table_history_pinjaman = `<table id="table_history_pinjaman" class="table table-striped table-bordered display" style="width:100%">
+          <thead>
+            <tr >
+              <th style="text-align: center;">Jumlah</th>
+              <th style="text-align: center;">Tanggal Pinjaman</th>
+            </tr>
+          </thead>
+          <tbody>
+        `
+      let data_history_pinjaman = JSON.parse(data_user.pinjaman)
+      let total_pinjaman = 0;
+
+      // console.log(data_history_pinjaman)
+      if (data_history_pinjaman != null) {
+        for (let i = 0; i < data_history_pinjaman.length; i++) {
+          total_pinjaman = total_pinjaman + parseInt(data_history_pinjaman[i].pinjaman)
+          html_table_history_pinjaman += `
+            <tr>
+              
+              <td>Rp. ${numberWithCommas(data_history_pinjaman[i].pinjaman)}</td>
+              <td>${data_history_pinjaman[i].tanggal_pinjam}</td>
+            </tr>
+          `
+          
+        }
+
+      }
+      
+      html_table_history_pinjaman += `</tbody></table>`
+
       let html = `<div class="row small-spacing">
         <div class="col-lg-2 col-xs-12"></div>
         <div class="col-lg-8 col-xs-12">
           <div class="box-content card">
             <div class="card-content" style="overflow-x: auto;" >
               <div class="form-group">
-                <label for="exampleInputEmail1">NIK </label>
-                <input type="email" class="form-control" value="${nik_user}">
+                <label for="exampleInputEmail1">NIP </label>
+                <input type="email" class="form-control" value="${data_user.nik_user}">
               </div>
               <div class="form-group">
                 <label for="exampleInputEmail1">Nama </label>
@@ -778,6 +839,33 @@
 
         <div class="col-lg-2 col-xs-12"></div>
       </div>
+
+      <div class="row small-spacing">
+        <div class="col-lg-12 col-xs-12">
+          <div class="box-content card">
+            <div class="card-content" style="overflow-x: auto;" >
+              <h4 class="box-title" style="background: #0055FF ;cursor: pointer;" onclick="myFunction('div_pinjaman_user')">Form Pinjaman User</h4>
+              <div class="card-content" style="overflow-x: auto;display:none" id="div_pinjaman_user">
+                <form class="form-horizontal">
+                  <div class="form-group">
+                    <div class="col-sm-2"></div>
+                    <label class="col-sm-2 control-label">Jumlah Pinjaman</label>
+                    <div class="col-sm-6">
+                      <input type="text" class="form-control" id="pinjaman_input" name="pinjaman" placeholder="Masukkan Jumlah Pinjaman" maxlength="9" oninput="pinjaman_ubah(value)">
+                    </div>
+                    <div class="col-sm-2"></div>
+                  </div>
+                  <div class="form-group" id="div_button_pinjam" style="display:none">
+                    <center><button type="button" class="btn btn-primary btn-sm waves-effect waves-light" onclick="update_pinjaman(${nik_user},'${data_user.nama}')">Tambah Pinjaman User</button></center>
+                  </div>
+                  <hr/>
+                  ${html_table_history_pinjaman}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       
       <div class="row small-spacing">
         <div class="col-lg-6 col-xs-12">
@@ -871,26 +959,37 @@
       await $('#table_tagihan_simpanan_wajib').DataTable({searching: false, paging: true, info: true,"ordering": false})
       await $('#table_history_simpanan_wajib').DataTable({searching: true, paging: true, info: true,"ordering": false})
       await $('#table_history_simpanan_sukarela').DataTable({searching: true, paging: true, info: true,"ordering": false})
-      let elem = document.getElementById("simpanan_sukarela");
+      await $('#table_history_pinjaman').DataTable({searching: true, paging: true, info: true,"ordering": false})
 
-      await elem.addEventListener("keydown",function(event){
-          let key = event.which;
-          if((key<48 || key>57) && key != 8) event.preventDefault();
-      });
+      let array_inputan = ['simpanan_sukarela','pinjaman_input']
 
-      await elem.addEventListener("keyup",function(event){
-          let value = this.value.replace(/,/g,"");
-          this.dataset.currentValue=parseInt(value);
-          let caret = value.length-1;
-          while((caret-3)>-1)
-          {
-              caret -= 3;
-              value = value.split("");
-              value.splice(caret+1,0,",");
-              value = value.join("");
-          }
-          this.value = value;
-      });
+      for (let i = 0; i < array_inputan.length; i++) {
+        let elem = document.getElementById(array_inputan[i]);
+
+        await elem.addEventListener("keydown",function(event){
+            let key = event.which;
+            if((key<48 || key>57) && key != 8) event.preventDefault();
+        });
+
+        await elem.addEventListener("keyup",function(event){
+            let value = this.value.replace(/,/g,"");
+            this.dataset.currentValue=parseInt(value);
+            let caret = value.length-1;
+            while((caret-3)>-1)
+            {
+                caret -= 3;
+                value = value.split("");
+                value.splice(caret+1,0,",");
+                value = value.join("");
+            }
+            this.value = value;
+        });
+
+
+        
+      }
+
+        
       await $("#sini_modalnya .modal-header .modal-title").html("Detail User")
       await $("#sini_modalnya .modal-dialog").attr('class','modal-dialog modal-lg')
       await $('#sini_modalnya').modal('show');
@@ -1099,6 +1198,139 @@
       }
     }
 
+    async function update_pinjaman(nik_user,nama){
+      let pinjaman = $("#pinjaman_input").val().replace(/\,/g,'');
+      // console.log(data_user.nik_user.toString())
+      // console.log('sini update pinjaman '+nik_user)
+
+
+      swal({
+        title : `Tambah Pinjaman User?`,
+        text: `User ${nama} dengan NIP ${data_user.nik_user.toString()} akan meminjam sebanyak Rp. ${numberWithCommas(pinjaman)} `,
+        icon: "info",
+        buttons: {
+          cancel: true,
+          confirm: true,
+        },
+        // dangerMode: true,
+      })
+      .then((hehe) =>{
+        if (hehe) {
+          console.log('jalankan pinjaman')
+
+          $.ajax({
+            url: url+"api/pinjaman/",
+            type: 'put',
+            data: {nik_user : data_user.nik_user.toString(), pinjaman : pinjaman},
+            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) {
+              $.unblockUI();
+              swal({
+                title : "Success",
+                text:  "Pinjaman User Berhasil",
+                icon: "success",
+                buttons: {
+                  cancel: false,
+                  confirm: false,
+                },
+                timer : 3000
+                // dangerMode: true,
+              })
+              user_change(data_user.nik_user.toString())
+              $('#sini_modalnya').modal('hide');
+              
+              console.log(response)
+
+              
+            },
+            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;
+              }
+            
+            } 
+          });
+
+
+
+
+        }
+      });
+  
+    }
+
+    function pinjaman_ubah(val){
+      // console.log(val)
+      if (val == '') {
+        $("#div_button_pinjam").attr('style','display:none');
+      }else{
+        $("#div_button_pinjam").removeAttr('style');
+      }
+    }
+    
+    let array_input_nomor = ['simpanan_pokok','simpanan_wajib']
+  
+    for (let i = 0; i < array_input_nomor.length; i++) {
+      let elem = document.getElementById(array_input_nomor[i]);
+
+      elem.addEventListener("keydown",function(event){
+          let key = event.which;
+          if((key<48 || key>57) && key != 8) event.preventDefault();
+      });
+
+      elem.addEventListener("keyup",function(event){
+          let value = this.value.replace(/,/g,"");
+          this.dataset.currentValue=parseInt(value);
+          let 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/index.html b/admin/index.html
index 897c9ea..601e036 100644
--- a/admin/index.html
+++ b/admin/index.html
@@ -81,10 +81,12 @@
         
       </ul>
       <!-- /.menu js__accordion -->
-      <h5 class="title">Komponen Lain</h5>
+      <!-- <h5 class="title">Komponen Lain</h5> -->
       <!-- /.title -->
       <ul class="menu js__accordion">
-       
+        <li>
+          <a class="waves-effect" href="laporan.html"><i class="menu-icon fa fa-wpforms"></i><span>Laporan</span></a>
+        </li>
         <li>
           <a class="waves-effect" onclick="logout()"><i class="menu-icon icon icon-logout"></i><span>Logout</span></a>
         </li>
@@ -364,13 +366,25 @@
             
           }
         }
-        
-        let total_all_simpanan = parseInt(data.simpanan_pokok) + parseInt(total_simpanan_wajib) + parseInt(simpanan_sukarela);
+
+        let pinjaman = 0
+        let array_pinjaman = await JSON.parse(data.pinjaman)
+
+        if (array_pinjaman != null) {
+          for (let i = 0; i < array_pinjaman.length; i++) {
+            // console.log(array_pinjaman[i]);
+            pinjaman = pinjaman + parseInt(array_pinjaman[i].pinjaman);
+            
+          }
+        }
+        console.log(pinjaman);
+
+        let total_all_simpanan = parseInt(data.simpanan_pokok) + parseInt(total_simpanan_wajib) + parseInt(simpanan_sukarela) - parseInt(pinjaman);
         
 
         let table = await `
         <div class="form-group">
-          <label for="exampleInputEmail1">NIP</label>
+          <label for="exampleInputEmail1">NIK</label>
           <input type="email" class="form-control"  value="${data.nik_user}" disabled> 
         </div>
         <div class="form-group">
@@ -396,6 +410,7 @@
                 <th style="text-align: center;">Simpanan Pokok</th>
                 <th style="text-align: center;">Simpanan Wajib</th>
                 <th style="text-align: center;">Simpanan Sukarela</th>
+                <th style="text-align: center;">Pinjaman</th>
               </tr>
             </thead>
             <tbody>
@@ -403,6 +418,7 @@
                 <td>Rp. ${numberWithCommas(data.simpanan_pokok)}</td>
                 <td>Rp. ${numberWithCommas(total_simpanan_wajib)}</td>
                 <td>${(simpanan_sukarela == 0) ? `-` : 'Rp.'+ numberWithCommas(simpanan_sukarela)}</td>
+                <td>${(pinjaman == 0) ? `-` : 'Rp.'+ numberWithCommas(pinjaman)}</td>
               </tr>
             </tbody>
           </table>
@@ -439,6 +455,7 @@
     }
 
 
+    
     async function detail_user(nik_user){
       // console.log(nik_user)
       // console.log(data_user)
@@ -532,6 +549,36 @@
       
       html_table_history_simpanan_sukarela += `</tbody></table>`
 
+      let html_table_history_pinjaman = `<table id="table_history_pinjaman" class="table table-striped table-bordered display" style="width:100%">
+          <thead>
+            <tr >
+              <th style="text-align: center;">Jumlah</th>
+              <th style="text-align: center;">Tanggal Pinjaman</th>
+            </tr>
+          </thead>
+          <tbody>
+        `
+      let data_history_pinjaman = JSON.parse(data_user.pinjaman)
+      let total_pinjaman = 0;
+
+      // console.log(data_history_pinjaman)
+      if (data_history_pinjaman != null) {
+        for (let i = 0; i < data_history_pinjaman.length; i++) {
+          total_pinjaman = total_pinjaman + parseInt(data_history_pinjaman[i].pinjaman)
+          html_table_history_pinjaman += `
+            <tr>
+              
+              <td>Rp. ${numberWithCommas(data_history_pinjaman[i].pinjaman)}</td>
+              <td>${data_history_pinjaman[i].tanggal_pinjam}</td>
+            </tr>
+          `
+          
+        }
+
+      }
+      
+      html_table_history_pinjaman += `</tbody></table>`
+
       let html = `<div class="row small-spacing">
         <div class="col-lg-2 col-xs-12"></div>
         <div class="col-lg-8 col-xs-12">
@@ -539,7 +586,7 @@
             <div class="card-content" style="overflow-x: auto;" >
               <div class="form-group">
                 <label for="exampleInputEmail1">NIP </label>
-                <input type="email" class="form-control" value="${nik_user}">
+                <input type="email" class="form-control" value="${data_user.nik_user}">
               </div>
               <div class="form-group">
                 <label for="exampleInputEmail1">Nama </label>
@@ -553,6 +600,33 @@
 
         <div class="col-lg-2 col-xs-12"></div>
       </div>
+
+      <div class="row small-spacing">
+        <div class="col-lg-12 col-xs-12">
+          <div class="box-content card">
+            <div class="card-content" style="overflow-x: auto;" >
+              <h4 class="box-title" style="background: #0055FF ;cursor: pointer;" onclick="myFunction('div_pinjaman_user')">Form Pinjaman User</h4>
+              <div class="card-content" style="overflow-x: auto;display:none" id="div_pinjaman_user">
+                <form class="form-horizontal">
+                  <div class="form-group">
+                    <div class="col-sm-2"></div>
+                    <label class="col-sm-2 control-label">Jumlah Pinjaman</label>
+                    <div class="col-sm-6">
+                      <input type="text" class="form-control" id="pinjaman_input" name="pinjaman" placeholder="Masukkan Jumlah Pinjaman" maxlength="9" oninput="pinjaman_ubah(value)">
+                    </div>
+                    <div class="col-sm-2"></div>
+                  </div>
+                  <div class="form-group" id="div_button_pinjam" style="display:none">
+                    <center><button type="button" class="btn btn-primary btn-sm waves-effect waves-light" onclick="update_pinjaman(${nik_user},'${data_user.nama}')">Tambah Pinjaman User</button></center>
+                  </div>
+                  <hr/>
+                  ${html_table_history_pinjaman}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       
       <div class="row small-spacing">
         <div class="col-lg-6 col-xs-12">
@@ -646,26 +720,37 @@
       await $('#table_tagihan_simpanan_wajib').DataTable({searching: false, paging: true, info: true,"ordering": false})
       await $('#table_history_simpanan_wajib').DataTable({searching: true, paging: true, info: true,"ordering": false})
       await $('#table_history_simpanan_sukarela').DataTable({searching: true, paging: true, info: true,"ordering": false})
-      let elem = document.getElementById("simpanan_sukarela");
+      await $('#table_history_pinjaman').DataTable({searching: true, paging: true, info: true,"ordering": false})
 
-      await elem.addEventListener("keydown",function(event){
-          let key = event.which;
-          if((key<48 || key>57) && key != 8) event.preventDefault();
-      });
+      let array_inputan = ['simpanan_sukarela','pinjaman_input']
 
-      await elem.addEventListener("keyup",function(event){
-          let value = this.value.replace(/,/g,"");
-          this.dataset.currentValue=parseInt(value);
-          let caret = value.length-1;
-          while((caret-3)>-1)
-          {
-              caret -= 3;
-              value = value.split("");
-              value.splice(caret+1,0,",");
-              value = value.join("");
-          }
-          this.value = value;
-      });
+      for (let i = 0; i < array_inputan.length; i++) {
+        let elem = document.getElementById(array_inputan[i]);
+
+        await elem.addEventListener("keydown",function(event){
+            let key = event.which;
+            if((key<48 || key>57) && key != 8) event.preventDefault();
+        });
+
+        await elem.addEventListener("keyup",function(event){
+            let value = this.value.replace(/,/g,"");
+            this.dataset.currentValue=parseInt(value);
+            let caret = value.length-1;
+            while((caret-3)>-1)
+            {
+                caret -= 3;
+                value = value.split("");
+                value.splice(caret+1,0,",");
+                value = value.join("");
+            }
+            this.value = value;
+        });
+
+
+        
+      }
+
+        
       await $("#sini_modalnya .modal-header .modal-title").html("Detail User")
       await $("#sini_modalnya .modal-dialog").attr('class','modal-dialog modal-lg')
       await $('#sini_modalnya').modal('show');
@@ -877,6 +962,114 @@
     }
 
     // console.log(array_check_simpanan_wajib)
+
+    async function update_pinjaman(nik_user,nama){
+      let pinjaman = $("#pinjaman_input").val().replace(/\,/g,'');
+      // console.log(data_user.nik_user.toString())
+      // console.log('sini update pinjaman '+nik_user)
+
+
+      swal({
+        title : `Tambah Pinjaman User?`,
+        text: `User ${nama} dengan NIP ${data_user.nik_user.toString()} akan meminjam sebanyak Rp. ${numberWithCommas(pinjaman)} `,
+        icon: "info",
+        buttons: {
+          cancel: true,
+          confirm: true,
+        },
+        // dangerMode: true,
+      })
+      .then((hehe) =>{
+        if (hehe) {
+          console.log('jalankan pinjaman')
+
+          $.ajax({
+            url: url+"api/pinjaman/",
+            type: 'put',
+            data: {nik_user : data_user.nik_user.toString(), pinjaman : pinjaman},
+            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) {
+              $.unblockUI();
+              swal({
+                title : "Success",
+                text:  "Pinjaman User Berhasil",
+                icon: "success",
+                buttons: {
+                  cancel: false,
+                  confirm: false,
+                },
+                timer : 3000
+                // dangerMode: true,
+              })
+              user_change(data_user.nik_user.toString())
+              $('#sini_modalnya').modal('hide');
+              
+              console.log(response)
+
+              
+            },
+            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;
+              }
+            
+            } 
+          });
+
+
+
+
+        }
+      });
+  
+    }
+
+    function pinjaman_ubah(val){
+      // console.log(val)
+      if (val == '') {
+        $("#div_button_pinjam").attr('style','display:none');
+      }else{
+        $("#div_button_pinjam").removeAttr('style');
+      }
+    }
+    
+    
+    
   </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/admin/laporan.html b/admin/laporan.html
new file mode 100644
index 0000000..2f7c4d9
--- /dev/null
+++ b/admin/laporan.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>Aplikasi Koperasi Guru Kabupaten Enrekang - Halaman Laporan Koperasi (Admin)</title>
+
+  <!-- Main Styles -->
+  <link rel="stylesheet" href="../assets/styles/style.min.css">
+
+  <!-- mCustomScrollbar -->
+  <link rel="stylesheet" href="../assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
+
+  <!-- Waves Effect -->
+  <link rel="stylesheet" href="../assets/plugin/waves/waves.min.css">
+
+  <link rel="stylesheet" href="../assets/fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">
+ 
+  <link rel="stylesheet" href="../assets/fonts/fontello/fontello.css">
+  <!-- Dark Themes -->
+  <!-- <link rel="stylesheet" href="../assets/styles/style-dark.min.css"> -->
+  <link rel="stylesheet" href="../assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
+  <!-- <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">
+  <style type="text/css">
+    .swal-modal .swal-text {
+      text-align: center;
+    }
+  </style>
+
+</head>
+
+<body>
+<div class="main-menu">
+  <header class="header">
+    <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="../assets/images/admin.png" alt=""><span class="status online"></span></a>
+      <h5 class="name"></h5>
+      <h5 class="position"></h5>
+      <!-- /.name -->
+     
+    </div>
+    <!-- /.user -->
+  </header>
+  <!-- /.header -->
+  <div class="content">
+
+    <div class="navigation">
+      <h5 class="title">Navigasi</h5>
+      <!-- /.title -->
+      <ul class="menu js__accordion">
+        <li>
+          <a class="waves-effect" href="index.html"><i class="menu-icon fa fa-home"></i><span>Halaman Utama</span></a>
+        </li>
+        <li>
+          <a class="waves-effect" href="guru.html"><i class="menu-icon fa fa-users"></i><span>Halaman Guru</span></a>
+        </li>
+        <!-- <li>
+          <a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-cube-outline"></i><span>Halaman Simpanan</span><span class="menu-arrow fa fa-angle-down"></span></a>
+          <ul class="sub-menu js__content">
+            <li><a href="simpanan_pokok.html">Simpanan Pokok</a></li>
+            <li><a href="simpanan_wajib.html">Simpanan Wajib</a></li>
+            <li><a href="simpanan_sukarela.html">Simpanan Sukarela</a></li>
+            <li"><a href="pinjaman.html">Pinjaman / Pengembalian</a></li>
+          </ul>
+        </li>
+        <li >
+          <a class="waves-effect" href="list_barang.html"><i class="menu-icon zmdi zmdi-storage"></i><span>List Barang</span></a>
+        </li>
+        
+        <li class="current">
+          <a class="waves-effect" href="laporan_koperasi.html"><i class="menu-icon zmdi zmdi-assignment"></i><span>Laporan Koperasi</span></a>
+        </li> -->
+        
+      </ul>
+      <!-- /.menu js__accordion -->
+      <!-- <h5 class="title">Komponen Lain</h5> -->
+      <!-- /.title -->
+      <ul class="menu js__accordion">
+
+        <li class="current">
+          <a class="waves-effect" href="laporan_koperasi.html"><i class="menu-icon fa fa-wpforms"></i><span>Laporan Koperasi</span></a>
+        </li>
+       
+        <li>
+          <a class="waves-effect" onclick="logout()"><i class="menu-icon icon icon-logout"></i><span>Logout</span></a>
+        </li>
+      
+      </ul>
+     
+    </div>
+    <!-- /.navigation -->
+  </div>
+  <!-- /.content -->
+</div>
+<!-- /.main-menu -->
+
+<div class="fixed-navbar">
+  <div class="pull-left">
+    <button type="button" class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
+    <h1 class="page-title">Laporan Koperasi (Admin)</h1>
+    <!-- /.page-title -->
+  </div>
+  
+</div>
+<!-- /.fixed-navbar -->
+
+
+<div id="wrapper">
+  <div class="main-content">
+    <div class="row small-spacing">
+      <div class="col-lg-2 col-xs-12"></div>
+      <div class="col-lg-8 col-xs-12">
+        <div class="box-content card">
+          <h4 class="box-title" style="background: #0055FF ;cursor: pointer;" onclick="myFunction('div_filter_laporan')">Filter Laporan</h4>
+          <!-- /.box-title -->
+          <div class="card-content" style="overflow-x: auto; display: none;"  id="div_filter_laporan">
+            <table id="table_laporan" class="table table-striped table-bordered display" style="width:100%">
+              <thead>
+                <tr>
+                  <th>No</th>
+                  <th>Tahun</th>
+                  <th>Bulan</th>
+                  <th>Aksi</th>
+                </tr>
+              </thead>
+              
+            </table>
+          </div>
+          <!-- /.card-content -->
+        </div>
+        <!-- /.box-content -->
+
+        
+      </div>
+      <div class="col-lg-2 col-xs-12"></div>
+
+    </div>
+
+
+    
+
+
+    <footer class="footer">
+      <ul class="list-inline">
+        <li>2021 © Dinas Pendidikan Kabupaten Enrekang.</li>
+        <li><a href="#">Privacy</a></li>
+        <li><a href="#">Terms</a></li>
+        <li><a href="#">Help</a></li>
+      </ul>
+    </footer>
+  </div>
+  <!-- /.main-content -->
+</div><!--/#wrapper -->
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!--[if lt IE 9]>
+    <script src="../../assets/script/html5shiv.min.js"></script>
+    <script src="../../assets/script/respond.min.js"></script>
+  <![endif]-->
+  <!-- 
+  ================================================== -->
+  <!-- Placed at the end of the document so the pages load faster -->
+  <script src="../assets/scripts/jquery.min.js"></script>
+  <script src="../assets/scripts/modernizr.min.js"></script>
+  <script src="../assets/plugin/bootstrap/js/bootstrap.min.js"></script>
+  <script src="../assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
+  <script src="../assets/plugin/nprogress/nprogress.js"></script>
+  <script src="../assets/plugin/sweet-alert/sweetalert.min.js"></script>
+  <script src="../assets/plugin/waves/waves.min.js"></script>
+  <!-- Full Screen Plugin -->
+  <script src="../assets/plugin/fullscreen/jquery.fullscreen-min.js"></script>
+
+  <script src="../assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
+  <script src="../assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
+  <script src="../assets/scripts/main.min.js"></script>
+  <script type="text/javascript" src="../js/url.js"></script>
+  <script type="text/javascript" src="../js/main.js"></script>
+  <script src="../assets/sweet-alert/sweetalert.js"></script>
+  <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 type="text/javascript">
+    var table;
+    function datatables() {
+      table = $('#table_laporan').DataTable({ 
+        // "searching": false,
+        "lengthMenu": [ [5, 10, 15, -1], [5, 10, 15, "All"] ],
+        "pageLength": 10,
+        "ordering": true,
+        "processing": true, 
+        "serverSide": true, 
+        // "order": [[ 4, 'desc' ]], 
+         
+        "ajax": {
+          "url": url,
+          "type": "POST",
+          data : {proses : 'table_laporan'}
+        },
+
+        "columnDefs": [
+          { 
+            "targets": [ 0 ,3], 
+            "orderable": false, 
+          },
+        ],
+      });
+    }
+    datatables()
+
+    function href_laporan(bulan,tahun){
+      console.log(bulan)
+      console.log(tahun)
+
+      window.location.replace(`laporan_detail.html?tahun=${tahun}&bulan=${bulan}`)
+    }
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/admin/laporan_detail.html b/admin/laporan_detail.html
new file mode 100644
index 0000000..70919ab
--- /dev/null
+++ b/admin/laporan_detail.html
@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>Aplikasi Koperasi Guru Kabupaten Enrekang - Halaman Laporan Koperasi (Admin)</title>
+
+  <!-- Main Styles -->
+  <link rel="stylesheet" href="../assets/styles/style.min.css">
+
+  <!-- mCustomScrollbar -->
+  <link rel="stylesheet" href="../assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
+
+  <!-- Waves Effect -->
+  <link rel="stylesheet" href="../assets/plugin/waves/waves.min.css">
+
+  <link rel="stylesheet" href="../assets/fonts/material-design-iconic-font/css/material-design-iconic-font.min.css">
+ 
+  <link rel="stylesheet" href="../assets/fonts/fontello/fontello.css">
+  <!-- Dark Themes -->
+  <!-- <link rel="stylesheet" href="../assets/styles/style-dark.min.css"> -->
+  <link rel="stylesheet" href="../assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
+  <!-- <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 href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" />
+  <style type="text/css">
+    .swal-modal .swal-text {
+      text-align: center;
+    }
+  </style>
+
+</head>
+
+<body>
+<div class="main-menu">
+  <header class="header">
+    <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="../assets/images/admin.png" alt=""><span class="status online"></span></a>
+      <h5 class="name"></h5>
+      <h5 class="position"></h5>
+      <!-- /.name -->
+     
+    </div>
+    <!-- /.user -->
+  </header>
+  <!-- /.header -->
+  <div class="content">
+
+    <div class="navigation">
+      <h5 class="title">Navigasi</h5>
+      <!-- /.title -->
+      <ul class="menu js__accordion">
+        <li>
+          <a class="waves-effect" href="index.html"><i class="menu-icon fa fa-home"></i><span>Halaman Utama</span></a>
+        </li>
+        <li>
+          <a class="waves-effect" href="guru.html"><i class="menu-icon fa fa-users"></i><span>Halaman Guru</span></a>
+        </li>
+        <!-- <li>
+          <a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-cube-outline"></i><span>Halaman Simpanan</span><span class="menu-arrow fa fa-angle-down"></span></a>
+          <ul class="sub-menu js__content">
+            <li><a href="simpanan_pokok.html">Simpanan Pokok</a></li>
+            <li><a href="simpanan_wajib.html">Simpanan Wajib</a></li>
+            <li><a href="simpanan_sukarela.html">Simpanan Sukarela</a></li>
+            <li"><a href="pinjaman.html">Pinjaman / Pengembalian</a></li>
+          </ul>
+        </li>
+        <li >
+          <a class="waves-effect" href="list_barang.html"><i class="menu-icon zmdi zmdi-storage"></i><span>List Barang</span></a>
+        </li>
+        
+        <li class="current">
+          <a class="waves-effect" href="laporan_koperasi.html"><i class="menu-icon zmdi zmdi-assignment"></i><span>Laporan Koperasi</span></a>
+        </li> -->
+        
+      </ul>
+      <!-- /.menu js__accordion -->
+      <!-- <h5 class="title">Komponen Lain</h5> -->
+      <!-- /.title -->
+      <ul class="menu js__accordion">
+
+        <li class="current">
+          <a class="waves-effect" href="laporan_koperasi.html"><i class="menu-icon fa fa-wpforms"></i><span>Laporan Koperasi</span></a>
+        </li>
+       
+        <li>
+          <a class="waves-effect" onclick="logout()"><i class="menu-icon icon icon-logout"></i><span>Logout</span></a>
+        </li>
+      
+      </ul>
+     
+    </div>
+    <!-- /.navigation -->
+  </div>
+  <!-- /.content -->
+</div>
+<!-- /.main-menu -->
+
+<div class="fixed-navbar">
+  <div class="pull-left">
+    <button type="button" class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
+    <h1 class="page-title">Laporan Koperasi (Admin)</h1>
+    <!-- /.page-title -->
+  </div>
+  
+</div>
+<!-- /.fixed-navbar -->
+
+
+<div id="wrapper">
+  <div class="main-content">
+    <div class="row small-spacing">
+      <div class="col-lg-2 col-xs-12"></div>
+      <div class="col-lg-8 col-xs-12">
+        <div class="box-content card">
+          <h4 class="box-title" style="background: #0055FF ;cursor: pointer;" onclick="myFunction('div_filter_laporan')" id="title_h4">?</h4>
+          <!-- /.box-title -->
+          <div class="card-content" style="overflow-x: auto; display: none;"  id="div_filter_laporan">
+            <table id="table_laporan" class="table table-striped table-bordered display" style="width:100%">
+              
+            </table>
+          </div>
+          <!-- /.card-content -->
+        </div>
+        <!-- /.box-content -->
+
+        
+      </div>
+      <div class="col-lg-2 col-xs-12"></div>
+
+    </div>
+
+
+    
+
+
+    <footer class="footer">
+      <ul class="list-inline">
+        <li>2021 © Dinas Pendidikan Kabupaten Enrekang.</li>
+        <li><a href="#">Privacy</a></li>
+        <li><a href="#">Terms</a></li>
+        <li><a href="#">Help</a></li>
+      </ul>
+    </footer>
+  </div>
+  <!-- /.main-content -->
+</div><!--/#wrapper -->
+  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+  <!--[if lt IE 9]>
+    <script src="../../assets/script/html5shiv.min.js"></script>
+    <script src="../../assets/script/respond.min.js"></script>
+  <![endif]-->
+  <!-- 
+  ================================================== -->
+  <!-- Placed at the end of the document so the pages load faster -->
+  <script src="../assets/scripts/jquery.min.js"></script>
+  <script src="../assets/scripts/modernizr.min.js"></script>
+  <script src="../assets/plugin/bootstrap/js/bootstrap.min.js"></script>
+  <script src="../assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
+  <script src="../assets/plugin/nprogress/nprogress.js"></script>
+  <script src="../assets/plugin/sweet-alert/sweetalert.min.js"></script>
+  <script src="../assets/plugin/waves/waves.min.js"></script>
+  <!-- Full Screen Plugin -->
+  <script src="../assets/plugin/fullscreen/jquery.fullscreen-min.js"></script>
+
+  <script src="../assets/plugin/datatables/media/js/jquery.dataTables.min.js"></script>
+  <script src="../assets/plugin/datatables/media/js/dataTables.bootstrap.min.js"></script>
+  
+  <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
+  <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
+  <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
+          
+  <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
+
+  <script src="../assets/scripts/main.min.js"></script>
+  <script type="text/javascript" src="../js/url.js"></script>
+  <script type="text/javascript" src="../js/main.js"></script>
+  <script src="../assets/sweet-alert/sweetalert.js"></script>
+  <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 type="text/javascript" async>
+    var tahun = $_GET('tahun');
+    var bulan = $_GET('bulan');
+    console.log(tahun)
+    console.log(bulan)
+    $("#title_h4").html(`Laporan Tahun ${tahun}, Bulan ${nama_bulan(bulan)}`)
+
+    let data = $.ajax({
+      url: url+"api/cek_laporan",
+      type: 'get',
+      data: {where : {bulan : bulan,tahun: tahun} },
+      async : false
+    }).responseJSON.data
+
+    if (data == 0) {
+      window.location.replace('laporan.html')
+    }
+
+    function datatables_simpanan_wajib_all() {
+      $('#table_laporan').DataTable({
+        dom: 'Bfrtip',
+        buttons: [
+          {
+            extend: 'excelHtml5',
+            title: 'Excel',
+            text:'Export to excel'
+            //Columns to export
+            //exportOptions: {
+            //     columns: [0, 1, 2, 3,4,5,6]
+            // }
+          },
+          {
+            extend: 'pdfHtml5',
+            title: `Laporan Tahun ${tahun}, Bulan ${nama_bulan(bulan)}`,
+            text: 'Export to PDF'
+            //Columns to export
+            //exportOptions: {
+            //     columns: [0, 1, 2, 3, 4, 5, 6]
+            //  }
+          }
+        ],
+
+        responsive: true,
+        "paging":   false,
+        "info":     false,
+        searching: false,
+        "ajax": {
+          "type": "POST",
+          "url": url,
+          "data" :{'proses' : 'table_laporan_detail', bulan : bulan, tahun : tahun},
+          "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": "Waktu",
+              "render": function (data, row, type, meta) {
+                  return data.tanggal;
+              }
+          },
+          {
+              "mData": null,
+              "title": "Keterangan",
+              "render": function (data, row, type, meta) {
+                  return data.ket;
+              }
+          },
+          {
+              "mData": null,
+              "title": "Detail Keterangan",
+              "render": function (data, row, type, meta) {
+                let array = JSON.parse(data.ket_all)
+                switch (data.ket) {
+                  case 'Update Simpanan Wajib':
+                    let text = ''
+                    let datanya = array.data
+                    for (let i = 0; i < datanya.length; i++) {
+                      let ini = datanya[i].split(',');
+                      text += 'Tahun '+ini[0] +', Bulan '+ ini[1] + ' | '
+                      
+                    }
+                    text = text.substring(0, text.length - 1)
+                    return `NIP : ${array.nik_user}  <br>\n\r Simpanan Wajib : ${text.substring(0, text.length - 1)}`
+                    break;
+                  case 'Penambahan User':
+                    let simpanan_wajib = JSON.parse(array.simpanan_wajib);
+                    return `NIP : ${array.nik_user} <br>\n\r Nama : ${array.nama} <br>\n\r Simpanan Pokok : Rp.${numberWithCommas(array.simpanan_pokok)} <br>\n\r Simpanan Wajib : Rp.${numberWithCommas(simpanan_wajib[0].simpanan)}`
+                    break;
+                  case 'Pinjaman User':
+                    return `NIP : ${array.nik_user} <br>\n\r Pinjaman : Rp.${numberWithCommas(array.data.pinjaman)}`
+                    break;
+                  case 'Update Simpanan Sukarela':
+                    return `NIP : ${array.nik_user} <br>\n\r Simpanan Sukarela : Rp.${numberWithCommas(array.data.simpanan)}`
+                    break;
+                }
+                  ;
+              }
+          },
+          
+
+        ]
+        
+      });
+
+
+    }
+    datatables_simpanan_wajib_all()
+    
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 4ad4489..20cea8d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -197,4 +197,19 @@ function nama_bulan(val){
   }
 
   return nama_bulan;
+}
+
+function $_GET(param) {
+  var vars = {};
+  window.location.href.replace( location.hash, '' ).replace( 
+    /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp
+    function( m, key, value ) { // callback
+      vars[key] = value !== undefined ? value : '';
+    }
+  );
+
+  if ( param ) {
+    return vars[param] ? vars[param] : null;	
+  }
+  return vars;
 }
\ No newline at end of file
diff --git a/js/tableHTMLExport.js b/js/tableHTMLExport.js
new file mode 100644
index 0000000..22f59e2
--- /dev/null
+++ b/js/tableHTMLExport.js
@@ -0,0 +1,213 @@
+/*The MIT License (MIT)
+
+Copyright (c) 2018 https://github.com/FuriosoJack/TableHTMLExport
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.*/
+
+(function($){
+
+
+
+    $.fn.extend({
+        tableHTMLExport: function(options) {
+
+            var defaults = {
+                separator: ',',
+                newline: '\r\n',
+                ignoreColumns: '',
+                ignoreRows: '',
+                type:'csv',
+                htmlContent: false,
+                consoleLog: false,
+                trimContent: true,
+                quoteFields: true,
+                filename: 'tableHTMLExport.csv',
+                utf8BOM: true,
+                orientation: 'p' //only when exported to *pdf* "portrait" or "landscape" (or shortcuts "p" or "l")
+            };
+            var options = $.extend(defaults, options);
+
+
+            function quote(text) {
+                return '"' + text.replace('"', '""') + '"';
+            }
+
+
+            function parseString(data){
+
+                if(defaults.htmlContent){
+                    content_data = data.html().trim();
+                }else{
+                    content_data = data.text().trim();
+                }
+                return content_data;
+            }
+
+            function download(filename, text) {
+                var element = document.createElement('a');
+                element.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(text));
+                element.setAttribute('download', filename);
+
+                element.style.display = 'none';
+                document.body.appendChild(element);
+
+                element.click();
+
+                document.body.removeChild(element);
+            }
+
+            /**
+             * Convierte la tabla enviada a json
+             * @param el
+             * @returns {{header: *, data: Array}}
+             */
+            function toJson(el){
+
+                var jsonHeaderArray = [];
+                $(el).find('thead').find('tr').not(options.ignoreRows).each(function() {
+                    var tdData ="";
+                    var jsonArrayTd = [];
+
+                    $(this).find('th').not(options.ignoreColumns).each(function(index,data) {
+                        if ($(this).css('display') != 'none'){
+                            jsonArrayTd.push(parseString($(this)));
+                        }
+                    });
+                    jsonHeaderArray.push(jsonArrayTd);
+
+                });
+
+                var jsonArray = [];
+                $(el).find('tbody').find('tr').not(options.ignoreRows).each(function() {
+                    var tdData ="";
+                    var jsonArrayTd = [];
+
+                    $(this).find('td').not(options.ignoreColumns).each(function(index,data) {
+                        if ($(this).css('display') != 'none'){
+                            jsonArrayTd.push(parseString($(this)));
+                        }
+                    });
+                    jsonArray.push(jsonArrayTd);
+
+                });
+
+
+                return {header:jsonHeaderArray[0],data:jsonArray};
+            }
+
+
+            /**
+             * Convierte la tabla enviada a csv o texto
+             * @param table
+             * @returns {string}
+             */
+            function toCsv(table){
+                var output = "";
+                
+                if (options.utf8BOM === true) {                
+                    output += '\ufeff';
+                }
+
+                var rows = table.find('tr').not(options.ignoreRows);
+
+                var numCols = rows.first().find("td,th").not(options.ignoreColumns).length;
+
+                rows.each(function() {
+                    $(this).find("td,th").not(options.ignoreColumns)
+                        .each(function(i, col) {
+                            var column = $(col);
+
+                            // Strip whitespaces
+                            var content = options.trimContent ? $.trim(column.text()) : column.text();
+
+                            output += options.quoteFields ? quote(content) : content;
+                            if(i !== numCols-1) {
+                                output += options.separator;
+                            } else {
+                                output += options.newline;
+                            }
+                        });
+                });
+
+                return output;
+            }
+
+
+            var el = this;
+            var dataMe;
+            if(options.type == 'csv' || options.type == 'txt'){
+
+
+                var table = this.filter('table'); // TODO use $.each
+
+                if(table.length <= 0){
+                    throw new Error('tableHTMLExport must be called on a <table> element')
+                }
+
+                if(table.length > 1){
+                    throw new Error('converting multiple table elements at once is not supported yet')
+                }
+
+                dataMe = toCsv(table);
+
+                if(defaults.consoleLog){
+                    console.log(dataMe);
+                }
+
+                download(options.filename,dataMe);
+
+
+                //var base64data = "base64," + $.base64.encode(tdData);
+                //window.open('data:application/'+defaults.type+';filename=exportData;' + base64data);
+            }else if(options.type == 'json'){
+
+                var jsonExportArray = toJson(el);
+
+                if(defaults.consoleLog){
+                    console.log(JSON.stringify(jsonExportArray));
+                }
+                dataMe = JSON.stringify(jsonExportArray);
+
+                download(options.filename,dataMe)
+                /*
+                var base64data = "base64," + $.base64.encode(JSON.stringify(jsonExportArray));
+                window.open('data:application/json;filename=exportData;' + base64data);*/
+            }else if(options.type == 'pdf'){
+
+                var jsonExportArray = toJson(el);
+
+                var contentJsPdf = {
+                    head: [jsonExportArray.header],
+                    body: jsonExportArray.data
+                };
+
+                if(defaults.consoleLog){
+                    console.log(contentJsPdf);
+                }
+
+                var doc = new jsPDF(defaults.orientation, 'pt');
+                doc.autoTable(contentJsPdf);
+                doc.save(options.filename);
+
+            }
+            return this;
+        }
+    });
+})(jQuery);
+