npm - zet-lib - Versions diffs - 1.5.30 → 2.0.1 - Mend

zet-lib 1.5.30 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/lib/Modal.js +85 -30
package/lib/Model.js +118 -2
package/lib/config_generator.js +24 -0
package/lib/generatorApi.js +1328 -0
package/lib/generatorApp.js +1342 -0
package/lib/generatorModel.js +733 -0
package/lib/index.js +39 -12
package/lib/lang_en.js +115 -0
package/lib/routes/api.js +52 -0
package/lib/routes/index.js +9 -0
package/lib/views/error.ejs +3 -0
package/lib/views/zgenerator/bootstrap3/_form.ejs +24 -0
package/lib/views/zgenerator/bootstrap3/create.ejs +9 -0
package/lib/views/zgenerator/bootstrap3/createjs.ejs +3 -0
package/lib/views/zgenerator/bootstrap3/import.ejs +52 -0
package/lib/views/zgenerator/bootstrap3/importjs.ejs +3 -0
package/lib/views/zgenerator/bootstrap3/index.ejs +29 -0
package/lib/views/zgenerator/bootstrap3/indexcss.ejs +1 -0
package/lib/views/zgenerator/bootstrap3/indexjs.ejs +307 -0
package/lib/views/zgenerator/bootstrap3/update.ejs +8 -0
package/lib/views/zgenerator/bootstrap3/updatejs.ejs +3 -0
package/lib/views/zgenerator/bootstrap3/view.ejs +57 -0
package/lib/views/zgenerator/head.ejs +12 -0
package/lib/views/zgenerator/index.ejs +271 -0
package/lib/views/zgenerator/indexcss.ejs +87 -0
package/lib/views/zgenerator/indexjs.ejs +705 -0
package/lib/views/zgenerator/layout.ejs +198 -0
package/lib/views/zgenerator/manual_basic.ejs +2 -0
package/lib/views/zgenerator/manual_dropdown.ejs +126 -0
package/lib/views/zgenerator/manual_modules.ejs +192 -0
package/lib/views/zgenerator/manual_virtual.ejs +143 -0
package/lib/views/zgenerator/mini.ejs +341 -0
package/lib/views/zgenerator/routerApp.ejs +359 -0
package/lib/views/zgenerator/views/_form.ejs +25 -0
package/lib/views/zgenerator/views/approval.ejs +42 -0
package/lib/views/zgenerator/views/create.ejs +7 -0
package/lib/views/zgenerator/views/createjs.ejs +16 -0
package/lib/views/zgenerator/views/import.ejs +49 -0
package/lib/views/zgenerator/views/importjs.ejs +4 -0
package/lib/views/zgenerator/views/index.ejs +9 -0
package/lib/views/zgenerator/views/indexcss.ejs +2 -0
package/lib/views/zgenerator/views/indexjs.ejs +2 -0
package/lib/views/zgenerator/views/preview.ejs +34 -0
package/lib/views/zgenerator/views/update.ejs +7 -0
package/lib/views/zgenerator/views/updatejs.ejs +16 -0
package/lib/views/zgenerator/views/view.ejs +36 -0
package/lib/zGeneratorRouter.js +46 -22
package/lib/zRoute.js +14 -3
package/package.json +17 -11

package/lib/views/zgenerator/layout.ejs ADDED Viewed

@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <%- include("head.ejs") %>
+    <title>CRUD GENERATOR</title>
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"/>
+    <!-- Bootstrap core CSS -->
+    <link href="/mdb/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
+    <link rel="stylesheet" href="/js/sortable.css">
+    <!-- Material Design Bootstrap -->
+    <link href="/mdb/css/mdb.min.css" rel="stylesheet">
+    <!-- Your custom styles (optional) -->
+    <link href="/mdb/css/style.css" rel="stylesheet">
+    <style type="text/css">
+        .spinner {
+            display: flex;
+            align-items: center;
+            width: 40px;
+            height: 40px;
+            position: fixed;
+            top: 140px;
+            left: 140px;
+            z-index: 10;
+        }
+    </style>
+</head>
+<body class="grey lighten-3">
+<!--Main Navigation-->
+<header>
+    <!-- Navbar -->
+    <nav class="navbar fixed-top navbar-expand-lg navbar-light white scrolling-navbar">
+        <div class="container">
+            <!-- Brand -->
+            <a class="navbar-brand waves-effect" href="/dashboard">
+                <strong class="blue-text"><%- menuApp%> </strong>
+            </a>
+            <!-- Collapse -->
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <!-- Links -->
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul id="main-navbar" class="nav navbar-nav nav-flex-icons ml-auto ms-auto flex-row" data-loaded="dpl">
+                    <div id="navbarNotification" class="d-none"><div id="navbarNotificationCounter"></div><div id="navbarNotificationContent"></div></div>
+                    <li class="nav-item me-3 me-lg-0 d-none d-sm-inline-block dropdown">
+                        <a class="nav-link dropdown-toggle" id="new-mdb-technologies-dropdown" role="button" data-toggle="dropdown" aria-expanded="true">
+                            <i class="fa fa-cog"></i> Admin
+                        </a>
+                        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="new-mdb-technologies-dropdown">
+                            <li><h5 class="dropdown-header">Admin Menu</h5></li>
+                            <li><hr class="dropdown-divider"></li>
+                            <li>
+                                <a class="dropdown-item" href="/zgenerator">
+                                    <span>Generator</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="/zmenu">
+                                    <span>Menu Generator</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a class="dropdown-item" href="/zreport">
+                                    <span>Report Generator</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="nav-item d-none d-sm-inline-block">
+                        <a href="#" class="nav-link waves-effect">
+                            <i class="fa fa-book"></i> Docs
+                        </a>
+                    </li>
+                    <li class="nav-item d-none d-sm-inline-block">
+                        <a href="#" class="nav-link waves-effect">
+                            <i class="fa fa-help"></i> Support
+                        </a>
+                    </li>
+                    <li style="margin-top:2px;min-height:1px;min-width:1px;" id="gtmDC-nav-unlogged" data-gtm-vis-recent-on-screen-2340190_2232="2328" data-gtm-vis-first-on-screen-2340190_2232="2328" data-gtm-vis-total-visible-time-2340190_2232="100" data-gtm-vis-has-fired-2340190_2232="1" data-gtm-vis-recent-on-screen-2340190_2248="2352" data-gtm-vis-first-on-screen-2340190_2248="2352" data-gtm-vis-total-visible-time-2340190_2248="100" data-gtm-vis-has-fired-2340190_2248="1" data-gtm-vis-recent-on-screen-2340190_2267="2371" data-gtm-vis-first-on-screen-2340190_2267="2371" data-gtm-vis-total-visible-time-2340190_2267="100" data-gtm-vis-has-fired-2340190_2267="1" data-gtm-vis-recent-on-screen-2340190_2240="2381" data-gtm-vis-first-on-screen-2340190_2240="2382" data-gtm-vis-total-visible-time-2340190_2240="100" data-gtm-vis-has-fired-2340190_2240="1" data-gtm-vis-recent-on-screen-2340190_2205="2397" data-gtm-vis-first-on-screen-2340190_2205="2397" data-gtm-vis-total-visible-time-2340190_2205="100" data-gtm-vis-has-fired-2340190_2205="1" data-gtm-vis-recent-on-screen-2340190_2137="2413" data-gtm-vis-first-on-screen-2340190_2137="2413" data-gtm-vis-total-visible-time-2340190_2137="100" data-gtm-vis-has-fired-2340190_2137="1" data-gtm-vis-recent-on-screen-2340190_2132="2424" data-gtm-vis-first-on-screen-2340190_2132="2424" data-gtm-vis-total-visible-time-2340190_2132="100" data-gtm-vis-has-fired-2340190_2132="1" data-gtm-vis-recent-on-screen-2340190_2245="2442" data-gtm-vis-first-on-screen-2340190_2245="2442" data-gtm-vis-total-visible-time-2340190_2245="100" data-gtm-vis-has-fired-2340190_2245="1" data-gtm-vis-recent-on-screen-2340190_2196="2456" data-gtm-vis-first-on-screen-2340190_2196="2456" data-gtm-vis-total-visible-time-2340190_2196="100" data-gtm-vis-has-fired-2340190_2196="1" data-gtm-vis-recent-on-screen-2340190_2124="2468" data-gtm-vis-first-on-screen-2340190_2124="2468" data-gtm-vis-total-visible-time-2340190_2124="100" data-gtm-vis-has-fired-2340190_2124="1" data-gtm-vis-recent-on-screen-2340190_2229="2481" data-gtm-vis-first-on-screen-2340190_2229="2481" data-gtm-vis-total-visible-time-2340190_2229="100" data-gtm-vis-has-fired-2340190_2229="1" data-gtm-vis-recent-on-screen-2340190_2305="2494" data-gtm-vis-first-on-screen-2340190_2305="2494" data-gtm-vis-total-visible-time-2340190_2305="100" data-gtm-vis-has-fired-2340190_2305="1" data-gtm-vis-recent-on-screen-2340190_2311="2505" data-gtm-vis-first-on-screen-2340190_2311="2505" data-gtm-vis-total-visible-time-2340190_2311="100" data-gtm-vis-has-fired-2340190_2311="1" data-gtm-vis-recent-on-screen-2340190_1431="2521" data-gtm-vis-first-on-screen-2340190_1431="2521" data-gtm-vis-total-visible-time-2340190_1431="100" data-gtm-vis-has-fired-2340190_1431="1" data-gtm-vis-recent-on-screen-2340190_1890="2533" data-gtm-vis-first-on-screen-2340190_1890="2533" data-gtm-vis-total-visible-time-2340190_1890="100" data-gtm-vis-has-fired-2340190_1890="1" data-gtm-vis-recent-on-screen-2340190_1891="2549" data-gtm-vis-first-on-screen-2340190_1891="2549" data-gtm-vis-total-visible-time-2340190_1891="100" data-gtm-vis-has-fired-2340190_1891="1" data-gtm-vis-recent-on-screen-2340190_1893="2565" data-gtm-vis-first-on-screen-2340190_1893="2565" data-gtm-vis-total-visible-time-2340190_1893="100" data-gtm-vis-has-fired-2340190_1893="1" data-gtm-vis-recent-on-screen-2340190_2000="2578" data-gtm-vis-first-on-screen-2340190_2000="2578" data-gtm-vis-total-visible-time-2340190_2000="100" data-gtm-vis-has-fired-2340190_2000="1" data-gtm-vis-recent-on-screen-2340190_1892="2589" data-gtm-vis-first-on-screen-2340190_1892="2589" data-gtm-vis-total-visible-time-2340190_1892="100" data-gtm-vis-has-fired-2340190_1892="1" data-gtm-vis-recent-on-screen-2340190_2123="2600" data-gtm-vis-first-on-screen-2340190_2123="2600" data-gtm-vis-total-visible-time-2340190_2123="100" data-gtm-vis-has-fired-2340190_2123="1" data-gtm-vis-recent-on-screen-2340190_1946="2618" data-gtm-vis-first-on-screen-2340190_1946="2618" data-gtm-vis-total-visible-time-2340190_1946="100" data-gtm-vis-has-fired-2340190_1946="1" data-gtm-vis-recent-on-screen-2340190_2038="2629" data-gtm-vis-first-on-screen-2340190_2038="2629" data-gtm-vis-total-visible-time-2340190_2038="100" data-gtm-vis-has-fired-2340190_2038="1" data-gtm-vis-recent-on-screen-2340190_1947="2656" data-gtm-vis-first-on-screen-2340190_1947="2656" data-gtm-vis-total-visible-time-2340190_1947="100" data-gtm-vis-has-fired-2340190_1947="1" data-gtm-vis-recent-on-screen-2340190_2022="2677" data-gtm-vis-first-on-screen-2340190_2022="2677" data-gtm-vis-total-visible-time-2340190_2022="100" data-gtm-vis-has-fired-2340190_2022="1" data-gtm-vis-recent-on-screen-2340190_2049="2706" data-gtm-vis-first-on-screen-2340190_2049="2706" data-gtm-vis-total-visible-time-2340190_2049="100" data-gtm-vis-has-fired-2340190_2049="1" data-gtm-vis-recent-on-screen-2340190_1942="2723" data-gtm-vis-first-on-screen-2340190_1942="2723" data-gtm-vis-total-visible-time-2340190_1942="100" data-gtm-vis-has-fired-2340190_1942="1" data-gtm-vis-recent-on-screen-2340190_2103="2771" data-gtm-vis-first-on-screen-2340190_2103="2771" data-gtm-vis-total-visible-time-2340190_2103="100" data-gtm-vis-has-fired-2340190_2103="1" data-gtm-vis-recent-on-screen-2340190_2004="2785" data-gtm-vis-first-on-screen-2340190_2004="2785" data-gtm-vis-total-visible-time-2340190_2004="100" data-gtm-vis-has-fired-2340190_2004="1" data-gtm-vis-recent-on-screen-2340190_1995="2796" data-gtm-vis-first-on-screen-2340190_1995="2796" data-gtm-vis-total-visible-time-2340190_1995="100" data-gtm-vis-has-fired-2340190_1995="1" data-gtm-vis-recent-on-screen-2340190_2005="2805" data-gtm-vis-first-on-screen-2340190_2005="2805" data-gtm-vis-total-visible-time-2340190_2005="100" data-gtm-vis-has-fired-2340190_2005="1" data-gtm-vis-recent-on-screen-2340190_1948="2816" data-gtm-vis-first-on-screen-2340190_1948="2816" data-gtm-vis-total-visible-time-2340190_1948="100" data-gtm-vis-has-fired-2340190_1948="1"></li><li style="margin-top:2px;min-height:1px;min-width:1px;" id="gtmDC-login-button" data-gtm-vis-has-fired-2340190_2232="1" data-gtm-vis-has-fired-2340190_2248="1" data-gtm-vis-has-fired-2340190_2267="1" data-gtm-vis-has-fired-2340190_2240="1" data-gtm-vis-has-fired-2340190_2245="1" data-gtm-vis-has-fired-2340190_2196="1" data-gtm-vis-has-fired-2340190_2124="1" data-gtm-vis-has-fired-2340190_2229="1" data-gtm-vis-has-fired-2340190_2305="1" data-gtm-vis-has-fired-2340190_2311="1" data-gtm-vis-has-fired-2340190_1890="1" data-gtm-vis-has-fired-2340190_1891="1" data-gtm-vis-has-fired-2340190_1893="1" data-gtm-vis-has-fired-2340190_2000="1" data-gtm-vis-has-fired-2340190_1892="1" data-gtm-vis-has-fired-2340190_2123="1" data-gtm-vis-has-fired-2340190_1946="1" data-gtm-vis-has-fired-2340190_2038="1" data-gtm-vis-has-fired-2340190_1947="1" data-gtm-vis-has-fired-2340190_1942="1" data-gtm-vis-has-fired-2340190_2004="1" data-gtm-vis-has-fired-2340190_1995="1" data-gtm-vis-has-fired-2340190_2005="1" data-gtm-vis-has-fired-2340190_1948="1">
+                        <a href="/zdashboard" target="_blank" class="auth-modal-toggle btn btn-sm btn-primary ripple-surface ms-2 me-1" data-auth-modal-tab="sign-in">Dashboard</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <!-- Navbar -->
+</header>
+<!--Main Navigation-->
+<!--Main layout-->
+<main class="mt-5 pt-5">
+    <div class="container-fluid">
+        <!--Section: Post-->
+        <%- renderBody ? include("./../"+renderBody) : "" %>
+    </div>
+</main>
+<!--Main layout-->
+<!--Footer-->
+<footer class="page-footer text-center font-small mdb-color darken-2 mt-4 wow fadeIn">
+    <!--Call to action-->
+    <hr class="my-4">
+    <!-- Social icons -->
+    <div class="pb-4">
+        <a href="https://www.facebook.com/sintret" target="_blank">
+            <i class="fab fa-facebook-f mr-3"></i>
+        </a>
+        <a href="https://twitter.com/sintret" target="_blank">
+            <i class="fab fa-twitter mr-3"></i>
+        </a>
+        <a href="https://www.youtube.com/watch?v=sintret" target="_blank">
+            <i class="fab fa-youtube mr-3"></i>
+        </a>
+        <a href="https://plus.google.com/u/0/b/sintret" target="_blank">
+            <i class="fab fa-google-plus-g mr-3"></i>
+        </a>
+        <a href="https://dribbble.com/sintret" target="_blank">
+            <i class="fab fa-dribbble mr-3"></i>
+        </a>
+        <a href="https://pinterest.com/sintret" target="_blank">
+            <i class="fab fa-pinterest mr-3"></i>
+        </a>
+        <a href="https://github.com/sintret" target="_blank">
+            <i class="fab fa-github mr-3"></i>
+        </a>
+        <a href="http://codepen.io/sintret/" target="_blank">
+            <i class="fab fa-codepen mr-3"></i>
+        </a>
+    </div>
+    <!-- Social icons -->
+    <!--Copyright-->
+    <div class="footer-copyright py-3">
+        © 2022 Copyright:
+        <a href="https://sintret.com" target="_blank"> App Maker </a>
+    </div>
+    <!--/.Copyright-->
+</footer>
+<div class="spinner" style="display: none"><img src="/img/reload.png" width="62"></div>
+<!-- SCRIPTS -->
+<!-- JQuery -->
+<script type="text/javascript" src="/mdb/js/jquery-3.4.1.min.js"></script>
+<!-- Bootstrap tooltips -->
+<script type="text/javascript" src="/mdb/js/popper.min.js"></script>
+<!-- Bootstrap core JavaScript -->
+<script type="text/javascript" src="/mdb/js/bootstrap.min.js"></script>
+<!-- MDB core JavaScript -->
+<script type="text/javascript" src="/mdb/js/mdb.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
+<script src="/js/jquery-sortable.js"></script>
+<script src="/socket.io/socket.io.js"></script>
+<script src="/js/socket.js"></script>
+<script src="/js/form.js"></script>
+<!--
+<script src="/js/sortable.js"></script>
+-->
+<%- moduleEnd %>
+<%- renderEnd ? include("./../"+renderEnd) : "" %>
+</body>
+</html>

package/lib/views/zgenerator/manual_basic.ejs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <h3>Basic</h3>
2	+ <hr>

package/lib/views/zgenerator/manual_dropdown.ejs ADDED Viewed

@@ -0,0 +1,126 @@
+<h3>Drop Down</h3>
+<hr>
+<div class="card card-cascade">
+    <!-- Card image -->
+    <div class="view view-cascade overlay">
+        <img class="card-img-top" src="/img/dropdown_static.png"
+             alt="Card image cap">
+        <a>
+            <div class="mask rgba-white-slight"></div>
+        </a>
+    </div>
+    <!-- Card content -->
+    <div class="card-body card-body-cascade text-center">
+        <!-- Title -->
+        <h4 class="card-title"><strong>dropdown_static</strong></h4>
+        <!-- Subtitle -->
+        <h6 class="font-weight-bold indigo-text py-2">dropdown_static_1=Internal,2=External</h6>
+        <!-- Text -->
+        <p class="card-text">dropdown_static_1=Internal,2=External</p>
+    </div>
+</div>
+<hr>
+<div class="card card-cascade">
+    <!-- Card image -->
+    <div class="view view-cascade overlay">
+        <img class="card-img-top" src="/img/dropdownmulti.png"
+             alt="Card image cap">
+        <a>
+            <div class="mask rgba-white-slight"></div>
+        </a>
+    </div>
+    <!-- Card content -->
+    <div class="card-body card-body-cascade text-center">
+        <!-- Title -->
+        <h4 class="card-title"><strong>dropdown_multi</strong></h4>
+        <!-- Subtitle -->
+        <h6 class="font-weight-bold indigo-text py-2">dropdown_multi_position-code</h6>
+        <!-- Text -->
+        <p class="card-text">Dropdown Multi dari table <strong>position</strong> ambil <strong>code</strong> dari table position</p>
+    </div>
+</div>
+<hr>
+<div class="card card-cascade">
+    <!-- Card image -->
+    <div class="view view-cascade overlay">
+        <img class="card-img-top" src="/img/chain.png"
+             alt="Card image cap">
+        <a>
+            <div class="mask rgba-white-slight"></div>
+        </a>
+    </div>
+    <!-- Card content -->
+    <div class="card-body card-body-cascade text-center">
+        <!-- Title -->
+        <h4 class="card-title"><strong>dropdown_table</strong></h4>
+        <!-- Subtitle -->
+        <p class="card-text">Dropdown Chain dimana nilai sekarang berpengaruh terhadap field yang lain</p>
+        <p class="card-text">Contoh dari dropdown division, nilai yang dipilih berpengaruh ke department</p>
+        <h6 class="font-weight-bold indigo-text py-2">dropdown_table_departmentId</h6>
+        <!-- Text -->
+    </div>
+</div>
+<hr>
+<div class="card card-cascade">
+    <!-- Card image -->
+    <div class="view view-cascade overlay">
+        <img class="card-img-top" src="/img/dropdowngroup.png"
+             alt="Card image cap">
+        <a>
+            <div class="mask rgba-white-slight"></div>
+        </a>
+    </div>
+    <!-- Card content -->
+    <div class="card-body card-body-cascade text-center">
+        <!-- Title -->
+        <h4 class="card-title"><strong>dropdown_group</strong></h4>
+        <!-- Subtitle -->
+        <p class="card-text">Dropdown_group adalah Multiple Fields dalam suatu form, dimana multiple fields tersebut digenerate di dalam table dummy</p>
+        <p class="card-text">Contoh adalah Daftar pendidikan dalam suatu form mulai dari SD</p>
+        <p class="card-text">Buat table dengan nama zdummy_employee_education</p>
+        <h6 class="font-weight-bold indigo-text py-2">dropdown_group_zdummy_employee_education</h6>
+        <!-- Text -->
+    </div>
+</div>
+<hr>
+<div class="card card-cascade">
+    <!-- Card image -->
+    <div class="view view-cascade overlay">
+        <img class="card-img-top" src="/img/dropdowncheckbox.png"
+             alt="Card image cap">
+        <a>
+            <div class="mask rgba-white-slight"></div>
+        </a>
+    </div>
+    <!-- Card content -->
+    <div class="card-body card-body-cascade text-center">
+        <!-- Title -->
+        <h4 class="card-title"><strong>dropdown_checkbox[AC,Fog Lamp,Headrest,Air Bag,Spoiler,Parking Cencor]</strong></h4>
+        <!-- Subtitle -->
+        <p class="card-text">dropdown_checkbox adalah Multiple Checkbox dalam suatu form, dimana multiple checkbox disimpan dalam bentuk JSON</p>
+        <p class="card-text">Mariadb/MySQL : alter table car add column accecories JSON NULL</p>
+        <p class="card-text">Di Maridb akan terlihat sebagai longtext walaupun tipenya JSON</p>
+        <h6 class="font-weight-bold indigo-text py-2">dropdown_checkbox</h6>
+        <!-- Text -->
+    </div>
+</div>

package/lib/views/zgenerator/manual_modules.ejs ADDED Viewed

@@ -0,0 +1,192 @@
+<h3>Modules</h3>
+<hr>
+<p class="mb-4">Modules ada di file components/moduleLib.js</p>
+<!-- module editor -->
+<div class="card card-cascade">
+    <!-- Card image -->
+    <div class="view view-cascade overlay">
+        <img class="card-img-top" src="/img/datepicker.png"
+             alt="Card image cap">
+        <a>
+            <div class="mask rgba-white-slight"></div>
+        </a>
+    </div>
+    <!-- Card content -->
+    <div class="card-body card-body-cascade text-center">
+        <!-- Title -->
+        <h4 class="card-title"><strong>Module Date Picker</strong></h4>
+        <!-- Subtitle -->
+        <h6 class="font-weight-bold indigo-text py-2">module_datepicker</h6>
+        <!-- Text -->
+        <p class="card-text">Semua field di sebuah table yang type nya adalah date otomatis diberi module_datepicker
+        </p>
+    </div>
+</div>
+<!-- module switch -->
+<hr>
+<!-- Card image -->
+<div class="view view-cascade overlay">
+    <img class="card-img-top" src="/img/timepicker.png"
+         alt="Card image cap">
+    <a>
+        <div class="mask rgba-white-slight"></div>
+    </a>
+</div>
+<!-- Card content -->
+<div class="card-body card-body-cascade text-center">
+    <!-- Title -->
+    <h4 class="card-title"><strong>Module Clock Picker</strong></h4>
+    <!-- Subtitle -->
+    <h6 class="font-weight-bold indigo-text py-2">module_clockpicker</h6>
+    <!-- Text -->
+    <p class="card-text">Clock Picker dalam bentuk jam dan menit 12:30</p>
+</div>
+<!-- module switch -->
+<hr>
+<!-- module card number -->
+<div class="card card-cascade">
+    <!-- Card image -->
+    <div class="view view-cascade overlay">
+        <img class="card-img-top" src="/img/number.png"
+             alt="Card image cap">
+        <a>
+            <div class="mask rgba-white-slight"></div>
+        </a>
+    </div>
+    <!-- Card content -->
+    <div class="card-body card-body-cascade text-center">
+        <!-- Title -->
+        <h4 class="card-title"><strong>module_number</strong></h4>
+        <!-- Subtitle -->
+        <h6 class="font-weight-bold indigo-text py-2">module_number</h6>
+        <!-- Text -->
+        <p class="card-text">Semua field di sebuah table yang type nya adalah double otomatis diberi module_number
+        </p>
+    </div>
+</div>
+<!-- module card number -->
+<hr>
+<!-- module Switch -->
+<div class="card card-cascade">
+    <!-- Card image -->
+    <div class="view view-cascade overlay">
+        <img class="card-img-top" src="/img/switch.png"
+             alt="Card image cap">
+        <a>
+            <div class="mask rgba-white-slight"></div>
+        </a>
+    </div>
+    <!-- Card content -->
+    <div class="card-body card-body-cascade text-center">
+        <!-- Title -->
+        <h4 class="card-title"><strong>Module Switch</strong></h4>
+        <!-- Subtitle -->
+        <h6 class="font-weight-bold indigo-text py-2">module_switch</h6>
+        <!-- Text -->
+        <p class="card-text">Default : <strong>module_switch</strong></p>
+        OFF / ON
+        <p class="card-text"><strong>module_switch_NO_YES</strong></p>
+        NO / YES
+        <p class="card-text"><strong>module_switch_Cancel_OK</strong></p>
+        Cancel / OK
+    </div>
+</div>
+<!-- module switch -->
+<hr>
+<!-- module typeahead -->
+<div class="card card-cascade">
+    <!-- Card image -->
+    <div class="view view-cascade overlay">
+        <img class="card-img-top" src="/img/typeahead.png"
+             alt="Card image cap">
+        <a>
+            <div class="mask rgba-white-slight"></div>
+        </a>
+    </div>
+    <!-- Card content -->
+    <div class="card-body card-body-cascade text-center">
+        <!-- Title -->
+        <h4 class="card-title"><strong>Module Typeahead</strong></h4>
+        <!-- Subtitle -->
+        <h6 class="font-weight-bold indigo-text py-2">module_typeahead_CONCAT(name, " (code)
+            : ", code)</h6>
+        <!-- Text -->
+        <p class="card-text">CONCAT(name, " (code) : ", code) is mysql concat. example:</p>
+        <p class="card-text">SELECT id, CONCAT(NAME, " (code) : ", CODE) FROM `company` </p>
+    </div>
+</div>
+<!-- module typeahead -->
+<hr>
+<!-- module editor -->
+<div class="card card-cascade">
+    <!-- Card image -->
+    <div class="view view-cascade overlay">
+        <img class="card-img-top" src="/img/editor.png"
+             alt="Card image cap">
+        <a>
+            <div class="mask rgba-white-slight"></div>
+        </a>
+    </div>
+    <!-- Card content -->
+    <div class="card-body card-body-cascade text-center">
+        <!-- Title -->
+        <h4 class="card-title"><strong>Module Editor</strong></h4>
+        <!-- Subtitle -->
+        <h6 class="font-weight-bold indigo-text py-2">module_editor</h6>
+        <!-- Text -->
+    </div>
+</div>
+<!-- module switch -->
+<hr>
+<!-- module typeahead -->
+<div class="card card-cascade">
+    <!-- Card image -->
+    <div class="view view-cascade overlay">
+        <img class="card-img-top" src="/img/module_selectyear.png"
+             alt="Card image cap">
+        <a>
+            <div class="mask rgba-white-slight"></div>
+        </a>
+    </div>
+    <!-- Card content -->
+    <div class="card-body card-body-cascade text-center">
+        <!-- Title -->
+        <h4 class="card-title"><strong>module_selectYear</strong></h4>
+        <!-- Subtitle -->
+        <h6 class="font-weight-bold indigo-text py-2">module_selectYear_2018</h6>
+        <p class="card-text">Module select year from 2018 until now </p>
+        <!-- Text -->
+        <p class="card-text">Module select year from 2018 until 2030 </p>
+        <p class="card-text">module_selectYear_2018_2030</p>
+    </div>
+</div>
+<!-- module typeahead -->