hseq

package-lock.json

@@ -218,13 +218,15 @@
           "version": "1.40.0",
           "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
           "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "mime-types": {
           "version": "2.1.24",
           "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz",
           "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==",
           "dev": true,
+          "optional": true,
           "requires": {
             "mime-db": "1.40.0"
           }
@@ -4272,6 +4274,7 @@
       "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
       "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
       "dev": true,
+      "optional": true,
       "requires": {
         "kind-of": "^3.0.2",
         "longest": "^1.0.1",
@@ -9040,7 +9043,8 @@
           "version": "2.1.1",
           "resolved": false,
           "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -9072,6 +9076,7 @@
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -9088,7 +9093,8 @@
           "version": "1.1.0",
           "resolved": false,
           "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
@@ -9101,7 +9107,8 @@
           "version": "1.1.0",
           "resolved": false,
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -9232,7 +9239,8 @@
           "version": "2.0.3",
           "resolved": false,
           "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -9246,6 +9254,7 @@
           "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -9262,6 +9271,7 @@
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -9270,13 +9280,15 @@
           "version": "0.0.8",
           "resolved": false,
           "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "resolved": false,
           "integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -9297,6 +9309,7 @@
           "resolved": false,
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -9385,7 +9398,8 @@
           "version": "1.0.1",
           "resolved": false,
           "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -9399,6 +9413,7 @@
           "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -9494,7 +9509,8 @@
           "version": "5.1.1",
           "resolved": false,
           "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -9536,6 +9552,7 @@
           "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -9557,6 +9574,7 @@
           "resolved": false,
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -9605,13 +9623,15 @@
           "version": "1.0.2",
           "resolved": false,
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "resolved": false,
           "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -12569,13 +12589,15 @@
           "version": "1.38.0",
           "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.38.0.tgz",
           "integrity": "sha512-bqVioMFFzc2awcdJZIzR3HjZFX20QhilVS7hytkKrv7xFAn8bM1gzc/FOX2awLISvWe0PV8ptFKcon+wZ5qYkg==",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "mime-types": {
           "version": "2.1.22",
           "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.22.tgz",
           "integrity": "sha512-aGl6TZGnhm/li6F7yx82bJiBZwgiEa4Hf6CNr8YO+r5UHr53tSTYZb102zyU50DOWWKeOv0uQLRL0/9EiKWCog==",
           "dev": true,
+          "optional": true,
           "requires": {
             "mime-db": "~1.38.0"
           }
@@ -12950,7 +12972,8 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
       "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "lodash.clonedeep": {
       "version": "4.5.0",
@@ -13030,7 +13053,8 @@
       "version": "4.6.1",
       "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
       "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "lodash.once": {
       "version": "4.1.1",
@@ -13169,7 +13193,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
       "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "loose-envify": {
       "version": "1.3.1",
@@ -13865,7 +13890,8 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
       "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -13947,9 +13973,9 @@
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.10",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
-          "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
         }
       }
     },
@@ -14235,9 +14261,9 @@
       }
     },
     "node-sass": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
-      "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.12.0.tgz",
+      "integrity": "sha512-A1Iv4oN+Iel6EPv77/HddXErL2a+gZ4uBeZUy+a8O35CFYTXhgA8MgLCWBtwpGZdCvTvQ9d+bQxX/QC36GDPpQ==",
       "dev": true,
       "requires": {
         "async-foreach": "^0.1.3",
@@ -14247,12 +14273,10 @@
         "get-stdin": "^4.0.1",
         "glob": "^7.0.3",
         "in-publish": "^2.0.0",
-        "lodash.assign": "^4.2.0",
-        "lodash.clonedeep": "^4.3.2",
-        "lodash.mergewith": "^4.6.0",
+        "lodash": "^4.17.11",
         "meow": "^3.7.0",
         "mkdirp": "^0.5.1",
-        "nan": "^2.10.0",
+        "nan": "^2.13.2",
         "node-gyp": "^3.8.0",
         "npmlog": "^4.0.0",
         "request": "^2.88.0",
@@ -14366,6 +14390,12 @@
           "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
           "dev": true
         },
+        "lodash": {
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+          "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+          "dev": true
+        },
         "mime-db": {
           "version": "1.40.0",
           "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz",
@@ -14381,6 +14411,12 @@
             "mime-db": "1.40.0"
           }
         },
+        "nan": {
+          "version": "2.13.2",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.2.tgz",
+          "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==",
+          "dev": true
+        },
         "oauth-sign": {
           "version": "0.9.0",
           "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
@@ -21138,7 +21174,8 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -21166,6 +21203,7 @@
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -21180,7 +21218,8 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -21191,7 +21230,8 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -21308,7 +21348,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -21320,6 +21361,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -21334,6 +21376,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
@@ -21341,12 +21384,14 @@
             "minimist": {
               "version": "0.0.8",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -21365,6 +21410,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -21445,7 +21491,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -21457,6 +21504,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -21542,7 +21590,8 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -21578,6 +21627,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -21597,6 +21647,7 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -21640,12 +21691,14 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },

package.json

@@ -72,7 +72,7 @@
     "ng2-bootstrap-modal": "^1.0.1",
     "ng2-ckeditor": "^1.2.2",
     "ng2-completer": "2.0.8",
-    "ng2-smart-table": "1.3.5",
+    "ng2-smart-table": "^1.3.5",
     "ngx-echarts": "^4.0.1",
     "ngx-pagination": "^3.2.1",
     "ngx-toastr": "^10.0.2",
@@ -112,7 +112,7 @@
     "karma-coverage-istanbul-reporter": "1.3.0",
     "karma-jasmine": "1.1.0",
     "karma-jasmine-html-reporter": "0.2.2",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.12.0",
     "npm-run-all": "4.0.2",
     "protractor": "5.1.2",
     "rimraf": "2.6.1",

src/app/@core/mock/users.service.ts

@@ -8,18 +8,20 @@ export class UserService extends UserData {
   private time: Date = new Date;
 
   private users = {
-    nick: { name: 'Nick Jones', picture: 'assets/images/nick.png' },
+    nick: { name: 'Rabbit Tech ', picture: '../../../assets/images/kate.png' },
     eva: { name: 'Eva Moor', picture: 'assets/images/eva.png' },
     jack: { name: 'Jack Williams', picture: 'assets/images/jack.png' },
     lee: { name: 'Lee Wong', picture: 'assets/images/lee.png' },
     alan: { name: 'Alan Thompson', picture: 'assets/images/alan.png' },
     kate: { name: 'Kate Martinez', picture: 'assets/images/kate.png' },
   };
+
   private types = {
     mobile: 'mobile',
     home: 'home',
     work: 'work',
   };
+
   private contacts: Contacts[] = [
     { user: this.users.nick, type: this.types.mobile },
     { user: this.users.eva, type: this.types.home },
@@ -28,6 +30,7 @@ export class UserService extends UserData {
     { user: this.users.alan, type: this.types.home },
     { user: this.users.kate, type: this.types.work },
   ];
+
   private recentUsers: RecentUsers[]  = [
     { user: this.users.alan, type: this.types.home, time: this.time.setHours(21, 12)},
     { user: this.users.eva, type: this.types.home, time: this.time.setHours(17, 45)},

src/app/@theme/components/header/header.component.html

@@ -17,10 +17,10 @@
     <nb-action *nbIsGranted="['view', 'user']" >
       <nb-user [nbContextMenu]="userMenu" [name]="user?.name" [picture]="user?.picture"></nb-user>
     </nb-action>
-    <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
-    <nb-action class="control-item" icon="nb-email"></nb-action>
-    <nb-action class="control-item">
+    <!-- <nb-action class="control-item" disabled icon="nb-notifications"></nb-action>
+    <nb-action class="control-item" icon="nb-email"></nb-action> -->
+    <!-- <nb-action class="control-item">
       <nb-search type="rotate-layout" (click)="startSearch()"></nb-search>
-    </nb-action>
+    </nb-action> -->
   </nb-actions>
 </div>

src/app/@theme/styles/styles.scss

@@ -23,55 +23,432 @@
 
   // loading progress bar
   @include ngx-pace-theme();
-};
 
+  @include nb-for-theme(default) {
+    .menu-icon { 
+      font-size: 1.5rem !important;
+    }
+
+    .menu-item {
+      margin: 10px 0;
+    }
+
+    .titilList {
+      width: 100%;
+      border-bottom: 1px solid #05ce9c;
+      margin: 10px 0;
+      padding: 10px 0 !important;
+      float: left;
+    }
+
+    .titilList li {
+      display: inline-block;
+      margin: 0 5px;
+      float: left;
+    }
+
+    .containerContent-w {
+      margin: 20px 0;
+    }
+
+    .select-filter {
+      width: 15%;
+      display: -webkit-inline-box;
+      margin-left: 10px;
+      height: 40px !important;
+      border: 1px solid #a1a1e5;
+    }
+
+    .table thead th {
+      vertical-align: initial;
+    }
+
+    .table {
+      margin: 20px 0;
+    }
+
+    .table thead {
+      background-color:transparent;;
+    }
+    
+
+    .table th {
+      padding: 0;
+      text-align: center;
+    }
+    
+    .table td {
+      vertical-align: initial;
+      padding: 0 0 !important;
+    }
+
+    .table tbody tr {
+      text-align: center;
+    }
+
+    .table tbody tr:nth-child(odd) {
+      background-color: #f5f7fc;
+      transition: all 0.5s;
+    }
+
+    .table tbody tr:hover{
+      background-color: #f5f7fc;
+    }
+
+
+    .table-bordered {
+      border: 1px solid #ccc;
+    }
+
+    .table-bordered th, .table-bordered td {
+      border: 1px solid #ccc;
+    }
+
+    .defaultStyle:hover {
+      background-color: #f5f7fc !important;
+    }
+
+   
+
+    .pagination-control {
+      position: absolute;
+      right: 47%;
+      bottom: 10px;
+    }
+
+    .ngx-pagination .current {
+      background: #a4abb3;
+    }
+
+    .cardBody {
+      width: 100%;
+      padding: 20px 10px;
+      background-color: #ffffff;
+      border-radius: 10px;
+      margin: 20px 0;
+    }
+
+    .textAlignRight {
+      text-align: right;
+    }
+
+    .defaultStyle {
+      border: 0 !important;
+    }
+    
+    .defaultStyle:hover {
+      background-color: transparent !important;
+    }
+
+    .formLoop {
+      border: 1px solid #05ce9c;
+      padding: 20px !important;
+      border-radius: 10px !important;
+      margin: 30px 0;
+    }
+
+    .miniformLoop {
+      border: 1px solid #05ce9c;
+      padding: 20px !important;
+      border-radius: 10px !important;
+      margin: 30px 20px;
+    }
+
+  }
+
+  @include nb-for-theme(corporate) {
+    .menu-icon {
+      font-size: 1.5rem !important;
+    }
+
+    .menu-item {
+      margin: 10px 0;
+    }
+
+    .titilList {
+      width: 100%;
+      border-bottom: 1px solid #dcdaea;
+      margin: 10px 0;
+      padding: 10px 0 !important;
+      float: left;
+    }
+
+    .titilList li {
+      display: inline-block;
+      margin: 0 5px;
+      float: left;
+    }
+
+    .containerContent-w {
+      margin: 20px 0;
+    }
+    .select-filter {
+      width: 15%;
+      display: -webkit-inline-box;
+      margin-left: 10px;
+      height: 40px !important;
+      border: 1px solid #a1a1e5;
+    }
+
+    .table {
+      margin: 20px 0;
+    }
+
+    .table thead th {
+      vertical-align: initial;
+    }
+
+    .table thead {
+      background-color:transparent;
+    }
+    
 
+    .table th {
+      padding: 0;
+      text-align: center;
+    }
+    
+    .table td {
+      vertical-align: initial;
+      padding: 0 !important;
+    }
+    
+    .table tbody tr {
+      text-align: center;
+    }
+    .table tbody tr:nth-child(odd) {
+      background-color: #f5f7fc;
+    }
+    
+    .table-bordered {
+      border: 1px solid #ccc;
+    }
+
+    .table-bordered th, .table-bordered td {
+      border: 1px solid #ccc;
+    }
+
+ 
+
+    .cardBody {
+      width: 100%;
+      padding: 20px 10px;
+      background-color: #ffffff;
+      border-radius: 10px;
+      margin: 20px 0;
+    }
+
+      
+
+    .pagination-control {
+      position: absolute;
+      right: 47%;
+      bottom: 10px;
+    }
+
+    .ngx-pagination .current {
+      background: #a4abb3;
+    }
+
+
+    .textAlignRight {
+      text-align: right;
+    }
+
+    .defaultStyle {
+      border: 0 !important;
+    }
+    
+    .defaultStyle:hover {
+      background-color: transparent !important;
+    }
+    .formLoop {
+      border: 1px solid #05ce9c;
+      padding: 20px !important;
+      border-radius: 10px !important;
+      margin: 30px 0;
+    }
+    .miniformLoop {
+      border: 1px solid #05ce9c;
+      padding: 20px !important;
+      border-radius: 10px !important;
+      margin: 30px 20px;
+    }
+
+  }
+
+  @include nb-for-theme(cosmic) {
+
+
+    .validateColor {
+      color: red;
+      font-size: 18px;
+      margin: 5px 0;
+      display: block;
+    }
+    
+    .labelCus {
+      font-size: 18px;
+      margin: 15px 5px;
+    }
+    
+    .forgetPass {
+        display: block;
+        float: right;
+        margin: 10px 0;
+        font-size: 16px;
+    }
+    
+    .menu-icon {
+      font-size: 1.5rem !important;
+    }
+
+    .btn-add-delete{
+      display: flex;
+    }
+    .select-filter{
+      width: 15%;
+      display: -webkit-inline-box;
+      margin-left: 10px;
+    }
+    
+    .navigation .link {
+      display: none;
+    }
+    
+    .table-style{
+      text-align: center;
+    }
+    .pagination-control{
+    display: flex;
+    justify-content: center;
+    }
+    
+    .customInputPadding {
+      padding: 10px !important;
+    }
+    
+     .menu-item {
+      margin: 10px 0;
+    }
+    
+    .textAlignRight {
+      text-align: right;
+    }
+    
+    .table th, .table td {
+      border-top: 0;
+      border-bottom: 0;
+    }
+    
+    .table thead th {
+      border-top: 0;
+      border-bottom: 0;
+    }
+    
+    .defaultStyle {
+      border: 0 !important;
+    }
+    
+    .defaultStyle:hover {
+      background-color: transparent !important;
+    }
+
+    .titilList {
+      width: 100%;
+      border-bottom: 1px solid #221d4e;
+      margin: 10px 0;
+      padding: 10px 0 !important;
+      float: left;  
+    }
+
+    .titilList li {
+      display: inline-block;
+      margin: 0 5px;
+      float: left;
+    }
+
+    .containerContent-w {
+      margin: 20px 0;
+    }
+    
+    .select-filter {
+      height: 40px !important;
+      border: 1px solid #a1a1e5;
+    }
+
+    .table thead th {
+      vertical-align: initial;
+    }
+
+    .table {
+      margin: 20px 0;
+    }
+
+    .table thead {
+      background-color: #4e41a5;
+    }
+
+    .table th {
+      padding: 0;
+      text-align: center;
+    }
+
+    .table td {
+      vertical-align: initial;
+      padding: 0 !important;
+    }
+
+    .table tbody tr {
+      text-align: center;
+    }
+
+    .table tbody tr:nth-child(odd) {
+      background-color: #403b77;
+    }
+
+    .table tbody tr:hover{
+      background-color: #4e41a5 ;
+    }
+
+    .table-bordered {
+      border: 1px solid #2d2864
+    }
+
+    .table-bordered th, .table-bordered td {
+      border: 1px solid #2d2864;
+    }
+
+    .pagination-control {
+      position: absolute;
+      right: 47%;
+      bottom: 10px;
+    }
+
+    .cardBody {
+      width: 100%;
+      padding: 20px 10px;
+      background-color: #3d3780;
+      border-radius: 10px;
+      margin: 20px 0;  
+    }
+
+    .formLoop {
+      border: 1px solid #4e41a5;
+      padding: 20px !important;
+      border-radius: 10px !important;
+      margin: 30px 0;
+    }
+
+    .miniformLoop {
+      border: 1px solid #4e41a5;
+      padding: 20px !important;
+      border-radius: 10px !important;
+      margin: 30px 20px;
+    }
+  }
+
+};
 
 
 
-.validateColor {
-  color: red;
-  font-size: 18px;
-  margin: 5px 0;
-  display: block;
-}
-
-.labelCus {
-  font-size: 18px;
-  margin: 15px 5px;
-}
-
-.forgetPass {
-    display: block;
-    float: right;
-    margin: 10px 0;
-    font-size: 16px;
-}
-
-.nb-theme-cosmic nb-menu .menu-item .menu-icon {
-  font-size: 20px;
-}
-.btn-add-delete{
-  display: flex;
-}
-.select-filter{
-  width: 15%;
-  display: -webkit-inline-box;
-  margin-left: 10px;
-}
-
-.navigation .link {
-  display: none;
-}
-
-.table-style{
-  text-align: center;
-}
-.pagination-control{
-display: flex;
-justify-content: center;
-}
-
-.customInputPadding {
-  padding: 10px !important;
-}

src/app/app-routing.module.ts

@@ -12,7 +12,7 @@ import {
 import { CanActivate } from '@angular/router/src/utils/preactivation';
 
 const routes: Routes = [
-  {path: '', redirectTo: 'auth', pathMatch: 'full'},
+  {path: '', redirectTo: 'pages', pathMatch: 'full'},
   { path: 'auth', loadChildren: './auth/auth.module#NgxAuthModule'},
   { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule', canActivate: [AuthGuard]},
   { path: '**', redirectTo: 'pages' },

src/app/auth/login/login.component.ts

@@ -19,7 +19,13 @@ export class NgxLoginComponent implements AfterViewInit {
   constructor(
     private auth: SharedService,
     private router: Router,
-    private toster:ToastrService ) {}
+    private toster:ToastrService ) {
+      if(!this.auth.isAuthenticated()) {
+        router.navigate(['pages']);
+      } else {
+        router.navigate(['auth']);
+      }
+    }
 
   @ViewChild('f') loginForm: NgForm;
   @ViewChild('inputEmail') focusEmail;

src/app/pages/customers/customer-routing.module.ts

@@ -10,12 +10,11 @@ import { CustomersAddEditThreeComponent } from './customers-add-edit-three/custo
 
 const routes: Routes = [
     {path: '',  component: CustomerComponent, children: [
-      {path: '', redirectTo: 'listView', pathMatch: 'full'},
+      //{path: '', redirectTo: 'listView', pathMatch: 'full'},
       {path: 'listView', component: CustomersListComponent},
       {path: 'register', component: CustomersAddEditComponent},
       {path: 'registerTwo', component: CustomersAddEditTwoComponent},
       {path: 'registerThree', component: CustomersAddEditThreeComponent},
-
       {path: '**', redirectTo: 'listView', pathMatch: 'full'},
     ]},
   ];
@@ -24,6 +23,42 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class CustomersRoutingModule { }
+export class CustomersRoutingModule {
+  
+  
+  settings = {
+    columns: {
+      id: {
+        title: 'ID'
+      },
+      name: {
+        title: 'Full Name'
+      },
+      username: {
+        title: 'User Name'
+      },
+      email: {
+        title: 'Email'
+      }
+    }
+  };
+  
+  data = [
+    {
+      id: 1,
+      name: "Leanne Graham",
+      username: "Bret",
+      email: "Sincere@april.biz"
+    },
+    // ... other rows here
+    {
+      id: 11,
+      name: "Nicholas DuBuque",
+      username: "Nicholas.Stanton",
+      email: "Rey.Padberg@rosamond.biz"
+    }
+  ];
+
+ }
 
 

src/app/pages/customers/customer.module.ts

@@ -12,6 +12,7 @@ import { NbCheckboxModule } from '@nebular/theme';
 import { CustomersAddEditTwoComponent } from './customers-add-edit-two/customers-add-edit-two.component';
 import { CustomersAddEditThreeComponent } from './customers-add-edit-three/customers-add-edit-three.component';
 
+
 @NgModule({
   imports: [
     ThemeModule,

src/app/pages/customers/customers-add-edit-three/customers-add-edit-three.component.html

@@ -2,26 +2,26 @@
   <div class="container">
     <div class="row">
         <div class="col-12">
-          <ul class="list-unstyled titileLi-w">
-            <li class="headingText-w"> Register New User </li>
+          <ul class="list-unstyled titilList">
+            <li class="headingText-w"> Register New User /</li>
             <li class="headingText-w activeLi-w" style="margin-right:5px">Company Users</li>
           </ul>
         </div>
       </div>
       <div class="containerContent-w">
         <form (ngSubmit)="onSubmit()" #f="ngForm">
-          <button type="button" class="btn btn-success rightW"  (click)="plusBransh()">Add New Branch</button>
-          <div   *ngFor="let branch of company_branches; let i = index" style="border: 2px solid #ffffff; padding: 50px;margin-bottom: 25px">
-              <button type="button" class="btn btn-success rightW"  (click)="plusEmployee(i)">Add New Employee</button>
+          <button type="button" class="btn btn-success rightW"  (click)="plusBransh()" style="margin: 20px 0;">Add New Branch</button>
+          <div class="formLoop" *ngFor="let branch of company_branches; let i = index">
+              <button type="button" class="btn btn-success rightW"  (click)="plusEmployee(i)" style="margin: 20px 0;">Add New Employee</button>
               <button type="button" class="btn btn-danger" *ngIf="numOfBranshs > 1" (click)="onDeleteBransh(i)">Remove Bransh</button>
               <div class="row">
-                  <div class="col-12 col-sm-12 col-md-6">
+                  <div class="col-12">
                     <div class="form-group">
                       <label for="branch_name" >Branch Name<span class="spanReqired-w">*</span></label>
                       <input type="text" class="form-control" id="branch_name" name="branch_name" placeholder="Branch name" ngModel [(ngModel)]="branch.branch_name" required/>
                     </div>
                   </div>
-                  <div class="col-12 col-sm-12 col-md-6" *ngFor="let branch_users of branch.branch_users; let j = index">
+                  <div class="col-12 col-sm-12 col-md-6 formLoop" *ngFor="let branch_users of branch.branch_users; let j = index">
                       <div class="row">
                           <div class="col-12">
                            <h5>New employee</h5>

src/app/pages/customers/customers-add-edit-two/customers-add-edit-two.component.html

@@ -2,52 +2,52 @@
     <div class="container">
       <div class="row">
         <div class="col-12">
-        <ul class="list-unstyled titileLi-w">
-            <li class="headingText-w"> Register New User </li>
+        <ul class="list-unstyled titilList">
+            <li class="headingText-w"> Register New User /</li>
             <li class="headingText-w activeLi-w" style="margin-right:5px">Company Admins</li>
           </ul>
         </div>
       </div>
       <div class="containerContent-w">
         <form (ngSubmit)="next()" #f="ngForm">
-          <div class="row "  *ngFor="let admin of admins; let i = index" style="border: 2px solid #ffffff; padding: 50px;margin-bottom: 25px">
+          <div class="row formLoop" *ngFor="let admin of admins; let i = index">
             <div class="row">
             <div class="col-12 col-sm-12 col-md-4">
               <div class="form-group">
-                <label for="name" >Admin Name<span class="spanReqired-w">*</span></label>
+                <label for="name"  style="float: left; margin-left: 5px">Admin Name<span class="spanReqired-w">*</span></label>
                 <input type="text" class="form-control" id="name" name="name" placeholder="Admin name" ngModel [(ngModel)]="admin.name" required/>
               </div>
             </div>
   
             <div class="col-12 col-sm-12 col-md-4">
               <div class="form-group">
-                <label for="email" >Email Address<span class="spanReqired-w">*</span></label>
+                <label for="email"  style="float: left; margin-left: 5px">Email Address<span class="spanReqired-w">*</span></label>
                 <input type="email" class="form-control" id="email" name="email" placeholder="enter your email" ngModel [(ngModel)]="admin.email" email #email="ngModel" required/>
               </div>
             </div>
   
             <div class="col-12 col-sm-12 col-md-4">
                 <div class="form-group">
-                  <label for="password" style="float: right; margin-right: 5px">password<span class="spanReqired-w">*</span></label>
-                  <input type="password" class="form-control" id="password" name="password" min="6" ngModel [(ngModel)]="admin.password" required/>
+                  <label for="password" style="float: left; margin-left: 5px">password<span class="spanReqired-w">*</span></label>
+                  <input type="password" class="form-control" placeholder="passwoed" id="password" name="password" min="6" ngModel [(ngModel)]="admin.password" required/>
                 </div>
               </div>
               <div class="col-12 col-sm-12 col-md-4">
                 <div class="form-group">
-                  <label for="password_confirmation" style="float: right; margin-right: 5px"> password confirmation<span class="spanReqired-w">*</span></label>
-                  <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" min="6" ngModel [(ngModel)]="admin.password_confirmation" required/>
+                  <label for="password_confirmation" style="float: left; margin-left: 5px"> password confirmation<span class="spanReqired-w">*</span></label>
+                  <input type="password" class="form-control" placeholder="password confirmed" id="password_confirmation" name="password_confirmation" min="6" ngModel [(ngModel)]="admin.password_confirmation" required/>
                   <span class="validateColor" *ngIf="">password Not matching</span>
                 </div>
               </div>
           </div>
           <div class="row">
-            <button type="button" class="btn btn-danger" (click)="onDeleteRow(i)">Remove</button>
+            <button type="button" class="btn btn-danger" (click)="onDeleteRow(i)" style="margin: 10px 15px;">Remove</button>
           </div>
         </div>
           <div class=" row col-12" style="display: contents">
             <button type="button" class="btn btn-warning rightW" (click)="previous()">previous</button>
-            <button type="button" class="btn btn-success rightW"  (click)="plusAdmin()">add</button>
-              <button type="button" class="btn btn-success rightW" [disabled]="!f.valid" style="float: right;" (click)="next()">Next</button>
+            <!-- <button type="button" class="btn btn-success rightW"  (click)="plusAdmin()">add</button> -->
+            <button type="button" class="btn btn-success rightW" [disabled]="!f.valid" style="float: right;" (click)="next()">Next</button>
           </div>
         </form>
       </div>

src/app/pages/customers/customers-add-edit-two/customers-add-edit-two.component.ts

@@ -23,10 +23,10 @@ export class CustomersAddEditTwoComponent implements OnInit {
   }
 
   previous(){
-    this.router.navigate[('register')];
+    this.router.navigate[('pages/register')];
   }
   next(){
-    this.router.navigate[('registerThree')];
+    this.router.navigate[('pages/registerThree')];
   }
   plusAdmin(){
     this.admins.push({

src/app/pages/customers/customers-add-edit/customers-add-edit.component.html

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="row">
       <div class="col-12">
-      <ul class="list-unstyled titileLi-w">
+      <ul class="list-unstyled titilList">
           <li class="headingText-w"> Register New User </li>
           <li class="headingText-w activeLi-w" style="margin-right:5px">Company general information</li>
         </ul>
@@ -12,56 +12,56 @@
       <form (ngSubmit)="next()" #f="ngForm">
         <div class="row">
 
-          <div class="col-12 col-sm-12 col-md-12">
+          <div class="col-12 col-md-4">
             <div class="form-group">
               <label for="name" >Company Name<span class="spanReqired-w">*</span></label>
               <input type="text" class="form-control" id="name" name="name" placeholder="Company name" ngModel [ngModel]="" required/>
             </div>
           </div>
 
-          <div class="col-12 col-sm-12 col-md-12">
+          <div class="col-12 col-md-4">
             <div class="form-group">
               <label for="address" >Address<span class="spanReqired-w">*</span></label>
               <input type="text" class="form-control" id="address" name="address" placeholder="company address" ngModel [ngModel]="" required/>
             </div>
           </div>
 
-          <div class="col-12 col-sm-12 col-md-12">
+          <div class="col-12 col-md-4">
             <div class="form-group">
               <label for="website_address">Website<span class="spanReqired-w">*</span></label>
               <input type="text" class="form-control" id="website_address" name="website_address" placeholder="website link" ngModel [ngModel]="" required/>
             </div>
           </div>
 
-          <div class="col-12 col-sm-12 col-md-12">
+          <div class="col-12 col-md-4">
             <div class="form-group">
               <label for="phone" >Phone Number<span class="spanReqired-w">*</span></label>
               <input type="phone" class="form-control" id="phone" name="phone" placeholder="" ngModel [ngModel]="" required/>
             </div>
           </div>
 
-          <div class="col-12 col-sm-12 col-md-12">
+          <div class="col-12 col-md-4">
             <div class="form-group">
               <label for="commercial_number" >commercial no.<span class="spanReqired-w">*</span></label>
               <input type="number" class="form-control" id="commercial_number" name="commercial_number" placeholder="" ngModel [ngModel]="" required/>
             </div>
           </div>
 
-          <div class="col-12 col-sm-12 col-md-12">
+          <div class="col-12 col-md-4">
             <div class="form-group">
               <label for="industrial" >Industrial<span class="spanReqired-w">*</span></label>
               <input type="text" class="form-control" id="industrial" name="industrial" placeholder="" ngModel [ngModel]="" required/>
             </div>
           </div>
 
-          <div class="col-12 col-sm-12 col-md-12">
+          <div class="col-12 col-md-4">
             <div class="form-group">
               <label for="register_date" >Register Date<span class="spanReqired-w">*</span></label>
               <input type="date" class="form-control" id="register_date" name="register_date" placeholder="" ngModel [ngModel]="" required/>
             </div>
           </div>
 
-          <div class="col-12 col-sm-12 col-md-12">
+          <div class="col-12 col-md-4">
             <div class="form-group">
               <label for="expire_date" >Expire Date<span class="spanReqired-w">*</span></label>
               <input type="date" class="form-control" id="expire_date" name="expire_date" placeholder="" ngModel [ngModel]="" required/>
@@ -69,7 +69,6 @@
           </div>
         </div>
         <div class=" row col-12" style="display: contents">
-          <button type="button" class="btn btn-warning rightW">Cancel</button>
             <button type="button" class="btn btn-success rightW" [disabled]="!f.valid" (click)="next()" style="float: right;">Next</button>
         </div>
       </form>

src/app/pages/customers/customers-add-edit/customers-add-edit.component.ts

@@ -16,6 +16,6 @@ export class CustomersAddEditComponent implements OnInit {
   }
  
   next(){
-    this.router.navigate[('registerTwo')];
+    this.router.navigate[('pages/registerTwo')];
   }
 }

src/app/pages/customers/customers-list/customers-list.component.html

@@ -2,78 +2,81 @@
 
   <div class="row">
     <div class="col-12">
-      <ul class="list-unstyled titileLi-w">
-        <li class="headingText-w">Admins List</li>
+      <ul class="list-unstyled titilList">
+        <li class="headingText-w">Customers List</li>
       </ul>
     </div>
   </div>
 
   <div class="containerContent-w">
-    <div class="row">
-      <div class="col-12 col-sm-12 col-md-6 col-lg-6 btn-add-delete">
-        <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdding()"><i class="fas fa-plus marginFontAowsome-w"></i> Add New</button>
-        <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w"style="margin-left:10px" (click)="onDelete()"><i class="fas fa-times marginFontAowsome-w" style="padding-right: 5px"></i>Delete</button>
-      </div>
-    </div>
 
+  
     <div class="row"> 
+        
+        <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+          <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdding()"><i class="fas fa-plus marginFontAowsome-w"></i> Add New</button>
+          <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w"style="margin-left:10px" (click)="onDelete()"><i class="fas fa-times marginFontAowsome-w" style="padding-right: 5px"></i>Delete</button>
+        </div>
+
         <div class="col-12 col-sm-12 col-md-12 col-lg-6">
-          <div class="form-group">
+          <div class="form-group textAlignRight">
             <span class="spanSelect-w" style="margin-right:10px;">
-                <span class="select-filter-before">Number of Elements:</span>
-              <select [ngModel]="dataTableNumber" class="form-control selectButton-w select-filter" (input)="onGetValue($event)">
+              <span class="select-filter-before">Number of Elements:</span>
+              <select [ngModel]="dataTableNumber" class="form-control select-filter" (input)="onGetValue($event)">
                 <option value="5">5</option>
                 <option value="10">10</option>
                 <option value="15">15</option>
                 <option value="20">20</option>
               </select>
-              <!-- <nb-select [ngModel]="dataTableNumber"   placeholder="Cleanable" (input)="onGetValue($event)">
-                  <nb-option value="5">5</nb-option>
-                  <nb-option value="10">10</nb-option>
-                  <nb-option value="15">15</nb-option>
-                  <nb-option value="20">20</nb-option>
-                </nb-select> -->
             </span>
           </div>
         </div>
         
     </div>
 
-    <table class="table table-bordered table-style" >
-      <thead class="headBackground-w">
-        <tr>
-           <th>
-             <div class="custom-control custom-checkbox">
-              <!-- <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1"> -->
-              <nb-checkbox status="danger" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1"></nb-checkbox>
-              </div>
-          </th>
-          <th> Name </th>
-          <th>industrial</th>
-          <th>website</th>
-          <th>phone</th>
-          <th>Edit</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index "  >
-            <td>
-            <div class="custom-control custom-checkbox centerIneerItem">
-              <!-- <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected()"> -->
-              <!-- <label class="custom-control-label disblayBlock-w" for="{{tab.id}}" style="color:#2a2a2a"></label> -->
-              <nb-checkbox status="danger" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected()"></nb-checkbox>
-            </div>
-          </td>
-          <td>{{ data.name }}</td>
-          <td> {{ data.industrial }}</td>
-          <td>{{ data.website_address }}</td>
-          <td>{{ data.phone }}</td>
-          <td><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
-      </tr>
-    </tbody>
-  </table>
+    <div class="row">
+      <div class="col-12">
+        <div class="cardBody">
+          <table class="table table-bordered" >
+              <thead>
+                <tr>
+                    <th style="width:20px;">
+                    <div class="custom-control custom-checkbox">
+                      <nb-checkbox status="danger" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1"></nb-checkbox>
+                    </div>
+                  </th>
+                  <th>Edit</th>
+                  <th> Name </th>
+                  <th>industrial</th>
+                  <th>website</th>
+                  <th>phone</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index "  >
+                  <td style="width:20px;">
+                    <div class="custom-control custom-checkbox centerIneerItem">
+                      <nb-checkbox status="danger" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected()"></nb-checkbox>
+                    </div>
+                  </td>
+                  <td><button type="button" class="btn btn-outline-secondary defaultStyle" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+                  <td>{{ data.name }}</td>
+                  <td> {{ data.industrial }}</td>
+                  <td>{{ data.website_address }}</td>
+                  <td>{{ data.phone }}</td>
+              </tr>
+            </tbody>
+          </table>
+          
+        <pagination-controls  class="pagination-control" nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)" *ngIf="this.count != 0"></pagination-controls>
+      
+        </div>
+      </div>
+    </div>
+      
 
-  <pagination-controls  class="pagination-control" nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)" *ngIf="this.count != 0"></pagination-controls>
+  
+  <!-- <ng2-smart-table [settings]="settings" [source]="dataList" ></ng2-smart-table> -->
 
   <div class="col-12" *ngIf="this.count == 0" >
     <h2 class="title"> Opps,there's no data to show  </h2>

src/app/pages/customers/customers-list/customers-list.component.scss

@@ -0,0 +1,3 @@
+
+
+

src/app/pages/customers/customers-list/customers-list.component.ts

@@ -4,6 +4,11 @@ import { HttpClient } from '@angular/common/http';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { PagesService } from '../../../shared/pages.service';
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+
+import { LocalDataSource } from 'ng2-smart-table';
+import { SmartTableData } from '../../../@core/data/smart-table';
+
 
 @Component({
   selector: 'ngx-customers-list',
@@ -12,6 +17,9 @@ import { PagesService } from '../../../shared/pages.service';
 })
 export class CustomersListComponent implements OnInit {
 
+  source: LocalDataSource = new LocalDataSource();
+
+
   constructor(
     private auth: SharedService,
     private http: HttpClient,
@@ -19,8 +27,48 @@ export class CustomersListComponent implements OnInit {
     private router: Router,
     private toaster: ToastrService,
     private pageser: PagesService,
+    private service: SmartTableData,
     ) { }
 
+
+
+    // settings = {
+      
+    //   edit: {
+    //     editButtonContent: '<i class="nb-edit"></i>',
+    //     saveButtonContent: '<i class="nb-checkmark"></i>',
+    //     cancelButtonContent: '<i class="nb-close"></i>',
+    //   },
+    //   delete: {
+    //     deleteButtonContent: '<i class="nb-trash"></i>',
+    //     confirmDelete: true,
+    //   },
+    //   selectMode: 'multi',
+    //   actions: {
+    //     add: false,
+    //     delete: false,
+    //     select: true,
+    //     },
+    //   columns: {
+    //     name: {
+    //       title: 'Name',
+    //       type: 'string',
+    //     },
+    //     industrial: {
+    //       title: 'industrial',
+    //       type: 'string',
+    //     },
+    //     website_address: {
+    //       title: 'website',
+    //       type: 'string',
+    //     },
+    //     phone: {
+    //       title: 'Phone',
+    //       type: 'string',
+    //     },
+    //   },
+    // };
+
     dataList = [];
     dataListIds= [];
     selectListIds = [];
@@ -135,7 +183,7 @@ export class CustomersListComponent implements OnInit {
   }
   }
   onAdding(){
-    // this.router.navigate(['pages/system-admins/add']);
+    this.router.navigate(['pages/register']);
   }
 
   onEdit(editId: number) {

src/app/pages/pages-menu.ts

@@ -3,11 +3,14 @@ import { NbMenuItem } from '@nebular/theme';
 export const MENU_ITEMS: NbMenuItem[] = [
   {
     title: 'System Admins',
-    icon: 'fa fa-user-shield'
+    icon: 'fa fa-user-shield',
+    link: '/pages/system-admins/listView',
+    home: true,
   },
   {
     title: 'Customers',
-    icon: 'fas fa-user-friends',
+    icon: 'fa fa-users',
+    link: '/pages/customers'
   },
   
   // {

src/app/pages/pages-routing.module.ts

@@ -8,7 +8,7 @@ import { NotFoundComponent } from './miscellaneous/not-found/not-found.component
 
 const routes: Routes = [
   { path: '', component: PagesComponent, children: [
-  { path: '', redirectTo: 'customers' }, 
+  { path: '', redirectTo: 'system-admins' }, 
   { path: 'customers', loadChildren: './customers/customer.module#CustomersModule'},
   { path: 'system-admins', loadChildren: './system-admins/system-admins.module#SystemAdminsModule'},
   { path: '**', component: NotFoundComponent},

src/app/pages/system-admins/system-admins-add/system-admins-add.component.html

@@ -4,8 +4,8 @@
   <div class="container">
       <div class="row">
         <div class="col-12">
-          <ul class="list-unstyled titileLi-w">
-            <li class="headingText-w"> Super Admins </li>
+          <ul class="list-unstyled titilList">
+            <li class="headingText-w"> Super Admins /</li>
             <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typePage}} </li>
           </ul>
         </div>
@@ -14,33 +14,33 @@
     <div class="containerContent-w">
         <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
             <div class="row">
-             <div class="col-12 col-sm-12 col-md-4">
+             <div class="col-12 col-sm-12 col-md-6">
                 <div class="form-group">
-                  <label for="name" style="float: right; margin-right: 5px">Full Name<span class="spanReqired-w">*</span></label>
+                  <label for="name" style="float: left; margin-left: 5px">Full Name<span class="spanReqired-w">*</span></label>
                   <input type="text" class="form-control" id="name" name="name" placeholder="enter your full name" ngModel [ngModel]="formData.name" required/>
                 </div>
               </div>
-              <div class="col-12 col-sm-12 col-md-4">
+              <div class="col-12 col-sm-12 col-md-6">
                 <div class="form-group">
-                  <label for="email" style="float: right; margin-right: 5px">Email<span class="spanReqired-w">*</span></label>
+                  <label for="email" style="float: left; margin-left: 5px">Email<span class="spanReqired-w">*</span></label>
                   <input type="email" class="form-control" id="email" name="email" placeholder="enter your email" ngModel [ngModel]="formData.email" email #email="ngModel" required/>
                 </div>
               </div>
-              <div class="col-12 col-sm-12 col-md-4">
+              <div class="col-12 col-sm-12 col-md-6">
                 <div class="form-group">
-                  <label for="password" style="float: right; margin-right: 5px">password<span class="spanReqired-w">*</span></label>
-                  <input type="password" class="form-control" id="password" name="password" min="6" ngModel [ngModel]="formData.password" required/>
+                  <label for="password" style="float: left; margin-left: 5px">password<span class="spanReqired-w">*</span></label>
+                  <input type="password" class="form-control" id="password" placeholder="password" name="password" min="6" ngModel [ngModel]="formData.password" required/>
                 </div>
               </div>
-              <div class="col-12 col-sm-12 col-md-4">
+              <div class="col-12 col-sm-12 col-md-6">
                 <div class="form-group">
-                  <label for="password_confirmation" style="float: right; margin-right: 5px"> password confirmation<span class="spanReqired-w">*</span></label>
-                  <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" min="6" ngModel [ngModel]="formData.password_confirmation" required/>
+                  <label for="password_confirmation" style="float: left; margin-left: 5px"> password confirmation<span class="spanReqired-w">*</span></label>
+                  <input type="password" class="form-control" placeholder="password confirmation" id="password_confirmation" name="password_confirmation" min="6" ngModel [ngModel]="formData.password_confirmation" required/>
                   <span class="validateColor" *ngIf="notMatch">password Not matching</span>
                 </div>
               </div>
           </div>
-          <div class=" row col-6">
+          <div class="row col-6" style="margin: 30px 0;">
               <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid" style="margin-right: 10px">Save</button>
               <button type="button" class="btn btn-warning rightW" (click)="pageserv.perviousLocation()">Cancel</button>
           </div>

src/app/pages/system-admins/system-admins-list/system-admins-list.component.html

@@ -1,81 +1,87 @@
 <div class="container">
 
-  <div class="row">
-    <div class="col-12">
-      <ul class="list-unstyled titileLi-w">
-        <li class="headingText-w">Admins List</li>
-      </ul>
-    </div>
-  </div>
-
-  <div class="containerContent-w">
     <div class="row">
-      <div class="col-12 col-sm-12 col-md-6 col-lg-6 btn-add-delete">
-        <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdding()"><i class="fas fa-plus marginFontAowsome-w"></i> Add New</button>
-        <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w" (click)="onDelete()"><i class="fas fa-times marginFontAowsome-w" style="padding-right: 5px"></i>Delete</button>
+      <div class="col-12">
+        <ul class="list-unstyled titilList">
+          <li class="headingText-w">Admins List</li>
+        </ul>
       </div>
     </div>
-
-    <div class="row"> 
-        <div class="col-12 col-sm-12 col-md-12 col-lg-6">
-          <div class="form-group">
-            <span class="spanSelect-w" style="margin-right:10px;">
+  
+    <div class="containerContent-w">
+  
+    
+      <div class="row"> 
+          
+          <div class="col-12 col-sm-12 col-md-6 col-lg-6">
+            <button type="button" class="btn btn-outline-success butttonCreate dashButton-w" (click)="onAdding()"><i class="fas fa-plus marginFontAowsome-w"></i> Add New</button>
+            <button type="button" class="btn btn-outline-danger butttonDelete dashButton-w"style="margin-left:10px" (click)="onDelete()"><i class="fas fa-times marginFontAowsome-w" style="padding-right: 5px"></i>Delete</button>
+          </div>
+  
+          <div class="col-12 col-sm-12 col-md-12 col-lg-6">
+            <div class="form-group textAlignRight">
+              <span class="spanSelect-w" style="margin-right:10px;">
                 <span class="select-filter-before">Number of Elements:</span>
-              <select [ngModel]="dataTableNumber" class="form-control selectButton-w select-filter" (input)="onGetValue($event)">
-                <option value="5">5</option>
-                <option value="10">10</option>
-                <option value="15">15</option>
-                <option value="20">20</option>
-              </select>
-              <!-- <nb-select [ngModel]="dataTableNumber"   placeholder="Cleanable" (input)="onGetValue($event)">
-                  <nb-option value="5">5</nb-option>
-                  <nb-option value="10">10</nb-option>
-                  <nb-option value="15">15</nb-option>
-                  <nb-option value="20">20</nb-option>
-                </nb-select> -->
-            </span>
+                <select [ngModel]="dataTableNumber" class="form-control select-filter" (input)="onGetValue($event)">
+                  <option value="5">5</option>
+                  <option value="10">10</option>
+                  <option value="15">15</option>
+                  <option value="20">20</option>
+                </select>
+              </span>
+            </div>
+          </div>
+          
+      </div>
+  
+      <div class="row">
+        <div class="col-12">
+          <div class="cardBody">
+            <table class="table table-bordered" >
+                <thead>
+                  <tr>
+                      <th style="width:20px;">
+                      <div class="custom-control custom-checkbox">
+                        <nb-checkbox status="danger" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1"></nb-checkbox>
+                      </div>
+                    </th>
+                    <th>Edit</th>
+                    <th> Name </th>
+                    <th>industrial</th>
+                    <th>website</th>
+                    <th>phone</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index "  >
+                    <td style="width:20px;">
+                      <div class="custom-control custom-checkbox centerIneerItem">
+                        <nb-checkbox status="danger" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected()"></nb-checkbox>
+                      </div>
+                    </td>
+                    <td><button type="button" class="btn btn-outline-secondary defaultStyle" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
+                    <td>{{ data.name }}</td>
+                    <td> {{ data.industrial }}</td>
+                    <td>{{ data.website_address }}</td>
+                    <td>{{ data.phone }}</td>
+                </tr>
+              </tbody>
+            </table>
+            
+          <pagination-controls  class="pagination-control" nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)" *ngIf="this.count != 0"></pagination-controls>
+        
           </div>
         </div>
+      </div>
         
+  
+    
+    <!-- <ng2-smart-table [settings]="settings" [source]="dataList" ></ng2-smart-table> -->
+  
+    <div class="col-12" *ngIf="this.count == 0" >
+      <h2 class="title"> Opps,there's no data to show  </h2>
+    </div>
     </div>
-
-    <table class="table table-bordered table-style" >
-      <thead class="headBackground-w">
-        <tr>
-           <th>
-             <div class="custom-control custom-checkbox">
-              <!-- <input type="checkbox" class="custom-control-input" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1"> -->
-              <nb-checkbox status="danger" [(ngModel)]="selectedAll" (change)="selectAll();" id="customCheck" name="example1"></nb-checkbox>
-              </div>
-          </th>
-          <th> Name </th>
-          <th>Type</th>
-          <th>Email</th>
-          <th>Edit</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let data of dataList | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index "  >
-            <td>
-            <div class="custom-control custom-checkbox centerIneerItem">
-              <!-- <input type="checkbox" class="custom-control-input" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected()"> -->
-              <!-- <label class="custom-control-label disblayBlock-w" for="{{tab.id}}" style="color:#2a2a2a"></label> -->
-              <nb-checkbox status="danger" id="{{data.id}}" [(ngModel)]="data.selected" [value]='data' (change)="checkIfAllSelected()"></nb-checkbox>
-            </div>
-          </td>
-          <td>{{ data.name }}</td>
-          <td> {{ data.type }}</td>
-          <td>{{ data.email }}</td>
-          <td><button type="button" class="btn btn-outline-secondary" (click)="onEdit(data.id)"><i class="fas fa-edit"></i></button></td>
-      </tr>
-    </tbody>
-  </table>
-
-  <pagination-controls  class="pagination-control" nextLabel="Next" previousLabel="Prev" (pageChange)="onPageChange($event)" *ngIf="this.count != 0"></pagination-controls>
-
-  <div class="col-12" *ngIf="this.count == 0" >
-    <h2 class="title"> Opps,there's no data to show  </h2>
-  </div>
   </div>
-</div>
-
+  
+  

src/app/pages/system-admins/system-admins-list/system-admins-list.component.scss

@@ -1,26 +0,0 @@
-.table {
-    margin: 30px 0;
-  }
-  
-  .dashButton-w {
-    float: right;
-    margin: 10px;
-  }
-  
-  .custom-control-label {
-    &::after, &::before {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-  }
-  
-  .fixedWidthLabel-w {
-    &::after, &::before {
-      width: 1.5rem;
-      height: 1.5rem;
-    }
-  }
-  
-  .disblayBlock-w {
-    display: block;
-  }

src/app/pages/system-admins/system-admins-routing.module.ts

@@ -9,7 +9,7 @@ const routes: Routes = [
         {path: 'listView', component: SystemAdminsListComponent},
         {path: 'add', component: SystemAdminsAddComponent},
         {path: 'edit/:adminId', component: SystemAdminsAddComponent},
-        {path: '', redirectTo: 'listView'},
+        //{path: '', redirectTo: 'listView'},
         {path: '**', redirectTo: 'listView', pathMatch: 'full'},
       ]},
 ];

src/app/pages/tables/smart-table/smart-table.component.ts

@@ -29,6 +29,10 @@ export class SmartTableComponent {
       deleteButtonContent: '<i class="nb-trash"></i>',
       confirmDelete: true,
     },
+
+  actions: {
+    add: false,
+    },
     columns: {
       id: {
         title: 'ID',
@@ -57,6 +61,7 @@ export class SmartTableComponent {
     },
   };
 
+
   source: LocalDataSource = new LocalDataSource();
 
   constructor(private service: SmartTableData) {