summary page is done

front-end/css/summary.css

     z-index: -1;
 }
 
-#menu {
-    z-index: 100;
-}
 .summary_layout {
     margin-top: 0px;
     margin-left: auto;
     opacity: 90%;
 }
 
-.login_form {
-    margin: auto;
-    box-shadow: 3px 3px 16px #888888 ;
+.my_menu {
+    opacity: 80%;
+}
+
+#footerbg {
+    object-fit: cover;
 }
 
+.Label{
+    background-color: lightgray;
+}
+.footer {
+    background-image: url(../img/footer.png);
+}

front-end/data/demo_table.json

+[
+	{
+		"id": 1,
+		"title": "74 Plantation Place FOSTERS VALLEY NSW 2795, Samuel Donoghue, ",
+		"year": "2020-05-01",
+		"votes": 678790,
+		"rating": 9200,
+		"rank":  1230,
+		"category": "NAB bank"
+	},
+	{
+		"id": 2,
+		"title": "5 Ross Street MOUNT NATHAN QLD 4211. Savannah Barclay",
+		"year": "2020-06-01",
+		"votes": 511495,
+		"rating": 8900,
+		"rank": 3002,
+		"category": "Resimac"
+	},
+	{
+		"id": 3,
+		"title": "22 Little Myers Street BROOKFIELD VIC 3338, Rose Piesse",
+		"year": "2019-05-01",
+		"votes": 319352,
+		"rating": 5900,
+		"rank": 2000,
+		"category": "Connective"
+	},
+	{
+		"id": 4,
+		"title": "32 Banksia Street YERECOIN WA 6571, Caitlyn Tauchert",
+		"year": "2018-05-01",
+		"votes": 213030,
+		"rating": 8972,
+		"rank": 4000,
+		"category": "West PAC"
+	},
+	{
+		"id": 5,
+		"title": "36 Avondale Drive NORTH MACQUARIE NSW 2527, Madison Balcombe",
+		"year": "2020-01-01",
+		"votes": 533848,
+		"rating": 7891,
+		"rank": 5000,
+		"category": "CommonWealth Bank"
+	},
+	{
+		"id": 6,
+		"title": "90 Redesdale Rd LOCKWOOD VIC 3551, Aiden Brazenor",
+		"year": "2020-10-01",
+		"votes": 164558,
+		"rating": 18900,
+		"rank": 6000,
+		"category": "Pepper"
+	}
+]

front-end/js/common.js

 							"icon": "wxi-dots",
 							"submenu": [
 								{ "value": "Summary", "icon": "wxi-calendar" , "href": "javascript:show_summary();"},
-								{ "value": "Pending Jobs", "icon": "mdi mdi-notebook-check", "href": "pending_job.html" },
 								{ "value": "Mass Mailing", "icon": "mdi mdi-email", "href": "mass_mailing.html" },
 								{ "$template": "Separator" },
 								{ "value": "Logout", "icon": "mdi mdi-exit-run", "href" : "login.html" }
         };
 
 function toggle_sidemenu(){
+    return ;
     if( $$("menu").config.hidden){
         $$("menu").show();
     }

front-end/js/demo_data.js

     { id:7, value:"Finished", details:"by Rosa White, poisslb new refinance in next month.", date:"2018-03-21"}
   ];
 
+var demo_summary_loan_counts = [
+    { id:1, value:"Clients Acquired: 200  Convertsion rate 10%", date:"2020-10-01"},
+    { id:2, value:"Loans applied 150 in AU Approval rate 99%", details:"by Malcolm Merlyn", date:"2020-10-01" },
+    { id:3, value:"Referal Loans 20", details:"Exceed $1,000,000", date:"2020-10-11" },
+    { id:5, value:"Meetings Conducted 20", details: "reported to reginal manager already" , date:"2020-10-12" },
+    { id:6, value:"Pending Loans as of 12", details: "Not including NAB bank" , date:"2018-03-15" },
+    { id:7, value:"To Be Finished  2", details:"by Rosa White,poisslb new refinance in next month.", date:"2020-10-21"}
+  ];
+
 var demo_peple =
 [
 	{ "id": "1", "value": "John Smith" },

front-end/js/summary.js

               {
                 view: "icon", icon: "mdi mdi-menu",
                 click: function(){
+                  return ; //disable side menu
                   if( $$("menu").config.hidden){
                     $$("menu").show();
                   }
               },
               {
                 view: "label",
-                label: ""
+                label: "Supercredit Transactions"
               }
             ]
         },
-		{ "view": "template", id:"worksapce", "template": "Content", "role": "placeholder" },
-		{ "view": "template", id:"footer", "template": "Footer ", "role": "placeholder", "height": 50 }
+        { id:"workspace", rows:[
+            { template:"loading ...." }
+        ]},
+        { "view": "template", id:"footer", css: "footer",  "template": "", "role": "placeholder", "height": 20 }
 	]
 }
 
           scroll: false,
           template: "<span class='webix_icon mdi mdi-#icon#'></span> #value#",
           data:[
-            {id: 1, value: "Customers", icon: "account"},
-            {id: 2, value: "Products", icon: "cube"},
-            {id: 3, value: "Reports", icon: "chart-bar"},
-            {id: 4, value: "Archives", icon: "database"},
-            {id: 5, value: "Settings", icon: "cogs"}
+            {id: 1, value: "All", icon: "briefcase-account"},
+            {id: 2, value: "upfront", icon: "account-arrow-left"},
+            {id: 3, value: "Trail", icon: "account"},
+            {id: 4, value: "Procesing", icon: "cube"},
+            {id: 5, value: "App in Progress", icon: "chart-bar"},
+            {id: 6, value: "Approved", icon: "database"},
+            {id: 7, value: "Settled", icon: "cash-usd"},
+            {id: 8, value: "Finished", icon: "cogs"}
           ],
           select:true,
           type:{
     initTopMenu($$('summary_layout'), $$('topMenu'));
 });
 
+
+//summary data
+var summary_graph = {
+	"cols": [
+		{
+            "width": 200,
+            "css" : "Label",
+			"rows": [
+				{ "padding": { "left": 10 },
+					"cols": [
+						{ "view": "label", "label": "Brokers" },
+						{ "view": "icon", "icon": "wxi-search" }
+					]
+				},
+				{ "view": "list", "url": "data/staff.json", "select": "true" }
+			]
+		},
+		{
+			"rows": [
+                {
+                    "view":"timeline", 
+                    "layout": "x",
+                    "height": 200,
+                    "data": demo_summary_loan_counts,
+                    "scroll": false
+                },
+				{
+					"cols": [
+                        { "view": "chart", "width": 400, "pieInnerText": "#value#", "label": "#month#", "url": "data/demo_chart.json" },
+                        { "view": "chart", "type": "spline", "xAxis": { "template": "#value#", "lines": false },
+                            "yAxis": {},
+                            "url": "data/demo_chart.json"
+                        },
+    
+						{ "view": "chart", "type": "barH", "yAxis": { "template": "#value#" },
+							"xAxis": {},
+							"color": "#color#",
+							"url": "data/demo_chart.json"
+						}
+					]
+				},
+				{
+					"view": "datatable",
+					"columns": [
+						{ "id": "title", "header": "Loan description", "fillspace": true, "sort": "string" },
+						{ "id": "year", "header": "Date", "sort": "string" },
+						{ "id": "votes", "header": "Loan Amount", "sort": "string" },
+						{ "id": "rating", "header": "Upfront", "sort": "string" },
+						{ "id": "rank", "header": "Tail paid", "sort": "string" },
+						{ "id": "category", "header": "Lender", "sort": "string", "width": 200 }
+					],
+					"url": "data/demo_table.json"
+				}
+			]
+		}
+	]
+}
+
 function show_summary() {
-    alert("ok");
-}
+  webix.ui(summary_graph, $$('summary_layout').getChildViews()[1]);
+}
+
+webix.ready(function(){
+    show_summary();
+});