data table with Total amount below.

front-end/data/summary.json

@@ -0,0 +1,28 @@
+[
+    { "id":1, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},
+    { "id":2, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":3, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":4, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":5, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":6, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":7, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":8, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":9, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":10, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":11, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":12, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":13, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":14, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":15, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":16, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":17, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":18, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":19, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":20, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":21, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":22, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":23, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":24, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":25, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"},   
+    { "id":26, "funder":"Pepper", "customer": "Kim Son Dang", "settlement": "3/06/2020", "loadamount": "$616,000.00", "commission": "90%", "net": "$6,160.00", "gst": "$616.00", "gross": "$6776.00", "pay2broker": "$5544.00"}    
+]

front-end/js/dashboard.js

@@ -2,14 +2,11 @@
 
 var dashboard = {
 	"type": "wide",
-	"css" : "dashboard",
+	"css": "dashboard",
 	"rows": [
 		{ "view": "toolbar", "css": "webix_dark", "padding": { "right": 10, "left": 10 },
 			"elements": [
-				{
-					"view": "menu",
-					"id": "menu",
-					"subMenuPos": "bottom",
+				{ "view": "menu", "id": "menu", "subMenuPos": "bottom", "submenuConfig": { "autowidth": true },
 					"data": [
 						{
 							"value": "SFM",
@@ -23,16 +20,23 @@ var dashboard = {
 							]
 						},
 						{
-							"value": "Transactions",
+							"value": "Loans",
+							"autowidth": true,
 							"icon": "mdi mdi-bank-transfer",
-							"submenu": [
-								{ "value": "Add", "icon": "mdi mdi-table-column-plus-before" },
-								{ "value": "Export", "icon": "mdi mdi-file-export" },
-								{ "value": "Import", "icon": "mdi mdi-file-upload" },
-								{ "$template": "Separator" },
-								{ "value": "Payment to Broker", "icon": "mdi mdi-file-upload" },
-								{ "value": "Pending", "icon": "mdi mdi-file-upload" },
-							]
+							"submenu": {
+								"data": [
+									{ "value": "Add", "icon": "mdi mdi-table-column-plus-before" },
+									{ "$template": "Separator" },
+									{ "value": "Export", "icon": "mdi mdi-file-export" },
+									{ "value": "Import", "icon": "mdi mdi-file-upload" },
+									{ "$template": "Separator" },
+									{ "value": "New", "icon": "mdi mdi-file-export", "badge": "20" },
+									{ "value": "Submitted", "icon": "mdi mdi-file-upload", "badge": "50" },
+									{ "value": "Approved", "icon": "mdi mdi-file-upload", "badge": "35" },
+									{ "value": "Rejected", "icon": "mdi mdi-file-upload", "badge": "10" },
+									{ "value": "Settled", "icon": "mdi mdi-file-upload", "badge": "99" }
+								]
+							}
 						},
 						{
 							"value": "Clients",
@@ -45,11 +49,14 @@ var dashboard = {
 						},
 						{
 							"value": "Broker",
-							"icon" : "mdi mdi-account-details",
+							"icon": "mdi mdi-account-details",
 							"submenu": [
 								{ "value": "Add", "icon": "mdi mdi-account-plus" },
 								{ "value": "Search", "icon": "mdi mdi-account-search" },
-								{ "value": "Broadcast", "icon": "mdi mdi-account-off" }
+								{ "$template": "Separator" },
+								{ "value": "Broadcast", "icon": "mdi mdi-account-off" },
+								{ "$template": "Separator" },
+								{ "value": "Unpaid", "icon": "mdi mdi-file-upload" }
 							]
 						}
 					],
@@ -63,43 +70,88 @@ var dashboard = {
 			"cols": [
 				{
 					"rows": [
-						{ "view": "tree", "url": "demo->5f82268d61c7b80018b278d2", "select": true },
-						{ "weekHeader": true, "view": "calendar" }
-					]
+						{ "url": "demo->5f82268d61c7b80018b278d8", "view": "list", "height": 0 },
+						{
+							"url": "demo->5f82268d61c7b80018b278d5",
+							"type": "bar",
+							"xAxis": "#value#",
+							"yAxis": {},
+							"view": "chart",
+							"height": 229
+						}
+					],
+					"width": 248
 				},
 				{
-					"rows": [
+					"width":0 ,
+					"rows" : [
 						{
 							"view": "datatable",
 							"columns": [
-								{ "id": "title", "header": "Title", "fillspace": true, "sort": "string" },
-								{ "id": "year", "header": "Year", "sort": "string" },
-								{ "id": "votes", "header": "Votes", "sort": "string" },
-								{ "id": "rating", "header": "Rating", "sort": "string" },
-								{ "id": "rank", "header": "Rank", "sort": "string" },
-								{ "id": "category", "header": "Category", "sort": "string" }
+								{ "id": "funder", "header": "Funder", "fillspace": true, "sort": "string" },
+								{ "id": "customer", "header": "Customers", "sort": "string", "width": 200 },
+								{ "id": "settlement", "header": "Settlement date", "sort": "string" },
+								{ "id": "loanamount", "header": "Loan Amount", "sort": "string" },
+								{
+									"id": "commission",
+									"header": "Commission Margin",
+									"sort": "string",
+									"width": 200,
+									"fillspace": false,
+									"hidden": false,
+									"css": "{'text-align':'center'}"
+								},
+								{
+									"id": "net",
+									"header": "Net Amount",
+									"sort": "string",
+									"width": 150,
+									"fillspace": false,
+									"hidden": false
+								},
+								{ "id": "gst", "header": "GST", "fillspace": false, "hidden": false },
+								{ "id": "gross", "header": "Gross Amount", "fillspace": false, "hidden": false },
+								{ "id": "pay2broker", "header": "Pay to Broker", "width": 200, "fillspace": false, "hidden": false }
 							],
 							"select": true,
 							"scrollX": false,
-							"url": "demo->5f82268d61c7b80018b278d4"
+							"url" : "data/summary.json",
+							"width": 0
 						},
 						{
-							"type": "clean",
-							"view": "form",
-							"minHeight": 380,
-							"elements": [
+							"view": "datatable",
+							"columns": [
+								{ "id": "funder", "header": "", "fillspace": true, "sort": "string" },
+								{ "id": "customer", "header": "", "sort": "string", "width": 200 },
+								{ "id": "settlement", "header": " ", "sort": "string" },
+								{ "id": "loanamount", "header": " ", "sort": "string" },
 								{
-									"rows": [
-										{ "view": "multicombo", "label": "To", "value": "2,3", "options": "demo->5f82268d61c7b80018b278d7" },
-										{ "view": "text", "label": "Subject", "height": 0 },
-										{ "view": "textarea", "label": "Message" }
-									]
+									"id": "commission",
+									"header": " ",
+									"sort": "string",
+									"width": 200,
+									"fillspace": false,
+									"hidden": false,
+									"css": "{'text-align':'center'}"
 								},
-								{ "view": "button", "value": "Send Message", "css": "webix_primary", "align": "center", "inputWidth": 200 }
-							]
+								{
+									"id": "net",
+									"header": " ",
+									"sort": "string",
+									"width": 150,
+									"fillspace": false,
+									"hidden": false
+								},
+								{ "id": "gst", "header": "", "fillspace": false, "hidden": false },
+								{ "id": "gross", "header": "", "fillspace": false, "hidden": false },
+								{ "id": "pay2broker", "header": "Total", "width": 200, "fillspace": false, "hidden": false }
+							],							
+							"height": 200,
+							"url" : "data/summary.json"
 						}
 					]
-				}
+				},
+
 			]
 		}
 	]