loan-edit 3 form group template skeleton

package-lock.json

         }
       }
     },
+    "@progress/kendo-angular-editor": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-editor/-/kendo-angular-editor-1.2.5.tgz",
+      "integrity": "sha512-FDRdqssuKYCxNnzi6pSxjQzxDqlh2fMuUm3asqfbz4QziMoxXf5qCNMQba9Fb5SmJe0i0mdY4wrOIa4FnIcaiQ==",
+      "requires": {
+        "@progress/kendo-editor-common": "^0.6.1",
+        "@progress/kendo-schematics": "^1.1.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-angular-excel-export": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/@progress/kendo-angular-excel-export/-/kendo-angular-excel-export-3.1.5.tgz",
         }
       }
     },
+    "@progress/kendo-angular-toolbar": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-angular-toolbar/-/kendo-angular-toolbar-3.2.1.tgz",
+      "integrity": "sha512-rEvmaZcFteodoN/l27mUWTnalbQdiVzcAFto9GjOvr7LjFGf/mPKEXSKNGUz7jwS9mg/2Ln56odXQq5YomOP8g==",
+      "requires": {
+        "@progress/kendo-schematics": "^1.0.0",
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-charts": {
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/@progress/kendo-charts/-/kendo-charts-1.16.0.tgz",
         "@progress/pako-esm": "^1.0.1"
       }
     },
+    "@progress/kendo-editor-common": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/@progress/kendo-editor-common/-/kendo-editor-common-0.6.1.tgz",
+      "integrity": "sha512-fXT2egx/Pj0BFtGI++p6rRsdPc7uboYDJ5Jt3l6BkANYCDY0kNfSLYF2DXYm1h374+37JnvuzoP0d3CvDHJ2fw==",
+      "requires": {
+        "@types/prosemirror-commands": "1.0.3",
+        "@types/prosemirror-dropcursor": "1.0.0",
+        "@types/prosemirror-gapcursor": "1.0.1",
+        "@types/prosemirror-history": "1.0.1",
+        "@types/prosemirror-inputrules": "1.0.2",
+        "@types/prosemirror-keymap": "1.0.2",
+        "@types/prosemirror-model": "1.7.2",
+        "@types/prosemirror-schema-list": "1.0.1",
+        "@types/prosemirror-state": "1.2.4",
+        "@types/prosemirror-tables": "0.9.1",
+        "@types/prosemirror-transform": "1.1.1",
+        "@types/prosemirror-view": "1.11.4",
+        "prosemirror-commands": "1.1.4",
+        "prosemirror-dropcursor": "1.3.2",
+        "prosemirror-gapcursor": "1.1.5",
+        "prosemirror-history": "1.1.3",
+        "prosemirror-inputrules": "1.1.2",
+        "prosemirror-keymap": "1.1.4",
+        "prosemirror-model": "1.11.0",
+        "prosemirror-schema-list": "1.1.2",
+        "prosemirror-state": "1.3.3",
+        "prosemirror-tables": "1.1.0",
+        "prosemirror-transform": "1.2.7",
+        "prosemirror-view": "1.15.2",
+        "tslib": "^1.7.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
     "@progress/kendo-file-saver": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@progress/kendo-file-saver/-/kendo-file-saver-1.1.0.tgz",
       "integrity": "sha512-8Jduo8wvvwDzEVJCOvS/G6sgilOLvvhn1eMmK3TW8/T217O7u1jdrK6ImKLv80tVryaPSVeKu6sjDEiFjd4/eg==",
       "dev": true
     },
+    "@types/orderedmap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/orderedmap/-/orderedmap-1.0.0.tgz",
+      "integrity": "sha512-dxKo80TqYx3YtBipHwA/SdFmMMyLCnP+5mkEqN0eMjcTBzHkiiX0ES118DsjDBjvD+zeSsSU9jULTZ+frog+Gw=="
+    },
+    "@types/prosemirror-commands": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-commands/-/prosemirror-commands-1.0.3.tgz",
+      "integrity": "sha512-AjFCJqBvAhQ4gOzXPgUcnEZwu4jd7se7ani3dYAv8p4L+cWEPD6Pshrpp5uJDI5/pzvNXLWQ/4c2Qk4h9IML1w==",
+      "requires": {
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-state": "*",
+        "@types/prosemirror-view": "*"
+      }
+    },
+    "@types/prosemirror-dropcursor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-dropcursor/-/prosemirror-dropcursor-1.0.0.tgz",
+      "integrity": "sha512-S2ndHt94M64avSqjBcgIblaF3YeC3RfcmpY9/WIdfqU7aoJxuOh4RJk5emdmQPHZT1wbczMHFmFSsRqgErK0EQ==",
+      "requires": {
+        "@types/prosemirror-state": "*"
+      }
+    },
+    "@types/prosemirror-gapcursor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-gapcursor/-/prosemirror-gapcursor-1.0.1.tgz",
+      "integrity": "sha512-ruA7FK9NJv+bn5s55SZYFf9SwaN3wk/MkBvqRmhIqIHvowTTa7nzIGWbUdWZMga1DDTk+GrwdcQaEHunAFjFsQ==",
+      "requires": {
+        "@types/prosemirror-state": "*"
+      }
+    },
+    "@types/prosemirror-history": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-history/-/prosemirror-history-1.0.1.tgz",
+      "integrity": "sha512-BYyPJlWDo3VEnWS5X2DCHXrrAKEjdbCe1DUjGL6R/8hmwMFe3iMJGYdBkOXU1FfkTpw7Z+PlwY/pMyeelVydmg==",
+      "requires": {
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-state": "*"
+      }
+    },
+    "@types/prosemirror-inputrules": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-inputrules/-/prosemirror-inputrules-1.0.2.tgz",
+      "integrity": "sha512-bKFneQUPnkZmzCJ1uoitpKH6PFW0hc4q55NsC7mFUCvX0eZl0GRKxyfV47jkJbsbyUQoO/QFv0WwLDz2bo15sA==",
+      "requires": {
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-state": "*"
+      }
+    },
+    "@types/prosemirror-keymap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-keymap/-/prosemirror-keymap-1.0.2.tgz",
+      "integrity": "sha512-94aDnpdrdI5S2UM7MQIjauFeo0MI5S7uU+SMT01m5NXT5CZ/NLHhzN0d1V5zKxe7Nh7fVxuZ7l9DTu5nSMN9sw==",
+      "requires": {
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-state": "*",
+        "@types/prosemirror-view": "*"
+      }
+    },
+    "@types/prosemirror-model": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-model/-/prosemirror-model-1.7.2.tgz",
+      "integrity": "sha512-2l+yXvidg3AUHN07mO4Jd8Q84fo6ksFsy7LHUurLYrZ74uTahBp2fzcO49AKZMzww2EulXJ40Kl/OFaQ/7A1fw==",
+      "requires": {
+        "@types/orderedmap": "*"
+      }
+    },
+    "@types/prosemirror-schema-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-schema-list/-/prosemirror-schema-list-1.0.1.tgz",
+      "integrity": "sha512-+iUYq+pj2wVHSThj0MjNDzkkGwq8aDQ6j0UJK8a0cNCL8v44Ftcx1noGPtBIEUJgitH960VnfBNoTWfQoQZfRA==",
+      "requires": {
+        "@types/orderedmap": "*",
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-state": "*"
+      }
+    },
+    "@types/prosemirror-state": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-state/-/prosemirror-state-1.2.4.tgz",
+      "integrity": "sha512-Gch4THfZ9QNsRQ7myibU8cG99F3b8/3Gto083ZuutNG72E0VmS8yfQzA5ahbndr5GUIbmKyOD5LqKTBvx/M0qw==",
+      "requires": {
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-transform": "*",
+        "@types/prosemirror-view": "*"
+      }
+    },
+    "@types/prosemirror-tables": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-tables/-/prosemirror-tables-0.9.1.tgz",
+      "integrity": "sha512-zoY1qcAC6kG4UjnaQQXuoyYQdDJMQmY9uzRKdyUppP8rWRR5/kXBHOd84CD9ZvrYUBo3uDmS20qQnc3knr2j9A==",
+      "requires": {
+        "prosemirror-tables": "*"
+      }
+    },
+    "@types/prosemirror-transform": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-transform/-/prosemirror-transform-1.1.1.tgz",
+      "integrity": "sha512-yYCYSoiRH+Wcbl8GJc0PFCzeyMzNQ1vL2xrHHSXZuNcIlH75VoiKrZFeZ6BS9cl8mYXjZrlmdBe8YOxYvyKM6A==",
+      "requires": {
+        "@types/prosemirror-model": "*"
+      }
+    },
+    "@types/prosemirror-view": {
+      "version": "1.11.4",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-view/-/prosemirror-view-1.11.4.tgz",
+      "integrity": "sha512-Hh8v2tpCEMaIesQuw7Y7Pz6imoC1T/bR5OlNGVtp944PZvctXiBvFRkQIb0YvZpt7vVkFzeq2kmR+7mnUfvWiw==",
+      "requires": {
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-state": "*",
+        "@types/prosemirror-transform": "*"
+      }
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
         }
       }
     },
+    "orderedmap": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-1.1.1.tgz",
+      "integrity": "sha512-3Ux8um0zXbVacKUkcytc0u3HgC0b0bBLT+I60r2J/En72cI0nZffqrA7Xtf2Hqs27j1g82llR5Mhbd0Z1XW4AQ=="
+    },
     "original": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
         }
       }
     },
+    "prosemirror-commands": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.1.4.tgz",
+      "integrity": "sha512-kj4Qi+8h3EpJtZuuEDwZ9h2/QNGWDsIX/CzjmClxi9GhxWyBUMVUvIFk0mgdqHyX20lLeGmOpc0TLA5aPzgpWg==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-dropcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.3.2.tgz",
+      "integrity": "sha512-4c94OUGyobGnwcQI70OXyMhE/9T4aTgjU+CHxkd5c7D+jH/J0mKM/lk+jneFVKt7+E4/M0D9HzRPifu8U28Thw==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "prosemirror-gapcursor": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.1.5.tgz",
+      "integrity": "sha512-SjbUZq5pgsBDuV3hu8GqgIpZR5eZvGLM+gPQTqjVVYSMUCfKW3EGXTEYaLHEl1bGduwqNC95O3bZflgtAb4L6w==",
+      "requires": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "prosemirror-history": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.1.3.tgz",
+      "integrity": "sha512-zGDotijea+vnfnyyUGyiy1wfOQhf0B/b6zYcCouBV8yo6JmrE9X23M5q7Nf/nATywEZbgRLG70R4DmfSTC+gfg==",
+      "requires": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "prosemirror-inputrules": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.1.2.tgz",
+      "integrity": "sha512-Ja5Z3BWestlHYGvtSGqyvxMeB8QEuBjlHM8YnKtLGUXMDp965qdDV4goV8lJb17kIWHk7e7JNj6Catuoa3302g==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-keymap": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.1.4.tgz",
+      "integrity": "sha512-Al8cVUOnDFL4gcI5IDlG6xbZ0aOD/i3B17VT+1JbHWDguCgt/lBHVTHUBcKvvbSg6+q/W4Nj1Fu6bwZSca3xjg==",
+      "requires": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "prosemirror-model": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.11.0.tgz",
+      "integrity": "sha512-GqoAz/mIYjdv8gVYJ8mWFKpHoTxn/lXq4tXJ6bTVxs+rem2LzMYXrNVXfucGtfsgqsJlRIgng/ByG9j7Q8XDrg==",
+      "requires": {
+        "orderedmap": "^1.1.0"
+      }
+    },
+    "prosemirror-schema-list": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.1.2.tgz",
+      "integrity": "sha512-dgM9PwtM4twa5WsgSYMB+J8bwjnR43DAD3L9MsR9rKm/nZR5Y85xcjB7gusVMSsbQ2NomMZF03RE6No6mTnclQ==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-state": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.3.3.tgz",
+      "integrity": "sha512-PLXh2VJsIgvlgSTH6I2Yg6vk1CzPDp21DFreVpQtDMY2S6WaMmrQgDTLRcsrD8X38v8Yc873H7+ogdGzyIPn+w==",
+      "requires": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "prosemirror-tables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.1.0.tgz",
+      "integrity": "sha512-E00+KSbDw65966GdiLBpqTNxIextw0RavlGmvdv/dyYbN9OTD0gzaoCU1S8MAbz4GLKmY9Y/g4nSiC1IL1ThQg==",
+      "requires": {
+        "prosemirror-keymap": "^1.1.2",
+        "prosemirror-model": "^1.8.1",
+        "prosemirror-state": "^1.3.1",
+        "prosemirror-transform": "^1.2.1",
+        "prosemirror-view": "^1.13.3"
+      }
+    },
+    "prosemirror-transform": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.2.7.tgz",
+      "integrity": "sha512-/107Lo2zeDgXuJBxb8s/clNu0Z2W8Gv3MKmkuSS/68Mcr7LBaUnN/Hj2g+GUxEJ7MpExCzFs65GrsNo2K9rxUQ==",
+      "requires": {
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "prosemirror-view": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.15.2.tgz",
+      "integrity": "sha512-0wftmMDVD8VXj2HZgv6Rg//+tgJC0lpV9LkYlCiAkDLKsf4yW3Ozs5td1ZXqsyoqvX0ga/k5g2EyLbqOMmC1+w==",
+      "requires": {
+        "prosemirror-model": "^1.1.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "protoduck": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
         "fsevents": "~2.1.2"
       }
     },
+    "rope-sequence": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.2.tgz",
+      "integrity": "sha512-ku6MFrwEVSVmXLvy3dYph3LAMNS0890K7fabn+0YIRQ2T96T9F4gkFf0vf0WW0JUraNWwGRtInEpH7yO4tbQZg=="
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
       "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=",
       "dev": true
     },
+    "w3c-keyname": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.4.tgz",
+      "integrity": "sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw=="
+    },
     "watchpack": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz",

package.json

     "@fortawesome/angular-fontawesome": "^0.7.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@progress/kendo-angular-buttons": "^5.0.0",
+    "@progress/kendo-angular-buttons": "^5.1.1",
     "@progress/kendo-angular-charts": "^4.2.1",
-    "@progress/kendo-angular-common": "^1.2.2",
+    "@progress/kendo-angular-common": "^1.2.1",
     "@progress/kendo-angular-dateinputs": "^4.0.0",
-    "@progress/kendo-angular-dialog": "^4.2.2",
-    "@progress/kendo-angular-dropdowns": "^4.0.0",
+    "@progress/kendo-angular-dialog": "^4.1.1",
+    "@progress/kendo-angular-dropdowns": "^4.2.4",
+    "@progress/kendo-angular-editor": "^1.2.5",
     "@progress/kendo-angular-excel-export": "^3.0.0",
     "@progress/kendo-angular-grid": "^4.8.0",
     "@progress/kendo-angular-icons": "^0.2.1",
     "@progress/kendo-angular-indicators": "^0.2.0",
-    "@progress/kendo-angular-inputs": "^6.0.0",
+    "@progress/kendo-angular-inputs": "^6.4.0",
     "@progress/kendo-angular-intl": "^2.0.0",
-    "@progress/kendo-angular-l10n": "^2.0.1",
+    "@progress/kendo-angular-l10n": "^2.0.0",
     "@progress/kendo-angular-label": "^2.3.3",
-    "@progress/kendo-angular-layout": "^5.0.4",
+    "@progress/kendo-angular-layout": "4.1.5 - 5",
     "@progress/kendo-angular-menu": "^2.0.4",
     "@progress/kendo-angular-navigation": "^0.2.0",
     "@progress/kendo-angular-notification": "^2.1.3",
     "@progress/kendo-angular-popup": "^3.0.0",
     "@progress/kendo-angular-progressbar": "^0.2.3",
     "@progress/kendo-data-query": "^1.0.0",
-    "@progress/kendo-drawing": "^1.1.2",
+    "@progress/kendo-drawing": "^1.5.12",
     "@progress/kendo-svg-icons": "^0.0.3",
     "@progress/kendo-theme-default": "latest",
     "bootstrap": "^3.4.1",
     "hammerjs": "^2.0.0",
     "rxjs": "^6.6.6",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.10.2",
+    "@progress/kendo-angular-toolbar": "^3.0.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1002.0",

src/app/app-routing.module.ts

 import { TransactionListComponent } from './transaction-list/transaction-list.component';
 import { TransactionComponent } from './transaction/transaction.component';
 import {ListAllLoansComponent} from './list-all-loans/list-all-loans.component';
+import {LoanAddNewComponent} from './loan-add-new/loan-add-new.component';
 
 
 const routes: Routes = [
   {path : 'transaction', component: TransactionComponent, canActivate: [AuthGuard]},
   {path : 'transaction-list', component: TransactionListComponent, canActivate: [AuthGuard]},
   {path : 'list-all-loans', component: ListAllLoansComponent, },
+  {path : 'start-a-new-loan', component: LoanAddNewComponent, },
 ];
 
 @NgModule({

src/app/app.module.ts

 import { ListAllLoansComponent } from './list-all-loans/list-all-loans.component';
 import { TopBarComponent } from './top-bar/top-bar.component';
 import {LoanSummaryService} from './service/loan_summary.service';
+import { LoanAddNewComponent } from './loan-add-new/loan-add-new.component';
+import { EditorModule } from '@progress/kendo-angular-editor';
+import { BasicinfoComponent } from './loan-edit/basicinfo/basicinfo.component';
+import { PeopleRewardComponent } from './loan-edit/people-reward/people-reward.component';
+import { TrailIncomeComponent } from './loan-edit/trail-income/trail-income.component';
+import { HintCardComponent } from './loan-edit/hint-card/hint-card.component';
+
 
 
 
     ChartRecentTenLoansComponent,
     ChartTopBrokersComponent,
     ListAllLoansComponent,
-    TopBarComponent
+    TopBarComponent,
+    LoanAddNewComponent,
+    BasicinfoComponent,
+    PeopleRewardComponent,
+    TrailIncomeComponent,
+    HintCardComponent
   ],
   imports: [
     BrowserModule,
     ChartsModule,
     DateInputsModule,
     DropDownsModule,
-    ExcelExportModule
+    ExcelExportModule,
+    EditorModule
   ],
   providers: [
     MenuService,

src/app/list-all-loans/list-all-loans.component.html

   [skip]="skip"
   [sortable]="true"
   [sort]="sort"
+  [filter]="filter"
   [pageable]="true"
   [height]="1000"
   [navigable]="true"
+  [filterable]="true"
   (dataStateChange)="dataStateChange($event)"
+  (filterChange)="filterChange($event)"
   class="fullheight_grid"
 >
-  <kendo-grid-column field="Id" width="50" [class]="'topAlign'"  [sortable]="false">
-    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex+1" >
+  <kendo-grid-column field="Id" width="50" [class]="'topAlign'"  [sortable]="false" [filterable]="false">
+    <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" >
       <p title="{{dataItem.Id}}" > {{dataItem.Index}}</p>
     </ng-template>
   </kendo-grid-column>
               <div class="customer-name"> {{ p }}</div>
             </div>
         </ng-template>
+        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+          <kendo-grid-string-filter-cell
+            [showOperators]="false"
+            [column]="column"
+            [filter]="filter">
+          </kendo-grid-string-filter-cell>
+        </ng-template>
       </kendo-grid-column>
 
       <kendo-grid-column field="Broker" width="220" title="Broker (s)" [class]="'topAlign'" [headerClass]="'colBroker'">
             <div class="customer-name"> {{ p }}</div>
           </div>
         </ng-template>
+        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+          <kendo-grid-string-filter-cell
+            [showOperators]="false"
+            [column]="column"
+            [filter]="filter">
+          </kendo-grid-string-filter-cell>
+        </ng-template>
       </kendo-grid-column>
 
       <kendo-grid-column field="OtherRewarder" width="220" title="Beneficiary(ies)" [class]="'topAlign'" [headerClass]="'colOtherRewarder'">
             <div class="customer-name"> {{ p }}</div>
           </div>
         </ng-template>
+        <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+          <kendo-grid-string-filter-cell
+            [showOperators]="false"
+            [column]="column"
+            [filter]="filter">
+          </kendo-grid-string-filter-cell>
+        </ng-template>
       </kendo-grid-column>
+
     </kendo-grid-column-group>
 
   <kendo-grid-column-group title="Loan Details" [columnMenu]="false" [headerClass]="'colGroupLoanDetails'">
-    <kendo-grid-column field="Rating" title="Rating" width="110" [resizable]="false" filter="numeric" [headerClass]="'colRating'" [class]="'topAlign colRating'">
+    <kendo-grid-column field="Rating" title="Rating" width="150" [resizable]="false" [filterable]="false" [headerClass]="'colRating'" [class]="'topAlign colRating'">
       <ng-template kendoGridCellTemplate let-dataItem>
         <kendo-rating
           [value]="dataItem.Rating"
     </kendo-grid-column>
 
     <kendo-grid-column field="Item" [sortable]="true" [class]="'topAlign'"  width="300">
+      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+        <kendo-grid-string-filter-cell
+          [showOperators]="false"
+          [column]="column"
+          [filter]="filter">
+        </kendo-grid-string-filter-cell>
+      </ng-template>
     </kendo-grid-column>
 
-    <kendo-grid-column field="status" title="Status" [width]="180" [headerClass]="'colStatus'"  [class]="'alignStatus colStatus'" [resizable]="false" filter="boolean" >
+    <kendo-grid-column field="status" title="Status" [width]="180" [headerClass]="'colStatus'"  [class]="'alignStatus colStatus'" [resizable]="false"  >
       <ng-template kendoGridCellTemplate let-dataItem>
         <span *ngIf="dataItem.Status != 'none'" class="badge badge-success">{{dataItem.Status}}</span>
       </ng-template>
+      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+        <kendo-grid-string-filter-cell
+          [showOperators]="false"
+          [column]="column"
+          [filter]="filter">
+        </kendo-grid-string-filter-cell>
+      </ng-template>
     </kendo-grid-column>
 
-    <kendo-grid-column field="Settlement" title="Settlement" [class]="'topAlign'" width="120">
+    <kendo-grid-column field="Settlement" title="Settlement" [class]="'topAlign'" width="300" filterable="false" filter="date">
+      <ng-template kendoGridCellTemplate let-dataItem >
+        <div *ngIf="dataItem.Settlement != null" >
+          {{  dataItem.Settlement | date: 'yyyy-MM-dd' }} {{dataItem.Index}}
+        </div>
+      </ng-template>
+      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+        <kendo-grid-date-filter-cell
+          [showOperators]="false"
+          [column]="column"
+          [filter]="filter">
+        </kendo-grid-date-filter-cell>
+      </ng-template>
     </kendo-grid-column>
   </kendo-grid-column-group>
 
   <kendo-grid-column-group title="Lender Details" [columnMenu]="false" [headerClass]="'colGroupLenderDetails'">
-    <kendo-grid-column field="Amount" title="Amount($) " [sortable]="true" width="130" [headerClass]="'colAmount'"  [class]="'topAlign colAmount'">
+    <kendo-grid-column field="Amount" title="Amount($) " [sortable]="true" width="200" [headerClass]="'colAmount'" [class]="'topAlign colAmount'" filter="numeric">
       <ng-template kendoGridCellTemplate let-dataItem>
         <span [ngClass]="{'green text-bold': dataItem.Amount < 500000}">{{ dataItem.Amount | currency }}</span>
       </ng-template>
+      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+        <kendo-grid-numeric-filter-cell
+          [showOperators]="false"
+          [column]="column"
+          [filter]="filter">
+        </kendo-grid-numeric-filter-cell>
+      </ng-template>
     </kendo-grid-column>
 
-    <kendo-grid-column field="Balance" title="Balance($)" width="130" [class]="'topAlign'">
+    <kendo-grid-column field="Balance" title="Balance($)" width="200" [class]="'topAlign'" filter="numeric">
       <ng-template kendoGridCellTemplate let-dataItem>
         <span *ngIf="dataItem.Balance > 0" [ngClass]="{'green text-bold': dataItem.Balance < 500000}">{{ dataItem.Balance | currency }}</span>
       </ng-template>
+      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+        <kendo-grid-numeric-filter-cell
+          [showOperators]="false"
+          [column]="column"
+          [filter]="filter">
+        </kendo-grid-numeric-filter-cell>
+      </ng-template>
     </kendo-grid-column>
-    <kendo-grid-column field="OffsetBalance" title="Offset Balance($)" width="140" [class]="'topAlign'">
+    <kendo-grid-column field="OffsetBalance" title="Offset Balance($)" width="200" [class]="'topAlign'" filter="numeric">
       <ng-template kendoGridCellTemplate let-dataItem>
       <span *ngIf="dataItem.OffsetBalance > 0" [ngClass]="{'red text-bold': dataItem.Percentage > 60}">
         {{ dataItem.OffsetBalance | currency }}
       </span>
       </ng-template>
+      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+        <kendo-grid-numeric-filter-cell
+          [showOperators]="false"
+          [column]="column"
+          [filter]="filter">
+        </kendo-grid-numeric-filter-cell>
+      </ng-template>
     </kendo-grid-column>
-    <kendo-grid-column field="Trail" title="Income Trail($) " [sortable]="true" width="130" [headerClass]="'colTrail'"  [class]="'topAlign colTrail'">
+    <kendo-grid-column field="Trail" title="Income Trail($) " width="200" [headerClass]="'colTrail'"  [class]="'topAlign colTrail'" filter="numeric">
       <ng-template kendoGridCellTemplate let-dataItem>
         <span *ngIf="dataItem.Trail > 0" [ngClass]="{'green text-bold': dataItem.Trail < 500000}">{{ dataItem.Trail | currency }}</span>
       </ng-template>
+      <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
+        <kendo-grid-numeric-filter-cell
+          [showOperators]="false"
+          [column]="column"
+          [filter]="filter">
+        </kendo-grid-numeric-filter-cell>
+      </ng-template>
+    </kendo-grid-column>
+    <kendo-grid-column field="NumOfTrail" title="#Trail" width="100" [class]="'topAlign'" [filterable]="false">
     </kendo-grid-column>
-    <kendo-grid-column field="LastPayInDate" title="Recent Trail" width="120" [sortable]="true" [class]="'topAlign'">
+    <kendo-grid-column field="LastPayInDate" title="Recent Trail" width="300" [sortable]="true" [class]="'topAlign'" [filterable]="false">
+      <ng-template kendoGridCellTemplate let-dataItem >
+        <div *ngIf="dataItem.LastPayInDate != null" >
+          {{  dataItem.LastPayInDate | date: 'yyyy-MM-dd' }}
+        </div>
+      </ng-template>
     </kendo-grid-column>
   </kendo-grid-column-group>
 
   <kendo-grid-column-group title="Income Distribution" [columnMenu]="false" [headerClass]="'colIncomeDistribution colPayOut'">
 
-    <kendo-grid-column field="PayOut" title="Paid ($)" width="140" [class]="'topAlign colPayOut'" [headerClass]="'colPayOut'">
+    <kendo-grid-column field="PayOut" title="Paid ($)" width="140" [class]="'topAlign colPayOut'" [headerClass]="'colPayOut'" [filterable]="false">
       <ng-template kendoGridCellTemplate let-dataItem>
       <span [ngClass]="{'red text-bold': dataItem.PayOut > dataItem.Trail}">
         {{ dataItem.PayOut | currency }}
       </ng-template>
     </kendo-grid-column>
   </kendo-grid-column-group>
-  <div *kendoGridDetailTemplate="let dataItem">
-    <div style="height:100px; background-color: grey;"> {{ dataItem.Item }} details should be here.</div>
-    <!-- category-details [category]="dataItem"></category-details -->
-  </div>
+
+  <ng-template kendoGridDetailTemplate let-dataItem let-rowIndex="rowIndex" [kendoGridDetailTemplateShowIf]="allowEdit.bind(this)">
+<!--    <category-details [category]="dataItem"></category-details>-->
+    <div style="background-color:yellow;"> {{dataItem.Id}}</div>
+  </ng-template>
+
+
 </kendo-grid>

src/app/list-all-loans/list-all-loans.component.scss

   line-height: 32px;
   box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
   margin-left: 5px;
+  margin-bottom: 10px;
 }
 
 .customer-name {

src/app/list-all-loans/list-all-loans.component.ts

 import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
 import {DataStateChangeEvent, GridComponent, GridDataResult} from '@progress/kendo-angular-grid';
-import {Observable} from 'rxjs';
-import {SortDescriptor} from '@progress/kendo-data-query';
+import {CompositeFilterDescriptor, SortDescriptor, toODataString} from '@progress/kendo-data-query';
 import {LoanSummaryService} from '../service/loan_summary.service';
-import {images} from '../transaction-list/images';
 import {AuthService} from '../service/auth.service';
 
 @Component({
 })
 export class ListAllLoansComponent implements OnInit {
   public view: LoanSummaryService;
-  public sort: Array<SortDescriptor> = [];
+  public sort: Array<SortDescriptor> = [{dir: 'desc', field: 'Settlement'}];
+  public filter: CompositeFilterDescriptor;
   public pageSize = 10;
   public skip = 0;
 
+
+
   @ViewChild(GridComponent, { static: true }) public grid: GridComponent;
 
 
     this.loadData();
   }
 
-  public dataStateChange({ skip, take, sort }: DataStateChangeEvent): void {
+  public dataStateChange({ skip, take, sort, filter }: DataStateChangeEvent): void {
     // Save the current state of the Grid component
     this.skip = skip;
     this.pageSize = take;
     this.sort = sort;
+    this.filter = filter;
 
     // Reload the data with the new state
     this.loadData();
 
-    // console.log(this.skip, this.pageSize, this.sort);
-
     // Expand the first row initially
-    this.grid.expandRow(0);
+    //this.grid.expandRow(0);
   }
 
+  public filterChange(filter: CompositeFilterDescriptor): void {
+    this.filter = filter;
+    console.log(filter);
+  }
   private loadData(): void {
-    this.service.query({ skip: this.skip, take: this.pageSize, sort: this.sort });
+    this.service.query({ skip: this.skip, take: this.pageSize, sort: this.sort, filter: this.filter});
   }
 
   private photoURL(peopleId: any): string {
-    let url = this.auth.getUrl('avatar/') + peopleId;
-    console.log(url, peopleId);
+    const url = this.auth.getUrl('avatar/') + peopleId;
     return 'url("' + url + '")';
   }
 
+  public allowEdit(): boolean {
+    return this.auth.allowEditLoan();
+  }
+
 }

src/app/loan-add-new/loan-add-new.component.html

+
+<div class="container outer">
+  <div class="container">
+    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
+
+    <div style="margin-top:20px;"></div>
+
+    <div class="row">
+      <div class="col-sm-12">
+        <kendo-stepper
+          [steps]="steps"
+          [stepType]="'label'"
+          [(currentStep)]="currentStep"
+          [style.width.px]="570">
+        </kendo-stepper>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-9">
+        <div class="pane-content">
+          <form class="k-form" [formGroup]="form">
+            <app-loan-basic-info *ngIf="currentStep === 0" [basicInfo]="currentGroup"></app-loan-basic-info>
+            <app-loan-people-reward *ngIf="currentStep === 1" [peopleReward]="currentGroup"> </app-loan-people-reward>
+            <app-loan-trail-income *ngIf="currentStep === 2" [trailIncome]="currentGroup"> </app-loan-trail-income>
+
+            <span class="k-form-separator"></span>
+            <div class="k-form-buttons k-buttons-end">
+              <span class="page">Step {{ currentStep + 1 }} of 3</span>
+              <div>
+                <button class="k-button prev" *ngIf="currentStep !== 0" (click)="prev()">Previous</button>
+                <button class="k-button k-primary" (click)="next()" *ngIf="currentStep !== 2">Next</button>
+                <button class="k-button k-primary" (click)="submit()" *ngIf="currentStep === 2">Submit</button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+      <div class="col-sm-3">
+        <app-loan-edit-hint-card> </app-loan-edit-hint-card>
+      </div>
+      <div class="row">
+        <div class="col-sm-12">
+          <div class="vertical-spacer"></div>
+          <div class="vertical-spacer"></div>
+          <hr>
+          Proudly presented by Supercredit.com
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+
+

src/app/loan-add-new/loan-add-new.component.scss

+
+
+div.vertical-spacer {
+  margin-bottom: 30px;
+}

src/app/loan-add-new/loan-add-new.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoanAddNewComponent } from './loan-add-new.component';
+
+describe('LoanAddNewComponent', () => {
+  let component: LoanAddNewComponent;
+  let fixture: ComponentFixture<LoanAddNewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoanAddNewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoanAddNewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/loan-add-new/loan-add-new.component.ts

+import {Component, OnInit, ViewChild} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+import {StepperComponent} from '@progress/kendo-angular-layout';
+
+@Component({
+  selector: 'app-loan-add-new',
+  templateUrl: './loan-add-new.component.html',
+  styleUrls: ['./loan-add-new.component.scss']
+})
+export class LoanAddNewComponent implements OnInit {
+  public submitted: boolean ;
+  public currentStep = 0;
+  @ViewChild('stepper', { static: true })
+  public stepper: StepperComponent;
+
+
+
+  public steps = [
+    { label: 'Basic Info', isValid: true },
+    { label: 'People Reward', isValid: false },
+    { label: 'Trail Income', isValid: true },
+    { label: 'Payable', isValid: true, optional: true }
+  ];
+
+
+
+  public registerForm: FormGroup = new FormGroup({
+    transID: new FormControl(),
+    submissionDate: new FormControl(new Date(2020, 0, 10)),
+    status: new FormControl(),
+    lender: new FormControl('SuperCredit', Validators.required),
+    amount: new FormControl(100, [Validators.required , Validators.min(100), Validators.max(1000000000)]),
+    settlementDate: new FormControl(new Date(2020, 0, 9)),
+    description: new FormControl( '', Validators.maxLength(2000)),
+  });
+
+
+
+  public form = new FormGroup({
+    basicInfo: this.registerForm,
+    peopleReward: this.registerForm,
+    trailIncome :this.registerForm,
+    payable: this.registerForm
+  });
+
+  constructor() { }
+
+  public get currentGroup(): FormGroup {
+    return this.getGroupAt(this.currentStep);
+  }
+
+  private getGroupAt(index: number): FormGroup {
+    const groups = Object.keys(this.form.controls).map((groupName) => this.form.get(groupName)) as FormGroup[];
+    return groups[index];
+  }
+
+  public next(): void {
+    this.currentStep += 1;
+  }
+
+  public prev(): void {
+    this.currentStep -= 1;
+  }
+
+  public submit(): void {
+    this.submitted = true;
+
+    if (!this.form.valid) {
+      this.form.markAllAsTouched();
+      this.stepper.validateSteps();
+    }
+
+    console.log('Submitted data', this.form.value);
+  }
+
+
+
+  ngOnInit(): void {
+  }
+
+
+}

src/app/loan-edit/dist/loan-edit.component.js

     //form access
     //@ViewChild('birthDate', {static: true}) birthDate: LoanEditComponent;
     function LoanEditComponent() {
-        //popup 
+        //popup
         this.dialogOpened = false;
         this.windowOpened = false;
         //test
             limit: new forms_1.FormControl(),
             settlementDate: new forms_1.FormControl(new Date(2020, 0, 9))
         });
-        this.listClientNames = [
+        this.listLoanStatus = [
             { text: 'John', value: 1 },
             { text: 'Steven', value: 2 },
             { text: 'William', value: 3 }

src/app/loan-edit/hint-card/hint-card.component.html

+<kendo-card [width]="'360px'">
+  <kendo-card-header class="k-hbox">
+    <kendo-avatar
+      width="40px"
+      height="40px"
+      [imageSrc]="thumbnailSrc"
+      [shape]="'circle'"
+    ></kendo-avatar>
+    <div>
+      <h1 kendoCardTitle>bg_tourism</h1>
+      <p kendoCardSubtitle>Bulgaria, Europe</p>
+    </div>
+  </kendo-card-header>
+  <img [src]="cover" kendoCardMedia alt="cover_img" />
+  <kendo-card-body>
+    <h4>Black Sea, Bulgaria</h4>
+    <hr kendoCardSeparator />
+    <p>
+      The Black Sea is bordered by Ukraine, Romania, Bulgaria,
+      Turkey, Georgia, and Russia. It has a positive water
+      balance; that is, a net outflow of water 300 km3 per year
+      through the Bosphorus and the Dardanelles into the Aegean
+      Sea.
+    </p>
+  </kendo-card-body>
+  <kendo-card-actions orientation="horizontal" layout="stretched">
+    <button class="k-button k-flat" (click)="toggleLike()">
+      <span [ngClass]="heartIcon()"></span>
+      Like
+    </button>
+    <hr kendoCardSeparator [orientation]="'vertical'" />
+    <button class="k-button k-flat">
+      Share
+    </button>
+    <hr kendoCardSeparator [orientation]="'vertical'" />
+    <button class="k-button k-flat">
+      Read More
+    </button>
+  </kendo-card-actions>
+  <kendo-card-footer class="k-hbox">
+    <span>Created By @alex</span>
+    <span>March 4, 2020</span>
+  </kendo-card-footer>
+</kendo-card>

src/app/loan-edit/hint-card/hint-card.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HintCardComponent } from './hint-card.component';
+
+describe('HintCardComponent', () => {
+  let component: HintCardComponent;
+  let fixture: ComponentFixture<HintCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HintCardComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HintCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/loan-edit/hint-card/hint-card.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loan-edit-hint-card',
+  templateUrl: './hint-card.component.html',
+  styleUrls: ['./hint-card.component.scss']
+})
+export class HintCardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  // tslint:disable-next-line:max-line-length
+  public thumbnailSrc = 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/rila.jpg';
+  // tslint:disable-next-line:max-line-length
+  public cover = 'https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/black_sea.jpg';
+
+  public liked = false;
+
+  public toggleLike(): void {
+    this.liked = !this.liked;
+  }
+
+  public heartIcon(): string {
+    return this.liked ? 'k-icon k-i-heart' : 'k-icon k-i-heart-outline';
+  }
+}

src/app/loan-edit/loan-edit.component.scss

-.pane-content { padding: 0 10px; }
+.pane-content { padding: 0 10px; }
+
+

src/app/main-menu-items.ts

         icon: 'dollar',
         items: [
             { text: 'Add+', icon: 'plus', popup: "loanEdit" },
+            { text: 'Start New Loan', icon: 'plus', url: "./#start-a-new-loan" },
             { text: 'Edit', icon: 'plus', url: "./#transaction" },
             { text: 'List All old', icon: 'table' ,url: './#transaction-list' },
             { text: 'List All New', icon: 'table' ,url: './#list-all-loans' },

src/app/service/auth.service.ts

 
     public apiUrl = 'https://svr2021.lawipac.com:8080/api/v1/';
     public apiWsUrl = 'wss://svr2021.lawipac.com:8080/api/v1/ws';
-    public loggedIn = new apiV1LoginResponse(false, '','',0 );
+    public loggedIn = new apiV1LoginResponse(false, '', '',0 );
     loginSuccess = new EventEmitter <apiV1LoginResponse>();
 
     constructor( private http: HttpClient ,
         sfm.sessionExpire
       );
       this.loginSuccess.emit(this.loggedIn);
-      console.log ( 'auto login emit events',  this.loggedIn);
+      //console.log ( 'auto login emit events',  this.loggedIn);
     }
 
   // tslint:disable-next-line:typedef
       return this.loggedIn.login;
     }
 
+    allowEditLoan(): boolean{
+      return true;
+    }
+
   // tslint:disable-next-line:typedef
     login(email: string, password: string) {
 

src/app/service/loan_summary.service.ts

   }
 
   protected fetch(tableName: string, state: any): Observable<GridDataResult> {
-    const queryStr = `${toODataString(state)}&$count=true`;
+    // const queryStr = `${toODataString(state)}&$count=true`;
     this.loading = true;
 
     return this.http
-      .get<GridDataResult>(`${this.BASE_URL}${tableName}?${queryStr}`)
+      .post<GridDataResult>(`${this.BASE_URL}${tableName}`, state)
       .pipe(
         map(response => {
-          console.log( response.data[0]['Settlement']);
-          console.log( response.data[0]['LastPayInDate']);
+          response.data.forEach( (value, index) =>{
+              response.data[index].Settlement = this.convertToDateTimeObject(value.Settlement);
+              response.data[index].LastPayInDate = this.convertToDateTimeObject(value.LastPayInDate);
+              // console.log(index, response.data[index].Settlement , typeof response.data[index].Settlement );
+              // console.log(index, response.data[index].LastPayInDate , typeof response.data[index].LastPayInDate );
+          });
+          console.log(response);
           return response;
         }),
         tap(() => this.loading = false)
       );
   }
+
+  public convertToDateTimeObject(str: string): Date{
+    if (str === '0001-01-01T00:00:00Z' || str === ''){
+      return null; //new Date('1900-12-31T13:00:00.000Z');
+    }else{
+      return new Date(str);
+    }
+  }
 }
 
 @Injectable()