From 9ab0c7b6f4aac521cb8dde4fb999f3546e5f8e90 Mon Sep 17 00:00:00 2001
From: Sas Andy <alfiantoandy6@gmail.com>
Date: Thu, 16 May 2024 09:03:55 +0700
Subject: [PATCH] revisi html toast

---
 assets/mcu/mike/t0007.html | 1716 ++++++++++++++++++++++++++++++------
 1 file changed, 1425 insertions(+), 291 deletions(-)

diff --git a/assets/mcu/mike/t0007.html b/assets/mcu/mike/t0007.html
index d38574d..48c51b7 100644
--- a/assets/mcu/mike/t0007.html
+++ b/assets/mcu/mike/t0007.html
@@ -32,7 +32,7 @@ License: You must have a valid license purchased only from themeforest(the above
 
     <!--begin::Page Vendors Styles(used by this page)-->
     <link
-      href="../../assets/plugins/custom/fullcalendar/fullcalendar.bundle.css"
+      href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css"
       rel="stylesheet"
       type="text/css"
     />
@@ -40,51 +40,44 @@ License: You must have a valid license purchased only from themeforest(the above
 
     <!--begin::Global Theme Styles(used by all pages)-->
     <link
-      href="../../assets/plugins/global/plugins.bundle.css"
+      href="assets/plugins/global/plugins.bundle.css"
       rel="stylesheet"
       type="text/css"
     />
     <link
-      href="../../assets/plugins/custom/prismjs/prismjs.bundle.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-    <link
-      href="../../assets/css/style.bundle.css"
+      href="assets/plugins/custom/prismjs/prismjs.bundle.css"
       rel="stylesheet"
       type="text/css"
     />
+    <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
     <!--end::Global Theme Styles-->
 
     <!--begin::Layout Themes(used by all pages)-->
 
     <link
-      href="../../assets/css/themes/layout/header/base/light.css"
+      href="assets/css/themes/layout/header/base/light.css"
       rel="stylesheet"
       type="text/css"
     />
     <link
-      href="../../assets/css/themes/layout/header/menu/light.css"
+      href="assets/css/themes/layout/header/menu/light.css"
       rel="stylesheet"
       type="text/css"
     />
     <link
-      href="../../assets/css/themes/layout/brand/dark.css"
+      href="assets/css/themes/layout/brand/dark.css"
       rel="stylesheet"
       type="text/css"
     />
     <link
-      href="../../assets/css/themes/layout/aside/dark.css"
+      href="assets/css/themes/layout/aside/dark.css"
       rel="stylesheet"
       type="text/css"
     />
     <!--end::Layout Themes-->
 
-    <link rel="shortcut icon" href="../../assets/media/logos/favicon.ico" />
-    <link
-      rel="stylesheet"
-      href="../asset-corporate-portal/css/sas.bundle.css"
-    />
+    <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
+    <link rel="stylesheet" href="asset-corporate-portal/css/sas.bundle.css" />
   </head>
   <!--end::Head-->
 
@@ -93,104 +86,124 @@ License: You must have a valid license purchased only from themeforest(the above
     id="kt_body"
     class="header-fixed header-mobile-fixed subheader-enabled subheader-fixed subheader-mobile-fixed aside-enabled aside-fixed aside-minimize-hoverable page-loading"
   >
-  <!--begin::Toast-->
-<!-- toast here -->
+    <!--begin::Toast-->
+    <!-- toast here -->
 
-  <!-- Position it -->
-  <div class="toast-top-right  " >
-    <!-- Then put toasts within -->
-    <!-- toast success -->
-    <div
-      class="toast fade show "
-      role="alert"
-      aria-live="assertive"
-      aria-atomic="true"
-    >
-      <div class="toast-header bg-success text-white">
-        <span class="iconify mr-2 icon-xl" data-icon="ep:success-filled"></span>
-        <strong class="mr-auto">Success</strong>
-        <small class="text-muted text-white">just now</small>
-        <button
-          type="button"
-          class="ml-2 mb-1 close"
-          data-dismiss="toast"
-          aria-label="Close"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
+    <!-- Position it -->
+    <div class="toast-top-right">
+      <!-- Then put toasts within -->
+      <!-- toast success -->
+      <div
+        class="toast fade show"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        <div class="toast-header bg-success text-white">
+          <span
+            class="iconify mr-2 icon-xl"
+            data-icon="ep:success-filled"
+          ></span>
+          <strong class="mr-auto">Success</strong>
+          <small class="text-muted text-white">just now</small>
+          <button
+            type="button"
+            class="ml-2 mb-1 close"
+            data-dismiss="toast"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="toast-body bg-success-transparent">
+          This is a success toast.
+        </div>
       </div>
-      <div class="toast-body bg-success-transparent">This is a success toast.</div>
-    </div>
-    <!-- toast error -->
-    <div
-      class="toast fade show"
-      role="alert"
-      aria-live="assertive"
-      aria-atomic="true"
-    >
-      <div class="toast-header bg-danger text-white">
-        <span class="iconify mr-2 icon-xl" data-icon="fluent-mdl2:status-error-full"></span>
-        <strong class="mr-auto">Error</strong>
-        <small class="text-muted text-white">2 seconds ago</small>
-        <button
-          type="button"
-          class="ml-2 mb-1 close"
-          data-dismiss="toast"
-          aria-label="Close"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
+      <!-- toast error -->
+      <div
+        class="toast fade show"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        <div class="toast-header bg-danger text-white">
+          <span
+            class="iconify mr-2 icon-xl"
+            data-icon="fluent-mdl2:status-error-full"
+          ></span>
+          <strong class="mr-auto">Error</strong>
+          <small class="text-muted text-white">2 seconds ago</small>
+          <button
+            type="button"
+            class="ml-2 mb-1 close"
+            data-dismiss="toast"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="toast-body bg-danger-transparent">
+          This is an error toast.
+        </div>
       </div>
-      <div class="toast-body bg-danger-transparent">This is an error toast.</div>
-    </div>
-    <!-- toast warning -->
-    <div
-      class="toast fade show"
-      role="alert"
-      aria-live="assertive"
-      aria-atomic="true"
-    >
-      <div class="toast-header bg-warning text-white">
-        <span class="iconify mr-2 icon-xl" data-icon="mingcute:warning-fill"></span>
-        <strong class="mr-auto">Warning</strong>
-        <small class="text-muted text-white">2 seconds ago</small>
-        <button
-          type="button"
-          class="ml-2 mb-1 close"
-          data-dismiss="toast"
-          aria-label="Close"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
+      <!-- toast warning -->
+      <div
+        class="toast fade show"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        <div class="toast-header bg-warning text-white">
+          <span
+            class="iconify mr-2 icon-xl"
+            data-icon="mingcute:warning-fill"
+          ></span>
+          <strong class="mr-auto">Warning</strong>
+          <small class="text-muted text-white">2 seconds ago</small>
+          <button
+            type="button"
+            class="ml-2 mb-1 close"
+            data-dismiss="toast"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="toast-body bg-warning-transparent">
+          This is a warning toast.
+        </div>
       </div>
-      <div class="toast-body bg-warning-transparent">This is a warning toast.</div>
-    </div>
-    <!-- toast information -->
-    <div
-      class="toast fade show"
-      role="alert"
-      aria-live="assertive"
-      aria-atomic="true"
-    >
-      <div class="toast-header bg-info text-white">
-        <span class="iconify mr-2 icon-xl" data-icon="ri:information-fill"></span>
-        <strong class="mr-auto">Information</strong>
-        <small class="text-muted text-white">2 seconds ago</small>
-        <button
-          type="button"
-          class="ml-2 mb-1 close"
-          data-dismiss="toast"
-          aria-label="Close"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
+      <!-- toast information -->
+      <div
+        class="toast fade show"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        <div class="toast-header bg-info text-white">
+          <span
+            class="iconify mr-2 icon-xl"
+            data-icon="ri:information-fill"
+          ></span>
+          <strong class="mr-auto">Information</strong>
+          <small class="text-muted text-white">2 seconds ago</small>
+          <button
+            type="button"
+            class="ml-2 mb-1 close"
+            data-dismiss="toast"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="toast-body bg-info-transparent">
+          This is a information toast.
+        </div>
       </div>
-      <div class="toast-body bg-info-transparent ">This is a information toast.</div>
     </div>
-  </div>
 
-<!-- toast end -->
-<!--end::Toast-->
+    <!-- toast end -->
+    <!--end::Toast-->
     <!--begin::Menu Navigator-->
     <div
       class="aside aside-left aside-fixed d-flex flex-column flex-row-auto"
@@ -200,7 +213,11 @@ License: You must have a valid license purchased only from themeforest(the above
       <div class="brand flex-column-auto" id="kt_brand">
         <!--begin::Logo-->
         <a href="t0001.html" class="brand-logo">
-          <img alt="Logo" class="img-fluid" src="../../asset-corporate-portal/media/logo/logo.png" />
+          <img
+            alt="Logo"
+            class="img-fluid"
+            src="asset-corporate-portal/media/logo/logo.png"
+          />
         </a>
         <!--end::Logo-->
 
@@ -231,19 +248,19 @@ License: You must have a valid license purchased only from themeforest(the above
                   transform="translate(15.999997, 11.999999) scale(-1, 1) rotate(-270.000000) translate(-15.999997, -11.999999) "
                 />
               </g></svg
-            ><!--end::Svg Icon--></span
-          >
+            ><!--end:: Svg Icon-->
+          </span>
         </button>
-        <!--end::Toolbar-->
+        <!--end:: Toolbar-->
       </div>
-      <!--end::Brand-->
+      <!--end:: Brand-->
 
-      <!--begin::Aside Menu-->
+      <!--begin:: Aside Menu-->
       <div
         class="aside-menu-wrapper flex-column-fluid"
         id="kt_aside_menu_wrapper"
       >
-        <!--begin::Menu Container-->
+        <!--begin:: Menu Container-->
         <div
           id="kt_aside_menu"
           class="aside-menu my-4"
@@ -251,12 +268,13 @@ License: You must have a valid license purchased only from themeforest(the above
           data-menu-scroll="1"
           data-menu-dropdown-timeout="500"
         >
-          <!--begin::Menu Nav-->
+          <!--begin:: Menu Nav-->
           <ul class="menu-nav">
             <li class="menu-item menu-item-active" aria-haspopup="true">
               <a href="index.html" class="menu-link"
-                ><span class="svg-icon menu-icon"
-                  ><!--begin::Svg Icon | path:../assets/media/svg/icons/Design/Layers.svg--><svg
+                ><span class="svg-icon menu-icon">
+                  <!--begin:: Svg Icon | path:../assets/media/svg/icons/Design/Layers.svg -->
+                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"
                     width="24px"
@@ -282,7 +300,7 @@ License: You must have a valid license purchased only from themeforest(the above
                         opacity="0.3"
                       />
                     </g></svg
-                  ><!--end::Svg Icon--></span
+                  ><!--end:: Svg Icon--></span
                 ><span class="menu-text">Dashboard</span></a
               >
             </li>
@@ -296,8 +314,9 @@ License: You must have a valid license purchased only from themeforest(the above
               data-menu-toggle="hover"
             >
               <a href="javascript:;" class="menu-link menu-toggle"
-                ><span class="svg-icon menu-icon"
-                  ><!--begin::Svg Icon | path:../assets/media/svg/icons/Layout/Layout-4-blocks.svg--><svg
+                ><span class="svg-icon menu-icon">
+                  <!--begin:: Svg Icon | path:../assets/media/svg/icons/Layout/Layout-4-blocks.svg -->
+                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"
                     width="24px"
@@ -326,7 +345,7 @@ License: You must have a valid license purchased only from themeforest(the above
                         opacity="0.3"
                       />
                     </g></svg
-                  ><!--end::Svg Icon--></span
+                  ><!--end:: Svg Icon--></span
                 ><span class="menu-text">Front Office</span
                 ><i class="menu-arrow"></i
               ></a>
@@ -358,8 +377,9 @@ License: You must have a valid license purchased only from themeforest(the above
               data-menu-toggle="hover"
             >
               <a href="javascript:;" class="menu-link menu-toggle"
-                ><span class="svg-icon menu-icon"
-                  ><!--begin::Svg Icon | path:../assets/media/svg/icons/Code/Compiling.svg--><svg
+                ><span class="svg-icon menu-icon">
+                  <!--begin:: Svg Icon | path:../assets/media/svg/icons/Code/Compiling.svg -->
+                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"
                     width="24px"
@@ -384,7 +404,7 @@ License: You must have a valid license purchased only from themeforest(the above
                         fill="#000000"
                       />
                     </g></svg
-                  ><!--end::Svg Icon--></span
+                  ><!--end:: Svg Icon--></span
                 ><span class="menu-text">Station</span><i class="menu-arrow"></i
               ></a>
               <div class="menu-submenu">
@@ -411,8 +431,9 @@ License: You must have a valid license purchased only from themeforest(the above
               data-menu-toggle="hover"
             >
               <a href="javascript:;" class="menu-link menu-toggle"
-                ><span class="svg-icon menu-icon"
-                  ><!--begin::Svg Icon | path:../assets/media/svg/icons/General/Attachment2.svg--><svg
+                ><span class="svg-icon menu-icon">
+                  <!--begin:: Svg Icon | path:../assets/media/svg/icons/General/Attachment2.svg -->
+                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"
                     width="24px"
@@ -451,7 +472,7 @@ License: You must have a valid license purchased only from themeforest(the above
                         transform="translate(18.035534, 17.863961) scale(1, -1) rotate(45.000000) translate(-18.035534, -17.863961) "
                       />
                     </g></svg
-                  ><!--end::Svg Icon--></span
+                  ><!--end:: Svg Icon--></span
                 ><span class="menu-text">Management MCU</span
                 ><i class="menu-arrow"></i
               ></a>
@@ -480,8 +501,9 @@ License: You must have a valid license purchased only from themeforest(the above
               data-menu-toggle="hover"
             >
               <a href="javascript:;" class="menu-link menu-toggle"
-                ><span class="svg-icon menu-icon"
-                  ><!--begin::Svg Icon | path:../assets/media/svg/icons/Design/Select.svg--><svg
+                ><span class="svg-icon menu-icon">
+                  <!--begin:: Svg Icon | path:../assets/media/svg/icons/Design/Select.svg -->
+                  <svg
                     xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"
                     width="24px"
@@ -506,7 +528,7 @@ License: You must have a valid license purchased only from themeforest(the above
                         fill="#000000"
                       />
                     </g></svg
-                  ><!--end::Svg Icon--></span
+                  ><!--end:: Svg Icon--></span
                 ><span class="menu-text">Master Data</span
                 ><i class="menu-arrow"></i
               ></a>
@@ -612,42 +634,41 @@ License: You must have a valid license purchased only from themeforest(the above
               </div>
             </li>
           </ul>
-          <!--end::Menu Nav-->
+          <!--end:: Menu Nav-->
         </div>
-        <!--end::Menu Container-->
+        <!--end:: Menu Container-->
       </div>
-      <!--end::Aside Menu-->
+      <!--end:: Aside Menu-->
     </div>
-    <!--end::Menu Navigator-->
+    <!--end:: Menu Navigator-->
 
-    <!--begin::Wrapper-->
+    <!--begin:: Wrapper-->
     <div class="d-flex flex-column flex-row-fluid wrapper" id="kt_wrapper">
-      <!--begin::Header-->
+      <!--begin:: Header-->
       <div id="kt_header" class="header header-fixed">
-        <!--begin::Container-->
+        <!--begin:: Container-->
         <div
           class="container-fluid d-flex align-items-stretch justify-content-between"
         >
-          <!--begin::Header Menu Wrapper-->
+          <!--begin:: Header Menu Wrapper-->
           <div
             class="header-menu-wrapper header-menu-wrapper-left"
             id="kt_header_menu_wrapper"
           >
-            <!--begin::Header Menu-->
+            <!--begin:: Header Menu-->
             <div
               id="kt_header_menu"
               class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap p-3 justify-content-around"
-            >
-            </div>
-            <!--end::Header Menu-->
+            ></div>
+            <!--end:: Header Menu-->
           </div>
-          <!--end::Header Menu Wrapper-->
+          <!--end:: Header Menu Wrapper-->
 
-          <!--begin::Topbar-->
+          <!--begin:: Topbar-->
           <div class="topbar">
-            <!--begin::Search-->
+            <!--begin:: Search-->
 
-            <!--begin::User-->
+            <!--begin:: User-->
             <div class="topbar-item">
               <div
                 class="btn btn-icon btn-icon-mobile w-auto btn-clean d-flex align-items-center btn-lg px-2"
@@ -670,32 +691,32 @@ License: You must have a valid license purchased only from themeforest(the above
                 </span>
               </div>
             </div>
-            <!--end::User-->
+            <!--end:: User-->
           </div>
-          <!--end::Topbar-->
+          <!--end:: Topbar-->
         </div>
-        <!--end::Container-->
+        <!--end:: Container-->
       </div>
-      <!--end::Header-->
+      <!--end:: Header-->
 
-      <!--begin::Content-->
+      <!--begin:: Content-->
       <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
-        <!--begin::Subheader-->
+        <!--begin:: Subheader-->
         <div class="subheader py-2 py-lg-6 subheader-solid" id="kt_subheader">
           <div
             class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap"
           >
-            <!--begin::Info-->
+            <!--begin:: Info-->
             <div class="d-row align-items-center flex-wrap mr-1">
-              <!--begin::Page Heading-->
+              <!--begin:: Page Heading-->
               <div class="d-row align-items-baseline flex-wrap mr-5">
-                <!--begin::Page Title-->
+                <!--begin:: Page Title-->
                 <h2 class="text-dark font-weight-bold my-1 mr-5">
                   Master User Group
                 </h2>
-                <!--end::Page Title-->
+                <!--end:: Page Title-->
 
-                <!--begin::Breadcrumb-->
+                <!--begin:: Breadcrumb-->
                 <nav aria-label="breadcrumb">
                   <ul
                     class="breadcrumb breadcrumb-transparent breadcrumb-dot font-weight-bold p-0 my-2 font-size-sm"
@@ -711,12 +732,12 @@ License: You must have a valid license purchased only from themeforest(the above
                     </li>
                   </ul>
                 </nav>
-                <!--end::Breadcrumb-->
+                <!--end:: Breadcrumb-->
               </div>
-              <!--end::Page Heading-->
+              <!--end:: Page Heading-->
             </div>
-            <!--end::Info-->
-            <!--begin::Button Add New-->
+            <!--end:: Info-->
+            <!--begin:: Button Add New-->
             <div class="d-flex justify-content-end">
               <button
                 type="button"
@@ -727,34 +748,34 @@ License: You must have a valid license purchased only from themeforest(the above
                 Add New
               </button>
             </div>
-            <!--end::Button Add New-->
+            <!--end:: Button Add New-->
           </div>
         </div>
-        <!--end::Subheader-->
-        
-        <!--begin::Search-->
-        <div class="d-flex flex-column-fluid">
-          <!--begin::Container-->
-          <div class="container">
-            <!--begin::Search Bar-->
-            <div class="search search-white">
-                <input
-                  type="email"
-                  class="form-control form-control-solid"
-                  placeholder="Cari PID /Nama"
-                />
-            </div>
-            <!--end::Search Bar-->
-          </div>
-          <!--end::Container-->
-        </div>
-        <!--end::Search-->
+        <!--end:: Subheader-->
 
-        <!--begin::Table-->
+        <!--begin:: Search-->
         <div class="d-flex flex-column-fluid">
-          <!--begin::Container-->
+          <!--begin:: Container-->
           <div class="container">
-            <!--begin::Card-->
+            <!--begin:: Search Bar-->
+            <div class="search search-white">
+              <input
+                type="email"
+                class="form-control form-control-solid"
+                placeholder="Cari PID /Nama"
+              />
+            </div>
+            <!--end:: Search Bar-->
+          </div>
+          <!--end:: Container-->
+        </div>
+        <!--end:: Search-->
+
+        <!--begin:: Table-->
+        <div class="d-flex flex-column-fluid">
+          <!--begin:: Container-->
+          <div class="container">
+            <!--begin:: Card-->
             <div class="card card-custom">
               <div class="card-body">
                 <!--begin: Datatable-->
@@ -767,82 +788,1198 @@ License: You must have a valid license purchased only from themeforest(the above
                     </tr>
                   </thead>
                   <tbody>
-                      <tr>
-                        <td>001</td>
-                        <td>Admin</td>
-                        <td>
-                          <div class="row px-5 d-flex justify-content-around"><a id="btneditug" type="button" class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2" data-toggle="modal" data-target="#dialogEdit1">Edit
-                          </a> <a type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2" data-toggle="modal" data-target="#dialogDelete1">Hapus</a><div class="modal fade" style="display: none" id="dialogEdit1" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Edit - User Group</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><div id="modalbdyEdit"><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Kode user group</label> <input id="usergroupcode" name="usergroupcode" type="text" placeholder="Kode user Group" value="A" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Nama User Group</label> <input id="usergroupname" name="usergroupname" type="text" placeholder="Nama User Group" value="UG1" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div></div><div></div></div><div class="modal-footer border-top-0"><div><button id="btledit" type="button" hx-swap="delete" hx-target="#modalbdyEdit" onclick="htmx.trigger('.btneditusgp', 'htmx:abort')" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Save changes
-                          </button></div></div></div></div></div><div class="modal fade" id="dialogDelete1" tabindex="-1" aria-labelledby="exampleModalLabel" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Konfirmasi</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><p>Apakah anda yakin menghapus user group berikut ?</p><div class="card rounded-lg"><div class="card-body d-flex flex-row"><div class="d-flex flex-column "><div class="mb-3 text-disabled font-weight-bold mr-5">Kode</div><div class="mb-3 text-disabled font-weight-bold mr-5">User Group</div></div><div class="d-flex flex-column "><div class="mb-3 font-weight-bold">A</div><div class="mb-3 font-weight-bold">UG1</div></div></div></div></div><div class="modal-footer border-top-0"><div><button type="button" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Yakin
-                          </button></div></div></div></div></div></div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>002</td>
-                        <td>User</td>
-                        <td>
-                          <div class="row px-5 d-flex justify-content-around"><a id="btneditug" type="button" class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2" data-toggle="modal" data-target="#dialogEdit1">Edit
-                          </a> <a type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2" data-toggle="modal" data-target="#dialogDelete1">Hapus</a><div class="modal fade" style="display: none" id="dialogEdit1" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Edit - User Group</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><div id="modalbdyEdit"><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Kode user group</label> <input id="usergroupcode" name="usergroupcode" type="text" placeholder="Kode user Group" value="A" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Nama User Group</label> <input id="usergroupname" name="usergroupname" type="text" placeholder="Nama User Group" value="UG1" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div></div><div></div></div><div class="modal-footer border-top-0"><div><button id="btledit" type="button" hx-swap="delete" hx-target="#modalbdyEdit" onclick="htmx.trigger('.btneditusgp', 'htmx:abort')" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Save changes
-                          </button></div></div></div></div></div><div class="modal fade" id="dialogDelete1" tabindex="-1" aria-labelledby="exampleModalLabel" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Konfirmasi</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><p>Apakah anda yakin menghapus user group berikut ?</p><div class="card rounded-lg"><div class="card-body d-flex flex-row"><div class="d-flex flex-column "><div class="mb-3 text-disabled font-weight-bold mr-5">Kode</div><div class="mb-3 text-disabled font-weight-bold mr-5">User Group</div></div><div class="d-flex flex-column "><div class="mb-3 font-weight-bold">A</div><div class="mb-3 font-weight-bold">UG1</div></div></div></div></div><div class="modal-footer border-top-0"><div><button type="button" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Yakin
-                          </button></div></div></div></div></div></div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>003</td>
-                        <td>User</td>
-                        <td>
-                          <div class="row px-5 d-flex justify-content-around"><a id="btneditug" type="button" class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2" data-toggle="modal" data-target="#dialogEdit1">Edit
-                          </a> <a type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2" data-toggle="modal" data-target="#dialogDelete1">Hapus</a><div class="modal fade" style="display: none" id="dialogEdit1" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Edit - User Group</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><div id="modalbdyEdit"><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Kode user group</label> <input id="usergroupcode" name="usergroupcode" type="text" placeholder="Kode user Group" value="A" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Nama User Group</label> <input id="usergroupname" name="usergroupname" type="text" placeholder="Nama User Group" value="UG1" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div></div><div></div></div><div class="modal-footer border-top-0"><div><button id="btledit" type="button" hx-swap="delete" hx-target="#modalbdyEdit" onclick="htmx.trigger('.btneditusgp', 'htmx:abort')" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Save changes
-                          </button></div></div></div></div></div><div class="modal fade" id="dialogDelete1" tabindex="-1" aria-labelledby="exampleModalLabel" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Konfirmasi</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><p>Apakah anda yakin menghapus user group berikut ?</p><div class="card rounded-lg"><div class="card-body d-flex flex-row"><div class="d-flex flex-column "><div class="mb-3 text-disabled font-weight-bold mr-5">Kode</div><div class="mb-3 text-disabled font-weight-bold mr-5">User Group</div></div><div class="d-flex flex-column "><div class="mb-3 font-weight-bold">A</div><div class="mb-3 font-weight-bold">UG1</div></div></div></div></div><div class="modal-footer border-top-0"><div><button type="button" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Yakin
-                          </button></div></div></div></div></div></div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>004</td>
-                        <td>User</td>
-                        <td>
-                          <div class="row px-5 d-flex justify-content-around"><a id="btneditug" type="button" class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2" data-toggle="modal" data-target="#dialogEdit1">Edit
-                          </a> <a type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2" data-toggle="modal" data-target="#dialogDelete1">Hapus</a><div class="modal fade" style="display: none" id="dialogEdit1" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Edit - User Group</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><div id="modalbdyEdit"><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Kode user group</label> <input id="usergroupcode" name="usergroupcode" type="text" placeholder="Kode user Group" value="A" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Nama User Group</label> <input id="usergroupname" name="usergroupname" type="text" placeholder="Nama User Group" value="UG1" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div></div><div></div></div><div class="modal-footer border-top-0"><div><button id="btledit" type="button" hx-swap="delete" hx-target="#modalbdyEdit" onclick="htmx.trigger('.btneditusgp', 'htmx:abort')" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Save changes
-                          </button></div></div></div></div></div><div class="modal fade" id="dialogDelete1" tabindex="-1" aria-labelledby="exampleModalLabel" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Konfirmasi</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><p>Apakah anda yakin menghapus user group berikut ?</p><div class="card rounded-lg"><div class="card-body d-flex flex-row"><div class="d-flex flex-column "><div class="mb-3 text-disabled font-weight-bold mr-5">Kode</div><div class="mb-3 text-disabled font-weight-bold mr-5">User Group</div></div><div class="d-flex flex-column "><div class="mb-3 font-weight-bold">A</div><div class="mb-3 font-weight-bold">UG1</div></div></div></div></div><div class="modal-footer border-top-0"><div><button type="button" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Yakin
-                          </button></div></div></div></div></div></div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>005</td>
-                        <td>User</td>
-                        <td>
-                          <div class="row px-5 d-flex justify-content-around"><a id="btneditug" type="button" class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2" data-toggle="modal" data-target="#dialogEdit1">Edit
-                          </a> <a type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2" data-toggle="modal" data-target="#dialogDelete1">Hapus</a><div class="modal fade" style="display: none" id="dialogEdit1" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Edit - User Group</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><div id="modalbdyEdit"><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Kode user group</label> <input id="usergroupcode" name="usergroupcode" type="text" placeholder="Kode user Group" value="A" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Nama User Group</label> <input id="usergroupname" name="usergroupname" type="text" placeholder="Nama User Group" value="UG1" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div></div><div></div></div><div class="modal-footer border-top-0"><div><button id="btledit" type="button" hx-swap="delete" hx-target="#modalbdyEdit" onclick="htmx.trigger('.btneditusgp', 'htmx:abort')" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Save changes
-                          </button></div></div></div></div></div><div class="modal fade" id="dialogDelete1" tabindex="-1" aria-labelledby="exampleModalLabel" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Konfirmasi</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><p>Apakah anda yakin menghapus user group berikut ?</p><div class="card rounded-lg"><div class="card-body d-flex flex-row"><div class="d-flex flex-column "><div class="mb-3 text-disabled font-weight-bold mr-5">Kode</div><div class="mb-3 text-disabled font-weight-bold mr-5">User Group</div></div><div class="d-flex flex-column "><div class="mb-3 font-weight-bold">A</div><div class="mb-3 font-weight-bold">UG1</div></div></div></div></div><div class="modal-footer border-top-0"><div><button type="button" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Yakin
-                          </button></div></div></div></div></div></div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td>006</td>
-                        <td>User</td>
-                        <td>
-                          <div class="row px-5 d-flex justify-content-around"><a id="btneditug" type="button" class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2" data-toggle="modal" data-target="#dialogEdit1">Edit
-                          </a> <a type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2" data-toggle="modal" data-target="#dialogDelete1">Hapus</a><div class="modal fade" style="display: none" id="dialogEdit1" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Edit - User Group</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><div id="modalbdyEdit"><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Kode user group</label> <input id="usergroupcode" name="usergroupcode" type="text" placeholder="Kode user Group" value="A" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div><div class="form-group"><label class="text-black" style="font-family: Poppins; font-weight: 600;">Nama User Group</label> <input id="usergroupname" name="usergroupname" type="text" placeholder="Nama User Group" value="UG1" class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"></div></div><div></div></div><div class="modal-footer border-top-0"><div><button id="btledit" type="button" hx-swap="delete" hx-target="#modalbdyEdit" onclick="htmx.trigger('.btneditusgp', 'htmx:abort')" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Save changes
-                          </button></div></div></div></div></div><div class="modal fade" id="dialogDelete1" tabindex="-1" aria-labelledby="exampleModalLabel" data-backdrop="static" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content rounded-lg"><div class="modal-header border-bottom-0"><h6 class="modal-title text-black font-weight-bolder">Konfirmasi</h6><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body border-bottom-0"><p>Apakah anda yakin menghapus user group berikut ?</p><div class="card rounded-lg"><div class="card-body d-flex flex-row"><div class="d-flex flex-column "><div class="mb-3 text-disabled font-weight-bold mr-5">Kode</div><div class="mb-3 text-disabled font-weight-bold mr-5">User Group</div></div><div class="d-flex flex-column "><div class="mb-3 font-weight-bold">A</div><div class="mb-3 font-weight-bold">UG1</div></div></div></div></div><div class="modal-footer border-top-0"><div><button type="button" class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4" data-dismiss="modal">Batal
-                          </button> <button type="button" class="btn btn-primary btn-shadow font-weight-bold rounded-lg">Yakin
-                          </button></div></div></div></div></div></div>
-                        </td>
-                      </tr>
+                    <tr>
+                      <td>001</td>
+                      <td>Admin</td>
+                      <td>
+                        <div class="row px-5 d-flex justify-content-around">
+                          <a
+                            id="btneditug"
+                            type="button"
+                            class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogEdit1"
+                            >Edit
+                          </a>
+                          <a
+                            type="button"
+                            class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogDelete1"
+                            >Hapus</a
+                          >
+                          <div
+                            class="modal fade"
+                            style="display: none;"
+                            id="dialogEdit1"
+                            tabindex="-1"
+                            role="dialog"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div
+                              class="modal-dialog modal-dialog-centered"
+                              role="document"
+                            >
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Edit - User Group
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <div id="modalbdyEdit">
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Kode user group</label
+                                      >
+                                      <input
+                                        id="usergroupcode"
+                                        name="usergroupcode"
+                                        type="text"
+                                        placeholder="Kode user Group"
+                                        value="A"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Nama User Group</label
+                                      >
+                                      <input
+                                        id="usergroupname"
+                                        name="usergroupname"
+                                        type="text"
+                                        placeholder="Nama User Group"
+                                        value="UG1"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div></div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      id="btledit"
+                                      type="button"
+                                      hx-swap="delete"
+                                      hx-target="#modalbdyEdit"
+                                      onclick="htmx.trigger('.btneditusgp', 'htmx:abort')"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Save changes
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="modal fade"
+                            id="dialogDelete1"
+                            tabindex="-1"
+                            aria-labelledby="exampleModalLabel"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div class="modal-dialog modal-dialog-centered">
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Konfirmasi
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <p>
+                                    Apakah anda yakin menghapus user group
+                                    berikut ?
+                                  </p>
+                                  <div class="card rounded-lg">
+                                    <div class="card-body d-flex flex-row">
+                                      <div class="d-flex flex-column">
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          Kode
+                                        </div>
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          User Group
+                                        </div>
+                                      </div>
+                                      <div class="d-flex flex-column">
+                                        <div class="mb-3 font-weight-bold">
+                                          A
+                                        </div>
+                                        <div class="mb-3 font-weight-bold">
+                                          UG1
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      type="button"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Yakin
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>002</td>
+                      <td>User</td>
+                      <td>
+                        <div class="row px-5 d-flex justify-content-around">
+                          <a
+                            id="btneditug"
+                            type="button"
+                            class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogEdit1"
+                            >Edit
+                          </a>
+                          <a
+                            type="button"
+                            class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogDelete1"
+                            >Hapus</a
+                          >
+                          <div
+                            class="modal fade"
+                            style="display: none;"
+                            id="dialogEdit1"
+                            tabindex="-1"
+                            role="dialog"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div
+                              class="modal-dialog modal-dialog-centered"
+                              role="document"
+                            >
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Edit - User Group
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <div id="modalbdyEdit">
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Kode user group</label
+                                      >
+                                      <input
+                                        id="usergroupcode"
+                                        name="usergroupcode"
+                                        type="text"
+                                        placeholder="Kode user Group"
+                                        value="A"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Nama User Group</label
+                                      >
+                                      <input
+                                        id="usergroupname"
+                                        name="usergroupname"
+                                        type="text"
+                                        placeholder="Nama User Group"
+                                        value="UG1"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div></div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      id="btledit"
+                                      type="button"
+                                      hx-swap="delete"
+                                      hx-target="#modalbdyEdit"
+                                      onclick="htmx.trigger('.btneditusgp', 'htmx:abort')"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Save changes
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="modal fade"
+                            id="dialogDelete1"
+                            tabindex="-1"
+                            aria-labelledby="exampleModalLabel"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div class="modal-dialog modal-dialog-centered">
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Konfirmasi
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <p>
+                                    Apakah anda yakin menghapus user group
+                                    berikut ?
+                                  </p>
+                                  <div class="card rounded-lg">
+                                    <div class="card-body d-flex flex-row">
+                                      <div class="d-flex flex-column">
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          Kode
+                                        </div>
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          User Group
+                                        </div>
+                                      </div>
+                                      <div class="d-flex flex-column">
+                                        <div class="mb-3 font-weight-bold">
+                                          A
+                                        </div>
+                                        <div class="mb-3 font-weight-bold">
+                                          UG1
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      type="button"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Yakin
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>003</td>
+                      <td>User</td>
+                      <td>
+                        <div class="row px-5 d-flex justify-content-around">
+                          <a
+                            id="btneditug"
+                            type="button"
+                            class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogEdit1"
+                            >Edit
+                          </a>
+                          <a
+                            type="button"
+                            class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogDelete1"
+                            >Hapus</a
+                          >
+                          <div
+                            class="modal fade"
+                            style="display: none;"
+                            id="dialogEdit1"
+                            tabindex="-1"
+                            role="dialog"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div
+                              class="modal-dialog modal-dialog-centered"
+                              role="document"
+                            >
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Edit - User Group
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <div id="modalbdyEdit">
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Kode user group</label
+                                      >
+                                      <input
+                                        id="usergroupcode"
+                                        name="usergroupcode"
+                                        type="text"
+                                        placeholder="Kode user Group"
+                                        value="A"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Nama User Group</label
+                                      >
+                                      <input
+                                        id="usergroupname"
+                                        name="usergroupname"
+                                        type="text"
+                                        placeholder="Nama User Group"
+                                        value="UG1"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div></div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      id="btledit"
+                                      type="button"
+                                      hx-swap="delete"
+                                      hx-target="#modalbdyEdit"
+                                      onclick="htmx.trigger('.btneditusgp', 'htmx:abort')"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Save changes
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="modal fade"
+                            id="dialogDelete1"
+                            tabindex="-1"
+                            aria-labelledby="exampleModalLabel"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div class="modal-dialog modal-dialog-centered">
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Konfirmasi
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <p>
+                                    Apakah anda yakin menghapus user group
+                                    berikut ?
+                                  </p>
+                                  <div class="card rounded-lg">
+                                    <div class="card-body d-flex flex-row">
+                                      <div class="d-flex flex-column">
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          Kode
+                                        </div>
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          User Group
+                                        </div>
+                                      </div>
+                                      <div class="d-flex flex-column">
+                                        <div class="mb-3 font-weight-bold">
+                                          A
+                                        </div>
+                                        <div class="mb-3 font-weight-bold">
+                                          UG1
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      type="button"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Yakin
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>004</td>
+                      <td>User</td>
+                      <td>
+                        <div class="row px-5 d-flex justify-content-around">
+                          <a
+                            id="btneditug"
+                            type="button"
+                            class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogEdit1"
+                            >Edit
+                          </a>
+                          <a
+                            type="button"
+                            class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogDelete1"
+                            >Hapus</a
+                          >
+                          <div
+                            class="modal fade"
+                            style="display: none;"
+                            id="dialogEdit1"
+                            tabindex="-1"
+                            role="dialog"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div
+                              class="modal-dialog modal-dialog-centered"
+                              role="document"
+                            >
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Edit - User Group
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <div id="modalbdyEdit">
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Kode user group</label
+                                      >
+                                      <input
+                                        id="usergroupcode"
+                                        name="usergroupcode"
+                                        type="text"
+                                        placeholder="Kode user Group"
+                                        value="A"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Nama User Group</label
+                                      >
+                                      <input
+                                        id="usergroupname"
+                                        name="usergroupname"
+                                        type="text"
+                                        placeholder="Nama User Group"
+                                        value="UG1"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div></div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      id="btledit"
+                                      type="button"
+                                      hx-swap="delete"
+                                      hx-target="#modalbdyEdit"
+                                      onclick="htmx.trigger('.btneditusgp', 'htmx:abort')"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Save changes
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="modal fade"
+                            id="dialogDelete1"
+                            tabindex="-1"
+                            aria-labelledby="exampleModalLabel"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div class="modal-dialog modal-dialog-centered">
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Konfirmasi
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <p>
+                                    Apakah anda yakin menghapus user group
+                                    berikut ?
+                                  </p>
+                                  <div class="card rounded-lg">
+                                    <div class="card-body d-flex flex-row">
+                                      <div class="d-flex flex-column">
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          Kode
+                                        </div>
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          User Group
+                                        </div>
+                                      </div>
+                                      <div class="d-flex flex-column">
+                                        <div class="mb-3 font-weight-bold">
+                                          A
+                                        </div>
+                                        <div class="mb-3 font-weight-bold">
+                                          UG1
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      type="button"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Yakin
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>005</td>
+                      <td>User</td>
+                      <td>
+                        <div class="row px-5 d-flex justify-content-around">
+                          <a
+                            id="btneditug"
+                            type="button"
+                            class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogEdit1"
+                            >Edit
+                          </a>
+                          <a
+                            type="button"
+                            class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogDelete1"
+                            >Hapus</a
+                          >
+                          <div
+                            class="modal fade"
+                            style="display: none;"
+                            id="dialogEdit1"
+                            tabindex="-1"
+                            role="dialog"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div
+                              class="modal-dialog modal-dialog-centered"
+                              role="document"
+                            >
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Edit - User Group
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <div id="modalbdyEdit">
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Kode user group</label
+                                      >
+                                      <input
+                                        id="usergroupcode"
+                                        name="usergroupcode"
+                                        type="text"
+                                        placeholder="Kode user Group"
+                                        value="A"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Nama User Group</label
+                                      >
+                                      <input
+                                        id="usergroupname"
+                                        name="usergroupname"
+                                        type="text"
+                                        placeholder="Nama User Group"
+                                        value="UG1"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div></div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      id="btledit"
+                                      type="button"
+                                      hx-swap="delete"
+                                      hx-target="#modalbdyEdit"
+                                      onclick="htmx.trigger('.btneditusgp', 'htmx:abort')"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Save changes
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="modal fade"
+                            id="dialogDelete1"
+                            tabindex="-1"
+                            aria-labelledby="exampleModalLabel"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div class="modal-dialog modal-dialog-centered">
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Konfirmasi
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <p>
+                                    Apakah anda yakin menghapus user group
+                                    berikut ?
+                                  </p>
+                                  <div class="card rounded-lg">
+                                    <div class="card-body d-flex flex-row">
+                                      <div class="d-flex flex-column">
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          Kode
+                                        </div>
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          User Group
+                                        </div>
+                                      </div>
+                                      <div class="d-flex flex-column">
+                                        <div class="mb-3 font-weight-bold">
+                                          A
+                                        </div>
+                                        <div class="mb-3 font-weight-bold">
+                                          UG1
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      type="button"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Yakin
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>006</td>
+                      <td>User</td>
+                      <td>
+                        <div class="row px-5 d-flex justify-content-around">
+                          <a
+                            id="btneditug"
+                            type="button"
+                            class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogEdit1"
+                            >Edit
+                          </a>
+                          <a
+                            type="button"
+                            class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+                            data-toggle="modal"
+                            data-target="#dialogDelete1"
+                            >Hapus</a
+                          >
+                          <div
+                            class="modal fade"
+                            style="display: none;"
+                            id="dialogEdit1"
+                            tabindex="-1"
+                            role="dialog"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div
+                              class="modal-dialog modal-dialog-centered"
+                              role="document"
+                            >
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Edit - User Group
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <div id="modalbdyEdit">
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Kode user group</label
+                                      >
+                                      <input
+                                        id="usergroupcode"
+                                        name="usergroupcode"
+                                        type="text"
+                                        placeholder="Kode user Group"
+                                        value="A"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                    <div class="form-group">
+                                      <label
+                                        class="text-black"
+                                        style="
+                                          font-family: Poppins;
+                                          font-weight: 600;
+                                        "
+                                        >Nama User Group</label
+                                      >
+                                      <input
+                                        id="usergroupname"
+                                        name="usergroupname"
+                                        type="text"
+                                        placeholder="Nama User Group"
+                                        value="UG1"
+                                        class="form-control bg-field border-0 h-auto py-6 px-6 rounded-lg"
+                                      />
+                                    </div>
+                                  </div>
+                                  <div></div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      id="btledit"
+                                      type="button"
+                                      hx-swap="delete"
+                                      hx-target="#modalbdyEdit"
+                                      onclick="htmx.trigger('.btneditusgp', 'htmx:abort')"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Save changes
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="modal fade"
+                            id="dialogDelete1"
+                            tabindex="-1"
+                            aria-labelledby="exampleModalLabel"
+                            data-backdrop="static"
+                            aria-hidden="true"
+                          >
+                            <div class="modal-dialog modal-dialog-centered">
+                              <div class="modal-content rounded-lg">
+                                <div class="modal-header border-bottom-0">
+                                  <h6
+                                    class="modal-title text-black font-weight-bolder"
+                                  >
+                                    Konfirmasi
+                                  </h6>
+                                  <button
+                                    type="button"
+                                    class="close"
+                                    data-dismiss="modal"
+                                    aria-label="Close"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="ki ki-close"
+                                    ></i>
+                                  </button>
+                                </div>
+                                <div class="modal-body border-bottom-0">
+                                  <p>
+                                    Apakah anda yakin menghapus user group
+                                    berikut ?
+                                  </p>
+                                  <div class="card rounded-lg">
+                                    <div class="card-body d-flex flex-row">
+                                      <div class="d-flex flex-column">
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          Kode
+                                        </div>
+                                        <div
+                                          class="mb-3 text-disabled font-weight-bold mr-5"
+                                        >
+                                          User Group
+                                        </div>
+                                      </div>
+                                      <div class="d-flex flex-column">
+                                        <div class="mb-3 font-weight-bold">
+                                          A
+                                        </div>
+                                        <div class="mb-3 font-weight-bold">
+                                          UG1
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div class="modal-footer border-top-0">
+                                  <div>
+                                    <button
+                                      type="button"
+                                      class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+                                      data-dismiss="modal"
+                                    >
+                                      Batal
+                                    </button>
+                                    <button
+                                      type="button"
+                                      class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+                                    >
+                                      Yakin
+                                    </button>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
                   </tbody>
                 </table>
                 <!--end: Datatable-->
-                <!--begin::Pagination-->
+                <!--begin:: Pagination-->
                 <div
                   class="d-flex justify-content-between align-items-center flex-wrap"
                 >
@@ -904,7 +2041,7 @@ License: You must have a valid license purchased only from themeforest(the above
 
                     <select
                       class="form-control form-control-sm font-weight-bold mr-4 border-0 bg-light"
-                      style="width: 75px"
+                      style="width: 75px;"
                     >
                       <option value="10">10</option>
                       <option value="20">20</option>
@@ -918,22 +2055,22 @@ License: You must have a valid license purchased only from themeforest(the above
                 <!--end:: Pagination-->
               </div>
             </div>
-            <!--end::Card-->
+            <!--end:: Card-->
           </div>
-          <!--end::Container-->
+          <!--end:: Container-->
         </div>
-        <!--end::Table-->
+        <!--end:: Table-->
       </div>
-      <!--end::Content-->
+      <!--end:: Content-->
 
-      <!--begin::Footer-->
+      <!--begin:: Footer-->
       <div class="footer bg-white py-4 d-flex flex-lg-column" id="kt_footer">
-        <!--begin::Container-->
+        <!--begin:: Container-->
         <div
           class="container-fluid d-flex flex-column flex-md-row align-items-center justify-content-between"
         >
-          <!--begin::Copyright-->
-          <div class=" order-2 order-md-1">
+          <!--begin:: Copyright-->
+          <div class="order-2 order-md-1">
             <span class="text-muted font-weight-bold mr-2">2020©;</span>
             <a
               href="http://keenthemes.com/metronic"
@@ -942,10 +2079,10 @@ License: You must have a valid license purchased only from themeforest(the above
               >Keenthemes</a
             >
           </div>
-          <!--end::Copyright-->
+          <!--end:: Copyright-->
 
-          <!--begin::Nav-->
-          <div class="nav nav-dark ">
+          <!--begin:: Nav-->
+          <div class="nav nav-dark">
             <a
               href="http://keenthemes.com/metronic"
               target="_blank"
@@ -965,22 +2102,19 @@ License: You must have a valid license purchased only from themeforest(the above
               >Contact</a
             >
           </div>
-          <!--end::Nav-->
+          <!--end:: Nav-->
         </div>
-        <!--end::Container-->
+        <!--end:: Container-->
       </div>
-      <!--end::Footer-->
+      <!--end:: Footer-->
     </div>
-    
-</div>
-<!--end::Wrapper-->
-
+    <!--end:: Wrapper-->
 
     <script>
       var HOST_URL =
         "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
     </script>
-    <!--begin::Global Config(global config for global JS scripts)-->
+    <!--begin:: Global Config(global config for global JS scripts)-->
     <script>
       var KTAppSettings = {
         breakpoints: {
@@ -1041,22 +2175,22 @@ License: You must have a valid license purchased only from themeforest(the above
         "font-family": "Poppins",
       };
     </script>
-    <!--end::Global Config-->
+    <!--end:: Global Config-->
 
-    <!--begin::Global Theme Bundle(used by all pages)-->
-    <script src="../../assets/plugins/global/plugins.bundle.js"></script>
-    <script src="../../assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
-    <script src="../../assets/js/scripts.bundle.js"></script>
-    <!--end::Global Theme Bundle-->
+    <!--begin:: Global Theme Bundle(used by all pages)-->
+    <script src="assets/plugins/global/plugins.bundle.js"></script>
+    <script src="assets/plugins/custom/prismjs/prismjs.bundle.js"></script>
+    <script src="assets/js/scripts.bundle.js"></script>
+    <!--end:: Global Theme Bundle-->
 
-    <!--begin::Page Vendors(used by this page)-->
-    <script src="../../assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
-    <!--end::Page Vendors-->
+    <!--begin:: Page Vendors(used by this page)-->
+    <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
+    <!--end:: Page Vendors-->
 
-    <!--begin::Page Scripts(used by this page)-->
-    <script src="../../assets/js/pages/widgets.js"></script>
-    <!--end::Page Scripts-->
+    <!--begin:: Page Scripts(used by this page)-->
+    <script src="assets/js/pages/widgets.js"></script>
+    <!--end:: Page Scripts-->
     <script src="assets/js/iconify/iconify.min.js"></script>
   </body>
-  <!--end::Body-->
+  <!--end:: Body-->
 </html>