zet-lib 1.2.58 → 1.2.60

package/lib/Form.js

@@ -762,7 +762,7 @@ Form.build = (obj) => {
   let view_only = Object.prototype.hasOwnProperty.call(obj, 'view_only') ? obj.view_only : false
   if (!view_only) {
     if (attributes && Object.prototype.hasOwnProperty.call(attributes, 'name')) {
-      if (obj.attributes.name == 'relation') {
+      if (obj.attributes.name == 'relation' || obj.attributes.name == 'typeahead' || obj.attributes.name == 'dropdown_multi') {
         relation = `<a target="_blank" href="/${obj.attributes.table}"> > </a>`
       }
     }
@@ -868,7 +868,7 @@ Form.modal = (obj, LANGUAGE = {}) => {
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h1 class="modal-title fs-5" id="exampleModalLabel">Lock/Unlock</h1>
+        <h1 class="modal-title fs-5">Lock/Unlock</h1>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
@@ -877,9 +877,23 @@ Form.modal = (obj, LANGUAGE = {}) => {
       </div>
     </div>
   </div>
+</div>`
+  let modalFields3 = `
+<div class="modal fade" id="grid-approval" tabindex="-1" aria-labelledby="grid-approval-label" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5" >Approvals</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body" style="min-height: 150px">
+        <div class="row"><div class="col-md-12 modal-body-approval"></div></div>
+        </div>
+    </div>
+  </div>
 </div>`
   try {
-    return modalFields + modalFields2
+    return modalFields + modalFields2 + modalFields3
   } catch (err) {
     console.log(err)
   }

package/lib/zAppRouter.js

@@ -1298,7 +1298,7 @@ router.get('/zdownload/zgenerator/:table', async (req, res) => {
 
 router.post('/zlock-unlock/:table', async (req, res) => {
   let json = Util.jsonSuccess('Success')
-  var table = req.params.table
+  let table = req.params.table
   let cacheRoles = myCache.get('ROLES')
   let roleId = res.locals.roleId
   let myrole = cacheRoles[roleId]
@@ -1330,6 +1330,85 @@ router.post('/zlock-unlock/:table', async (req, res) => {
   res.json(json)
 })
 
+router.post('/zapproval-update/:table', async (req, res) => {
+  let json = Util.jsonSuccess('Success')
+  let table = req.params.table
+  let value = req.body.value
+  let text = req.body.text
+  let datas = req.body.datas || []
+  let roles = myCache.get('ROLES')[res.locals.roleId] || {}
+  let myaccess = roles.approvals[table]
+  let hasAccess = myaccess.hasOwnProperty(value) ? true : false
+  let canUpdate = true
+  let dataStatus = []
+  if (text == '') {
+    res.json(Util.flashError('please type a message'))
+    return false
+  }
+  if (hasAccess) {
+    if (datas.length > 0) {
+      for (const data of datas) {
+        let id = data.name.replace('ck[', '').replace(']', '')
+        let result = await connection.result({
+          select: 'id,approval_status,approval_history',
+          table: table,
+          where: {
+            id: id,
+          },
+        })
+        let approval_status = result.approval_status || null
+        let approval_history = result.approval_history || []
+        if (approval_status == null) {
+          canUpdate = true
+        } else if (approval_status == 12) {
+          canUpdate = true
+        } else {
+          if (+value > +approval_status) {
+            canUpdate = true
+          } else {
+            canUpdate = false
+          }
+        }
+        /*if (approval_history.length > 0) {
+          let lastStatus = +approval_history[approval_history.length - 1].status
+          canUpdate = lastStatus > +value ? false : true
+          let history = approval_history.filter((item) => item.status == value && item.user_id == res.locals.userId)
+          if (history.length > 0) {
+            canUpdate = false
+          }
+        }*/
+        if (canUpdate) {
+          approval_history.push({
+            status: value,
+            user_id: res.locals.userId,
+            created_at: Util.now(),
+            text: text,
+          })
+          let mydata = {
+            approval_status: value,
+            approval_history: Util.array_to_jsonb(approval_history),
+          }
+          await connection.update({
+            table: table,
+            where: {
+              id: id,
+            },
+            data: mydata,
+          })
+        } else {
+          dataStatus.push(`${id} -> Status has been delivered`)
+        }
+      }
+    } else {
+      json = Util.flashError('No Data')
+    }
+  } else {
+    json = Util.flashError('No Access')
+  }
+  json.dataStatus = dataStatus
+  res.json(json)
+})
+
 router.get('/addlock-fields', async (req, res) => {
   let tables = await connection.query(connection.showTables)
   for (const table of tables) {
@@ -1374,4 +1453,56 @@ router.get('/addlock-models', async (req, res) => {
   res.send(text)
 })
 
+router.get('/addapprovals-data', async (req, res) => {
+  let tables = await connection.query(connection.showTables)
+  for (const table of tables) {
+    let tablename = table.tablename
+    let sql = `ALTER TABLE ${tablename}  ADD COLUMN "approval_status" smallint DEFAULT NULL`
+    let sql2 = `ALTER TABLE ${tablename}  ADD COLUMN "approval_history" jsonb[] DEFAULT NULL `
+    try {
+      await connection.query(sql)
+    } catch (e) {
+      console.log(e)
+    }
+    try {
+      await connection.query(sql2)
+    } catch (e) {
+      console.log(e)
+    }
+  }
+  res.send(tables)
+})
+
+router.get('/addapproval-models', async (req, res) => {
+  let text = ''
+  let results = await connection.results({
+    table: 'zfields',
+  })
+  for (const result of results) {
+    let labels = result.labels
+    let arr = Object.keys(labels)
+    if (!Util.in_array('approval_status', arr)) {
+      text += result.id + ' tidak ada'
+      //approval_status_id : "Approval Status",
+      labels.approval_status = 'Approval Status'
+      labels.approval_history = 'Approval History'
+      try {
+        await connection.update({
+          table: 'zfields',
+          data: {
+            labels: JSON.stringify(labels),
+          },
+          where: {
+            id: result.id,
+          },
+        })
+      } catch (err) {
+        console.log(err)
+      }
+    }
+  }
+
+  res.send(text)
+})
+
 module.exports = router

package/lib/zCache.js

@@ -19,6 +19,7 @@ zCache.KEYS = {
   ZFUNCTIONS: 'ZFUNCTIONS',
   VERSIONS: 'VERSIONS',
   MODELS_RELATIONS: 'MODELS_RELATIONS',
+  APPROVAL_LEVELS : 'APPROVAL_LEVELS'
 }
 
 zCache.STATICS = zCache.KEYS
@@ -85,6 +86,11 @@ const cache = async () => {
   } else {
     await zCache.ZFUNCTIONS()
   }
+  if (myCache.has('APPROVAL_LEVELS')) {
+    //i = i + 1;
+  } else {
+    await zCache.APPROVAL_LEVELS()
+  }
   //await zCache.CURRENCIES();
   //console.log(i)
   if (i < 5) {
@@ -105,6 +111,7 @@ zCache.renew = async () => {
   await zCache.MYMODELS()
   await zCache.MENU_SYSTEMS()
   await zCache.MODELS_RELATIONS()
+  await zCache.APPROVAL_LEVELS()
 }
 
 zCache.ROUTES = () => {
@@ -233,14 +240,14 @@ zCache.MENU_SYSTEMS = () => {
       text: 'LANGUAGE.users',
       href: 'zuser',
     },
-    {
-      text: 'LANGUAGE.company',
-      href: 'zcompany',
-    },
     {
       text: 'LANGUAGE.user_access',
       href: 'zuser_company',
     },
+    {
+      text: 'LANGUAGE.company',
+      href: 'zcompany',
+    },
     {
       text: 'LANGUAGE.access_role',
       href: 'zrole',
@@ -315,4 +322,18 @@ zCache.MODELS_RELATIONS = async () => {
   }
 }
 
+zCache.APPROVAL_LEVELS = async() => {
+  if (myCache.has('APPROVAL_LEVELS')) {
+    return myCache.get('APPROVAL_LEVELS')
+  } else {
+    let results = await connection.results({
+      select:'id,name,color',
+      table:'zapproval_type'
+    })
+    let obj = Util.arrayToObject(results,"id");
+    myCache.set('APPROVAL_LEVELS', obj)
+    return obj
+  }
+}
+
 module.exports = zCache

package/lib/zRoleRouter.js

@@ -185,6 +185,44 @@ router.post('/tab-access', async (req, res) => {
   res.send(html)
 })
 
+router.post('/approval-access', async (req, res) => {
+  let json = Util.jsonSuccess()
+  let html = ''
+  const checkedFn = (obj, name) => {
+    return obj.hasOwnProperty(name) && obj[name] ? 'checked' : ''
+  }
+  try {
+    const table = req.body.table
+    const id = req.body.id
+    let tabRole = await connection.result({
+      table: 'zrole',
+      where: {
+        id: id,
+      },
+    })
+    let myapprovals = tabRole.approvals || {}
+    let myapprovalsRole = myapprovals[table] || {}
+    let results = await connection.results({
+      table: 'zapproval_type',
+      order_by: ['id asc'],
+    })
+    html += `<form id="approvalform">`
+    html += `<table class="table table-hover"><thead><tr><th>Name </th><th>Level <input type="checkbox" onclick="tabApprovals(this)" id="checkapprovals" /></th></tr></thead><tbody></tbody>`
+    results.map((item) => {
+      html += `<tr>
+                <td>${item.name}</td>
+                <td><input type="checkbox" class="checkapproval" name="approval_${item.id}"  ${checkedFn(myapprovalsRole, item.id)} /></td>
+              
+                </tr>`
+    })
+    html += `</tbody></table>`
+    html += `</form>`
+  } catch (e) {
+    json = Util.flashError(e.toString())
+  }
+  res.send(html)
+})
+
 router.post('/post-access', async (req, res) => {
   let json = Util.jsonSuccess()
   let table = req.body.table || ''
@@ -239,6 +277,50 @@ router.post('/post-access', async (req, res) => {
   res.json(json)
 })
 
+router.post('/post-approval', async (req, res) => {
+  let json = Util.jsonSuccess()
+  let table = req.body.table || ''
+  if (table == '') {
+    res.json(Util.flashError('Table is empty!'))
+    return false
+  }
+  let datas = req.body.datas || []
+  console.log(datas)
+  let id = req.body.id
+  if (datas.length == 0) {
+    res.json(Util.flashError('Data is empty!'))
+    return false
+  }
+  let myapprovals = {}
+  try {
+    let result = await connection.result({
+      table: 'zrole',
+      where: {
+        id: id,
+      },
+    })
+    myapprovals = result.approvals || {}
+    let obj = {}
+    datas.map((item) => {
+      let id = item.name.replace('approval_', '')
+      obj[id] = true
+    })
+    myapprovals[table] = obj
+    await connection.update({
+      table: 'zrole',
+      data: {
+        approvals: JSON.stringify(myapprovals),
+      },
+      where: {
+        id: id,
+      },
+    })
+  } catch (err) {
+    json = Util.jsonError(err + '')
+  }
+  res.json(json)
+})
+
 router.delete('/delete/:id', async (req, res) => {
   let json = Util.jsonSuccess()
   let id = parseInt(req.params.id)
@@ -300,6 +382,7 @@ const body = `<div class="">
                             <% for(var i = 0;i < actions.length;i++) { %>
                                 <th><%= actions[i] %> <input onclick='checkthis("<%= actions[i] %>")' type="checkbox" id="all<%= actions[i] %>"></th>
                             <% } %>
+                            <th>Approve Level</th>
                             <th>Tabs</th>
                         </tr>
                         </thead>
@@ -308,8 +391,10 @@ const body = `<div class="">
                             <tr>
                                 <td>
                                     <% var ename = routes[i]; 
-                                    var handleTag = "handleAccess('"+routes[i]+"')";
-                                    var spanRole =  tabs.includes(routes[i]) ? '<span class="handle-access icon-small icons-light" onclick="'+handleTag+'" data-bs-toggle="modal" data-bs-target="#tabaccess" ><img class="icons-bg-blue gridview icon-image" src="/assets/icons/lock-access.svg"></span>' : '' %>
+                                    const handleTag = "handleAccess('"+routes[i]+"')";
+                                    const handleApproval = "handleApproval('"+routes[i]+"')";
+                                    const spanApproval =  '<span class="handle-access icon-small icons-light" onclick="'+handleApproval+'" data-bs-toggle="modal" data-bs-target="#modalapproval" ><img class="icons-bg-blue gridview icon-image" src="/assets/icons/lock-access.svg"></span>';
+                                    const spanRole =  tabs.includes(routes[i]) ? '<span class="handle-access icon-small icons-light" onclick="'+handleTag+'" data-bs-toggle="modal" data-bs-target="#tabaccess" ><img class="icons-bg-blue gridview icon-image" src="/assets/icons/lock-access.svg"></span>' : '' %>
                                     <a href="/<%- ename %>" target="_blank"><%- ename %></a>
                                     </td>
                                 <% for(var x = 0;x < actions.length;x++) { %>
@@ -317,6 +402,7 @@ const body = `<div class="">
                                         <% if(json && json.hasOwnProperty(ename) && json[ename].indexOf(actions[x]) >= 0) { %> <%= 'checked="checked"' %> <% } %> title="Role for <%= routes[i] %> <%= actions[x] %>" type="checkbox">
                                     </td>
                                 <% } %>
+                                <td><%- spanApproval %></td>
                                 <td><%- spanRole %></td>
                             </tr>
                         <% } %>
@@ -376,9 +462,7 @@ const body = `<div class="">
             <div class="modal-header"><h5 class="modal-title" id="tabaccesstitle">Tab Access <span id="titleaccess"></span></h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
-            <div class="modal-body body-access">
-                
-            </div>
+            <div class="modal-body body-access"></div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                 <button type="button" class="btn btn-primary btn-save-tab">Save changes</button>
@@ -386,6 +470,20 @@ const body = `<div class="">
         </div>
     </div>
 </div>
+<div class="modal fade" id="modalapproval" tabindex="-1" aria-labelledby="tabapprovalModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header"><h5 class="modal-title">Approval Level <span id="approvalname"></span> </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body body-approval"></div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-primary btn-save-approval">Save changes</button>
+            </div>
+        </div>
+    </div>
+</div>
 
 
 `
@@ -405,6 +503,14 @@ const js = `<script>
             $("input." + elm).prop("checked", false);
         }
     }
+    function tabApprovals(that) {
+        let elm = 'checkapproval';
+         if ($(that).is(":checked")) {
+            $("input." + elm).prop("checked", true);
+        } else {
+            $("input." + elm).prop("checked", false);
+        }
+    }
     $("#roleName").on('change', function () {
         location.href = "/zrole?id=" + $(this).val();
     });
@@ -452,7 +558,13 @@ const js = `<script>
             })
         }
     }
-    
+    function handleApproval(table) {
+        $(".btn-save-approval").attr("data-table", table);
+        $("#approvalname").html(table);
+        ajaxPost('/zrole/approval-access',{table:table, id: "<%- id %>"}, ((data) => {
+            $(".body-approval").html(data);
+        }))
+    }
     function handleAccess(table) {
         $(".btn-save-tab").attr("data-table", table);
         ajaxPost('/zrole/tab-access',{table:table, id: "<%- id %>"}, ((data) => {
@@ -471,6 +583,18 @@ const js = `<script>
             $(".btn-close").click();
         }))
     })
+    
+    $(".btn-save-approval").on("click",(e) => {
+        let queryform = $("#approvalform").serializeArray();
+        ajaxPost('/zrole/post-approval', {
+            datas: queryform,
+            id: "<%- id %>",
+            table : e.target.getAttribute('data-table')
+            },((data) => {
+            toastrForm(data);
+            $(".btn-close").click();
+        }))
+    })
 </script>
 `
 

package/lib/zRoute.js

@@ -868,6 +868,19 @@ zRoute.dataTableFilter = (MYMODEL, relations, filter) => {
   return dataTable
 }
 
+zRoute.approval_history_data = (arr = []) => {
+  let myvalue = ''
+  let APPROVAL_LEVELS = myCache.get('APPROVAL_LEVELS')
+  let USERS = Util.arrayToObject(myCache.get('zuser_created_by_1'), 'id')
+  myvalue = ''
+  if (arr && arr.length > 0) {
+    arr.map((item) => {
+      myvalue += `[${APPROVAL_LEVELS[item.status].name} By:${USERS[item.user_id].zname}(${item.created_at}) (${item.text})] `
+    })
+  }
+  return myvalue
+}
+
 zRoute.dataTableData = (key, value, MYMODEL, relations, myid = '') => {
   relations = relations || {}
   var keyFields = key + 'Fields'
@@ -876,6 +889,8 @@ zRoute.dataTableData = (key, value, MYMODEL, relations, myid = '') => {
   var widgetName = MYMODEL.widgets[key] ? MYMODEL.widgets[key].name : ''
   if (key == 'lock') {
     myvalue = value == 1 ? 'Lock' : 'Unlock'
+  } else if (key == 'approval_history') {
+    myvalue = zRoute.approval_history_data(myvalue)
   } else {
     if (widgetName) {
       switch (widgetName) {
@@ -2509,6 +2524,21 @@ zRoute.viewFormsSync = async (req, res, MYMODEL, data = {}) => {
     }
     forms.build[key] = cForm.build(forms.obj[key])
   }
+
+  let approval_history_table = ``
+  if (data.approval_status != null) {
+    let APPROVAL_LEVELS = myCache.get('APPROVAL_LEVELS')
+    let USERS = Util.arrayToObject(myCache.get('zuser_created_by_1'), 'id')
+    approval_history_table += `<div class="dropdown"><button class="btn boxy dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Approval Status : ${APPROVAL_LEVELS[data.approval_status].name}</button>`
+    approval_history_table += `<ul class="dropdown-menu" aria-labelledby="viewApproval">`
+    let arr = data.approval_history || []
+    arr.map((item, index) => {
+      approval_history_table += `<li><a class="dropdown-item" href="#">${index + 1}. ${APPROVAL_LEVELS[item.status].name} (${item.text}) ${USERS[item.user_id].zname} ${Util.timeSql(data.created_at)}</a></li>`
+    })
+    approval_history_table += `</ul></div>`
+  }
+
+  forms.approval_history_table = approval_history_table
   return forms
 }
 

package/lib/zdataTable.js

@@ -2,10 +2,11 @@
  * Created by sintret dev on 1/6/2022.
  */
 const Util = require('./Util')
+const myCache = require('./cache')
 
 class dataTable {
-  constructor(visibles) {
-    this.visibles = visibles //array object
+  constructor(datas) {
+    this.visibles = datas.visiblesObj //array object
     this.setColumns = ''
     this.setTable = ''
     this.srcScript = '/modules/datatables.min.js'
@@ -17,8 +18,10 @@ class dataTable {
     this.relations
     this.routeName
     this.types = {}
-    this.levels = {}
-    this.visiblesKey = visibles.map((item) => item.key)
+    this.roles = myCache.get('ROLES')[datas.zuser.role_id] || {}
+    this.level_approval = this.roles.approvals && this.roles.approvals[datas.routeName] ? this.roles.approvals[datas.routeName] : {}
+    this.hasLevels = Object.keys(this.level_approval).length == 0 ? false : true
+    this.visiblesKey = this.visibles.map((item) => item.key)
   }
 
   // for filter html
@@ -92,6 +95,9 @@ class dataTable {
     if (this.levels.lock) {
       html += `<button title="Lock/Unlock" style="background-color: #3B71CA; color:white" class="btn btn-danger buttons-lock buttons-html5 copy gridlock boxy-small dimens2x image-button" tabindex="0" style="color: "  type="button"><img src="/assets/icons/cloud-lock.svg" class="icons-bg-white"> Lock/Unlock</span></span></button>`
     }
+    if (this.hasLevels) {
+      html += `<button title="Approval" style="background-color: #3B71CA; color:white" class="btn buttons-html5 boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-approval" type="button"><img src="/assets/icons/rubber-stamp.svg" class="icons-bg-white"> Approval</span></span></button>`
+    }
     html += `<button title="${LANGUAGE.settings}" class="btn buttons-excel buttons-html5 setting gridsettings boxy-small dimens2x image-button" tabindex="0" aria-controls="DataTables_Table_0" type="button" data-bs-toggle="modal" data-bs-target="#grid-modal"><img src="/assets/icons/settings.svg" class="icons-bg-black"> ${LANGUAGE.settings}</button>`
     html += `<button class="btn refresh gridreload boxy-small dimens2x image-button" title="${LANGUAGE.grid_refresh}" tabindex="0" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/refresh.svg" class="icons-bg-black"></button>`
     if (this.levels.export) {
@@ -120,13 +126,16 @@ class dataTable {
       html += `<button title="${LANGUAGE.create_info}" class="btn create gridadd image-button boxy-small dimens2x" tabindex="0" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/plus.svg" class="icons-bg-black"> ${LANGUAGE.create}</button>`
     }
     if (this.levels.import) {
-      html += `<button title="${LANGUAGE.import_info}" class="btn buttons-copy buttons-html5 copy gridimport boxy-small dimens2x image-button" tabindex="0"  type="button"><img src="/assets/icons/database-import.svg" class="icons-bg-black"> ${LANGUAGE.import}</span></span></button>`
+      html += `<button title="${LANGUAGE.import_info}" class="btn buttons-copy buttons-html5 copy gridimport boxy-small dimens2x image-button" type="button"><img src="/assets/icons/database-import.svg" class="icons-bg-black"> ${LANGUAGE.import}</span></span></button>`
     }
     if (this.levels.lock) {
-      html += `<button title="Lock/Unlock" style="background-color: #332D2D; color:white" class="btn btn-danger buttons-lock buttons-html5 copy gridlock boxy-small dimens2x image-button" tabindex="0"  data-bs-toggle="modal" data-bs-target="#grid-lock" type="button"><img src="/assets/icons/cloud-lock.svg" class="icons-bg-white"> Lock/Unlock</span></span></button>`
+      html += `<button title="Lock/Unlock" style="background-color: #332D2D; color:white" class="btn btn-danger buttons-lock buttons-html5 copy gridlock boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-lock" type="button"><img src="/assets/icons/cloud-lock.svg" class="icons-bg-white"> Lock/Unlock</span></span></button>`
     }
-    html += `<button title="${LANGUAGE.settings}" class="btn buttons-excel buttons-html5 setting gridsettings boxy-small dimens2x image-button" tabindex="0"  type="button" data-bs-toggle="modal" data-bs-target="#grid-modal"><img src="/assets/icons/settings.svg" class="icons-bg-black"> ${LANGUAGE.settings}</button>`
-    html += `<button class="btn refresh gridreload boxy-small dimens2x image-button" title="${LANGUAGE.grid_refresh}" tabindex="0" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/refresh.svg" class="icons-bg-black"></button>`
+    if (this.hasLevels) {
+      html += `<button title="Approval" style="background-color: #E4A11B; color:white" class="btn buttons-html5 boxy-small dimens2x image-button"  data-bs-toggle="modal" data-bs-target="#grid-approval" type="button"><img src="/assets/icons/rubber-stamp.svg" class="icons-bg-white"> Approval</span></span></button>`
+    }
+    html += `<button title="${LANGUAGE.settings}" class="btn buttons-excel buttons-html5 setting gridsettings boxy-small dimens2x image-button" type="button" data-bs-toggle="modal" data-bs-target="#grid-modal"><img src="/assets/icons/settings.svg" class="icons-bg-black"> ${LANGUAGE.settings}</button>`
+    html += `<button class="btn refresh gridreload boxy-small dimens2x image-button" title="${LANGUAGE.grid_refresh}" aria-controls="DataTables_Table_0" type="button"><img src="/assets/icons/refresh.svg" class="icons-bg-black"></button>`
     if (this.levels.export) {
       html += `<div class="btn-group" role="group">
                             <button id="dropdownExport" type="button" class="btn dropdown-toggle boxy-small dimens2x image-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -182,6 +191,53 @@ class dataTable {
     if (typeaheadScript) {
       script += `<script type="text/javascript">$(function () {${typeaheadScript}})</script>${Util.newLine}`
     }
+    if (this.hasLevels) {
+      //modal-body-approval
+      let APPROVAL_LEVELS = myCache.get('APPROVAL_LEVELS')
+      let approvalButtonHtml = ``
+      for (let item in this.level_approval) {
+        let imageapproval = 'brand-bunpo'
+        if (item == 12) {
+          imageapproval = 'rubber-stamp-off'
+        } else if (item == 0) {
+          imageapproval = 'list-check'
+        } else if (item == 11) {
+          imageapproval = 'rubber-stamp'
+        }
+        approvalButtonHtml += ` <button title="${APPROVAL_LEVELS[item].name}" data-value="${item}" style="background-color: ${APPROVAL_LEVELS[item].color}; color:white" class="btn btn-approval-levels boxy-small dimens2x image-button mb-3" type="button"><img src="/assets/icons/${imageapproval}.svg" class="icons-bg-white"> ${APPROVAL_LEVELS[item].name}</button> `
+      }
+      approvalButtonHtml += `<div class="row"><div class="col-md-10"><textarea class="form-control boxy purple-border" id="zapproval_message" placeholder="tulis alasan..." rows="2"></textarea></div><div class="col-md-1"></div></div>`
+
+      script += `<script type="text/javascript">$(function () {
+    $(".modal-body-approval").html('${approvalButtonHtml}');
+    $(".btn-approval-levels").on("click", function () {
+    ajaxPost('/zapproval-update/${this.MYMODEL.table}', {
+        text : $("#zapproval_message").val(),
+        value : $(this).attr('data-value'),
+        datas: $(".ck").serializeArray()
+    }, function (data) {
+        toastrForm(data);
+        if(data.status == 1) {
+            if(data.dataStatus.length > 0) {
+            data.dataStatus.map((item) => {
+                toastr.error(item);
+            });
+            setTimeout(function() {
+              if(data.status ==1) {
+                location.href='';
+            }
+            },4000);
+        } else {
+            if(data.status ==1) {
+                location.href='';
+            }
+        }
+        }
+    })
+})
+})</script>${Util.newLine}`
+    }
+
     script += `<script type="text/javascript">
 $(function () {
     $("#ck_all").on('click', function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zet-lib",
-  "version": "1.2.58",
+  "version": "1.2.60",
   "description": "zet is a library that part of zet generator.",
   "engines": {
     "node": ">=18"